/* ==========================================================================
   Gesundheitspraxis Kummer – ihre-gesundheit.at
   Design: DERKAUFMANN IT-Service · Farben aus dem Praxislogo (2026)
   ========================================================================== */

/* ---------------------------------------------------------------- Schriften */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url('../fonts/source-sans-3.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;
  src:url('../fonts/source-serif-4.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------------------------------------------------------------- Tokens */
:root{
  --gruen:#65b32e;          /* Logo-Grün – Flächen, Linien, Deko */
  --gruen-d:#4e9520;        /* Hover auf hellen Flächen */
  --gruen-btn:#41801a;      /* Flächen mit weißer Schrift (Kontrast 4,85:1) */
  --gruen-btn-d:#376e13;    /* Hover dazu (6,17:1) */
  --gruen-tief:#20510f;     /* Text auf hellem Grün (Kontrast auf heller Fläche) */
  --gruen-flaeche:#3b4e32;  /* Grosse dunkle Flächen: Hero, Seitenkopf, Zitat, CTA, Footer.
                               Bewusst entsättigt (Kundenwunsch 09.09.2026: ruhiger, weniger
                               kräftig). Kontrast zu Weiß 9,0:1 – bleibt WCAG-AAA. */
  --gruen-hell:#95c11f;
  --limette:#c8d400;
  --tanne:#027433;          /* Akzent-/Linkfarbe (5,9:1 auf Weiß) */
  --gruen-hauch:#eef5e4;
  --gruen-hauch2:#eef5e2;

  --papier:#fcfbf6;
  --sand:#f1ecdd;
  --sand-tief:#eae5d6;
  --weiss:#fff;
  --text:#2b3128;
  --text2:#5d6857;
  --text3:#6b7566;
  --linie:#e4e0d0;
  --linie2:#efece1;

  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:30px;
  --sh-s:0 1px 2px rgba(43,49,40,.04);
  --sh-m:0 1px 3px rgba(43,49,40,.05), 0 8px 20px rgba(43,49,40,.05);
  --sh-l:0 2px 6px rgba(43,49,40,.05), 0 16px 36px rgba(43,49,40,.07);

  --wrap:1180px;
  --wrap-schmal:760px;
  --wrap-lese:680px;   /* Lesebreite ~79 Zeichen */
  --pad:clamp(1.15rem,4vw,2rem);
  --sec:clamp(2.9rem,5.2vw,4.6rem);
  --t:.22s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------- Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(1rem,.97rem + .12vw,1.075rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,video{max-width:100%;height:auto;display:block}
/* <picture> war eine unsichtbare Zwischenebene: Regeln wie "img{height:100%}" bezogen sich
   auf das picture (Höhe auto) statt auf den Bildrahmen. Dadurch stand das Bild über den
   Rahmen hinaus und wurde von dessen overflow:hidden unten abgeschnitten – so verlor
   Gabriela auf der Startseite ihr Kinn. Mit display:contents zählt das img direkt zum Rahmen. */
picture{display:contents}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-weight:600;line-height:1.2;color:var(--text);margin:0 0 .55em;letter-spacing:-.008em;
  text-wrap:balance}
h1{font-size:clamp(2.05rem,1.3rem + 2.7vw,3.35rem);line-height:1.12}
h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.35rem)}
/* Auf sehr schmalen Geräten (320 px) passt ein Wort wie „Datenschutzerklärung“ nicht
   in eine Zeile. Dort wird getrennt statt über den Rand geschrieben. */
@media(max-width:479px){h1,h2,h3{hyphens:auto;overflow-wrap:break-word}}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.42rem);line-height:1.3}
h4{font-size:1.06rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:var(--tanne);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--gruen-d)}
ul,ol{margin:0 0 1.15em;padding-left:1.3em}
li{margin-bottom:.4em}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--tanne);outline-offset:2px;border-radius:3px}
::selection{background:var(--gruen-btn);color:#fff}

/* ---------------------------------------------------------------- Layout */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-s{max-width:var(--wrap-schmal);margin-inline:auto;padding-inline:var(--pad)}
/* Lesespalte: für reinen Fließtext, damit auf breiten Schirmen keine halbleere
   Fläche entsteht und die Zeilenlänge trotzdem angenehm bleibt */
/* Lesespalte: mittig statt links angeschlagen. Bisher war der Rahmen so breit wie der
   Rest der Seite, der Text darin aber nur 70 Zeichen lang – rechts blieb die halbe Seite
   leer. Jetzt bestimmt die Lesebreite den Rahmen, und der steht mittig. Alle Teile darin
   (Überschrift, Absatz, Liste, Grafik) haben dieselbe Kante. */
.wrap-lese{max-width:calc(var(--wrap-lese) + 2 * var(--pad));margin-inline:auto;
  padding-inline:var(--pad)}
.wrap-lese>*{max-width:none}
/* Kachelraster nutzen dieselbe Breite wie alles andere – eine Kante, ein Rhythmus. */
/* display:flow-root schliesst die Abschnittsflaeche ab: Raender von Kindern koennen
   nicht mehr nach aussen durchschlagen und Luecken in die Flaeche reissen. */
.sec{padding-block:var(--sec);display:flow-root}
.sec--tight{padding-block:calc(var(--sec) * .66)}
/* Folgen zwei Abschnitte ohne Farbwechsel aufeinander, entsteht sonst doppeltes Polster.
   Der Generator setzt dafür .sec--anschluss. */
.sec--anschluss{padding-top:0}
/* Wo dieselbe Fläche weiterläuft, markiert eine feine Linie den Themenwechsel */
.sec--anschluss.hat-thema>.wrap::before,.sec--anschluss.hat-thema>.wrap-lese::before{
  content:"";display:block;width:64px;height:1px;background:var(--linie);
  margin-bottom:calc(var(--sec) * .55)}
.sec--sand{background:var(--sand)}
.sec--hauch{background:var(--gruen-hauch2)}
.sec--zeichen{position:relative;overflow:hidden}
.sec--zeichen::before{content:"";position:absolute;right:-90px;top:50%;
  width:min(460px,46vw);aspect-ratio:178/227;transform:translateY(-50%);
  background:url('../img/logo-k.svg?v=cf264c84') no-repeat center/contain;opacity:.05;
  pointer-events:none}
@media(max-width:719px){.sec--zeichen::before{right:-140px;opacity:.035}}
.sec--weiss{background:var(--weiss)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--weiss);
  color:var(--text);padding:.9rem 1.3rem;border-radius:0 0 var(--r-s) 0;font-weight:600;
  box-shadow:var(--sh-m)}
.skip:focus{left:0}

.kicker{font-family:'Source Sans 3',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tanne);margin:0 0 1rem;
  display:flex;align-items:center;gap:.75rem;line-height:1.5}
.kicker::before{content:"";width:30px;height:1px;background:var(--gruen-hell);flex:none}
.kicker--zentriert{justify-content:center}
.kicker--zentriert::after{content:"";width:30px;height:1px;background:var(--gruen-hell);flex:none}
.lead{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);line-height:1.62;color:var(--text2)}
/* Abstand Überschrift -> Inhalt: 3 rem liessen die Überschrift von ihrer Liste
   abfallen (sichtbar rund 70 px, weil das erste Listenpolster dazukommt).
   Die zentrierte Fassung auf der Startseite enthält zusätzlich einen Vorspann und
   darf luftiger bleiben. */
.sec-kopf{max-width:760px;margin-bottom:clamp(1.4rem,2.2vw,1.9rem)}
.sec-kopf--zentriert{margin-inline:auto;text-align:center;
  margin-bottom:clamp(2rem,4vw,3rem)}
.sec-kopf--zentriert .kicker{justify-content:center}
.sec-kopf p{color:var(--text2)}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:'Source Sans 3',sans-serif;font-size:1rem;font-weight:600;line-height:1.2;
  padding:.92rem 1.45rem;border-radius:999px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:background var(--t),color var(--t),border-color var(--t),
  transform var(--t),box-shadow var(--t)}
.btn svg{width:19px;height:19px;flex:none;transition:transform var(--t)}
.btn--primary{background:var(--gruen-btn);color:#fff;box-shadow:0 6px 18px rgba(65,128,26,.3)}
.btn--primary:hover{background:var(--gruen-btn-d);color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(65,128,26,.36)}
.btn--primary:hover svg{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--gruen-tief);border-color:var(--linie)}
.btn--ghost:hover{background:var(--weiss);border-color:var(--gruen);color:var(--gruen-tief);
  transform:translateY(-2px);box-shadow:var(--sh-s)}
.btn--hell{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(4px)}
.btn--hell:hover{background:#fff;color:var(--gruen-tief);border-color:#fff;transform:translateY(-2px)}
.hero .btn--ghost,.cta .btn--ghost,.skopf .btn--ghost,.f404 .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08)}
.hero .btn--ghost:hover,.cta .btn--ghost:hover,.skopf .btn--ghost:hover,.f404 .btn--ghost:hover{
  background:#fff;color:var(--gruen-tief);border-color:#fff}
.btn-reihe{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.btn-reihe--zentriert{justify-content:center}
.mehr{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.98rem;
  color:var(--tanne);text-decoration:none;min-height:44px;
  transition:gap var(--t),color var(--t)}
.mehr svg{width:17px;height:17px;transition:transform var(--t)}
.mehr:hover{color:var(--gruen-d)}
.mehr:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- Header */
.kopf{position:sticky;top:0;z-index:100;background:rgba(251,251,247,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);
  transition:box-shadow var(--t),background var(--t)}
.kopf.ist-gescrollt{box-shadow:0 2px 18px rgba(43,49,40,.09);background:rgba(251,251,247,.985)}
.kopf-in{display:flex;align-items:center;gap:1.2rem;min-height:78px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.marke{display:flex;align-items:center;flex:none;text-decoration:none;padding:.5rem 0}
.marke img{width:200px;height:auto}
@media(max-width:420px){.marke img{width:158px}}
@media(max-width:359px){.marke img{width:132px}}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav>ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative;margin:0}
.nav-link{display:inline-flex;align-items:center;gap:.32rem;padding:.62rem .78rem;
  border-radius:var(--r-s);font-weight:600;font-size:.97rem;color:var(--text);
  text-decoration:none;white-space:nowrap;transition:color var(--t),background var(--t)}
.nav-link:hover{color:var(--gruen-tief);background:var(--gruen-hauch)}
.nav-link[aria-current="page"],.nav-link.ist-aktiv{color:var(--tanne)}
.nav-link[aria-current="page"]::after,.nav-link.ist-aktiv::after{content:"";position:absolute;
  left:.78rem;right:.78rem;bottom:.14rem;height:2px;background:var(--gruen);border-radius:2px}
/* Menüpunkte mit Betreuung: Name klein darunter. Die Namen sind kürzer als die
   Menüwörter, das Menü wird dadurch nicht breiter.
   Alle Punkte sind gleich hoch und beginnen oben – so stehen die Menüwörter auf
   einer Linie, egal ob darunter ein Name steht oder nicht. */
.nav-link{align-items:flex-start;min-height:50px;padding-top:.5rem;padding-bottom:.4rem}
.nav-txt{display:flex;flex-direction:column;line-height:1.2}
.nav-person{font-size:.78rem;font-weight:600;color:var(--tanne);margin-top:.02rem}
.nav-link:hover .nav-person,.nav-link.ist-aktiv .nav-person,
.nav-link[aria-current="page"] .nav-person{color:var(--tanne)}
.nav-pfeil{width:13px;height:13px;transition:transform var(--t);opacity:.7;
  margin-top:.28rem}   /* auf Höhe des Menüworts, nicht der zweiten Zeile */
.hat-unter:hover .nav-pfeil,.hat-unter:focus-within .nav-pfeil{transform:rotate(180deg)}

.unter{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:274px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);
  box-shadow:var(--sh-l);padding:.5rem;list-style:none;margin:0;
  opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t),visibility var(--t)}
