Inhalte:
). Als eigener Absatz mit derselben Luft darunter wie ein. */ body.cd.cd-seite-en-privacy .legal > strong { display: block; margin: 0 0 1em; } /* ---------- Seite: en-thank-you ---------- */ /* Neues CD: Anpassungen für body.cd-seite-en-thank-you. Jede Regel beginnt mit body.cd-seite-en-thank-you. */ /* Kurze Seite: der dunkle Seitenkopf füllt den Bildschirm bis zum Footer, damit unter dem Footer kein leerer Streifen stehen bleibt. Kopfzeile, Mobilmenü und Fortschrittsbalken sind fixiert und laufen nicht mit. */ body.cd.cd-seite-en-thank-you { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } body.cd.cd-seite-en-thank-you main { flex: 1 0 auto; display: flex; flex-direction: column; } body.cd.cd-seite-en-thank-you .page-hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; } body.cd.cd-seite-en-thank-you .page-hero > .container { width: 100%; } /* Lichtkegel am Desktop mittig über der zentrierten Überschrift (gleicher Kegel wie auf den anderen Unterseiten, nur nicht rechts hinter einem Bild). Unter 1060px greift ohnehin der mittige Kegel aus neues-cd.css. */ @media (min-width: 1061px) { body.cd.cd-seite-en-thank-you .page-hero { background: radial-gradient(ellipse 40% 90% at 50% 0%, #9a3322 0%, #3a120d 35%, #0a0706 80%); } } /* Handy: Überschrift etwas kräftiger, damit der kurze Seitenkopf nicht leer wirkt */ @media (max-width: 600px) { body.cd.cd-seite-en-thank-you .page-hero--center h1.display-xl { font-size: clamp(2rem, 10.4vw, 2.6rem); line-height: 1.06; } } /* Schlanker Footer ohne Spalten: keine zweite Linie direkt unter der Goldkante, Zeile oben und unten gleich viel Luft */ body.cd.cd-seite-en-thank-you .site-footer { padding-top: 0; } body.cd.cd-seite-en-thank-you .footer-bottom { border-top: 0; padding-block: 26px; } /* Zeilenumbruch im Einleitungssatz nur am breiten Bildschirm, sonst bricht der Satz unschön */ @media (max-width: 900px) { body.cd.cd-seite-en-thank-you .page-hero .lead br { display: none; } } /* ============================================================ NACHTRÄGE 17.10.2026 ============================================================ */ /* Schrift auf dunklem Grund überall deckend weiß (Niklas): kleine Zusätze, die bisher abgedimmt waren */ body.cd .stats .stat-sub, body.cd.cd--v3 .stats .stat-sub { color: var(--c-text); opacity: 1; } body.cd .section:not(.theme-paper) .art-cap { color: var(--c-text); } body.cd .media-nav-row .media-count { color: var(--c-text); opacity: 1; } body.cd .section:not(.theme-paper) .nl-spec, body.cd .page-hero .nl-spec { color: var(--c-text); } body.cd.cd-seite-links .linkhub-legal a { color: var(--c-text); } body.cd .section:not(.theme-paper) .tok-bar-cap { opacity: 1; } /* Keynote-Seite: Name und Untertitel im Kopf gemeinsam 30 % größer (Niklas; Handy unverändert) */ @media (min-width: 821px) { body.cd.cd-seite-keynotes .kn-hero2-name { font-size: clamp(2.6rem, 5.6vw, 5.07rem); } body.cd.cd-seite-keynotes .kn-hero2-sub { font-size: clamp(1.365rem, 2.73vw, 2.08rem); margin-top: clamp(16px, 2.08vw, 26px); } } /* ab 1200px: Textspalte nutzt den freien Platz neben dem Porträt (max. 330px), damit der Name einzeilig bleibt */ @media (min-width: 1200px) { body.cd.cd-seite-keynotes .kn-hero2-inner { grid-template-columns: minmax(200px, 330px) 1fr; column-gap: clamp(24px, 3.3vw, 48px); } body.cd.cd-seite-keynotes .kn-hero2-name { white-space: nowrap; } body.cd.cd-seite-keynotes .kn-hero2-sub { white-space: normal; } } /* Über mich: Überschrift „Mein Weg zum Experten für / KI-Risiken und KI-Sicherheit“ 20 % größer (Niklas; Handy unverändert) */ @media (min-width: 821px) { /* so groß, dass die längere Zeile bis zur rechten Kante des Porträts reicht (Inhaltsbreite) */ body.cd.cd-seite-ueber-mich .story-hero .story-title { font-size: clamp(2.69rem, calc((100vw - 96px) / 13.4), 5.05rem); max-width: none; } body.cd.cd-seite-en-about .story-hero .story-title { font-size: clamp(2.69rem, calc((100vw - 96px) / 14.75), 4.6rem); } } /* Handy-Mockups der Experten-Auftritte: nachgebaute App-Texte ebenfalls deckend */ body.cd .media-slide .tv-meta, body.cd .media-slide .tv-desc { opacity: 1; } /* Handy: fester Umbruch in der Über-mich-Überschrift aus, sonst steht „für“ allein in einer Zeile */ @media (max-width: 820px) { body.cd.cd-seite-ueber-mich .story-hero .story-title br { display: none; } } /* Über mich: Bilder der Geschichte (ChatGPT-Logo, Strafvollzug, Collage) ohne Hover-Effekt, kein Anheben (Niklas) */ body.cd.cd-seite-ueber-mich .story-fig:hover, body.cd.cd-seite-ueber-mich .story-fig:focus-within { transform: none; border-color: var(--c-linie); box-shadow: 0 34px 60px -30px rgba(52, 34, 18, .5); } body.cd.cd-seite-ueber-mich .story-dark .story-fig:hover, body.cd.cd-seite-ueber-mich .story-dark .story-fig:focus-within { transform: none; border-color: var(--c-linie); box-shadow: 0 26px 58px -28px rgba(0, 0, 0, .75); } /* Artikel: Breiten wieder wie auf der Live-Seite (Niklas, 17.10.2026) */ body.cd.cd-seite-artikel .artikel-schluss, body.cd.cd-seite-artikel .art-ende { max-width: 820px; margin-inline: auto; } body.cd.cd-seite-artikel .artikel-bio-cta { max-width: 760px; margin-inline: auto; } body.cd.cd-seite-artikel .art-cap { max-width: 560px; } /* Einleitung im Kopf: Live-Breiten (dort 62ch/64ch/70ch der alten Schrift; Newsreader ist je Zeichen rund 1,167-mal schmaler) */ body.cd.cd-seite-artikel-chatgpt-als-therapeut .page-hero .lead, body.cd.cd-seite-artikel-der-kluge-hans-effekt .page-hero .lead, body.cd.cd-seite-artikel-tokens-sparen-mit-claude .page-hero .lead { max-width: 74.7ch !important; } body.cd.cd-seite-artikel-funktionsweise-sprachmodelle .page-hero .lead, body.cd.cd-seite-artikel-ki-muendigkeit .page-hero .lead, body.cd.cd-seite-artikel-limitierungen-sprachmodelle .page-hero .lead, body.cd.cd-seite-artikel-vibecoding-dezentrale-software .page-hero .lead { max-width: 72.35ch !important; } body.cd.cd-seite-artikel-ki-desinformationen .page-hero .lead { max-width: 81.7ch !important; } /* Autorenbox: Textbreite wie live (dort 42ch der alten Schrift = 451px) */ body.cd.cd-seite-artikel .artikel-bio-cta-text { max-width: 451px; } /* Mobilmenü: Kopfzeile mit X über die Vollbild-Navigation heben, sonst lässt sich das Menü nicht schließen */ body.cd.nav-open .site-header { z-index: 150; } /* Startseite: "Zu meiner Person" ohne Weichzeichner. Safari zeichnet backdrop-filter falsch, solange die Button-Reihe eingeblendet wird (bunte Flecken links). Dahinter liegt nur der glatte dunkle Verlauf, optisch ändert sich also nichts. */ body.cd .hero--anim .hero-cta-row .btn--white, body.cd .hero--anim .hero-cta-row .btn--white:hover { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Buttons auf allen Seiten (Niklas, 22.10.2026): ohne Pfeil (im HTML entfernt), Text mittig, beim Überfahren kein Schatten (in den jeweiligen Hover-Regeln); am Desktop Schrift etwas größer (17,3 → 20px, klein 16 → 18,4px) */ body.cd.cd-seite-keynotes .about-cta-text { text-align: center; } body.cd.cd-seite-links .linkhub-link { justify-content: center; text-align: center; } @media (min-width: 641px) { body.cd .btn:not(.btn--sm), body.cd .podcast-cta { font-size: 1.25rem; } body.cd.cd-seite-keynotes .vortrag-mini { font-size: 1.1rem; } } /* kleine Buttons erst ab 821px, sonst bricht "Kostenloses Erstgespräch buchen" in den Kontakt-Karten öfter um */ @media (min-width: 821px) { body.cd .btn--sm { font-size: 1.15rem; } } /* ============================================================ HANDYANSICHT (Niklas, 17.10.2026) – nur Media Queries, Desktop unverändert ============================================================ */ /* Startseiten: Hero-Titel so groß, wie die feste erste Zeile ("KI-Kompetenz beginnt" bzw. "Mitigating AI risks will") in die Inhaltsbreite passt. Per Binärsuche gemessen (Grenze 320px: 27,96px, 390px: 34,36px, 430px: 37,83px); 8.6vw hält auf allen Handybreiten 2 bis 3 % Abstand dazu, die drei Zeilen bleiben. nowrap fängt Rundungsunterschiede anderer Browser ab (eher 1px Überstand in den Rand als eine vierte Zeile). Unterzeile bleibt in der alten Größe (Niklas wollte sie nach dem Test doch wieder kleiner). */ @media (max-width: 640px) { body.cd .hero--anim .hero-title { font-size: min(8.6vw, 2.55rem); } body.cd .hero--anim .hero-title .nb-line { white-space: nowrap; } } /* Zahlen-Leiste (Startseite, Keynotes, Sensibilisierungen, Videokurs, englische Seiten) auf dem Handy: oben groß "+110.000 Follower" in einer Zeile, darunter eine Linie und drei Spalten (+3 / +4 / 100 %) mit senkrechten Linien dazwischen. Kurze Beschriftungen stehen im HTML in .only-m. */ @media (max-width: 640px) { body.cd .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.cd .stats .stat { border: 0; padding: 14px 4px 18px 10px; } body.cd .stats .stat:first-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; padding: 20px 0 14px; border-bottom: 1px solid var(--c-linie); } body.cd .stats .stat:nth-child(2) { padding-left: 0; } body.cd .stats .stat:nth-child(n+3) { border-left: 1px solid var(--c-linie); } body.cd .stats .stat-num { line-height: 1; font-variant-numeric: tabular-nums; } /* Größen wachsen bis 390px mit der Breite, damit "+110.000 Follower" einzeilig bleibt (Größe seit 19.10.2026 weiter unten neu) und die Spalten auch auf 320px-Geräten nicht mitten im Wort brechen (Trennstellen: KI-, Journalismus) */ body.cd .stats .stat:first-child .stat-num { font-size: min(3.3rem, 13.5vw); } body.cd .stats .stat:first-child .stat-label { margin: 0; font-size: min(.85rem, 3.5vw); } body.cd .stats .stat:not(:first-child) .stat-num { font-size: min(1.9rem, 8.4vw); } body.cd .stats .stat:not(:first-child) .stat-label { margin-top: 7px; font-size: min(.66rem, 2.9vw); letter-spacing: .07em; line-height: 1.3; overflow-wrap: normal; word-break: normal; hyphens: manual; } } /* Experten-Auftritte (Startseite, Keynotes, englische Gegenstücke): Titel und Texte der einzelnen Auftritte auf dem Handy ausblenden, es bleiben das Handy mit den Auftritten und die Weiter-Leiste */ @media (max-width: 640px) { body.cd .media-texts { display: none; } } /* Startseiten-Hero: Freiraum über und unter der Unterzeile halbiert (oben 48 → 24px Grid-Abstand, unten 48px Grid-Abstand + 30,4px Außenabstand → 39px) */ @media (max-width: 640px) { body.cd .hero--anim .hero-lead { margin-top: -24px; margin-bottom: -9px; } } /* Abschluss-Buttons: "Keynotes" 50 % größer (16 → 24px). Die beiden dunklen Buttons passt js/main.js einzeln bis an den Innenabstand ein. */ @media (max-width: 640px) { body.cd .cta-final .btn.cta-haupt { font-size: 1.5rem; } } /* Startseite "Schwerpunkte / meiner Expertise": Grundgröße so, dass "meiner Expertise" (7,58em) in die Inhaltsbreite passt, sonst rutscht auf schmalen Handys "Expertise" in eine dritte Zeile. js/main.js zieht die Überschrift danach bis an den Rand (höchstens +30 %). */ @media (max-width: 640px) { body.cd #schwerpunkte .sp-titel { font-size: min(calc((100vw - 40px) / 7.75), 2.42rem); } /* ID nötig: style.css setzt #schwerpunkte .section-head h2 */ } /* Startseiten, Angebots-Karten: auf dem Handy zugeklappt (Titel, Kurzzeile, Pfeil rechts daneben). Ein Tipp klappt den vollen Text auf (.is-offen, js/main.js), der Pfeil führt zur Seite. Die Kurzzeile gibt es nur auf dem Handy. */ body.cd .card-kurz { display: none; } @media (max-width: 640px) { body.cd #angebot .grid-3 { gap: 14px; } body.cd #angebot .grid-3 .card--slim { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 18px 18px 18px 22px; } body.cd #angebot .grid-3 .card--slim h3 { grid-column: 1; margin: 0; } body.cd #angebot .grid-3 .card--slim .card-kurz { display: block; grid-column: 1; margin-top: 3px; color: var(--c-text-2); font-size: 1rem; /* js/main.js verkleinert bei Bedarf bis 15 %, damit die Zeile einzeilig bleibt */ line-height: 1.35; } body.cd #angebot .grid-3 .card--slim .resource-arrow { position: static; grid-column: 2; grid-row: 1 / span 2; align-self: center; } body.cd #angebot .grid-3 .card--slim p { grid-column: 1 / -1; padding-right: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease; } body.cd #angebot .grid-3 .card--slim.is-offen p { max-height: 22em; opacity: 1; margin-top: 12px; } } @media (max-width: 640px) and (prefers-reduced-motion: reduce) { body.cd #angebot .grid-3 .card--slim p { transition: none; } } /* Startseiten: Bild neben "Schwerpunkte meiner Expertise" auf dem Handy weg */ @media (max-width: 640px) { body.cd #schwerpunkte .keynote-stage { display: none; } } /* Footer (alle Seiten): Beschreibungstext unter "Niklas Titgemeyer." auf dem Handy weg, Social-Icons bleiben */ @media (max-width: 640px) { body.cd .footer-brand > p { display: none; } } /* Keynote-Seite (DE/EN): die drei Profil-Karten Soziologe / Journalist / LLM-Experte auf dem Handy weg */ @media (max-width: 640px) { body.cd #perspektive .cards-dark { display: none; } } /* Keynote-Seite (DE/EN): roter Button "Fragen Sie jetzt eine KI-Keynote als Highlight für Ihr Event an!" auf dem Handy weg */ @media (max-width: 640px) { body.cd .kn-cta-box { display: none; } } /* Startseiten (DE/EN), Handy: Zahlen-Leiste hängt js/main.js unter das Porträt in #person. Dort läuft sie über die volle Bildschirmbreite statt innerhalb des Containers. */ @media (max-width: 640px) { body.cd .stats.stats--unter-portraet { justify-self: stretch; width: auto; margin-inline: calc(50% - 50vw); margin-block: 0; } /* Band bündig ans Porträt, danach der restliche Abschnitt (Text, Liste, Button) dunkel bis zum Logo-Band. Rand und Innenabstand heben sich auf, der Text bleibt genau in der Spalte. */ body.cd #person .about-grid:has(.stats--unter-portraet) { row-gap: 0; } body.cd #person:has(.stats--unter-portraet) { padding-bottom: 0; } body.cd #person .stats--unter-portraet + div { margin-inline: calc(50% - 50vw); padding: clamp(38px, 5.5vw, 65px) calc(50vw - 50%); background: var(--nacht); /* ohne Schein von oben, damit die Zahlen-Leiste nahtlos übergeht */ color: var(--c-text); } /* Zahlen-Leiste läuft nach unten in genau dieses Schwarz aus (oberes Viertel bleibt unverändert rot) */ body.cd.cd--v3 .stats.stats--unter-portraet { background: linear-gradient(180deg, rgba(23, 19, 16, 0) 25%, var(--nacht) 100%), linear-gradient(90deg, rgba(170, 72, 58, .62) 0%, rgba(170, 72, 58, .22) 36%, rgba(170, 72, 58, 0) 64%, rgba(217, 168, 46, .06) 100%), #2a120e; } } /* Über mich (DE/EN), Handy: Titel komplett weiß, Einleitung in der Größe des späteren Fließtexts (.prose-block p: 1.1rem / 1.75), bei "Was meine Arbeit leitet" Einleitungssatz und Linie weg */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich .story-title .mk { color: var(--c-text); } body.cd.cd-seite-ueber-mich .story-lead { font-size: 1.1rem; line-height: 1.75; } body.cd.cd-seite-ueber-mich #prinzipien .section-head .lead, body.cd.cd-seite-en-about #principles .section-head .lead { display: none; } body.cd.cd-seite-ueber-mich #prinzipien .section-head + .value-row, body.cd.cd-seite-en-about #principles .section-head + .value-row { border-top: 0; padding-top: 0; } } /* Keynote-Seite (DE/EN), Handy: Name und Arbeitstitel ganz oben mittig über dem Foto, Button bleibt darunter. Solange die Seite oben steht, fällt dafür der Name links in der Kopfzeile weg; rastet beim Scrollen die dunkle Leiste ein (.is-scrolled), ist der Hero-Name aus dem Bild und der Name oben links kommt zurück. */ @media (max-width: 640px) { body.cd.cd-seite-keynotes .kn-hero2-text { display: contents; } body.cd.cd-seite-keynotes .kn-hero2-name { order: -1; } body.cd.cd-seite-keynotes .kn-hero2-photo { order: 0; } body.cd.cd-seite-keynotes .kn-hero2-text > .btn-row { order: 1; } /* ganze Kopfzeile (Name und Menü-Knopf) erst sichtbar, wenn beim Scrollen die dunkle Leiste einrastet */ body.cd.cd-seite-keynotes .site-header { transition: opacity .3s ease, visibility .3s; } body.cd.cd-seite-keynotes .site-header:not(.is-scrolled) { opacity: 0; visibility: hidden; } /* Button, den js/main.js zwischen Einleitungstext und Bühnenfoto hängt */ body.cd.cd-seite-keynotes .kn-anfrage-unten { margin-top: 24px; } } /* Keynote-Seite (DE/EN), Handy: "Mehr zu Niklas Titgemeyer …" ohne festen Umbruch, js/main.js passt den Text auf drei Zeilen ein */ @media (max-width: 640px) { body.cd.cd-seite-keynotes .about-cta-title br { display: none; } } /* Startseiten (DE/EN), Handy: Freiraum über und unter "Soziologe und Experte für …" halbiert (oben 38 → 19px, darunter 16 + 34px → 8 + 17px) */ @media (max-width: 640px) { body.cd #person.home-about { padding-top: 19px; } body.cd #person .home-about-title { margin-bottom: 8px; } body.cd #person .section-head { margin-bottom: 17px; } } /* Über mich (DE/EN), Handy: die drei Buttons unter der Geschichte. Schrift 50 % größer, Glas etwas durchsichtiger und dahinter ein weicher Rot-Gold-Schein wie bei den Abschluss-Buttons der Startseite, damit das Glas auf dem glatten Beige etwas zeigen kann. */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich .story-cta-row { position: relative; isolation: isolate; } body.cd.cd-seite-ueber-mich .story-cta-row::before { content: ""; position: absolute; inset: -30px -10px; z-index: -1; pointer-events: none; background: radial-gradient(42% 46% at 30% 60%, rgba(170, 72, 58, .30), rgba(170, 72, 58, 0) 72%), radial-gradient(40% 44% at 72% 40%, rgba(217, 168, 46, .32), rgba(217, 168, 46, 0) 72%); } body.cd.cd-seite-ueber-mich .story-cta-row .btn { font-size: 1.5rem; background: rgba(255, 255, 255, .3); } body.cd.cd-seite-ueber-mich .story-cta-row .btn:hover { background: rgba(255, 255, 255, .5); } } /* Über mich (DE/EN), Handy: "Quellen aller Videos" mit je 30px Luft zur letzten Prinzip-Zeile und zum Titel "Mein Lebenslauf im Detail" (vorher 65 und 58px). Oben: 30px Zeilenpolster + 5px Unterlänge, der Inline-Abstand clamp(30px, 5vw, 46px) wird dafür überschrieben. Unten: Abschnitt ohne Polster, der Lebenslauf (ebenfalls dunkel, ohne Kante) beginnt mit 30px. Schrift im Button 60 % größer (17,28 → 27,6px). */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich #prinzipien .btn-row, body.cd.cd-seite-en-about #principles .btn-row { margin-top: -5px !important; } body.cd.cd-seite-ueber-mich #prinzipien, body.cd.cd-seite-en-about #principles { padding-bottom: 0; } body.cd.cd-seite-ueber-mich #prinzipien + section, body.cd.cd-seite-en-about #principles + section { padding-top: 30px; } body.cd.cd-seite-ueber-mich #prinzipien .btn-row .btn, body.cd.cd-seite-en-about #principles .btn-row .btn { font-size: 1.728rem; } } /* Über mich (DE/EN), Handy: Lebenslauf-Abschnitt beginnt oben in reinem Schwarz und läuft erst darunter in die Rot-Gold-Scheine, damit zu "Was meine Arbeit leitet" keine Kante entsteht */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich section.section:has(.cv-tl-wrap) { background: linear-gradient(to bottom, var(--nacht) 0, rgba(23, 19, 16, 0) 170px), radial-gradient(ellipse 70% 200px at 25% 190px, rgba(170, 72, 58, .34), rgba(170, 72, 58, 0) 72%), radial-gradient(ellipse 50% 180px at 85% 240px, rgba(217, 168, 46, .16), rgba(217, 168, 46, 0) 72%), radial-gradient(ellipse 70% 240px at 30% calc(100% - 230px), rgba(170, 72, 58, .42), rgba(170, 72, 58, 0) 72%), radial-gradient(ellipse 50% 200px at 80% calc(100% - 160px), rgba(217, 168, 46, .22), rgba(217, 168, 46, 0) 72%), var(--nacht); } /* Gefängnisbild oben um 20 % beschnitten (900 x 1080 → sichtbar 900 x 864) */ body.cd.cd-seite-ueber-mich .story-fig img[src*="strafvollzug-gang-gitter"] { aspect-ratio: 900 / 864; height: auto; object-fit: cover; object-position: 50% 100%; } } /* Keynote-Seite (DE/EN), Handy: Name höher (Freiraum über dem Namen halbiert, die Kopfzeile ist oben ohnehin ausgeblendet) und "Jetzt Niklas Titgemeyer … buchen." oben so viel Luft wie unten (73 → 23px) */ @media (max-width: 640px) { body.cd.cd-seite-keynotes .kn-hero2 { padding-top: 46px; } /* überschreibt den Inline-Abstand clamp(56px, 8vw, 90px); sichtbar rund 28px über "Jetzt", wie unter "buchen." (24 bis 35px je nach Umbruch) */ body.cd.cd-seite-keynotes #keynote-themen .kn-book-cta { margin-top: 26px !important; } } /* Logo-Band (alle Seiten), Handy: ohne hellen Schein am oberen Rand, damit es nahtlos an den dunklen Abschnitt darüber anschließt */ @media (max-width: 640px) { body.cd.cd--v3 .marquee-band { background: var(--nacht); } } /* Startseiten (DE/EN), Handy: Freiraum zwischen Kopfzeile und Titel halbiert (44 → 22px unter der 76px-Leiste). Hero-Buttons auf 90 % Breite, Schrift 1.24rem (vorher eingepasst rund 26,5px, jetzt 25 % kleiner) */ @media (max-width: 640px) { body.cd .hero.hero--anim { padding-top: calc(var(--header-h) + 22px); } body.cd .hero--anim .hero-cta-row { width: 90%; margin-inline: auto; } body.cd .hero--anim .hero-cta-row .btn { font-size: min(1.24rem, 5.4vw); } /* unter 370px kleiner, damit "Zu meinen Angeboten →" einzeilig bleibt */ } /* Über mich (DE/EN), Handy: ChatGPT-Logo oben und unten je 12 % beschnitten, Breite bleibt (800 x 800 → 800 x 608). Darüber so wenig Luft wie darunter: Absatz-Abstand + Raster-Abstand ergaben 54px, darunter 29px → Logo 25px höher */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich .story-split > .story-fig--logo { margin-top: -25px; } body.cd.cd-seite-ueber-mich .story-fig img[src*="chatgpt-logo"] { aspect-ratio: 800 / 608; height: auto; object-fit: cover; object-position: 50% 50%; } } /* Startseite, Handy: Porträt in "Soziologe, Content Creator …" 20 % größer (277 → 332px) */ @media (max-width: 640px) { body.cd #person .about-photo { max-width: 332px; } } /* Sensibilisierungen (DE/EN), Handy: Freiraum zwischen Kopfzeile und Titel halbiert (56 → 28px) und die beiden Buttons unter das Porträt. Die Textspalte löst sich dafür auf; Abstände wie vorher je 32px (Absatz hat unten 25,6px, das Foto bekommt die restlichen 6px). */ @media (max-width: 640px) { /* Titel ganz oben (wie Keynote-Seite: 46px); die Kopfzeile mit Name und Menü-Knopf erscheint erst beim Scrollen */ body.cd.cd-sens .page-hero.ws-hero--flush { padding-top: 46px; } body.cd.cd-sens .site-header { transition: opacity .3s ease, visibility .3s; } body.cd.cd-sens .site-header:not(.is-scrolled) { opacity: 0; visibility: hidden; } body.cd.cd-sens .page-hero-grid.ws-hero { row-gap: 0; } body.cd.cd-sens .page-hero-grid.ws-hero > div:first-child { display: contents; } body.cd.cd-sens .ws-hero-photo { order: 1; margin-top: 6px; } /* Buttons ragen in den unteren, nach Schwarz auslaufenden Teil des Porträts (Maske ab 58 %), das Foto bleibt dahinter */ body.cd.cd-sens .page-hero-grid.ws-hero > div:first-child > .btn-row { order: 2; margin-top: -85px; position: relative; z-index: 2; } /* Buttons 25px tiefer, dafür unten halb so viel Luft (50 → 25px); der Hero bleibt gleich hoch */ body.cd.cd-sens .page-hero.ws-hero--flush { padding-bottom: 25px; } } /* Sensibilisierungen (DE/EN), Handy: die beiden Buttons im Abschnitt "Über mich" mit 15 % größerer Schrift */ @media (max-width: 640px) { body.cd.cd-sens #workshopleiter .btn-row .btn--sm { font-size: 1.15rem; } /* 16 → 18,4px */ } /* Sensibilisierungen (DE/EN), Handy: Text in den sechs Baustein-Karten zwei Stufen kleiner (18,4 → 16px) und minimal enger (Zeilenhöhe 1.65 → 1.55) */ @media (max-width: 640px) { body.cd.cd-sens .tip-card p { font-size: 1rem; line-height: 1.55; } } /* Keynote-Seite (DE/EN), Handy: Porträt im Kopf 18 % und dann nochmal 5 % größer (234 → 276 → 290px) */ @media (max-width: 640px) { body.cd.cd-seite-keynotes .kn-hero2-photo { max-width: 290px; } } /* Keynote-Seite (DE/EN), Handy: "Anfrage absenden" im Formular 20 % größer (17,28 → 20,7px) */ @media (max-width: 640px) { body.cd.cd-seite-keynotes form .btn-row button[type="submit"] { font-size: 1.296rem; } } /* Keynote-Seite (DE/EN), Handy: Zahlen-Leiste um die halbe Höhe der "+110.000 Follower"-Zeile nach oben auf das Porträt geschoben (Zeile = 20 + 14px Polster + 1px Linie + Ziffernhöhe min(3.3rem, 13.5vw)). Porträt bleibt unverändert. */ @media (max-width: 640px) { body.cd.cd-seite-keynotes .kn-hero2 + .stats { position: relative; z-index: 2; margin-top: calc((35px + min(3.3rem, 13.5vw)) / -2 - 1.5px); /* -1,5px: setzt nach dem größeren Porträt wieder an derselben Stelle am Sakko an */ } } /* Über mich (DE/EN), Desktop-Ausnahme (Niklas, 17.10.2026): "Diese vier Prinzipien leiten meine Arbeit" in einer Zeile. Der Kopf ist sonst auf 760px begrenzt; die Überschrift braucht bei 54px rund 1000px, der Container bietet 1180px. */ @media (min-width: 641px) { body.cd.cd-seite-ueber-mich #prinzipien .section-head, body.cd.cd-seite-en-about #principles .section-head { max-width: none; } } /* Startseiten (DE/EN), Handy: Zahlen-Leiste unter dem Porträt um ein Drittel der "+110.000 Follower"-Zeile nach oben auf das Porträt (Zeile = 35px + Ziffernhöhe min(3.3rem, 13.5vw)) */ @media (max-width: 640px) { body.cd .stats.stats--unter-portraet { position: relative; z-index: 2; margin-top: calc((35px + min(3.3rem, 13.5vw)) / -3); } } /* Über mich (DE/EN), Desktop-Ausnahme: Prinzipien-Titel nochmal 15 % größer, aber nie größer als die Zeilenbreite erlaubt (DE braucht 18,3em, EN 16,4em; Inhaltsbreite = min(1084px, 100vw - 96px)), damit er einzeilig bleibt */ @media (min-width: 1061px) { body.cd.cd-seite-ueber-mich #prinzipien h2 { font-size: min(calc(clamp(2.1rem, 4.6vw, 3.4rem) * 1.15), calc(min(1084px, 100vw - 96px) / 18.5)); } body.cd.cd-seite-en-about #principles h2 { font-size: min(calc(clamp(2.1rem, 4.6vw, 3.4rem) * 1.15), calc(min(1084px, 100vw - 96px) / 16.6)); } } /* Kontakt (DE/EN), Handy: "Keynote anfragen" als goldenes Liquid Glass wie "Keynotes" im Abschluss der Startseite */ @media (max-width: 640px) { body.cd.cd-seite-kontakt .btn[href*="keynotes.html"], body.cd.cd-seite-kontakt .btn[href*="keynotes.html"]:hover { position: relative; border: 0; color: var(--tinte); background: linear-gradient(135deg, rgba(217, 168, 46, .95), rgba(217, 168, 46, .62)); -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7); box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .7), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 10px 18px -12px rgba(255, 255, 255, .35), 0 14px 30px -16px rgba(0, 0, 0, .7); } body.cd.cd-seite-kontakt .btn[href*="keynotes.html"]:hover { background: linear-gradient(135deg, rgba(225, 180, 64, 1), rgba(217, 168, 46, .78)); } } /* Artikel, Handy: Porträt in der Autorenbox am Ende 30 % kleiner (348 → 244px breit, mittig) */ @media (max-width: 640px) { body.cd.cd-seite-artikel .artikel-bio-cta-img { flex: none; width: 70%; height: auto; aspect-ratio: 348 / 421; align-self: center; object-fit: cover; } } /* Gratis Guide, Handy: Freiraum zwischen Kopfzeile und Titel halbiert (56 → 28px) */ @media (max-width: 640px) { body.cd.cd-seite-guide .page-hero { padding-top: calc(var(--header-h) + 28px); } } /* Quellen (DE/EN), Handy: Kästen der Videos kompakter. Weniger Innenabstand (20 → 14px), Titelzeilen enger (1.6 → 1.3) und das Datum direkt unter dem Titel (Abstand 14 → 5px) */ @media (max-width: 640px) { body.cd.cd-seite-quellen .q-acc-item .acc-head { padding-top: 14px; padding-bottom: 14px; row-gap: 5px; } body.cd.cd-seite-quellen .q-acc-title { line-height: 1.3; } } /* Experten-Auftritte (Startseiten, Keynote-Seiten), Handy und Desktop: Rahmen wie das Hero-Handy "Titan Natur" (Titan-Ring 3px, schwarze Blende 7px, Seitentasten, Dynamic Island), auf die Breite des Auftritte-Handys umgerechnet (Hero 290px, hier 320px, Faktor 1,1). Inhalt und Bedienung bleiben unverändert. */ body.cd .podcast-phone.media-phone { border: 3px solid transparent; padding: 7px; border-radius: 50px; background: linear-gradient(#050506, #050506) padding-box, linear-gradient(145deg, #a9a296 0%, #d8d2c7 20%, #bdb6aa 48%, #e2ddd3 76%, #9d968a 100%) border-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 52px 66px -40px rgba(0, 0, 0, .8), 0 22px 30px -22px rgba(0, 0, 0, .55); } body.cd .podcast-phone.media-phone .media-screen { border-radius: 40px; } /* Ab 641px bleibt das Handy so lang wie vorher (320 x 656): der Rahmen ist 2px dicker, also wird das Display etwas schlanker (300 statt 302px) und behält mit 300 / 636 die alte Gesamthöhe. Handy: siehe weiter unten (300 / 592). */ @media (min-width: 641px) { body.cd .podcast-phone.media-phone .media-screen { aspect-ratio: 300 / 636; } } /* Seitentasten: links Aktionstaste und Lautstärke, rechts Seitentaste */ body.cd .podcast-phone.media-phone::before, body.cd .podcast-phone.media-phone::after { content: ""; position: absolute; width: 3px; pointer-events: none; } body.cd .podcast-phone.media-phone::before { left: -5px; top: 128px; height: 152px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #8f887c, #cfc9be) 0 0 / 100% 26px no-repeat, linear-gradient(90deg, #8f887c, #cfc9be) 0 48px / 100% 47px no-repeat, linear-gradient(90deg, #8f887c, #cfc9be) 0 105px / 100% 47px no-repeat; } body.cd .podcast-phone.media-phone::after { right: -5px; top: 199px; height: 76px; border-radius: 0 3px 3px 0; background: linear-gradient(270deg, #8f887c, #cfc9be); } /* Dynamic Island mittig in der Statusleiste */ body.cd .podcast-phone.media-phone .media-screen::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 20; width: 95px; height: 27px; transform: translateX(-50%); border-radius: 15px; background: radial-gradient(circle at calc(100% - 15px) 50%, #34405e 0, #0d1220 3.5px, #000 5px, transparent 5.5px), #000; pointer-events: none; } /* Experten-Auftritte, Handy: Play-Knopf im Spotify-Nachbau optisch mittig. Das Dreieck saß 3,4px rechts der Kreismitte; optisch mittig wirkt ein Dreieck, wenn sein Schwerpunkt in der Mitte liegt (rund 1px rechts). */ @media (max-width: 640px) { body.cd .pp-play svg { margin-left: -3px; } } /* Artikel-Übersicht (aktuelles.html), Handy: Abstand vom Einleitungstext zum ersten Artikel halbiert (89 → 45px). Kopf und Artikelliste sind beide dunkel, es gibt also keine Kante. */ @media (max-width: 640px) { body.cd.cd-seite-aktuelles main > .page-hero { padding-bottom: 14px; } body.cd.cd-seite-aktuelles main > .page-hero + .section { padding-top: 0; } } /* Experten-Auftritte, alle Breiten: "Nächster Auftritt" blieb nach mehrfachem Klicken/Antippen rot mit rotem Rahmen (hängender Hover-Zustand und Fokus-Rahmen). Der Button bleibt jetzt immer weiß; als Rückmeldung rückt nur der Pfeil. */ body.cd .media-next:hover, body.cd .media-next:focus, body.cd .media-next:focus-visible { color: var(--c-text); outline: none; } body.cd .media-next { -webkit-tap-highlight-color: transparent; } /* Experten-Auftritte, Handy: weniger Leerraum in den Handy-Ansichten. Display 41px niedriger (300 x 633 → 300 x 592), dadurch rückt im Podcast der Titel ans Cover (63 → 22px). Beim TV-Beitrag ist der Text 12 % größer und luftiger gesetzt, damit unten weniger frei bleibt. Der YouTube-Feed läuft wie bisher bis an den unteren Rand. */ @media (max-width: 640px) { body.cd .podcast-phone.media-phone .media-screen { aspect-ratio: 300 / 592; } body.cd .media-slide--tv .tv-badge { margin-top: 20px; } body.cd .media-slide--tv .tv-title { font-size: 1.48rem; margin-top: 12px; } body.cd .media-slide--tv .tv-meta { margin-top: 10px; } body.cd .media-slide--tv .tv-topic { font-size: 1.46rem; margin-top: 22px; } body.cd .media-slide--tv .tv-desc { font-size: .99rem; margin-top: 14px; } } /* Über mich (DE/EN), Handy: die drei Glas-Buttons unter der Geschichte 15 % flacher (71 → 60px), Schrift bleibt */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich .story-cta-row .btn { padding-top: 11px; padding-bottom: 11px; } } /* Experten-Auftritte, Desktop-Ausnahme (Niklas, 17.10.2026): Text unter dem Video im TV-Beitrag größer, damit er das 636px hohe Display bis kurz über den Home-Balken füllt (vorher endete er bei 502px) */ @media (min-width: 641px) { body.cd .media-slide--tv .tv-badge { margin-top: 22px; font-size: .86rem; } body.cd .media-slide--tv .tv-title { font-size: 1.58rem; margin-top: 12px; } body.cd .media-slide--tv .tv-meta { font-size: .88rem; margin-top: 10px; } body.cd .media-slide--tv .tv-topic { font-size: 1.56rem; margin-top: 24px; } body.cd .media-slide--tv .tv-desc { font-size: 1.06rem; margin-top: 14px; } } /* Experten-Auftritte, Desktop-Ausnahme: im Podcast-Slide der Titel größer auf drei Zeilen (15,7 → 24px: "Wieso du künstlicher / Intelligenz niemals blind / vertrauen darfst"), direkt unter dem Cover statt unten angeklebt; das Cover rückt 6px tiefer, die Bedienung damit nach oben. */ @media (min-width: 641px) { body.cd .media-slide--podcast .pp-cover { margin-top: 20px; } body.cd .media-slide--podcast .pp-meta { margin-top: 0; padding-top: 22px; } body.cd .media-slide--podcast .pp-title { font-size: 1.5rem; line-height: 1.15; } body.cd .media-slide--podcast .pp-show { margin-top: 8px; font-size: .9rem; } } /* Experten-Auftritte, gestapelt (bis 880px): Spalte als minmax(0, 1fr) statt 1fr. Mit 1fr durfte sie nicht schmaler werden als die drei Slides nebeneinander, und auf Handys bis 380px (dort ist das Handy 100 % breit) wurde es 725px breit statt 280 bis 340px. */ @media (max-width: 880px) { body.cd .media-stage { grid-template-columns: minmax(0, 1fr); } body.cd .media-phone-col { min-width: 0; max-width: 100%; } } /* Sehr schmale Handys (bis 350px): Display etwas höher, sonst ragt die Podcast-Bedienung bei dreizeiligem Titel unten heraus */ @media (max-width: 350px) { body.cd .podcast-phone.media-phone .media-screen { aspect-ratio: 300 / 630; } } /* Desktop-Ausnahme (Niklas, 17.10.2026): aktueller Menüpunkt in der Kopfzeile gelb. Bei Unterseiten von "Sonstiges" / "More" wird der Aufklapp-Knopf gelb und im Menü die Unterseite. Seit 19.10.2026 nicht mehr fett, sondern in derselben Stärke wie die übrigen Menüpunkte (Niklas' Wunsch). */ @media (min-width: 641px) { /* in Gelb, ohne Box dahinter (auch beim Überfahren bleibt es gelb) */ body.cd .main-nav > a[aria-current="page"], body.cd .main-nav > a[aria-current="page"]:hover, body.cd .nav-drop-btn.is-current, body.cd .nav-drop-btn.is-current:hover, body.cd .nav-drop.is-open .nav-drop-btn.is-current, body.cd .main-nav .nav-drop-menu a[aria-current="page"], body.cd .main-nav .nav-drop-menu a[aria-current="page"]:hover { font-weight: 500; color: var(--gelb); } /* Läuft der Code-Regen auf einem anderen Menüpunkt (.is-code aus main.js), ist der aktuelle Reiter nicht mehr gelb, sondern in der normalen Menüfarbe (Niklas, 22.10.2026) */ body.cd .main-nav:has(.is-code:not([aria-current="page"]):not(.is-current)) > a[aria-current="page"]:not(.is-code), body.cd .main-nav:has(.is-code:not([aria-current="page"]):not(.is-current)) .nav-drop-btn.is-current:not(.is-code) { color: var(--c-text-2); } } /* Startseiten (DE/EN), Handy und Desktop: "Schwerpunkte meiner Expertise" mit einheitlichem Text. Absatz und Liste in reinem Schwarz statt gedämpftem Braungrau bzw. Tinte, die Liste in Größe und Zeilenhöhe des Absatzes darüber (dieselbe Formel wie .lead: Handy 18,4px, Desktop 21,8px) */ body.cd #schwerpunkte .section-head .lead, body.cd #schwerpunkte .expertise-list li, body.cd #schwerpunkte .expertise-list li * { color: #000; } body.cd #schwerpunkte .expertise-list li { font-size: clamp(1.15rem, 1.7vw, 1.36rem); line-height: 1.55; } /* Über mich (DE/EN), Desktop-Ausnahme (Niklas, 17.10.2026): Button "Quellen aller Videos" unter den Prinzipien weg, "Mein Lebenslauf im Detail" doppelt so groß (57,6 → 115px) und dicht unter dem letzten Prinzip (vorher 286px Abstand inkl. Button, jetzt nur noch das Zeilenpolster der Prinzip-Zeile) */ @media (min-width: 641px) { body.cd.cd-seite-ueber-mich #prinzipien .btn-row, body.cd.cd-seite-en-about #principles .btn-row { display: none; } body.cd.cd-seite-ueber-mich #prinzipien, body.cd.cd-seite-en-about #principles { padding-bottom: 0; } body.cd.cd-seite-ueber-mich #prinzipien + section, body.cd.cd-seite-en-about #principles + section { padding-top: 0; } body.cd.cd-seite-ueber-mich #prinzipien + section .section-head, body.cd.cd-seite-en-about #principles + section .section-head { max-width: none; } /* in einer Zeile: so groß, wie "Mein Lebenslauf im Detail" (12,4em) in die Inhaltsbreite passt (bei 1280px rund 86px); englisch dieselbe Größe, damit beide Seiten gleich aussehen */ body.cd.cd-seite-ueber-mich #prinzipien + section .section-head > h2, body.cd.cd-seite-en-about #principles + section .section-head > h2 { font-size: min(calc(min(1084px, 100vw - 96px) / 12.6), 7.2rem); white-space: nowrap; } } /* Über mich (DE/EN), alle Breiten: wandernde Kugel im Lebenslauf erst sichtbar, sobald sie sich bewegt (--cv-dot-op aus js/main.js) */ body.cd.cd-seite-ueber-mich .cv-tl-wrap--js .cv-tl-dot { opacity: var(--cv-dot-op, 0); } /* Experten-Auftritte, Handy: Podcast-Titel größer und auf drei Zeilen (15,7 → 21px), direkt unter dem Cover. Abstände in der Bedienung etwas knapper und das Display 12px höher (300 / 592 → 300 / 604, bis 350px Breite 300 / 630 → 300 / 650), damit die Bedienung frei über dem Home-Balken bleibt. */ @media (max-width: 640px) { body.cd .podcast-phone.media-phone .media-screen { aspect-ratio: 300 / 604; } body.cd .media-slide--podcast .pp-meta { margin-top: 0; padding-top: 16px; } body.cd .media-slide--podcast .pp-title { font-size: 1.3125rem; line-height: 1.18; } body.cd .media-slide--podcast .pp-show { margin-top: 6px; } body.cd .media-slide--podcast .pp-progress { margin-top: 12px; } body.cd .media-slide--podcast .pp-controls { margin-top: 10px; } } @media (max-width: 350px) { body.cd .podcast-phone.media-phone .media-screen { aspect-ratio: 300 / 650; } } /* Wandernde Kugel an den Baustein-Listen (Sensibilisierungen DE/EN, Artikel), alle Breiten: statt des 4px-Rings in Hintergrundfarbe (auf Beige als heller Kreis sichtbar) nur ein weicher gelber Glow */ body.cd .tok-tl-dot, body.cd .theme-paper .tok-tl-dot { box-shadow: 0 0 12px 2px rgba(217, 168, 46, .65), 0 0 26px 6px rgba(217, 168, 46, .28) !important; animation: none; } /* Über mich (DE/EN), alle Breiten: wandernde Kugel im Lebenslauf ebenfalls ohne Ring in Hintergrundfarbe (auf dem rot-goldenen Schein als dunkler Kreis sichtbar), nur mit weichem gelbem Glow */ body.cd.cd-seite-ueber-mich .cv-tl-dot { box-shadow: 0 0 12px 2px rgba(217, 168, 46, .65), 0 0 26px 6px rgba(217, 168, 46, .28); } /* … und ohne hellbeigen 2px-Rand (auf Beige als heller Ring sichtbar): der Goldverlauf reicht bis an den Rand */ body.cd .tok-tl-dot, body.cd .theme-paper .tok-tl-dot { border-color: transparent; background-origin: border-box !important; } /* Verlauf über die ganze Kugel, sonst wiederholt er sich im Rand als Streifen (!important wie die background-Regel oben) */ /* Über mich (DE/EN): Kugel im Lebenslauf ebenfalls ohne hellen Rand, Verlauf über die ganze Kugel */ body.cd.cd-seite-ueber-mich .cv-tl-dot { border-color: transparent; background-origin: border-box; } /* Artikel: Kugel dort ebenso (der Artikel-Block setzte den hellen Rand wieder) */ body.cd.cd-seite-artikel .tok-tl-dot { border-color: transparent; background-origin: border-box !important; } /* Startseiten (DE/EN), ab 641px: Überschrift "Soziologe und Experte für …" in #person 25 % größer als .display-lg (2.1rem / 4.6vw / 3.4rem × 1.25) */ @media (min-width: 641px) { body.cd #person .home-about-title { font-size: clamp(2.625rem, 5.75vw, 4.25rem); } } /* Startseiten (DE/EN), Desktop: Anzug-Porträt so hoch wie die Textspalte, damit der Kopf oben bündig mit dem Text abschließt. Die Bildzelle streckt sich über die Rasterzeile (unten weiter bis an die Abschnittskante), das Bild füllt sie in der Höhe, seine Breite folgt dem Seitenverhältnis und darf über die Spalte hinausragen. Wächst mit dem Text, deshalb auf DE und EN unterschiedlich groß. Höchstens so breit, dass rechts 24px Luft zum Text bleiben (Spaltenabstand wie .about-grid); knapp über 1060px wird das Bild dann kleiner (contain, unten bündig) und der Kopf sitzt etwas tiefer. */ @media (min-width: 1061px) { body.cd #person .about-photo { align-self: stretch; justify-self: stretch; max-width: none; margin-top: 0; } body.cd #person .about-photo img { position: absolute; top: 0; left: 50%; width: auto; height: 100%; max-width: calc(100% + 2 * (clamp(36px, 5vw, 80px) - 24px)); object-fit: contain; object-position: 50% 100%; transform: translateX(-50%); } } /* Logo-Band (alle Seiten mit Band), Handy: Beschriftung "Diese Partner vertrauen auf meine Expertise" in einer Zeile. Schrift wächst mit der Breite bis zur bisherigen Größe (.76rem), etwas engerer Buchstabenabstand und Rand. 31.3 = Zeilenbreite in Vielfachen der Schriftgröße (gemessen 25,25 für die Buchstaben + 44 × .12em, mit Reserve). */ @media (max-width: 640px) { body.cd .marquee-label { padding-inline: 12px; letter-spacing: .12em; font-size: min(.76rem, calc((100vw - 24px) / 31.3)); } /* Englisch ("These partners trust my expertise") ist kürzer: 23,5 + Reserve */ html[lang="en"] body.cd .marquee-label { font-size: min(.76rem, calc((100vw - 24px) / 24.2)); } } /* Keynotes (DE/EN), alle Breiten: Einleitung unter "Experten-Auftritte von Niklas Titgemeyer" über die volle Inhaltsbreite */ body.cd.cd-seite-keynotes .media-feature > .section-head, body.cd.cd-seite-keynotes .media-feature > .section-head .lead { max-width: none; } /* Videos in den Experten-Auftritten (Brisant, YouTube-Interview; Startseiten und Keynotes, DE/EN), alle Breiten: statt des kleinen Lautsprecher-Kreises eine deutlich sichtbare gelbe Pille "Ton einschalten" oben rechts. Ist der Ton an, bleibt der kleine runde Knopf zum Ausschalten. */ body.cd .tv-sound-text { display: none; } body.cd .tv-sound.is-muted { width: auto; height: 30px; gap: 6px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--gelb); color: var(--tinte); font-family: var(--font-label); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); transition: background-color .2s ease; } body.cd .tv-sound.is-muted:hover, body.cd .tv-sound.is-muted:focus-visible { background: var(--gelb-tief); } body.cd .tv-sound.is-muted .tv-sound-text { display: inline; order: 2; } /* Artikel mit Bild neben der Einleitung (.art-intro, z. B. ChatGPT als Therapeut), Desktop: Die Einleitung umschließt das schwebende Bild, damit die nächste Zwischenüberschrift erst darunter beginnt und nicht um das Bild herumfließt ("Chatbots sind | Speichellecker"). Unter 861px stapelt style.css die Einleitung ohnehin. */ @media (min-width: 861px) { body.cd.cd-seite-artikel .art-intro { display: flow-root; } } /* Tokens-Artikel, alle Breiten: Kontextfenster-Balken oben so breit wie der Einleitungstext (volle Inhaltsbreite statt 760px) */ body.cd.cd-seite-artikel-tokens-sparen-mit-claude .tok-hero-viz { max-width: none; } /* Zahlen-Leiste, Handy (seit 110.000 Followern, 19.10.2026): "+110.000 Follower" bleibt einzeilig. Die Zahl ist eine Ziffer breiter (rund 4,6em), das englische "Followers" braucht am meisten Platz. Die Größe wächst deshalb linear mit der Breite (320px: 38px, 390px: 49px) und erreicht ab etwa 415px wieder die alten 3.3rem; 3 % Reserve zum Rand. Die Verschiebungen auf das Porträt (Startseiten, Keynotes) bleiben wie gehabt. */ @media (max-width: 640px) { body.cd .stats .stat:first-child .stat-num { font-size: min(3.3rem, calc(15.5vw - 11.5px)); } } /* Über mich (DE/EN), Handy und Tablet: Follower-Plakette auf dem Porträt nie breiter als das Bild samt Rahmen (Bühne = min(100vw, 420px) - 40px, je Seite 5px Luft). Icons, Abstände und Polster in em, damit alles mit der Schrift skaliert; bei 1.13rem sind es genau die alten px-Werte. Breite der Plakette: DE 20,45em, EN 21,18em. Desktop unverändert. */ @media (max-width: 1060px) { body.cd.cd-seite-ueber-mich .about-stage-tag.story-follower { font-size: min(1.13rem, calc((min(100vw, 420px) - 50px) / 20.45)); gap: .608em; padding: .608em 1.217em; } body.cd.cd-seite-en-about .about-stage-tag.story-follower { font-size: min(1.13rem, calc((min(100vw, 420px) - 50px) / 21.2)); } body.cd.cd-seite-ueber-mich .story-follower-icons { gap: .442em; } body.cd.cd-seite-ueber-mich .story-follower-icons svg { width: 1.106em; height: 1.106em; } } /* Newsletter (19.10.2026), Handy: Ausgaben einspaltig, Anmeldefeld und Button untereinander, Buttons volle Breite */ @media (max-width: 640px) { body.cd.cd-seite-newsletter .nlx-grid { grid-template-columns: 1fr; } body.cd.cd-seite-newsletter .nlx-inline { flex-direction: column; border-radius: 22px; padding: 8px; } body.cd.cd-seite-newsletter .nlx-inline input { padding: 14px; } body.cd.cd-seite-newsletter .nlx-inline .btn { justify-content: center; } body.cd.cd-seite-newsletter .nlx-top-text { gap: 12px; } body.cd.cd-seite-newsletter .nlx-top .btn { align-self: stretch; justify-content: center; } } /* Über mich, Handy: Newsletter-Pille wie auf newsletter.html untereinander, Button volle Breite */ @media (max-width: 640px) { body.cd.cd-seite-ueber-mich .story-nl-pille { flex-direction: column; border-radius: 22px; padding: 8px; } body.cd.cd-seite-ueber-mich .story-nl-pille input { padding: 14px; } body.cd.cd-seite-ueber-mich .story-nl-pille .btn { justify-content: center; } }