:root{
  --rot:#c17a6e; --rot-dunkel:#a86055; --rot-tief:#8c4d44;
  --gruen:#b5cd9b; --gruen-tief:#5e7c46;
  --creme:#fdf9f4; --creme-tief:#f7ede3; --creme-warm:#f0e2d4;
  --tinte:#3b312c; --tinte-weich:#6e6057; --linie:#ead9cb;
  --radius:18px; --schatten:0 14px 40px rgba(140,77,68,.10);
  --wrap:1060px; --lesebreite:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--creme); color:var(--tinte);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.1875rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1rem}
em{font-style:italic; color:var(--rot-dunkel)}
a{color:var(--rot-dunkel)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.kicker{display:inline-block; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.82rem; color:var(--gruen-tief); margin-bottom:.5rem}
.sub{font-size:1.12rem; color:var(--tinte-weich); max-width:40ch}

/* Buttons */
.knopf{display:inline-flex; align-items:center; gap:.55rem; background:var(--rot); color:#fff;
  font-weight:700; font-size:1.05rem; padding:.95rem 1.5rem; border-radius:999px; text-decoration:none;
  border:2px solid var(--rot); box-shadow:0 8px 22px rgba(176,27,27,.26); transition:.15s}
.knopf:hover{background:var(--rot-dunkel); border-color:var(--rot-dunkel); transform:translateY(-1px)}
.knopf.leise{background:#fff; color:var(--rot-tief); border-color:var(--creme-warm); box-shadow:none}
.knopf.leise:hover{background:var(--creme-tief)}
.knopf svg{width:1.2em; height:1.2em; flex:none}
:focus-visible{outline:3px solid var(--gruen-tief); outline-offset:3px; border-radius:6px}

/* Kopfleiste */
.nav{position:sticky; top:0; z-index:40; background:rgba(255,253,249,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie)}
.nav .in{max-width:var(--wrap); margin:0 auto; padding:.7rem 22px; display:flex; align-items:center; gap:1.2rem}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--tinte)}
.logo .mark{width:46px; height:46px; flex:none; object-fit:contain}
.logo small{display:none}
.logo b{font-family:"Fraunces",serif; font-weight:600; font-size:1.3rem; color:var(--rot-tief); display:block; line-height:1}
.logo small{font-size:.74rem; letter-spacing:.04em; color:var(--tinte-weich)}
.nav .mitte{display:none; gap:1.3rem; margin-left:auto}
.nav .mitte a{text-decoration:none; color:var(--tinte); font-weight:700; font-size:.98rem; white-space:nowrap}
.nav .mitte a:hover{color:var(--rot-dunkel)}
.nav .tel{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; text-decoration:none; color:var(--tinte)}
.nav .tel b{color:var(--rot-tief); font-size:1.18rem; font-family:"Fraunces",serif}
.nav .tel small{color:var(--tinte-weich); font-size:.72rem}
@media(min-width:980px){ .nav .mitte{display:flex} .nav .tel{margin-left:1.5rem} }

/* Hero */
.hero{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-tief) 100%); padding:3.2rem 0 1rem; position:relative; overflow:hidden}
.hero .grid{display:grid; gap:1.6rem; align-items:center;
  grid-template-columns:1fr; grid-template-areas:"text" "ctas" "media"}
.hero .htext{grid-area:text}
.hero .hctas{grid-area:ctas}
.hero .bild{grid-area:media}
.hero h1 .akz{color:var(--rot); font-style:italic}
.hero .sub{font-size:1.2rem; max-width:34ch}
.ctas{display:flex; flex-wrap:wrap; gap:.8rem}
.hero .ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem}
.hero .bild{position:relative; aspect-ratio:1/1; max-width:470px; margin:0 auto;
  display:flex; align-items:center; justify-content:center}
.hero .bild svg{width:62%; height:62%}
.hero .bild img{width:100%; height:100%; object-fit:contain; display:block}
/* Nur das Herz pulsiert (Simon 159996/159998): freigestelltes Herz deckungsgleich darüber, sanfter Lub-Dub aus der Herzmitte */
.hero .bild .bild-herz{position:absolute; inset:0; transform-origin:51.4% 39.3%;
  animation:herzschlag 1.5s ease-in-out infinite; pointer-events:none; will-change:transform}
@keyframes herzschlag{
  0%{transform:scale(1)} 11%{transform:scale(1.055)} 21%{transform:scale(1)}
  31%{transform:scale(1.03)} 42%{transform:scale(1)} 100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){ .hero .bild .bild-herz{animation:none} }