.hat-unter:hover .unter,.hat-unter:focus-within .unter{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.unter::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.unter li{margin:0}
.unter a{display:flex;align-items:center;gap:.7rem;padding:.58rem .8rem;
  border-radius:var(--r-s);font-size:.95rem;font-weight:500;color:var(--text);
  text-decoration:none;transition:background var(--t),color var(--t)}
.unter a svg{width:19px;height:19px;flex:none;color:var(--gruen);opacity:.85;
  transition:color var(--t),opacity var(--t)}
.unter a:hover,.unter a[aria-current="page"]{background:var(--gruen-hauch);color:var(--gruen-tief)}
.unter a:hover svg,.unter a[aria-current="page"] svg{color:var(--tanne);opacity:1}

/* Anrufknopf im Kopf: Praxis hat zwei Rufnummern – eine einzelne wäre für den
   jeweils anderen Bereich die falsche. Als <details>, damit es ohne JavaScript geht. */
.telwahl{position:relative;margin-left:.7rem;flex:none}
.telwahl>summary{display:inline-flex;align-items:center;gap:.5rem;padding:.68rem 1.1rem;
  border-radius:999px;background:var(--gruen-btn);color:#fff;font-weight:600;font-size:.95rem;
  white-space:nowrap;cursor:pointer;list-style:none;
  transition:background var(--t),transform var(--t)}
.telwahl>summary::-webkit-details-marker{display:none}
.telwahl>summary:hover{background:var(--gruen-btn-d);transform:translateY(-1px)}
.telwahl>summary svg{width:17px;height:17px;flex:none}
.telwahl-pfeil{width:13px;height:13px;opacity:.8;transition:transform var(--t)}
.telwahl[open]>summary .telwahl-pfeil{transform:rotate(180deg)}
.telwahl-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:20;min-width:308px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);
  box-shadow:var(--sh-l);padding:.85rem}
.telwahl-titel{margin:0 0 .55rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3)}
.tw-zeile{display:flex;align-items:center;gap:.7rem;padding:.6rem .55rem;border-radius:var(--r-s);
  text-decoration:none;color:var(--text);transition:background var(--t)}
.tw-zeile:hover{background:var(--gruen-hauch);text-decoration:none}
.tw-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--gruen-hauch);color:var(--tanne)}
.tw-ic svg{width:16px;height:16px}
.tw-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tw-txt b{font-size:.95rem;font-weight:600}
.tw-txt small{font-size:.76rem;color:var(--text3)}
.tw-nr{font-size:.93rem;font-weight:700;color:var(--tanne);white-space:nowrap}
.telwahl-mehr{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.4rem;padding:.6rem .55rem;border-top:1px solid var(--linie2);
  font-size:.9rem;font-weight:600;color:var(--tanne);text-decoration:none}
.telwahl-mehr:hover{text-decoration:none;color:var(--gruen-d)}
.telwahl-mehr svg{width:16px;height:16px}

.burger{display:none;margin-left:auto;align-items:center;gap:.55rem;
  min-height:46px;padding:0 .85rem 0 1rem;background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--r-s);cursor:pointer;color:var(--text)}
.burger svg{width:24px;height:24px;flex:none}
.burger-wort{font-family:'Source Sans 3',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1}
.burger:hover{border-color:var(--gruen);color:var(--gruen-tief)}
/* Auch auf sehr schmalen Geräten bleibt die Beschriftung stehen,
   das Logo weicht dort etwas zurück */
@media(max-width:359px){
  .burger{padding:0 .7rem 0 .8rem;gap:.45rem}
  .burger-wort{font-size:.78rem;letter-spacing:.07em}
}

@media(max-width:1080px){
  .nav>ul,.telwahl{display:none}
  .burger{display:inline-flex}
}

/* Mobile Panel */
.mnav{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.mnav[data-offen="1"]{visibility:visible;pointer-events:auto}
.mnav-bg{position:absolute;inset:0;background:rgba(30,40,26,.45);opacity:0;transition:opacity .28s}
.mnav[data-offen="1"] .mnav-bg{opacity:1}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,90vw);background:var(--weiss);
  box-shadow:-12px 0 44px rgba(30,40,26,.2);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.mnav[data-offen="1"] .mnav-panel{transform:translateX(0)}
.mnav-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--linie);position:sticky;top:0;
  background:var(--weiss);z-index:2}
.mnav-kopf img{width:168px}
.mnav-zu{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sand);border:0;border-radius:var(--r-s);cursor:pointer;color:var(--text);flex:none}
.mnav-zu svg{width:22px;height:22px}
.mnav ul{list-style:none;margin:0;padding:.6rem .8rem 1rem}
.mnav li{margin:0;border-bottom:1px solid var(--linie2)}
.mnav li:last-child{border-bottom:0}
.mnav ul a{display:flex;align-items:center;gap:.8rem;padding:.85rem .6rem;font-weight:600;
  color:var(--text);text-decoration:none;font-size:1.02rem}
.mnav ul a svg{width:22px;height:22px;flex:none;color:var(--gruen);
  transition:color var(--t),transform var(--t)}
.mnav ul a:hover,.mnav ul a[aria-current="page"]{color:var(--tanne)}
.mnav ul a:hover svg,.mnav ul a[aria-current="page"] svg{color:var(--tanne)}
/* Zweite Zeile mit dem Namen auch im Klappmenü */
.mnav .nav-txt{display:flex;flex-direction:column;line-height:1.2}
.mnav .nav-person{font-size:.85rem;font-weight:600;color:var(--tanne);margin-top:.05rem}
.mnav ul a:hover .nav-person,.mnav ul a[aria-current="page"] .nav-person{color:var(--tanne)}
.mnav-zeile{display:flex;align-items:center}
.mnav-zeile a{flex:1}
.mnav-auf{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--text3)}
.mnav-auf svg{width:19px;height:19px;transition:transform var(--t)}
.mnav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav-sub{display:none;padding:0 0 .6rem .55rem !important;border-left:2px solid var(--gruen-hauch);
  margin-left:.6rem !important}
.mnav-sub[data-offen="1"]{display:block}
.mnav-sub li{border:0}
.mnav-sub a{font-weight:500;font-size:.96rem;padding:.6rem .6rem;color:var(--text2)}
.mnav-sub a svg{width:19px;height:19px;opacity:.8}
.mnav-fuss{margin-top:auto;padding:1.15rem 1.2rem 1.4rem;border-top:1px solid var(--linie);
  display:grid;gap:.55rem;background:var(--gruen-hauch2)}
.mnav-fuss .btn{width:100%;margin-top:.35rem}
.mnav-fuss-titel{margin:0 0 .25rem;font-family:'Source Sans 3',sans-serif;font-size:.76rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.mnav-tel{display:flex;align-items:center;gap:.8rem;padding:.75rem .85rem;background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--r-m);text-decoration:none;color:var(--text);
  min-height:60px;transition:border-color var(--t),transform var(--t)}
.mnav-tel:hover,.mnav-tel:focus-visible{border-color:var(--gruen);transform:translateY(-1px)}
.mnav-tel-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--gruen-hauch);color:var(--tanne)}
.mnav-tel-ic svg{width:20px;height:20px}
.mnav-tel-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.mnav-tel-txt b{font-size:.98rem;font-weight:600}
.mnav-tel-txt small{font-size:.78rem;color:var(--text3);margin-bottom:.12rem}
.mnav-tel-nr{font-size:.95rem;font-weight:700;color:var(--tanne);white-space:nowrap}
.mnav-adresse{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;font-size:.85rem;
  color:var(--text3)}
.mnav-adresse svg{width:15px;height:15px;flex:none}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#33452b 0%,#3d5235 58%,#4a6340 100%)}
/* Landschaft vom Hof als ruhige Tiefenebene – ohne sie wirkt der Kopfbereich wie eine Vorlage */
.hero-grund{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-grund img{width:100%;height:100%;object-fit:cover;opacity:.5;
  animation:ruhigerZoom 30s ease-out forwards}
.hero-grund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,rgba(47,62,39,.92) 0%,rgba(56,74,47,.79) 46%,
    rgba(68,89,57,.54) 100%)}
.hero::after{content:"";position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:min(520px,44vw);aspect-ratio:178/227;
  background:url('../img/logo-k.svg?v=cf264c84') no-repeat center/contain;opacity:.07;pointer-events:none}
@media(max-width:919px){.hero::after{right:-190px;opacity:.05}}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(2.6rem,6vw,5rem) var(--pad) clamp(3rem,6vw,5.4rem);
  display:grid;gap:clamp(2rem,5vw,3.6rem);align-items:center}
