/* Plus Jakarta Sans, lokal eingebunden (SIL Open Font License 1.1) */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-400-normal.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:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-500-normal.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:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-600-normal.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:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-700-normal.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:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-ext-800-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('schrift/plus-jakarta-sans-latin-800-normal.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;
}

/* BeziehungsRäume — modernes Layout, eine Schriftfamilie, warme Palette */

:root{
  /* Flächen */
  --creme:#F7F3EA;
  --creme-2:#FFFFFF;
  --creme-3:#F1EADC;
  /* Grün */
  --gruen:#1F4A2C;
  --gruen-2:#2A6039;
  --gruen-tief:#16351F;
  /* Akzent */
  --gold:#C8A45D;
  --gold-2:#A8823B;
  --gold-tief:#7E611F;
  /* Schrift */
  --ink:#1A1D19;
  --ink-2:#4C5349;
  --ink-3:#7A8177;
  --on-dark:#F5F1E8;
  --on-dark-2:rgba(245,241,232,.72);
  --on-dark-3:rgba(245,241,232,.48);
  /* Linien */
  --line:rgba(31,74,44,.12);
  --line-2:rgba(31,74,44,.07);
  --line-dark:rgba(245,241,232,.14);

  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(31,74,44,.04),0 8px 24px -12px rgba(31,74,44,.16);
  --shadow-lg:0 2px 4px rgba(31,74,44,.05),0 24px 60px -28px rgba(31,74,44,.3);
  --nav-h:86px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;background:var(--creme);color:var(--ink);
  font-family:var(--font);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.6vw,3.9rem);letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.4vw,2.85rem)}
h3{font-size:1.2rem;letter-spacing:-.015em;line-height:1.25}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gruen);color:var(--on-dark)}

.container{width:min(100% - 2.5rem,1360px);margin-inline:auto}
.narrow{width:min(100% - 2.5rem,860px);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--gruen);color:#fff;padding:.8rem 1.2rem;border-radius:var(--r-sm)}

/* ---------------- Bausteine ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem 1rem .42rem .62rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--creme-2);
  font-size:.8rem;font-weight:600;color:var(--ink);letter-spacing:.01em;
}
.pill svg{width:16px;height:16px;flex:none}
/* Praxiszeichen im Pill, ohne eigene Flaeche */
.pill-mark{
  width:20px;height:20px;flex:none;display:grid;place-content:center;
  background:none;border-radius:0;color:var(--gruen);
}
.pill-mark svg{display:none}
.pill-mark::before{
  content:"";width:20px;height:20px;display:block;background-color:currentColor;
  position:relative;top:.5px;
  -webkit-mask:url("logo-mask.png") center/contain no-repeat;
          mask:url("logo-mask.png") center/contain no-repeat;
}
@supports not ((-webkit-mask: url("")) or (mask: url(""))){
  .pill-mark svg{display:block;width:15px;height:15px}
  .pill-mark::before{display:none}
}
/* Auf dunklem Grund steht das Zeichen in Creme */
.dark .pill-mark,.held .pill-mark,.final .pill-mark,
.band-forest .pill-mark,.modal-seite-in .pill-mark{background:none;color:var(--on-dark)}
.on-dark .pill,.dark .pill{background:rgba(245,241,232,.07);border-color:var(--line-dark);color:var(--on-dark)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--font);font-size:.98rem;font-weight:700;letter-spacing:-.005em;cursor:pointer;
  background:linear-gradient(160deg,var(--gruen-2),var(--gruen));color:var(--on-dark);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 24px -14px rgba(22,53,31,.9);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 16px 30px -16px rgba(22,53,31,.95)}
.btn svg{width:17px;height:17px}
.btn-gold{background:linear-gradient(160deg,#D8B871,var(--gold-2));color:#241A06}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--gruen);box-shadow:none}
.btn-ghost:hover{background:var(--creme-2);border-color:rgba(31,74,44,.28)}
/* Zweitbutton auf dunklem Grund: heller Rahmen statt grüner Schrift */
.dark .btn-ghost,.hero .btn-ghost,.final .btn-ghost,.held .btn-ghost{
  background:rgba(245,241,232,.08);border-color:rgba(245,241,232,.42);color:var(--on-dark);
  backdrop-filter:blur(2px);
}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.final .btn-ghost:hover,.held .btn-ghost:hover{
  background:var(--creme);border-color:var(--creme);color:var(--gruen);
}
.btn-note{font-size:.85rem;color:var(--ink-3);margin-top:.7rem}
.dark .btn-note{color:var(--on-dark-3)}

.tile{
  width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-content:center;
  background:linear-gradient(150deg,rgba(42,96,57,.14),rgba(31,74,44,.06));
  border:1px solid var(--line);color:var(--gruen);
}
.tile svg{width:22px;height:22px}
.dark .tile{background:linear-gradient(150deg,rgba(200,164,93,.24),rgba(200,164,93,.06));border-color:rgba(200,164,93,.3);color:var(--gold)}

.card{
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.9rem;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(31,74,44,.2)}
.dark .card{
  background:linear-gradient(165deg,rgba(245,241,232,.09),rgba(245,241,232,.03));
  border-color:var(--line-dark);box-shadow:none;
}
.dark .card:hover{border-color:rgba(200,164,93,.4)}

.eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tief)}
.dark .eyebrow{color:var(--gold)}

.section{padding:clamp(4rem,8vw,7rem) 0}
.section-head{max-width:44rem;margin-inline:auto;text-align:center;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-head .pill{margin-bottom:1.3rem}
.section-head p{margin-top:1.1rem;color:var(--ink-2);font-size:1.1rem}
.dark .section-head p{color:var(--on-dark-2)}
.dark{background:var(--gruen-tief);color:var(--on-dark-2)}
.dark h2,.dark h3,.dark h4{color:var(--on-dark)}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid-3,.grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}}

/* ---------------- Navigation ---------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;transform:translateZ(0);will-change:background-color;
  background:rgba(22,53,31,0);transition:background .3s ease,border-color .3s ease,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(247,243,234,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:1.4rem;width:min(100% - 2.5rem,1360px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.8rem;flex:none}
.brand-mark{
  width:54px;height:54px;flex:none;background-color:var(--on-dark);
  -webkit-mask:url("logo-mask.png") center/contain no-repeat;mask:url("logo-mask.png") center/contain no-repeat;
}
.brand-text{display:block;line-height:1.15;white-space:nowrap}
.brand b{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--on-dark);display:block;line-height:1.1}
.brand-name{
  display:block;margin-top:.12rem;font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);
}
.brand-zusatz{display:block;margin-top:.08rem;font-size:.71rem;font-weight:500;color:var(--on-dark-3)}
@media (max-width:520px){
  .brand-mark{width:44px;height:44px}
  .brand b{font-size:1.02rem}
  .brand-zusatz{display:none}
}
.nav.is-stuck .brand-mark{background-color:var(--gruen)}
.nav.is-stuck .brand b{color:var(--gruen)}
.nav.is-stuck .brand-name{color:var(--gold-tief)}
.nav.is-stuck .brand-zusatz{color:var(--ink-3)}
.nav-links{display:flex;align-items:center;justify-content:space-evenly;flex:1;gap:.4rem;font-size:.92rem;font-weight:500;color:var(--on-dark-2);white-space:nowrap}
.nav-item{position:relative}
.nav-item > a{display:inline-flex;align-items:center;gap:.35rem}
.nav-item > a::after{
  content:"";width:7px;height:7px;flex:none;margin-top:-2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.6;transition:transform .2s ease;
}
.nav-menu{
  position:absolute;top:100%;left:-1rem;min-width:17rem;padding:.45rem;margin-top:.55rem;
  background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);display:grid;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;
}
.nav-menu a{
  display:block;padding:.6rem .85rem;border-radius:var(--r-sm);
  font-size:.92rem;color:var(--ink-2);white-space:nowrap;
}
.nav-menu a:hover{background:var(--creme-3);color:var(--gruen)}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-item:hover > a::after{transform:rotate(225deg)}
.nav-links a:hover{color:var(--on-dark)}
.nav.is-stuck .nav-links{color:var(--ink-2)}
.nav.is-stuck .nav-links a:hover{color:var(--gruen)}
/* Untermenue immer auf heller Flaeche lesbar, unabhaengig vom Zustand der Leiste */
.nav .nav-menu a,.nav.is-stuck .nav-menu a{color:var(--ink-2);background:transparent}
.nav .nav-menu a:hover,.nav.is-stuck .nav-menu a:hover{background:var(--creme-3);color:var(--gruen)}

.nav .btn{
  padding:.72rem 1.35rem;font-size:.9rem;
  background:var(--creme);color:var(--gruen);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 20px -12px rgba(0,0,0,.5);
}
.nav .btn:hover{background:#fff;color:var(--gruen-tief)}
.nav.is-stuck .btn{background:linear-gradient(160deg,var(--gruen-2),var(--gruen));color:var(--on-dark)}
.nav.is-stuck .btn:hover{background:linear-gradient(160deg,#33734A,var(--gruen-2));color:var(--on-dark)}
/* Burgerknopf */
.nav-toggle{
  display:none;width:44px;height:44px;margin-left:auto;flex:none;
  background:transparent;border:0;padding:0;cursor:pointer;
  place-content:center;color:var(--on-dark);
  /* liegt über der Schublade, damit das Kreuz sichtbar und antippbar bleibt */
  position:relative;z-index:130;
}
.nav.is-stuck .nav-toggle{color:var(--gruen)}
.burger{display:block;width:22px;height:16px;position:relative}
.burger span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s ease,opacity .2s ease,top .28s ease;
}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:7px}
.burger span:nth-child(3){top:14px}
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1){top:7px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3){top:7px;transform:rotate(-45deg)}

.nav-cta-mobil,.nav-direkt{display:none}
.nav-hg{display:none}

@media (max-width:1360px){
  .nav-links{gap:1.5rem;font-size:.89rem}
  .nav-in{gap:1.1rem}
}
@media (max-width:1240px){
  .nav-links{gap:1.15rem;font-size:.86rem}
  .brand-zusatz{display:none}
  .brand-mark{width:48px;height:48px}
}

