/* ---------------------------------------------------------------
   Warum eigentlich? – Gestaltung für Impressum und Datenschutz
   Gleiche Farben und Schriften wie die Startseite, ruhigeres Layout
   --------------------------------------------------------------- */

:root{
  --nacht:#0b1f45; --nacht-tief:#061530; --auf-nacht:#eaf1fc; --auf-nacht-2:#a9c0e4;
  --gelb:#ffc81e; --rot:#d6202b;
  --grund:#f1f5fc; --flaeche:#ffffff; --tinte:#10233f; --tinte-2:#4a5c7d;
  --linie:#d4deee; --akzent:#1b57b5; --akzent-weich:#e8f0fd;
  --schatten:0 1px 2px rgba(16,35,63,.06), 0 12px 28px -12px rgba(16,35,63,.22);
  --breite:820px; --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#07162f; --flaeche:#0e2450; --tinte:#e9f0fb; --tinte-2:#a4bada;
    --linie:#1d3d73; --akzent:#74a9f5; --akzent-weich:#122c5c;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --grund:#07162f; --flaeche:#0e2450; --tinte:#e9f0fb; --tinte-2:#a4bada;
  --linie:#1d3d73; --akzent:#74a9f5; --akzent-weich:#122c5c;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font-family:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:var(--akzent); }
h1,h2{ font-family:"Fredoka","Segoe UI",system-ui,sans-serif; font-weight:600; margin:0; line-height:1.15; text-wrap:balance; }
h1{ font-size:clamp(2rem,4.5vw,2.75rem); margin:.6rem 0 1.5rem; }
h2{ font-size:1.15rem; margin-top:2.5rem; }
p{ margin:.75rem 0 0; }
ul{ margin:.75rem 0 0; padding-left:1.25rem; }
li{ margin-top:.35rem; }
.huelle{ width:min(100% - 2.5rem, var(--breite)); margin-inline:auto; }
:focus-visible{ outline:3px solid var(--gelb); outline-offset:3px; border-radius:6px; }

.kopf{ background:var(--nacht); border-bottom:1px solid rgba(255,255,255,.09); }
.kopf-innen{ display:flex; align-items:center; gap:1.5rem; padding:.7rem 0; }
.wortmarke{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--auf-nacht); font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.05rem; }
.wortmarke img{ width:38px; height:38px; border-radius:50%; }
.wortmarke b{ color:var(--gelb); font-weight:600; }
.zurueck{ margin-left:auto; color:var(--auf-nacht-2); text-decoration:none; font-size:.95rem; }
.zurueck:hover{ color:#fff; }

main{ padding:clamp(2.5rem,6vw,4.5rem) 0 4rem; }
.marke-label{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinte-2); }
.karte{ background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); box-shadow:var(--schatten); padding:clamp(1.5rem,4vw,2.5rem); }
.karte + .karte{ margin-top:1.5rem; }
.karte h2:first-child{ margin-top:0; }
.adresse{ font-style:normal; margin-top:.75rem; }
.stand{ margin-top:2rem; font-size:.9rem; color:var(--tinte-2); }
.platzhalter{ background:rgba(255,200,30,.28); border-bottom:2px solid var(--gelb); padding:0 .2em; border-radius:3px; }

.fuss{ background:var(--nacht-tief); color:var(--auf-nacht-2); padding:2rem 0; font-size:.9rem; }
.fuss-links{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.fuss a{ color:var(--auf-nacht-2); text-decoration:none; }
.fuss a:hover{ color:#fff; text-decoration:underline; }
.fuss-schluss{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem; color:#7d97bd; }

code{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.9em;
  background:var(--akzent-weich); color:var(--akzent);
  padding:.1em .4em; border-radius:5px;
}

/* ---------- Zurueck nach oben ---------- */
.nach-oben{
  position:fixed; z-index:50;
  right:clamp(.9rem,2.5vw,2rem); bottom:clamp(.9rem,2.5vw,2rem);
  width:52px; height:52px; border-radius:50%;
  background:var(--gelb); color:#20160a; border:0; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 4px 0 #e0a800, 0 10px 26px rgba(6,21,48,.35);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.nach-oben[data-sichtbar="ja"]{ opacity:1; visibility:visible; transform:translateY(0); }
.nach-oben:hover{ transform:translateY(-3px); box-shadow:0 7px 0 #e0a800, 0 14px 30px rgba(6,21,48,.4); }
.nach-oben:active{ transform:translateY(2px); box-shadow:0 1px 0 #e0a800; }
.nach-oben svg{ width:23px; height:23px; }
@media (prefers-reduced-motion: reduce){
  .nach-oben{ transition:opacity .01s, visibility .01s; transform:none; }
  .nach-oben:hover, .nach-oben:active{ transform:none; }
}

/* ---------- Soziale Netzwerke in der Fusszeile ---------- */
.fuss-sozial{ display:flex; gap:.6rem; margin:1.25rem 0 0; list-style:none; padding:0; }
.fuss-sozial a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:var(--auf-nacht-2); transition:transform .15s ease, background .15s ease, color .15s ease;
}
.fuss-sozial a:hover{ background:var(--gelb); border-color:var(--gelb); color:#20160a; transform:translateY(-2px); }
.fuss-sozial svg{ width:19px; height:19px; }
@media (prefers-reduced-motion: reduce){ .fuss-sozial a:hover{ transform:none; } }