:root{
  --green:#1f5b3a;
  --green-dark:#123826;
  --green-soft:#e4efe7;
  --orange:#f28c28;
  --orange-dark:#bf6416;
  --cream:#fff8ee;
  --paper:#fffdf8;
  --sand:#f6efe4;
  --text:#213127;
  --muted:#5f6e63;
  --line:rgba(31,91,58,.18);
  --shadow:0 18px 50px rgba(18,56,38,.12);
  --radius:26px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,var(--cream),#f9f2e8 44%,#fffdf8);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
img{max-width:100%;display:block;height:auto}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.75rem 1rem;z-index:20}.skip-link:focus{left:1rem;top:1rem}
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,253,248,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--max);margin:0 auto;padding:.7rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.75rem;min-width:210px}.brand img{width:172px;height:auto}.nav{display:flex;align-items:center;gap:.95rem;font-size:.95rem;color:var(--green-dark)}.nav a{padding:.45rem .15rem;border-bottom:2px solid transparent}.nav a:hover,.nav a[aria-current="page"]{color:var(--orange-dark);border-bottom-color:var(--orange)}.lang{display:flex;align-items:center;gap:.36rem;font-size:.88rem;color:var(--muted);white-space:nowrap}.lang a{padding:.2rem .08rem}.lang .active{font-weight:800;color:var(--green-dark)}
.mobile-menu{display:none}.version-strip{background:var(--green-dark);color:#fffdf8;font-size:.83rem}.version-strip .wrap{max-width:var(--max);margin:0 auto;padding:.42rem 1.1rem}.container{max-width:var(--max);margin:0 auto;padding:0 1.1rem}.hero{padding:3.8rem 0 2.7rem}.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);gap:2.3rem;align-items:center}.eyebrow{color:var(--orange-dark);font-size:.88rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;margin:0 0 .85rem}.hero h1,.page-title{font-size:clamp(2.05rem,4.8vw,4.15rem);line-height:1.04;margin:0 0 1rem;color:var(--green-dark);letter-spacing:-.035em;font-weight:700;max-width:920px}.sublead{font-size:clamp(1.06rem,1.8vw,1.36rem);max-width:760px;color:#26382c;margin:.72rem 0;font-weight:500}.lead{font-size:1.1rem;color:#3b4d41;max-width:820px}.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.55rem 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:999px;padding:.86rem 1.18rem;font-weight:800;line-height:1.1;border:1px solid transparent}.button.primary{background:var(--orange);color:#211509;box-shadow:0 12px 28px rgba(242,140,40,.22)}.button.primary:hover{background:#f7a24c}.button.secondary{background:#fff;border-color:var(--line);color:var(--green-dark)}.button.secondary:hover{border-color:var(--orange);color:var(--orange-dark)}.button.text{background:transparent;border-color:transparent;color:var(--orange-dark);padding-left:0}.small-note{display:inline-flex;align-items:flex-start;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.78rem .9rem;color:var(--muted);font-size:.94rem}.small-note:before{content:"";display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--orange);margin-top:.42rem;flex:none}.hero-visual{position:relative;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);background:var(--sand);min-height:360px}.hero-visual img{width:100%;height:100%;min-height:360px;object-fit:cover}.hero-visual figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(18,56,38,.78);color:#fffdf8;border-radius:18px;padding:.7rem .85rem;font-size:.86rem;backdrop-filter:blur(8px)}
.section{padding:2.3rem 0}.section h2{font-size:clamp(1.9rem,3vw,3rem);line-height:1.06;color:var(--green-dark);letter-spacing:-.035em;margin:0 0 1rem}.section .intro{font-size:1.08rem;color:#425347;max-width:850px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.15rem}.grid.one{grid-template-columns:1fr}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:rgba(255,253,248,.88);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:0 10px 32px rgba(18,56,38,.06)}.card:hover{border-color:rgba(242,140,40,.5)}.card img.icon{width:68px;height:68px;margin-bottom:.8rem}.card h3{margin:.1rem 0 .45rem;color:var(--green-dark);font-size:1.16rem}.card p{margin:.2rem 0;color:#4b5b50}.card .button{margin-top:.75rem}.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:center;background:linear-gradient(135deg,#fffdf8,#f4eadb);border:1px solid var(--line);border-radius:34px;padding:1.15rem;box-shadow:var(--shadow)}.feature img{border-radius:26px;width:100%;height:360px;object-fit:cover}.feature .feature-text{padding:1rem}.notice{background:var(--green-dark);color:#fffdf8;border-radius:var(--radius);padding:1.15rem 1.25rem;margin:1.2rem 0}.notice h2,.notice h3{color:#fffdf8;margin-top:0}.notice p{color:#eef7ef}.warning{background:#fff7eb;border:1px solid rgba(242,140,40,.35);border-radius:var(--radius);padding:1.15rem 1.25rem}.copybox{background:#fff;border:1px dashed rgba(31,91,58,.38);border-radius:22px;padding:1rem 1.1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;color:#31463a}.legalbox{background:#fff;border-left:5px solid var(--orange);border-radius:18px;padding:1rem 1.1rem;margin:1rem 0}.site-footer{margin-top:3.2rem;background:var(--green-dark);color:#fffdf8}.footer-inner{max-width:var(--max);margin:0 auto;padding:2.1rem 1.1rem;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:1.4rem}.footer-inner .footer-secondary{font-size:.85rem;opacity:.78}.site-footer h2,.site-footer h3{color:#fffdf8;margin:.2rem 0 .7rem}.site-footer p,.site-footer a{color:#f7fbf6}.site-footer a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.footer-bottom{border-top:1px solid rgba(255,255,255,.22);padding:1rem 1.1rem;max-width:var(--max);margin:0 auto;color:#e7f2e8;font-size:.9rem}.portal-links .card{background:#fffdf8}.muted{color:var(--muted)}
@media (max-width:980px){.nav{display:none}.mobile-menu{display:block}.mobile-menu details{position:relative}.mobile-menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:.58rem .85rem;color:var(--green-dark);font-weight:800}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-panel{position:absolute;right:0;top:2.7rem;width:min(86vw,360px);background:#fffdf8;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:.75rem;display:grid;gap:.2rem}.mobile-panel a{padding:.65rem .75rem;border-radius:14px}.mobile-panel a:hover{background:var(--sand)}.hero-grid,.feature{grid-template-columns:1fr}.hero{padding:2.9rem 0 1.8rem}.hero-visual{min-height:280px}.hero-visual img{min-height:280px}.grid,.grid.two,.grid.three,.grid.four{grid-template-columns:1fr 1fr}.grid.one{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}}
@media (max-width:620px){.header-inner{padding:.62rem .9rem}.brand img{width:145px}.lang{font-size:.82rem}.hero h1,.page-title{font-size:clamp(1.92rem,9.2vw,2.85rem)}.hero-grid{gap:1.4rem}.grid,.grid.two,.grid.three,.grid.four,.grid.one{grid-template-columns:1fr}.feature{padding:.7rem}.feature img{height:280px}.footer-inner{padding:1.8rem .95rem}.container{padding:0 .95rem}.hero-visual figcaption{position:static;border-radius:0;background:var(--green-dark)}}

/* V0.8.19: Sprachwechsel- und Hero-Beruhigung
   Ziel: Beim Umschalten DE/EN/HR sollen Bildposition, Hero-Höhe und CTA-Zone deutlich weniger springen. */
.hero-grid{
  align-items:start;
  min-height:470px;
}
.hero-grid > div:first-child{
  min-height:470px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.hero-grid > div:first-child .cta-row{
  min-height:52px;
  align-items:center;
}
.hero-grid > div:first-child .small-note{
  min-height:58px;
}
.hero-visual{
  height:420px;
  min-height:0;
}
.hero-visual img{
  height:100%;
  min-height:0;
  object-position:center center;
}
.hero-visual figcaption{
  min-height:54px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero h1,.page-title{
  text-wrap:balance;
}
.sublead{
  text-wrap:balance;
}
@media (max-width:980px){
  .hero-grid{
    min-height:0;
    align-items:start;
  }
  .hero-grid > div:first-child{
    min-height:0;
  }
  .hero-visual{
    order:-1;
    height:320px;
    min-height:0;
  }
  .hero-visual img{
    height:100%;
    min-height:0;
  }
  .hero-grid > div:first-child .cta-row,
  .hero-grid > div:first-child .small-note{
    min-height:0;
  }
}
@media (max-width:620px){
  .hero{
    padding:1.55rem 0 1.55rem;
  }
  .hero-grid{
    gap:1.05rem;
  }
  .hero-visual{
    height:255px;
    border-radius:26px;
  }
  .hero-visual figcaption{
    position:absolute;
    left:.75rem;
    right:.75rem;
    bottom:.75rem;
    border-radius:14px;
    background:rgba(18,56,38,.78);
    color:#fffdf8;
    padding:.58rem .7rem;
    font-size:.78rem;
    line-height:1.3;
    min-height:0;
    max-height:3.15rem;
    overflow:hidden;
  }
  .hero h1,.page-title{
    font-size:clamp(1.72rem,8vw,2.35rem);
    line-height:1.08;
    letter-spacing:-.025em;
  }
  .sublead{
    font-size:1.04rem;
  }
}


/* V0.8.19: Layout-Abstände und Hero-Balance
   Ziel: Überschriften ruhiger, Regionen-Hero weniger massiv, Inhalte nicht randnah, Hero-Text darf auf Desktop optisch über die Bildzone hinauslaufen. */
:root{
  --gutter:clamp(1.25rem,4.2vw,4.5rem);
}
.header-inner,
.version-strip .wrap,
.container,
.footer-inner,
.footer-bottom{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.section{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding:clamp(2rem,4vw,3.15rem) var(--gutter);
}
.hero{
  padding:clamp(2.35rem,4.6vw,3.45rem) 0 clamp(2rem,3.8vw,2.55rem);
}
.hero h1,.page-title{
  font-size:clamp(1.85rem,4.05vw,3.48rem);
  line-height:1.08;
  letter-spacing:-.028em;
  font-weight:720;
  max-width:none;
}
.sublead{
  font-size:clamp(1.02rem,1.45vw,1.22rem);
  line-height:1.55;
  max-width:690px;
}
.lead,.section .intro{
  font-size:clamp(1rem,1.22vw,1.08rem);
}
.section h2{
  font-size:clamp(1.5rem,2.45vw,2.28rem);
  line-height:1.14;
  letter-spacing:-.024em;
}
.card h3,.notice h3,.warning h3,.site-footer h3{
  font-size:1.08rem;
}
.site-footer h2{
  font-size:1.22rem;
}
@media (min-width:981px){
  .hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
    gap:clamp(1.4rem,3vw,2.2rem);
  }
  .hero-grid > div:first-child{
    position:relative;
    z-index:2;
  }
  .hero-grid > div:first-child > h1,
  .hero-grid > div:first-child > .page-title{
    width:min(980px,calc(100vw - (2 * var(--gutter))));
    margin-right:-18vw;
    text-wrap:balance;
  }
  .hero-visual{
    z-index:1;
    height:clamp(360px,34vw,430px);
  }
}
@media (max-width:980px){
  :root{--gutter:clamp(1.15rem,4.8vw,2rem)}
  .section{padding-top:2rem;padding-bottom:2.2rem}
  .hero h1,.page-title{
    font-size:clamp(1.78rem,7vw,2.5rem);
    line-height:1.1;
  }
}
@media (max-width:620px){
  :root{--gutter:clamp(1.05rem,5.4vw,1.45rem)}
  .header-inner{padding-left:var(--gutter);padding-right:var(--gutter)}
  .container{padding-left:var(--gutter);padding-right:var(--gutter)}
  .section{padding-left:var(--gutter);padding-right:var(--gutter)}
  .hero h1,.page-title{
    font-size:clamp(1.58rem,7.2vw,2.12rem);
    line-height:1.12;
  }
  .section h2{
    font-size:clamp(1.34rem,6vw,1.72rem);
  }
  .sublead{font-size:1rem;line-height:1.5}
}


/* V0.8.19: Header-Beruhigung, Desktop-Hero mit kontrollierter Bildüberlagerung, Mobile-Hero klar getrennt
   Desktop: Das Bild darf nach links unter die Überschrift laufen, bleibt aber durch Verlauf/helle Textzone lesbar.
   Mobile: Keine Text-Bild-Überlagerung; Text, CTA und Bild bleiben ruhig getrennt. */
:root{
  --max:1240px;
  --max-header:1320px;
}
.header-inner{
  max-width:var(--max-header);
  gap:clamp(.7rem,1.6vw,1.25rem);
}
.brand{
  min-width:clamp(142px,12vw,170px);
  flex:0 0 auto;
}
.brand img{
  width:clamp(142px,11.5vw,162px);
}
.nav{
  flex:1 1 auto;
  justify-content:center;
  gap:clamp(.54rem,1.05vw,.9rem);
  font-size:clamp(.84rem,.86vw,.93rem);
}
.nav>a,.nav-item.has-dropdown>a{
  white-space:nowrap;
  padding:.42rem .06rem;
}
.lang{
  flex:0 0 auto;
  padding-left:.25rem;
}
@media (max-width:1140px){
  .nav{display:none}
  .mobile-menu{display:block}
}
@media (min-width:981px){
  .hero{
    overflow:hidden;
  }
  .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    gap:0;
    align-items:start;
    min-height:clamp(410px,36vw,475px);
  }
  .hero-grid > div:first-child{
    grid-column:1 / 2;
    grid-row:1;
    position:relative;
    z-index:3;
    min-height:0;
    padding-top:clamp(.25rem,1.2vw,.85rem);
    padding-bottom:1rem;
  }
  .hero-grid > div:first-child > p:not(.eyebrow),
  .hero-grid > div:first-child > .sublead,
  .hero-grid > div:first-child > .cta-row,
  .hero-grid > div:first-child > .small-note{
    max-width:610px;
  }
  .hero-grid > div:first-child > h1,
  .hero-grid > div:first-child > .page-title{
    width:min(930px,calc(100vw - (2 * var(--gutter))));
    margin-right:-17vw;
    position:relative;
    z-index:4;
  }
  .hero-visual{
    grid-column:1 / -1;
    grid-row:1;
    justify-self:end;
    align-self:start;
    width:min(68%,760px);
    height:clamp(365px,33vw,438px);
    min-height:0;
    margin-top:clamp(.2rem,.9vw,.75rem);
    z-index:1;
  }
  .hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,248,238,.96) 0%,
      rgba(255,248,238,.82) 16%,
      rgba(255,248,238,.44) 35%,
      rgba(255,248,238,.10) 54%,
      rgba(255,248,238,0) 72%);
  }
  .hero-visual picture,
  .hero-visual img{
    height:100%;
  }
  .hero-visual figcaption{
    z-index:2;
    left:auto;
    width:min(86%,640px);
  }
  .hero h1,.page-title{
    font-size:clamp(1.78rem,3.65vw,3.18rem);
    line-height:1.09;
  }
}
@media (max-width:980px){
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
    gap:1.25rem;
  }
  .hero-grid > div:first-child{
    order:1;
    min-height:0;
  }
  .hero-visual{
    order:2;
    height:300px;
    min-height:0;
    margin-top:.25rem;
  }
  .hero-visual::before{
    display:none;
  }
  .hero-visual figcaption{
    position:static;
    border-radius:0;
    background:var(--green-dark);
    min-height:0;
    max-height:none;
    font-size:.8rem;
    line-height:1.35;
    padding:.62rem .75rem;
  }
  .hero h1,.page-title{
    font-size:clamp(1.64rem,6.8vw,2.3rem);
    line-height:1.12;
  }
}
@media (max-width:620px){
  .hero{
    padding-top:1.45rem;
  }
  .hero-grid{
    gap:1rem;
  }
  .hero-visual{
    height:235px;
    border-radius:24px;
  }
  .hero h1,.page-title{
    font-size:clamp(1.5rem,7vw,2.02rem);
  }
  .cta-row{
    gap:.62rem;
  }
  .button{
    padding:.78rem 1rem;
  }
  .small-note{
    font-size:.88rem;
  }
}


