/* ========================================================================== DR71 WIDGETS (zentrale Datei 2 von 2) Setzt dr71-fundament.css voraus. Widgets reagieren per Container Query auf die Breite ihres Platzes, nicht auf die Fensterbreite. Stand: Fundament v2, 17.09.2026 (Arbeitsstand Betrieb, noch nicht im Skill) ========================================================================== */ /* ---------- Karte mit Lichtfleck, der dem Zeiger folgt ---------- */ .ds-karte::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%), rgba(0, 232, 252, 0.13), transparent 70%); } .ds-karte:hover::after { opacity: 1; } a.ds-karte:hover { transform: translateY(-3px); } .ds-karte__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--s3); } .ds-karte__bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05) brightness(0.85); transition: transform 0.6s ease, filter 0.4s ease; } a.ds-karte:hover .ds-karte__bild img { transform: scale(1.04); filter: saturate(0.9) contrast(1.05) brightness(0.95); } .ds-karte__text { position: relative; z-index: 1; display: grid; gap: 0.75rem; padding: clamp(1.25rem, 2vw, 1.75rem); } .ds-kartenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--spalt); list-style: none; margin: 0; padding: 0; } /* ---------- Hero-Widget (Buehne) ---------- Regel (Maria, 17.09.2026, _log/2026-09-17_maria-h1-weg-hero-widget.md): Zeile 1 = Fokus-Keyword in Anton, Zeile 2 = Differenzierung in Cyan, Roboto, normale Schreibung. Ueber der H1 steht KEIN Cyan-Label. Nie Text verstecken. - Bestandsseite mit optimierter H1: Weg a. Beide Zeilen im selben

, Text wortgleich, Zeile 2 als . - Neue Seite: Weg b1.

traegt nur das Keyword, Zeile 2 ist ein

direkt darunter. Sieht identisch aus. */ .ds-buehne { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 6rem); overflow: hidden; } .ds-buehne__text { display: grid; gap: 1.5rem; align-content: center; } .ds-buehne__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } .ds-h1__kw { display: block; } .ds-h1__sub, .ds-buehne__sub { display: block; text-wrap: balance; font-family: var(--font-text); font-weight: 300; font-size: var(--fs-h1-sub); line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--cyan); } .ds-h1__sub { margin-top: 0.875rem; } .ds-buehne__sub { margin-top: -0.625rem; } .ds-buehne__text > .ds-label { margin-bottom: 0; color: var(--cyan); } /* Variante 2c-e: Etikett ueber der H1 in Cyan, CEO 19.09.2026 */ /* Rueckfall (nur noch zum Vergleich): ganzer Satz in Anton, 28 bis 32 px, Lead eine Stufe kleiner */ .ds-buehne--h1-klein .ds-h1 { font-size: var(--fs-h1-klein); line-height: 1.22; letter-spacing: 0.02em; } .ds-buehne--h1-klein .ds-h1__kw, .ds-buehne--h1-klein .ds-h1__sub { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .ds-buehne--h1-klein .ds-lead { font-size: var(--fs-body); font-weight: 400; color: var(--text-2); } .ds-ansicht { perspective: 90rem; } .ds-ansicht__flaeche { position: relative; transform: rotateX(9deg) rotateY(-13deg) rotateZ(2deg) translateZ(0); transform-origin: 60% 50%; border: 1px solid transparent; border-radius: var(--r-karte); overflow: hidden; background: linear-gradient(var(--s2), var(--s2)) padding-box, var(--haarlinie-stark) border-box; box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.7), var(--schein-stark); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .ds-ansicht:hover .ds-ansicht__flaeche { transform: rotateX(6deg) rotateY(-8deg) rotateZ(1deg); } .ds-ansicht__flaeche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, 0.12) 0%, transparent 32%); pointer-events: none; } @media (max-width: 63.99em) { .ds-ansicht__flaeche, .ds-ansicht:hover .ds-ansicht__flaeche { transform: none; } } .ds-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .shader-an .ds-shader { opacity: 0.85; } .shader-an .ds-buehne .ds-licht { display: none; } /* ---------- Success-Story-Teaser ---------- Regel (CEO 17.09.): mehrere Stories im Wechsel A, C, A. Bilder echt, ohne Cyan-Ton. A = Cyan-Vollflaeche (Signatur), C = graue Flaeche mit Haarlinie und Cyan-Etikett. */ .ds-story { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-tafel); overflow: hidden; container-type: inline-size; } .ds-story__text { display: grid; gap: 1rem; align-content: center; justify-items: start; padding: clamp(1.5rem, 4vw, 3rem); } .ds-story__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s3); } .ds-story__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ds-story .ds-h3 { font-family: var(--font-marke); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; } @container (min-width: 44rem) { .ds-story__innen { display: grid; grid-template-columns: 5fr 7fr; min-height: 24rem; } .ds-story__bild { aspect-ratio: auto; } .ds-story--gespiegelt .ds-story__innen { grid-template-columns: 7fr 5fr; } .ds-story--gespiegelt .ds-story__text { order: 2; } } .ds-story--a { background: var(--cyan); } .ds-story--a .ds-story__text, .ds-story--a .ds-h3 { color: var(--auf-cyan); } .ds-story--a p { color: rgba(0, 17, 20, 0.82); } .ds-story--a .ds-label { color: rgba(0, 17, 20, 0.6); } /* Nur zum Vergleich: Bild im Cyan-Ton (v1). Standard ist das echte Bild. */ .ds-story--a.ds-story--bildton .ds-story__bild { background: var(--cyan); } .ds-story--a.ds-story--bildton .ds-story__bild img { filter: grayscale(1) contrast(1.1) brightness(0.9); mix-blend-mode: multiply; } .ds-story--c { border: 1px solid transparent; background: linear-gradient(var(--s2), var(--s2)) padding-box, var(--haarlinie) border-box; box-shadow: var(--kante), var(--schein); } /* ---------- Aktions-Widget: Bild-CTA ueber volle Breite ---------- */ .ds-band { position: relative; display: grid; align-items: center; min-height: clamp(22rem, 38vw, 32rem); overflow: hidden; background: var(--s1); } .ds-band__bild { position: absolute; inset: 0; } .ds-band__bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) brightness(0.55); } .ds-band__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); } .ds-band__text { display: grid; gap: 1.25rem; justify-items: start; max-width: 38rem; padding-block: 3rem; } /* ---------- Aktions-Widget: Schluss-CTA (Tafel mit kraeftigem Licht) ---------- */ .ds-tafel__innen { padding: clamp(1.5rem, 4vw, 3.5rem); } .ds-schluss { display: grid; gap: 1.25rem; justify-items: start; max-width: 44rem; } /* ---------- Inhalts-Widget: Tabelle (wird in schmalen Plaetzen zu Karten) ---------- */ .ds-tabelle-rahmen { --flaeche: var(--s1); container-type: inline-size; } .ds-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; } .ds-tabelle caption { padding: 1.25rem 1.5rem 0; text-align: left; font-size: var(--fs-fine); color: var(--text-3); caption-side: top; } .ds-tabelle th, .ds-tabelle td { padding: 1rem 1.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); } .ds-tabelle thead th { font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .ds-tabelle tbody th { font-weight: 500; color: var(--text); } .ds-tabelle tbody tr:last-child th, .ds-tabelle tbody tr:last-child td { border-bottom: 0; } .ds-tabelle tbody tr { transition: background-color 0.15s ease; } .ds-tabelle tbody tr:hover { background: rgba(255, 255, 255, 0.025); } .ds-tabelle .zahl { text-align: right; white-space: nowrap; color: var(--text); } .ds-tabelle .hervor { background: rgba(0, 232, 252, 0.05); color: var(--text); } .ds-tabelle thead .hervor { color: var(--cyan); } @container (max-width: 40rem) { .ds-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ds-tabelle, .ds-tabelle caption, .ds-tabelle tbody, .ds-tabelle tr, .ds-tabelle th, .ds-tabelle td { display: block; } .ds-tabelle caption { padding: 1.25rem 1.25rem 0; } .ds-tabelle tbody tr { padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); } .ds-tabelle tbody tr:last-child { border-bottom: 0; } .ds-tabelle tbody th { padding: 0 0 0.5rem; border: 0; font-size: var(--fs-body); } .ds-tabelle td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border: 0; text-align: right; } .ds-tabelle td::before { content: attr(data-spalte); flex: 0 0 38%; text-align: left; font-size: var(--fs-fine); color: var(--text-3); } .ds-tabelle .hervor { background: none; } .ds-tabelle .zahl { text-align: right; white-space: normal; } } /* ---------- Festes Widget: Autorenbox (Text gesperrt, nur Stil) ---------- Reihenfolge im HTML wie im Master: Foto, Name und Rolle, Absaetze, Links. Die Anordnung waehlt der Platz: schmal = gestapelt, mittel = Foto links, breit = Kopfspalte links (Foto, Name, Rolle), Absaetze und Links rechts. */ .ds-autor { container-type: inline-size; } /* CEO 19.09.2026 (Grafik der Live-Autorenbox): Foto rund mit Cyan-Ring, Name in Cyan, Knoepfe in Cyan mit LinkedIn-Zeichen, in beiden Breiten Foto links (mittig) und Text rechts. */ .ds-autor__innen { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); } .ds-autor__foto { width: 7rem; height: 7rem; border-radius: 50%; /* DR71-KREIS: Avatar-Foto, echter Kreis (Formsprache-Ausnahme, CEO 16.09.2026) */ border: 0.1875rem solid var(--cyan); box-shadow: 0 0 1.25rem rgba(0, 232, 252, 0.2); object-fit: cover; filter: grayscale(0.2) contrast(1.05); } .ds-autor__kopf { display: grid; gap: 0.375rem; align-content: start; } .ds-autor__name { font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h3); letter-spacing: 0.03em; text-transform: uppercase; color: var(--cyan); } .ds-autor__name a { color: inherit; } .ds-autor__rolle { font-size: var(--fs-fine); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .ds-autor__absatz { display: grid; gap: 0.875rem; align-content: start; } .ds-autor__absatz p { max-width: 46rem; } .ds-autor__links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-content: start; } .ds-autor__links .ds-knopf--rand { border-color: var(--cyan); color: var(--cyan); } .ds-autor__links .ds-knopf--rand:hover { background: var(--cyan); color: var(--auf-cyan); } .ds-knopf--linkedin::before { content: "in"; display: inline-grid; place-items: center; width: 1.125em; height: 1.125em; border-radius: 0.2em; background: var(--cyan); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-fine); line-height: 1; letter-spacing: 0; color: var(--auf-cyan); } /* LinkedIn-Zeichen ohne Icon-Font */ .ds-knopf--linkedin:hover::before { background: var(--auf-cyan); color: var(--cyan); } @container (min-width: 40rem) { .ds-autor__innen { grid-template-columns: 7rem minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-areas: "foto kopf" "foto absatz" "foto links"; } .ds-autor__foto { grid-area: foto; align-self: center; } .ds-autor__kopf { grid-area: kopf; } .ds-autor__absatz { grid-area: absatz; } .ds-autor__links { grid-area: links; } } @container (min-width: 64rem) { .ds-autor__innen { grid-template-columns: 9rem minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); } .ds-autor__foto { width: 9rem; height: 9rem; } } /* ---------- Kundenlogos (Aufteilung Sechstel) ---------- */ .ds-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); align-items: center; } .ds-logos img { max-height: 3rem; width: auto; margin-inline: auto; opacity: 0.6; filter: grayscale(1) brightness(1.6); transition: opacity 0.25s ease; } .ds-logos img:hover { opacity: 1; } @media (min-width: 40em) { .ds-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64em) { .ds-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================================== MUSTERBUCH v1 (18.09.2026): weitere Widgets. Status je Widget steht im Musterbuch (musterbuch-v1.html), nicht hier. Keine Variable wird hier definiert, alle Werte kommen aus dr71-fundament.css. ========================================================================== */ /* ---------- Festes Widget: Navigation (Text von designroad71.com, gemessen 18.09.2026) ---------- Ohne Skript: das mobile Menue ist ein

, der Hamburger die . */ .ds-nav { position: relative; z-index: 40; border-bottom: 1px solid var(--linie); background: rgba(0, 0, 0, 0.92); } .ds-nav__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; } .ds-nav__logo { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h4); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } .ds-nav__logo img { width: 2.5rem; height: auto; } .ds-nav__logo span { display: none; } .ds-nav__links { display: none; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.5rem); } .ds-nav__link { font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); transition: color 0.2s ease; } .ds-nav__link:hover { color: var(--cyan); } .ds-nav__cta { display: none; } .ds-nav__mobil { position: relative; } .ds-nav__mobil summary { list-style: none; display: grid; gap: 0.3125rem; padding: 0.75rem; border: 1px solid var(--linie-stark); border-radius: var(--r-knopf); cursor: pointer; } .ds-nav__mobil summary::-webkit-details-marker { display: none; } .ds-nav__mobil summary span { display: block; width: 1.25rem; height: 2px; background: var(--text); } .ds-nav__mobil[open] summary { border-color: var(--cyan); } .ds-nav__menue { position: absolute; right: 0; top: calc(100% + 0.5rem); display: grid; gap: 0.25rem; min-width: 16rem; padding: 0.75rem; border: 1px solid transparent; border-radius: var(--r-karte); background: linear-gradient(var(--s2), var(--s2)) padding-box, var(--haarlinie) border-box; box-shadow: var(--kante), var(--schein); } .ds-nav__menue .ds-nav__link { padding: 0.625rem 0.75rem; border-radius: 0.5rem; } .ds-nav__menue .ds-nav__link:hover { background: var(--s3); } .ds-nav__menue .ds-knopf { margin-top: 0.5rem; justify-content: center; } /* Desktop-Leiste erst ab 76em (1216 px): acht Menuepunkte plus Knopf passen bei 1024 px nicht in eine Zeile (gemessen 18.09.2026: 1062 px) */ @media (min-width: 76em) { .ds-nav__links { display: flex; } .ds-nav__cta { display: inline-flex; padding-block: 0.625rem; } .ds-nav__mobil { display: none; } .ds-nav__logo span { display: inline; } } /* ---------- Inhalts-Widget: Brotkrumen ---------- */ /* CEO 19.09.2026: Stil der Mark-Grandler-Seite. Kein Rahmen, Trenner "/" aus dem CSS, Trenner und letzter Eintrag in --text-3, Links in --text-2. */ .ds-brotkrumen { padding-block: 1rem; font-size: var(--fs-fine); color: var(--text-3); } .ds-brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; } .ds-brotkrumen li + li::before { content: "/"; margin-right: 0.5rem; color: var(--text-3); } .ds-brotkrumen a { color: var(--text-2); } .ds-brotkrumen a:hover { color: var(--cyan); } /* ---------- Inhalts-Widget: TL;DR (Tafel mit kraeftiger Haarlinie) ---------- */ .ds-tldr { --rand-verlauf: var(--haarlinie-stark); --rand-schein: var(--schein-stark); } .ds-tldr__innen { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); } .ds-tldr__liste { display: grid; gap: 1rem; list-style: none; } .ds-tldr__liste li { position: relative; padding-left: 1.75rem; } .ds-tldr__liste li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; background: var(--cyan); } .ds-tldr__liste strong { font-weight: 500; color: var(--text); } .ds-tldr__liste em { font-style: normal; color: var(--text-3); } /* ---------- Inhalts-Widget: Kernsatz (Definition, 40 bis 60 Woerter) und zitierfaehiger Satz ---------- */ .ds-kernsatz { --flaeche: var(--s2); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); } .ds-kernsatz p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; color: var(--text); } .ds-zitatsatz { position: relative; padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2vw, 1.25rem) clamp(3rem, 5vw, 3.75rem); border-radius: var(--r-karte); background: rgba(0, 232, 252, 0.045); } .ds-zitatsatz::before { content: "\201E"; position: absolute; left: clamp(1rem, 2vw, 1.5rem); top: 0; font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-zahl); line-height: 1.2; color: var(--cyan); } .ds-zitatsatz p { font-weight: 400; color: var(--text); } /* ---------- Inhalts-Widget: Pfeil-Liste ---------- */ .ds-pfeilliste { display: grid; gap: 0.875rem; list-style: none; } .ds-pfeilliste li { position: relative; padding-left: 1.75rem; } .ds-pfeilliste li::before { content: "\2192"; position: absolute; left: 0; top: 0; font-weight: 500; color: var(--cyan); } .ds-pfeilliste strong { font-weight: 500; color: var(--text); } /* ---------- Inhalts-Widget: Schrittliste (Zahl-Kachel, keine Kreise) ---------- */ .ds-schritte { display: grid; gap: var(--spalt); counter-reset: schritt; list-style: none; } .ds-schritte__schritt { counter-increment: schritt; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: clamp(1.25rem, 2vw, 1.75rem); } .ds-schritte__schritt::before { content: counter(schritt); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-knopf); background: var(--cyan); font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h4); color: var(--auf-cyan); } .ds-schritte__schritt strong { font-weight: 500; color: var(--text); } .ds-schritte__schritt a { color: var(--cyan); } /* ---------- Inhalts-Widget: Kennzahlen ---------- */ .ds-kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); } .ds-kennzahl { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.25rem, 2vw, 1.75rem); } .ds-kennzahl__zahl { font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-zahl); line-height: 1; letter-spacing: 0.02em; color: var(--cyan); font-variant-numeric: tabular-nums; } .ds-kennzahl__text { font-size: var(--fs-small); color: var(--text-2); } @media (min-width: 64em) { .ds-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Karte mit Zeichen (Pain Points, Vorteile): Zeichen = inline-SVG in Cyan ---------- */ .ds-karte__zeichen { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-knopf); background: rgba(0, 232, 252, 0.09); color: var(--cyan); } .ds-karte__zeichen svg { width: 1.375rem; height: 1.375rem; } .ds-kartenreihe--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } /* Genau drei Kacheln je Reihe (CEO 21.09.2026): 22rem sind breit genug, dass in einen 1280 px breiten Inhaltsbereich keine vierte Spalte mehr passt; schmalere Fenster fallen ueber min(100%, ...) von selbst auf zwei und dann eine Spalte zurueck. */ .ds-kartenreihe--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } /* Quadratische Kartenbilder (Podcast- und Albumcover, CEO 21.09.2026): Modifikator am Container, wirkt in beiden Rastern. Ohne ihn bleibt es bei 16:10. */ .ds-kartenreihe--quadrat .ds-karte__bild, .ds-raster--quadrat .ds-karte__bild { aspect-ratio: 1 / 1; } /* ---------- Inhalts-Widget: Bildbox (Text neben Bild, Bild 4:3) ---------- */ .ds-bildbox { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .ds-bildbox__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-tafel); background: var(--s3); } .ds-bildbox__bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05) brightness(0.9); } .ds-bildbox__bild figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.75rem 1rem; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8)); font-size: var(--fs-fine); color: var(--text-2); } @media (min-width: 64em) { .ds-bildbox { grid-template-columns: 7fr 5fr; } .ds-bildbox--bild-links .ds-bildbox__bild { order: -1; } .ds-bildbox--bild-links { grid-template-columns: 5fr 7fr; } } /* ---------- Inhalts-Widget: Bildband (12:5 ueber volle Breite, ohne Aktion) ---------- */ .ds-bildband { position: relative; aspect-ratio: 12 / 5; max-height: 36rem; overflow: hidden; background: var(--s1); } .ds-bildband img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.8); } .ds-bildband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%); pointer-events: none; } .ds-bildband figcaption { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vw, 2rem); z-index: 1; font-size: var(--fs-fine); color: var(--text-3); } /* ---------- Aktions-Widget: Text-CTA (kein Bild, Link mit Pfeil) ---------- */ .ds-textcta { display: grid; gap: 0.75rem; justify-items: start; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); } .ds-textcta .ds-h3 { text-wrap: pretty; } /* ---------- Aktions-Widget: Weiterlesen-Karte (Bild links, Text und Knopf rechts) ---------- */ .ds-weiter { container-type: inline-size; } .ds-weiter__innen { display: grid; } .ds-weiter__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s3); } .ds-weiter__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05) brightness(0.85); } .ds-weiter__text { display: grid; gap: 0.875rem; align-content: center; justify-items: start; padding: clamp(1.25rem, 3vw, 2.25rem); } @container (min-width: 40rem) { .ds-weiter__innen { grid-template-columns: 5fr 7fr; } .ds-weiter__bild { aspect-ratio: auto; min-height: 14rem; } } /* ---------- Aktions-Widget: Newsletter-Band (volle Breite, ohne Bild, leises Licht) ---------- */ .ds-newsletter { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--s1); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .ds-newsletter__innen { display: grid; gap: 1.25rem; align-items: center; } .ds-newsletter__text { display: grid; gap: 0.75rem; } .ds-newsletter__text p { max-width: 40rem; } @media (min-width: 64em) { .ds-newsletter__innen { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } } /* ---------- Inhalts-Widget: FAQ (details, ohne Skript) ---------- */ .ds-faq { display: grid; gap: 0.75rem; } .ds-faq__frage { --flaeche: var(--s1); } .ds-faq__frage summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; padding: 1.125rem clamp(1.25rem, 2.5vw, 1.75rem); cursor: pointer; font-size: var(--fs-h4); font-weight: 500; color: var(--text); } .ds-faq__frage summary::-webkit-details-marker { display: none; } .ds-faq__frage summary::after { content: "+"; justify-self: end; font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h3); line-height: 1; color: var(--cyan); transition: transform 0.25s ease; } .ds-faq__frage[open] summary::after { transform: rotate(45deg); } .ds-faq__frage[open] { --rand-verlauf: var(--haarlinie-stark); } .ds-faq__antwort { padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) 1.25rem; color: var(--text-2); } /* ---------- Festes Widget: Kundenstimmen (Reiter ohne Skript: Radio plus Label) ---------- */ .ds-stimmen { display: grid; gap: var(--spalt); } .ds-stimmen__reiter { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; } .ds-stimmen__reiter label { flex: 0 0 auto; padding: 0.5rem 0.875rem; border: 1px solid var(--linie-stark); border-radius: var(--r-knopf); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; color: var(--text-2); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .ds-stimmen__reiter label:hover { border-color: var(--cyan); color: var(--text); } .ds-stimmen input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ds-stimmen input:focus-visible + .ds-stimmen__reiter label { outline: 2px solid var(--cyan); } .ds-stimmen__tafel { display: none; --flaeche: var(--s1); } .ds-stimmen__tafel > div { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); } .ds-stimmen__zitat { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--text); text-wrap: pretty; } .ds-stimmen__name { font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h4); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } .ds-stimmen__rolle { margin-top: 0.25rem; font-size: var(--fs-fine); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .ds-stimmen input:nth-of-type(1):checked ~ .ds-stimmen__reiter label:nth-of-type(1), .ds-stimmen input:nth-of-type(2):checked ~ .ds-stimmen__reiter label:nth-of-type(2), .ds-stimmen input:nth-of-type(3):checked ~ .ds-stimmen__reiter label:nth-of-type(3), .ds-stimmen input:nth-of-type(4):checked ~ .ds-stimmen__reiter label:nth-of-type(4), .ds-stimmen input:nth-of-type(5):checked ~ .ds-stimmen__reiter label:nth-of-type(5), .ds-stimmen input:nth-of-type(6):checked ~ .ds-stimmen__reiter label:nth-of-type(6), .ds-stimmen input:nth-of-type(7):checked ~ .ds-stimmen__reiter label:nth-of-type(7), .ds-stimmen input:nth-of-type(8):checked ~ .ds-stimmen__reiter label:nth-of-type(8), .ds-stimmen input:nth-of-type(9):checked ~ .ds-stimmen__reiter label:nth-of-type(9), .ds-stimmen input:nth-of-type(10):checked ~ .ds-stimmen__reiter label:nth-of-type(10), .ds-stimmen input:nth-of-type(11):checked ~ .ds-stimmen__reiter label:nth-of-type(11) { border-color: var(--cyan); background: var(--cyan); color: var(--auf-cyan); } .ds-stimmen input:nth-of-type(1):checked ~ .ds-stimmen__tafel:nth-of-type(1), .ds-stimmen input:nth-of-type(2):checked ~ .ds-stimmen__tafel:nth-of-type(2), .ds-stimmen input:nth-of-type(3):checked ~ .ds-stimmen__tafel:nth-of-type(3), .ds-stimmen input:nth-of-type(4):checked ~ .ds-stimmen__tafel:nth-of-type(4), .ds-stimmen input:nth-of-type(5):checked ~ .ds-stimmen__tafel:nth-of-type(5), .ds-stimmen input:nth-of-type(6):checked ~ .ds-stimmen__tafel:nth-of-type(6), .ds-stimmen input:nth-of-type(7):checked ~ .ds-stimmen__tafel:nth-of-type(7), .ds-stimmen input:nth-of-type(8):checked ~ .ds-stimmen__tafel:nth-of-type(8), .ds-stimmen input:nth-of-type(9):checked ~ .ds-stimmen__tafel:nth-of-type(9), .ds-stimmen input:nth-of-type(10):checked ~ .ds-stimmen__tafel:nth-of-type(10), .ds-stimmen input:nth-of-type(11):checked ~ .ds-stimmen__tafel:nth-of-type(11) { display: block; } /* ---------- Festes Widget: YouTube-Banner (eine klickbare Karte) ---------- */ /* Als Link ist die Karte ein Inline-Element und bildet keinen Container fuer die Abfrage: deshalb display: block (gemessen 18.09.2026, Bild stapelte ueber dem Text) */ .ds-youtube { display: block; container-type: inline-size; } .ds-youtube__innen { display: grid; } .ds-youtube__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s3); } .ds-youtube__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ds-youtube__text { display: grid; gap: 0.75rem; align-content: center; padding: clamp(1.25rem, 3vw, 2.25rem); } @container (min-width: 44rem) { .ds-youtube__innen { grid-template-columns: 6fr 6fr; } .ds-youtube__bild { aspect-ratio: auto; min-height: 14rem; } } /* ---------- Festes Widget: LinkedIn-Leiste (drei Karten) ---------- */ .ds-linkedin { display: grid; gap: var(--spalt); } .ds-linkedin__eintrag { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1.125rem clamp(1.25rem, 2vw, 1.5rem); } .ds-linkedin__eintrag svg { width: 2.5rem; height: 2.5rem; color: var(--cyan); } .ds-linkedin__eintrag strong { display: block; font-weight: 500; color: var(--text); } .ds-linkedin__eintrag span { font-size: var(--fs-fine); color: var(--text-3); } @media (min-width: 48em) { .ds-linkedin { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Festes Widget: Fuss ---------- */ .ds-fuss { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linie); background: var(--s1); } .ds-fuss__innen { display: grid; gap: 1rem; font-size: var(--fs-fine); color: var(--text-3); } .ds-fuss__links { display: flex; flex-wrap: wrap; gap: 1.25rem; } .ds-fuss__links a { color: var(--text-2); } .ds-fuss__links a:hover { color: var(--cyan); } @media (min-width: 48em) { .ds-fuss__innen { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } } /* ---------- 12b Datenraster: Schluessel-Wert-Paare im Raster (19.09.2026, CEO-Wunsch) ---------- Fuer Stammdaten und Steckbriefe. Beschreibungsliste statt Tabelle: richtige Semantik fuer Paare, keine Spaltenkoepfe noetig. Zwei Spalten ab mittlerer Breite, darunter eine. Die Linien bilden ein Gitter, ohne dass eine Zelle einen eigenen Rahmen traegt. */ .ds-datenraster { container-type: inline-size; --flaeche: var(--s1); overflow: hidden; } .ds-datenraster__liste { display: grid; margin: 0; } .ds-datenraster__feld { padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--linie); } .ds-datenraster__feld:first-child { border-top: 0; } .ds-datenraster dt { margin: 0 0 0.375rem; font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); } /* Etiketten in Cyan, CEO 19.09.2026 */ .ds-datenraster dd { margin: 0; font-weight: 700; line-height: 1.5; color: var(--text); } @container (min-width: 34rem) { .ds-datenraster__liste { grid-template-columns: 1fr 1fr; } .ds-datenraster__feld:nth-child(2) { border-top: 0; } .ds-datenraster__feld:nth-child(even) { border-left: 1px solid var(--linie); } } /* ---------- Hero-Varianten (Musterbuch v1c, 19.09.2026, CEO-Entscheid): Foto rechts 16:9 und Video rechts 16:9 ---------- REGEL: Das Bild im Hero ist 16:9. Die Hochformat-Variante --hoch (4:5) ist die benannte Ausnahme fuer die Pass-/Ausweis-Darstellung (heute nur die Seite Mark Grandler). Ein Blatt traegt nur eine H1. In den Varianten des Musterbuchs steht die Ueberschrift deshalb als

, auf einer Seite ist es die H1 (Regel wie beim Hero-Widget). Video = Klick-zum-Laden: vor dem Klick kein Aufruf an YouTube oder Loom (Vorschaubild vom eigenen Server), nach dem Klick setzt dr71-widgets.js das iframe ein. */ .ds-buehne__foto { position: relative; align-self: start; width: 100%; margin-inline-start: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid transparent; border-radius: var(--r-tafel); background: linear-gradient(var(--s2), var(--s2)) padding-box, var(--haarlinie) border-box; box-shadow: var(--kante), var(--schein); } .ds-buehne__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05) brightness(0.9); } .ds-buehne__foto--hoch { max-width: 26rem; aspect-ratio: 4 / 5; } /* Ausnahme: Pass-/Ausweis-Darstellung */ .ds-video { position: relative; align-self: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid transparent; border-radius: var(--r-tafel); background: linear-gradient(var(--s2), var(--s2)) padding-box, var(--haarlinie-stark) border-box; box-shadow: var(--kante), var(--schein-stark); } .ds-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.55); transition: filter 0.3s ease; } .ds-video:hover img { filter: saturate(0.8) brightness(0.7); } .ds-video__start { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.875rem; width: 100%; padding: 1rem; border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer; } .ds-video__start span { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--r-karte); background: var(--cyan); color: var(--auf-cyan); transition: transform 0.2s ease; } .ds-video__start:hover span { transform: scale(1.06); } .ds-video__start svg { width: 1.75rem; height: 1.75rem; } .ds-video__start small { padding: 0.375rem 0.75rem; border-radius: 0.375rem; background: rgba(0, 0, 0, 0.65); font-size: var(--fs-fine); color: var(--text-2); text-align: center; } .ds-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ds-video--direkt { background: var(--s1); } /* direkt eingebetteter Player (Loom 1:1, Widget 31b, CEO 19.09.2026): Flaeche, bis der Player laedt */ /* ---------- Inhalts-Widget: Video mit Transkript (Musterbuch v1c, 18.09.2026, CEO-Wunsch) ---------- Video-Flaeche wie oben, darunter ein zugeklapptes Feld (details, ohne Skript) mit dem Transkript in kleiner Schrift. Der Text steht als echtes HTML in der Seite und zusaetzlich als VideoObject.transcript im JSON-LD (Schema.org). Ueberall einsetzbar: Hero, Lesespalte, Tafel. */ .ds-videoblock { display: grid; gap: 0.75rem; } /* Video und Transkript: gleiche Breite, minimaler Abstand, CEO 19.09.2026 */ .ds-buehne .ds-videoblock { align-self: center; align-content: start; } /* im Hero: Block zur Textspalte zentriert, Transkript direkt unter dem Video */ .ds-transkript { --flaeche: var(--s1); } .ds-transkript summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; padding: 0.875rem clamp(1rem, 2vw, 1.5rem); cursor: pointer; } .ds-transkript summary::-webkit-details-marker { display: none; } .ds-transkript summary::after { content: "+"; justify-self: end; font-family: var(--font-marke); font-weight: 400; font-size: var(--fs-h3); line-height: 1; color: var(--cyan); transition: transform 0.25s ease; } .ds-transkript[open] summary::after { transform: rotate(45deg); } .ds-transkript[open] { --rand-verlauf: var(--haarlinie-stark); } .ds-transkript__titel { display: block; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); } .ds-transkript__meta { display: block; margin-top: 0.125rem; font-size: var(--fs-fine); color: var(--text-3); } .ds-transkript__text { max-height: 24rem; overflow: auto; padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem; border-top: 1px solid var(--linie); font-size: var(--fs-small); line-height: 1.65; color: var(--text-2); scrollbar-width: thin; } .ds-transkript__text p { margin-top: 0.875rem; } .ds-transkript__text b { margin-right: 0.375rem; font-weight: 500; letter-spacing: 0.04em; color: var(--cyan); } /* ---------- 04b Textabschnitt, 07b Karten als Links (19.09.2026, S167, Skill-Test Autorenseite) ---------- */ .ds-text > .ds-label { color: var(--cyan); } /* Etikett ueber der Ueberschrift in Cyan, CEO 19.09.2026 */ a.ds-karte { display: block; color: inherit; text-decoration: none; } /* die ganze Karte ist der Link (Lernung 180) */ a.ds-karte:hover .ds-h4 { color: var(--cyan); } .ds-karte__ziel { display: inline-block; margin-top: calc(var(--spalt) / 2); font-size: var(--fs-fine); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); } /* DR71-ABSTAND-TEXTBLOCK (19.09.2026, CEO-Befund): Zwischen einem Textblock und dem folgenden Raster fehlte jeder Abstand, die Kacheln klebten an der Ueberschrift. Im Musterbuch faellt das nicht auf, weil dort die Blatt-Beschriftung dazwischensteht. Bewusst eng gefasst: nur fuer Textbloecke DIREKT in .ds-inhalt, denn in einem .ds-stapel sorgt dessen gap schon fuer den Abstand (sonst doppelt). Wert wie .ds-stapel, damit der Rhythmus gleich bleibt. */ .ds-inhalt > .ds-text + * { margin-top: calc(var(--spalt) * 1.5); }