@media(min-width:920px){.hero-in{grid-template-columns:1.1fr .9fr}}
.hero .kicker{color:#cfe9b0}
.hero .kicker::before{background:var(--limette)}
.hero-frage{font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(1.12rem,1rem + .7vw,1.5rem);line-height:1.35;
  color:rgba(255,255,255,.72);margin:0 0 .5rem;font-style:italic;max-width:30ch}
.hero h1{color:#fff;text-wrap:balance;margin-bottom:.5em}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(1.06rem,1rem + .5vw,1.28rem);line-height:1.62;
  max-width:34rem}
.hero-marke{display:flex;align-items:center;gap:.6rem;margin-top:2.2rem;
  color:rgba(255,255,255,.66);font-size:.9rem}
.hero-marke svg{width:20px;height:20px;flex:none;opacity:.85}
.hero-runter{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.07);text-decoration:none;transition:all var(--t)}
.hero-runter:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.hero-runter svg{width:20px;height:20px;animation:sanftTippen 2.4s ease-in-out infinite}
@keyframes sanftTippen{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(max-width:919px){.hero-runter{display:none}}
@media(prefers-reduced-motion:reduce){.hero-runter svg{animation:none}}
.hero-foto{position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 20px 60px rgba(28,38,24,.38);background:rgba(255,255,255,.06)}
.hero-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(min-width:920px){.hero-foto{transform:rotate(-1deg)}}
.hero-fahne{position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(transparent,rgba(38,50,32,.82));
  padding:3rem 1.3rem .95rem;color:rgba(255,255,255,.9);font-size:.86rem;letter-spacing:.02em}

/* Seitenkopf (Unterseiten) */
.skopf{position:relative;background:var(--gruen-flaeche);overflow:hidden}
.skopf-bild{position:absolute;inset:0}
.skopf-bild img{width:100%;height:100%;object-fit:cover}
/* Auf breiten Bildschirmen ist der Kopf viel breiter als hoch: vom Foto (3:2) bleibt
   sonst nur ein schmaler Streifen aus der Bildmitte - genau dort, wo bei stehenden
   Personen der Bauch ist. Deshalb bekommt der Streifen eine Mindesthoehe ... */
@media(min-width:900px){
  .skopf{display:flex;align-items:center;min-height:clamp(320px,27vw,480px)}
  .skopf--klein{min-height:clamp(280px,22vw,400px)}
  .skopf-in{width:100%}
}
/* ... und je Foto wird festgelegt, welches Band sichtbar bleibt: die Zahl ist die
   Hoehe im Bild, die in der Mitte des Streifens landet. Kleiner = weiter oben.
   Ohne Eintrag bleibt es bei 50 % (Bildmitte). Gemessen am 10.09.2026. */
.skopf-bild--praxis-team-wide img{object-position:50% 6%}
.skopf-bild--bemer-hero img{object-position:50% 22%}
.skopf-bild--tier-hero img{object-position:50% 0}
.skopf-bild--tiergestuetzt-hero img{object-position:50% 18%}
.skopf-bild--aufstellung-hero img{object-position:50% 20%}
.skopf-bild--hof-mediation img{object-position:50% 34%}
.skopf-bild--supervision-gespr img{object-position:50% 8%}
.skopf-bild--anfahrt-haus img{object-position:50% 10%}
.skopf-bild--beratung-gespraech img{object-position:50% 34%}
.skopf-bild--coaching-gespraech img{object-position:50% 30%}
/* Der ruhige Zoom wuerde vom Rand her hineinfahren und Koepfe anschneiden -
   deshalb waechst das Bild nach unten und der obere Rand bleibt stehen. */
.skopf-bild img{transform-origin:50% 0}
.skopf-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(47,62,39,.9) 0%,rgba(55,72,46,.75) 52%,
    rgba(64,84,53,.57) 100%)}
.skopf-in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(2.6rem,6vw,4.6rem) var(--pad) clamp(2.8rem,6vw,4.6rem)}
.skopf--klein .skopf-in{padding-block:clamp(2.2rem,5vw,3.6rem)}
.skopf h1{color:#fff;max-width:20ch;text-wrap:balance}
.skopf p{color:rgba(255,255,255,.88);max-width:52ch;font-size:clamp(1.04rem,1rem + .4vw,1.22rem)}
.skopf .kicker{color:#c9e6a8}
.skopf .kicker::before{background:var(--limette)}
.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;list-style:none;margin:0 0 1.15rem;
  padding:0;font-size:.86rem;color:rgba(255,255,255,.62)}
.krumen li{margin:0;display:flex;align-items:center;gap:.45rem}
.krumen a{color:rgba(255,255,255,.82);text-decoration:none}
.krumen a:hover{color:#fff;text-decoration:underline}
.krumen svg{width:13px;height:13px;opacity:.6}

/* ------------------------------------------------------------ Fehlerseite (404)
   Gleiche Handschrift wie der Seitenkopf der Unterseiten: Foto als ruhige
   Tiefenebene, dunkelgruene Flaeche darueber. Die grosse Zahl ist Schmuck
   (aria-hidden) und steht als Kontur da - gefuellt wuerde sie den Text
   erschlagen. */
.f404{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#33452b 0%,#3d5235 58%,#4a6340 100%)}
.f404-grund{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.f404-grund img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.5;
  transform-origin:50% 0}
.f404-grund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,rgba(47,62,39,.93) 0%,rgba(56,74,47,.82) 48%,
    rgba(68,89,57,.6) 100%)}
.f404-in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(2.7rem,6vw,4.8rem) var(--pad) clamp(2.9rem,6vw,5rem);
  display:grid;gap:clamp(1.2rem,4vw,2.8rem);align-items:center}
@media(min-width:920px){.f404-in{grid-template-columns:1.12fr .88fr}}
.f404 .kicker{color:#cfe9b0}
.f404 .kicker::before{background:var(--limette)}
.f404-txt h1{color:#fff;margin-bottom:.45em;max-width:17ch}
.f404-txt>p{color:rgba(255,255,255,.9);max-width:46ch;
  font-size:clamp(1.04rem,1rem + .45vw,1.24rem);line-height:1.62}
.f404-hilfe{display:flex;align-items:flex-start;gap:.65rem;margin:2rem 0 0;
  color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.55;max-width:44ch}
.f404-hilfe svg{width:19px;height:19px;flex:none;opacity:.85;margin-top:.28rem}
.f404-hilfe a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45)}
.f404-hilfe a:hover{text-decoration-color:#fff}
.f404-zahl{display:flex;justify-content:center;align-items:center;margin:0;
  gap:clamp(.1rem,1.2vw,.7rem);font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(6.5rem,18vw,14rem);line-height:.86;letter-spacing:-.03em;
  color:rgba(255,255,255,.15);-webkit-text-stroke:2px rgba(255,255,255,.42);
  filter:drop-shadow(0 6px 18px rgba(24,34,20,.35));user-select:none}
.f404-null{color:rgba(200,212,0,.18);-webkit-text-stroke-color:rgba(200,212,0,.7)}
@media(max-width:919px){
  .f404-zahl{order:-1;justify-content:flex-start;font-size:clamp(5rem,24vw,8.5rem)}
}

/* Kopf der Ueber-mich-Seiten: Portrait vollstaendig sichtbar statt als Streifen */
.pkopf{background:var(--gruen-hauch2);border-bottom:1px solid var(--linie);
  padding-block:clamp(2.2rem,5vw,3.4rem)}
.pkopf-in{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  grid-template-columns:1fr}
@media(min-width:760px){.pkopf-in{grid-template-columns:1fr minmax(240px,340px)}}
.pkopf-txt h1{margin-bottom:.4em}
.pkopf-txt .lead{color:var(--text2)}
.pkopf-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-m);
  background:var(--gruen-hauch);max-width:340px;justify-self:start}
@media(min-width:760px){.pkopf-bild{justify-self:end}}
.pkopf-bild img{width:100%;aspect-ratio:3/4;object-fit:cover}
.krumen--dunkel{color:var(--text3)}
.krumen--dunkel a{color:var(--text2)}
.krumen--dunkel a:hover{color:var(--tanne)}

/* ---------------------------------------------------------------- Fließtext */
.text-block{max-width:70ch}
/* Einstiegsabsatz einer Unterseite: etwas größer gesetzt, führt ruhig in das Thema */
.text-block--vorspann{max-width:62ch}
.text-block--vorspann>p:first-child{font-size:clamp(1.08rem,1rem + .45vw,1.24rem);
  line-height:1.66;color:var(--text);margin-bottom:1.25em}
.text-block--mitte{margin-inline:auto}
.text-block p+h2,.text-block p+h3{margin-top:1.9rem}

/* Hinweisbox */
.hinweis{display:flex;gap:.9rem;align-items:flex-start;border-left:2px solid var(--gruen-hell);
  padding:.15rem 0 .15rem 1.15rem;color:var(--text2);font-size:.97rem;
  line-height:1.7;max-width:72ch}
.hinweis svg{width:19px;height:19px;flex:none;color:var(--gruen-d);margin-top:.24rem;
  stroke-width:1.6}
.hinweis p{margin:0}

/* ---------------------------------------------------------------- Raster */
/* Hinweis zu minmax(min(NNNpx,100%),1fr): ohne das min() kann eine Spalte nicht unter
   ihre Mindestbreite schrumpfen. Bei .txtbild mit 390 px ragte das Raster auf einem
   390-px-Handy 18 px aus dem Fenster – die Seite liess sich seitlich schieben. */
.raster{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem)}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr))}
.raster--4{grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))}
@media(min-width:960px) and (max-width:1279px){
  .raster--4{grid-template-columns:repeat(2,1fr)}
}

/* Intro-Kacheln */
/* Symbol und Überschrift in einer Zeile: das Auge findet die Stichworte schneller,
   und auf dem Handy spart die Sektion dadurch rund 170 px Höhe. */
.intro-mehr{margin:clamp(2rem,3.5vw,2.8rem) 0 0;text-align:center}
.merkmal{padding:0 0 0 .1rem}
.merkmal h3{margin:0 0 .4rem;font-size:1.14rem;display:flex;align-items:center;gap:.6rem}
.merkmal h3 .ikon{margin:0;height:auto;flex:none}
.merkmal p{color:var(--text2);font-size:.985rem;margin:0;max-width:38ch}
/* Symbol frei stehend statt in einem Farbkästchen – das wirkt ruhiger und weniger schematisch */
.ikon{width:auto;height:34px;display:flex;align-items:center;margin-bottom:.9rem;color:var(--gruen-d)}
.ikon svg{width:27px;height:27px;stroke-width:1.5}
@media(min-width:720px){
  .raster--3 .merkmal,.raster--4 .merkmal{padding-left:1.6rem;border-left:1px solid var(--linie)}
  .raster--3 .merkmal:nth-child(3n+1),.raster--4 .merkmal:nth-child(4n+1){
    padding-left:0;border-left:0}
  /* Ab der zweiten Reihe eine feine Querlinie: die sechs Punkte lesen sich dadurch als
     Raster und nicht als lose Aufzählung. */
  .raster--3 .merkmal:nth-child(n+4){padding-top:1.7rem;border-top:1px solid var(--linie)}
}

/* Karten mit Bild */
.karte{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-l);overflow:hidden;transition:transform var(--t),box-shadow var(--t),
  border-color var(--t)}
.karte:hover{transform:translateY(-3px);box-shadow:var(--sh-m);border-color:#d7d2c0}
.karte-bild{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
/* Quadratisch: fuer Portraets, damit Kopf und Oberkoerper hineinpassen und der
   Kopf nicht den ganzen Rahmen fuellt (siehe blk_cards, 'bildformat': 'quadrat'). */
.karte-bild--quadrat{aspect-ratio:1/1}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,0,.2,1)}
.karte:hover .karte-bild img{transform:scale(1.045)}
.karte-ikon{position:absolute;left:1rem;bottom:1rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--gruen-d)}
.karte-ikon svg{width:22px;height:22px}
/* In der Vierer-Reihe sind die Spalten schmal (rund 210 px Textbreite). Etwas weniger
   Innenabstand und Silbentrennung machen den Flattersatz dort deutlich ruhiger. */
