/* =============================================================================
   Snackautomat 24/7 Gößweinstein
   Design: eine variable Schrift (Archivo), lokal gehostet.
   Aufbau: Handy zuerst, Bedienung als Schritt-für-Schritt-Ablauf.
   ============================================================================= */

@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ---------- Marken- und Systemwerte ---------- */
:root{
  /* Flächen, von tief nach hoch */
  --bg:            #0a0a0b;
  --flaeche:       #141416;
  --flaeche-hoch:  #1d1d21;
  --linie:         rgba(255,255,255,.09);
  --linie-stark:   rgba(255,255,255,.16);

  /* Schrift */
  --text:          #ffffff;
  --text-2:        #9d9da6;
  --text-3:        #63636c;

  /* Akzent — das Gelb vom Aufkleber */
  --gelb:          #f5c518;
  --gelb-hell:     #ffd83d;
  --gelb-tief:     rgba(245,197,24,.12);
  --auf-gelb:      #0a0a0b;

  --rot:           #ff5d4e;
  --rot-tief:      rgba(255,93,78,.12);
  --gruen:         #3fcf8e;

  /* Abstände: 4er-Raster */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --s9:56px; --s10:72px;

  --r-klein:10px;
  --r:16px;
  --r-gross:22px;
  --r-rund:999px;

  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --tempo:180ms;
  --kurve:cubic-bezier(.22,.61,.36,1);

  --spalte:min(100% - 40px, 540px);
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  font-weight:400;
  font-stretch:100%;
  line-height:1.55;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  min-height:100svh;
}

/* Gelbe Kante links — greift den Aufkleber auf */
body::before{
  content:"";
  position:fixed;
  inset:0 auto 0 0;
  width:5px;
  background:var(--gelb);
  z-index:60;
}

.spalte{width:var(--spalte);margin-inline:auto;padding-left:6px;}

img{max-width:100%;display:block;}
svg{flex:0 0 auto;}

::selection{background:var(--gelb);color:var(--auf-gelb);}

:focus-visible{
  outline:2.5px solid var(--gelb);
  outline-offset:3px;
  border-radius:6px;
}

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

/* =============================================================================
   Kopfleiste mit Fortschritt
   ============================================================================= */
.kopfleiste{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--tempo) var(--kurve);
}
.kopfleiste[data-gescrollt="ja"]{border-bottom-color:var(--linie);}

.kopfleiste-innen{
  display:flex;align-items:center;gap:var(--s4);
  height:56px;
}

.zurueck{
  display:grid;place-items:center;
  width:38px;height:38px;margin-left:-9px;
  border:0;border-radius:var(--r-rund);
  background:transparent;color:var(--text);
  cursor:pointer;
  transition:background var(--tempo) var(--kurve),opacity var(--tempo);
}
.zurueck:hover{background:var(--flaeche-hoch);}
.zurueck[hidden]{display:none;}

.fortschritt{display:flex;gap:5px;flex:1 1 auto;max-width:120px;}
.fortschritt span{
  height:3px;flex:1;border-radius:var(--r-rund);
  background:var(--linie-stark);
  transition:background 260ms var(--kurve);
}
.fortschritt span[data-an="ja"]{background:var(--gelb);}

.schrittzahl{
  margin-left:auto;
  font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* =============================================================================
   Bühne + Schritte
   ============================================================================= */
main{padding-bottom:var(--s8);}

.schritt{padding-top:var(--s6);}

/* Ohne JavaScript bleiben alle Schritte sichtbar (Formular funktioniert trotzdem) */
.js-stepper .schritt[hidden]{display:none;}
.js-stepper .schritt:not([hidden]){
  animation:reinschieben 320ms var(--kurve) both;
}
@keyframes reinschieben{
  from{opacity:0;transform:translateY(10px);}
  to  {opacity:1;transform:none;}
}

/* ---------- Kopf des ersten Schritts ---------- */
.marke{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 10px;
  margin-bottom:var(--s5);
  border:1px solid var(--linie);
  border-radius:var(--r-rund);
  background:var(--flaeche);
  color:var(--text-2);
  font-size:13px;font-weight:500;
  text-decoration:none;
  transition:border-color var(--tempo) var(--kurve),color var(--tempo);
}
.marke:hover{border-color:var(--linie-stark);color:var(--text);}
.marke svg{color:var(--gelb);}

h1{
  font-size:clamp(2.6rem,12.5vw,3.9rem);
  font-weight:900;
  font-stretch:72%;
  line-height:.9;
  letter-spacing:-.012em;
  text-transform:uppercase;
  margin:0 0 var(--s4);
  text-wrap:balance;
}

h2{
  font-size:clamp(1.75rem,7.5vw,2.3rem);
  font-weight:900;
  font-stretch:76%;
  line-height:.98;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 var(--s3);
  text-wrap:balance;
}

h3{
  font-size:1rem;font-weight:700;
  margin:var(--s6) 0 var(--s2);
}

.vorspann{
  color:var(--text-2);
  font-size:1.03rem;
  margin:0 0 var(--s6);
  max-width:33ch;
  text-wrap:pretty;
}

/* =============================================================================
   Schritt 1 — Auswahl
   ============================================================================= */
.auswahl{
  display:grid;gap:var(--s2);
  /* minmax(0,…) verhindert, dass lange Unterzeilen die Karte breiter
     als die Spalte machen */
  grid-template-columns:minmax(0,1fr);
  border:0;padding:0;margin:0;
}
.auswahl legend{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);
}

