/* callflows Blog: Design „Farbkopf Blau", abgenommen 2026-09-03.
   Quelle der Tokens ist das Mockup (Claude-Artifact 078772c9). Off-Black auf Weiß,
   Schibsted Grotesk für Headlines und Meta, Literata für Lesetext, ein Blau für
   Rubrik und Links. Keine Karten, keine Rundungen, keine Verläufe. */

:root {
  --bg: #FFFFFE; --bg-2: #F4F4F2; --ink: #14161A; --ink-2: #3E4249; --ink-3: #6F737B; --hair: #DCDDD9;
  --acc: #1E40AF; --acc-2: #1A379A;
  --disp: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --w: 1200px;  /* wie .container der Website, damit beim Wechsel nichts springt */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121415; --bg-2: #1A1D1E; --ink: #F1F2EE; --ink-2: #C4C7C1; --ink-3: #8A8E93; --hair: #2C3032;
    --acc: #7B9BFF; --acc-2: #9BB3FF;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 16px; line-height: 1.5; }
a { color: var(--acc); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

.meta { font-family: var(--disp); font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: baseline; }
.meta .rub { color: var(--acc); font-weight: 700; }
.meta i { font-style: normal; padding: 0 8px; color: var(--ink-3); }
.lbl { font-family: var(--disp); font-size: 13px; font-weight: 700; color: var(--ink-3); }

/* ---------- Kopf und Fuß ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--hair); }  /* Linie über die volle Breite, wie auf der Startseite */
.hdr .zeile { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--disp); }
.marke img { height: 32px; width: auto; display: block; }
.nav { display: flex; gap: 26px; align-items: center; font-family: var(--disp); font-size: 14px; font-weight: 500; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a[aria-current] { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) { .nav a:not([aria-current]) { display: none; } }

.ftr { margin-top: 32px; padding: 0 0 44px; font-family: var(--disp); font-size: 13px; color: var(--ink-3); }
.ftr .zeile { display: grid; grid-template-columns: 1fr auto; gap: 12px 32px; align-items: start; border-top: 1px solid var(--hair); padding-top: 24px; }
.ftr p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.ftr a { color: var(--ink-3); text-decoration: none; margin-left: 18px; }
.ftr .rssl { margin: 0; color: var(--acc); }
@media (max-width: 640px) { .ftr .zeile { grid-template-columns: 1fr; } }

.btn { -webkit-appearance: none; appearance: none; font-family: var(--disp); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
  border-radius: 3px; padding: 12px 18px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--acc); color: #fff; transition: transform 90ms ease, background-color 120ms ease; }
.btn:hover { background: var(--acc-2); }
.btn:active { transform: translateY(1px); }
.btn--sm { font-size: 13px; padding: 9px 14px; }

/* ---------- Übersicht ---------- */
.kopf { padding: 44px 0 32px; }
.kopf h1 { font-weight: 900; font-size: clamp(76px, 24vw, 364px); line-height: .95; letter-spacing: -.035em; margin: 0; }

.auf { display: grid; grid-template-columns: 1fr 2fr; gap: 44px; align-items: center; padding: 40px 0 44px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit; }
.auf--ohne { grid-template-columns: 1fr; }
.auf:last-child { border-bottom: 0; }
.auf .bild { aspect-ratio: 1; overflow: hidden; background: var(--bg-2); }
.auf .bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; filter: grayscale(1) contrast(1.08); }
.auf h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(32px, 4vw, 46px); line-height: 1.02; letter-spacing: -.015em; margin: 14px 0 18px; text-wrap: balance; max-width: 15ch; transition: color 120ms; }
.auf:hover h2 { color: var(--acc); }
.auf p { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 44ch; }
@media (max-width: 760px) { .auf { grid-template-columns: 1fr; gap: 18px; } .auf .bild { aspect-ratio: 4/3; } .auf .bild img { object-position: 50% 20%; } }

.ledger { list-style: none; margin: 0; padding: 0; }
.reihe { display: block; padding: 26px 0 0; text-decoration: none; color: inherit; }
.reihe h3 { font-family: var(--disp); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -.015em; margin: 6px 0 0; text-wrap: balance; max-width: 24ch; transition: color 120ms; }
.reihe:hover h3 { color: var(--acc); }
.reihe p { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 6px 0 0; max-width: 58ch; }

/* Signaturlinie: aus dem Hash des Artikels, als Trenner. Beim Hover füllt sich der
   blaue Pfad von links nach rechts (stroke-dashoffset), kein JavaScript. */