@media (max-width:1120px){
  /* Kein eigener Zeichenkontext, sonst richtet sich die Schublade an der Leiste aus */
  .nav{transform:none;will-change:auto}
  /* Der Knopf bleibt über der Schublade sichtbar und wird dort zum Kreuz */

  .nav:has(.nav-links.is-open) .nav-toggle,.nav.menue-auf .nav-toggle{color:var(--gruen)}
  .nav:has(.nav-links.is-open) .brand-mark,.nav.menue-auf .brand-mark{background-color:var(--gruen)}
  .nav:has(.nav-links.is-open) .brand b,.nav.menue-auf .brand b{color:var(--gruen)}
  .nav:has(.nav-links.is-open) .brand-name,.nav.menue-auf .brand-name{color:var(--gold-tief)}
  .nav:has(.nav-links.is-open) .brand-zusatz,.nav.menue-auf .brand-zusatz{color:var(--ink-3)}
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .nav > .nav-in > .btn{white-space:nowrap;flex:none;display:none}

  /* Verdunkelte Flaeche hinter dem Menue */
  .nav-hg{
    display:block;position:fixed;inset:0;z-index:95;
    background:rgba(16,38,23,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;transition:opacity .25s ease;
  }
  .nav-hg[hidden]{display:none}
  .nav-hg.is-auf{opacity:1}

  /* Menue als Schublade von rechts */
  .nav-links{
    display:flex;position:fixed;top:0;right:0;bottom:0;height:100svh;z-index:110;
    width:min(88vw,23rem);flex-direction:column;align-items:stretch;gap:0;
    background:var(--creme);border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -30px rgba(16,38,23,.7);
    padding:calc(var(--nav-h) + .8rem) 1.1rem 1.6rem;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);transition:transform .3s ease;
    color:var(--ink-2);
  }
  .nav-links.is-open{transform:none}

  .nav-links a{padding:.85rem .9rem;border-radius:var(--r-sm);font-size:1rem}
  .nav-links a:hover{background:var(--creme-3);color:var(--gruen)}
  .nav.is-stuck .nav-links{color:var(--ink-2)}

  .nav-links .nav-item{display:block;border-bottom:1px solid var(--line-2)}
  .nav-links .nav-item > a{
    display:flex;justify-content:space-between;align-items:center;
    font-weight:700;color:var(--gruen);
  }
  .nav-links .nav-item > a::after{display:inline-block;opacity:.5;margin:0}
  .nav-links .nav-item.is-offen > a::after{transform:rotate(225deg)}
  .nav-links .nav-menu{
    position:static;opacity:1;visibility:visible;transform:none;margin:0;
    background:transparent;border:0;box-shadow:none;padding:0 0 .5rem .7rem;min-width:0;display:none;
  }
  .nav-links .nav-item.is-offen .nav-menu{display:grid}
  .nav-links .nav-menu a{padding:.6rem .9rem;font-size:.94rem}
  .nav-links > a{border-bottom:1px solid var(--line-2)}

  /* Handlungsaufforderung und Direktwege am Ende der Schublade */
  .nav-cta-mobil{
    display:inline-flex;margin-top:1.4rem;justify-content:center;
    background:linear-gradient(160deg,var(--gruen-2),var(--gruen));color:var(--on-dark);
  }
  .nav-cta-mobil:hover{background:linear-gradient(160deg,#33734A,var(--gruen-2));color:var(--on-dark)}
  .nav-direkt{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}
  .nav-direkt a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    border:1px solid var(--line);border-radius:var(--r-pill);
    padding:.75rem .6rem;font-size:.9rem;font-weight:700;color:var(--gruen);background:var(--creme-2);
  }
  .nav-direkt svg{width:17px;height:17px}
}

/* ---------------- Auftakt ---------------- */
.hero{position:relative;background:var(--gruen-tief);color:var(--on-dark-2);overflow:hidden}
.hero-bg{position:absolute;inset:0;transform:translateZ(0)}
/* Rechtsbuendig, damit das Portrait in jeder Breite ganz im Bild bleibt */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
/* Links deckendes Gruen, in der Mitte weicher Uebergang, rechts freies Bild */
.hero::after{
  content:"";position:absolute;inset:0;
  /* Kraeftig, weil das Motiv hell ist */
  /* Unter 90 Grad: Gruen reicht unten weiter nach rechts, oben bleibt Laub frei */
  background:
    linear-gradient(84deg,
      rgba(22,53,31,.97) 0%,
      rgba(22,53,31,.94) 40%,
      rgba(22,53,31,.84) 56%,
      rgba(22,53,31,.56) 68%,
      rgba(22,53,31,.22) 80%,
      rgba(22,53,31,.06) 90%,
      rgba(22,53,31,.01) 100%),
    /* Gruen von unten bis unter das Knie, haelt das Ufer ruhig */
    linear-gradient(to top,
      rgba(22,53,31,.72) 0%,
      rgba(22,53,31,.56) 14%,
      rgba(22,53,31,.34) 28%,
      rgba(22,53,31,.15) 42%,
      rgba(22,53,31,0) 58%);
}
/* Gruen als geschlossenes Feld unter der Textspalte */
@media (min-width:761px) and (max-width:900px){
  .hero-copy{max-width:min(32rem,56%)}
  .hero-lead{max-width:none}
  .hero::after{
    background:
      linear-gradient(90deg,
        rgba(22,53,31,.96) 0%,
        rgba(22,53,31,.94) 46%,
        rgba(22,53,31,.86) 58%,
        rgba(22,53,31,.55) 70%,
        rgba(22,53,31,.22) 82%,
        rgba(22,53,31,.06) 92%,
        rgba(22,53,31,.02) 100%);
  }
}
/* Telefon: Foto als eigenes Band, nicht hinter dem Text */
@media (max-width:760px){
  .hero{display:flex;flex-direction:column}
  .hero::after{display:none}
  /* Erst das Foto, dann der Text. So ist Monique beim Aufruf sofort zu sehen. */
  /* Portrait oben, laeuft ins Gruen aus, Text beginnt im Auslauf */
  .hero-bg{
    order:1;position:relative;inset:auto;transform:none;
    width:100%;height:min(70svh,34rem);overflow:hidden;
  }
  .hero-bg img{object-position:62% 18%}
  .hero-bg::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(22,53,31,.72) 0%,rgba(22,53,31,.22) 14%,rgba(22,53,31,0) 28%,
      rgba(22,53,31,0) 48%,rgba(22,53,31,.55) 68%,rgba(22,53,31,.92) 84%,rgba(22,53,31,1) 100%);
  }
  .hero-in{order:2;position:relative;z-index:1;margin-top:-9rem;padding-top:0;padding-bottom:2.8rem}
}
.hero-in{position:relative;z-index:2;padding:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem)) 0 clamp(3rem,6vw,5rem)}
.hero-copy{max-width:min(50rem,62%)}
.hero h1{color:var(--on-dark);margin:1.5rem 0 0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-lead{margin:1.4rem 0 2.2rem;font-size:1.16rem;color:var(--on-dark-2);max-width:38em}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:.55rem 2rem;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid var(--line-dark);font-size:.92rem;color:var(--on-dark-2)}
.hero-meta span{display:flex;align-items:center;gap:.5rem}
.hero-meta svg{width:16px;height:16px;color:var(--gold);flex:none}

/* Vertrauensleiste */
.trust{background:var(--gruen-tief);padding:0 0 clamp(2.5rem,5vw,3.5rem)}
.trust-box{
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(245,241,232,.08),rgba(245,241,232,.02));
  padding:1.5rem 1.8rem;display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2.2rem;align-items:center;
}
.trust-box > b{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.trust-list{display:flex;flex-wrap:wrap;gap:.7rem 2rem;color:var(--on-dark-2);font-size:.95rem}
.trust-list span{display:flex;align-items:center;gap:.55rem}
.trust-list svg{width:16px;height:16px;color:var(--gold);flex:none}
@media (max-width:760px){.trust-box{grid-template-columns:1fr;gap:.9rem}}

/* ---------------- Situationskarten ---------------- */
.sit{
  position:relative;display:block;overflow:hidden;
  background:var(--creme-2);border-radius:14px;border:1px solid var(--line);
  padding:1.7rem 1.9rem 1.9rem;box-shadow:none;
}
.sit::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(to bottom,var(--gold),rgba(200,164,93,0));
  opacity:0;transition:opacity .25s ease;
}
.sit:hover{transform:none;box-shadow:0 18px 40px -26px rgba(31,74,44,.4);border-color:rgba(31,74,44,.26)}
.sit:hover::before{opacity:1}
.sit .num{
  position:absolute;top:1.6rem;right:1.5rem;
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:rgba(31,74,44,.16);pointer-events:none;transition:color .25s ease;
}
.sit:hover .num{color:rgba(168,130,59,.55)}
.sit h3{
  margin-bottom:.8rem;max-width:16ch;padding-right:2.5rem;
  min-height:3.75em;display:flex;align-items:flex-start;
}
.sit p{margin-top:0}
#anliegen .grid-3{grid-auto-rows:1fr}
@media (max-width:680px){.sit h3{min-height:0}}
.sit p{color:var(--ink-2);font-size:.99rem;max-width:34ch}
.sit > div{position:relative;z-index:2}

/* ---------------- Angebot: zwei Bereiche ---------------- */
.bereiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.2rem)}
@media (max-width:900px){.bereiche{grid-template-columns:minmax(0,1fr);gap:2.5rem}}

.bereich-kopf{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  margin-bottom:1.4rem;background:var(--gruen-tief);
}
.bereich-kopf picture,.bereich-kopf img{display:block;width:100%;height:100%;object-fit:cover}
.bereich-kopf img{aspect-ratio:16/8;transition:transform .5s ease}
.bereich-kopf::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,38,23,.92) 0%,rgba(16,38,23,.6) 42%,rgba(16,38,23,.12) 100%);
}
.bereich-kopf:hover img{transform:scale(1.03)}
.bereich-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.5rem 1.6rem}
.bereich-in b{
  display:block;font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:700;
  letter-spacing:-.025em;color:var(--on-dark);line-height:1.15;
}
.bereich-in > span{display:block;margin-top:.3rem;font-size:.92rem;color:var(--on-dark-2)}

.leist{display:grid;gap:.6rem}
.leist-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;
  background:var(--creme-2);border:1px solid var(--line);border-radius:14px;
  padding:1.05rem 1.2rem;color:inherit;
  transition:border-color .2s ease,background .2s ease;
}
.leist-item:hover{border-color:rgba(31,74,44,.28);background:#fff}
.leist-icon{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-content:center;
  background:linear-gradient(150deg,rgba(42,96,57,.13),rgba(31,74,44,.05));
  border:1px solid var(--line);color:var(--gruen);
}
.leist-icon svg{width:18px;height:18px}
.leist-item:hover .leist-icon{background:linear-gradient(150deg,var(--gruen-2),var(--gruen));border-color:transparent;color:var(--gold)}
.leist-text b{display:block;font-size:1.02rem;font-weight:700;line-height:1.25}
.leist-text > span{display:block;margin-top:.2rem;font-size:.93rem;color:var(--ink-2)}
.leist-item > svg{width:17px;height:17px;color:var(--line-2);flex:none;transition:color .2s ease,transform .2s ease}
.leist-item:hover > svg{color:var(--gold-2);transform:translateX(3px)}
@media (max-width:520px){
  .leist-item{grid-template-columns:auto minmax(0,1fr);gap:.85rem;padding:.95rem 1rem}
  .leist-item > svg{display:none}
}
.bereich-mehr{margin-top:1.2rem}
/* Beide Bereichsspalten enden auf derselben Linie */
@media (min-width:901px){
  .bereich{display:flex;flex-direction:column}
  .bereich .leist{flex:1;align-content:start}
  .bereich-mehr{margin-top:1.4rem}
}

/* ---------------- Fahrplan als Kacheln ---------------- */
.plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;align-items:stretch}
.step{
  display:flex;flex-direction:column;height:100%;
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.8rem 1.7rem 1.5rem;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(31,74,44,.2)}
.step-num{
  width:44px;height:44px;border-radius:14px;display:grid;place-content:center;
  background:linear-gradient(150deg,var(--gruen-2),var(--gruen));color:var(--gold);
  font-size:1rem;font-weight:800;margin-bottom:1.2rem;flex:none;
}
.step h3{margin-bottom:.5rem;min-height:2.5em;display:flex;align-items:flex-end}
.step p{color:var(--ink-2);font-size:.97rem}
.step-meta{
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line-2);
  font-size:.85rem;font-weight:700;color:var(--gold-tief);
}
.step-meta svg{width:15px;height:15px;flex:none}
@media (max-width:1100px){.plan{grid-template-columns:repeat(2,minmax(0,1fr))}.step h3{min-height:0}}
@media (max-width:600px){.plan{grid-template-columns:1fr}}

