/* Unterseiten-Schicht (01.10.2026) — dieselbe Haltung wie die Startseite.
   Eingebunden NACH abschluss.css auf Preise, Ablauf, Prüf uns, Für wen,
   Über uns. Die Startseite bindet sie nicht ein: sie traegt dieselben
   Entscheidungen inline (Flaechen-Rhythmus vom 29.09.2026).

   Was hier entschieden ist und warum:
   - Grund: das Emerald-Licht der Marke (abschluss.css). Der ruhige schwarze
     Grund vom 01.10. wirkte flach (Sebi: "dunkel, flach und langweilig").
   - Verlaufsschrift nur noch an zwei Stellen je Seite (Kopf + Abschluss);
     wenn jede Ueberschrift leuchtet, leuchtet keine.
   - Leitsaetze stehen als eigenes Band auf der Anthrazit-Flaeche.
   - Etiketten in Hanken-Versalien (zwei Familien, fonts.css). */

/* ── Grund: Emerald-Licht kommt aus abschluss.css (eine Quelle fuer alle Seiten) ── */
body{font-synthesis-weight:none}

/* Kopf ohne eigenes Foto: das Licht kommt jetzt vom Grund (abschluss.css) —
   ein zweiter Schein hier machte ihn am Handy zu hell fuer die Etiketten */
.fl-hero{background:none}

/* ── Hervorhebung: Gradient-Flow auf jedem betonten Wort ──
   Erst auf Kopf + Abschluss begrenzt (01.10.2026), damit er heraussticht —
   Sebi: "verlieren komplett den gradient flow". Er ist das Markenzeichen und
   laeuft wieder durch jede Ueberschrift; der Grund bleibt ruhig, Fliesstext
   bleibt ohne Farbe. */
