/* ============================================================
   Grillspiess Bestellsystem – Farbschema für das ONLINE-Formular
   (index.php, bestellung-aendern.php), Stand 06.09.2026 (Meldung #106).

   Wird NACH style.css geladen und überschreibt nur Farben/Schatten.
   Aufbau: Grillfest-Foto als Seitenhintergrund (dunkel abgeschleiert),
   das Formular auf einer halbtransparenten dunklen Fläche mit weisser
   Schrift - und darauf die Bedienelemente HELL wie im Original:
   Karten (Privat-/Firmenkunde, Artikel), Eingabefelder (z.B. Personen-
   zahl) und Kalender mit weissem Hintergrund und dunkler Schrift.
   Laden-Formular (laden/) und Admin-Backend bleiben unverändert.
   ============================================================ */

:root{
  --ink:#F4F1EA;            /* Text auf der dunklen Fläche: warmes Weiss */
  --paper:#1C1C1C;          /* Seitenhintergrund hinter dem Foto */
  --line:#4A4A46;           /* Linien auf der dunklen Fläche */
  --accent:#C9A227;         /* Akzent (Fortschritt, Links, Pflichtfeld-Stern) */
  --accent-soft:#E1D1A0;    /* aktive Karten: Gold #c3a342 zu 50 % vor Weiss (#108) */
  --ok:#3f6d4e;             /* Kalender frei (Original) */
  --danger:#FF7B6E;         /* Fehler auf dunkler Fläche */
  --dezent:#B8B5AC;         /* Hinweistexte auf dunkler Fläche */
  --karte-ink:#1f2420;      /* Schrift auf hellen Karten/Feldern (Original) */
  --karte-line:#dcd8cf;     /* Rahmen heller Karten/Felder (Original) */
  --karte-dezent:#6b6b63;   /* Nebentext auf hellen Karten (Original) */
}

/* ---------- Schriften (Stilrichtung 1 "Glut": Marcellus + Barlow) ---------- */
body{font-family:'Barlow',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
/* Haupttitel: gleiche Grösse wie "Grillspiess-Angebot" auf den eigenen Seiten
   (seiten/seiten.css .inhalt h1): 30.4px Handy … 44.8px Desktop. Der Selektor
   mit body.public-form-page ist nötig, weil assets/css/style.css (Lieferung
   #109/#110) den Titel mit dieser Klasse auf Weiss setzt - Gold soll gelten. */
header.top h1,body.public-form-page header.top h1,body.public-form-page .title-row h1{
  font-family:'Marcellus',Georgia,serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem);line-height:1.1;color:var(--accent);}
/* 06.09. (v19): kleine Überschriften (Schritt-Titel, Zwischentitel) in
   Marcellus Gold #C9A227 - Selektor mit body.public-form-page #formRoot, weil
   style.css sie sonst auf Weiss setzt. Modal/Support-Fenster bleiben dunkel. */
h2,h3,body.public-form-page #formRoot h2,body.public-form-page #formRoot h3,
body.public-form-page .wrap h2,body.public-form-page .wrap h3{
  font-family:'Marcellus',Georgia,serif;font-weight:700;color:#C9A227;}
.modal-box h2,.modal-box h3{color:var(--karte-ink);}
.m-title,.pkg-card .pkg-name{font-family:'Barlow',sans-serif;font-weight:700;}
.step-label,.substep-label{letter-spacing:.08em;}
.btn{font-family:'Barlow',sans-serif;font-weight:700;letter-spacing:.01em;}

/* ---------- Seite: Foto + Schleier + dunkle Formularfläche ---------- */
body{background:var(--paper);color:var(--ink);position:relative;}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:#1C1C1C url(../img/hintergrund-grillfest.jpg) center/cover no-repeat;
}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.40);}
/* v21: Schwarz, 35 % transparent - Selektor auch mit body.public-form-page, damit
   die 80 %-Regel aus style.css nicht gewinnt. */
.wrap,body.public-form-page .wrap{background:rgba(0,0,0,.65);border-radius:12px;padding:24px 20px 40px;margin:24px auto 40px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 18px 45px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
  text-shadow:0 1px 3px rgba(0,0,0,.6);}
a{color:var(--accent);}

/* Texte direkt auf der dunklen Fläche */
header.top p,.step-label,.substep-label,.hint,.cart-row .sub,.empty-note{color:var(--dezent);}
.steps .dot{background:var(--line);}
.steps .dot.done{background:var(--accent);}
.steps .dot.active{background:var(--accent);opacity:.55;}
label.field-label.required::after{color:var(--accent);}
.cart-list,.cart-row{border-color:var(--line);}