/* ---------------- Wechselblock ---------------- */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
#haltung .split{align-items:center}
.split-media{display:grid;gap:1rem}
.split-media img{width:100%;object-fit:cover;border-radius:var(--r-lg)}
.split-media .tall{aspect-ratio:4/5}
.split-media .wide{aspect-ratio:16/11}
.feature{display:flex;gap:1.1rem;align-items:flex-start;padding:1.5rem 0;border-bottom:1px solid var(--line-2)}
.feature:first-of-type{padding-top:0}
.feature:last-of-type{border-bottom:0}
.feature h3{margin:0 0 .4rem;min-height:48px;display:flex;align-items:center}
.feature p{margin:0}
.feature > div{flex:1;min-width:0}
@media (max-width:520px){
  .feature h3{min-height:0;align-items:flex-start}
}
.feature p{color:var(--ink-2);font-size:.99rem}
.dark .feature{border-color:var(--line-dark)}
.dark .feature p{color:var(--on-dark-2)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split-media{grid-template-columns:1fr 1fr;display:grid}}

/* Bildstapel mit Überlappung */
.stapel{position:relative;padding-bottom:4.5rem;padding-right:3rem}
.stapel figure{margin:0}
.stapel-gross img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--r-lg)}
.stapel-klein{
  position:absolute;right:0;bottom:0;width:52%;
  border-radius:var(--r-lg);overflow:hidden;
  border:8px solid var(--gruen-tief);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75);
}
.stapel-klein img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media (max-width:900px){
  .stapel{padding-bottom:3.5rem;padding-right:2rem;max-width:32rem}
  .stapel-klein{width:56%}
}

/* ---------------- Über mich ---------------- */
.bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.bio-media{position:relative}
.bio-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.bio-badge{
  position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;
  background:rgba(255,253,248,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem;
}
.bio-badge b{display:block;font-size:1rem;font-weight:700}
.bio-badge span{font-size:.86rem;color:var(--ink-2)}
.bio p + p{margin-top:1rem}
.bio .lead{font-size:1.14rem;color:var(--ink)}
.qual{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.6rem}
.qual li{display:flex;gap:.7rem;align-items:flex-start;font-size:.99rem;color:var(--ink-2)}
.qual svg{width:18px;height:18px;color:var(--gold-2);flex:none;margin-top:.28rem}
@media (max-width:900px){.bio{grid-template-columns:1fr}}

/* ---------------- Zitat ---------------- */
.zitat{text-align:center}
.zitat p{
  font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.24;
  color:var(--on-dark);max-width:22ch;margin:1.6rem auto 0;
}
.zitat .eyebrow{margin-top:1.8rem}

/* ---------------- Stimmen ---------------- */
.stimme{display:flex;flex-direction:column;gap:1rem}
.sterne{display:flex;gap:.2rem;color:var(--gold-2)}
.sterne svg{width:16px;height:16px}
.stimme q{font-size:1.02rem;color:var(--ink-2);quotes:"\201C" "\201D";font-style:normal}
.stimme footer{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:.4rem}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--creme-3);border:1px solid var(--line);
  display:grid;place-content:center;font-size:.85rem;font-weight:700;color:var(--gold-tief);flex:none}
.stimme footer b{font-size:.95rem;font-weight:700;display:block}
.stimme footer span{font-size:.85rem;color:var(--ink-3)}
.stimme-leer{border-style:dashed;background:transparent;box-shadow:none}
.stimme-leer:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* ---------------- FAQ ---------------- */
.faq{display:grid;gap:.7rem;max-width:56rem;margin-inline:auto}
.faq details{background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r);padding:0 1.4rem}
.faq details[open]{border-color:rgba(31,74,44,.24)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 0;font-weight:700;font-size:1.03rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;background:var(--creme-3);
  background-image:linear-gradient(var(--gruen),var(--gruen)),linear-gradient(var(--gruen),var(--gruen));
  background-size:11px 1.6px,1.6px 11px;background-position:center,center;background-repeat:no-repeat;
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 1.3rem;color:var(--ink-2);font-size:.99rem;max-width:52em}
.faq + p{margin-top:1.8rem}

/* ---------------- Abschluss ---------------- */
.final{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--gruen-tief);color:var(--on-dark-2);
  box-shadow:0 30px 70px -40px rgba(22,53,31,.9);
}
.final-bg{position:absolute;inset:0;display:block;transform:translateZ(0)}
.final-bg img{width:100%;height:100%;object-fit:cover}
.final::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(150deg,rgba(22,53,31,.9) 0%,rgba(22,53,31,.82) 45%,rgba(22,53,31,.9) 100%),
    radial-gradient(70% 90% at 50% 0%,rgba(200,164,93,.22),transparent 68%);
}
.final-in{position:relative;z-index:2;padding:clamp(2.8rem,6vw,5rem) clamp(1.5rem,4vw,3rem);text-align:center}
.final h2{color:var(--on-dark);max-width:18ch;margin:1.3rem auto 0}
.final p{margin:1.1rem auto 2rem;max-width:38em;color:var(--on-dark-2)}
.final .btn-note a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:.18em}
.final .btn-note a:hover{color:var(--gold)}

/* ---------------- Fuß ---------------- */
.foot{background:var(--gruen-tief);color:var(--on-dark-3);padding:clamp(3rem,6vw,4.5rem) 0 1.8rem;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.foot h4{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.foot a{display:block;padding:.26rem 0;color:var(--on-dark-2)}
.foot a:hover{color:var(--on-dark)}
.foot p{color:var(--on-dark-2);margin-bottom:.9rem}
.foot .foot-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem;padding:0}
.foot-logo{
  display:block;width:54px;height:54px;flex:none;background-color:var(--gold);
  -webkit-mask:url("logo-mask.png") center/contain no-repeat;mask:url("logo-mask.png") center/contain no-repeat;
  transition:background-color .2s ease;
}
.foot-brand b{display:block;font-size:1.12rem;font-weight:700;color:var(--on-dark);line-height:1.15;letter-spacing:-.02em}
.foot-brand .brand-name{display:block;margin-top:.2rem;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.foot-brand .brand-zusatz{display:block;margin-top:.15rem;font-size:.82rem;color:var(--on-dark-3);font-weight:500}
.foot-brand:hover .foot-logo{background-color:var(--on-dark)}
.foot-brand:hover b{color:var(--gold)}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;
  padding-top:1.5rem;border-top:1px solid var(--line-dark);font-size:.87rem}
.foot-base .claim{color:var(--gold);font-weight:600}
/* Urhebervermerk der Agentur, bewusst leise gehalten */
/* Verbandssiegel: das Original ist schwarz, im dunklen Fuss sitzt es auf
   hellem Kreis. Die Ringschrift ist klein, deshalb steht der Verbandsname
   lesbar daneben. */
.foot a.foot-siegel{display:flex;align-items:center;gap:.9rem;width:auto;
  margin-top:1.3rem;padding:0;max-width:22rem}
.foot-siegel-bild{flex:none;display:block;width:86px;padding:.5rem;
  border-radius:50%;background:var(--creme-2);line-height:0;transition:transform .3s ease}
.foot-siegel-bild picture,.foot-siegel-bild img{display:block;width:100%;height:auto}
.foot a.foot-siegel:hover .foot-siegel-bild{transform:scale(1.04)}
.foot-siegel-text{display:block;font-size:.78rem;line-height:1.45;color:var(--on-dark-3)}
.foot-siegel-text b{display:block;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.foot a.foot-siegel:hover .foot-siegel-text{color:var(--on-dark-2)}
/* Siegel auf der Seite Ueber mich, neben den Qualifikationen */
.siegel{display:flex;align-items:center;gap:1.3rem;margin-top:2rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}
.siegel picture{display:block;width:120px;flex:none}
.siegel img{width:120px;height:auto}
.siegel p{font-size:.92rem;color:var(--ink-3);margin:0;max-width:42em}
.siegel a{color:var(--gruen);text-decoration:underline;text-underline-offset:.16em}
@media (max-width:760px){
  .siegel{flex-direction:column;text-align:center;gap:1rem}
  .siegel picture{margin-inline:auto}
  .siegel p{margin-inline:auto}
}
.foot-base{align-items:baseline}
.foot-copy,.foot-macher{white-space:nowrap}
.foot-macher{color:var(--on-dark-3);margin-right:auto}
.foot-macher a{display:inline;color:var(--on-dark-2);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--line-dark);border-bottom:0}
.foot-macher a:hover{color:var(--gold);text-decoration-color:var(--gold)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* WhatsApp */
.wa{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(160deg,var(--gruen-2),var(--gruen));color:var(--on-dark);
  border-radius:var(--r-pill);padding:.8rem 1.35rem;font-size:.9rem;font-weight:700;
  box-shadow:0 16px 34px -16px rgba(22,53,31,.85);
}
.wa svg{width:19px;height:19px}
.wa:hover{background:linear-gradient(160deg,#33734A,var(--gruen-2))}
@media (max-width:600px){.wa{right:1rem;bottom:1rem;padding:.7rem 1.1rem;font-size:.85rem}}

/* Einblenden */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation:none !important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- Bestandsseiten: alte Bausteine in der neuen Bildsprache ---------------- */

.pill-wrap{margin:0 0 1.2rem}
.section-head .pill-wrap{margin-bottom:1.3rem}

/* Seitenauftakt */
.held{
  position:relative;display:flex;align-items:flex-end;
  min-height:min(64svh,34rem);background:var(--gruen-tief);overflow:hidden;color:var(--on-dark-2);
}
.held-klein{min-height:min(60svh,32rem)}
.held > picture,.held > img{position:absolute;inset:0}
.held picture img,.held > img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* Ausschnitt hoeher, damit Gesichter bei breiten Fenstern im Bild bleiben */
.held::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 95% at 10% 45%,rgba(22,53,31,.94) 0%,rgba(22,53,31,.74) 45%,rgba(22,53,31,.38) 75%,rgba(22,53,31,.6) 100%),
    linear-gradient(to bottom,rgba(22,53,31,.86) 0%,rgba(22,53,31,.25) 34%,rgba(22,53,31,.5) 100%);
}
.held-inner{
  position:relative;z-index:2;width:min(100% - 2.5rem,1360px);margin-inline:auto;
  padding:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(2.5rem,5vw,4rem);
}
.held h1{color:var(--on-dark);max-width:19ch;margin:0}
.held h1 em{font-style:normal;color:var(--gold)}
.held-lead{margin:1.3rem 0 0;font-size:1.14rem;color:var(--on-dark-2);max-width:34em}
.held-aktionen{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:2rem}
.held .pill{background:rgba(245,241,232,.08);border-color:var(--line-dark);color:var(--on-dark)}

/* Seitenkopf ohne Bild */
.page-head{padding:calc(var(--nav-h) + 3rem) 0 clamp(1.5rem,4vw,2.5rem)}
.page-head h1{max-width:20ch;margin-bottom:1.1rem}
.page-head p{font-size:1.14rem;color:var(--ink-2);max-width:38em;margin:0}
.kopf-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.kopf-grid{grid-template-columns:1fr}}

/* Fliesstext */
.prose{padding:clamp(2.5rem,5vw,4rem) 0;font-size:1.06rem}
.prose h2{margin:3rem 0 1rem;max-width:24ch}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2.2rem 0 .6rem}
.prose p{color:var(--ink-2);max-width:44em}
.prose p + p{margin-top:1rem}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul.plain{padding-left:1.15rem;margin:1rem 0 1.8rem;max-width:44em;color:var(--ink-2)}
.prose ul.plain li{margin-bottom:.45rem}
.prose ul.plain li::marker{color:var(--gold-2)}
.prose a{color:var(--gruen);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--line)}
.prose a:hover{text-decoration-color:var(--gold-2)}

