: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.two{grid-template-columns:repeat(2,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.4fr 1fr 1fr;gap:1.4rem}.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.four{grid-template-columns:1fr 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.four{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.24: 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.24: 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.24: 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{
  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.24: 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.24: 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.24: 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);
}
.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.24: 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.24: 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.24: 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.24: 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.24: 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:.68fr .95fr 1.16fr 1.58fr 1.84fr .86fr .78fr;
    align-items:center;
    justify-self:center;
    width:min(100%,850px);
    gap:.16rem;
    font-size:clamp(.75rem,.77vw,.87rem);
  }
  .nav 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.24: Mobile Swipe Transition Test
   Aktuelle Seite wird beim Wischen mitgeführt; beim Zurückwischen kommt die vorherige Seite als weiche Overlay-Vorschau herein. */
.page-swipe-preview{
  display:none;
}
@media (max-width:900px){
  main,
  .site-footer,
  .mobile-swipe-hint{
    will-change:transform,opacity;
    transform:translate3d(0,0,0);
  }
  body.page-swipe-active{
    overflow-x:hidden;
    touch-action:pan-y;
  }
  body.page-swipe-active main,
  body.page-swipe-active .site-footer,
  body.page-swipe-active .mobile-swipe-hint{
    transition:none;
  }
  body.page-swipe-next main,
  body.page-swipe-next .site-footer,
  body.page-swipe-next .mobile-swipe-hint{
    transform:translate3d(var(--swipe-x),0,0);
    opacity:var(--swipe-opacity);
    position:relative;
    z-index:2;
  }
  body.page-swipe-prev main,
  body.page-swipe-prev .site-footer,
  body.page-swipe-prev .mobile-swipe-hint{
    opacity:var(--swipe-opacity);
  }
  body.page-swipe-reset main,
  body.page-swipe-reset .site-footer,
  body.page-swipe-reset .mobile-swipe-hint,
  body.page-swipe-commit main,
  body.page-swipe-commit .site-footer,
  body.page-swipe-commit .mobile-swipe-hint{
    transition:transform .18s ease, opacity .18s ease;
  }
  .page-swipe-preview{
    position:fixed;
    inset:0;
    display:block;
    pointer-events:none;
    opacity:0;
    z-index:1;
    background:
      radial-gradient(circle at 78% 22%, rgba(242,140,40,.12), transparent 28%),
      linear-gradient(135deg, rgba(255,253,248,.98), rgba(246,239,228,.98));
    transition:opacity .16s ease, transform .16s ease;
  }
  body.page-swipe-active .page-swipe-preview{
    opacity:calc(.18 + (var(--swipe-progress) * .54));
  }
  body.page-swipe-prev .page-swipe-preview{
    z-index:30;
    transform:translate3d(calc(-100vw + max(0px,var(--swipe-x))),0,0);
    box-shadow:18px 0 40px rgba(18,56,38,.16);
    opacity:calc(.10 + (var(--swipe-progress) * .78));
  }
  body.page-swipe-next .page-swipe-preview{
    z-index:1;
    transform:translate3d(0,0,0);
  }
  body.page-swipe-commit.page-swipe-prev .page-swipe-preview{
    transform:translate3d(0,0,0);
    opacity:1;
  }
  .page-swipe-preview-card{
    position:absolute;
    left:50%;
    top:52%;
    transform:translate(-50%,-50%);
    width:min(78vw,340px);
    border:1px solid rgba(31,91,58,.17);
    border-radius:26px;
    padding:1.05rem 1rem;
    background:rgba(255,253,248,.9);
    box-shadow:0 18px 46px rgba(18,56,38,.10);
    text-align:center;
    color:var(--green-dark);
  }
  .page-swipe-preview-kicker{
    display:block;
    color:var(--muted);
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:800;
    margin-bottom:.35rem;
  }
  .page-swipe-preview-card strong{
    display:block;
    font-size:1.2rem;
    line-height:1.2;
  }
  .mobile-swipe-hint{
    font-size:.78rem;
    padding:6px 0;
  }
  .mobile-swipe-hint .swipe-label{
    opacity:.78;
  }
}
@media (prefers-reduced-motion:reduce){
  body.page-swipe-active main,
  body.page-swipe-active .site-footer,
  body.page-swipe-active .mobile-swipe-hint,
  .page-swipe-preview{
    transition:none!important;
  }
}


/* V0.8.24: 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.24: 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.24: 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.24: 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.24: 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.24: 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:.68fr .95fr 1.16fr 1.58fr 1.84fr .86fr .78fr!important;
    align-items:center!important;
    justify-self:center!important;
    width:min(100%,850px)!important;
    gap:.16rem!important;
    font-size:clamp(.75rem,.77vw,.87rem)!important;
  }
  .nav 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.24: 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.24: 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.24: 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;
    }
  }
}


/* V0.8.24: Sprachwechsel als ruhiges Überblenden statt Scrollpositions-Wiederherstellung. */
html.lang-switch-leaving body,
body.lang-switch-leaving{
  opacity:.18;
  transition:opacity .16s ease;
}
html.lang-switch-entering body,
body.lang-switch-entering{
  animation:ur2LangFadeIn .24s ease both;
}
@keyframes ur2LangFadeIn{
  from{opacity:.18}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  html.lang-switch-leaving body,
  body.lang-switch-leaving,
  html.lang-switch-entering body,
  body.lang-switch-entering{
    opacity:1!important;
    animation:none!important;
    transition:none!important;
  }
}

/* V0.8.24: robuster Mobile-Menü-Overlay-Fix.
   Wenn das Menü geöffnet ist, darf kein orangefarbener Orientierungsmarker über dem Menü liegen. */
@media (max-width:900px){
  body.mobile-menu-open .version-strip,
  body:has(.mobile-menu details[open]) .version-strip{
    position:relative!important;
    z-index:1!important;
  }
  body.mobile-menu-open .page-progress,
  body.mobile-menu-open .progress-item,
  body.mobile-menu-open .progress-item.is-current,
  body:has(.mobile-menu details[open]) .page-progress,
  body:has(.mobile-menu details[open]) .progress-item,
  body:has(.mobile-menu details[open]) .progress-item.is-current{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .mobile-menu{
    position:relative!important;
    z-index:1000!important;
  }
  .mobile-menu details{
    position:relative!important;
    z-index:1001!important;
  }
  .mobile-menu details[open]{
    z-index:1200!important;
  }
  .mobile-menu details[open] summary{
    position:relative!important;
    z-index:1202!important;
  }
  .mobile-menu details[open] .mobile-panel{
    position:absolute!important;
    top:calc(100% + .45rem)!important;
    right:0!important;
    left:auto!important;
    z-index:1201!important;
    background:#fffdf8!important;
    border:1px solid rgba(31,91,58,.16)!important;
    border-radius:22px!important;
    box-shadow:0 22px 60px rgba(18,56,38,.22)!important;
  }
  .mobile-menu details[open] .mobile-panel::before{
    content:"";
    position:absolute;
    inset:-.5rem;
    z-index:-1;
    border-radius:28px;
    background:rgba(255,253,248,.98);
  }
}


/* V0.8.24: Hero-Textfluss Desktop/Tablet + Mobile-Zentrierung
   Desktop/Tablet: Nicht nur der Seitentitel, sondern auch Subline und Beschreibung laufen in den ruhigen Bildauslauf.
   Mobile: Bild bleibt oben, Textkarte darunter wird zentrierter und kompakter. */
@media (min-width:981px){
  .hero .hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    min-height:clamp(520px,58vh,690px);
  }
  .hero .hero-grid > div:first-child{
    position:relative;
    z-index:3;
    width:min(62vw,780px);
    max-width:780px;
    padding:clamp(1.2rem,2.3vw,2.4rem) 0;
  }
  .hero .hero-grid .hero-visual[data-hero],
  .hero .hero-grid .hero-visual{
    position:absolute;
    z-index:1;
    top:50%;
    right:0;
    transform:translateY(-50%);
    width:min(74vw,1120px);
    height:clamp(390px,47vh,560px);
    min-height:0;
    margin:0;
    border:0;
    border-radius:0 32px 32px 0;
    box-shadow:none;
    overflow:hidden;
  }
  .hero .hero-grid .hero-visual[data-hero]::before,
  .hero .hero-grid .hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
      linear-gradient(90deg,
        rgba(255,253,248,1) 0%,
        rgba(255,253,248,.98) 22%,
        rgba(255,253,248,.88) 39%,
        rgba(255,253,248,.56) 53%,
        rgba(255,253,248,.20) 67%,
        rgba(255,253,248,0) 82%);
  }
  .hero .hero-grid .hero-visual picture,
  .hero .hero-grid .hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .hero .hero-grid .hero-visual figcaption{
    z-index:4;
  }
  .hero .hero-grid .sublead{
    max-width:min(44vw,600px);
  }
  .hero .hero-grid p:not(.sublead):not(.caption):not(.version-text){
    max-width:min(44vw,610px);
  }
  .hero .hero-grid .cta-row,
  .hero .hero-grid .hint{
    max-width:min(46vw,650px);
  }
  .hero-home .hero-grid > div:first-child{
    width:min(64vw,800px);
  }
}

