/* Pflege- und Seniorenwohnen Ammertal – Stylesheet (Schriften lokal, keine externen Quellen) */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --creme:#F6F2EA; --sand:#EFE8DB; --linie:#D9CFBD; --weiss:#FFFFFF;
  --tinte:#1F2A24; --text:#3E4842; --grau:#5A645E;
  --gruen:#2E4A3B; --gruen-dunkel:#1C3026; --messing:#7A5E2E;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--creme);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gruen)} a:hover{color:var(--gruen-dunkel)}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--weiss);padding:10px 16px;z-index:10}
.skip:focus{left:16px;top:16px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.eyebrow{margin:0 0 14px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--messing)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0;color:var(--tinte)}
h1{font-size:clamp(40px,6vw,58px);line-height:1.05;margin-bottom:20px}
h2{font-size:clamp(34px,4.4vw,46px);margin-bottom:24px}
h3{font-weight:600;font-size:30px;line-height:1.15}
p{margin:0 0 18px;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;border-radius:2px;letter-spacing:.04em;text-decoration:none;font:inherit;cursor:pointer}
.btn-primaer{background:var(--gruen);color:var(--weiss);border:0}
.btn-primaer:hover{background:var(--gruen-dunkel);color:var(--weiss)}
.btn-rahmen{border:1px solid var(--tinte);color:var(--tinte);background:transparent}
.btn-rahmen:hover{background:var(--tinte);color:var(--weiss)}
.buttons{display:flex;flex-wrap:wrap;gap:14px}
.icon{width:18px;height:18px;flex-shrink:0}

/* Kopf */
.kopf{border-bottom:1px solid #E2DACB;background:var(--creme)}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinte)}
.marke img{width:48px;height:48px;object-fit:contain;mix-blend-mode:multiply}
.marke span{display:flex;flex-direction:column;line-height:1.15}
.marke strong{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:.02em}
.marke small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-size:15px;letter-spacing:.04em}
.nav a{text-decoration:none;color:var(--tinte);padding:10px 0}
.nav a:hover{color:var(--gruen)}
.nav a.btn{padding:0 22px;color:var(--weiss)}

/* Hero */
.hero-bild{width:100%;height:640px;object-fit:cover;object-position:center 60%}
.hero-karte-wrap{margin-top:-180px;position:relative}
.hero-karte{background:var(--weiss);max-width:680px;padding:48px 52px;box-shadow:0 20px 50px rgba(31,42,36,.12)}
.hero-karte p.lead{margin-bottom:32px}

/* Zahlen */
.zahlen{margin-top:72px}
.zahlen ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.zahlen li{flex:1 1 220px;padding:28px 24px;display:flex;flex-direction:column;gap:4px}
.zahlen b{font-family:var(--serif);font-weight:500;font-size:46px;line-height:1;color:var(--gruen)}
.zahlen span{font-size:15px;color:var(--grau)}