/* Raster */
.section-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.section-grid > div > h2{margin-bottom:1rem}
.section-grid h2 + p{font-size:1.12rem;color:var(--ink-2);max-width:40em}
.section-grid p + p{margin-top:.9rem;color:var(--ink-2);max-width:44em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split-versetzt{align-items:start}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.hairline{height:1px;background:var(--line-2);border:0;margin:0}
.zierlinie{display:flex;align-items:center;gap:1.2rem;margin-block:clamp(2.5rem,5vw,4rem);color:var(--line)}
.zierlinie::before,.zierlinie::after{content:"";flex:1;height:1px;background:currentColor}
.zierlinie span{width:7px;height:7px;background:var(--gold-2);transform:rotate(45deg);flex:none}

/* Merkmalsliste */
.stack{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--line-2)}
.pillar{
  display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:.35rem 2.5rem;
  padding:1.3rem 0;border-bottom:1px solid var(--line-2);align-items:baseline;
}
.pillar h3{font-size:1.08rem}
.pillar p{color:var(--ink-2);font-size:.98rem;margin:0}
@media (max-width:820px){.pillar{grid-template-columns:1fr;gap:.25rem}}
.merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:2.2rem}
.merkmale > div{
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.6rem 1.7rem;box-shadow:var(--shadow);
}
.merkmale h3{margin-bottom:.4rem}
.merkmale p{color:var(--ink-2);font-size:.97rem;margin:0}
@media (max-width:760px){.merkmale{grid-template-columns:1fr}}

/* Baender */
.band{
  background:linear-gradient(165deg,#FFFFFF,#F5EFE4);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(2rem,4.5vw,3.4rem);box-shadow:var(--shadow);
}
.band.container{width:min(100% - 2.5rem,1360px);margin-inline:auto}
.band > .container{width:100%;margin-inline:0;padding:0}
.bandrand{margin-block:clamp(2.5rem,5vw,4rem)}
.band-forest{
  background:linear-gradient(150deg,var(--gruen-2),var(--gruen-tief));border-color:transparent;
  color:var(--on-dark-2);box-shadow:0 24px 60px -34px rgba(22,53,31,.9);
}
.band-forest h2,.band-forest h3,.band-forest h4{color:var(--on-dark)}
.band-forest p{color:var(--on-dark-2)}
.band-forest .pill{background:rgba(245,241,232,.08);border-color:var(--line-dark);color:var(--on-dark)}
.band-forest .stack,.band-forest .pillar{border-color:var(--line-dark)}
.band-forest .btn-ghost{background:rgba(245,241,232,.08);border-color:rgba(245,241,232,.42);color:var(--on-dark)}
.band-forest .btn-ghost:hover{background:var(--creme);border-color:var(--creme);color:var(--gruen)}
.band-forest .link{color:var(--on-dark)}
.band-forest .legal{background:rgba(245,241,232,.06);border-color:var(--line-dark);color:var(--on-dark-2)}

/* Zitat in Baendern */
.quote{
  font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.24;
  color:var(--gruen);max-width:22ch;margin:0;
}
.band-forest .quote{color:var(--on-dark)}
.quote-source{color:var(--gold-tief)}
.quote-source{
  display:block;margin-top:1.4rem;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.band-forest .quote-source{color:var(--gold)}

/* Angebotsliste */
.index-list{display:grid;gap:.85rem}
.index-item{
  display:grid;grid-template-columns:1fr auto;gap:.35rem 1.5rem;align-items:center;color:inherit;
  background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.4rem;transition:border-color .2s ease,transform .2s ease;
}
a.index-item:hover{border-color:rgba(31,74,44,.28);transform:translateX(3px)}
.index-item h3{font-size:1.08rem;margin:0}
.index-item p{grid-column:1/-1;color:var(--ink-2);font-size:.95rem;margin:.15rem 0 0;max-width:52em}
.index-meta{
  font-size:.85rem;font-weight:700;color:var(--gold-tief);white-space:nowrap;
  background:var(--creme-3);border-radius:var(--r-pill);padding:.3rem .8rem;
}

/* Zwei Wege */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2rem}
.way{
  display:block;background:linear-gradient(165deg,#FFFFFF,#FBF7F0);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.8rem,3.5vw,2.4rem);box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.way:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(31,74,44,.2)}
.way-arc{
  width:48px;height:48px;border-radius:14px;margin-bottom:1.2rem;
  background:linear-gradient(150deg,rgba(42,96,57,.14),rgba(31,74,44,.06));border:1px solid var(--line);
}
.way h3{font-size:1.45rem;margin-bottom:.5rem}
.way > p{color:var(--ink-2);margin-bottom:1.2rem;font-size:.99rem}
.way ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.way li{
  font-size:.88rem;font-weight:600;color:var(--gold-tief);
  background:var(--creme-3);border-radius:var(--r-pill);padding:.35rem .85rem;
}
@media (max-width:860px){.ways{grid-template-columns:1fr}}

/* Preiskacheln */
.kachel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:1.1rem;margin:1.8rem 0 2.6rem}
.kachel{
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.8rem 1.7rem;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
}
.kachel:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.kachel .k-label{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-tief);margin:0 0 1rem;
}
.kachel h4{font-size:1.3rem;font-weight:700;margin:0 0 .25rem}
.kachel .k-dauer{font-size:.92rem;color:var(--ink-3);margin:0 0 1.4rem}
.kachel .k-preis{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;color:var(--gruen);margin:auto 0 .25rem;line-height:1}
.kachel .k-preis small{font-size:1rem;font-weight:700;color:var(--ink-3)}
.kachel .k-rahmen{font-size:1.25rem;font-weight:700;color:var(--gruen);margin:auto 0 .5rem}
.kachel .k-statt{font-size:.9rem;color:var(--ink-3);margin:0 0 1rem}
.kachel .k-text{font-size:.96rem;color:var(--ink-2);margin:0}
.kachel .k-liste{list-style:none;margin:0 0 1.3rem;padding:0;border-top:1px solid var(--line-2)}
.kachel .k-liste li{font-size:.96rem;color:var(--ink-2);padding:.45rem 0;border-bottom:1px solid var(--line-2)}
.kachel-akzent{background:linear-gradient(150deg,var(--gruen-2),var(--gruen-tief));border-color:transparent}
.kachel-akzent h4,.kachel-akzent .k-preis,.kachel-akzent .k-rahmen{color:var(--on-dark)}
.kachel-akzent .k-label{color:var(--gold)}
.kachel-akzent .k-dauer,.kachel-akzent .k-statt,.kachel-akzent .k-preis small{color:var(--on-dark-3)}
.kachel-akzent .k-text{color:var(--on-dark-2)}
.kachel-akzent .k-liste,.kachel-akzent .k-liste li{border-color:var(--line-dark);color:var(--on-dark-2)}
.kachel-breit{grid-column:1/-1}
.kachel-breit .k-preis{margin-top:0}
@media (min-width:60rem){
  .kachel-breit{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:start}
  .kachel-breit .k-label,.kachel-breit h4,.kachel-breit .k-dauer{grid-column:1}
  .kachel-breit .k-liste{grid-column:1;margin-bottom:0}
  .kachel-breit .k-preis{grid-column:2;grid-row:1/3}
  .kachel-breit .k-statt{grid-column:2;grid-row:3;margin-top:-.4rem}
  .kachel-breit .k-text{grid-column:2;grid-row:4}
}

/* Hinweise */
.note{font-size:.97rem;color:var(--ink-3);max-width:44em}
.legal{
  font-size:.93rem;color:var(--ink-2);background:var(--creme-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem 1.5rem;margin-top:2.2rem;max-width:52em;
}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0 0 2.2rem;list-style:none}
.tags li{
  font-size:.88rem;font-weight:600;color:var(--gold-tief);
  background:var(--creme-3);border-radius:var(--r-pill);padding:.35rem .9rem;
}

/* Formulare */
.form{
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,2.6rem);margin:2.2rem 0;max-width:56rem;box-shadow:var(--shadow);
}
/* Anfrageblock mittig, mit Abstand zur Preistabelle */
.anfrage-block{margin-top:clamp(3.5rem,7vw,6rem);text-align:center}
.anfrage-block > h2{margin-inline:auto;max-width:24ch}
.anfrage-block > p{margin-inline:auto;max-width:46em}
.anfrage-block .form{margin-inline:auto;text-align:left}
/* Der Hinweis unter dem Knopf braucht Abstand zur Kante der Karte */
.form > .btn + .note{margin-top:1.3rem}
.form{padding-bottom:clamp(2.2rem,5vw,3.2rem)}
.form fieldset{border:0;padding:0;margin:0 0 2.2rem}
.form legend{font-size:1.25rem;font-weight:700;padding:0;margin-bottom:1.2rem;width:100%}
.field{margin-bottom:1.2rem}
.field > label{display:block;font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:.45rem}
.hint{display:block;font-weight:400;color:var(--ink-3);font-size:.9rem;margin-top:.35rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font);font-size:1rem;color:var(--ink);
  background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem 1rem;transition:border-color .2s ease,box-shadow .2s ease;
}
/* Auswahlfeld ohne Systemoptik, mit eigenem Pfeil */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.8rem;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--gruen) 50%),
    linear-gradient(135deg,var(--gruen) 50%,transparent 50%);
  background-position:calc(100% - 1.25rem) calc(50% + 2px),calc(100% - 1rem) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.field select:hover{border-color:rgba(31,74,44,.3)}
.field select:focus{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),
    linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);
}
.field select::-ms-expand{display:none}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gruen);box-shadow:0 0 0 3px rgba(31,74,44,.1);outline:none;
}
.field textarea{min-height:9rem;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.4rem 1.5rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;color:var(--ink)}
.check input{width:auto;margin-top:.4rem;flex:none;accent-color:var(--gruen)}
.req{color:var(--gold-2)}

