/* Startseite: Farben aus dem Header-Foto (Nebel, Schnee, tiefes Seewasser), Terracotta wie der rote Kameragurt */
.home{--creme:#E9EEF1;--ink:#15202B;--muted:#56626E;--line:#C7D0D6}
/* Einstieg: Bühne ist 100svh hoch, wird per ScrollTrigger gepinnt */
.intro{position:relative}
.stage{position:relative;height:100svh;min-height:560px;padding:28px var(--pad) 32px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.875rem;font-weight:500;position:relative;z-index:3}
.topbar-ort{color:var(--muted)}
.topbar-rechts{display:flex;align-items:center;gap:16px}
.stage{--mg-hover:#15202B;--akzent-nav:#E9EEF1}
.pills{display:flex;gap:8px}
.pills a{padding:7px 16px;border:1px solid var(--ink);border-radius:100px;font-weight:600;font-size:.8125rem;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pills a.is-filled{background:var(--ink);color:var(--creme)}
@media (hover:hover) and (pointer:fine){.pills a:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--creme)}}

.titel{position:relative;z-index:2;font-family:var(--display);font-weight:900;line-height:.85;display:flex;flex-direction:column;gap:6px}
.vorname{display:block;font-stretch:50%;font-weight:800;font-size:clamp(3.25rem,9vw + .5rem,8.5rem)}
/* GODINA füllt die Breite: Textbreite ≈ 8,9 (gesplittete Buchstaben verlieren Unterschneidung) × Schriftgröße bei 200 % Breite */
.nachname .o{display:inline-block}
.nachname{position:relative;display:block;width:max-content;font-stretch:200%;font-size:calc((100vw - 2 * var(--pad)) * .108);letter-spacing:-.02em;transform-origin:27% 50%}

/* Foto über die ganze Bühne (Kamera am Bergsee), oben und unten abgedunkelt, damit die helle Schrift lesbar bleibt */
.stage{color:var(--creme)}
.stage-bild{position:absolute;inset:0;z-index:0;will-change:opacity}
.stage-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.stage-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.5),rgba(18,18,18,.18) 38%,rgba(18,18,18,.3) 62%,rgba(18,18,18,.68))}
.stage .topbar-ort{color:rgba(250,246,234,.8)}
.stage .pills a{border-color:var(--creme)}
.stage .pills a.is-filled{background:var(--creme);color:var(--ink)}
.stage .scroll-btn{border-color:var(--creme)}
.stage .claim span{color:#E7B9A5}
@media (hover:hover) and (pointer:fine){.stage .pills a:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--creme)}}

.bottombar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;position:relative;z-index:3}
.claim{font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.1}
.claim span{display:block;font-family:var(--display);font-stretch:200%;font-weight:900;font-size:clamp(2rem,4.5vw,3.375rem);line-height:1;color:var(--terracotta)}
.scroll-btn{flex:none;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background-color .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){.scroll-btn:hover{background:var(--terracotta);color:var(--creme);border-color:var(--terracotta)}}

/* Leitsatz: Wörterbucheintrag, mittig auf eigener Fläche */
.leitsatz{position:relative;min-height:100svh;padding:clamp(140px,24vh,280px) var(--pad) clamp(180px,30vh,340px);display:grid;place-items:center;overflow:hidden}
.eintrag{position:relative;z-index:1;width:min(100%,780px);font-family:var(--serif)}
.wort{white-space:nowrap;font-weight:800;font-size:clamp(2.75rem,14vw,7.5rem);line-height:1;letter-spacing:-.015em}
.lautschrift{margin-top:14px;font-size:1.0625rem;color:var(--muted)}
.lautschrift i{font-style:italic;margin-left:.3em}
.strich{width:min(260px,60%);margin:30px 0 28px;border:0;border-top:2px solid var(--ink);transform-origin:left center}
.bedeutung{max-width:44ch;font-weight:600;font-size:1.0625rem;line-height:1.65;color:var(--muted)}
.latein span{position:absolute;left:var(--x);top:var(--y);font-family:var(--serif);font-style:italic;font-size:calc(var(--s) * clamp(.95rem,1.4vw,1.3rem));color:var(--ink);opacity:.22;white-space:nowrap;pointer-events:none}
@media (max-width:1100px){.latein span:nth-child(4){display:none}}
@media (max-width:620px){.latein span:is(:nth-child(3),:nth-child(5),:nth-child(8)){display:none}}

