/* ————— Fonts: Aeonik Pro, inlined (paretos DS) ————— */
  @font-face {
    font-family: 'Aeonik Pro';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/aeonik-pro-400.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Aeonik Pro';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/aeonik-pro-500.woff2) format('woff2');
  }

  /* ————— Tokens (aus dem paretos Design Sheet) ————— */
  :root {
    color-scheme: light;
    --paper: #F5F2E9;
    --paper-2: #EBE5D6;
    --card: #FCFAF3;
    --yellow: #F2ED2B;
    --mint: #8FE3AA;
    --pink: #F350A6;
    --violet: #9B4FE0;
    --ink: #141210;
    --ink-60: #5A544A;
    /* --ink-40 ist reine Textfarbe (Eyebrows, Bildunterschriften, Fußnoten) und muss
       WCAG AA erfüllen — auch auf --paper-2. #8B8474 kam nur auf 3,0–3,3:1. */
    --ink-40: #6A6454;
    --ink-20: #CEC7B4;
    --white-20: rgba(255,255,255,0.22);
    --white-60: rgba(255,255,255,0.68);
    --grad: linear-gradient(90deg, #F350A6 0%, #9B4FE0 100%);
    --sans: 'Aeonik Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }

  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
  }
  /* Papierkorn über allem, wie im Druck */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 60;
  }

  ::selection { background: var(--yellow); color: var(--ink); }

  h1, h2, h3 { font-weight: 500; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
  @media (max-width: 640px) { .wrap { padding: 0 22px; } }

  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-40);
  }
  .chip {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--mint);
    color: var(--ink);
  }
  .marker {
    background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 96%, transparent 96%);
  }
  .grad-text {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .btn {
    display: inline-block;
    font-size: 16px;
    padding: 14px 26px;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    transition: opacity .25s;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
  }
  /* FEHLERBEHEBUNG 20.08.2026 (Mobil-Umbau): ohne (hover: hover) behaelt ein
     angetipptes Element auf dem Telefon seinen Hover-Zustand, bis woanders
     hingetippt wird — der Haupt-CTA stand nach dem Tippen dauerhaft auf 65 %
     Deckkraft. */
  @media (hover: hover) { .btn:hover { opacity: 0.65; } }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-20);
    padding: 13px 25px;
    transition: border-color .25s;
  }
  @media (hover: hover) { .btn-ghost:hover { opacity: 1; border-color: var(--ink-60); } }
  .btn-yellow { background: var(--yellow); color: var(--ink); }

  /* ————— Header ————— */
  header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245,242,233,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ink-20);
  }
  .nav {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .logo { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
  .logo b { font-weight: 500; font-size: 18px; letter-spacing: -0.4px; }
  .logo span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-40);
  }
  .nav-links { display: flex; gap: 22px; font-size: 15px; color: var(--ink-60); }
  .nav-links a { padding: 12px 0; }
  @media (hover: hover) { .nav-links a:hover { color: var(--violet); } }
  .nav .btn { font-size: 15px; padding: 11px 20px; margin-left: auto; }
  @media (max-width: 900px) {
    .nav { padding: 0 22px; gap: 16px; }
    .nav-links { display: none; }
  }
  @media (max-width: 640px) {
    .logo span { display: none; }
    .nav .btn { font-size: 14px; padding: 12px 16px; }
  }

  section { padding: 96px 0; }

  /* ————— Hero ————— */
  .hero { padding: 88px 0 72px; position: relative; overflow: hidden; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
    position: relative;
  }
  .hero h1 {
    font-size: clamp(38px, 4.8vw, 66px);
    line-height: 1.02;
    letter-spacing: -2px;
    margin: 30px 0 0;
    max-width: 16ch;
    position: relative;
  }
  .hero .lead-line {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 500;
    letter-spacing: -0.4px;
    margin: 28px 0 0;
    max-width: 40ch;
  }
  .hero .sub {
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-60);
    max-width: 54ch;
    margin: 18px 0 0;
  }
  .hero .cta-row { display: flex; gap: 12px; margin: 42px 0 0; flex-wrap: wrap; }

  .blob { position: absolute; border-radius: 999px; mix-blend-mode: multiply; pointer-events: none; }
  .blob-yellow { width: 360px; height: 190px; background: var(--yellow); transform: rotate(-7deg); left: -40px; top: -10px; }
  .blob-mint { width: 240px; height: 140px; background: var(--mint); transform: rotate(14deg); left: -70px; top: 96px; }
  .blob-sunset {
    width: 260px; height: 130px;
    border-radius: 260px 260px 0 0;
    background: linear-gradient(180deg, var(--pink) 0%, var(--violet) 100%);
    opacity: 0.85;
    right: -30px; top: -34px;
  }

  /* Der Druck: Statue aus dem Original-Poster, CSS-Ausschnitt */
  .print {
    position: relative;
    background: #FBF8F0;
    padding: 14px 14px 40px;
    border: 1px solid var(--ink-20);
    box-shadow: 0 24px 60px rgba(20,18,16,0.18), 0 4px 14px rgba(20,18,16,0.08);
    transform: rotate(1.6deg);
  }
  .print-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .print-caption {
    position: absolute;
    left: 14px; right: 14px; bottom: 12px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-40);
  }
  .tape {
    position: absolute;
    width: 96px; height: 26px;
    background: rgba(252,250,243,0.62);
    border: 1px solid rgba(20,18,16,0.07);
    box-shadow: 0 1px 3px rgba(20,18,16,0.08);
    top: -13px;
  }
  .tape-l { left: 10%; transform: rotate(-5deg); }
  .tape-r { right: 10%; transform: rotate(4deg); }
  .halftone {
    position: absolute;
    inset: -34px -30px auto auto;
    width: 240px; height: 320px;
    background-image: radial-gradient(circle, var(--ink) 1.05px, transparent 1.05px);
    background-size: 9px 9px;
    opacity: 0.16;
    pointer-events: none;
    z-index: -1;
    right: -46px;
    top: 40px;
  }
  .hero-figure { position: relative; }
  .hero-figure .blob-fig-mint {
    width: 300px; height: 170px;
    background: var(--mint);
    transform: rotate(-12deg);
    left: -60px; bottom: -30px;
  }
  .hero-figure .blob-fig-pink {
    width: 210px; height: 210px;
    background: linear-gradient(180deg, var(--pink) 0%, var(--violet) 100%);
    opacity: 0.75;
    right: -40px; top: -46px;
    border-radius: 999px;
  }
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 64px; }
    .hero h1 { max-width: 17ch; }
    .print { max-width: 520px; margin: 0 auto; }
  }

  /* ————— Presse ————— */
  .press { padding: 26px 0; border-top: 1px solid var(--ink-20); border-bottom: 1px solid var(--ink-20); }
  .press-row {
    display: flex;
    align-items: center;
    gap: clamp(28px, 6vw, 84px);
    flex-wrap: wrap;
  }
  .press-row .eyebrow { flex-shrink: 0; }
  .wordmarks { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; opacity: 0.52; }
  .wm { color: var(--ink); white-space: nowrap; }
  .wm-hb { font-weight: 500; font-size: 21px; letter-spacing: -0.6px; }
  .wm-wiwo { font-weight: 500; font-size: 20px; letter-spacing: -0.4px; }
  .wm-wiwo i { font-style: normal; font-weight: 400; }
  .wm-forbes { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; letter-spacing: 2.5px; text-transform: uppercase; }

  /* ————— Stats ————— */
  .stats { padding: 72px 0 0; }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
  }
  .stat { padding: 28px; border-right: 1px solid var(--ink-20); }
  .stat:last-child { border-right: none; }
  .stat b {
    display: block;
    font-family: var(--mono);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
  }
  .stat p { font-size: 14px; color: var(--ink-60); }
  @media (max-width: 820px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(2) { border-right: none; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--ink-20); }
  }

  /* ————— Abschnitte ————— */
  .sec-head h2 {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.06;
    letter-spacing: -1.4px;
    max-width: 26ch;
    margin: 24px 0 0;
  }
  .smokey { background: var(--paper-2); }

  .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .card {
    background: var(--card);
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    padding: 28px;
  }
  .card .eyebrow { display: block; margin-bottom: 16px; }
  .card p { font-size: 18px; line-height: 1.45; }
  @media (max-width: 820px) { .cards-3 { grid-template-columns: 1fr; } }

  .punchline {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    letter-spacing: -0.8px;
    margin-top: 56px;
    max-width: 34ch;
  }

  /* ————— Hebel ————— */
  .hebel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .hebel {
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    padding: 32px 28px;
    background: var(--card);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
  }
  .hebel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
  }
  .hebel-1::before { background: var(--yellow); }
  .hebel-2::before { background: var(--grad); }
  .hebel-3::before { background: var(--mint); }
  .hebel h3 { font-size: 22px; letter-spacing: -0.4px; }
  .hebel p { font-size: 16px; line-height: 1.5; color: var(--ink-60); flex: 1; }
  .hebel .fmt {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-40);
    padding-top: 14px;
    border-top: 1px solid var(--ink-20);
  }
  @media (max-width: 820px) { .hebel-grid { grid-template-columns: 1fr; } }

  /* ————— Zitat groß ————— */
  .bigquote { padding: 110px 0; }
  .bigquote blockquote {
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.18;
    letter-spacing: -1.2px;
    font-weight: 500;
    max-width: 26ch;
  }
  .bigquote blockquote .marker { padding: 0 2px; }
  .quote-attr { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
  .quote-attr .dot {
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--grad);
    flex-shrink: 0;
  }
  .quote-attr b { font-weight: 500; display: block; font-size: 16px; }
  .quote-attr span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-40); }

  /* ————— Fit ————— */
  .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
  .fit {
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    padding: 32px;
  }
  .fit-no { background: var(--paper-2); }
  .fit .list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
  .fit p { font-size: 17px; line-height: 1.4; }
  .fit-no p { color: var(--ink-60); }
  @media (max-width: 820px) { .fit-grid { grid-template-columns: 1fr; } }

  /* ————— Der Tag ————— */
  .day-list { margin-top: 56px; border-top: 1px solid var(--ink-20); }
  .day {
    display: grid;
    grid-template-columns: 80px 1fr 1.4fr;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--ink-20);
    align-items: start;
  }
  .day .num { font-family: var(--mono); font-size: 14px; color: var(--ink-40); }
  .day h3 { font-size: 22px; letter-spacing: -0.4px; margin-bottom: 6px; }
  .day .time { font-family: var(--mono); font-size: 13px; color: var(--ink-40); }
  .day .desc { font-size: 17px; line-height: 1.45; color: var(--ink-60); }
  .day-note { font-size: 15px; color: var(--ink-40); margin-top: 24px; }
  @media (max-width: 820px) {
    .day { grid-template-columns: 44px 1fr; }
    .day .desc { grid-column: 2; }
  }

  /* ————— Methode (dunkel) ————— */
  .method { background: var(--ink); color: var(--paper); }
  .method .eyebrow { color: rgba(245,242,233,0.55); }
  .method .sec-head h2 { color: var(--paper); }
  .method .lead {
    font-size: 19px;
    line-height: 1.5;
    color: rgba(245,242,233,0.62);
    max-width: 56ch;
    margin-top: 28px;
  }
  .loop-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 16px;
    margin-top: 56px;
  }
  .loop-step {
    border: 1px solid rgba(245,242,233,0.22);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .loop-step .n { font-family: var(--mono); font-size: 13px; color: var(--yellow); }
  .loop-step h3 { font-size: 19px; letter-spacing: -0.3px; }
  .loop-step p { font-size: 15px; line-height: 1.45; color: rgba(245,242,233,0.62); flex: 1; }
  .loop-step .out {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.4;
    color: rgba(245,242,233,0.55);
    padding-top: 14px;
    border-top: 1px solid rgba(245,242,233,0.22);
  }
  .method .coda { font-size: 17px; color: rgba(245,242,233,0.62); margin-top: 40px; }
  @media (max-width: 1020px) { .loop-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .loop-grid { grid-template-columns: 1fr; } }

  /* ————— Ergebnis ————— */
  .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .result {
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    padding: 28px;
    background: var(--card);
  }
  .result .n { font-family: var(--mono); font-size: 13px; color: var(--ink-40); display: block; margin-bottom: 16px; }
  .result h3 { font-size: 20px; letter-spacing: -0.3px; margin-bottom: 10px; }
  .result p { font-size: 16px; line-height: 1.45; color: var(--ink-60); }
  @media (max-width: 820px) { .result-grid { grid-template-columns: 1fr; } }

  /* ————— Stimmen ————— */
  .voices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
  .voice {
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    background: var(--card);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .voice blockquote { font-size: 19px; line-height: 1.4; letter-spacing: -0.3px; flex: 1; }
  .voice:nth-child(1) { transform: rotate(-0.6deg); }
  .voice:nth-child(2) { transform: rotate(0.5deg); }
  @media (max-width: 820px) { .voices-grid { grid-template-columns: 1fr; } }

  /* ————— Facilitator ————— */
  .fac-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
  }
  .fac-grid .lead { font-size: 19px; line-height: 1.5; color: var(--ink-60); margin-top: 28px; max-width: 52ch; }
  .fac-quote {
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    background: var(--card);
    padding: 32px;
    margin-top: 26px;
  }
  .fac-quote p { font-size: 19px; line-height: 1.4; letter-spacing: -0.3px; margin-bottom: 20px; }
  .fac-print {
    position: relative;
    background: #FBF8F0;
    padding: 12px 12px 34px;
    border: 1px solid var(--ink-20);
    box-shadow: 0 18px 44px rgba(20,18,16,0.16);
    transform: rotate(-2deg);
    max-width: 330px;
  }
  /* 3/2 statt 3/4: der Rahmen war ursprünglich für ein Hochformat gebaut. Das
     Zeitungs-Motiv ist 1600×1062 — bei 3/4 wurde die Hälfte der Breite
     weggeschnitten, samt der Formeln, die der alt-Text beschreibt. */
  .fac-print .print-full {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .fac-print .print-caption { left: 12px; right: 12px; bottom: 10px; }
  @media (max-width: 960px) {
    .fac-grid { grid-template-columns: 1fr; gap: 48px; }
    .fac-print { margin: 0 auto; }
  }

  /* ————— Formate ————— */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: stretch; }
  .tier {
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    background: var(--card);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
  }
  .tier-hot { border: 2px solid var(--ink); }
  .tier-hot .flag {
    position: absolute;
    top: -13px; left: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: var(--yellow);
    padding: 4px 10px;
    border-radius: 3px;
  }
  .tier h3 { font-size: 22px; letter-spacing: -0.4px; }
  .tier .scope { font-family: var(--mono); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-40); }
  .tier .price { font-size: 34px; letter-spacing: -1px; font-weight: 500; }
  .tier .price small { font-size: 14px; font-weight: 400; color: var(--ink-40); letter-spacing: 0; }
  .tier ul { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .tier li { font-size: 15.5px; line-height: 1.4; color: var(--ink-60); padding-left: 18px; position: relative; }
  .tier li::before { content: '·'; position: absolute; left: 0; color: var(--ink-40); }
  .tier .btn, .tier .btn-ghost { text-align: center; }
  .tier-note { font-size: 14px; color: var(--ink-40); margin-top: 24px; }
  @media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

  /* ————— FAQ ————— */
  .faq-grid { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 64px; align-items: start; }
  .faq-grid h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -1.2px; }
  .faq-list { border-top: 1px solid var(--ink-20); }
  .faq-list details { border-bottom: 1px solid var(--ink-20); padding: 24px 0; }
  .faq-list summary {
    padding: 10px 0;
    margin: -10px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.3px;
    list-style: none;
    cursor: pointer;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-plus { font-family: var(--mono); font-size: 20px; color: var(--ink-40); transition: transform .25s; flex-shrink: 0; }
  details[open] .faq-plus { transform: rotate(45deg); }
  .faq-list details p { font-size: 17px; line-height: 1.5; color: var(--ink-60); margin-top: 16px; max-width: 60ch; }
  @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }

  /* ————— Anfrage ————— */
  .contact { background: var(--ink); color: #fff; }
  .contact .eyebrow { color: rgba(245,242,233,0.55); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .contact h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -1.4px; color: #fff; margin-top: 24px; }
  .contact .lead { font-size: 19px; line-height: 1.5; color: var(--white-60); margin-top: 28px; max-width: 46ch; }
  .contact-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--white-20);
    font-size: 15px;
    color: var(--white-60);
  }
  form { display: flex; flex-direction: column; gap: 16px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  input, textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--white-20);
    border-radius: 7px;
    padding: 13px 14px;
    color: #fff;
    font-family: var(--sans);
    font-size: 16px;
    transition: border-color .25s;
  }
  input::placeholder, textarea::placeholder { color: rgba(245,242,233,0.45); }
  input:focus, textarea:focus { outline: none; border-color: var(--pink); }
  textarea { resize: vertical; line-height: 1.5; }
  .form-note { font-size: 13px; line-height: 1.5; color: var(--white-60); }
  .thanks {
    display: none;
    border: 1px solid var(--white-20);
    border-radius: 10px;
    padding: 40px;
  }
  .thanks p:first-child { font-size: 22px; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 12px; }
  .thanks p:last-child { font-size: 16px; color: var(--white-60); }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } }
  @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

  /* ————— Footer ————— */
  footer { padding: 48px 0; border-top: 1px solid var(--ink-20); }
  .foot {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--ink-40);
  }
  .foot b { color: var(--ink); font-weight: 500; font-size: 15px; }
  .foot .links { margin-left: auto; display: flex; gap: 20px; }
  .foot .links a { display: inline-block; padding: 12px 0; }
  @media (hover: hover) { .foot a:hover { color: var(--violet); } }

/* v2: Zwei-Format-Preistabelle */
.tiers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .tiers-2 { grid-template-columns: 1fr; } }

/* v2: helle Cards innerhalb der dunklen method-Sektion */
.method .card p { color: rgba(20, 18, 16, 0.72); }

/* v2: langes Kompositum im H1 sprengt sonst die 1fr-Spalte bei sehr schmalen Viewports */
@media (max-width: 375px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 31px; letter-spacing: -1.2px; }
  .stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat { padding: 20px 16px; }
}

/* v2 visuals: Zyklus-SVG, Tag-6-Split, Split-Head mit Polaroid */
.zyklus-svg { margin-top: 56px; }
.zyklus-svg svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
@media (max-width: 700px) { .zyklus-svg { display: none; } }
.zyklus-svg + .day-list { margin-top: 40px; }
.split-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; margin-top: 8px; }
.split-fig .print { max-width: 420px; margin: 0 auto; }
@media (max-width: 960px) { .split-head { grid-template-columns: 1fr; gap: 44px; } }
.tag6-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.tag6-grid .day-list { order: 1; }
.tag6-grid .tag6-fig { order: 2; position: sticky; top: 100px; }
.tag6-fig .print { max-width: 420px; margin: 56px auto 0; transform: rotate(-1.6deg); }
@media (max-width: 960px) {
  .tag6-grid { grid-template-columns: 1fr; gap: 12px; }
  .tag6-grid .tag6-fig { order: 0; position: static; }
  .tag6-fig .print { margin-top: 40px; }
}

/* v2: Presse-Balken dominanter */
.press { padding: 36px 0; }
.press .wordmarks { opacity: 0.92; }
.press .wm-hb { font-size: 27px; }
.press .wm-wiwo { font-size: 26px; }
.press .wm-forbes { font-size: 26px; }

