/* ========================================================================== Walter Kunze Schrott- und Metallhandel — Stylesheet Richtung: Waage und Werkstoff. Heller Zinkgrund, tiefes Anthrazit, Kupfer als einziger Akzent — die Farbe des Materials, mit dem gehandelt wird. Schwere Grotesk für Zahlen und Überschriften, Mono für Mengen und Maße. ========================================================================== */ @font-face { font-family: 'Chivo'; src: url('schrift/chivo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Chivo'; src: url('schrift/chivo-900.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'Asap'; src: url('schrift/asap-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Asap'; src: url('schrift/asap-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Asap'; src: url('schrift/asap-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Chivo Mono'; src: url('schrift/chivo-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Chivo Mono'; src: url('schrift/chivo-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } :root { --zink: #E3E5E4; /* Grund */ --zink-hell: #F4F5F4; --anthrazit: #191C1E; --anthra-mit:#4B5257; --kupfer: #C9884A; /* Akzent auf dunkel — 5,6:1 auf #1B1F21 */ --kupfer-tief:#7A4212; /* Akzentschrift auf hell */ --dunkel: #1B1F21; --linie: #BEC2C1; --linie-dkl: #343A3D; --display: 'Chivo', system-ui, sans-serif; --text: 'Asap', system-ui, sans-serif; --mono: 'Chivo Mono', ui-monospace, monospace; --rand: clamp(20px, 5vw, 56px); --breite: 1200px; --luft: clamp(56px, 8vw, 108px); /* Eine einzige Hervorhebungsfarbe. Sie kippt mit dem Untergrund, nicht mit dem Baustein — dadurch liegen alle betonten Worte, Zahlen und Etiketten auf derselben Ebene statt jede Sektion ihre eigene Mischung zu fahren. */ --hebung: var(--kupfer-tief); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--zink); color: var(--anthrazit); font-family: var(--text); font-size: 1.0625rem; line-height: 1.65; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--kupfer-tief); outline-offset: 3px; } .dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--kupfer); } [id] { scroll-margin-top: 86px; } .springlink { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--anthrazit); color: var(--zink); padding: 10px 18px; text-decoration: none; font-family: var(--mono); font-size: .8125rem; transition: top .16s; } .springlink:focus { top: 12px; } /* --- Typografie ----------------------------------------------------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 7.5vw, 5rem); } h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); } h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } /* Umbrüche. Überschriften auf gleich lange Zeilen ziehen, Absätze ohne einzelnes Schlusswort setzen. Deutsche Komposita (Metallhandelsgesellschaft, Haushaltsauflösung) trennen — sonst sprengen sie auf 320px die Zeile; die Trennung greift nur, weil gesetzt ist. Überschriften, Marke und Kennzahlen bleiben ungetrennt, dort wäre ein Trennstrich ein Fehler. */ p, li, dd, figcaption { text-wrap: pretty; } p, li, dd, figcaption, .prosa, .vorspann { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; } h1, h2, h3, .bar__marke, .fuss__marke, .grossruf, .zahl b, .daten dd, .waehler__wert, .mass, .held__kicker { hyphens: manual; -webkit-hyphens: manual; } :is(h1, h2, h3, p, li, dd) { overflow-wrap: break-word; } .prosa { max-width: 66ch; } .vorspann { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; max-width: 54ch; } .leise { color: var(--anthra-mit); } .dunkel .leise, .fuss .leise { color: #9BA3A8; } /* ========================================================================== Hervorhebung — eine Ebene Vier Stufen, mehr gibt es nicht. Jede Stufe hat genau eine Ausprägung; welcher Baustein sie trägt, ändert nichts an Farbe, Schnitt oder Schrift. 1 Rubrik Mono 500 · .8125rem · +.08em · VERSAL · Akzent 2 Datenwert Mono 500 · Akzent · Ziffern auf gleicher Breite 3 Betonung Textschrift 600 · Akzent (im Fließtext, kein Schriftwechsel) 4 Kennzahl Display · groß · Anthrazit (die Größe trägt, nicht die Farbe) ========================================================================== */ .dunkel, .fuss { --hebung: var(--kupfer); } /* Helle Kästen können im dunklen Abschnitt stehen und erben sonst den hellen Akzent — auf Zink wären das 2,4:1. */ .waehler, .karte__hinweis, .leistungen li { --hebung: var(--kupfer-tief); } /* 1 Rubrik */ .mass, .held__kicker, .fuss__titel, .daten dt { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; hyphens: manual; } .mass, .held__kicker { color: var(--hebung); } /* 2 Datenwert */ .strahl b, .schritte .nr, .waehler__info b, .waehler__wert, .daten dd b, .karte__hinweis p b { font-family: var(--mono); font-weight: 500; color: var(--hebung); font-variant-numeric: tabular-nums; letter-spacing: 0; } .waehler__wert { color: var(--anthrazit); } /* Ablesewert des Reglers: Größe trägt */ /* 3 Betonung im Fließtext */ .prosa b, .vorspann b, .annahme p b, .leistungen p b, .bilder figcaption b, .waehler__hinweis b { font-weight: 600; color: var(--hebung); } /* --- Aufbau ---------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .band { padding-block: var(--luft); } .band--schmal { padding-block: clamp(40px, 5.5vw, 72px); } .hell { background: var(--zink-hell); } .dunkel { background: var(--dunkel); color: var(--zink); } /* --- Kopfzeile ------------------------------------------------------------- */ .bar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--zink) 97%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); } .bar__reihe { display: flex; align-items: center; gap: 14px; min-height: 62px; } .bar__marke { display: flex; align-items: baseline; gap: 8px; margin-right: auto; text-decoration: none; white-space: nowrap; padding: 9px 0; font-family: var(--display); font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; } .bar__marke b { color: var(--kupfer-tief); font-weight: 900; } .bar__marke span { font-family: var(--mono); font-weight: 400; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--anthra-mit); } .bar__menue { display: none; gap: 20px; } .bar__menue a { text-decoration: none; font-size: .9375rem; padding: 4px 0; border-bottom: 2px solid transparent; } .bar__menue a:hover { border-bottom-color: var(--kupfer-tief); } .bar__tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-family: var(--mono); font-size: .875rem; font-weight: 500; background: var(--anthrazit); color: var(--zink); padding: 10px 16px; min-height: 44px; } .bar__tel:hover { background: var(--kupfer-tief); } .bar__tel-nr { display: none; } .bar__knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--anthra-mit); color: inherit; } .bar__knopf svg { width: 20px; height: 20px; } .bar__klapp { display: none; border-top: 1px solid var(--linie); padding: 14px 0 18px; } .bar__klapp.ist-offen { display: block; } .bar__klapp a { display: block; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; } .bar__klapp a:last-child { border-bottom: 0; } @media (max-width: 449px) { .bar__marke span { display: none; } .bar__reihe { gap: 8px; } } /* Sehr schmale Geräte: Rufknopf nur als Icon — sonst drängt er den Hamburger aus der Zeile. Der Überlauf wäre durch overflow-x unsichtbar, das Menü aber unerreichbar. */ @media (max-width: 429px) { .bar__reihe { gap: 8px; } .bar__tel { padding: 10px 12px; } .bar__tel-wort { display: none; } .bar__marke { font-size: 1.05rem; } } @media (min-width: 1040px) { .bar__menue { display: flex; } .bar__knopf { display: none; } .bar__klapp { display: none !important; } .bar__tel-wort { display: none; } .bar__tel-nr { display: inline; } } /* --- Held ------------------------------------------------------------------ */ .held { padding-block: clamp(44px, 7vw, 88px) clamp(32px, 4vw, 52px); } .held__kicker { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 20px; } .held h1 { margin-bottom: .35em; max-width: 15ch; } .held__aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 26px; max-width: 100%; background: var(--anthrazit); color: var(--zink); border: 1px solid var(--anthrazit); text-decoration: none; font-weight: 600; font-size: 1rem; transition: background .16s, color .16s, border-color .16s; } .knopf:hover { background: var(--kupfer-tief); border-color: var(--kupfer-tief); } .knopf--klar { background: transparent; color: var(--anthrazit); } .knopf--klar:hover { background: var(--anthrazit); color: var(--zink); } .dunkel .knopf { background: var(--kupfer); border-color: var(--kupfer); color: var(--anthrazit); } .dunkel .knopf:hover { background: var(--zink); border-color: var(--zink); } .dunkel .knopf--klar { background: transparent; color: var(--zink); border-color: #596166; } .dunkel .knopf--klar:hover { background: var(--zink); color: var(--anthrazit); } /* Zahlenband */ .zahlen { display: flex; flex-wrap: wrap; gap: 10px 44px; margin-top: clamp(32px, 5vw, 52px); padding-top: 20px; border-top: 3px solid var(--anthrazit); } .zahl { min-width: 130px; } .zahl b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; } .zahl span { font-size: .8125rem; color: var(--anthra-mit); } /* --- Signatur: der Container-Wähler ---------------------------------------- */ .waehler { border: 3px solid var(--anthrazit); background: var(--zink-hell); padding: clamp(18px, 3vw, 28px); } .waehler__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; } .waehler__kopf h2 { margin: 0; } .waehler__buehne { position: relative; height: clamp(160px, 24vw, 230px); border-bottom: 3px solid var(--anthrazit); margin-bottom: 6px; } .waehler__buehne svg { width: 100%; height: 100%; display: block; overflow: visible; } .cnt-box { fill: #2D6E9E; stroke: var(--anthrazit); stroke-width: 3; } .cnt-rippe { stroke: #1F4F73; stroke-width: 2; } .cnt-mensch { fill: var(--anthra-mit); } .cnt-auto { fill: none; stroke: var(--anthra-mit); stroke-width: 2.5; } .cnt-mass { font-family: 'Chivo Mono', monospace; font-size: 13px; fill: var(--anthrazit); font-weight: 500; } .waehler__regler { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; } .waehler__regler input[type=range] { flex: 1; min-width: 0; height: 44px; accent-color: var(--kupfer-tief); } .waehler__wert { font-size: 1.4rem; min-width: 96px; text-align: right; white-space: nowrap; } .waehler__info { display: grid; gap: 4px 18px; margin-top: 10px; grid-template-columns: 1fr; font-size: .9375rem; } @media (min-width: 620px) { .waehler__info { grid-template-columns: 1fr 1fr; } } .waehler__hinweis { font-size: .875rem; color: var(--anthra-mit); margin-top: 14px; max-width: 62ch; } /* --- Leistungen ------------------------------------------------------------- */ .leistungen { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; background: var(--anthrazit); border: 3px solid var(--anthrazit); grid-template-columns: 1fr; } @media (min-width: 680px) { .leistungen { grid-template-columns: 1fr 1fr; } } .leistungen li { background: var(--zink-hell); padding: 22px; min-width: 0; } .leistungen .mass { display: block; margin-bottom: 10px; } .leistungen h3 { margin-bottom: .4em; } .leistungen p { font-size: .9375rem; color: var(--anthra-mit); margin: 0; } /* --- Annahmeliste ----------------------------------------------------------- */ .annahme { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { .annahme { grid-template-columns: repeat(3, 1fr); } } .annahme li { border-left: 4px solid var(--kupfer); padding-left: 16px; min-width: 0; } .annahme h3 { margin-bottom: .35em; } .annahme p { font-size: .9375rem; color: var(--anthra-mit); margin: 0; } .dunkel .annahme p { color: #9BA3A8; } /* --- Bilder ----------------------------------------------------------------- */ .bilder { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .bilder { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .bilder { grid-template-columns: repeat(3, 1fr); } } .bilder figure { margin: 0; min-width: 0; } .bilder .rahmen { aspect-ratio: 21/9; overflow: hidden; background: var(--linie); border: 1px solid var(--linie); } .bilder img { width: 100%; height: 100%; object-fit: cover; } .bilder figcaption { margin-top: 8px; font-size: .875rem; color: var(--anthra-mit); } .dunkel .bilder figcaption { color: #9BA3A8; } /* --- Zeitstrahl -------------------------------------------------------------- */ .strahl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; } .strahl li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--linie-dkl); align-items: baseline; } .strahl li:last-child { border-bottom: 1px solid var(--linie-dkl); } .strahl p { margin: 0; font-size: .9375rem; color: #9BA3A8; max-width: 64ch; } /* --- Ablauf ------------------------------------------------------------------ */ .schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .schritte li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--linie); align-items: baseline; } .schritte li:last-child { border-bottom: 1px solid var(--linie); } .schritte h3 { margin: 0; } .schritte p { grid-column: 2; margin: 5px 0 0; font-size: .9375rem; color: var(--anthra-mit); max-width: 58ch; } /* --- Daten -------------------------------------------------------------------- */ .daten { margin: 0; } .daten > div { display: grid; grid-template-columns: minmax(110px,150px) minmax(0,1fr); gap: 4px 18px; padding: 13px 0; border-top: 1px solid var(--linie); align-items: baseline; } .daten > div:last-child { border-bottom: 1px solid var(--linie); } .daten dt { color: var(--anthra-mit); } .daten dd { margin: 0; overflow-wrap: anywhere; } .daten dd a { display: inline-block; padding: 4px 0; } .dunkel .daten > div { border-color: var(--linie-dkl); } .dunkel .daten dt { color: #9BA3A8; } .grossruf { display: inline-block; text-decoration: none; padding: 7px 0; font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.05; overflow-wrap: anywhere; } .grossruf:hover { color: var(--kupfer-tief); } .dunkel .grossruf:hover { color: var(--kupfer); } /* --- Zwei Spalten: beide beginnen auf einer Höhe --------------------------- align-items:start setzt nur die Kästen bündig. Die erste Textzeile rutschte trotzdem ab, weil rechts eine Liste steht, deren erste Zeile ein eigenes Polster und eine Trennlinie mitbringt (bis 26px Versatz). Beides fällt für das erste Element einer Spalte weg — dann startet rechter Text auf der Grundlinie der Rubrik links. */ .paar { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; } @media (min-width: 900px) { .paar { grid-template-columns: minmax(0,5fr) minmax(0,7fr); } } .paar > * > :first-child { margin-block-start: 0; } .paar > :is(.strahl, .schritte, .liste, .daten), .paar > * > :is(.strahl, .schritte, .liste, .daten):first-child { margin-block-start: 0; } .paar > :is(.strahl, .schritte, .liste, .daten) > :first-child, .paar > * > :is(.strahl, .schritte, .liste, .daten):first-child > :first-child { padding-top: 0; border-top: 0; } /* --- Karte --------------------------------------------------------------------- */ .karte { border: 3px solid var(--anthrazit); background: var(--zink-hell); aspect-ratio: 4/3; display: grid; overflow: hidden; } .karte iframe { width: 100%; height: 100%; border: 0; display: block; } .karte__hinweis { align-self: center; padding: clamp(20px, 4vw, 32px); } .karte__hinweis p { margin: 0 0 12px; max-width: 42ch; font-size: .9375rem; } .karte__hinweis p:last-child { margin-bottom: 0; } /* Der Route-Link im Kartenkasten ist Fließtext — ohne eigenes Polster ist er nur 17px hoch und damit unter der Antippgröße (WCAG 2.5.8: 24px). */ .karte__hinweis a { display: inline-block; padding: 5px 0; } /* --- Fußzeile -------------------------------------------------------------------- */ .fuss { background: var(--dunkel); color: var(--zink); padding-block: clamp(40px,6vw,68px) 26px; } .fuss__raster { display: grid; gap: 30px; } @media (min-width: 780px) { .fuss__raster { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } } .fuss__marke { font-family: var(--display); font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 10px; } .fuss__marke b { color: var(--kupfer); } .fuss__titel { color: #9BA3A8; margin: 0 0 12px; } .fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .9375rem; } .fuss__liste a { text-decoration: none; display: inline-block; padding: 6px 0; } .fuss__liste a:hover { text-decoration: underline; text-underline-offset: 3px; } .fuss__unten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linie-dkl); font-size: .8125rem; color: #9BA3A8; } .fuss__unten a { color: #9BA3A8; display: inline-block; padding: 6px 0; } /* Startzustände setzt NUR JS (Editor-Sicherheit) */