/* V3: neue Inhalte nach Josef Füricht, Blog, Menü und Lesemodus für Handys */

.marke{font:400 .7rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--kernlicht);margin-bottom:1.4rem}

/* Gang: Höhe bleibt stabil, wenn die Adressleiste am Handy ein- und ausfährt */
.gang-hintergrund{inset:0 0 auto;height:100vh;height:100lvh}

/* ---------- Navigation mit Menü für schmale Bildschirme ---------- */
.nav .menue{display:none;align-items:center;background:transparent;color:var(--papier);border:1px solid rgba(201,235,253,.35);border-radius:999px;padding:.8em 1.15em;font:400 .78rem/1 var(--t);letter-spacing:.06em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav .menue:hover{border-color:var(--kernlicht)}
.nav ul a[aria-current]{opacity:1}
@media (max-width:1040px){
  .nav .menue{display:inline-flex}
  .nav.menue-offen{background:rgba(16,24,32,.97)}
  .nav.menue-offen ul{display:flex;flex-direction:column;gap:0;position:absolute;top:76px;left:0;right:0;padding:.25rem clamp(1rem,4.5vw,3.5rem) 1.5rem;background:rgba(16,24,32,.97);font-size:.8rem}
  .nav.menue-offen ul a{display:block;padding:1.15rem 0;border-bottom:1px solid var(--linie);opacity:1}
}
@media (max-width:520px){
  .nav .rechts .knopf{display:none}
  .nav img{height:22px}
}

/* ---------- Was ist CAVELON ---------- */
.kanaele{grid-template-columns:repeat(3,1fr);margin-top:clamp(2.5rem,5vw,4rem)}

/* ---------- Team statt Bot ---------- */
.organigramm{margin-top:clamp(2rem,4vw,3rem);display:grid;justify-items:center}
.empfang{display:flex;align-items:center;gap:1.2rem;max-width:30rem;padding:1.2rem 1.6rem;border:1.5px solid var(--kernlicht);border-radius:var(--r);background:rgba(79,182,232,.08)}
.empfang .icon{--gr:48px;flex:none}
.empfang strong,.spezialisten strong{display:block;font-weight:400;font-size:1.15rem;line-height:1.3}
.empfang span,.spezialisten span{display:block;margin-top:.25rem;color:var(--frost);font-size:.95rem;line-height:1.45}
.verbindung{width:100%;height:56px;overflow:visible}
.verbindung path{fill:none;stroke:rgba(201,235,253,.35);stroke-width:1.5;vector-effect:non-scaling-stroke}
.verbindung .impuls{stroke:var(--kernlicht);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.07 1;stroke-dashoffset:.07;animation:impuls 3.2s var(--kurve) infinite}
.verbindung .impuls:nth-of-type(3){animation-delay:.5s}
.verbindung .impuls:nth-of-type(4){animation-delay:1s}
@keyframes impuls{from{stroke-dashoffset:.07}to{stroke-dashoffset:-1}}
.spezialisten{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%}
.spezialisten li{padding:1.2rem 1.4rem;border:1.5px solid rgba(201,235,253,.3);border-radius:var(--r);background:rgba(13,22,30,.55);text-align:center}
.team-regel{max-width:56ch;margin:2rem auto 0;text-align:center;color:var(--frost)}
@media (max-width:600px){
  .organigramm{justify-items:stretch}
  .empfang{max-width:none;padding:1rem 1.2rem}
  .verbindung{display:none}
  .spezialisten{grid-template-columns:1fr;gap:.6rem;margin-top:.6rem;padding-left:1.6rem}
  .spezialisten li{text-align:left;padding:.9rem 1.1rem;position:relative}
  .spezialisten li::before,.spezialisten li::after{content:"";position:absolute;background:var(--kernlicht);opacity:.6}
  /* Abzweig zum Feld und senkrechter Strang: beim letzten Feld endet der Strang genau am Abzweig */
  .spezialisten li::before{left:-1.05rem;top:1.55rem;width:1rem;height:1.5px}
  .spezialisten li::after{left:-1.05rem;top:-.6rem;bottom:-1.5px;width:1.5px}
  .spezialisten li:last-child::after{bottom:auto;height:calc(.6rem + 1.55rem + 1.5px)}
  .team-regel{text-align:left}
}

/* ---------- Vier Stufen ---------- */
.stufen-v3 .strahl::after{left:0}
.einstieg{align-self:flex-start;margin-top:.2rem;padding:.55em .95em;border-radius:999px;background:var(--kernlicht);color:var(--tiefe);font:400 .64rem/1 var(--t);letter-spacing:.18em;text-transform:uppercase}

/* ---------- Was ist anders ---------- */
.unterschiede{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.unterschiede li{border-top:1px solid rgba(201,235,253,.3);padding-top:1.4rem}
.unterschiede .nr{display:block;font-weight:200;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:var(--kernlicht)}
.unterschiede h3{font-weight:400;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.3;margin-top:1rem}
.unterschiede p{color:var(--frost);margin-top:.6rem}
.anders-schluss{margin-top:clamp(2.5rem,5vw,3.5rem);max-width:32ch;font-weight:200;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.25;text-wrap:balance}
.anders-schluss span{color:var(--nebel)}
.anders-schluss em{font-style:normal;color:var(--kernlicht)}
@media (max-width:760px){.unterschiede{grid-template-columns:1fr}.kanaele{grid-template-columns:1fr}}

/* ---------- Blog: Teaser ---------- */
.beitraege{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
#blog .beitrag:first-child{grid-column:span 2}
.beitrag{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.3rem,2vw,1.7rem);border:1.5px solid rgba(201,235,253,.3);border-radius:var(--r);background:rgba(13,22,30,.55);color:var(--papier);text-decoration:none;text-shadow:none;transition:border-color .72s var(--kurve),background .72s var(--kurve)}
.beitrag:hover,.beitrag:focus-visible{border-color:var(--kernlicht);background:rgba(79,182,232,.08)}
.beitrag small{font:400 .66rem/1 var(--t);letter-spacing:.26em;text-transform:uppercase;color:var(--kernlicht)}
.beitrag h3{font-weight:300;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.25;text-wrap:balance}
.beitrag p{color:var(--frost);font-size:.95rem;line-height:1.5}
.beitrag .lesen{margin-top:auto;padding-top:.4rem;font:400 .68rem/1 var(--t);letter-spacing:.2em;text-transform:uppercase;color:var(--nebel);transition:color .72s var(--kurve)}
.beitrag .lesen::after{content:" →";letter-spacing:0}
.beitrag:hover .lesen{color:var(--kernlicht)}
.gang-aktiv #blog .beitrag p{font-size:.9rem}
@media (max-width:900px){.beitraege{grid-template-columns:1fr 1fr}#blog .beitrag:first-child{grid-column:span 2}}
@media (max-width:600px){.beitraege{grid-template-columns:1fr}#blog .beitrag:first-child{grid-column:auto}}

/* ---------- Räumliche Reise: lange Sektionen laufen durch den Rahmen statt zu schrumpfen ---------- */
.gang-aktiv .reise-ebene.ueberlang{-webkit-mask-image:linear-gradient(180deg,transparent var(--maske-oben,0px),#000 calc(var(--maske-oben,0px) + 40px),#000 calc(var(--maske-unten,100vh) - 40px),transparent var(--maske-unten,100vh));mask-image:linear-gradient(180deg,transparent var(--maske-oben,0px),#000 calc(var(--maske-oben,0px) + 40px),#000 calc(var(--maske-unten,100vh) - 40px),transparent var(--maske-unten,100vh))}

/* ---------- Lesemodus: Handy, Tablet und „Bewegung aus“ ---------- */
.gang-seite:not(.gang-aktiv) .reise-fenster.auftritt{opacity:0;transform:translateY(28px);transition:opacity .72s var(--kurve),transform 1.15s var(--kurve)}
.gang-seite:not(.gang-aktiv) .reise-fenster.auftritt.da{opacity:1;transform:none}
.gang-seite:not(.gang-aktiv) main>.reise-station:not(.header){padding-block:.6rem;min-height:0;scroll-margin-top:68px}
.gang-seite:not(.gang-aktiv) main>.reise-station:not(.header) .reise-traeger{margin-inline:clamp(8px,2vw,32px);padding-block:clamp(3rem,8vw,6rem);border:1px solid rgba(201,235,253,.14);border-radius:var(--r);background:rgba(13,22,30,.5)}
@media (max-width:600px){
  .gang-seite:not(.gang-aktiv) main>.reise-station:not(.header) .reise-traeger{padding-block:2.6rem;border-radius:18px}
  .gang-seite:not(.gang-aktiv) .reise-ebene>.wrap{width:calc(100% - 2.4rem)}
  .gang-seite .vp8 .frage-gross{margin-top:2.2rem}
  .gang-seite .vp8 .frage-gross h3{font-size:1.75rem}
  .gang-seite .mia{font-size:3.4rem}
  .gang-seite .va9 .raster{margin-top:2.5rem}
  /* Vier Stufen als Zeitleiste: Kreise auf einer Linie, beim Scrollen füllt sich Stufe für Stufe */
  .gang-seite .strahl{grid-template-columns:1fr;row-gap:0;margin-top:2.4rem;padding-top:0}
  .gang-seite .strahl .knoten,.gang-seite .strahl .icon{display:none}
  .gang-seite .strahl li{display:grid;grid-template-columns:3rem 1fr;column-gap:1.1rem;row-gap:.35rem;align-content:start;padding-bottom:2rem;position:relative}
  .gang-seite .strahl li:last-child{padding-bottom:0}
  .gang-seite .strahl li:not(:last-child)::after{content:"";position:absolute;left:calc(1.5rem - .75px);top:3rem;bottom:0;width:1.5px;background:linear-gradient(var(--kernlicht),rgba(79,182,232,.25))}
  .gang-seite .strahl .nr{grid-row:1/span 3;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1.5px solid var(--kernlicht);font-size:1.35rem;font-weight:300;color:var(--kernlicht);background:var(--tiefe)}
  .gang-seite .strahl h3{grid-column:2;align-self:center;min-height:3rem;display:flex;align-items:center;font-size:1.25rem}
  .gang-seite .strahl p,.gang-seite .strahl .einstieg{grid-column:2}
  .gang-seite .strahl .einstieg{margin-top:.5rem;justify-self:start}
  @supports (animation-timeline:view()){
    .gang-seite .strahl .nr{animation:stufe-an linear both;animation-timeline:view();animation-range:entry 60% cover 45%}
    @keyframes stufe-an{from{background:var(--tiefe);color:var(--kernlicht)}to{background:var(--kernlicht);color:var(--tiefe);box-shadow:0 0 0 7px rgba(79,182,232,.16)}}
  }
  .gang-seite .zahlreihe{gap:1.4rem;margin-top:2rem}
  .gang-seite .zahlreihe strong{font-size:2.6rem}
  .gang-seite #prinzip .schaubild{max-width:320px;margin-inline:auto}
  .gang-seite .betrieb{grid-template-columns:1fr;gap:.9rem;margin-top:2.2rem}
  .gang-seite .betrieb li{flex-direction:row;align-items:center;gap:.9rem;padding-top:.9rem}
  .gang-seite .betrieb .icon{--gr:36px;flex:none}
  .gang-seite #versprechen .konturen article{min-height:0;padding:1.3rem;gap:.8rem}
  .gang-seite #versprechen .konturen .icon{--gr:44px!important}
  .gang-seite #versprechen .konturen h3{font-size:1.5rem}
  .gang-seite .fragen summary{font-size:1rem;padding-block:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .gang-seite .reise-fenster.auftritt{opacity:1!important;transform:none!important}
  .verbindung .impuls{display:none}
}

/* ---------- Blogbeitrag ---------- */
.artikel-seite main{padding:clamp(6.5rem,12vw,9rem) 0 0}
.artikel{width:min(54rem,100% - 2*clamp(8px,3vw,48px));margin-inline:auto;padding-block:clamp(2.6rem,6vw,5rem);border:1px solid rgba(201,235,253,.16);border-radius:var(--r);background:rgba(13,22,30,.78)}
.artikel>.wrap{width:min(42rem,100% - 2*clamp(1.2rem,5vw,3rem))}
/* Zurück: wie der Knopf „Gespräch vereinbaren“, Pfeil vorne */
.knopf.zurueck{margin-bottom:2.4rem;text-shadow:none}
.knopf.zurueck::after{content:none}
.knopf.zurueck::before{content:"←";transition:transform .72s var(--kurve)}
.knopf.zurueck:hover::before{transform:translateX(-4px)}
.artikel-titel{font-weight:200;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.1;text-wrap:balance}
.artikel-intro{margin-top:1.6rem;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55;color:var(--eislicht)}
.artikel-meta{margin-top:1.6rem;padding-bottom:2.2rem;border-bottom:1px solid var(--linie);font:400 .7rem/1 var(--t);letter-spacing:.2em;text-transform:uppercase;color:var(--nebel)}
.artikel-text{color:var(--frost)}
.artikel-text h2{margin-top:2.6rem;font-weight:400;font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.35;color:var(--papier)}
.artikel-text>h2:first-child{margin-top:2.4rem}
.artikel-text p{margin-top:.7rem}
.artikel-text ul{list-style:none;margin-top:1rem;display:grid;gap:.8rem}
.artikel-text li{position:relative;padding-left:1.4rem}
.artikel-text li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--kernlicht)}
.artikel-text strong{font-weight:400;color:var(--papier)}
.formel{margin:1.4rem 0;padding:1.3rem 1.5rem;border:1px solid var(--kernlicht);border-radius:16px;background:rgba(79,182,232,.06);color:var(--eislicht);font-size:1.02rem;line-height:1.6;text-align:center}
.schlussfrage{margin-top:3rem;padding:1.8rem 1.8rem 2rem;border-left:2px solid var(--kernlicht);border-radius:0 16px 16px 0;background:rgba(79,182,232,.08)}
.schlussfrage h2{margin-top:0!important;font:400 .7rem/1.4 var(--t);letter-spacing:.24em;text-transform:uppercase;color:var(--kernlicht)}
.schlussfrage p{margin-top:1rem;font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.55;color:var(--papier)}
.artikel-handlung{margin-top:3.6rem;padding-top:2.8rem;border-top:1px solid var(--linie)}
.artikel-handlung h2{font-weight:200;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15}
.artikel-handlung h2 em{font-style:normal;color:var(--kernlicht)}
.artikel-handlung p{margin-top:1rem;color:var(--frost);max-width:44ch}
.artikel-handlung .knopf{margin-top:1.8rem}
.weitere{padding-block:clamp(4rem,8vw,6rem)}
.weitere .beitraege{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.weitere .beitraege{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.weitere .beitraege{grid-template-columns:1fr}.schlussfrage{padding:1.4rem 1.3rem 1.6rem}}
.artikel-seite .fuss{position:relative;z-index:2}
/* Auf Blogseiten fehlt das große Logo im Header, also bleibt es in der Navigation immer sichtbar */
.artikel-seite .nav:not(.fest) .wrap>a img{opacity:1}

/* ---------- Kopf: die Übergänge stehen in kopfwechsel.css ---------- */
/* Im Lesemodus bleibt der Kopf stehen, bis der Wechsel durch ist */
.gang-seite:not(.gang-aktiv) main>.header.reise-station{display:block;height:200vh;height:200svh;min-height:0;padding:0;overflow:visible}
.gang-seite:not(.gang-aktiv) .header>.reise-fenster{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.gang-seite:not(.gang-aktiv) .header .reise-traeger{width:100%}
@media (max-width:600px){.kopfwechsel .kopf-a{font-size:1.85rem}.kopfwechsel .kopf-b{font-size:1.75rem}}
/* Subline am Handy fix in zwei Zeilen, Bruch nach „mit eigenen“. Die Schrift wächst mit der Breite, damit keine Zeile umbricht */
@media (max-width:600px){.kopf-lead .zeile{display:block;white-space:nowrap}.gang-seite .reise-ebene .kopf-lead{font-size:min(1rem,4.5vw);max-width:none}}
@media (prefers-reduced-motion:reduce){
  .gang-seite main>.header.reise-station{height:auto!important;min-height:100svh}
  .gang-seite .header>.reise-fenster{position:static!important;height:auto!important}
}

/* ---------- Footer ---------- */
.fuss-links{display:flex;gap:1.6rem}
.fuss-links a,.fuss-links button{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .72s var(--kurve)}
.fuss-links a:hover,.fuss-links button:hover{color:var(--kernlicht)}
@media (max-width:600px){
  .fuss{padding-block:2.4rem 2.8rem}
  .fuss .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.6rem 1rem}
  .fuss img{height:24px}
  .fuss-links{grid-row:1;grid-column:2;justify-self:end;gap:1.2rem}
  .fuss-recht{grid-column:1/-1;padding-top:1.4rem;border-top:1px solid var(--linie);font-size:.72rem;line-height:1.7}
  .fuss-recht .punkt{display:none}
  .fuss-recht span:last-child{display:block;color:var(--eislicht);letter-spacing:.2em;text-transform:uppercase;font-size:.66rem;margin-top:.3rem}
}
/* Am Seitenende tritt die Bedienleiste ab, damit sie die Links im Footer frei gibt */
.reise-bedienung{transition:opacity .72s var(--kurve),transform .72s var(--kurve)}
.reise-bedienung.am-ende{opacity:0;transform:translateY(12px);pointer-events:none}
.reise-bedienung.am-ende .reise-schalter{pointer-events:none}
/* Fragen-Headlines nie trennen: ganze Wörter wandern in die nächste Zeile */
.vp8 .frage-gross h3{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;word-break:normal}
/* Nichts darf die Seite seitlich verschiebbar machen, auch nicht der Tiefenflug im Kopf.
   clip statt hidden: Die Seite bleibt Scrollfläche, der stehende Kopf funktioniert weiter. */
html,body{overflow-x:clip}
/* Referenzen ohne Subline: die Zahlen folgen direkt der Überschrift, mit etwas mehr Luft */
.gang-seite #referenzen .reise-ebene .zahlreihe{margin-top:2.6rem}