/* Gemeinsames Stylesheet der Rechts-/Hilfeseiten (Datenschutz, Impressum, Support).
   Register „fuer Eltern" aus DESIGNSPRACHE.md: Paper-Hintergrund, runde Formen, weiche
   warme Schatten, keine Verlaeufe, kein Dark Mode. Ruhiger als die Landingpage — diese
   Seiten werden gelesen, nicht ueberflogen. */

:root{
  --sock-orange:#FF8A25; --sock-deep:#FA6A14;
  --paper:#FCE7CB; --canvas:#FFFFFF;
  --ink:#1A1A1A; --graphite:#404040;
  --hairline:rgba(26,26,26,.10);
  --maxw:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px; line-height:1.65;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* Kopf: App-Icon + Name fuehren zurueck zur Startseite. */
header{padding:26px 0 0}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand img{width:40px;height:40px;border-radius:10px;display:block}
.brand span{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;color:var(--ink)}

main{padding:26px 0 10px}

.card{
  background:var(--canvas);border-radius:22px;padding:34px 30px;
  box-shadow:0 12px 26px rgba(120,80,30,.14),0 3px 8px rgba(0,0,0,.05);
}

h1{
  font-family:'Baloo 2',sans-serif;font-weight:700;line-height:1.15;
  font-size:clamp(26px,4.4vw,34px);color:var(--sock-deep);
  margin:0 0 6px;text-wrap:balance;
}
.sub{color:var(--graphite);font-size:15px;margin:0 0 26px}

h2{
  font-family:'Baloo 2',sans-serif;font-weight:700;line-height:1.2;
  font-size:clamp(19px,2.6vw,22px);color:var(--ink);
  margin:30px 0 8px;text-wrap:balance;
}
h2:first-of-type{margin-top:6px}

h3{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:17px;color:var(--ink);margin:20px 0 3px}

p{margin:0 0 12px}
ul{margin:0 0 12px;padding-left:22px}
li{margin:0 0 5px}
a{color:var(--sock-deep);text-underline-offset:3px}
a:hover{color:var(--sock-orange)}
strong{font-weight:700}

/* Hervorgehobener Block fuer Anschrift und Kontakt. */
.box{
  background:#FFF7E8;border:1px solid var(--hairline);border-radius:14px;
  padding:16px 18px;margin:0 0 14px;
}
.box p{margin:0}
.box .label{font-size:13px;color:var(--graphite);margin-bottom:4px}

/* Fuer Adressen: Zeilenumbrueche des Quelltexts erhalten. */
address{font-style:normal;white-space:pre-line}

hr{border:0;border-top:1px solid var(--hairline);margin:26px 0}

/* Verarbeitungs-Tabelle: ersetzt Fliesstext durch Pflichtangaben in Rasterform.
   Auf schmalen Schirmen horizontal scrollbar, damit die Seite nie seitlich laeuft. */
.tbl{overflow-x:auto;margin:0 0 14px}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--hairline)}
th{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:14px;color:var(--graphite);
  background:#FFF7E8;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:#FFF7E8;padding:1px 5px;border-radius:5px}
.note{font-size:14px;color:var(--graphite);line-height:1.5}

footer{padding:22px 0 44px;font-size:15px;color:var(--graphite)}
footer nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px}
/* Herz als Inline-SVG statt „♥": iOS rendert das Zeichen als Color-Emoji und
   ignoriert dabei die CSS-Farbe. */
.made{font-family:'Baloo 2',sans-serif;font-weight:600;color:var(--ink);margin:0}
.made .hrt{width:.86em;height:.86em;fill:var(--sock-deep);vertical-align:-.09em;display:inline-block}
footer a{color:var(--graphite);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--ink)}

@media (max-width:520px){
  .card{padding:26px 20px;border-radius:18px}
  body{font-size:16px}
}