/* pages.css — Unterseiten (Privacy, Support, Imprint).
   Dieselbe Lagune-Palette wie die Startseite, aber ruhiger gesetzt:
   Das hier sind Lesedokumente, keine Bühne. Der Petrol-Verlauf bleibt
   als Rahmen, der Textkörper steht auf einer eigenen, dunkleren Fläche
   mit ruhigem Zeilenmaß. */

@font-face{font-family:'Lilita One';src:url('/fonts/LilitaOne-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken';src:url('/fonts/HankenGrotesk-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken';src:url('/fonts/HankenGrotesk-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

:root{
  --bg-top:#14B0A2; --bg-bottom:#0A6E80;
  --surface:#0B5A6C; --surface-hi:#14808E; --surface-deep:#07404E;
  --primary:#FF6B4A; --primary-deep:#C94427;
  --sun:#FFC531; --rival:#35D0FF;
  --outline:#063540; --text-dim:#C8F0EA;
  --display:'Lilita One',system-ui,sans-serif;
  --body:'Hanken',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:#fff;
  background:var(--bg-bottom);
  background-image:linear-gradient(180deg,var(--bg-top),var(--bg-bottom) 55%);
  background-attachment:fixed;
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

/* ---- Kopfleiste ---- */
.bar{
  position:relative; z-index:2;
  width:min(880px,100% - 2.5rem); margin-inline:auto;
  padding-block:1.5rem 1.25rem;
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.bar a.home{
  display:flex; align-items:center; gap:.7rem;
  color:#fff; text-decoration:none;
}
.bar .home>img{width:48px; height:48px; object-fit:contain; display:block}
.bar .mm{--w:36px}
.bar .home{min-height:52px}
.bar .mark{
  font-family:var(--display); font-size:1.5rem; letter-spacing:.03em;
  text-shadow:
    2px 0 var(--outline), -2px 0 var(--outline),
    0 2px var(--outline), 0 -2px var(--outline),
    1.5px 1.5px var(--outline), -1.5px 1.5px var(--outline),
    1.5px -1.5px var(--outline), -1.5px -1.5px var(--outline);
}
.bar nav{display:flex; gap:1.1rem; margin-left:auto; flex-wrap:wrap}
/* Social-Gruppe: eigenes nav, deshalb kein margin-left:auto — sie hängt
   sich rechts an die Seiten-Navigation an. */
.bar nav.social{margin-left:.4rem; gap:.35rem}
.bar nav a{
  color:var(--text-dim); text-decoration:none; font-size:.9rem;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.bar nav a:hover,.bar nav a:focus-visible{color:#fff; border-bottom-color:var(--sun)}
.bar nav a[aria-current]{color:#fff; border-bottom-color:var(--primary)}

/* Social-Icons oben rechts (gleiche Optik wie auf der Startseite). */
.social a{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:11px; border-bottom:0 !important; color:#fff;
  background:rgba(255,255,255,.12);
  border:2px solid var(--outline);
  transition:transform .12s ease, background .12s ease;
}
.social a:hover,.social a:focus-visible{
  background:var(--primary); transform:translateY(-2px);
  border-bottom:0 !important;
}
.social a:focus-visible{outline:2px solid var(--sun); outline-offset:2px}
.social svg{
  width:19px; height:19px; fill:currentColor; display:block;
  filter:drop-shadow(0 1px 0 rgba(6,53,64,.5));
}

/* Handy: Kopf umbricht, Wortmarke links, Navigation und Icons darunter. */
@media(max-width:560px){
  .bar{gap:.6rem}
  .bar nav{font-size:.85rem; gap:.9rem}
  .bar nav.social{margin-left:auto}
}

/* ---- Textkörper ---- */
.sheet{
  position:relative; z-index:1; flex:1;
  width:min(880px,100% - 2.5rem); margin-inline:auto;
  background:var(--surface);
  border:3px solid var(--outline); border-radius:22px;
  box-shadow:0 8px 0 var(--surface-deep), 0 8px 0 3px var(--outline);
  padding:clamp(1.5rem,4vw,2.75rem);
  margin-bottom:2.5rem;
}

h1{
  font-family:var(--display); font-weight:400; font-size:clamp(2rem,5vw,2.9rem);
  line-height:1.05; letter-spacing:.01em; margin:0 0 .4rem;
  text-transform:uppercase; text-wrap:balance;
}
.sub{color:var(--text-dim); font-size:.95rem; margin:0 0 2rem}
.sub .sep{opacity:.5; padding-inline:.45rem}

h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.4rem); letter-spacing:.02em;
  margin:2.4rem 0 .7rem; text-transform:uppercase;
  padding-top:1.4rem; border-top:2px solid rgba(6,53,64,.35);
}
h2:first-of-type{border-top:0; padding-top:0; margin-top:1.6rem}
h2 .num{color:var(--sun); margin-right:.5rem}

h3{font-size:1.02rem; font-weight:500; margin:1.5rem 0 .4rem; color:var(--sun)}

p{margin:0 0 1rem; max-width:68ch}
ul{margin:0 0 1rem; padding-left:1.2rem; max-width:68ch}
li{margin-bottom:.45rem}
strong{font-weight:500; color:#fff}

a{color:var(--rival); text-decoration:none; border-bottom:1px solid rgba(53,208,255,.4)}
a:hover,a:focus-visible{color:#fff; border-bottom-color:#fff}

/* Adressblock und andere feste Zeilen */
address{font-style:normal; margin:0 0 1rem; line-height:1.75}

/* Hervorgehobener Kasten (Zusammenfassung, wichtiger Hinweis) */
.box{
  background:var(--surface-deep); border:2px solid var(--outline);
  border-radius:14px; padding:1.1rem 1.25rem; margin:0 0 1.75rem;
}
.box p:last-child{margin-bottom:0}

/* Inhaltsverzeichnis */
.toc{
  background:var(--surface-deep); border:2px solid var(--outline);
  border-radius:14px; padding:1.1rem 1.25rem; margin:0 0 2rem;
}
.toc-label{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  margin:0 0 .7rem;
}
.toc ol{
  margin:0; padding:0; list-style:none;
  counter-reset:toc;
  /* Spaltenweise statt zeilenweise: Ein Grid ordnet 1,2,3 nebeneinander
     an — beim Ueberfliegen liest sich das wie eine falsche Reihenfolge.
     Mit columns laeuft die Nummerierung untereinander weiter. */
  columns:2; column-gap:2rem;
}
@media(max-width:640px){ .toc ol{columns:1} }
.toc li{margin:0; counter-increment:toc}
.toc a{
  border-bottom:0; color:var(--text-dim); font-size:.92rem;
  display:flex; gap:.5rem;
}
.toc a::before{content:"§ " counter(toc); color:var(--sun); flex:none; min-width:2.2rem}
.toc a:hover,.toc a:focus-visible{color:#fff}

/* Sprachumschalter auf der Datenschutzseite */
.lang{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--primary); color:#fff;
  border:2px solid var(--outline); border-radius:99px;
  padding:.45rem 1rem; margin-bottom:1.75rem;
  box-shadow:0 3px 0 var(--primary-deep), 0 3px 0 2px var(--outline);
}
.lang:hover,.lang:focus-visible{color:#fff; filter:brightness(1.07)}

/* Support-Fragen */
.faq{display:grid; gap:1rem; margin-bottom:1.5rem}
.faq-item{
  background:var(--surface-deep); border:2px solid var(--outline);
  border-radius:14px; padding:1.1rem 1.25rem;
}
.faq-item h3{margin-top:0}
.faq-item p:last-child{margin-bottom:0}

.mailto{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-size:1.05rem; letter-spacing:.02em;
  color:#fff; text-decoration:none; border-bottom:0; text-transform:uppercase;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.05) 35%, transparent 50%),
    linear-gradient(180deg, var(--primary) 0%, var(--primary) 55%, rgba(201,68,39,.55) 100%);
  border:3px solid var(--outline); border-radius:14px;
  padding:.75rem 1.3rem; margin-bottom:.5rem;
  box-shadow:0 5px 0 var(--primary-deep), 0 5px 0 3px var(--outline);
  text-shadow:1.5px 1.5px 0 rgba(6,53,64,.85);
}
.mailto:active{transform:translateY(5px); box-shadow:0 0 0 var(--primary-deep), 0 0 0 3px var(--outline)}
.mailto:focus-visible{outline:3px solid var(--sun); outline-offset:3px}

/* ---- Fuß ---- */
.foot{
  position:relative; z-index:1;
  border-top:2px solid rgba(6,53,64,.35);
  padding-block:1.4rem;
}
.foot-in{
  width:min(880px,100% - 2.5rem); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  align-items:center; justify-content:center;
  font-size:.85rem; color:var(--text-dim);
}
.foot a{color:var(--text-dim); border-bottom:1px solid transparent}
.foot a:hover,.foot a:focus-visible{color:#fff; border-bottom-color:var(--sun)}
.foot-links{display:flex; flex-wrap:wrap; gap:1.2rem}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}