/* Bereiche */
.bereiche{padding:clamp(60px,8vw,120px) var(--pad) clamp(80px,12vw,140px);max-width:calc(1120px + 2 * var(--pad));margin:0 auto}
.bereiche-titel{font-weight:400;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;margin-bottom:48px}
.bereiche-titel span{display:block}
.bereiche-titel .gross{font-family:var(--display);font-stretch:50%;font-weight:800;font-size:min(2.6em,16.5vw);line-height:.9;color:var(--terracotta);text-transform:uppercase}

.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.k-web,.k-vid{grid-column:span 2}
.kachel{--fg:var(--ink);--sub:var(--muted);position:relative;isolation:isolate;overflow:hidden;min-height:380px;padding:28px 28px 32px;border-radius:24px;border:1px solid var(--ink);background:var(--creme);color:var(--fg);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;transition:background-color .3s ease,border-color .3s ease}
.k-unten{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.k-titel{font-family:var(--display);font-stretch:170%;font-weight:800;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1}
.k-text{color:var(--sub);max-width:46ch}
.k-pfeil{position:absolute;top:24px;right:24px;z-index:2;width:52px;height:52px;border:1px solid var(--fg);border-radius:50%;transform:rotate(-45deg);transition:transform .3s var(--ease-out),background-color .2s ease,border-color .2s ease}
.k-pfeil::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:var(--fg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m0 0-6-6m6 6-6 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m0 0-6-6m6 6-6 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.k-zahl{position:absolute;left:20px;top:-40px;z-index:1;font-family:var(--display);font-stretch:50%;font-weight:900;font-size:220px;line-height:1;pointer-events:none;transition:transform .4s var(--ease-out)}

.k-ich{--fg:#121212;--sub:#5E5850;background:#FFFFFF;border-color:#D7D8DA}
.k-ich .k-zahl{color:transparent;-webkit-text-stroke:1.5px #121212}
.k-ich .k-text{max-width:58%}
.k-portrait{position:absolute;right:-34px;bottom:0;z-index:1;height:74%;width:auto;max-width:none;transform:translateY(104%) rotate(5deg);transform-origin:bottom center;transition:transform .8s var(--ease-out)}
.k-web{--fg:#F2E8D9;--sub:rgba(244,234,216,.75);background:#241812;border-color:#241812}
.k-oben{position:absolute;top:28px;left:28px;right:96px;z-index:2;display:flex;justify-content:center}
.k-browser{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(244,234,216,.3);border-radius:100px;font-size:.8125rem;font-weight:500;transition:opacity .3s ease}
.k-browser i{width:8px;height:8px;border-radius:50%;background:rgba(244,234,216,.5)}
.k-browser i:first-child{background:#E0855A}
.k-browser i:last-child{margin-right:6px}
/* Drei eigene Websites liegen gestapelt und fächern beim Hover auf */
.k-faecher{position:absolute;left:50%;top:38%;z-index:1;width:min(38%,290px);aspect-ratio:16/10;transform:translate(-50%,-50%)}
.k-faecher img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:6px;border:1px solid rgba(244,234,216,.25);box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(40px) scale(.9);transition:transform .7s var(--ease-out),opacity .4s ease}
.k-vid{--fg:#F5F8FC;--sub:rgba(191,224,245,.85);background:#0A1426;border-color:#0A1426}
.k-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;z-index:0}
.k-vid::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,20,38,.75),transparent 60%);opacity:0;transition:opacity .3s ease}
.k-play{position:absolute;right:36px;top:96px;z-index:2;width:128px;height:128px;border-radius:50%;background:#4FB3C8;transition:transform .35s var(--ease-out),background-color .2s ease}
.k-play::before{content:"";position:absolute;inset:0;margin:auto;width:40px;height:40px;transform:translateX(4px);background:#0A1426;clip-path:polygon(15% 5%,95% 50%,15% 95%)}
.k-spo{--fg:#EEE7D2;--sub:rgba(238,231,210,.85);background:#4A4A24;border-color:#4A4A24}
.k-spo .k-zahl{color:#D8C0A5;z-index:1}
.k-web .k-zahl{color:transparent;-webkit-text-stroke:1.5px rgba(242,232,217,.55)}
.k-web .k-oben{justify-content:flex-end}
.k-vid .k-zahl{color:transparent;-webkit-text-stroke:1.5px rgba(234,241,251,.6);z-index:2}
/* GR20-Foto zoomt herein, die Route zeichnet sich */
.k-foto{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.18);transition:opacity .5s ease,transform 1.2s var(--ease-out)}
.k-spo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(34,53,42,.85),rgba(79,104,88,.25));opacity:0;transition:opacity .5s ease}
.k-route{position:absolute;left:28px;top:70px;z-index:1;width:calc(100% - 56px);height:auto;fill:none;stroke:#EEE7D2;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) .15s}
.k-route circle{fill:#EEE7D2;stroke:none;opacity:0;transition:opacity .3s ease .2s}
.k-km{position:absolute;right:28px;top:84px;z-index:2;font-family:var(--display);font-stretch:150%;font-weight:800;font-size:1.5rem;color:#EEE7D2;opacity:0;transform:translateY(10px);transition:opacity .4s ease .9s,transform .4s var(--ease-out) .9s}

@media (hover:hover) and (pointer:fine){
  .kachel:hover .k-pfeil{transform:rotate(0deg)}
  .k-ich:hover .k-portrait{transform:none}
  .k-ich:hover .k-zahl{transform:translateY(16px) rotate(-4deg)}
  .k-web:hover .k-browser{opacity:0}
  .k-web:hover .k-zahl,.k-vid:hover .k-zahl{transform:translateY(16px) rotate(-4deg)}
  .k-web:hover .k-faecher img{opacity:1}
  .k-web:hover .k-faecher img:nth-child(1){transform:translate(-62%,6%) rotate(-9deg)}
  .k-web:hover .k-faecher img:nth-child(2){transform:translate(62%,6%) rotate(9deg)}
  .k-web:hover .k-faecher img:nth-child(3){transform:translateY(-4%) scale(1.04)}
  .k-web:hover .k-pfeil{background:#E0855A;border-color:#E0855A}
  .k-web:hover .k-pfeil::before{background:#241812}
  .k-vid:hover .k-video,.k-vid:hover::after{opacity:1}
  .k-vid:hover .k-play{transform:scale(.6) rotate(-12deg);background:#F5F8FC}
  .k-vid:hover .k-pfeil{background:#4FB3C8;border-color:#4FB3C8}
  .k-vid:hover .k-pfeil::before{background:#0A1426}
  .k-spo:hover .k-foto{opacity:1;transform:none}
  .k-spo:hover::after{opacity:1}
  .k-spo:hover .k-route{stroke-dashoffset:0}
  .k-spo:hover .k-route circle,.k-spo:hover .k-km{opacity:1;transform:none}
  .k-spo:hover .k-zahl{transform:translateY(16px) rotate(-6deg);opacity:0}
  .k-spo:hover .k-pfeil{background:#D8C0A5;border-color:#D8C0A5}
  .k-spo:hover .k-pfeil::before{background:#22352A}
}
@media (prefers-reduced-motion:reduce){
  .k-portrait,.k-faecher img,.k-foto,.k-route,.k-km{transition:none}
}

@media (max-width:900px){
  .kacheln{grid-template-columns:1fr 1fr}
  .k-web,.k-vid{grid-column:auto}
  .topbar-ort{display:none}
}
@media (max-width:620px){
  .kacheln{grid-template-columns:1fr}
  .kachel{min-height:400px}
  /* Menü bleibt auf dem Handy sichtbar, Name und Ort stehen ohnehin groß darunter */
  .topbar-name,.topbar-ort{display:none}
  .pills{flex-wrap:wrap;gap:6px}
  .pills a{padding:7px 12px}
  .scroll-btn{display:none}
  .k-play{width:96px;height:96px;top:88px}
}