/* V0.8.19: seitenbezogene Hauptbilder statt identischem Musterbild */
.hero-visual[data-hero="start"] img{object-position:center center;}
.hero-visual[data-hero="leistungen"] img{object-position:center center;}
.hero-visual[data-hero="objekt"] img{object-position:center center;}
.hero-visual[data-hero="assistenz"] img{object-position:center center;}
.hero-visual[data-hero="mobilitaet"] img{object-position:center center;}
.hero-visual[data-hero="regionen"] img{object-position:center center;}
.hero-visual[data-hero="kontakt"] img{object-position:center center;}
.hero-visual[data-hero="portal"] img{object-position:center center;}


/* V0.8.19: Hero-Bildsystem-Korrektur
   Desktop: Hauptbild ist Hintergrundfläche ohne umlaufenden Kartenrahmen.
   Mobile: weiterhin getrennte, ruhige Bildkarte unter dem Text. */
@media (min-width:981px){
  .hero{position:relative;overflow:hidden;}
  .hero-grid{position:relative;display:block;min-height:clamp(420px,36vw,500px);}
  .hero-grid > div:first-child{
    position:relative;z-index:3;width:min(52%,650px);min-height:0;
    padding-top:clamp(.3rem,1vw,.9rem);padding-bottom:1rem;
  }
  .hero-grid > div:first-child > p:not(.eyebrow),
  .hero-grid > div:first-child > .sublead,
  .hero-grid > div:first-child > .cta-row,
  .hero-grid > div:first-child > .small-note{max-width:620px;}
  .hero-grid > div:first-child > h1,
  .hero-grid > div:first-child > .page-title{
    width:min(900px,calc(100vw - (2 * var(--gutter))));
    margin-right:-10vw;position:relative;z-index:4;
  }
  .hero-visual{
    position:absolute;inset:0 0 0 auto;width:min(78%,980px);height:100%;
    min-height:0;margin:0;border-radius:0;box-shadow:none;background:transparent;
    overflow:visible;z-index:1;pointer-events:none;
  }
  .hero-visual picture,
  .hero-visual img{width:100%;height:100%;min-height:0;}
  .hero-visual img{
    object-fit:cover;object-position:center center;
    -webkit-mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.42) 28%,rgba(0,0,0,.86) 48%,rgba(0,0,0,1) 66%);
    mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.42) 28%,rgba(0,0,0,.86) 48%,rgba(0,0,0,1) 66%);
  }
  .hero-visual::before{
    display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,248,238,.98) 0%,rgba(255,248,238,.92) 23%,rgba(255,248,238,.55) 42%,rgba(255,248,238,.12) 61%,rgba(255,248,238,0) 76%);
  }
  .hero-visual figcaption{
    z-index:2;left:auto;right:clamp(.85rem,2.2vw,1.4rem);bottom:clamp(.75rem,1.6vw,1.1rem);
    width:auto;max-width:min(44vw,500px);min-height:0;display:inline-flex;align-items:center;
    padding:.42rem .62rem;border-radius:12px;background:rgba(18,56,38,.50);
    color:#fffdf8;font-size:.70rem;line-height:1.25;backdrop-filter:blur(6px);opacity:.84;
  }
  .hero-visual[data-hero="assistenz"] figcaption,
  .hero-visual[data-hero="kontakt"] figcaption{top:clamp(.75rem,1.5vw,1rem);bottom:auto;}
}
@media (max-width:980px){
  .hero-visual{position:relative;border-radius:24px;box-shadow:var(--shadow);overflow:hidden;background:var(--sand);pointer-events:auto;}
  .hero-visual img{-webkit-mask-image:none;mask-image:none;}
  .hero-visual::before{display:none;}
  .hero-visual figcaption{opacity:1;}
}


/* V0.8.19: Bildrahmen und Hero-Auslauf präzisiert
   Ziel: normale Bilder wieder hochwertig als Bildflächen mit Rundung/Rahmen zeigen.
   Desktop-Hero-Bilder laufen weiterhin vollständig in den Hintergrund aus; Rahmen und Rundung laufen links mit aus. */