/* v2: Teufelskreis-Diagramm in Sektion 01 */
.luecke-fig svg { display: block; width: 100%; max-width: 430px; height: auto; margin: 0 auto; font-family: var(--sans); }

/* v3: generische lead/coda-Regeln (Kontext-Regeln wirken als Overrides) */
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-60); margin-top: 28px; }
.coda { font-size: 17px; color: var(--ink-60); margin-top: 40px; }

/* v3: Presse-Band mit echten Artikel-Links */
.press-sub { display: block; margin-top: 4px; letter-spacing: 0.6px; text-transform: none; color: var(--ink-40); }
.press-links a { transition: color .25s; }
@media (hover: hover) { .press-links a:hover { color: var(--violet); } }
.wm-arrow { font-size: 0.55em; vertical-align: 0.5em; margin-left: 4px; }
.wm-be { font-weight: 500; font-size: 25px; letter-spacing: -0.4px; }
.wm-t3n { font-weight: 500; font-size: 25px; letter-spacing: -0.2px; }

/* v3: Presse-Karten in der Facilitator-Sektion */
.press-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; max-width: 640px; }
.press-cards a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--ink-20);
  border-radius: 10px;
  background: var(--card);
  padding: 20px;
  transition: border-color .25s;
}
@media (hover: hover) { .press-cards a:hover { border-color: var(--ink-60); } }
.press-cards p { font-size: 15px; line-height: 1.45; color: var(--ink-60); flex: 1; }
@media (max-width: 640px) { .press-cards { grid-template-columns: 1fr; } }

/* v3: "Ihr Part"-Chip in der Tag-6-Agenda */
.part-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: var(--yellow);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 10px;
  vertical-align: 3px;
  white-space: nowrap;
}

/* v3: Stufen-Band (die falsche Schlange) */
/* Die Grafik ist aria-hidden. Die Liste bleibt deshalb im Accessibility-Tree,
   auch wenn sie auf breiten Schirmen visuell hinter der Grafik zurücktritt. */
.stufen-liste {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Grenze 859px (Fassung 6, 21.08.2026): Die Bahn-Grafik traegt bis dorthin
   hinunter — fuenf Spalten zu je rund 145 px, Beschriftung 14/12 px. Darunter
   uebernimmt die Liste. Vorher lag die Grenze bei 1180 px, weil das
   Warteschlangen-Foto die Stufen dort mittrug; das Foto ist raus.
   Dieselbe Zahl steht in `.bahn { display:none }` am Dateiende — beide Kanten
   muessen zusammen wandern, sonst steht die Sektion zwischendrin leer da. */
@media (max-width: 859px) {
  .stufen-liste {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
    list-style: none;
    counter-reset: stufe;
    border-top: 1px solid var(--ink-20);
  }
  /* FEHLERBEHEBUNG 20.08.2026 (Mobil-Umbau): Hier stand `display: flex` auf dem
     <li>. Damit wird JEDES Kind des Listenpunkts zu einem eigenen Flex-Element —
     also die beiden <b> und die Textstuecke dazwischen. Aus einer Zeile wurden
     bis zu vier nebeneinanderstehende Spalten; bei 390 px blieben ihnen rund
     80 px, und "Die Werkzeuge sind da." brach als "Die Werk-zeuge sind da."
     ueber drei Zeilen. Gemessen auf den Aufnahmen m390-04.
     Die Ziffer steht jetzt absolut in der linken Spalte, der Text laeuft als
     normaler Fliesstext ueber die volle Breite. `padding-left` haelt die Spalte
     frei; `top` haengt die Ziffer an die erste Textzeile (16 px Innenabstand +
     Differenz der Grundlinien von 13-px-Mono und 16-px-Fliesstext). */
  .stufen-liste li {
    counter-increment: stufe;
    display: block;
    position: relative;
    padding: 16px 0 16px 34px;
    border-bottom: 1px solid var(--ink-20);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-60);
  }
  .stufen-liste li::before {
    content: "0" counter(stufe);
    position: absolute;
    left: 0;
    top: 17px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-40);
  }
  .stufen-liste b { font-weight: 500; color: var(--ink); }
  .stufen-liste li:last-child b { background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 96%, transparent 96%); }
}

/* ═══ v5: Umbau auf 5 Sektionen (Gefahr → Credibility → Ablauf → Ergebnis → Kontakt) ═══ */

/* Presse-Band innerhalb der Fabian-Sektion */
.press-inline {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  margin-top: 64px;
  padding: 28px 0;
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}
.press-inline .eyebrow { flex-shrink: 0; }
.press-inline .wordmarks { opacity: 0.92; }
.press-inline .wm-hb { font-size: 24px; }
.press-inline .wm-wiwo { font-size: 23px; }
.press-inline .wm-be, .press-inline .wm-t3n { font-size: 22px; }

/* Presse-Karten: vier Belege nebeneinander, volle Breite */
.pc-4 { grid-template-columns: repeat(4, 1fr); max-width: none; margin-top: 24px; }
@media (max-width: 900px) { .pc-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pc-4 { grid-template-columns: 1fr; } }


/* Erster Schritt: drei nummerierte Zeilen in der dunklen Kontaktsektion */
.first-steps { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.first-steps p {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--white-60);
}
.first-steps .num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--yellow);
  flex-shrink: 0;
  min-width: 18px;
}