.linie { display: block; width: 100%; height: 18px; margin-top: 22px; overflow: visible; }
.linie .grund { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.linie .farbe { fill: none; stroke: var(--acc); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 380ms cubic-bezier(.16, 1, .3, 1); }
.reihe:hover .linie .farbe, .reihe:focus-visible .linie .farbe { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .linie .farbe { transition: none; } }

/* ---------- Artikel ---------- */
.art { display: grid; grid-template-columns: minmax(0, 936px); justify-content: start; padding-block: 48px 64px; align-items: start; }  /* nur vertikal: main trägt auch .wrap, dessen Seitenabstand bleibt */
.body { display: grid; grid-template-columns: minmax(0, 660px) 220px; gap: 0 56px; }
.blk { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0 56px; align-items: start; }
.blk > :first-child { grid-column: 1; }
.blk--breit > * { grid-column: 1 / -1; }
.marg { grid-column: 2; font-size: 13px; line-height: 1.5; color: var(--ink-3); padding-top: 6px; }
.marg b { color: var(--ink); font-weight: 600; }
.marg a { color: var(--ink-3); }
.marg .n { color: var(--ink); font-weight: 700; margin-right: 6px; }
sup { font-size: .62em; line-height: 0; color: var(--ink); font-weight: 700; margin-left: 1px; }
sup a { color: inherit; text-decoration: none; }

.titel h1 { font-family: var(--disp); font-weight: 700; font-size: clamp(36px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -.015em; margin: 10px 0 20px; text-wrap: balance; }
.titel .lead { font-size: 21px; line-height: 1.45; color: var(--ink-2); margin: 0 0 24px; }
.autor { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 28px; }
.autor img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; display: block; filter: grayscale(1); }
.autor b { display: block; font-size: 15px; font-weight: 600; }
.autor span { font-size: 14px; color: var(--ink-3); }

.body p { font-size: 19px; line-height: 1.6; margin: 0 0 1em; color: var(--ink); max-width: 64ch; text-wrap: pretty;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-lines: 2; }
.body p a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.body h2 { font-family: var(--disp); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 1.8em 0 .5em; text-wrap: balance; scroll-margin-top: 80px; max-width: 28ch; }
.body ul, .body ol { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 64ch; padding-left: 1.2em; margin: 0 0 1em; }
.body blockquote { margin: 1.4em 0; padding: 0 0 0 20px; border-left: 2px solid var(--hair); color: var(--ink-2); }
.body blockquote p { font-style: italic; }

.fuer { margin: 1.6em 0; }
.fuer p { margin: 0; }
.anruf { margin: 2.4em 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 28px; align-items: center; }
.anruf .tel { display: block; font-family: var(--disp); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.025em; line-height: 1; color: var(--ink); text-decoration: none; margin: 0 0 10px; }
.anruf .tel:hover { color: var(--acc); }
.anruf p { font-size: 16px; line-height: 1.5; margin: 0; max-width: 40ch; color: var(--ink-2); }
.anruf p b { color: var(--ink); }
.qr { width: 128px; height: 128px; display: block; }
.qr svg { width: 100%; height: 100%; display: block; }
.anruf .tipp { display: none; }
@media (max-width: 560px) {
  .anruf { grid-template-columns: 1fr; }
  .qr, .anruf .scan { display: none; }
  .anruf .tipp { display: inline; }
  /* Ohne QR wird die Nummer selbst zum Knopf, wie .btn: volle Breite, Blau, Weiß. */
  .anruf .tel { display: flex; justify-content: center; align-items: center; background: var(--acc); color: #fff; border-radius: 3px;
    padding: 16px 18px; font-size: 24px; letter-spacing: -.01em; margin: 0 0 14px; }
  .anruf .tel:hover, .anruf .tel:active { color: #fff; background: var(--acc-2); }
}

.gegen { margin: 3em 0 0; }
.gegen h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: 0; margin: 10px 0 14px; text-wrap: balance; max-width: 28ch; }
.gegen p { font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0 0 1em; max-width: 62ch; }
.gegen p:last-child { margin: 0; }

.teilen { margin: 2.4em 0 0; font-family: var(--disp); font-size: 13px; color: var(--ink-3); }
.teilen a { color: var(--ink-2); text-decoration: none; }
.teilen a:hover { color: var(--acc); }
.teilen i { font-style: normal; padding: 0 10px; }
.teilen .nativ { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; }

.weiter { margin: 4em 0 0; }
.weiter .lbl { margin-bottom: 6px; }
.weiter .reihe { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.weiter .reihe:last-child { border-bottom: 0; }

@media (max-width: 1000px) {
  .body { grid-template-columns: minmax(0, 660px); }
  .blk { display: flow-root; }  /* nicht block: WebKit verschluckt sonst die Ränder von .fuer/.anruf/.gegen im Grid-Item */
  .marg { margin: -.4em 0 1.4em; padding: 10px 0 0; border-top: 1px solid var(--hair); max-width: 64ch; }
  .mobil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--bg); border-top: 1px solid var(--hair); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--disp); }
  .mobil b { font-size: 15px; }
  body { padding-bottom: 64px; }
}
@media (min-width: 1001px) { .mobil { display: none; } }

.rv { transition: opacity 520ms cubic-bezier(.16, 1, .3, 1), transform 520ms cubic-bezier(.16, 1, .3, 1); }
.rv.pre { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .rv, .rv.pre { opacity: 1; transform: none; transition: none; } }