/* Schriften kommen über Google Fonts (Einbindung im von index.html). Vor dem Deploy müssen die Schriften selbst gehostet werden: Dateien nach fonts/ legen, hier @font-face ergänzen und die Einbindung im Head ersetzen. */ /* ————— Tokens ————— */ :root { color-scheme: light; /* Farbschema unveraendert (Entscheidung 22.08.2026): Gelb, Mint, Pink und Violett bleiben so, wie sie sind. Neu sind allein die Schrifttokens. */ --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, Fussnoten) und muss WCAG AA erfuellen — 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%); /* Schrifttausch: Newsreader (Serife) und Schibsted Grotesk sind raus, danach kam Satoshi, jetzt Switzer — Entscheidung nach palantir.com. Alliance No.1 gibt es nur kommerziell; Switzer ist die freie Entsprechung: neutrale Neo-Grotesk, sehr geringer Strichkontrast, offene Punzen. Alle drei Variablen zeigen darauf. --mono ist irrefuehrend benannt: Es ist keine Monospace, sondern zeigt wie --serif auf dieselbe Grotesk und haengt an Labels, Ziffern und Bildunterschriften. Umbenannt wird nicht, zu viele Fundstellen. Satoshi bleibt als Vergleichsfassung ueber ?font=b erreicht. */ --serif: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; --sans: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; --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: 18px; -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-family: var(--serif); /* WARUM leicht statt fett: Die Vorlage lebt von grossen, leichten, eng laufenden Zeilen — neutrale Neo-Grotesk, sehr geringer Strichkontrast, Ueberschriften ausdruecklich NICHT fett (palantir.com, Alliance No.1). Deshalb Grundgewicht 400 mit enger Laufweite. Gezielte Ausnahmen auf 500, damit kleine Karten- und Listen-Ueberschriften nicht zu duenn wirken: .hebel h3, .hand h3, #ablauf .day h3. Die farbigen Akzente (.c-pink, .c-mark) verrutschen dadurch nicht: Sie tragen ihre Rolle ueber Farbe, .s2-mark zusaetzlich ueber ihr eigenes Gewicht 500. */ font-weight: 400; letter-spacing: -0.03em; text-wrap: balance; } h1 { font-optical-sizing: auto; } 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: 15px; /* Kursive wirkt in einer Grotesk billig. Das Label behaelt seine Rolle als Kleindruck-Marke ueber Gewicht und Laufweite statt ueber den Schliff. */ font-style: normal; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-60); } .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%); } .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 .btn { font-size: 15px; padding: 11px 20px; margin-left: auto; } @media (max-width: 900px) { .nav { padding: 0 22px; } } @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; font-style: italic; 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; font-weight: 500; 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: 20px; margin-top: 32px; } .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: 1fr 1.4fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--ink-20); align-items: start; } .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: 1fr; } } /* ————— 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 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; /* Zeilenabstand 0, Spaltenabstand bleibt: .fac-a und .fac-b liegen wie frueher die Absaetze unmittelbar untereinander — der 64er-Gap duerfte keine Luecke zwischen den beiden Textstufen reissen. */ gap: 0 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) { /* gap entfaellt: der Zeilenabstand steht global auf 0 (Fabian-Umbau), der Luftraum um das Bild kommt unten aus dessen eigenem Rand. */ .fac-grid { grid-template-columns: 1fr; } .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-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-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
  • . Damit wird JEDES Kind des Listenpunkts zu einem eigenen Flex-Element — also die beiden 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: 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 .day { grid-template-columns: 1fr 1.4fr; } @media (max-width: 820px) { #ablauf .day { grid-template-columns: 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; } /* ————— Thesenliste: gleiche Spaltenlogik wie #ablauf ————— */ #hypothesen .day { grid-template-columns: 1fr 1.4fr; } #hypothesen .day h3 { font-size: 21px; line-height: 1.2; } @media (max-width: 820px) { #hypothesen .day { grid-template-columns: 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 ═══ --grad-text traegt denselben Verlauf wie --grad, nur mit dem dunkleren Pink erreicht als Textfarbe auf Papier die 3:1-Schwelle fuer grosse Schrift (WCAG 1.4.3). */ :root { --grad-text: linear-gradient(90deg, #D93B93 0%, #9B4FE0 100%); } .grad-text { background-image: var(--grad-text); } /* Die Blobs liegen nur 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 wirken als Presentational Hint und schlagen sonst die aspect-ratio. Kindselektor statt Nachfahrenselektor: die Karte enthaelt auch das Marken-Logo der Quellenzeile () — ein breiter Nachfahrenselektor wuerde ihm width:100% und aspect-ratio 3/2 aufzwingen und die je Marke gesetzten Hoehen ueberschreiben. */ .pc-img a { padding: 0; overflow: hidden; gap: 0; } .pc-img a > 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 .press-quelle { padding: 0 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 a > 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: neben dem 104 px schmalen Bild hat weder das Marken-Logo noch das Datum Platz. */ .pc-img .press-quelle { 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. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { #ablauf .day, #hypothesen .day, .day-list .day { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 26px 0; } .day .desc { 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; } } /* ── 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. Das Hellgrün (--green-soft) 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 = , allein/Ihr Haus = . */ .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 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 (Der Block ist mit den Nav-Links entfallen.) */ /* ── 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; } /* Der Button bricht am Desktop nie intern um. */ @media (min-width: 901px) { .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; } /* ── 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. 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; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; } .hand { position: relative; border: 1px solid var(--ink-20); border-radius: 10px; background: var(--card); padding: 56px 26px 28px; } .hand h3 { font-size: 21px; font-weight: 500; 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: 28px; margin-top: 44px; } .hand-satz { font-size: 23px; max-width: none; } /* Einspalter: die Ziffer haengt nicht mehr ueber die Kante, sie steht in einer eigenen Spur links im Kartenpolster — wie bei den Stufenkarten. */ .hand { padding: 24px 22px 24px 84px; } } /* ═══════════════════════════════════════════════════════════════════════════ Nachtrag 20.08.2026. Append-only, nichts oben geaendert. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 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; } /* Karte A ist kurz, Karte B trägt den langen Kernbefund. Diagonal versetzt riss das ein Loch: unten links und oben rechts blieb je ein großes leeres Feld, und der Pfeil schwebte frei in der Mitte. Deshalb jetzt das ruhige Nebeneinander: beide Karten stehen nebeneinander und sind über align-self: stretch gleich hoch und oben bündig, der Pfeil sitzt mittig dazwischen. */ .studie2-diag { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); margin-top: 40px; align-items: center; } /* Natürliche Höhe: beide Karten stehen oben bündig, statt auf die Höhe der jeweils anderen Karte gestreckt zu werden. */ .s2-a { grid-column: 1; align-self: start; } .s2-b { grid-column: 3; align-self: start; } .s2-pfeil { grid-column: 2; align-self: center; width: clamp(44px, 5vw, 72px); height: auto; flex-shrink: 0; 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 { grid-column: 1 / -1; 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: 46px; transform: rotate(90deg); } .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); } /* Die Box bleibt durchgehend auf z-index: 3 und zieht vor dem Fließtext vorbei. Negative Tiefe ist die einzige Möglichkeit, ein Element hinter nicht positionierten Fließtext zu legen, und genau diese Möglichkeit ist bei einer eigenen Compositing-Ebene (position: fixed + will-change: transform) nicht verlässlich: Safari legt so eine Ebene hinter den Seitenhintergrund, die Box verschwindet an der Unterkante der Grafik. Ein Effekt, den ein Browser weglässt, ist teurer als der Effekt wert ist. Die Klasse .is-back wird im JS weiter gesetzt und bleibt als Haken für später stehen; sie hat hier nur keine Wirkung mehr. */ .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. --green-soft 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(--gruen-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 { --gruen-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 ab 1201 px ── Der Header bekommt 1520 px statt 1180 px und großzügiges Polster. */ @media (min-width: 1201px) { .nav { max-width: 1520px; padding: 0 48px; } } /* ── Studien-Block: Container-Überschriften größer und in den Marken-Farben ── Grün trägt jetzt beide Container-Überschriften; der Pfeil zwischen ihnen läuft im selben Grün. */ .s2-card h4 { font-size: clamp(16.5px, 1.45vw, 19px); letter-spacing: 1px; font-weight: 500; } .s2-a h4 { color: #954BD8; } .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-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 { padding: 0 40px; } } /* ═══════════════════════════════════════════════════════════════════════════ 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 { border-top: 0; margin-top: 64px; display: flex; flex-direction: column; gap: 22px; } #ablauf .day { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 28px; position: relative; padding: 34px 34px 34px 104px; 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 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 h3 { font-size: 23px; font-weight: 500; 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 zwei Spalten plus Treppe kein Platz mehr: Text unter den Titel, Treppe halbiert. */ @media (max-width: 980px) { #ablauf .day { grid-template-columns: minmax(0, 1fr); } #ablauf .day .desc { margin-top: 16px; } #ablauf .day:nth-child(2) { margin-left: 20px; } #ablauf .day:nth-child(3) { margin-left: 40px; } } /* Auf dem Telefon entfällt die Treppe 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: 26px 22px 26px 76px; gap: 0; } #ablauf .day:nth-child(2), #ablauf .day:nth-child(3) { margin-left: 0; } #ablauf .day h3 { font-size: 21px; } #ablauf .day .desc { 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; } } border-bottom: 1px solid var(--ink-20); padding: 6px 40px 18px; } /* Der Block fuer flache Fenster steht am Dateiende — hier stand er vor den /* 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 (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) { .nav { gap: 10px; } .logo-lang { display: none; } .logo-kurz { display: inline; } .nav .btn { 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; } } /* -- 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: 34px; 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; } /* -- 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; line-height: 1.45; } .result { padding: 22px 20px; } .result h3 { margin-bottom: 8px; font-size: 19px; } .result-grid { gap: 14px; } #ablauf .day { padding: 26px 20px 26px 72px; } #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 --------------------------------- Die Ziffer ist auf ausdruecklichen Auftrag zurueckgekehrt; ihre Regeln stehen im Nachtragsblock am Dateiende, inklusive der Verkleinerung und der seitlichen Platzierung fuer diesen Breakpoint. Sie steht nicht mehr im Kopfpolster, sondern in einer eigenen Spur links neben dem Inhalt. */ .hand { padding: 22px 20px 22px 68px; } /* margin-top steht im Abstandsblock weiter unten (40px) — hier nur der Zwischenraum, sonst widersprechen sich zwei Regeln desselben Umbaus. */ .hand-grid { gap: 24px; } /* -- 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: justify-content: space-between spannt die Marken über die volle Breite auf; die feste Spaltenlücke entfällt dafür, nur der row-gap bleibt für den Umbruchfall. Die li dürfen schrumpfen (min-width: 0 hebt die Mindestbreite aus dem Inhalt auf), damit alle Marken möglichst in eine Zeile passen — .lg zieht über min(220px, 100%) mit und verzerrt dank object-fit: contain nicht. Unter 900px wird ohnehin umbrochen; dort zentriert justify-content: center die Restzeilen, statt sie linksbündig zu stehen zu lassen (siehe Media Query unten). Keine Farben geändert. */ .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; justify-content: space-between; row-gap: 32px; } .logo-band li { display: flex; align-items: center; min-width: 0; } /* E8 (22.08.2026): Höhen um rund ein Viertel erhöht, die Abstufung zwischen rundem Zeichen und langem Schriftzug beibehalten. max-width mitgezogen: HelloFresh (5:1) braucht bei 41px Höhe etwa 205px — bei 160px hätte der Deckel die Höhe wieder auf rund 32px zurückgekürzt. Unter 900px gilt weiter der bestehende Mobil-Maßstab, dort wächst nichts mit. */ .logo-band .lg { display: block; width: auto; max-width: min(220px, 100%); object-fit: contain; } .lg-bayer { height: 50px; } .lg-otto { height: 31px; } .lg-edeka { height: 46px; } .lg-hellofresh { height: 41px; } .lg-kalkhoff { height: 21px; } .lg-goldgas { height: 31px; } .lg-hartmann { height: 36px; } .lg-lascana { height: 31px; } .lg-pfenning { height: 36px; } @media (max-width: 900px) { /* Umbruchfall Mobil: Restzeilen mittig statt linksbündig. */ .logo-band { row-gap: 22px; column-gap: 32px; justify-content: center; } .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 ), 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) { .logo b .logo-lang { display: none; } .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 INNERHALB des — 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 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 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; } .studie2 { margin-top: 44px; } .hand-grid { margin-top: 40px; } .vonzu-grid { margin-top: 36px; } .wandel-fig { margin-top: 32px; } } /* Die beiden Abstaende standen vorher als style-Attribut im Markup. Als Attribut waren sie per Media Query nicht zu erreichen. Der Abstand der presse-eyebrow haengt seit dem Eyebrow-Rueckbau am nachfolgenden Block. */ .split-head-weit { margin-top: 72px; } #fabian .press-cards { margin-top: 64px; } @media (max-width: 560px) { .split-head-weit { margin-top: 44px; } #fabian .press-cards { 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 muss mitgehen, sonst steht das Logo 6 px weiter innen als jede Textzeile darunter. */ .nav { padding: 0 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. Ausgenommen bleibt links der Platz fuer die Stufen-Ziffer (72 px, Nachtragsblock am Dateiende). */ .result, .hebel, .card, .fit, .tier { padding-left: 16px; padding-right: 16px; } #ablauf .day { padding-left: 72px; padding-right: 16px; } .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 `
    `. `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) { .nav .btn { 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 wurde mehrfach nachgezogen; die frueheren Regeln sind entfernt, damit nur eine Fassung dieser Farbe in der Datei steht. Die gueltige Fassung steht weiter unten. */ /* `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 Der Block ist im reinen Media-Query-Block weiter oben aufgegangen. */ /* -- 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 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); } /* -- 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; } } /* -- 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; } 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) ══════════════════════════════════════════════════════════════════════════ */ /* 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; } } @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 Hellgruen (--green-soft) ist eine Flaechenfarbe und als Schrift 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 Der Zwischenbereichs-Block ist mit den Nav-Links entfallen. */ /* ═══════════════════════════════════════════════════════════════════════════ 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 , nicht auf dem : `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; } /* ═══════════════════════════════════════════════════════════════════════════ Nachtrag 22.08.2026 — E7/E8/E9 (Feedback Fabian Rang) E7: neue Klassen — Utilities, Thesen-Tabelle, Zitat-Band, Studien-Absender, S2-Bullets, Presse-Quellenzeile, Stimmen-Portrait. E8: Logo-Band vergrößert (in-place weiter oben; nur oberhalb 900 px, das Telefon behält die Höhen aus dem 900er-Media-Query). E9: .grad-text entfernt (zwei Regeln weiter oben, im HTML unbenutzt); Kontrastnachweise mit Zahlen am Ende dieses Blocks, daraus folgt die lokale Abdunklung von --ink-40 auf paper-2-Grund. Dem Bestand fehlen drei Tokens, die diese neuen Klassen brauchen: --serif (Serifen-Tausch laut Kontrakt), --green und --green-soft (Ersatz für das gestrichene Violett, Umbenennung des Mint). Sie werden hier bereitgestellt, damit die Klassen nicht ins Leere laufen; der vollständige Token- und Schrifttausch bleibt der eigene Schritt dazu. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Dieses spaete :root gewinnt bei Gleichstand — es MUSS mitziehen, sonst bleibt eine alte Familie stehen, egal was der erste Block oben definiert. Der abschliessende Block am Dateiende zieht denselben Wert noch einmal nach; hier steht er, damit die Datei nicht an zwei Stellen widerspricht. */ --serif: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ── E7 · Utilities ──────────────────────────────────────────────────────── */ /* Akzentwort in h1/h2. --pink trägt als Schriftfarbe nur ab 24px (3,92:1 auf paper, 4,20:1 auf card — Rechnung im E9-Kommentar unten). Alle bisherigen Verwendungen stehen in Überschriften mit clamp-Minimum ≥ 24px. Nie im Fließtext und nie in Kleinschrift einsetzen. */ .c-pink { color: var(--pink); } .c-mark { background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%); } /* Visuell versteckt, im Accessibility-Tree (Caption der Thesen-Tabelle). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── E7 · Die Thesen als echte Tabelle ───────────────────────────────────── */ .thesen-tabelle-wrap { overflow-x: auto; } .thesen-tabelle { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--ink-20); } .thesen-tabelle thead th { /* Beschriftung statt Zierde: aufrecht, Versalien mit ruhiger Sperrung, in gedämpftem Grau. Labels, Ziffern und Bildunterschriften haengen am Label-Standard --mono (dieselbe Grotesk wie --serif, siehe Kommentar bei den Farbvariablen) — keine neue Schriftannahme noetig. */ font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-40); text-align: left; /* Kopfzeile rueckt enger an die erste These: sie beschriftet die Spalte, sie ist kein eigener Absatz. */ padding: 22px 28px 8px; /* Die violette Linie unter dem Kopf ist auf die Staerke und Farbe der uebrigen Trennlinien zurueckgenommen (1 px, --ink-20): Sie war der einzige farbige Strich zwischen grauen Linien und wirkte genau dadurch wie ein Fremdkoerper. Die Farbe der Tabelle lebt jetzt nur noch an den Frage-Kanten und den grossen Ziffern — eine Farbe pro Ort, keine zwei konkurrierenden. */ border-bottom: 1px solid var(--ink-20); } .thesen-tabelle tbody th, .thesen-tabelle tbody td { text-align: left; vertical-align: top; font-weight: 400; padding: 28px; border-bottom: 1px solid var(--ink-20); } .thesen-tabelle tbody tr:last-child th, .thesen-tabelle tbody tr:last-child td { border-bottom: 0; } /* 60 zu 40: die These traegt Titel plus Erlaeuterung, die Frage nur zwei bis drei Zeilen — der linken Spalte gehoert der Raum. */ .thesen-tabelle tbody th[scope="row"] { width: 60%; } .thesen-tabelle tbody th h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; } .thesen-tabelle .th-desc { display: block; margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-60); } .thesen-tabelle .th-frage { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); /* Dezenter eigener Grund fuer die Rueckfrage: links steht die Beobachtung, rechts die Frage an den Leser — die Flaeche zieht die Grenze sichtbar, bevor man das erste Wort liest. */ background: var(--paper-2); /* Die Frage umfasst nur etwa drei Zeilen gegenueber der langen These; mittig sitzt sie ruhig in ihrer Zelle, statt oben im Leeren zu haengen. Die Thesen-Zelle bleibt bewusst oben ausgerichtet, sonst wanderte ihre Ueberschrift ebenfalls in die Mitte. */ vertical-align: middle; border-left: 3px solid var(--yellow); } /* Unter 720px wird aus der Tabelle eine Kartenliste: der Kopf verschwindet mit derselben Technik wie .sr-only (seine Spaltentitel haben ohne Spaltenkontext keine Bedeutung mehr), jede Zeile wird eine Karte. */ @media (max-width: 719px) { .thesen-tabelle thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .thesen-tabelle, .thesen-tabelle tbody, .thesen-tabelle tr, .thesen-tabelle th, .thesen-tabelle td { display: block; width: 100%; } .thesen-tabelle { border: 0; background: transparent; } .thesen-tabelle tr { border: 1px solid var(--ink-20); border-radius: 10px; background: var(--card); margin-top: 16px; overflow: hidden; } /* Dieselbe Spezifität wie die 60%-Regel darüber, später im Quelltext — gewinnt also. Feste Spaltenbreiten gelten hier nicht mehr: beide Zellen laufen auf auto. */ .thesen-tabelle tbody th[scope="row"], .thesen-tabelle tbody td { width: auto; } .thesen-tabelle tbody th, .thesen-tabelle tbody td { padding: 22px 20px; border-bottom: 0; } /* Trenner zwischen These und Frage, auch in der letzten Karte — deshalb mit der last-child-Stufe der Basisregel. */ .thesen-tabelle tbody tr:last-child th, .thesen-tabelle tbody th { border-bottom: 1px solid var(--ink-20); } } /* ── E7 · Zitat-Band in der Seitenmitte ──────────────────────────────────── */ .zitat-band { margin: 96px 0; text-align: center; } .zitat-band blockquote { position: relative; margin: 0 auto; max-width: 24ch; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 42px); font-weight: 500; line-height: 1.22; letter-spacing: -0.4px; text-wrap: balance; } /* Das große Anführungszeichen liegt hinter dem Text (negativer z-index gegen den Blockquote-Inhalt) und dupliziert nur das echte „ im Satz — Dekoration. */ .zitat-band blockquote::before { content: '„'; position: absolute; z-index: -1; top: -0.08em; left: -0.28em; font-size: 2.8em; line-height: 1; color: var(--yellow); pointer-events: none; } .zitat-band figcaption { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-60); } .zitat-band figcaption::before { content: ''; display: inline-block; width: 26px; height: 1px; background: var(--ink-20); vertical-align: middle; margin-right: 10px; } @media (max-width: 640px) { .zitat-band { margin: 64px 0; } .zitat-band blockquote { font-size: clamp(23px, 6.4vw, 28px); } } /* ── E7 · Absenderzeile der Studie (MIT-Logo) ────────────────────────────── */ .studie2-absender { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; } .mit-logo { display: block; height: 34px; width: auto; } .studie2-absender span { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-60); } /* ── E7 · Quellenzeile der Presse-Karten ─────────────────────────────────── Auftrag: „Leute erkennen die Sachen an ihrem Logo.“ Die Logos liegen in ihren Originalfarben vor; die Höhe wird je Marke gesetzt, weil ein rundes Zeichen anders wirkt als ein langer Schriftzug — dieselbe Logik wie im Logo-Band. */ .press-quelle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* Präfix .press-cards macht die Regeln unabhängig von der Reihenfolge im Stylesheet: früher schlug .pc-img img (0,1,1) gegen .press-logo (0,1,0) durch — die Collage zwang den Logos width:100%, aspect-ratio 3/2 und object-fit:cover auf, sie erschienen riesig und angeschnitten. */ .press-cards .press-logo { display: block; width: auto; max-width: 68%; height: auto; aspect-ratio: auto; object-fit: contain; border: 0; } .press-cards .pl-handelsblatt { height: 19px; } /* langer Serifen-Schriftzug */ .press-cards .pl-brandeins { height: 22px; } .press-cards .pl-wiwo { height: 20px; } .press-cards .pl-t3n { height: 17px; } /* Unter 641 px läuft die Quellenzeile in voller Kartenbreite (der 640er-Media-Query weiter oben legt sie unter Bild und Text) — die 68-%-Drossel würde das Logo dort nur unnötig klein halten. Steht hinter der Grundregel, damit es bei gleicher Spezifität gewinnt. */ @media (max-width: 640px) { .press-cards .press-logo { max-width: none; } } .press-datum { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-40); /* Der Emoji-anfällige Pfeil ist aus dem Markup raus — die Unterstreichung zeigt jetzt allein, dass hier ein Link beginnt. Das Marken-Logo daneben ist eine Bilddatei und lässt sich nicht unterstreichen; es bleibt das einzige Element der Quellzeile ohne dieses Link-Signal. */ text-decoration: underline; text-underline-offset: 3px; } /* Die Bildkarte trägt selbst kein Polster; das

    darüber nimmt 18px Seitenluft, die Quellenzeile zieht mit. Erst ab 641px — darunter legt der 640er-Media-Query weiter oben die Zeile unter Bild und Text und setzt ihr Polster selbst. */ @media (min-width: 641px) { .pc-img .press-quelle { padding: 0 18px 18px; } } /* ── E7 · Portrait im Stimmen-Zitat ──────────────────────────────────────── Ersetzt den 40px-Punkt (.quote-attr .dot ist mit dem alten Markup entfallen, die Regel ist oben entfernt). Solange das Foto fehlt, zeigt .is-leer einen neutralen Kreis in Grün-Soft; color: transparent bleibt als Vorsorge für den Fall, dass doch wieder ein img ohne src im Markup landet. Der Platzhalter ist inzwischen ein Span statt des kaputten img (siehe Kommentar in index.html) — deshalb steht display:block in .is-leer: erst als Blockelement wirken width/height aus der gemeinsamen Regel .stimme-portrait auf den Span. Die gemeinsame Regel gilt unverändert für beide Fälle (img und Span). */ .stimme-portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper-2); flex-shrink: 0; } .stimme-portrait.is-leer { display: block; background: var(--mint); color: transparent; } /* ── Kontrastbefund, NICHT umgesetzt ─────────────────────────────────────── Gerechnet: --ink-40 #6A6454 erreicht auf --paper-2 #EBE5D6 nur 4,24:1 und verfehlt damit die 4,5:1 für Fließtext (auf --paper 4,76:1 und auf --card 5,09:1 besteht die Farbe). Betroffen ist jede kleine Ink-40-Schrift direkt auf paper-2 in #gefahr, #ablauf und #kontakt. Ein Abdunkeln auf #5C665F würde 4,79:1 erreichen. Bewusst NICHT eingebaut: das Farbschema bleibt auf Entscheidung vom 22.08.2026 unverändert. Offener Punkt zur Freigabe. */ /* ── E9 · Kontrastnachweis (gerechnet, nicht geschätzt) ──────────────────── Formel: L = 0,2126·R + 0,7152·G + 0,0722·B über linearisierte Kanäle (c ≤ 0,03928 → c/12,92, sonst ((c + 0,055) / 1,055)^2,4); Kontrast = (L_hell + 0,05) / (L_dunkel + 0,05). Luminanzen: --paper #F5F2E9 → 0,897 --card #FCFAF3 → 0,965 --paper-2 #EBE5D6 → 0,794 --pink #F350A6 → 0,192 --green #9B4FE0 → 0,112 --ink-40 #6A6454 → 0,149 #5C665F → 0,126 --pink #F350A6 als Schriftfarbe auf --paper : 0,947 / 0,242 = 3,92:1 auf --card : 1,015 / 0,242 = 4,20:1 → 4,5:1 verfehlt, 3:1 erfüllt. Einsatz darum nur als große Schrift: ab 24px, oder ab 18,66px bei fett. Alle aktuellen .c-pink-Verwendungen stehen in h1/h2-Überschriften; das kleinste clamp-Minimum davon liegt bei exakt 24px (Hebel-Head, Studien-Titel) — die Bedingung hält. .c-pink gehört nicht in Fließtext und nicht in Kleinschrift. --green #9B4FE0 als Schriftfarbe auf --paper : 0,947 / 0,162 = 5,85:1 ✓ auf --card : 1,015 / 0,162 = 6,27:1 ✓ → erfüllt 4,5:1 überall, keine Einschränkung. --ink-40 #6A6454 auf --paper-2 #EBE5D6 0,844 / 0,199 = 4,24:1 → verfehlt 4,5:1 für Fließtext, erfüllt 3:1 (große Schrift). Zum Vergleich: auf --paper 4,76:1, auf --card 5,09:1 — dort besteht die Farbe unverändert. Betroffen war jede kleine Ink-40- Schrift direkt auf paper-2: in #gefahr und #ablauf (Eyebrow, Day-Notes, Tier-Note, Anschluss-Chip, SST-Bezug, Studien-Quelle samt Beleg- Aufklapper) sowie in #kontakt, das seit dem Schwarz-Rückbau ebenfalls auf paper-2 liegt (Eyebrow, Adresse, Zweitweg). Die Regel darüber stellt den Token in genau diesen Sektionen um. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ Neue Marke: Akzentwörter in Überschriften, Schrift-Umschalter (Abnahme) Append-only, ans Dateiende — der letzte Block gewinnt. ═══════════════════════════════════════════════════════════════════════════ */ /* Genau EIN farbiges Wort oder Halbsatz je Sektionsüberschrift. .c-mark legt den gelben Textmarker unter das Wort. */ .c-pink { color: var(--pink); } .c-mark { background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 94%, transparent 94%); } /* Abnahme-Umschalter für die Schrift: ?font=a|b|c am -Element lässt den Auftraggeber drei Schriftrichtungen live vergleichen. Fliegt nach der Entscheidung raus. */ html[data-font="b"] { --serif: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif; --sans: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif; } html[data-font="c"] { --serif: 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --sans: 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* In Fassung b stehen die Eyebrows nicht kursiv; in c bleibt die Kursive, sie ist dort der Reiz. */ /* html[data-font="b"] .eyebrow { font-style: normal; } <- entfaellt, .eyebrow ist global aufrecht */ /* ═══════════════════════════════════════════════════════════════════════════ Nachtrag: Die Ziffern kehren zurueck. Ausdruecklicher Auftrag des Auftraggebers — und bewusst nur fuer zwei Stellen: die drei Container unter dem Hero (.hand) und die drei Stufenkarten im Ablauf (#ablauf .day). Ueberall sonst bleibt die Seite ohne Nummerierung. Deshalb stehen alle neuen Regeln gebuendelt hier am Ende; angefasst wurden oben ausschliesslich die Polster-Werte (plus position: relative), damit die Ziffern Platz haben. ═══════════════════════════════════════════════════════════════════════════ */ /* -- Stelle A: Die drei Container unter dem Hero --------------------------- Zaehler statt Markup:

      mit seinen drei
    • bleibt unberuehrt, die Ziffer kommt aus counter-reset und counter(). .hand bringt position: relative bereits mit — geprueft, nicht doppelt gesetzt. Oberhalb 900 px (dreispaltig) ragt die Ziffer wie in der frueheren Fassung halb ueber die Kartenkante; im Einspalter steht sie seitlich im Kartenpolster, wie bei den Stufenkarten im Ablauf. Gelb und Mint erreichen als reine Fuellfarbe auf --paper keinen brauchbaren Kontrast; die Kontur in --ink haelt die Form lesbar. */ .hand-grid { counter-reset: hand; } .hand::before { counter-increment: hand; content: counter(hand); position: absolute; pointer-events: none; top: -52px; left: -14px; font-size: 104px; line-height: 1; font-weight: 500; letter-spacing: -5px; -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); } /* Ziffer folgt denselben Breakpoints wie die Polster oben; ab 900 px wechselt sie von der ueberhaengenden Platzierung zur seitlichen im Kartenpolster. */ @media (max-width: 900px) { .hand::before { top: 20px; left: 20px; font-size: 56px; letter-spacing: -3px; } } @media (max-width: 560px) { .hand::before { top: 18px; left: 16px; font-size: 46px; } } /* -- Stelle B: Die drei Stufenkarten im Ablauf ------------------------------ Gleiche Technik, andere Platzierung: die Ziffer steht neben dem Inhalt in einer eigenen Spur links im Kartenpolster — nicht ueber der Ueberschrift, nicht ueber der Kante haengend. Den noetigen Platz links schaffen die Polster-Aenderungen in den bestehenden #ablauf-.day-Regeln oben; dort steht jetzt auch position: relative. pointer-events: none haelt die Ziffer aus dem Weg von Maus und Touch. */ #ablauf .day-list { counter-reset: stufe; } #ablauf .day::before { counter-increment: stufe; content: counter(stufe); position: absolute; left: 30px; top: 30px; font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -3px; -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); } /* Ziffer skaliert mit denselben Breakpoints wie die Polster oben. */ @media (max-width: 700px) { #ablauf .day::before { font-size: 48px; left: 22px; top: 24px; letter-spacing: -2px; } } @media (max-width: 560px) { #ablauf .day::before { font-size: 44px; left: 18px; } } /* ————— Hero: geteilte Textspalte (.hero-a / .hero-b) ————— Die Textspalte ist im HTML in zwei Geschwister geteilt, damit das Bild auf schmalen Geräten ZWISCHEN Fließtext und Button rutscht. Das Grid ordnet beide Teile auf dem Desktop wieder übereinander in Spalte 1 ein — die Optik dort bleibt exakt wie beim bisherigen Layout. */ /* Positionierungsbezug für die absolut gesetzten Blobs in .hero-a und die .hero-absender in .hero-b (war früher der Inline-Stil der Textspalte). */ .hero-a, .hero-b { position: relative; } /* Kein row-gap im Grid: Die 56 px des Spaltenabstands dürfen nicht als Lücke ZWISCHEN .hero-a und .hero-b fallen — den Vertikal-Rhythmus liefern wie bisher allein die Margins der Absätze. Gilt auch mobil; dort springt der Abstand zum Bild unten explizit wieder ein. */ .hero-grid { row-gap: 0; } /* Desktop ab 961 px: Spalten bleiben 1.15fr/0.85fr. Beide Textblöcke zurück in Spalte 1, das Bild rechts über beide Zeilen, vertikal zentriert — ergibt wieder genau das alte Bild einer durchgehenden Textspalte. */ @media (min-width: 961px) { .hero-a { grid-column: 1; grid-row: 1; } .hero-b { grid-column: 1; grid-row: 2; } .hero-figure { grid-column: 2; grid-row: 1 / 3; align-self: center; } } /* Bis 960 px eine Spalte in Quelltextreihenfolge: Text, Bild, Button. Weil das row-gap oben auf 0 steht, bekäme sonst alles zusammengeklebt — das Bild bekommt seinen Abstand nach oben und unten jetzt selbst (das lieferte früher gap: 64 px mit). Die Text-Blöcke behalten ihre bisherigen Margins. */ @media (max-width: 960px) { .hero-figure { margin: 40px 0; } } /* Nur bis 640 px ausgeblendet (Ansage 23.08.2026): Der erste Screen auf dem Telefon soll nur noch Überschrift, Erklärsatz, Bild und einen Knopf zeigen. Ab 641 px bleiben alle drei Zeilen sichtbar. */ @media (max-width: 640px) { .hero .eyebrow, .hero-trust, .hero-absender { display: none; } } /* Der Hero-CTA ist jetzt EIN einzelner Knopf. Bis 560 px streckt ihn die bestehende cta-row (column + align-items: stretch) über die volle Breite — hier zusätzlich die Beschriftung mittig. Ab 561 px hält width: auto seine natürliche Breite fest, kein Vollbreitenlauf auf dem Desktop. */ @media (max-width: 560px) { .hero .cta-row .btn { text-align: center; } } @media (min-width: 561px) { .hero .cta-row .btn { width: auto; } } /* Die rechte Karte traegt nach dem Streichen von Ueberschrift und 5-%-Satz keinen Kopfbereich mehr und beginnt direkt mit dem Trenner-Absatz. Der Trenner ist als Abschluss zwischen zwei Absaetzen gedacht: als erstes Kind haette seine Linie nichts, wovon sie trennt, und der Vorabstand drueckte die erste Zeile von der Kartenkante weg. Beides entfaellt, solange .s2-trenn vorne steht — kommt oben wieder ein Absatz hinzu, greift die Regel von selbst nicht mehr. */ .s2-card p.s2-trenn:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Die vollstaendige Quellenangabe steht im Aufklapper darunter bereits vollzaehlig; auf dem Telefon lief sie auf vier Zeilen Grau hinaus und verdraengte den Link. Bis 640 px bleibt deshalb nur der Link stehen, ab dort hat die Angabe wieder Platz in einer Zeile. */ @media (max-width: 640px) { .studie2-quelle .quelle-lang { display: none; } } /* ── Stelle C: Die zwei Thesen in der Tabelle ────────────────────────────── Zaehler statt Markup: an der Tabelle selbst wurde nichts angefasst, die Ziffer haengt an tbody th[scope="row"]::before. Gelb und Violett erreichen als reine Fuellfarbe auf --paper keinen brauchbaren Kontrast — dieselbe Kontur in --ink wie bei den Stellen A und B. Anders als bei Stelle A ragt die Ziffer nirgends ueber eine Kante: sie steht in einer eigenen Spur links im Zellenpolster, der Text rueckt auf 104 px ein. Die zweite These faehrt Violett statt Gelb, damit Ziffer und Kante an der Frage zusammenpassen wie im Hero und im Ablauf. Damit tragen jetzt drei Stellen der Seite Nummern: die drei Container unter dem Hero, die drei Stufenkarten im Ablauf und die beiden Thesen — Erweiterung auf ausdrueckliche Ansage des Auftraggebers vom 23.08.2026. Ueberall sonst bleibt die Seite ohne Nummerierung. */ .thesen-tabelle tbody { counter-reset: these; } .thesen-tabelle tbody th[scope="row"] { position: relative; padding-left: 104px; } .thesen-tabelle tbody th[scope="row"]::before { counter-increment: these; content: counter(these); position: absolute; left: 28px; top: 28px; font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -3px; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; pointer-events: none; } .thesen-tabelle tbody tr:nth-child(1) th[scope="row"]::before { color: var(--yellow); } .thesen-tabelle tbody tr:nth-child(2) th[scope="row"]::before { color: var(--violet); } /* Dieselbe Logik an der Frage: gelbe Kante zur ersten These, violette zur zweiten — sonst stuende die violette Ziffer neben einer gelben Kante. */ .thesen-tabelle tbody tr:nth-child(2) .th-frage { border-left-color: var(--violet); } /* Unter 720 px werden die Zeilen zu Karten; die Ziffer schrumpft auf 48 px und folgt den kleineren Polstern (22/20 px), damit sie die Ueberschrift nicht erschlaegt. Die Mobil-Polsterregel oben setzt mit geringerer Spezifitaet und wuerde gegen die 104-px-Regel verlieren — ohne diesen Ausdruck bliebe das linke Polster auf dem Telefon offen. */ @media (max-width: 719px) { .thesen-tabelle tbody th[scope="row"] { padding-left: 84px; } .thesen-tabelle tbody th[scope="row"]::before { font-size: 48px; left: 20px; top: 22px; letter-spacing: -2px; } } /* ═══════════════════════════════════════════════════════════════════════════ Fabian: drei Grid-Kinder statt zwei Der eingekreiste graue Absatz ist gefallen, das Bild rueckt in die Mitte. Dieselbe Logik wie im Hero: links der Text in zwei Stufen, rechts das Bild ueber beide Zeilen, vertikal zentriert — so bleibt die alte Balance zwischen Textblock und Polaroid erhalten, es fehlt nur der eine Absatz. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 961px) { .fac-a { grid-column: 1; grid-row: 1; } .fac-b { grid-column: 1; grid-row: 2; } .fac-media { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } /* Unterhalb des Desktops stapelt alles: Absatz, Bild, Absatz, Knopf. Der Zeilenabstand des Grids steht global auf 0, damit oben keine 64-px-Luecke zwischen den beiden Textstufen klafft — den Luftraum um das Bild setzt deshalb dieser Rand, rund 40 px oben und unten. Dem Absatz darunter wird der Standard-Abstand genommen, sonst wuerden Rand und Abstand summieren. */ @media (max-width: 960px) { .fac-media { margin: 40px 0; } .fac-b .lead:first-child { margin-top: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ KARUSSELL-STRECKEN AM TELEFON — Hebel und Presse, ein gemeinsames Muster Bis 640 px laufen beide Kartengruppen als seitliche Strecke mit Einrasten. Die nächste Karte bleibt deutlich angeschnitten sichtbar (82 % resp. 78 % Kartenbreite) — das ist der einzige Hinweis darauf, dass es weitergeht, Punkte oder Pfeile kämen nicht an die Bildsprache heran. Randlos bis an den Bildschirmrand: negative Aussenmargen heben das .wrap-Seitenpolster auf (22 px bis 640 px, darunter 16 px), dasselbe Innenpolster gibt die Höhe innerhalb der Strecke zurück — die erste Karte beginnt bündig mit dem übrigen Text, die letzte klebt nicht am Rand. scroll-padding-inline in gleicher Höhe verschiebt die Einrast-Kante mit; ohne es würde die erste Karte unter dem Innenpolster einrasten. align-items wird bewusst NICHT gesetzt: der Flex-Standard stretch sorgt genau wie vorher das Grid für gleich hohe Karten. overflow:hidden und die farbige Oberkante der Hebel-Karten (::before) bleiben unangetastet. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Gleiche Spezifität wie die Grundregeln, aber später im File — der Append gewinnt dadurch gegen .hebel-grid (display:grid) und gegen .press-cards/ .pc-4 mitsamt ihrem 640er-Umbau. */ .hebel-grid.hebel-kern, .pc-img { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; padding-inline: 22px; scroll-padding-inline: 22px; scrollbar-width: none; } .hebel-grid.hebel-kern::-webkit-scrollbar, .pc-img::-webkit-scrollbar { display: none; } .hebel-grid.hebel-kern > .hebel, .pc-img > a { flex: 0 0 auto; scroll-snap-align: start; } .hebel-grid.hebel-kern > .hebel { width: 82%; } .pc-img > a { width: 78%; } /* tabindex="0" macht beide Strecken tastatur erreichbar; ein scrollbarer Bereich ohne fokussierbares Kind wäre sonst eine Sackgasse. Weil die Strecke randlos bis an den Screenrand läuft, muss der Fokusrahmen mit negativem Offset NACH INNEN zeichnen — ein positiver läge halb außerhalb des Viewports und wäre an den Seiten unsichtbar. */ .hebel-grid.hebel-kern:focus-visible, .pc-img:focus-visible { outline: 2px solid var(--violet); outline-offset: -4px; } } @media (max-width: 375px) { /* Dasselbe Aufheben-Zurückgeben mit den schmaleren wrap-Polstern. */ .hebel-grid.hebel-kern, .pc-img { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } } /* ——— Presse-Karten in der Strecke: Miniatur-Umbau zurückgenommen ——— Der 640er-Block weiter oben baut die Karten zu einer Zeile mit 104 px Miniatur links neben dem Text um. In der Strecke tragen sie wieder ihr volles Bild oben und den Text darunter wie auf dem Desktop — ein 104 px Streifen neben 78-%-Text wäre in der Reihe kaum noch lesbar. Dieser Block liegt später im File und stellt darum bei gleicher Spezifität jeden dort gesetzten Wert zurück: Grid wird wieder Flex-Spalte, die Grid-Platzierungen an Bild, Text und Quellzeile laufen damit ohnehin ins Leere und werden auf auto gestellt, das Bild wieder voll breit mit harter Unterkante zum Text. align-items:stretch hebt das start des Umbaus auf — sonst schrumpften die Kinder auf Inhaltbreite; gap:0 erledigt auch das column-gap aus dem 375er-Nachtrag. */ @media (max-width: 640px) { .pc-img a { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; } .pc-img a > img { grid-column: auto; grid-row: auto; width: 100%; height: auto; border: 0; border-bottom: 1px solid var(--ink-20); border-radius: 0; } .pc-img p { grid-column: auto; grid-row: auto; padding: 18px 18px 0; font-size: 15px; line-height: 1.45; } .pc-img .press-quelle { grid-column: auto; grid-row: auto; padding: 0 18px 18px; } } /* ————— Pfeile im Fuß: gezeichnet statt getippt ————— Im Markup stand das Literal ↗ (U+2197 ohne Variation Selector) — genau deshalb hat iOS es als buntes Emoji gerendert. Ein angehängtes U+FE0E ist kein verlässlicher Schutz: nicht jedes System beachtet ihn, und ob die Textschrift den Glyphen überhaupt führt, ist ebenso wenig garantiert. Die SVG-Maske über einem currentColor-Kästchen ist der einzige Weg, der plattformunabhängig sicher kein Emoji ergibt — und weil die Farbe über currentColor läuft, greift der vorhandene Violett-Hover des Fußes unverändert. aria-hidden ist nicht nötig: CSS-Content erzeugt keinen Text im Barrierebaum. */ .foot .links a::after { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-left: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M7 17L17 7M9 7h8v8'/%3e%3c/svg%3e") center / contain no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M7 17L17 7M9 7h8v8'/%3e%3c/svg%3e") center / contain no-repeat; } /* Auf sehr schmalen Geraeten (iPhone SE und aehnliche) frisst die 84-px-Spur der Thesen-Ziffer zu viel von der Textbreite — bei 320 px blieben nur rund 190 px fuer die These selbst. Unter 400 px rueckt die Ziffer deshalb naeher an die Kante, dieselben Werte wie an den Hand-Containern. */ @media (max-width: 400px) { .thesen-tabelle tbody th[scope="row"] { padding-left: 72px; } .thesen-tabelle tbody th[scope="row"]::before { font-size: 42px; left: 16px; top: 20px; } } /* Der Umschalter-Nachtrag fuer Fassung b ist gegenstandslos geworden: seit dem Schrifttausch stehen die Eyebrows in JEDER Fassung aufrecht. Die Regel bleibt als Kommentar stehen, damit niemand sie spaeter „reparierend" wieder einbaut. */ /* ═══════════════════════════════════════════════════════════════════════════ Schriftwechsel auf Switzer — Absicherung am Dateiende. Das :root oben traegt jetzt Switzer. Haelt diese Datei an spaeterer Stelle noch ein zweites :root mit der alten Familie, zieht dieser abschliessende Block ihm dasselbe Ziel: gleiche Spezifitaet, aber zuletzt im Quelltext — er gewinnt damit gegen jede fruehere Festlegung. Die Abnahme-Fassungen bleiben unangetastet: html[data-font="b"] und html[data-font="c"] wiegen eine Stufe schwerer als :root und schlagen diesen Block daher in jedem Fall. ═══════════════════════════════════════════════════════════════════════════ */ :root { --serif: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; --sans: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ── Thesen-Tabelle · Mobil-Ausnahmen zu den Uebersichtlichkeits-Anpassungen ─ Unter 719 px ist die Tabelle eine Kartenliste (display: block, Kopfzeile per sr-only-Technik versteckt). Dort darf nichts aus der Spaltenansicht nachwirken: Die Mittelstellung der Frage-Zelle wird ausdruecklich zurueckgesetzt — auf Blockboxen wirkt vertical-align zwar nicht, aber die Ausnahme steht schwarz auf weiss, falls die Karten je wieder in ein Raster oder eine Tabelle zurueckfallen. Und die Frage-Zelle verliert ihren eigenen Grund: Die Karte bringt var(--card) bereits mit, ein zweiter Grund zoege sonst ein helles Band quer durch jede Karte. Die farbige Kante links an der Frage bleibt auch mobil bestehen — sie ist dort die einzige Erinnerung an die Spaltenfarbe. Die neuen Kopfzeilen- Stile (Versalien, Sperrung) betreffen nur die versteckte Kopfzeile und brauchen hier keinen Gegenausdruck. */ @media (max-width: 719px) { .thesen-tabelle tbody th[scope="row"], .thesen-tabelle tbody td { vertical-align: top; } .thesen-tabelle .th-frage { background: transparent; } } /* Die zweite Karte bekommt das Gegenstueck zur violetten Ueberschrift zurueck — gruen statt violett, damit Untersuchung und Erkenntnis als Paar lesbar bleiben. */ .s2-b h4 { color: #4E7D59; } /* Die Trennlinie war als Bruch zwischen zwei Absaetzen gedacht; direkt unter einer frischen Ueberschrift wuerde sie nur wie eine Unterstreichung wirken. */ .s2-card h4 + p.s2-trenn { margin-top: 14px; padding-top: 0; border-top: 0; } /* Vorspann und Tabelle klebten aneinander — Abstand laesst die Tabelle als eigenes Element auftreten statt als Fortsatz des Graukastens. */ .thesen-tabelle-wrap { margin-top: 34px; } @media (max-width: 560px) { /* Auf kleinen Schirmen knapper bemessen, damit der Inhalt nicht zu weit nach unten rueckt. */ .thesen-tabelle-wrap { margin-top: 24px; } } /* Sechs farblose Karten waren ununterscheidbar — ein kurzer Balken vor der Ueberschrift ordnet jede Karte farblich zu. Er bleibt reine Flaeche ohne Text und braucht deshalb keinen Kontrastwert; Gelb und Mint waeren als Schriftfarbe unlesbar, als kleine Flaeche sind sie unbedenklich. */ .result h3::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--result-akzent); margin-bottom: 12px; } /* Drei Karten pro Zeile: 1-2-3 / 1-2-3 stellt sicher, dass in keiner Reihe dieselbe Farbe zweimal auftritt. Mint traegt als kleine Flaeche auf hellem Kartengrund nicht und ist dort kaum vom Untergrund zu trennen — Karte 4 nutzt stattdessen das Gruen der Ueberschrift „Die Erkenntnis" im Studien-Block. */ .result:nth-child(1) { --result-akzent: var(--yellow); } .result:nth-child(2) { --result-akzent: var(--violet); } .result:nth-child(3) { --result-akzent: var(--pink); } .result:nth-child(4) { --result-akzent: #4E7D59; } .result:nth-child(5) { --result-akzent: var(--yellow); } .result:nth-child(6) { --result-akzent: var(--violet); } @media (max-width: 560px) { /* Als Liste ist der Balken nur noch Anker am Zeilenanfang — darum kleiner bemessen. */ .result h3::before { width: 24px; margin-bottom: 9px; } } /* 23.08.2026: Quelle der Warteschlangen-Grafik wird eine verlinkte Wortmarke — der ausgeschriebene Quellensatz entfällt, McKinsey erscheint nur noch als nachgebaute Wortmarke mit Link. */ .schlange-quelle { text-align: right; margin: 14px 0 0; } .schlange-quelle a { text-decoration: none; opacity: .52; transition: opacity .25s ease; } .schlange-quelle a:hover, .schlange-quelle a:focus-visible { opacity: 1; } .wm-mckinsey { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; letter-spacing: .2px; color: var(--ink); white-space: nowrap; } @media (max-width: 560px) { .schlange-quelle { text-align: left; } .wm-mckinsey { font-size: 15px; } } @media (hover: none) { .schlange-quelle a { padding-block: 10px; } } /* 23.08.2026: MIT-Studie — der Link wandert aus der Quellzeile nach oben in den Studientitel „The GenAI Divide“; die untere Linkzeile entfällt ersatzlos. Hinweis: Die Regel `.studie2-quelle .quelle-lang { display: none; }` in der Medienabfrage unter 640px bleibt stehen, ist aber tot, da die Klasse `quelle-lang` nicht mehr vorkommt. */ .studie2-quelle > .s2-belege:first-child { margin-top: 0; } .studie2-absender span a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s ease; } .studie2-absender span a:hover, .studie2-absender span a:focus-visible { color: var(--violet); } /* ── Nacharbeiten zur HTML-Kürzung, Stand 23.08.2026 ─────────────────── Vier Elemente wurden aus dem HTML entfernt; die folgenden Regeln sind reine Anhänge, bestehende Blöcke bleiben unangetastet. */ /* ── a) Phantom-Zeile im Mobil-Gitter der Studie-2-Diagnose ──────────── Die Medienabfrage weiter oben setzt grid-template-rows: auto auto auto auto für VIER Kinder (.s2-a, .s2-pfeil, .s2-b, .studie2-quelle). Es sind nur noch drei übrig (.s2-a, .s2-pfeil, .s2-b). Die vierte explizite Zeile bliebe leer stehen und bekäme über gap: 20px zusätzlich je einen Abstand nach oben — unten klafft daher eine leere Lücke. Korrektur auf drei Zeilen. Der Desktop-Zustand von .studie2-diag definiert KEINE expliziten Zeilen (nur Spalten); dort entstehen implizite Zeilen nur für tatsächlich vorhandene Kinder — kein Handlungsbedarf. */ @media (max-width: 760px) { .studie2-diag { grid-template-rows: auto auto auto; } } /* ── b) Hero-Unterbau: Kein Eingriff nötig ───────────────────────────── div.hero-b trägt jetzt nur noch div.cta-row mit dem Knopf. Der Vertikal-Abstand zwischen .hero-a und .hero-b wurde laut Kommentarblock weiter oben ausschließlich über „die Margins der Absätze“ geliefert. Die konkreten Margin-Werte von .hero-trust und .hero-absender stehen NICHT im vorliegenden Auszug — damit fehlt jeder Beleg für einen Ersatzwert, und .cta-row bzw. .hero-b bleiben unverändert. */ /* ── c) Abstand unter der Grafik: kein Eingriff ─────────────────────── Der Vorschlag, `.stufen-liste` einen oberen Abstand zu geben, greift ins Leere: die Liste ist an JEDER Breite visuell versteckt (position: absolute, 1x1 px, clip-path) und nur die vorgelesene Fassung der Grafik. Den Rhythmus nach der Grafik traegt `.studie2` mit `margin-top: 68px` (44px unter 760px). Nachgemessen am 23.08.2026, deshalb bleibt es dabei. */ /* ── d) Tote Regeln — Bestandsaufnahme für das nächste große Aufräumen ─ Die folgenden Selektoren greifen seit der HTML-Kürzung ins Leere. Weil main.css nur ANGEHÄNGT wird, bleiben alle Fassungen stehen; sie können erst beim nächsten großen Aufräumen gelöscht werden. Zeilen- angaben beziehen sich auf den oben geprüften Auszug (Zeile 1 = „.s2-zitat“); Regeln, die VOR dem Auszug liegen, sind entsprechend markiert und müssen beim Aufräumen per Suche gefunden werden. • „.hero .eyebrow“, Zeile 132 (in @media max-width 640px) — p.eyebrow ist aus dem Hero entfernt. • „.hero-trust“, Zeile 133 (in @media max-width 640px) — p.hero-trust ist entfernt. • „.hero-absender“, Zeile 134 (in @media max-width 640px), außerdem erwähnt im Kommentar ab Zeile 94 — p.hero-absender ist entfernt. • „.day-note“ in der Gefahr-Sektion — liegt VOR dem Auszug, Zeile per Suche ermitteln. ACHTUNG: „.day-note“ bleibt an zwei anderen Stellen in Gebrauch (#ablauf und .stimme-solo)! Nur die Regel für die Gefahr- Sektion darf weg, niemals alle .day-note-Fassungen. • „.studie2-quelle“, erste Fassung ab Zeile 55 (inkl. „.studie2-quelle a“, Zeile 63) — div.studie2-quelle ist als viertes Kind entfernt. • „.studie2-quelle“, zweite Fassung ab Zeile 74 („Quellzeile in die freie Ecke unten links“, inkl. „.studie2-quelle a“, Zeile 81, und die Mobil-Anpassung in der @media-Abfrage bei Zeile 88). • „.s2-belege“ in allen Fassungen — liegt VOR dem Auszug (gehörte zu details.s2-belege), Zeile(n) per Suche ermitteln. • „.quelle-lang“ in allen Fassungen — liegt VOR dem Auszug, Zeile(n) per Suche ermitteln. Beim Aufräumen zusätzlich beachten: Auch die Mobil-Media-Query zu .studie2-diag (Zeilen 86–89) referenziert .studie2-quelle und kann dann zusammen mit der ersten Fassung eingestampft werden. */ /* ═══════════════════════════════════════════════════════════════════════════ Kopfleiste auf dem Telefon entfernen (Auftrag 24.08.2026: „die bar oben bei mobil bitte raus") Bis 640 px faellt der ganze
      weg — dieselbe Grenze, an der auch die Hero-Zielgruppenzeile, die Vertrauenszeile und die Absenderzeile ausgeblendet werden. `display: none` nimmt header::before mit; der Streifen war nur die Abdeckung fuer den klebenden Kopf in iOS Safari und wird ohne Kopf nicht gebraucht. Der Kopf steht im Fluss (position: sticky), seine 72 px Hoehe fallen also mit weg und der Hero rueckt nach oben. Folge, bewusst in Kauf genommen: Auf dem Telefon steht damit oben weder der Markenname noch der Knopf „Vertrauliches Erstgespraech". Ueber dem Falz bleibt der gelbe Hero-Knopf; die Erstgespraech-Knoepfe stehen weiter unter den Thesen, in Fabians Abschnitt und im Kontaktblock. Kein JavaScript und keine Regel haengt an der Kopfhoehe (kein scroll-padding-top, keine Messung von offsetHeight) — geprueft 24.08.2026. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { header { display: none; } }