@media (min-width:981px) and (max-width:1180px){
  .hero .hero-grid{
    min-height:clamp(500px,56vh,650px);
  }
  .hero .hero-grid > div:first-child{
    width:min(66vw,700px);
  }
  .hero .hero-grid .hero-visual[data-hero],
  .hero .hero-grid .hero-visual{
    width:min(76vw,980px);
    height:clamp(360px,45vh,520px);
  }
  .hero .hero-grid .sublead,
  .hero .hero-grid p:not(.sublead):not(.caption):not(.version-text){
    max-width:min(50vw,560px);
  }
  .hero .hero-grid .cta-row,
  .hero .hero-grid .hint{
    max-width:min(52vw,600px);
  }
}

/* Mobile: Zentrierte, ruhigere Textkarte unter dem Bild. */
@media (max-width:980px){
  .hero .hero-grid:has(.hero-visual[data-hero]) > div:first-child,
  .hero-home .hero-grid > div:first-child{
    text-align:center!important;
  }
  .hero .hero-grid:has(.hero-visual[data-hero]) .eyebrow,
  .hero-home .eyebrow{
    justify-content:center!important;
    text-align:center!important;
  }
  .hero .hero-grid:has(.hero-visual[data-hero]) h1,
  .hero-home h1{
    text-align:center!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero .hero-grid:has(.hero-visual[data-hero]) .sublead,
  .hero .hero-grid:has(.hero-visual[data-hero]) p,
  .hero-home .sublead,
  .hero-home p{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero .hero-grid:has(.hero-visual[data-hero]) .cta-row,
  .hero-home .cta-row{
    justify-content:center!important;
  }
  .hero .hero-grid:has(.hero-visual[data-hero]) .hint,
  .hero-home .hint{
    text-align:left!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@supports not selector(:has(*)){
  @media (max-width:980px){
    .hero:not(.hero-home) .hero-grid > div:first-child{
      text-align:center!important;
    }
    .hero:not(.hero-home) .eyebrow,
    .hero:not(.hero-home) h1,
    .hero:not(.hero-home) .sublead,
    .hero:not(.hero-home) p{
      text-align:center!important;
      margin-left:auto!important;
      margin-right:auto!important;
    }
    .hero:not(.hero-home) .cta-row{
      justify-content:center!important;
    }
  }
}


/* V0.8.24: Mobiler Fixheader + dezente Blätterpfeile im Orientierungsbalken.
   Header + grüner Balken bleiben auf Handy oben stehen. Desktop/Tablet bleibt unverändert. */
@media (max-width:900px){
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1100!important;
    background:#fffdf8!important;
    box-shadow:0 10px 28px rgba(18,56,38,.08)!important;
  }
  .version-strip{
    position:sticky!important;
    top:var(--mobile-header-height, 76px)!important;
    z-index:1090!important;
    box-shadow:0 10px 24px rgba(18,56,38,.10)!important;
  }
  body{
    scroll-padding-top:148px;
  }
  .version-strip .version-wrap{
    grid-template-columns:1fr!important;
    gap:.18rem!important;
    padding:.25rem .72rem .34rem!important;
  }
  .version-strip .version-text{
    font-size:.62rem!important;
    line-height:1.15!important;
    opacity:.72!important;
  }
  .page-progress{
    display:grid!important;
    grid-template-columns:34px minmax(0,auto) 34px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:.42rem!important;
    width:100%!important;
  }
  .progress-dots{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:.30rem!important;
    min-width:0!important;
  }
  .progress-turn{
    width:30px!important;
    height:30px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    justify-self:center!important;
    border:1px solid rgba(255,253,248,.34)!important;
    background:rgba(255,253,248,.06)!important;
    color:rgba(255,253,248,.72)!important;
    font-size:1.25rem!important;
    line-height:1!important;
    font-weight:800!important;
    text-decoration:none!important;
    transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease!important;
  }
  .progress-turn:hover,
  .progress-turn:focus-visible{
    background:rgba(255,253,248,.14)!important;
    color:#fffdf8!important;
    border-color:rgba(255,253,248,.72)!important;
  }
  .progress-turn:active{
    transform:scale(.96)!important;
  }
  .progress-boundary{
    font-size:.88rem!important;
    color:rgba(255,253,248,.44)!important;
    background:rgba(255,253,248,.03)!important;
    border-color:rgba(255,253,248,.20)!important;
  }
  .progress-item{
    flex:0 0 auto!important;
  }
}

/* Kleine Handys: mehr Luft für Pfeile durch etwas kleinere Platzhalter. */
@media (max-width:380px){
  .page-progress{
    grid-template-columns:30px minmax(0,auto) 30px!important;
    gap:.28rem!important;
  }
  .progress-dots{
    gap:.20rem!important;
  }
  .progress-turn{
    width:28px!important;
    height:28px!important;
  }
}

/* V0.8.24: Wenn Menü geöffnet ist, bleibt der Orientierungsbereich unsichtbar und unter dem Menü. */
@media (max-width:900px){
  body.mobile-menu-open .version-strip,
  body:has(.mobile-menu details[open]) .version-strip{
    z-index:900!important;
  }
  body.mobile-menu-open .page-progress,
  body.mobile-menu-open .progress-dots,
  body.mobile-menu-open .progress-turn,
  body.mobile-menu-open .progress-item,
  body.mobile-menu-open .progress-item.is-current,
  body:has(.mobile-menu details[open]) .page-progress,
  body:has(.mobile-menu details[open]) .progress-dots,
  body:has(.mobile-menu details[open]) .progress-turn,
  body:has(.mobile-menu details[open]) .progress-item,
  body:has(.mobile-menu details[open]) .progress-item.is-current{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

/* Headerhöhe dynamisch per JS wäre übertrieben; Standardwerte sind für aktuelle mobile Leiste ausreichend.
   Falls Endversion Text im grünen Balken entfernt, kann top/scroll-padding reduziert werden. */


/* V0.8.24: Mobile Blätterpfeile größer, klarer, mit breiteren Tippflächen und Swipe-Feedback. */
@media (max-width:900px){
  .page-progress{
    grid-template-columns:minmax(52px,1fr) auto minmax(52px,1fr)!important;
    gap:.76rem!important;
    padding:0 .05rem!important;
  }
  .progress-dots{
    gap:.34rem!important;
  }
  .progress-turn{
    position:relative!important;
    width:46px!important;
    height:36px!important;
    min-width:46px!important;
    border-radius:999px!important;
    font-size:1.62rem!important;
    background:rgba(255,253,248,.11)!important;
    border-color:rgba(255,253,248,.48)!important;
    color:rgba(255,253,248,.88)!important;
    box-shadow:0 0 0 0 rgba(242,140,40,0)!important;
  }
  .progress-prev{
    justify-self:stretch!important;
    justify-content:flex-start!important;
    padding-left:.62rem!important;
  }
  .progress-next{
    justify-self:stretch!important;
    justify-content:flex-end!important;
    padding-right:.62rem!important;
  }
  .progress-boundary{
    font-size:1.08rem!important;
    color:rgba(255,253,248,.56)!important;
    background:rgba(255,253,248,.055)!important;
    border-color:rgba(255,253,248,.28)!important;
  }
  .progress-turn span{
    transform:translateY(-1px);
  }

  /* Vergrößerte Trefferfläche im freien grünen Bereich links/rechts. */
  .progress-turn::before{
    content:"";
    position:absolute;
    inset:-8px -18px;
    border-radius:999px;
  }

  /* Feedback beim Wischen in eine gültige Richtung. */
  body.swipe-feedback-prev .progress-prev,
  body.swipe-feedback-next .progress-next{
    background:var(--orange)!important;
    border-color:rgba(255,253,248,.94)!important;
    color:#20150a!important;
    box-shadow:0 0 0 4px rgba(242,140,40,.22)!important;
    transform:scale(1.06)!important;
  }

  /* Feedback an Start-/Endposition: Kreis wird orange und bei stärkerem Zug größer. */
  body.swipe-boundary-start .progress-boundary:first-child,
  body.swipe-boundary-end .progress-boundary:last-child{
    background:var(--orange)!important;
    border-color:rgba(255,253,248,.94)!important;
    color:#20150a!important;
    box-shadow:0 0 0 calc(3px + (var(--swipe-progress) * 5px)) rgba(242,140,40,.18)!important;
    transform:scale(calc(1 + (var(--swipe-progress) * .20)))!important;
  }
}

/* Kleine Handys: Pfeile bleiben erkennbar, Seitensymbole werden nur minimal enger. */
@media (max-width:380px){
  .page-progress{
    grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr)!important;
    gap:.52rem!important;
  }
  .progress-dots{
    gap:.18rem!important;
  }
  .progress-turn{
    width:42px!important;
    height:34px!important;
    min-width:42px!important;
    font-size:1.46rem!important;
  }
  .progress-prev{
    padding-left:.44rem!important;
  }
  .progress-next{
    padding-right:.44rem!important;
  }
  .progress-turn::before{
    inset:-8px -14px;
  }
}

/* V0.8.24: Menü bleibt über jedem Pfeil-/Swipe-Feedback. */
@media (max-width:900px){
  body.mobile-menu-open .progress-turn,
  body.mobile-menu-open .progress-dots,
  body.mobile-menu-open .page-progress,
  body:has(.mobile-menu details[open]) .progress-turn,
  body:has(.mobile-menu details[open]) .progress-dots,
  body:has(.mobile-menu details[open]) .page-progress{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}