.auswahl input{
  position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

.wahl{
  display:flex;align-items:center;gap:var(--s4);
  min-height:74px;padding:var(--s4) var(--s5) var(--s4) var(--s4);
  background:var(--flaeche);
  border:1.5px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  transition:background var(--tempo) var(--kurve),
             border-color var(--tempo) var(--kurve),
             transform 90ms var(--kurve);
}
.wahl:hover{background:var(--flaeche-hoch);}
.wahl:active{transform:scale(.99);}

.wahl-symbol{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  background:var(--flaeche-hoch);
  color:var(--gelb);
  transition:background var(--tempo) var(--kurve),color var(--tempo);
}

.wahl-text{flex:1 1 auto;min-width:0;}
.wahl-titel{
  display:block;
  font-weight:650;font-size:1.02rem;
  letter-spacing:-.008em;
  line-height:1.3;
}
.wahl-sub{
  display:block;
  color:var(--text-2);
  font-size:.855rem;line-height:1.35;
  margin-top:2px;
  text-wrap:pretty;
}

.wahl-pfeil{color:var(--text-3);transition:transform var(--tempo) var(--kurve),color var(--tempo);}
.wahl:hover .wahl-pfeil{transform:translateX(3px);color:var(--text-2);}

.auswahl input:checked + .wahl{
  border-color:var(--gelb);
  background:var(--flaeche-hoch);
}
.auswahl input:checked + .wahl .wahl-symbol{
  background:var(--gelb);color:var(--auf-gelb);
}
.auswahl input:focus-visible + .wahl{
  outline:2.5px solid var(--gelb);
  outline-offset:3px;
}

/* =============================================================================
   Formularfelder
   ============================================================================= */
.feld{margin-bottom:var(--s6);}

.feld-name{
  display:block;
  font-size:.92rem;font-weight:650;
  letter-spacing:-.005em;
  margin-bottom:var(--s2);
}
.feld-name .zusatz{font-weight:400;color:var(--text-3);}
.feld-name .pflicht{color:var(--gelb);}

input[type="text"],input[type="tel"],input[type="email"],textarea{
  width:100%;
  padding:16px;
  background:var(--flaeche);
  border:1.5px solid var(--linie);
  border-radius:var(--r);
  color:var(--text);
  font-family:inherit;font-size:1rem;
  line-height:1.45;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--tempo) var(--kurve),background var(--tempo);
}
input::placeholder,textarea::placeholder{color:var(--text-3);}
input:hover,textarea:hover{border-color:var(--linie-stark);}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--gelb);
  background:var(--flaeche-hoch);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--rot);}

textarea{min-height:112px;resize:vertical;}

.hilfe{
  color:var(--text-3);
  font-size:.855rem;
  margin:var(--s2) 0 0;
}

.fehler{
  display:flex;align-items:flex-start;gap:7px;
  color:var(--rot);
  font-size:.875rem;
  margin:var(--s2) 0 0;
}
.fehler[hidden]{display:none;}
.fehler svg{margin-top:2px;}

/* ---------- Fotos ---------- */
.foto-eingabe{
  position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

.foto-flaeche{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s2);
  padding:var(--s7) var(--s5);
  background:var(--flaeche);
  border:1.5px dashed var(--linie-stark);
  border-radius:var(--r);
  cursor:pointer;
  text-align:center;
  transition:border-color var(--tempo) var(--kurve),
             background var(--tempo) var(--kurve),
             transform 90ms var(--kurve);
}
.foto-flaeche:hover{border-color:var(--gelb);background:var(--flaeche-hoch);}
.foto-flaeche:active{transform:scale(.995);}
.foto-eingabe:focus-visible + .foto-flaeche{outline:2.5px solid var(--gelb);outline-offset:3px;}
.foto-flaeche.zieht{border-color:var(--gelb);background:var(--gelb-tief);}

.foto-flaeche .kamera{
  display:grid;place-items:center;
  width:48px;height:48px;
  border-radius:var(--r-rund);
  background:var(--flaeche-hoch);
  color:var(--gelb);
  margin-bottom:var(--s1);
}
.foto-titel{font-weight:650;font-size:.98rem;}
.foto-sub{color:var(--text-3);font-size:.85rem;}

.foto-liste{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s2);
  margin-top:var(--s3);
}
.foto-liste:empty{display:none;}

.foto{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--r-klein);
  overflow:hidden;
  background:var(--flaeche-hoch);
  animation:auftauchen 240ms var(--kurve) both;
}
@keyframes auftauchen{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}

.foto img{width:100%;height:100%;object-fit:cover;}

