/* ══════════════════════════════════════════════════════════════════════════ LITVASS — Stylesheet Gebaut aus "litvass/Litvass demo.pen" (Export vom 15.09.2026). Kein JavaScript. Keine Fremdanfragen. Schriften liegen lokal. Die Zahlen stammen aus dem Entwurf bei 1440 px Breite; der Entwurf kennt keine schmale Fassung, die stammt von hier (§ "Schmal"). ══════════════════════════════════════════════════════════════════════════ */ /* ── Schriften ─────────────────────────────────────────────────────────── */ @font-face{ font-family:"Geist"; src:url("fonts/Geist-Variable.woff2") format("woff2-variations"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Geist Mono"; src:url("fonts/GeistMono-Variable.woff2") format("woff2-variations"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Newsreader"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/Newsreader-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Newsreader"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/Newsreader-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Newsreader"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/Newsreader-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Newsreader"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/Newsreader-500-latin-ext.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Mikro-Beschriftungen (Augenbraue, Brotkrume, Feldnamen, Schluessel, Fusszeilen-Ueberschriften) standen im Entwurf auf 10 px. Das liegt unter der Grenze von 11 px, ab der funktionstragender Text als unleserlich gilt — Verweise, Knoepfe, Beschriftungen, Navigation. Alle acht stehen jetzt auf 12 px, der Stufe, die .weiter-titel, .stand und .klapp-gruppe im selben Stylesheet ohnehin benutzen. Abweichung vom Entwurf, bewusst. */ /* ── Marken ──────────────────────────────────────────────────────────────── Zwei Grautöne weichen minimal vom Entwurf ab. #6E7379 erreicht auf dem Papierton nur 4,39:1 und #7C776E nur 4,08:1; DESIGN.md schreibt 4,5:1 für Text fest. Zwei bzw. sieben Stufen dunkler genügen (4,52:1 / 4,51:1). ──────────────────────────────────────────────────────────────────────── */ :root{ --tinte:#0F1317; --papier:#F7F5F0; --weiss:#FFFFFF; --gelb:#F2C200; --gelb-hell:#FFD84A; --text:#0F1317; --text-zweit:#6C7177; /* Entwurf #6E7379 — 4,52:1 auf Papier */ --text-mono:#757067; /* Entwurf #7C776E — 4,51:1 auf Papier */ --text-hell:#F4F1EB; --text-hell-zweit:#A8A39A; /* 7,43:1 auf Tinte */ --auf-gelb:#4A3D06; /* 6,37:1 auf Gelb */ --matt:#C9C3B8; /* nur dekorativ, nie sinntragend */ --linie:#E0DACE; --linie-feld:#948E82; /* 3,26:1 auf Weiß — Pflicht für Eingabefelder */ --linie-dunkel:#2B3238; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; /* Seitenrand — und zugleich die Deckelung der Inhaltsbreite. Der erste Term ist der bisherige Rand. Der zweite haelt den Inhalt bei 1296 px an: genau die Breite, die er heute bei 1440 px hat. Beide Terme treffen sich bei exakt 1440 px, darunter gewinnt der erste — unterhalb von 1440 aendert sich also nichts. Darueber waechst der Rand statt des Inhalts; die farbigen Flaechen laufen weiter bis zum Bildschirmrand, weil die Deckelung im Polster sitzt und nicht in einer Huelle. Ohne das lief alles auseinander: bei 2560 px war der Abstand zwischen den Paar-Spalten 1264 px, .held-links 1891 px, die Fusszeile 2305 px. */ --rand:max(clamp(1.25rem,5vw,120px), (100vw - 1296px) / 2); /* Abstaende zwischen Spalten, die beim Stapeln zu Abstaenden zwischen Bloecken werden. Die vw-Gerade ist so gelegt, dass sie am Umbruchpunkt (1000 px) genau den gestapelten Wert trifft — dadurch ist der Verlauf stetig und es gibt keinen Sprung. Darunter haelt das Minimum. */ --luft-kontakt:clamp(40px, 11.364vw - 73.6px, 90px); /* 40 @1000 · 90 @1440 */ --luft-paar:clamp(32px, 15.454vw - 122.5px, 100px); /* 32 @1000 · 100 @1440 */ --luft-leistungen:clamp(48px, 3.636vw + 11.6px, 64px); /* 48 @1000 · 64 @1440 */ --luft-kopf:clamp(32px, 10.909vw - 77px, 80px); /* 32 @1000 · 80 @1440 */ --luft-band:clamp(24px, 3.636vw - 12.4px, 40px); /* 24 @1000 · 40 @1440 */ --luft-held:clamp(32px, 3.077vw - 4.3px, 40px); /* 32 @1180 · 40 @1440 */ --luft-fuss:clamp(36px, 8.148vw - 37.8px, 80px); /* 36 @1000 · 80 @1440 */ --block:clamp(3.5rem,7vw,104px); --spalte:320px; } /* ── Grundlage ─────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} /* Sprungziele auf derselben Seite werden angefahren, nicht angesprungen: "Erstgespräch" auf #kontakt, der Sprunglink auf #inhalt. Rein in CSS, ohne Skript -- die Seite sagt schriftlich zu, keines auszufuehren. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--weiss); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} :focus-visible{ outline:2px solid var(--tinte); outline-offset:3px; border-radius:1px; box-shadow:0 0 0 5px rgb(242 194 0 / .55); } /* Was der Browser stellt, gehört auch zur Gestaltung. */ ::selection{background:var(--gelb);color:var(--tinte)} html{scrollbar-color:var(--tinte) #ECEAE4} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:#ECEAE4} ::-webkit-scrollbar-thumb{background:var(--tinte)} a{text-underline-offset:.18em} .dunkel :focus-visible,.fuss :focus-visible{outline-color:var(--gelb-hell)} /* Sprungmarke — erste fokussierbare Stelle jeder Seite. */ .sprung{ position:absolute; left:var(--rand); top:-4rem; z-index:300; display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; background:var(--tinte); color:var(--text-hell); font-size:.875rem; text-decoration:none; transition:top .12s; } .sprung:focus{top:.5rem} /* ── Textbausteine ─────────────────────────────────────────────────────── */ .serif{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.08} .mono{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul{padding:0;list-style:none} .zwischen{color:var(--text-zweit)} /* Augenbraue über jedem Abschnittstitel. Trägt dieselbe Geste wie die betonten Wörter in den Überschriften: gelber Balken unter dem Wort, kein Feld dahinter. Der Balken ist hier mit 3 px absolut gesetzt statt in em — .15em wären bei 10 px Schrift anderthalb Pixel und verschwänden. */ .braue{ position:relative; display:inline-block; align-self:flex-start; width:fit-content; padding:0 0 7px; background:none; color:var(--text); font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; line-height:1; } .braue::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gelb); } .dunkel .braue,.vertrauen .braue{color:var(--text-hell)} .dunkel .braue::after,.vertrauen .braue::after{background:var(--gelb-hell)} /* Gelbe Unterstreichung unter einem Wort, nicht dahinter — so im Entwurf. Der Entwurf setzt den Balken kuerzer als das Wort (95 %, im Kopf sogar 70 %); hier laeuft er genau bis zur Wortkante. Hoehe .15em, dort gemessen. */ .betont{display:inline-block;width:fit-content} .betont>span{display:block} .betont::after{ content:""; display:block; width:100%; height:.15em; min-height:5px; background:var(--gelb); } /* "Leistungen für jeden" — durchgestrichen, rein dekorativ (aria-hidden). */ .gestrichen{color:var(--matt);position:relative;white-space:nowrap} .gestrichen::after{ content:""; position:absolute; left:-3px; right:-3px; top:.538em; height:.096em; min-height:4px; background:var(--tinte); } /* ── Schaltflächen ─────────────────────────────────────────────────────── */ .knopf{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:17px 26px; border-radius:2px; border:1px solid transparent; font-family:var(--sans); font-size:15px; font-weight:500; line-height:1; text-decoration:none; cursor:pointer; } .knopf svg{flex:none;width:14px;height:14px} .knopf--voll[href^="#kontakt"] svg,.knopf--voll[type=submit] svg{width:16px;height:16px} .knopf--voll{background:var(--tinte);color:var(--text-hell)} .knopf--voll:hover{background:#1B2229} .knopf--rand{background:transparent;color:var(--tinte);border-color:var(--linie);padding:16px 25px} .knopf--rand:hover{border-color:var(--tinte)} .knopf--klein{padding:12px 20px;font-size:13px;gap:8px} /* ── Kopf ──────────────────────────────────────────────────────────────── */ .kopf{ display:flex; align-items:center; gap:1.5rem; padding:24px var(--rand); background:var(--papier); border-bottom:1px solid var(--linie); } .marke{flex:1 1 0;display:flex;align-items:center;min-width:0} .marke img{width:152px;height:44px;object-fit:contain} .kopf-nav{display:flex;align-items:center;gap:34px;white-space:nowrap} .kopf-nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--text-zweit); text-decoration:none; border-bottom:2px solid transparent; } .kopf-nav a:hover{color:var(--text)} .kopf-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--gelb)} .kopf-tat{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:20px} /* Schalter nur schmal sichtbar — siehe § Schmal. .kopf-zu braucht .kopf-nav vor sich: als blosse Klasse (0,1,0) verlor es gegen .kopf-nav a (0,1,1) und blieb breit eingeblendet — 0 px breit, 44 px hoch, unsichtbar, aber in der Tabulatorreihenfolge gleich nach dem Logo. .kopf-schalter liegt ausserhalb von .kopf-nav und ist davon nicht betroffen; .kopf-nav .knopf ist mit (0,2,0) ohnehin staerker. */ .kopf-schalter,.kopf-nav .kopf-zu,.kopf-nav .knopf{display:none} /* ── Klappfeld im Kopf ───────────────────────────────────────────────────── Geoeffnet ueber :target, geschlossen ueber eine unsichtbare Fangflaeche. Kein Skript — PRODUCT.md und die Datenschutzerklaerung sagen schriftlich zu, dass diese Seite keines ausfuehrt; ein Skript waere hier also nicht eine Geschmacksfrage, sondern ein Widerspruch zu einer veroeffentlichten Rechtsaussage. Das Muster ist dasselbe wie beim Kontakt-Ausklapper des alten Baus (DESIGN.md, "The Invisible-Catcher Rule"). Zwei Auslöser, von denen immer nur einer sichtbar ist: der eine zeigt auf das Feld, der andere zurueck auf #oben. So schliesst ein zweiter Klick auf denselben Punkt das Feld wieder, und das jeweils sichtbare Element traegt ein zutreffendes aria-expanded, ohne dass etwas es umschreiben muesste. ──────────────────────────────────────────────────────────────────────── */ /* Alle Regeln hier tragen .kopf-nav vor sich her. Der Grund ist nicht Geschmack: .kopf-nav a ist (0,1,1) und schlaegt jede Klassenregel (0,1,0). Solange der Auslöser ein war, traf .kopf-nav a ihn nicht — als Verweis trifft sie ihn, und display:none, Farbe und Unterstreichung gingen still verloren. Derselbe Fehler ist in diesem Stylesheet schon zweimal aufgetreten (.leistungen-kopf, .kopf-zu). */ .klapp{position:relative} .kopf-nav .klapp-schalter{ display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:14px; color:var(--text-zweit); text-decoration:none; border-bottom:2px solid transparent; } .kopf-nav .klapp-schalter:hover{color:var(--text)} .kopf-nav .klapp-schalter svg{width:15px;height:15px;transition:transform .16s} .kopf-nav .klapp-schalter--hier{color:var(--text);border-bottom-color:var(--gelb)} /* Das Kaestchen traegt den Zustand und bleibt dabei stehen. Es ist unsichtbar, aber anspringbar; den Fokus zeigt seine Beschriftung. Fruehere Fassung waren zwei Verweise, von denen CSS immer nur einen zeigte — beim Umschalten verschwand der gerade fokussierte und der Fokus fiel auf den Seitenanfang. */ .klapp-box{position:absolute;width:1px;height:1px;margin:0;opacity:0; pointer-events:none} .kopf-nav .klapp-schalter{cursor:pointer} .klapp-box:checked ~ .klapp-schalter{color:var(--text)} .klapp-box:checked ~ .klapp-schalter svg{transform:rotate(180deg)} .klapp-box:focus-visible ~ .klapp-schalter{ outline:2px solid var(--tinte); outline-offset:3px; box-shadow:0 0 0 5px rgb(242 194 0 / .55); } /* Kein Schleier: ein Ausklapper verdunkelt die Seite nicht. Die Flaeche ist ausschliesslich der Klickfaenger zum Schliessen und deshalb unsichtbar. */ .klapp-fang{ display:none; position:fixed; inset:0; z-index:210; min-height:0; border-bottom:0; background:transparent; } .kopf:has(.klapp-box:checked) .klapp-fang{display:block} /* Die Fangflaeche deckt den ganzen Bildschirm — auch die uebrigen Punkte der Leiste. Ohne die naechste Zeile braeuchte "Ablauf" bei offenem Feld zwei Klicks: einen zum Schliessen, einen zum Folgen. Die Leiste hebt sich deshalb ueber den Faenger; die Seite darunter bleibt gefangen. .klapp steht bewusst NICHT in der Liste: mit eigenem z-index wuerde es einen Stapelkontext aufmachen und seinen Faenger auf 220 mitheben — dann laege er wieder ueber dem Logo. So bleibt .klapp bei z-index:auto und Faenger (210) wie Feld (230) stehen direkt im Wurzelkontext. */ .marke,.kopf-nav>a,.kopf-tat{position:relative;z-index:220} /* Der Schliesser liegt in .klapp und wird von der Zeile darueber nicht erfasst; ohne die naechste faengt die Flaeche auch den Klick auf ihn ab. Das Ergebnis waere zwar dasselbe — zu — aber mit der Maus waere der sichtbare Schalter dann nicht mehr das, was den Klick bekommt. */ .kopf-nav .klapp-schalter{position:relative;z-index:220} /* 25 px = 24 px Polster der Kopfleiste + ihre Trennlinie. Das Feld setzt damit genau auf der Unterkante des Kopfes auf. Die Breite richtet sich nach dem laengsten Eintrag statt nach einem festen Mass. scroll-margin-top haelt den Sprung auf: ohne ihn holt der Browser das Sprungziel "in den Blick" und schiebt die Seite um die Kopfhoehe. */ .klapp-feld{ position:absolute; top:calc(100% + 25px); left:-14px; z-index:230; width:max-content; min-width:200px; padding:8px; scroll-margin-top:93px; background:var(--papier); border:1px solid var(--linie); box-shadow:0 20px 44px -26px rgba(15,19,23,.5); visibility:hidden; opacity:0; transition:opacity .16s, visibility .16s; } .klapp-box:checked ~ .klapp-feld{visibility:visible;opacity:1} .klapp-gruppe{display:none} /* Nur schmal eine Ueberschrift, breit nicht. */ .kopf-nav .klapp-punkt{ display:flex; align-items:center; min-height:44px; padding:0 12px; white-space:nowrap; border-bottom:0; font-size:14px; color:var(--text); } .kopf-nav .klapp-punkt:hover{background:var(--weiss)} /* Die gelbe Unterstreichung der Leiste liefe hier ueber die ganze Karte. */ .kopf-nav .klapp-punkt[aria-current="page"]{ border-bottom-color:transparent; box-shadow:inset 3px 0 0 0 var(--gelb); } /* ── Abschnitte nach dem Entwurf ─────────────────────────────────────────── Kopf aus Etikett, grosser Zeile und Randtext; darunter entweder Reihen ueber die volle Breite oder ein Raster aus Zellen. Die Spaltenmasse haengen an der Art der Marke, weil der Baustein nur die Felder ausgibt, die ein Punkt wirklich hat — eine feste Dreispaltigkeit liesse sonst Loecher. ──────────────────────────────────────────────────────────────────────── */ .block{padding:var(--block) var(--rand);background:var(--papier)} .block.dunkel{background:var(--tinte);color:var(--text-hell)} .block-kopf{ display:flex; gap:var(--luft-paar); justify-content:space-between; align-items:flex-start; margin-bottom:clamp(32px,3.8vw,52px); } .block-marke{display:flex;flex-direction:column;gap:18px;align-items:flex-start; flex:1 1 auto;min-width:0;max-width:34ch} /* h2.serif, nicht blosses h2: Traegt ein Abschnitt keine grosse Zeile, ist das Etikett selbst das h2 — und .block-marke h2 (0,1,1) schluege .braue (0,1,0), das Etikett bekaeme Serifen in 33 px. */ .block-marke h2.serif{font-family:var(--serif);font-weight:400; font-size:clamp(1.45rem,2.5vw,33px);line-height:1.24;letter-spacing:-.01em} .block.dunkel .block-marke h2{color:var(--text-hell)} .block.dunkel .braue{color:var(--text-hell)} .block-note{flex:0 1 42ch;max-width:42ch;font-size:14px;line-height:1.62; color:var(--text-zweit)} .block.dunkel .block-note{color:var(--text-hell-zweit)} /* Abgrenzungskasten unter der grossen Zeile, nur auf der BFSG-Seite. */ .block-extra{border-left:2px solid var(--gelb);padding:2px 0 2px 16px; font-size:14px;line-height:1.6;color:var(--text-hell-zweit)} /* ── Zweck: schwarzes Band mit einer einzigen Aussage ───────────────────── */ /* Der Satz ist die zweitgroesste Schrift der Seite, unter der h1 (72 px) und ueber jeder Abschnittszeile (33 px). Er steht hier statt der frueheren Absageliste; ein Abschnitt, der nur eine Behauptung traegt, braucht auch nur einen Kasten. */ .zweck{display:flex;flex-direction:column;align-items:flex-start; gap:clamp(24px,2.6vw,36px)} .zweck-satz{margin:0;max-width:1080px;font-family:var(--serif);font-weight:300; font-size:clamp(1.75rem,4.2vw,48px);line-height:1.16;letter-spacing:-.025em; color:var(--text-hell)} /* Die Linie laeuft ueber die volle Breite, der Nachsatz nur ueber 680 px. Traege das p beides, zoege die Textbreite die Linie mit ein. */ .zweck-nachsatz{align-self:stretch;border-top:1px solid var(--linie-dunkel); padding-top:clamp(20px,2.1vw,28px)} .zweck-nachsatz p{margin:0;max-width:680px;font-size:16px;line-height:1.75; color:var(--text-hell-zweit)} /* ── Reihen ─────────────────────────────────────────────────────────────── */ /* Das Raster sitzt auf der Liste, die Zeile erbt es mit subgrid. Haette jede Zeile ihr eigenes Raster, rechnete sie ihre Spalten aus dem eigenen Inhalt aus: gemessen 245, 180 und 238 px fuer dieselbe Titelspalte. Die Zeile bleibt trotzdem ein eigener Kasten, weil sie die Linie traegt. */ .reihen{list-style:none;margin:0;padding:0;display:grid;column-gap:24px} .reihen-zeile{display:grid;grid-column:1/-1;grid-template-columns:subgrid; align-items:baseline;padding:21px 0;border-top:1px solid var(--linie)} .reihen>.reihen-zeile:last-child{border-bottom:1px solid var(--linie)} .block.dunkel .reihen-zeile{border-color:var(--linie-dunkel)} .reihen-zeile-marke{font-family:var(--mono);font-size:12px;letter-spacing:.09em; color:var(--text-mono)} .reihen-zeile-titel{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--text)} .reihen-zeile-text{font-size:14px;line-height:1.62;color:var(--text-zweit)} .reihen-zeile-anhang{font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--text-mono);text-align:right;white-space:nowrap} .block.dunkel .reihen-zeile-titel{color:var(--text-hell)} .block.dunkel .reihen-zeile-text{color:var(--text-hell-zweit)} .block.dunkel .reihen-zeile-marke,.block.dunkel .reihen-zeile-anhang{color:var(--gelb)} .reihen--zahl{grid-template-columns:54px minmax(0,220px) minmax(0,1fr)} .reihen--roemisch{grid-template-columns:54px minmax(0,1fr)} .reihen--etikett{grid-template-columns:150px minmax(0,1fr)} .reihen--strich{grid-template-columns:40px minmax(0,1fr)} .reihen--tabelle{grid-template-columns:minmax(0,190px) minmax(0,1fr) 86px} /* Die Kopfzeile der Tabelle nennt die Spalten und traegt keinen Inhalt. */ .reihen-zeile--kopf{padding:0 0 10px;border-top:0} /* Die Namensspalte traegt .reihen--tabelle .reihen-marke (0,2,0). Mit dem blossen span-Selektor (0,1,1) verlor die Kopfzeile dagegen und bekam das Format der Kriteriennamen. Deshalb hier die Felder einzeln. */ .reihen-zeile--kopf .reihen-marke, .reihen-zeile--kopf .reihen-text, .reihen-zeile--kopf .reihen-anhang{font-family:var(--mono);font-size:11px; font-weight:400;letter-spacing:.09em;text-transform:uppercase; color:var(--text-mono)} .reihen-zeile--kopf .reihen-zeile-anhang{text-align:right} /* Etikett-Reihen tragen ihren Text in der Serifenschrift: Sie sind die Aussage, nicht die Erlaeuterung dazu. */ .reihen--etikett .reihen-zeile-marke{color:var(--gelb);text-transform:uppercase} .reihen--etikett .reihen-zeile-text,.reihen--strich .reihen-zeile-titel{ font-family:var(--serif);font-size:19px;line-height:1.35} .reihen--strich .reihen-zeile-marke{color:var(--gelb)} .reihen--strich svg{width:16px;height:16px} /* ── Zellen ─────────────────────────────────────────────────────────────── */ .zellen{list-style:none;margin:0;padding:0;display:grid; gap:0 var(--luft-paar)} .zellen--2{grid-template-columns:repeat(2,minmax(0,1fr))} .zelle{display:flex;flex-direction:column;gap:9px;padding:21px 0; border-top:1px solid var(--linie)} .block.dunkel .zelle{border-color:var(--linie-dunkel)} .zelle-marke{font-family:var(--mono);font-size:12px;letter-spacing:.09em; color:var(--text-mono)} .zelle-titel{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--text)} .zelle-text{font-size:14px;line-height:1.62;color:var(--text-zweit);max-width:52ch} .block.dunkel .zelle-titel{color:var(--text-hell)} .block.dunkel .zelle-text{color:var(--text-hell-zweit)} .block.dunkel .zelle-marke{color:var(--gelb)} /* Kreuze stehen neben dem Satz, nicht darueber, und brauchen keine Linie. */ .zellen--kreuz{gap:24px var(--luft-paar)} .zellen--kreuz .zelle{flex-direction:row;align-items:flex-start;gap:13px; padding:0;border-top:0} .zellen--kreuz .zelle-marke{flex:none;color:var(--gelb);line-height:0} .zellen--kreuz svg{width:15px;height:15px;margin-top:3px} /* Tabelle: Die Marke ist der Name des Kriteriums, keine Ziffer. */ .reihen--tabelle .reihen-marke{font-family:var(--sans);font-size:15px;font-weight:600; letter-spacing:0;text-transform:none;color:var(--text)} /* Etikett-Reihen tragen ihre Aussage in der Serifenschrift; die Marke sagt, wann es passiert. */ .reihen--etikett .reihen-marke{color:var(--gelb);text-transform:uppercase} .reihen--etikett .reihen-titel,.reihen--strich .reihen-titel{ font-family:var(--serif);font-size:19px;line-height:1.35} .reihen--strich .reihen-marke{color:var(--gelb);line-height:0} .reihen--strich svg{width:18px;height:18px} /* ── Zellen-Varianten ───────────────────────────────────────────────────── */ .zellen--kasten .zelle{flex-direction:row;align-items:flex-start;gap:14px} .zellen--kasten .zelle-marke{display:flex;align-items:center;gap:9px;flex:none} .zellen--kasten svg{width:14px;height:14px;color:var(--linie-feld)} .zelle-num{font-family:var(--mono);font-size:12px;letter-spacing:.09em} .zellen--etikett .zelle-marke,.zellen--paragraf .zelle-marke{ color:var(--gelb);text-transform:uppercase} /* Unten so viel Luft wie seitlich. Fruher sass hier der gelbe Streifen und gab der Karte ihren Abschluss; ohne ihn endete das Weiss 6 px unter der letzten Zeile. */ /* ── Grosse Zahl auf der Ablaufseite ────────────────────────────────────── */ .zahl-gross{display:block;font-family:var(--serif);font-weight:400; font-size:clamp(3.2rem,7vw,84px);line-height:1;letter-spacing:-.02em} .zahl-text{display:block;margin-top:12px;font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,23px);line-height:1.3} /* ── Schmaler ───────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .block-kopf{flex-direction:column;gap:18px} .block-marke,.block-note{max-width:none;flex:none} .zellen--2{grid-template-columns:1fr} } @media (max-width:760px){ /* Marke und Titel bleiben in einer Zeile, der Satz rueckt darunter. */ .reihen--zahl{grid-template-columns:40px minmax(0,1fr)} .reihen--zahl .reihen-zeile{row-gap:7px} .reihen--zahl .reihen-text{grid-column:2} .reihen--roemisch{grid-template-columns:36px minmax(0,1fr)} .reihen--etikett{grid-template-columns:minmax(0,1fr)} .reihen--etikett .reihen-zeile{row-gap:9px} /* Die dritte Spalte der Tabelle bleibt rechts oben stehen, der Satz nimmt darunter die volle Breite. */ .reihen--tabelle{grid-template-columns:minmax(0,1fr) 74px} .reihen--tabelle .reihen-marke{grid-column:1;grid-row:1} .reihen--tabelle .reihen-anhang{grid-column:2;grid-row:1} .reihen--tabelle .reihen-text{grid-column:1/-1;grid-row:2} .reihen--tabelle .reihen-zeile{row-gap:8px} .reihe--kopf,.reihen-zeile--kopf{display:none} } /* ── Zweispaltiger Block ────────────────────────────────────────────────── */ /* Kopf links, Inhalt rechts. 44 zu 56 wie im Entwurf: Die Ueberschrift bricht dort auf zwei Zeilen, die Stufen bekommen den groesseren Teil. */ .block--paar{ display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); column-gap:var(--luft-paar); align-items:start; } .block--paar .block-kopf{display:block;margin-bottom:0} .block--paar .block-marke{max-width:none} /* Der Abgrenzungskasten traegt eine eigene Marke ueber dem Text. */ .block-extra-marke{font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--gelb); margin-bottom:9px} /* ── Stufen ─────────────────────────────────────────────────────────────── */ /* Die Senkrechte ist der rechte Rand der Ziffernspalte. Weil die Zeilen ohne Zwischenraum stehen und ihren Abstand als Polster tragen, wachsen die Teilstuecke zu einem durchgehenden Strich zusammen. Ein row-gap wuerde ihn in Stuecke zerschneiden. Auch die letzte Stufe behaelt ihr Polster, damit der Strich wie im Entwurf ein Stueck ueber sie hinauslaeuft statt buendig abzubrechen. */ .stufen{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:auto minmax(0,1fr)} .stufe{display:grid;grid-column:1/-1;grid-template-columns:subgrid} .stufe-nr{font-family:var(--mono);font-size:12px;letter-spacing:.09em; color:var(--gelb);text-align:right;padding:0 32px 42px 0; border-right:1px solid var(--linie-dunkel)} .stufe-inhalt{padding:0 0 42px 34px} .stufe-titel{display:block;font-family:var(--serif);font-size:21px; line-height:1.25;color:var(--text-hell)} .stufe-inhalt p{margin-top:9px;font-size:14px;line-height:1.62; color:var(--text-hell-zweit)} @media (max-width:1000px){ .block--paar{grid-template-columns:1fr;row-gap:clamp(32px,3.8vw,52px)} } @media (max-width:560px){ /* Die Ziffernspalte kostet hier mehr Breite als sie an Ordnung bringt. */ .stufen{grid-template-columns:minmax(0,1fr)} .stufe{display:block} .stufe-nr{display:block;text-align:left;padding:0 0 7px;border-right:0} .stufe-inhalt{padding:0 0 34px} } /* ── Hinweise, die nur als Sprungziel sichtbar werden ────────────────────── Beide brauchen kein Skript: anfrage.php haengt die Raute an die Adresse, :target blendet den passenden Satz ein. */ /* Im Formular, wenn eine Pflichtangabe fehlte. */ .formularfehler{display:none} .formularfehler:target{ display:block; scroll-margin-top:24px; margin:0 0 4px; padding:13px 16px; border-left:2px solid var(--gelb); background:var(--papier); font-size:14px; line-height:1.55; color:var(--text); } /* Auf der Fehlerseite: der genaue Grund, sonst der allgemeine Satz. */ .grund{display:none} .grund:target{display:block} .inhalt:has(.grund:target) .grund--sonst{display:none} .inhalt .grund--sonst{display:block} /* ── Handlungsleiste, nur schmal ────────────────────────────────────────── Breit traegt der Kopf den Knopf. Schmal ist er dort ausgeblendet, der Kopf klebt nicht, und der naechste Knopf sitzt im Formular ganz unten — gemessen 5751 px Scrollweg dazwischen. Die Leiste sitzt im Daumenbereich und ist die einzige Stelle, an der diese Seite etwas fest an den Rand heftet. Sie bleibt deshalb so schmal wie moeglich: ein Knopf, ein Zeichen. ─────────────────────────────────────────────────────────────────────── */ .tatleiste{display:none} @media (max-width:760px){ .tatleiste{ display:flex; align-items:center; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:200; padding:10px var(--rand); /* Auf Geraeten mit Gestenbalken liegt sonst der Knopf unter dem Balken. */ padding-bottom:max(10px, env(safe-area-inset-bottom)); background:var(--papier); border-top:1px solid var(--linie); } .tatleiste .knopf{flex:1 1 auto;justify-content:center;padding:15px 20px} .tatleiste-mail{ display:flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; border:1px solid var(--linie-feld); border-radius:2px; color:var(--text); text-decoration:none; } .tatleiste-mail svg{width:18px;height:18px} .tatleiste-mail:hover{border-color:var(--tinte)} /* Damit die Leiste den Schluss der Seite nicht verdeckt. */ body{padding-bottom:76px} /* Bei offenem Menue verschwindet sie: Das Menue traegt seinen eigenen Knopf, zwei gleiche Aufforderungen uebereinander waeren eine zu viel. */ body:has(.kopf-nav:target) .tatleiste{display:none} /* Die Brotkrume ist schmal der einzige Rueckweg neben der Wortmarke. Ohne Unterstreichung war der Verweis von den beiden Nicht-Verweisen daneben nicht zu unterscheiden, und 16 px hoch war er zu knapp. */ /* a[href] statt a: Die Grundregel .krume a{text-decoration:none} steht weiter unten in der Datei und gewaenne bei gleicher Spezifitaet allein durch ihre Stellung. */ .krume a[href]{ display:inline-block; padding:6px 2px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--linie-feld); } } /* ── Held ──────────────────────────────────────────────────────────────── */ .held{background:var(--papier);padding:var(--block) var(--rand)} .held-reihe{display:flex;gap:var(--luft-held);align-items:flex-start;padding-bottom:24px} .held-links{flex:0 1 720px;display:flex;flex-direction:column;gap:30px;align-items:flex-start} .held h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.75rem,6.4vw,92px);line-height:.98;letter-spacing:-.02em} .held h1>span:not(.betont){display:block} @media (min-width:1100px){.held h1>span,.held h1>.betont>span{white-space:nowrap}} .held-vor{font-size:19px;color:var(--text-zweit);max-width:44em} .held-tat{display:flex;flex-wrap:wrap;gap:14px} /* Die Datei trägt ein weißes Quadrat um die Strichzeichnung. "darken" nimmt je Kanal den dunkleren Wert: Weiß wird zum Papierton, Schwarz und Gelb bleiben unberührt, und die weichen Kanten bekommen keinen Saum — anders als beim Freistellen. Ohne Unterstützung bleibt das weiße Feld stehen. */ .saeule{flex:0 1 440px;min-width:0;max-width:440px} .saeule img{width:100%;height:auto;mix-blend-mode:darken} /* Unterseiten-Held: Brotkrume, H1, Fließtext. */ .held--unter{padding:88px var(--rand) 76px} .held--unter .held-reihe{align-items:flex-end;padding-bottom:0;gap:clamp(1.5rem,4vw,48px)} .held--unter .held-links{gap:26px;flex:1 1 auto} .held--unter h1{font-size:clamp(2.25rem,5.6vw,72px)} .held--unter .held-vor{max-width:720px} /* Kleiner als auf der Startseite: hier begleitet die Säule, dort trägt sie. */ /* Genau so gross wie auf der Startseite, nicht kleiner. Dort ist die Saeule nicht gross, weil sie es sein soll, sondern weil die lange Ueberschrift den Platz frisst und der Rest ihr zufaellt: 366 bei 1440, 323 bei 1280, 274 bei 1100. Die Gerade 27.06vw - 23.7px trifft diese drei Punkte. Wo die Ueberschrift einer Unterseite mehr Platz braucht, schrumpft die Saeule von selbst (flex-shrink 1) — sie wird also nie groesser als die auf der Startseite, aber auch nicht willkuerlich kleiner. */ .saeule--klein{flex:0 1 clamp(220px, 27.06vw - 23.7px, 366px);max-width:366px;align-self:flex-end} .krume{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mono)} .krume a{color:inherit;text-decoration:none} .krume a:hover{text-decoration:underline} /* Porträt statt Saeule im Kopfbereich von "Ueber uns". Dieselbe Fassung wie im Kontaktabschnitt — gelber Versatz statt Rahmen —, damit das Bild nicht wie ein Fremdkoerper aus einer anderen Seite wirkt. */ .held-bild{flex:0 0 252px;margin:0;padding:0 18px 0 0} .held-bild img{width:234px;height:296px;object-fit:cover;object-position:center; box-shadow:18px 18px 0 0 var(--gelb)} /* Die Unterschrift steht unter dem gelben Versatz, nicht daneben: 18 px Abstand geben ihn frei, weitere 14 px trennen sie vom Bild. */ /* Ohne Versalien, anders als die uebrigen Mono-Etiketten: Sie machten aus "Groß-Hardt" ein "GROSS-HARDT". Ein Etikett darf man umschreiben, einen Namen nicht. */ .held-bild figcaption{ margin-top:32px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--text-mono); } /* Knapper Kopfbereich: Auf "Leistungen" folgt das Sechserraster unmittelbar, weil es der Inhalt der Seite ist und nicht ihre Beilage. */ .held--knapp{padding-bottom:clamp(2rem,3.4vw,44px)} .held--knapp .held-reihe{padding-bottom:0} @media (max-width:1000px){ .held-bild{flex-basis:auto;padding:0 14px 14px 0} .held-bild img{width:180px;height:228px;box-shadow:14px 14px 0 0 var(--gelb)} } @media (max-width:760px){ /* Wie die Saeule: Vor dem Text kostet das Bild hier nur Hoehe. */ .held-bild{display:none} } /* ── Angabenzeile im Kopfbereich ────────────────────────────────────────── Die harten Angaben der jeweiligen Seite, waagerecht unter der Einleitung. Sie ist der Grund, warum die sieben Unterseiten oben auseinandergehen: Ohne sie oeffnen alle mit derselben Abfolge, und dieselbe Ueberschrift koennte auf jeder von ihnen stehen. Eine Definitionsliste, kein Raster aus divs: Etikett und Wert gehoeren als Paar zusammen, und ein Vorleseprogramm sagt das dann auch. Die Umschliessung je Paar braucht es, weil dt und dd sonst als Geschwister im Flexfluss auseinanderfallen. ─────────────────────────────────────────────────────────────────────── */ /* Raster statt Flexfluss: Mit flex-wrap brach die vierte Angabe in eine zweite Zeile, sobald die Textspalte schmaler wurde — drei oben, eine unten. auto-fit traegt drei wie vier Angaben in einer Reihe und teilt den Platz gleich auf. */ .angabenzeile{ /* align-self:stretch, weil .held-links ein Spaltenfluss mit linksbuendigen Kindern ist: Ohne das nimmt das Raster Inhaltsbreite an und legt alle Angaben untereinander. */ align-self:stretch; display:grid; gap:22px 34px; margin:34px 0 0; padding-top:26px; border-top:1px solid var(--linie); } /* Die Spaltenzahl steht in der Klasse, statt sie auto-fit ausrechnen zu lassen: Mit einer Mindestbreite kippte die vierte Angabe bei 668 px Spaltenbreite in eine zweite Reihe, drei oben, eine unten. Vorgegeben bricht es dort, wo es soll — auf zwei mal zwei. */ .angabenzeile--3{grid-template-columns:repeat(3,minmax(0,1fr))} .angabenzeile--4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1100px){ .angabenzeile--4{grid-template-columns:repeat(2,minmax(0,1fr))} } .angabenzeile-feld{display:flex;flex-direction:column;gap:7px;min-width:0} .angabenzeile dt{ font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mono); } .angabenzeile dd{margin:0;font-size:15px;line-height:1.3;color:var(--text)} @media (max-width:760px){ /* Zwei Spalten statt einer Reihe: Vier Angaben nebeneinander brechen auf dem Telefon in vier einzelne Zeilen und machen den Kopf doppelt so hoch. */ .angabenzeile--3,.angabenzeile--4{grid-template-columns:repeat(2,minmax(0,1fr))} .angabenzeile{gap:20px 24px;margin-top:30px;padding-top:22px} } /* ── Gelbes Band ───────────────────────────────────────────────────────── */ .band{ display:flex; align-items:center; gap:var(--luft-band); padding:64px var(--rand); background:var(--gelb); } .band img{width:64px;height:64px;flex:none;mix-blend-mode:darken} .band-text{flex:1 1 0;display:flex;flex-direction:column;gap:14px;min-width:0} .band-text h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.6vw,46px);line-height:1.1} .band-text p{font-size:17px;color:var(--auf-gelb);max-width:54ch} .band .knopf{padding:18px 28px;font-weight:400;font-family:var(--mono);font-size:15px;text-transform:none;letter-spacing:0} /* ── Zweispaltiger Abschnitt ───────────────────────────────────────────── */ /* space-between: Wenn die rechte Spalte an ihrer Grenze steht, geht der Ueberschuss in den Abstand zwischen den Spalten, nicht als tote Flaeche ans Ende der Liste. Gestapelt (Spaltenrichtung) hat es keine Wirkung. */ .paar{ display:flex; justify-content:space-between; gap:var(--luft-paar); padding:var(--block) var(--rand); background:var(--papier); } .paar-links{flex:0 0 var(--spalte);max-width:var(--spalte);display:flex;flex-direction:column;gap:26px;align-items:flex-start} .paar-links p{font-size:14px;color:var(--text-zweit);max-width:60ch} .paar-rechts{flex:0 1 68ch;max-width:68ch;min-width:0} .dunkel{background:var(--tinte);color:var(--text-hell)} .dunkel .paar-links p{color:var(--text-hell-zweit)} .dunkel .zwischen{color:var(--text-hell-zweit)} /* ── Merkmalliste mit Haken bzw. Kreuz ─────────────────────────────────── */ /* 40rem ≈ 68 ch bei 16,5 px. Ohne Deckel liefen die Zeilen auf 83 ch, in der vollbreiten Fassung sogar auf 122 ch. */ /* Die Begrenzung sass frueher auf der Liste selbst. Dadurch endeten die Trennlinien bei 640 px, waehrend die Spalte mitwuchs — im schwarzen Feld bis zu 221 px vor dessen Kante, in der vollbreiten Fassung 785 px. Die Punkte standen still, waehrend die Flaeche sich bewegte. Jetzt folgt die Liste ihrer Spalte und nur der Text behaelt sein Mass. */ .liste{display:flex;flex-direction:column} /* 68ch ist die Grenze aus DESIGN.md, hier in der Einheit geschrieben, die sie meint: 745 px bei 16,5 px. Vorher standen hier 640 px = 58 Zeichen — der Text hoerte also schon auf zu wachsen, bevor die Grenze erreicht war. */ .liste p{max-width:68ch} .liste li{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--linie)} .liste li:last-child{border-bottom:0} .dunkel .liste li{border-bottom-color:var(--linie-dunkel)} .liste svg{flex:none;width:18px;height:18px;margin-top:.2em} .liste--ja svg{color:var(--tinte)} .dunkel .liste svg{color:var(--gelb-hell)} .liste p{font-size:16.5px;line-height:1.5} /* ── Aussage-Abschnitt ─────────────────────────────────────────────────── */ .aussage{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,40px);line-height:1.22;letter-spacing:-.01em} /* ── Leistungsraster ───────────────────────────────────────────────────── */ .leistungen{background:var(--weiss);padding:var(--block) var(--rand);display:flex;flex-direction:column;gap:var(--luft-leistungen)} .leistungen-kopf{display:flex;gap:var(--luft-kopf);align-items:flex-end;flex-wrap:wrap} .leistungen-kopf .titel{flex:1 1 420px;display:flex;flex-direction:column;gap:24px} .leistungen-kopf h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,52px);line-height:1.08;letter-spacing:-.015em} .leistungen-kopf h2>span{display:block} .leistungen-kopf .intro{flex:0 1 420px;max-width:48ch;font-size:15px;color:var(--text-zweit)} .raster{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .dienst{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--linie)} .dienst .num{font-family:var(--mono);font-size:12px;color:var(--text-mono);letter-spacing:.1em} .dienst h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2} .dienst p{font-size:14px;color:var(--text-zweit)} /* ── Ablauf ────────────────────────────────────────────────────────────── */ .ablauf{background:var(--papier);padding:var(--block) var(--rand);display:flex;flex-direction:column;gap:60px} .zeitstrahl{display:grid;grid-template-columns:repeat(3,1fr);gap:40px; margin:0;padding:0;list-style:none} .schritt{display:flex;flex-direction:column;align-items:flex-start;gap:14px; padding-top:26px;border-top:1px solid var(--linie)} .schritt .num{ display:inline-flex;align-self:flex-start;padding:5px 9px;border-radius:2px; background:var(--gelb);color:var(--tinte); font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.06em; } .schritt h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15} .schritt p{font-size:14px;color:var(--text-zweit)} /* Die Illustrationen stammen von der urspruenglichen litvass.com (Contents Litvass/2023/01) und sind auf die Markenpalette umgesetzt. "darken" nimmt den weissen Flaechen ihre Haerte: Weiss wird Papierton, alles Dunklere bleibt unberuehrt. */ .bild{width:100%;max-width:100%;height:auto;display:block; margin:-6px 0 6px;mix-blend-mode:darken} /* ── Vertrauen (dunkles Raster) ────────────────────────────────────────── */ .vertrauen{background:var(--tinte);color:var(--text-hell);padding:var(--block) var(--rand)} .vertrauen-raster{display:grid;grid-template-columns:repeat(3,1fr)} /* Kein Aussenabstand zwischen den beiden Reihen: die 26 px rissen die senkrechten Linien auf. Ohne ihn stoesst die Unterkante der ersten Reihe an die Oberkante der zweiten, die Senkrechten laufen durch und die waagerechte Linie kreuzt sie. Der Abstand kommt aus den Polstern (26 px unten in Reihe eins, 26 px oben in Reihe zwei). */ .vertrauen-raster+.vertrauen-raster .zusage{border-top:1px solid var(--linie-dunkel); margin-top:0;padding-top:26px} .zusage{display:flex;flex-direction:column;gap:14px;padding:0 30px 26px 0} .zusage+.zusage{padding-left:30px;border-left:1px solid var(--linie-dunkel)} .zusage svg{width:20px;height:20px;color:var(--gelb-hell)} .zusage h3{font-size:15px;font-weight:600;line-height:1.35} .zusage p{font-size:13.5px;color:var(--text-hell-zweit)} /* ── Kontakt ───────────────────────────────────────────────────────────── */ /* ── Übergangsband ───────────────────────────────────────────────────────── Zwei verwandte Seiten vor dem Kontaktabschnitt. Bewusst leise gehalten: der naechste Block ist die eigentliche Aufforderung, dieser hier faengt nur den Leser ab, fuer den sie noch zu frueh kommt. Der Abstand ist in beiden Achsen derselbe Wert. Dadurch bleibt er beim Umbruch auf eine Spalte stetig — waagerecht wird schlicht senkrecht. ──────────────────────────────────────────────────────────────────────── */ /* Unten knapper als oben: der Kontaktabschnitt darunter traegt denselben Papierton und sein eigenes Polster von 110 px. Mit vollem Polster auf beiden Seiten lagen 210 px dazwischen und das Band las sich als Vorspann des Kontakts statt als eigener Block. */ .weiter{background:var(--papier);border-top:1px solid var(--linie); padding:var(--block) var(--rand) clamp(2rem,4vw,56px)} .weiter-titel{ font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--text-mono); margin:0 0 30px; } .weiter-liste{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px, 2.2vw + 10px, 42px); /* 32 @1000 · 42 @1440 */ margin:0;padding:0;list-style:none; } .weiter-liste>li{display:flex} .weiter-karte{ flex:1 1 auto; display:flex;flex-direction:column;align-items:flex-start;gap:12px; padding-top:24px;border-top:1px solid var(--linie); text-decoration:none;color:inherit; } .weiter-name{ font-family:var(--serif);font-weight:300; font-size:clamp(1.5rem,2.2vw,30px);line-height:1.12; letter-spacing:-.012em;color:var(--text); } .weiter-text{font-size:15px;color:var(--text-zweit);max-width:44ch} .weiter-mehr{ display:inline-flex;align-items:center;gap:8px;margin-top:auto; padding:14px 0 3px;font-size:14px;color:var(--text); border-bottom:2px solid var(--gelb); } .weiter-mehr svg{width:15px;height:15px} .weiter-karte:hover{border-top-color:var(--tinte)} .weiter-karte:hover .weiter-mehr{border-bottom-color:var(--tinte)} .kontakt{display:flex;gap:var(--luft-kontakt);padding:110px var(--rand);background:var(--papier)} .kontakt-links{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:32px;align-items:flex-start} .kontakt h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.25rem,4.4vw,56px);line-height:1.06;letter-spacing:-.018em} .kontakt h2>span.zeile{display:block} .kontakt-vor{font-size:16px;color:var(--text-zweit);max-width:34em} .angaben{width:100%;padding-top:16px;display:flex;flex-direction:column} .angabe{display:flex;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--linie);text-decoration:none} .angaben .angabe:last-child{border-bottom:1px solid var(--linie)} .angabe svg{flex:none;width:17px;height:17px;color:var(--tinte)} .angabe .schluessel{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mono);flex:none} .angabe .wert{font-size:15px;color:var(--text)} a.angabe:hover .wert{text-decoration:underline} .person{display:flex;gap:28px;align-items:flex-start} /* Flacher gelber Versatzschatten — dieselbe Geste wie an der Litfaßsäule. Im Entwurf ein box-shadow, kein zweites Element. */ .person-bild{flex:0 0 236px;padding:0 16px 16px 0} .person-bild img{width:220px;height:278px;object-fit:cover;object-position:center; box-shadow:16px 16px 0 0 var(--gelb)} .person-text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px} .person-text .schluessel{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mono)} .person-text .name{font-family:var(--serif);font-weight:400;font-size:22px} .person-text p{font-size:15px;color:var(--text-zweit)} /* Formular */ .formular{ flex:0 0 520px;max-width:520px; display:flex;flex-direction:column;gap:24px; padding:40px;border-radius:3px;background:var(--weiss); } .formular-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem} .formular-kopf h3{font-family:var(--serif);font-weight:400;font-size:24px} .vertraulich{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mono)} .vertraulich svg{width:12px;height:12px} .reihe{display:flex;gap:16px} .feld{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:9px} .feld label{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-zweit)} .feld input,.feld select,.feld textarea{ width:100%;padding:14px 15px;border-radius:2px; background:var(--papier);border:1px solid var(--linie-feld); font-family:var(--sans);font-size:14px;color:var(--text); } .feld textarea{min-height:110px;resize:vertical} .feld ::placeholder{color:var(--text-mono);opacity:1} .feld select{appearance:none;background-image:none} .wahl{position:relative;display:flex;align-items:center} .wahl svg{position:absolute;right:15px;width:16px;height:16px;color:var(--text-mono);pointer-events:none} .zustimmung{display:flex;gap:12px;align-items:flex-start;padding-top:4px} .zustimmung input{flex:none;width:24px;height:24px;margin-top:0;accent-color:var(--tinte)} .zustimmung label{font-size:12.5px;color:var(--text-zweit);line-height:1.45} .formular .hinweis{font-size:12.5px;color:var(--text-mono)} .formular .knopf{padding:17px 24px;justify-content:center} /* Honigtopf — unsichtbar, aber nicht display:none (Bots lesen das). */ .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── Textseiten (Impressum, Datenschutz) ───────────────────────────────── */ .inhalt{padding:96px var(--rand) 110px;display:flex;flex-direction:column;gap:52px;background:var(--weiss)} .inhalt-block{max-width:44rem;display:flex;flex-direction:column;gap:14px} .inhalt h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2} .inhalt h3{font-size:15px;font-weight:600} .inhalt p,.inhalt li{font-size:15.5px;color:var(--text-zweit);line-height:1.62} .inhalt a{color:var(--text)} /* Die Angaben in Impressum und Datenschutz stehen in Definitionslisten. Ein Link darin ist nur so hoch wie seine Zeile, also 21 px und damit unter dem Mindestmass fuer ein Klickziel. inline-block plus Polsterung bringt ihn auf 27 px, ohne die Zeile zu brechen. */ .inhalt dd a{display:inline-block;padding-block:3px} .inhalt ul{display:flex;flex-direction:column;gap:8px;padding-left:1.1rem;list-style:disc} .inhalt dl{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin:0;font-size:15.5px} .inhalt dt{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mono);padding-top:.45em} .inhalt dd{margin:0;color:var(--text-zweit)} /* Nur für Screenreader — Abschnitte, die im Entwurf keine sichtbare Überschrift tragen, brauchen trotzdem eine in der Gliederung. */ .vh{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* Volle Breite statt zweier Spalten (Über uns § Arbeitsweise). */ .paar--voll{flex-direction:column;gap:32px} /* Hier gibt es keine zweite Spalte, in die ein Ueberschuss wandern koennte. Also endet die Liste mit ihrem Text: 1281 px waeren 117 Zeichen. */ .paar--voll .liste{max-width:68ch} .paar-voll-kopf{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .paar-voll-kopf p{font-size:14px;max-width:44em} /* Rechtsseiten */ .stand{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-zweit)} .inhalt-lead{font-size:17px;color:var(--text-zweit);max-width:44rem} .hinweis-kasten{ display:flex;gap:16px;align-items:flex-start;max-width:44rem; padding:24px 28px;border-radius:2px;background:var(--tinte);color:var(--text-hell); } .hinweis-kasten svg{flex:none;width:20px;height:20px;color:var(--gelb-hell);margin-top:.15em} /* Muss die Farben von .inhalt p überschreiben — der Kasten steht darin. */ .hinweis-kasten p{font-size:14px;color:var(--text-hell-zweit);line-height:1.5} .hinweis-kasten .hinweis-titel{font-size:15px;font-weight:600;color:var(--text-hell);margin-bottom:7px} .inhalt-block{padding:30px 0 34px;border-top:1px solid var(--linie)} .platzhalter{ display:flex;align-items:center;gap:10px;align-self:flex-start; padding:18px 20px;border-radius:2px;background:var(--papier); font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--text-mono); } .platzhalter svg{flex:none;width:15px;height:15px;color:var(--text-mono)} /* ── Fuß ───────────────────────────────────────────────────────────────── */ .fuss{background:var(--tinte);color:var(--text-hell);padding:80px var(--rand) 40px;display:flex;flex-direction:column;gap:64px} /* Raster, kein umbrechendes Flexband. Als Flexband passten Marke plus drei Spalten erst ab rund 1400 px in eine Reihe; darunter blieb je nach Breite eine Spalte allein stehen — bei 768 px die erste, bei 1024 px die letzte. */ .fuss-oben{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--luft-fuss) clamp(24px, 2.78vw + 0px, 40px)} /* Die drei Navigationen sitzen rechts neben der Marke und teilen deren drei Spuren unter sich neu auf: 1fr max-content 1fr. Die beiden aeusseren Spuren sind damit gleich breit, gleich wie breit die mittlere ist — und die Mitte der mittleren faellt exakt auf die Mitte der Flaeche rechts der Marke. Je ein Drittel traefe die Mitte zwar auch, aber die Spalte stuende dann am linken Rand ihres Drittels: gemessen 276 px Spur fuer 150 bis 200 px Verweise. Die aeusseren Spuren des Aussenrasters bleiben stehen, damit die Marke genau so breit ist wie zuvor. */ .fuss-spalten{grid-column:2 / -1;display:grid; grid-template-columns:1fr minmax(0,max-content) 1fr; gap:var(--luft-fuss) clamp(24px, 2.78vw + 0px, 40px)} /* Die letzte Spalte haengt am rechten Rand. Links ausgerichtet bliebe rechts eine Luecke, so breit wie ihre Spur den Text ueberragt. */ .fuss-spalte:last-child{align-items:flex-end} .fuss-marke{display:flex;flex-direction:column;gap:22px;min-width:0} .fuss-marke img{width:172px;height:50px;object-fit:contain} /* 34em waren eine feste Breite: ab 1180 px spannt die Marke ueber die ganze Reihe, der Absatz sprang von 333 auf 476 px und blieb dann konstant, waehrend der Kasten um ihn schrumpfte. min(100%, 44ch) haelt das Mass im lesbaren Bereich, folgt der Schriftgroesse und laesst den Absatz in schmalen Kaesten die volle Breite nehmen statt eine Luecke zu lassen. */ .fuss-marke p{font-size:14px;color:var(--text-hell-zweit);max-width:min(100%,44ch)} /* Spannt der Markenblock ueber alle Spalten, stand der Satz mit 44ch in einer halb leeren Reihe — 438 von 885 px. 60 Zeichen fuellen sie auf gut zwei Drittel und bleiben unter der Grenze von 68. Die Regel dafuer steht beim Umbruch der Fusszeile. */ .fuss-sozial{display:flex;gap:10px;padding-top:6px} .fuss-sozial a{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:2px;border:1px solid var(--linie-dunkel);color:var(--text-hell); } .fuss-sozial a:hover{border-color:var(--gelb-hell);color:var(--gelb-hell)} .fuss-sozial svg{width:18px;height:18px} .fuss-spalte{display:flex;flex-direction:column;gap:16px;min-width:0} .fuss-titel{margin:0;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--gelb-hell)} .fuss-spalte a{ display:inline-flex;align-items:center;min-height:24px; font-size:14px;color:var(--text-hell-zweit);text-decoration:none; } .fuss-spalte a:hover{color:var(--text-hell);text-decoration:underline} .fuss-unten{padding-top:28px;border-top:1px solid var(--linie-dunkel);display:flex;flex-wrap:wrap;gap:.35rem 1rem} .fuss-unten,.fuss-unten a{font-size:13px;color:var(--text-hell-zweit)} /* ══ Schmal ═══════════════════════════════════════════════════════════════ Der Entwurf kennt nur 1440 px. Alles ab hier ist hinzugefügt, damit die Seite auf dem Telefon benutzbar bleibt — die Leserschaft liest laut PRODUCT.md überwiegend mobil. ════════════════════════════════════════════════════════════════════════ */ /* Zwischen 1001 und 1379 px steht der Kontakt nebeneinander, aber die linke Spalte ist dort nur 426 bis 542 px breit. Fuer Bild und Text nebeneinander bleiben davon 162 px (bei 1024) bis 278 px (bei 1280) — "Viktor Groß-Hardt" bricht dann am Bindestrich um. Gemessen, nicht geschaetzt. Erst ab etwa 1380 px traegt das Nebeneinander wieder. */ @media (min-width:1001px) and (max-width:1379px){ .person{flex-direction:column;gap:18px} .person-bild{flex-basis:auto} } /* Die Grenze ist gemessen, nicht geschaetzt: Bis 761 px passen Marke und die drei Spalten nebeneinander, ohne dass ein Verweis breiter wird als seine Spur. Bei 740 px reicht "RECHTLICHES" mit 93 px zuerst ueber seine 90 px hinaus, bei 720 px auch "Datenschutz", bei 700 px "Leistungen". 760 px ist ohnehin die Zeile, ab der die Verweise Fingermass bekommen. */ @media (max-width:760px){ /* Marke ueber die volle Breite, die drei Spalten darunter. Ihre Aufteilung bleibt dieselbe, sie gilt dann nur fuer die ganze Reihe statt fuer die Flaeche rechts der Marke. */ .fuss-oben{grid-template-columns:1fr} .fuss-spalten{grid-column:1 / -1} .fuss-marke p{max-width:min(100%,60ch)} } @media (max-width:1180px){ .formular{flex-basis:440px} .saeule:not(.saeule--klein){flex-basis:340px} } /* Erst hier stapeln. Die drei Spalten brauchen zusammen nur 323 px; die alten Umbrueche bei 620 und 420 px stammten aus der Zeit, als jede Spalte ein Drittel der Flaeche nahm. Bei 470 px bleiben rund 24 px je Zwischenraum — darunter wird es eng, dann untereinander. */ @media (max-width:470px){ .fuss-spalten{grid-template-columns:1fr;justify-content:stretch} /* Untereinander gibt es kein Aussen mehr; alle drei beginnen links. */ .fuss-spalte:last-child{align-items:flex-start} } @media (max-width:1000px){ /* Lesegrößen ab hier, wo die Spalten stapeln und die Textblöcke breit werden. Der Entwurf setzt 14 px und weniger; das ist auf 1440 px richtig und schmal zu klein — die Leserschaft ist laut PRODUCT.md 45+ und mobil. */ .dienst p,.schritt p,.paar-links p,.paar-voll-kopf p, .leistungen-kopf .intro,.inhalt p,.inhalt li{font-size:16px} .zusage p,.zustimmung label,.formular .hinweis, .fuss-marke p,.fuss-spalte a{font-size:15px} /* Unter 16 px zoomt iOS beim Antippen in das Feld hinein. */ .feld input,.feld select,.feld textarea{font-size:16px} .raster,.zeitstrahl{grid-template-columns:repeat(2,1fr)} /* Zwei Dreierlisten in zwei Spalten ergeben zweimal 2+1 und damit zwei Loecher mitten im Raster. Einspaltig lesen sich die sechs Zusagen als eine Liste, und die Trennlinien liegen durchgehend. */ .vertrauen-raster{grid-template-columns:1fr} /* Die senkrechten Striche waren fuer drei Spalten gesetzt. In zwei Spalten traf `.zusage + .zusage` auch die erste Kachel der zweiten Reihe: sie stand eingerueckt da, mit einem Strich ins Nichts. Ab hier trennen waagerechte Linien, die bei jeder Spaltenzahl stimmen. */ .vertrauen-raster{gap:0 40px} .zusage,.zusage+.zusage, .vertrauen-raster+.vertrauen-raster .zusage{padding:26px 0;border-left:0; margin-top:0;border-top:1px solid var(--linie-dunkel)} /* Einspaltig laeuft die Zeile sonst auf 81 Zeichen. */ .zusage p{max-width:38rem} .kontakt,.paar,.held-reihe,.leistungen-kopf,.band{flex-direction:column;align-items:stretch} /* .held--unter .held-reihe setzt oben align-items:flex-end (0,2,0) und schlaegt die Zeile darueber (0,1,0). Breit richtet das Text und Saeule an der Unterkante aus — gestapelt wird daraus die waagerechte Ausrichtung und der Textblock rutschte an den rechten Rand: bei 1000 px um 165 px eingerueckt, waehrend jeder Abschnitt darunter am Seitenrand stand. */ .held--unter .held-reihe{align-items:stretch} /* Der wichtigste Satz in dieser Datei: in einer Spalte ist flex-basis die HÖHE, nicht die Breite. Die 720 px der linken Heldenspalte wurden zu 327 px Leere unter den Knöpfen, die 420 px der Leistungs-Überschrift zu 342 px zwischen Überschrift und Fließtext. Deshalb hier pauschal für jedes Kind eines Blocks, der stapelt — nicht einzeln nachgezogen. */ .kontakt>*,.paar>*,.held-reihe>*,.leistungen-kopf>*,.band>*, .leistungen-kopf>.titel,.leistungen-kopf>.intro{flex-basis:auto} /* Beide Spalten aufheben, nicht nur die linke. .paar-rechts traegt oben max-width:68ch, damit die Spalte nie breiter wird als der Text sie nutzen kann. Gestapelt gibt es keine zweite Spalte mehr — dort liess die Grenze den Listenblock 164 px vor der Kante enden, waehrend der Einleitungstext darueber bis an den Rand lief. Das Textmass haelt weiterhin .liste p. */ .paar-links,.paar-rechts{max-width:none} /* Kein Deckel mehr: Der Abschnitt stapelt hier, und alles andere darin — Ueberschrift, Trennlinien, Angaben — nimmt die volle Breite. Mit 34rem stand das weisse Feld links und liess rechts bis zu 406 px Papier frei. */ .formular{max-width:none} /* Gestapelt steht die Saeule allein unter dem Text und wirkt abgelegt. Sie ist die Geste neben der Ueberschrift — ohne das Nebeneinander traegt sie nichts. */ .saeule,.saeule--klein{display:none} /* Abstaende, die nebeneinander Spalten trennen, trennen gestapelt nichts mehr — sie reissen nur Loecher. */ .kontakt{padding-top:var(--block);padding-bottom:var(--block)} .band{align-items:flex-start} /* Der Fuss lief als umbrechendes Flexband in ein Treppenmuster: die Marke wuchs, AGENTUR stand allein rechts daneben, der Rest sprang in Reihe zwei. Als Raster ist die Zeilenaufteilung entschieden statt zufaellig. */ } /* Der Ablauf ist eine Abfolge, kein Raster. In zwei Spalten stand Schritt 03 allein in Reihe zwei und die Nummern liefen als Z statt als Linie. Zwischen 561 und 1000 px steht das Bild deshalb links, der Text rechts, die drei Schritte untereinander — die Reihenfolge bleibt eine Leserichtung. Die Aufteilung kommt aus grid-template-areas, damit das flache Markup (Bild, Ziffer, Titel, Text) unverändert bleibt. */ @media (max-width:1000px) and (min-width:561px){ .zeitstrahl{grid-template-columns:1fr;gap:0} .schritt{ display:grid; grid-template-columns:clamp(150px,30vw,260px) 1fr; grid-template-areas:"bild num" "bild titel" "bild text"; align-items:start; justify-items:start; column-gap:clamp(1.25rem,4vw,40px); row-gap:12px; padding:28px 0 4px; } .schritt .bild{grid-area:bild;align-self:center;margin:0} .schritt .num{grid-area:num} .schritt h3{grid-area:titel} .schritt p:not(.num){grid-area:text} } @media (max-width:760px){ .fuss-spalte{gap:0} .fuss-spalte a{min-height:44px;align-items:center} .raster,.zeitstrahl,.vertrauen-raster{grid-template-columns:1fr} .zusage,.zusage+.zusage{padding:24px 0} .reihe{flex-direction:column} .formular{padding:28px 22px} .angabe{flex-wrap:wrap;gap:12px} .angabe .schluessel{width:auto} .person{gap:20px} .person-bild{flex-basis:auto;padding:0 12px 12px 0} .person-bild img{width:148px;height:187px;box-shadow:12px 12px 0 0 var(--gelb)} .held-vor{font-size:17px} /* Kopf: Schalter statt Leiste. :target, kein Skript. */ .kopf{gap:.75rem;padding:14px var(--rand)} .marke img{width:124px;height:36px} .kopf-tat{flex:none} .kopf-tat .knopf{display:none} /* .kopf-nav vor .kopf-zu, weil die Basisregel es mit (0,2,0) ausblendet. Ein Medienblock erhoeht die Spezifitaet nicht — ohne das hier fehlt das Schliesskreuz im Overlay. */ .kopf-schalter,.kopf-nav .kopf-zu{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;color:var(--tinte);text-decoration:none; } .kopf-schalter svg,.kopf-zu svg{width:22px;height:22px} .kopf-nav{ position:fixed;inset:0;z-index:250;overflow-y:auto; flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; padding:72px var(--rand) var(--rand);background:var(--papier); visibility:hidden;opacity:0;transition:opacity .16s,visibility .16s; } .kopf-nav:target{visibility:visible;opacity:1} .kopf-nav a{min-height:52px;font-size:1.125rem;font-family:var(--serif);color:var(--text);border-bottom:1px solid var(--linie)} /* Dasselbe Markup flach: Schalter weg, Feld immer offen, zwei Gruppen. Autoren-CSS schlaegt die Darstellungsregel des Browsers, die den Inhalt eines geschlossenen
verbirgt — deshalb genuegt display:block ohne !important. content-visibility deckt die neueren Fassungen mit ab. */ .klapp{position:static;width:100%} .klapp-box, .kopf-nav .klapp-schalter, .klapp-fang, .kopf:has(.klapp-box:checked) .klapp-fang{display:none} /* Hier ist das Feld immer offen — der Zustand :target spielt keine Rolle. */ .klapp-feld{ position:static; width:auto; min-width:0; padding:0; background:none; border:0; box-shadow:none; visibility:visible; opacity:1; } .klapp-gruppe{ display:block; margin:0; padding:1.5rem 0 .4rem; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mono); } /* Das Raster loest sich auf, damit die Punkte wieder direkte Kinder des Feldes sind und die Liste aussieht wie zuvor. */ .klapp-raster{display:contents} .kopf-nav .klapp-punkt{ min-height:52px; padding:0; white-space:normal; font-family:var(--serif); font-size:1.125rem; color:var(--text); border-bottom:1px solid var(--linie); } .kopf-nav .klapp-punkt[aria-current="page"]{ box-shadow:none; border-bottom-color:var(--gelb); } /* Uebergangsband: eine Spalte. Der Abstand ist in beiden Achsen gleich, der Umbruch daher ohne Sprung. */ .weiter-liste{grid-template-columns:1fr} .kopf-nav .knopf{display:inline-flex;margin-top:1.5rem;justify-content:center; border-bottom:0;color:var(--text-hell);font-family:var(--sans);font-size:15px} .kopf-nav .kopf-zu{position:absolute;top:14px;right:var(--rand);border-bottom:0} } @media (max-width:560px){ /* Gestapelt nimmt die Illustration sonst 360 px Hoehe vor drei Zeilen Text. */ .schritt .bild{max-width:320px} /* Nebeneinander blieben fuer den Text rund 300 px — "Viktor Groß-Hardt" brach dort am Bindestrich um. */ .person{flex-direction:column;gap:18px} .person-bild{flex-basis:auto} .formular-kopf{flex-direction:column;align-items:flex-start;gap:10px} } @media (max-width:480px){ /* Zwei verschieden breite Knoepfe untereinander wirken wie ein Versehen. */ .held-tat{flex-direction:column;align-items:stretch} .held-tat .knopf{width:100%;justify-content:center} } @media (max-width:620px){ } @media (max-width:420px){ .held h1{font-size:2.1rem} .liste p{font-size:15.5px} .inhalt dl{grid-template-columns:1fr;gap:2px 0} .inhalt dt{padding-top:.8em} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} /* Wer weniger Bewegung eingestellt hat, meint auch diese: Eine Seite, die unter dem Finger wegfaehrt, ist fuer manche Menschen der Ausloeser fuer Schwindel und Uebelkeit. Gesprungen wird dann wieder. */ html{scroll-behavior:auto} } @media print{ /* Die Handlungsleiste ist am Bildschirm festgeheftet; auf Papier waere sie ein Knopf, den niemand druecken kann, und ihr Polster ein leerer Streifen unter jeder Seite. Die E-Mail-Adresse im Kontaktabschnitt bleibt stehen, der Weg zu uns geht also auch auf dem Ausdruck. */ .kopf,.sprung,.fuss-sozial,.formular,.tatleiste{display:none} body{font-size:11pt;padding-bottom:0} } /* ── Der Kopf faehrt aus ─────────────────────────────────────────────────── Breit ist das Feld kein schwebendes Kaestchen mehr, sondern eine zweite Zeile im Kopf: Die Leiste bleibt stehen, das Feld setzt sich darunter, und die Trennlinie des Kopfes wandert mit nach unten. Dafuer muessen Feld und Auslöser direkte Flex-Kinder von .kopf sein. Statt das Markup zu zerreissen — schmal braucht das Feld seinen Platz IN der Navigation, sonst faellt es aus dem Vollbild-Menue heraus — loesen sich .kopf-nav und .klapp hier zu display:contents auf. Die DOM-Verwandtschaft bleibt dabei unveraendert, weshalb alle Regeln mit .kopf-nav davor und das :has() am .klapp weiter greifen. Zum Landmarken-Einwand gegen display:contents auf einem