/* Ablauf-Liste: Gate/Tage statt Uhrzeiten — etwas mehr Platz in der ersten Spalte */
#ablauf .day { grid-template-columns: 96px 1fr 1.4fr; }
#ablauf .day .num { white-space: nowrap; }
@media (max-width: 820px) { #ablauf .day { grid-template-columns: 76px 1fr; gap: 20px; } }

/* Hero: die konkrete Zusage direkt unter dem Aufschlag */
.hero-fakt {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 3px solid var(--yellow);
  background: var(--card);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 56ch;
}
.hero-fakt b { font-weight: 500; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   v6: Sektion 02 „Die Hypothesen", Stimmen-Band, Nav mit sechs Links
   Ans Dateiende, weil main.css append-only gewachsen ist (v2 ab 677,
   v3 ab 720, v5 ab 817). Früher platziert würden ältere Overrides gewinnen.
   ═══════════════════════════════════════════════════════════════════ */

/* Ersetzt die fünf Inline-scroll-margin-top an den Sektionen. */
main > section { scroll-margin-top: 72px; }

/* Nav trägt jetzt sechs Links. Gemessen reicht die Breite erst ab ~1060 px;
   deshalb blenden die Links schon bei 1024 px aus statt bei 900 px. Nur
   display, nicht der Padding-Wechsel — der bleibt bei 900 px. */
@media (max-width: 1024px) { .nav-links { display: none; } }

/* ————— Thesenliste: gleiche Spaltenlogik wie #ablauf ————— */
#hypothesen .day { grid-template-columns: 96px 1fr 1.4fr; }
#hypothesen .day .num { white-space: nowrap; }
#hypothesen .day h3 { font-size: 21px; line-height: 1.2; }
@media (max-width: 820px) { #hypothesen .day { grid-template-columns: 76px 1fr; gap: 20px; } }

/* Die Frage, mit der jede These endet, trägt die Sektion. */
.hypo-frage { display: block; margin-top: 14px; color: var(--ink); font-weight: 500; }

/* ————— Diagramme: breite Fassung (Desktop) und schmale (darunter) —————
   Das Stufen-SVG in Sektion 01 verschwindet unter 1180 px, weil seine festen
   SVG-Schriftgrößen linear mitschrumpfen. Hier stattdessen zwei Geometrien:
   die breite skaliert konstant (14,7/12,8 px), die schmale ist auf 400 px
   gedeckelt und bleibt bei 390 px Viewport bei 12,8 px. Beide Fassungen sind
   aria-hidden, die Textfassung .fig-liste bleibt durchgehend im
   Accessibility-Tree (Clip-Technik, nie display:none — WCAG 1.1.1). */
.fig-titel { font-size: 20px; letter-spacing: -0.4px; margin-top: 72px; }
.fig-wide, .fig-narrow { margin-top: 22px; }
.fig-wide svg, .fig-narrow svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.fig-narrow { display: none; }
.fig-narrow svg { max-width: 400px; margin: 0 auto; }
@media (max-width: 1180px) {
  .fig-wide { display: none; }
  .fig-narrow { display: block; }
}
.fig-liste {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sektion 02 endet flacher, weil direkt darunter das Stimmen-Band ansetzt. */
#hypothesen { padding-bottom: 56px; }

/* ————— Stimmen-Band zwischen 02 und 03 ————— */
.stimmen {
  padding: 48px 0;
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}
.stimmen .voices-grid { margin-top: 20px; }

/* ═══ v6: Lesbarkeit der Verlaufs-Schrift im Hero ═══
   Der dekorative Verlauf --grad startet mit #F350A6. Als Textfarbe erreicht das
   auf Papier nur 2,88:1 und verfehlt die 3:1-Schwelle für grosse Schrift
   (WCAG 1.4.3). Die Textvariante startet deshalb dunkler: #D93B93 kommt auf
   3,75:1 auf Papier und 3,39:1 auf Gelb. --grad selbst bleibt unveraendert,
   damit dekorative Flaechen ihre Farbe behalten. */
:root { --grad-text: linear-gradient(90deg, #D93B93 0%, #9B4FE0 100%); }
.grad-text { background-image: var(--grad-text); }

/* Ueber Mint besteht kein Ton dieses Verlaufs die 3:1 (Pink 2,75, Violett 2,99).
   Die Blobs liegen deshalb nur noch hinter den ersten beiden Zeilen der H1,
   nie hinter der Verlaufszeile. */
.hero .blob-yellow { height: 160px; }
.hero .blob-mint { width: 210px; height: 112px; top: 26px; }
/* 960px ist der Punkt, ab dem der Hero einspaltig wird und die H1 nach oben
   rutscht. Ab hier muessen die Blobs enger sitzen, sonst liegen sie wieder
   hinter der Verlaufszeile. */
@media (max-width: 960px) {
  .hero .blob-yellow { width: 300px; height: 82px; top: -24px; }
  .hero .blob-mint { width: 176px; height: 70px; top: 4px; left: -58px; }
}

/* ═══ v6: Hero-Druck ohne den eingebrannten Schriftzug ═══
   „Prove it. Then decide." stammt aus der alten Positionierung und liegt im JPEG
   ueber dem Torso, laesst sich also nicht wegretuschieren. Der Rahmen beschneidet
   das Bild deshalb oberhalb des Schriftzugs (Quelle 1600x1062, Schnitt bei 845).
   Die Zeile steht jetzt als echter Text in der Bildunterschrift und ist damit
   jederzeit aenderbar. */
.hero .print-img { aspect-ratio: 1600 / 845; object-position: top; }
.hero .print-caption span:first-child {
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -0.4px;
  text-transform: none;
  color: var(--ink);
}
.hero .print { padding-bottom: 58px; }
.hero .print-caption { bottom: 16px; align-items: baseline; }

/* Der beschnittene Druck ist flacher als vorher (1,89 statt 1,51). Damit er im
   Hero nicht gegen die H1 abfaellt, bekommt die Bildspalte etwas mehr Breite. */
@media (min-width: 961px) {
  .hero-figure .print { width: 118%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UMBAU 18.08.2026 — 14-Tage-Mandat. Neue Bausteine, ans Dateiende, weil
   main.css append-only gewachsen ist: der letzte Block gewinnt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Vier Zahlen unter dem Hero — der Handel im ersten Bildschirm ─────────── */
.hero-zahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 20px; margin-top: 30px;
  padding-top: 26px; border-top: 1px solid var(--ink-20);
}
.hero-zahlen div { display: flex; flex-direction: column; gap: 4px; }
.hero-zahlen b { font-size: 21px; font-weight: 500; letter-spacing: -0.5px; color: var(--ink); }
.hero-zahlen span { font-size: 13.5px; line-height: 1.35; color: var(--ink-60); }
@media (max-width: 900px) { .hero-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Ein Preis statt zwei Pakete ──────────────────────────────────────────── */
.tiers-1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── Zwischenüberschriften im Ablauf ──────────────────────────────────────── */
.ablauf-h3 {
  font-size: 15px; font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-40); margin-top: 56px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-20);
}
.ablauf-h3 + .day-list { margin-top: 0; }

/* ── „Was hier nicht passiert" — M9 verlangt den Ausschluss sichtbar ──────── */
.ausschluss {
  margin-top: 56px; padding: 30px 32px;
  border: 1px solid var(--ink-20); border-radius: 10px; background: var(--card);
  max-width: 72ch;
}
.ausschluss h3 { font-size: 22px; letter-spacing: -0.4px; margin-bottom: 12px; }
.ausschluss p { font-size: 16.5px; line-height: 1.55; color: var(--ink-60); }
.ausschluss b { color: var(--ink); font-weight: 500; }
@media (max-width: 420px) { .ausschluss { padding: 22px 20px; } }

/* ── Bestätigung der Weitergabe im Formular ───────────────────────────────── */
.form-check { display: flex; gap: 10px; align-items: center; margin-top: 4px;
  min-height: 44px; } /* Tapziel: einzeilig waren es 21 px (WCAG 2.5.8 verlangt 24) */
.form-check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--ink); }
.form-check span { font-size: 14px; line-height: 1.45; color: var(--ink-60); }

/* ── Presse-Karten mit Motiv ──────────────────────────────────────────────
   height:auto ist Pflicht: die width/height-Attribute im <img> wirken als
   Presentational Hint und schlagen sonst die aspect-ratio. */
.pc-img a { padding: 0; overflow: hidden; gap: 0; }
.pc-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 1px solid var(--ink-20);
}
.pc-img p { padding: 18px 18px 0; }
.pc-img .eyebrow { padding: 12px 18px 18px; }
/* -- Presse-Karten am Telefon: Zeile mit Miniatur statt Bildteppich ----------
   Gemessen am Stand vom 20.08.2026: einspaltig mit 3:2-Collage in voller Breite
   brauchen die vier Karten 1.469 px (1,74 Bildschirme bei 390 px) und ziehen
   737 kB - das sind 38,9 % des gesamten Mobil-Gewichts fuer vier Schlagzeilen.
   Grund fuer das Gewicht: `sizes` sagte 90vw, das sind bei 390 px 351 CSS px,
   mal dpr 3 = 1.053 Geraetepixel - der Browser waehlt dann die 1120w-Fassung.
   Eine weitere srcset-Sprosse haette daran nichts geaendert (840 / 351 = 2,39,
   also unter dpr 3); der Hebel ist die Darstellungsbreite selbst.
   Die Collage bleibt sichtbar, sie traegt die Bildsprache - aber als Beleg
   neben der Schlagzeile, nicht als Aufmacher darueber. Seitenverhaeltnis 3:2
   bleibt, damit nichts angeschnitten wird. */
@media (max-width: 640px) {
  .pc-img a {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 14px;
    overflow: visible;
  }
  .pc-img img {
    grid-column: 1;
    grid-row: 1;
    width: 104px;
    height: auto;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--ink-20);
    border-radius: 6px;
  }
  .pc-img p { grid-column: 2; grid-row: 1; padding: 0; font-size: 15.5px; line-height: 1.42; }
  /* Die Quellzeile laeuft ueber die volle Breite: in der 200 px schmalen
     Textspalte brach 'BRAND EINS - THEMA BERATER 2026' zweizeilig um, und
     gesperrte Versal-Mono liest sich im Umbruch schlecht. */
  .pc-img .eyebrow { grid-column: 1 / -1; grid-row: 2; padding: 10px 0 0; }
  .press-cards { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL-BLOCK (Session „PM mobil") — PROTOTYP, misst gegen den Stand vom 18.08.
   Steht bewusst am Dateiende: main.css ist append-only gewachsen, der letzte
   Block gewinnt. Alles hier gilt nur unterhalb der jeweiligen Grenze.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── M1: Zweispaltige Listen sind auf dem Telefon eine leere Spalte —————
   .day teilt 76 px + 20 px Abstand ab. Auf 390 px bleiben der Beschreibung
   250 px von 346 px (28 % weg), auf 320 px nur 180 px. Ergebnis gemessen:
   Absätze mit 12–18 Zeilen à 18–26 Zeichen. Unter 640 px steht die Nummer
   deshalb als eigene Zeile über dem Titel, der Text nimmt die volle Breite. */
@media (max-width: 640px) {
  #ablauf .day,
  #hypothesen .day,
  .day-list .day {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 26px 0;
  }
  .day .num {
    grid-column: 1;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .day .desc { grid-column: 1; margin-top: 6px; }
  .day h3 { font-size: 20px; line-height: 1.22; }
  #hypothesen .day h3 { font-size: 20px; }
}

/* ── M2: Überlauf ab ~150 % Browser-Zoom —————————————————————————
   Gemessen: bei 260 px effektiver Breite 17 px Überlauf, bei 195 px 82 px.
   Verursacher sind feste 32-px-Innenabstände und lange Komposita, die die
   Mindestbreite über den Viewport heben. */
@media (max-width: 420px) {
  .voice, .fit, .tier, .fac-quote { padding: 22px 20px; }
  .card, .result, .hebel { padding: 22px 20px; }
  .voice blockquote, .day .desc, .lead, .sub, .card p, .result p { overflow-wrap: break-word; }
  h1, h2, h3 { overflow-wrap: break-word; }
  .foot .links { margin-left: 0; flex-wrap: wrap; gap: 4px 20px; }
}

/* ── M3: Die Seite ist auf dem Telefon doppelt so lang wie am Schirm ————
   Gemessen: 18.387 px = 21,8 Bildschirme (iPhone 14) gegen 11,8 am Desktop.
   Die Sektionsabstände (96 px oben und unten) gehen unverändert aufs Telefon;
   dort ist das ein Fünftel Bildschirm reine Luft pro Kante. */
@media (max-width: 640px) {
  section { padding: 60px 0; }
  .hero { padding: 40px 0 56px; }
  #hypothesen { padding-bottom: 40px; }
  .stimmen { padding: 36px 0; }
  .sec-head h2 { margin-top: 16px; }
  .cards-3, .hebel-grid, .result-grid, .voices-grid, .tiers, .day-list { margin-top: 32px; }
  .fig-titel { margin-top: 44px; }
  .press-inline { margin-top: 40px; padding: 20px 0; }
  .press-cards { margin-top: 20px; }
  .hero .cta-row { margin-top: 32px; }
  .hero .sub { margin-top: 14px; }
  .first-steps { margin-top: 28px; }
  footer { padding: 32px 0; }
  .fac-grid { gap: 32px; }
  .split-head { gap: 32px; }
}

/* ── m2: Anker landeten 1 px unter der Headerkante (72 gegen 73 px) ————
   Dazu etwas Luft, damit die Überschrift nicht an der Kante klebt. */
main > section { scroll-margin-top: 88px; }

/* ── m3: Das Logo ist ein 96×27-px-Tapziel ——————————————————————— */
@media (max-width: 1024px) {
  .nav .logo { padding: 10px 0; }
}

/* ── m4: 11-px-Bildunterschriften sind für die Zielgruppe zu klein ————
   Zielgruppe ist 45–60+; 11 px Mono in Versalien mit Sperrung liest sich am
   Telefon schlecht. 12 px ist die untere Grenze, die hier vertretbar ist. */
@media (max-width: 640px) {
  .print-caption, .tier .flag, .part-chip, .logo span { font-size: 12px; }
  .eyebrow { letter-spacing: 1px; }
}

/* ── m8: Der Aufruf gehört auf dem Telefon in die Daumenzone ————————— */
@media (max-width: 560px) {
  .hero .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .cta-row .btn { text-align: center; padding: 16px 20px; }
}

/* ── Ablauf-Tabelle: drei Spalten am Schirm, zwei Zeilen am Telefon ————————
   Gemessen bei 320 und 390 px: Die dreispaltige Fassung
   lässt dem Vorgangstext bei 320 px 112 px — zwölf Zeichen pro Zeile — und wird
   dabei um ein Drittel höher als die zweizeilige Fassung. Unter 640 px steht der
   Tag links, die Markierung rechts am Rand, der Vorgang darunter über die volle
   Breite: 346 statt 182 px, höchstens zwei Zeilen statt vier.
   Der Bogen mit uns / allein / Ihr Haus bleibt rechts scanbar. */
.ablauf-zeile { padding: 16px 0; border-bottom: 1px solid var(--ink-20); }
.ablauf-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.ablauf-kopf .tag { color: var(--ink); }
.ablauf-kopf .mk { color: var(--ink-40); flex-shrink: 0; }
/* Am Telefon sprangen die acht Punkte um 17 px, weil .mk rechtsbuendig ist und
   "mit uns" (74 px), "allein" (65) und "Ihr Haus" (82) verschieden breit sind.
   ("mit uns" hat dieselbe Zeichenzahl wie das fruehere "mit ihm", Mono-Schrift —
   die gemessene Breite und damit min-width: 82px bleiben unveraendert gueltig.)
   Eine feste Kastenbreite in Hoehe des breitesten Labels setzt alle auf x = 286;
   die rechte Kante bleibt buendig, die Textspalte unveraendert 346 px.
   Gemessen von "PM mobil" nach dem Umbau, Ueberlauf weiter 0. */
@media (max-width: 640px) {
  .ablauf-kopf .mk { min-width: 82px; text-align: left; }
}

/* ── Die Marke ist binaer: gefuellt = wir im Raum, hohl = ohne uns ————————
   Keine Farbcodierung. Mint (#8FE3AA) ist auf dieser Seite bereits vergeben —
   es ist Ebene 3 "ohne Fabian". Dieselbe Farbe
   auf "Ihr Haus" zu legen, also auf Ebene 2, gaebe einem Zeichen zwei benachbarte
   Bedeutungen. Die drei Ebenen-Karten bleiben so das einzige Farbsystem der Seite.
   Die Beschriftung daneben unterscheidet weiter "allein" von "Ihr Haus".

   Groesse und Farbe sind gemessen, nicht geschaetzt (echte Geraetepixel bei 320 px, dpr 1/1,5/2/3, mit und
   ohne Papierkorn, vier Unschaerfestufen bis zu 20/40-Sehschaerfe):
   · Was das Loch lesbar macht, ist die BOXGROESSE, nicht die Ringstaerke. Ein
     dickerer Ring frisst das Loch: 8 px mit 2-px-Rand ist die schlechteste aller
     Fassungen (der hohle Punkt behaelt 74 % der Tinte des gefuellten).
     Gemessen bei echtem Device-Scale-Factor, schlechtester Fall je Fassung
     (Aussenmass/Ring): 6/1 = 0,63 · 7/1,5 = 0,66 · 8/2 = 0,65 · 8/1 = 0,90 ·
     9/1 = 0,97. Alle Angaben sind AUSSENMASSE.
   · Die Obergrenze ist die Versalhoehe der Beschriftung daneben: 8,75 px bei
     12 px Mono (gemessen). 9 px waere besser lesbar, wuerde die Grossbuchstaben
     aber ueberragen — die Marke soll die Zeile markieren, nicht anfuehren.
     Deshalb 8 px.
   · KEIN 1,5-px-Rand — und der Grund ist ein anderer, als ich zuerst geschrieben
     hatte. Die Rundung geht auf GERAETEPIXEL, nicht auf CSS-Pixel: gemessen mit
     --force-device-scale-factor ergibt border:1.5px bei dpr 1 = 1px, bei dpr 2 =
     1.5px, bei dpr 3 = 1.33333px. Drei Geraeteklassen, drei Ringstaerken. (Meine
     erste Messung sah ueberall 1px, weil CDP-Emulation mit DSF 1 layoutet und erst
     beim Rastern hochskaliert — ein Messfehler, kein Browserverhalten. Der Befund
     stammt von "PM ablauf + webseite" und ist nachgeprueft.)
     Es ist nicht nur eine Konsistenzfrage: bei echtem dpr 2 frisst der 1,5-px-Ring
     das Loch, das er umschliesst — dieselbe Fassung faellt von LOCH 0,78 auf 0,66.
   · box-sizing MUSS in dieser Regel stehen. `* { box-sizing: border-box }`
     (main.css:41) erfasst KEINE Pseudoelemente — dafuer braeuchte es
     `*, *::before, *::after`. Ohne die Zeile hier waere die Marke content-box:
     8 px Inhalt plus 2 x 1 px Rand = 10 px aussen, also 1,25 px ueber der
     Versalhoehe statt darunter. Nachgemessen, ebenfalls ein Befund von
     "PM ablauf + webseite".
   · Die Marke muss var(--ink) sein. In var(--ink-40) — der Textfarbe der Spalte —
     faellt sie bei 20/40-Sehschaerfe unter die Sichtbarkeitsschwelle: der Ring
     erreicht nur noch 0,17-0,18 statt 0,28 gegen das Papier. Zielgruppe ist 45-60+.
   · Gefuellt und hohl haben identische Aussenmasse — nicht wegen border-box,
     sondern weil beide denselben 1-px-Rand tragen; beim gefuellten liegt nur
     zusaetzlich Farbe darunter. Die Spalte springt deshalb nicht.
   Markup: mit uns = <span class="mk mk-uns">, allein/Ihr Haus = <span class="mk">. */
.ablauf-kopf .mk::before {
  content: ''; display: inline-block; box-sizing: border-box;
  width: 8px; height: 8px; border-radius: 999px;
  border: 1px solid var(--ink); background: transparent;
  margin-right: 8px; vertical-align: 0;
}
.ablauf-kopf .mk-uns::before { background: var(--ink); }
.ablauf-zeile .txt { font-size: 16.5px; line-height: 1.45; margin-top: 6px; }

@media (min-width: 641px) {
  .ablauf-zeile {
    display: grid; grid-template-columns: 96px 1fr 92px; gap: 24px; align-items: baseline;
  }
  .ablauf-kopf { display: contents; }
  /* Linksbuendig, damit die acht Marken am Schirm eine senkrechte Linie bilden.
     Rechtsbuendig staffeln sie sich, weil "mit uns", "allein" und "Ihr Haus"
     verschieden breit sind — dann ist der Wechsel nicht mehr auf einen Blick
     lesbar. Am Telefon bleibt es rechtsbuendig: dort steht je Zeile nur eine
     Marke am Rand. Aenderung von "PM webseite", gemessen am gebauten Stand. */
  .ablauf-kopf .mk { text-align: left; order: 3; }
  .ablauf-zeile .txt { margin-top: 0; font-size: 17px; }
}

/* ── Nachträge aus der Schlussmessung gegen den Live-Stand ────────────────────
   Beide Befunde von „PM mobil", gemessen, nicht geschätzt. */

/* Der Logo-Link war am Schirm 234 x 27 px. Die frühere Regel griff nur bis
   1024 px, der Befund gilt aber an jeder Breite. An der Maus unkritisch,
   an Touch-Notebooks nicht. */
.nav .logo { padding: 10px 0; }

/* 200 % Browser-Zoom lief über: 44 px bei 390, 24 px bei 430. Verursacher
   gemessen — die fetten Marken in der Stufen-Leiter, der Nav-Knopf und die
   Karten in #gefahr. Bei 200 % bleibt einer Zeile so wenig Platz, dass ein
   einziges langes Kompositum die Mindestbreite über den Viewport hebt.
   150 % war schon sauber; das ist der Fall, der für die Zielgruppe zählt,
   200 % ist der, den WCAG 1.4.4 verlangt. */
@media (max-width: 420px) {
  .stufen-liste li, .stufen-liste li b,
  .card, .card p, .card span,
  .btn, .nav .btn { overflow-wrap: anywhere; hyphens: auto; }
  .nav .btn { white-space: normal; }
}

/* ── Methoden-Band zwischen 02 und 03 ─────────────────────────────────────────
   Erklärt, warum der Ablauf so aussieht, unmittelbar bevor er kommt. Nutzt das
   Band-Gerüst des früheren Stimmen-Bands, damit kein neues Layoutsystem entsteht. */
.sokrates { padding: 56px 0; }
.sok-satz {
  font-size: clamp(24px, 3vw, 36px); line-height: 1.16; letter-spacing: -0.9px;
  font-weight: 500; max-width: 34ch; margin-top: 14px;
}
.sok-text {
  font-size: 17.5px; line-height: 1.55; color: var(--ink-60);
  max-width: 60ch; margin-top: 20px;
}
@media (max-width: 640px) {
  .sokrates { padding: 40px 0; }
  .sok-text { font-size: 16.5px; margin-top: 16px; }
}

/* Poster im Methoden-Band: schmaler als die Sektionsbilder, sonst erschlägt es
   den Text. height:auto ist Pflicht — width/height im <img> schlagen sonst die
   Seitenverhältnis-Regel (derselbe Fehler wie bei den Presse-Karten). */
.sok-print { max-width: 340px; margin-left: auto; }
.sok-print .print-full { display: block; width: 100%; height: auto; }
.sokrates .split-head { gap: 56px; align-items: center; }
@media (max-width: 960px) { .sok-print { max-width: 300px; margin: 0 auto; } }


/* ── Company-BRAIN-Umbau 19.08.2026 ─────────────────────────────────────────
   Zwei kleine Ergänzungen im Bestandsstil, sonst nichts: ein 2er-Kartenraster
   für die Gegenüberstellung der beiden Leitfragen (Sektion 01) und die schmale
   Trust-Zeile über den CEO-Stimmen. Beide nutzen die vorhandenen Tokens. */
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 820px) { .cards-2 { grid-template-columns: 1fr; } }

.trust-zeile {
  display: flex; align-items: baseline; gap: 28px;
  padding-bottom: 28px; margin-bottom: 28px;
  border-bottom: 1px solid var(--ink-20);
}
.trust-zeile b {
  font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -1px;
  color: var(--ink); white-space: nowrap;
}
.trust-zeile span { font-size: 15.5px; line-height: 1.5; color: var(--ink-60); max-width: 62ch; }
@media (max-width: 700px) {
  .trust-zeile { flex-direction: column; gap: 10px; }
  .trust-zeile b { white-space: normal; }
}

/* Der neue Nav-CTA „KI-Coaching anfragen" ist länger als „Gespräch anfragen"
   und bricht unterhalb von ~385 px um (gewollter Wrap-Mechanismus aus dem
   420px-Zoom-Fix oben). Gemessen bei 320: 66 px hoch im 72-px-Header — zu
   voll. Deshalb nur im Umbruchbereich kompakt: 13 px, engere Polster,
   zentriert; einzeilig ab ~361 px, zweizeilig 54 px statt 66 px darunter. */
@media (max-width: 389px) {
  .nav .btn { font-size: 13px; padding: 10px 12px; line-height: 1.3; text-align: center; }
}

/* Nav-Regression aus dem V2-Vergleich (gemessen bei 1440): Logo (311px, längeres
   Wortpaar) und CTA (186px) sind breiter als in V2 — bei Basis-Gaps 28/22 fehlen
   der Zeile ~0-30px und die Flexbox bricht Links UND Button zweizeilig um.
   Engere Gaps nur im Desktop-Bereich (Links sind unter 901px ohnehin versteckt):
   Bedarf sinkt auf ~1050px, einzeilig ab ~1130px Viewport wie in V2. */
@media (min-width: 901px) {
  .nav { gap: 22px; }
  .nav-links { gap: 16px; }
}

/* ── Wandel-Figur (19.08. Video, seit 20.08.2026 die gelieferte
   Einbahnstraße/Kreislauf-Grafik). Der Rahmen folgt den Print-Karten:
   Karton-Fläche, feine Kante, runde Ecken. ── */
.wandel-fig { margin-top: 36px; }
.wandel-fig video,
.wandel-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--ink-20, rgba(20,18,16,0.2));
  background: #FCFAF3;
}

/* ── Drei-Hebel-Hervorhebung (Feedback 19.08.2026 spät): die Hebel sind der
   Kern der Seite. Eigene Headline statt Eyebrow, Karten größer, Farbkante
   und Rahmen kräftiger — der Kartentext selbst bleibt unverändert. ── */
.hebel-head {
  margin-top: 96px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -1px;
  max-width: 24ch;
}
.hebel-grid.hebel-kern { margin-top: 32px; gap: 24px; }
.hebel-kern .hebel {
  padding: 40px 32px 36px;
  border-color: var(--ink);
  box-shadow: 0 1px 3px rgba(20,18,16,0.08);
}
.hebel-kern .hebel::before { height: 10px; }
.hebel-kern .hebel h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.6px; line-height: 1.15; }
.hebel-kern .hebel p { font-size: 17px; line-height: 1.55; }
@media (max-width: 640px) {
  .hebel-head { margin-top: 64px; }
  .hebel-kern .hebel { padding: 30px 24px 28px; }
}
@media (max-width: 420px) {
  .hebel-kern .hebel { padding: 24px 20px; }
}

/* ── Dominantes Einzel-Zitat im Stimmen-Band (Feedback 20.08.2026): ersetzt
   das Zwei-Karten-Raster (.voices-grid). Große Zitatform nach dem
   .bigquote-Vorbild, wegen des längeren Wortlauts eine Stufe kleiner. ── */
.stimme-solo { margin-top: 24px; }
.stimme-solo blockquote {
  font-size: clamp(21px, 2.4vw, 31px);
  line-height: 1.28;
  letter-spacing: -0.7px;
  font-weight: 500;
  max-width: 52ch;
}
.stimme-solo .day-note { margin-top: 20px; }
.stimme-solo .day-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* ── V4 (Auftrag 20.08.2026): Hero-Vertrauenszeile, Vorteile-Band unter dem
   Hero, Von/Zu-Paare und Company-BRAIN-Definitionsblock. Alles auf den
   Bestandstokens, keine neuen Farben. ── */
.hero-trust {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 18px;
}
.vorteile { padding: 40px 0 56px; }
.vorteile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.vorteil {
  border: 1px solid var(--ink-20);
  border-radius: 10px;
  background: var(--card);
  padding: 22px 20px;
}
.vorteil h3 { font-size: 17px; letter-spacing: -0.2px; }
.vorteil p { font-size: 15.5px; line-height: 1.45; color: var(--ink-60); margin-top: 8px; }
@media (max-width: 1000px) { .vorteile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vorteile-grid { grid-template-columns: 1fr; } }

.vonzu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; margin-top: 44px; }
.vonzu { border-left: 3px solid var(--ink-20); padding: 4px 0 4px 18px; }
.vonzu span { display: block; font-size: 16px; color: var(--ink-40); }
.vonzu b { display: block; font-weight: 500; font-size: 19px; letter-spacing: -0.3px; margin-top: 2px; }
@media (max-width: 700px) { .vonzu-grid { grid-template-columns: 1fr; gap: 14px; } }

.brain-def { margin-top: 80px; }
.brain-list p { font-weight: 500; font-size: 17px; line-height: 1.4; }
.brain-list ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.brain-list li { font-size: 16px; line-height: 1.45; color: var(--ink-60); padding-left: 18px; position: relative; }
.brain-list li::before { content: '·'; position: absolute; left: 0; color: var(--ink-40); }

.contact-line { color: var(--white-60); font-size: 17px; line-height: 1.5; margin-bottom: 28px; }

/* V4: Der längere Nav-CTA („Vertrauliches Erstgespräch", 219 statt 186 px)
   kippte die Zeile unterhalb ~1150 px. Engere Gaps stellen die bisherige
   Einzeilig-Schwelle (~1130 px) wieder her; am Desktop bricht der Button
   nie intern um (unter 390 px gilt weiter die Kompaktregel mit Umbruch). */
@media (min-width: 901px) {
  .nav { gap: 18px; }
  .nav-links { gap: 14px; }
  .nav > .btn { white-space: nowrap; }
}

/* 5-Sekunden-Test 20.08.2026, drei kleine Fold-Fixes:
   1. Absender-Zeile (einziger Glaubwürdigkeits-Anker im Fold, alle 5 Bewerter),
   2. H1-Zeilenfall ohne Waisen-Wort „darüber." — text-wrap: pretty statt
      balance (balance verkürzte ALLE Zeilen, H1 wurde 6-zeilig; gemessen
      20.08.). Progressive enhancement, ältere Engines ignorieren es,
   3. Hero-Eyebrow dunkler — die Zeile läuft über den gelben Blob und war die
      kontrastschwächste im Fold. */
.hero-absender { font-size: 15px; line-height: 1.5; color: var(--ink-60); margin-top: 14px; max-width: 52ch; position: relative; }
#hero-h1 { text-wrap: pretty; }
.hero .eyebrow { color: var(--ink-60); }
/* Die V4-Headline ist mit 82 Zeichen fast doppelt so lang wie die alte (46) —
   bei 66px/16ch wurde sie eine 6-zeilige Wand. Moderat kleiner und breiter;
   „Entscheidungen darüber." bleibt am Desktop zusammen, unter 560px gibt der
   nowrap frei (sonst Überlauf der 23-Zeichen-Gruppe). */
.hero h1 { font-size: clamp(38px, 4vw, 52px); max-width: 24ch; }
.hero h1 .zusammen { white-space: nowrap; }
@media (max-width: 560px) {
  .hero h1 .zusammen { white-space: normal; }
}

/* Prüflauf 20.08.2026: die neuen V4-Textcontainer in den bestehenden
   Zoom-/Umbruchschutz aufnehmen (Muster von M2 oben, break-word wie Bestand) —
   lange Komposita („Bewertungsfähigkeit", „Entscheidungssituation") liefen
   sonst bei 200 % Zoom über. Dazu die Eyebrow-als-H2-Optik in #vorteile. */
@media (max-width: 420px) {
  .vorteil, .vonzu, .stimme-solo, .contact-line, .hero-trust, .hero-absender, .brain-list {
    overflow-wrap: break-word;
  }
}
.vorteile h2.eyebrow { font-weight: 400; margin: 0; }

/* ── 20.08. zweiter Schwung: Logo-Untertitel „Executive AI Transformation" ist
   5 Zeichen länger als „Mentoring" und quetschte die Nav-Links bei 1440 in
   interne Zweizeiler. Links nie intern umbrechen; im engen Fenster 901–1200 px
   Gaps weiter reduzieren (Nav-Links sind unter 1025 px ohnehin versteckt). */
@media (min-width: 901px) {
  .nav-links a { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .nav { gap: 12px; }
  .nav-links { gap: 10px; }
}
/* Gegenstück zum nowrap: unterhalb der Passt-Schwelle Links ganz verstecken
   (verlängert das Bestandsmuster „Links weg unter 1025 px" nach oben). */
@media (max-width: 1129px) {
  .nav-links { display: none; }
}

/* ── Studien-Block MIT NANDA (Wunsch 20.08.2026) ──
   Bewusst die auffälligste Fläche im Gefahr-Abschnitt: dunkle Karte gegen den
   hellen Untergrund, damit die Studie nicht mehr wie eine Fußnote aussieht.
   Baut nur auf vorhandenen Tokens auf (--white-20/--white-60/--paper/--yellow);
   die rgba-Literale der ersten Fassung sind nach Prüfbefund 8 ersetzt. */
.studie {
  margin-top: 56px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 40px 40px 32px;
}
.studie-kicker {
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--white-60);
}
.studie-title {
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -1.4px;
  font-weight: 500;
  margin-top: 10px;
}
.studie-title span {
  display: block;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--white-60);
  margin-top: 10px;
}
.studie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--white-20);
}
.studie-block h4 {
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--yellow);
}
.studie-block ul { list-style: none; margin-top: 16px; }
.studie-block li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
}
.studie-block li + li { margin-top: 13px; }
.studie-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--yellow);
}
.studie-block li b { color: var(--paper); font-weight: 500; }
.studie-band {
  margin-top: 32px;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
}
.studie-quelle {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--white-60);
}
@media (max-width: 900px) {
  .studie { padding: 30px 24px 26px; margin-top: 40px; }
  .studie-title { font-size: 34px; letter-spacing: -1px; }
  .studie-title span { font-size: 16px; }
  .studie-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 26px; padding-top: 24px; }
  .studie-band { font-size: 16px; }
}