.foto-weg{
  position:absolute;top:6px;right:6px;
  display:grid;place-items:center;
  width:26px;height:26px;
  border:0;border-radius:var(--r-rund);
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;padding:0;
  transition:background var(--tempo) var(--kurve);
}
.foto-weg:hover{background:var(--rot);color:var(--auf-gelb);}

/* =============================================================================
   Fußleiste mit Hauptknopf
   ============================================================================= */
.fussleiste{
  position:sticky;bottom:0;z-index:40;
  padding-top:var(--s6);
  padding-bottom:max(var(--s5),env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 58%,rgba(10,10,11,0));
}
.fussleiste[hidden]{display:none;}

.knopf{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:58px;
  padding:0 var(--s6);
  border:0;border-radius:var(--r);
  background:var(--gelb);
  color:var(--auf-gelb);
  font-family:inherit;font-size:1.05rem;font-weight:700;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background var(--tempo) var(--kurve),transform 90ms var(--kurve);
}
.knopf:hover:not(:disabled){background:var(--gelb-hell);}
.knopf:active:not(:disabled){transform:scale(.99);}
.knopf:disabled{background:var(--flaeche-hoch);color:var(--text-3);cursor:not-allowed;}

.kreisel{
  width:18px;height:18px;
  border:2.5px solid rgba(10,10,11,.25);
  border-top-color:var(--auf-gelb);
  border-radius:var(--r-rund);
  animation:drehen .7s linear infinite;
}
@keyframes drehen{to{transform:rotate(360deg);}}

.sendefehler{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;margin-bottom:var(--s3);
  background:var(--rot-tief);
  border:1px solid rgba(255,93,78,.4);
  border-radius:var(--r-klein);
  color:var(--rot);
  font-size:.9rem;
}
.sendefehler[hidden]{display:none;}
.sendefehler svg{margin-top:2px;}

/* =============================================================================
   Abschluss
   ============================================================================= */
.fertig{
  text-align:center;
  padding:var(--s10) 0 var(--s8);
}
.fertig-haken{
  display:grid;place-items:center;
  width:76px;height:76px;margin:0 auto var(--s6);
  border-radius:var(--r-rund);
  background:var(--gelb);
  color:var(--auf-gelb);
  animation:haken-rein 420ms var(--kurve) both;
}
@keyframes haken-rein{
  from{opacity:0;transform:scale(.7);}
  60% {transform:scale(1.04);}
  to  {opacity:1;transform:none;}
}
.fertig p{color:var(--text-2);margin:0 auto;max-width:30ch;}

.fertig-karte{
  margin-top:var(--s7);
  padding:var(--s5);
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--r);
  text-align:left;
}
.fertig-karte dl{display:grid;gap:var(--s2);margin:0;}
.fertig-karte .zeile{display:flex;justify-content:space-between;gap:var(--s4);}
.fertig-karte dt{color:var(--text-3);font-size:.9rem;}
.fertig-karte dd{margin:0;font-weight:600;font-size:.9rem;text-align:right;}

/* =============================================================================
   Fragen (Akkordeon)
   ============================================================================= */
.fragen{border-top:1px solid var(--linie);margin-top:var(--s9);padding-top:var(--s7);}

details{border-bottom:1px solid var(--linie);}
details summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:18px 0;
  font-weight:600;font-size:.98rem;
  transition:color var(--tempo);
}
details summary::-webkit-details-marker{display:none;}
details summary:hover{color:var(--gelb);}
details summary .kreuz{
  flex:0 0 auto;
  color:var(--gelb);
  transition:transform 240ms var(--kurve);
}
details[open] summary .kreuz{transform:rotate(45deg);}
details .inhalt{
  color:var(--text-2);
  font-size:.95rem;
  padding:0 0 20px;
  margin:0;
  max-width:46ch;
}

/* =============================================================================
   Rechtstexte + Fuß
   ============================================================================= */
.rechtstext{display:none;padding-top:var(--s7);}
.rechtstext:target{display:block;}
.rechtstext p{color:var(--text-2);font-size:.94rem;}
.rechtstext .zurueck-link{
  display:inline-block;margin-top:var(--s6);
  color:var(--gelb);font-weight:650;text-decoration:none;
}
.rechtstext .zurueck-link:hover{text-decoration:underline;}

.platzhalter{
  color:var(--gelb);
  background:var(--gelb-tief);
  padding:1px 7px;border-radius:5px;
  font-weight:600;
}

footer{
  border-top:1px solid var(--linie);
  margin-top:var(--s9);
  padding:var(--s7) 0 var(--s9);
  color:var(--text-3);
  font-size:.855rem;
}
footer nav{display:flex;gap:var(--s6);margin-bottom:var(--s4);}
footer a{color:var(--text-2);text-decoration:none;}
footer a:hover{color:var(--text);text-decoration:underline;}
footer p{margin:0;line-height:1.6;}

/* =============================================================================
   Größere Schirme
   ============================================================================= */
@media (min-width:600px){
  body{font-size:17.5px;}
  .schritt{padding-top:var(--s7);}
  .foto-liste{grid-template-columns:repeat(4,1fr);}
}

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