main :is(h1,h2,h3,blockquote) em,
:is(.fw-quote,.ab-quote,.rs-quote) blockquote em,
.fw-msys .mt b{
  background:var(--accent-flow,linear-gradient(135deg,#1FC998,#46BEEA));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--emerald,#00B888);
}
/* Fliesstext: Betonung ueber Gewicht, nicht ueber Farbe */
main p b,main p strong{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--paper,#F2F3F1);
}


/* ── Leitsaetze: Licht statt Band (16.10.2026) ──────────────────
   Vorher graue deckende Flaeche mit Haarlinien oben und unten. Sebi 16.10.: „eher
   blockartig, nicht unser high end level“. Jetzt ein weicher Lichtteich, der innerhalb
   des Abschnitts vollstaendig auslaeuft; der durchgehende Grund bleibt sichtbar. */
:root .rs-quote,:root .fw-quote,:root .ab-quote{
  background:radial-gradient(48% 42% at 50% 50%,rgba(0,184,136,.08),rgba(31,166,224,.03) 60%,transparent 100%);
  border-block:0;
}
.rs-quote::before,.fw-quote::before,.ab-quote::before,
.rs-quote::after,.fw-quote::after,.ab-quote::after{opacity:.5}

/* ── Abschnittsgrenzen: keine Linie (16.10.2026) ─────────────────
   Die Haarlinie ueber volle Breite stapelte die Seite in Bloecke. Der Rhythmus kommt aus
   dem Abstand; die Seitenkoepfe ruecken naeher an den ersten Abschnitt. */
:root main > section{border-top:0}
:root :is(.pr-hero,.fl-hero,.rs-hero,.fw-hero,.ab-hero){padding-bottom:clamp(16px,2vw,32px)}
/* Fuss ohne harte Kante: laeuft aus dem Grund heraus */
:root .site-footer{background:linear-gradient(180deg,rgba(10,11,13,0),#0A0B0D 160px);border-top:0;box-shadow:none}

/* ── Nav-Aktion (Gratis-Vorschau) ───────────────────────────── */
.nav-soft{font-family:"Hanken Grotesk",sans-serif}

/* ── Kapitelkoepfe ──────────────────────────────────────────
   max-width in ch stand am BEHAELTER und rechnete gegen 17 px statt gegen
   die grosse Ueberschrift darin — "Sechs Fragen an jede Agentur" brach ein
   Wort je Zeile. Die Zeilenlaenge gehoert an das Element, das die Schrift
   traegt. */
:is(.pr-blk-head,.rs-blk-head,.fw-blk-head,.ab-blk-head){max-width:none}
:is(.pr-blk-head,.rs-blk-head,.fw-blk-head,.ab-blk-head) h2{max-width:18ch;text-wrap:balance}
:is(.pr-blk-head,.rs-blk-head,.fw-blk-head,.ab-blk-head) > p:not([class*="rh"]):not(.ix):not(.eyebrow){max-width:52ch}

/* ── Lesetext ab 17 px (PRODUCT.md, kern.md) ────────────────
   Gemessen am 01.10.2026 auf Textknoten-Ebene: 15–16,3 px in diesen
   Rollen. Etiketten in Versalien und Bildunterschriften bleiben kleiner. */
.pr-alt-vor,.pr-alt-wann,.pr-ueb-fuss,.pr-calc-line,.pr-why-lead,.pr-tax p,
.fl-fakt-txt,.fl-aufwand-note,.fl-b-item p,
.rs-mlist .mt > span,
.fw-pline .val,
.ab-fbio,main li > span{
  font-size:1.0625rem;
}
.rs-mlist .mt > span{line-height:1.55}

/* ── Kapitel-Etiketten wie auf der Startseite: "02 · Was zaehlt" ──
   Vorher vier Formen fuer dasselbe Element (№ 01 — …, 02 · …, Etikett ohne
   Nummer, Mono-Versalien). */
:is(.pr-rh,.rs-rh,.fw-rh,.ab-rh),main p.ix{
  display:flex;align-items:center;gap:var(--s-3,12px);
  font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:0.7188rem;
  letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:var(--faint,#8E918B);
}
:is(.pr-rh,.rs-rh,.fw-rh,.ab-rh,main p.ix) b{color:var(--emerald-soft,#1FC998);font-weight:600}
:is(.pr-rh,.rs-rh,.fw-rh,.ab-rh)::before{content:none}
:is(.pr-rh,.rs-rh,.fw-rh,.ab-rh,main p.ix)::after{content:"";flex:1;height:1px;max-width:120px;background:linear-gradient(90deg,#1FC998,rgba(70,190,234,.55) 55%,transparent)}
main .klabel{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:0.7188rem;letter-spacing:.14em}

/* ── Ueber uns: Rollen-Pille wie die Tags der Startseite (Umriss statt Verlauf) */
.ab-frole{background:none;color:var(--emerald-soft,#1FC998);border:1px solid color-mix(in srgb,var(--emerald,#00B888) 45%,transparent);font-family:"Hanken Grotesk",sans-serif;font-weight:600}
/* ── Fuer wen: Zeilentitel einfarbig statt Verlauf */

/* ── Preise: Bedingungen sichtbar beim Preis, nicht im Kleingedruckten ── */
.pr-alt-bed{margin-top:6px;font-size:0.9375rem;line-height:1.45;color:var(--muted,#A4A6A1)}
.pr-alt-zusatz{margin-top:14px;font-size:0.9375rem;color:var(--muted,#A4A6A1)}

/* ── Abschluss: Etikett zentriert ueber dem zentrierten Block ── */
section.abschluss p.ix{justify-content:center}
section.abschluss p.ix::after{content:none}
/* ── Pruef uns: "Was wir nicht messen" mit Kreuz statt Haken ── */
.rs-mlist svg.nein{stroke:var(--faint,#8E918B)}

/* ── Inline-Links im Fliesstext: eine Farbe auf allen Seiten ──
   vorher grau unterstrichen (/ablauf/) oder Browser-Lila nach Besuch (/results/) */
main p a:not(.btn):not(.textlink),main li a:not(.btn):not(.textlink),
main p a:not(.btn):not(.textlink):visited,main li a:not(.btn):not(.textlink):visited{
  color:var(--emerald-soft,#1FC998);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--emerald-soft,#1FC998) 45%,transparent);
}

/* ── Lesbarkeit, Pruefrunde 01.10.2026 ───────────────────── */
.pr-ueb-liste .ix{color:var(--emerald-soft,#1FC998);font-size:0.6875rem}
p.pr-what{font-size:1.0625rem}
p.pr-note{font-size:0.9375rem}
details.pr-details > summary,details.pr-alt-mehr > summary{min-height:44px;display:flex;align-items:center}
details.pr-details > summary > span{font-size:0.9375rem}
.rs-quote figcaption{font-size:0.9375rem}
ul.ab-creed > li > span{font-size:1.0625rem}
@media (max-width:600px){main p.lead,p.pr-emp-wann{font-size:1.0625rem}}

/* ── Fuer wen: Pfeil ohne Kreis — der Kreis sah aus wie ein Knopf, tat aber nichts */
.fw-marrow,.fw-mrow:hover .fw-marrow{border:0;background:none;width:24px;height:24px}
p.pr-alt-du{font-size:1.0625rem}



/* "Unsere Empfehlung" stand am Handy im hellsten Licht bei 4,31:1 */
.pr-emp-lbl{color:#6EE3BF}

/* Listen ohne Icon-Spalte (Haken/Kreuze entfernt, 02.10.2026) */
.rs-mlist li,.fw-qcol li{display:block}
/* Engpass-Zeilen: zwei Spalten, seit der Pfeil-Kreis raus ist (02.10.2026) */
@media (min-width:681px){.fw-mrow{grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important}}

/* ── Kopf jeder Unterseite: echter eigener Beitrag statt Stimmungsbild (02.10.2026) ──
   Vorher: Stock-artige Fotos (Laptop, Ringlicht-Creator, zwei Maenner von hinten),
   auf Preise zusaetzlich ein Hintergrundvideo. Jetzt traegt jede Seite den
   Beitrag aus @social2scale, der dasselbe Thema hat — echte Arbeit, dieselbe
   Bildsprache wie der Feed auf der Startseite. Licht kommt vom Grund. */
:is(.pr-hero,.fl-hero,.rs-hero,.fw-hero,.ab-hero) > .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  column-gap:clamp(40px,6vw,104px);align-items:center;
}
:is(.pr-hero,.fl-hero,.rs-hero,.fw-hero,.ab-hero) > .wrap > :not(.kopf-beitrag){grid-column:1}
.kopf-beitrag{grid-column:2;grid-row:1 / span 12;margin:0;justify-self:end;width:100%;max-width:340px;position:relative}
.kopf-beitrag::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 55%,rgba(31,201,152,.22),rgba(70,190,234,.08) 55%,transparent 75%)}
.kopf-beitrag img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 40px 80px -36px rgba(0,0,0,.9);
  transform:rotate(1.5deg);transition:transform var(--dur-4, .8s) cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.kopf-beitrag:hover img{transform:rotate(0deg) translateY(-6px)}}
@media (max-width:880px){
  :is(.pr-hero,.fl-hero,.rs-hero,.fw-hero,.ab-hero) > .wrap{grid-template-columns:minmax(0,1fr)}
  .kopf-beitrag{grid-column:1;grid-row:auto;justify-self:start;max-width:min(62vw,260px);margin-top:clamp(28px,6vw,40px)}
}
@media (prefers-reduced-motion:reduce){.kopf-beitrag img{transition:none}}

/* Preise · Einordnung (06.10.2026): Rechnung als Einleitung, Tabelle mit Einheit,
   unsere Zeile nennt die Startgebuehr dort, wo verglichen wird. */
.pr-calc .pr-time-label{margin:0 0 var(--s-4,16px)}
.pr-calc-grid .is-us .l small{display:block;margin-top:4px;font-size:0.9375rem;font-weight:400;color:var(--muted,#BEC0BB);letter-spacing:0;text-transform:none}
@media (min-width:961px){
  .pr-blk:has(#pr-rechnung) > .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,112px);align-items:end}
  .pr-blk:has(#pr-rechnung) .pr-blk-head{margin-bottom:0}
  .pr-blk:has(#pr-rechnung) .pr-calc{margin-top:0}
}
@media (max-width:960px){
  .pr-blk:has(#pr-rechnung) .pr-calc-grid > div{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px}
  .pr-blk:has(#pr-rechnung) .pr-calc-grid .v{white-space:nowrap;flex:0 0 auto}
}