/*
 * Stil der Kundenseite pickup.neumann-feuerwerk.de (public_pickup/index.php).
 *
 * EIGENE DATEI STATT EINES <style>-BLOCKS: Die Content-Security-Policy in .htaccess sagt
 * `style-src 'self'`; ein eingebetteter Block bräuchte 'unsafe-inline'.
 *
 * ==> OPTISCH DIESELBE SEITE WIE VERIFY <==
 * Der Kunde kommt aus einer Mail des Shops und soll auf einer Seite landen, die wie der Shop
 * aussieht, nicht wie ein Verwaltungswerkzeug. Bis zum 18.09.2026 trug diese Seite das dunkle
 * Cockpit-Design; seitdem sind Palette, Kopfzeile, Blatt, Knöpfe, Typografie und Fuß aus
 * public_verify/assets/verify.css KOPIERT, nicht verlinkt: Die CSP erlaubt nur eigene Dateien,
 * und beide Seiten sollen unabhängig voneinander deploybar bleiben. Wer hier eine Farbe
 * ändert, ändert sie bitte auch dort.
 *
 * Die Entscheidungen aus dem Kommentar-Kopf der verify.css gelten hier genauso:
 *   1. FÜLLFARBE IST NICHT TEXTFARBE. Grün #43c875 und Gelb #ffab00 füllen Flächen; für Text
 *      und Striche gibt es dunkle Varianten (--gruen-d, --gelb-d). Keine Textfarbe unter 4,5:1.
 *   2. EIN BLATT, KEINE KISTEN. Tiefe gibt es genau einmal (das Blatt); darin trennen Haarlinien
 *      und Weißraum. Die Tage und Zeitfenster sind Knöpfe, keine Kästen.
 *   3. KEINE FREMDE QUELLE: Systemschrift, kein Webfont, kein Bild, kein Skript.
 *
 * MOBIL ZUERST: Der Kunde klickt aus der Mail auf dem Telefon. Trefferflächen mindestens 44 px,
 * die Zeitfenster als große Knöpfe, nichts, was man zielen muss.
 */
:root{
  /* ---------- FLÄCHEN: minimal warm (Papier statt Aktendeckel) ---------- */
  --grund:#f4f2ef; --flaeche:#ffffff; --tief:#faf8f6;

  /* ---------- LINIEN ---------- */
  --linie:#e6e1db; --linie-m:#d5cec6; --linie-k:#8d857a;

  /* ---------- TEXT: --ink3 ist die kleinste zulässige Textfarbe, 4,83:1 auf Weiß ---------- */
  --ink:#24262a; --ink2:#55585e; --ink3:#6e727a;

  /* ---------- ROT (aus dem Shop: #e32828): --rot füllt, --rot-d schreibt ---------- */
  --rot:#e32828; --rot-d:#b81f1f; --rot-t:#8f1717; --rot-h:#fdf2f1;

  /* ---------- BLAU (aus dem Shop: #296aab) ---------- */
  --blau:#296aab; --blau-d:#1f5386; --blau-h:#f1f6fb;

  /* ---------- GRÜN und GELB: hell füllt, dunkel schreibt ---------- */
  --gruen:#43c875; --gruen-d:#157a45; --gruen-h:#f1f9f3;
  --gelb:#ffab00;  --gelb-d:#8a5a00;  --gelb-h:#fdf6e8;

  /* ---------- MASSE: der Radius wächst mit der Fläche ---------- */
  --rad-s:8px; --rad-m:12px; --rad-l:16px; --pille:999px;

  --takt1:120ms; --takt2:180ms; --takt3:260ms;
  --aus:cubic-bezier(.2,.8,.3,1); --weich:cubic-bezier(.4,0,.2,1);

  /* AUSDRÜCKLICH HELL. Ohne diese Zeile rendern iOS und Chrome bei Systemdunkel die
     Formularfelder dunkel in eine helle Seite hinein. */
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- Kopf ---------------------------------------------------------------------------------- */
.kopf{background:#fff; border-bottom:1px solid var(--linie)}
.kopf-in{display:flex; align-items:center; gap:12px; padding:14px 20px; flex-wrap:wrap;
  max-width:760px; margin:0 auto}
.logo{display:block; height:30px; width:auto; flex:0 0 auto}
.kopf-titel{
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3); padding-left:12px; border-left:1px solid var(--linie);
}

/* --- Das Blatt ----------------------------------------------------------------------------- */
main{display:block; padding-bottom:12px}
.blatt{
  background:var(--flaeche); margin:20px; border-radius:var(--rad-l);
  box-shadow:0 12px 34px -14px rgba(40,32,24,.20), 0 1px 2px rgba(40,32,24,.05);
  overflow:hidden;
}
.inhalt{padding:26px 22px 30px}
@media (min-width:760px){
  .blatt{max-width:720px; margin:28px auto}
  .inhalt{padding:36px 40px 42px}
}
/* Der Inhaltsblock hat KEINEN eigenen Rahmen: Das Blatt trägt die Tiefe, der Block ist nur
   die Gliederung. Ein zweiter Kasten im Kasten ergäbe wieder den Behördeneindruck. */
.pk-teil{display:block}

/* --- Grundbausteine ------------------------------------------------------------------------ */
h1{font-size:clamp(1.625rem,1.15rem+2.1vw,2rem); line-height:1.22; margin:0 0 12px;
  letter-spacing:-.015em; text-wrap:balance}
h2{font-size:1.375rem; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em}
p{margin:0 0 14px; max-width:62ch}
a{color:var(--blau-d); text-underline-offset:2px}
b,strong{color:var(--ink)}
/* Die Anrede über der Überschrift: Kicker-Stil, damit die Bestellnummer nicht mit der
   Überschrift konkurriert. */
.pk-anrede{text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--ink3);
  margin:0 0 6px; font-weight:700}
