/* ==========================================================================
   TrendShip — Unterseiten in der Tiefsee-Welt (2026-08-28)
   Gilt fuer jede Seite mit .page-hero: Branchen, Leistungen, Ratgeber,
   Orte, Website-Check. Dunkler Kopf mit Raster, Beweis, Kante.
   Laedt NACH leistung.css.

   Die Kopfzeilen-Regeln haengen an html.dunkler-kopf — auf Seiten ohne
   dunklen Kopf (Impressum, Datenschutz) waere helle Schrift auf hellem
   Grund unsichtbar.
   ========================================================================== */
:root{
  --abyss:#050A14; --abyss-2:#0A1424; --xenon:#93B2ED; --ice:#C7D9F5;
  --glow:rgba(40,78,199,.55);
  color-scheme:only light;
}

/* ------------------------------------------------------------ KOPF: TIEFSEE */
.page-hero{background:var(--abyss);color:var(--cream-ink);isolation:isolate;
  padding-bottom:clamp(3.5rem,8vh,6rem);
  border-bottom:1px solid rgba(147,178,237,.22)}
.page-hero::before{background:radial-gradient(circle,rgba(40,78,199,.30),transparent 70%)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(147,178,237,.55) 22%,rgba(147,178,237,.55) 78%,transparent);
  box-shadow:0 0 24px 2px rgba(147,178,237,.35)}
.flowfield{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.92}

.page-hero h1{color:var(--cream-ink)}
.page-hero h1 em{color:var(--xenon)}
.page-hero .lead{color:var(--cream-muted)}
.page-hero .eyebrow{color:var(--xenon)}
.page-hero .eyebrow::before{background:linear-gradient(90deg,var(--xenon),transparent)}
.page-hero .crumbs,.page-hero .crumbs a{color:rgba(233,240,250,.62)}
.page-hero .crumbs a:hover{color:var(--xenon)}
/* Der Trenner erbte die helle Krumen-Farbe nicht — er setzt sie selbst
   und stand damit dunkel auf dunkel, also unsichtbar. */
.page-hero .crumbs .sep{color:rgba(233,240,250,.42);opacity:1}
.page-hero .hero-trust li{color:var(--cream-muted)}
.page-hero .hero-trust li::before,.page-hero .hero-trust li::marker{color:var(--xenon)}

.page-hero .btn{--bg:var(--accent-2);color:#fff;
  box-shadow:0 18px 44px -18px var(--glow),0 0 0 1px rgba(147,178,237,.20) inset}
.page-hero .btn:hover{box-shadow:0 26px 60px -20px var(--glow),0 0 0 1px rgba(147,178,237,.34) inset}
.page-hero .btn-ghost{background:transparent;color:var(--cream-ink);
  border-color:rgba(147,178,237,.30);box-shadow:none}
.page-hero .btn-ghost:hover{background:rgba(147,178,237,.10);border-color:var(--xenon)}

/* Kennzahlen im Kopf: Kanten statt Kaesten */
.page-hero .bstat{background:rgba(147,178,237,.05);border-color:rgba(147,178,237,.20)}
.page-hero .bstat .big{color:var(--cream-ink)}
/* Der erklaerende Satz stand in --muted: dunkles Blau auf dunklem Grund,
   am Telefon praktisch unlesbar. */
.page-hero .bstat p{color:var(--cream-muted)}
.page-hero .bstat .big em{color:var(--xenon);font-style:normal}

/* Die Illustration gehoert in dieselbe Welt */
.bhero-visual .orbit{border-color:rgba(147,178,237,.20)}
.bhero-visual .scene{filter:drop-shadow(0 40px 80px rgba(0,0,0,.7))}

/* ---------------------------------------------------------- KOPFZEILE */
html.dunkler-kopf .site-header:not(.scrolled) .nav-links a,
html.dunkler-kopf .site-header:not(.scrolled) .nav-cta .btn-ghost{color:var(--cream-ink)}
html.dunkler-kopf .site-header:not(.scrolled) .nav-links a::after{background:var(--xenon)}
html.dunkler-kopf .site-header:not(.scrolled) .nav-cta .btn-ghost{border-color:rgba(147,178,237,.26)}
html.dunkler-kopf .site-header:not(.scrolled) .burger span{background:var(--cream-ink)}
/* Das PNG der Wortmarke ist golden — auf hellem Grund wird es gedreht,
   ueber dem dunklen Kopf invertiert. Ohne die erste Regel blitzte beim
   Scrollen das alte Gold auf. */
