/* Erzeugt von build/build.py aus fonts.css, site.css und zusatz-*.css – nicht von Hand ändern. */
/* ---- fonts.css ---- */
/* Schriften der Website (lokal, keine Fremdaufrufe). Variable Fonts: eine Datei deckt alle Stärken ab.
   Sora (Überschriften), Instrument Sans (Text) – SIL Open Font License. */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/sora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- site.css ---- */
/* ==========================================================================
   webdesigner-tirol.at – Design-System „Wanderkarte Tirol“ (Entwurf G, Farben Blau/Türkis)
   Teil 1: unverändert aus Entwuerfe/Neudesign/g-kaernten.html übernommen
           (Reihenfolge ist wichtig – spätere Regeln überschreiben frühere).
   Teil 2 (ganz unten): Kopf-Untermenü und Bausteine für Unterseiten.
   ========================================================================== */
/* ============================================================ Entwurf G · Tirol – Wanderkarte */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
:root{
  /* Farben nach Ipsom-CI (Wiki „Ipsom CI“): Grund Weiß und Grau, Anthrazit, Blau als einzige Handlungsfarbe.
     Die alten Namen (see, tanne, alm, laerche) bleiben, damit der Code gleich bleibt – ihre Werte sind jetzt CI-Töne. */
  /* Grund und Linien */
  --kalk:#f4f5f7; --kalk2:#eaecef; --papier:#ffffff; --linie:#e2e5ea; --linie2:#eceef1;
  /* „see“ = Blau (früher Türkis) */
  --see:#1d4a86; --see-hell:#4f7fb8; --see-tief:#163a6b; --see-bg:#eff5fc; --see-rand:#c9d8ec;
  /* „tanne“ = dunkle Flächen in Anthrazit (CI, dunkle Ausprägung) */
  --tanne:#1e2023; --tanne-tief:#131417; --tanne-karte:#26282c; --tanne-linie:#3a3d43; --alm:#6b727b; --alm-hell:#9aa1aa;
  /* „laerche“ = Grautöne für Linien und Nebensachen (früher Holzbraun) */
  --laerche:#9aa1aa; --laerche-tief:#6b727b; --laerche-bg:#f4f5f7;
  /* Text */
  --anthrazit:#14171c; --text:#4a5058; --leise:#656c76;
  --d-text:#e9eaec; --d-leise:#a3a9b1;
  /* Ipsom-Gelb: nur Logo und Sonne */
  --gelb:#ffd600;
  /* Blau (CI „Technik“): Knöpfe, Links, Wegweiser, Route */
  --blau:#1d4a86; --blau-tief:#163a6b; --blau-hell:#eff5fc; --blau-rand:#c9d8ec; --blau-d:#9dbde6; --tuerkis:#1d4a86;
  /* Tiroler Landesfarben – nur für das kleine Flaggen-Kennzeichen */
  --tirol-rot:#d0232b;
  /* Status */
  --gut:#17845e; --gut-bg:#f0f8f4; --mittel:#9a6412; --mittel-bg:#fbf0dc; --schlecht:#b3261e; --schlecht-bg:#fbe9e7; --offen:#69717b;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sora: "Sora", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --hh: 70px;
  --p: 0;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hh) + 10px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;font:17px/1.62 var(--sans);color:var(--text);background:var(--kalk);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sora);font-weight:600;color:var(--anthrazit);margin:0}
p{margin:0}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.wrap{width:min(100% - 48px, 1240px);margin-inline:auto}
:focus-visible{outline:3px solid var(--anthrazit);outline-offset:3px;border-radius:4px}
.dunkel :focus-visible,.mbar :focus-visible{outline-color:var(--blau-d)}
.skiplink{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blau);color:#fff;padding:10px 16px;border-radius:9px;font-weight:600;text-decoration:none}
.skiplink:focus{top:10px}
.ph{border:1px dashed currentColor;border-radius:6px;padding:0 .35em;cursor:help;white-space:nowrap}

/* Dunkle Bänder: Tiroler Blau */
.dunkel{background:var(--tanne);color:var(--d-text)}
.dunkel h2,.dunkel h3{color:#fff}
.band2{background:var(--kalk2)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:9px;background:var(--blau);color:#fff;border:1.5px solid var(--blau);font:600 16px/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--blau-tief);border-color:var(--blau-tief);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(122,96,0,.7)}
.btn svg{flex:none}
.btn--see{background:var(--see-tief);border-color:var(--see-tief);color:#fff}
.btn--see:hover{background:var(--blau-tief);box-shadow:0 12px 26px -14px rgba(22,58,107,.8)}
.btn--linie{background:transparent;color:var(--anthrazit);border-color:rgba(20,23,28,.45)}
.btn--linie:hover{border-color:var(--anthrazit);background:rgba(20,23,28,.04);box-shadow:none}
.btn--linie-d{background:transparent;color:var(--d-text);border-color:rgba(231,234,239,.4)}
.btn--linie-d:hover{border-color:var(--blau);box-shadow:none}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.lnk{font-weight:600;color:var(--see-tief);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lnk:hover{text-decoration-color:var(--laerche)}
.dunkel .lnk{color:#fff}
.dunkel .lnk:hover{text-decoration-color:var(--blau-d)}
.tel,a[href^="tel:"]{white-space:nowrap}
.tel{font:600 16px var(--mono);color:var(--anthrazit);text-decoration:none;border-bottom:1.5px solid var(--see);padding-bottom:2px}

/* Etappen-Kennung (Eyebrow) mit Wegmarkierung */
.marke{display:flex;align-items:center;gap:12px;font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--see-tief);margin:0 0 20px}
.marke::before{content:none}   /* keine Flagge mehr – Ruhe (29.09.2026) */
.dunkel .marke{color:var(--blau-d)}
h2.h2{font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.033em;text-wrap:balance;margin-bottom:20px}
.lead{font-size:19px;line-height:1.62;max-width:60ch}
.dunkel .lead{color:var(--d-text)}
.sec{padding:clamp(52px,6vw,92px) 0}
.kopf-split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 64px;flex-wrap:wrap;margin-bottom:44px}
.kopf-split > div{max-width:720px;flex:1 1 560px}
.kopf-split .h2{margin-bottom:0}
.kopf-split > p{max-width:420px}

/* ============================================================ Kopf */
.hdr{position:sticky;top:0;z-index:50;height:var(--hh);background:rgba(244,245,247,.96);border-bottom:1px solid var(--linie);color:var(--anthrazit)}
@supports (backdrop-filter: blur(4px)){ .hdr{background:rgba(244,245,247,.82);backdrop-filter:saturate(1.4) blur(14px)} }
.hdr__in{display:flex;align-items:center;gap:28px;height:100%}
.hdr__logo{flex:none;display:block;border-radius:10px}
.hdr__logo svg{display:block;height:52px;width:auto}
.hdr__nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.hdr__nav a{position:relative;display:block;padding:8px 0;color:var(--anthrazit);font:500 15px/1.2 var(--sans);text-decoration:none}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--see);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 14.5px/1 var(--mono);color:var(--anthrazit);text-decoration:none;white-space:nowrap}
.hdr__tel svg{color:var(--see-tief)}
.hdr__menu{display:none;margin-left:auto;width:46px;height:46px;border-radius:9px;border:1px solid var(--linie);background:transparent;color:var(--anthrazit);cursor:pointer}
.hdr__menu span{display:block;width:20px;height:2px;margin:4px auto;background:currentColor;transition:transform .25s,opacity .2s}
.hdr.is-open .hdr__menu span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.is-open .hdr__menu span:nth-child(2){opacity:0}
.hdr.is-open .hdr__menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1179px){
  .hdr__menu{display:block}
  .hdr__tel ~ .hdr__menu{margin-left:0}
  .hdr__nav{position:absolute;left:0;right:0;top:100%;background:var(--kalk);border-bottom:1px solid var(--linie);display:none;box-shadow:0 20px 30px -24px rgba(20,23,28,.4)}
  .hdr.is-open .hdr__nav{display:block}
  .hdr__nav ul{flex-direction:column;gap:0;padding:8px 24px 20px}
  .hdr__nav a{padding:14px 0;border-bottom:1px solid var(--linie2);font-size:17px}
  .hdr__nav a::after{display:none}
}
@media (max-width:639px){
  .hdr__tel,.hdr__cta{display:none}
  .hdr__menu{margin-left:auto!important}
  .hdr__logo svg{height:46px}
}

