/* ============================================================
   Gemeinsames Layout fuer die Rechtstextseiten.

   Uebernimmt die Farben, Radien und die Systemschrift aus der
   Startseite, damit Impressum und Co. nicht wie ein Fremdkoerper
   wirken. Wer dort etwas aendert, sollte es hier nachziehen.
   ============================================================ */

:root {
  --bg:          #0b0b0c;
  --surface:     #141417;
  --surface-2:   #1b1b1f;
  --line:        rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);

  --text:        #f0eeea;
  --text-dim:    #a8a49d;

  --accent:      #d4652a;
  --accent-hi:   #e8783c;
  --accent-ink:  #0b0b0c;
  --accent-hell: #f3b189;   /* Akzent als Schrift auf Dunkel, ~9:1 */

  --r-pill:      999px;
  --r-flaeche:   14px;

  --max:         1240px;
  --ease:        cubic-bezier(.16, 1, .3, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kopfzeile ---------------------------------------- */

.kopf {
  height: 68px; display: flex; align-items: center;
  background: rgba(11, 11, 12, .92);
  border-bottom: 1px solid var(--line);
}
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.marke {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 19px;
}
.marke svg { flex: none; }

.zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  text-decoration: none; font-size: 15px; color: var(--text-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.zurueck:hover { border-color: var(--text-dim); color: var(--text); }

/* ---------- Die Kopfzeile in den Fluss holen (17.08.2026) -----

   ⚠ header.kopf, NICHT .kopf — und das ist der ganze Punkt.

   menue.css setzt `.kopf { position: fixed }`. Ein fixierter Kopf
   nimmt keinen Platz ein, ist aber 68 px hoch; `main` darunter hat
   nur 56 px Abstand. Am 17.08.2026 live auf dem Handy nachgemessen:
   Es fehlten 12 px, und die Augenbrauen-Zeile wurde oben
   abgeschnitten — auf kontakt.html stand „KONTAKT" nur zur Haelfte
   da. Auf warenkorb.php, das dieselbe Datei laedt und `main` auf
   40 px setzt, war „Warenkorb" 28 px angeschnitten.

   `sticky` klebt genauso oben, nimmt aber Platz ein. Fuer den Kunden
   sieht es gleich aus, nur verschwindet nichts mehr darunter.

   `header.kopf` (0,1,1) schlaegt `.kopf` (0,1,0) und braucht dafuer
   weder !important noch eine bestimmte Ladereihenfolge. Dieselbe
   Loesung wie in index.html, produkte.html und galerie.html.

   ⚠ NICHT nach menue.css verschieben. Die Startseite setzt `position`
   nicht selbst und rechnet damit, dass ihr Kopf AUS DEM FLUSS ist —
   dort wuerde `sticky` das Hero-Video nach unten schieben. Die
   Begruendung steht ausfuehrlich in menue.css.

   Betrifft: agb, datenschutz, impressum, kontakt, widerruf und
   warenkorb.php — alle sechs laden diese Datei.
   -------------------------------------------------------------- */
header.kopf { position: sticky; top: 0; }

/* ---------- Dokument ----------------------------------------- */

main { flex: 1; padding-block: 56px 88px; }
.doc { max-width: 780px; }

.augenbraue {
  font-size: 13px; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-hell); margin: 0 0 12px;
}

.doc > h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.05; letter-spacing: -.035em; font-weight: 750;
}
.stand { font-size: 14px; color: var(--text-dim); margin: 0 0 40px; }

/* Entwurfshinweis. Faellt bewusst auf und muss vor dem Livegang
   samt zugehoerigem Abschnitt entfernt werden. */
.entwurf {
  background: var(--accent); color: var(--accent-ink);
  padding: 22px 26px; margin: 0 0 40px;
  border-radius: var(--r-flaeche);
}
.entwurf b { display: block; font-size: 16px; margin-bottom: 8px; }
.entwurf p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- Abschnitte --------------------------------------- */

section.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-flaeche);
  padding: 28px 30px;
  margin-bottom: 18px;
}
@media (max-width: 640px) { section.block { padding: 22px 20px; } }

section.block > h2 {
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 21px; letter-spacing: -.02em; font-weight: 700;
}
section.block h3 {
  margin: 24px 0 10px;
  font-size: 16px; font-weight: 650;
}
section.block p,
section.block li { font-size: 15.5px; line-height: 1.7; color: var(--text-dim); }
section.block p { margin: 0 0 14px; }
section.block p:last-child { margin-bottom: 0; }
section.block ul { margin: 0 0 14px; padding-left: 22px; }
section.block li { margin-bottom: 8px; }
section.block b,
section.block strong { color: var(--text); font-weight: 650; }
section.block a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
section.block a:hover { color: var(--accent-hi); }

/* Auszufuellende Stellen. Sollen im Text sofort ins Auge springen,
   damit vor dem Livegang keine uebersehen wird. */
.todo {
  display: inline-block;
  background: rgba(212, 101, 42, .14);
  color: var(--accent-hell);
  border: 1px dashed var(--accent);
  padding: 1px 8px; border-radius: 6px;
  font-size: 14px; font-weight: 650;
}

/* Redaktionelle Anmerkung an dich, kein Bestandteil des Rechtstexts.
   Vor dem Livegang entfernen. */
.note {
  border-left: 3px solid var(--line-strong);
  padding: 2px 0 2px 16px; margin: 0 0 14px;
  font-size: 14.5px; line-height: 1.65; color: var(--text-dim);
}
.note b { color: var(--text); }

dl.meta { margin: 0; }
dl.meta dt {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 650; margin-top: 18px;
}
dl.meta dt:first-child { margin-top: 0; }
dl.meta dd { margin: 6px 0 0; font-size: 16px; color: var(--text); }

/* ---------- Fusszeile ---------------------------------------- */

.fuss { border-top: 1px solid var(--line); padding-block: 32px; font-size: 15px; }
.fuss-reihe {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: center; justify-content: space-between;
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.fuss-links a { color: var(--text-dim); text-decoration: none; transition: color .2s var(--ease); }
.fuss-links a:hover { color: var(--text); }
.fuss-links a[aria-current] { color: var(--text); font-weight: 650; }