/** * Rechtsseiten-Stylesheet * Für: Impressum, Datenschutzerklärung & AGB * * Pfad: css/pages/legal-pages.css * * Ersetzt die vormals getrennten Dateien agb.css und legal.css. * Alle drei Seiten nutzen dasselbe "Einbox"-Layout (ein durchgehender * .agb-box-Container pro Seite) und teilen sich daher ein Stylesheet. * * Wird ausschließlich von den drei Rechtsseiten eingebunden (nicht Teil * von main.css), da die Regeln sonst unnötig auf jeder Seite der Website * mitgeladen würden. */ /* ==================== PAGE TITLE ==================== */ /* .page-title liegt zentral in components/sections.css. */ /* ==================== INTRO-TEXT ==================== */ /* Kurzer einleitender Absatz direkt unter dem Seitentitel (AGB, Datenschutz) */ .legal-intro { text-align: center; color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); } /* ==================== BOX ==================== */ .agb-box { background: var(--gradient-dark); border: var(--border-width-medium) solid var(--border-color-default); border-radius: var(--border-radius-md); box-shadow: var(--shadow-glow-white); /* Garantiertes margin oben/unten von 1rem, bei jeder Breite - gleiches Prinzip wie bei .page-title (sections.css): .container's eigenes padding-top/-bottom läuft auf sehr schmalen Screens bewusst auf 0 (für Seiten MIT Hero-Bild korrekt). Diese Box hat aber kein eigenes margin und lag dadurch direkt an Navigation/Footer an. Ursprünglich clamp(1rem, 4vw, 2rem) - Desktop-Wert auf Wunsch halbiert (2rem -> 1rem), Mobile-Wert war bereits 1rem und passte, dadurch vereinfacht sich die Formel zu einem festen Wert. */ margin: 1rem 0; /* Fluid statt starrer 2-Stufen-Kaskade (48px/64px Desktop, 32px/24px ≤768px). Asymmetrie horizontal>vertikal bewusst beibehalten (wirkt beabsichtigt, mehr Luft links/rechts für Lesbarkeit von Rechtstext). Desktop-Maxima unverändert. Grenzwerte referenzieren die Projekt- Spacing-Skala (Fluid-Design-Audit Kategorie B2/B3). */ /* Vertikales Padding aufgeteilt: padding-top separat von padding-bottom, da der Titel-zu-Rand-Abstand (padding-top + .page-title's eigenes margin-top, siehe dort) auf Wunsch halbiert wurde - padding-bottom (Abstand letzter Inhalt zum unteren Rand) bleibt bewusst unverändert bei der ursprünglichen Formel. */ padding-top: clamp(0.75rem, 3vw, 1.5rem); padding-bottom: clamp(var(--spacing-md), 6vw, var(--spacing-xl)); padding-left: clamp(var(--spacing-md), 8vw, var(--spacing-2xl)); padding-right: clamp(var(--spacing-md), 8vw, var(--spacing-2xl)); } /* .page-title innerhalb der Box: eigenes margin-top halbiert (Original- Formel clamp(1rem, 4vw, 2rem) in sections.css, dort für Seiten OHNE Box wie Kontakt unverändert belassen - hier gezielt überschrieben, da der Titel-zu-Rand-Abstand explizit nur im Box-Kontext (AGB/ Datenschutz/Impressum) halbiert werden sollte). */ .agb-box .page-title { margin-top: clamp(0.5rem, 2vw, 1rem); /* Echte Silbentrennung statt willkürlichem Wortumbruch - verhindert, dass lange, unteilbare Wörter (z.B. "Datenschutzerklärung") über die Box hinauslaufen. Gezielt nur hier (Legal-Seiten) ergänzt, nicht in der global geteilten .page-title-Basisregel (sections.css) - betrifft dadurch nicht Kontakt/404. hyphens:auto trennt an sinnvollen Silbengrenzen (nutzt das lang-Attribut auf , bei uns bereits dynamisch gesetzt). overflow-wrap:break-word bleibt als Sicherheitsnetz für den seltenen Fall, dass der Browser keine Trennstelle findet. */ hyphens: auto; overflow-wrap: break-word; } /* ==================== TYPOGRAPHY ==================== */ .agb-box h2 { font-size: var(--font-size-3xl); color: var(--color-primary); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); background-image: linear-gradient( to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100% ); background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom; } /* Abstand vor neuen Abschnitten innerhalb der durchgehenden Box */ .agb-box h2 { margin-top: var(--spacing-3xl); } .agb-box h2:first-of-type { margin-top: var(--spacing-lg); } .agb-box h3 { font-size: var(--font-size-xl); color: var(--color-text-primary); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); } .agb-box h3:first-child { margin-top: var(--spacing-md); } .agb-box p { color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); margin-bottom: var(--spacing-sm); } .agb-box p:last-child { margin-bottom: 0; } .agb-box ul { color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg); } .agb-box ul li { margin-bottom: var(--spacing-xs); } .agb-box a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-base); /* Verhindert Überlauf bei langen, unverlinkt zusammenhängenden Zeichenketten wie URLs - bricht bei Bedarf auch mitten in der Zeichenkette, statt über den Rand hinauszulaufen. */ overflow-wrap: anywhere; } .agb-box a:hover { color: var(--color-text-primary); text-decoration: underline; } .agb-box strong { color: var(--color-text-primary); } /* ==================== KONTAKT-/ADRESSBLÖCKE ==================== */ /* Gruppierte Adress-/Kontaktangaben (Impressum, Datenschutz). Kein eigener Kasten mehr (kein Hintergrund/Rahmen) - liegt bereits innerhalb der äußeren .agb-box, ein zusätzlicher Kasten wirkt doppelt. */ .contact-block { margin: var(--spacing-md) 0; } .contact-block strong { color: var(--color-primary); } /* ==================== BILDNACHWEISE ==================== */ /* Fotografen-Zeilen ohne Absatz-Abstand zwischeneinander - eigene Klasse statt .contact-block, da inhaltlich/semantisch etwas anderes (Fotografen-Credits statt Kontaktdaten). */ .photo-credits-block { margin: var(--spacing-md) 0; } .photo-credits-block p { margin: 0; } /* ==================== LAST-UPDATED-HINWEIS ==================== */ .last-updated { margin-top: var(--spacing-2xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-gray-500); font-size: var(--font-size-sm); color: var(--color-gray-300); text-align: center; } /* ==================== RESPONSIVE ==================== */