/* ============================================================ Hero + Route: die Wanderkarte */
.tour{position:relative}
.tour__buehne{display:none}
.tour__text{position:relative;z-index:2}
.tour__block{position:relative}
.hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--leise);margin-bottom:26px}
.hero__meta span{flex:1;min-width:0}
.hero__meta i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--see);box-shadow:0 0 0 4px rgba(29,74,134,.18)}
.h1__k{display:flex;align-items:center;gap:12px;font:600 14.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--see-tief);margin-bottom:18px}
.h1__k::before{content:"";flex:none;width:28px;height:1.5px;background:var(--see)}
.h1__m{display:block;font:700 clamp(38px,3.75vw,56px)/1.04 var(--sora);letter-spacing:-.045em;color:var(--anthrazit);text-wrap:balance}
.h1__m em{font-style:normal;position:relative;white-space:nowrap}
.h1__m em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.16em;background:var(--gelb);z-index:-1;border-radius:2px}   /* Gelb als Funke (Weg A) */
.hero__lead{font-size:clamp(17.5px,1.3vw,19px);line-height:1.62;color:var(--text);max-width:34em;margin:26px 0 32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__alt{margin-top:20px;font-size:15.5px;color:var(--leise)}
.hero__alt a{color:var(--anthrazit);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--see)}
.fakten{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 26px;list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--linie)}
.fakten li{position:relative;padding:16px 0 0;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.fakten li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--kalk);border:2px solid var(--see)}
.fakten li b{display:block;font:600 21px/1.1 var(--sora);white-space:nowrap;letter-spacing:-.02em;text-transform:none;color:var(--anthrazit);margin-bottom:4px}
.dunkel .fakten{border-color:var(--tanne-linie)}
.dunkel .fakten li{color:var(--d-leise)}
.dunkel .fakten li b{color:#fff}
.dunkel .fakten li::before{background:var(--tanne);border-color:#9dbde6}

/* Etappen (Text) */
.etappe__n{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font:600 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--see-tief)}
.etappe__n b{display:inline-grid;place-items:center;min-width:40px;height:30px;padding:0 9px;border-radius:7px;background:var(--tanne);color:#fff;font:600 14px/1 var(--mono);letter-spacing:.02em}
.etappe__n--gipfel b{background:var(--blau);color:#fff}
.etappe h3{font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance}
.etappe p{font-size:18.5px;line-height:1.62;max-width:30em}
.etappe__meta{display:flex!important;align-items:center;gap:12px;margin-top:22px!important;font:500 13.5px/1.3 var(--mono)!important;color:var(--laerche-tief)!important;letter-spacing:.04em}
.etappe__meta::before{content:"";width:28px;height:0;border-top:2px dashed var(--laerche)}
.etappe .cta-row{margin-top:30px}
.tour__kopf h2{font-size:clamp(32px,3.4vw,50px);line-height:1.06;letter-spacing:-.033em;margin-bottom:14px;text-wrap:balance}
.tour__kopf p{max-width:30em;margin-bottom:28px}
.skip{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;font:500 13px/1 var(--mono);color:var(--leise);text-decoration:none;border-bottom:1px dashed var(--leise);padding-bottom:4px}
.skip:hover{color:var(--see-tief);border-color:var(--see-tief)}

/* ---------- Die Karte */
.karte-box{position:relative}
.karte{display:block;width:100%;height:100%;overflow:hidden;--z:1}
.tour__karte .karte,.hero-karte .karte{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 96%,transparent),linear-gradient(transparent,#000 8%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 96%,transparent),linear-gradient(transparent,#000 8%,#000 90%,transparent);mask-composite:intersect}
.k-aussen{fill:var(--kalk2);fill-opacity:.75}
.hl{fill:none;stroke:var(--laerche);stroke-opacity:.2;stroke-width:calc(.5px * var(--m,1) / var(--z));stroke-linejoin:round}
.hl--idx{stroke-opacity:.3;stroke-width:calc(.7px * var(--m,1) / var(--z))}
.hl--fern{stroke-opacity:.11}
.fl{fill:none;stroke:var(--see-hell);stroke-opacity:.75;stroke-width:calc(1.1px * var(--m,1) / var(--z));stroke-linecap:round}
.fl--drau{stroke-width:calc(1.6px * var(--m,1) / var(--z));stroke-opacity:.85}
.k-grenze{fill:none;stroke:var(--tanne);stroke-opacity:.7;stroke-width:calc(1.3px * var(--m,1) / var(--z));stroke-linejoin:round}
.see__f{fill:var(--see-hell);stroke:none}
.see__r{fill:none;stroke:var(--see-tief);stroke-opacity:.55;stroke-width:calc(.8px * var(--m,1) / var(--z))}
.welle{fill:none;stroke:#fff;stroke-opacity:.6;stroke-width:calc(.7px * var(--m,1) / var(--z));stroke-linecap:round;stroke-dasharray:calc(4px * var(--m,1) / var(--z)) calc(7px * var(--m,1) / var(--z))}
.lt{paint-order:stroke;stroke:var(--kalk);stroke-width:calc(3px * var(--m,1) / var(--z));stroke-linejoin:round;font-family:var(--sora);font-weight:600;letter-spacing:.24em;text-transform:uppercase;fill:var(--laerche-tief);fill-opacity:.62;font-size:calc(9.5px * var(--m,1) / var(--z));text-anchor:middle;transition:opacity .5s}
.lt--berg{letter-spacing:.14em;font-size:calc(8.5px * var(--m,1) / var(--z));opacity:0}
.lt--see{font-family:var(--sans);font-weight:700;letter-spacing:.06em;text-transform:none;fill:#fff;fill-opacity:1;stroke:none;font-size:calc(4.4px * var(--m,1) / var(--z) * 3);dominant-baseline:central;opacity:0}
.karte.nah .lt--see{opacity:1}
.karte.nah .lt--berg{opacity:1}
.karte.nah .lt--gross{font-size:calc(10.5px * var(--m,1) / var(--z))}
.ort circle{fill:var(--papier);stroke:var(--anthrazit);stroke-width:calc(1.4px * var(--m,1) / var(--z));r:calc(2.8px * var(--m,1) / var(--z))}
.ort text{font:600 calc(11px * var(--m,1) / var(--z)) var(--sans);fill:var(--anthrazit);paint-order:stroke;stroke:var(--kalk);stroke-width:calc(3px * var(--m,1) / var(--z));stroke-linejoin:round}
.ort--klein text{font-weight:500;font-size:calc(9.5px * var(--m,1) / var(--z));fill:var(--text)}
.ort--klein circle{r:calc(2.2px * var(--m,1) / var(--z))}
.ort--ipsom circle{fill:var(--blau);stroke:var(--anthrazit);r:calc(4px * var(--m,1) / var(--z))}
.ort--ipsom text{font-weight:700}
.karte.nah .ort text{font-size:calc(12.5px * var(--m,1) / var(--z))}
.k-route-plan{fill:none;stroke:var(--tanne);stroke-opacity:.9;stroke-width:calc(1.9px * var(--m,1) / var(--z));stroke-linecap:round;stroke-dasharray:calc(5px * var(--m,1) / var(--z)) calc(4px * var(--m,1) / var(--z))}
.k-route-geh{fill:none;stroke:var(--tuerkis);stroke-width:calc(4.2px * var(--m,1) / var(--z));stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 calc(.8px * var(--m,1) / var(--z)) rgba(20,23,28,.9))}
.st{fill:var(--papier);stroke:var(--tanne);stroke-width:calc(1.6px * var(--m,1) / var(--z));r:calc(4.2px * var(--m,1) / var(--z));transition:fill .3s}
.st.erreicht{fill:var(--tuerkis)}
.k-gipfel{transform-box:fill-box}
.gi-berg{fill:none;stroke:var(--tanne);stroke-width:calc(1.4px * var(--m,1) / var(--z));stroke-linejoin:round}
.gi-kreuz{fill:none;stroke:var(--anthrazit);stroke-width:calc(1.4px * var(--m,1) / var(--z));stroke-linecap:round}
.k-punkt{fill:var(--see-tief);stroke:#fff;stroke-width:calc(2px * var(--m,1) / var(--z));r:calc(5.4px * var(--m,1) / var(--z))}
.k-punkt-halo{fill:var(--see);fill-opacity:.22;r:calc(13px * var(--m,1) / var(--z))}
@media (prefers-reduced-motion: no-preference){
  .k-punkt-halo{animation:halo 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes halo{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* Eingangsanimation der Karte: Linien zeichnen, Seen füllen sich */
@media (prefers-reduced-motion: no-preference){
  .js .karte .zeichne{stroke-dasharray:1px 1px;stroke-dashoffset:1px}
  .js .karte.go .zeichne{animation:zeichnen 1.5s cubic-bezier(.45,0,.2,1) var(--d,0s) both}
  .js .karte .k-grenze.zeichne{--d:.1s}
  .js .karte.go .k-grenze{animation-duration:2.2s}
  .js .karte .fl.zeichne{--d:.9s}
  .js .karte .see__f{opacity:0;transform:scaleX(.2);transform-box:fill-box;transform-origin:center}
  .js .karte.go .see__f{animation:seeFuellen 1.1s cubic-bezier(.3,0,.2,1) 1.25s both}
  .js .karte .see__r,.js .karte .welle{opacity:0}
  .js .karte.go .see__r,.js .karte.go .welle{opacity:1;transition:opacity .8s ease 1.6s}
  .js .karte .k-landschaft,.js .karte .k-orte,.js .karte .k-gipfel,.js .karte .k-stationen{opacity:0}
  .js .karte.go .k-landschaft,.js .karte.go .k-orte,.js .karte.go .k-gipfel,.js .karte.go .k-stationen{opacity:1;transition:opacity .9s ease 1.7s}
  .js .karte .k-punkt,.js .karte .k-punkt-halo{opacity:0}
  .js .karte.bereit .k-punkt,.js .karte.bereit .k-punkt-halo{opacity:1;transition:opacity .5s}
  /* Wasser bewegt sich sachte */
  .karte .welle{animation:welle 7s linear infinite}
}
@keyframes zeichnen{from{stroke-dashoffset:1px}to{stroke-dashoffset:0px}}
@keyframes seeFuellen{0%{opacity:0;transform:scaleX(.15)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes welle{to{stroke-dashoffset:-44px}}

/* Wolkenschatten ziehen über die Karte */
.glitzer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.wolken{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wolken i{position:absolute;width:38%;aspect-ratio:2.2;border-radius:50%;background:radial-gradient(closest-side,rgba(20,23,28,.085),rgba(20,23,28,0));top:10%;left:-40%}
.wolken i:nth-child(2){top:48%;width:30%;background:radial-gradient(closest-side,rgba(20,23,28,.07),rgba(20,23,28,0))}
.wolken i:nth-child(3){top:26%;width:46%}
@media (prefers-reduced-motion: no-preference){
  .wolken i{animation:wolke 70s linear infinite}
  .wolken i:nth-child(2){animation-duration:95s;animation-delay:-40s}
  .wolken i:nth-child(3){animation-duration:120s;animation-delay:-85s}
}
@media (prefers-reduced-motion: reduce){ .wolken{display:none} }
@keyframes wolke{from{transform:translateX(0)}to{transform:translateX(380%)}}

/* Sonne (Ipsom-Gelb, dezent) oben in der Kartenecke */
.k-sonne{position:absolute;right:5%;top:5%;width:44px;height:44px;pointer-events:none}
.k-sonne svg{width:100%;height:100%;overflow:visible}
.k-sonne circle{fill:var(--gelb)}
.k-sonne path{stroke:var(--gelb);stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion: no-preference){ .k-sonne g{animation:drehen 60s linear infinite;transform-origin:22px 22px} }
@keyframes drehen{to{transform:rotate(360deg)}}

/* Legende: Nordpfeil + Maßstab */
.legende{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;gap:18px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);pointer-events:none}
.legende__nord{display:grid;justify-items:center;gap:3px}
.legende__nord svg{width:14px;height:22px}
.legende__mass{display:grid;gap:5px}
.legende__mass i{display:block;width:56px;height:5px;border:1px solid var(--anthrazit);background:linear-gradient(90deg,var(--anthrazit) 50%,transparent 50%)}
.legende__route{display:flex;align-items:center;gap:8px}
.legende__route i{width:26px;height:0;border-top:2px dashed var(--tanne)}
.legende__route b{display:inline-block;width:26px;height:4px;border-radius:2px;background:var(--tuerkis);box-shadow:0 0 0 1px rgba(20,23,28,.5)}

/* Wegweiser-Schilder (gelb, wie auf Tirols Wanderwegen) */
.schilder{position:absolute;inset:0;pointer-events:none}
.schild{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;opacity:0;transition:opacity .35s ease,scale .35s ease;scale:.9;transform-origin:0 100%}
.schild.an{opacity:1;scale:1}
.schild.vorbei{opacity:.82;scale:.86}
.schild__tafel{position:relative;display:block;padding:7px 22px 7px 11px;background:var(--blau);color:#fff;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);filter:drop-shadow(0 1px 0 rgba(20,23,28,.25));white-space:nowrap}
.schild--links .schild__tafel{padding:7px 11px 7px 22px;clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%)}
.schild__tafel b{display:block;font:700 13px/1.15 var(--sora);letter-spacing:-.01em}
.schild__tafel span{display:block;font:500 11.5px/1.3 var(--sans);margin-top:1px}
.schild__tafel small{display:block;font:600 10px/1.2 var(--mono);letter-spacing:.06em;margin-top:3px;opacity:.8}
.schild__stange{display:block;width:2px;height:22px;margin-left:10px;background:var(--tanne)}
.schild--links .schild__stange{margin-left:auto;margin-right:10px}
.schild--unten{flex-direction:column-reverse;transform-origin:0 0}
.schild--gipfel .schild__tafel{background:var(--anthrazit);color:#fff;padding-right:24px}
.schild--gipfel .schild__tafel b{color:var(--blau-d);font-size:15px}
.schild--start .schild__tafel{background:var(--anthrazit);color:#fff}   /* Start und Gipfel dunkel, Stationen blau */

/* ---------- Panorama: Relief in Linien, Sonnenaufgang an der Nordkette */
.pano{display:block;width:100%;height:100%;overflow:hidden}
.pano-l{fill:var(--kalk);stroke:var(--tanne);stroke-width:1.2;stroke-linejoin:round}
.pano-l--fern{stroke:var(--laerche);stroke-opacity:.45;stroke-width:1}
.pano-l--kara{stroke-opacity:.6}
.pano-l--ger{stroke-opacity:.7}
.pano-l--vorn{fill:var(--see-bg);stroke:var(--see-tief);stroke-opacity:.5}
.pano-wellen path{stroke:var(--see);stroke-opacity:.55;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:14 10}
.pano-kreuz path{fill:none;stroke:var(--anthrazit);stroke-width:2.2;stroke-linecap:round}
.pano-t{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--anthrazit)}
.pano-t--leise{fill:var(--leise);font-size:10px}
.pano-sonne{transform:translate(346px, calc(150px - var(--sonne,0) * 90px))}
.pano-sonne circle{fill:var(--gelb)}
.pano-strahlen path{stroke:var(--gelb);stroke-width:1.6;stroke-linecap:round;opacity:calc(var(--sonne,0) * .75)}
.pano-schraffur{fill:none;stroke:var(--tanne);stroke-opacity:.35;stroke-width:1;stroke-linecap:round}
.pano-sonne{opacity:calc(.25 + var(--sonne,0) * .75)}
@media (prefers-reduced-motion: no-preference){
  .pano-wellen path{animation:welle 9s linear infinite}
  .pano-strahlen{animation:drehen 40s linear infinite}
}
.gipfel-schild{position:absolute;left:39%;top:5%;translate:-8px 0;display:flex;flex-direction:column;align-items:flex-start;opacity:calc((var(--sonne,0) - .55) * 3);pointer-events:none}
.gipfel-schild .schild__stange{display:none}
.gipfel-schild .schild__tafel{background:var(--anthrazit);color:#fff;padding:9px 26px 9px 13px}
.gipfel-schild .schild__tafel b{color:var(--blau-d);font-size:16px}

/* ---------- Karten-Bühne: Desktop mit Bewegung, klebend */
@media (min-width:900px){
  .tour__buehne{display:block;position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));z-index:1;pointer-events:none}
  .tour__buehne{display:flex;flex-direction:column;justify-content:center;gap:40px;padding:14px 0 10px calc(max(24px, 50% - 620px) + clamp(400px, 37vw, 530px))}
  .tour__karte{position:relative;width:min(100%, (100svh - var(--hh) - 20px) * .64 * 1010 / 480);aspect-ratio:1010/480;flex:none}
  .tour__karte .karte-box{position:absolute;inset:0}
  .tour__pano{position:relative;width:min(100%, (100svh - var(--hh) - 20px) * .64 * 1010 / 480);aspect-ratio:1000/220;flex:none;overflow:hidden}
  .tour__pano .pano{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .tour__pano::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 34.6% 100%,rgba(255,214,0,calc(var(--sonne,0) * .16)),rgba(255,214,0,0) 70%);pointer-events:none}
  .tour__text{margin-top:calc(-100vh + var(--hh));margin-top:calc(-100svh + var(--hh))}
  .tour__block{min-height:calc(100vh - var(--hh));min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;width:clamp(380px, 35vw, 500px);padding:40px 0}
  .tour__block--hero{justify-content:center;padding:clamp(24px,4vh,48px) 0 clamp(40px,8vh,96px)}   /* Text mittig zur Karte (Wunsch Bernd) */
  .etappe__fig{display:none}
  .legende{left:0;bottom:-30px}
}
@media (min-width:900px) and (max-height:760px){
  .h1__m{font-size:clamp(36px,3.9vw,54px)}
  .hero__lead{margin:18px 0 22px;font-size:17px}
  .fakten{margin-top:24px}
  .fakten li b{font-size:20px}
}
/* Etappen treten beim Scrollen nach vorne */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .tour{view-timeline:--tour block}
    .tour__buehne{animation:tourP linear both;animation-timeline:--tour;animation-range:contain 0% contain 100%}
    .tour__block.etappe{animation:etappeFokus linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  .keine-sda .tour__block.etappe{opacity:.3;transition:opacity .5s ease}
  .keine-sda .tour__block.etappe.is-on{opacity:1}
}
@keyframes tourP{from{--p:0}to{--p:5}}
@keyframes etappeFokus{0%,14%{opacity:.25}36%,64%{opacity:1}86%,100%{opacity:.25}}

/* ---------- Handy / schmal: Karte im Hero, darunter Stationen gestapelt */
@media (max-width:899px){
  .tour__block--hero{padding:10px 0 8px}
  .hero-karte{position:relative;margin:0 -20px 18px;aspect-ratio:2/1}
  .hero-karte .k-sonne{width:28px;height:28px;right:7%;top:6%}
  .hero__copy{display:flex;flex-direction:column}
  .hero__meta{order:9;margin:22px 0 0}
  .tour__block.etappe{padding:34px 0 30px;border-top:1px solid var(--linie)}
  .tour__block.tour__kopf-block{border-top:0;padding-top:56px}
  .etappe__fig{display:block;position:relative;margin-top:22px;border-radius:14px;overflow:hidden;background:var(--papier);border:1px solid var(--linie);aspect-ratio:16/9}
  .etappe__fig .karte{height:100%}
  .etappe__fig--gipfel{aspect-ratio:auto}
  .etappe__fig--gipfel .fig__karte{position:relative;aspect-ratio:16/9}
  .etappe__fig--gipfel .pano-box{position:relative;aspect-ratio:1000/220;border-top:1px solid var(--linie);background:var(--kalk)}
  .etappe__fig--gipfel .pano-box{aspect-ratio:2.4}
  .etappe__fig--gipfel .pano{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .etappe__fig--gipfel .gipfel-schild{top:6%;left:auto;right:calc(34.5% + 34px);align-items:flex-end}
  .etappe__fig--gipfel .gipfel-schild .schild__tafel{padding:6px 9px 6px 20px!important;clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%)}
  .etappe__fig--gipfel .gipfel-schild .schild__stange{display:none}
  .etappe__fig--gipfel .gipfel-schild .schild__tafel{padding:6px 20px 6px 9px}
  .etappe__fig--gipfel .gipfel-schild .schild__tafel b{font-size:12.5px}
  .fig__ort{position:absolute;left:10px;top:10px;z-index:2;padding:5px 9px 5px 8px;background:var(--blau);color:#fff;font:700 12px/1.1 var(--sora);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);padding-right:16px}
  .tour__block.etappe:last-child{padding-bottom:64px}
}
@media (min-width:900px){ .hero-karte,.hero-karte-fuss{display:none} }
/* Schmal UND ohne Bewegung: nichts Besonderes, alles sichtbar */

/* ============================================================ Beweis-Leiste */
.beweis{background:var(--tanne-tief);color:var(--d-text)}
.beweis__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;padding:17px 0;font:500 14px/1.35 var(--mono)}
.beweis__k{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9dbde6}
.beweis__in > span:not(.beweis__k){display:inline-flex;align-items:center;gap:8px}
.beweis__in svg{flex:none;color:var(--blau-d)}
.beweis b{color:#fff}

/* ============================================================ Gipfelcheck */
.gc__kopf{max-width:880px}
.gc__form{margin-top:32px}
.gc__feld{display:flex;align-items:center;gap:8px;max-width:780px;height:74px;padding:0 8px 0 0;border:2px solid var(--tanne);border-radius:14px;background:var(--papier);box-shadow:0 20px 44px -28px rgba(20,23,28,.55);transition:box-shadow .2s}
.gc__feld:focus-within{box-shadow:0 0 0 4px var(--see-hell),0 20px 44px -28px rgba(20,23,28,.55)}
.gc__in{flex:1;min-width:0;display:flex;align-items:center;height:100%;cursor:text;color:var(--tanne);margin:0}
.gc__in svg{flex:none;margin:0 12px 0 20px}
.gc__in input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:500 21px/1 var(--sans);color:var(--anthrazit)}
.gc__in input:focus,.gc__in input:focus-visible{outline:none}
.gc__in input::placeholder{color:#636a74}
.gc__feld .btn{flex:none;min-height:56px;padding:0 24px;font-size:17px;white-space:nowrap}
.gc__plus{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font:500 15px/1.4 var(--sans);color:var(--anthrazit)}
.gc__plus span{display:inline-flex;align-items:center;gap:7px}
.gc__plus span::before{content:"";width:6px;height:10px;margin:-3px 3px 0 2px;border:solid var(--gut);border-width:0 2px 2px 0;transform:rotate(45deg)}
.gc__none{margin-top:10px;font-size:14.5px;color:var(--text)}
.gc__none a{font-weight:600;color:var(--see-tief);text-underline-offset:3px}
.gc__hint{display:inline;margin:0 0 0 10px;font:500 12.5px/1.5 var(--mono);color:var(--leise)}
.gc__hint.err{color:var(--schlecht)}
@media (prefers-reduced-motion: no-preference){ .gc__feld.puls{animation:gcPuls 1.3s ease-out 2} }
@keyframes gcPuls{0%{box-shadow:0 0 0 0 rgba(91,149,207,.8),0 20px 44px -28px rgba(20,23,28,.55)}100%{box-shadow:0 0 0 16px rgba(91,149,207,0),0 20px 44px -28px rgba(20,23,28,.55)}}
.fehlerbox{margin-top:14px;max-width:780px;padding:14px 16px 14px 18px;border-radius:10px;border:1px solid #efc4bd;background:#fff5f3;box-shadow:inset 3px 0 0 #c0392b;color:#5c1f19;font-size:15px;line-height:1.5}
.fehlerbox[hidden]{display:none}
.fehlerbox b{color:#8e2a20}
.fehler__detail{margin-top:4px;font-size:13.5px;color:#7a4a45}
.fehler__nochmal{margin-top:10px;min-height:40px;padding:0 16px;border:1.5px solid #8e2a20;border-radius:9px;background:#fff;font:600 14.5px var(--sans);color:#8e2a20;cursor:pointer}
.fehler__nochmal:hover{background:#8e2a20;color:#fff}

/* Tourenblatt: Ergebnis als Höhenprofil + Wegweiser */
.tb{margin-top:46px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 30px 60px -40px rgba(20,23,28,.55);overflow:hidden;transition:opacity .6s ease,filter .6s ease}
.tb[data-state="leer"]{opacity:.55;filter:saturate(.2)}
.tb__titel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:14px 24px;border-bottom:1px solid var(--linie);background:var(--kalk);font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.tb__titel > span:first-child{color:var(--see-tief);font-weight:700}
.tb__status{margin-left:auto;color:var(--anthrazit);text-transform:none;letter-spacing:.02em}
.tb[data-state="laeuft"] .tb__status::after{content:"▍";color:var(--see);margin-left:4px}
@media (prefers-reduced-motion: no-preference){ .tb[data-state="laeuft"] .tb__status::after{animation:blinken 1s steps(1) infinite} }
@keyframes blinken{50%{opacity:0}}
.tb__profil{position:relative;padding:18px clamp(12px,2.4vw,32px) 6px}
.hp{display:block;width:100%;height:auto;overflow:visible}
.hp-raster path{stroke:var(--linie);stroke-width:1;stroke-dasharray:3 5}
.hp-raster text{font:500 11px var(--mono);fill:var(--leise)}
.hp-flaeche{fill:var(--kalk2)}
.hp-linie{fill:none;stroke:var(--tanne);stroke-width:2;stroke-linejoin:round}
.hp-hl{fill:none;stroke:var(--laerche);stroke-opacity:.3;stroke-width:1}
.hp-kreuz{fill:none;stroke:var(--anthrazit);stroke-width:2.2;stroke-linecap:round}
.hp-gipfel{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--anthrazit)}
.hp-kl{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;fill:var(--see-tief)}
.hp-klammer{fill:none;stroke:var(--see);stroke-width:1.4}
.hp-st circle{fill:var(--papier);stroke:var(--leise);stroke-width:1.6;transition:fill .3s,stroke .3s}
.hp-st text{font:700 11.5px var(--mono);fill:var(--leise);text-anchor:middle;dominant-baseline:central}
.hp-du text{dominant-baseline:central}
.hp-st.s-gut circle{fill:var(--gut);stroke:var(--gut)}
.hp-st.s-mittel circle{fill:#d99a2b;stroke:#b07a1e}
.hp-st.s-schlecht circle{fill:var(--schlecht);stroke:var(--schlecht)}
.hp-st.s-offen circle{fill:var(--papier);stroke:var(--offen);stroke-dasharray:3 3}
.hp-st.s-gut text,.hp-st.s-schlecht text{fill:#fff}
.hp-st.s-mittel text{fill:var(--anthrazit)}
@media (prefers-reduced-motion: no-preference){
  .hp-st.hit{animation:stPop .5s cubic-bezier(.2,1.6,.4,1) both;transform-box:fill-box;transform-origin:center}
}
@keyframes stPop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.hp-wanderer{opacity:0}
.tb[data-state="laeuft"] .hp-wanderer{opacity:1}
.hp-wanderer circle{fill:var(--see-tief);stroke:#fff;stroke-width:2}
.hp-du{opacity:0;transition:opacity .6s ease .9s}
.tb[data-state="fertig"] .hp-du{opacity:1}
.hp-du path{stroke:var(--see-tief);stroke-width:1.4;stroke-dasharray:3 3}
.hp-du rect{fill:var(--see-tief)}
.hp-du text{font:600 12px var(--sans);fill:#fff}
.hp-du circle{fill:var(--blau);stroke:var(--anthrazit);stroke-width:1.6}
.tb__ww{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,48px);padding:10px clamp(16px,2.4vw,32px) 30px}
.ww__kopf{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 8px;padding-bottom:10px;border-bottom:2px solid var(--tanne);font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tanne)}
.ww__kopf em{font-style:normal;color:var(--leise);letter-spacing:.06em}
.ww{list-style:none;margin:0;padding:0}
.ww li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:13px 0;border-bottom:1px solid var(--linie2)}
.ww__nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.6px solid var(--leise);font:700 11.5px/1 var(--mono);color:var(--leise);margin-top:1px}
.ww b{display:block;font:600 15.5px/1.3 var(--sora);color:var(--anthrazit)}
.ww__was{display:block;font:500 12px/1.4 var(--mono);color:var(--leise);margin-top:3px}
.ww__bef{grid-column:2 / -1;font-size:14.5px;line-height:1.5;color:var(--text)}
.ww__bef:empty{display:none}
.ww__bef em{font-style:normal;color:var(--see-tief);font-weight:500}
.ww__tag{position:relative;margin-top:2px;padding:5px 16px 5px 9px;font:700 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--kalk2);color:var(--leise);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);white-space:nowrap}
li[data-s="gut"] .ww__tag{background:var(--gut-bg);color:var(--gut)}
li[data-s="mittel"] .ww__tag{background:var(--mittel-bg);color:var(--mittel)}
li[data-s="schlecht"] .ww__tag{background:var(--schlecht-bg);color:var(--schlecht)}
li[data-s="offen"] .ww__tag{background:transparent;box-shadow:none;color:var(--offen);outline:1px dashed var(--offen);outline-offset:-1px;clip-path:none;border-radius:4px;padding-right:9px}
li[data-s="gut"] .ww__nr{background:var(--gut);border-color:var(--gut);color:#fff}
li[data-s="mittel"] .ww__nr{background:#d99a2b;border-color:#b07a1e;color:var(--anthrazit)}
li[data-s="schlecht"] .ww__nr{background:var(--schlecht);border-color:var(--schlecht);color:#fff}
li[data-s="offen"] .ww__nr{border-style:dashed}
.tb[data-state="leer"] .ww__was{display:none}
.tb[data-state="leer"] .ww li{padding:9px 0}
.tb__sum{display:grid;grid-template-columns:1fr 1.15fr 1.3fr;border-top:1px solid var(--linie);background:var(--tanne);color:var(--d-text)}
.tb__sum[hidden]{display:none}
.sum__zelle{padding:28px clamp(18px,2.4vw,32px);border-left:1px solid var(--tanne-linie)}
.sum__zelle:first-child{border-left:0}
.sum__k{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-leise);margin-bottom:16px}
.messer{display:grid;grid-template-columns:1fr auto;align-items:baseline;margin-bottom:20px}
.messer > span{font:500 13px/1 var(--mono);color:var(--d-text);text-transform:uppercase;letter-spacing:.08em}
.messer b{font:600 36px/1 var(--sora);color:#fff;letter-spacing:-.02em}
.messer b small{font-size:14px;color:var(--d-leise);font-weight:500;margin-left:2px}
.messer i{grid-column:1/-1;position:relative;height:6px;margin-top:12px;border-radius:3px;background:var(--tanne-karte);overflow:hidden}
.messer em{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--see-hell);border-radius:3px;transition:width 1.2s cubic-bezier(.3,0,.2,1)}
.sum__platz{font:600 20px/1.3 var(--sora);color:#fff}
.sum__platz span{color:var(--blau-d)}
.sum__note{font-size:13.5px;line-height:1.5;color:var(--d-leise);margin:8px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font:500 13px/1 var(--mono);padding:8px 10px;border:1px solid var(--tanne-linie);border-radius:8px;color:var(--d-text)}
.sum__rec{font:600 24px/1.2 var(--sora);color:var(--blau-d);margin-bottom:8px}
.sum__grund{color:var(--d-text);font-size:16px;margin-bottom:22px}
.sum__cta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.sum__cta .lnk{color:#fff}
.tb__hinweis{padding:12px 24px;border-top:1px solid var(--linie);font:500 11.5px/1.4 var(--mono);color:var(--leise);background:var(--kalk)}
.gc__weiter{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.gc__weiter[hidden]{display:none}
.karte-k{background:var(--papier);border:1px solid var(--linie);border-radius:14px;padding:28px;box-shadow:0 1px 2px rgba(20,23,28,.04),0 14px 34px -20px rgba(20,23,28,.35);transition:transform .25s ease,box-shadow .25s ease}
.karte-k:hover{transform:translateY(-3px)}
.karte-k h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.karte-k p{font-size:16px}
.reihe{display:flex;gap:10px;margin-top:18px}
.inp{flex:1;min-width:0;height:54px;padding:0 16px;border-radius:10px;border:1px solid #cacfd5;background:#edeff2;box-shadow:inset 0 1px 2px rgba(20,23,28,.07);font:16px var(--sans);color:var(--anthrazit)}
.inp::placeholder{color:#636a74}
.karte-k__ok{margin-top:12px;font:500 13.5px/1.5 var(--mono);color:var(--gut)}
.karte-k .cta-row{margin-top:20px}
@media (max-width:899px){
  .tb__ww{grid-template-columns:1fr}
  .tb__sum{grid-template-columns:1fr}
  .sum__zelle{border-left:0;border-top:1px solid var(--tanne-linie)}
  .sum__zelle:first-child{border-top:0}
  .gc__weiter{grid-template-columns:1fr}
}
@media (max-width:639px){
  .gc__feld{flex-direction:column;align-items:stretch;gap:10px;height:auto;padding:0;border:0;background:none;box-shadow:none}
  .gc__feld:focus-within{box-shadow:none}
  .gc__in{flex:none;height:64px;border:2px solid var(--tanne);border-radius:12px;background:var(--papier)}
  .gc__in:focus-within{box-shadow:0 0 0 4px var(--see-hell)}
  .gc__in svg{margin:0 10px 0 16px}
  .gc__in input{font-size:19px}
  .gc__feld .btn{width:100%;min-height:58px}
  .gc__plus{gap:6px 14px;font-size:14px}
  .gc__hint{display:block;margin:6px 0 0}
  .tb__titel{padding:12px 16px}
  .tb__profil{padding:12px 6px 0}
  .hp-st circle{r:15px}
  .hp-st text{font-size:14px}
  .hp-raster text,.hp-kl,.hp-gipfel{font-size:14px}
  .hp-du text{font-size:15px}
  .hp-linie{stroke-width:2.6}
  .ww li{grid-template-columns:28px minmax(0,1fr);}
  .ww__tag{grid-column:2;justify-self:start}
  .reihe{flex-direction:column}
}

/* Leistung: Endlos-Animationen ruhen außerhalb des Bildschirms */
.ruht *,.ruht *::before,.ruht *::after{animation-play-state:paused!important}

/* ============================================================ Leistungen · Ausrüstung */
.ls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ls__k{position:relative;display:flex;flex-direction:column;min-height:300px;padding:28px 28px 26px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 1px 2px rgba(20,23,28,.04),0 18px 40px -30px rgba(20,23,28,.5);overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.ls__k:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(20,23,28,.04),0 26px 48px -30px rgba(20,23,28,.6)}
.ls__hl{position:absolute;right:-40px;top:-50px;width:230px;height:230px;z-index:-1;pointer-events:none;opacity:.9}
.ls__hl path{fill:none;stroke:var(--laerche);stroke-opacity:.26;stroke-width:1}
.ls__k:hover .ls__hl path{stroke:var(--see);stroke-opacity:.35}
.ls__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--see-bg);color:var(--see-tief);box-shadow:inset 0 0 0 1px var(--see-rand)}
.ls__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ls__nr{margin-top:24px;font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--leise)}
.ls__k h3{margin:8px 0 10px;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.ls__k p{font-size:16px;line-height:1.56}
.ls__mehr{margin-top:auto;padding-top:18px;align-self:flex-start;display:inline-flex;gap:6px;font-weight:600;color:var(--anthrazit);text-decoration:underline;text-decoration-color:var(--see);text-decoration-thickness:2px;text-underline-offset:5px}
.ls__mehr span{transition:transform .3s}
.ls__mehr:hover span{transform:translateX(4px)}
.ls__k--rucksack{background:var(--tanne);border-color:var(--tanne);color:var(--d-text)}
.ls__k--rucksack h3{color:#fff}
.ls__k--rucksack .ls__nr{color:var(--d-leise)}
.ls__k--rucksack .ls__ic{background:rgba(29,74,134,.14);color:var(--blau-d);box-shadow:inset 0 0 0 1px rgba(29,74,134,.4)}
.ls__k--rucksack .ls__hl path{stroke:#9dbde6;stroke-opacity:.16}
.ls__k--rucksack .ls__mehr{color:#fff;text-decoration-color:var(--blau-d)}
.ls__k--rucksack :focus-visible{outline-color:var(--blau-d)}
.inkl{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.inkl li{position:relative;padding:7px 10px 7px 26px;border-radius:8px;border:1px solid var(--tanne-linie);font:500 13.5px/1.2 var(--sans);color:#fff}
.inkl li::before{content:"";position:absolute;left:10px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #9dbde6;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ============================================================ Referenzen · Wegmarken */
.ref__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:32px 64px;align-items:end;margin-bottom:48px}
.revier{position:relative}
.revier svg{display:block;width:100%;height:auto;overflow:visible}
.revier .rv-land{fill:rgba(255,255,255,.06);stroke:#9dbde6;stroke-opacity:.75;stroke-width:3;stroke-dasharray:14 7 3 7}
.revier .rv-see{fill:#4f7fb8}
.revier .rv-t{font:600 24px var(--mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--d-leise)}
.revier .rv-heim circle{fill:var(--gelb);stroke:var(--tanne-tief);stroke-width:4}
.revier .rv-heim text{font:700 27px var(--sans);fill:#fff}
.revier .rv-pin path{fill:#fff;stroke:var(--tanne-tief);stroke-width:1.2}
.revier .rv-pin circle{fill:var(--see-tief)}
.revier .rv-pin text{font:600 27px var(--sans);fill:#fff}
.revier .rv-pfeil{fill:none;stroke:var(--d-leise);stroke-width:3;stroke-dasharray:9 8}
.revier .rv-pfeil-k{fill:var(--d-leise)}
.revier figcaption{margin-top:12px;font:500 12px/1.5 var(--mono);color:var(--d-leise)}
.refs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.ref{grid-column:span 4;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--tanne-tief);border:1px solid var(--tanne-linie);transition:transform .3s ease,box-shadow .3s;box-shadow:0 22px 40px -30px rgba(0,0,0,.7)}
.ref:hover{transform:translateY(-4px)}
.ref--gross{grid-column:span 6}
.ref__bild{position:relative;aspect-ratio:3/2;background:var(--kalk);overflow:hidden}
.ref--gross .ref__bild{aspect-ratio:16/9}
.ref__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6% 6% 3%}
.ref__bild--foto img{object-fit:cover;padding:0}
.ref__bild::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 105% -10%,transparent 0 22px,rgba(154,161,170,.10) 22px 23px);mix-blend-mode:multiply}
.ref__bild--foto::after{display:none}
.ref__nadel{position:absolute;left:14px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 7px;border-radius:999px;background:rgba(249,251,254,.94);box-shadow:0 4px 12px -6px rgba(0,0,0,.4);font:600 12px/1 var(--sans);color:var(--anthrazit)}
.ref__nadel svg{width:14px;height:14px;color:var(--see-tief)}
.ref__nadel--neutral svg{color:var(--leise)}
.ref__text{padding:20px 22px 22px;flex:1}
.ref__text h3{font-size:20px;letter-spacing:-.015em}
.ref--gross .ref__text h3{font-size:23px}
.ref__tags{margin-top:6px!important;font:500 12.5px/1.5 var(--mono);color:var(--d-leise)}
.ref__mehr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-top:30px;font-size:15.5px;color:var(--d-leise)}
.ref__mehr p:first-child{max-width:70ch}

/* ============================================================ Preise · Tourenplaner (Konfigurator) */
.kf-kopf{max-width:800px;margin-bottom:40px}
.kf{position:relative;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 30px 70px -44px rgba(20,23,28,.6)}
.kf-sf{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0 clamp(18px,3vw,44px);border-bottom:1px solid var(--linie)}
.kf-sf::before{content:"";position:absolute;left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);top:31px;height:0;border-top:2px dashed var(--linie)}
.kf-sf li{position:relative;min-width:0}
.kf-sf button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:22px 6px 18px 0;border:0;background:none;color:var(--leise);font:500 15px/1.2 var(--sans);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-sf button::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--papier);border:2px solid var(--linie);transition:background-color .3s,border-color .3s,box-shadow .3s}
.kf-sf .is-done button{color:var(--anthrazit)}
.kf-sf .is-done button::before{background:var(--see);border-color:var(--see)}
.kf-sf .is-cur button{color:var(--anthrazit);font-weight:600}
.kf-sf .is-cur button::before{background:var(--blau);border-color:var(--anthrazit);box-shadow:0 0 0 5px rgba(29,74,134,.3)}
.kf-sf button:hover:not(:disabled){color:var(--see-tief)}
.kf-sf button:disabled{cursor:default}
.kf__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.kf__l{min-width:0;padding:40px clamp(18px,3vw,44px) 36px}
.kf__r{display:flex;flex-direction:column;gap:18px;min-width:0;padding:32px clamp(18px,2.4vw,32px);background:var(--kalk);border-left:1px solid var(--linie);border-radius:0 0 16px 0}
.kf-pane__h{font-size:clamp(26px,2.5vw,36px);line-height:1.12;letter-spacing:-.03em;margin-bottom:10px;text-wrap:balance}
.kf-pane__h:focus{outline:none}
.kf-pane__sub{font-size:17px;line-height:1.5;color:var(--leise);margin-bottom:28px}
.js .kf-pane{display:none}
.js .kf-pane.is-on{display:block}
@media (prefers-reduced-motion: no-preference){
  .kf-pane.is-on.von-r{animation:kfIn .45s cubic-bezier(.3,0,.2,1) both}
  .kf-pane.is-on.von-l{animation:kfInL .45s cubic-bezier(.3,0,.2,1) both}
  .kf-einb{animation:kfIn .4s cubic-bezier(.3,0,.2,1) both}
}
@keyframes kfIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes kfInL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.kf-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kf-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Extras: „Bei jedem Paket inklusive“ – kompakte Häkchen-Zeile unter den Kacheln */
.kf-inkl{margin-top:18px;padding:12px 14px;border-radius:10px;background:var(--see-bg);border:1px solid var(--see-rand)}
.kf-inkl__h{margin:0 0 6px;font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--see-tief)}
.kf-inkl__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;line-height:1.45;color:var(--text)}
.kf-inkl__l li{position:relative;padding-left:16px;white-space:nowrap}
.kf-inkl__l li::before{content:"✓";position:absolute;left:0;top:0;color:var(--see-tief);font-weight:700}
.kf-list{display:grid;gap:12px}
.kf-grp{border:0;margin:0 0 26px;padding:0;min-width:0}
.kf-grp[hidden]{display:none}
.kf-grp legend{padding:0;margin-bottom:12px;font:500 14px/1.3 var(--sans);color:var(--leise)}
.kfo{position:relative;display:grid;gap:4px 16px;width:100%;min-width:0;padding:18px 20px;border:1.5px solid var(--linie);border-radius:14px;background:var(--papier);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background-color .25s,color .2s,transform .2s,box-shadow .2s}
.kfo:hover{border-color:var(--see);transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(31,86,144,.6)}
.kfo:active{transform:none}
.kfo b{display:block;font:600 17px/1.25 var(--sora);letter-spacing:-.01em;color:var(--anthrazit)}
.kfo small{display:block;margin-top:3px;font:500 14px/1.4 var(--sans);color:var(--leise)}
.kfo__weil{display:block;margin-top:8px;font:500 13.5px/1.45 var(--sans);color:var(--see-tief)}
.kfo__weil:empty{display:none}
.kfo__ic{width:28px;height:28px;fill:none;stroke:var(--see-tief);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kfo[aria-pressed="true"]{background:var(--see-tief);border-color:var(--see-tief);color:#fff}
.kfo[aria-pressed="true"] b,.kfo[aria-pressed="true"] .kfo__weil{color:#fff}
.kfo[aria-pressed="true"] small{color:#eff5fc}
.kfo[aria-pressed="true"] .kfo__ic{stroke:#fff}
.kfo--kachel{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px;min-height:112px;padding:20px 18px 18px}
.kfo--pk{grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:18px 22px 18px 18px}
.kfo__berg{width:62px;height:auto;overflow:visible}
.kfo__berg path{fill:none;stroke:var(--leise);stroke-width:2;stroke-linejoin:round}
.kfo__berg .f{fill:var(--kalk2);stroke:none}
.kfo[aria-pressed="true"] .kfo__berg path{stroke:#fff}
.kfo[aria-pressed="true"] .kfo__berg .f{fill:rgba(255,255,255,.12)}
.kfo__t{min-width:0}
.kfo__p{text-align:right;white-space:nowrap}
.kfo__p b{font:600 22px/1 var(--sora);letter-spacing:-.02em}
.kfo__p small{margin-top:5px}
.kfo__flag{position:absolute;top:-11px;right:22px;padding:5px 9px;border-radius:5px;background:var(--blau);color:#fff;font:600 12px/1 var(--sans)}
.kfo--ex{grid-template-columns:28px minmax(0,1fr) 22px;align-items:start;padding:18px}
.kfo--ex[hidden]{display:none}
.kfo--radio{grid-template-columns:minmax(0,1fr) 22px}
.kfo__x{position:relative;width:22px;height:22px;margin-top:1px;border:1.5px solid #979fa9;border-radius:5px;background:var(--papier);transition:border-color .2s,background-color .2s}
.kfo--radio .kfo__x{border-radius:50%}
.kfo__x::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid var(--see-tief);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kfo[aria-pressed="true"] .kfo__x{border-color:#fff;background:#fff}
.kfo[aria-pressed="true"] .kfo__x::after{transform:rotate(45deg) scale(1)}
.kfo.inkl[aria-pressed]{cursor:default;background:var(--see-bg);border-style:dashed;border-color:var(--see);color:var(--text)}
.kfo.inkl[aria-pressed]:hover{transform:none;box-shadow:none}
.kfo.inkl[aria-pressed] b{color:var(--anthrazit)}
.kfo.inkl[aria-pressed] small{color:var(--see-tief)}
.kfo.inkl[aria-pressed] .kfo__ic{stroke:var(--see-tief)}
.kfo.inkl[aria-pressed] .kfo__x{border-color:var(--see);background:transparent}
.kfo.inkl[aria-pressed] .kfo__x::after{transform:rotate(45deg) scale(1)}
.kf-fine{margin-top:18px;font-size:14.5px;line-height:1.55;color:var(--leise)}
.kf-fine a{color:var(--see-tief);text-underline-offset:3px}
.kf-check label{display:block;margin-bottom:8px;font:600 14.5px/1.3 var(--sans);color:var(--anthrazit)}
.kf-check__row{display:flex;gap:10px}
.kf-check__row .inp[aria-invalid="true"]{border-color:var(--schlecht);box-shadow:0 0 0 2px rgba(179,38,30,.2)}
.kf-check__row .btn{min-height:54px;flex:none}
.kf-run__bar{position:relative;height:4px;border-radius:2px;background:var(--kalk2);overflow:hidden}
.kf-run__bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--see);transform:scaleX(.04);transform-origin:left;transition:transform .45s ease}
.kf-run p{margin-top:12px;font-size:15px}
.kf-erg{padding:20px 22px;border-radius:14px;background:var(--kalk);border:1px solid var(--linie)}
.kf-erg__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:15.5px}
.kf-erg__k b{color:var(--anthrazit);font-weight:600}
.kf-erg__k .kf-link{margin-left:auto;padding:0;font-size:14.5px}
.kf-ok-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gut);color:var(--gut);font-size:12px;font-weight:700}
.kf-erg__w{display:flex;gap:28px;margin-top:14px}
.kf-erg__w > span{font-size:14.5px;color:var(--leise)}
.kf-erg__w b{display:block;margin-top:2px;font:600 30px/1 var(--sora);letter-spacing:-.02em;color:var(--anthrazit)}
.kf-erg__w b small{font:500 14px var(--sans);color:var(--leise);margin-left:2px}
.kf-erg__w .rot b{color:var(--schlecht)}
.kf-erg__w .gelb b{color:var(--mittel)}
.kf-erg__w .gruen b{color:var(--gut)}
.kf-erg__l{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--linie);display:grid;gap:6px;font-size:15px}
.kf-erg__l:empty{display:none}
.kf-erg__l li{position:relative;padding-left:18px}
.kf-erg__l li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--schlecht)}
.kf-erg__l li.mittel::before{background:#d99a2b}
.kf-erg__e{margin-top:12px;font-size:15px;color:var(--see-tief)}
.kf-erg__e:empty{display:none}
.kf-nein{padding:18px 20px;border-radius:14px;background:var(--kalk);border:1px solid var(--linie);font-size:16px}
.kf-nein b{color:var(--anthrazit)}
.kf-check[hidden],.kf-run[hidden],.kf-erg[hidden],.kf-nein[hidden],.kf-site[hidden]{display:none}
.kf-check,.kf-run,.kf-nein{margin-top:22px}
.kf-site[hidden] + .kf-check{margin-top:0}
.kf-nav{display:none}
.js .kf-nav{display:flex;align-items:center;gap:26px;margin-top:34px}
.js .kf-nav[hidden]{display:none}
.kf-link{padding:8px 0;border:0;background:none;color:var(--leise);font:500 15.5px/1.2 var(--sans);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px;transition:color .2s,text-decoration-color .2s}
.kf-link:hover{color:var(--anthrazit);text-decoration-color:var(--see)}
.kf-link[hidden]{display:none}
#kfWeiter{margin-left:auto;min-width:150px}
#kfWeiter:disabled{background:transparent;border-color:var(--linie);color:#79818b;box-shadow:none;transform:none;cursor:not-allowed;opacity:1}
#kfWeiter[hidden]{display:none}
@media (prefers-reduced-motion: no-preference){ #kfWeiter.kf-wach{animation:kfWach 1.3s ease-out} }
@keyframes kfWach{0%{box-shadow:0 0 0 0 rgba(29,74,134,.9)}60%{box-shadow:0 0 0 14px rgba(29,74,134,0)}100%{box-shadow:none}}
.kf-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 24px;margin:0 0 26px;padding:6px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kf-sum dt{padding:9px 0;font-size:14.5px;color:var(--leise)}
.kf-sum dd{margin:0;padding:9px 0;font-size:15.5px;line-height:1.45;color:var(--anthrazit)}
.kf-sum .is-preis{color:var(--see-tief);font:600 17px/1.4 var(--sora)}
.kf-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:block;margin-bottom:16px;font:600 14px/1.3 var(--sans);color:var(--anthrazit)}
.fld input{display:block;width:100%;margin-top:7px;padding:14px 15px;border-radius:10px;border:1px solid #cacfd5;background:#edeff2;box-shadow:inset 0 1px 2px rgba(20,23,28,.07);font:400 16px/1.4 var(--sans);color:var(--anthrazit)}
.fld input[aria-invalid="true"]{border-color:var(--schlecht);box-shadow:0 0 0 2px rgba(179,38,30,.2)}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.5;margin:6px 0 22px}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--see-tief)}
.consent input[aria-invalid="true"]{outline:2px solid var(--schlecht);outline-offset:2px}
.kf-form .btn{width:100%}
.kf-ok[hidden]{display:none}
.kf-ok:focus{outline:none}
.kf-stempel{display:grid;place-items:center;width:112px;height:112px;margin:4px 0 20px;border-radius:50%;border:3px double var(--gut);color:var(--gut);font:700 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;transform:rotate(-10deg)}
@media (prefers-reduced-motion: no-preference){ .kf-ok.zeigen .kf-stempel{animation:stempel .6s cubic-bezier(.2,1.5,.4,1) both} }
@keyframes stempel{0%{transform:scale(2.2) rotate(-30deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-10deg);opacity:1}}
.kf-ok h3{font-size:28px;letter-spacing:-.02em;margin-bottom:10px}
.kf-ok p{max-width:36em}
/* Kostenrahmen */
.kk{position:relative}
.kk__k{font-size:14.5px;color:var(--leise);margin-bottom:4px}
.kk__v{font:600 clamp(32px,3vw,44px)/1.1 var(--sora);letter-spacing:-.03em;color:var(--tanne);font-variant-numeric:tabular-nums}
.kk__v.lang{font-size:clamp(26px,2.2vw,32px)}
.kk__v span{display:inline-block;white-space:nowrap;transform-origin:left center}
.kk__v small{font:500 17px var(--sans);letter-spacing:0;color:var(--leise);margin-left:2px}
@media (prefers-reduced-motion: no-preference){ .kk__v span.bump,.mbar__kost b.bump{animation:kkBump .45s cubic-bezier(.3,1.6,.5,1)} }
@keyframes kkBump{40%{transform:scale(1.035)}}
.kk__satz{margin-top:8px;font-size:15.5px;line-height:1.55}
.kk__monat{margin-top:6px;font-size:15px;color:var(--see-tief);font-weight:500}
.kk__monat:empty{display:none}
/* Gründerbonus-Sticker am Kostenrahmen (nur ohne bestehende Website, ab Schritt 2) */
.kk-bonus{position:absolute;top:-46px;right:-26px;z-index:3;display:grid;place-content:center;justify-items:center;width:108px;height:108px;
  color:var(--tanne-tief);text-align:center;transform:rotate(-12deg);filter:drop-shadow(0 6px 10px rgba(19,20,23,.28));pointer-events:none}
.kk-bonus[hidden]{display:none}
.kk-bonus::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,#fff27a 0,var(--gelb) 45%,#f2b800 100%);clip-path:polygon(50.0% 0.0%,56.7% 7.5%,65.5% 2.4%,69.5% 11.7%,79.4% 9.5%,80.4% 19.6%,90.5% 20.6%,88.3% 30.5%,97.6% 34.5%,92.5% 43.3%,100.0% 50.0%,92.5% 56.7%,97.6% 65.5%,88.3% 69.5%,90.5% 79.4%,80.4% 80.4%,79.4% 90.5%,69.5% 88.3%,65.5% 97.6%,56.7% 92.5%,50.0% 100.0%,43.3% 92.5%,34.5% 97.6%,30.5% 88.3%,20.6% 90.5%,19.6% 80.4%,9.5% 79.4%,11.7% 69.5%,2.4% 65.5%,7.5% 56.7%,0.0% 50.0%,7.5% 43.3%,2.4% 34.5%,11.7% 30.5%,9.5% 20.6%,19.6% 19.6%,20.6% 9.5%,30.5% 11.7%,34.5% 2.4%,43.3% 7.5%);z-index:-1}
.kk-bonus::after{content:"";position:absolute;inset:0;clip-path:polygon(50.0% 0.0%,56.7% 7.5%,65.5% 2.4%,69.5% 11.7%,79.4% 9.5%,80.4% 19.6%,90.5% 20.6%,88.3% 30.5%,97.6% 34.5%,92.5% 43.3%,100.0% 50.0%,92.5% 56.7%,97.6% 65.5%,88.3% 69.5%,90.5% 79.4%,80.4% 80.4%,79.4% 90.5%,69.5% 88.3%,65.5% 97.6%,56.7% 92.5%,50.0% 100.0%,43.3% 92.5%,34.5% 97.6%,30.5% 88.3%,20.6% 90.5%,19.6% 80.4%,9.5% 79.4%,11.7% 69.5%,2.4% 65.5%,7.5% 56.7%,0.0% 50.0%,7.5% 43.3%,2.4% 34.5%,11.7% 30.5%,9.5% 20.6%,19.6% 19.6%,20.6% 9.5%,30.5% 11.7%,34.5% 2.4%,43.3% 7.5%);background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%) no-repeat;background-size:250% 100%;background-position:130% 0;z-index:-1}
.kk-bonus__z{font:800 27px/1 var(--sora);letter-spacing:-.04em}
.kk-bonus__t{margin-top:3px;font:700 10px/1.15 var(--mono);letter-spacing:.1em;text-transform:uppercase;max-width:78px}
.kk-bonus__d{margin-top:2px;font:700 10.5px/1.1 var(--sora);letter-spacing:-.01em}
.kk-bonus__d:empty{display:none}
.kk__bonus{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--gut);font-weight:600}
.kk__bonus:empty{display:none}
@media (prefers-reduced-motion: no-preference){
  .kk-bonus.los{animation:bonusPop .9s cubic-bezier(.2,1.6,.4,1) both, bonusWippe 4.5s ease-in-out 1.4s infinite}
  .kk-bonus.los::after{animation:bonusGlanz 4.5s ease-in-out .9s infinite}
}
@keyframes bonusPop{0%{transform:scale(0) rotate(-80deg);opacity:0}55%{transform:scale(1.22) rotate(4deg);opacity:1}75%{transform:scale(.94) rotate(-16deg)}100%{transform:scale(1) rotate(-12deg)}}
@keyframes bonusWippe{0%,78%,100%{transform:rotate(-12deg) scale(1)}84%{transform:rotate(-4deg) scale(1.08)}90%{transform:rotate(-17deg) scale(1.02)}95%{transform:rotate(-10deg) scale(1)}}
@keyframes bonusGlanz{0%,55%{background-position:130% 0}80%,100%{background-position:-60% 0}}
@media (max-width:760px){ .kk-bonus{top:-22px;right:-6px;width:86px;height:86px} .kk-bonus__z{font-size:22px} .kk-bonus__t{font-size:9px} .kk-bonus__d{font-size:9.5px}
  .kk--bonus .kk__k,.kk--bonus .kk__v{padding-right:78px} }
.kk__drin{margin-top:10px}
.kk__drin summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:500 14.5px/1.3 var(--sans);color:var(--anthrazit);text-decoration:underline;text-decoration-color:var(--see);text-underline-offset:4px}
.kk__drin summary::-webkit-details-marker{display:none}
.kk__drin summary::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s}
.kk__drin[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.kk__liste{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;font-size:14px;line-height:1.4}
.kk__liste li{position:relative;padding-left:18px}
.kk__liste li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gut);font-weight:700}
@media (prefers-reduced-motion: no-preference){ .kk__liste li.neu{animation:neuMark 1.4s ease} }
@keyframes neuMark{0%,30%{color:var(--see-tief);font-weight:600}100%{color:var(--text)}}
.kk__delta{position:absolute;right:0;top:-6px;padding:5px 9px;border-radius:6px;background:var(--tanne);color:#fff;font:600 13px/1 var(--mono);opacity:0;pointer-events:none;white-space:nowrap}
.kk__delta.los{animation:kkDeltaR 2s linear forwards}
@media (prefers-reduced-motion: no-preference){ .kk__delta.los{animation:kkDelta 1.6s ease forwards} }
@keyframes kkDelta{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(-4px)}75%{opacity:1;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-16px)}}
@keyframes kkDeltaR{0%,85%{opacity:1}100%{opacity:0}}
.kk-note{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--leise)}
.kk-note svg{flex:none;color:var(--see-tief);margin-top:3px}
/* Tourenskizze, die mitwächst */
.tz{margin:0;border-radius:12px;background:var(--papier);border:1px solid var(--linie);overflow:hidden}
.tz svg{display:block;width:100%;height:auto}
.tz__cap{padding:8px 12px 10px;font-size:13px;color:var(--leise);border-top:1px solid var(--linie2)}
.tz-himmel{fill:var(--papier)}
.tz-sonne{fill:var(--gelb)}
.tz-hl{fill:none;stroke:var(--laerche);stroke-opacity:.28;stroke-width:1}
.tz-berg{fill:var(--kalk2);stroke:var(--tanne);stroke-width:1.6;stroke-linejoin:round;transition:d .7s cubic-bezier(.65,0,.25,1)}
.tz-see{fill:var(--see-hell)}
.tz-weg{fill:none;stroke:var(--tanne);stroke-width:1.6;stroke-dasharray:4 3.5;transition:d .7s cubic-bezier(.65,0,.25,1)}
.tz-gipfel{transition:transform .7s cubic-bezier(.65,0,.25,1)}
.tz-gipfel path{fill:none;stroke:var(--anthrazit);stroke-width:1.8;stroke-linecap:round}
.tz-gipfel rect{fill:var(--anthrazit)}
.tz-gipfel text{font:600 10px var(--sans);fill:#fff}
.tz-m{transition:transform .7s cubic-bezier(.65,0,.25,1),opacity .35s}
.tz-m.weg{opacity:0}
.tz-m circle{fill:var(--see-tief);stroke:#fff;stroke-width:1.5}
.tz-m path{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tz-m text{font:600 10.5px var(--sans);fill:var(--anthrazit);paint-order:stroke;stroke:var(--papier);stroke-width:3px}
.tz-start rect{fill:var(--blau)}
.tz-start text{font:700 10px var(--mono);fill:#fff}
.tz-start path{stroke:var(--tanne);stroke-width:1.6}
@media (prefers-reduced-motion: no-preference){ .tz-m.neu{animation:tzNeu .6s cubic-bezier(.2,1.5,.4,1) both} }
@media (prefers-reduced-motion: reduce){ .tz-berg,.tz-weg,.tz-gipfel,.tz-m{transition:none} }
@keyframes tzNeu{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@media (max-width:1099px){
  .kf__body{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .kfo--kachel{min-height:100px}
  .kf-sf button{font-size:14px}
}
@media (max-width:899px){
  .kf__body{grid-template-columns:minmax(0,1fr)}
  .kf__r{border-left:0;border-top:1px solid var(--linie);border-radius:0 0 16px 16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 26px;align-items:start}
  .kf__r .tz{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:639px){
  .kf-kopf{margin-bottom:28px}
  .kf-sf{padding:0 12px}
  .kf-sf::before{left:12px;right:12px;top:25px}
  .kf-sf button{padding:16px 2px 12px 0;font-size:12px;gap:8px}
  .kf-sf button::before{width:14px;height:14px}
  .kf__l{padding:28px 18px 26px}
  .kf-pane__h{font-size:26px}
  .kf-pane__sub{font-size:16px;margin-bottom:22px}
  .kf-grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kf-grid2{grid-template-columns:minmax(0,1fr);gap:10px}
  .kf-grid2.kf-site{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kfo--kachel{min-height:92px;padding:16px;gap:12px}
  .kfo--kachel b{font-size:16px}
  .kfo--pk{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 14px;padding:16px 16px 16px 14px}
  .kfo__berg{width:44px}
  .kfo__p b{font-size:18px}
  .kf-check__row{flex-direction:column}
  .kf-form__row{grid-template-columns:minmax(0,1fr);gap:0}
  .kf-nav{gap:18px;margin-top:26px}
  #kfWeiter{min-width:0;padding:0 22px}
  .kf__r{display:flex;padding:22px 18px 24px}
  .kk__liste{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================ Team */
.team{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px clamp(40px,6vw,96px);align-items:center}
.team .h2.team__h{font-size:clamp(48px,6.2vw,90px);letter-spacing:-.045em}
.crew{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.crew figure{margin:0;padding:10px 10px 14px;border-radius:14px;background:var(--tanne-tief);border:1px solid var(--tanne-linie)}
.crew img{width:100%;height:auto;aspect-ratio:4/4.3;object-fit:cover;object-position:50% 18%;border-radius:9px;background:var(--tanne-karte);filter:sepia(.12) contrast(1.02)}
.crew figcaption{padding:14px 6px 2px}
.crew figcaption span{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9dbde6}
.crew figcaption b{display:block;font:600 18px/1.3 var(--sora);color:#fff;margin-top:4px}
.crew figcaption i{display:block;font-style:normal;font-size:15px;color:var(--d-leise)}
.crew__mehr{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:200px;padding:28px;border:1.5px dashed var(--tanne-linie);border-radius:14px}
.crew__mehr b{font:700 56px/1 var(--sora);color:var(--blau-d);letter-spacing:-.04em}
.crew__mehr p{margin-top:12px;font-size:16px}
.team__credit{grid-column:2;justify-self:end;font:500 11.5px/1.4 var(--mono);color:var(--d-leise)}
.team__credit a{color:var(--d-leise)}

/* ============================================================ Stimmen · Gipfelbuch */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.quote{position:relative;margin:0;display:flex;flex-direction:column;background:var(--papier);border:1px solid var(--linie);border-radius:14px;padding:30px 28px 24px;box-shadow:0 18px 40px -30px rgba(20,23,28,.45);transition:transform .25s ease}
.quote:hover{transform:translateY(-3px)}
.quote::before{content:"“";position:absolute;right:22px;top:4px;font:700 88px/1 var(--sora);color:var(--see);opacity:.28}
.sterne{display:flex;gap:3px;margin-bottom:16px}
.sterne svg{width:18px;height:18px;fill:var(--gelb);stroke:var(--laerche-tief);stroke-width:1}
.quote blockquote{margin:0 0 22px;font-size:18px;line-height:34px;color:var(--anthrazit);flex:1;background-image:repeating-linear-gradient(transparent 0 33px,rgba(154,161,170,.2) 33px 34px)}
.quote figcaption{padding-top:14px;border-top:1px solid var(--linie)}
.quote figcaption b{display:block;font:600 16px/1.3 var(--sora);color:var(--anthrazit)}
.quote figcaption span{font:500 12.5px/1.5 var(--mono);color:var(--leise)}
.gbadge{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex-wrap:wrap;row-gap:2px;padding:7px 16px 7px 7px;border:1px solid var(--linie);border-radius:999px;background:var(--papier);font:500 14px/1.2 var(--sans);color:var(--anthrazit);text-decoration:none;box-shadow:0 10px 24px -16px rgba(20,23,28,.4)}
a.gbadge[href]:hover{border-color:var(--anthrazit)}
.gbadge.ph{border:1px dashed currentColor;border-radius:999px;white-space:normal}
.gbadge__g{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tanne);font:700 15px/1 var(--sora);color:#fff}
.gbadge__wert:empty{display:none}
.gbadge__wert,.gbadge__txt{white-space:nowrap}
.gbadge__wert b{font:700 17px/1 var(--sora);margin-left:4px}
.gbadge__wert .st{color:var(--laerche);letter-spacing:1px}
.gbadge__txt{color:var(--text)}

/* ============================================================ FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq__liste details{border-bottom:1px solid var(--linie)}
.faq__liste details:first-child{border-top:2px solid var(--tanne)}
.faq__liste summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font:600 19px/1.35 var(--sora);color:var(--anthrazit);letter-spacing:-.01em}
.faq__liste summary::-webkit-details-marker{display:none}
.faq__liste summary i{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--linie);transition:background-color .2s,border-color .2s}
.faq__liste summary i::before,.faq__liste summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px;background:var(--anthrazit);transition:transform .3s}
.faq__liste summary i::after{transform:rotate(90deg)}
.faq__liste details[open] summary i{background:var(--see-tief);border-color:var(--see-tief)}
.faq__liste details[open] summary i::before,.faq__liste details[open] summary i::after{background:#fff}
.faq__liste details[open] summary i::after{transform:rotate(0)}
.faq__liste summary:hover i{border-color:var(--see-tief)}
.faq__liste details > div{max-width:68ch;padding:0 56px 26px 0;font-size:17px;line-height:1.65}
.faq__liste details > div p + p,.faq__liste details > div ul + p,.faq__liste details > div p + ul{margin-top:12px}
.faq__liste details > div ul{margin:0;padding:0 0 0 20px;display:grid;gap:8px}
.faq__liste details > div li::marker{color:var(--see)}
.faq__liste details > div strong{color:var(--anthrazit)}

/* ============================================================ Kontakt · Erstgespräch */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kopf form" "direkt form";gap:0 clamp(40px,6vw,96px);align-items:start}
.kontakt__kopf{grid-area:kopf}
.direkt{grid-area:direkt;display:flex;align-items:center;gap:26px;margin-top:40px}
.direkt__bild{position:relative;flex:none;width:132px;height:132px}
.direkt__bild svg{position:absolute;inset:8px 0 0 0;width:100%;height:auto}
.direkt__bild img{position:absolute;left:14px;bottom:0;width:104px;height:auto;border-radius:0 0 40px 40px}
.direkt__k{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-leise)}
.direkt__tel{display:inline-block;margin:6px 0 4px;font:600 clamp(28px,3vw,40px)/1.1 var(--sora);letter-spacing:-.02em;color:var(--blau-d);text-decoration:none}
.direkt__tel:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.direkt a.mail{display:block;color:var(--d-text);font-size:16px;text-underline-offset:3px}
.direkt address{font-style:normal;color:var(--d-leise);font-size:15px;margin-top:2px}
.treffpunkt{display:flex;align-items:center;gap:10px;margin-top:26px;padding:12px 14px;border-radius:10px;border:1px dashed var(--tanne-linie);font-size:15px;color:var(--d-text)}
.treffpunkt svg{flex:none;width:22px;height:22px;color:var(--blau-d)}
.af{grid-area:form;position:relative;border-radius:16px;background:var(--papier);color:var(--text);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);overflow:hidden}
.af :focus-visible{outline-color:var(--anthrazit)}
.af__form{padding:clamp(24px,3vw,36px)}
.af__kopf{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:24px}
.af__titel{font-size:24px;letter-spacing:-.02em;color:var(--anthrazit)!important}
.af__fort{display:flex;gap:18px;list-style:none;margin:0;padding:0;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.af__fort li{display:flex;align-items:center;gap:7px}
.af__fort span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:10.5px}
.af__fort .is-cur{color:var(--anthrazit)}
.af__fort .is-cur span{background:var(--blau);border-color:var(--anthrazit);color:var(--anthrazit)}
.af__fort .is-done{color:var(--gut)}
.af__linie{position:absolute;left:0;right:0;bottom:0;height:0;border-top:2px dashed var(--linie)}
.af__linie i{position:absolute;left:0;top:-2px;height:3px;width:100%;background:var(--see);transform-origin:left;transform:scaleX(.5);transition:transform .6s cubic-bezier(.65,0,.25,1);border-radius:2px}
.af.is-2 .af__linie i{transform:scaleX(1)}
.af__schritt{border:0;margin:0;padding:0;min-width:0}
.js .af__schritt{display:none}
.js .af__schritt.is-on{display:block}
@media (prefers-reduced-motion: no-preference){ .af__schritt.is-on.rein{animation:afRein .45s cubic-bezier(.3,0,.2,1) both} }
@keyframes afRein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.af__h{padding:0;margin:0 0 16px;font:600 21px/1.25 var(--sora);letter-spacing:-.015em;color:var(--anthrazit)}
.af__h:focus{outline:none}
.af__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.af__chip{position:relative;min-height:48px;padding:0 18px 0 16px;border:1.5px solid #cacfd5;border-radius:24px;background:var(--papier);font:600 15.5px/1 var(--sans);color:var(--anthrazit);cursor:pointer;transition:background-color .25s,border-color .2s,color .2s,padding .2s,transform .15s}
.af__chip:hover{border-color:var(--see-tief)}
.af__chip:active{transform:scale(.97)}
.af__chip[aria-pressed="true"]{background:var(--see-tief);border-color:var(--see-tief);color:#fff;padding-left:34px}
.af__chip::before{content:"";position:absolute;left:15px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.af__chip[aria-pressed="true"]::before{transform:rotate(45deg) scale(1)}
.af__plan{margin:0 0 22px;padding:14px 16px;border-radius:10px;background:var(--see-bg);border:1px solid var(--see-rand);box-shadow:inset 3px 0 0 var(--see)}
.af__plan[hidden]{display:none}
.af__plan-k{display:flex;align-items:center;gap:6px;font:600 13px/1.3 var(--sans);color:var(--see-tief)}
.af__weg{margin-left:auto;padding:0;border:0;background:none;font:500 13px var(--sans);color:var(--text);text-decoration:underline;cursor:pointer}
.af__plan dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;font-size:14.5px;line-height:1.4}
.af__plan dt{color:var(--text)}
.af__plan dd{margin:0;color:var(--anthrazit);font-weight:500}
.af__f{position:relative;margin-bottom:14px}
.af__f input,.af__f textarea{display:block;width:100%;height:62px;padding:24px 44px 8px 16px;border:1px solid #cacfd5;border-radius:10px;background:#edeff2;box-shadow:inset 0 1px 2px rgba(20,23,28,.06);font:500 17px/1.3 var(--sans);color:var(--anthrazit);transition:border-color .2s,background-color .2s}
.af__f textarea{height:auto;min-height:104px;padding-top:28px;resize:vertical}
.af__f input:focus,.af__f textarea:focus{outline:none;background:#fff;border-color:#acb2ba}
.af__f label{position:absolute;left:17px;top:21px;font:500 16.5px/1 var(--sans);color:#636b75;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.3,0,.2,1),color .2s}
.af__f input:focus + label,.af__f input:not(:placeholder-shown) + label,.af__f textarea:focus + label,.af__f textarea:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.76);color:var(--anthrazit)}
.af__strich{position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--see);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.25,1)}
.af__f input ~ .af__strich{top:60px;bottom:auto}
.af__f input:focus ~ .af__strich,.af__f textarea:focus ~ .af__strich{transform:scaleX(1)}
.af__ok{position:absolute;right:14px;top:21px;width:20px;height:20px;border-radius:50%;background:var(--gut);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.af__ok::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.af__f.gut .af__ok{opacity:1;transform:none}
.af__f.fehler input{border-color:#c0392b;background:#fff7f6}
.af__f.fehler .af__strich{background:#c0392b;transform:scaleX(1)}
.af__hinweis{margin:6px 2px 0;font-size:13.5px;line-height:1.4;color:var(--schlecht)}
.af__hinweis:empty{display:none}
.af__zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.af__ds{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:8px 0 0;font-size:14px;line-height:1.5;cursor:pointer}
.af__ds input{position:absolute;left:0;top:0;width:22px;height:22px;margin:0;opacity:0}
.af__box{position:relative;width:22px;height:22px;border:1.5px solid #8a929c;border-radius:6px;background:#fff;transition:background-color .2s,border-color .2s}
.af__box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.af__ds input:checked + .af__box{background:var(--see-tief);border-color:var(--see-tief)}
.af__ds input:checked + .af__box::after{transform:rotate(45deg) scale(1)}
.af__ds input:focus-visible + .af__box{outline:3px solid var(--anthrazit);outline-offset:2px}
.af__hinweis--ds{margin-left:34px}
.af__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.af__nav{display:flex;align-items:center;gap:18px;margin-top:22px}
.af__weiter,.af__senden{margin-left:auto;min-width:190px}
.af__zurueck{padding:8px 0;border:0;background:none;font:500 15.5px var(--sans);color:var(--text);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.af__zurueck:hover{color:var(--anthrazit);text-decoration-color:var(--see)}
.af__senden{position:relative;overflow:hidden}
.af__lade{position:absolute;left:18px;right:18px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:rgba(20,23,28,.18);opacity:0;overflow:hidden}
.af__lade i{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--anthrazit);border-radius:3px}
.af__senden.laedt{pointer-events:none}
.af__senden.laedt .af__senden-t{opacity:0}
.af__senden.laedt .af__lade{opacity:1}
@media (prefers-reduced-motion: no-preference){ .af__senden.laedt .af__lade i{animation:afLade 1s ease-in-out infinite} }
@keyframes afLade{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.af__danke{padding:clamp(28px,4vw,44px);text-align:center}
.af__danke[hidden]{display:none}
.af__danke:focus{outline:none}
.af__bild{position:relative;width:120px;height:120px;margin:0 auto}
.af__bild svg{position:absolute;inset:10px 0 0;width:100%;height:auto}
.af__bild img{position:absolute;left:14px;bottom:0;width:92px;height:auto;border-radius:0 0 36px 36px}
.af__haken{display:block;width:52px;height:52px;margin:-22px auto 10px;position:relative;z-index:1;background:#fff;border-radius:50%}
.af__hk-k{fill:#fff;stroke:var(--gut);stroke-width:2.5}
.af__hk-p{fill:none;stroke:var(--gut);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.af__danke h3{font-size:30px;letter-spacing:-.02em;margin-bottom:10px;color:var(--anthrazit)!important}
.af__danke p{max-width:34em;margin:0 auto}
@media (prefers-reduced-motion: no-preference){
  .af.faltet .af__form{animation:afFalt .45s cubic-bezier(.6,0,.4,1) both}
  .af__danke.zeigen{animation:afAuf .55s cubic-bezier(.2,.9,.3,1.2) both}
  .af__danke.zeigen .af__hk-k{stroke-dasharray:1px 1px;animation:zeichnen .6s ease .25s both}
  .af__danke.zeigen .af__hk-p{stroke-dasharray:1px 1px;animation:zeichnen .45s ease .7s both}
}
@keyframes afFalt{to{opacity:0;transform:perspective(900px) rotateX(-14deg) scale(.94)}}
@keyframes afAuf{from{opacity:0;transform:perspective(900px) rotateX(14deg) scale(.94)}to{opacity:1;transform:none}}

/* ============================================================ Fuß */
.fuss{background:var(--tanne-tief);color:var(--d-leise);padding:64px 0 32px;font-size:15px}
.fuss__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:40px}
.fuss .fuss__h{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-text);margin-bottom:16px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a{color:var(--d-text);text-decoration:none}
.fuss a:hover{color:var(--blau-d)}
.fuss :focus-visible{outline-color:var(--blau-d)}
.fuss__logo{display:inline-block;margin-bottom:16px}
.fuss__logo svg{display:block;height:60px;width:auto}
.fuss__beweis{font:500 13px/1.8 var(--mono);color:var(--d-text)}
.fuss__beweis b{color:var(--blau-d);font-weight:600}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--tanne-linie);font:500 12px/1.5 var(--mono)}

/* Handy-Leiste */
.mbar{display:none}

/* ============================================================ Responsiv */
@media (max-width:1099px){
  .ref{grid-column:span 6}
  .ref--gross{grid-column:span 12}
  .ls{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .ref__kopf,.team,.faq,.kontakt{grid-template-columns:minmax(0,1fr)}
  .kontakt{grid-template-areas:"kopf" "form" "direkt"}
  .af{margin-top:28px}
  .team__credit{grid-column:1;justify-self:start}
  .quotes{grid-template-columns:1fr}
  .fuss__grid{grid-template-columns:1fr 1fr}
  .revier{max-width:520px}
}
@media (max-width:639px){
  body{font-size:16.5px;padding-bottom:68px}
  .wrap{width:calc(100% - 40px)}
  .h1__m{font-size:clamp(34px,10.4vw,46px)}
  .hero__lead{margin:22px 0 26px}
  .cta-row .btn{flex:1 1 100%}
  .fakten{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .fakten li b{font-size:21px}
  .beweis__in{gap:8px 18px;font-size:13px;padding:14px 0}
  .ls{grid-template-columns:1fr}
  .ls__k{min-height:0}
  .ref,.ref--gross{grid-column:span 12}
  .crew{gap:14px}
  .crew figcaption b{font-size:16px}
  .crew__mehr b{font-size:42px}
  .crew__mehr{padding:18px;min-height:0}
  .faq__liste details > div{padding-right:0}
  .faq__liste summary{font-size:17.5px}
  .direkt{flex-direction:column;align-items:flex-start;gap:16px}
  .fuss__grid{grid-template-columns:1fr}
  .revier .rv-heim text,.revier .rv-t{font-size:40px}
  .revier .rv-heim circle{r:22px}
  .kopf-split{margin-bottom:34px}
  .af__zwei{grid-template-columns:1fr}
  .af__chip{min-height:46px;font-size:15px}
  .af__weiter,.af__senden{min-width:0;flex:1}
  .mbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(19,20,23,.97);border-top:1px solid var(--tanne-linie)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:9px;font:600 16px/1 var(--sans);text-decoration:none}
  .mbar__tel{color:var(--d-text);border:1px solid rgba(231,234,239,.3)}
  .mbar__tel svg{color:var(--blau-d)}
  .mbar__cta{background:var(--blau);color:#fff}
  .mbar .mbar__kost{display:none}
  .mbar.is-kf{grid-template-columns:minmax(0,1fr) 48px auto}
  .mbar.is-kf .mbar__kost{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;padding:0 4px;color:#fff}
  .mbar__kost small{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-leise);white-space:nowrap}
  .mbar__kost b{max-width:100%;font:700 16px/1.1 var(--mono);letter-spacing:-.02em;color:var(--blau-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar.is-kf .mbar__tel span{display:none}
  .mbar.is-kf .mbar__cta{padding:0 18px}
  @media (max-width:359px){ .mbar{gap:6px;padding-left:8px;padding-right:8px} .mbar a{font-size:15px;gap:6px} }   /* 320 px: kein Überstand */
}

/* ============================================================ Planer: Website-Vorschau, die mitwächst (aus B, in G-Linien) */
.kz{margin:0}
.kz__vp{position:relative;padding:10px 8px;border:1px solid var(--linie);border-radius:12px;background:var(--papier);overflow:hidden}
.kz__vp::after{content:"";position:absolute;inset:0;border-top:2px solid var(--see);filter:drop-shadow(0 0 6px rgba(91,149,207,.7));opacity:0;pointer-events:none}
.kz__vp.scan::after{opacity:1}
@media (prefers-reduced-motion: no-preference){ .kz__vp.scan::after{animation:kzScan 1.2s ease-in-out infinite alternate} }
@keyframes kzScan{from{transform:translateY(0)}to{transform:translateY(100%)}}
.kz__svg{display:block;width:100%;height:auto;overflow:hidden}
.kz__cap{margin-top:8px;font-size:13.5px;color:var(--leise)}
.kz .ln{fill:none;stroke:var(--tanne);stroke-opacity:.62;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.kz .ln.th{stroke:var(--laerche);stroke-opacity:.5}
.kz .ln.hd{stroke-width:2.6;stroke-opacity:.8}
.kz .ln.y{stroke:var(--see-tief);stroke-opacity:1}
.kz .fl{fill:rgba(20,23,28,.05)}
.kz .fw{fill:rgba(20,23,28,.62)}
.kz .fy{fill:rgba(91,149,207,.22)}
.kz .fg{fill:var(--see)}
.kz .hatch{fill:url(#kzHatch)}
.kz .ds{fill:none;stroke:var(--blau);stroke-width:1.4;stroke-dasharray:4 3}
.kz text{font-family:var(--mono)}
.kz .tw{font-size:7.5px;fill:var(--text)}
.kz .tg rect{fill:var(--blau)}
.kz .tg text{font-size:9px;font-weight:700;fill:var(--anthrazit);letter-spacing:.02em}
.kz .kz-page{transition:transform .6s cubic-bezier(.65,0,.25,1)}
.kz .kz-m{transition:transform .6s cubic-bezier(.65,0,.25,1),opacity .3s}
.kz .kz-m.weg{opacity:0}
.kz .kz-rahmen,.kz .kz-care__r{transition:d .6s cubic-bezier(.65,0,.25,1)}
.kz .kz-care{opacity:0;transition:opacity .4s}
.kz .kz-care.an{opacity:1}
.kz .kz-flash{opacity:0;animation:kzFlash 2.8s ease .35s both}
@keyframes kzFlash{0%{opacity:0}12%{opacity:1}78%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .kz .neu .ln{stroke-dasharray:1px 1px;animation:zeichnen .85s cubic-bezier(.5,0,.2,1) both;animation-delay:var(--d,0s)}
  .kz .neu .fd{animation:kzFade .5s ease both;animation-delay:calc(var(--d,0s) + .35s)}
}
@media (prefers-reduced-motion: reduce){ .kz .kz-page,.kz .kz-m,.kz .kz-rahmen,.kz .kz-care__r{transition:none} }
@keyframes kzFade{from{opacity:0}to{opacity:1}}
/* Tourenstreifen oben: Stimmung und Fortschritt */
.tz-geh{fill:none;stroke:var(--tuerkis);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 .6px rgba(20,23,28,.9));transition:d .7s cubic-bezier(.65,0,.25,1),stroke-dasharray .7s cubic-bezier(.65,0,.25,1)}
@media (prefers-reduced-motion: reduce){ .tz-geh{transition:none} }

/* Eingangsanimation: die Wanderkarte des Planers zeichnet sich auf (Skizze → Raster → fertig) */
.kf-bau{display:none}
.kf--vor .kf-bau,.kf--an .kf-bau{display:block;position:absolute;inset:0;z-index:5;pointer-events:none}
.kf-bau__cover{position:absolute;inset:0;border-radius:16px;border:1px solid var(--linie);background-color:var(--kalk);transform-origin:right center;
  background-image:repeating-radial-gradient(ellipse at 78% 30%,transparent 0 26px,rgba(154,161,170,.16) 26px 27px),repeating-radial-gradient(ellipse at 18% 88%,transparent 0 22px,rgba(154,161,170,.12) 22px 23px)}
.kf-bau__line{position:absolute;left:0;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--see);box-shadow:0 0 16px 2px rgba(91,149,207,.55);opacity:0}
.kf-bau__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.wf-p{fill:none;stroke:var(--tanne);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1px 1px;stroke-dashoffset:1px}
.wf-p.fein{stroke-width:1;stroke:var(--laerche);stroke-opacity:.8}
.wf-grid rect{fill:rgba(91,149,207,.08);stroke:rgba(31,86,144,.3);stroke-width:1}
.wf-grid,.wf-dim > g{opacity:0}
.wf-dim .o{fill:none;stroke:var(--laerche);stroke-width:1.3;stroke-dasharray:5 4}
.wf-dim .m{fill:none;stroke:var(--laerche);stroke-width:1.2}
.wf-dim .pl{fill:var(--kalk)}
.wf-dim .tg{fill:var(--blau)}
.wf-dim text{font:700 10.5px var(--mono);letter-spacing:.06em;fill:var(--anthrazit)}
.wf-dim text.mt{font-weight:600;fill:var(--laerche-tief)}
.wf-slot{fill:none;stroke:rgba(20,23,28,.35);stroke-width:1;stroke-dasharray:4 4;opacity:0}
.kf--vor .kf-snap,.kf--an .kf-snap{opacity:0}
.kf--an1 .wf-p{animation:zeichnen .55s cubic-bezier(.5,0,.3,1) var(--d,0s) both}
.kf--an2 .wf-grid{opacity:1;transition:opacity .5s ease}
.kf--an2 .wf-dim > g{animation:wfIn .45s cubic-bezier(.2,1.3,.4,1) var(--d,0s) both}
.kf--an3 .kf-bau__cover{transform:scaleX(0);transition:transform .7s cubic-bezier(.65,0,.25,1)}
.kf--an3 .kf-bau__line{animation:wfWipe .7s cubic-bezier(.65,0,.25,1) both,wfAus .18s linear .6s forwards}
.kf--an3 .wf-pen,.kf--an3 .wf-dim,.kf--an3 .wf-grid{opacity:0;transition:opacity .55s ease}
.kf--an3 .wf-slot{opacity:1;transition:opacity .35s ease .3s}
.kf--an4 .wf-slot{animation:wfAus .2s linear calc(var(--i, 0) * 45ms + .12s) forwards}
.kf--an4 .kf-snap{animation:kfSnap .42s cubic-bezier(.2,1.3,.4,1) calc(var(--i, 0) * 45ms) both}
.kf--kurz.kf--an1 .wf-p{animation-duration:.7s}
.kf--kurz.kf--an4 .kf-snap{animation-duration:.5s;animation-delay:calc(var(--i, 0) * 45ms)}
.kf--kurz.kf--an4 .wf-slot{animation-delay:calc(var(--i, 0) * 45ms + .08s)}
.kf--kurz.kf--an3 .kf-bau__cover{transition-duration:.7s}
.kf--kurz.kf--an3 .kf-bau__line{animation-duration:.7s,.2s;animation-delay:0s,.55s}
@keyframes wfIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes wfWipe{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(var(--kfw,1000px))}}
@keyframes wfAus{to{opacity:0}}
@keyframes kfSnap{0%{opacity:0;transform:translateY(-16px) scale(1.05)}55%{opacity:1;transform:translateY(2px) scale(.995)}100%{opacity:1;transform:none}}
.kf--bereit .kf-pane.is-on .kf-pane__h::after{content:"";display:inline-block;width:3px;height:.8em;margin-left:8px;background:var(--see);vertical-align:-.04em}
@media (prefers-reduced-motion: no-preference){ .kf--bereit .kf-pane.is-on .kf-pane__h::after{animation:blinken 1.1s steps(1) infinite} }
@media (max-width:899px){
  .kf__r .kz{grid-column:2;grid-row:1 / span 3}
  .kf__r .kk{grid-column:1;grid-row:1}
  .kf__r .tz{grid-column:1;grid-row:2}
  .kf__r .kk-note{grid-column:1;grid-row:3}
}
@media (max-width:639px){ .kf__r .kz,.kf__r .kk,.kf__r .tz,.kf__r .kk-note{grid-column:auto;grid-row:auto} }

/* ============================================================ Leistungen: kleine Fenster mit Bewegung (aus B, in G-Linien) */
.ls__k{padding:12px 12px 24px;min-height:0}
.ls__k > :not(.ls__fenster):not(.ls__hl){margin-left:14px;margin-right:14px}
.ls__k--rucksack{padding:28px 28px 26px}
.ls__k--rucksack > *{margin-left:0!important;margin-right:0!important}
.ls__hl{top:auto;bottom:-70px}
.ls__fenster{position:relative;border-radius:10px;padding:9px 12px 6px;margin-bottom:16px;background:var(--kalk);border:1px solid var(--linie2);overflow:hidden}
.ls__fkopf{display:flex;align-items:center;gap:9px;padding-bottom:7px;border-bottom:1px solid var(--linie2);font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tanne)}
.ls__chip{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--see-bg);color:var(--see-tief);box-shadow:inset 0 0 0 1px var(--see-rand)}
.ls__chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ls__nr{margin-top:4px}
.lb-svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.lb-svg *{transform-box:fill-box;transform-origin:center}
.lb-l{fill:none;stroke:rgba(20,23,28,.5);stroke-width:1.3}
.lb-th{stroke-opacity:.5}
.lb-f1{fill:rgba(20,23,28,.72)}
.lb-f3{fill:rgba(20,23,28,.36)}
.lb-f4{fill:rgba(20,23,28,.045);stroke:rgba(20,23,28,.16);stroke-width:1}
.lb-f4b{fill:rgba(20,23,28,.16)}
.lb-t{font:500 11px var(--mono);fill:var(--anthrazit)}
.lb-tg{fill:var(--see-tief);font-weight:700}
.lb-ts{font-size:8.5px}
.lb-tz{font:700 17px var(--sora);fill:var(--tanne)}
.lb-kreis{fill:none;stroke:rgba(20,23,28,.35);stroke-width:1.4}
.lb-haken{fill:none;stroke:var(--gut);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ani-tippen{transform:scaleX(0);transform-origin:right center}
.ani-ring,.ani-ring2{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .spielt .ani-zeiger{animation:lbZeiger 4s cubic-bezier(.65,0,.35,1) infinite}
  .spielt .ani-ring{animation:lbRing 4s ease-out infinite}
  .spielt .ani-druck{animation:lbDruck 4s ease infinite}
  .spielt .ani-tippen{animation:lbTippen 5s steps(16) infinite}
  .spielt .ani-cursor{animation:lbCursor 1s steps(2) infinite}
  .spielt .ani-steigen{animation:lbSteigen 5s cubic-bezier(.65,0,.35,1) infinite}
  .spielt .ani-sinken{animation:lbSinken 5s cubic-bezier(.65,0,.35,1) infinite}
  .spielt .ani-zeiger2{animation:lbZeiger2 2.4s cubic-bezier(.65,0,.35,1) infinite}
  .spielt .ani-ring2{animation:lbRing2 2.4s ease-out infinite}
  .spielt .ani-druck2{animation:lbDruck2 2.4s ease infinite}
  .spielt .ani-zaehl{animation:lbZaehl 9.6s step-end infinite}
  .spielt .ani-schreib{transform-origin:left center;animation:lbSchreib 6s ease-out infinite}
  .ani-v1{animation-delay:0s}.ani-v2{animation-delay:.35s}.ani-v3{animation-delay:.7s}.ani-v4{animation-delay:1.05s}.ani-v5{animation-delay:1.4s}.ani-v6{animation-delay:1.75s}
  .spielt .ani-feder{animation:lbFeder 6s ease-in-out infinite}
  .spielt .ani-ticket .lb-haken{animation:lbHaken 6s ease infinite}
  .spielt .ani-ticket .lb-kreis{animation:lbKreis 6s ease infinite}
  .spielt .ani-t2 .lb-haken,.spielt .ani-t2 .lb-kreis{animation-delay:1s}
  .spielt .ani-t3 .lb-haken,.spielt .ani-t3 .lb-kreis{animation-delay:2s}
}
@keyframes lbZeiger{0%,12%{transform:translate(120px,24px)}45%,62%{transform:translate(0,0)}52%{transform:translate(0,0) scale(.82)}100%{transform:translate(120px,24px)}}
@keyframes lbRing{0%,50%{opacity:0;transform:scale(.3)}53%{opacity:1}70%,100%{opacity:0;transform:scale(1.8)}}
@keyframes lbDruck{0%,49%,57%,100%{transform:none}52%{transform:scale(.93)}}
@keyframes lbTippen{0%{transform:scaleX(1)}55%,100%{transform:scaleX(0)}}
@keyframes lbCursor{50%{opacity:0}}
@keyframes lbSteigen{0%,20%{transform:translateY(62px)}55%,100%{transform:translateY(0)}}
@keyframes lbSinken{0%,20%{transform:translateY(0)}55%,100%{transform:translateY(30px)}}
@keyframes lbZeiger2{0%{transform:translate(70px,40px)}40%,60%{transform:translate(0,0)}48%{transform:translate(0,0) scale(.82)}100%{transform:translate(70px,40px)}}
@keyframes lbRing2{0%,46%{opacity:0;transform:scale(.3)}49%{opacity:1}66%,100%{opacity:0;transform:scale(1.8)}}
@keyframes lbDruck2{0%,45%,53%,100%{transform:none}48%{transform:scale(.985)}}
@keyframes lbZaehl{0%{transform:translateY(0)}25%{transform:translateY(-22px)}50%{transform:translateY(-44px)}75%{transform:translateY(-66px)}}
@keyframes lbSchreib{0%,3%{transform:scaleX(0)}18%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes lbFeder{0%{transform:translate(-90px,-70px)}18%{transform:translate(-50px,-58px)}35%{transform:translate(-40px,-30px)}55%{transform:translate(-10px,0)}88%{transform:translate(0,0)}100%{transform:translate(-90px,-70px)}}
@keyframes lbHaken{0%,15%{opacity:0;transform:scale(.3)}25%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lbKreis{0%,15%{fill:none;stroke:rgba(20,23,28,.35)}25%,90%{fill:rgba(35,121,75,.14);stroke:#23794b}100%{fill:none;stroke:rgba(20,23,28,.35)}}
.ls__wisch{display:none}
/* Handy: wischbares Band mit Einrasten statt langer Liste */
@media (max-width:639px){
  .ls{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -20px;padding:4px 20px 18px}
  .ls::-webkit-scrollbar{display:none}
  .ls__k{flex:0 0 min(300px,82vw);scroll-snap-align:center}
  .ls__wisch{display:block;margin-top:4px;text-align:center;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--leise)}
}
.ls__k[data-spiel]{cursor:default}
.ls__fenster::after{content:"";position:absolute;right:10px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--linie);transition:background-color .3s}
.spielt .ls__fenster::after{background:var(--see)}

/* ============================================================ Gipfel: Trefferkarte „Platz 1“ (aus B) */
.serp{position:relative;margin-top:28px;max-width:440px;padding:16px 16px 14px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 22px 40px -30px rgba(20,23,28,.6)}
.serp .serp__q{display:flex;align-items:center;gap:9px;min-height:40px;padding:7px 14px;border-radius:20px;border:1px solid var(--linie);font:500 15px/1.3 var(--sans);color:var(--anthrazit)}
.serp__such{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.serp__q svg{width:16px;height:16px;color:var(--leise);flex:none}
.serp__q .serp__bsp{border:1px dashed currentColor;border-radius:6px;padding:0 .35em;white-space:nowrap;flex:none;margin-left:auto;font:500 11.5px/1.6 var(--mono);color:var(--leise)}
.serp ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.serp li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px}
.serp__pos{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--kalk2);font:700 13px/1 var(--mono);color:var(--leise)}
.serp li > div{flex:1;min-width:0}
.serp__rest i{display:block;height:7px;border-radius:4px;background:var(--linie2);margin:4px 0;width:62%}
.serp__rest i + i{width:84%}
.serp__hit{background:var(--blau-hell);box-shadow:inset 3px 0 0 var(--blau)}
.serp__hit .serp__pos{background:var(--tanne);color:var(--blau-d)}
.serp__hit small{display:block;font:500 12px/1.3 var(--mono);color:#126b4c}
.serp__hit strong{display:block;font:600 15.5px/1.25 var(--sora);color:#1b4a7a;margin:2px 0}
.serp__hit span:not(.serp__pos){display:block;font-size:13.5px;line-height:1.35;color:var(--text)}
.serp__stempel{position:absolute;right:-18px;top:-26px;width:78px;height:60px;transform:rotate(-9deg)}
.serp__stempel svg{width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion: no-preference){
  .js .serp .serp__hit{transform:translateY(96px);transition:transform .9s cubic-bezier(.3,1.25,.4,1) .2s}
  .js .serp .serp__rest{transition:transform .9s cubic-bezier(.3,1.25,.4,1) .2s}
  .js .serp:not(.an) .serp__rest{transform:translateY(-46px)}
  .js .serp.an .serp__hit{transform:none}
  .js .serp .serp__stempel{opacity:0;transform:rotate(-9deg) scale(1.8);transition:opacity .3s ease 1s,transform .5s cubic-bezier(.2,1.5,.4,1) 1s}
  .js .serp.an .serp__stempel{opacity:1;transform:rotate(-9deg) scale(1)}
}
@media (min-width:900px) and (max-height:820px){ .serp li:last-child{display:none} .serp{margin-top:20px} }
@media (max-width:639px){ .serp{margin-right:10px} .serp__stempel{right:4px;width:58px;height:44px} .serp__q{font-size:14px} }

/* ============================================================ Feedback-Runde: Gipfelcheck mit zwei Wegen */
.tb[data-state="leer"]{opacity:1;filter:none}
/* Leerzustand ohne Deckkraft: blasse Schrift fiel durch die Kontrastprüfung (WCAG 1.4.3, Bericht 06.11.2026).
   Gedämpft wird über die Farben, die alle mindestens 4,5 : 1 auf Weiß halten. */
.tb[data-state="leer"] .tb__ww{filter:saturate(.25)}
.tb[data-state="leer"] .ww b{color:var(--text);font-weight:500}
.tb[data-state="leer"] .ww__kopf{color:var(--text)}
.hp-flaeche{fill:var(--kalk2)}
.hp-kl{font:700 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--see-tief)}
.hp-kl--klein{font:500 11px var(--mono);letter-spacing:.06em;text-transform:none;fill:var(--leise)}
.hp-weg--ki{stroke:var(--see-tief)}
.hp-weg--g{stroke:var(--tanne)}
.hp-gipfel{font:600 12px var(--mono)}
@media (prefers-reduced-motion: no-preference){
  .js .tb:not(.gezeichnet) .hp-weg{stroke-dasharray:1px 1px;stroke-dashoffset:1px}
  .js .tb.gezeichnet .hp-weg{stroke-dasharray:1px 1px;animation:zeichnen 1.9s cubic-bezier(.45,0,.2,1) .1s both}
  .js .tb:not(.gezeichnet) .hp-st,.js .tb:not(.gezeichnet) .hp-kreuz-g{opacity:0}
  .js .tb.gezeichnet .hp-st{animation:stPop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.45s + var(--n,0) * .3s);transform-box:fill-box;transform-origin:center}
  .js .tb.gezeichnet .hp-kreuz-g{animation:kzFade .6s ease 1.9s both}
}
.sum__h{font-size:22px;letter-spacing:-.015em;color:#fff;margin-bottom:8px}
.sum__klein{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--d-leise)}
.sum__klein:empty{display:none}
.sum__klein a{color:#fff;white-space:nowrap}
.sum__zelle--pdf .reihe{margin-top:14px}
.sum__zelle--pdf .inp{background:#ffffff}
.sum__zelle--pdf .karte-k__ok{color:#9fe3c0}
.sum__zelle--pdf .reihe[hidden]{display:none}
.messer + .messer{margin-bottom:12px}
@media (max-width:1099px){ .tb__sum{grid-template-columns:1fr 1fr} .tb__sum .sum__zelle:last-child{grid-column:1 / -1;border-left:0;border-top:1px solid var(--tanne-linie)} }
@media (max-width:899px){ .tb__sum{grid-template-columns:1fr} }
@media (max-width:639px){ .hp-kl{font-size:15px} }

/* Hero: ruhigerer Zweitlink */
.hero__alt{margin-top:22px;font-size:15px}
.hero__alt a{font-weight:500;color:var(--see-tief);text-decoration:none;border-bottom:1px solid rgba(31,86,144,.35);padding-bottom:1px}
.hero__alt a:hover{border-bottom-color:var(--see-tief)}
.btn--linie svg{color:var(--see-tief)}
/* Kopfzeile: Angebot-Knopf erst, wenn der Hero-Knopf aus dem Blick ist */
.hdr__cta{transition:opacity .3s ease,transform .3s ease,visibility 0s}
.hdr.cta-weg .hdr__cta{opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.ani-sinken{transform:translateY(30px)}

/* ============================================================ Team: ruhige Porträtreihe */
.crew2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
@media (min-width:640px) and (max-width:1023px){ .crew2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto} }
.crew2 figure{margin:0}
.crew2__bild{padding:8px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 18px 40px -34px rgba(20,23,28,.55)}
.crew2 img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;border-radius:9px;background:var(--kalk2);filter:sepia(.08)}
.crew2 figcaption{padding:16px 6px 0}
.crew2 figcaption b{display:block;font:600 18px/1.25 var(--sora);color:var(--anthrazit);letter-spacing:-.01em}
.crew2 figcaption span{display:block;margin-top:4px;font:500 12.5px/1.45 var(--mono);letter-spacing:.04em;color:var(--leise)}
.crew2 figcaption q{display:inline-block;margin-top:10px;font-size:15px;color:var(--text);quotes:"„" "“"}
.crew2__fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px;margin-top:34px;padding-top:24px;border-top:1px solid var(--linie)}
.crew2__plus{display:flex;align-items:center;gap:14px;max-width:560px;font-size:16px}
.crew2__plus b{color:var(--anthrazit)}
.crew2__punkte{display:flex;flex:none}
.crew2__punkte i{width:30px;height:30px;border-radius:50%;background:var(--kalk);border:1.5px dashed var(--laerche);margin-left:-8px}
.crew2__punkte i:first-child{margin-left:0}
.crew2__fakten{display:flex;gap:28px;list-style:none;margin:0;padding:0;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.crew2__fakten b{display:block;font:600 20px/1.1 var(--sora);letter-spacing:-.02em;text-transform:none;color:var(--anthrazit)}
#team .team__credit{margin-top:16px;text-align:right}
#team .team__credit,#team .team__credit a{color:var(--leise)}
@media (max-width:639px){
  .crew2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px 8px;gap:14px}
  .crew2::-webkit-scrollbar{display:none}
  .crew2 li{flex:0 0 72vw;scroll-snap-align:center}
  .crew2__fakten{gap:18px}
  #team .team__credit{text-align:left}
}

/* ============================================================ Kontakt: hell und ruhig */
.kontakt-ruhig{background:var(--kalk)}
.kontakt-ruhig .h2{font-size:clamp(30px,3.4vw,46px)}
.kontakt-ruhig .marke{color:var(--see-tief)}
.direkt2{display:flex;align-items:center;gap:18px;margin-top:34px;padding-top:24px;border-top:1px solid var(--linie)}
.direkt2__bild{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--linie)}
.direkt2__name{font:600 17px/1.3 var(--sora);color:var(--anthrazit)}
.direkt2__name span{font:400 15px var(--sans);color:var(--leise)}
.direkt2__zeile{margin-top:4px;font-size:16px}
.direkt2__zeile a{color:var(--anthrazit);text-decoration:none;border-bottom:1px solid var(--linie);white-space:nowrap}
.direkt2__zeile a:hover{border-bottom-color:var(--see-tief)}
.direkt2__adr{margin-top:4px;font-size:14.5px;color:var(--leise)}
.kontakt-ruhig .af{background:var(--papier);border:1px solid var(--linie);box-shadow:0 24px 50px -40px rgba(20,23,28,.5)}
.kontakt-ruhig .af__fort{font-size:11.5px}
.kontakt-ruhig .af__fort .is-cur span{background:var(--tanne);border-color:var(--tanne);color:#fff}
.kontakt-ruhig .af__linie{border-top:1px solid var(--linie2)}
.kontakt-ruhig .af__linie i{height:2px;top:-1.5px;background:var(--tanne)}
.kontakt-ruhig .af__chips{gap:8px}
.kontakt-ruhig .af__chip{min-height:40px;padding:0 15px;border-width:1px;border-color:var(--linie);font-size:14.5px;font-weight:500}
.kontakt-ruhig .af__chip[aria-pressed="true"]{background:var(--see-bg);border-color:var(--see-tief);color:var(--see-tief);padding-left:30px}
.kontakt-ruhig .af__chip::before{border-color:var(--see-tief);left:13px}
.kontakt-ruhig .af__f input,.kontakt-ruhig .af__f textarea{background:#f6f8fa;box-shadow:none;border-color:var(--linie)}
.kontakt-ruhig .af__f textarea{min-height:88px}
.kontakt-ruhig .af__h{font-size:19px}
@media (max-width:639px){ .direkt2{align-items:flex-start} .direkt2__zeile a{white-space:normal} }

/* Gipfel-Trefferkarte: Google und KI-Suche nebeneinander */
.serp{max-width:480px}
.serp__zwei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.serp .serp__k{margin:0 0 6px;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--see-tief)}
.serp__g ol{margin:0;gap:4px}
.serp__g li{padding:7px 8px;gap:9px}
.serp__g .serp__pos{width:24px;height:24px;font-size:12px}
.serp__g .serp__hit strong{font-size:13.5px}
.serp__g .serp__hit small{font-size:11px}
.serp__ki{padding:10px 12px;border-radius:9px;background:var(--see-bg);box-shadow:inset 3px 0 0 var(--see)}
.serp .serp__antwort{font-size:13.5px;line-height:1.45;color:var(--anthrazit)}
.serp__antwort b{color:var(--see-tief)}
.serp__quelle{display:inline-block;margin-top:7px;padding:3px 7px;border-radius:5px;background:var(--papier);border:1px solid var(--see-rand);font:500 11px/1.3 var(--mono);color:var(--see-tief)}
@media (prefers-reduced-motion: no-preference){
  .js .serp .serp__hit{transform:translateY(40px)}
  .js .serp:not(.an) .serp__rest{transform:translateY(-40px)}
  .js .serp .serp__ki{opacity:0;transform:translateY(8px);transition:opacity .6s ease .7s,transform .6s ease .7s}
  .js .serp.an .serp__ki{opacity:1;transform:none}
}
@media (max-width:420px){ .serp__zwei{grid-template-columns:1fr} }

/* ============================================================ Team: Farbfotos auf Tirol-Farbflächen, sanft animiert */
.crew2 li{--flaeche:var(--see-bg);--akzent:var(--see-tief);--chip:#eff5fc}
.crew2 li.crew2--alm{--flaeche:#e6eef8;--akzent:#285874;--chip:#e6eef8}
.crew2 li.crew2--laerche{--flaeche:var(--laerche-bg);--akzent:var(--laerche-tief);--chip:#eceef1}
.crew2__bild{position:relative;overflow:hidden;padding:12px;background:var(--flaeche);border-color:transparent;box-shadow:0 20px 44px -34px rgba(20,23,28,.6)}
.crew2__bild::before{content:"";position:absolute;width:70%;aspect-ratio:1;right:-18%;top:-22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.crew2__bild::after{content:"";position:absolute;inset:12px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(20,23,28,.06);pointer-events:none}
.crew2 img{position:relative;filter:none;aspect-ratio:4/4.4;object-position:50% 18%}
.crew2 figcaption span.crew2__chip{display:inline-block;margin-top:8px;padding:5px 9px;border-radius:6px;background:var(--chip);color:var(--akzent);font:600 11.5px/1.3 var(--mono);letter-spacing:.03em}
.crew2 figcaption q{display:block;margin-top:12px;padding-left:12px;border-left:2px solid var(--akzent);font-size:14.5px;line-height:1.5;color:var(--text)}
@media (prefers-reduced-motion: no-preference){
  .js .crew2 li{opacity:0;transform:translateY(28px);transition:opacity .7s ease calc(var(--n) * .14s),transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--n) * .14s)}
  .js .crew2.da li{opacity:1;transform:none}
  .crew2 figure{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .crew2 img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  .crew2__bild::before{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
  .crew2 li:hover figure{transform:translateY(-5px)}
  .crew2 li:hover img{transform:scale(1.035)}
  .crew2 li:hover .crew2__bild::before{transform:translate(-40%,55%) scale(1.25)}
  .crew2 li:hover .crew2__bild{box-shadow:0 28px 50px -34px rgba(20,23,28,.7)}
}

/* ============================================================ FAQ kompakt: Kopf oben, zwei Spalten */
.faq.faq--kompakt{display:block}
.faq__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 40px;margin-bottom:26px}
.faq__kopf .h2{margin-bottom:0}
.faq__tel{font-size:16.5px}
.faq--kompakt .faq__liste{columns:2;column-gap:48px;border-top:2px solid var(--tanne)}
.faq--kompakt .faq__liste details{break-inside:avoid}
.faq--kompakt .faq__liste details:first-child{border-top:0}
.faq--kompakt .faq__liste summary{padding:15px 0;gap:16px;font-size:16.5px;line-height:1.35}
.faq--kompakt .faq__liste summary i{width:26px;height:26px}
.faq--kompakt .faq__liste summary i::before,.faq--kompakt .faq__liste summary i::after{width:10px;margin-left:-5px}
.faq--kompakt .faq__liste details > div{padding:0 0 18px;font-size:15.5px;line-height:1.6}
.faq__mehr{display:none}
@media (max-width:899px){ .faq--kompakt .faq__liste{columns:1} }
@media (max-width:639px){
  .js .faq--kompakt .faq__liste:not(.alle) details:nth-child(n+6){display:none}
  .js .faq__mehr{display:inline-flex;margin-top:16px;min-height:44px;align-items:center;padding:0 16px;border:1px solid var(--linie);border-radius:9px;background:var(--papier);font:600 15px var(--sans);color:var(--anthrazit);cursor:pointer}
  .js .faq__mehr[hidden]{display:none}
}

/* Gesamtwerte nach Stufe eingefärbt: gut ab 90, mittel ab 70, darunter schlecht */
.messer[data-s="gut"] em{background:#5fd49e}
.messer[data-s="mittel"] em{background:#f0b64a}
.messer[data-s="schlecht"] em{background:#ff8a7a}
.hp-du[data-s="gut"] rect{fill:var(--gut)}
.hp-du[data-s="mittel"] rect{fill:#9a6412}
.hp-du[data-s="schlecht"] rect{fill:var(--schlecht)}
/* Aufschlüsselung je Station */
.ww__auf{grid-column:2 / -1;margin-top:4px}
.ww__auf summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font:500 13px/1.3 var(--sans);color:var(--see-tief);text-decoration:underline;text-decoration-color:var(--see-rand);text-underline-offset:3px}
.ww__auf summary::-webkit-details-marker{display:none}
.ww__auf summary::after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .2s}
.ww__auf[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.ww__auf ul{list-style:none;margin:8px 0 2px;padding:0;display:grid;gap:6px}
.ww .ww__auf li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px 40px;align-items:center;gap:4px 10px;padding:0;border:0;font-size:13px;color:var(--text)}
.ww__auf li small{font:500 11px var(--mono);color:var(--leise);white-space:nowrap}
.ww__auf li i{position:relative;height:5px;border-radius:3px;background:var(--kalk2);overflow:hidden}
.ww__auf li i em{position:absolute;left:0;top:0;bottom:0;background:var(--gut);border-radius:3px}
.ww__auf li[data-s="mittel"] i em{background:#d99a2b}
.ww__auf li[data-s="schlecht"] i em{background:var(--schlecht)}
.ww__auf li b{font:600 12px var(--mono);text-align:right;color:var(--anthrazit)}
@media (max-width:639px){ .ww .ww__auf li{grid-template-columns:minmax(0,1fr) 54px 36px} .ww__auf li small{display:none} }

/* ============================================================ Handy/Tablet hochkant: klebende Karte oben, Etappen darunter */
@media (max-width:899px) and (prefers-reduced-motion: no-preference){
  .tour__buehne{display:block;position:sticky;top:var(--hh);height:26vh;height:26svh;z-index:3;background:var(--kalk);border-bottom:1px solid var(--blau-rand);overflow:hidden}   /* flacher, ohne Schatten: Überschrift im ersten Bildschirm */
  .tour__karte{position:absolute;inset:0}
  .tour__karte .karte-box{position:absolute;inset:0}
  .tour__karte .karte{-webkit-mask-image:none;mask-image:none}
  .legende{display:none}
  .tour__pano{position:absolute;left:0;right:0;bottom:0;height:36%;opacity:var(--sonne,0);pointer-events:none}
  .tour__pano .pano{-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
  .tour__pano .gipfel-schild{top:0}
  .hero-karte,.etappe__fig{display:none!important}
  .tour__block--hero{padding-top:24px}
  .tour__block.etappe{min-height:54vh;min-height:54svh;padding:30px 0 24px;border-top:0}
  .tour__block.tour__kopf-block{padding-top:44px}
  .tour__block.etappe:last-child{min-height:0;padding-bottom:56px}
  .k-sonne{width:26px;height:26px;right:5%;top:7%}
  .schild__tafel{padding:5px 17px 5px 8px}
  .schild--links .schild__tafel{padding:5px 8px 5px 17px}
  .schild__tafel b{font-size:11.5px}
  .schild__tafel span{font-size:10.5px}
  .schild__tafel small{display:none}
  .schild__stange{height:14px}
  .schild--gipfel .schild__tafel b{font-size:12.5px}
}
.karte.schnell .zeichne{animation-duration:.8s!important;animation-delay:calc(var(--d,0s) * .45)!important}
.karte.schnell .see__f{animation-delay:.55s!important;animation-duration:.7s!important}
.karte.schnell .see__r,.karte.schnell .welle{transition-delay:.8s!important}
.karte.schnell .k-landschaft,.karte.schnell .k-orte,.karte.schnell .k-gipfel,.karte.schnell .k-stationen{transition-delay:.7s!important}

/* Team am Handy: kompakte Karten untereinander (Foto links, Text rechts) */
@media (max-width:639px){
  .crew2{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0;gap:14px}
  .crew2 li{flex:none}
  .crew2 figure{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start}
  .crew2__bild{padding:6px;border-radius:12px}
  .crew2__bild::after{inset:6px}
  .crew2 img{aspect-ratio:4/5;border-radius:8px}
  .crew2 figcaption{padding:2px 0 0}
  .crew2 figcaption b{font-size:17px}
  .crew2 figcaption span.crew2__chip{font-size:10.5px;margin-top:6px}
  .crew2 figcaption q{margin-top:8px;font-size:14px;padding-left:10px}
  .crew2__fuss{margin-top:22px}
  /* Überschriften am Handy kompakter */
  h2.h2{font-size:clamp(27px,7.4vw,32px);line-height:1.1}
  .lead{font-size:17px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
/* Tablet: Leerräume straffen */
@media (min-width:640px) and (max-width:1099px){
  .sec{padding:clamp(48px,6vw,72px) 0}
  .tb{margin-top:32px}
}

/* ==========================================================================
   Teil 2 – Ergänzungen für die ganze Website (nicht in Entwurf G enthalten)
   ========================================================================== */

/* ---------- Kopf: Untermenü „Leistungen“ */
.hdr__sub{position:relative;display:flex;align-items:center;gap:2px}
.hdr__subknopf{display:grid;place-items:center;width:24px;height:32px;padding:0;border:0;background:none;color:var(--anthrazit);cursor:pointer;border-radius:6px}
.hdr__subknopf::before{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform .25s,margin .25s}
.hdr__sub.is-auf .hdr__subknopf::before{transform:rotate(-135deg);margin-top:3px}
.hdr__nav .hdr__subliste{display:none;position:absolute;top:100%;left:-16px;z-index:5;min-width:250px;flex-direction:column;gap:0;margin:0;padding:8px;list-style:none;background:var(--papier);border:1px solid var(--linie);border-radius:12px;box-shadow:0 24px 40px -26px rgba(20,23,28,.55)}
.hdr__nav .hdr__subliste a{padding:9px 12px;border-radius:8px;font-size:15px;white-space:nowrap}
.hdr__nav .hdr__subliste a::after{display:none}
.hdr__nav .hdr__subliste a:hover{background:var(--kalk)}
.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (min-width:1180px){
  .hdr__sub:hover .hdr__subliste,.hdr__sub.is-auf .hdr__subliste{display:flex}
  .hdr__sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
}
@media (max-width:1179px){
  .hdr.is-open .hdr__nav{max-height:calc(100vh - var(--hh));max-height:calc(100svh - var(--hh));overflow-y:auto;overscroll-behavior:contain}
  .hdr__sub{flex-wrap:wrap}
  .hdr__sub > a{flex:1}
  .hdr__subknopf{width:46px;height:46px;border-bottom:1px solid var(--linie2);border-radius:0}
  .hdr__nav .hdr__subliste{position:static;min-width:0;width:100%;padding:4px 0 8px 14px;border:0;border-radius:0;box-shadow:none;background:none}
  .hdr__sub.is-auf .hdr__subliste{display:flex}
  .hdr__nav .hdr__subliste a{padding:11px 0;border-radius:0;font-size:16px;white-space:normal}
  .hdr__nav .hdr__subliste a:hover{background:none;color:var(--see-tief)}
}

/* ---------- Kleinigkeiten aus Inline-Styles von G */
.direkt-box{grid-area:direkt}
.fuss__kontakt{margin-top:10px}
.fuss__karte{margin-top:10px;font-size:14px}
.fuss__karte a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tanne-linie)}
.revier .rv-t--gross{font-size:40px;letter-spacing:.6em;opacity:.5}
@media (min-width:1100px){ .fuss__grid{grid-template-columns:1.4fr 1fr 1.1fr 1fr 1.2fr;gap:32px} }
@media (min-width:900px) and (max-width:1099px){ .fuss__grid{grid-template-columns:1fr 1fr 1fr} }

/* ---------- Karte: hervorgehobener Ort (Landingpages, Kartenausschnitt) */
.ort--fokus circle{fill:var(--blau);stroke:var(--anthrazit);r:calc(4.4px * var(--m,1) / var(--z))}
.ort--fokus text{font-weight:700;font-size:calc(12.5px * var(--m,1) / var(--z))}
.karte.nah .ort--fokus text{font-size:calc(14px * var(--m,1) / var(--z))}

/* ---------- Referenzen: Link auf die Fallstudie, Kopf ohne Revier */
.ref{position:relative}
.ref__link{color:inherit;text-decoration:none}
.ref__link::after{content:"";position:absolute;inset:0;border-radius:14px}
.ref:hover .ref__link{text-decoration:underline;text-decoration-color:var(--blau);text-underline-offset:4px}
.ref__kopf--ohne{grid-template-columns:minmax(0,1fr)}

/* ---------- Fehlermeldung beim Versand */
.af .fehlerbox,.kf-form .fehlerbox{margin:4px 0 14px}

/* ==========================================================================
   Unterseiten: Kopf (phero), Brotkrumen, Abschnitte und Bausteine
   ========================================================================== */
.phero{position:relative;padding:clamp(26px,4.5vw,60px) 0 clamp(40px,5.5vw,76px);border-bottom:1px solid var(--linie);overflow:hidden}
.phero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px clamp(32px,5vw,72px);align-items:center}
.phero--ohne-bild .phero__in{grid-template-columns:minmax(0,1fr)}
.phero--ohne-bild .phero__text{max-width:860px}
.phero h1{margin-top:6px}
.phero .h1__m{font-size:clamp(34px,3.6vw,54px)}
.phero .hero__lead{margin:22px 0 28px}
.phero .fakten{margin:6px 0 26px}
.phero--rechtliches{padding-bottom:clamp(26px,3vw,40px)}
.phero--rechtliches .h1__m{font-size:clamp(32px,3vw,44px)}
.phero__bild{position:relative;margin:0}
.phero__karte{aspect-ratio:10/7;min-height:260px}
.phero__karte .karte{position:absolute;inset:0;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}
.phero__karte .k-sonne{right:12%;top:10%}
.phero__linien{aspect-ratio:10/7}
.plinien{display:block;width:100%;height:100%}
.pl-hl{fill:none;stroke:var(--laerche);stroke-opacity:.3;stroke-width:1.1}
.pl-hl--idx{stroke-opacity:.5;stroke-width:1.5}
.pl-weg{fill:none;stroke:var(--tuerkis);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 .8px rgba(20,23,28,.9))}
.pl-kreuz path{fill:none;stroke:var(--anthrazit);stroke-width:2.4;stroke-linecap:round}
.phero__foto{padding:clamp(12px,2vw,22px);border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 30px 60px -40px rgba(20,23,28,.55)}
.phero__foto img{width:100%;height:auto;border-radius:10px}
.phero__foto--foto{padding:10px}
.phero__foto--foto img{aspect-ratio:3/2;object-fit:cover}
@media (max-width:899px){
  .phero__in{grid-template-columns:minmax(0,1fr)}
  .phero__karte,.phero__linien{order:-1;width:100%;aspect-ratio:auto;height:clamp(200px,48vw,300px);min-height:0;margin:-6px 0 0}
  .phero__foto{max-width:560px}
}
@media (max-width:639px){ .phero .h1__m{font-size:clamp(30px,8.6vw,40px)} .phero__karte{margin:-10px -20px 0;width:auto} }

.krumen ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0 0 18px;padding:0;font:500 12.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--leise)}
.krumen li{display:flex;align-items:center}
.krumen li + li::before{content:"";width:14px;height:0;margin:0 9px;border-top:1.5px dashed var(--laerche)}
.krumen a{color:var(--see-tief);text-decoration:none}
.krumen a:hover{text-decoration:underline;text-underline-offset:3px}
.krumen [aria-current]{color:var(--anthrazit)}

/* Abschnitt mit Kopf und Inhalt */
.abschnitt__kopf{max-width:820px;margin-bottom:34px}
.abschnitt__kopf .h2{margin-bottom:16px}
.abschnitt__kopf .lead{max-width:62ch}
.abschnitt--schmal .wrap{max-width:900px}
.abschnitt__inhalt > * + *{margin-top:28px}
.dunkel .abschnitt__inhalt{color:var(--d-text)}

/* Fließtext */
.prosa > p,.prosa > ul:not([class]),.prosa > ol:not([class]),.prosa > h3,.prosa > h4,.prosa > table,.prosa > blockquote,.prosa > dl{max-width:70ch}
.prosa p + p,.prosa p + ul,.prosa ul + p,.prosa p + ol,.prosa ol + p{margin-top:14px}
.prosa h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.025em;margin:44px 0 14px;text-wrap:balance}
.prosa h3{font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-.015em;margin:32px 0 10px}
.prosa h4{font-size:18px;margin:24px 0 8px}
.prosa > :first-child{margin-top:0}
.prosa ul:not([class]),.prosa ol:not([class]){margin:0;padding-left:22px;display:grid;gap:8px}
.prosa li::marker{color:var(--see)}
.prosa a:not(.btn):not(.ls__mehr):not(.am__knopf){color:var(--see-tief);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prosa a:not(.btn):not(.ls__mehr):not(.am__knopf):hover{text-decoration-color:var(--laerche)}
.dunkel .prosa a:not(.btn){color:#fff}
.prosa strong{color:var(--anthrazit)}
.dunkel .prosa strong{color:#fff}
.prosa table{width:100%;border-collapse:collapse;font-size:15.5px}
.prosa th,.prosa td{padding:10px 12px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.prosa th{font:600 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.prosa .cta-row{margin-top:26px}

/* Text + Bild */
.tbild{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px clamp(32px,5vw,72px);align-items:center}
.tbild--links .tbild__bild{order:-1}
.tbild__bild{justify-self:center;width:100%;max-width:440px;margin:0;padding:10px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 22px 44px -34px rgba(20,23,28,.55)}
.tbild__bild img{width:100%;height:auto;border-radius:9px}
.tbild__bild--foto img{aspect-ratio:4/3;object-fit:cover}
.tbild__bild figcaption{padding:10px 4px 2px;font:500 12.5px/1.45 var(--mono);color:var(--leise)}
@media (max-width:899px){ .tbild{grid-template-columns:minmax(0,1fr)} .tbild--links .tbild__bild{order:0} }

/* Karten-Raster */
.raster{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kachel{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 1px 2px rgba(20,23,28,.04),0 14px 34px -22px rgba(20,23,28,.35);color:var(--text);transition:transform .25s ease,box-shadow .25s ease}
.kachel:hover{transform:translateY(-3px)}
.kachel h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px;color:var(--anthrazit)}
.kachel__text{font-size:16px;line-height:1.56}
.kachel__text p + p{margin-top:10px}
.kachel__text ul{margin:0;padding-left:20px;display:grid;gap:6px}
.kachel .ls__mehr{margin-top:auto;padding-top:16px}
.kachel__ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:50%;background:var(--see-bg);color:var(--see-tief);box-shadow:inset 0 0 0 1px var(--see-rand)}
.kachel__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kachel__marke{font:600 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--see-tief);margin-bottom:8px!important}
.kachel--link h3 a{color:inherit;text-decoration:none}
.kachel--link h3 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.kachel--link:hover h3 a{text-decoration:underline;text-decoration-color:var(--see);text-underline-offset:4px}
@media (max-width:1099px){ .raster--4{grid-template-columns:repeat(2,minmax(0,1fr))} .raster--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){ .raster--2,.raster--3,.raster--4{grid-template-columns:minmax(0,1fr)} .kachel{padding:22px 20px} }

/* Hinweis-Kasten */
.hinweis{max-width:76ch;padding:18px 22px 20px;border-radius:12px;background:var(--see-bg);border:1px solid var(--see-rand);box-shadow:inset 4px 0 0 var(--see)}
.hinweis--tipp{background:var(--blau-hell);border-color:var(--blau-rand);box-shadow:inset 4px 0 0 var(--blau)}
.hinweis--achtung{background:var(--laerche-bg);border-color:#eceef1;box-shadow:inset 4px 0 0 var(--laerche)}
.hinweis__k{font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--see-tief);margin-bottom:8px}
.hinweis--tipp .hinweis__k{color:var(--blau-tief)}
.hinweis--achtung .hinweis__k{color:var(--laerche-tief)}
.hinweis .prosa > p,.hinweis .prosa > ul{max-width:none}

/* Zitat */
.zitatblock{position:relative;max-width:820px;margin:0;padding:30px 32px 26px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 18px 40px -30px rgba(20,23,28,.45)}
.zitatblock::before{content:"\201C";position:absolute;right:20px;top:0;pointer-events:none;font:700 96px/1 var(--sora);color:var(--see);opacity:.28}
.zitatblock blockquote{margin:0;padding-right:48px;font:500 clamp(19px,1.7vw,23px)/1.5 var(--sora);letter-spacing:-.01em;color:var(--anthrazit)}
.zitatblock figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--linie)}
.zitatblock figcaption b{display:block;font:600 16px/1.3 var(--sora);color:var(--anthrazit)}
.zitatblock figcaption span{font:500 12.5px/1.5 var(--mono);color:var(--leise)}

/* Zwei Spalten Text */
.spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(32px,5vw,64px)}
@media (max-width:899px){ .spalten{grid-template-columns:minmax(0,1fr)} }

/* Ablauf / Etappen kompakt: gestrichelte Route mit Stationen */
.route{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:0}
.route__st{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:0 0 28px}
.route__st::before{content:"";position:absolute;left:21px;top:40px;bottom:0;border-left:2px dashed var(--tanne);opacity:.55}
.route__st:last-child::before{display:none}
.route__nr{display:grid;place-items:center;width:44px;height:34px;border-radius:7px;background:var(--tanne);color:#fff;font:600 14px/1 var(--mono)}
.route__st:last-child .route__nr{background:var(--blau);color:#fff}
.route__text h3{font-size:21px;line-height:1.25;letter-spacing:-.02em;margin:4px 0 8px}
.route__text p{font-size:16.5px;line-height:1.6;max-width:62ch}
.route__meta{display:flex;align-items:center;gap:10px;margin-top:10px!important;font:500 13px/1.3 var(--mono);color:#59606a}
.route__meta::before{content:"";width:22px;border-top:2px dashed var(--laerche)}
@media (min-width:1100px){
  .route--ablauf{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .route--ablauf .route__st{grid-template-columns:minmax(0,1fr);gap:14px;padding:0}
  .route--ablauf .route__st::before{left:52px;right:-24px;top:17px;bottom:auto;border-left:0;border-top:2px dashed var(--tanne)}
  .route--ablauf .route__text p{font-size:15.5px}
}

/* Gipfelcheck klein (Kasten) */
.gck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px clamp(28px,4vw,56px);align-items:center;padding:clamp(22px,3vw,34px);border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 26px 54px -40px rgba(20,23,28,.6);background-image:repeating-radial-gradient(ellipse at 96% 10%,transparent 0 24px,rgba(154,161,170,.08) 24px 25px)}
.gck .marke{margin-bottom:12px}
.gck__h{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.02em;margin-bottom:10px}
.gck__text p:not(.marke){font-size:16px}
.gck__form{display:flex;align-items:center;gap:8px;height:64px;padding:0 6px 0 0;border:2px solid var(--tanne);border-radius:14px;background:var(--papier)}
.gck__form:focus-within{box-shadow:0 0 0 4px var(--see-hell)}
.gck__form .gc__in svg{margin:0 10px 0 16px}
.gck__form .gc__in input{font-size:18px}
.gck__form .btn{flex:none;min-height:50px;padding:0 18px;white-space:nowrap}
.artikel__text .gck{margin:36px 0;grid-template-columns:minmax(0,1fr)}
@media (max-width:899px){ .gck{grid-template-columns:minmax(0,1fr)} }
@media (max-width:639px){
  .gck__form{flex-direction:column;align-items:stretch;height:auto;padding:0;border:0;background:none;gap:10px}
  .gck__form:focus-within{box-shadow:none}
  .gck__form .gc__in{height:58px;border:2px solid var(--tanne);border-radius:12px;background:var(--papier)}
  .gck__form .btn{width:100%}
}

/* Ratgeber (Blogbeitrag) */
.artikel-sec{padding-top:clamp(36px,5vw,64px)}
.artikel{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:40px clamp(40px,6vw,88px);align-items:start}
.artikel--ohne-toc{grid-template-columns:minmax(0,1fr)}
.artikel--ohne-toc .artikel__text{max-width:760px;margin-inline:auto}
.artikel__toc{position:sticky;top:calc(var(--hh) + 24px)}
.artikel__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:2px solid var(--linie)}
.artikel__toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:var(--text);text-decoration:none}
.artikel__toc a:hover{color:var(--see-tief);border-left-color:var(--see)}
.artikel__text{max-width:720px;font-size:17.5px}
.artikel__text > p,.artikel__text > ul,.artikel__text > ol{max-width:none}
.artikel__text h2{scroll-margin-top:calc(var(--hh) + 16px)}
.artikel__meta{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:500 13px/1.5 var(--mono);color:var(--leise)}
.artikel__meta img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--linie)}
.artikel__meta b{color:var(--anthrazit);font-weight:600}
@media (max-width:899px){ .artikel{grid-template-columns:minmax(0,1fr)} .artikel__toc{position:static;padding:16px 18px;border-radius:12px;background:var(--papier);border:1px solid var(--linie)} .artikel__toc ol{border-left:0} .artikel__toc a{padding-left:0;border-left:0} }

/* Fallstudie */
.fakten--fall{grid-template-columns:repeat(2,minmax(0,auto));gap:10px 34px}
.gwert{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px 56px;align-items:center}
.gwert__zahlen{display:flex;gap:18px}
.gwert__zahlen p{flex:1;padding:22px;border-radius:14px;background:var(--tanne);color:var(--d-leise);font:500 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.gwert__zahlen b{display:block;margin-top:12px;font:600 44px/1 var(--sora);letter-spacing:-.03em;color:#fff;text-transform:none}
.gwert__zahlen small{font-size:15px;color:var(--d-leise);margin-left:2px}
.naechste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px}
.naechste > div{max-width:720px}
.naechste .h2{margin-bottom:12px}
@media (max-width:899px){ .gwert{grid-template-columns:minmax(0,1fr)} }

/* Rechtliches */
.recht-sec{padding-top:clamp(32px,4vw,56px)}
.prosa--recht{max-width:820px;font-size:16.5px}
.prosa--recht h2{font-size:clamp(22px,2vw,28px);margin-top:40px}
.prosa--recht h3{font-size:19px;margin-top:26px}
.prosa--recht p,.prosa--recht li{overflow-wrap:anywhere}

/* Abstände von Bausteinen im Fließtext */
.prosa > .hinweis,.prosa > .zitatblock,.prosa > .tbild,.prosa > .raster,.prosa > .spalten,.prosa > .route,.prosa > .gck{margin-top:28px;margin-bottom:28px}
.prosa > :last-child{margin-bottom:0}

/* ============================================================ Tirol nach Ipsom-CI (29.09.2026)
   Grund Weiß/Grau, Anthrazit für Text und dunkle Flächen, tiefes Blau als einzige Handlungsfarbe (Weg A, 29.09.2026),
   Gelb als Funke: Logo, Sonne, Unterstreichung „ganz nach oben“, Ipsom-Punkt auf der Karte.
   Keine Farbverläufe. Hero flach in hellem Blau (Wunsch Bernd: Hero blau statt gelb). */
.tour{background:var(--blau-hell)}
.phero{background:var(--blau-hell);border-bottom:1px solid var(--blau-rand)}
.k-aussen{fill:none}
.k-land{fill:#fff}
.karte .k-grenze{stroke:var(--blau-tief);stroke-opacity:.7}
.fl{stroke:#7fa9d6}
.see__f{fill:#7fa9d6}
.h1__k{color:var(--blau-tief)}
.h1__k::before{background:var(--blau)}
.hero__meta i{background:var(--blau);box-shadow:0 0 0 4px rgba(29,74,134,.16)}
.hero__alt a{text-decoration-color:var(--blau)}
.hdr{background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie)}
@supports (backdrop-filter: blur(4px)){ .hdr{background:rgba(255,255,255,.88)} }
.pano-l{fill:#fff}
.etappe__fig--gipfel .pano-box{background:var(--blau-hell)}
@media (max-width:1179px){ .tour__buehne{background:var(--blau-hell)} }

/* Titelbilder im Ratgeber: KI-erzeugt, sichtbar gekennzeichnet */
.phero__ki{display:flex;align-items:center;gap:6px;margin:10px 2px 0;font:500 12px/1.3 var(--mono);letter-spacing:.03em;color:var(--leise)}
.phero__ki::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tuerkis);flex:none}

/* Startseite: H1 „Webagentur Tirol“, darunter der Claim als Unterzeile */
.hero__claim{font:700 clamp(24px,2.2vw,33px)/1.18 var(--sora);letter-spacing:-.03em;color:var(--tanne);margin:16px 0 0;max-width:17em;text-wrap:balance}
.hero__claim em{font-style:normal;position:relative;white-space:nowrap}
.hero__claim em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.2em;background:var(--gelb);z-index:-1;border-radius:2px}   /* Gelb als Funke (Weg A) */
.hero__claim + .hero__lead{margin-top:20px}
@media (max-width:639px){ .hero__claim{font-size:clamp(22px,6.4vw,27px);margin-top:12px} }

/* Gipfelschild: kleine Randnotiz (bleibt auch am Handy sichtbar) */
.gipfel-schild .schild__notiz{display:block;font:500 10.5px/1.3 var(--sans);letter-spacing:0;margin-top:4px;opacity:.72;white-space:nowrap}
@media (max-width:1179px){ .gipfel-schild .schild__notiz{font-size:9.5px;margin-top:2px} }

/* Ratgeber: Arbeitsmaterial (Checkliste/Arbeitsblatt als PDF) – Seitenleiste oben und Artikelende */
.artikel__toc--am{max-height:calc(100vh - var(--hh) - 48px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.am{border-radius:14px;background:var(--blau-hell);border:1px solid var(--blau-rand)}
.am--seite{padding:16px 16px 14px;margin-bottom:26px}
.am__marke{margin:0 0 6px;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blau-tief)}
.am__titel{margin:0;font:700 16px/1.3 var(--sora);letter-spacing:-.01em;color:var(--anthrazit);text-wrap:balance}
.am__text{margin:6px 0 12px;font-size:14px;line-height:1.5;color:var(--text)}
.am a.am__knopf{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border:0;border-radius:9px;background:var(--blau);color:#fff;font:600 14px/1.1 var(--sans);text-decoration:none;transition:background .2s}
.am a.am__knopf:hover{background:var(--blau-tief);color:#fff;border:0}
.am a.am__knopf:focus-visible{outline:2px solid var(--blau-tief);outline-offset:2px}
.am__svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.am__info{margin:8px 0 0;font:500 11.5px/1.3 var(--mono);color:var(--leise)}
.am--ende{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:start;margin:44px 0 8px;padding:clamp(18px,3vw,28px)}
.am--ende .am__titel{font-size:clamp(18px,1.6vw,21px)}
.am--ende .am__text{font-size:15.5px;max-width:52ch}
.am__blatt{display:grid;place-items:center;width:64px;height:78px;border-radius:8px;background:#fff;border:1px solid var(--blau-rand);box-shadow:0 12px 24px -18px rgba(20,23,28,.7);color:var(--blau)}
.am__blatt .am__svg{width:34px;height:34px;stroke-width:1.4}
@media (max-width:899px){ .artikel__toc--am{max-height:none;overflow:visible} .am--seite{margin-bottom:18px} }
@media (max-width:519px){ .am--ende{grid-template-columns:minmax(0,1fr)} .am__blatt{display:none} }

/* Gipfelcheck vor dem Test: bewusster Leerzustand statt Platzhalter („offen“) – Übersicht der 10 Stationen */
.tb[data-state="leer"] .ww__tag{visibility:hidden}
.tb[data-state="leer"] .hp-flaeche{fill:var(--blau-hell)}
.tb[data-state="leer"] .ww__nr{border-color:var(--blau-rand);color:var(--blau-tief)}

/* Kopfzeile: „Rückruf anfordern“ (Rahmen) und „E-Mail schreiben“ (Blau, Hauptknopf) – ersetzt Nummer und „Angebot anfragen“.
   Am Handy übernimmt die untere Leiste (Anrufen · Angebot anfragen). */
.hdr__aktion{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr__aktion .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hdr__aktion .btn svg{flex:none}
.hdr__rueckruf svg{color:var(--blau)}
@media (max-width:1179px){ .hdr__aktion ~ .hdr__menu{margin-left:12px} }
@media (max-width:639px){ .hdr__aktion{display:none} }   /* am Handy: untere Leiste (Anrufen · Angebot anfragen) */

/* Ruhe (29.09.2026): Leistungskarten ohne Nummern (Höhenlinien mit Hover-Effekt bleiben) */
.ls__k:not(.ls__k--rucksack) .ls__nr{display:none}

/* ---------- SEO-/GEO-Check: KI-Crawler-Ampel und PageSpeed (gipfelcheck.js, 13.10.2026) */
.tb__extra{display:grid;grid-template-columns:1.25fr 1fr;border-top:1px solid var(--linie)}
.tb__extra[hidden]{display:none}
.tx{padding:24px clamp(18px,2.4vw,32px)}
.tx + .tx{border-left:1px solid var(--linie)}
.tx__k{font:600 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin-bottom:14px}
.tx__k span{letter-spacing:.02em;text-transform:none;font-weight:500;margin-left:6px;color:var(--laerche)}
.ampel__sum{display:inline-flex;align-items:center;gap:8px;font:600 17px/1.3 var(--sora);color:var(--anthrazit);margin-bottom:14px}
.ampel__sum::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--gut);box-shadow:0 0 0 4px var(--gut-bg)}
.ampel__sum[data-s="mittel"]::before{background:var(--mittel);box-shadow:0 0 0 4px var(--mittel-bg)}
.ampel__sum[data-s="schlecht"]::before{background:var(--schlecht);box-shadow:0 0 0 4px var(--schlecht-bg)}
.ampel__gr{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:start;margin-top:8px}
.ampel__gr > p{font-size:13.5px;font-weight:600;color:var(--leise);padding-top:5px}
.ampel__gr ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ampel__gr li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:99px;font:500 13px/1.3 var(--mono);background:var(--gut-bg);color:#0f5e43;border:1px solid #cde8dc;cursor:help}
.ampel__gr li i{width:8px;height:8px;border-radius:50%;background:var(--gut)}
.ampel__gr li[data-s="zu"]{background:var(--schlecht-bg);color:#8e2a20;border-color:#efc4bd;text-decoration:line-through;text-decoration-color:rgba(142,42,32,.45)}
.ampel__gr li[data-s="zu"] i{background:var(--schlecht)}
.ampel__leer{font-size:15px;color:var(--leise)}
.ps__lade{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text);flex-wrap:wrap}
.ps__lade small{color:var(--leise);font-size:13.5px}
.ps__lade i{width:22px;height:22px;border-radius:50%;border:3px solid var(--blau-rand);border-top-color:var(--blau);animation:psDreh 1s linear infinite}
@keyframes psDreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ps__lade i{animation:none} }
.ps__kopf{display:flex;align-items:center;gap:18px}
.ps__ring{--w:0;--f:var(--gut);flex:none;width:86px;height:86px;border-radius:50%;display:grid;place-content:center;justify-items:center;
  background:radial-gradient(closest-side,var(--papier) 79%,transparent 80% 100%),conic-gradient(var(--f) calc(var(--w) * 1%),var(--linie2) 0)}
.ps__ring[data-s="mittel"]{--f:var(--mittel)}
.ps__ring[data-s="schlecht"]{--f:var(--schlecht)}
.ps__ring[data-s="offen"]{--f:var(--offen)}
.ps__ring b{font:700 28px/1 var(--sora);color:var(--anthrazit)}
.ps__ring small{font-size:11px;color:var(--leise);margin-top:2px}
.ps__satz{font:600 16px/1.4 var(--sora);color:var(--anthrazit)}
.ps__werte{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.ps__werte li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:baseline;font-size:14.5px;padding:6px 10px;border-radius:8px;background:var(--kalk)}
.ps__werte b{font:700 13px/1 var(--mono);color:var(--anthrazit)}
.ps__werte span{color:var(--leise)}
.ps__werte em{font-style:normal;font-weight:600;color:var(--gut)}
.ps__werte li[data-s="mittel"] em{color:var(--mittel)}
.ps__werte li[data-s="schlecht"] em{color:var(--schlecht)}
.ps__feld{margin-top:12px;font-size:13.5px;color:var(--leise)}
.ps__link{margin-top:14px;font-size:14px}
.ps__link a{color:var(--see-tief);font-weight:600}
.ps__knopf{min-height:44px;font-size:15px}
.sum__check a{color:var(--gelb)!important;font-weight:600;white-space:normal!important}
/* GEO-Modus: Crawler-Ampel und PageSpeed direkt unter dem Höhenprofil, vor den Prüfpunkten */
[data-modus="geo"] .tb{display:flex;flex-direction:column}
[data-modus="geo"] .tb__titel{order:1}[data-modus="geo"] .tb__profil{order:2}[data-modus="geo"] .tb__extra{order:3}
[data-modus="geo"] .tb__ww{order:4}[data-modus="geo"] .tb__sum{order:5}[data-modus="geo"] .tb__hinweis{order:6}
@media (max-width:899px){
  .tb__extra{grid-template-columns:1fr}
  .tx + .tx{border-left:0;border-top:1px solid var(--linie)}
  .ampel__gr{grid-template-columns:1fr;gap:6px}
  .ampel__gr > p{padding-top:0}
}

/* Kleine Handys (320–479 px): lange Wörter wie „Barrierefreiheitsgesetz“ in Überschriften trennen statt überstehen lassen */
@media (max-width:479px){ h1,h2,h3,.h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} }

/* ---- zusatz-anfrage.css ---- */
/* ==========================================================================
   Anfrage-Karte wie auf webdesign-kaernten.net (übernommen 29.09.2026, Farben auf Tirol umgestellt):
   build/teile/anfrage.html, formular.js, erreichbar.js. Links hell: Formular mit zwei Modi
   („Nachricht schreiben“ | „Rückruf anfordern“). Rechts dunkel: Motiv (Relief Karwendel/Rofan, Achensee, Sonne)
   + zwei Glaskarten. Danach die kompaktere Fassung aus Kärnten (zusatz-kontakt) und die Handy-Regeln.
   ========================================================================== */
.anf-sec{position:relative}
.anf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-radius:32px;background:var(--papier);border:1px solid rgba(204,211,218,.75);box-shadow:0 70px 120px -70px rgba(12,37,72,.5),0 30px 60px -40px rgba(12,37,72,.3),0 2px 6px -2px rgba(12,37,72,.06);overflow:hidden;isolation:isolate}
.anf__seite{position:relative;padding:clamp(30px,4.6vw,68px) clamp(22px,4.6vw,68px) clamp(28px,3.6vw,52px);background:radial-gradient(90% 55% at 100% 100%,rgba(23,101,199,.07),transparent 62%),radial-gradient(70% 45% at 0 0,rgba(43,184,198,.07),transparent 60%),var(--papier)}
.anf__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 12px;border-radius:999px;background:var(--blau-hell);border:1px solid var(--blau-rand);font:600 13.5px/1.2 var(--sans);color:var(--blau-tief)}
.anf__badge svg{flex:none;color:var(--blau)}
.anf__titel{margin:22px 0 14px;font:600 clamp(30px,3.1vw,46px)/1.07 var(--sora);letter-spacing:-.032em;color:var(--anthrazit);text-wrap:balance}
.anf__lead{max-width:54ch;margin-bottom:30px;font-size:17px;line-height:1.6;color:var(--text)}
.anf__form{border:0;margin:0;padding:0}
.anf__form fieldset{border:0;margin:0;padding:0;min-width:0}

/* Umschalter „Nachricht schreiben | Rückruf anfordern“ */
.anf__form .anf__modus{margin-bottom:22px}
.anf__seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:17px;background:var(--kalk2);border:1px solid var(--linie2);box-shadow:inset 0 1px 3px rgba(12,37,72,.07)}
.anf__seg input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.anf__seg label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 10px;border-radius:13px;font:600 15px/1.2 var(--sans);color:#555c66;cursor:pointer;text-align:center;transition:color .25s}
.anf__seg label svg{flex:none;opacity:.75;transition:opacity .25s,color .25s}
.anf__seg label:hover{color:var(--anthrazit)}
.anf__seg input:checked + label{color:var(--anthrazit)}
.anf__seg input:checked + label svg{opacity:1;color:var(--see-tief)}
.anf__seg input:focus-visible + label{outline:3px solid var(--see);outline-offset:-1px}
.anf__seg-pille{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:13px;background:#fff;box-shadow:0 8px 18px -10px rgba(12,37,72,.4),0 1px 2px rgba(12,37,72,.1);transition:transform .42s cubic-bezier(.3,.8,.2,1)}
.anf__form[data-modus="rueckruf"] .anf__seg-pille,.anf__seg:has(#rueckruf:checked) .anf__seg-pille{transform:translateX(100%)}

/* Felder nach Modus (JS: data-modus; ohne JS: :has) */
.anf__form[data-modus="nachricht"] .nur-rueckruf,.anf__form[data-modus="rueckruf"] .nur-nachricht{display:none}
.anf__form:not([data-modus]):has(#rueckruf:checked) .nur-nachricht,.anf__form:not([data-modus]):has(#afModusN:checked) .nur-rueckruf{display:none}
@media (prefers-reduced-motion: no-preference){
  .anf__form[data-modus] .anf__f.nur-nachricht,.anf__form[data-modus] .anf__f.nur-rueckruf,.anf__form[data-modus] .anf__gruppe{animation:anfRein .42s cubic-bezier(.3,.7,.2,1) both}
}
@keyframes anfRein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Eingabefelder mit Symbol und schwebender Beschriftung */
.anf__zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.anf__f{position:relative;margin-bottom:14px}
.anf__f input,.anf__f textarea{display:block;width:100%;height:60px;margin:0;padding:23px 44px 7px 50px;border:1px solid #ccd3da;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(12,37,72,.04);font:500 16.5px/1.3 var(--sans);color:var(--anthrazit);transition:border-color .2s,box-shadow .2s,background-color .2s}
.anf__f textarea{height:auto;min-height:118px;padding-top:30px;resize:vertical}
.anf__f input:hover,.anf__f textarea:hover{border-color:var(--alm-hell)}
.anf__f input:focus,.anf__f textarea:focus{outline:none;border-color:var(--see);box-shadow:0 0 0 4px rgba(19,156,173,.2)}
.anf__ic{position:absolute;left:16px;top:20px;width:20px;height:20px;color:#7b8794;pointer-events:none;transition:color .2s}
.anf__ic svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.anf__f:focus-within .anf__ic{color:var(--see-tief)}
.anf__f label{position:absolute;left:51px;top:21px;max-width:calc(100% - 64px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 16px/1.1 var(--sans);color:#5e6873;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.3,0,.2,1),color .2s}
.anf__f input:focus + label,.anf__f input:not(:placeholder-shown) + label,.anf__f textarea:focus + label,.anf__f textarea:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.76);color:var(--see-tief)}
.anf__pf{color:var(--blau)}
.anf__opt{color:#6b737d;font-weight:400}
.anf__ok{position:absolute;right:15px;top:20px;width:20px;height:20px;border-radius:50%;background:var(--gut);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.anf__ok::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.anf__f.gut .anf__ok{opacity:1;transform:none}
.anf__f.fehler input{border-color:var(--schlecht);background:#fffafa}
.anf__f.fehler input:focus{box-shadow:0 0 0 4px rgba(179,38,30,.16)}
.anf__f.fehler .anf__ic{color:var(--schlecht)}
.anf__hinweis{margin:7px 4px 0;font-size:13.5px;line-height:1.4;color:var(--schlecht)}
.anf__hinweis:empty{display:none}

/* Auswahl als Chips (Anliegen: mehrere, Wunschzeit: eine) */
.anf__form .anf__gruppe{margin:6px 0 18px}
.anf__gruppe legend{padding:0;margin-bottom:11px;font:600 15px/1.3 var(--sans);color:var(--anthrazit)}
.anf__gruppe legend span{margin-left:6px;font-weight:400;font-size:13.5px;color:var(--leise)}
.anf__chips{display:flex;flex-wrap:wrap;gap:8px}
.anf__chip{position:relative;display:inline-flex;cursor:pointer}
.anf__chip input{position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.anf__chip span{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 17px;border:1px solid #ccd3da;border-radius:999px;background:#fff;font:500 14.5px/1.2 var(--sans);color:var(--anthrazit);transition:background-color .2s,border-color .2s,color .2s,padding .2s,box-shadow .2s}
.anf__chip span::before{content:"";position:absolute;left:15px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid var(--see-tief);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.anf__chip:hover span{border-color:var(--see-tief)}
.anf__chip input:checked + span{background:var(--see-bg);border-color:var(--see-tief);color:var(--see-tief);padding-left:33px;box-shadow:inset 0 0 0 1px var(--see-tief)}
.anf__chip input:checked + span::before{transform:rotate(45deg) scale(1)}
.anf__chip input:focus-visible + span{outline:3px solid var(--see);outline-offset:2px}

/* Übernahme aus Tourenplaner / Gipfelcheck */
.anf__plan{margin:0 0 16px;padding:14px 16px;border-radius:14px;background:var(--see-bg);border:1px solid var(--see-rand)}
.anf__plan[hidden]{display:none}
.anf__plan-k{display:flex;align-items:center;gap:6px;font:600 13.5px/1.3 var(--sans);color:var(--see-tief)}
.anf__weg{margin-left:auto;padding:0;border:0;background:none;font:500 13px var(--sans);color:var(--text);text-decoration:underline;cursor:pointer}
.anf__plan dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;font-size:14.5px;line-height:1.4}
.anf__plan dt{color:var(--text)}
.anf__plan dd{margin:0;color:var(--anthrazit);font-weight:500}

/* Einverständnis */
.anf__ds{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--text);cursor:pointer}
.anf__ds input{position:absolute;z-index:1;left:0;top:0;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.anf__ds a{color:var(--anthrazit);text-underline-offset:3px}
.anf__box{position:relative;width:22px;height:22px;border:1.5px solid #8d97a3;border-radius:7px;background:#fff;transition:background-color .2s,border-color .2s}
.anf__box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.anf__ds input:checked + .anf__box{background:var(--see-tief);border-color:var(--see-tief)}
.anf__ds input:checked + .anf__box::after{transform:rotate(45deg) scale(1)}
.anf__ds input:focus-visible + .anf__box{outline:3px solid var(--see);outline-offset:2px}
.anf__ds input[aria-invalid="true"] + .anf__box{border-color:var(--schlecht)}
.anf__hinweis--ds{margin-left:36px}
.anf__fehler{margin:16px 0 0}
.anf__noscript{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--laerche-bg);font-size:14.5px;line-height:1.5}

/* Senden */
.anf__senden{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:60px;margin-top:22px;padding:0 24px;border:0;border-radius:15px;background:var(--blau);color:#fff;font:600 17px/1 var(--sans);cursor:pointer;overflow:hidden;box-shadow:0 16px 30px -18px rgba(15,77,158,.75),inset 0 -2px 0 rgba(0,0,0,.07);transition:transform .2s ease,box-shadow .2s ease}
.anf__senden::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg) translateX(-120%);pointer-events:none}
.anf__senden:hover{transform:translateY(-2px);box-shadow:0 22px 36px -18px rgba(15,77,158,.8),inset 0 -2px 0 rgba(0,0,0,.07)}
.anf__senden:focus-visible{outline:3px solid var(--blau-tief);outline-offset:3px}
.anf__senden-t{display:inline-flex;align-items:center;gap:10px}
.anf__senden-t svg{transition:transform .25s cubic-bezier(.3,.7,.2,1)}
.anf__senden:hover .anf__senden-t svg{transform:translateX(4px)}
.anf__lade{position:absolute;left:28%;right:28%;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(24,30,37,.16);opacity:0;overflow:hidden}
.anf__lade i{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:4px;background:var(--anthrazit)}
.anf__senden.laedt{pointer-events:none}
.anf__senden.laedt .anf__senden-t{opacity:0}
.anf__senden.laedt .anf__lade{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .anf__senden:hover::before{animation:anfGlanz .9s ease}
  .anf__senden.laedt .anf__lade i{animation:anfLade 1s ease-in-out infinite}
  .anf__form.wackelt{animation:anfWackeln .42s cubic-bezier(.36,.07,.19,.97)}
  .anf__form.geht{animation:anfGeht .38s cubic-bezier(.6,0,.4,1) forwards}
}
@keyframes anfGlanz{to{transform:skewX(-18deg) translateX(560%)}}
@keyframes anfLade{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes anfWackeln{20%,80%{transform:translateX(-2px)}40%{transform:translateX(4px)}60%{transform:translateX(-4px)}}
@keyframes anfGeht{to{opacity:0;transform:translateY(10px) scale(.985);filter:blur(2px)}}

/* Hinweise unter dem Formular */
.anf__fuss{margin-top:18px;font-size:13.5px;line-height:1.55;color:var(--leise)}
.anf__fuss a{color:inherit;text-underline-offset:3px}
.anf--gesendet .anf__fuss > p:first-child{display:none}
.anf__direkt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--linie)}
.anf__direkt a{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.3 var(--sans);color:var(--anthrazit);text-decoration:none;border-bottom:1px solid transparent}
.anf__direkt a:hover{border-bottom-color:var(--see-tief)}
.anf__direkt svg{flex:none;color:var(--see-tief)}

/* Danke */
.anf__danke{padding:10px 0 6px}
@media (min-width:900px){ .anf--gesendet .anf__seite{display:flex;flex-direction:column;align-items:flex-start} .anf--gesendet .anf__danke{margin-block:auto} .anf--gesendet .anf__fuss{align-self:stretch} }
.anf__danke[hidden]{display:none}
.anf__danke:focus{outline:none}
.anf__haken{display:block;width:68px;height:68px;margin-bottom:20px}
.anf__hk-k{fill:var(--gut-bg);stroke:var(--gut);stroke-width:2.2}
.anf__hk-p{fill:none;stroke:var(--gut);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.anf__danke h3{margin-bottom:10px;font:600 clamp(28px,2.6vw,36px)/1.1 var(--sora);letter-spacing:-.025em;color:var(--anthrazit)}
.anf__danke p{max-width:40ch;font-size:17.5px;line-height:1.6}
.anf__danke .anf__danke-eilig{margin-top:16px;font-size:15px;color:var(--leise)}
.anf__danke-eilig a{color:var(--anthrazit);font-weight:600;text-underline-offset:3px}
@media (prefers-reduced-motion: no-preference){
  .anf__danke.zeigen{animation:anfAuf .6s cubic-bezier(.2,.9,.3,1.15) both}
  .anf__danke.zeigen .anf__hk-k{stroke-dasharray:1 1;animation:anfZeichnen .6s ease .2s both}
  .anf__danke.zeigen .anf__hk-p{stroke-dasharray:1 1;animation:anfZeichnen .45s ease .65s both}
}
@keyframes anfAuf{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes anfZeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- Bildseite: Motiv */
.anf__bild{position:relative;min-height:640px;overflow:hidden;background:#13386a;color:#fff;isolation:isolate}
.anf__motiv{position:absolute;inset:0;z-index:0;overflow:hidden}
.anf__motiv::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 95% at 55% 45%,transparent 50%,rgba(4,12,28,.55)),linear-gradient(180deg,rgba(4,12,28,.28),transparent 26%,transparent 62%,rgba(4,12,28,.5))}
.amotiv{position:absolute;inset:0;width:100%;height:100%;display:block}   /* eigener Name, denn .am ist der Arbeitsmaterial-Kasten im Blog */
/* Bergpanorama (build/wk/bausteine.py, anfrage_motiv): Farben stehen als Attribute im SVG, hier nur Linien und Bewegung */
.am-kante{fill:none;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.am-weg{fill:none;stroke:var(--gelb);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6;opacity:.85;vector-effect:non-scaling-stroke}
.am-kreuz{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.92;vector-effect:non-scaling-stroke}
.am-see-t{font:600 9px var(--sans);letter-spacing:.3em;text-transform:uppercase;fill:#e2f4f8;opacity:.62}
.am-sonne{transition:filter 1.2s ease}
.am-glut{opacity:.82;transition:opacity 1.2s ease}
.am-glitzer rect{opacity:.7}
/* Nach dem Absenden geht die Sonne ein Stück weiter auf */
.anf--gesendet .am-glut{opacity:1}
.anf--gesendet .am-sonne{filter:brightness(1.15)}
@media (prefers-reduced-motion: no-preference){
  .am-dunst{animation:amDunst 38s ease-in-out infinite alternate}
  .am-glitzer rect{animation:amFunkel 3.2s ease-in-out infinite}
  .am-glitzer rect:nth-child(2n){animation-delay:1.1s}
  .am-glitzer rect:nth-child(3n){animation-delay:2.2s}
}
@keyframes amDunst{from{transform:translate3d(-24px,0,0)}to{transform:translate3d(24px,0,0)}}
@keyframes amFunkel{0%,100%{opacity:.2}50%{opacity:.95}}

/* Tablet: Panorama etwas höher, damit die Treffpunkt-Karte Gipfel und Kreuz nicht verdeckt */
@media (min-width:640px) and (max-width:899px){ .amotiv{height:130%} }
/* 3D-Drohnenflug (assets/js/bergflug.js) über dem Panorama: blendet ein, sobald das erste Bild steht.
   Ohne WebGL oder JavaScript bleibt das gezeichnete Panorama. */
.anf__flug{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s ease}
.anf__motiv--3d .anf__flug{opacity:1}
/* Das gezeichnete Panorama ist nur Ersatz: sichtbar ohne JavaScript oder wenn bergflug.js kein 3D kann (--2d).
   Sonst steht bis zum ersten 3D-Bild (Bruchteile einer Sekunde) nur der dunkle Himmel da, kein Bildwechsel. */
.anf__motiv .am-berge,.anf__motiv .am-see{visibility:hidden}
.anf__motiv--2d .am-berge,.anf__motiv--2d .am-see{visibility:visible}
@media (scripting: none){ .anf__motiv .am-berge,.anf__motiv .am-see{visibility:visible} }
.anf__motiv--3d .amotiv{visibility:hidden;transition:visibility 0s .45s}
.anf__bild{cursor:crosshair}
.anf__bild .anf__glas{cursor:auto}

/* ---------- Glaskarten */
.anf__glas{position:absolute;z-index:2;left:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);padding:18px 20px;border-radius:20px;background:rgba(12,37,72,.8);border:1px solid rgba(255,255,255,.2);box-shadow:0 24px 44px -26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);color:#fff}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)){
  .anf__glas{background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
}
.anf__glas--oben{top:clamp(18px,2.4vw,32px);max-width:360px}
.anf__glas--person{bottom:clamp(18px,2.4vw,32px);max-width:440px}
.anf__glas-k{display:flex;align-items:center;gap:9px;font:600 14px/1.2 var(--sans);letter-spacing:.01em}
.anf__punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 4px rgba(255,214,0,.18)}
.anf__glas-t{margin-top:9px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.88)}
.anf__glas-h{font:600 17px/1.25 var(--sora);letter-spacing:-.01em;color:#fff}
.anf__status{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font:600 12.5px/1.2 var(--sans);color:#e3eaf2}
.anf__status[hidden]{display:none}
.anf__status i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#b6c3d1}
.anf__status.is-offen{color:#b9f5d0}
.anf__status.is-offen i{background:#3ddc84}
.anf__status.is-offen i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #3ddc84;opacity:0}
@media (prefers-reduced-motion: no-preference){ .anf__status.is-offen i::after{animation:amPuls 2.4s ease-out infinite} }
@keyframes amPuls{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.anf__person{display:flex;align-items:center;gap:13px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.anf__person img{flex:none;width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:2px solid rgba(255,255,255,.7);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.anf__person p{line-height:1.3}
.anf__person b{display:block;font:600 15.5px/1.3 var(--sora);color:#fff}
.anf__person span{display:block;font-size:13.5px;color:rgba(255,255,255,.78)}

/* ---------- Responsiv */
@media (max-width:1099px){
  .anf{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .anf__glas{padding:16px 17px}
}
@media (max-width:899px){
  .anf{grid-template-columns:minmax(0,1fr);border-radius:28px}
  /* Band unter dem Formular: Glaskarten im Fluss, dazwischen Platz für das Bergpanorama */
  .anf__bild{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(200px,48vw,250px);min-height:0;padding:clamp(16px,3vw,28px)}
  .anf__glas{position:relative;top:auto;bottom:auto;left:auto;right:auto;max-width:none}
}
@media (min-width:640px) and (max-width:899px){ .anf__glas{max-width:440px} .anf__glas--person{align-self:flex-end} }
@media (max-width:639px){
  .anf-sec .wrap{width:calc(100% - 24px)}
  .anf{border-radius:24px}
  .anf__seite{padding:30px 20px 26px}
  .anf__titel{font-size:clamp(27px,7.6vw,34px);margin-top:18px}
  .anf__lead{font-size:16px;margin-bottom:24px}
  .anf__zeile{grid-template-columns:minmax(0,1fr)}
  .anf__seg label{gap:7px;font-size:14.5px;padding:0 6px}
  .anf__direkt{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:12px}
  .anf__glas-t{font-size:14.5px}
}
@media (max-width:479px){ .anf__seg label svg{display:none} }

/* ---------- Schlanker Seitenkopf (z. B. /kontakt/: die Anfrage-Karte folgt sofort) */
.phero--schlank{padding:clamp(22px,3.2vw,44px) 0 0;border-bottom:0}
.phero--schlank .h1__m{font-size:clamp(32px,3.4vw,50px)}
.phero--schlank .hero__lead{max-width:62ch;margin:16px 0 0}
.phero--schlank + .anf-sec{padding-top:clamp(26px,3.4vw,44px)}

/* ---------- kompakter (Kärnten, zusatz-kontakt.css) */
/* Kontaktkarte kompakter (Bernd, 29.09.2026): kleinere Überschrift, kurze Einleitung, flachere Felder,
   weniger Abstände. Überschreibt die Grundregeln aus site.css (.anf…). */
.anf__seite{padding:clamp(24px,3.2vw,44px) clamp(20px,3.4vw,48px) clamp(20px,2.6vw,34px)}
.anf__badge{padding:5px 12px 5px 10px;font-size:12.5px}
.anf__titel{margin:14px 0 6px;font-size:clamp(24px,2.2vw,32px);line-height:1.12}
.anf__lead{margin-bottom:18px;font-size:15.5px;line-height:1.5}
.anf__seg label{min-height:42px;font-size:14.5px}
.anf__form .anf__modus{margin-bottom:14px}
.anf__f{margin-bottom:10px}
.anf__f input,.anf__f textarea{height:52px;padding:20px 40px 5px 46px;font-size:16px;border-radius:12px}
.anf__f textarea{height:auto;min-height:84px;padding-top:24px}
.anf__f label{left:47px;top:17px;font-size:15px}
.anf__f input:focus + label,.anf__f input:not(:placeholder-shown) + label,.anf__f textarea:focus + label,.anf__f textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.74)}
.anf__ic{top:16px;left:15px}
.anf__form .anf__gruppe{margin:2px 0 12px}
.anf__gruppe legend{margin-bottom:8px;font-size:14px}
.anf__chips{gap:6px}
.anf__chip span{min-height:36px;padding:0 13px;font-size:13.5px}
.anf__chip input:checked + span{padding-left:29px}
.anf__chip span::before{left:12px}
.anf__ds{margin:4px 0 0;font-size:13px;line-height:1.45}
.anf__senden{height:52px;margin-top:14px;border-radius:13px}
.anf__fuss{margin-top:14px;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;font-size:12.5px}
.anf__fuss p{margin:0}
.anf__fuss .anf__direkt{margin:0;padding:0;border:0;gap:6px 18px}
.anf__fuss .anf__direkt a{font-size:14px}
@media (max-width:899px){ .anf__fuss{flex-direction:column;align-items:flex-start} }
@media (max-width:899px){
  .anf__zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px}
  .anf__f textarea{min-height:72px}
  .anf__lead{margin-bottom:14px}
  .anf__fuss .anf__direkt{flex-direction:row;flex-wrap:wrap;gap:0 18px}
}
@media (max-width:359px){ .anf__zeile{grid-template-columns:minmax(0,1fr)} }

/* ---------- Handy (Kärnten, zusatz-mobil.css) */
@media (max-width:760px){
  /* Gipfelcheck: Kleingedrucktes nicht an „Angebot anfragen“ kleben */
  .anf__direkt a{min-height:44px}
}

/* ---- zusatz-landingpages.css ---- */
/* Zusätzliche Stile für den Bereich „landingpages“ – nur von diesem Bereich ändern. */

/* Handwerker-Landingpage: zwei Kundenstimmen nebeneinander (Abschnitt #made-in-tirol).
   Das große Anführungszeichen (.zitatblock::before) liegt sonst über der ersten Textzeile. */
#made-in-tirol .zitatblock{height:100%}

/* Hero: Teamreihe unter den Knöpfen (wie webdesign-kaernten.net). Die Köpfe gleiten nacheinander weich ein
   (Unschärfe → scharf), ein feiner Lichtring zieht einmal darüber; beim Darüberfahren wird ein Kopf groß
   und zeigt Name und Rolle. */
.hteam{display:flex;width:max-content;max-width:100%;align-items:center;gap:16px;margin-top:22px;text-decoration:none;color:var(--text)}
.hteam__k{position:relative;display:block;flex:none;width:52px;height:52px;margin-left:-14px;border-radius:50%;
  box-shadow:0 0 0 3px var(--papier),0 6px 16px rgba(20,23,28,.14);background:var(--kalk2);
  opacity:0;translate:-12px 0;scale:.82;filter:blur(6px);
  animation:hteamRein .9s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,margin .5s cubic-bezier(.16,1,.3,1);z-index:1}
.hteam__k:first-child{margin-left:0;z-index:5}
.hteam__k:nth-child(1){animation-delay:.55s}.hteam__k:nth-child(2){animation-delay:.68s;z-index:4}
.hteam__k:nth-child(3){animation-delay:.81s;z-index:3}.hteam__k:nth-child(4){animation-delay:.94s;z-index:2}
.hteam__k img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* Lichtring: dreht einmal nach dem Einblenden, dann Ruhe */
.hteam__k::before{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,214,0,.95) 82%,transparent 94%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  opacity:0;animation:hteamRing 1.4s cubic-bezier(.4,0,.2,1) forwards}
.hteam__k:nth-child(1)::before{animation-delay:1.25s}.hteam__k:nth-child(2)::before{animation-delay:1.38s}
.hteam__k:nth-child(3)::before{animation-delay:1.51s}.hteam__k:nth-child(4)::before{animation-delay:1.64s}
.hteam__k::after{content:attr(data-name) " · " attr(data-rolle);position:absolute;left:50%;top:calc(100% + 10px);
  transform:translate(-50%,-6px);white-space:nowrap;font:600 .62rem/1.2 var(--sans);letter-spacing:.01em;color:#fff;
  background:var(--blau-tief);padding:6px 9px;border-radius:7px;box-shadow:0 10px 24px -12px rgba(10,31,61,.6);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.hteam__k:first-child::after{left:0;transform:translate(0,-6px)}
.hteam__txt{font:.82rem/1.3 var(--sans);color:var(--leise);opacity:0;translate:-6px 0;animation:hteamText .7s 1.15s cubic-bezier(.16,1,.3,1) forwards}
.hteam__txt b{color:var(--anthrazit);font-weight:600}
@media (hover:hover){
  .hteam:hover .hteam__k{margin-left:-6px}
  .hteam:hover .hteam__k:first-child{margin-left:0}
  .hteam__k:hover{transform:translateY(-6px) scale(1.5);z-index:9;box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--gelb),0 16px 32px rgba(20,23,28,.25)}
  .hteam__k:hover::after{opacity:1;transform:translate(-50%,0)}
  .hteam__k:first-child:hover::after{transform:none}
}
.hteam:focus-visible{outline:2px solid var(--blau);outline-offset:6px;border-radius:30px}
@keyframes hteamRein{to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes hteamRing{0%{opacity:0;transform:rotate(0)}15%{opacity:1}100%{opacity:0;transform:rotate(300deg)}}
@keyframes hteamText{to{opacity:1;translate:0 0}}
@media (max-width:560px){.hteam{margin-top:18px}.hteam__k{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.hteam__k,.hteam__txt{animation:none;opacity:1;translate:none;scale:none;filter:none}.hteam__k::before{display:none}.hteam__k{transition:none}}

/* ---- zusatz-leistungen.css ---- */
/* Zusätzliche Stile für den Bereich „leistungen“ – nur von diesem Bereich ändern. */
/* Alle Klassen beginnen mit „lei-“, damit sie anderen Bereichen nicht in die Quere kommen. */

/* ---------- Paketkarten (Website, Webshop) */
.lei-pakete{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.lei-paket{position:relative;display:flex;flex-direction:column;padding:28px 26px 24px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 1px 2px rgba(20,23,28,.04),0 18px 40px -28px rgba(20,23,28,.45);color:var(--text)}
.lei-paket--hervor{border:2px solid var(--see);box-shadow:0 26px 50px -30px rgba(31,86,144,.55)}
.lei-paket__band{position:absolute;top:-13px;left:24px;padding:5px 11px;border-radius:6px;background:var(--blau);color:#fff;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.lei-paket__name{font:600 12.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--see-tief);margin:0 0 12px}
.lei-paket h3,.dunkel .lei-paket h3{font-size:clamp(30px,2.6vw,38px);line-height:1.05;letter-spacing:-.03em;color:var(--anthrazit);margin:0}
.lei-paket h3 small{font:500 14px/1 var(--sans);letter-spacing:0;color:var(--leise);margin-left:6px}
.lei-paket__fuer{margin:8px 0 18px!important;font-size:15.5px;color:var(--leise)}
.lei-paket ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px dashed var(--linie);display:grid;gap:9px;font-size:15.5px;line-height:1.45}
.lei-paket li{position:relative;padding-left:26px}
.lei-paket li::before{content:"";position:absolute;left:3px;top:.28em;width:6px;height:11px;border:solid var(--see);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.lei-paket li.lei-option::before{top:.55em;left:1px;width:10px;height:0;border-width:2px 0 0;border-style:dashed;border-color:var(--laerche);transform:none}
.lei-paket__fuss{margin-top:auto!important;padding-top:20px;font-size:14.5px}
@media (max-width:999px){ .lei-pakete{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:699px){ .lei-pakete{grid-template-columns:minmax(0,1fr);max-width:560px} }

/* ---------- Haken-Liste (kurze Aufzählung, ein- oder zweispaltig) */
.lei-haken{list-style:none;margin:0;padding:0;display:grid;gap:10px 32px;max-width:900px}
.lei-haken--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lei-haken--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lei-haken li{position:relative;padding-left:34px;line-height:1.5}
.lei-haken li::before{content:"";position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;background:var(--see-bg);box-shadow:inset 0 0 0 1px var(--see-rand)}
.lei-haken li::after{content:"";position:absolute;left:8px;top:.3em;width:5px;height:10px;border:solid var(--see-tief);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dunkel .lei-haken li::before{background:rgba(143,215,224,.14);box-shadow:inset 0 0 0 1px rgba(143,215,224,.4)}
.dunkel .lei-haken li::after{border-color:#9dbde6}
@media (max-width:899px){ .lei-haken--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){ .lei-haken--2,.lei-haken--3{grid-template-columns:minmax(0,1fr)} }

/* ---------- Kennzahlen (nur belegte Werte) */
.lei-zahlen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lei-zahlen li{padding:22px 22px 20px;border-radius:14px;background:var(--papier);border:1px solid var(--linie);font-size:15px;line-height:1.45;color:var(--text)}
.lei-zahlen b{display:block;margin-bottom:8px;font:600 clamp(30px,3vw,40px)/1 var(--sora);letter-spacing:-.03em;color:var(--see-tief)}
.dunkel .lei-zahlen li{background:var(--tanne-tief);border-color:var(--tanne-linie);color:var(--d-text)}
.dunkel .lei-zahlen b{color:var(--blau-d)}
.lei-quelle{font:500 12.5px/1.5 var(--mono);color:var(--leise)}
.dunkel .lei-quelle{color:var(--d-leise)}
@media (max-width:1099px){ .lei-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:479px){ .lei-zahlen{grid-template-columns:minmax(0,1fr)} }

/* ---------- Tabellen: auf dem Handy waagrecht innerhalb des Kastens scrollbar */
.lei-tabelle{max-width:900px;overflow-x:auto;border-radius:14px;background:var(--papier);border:1px solid var(--linie);padding:6px 10px}
.lei-tabelle table{width:100%;min-width:520px;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.lei-tabelle th,.lei-tabelle td{padding:12px 12px;border-bottom:1px solid var(--linie2);text-align:left;vertical-align:top}
.lei-tabelle tr:last-child td{border-bottom:0}
.lei-tabelle th{font:600 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.lei-tabelle td:first-child{font-weight:600;color:var(--anthrazit)}
.lei-tabelle a{white-space:nowrap}
@media (max-width:639px){ .lei-tabelle table{min-width:0;font-size:15px} .lei-tabelle th,.lei-tabelle td{padding:10px 8px} .lei-tabelle a{white-space:normal} }

/* ---------- Kacheln mit Preis-/Stichwortzeile */
.lei-kacheln .kachel__marke{color:var(--laerche-tief)}

/* ---- zusatz-menue.css ---- */
/* Handy-/Tablet-Menü (unter 1180 px): Vollbild unter dem Kopf, dunkler Verlauf, Einträge gleiten gestaffelt ein.
   Der Kopf hat backdrop-filter → position:fixed wäre auf den Kopf begrenzt; darum absolute + Bildschirmhöhe. */
@media (max-width:1179px){
  html:has(.hdr.is-open){overflow:hidden}
  .hdr.is-open{background:var(--kalk)}
  .hdr .hdr__nav,.hdr.is-open .hdr__nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));max-height:none;overflow-y:auto;overscroll-behavior:contain;
    padding:12px 28px calc(28px + env(safe-area-inset-bottom));border:0;box-shadow:none;
    background:
      radial-gradient(120% 60% at 100% 0%,rgba(157,189,230,.22),transparent 60%),
      radial-gradient(90% 70% at 0% 100%,rgba(79,127,184,.40),transparent 65%),
      linear-gradient(165deg,#14171c 0%,#163a6b 55%,#1d4a86 100%);
    color:#fff;visibility:hidden;clip-path:circle(0% at calc(100% - 44px) -20px);
    transition:clip-path .55s cubic-bezier(.7,0,.25,1),visibility 0s linear .55s}
  .hdr.is-open .hdr__nav{visibility:visible;clip-path:circle(160% at calc(100% - 44px) -20px);
    transition:clip-path .7s cubic-bezier(.65,0,.2,1),visibility 0s}
  /* feine Höhenlinien als Hintergrund-Ornament */
  .hdr__nav::before{content:"";position:absolute;right:-30%;bottom:-10%;width:120%;aspect-ratio:1;pointer-events:none;border-radius:50%;
    background:repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(255,255,255,.05) 22px 23px);opacity:.9}

  .hdr__nav ul{position:relative;padding:0;counter-reset:m}
  .hdr__nav > ul > li{opacity:0;transform:translateY(22px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
  .hdr.is-open .hdr__nav > ul > li{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
  .hdr.is-open .hdr__nav > ul > li:nth-child(1){transition-delay:.18s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(2){transition-delay:.24s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(3){transition-delay:.30s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(4){transition-delay:.36s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(5){transition-delay:.42s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(6){transition-delay:.48s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(7){transition-delay:.54s}
  .hdr.is-open .hdr__nav > ul > li:nth-child(8){transition-delay:.60s}

  .hdr__nav > ul > li > a{display:flex;align-items:baseline;gap:14px;padding:15px 0;color:#fff;
    font:600 clamp(24px,6.6vw,32px)/1.1 var(--sora);letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.12)}
  .hdr__nav > ul > li > a::before{counter-increment:m;content:"0" counter(m);font:500 11px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.45);transform:translateY(-.9em)}
  .hdr__nav > ul > li > a svg{display:none}
  .hdr__nav > ul > li > a:hover,.hdr__nav > ul > li > a:focus-visible{color:var(--blau-d)}
  .hdr__nav > ul > li > a[aria-current="page"]{color:var(--blau-d)}
  .hdr__nav > ul > li > a[aria-current="page"]::before{color:var(--blau-d)}

  .hdr__subknopf{color:#fff;border-bottom-color:rgba(255,255,255,.12)!important}
  .hdr__nav .hdr__subliste{padding:6px 0 12px 32px}
  .hdr__nav .hdr__subliste a{color:rgba(255,255,255,.78);font:500 17px/1.3 var(--sans);padding:10px 0}
  .hdr__nav .hdr__subliste a:hover{color:var(--blau-d)}

  /* Kontaktknöpfe groß am Ende – auch am Tablet */
  .hdr.is-open .hdr__navknoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding:28px 0 0;
    opacity:0;transform:translateY(16px);animation:menueKnoepfe .6s .62s cubic-bezier(.2,.8,.2,1) forwards}
  .hdr__nav .hdr__knopf{height:56px;border-radius:12px;font-size:16px}
  .hdr__nav .hdr__knopf--ruf{background:rgba(255,255,255,.06)!important;border:1.5px solid rgba(255,255,255,.35)!important;color:#fff}
  .hdr__nav .hdr__knopf--mail{background:#fff;border-color:#fff!important;color:var(--blau-tief)}
}
@media (max-width:459px){ .hdr.is-open .hdr__navknoepfe{grid-template-columns:1fr} }
@keyframes menueKnoepfe{to{opacity:1;transform:none}}
@media (max-width:1179px) and (prefers-reduced-motion:reduce){
  .hdr .hdr__nav,.hdr.is-open .hdr__nav,.hdr__nav > ul > li{transition:none!important}
  .hdr.is-open .hdr__navknoepfe{animation:none;opacity:1;transform:none}
}
@media (max-width:1179px){ .hdr__nav .hdr__knopf--ruf svg{color:var(--blau-d);stroke:currentColor} }

/* ---- zusatz-migration.css ---- */
/* Zusätzliche Stile für Inhalte, die 1:1 von der alten WordPress-Seite übernommen wurden
   (build/ratgeber/*.html, build/seiten/alt-*.html – erzeugt von build/werkzeug/*_uebernehmen.py). */

/* ---------- Bilder im Fließtext */
.artikel__fig,.prosa--alt .artikel__fig{margin:26px 0;max-width:70ch}
.artikel__bild{width:100%;height:auto;border-radius:12px;background:var(--kalk2);box-shadow:0 18px 40px -30px rgba(20,23,28,.55)}
.prosa > .artikel__fig:first-child{margin-top:0}
.prosa p .artikel__bild{display:inline-block;margin:10px 0}

/* ---------- Video: Link statt Einbettung (keine Cookies) */
.video-link{display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid var(--see-rand);border-radius:10px;background:var(--see-bg);max-width:70ch}
.video-link::before{content:"";flex:none;width:0;height:0;border-left:11px solid var(--see-tief);border-top:7px solid transparent;border-bottom:7px solid transparent}

/* ---------- Übernommene Seiten (Elementor) */
.alt-sec{padding-top:clamp(32px,4vw,56px)}
.prosa--alt{max-width:860px}
.prosa--alt > figure,.prosa--alt > div{max-width:70ch}
.alt-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:24px 0}
.alt-galerie .artikel__fig{margin:0}
.alt-galerie p{margin:0}
.alt-stimmen,.alt-preis{display:grid;gap:16px;margin:26px 0}
.alt-stimmen blockquote{margin:0;padding:18px 22px;border-left:4px solid var(--see);background:var(--papier);border-radius:0 10px 10px 0}
.alt-preis{padding:20px 22px;border:1px solid var(--linie);border-radius:12px;background:var(--papier)}
.alt-zaehler{font:700 clamp(32px,4vw,48px)/1 var(--sora);color:var(--tanne);margin:20px 0 4px}
.prosa blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--see)}
.prosa img{max-width:100%;height:auto}

/* ---------- Übernommene Seiten im Ratgeber-Aufbau (CI-Umbau 29.09.2026) */
.prosa--alt{max-width:none}
.prosa--alt > .marke{margin:56px 0 -8px}          /* Überzeile gehört zur folgenden Überschrift, nicht zum Absatz davor */
.prosa--alt > .marke + h2{margin-top:0}
.prosa--alt > .marke:first-child{margin-top:0}
.schritte{list-style:none;margin:20px 0 8px;padding:0;display:grid;gap:14px;counter-reset:none}
.schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--linie);border-radius:14px;background:var(--papier)}
.schritte__nr{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--anthrazit);color:#fff;font:600 13px/1 var(--mono)}
.schritte p{margin:4px 0 0}

/* ---- zusatz-ratgeber.css ---- */
/* Zusätzliche Stile für den Bereich „ratgeber“ – nur von diesem Bereich ändern.
   Seiten: /blog/, alle Ratgeber (typ = "ratgeber"), Rechtliches, 404. */

/* ---------- Lange Wörter („Suchmaschinenoptimierung“) in Überschriften umbrechen statt Querscrollen */
.phero--ratgeber .h1__m,
.phero--rechtliches .h1__m,
.artikel__text h2,
.artikel__text h3,
#beitraege .kachel h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---------- Inhaltsverzeichnis: Sprungziel knapp unter dem Kopf
   (html hat schon scroll-padding-top, sonst addieren sich beide Abstände) */
.artikel__text h2{scroll-margin-top:0}

/* ---------- Tabellen im Ratgeber: am Handy als Karten untereinander */
.artikel__text table{margin:22px 0}
@media (max-width:639px){
  .artikel__text thead{display:none}
  .artikel__text table,.artikel__text tbody,.artikel__text tr,.artikel__text td{display:block;width:100%}
  .artikel__text tr{padding:14px 0;border-bottom:1px solid var(--linie)}
  .artikel__text td{padding:0;border:0}
  .artikel__text td:first-child{white-space:normal;font-size:17px}
  .artikel__text td:nth-child(2){margin:4px 0 6px;font-size:15.5px}
}

/* ---------- Rechtliches: Platzhalter dürfen umbrechen */
.prosa--recht .ph{white-space:normal;overflow-wrap:anywhere}

/* Neue Ratgeber (Redaktionsplan): Tabellen scrollbar am Handy, KI-Bilder im Text gekennzeichnet */
.prosa .tabelle{overflow-x:auto;margin:24px 0;max-width:76ch}
.prosa .tabelle table{min-width:520px}
.prosa .tabelle th,.prosa .tabelle td{padding:10px 12px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.prosa .tabelle th{background:var(--blau-hell);color:var(--tanne);font-weight:600}
.ki-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--leise)}
.ki-hinweis{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font:500 11.5px/1.3 var(--mono);letter-spacing:.03em;white-space:nowrap}
.ki-hinweis::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tuerkis)}

/* Codebeispiele im Ratgeber (z. B. llms.txt): Kasten, am Handy waagrecht scrollbar statt Seite zu sprengen */
.artikel__text pre{margin:22px 0;padding:16px 18px;max-width:76ch;overflow-x:auto;background:#eff2f5;border:1px solid var(--linie);border-radius:10px;font-size:14px;line-height:1.55}
.artikel__text pre code{font-family:var(--mono);white-space:pre;background:none;padding:0}
.artikel__text p code,.artikel__text li code,.artikel__text td code{font-family:var(--mono);font-size:.92em;background:#eff2f5;padding:1px 5px;border-radius:4px}

/* ---- zusatz-themen.css ---- */
/* Zusätzliche Stile für die Themenseiten „Barrierefreie Website“ und „Website-Sicherheit“ (28.10.2026).
   Alle Klassen beginnen mit „thm-“ bzw. „st“ (Selbsttest), damit sie anderen Bereichen nicht in die Quere kommen.
   Barrierefreiheit: Kontraste ≥ 4,5:1, sichtbarer Fokus, Bewegung nur ohne „weniger Bewegung“. */

/* ---------- Kurzantwort „Das Wichtigste in 30 Sekunden“ */
.thm-kurz{max-width:880px;padding:26px 28px 24px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);
  box-shadow:inset 5px 0 0 var(--blau),0 18px 40px -32px rgba(20,23,28,.5)}
.thm-kurz__k{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 12.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blau-tief)}
.thm-kurz__k svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.thm-kurz ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.thm-kurz li{position:relative;padding-left:30px;font-size:17px;line-height:1.55;color:var(--anthrazit)}
.thm-kurz li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 3px rgba(255,214,0,.25)}
.thm-kurz__fuss{margin:16px 0 0;font:500 12.5px/1.5 var(--mono);color:var(--leise)}

/* ---------- Selbsttest */
.st{max-width:880px;padding:28px 28px 24px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 22px 48px -36px rgba(20,23,28,.55)}
.st__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:18px}
.st__kopf h3{margin:0;font-size:21px}
.st__stand{font:500 13px/1.3 var(--mono);color:var(--leise)}
.st__fragen{display:grid;gap:12px}
.st__frage{margin:0;padding:14px 16px;border:1px solid var(--linie);border-radius:12px;background:var(--kalk);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center}
.st__frage legend{float:left;padding:0;font-size:16.5px;line-height:1.45;color:var(--anthrazit)}
.st__frage legend small{display:block;margin-top:2px;font-size:14px;color:var(--leise)}
.st__wahl{display:flex;gap:8px}
.st__wahl label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:0 14px;border-radius:9px;border:1.5px solid #8a929c;background:var(--papier);
  font:600 15px var(--sans);color:var(--anthrazit);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.st__wahl input{position:absolute;opacity:0;width:1px;height:1px}
.st__wahl label:hover{border-color:var(--anthrazit)}
.st__wahl label:has(input:checked){background:var(--blau);border-color:var(--blau);color:#fff}
.st__wahl label:has(input:focus-visible){outline:3px solid var(--anthrazit);outline-offset:2px}
.st__frage:has(input:checked){background:var(--papier);border-color:var(--blau-rand)}
@media (max-width:599px){ .st{padding:22px 16px 20px} .st__frage{grid-template-columns:minmax(0,1fr)} }
.st__ergebnis{margin-top:20px;padding:20px 22px;border-radius:12px;border:1px solid var(--linie);background:var(--kalk)}
.st__ergebnis p{margin:0 0 10px;max-width:70ch}
.st__ergebnis p:last-child{margin-bottom:0}
.st__stufe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:600 19px/1.3 var(--sora);color:var(--anthrazit)}
.st__punkt{width:16px;height:16px;border-radius:50%;background:var(--gut);box-shadow:0 0 0 4px var(--gut-bg)}
.st__stufe[data-s="mittel"] .st__punkt{background:var(--mittel);box-shadow:0 0 0 4px var(--mittel-bg)}
.st__stufe[data-s="schlecht"] .st__punkt{background:var(--schlecht);box-shadow:0 0 0 4px var(--schlecht-bg)}
.st__zahl{font:500 13.5px var(--mono);color:var(--leise)}
.st__luecken{margin:0 0 12px;padding-left:22px;display:grid;gap:8px}
.st__luecken b{color:var(--anthrazit)}
.st__klein{font:500 12.5px/1.5 var(--mono);color:var(--leise)}
.st__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.st__neu{background:none;border:0;padding:6px 0;font:500 15px var(--sans);color:var(--blau-tief);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.st__neu:focus-visible{outline:3px solid var(--anthrazit);outline-offset:3px;border-radius:4px}
.st:not(.st--bereit) .st__js{display:none}
.st__ohnejs{margin-top:16px;font-size:15px;color:var(--leise)}
.st--bereit .st__ohnejs{display:none}
@media (prefers-reduced-motion:no-preference){
  .st__ergebnis--neu{animation:stNeu .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes stNeu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .st__ergebnis--neu .st__punkt{animation:stPunkt .7s .15s cubic-bezier(.2,1.6,.4,1) both}
  @keyframes stPunkt{from{transform:scale(0)}to{transform:scale(1)}}
}

/* ---------- Notfall-Block „Website gehackt?“ */
.thm-notfall{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1040px;padding:30px;border-radius:16px;
  background:var(--papier);border:1px solid #f0c9c4;box-shadow:inset 5px 0 0 var(--schlecht)}
.thm-notfall ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.thm-notfall li{counter-increment:n;position:relative;padding-left:46px;line-height:1.5}
.thm-notfall li::before{content:counter(n);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--schlecht-bg);color:var(--schlecht);font:600 15px var(--sora)}
.thm-notfall li b{color:var(--anthrazit)}
.thm-notfall__ruf{padding:22px;border-radius:12px;background:var(--kalk);border:1px solid var(--linie)}
.thm-notfall__ruf p{margin:0 0 14px}
.thm-notfall__ruf .btn{width:100%}
@media (max-width:799px){ .thm-notfall{grid-template-columns:minmax(0,1fr);padding:22px 18px} }

/* ---------- Faktentabelle mit Quelle */
.thm-fakten caption{caption-side:bottom;text-align:left;padding:12px 4px 6px;font:500 12.5px/1.55 var(--mono);color:var(--leise)}
.thm-fakten caption a{color:var(--blau-tief)}

/* ---------- Ansprechpartner (E-E-A-T) */
.thm-person{display:flex;align-items:center;gap:18px;max-width:760px;margin-top:26px;padding:18px 20px;border-radius:14px;background:var(--papier);border:1px solid var(--linie)}
.thm-person img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover}
.thm-person p{margin:0;font-size:15.5px;line-height:1.5}
.thm-person b{display:block;font:600 16.5px/1.3 var(--sora);color:var(--anthrazit)}
.dunkel .thm-person{background:var(--tanne-karte);border-color:var(--tanne-linie)}
.dunkel .thm-person b{color:#fff}
.thm-fakten tbody th{font:600 15.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--anthrazit);white-space:nowrap;padding-right:20px}
@media (max-width:639px){ .thm-fakten tbody th{white-space:normal} }
/* Faktentabelle am Handy: Frage über Antwort statt zwei Spalten (kein seitliches Scrollen) */
@media (max-width:639px){
  .lei-tabelle .thm-fakten{min-width:0}
  .thm-fakten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .thm-fakten tbody tr{display:block;padding:12px 4px;border-bottom:1px solid var(--linie2)}
  .thm-fakten tbody tr:last-child{border-bottom:0}
  .thm-fakten tbody th,.thm-fakten tbody td{display:block;padding:0;border:0}
  .thm-fakten tbody th{margin-bottom:4px}
}

/* ---- zusatz-vertrauen.css ---- */
/* Zusätzliche Stile für den Bereich „vertrauen“ – nur von diesem Bereich ändern.
   Seiten: /preispakete/, /referenzen/ (+ Fallstudien), /website-check/, /ueber-uns/, /kontakt/ */

/* ---------- Preispakete: Paketkarten */
.vt-pakete{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.vt-paket{position:relative;display:flex;flex-direction:column;padding:28px 26px 26px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 1px 2px rgba(20,23,28,.04),0 18px 40px -28px rgba(20,23,28,.45)}
.vt-paket--beliebt{border:2px solid var(--tanne);box-shadow:0 26px 54px -30px rgba(20,23,28,.6)}
.vt-paket__flag{position:absolute;top:-13px;left:24px;margin:0;padding:5px 12px;border-radius:999px;background:var(--blau);color:#fff;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.vt-paket__k{margin:0;font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--see-tief)}
.vt-paket__p{margin:12px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.vt-paket__p b{font:600 clamp(30px,2.6vw,38px)/1.05 var(--sora);letter-spacing:-.03em;color:var(--anthrazit)}
.vt-paket__p small{font:500 13px/1 var(--mono);color:var(--leise)}
.vt-paket__satz{margin:6px 0 0;font-size:15.5px;color:var(--leise)}
.vt-paket__l{list-style:none;margin:20px 0 24px;padding:18px 0 0;border-top:1px dashed var(--linie);display:grid;gap:9px;font-size:15.5px;line-height:1.45;color:var(--text)}
.vt-paket__l li{position:relative;padding-left:26px}
.vt-paket__l li::before{content:"";position:absolute;left:2px;top:.32em;width:11px;height:6px;border-left:2.2px solid var(--see);border-bottom:2.2px solid var(--see);transform:rotate(-45deg)}
.vt-paket .btn{margin-top:auto;align-self:flex-start}
@media (max-width:1099px){ .vt-pakete{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:699px){ .vt-pakete{grid-template-columns:minmax(0,1fr);max-width:620px} }

.vt-fein{margin:24px 0 0;font-size:15px;color:var(--leise)}
.dunkel .vt-fein{color:var(--d-leise)}

/* ---------- Preispakete: Extras als Tabelle */
.vt-tabelle{width:100%;max-width:880px;border-collapse:collapse;font-size:16px;line-height:1.5}
.vt-tabelle th,.vt-tabelle td{padding:14px 16px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.vt-tabelle thead th{font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);border-bottom:2px solid var(--tanne)}
.vt-tabelle tbody th{font-weight:600;color:var(--anthrazit);white-space:nowrap}
.vt-tabelle td:nth-child(2){font:600 16px/1.5 var(--sora);color:var(--anthrazit);white-space:nowrap}
@media (max-width:639px){
  .vt-tabelle thead{display:none}
  .vt-tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--linie)}
  .vt-tabelle th,.vt-tabelle td{padding:0;border:0}
  .vt-tabelle tbody th{white-space:normal}
  .vt-tabelle td:nth-child(3){grid-column:1 / -1;font-size:15px;color:var(--text)}
}

/* ---------- Referenzen: weitere Projekte */
.vt-refs .ref{grid-column:span 4}
.vt-ref__satz{margin-top:10px!important;font-size:15px;line-height:1.5;color:var(--d-text)}
.vt-weitere{margin:28px 0 0;max-width:80ch;font-size:15.5px;line-height:1.6;color:var(--d-leise)}
@media (max-width:1099px){ .vt-refs .ref{grid-column:span 6} }
@media (max-width:639px){ .vt-refs .ref{grid-column:1 / -1} }

/* ---------- Fallstudie: Eckdaten dürfen umbrechen */
.fakten--fall li b{white-space:normal}

/* ---------- Website-Check: die 10 Prüfpunkte */
.vt-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.vt-weg{padding:26px 26px 22px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 18px 40px -30px rgba(20,23,28,.45)}
.vt-weg__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;font-size:22px;letter-spacing:-.02em}
.vt-weg__h small{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.vt-punkte{list-style:none;margin:0;padding:0;counter-reset:vtp;display:grid;gap:0}
.vt-punkte[start="6"]{counter-reset:vtp 5}
.vt-punkte li{counter-increment:vtp;position:relative;display:grid;gap:4px;padding:14px 0 14px 46px;border-top:1px dashed var(--linie)}
.vt-punkte li::before{content:counter(vtp);position:absolute;left:0;top:14px;display:grid;place-items:center;width:32px;height:28px;border-radius:7px;background:var(--tanne);color:#fff;font:600 13px/1 var(--mono)}
.vt-punkte b{font:600 17px/1.3 var(--sora);color:var(--anthrazit)}
.vt-punkte span{font-size:15px;line-height:1.5;color:var(--text)}
@media (max-width:899px){ .vt-wege{grid-template-columns:minmax(0,1fr)} .vt-weg{padding:22px 18px 16px} }

/* ---------- Über uns: Orte und Fakten */
.vt-orte{list-style:none;margin:14px 0 0!important;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vt-orte li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--papier);border:1px solid var(--linie);font:500 15px/1.2 var(--sans);color:var(--anthrazit)}
.vt-orte li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--see)}
.vt-orte li:last-child{background:none;border-style:dashed}
.vt-orte a{color:inherit;text-decoration:underline;text-decoration-color:var(--see);text-underline-offset:3px}
.vt-fakten{grid-template-columns:repeat(3,auto);margin:0!important;max-width:none}
@media (max-width:639px){ .vt-fakten{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Kontakt */
.vt-umbruch{overflow-wrap:anywhere}

/* ---------- Fallstudien: lange Platzhalter dürfen umbrechen (sonst Querscrollen am Handy) */
.phero--fallstudie ~ section .ph{white-space:normal;overflow-wrap:anywhere}
.phero--fallstudie .hero__alt{margin-bottom:22px}
.vt-wege--plus{margin-top:22px}
.vt-wege--plus .vt-weg{background:var(--blau-hell);border-color:var(--blau-rand);box-shadow:none}
.vt-wege--plus .vt-weg__h{margin-bottom:10px;font-size:19px}
.vt-text{font-size:15.5px;line-height:1.55}
/* GEO-Check: fünf Prüfpunkte im Detail (build/seiten/geo-check.html) */
.geo-punkte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.geo-punkte li{background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:24px 24px 20px}
.geo-punkte li:last-child{grid-column:1/-1}
.geo-punkte h3{display:flex;align-items:center;gap:12px;font-size:21px;letter-spacing:-.015em}
.geo-punkte h3 span{flex:none;width:36px;height:36px;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center;font:600 16px/1 var(--sora)}
.geo-punkte__frage{margin-top:8px;font-weight:600;color:var(--anthrazit)}
.geo-punkte dl{margin:14px 0 0;display:grid;grid-template-columns:118px 1fr;gap:8px 14px;font-size:15.5px;line-height:1.5}
.geo-punkte dt{font:600 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.geo-punkte dd{margin:0}
@media (max-width:899px){ .geo-punkte{grid-template-columns:minmax(0,1fr)} .geo-punkte dl{grid-template-columns:1fr;gap:2px} .geo-punkte dd{margin-bottom:8px} }

/* ---- zusatz-workshop.css ---- */
/* webdesigner-tirol.at – Seite /workshop/ (build/seiten/workshop.html): Termine, Inhalt, Website-Check, Anmeldung */

/* ---------- Termine */
.ws-termine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ws-termin{display:flex;flex-direction:column;background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:24px 22px 22px;box-shadow:0 1px 2px rgba(20,23,28,.04)}
.ws-termin__art{font:600 12px/1.3 var(--sora);letter-spacing:.12em;text-transform:uppercase;color:var(--blau)}
.ws-termin h3{font-size:20px;line-height:1.25;margin-top:10px;letter-spacing:-.01em}
.ws-termin__zeit{margin-top:8px;font-weight:600;color:var(--anthrazit)}
.ws-termin__ort{margin-top:8px;font-size:15.5px;line-height:1.5}
.ws-termin__k{margin-top:auto;align-self:flex-start;min-height:44px;padding:0 16px;font-size:15px}
.ws-termin__ort + .ws-termin__k,.ws-termin__zeit + .ws-termin__k{margin-top:18px}
.ws-termin > .ws-termin__k{margin-top:auto}
.ws-termin > p:last-of-type{margin-bottom:20px}
.ws-termin--betrieb{background:var(--blau-hell);border:1.5px dashed var(--blau-rand)}
.ws-frist{margin-top:18px;font-size:15px;color:var(--leise)}

/* ---------- Inhalt */
.ws-inhalt{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.ws-punkte{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ws-punkte li{display:grid;grid-template-columns:48px 1fr;gap:18px;background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:20px 22px}
.ws-punkte__nr{width:48px;height:48px;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center;font:600 20px/1 var(--sora)}
.ws-punkte li:nth-child(2) .ws-punkte__nr{background:var(--gelb);color:var(--anthrazit)}
.ws-punkte h3{font-size:20px;line-height:1.3}
.ws-punkte p{margin-top:6px}
.ws-leute{background:var(--papier);border:1px solid var(--linie);border-radius:16px;padding:22px}
.ws-leute__k{font:600 12px/1.3 var(--sora);letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin-bottom:14px}
.ws-person{display:flex;align-items:center;gap:14px;margin-top:12px}
.ws-person img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--linie)}
.ws-person p{display:flex;flex-direction:column;line-height:1.35}
.ws-person b{color:var(--anthrazit);font-family:var(--sora);font-weight:600}
.ws-person span{font-size:15px;color:var(--leise)}
.ws-leute__t{margin-top:16px;font-size:15.5px;line-height:1.55}

/* ---------- Website-Check: Band in Dunkelblau statt Anthrazit (Bernd, 13.10.2026: „das Schwarz ist zu heftig“) */
#website-check.dunkel{background:linear-gradient(160deg,#1d4f8f 0%,#163a6b 55%,#0f2a50 100%)}
#website-check .lead,#website-check .ws-check p{color:#dbe6f4}
#website-check .ws-check__fuss p{color:#b9cbe4}
.ws-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ws-check li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:24px 22px}
.ws-check__nr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gelb);color:var(--anthrazit);font:600 17px/1 var(--sora)}
.ws-check h3{font-size:20px;margin-top:14px}
.ws-check p{margin-top:8px;color:var(--d-text);font-size:16px;line-height:1.55}
.ws-check__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:28px}
.ws-check__fuss p{color:var(--d-leise);font-size:15.5px;max-width:52ch}

/* ---------- Anmeldung */
.ws-anm{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.ws-form,.ws-danke{background:var(--papier);border:1px solid var(--linie);border-radius:20px;padding:clamp(22px,3vw,36px);box-shadow:0 10px 30px rgba(20,23,28,.06)}
.ws-form fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
.ws-form legend{font:600 17px/1.3 var(--sora);color:var(--anthrazit);padding:0;margin-bottom:12px}
.ws-pf{color:var(--blau)}
.ws-wahl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ws-wahl legend{grid-column:1/-1}
.ws-wahl__k,.ws-opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid var(--linie);border-radius:12px;cursor:pointer;transition:border-color .2s,background-color .2s}
.ws-wahl__k input,.ws-opt input,.ws-ds input{position:absolute;opacity:0;width:1px;height:1px}
.ws-wahl__k b,.ws-opt b{display:block;color:var(--anthrazit);font-weight:600;line-height:1.3}
.ws-wahl__k small,.ws-opt small{display:block;font-size:14px;color:var(--leise);margin-top:3px;line-height:1.35}
.ws-wahl__box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--laerche);background:#fff;margin-top:1px;display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.ws-wahl__box::after{content:"";width:11px;height:6px;border:solid #fff;border-width:0 0 2.4px 2.4px;transform:translateY(-1px) rotate(-45deg);opacity:0}
input:checked + .ws-wahl__box{background:var(--blau);border-color:var(--blau)}
input:checked + .ws-wahl__box::after{opacity:1}
input:focus-visible + .ws-wahl__box,.ws-opt input:focus-visible + span{outline:3px solid var(--anthrazit);outline-offset:3px}
.ws-wahl__k:has(input:checked){border-color:var(--blau);background:var(--blau-hell)}
.ws-optionen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-opt{padding:13px 14px 13px 44px}
.ws-opt::before{content:"";position:absolute;left:14px;top:15px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--laerche);background:#fff;box-sizing:border-box}
.ws-opt:has(input:checked){border-color:var(--blau);background:var(--blau-hell)}
.ws-opt:has(input:checked)::before{border:6px solid var(--blau)}
.ws-opt--vorbei{opacity:.45;cursor:not-allowed}
.ws-opt--vorbei small::after{content:" · Anmeldung vorbei"}
.ws-teil[hidden]{display:none}
.ws-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px}
.ws-f{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ws-felder .ws-f{margin-top:0}
.ws-f--breit{grid-column:1/-1}
.ws-f--klein select{max-width:140px}
.ws-f label{font-weight:600;font-size:15px;color:var(--anthrazit)}
.ws-f label small{font-weight:400;color:var(--leise)}
.ws-f input,.ws-f select,.ws-f textarea{font:16px/1.4 var(--sans);color:var(--anthrazit);background:#fff;border:1.5px solid var(--linie);border-radius:10px;padding:12px 14px;min-height:50px;width:100%}
.ws-f textarea{resize:vertical;min-height:90px}
.ws-f input:focus,.ws-f select:focus,.ws-f textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(29,74,134,.15)}
.ws-f [aria-invalid="true"]{border-color:var(--schlecht)}
.ws-f--online[hidden]{display:none}
.ws-hilfe{font-size:14px;color:var(--schlecht);min-height:0}
.ws-hilfe:empty{display:none}
.ws-ds{position:relative;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.ws-ds a{color:var(--see-tief)}
.ws-senden{margin-top:18px;width:100%;min-height:56px;font-size:17px}
.ws-senden.laedt{pointer-events:none;opacity:.7}
.ws-form.wackelt{animation:wsWackeln .4s ease}
@keyframes wsWackeln{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.ws-danke{text-align:center;padding:48px 28px}
.ws-danke svg{color:var(--gut);margin:0 auto 12px;display:block}
.ws-danke h3{font-size:26px}
.ws-danke p{margin-top:10px;max-width:46ch;margin-inline:auto}
/* Anrufen hervorheben (Bernd, 13.10.2026: „wäre super, wenn Leute anrufen“) */
.ws-direkt{background:linear-gradient(160deg,#1d4f8f 0%,#163a6b 55%,#0f2a50 100%);color:var(--d-text);border-radius:20px;padding:26px 24px;position:sticky;top:calc(var(--hh) + 20px);box-shadow:0 14px 34px rgba(20,23,28,.18);overflow:hidden}
.ws-direkt::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--gelb)}
.ws-direkt__k{font:600 12px/1.3 var(--sora);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.ws-direkt h3{color:#fff;font-size:24px;line-height:1.2;margin-top:8px;letter-spacing:-.01em}
.ws-direkt__person{display:flex;align-items:center;gap:14px;margin-top:18px}
.ws-direkt__person img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px var(--gelb)}
.ws-direkt__person p{display:flex;flex-direction:column;line-height:1.35}
.ws-direkt__person b{color:#fff;font-family:var(--sora);font-weight:600}
.ws-direkt__person span{font-size:14.5px;color:#b9cbe4}
.ws-direkt__t{margin-top:14px;font-size:15.5px;line-height:1.55}
.ws-direkt__tel{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 18px;border-radius:14px;background:var(--gelb);color:var(--anthrazit);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ws-direkt__tel:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,214,0,.28)}
.ws-direkt__tel svg{flex:none;width:26px;height:26px}
.ws-direkt__tel span{display:flex;flex-direction:column;font:700 22px/1.15 var(--sora);letter-spacing:-.01em}
.ws-direkt__tel small{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ws-direkt__mail{margin-top:14px;font-size:15px;color:#b9cbe4}
.ws-direkt__mail a{color:#fff;font-weight:600}
.ws-anruf{display:flex;align-items:center;gap:18px;margin-top:22px;padding:16px 20px;border-radius:16px;background:var(--gelb);color:var(--anthrazit)}
.ws-anruf img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #fff}
.ws-anruf p{flex:1;font-size:16.5px;line-height:1.45}
.ws-anruf b{font-family:var(--sora);font-weight:600}
.ws-anruf__k{flex:none;background:var(--blau);border-color:var(--blau);font-family:var(--sora);font-size:17px}
.ws-anruf__k:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
.ws-anruf__k svg{width:20px;height:20px}

@media (max-width:1100px){
  .ws-termine{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .ws-inhalt,.ws-anm{grid-template-columns:1fr}
  .ws-check{grid-template-columns:1fr}
  .ws-direkt{position:static;order:-1}
}
@media (max-width:640px){
  .ws-anruf{flex-wrap:wrap}
  .ws-anruf p{flex:1 1 calc(100% - 80px)}
  .ws-anruf__k{flex:1 1 100%}
  .ws-termine,.ws-wahl,.ws-optionen,.ws-felder{grid-template-columns:1fr}
  .ws-punkte li{grid-template-columns:40px 1fr;gap:14px;padding:18px}
  .ws-punkte__nr{width:40px;height:40px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){ .ws-form.wackelt{animation:none} }
#website-check .ws-check__fuss .btn{background:var(--gelb);border-color:var(--gelb);color:var(--anthrazit)}
#website-check .ws-check__fuss .btn:hover{background:#ffe14d;border-color:#ffe14d}