/* ═══════════════════════════════════════════════════════════════
   Unterseiten der Abnehmtastisch-Webseite
   Impressum · Datenschutz · AGB · Widerruf · Kontakt · Danke
   Gleiche Token wie index.html, damit sich alles wie eine Seite anfühlt.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/schriften/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/schriften/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#0E3B26; --ink-2:#0A2C1D; --txt:#33413A; --grau:#5C6E64;
  --grund:#FFFFFF; --tint:#F1F8F3; --tint-2:#E4F2E9; --linie:#DCE9E0;
  --gruen:#0A8053; --gruen-hell:#4BE08F; --cta:#0A8053; --cta-2:#0C9660;
  --warn:#8A4B10; --warn-bg:#FDF3E7; --warn-linie:#F0D6B4;
  --r:16px; --r-gross:25px; --pille:100px;
  --schatten:0 18px 46px -26px rgba(10,44,29,.42);
  --breit:820px; --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Figtree',system-ui,-apple-system,sans-serif;font-size:1.0625rem;line-height:1.68;
  color:var(--txt);background:var(--grund);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:#08714A;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--cta-2)}
:focus-visible{outline:3px solid var(--gruen);outline-offset:3px;border-radius:6px}

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

/* ── Kopf ── */
.kopf{background:var(--ink);color:#EAF3ED;padding:16px 0}
.kopf .in{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.kopf .marke{display:flex;align-items:center;gap:11px;text-decoration:none}
.kopf .logo{width:32px;flex:none}
.kopf .logo svg{width:100%;height:auto;display:block}
.kopf .wort{font-weight:800;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.kopf .zurueck{font-size:.86rem;font-weight:600;color:#9FD9BB;text-decoration:none}
.kopf .zurueck:hover{color:#fff}

/* ── Titel ── */
.titel{padding:clamp(40px,6vw,72px) 0 clamp(20px,3vw,32px);border-bottom:1px solid var(--linie)}
.lbl{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gruen);margin-bottom:12px}
h1{color:var(--ink);font-weight:800;line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(2rem,4.4vw,3rem);text-wrap:balance}
.titel .stand{margin-top:14px;font-size:.88rem;color:var(--grau)}

/* ── Inhalt ── */
main{padding:clamp(32px,5vw,56px) 0 clamp(56px,7vw,88px)}
h2{color:var(--ink);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.18;
  letter-spacing:-.02em;margin:2.2em 0 .6em;text-wrap:balance}
h2:first-child{margin-top:0}
h3{color:var(--ink);font-weight:800;font-size:1.08rem;line-height:1.3;margin:1.6em 0 .4em}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0 0 1.2em 1.3em}
li{margin-bottom:.5em}
strong,b{color:var(--ink);font-weight:700}
hr{border:0;border-top:1px solid var(--linie);margin:2.6em 0}

/* Inhaltsverzeichnis */
.inhalt-nav{background:var(--tint);border:1px solid var(--linie);border-radius:var(--r);
  padding:20px 24px;margin-bottom:2.4em}
.inhalt-nav b{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gruen);margin-bottom:10px}
.inhalt-nav ol{margin:0 0 0 1.2em;columns:2;column-gap:28px}
.inhalt-nav li{margin-bottom:.35em;font-size:.95rem}
@media(max-width:620px){.inhalt-nav ol{columns:1}}

/* Datenkasten (Impressum, Kontakt) */
.daten{background:var(--tint);border:1px solid var(--linie);border-radius:var(--r);
  padding:22px 26px;margin:0 0 1.6em}
.daten dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:8px 22px;margin:0}
.daten dt{font-weight:700;color:var(--ink)}
.daten dd{margin:0}
@media(max-width:560px){.daten dl{grid-template-columns:1fr;gap:2px}
  .daten dd{margin-bottom:12px}}

/* Hinweisbox */
.hinweis{background:var(--tint-2);border-left:5px solid var(--gruen);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;margin:1.6em 0}
.hinweis p:last-child{margin-bottom:0}

/* Achtungbox — Platzhalter, die David füllen muss */
.achtung{background:var(--warn-bg);border:2px solid var(--warn-linie);border-radius:var(--r);
  padding:22px 26px;margin:0 0 2em}
.achtung b.kopfz{display:block;color:var(--warn);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:10px}
.achtung p:last-child{margin-bottom:0}
.achtung ul{margin-bottom:0}
mark.luecke{overflow-wrap:anywhere;background:#FFE8C2;color:#7A3F06;font-weight:700;padding:1px 7px;border-radius:5px;
  border:1px dashed #D9A45E;white-space:normal}

/* Tabelle */
.tab-huelle{overflow-x:auto;margin:0 0 1.6em}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
th{background:var(--tint);color:var(--ink);font-weight:700;font-size:.86rem;
  letter-spacing:.04em;text-transform:uppercase}

/* Musterformular */
.muster{background:var(--grund);border:1px dashed var(--linie);border-radius:var(--r);
  padding:22px 26px;margin:0 0 1.6em;font-size:.97rem}
.muster p{margin-bottom:.7em}

/* Button */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cta);color:#fff;
  border-radius:var(--pille);padding:13px 28px;font-weight:600;font-size:.98rem;
  text-decoration:none;transition:.2s var(--ease);box-shadow:0 10px 24px -12px rgba(10,128,83,.6)}
.btn:hover{background:var(--cta-2);color:#fff;transform:translateY(-2px)}

/* ── Fuß ── */
footer{background:var(--ink-2);color:#9FBFAD;padding:40px 0 48px;font-size:.86rem;line-height:1.6}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}
footer nav a{color:#CFE4D8;text-decoration:none;font-weight:600}
footer nav a:hover{color:#fff;text-decoration:underline}
footer p{margin-bottom:.7em;max-width:70ch}
footer p:last-child{margin-bottom:0}

@media print{
  .kopf,footer nav,.btn{display:none}
  body{font-size:11pt}
  a{color:inherit;text-decoration:none}
}

@media(max-width:380px){.kopf .wort{display:none}.kopf .zurueck{font-size:.8rem}}

main a,main code{overflow-wrap:anywhere}

/* Tabellen und Musterblöcke mobil im eigenen Rahmen scrollen/umbrechen */
main table{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed}
main th,main td{overflow-wrap:anywhere;text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--linie);font-size:.95rem}
main th{color:var(--ink);font-weight:700}
main pre,main blockquote{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}

.muster p,.muster span{overflow-wrap:anywhere}
.hinweis p{overflow-wrap:anywhere}

.titel h1{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}

.titel .lbl{color:#087048}

.fuss b,.fuss strong{color:#fff}

footer b,footer strong{color:#fff}