/* ── „Das haben Sie in der Hand“ (20.08.2026) ──
   Drei Container unter dem Hero, je mit einer großen Ziffer, die oben links über
   die Kartenkante hinausragt. Ziffer per CSS-Counter aus der <ol>, damit die
   Reihenfolge semantisch bleibt. Nur vorhandene Tokens. */
.hand-satz {
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.7px;
  font-weight: 500;
  margin-top: 12px;
  max-width: 24ch;
}
.hand-grid {
  list-style: none;
  counter-reset: hand;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 78px;
}
.hand {
  position: relative;
  border: 1px solid var(--ink-20);
  border-radius: 10px;
  background: var(--card);
  padding: 56px 26px 28px;
}
.hand::before {
  counter-increment: hand;
  content: counter(hand);
  position: absolute;
  top: -52px;
  left: -14px;
  font-size: 104px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -5px;
  color: var(--ink);
}
.hand h3 { font-size: 21px; letter-spacing: -0.4px; }
.hand p { font-size: 16.5px; line-height: 1.45; color: var(--ink-60); margin-top: 9px; }
@media (max-width: 900px) {
  .hand-grid { grid-template-columns: 1fr; gap: 42px; margin-top: 64px; }
  .hand-satz { font-size: 23px; max-width: none; }
  .hand { padding: 44px 22px 24px; }
  .hand::before { font-size: 80px; top: -40px; left: -8px; letter-spacing: -4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Nachtrag 20.08.2026. Append-only, nichts oben geaendert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Die Ziffern der drei Hand-Container in unseren Farben ──
   Gelb und Mint erreichen als reine Füllfarbe auf --paper keinen brauchbaren
   Kontrast (rechnerisch rund 1,1:1 bzw. 1,5:1). Deshalb bekommen alle drei
   Ziffern zusätzlich eine Kontur in --ink: die Farbe bleibt die geforderte,
   die Form bleibt lesbar. paint-order zeichnet die Kontur unter die Füllung,
   damit die Ziffer nicht dünner wird; ohne Unterstützung sitzt die Kontur
   mittig — die Ziffer bleibt trotzdem klar erkennbar. ── */
.hand::before {
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.hand:nth-child(1)::before { color: var(--yellow); }
.hand:nth-child(2)::before { color: var(--violet); }
.hand:nth-child(3)::before { color: var(--mint); }

/* ── 2 · Studien-Block, Fassung 3: kein Schwarz, zwei Container diagonal ──
   Die Regeln der Fassung 2 (.studie, .studie-*) stehen weiter oben in dieser
   Datei und sind seit dem Markup-Umbau ungenutzt; das Markup dazu liegt in
   im Projektarchiv, deshalb bleiben sie als Rückbau-
   Grundlage stehen. ── */
.studie2 { margin-top: 68px; }
.studie2-title {
  font-size: clamp(24px, 2.7vw, 35px);
  line-height: 1.14;
  letter-spacing: -0.9px;
  max-width: 21ch;
}
.s2-zitat { white-space: nowrap; }

/* Die Spalten sind schmaler als die halbe Breite, der Rest wird zwischen sie
   gelegt. Nur so bleibt in der Mitte genug Luft, dass der diagonale Pfeil weder
   in Container eins noch in Container zwei hineinragt. */
.studie2-diag {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 43%);
  grid-template-rows: auto auto;
  justify-content: space-between;
  row-gap: 56px;
  margin-top: 40px;
  align-items: start;
}
.s2-a { grid-column: 1; grid-row: 1; }
.s2-b { grid-column: 2; grid-row: 2; }
.s2-pfeil {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  width: clamp(84px, 10vw, 128px);
  height: auto;
  pointer-events: none;
}
.s2-card {
  background: var(--card);
  border: 1px solid var(--ink-20);
  border-radius: 12px;
  padding: 24px 28px 28px;
  box-shadow: 0 1px 3px rgba(20, 18, 16, 0.06);
}
.s2-card h4 {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-40);
}
.s2-card p {
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  margin-top: 12px;
}
.s2-mark {
  font-weight: 500;
  background: var(--yellow);
  border-radius: 3px;
  padding: 0 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.studie2-quelle {
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-40);
  max-width: 62ch;
}
.studie2-quelle a { color: var(--ink-60); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .studie2-diag { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 20px; }
  .s2-a { grid-column: 1; grid-row: 1; }
  .s2-pfeil { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; width: 52px; transform: rotate(45deg); }
  .s2-b { grid-column: 1; grid-row: 3; }
  .s2-card p { font-size: 17.5px; }
}

/* ── 3 · Grafik ohne Kasten und ohne eigene Fläche ──
   Der Rahmen und die Kartonfläche sind raus (Feedback 20.08.2026). Die JPEGs
   tragen ihren Hintergrund seither exakt in --paper, die Grafik sitzt dadurch
   randlos auf der Seite. position:relative trägt den Sockel der Animation. ── */
.wandel-fig { position: relative; }
.wandel-fig img { border: 0; border-radius: 0; background: transparent; }

/* ── 4 · „Daten & Wissen“ fliegt in die Überschrift „Das Company BRAIN“ ──

   Der Sockel liegt exakt über der grünen Box im 1600er JPEG (gemessen:
   x 1067–1255, y 375–466 → 66,69 % / 41,44 % / 11,81 % / 10,17 %). Ohne
   scharfgeschaltete Animation ist er unsichtbar und man sieht die Box der
   Grafik. Ist die Animation an, deckt er sie in --paper ab (der Schlagschatten
   ohne Weichzeichnung verlängert die Deckung um 2 px über die Kante, damit auch
   der dunkle Rand der Grafikbox verschwindet) und die DOM-Box übernimmt. ── */
.brain-socket {
  position: absolute;
  left: 66.69%;
  top: 41.44%;
  width: 11.81%;
  height: 10.17%;
  border-radius: 6px;
  pointer-events: none;
}
.brain-socket.is-live {
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
}
/* Leerstelle: sobald die Box abhebt, bleibt die Kontur ihres Platzes zurück. */
.brain-socket.is-live::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--ink-20);
  border-radius: inherit;
  opacity: var(--socket-open, 0);
}

.brain-chip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
}
/* Hinter dem Text der Seite, sobald die Box die Grafik verlassen hat. */
.brain-chip.is-back { z-index: -1; }
.brain-chip.is-gone { visibility: hidden; }
/* Die grüne Fläche liegt in einem eigenen Layer, damit sie sich am Ende
   auflösen kann, während der Text stehen bleibt. --mint trifft die Farbe der
   Grafik (dort gemessen #94DCAB) bis auf wenige Stufen genau. */
.brain-chip::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--chip-pady, 0px)) calc(-1 * var(--chip-padx, 0px));
  border-radius: inherit;
  background: var(--mint);
  box-shadow:
    inset 0 0 0 1px var(--mint-line),
    0 calc(14px * var(--chip-lift, 0)) calc(34px * var(--chip-lift, 0)) rgba(20, 18, 16, 0.18);
  opacity: var(--chip-fill, 1);
}
.brain-chip-t { grid-area: 1 / 1; }
.brain-chip-from {
  opacity: calc(1 - var(--chip-q, 0));
  transform: translateY(calc(-7px * var(--chip-q, 0)));
  filter: blur(calc(3px * var(--chip-q, 0)));
}
.brain-chip-to {
  opacity: var(--chip-q, 0);
  transform: translateY(calc(11px * (1 - var(--chip-q, 0))));
  filter: blur(calc(3px * (1 - var(--chip-q, 0))));
}

/* Das Zielwort in der Überschrift: „Das“ bleibt stehen, „Company BRAIN“ hält
   nur den Platz, bis die Box gelandet ist. Ohne JS steht es sofort da. */
.brain-word { display: inline-block; white-space: nowrap; }
.brain-word-in { display: inline-block; }
html.brain-anim .brain-word-in { visibility: hidden; }
html.brain-anim .brain-word-in.is-on { visibility: visible; }

/* Aus der gelieferten Grafik gemessene Kantenfarbe der grünen Box (#4E7D59).
   Steht hier statt in :root, weil dieser Block ausschließlich angehängt wird. */
.brain-chip { --mint-line: #4E7D59; }

/* ═══════════════════════════════════════════════════════════════════════════
   Nachtrag 20.08.2026, nachmittags.
   Weiterhin append-only: keine Regel oberhalb wurde angefasst, alles hier
   überschreibt durch Position bei gleicher Spezifität.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header: mehr Breite, und die schmale Fassung greift deutlich früher ──
   Bisher blieben die sechs Nav-Links bis 1024 px stehen und wurden dabei auf
   10 px Abstand zusammengeschoben — genau der gequetschte Zustand aus dem
   Screenshot. Neu: unter 1200 px verschwinden sie ganz (Logo und CTA bleiben),
   darüber bekommt der Header 1520 px statt 1180 px und großzügige Abstände. */
@media (max-width: 1200px) {
  .nav-links { display: none; }
}
@media (min-width: 1201px) {
  .nav { max-width: 1520px; padding: 0 48px; gap: 28px; }
  .nav-links { gap: 18px; }
}
@media (min-width: 1441px) {
  .nav { gap: 48px; }
  .nav-links { gap: 30px; }
}

/* ── Studien-Block: Container-Überschriften größer und in den Marken-Farben ──
   Lila führt den Pfeil an, Grün steht am Ergebnis. Beide Töne tragen als Text:
   Lila 4,38:1, das dunkle Grün 4,57:1 gegen die Kartenfläche. Das Mint aus der
   Palette (1,4:1) wäre als Schrift unlesbar, deshalb dessen dunkle Kante. */
.s2-card h4 {
  font-size: clamp(16.5px, 1.45vw, 19px);
  letter-spacing: 1px;
  font-weight: 500;
}
.s2-a h4 { color: var(--violet); }
.s2-b h4 { color: #4E7D59; }
.s2-card p { margin-top: 14px; }

/* ── Quellzeile in die freie Ecke unten links, gegenüber von Container 2 ──
   Sie sitzt jetzt in der leeren Grid-Zelle statt unter dem ganzen Block. */
.studie2-quelle {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin-top: 0;
  max-width: none;
}
.studie2-quelle a {
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .studie2-diag { grid-template-rows: auto auto auto auto; }
  .studie2-quelle { grid-column: 1; grid-row: 4; align-self: start; margin-top: 8px; }
}

/* ── Company BRAIN: das Sokrates-Poster steht rechts, oben ausgerichtet ──
   Es ersetzt den Kasten mit der C-Level-Liste. „Höher“ heißt hier: es hängt
   nicht mehr mittig in der Spalte, sondern beginnt auf Höhe der Überschrift. */
.brain-def { align-items: start; }
.brain-def .split-fig { display: flex; justify-content: flex-end; }
.brain-print { max-width: 330px; margin: -18px 0 0 auto; }
@media (max-width: 960px) {
  .brain-def .split-fig { justify-content: center; }
  .brain-print { margin: 8px auto 0; max-width: 300px; }
}

/* ── Abschluss-Sektion: kein Schwarz mehr ──
   Die Fläche liegt jetzt auf dem dunkleren Papierton, damit sie sich vom
   Fließtext darüber absetzt, ohne die Seite zu zerschneiden. Der gelbe Button
   ist der einzige Farbfleck und zieht das Auge allein auf sich. */
.contact { background: var(--paper-2); color: var(--ink); }
.contact .eyebrow { color: var(--ink-40); }
.contact-eyebrow { margin-bottom: 20px; }
.contact-head {
  font-size: clamp(38px, 6vw, 82px);
  line-height: 0.98;
  letter-spacing: -2.4px;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
.contact .contact-line {
  color: var(--ink-60);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 54ch;
  margin: 26px auto 34px;
}
.contact .btn-yellow { font-size: 17px; padding: 17px 30px; }

/* Nachtrag: `.split-fig .print` (0,2,0) schlägt `.brain-print` (0,1,0) — deshalb
   hier mit der Sektionsklasse davor. Ohne eigene Breite kollabiert die figure
   als Flex-Kind, weil das Bild darin auf width:100% steht. */
.brain-def .split-fig { display: block; }
.brain-def .brain-print { width: 100%; max-width: 330px; margin: -18px 0 0 auto; }
@media (max-width: 960px) {
  .brain-def .brain-print { margin: 8px auto 0; max-width: 300px; }
}

/* Nachtrag: `.contact h2` (0,1,1) schlägt `.contact-head` (0,1,0) — die alte
   Regel setzt color:#fff und eine kleinere Schrift, beides für die schwarze
   Fassung gedacht. Hier mit gleicher Bezugstiefe erneut. */
.contact .contact-head {
  color: var(--ink);
  font-size: clamp(38px, 6vw, 82px);
  line-height: 0.98;
  letter-spacing: -2.4px;
  margin-top: 0;
}

/* Nachtrag zum Header: bei exakt 1201 px lief die Zeile um 7 px über den
   Viewport hinaus (Logo 351 + Links 534 + Button 219 + zweimal 48 Rand = 1256).
   Zwischen 1201 und 1360 px fällt deshalb der Logo-Untertitel weg — er ist
   unter 640 px ohnehin ausgeblendet und trägt hier am wenigsten. Damit bleibt
   die Navigation bis 1200 px nutzbar, statt sie noch früher zu verstecken. */
@media (min-width: 1201px) and (max-width: 1360px) {
  .logo span { display: none; }
  .nav { gap: 24px; padding: 0 40px; }
  .nav-links { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sektion 03 „Der Ablauf" — Gestaltung (Feedback 20.08.2026, später Nachmittag:
   „bei der section nichts verändern nur viel mehr mühe geben beim design").
   Kein Wort und kein Element im Markup wurde angefasst, alles hier ist CSS.

   Alle Regeln sind auf #ablauf beschränkt: `.day-list` trägt auch die
   Thesen-Liste in Sektion 01, und die soll unverändert bleiben.

   Was vorher fehlte: Die Überschrift verspricht drei Stufen, das Layout zeigte
   drei gleich schwere Zeilen zwischen Haarlinien — keine Reihenfolge, keine
   Steigerung, kein Einstiegspunkt. Vier Eingriffe:
   1. Jede Stufe wird eine Karte auf --card statt einer offenen Zeile.
   2. Eine große Ziffer je Karte, in denselben drei Farben wie die Container
      unter dem Hero (gelb/lila/grün) — dieselbe Bildsprache, dieselbe Kontur
      aus Lesbarkeitsgründen.
   3. Ein Treppenversatz nach rechts macht die Steigerung sichtbar.
   4. Die Zeitangabe wird zum Chip und steht damit als eigene Information da,
      statt als graue Zeile unter der Überschrift zu verschwinden.
   ═══════════════════════════════════════════════════════════════════════════ */

#ablauf .day-list {
  counter-reset: stufe;
  border-top: 0;
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#ablauf .day {
  counter-increment: stufe;
  position: relative;
  grid-template-columns: 108px minmax(0, 1fr) minmax(0, 1.22fr);
  gap: 28px;
  padding: 34px 34px 34px 30px;
  border: 1px solid var(--ink-20);
  border-left-width: 3px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(20, 18, 16, 0.05);
  align-items: start;
}

/* Die Treppe: jede Stufe rückt ein Stück weiter nach rechts. Der Versatz ist
   klein genug, dass die Zeilen nicht auseinanderfallen, und groß genug, dass
   man die Richtung ohne Erklärung sieht. */
#ablauf .day:nth-child(2) { margin-left: 38px; }
#ablauf .day:nth-child(3) { margin-left: 76px; }

/* Farbkante und Ziffer je Stufe. Als Fläche trägt Gelb hier problemlos —
   anders als bei Text geht es nicht um Lesbarkeit, sondern um Zuordnung. */
#ablauf .day:nth-child(1) { border-left-color: var(--yellow); }
#ablauf .day:nth-child(2) { border-left-color: var(--violet); }
#ablauf .day:nth-child(3) { border-left-color: var(--mint); }

#ablauf .day::before {
  content: counter(stufe);
  position: absolute;
  top: 14px;
  left: 26px;
  font-size: 72px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -4px;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}
#ablauf .day:nth-child(1)::before { color: var(--yellow); }
#ablauf .day:nth-child(2)::before { color: var(--violet); }
#ablauf .day:nth-child(3)::before { color: var(--mint); }

/* „Stufe 1" steht direkt unter der Ziffer, nicht am Kartenfuß — sonst reißt
   der Bezug bei den längeren Karten 2 und 3 auseinander. */
#ablauf .day .num {
  align-self: start;
  padding-top: 86px;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-40);
}

#ablauf .day h3 { font-size: 23px; margin-bottom: 12px; }

/* Die Zeitangabe als Chip: eigene Fläche, damit sie als Fakt gelesen wird. */
#ablauf .day .time {
  display: inline-block;
  background: var(--paper-2);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--ink-60);
}

#ablauf .day .desc { font-size: 17px; line-height: 1.5; }
#ablauf .day-note { margin-top: 30px; }

/* Ab 980 px ist für drei Spalten plus Treppe kein Platz mehr: Text unter den
   Titel, Treppe halbiert. */
@media (max-width: 980px) {
  #ablauf .day { grid-template-columns: 96px minmax(0, 1fr); }
  #ablauf .day .desc { grid-column: 2; margin-top: 16px; }
  #ablauf .day:nth-child(2) { margin-left: 20px; }
  #ablauf .day:nth-child(3) { margin-left: 40px; }
}

/* Auf dem Telefon steht die Ziffer über dem Text, die Treppe entfällt ganz —
   ein Versatz von 40 px kostet dort ein Sechstel der Zeilenbreite. */
