/* W.L.P. GROUP · Motion
   Grundidee: Münze, Kompass, Netzwerk. Alles wirkt wie graviert und von Licht gestreift,
   nichts springt oder leuchtet grell. Bewegung ist langsam, präzise und hat ein Ende. */

:root { --ease:cubic-bezier(.2,.7,.1,1); --ease-in:cubic-bezier(.7,0,.3,1); }

/* ---------- Filmkorn ---------- */
.korn { position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korn 1.2s steps(6) infinite; }
@keyframes korn { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- Fortschrittslinie ---------- */
.fortschritt { position:fixed; top:0; left:0; height:1px; width:100%; z-index:95; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,#8a7a55,#f6efdc,#a8976f); }

@keyframes zeichnen { to { stroke-dashoffset:0; } }
@keyframes auf { to { opacity:1; } }
@keyframes muenze { to { opacity:1; transform:scale(1); } }
@keyframes streif { to { left:130%; } }
@keyframes buchstabe { to { opacity:1; transform:none; } }


/* ---------- Kopfzeile ---------- */
.kopf { transition:transform .5s var(--ease), background .4s; }
.kopf.versteckt { transform:translateY(-100%); }
.kopf .marke img { transition:transform .8s var(--ease); }
.kopf .marke:hover img { transform:rotate(-8deg) scale(1.06); }
.menue > li > a { position:relative; }
.menue > li > a::after { content:''; position:absolute; left:12px; right:12px; bottom:4px; height:1px; background:var(--champ); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.menue > li > a:hover::after, .menue > li.aktiv > a::after { transform:scaleX(1); transform-origin:left; }
@media (min-width:1061px) {
  .menue ul { display:block !important; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .35s, transform .45s var(--ease), visibility 0s .45s; }
  .menue > li:hover ul, .menue > li:focus-within ul { opacity:1; visibility:visible; transform:none; transition:opacity .35s, transform .45s var(--ease), visibility 0s; }
  .menue ul li { opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .4s var(--ease); }
  .menue > li:hover ul li, .menue > li:focus-within ul li { opacity:1; transform:none; }
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; isolation:isolate; }
.netz { position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.9; }
.hero .buehne { position:relative; width:min(470px,80vw); aspect-ratio:1; margin:6px 0 10px; perspective:1200px; }
.hero .buehne .kompass { position:absolute; inset:-9%; animation:drehen 160s linear infinite; opacity:.75; }
.hero .buehne .kompass svg { width:100%; height:100%; overflow:visible; }
.hero .buehne .muenze { position:absolute; inset:7%; transform-style:preserve-3d; transition:transform .9s var(--ease); will-change:transform; }
.hero .buehne .muenze img { width:100%; margin:0; }
.hero .buehne .muenze .glanz { position:absolute; inset:2%; border-radius:50%; overflow:hidden; pointer-events:none; }
.hero .buehne .muenze .glanz::after { content:''; position:absolute; top:-20%; bottom:-20%; width:35%; left:-60%; transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,248,225,.4),transparent); mix-blend-mode:overlay; animation:streifen 9s var(--ease) 3s infinite; }
@keyframes streifen { 0%{left:-60%} 18%{left:130%} 100%{left:130%} }
@keyframes drehen { to { transform:rotate(360deg); } }
.hero .koordinaten, .hero .saeulenband { position:absolute; top:50%; font-family:'Cinzel',serif; font-size:10px; letter-spacing:.28em; color:var(--tief); writing-mode:vertical-rl; white-space:nowrap; opacity:0; }
.hero .koordinaten { left:28px; transform:translateY(-50%) rotate(180deg); }
.hero .saeulenband { right:28px; transform:translateY(-50%); }
.hero .koordinaten, .hero .saeulenband { animation:auf 2s ease 1.4s forwards; }
.hero .scrollhinweis { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:1px; height:46px; background:rgba(201,185,145,.2); overflow:hidden; }
.hero .scrollhinweis::after { content:''; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--champ); animation:fallen 2.2s var(--ease) infinite; }
@keyframes fallen { to { top:110%; } }

@keyframes hoch { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes muenzeHero { from { opacity:0; transform:scale(.92) rotateX(10deg); } to { opacity:1; transform:none; } }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { position:relative; overflow:hidden; isolation:isolate; }
.seitenkopf .kompass-klein { position:absolute; right:-120px; top:50%; width:460px; height:460px; transform:translateY(-50%); opacity:.35; z-index:-1; animation:drehen 200s linear infinite; }


/* ---------- Einblenden ---------- */
.mo { transform:translateY(10px); transition:transform .6s var(--ease); }
.mo.sicht { opacity:1; transform:none; }
.label.mo { transform:none; }
.label { position:relative; }
.label.strich::before { content:''; display:inline-block; width:0; height:1px; background:var(--champ); vertical-align:middle; margin-right:0; transition:width 1s var(--ease) .1s, margin .6s var(--ease); }
.label.strich.sicht::before { width:34px; margin-right:14px; }

/* Karten: Licht folgt der Maus, Glanz beim Überfahren */
.karte { position:relative; overflow:hidden; }
.karte::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(201,185,145,.12), transparent 45%); }
.karte:hover::before { opacity:1; }
a.karte .weiter { position:relative; }
a.karte .weiter::after { content:'→'; display:inline-block; margin-left:8px; transition:transform .5s var(--ease); }
a.karte:hover .weiter::after { transform:translateX(6px); }
.karte .nr { transition:letter-spacing .6s var(--ease); }
.karte:hover .nr { letter-spacing:.36em; }