.pk-satz{font-size:1.1875rem; color:var(--ink2); margin:0; max-width:62ch}
/* 15px, nicht kleiner: Für eine Zielgruppe mit vielen über 40 ist alles darunter keine
   Information mehr, sondern Dekoration. */
.pk-klein{font-size:.9375rem; color:var(--ink2)}
.pk-h2{font-size:1.0625rem; margin:22px 0 10px; color:var(--ink)}

/* --- Der Satz nach einer Weiterleitung (gebucht, abgesagt, vergeben, Frist, Link unterwegs) - */
.hinweis{
  border:1px solid var(--linie); background:var(--tief); border-radius:var(--rad-m);
  padding:14px 16px; margin:0 0 20px; font-size:.9375rem; line-height:1.6;
}
.hinweis.gut{background:var(--gruen-h); border-color:#cdead9}
p.hinweis{max-width:none}

/* --- Die zweite Tür: zwei Felder, ein Knopf ------------------------------------------------ */
.pk-form{margin-top:6px}
.pk-form label{display:block; font-weight:600; font-size:.9375rem; margin:0 0 16px}
/* 16px (1rem), nicht weniger: iOS Safari zoomt bei allem darunter beim Antippen hinein und
   rückt danach das Layout. */
.pk-form input{
  display:block; width:100%; margin-top:6px; padding:12px 14px; min-height:48px;
  border:1px solid var(--linie-m); border-radius:var(--rad-s);
  font:inherit; font-size:1rem; font-weight:400; background:#fff; color:var(--ink);
  transition:border-color var(--takt2) var(--weich), box-shadow var(--takt2) var(--weich);
}
/* ECHTES outline, nicht nur der Schein: Im Windows-Kontrastmodus verwirft der Browser jeden
   box-shadow, und übrig bliebe gar kein sichtbarer Fokus. */
.pk-form input:focus{outline:2px solid var(--blau); outline-offset:1px;
  border-color:var(--blau); box-shadow:0 0 0 3px rgba(41,106,171,.30)}
/* Der Honigtopf. Nicht `display:none`: manche Skripte überspringen versteckte Felder gerade
   deshalb. Er steht außerhalb des Sichtfelds und ist für die Tastatur nicht erreichbar. */
.pk-topf{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* --- Knöpfe -------------------------------------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; appearance:none; border:0;
  font:inherit; font-weight:700; cursor:pointer; text-decoration:none;
  background:var(--rot); color:#fff; border-radius:var(--pille);
  padding:14px 28px; min-height:52px; font-size:1.0625rem;
  transition:background var(--takt2) var(--weich), transform var(--takt1) var(--weich),
             border-color var(--takt2) var(--weich), color var(--takt2) var(--weich);
}
.knopf:hover{background:var(--rot-d); color:#fff}
.knopf:active{background:var(--rot-t); transform:translateY(1px)}
.knopf:focus-visible{outline:2px solid var(--blau); outline-offset:3px}
.knopf.still{background:none; color:var(--ink2); font-weight:600; padding:14px 8px}
.knopf.still:hover{background:none; color:var(--ink); text-decoration:underline}
.knopf.still-rahmen{background:none; color:var(--blau-d); border:1px solid var(--linie-m);
  font-size:.9375rem; padding:11px 20px; min-height:44px}
.knopf.still-rahmen:hover{background:var(--blau-h); color:var(--blau-d); border-color:var(--blau)}
/* „Termin absagen": still, aber in Rot, denn er nimmt etwas weg. --rot-d misst 6,45:1 auf Weiß. */
.knopf.still.gefahr{color:var(--rot-d)}
.knopf.still.gefahr:hover{color:var(--rot-t)}

/* --- Die Tage als Leiste: der gewählte hebt sich ab, jeder ist eine Adresse --------------- */
.pk-tage{display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; -webkit-overflow-scrolling:touch}
.pk-tag{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; min-width:82px;
  min-height:56px; padding:8px 12px; border-radius:var(--rad-m);
  border:1px solid var(--linie-m); background:#fff; color:var(--ink); text-decoration:none;
  transition:border-color var(--takt2) var(--weich), background var(--takt2) var(--weich);
}
.pk-tag b{font-size:.9375rem}
.pk-tag span{font-size:.8125rem; color:var(--ink3)}
.pk-tag:hover{border-color:var(--blau); background:var(--blau-h)}
.pk-tag:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
/* Der gewählte Tag: rote Kante und heller roter Grund, wie der Fortschrittsbalken auf verify.
   Die Zahl der freien Fenster bleibt in --rot-d lesbar (6,45:1 auf Weiß). */
.pk-tag.an{border-color:var(--rot); background:var(--rot-h); box-shadow:inset 0 0 0 1px var(--rot)}
.pk-tag.an span{color:var(--rot-d); font-weight:600}

/* --- Die Fenster eines Tages: ein Raster großer Knöpfe ------------------------------------- */
.pk-fenster{display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px;
  margin:0 0 16px}
.pk-fenster form{margin:0}
/* Jedes Fenster ist ein Knopf im Umriss (wie `.knopf-umriss` auf verify): Weiß mit Haarlinie,
   der Griff färbt die Kante blau. Der eine rote Vollknopf der Seite bleibt „Link schicken". */
.pk-fenster .knopf{
  width:100%; white-space:nowrap; background:#fff; color:var(--ink);
  border:1px solid var(--linie-m); font-size:1.0625rem; padding:12px 14px; min-height:52px;
}
.pk-fenster .knopf:hover{background:var(--blau-h); color:var(--blau-d); border-color:var(--blau)}
.pk-fenster .knopf:active{background:var(--blau-h); color:var(--blau-d)}

/* --- „Dein Termin" ------------------------------------------------------------------------- */
.pk-termin .pk-wann{font-size:1.1875rem; line-height:1.5; margin:0 0 14px}
.pk-termin .pk-wann b{font-size:1.375rem}
.pk-dl{margin:0 0 20px; padding:16px 0 0; border-top:1px solid var(--linie)}
.pk-dl dt{font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); margin:12px 0 3px}
.pk-dl dt:first-child{margin-top:0}
.pk-dl dd{margin:0}
.pk-aktionen{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 12px}
.pk-inline{display:inline; margin:0}

/* --- Fuß ----------------------------------------------------------------------------------- */
/* --ink2, nicht --ink3: Der Fuß liegt außerhalb des Blattes, also auf --grund und nicht auf
   Weiß. Dort misst --ink3 nur 4,32:1 und fällt bei 14px durch AA. */
.fuss{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:18px 22px 30px;
  color:var(--ink2); font-size:.875rem; max-width:760px; margin:0 auto}
/* Antippziele auch hier: 13,6px inline war unter der Schwelle aus WCAG 2.5.8. */
.fuss a{display:inline-block; padding:6px 2px; min-height:24px}
.fuss-rechts{margin-left:auto}

/* --- Bewegung ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* Im Windows-Kontrastmodus verwirft der Browser jeden box-shadow und ersetzt Farben systemweit.
   Ein Fokus, der nur aus einem Schein besteht, verschwindet dort restlos. */
@media (forced-colors:active){
  .pk-form input:focus, .knopf:focus-visible, .pk-tag:focus-visible{
    outline:3px solid Highlight; outline-offset:2px;
  }
  .pk-tag.an{border-width:3px}
}