/* ============================================================
   SWIFTLI SHOP — Gestaltung «Champagner auf Schwarz, auf
   Millimeterpapier» (DESIGN-ANFORDERUNG.md, FINAL 27.08.2026).

   Das Millimeterraster gehört exklusiv dem Shop; die Website trägt
   die Punkttextur. Ein einziges, dunkles Theme. Schriften lokal —
   dieselben Dateien wie die Website, keine Fremd-Hosts.
   ============================================================ */

/* ---------- Schriften, im Projekt statt von Google ---------- */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/archivo-400_800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/archivo-400_800-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F;
}

/* ---------- Token (final, dunkel — einziges Theme) ---------- */
:root{
  color-scheme:dark;
  --ground:#121212; --surface:#1C1C1C; --surface-2:#262626; --card:#1A1A1A;
  --optrow:#222222; --well:#0E0E0E;
  --ink:#F1EFE9; --ink-2:#C8C6C0; --dim:#A9A7A1;
  --accent:#E6D5AE; --accent-hi:#F2E6C9; --on-accent:#121212;
  --accent-line:rgba(230,213,174,.42); --accent-line-strong:rgba(230,213,174,.55);
  --accent-tint:rgba(230,213,174,.12);
  --cold:#7FB3C4; --cold-line:rgba(127,179,196,.40); --cold-tint:rgba(127,179,196,.12);
  --ok:#45AE72; --ok-line:rgba(69,174,114,.40); --ok-tint:rgba(69,174,114,.14);
  --warn:#D95A4E; --warn-line:rgba(217,90,78,.40); --warn-tint:rgba(217,90,78,.12);
  --line:rgba(241,239,233,.22); --line-2:rgba(241,239,233,.38); --line-fine:rgba(241,239,233,.14);
  --header-bg:rgba(18,18,18,.82);
  --grid-line:rgba(241,239,233,.06);
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fm:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;
  background-color:var(--ground);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:2rem 2rem;
  color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi);text-decoration:underline}
h1,h2,h3,h4,p{margin:0}
svg{display:block}

/* ---------- Typografie ---------- */
.eyeline{font-family:var(--fm);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0;font-weight:500}
.eyeline.accent{color:var(--accent)}
.h1{font-size:2.75rem;line-height:1.02;letter-spacing:-.032em;font-weight:700;text-wrap:balance}
.h1.kasse{font-size:2rem;line-height:1.05}
.h1.konto{font-size:2.25rem}
.h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.h3.kasse{font-size:1.25rem}
.lead{font-size:1.125rem;line-height:1.55;color:var(--dim)}
.small{font-size:.875rem;line-height:1.55;color:var(--dim);margin:0}
.small-13{font-size:.8125rem;line-height:1.55;color:var(--dim);margin:0}
.mono{font-family:var(--fm)}
.ink{color:var(--ink)}
.ink-2{color:var(--ink-2)}
.strong{font-weight:700}
.balance{text-wrap:balance}
.center{text-align:center}
.maxw-60{max-width:60ch}
.maxw-44{max-width:44ch;margin-left:auto;margin-right:auto}
.maxw-70{max-width:70ch}

/* ---------- Icons: ausschliesslich Stroke-SVGs ---------- */
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-15{width:15px;height:15px}
.ic-16{width:16px;height:16px}
.ic-17{width:17px;height:17px}
.ic-20{width:20px;height:20px;stroke-width:2}
.ic-22{width:22px;height:22px}
.ic-fat{stroke-width:2.2}
.ic-check-big{width:2.25rem;height:2.25rem;stroke-width:2.5}
.c-accent{color:var(--accent)}
.c-cold{color:var(--cold)}
.c-ok{color:var(--ok)}
.c-warn{color:var(--warn)}
.c-dim{color:var(--dim)}
.c-ink2{color:var(--ink-2)}
.mt-3{margin-top:3px}

/* Zusatz-Symbol im getönten Quadrat */
.tile{width:2rem;height:2rem;border-radius:.5rem;background:var(--accent-tint);
  border:1px solid var(--accent-line);display:grid;place-items:center;flex:none;
  color:var(--accent)}
.tile.cold{background:var(--cold-tint);border-color:var(--cold-line);color:var(--cold)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.6875rem 1.25rem;border-radius:.5rem;background:var(--accent);
  color:var(--on-accent);border:1px solid var(--accent-line);
  font-family:inherit;font-weight:600;font-size:.9375rem;line-height:1.4;
  text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.06);color:var(--on-accent);text-decoration:none}