/* Personen: Porträt mit drehendem Goldrand */
.portrait { position:relative; transition:transform .8s var(--ease); }
.karte.person:hover .portrait { transform:scale(1.04); }
.karte.person .portrait::after { content:''; position:absolute; inset:-8px; border-radius:50%; border:1px dashed rgba(201,185,145,.35); opacity:0; transition:opacity .6s; animation:drehen 30s linear infinite; }
.karte.person:hover .portrait::after { opacity:1; }

/* Knöpfe: Füllung wischt von links */
.knopf, .knopf-klein { position:relative; overflow:hidden; z-index:0; transition:color .5s var(--ease), border-color .5s; }
.knopf::before, .knopf-klein::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--champ); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease); }
.knopf:hover::before, .knopf-klein:hover::before { transform:scaleX(1); transform-origin:left; }
.knopf:hover, .knopf-klein:hover { background:transparent; color:var(--bg); }
.knopf.voll { background:var(--champ); }
.knopf.voll::before { background:var(--hell); }

/* Säulen: Linie zeichnet sich, Zahl wächst */
.saeule { position:relative; border-top-color:transparent; }
.saeule::after { content:''; position:absolute; top:-2px; left:0; right:0; height:2px; background:linear-gradient(90deg,#8a7a55,#f6efdc,#a8976f); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease); }
.saeule.sicht::after { transform:scaleX(1); }
.saeule .nr { font-size:13px; }
.saeule .gross { position:absolute; right:16px; top:4px; font-family:'Cormorant Garamond',serif; font-size:120px; line-height:1; color:rgba(201,185,145,.06); pointer-events:none; transition:transform 1.6s var(--ease); transform:translateY(30px); }
.saeule.sicht .gross { transform:none; }

/* Lücke Ist, Barriere, Soll: die Brücke entsteht beim Scrollen */
.luecke { position:relative; }
.luecke > div { opacity:0; transform:translateY(20px); transition:opacity .8s, transform 1s var(--ease); }
.luecke.sicht > div { opacity:1; transform:none; }
.luecke.sicht > div:nth-child(2) { transition-delay:.25s; } .luecke.sicht > div:nth-child(3) { transition-delay:.5s; }
.luecke .bruecke { position:absolute; left:8%; right:8%; bottom:-22px; height:22px; pointer-events:none; }
.luecke .bruecke svg { width:100%; height:100%; overflow:visible; }
.luecke .bruecke path { fill:none; stroke:#c9b991; stroke-width:1.2; }
.luecke .bruecke circle { fill:#f6efdc; }

/* Ratgeber Icons */
.download .icon { transition:transform .6s var(--ease), background .4s; }
.download:hover .icon { transform:translateY(-4px) rotate(-3deg); background:rgba(201,185,145,.1); }

/* Trennlinien zwischen Abschnitten zeichnen sich */
section.ab { position:relative; }
section.ab::before { content:''; position:absolute; top:0; left:50%; width:min(1080px,90%); height:1px; transform:translateX(-50%) scaleX(0); background:linear-gradient(90deg,transparent,rgba(201,185,145,.35),transparent); transition:transform 1.6s var(--ease); }
section.ab.sicht::before { transform:translateX(-50%) scaleX(1); }

/* Zitat: Anführung wächst */
.zitat { border-left-color:transparent; position:relative; }
.zitat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--dunkel); transform:scaleY(0); transform-origin:top; transition:transform 1.2s var(--ease); }
.zitat.sicht::before { transform:scaleY(1); }

@media (max-width:700px) { .hero .koordinaten, .hero .saeulenband { display:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .mo, .zerlegt .w > span, .luecke > div, .hero .brand, .hero .buehne, .hero .lead, .hero .knoepfe { opacity:1 !important; transform:none !important; }
  #intro, .wechsel, .korn { display:none !important; }
}

/* ================= Neue Startseite ================= */
.hero .lead { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(24px,3vw,32px); color:var(--champ); margin:6px auto 26px; }

/* Wer: Wechselwort */
.wer { padding:120px 24px 110px; }
.wer-satz { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(38px,6.4vw,84px); line-height:1.05; color:var(--hell); margin:0; }
.wechselwort { display:inline-block; position:relative; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; }
.wechselwort > span { display:inline-block; font-style:italic; background:linear-gradient(90deg,#a8976f,#f6efdc 45%,#c9b991 75%,#a8976f); -webkit-background-clip:text; background-clip:text; color:transparent; transition:transform .7s var(--ease), opacity .7s; }
.wechselwort > span.raus { transform:translateY(-105%); opacity:0; }
.wechselwort > span.rein { position:absolute; left:0; top:0; transform:translateY(105%); opacity:0; }
.wechselwort > span.rein.da { transform:none; opacity:1; }
.wer-zusatz { font-size:clamp(17px,1.6vw,21px); color:var(--ged); max-width:620px; margin-top:22px; }

/* Fragenliste: die Zeile in der Bildschirmmitte leuchtet auf */
.fragen-ab { padding-bottom:120px; }
.fokusliste { list-style:none; margin-top:30px; border-top:1px solid var(--linie); }
.fokusliste li { display:grid; grid-template-columns:60px 220px 1fr; gap:4px 24px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--linie); cursor:default; opacity:.28; transition:opacity .6s var(--ease); }
.fokusliste li.fokus, .fokusliste li:hover { opacity:1; }
.fl-nr { font-family:'Cinzel',serif; font-size:12px; letter-spacing:.2em; color:var(--tief); }
.fl-thema { font-family:'Cinzel',serif; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--champ); }
.fl-frage { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(24px,3vw,38px); line-height:1.15; color:var(--hell); transition:transform .6s var(--ease); }
.fl-nach { grid-column:3; font-size:15px; color:var(--ged); max-height:0; overflow:hidden; opacity:0; transition:max-height .7s var(--ease), opacity .5s, margin .6s var(--ease); }
.fl-nach a { color:var(--champ); border-bottom:1px solid rgba(201,185,145,.4); margin-left:6px; white-space:nowrap; }
.fl-nach a::after { content:' →'; }
.fokusliste li.fokus .fl-nach, .fokusliste li:hover .fl-nach { max-height:80px; opacity:1; margin-top:6px; }
.fokusliste li.fokus .fl-frage, .fokusliste li:hover .fl-frage { transform:translateX(8px); }

/* Drei Worte */
.drei-worte { padding:100px 24px; }
.drei-worte .inner { display:grid; gap:6px; }
.wort-gross { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--linie); flex-wrap:wrap; }
.wort-gross span { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(54px,10vw,140px); line-height:.95; color:transparent; -webkit-text-stroke:1px rgba(201,185,145,.55); transition:color .8s var(--ease), -webkit-text-stroke-color .8s; }
.wort-gross small { font-size:14px; letter-spacing:.06em; color:var(--ged); transition:color .6s, transform .6s var(--ease); }
.wort-gross:hover span, .wort-gross.sicht span { color:var(--hell); -webkit-text-stroke-color:transparent; }
.wort-gross:hover small { color:var(--champ); transform:translateX(-8px); }
.wort-gross:nth-child(2).sicht span { transition-delay:.15s; } .wort-gross:nth-child(3).sicht span { transition-delay:.3s; }

/* Der Tisch: Teamvorschau */
.tisch { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:34px; }
.platz-person { text-align:center; display:flex; flex-direction:column; align-items:center; }
.platz-person .portrait { width:140px; height:140px; margin-bottom:16px; }
.platz-person b { font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--hell); font-weight:600; }
.platz-person > span { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--champ); margin-top:4px; }
.platz-person:hover .portrait { transform:scale(1.05); }
.portrait.leer { background:none; border:1px dashed rgba(201,185,145,.4); box-shadow:none; display:flex; align-items:center; justify-content:center; }
.portrait.leer span { font-family:'Cormorant Garamond',serif; font-size:56px; color:var(--champ); transition:transform .8s var(--ease); }
.platz-person.frei:hover .portrait.leer span { transform:rotate(90deg); }
.platz-person.frei b { color:var(--ged); }