@media(min-width:900px){
  .hero{padding:4.5rem 0 2rem}
  /* Desktop: Text links über volle Höhe, Bild oben rechts, Buttons unter dem Bild (Simon 160027) */
  .hero .grid{grid-template-columns:1.1fr .9fr; grid-template-areas:"text media" "text ctas";
    align-items:start; column-gap:2.6rem; row-gap:.4rem}
  .hero .htext{align-self:center}
  .hero .bild{align-self:start; margin-top:-1.4rem}
  .hero .hctas{align-self:start}
  .hero .hctas .ctas{justify-content:center; margin-top:.4rem}
}

/* Einstiegs-Kacheln (E3) */
.einstieg{margin-top:2rem}
.einstieg h2{text-align:center}
.wege{display:grid; gap:1rem; margin-top:1.4rem}
.weg{display:flex; align-items:flex-start; gap:1rem; background:#fff; border:1.5px solid var(--linie);
  border-radius:var(--radius); padding:1.3rem 1.4rem; text-decoration:none; color:var(--tinte);
  box-shadow:0 6px 18px rgba(140,77,68,.05); transition:.15s}
.weg:hover{border-color:var(--rot); transform:translateY(-2px); box-shadow:var(--schatten)}
.weg .ic{width:54px; height:54px; flex:none; border-radius:14px; background:var(--gruen); color:var(--gruen-tief);
  display:flex; align-items:center; justify-content:center}
.weg .ic svg{width:28px; height:28px}
.weg h3{margin:.1rem 0 .25rem; color:var(--rot-tief)}
.weg p{margin:0; color:var(--tinte-weich); font-size:1rem}
.weg .pfeil{margin-left:auto; align-self:center; color:var(--rot); font-size:1.5rem; font-weight:700}
@media(min-width:820px){ .wege{grid-template-columns:repeat(3,1fr)} .weg{flex-direction:column} .weg .pfeil{display:none} }