.btn.q{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.q:hover{border-color:var(--accent);color:var(--accent);filter:none}
.btn.sm{padding:.5rem 1rem;font-size:.875rem}
.btn.big{padding:.875rem 1.25rem;font-size:1rem}
.btn.w100{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-leise{background:none;border:0;padding:0;font:inherit;font-size:.875rem;
  color:var(--dim);cursor:pointer}
.btn-leise:hover{color:var(--warn);text-decoration:underline}

/* ---------- Karten und Flächen ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem}
.card.pad{padding:1.75rem}
.card.pad-s{padding:1.25rem 1.5rem}
.card.accent{border-color:var(--accent-line)}
.card.accent-tint{background:var(--accent-tint);border-color:var(--accent-line)}
.hairline{height:1px;background:var(--line);border:0;margin:.25rem 0}
.hairline.fine{background:var(--line-fine);margin:0}
.hairline.accent{background:var(--accent-line)}

/* ---------- Optionszeilen (wählbar) ---------- */
.opt{border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.125rem;
  background:var(--optrow);display:flex;flex-direction:column;gap:.125rem;
  position:relative;cursor:pointer;font:inherit;color:inherit;text-align:left;width:100%}
.opt:hover{border-color:var(--line-2)}
.opt.on,.opt:has(> input:checked){border-color:var(--accent-line-strong);background:var(--accent-tint)}
.opt:has(> input:focus-visible){outline:2px solid var(--accent-line);outline-offset:2px}
.opt.row{flex-direction:row;align-items:center;gap:.875rem}
.opt .opt-eye{font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.opt.on .opt-eye,.opt:has(> input:checked) .opt-eye{color:var(--accent)}
.opt .opt-name{font-weight:700;font-size:1.0625rem}
.opt-haken{position:absolute;top:.75rem;right:.75rem;width:18px;height:18px;
  stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;display:none}
.opt.on .opt-haken,.opt:has(> input:checked) .opt-haken{display:block}
.opt-haken circle{fill:var(--accent-tint)}

/* Radiopunkt */
.radio{width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--optrow);flex:none}
.opt.on .radio,.opt:has(> input:checked) .radio{border:6px solid var(--accent);background:var(--well)}

/* Häkchenquadrat (Zusätze) */
.checksq{width:22px;height:22px;border-radius:.375rem;border:1px solid var(--line-2);
  background:var(--well);flex:none;display:grid;place-items:center;color:transparent}
.opt.on .checksq,.opt:has(> input:checked) .checksq{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.checksq svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.opt .opt-price{margin-left:auto;flex:none;font-family:var(--fm);
  font-size:.875rem;color:var(--ink-2)}
.opt-text{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.opt-title-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.opt.sub{margin-left:2.25rem}
.opt[hidden]{display:none}

/* ---------- Chips und Badges ---------- */
.chip{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;
  font-weight:600;border-radius:.375rem;padding:.1875rem .5rem}
.chip.ok{color:var(--ok);background:var(--ok-tint);border:1px solid var(--ok-line)}
.chip.warn{color:var(--warn);background:var(--warn-tint);border:1px solid var(--warn-line)}
.chip.cold{color:var(--cold);background:var(--cold-tint);border:1px solid var(--cold-line)}
.chip.frei{color:var(--dim);border:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;
  border-radius:.375rem;padding:.125rem .4375rem}
.badge.cold{color:var(--cold);background:var(--cold-tint);border:1px solid var(--cold-line)}
.badge.neutral{color:var(--dim);background:var(--surface);border:1px solid var(--line)}
.kartenmarke{font-family:var(--fm);font-size:.625rem;letter-spacing:.1em;
  border:1px solid var(--line);border-radius:.25rem;padding:.125rem .375rem;color:var(--dim)}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:.375rem}
.field>span{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.field input,.field select{font:inherit;font-size:.9375rem;color:var(--ink);
  border:1px solid var(--line-2);border-radius:.5rem;background:var(--well);
  padding:.6875rem .875rem;min-height:44px;width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--accent-line);outline-offset:1px}
/* Sichtbare Inline-Validierung: valider Zustand = grüner Rand UND Haken
   (Design-Anforderung 4) — der Haken als eingebettetes Stroke-SVG. */
.field input.valid,.field input:user-valid{
  border-color:rgba(69,174,114,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345AE72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5 9-10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .875rem center;
  background-size:16px 16px;
  padding-right:2.5rem;
}
.field input:user-invalid{border-color:var(--warn-line)}
.field .feld-fehler{font-size:.8125rem;color:var(--warn)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}
.form-stack{display:flex;flex-direction:column;gap:.875rem}
.form-fehler{border:1px solid var(--warn-line);background:var(--warn-tint);
  border-radius:.75rem;padding:.875rem 1.125rem;font-size:.875rem;color:var(--warn)}
.hinweis{border:1px solid var(--cold-line);background:var(--cold-tint);
  border-radius:.75rem;padding:.875rem 1.125rem;font-size:.875rem;color:var(--cold)}

/* Mandat-Checkbox */
.mandat{display:flex;gap:.75rem;align-items:flex-start;padding:0 .25rem;cursor:pointer}
.mandat input{position:absolute;opacity:0;width:1px;height:1px}
.mandat .mbox{width:20px;height:20px;border-radius:.375rem;border:1px solid var(--line-2);
  background:var(--well);flex:none;display:grid;place-items:center;margin-top:2px;
  color:transparent}
.mandat input:checked+.mbox{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent)}
.mandat input:focus-visible+.mbox{outline:2px solid var(--accent-line)}
.mandat .mbox svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kopf- und Fusszeile ---------- */
.kopf{display:flex;align-items:center;gap:1rem;height:64px;padding:0 48px}
.kopf.rand{background:var(--header-bg);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.marke{display:flex;align-items:center;gap:.5rem;font-weight:700;
  font-size:.9375rem;letter-spacing:-.015em;color:var(--ink)}
.marke:hover{text-decoration:none;color:var(--ink)}
.marke .logo{width:1.5rem;height:1.5rem;border-radius:.375rem;background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;font-size:.75rem;font-weight:800}
.marke .bereich{font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  border-radius:.375rem;padding:.125rem .5rem;margin-left:.25rem}
.kopf nav{display:flex;gap:1.375rem;font-size:.875rem;margin-left:1rem}
.kopf nav a{color:var(--ink-2)}
.kopf nav a:hover{color:var(--accent)}
.kopf .rechts{margin-left:auto;display:flex;align-items:center;gap:.875rem}
.sichere-kasse{display:inline-flex;align-items:center;gap:.4375rem;margin-left:auto;
  font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.av{width:1.75rem;height:1.75rem;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:.625rem;font-weight:700;background:var(--accent-tint);
  color:var(--accent);border:1px solid var(--accent-line);font-family:var(--fm)}
.av.frei{background:var(--surface);color:var(--dim);border-color:var(--line)}
.abmelden-form{display:flex}

.fuss{border-top:1px solid var(--line);padding:1.5rem 48px;display:flex;
  gap:1.375rem;align-items:center;flex-wrap:wrap}
.fuss .links{margin-left:auto;display:flex;gap:1.375rem}
.fuss a{color:var(--dim);font-size:.875rem}
.fuss a:hover{color:var(--accent)}
.fuss .host{font-size:.875rem;color:var(--dim)}

/* ---------- Seitenrahmen ---------- */
.rahmen{max-width:1280px;margin:0 auto;padding:56px 48px 88px}
.rahmen.kasse{max-width:1080px;padding:32px 48px 88px}
.rahmen.danke{max-width:720px;padding:48px 48px 88px;text-align:center}
.rahmen.konto{max-width:1180px;padding:48px 48px 88px}
.rahmen.schmal{max-width:560px;padding:48px 48px 88px}
.rahmen.lesen{max-width:760px;padding:48px 48px 88px}

/* ---------- Konfigurator ---------- */
.konfig-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:2rem;align-items:start;margin-top:2.5rem}
.schritte{display:flex;flex-direction:column;gap:1.5rem}
.optionen-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.875rem;margin-top:1.25rem}
.optionen-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem;margin-top:1.25rem}
.optionen-1{display:flex;flex-direction:column;gap:.875rem;margin-top:1.25rem}

.seatzeile{display:flex;align-items:center;gap:.625rem;margin-top:.375rem}
.seatzeile input{width:5.5rem;text-align:center;font-family:var(--fm);
  font-size:.9375rem;color:var(--ink);border:1px solid var(--line-2);
  border-radius:.5rem;background:var(--well);padding:.375rem .5rem;min-height:38px}
.seat-step{width:38px;height:38px;border-radius:.5rem;border:1px solid var(--line-2);
  background:var(--well);color:var(--ink);font-size:1.125rem;cursor:pointer;font-family:var(--fm)}
.seat-step:hover{border-color:var(--accent);color:var(--accent)}

.zusammen{position:sticky;top:24px;display:flex;flex-direction:column;gap:1rem}
.zusammen-liste{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.zeile{display:flex;align-items:baseline;gap:.75rem}
.zeile .zeile-text p:first-child{font-weight:600;font-size:.9375rem}
.zeile .zeile-betrag{margin-left:auto;font-family:var(--fm);font-size:.9375rem;white-space:nowrap}
.zeile .zeile-betrag.minus{color:var(--cold)}
.total-zeile{display:flex;align-items:baseline}
.total-zeile .total-label{font-weight:700}
.total-zeile .total-betrag{margin-left:auto;font-family:var(--fm);
  font-size:1.375rem;font-weight:600;color:var(--accent);white-space:nowrap}
.vertrauen{display:flex;flex-direction:column;gap:.625rem;padding:0 .25rem}
.vertrauen .punkt{display:flex;gap:.625rem;align-items:flex-start}

/* ---------- Kasse ---------- */
.kasse-schritte{font-family:var(--fm);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 1.25rem}
.kasse-schritte .fertig{color:var(--ok)}
.kasse-schritte .aktiv{color:var(--accent);font-weight:600}
.kasse-schritte .trenn{padding:0 .5rem}
.kasse-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1.5rem;align-items:start;margin-top:2rem}
.kasse-spalte{display:flex;flex-direction:column;gap:1rem}
.produktkopf{display:flex;align-items:center;gap:.75rem}
.produktkopf .logo-gross{width:2.5rem;height:2.5rem;border-radius:.625rem;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
  font-weight:800;font-size:1.125rem;flex:none}
.konto-chip{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem}
.konto-chip .konto-text{min-width:0}
.konto-chip .aendern{margin-left:auto;font-size:.875rem;flex:none}
.zahlarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.kartenbereich{border:1px solid var(--accent-line);border-radius:1rem;
  background:var(--card);overflow:hidden}
.kartenbereich .schutzzeile{display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1.25rem;background:var(--accent-tint);
  border-bottom:1px solid var(--accent-line)}
.kartenbereich .schutzzeile .schutz-text{font-size:.8125rem;font-weight:600;color:var(--accent)}
.kartenbereich .schutzzeile .pci{margin-left:auto;font-family:var(--fm);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.kartenbereich .karteninhalt{padding:1.25rem;display:flex;flex-direction:column;gap:.875rem}
.kartenmarken{display:flex;gap:.375rem;flex-wrap:wrap}
#sumup-card iframe{border:0;width:100%}
.qr-bereich{border:1px solid var(--line);border-radius:1rem;background:var(--card);
  padding:1.25rem;display:flex;flex-direction:column;gap:.625rem}

/* ---------- Bestätigung ---------- */
.danke-kreis{width:4.5rem;height:4.5rem;border-radius:50%;background:var(--accent);
  display:inline-grid;place-items:center;box-shadow:0 40px 90px -46px rgba(0,0,0,.9);
  color:var(--on-accent)}
.danke-schritte{display:flex;flex-direction:column;gap:.875rem;margin-top:2.5rem;text-align:left}
.danke-schritt{display:flex;align-items:center;gap:1rem}
.schritt-nr{width:2rem;height:2rem;border-radius:50%;border:1px solid var(--accent-line);
  background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;
  font-size:.8125rem;font-weight:600;flex:none;font-family:var(--fm)}
.danke-schritt .schritt-text{min-width:0}
.danke-schritt .btn{margin-left:auto;flex:none}

/* ---------- Kundenkonto ---------- */
.verzug{display:flex;gap:.875rem;align-items:flex-start;border:1px solid var(--warn-line);
  background:var(--warn-tint);border-radius:1rem;padding:1.25rem 1.5rem;margin-top:1.5rem}
.verzug .verzug-titel{font-weight:700;font-size:.9375rem;color:var(--warn);margin:0}
.verzug .btn{margin-left:auto;flex:none}
.konto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;
  margin-top:1.5rem;align-items:start}
.karten-titel{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.karten-titel .btn{margin-left:auto}
.eigenschaften{display:flex;flex-direction:column;gap:.875rem;margin-top:1.25rem}
.eigenschaft{display:flex;align-items:baseline;gap:.75rem}
.eigenschaft .wert{margin-left:auto;font-weight:600;font-size:.9375rem;text-align:right}
.eigenschaft .wert.mono-dim{font-family:var(--fm);font-size:.8125rem;
  color:var(--dim);font-weight:400}
.kartenzeile{display:flex;align-items:center;gap:.75rem}
.kartenzeile .chip{margin-left:auto}
.aktionen{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.25rem;align-items:center}
.aktionen .rechtsbuendig{margin-left:auto}
.zusatzliste{display:flex;flex-direction:column;gap:1rem;margin-top:1.25rem}
.zusatz{display:flex;align-items:center;gap:.75rem}
.zusatz .chip{margin-left:auto}
.zusatz .zusatz-text p:first-child{font-weight:600;font-size:.9375rem}

/* Tabellen als Grid-Zeilen */
.tab-kopf,.tab-zeile{display:grid;gap:1rem;align-items:center}
.tab-kopf{padding:.5rem 0;border-bottom:1px solid var(--line)}
.tab-kopf span{font-family:var(--fm);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.tab-zeile{padding:.875rem 0;border-bottom:1px solid var(--line-fine)}
.tab-zeile:last-child{border-bottom:0}
.seats-spalten{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
.rech-spalten{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) 3rem}
.ta-r{text-align:right}
.js-end{justify-self:end}
.seatname{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;font-weight:600}
.seatname.frei{color:var(--dim)}

/* Fortschrittsbalken (Seat-Periode), Breite in 5 %-Schritten */
.balken{display:flex;align-items:center;gap:.625rem}
.balken .spur{display:block;flex:1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.balken .lauf{display:block;height:6px;background:var(--accent)}
.p0{width:0}.p5{width:5%}.p10{width:10%}.p15{width:15%}.p20{width:20%}
.p25{width:25%}.p30{width:30%}.p35{width:35%}.p40{width:40%}.p45{width:45%}
.p50{width:50%}.p55{width:55%}.p60{width:60%}.p65{width:65%}.p70{width:70%}
.p75{width:75%}.p80{width:80%}.p85{width:85%}.p90{width:90%}.p95{width:95%}
.p100{width:100%}

/* ---------- Rechtstexte ---------- */
.recht h1{font-size:2rem;line-height:1.1;letter-spacing:-.032em;margin:0 0 1rem}
.recht h2{font-size:1.25rem;line-height:1.25;letter-spacing:-.02em;margin:2rem 0 .625rem}
.recht h3{font-size:1.0625rem;margin:1.5rem 0 .5rem}
.recht p{margin:.75rem 0;color:var(--ink-2)}
.recht li{color:var(--ink-2);margin:.375rem 0}
.recht blockquote{border-left:3px solid var(--accent-line);margin:1rem 0;
  padding:.25rem 0 .25rem 1.25rem;background:var(--accent-tint);border-radius:0 .5rem .5rem 0}
.recht blockquote p{color:var(--ink)}
.recht hr{border:0;height:1px;background:var(--line);margin:2rem 0}
.recht strong{color:var(--ink)}

/* ---------- Diverses ---------- */
.stack-05{display:flex;flex-direction:column;gap:.5rem}
.stack-1{display:flex;flex-direction:column;gap:1rem}
.stack-15{display:flex;flex-direction:column;gap:1.5rem}
.rowline{display:flex;align-items:center;gap:.75rem}
.mt-05{margin-top:.5rem}.mt-075{margin-top:.75rem}.mt-1{margin-top:1rem}
.mt-125{margin-top:1.25rem}.mt-15{margin-top:1.5rem}.mt-25{margin-top:2.5rem}
.mb-1{margin-bottom:1rem}
.gap-05{gap:.5rem}
[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--accent);
  color:var(--on-accent);padding:.5rem 1rem;border-radius:.5rem}

/* ---------- Responsiv ---------- */
@media (max-width: 1020px){
  .konfig-grid{grid-template-columns:minmax(0,1fr)}
  .zusammen{position:static}
  .kasse-grid{grid-template-columns:minmax(0,1fr)}
  .konto-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  body{font-size:16px}
  .kopf{height:auto;min-height:56px;flex-wrap:wrap;row-gap:.25rem;
    padding:.5rem 20px;column-gap:.75rem}
  .kopf nav{gap:1rem;margin-left:0}
  .rahmen,.rahmen.kasse,.rahmen.danke,.rahmen.konto,.rahmen.schmal,.rahmen.lesen{
    padding-left:20px;padding-right:20px;padding-top:32px}
  .fuss{padding:1.5rem 20px}
  .h1{font-size:2.125rem}
  .optionen-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .optionen-2,.zahlarten,.form-grid{grid-template-columns:minmax(0,1fr)}
  .card.pad{padding:1.25rem}
  .opt.sub{margin-left:1rem}
  .seats-spalten{grid-template-columns:minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,1fr)}
  .seats-spalten .sp-aktiviert{display:none}
  .rech-spalten{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) 2.5rem}
  .rech-spalten .sp-datum,.rech-spalten .sp-betreff{display:none}
  .danke-schritt{flex-wrap:wrap}
  .verzug{flex-wrap:wrap}
  .verzug .btn{margin-left:0}
}
@media (max-width: 460px){
  .optionen-3{grid-template-columns:minmax(0,1fr)}
}