/* Rueckrufstrecke */
.booking{max-width:56rem}
.fortschritt{display:flex;gap:.35rem;margin-bottom:2rem}
.fortschritt-teil{flex:1;height:4px;border-radius:var(--r-pill);background:var(--creme-3);transition:background .3s}
.fortschritt-teil.is-an{background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.schritt{margin-bottom:2.2rem}
.schritt h2{margin-bottom:.7rem;max-width:22ch}
.schritt h3.schritt-unter{margin:2.2rem 0 1rem;font-size:1.2rem}
.schritt-text{color:var(--ink-2);max-width:44em;margin-bottom:1.6rem}
.schritt-hinweis{
  background:var(--creme-2);border:1px solid var(--line);border-left:3px solid var(--gold-2);
  border-radius:var(--r-sm);padding:1rem 1.3rem;margin:0 0 1.8rem;max-width:44em;
  font-size:.96rem;color:var(--ink-2);
}
.opt-grid{display:grid;gap:.7rem}
.opt{
  display:flex;gap:1rem;align-items:flex-start;background:var(--creme-2);
  border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.opt:hover{border-color:rgba(31,74,44,.28)}
.opt input{margin:.35rem 0 0;flex:none;accent-color:var(--gruen);width:auto}
.opt:has(input:checked){border-color:var(--gruen);box-shadow:0 0 0 3px rgba(31,74,44,.1)}
.opt-body{display:block}
.opt-titel{display:block;font-size:1.08rem;font-weight:700;color:var(--ink)}
.opt-text{display:block;font-size:.96rem;color:var(--ink-2);margin-top:.25rem;max-width:46em}
.opt-meta{display:block;font-size:.85rem;font-weight:700;color:var(--gold-tief);margin-top:.5rem}
.chip-grid{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 2rem}
.chip{
  position:relative;display:block;cursor:pointer;background:var(--creme-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.7rem 1.3rem;transition:all .2s ease;
}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:hover{border-color:rgba(31,74,44,.28)}
.chip:has(input:checked){background:linear-gradient(160deg,var(--gruen-2),var(--gruen));border-color:transparent}
.chip:has(input:checked) .chip-titel{color:var(--on-dark)}
.chip:has(input:checked) .chip-text{color:var(--on-dark-3)}
.chip-body{display:block;text-align:center}
.chip-titel{display:block;font-size:.96rem;font-weight:700;color:var(--ink);line-height:1.2}
.chip-text{display:block;font-size:.84rem;color:var(--ink-3);margin-top:.1rem}
.summary{background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.7rem;margin:0 0 2rem}
.summary-list{display:grid;grid-template-columns:9rem 1fr;gap:.5rem 1.4rem;margin:0}
.summary-list dt{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem}
.summary-list dd{margin:0;color:var(--ink)}
@media (max-width:560px){.summary-list{grid-template-columns:1fr;gap:.1rem}.summary-list dd{margin-bottom:.8rem}}
.schritt-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.4rem;border-top:1px solid var(--line-2)}
.schritt-nav .btn:disabled{opacity:.35;cursor:default;transform:none}
.schritt-nav .link{background:none;border:0;cursor:pointer;font-family:var(--font)}
.schritt-nav .btn{margin-left:auto}

/* Bilder */
.media{margin:0}
.media img,.media picture img{width:100%;display:block;border-radius:var(--r-lg);background:var(--creme-3)}
.media picture{display:block}
.media-wide img{aspect-ratio:16/10;object-fit:cover}
.media-arch img,.media-arch picture img{aspect-ratio:4/5;object-fit:cover}
.media figcaption{font-size:.82rem;font-weight:600;color:var(--ink-3);margin-top:.8rem}
.media-inset{margin:clamp(2.2rem,5vw,3.5rem) 0}
.banner{margin:0}
.banner img,.banner picture img{width:100%;display:block;border-radius:var(--r-lg);object-fit:cover}
.banner-tall img,.banner-tall picture img{aspect-ratio:21/9}
@media (max-width:820px){.banner-tall img,.banner-tall picture img{aspect-ratio:4/3}}
.bleed{margin-inline:0;width:auto;max-width:none}
.portrait-slot{
  aspect-ratio:4/5;background:var(--creme-3);border-radius:var(--r-lg);display:grid;place-content:center;
  text-align:center;color:var(--ink-3);padding:2rem;font-size:.95rem;
}
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1.2rem}
.galerie-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.galerie,.galerie-zwei{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.galerie,.galerie-zwei{grid-template-columns:1fr}}
.platzhalter{
  background:var(--creme-3);border:1px dashed rgba(31,74,44,.28);border-radius:var(--r-lg);
  display:grid;place-content:center;gap:.4rem;text-align:center;padding:1.5rem;
}
.platzhalter b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tief)}
.platzhalter span{display:block;font-size:.93rem;color:var(--ink-2);max-width:24ch;margin-inline:auto}
.platzhalter-hoch{aspect-ratio:4/5}
.platzhalter-quer{aspect-ratio:4/3}
.platzhalter-breit{aspect-ratio:16/7}
@media (max-width:520px){.platzhalter-breit{aspect-ratio:4/3}}

/* Textlink mit Pfeil */
.link{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.96rem;font-weight:700;color:var(--gruen);
  transition:gap .2s ease,color .2s ease;
}
.link svg{width:17px;height:17px;color:var(--gold-2)}
.link:hover{gap:.85rem;color:var(--gold-tief)}
.link::after{content:none}

/* Abschluss auf Unterseiten */
.cta{padding:clamp(3rem,6vw,5rem) 0}
.cta h2{max-width:20ch}
.cta p{color:var(--ink-2);max-width:44em;margin-top:1rem;font-size:1.08rem}
.cta-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem;align-items:center}

/* ---------------- Rückruf als Überlagerung ---------------- */
body.modal-offen{overflow:hidden}
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.modal[hidden]{display:none}
.modal-hg{
  position:absolute;inset:0;background:rgba(16,38,23,.72);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s ease;
}
.modal.is-auf .modal-hg{opacity:1}
.modal-box{
  position:relative;z-index:2;display:grid;grid-template-columns:22rem minmax(0,1fr);
  width:min(100%,58rem);height:min(46rem,calc(100svh - 3rem));overflow:hidden;
  background:var(--creme-2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(16,38,23,.7);
  opacity:0;transform:translateY(14px) scale(.99);transition:opacity .22s ease,transform .22s ease;
}
.modal.is-auf .modal-box{opacity:1;transform:none}
.modal-zu{
  position:absolute;top:.9rem;right:.9rem;z-index:5;width:38px;height:38px;border-radius:50%;
  display:grid;place-content:center;cursor:pointer;
  background:var(--creme-2);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:var(--shadow);transition:background .2s ease,color .2s ease;
}
.modal-zu svg{width:18px;height:18px}
.modal-zu:hover{background:var(--gruen);border-color:var(--gruen);color:var(--on-dark)}

.modal-seite{position:relative;background:var(--gruen-tief);overflow:hidden;min-height:0}
/* Oberhalb der Mitte, damit im flachen Band das Gesicht steht */
.modal-seite picture,.modal-seite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;object-position:50% 32%}
.modal-seite::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,38,23,.94) 0%,rgba(16,38,23,.55) 45%,rgba(16,38,23,.1) 100%);
}
.modal-seite-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.6rem 1.5rem;color:var(--on-dark-2)}
.modal-seite-in .pill{background:rgba(245,241,232,.1);border-color:var(--line-dark);color:var(--on-dark);margin-bottom:1rem}
.modal-seite-in b{display:block;font-size:1.15rem;font-weight:700;color:var(--on-dark);margin-bottom:.3rem}
.modal-seite-in > span:not(.pill){display:block;font-size:.92rem;line-height:1.5}
.modal-seite-in .pill{display:inline-flex;width:auto;font-size:.78rem;line-height:1.2}
.modal-seite-in .pill-mark{display:grid;width:20px;height:20px;font-size:0}

.modal-inhalt{
  padding:2.2rem 2.2rem 2rem;
  min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(31,74,44,.28) transparent;
}
.modal-inhalt::-webkit-scrollbar{width:10px}
.modal-inhalt::-webkit-scrollbar-thumb{background:rgba(31,74,44,.22);border-radius:99px;border:3px solid var(--creme-2)}
.modal-inhalt::-webkit-scrollbar-track{background:transparent}
.modal-kopf{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.modal-lead{margin:.5rem 0 1.6rem;color:var(--ink-2);font-size:1rem;max-width:38em}
.modal-inhalt .booking{max-width:none}
.modal-inhalt .schritt h2{font-size:1.3rem}
.modal-inhalt .legal{margin-top:1.6rem;font-size:.86rem}

@media (max-width:860px){
  .modal{padding:0}
  /* Bandhoehe waechst mit, sonst zoomt das Bild auf breiten Telefonen zu stark */
  .modal-box{grid-template-columns:1fr;grid-template-rows:min(15rem,46vw) minmax(0,1fr);width:100%;height:100svh;border-radius:0}
  .modal-seite{height:auto}
  /* Schriftzug aus, das Portrait braucht im flachen Band die ganze Hoehe */
  .modal-seite-in{display:none}
  .modal-inhalt{padding:1.6rem 1.3rem 2rem}
}

/* ---------------- Leistungsbloecke auf Bereichsseiten ---------------- */
.leistung{padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line-2)}
.leistung:first-of-type{border-top:0}
.leistung .split{align-items:center}
.split-gedreht{direction:rtl}
.split-gedreht > *{direction:ltr}
@media (max-width:900px){.split-gedreht{direction:ltr}}
.lst-bild{margin:0}
.lst-bild img{width:100%;object-fit:cover;border-radius:var(--r-lg);aspect-ratio:4/3}
.lst-hoch img{aspect-ratio:4/5}
.lst-breit img{aspect-ratio:21/9}
.lst-bild picture{display:block}
.lst-nr{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  color:var(--gold-tief);margin-bottom:.9rem;
}
.lst-text h2{font-size:clamp(1.6rem,2.8vw,2.15rem)}
.lst-unter{
  margin:.7rem 0 1.2rem;font-size:1.12rem;font-weight:500;color:var(--gruen);max-width:30em;
}
.lst-text p{color:var(--ink-2);max-width:42em}
.lst-text p + p{margin-top:.9rem}
.lst-text .tags{margin:1.5rem 0 1.6rem}

/* Textkarten auf den Detailseiten */
.card h3 + p,.card p{color:var(--ink-2);font-size:.99rem}
.card p + p{margin-top:.8rem}
.card .tags{margin:1rem 0 0}
.card .card strong{color:var(--ink)}
.lst-text .tags{margin-bottom:1.4rem}
.lst-text > p{font-size:1.1rem;color:var(--ink-2)}