/* ---------- Helle Bedienelemente (Original-Optik, Meldung #106) ---------- */
/* Eingabefelder, z.B. Personenzahl */
input[type=number],input[type=text],input[type=email],input[type=tel],input[type=date],
select,textarea{background:#fff;color:var(--karte-ink);border-color:var(--karte-line);text-shadow:none;}
input::placeholder,textarea::placeholder{color:#8a8a82;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}

/* Karten und Boxen: Privat-/Firmenkunde, Artikelzeilen, Pakete, Infoboxen,
   Aufklapper, Modal - weiss mit dunkler Schrift, leicht abgesetzt */
.method-card,.pkg-card,.qty-row,.check-item,.info-box,.collapsible-toggle,
.stepper button,.modal-box{
  background:#fff;color:var(--karte-ink);border-color:var(--karte-line);
  text-shadow:none;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.method-card .m-icon,.stepper button{color:var(--karte-ink);}
/* Meldung #108: aktivierte Auswahlkarten (Privat-/Firmenkunde, Pakete,
   alle weiteren Schritte) in Gold #c3a342 mit 50 % vor Weiss = #E1D1A0 */
/* 06.09. (Chat): Privat-/Firmenkunde-Karten grundsätzlich in #E1D1A0,
   die gewählte Karte in vollem Gold #c3a342. */
.method-card{background:#E1D1A0;border-color:#E1D1A0;}
.method-card.active{background:#C3A342;border-color:#A88418;color:#1f2420;}
.pkg-card.active{background:#E1D1A0;border-color:#c3a342;}
.pickup-box{background:#E1D1A0;}
.pickup-box{background:var(--accent-soft);color:var(--karte-ink);text-shadow:none;}
.qty-row .price,.check-item .price,.pkg-card .pkg-price,.pkg-progress{color:var(--karte-dezent);}

/* Kalender: weiss wie im Original (frei = hellgrün, gesperrt = hellrot,
   gewählt = dunkel, heute = gelblich) */
.mini-calendar,.mc-nav{background:#fff;color:var(--karte-ink);border-color:var(--karte-line);text-shadow:none;}
.mini-calendar{box-shadow:0 4px 14px rgba(0,0,0,.35);}
.mc-weekdays{color:#8a8a82;}
.mc-legend{color:var(--karte-dezent);}
.mc-day{background:#e3f1e7;color:#3f6d4e;}
.mc-day.mc-empty,.mc-day.mc-past{background:transparent;}
.mc-day.mc-locked{background:#f7d9d2;color:#8a3521;}
.mc-day.mc-past{color:#b5b5ad;}
.mc-day.mc-selected{background:var(--karte-ink);color:#fff;}
.mc-day.mc-today:not(.mc-selected){background:#fff4d9;color:#7a5a00;}
.mc-dot-locked{background:#e0836d;}
.mc-dot-available{background:#3f6d4e;}
.mc-dot-past{background:#d8d8d0;}
.modal-overlay{background:rgba(0,0,0,.65);}

/* Meldungsboxen auf der dunklen Fläche */
.error-box,.people-warn:not(:empty){background:#3A2320;color:var(--danger);border-color:var(--danger);text-shadow:none;}
.success-box{background:#213A2A;color:#8FCB9B;border-color:#8FCB9B;text-shadow:none;}
.pending-box{background:#3A3320;color:#F2D27A;border-color:#C9A227;text-shadow:none;}
#fatalErrorBanner{background:#3A2320;color:var(--danger);}

/* Buttons (Meldung #107): "Weiter" weiss mit schwarzer Schrift, "Zurück"
   weiss mit 10 % Schwarz (#E6E6E6) und schwarzer Schrift; auf Schritt 1
   wird "Zurück" ausgeblendet (Platz bleibt, "Weiter" bleibt rechts). */
/* Reines Weiss blendet auf dem dunklen Grund - deshalb Weiss mit 10 %
   Transparenz (wirkt wie 10 % Schwarz), "Zurück" eine Stufe dunkler. */
.btn{background:rgba(255,255,255,.90);border-color:transparent;color:#000;text-shadow:none;box-shadow:0 6px 18px rgba(0,0,0,.35);}
.btn:hover:not(:disabled){background:rgba(255,255,255,.80);}
.btn.secondary{background:rgba(255,255,255,.78);border-color:transparent;color:#000;}
.btn.secondary:hover:not(:disabled){background:rgba(255,255,255,.68);}
.btn.danger{background:#B3202D;border-color:#B3202D;color:#F7F3EC;}
.btn:disabled{opacity:.4;}
#backBtn:disabled{visibility:hidden;}

/* ---------- Support-Zahnrad: Rückmelde-Fenster bleibt hell ---------- */
.support-widget-panel,.support-widget-btn{
  --ink:#1f2420;--paper:#faf9f6;--line:#dcd8cf;--accent:#b4472a;--accent-soft:#f1e2da;
  --ok:#3f6d4e;--danger:#b4472a;--dezent:#6b6b63;
  color:#1f2420;text-shadow:none;
}
.support-widget-panel *{text-shadow:none;}
.support-widget-panel h3,.support-widget-panel label,.support-widget-panel .support-widget-hint,
.support-widget-panel .support-widget-kategorien-titel,.support-widget-panel .support-widget-nachricht-label{color:#1f2420;}
.support-widget-panel input[type=text],.support-widget-panel input[type=email],.support-widget-panel textarea,
.support-widget-panel #supportWidgetNachricht{background:#fff;color:#1f2420;border-color:#dcd8cf;}
.support-widget-panel .support-widget-btn-secondary{background:#fff;color:#1f2420;border-color:#1f2420;box-shadow:none;}
.support-widget-panel .support-widget-btn-primary{background:#1f2420;color:#fff;border-color:#1f2420;}
.support-widget-panel .support-widget-markieren-btn{color:#1f2420;}

/* ---------- Hilfe-Sprechblase neben dem Titel (Meldung #110) ----------
   style.css setzt background:var(--ink) - im dunklen Schema ist --ink hell,
   dadurch war weisse Schrift auf hellem Grund unsichtbar. Hier: helles
   Fenster mit dunkler Schrift, wie das Support-Fenster. */
body.public-form-page .help-hint-tooltip{background:rgba(255,255,255,.96);color:#1f2420;text-shadow:none;
  border:1px solid #dcd8cf;box-shadow:0 8px 24px rgba(0,0,0,.45);}
body.public-form-page .help-hint-tooltip a{color:#B3202D;}
body.public-form-page .help-hint{color:var(--ink);border-color:currentColor;}

/* v22: Hilfe-Icon (drei Sprechblasen, Gold) statt Kreis mit "?" - max. 50x50px,
   kein Rahmen/Kreis mehr (style.css zeichnet sonst einen weissen Ring). */
body.public-form-page .help-hint{width:50px;height:50px;border:0;border-radius:0;opacity:.9;color:#C9A227;}
body.public-form-page .help-hint:hover,body.public-form-page .help-hint:focus{opacity:1;}
body.public-form-page .help-hint-icon{width:48px;height:42px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}

/* ---------- Glut-Abschluss (includes/cta_glut.php, v24) ----------
   Gleiche Optik wie die Sektion "Bereit für Ihre Grillspiess-Party?" auf den
   eigenen Seiten (seiten/seiten.css .bild-sektion--cta). Bündig zum Footer. */
.glut-cta{position:relative;width:100%;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:#0d0d0d;padding:100px 20px;margin:0;text-shadow:none;}
.glut-cta__bild,.glut-cta__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;margin:0;}
.glut-cta__inhalt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-width:90vw;}
.glut-cta__titel,body.public-form-page .glut-cta__titel{margin:0;padding:.25rem 1.25rem;font-family:'Marcellus',Georgia,serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.7rem, 1rem + 2.6vw, 2.8rem);line-height:1.05;color:#C9A227;
  text-shadow:0 2px 6px rgba(0,0,0,.55);}
.glut-cta__btn,.glut-cta__btn:hover,.glut-cta__btn:focus,.glut-cta__btn:visited{display:inline-block;margin-top:12px;padding:14px 28px;border-radius:4px;
  font-family:'Barlow',sans-serif;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;
  background:#B3202D;color:#fff;border:1px solid #B3202D;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s ease,filter .15s ease;}
.glut-cta__btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
@media (max-width:749px){.glut-cta{padding:72px 20px;}}

/* v25: Monat vor/zurück im Kalender 15 % grösser (24px -> 28px) und in Gold
   #C9A227 mit dunklem Pfeil. */
.mini-calendar .mc-nav,.mc-nav{width:28px;height:28px;background:#C9A227;border-color:#C9A227;color:#1f2420;
  font-size:calc(var(--fs-body) * 1.15);font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.mc-nav:hover:not(:disabled){background:#E0BB4A;border-color:#E0BB4A;}