@media (max-width: 700px) {
  #ablauf .day-list { gap: 18px; }
  #ablauf .day {
    grid-template-columns: minmax(0, 1fr);
    padding: 74px 22px 26px;
    gap: 0;
  }
  #ablauf .day:nth-child(2),
  #ablauf .day:nth-child(3) { margin-left: 0; }
  #ablauf .day::before { font-size: 56px; top: 16px; left: 20px; letter-spacing: -3px; }
  #ablauf .day .num { padding-top: 0; margin-bottom: 10px; }
  #ablauf .day h3 { font-size: 21px; }
  #ablauf .day .desc { grid-column: 1; margin-top: 14px; font-size: 16.5px; }
}

/* ── Mobil-Fassung der Wandel-Grafik ──
   Die Schwelle liegt bei 860 px, dieselbe wie beim Abschalten der Animation:
   darunter fällt die Beschriftung im Gesamtbild unter 9 px.
   Die Selektoren tragen `.wandel-fig` vor sich, weil `.wandel-fig img` (0,1,1)
   weiter oben `display: block` setzt und eine reine Klassenregel (0,1,0) das
   nicht schlagen würde. */
.wandel-fig .wandel-split { display: none; }
@media (max-width: 859px) {
  .wandel-fig .wandel-voll { display: none; }
  .wandel-fig .wandel-split { display: block; }
  .wandel-fig .wandel-split img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; background: transparent; }
  .wandel-fig .wandel-split-pfeil { display: block; width: 24px; height: 48px; margin: 6px auto 12px; }
}

/* ── Aufräumen für die schmale Fassung ──
   `.brain-chip` steht auf display:grid und hebt damit die Wirkung des
   hidden-Attributs auf; das Element blieb im Layout, wenn auch weit außerhalb
   des Bildes. Und der Sockel bezieht seine Maße prozentual auf .wandel-fig —
   in der gestapelten Mobilfassung ist die Figur dreimal so hoch, der Sockel
   entsprechend verzerrt. Beides gehört dort schlicht nicht hin. */
.brain-chip[hidden] { display: none; }
@media (max-width: 859px) {
  .wandel-fig .brain-socket { display: none; }
}

/* ── Hero-Blobs auf dem Telefon ──
   Einspaltig rutschen die beiden Farbflecken über die Verlaufszeile
   („Executive AI Transformation · Für Vorstände …“): Gelb lag von 71 bis 189 px,
   Mint von 97 bis 207 px, die Zeile selbst zwischen 113 und 149 px. Der Text
   stand damit halb auf der Farbe und halb daneben — das liest sich als Panne,
   nicht als Absicht. Beide sitzen jetzt flach über der Zeile: sichtbar bleibt
   der Streifen zwischen Header-Unterkante und Textbeginn. */
@media (max-width: 700px) {
  /* Zwischen Header-Unterkante (73 px) und Textbeginn (113 px) bleiben 40 px.
     Die Flecken sind rotiert, ihre Hüllbox ist dadurch 66 bis 78 px hoch — sie
     passen dort schlicht nicht hin, ohne den Text zu berühren. Sie hinter die
     Überschrift zu legen wäre eine Option, hängt aber am Zeilenumbruch und
     bricht auf der nächsten Telefonbreite wieder. Deshalb sind sie auf dem
     Telefon aus. Die Farbe im Hero trägt dort das Bild mit seinen eigenen
     Flecken (.blob-fig-mint / .blob-fig-pink), die niemanden überlagern. */
  .hero .blob-yellow, .hero .blob-mint { display: none; }
}

/* Prüfbefund 8 (V8): --violet erreicht auf --card 4,38:1 und verfehlt damit
   die 4,5:1 für Fließtextgrößen knapp — 19 px bei Gewicht 500 zählen nicht als
   große Schrift. Eine Spur dunkler, optisch derselbe Ton, 4,70:1. */
.s2-a h4 { color: #954BD8; }

/* ═══ Mobil-Navigation (Prüfbefund 6, V8) ═══
   Unterhalb von 1200 px blieben bisher nur Logo und CTA übrig. Das ist keine
   mobile Fassung, sondern eine fehlende Navigation — und betraf nach dem
   Höhersetzen der Schwelle deutlich mehr Geräte als vorher, unter anderem ein
   1440er-Display bei 125 % Zoom (effektiv 1152 px). */

.nav-toggle { display: none; }

@media (max-width: 1200px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 10px;
    padding: 0;
    border: 1px solid var(--ink-20);
    border-radius: 10px;
    background: var(--card);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
  .nav-toggle-bars { display: block; width: 18px; }
  .nav-toggle-bars i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.22s ease, opacity 0.16s ease;
  }
  .nav-toggle-bars i + i { margin-top: 4px; }
  /* Offen: aus den drei Balken wird ein Kreuz. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Umbau 20.08.2026 (Mobil): Das Panel lag im Fluss und schob beim OEffnen den
     gesamten Seiteninhalt nach unten — gemessen 430 px bei 390 px Breite, 364 px
     im Querformat. Wer mitten im Text auf den Burger tippt, verliert damit seine
     Stelle. Es haengt jetzt absolut unter der Leiste (der Header ist sticky und
     damit Bezugspunkt) und ueberdeckt statt zu schieben.
     Dazu eine Hoehenbegrenzung: im Querformat (844x390) ragte das Panel 46 px
     ueber den Bildschirm, "Kontakt" — der wichtigste Eintrag — war nicht
     erreichbar. dvh zuerst als Vorzeile in vh, weil 100dvh erst ab iOS 15.4
     verstanden wird; overscroll-behavior verhindert, dass das Scrollen im Panel
     an das Dokument dahinter weiterreicht. */
  .nav-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(245, 242, 233, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ink-20);
    padding: 6px 40px 18px;
  }
  /* Der Block fuer flache Fenster steht am Dateiende — hier stand er vor den
     Basisregeln und verlor gegen sie (gleiche Spezifitaet, spaeter gewinnt). */
  /* Im Querformat ist Breite da und Hoehe knapp: die sechs Ziele stehen dort in
     zwei Spalten, damit alle ohne Scrollen sichtbar sind. Gemessen bei 844x390
     brauchte die einspaltige Fassung 364 px in einem 318 px hohen Panel —
     "Kontakt" fiel unten heraus. */
  @media (max-height: 520px) and (min-width: 480px) {
    .nav-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 32px;
      align-content: start;
    }
    .nav-panel .nav-panel-cta { grid-column: 1 / -1; }
  }
  .nav-panel[hidden] { display: none; }
  .nav-panel a {
    padding: 15px 2px;
    font-size: 17px;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-20);
  }
  .nav-panel a:last-child { border-bottom: 0; }
  .nav-panel a:focus-visible { color: var(--violet); }
  @media (hover: hover) { .nav-panel a:hover { color: var(--violet); } }
}

@media (max-width: 640px) {
  .nav-panel { padding: 6px 22px 16px; }
}

/* Der Knopf braucht Platz: im engen Fenster wird der CTA-Text sonst gequetscht. */
@media (max-width: 460px) {
  .nav .btn { font-size: 13.5px; padding: 11px 13px; }
  .nav-toggle { width: 44px; height: 44px; margin-left: 8px; }
}

/* Der Header-CTA passt unter 560 px nicht mehr neben Logo und Menüknopf: bei
   390 px bleiben ihm 161 px, sein Text braucht rund 190 px, er brach um und
   machte die Kopfleiste zweizeilig. Dort übernimmt ihn das Menü. */
.nav-panel-cta { display: none; }
@media (max-width: 560px) {
  .nav .btn:not(.nav-panel-cta) { display: none; }
  /* Der CTA trug `margin-left: auto` und schob den Menueknopf an den rechten
     Rand. Ohne ihn klebte der Burger am Logo — gemessen blieben rechts daneben
     176 px leer (390 px) bzw. 106 px (320 px). */
  .nav-toggle { margin-left: auto; }
  .nav-panel .nav-panel-cta {
    display: block;
    margin-top: 14px;
    text-align: center;
    border-bottom: 0;
    color: #fff;
    font-size: 16px;
  }
}
@media (min-width: 560.01px) and (max-width: 1200px) {
  .nav .btn { white-space: nowrap; }
}

/* Prüfbefund 2 (V8): `visibility: hidden` nimmt „Company BRAIN" während des
   ganzen Flugs aus dem Accessibility-Tree — Screenreader hörten bis zum Ende
   nur „Das", und die Seitensuche findet es nicht zuverlässig. `opacity: 0`
   blendet es genauso aus, lässt es aber semantisch und für Strg+F vorhanden. */
html.brain-anim .brain-word-in { visibility: visible; opacity: 0; }
html.brain-anim .brain-word-in.is-on { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   Die falsche Schlange (Feedback 20.08.2026 abends)
   Ersetzt die Kurven-SVG. Aufbau: Titelzeile, Foto mit aufgesetzter Marke
   „Ueberholspur", darunter die fuenf Stufen als Raster. Nur das Foto ist
   ein Foto; Marke, Stufen und Band liegen als DOM darueber und bleiben
   dadurch bei jeder Breite und jedem Zoom scharf.
   Zahlen: ausschliesslich die belegten 88 % und 6 %. Die Stufen 2 bis 4
   tragen bewusst keine Zahl, sondern nur einen Positionsstrich.
   ══════════════════════════════════════════════════════════════════════ */
.schlange { margin: 56px 0 0; }
.schlange-titel {
  font-size: clamp(21px, 2.25vw, 29px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--ink);
  max-width: 26ch;
  margin-bottom: 22px;
}
.schlange-bild {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(20, 18, 16, 0.14), 0 2px 6px rgba(20, 18, 16, 0.07);
}
.schlange-bild img { display: block; width: 100%; height: auto; }
/* Die Marke sitzt ueber der leeren Spur am rechten Bildrand. Prozentwerte
   halten sie dort, egal wie breit das Bild gerade skaliert ist. */
.schlange-spur {
  position: absolute;
  top: 15%;
  right: 3.2%;
  z-index: 2;
  display: inline-block;
  padding: 0.5em 0.85em;
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(11px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(20, 18, 16, 0.22);
}
/* Kurzer Strich von der Marke hinunter auf die leere Spur: Er zeigt, worauf
   sich die Marke bezieht, sonst schwebt sie ueber dem Fensterband. */
.schlange-spur::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 26px;
  background: var(--yellow);
  transform: translateX(-50%);
}

.schlange-stufen {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 22px;
  margin-top: 30px;
}
.sst {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-20);
  padding-top: 14px;
}
/* Feste Kopfhoehe, damit die fuenf Stufennamen auf einer Linie sitzen,
   obwohl nur zwei Stufen eine belegte Zahl tragen. */
.sst-kopf { min-height: 62px; display: flex; flex-direction: column; gap: 2px; }
.sst-wert { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1; color: var(--ink); }
.sst-bezug { font-size: 13px; line-height: 1.3; color: var(--ink-40); }
.sst-leer::before {
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  background: var(--ink-20);
}
.sst b { font-size: 16.5px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.sst-sub { font-size: 14px; line-height: 1.35; color: var(--ink-60); margin-top: 3px; }
.sst-ziel { border-top: 3px solid var(--ink); padding-top: 12px; }

/* Das Band sitzt in der zweiten Rasterzeile unter den Stufen 2 und 3: genau
   dort beginnt der Teil, den das Angebot adressiert. */
.schlange-band {
  grid-column: 2 / 4;
  justify-self: start;
  margin-top: 26px;
  padding: 9px 16px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: 6px;
}

/* Unter 1180 px uebernimmt die bestehende .stufen-liste die Stufen (dieselbe
   Grenze wie zuvor). Das Foto bleibt sichtbar, es traegt auch schmal. */
@media (max-width: 1180px) {
  .schlange { margin-top: 44px; }
  .schlange-stufen { display: none; }
  .schlange-spur::after { height: 18px; }
}
@media (max-width: 640px) {
  .schlange-bild { border-radius: 10px; }
  .schlange-spur { letter-spacing: 0.08em; padding: 0.4em 0.6em; }
  .schlange-spur::after { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .schlange-bild { box-shadow: 0 2px 8px rgba(20, 18, 16, 0.12); }
}

/* ══════════════════════════════════════════════════════════════════════
   Beschriftung der Wandel-Grafik als DOM-Text (20.08.2026 abends)
   Die Zeilen waren in die JPEGs eingebrannt. Sie sind dort geloescht und
   stehen jetzt hier: dadurch aenderbar, bei jedem Zoom scharf und in der
   Schrift der Seite. Die Prozentwerte sind aus den Bilddateien gemessen
   (1600 x 905: linke Zeile Mitte x 385,5 / y 75; rechte Zeile Mitte
   x 1153 / y 75), damit die Zeilen exakt an ihrer alten Stelle sitzen.
   ══════════════════════════════════════════════════════════════════════ */
.wandel-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--ink-60);
  white-space: nowrap;
  pointer-events: none;
}
.wandel-fig .wl-heute,
.wandel-fig .wl-morgen {
  position: absolute;
  top: 8.29%;
  transform: translate(-50%, -50%);
  font-size: clamp(9px, 1.02vw, 12.5px);
}
.wandel-fig .wl-heute  { left: 24.09%; }
.wandel-fig .wl-morgen { left: 72.06%; }

/* Mobil-Fassung: die beiden Haelften stehen untereinander, jede traegt ihre
   Zeile ueber dem geleerten Streifen im eigenen Bild. */
.wandel-fig .ws-teil { position: relative; }
.wandel-fig .wl-m { display: none; }

