/* ========================================================================== STUDIO KONTUR – Startseite, Kapitel 01 Intro (im ) Rasterlinien (ab 48rem): a | b | c | d | e = 0 · 3/12 · 5/12 · 10/12 · 12/12 Kapitel 02–07: pages/start-kapitel.css ========================================================================== */ /* -------------------------------------------------------------------------- 01 Intro -------------------------------------------------------------------------- */ .intro { row-gap: var(--s-6); padding-top: var(--s-5); padding-bottom: 0; border-top: 0; } .intro__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-5); padding-bottom: var(--s-2); border-bottom: var(--rahmen) solid var(--tinte); } /* Wortmarke: jede Zeile füllt die Spalte exakt (Container-Query-Einheiten) */ .wortmarke { container-type: inline-size; overflow-x: clip; hyphens: manual; font-family: var(--schrift-display); font-weight: 800; line-height: 0.8; letter-spacing: 0; text-transform: uppercase; text-wrap: nowrap; } .wortmarke__zeile { display: block; white-space: nowrap; font-size: calc(100cqi / var(--wm-faktor-1)); } .wortmarke__zeile--2 { font-size: calc(100cqi / var(--wm-faktor-2)); padding-top: 0.04em; } /* Schmale Telefone: vier Silbenzeilen im Blocksatz statt zwei kleiner Zeilen */ @media (max-width: 29.99rem) { .wortmarke__zeile { font-size: 1rem; padding-top: 0; } .wortmarke__teil { display: block; font-size: calc(100cqi / var(--f)); } .wortmarke__teil--stu { --f: var(--wm-faktor-stu); } .wortmarke__teil--dio { --f: var(--wm-faktor-dio); } .wortmarke__teil--kon { --f: var(--wm-faktor-kon); padding-top: 0.05em; } .wortmarke__teil--tur { --f: var(--wm-faktor-tur); } } .intro__text { container-type: inline-size; } .intro__text > * + * { margin-top: var(--s-5); } .intro__claim { font-family: var(--schrift-display); /* „HALTUNG.“ ist ≈ 8,6 em breit und darf nie mitten im Wort umbrechen */ font-size: min(var(--fs-gross), 100cqi / 8.8); font-weight: 800; line-height: 0.95; text-transform: uppercase; hyphens: manual; } .intro__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-top: var(--s-2); } .intro__bild .abb__rahmen img { aspect-ratio: 3 / 2; object-fit: cover; } .cover__liste { border-top: var(--rahmen) solid var(--tinte); } .cover__titel { margin-bottom: var(--s-2); } .cover__liste a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; gap: var(--s-3); padding: var(--s-2) var(--s-1); border-bottom: var(--rahmen-duenn) solid var(--tinte); font-family: var(--schrift-display); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); font-weight: 800; line-height: 1.2; text-decoration: none; transition: background-color var(--dauer-kurz), color var(--dauer-kurz); } .cover__nr { padding: 0 var(--s-1); background: var(--blau); color: var(--weiss); font-family: var(--schrift-mono); font-size: var(--fs-mini); font-weight: 500; text-align: center; } .cover__liste a:hover { background: var(--tinte); color: var(--weiss); } .intro .laufband { margin-inline: calc(-1 * var(--rand)); margin-top: var(--s-5); border-bottom: 0; } @media (min-width: 64rem) { .intro__text { grid-column: a / c; } .intro__bild { grid-column: c / e; grid-row: span 2; align-self: start; } .intro__bild .abb__rahmen img { max-height: min(58vh, 44rem); } .cover { grid-column: a / c; align-self: end; } .intro .laufband { grid-column: a / e; } } @media (min-width: 64rem) { .intro { padding-top: var(--s-6); } }