.brand-logo{filter:hue-rotate(188deg) saturate(1.15)}
html.dunkler-kopf .site-header:not(.scrolled) .brand-logo{filter:invert(1)}
.site-header.scrolled{background:rgba(245,247,252,.86)}

/* ------------------------------------------------------------- BEWEIS
   Die wichtigste Sektion: eine echte Arbeit aus genau dieser Branche.
   Ohne sie ist jedes Versprechen auf der Seite nur eine Behauptung. */
.proof{background:var(--abyss);color:var(--cream-ink);position:relative;overflow:hidden;
  padding-block:clamp(3.5rem,9vh,7rem);border-block:1px solid rgba(147,178,237,.16)}
.proof::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 80% 0%,var(--proofglow,rgba(40,78,199,.20)),transparent 65%)}
.proof .wrap{position:relative;z-index:1}
.proof .eyebrow{color:var(--xenon)}
.proof .eyebrow::before{background:linear-gradient(90deg,var(--xenon),transparent)}
.proof h2{color:var(--cream-ink);font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.03em;
  margin:.9rem 0 1.2rem;max-width:20ch}
.proof h2 em{color:var(--xenon);font-style:normal}
.proof-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.proof-shot{position:relative;border:1px solid rgba(147,178,237,.22);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 90px -40px var(--proofglow,rgba(40,78,199,.5))}
.proof-shot img{display:block;width:100%;height:auto}
.proof-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(5,10,20,.55))}
.proof-name{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.3rem}
.proof-meta{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xenon);margin-bottom:1.4rem}
.proof-line{border-left:2px solid rgba(147,178,237,.22);padding:.2rem 0 .2rem 1.1rem;margin-bottom:1.1rem}
.proof-line b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-muted);margin-bottom:.35rem;font-weight:600}
.proof-line.is-now{border-left-color:var(--accent-2)}
.proof-line p{color:var(--cream-muted);line-height:1.6;margin:0}
.proof-cta{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------- LESESTRECKE */
.pain{background:linear-gradient(180deg,rgba(9,16,32,.03),transparent);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.pain:hover{border-left-color:var(--accent-2);transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(9,16,32,.5)}
.section.process{background:var(--abyss);color:var(--cream-ink)}
.section.process h2{color:var(--cream-ink)}
.section.process h2 em{color:var(--xenon)}
.section.process .step h3{color:var(--cream-ink)}
.section.process .step p,.section.process .lead{color:var(--cream-muted)}
.section.process .no{color:var(--xenon)}

@media(prefers-reduced-motion:reduce){
  .flowfield{display:none}
  .pain:hover{transform:none}
}

/* Merkmale der Arbeit: die Klassen stammen von der Startseite und waren
   auf den Branchenseiten nie definiert — ohne sie kleben die Woerter. */
.proof .ref-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.proof .chip{font-size:.7rem;letter-spacing:.06em;padding:.42rem .8rem;
  border:1px solid rgba(147,178,237,.26);color:var(--cream-muted);
  background:rgba(147,178,237,.05);white-space:nowrap}
.proof .btn{--bg:var(--accent-2);color:#fff;box-shadow:0 18px 44px -20px var(--glow)}
.proof .btn-ghost{background:transparent;color:var(--cream-ink);
  border:1px solid rgba(147,178,237,.30);box-shadow:none}
.proof .btn-ghost:hover{background:rgba(147,178,237,.10);border-color:var(--xenon)}

/* ==========================================================================
   DER WEG ZUR ANFRAGE — vier Stationen, die sich beim Scrollen fuellen.
   Keine Deko: die Strecke erklaert, wofuer die Website da ist, und zwar
   in den Worten der jeweiligen Branche.
   ========================================================================== */
.journey{background:var(--abyss);color:var(--cream-ink);position:relative;overflow:hidden;
  padding-block:clamp(3.2rem,8vh,6rem);border-block:1px solid rgba(147,178,237,.16)}
.journey::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 0%,rgba(40,78,199,.16),transparent 62%)}
.journey .wrap{position:relative;z-index:1}
.journey .eyebrow{color:var(--xenon)}
.journey .eyebrow::before{background:linear-gradient(90deg,var(--xenon),transparent)}
.journey h2{color:var(--cream-ink);font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.03em;
  margin:.9rem 0 2.6rem;max-width:24ch}
.journey h2 em{color:var(--xenon);font-style:normal}

.jrail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2.2rem)}
.jrail::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;
  background:rgba(147,178,237,.20)}
