/* Rechtsseiten (Impressum, AGB). Corporate Design Hurtz Consulting, siehe DESIGN.md.
   Bewusst eigenstaendig statt im grossen _PAGE-Bundle: die Seiten sind oeffentlich
   und muessen ohne angemeldete Sitzung und ohne App-JavaScript lesbar sein.
   Die Farbwerte sind mit den Variablen in _PAGE abgeglichen - eine Kopie, kein
   Import, weil _PAGE nicht als Datei ausgeliefert wird. */
:root{
  color-scheme: light;
  --bg:#F4F1EA; --panel:#FFFFFF; --text:#1C1F24; --muted:#70747C;
  --border:rgba(17,20,24,.14); --border-soft:#DFD2B7;
  --champ:#B4985F; --head:#8A6F38; --link:#8A6F38;
  --notch-edge:rgba(138,111,56,.45); --notch-shadow:rgba(17,20,24,.14);
  --font-display:"Switzer","Inter",system-ui,sans-serif;
  --font-text:"Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* Dunkel. Gesetzt wird das Attribut vom Kopf-Skript der Seite aus dem
   gleichen localStorage-Schluessel, den der Umschalter in ERICH pflegt. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#111418; --panel:#171B21; --text:#F4F1EA; --muted:#8A9099;
  --border:rgba(244,241,234,.16); --border-soft:#242B33;
  --champ:#B4985F; --head:#D5C49C; --link:#D5C49C;
  --notch-edge:rgba(213,196,156,.55); --notch-shadow:rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-text);
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  /* Platz fuer die Welle am unteren Rand, damit sie den Schluss nicht deckt. */
  padding-bottom:calc(46px + env(safe-area-inset-bottom,0px));
}
.wrap{max-width:820px; margin:0 auto; padding:32px 20px 64px}
header.top{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--border-soft); margin-bottom:28px;
}
.mark{font-family:var(--font-display); font-weight:700; letter-spacing:.14em; font-size:18px}
.mark-sub{font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
h1{font-family:var(--font-display); font-size:30px; line-height:1.2; margin:0 0 6px}
.lead{color:var(--muted); margin:0 0 32px}
h2{
  font-family:var(--font-display); font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--head); margin:34px 0 10px; padding-top:18px; border-top:1px solid var(--border);
}
h2:first-of-type{border-top:0; padding-top:0}
p{margin:0 0 12px}
ul{margin:0 0 12px; padding-left:20px}
li{margin:0 0 4px}
address{font-style:normal; margin:0 0 12px}
a{color:var(--link)}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px 22px;
}
footer.legal{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--border-soft);
  font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;
}
footer.legal a{text-decoration:none}
footer.legal a:hover{text-decoration:underline}

/* ── Welle: zurueck zu ERICH ───────────────────────────────────────────
   Dieselbe Form wie der App-Ordner-Griff in _PAGE (.m-notch), hier aber
   als Rueckweg statt als Oeffner. Ohne sie fuehrt von einer langen AGB-
   Seite nur der Fusszeilen-Link zurueck - der steht ganz unten. */
a.m-notch{
  position:fixed; left:50%; bottom:env(safe-area-inset-bottom,0px); z-index:60;
  display:block; width:132px; height:28px; transform:translateX(-50%);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 -4px 10px var(--notch-shadow));
}
/* Groessere Trefferflaeche als die sichtbare Welle - 28px Hoehe werden am
   Daumen sonst regelmaessig verfehlt. */
a.m-notch::after{content:""; position:absolute; inset:-12px -8px 0}
.m-notch .m-wave{
  position:absolute; inset:0; background:var(--panel);
  clip-path:path("M0 28C26 28 38 3 66 3S106 28 132 28Z");
}
.m-notch svg{position:absolute; inset:0; width:132px; height:28px; overflow:visible}
.m-notch .m-edge{fill:none; stroke:var(--notch-edge); stroke-width:1}
.m-notch .m-chev{
  fill:none; stroke:var(--champ); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:center; transition:transform .28s ease;
}
.m-notch:hover .m-chev,.m-notch:focus-visible .m-chev{transform:translateY(2px)}
.m-notch:active .m-wave{filter:brightness(1.08)}
.m-notch:focus-visible{outline:2px solid var(--champ); outline-offset:4px; border-radius:4px}

@media (prefers-reduced-motion: reduce){ .m-notch .m-chev{transition:none} }
@media (max-width:560px){ h1{font-size:24px} .wrap{padding:20px 16px 48px} }