/* ============================================================================
   Gemeinsames Aussehen der Textseiten (Impressum, Datenschutz).

   Die Startseite traegt ihr CSS inline, weil sie die Seite ist, auf die es beim
   ersten Eindruck ankommt und ein zweiter Abruf sie nur langsamer machte. Diese
   beiden hier werden selten gelesen und teilen sich deshalb eine Datei.

   Dieselben Farben und Radien wie die Startseite und wie das Produkt.

   ACHTUNG, DRITTE KOPIE. Dieselben vier Werte stehen in index.html und in
   app/web/colour.css. Beim Umstellen auf die braune Tinte (U-88) waren sie an
   ALLEN dreien von Hand nachzuziehen, und diese hier waere um ein Haar
   liegengeblieben — dann waeren Impressum und Datenschutz marineblau geblieben,
   waehrend die Startseite daneben braun ist. Wer die Palette das naechste Mal
   anfasst: es sind drei Stellen, und diese ist die, die man vergisst.
   ========================================================================= */

/* U-165: die Palette kommt aus colour.css (html.night), wie die Startseite
   und die App. Die dritte Kopie ist damit weg — hier stehen nur noch Radien
   und die Schrift. */
@font-face{font-family:"Roboto";src:url("/fonts/roboto.woff2") format("woff2");font-weight:100 900;font-display:swap;}
:root{
  --r-m:16px;
  --r-full:999px;
  --shadow:none;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
}

.wrap{ width:100%; max-width:760px; margin:0 auto; padding:0 24px; }

header{ height:68px; display:flex; align-items:center; border-bottom:1px solid var(--hair); }
header .wrap{ max-width:1180px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ font-weight:800; letter-spacing:-0.03em; font-size:18px; text-decoration:none; color:inherit; }
.brand span{ color:var(--muted); font-weight:650; }
.back{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  background:var(--raised); border-radius:var(--r-full);
  font-size:15px; font-weight:700; text-decoration:none; color:var(--ink);
}
.back:focus-visible{ outline:3px solid var(--fill); outline-offset:3px; }

main{ padding:clamp(40px, 7vw, 76px) 0 clamp(56px, 9vw, 96px); }

h1{ font-size:clamp(32px, 5.5vw, 46px); line-height:1.1; letter-spacing:-0.035em; font-weight:800; }
h2{ font-size:21px; line-height:1.25; letter-spacing:-0.02em; font-weight:750; margin-top:38px; }
h2:first-of-type{ margin-top:30px; }
p{ margin-top:12px; }
p.lead{ font-size:19px; color:var(--muted); margin-top:16px; }
ul{ margin-top:12px; padding-left:20px; }
li{ margin-top:6px; }
a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

.card{
  background:var(--surface); border:0;
  border-radius:var(--r-m); padding:20px 22px; box-shadow:var(--shadow);
  margin-top:16px;
}
.card p:first-child{ margin-top:0; }

/* Was noch von Damian kommen muss. Sichtbar, damit es niemandem entgeht, und
   ausdruecklich beschriftet, damit es nicht fuer eine Angabe gehalten wird. */
.todo{
  background:var(--wash-warn); border:0; color:var(--wash-warn-ink);
  border-radius:var(--r-m); padding:16px 18px; margin-top:16px;
  font-size:15.5px; line-height:1.5;
}
.todo b{ display:block; margin-bottom:4px; }
.slot{
  display:inline-block; background:rgba(122,74,10,.12); border-radius:6px;
  padding:1px 7px; font-weight:700;
}

footer{ border-top:1px solid var(--hair); padding:28px 0 40px; color:var(--muted); font-size:14.5px; }
footer .wrap{ max-width:1180px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }

@media (max-width:520px){
  .wrap{ padding:0 18px; }
}