/* ========================================================================== Barther Heiztechnik und Anlagenbau — Stylesheet Richtung: Boddenküste und Kupferrohr. Tiefes Ostsee-Petrol als Grund, Kupfer als einziger Akzent — das Material, das im Haus verlegt wird. Geometrische Grotesk, Mono für Leistungsdaten. ========================================================================== */ @font-face { font-family: 'Outfit'; src: url('schrift/outfit-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('schrift/outfit-800.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('schrift/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('schrift/figtree-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('schrift/figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Spline Sans Mono'; src: url('schrift/spline-sans-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Spline Sans Mono'; src: url('schrift/spline-sans-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } :root { --bodden: #0F2A33; /* Grund: tiefes Petrol */ --bodden-hell:#16323C; /* Karten auf dunkel */ --salz: #EEF1F1; /* helle Flächen / Schrift auf dunkel */ --salz-mit: #9FB2B8; /* Sekundär auf dunkel */ --tinte: #10262E; --tinte-mit: #4C6169; /* Sekundär auf hell */ --kupfer: #D08A50; /* Akzent auf dunkel */ --kupfer-tief:#8A4E19; /* Akzentschrift auf hell */ --linie: #24444F; --linie-hell: #CBD5D6; --display: 'Outfit', system-ui, sans-serif; --text: 'Figtree', system-ui, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, monospace; --rand: clamp(20px, 5vw, 56px); --breite: 1160px; --luft: clamp(56px, 8vw, 104px); /* 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); } *, *::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(--bodden); color: var(--salz); font-family: var(--text); font-size: 1.0625rem; line-height: 1.66; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--kupfer); outline-offset: 3px; } .hell :focus-visible { outline-color: var(--kupfer-tief); } [id] { scroll-margin-top: 86px; } .springlink { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--kupfer); color: var(--tinte); 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: 800; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 6.8vw, 4.6rem); } h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); } h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; } 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 (Badausstellung, Anlagenbau) 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, .mass, .held__kicker { hyphens: manual; -webkit-hyphens: manual; } :is(h1, h2, h3, p, li, dd) { overflow-wrap: break-word; } .prosa { max-width: 64ch; } .vorspann { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; max-width: 52ch; } .leise { color: var(--salz-mit); } .hell .leise, .fuss .leise { color: var(--tinte-mit); } .fuss .leise { color: var(--salz-mit); } /* ========================================================================== 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ß · Tinte (die Größe trägt, nicht die Farbe) ========================================================================== */ .hell { --hebung: var(--kupfer-tief); } /* Weiße Kästen liegen im dunklen Abschnitt und erben sonst den hellen Akzent */ .leistungen li, .karte__hinweis, .foto figcaption { --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, .waerme__info b, .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; } /* 3 Betonung im Fließtext */ .prosa b, .vorspann b, .notdienst b, .leistungen p b, .foto figcaption 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(--salz); color: var(--tinte); } /* --- Kopfzeile ------------------------------------------------------------- */ .bar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bodden) 96%, 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: 800; font-size: 1.18rem; letter-spacing: -.02em; } .bar__marke b { color: var(--kupfer); font-weight: 800; } .bar__marke span { font-family: var(--mono); font-weight: 400; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--salz-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); } .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(--kupfer); color: var(--tinte); padding: 10px 16px; min-height: 44px; border-radius: 4px; } .bar__tel:hover { background: var(--salz); } .bar__tel-nr { display: none; } .bar__knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 4px; background: transparent; border: 1px solid var(--salz-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: 459px) { .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, 84px) 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: 14ch; } .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 24px; max-width: 100%; border-radius: 4px; background: var(--kupfer); color: var(--tinte); border: 1px solid var(--kupfer); text-decoration: none; font-weight: 600; font-size: 1rem; transition: background .16s, color .16s, border-color .16s; } .knopf:hover { background: var(--salz); border-color: var(--salz); } .knopf--klar { background: transparent; color: var(--salz); border-color: #3B5C67; } .knopf--klar:hover { background: var(--salz); color: var(--tinte); border-color: var(--salz); } .hell .knopf { background: var(--tinte); color: var(--salz); border-color: var(--tinte); } .hell .knopf:hover { background: var(--kupfer-tief); border-color: var(--kupfer-tief); } .hell .knopf--klar { background: transparent; color: var(--tinte); border-color: var(--tinte); } .hell .knopf--klar:hover { background: var(--tinte); color: var(--salz); } .zahlen { display: flex; flex-wrap: wrap; gap: 10px 44px; margin-top: clamp(32px,5vw,52px); padding-top: 20px; border-top: 2px solid var(--kupfer); } .zahl { min-width: 128px; } .zahl b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; } .zahl span { font-size: .8125rem; color: var(--salz-mit); } /* --- Signatur: der Wärmeweg ------------------------------------------------ */ .waerme { border: 1px solid var(--linie); border-radius: 10px; background: var(--bodden-hell); padding: clamp(18px, 3vw, 28px); } .waerme__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; } .waerme__kopf h2 { margin: 0; } .waerme__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .waerme__tab { font-family: var(--text); font-size: .9375rem; font-weight: 600; padding: 11px 16px; min-height: 44px; cursor: pointer; border-radius: 4px; background: transparent; color: var(--salz-mit); border: 1px solid var(--linie); } .waerme__tab:hover { border-color: var(--salz-mit); color: var(--salz); } .waerme__tab.ist-an { background: var(--kupfer); color: var(--tinte); border-color: var(--kupfer); } .waerme__haus { width: 100%; height: auto; display: block; } .hs-wand { fill: none; stroke: var(--salz-mit); stroke-width: 2.5; } .hs-innen { fill: #12303A; } .hs-raum { fill: none; stroke: #2C505C; stroke-width: 1.5; } .hs-rohr { fill: none; stroke: #2C505C; stroke-width: 5; stroke-linecap: round; } .hs-fluss { fill: none; stroke: var(--kupfer); stroke-width: 5; stroke-linecap: round; } .hs-quelle { fill: var(--bodden); stroke: var(--kupfer); stroke-width: 2.5; } .hs-heiz { fill: #2C505C; } .hs-text { font-family: 'Spline Sans Mono', monospace; font-size: 12px; fill: var(--salz-mit); } .hs-titel { font-family: 'Spline Sans Mono', monospace; font-size: 13px; font-weight: 500; fill: var(--kupfer); } .waerme__info { margin-top: 14px; font-size: .9375rem; color: var(--salz-mit); max-width: 66ch; } /* --- Leistungen -------------------------------------------------------------- */ .leistungen { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .leistungen { grid-template-columns: 1fr 1fr; } } .leistungen li { border: 1px solid var(--linie-hell); border-radius: 10px; background: #FFFFFF; padding: 20px; min-width: 0; } .leistungen .mass { display: block; margin-bottom: 8px; } .leistungen h3 { margin-bottom: .4em; } .leistungen p { font-size: .9375rem; color: var(--tinte-mit); margin: 0; } .liste { display: grid; gap: 2px; margin: 26px 0 0; padding: 0; list-style: none; } .liste li { display: grid; grid-template-columns: minmax(140px, 210px) minmax(0, 1fr); gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--linie-hell); align-items: baseline; } .liste li:last-child { border-bottom: 1px solid var(--linie-hell); } .liste h3 { margin: 0; font-size: 1.1rem; } .liste p { margin: 0; font-size: .9375rem; color: var(--tinte-mit); max-width: 62ch; } /* --- Zeitstrahl / Ablauf ------------------------------------------------------ */ .strahl { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 2px; } .strahl li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 16px; padding: 15px 0; border-top: 1px solid var(--linie); align-items: baseline; } .strahl li:last-child { border-bottom: 1px solid var(--linie); } .strahl p { margin: 0; font-size: .9375rem; color: var(--salz-mit); max-width: 62ch; } .schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .schritte li { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--linie-hell); align-items: baseline; } .schritte li:last-child { border-bottom: 1px solid var(--linie-hell); } .schritte h3 { margin: 0; } .schritte p { grid-column: 2; margin: 5px 0 0; font-size: .9375rem; color: var(--tinte-mit); max-width: 58ch; } /* --- Notdienst ---------------------------------------------------------------- */ .notdienst { border: 2px solid var(--kupfer); border-radius: 10px; padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; } .notdienst p { margin: 0; max-width: 52ch; } /* --- 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(--salz-mit); } .daten dd { margin: 0; overflow-wrap: anywhere; } .daten dd a { display: inline-block; padding: 4px 0; } .hell .daten > div { border-color: var(--linie-hell); } .hell .daten dt { color: var(--tinte-mit); } .grossruf { display: inline-block; text-decoration: none; padding: 7px 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.05; overflow-wrap: anywhere; } .grossruf:hover { color: var(--kupfer); } .hell .grossruf:hover { color: var(--kupfer-tief); } /* --- 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; } .foto { border-radius: 10px; overflow: hidden; border: 1px solid var(--linie-hell); } .foto img { width: 100%; height: auto; } .foto figcaption { padding: 10px 14px; font-size: .875rem; color: var(--tinte-mit); background: #FFFFFF; } /* --- Karte ---------------------------------------------------------------------- */ .karte { border: 1px solid var(--linie-hell); border-radius: 10px; background: #FFF; aspect-ratio: 4/3; display: grid; overflow: hidden; } .karte iframe { width: 100%; height: 100%; border: 0; display: block; } /* Der Kasten ist weiß, der Abschnitt ringsum dunkel — ohne eigene Textfarbe erbt er die helle Schrift und wird unlesbar (1,1:1). Gleiche Fehlerklasse wie eine helle Fußzeilenschrift auf dunklem Grund. */ .karte__hinweis { align-self: center; padding: clamp(20px,4vw,32px); color: var(--tinte); } .karte__hinweis .leise { color: var(--tinte-mit); } .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(--bodden-hell); color: var(--salz); border-top: 1px solid var(--linie); 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: 800; font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 10px; } .fuss__marke b { color: var(--kupfer); } .fuss__titel { color: var(--salz-mit); 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); font-size: .8125rem; color: var(--salz-mit); } .fuss__unten a { color: var(--salz-mit); display: inline-block; padding: 6px 0; } /* Startzustände setzt NUR JS (Editor-Sicherheit) */