/* ===========================================================================
   Get A Snack — gemeinsame Gestaltung für die Inhaltsseiten
   ===========================================================================
   Marke aufgesetzt auf dem Bestand: die alte Seite war orange-freundlich mit
   dem Ton "best-buddy" und "Let's snack together". Das bleibt — nur auf
   Deutsch, weil der Zielmarkt DACH ist und die alte Seite englische Inhalte
   mit deutschen Rechtstexten mischte. Das war ein Befund im Audit.

   Regeln, die für ALLE Seiten gelten und nicht verhandelbar sind:
     - kein Webfont. Systemschrift kostet null Bytes und null Request.
     - kein CDN, kein Fremdanbieter, kein Cookie, kein Tracker.
     - Alles unter 700 px Breite lesbar, ohne Querscrollen.
     - Zielflächen mindestens 48 px.
   =========================================================================== */

/* Die Palette ist aus dem Logo gezogen, nicht erfunden: rote Chipstuete,
   goldene Chips, tiefes Teal im Hintergrund. Jeder Wert ist auf
   Kontrast geprueft, die Verhaeltnisse stehen dabei.

   WICHTIG: --gold hat gegen Weiss nur 1,75:1 und ist als Text auf hellem
   Grund unlesbar. Es ist eine Akzentfarbe auf dunklem Teal (6,83:1) und
   nichts anderes. Wer es als Textfarbe verwendet, macht die Seite kaputt. */
:root {
  --orange:  #e11d2b;   /* Marke, Flaeche. Weiss darauf 4,76:1        */
  --orange-d:#c8151f;   /* Links auf Creme 5,65:1, Hover auf Flaechen */
  --gelb:    #fcb814;   /* Akzent NUR auf dunklem Teal, 6,83:1        */
  --teal:    #123c45;   /* dunkle Flaeche. Creme darauf 11,52:1       */
  --teal-h:  #0e6b73;   /* Teal als Text auf Creme, 6,01:1            */
  --blau:    #1c7ed6;
  --gruen:   #2f9e44;
  --rot:     #c92a2a;

  --tinte:   #231a15;   /* warmes Dunkelbraun statt Schwarz, 16,46:1  */
  --grau:    #6b615b;
  --creme:   #fffaf5;
  --papier:  #ffffff;
  --linie:   rgba(35,26,21,.12);

  --schatten: 0 1px 2px rgba(43,33,24,.06), 0 8px 24px rgba(43,33,24,.08);
  --radius:  16px;
  --breite:  720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte:  #f7f0ea;
    --grau:   #a89e96;
    /* Dunkelmodus auf dem Teal des Logos statt auf Neutralgrau. */
    --creme:  #0e2b32;
    --papier: #16383f;
    --linie:  rgba(247,240,234,.16);
    --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font: 17px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Kein Bild, keine Datei: zwei weiche Farbflecken als Grundstimmung. */
  background-image:
    radial-gradient(52em 30em at 82% -14%, rgba(252,184,20,.22), transparent 60%),
    radial-gradient(44em 26em at -8% 4%,  rgba(225,29,43,.13),  transparent 62%),
    radial-gradient(40em 30em at 110% 88%, rgba(20,184,184,.10), transparent 60%);
  background-repeat: no-repeat;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inner {
  max-width: var(--breite); margin: 0 auto;
  padding: 10px 20px calc(10px + env(safe-area-inset-left, 0px) * 0);
  display: flex; align-items: center; gap: 12px;
}
.marke { display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: inherit; min-height: 48px; }
/* Logo als Bild, nicht mehr inline: es ist eine Rastergrafik, die Thomas
   geliefert hat. width/height stehen im Markup, damit beim Laden nichts
   springt. */
.marke img { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; }
.wortmarke { font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1; }
.wortmarke em { font-style: normal; color: var(--orange); }
.kopf nav { margin-left: auto; display: flex; gap: 4px; }
.kopf nav a {
  color: var(--tinte); text-decoration: none; font-size: 15px;
  font-weight: 600; padding: 12px 11px; border-radius: 10px;
  min-height: 48px; display: flex; align-items: center;
}
.kopf nav a:hover { background: rgba(225,29,43,.10); }
.kopf nav a.knopf {
  background: var(--orange); color: #fff; padding: 12px 16px;
}
.kopf nav a.knopf:hover { background: var(--orange-d); }
@media (max-width: 560px) {
  .kopf nav a:not(.knopf) { display: none; }
}

/* --- Textseiten ---------------------------------------------------------- */
main { padding: 34px 0 60px; }
h1 { font-size: clamp(30px, 7vw, 42px); line-height: 1.1; margin: 0 0 14px;
  letter-spacing: -.025em; font-weight: 820; }
h2 { font-size: clamp(21px, 4.6vw, 26px); margin: 38px 0 12px;
  letter-spacing: -.015em; font-weight: 760; }
h3 { font-size: 18px; margin: 26px 0 8px; font-weight: 700; }
p  { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin: 0 0 7px; }
a  { color: var(--orange-d); text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { a { color: var(--gelb); } }
small { color: var(--grau); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 34px 0; }

.vorspann { font-size: 19px; color: var(--grau); margin: 0 0 26px; }

.karte-box {
  background: var(--papier); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 18px 20px; margin: 0 0 16px;
}
.hinweis {
  border-left: 4px solid var(--gelb); background: rgba(252,184,20,.14);
  border-radius: 0 12px 12px 0; padding: 13px 16px; margin: 0 0 18px;
  font-size: 15.5px;
}
.hinweis b { font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 15.5px;
  margin: 0 0 18px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie);
  vertical-align: top; }
th { font-weight: 700; }
.tabellenrolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Fuß ----------------------------------------------------------------- */
/* --- Fusszeile -----------------------------------------------------------
   Sie traegt die Pflichtangaben und soll trotzdem nicht wie ein Kleingedrucktes
   aussehen. Deshalb: Marke oben mit Logo, Links darunter in zwei Spalten, und
   der rechtliche Kleinkram klar abgesetzt. Auf 375px bleiben zwei Spalten
   lesbar — eine einzige Spalte macht die Fusszeile unnoetig lang.           */
.fuss { border-top: 1px solid var(--linie); margin-top: 8px;
  padding: 30px 0 calc(30px + env(safe-area-inset-bottom));
  font-size: 15px; color: var(--grau); background: var(--papier); }

.fuss-marke { display: flex; align-items: center; gap: 11px; margin: 0 0 4px; }
.fuss-marke img { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(43,33,24,.14); }
.fuss-marke .wort { font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--tinte); text-decoration: none; line-height: 1; }
.fuss-marke .wort em { font-style: normal; color: var(--orange); }
.fuss-claim { margin: 0 0 18px 49px; font-size: 13px; color: var(--grau); }