/* Zweispalter */
.abschnitt{padding:112px 0}
.zwei{display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.zwei > *{flex:1 1 440px;min-width:0}
.zwei.umgekehrt{flex-wrap:wrap-reverse}
.bild-hoch{width:100%;height:520px;object-fit:cover}
.bildpaar{display:flex;gap:16px}
.bildpaar img:first-child{width:62%;height:520px;object-fit:cover}
.bildpaar img:last-child{width:38%;height:520px;object-fit:cover;margin-top:56px}

/* Angebot */
.sand{background:var(--sand)}
.mitte{text-align:center;margin-left:auto;margin-right:auto;max-width:760px}
.karten{display:flex;flex-wrap:wrap;gap:28px;margin-top:56px}
.karte{flex:1 1 320px;min-width:0;background:var(--weiss);display:flex;flex-direction:column}
.karte img{width:100%;height:260px;object-fit:cover}
.karte div{padding:32px 32px 36px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.karte p{margin:0;flex-grow:1}

/* Listen */
.liste{margin:0 0 28px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.liste li{padding-left:28px;position:relative;color:var(--text)}
.liste li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:1px;background:var(--messing)}

/* Betreutes Wohnen */
.gruen{background:var(--gruen);color:var(--creme)}
.gruen h2,.gruen h3{color:var(--weiss)}
.gruen p{color:#E8E2D4}
.gruen .eyebrow{color:#D9C9A3}
.gruen .zwei{align-items:flex-start}
.vier{display:flex;flex-wrap:wrap;gap:28px 40px;margin:8px 0 32px}
.vier div{flex:1 1 220px;min-width:0}
.vier h3{font-size:24px;margin-bottom:8px}
.vier p{font-size:16px;margin:0}
.probe{border-top:1px solid rgba(246,242,234,.3);padding-top:24px}
.probe p{color:var(--weiss);margin:0}
.probe em{font-family:var(--serif);font-size:24px}
.bildstapel{display:flex;flex-direction:column;gap:16px}
.bildstapel img:first-child{height:380px;width:100%;object-fit:cover}
.bildstapel img:last-child{height:280px;width:100%;object-fit:cover}

/* Haus */
.kopfzeile{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:flex-end;margin-bottom:48px}
.kopfzeile > *{flex:1 1 440px;min-width:0}
.kopfzeile h2{margin:0}
.kopfzeile p{margin:0}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.galerie figure{margin:0;min-width:0}
.galerie figure.breit{grid-column:1/-1}
.galerie img{width:100%;height:300px;object-fit:cover}
.galerie figure.breit img,.galerie figure.hoch img{height:360px}
.galerie figcaption{margin-top:10px;font-size:14px;color:var(--grau)}
.nach-galerie{margin:40px 0 0;max-width:820px}

/* Lage */
.lage{position:relative;background:var(--tinte)}
.lage img{width:100%;height:560px;object-fit:cover;opacity:.62}
.lage .text{position:absolute;left:0;right:0;bottom:0;padding-bottom:72px}
.lage h2{color:var(--weiss);max-width:760px;font-size:clamp(34px,4.6vw,50px);margin-bottom:20px}
.lage p{color:var(--weiss);max-width:680px;margin:0}
.lage .eyebrow{color:#F0E3C4}

/* Karriere */
.stellen{display:flex;flex-wrap:wrap;gap:28px}
.stelle{flex:1 1 440px;min-width:0;border:1px solid var(--linie);background:var(--weiss);padding:40px}
.stelle h3{font-size:32px;margin-bottom:6px}
.stelle .sub{font-size:15px;color:var(--grau);margin-bottom:20px}
.stelle ul{margin:0 0 28px;padding-left:20px;color:var(--text)}
.stelle li{margin-bottom:6px}

/* Kontakt */
.kontakt .zwei{align-items:flex-start}
.kontaktliste{display:flex;flex-direction:column;gap:20px;margin-top:36px}
.kontaktliste div{display:flex;gap:16px;align-items:flex-start}
.kontaktliste svg{width:22px;height:22px;flex-shrink:0;margin-top:4px;stroke:var(--gruen)}
.kontaktliste a{color:var(--tinte)}
.formular{background:var(--weiss);padding:44px;display:flex;flex-direction:column;gap:18px}
.reihe{display:flex;flex-wrap:wrap;gap:18px}
.reihe > div{flex:1 1 200px;min-width:0}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:14px;color:var(--text)}
.feld input,.feld textarea{min-height:48px;padding:10px 14px;border:1px solid #C9BFAE;background:#FBF9F5;font:inherit;color:var(--tinte);border-radius:2px;width:100%}
.feld textarea{resize:vertical;min-height:140px}
.feld input:focus,.feld textarea:focus{border-color:var(--gruen);outline:2px solid rgba(46,74,59,.25);outline-offset:0}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text)}
.zustimmung input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gruen);flex-shrink:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.hinweis{font-size:13px;color:var(--grau);margin:0}
.formular .btn{align-self:flex-start;min-height:52px;padding:0 32px}

/* Fuß */
.fuss{background:var(--tinte);color:#D9D4C8;padding:64px 0 40px}
.fuss .wrap > div{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.fuss .name{font-family:var(--serif);font-size:30px;color:var(--weiss);margin:0 0 6px}
.fuss p{color:#D9D4C8;font-size:15px;margin:0}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 28px;align-content:flex-start;font-size:15px}
.fuss a{color:var(--creme)}
.fuss .copy{margin-top:48px;padding-top:24px;border-top:1px solid rgba(246,242,234,.18);font-size:13px;color:#B9B3A6}

/* Rechtstexte / Unterseiten */
.recht{max-width:820px;margin:0 auto;padding:80px 24px 112px}
.recht h1{font-size:clamp(38px,5vw,52px);margin-bottom:32px}
.recht h2{font-size:30px;margin:44px 0 14px}
.recht h3{font-size:22px;margin:28px 0 10px}
.recht p,.recht li{color:var(--text)}
.recht ul{padding-left:22px;margin:0 0 18px}
.recht .stand{margin-top:48px;font-size:14px;color:var(--grau)}
.meldung{max-width:720px;margin:0 auto;padding:120px 24px;text-align:center}
.meldung .buttons{justify-content:center;margin-top:28px}

@media (max-width:720px){
  body{font-size:16px}
  .abschnitt{padding:72px 0}
  .hero-bild{height:420px}
  .hero-karte-wrap{margin-top:-96px}
  .hero-karte{padding:32px 26px}
  .bild-hoch{height:340px}
  .bildpaar img:first-child,.bildpaar img:last-child{height:340px}
  .bildpaar img:last-child{margin-top:32px}
  .bildstapel img:first-child{height:260px}
  .bildstapel img:last-child{height:200px}
  .lage img{height:620px}
  .lage .text{padding-bottom:48px}
  .formular{padding:28px 22px}
  .stelle{padding:28px}
  .zwei{gap:40px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Fixiertes Menue ab Tablet-Breite (auf dem Handy bleibt es normal, um Platz zu sparen) */
@media (min-width:900px){
  .kopf{position:sticky;top:0;z-index:50;background:rgba(246,242,234,.97);box-shadow:0 1px 0 #E2DACB}
  html{scroll-padding-top:100px}
}