/* Badges / das Wichtigste */
.badges{background:#fff; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie)}
.badges .wrap{display:grid; gap:1rem 1.6rem; padding-top:1.6rem; padding-bottom:1.6rem; grid-template-columns:1fr 1fr}
.badge{display:flex; gap:.7rem; align-items:flex-start; font-weight:700; font-size:1rem}
.badge .ok{color:var(--gruen-tief); flex:none; margin-top:1px}
@media(min-width:820px){ .badges .wrap{grid-template-columns:repeat(4,1fr)} }

section{padding:3.4rem 0}
section.creme{background:var(--creme-tief)}
section.warm{background:linear-gradient(180deg,var(--creme-tief),var(--creme-warm))}
.mittig{text-align:center; margin:0 auto 2rem; max-width:46ch}
.mittig .sub{margin:0 auto}

/* Gruß */
.gruss{background:var(--creme-warm); border-left:6px solid var(--rot); border-radius:12px;
  padding:2rem 2.2rem; max-width:var(--lesebreite); margin:0 auto}
.gruss p{font-family:"Fraunces",serif; font-size:clamp(1.3rem,2.4vw,1.7rem); font-style:italic; color:var(--tinte); line-height:1.4}
.gruss .wer{display:block; margin-top:1rem; font-family:"Atkinson Hyperlegible",sans-serif; font-style:normal; font-weight:700; font-size:1rem; color:var(--rot-tief)}

/* Leistungs-Kacheln */
.kacheln{display:grid; gap:1.2rem; grid-template-columns:1fr}
@media(min-width:640px){ .kacheln{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .kacheln.drei{grid-template-columns:repeat(3,1fr)} }
.karte{background:#fff; border:1.5px solid var(--linie); border-radius:var(--radius); padding:1.4rem; box-shadow:0 6px 18px rgba(140,77,68,.05)}
.karte .ic{width:48px; height:48px; border-radius:12px; background:var(--creme-tief); color:var(--gruen-tief);
  display:flex; align-items:center; justify-content:center; margin-bottom:.8rem}
.karte .ic svg{width:26px; height:26px}
.karte h3{color:var(--rot-tief); margin-bottom:.3rem}
.karte p{margin:0; color:var(--tinte-weich); font-size:1rem}
.hinweis-privat{text-align:center; margin-top:1.4rem; color:var(--tinte-weich)}

/* Preise */
.preise{display:grid; gap:1.3rem; grid-template-columns:1fr; max-width:860px; margin:0 auto}
@media(min-width:760px){ .preise{grid-template-columns:1fr 1fr} }
.preis{background:#fff; border:2px solid var(--linie); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--schatten)}
.preis.empf{border-color:var(--gruen)}
.preis .tag{display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gruen-tief); background:#eaf5ea; padding:.25rem .7rem; border-radius:999px; margin-bottom:.8rem}
.preis.privat .tag{color:var(--rot-tief); background:#fbe9e9}
.preis .euro{font-family:"Fraunces",serif; font-size:2.6rem; font-weight:600; color:var(--tinte); line-height:1}
.preis .euro small{font-size:1rem; font-weight:400; color:var(--tinte-weich); font-family:"Atkinson Hyperlegible",sans-serif}
.preis ul{list-style:none; margin:1.1rem 0 0; padding:0}
.preis li{display:flex; gap:.6rem; align-items:flex-start; padding:.4rem 0; font-size:1rem; color:var(--tinte)}
.preis li .ok{color:var(--gruen-tief); flex:none; margin-top:2px}
.preis .bsp{margin-top:1rem; background:var(--creme-tief); border-radius:10px; padding:.7rem .9rem; font-size:.95rem; color:var(--tinte-weich)}
.erklaer{max-width:760px; margin:1.8rem auto 0; background:#eef6ef; border:1px solid #d5e8d6; border-radius:14px; padding:1.3rem 1.5rem}
.erklaer h3{color:var(--gruen-tief); font-size:1.2rem}
.erklaer p{margin:0; color:var(--tinte-weich); font-size:1rem}

/* Für wen */
.liste{columns:2; column-gap:2.4rem; max-width:760px; margin:0 auto; list-style:none; padding:0}
.liste li{break-inside:avoid; display:flex; gap:.6rem; align-items:flex-start; padding:.45rem 0; font-size:1.05rem}
.liste li .ok{color:var(--gruen-tief); flex:none; margin-top:3px}
@media(max-width:560px){ .liste{columns:1} }

/* Ablauf */
.schritte{display:grid; gap:1.2rem; counter-reset:s; grid-template-columns:1fr}
@media(min-width:720px){ .schritte{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .schritte{grid-template-columns:repeat(4,1fr)} }
.schritt{background:#fff; border:1.5px solid var(--linie); border-radius:var(--radius); padding:1.4rem; position:relative}
.schritt .nr{width:40px; height:40px; border-radius:50%; background:var(--rot); color:#fff; font-family:"Fraunces",serif;
  font-size:1.3rem; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem}
.schritt h3{font-size:1.15rem; color:var(--rot-tief)}
.schritt p{margin:0; color:var(--tinte-weich); font-size:.98rem}

/* Team */
.team{display:grid; gap:1.3rem; grid-template-columns:1fr; max-width:860px; margin:0 auto}
@media(min-width:720px){ .team{grid-template-columns:1fr 1fr} }
.person{background:#fff; border:1.5px solid var(--linie); border-radius:var(--radius); padding:1.6rem; text-align:center; box-shadow:0 6px 18px rgba(140,77,68,.05)}
.person .foto{width:92px; height:92px; border-radius:50%; margin:0 auto .9rem; background:var(--creme-warm); color:var(--rot-tief);
  display:flex; align-items:center; justify-content:center; font-family:"Fraunces",serif; font-size:1.8rem; font-weight:600}
.person h3{margin-bottom:.1rem}
.person .rolle{color:var(--gruen-tief); font-weight:700; font-size:.95rem; margin-bottom:.6rem}
.person p{margin:0; color:var(--tinte-weich); font-size:1rem}

/* Vertrauen */
.vertrauen{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:640px){ .vertrauen{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .vertrauen{grid-template-columns:repeat(3,1fr)} }
.vt{display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:1.5px solid var(--linie); border-radius:14px; padding:1.1rem 1.2rem}
.vt .ok{color:var(--gruen-tief); flex:none; margin-top:2px}
.vt b{display:block; margin-bottom:.15rem}
.vt span{color:var(--tinte-weich); font-size:.97rem}

/* FAQ */
.faq{max-width:760px; margin:0 auto}
.faq details{background:#fff; border:1.5px solid var(--linie); border-radius:14px; padding:0 1.3rem; margin-bottom:.8rem}
.faq summary{cursor:pointer; font-weight:700; font-size:1.08rem; padding:1.1rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; color:var(--rot-tief)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--rot); font-size:1.5rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.1rem; color:var(--tinte-weich); font-size:1rem}

/* Kontakt */
.kontakt{background:linear-gradient(180deg,var(--creme-warm) 0%,#ecd7c3 100%); color:var(--tinte)}
.kontakt h2{color:var(--rot-tief)}
.kontakt .sub{color:var(--tinte-weich); max-width:50ch; margin:0 auto 1.8rem}
.kontakt .karten{display:grid; gap:1rem; grid-template-columns:1fr; max-width:760px; margin:0 auto}
@media(min-width:720px){ .kontakt .karten{grid-template-columns:1fr 1fr} }
.kkarte{background:rgba(255,255,255,.72); border:1px solid rgba(140,77,68,.16); border-radius:16px; padding:1.4rem; text-align:center; box-shadow:0 8px 22px rgba(140,77,68,.08)}
.kkarte .ic{width:46px; height:46px; margin:0 auto .6rem; border-radius:12px; background:var(--rot);
  display:flex; align-items:center; justify-content:center}
.kkarte .gross{font-family:"Fraunces",serif; font-size:1.5rem; display:block; margin:.2rem 0}
.kkarte a{color:var(--rot-tief); text-decoration:none; font-weight:700}
.kkarte small{color:var(--tinte-weich); display:block; margin-top:.3rem; font-size:.9rem}
.datenschutz-hinweis{text-align:center; color:var(--tinte-weich); font-size:.9rem; margin-top:1.6rem; max-width:52ch; margin-left:auto; margin-right:auto}

/* Footer */
footer{background:#241c1a; color:#d8ccc3; padding:2.4rem 0; font-size:.95rem}
footer .wrap{display:grid; gap:1.4rem; grid-template-columns:1fr}
@media(min-width:720px){ footer .wrap{grid-template-columns:1.4fr 1fr 1fr} }
footer b{color:#fff; display:block; margin-bottom:.5rem; font-family:"Fraunces",serif; font-size:1.05rem}
footer a{color:#e7b7b7; text-decoration:none}
footer .fein{grid-column:1/-1; border-top:1px solid #3a2e2b; padding-top:1.2rem; color:#9c8c84; font-size:.86rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between}

/* Handy-Anrufleiste */
.anrufbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:.6rem; padding:.6rem; transform:translateY(130%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease;
  background:rgba(255,253,249,.96); backdrop-filter:blur(8px); border-top:1px solid var(--linie); box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.anrufbar a{flex:1; justify-content:center; font-size:1rem; padding:.8rem}
.anrufbar .ruf{background:var(--rot); color:#fff; border-color:var(--rot)}
.anrufbar .mail{background:var(--gruen-tief); color:#fff; border-color:var(--gruen-tief)}
.anrufbar a{display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; text-decoration:none; font-weight:700; border:2px solid}
body.ruf-sichtbar .anrufbar{transform:none; opacity:1; pointer-events:auto}
body.ruf-sichtbar{padding-bottom:74px}
@media(min-width:900px){ .anrufbar{display:none!important} body.ruf-sichtbar{padding-bottom:0} }

@media(max-width:560px){ .hero .ctas{flex-wrap:nowrap; gap:.6rem} .hero .ctas .knopf{flex:1 1 0; justify-content:center; padding:.85rem .5rem; font-size:.98rem} .hero .ctas .knopf svg{width:1.05em; height:1.05em} }
.vorschau-band{background:#241c1a; color:#ffd9a8; text-align:center; font-size:.85rem; padding:.45rem 1rem; letter-spacing:.02em}

/* Weiche Übergänge zwischen den Bereichen (Simon 159713, 08.11.) — Tönungen schmelzen ineinander statt harter Kanten */
.hero{background:linear-gradient(180deg,var(--creme-warm) 0%,var(--creme) 92%)}
.badges{background:transparent; border:none}
.badges .badge{padding:.2rem .2rem}
section{position:relative}
section .wrap{position:relative; z-index:1}
section.creme::before, section.warm::before, .kontakt::before{content:""; position:absolute; top:-1px; left:0; right:0; height:78px; background:linear-gradient(180deg,var(--creme), rgba(253,249,244,0)); pointer-events:none; z-index:0}
section.creme::after, section.warm::after{content:""; position:absolute; bottom:-1px; left:0; right:0; height:78px; background:linear-gradient(0deg,var(--creme), rgba(253,249,244,0)); pointer-events:none; z-index:0}
.kontakt{position:relative}
.kontakt .wrap{position:relative; z-index:1}
/* Heller Streifen zwischen zwei getönten Bereichen (Simon 159979): angrenzende Tönungen stoßen bündig
   aneinander (Warm-Oberkante = Creme-Ton), deshalb die aufhellende Blende an genau dieser Stelle weglassen */
section.creme:has(+ section.warm)::after{content:none}
section.creme + section.warm::before{content:none}
.schrift{display:flex; gap:.25rem; margin-left:.8rem; align-items:center}
.schrift button{border:1.5px solid var(--linie); background:#fff; color:var(--rot-tief); border-radius:8px; padding:.22rem .5rem; font-weight:700; cursor:pointer; line-height:1; font-family:inherit; min-height:34px}
.schrift button:nth-child(2){font-size:1.05rem} .schrift button:nth-child(3){font-size:1.2rem}
.schrift button[aria-pressed="true"]{background:var(--rot); color:#fff; border-color:var(--rot)}
.schrift button:hover{border-color:var(--rot)}
.erklaer .rechen{margin:.9rem 0 0; padding:.85rem 1.1rem; background:#fff; border:1px solid #d5e8d6; border-radius:10px; color:var(--tinte); font-size:1rem}
.nav .tel b{white-space:nowrap}
@media(max-width:720px){ .nav .tel{display:none} .schrift{margin-left:auto; gap:.2rem} .schrift button{padding:.2rem .42rem; min-height:32px} .schrift button:nth-child(3){font-size:1.08rem} .logo .mark{width:40px; height:40px} .logo b{font-size:1.1rem} .logo small{font-size:.67rem} .nav .in{gap:.6rem} }

/* Klickbare Leistungs-Karten (Unterseiten, Simon 159751) */
a.karte-link{text-decoration:none; color:var(--tinte); display:block; transition:.15s}
a.karte-link:hover{border-color:var(--rot); transform:translateY(-2px); box-shadow:var(--schatten)}
a.karte-link:hover .mehr{text-decoration:underline}
.karte .mehr{display:inline-block; margin-top:.75rem; color:var(--rot-dunkel); font-weight:700; font-size:.96rem}

/* Abschluss-Knöpfe auf dem Handy: volle Breite, klarer Abstand (Simon 159789) */
@media(max-width:560px){ .kontakt .ctas{display:flex; flex-direction:column; gap:1.2rem; align-items:stretch} .kontakt .ctas .knopf{width:100%; justify-content:center} }

/* Rechtstexte (Impressum/Datenschutz/Barrierefreiheit) */
.rechtstext{max-width:760px; margin:0 auto}
.rechtstext h1{margin-bottom:.4rem}
.rechtstext h2{margin-top:2.2rem; font-size:1.5rem}
.rechtstext p, .rechtstext li{color:var(--tinte); font-size:1.03rem}
.rechtstext a{color:var(--rot-dunkel)}
.rechtstext .hinweis{background:var(--creme-tief); border:1px solid var(--linie); border-radius:12px; padding:1rem 1.2rem; color:var(--tinte-weich); margin:1.2rem 0}
.rechtstext address{font-style:normal; line-height:1.7}

/* Vertrauens-Leiste (Simon 159815): kein Kasten – Haken im sanften Kreis, auf Desktop eine Reihe mit feinen Trennern */
.badges .wrap{max-width:980px; align-items:center}
.badge{align-items:center; font-size:1.02rem; color:var(--tinte); line-height:1.35}
.badge .okring{width:38px; height:38px; border-radius:50%; background:#e9f0e4; display:flex; align-items:center; justify-content:center; flex:none}
.badge .okring .ok{color:var(--gruen-tief); margin:0}
@media(min-width:820px){
  .badges .wrap{display:flex; flex-wrap:nowrap; justify-content:center; gap:0; padding:2.2rem 22px}
  .badge{flex:1; justify-content:center; padding:0 1.6rem; border-left:1px solid var(--linie)}
  .badge:first-child{border-left:none}
}

/* Merkmale-Reihe (Variante C, Simon 159828): thematische Icons, keine Kästen */
.merkmale .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; text-align:center; max-width:980px; padding-top:2.2rem; padding-bottom:1.2rem}
.merkmale .feat{display:flex; flex-direction:column; align-items:center; gap:.6rem}
.merkmale .feat svg{width:42px; height:42px; color:var(--gruen-tief); flex:none}
.merkmale .feat span{font-weight:700; font-size:1rem; color:var(--tinte); line-height:1.35}
@media(max-width:640px){ .merkmale .wrap{grid-template-columns:1fr 1fr; gap:1.6rem 1rem} }

/* Abschnitts-Knöpfe auf dem Handy: volle Breite, klarer Abstand (Simon 159853) — außer Hero (Reihe) & Kontakt (eigene Regel) */
@media(max-width:560px){
  section:not(.kontakt) .ctas{display:flex; flex-direction:column; align-items:stretch; gap:1.2rem}
  section:not(.kontakt) .ctas .knopf{width:100%; justify-content:center}
}

/* Kontaktformular (Simon 159870) */
.kontaktgrid{display:grid; gap:1.6rem; max-width:980px; margin:0 auto}
@media(min-width:820px){ .kontaktgrid{grid-template-columns:1fr 1fr; align-items:start} }
.kontaktkarte{background:#fff; border:1.5px solid var(--linie); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--schatten)}
.kontaktkarte h2{font-size:1.4rem; margin-bottom:.4rem}
.kontaktkarte .zeile{display:flex; gap:.7rem; align-items:flex-start; margin:.9rem 0}
.kontaktkarte .zeile svg{width:22px; height:22px; color:var(--gruen-tief); flex:none; margin-top:2px}
.kontaktkarte .zeile b{display:block}
.kontaktkarte .zeile span{color:var(--tinte-weich); font-size:.97rem}
.formular{display:grid; gap:1rem}
.formular label{display:block; font-weight:700; margin-bottom:.35rem; font-size:1rem}
.formular .pflicht{color:var(--rot)}
.formular input, .formular textarea{width:100%; font:inherit; font-size:1.02rem; padding:.85rem .95rem; border:1.5px solid var(--linie); border-radius:12px; background:var(--creme); color:var(--tinte)}
.formular input:focus, .formular textarea:focus{outline:3px solid var(--gruen-tief); outline-offset:2px; border-color:var(--gruen-tief)}
.formular textarea{min-height:130px; resize:vertical}
.formular .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formular button{font:inherit}
.form-hinweis{font-size:.92rem; color:var(--tinte-weich)}
.form-ok{background:#eef6ef; border:1px solid #d5e8d6; color:var(--gruen-tief); padding:1.4rem; border-radius:14px; font-weight:700; text-align:center}
.form-fehler{background:#fbe9e9; border:1px solid #e9cccc; color:var(--rot-tief); padding:.85rem 1rem; border-radius:10px; margin-bottom:.4rem; font-weight:700}

/* Kontakt-Modal (Simon 159902): Desktop zentriert, Handy Vollbild */
dialog#kontakt-dialog{border:none; border-radius:18px; padding:0; max-width:560px; width:calc(100% - 32px); background:var(--creme); color:var(--tinte); box-shadow:0 30px 80px rgba(40,30,25,.35); overflow:auto}
dialog#kontakt-dialog::backdrop{background:rgba(40,30,25,.55)}
.kd-kopf{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--linie); position:sticky; top:0; background:var(--creme)}
.kd-kopf h2{margin:0; font-size:1.35rem}
.kd-schliessen{background:none; border:none; font-size:2rem; line-height:1; cursor:pointer; color:var(--tinte-weich); padding:0 .3rem; border-radius:8px}
.kd-schliessen:hover{color:var(--rot-dunkel)}
.kd-koerper{padding:1.4rem}
@media(max-width:560px){ dialog#kontakt-dialog{max-width:none; width:100%; height:100%; max-height:100%; margin:0; border-radius:0} }

/* Echte Fotos (Simon 160285, 09.11.): Team-Porträt, Gruß-Foto, Erlebnis-Galerie */
.person .foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.person .foto{overflow:hidden;padding:0}
.gruss-foto{display:grid;gap:1.3rem;align-items:center}
.gruss-foto .gf-bild{margin:0}
.gruss-foto .gf-bild img{width:100%;border-radius:12px;object-fit:cover;display:block;box-shadow:0 8px 22px rgba(140,77,68,.14)}
@media(min-width:760px){ .gruss-foto{grid-template-columns:230px 1fr} }
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:620px){ .galerie{grid-template-columns:repeat(3,1fr)} }
@media(min-width:960px){ .galerie{grid-template-columns:repeat(4,1fr)} }
.galerie figure{margin:0;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(140,77,68,.08);background:var(--creme-tief)}
.galerie figure img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
.galerie figure:hover img{transform:scale(1.045)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:.85rem .6rem .5rem;font-size:.86rem;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(59,49,44,.82));line-height:1.2}