.jrail::after{content:"";position:absolute;left:0;top:19px;height:1px;
  width:calc(var(--jp,0) * 100%);background:linear-gradient(90deg,var(--accent-2),var(--xenon));
  box-shadow:0 0 14px 1px rgba(147,178,237,.5);transition:width 1.1s var(--ease)}

.jstep{position:relative;padding-top:52px}
.jdot{position:absolute;top:11px;left:0;width:17px;height:17px;border-radius:50%;
  border:1px solid rgba(147,178,237,.34);background:var(--abyss);z-index:2;
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.jdot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:transparent;
  transition:background .5s var(--ease)}
.jstep.on .jdot{border-color:var(--xenon);box-shadow:0 0 0 6px rgba(40,78,199,.14)}
.jstep.on .jdot::after{background:var(--accent-2)}
.jnum{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--cream-muted);
  display:block;margin-bottom:.5rem}
.jstep h3{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .45rem;
  color:rgba(233,240,250,.55);transition:color .5s var(--ease)}
.jstep.on h3{color:var(--cream-ink)}
.jstep p{font-size:.9rem;line-height:1.55;color:rgba(233,240,250,.45);margin:0;
  transition:color .5s var(--ease)}
.jstep.on p{color:var(--cream-muted)}
.jquote{margin-top:.7rem;font-size:.82rem;color:var(--xenon);opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.jstep.on .jquote{opacity:1;transform:none}

@media(max-width:860px){
  .jrail{grid-template-columns:1fr;gap:0}
  .jrail::before{left:8px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .jrail::after{left:8px;top:0;width:1px;height:calc(var(--jp,0) * 100%);
    background:linear-gradient(180deg,var(--accent-2),var(--xenon));transition:height 1.1s var(--ease)}
  .jstep{padding:0 0 2rem 2.4rem}
  .jdot{top:2px}
}
@media(prefers-reduced-motion:reduce){
  .jrail::after{width:100%}
  .jstep h3,.jstep p{color:var(--cream-ink)}
  .jquote{opacity:1;transform:none}
}


/* ---------------------------------------------------- KOPF: RASTER + LICHT
   Dieselbe Handschrift wie auf der Startseite: kein Teilchenflug, sondern
   ein Konstruktionsraster und ein sehr langsam wanderndes Licht. */
.hero-raster{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-raster::before{content:"";position:absolute;inset:-2px;
  background:
    repeating-linear-gradient(90deg,rgba(147,178,237,.075) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(147,178,237,.055) 0 1px,transparent 1px 92px);
  -webkit-mask-image:radial-gradient(120% 90% at 58% 30%,#000 12%,rgba(0,0,0,.45) 52%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 58% 30%,#000 12%,rgba(0,0,0,.45) 52%,transparent 78%)}
.hero-raster::after{content:"";position:absolute;top:-30%;left:-25%;width:85%;height:170%;
  background:radial-gradient(closest-side,rgba(40,78,199,.18),rgba(40,78,199,.05) 55%,transparent 78%);
  filter:blur(14px);animation:heroLicht 26s cubic-bezier(.45,0,.55,1) infinite}
@keyframes heroLicht{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(95%,6%,0) scale(1.14)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.hero-achse{position:absolute;left:clamp(1.15rem,4.4vw,4rem);top:0;bottom:0;width:1px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(147,178,237,.22) 18%,rgba(147,178,237,.22) 82%,transparent);
  pointer-events:none}
.hero-achse::before,.hero-achse::after{content:"";position:absolute;left:-4px;width:9px;height:1px;
  background:rgba(147,178,237,.55)}
.hero-achse::before{top:34%}
.hero-achse::after{top:70%}
@media(max-width:900px){.hero-achse{display:none}}
@media(prefers-reduced-motion:reduce){.hero-raster::after{animation:none}}

/* Ratgeber-Kopfzeile: Autor, Stand, Lesezeit standen in --faint, also
   dunkelblau — auf dem dunklen Kopf praktisch unsichtbar. */
.page-hero .article-meta,.page-hero .article-meta span{color:var(--cream-muted)}
.page-hero .article-meta span+span::before{color:rgba(147,178,237,.45)}