/* Über mich: weiß, nur Mona Sans, dünne Linien, viel Luft */
.ueber{--weiss:#FFFFFF;--kiesel:#8F877C;--silber:#9A9DA1;--kiesel-text:#6B655D;--kiesel-dunkel:#5E5850;--platz:#D7D8DA;--platz-text:#4A4B4D;--wd:80;--akzent-nav:var(--ink);--mg-hover:var(--weiss);background:var(--weiss);color:var(--ink);--line:var(--silber)}
.ueber i{font-style:italic}
.stern{font-weight:300;color:var(--kiesel)}
.motto .stern{font-size:1.6em;line-height:1;transform:translateY(.15em)}

/* runder Pfeil-Button */
.rund-pfeil{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--silber);border-radius:50%;transition:background-color .2s ease,border-color .2s ease}
.rund-pfeil::before{content:"";width:14px;height:14px;background:currentColor;transform:rotate(-45deg);-webkit-mask:var(--pfeil) center/contain no-repeat;mask:var(--pfeil) center/contain no-repeat}
.rund-pfeil.links::before{transform:rotate(180deg)}
:root{--pfeil: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")}

.kopf{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kopf{gap:12px}
.sprache{display:flex;flex:none;border:1px solid var(--silber);border-radius:100px;padding:3px;background:var(--weiss)}
.sprache button{border:0;background:none;min-width:44px;min-height:38px;padding:6px 12px;border-radius:100px;font-size:.8125rem;font-weight:600;color:var(--ink);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.sprache button[aria-pressed="true"]{background:var(--ink);color:var(--weiss)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover .rund-pfeil{background:var(--ink);border-color:var(--ink);color:var(--weiss)}
}

/* 1. Einstieg */
.einstieg{padding:clamp(96px,14vh,140px) var(--pad) 0;overflow:hidden}
.motto{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:500;margin-bottom:12px}
.name{font-weight:500;font-size:min(11rem,calc((100vw - 2 * var(--pad)) / 8.4));line-height:.9;letter-spacing:-.035em;font-variation-settings:"wdth" var(--wd);white-space:nowrap}
.buehne{position:relative;height:clamp(420px,62vh,640px);margin-top:clamp(16px,3vh,40px)}
.band{position:absolute;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));top:28%;overflow:hidden;z-index:0}
.band-spur{display:flex;width:max-content;gap:.4em;font-size:clamp(4rem,10vw,9rem);font-weight:300;line-height:1.05;letter-spacing:-.03em;color:var(--silber);white-space:nowrap}
.band-spur i{font-weight:300}
.portrait{position:absolute;z-index:1;left:50%;bottom:0;transform:translateX(-50%);width:clamp(240px,34vw,460px);aspect-ratio:4/5}
.portrait-bild{display:block;height:100%;width:auto;max-width:none;margin:0 auto;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}
.ecke{position:absolute;bottom:28px;z-index:2;max-width:18ch;font-size:.9375rem;line-height:1.35}
.ecke-links{left:0}
.ecke-rechts{right:0;text-align:right}

/* 2. Warum */
.warum{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,7vw,120px);align-items:center;padding:clamp(100px,16vw,200px) var(--pad);max-width:1280px;margin:0 auto}
.warum-foto{aspect-ratio:4/5;overflow:hidden;clip-path:inset(0 0 0 0)}
.warum-foto img{width:100%;height:118%;object-fit:cover;filter:grayscale(1)}
.warum-text{max-width:40ch}
.warum-titel{font-weight:500;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:28px;font-variation-settings:"wdth" 110}
.warum-absatz{font-size:1.0625rem;line-height:1.7}

/* 3. Zeitleiste */
.weg{padding:0 0 clamp(80px,12vw,160px);border-top:1px solid var(--silber)}
.weg-titel{padding:0 var(--pad);font-weight:500;font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.02em;font-variation-settings:"wdth" 110}
.weg-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(56px,10vh,120px);overflow:hidden}
.weg-spur{position:relative;padding:0 var(--pad);width:max-content}
.weg-linie{position:absolute;left:var(--pad);right:var(--pad);top:7px;height:1px;background:color-mix(in srgb,var(--silber) 45%,transparent)}
.weg-linie-fuell{position:absolute;inset:0;background:var(--ink);transform-origin:left center;transform:scaleX(0)}
.stationen{list-style:none;margin:0;padding:0;display:flex;gap:clamp(48px,6vw,96px)}
.station{width:clamp(200px,20vw,260px);color:var(--kiesel-text);transition:color .3s ease}
.station .punkt{color:var(--silber)}
.station.ist-aktiv .punkt{color:var(--ink)}
.station.ist-aktiv{color:var(--ink)}
.punkt{display:block;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;background:var(--weiss);margin-bottom:28px;position:relative;transition:background-color .3s ease}
.station.ist-aktiv .punkt{background:var(--ink)}
.station h3{font-weight:600;font-size:1.25rem;line-height:1.2;margin-bottom:8px}
.station p{font-size:1rem;line-height:1.5}

/* 4. Kontakt */
.kontakt{padding:0 var(--pad) clamp(80px,12vw,140px);max-width:1280px;margin:0 auto}
.boxen{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--silber)}
.box{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:220px}
.box+.box{border-left:1px solid var(--silber)}
.box-gross{font-weight:500;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;letter-spacing:-.03em;font-variation-settings:"wdth" 115;font-variant-numeric:tabular-nums}
.box-klein{font-size:.9375rem;color:var(--kiesel-dunkel)}
.box-link{font-size:1.0625rem;font-weight:500;text-decoration:none;width:max-content;padding:6px 0}
.box-link:hover{text-decoration:underline;text-underline-offset:4px}
.knopf{margin-top:12px;display:inline-flex;align-items:center;gap:12px;width:max-content;padding:8px 8px 8px 20px;border:1px solid var(--ink);border-radius:100px;font-weight:600;font-size:.9375rem;text-decoration:none}

@media (max-width:900px){
  .warum{grid-template-columns:1fr}
  .warum-text{max-width:none}
  .weg-pin{height:auto;display:block;padding-top:clamp(40px,8vw,100px)}
  .weg-spur{width:auto;padding:48px var(--pad) 0}
  .weg-linie{left:calc(var(--pad) + 7px);right:auto;top:48px;bottom:0;width:1px;height:auto}
  .weg-linie-fuell{transform-origin:center top;transform:scaleY(0)}
  .stationen{flex-direction:column;gap:40px}
  .station{width:auto;display:grid;grid-template-columns:15px 1fr;column-gap:20px}
  .station .punkt{grid-row:span 2;margin:4px 0 0}
  .boxen{grid-template-columns:1fr}
  .box+.box{border-left:0;border-top:1px solid var(--silber)}
}
@media (max-width:620px){
  /* Kopf in zwei Zeilen: MG + Sprache oben, Menü darunter */
  .kopf{flex-wrap:wrap;row-gap:6px;padding-top:10px;padding-bottom:10px}
  .kopf-links{display:contents}
  .kopf .mg{order:1;width:40px;height:40px}
  .sprache{order:2;margin-left:auto}
  .kopf .haupt-nav{order:3;width:100%}
  .einstieg{padding-top:150px}
  .ecke{bottom:auto;top:0}
  .buehne{height:440px}
}
@media (prefers-reduced-motion:reduce){
  .weg-linie-fuell{transform:none}
  .station{color:var(--ink)}
}