.karte-txt{padding:1.45rem 1.2rem 1.55rem;display:flex;flex-direction:column;flex:1;gap:.7rem}
.karte-txt .btn{align-self:flex-start;margin-top:.35rem;padding:.7rem 1.2rem;font-size:.92rem}
.karte-txt h3{margin:0}
.karte-txt p{color:var(--text2);font-size:.985rem;margin:0;flex:1;hyphens:auto}

/* Zwei-Spalten-Bereichskarten (Startseite) */
.bereich{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-s);
  transition:transform var(--t),box-shadow var(--t)}
.bereich:hover{transform:translateY(-3px);box-shadow:var(--sh-l)}
/* 4:3 – ein Querformat aus einem Hochformat-Portrait zeigt sonst nur den Kopf.
   Das Bild wird eigens in diesem Verhältnis erzeugt, also nichts beschnitten. */
/* Quadratisch und ohne Höhenbegrenzung: eine max-height würde bei voller Kartenbreite
   wieder 22 % des Portraits abschneiden. */
.bereich-bild{aspect-ratio:1/1;overflow:hidden;background:var(--sand)}
.bereich-bild img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.2,0,.2,1)}
.bereich:hover .bereich-bild img{transform:scale(1.04)}
.bereich-txt{padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;flex:1}
.bereich-txt .kicker{margin-bottom:.5rem}
.bereich-txt>p{color:var(--text2)}
.bereich-liste{list-style:none;margin:1.3rem 0 1.6rem;padding:0;display:grid;gap:.1rem;flex:1}
.bereich-liste li{margin:0;border-top:1px solid var(--linie2)}
.bereich-liste li:last-child{border-bottom:1px solid var(--linie2)}
.bereich-liste a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.72rem .2rem;color:var(--text);text-decoration:none;font-weight:500;font-size:.985rem;
  transition:color var(--t),padding var(--t)}
.bereich-liste a:hover{color:var(--tanne);padding-left:.5rem}
.bereich-liste svg{width:16px;height:16px;color:var(--gruen);opacity:.55;flex:none}
.bereich-liste a:hover svg{opacity:1}

/* Text + Bild */
/* 390 px Mindestbreite je Spalte: bei 320 px standen auf dem Tablet im Hochformat
   (768 px, iPad) nur 41 Zeichen in der Zeile. Jetzt stehen Bild und Text dort
   untereinander und die Zeile ist wieder voll lesbar. */
.txtbild{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr))}
.txtbild-bild{position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-m);background:var(--sand)}
/* Versetzter Farbblock hinter dem Bild – ruhig, aber nicht beliebig */
.txtbild-bild::after{content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:58%;
  border-radius:var(--r-xl);background:var(--gruen-hauch);z-index:-1}
.txtbild{position:relative}
.txtbild-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* Grundstellung: Bild links, Text rechts. --rechts dreht das Paar um, damit sich die
   Seiten abwechseln. Vorher hiess die Klasse im Generator --left/--right und traf hier
   auf nichts: alle Bilder standen links. */
.txtbild--rechts .txtbild-bild{order:2}
@media(max-width:899px){
  .txtbild--rechts .txtbild-bild{order:0}
  /* Untereinander nutzt der Text sonst die volle Breite – bei 860 px waren das
     96 Zeichen je Zeile. Die Lesebreite bleibt begrenzt und steht mittig. */
  .txtbild-txt{max-width:64ch;margin-inline:auto}
}
.txtbild-txt h2{margin-bottom:.7rem}
.txtbild-txt p{color:var(--text2)}

/* Prüfliste */
/* 288 px, damit in der Lesespalte (680 px) noch zwei Spalten Platz haben;
   bei 320 px kippte die Liste dort auf eine Spalte.
   Die Trennlinien liegen OBEN an jedem Eintrag: so bleibt die erste Reihe ohne Linie,
   die letzte auch – und die Linien der beiden Spalten stehen auf gleicher Höhe.
   Vorher lagen sie unten in --linie2 und waren auf der Sandfläche praktisch unsichtbar. */
.pruefliste{list-style:none;padding:0;margin:0;display:grid;gap:0 2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr))}
.pruefliste li{display:flex;gap:.8rem;align-items:flex-start;margin:0;
  padding:.95rem 0;border-top:1px solid rgba(43,49,40,.11);
  color:var(--text);font-size:1.01rem;line-height:1.58}
/* Die erste Reihe hat weder Linie noch oberes Polster: sonst steht die Liste
   scheinbar weiter von ihrer Überschrift weg als die zweite Reihe von der ersten. */
.pruefliste li:first-child{border-top:0;padding-top:0}
@media(min-width:620px){
  /* zwei Spalten: die ersten beiden Einträge bilden die erste Reihe */
  .pruefliste li:nth-child(2){border-top:0;padding-top:0}
}
.pruefliste svg{width:18px;height:18px;flex:none;color:var(--gruen-d);margin-top:.3rem;
  stroke-width:1.7}
.liste-fuss{margin-top:1.4rem;color:var(--text2);font-style:italic}

/* Themen-Chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0;list-style:none}
.chips li{margin:0}
.chips span{display:inline-flex;align-items:center;gap:.55rem;background:transparent;
  border:1px solid var(--linie);border-radius:999px;padding:.55rem 1.1rem;font-size:.96rem;
  color:var(--text2);font-weight:500;transition:border-color var(--t),color var(--t)}
.chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen-hell);flex:none}
.chips li:hover span{border-color:var(--gruen);color:var(--text)}

/* Info-Karten (Dauer/Kosten/Ort) */
/* Feste Spaltenzahl statt auto-fit: die Trennlinie zwischen zwei Angaben darf nur
   dort stehen, wo links wirklich eine Nachbarin ist. Mit auto-fit rutschte die dritte
   Angabe beim Umbruch samt negativem Rand 19 px aus dem Raster heraus (768 und 1024 px)
   und zog eine Linie ins Nichts. */
.infos{display:grid;gap:1.4rem 2.4rem;grid-template-columns:1fr;
  padding:1.5rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.info{display:flex;gap:.85rem;align-items:flex-start}
.info svg{width:21px;height:21px;color:var(--gruen-d);flex:none;margin-top:.15rem;stroke-width:1.6}
@media(min-width:720px){
  .infos{grid-template-columns:repeat(2,1fr)}
  .info:not(:nth-child(2n+1)){padding-left:2.4rem;border-left:1px solid var(--linie);
    margin-left:-1.2rem}
}
@media(min-width:1000px){
  .infos{grid-template-columns:repeat(3,1fr)}
  .info{padding-left:0;border-left:0;margin-left:0}
  .info:not(:nth-child(3n+1)){padding-left:2.4rem;border-left:1px solid var(--linie);
    margin-left:-1.2rem}
}
.info dt{font-size:.79rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);margin-bottom:.22rem}
.info dd{margin:0;font-weight:600;color:var(--text);line-height:1.45}

/* Schritte */
.schritte{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  counter-reset:s;list-style:none;padding:0;margin:0}
.schritte li{margin:0;padding:1.4rem 0 0;border-top:2px solid var(--gruen-hell);
  counter-increment:s}
.schritte li::before{content:counter(s) ".";display:block;font-family:'Source Serif 4',serif;
  font-size:1.5rem;font-weight:600;color:var(--gruen-d);line-height:1;margin-bottom:.6rem}
.schritte h3{margin:0 0 .4rem;font-size:1.14rem}
.schritte p{margin:0;color:var(--text2);font-size:.97rem}

/* Galerie */
/* Ab 720 px passen drei Bilder in eine Reihe (200 px Mindestbreite), darunter steht
   eine Spalte. So bleibt nie ein einzelnes Bild allein in der zweiten Zeile. */
.galerie{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media(min-width:720px){
  .galerie{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
}
.galerie figure{margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--weiss);
  border:1px solid var(--linie)}
.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .55s cubic-bezier(.2,0,.2,1)}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{padding:.85rem 1.1rem 1rem;font-size:.9rem;color:var(--text2);line-height:1.5}

/* Zitat */
.zitat{position:relative;overflow:hidden;background:var(--gruen-flaeche)}
.zitat-bild{position:absolute;inset:0}
.zitat-bild img{width:100%;height:100%;object-fit:cover}
.zitat-bild::after{content:"";position:absolute;inset:0;background:rgba(52,68,43,.74)}
.zitat-in{position:relative;z-index:2;max-width:900px;margin-inline:auto;text-align:center;
  padding:clamp(3.4rem,8vw,6rem) var(--pad)}
.zitat blockquote{margin:0;font-family:'Source Serif 4',serif;
  font-size:clamp(1.42rem,1.1rem + 1.7vw,2.35rem);line-height:1.35;color:#fff;font-weight:400;
  text-wrap:balance}
.zitat blockquote::before{content:"„";display:block;font-size:3.2rem;line-height:.6;
  color:var(--limette);opacity:.65;margin-bottom:.5rem}
.zitat cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.92rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}

.zitat-gross{text-align:center;max-width:820px;margin-inline:auto}
.zitat-gross p{font-family:'Source Serif 4',serif;font-size:clamp(1.25rem,1rem + 1.2vw,1.85rem);
  line-height:1.42;color:var(--gruen-tief);margin:0 0 .35em;text-wrap:balance}
.zitat-gross .quelle{margin-top:1.5rem;font-family:'Source Sans 3',sans-serif;font-size:1rem;
  color:var(--text2);font-style:italic;max-width:52ch;margin-inline:auto}

/* Personenkarten */
.person{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-s);transition:transform var(--t),
  box-shadow var(--t)}
.person:hover{transform:translateY(-3px);box-shadow:var(--sh-l)}
.person{position:relative}
.person-bild{aspect-ratio:3/4;overflow:hidden;background:var(--gruen-hauch);
  position:relative;z-index:1}
.person-bild img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.person-txt{padding:1.7rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.person-txt h3{margin:0}
.person-rolle{font-size:.83rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tanne)}
.person-txt p{color:var(--text2);font-size:.98rem;margin:0;flex:1}

/* Pferde */
/* Tierportraits nebeneinander (Unsere Pferde) */
/* Drei Tiere = eine Reihe. Mit minmax(260px) blieb auf dem Tablet das dritte Tier
   allein in der zweiten Zeile stehen. */
.tiere{display:grid;gap:clamp(1.6rem,3.2vw,2.8rem);grid-template-columns:1fr}
@media(min-width:700px){.tiere{grid-template-columns:repeat(3,1fr)}}
.tier-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-m);
  background:var(--sand);margin-bottom:1.15rem}