.fuss-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
  margin: 0 0 18px; padding: 16px 0 4px; border-top: 1px solid var(--linie); }
.fuss-links a { color: var(--tinte); text-decoration: none; font-weight: 600;
  padding: 10px 10px; border-radius: 9px; min-height: 44px; font-size: 15px;
  display: flex; align-items: center; margin-left: -10px; }
.fuss-links a:hover { background: rgba(225,29,43,.10); }

.fuss-klein { padding-top: 15px; border-top: 1px solid var(--linie); }
.fuss-klein p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.fuss-klein p:last-child { margin-bottom: 0; }
.fuss-klein a { color: var(--grau); }
.fuss-siegel { display: inline-block; margin: 0 0 10px; padding: 5px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--teal-h); background: rgba(14,107,115,.10); }
.fuss p { margin: 0 0 7px; font-size: 14px; }

@media (max-width: 359px) {
  .fuss-links { grid-template-columns: 1fr; }
}

/* Auf dem Telefon wird der Subfooter zentriert. Auf schmalen Schirmen
   brechen die drei Zeilen ohnehin um, und linksbuendiger Flattersatz mit
   drei verschieden langen Restzeilen sieht nach Resteverwertung aus.
   Zentriert liest er sich als Abschluss. Ab Tablet bleibt es linksbuendig,
   dort sind die Zeilen kurz genug, dass Zentrierung unruhig wirkt.
   Die Linkliste darueber bleibt linksbuendig — zentrierte Tippziele in
   zwei Spalten sind schwerer zu treffen. */
@media (max-width: 599px) {
  .fuss-klein { text-align: center; }
  .fuss-siegel { margin-left: auto; margin-right: auto; }
}

/* --- Knöpfe -------------------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; padding: 0 26px; border-radius: 14px; border: 0;
  background: var(--orange); color: #fff; font-size: 18px; font-weight: 720;
  text-decoration: none; cursor: pointer; box-shadow: var(--schatten);
}
.cta:hover { background: var(--orange-d); }
.cta.zweit { background: var(--papier); color: var(--tinte);
  box-shadow: none; border: 1.5px solid var(--linie); }