/* Fan Point Kassel – gemeinsames Stylesheet fuer Textseiten (Impressum, Datenschutz)
   Farb- und Typo-System identisch zu index.html. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { font-family: 'Barlow', sans-serif; background: var(--off-white); color: var(--dark); overflow-x: hidden; }

/* Kopfbereich kommt jetzt aus assets/kopf.css */

/* ── HERO ───────────────────────────────────────── */
.page-hero { background:var(--dark); padding:3.5rem 0 4.5rem; position:relative; overflow:hidden; }
.page-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(78,114,20,0.2) 0%, transparent 65%); }
.page-hero-inner { position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:0 2rem; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; }
.breadcrumb a:hover { color: var(--gruen); }
.breadcrumb span { color: var(--gruen); }
.page-label { display: flex; align-items: center; gap: 0.75rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gruen); margin-bottom: 1rem; }
.page-label::before { content: ''; background: var(--gruen); width: 32px; height: 2px; display: block; }
.page-titel { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(2.5rem,7vw,5rem); text-transform:uppercase; line-height:.92; color:#fff; }
.page-sub { color: rgba(255,255,255,0.55); font-size: 1rem; margin-top: 1rem; max-width: 620px; }

/* ── INHALT ─────────────────────────────────────── */
.text-wrap { max-width: 900px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.text-inhalt { font-size: 1rem; line-height: 1.75; color: #333; }
.text-inhalt h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.75rem; text-transform: uppercase; color: var(--dark); margin: 3rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--grau-hell); }
.text-inhalt h2:first-child { margin-top: 0; }
/* Lange Rechtswoerter wie "Verbraucherstreitbeilegung" sind bei 320 px
   breiter als der Schirm. Silbentrennung (lang="de" steht im <html>),
   und wenn die nicht greift, notfalls hart umbrechen. */
.text-inhalt h2, .text-inhalt h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.text-inhalt h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; color: var(--dark); margin: 2rem 0 0.6rem; }
.text-inhalt p { margin-bottom: 1.1rem; }
.text-inhalt ul { margin: 0 0 1.1rem 1.5rem; }
.text-inhalt li { margin-bottom: 0.4rem; }
.text-inhalt a { color: var(--gruen-dunkel); }
.text-inhalt strong { color: var(--dark); }

/* Adress-/Datenblock */
.datenblock { background: var(--weiss); border-left: 3px solid var(--gruen); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.datenblock p { margin-bottom: 0.25rem; }
.datenblock p:last-child { margin-bottom: 0; }

/* Hinweis fuer noch offene Angaben (nur im Dev-Bau sichtbar) */
.todo { background: #fff8e0; border-left: 3px solid #d4a020; padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; font-size: 0.92rem; }
.todo strong { color: #8a6500; }

/* Inhaltsverzeichnis */
.toc { background: var(--weiss); padding: 1.5rem 1.75rem; margin-bottom: 2.5rem; border: 1px solid var(--grau-hell); }
.toc div { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grau-mittel); margin-bottom: 0.75rem; }
.toc ol { margin-left: 1.2rem; font-size: 0.95rem; }
.toc li { margin-bottom: 0.3rem; }
.toc a { color: var(--gruen-dunkel); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.stand { font-size: 0.85rem; color: var(--grau-mittel); margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--grau-hell); }

.back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen-dunkel); text-decoration: none; margin-bottom: 2.5rem; }
.back-link::before { content: '←'; }
.back-link:hover { text-decoration: underline; }

/* Fussbereich kommt aus assets/kopf.css */

@media (max-width: 600px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100px; left: 0; right: 0; background: var(--dark); padding: 1rem 2rem 2rem; gap: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0; }
  .nav-toggle { display: flex; }
  .page-hero { padding: 7rem 1.25rem 3rem; }
  .text-wrap { padding: 2.5rem 1.25rem 4rem; }
}

/* Schmale Schirme: derselbe Rand wie bei den Kopf- und Fussleisten. */
@media (max-width:1000px) {
  .page-hero-inner { padding:0 1.25rem; }
}