:root{
  --image-border:rgba(31,91,58,.20);
  --image-border-soft:rgba(31,91,58,.14);
  --image-radius-lg:34px;
  --image-radius-md:26px;
}
.feature img{
  border:1px solid var(--image-border);
  border-radius:var(--image-radius-md);
  box-shadow:0 12px 34px rgba(18,56,38,.10);
}
.feature.feature-illustration img{
  object-fit:contain;
  background:var(--sand);
}
.card img:not(.icon){
  border:1px solid var(--image-border-soft);
  border-radius:22px;
}
@media (min-width:981px){
  .hero-visual{
    border-radius:var(--image-radius-lg);
    overflow:hidden;
    background:transparent;
    box-shadow:none;
  }
  .hero-visual img{
    border-radius:0;
  }
  .hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:
      inset 0 0 0 1px rgba(31,91,58,.22),
      inset 0 1px 0 rgba(255,253,248,.44);
    -webkit-mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 12%,
      rgba(0,0,0,.18) 25%,
      rgba(0,0,0,.72) 45%,
      rgba(0,0,0,1) 62%);
    mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 12%,
      rgba(0,0,0,.18) 25%,
      rgba(0,0,0,.72) 45%,
      rgba(0,0,0,1) 62%);
  }
  .hero-visual figcaption{
    z-index:4;
  }
}
@media (max-width:980px){
  .hero-visual{
    border:1px solid var(--image-border);
    border-radius:var(--image-radius-md);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .hero-visual figcaption{
    border-top:1px solid rgba(255,255,255,.14);
  }
}


/* V0.8.19: Hero-Feinschliff
   Ziel: Caption höher und dezenter, H1 minimal ruhiger, Bildverlauf weniger milchig,
   Hero etwas kompakter, Hinweisbox zurückhaltender. */
@media (min-width:981px){
  .hero{
    padding-top:clamp(2.05rem,4.1vw,3.05rem);
    padding-bottom:clamp(1.65rem,3.15vw,2.2rem);
  }
  .hero-grid{
    min-height:clamp(390px,33vw,460px);
  }
  .hero-grid > div:first-child{
    padding-top:clamp(.15rem,.85vw,.7rem);
  }
  .hero h1,.page-title{
    font-size:clamp(1.68rem,3.42vw,3.02rem);
    line-height:1.075;
    letter-spacing:-.026em;
  }
  .sublead{
    font-size:clamp(1rem,1.32vw,1.16rem);
    line-height:1.5;
  }
  .hero-visual{
    height:clamp(350px,31vw,415px);
  }
  .hero-visual img{
    -webkit-mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 9%,rgba(0,0,0,.32) 25%,rgba(0,0,0,.80) 45%,rgba(0,0,0,1) 63%);
    mask-image:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 9%,rgba(0,0,0,.32) 25%,rgba(0,0,0,.80) 45%,rgba(0,0,0,1) 63%);
  }
  .hero-visual::before{
    background:linear-gradient(90deg,
      rgba(255,248,238,.96) 0%,
      rgba(255,248,238,.86) 18%,
      rgba(255,248,238,.40) 36%,
      rgba(255,248,238,.08) 54%,
      rgba(255,248,238,0) 68%);
  }
  .hero-visual figcaption{
    right:clamp(.95rem,2.1vw,1.45rem);
    bottom:clamp(1.25rem,2.2vw,1.85rem);
    max-width:min(38vw,440px);
    padding:.34rem .52rem;
    border-radius:10px;
    background:rgba(18,56,38,.42);
    font-size:.64rem;
    line-height:1.22;
    opacity:.76;
  }
  .hero-visual[data-hero="assistenz"] figcaption,
  .hero-visual[data-hero="kontakt"] figcaption{
    top:clamp(1.05rem,1.9vw,1.45rem);
    bottom:auto;
  }
  .hero .small-note{
    max-width:560px;
    padding:.62rem .74rem;
    border-radius:14px;
    background:rgba(255,253,248,.74);
    color:#66756b;
    font-size:.88rem;
    box-shadow:none;
  }
  .hero .small-note:before{
    width:.56rem;
    height:.56rem;
    margin-top:.5rem;
  }
  .hero .cta-row{
    margin-top:1.28rem;
    margin-bottom:.75rem;
  }
}
@media (max-width:980px){
  .hero h1,.page-title{
    font-size:clamp(1.56rem,6.45vw,2.18rem);
  }
  .hero-visual figcaption{
    font-size:.76rem;
    line-height:1.3;
  }
  .hero .small-note{
    font-size:.86rem;
    padding:.66rem .76rem;
  }
}
@media (max-width:620px){
  .hero{
    padding-top:1.3rem;
    padding-bottom:1.35rem;
  }
  .hero h1,.page-title{
    font-size:clamp(1.44rem,6.8vw,1.94rem);
    line-height:1.12;
  }
  .hero-visual{
    height:225px;
  }
}


/* V0.8.19: Startseite Mobile-Catcher
   Ziel: Auf kleinen Bildschirmen zuerst ein emotionales Startbild zeigen,
   dann eine ruhige Textkarte mit Claim, Kurzsatz und CTA. Unterseiten bleiben getrennt und sachlicher. */
.mobile-catcher-text{display:none;}
@media (max-width:980px){
  .hero-home{
    padding-top:.75rem;
  }
  .hero-home .hero-grid{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .hero-home .hero-visual{
    order:-1;
    width:100%;
    height:clamp(300px,42vh,430px);
    min-height:0;
    margin:0 auto;
    border:0;
    border-radius:30px;
    box-shadow:0 20px 46px rgba(24,61,42,.18);
    overflow:hidden;
  }
  .hero-home .hero-visual img{
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center center;
  }
  .hero-home .hero-visual figcaption{
    display:none;
  }
  .hero-home .hero-grid > div:first-child{
    position:relative;
    z-index:3;
    margin:-2.15rem .55rem 0;
    padding:1.08rem 1.02rem 1rem;
    background:rgba(255,253,248,.96);
    border:1px solid rgba(229,220,203,.84);
    border-radius:26px;
    box-shadow:0 18px 42px rgba(24,61,42,.12);
    backdrop-filter:blur(10px);
  }
  .hero-home .eyebrow{
    margin-bottom:.48rem;
    font-size:.68rem;
    letter-spacing:.12em;
  }
  .hero-home h1{
    font-size:clamp(1.82rem,7.4vw,2.48rem);
    line-height:1.05;
    margin-bottom:.58rem;
  }
  .hero-home .sublead{
    display:none;
  }
  .hero-home .mobile-catcher-text{
    display:block;
    margin:.25rem 0 .75rem;
    font-size:1.02rem;
    line-height:1.42;
    color:#31463a;
    font-weight:550;
  }
  .hero-home .hero-grid > div:first-child > p:not(.eyebrow):not(.sublead):not(.mobile-catcher-text){
    display:none;
  }
  .hero-home .cta-row{
    margin:.85rem 0 .45rem;
    gap:.55rem;
  }
  .hero-home .button{
    padding:.78rem 1rem;
  }
  .hero-home .small-note{
    display:none;
  }
}
@media (max-width:620px){
  .hero-home{
    padding-top:.55rem;
    padding-bottom:1.15rem;
  }
  .hero-home .hero-visual{
    height:clamp(285px,41vh,390px);
    border-radius:0 0 26px 26px;
    width:calc(100% + 1.9rem);
    margin-left:-.95rem;
    margin-right:-.95rem;
  }
  .hero-home .hero-grid > div:first-child{
    margin:-2.05rem 0 0;
    padding:.96rem .92rem .92rem;
    border-radius:24px;
  }
  .hero-home h1{
    font-size:clamp(1.76rem,8.1vw,2.24rem);
  }
  .hero-home .mobile-catcher-text{
    font-size:.98rem;
  }
  .hero-home .button.secondary{
    display:none;
  }
  .hero-home .button.primary{
    width:100%;
  }
}

/* V0.8.19: Freiwilliger Datenreset und Kroatien-Sicherheitslinks */
.emergency-hero-note{
  background:linear-gradient(135deg,#fff7eb,#fffdf8);
  border:1px solid rgba(242,140,40,.38);
  border-radius:var(--radius);
  padding:1.25rem 1.35rem;
  box-shadow:0 10px 28px rgba(18,56,38,.06);
}
.emergency-hero-note h2{
  color:var(--orange-dark);
  margin-bottom:.45rem;
}
.emergency-grid .emergency-card strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:4.2rem;
  min-height:4.2rem;
  border-radius:22px;
  background:var(--green-dark);
  color:#fffdf8;
  font-size:1.85rem;
  line-height:1;
  margin-bottom:.8rem;
}
.official-links .card a[target="_blank"]::after{
  content:" ↗";
  font-weight:800;
}
.inquiry-examples{margin-top:1.2rem}
@media (max-width:620px){
  .emergency-grid .emergency-card strong{
    min-width:3.6rem;
    min-height:3.6rem;
    font-size:1.55rem;
  }
}


/* V0.8.19: Mobile Swipe Navigation als ergänzende Komfortfunktion */
.mobile-swipe-hint{display:none}
@media (max-width:900px){
  .mobile-swipe-hint{display:block;background:rgba(255,253,248,.92);border-top:1px solid rgba(229,220,203,.55);border-bottom:1px solid rgba(229,220,203,.55);font-size:.82rem;color:var(--muted);padding:8px 0}
  .mobile-swipe-hint .container{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mobile-swipe-hint a{font-weight:750;color:var(--green-dark);white-space:nowrap}
  .mobile-swipe-hint .swipe-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;text-align:center;color:var(--muted)}
  .mobile-swipe-hint .disabled{opacity:.28;pointer-events:none;color:var(--muted)}
}
@media (min-width:901px){.mobile-swipe-hint{display:none!important}}


/* V0.8.19: stabile Desktop-/Tablet-Navigation bei Sprachwechsel
   Ziel: DE/EN/HR dürfen durch unterschiedliche Wortlängen nicht sichtbar springen.
   Tablet wechselt früher in das bewährte kleine Menü. */
@media (min-width:1181px){
  .header-inner{
    display:grid;
    grid-template-columns:minmax(142px,172px) minmax(760px,1fr) auto;
    align-items:center;
    column-gap:clamp(.7rem,1.4vw,1.35rem);
  }
  .brand{
    min-width:0;
    width:172px;
  }
  .brand img{
    width:clamp(146px,11.4vw,166px);
  }
  .nav{
    display:grid!important;
    grid-template-columns:1fr 1.4fr 1.1fr 1fr 1fr;
    align-items:center;
    justify-self:center;
    width:min(100%,600px);
    gap:.3rem;
    font-size:clamp(.75rem,.77vw,.87rem);
  }
  .nav>a,.nav-item.has-dropdown>a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    text-align:center;
    white-space:nowrap;
    padding:.38rem .14rem;
    border-bottom-width:2px;
  }
  .lang{
    justify-self:end;
    min-width:72px;
  }
  .mobile-menu{
    display:none!important;
  }
}
@media (max-width:1180px){
  .nav{display:none!important}
  .mobile-menu{display:block}
}
@media (min-width:981px) and (max-width:1180px){
  .header-inner{
    max-width:var(--max-header);
    display:grid;
    grid-template-columns:auto auto auto;
    justify-content:space-between;
  }
}