h2.schluss { font-size:clamp(36px,6vw,72px); margin-bottom:30px; }

@media (max-width:860px) {
  .fokusliste li { grid-template-columns:44px 1fr; }
  .fl-thema { grid-column:2; } .fl-frage, .fl-nach { grid-column:1 / -1; }
  .tisch { grid-template-columns:1fr 1fr; }
}
.wechselwort > span { white-space:nowrap; }
@media (max-width:600px) { .wer-satz { font-size:clamp(28px,8.4vw,40px); } }

/* ================= Netzwerk, Weg, Personen ================= */
.menue > li.person > a { text-transform:none; letter-spacing:.04em; font-size:13.5px; line-height:1.2; padding-top:6px; padding-bottom:6px; color:var(--text); }
.menue > li.person > a small { display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--tief); margin-top:3px; transition:color .4s; }
.menue > li.person > a:hover small, .menue > li.person.aktiv > a small { color:var(--champ); }
.menue > li.person > a::after { bottom:0; }

.gross-text { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.6vw,32px); line-height:1.35; color:var(--hell); max-width:880px; }
.erfahrung { margin-top:10px; }
.erfahrung .ged { font-size:18px; max-width:640px; margin-top:20px; }

.weg { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
.weg-seite { border:1px solid var(--linie); border-radius:6px; padding:26px 26px 22px; background:linear-gradient(180deg,rgba(201,185,145,.04),transparent); }
.weg-seite.mit { border-color:rgba(201,185,145,.45); }
.weg-seite svg { width:100%; height:auto; display:block; margin:14px 0 18px; overflow:visible; }
.weg-seite svg text { font-family:'Cinzel',serif; font-size:11px; letter-spacing:.2em; fill:var(--champ); }
.weg-seite .start { fill:var(--ged); }
.weg-seite .ziel { fill:none; stroke:var(--champ); stroke-width:1.2; }
.weg-seite .umweg { fill:none; stroke:#7d7566; stroke-width:1.4; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 3s cubic-bezier(.45,.1,.4,1); }
.weg-seite .bruch path { stroke:#c0705a; stroke-width:2; fill:none; opacity:0; transform:scale(.3); transform-box:fill-box; transform-origin:center; transition:opacity .3s 3s, transform .5s var(--ease) 3s; }
.weg-seite .direkt { fill:none; stroke:#e9dfc4; stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease) .4s; }
.weg-seite .knoten circle { fill:var(--tief); } .weg-seite .knoten path { stroke:rgba(201,185,145,.25); stroke-width:.8; fill:none; }
.weg.sicht .umweg, .weg.sicht .direkt { stroke-dashoffset:0; }
.weg.sicht .bruch path { opacity:1; transform:none; }
.weg.sicht .mit .ziel { animation:zielpuls 2.4s ease 1.8s infinite; }
@keyframes zielpuls { 0%,100% { stroke-width:1.2; } 50% { stroke-width:3; } }
.weg-seite p { color:var(--ged); font-size:15px; margin:0; }
.weg-seite.mit p { color:var(--text); }

.person-gross { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
.person-gross .portrait { width:240px; height:240px; margin:0; }
.person-gross .gross-text { margin:8px 0 22px; }
.hilfe { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--linie); margin-top:20px; }
.hilfe-punkt { padding:26px 24px 10px 0; border-right:1px solid var(--linie); }
.hilfe-punkt:last-child { border-right:none; }
.hilfe-punkt + .hilfe-punkt { padding-left:24px; }
.hilfe-punkt .nr { font-family:'Cinzel',serif; font-size:12px; letter-spacing:.2em; color:var(--tief); }
.hilfe-punkt h3 { margin:8px 0 8px; }
.hilfe-punkt p { color:var(--ged); font-size:15px; }

@media (max-width:860px) {
  .weg, .hilfe { grid-template-columns:1fr; }
  .hilfe-punkt { border-right:none; border-bottom:1px solid var(--linie); padding:22px 0 !important; }
  .person-gross { grid-template-columns:1fr; gap:24px; } .person-gross .portrait { width:170px; height:170px; }
  .menue > li.person > a { font-size:15px; }
}
.menue > li > a { white-space:nowrap; }
@media (min-width:1201px) { .menue { gap:2px; } .menue > li.person > a { padding-left:14px; padding-right:14px; } .menue > li.person + li.person > a { border-left:1px solid var(--linie); } }

/* Kernbotschaft mit Schlüssel */
.kern-satz { text-align:center; padding:30px 0 10px; }
.kern-satz .schluessel { width:130px; height:44px; margin:0 auto 26px; display:block; fill:none; stroke:#c9b991; stroke-width:1.4; stroke-linecap:round; overflow:visible; stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 2s var(--ease); }
.kern-satz.sicht .schluessel { stroke-dashoffset:0; }
.kern-satz .k1 { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(32px,5vw,62px); line-height:1.1; color:var(--hell); margin:0; }
.kern-satz .k2 { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:clamp(32px,5vw,62px); line-height:1.15; margin:6px 0 0; }

/* Walze: Zielgruppen drehen sich, Nachbarn nur angedeutet */
.walze-satz { display:flex; align-items:center; gap:.28em; }
.walze { height:3.3em; overflow:hidden; -webkit-mask-image:linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image:linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.walze-liste { transition:transform 1s var(--ease); }
.walze-liste div { height:1.1em; line-height:1.1em; white-space:nowrap; font-style:italic; transition:opacity 1s ease;
  background:linear-gradient(90deg,#a8976f,#f6efdc 45%,#c9b991 75%,#a8976f); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:600px) { .walze-satz { font-size:clamp(28px,8.4vw,40px); } }

/* Zielgruppe und Kernbotschaft als ein Abschnitt */
.wer-kern { padding:130px 24px 140px; }
.wer-kern .wer-satz { font-size:clamp(44px,7.4vw,100px); }
.wer-kern .wer-zusatz { font-size:clamp(18px,1.8vw,23px); }
.wer-kern .kern-satz { text-align:left; padding:0; margin-top:110px; }
.wer-kern .kern-satz .schluessel { margin:0 0 30px; width:170px; height:58px; }
.wer-kern .kern-satz .k1, .wer-kern .kern-satz .k2 { font-size:clamp(40px,6.4vw,88px); line-height:1.05; }
.wer-kern .kern-satz .k2 { margin-top:8px; }

/* Tisch mit drei Partnern */
.tisch { grid-template-columns:repeat(3,1fr); max-width:860px; }
@media (max-width:860px) { .tisch { grid-template-columns:1fr 1fr 1fr; } .platz-person .portrait { width:96px; height:96px; } }
@media (max-width:500px) { .tisch { grid-template-columns:1fr; } .platz-person .portrait { width:130px; height:130px; } }

/* Analyse, Optimierung, Lösung: Spalten mit römischen Ziffern, darüber eine Zeitlinie */
.s3-reihe { position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px; padding-top:34px; }
.s3-linie { position:absolute; top:5px; left:0; right:0; height:1px; background:rgba(201,185,145,.14); }
.s3-linie i { position:absolute; inset:0; background:linear-gradient(90deg,#8a7a55,#f6efdc 60%,#a8976f); transform:scaleX(0); transform-origin:left; transition:transform 2.6s cubic-bezier(.45,.05,.3,1); }
.s3-reihe.sicht .s3-linie i { transform:scaleX(1); }
.s3 { position:relative; display:block; padding:26px 34px 14px; border-left:1px solid var(--linie); overflow:visible; opacity:.12; transform:translateY(16px); transition:opacity 1s ease, transform 1.1s var(--ease); }
.s3:first-of-type { border-left:none; padding-left:0; }
.s3-punkt { position:absolute; top:-34px; left:0; width:11px; height:11px; margin-top:0; border-radius:50%; border:1px solid var(--champ); background:var(--bg); transition:background .6s, box-shadow .6s; }
.s3:not(:first-of-type) .s3-punkt { left:-6px; }
.s3-reihe .s3 .s3-punkt { top:-34px; }
.s3-roem { position:absolute; right:18px; top:4px; font-family:'Cormorant Garamond',serif; font-size:150px; line-height:.8; color:rgba(201,185,145,.06); transform:translateY(40px); transition:transform 1.6s var(--ease), color 1.6s; pointer-events:none; }
.s3-strich { display:block; width:0; height:2px; background:linear-gradient(90deg,#8a7a55,#f6efdc); margin-bottom:22px; transition:width 1.2s var(--ease); }
.s3-wort { display:block; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(30px,3.4vw,44px); line-height:1.1; color:var(--hell); }
.s3-erg { display:block; color:var(--champ); font-size:15px; margin-top:8px; }
.s3-satz { display:block; color:var(--ged); font-size:14px; margin-top:6px; }
/* Ablauf: Linie läuft, an jeder Spalte leuchtet der Punkt und der Schritt erscheint */
.s3-reihe.sicht .s3 { opacity:1; transform:none; }
.s3-reihe.sicht .s3-punkt { background:var(--champ); box-shadow:0 0 0 4px rgba(201,185,145,.12); }
.s3-reihe.sicht .s3-roem { transform:none; color:rgba(201,185,145,.12); }
.s3-reihe.sicht .s3-strich { width:48px; }
.s3-reihe.sicht .s3:nth-of-type(1), .s3-reihe.sicht .s3:nth-of-type(1) * { transition-delay:.1s; }
.s3-reihe.sicht .s3:nth-of-type(2), .s3-reihe.sicht .s3:nth-of-type(2) * { transition-delay:.95s; }
.s3-reihe.sicht .s3:nth-of-type(3), .s3-reihe.sicht .s3:nth-of-type(3) * { transition-delay:1.8s; }
.s3:hover .s3-roem { color:rgba(201,185,145,.2); }
.s3:hover .s3-strich { width:80px; transition-delay:0s !important; }
@media (max-width:800px) {
  .s3-reihe { grid-template-columns:1fr; padding-top:0; padding-left:26px; }
  .s3-linie { top:0; bottom:0; left:5px; right:auto; width:1px; height:auto; }
  .s3-linie i { transform:scaleY(0); transform-origin:top; }
  .s3-reihe.sicht .s3-linie i { transform:scaleY(1); }
  .s3 { border-left:none; padding:22px 0; border-top:1px solid var(--linie); }
  .s3:first-of-type { border-top:none; }
  .s3-reihe .s3 .s3-punkt { top:30px; left:-27px; }
}

/* Schlüssel: fliegt in einem 360° Kreis heran und dreht sich danach ab und zu wie im Schloss */
.kern-satz .schluessel-bahn { display:block; width:170px; height:58px; margin:0 0 30px; transform-origin:85px 190px; opacity:0; }
.kern-satz:not(.wer-kern .kern-satz) .schluessel-bahn { margin:0 auto 26px; width:130px; height:44px; transform-origin:65px 150px; }
.kern-satz .schluessel-dreh { display:block; width:100%; height:100%; transform-origin:50% 50%; }
.kern-satz .schluessel-bahn .schluessel { width:100%; height:100%; margin:0; stroke-dasharray:none; stroke-dashoffset:0; transition:none; }
.kern-satz.sicht .schluessel-bahn { animation:schluesselKreis 2.4s cubic-bezier(.45,.05,.2,1) .15s forwards; }
.kern-satz.sicht .schluessel-dreh { animation:schluesselSelbst 2.4s cubic-bezier(.45,.05,.2,1) .15s both, schluesselSchloss 7s cubic-bezier(.6,0,.3,1) 2.8s infinite; }
@keyframes schluesselKreis {
  0% { opacity:0; transform:rotate(-360deg) scale(.5); }
  15% { opacity:1; }
  100% { opacity:1; transform:rotate(0deg) scale(1); }
}
@keyframes schluesselSelbst { 0% { transform:rotate(-360deg); } 100% { transform:rotate(0deg); } }
@keyframes schluesselSchloss {
  0%, 86% { transform:perspective(400px) rotateX(0deg); filter:none; }
  94% { filter:drop-shadow(0 0 8px rgba(246,239,220,.6)); }
  100% { transform:perspective(400px) rotateX(360deg); filter:none; }
}
@media (prefers-reduced-motion: reduce) { .kern-satz .schluessel-bahn { opacity:1 !important; } }

/* ================= Unser Ansatz ================= */
.ansatz-kopf { padding-top:80px; padding-bottom:70px; }
.ansatz-kopf h1 { font-size:clamp(30px,4vw,48px); max-width:820px; margin-top:34px; }
.ist-soll { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; margin:26px 0 0; }
.is-wort { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(56px,10vw,140px); line-height:1; color:var(--hell); }
.is-wort.soll { font-style:italic; background:linear-gradient(90deg,#a8976f,#f6efdc 45%,#c9b991 75%,#a8976f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ist-soll svg { width:100%; height:clamp(60px,9vw,120px); overflow:visible; }
.is-linie { stroke:rgba(201,185,145,.35); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:isZeichnen 1.4s var(--ease) .3s forwards; }
.is-barriere { fill:rgba(201,185,145,.06); stroke:rgba(201,185,145,.45); stroke-width:1; vector-effect:non-scaling-stroke; opacity:0; animation:auf .6s ease 1.2s forwards; }
.is-bruecke { fill:none; stroke:#e9dfc4; stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:isZeichnen 1.6s var(--ease) 1.7s forwards; }
@keyframes isZeichnen { to { stroke-dashoffset:0; } }

.lexikon { border-left:2px solid var(--dunkel); padding:6px 0 6px 30px; }
.lx-wort { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(34px,4vw,52px); color:var(--hell); margin:0 0 10px; }
.lx-wort i { font-weight:500; color:var(--tief); font-size:.6em; }
.lx-text { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.4vw,30px); line-height:1.35; color:var(--text); margin:0 0 18px; }
.lx-zusatz { color:var(--champ); font-size:17px; margin:0; }

.paar { display:grid; grid-template-columns:1fr 1fr; }
.paar > div { padding:6px 40px 6px 0; }
.paar > div + div { padding:6px 0 6px 40px; border-left:1px solid var(--linie); }
.paar-wort { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(40px,5.4vw,72px); line-height:1; color:var(--hell); margin:0 0 14px; }
.paar > div + div .paar-wort { font-style:italic; background:linear-gradient(90deg,#a8976f,#f6efdc 45%,#c9b991 75%,#a8976f); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:700px) {
  .ist-soll { gap:10px; }
  .paar { grid-template-columns:1fr; } .paar > div + div { border-left:none; border-top:1px solid var(--linie); padding:26px 0 0; margin-top:20px; }
}

/* Unser Ansatz, Version 2: Schloss statt leerem Kasten */
.ansatz-kopf h1 { font-size:clamp(40px,6.2vw,84px); max-width:none; margin:10px 0 0; }
.ansatz-kopf .ist-soll { grid-template-columns:auto 1fr auto 1fr auto; gap:20px; margin:46px 0 40px; }
.is-strecke { position:relative; height:1px; background:rgba(201,185,145,.1); overflow:visible; }
.is-strecke::before, .is-strecke::after { content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; }
.is-strecke::before { background:rgba(201,185,145,.45); }
.is-strecke::after { background:linear-gradient(90deg,#a8976f,#f6efdc); height:2px; top:-.5px; }
.is-strecke.eins::before { animation:streckeAuf 1s var(--ease) .4s forwards; }
.is-strecke.eins::after { animation:streckeAuf .8s var(--ease) 2.3s forwards; }
.is-strecke.zwei::after { animation:streckeAuf 1.1s var(--ease) 2.8s forwards; }
@keyframes streckeAuf { to { transform:scaleX(1); } }

.ist-soll .is-schloss { width:clamp(40px,4.4vw,58px); height:auto; overflow:visible; opacity:0; animation:auf .6s ease 1.2s forwards; }
.is-schloss .korpus { fill:rgba(201,185,145,.06); stroke:rgba(201,185,145,.7); stroke-width:1.6; animation:schlossGold .8s ease 2s forwards; }
.is-schloss .bugel { fill:none; stroke:rgba(201,185,145,.7); stroke-width:1.6; stroke-linecap:round; transform-box:fill-box; transform-origin:100% 100%; animation:bugelAuf .7s cubic-bezier(.3,1.6,.5,1) 2s forwards; }
.is-schloss .loch { fill:none; stroke:rgba(201,185,145,.7); stroke-width:1.6; stroke-linecap:round; }
@keyframes schlossGold { to { fill:rgba(201,185,145,.18); stroke:#f6efdc; filter:drop-shadow(0 0 10px rgba(246,239,220,.45)); } }
@keyframes bugelAuf { to { transform:translateY(-9px) rotate(18deg); stroke:#f6efdc; } }
.ansatz-kopf .is-wort.soll { animation:sollGlanz 1.2s ease 3.6s both; }
@keyframes sollGlanz { 0% { filter:none; } 50% { filter:drop-shadow(0 0 18px rgba(246,239,220,.5)); } 100% { filter:none; } }

.ansatz-text { font-family:'Cormorant Garamond',serif; font-size:clamp(26px,3vw,40px); line-height:1.3; color:var(--text); max-width:980px; margin:0; }
.unterstrich { position:relative; color:var(--hell); font-weight:600; white-space:nowrap; }
.unterstrich::after { content:''; position:absolute; left:0; right:0; bottom:.04em; height:2px; background:linear-gradient(90deg,#8a7a55,#f6efdc,#a8976f); transform:scaleX(0); transform-origin:left; animation:streckeAuf 1s var(--ease) 1.2s forwards; }
@media (max-width:700px) { .ansatz-kopf .ist-soll { gap:8px; } }

/* Schlüssel fliegt im Hintergrund der Kernbotschaft */
.kern-satz { position:relative; isolation:isolate; }
.schluessel-flug { position:absolute; left:-4%; right:-4%; top:-150px; bottom:-130px; z-index:-1; pointer-events:none; }
.schluessel-flug svg { position:absolute; left:0; top:0; overflow:visible; }
.schluessel-flug .flugspur { width:100%; height:100%; }
.schluessel-flug .flugspur path { fill:none; stroke:rgba(201,185,145,.07); stroke-width:1; stroke-dasharray:2 7; }
.schluessel-flug .flieger { width:clamp(180px,24vw,340px); height:auto; fill:none; stroke:#e9dfc4; stroke-width:1.1; stroke-linecap:round; filter:drop-shadow(0 0 14px rgba(246,239,220,.25)); will-change:transform; opacity:0; }
.wer-kern .kern-satz { margin-top:140px; padding:40px 0; }
.kern-satz .schluessel-bahn { display:none; }

/* Schlüssel aus dem Netzwerk im Hintergrund der Kernbotschaft */
.schluessel-netz { position:absolute; left:-6%; right:-6%; top:-170px; bottom:-150px; z-index:-1; pointer-events:none; }
.schluessel-netz canvas { display:block; }
.schluessel-flug { display:none; }
/* Eigener Platz für den Netzwerkschlüssel über dem Satz */
.kern-satz { padding-top:340px !important; }
.wer-kern .kern-satz { margin-top:40px; }
.schluessel-netz { top:-40px; bottom:-120px; }
@media (max-width:700px) { .kern-satz { padding-top:220px !important; } }

/* Allein oder gemeinsam: ein Kompass in zwei Akten (läuft, sobald der Abschnitt sichtbar ist) */
.weg5 { border:1px solid rgba(201,185,145,.35); border-radius:6px; padding:28px 30px 26px; margin-top:26px; background:linear-gradient(180deg,rgba(201,185,145,.04),transparent); }
.weg5 svg { width:100%; height:auto; display:block; overflow:visible; margin:10px 0 6px; }
.weg5 svg text { font-family:'Cinzel',serif; font-size:12px; letter-spacing:.2em; fill:var(--champ); }
.weg5 .skala line { stroke:rgba(201,185,145,.45); stroke-width:.8; }
.w5-ring { fill:none; stroke:rgba(201,185,145,.7); stroke-width:1; }
.w5-nadel .rahmen { fill:none; stroke:#e9dfc4; stroke-width:1.4; }
.w5-nadel .spitze { fill:#e9dfc4; opacity:.85; }
.w5-irrweg { fill:none; stroke:#7d7566; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.w5-x path { fill:none; stroke:#c0705a; stroke-width:2.2; stroke-linecap:round; }
.w5-x { opacity:0; }
.w5-partner { fill:#e9dfc4; opacity:0; }
.w5-route { fill:none; stroke:#e9dfc4; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.w5-ziel { fill:none; stroke:var(--champ); stroke-width:1.3; }

.weg5 .w5-nadel { transform-origin:180px 120px; }
.weg5.sicht .w5-nadel { animation:w5nadel 12s ease-in-out infinite; }
.weg5.sicht .w5-irrweg { animation:w5irr 12s ease-in-out infinite; }
.weg5.sicht .w5-x { animation:w5x 12s ease infinite; }
.weg5.sicht .w5-partner { animation:w5partner 12s ease infinite; }
.weg5.sicht .w5-route { animation:w5route 12s cubic-bezier(.5,0,.3,1) infinite; }
.weg5.sicht .w5-ziel { animation:w5ziel 12s ease infinite; }
@keyframes w5nadel { 0% { transform:rotate(0); } 10% { transform:rotate(150deg); } 20% { transform:rotate(-70deg); } 30% { transform:rotate(230deg); } 40% { transform:rotate(90deg); } 52% { transform:rotate(200deg); } 62%, 94% { transform:rotate(441deg); } 100% { transform:rotate(360deg); } }
@keyframes w5irr { 0% { stroke-dashoffset:1; opacity:1; } 38% { stroke-dashoffset:0; opacity:1; } 46% { opacity:1; } 52%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes w5x { 0%, 36% { opacity:0; } 40%, 46% { opacity:1; } 50%, 100% { opacity:0; } }
@keyframes w5partner { 0%, 52% { opacity:0; } 58%, 94% { opacity:1; } 100% { opacity:0; } }
@keyframes w5route { 0%, 60% { stroke-dashoffset:1; } 76%, 94% { stroke-dashoffset:0; } 100% { stroke-dashoffset:1; } }
@keyframes w5ziel { 0%, 74% { stroke-width:1.3; } 80% { stroke-width:4.5; } 86%, 100% { stroke-width:1.3; } }
@media (max-width:700px) { .weg5 { padding:20px 16px; } .w5-texte { min-height:130px; } }
@media (prefers-reduced-motion: reduce) { .w5-titel .t2, .w5-texte .p2, .w5-partner { opacity:1 !important; } .w5-route { stroke-dashoffset:0; } .w5-irrweg, .w5-x, .w5-titel .t1, .w5-texte .p1 { display:none; } }
.w5-texte p.mo { transform:none; transition:none; }
@media (max-width:600px) { .wer-kern .wer-satz { font-size:clamp(28px,9vw,40px); } }

/* ================= Überarbeitung November: konkret und sofort sichtbar ================= */
.hero { min-height:0; padding:44px 20px 64px; }
.hero img, .hero .buehne .muenze img { height:auto; }
.hero .buehne { width:min(260px,62vw); margin:6px 0 10px; }
.hero .lead { font-family:'Cormorant Garamond',serif; font-style:normal; font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1.25; color:var(--champ); max-width:760px; margin:14px auto 8px; }
.hero-zusatz { color:var(--text); font-size:clamp(16px,1.5vw,18px); margin:0 auto 26px; max-width:640px; }
@media (max-width:600px) { .hero { padding:28px 20px 48px; } .hero .buehne { width:min(190px,52vw); } }

.probleme { display:grid; grid-template-columns:1fr 1fr; gap:40px 56px; margin-top:34px; }
.problem { border-top:1px solid var(--linie); padding-top:22px; }
.problem-frage { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(23px,2.4vw,30px); line-height:1.22; color:var(--hell); margin:0 0 10px; }
.problem .ged { margin:0; font-size:15px; }
@media (max-width:760px) { .probleme { grid-template-columns:1fr; gap:28px; } }

.wer-kern { overflow:hidden; }
.hilfe-punkt .weiter { display:inline-block; margin-top:8px; font-size:13px; color:var(--champ); }

.zwei-gruppen { display:grid; grid-template-columns:1fr 1fr; }
.zwei-gruppen > div { padding:4px 40px 4px 0; }
.zwei-gruppen > div + div { padding:4px 0 4px 40px; border-left:1px solid var(--linie); }
.zwei-gruppen .ged { margin:0; }
@media (max-width:760px) { .zwei-gruppen { grid-template-columns:1fr; } .zwei-gruppen > div { padding:0; } .zwei-gruppen > div + div { padding:24px 0 0; margin-top:24px; border-left:none; border-top:1px solid var(--linie); } }

.w5-texte { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:10px; }
.w5-texte h3 { font-family:'Cinzel',serif; font-size:12px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--champ); margin:0 0 8px; }
.w5-texte p { margin:0; font-size:15px; color:var(--ged); }
@media (max-width:600px) { .w5-texte { grid-template-columns:1fr; gap:20px; } }

/* Große Bildschirme: mehr Breite und größere Schrift, darunter bleibt alles wie gehabt */
@media (min-width:1500px) {
  body { font-size:18px; }
  .inner { max-width:1320px; }
  .schmal { max-width:920px; }
  .kopf .inner, .fuss .inner, .fuss .unten { max-width:1500px; }
  .kopf .marke { font-size:16px; }
  .menue > li > a { font-size:13px; }
  .menue > li.person > a small { font-size:10.5px; }
  .knopf-klein { font-size:12.5px; }
  .knopf { font-size:13.5px; padding:17px 38px; }
  h2 { font-size:50px; }
  h3 { font-size:29px; }
  .lead { font-size:22px; max-width:900px; }
  .klein { font-size:15px; }
  .hero .claim { font-size:78px; }
  .hero .lead { font-size:36px; max-width:1100px; }
  .hero-zusatz { font-size:21px; max-width:800px; }
  .problem-frage { font-size:36px; }
  .problem .ged, .hilfe-punkt p, .karte p, .schritte span { font-size:18px; }
  .fuss { font-size:16px; }
}
@media (min-width:1500px) and (min-height:900px) {
  .hero .buehne { width:350px; }
}