/* ============================================================================ seite-recht — aus impressum.html des statischen Standes Automatisch extrahiert (_work/theme-css-extrakt.mjs), inhaltlich unveraendert. Einzige Aenderung: Bildpfade zeigen auf das Theme-Verzeichnis. ========================================================================= */ .page-hero { position: relative; padding: 160px 0 64px; overflow: hidden; isolation: isolate; } .page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(225,6,0,.15), transparent 60%), linear-gradient(180deg, #050505, var(--bg-base-2)); } .page-hero h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(56px, 9vw, 128px); line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase; margin: 24px 0; } .page-hero h1 .accent { color: var(--red); } .crumbs { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 16px; } /* Klickflaeche auf 24px (WCAG 2.2 Zielgroesse) — das negative Margin haelt die Zeilenhoehe unveraendert, optisch aendert sich nichts. */ .crumbs a { color: var(--text-secondary); padding: 4px 0; margin: -4px 0; } .crumbs .sep { color: var(--red-bright); } .legal-layout { display: grid; gap: 56px; grid-template-columns: 1fr; } @media (min-width: 1024px) { .legal-layout { grid-template-columns: 240px 1fr; gap: 72px; align-items: start; } } .toc { position: sticky; top: 100px; padding: 24px 20px; background: linear-gradient(180deg, var(--surface-1), var(--surface-2)); border: 1px solid var(--border-1); border-radius: var(--r-lg); } .toc .toc-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .toc ul { list-style: none; padding: 0; } /* Zielgroesse: der Link traegt das Polster jetzt selbst (vorher lag es am
  • , der Link war 31 px hoch). Die Summe je Zeile bleibt dieselbe, die Textpositionen verschieben sich um max. 1 px — die Trefferflaeche steigt von 31 auf 44 px. */ .toc li { padding: 0; } .toc a { color: var(--text-secondary); font-size: 13.5px; transition: color .2s; display: block; padding: 10.5px 0; border-left: 2px solid transparent; padding-left: 12px; margin-left: -12px; } .toc a:hover, .toc a.is-active { color: var(--red-bright); border-left-color: var(--red); } .legal-content h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; /* line-height war 0.92: bei "GESCHÄFTSBEDINGUNGEN" in Zeile 2 stiessen die Umlaut-Punkte in die Zeile darueber (auf 390 UND 1440 gemessen). 1.06 haelt die Punkte frei; einzeilige Ueberschriften wachsen dadurch nur um ~10px. */ font-size: clamp(40px, 5vw, 72px); line-height: 1.06; letter-spacing: -0.03em; text-transform: uppercase; /* Trennung siehe Media-Query unterhalb dieser Regel. */ margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-red); /* Sprungziel der Inhalts-Links: ohne das landet die Ueberschrift unter der festen Leiste (gemessen: top 0 bei 89px Navhoehe). */ scroll-margin-top: 104px; } @media (min-width: 1024px) { .legal-content h2 { scroll-margin-top: 116px; } } /* WCAG 1.4.10 (Reflow): "DATENSCHUTZERKLÄRUNG" ist EIN Wort und bei der clamp-Untergrenze von 40 px genau 342 px breit. Ab 390 px Fensterbreite passt das exakt in die Spalte — darunter nicht, und das eine Wort schob die ganze Seite auf 366 px (gemessen bei 320 px: waagerechtes Scrollen auf der ganzen Seite). `hyphens: auto` trennt es woerterbuchgestuetzt ( ist Voraussetzung und gesetzt), `anywhere` ist der Notnagel fuer Browser ohne deutsches Woerterbuch. BEWUSST nur unter 390 px: dort, wo es passt, soll die Ueberschrift ungetrennt in einer Zeile stehen — ohne die Grenze trennte Chrome auch bei 390 px und machte aus einer Zeile zwei (gemessen 59 -> 102 px). */ @media (max-width: 389px) { .legal-content h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; } } .legal-content h2:not(:first-child) { margin-top: 96px; } .legal-content h3 { font-family: var(--font-display); font-style: italic; font-size: 28px; letter-spacing: -0.02em; text-transform: uppercase; margin: 40px 0 12px; } /* Label-Zwischenzeilen im Impressum: sehen aus wie zuvor die h4, sind aber h3 — sonst sprang die Gliederung von h2 auf h4. */ .legal-content h3.lbl { font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-bright); margin: 28px 0 10px; } .legal-content p { color: var(--text-secondary); font-size: 15px; line-height: 1.8; margin-bottom: 16px; max-width: 72ch; } .legal-content ul, .legal-content ol { color: var(--text-secondary); font-size: 15px; line-height: 1.8; margin: 0 0 16px 24px; max-width: 70ch; } .legal-content li { margin-bottom: 6px; } .legal-content strong { color: var(--text-primary); } /* Die ODR-URL steht ungekuerzt im Text und ist laenger als die Spalte bei 320 px — ohne Umbruch schiebt sie die ganze Seite waagerecht auf. `anywhere` bricht sie notfalls mitten im Wort; bei allen anderen Links greift die Regel nie, weil sie vorher passen. Das senkrechte Polster vergroessert die Trefferflaeche der Inline-Links auf ueber 44 px, ohne die Zeilenhoehe zu aendern (Padding an einem Inline- Element verschiebt keine Zeilenboxen). */ .legal-content a { color: var(--red-bright); overflow-wrap: anywhere; padding: 13px 0; } .legal-content a:hover { text-decoration: underline; } .kv { display: grid; gap: 8px 24px; grid-template-columns: max-content 1fr; padding: 24px; background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--r-md); font-size: 14.5px; margin-bottom: 24px; } .kv dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); align-self: center; } .kv dd { color: var(--text-primary); }