/* ---------------- Preisfinder ---------------- */
.finder-box{
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:clamp(1.8rem,4vw,2.8rem);max-width:56rem;margin-inline:auto;
  /* feste Hoehe, damit die Karte bei jedem Schritt gleich gross bleibt */
  min-height:34rem;display:flex;flex-direction:column;
}
.finder-box > div{display:flex;flex-direction:column;flex:1;min-height:0}
.finder-optionen,.finder-ergebnis{margin-bottom:auto}
@media (max-width:760px){.finder-box{min-height:0}}
.finder-fortschritt{display:flex;gap:.35rem;margin-bottom:1.8rem}
.finder-teil{flex:1;height:4px;border-radius:var(--r-pill);background:var(--creme-3);transition:background .3s}
.finder-teil.is-an{background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.finder-zaehler{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-tief)}
.finder-frage{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:.6rem 0 1.5rem}
.finder-optionen{display:grid;gap:.6rem}
.finder-option{
  display:block;width:100%;text-align:left;cursor:pointer;font-family:var(--font);
  background:var(--creme-2);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.3rem;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.finder-option:hover{border-color:rgba(31,74,44,.3);transform:translateX(3px)}
.finder-option.is-gewaehlt{border-color:var(--gruen);box-shadow:0 0 0 3px rgba(31,74,44,.1)}
.finder-option b{display:block;font-size:1.02rem;font-weight:700;color:var(--ink)}
.finder-option span{display:block;margin-top:.15rem;font-size:.92rem;color:var(--ink-2)}
.finder-zurueck{
  margin-top:1.4rem;align-self:flex-start;background:none;border:0;cursor:pointer;font-family:var(--font);
  font-size:.92rem;font-weight:600;color:var(--ink-3);padding:.3rem 0;
}
.finder-zurueck:hover{color:var(--gruen)}
.finder-ergebnis{display:grid;gap:.6rem;overflow-y:auto;min-height:0;padding-right:.2rem}
.finder-treffer{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.5rem;align-items:center;
  background:var(--creme-2);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.3rem;
  transition:border-color .2s ease}
.finder-treffer:hover{border-color:rgba(31,74,44,.3)}
.ft-text b{display:block;font-size:1.02rem;font-weight:700}
.ft-text > span{display:block;margin-top:.15rem;font-size:.92rem;color:var(--ink-2)}
.ft-meta{text-align:right;white-space:nowrap}
.ft-dauer{display:block;font-size:.85rem;color:var(--ink-3)}
.ft-preis{display:block;font-size:1.1rem;font-weight:800;color:var(--gruen);letter-spacing:-.02em}
.ft-preis s{font-size:.82rem;font-weight:600;color:var(--ink-3);margin-left:.4rem}
.finder-hinweis{margin:1.4rem 0 1.4rem;font-size:.95rem;color:var(--ink-2)}
.finder-aktionen{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:auto}
@media (max-width:560px){
  .finder-treffer{grid-template-columns:1fr}
  /* Dauer und Preis stehen einzeilig nebeneinander, mit Abstand dazwischen */
  .ft-meta{text-align:center;margin-top:.55rem}
  .ft-dauer{display:inline}
  .ft-preis{display:inline;margin-left:.6rem}
}

/* ---------------- Preistabellen ---------------- */
.pt-block + .pt-block{margin-top:2.4rem}
.pt-block h3{font-size:1.3rem;margin-bottom:.5rem}
.pt-intro{color:var(--ink-2);font-size:.99rem;max-width:52em;margin-bottom:1.1rem}
.pt{border-top:1px solid var(--line)}
.pt-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) 10rem 9rem;gap:1.5rem;
  padding:.7rem .2rem;border-bottom:1px solid var(--line-2);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.pt-kopf span:last-child{text-align:right}
.pt-zeile{
  display:grid;grid-template-columns:minmax(0,1fr) 10rem 9rem;gap:.3rem 1.5rem;align-items:baseline;
  padding:1rem .2rem;border-bottom:1px solid var(--line-2);transition:background .2s ease;
}
.pt-zeile:hover{background:var(--creme-2)}
.pt-name b{display:block;font-size:1.02rem;font-weight:700}
.pt-name span{display:block;margin-top:.15rem;font-size:.93rem;color:var(--ink-2);max-width:46em}
.pt-dauer{font-size:.95rem;color:var(--ink-2)}
.pt-preis{text-align:right;font-size:1.08rem;font-weight:800;color:var(--gruen);letter-spacing:-.02em;white-space:nowrap}
.pt-preis s{display:block;font-size:.8rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
/* Einspaltig: Dauer und Preis mittig unter dem Namen */
@media (max-width:760px){
  .pt-kopf{display:none}
  /* Kein Raster: es zieht die Spalten auseinander, Textfluss haelt sie zusammen */
  .pt-zeile{display:block;padding:1.15rem .2rem;text-align:center}
  .pt-name{display:block;margin-bottom:.5rem}
  .pt-name span{margin-top:.3rem;max-width:none}
  .pt-dauer{display:inline;font-size:.88rem;color:var(--ink-3)}
  .pt-preis{display:inline;font-size:1.05rem;margin-left:.7rem}
  .pt-preis s{display:inline;margin-left:.45rem;font-size:.85rem}
}

/* ---------------- Seite Häufige Fragen ---------------- */
.fq-nav{
  position:sticky;top:var(--nav-h);z-index:50;
  background:var(--creme);border-bottom:1px solid var(--line-2);
  transform:translateZ(0);
}
.fq-chips{display:flex;gap:.5rem;padding:.9rem 0;overflow-x:auto;scrollbar-width:none}
/* Ab Tabletbreite umbrechen, die Wischleiste ist mit Maus nicht bedienbar */
@media (min-width:861px){.fq-chips{flex-wrap:wrap;overflow:visible}}
.fq-chips::-webkit-scrollbar{display:none}
.fq-chip{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;flex:none;
  background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem 1.1rem;font-size:.9rem;font-weight:600;color:var(--ink-2);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.fq-chip span{
  font-size:.75rem;font-weight:800;color:var(--gold-tief);
  background:var(--creme-3);border-radius:var(--r-pill);padding:.1rem .45rem;
}
.fq-chip:hover{border-color:var(--gruen);color:var(--gruen)}

.fq-liste{padding:clamp(2.5rem,5vw,4rem) 0}
.fq-block{scroll-margin-top:calc(var(--nav-h) + 5rem)}
.fq-block + .fq-block{margin-top:clamp(2.5rem,5vw,3.8rem)}
.fq-kopf{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.fq-kopf h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.fq-kopf p{
  margin-top:.2rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-tief);
}
.fq-liste .faq{max-width:none}

/* ---------------- Kontaktseite ---------------- */
.kontaktliste{list-style:none;margin:1.2rem 0 2.4rem;padding:0;display:grid;gap:0;border-top:1px solid var(--line-2)}
.kontaktliste li{display:flex;align-items:center;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line-2)}
.kl-icon{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-content:center;
  background:linear-gradient(150deg,rgba(42,96,57,.13),rgba(31,74,44,.05));
  border:1px solid var(--line);color:var(--gruen);
}
.kl-icon svg{width:18px;height:18px}
.kl-text b{display:block;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.kl-text > span{display:block;margin-top:.15rem;font-size:1.02rem;font-weight:600;color:var(--ink)}
.kl-text a{color:var(--gruen);border-bottom:1px solid var(--line-2);padding-bottom:.08rem}
.kl-text a:hover{color:var(--gold-tief);border-color:var(--gold-2)}
.kontaktliste + h3,.kontaktliste ~ h3{margin-top:2rem;margin-bottom:.6rem}

/* Galerie auf der Seite Über mich: gleiche Höhe für alle drei Bilder */
.galerie figure{margin:0}
.galerie figure img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);aspect-ratio:4/5}
.bio-media figure{margin:0}
.bio-media figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}

/* Rechtstexte: schmale Satzbreite, klare Gliederung */
.rechtstext{max-width:52rem;margin-inline:auto}
.rechtstext h2{
  margin:3rem 0 1rem;font-size:1.45rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.rechtstext h2:first-of-type{margin-top:1rem}
.rechtstext h3{margin:2rem 0 .6rem;font-size:1.12rem}
.rechtstext h4{margin:1.4rem 0 .5rem;font-size:1rem;color:var(--gold-tief)}
.rechtstext p,.rechtstext li{color:var(--ink-2);font-size:.99rem;line-height:1.7}
.rechtstext p + p{margin-top:.8rem}
.rechtstext a{color:var(--gruen);text-decoration:underline;text-underline-offset:.16em;
  text-decoration-color:var(--line);word-break:break-word}
.rechtstext a:hover{text-decoration-color:var(--gold-2)}
.rechtstext ul{margin:1rem 0 1.4rem;padding-left:1.15rem}
.rechtstext li{margin-bottom:.5rem}
.rechtstext li::marker{color:var(--gold-2)}

/* ---------------- Wissensseite ---------------- */
.wissen-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media (max-width:980px){.wissen-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wissen-liste{grid-template-columns:minmax(0,1fr)}}
.wissen-karte{
  position:relative;display:flex;flex-direction:column;color:inherit;overflow:hidden;
  background:var(--creme-2);border:1px solid var(--line);border-radius:14px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.wissen-karte:hover{
  border-color:rgba(31,74,44,.28);transform:translateY(-3px);
  box-shadow:0 22px 44px -26px rgba(31,74,44,.45);
}

/* Titelbild traegt Symbol, Thema und Ueberschrift */
.wk-bild{position:relative;display:block;overflow:hidden}
.wk-bild picture,.wk-bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.wk-bild img{transition:transform .6s ease}
.wissen-karte:hover .wk-bild img{transform:scale(1.05)}
.wk-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,38,23,.94) 0%,rgba(16,38,23,.78) 38%,rgba(16,38,23,.34) 68%,rgba(16,38,23,.12) 100%);
}
.wk-icon{
  position:absolute;top:1rem;left:1rem;z-index:2;
  width:38px;height:38px;border-radius:11px;display:grid;place-content:center;
  background:rgba(245,241,232,.18);border:1px solid rgba(245,241,232,.3);
  color:var(--on-dark);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.wk-icon svg{width:19px;height:19px}
.wk-auf{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.4rem 1.5rem}
.wk-kat{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;
}
.wk-titel{
  display:block;font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.22;color:var(--on-dark);
}
.wk-inhalt{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.5rem 1.3rem}
.wk-text{display:block;color:var(--ink-2);font-size:.97rem;line-height:1.6}
.wk-fuss{
  display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.2rem;
  border-top:1px solid var(--line-2);font-size:.85rem;font-weight:700;color:var(--gold-tief);
}
.wk-fuss svg{width:16px;height:16px;transition:transform .2s ease}
.wissen-karte:hover .wk-fuss svg{transform:translateX(3px)}
.fq-chip.is-aktiv{background:linear-gradient(160deg,var(--gruen-2),var(--gruen));border-color:transparent;color:var(--on-dark)}
button.fq-chip{font-family:var(--font);cursor:pointer}

/* Symbol im Auftakt eines Beitrags */
.held-icon{
  display:grid;place-content:center;width:52px;height:52px;border-radius:15px;margin-bottom:1.2rem;
  background:rgba(245,241,232,.14);border:1px solid rgba(245,241,232,.26);color:var(--on-dark);
}
.held-icon svg{width:26px;height:26px}
.wk-fuss svg{width:16px;height:16px;transition:transform .2s ease}
.wissen-karte:hover .wk-fuss svg{transform:translateX(3px)}
.fq-chip.is-aktiv{background:linear-gradient(160deg,var(--gruen-2),var(--gruen));border-color:transparent;color:var(--on-dark)}
.fq-chip.is-aktiv span{background:rgba(245,241,232,.16);color:var(--gold)}
button.fq-chip{font-family:var(--font);cursor:pointer}

/* Beitragstext */
.artikel{max-width:44rem;margin-inline:auto}
.artikel-meta{
  display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--line-2);
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-tief);
}
.artikel-meta span + span{color:var(--ink-3)}
.artikel p{color:var(--ink-2);font-size:1.06rem;line-height:1.75;max-width:none}
.artikel p + p{margin-top:1.1rem}
.artikel h2{font-size:1.45rem;margin:2.6rem 0 .9rem;max-width:24ch}
.artikel strong{color:var(--ink);font-weight:700}
.artikel .merksatz{
  background:var(--creme-2);border:1px solid var(--line);border-left:3px solid var(--gold-2);
  border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.5rem;margin:1.8rem 0;
  font-size:1.06rem;color:var(--ink);
}
.artikel-hilfe{
  display:flex;gap:1.3rem;align-items:flex-start;
  background:linear-gradient(165deg,#FFFFFF,#FBF7F0);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.9rem;
}
.artikel-hilfe h3{font-size:1.2rem;margin-bottom:.5rem}
.artikel-hilfe p{color:var(--ink-2);font-size:.99rem}
@media (max-width:600px){.artikel-hilfe{flex-direction:column}}

/* Bilder im Beitrag */
.artikel-bild{margin:2.4rem 0}
.artikel-bild picture{display:block}
.artikel-bild img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.artikel-bild figcaption{
  margin-top:.9rem;font-size:.9rem;line-height:1.5;color:var(--ink-3);
  padding-left:1rem;border-left:2px solid var(--gold-2);
}
@media (min-width:1000px){
  .artikel-bild.breit{width:56rem;margin-left:calc((44rem - 56rem) / 2)}
}

/* Beitrag: Kopfzeile und Fragekarten */
.artikel-meta{
  display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.2rem;
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-tief);
}
.artikel-meta span + span{color:var(--ink-3)}
.sit h3:only-child,.sit div > h3:only-child{min-height:0}