.tier-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,0,.2,1)}
.tier:hover .tier-bild img{transform:scale(1.035)}
.tier h3{margin:0 0 .15rem;font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem)}
/* Platz für zwei Zeilen: sonst rutschen die Steckbriefe der drei Tiere
   gegeneinander, sobald eine Beschreibung umbricht. */
.tier-rolle{color:var(--tanne);font-weight:600;font-size:.95rem;margin:0 0 1rem;
  line-height:1.45;min-height:2.9em}
@media(max-width:719px){.tier-rolle{min-height:0}}
.tier-daten{display:grid;gap:0;margin:0}
.tier-daten div{padding:.6rem 0;border-top:1px solid rgba(43,49,40,.11)}
.tier-daten dt{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);font-weight:600;margin-bottom:.12rem}
.tier-daten dd{margin:0;color:var(--text);font-size:.985rem;line-height:1.5}

/* Zeitleiste */
.zeitleiste{position:relative;list-style:none;margin:0;padding:0 0 0 2.1rem}
.zeitleiste::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(var(--gruen-hell),var(--gruen-hauch))}
.zeitleiste li{position:relative;margin:0 0 1.5rem;padding:0}
.zeitleiste li::before{content:"";position:absolute;left:-2.1rem;top:.52rem;width:16px;height:16px;
  border-radius:50%;background:var(--weiss);border:3px solid var(--gruen)}
.zeitleiste b{display:block;font-family:'Source Sans 3',sans-serif;font-size:.85rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tanne);margin-bottom:.15rem}
.zeitleiste span{color:var(--text2);line-height:1.6}

/* Fakten */
.fakten{display:grid;gap:0;margin:0;max-width:52rem}
.fakten div{display:grid;grid-template-columns:minmax(7rem,10rem) 1fr;gap:1.2rem;
  padding:1rem .2rem;border-bottom:1px solid var(--linie)}
.fakten div:first-child{border-top:1px solid var(--linie)}
.fakten dt{font-weight:600;color:var(--text3)}
.fakten dd{margin:0;color:var(--text2)}
@media(max-width:520px){.fakten div{grid-template-columns:1fr;gap:.2rem}}

/* Akkordeon / FAQ */
.akkordeon{display:grid;gap:0;max-width:78ch;border-top:1px solid var(--linie)}
.akkordeon details{border-bottom:1px solid var(--linie);transition:border-color var(--t)}
.akkordeon details[open]{border-color:var(--gruen-hell)}
.akkordeon summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem .2rem;font-weight:600;cursor:pointer;list-style:none;color:var(--text);
  transition:color var(--t)}
.akkordeon summary::-webkit-details-marker{display:none}
.akkordeon summary:hover{color:var(--tanne)}
.akkordeon summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--gruen);
  border-bottom:2px solid var(--gruen);transform:rotate(45deg) translateY(-2px);transition:transform var(--t)}
.akkordeon details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.akkordeon .inhalt{padding:0 .2rem 1.3rem;color:var(--text2);max-width:70ch}
.akkordeon .inhalt p:first-child{margin-top:0}

/* Preistabelle */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-l);
  background:var(--weiss)}
table.preise{width:100%;border-collapse:collapse;min-width:620px}
table.preise th,table.preise td{padding:1rem 1.2rem;text-align:left;
  border-bottom:1px solid var(--linie2);font-size:.99rem}
table.preise thead th{background:var(--gruen-hauch);color:var(--gruen-tief);font-weight:700;
  font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;
  font-family:'Source Sans 3',sans-serif}
table.preise tbody tr:last-child td{border-bottom:0}
table.preise tbody tr:hover{background:var(--gruen-hauch2)}
table.preise td:last-child{font-weight:700;color:var(--gruen-tief);white-space:nowrap}
table.preise td:nth-child(2),table.preise td:nth-child(3){white-space:nowrap;color:var(--text2)}
/* Kleingedrucktes ist kleiner gesetzt und passt darum mehr Zeichen in dieselbe
   Breite – bei 680 px waren es 91 statt der angepeilten hoechstens 85. */
.tabelle-fuss{margin-top:1.1rem;font-size:.93rem;color:var(--text2);max-width:78ch}
.tabelle-fuss p{margin:0 0 .35em}

/* Externer Link */
.extern{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:1.3rem 0;max-width:72ch}
.extern-txt{flex:1;min-width:220px}
.extern-txt p{margin:0;color:var(--text2);font-size:.97rem}
.extern-txt small{display:block;margin-top:.3rem;color:var(--text3);font-size:.85rem}

/* CTA */
.cta{background:var(--gruen-flaeche);color:#fff;border-radius:var(--r-xl);
  padding:clamp(2.2rem,5vw,3.4rem);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-70px;top:50%;transform:translateY(-50%);
  width:280px;aspect-ratio:178/227;opacity:.06;pointer-events:none;
  background:url('../img/logo-k.svg?v=cf264c84') no-repeat center/contain}
.cta h2{color:#fff;position:relative}
.cta p{color:rgba(255,255,255,.86);max-width:52ch;margin-inline:auto;position:relative}
.cta .btn-reihe{position:relative;justify-content:center}

/* ---------------------------------------------------------------- Zellsysteme-Grafik */
/* margin-block:0 ist wichtig: <figure> hat vom Browser 1em oben und unten. In einem
   Abschnitt ohne oberes Polster (.sec--anschluss) wandert dieser Rand nach aussen
   (Margin Collapsing) und schiebt den ganzen Abschnitt nach unten - zwischen zwei
   Sandflaechen klaffte dadurch ein heller Streifen. */
.zellgrafik{border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(1.4rem,3.5vw,2.2rem);max-width:760px;margin:0 auto;background:var(--weiss)}
.zellgrafik svg{width:100%;height:auto}
.zellgrafik figcaption{margin-top:1.2rem;text-align:center;color:var(--text2);font-size:.96rem}
.zell-titel{font-family:'Source Serif 4',serif;font-size:1.32rem;font-weight:600;
  text-align:center;margin:0 0 1.3rem;color:var(--text)}

/* Angebotsliste mit Verweisen */
.linkliste{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:52ch}
.linkliste li{margin:0;border-bottom:1px solid var(--linie2)}
.linkliste li:first-child{border-top:1px solid var(--linie2)}
.linkliste a{display:flex;align-items:center;gap:.7rem;padding:.8rem .1rem;
  color:var(--text);text-decoration:none;font-weight:500;transition:color var(--t),padding var(--t)}
.linkliste a:hover{color:var(--tanne);padding-left:.4rem}
.linkliste svg{width:19px;height:19px;flex:none;color:var(--gruen-d);opacity:.8}
.linkliste-vor{margin-bottom:1rem;color:var(--text2)}
.linkliste-nach{margin-top:1.1rem;color:var(--text2)}

/* ---------------------------------------------------------------- Kontakt */
.kontaktkarten{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.kkarte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);
  padding:1.9rem;display:flex;flex-direction:column;gap:.35rem}
.kkarte h3{margin-bottom:.1rem}
.kkarte .rolle{font-size:.83rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tanne);margin-bottom:1.1rem}
.kkarte dl{margin:0;display:grid;gap:.85rem}
.kkontakt{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--text);
  font-weight:600;transition:color var(--t)}
.kkontakt:hover{color:var(--tanne)}
.kkontakt span.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--gruen-hauch);color:var(--tanne);flex:none;transition:background var(--t)}
.kkontakt:hover span.ic{background:#e0edcf}
.kkontakt svg{width:20px;height:20px}
.kkontakt small{display:block;font-size:.79rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3)}

/* Formular */
.formular{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);
  padding:clamp(1.6rem,4vw,2.6rem)}
.feldreihe{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.feld{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1.15rem}
.feld label{font-weight:600;font-size:.95rem;color:var(--text)}
.feld .pflicht{color:var(--tanne)}
.feld input,.feld select,.feld textarea{font-family:inherit;font-size:max(1rem,16px);
  color:var(--text);
  background:var(--papier);border:1.5px solid var(--linie);border-radius:var(--r-m);
  padding:.82rem 1rem;transition:border-color var(--t),box-shadow var(--t),background var(--t);
  width:100%}
.feld textarea{min-height:170px;resize:vertical;line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);
  background:var(--weiss);box-shadow:0 0 0 4px rgba(101,179,46,.14)}
.feld input::placeholder,.feld textarea::placeholder{color:#a8b0a2}
.feld small{color:var(--text3);font-size:.87rem}
.zustimmung{display:flex;gap:.8rem;align-items:flex-start;background:var(--gruen-hauch2);
  border:1px solid var(--linie);border-radius:var(--r-m);padding:1.05rem 1.2rem;margin-bottom:1.4rem}
/* 28 px statt 24: Kästchen zählen zu den kleinsten Zielen im Formular. Mehr geht
   nicht, ohne klobig zu wirken – dafür schaltet auch der Text daneben (label for). */
.zustimmung input{width:28px;height:28px;flex:none;margin-top:.05rem;font-size:16px;
  accent-color:var(--gruen-btn);cursor:pointer}
.zustimmung label{font-size:.94rem;line-height:1.6;color:var(--text2);font-weight:400;
  cursor:pointer}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.meldung{border-radius:var(--r-m);padding:1.05rem 1.25rem;margin-bottom:1.5rem;font-size:.98rem;
  display:flex;gap:.8rem;align-items:flex-start}
.meldung svg{width:21px;height:21px;flex:none;margin-top:.15rem}
.meldung--ok{background:#eef7e6;border:1px solid #c4e0a8;color:#2f6b1a}
.meldung--fehler{background:#fdf0ee;border:1px solid #f0c6be;color:#a8341f}

/* Anfahrt */
.anfahrt{display:grid;gap:clamp(1.5rem,3vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  align-items:center}
.anfahrt-karte{background:var(--gruen-hauch2);border:1px solid var(--linie);border-radius:var(--r-xl);
  padding:clamp(1.6rem,3.5vw,2.4rem)}
.anfahrt-karte address{font-style:normal;font-size:1.1rem;line-height:1.7;color:var(--text);
  margin-bottom:1.4rem}

/* ---------------------------------------------------------------- Rechtstexte */
.rechtskopf{background:var(--gruen-hauch2);border-bottom:1px solid var(--linie);
  padding-block:clamp(2.6rem,6vw,4.4rem)}

.rechtskopf h1{margin-bottom:.5rem}
.rechtskopf p{color:var(--text2);max-width:62ch;margin:0}
.rechtstext{max-width:74ch;margin-inline:auto;font-size:1.01rem}
.rechtstext h2{font-size:clamp(1.24rem,1.1rem + .7vw,1.55rem);margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid var(--linie)}
.rechtstext h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-size:1.1rem;margin-top:1.6rem}
.rechtstext p{color:var(--text2)}
.rechtstext ul{color:var(--text2)}
.legal-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  margin:1.5rem 0}
.legal-card{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);
  padding:1.4rem 1.5rem}
.legal-card h3{margin-top:0}
.legal-card p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- Footer */
.fuss{background:var(--gruen-flaeche);color:rgba(255,255,255,.78);
  padding-block:clamp(3rem,6vw,4.5rem) 0;position:relative;overflow:hidden}
/* Signet als ruhige Fläche, wie im Kopfbereich */
.fuss::before{content:"";position:absolute;left:-120px;bottom:-90px;width:min(420px,40vw);
  aspect-ratio:178/227;background:url('../img/logo-k.svg?v=cf264c84') no-repeat center/contain;
  opacity:.045;pointer-events:none}
.fuss>.wrap{position:relative;z-index:1}

.fuss-raster{display:grid;gap:2rem 1.4rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.fuss-marke{grid-column:1 / -1}
@media(max-width:379px){.fuss-raster{grid-template-columns:minmax(0,1fr)}}
@media(min-width:900px){
  .fuss-raster{gap:clamp(2rem,4vw,3.2rem);
    grid-template-columns:minmax(260px,1.35fr) repeat(4,minmax(0,1fr))}
  .fuss-marke{grid-column:auto}
}
@media(max-width:899px){
  .fuss-marke{padding-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.14)}
}

/* --- Marke, Adresse, Rufnummern */
.fuss-marke img{width:210px;background:#fff;border-radius:12px;padding:.6rem .75rem}
.fuss-adresse{display:flex;align-items:flex-start;gap:.55rem;font-style:normal;
  margin:1.3rem 0 1.1rem;font-size:.96rem;line-height:1.65;color:rgba(255,255,255,.72)}
.fuss-adresse svg{width:17px;height:17px;flex:none;margin-top:.22rem;opacity:.6}
.fuss-kontakt{display:grid;gap:.5rem}
@media(min-width:520px) and (max-width:899px){
  .fuss-kontakt{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
}
.fk-zeile{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-m);text-decoration:none;
  transition:border-color var(--t),background var(--t)}
.fk-zeile:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05);
  text-decoration:none}