@media (max-width: 1180px) {
  .wandel-fig .wl-heute,
  .wandel-fig .wl-morgen { display: none; }
  .wandel-fig .wl-m {
    display: block;
    position: absolute;
    left: 50%;
    top: 3.1%;
    transform: translate(-50%, -50%);
    font-size: clamp(10px, 2.5vw, 15px);
    letter-spacing: 0.16em;
  }
  /* Der geleerte Streifen im Kreislauf-Bild sitzt etwas hoeher als im
     Einbahn-Bild, weil das Bild deutlich flacher ist. */
  .wandel-fig .ws-teil:last-of-type .wl-m { top: 3.05%; }
}
@media (max-width: 430px) {
  .wandel-fig .wl-m { letter-spacing: 0.1em; font-size: 10.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL-UMBAU 20.08.2026 — der Aufruf faehrt mit
   Ausgangslage, gemessen (390 x 844, dpr 3): zwischen 3,2 % und 60,8 % des
   Wegs lagen 12,3 Bildschirme ohne einen einzigen Bedienpunkt, danach nochmals
   7,9. Der einzige mitfahrende Punkt war der Menueknopf — ohne ein Wort darauf.
   Der Header-CTA war unter 560 px abgeschaltet, und zwar ausschliesslich aus
   Platzgruenden (Kommentar weiter oben: 190 px Text auf 161 px Platz).
   Statt einer zweiten Leiste am unteren Rand — die 64 bis 80 px Dauerflaeche
   gekostet haette, 7,6 % des Bildes bei 390 px, 9,7 % bei 320 px — schrumpft
   das Logo, sobald der Hero-Aufruf aus dem Bild ist. Der Platz reicht dann:
   390 px innen 346 = PM 28 + Knopf 254 + Menue 44 + zwei Luecken 20.
   320 px innen 276 = PM 28 + Knopf 184 + Menue 44 + zwei Luecken 20.
   ═══════════════════════════════════════════════════════════════════════════ */

.logo-kurz { display: none; }

@media (max-width: 560px) {
  html.pm-past-hero .nav { gap: 10px; }
  html.pm-past-hero .logo-lang { display: none; }
  html.pm-past-hero .logo-kurz { display: inline; }
  html.pm-past-hero .nav .btn:not(.nav-panel-cta) {
    display: inline-block;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 13.5px;
    /* 13 px oben und unten ergeben 44 px Gesamthoehe — die Untergrenze fuer
       ein Tapziel. Mit 11 px waren es 40 px. */
    padding: 13px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.pm-past-hero .nav-toggle { margin-left: 0; }
  /* Im Panel waere der Aufruf dann doppelt — dort verschwindet er, solange er
     in der Leiste steht. */
  html.pm-past-hero .nav-panel .nav-panel-cta { display: none; }
}

/* -- Die zwei Anschluesse im Text (Funnel) ---------------------------------
   Am Schirm stehen sie linksbuendig in Normalbreite und stoeren die ruhige
   Textspalte nicht; am Telefon nehmen sie die volle Breite und liegen damit in
   derselben Daumenzone wie der Hero-Aufruf. */
.hypo-anschluss { margin-top: 30px; }
.ablauf-anschluss {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ablauf-anschluss-chip {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--ink-40);
}
@media (max-width: 560px) {
  .hypo-anschluss .btn,
  .ablauf-anschluss .btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 20px;
  }
  .hypo-anschluss { margin-top: 26px; }
}

/* -- Die Adresse als lesbarer Text unter dem Abschluss-Knopf ----------------
   Faellt das mailto aus (In-App-Browser, kein eingerichtetes Mailkonto), ist
   dies der einzige verbleibende Weg. Deshalb sichtbar, nicht versteckt. */
.contact-adresse {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-40);
}
.contact-adresse a {
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Die vergroesserte Trefferflaeche steht weiter unten und ausschliesslich
     unter `pointer: coarse` — an der Maus braucht sie niemand, und das
     vertikale Polster wirkte hier auch auf feine Zeiger. (Prüfbefund 21.08.2026.) */
}

/* -- Die beiden Beleg-Links waren 16 bzw. 17 px hohe Tapziele ---------------
   Gemessen: "Die Studie im Original lesen (PDF)" 200x16, "Kundenreferenz von
   paretos" 189x17. Es sind ausgerechnet die zwei Links, die Belege oeffnen.
   Nur fuer Finger, damit am Schirm nichts ueberlappt. */
@media (pointer: coarse) {
  .studie2-quelle a,
  .stimme-solo .day-note a { padding-block: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL-UMBAU 20.08.2026 — Teil 2: Typografie und Dichte fuers Telefon
   ---------------------------------------------------------------------------
   Ausgangslage, gemessen: 21,3 Bildschirme bei 390 px gegen 12,6 am Schirm,
   30,0 bei 320 px. Und: UNTERHALB von rund 630 px klebte jedes clamp() an
   seinem Minimum — bei 320 px stand exakt dieselbe Schrift in einer um 21 %
   schmaleren Spalte wie bei 430 px. Das ist der Grund, warum ausgerechnet das
   kleinste Geraet die laengste Seite bekam.
   Dieser Block setzt zum ersten Mal eine eigene Steigung fuer den
   Telefonbereich und nimmt den Karten das Polster, das nur die
   Nebeneinander-Optik am Schirm bezahlt hat.
   Kein Inhalt verschwindet — es aendert sich kein Wort und kein Element.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {

  /* -- 1. Ueberschriften mit echter Steigung ---------------------------------
     Die vw-Anteile sind so gewaehlt, dass sie zwischen 320 und 560 px
     tatsaechlich arbeiten und am oberen Ende genau den bisherigen Wert
     erreichen — am Schirm aendert sich also nichts. */
  .hero h1 { font-size: clamp(29px, 9.2vw, 38px); letter-spacing: -0.028em; }
  .sec-head h2 { font-size: clamp(25px, 7.4vw, 30px); letter-spacing: -0.025em; }
  .contact .contact-head { font-size: clamp(31px, 9.4vw, 38px); letter-spacing: -0.03em; }
  .hebel-head { font-size: clamp(24px, 6.8vw, 26px); letter-spacing: -0.026em; }
  .hand-satz { font-size: clamp(21px, 6vw, 23px); letter-spacing: -0.026em; }
  .split-head .punchline { letter-spacing: -0.02em; }

  /* -- 2. Die Namen der drei Stufen waren die kleinste Schrift der Seite -----
     "Stufe 1/2/3" stand in 11,5 px gesperrter Versal-Mono und fiel damit unter
     die 12-px-Grenze, die dieselbe Datei weiter oben fuer Bildunterschriften
     ausdruecklich zieht ("Zielgruppe ist 45-60+"). Es ist kein Beiwerk,
     sondern der Name der Funnelstufe. */
  #ablauf .day .num { font-size: 12.5px; letter-spacing: 1px; }

  /* -- 3. Die Zielgruppen-Zeile im ersten Bildschirm -------------------------
     Sie sagt, fuer wen die Seite ist, und stand in 12 px gesperrter Versal-Mono
     — der schwerst lesbaren Kombination der Seite an ihrer wichtigsten Stelle. */
  .hero .eyebrow { font-size: 13px; letter-spacing: 0.6px; line-height: 1.45; }

  /* -- 4. Ergebnis-Karten: die Ziffer kostete eine eigene Zeile --------------
     `.result .n` stand auf display:block mit 16 px Abstand darunter — je Karte
     rund 51 px, die nichts sagen, was die Ueberschrift nicht sagt. Bei sechs
     Karten sind das ueber 300 px. Am Telefon steht die Ziffer jetzt in derselben
     Zeile wie die Ueberschrift, wo sie als Zaehler ohnehin hingehoert. */
  .result { padding: 22px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .result .n { display: block; margin-bottom: 0; grid-column: 1; grid-row: 1; align-self: baseline; }
  .result h3 { grid-column: 2; grid-row: 1; margin-bottom: 8px; font-size: 19px; }
  .result p { grid-column: 2; grid-row: 2; }
  .result-grid { gap: 14px; }

  /* -- 5. Die drei Stufen-Karten: 86 px Kopfpolster fuer eine Deko-Ziffer ----
     `#ablauf .day .num` traegt padding-top: 86px, damit die grosse Ziffer
     darueber Platz hat. Am Telefon ist die Ziffer kleiner — dann reicht auch
     weniger Vorlauf. */
  #ablauf .day { padding: 26px 20px 26px 18px; }
  #ablauf .day::before { font-size: 54px; top: 12px; left: 18px; letter-spacing: -3px; }
  #ablauf .day .num { padding-top: 58px; }
  #ablauf .day-list { gap: 16px; margin-top: 40px; }
  /* Die Zeitangabe bricht in der 999-px-Pille zweizeilig um ("individuell ·
     langfristig · ueber das Eins-zu-eins hinaus"); als Pille sieht das falsch
     aus, als Kasten richtig. 7 px ist dabei die Stufe, die auf dieser Seite
     schon fuer Knoepfe gilt — kein neuer Wert in der Radienskala.
     (Die Skala lautet: 2-4 px Marken, 6-7 px Knoepfe und kleine Bildflaechen,
     10 px Karten, 12 px die grossen Stufenkarten, 999 px echte Pillen.) */
  #ablauf .day .time { border-radius: 7px; }

  /* -- 6. Die drei Container unter dem Hero ---------------------------------
     44 px Kopfpolster und 42 px Zwischenraum bezahlen allein, dass die 80 px
     grosse Deko-Ziffer ueber die Kartenkante ragen darf. */
  .hand { padding: 38px 20px 22px; }
  .hand::before { font-size: 66px; top: -33px; }
  /* margin-top steht im Abstandsblock weiter unten (40px) — hier nur der
     Zwischenraum, sonst widersprechen sich zwei Regeln desselben Umbaus. */
  .hand-grid { gap: 30px; }

  /* -- 7. Sektionspolster ---------------------------------------------------
     60 px oben und unten an 13 Kanten sind am Telefon ueber 260 px reine Luft.
     44 px halten den Abstand noch klar lesbar. */
  section { padding: 44px 0; }
  .hero { padding: 32px 0 44px; }
  .stimmen { padding: 30px 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   Logo-Leiste unter der Trust-Zeile (Auftrag 20.08.2026 abends)
   Originalfarben, weil Markenrichtlinien das Umfaerben untersagen und ein
   Einfarb-Filter mehrere dieser Zeichen zu schwarzen Flaechen macht.
   Die Hoehen sind einzeln gesetzt: Ein rundes Zeichen (Bayer) muss hoeher
   stehen als ein langer Schriftzug (Kalkhoff), damit alle gleich gross
   WIRKEN. Eine einheitliche Pixelhoehe waere hier der Fehler.
   ══════════════════════════════════════════════════════════════════════ */
.logo-band {
  list-style: none;
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--ink-20);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px 44px;
}
.logo-band li { display: flex; align-items: center; }
.logo-band .lg { display: block; width: auto; max-width: 160px; object-fit: contain; }

.lg-bayer      { height: 40px; }
.lg-otto       { height: 25px; }
.lg-edeka      { height: 37px; }
.lg-hellofresh { height: 33px; }
.lg-kalkhoff   { height: 17px; }
.lg-goldgas    { height: 25px; }
.lg-hartmann   { height: 29px; }
.lg-lascana    { height: 25px; }
.lg-pfenning   { height: 29px; }

@media (max-width: 900px) {
  .logo-band { gap: 22px 32px; }
  .logo-band .lg { max-width: 128px; }
  .lg-bayer { height: 34px; } .lg-edeka { height: 31px; }
  .lg-hellofresh { height: 28px; } .lg-otto { height: 21px; }
  .lg-kalkhoff { height: 15px; } .lg-goldgas { height: 21px; }
  .lg-hartmann { height: 25px; } .lg-lascana { height: 21px; }
  .lg-pfenning { height: 25px; }
}
@media (max-width: 560px) {
  .logo-band { gap: 18px 26px; justify-content: space-between; }
}

/* Mobil-Beschriftung der Wandel-Grafik loest sich vom Bild (20.08.2026 spaet)
   Vorher lag .wl-m absolut ueber dem geleerten Kopfstreifen der beiden
   Hochformate. Damit haette jeder neue Bildzuschnitt die Zeile verschoben.
   Jetzt ist der leere Streifen aus den Bildern herausgeschnitten und die Zeile
   steht als normaler Block darueber: unabhaengig vom Bildmass und ausserdem
   ohne die tote Flaeche, die auf dem Telefon Hoehe gekostet hat. */
@media (max-width: 1180px) {
  .wandel-fig .wl-m {
    position: static;
    transform: none;
    display: block;
    margin: 0 0 12px;
    text-align: center;
  }
  .wandel-fig .ws-teil:last-of-type .wl-m { margin-top: 4px; }
}

/* Das Polaroid war auf die Zeitungs-Collage im Querformat eingestellt
   (aspect-ratio 3/2 + object-fit: cover). Ein quadratisches Portrait wird
   davon oben und unten beschnitten, im Zweifel mitten durch den Kopf.
   Fuer das Portrait deshalb quadratisch, Bildmitte leicht nach oben gesetzt,
   damit der Kopf sitzt und nicht die Brust die Mitte bildet. */
.fac-print .print-full.print-portrait {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 42%;
}

/* ══════════════════════════════════════════════════════════════════════
   REPARATUR Header-Logo (21.08.2026)
   `.logo span { display: none }` gibt es zweimal: unter 640 px und zwischen
   1201 und 1360 px. Beide stammen aus der Zeit, als im Logo nur der Claim
   in einem span stand, und sollten allein den Claim ausblenden. Seit der
   Markenname und seine Kurzfassung selbst spans sind (.logo-lang und
   .logo-kurz in <b>), loeschen sie den gesamten sichtbaren Linkinhalt.
   Gemessen bei 390 px: Der Header-Link war 0 px breit und ohne Text, die
   Marke also unsichtbar. Betroffen waren bis 640 px und 1201 bis 1360 px.
   Die Regeln bleiben unangetastet, der Name wird gezielt zurueckgeholt.
   Die Umschaltung auf "PM" nach dem Hero bleibt wie gebaut.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .logo b .logo-lang { display: inline; }
  .logo b .logo-kurz { display: none; }
}
@media (max-width: 560px) {
  html.pm-past-hero .logo b .logo-lang { display: none; }
  html.pm-past-hero .logo b .logo-kurz { display: inline; }
}
@media (min-width: 1201px) and (max-width: 1360px) {
  .logo b .logo-lang { display: inline; }
  .logo b .logo-kurz { display: none; }
}

/* REPARATUR Wandel-Titel (21.08.2026)
   Ich hatte die Desktop-Zeilen bei 1180 px abgeschaltet, die Split-Fassung mit
   den Mobilzeilen schaltet sich aber erst bei 859 px ein. Zwischen 860 und
   1180 px stand die Grafik dadurch voellig ohne Titelzeile da. Die Grenze der
   Zeilen muss dieselbe sein wie die des Bildwechsels. */
@media (min-width: 860px) and (max-width: 1180px) {
  .wandel-fig .wl-heute,
  .wandel-fig .wl-morgen { display: block; }
  .wandel-fig .wl-m { display: none; }
}

/* -- Nachtrag zum mitfahrenden Aufruf: der Logotext ------------------------
   Die Kurzfassung "PM" steckt in einem <span> INNERHALB des <b> — und
   `.logo span` (weiter oben) ist ein Nachfahren-Selektor. Er hat damit auch
   die beiden neuen Spans erfasst und "Potential Mining" in 11-px-Mono-
   Versalien gesetzt statt in der Hausschrift. Hier zurueckgeholt.
   Gefunden bei der Sichtkontrolle der Aufnahmen n390-01. */
.logo b .logo-lang,
.logo b .logo-kurz {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}

/* -- Waagerechter Ueberlauf im Band 641 bis 679 px --------------------------
   Gemessen (320 bis 1920 px in 25 Schritten): bei 641 px ragt der Menueknopf
   37 px ueber den rechten Rand, bei 660 px noch 18 px; ab 680 px ist es sauber.
   Ursache ist die Kante selbst: bis 640 px blendet `.logo span` den Claim
   "Executive AI Transformation" aus, ab 641 px ist er wieder da — das Logo
   springt von 125 auf 351 px, und Logo + Aufruf (219) + Menueknopf (44) +
   Luecken + Innenabstand passen dann nicht mehr in 641 px.
   Der Claim kommt deshalb erst ab 761 px zurueck, mit Reserve gerechnet:
   125 + 219 + 44 + 32 + 44 = 464 px belegt bei 641 px Platz.
   Der Selektor ist bewusst `>`: nur der Claim ist ein direktes Kind von .logo,
   der Markenname und die Kurzfassung "PM" liegen im <b> darin. */
@media (min-width: 641px) and (max-width: 760px) {
  .logo > span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Prüfbefunde vom 21.08.2026 zum Mobil-Umbau — Nachbesserungen
   ═══════════════════════════════════════════════════════════════════════════ */

/* Befund 2: `padding-block` auf einem inline dargestellten Link vergroessert
   die Zeilenbox NICHT — die Trefferflaeche waechst zwar, ragt aber unsichtbar
   in die Zeile darueber und darunter. Ein Tipp auf normalen Nachbartext haette
   dann den Link ausgeloest. `inline-flex` mit `min-height` laesst die Zeile
   tatsaechlich mitwachsen. Betrifft die beiden Beleg-Links (200x16 und
   189x17 gemessen) und die Adresse unter dem Abschluss-Knopf. */
/* Zurueckgenommen am 21.08.2026: `min-height: 44px` riss mitten im Fliesstext
   eine 44 px hohe Zeile auf — "Aus der Kundenreferenz von paretos" steht im
   Satz, nicht als eigene Zeile. WCAG 2.5.8 nimmt Ziele, die im Fliesstext
   liegen, ausdruecklich von der Mindestgroesse aus; genau dieser Fall ist
   gemeint. Die beiden Links behalten damit ihre 16 bzw. 17 px Zeilenhoehe.
   Die Adresse unter dem Abschluss-Knopf steht dagegen allein in ihrer Zeile —
   dort bleibt die vergroesserte Flaeche (Regel unten). */
@media (pointer: coarse) {
  .contact-adresse a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
}

@media (max-width: 560px) {
  /* Befund 6: Die Ablaufkarten wurden an der Oberkante nicht kompakter, sondern
     10 px tiefer — 26 px Kartenpolster plus 58 px Vorlauf sind mehr als die
     74 px vorher. Bei einer 54 px hohen Ziffer auf top: 12px bleiben mit 42 px
     rund 2 px Abstand zur Zeile darunter. */
  #ablauf .day .num { padding-top: 42px; }

  /* Befund 7: `section { padding: 44px 0 }` greift bei zwei Abschnitten nicht,
     weil Klassen- und ID-Regeln weiter oben staerker sind: `.vorteile` behaelt
     40/56, `#hypothesen` behaelt unten 40. Beide hier ausdruecklich. */
  .vorteile { padding: 44px 0; }
  #hypothesen { padding-bottom: 44px; }
}

/* -- Abstaende zwischen den Bloecken am Telefon -----------------------------
   Gemessen bei 390 px: allein in #hypothesen stehen 386 px in margin-top —
   80 px ueber dem Company-BRAIN-Block, 72 ueber der Wechsel-Ueberschrift,
   64 ueber der Hebel-Ueberschrift, 68 ueber dem Studien-Block. Diese Werte
   sind fuer eine 1.180 px breite Spalte gesetzt; auf 346 px Breite trennen
   44 px genauso deutlich und kosten ein Drittel weniger Weg.
   Rund 180 px, ohne dass ein Element seine Trennung verliert. */
@media (max-width: 560px) {
  #hypothesen .split-head,
  #ergebnis .split-head { margin-top: 44px; }
  /* `#hypothesen > .wrap > h2` stand hier und machte `.hebel-head` darunter
     tot (1,1,1 schlaegt 0,1,0). Seit die Wechsel-Ueberschrift ihre eigene
     Klasse `.wechsel-head` hat, wird sie nicht mehr gebraucht. */
  .hebel-head { margin-top: 40px; }
  #fabian > .wrap > p.eyebrow { margin-top: 40px; }
  .studie2 { margin-top: 44px; }
  .hand-grid { margin-top: 40px; }
  .vonzu-grid { margin-top: 36px; }
  .wandel-fig { margin-top: 32px; }
}

/* Die beiden Abstaende, die vorher als style-Attribut im Markup standen.
   Als Attribut waren sie per Media Query nicht zu erreichen. */
.split-head-weit { margin-top: 72px; }
.presse-eyebrow { margin-top: 64px; }
@media (max-width: 560px) {
  .split-head-weit { margin-top: 44px; }
  .presse-eyebrow { margin-top: 40px; }
}

/* -- Schmale Geraete: der Rand kostet dort am meisten -----------------------
   Gemessen: 320 px ist der einzige Fall, der sich kaum verkuerzt hat (30,0 auf
   29,3 Bildschirme, waehrend 390 px von 21,3 auf 20,0 faellt). Der Grund ist
   nicht das Layout, sondern die Zeile: bei 22 px Rand bleiben von 320 px noch
   276 px Text — 14 % der Breite gehen an den Rand, und jeder Absatz braucht
   entsprechend mehr Zeilen. 16 px Rand geben 288 px zurueck (+4,3 %), 16,5 px
   Schrift statt 17 nochmals rund 3 %. Beides bleibt klar ueber der Grenze,
   die diese Datei fuer die Zielgruppe 45-60+ selbst zieht (12 px).
   Die Grenze liegt bei 375 px, damit auch das iPhone SE (375 x 667, 27,4
   Bildschirme im Ausgangszustand) davon traegt. Ab 376 px bleibt alles, wie es
   war. */
@media (max-width: 375px) {
  .wrap { padding: 0 16px; }
  /* Kopfleiste und Menue-Panel muessen mitgehen, sonst stehen Logo und
     Menueknopf 6 px weiter innen als jede Textzeile darunter. */
  .nav { padding: 0 16px; }
  .nav-panel { padding-left: 16px; padding-right: 16px; }
  /* `.sub` steht hier nicht mehr: der Hero-Untertitel wird weiter unten
     ausdruecklich auf 17,5 px gesetzt (er traegt allein die Erklaerung im
     ersten Bildschirm und darf groesser bleiben). Zwei Regeln, die sich
     unmittelbar widersprechen, sind schlechter als eine klare.
     `.voice`/`.voice blockquote` sind ebenfalls raus — das zweispaltige Zitat
     ist seit dem Umbau auf ein einzelnes Zitat weg, die Regeln liefen ins Leere. */
  .lead, .desc, .card p, .result p, .hebel p, .day .desc,
  .fit p, .tier p { font-size: 16.5px; }
  #ablauf .day .desc { font-size: 16.5px; }
  .hand p { font-size: 15.5px; }
  /* Die Karten haben zusaetzlich eigenes Polster — auf 320 px zaehlt jedes
     Pixel doppelt, weil es von beiden Seiten abgeht. */
  .result, .hebel, .card, .fit, .tier { padding-left: 16px; padding-right: 16px; }
  #ablauf .day { padding-left: 14px; padding-right: 16px; }
  /* Die Ziffer stand auf left: 18px aus dem 560er-Block und damit 4 px
     neben der Fluchtlinie ihres eigenen Textes. */
  #ablauf .day::before { left: 14px; }
  .pc-img a { padding: 12px; column-gap: 12px; }
}

/* -- Nachtrag zum 375er-Block: drei Regeln waren zu schwach -----------------
   Gemessen bei 320 px: `.sub` verlor gegen `.hero .sub` (main.css:206),
   `.hebel p` und das Kartenpolster verloren gegen `.hebel-kern .hebel`
   (main.css:1374/1381). Hier mit derselben Bezugstiefe erneut.
   Die Regel fuer `.voice` im Block darueber laeuft ins Leere — das Element gibt
   es seit dem Umbau auf ein einzelnes Zitat nicht mehr; sie schadet nicht und
   bleibt als Rueckfall stehen, falls das zweispaltige Zitat zurueckkommt. */
@media (max-width: 375px) {
  .hero .sub { font-size: 17.5px; }
  .hebel-kern .hebel p { font-size: 16.5px; }
  .hebel-kern .hebel { padding-left: 16px; padding-right: 16px; }
}

/* Die Vertrauenszeile steht im ersten Bildschirm und war mit 12 px gesperrter
   Versal-Mono die zweitkleinste Schrift dort. Zielgruppe ist 45-60+. */
@media (max-width: 560px) {
  .hero-trust { font-size: 13px; letter-spacing: 0.9px; }
}

/* -- Zwei Kleinigkeiten aus der Endpruefung --------------------------------
   1. Das Sprungziel des Logos ist `<main id="top">`. `scroll-margin-top` galt
      nur fuer `main > section`, nicht fuer main selbst — der Sprung landete
      unter der 73 px hohen Kopfleiste.
   2. Auf sehr schmalen Geraeten soll der Aufruf in der Leiste lieber kleiner
      werden als abgeschnitten: `text-overflow: ellipsis` ist ein Sicherheitsnetz,
      kein gewuenschtes Verhalten, und der Wortlaut ist gesetzt.
      Gerechnet mit den echten Schriftmassen: "Vertrauliches Erstgespraech"
      misst bei 13,5 px 166,8 px, bei 12,5 px 154,4 px. Bei 320 px bleiben dem
      Knopf 195 px, davon 20 px Innenabstand — 175 px fuer den Text. */
main#top { scroll-margin-top: 88px; }

@media (max-width: 340px) {
  html.pm-past-hero .nav .btn:not(.nav-panel-cta) {
    font-size: 12.5px;
    padding: 14px 8px;   /* haelt die 44 px Tapziel-Hoehe trotz kleinerer Schrift */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Endpruefung 21.08.2026 — Zugaenglichkeit
   ═══════════════════════════════════════════════════════════════════════════ */

/* Der Rahmen eines Bedienelements muss 3:1 gegen seinen Grund erreichen
   (WCAG 1.4.11). Nachgerechnet: --ink-20 (#CEC7B4) erreicht auf --paper nur
   1,51:1 und auf --card 1,61:1 — der Ghost-Knopf war als Knopf kaum zu
   erkennen, nur sein Text war lesbar. #8A8272 ist der hellste Ton, der die
   Schwelle haelt (3,40:1 auf paper, 3,64:1 auf card) und den zurueckhaltenden
   Charakter behaelt; --ink-40 waere mit 5,26:1 deutlich zu laut.
   Betrifft alle Ghost-Knoepfe, auch den zweiten im Hero. */
.btn-ghost { border-color: #8A8272; }

/* Die Fokus- und Hoverfarbe der Menue-Links stand einmal auf --violet (#9B4FE0)
   mit 4,09:1 und dann auf #954BD8 mit 4,39:1 — beide unter den 4,5:1, die
   Fliesstextgroessen brauchen. Die gueltige Fassung steht weiter unten:
   #9148D2 mit 4,62:1. Die beiden frueheren Regeln standen hier und waren
   von der spaeteren ueberholt; sie sind entfernt, damit nicht drei Fassungen
   derselben Farbe in der Datei stehen. */

/* `height: 72px` an der Kopfleiste bricht, sobald der Nutzer die Systemschrift
   vergroessert: der Inhalt waechst, die Leiste nicht. min-height laesst sie mit. */
.nav { height: auto; min-height: 72px; }

/* Die auf 44 px gebrachten Beleg-Links waren als inline-flex nicht mehr
   umbruchfaehig — bei vergroesserter Schrift haetten sie die Spalte gesprengt. */
/* `flex-wrap` gehoert dorthin, wo die Elemente tatsaechlich Flex-Container
   sind — das ist nur `.contact-adresse a` unter `pointer: coarse`. Die beiden
   Beleg-Links stehen inzwischen auf `inline-block`; dort lief die Regel leer. */
@media (pointer: coarse) {
  .contact-adresse a { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   Schlangen-Grafik, Nachschaerfung 21.08.2026
   Die Grafik ergab in der alten Fassung keinen Sinn mehr. Das
   alte Foto zeigte EINE Menschenmasse und einen leeren Gang, die fuenf
   Spalten darunter bezogen sich also auf nichts. In der Vorlage steht
   unter jeder Spur genau eine Stufe. Das neue Foto hat fuenf abgetrennte
   Spuren, vier gefuellt, die fuenfte frei, und sie liegen fast exakt auf
   Fuenfteln der Bildbreite. Damit steht jede Spalte wieder unter ihrer Spur.
   Struktur bleibt unveraendert, nur die Ausrichtung wird sichtbar gemacht:
   Text zentriert unter der Spur, senkrechte Trenner zwischen den Spuren,
   Marke ueber der Mitte der fuenften Spur.
   ══════════════════════════════════════════════════════════════════════ */
.schlange-spur {
  left: 90%;
  right: auto;
  transform: translateX(-50%);
}
.schlange-spur::after { left: 50%; }

.schlange-stufen { gap: 0; }
.sst {
  text-align: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 14px;
}
/* Senkrechte Trenner setzen die Spuren des Fotos nach unten fort. */
.sst + .sst { border-left: 1px solid var(--ink-20); }
.sst-kopf { align-items: center; }
.sst-leer::before { margin: 0 auto; }
.schlange-band { justify-self: center; }

/* Untergrenze 12 px fuer die neuen Beschriftungen (21.08.2026). Diese Datei zieht die Grenze weiter oben
   selbst: Zielgruppe 45-60+, gesperrte Versal-Mono unter 12 px liest sich am
   Telefon schlecht. Meine beiden neuen Zeilen lagen mit 10,5 und 11 px
   darunter. Die Sperrung geht dafuer schmal zurueck, damit die Zeile in der
   Bildbreite bleibt. */
@media (max-width: 640px) {
  .schlange-spur { font-size: 12px; letter-spacing: 0.1em; }
  .wandel-fig .wl-m { font-size: 12px; letter-spacing: 0.08em; }
}
@media (max-width: 430px) {
  .wandel-fig .wl-m { font-size: 12px; letter-spacing: 0.05em; }
  .schlange-spur { font-size: 12px; letter-spacing: 0.06em; padding: 0.35em 0.55em; }
}

/* Marke auf schmalen Schirmen: Bei 12 px Schrift ist die Kapsel breiter als
   der Platz rechts der Bildmitte, zentriert auf 90 % lief sie aus dem Bild
   heraus (gemessen bei 390 px). Deshalb dort rechtsbuendig verankert; der
   Zeiger sitzt nicht mehr mittig unter der Kapsel, sondern bei 72 % ihrer
   Breite, damit er weiterhin auf die freie Spur bei 90 % zeigt. */
@media (max-width: 640px) {
  .schlange-spur { left: auto; right: 2%; transform: none; }
  .schlange-spur::after { left: 72%; }
}
/* Etwas weniger Polster in den Stufen, damit die Unterzeilen seltener brechen. */
.sst { padding-left: 10px; padding-right: 10px; }

/* Bis 860 px rechtsbuendig verankern statt auf 90 % zentriert: Dazwischen
   stiess die Kapsel bei 641 px genau an die rechte Bildkante (gemessen
   80 % bis 100 %). Mit fester Einrueckung bleibt immer Luft. */
@media (max-width: 860px) {
  .schlange-spur { left: auto; right: 2.5%; transform: none; }
  .schlange-spur::after { left: 72%; }
}

/* Der Abstand ueber "So entsteht der Wechsel …" — vorher ein style-Attribut,
   das keine Media Query erreichen konnte. */
.wechsel-head { margin-top: 72px; }
@media (max-width: 560px) { .wechsel-head { margin-top: 44px; } }

/* -- Ohne JavaScript bleibt der Aufruf in der Leiste ------------------------
   Unter 560 px ist der Header-Aufruf abgeschaltet und wandert ins Menue; das
   Menue braucht Skript. Ohne Skript sah der Besucher dort nur einen toten
   Menueknopf — der einzige sichtbare Aufruf war dann der im Hero, und sobald
   er weggescrollt war, gar keiner mehr. `pm-js` setzt das Kopfskript; fehlt
   die Klasse, zeigt die Leiste den Aufruf und der Menueknopf verschwindet.
   Das Logo steht dann in seiner Kurzfassung, damit der Platz reicht:
   320 px innen 276 = PM 26 + Knopf 190 + eine Luecke 10. */
@media (max-width: 560px) {
  html:not(.pm-js) .logo-lang { display: none; }
  html:not(.pm-js) .logo-kurz { display: inline; }
  html:not(.pm-js) .nav .btn:not(.nav-panel-cta) {
    display: inline-block;
    margin-left: auto;
    font-size: 13.5px;
    padding: 13px 12px;
  }
  html:not(.pm-js) .nav-toggle { display: none; }
}

/* -- Sektion 04 am Telefon: Liste statt sechs gleicher Kaesten --------------
   Gemessen ueber die ganze Seite: zwischen Bildschirm 15 und 18 liegen vier
   Bildschirme fast ohne Bild, und der gleichfoermigste Teil davon sind die
   sechs Ergebnis-Karten — sechsmal derselbe Kasten mit Ziffer, Titel, Text.
   Am Schirm stehen sie zu dritt nebeneinander, dort traegt der Kasten die
   Spaltenordnung. Am Telefon stehen sie untereinander: dann ordnet der Kasten
   nichts mehr, er kostet nur Rahmen, Polster und Gleichfoermigkeit.
   Als Liste mit einer Haarlinie und grosser Ziffer bekommt der Abschnitt einen
   anderen Charakter als die Stufenkarten davor — und wird kuerzer.
   Der Inhalt bleibt Zeichen fuer Zeichen derselbe. */
@media (max-width: 560px) {
  .result-grid { gap: 0; margin-top: 28px; border-top: 1px solid var(--ink-20); }
  .result {
    border: 0;
    border-bottom: 1px solid var(--ink-20);
    border-radius: 0;
    background: transparent;
    padding: 20px 0;
    column-gap: 14px;
  }
  .result .n {
    font-size: 15px;
    color: var(--ink-40);
    padding-top: 2px;
  }
  .result h3 { font-size: 18.5px; margin-bottom: 6px; }
}

/* Die 12-px-Untergrenze fuer die Marke galt nur bis 640 px. Im Telefon-Querformat
   (844 CSS-px) griff dadurch weiter das Clamp-Minimum von 11 px. Die Grenze gilt
   jetzt bis 860 px, also fuer alle Telefonlagen. */
@media (max-width: 860px) {
  .schlange-spur { font-size: 12px; letter-spacing: 0.09em; }
}

/* Untergrenze generell auf 12 px: Zwischen 861 und rund 1040 px lag die Marke
   sonst weiter bei 11 bis 11,8 px. Die Seite zieht die Grenze fuer gesperrte
   Versal-Mono selbst bei 12 px, unabhaengig vom Geraet. */
.schlange-spur { font-size: clamp(12px, 1.15vw, 16px); }

/* Die Desktop-Zeilen der Wandel-Grafik standen bei clamp(9px, 1.02vw, 12.5px).
   Bei 860 px sind das exakt 9 px, also unter der 12-px-Grenze, die diese Datei
   selbst zieht. Untergrenze auf 12 px. */
.wandel-fig .wl-heute,
.wandel-fig .wl-morgen { font-size: clamp(12px, 1.02vw, 12.5px); }

/* -- Flache Fenster (Querformat): kompaktere Menuezeilen --------------------
   Stand vorher weiter oben und war damit wirkungslos: `.nav-panel a` wird
   danach mit 15 px Polster und 17 px Schrift gesetzt, gleiche Spezifitaet,
   spaetere Regel gewinnt. Die zweispaltige Fassung hat den Fehler verdeckt —
   sie allein brachte das Panel von 364 auf 195 px. (Prüfbefund 4.) */
@media (max-width: 1200px) and (max-height: 520px) {
  .nav-panel a { padding: 10px 2px; font-size: 16px; }
  .nav-panel .nav-panel-cta { margin-top: 10px; }
}

/* -- Befund 5: die letzte Mobilregel, die an der Spezifitaet scheiterte -----
   `.lead { font-size: 16.5px }` im 375er-Block verliert in den drei
   Fabian-Absaetzen gegen `.fac-grid .lead { font-size: 19px }`. */
@media (max-width: 375px) {
  .fac-grid .lead { font-size: 16.5px; }
}

/* -- Befund 8: die Fokusfarbe der Menuelinks --------------------------------
   #954BD8 erreicht auf --paper 4,39:1 und verfehlt die 4,5:1 fuer
   Fliesstextgroessen knapp. #9148D2 ist derselbe Ton eine Spur dunkler
   und kommt auf 4,62:1. Nachgerechnet nach WCAG-Formel. */
.nav-panel a:focus-visible { color: #9148D2; }
@media (hover: hover) { .nav-panel a:hover { color: #9148D2; } }

/* -- Die Kopfleiste darf wachsen, die Werte drumherum muessen mitgehen ------
   Seit `.nav` min-height statt height traegt (damit vergroesserte Systemschrift
   sie nicht sprengt), stimmten drei fest verdrahtete 72/73/88-px-Werte nicht
   mehr. Das Skript schreibt die gemessene Hoehe in --kopfhoehe und setzt den
   Beobachter neu auf, wenn sie sich aendert. Der Rueckfallwert 73px gilt,
   solange kein Skript laeuft. (Prüfbefund 1, 21.08.2026.) */
:root { --kopfhoehe: 73px; }

@media (max-width: 1200px) {
  .nav-panel {
    max-height: calc(100vh - var(--kopfhoehe));
    max-height: calc(100dvh - var(--kopfhoehe));
  }
}

main > section,
main#top { scroll-margin-top: calc(var(--kopfhoehe) + 15px); }

/* Die Umschaltkante der Wandel-Titel lag bei ganzen Pixeln (859 gegen 860).
   Bei einer gebrochenen Fensterbreite dazwischen, wie sie beim Zoomen entsteht,
   griff weder max-width: 859px noch min-width: 860px: Vollbild sichtbar, aber
   beide Titelpaare aus. Die Kante liegt jetzt auf 859,02 px und schliesst die
   Luecke. */
@media (min-width: 859.01px) and (max-width: 1180px) {
  .wandel-fig .wl-heute,
  .wandel-fig .wl-morgen { display: block; }
  .wandel-fig .wl-m { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Drei Nachbesserungen (21.08.2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · Ohne JavaScript gab es zwischen 561 und 1200 px einen toten Menueknopf.
   In diesem Bereich sind die Hauptlinks ausgeblendet und der Burger sichtbar,
   das zugehoerige Panel bleibt ohne Skript aber `hidden`. Der bereits gewaehlte
   Weg fuer Telefone gilt jetzt fuer den ganzen Bereich, in dem der Burger
   erscheint: kein toter Knopf, dafuer der Aufruf in der Leiste. */
@media (min-width: 560.01px) and (max-width: 1200px) {
  html:not(.pm-js) .nav-toggle { display: none; }
  html:not(.pm-js) .nav .btn:not(.nav-panel-cta) {
    display: inline-block;
    margin-left: auto;
  }
}

/* 2 · Zwei Umschaltkanten der Kopfleiste lagen auf ganzen Pixeln und liessen
   beim Zoomen eine Luecke offen.
   a) Zwischen 640 und 641 px war der lange Claim wieder da, bevor die
      Ausblendung ab 641 px griff: die Zeile wurde zu breit und die Seite lief
      waagerecht ueber.
   b) Zwischen 1200 und 1201 px waren die vollen Navigationslinks schon
      sichtbar, aber weder die breite Kopfleiste noch das Ausblenden des Claims
      griffen: dieselbe zu breite Zeile im schmalen Container.
   Beide Kanten liegen jetzt zwei Hundertstel frueher. */
@media (min-width: 640.01px) and (max-width: 760px) {
  .logo > span { display: none; }
}
@media (min-width: 1200.01px) and (max-width: 1200.99px) {
  .nav { max-width: 1520px; padding: 0 48px; gap: 28px; }
  .nav-links { gap: 18px; }
}
@media (min-width: 1200.01px) and (max-width: 1360px) {
  .logo > span { display: none; }
  .logo b .logo-lang { display: inline; }
  .logo b .logo-kurz { display: none; }
}

/* 3 · Die beiden Beleg-Links bekamen fuer Finger 14 px senkrechtes Polster,
   blieben aber inline. Bei inline-Elementen vergroessert Polster die Zeilenbox
   nicht, die unsichtbare Trefferflaeche ragte also in die Nachbarzeilen und
   fing dort Tipper ab. Als inline-block wirkt dasselbe Polster im Layout und
   die Flaeche bleibt dort, wo der Link steht. */
@media (pointer: coarse) {
  .studie2-quelle a,
  .stimme-solo .day-note a { display: inline-block; }
}

/* Zwei weitere Logoformate, derzeit ungenutzt. Runde und breite Zeichen
   brauchen unterschiedliche Hoehen, damit sie gleich gross WIRKEN. */
.lg-voegele-mode { height: 23px; }
.lg-voegele-bau  { height: 30px; }
@media (max-width: 900px) {
  .lg-voegele-mode { height: 19px; }
  .lg-voegele-bau  { height: 25px; }
}

/* -- Der zweite Kontaktweg (Entscheidung 21.08.2026) ------------------------
   Leiser als die Adresse darueber: die Mail bleibt der Hauptweg, LinkedIn ist
   der Ausweg fuer den Fall, dass das mailto im eingebauten Browser scheitert.
   Trefferflaeche wie bei der Adresse, aber nur fuer Finger. */
.contact-zweitweg {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-40);
}
/* Auf Fingern sind beide Zeilen 44 px hohe Trefferflaechen. Mit 6 px Abstand
   stossen sie fast aneinander — gemessen wurden 6 px zwischen den Flaechen,
   und Fehltipps sind dann eine Frage der Zeit. 20 px Vorlauf geben 14 px
   echten Abstand zwischen den Flaechen. Am Schirm bleibt es bei 6 px, dort
   sind die Zeilen nur 17 px hoch. */
@media (pointer: coarse) {
  .contact-zweitweg { margin-top: 20px; }
}
.contact-zweitweg a {
  color: var(--ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (pointer: coarse) {
  .contact-zweitweg a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Die Bahn: Stufengrafik, Fassung 6 (Auftrag 21.08.2026)
   Das Warteschlangen-Foto ist raus. An seine Stelle tritt die Vorlage aus dem
   Auftrag: fuenf beschriftete Koepfe, darunter fuenf Spuren, in denen sich das
   Feld ausduennt, rechts die freie Spur. Wieder gebaut statt eingesetzt — kein
   Bild, alles DOM: scharf bei jedem Zoom, in der Schrift der Seite, aenderbar.

   Zahlen: ausschliesslich die belegten 88 % und 6 % (McKinsey). Die Figuren in
   den Spuren zaehlen nichts, sie zeigen nur das Ausduennen; die Fussnote unter
   der Grafik sagt das ausdruecklich.

   Aufbau: ein Raster mit fuenf Spalten. Die Kinder stehen in Lesereihenfolge —
   erst die fuenf Koepfe (Zeile 1), dann die fuenf Spuren (Zeile 2), dann Fuss,
   Bogen und Fuss (Zeile 3), zuletzt das Band (Zeile 4). Die automatische
   Platzierung erledigt den Rest, deshalb braucht kein Element eine feste
   Rasterkoordinate ausser den beiden, die mehrere Spalten ueberspannen.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Ein tiefes Gruen fuer Text und Marke der Zielspur. Das vorhandene --mint
     ist eine Flaechenfarbe; als Schrift auf --paper kommt es auf 1,3:1 und
     waere unlesbar. Dieser Ton liegt bei 4,5:1 auf Papier und 5,1:1 unter
     Weiss, erfuellt also beide Richtungen. */
  --gruen: #2E7D46;
  --bahn-gap: 22px;
}

.bahn {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--bahn-gap);
  margin-top: 30px;
  padding-top: 15px;   /* Platz fuer die Ziffernmarken, die oben ueberstehen */
}

/* ── Zeile 1: die Koepfe ─────────────────────────────────────────────────── */
.bahn-kopf {
  position: relative;
  border: 1px solid var(--ink-20);
  border-radius: 12px;
  background: var(--card);
  padding: 17px 11px 14px;
  text-align: center;
  /* Mittig statt oben: Die fuenf Koepfe sind gleich hoch, ihre Titel aber
     unterschiedlich lang. Oben ausgerichtet saehen die Unterzeilen auf drei
     verschiedenen Hoehen aus; zentriert bleibt jede Karte in sich ruhig. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bahn-kopf b {
  display: block;
  /* 16,5 px statt 17,5: „Erster produktiver Fall" brach sonst schon bei
     1440 px um, obwohl die Spalte 205 px breit ist. */
  font-size: clamp(13.5px, 1.26vw, 16.5px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.bahn-sub {
  display: block;
  margin-top: 5px;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.3;
  color: var(--ink-60);
}
.bahn-kopf-ziel { background: var(--ink); border-color: var(--ink); }
.bahn-kopf-ziel b { color: var(--card); }
.bahn-kopf-ziel .bahn-sub { color: rgba(252, 250, 243, 0.74); }

.bahn-nr {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--violet);
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}
.bahn-nr-ziel { background: var(--gruen); }

/* ── Zeile 2: die Spuren ─────────────────────────────────────────────────── */
.bahn-spur {
  position: relative;
  margin-top: 14px;
  min-height: clamp(250px, 25vw, 310px);
  border: 1px solid var(--ink-20);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.26);
  padding: 18px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Gestrichelte Trennung zwischen den Spuren, mittig in der Rasterluecke. Die
   fuenf Spuren sind im Quelltext direkte Geschwister, deshalb greift `+`. */
.bahn-spur + .bahn-spur::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--bahn-gap) / 2);
  top: 8%;
  bottom: 8%;
  border-left: 1px dashed var(--ink-20);
}

.bahn-figuren {
  display: grid;
  gap: clamp(5px, 0.62vw, 9px) clamp(6px, 0.75vw, 10px);
  justify-content: center;
  align-content: start;
}
.bfig-3 { grid-template-columns: repeat(3, clamp(19px, 2.3vw, 28px)); }
.bfig-2 { grid-template-columns: repeat(2, clamp(19px, 2.3vw, 28px)); }
.bfig-1 { grid-template-columns: clamp(19px, 2.3vw, 28px); }
.bahn-figuren i {
  display: block;
  aspect-ratio: 20 / 24;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%233F3A34' d='M10 1a4.6 4.6 0 1 1 0 9.2A4.6 4.6 0 0 1 10 1Zm0 11c5 0 9 3.3 9 7.4V23H1v-3.6C1 15.3 5 12 10 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Die Zielspur: freie Bahn, Pfeil nach vorn, eine einzelne Figur. */
.bahn-spur-frei {
  justify-content: flex-end;
  gap: 12px;
  background: linear-gradient(135deg, var(--mint) 0%, var(--yellow) 100%);
  border-color: var(--gruen);
}
.bahn-pfeil {
  flex: 1 1 auto;
  width: 2.5px;
  min-height: 70px;
  margin-top: 14px;
  background: var(--ink);
}
.bahn-pfeil::before {
  content: "";
  position: absolute;
  /* Die Spitze sitzt ueber dem Schaft: (2,5 px Schaft − 14 px Spitze) / 2. */
  margin-left: -5.75px;
  margin-top: -10px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--ink);
}
.bahn-frei-text {
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Zeile 3: die beiden belegten Werte und der Bogen dazwischen ─────────── */
.bahn-fuss { padding-top: 16px; text-align: center; }
.bahn-wert {
  display: block;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 600;
  line-height: 1;
}
.bahn-wert-88 { color: var(--violet); }
.bahn-wert-6 { color: var(--gruen); }
.bahn-bezug {
  display: block;
  margin-top: 5px;
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--ink-60);
}
.bahn-bogen {
  grid-column: 2 / 5;
  align-self: center;
  width: 100%;
  height: auto;
  color: var(--ink);
}

/* ── Zeile 4: das Band ───────────────────────────────────────────────────── */
.bahn-band {
  grid-column: 2 / 5;
  justify-self: center;
  margin-top: 8px;
  padding: 10px 18px;
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border-radius: 7px;
}

/* Unter 859 px uebernimmt die .stufen-liste, wie zuvor beim Foto. Fuenf
   Spalten sind dort nicht mehr lesbar: bei 860 px bleiben je 145 px, bei
   700 px waeren es 116 px, und die Kopfzeilen faenden keinen Umbruch mehr. */
@media (max-width: 859px) {
  .bahn { display: none; }
}

/* -- Die einzige echte Luecke zwischen zwei Breakpoint-Kanten ---------------
   Rechnerisch geprueft: fuer jede Selektor-Eigenschaft-Kombination, die links
   und rechts einer Kante gesetzt wird, ob sie im Zwischenbereich unversorgt
   bleibt. Von 1200/1201, 640/641, 859/860, 900/901, 960/961 und 560/560.01
   hat genau eine ein Loch: `.nav { gap }` ist bis 900 px auf 16 px gesetzt und
   ab 901 px auf 22/18/16 px — bei einer gebrochenen Breite dazwischen (also
   beim Zoomen) faellt beides aus und der Basiswert von 28 px greift.
   Kein Bruch, aber ein Sprung, den niemand geplant hat. Die drei 901er-Bloecke
   bleiben unangetastet; hier wird nur der Zwischenbereich versorgt.
   (Codex ultra, 21.08.2026, rechnerisch nachgeprueft.) */
@media (min-width: 900.01px) and (max-width: 901px) {
  .nav { gap: 22px; }
  .nav-links { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Die Bahn auf schmalen Schirmen: fuenf ECHTE Spalten
   (Auftrag 21.08.2026, am Telefon nachgereicht)

   Bis hierher galt `display: none` unter 860 px, und die .stufen-liste trat an
   die Stelle der Grafik — begruendet damit, dass fuenf Spalten unter 145 px
   nicht mehr lesbar seien. Nachgemessen: bei 390 px Viewport ist die Figur
   346 px breit, macht 65 px je Spalte bei 5 px Luecke; bei 320 px noch 54 px.
   Das traegt, wenn drei Dinge weichen:
     · die Unterzeilen — die stehen in der Liste darunter unveraendert weiter,
     · die grossen Innenabstaende der Koepfe und Spuren,
     · die feste Figurengroesse, die hier an die Spaltenbreite gekoppelt wird.
   Die Kopfzeilen bekommen Silbentrennung (html traegt lang="de"), damit
   „Erster produktiver Fall" auch bei 54 px umbricht statt ueberzulaufen.

   Die .stufen-liste bleibt sichtbar. Sie ist die zugaengliche Fassung — die
   Grafik traegt aria-hidden — und sie ist die einzige Stelle, an der die
   Unterzeilen und die beiden belegten Werte im Satz stehen.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 859px) {
  .bahn {
    display: grid;
    --bahn-gap: 5px;
    margin-top: 22px;
    padding-top: 12px;
  }

  /* ── Koepfe ─────────────────────────────────────────────────────────────── */
  .bahn-kopf { border-radius: 8px; padding: 13px 3px 8px; }
  .bahn-kopf b {
    font-size: 12px;          /* die Untergrenze dieser Seite, nicht darunter */
    line-height: 1.15;
    letter-spacing: -0.01em;  /* holt bei 54 px rund ein Zeichen je Zeile */
    text-wrap: initial;       /* balance verschenkt hier Platz */
  }
  /* Silbentrennung als Notnagel, nicht als Regel. Ohne Begrenzung trennt der
     Umbruch gierig: „KI ist Be-|trieb", obwohl „Betrieb" auf eine eigene Zeile
     gepasst haette — der Algorithmus fuellt die Zeile lieber weiter, wenn er
     trennen darf. Erst ab zehn Zeichen ist Trennen erlaubt; damit trennt in
     dieser Grafik nur noch „pro-duktiver", und genau das Wort passt bei 54 px
     tatsaechlich in keine Zeile. */
  .bahn-kopf b,
  .bahn-sub {
    hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 10 4 4;
  }
  .bahn-sub {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  /* Die Liste tritt zurueck, sobald die Grafik da ist — sonst stuenden die
     fuenf Stufen zweimal untereinander und die Sektion waere am Telefon
     doppelt so lang. Zurueck heisst NICHT weg: dieselbe Behandlung wie oberhalb
     859 px, also aus dem Bild geschnitten, aber im Accessibility-Tree. Die
     Grafik traegt aria-hidden, die Liste bleibt damit die vorgelesene Fassung.
     Beide Werte und alle fuenf Unterzeilen stehen jetzt auch in der Grafik,
     sichtbar geht also nichts verloren. */
  .stufen-liste {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    display: block;
  }
  .bahn-nr {
    top: -9px;
    width: 19px; height: 19px;
    font-size: 12px; line-height: 19px;
  }

  /* ── Spuren ─────────────────────────────────────────────────────────────── */
  .bahn-spur {
    margin-top: 10px;
    min-height: 158px;
    border-radius: 9px;
    padding: 9px 2px 8px;
  }
  /* Die gestrichelte Trennung faellt weg: bei 5 px Luecke stuende sie fast auf
     dem Rand der Nachbarspur und liest sich als Doppellinie. */
  .bahn-spur + .bahn-spur::before { content: none; }

  /* Figuren an die Spaltenbreite gekoppelt statt fest in px: so passen drei
     nebeneinander bei 390 px genauso wie bei 320 px. */
  /* Eine Reihe je Spur (Auftrag 21.08.2026: „nur eine Reihe, nicht drei").
     Der Zeilenabstand ist mit 7 px bewusst groesser als der alte 3er: die
     Figur fuellt ihren Rahmen bis an die Unterkante, bei 3 px sass der Kopf
     der naechsten direkt auf den Schultern der vorigen und die Schlange
     verklumpte zu einer Saeule. Die Breite haelt die Figur schmal genug,
     dass acht davon in die Spur passen, ohne sie zu strecken. */
  .bahn-figuren { gap: 7px 2px; width: 100%; }
  .bfig-1 { grid-template-columns: 1fr; width: 34%; }

  .bahn-spur-frei { gap: 7px; }
  .bahn-pfeil { min-height: 34px; margin-top: 15px; }
  .bahn-frei-text { font-size: 12px; letter-spacing: 0.02em; line-height: 1.15; }

  /* ── Werte, Bogen, Band ─────────────────────────────────────────────────── */
  .bahn-fuss { padding-top: 11px; }
  .bahn-wert { font-size: 22px; }
  .bahn-bezug { margin-top: 3px; font-size: 12px; line-height: 1.2; }
  .bahn-bogen { grid-column: 2 / 5; }
  /* Ueber alle fuenf Spalten: bei drei Spalten waere das Band 200 px breit und
     der Satz braeuchte vier Zeilen. */
  .bahn-band {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 9px 14px;
    font-size: 14px;
  }
}

/* Bei 430 px und darunter wird es am engsten (54 px je Spalte bei 320 px).
   Hier geht nur noch die Sperrung zurueck, die Schriftgroesse bleibt bei
   12 px — die Untergrenze dieser Seite gilt auch in der Grafik. */
@media (max-width: 430px) {
  .bahn { --bahn-gap: 4px; }
  .bahn-kopf { padding: 12px 2px 7px; }
  .bahn-kopf b { letter-spacing: -0.02em; }
  .bahn-spur { min-height: 146px; padding: 8px 1px 7px; }
  .bahn-wert { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Die beiden Bildunterschriften im Wandel-Bild (Auftrag 21.08.2026)
   „Wissen versickert." rot, „Wissen bleibt im System." groesser und gruen.

   Beide Zeilen waren in die JPEGs eingebrannt und liessen sich deshalb nicht
   einfaerben. Sie sind aus allen acht Dateien herausgeloescht — der Streifen
   ist mit der Papierfarbe #F5F2E9 gefuellt, nachgemessen bleiben 0 dunkle
   Pixel — und stehen jetzt als DOM-Text darueber. Damit sind sie bei jedem
   Zoom scharf, in der Hausschrift und aenderbar.

   Die Prozentwerte sind aus den Bildern GEMESSEN, nicht geschaetzt:
     kombiniertes Bild  x 24,69 % und 72,50 %, y 83,2 %
     Einzelhaelften     x 51,7–52,6 %, y 95,3–95,6 %
   Sie decken sich mit den beiden Beschriftungen oben (24,09 / 72,06 %), die
   Spalten des Bildes sind also dieselben.

   Farben: das rote #B23A2E liegt auf --paper bei 4,9:1, das vorhandene
   --gruen (#2E7D46) bei 4,5:1 — beide ueber der 4,5er-Schwelle. Anders als bei
   den Beschriftungen oben ist hier KEINE Mono-Versalschrift gesetzt: diese
   beiden Zeilen sind eine Aussage, keine Marke, und sollen sich lesen lassen.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --rot: #B23A2E; }

.wandel-cap {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}
.wc-rot   { color: var(--rot); }
.wc-gruen { color: var(--gruen); }

/* Die Kante ist 859 px — dieselbe, an der `.wandel-voll` und `.wandel-split`
   getauscht werden (Regel bei Zeile 2091). Nicht 1180: dort wechseln nur die
   Beschriftungen `.wl-heute`/`.wl-m`, nicht die Bilder. Beide Kanten muessen
   mit ihrem jeweiligen Bild wandern, sonst schwebt eine Zeile ueber dem
   falschen Bild. */

/* Kombiniertes Bild, ab 860 px */
.wandel-fig .wc-voll { top: 83.2%; font-size: clamp(13px, 1.15vw, 16px); }
.wandel-fig .wc-voll.wc-rot   { left: 24.69%; }
.wandel-fig .wc-voll.wc-gruen { left: 72.50%; font-size: clamp(15px, 1.5vw, 21px); }

/* Einzelhaelften, bis 859 px */
.wandel-fig .wc-m { display: none; }
@media (max-width: 859px) {
  .wandel-fig .wc-voll { display: none; }
  .wandel-fig .wc-m {
    display: block;
    left: 52%;
    top: 95.4%;
    font-size: clamp(14px, 3.4vw, 20px);
  }
  .wandel-fig .ws-teil:last-of-type .wc-m {
    left: 51.7%;
    top: 95.3%;
    font-size: clamp(16px, 4.1vw, 25px);   /* „groesser" — der Zielzustand */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Nachtrag 21.08.2026: „Freie Spur" mittig, und der Streifen ueber dem Kopf
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Zeile umbricht in der schmalen Spalte auf zwei Zeilen. Der Block selbst
   sass durch `align-items: center` schon mittig, der TEXT darin lief aber
   linksbuendig — bei zwei Zeilen sieht man das sofort. */
.bahn-frei-text { text-align: center; }

/* Auf dem iPhone stand Seiteninhalt UEBER dem klebenden Kopf (Screenshot vom
   21.08.2026). Im Browser sitzt der Kopf gemessen exakt bei top: 0 — die
   Luecke entsteht erst in iOS Safari: bei eingeklappter Adressleiste bezieht
   Safari `position: sticky` auf den kleinen Viewport, der unter dem
   Statusstreifen beginnt, waehrend der Inhalt im grossen Viewport bis an die
   Bildschirmkante scrollt. Der Kopf steht dann korrekt, aber darueber
   scheint Text durch.
   Dagegen laeuft die Kopffarbe nach oben weiter. Am Seitenanfang liegt dieser
   Streifen ausserhalb des Bildes und faellt nicht auf; sobald der Kopf klebt,
   deckt er die Luecke zu. Kein Einfluss auf das Layout — absolut, ohne
   Ereignisse, und der Kopf ist das erste Element im Body. */
header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 140px;
  background: rgba(245, 242, 233, 0.92);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ── Studienkarte „Was kam heraus“: sichtbarer Bruch zwischen den zwei Seiten ──
   Auftrag 21.08.2026: „es muss nochmal klar werden was der unterschied ist
   zwischen den die gewinnen und die die nicht gewinnen“. Die Karte trägt jetzt
   zwei Hälften. Der Satz dazwischen bekommt eine Linie darüber, damit der Bruch
   auch beim Überfliegen sichtbar ist, bevor ein Wort gelesen wurde.
   Die höhere Spezifität (.s2-card p.s2-trenn) ist nötig, weil weiter oben in
   dieser Datei bereits `.s2-card p { margin-top: 14px }` steht. ── */
.s2-card p.s2-trenn {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--ink-20);
  font-weight: 500;
}
.s2-card p.s2-trenn + p { margin-top: 11px; }

/* Auf 390 px brach „90 Tage" mitten in der gelben Marke um: „90" am Zeilenende,
   „Tage" in der naechsten Zeile, beide gelb. box-decoration-break:clone macht
   daraus zwei Kaestchen und zerstoert den Vergleich, der genau von zwei gleich
   schweren Marken lebt. Die Werte sind kurz genug, um nie allein eine Zeile zu
   sprengen — bei 320 px gemessen, kein waagerechter Ueberlauf. */
.s2-card .s2-mark { white-space: nowrap; }

/* ── Freie Spur: die Figur nach vorn ──────────────────────────────────────────
   Auftrag 21.08.2026: „mir gefällt nicht, dass der Einzelne auf der Überholspur
   ganz hinten ist, das macht keinen Sinn.“ Richtig — in den Spuren 1 bis 4
   steht die Spitze der Schlange oben, die einzelne Figur sass unten. Sie las
   sich als Letzte, obwohl sie die Erste sein soll.
   Die Reihenfolge im Quelltext ist jetzt Figur → Pfeil → Beschriftung; hier
   faellt nur noch das `justify-content: flex-end` weg, das die Gruppe an die
   Unterkante zog. Der Pfeil behaelt `flex: 1 1 auto` und haelt die
   Beschriftung dadurch weiter unten am Spurende.
   Der Abstand ueber dem Pfeil traegt zusaetzlich seine Spitze: die sitzt per
   `margin-top: -10px` ueber dem Schaft und stuende sonst auf den Fuessen der
   Figur. ── */
.bahn-spur-frei { justify-content: flex-start; }

/* ── Quellzeile: zwei Zeilen sichtbar, Belege eingeklappt ──
   Auftrag 22.08.2026 („das Kleingedruckte ist zu lang, bitte ganz dezent zwei
   Zeilen"). `.studie2-quelle` ist jetzt ein Behaelter statt eines Absatzes; die
   bestehenden Regeln (Gitterplatz, Schriftgroesse, Farbe) gelten unveraendert
   weiter und vererben sich an die Kinder.
   Der Aufklapper traegt bewusst KEINE Flaeche und keinen Rahmen — er soll wie
   ein Fussnotenhinweis wirken, nicht wie ein Bedienelement. Das Standarddreieck
   wird abgeschaltet (in WebKit braucht es dafuer beide Zeilen) und durch ein
   Plus/Minus am Zeilenende ersetzt, das auf der Grundlinie sitzt und die
   Zeilenhoehe nicht veraendert. ── */
.studie2-quelle > p { margin: 0; }
.s2-belege { margin-top: 7px; }
.s2-belege > summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink-40);
  /* Die Unterstreichung sitzt auf dem inneren <span>, nicht auf dem <summary>:
     `text-decoration` vererbt sich auf Pseudo-Elemente und laesst sich dort
     nicht abschalten — das Plus haenge sonst mit im Strich. */
  text-decoration: none;
}
.s2-belege > summary > span { text-decoration: underline; text-underline-offset: 3px; }
.s2-belege > summary::-webkit-details-marker { display: none; }
.s2-belege > summary::marker { content: ""; }
.s2-belege > summary::after { content: " +"; }
.s2-belege[open] > summary::after { content: " –"; }
.s2-belege > summary:hover { color: var(--ink-60); }
.s2-belege > p { margin: 9px 0 0; max-width: 62ch; }