/* ---------------- Feinschliff für kleine Bildschirme ---------------- */
@media (max-width:760px){
  :root{--nav-h:72px}
  body{font-size:1.02rem}
  h1{font-size:clamp(2rem,8vw,2.6rem)}
  h2{font-size:clamp(1.6rem,6vw,2.1rem)}

  /* Auftakt: weniger Höhe, Text bekommt Luft */
  .hero-in{padding:calc(var(--nav-h) + 3.5rem) 0 3rem}
  .hero-lead{font-size:1.05rem}
  .hero-actions{gap:.7rem}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-meta{gap:.5rem 1.2rem;margin-top:2rem;font-size:.88rem}
  .held-inner{padding:calc(var(--nav-h) + 2.5rem) 0 2.2rem}

  /* Knöpfe füllen die Breite, damit sie gut treffbar sind */
  .final .btn,.cta-actions .btn,.section-head + .btn{width:100%;justify-content:center}
  .final-in{padding:2.4rem 1.2rem}
  .schluss-in .btn{width:100%;justify-content:center}

  /* Karten und Raster enger */
  .card,.sit,.kachel,.wissen-karte .wk-inhalt{padding:1.4rem 1.3rem}
  .grid-2,.grid-3,.grid-4{gap:.9rem}
  .section{padding:clamp(2.8rem,9vw,4rem) 0}

  /* Bildstapel im Haltungsblock */
  .stapel{padding-bottom:2.6rem;padding-right:1.4rem}
  .stapel-klein{width:58%;border-width:6px}

  /* Zitatband */
  .zitat p{font-size:clamp(1.35rem,6vw,1.8rem)}

  /* Preisfinder */
  .finder-box{padding:1.4rem 1.2rem}
  .finder-aktionen .btn{width:100%;justify-content:center}

  /* Beiträge */
  .artikel p{font-size:1.02rem}
  .artikel-meta{gap:.9rem;font-size:.72rem}

  /* Schwebende Schaltfläche kleiner, damit sie nicht stört */
  .wa{padding:.65rem 1rem;font-size:.84rem;right:.8rem;bottom:.8rem}
  .wa svg{width:17px;height:17px}
}

@media (max-width:520px){
  .container,.narrow{width:min(100% - 1.8rem,1360px)}
  .bereich-in{padding:1.1rem 1.1rem}
  .leist-item{padding:.9rem 1rem}
  .pt-zeile{padding:.85rem .1rem}
  .foot-base{flex-direction:column;gap:.4rem}
}

/* ---------------- Einheitliche Stufen: 1120 Navigation, 980 Tablet, 760 grosses Telefon, 520 Telefon ---------------- */
html,body{max-width:100%;overflow-x:clip}
img,picture,video,svg{max-width:100%}
/* Keine automatische Silbentrennung, nur sehr lange Woerter duerfen brechen */
h1,h2,h3,h4,p,li,summary,dd,dt,b,span,a{hyphens:manual;-webkit-hyphens:manual}
h1,h2,h3,h4,p,li,summary,dd,dt{overflow-wrap:break-word}
h1,h2,h3,h4{text-wrap:balance}
p,li,summary,dd{text-wrap:pretty}

/* Auftakt darf auf flachen Bildschirmen mitwachsen */
.hero{min-height:auto}
.hero-in{min-height:100svh;display:flex;align-items:center}
@media (max-width:980px){
  .hero-in{min-height:auto;padding-block:calc(var(--nav-h) + 4rem) 3.5rem}
}

/* Untermenue darf nicht aus dem Fenster laufen */
@media (min-width:1121px){
  .nav-item:last-of-type .nav-menu{left:auto;right:-1rem}
}

@media (max-width:980px){
  /* Alle zweispaltigen Bausteine auf eine Spalte */
  .split,.bereiche,.duo,.kopf-grid,.auftakt-grid,.bio{grid-template-columns:minmax(0,1fr)}
  /* Klingespring: einspaltig soll erst der Text kommen, dann das Foto der Quelle */
  #klingespring .lst-bild{order:2}
  .split-gedreht,.bd-gedreht .bd-in{direction:ltr}
  .split-versetzt > *:last-child{padding-top:0}
  .grid-3,.grid-4,.wissen-liste,.merkmale,.kachel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step h3{min-height:0}
  /* Bildstapel wird zur einfachen Reihe */
  .stapel{padding:0;display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;max-width:none}
  .stapel-klein{position:static;width:auto;border:0;box-shadow:none}
  .stapel-gross img,.stapel-klein img{aspect-ratio:4/5}
  /* Rueckruffenster: Bandhoehe steht weiter oben, hier nur der Rahmen */
  .modal-box{grid-template-columns:minmax(0,1fr);
    width:100%;height:100svh;border-radius:0}
  .modal{padding:0}
}

