/* ============================================================
   Gemeinsames Design fuer die Rechtsseiten (Impressum, AGB,
   Datenschutz). Gleiches Farbschema wie index.html, aber ein
   ruhiger, gut lesbarer Lese-Hintergrund ohne Ablenkung.
   ============================================================ */
:root{
  --teal:      #01C198;
  --teal-bright:#1fe3ba;
  --bg:        #07100E;
  --bg-card:   #0e1c18;
  --line:      #1c2e29;
  --text:      #ffffff;
  --muted:     #9fb3ad;
  --maxw:      820px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding:0 0 80px;
}

/* Kopfzeile mit Logo + Zurueck-Link */
.legal-top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 22px;
  background:rgba(7,16,14,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.legal-top img{ height:30px; width:auto; display:block; }
.legal-top a.back{
  color:var(--teal-bright); text-decoration:none; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:7px;
}
.legal-top a.back:hover{ text-decoration:underline; }

/* Inhaltsbereich */
.legal-wrap{ max-width:var(--maxw); margin:0 auto; padding:34px 22px 0; }
.legal-wrap h1{
  font-size:30px; line-height:1.2; margin-bottom:6px; letter-spacing:.3px;
}
.legal-wrap h1 span{ color:var(--teal); }
.legal-wrap .updated{ color:var(--muted); font-size:13px; margin-bottom:28px; }

.legal-wrap h2{
  font-size:20px; margin:34px 0 10px; color:#fff;
  padding-top:18px; border-top:1px solid var(--line);
}
.legal-wrap h3{ font-size:16px; margin:22px 0 8px; color:var(--teal-bright); }
.legal-wrap p{ margin:0 0 14px; color:#e6efec; font-size:15px; }
.legal-wrap ul, .legal-wrap ol{ margin:0 0 16px; padding-left:22px; color:#e6efec; font-size:15px; }
.legal-wrap li{ margin-bottom:7px; }
.legal-wrap a{ color:var(--teal-bright); }
.legal-wrap strong{ color:#fff; }
.legal-wrap .muted{ color:var(--muted); font-size:13.5px; }

/* Karten-Block fuer wichtige Kontaktangaben / Hinweise */
.legal-card{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; margin:0 0 18px;
}

/* Platzhalter, die der Betreiber / Anwalt ausfuellen muss.
   Faellt bewusst gelb auf, damit nichts uebersehen wird. */
.ph{
  background:rgba(255,214,0,.16); color:#ffe07a;
  border:1px dashed rgba(255,214,0,.5); border-radius:5px;
  padding:1px 6px; font-weight:600; font-size:.95em;
  /* Lange Platzhalter sollen umbrechen, damit sie das Layout nicht sprengen */
  white-space:normal; overflow-wrap:anywhere;
}

/* Deutlicher Warnhinweis am Seitenkopf (nur zur internen Info) */
.legal-note{
  max-width:var(--maxw); margin:18px auto 0; padding:14px 18px;
  background:rgba(255,214,0,.10); border:1px solid rgba(255,214,0,.4);
  border-radius:12px; color:#ffe07a; font-size:13.5px; line-height:1.6;
}

/* Fusszeile mit Querverweisen zwischen den Rechtsseiten */
.legal-foot{
  max-width:var(--maxw); margin:46px auto 0; padding:22px;
  border-top:1px solid var(--line); text-align:center;
}
.legal-foot a{ color:var(--teal-bright); text-decoration:none; margin:0 10px; font-size:14px; }
.legal-foot a:hover{ text-decoration:underline; }
.legal-foot .age{
  display:inline-block; margin-bottom:10px; font-weight:800; font-size:12px;
  color:#04231c; background:var(--teal); border-radius:6px; padding:3px 8px;
}
.legal-foot p{ color:var(--muted); font-size:12px; margin-top:10px; }

@media (max-width:560px){
  .legal-wrap h1{ font-size:25px; }
  .legal-wrap h2{ font-size:18px; }
}