.fk-ic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#cfe9b0}
.fk-ic svg{width:16px;height:16px}
.fk-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.fk-name{font-size:.78rem;color:rgba(255,255,255,.55)}
.fk-wert{font-size:.95rem;font-weight:600;color:rgba(255,255,255,.9);overflow-wrap:anywhere}
.fk-wert.nr{white-space:nowrap}

/* --- Profile bei Facebook, Instagram, Google (Inhalt aus dem CMS) */
.fuss-sozial{margin-top:1.5rem}
.fuss-sozial-titel{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:.65rem}
.fuss-sozial-links{display:flex;gap:.65rem;flex-wrap:wrap}
/* Runde Knöpfe mit dem jeweiligen Markenzeichen. Ruhig in Weiß, beim Überfahren
   in der Hausfarbe des Netzwerks – das erkennt man ohne Beschriftung. */
.fuss-sozial-links a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.fuss-sozial-links svg{width:20px;height:20px;display:block}
.fuss-sozial-links a:hover,.fuss-sozial-links a:focus-visible{transform:translateY(-2px);
  border-color:transparent;background:#fff}
.fuss-sozial-links a.ist-facebook:hover,.fuss-sozial-links a.ist-facebook:focus-visible{color:#1877f2}
.fuss-sozial-links a.ist-instagram:hover,.fuss-sozial-links a.ist-instagram:focus-visible{color:#d62976}
/* Google trägt beim Überfahren sein echtes vierfarbiges Zeichen – einfarbig blau
   sähe es aus wie ein zweites Facebook. Ruhend steht das einteilige „G" da,
   damit keine Fugen zwischen den vier Teilen durchblitzen. */
.fuss-sozial-links a.ist-google .g-bunt{display:none}
.fuss-sozial-links a.ist-google:hover .g-einfach,
.fuss-sozial-links a.ist-google:focus-visible .g-einfach{display:none}
.fuss-sozial-links a.ist-google:hover .g-bunt,
.fuss-sozial-links a.ist-google:focus-visible .g-bunt{display:block}
@media(prefers-reduced-motion:reduce){.fuss-sozial-links a:hover{transform:none}}

/* --- Menüspalten mit Symbolen */
.fuss h2,.fuss h3{color:#fff;font-family:'Source Sans 3',sans-serif;font-size:.8rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;
  padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.14)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0}
.fuss a{color:rgba(255,255,255,.76);text-decoration:none;font-size:.95rem;
  transition:color var(--t)}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-spalte li a{display:flex;align-items:flex-start;gap:.55rem;padding:.42rem 0;
  min-height:24px;line-height:1.45}
/* Symbol an der ersten Zeile halten, sonst rutscht es bei zweizeiligen Einträgen in die Mitte */
.fuss-spalte li a svg{width:16px;height:16px;flex:none;margin-top:.2em;color:var(--gruen-hell);
  opacity:.75;transition:opacity var(--t),transform var(--t)}
.fuss-spalte li a:hover{text-decoration:none;color:#fff}
.fuss-spalte li a:hover svg{opacity:1;transform:translateX(2px)}
.fuss-spalte li a span{overflow-wrap:anywhere}
.fuss-raster>div{min-width:0}

/* --- Einzugsgebiet */
.fuss-region{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;font-size:.9rem}
.fuss-region-titel{color:rgba(255,255,255,.5);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.fuss-region-liste{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.fuss-region a{display:inline-block;padding:.4rem 0}
@media(max-width:560px){
  .fuss-region{flex-direction:column;align-items:flex-start;gap:.3rem}
  .fuss-region-liste{flex-direction:column;gap:0}
}

/* --- Rechtlicher Hinweis: über die volle Breite, klar abgesetzt */
.fuss-hinweis{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.6rem;
  padding:1.05rem 1.25rem;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-m);
  font-size:.87rem;line-height:1.65;color:rgba(255,255,255,.58);max-width:none}
.fuss-hinweis svg{width:18px;height:18px;flex:none;margin-top:.16rem;opacity:.55}

/* --- Abschlusszeile */
.fuss-unten{margin-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);padding-block:1.4rem;
  display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:.2rem;
  font-size:.88rem;color:rgba(255,255,255,.55)}
@media(min-width:900px){
  .fuss-unten{grid-template-columns:1fr auto 1fr;align-items:center;
    justify-items:stretch;text-align:left;gap:.4rem 1.2rem}
  .fuss-copy{justify-self:start}
  .footer-credit{justify-self:center}
  .fuss-legal{justify-self:end}
}
.fuss-legal{order:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.4rem}
.fuss-copy{order:2;margin-top:.5rem}
.footer-credit{order:3}
@media(min-width:900px){
  .fuss-copy{order:1;margin-top:0}
  .footer-credit{order:2}
  .fuss-legal{order:3;justify-content:flex-end}
}
.fuss-legal a{display:inline-block;padding:.55rem 0;font-size:.88rem}

/* Credit derkaufmann.at: bewusst zurückhaltend, tritt erst beim Überfahren hervor.
   Selektor mit .fuss davor, sonst gewinnt die allgemeine Regel .fuss a (höhere Spezifität)
   und der Credit erscheint so kräftig wie die Menüpunkte. */
.fuss .footer-credit{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  min-height:44px;padding:.5rem 0;color:rgba(255,255,255,.24);letter-spacing:.2px;
  text-decoration:none;transition:color var(--t)}
.fuss .footer-credit:hover,.fuss .footer-credit:focus-visible{color:rgba(255,255,255,.68);
  text-decoration:none}
.fc-heart{color:rgba(200,212,0,.42);font-size:11px;transition:color .3s,transform .3s;margin:0 1px}
.footer-credit:hover .fc-heart{color:#ff5050;transform:scale(1.2)}

@media(max-width:680px){
  /* Etwas Polster, damit der Nach-oben-Knopf nicht auf der letzten Zeile sitzt.
     Vorher 3,6 rem – das ergab unter der letzten Zeile 80 px leere Fläche. Gemessen
     reichen 1,6 rem: der Knopf steht rechts unten, die Fusszeilen stehen mittig und
     bleiben links davon. */
  .fuss{padding-bottom:1.6rem}
  .fuss-unten{padding-bottom:1rem}
}


/* ---------------------------------------------------------------- Regionalseiten */
.orte{list-style:none;margin:0;padding:0;display:grid;gap:0 2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.orte li{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
  padding:.7rem 0;border-bottom:1px solid var(--linie2)}
.orte b{font-weight:600;color:var(--text)}
.orte span{font-size:.9rem;color:var(--text3)}
.orte-nach{margin:1.3rem 0 0;color:var(--text2);max-width:70ch}
.orte-quelle{margin:1.1rem 0 0;font-size:.84rem;color:var(--text3);max-width:78ch}

.regionsliste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.regionsliste li{margin:0}
.regionsliste a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);
  padding:1rem 1.25rem;color:var(--text);text-decoration:none;font-weight:600;
  transition:border-color var(--t),color var(--t),transform var(--t)}
.regionsliste a:hover{border-color:var(--gruen);color:var(--tanne);transform:translateY(-2px)}
.regionsliste svg{width:17px;height:17px;color:var(--gruen);flex:none}

.fuss-region{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;font-size:.9rem}
.fuss-region-titel{color:rgba(255,255,255,.5);font-size:.8rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.fuss-region a{color:rgba(255,255,255,.76);text-decoration:none;
  display:inline-block;padding:.55rem 0}
@media(max-width:560px){
  .fuss-region{flex-direction:column;align-items:flex-start;gap:0}
  .fuss-region-titel{margin-bottom:.3rem}
}
.fuss-region a:hover{color:#fff;text-decoration:underline}
.fuss-hinweis{margin-top:1.5rem;padding-top:1.5rem}

/* ---------------------------------------------------------------- Nach oben */
.nachoben{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:50px;height:50px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--gruen-btn);color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(43,49,40,.24);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .28s,transform .28s,visibility .28s,background var(--t)}
.nachoben.ist-sichtbar{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nachoben:hover{background:var(--gruen-btn-d);transform:translateY(-3px) scale(1.05)}
.nachoben svg{width:22px;height:22px}

/* ---------------------------------------------------------------- Hilfsklassen */
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-l{margin-top:clamp(2rem,4vw,3rem)}
.mt-m{margin-top:1.8rem}

/* ---------------------------------------------------------------- Einblenden */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,.7,.3,1),transform .75s cubic-bezier(.16,.7,.3,1)}
.reveal--links{transform:translateX(-32px)}
.reveal--rechts{transform:translateX(32px)}
/* Auf schmalen Geräten kommen die Blöcke nur von unten: der seitliche Versatz von 32 px
   schob noch nicht eingeblendete Abschnitte über den Fensterrand hinaus. Sichtbar war das
   nicht (der Rand ist abgeschnitten), die Seite meldete aber horizontales Scrollen. */
@media(max-width:719px){
  .reveal--links,.reveal--rechts{transform:translateY(26px)}
}
.reveal.ist-da{opacity:1;transform:none}
/* Gestaffelt, damit Kacheln nacheinander erscheinen statt alle auf einmal */
.reveal[data-verzug="1"]{transition-delay:.09s}
.reveal[data-verzug="2"]{transition-delay:.18s}
.reveal[data-verzug="3"]{transition-delay:.27s}
.reveal[data-verzug="4"]{transition-delay:.36s}
.reveal[data-verzug="5"]{transition-delay:.45s}

/* Langsame Kamerafahrt im Kopfbild */
@keyframes ruhigerZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-foto img,.skopf-bild img,.f404-grund img{animation:ruhigerZoom 26s ease-out forwards}

/* Zwei Fassungen derselben Grafik: das Dreieck braucht Breite, hochkant passt aufs
   Handy. Immer nur eine ist im Dokument sichtbar, die andere steht auf display:none
   und taucht damit auch beim Vorlesen nicht auf. Die Obergrenze verhindert, dass die
   hohe Fassung kurz vor dem Umschaltpunkt riesig wird. */
.zellsvg--hoch{display:none}
@media(max-width:719px){
  .zellsvg--breit{display:none}
  .zellsvg--hoch{display:block;margin-inline:auto;max-width:420px}
}

/* ---------------------------------------------------------------- Lupe: Foto groß ansehen */
/* Beim Überfahren mit der Maus erscheint ein Lupenzeichen, der Klick öffnet das Foto groß.
   Ein Aufgehen allein beim Überfahren wäre am Handy nicht bedienbar und würde beim
   kleinsten Mausweg wieder zuklappen – darum Hinweis beim Überfahren, Bild beim Klick.
   Die Lupe setzt erst site.js ein; ohne JavaScript wird nichts angeboten. */
html.lupe-offen{overflow:hidden}
.hat-lupe{position:relative}
img[data-gross]{cursor:zoom-in}
/* Die Fläche bleibt immer 46 px: nur Deckkraft und ein kleiner Versatz werden bewegt.
   Ein Verkleinern im Ruhezustand wuerde das Tippziel unter die 44-px-Marke druecken. */
.lupe{position:absolute;top:.75rem;right:.75rem;z-index:3;width:46px;height:46px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--gruen-tief);cursor:zoom-in;
  box-shadow:0 2px 10px rgba(43,49,40,.22);opacity:0;transform:translateY(-5px);
  transition:opacity .22s,transform .22s,background .2s}
.lupe svg{width:21px;height:21px}
.hat-lupe:hover .lupe,.hat-lupe:focus-within .lupe{opacity:1;transform:none}
.lupe:hover{background:#fff}
.lupe:focus-visible{opacity:1;transform:none;outline:3px solid var(--tanne);outline-offset:2px}
/* Ohne Maus (Handy, Tablet) gibt es kein Überfahren – dort steht die Lupe dauerhaft da */
@media(hover:none){.lupe{opacity:.9;transform:none}}

.lupe-box{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;
  background:transparent;overflow:hidden;color:#fff}
.lupe-box::backdrop{background:rgba(22,28,20,.88)}
/* minmax(0,1fr): sonst waechst die Bildzeile bis zur vollen Bildhoehe und das Foto
   schiebt sich ueber die Bildunterschrift hinaus */
.lupe-in{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.9rem;
  padding:clamp(3.6rem,7vw,4.6rem) clamp(.9rem,7vw,5rem) clamp(1rem,3vw,2rem)}
.lupe-box[open] .lupe-in{animation:lupeAuf .28s cubic-bezier(.16,.7,.3,1)}
@keyframes lupeAuf{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
.lupe-buehne{display:grid;place-items:center;min-height:0}
/* Die Hoehe wird in Fensterhoehe gerechnet, nicht in Prozent: <picture> steht global auf
   display:contents und die Rasterzeile gibt Prozentangaben keine feste Bezugshoehe –
   das Foto schob sich sonst ueber die Bildunterschrift. Abgezogen sind Polster oben und
   unten, der Abstand und zwei Zeilen Bildunterschrift. */
.lupe-buehne img{display:block;max-width:100%;width:auto;height:auto;
  max-height:calc(100vh - 12rem);max-height:calc(100dvh - 12rem);
  border-radius:var(--r-m);box-shadow:0 24px 60px rgba(0,0,0,.45);background:var(--sand)}
.lupe-fuss{text-align:center;max-width:64ch;justify-self:center}
.lupe-text{margin:0;font-size:.98rem;line-height:1.5;color:#f3f2ea}
.lupe-zaehler{margin:.35rem 0 0;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:#c3cbbb}
.lupe-knopf{position:absolute;width:48px;height:48px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.26);border-radius:50%;background:rgba(255,255,255,.1);
  color:#fff;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.lupe-knopf:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.lupe-knopf:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lupe-knopf svg{width:24px;height:24px}
.lupe-zu{top:clamp(.9rem,2.5vw,1.6rem);right:clamp(.9rem,2.5vw,1.6rem)}
.lupe-vor{left:clamp(.6rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lupe-nach{right:clamp(.6rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lupe-vor:hover,.lupe-nach:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:560px){
  .lupe-knopf{width:44px;height:44px}
  .lupe-vor{left:.5rem}.lupe-nach{right:.5rem}
  .lupe-buehne img{max-height:calc(100vh - 10rem);max-height:calc(100dvh - 10rem)}
}

/* ---------------------------------------------------------------- Bewegung */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-foto img,.skopf-bild img,.f404-grund img{animation:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- Druck */
@media print{
  .kopf,.mnav,.nachoben,.cta,.burger,.hero-bild,.skopf-bild,.lupe,
  .lupe-box{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.skopf,.zitat{background:#fff!important}
  .hero h1,.skopf h1,.hero p,.skopf p,.zitat blockquote{color:#000!important}
  .fuss{background:#fff;color:#000;border-top:1px solid #ccc}
  .fuss a,.fuss address,.fuss-marke p{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .sec{padding-block:1.2rem}
  .karte,.merkmal,.info,.akkordeon details{break-inside:avoid}
}

/* ==========================================================================
   Urlaubshinweis (Popup)
   Wird beim Ausliefern von inc/render.php eingesetzt, solange im CMS ein
   Urlaub eingeschaltet ist. Erscheint je Gerät einmal.
   ========================================================================== */
.urlaub-lage{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:var(--pad);background:rgba(43,49,40,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--t)}
.urlaub-lage[hidden]{display:none}
.urlaub-lage.ist-da{opacity:1}
.urlaub-box{position:relative;width:min(540px,100%);max-height:88vh;overflow-y:auto;
  background:var(--papier);border-radius:var(--r-l);box-shadow:var(--sh-l);
  transform:translateY(14px) scale(.985);transition:transform var(--t)}
.urlaub-lage.ist-da .urlaub-box{transform:none}
.urlaub-box:focus{outline:none}
.urlaub-zu{position:absolute;top:12px;right:12px;width:38px;height:38px;display:grid;
  place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.22);
  color:#fff;cursor:pointer;transition:background var(--t)}
.urlaub-zu:hover{background:rgba(255,255,255,.34)}
.urlaub-zu:focus-visible{outline:2px solid #fff;outline-offset:2px}
.urlaub-kopf{background:var(--gruen-flaeche);color:#fff;padding:26px 30px 22px;
  border-radius:var(--r-l) var(--r-l) 0 0;text-align:center}
.urlaub-kopf .kicker{color:var(--limette);justify-content:center}
.urlaub-kopf h2{color:#fff;margin:.1rem 0 .4rem;font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem)}
.urlaub-ikon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(200,212,0,.16);color:var(--limette);margin-bottom:10px}
.urlaub-fahne{position:absolute;top:14px;left:14px;background:var(--limette);color:var(--gruen-tief);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px}
.urlaub-zeit{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:0;
  color:#e7eede;font-size:.95rem}
.urlaub-zeit svg{opacity:.8}
.urlaub-inhalt{padding:24px 30px 28px}
.urlaub-inhalt p{margin:0 0 1rem}
.urlaub-nummern{background:var(--gruen-hauch);border-radius:var(--r-m);padding:14px 16px;
  margin:0 0 1.15rem}
.urlaub-nummern-titel{margin:0 0 .5rem;font-size:.9rem;color:var(--text2)}
.urlaub-nr{display:flex;align-items:center;gap:.7rem;padding:.45rem .1rem;text-decoration:none;
  color:var(--text)}
.urlaub-nr:hover{color:var(--gruen-tief)}
.urlaub-nr-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;color:var(--gruen-btn);flex:none}
.urlaub-nr-txt{display:flex;flex-direction:column;line-height:1.35}
.urlaub-nr-txt b{font-size:.95rem}
.urlaub-nr-tel{font-variant-numeric:tabular-nums;color:var(--text2);font-size:.92rem}
.urlaub-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.urlaub-btns .btn{flex:1 1 auto;justify-content:center}
@media (max-width:520px){
  .urlaub-kopf{padding:22px 20px 18px}
  .urlaub-inhalt{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .urlaub-lage,.urlaub-box{transition:none}
}

/* Absende-Knopf während des Sendens: nicht abschalten (sonst fehlt sein Wert),
   nur unklickbar machen. */
.btn.ist-busy{pointer-events:none;opacity:.72}

/* ---------------------------------------------------------------- Siegel
   Zeichen/Zertifikat mit kurzer Erklärung (z. B. Cell-Re-Active-Signet). */
.siegel{display:flex;gap:1.2rem;align-items:center;background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--r-l);padding:1.1rem 1.3rem;
  box-shadow:var(--sh-s)}
.siegel-bild img{display:block;width:115px;height:auto}
.siegel-txt h3{margin:0 0 .25rem;font-size:1.05rem}
.siegel-txt p{margin:0;color:var(--text2);font-size:.96rem}
@media (max-width:560px){
  .siegel{flex-direction:column;text-align:center;gap:.9rem}
  .siegel-bild img{width:100px;margin:0 auto}
}

/* --------------------------------------------------------- Anfahrt: Fotos
   Zwei Aufnahmen liegen nebeneinander, eine einzelne nimmt die ganze Breite.
   (Mit fest zwei Spalten stand das verbleibende Foto am Tablet halb so gross
   in der Spalte – aufgefallen bei der Layout-Prüfung am 10.09.2026.) */
.anfahrt-bilder{display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.anfahrt-bilder figure{margin:0}
.anfahrt-bilder figcaption{margin-top:.45rem;font-size:.88rem;color:var(--text3)}

/* ==========================================================================
   News und Beiträge (Inhalte aus dem CMS, siehe inc/news.php)
   ========================================================================== */
/* Seite „Aktuelles": jede Meldung ist eine eigene weiße Karte auf sandfarbener
   Fläche. Das Foto steht links über die ganze Kartenhöhe – vorher war es ein
   kleines Bild mit viel Leerraum darunter, sobald der Text länger wurde. */
.news-liste{display:flex;flex-direction:column;gap:1.7rem;max-width:1040px;margin:0 auto}
.news-eintrag{display:grid;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-l);box-shadow:var(--sh-s);overflow:hidden;
  /* Sprungziel aus der Startseite: nicht unter dem klebenden Kopf landen */
  scroll-margin-top:110px}
.news-eintrag-bild{position:relative;aspect-ratio:3/2;background:var(--sand)}
.news-eintrag-bild .news-bild{position:absolute;inset:0;display:block}
.news-eintrag-bild img{display:block;width:100%;height:100%;object-fit:cover;
  /* Bei langen Beitraegen wird der Ausschnitt hoch und schmal - der obere
     Bildteil ist dann meist der wichtigere. */
  object-position:50% 40%}
/* Einordnung als Marke auf dem Foto */
.news-marke{position:absolute;left:.9rem;top:.9rem;background:rgba(255,255,255,.94);
  color:var(--gruen-tief);border-radius:999px;padding:.28rem .8rem;font-size:.76rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--sh-s)}
.news-eintrag-txt{padding:clamp(1.3rem,1rem + 1.6vw,2.1rem)}
.news-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .5rem;
  font-size:.9rem;color:var(--text3)}
.news-kopf time{display:inline-flex;align-items:center;gap:.4rem}
.news-kopf time svg{width:16px;height:16px;color:var(--gruen)}
.news-art{background:var(--gruen-hauch);color:var(--gruen-tief);border-radius:999px;
  padding:.15rem .7rem;font-weight:600;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}
.news-eintrag h2{margin:0 0 .45rem;font-size:clamp(1.3rem,1.05rem + .9vw,1.72rem)}
.news-lead{margin:0 0 .9rem;color:var(--text2);font-weight:600;
  font-size:clamp(1rem,.98rem + .2vw,1.08rem)}
/* Feine Linie zwischen Vorspann und Fließtext – gliedert lange Beiträge */
.news-eintrag-txt .news-lead + p{padding-top:.9rem;border-top:1px solid var(--linie2)}
.news-eintrag p{margin:0 0 .85rem}
.news-eintrag p:last-child{margin-bottom:0}
.news-leer{display:flex;gap:.9rem;align-items:flex-start;max-width:640px;margin:0 auto;
  background:var(--weiss);border:1px dashed var(--linie);border-radius:var(--r-l);
  padding:1.4rem 1.6rem;color:var(--text2)}
.news-leer svg{flex:none;width:22px;height:22px;color:var(--gruen);margin-top:.15rem}
.news-leer p{margin:0}
@media (min-width:900px){
  .news-eintrag{grid-template-columns:minmax(0,40%) 1fr}
  .news-eintrag-bild{aspect-ratio:auto;min-height:270px}
  .news-eintrag.ohne-bild{grid-template-columns:1fr}
  /* Ohne Foto wirkt die Karte sonst kahl: schmaler grüner Streifen als Auftakt */
  .news-eintrag.ohne-bild{border-left:5px solid var(--gruen)}
}

.news-karten{display:grid;gap:1.2rem}
@media (min-width:720px){
  .news-karten{grid-template-columns:1fr 1fr}
  /* Eine einzelne Meldung soll nicht halb leer links kleben */
  .news-karten--eine{grid-template-columns:minmax(0,560px);justify-content:center}
}
/* Die Karte auf der Startseite fuehrt zum vollstaendigen Beitrag auf /aktuelles.
   Anklickbar ist die ganze Karte (Link auf der Ueberschrift, per ::after aufgezogen). */
.news-karte{position:relative;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s);
  display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)}
.news-karte:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.news-karte-bild{overflow:hidden}
.news-karte-bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s ease}
.news-karte:hover .news-karte-bild img{transform:scale(1.035)}
.news-karte-txt{padding:1.1rem 1.3rem 1.3rem;display:flex;flex-direction:column;flex:1}
.news-karte-txt time{font-size:.88rem;color:var(--text3)}
.news-karte-txt h3{margin:.25rem 0 .45rem;font-size:1.15rem}
.news-karte-txt p{margin:0;color:var(--text2);font-size:.97rem}
.news-karte-link{color:inherit;text-decoration:none}
.news-karte-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-l)}
.news-karte:hover .news-karte-link{color:var(--gruen-tief)}
.news-karte-link:focus-visible{outline:none}
.news-karte-link:focus-visible::after{outline:3px solid var(--tanne);outline-offset:3px}
.news-karte-mehr{margin:.9rem 0 0!important;padding-top:.15rem;display:inline-flex;
  align-items:center;gap:.45rem;color:var(--tanne)!important;font-weight:600;
  font-size:.94rem!important;transition:gap var(--t)}
.news-karte-mehr svg{width:17px;height:17px;transition:transform var(--t)}
.news-karte:hover .news-karte-mehr svg{transform:translateX(4px)}
/* „Weiterlesen" nach unten schieben, damit zwei Karten gleich hoch wirken */
.news-karte-txt p:not(.news-karte-mehr){margin-bottom:auto}
@media(prefers-reduced-motion:reduce){
  .news-karte:hover{transform:none}
  .news-karte:hover .news-karte-bild img{transform:none}
}

/* ==========================================================================
   Bewertungen (Inhalte aus dem CMS, siehe inc/bewertungen.php)
   Bewusst ohne Bewertungs-Auszeichnung – keine Sterne in der Google-Suche.
   ========================================================================== */
/* Google-Zeile unter der Überschrift */
.bew-quelle{display:inline-flex;align-items:center;gap:.5rem;margin:.7rem 0 0;
  font-size:.95rem;font-weight:600;color:var(--text2)}
.bew-g{width:19px;height:19px;flex:none}

/* Schiene: die Karten liegen nebeneinander und lassen sich wischen bzw. mit den
   Pfeilen weiterschieben. Ohne JavaScript bleibt es eine normale Rollfläche. */
.bew-schiene{position:relative;margin-bottom:1.4rem}
.bew-karten{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:.3rem .2rem 1rem;margin:0 -.2rem;
  scrollbar-width:thin;scrollbar-color:var(--linie) transparent}
.bew-karten::-webkit-scrollbar{height:8px}
.bew-karten::-webkit-scrollbar-thumb{background:var(--linie);border-radius:99px}
.bew-karten::-webkit-scrollbar-track{background:transparent}
.bew-karten:focus-visible{outline:3px solid var(--tanne);outline-offset:4px;border-radius:var(--r-m)}
.bew-karten>.bew-karte{flex:0 0 min(360px,84%);scroll-snap-align:start}
/* Alle Karten gleich hoch: In einer Schiene sieht ein „Treppchen" unruhig aus,
   und die Höhe der Fläche richtet sich ohnehin nach der längsten Rückmeldung. */
.bew-karten{align-items:stretch}
@media (min-width:1040px){.bew-karten>.bew-karte{flex-basis:calc((100% - 2.2rem) / 3)}}
/* Pfeile: nur dort, wo eine Maus im Spiel ist – am Handy wischt man */
.bew-pfeil{display:none}
@media (min-width:1040px){
  .bew-pfeil{display:grid;place-items:center;position:absolute;top:calc(50% - 1.2rem);
    transform:translateY(-50%);width:46px;height:46px;border-radius:50%;z-index:2;
    background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sh-m);
    color:var(--gruen-tief);cursor:pointer;
    transition:background var(--t),border-color var(--t),opacity var(--t)}
  .bew-pfeil:hover{background:var(--gruen-hauch);border-color:var(--gruen)}
  .bew-pfeil svg{width:22px;height:22px}
  .bew-pfeil--zurueck{left:-14px}
  .bew-pfeil--vor{right:-14px}
  .bew-pfeil[disabled]{opacity:.35;cursor:default;box-shadow:none}
  /* Passt alles nebeneinander, braucht es keine Pfeile */
  .bew-schiene[data-rollbar="0"] .bew-pfeil{display:none}
}
@media (prefers-reduced-motion:reduce){.bew-karten{scroll-behavior:auto}}
.bew-karte{position:relative;margin:0;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-l);padding:1.5rem 1.5rem 1.3rem;box-shadow:var(--sh-s);
  display:flex;flex-direction:column;gap:.75rem}
.bew-karte::before{content:"”";position:absolute;top:.55rem;right:1.1rem;
  font-family:'Source Serif 4',Georgia,serif;font-size:4.2rem;line-height:1;
  color:var(--gruen-hauch);pointer-events:none}
.bew-sterne{display:inline-flex;gap:2px}
.bew-stern{width:19px;height:19px;fill:var(--linie)}
.bew-stern.ist-voll{fill:var(--gruen)}
.bew-karte blockquote{margin:0;font-size:1.02rem;line-height:1.75;color:var(--text);
  position:relative;z-index:1}
.bew-karte figcaption{margin-top:auto;padding-top:.4rem;font-weight:700;color:var(--gruen-tief);
  font-size:.97rem;display:flex;flex-wrap:wrap;gap:.1rem .55rem;align-items:baseline}
.bew-karte figcaption span{font-weight:400;color:var(--text3);font-size:.9rem}
.bew-band{display:flex;gap:.6rem;align-items:flex-start;justify-content:center;
  max-width:var(--wrap-lese);margin:0 auto 1.3rem;padding:.7rem 1rem;border-radius:var(--r-m);
  background:var(--weiss);border:1px dashed var(--linie);color:var(--text3);
  font-size:.9rem;line-height:1.6;text-align:left}
.bew-band svg{flex:none;width:19px;height:19px;margin-top:.12rem;color:var(--gruen)}
.bew-muster{font-weight:600;color:var(--text3);font-size:.78rem;letter-spacing:.03em;
  text-transform:uppercase;border:1px dashed var(--linie);border-radius:999px;padding:.1rem .5rem}
.bew-btn{gap:.6rem}
.bew-btn .bew-g{width:18px;height:18px}
/* Stern im Knopf „Jetzt bewerten" */
.bew-btn>svg:first-child:not(.bew-g){width:17px;height:17px;flex:none}
/* Pflichthinweise unter den Bewertungen (WKO 14.09.2026): drei Absaetze statt einem.
   Der Kontrast liegt bewusst hoeher als beim uebrigen Kleingedruckten - die Saetze
   sollen lesbar sein, nicht versteckt wirken. */
.bew-hinweis{max-width:64ch;margin:1.4rem auto 0;text-align:center;
  font-size:.87rem;line-height:1.65;color:var(--text2)}
.bew-hinweis p{margin:0 0 .6rem}
.bew-hinweis p:last-child{margin-bottom:0}