/* ============================================================ layout.css — die geteilte Hülle. Topbar, Masthead, Register, Fließtext, Abschnitte, Abbinder, Fußnote: alles, was auf JEDER Seite gleich aussieht. Vorher stand das in allen acht Seiten-Stylesheets noch einmal. Mit dem erwartbaren Ergebnis, dass vier Regeln bereits auseinandergelaufen waren — das Zitat etwa lief auf den drei zuerst gebauten Seiten mit line-height 1.02, auf den fünf späteren mit 1.1. Eine Nachjustierung, die nicht zurückwanderte. Reihenfolge im : base.css → layout.css → .css Bei gleicher Spezifität gewinnt damit die Seite. Eine Seite darf hier gezielt abweichen; solche Regeln stehen in ihrem eigenen Stylesheet unter „Abweichungen von layout.css“, damit niemand sie suchen muss. Was NICHT hierher gehört: das Motiv jeder Seite (die Wellenlinie auf der Tonseite, die Kilometermarken beim Fixer). Das ist der Ort, an dem die Seiten sich unterscheiden sollen. ============================================================ */ /* ---- Topbar: liegt auf, bleibt oben, hält sich zurück ---- */ .topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.5rem var(--gutter); background: color-mix(in oklab, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .topbar__mark { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-quiet); border: 0; } .topbar__mark:hover { color: var(--ink); } .topbar nav { display: flex; flex-wrap: wrap; gap: 1.5rem; } .topbar nav a { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); border: 0; padding-bottom: 0.5rem; border-bottom: 1px solid transparent; } .topbar nav a:hover { color: var(--ink); } /* Die aktuelle Seite ist das einzige Orange in der Leiste. */ .topbar nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } /* ---- Mobile-Navigation ---- Der Knopf existiert nur, wenn nav.js gelaufen ist (.topbar--js). Ohne Skript greift keine dieser Regeln und die Leiste bleibt offen — mehrzeilig, aber vollständig bedienbar. */ .topbar__toggle { display: none; align-items: center; gap: 0.5rem; font-family: 'Antonio', sans-serif; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); background: none; border: 0; padding: 0.5rem 0; cursor: pointer; } .topbar__toggle:hover, .topbar__toggle[aria-expanded="true"] { color: var(--ink); } /* Zwei Striche, die sich beim Öffnen kreuzen. currentColor, damit der Wechsel auf --ink automatisch mitgeht. */ .topbar__burger { position: relative; width: 1.5rem; height: 0.5rem; flex: none; } .topbar__burger::before, .topbar__burger::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .16s ease, top .16s ease; } .topbar__burger::before { top: 0; } .topbar__burger::after { top: 0.5rem; } .topbar__toggle[aria-expanded="true"] .topbar__burger::before { top: 0.25rem; transform: rotate(45deg); } .topbar__toggle[aria-expanded="true"] .topbar__burger::after { top: 0.25rem; transform: rotate(-45deg); } @media (max-width: 759px) { .topbar--js { flex-wrap: wrap; row-gap: 0; } .topbar--js .topbar__toggle { display: inline-flex; order: 3; } .topbar--js .topbar__lang { order: 2; } /* Die Liste liegt in der zweiten Zeile über die volle Breite. */ .topbar--js nav { order: 4; display: none; width: 100%; } .topbar--js.is-open nav { display: flex; flex-direction: column; gap: 0; padding-bottom: 0.5rem; } .topbar--js.is-open nav a { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); } .topbar--js.is-open nav a:last-child { border-bottom: 0; } /* Ein offenes Menü darf nicht länger sein als der Bildschirm. */ .topbar--js.is-open nav { max-height: calc(100svh - 6rem); overflow-y: auto; } } /* ---- Sprachumschalter ---- Kein Skript, keine Automatik: ein Link auf die Entsprechung in der anderen Sprache. Automatische Weiterleitung nach Browsersprache wäre bequem und falsch — sie nimmt dem Besucher die Wahl und verwirrt Crawler, die immer nur eine Fassung zu sehen bekämen. Die aktive Sprache ist Text, kein Link: nichts zu klicken, was einen ohnehin nicht bewegt. */ .topbar__lang { display: flex; align-items: baseline; gap: 0.5rem; font-family: 'Antonio', sans-serif; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); white-space: nowrap; } .topbar__lang [aria-current="true"] { color: var(--accent); } .topbar__lang a { color: var(--ink-quiet); border: 0; } .topbar__lang a:hover, .topbar__lang a:focus-visible { color: var(--ink); } /* Trennpunkt zwischen den beiden Kürzeln */ .topbar__lang span + a::before { content: "·"; padding-right: 0.5rem; color: var(--rule); } /* ---- Kopfzone ---- 88svh, nicht 100: die Linie am unteren Rand bleibt sichtbar und sagt, dass es weitergeht. Ein voller Bildschirm würde jede Substanz unter die Falte schieben. */ .masthead { display: flex; flex-direction: column; justify-content: flex-end; min-height: 88svh; padding: 5rem var(--gutter) 4rem var(--gutter); } /* Die Kopfzone bekommt BEWUSST kein max-width: sie ist der Aufmacher und darf die volle Breite nehmen. Der Sprung zur schmaleren Spalte darunter kam nicht von der Breite, sondern davon, dass die Headline ab 1212px nicht mehr mitwuchs — siehe die Clamp-Regel weiter unten. Wächst die Schrift mit, liest sich die breite Kopfzone als Setzung statt als Fehler. */ /* Die Zusagen als eingerahmte Marken, nicht als Fließtextsatz. */ .promise { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 2.5rem 0 0 0; } .promise li { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); border: 1px solid var(--rule); line-height: 1.2; white-space: nowrap; transition: border-color .16s ease; } .promise a { display: block; padding: 0.5rem 1rem; color: inherit; border: 0; transition: color .16s ease; } .promise li:hover { border-color: var(--ink-quiet); } .promise a:hover, .promise a:focus-visible { color: var(--ink); } /* ---- Zitat: trägt den Aufmacher, nicht der Seitentitel ---- */ .pullquote { padding: 3rem 0 0 0; } .pullquote__line { font-family: 'Anton', sans-serif; font-size: var(--t-quote); line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); } /* Orange bleibt dem Argument vorbehalten — nicht den Links. */ .pullquote__line .em { color: var(--accent); } .pullquote__sub { font-size: 1rem; line-height: 1.5; color: var(--ink-quiet); max-width: 71ch; padding-top: 2.5rem; } /* ---- Register ---- */ .index { display: grid; gap: 1rem 2.5rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--rule); margin-bottom: 3.5rem; } .index__label, .marginal { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-quiet); line-height: 1.6; padding-bottom: 1.5rem; } .index__list { list-style: none; display: grid; grid-template-columns: 1fr; } .index__list li { border-top: 1px solid var(--rule); } .index__list li:last-child { border-bottom: 1px solid var(--rule); } .index__list a { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; gap: 0 1rem; padding: 0.5rem 0; border: 0; color: var(--ink); } .index__list .n { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.14em; color: var(--ink-quiet); font-variant-numeric: tabular-nums; transition: color .16s ease; } .index__list .t { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-sub); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em; text-wrap: nowrap; } .index__list a:hover, .index__list a:focus-visible { color: var(--accent); } .index__list a:hover .n, .index__list a:focus-visible .n { color: var(--accent); } /* Der Anrissblock steht auf sieben Seiten und braucht Luft nach unten, bevor der erste Abschnitt beginnt. 3rem = 42px = 6 × 7 — der Wert sitzt bereits auf dem Raster, es gab ihn nur noch nirgends. */ .intro { padding-bottom: 3rem; } /* ---- Fließtext ---- Das Zeilenmaß steht am Element, nicht als globale Variable: 62 Zeichen Fließtext, 46 der Anriss. */ .body-copy p { max-width: 62ch; padding-bottom: 1rem; } .body-copy p:last-child { padding-bottom: 0; } .body-copy p.quiet, .quiet { color: var(--ink-quiet); } .body-copy__lead { font-size: var(--t-sub); line-height: 1.5; max-width: 46ch; padding-bottom: 1.5rem; } /* ---- Abschnitte ---- */ .section { padding-top: 4rem; scroll-margin-top: 4rem; } .section-head { display: flex; align-items: baseline; gap: 1rem; font-family: 'Anton', sans-serif; font-size: var(--t-head); text-transform: uppercase; letter-spacing: 1px; line-height: 1; padding-bottom: 1.5rem; } .section-head .idx { font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-label); letter-spacing: 0.16em; color: var(--accent); font-variant-numeric: tabular-nums; } /* ---- Abbinder ---- Nach langem Scrollweg kein Flüstern: der Schlusssatz läuft auf Überschriftengröße, der Knopf ist nicht kleiner als ein Gerätename in der Technikliste. */ .outro__line { font-family: 'Anton', sans-serif; font-size: var(--t-head); line-height: 1.12; letter-spacing: 1px; text-transform: uppercase; max-width: 34ch; padding-bottom: 2rem; } .outro__line .em { color: var(--accent); } .outro .cta { display: inline-flex; align-items: baseline; gap: 1rem; font-family: 'Antonio', sans-serif; font-weight: 400; font-size: var(--t-sub); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 1rem 0; border: 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transition: color .16s ease, gap .16s ease; } .outro .cta:hover, .outro .cta:focus-visible { color: var(--accent); gap: 1.5rem; } .outro .cta .arr { color: var(--accent); } /* ---- Fußnote ---- */ .imprint { font-size: var(--t-label); color: var(--ink-quiet); padding-top: 2rem; margin-top: 4rem; border-top: 1px solid var(--rule); } .imprint a { color: var(--ink-quiet); border-bottom-color: var(--rule); } .imprint a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ============================================================ Ab Tablet ============================================================ */ @media (min-width: 760px) { .masthead { padding-top: 5rem; } .section { padding-top: 5rem; } } /* ============================================================ Ab Desktop: Kopfzone zweispaltig — Titel und Zusagen links, das Zitat in der Fläche, die sonst leer stünde. ============================================================ */ @media (min-width: 1000px) { .masthead { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 5rem; align-items: end; padding: 7rem var(--gutter) 5rem var(--gutter); } .masthead__side { padding-bottom: 1rem; } .pullquote { padding-top: 0; } /* Der Anstieg (5.2vw) stimmt, die Decke war zu niedrig: bei 4.5rem war die Headline schon ab 1212px ausgewachsen und stand danach unverändert in einem immer breiteren Fenster. Mit 7rem läuft sie bis 1885px mit — 52px bei 1000, 74 bei 1440, 98 bei 1900. Nicht den Anstieg erhöhen: bei 21vw wäre die Decke ab 467px erreicht und das Clamp eine Konstante. */ .pullquote__line { font-size: clamp(3rem, 5.2vw, 7rem); max-width: 20ch; } /* Steigt die Headline auf 98px, ist 1rem daneben ein Flüstern. 1.5rem hält die Stufe. Wer auf 2rem geht, muss das Zeilenmaß mitziehen: 71ch sind bei 2rem knapp 1000px Zeilenlänge. */ .pullquote__sub { font-size: var(--t-sub); line-height: 1.4; max-width: 52ch; } } /* ============================================================ Große Schirme ============================================================ */ @media (min-width: 1200px) { .masthead { padding: 8rem var(--gutter) 6rem var(--gutter); } /* 12,25px mit 0.16em Sperrung sind auf einem 1900er Schirm nicht mehr zu lesen. Die Leiste bleibt schmal, die Schrift wächst mit. */ .topbar__mark, .topbar nav a, .topbar__lang { font-size: var(--t-small); } .topbar nav { gap: 2rem; } .index__list { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } .outro__line { font-size: clamp(2rem, 3.4vw, 2.75rem); } .section { padding-top: 6rem; } }