/* ============================================================
   Vino e Gusto — Basis
   Farbtokens, Grundlagen und der Herkunftsvermerk.
   Wird von JEDER Seite geladen (Start, Impressum, Datenschutz),
   damit dieselbe Änderung nicht an drei Stellen gepflegt werden muss.
   ============================================================ */
:root{
  --blu:#12266a;
  --blu-mid:#1b3a8f;
  --blu-soft:#4a6fd4;
  --lemon:#f2c230;
  /* Gelb der Kundenseite vinoegusto-alzey.de — für Text auf dunklem Grund */
  --kunde-gelb:#eab308;
  /* Dunkler Goldton der Kundenseite (#92400E) — für Gelb-Wirkung auf HELLEM
     Grund, wo #eab308 mit Kontrast 1,7 unlesbar wäre. */
  --gold-tief:#92400e;
  --lemon-deep:#c98f0c;
  --leaf:#2c4b32;
  --ceramic:#f7f1e4;
  --ceramic-2:#efe6d3;
  --grout:#e2d6be;
  --ink:#231f1a;
  --ink-2:#5f574a;
  --display:"Playfair Display",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --edge:clamp(1.15rem,4vw,2.5rem);
}

*{box-sizing:border-box}
/* height:auto ist PFLICHT, sobald Bilder width/height-Attribute tragen (die sie
   für den Layoutplatz brauchen). Ohne sie begrenzt max-width zwar die Breite,
   die Höhe bleibt aber auf dem Attributwert stehen — das Bild wird verzerrt.
   Trat auf der Startseite auf: 348px breit, 700px hoch. */
img,svg{max-width:100%;height:auto;display:block}
::selection{background:var(--lemon);color:var(--blu)}
:focus-visible{outline:2.5px solid var(--lemon);outline-offset:3px}

/* Herkunftsvermerk im Footer (§ 7a AGB).
   Bindewoerter stehen AUSSERHALB der Kacheln — innerhalb gelesen wirkten sie
   wie Teil des Firmennamens. Eigene Gruppe mit engem gap, damit Wort und
   zugehoerige Kachel als Einheit lesen. */
.credit{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.credit-word{color:rgba(247,241,228,.55);font-size:.8rem}
.badge{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.82rem;
  border-radius:999px;padding:6px 13px;transition:background .2s,border-color .2s;
}
.badge img{flex:none;display:block}
.badge b{font-weight:800;letter-spacing:-.01em}
/* Webliq: Zitronengelb — traegt die Majolika-Palette mit */
.badge--webliq{background:rgba(242,194,48,.12);border:1px solid rgba(242,194,48,.38)}
.badge--webliq:hover{background:rgba(242,194,48,.22);border-color:var(--lemon)}
.badge--webliq b{color:var(--lemon)}
.badge--webliq img{border-radius:3px}
/* Otaku: bewusst in den Markenfarben (Cyan), sonst verschmelzen beide Kacheln
   optisch zu einer und man liest sie als EINEN Namen. */
.badge--otaku{background:rgba(75,123,255,.16);border:1px solid rgba(91,200,255,.4)}
.badge--otaku:hover{background:rgba(75,123,255,.3);border-color:#5bc8ff}
.badge--otaku b{color:#7fd4ff}