@media (max-width:760px){
  .grid-2,.grid-3,.grid-4,.wissen-liste,.merkmale,.kachel-grid,.plan,.checks,.field-row,
  .zwei,.ways,.galerie,.galerie-zwei,.nav-direkt{grid-template-columns:minmax(0,1fr)}
  .stapel{grid-template-columns:1fr 1fr}
  .pillar,.zeile,.reg-z{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .index-item,.leist-item,.finder-treffer{grid-template-columns:minmax(0,1fr)}
  .index-meta{text-align:left}
  .leist-item > svg{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .schritt-nav{gap:.8rem}
  .schritt-nav .btn{margin-left:0;width:100%;justify-content:center}
  .artikel-hilfe{flex-direction:column}
  .bereich-kopf img{aspect-ratio:16/9}
}

@media (max-width:520px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .stapel{grid-template-columns:1fr}
  .stapel-klein{display:none}
  .chip-grid .chip{flex:1 1 100%}
  .modal-inhalt{padding:1.4rem 1.1rem 1.8rem}
  .fq-chips{padding-inline:0}
  .tags li,.way li{font-size:.84rem}
}

/* Zeigegeraete ohne Hover: keine Schwebeeffekte */
@media (hover:none){
  .card:hover,.wissen-karte:hover,.step:hover,.kachel:hover,.way:hover{transform:none}
  .leist-item:hover,.index-item:hover{transform:none}
  .bereich-kopf:hover img,.wissen-karte:hover .wk-bild img{transform:none}
}

/* Auftakt auf dem Telefon: Bild hochkant, Inhalt mittig */
@media (max-width:760px){
  /* Auftakt bleibt linksbündig, nur die Knöpfe laufen über die Breite */
  .hero-in{
    text-align:left;
    padding-block:calc(var(--nav-h) + 3rem) 2.6rem;
    min-height:min(92svh,46rem);
  }
  .hero-copy{max-width:none}
  .hero h1{max-width:none}
  .hero-lead{max-width:none}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  /* Nur im Auftakt linksbuendig, sonst mittig unter dem Knopf */
  .hero .btn-note{text-align:left}
  .btn-note{text-align:center}
  .hero-meta{justify-content:center;text-align:center;gap:.6rem}
  /* Verlauf von unten statt von links, damit sie sichtbar bleibt */
  .hero::after{
    background:linear-gradient(to top,
      rgba(22,53,31,.94) 0%,rgba(22,53,31,.9) 34%,rgba(22,53,31,.62) 56%,
      rgba(22,53,31,.3) 74%,rgba(22,53,31,.12) 100%);
  }
  .hero-bg img{object-position:50% 30%}
}

/* Symbol, Überschrift und Text stehen bündig zueinander */
.kanal .tile,.card .tile{margin-bottom:1rem}
.leist-item{align-items:center}
.kl-icon,.leist-icon{align-self:center}
@media (max-width:520px){
  .feature{gap:.9rem}
  .tile{width:42px;height:42px;border-radius:12px}
  .tile svg{width:20px;height:20px}
}

/* ---------------- Telefon: Inhalte mittig ausrichten ---------------- */
@media (max-width:760px){
  /* Abschnittsköpfe und Textblöcke */
  .section-head{text-align:center}
  .lst-text,.bd-text,.halt,.inhalt,.artikel,.artikel-schmal{text-align:center}
  .lst-text p,.artikel p,.bd-text p,.prose p{margin-inline:auto}
  .lst-text h2,.lst-text .lst-unter,.artikel h2{margin-inline:auto}
  .lst-nr,.artikel-meta{justify-content:center;text-align:center}
  .tags,.chip-grid{justify-content:center}
  .pill-wrap{text-align:center}
  .held-inner{text-align:center}
  .hero-in,.hero-copy{text-align:left}
  .held h1,.held-lead{margin-inline:auto}
  .held-aktionen,.held-icon{justify-content:center;margin-inline:auto}
  .held-aktionen .btn,.cta-actions .btn,.lst-text .btn{width:100%;justify-content:center}
  .cta-actions,.aktionen{justify-content:center}

  /* Karten mit Symbol: Symbol über der Überschrift, alles mittig */
  .card,.sit,.kachel,.merkmale > div{text-align:center}
  .card .tile,.kachel .tile{margin-inline:auto}
  /* Nummer sitzt als eigene Zeile ueber der Ueberschrift */
  .sit{padding-top:3.4rem}
  .sit .num{
    left:50%;right:auto;top:1.5rem;transform:translateX(-50%);
    font-size:.82rem;font-weight:800;letter-spacing:.18em;
    color:var(--gold-tief);opacity:.75;
  }
  .sit:hover .num{color:var(--gold-tief);opacity:1}
  .sit h3{padding-right:0;margin-inline:auto;justify-content:center;max-width:22ch}
  .sit p{margin-inline:auto}
  .feature{flex-direction:column;align-items:center;text-align:center;gap:.8rem}
  .feature h3{min-height:0;justify-content:center}
  .feature p{margin-inline:auto}

  /* Hakenliste innen linksbuendig, der Block mittig */
  .qual{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
  .qual li{text-align:left}

  /* Zeilenlisten */
  .leist-item,.index-item,.finder-treffer,.kontaktliste li,.zeile,.pillar,.reg-z{text-align:center}
  /* Textlinks unter den Bloecken mittig */
  .bereich-mehr,.bereich-mehr .link{justify-content:center;text-align:center}
  .lst-text > p:last-child,.section > .container > p:last-child{text-align:center}
  .lst-text .link,.artikel .link{justify-content:center}
  .leist-item{grid-template-columns:minmax(0,1fr);justify-items:center;gap:.6rem}
  .leist-icon,.kl-icon{margin-inline:auto}

  /* Kontaktwege am Telefon als Kacheln statt als Liste */
  .kontakt-spalte{text-align:center}
  .kontakt-spalte h2,.kontakt-spalte h3{margin-inline:auto}
  .kontakt-spalte p{margin-inline:auto}
  .kontakt-spalte .link{justify-content:center}
  .kontaktliste{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;
    border-top:0;margin:1.4rem 0 2.2rem;
  }
  .kontaktliste li{
    flex-direction:column;justify-content:flex-start;gap:.5rem;
    padding:1.15rem .7rem;border:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
    border-radius:var(--r);background:var(--creme-2);
  }
  /* Rufnummern nebeneinander, E-Mail und Anschrift ganze Zeile */
  .kontaktliste li:nth-child(1){order:1}
  .kontaktliste li:nth-child(3){order:2}
  .kontaktliste li:nth-child(2){order:3;grid-column:1/-1}
  .kontaktliste li:nth-child(4){order:4;grid-column:1/-1}
  .kl-text > span{font-size:.92rem;overflow-wrap:anywhere;line-height:1.4}
  .kl-text b{font-size:.7rem;letter-spacing:.11em}

  /* Ablaufschritte */
  .step{align-items:center;text-align:center}
  .step-num{margin-inline:auto}
  .step-meta{justify-content:center}

  /* Fragen und Formulare */
  .faq summary{text-align:left}
  .faq p{text-align:left}
  .form,.booking,.legal,.note,  .field > label{text-align:left}

  /* Fussbereich: eine ruhige Spalte statt eines gebrochenen Rasters */
  .foot{padding-top:2.6rem}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:0;text-align:left}
  .foot .foot-brand{flex-direction:column;align-items:flex-start;gap:.7rem;margin-bottom:1rem}
  .foot-logo{width:46px;height:46px}
  .foot p{margin-inline:0}
  .foot-grid > div + div{border-top:1px solid var(--line-dark)}
  .foot-grid > div:first-child{padding-bottom:1.4rem}

  /* Die drei Linklisten klappen auf */
  .foot-grid > div + div > h4{
    display:flex;align-items:center;justify-content:space-between;
    margin:0;padding:1.1rem 0;cursor:pointer;
  }
  .foot-grid > div + div > h4::after{
    content:"";width:8px;height:8px;flex:none;margin-right:.3rem;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .25s ease;opacity:.7;
  }
  .foot-grid > div + div.is-auf > h4::after{transform:rotate(225deg) translateY(-2px)}
  .foot-grid > div + div > a{display:none}
  .foot-grid > div + div.is-auf > a{display:block;padding:.5rem 0}
  .foot-grid > div + div.is-auf{padding-bottom:1rem}

  .foot-base{text-align:left;justify-content:flex-start;gap:.5rem;margin-top:1.8rem}

  /* Beitragsbilder */
  .artikel-bild figcaption{text-align:left}
  .wissen-karte,.wk-auf{text-align:center}
  .wk-icon{left:50%;transform:translateX(-50%)}
}

/* Schlagzeile bricht ausgewogen um, statt einzelne Wörter zu trennen */
.hero h1,.held h1{text-wrap:balance}
@media (max-width:760px){
  .hero h1{text-wrap:pretty}
}

/* Kurzfassungen der Auftaktangaben */
.hero-meta b{font-weight:inherit}
.hero-meta .kurz{display:none}
@media (max-width:760px){
  .hero-meta{
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:.5rem 1.1rem;font-size:.85rem;text-align:center;
  }
  .hero-meta .lang{display:none}
  .hero-meta .kurz{display:inline}
  .hero-meta span{gap:.4rem}
  .hero-meta svg{width:15px;height:15px}
}
@media (max-width:380px){
  .hero-meta{gap:.45rem .8rem;font-size:.8rem}
}

/* Rückmeldungen der Formulare */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-meldung{
  margin-top:1.2rem;padding:1rem 1.3rem;border-radius:var(--r);
  font-size:.98rem;line-height:1.6;
}
.form-meldung-ok{
  background:linear-gradient(160deg,var(--gruen-2),var(--gruen));
  color:var(--on-dark);border:1px solid transparent;
}
.form-meldung-fehler{
  background:#FDF3EC;border:1px solid #E3C4A8;color:#7A3E14;
}
.booking .form-meldung{margin-top:1.4rem}

/* Bei der groesseren Seitenbreite bleiben Fliesstexte lesbar begrenzt */
.section-head{max-width:46rem}
.lst-text p,.bd-text p,.halt p{max-width:38em}
/* Absaetze fuellen den Block, sonst sitzt der Text links im zentrierten Block */
.wissen-einleitung p{max-width:none;margin-inline:auto}
.artikel,.artikel-schmal{max-width:46rem}

/* Nach einem dunklen Band folgt immer wieder voller Abstand */
.dark + .section,.dark + section .section,.zitat + .section{padding-top:clamp(3.4rem,7vw,5.5rem)!important}

/* Bildnachweis unter einem Bild */
.bild-quelle{
  margin-top:.6rem;font-size:.78rem;color:var(--ink-3);letter-spacing:.02em;
}

/* ---------------- Ankündigung zur Neueröffnung ---------------- */
/* Gilt in jeder Breite: solange ein Fenster offen ist, steht die Seite dahinter still. */
body.menue-offen{overflow:hidden}
.ankuend{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.5rem}
.ankuend[hidden]{display:none}
.ankuend-hg{
  position:absolute;inset:0;background:rgba(16,38,23,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s ease;
}
.ankuend.is-auf .ankuend-hg{opacity:1}
.ankuend-box{
  position:relative;width:min(100%,58rem);max-height:calc(100svh - 3rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  /* Zeilenhoehe an der Karte, sonst greift der Bildlauf nicht */
  grid-template-rows:minmax(0,1fr);overflow:hidden;
  background:var(--creme-2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(16,38,23,.7);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .3s ease,transform .3s ease;
}
.ankuend.is-auf .ankuend-box{opacity:1;transform:none}
.ankuend-kopf{
  position:relative;isolation:isolate;overflow:hidden;min-height:0;overflow-y:auto;
  background:var(--gruen-tief);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.ankuend-bg{position:absolute;inset:0;z-index:-2}
.ankuend-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 42%}
.ankuend-kopf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(16,38,23,.96) 0%,rgba(16,38,23,.9) 34%,rgba(16,38,23,.62) 58%,
    rgba(16,38,23,.3) 78%,rgba(16,38,23,.12) 100%);
}
.ankuend-kopf-in{padding:2.4rem 2.2rem 2.6rem;text-align:left}
.ankuend-kopf .pill{background:rgba(245,241,232,.16);border-color:rgba(245,241,232,.28);color:var(--on-dark);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ankuend-kopf .pill-mark{background-color:var(--on-dark)}
.ankuend-datum{
  margin-top:1rem;font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.ankuend-kopf h2{margin:.5rem 0 .7rem;font-size:clamp(1.4rem,3.4vw,1.75rem);color:var(--on-dark)}
.ankuend-kopf p{color:var(--on-dark-2);font-size:.97rem;max-width:32em}
.ankuend-kopf .ankuend-adresse{
  display:flex;align-items:flex-start;gap:.6rem;
  margin:1.2rem 0 0;padding-top:1.1rem;max-width:none;
  border-top:1px solid rgba(245,241,232,.22);
  font-size:1.02rem;font-weight:700;color:var(--on-dark);line-height:1.4;
}
.ankuend-kopf .ankuend-adresse svg{width:19px;height:19px;flex:none;margin-top:.2rem;color:var(--gold)}
.ankuend-mobil{display:none}

/* min-height:0, sonst waechst das Feld mit und der Bildlauf greift nicht */
.ankuend-inhalt{
  min-height:0;padding:2.2rem 2.2rem 2.4rem;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.ankuend-mark{
  display:block;width:52px;height:52px;margin:0 auto 1.4rem;
  background-color:var(--gruen);
  -webkit-mask:url("logo-mask.png") center/contain no-repeat;
          mask:url("logo-mask.png") center/contain no-repeat;
}
.ankuend-inhalt .form{max-width:none}
.ankuend-inhalt .btn{width:100%;justify-content:center;margin-top:.4rem}
.ankuend-fuss{margin-top:1.1rem;font-size:.9rem;color:var(--ink-3);text-align:center}
.ankuend-fuss a{color:var(--gruen);font-weight:700}
/* Deckendes Gruen, der Schliesser liegt auf heller Flaeche */
.ankuend .modal-zu{
  position:absolute;top:.9rem;right:.9rem;z-index:5;width:40px;height:40px;
  color:var(--on-dark);background:var(--gruen);border:1px solid var(--gruen);
  box-shadow:0 8px 20px -10px rgba(16,38,23,.75);
}
.ankuend .modal-zu svg{width:20px;height:20px}
.ankuend .modal-zu:hover{background:var(--gruen-tief);border-color:var(--gruen-tief)}
@media (max-width:860px){
  .ankuend{padding:.9rem}
  /* Einspaltig scrollt die ganze Karte, innerer Bildlauf ist unzuverlaessig */
  .ankuend-box{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;
    max-height:calc(100svh - 1.8rem);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .ankuend-kopf{min-height:14rem}
  .ankuend-kopf-in{padding:1.8rem 1.8rem 1.6rem;text-align:center}
  .ankuend-kopf p{margin-inline:auto}
  .ankuend-adresse{justify-content:center}
  .ankuend-mark{width:44px;height:44px;margin-bottom:1.1rem}
  .ankuend-inhalt{overflow:visible;padding:1.7rem 1.8rem 1.9rem}
  .ankuend-fuss{text-align:center}
  /* Der Schliesser bleibt am Fensterrand stehen, auch wenn die Karte laeuft */
  .ankuend .modal-zu{position:fixed;top:1.4rem;right:1.4rem}
}
/* Telefon: kompakte Karte ohne Formular, der Knopf oeffnet das Rueckruffenster */
/* Telefon: Bildband oben, heller Textkoerper darunter, kein Text auf dem Foto */
@media (max-width:760px){
  .ankuend{padding:1rem;place-items:center}
  .ankuend-box{
    width:min(100%,24rem);display:flex;flex-direction:column;
    max-height:none;overflow:hidden;border-radius:var(--r-lg);background:var(--creme-2);
  }
  .ankuend-inhalt{display:none}
  .ankuend-kopf{display:contents}
  .ankuend-bg{position:relative;inset:auto;z-index:auto;width:100%;height:15rem;flex:none;display:block}
  .ankuend-bg img{object-position:62% 26%}
  .ankuend-kopf-in{
    padding:1.5rem 1.15rem 1.6rem;text-align:center;
    color:var(--ink);background:var(--creme-2);
  }
  /* Nur vier Schriftbilder, das Etikett steht in der Datumszeile */
  .ankuend-kopf-in .pill{display:none}
  .ankuend-datum{color:var(--gold-2);margin:0 0 .4rem;font-size:.62rem;letter-spacing:.1em;white-space:normal}
  .ankuend-datum::before{content:"Neueröffnung"; display:block}
  .ankuend-kopf h2{color:var(--ink);font-size:1.3rem;margin:0}
  .ankuend-kopf p{color:var(--ink-2);font-size:.95rem;line-height:1.55;margin:.7rem auto 0;max-width:30em}
  .ankuend-kopf .ankuend-adresse{
    color:var(--ink-2);font-size:.95rem;font-weight:400;line-height:1.55;justify-content:center;
    margin:1rem auto 0;padding-top:.9rem;border-top:1px solid var(--line-2);
  }
  .ankuend-kopf .ankuend-adresse svg{margin-top:.28rem}
  .ankuend-mobil{display:flex;flex-direction:column;gap:.55rem;margin-top:1.2rem}
  .ankuend-mobil .btn{width:100%;justify-content:center}
  .ankuend-mobil-tel{font-size:.95rem;color:var(--ink-3);text-decoration:none}
  .ankuend .modal-zu{position:absolute;top:.75rem;right:.75rem;width:36px;height:36px}
}