/* V0.8.19: Mobile Swipe Transition Test
   Aktuelle Seite wird beim Wischen mitgeführt; beim Zurückwischen kommt die vorherige Seite als weiche Overlay-Vorschau herein. */



/* V0.8.19: Fixierte Anforderung – mobiler Start-Catcher bleibt oben.
   Der separate Swipe-Hinweis wird zugunsten des grünen Orientierungsbalkens ausgeblendet. */
.mobile-swipe-hint{display:none!important}
@media (max-width:980px){
  .hero-home{
    padding-top:.55rem!important;
  }
  .hero-home .hero-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  .hero-home .hero-visual{
    order:-5!important;
    width:100%!important;
    height:clamp(300px,42vh,430px)!important;
    min-height:0!important;
    margin:0 auto!important;
    border:0!important;
    border-radius:30px!important;
    box-shadow:0 20px 46px rgba(24,61,42,.18)!important;
    overflow:hidden!important;
  }
  .hero-home .hero-visual img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .hero-home .hero-visual figcaption{
    display:none!important;
  }
  .hero-home .hero-grid > div:first-child{
    position:relative!important;
    z-index:3!important;
    margin:-2.15rem .55rem 0!important;
    padding:1.08rem 1.02rem 1rem!important;
    background:rgba(255,253,248,.96)!important;
    border:1px solid rgba(229,220,203,.84)!important;
    border-radius:26px!important;
    box-shadow:0 18px 42px rgba(24,61,42,.12)!important;
    backdrop-filter:blur(10px)!important;
  }
}
@media (max-width:620px){
  .hero-home{
    padding-top:.35rem!important;
    padding-bottom:1.15rem!important;
  }
  .hero-home .hero-visual{
    height:clamp(285px,41vh,390px)!important;
    border-radius:0 0 26px 26px!important;
    width:calc(100% + 1.9rem)!important;
    margin-left:-.95rem!important;
    margin-right:-.95rem!important;
  }
  .hero-home .hero-grid > div:first-child{
    margin:-2.05rem 0 0!important;
    padding:.96rem .92rem .92rem!important;
    border-radius:24px!important;
  }
}

/* V0.8.19: Grüner Orientierungsbalken mit Platzhaltersymbolen.
   Platzhaltergröße für spätere Symbolentwicklung: 28 x 28 px, aktiv 32 x 32 px. */
.version-strip .version-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:.36rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.version-strip .version-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-progress{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.32rem;
  flex:0 0 auto;
}
.progress-item{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,253,248,.42);
  color:rgba(255,253,248,.82);
  background:rgba(255,253,248,.08);
  font-size:.58rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.03em;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.progress-item:hover,
.progress-item:focus-visible{
  background:rgba(255,253,248,.16);
  color:#fffdf8;
  border-color:rgba(255,253,248,.78);
}
.progress-item.is-current{
  width:32px;
  height:32px;
  background:var(--orange);
  color:#20150a;
  border-color:rgba(255,253,248,.92);
  box-shadow:0 0 0 3px rgba(242,140,40,.24);
  transform:translateY(-1px);
}
@media (max-width:900px){
  .version-strip{
    font-size:.76rem;
  }
  .version-strip .version-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:.28rem;
    padding:.34rem .86rem .43rem;
  }
  .version-strip .version-text{
    text-align:center;
    font-size:.69rem;
    opacity:.86;
  }
  .page-progress{
    justify-content:center;
    gap:.34rem;
  }
  .progress-item{
    width:27px;
    height:27px;
    font-size:.55rem;
  }
  .progress-item.is-current{
    width:31px;
    height:31px;
  }
}
@media (max-width:380px){
  .page-progress{
    gap:.24rem;
  }
  .progress-item{
    width:25px;
    height:25px;
    font-size:.51rem;
  }
  .progress-item.is-current{
    width:29px;
    height:29px;
  }
}


/* V0.8.19: Fixierte Anforderung – mobile Hauptseitenbilder oben.
   Ziel: Alle Hauptseiten mit Hero-Bild starten mobil mit dem Bild direkt nach dem grünen Orientierungsbalken.
   Der Text bleibt in einer ruhigen Karte nahe am Bild; keine Text-Bild-Überlagerung auf unruhigen Bildbereichen. */
@media (max-width:980px){
  .hero:not(.hero-home){
    padding-top:.55rem!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]){
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual{
    order:-5!important;
    width:100%!important;
    height:clamp(260px,36vh,390px)!important;
    min-height:0!important;
    margin:0 auto!important;
    border:0!important;
    border-radius:30px!important;
    box-shadow:0 20px 46px rgba(24,61,42,.15)!important;
    overflow:hidden!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual picture,
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual figcaption{
    display:none!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) > div:first-child{
    position:relative!important;
    z-index:3!important;
    margin:-1.75rem .55rem 0!important;
    padding:1.02rem 1rem .98rem!important;
    background:rgba(255,253,248,.965)!important;
    border:1px solid rgba(229,220,203,.86)!important;
    border-radius:26px!important;
    box-shadow:0 18px 42px rgba(24,61,42,.11)!important;
    backdrop-filter:blur(10px)!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) h1{
    font-size:clamp(2rem,8.4vw,3rem)!important;
    line-height:1.02!important;
  }
}
@media (max-width:620px){
  .hero:not(.hero-home){
    padding-top:.35rem!important;
    padding-bottom:1.1rem!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual{
    height:clamp(245px,35vh,350px)!important;
    border-radius:0 0 26px 26px!important;
    width:calc(100% + 1.9rem)!important;
    margin-left:-.95rem!important;
    margin-right:-.95rem!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) > div:first-child{
    margin:-1.65rem 0 0!important;
    padding:.94rem .9rem .9rem!important;
    border-radius:24px!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .eyebrow{
    margin-bottom:.34rem!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .sublead{
    font-size:1.02rem!important;
  }
}
@supports not selector(:has(*)){
  @media (max-width:980px){
    .hero:not(.hero-home) .hero-grid{
      display:flex!important;
      flex-direction:column!important;
      gap:0!important;
    }
    .hero:not(.hero-home) .hero-visual[data-hero]{
      order:-5!important;
      height:clamp(260px,36vh,390px)!important;
      min-height:0!important;
      margin:0 auto!important;
      border:0!important;
      border-radius:30px!important;
      overflow:hidden!important;
    }
  }
}


/* V0.8.19: Mobile Menü sauber über Orientierungsbalken.
   Die Seiten-Positionsleiste wird ausgeblendet, sobald das mobile Menü geöffnet ist.
   Die aktuelle Seite wird direkt im mobilen Menü markiert. */
@media (max-width:980px){
  body:has(.mobile-panel[open]) .page-progress,
  html:has(.mobile-panel[open]) .page-progress{
    display:none!important;
  }
  body:has(.mobile-panel[open]) .version-strip .version-wrap,
  html:has(.mobile-panel[open]) .version-strip .version-wrap{
    padding-bottom:.34rem;
  }
}

/* Fallback: Falls :has() nicht greift, liegt das Menü mit sicherem Hintergrund über dem Balken. */
.mobile-panel[open]{
  position:relative;
  z-index:60;
}
.mobile-panel[open] summary{
  position:relative;
  z-index:62;
}
.mobile-panel[open] .mobile-nav,
.mobile-panel[open] nav,
.mobile-panel[open] .mobile-menu-list{
  position:relative;
  z-index:61;
  background:rgba(255,253,248,.98);
  border-radius:22px;
}

.mobile-panel a.mobile-menu-active,
.mobile-menu a.mobile-menu-active,
.mobile-nav a.mobile-menu-active{
  position:relative;
  font-weight:850;
  color:var(--green-dark)!important;
  background:rgba(242,140,40,.12)!important;
  border-color:rgba(242,140,40,.34)!important;
  padding-left:2.25rem!important;
}
.mobile-panel a.mobile-menu-active::before,
.mobile-menu a.mobile-menu-active::before,
.mobile-nav a.mobile-menu-active::before{
  content:"";
  position:absolute;
  left:.9rem;
  top:50%;
  width:.68rem;
  height:.68rem;
  border-radius:999px;
  transform:translateY(-50%);
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,140,40,.16);
}
.mobile-panel a.mobile-menu-active::after,
.mobile-menu a.mobile-menu-active::after,
.mobile-nav a.mobile-menu-active::after{
  content:"";
  position:absolute;
  left:1.18rem;
  top:50%;
  width:.12rem;
  height:1.55rem;
  border-radius:999px;
  transform:translateY(-50%);
  background:rgba(242,140,40,.38);
  opacity:.42;
}

/* V0.8.19: Die mobile Bild-oben-Logik darf nicht auf Desktop/Tablets oberhalb 980px wirken. */
@media (min-width:981px){
  .hero:not(.hero-home) .hero-grid,
  .hero-home .hero-grid{
    display:grid;
  }
}


/* V0.8.19: Desktop-/Tablet-Navigation gezielt auf Stand V0.8.13 zurückgeführt.
   Gilt nur für Web/Tablet. Die mobile Bedienlogik bleibt darunter unverändert. */
@media (min-width:1181px){
  .header-inner{
    display:grid!important;
    grid-template-columns:minmax(142px,172px) minmax(760px,1fr) auto!important;
    align-items:center!important;
    column-gap:clamp(.7rem,1.4vw,1.35rem)!important;
  }
  .brand{
    min-width:0!important;
    width:172px!important;
  }
  .brand img{
    width:clamp(146px,11.4vw,166px)!important;
  }
  .nav{
    display:grid!important;
    grid-template-columns:1fr 1.4fr 1.1fr 1fr 1fr!important;
    align-items:center!important;
    justify-self:center!important;
    width:min(100%,600px)!important;
    gap:.3rem!important;
    font-size:clamp(.75rem,.77vw,.87rem)!important;
  }
  .nav>a,.nav-item.has-dropdown>a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:38px!important;
    text-align:center!important;
    white-space:nowrap!important;
    padding:.38rem .14rem!important;
    border-bottom-width:2px!important;
  }
  .lang{
    justify-self:end!important;
    min-width:72px!important;
  }
  .mobile-menu{
    display:none!important;
  }
}
@media (min-width:981px) and (max-width:1180px){
  .header-inner{
    max-width:var(--max-header)!important;
    display:grid!important;
    grid-template-columns:auto auto auto!important;
    justify-content:space-between!important;
  }
  .nav{display:none!important}
  .mobile-menu{display:block!important}
}

/* V0.8.19: Der Seitenorientierungsbalken ist Handyführung, nicht Desktop-/Tablet-Navigation. */
@media (min-width:901px){
  .version-strip .version-wrap{
    display:block!important;
    text-align:center!important;
    padding:.36rem 1.1rem!important;
  }
  .version-strip .version-text{
    display:block!important;
    max-width:none!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .page-progress{
    display:none!important;
  }
}

/* V0.8.19: Orange Seitenmarkierung verschwindet zuverlässig bei geöffnetem Handy-Menü. */
@media (max-width:900px){
  body.mobile-menu-open .page-progress,
  body:has(.mobile-menu details[open]) .page-progress{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.mobile-menu-open .version-strip .version-wrap,
  body:has(.mobile-menu details[open]) .version-strip .version-wrap{
    padding-bottom:.34rem!important;
  }
  .site-header{
    position:relative;
    z-index:100;
  }
  .mobile-menu details[open]{
    position:relative;
    z-index:500;
  }
  .mobile-menu details[open] .mobile-panel{
    position:absolute;
    z-index:501;
    background:#fffdf8;
  }
}


/* V0.8.19: Mobile Titelbilder ca. 10 % niedriger.
   Nur Handyansicht. Desktop/Tablet bleibt unverändert. */
@media (max-width:980px){
  .hero-home .hero-visual{
    height:clamp(270px,37.8vh,387px)!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual{
    height:clamp(234px,32.4vh,351px)!important;
  }
}
@media (max-width:620px){
  .hero-home .hero-visual{
    height:clamp(257px,36.9vh,351px)!important;
  }
  .hero:not(.hero-home) .hero-grid:has(.hero-visual[data-hero]) .hero-visual{
    height:clamp(221px,31.5vh,315px)!important;
  }
}
@supports not selector(:has(*)){
  @media (max-width:980px){
    .hero:not(.hero-home) .hero-visual[data-hero]{
      height:clamp(234px,32.4vh,351px)!important;
    }
  }
  @media (max-width:620px){
    .hero:not(.hero-home) .hero-visual[data-hero]{
      height:clamp(221px,31.5vh,315px)!important;
    }
  }
}


/* Neuerungen seit V0.8.28 */

/* Kopierfunktion */
.copy-btn{display:inline-flex;align-items:center;gap:.45rem;margin-top:.65rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;font-size:.92rem;font-weight:700;color:var(--green-dark);cursor:pointer;transition:border-color .15s,color .15s}
.copy-btn:hover{border-color:var(--orange);color:var(--orange-dark)}
.copy-btn--done{border-color:var(--green-dark);color:var(--green-dark)}
.copy-icon{font-size:1.05rem}

/* Sonderseiten Navigation */
.version-sonder{font-size:.83rem;color:#fffdf8;opacity:.82}
.version-sonder a{color:#fffdf8;text-decoration:underline;text-underline-offset:3px}

/* Portal-Kacheln vollflächig klickbar */
a.card-link{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .18s,transform .15s}
a.card-link:hover{box-shadow:0 8px 28px rgba(24,61,42,.13);transform:translateY(-2px)}
a.card-link h3{color:var(--green-dark)}
a.card-link:hover h3{color:var(--orange-dark)}
a.card-link .button.text{pointer-events:none;margin-top:.75rem;display:inline-block}

/* Seitenspezifische object-position (neue Bilder seit V0.8.28) */
.hero-visual[data-hero="start"] img{object-position:65% 60%}
.hero-visual[data-hero="objekt"] img{object-position:center center}
.hero-visual[data-hero="assistenz"] img{object-position:center 35%}
.hero-visual[data-hero="mobilitaet"] img{object-position:28% center}
.hero-visual[data-hero="regionen"] img{object-position:55% center}

/* V0.8.36: object-position neue Bilder */
.hero-visual[data-hero="leistungen"] img{object-position:center 35%}
.hero-visual[data-hero="kontakt"] img{object-position:30% center}
.hero-visual[data-hero="portal"] img{object-position:35% center}
.hero-visual[data-hero="sonder"] img{object-position:center center}

/* V0.8.38: Responsive Logo (Desktop mit Claim / Mobile Signet+Schriftzug) */
.brand picture{display:flex;align-items:center}
.brand picture img{width:200px;height:auto;display:block}
@media (max-width:980px){
  .brand picture img{width:185px}
}
@media (max-width:620px){
  .brand picture img{width:150px}
}

/* V0.8.39: Orientierungsleiste (Struktur aus V0.8.36, ohne Versionstext) */
.orient-strip{background:var(--green-dark)}
.orient-strip .wrap{max-width:var(--max);margin:0 auto;padding:.4rem var(--gutter)}
.orient-strip .page-progress{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.orient-strip .progress-dots{
  display:flex;align-items:center;gap:.34rem;
}
.orient-strip .progress-item{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,253,248,.42);
  color:rgba(255,253,248,.82);background:rgba(255,253,248,.08);
  font-size:.58rem;line-height:1;font-weight:850;letter-spacing:.03em;text-decoration:none;
  transition:background .16s,color .16s,border-color .16s,transform .16s;
}
.orient-strip .progress-item:hover,.orient-strip .progress-item:focus-visible{
  background:rgba(255,253,248,.16);color:#fffdf8;border-color:rgba(255,253,248,.78);
}
.orient-strip .progress-item.is-current{
  width:32px;height:32px;background:var(--orange);color:#20150a;
  border-color:rgba(255,253,248,.92);box-shadow:0 0 0 3px rgba(242,140,40,.24);
  transform:translateY(-1px);
}
.orient-strip .progress-turn{
  width:24px;height:24px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,253,248,.7);font-size:.9rem;line-height:1;text-decoration:none;
  transition:color .16s;
}
.orient-strip .progress-turn:hover{color:#fffdf8}
.orient-strip .progress-boundary{color:rgba(255,253,248,.4)}

/* Desktop: ausblenden (Hauptnav reicht) */
@media (min-width:981px){.orient-strip{display:none}}
/* Tablet + Handy: sichtbar */
@media (max-width:980px){
  .orient-strip{display:block}
  .orient-strip .progress-item{width:27px;height:27px;font-size:.55rem}
  .orient-strip .progress-item.is-current{width:31px;height:31px}
}
@media (max-width:620px){
  .orient-strip .wrap{padding:.4rem .5rem}
  .orient-strip .page-progress{gap:.3rem}
  .orient-strip .progress-dots{gap:.26rem}
  .orient-strip .progress-item{width:26px;height:26px;font-size:.52rem}
  .orient-strip .progress-item.is-current{width:30px;height:30px}
  .orient-strip .progress-turn{width:20px;height:20px;font-size:.8rem}
}
/* Bei offenem Mobilmenü ausblenden */
html:has(.mobile-panel[open]) .orient-strip,
body:has(.mobile-menu details[open]) .orient-strip{display:none!important}

/* ============================================================
   V0.8.40 – Sammelkorrekturen
   ============================================================ */

/* PUNKT 2: Eyebrow dominanter/größer (alle Hauptseiten) */
.eyebrow{
  color:var(--orange-dark);
  font-size:1.12rem!important;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:850!important;
  margin:0 0 1rem!important;
}
@media (max-width:620px){
  .eyebrow{font-size:.98rem!important;}
}

/* PUNKT 13: Pilot-Button leicht durchsichtig + Schatten */
.pilot-float{
  position:fixed;
  top:96px;
  right:24px;
  z-index:1200;
  background:rgba(242,140,40,.88);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#20150a;
  font-weight:800;
  font-size:.92rem;
  padding:.7rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(24,61,42,.22),0 2px 8px rgba(242,140,40,.3);
  transition:transform .16s,box-shadow .16s,background .16s;
  white-space:nowrap;
}
.pilot-float:hover,.pilot-float:focus-visible{
  background:rgba(214,118,26,.96);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(24,61,42,.28),0 3px 10px rgba(242,140,40,.4);
}
@media (max-width:980px){
  .pilot-float{top:84px;right:18px;font-size:.86rem;padding:.62rem 1.1rem;}
}
@media (max-width:620px){
  /* V0.8.49: Button oben links, fixed unterhalb der Nav */
  .pilot-float{
    position:fixed;
    top:4.8rem;
    left:12px;
    right:auto;
    bottom:auto;
    font-size:.74rem;
    padding:.44rem .82rem;
    background:rgba(242,140,40,.93);
    box-shadow:0 4px 14px rgba(24,61,42,.28);
    z-index:900;
  }
}

/* PUNKT 8: Hero-Text weiter ins Bild, CTA auf Höhe Bildende */
@media (min-width:981px){
  .hero-grid{
    grid-template-columns:minmax(0,1.32fr) minmax(260px,.68fr)!important;
    align-items:start!important;
  }
  .hero-grid > div:first-child{
    position:relative;
    z-index:2;
    padding-right:2rem;
    grid-column:1 / -1;
    max-width:64%;
  }
  .hero-visual{
    position:absolute!important;
    inset:0 0 0 auto!important;
    width:min(52%,720px)!important;
  }
}

/* PUNKT 15: Kompakter Hero für Rechts-/Sonderseiten (kein leerer Bildbereich) */
.hero-legal{padding-top:2.8rem;padding-bottom:1rem!important}
.hero-legal .hero-grid{
  display:block!important;
  grid-template-columns:1fr!important;
  min-height:0!important;
}
.hero-legal .hero-grid > div:first-child{
  max-width:100%!important;
  padding-right:0!important;
}
.hero-legal .hero-visual{display:none!important}

/* V0.8.59: Vodi-Launcher als rundes Icon-Button (Maskottchen-Badge) */
.assist-float{
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:1250;
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(24,61,42,.32);
  transition:transform .18s,box-shadow .18s;
  animation:assist-pulse 3.5s ease-in-out infinite;
}
.assist-float:hover,.assist-float:focus-visible{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 34px rgba(24,61,42,.4);
}
.assist-icon-img{
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
}
@keyframes assist-pulse{
  0%,100%{box-shadow:0 10px 28px rgba(24,61,42,.32),0 0 0 0 rgba(242,140,40,.16)}
  50%{box-shadow:0 10px 28px rgba(24,61,42,.32),0 0 0 7px rgba(242,140,40,0)}
}
@media (max-width:620px){
  .assist-float{width:52px;height:52px;bottom:16px;right:16px}
}
@media (prefers-reduced-motion:reduce){
  .assist-float{animation:none}
}

/* V0.8.59: Vodi-Welcome-Screen (Einstiegskarte mit Maskottchen) */
.vodi-welcome{display:flex;flex-direction:column;gap:1.1rem}
.vodi-welcome-head{display:flex;align-items:center;gap:1rem}
.vodi-mascot{width:62px;height:auto;flex:none;display:block}
.vodi-welcome-text h3{margin:0 0 .25rem;font-size:1.2rem;color:#1B4D34}
.vodi-welcome-text p{margin:0;font-size:.92rem;color:#4b5b50;line-height:1.4}
.vodi-welcome-actions{display:flex;flex-direction:column;gap:.65rem}
.vodi-cta-primary,.vodi-cta-secondary{
  display:flex;align-items:center;gap:.6rem;
  border-radius:999px;
  padding:.85rem 1.1rem;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  border:1px solid transparent;
  width:100%;
  box-sizing:border-box;
}
.vodi-cta-primary{
  background:#1B4D34;
  color:#fffdf8;
}
.vodi-cta-primary:hover,.vodi-cta-primary:focus-visible{background:#143b27}
.vodi-cta-secondary{
  background:#fff;
  border-color:#e0d8c8;
  color:#1B4D34;
}
.vodi-cta-secondary:hover,.vodi-cta-secondary:focus-visible{border-color:#F28C28;color:#F28C28}
.vodi-cta-icon{width:18px;height:18px;flex:none}
.vodi-cta-chevron{width:14px;height:14px;flex:none;margin-left:auto}
.vodi-cta-secondary span{flex:1}
@media (prefers-reduced-motion:reduce){
  .assist-float,.assist-icon{animation:none}
}

.email-fallback-note{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
.email-fallback-note a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
/* ============================================================
   V0.8.41 – Marko Problem-Assistent Widget
   Statische Entscheidungsbaum-Version ohne KI-Anbindung.
   ============================================================ */
.marko-overlay{
  position:fixed;
  inset:0;
  z-index:1800;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:1.2rem;
  background:rgba(11,29,20,.28);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.marko-overlay[hidden]{display:none!important}
.marko-dialog{
  width:min(100%,470px);
  max-height:min(760px,calc(100vh - 2.4rem));
  overflow:auto;
  background:#fffdf8;
  color:var(--text);
  border:1px solid rgba(27,77,52,.14);
  border-radius:28px;
  box-shadow:0 30px 80px rgba(11,29,20,.34);
}
.marko-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding:1.1rem 1.2rem .85rem;
  background:linear-gradient(135deg,#fffdf8 0%,#f6efe2 100%);
  border-bottom:1px solid rgba(27,77,52,.1);
}
.marko-kicker{
  margin:0 0 .18rem;
  color:var(--orange-dark);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.marko-head h2{margin:0;color:var(--green-dark);font-size:1.35rem;line-height:1.05}
.marko-close{
  border:0;
  background:rgba(27,77,52,.08);
  color:var(--green-dark);
  width:38px;
  height:38px;
  border-radius:999px;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
}
.marko-body{padding:1.15rem 1.2rem .75rem}
.marko-body h3{margin:.2rem 0 .85rem;font-size:1.25rem;line-height:1.22;color:var(--green-dark)}
.marko-intro,.marko-note,.marko-privacy{font-size:.95rem;line-height:1.5;color:var(--muted);margin:.15rem 0 .85rem}
.marko-note{
  background:rgba(46,125,79,.08);
  border:1px solid rgba(46,125,79,.12);
  border-radius:16px;
  padding:.75rem .85rem;
  color:#345040;
}
.marko-options{display:grid;gap:.55rem;margin:.85rem 0 1rem}
.marko-option{
  text-align:left;
  border:1px solid rgba(27,77,52,.14);
  background:#fff;
  color:var(--green-dark);
  border-radius:18px;
  padding:.78rem .92rem;
  font-weight:750;
  line-height:1.28;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(24,61,42,.06);
}
.marko-option:hover,.marko-option:focus-visible{
  border-color:rgba(242,140,40,.42);
  box-shadow:0 7px 18px rgba(24,61,42,.1);
  transform:translateY(-1px);
}
.marko-extra-wrap{
  display:grid;
  gap:.75rem;
  margin-top:.7rem;
  padding:.85rem;
  background:#f8f2e8;
  border-radius:18px;
  border:1px solid rgba(27,77,52,.1);
}
.marko-extra-wrap[hidden]{display:none!important}
.marko-extra-wrap label{
  display:grid;
  gap:.35rem;
  color:var(--green-dark);
  font-size:.88rem;
  font-weight:750;
}
.marko-extra-wrap textarea,.marko-extra-wrap input{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(27,77,52,.18);
  border-radius:14px;
  padding:.75rem .8rem;
  font:inherit;
  color:var(--text);
  background:#fffdf8;
}
.marko-extra-wrap textarea{resize:vertical;min-height:92px}
.marko-summary{margin:.1rem 0 1rem;padding-left:1.2rem;color:var(--text)}
.marko-summary li{margin:.25rem 0}
.marko-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 .4rem}
.marko-actions .button{font-size:.9rem;padding:.68rem .9rem}
.marko-back{
  margin:.4rem 0 0;
  border:0;
  background:transparent;
  color:var(--green-dark);
  font-weight:750;
  cursor:pointer;
  padding:.45rem 0;
}
.marko-foot{
  position:sticky;
  bottom:0;
  display:flex;
  gap:.55rem;
  justify-content:space-between;
  padding:.8rem 1.2rem 1rem;
  background:#fffdf8;
  border-top:1px solid rgba(27,77,52,.1);
}
.marko-link{
  border:0;
  background:transparent;
  color:var(--green-dark);
  font-weight:800;
  font-size:.86rem;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:.25rem;
}
.marko-direct{color:var(--orange-dark)}
body.marko-open{overflow:hidden}
.assist-float .assist-text strong{font-size:1rem}
@media (max-width:620px){
  .marko-overlay{padding:.75rem;align-items:flex-end;justify-content:center}
  .marko-dialog{border-radius:24px;max-height:calc(100vh - 1.5rem)}
  .marko-head{padding:1rem 1rem .75rem}
  .marko-body{padding:1rem .95rem .65rem}
  .marko-foot{padding:.75rem .95rem .9rem;gap:.35rem;flex-wrap:wrap}
  .marko-link{font-size:.8rem}
  .marko-body h3{font-size:1.13rem}
}
@media (prefers-reduced-motion:reduce){
  .marko-option:hover,.marko-option:focus-visible{transform:none}
}


/* V0.8.42: Orientierungsleiste – Pfeile größer + orange (mobil betont) */
@media (max-width:980px){
  .orient-strip .page-progress{gap:.55rem}
  .orient-strip .progress-turn{
    width:34px;height:34px;
    background:rgba(242,140,40,.16);
    border:1px solid rgba(242,140,40,.5);
    color:var(--orange)!important;
    font-size:1.15rem;font-weight:700;
  }
  .orient-strip .progress-turn:hover,
  .orient-strip .progress-turn:focus-visible{
    background:rgba(242,140,40,.32);
    color:#fffdf8!important;
    border-color:rgba(242,140,40,.9);
    transform:scale(1.05);
  }
  .orient-strip .progress-boundary{
    background:rgba(242,140,40,.25)!important;
    border:1px solid rgba(242,140,40,.6)!important;
    color:var(--orange)!important;
    font-weight:800;
  }
  /* progress-item etwas größer auf Handy */
  .orient-strip .progress-item{width:30px;height:30px;font-size:.6rem}
  .orient-strip .progress-item.is-current{
    width:36px;height:36px;font-size:.66rem;
    box-shadow:0 0 0 4px rgba(242,140,40,.32)!important;
  }
}
@media (max-width:620px){
  .orient-strip .wrap{padding:.45rem .5rem}
  .orient-strip .page-progress{gap:.4rem}
  .orient-strip .progress-dots{gap:.3rem}
  .orient-strip .progress-turn{width:32px;height:32px;font-size:1.08rem}
  .orient-strip .progress-item{width:28px;height:28px;font-size:.56rem}
  .orient-strip .progress-item.is-current{width:33px;height:33px;font-size:.62rem}
}

/* Mobile-swipe-hint: bei Erscheinen über der Orientierungsleiste */
.mobile-swipe-hint{
  background:rgba(46,125,79,.96);
  color:#fffdf8;
  font-size:.85rem;
  padding:.45rem var(--gutter,1rem);
  display:none;
}
@media (max-width:900px){
  .mobile-swipe-hint{display:block}
}
.mobile-swipe-hint .container{
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--max);margin:0 auto;gap:.6rem
}
.mobile-swipe-hint a{
  color:var(--orange);font-weight:700;text-decoration:none;
  font-size:.92rem;padding:.25rem .4rem;border-radius:8px;
  transition:background .15s;
}
.mobile-swipe-hint a:hover,.mobile-swipe-hint a:focus-visible{
  background:rgba(242,140,40,.18);
}
.mobile-swipe-hint .disabled{color:rgba(255,253,248,.3);font-size:.92rem;padding:.25rem .4rem}
.mobile-swipe-hint .swipe-label{font-size:.78rem;opacity:.78;flex:1;text-align:center}

/* V0.8.45: Waldbrand-Warnung Pop-up */
.wb-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(20,20,20,.55);
  z-index:9000;
  align-items:flex-end;
  justify-content:center;
  padding:0 0 2rem;
}
.wb-overlay.wb-active{ display:flex; }
.wb-popup{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.28);
  max-width:480px;width:calc(100% - 2rem);
  padding:1.6rem 1.6rem 1.4rem;
  position:relative;
  border-top:5px solid #c0392b;
  animation:wbSlideUp .35s ease;
}
@keyframes wbSlideUp{
  from{transform:translateY(60px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.wb-popup-icon{ font-size:2rem;margin-bottom:.5rem; }
.wb-popup h3{ color:#c0392b;margin:0 0 .5rem;font-size:1.1rem; }
.wb-popup p{ margin:0 0 1rem;font-size:.93rem;color:#333; }
.wb-popup-actions{ display:flex;gap:.7rem;flex-wrap:wrap; }
.wb-popup-actions a.button{ font-size:.88rem;padding:.5rem 1rem; }
.wb-popup-close{
  position:absolute;top:.8rem;right:.9rem;
  background:none;border:none;cursor:pointer;
  font-size:1.3rem;color:#999;line-height:1;
  padding:.2rem .4rem;
}
.wb-popup-close:hover{ color:#333; }

/* V0.8.46: Vodi Dialog — vollständig sichtbar, Drag-to-dismiss */
.vodi-overlay{
  position:fixed;inset:0;
  background:rgba(20,20,20,.52);
  z-index:8000;
  display:flex;align-items:flex-end;justify-content:center;
}
.vodi-overlay[hidden]{ display:none; }
.vodi-dialog{
  background:#fff;
  border-radius:16px 16px 0 0;
  box-shadow:0 -4px 32px rgba(27,77,52,.22);
  width:100%;
  max-width:480px;
  height:75vh;
  max-height:calc(100vh - 2rem);
  display:flex;flex-direction:column;
  overflow:hidden;
  touch-action:none;
  transition:transform .25s ease;
}
@media (min-width:621px){
  /* Desktop/Tablet: nur so hoch wie nötig, aber großzügig */
  .vodi-dialog{
    height:auto;
    min-height:60vh;
    max-height:calc(100vh - 3rem);
    border-radius:16px;
  }
}
/* V0.8.59: Welcome-Screen – Karte nur so hoch wie der Inhalt, nicht 75vh */
.vodi-dialog.vodi-compact{
  height:auto;
  min-height:0;
  max-height:calc(100vh - 2rem);
}
.vodi-head{
  background:#1B4D34;
  color:#fff;
  padding:1rem 1rem .9rem;
  display:flex;align-items:center;justify-content:space-between;
  cursor:grab;
  user-select:none;
  flex-shrink:0;
}
.vodi-head:active{ cursor:grabbing; }
.vodi-head::before{
  content:'';
  display:block;
  width:36px;height:4px;
  background:rgba(255,255,255,.35);
  border-radius:2px;
  position:absolute;
  top:.5rem;left:50%;transform:translateX(-50%);
}
.vodi-kicker{ font-size:.72rem;opacity:.7;margin:0; }
.vodi-head h2{ margin:0;font-size:1.1rem; }
.vodi-close{
  background:none;border:none;color:#fff;
  font-size:1.4rem;cursor:pointer;
  padding:.2rem .4rem;opacity:.8;
}
.vodi-close:hover{ opacity:1; }
.vodi-body{
  padding:1.1rem;
  overflow-y:auto;
  flex:1;
  font-size:1rem;
  line-height:1.5;
}
.vodi-body h3,.vodi-body h2{ font-size:1.15rem;margin:1rem 0 .7rem; }
.vodi-options{
  display:flex;flex-wrap:wrap;gap:.55rem;margin:.4rem 0 .2rem;
}
.vodi-option{
  background:#f4efe6;
  border:1px solid #e0d8c8;
  border-radius:12px;
  padding:.7rem 1rem;
  font-size:.95rem;
  color:#1B4D34;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  line-height:1.3;
}
.vodi-option:hover,.vodi-option:focus-visible{
  background:#fff;
  border-color:#F28C28;
}
.vodi-foot{
  padding:.7rem 1rem;
  border-top:1px solid #eee;
  display:flex;gap:.5rem;flex-wrap:wrap;
  flex-shrink:0;
}

/* V0.8.46: Swipe-Feedback — Navigationspfeile */
.nav-arrow.swipe-active{
  color:#F28C28 !important;
  transform:scale(1.25);
  transition:transform .1s ease, color .1s ease;
}
.nav-dot.swipe-end{
  background:#F28C28 !important;
  transform:scale(1.3);
  transition:transform .1s ease, background .1s ease;
}

/* V0.8.61: Vodi-Footer-Links (Vertiefen / Anders einsteigen / Direkt schreiben) */
.vodi-link{
  background:none;
  border:none;
  color:#1B4D34;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  padding:.4rem .55rem;
  border-radius:8px;
  text-decoration:none;
  transition:background .15s,color .15s;
}
.vodi-link:hover,.vodi-link:focus-visible{
  background:#f4efe6;
  color:#F28C28;
}
.vodi-direct{
  margin-left:auto;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* === V0.8.56 Ergänzungen === */

@media (max-width:620px){
  /* V0.8.56: Pilot-Button ins Hero-Bild – nicht oben über Nav */
  .pilot-float{
    top:auto;
    bottom:calc(100vh - 76vw - 3.2rem);  /* ca. Bildmitte/unteres Drittel */
    left:50%;
    right:auto;
    transform:translateX(-50%);
    font-size:.78rem;
    padding:.5rem 1.1rem;
    background:rgba(242,140,40,.96);
    box-shadow:0 4px 18px rgba(24,61,42,.35);
    z-index:900;
    white-space:nowrap;
  }
}

/* V0.8.56: Vodi – sanftes Slide-In von unten */
.vodi-overlay{
  transition: opacity .3s ease;
  opacity: 0;
}
.vodi-overlay.vodi-visible{
  opacity: 1;
}
.vodi-dialog{
  transform: translateY(60px);
  transition: transform .38s cubic-bezier(.22,.72,.36,1), opacity .32s ease;
  opacity: 0;
}
.vodi-overlay.vodi-visible .vodi-dialog{
  transform: translateY(0);
  opacity: 1;
}

/* V0.8.56-pilot: Pilot-Button auf Mobil in hero-visual (links oben auf dem Bild) */
@media (max-width:620px){
  .pilot-float{
    /* Standard: fixed bleibt für Desktop/Tablet */
    /* Wird per JS in .hero-visual verschoben → dann absolute */
  }
  .hero-visual .pilot-float{
    position:absolute !important;
    top:.9rem !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    font-size:.74rem;
    padding:.44rem .88rem;
    background:rgba(242,140,40,.93);
    box-shadow:0 3px 12px rgba(24,61,42,.32);
    z-index:20;
    white-space:nowrap;
    /* Kein fixed – scrollt mit dem Hero-Bild */
  }
}

/* V0.8.58: feature-map-text – Karte liegt als Hintergrund hinter dem Text (Bild mit Hell-Verlauf links) */
.feature.feature-map-text{
  display:block;
  position:relative;
  padding:0;
  aspect-ratio:1672/941;
  overflow:hidden;
}
.feature.feature-map-text .feature-text{
  position:relative;
  z-index:1;
  max-width:46%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2.2rem 1rem 2.2rem 2.4rem;
}
.feature.feature-map-text .regions-map{
  position:absolute;
  inset:0;
  margin:0;
  z-index:0;
}
.feature.feature-map-text .regions-map picture,
.feature.feature-map-text .regions-map img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  display:block;
}
.feature.feature-map-text .regions-map figcaption{
  position:absolute;
  right:1.1rem;
  left:auto;
  bottom:1.1rem;
  max-width:46%;
  background:rgba(18,56,38,.78);
  color:#fffdf8;
  border-radius:14px;
  padding:.55rem .75rem;
  font-size:.78rem;
  text-align:right;
  backdrop-filter:blur(8px);
  margin:0;
}
@media (max-width:860px){
  .feature.feature-map-text{
    display:block;
    position:static;
    aspect-ratio:auto;
    padding:1.15rem;
    background:linear-gradient(135deg,#fffdf8,#f4eadb);
  }
  .feature.feature-map-text .feature-text{
    position:static;
    max-width:100%;
    height:auto;
    padding:0;
  }
  .feature.feature-map-text .regions-map{
    position:static;
    order:-1;
    margin:0 0 1rem;
    border-radius:26px;
    overflow:hidden;
    height:260px;
  }
  .feature.feature-map-text .regions-map img{
    height:260px;
    object-fit:cover;
    object-position:center;
    border-radius:26px;
  }
  .feature.feature-map-text .regions-map figcaption{
    position:static;
    max-width:100%;
    text-align:center;
    background:transparent;
    color:#666;
    padding:.5rem 0 0;
    backdrop-filter:none;
  }
}

/* V0.8.68 Navigationskonzept: Leistungen-Dropdown (Desktop/Tablet) */
.nav-item.has-dropdown{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%}
.nav-item.has-dropdown>a{display:inline-flex;align-items:center;gap:.3rem}
.nav-item.has-dropdown>a::after{content:"";display:inline-block;width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav-dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:240px;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:.45rem;
  margin-top:.4rem;
  z-index:20;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-item.has-dropdown.open .nav-dropdown{display:block}
.nav-dropdown a{
  display:block;
  padding:.55rem .7rem;
  border-radius:10px;
  border-bottom:none;
  white-space:nowrap;
  color:var(--green-dark);
  font-weight:600;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{background:var(--sand);color:var(--orange-dark)}
.nav-dropdown a.active{color:var(--orange-dark);background:var(--green-soft)}
/* V0.8.70: die drei Leistungskern-Seiten im Dropdown farblich absetzen */
.nav-dropdown a.dropdown-core:not(.active){
  background:#fff7eb;
  border-left:3px solid var(--orange);
  padding-left:.55rem;
}
.nav-dropdown a.dropdown-core:not(.active):hover,
.nav-dropdown a.dropdown-core:not(.active):focus-visible{background:var(--sand)}

/* V0.8.68 Navigationskonzept: Gruppierte mobile Menüpunkte */
.mobile-menu-group{
  display:block;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  padding:.6rem .75rem .1rem;
}
.mobile-panel a.mobile-sub{padding-left:1.5rem;font-size:.94rem}
/* V0.8.70: dieselbe Hervorhebung der drei Leistungskern-Seiten im mobilen Menü */
.mobile-panel a.mobile-sub.mobile-sub-core:not(.mobile-menu-active){
  background:#fff7eb;
  border-left:3px solid var(--orange);
}

/* ============================================================
   V0.8.71 – Navigations- und Mobil-Korrekturen
   ============================================================ */

/* 1. Dropdown hover-flicker: unsichtbare Brücke füllt den Spalt zwischen
      Trigger und Panel – Cursor verlässt .has-dropdown nicht mehr beim
      Überqueren des margin-top-Abstands */
.nav-item.has-dropdown::after{
  content:'';
  position:absolute;
  top:100%;
  left:0;right:0;
  height:.6rem;
}

/* 2. Orient-Strip (Mobil): Pfeile an die Außenkanten, Dot-Buttons zentriert */
@media (max-width:980px){
  .orient-strip .page-progress{justify-content:space-between;gap:0;}
  .orient-strip .progress-dots{flex:1;justify-content:center;gap:.3rem;}
}
@media (max-width:620px){
  .orient-strip .progress-dots{gap:.26rem;}
}

/* 3. Pilot-Button mobil: links oben im Hero-Bild statt mittig */
@media (max-width:620px){
  .hero-visual .pilot-float{
    left:.6rem !important;
    transform:none !important;
  }
}

/* ============================================================
   V0.8.72 – Symbole Orientierungsleiste deutlich größer
   ============================================================ */

/* Bisherige font-size war ~0.6rem (für 2 Buchstaben optimiert).
   Mit einzelnen Unicode-Symbolen passt 1.1rem gut in die 30-36px-Kreise. */
.orient-strip .progress-item{font-size:1.1rem!important;line-height:1!important;}
.orient-strip .progress-item.is-current{font-size:1.2rem!important;}
@media (max-width:620px){
  .orient-strip .progress-item{font-size:1.0rem!important;}
  .orient-strip .progress-item.is-current{font-size:1.1rem!important;}
}

/* ============================================================
   V0.8.73 – Hero-Fade, Eyebrow prominenter, Orient-Strip hell
   ============================================================ */

/* 1. Hero-Titelbild: sanfter Übergang nach links (Desktop) */
@media (min-width:981px){
  .hero-visual::after{
    content:'';
    position:absolute;
    top:0;left:0;bottom:0;
    width:52%;
    background:linear-gradient(to right, #fffdf8 0%, rgba(255,253,248,.6) 55%, transparent 100%);
    pointer-events:none;
    z-index:1;
  }
}

/* 2. Eyebrow etwas prominenter */
.eyebrow{font-size:1.22rem!important;}
@media (max-width:620px){.eyebrow{font-size:1.06rem!important;}}

/* 3. Orient-Strip: heller Hintergrund + Text-Label-Pills */
/* Hintergrund von dunkelgrün auf Sand umstellen */
.orient-strip{
  background:var(--sand)!important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* Pill-Buttons: auto-Breite, dunkles Grün auf hellem Grund */
.orient-strip .progress-item{
  width:auto!important;height:auto!important;
  padding:.27rem .68rem!important;
  font-size:.72rem!important;font-weight:700!important;
  letter-spacing:.01em!important;line-height:1.2!important;
  color:var(--green-dark)!important;
  background:transparent!important;
  border:1.5px solid rgba(31,91,58,.28)!important;
  box-shadow:none!important;transform:none!important;
}
.orient-strip .progress-item:hover,
.orient-strip .progress-item:focus-visible{
  background:rgba(31,91,58,.08)!important;
  color:var(--green-dark)!important;
  border-color:rgba(31,91,58,.5)!important;
  transform:none!important;
}
.orient-strip .progress-item.is-current{
  background:var(--orange)!important;
  color:#20150a!important;
  border-color:var(--orange)!important;
  box-shadow:0 0 0 3px rgba(242,140,40,.2)!important;
  transform:translateY(-1px)!important;
}
/* Pfeile: dunkelgrün statt orange, passend zum hellen Hintergrund */
.orient-strip .progress-turn{
  color:var(--green-dark)!important;
  background:transparent!important;
  border:1.5px solid rgba(31,91,58,.28)!important;
  width:30px!important;height:30px!important;
  font-size:.9rem!important;
}
.orient-strip .progress-turn:hover,
.orient-strip .progress-turn:focus-visible{
  background:rgba(31,91,58,.08)!important;
  color:var(--green-dark)!important;
  border-color:rgba(31,91,58,.5)!important;
  transform:none!important;
}
.orient-strip .progress-boundary{
  color:var(--muted)!important;
  background:transparent!important;
  border:none!important;
  font-size:1rem!important;
  width:20px!important;height:auto!important;
}
@media (max-width:620px){
  .orient-strip .progress-item{
    padding:.22rem .52rem!important;
    font-size:.66rem!important;
  }
  .orient-strip .progress-turn{width:26px!important;height:26px!important;font-size:.82rem!important;}
}

/* ============================================================
   V0.8.74 – Hero-Rahmen weg, Mobil-Trennlinie, Orient aktiv,
              Card-Link erkennbar interaktiv
   ============================================================ */

/* 1. Hero-Titelbild: inset box-shadow (Rahmen) und Maske entfernen
      Die V0.8.73-Gradient-Regel überschreibt z-index + background, lässt aber
      box-shadow:inset und -webkit-mask-image aus Zeile ~490 noch durch.
      Hier explizit auf none setzen, damit auf Desktop kein Rand mehr sichtbar. */
@media (min-width:981px){
  .hero-visual::after{
    box-shadow:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    border-radius:0!important;
  }
}

/* 2. Mobile-Navigation: feiner Trennstrich vor "Weitere Bereiche"
      Trifft die zweite .mobile-menu-group (allg. Geschwister-Selektor ~)
      → nur "Weitere Bereiche", nicht "Leistungen". Kein HTML-Eingriff nötig. */
.mobile-panel .mobile-menu-group ~ .mobile-menu-group{
  margin-top:.75rem;
  padding-top:.65rem;
  border-top:1px solid var(--line);
}

/* 3. Orient-Strip aktiver Button: orange → dunkelgrün
      Überschreibt den V0.8.73-Block (gleiche Spezifität, kommt später). */
.orient-strip .progress-item.is-current{
  background:var(--green-dark)!important;
  color:#fffdf8!important;
  border-color:var(--green-dark)!important;
  box-shadow:0 0 0 3px rgba(31,91,58,.18)!important;
  transform:translateY(-1px)!important;
}

/* 4. Card-Link: interaktives Grunddesign
      .card-link (= <a class="card card-link">) bekommt eine sichtbar stärkere
      Umrandung und einen dezenten Schatten, damit die Kachel schon im Ruhezustand
      als klickbar erkennbar ist. Der .button.text-Pfeil macht es noch deutlicher.
      Nicht-verlinkte .card-Elemente behalten die schmalere Umrandung. */
a.card-link{
  border-width:1.5px!important;
  border-color:rgba(31,91,58,.24)!important;
  box-shadow:0 3px 14px rgba(18,56,38,.09)!important;
}
a.card-link:hover{
  border-color:var(--orange)!important;
  box-shadow:0 10px 32px rgba(24,61,42,.16)!important;
  transform:translateY(-3px)!important;
}
a.card-link .button.text{
  color:var(--orange-dark)!important;
  font-weight:700!important;
}
a.card-link .button.text::after{
  content:"\00a0\2192";
}
a.card-link:hover .button.text{
  color:var(--orange)!important;
}

/* V0.8.77 – Orient-Strip: aktiver Button auf Handy etwas kleiner als Desktop,
   aber sichtbar größer als inaktive Pills */
@media (max-width:620px){
  .orient-strip .progress-item.is-current{
    padding:.26rem .62rem!important;
    font-size:.7rem!important;
  }
}

/* ============================================================
   V0.8.75 – Vodi: schwebendes Panel rechts unten (Desktop),
              Einblendung aus V-Button-Ecke, 2D-verschiebbar
   ============================================================ */

/* Desktop (≥621px): kein modales Overlay, schwebendes Fenster */
@media (min-width:621px){
  /* Overlay als transparente, nicht-blockierende Fläche */
  .vodi-overlay{
    background:transparent!important;
    pointer-events:none!important;
    display:block!important;
  }
  /* Dialog fixiert rechts unten, oberhalb des V-Buttons */
  .vodi-dialog{
    position:fixed!important;
    bottom:5.5rem!important;
    right:1.5rem!important;
    left:auto!important;
    top:auto!important;
    width:360px!important;
    max-width:calc(100vw - 3rem)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 7rem)!important;
    border-radius:16px!important;
    pointer-events:all!important;
    box-shadow:0 8px 40px rgba(27,77,52,.28)!important;
  }
  /* Einblend-Animation: wächst aus der rechten unteren Ecke heraus */
  .vodi-dialog{
    transform:translateY(24px) scale(.93)!important;
    transform-origin:bottom right!important;
  }
  .vodi-overlay.vodi-visible .vodi-dialog{
    transform:translateY(0) scale(1)!important;
  }
}



/* ============================================================
   V0.8.79 – Schritt 4: Sprachumschalter + Footer-Sicherheitslinks
   ============================================================ */

/* 4.1 Sprachumschalter DE | EN | HR – gleichmäßige Abstände, feste Breite
   gegen Layoutsprünge, aktiver Zustand als dezente Pille, mobil gut tippbar */
.lang{gap:.5rem!important;min-width:122px;justify-content:flex-end}
.lang span{opacity:.35}
.lang a{min-width:1.9em;text-align:center;padding:.22rem .3rem;border-radius:7px;line-height:1.2;border-bottom:none!important}
.lang a:hover,.lang a:focus-visible{background:rgba(31,91,58,.08);color:var(--green-dark)}
.lang a.active{background:var(--green-soft);color:var(--green-dark);font-weight:700}
@media (max-width:620px){
  .lang{min-width:112px;gap:.38rem!important}
  .lang a{padding:.3rem .34rem;min-width:2em}
}

/* 4.2 Footer: Sicherheitslinks gebündelt unter aufklappbarem Titel */
.footer-safety summary{cursor:pointer;font-weight:600;padding:.15rem 0}
.footer-safety summary:hover{color:#fffdf8}
.footer-safety[open] summary{margin-bottom:.4rem}
.footer-safety a{display:inline-block;padding:.1rem 0}

/* V0.8.79 – Fix: Unsichtbarer Vodi-Dialog blockierte Klicks auf Footer-Links (Desktop).
   Der V0.8.75-Block gibt .vodi-dialog dauerhaft pointer-events:all – auch geschlossen
   (opacity 0). Geschlossen darf der Dialog keine Klicks abfangen; [hidden] muss wieder
   greifen trotz display:block!important im Desktop-Block. */
@media (min-width:621px){
  .vodi-overlay:not(.vodi-visible) .vodi-dialog{pointer-events:none!important}
  .vodi-overlay[hidden]{display:none!important}
}