/*
 * WINKU-SUPPORT 2 — Nutzer-Seiten /support und /support/ticket/<nr> (15.10.2026, supportsystem/seiten.php).
 * Werte aus den Tokens des Neubaus (rahmen.css) mit Rückfall auf die Farben der alten site.css — die Seite sieht mit und
 * ohne Rahmen richtig aus. Dunkel wie die alte Seite (sie kennt kein helles Aussehen). Alle Flächen DECKEND (Memory
 * „Durchsichtige Bedienflächen"), Fingerziele ≥ 44 px, nichts breiter als der Bildschirm (375 px geprüft).
 * Klassen nur mit „sp-" — site.css und rahmen.css vergeben sie nicht.
 */
.sp {
  --sp-grund: var(--grund, #0b0f19);
  --sp-flaeche: var(--flaeche, #121726);
  --sp-flaeche-2: var(--flaeche-2, #171d2e);
  --sp-flaeche-3: var(--flaeche-3, #1e2538);
  --sp-rand: var(--rand, #222a3d);
  --sp-rand-stark: var(--rand-stark, #2e3750);
  --sp-text: var(--text, #e5e7eb);
  --sp-stark: var(--text-stark, #fff);
  --sp-leise: var(--text-leise, #9ca3af);
  --sp-zart: var(--text-zart, #858d9f);
  --sp-m1: var(--marke-1, #7c3aed);
  --sp-m2: var(--marke-2, #06b6d4);
  --sp-k1: var(--knopf-1, #7c3aed);
  --sp-k2: var(--knopf-2, #047f94);
  --sp-gut: var(--gut, #22c55e);
  --sp-gut-t: var(--gut-text, #86efac);
  --sp-warn: var(--warnung, #f59e0b);
  --sp-warn-t: var(--warnung-text, #fcd34d);
  --sp-fehler: var(--fehler, #ef4444);
  --sp-fehler-t: var(--fehler-text, #fca5a5);
  --sp-info-t: var(--info-text, #93c5fd);
  --sp-fokus: var(--fokus, #22d3ee);
  --sp-r-karte: var(--radius-karte, 1.125rem);
  --sp-r-mittel: var(--radius-mittel, .875rem);
  --sp-r-feld: var(--radius-feld, .75rem);
  --sp-kurve: var(--kurve, cubic-bezier(.2, .7, .2, 1));
  --sp-dauer: var(--dauer-mittel, 260ms);
  color: var(--sp-text);
}
.sp.support { max-width: 1140px; margin-inline: auto; padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sp a { color: inherit; }
.sp :focus-visible { outline: 2px solid var(--sp-fokus); outline-offset: 2px; }
.sp .ic { inline-size: 1.05em; block-size: 1.05em; flex: none; vertical-align: -.16em; }
.sp [hidden] { display: none !important; }

/* ── Seitenkopf ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.sp-seitenkopf { text-align: center; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); max-inline-size: 44rem; }
.sp-ueber {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; padding: .35rem .85rem; border-radius: 999px;
  font-size: .8rem; font-weight: 650; letter-spacing: .02em; color: var(--sp-stark);
  background: color-mix(in srgb, var(--sp-m1) 22%, var(--sp-flaeche)); border: 1px solid color-mix(in srgb, var(--sp-m1) 45%, var(--sp-rand));
}
.sp-seitenkopf h1 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.028em; color: var(--sp-stark); }
.sp-intro { margin: 0 auto; color: var(--sp-leise); font-size: 1.05rem; line-height: 1.5; }

/* ── Raster /support: Liste + Formular ───────────────────────────────────────────────────────────────────────────── */
.sp-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start; }
.sp-raster.ohne-anfragen { grid-template-columns: minmax(0, 1fr); max-inline-size: 760px; margin-inline: auto; }
.sp-raster.ohne-anfragen .sp-neu { order: -1; }
@media (min-width: 62rem) {
  .sp-raster:not(.ohne-anfragen) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .sp-raster:not(.ohne-anfragen) .sp-neu { position: sticky; top: calc(var(--kopf-hoehe, 4.25rem) + 1rem); }
}

.sp .sp-karte { padding: clamp(1rem, 3vw, 1.5rem); gap: 1rem; min-inline-size: 0; }
.sp-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.sp-karte-kopf h2, .sp .sp-karte > h2, .sp-bewertung h2 { margin: 0; font-size: 1.15rem; font-weight: 750; letter-spacing: -.015em; color: var(--sp-stark); display: flex; align-items: center; gap: .5rem; }
.sp-zahl {
  display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding: 0 .45rem; border-radius: 999px;
  font-size: .78rem; font-weight: 750; color: #fff; background: linear-gradient(120deg, var(--sp-k1), var(--sp-k2));
}

/* Live-Anzeige: grüner Puls, wenn der Strom steht */
.sp-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 650; color: var(--sp-leise); text-transform: uppercase; letter-spacing: .06em; }
.sp-live i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--sp-zart); }
.sp-live.an { color: var(--sp-gut-t); }
.sp-live.an i { background: var(--sp-gut); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-gut) 60%, transparent); animation: sp-puls 2s infinite; }
@keyframes sp-puls { 70% { box-shadow: 0 0 0 .45rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .sp-live.an i { animation: none; } }

/* Filter als Reiter */
.sp-filter { display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: var(--sp-grund); border: 1px solid var(--sp-rand); inline-size: fit-content; max-inline-size: 100%; }
.sp-filter a { padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--sp-leise); text-decoration: none; min-block-size: 2.2rem; display: inline-flex; align-items: center; }
.sp-filter a:hover { color: var(--sp-stark); background: var(--sp-flaeche-2); }
.sp-filter a[aria-current] { color: var(--sp-stark); background: var(--sp-flaeche-3); box-shadow: inset 0 0 0 1px var(--sp-rand-stark); }

/* ── Zeilen der Liste ─────────────────────────────────────────────────────────────────────────────────────────────── */
.sp-zeilen { display: flex; flex-direction: column; gap: .5rem; }
.sp-zeile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .85rem; align-items: center;
  padding: .8rem .9rem; border-radius: var(--sp-r-mittel); text-decoration: none; color: var(--sp-text);
  background: var(--sp-flaeche-2); border: 1px solid var(--sp-rand);
  transition: border-color var(--sp-dauer) var(--sp-kurve), background-color var(--sp-dauer) var(--sp-kurve), transform var(--sp-dauer) var(--sp-kurve);
}
.sp-zeile:hover { border-color: color-mix(in srgb, var(--sp-m2) 55%, var(--sp-rand-stark)); background: var(--sp-flaeche-3); transform: translateY(-1px); }
.sp-zeile.ist-ungelesen { border-color: color-mix(in srgb, var(--sp-m1) 55%, var(--sp-rand)); background: color-mix(in srgb, var(--sp-m1) 9%, var(--sp-flaeche-2)); }
.sp-zeile.ist-neu { animation: sp-auftauchen .6s var(--sp-kurve); }
@keyframes sp-auftauchen { from { opacity: 0; transform: translateY(-6px); box-shadow: 0 0 0 2px var(--sp-m2); } }
.sp-zeile-mitte { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.sp-zeile-betreff { font-weight: 650; color: var(--sp-stark); overflow-wrap: anywhere; line-height: 1.35; }
.sp-zeile.ist-ungelesen .sp-zeile-betreff { font-weight: 750; }
.sp-zeile-vorschau { color: var(--sp-leise); font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sp-zeile-meta { color: var(--sp-zart); font-size: .78rem; }
.sp-zeile-rechts { display: flex; align-items: center; gap: .5rem; }
.sp-punkt { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--sp-m2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-m2) 25%, var(--sp-flaeche-2)); }
@media (max-width: 30rem) {
  .sp-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .sp-zeile-rechts { grid-column: 2; justify-self: start; }
}
.sp-leer { display: grid; justify-items: center; gap: .6rem; padding: 2rem 1rem; text-align: center; color: var(--sp-leise); }
.sp-leer .ic { inline-size: 2.2rem; block-size: 2.2rem; color: var(--sp-m2); }
.sp-leer p { margin: 0; max-inline-size: 30rem; line-height: 1.5; }
.sp-leer-filter { margin: .5rem 0; color: var(--sp-leise); text-align: center; }

/* Produktzeichen */
.sp-logo { --g: 36px; inline-size: var(--g); block-size: var(--g); flex: none; display: inline-grid; place-items: center; border-radius: 28%; overflow: hidden; background: var(--sp-flaeche-3); }
.sp-logo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sp-logo-buchstabe, .sp-logo-winku { background: linear-gradient(135deg, var(--sp-m1), var(--sp-m2)); color: #fff; font-weight: 800; font-size: calc(var(--g) * .45); }
.sp-logo-winku .ic { inline-size: 55%; block-size: 55%; }

/* Schilder */
.sp-schild {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; white-space: nowrap;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; border: 1px solid;
}
.sp-schild::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; }
.sp-st-open { color: var(--sp-info-t); background: color-mix(in srgb, var(--sp-m2) 14%, var(--sp-flaeche)); border-color: color-mix(in srgb, var(--sp-m2) 40%, var(--sp-rand)); }
.sp-st-answered { color: var(--sp-gut-t); background: color-mix(in srgb, var(--sp-gut) 14%, var(--sp-flaeche)); border-color: color-mix(in srgb, var(--sp-gut) 40%, var(--sp-rand)); }
.sp-st-closed { color: var(--sp-leise); background: var(--sp-flaeche-3); border-color: var(--sp-rand-stark); }
.sp-art-schild { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 650; padding: .15rem .55rem; border-radius: 999px; background: var(--sp-flaeche-3); }
.sp-art-fehler { color: var(--sp-fehler-t); }
.sp-art-feedback { color: #c4b5fd; }
.sp-art-frage { color: var(--sp-info-t); }

/* ── Formular „Neue Anfrage" ──────────────────────────────────────────────────────────────────────────────────────── */
.sp-formular { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.sp .sp-feld { display: flex; flex-direction: column; gap: .4rem; margin: 0; font-size: .85rem; font-weight: 600; color: var(--sp-leise); }
.sp .sp-feld :is(input, select, textarea) {
  inline-size: 100%; margin: 0; padding: .75rem .9rem; border-radius: var(--sp-r-feld); border: 1px solid var(--sp-rand-stark);
  background: color-mix(in srgb, var(--sp-grund) 60%, var(--sp-flaeche)); color: var(--sp-text); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.45;
}
.sp .sp-feld textarea { resize: vertical; min-block-size: 6.5rem; }
.sp .sp-feld :is(input, select, textarea):focus { outline: 2px solid var(--sp-fokus); outline-offset: 0; border-color: transparent; box-shadow: none; }
.sp .sp-feld select option { background: var(--sp-flaeche); }
.sp-arten { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; min-inline-size: 0; }
.sp-arten legend { margin-bottom: .45rem; padding: 0; font-size: .85rem; font-weight: 600; color: var(--sp-leise); }
.sp .sp-art { position: relative; display: block; margin: 0; cursor: pointer; }
.sp .sp-art input { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.sp-art span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-block-size: 4.4rem; padding: .6rem .4rem;
  border-radius: var(--sp-r-mittel); text-align: center; background: var(--sp-flaeche-2); border: 1px solid var(--sp-rand-stark); color: var(--sp-leise);
  transition: border-color var(--sp-dauer), background-color var(--sp-dauer), color var(--sp-dauer);
}
.sp-art span .ic { inline-size: 1.35rem; block-size: 1.35rem; }
.sp-art b { font-size: .82rem; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.sp-art:hover span { border-color: color-mix(in srgb, var(--sp-m2) 50%, var(--sp-rand-stark)); color: var(--sp-text); }
.sp-art input:checked + span { color: var(--sp-stark); background: color-mix(in srgb, var(--sp-m1) 20%, var(--sp-flaeche-2)); border-color: var(--sp-m1); box-shadow: inset 0 0 0 1px var(--sp-m1); }
.sp-art input:focus-visible + span { outline: 2px solid var(--sp-fokus); outline-offset: 2px; }

/* Ablage für Anhänge */
.sp-ablage { display: flex; flex-direction: column; gap: .6rem; }
.sp-ablage-feld {
  display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: var(--sp-r-mittel); cursor: pointer;
  background: var(--sp-grund); border: 1.5px dashed var(--sp-rand-stark); color: var(--sp-leise); transition: border-color var(--sp-dauer), background-color var(--sp-dauer);
}
.sp-ablage-feld > .ic { inline-size: 1.6rem; block-size: 1.6rem; color: var(--sp-m2); }
.sp-ablage-feld span { display: flex; flex-direction: column; gap: .1rem; }
.sp-ablage-feld b { color: var(--sp-text); font-size: .9rem; }
.sp-ablage-feld small { font-size: .82rem; }
.sp-ablage-feld u { color: var(--sp-m2); text-underline-offset: 2px; }
.sp-ablage-feld:hover, .sp-ablage-feld.ist-drueber { border-color: var(--sp-m2); background: color-mix(in srgb, var(--sp-m2) 8%, var(--sp-grund)); }
.sp-ablage-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sp-ablage-liste:empty { display: none; }
.sp-ablage-liste li {
  position: relative; display: flex; align-items: center; gap: .55rem; max-inline-size: 100%; padding: .35rem .4rem .35rem .35rem; border-radius: .7rem;
  background: var(--sp-flaeche-3); border: 1px solid var(--sp-rand-stark); font-size: .82rem;
}
.sp-ablage-liste li.ist-fehler { border-color: var(--sp-fehler); color: var(--sp-fehler-t); }
.sp-ablage-liste img, .sp-ablage-liste .sp-datei-zeichen { inline-size: 2.6rem; block-size: 2.6rem; border-radius: .5rem; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--sp-flaeche); }
.sp-ablage-liste .sp-ab-name { display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: 12rem; }
.sp-ablage-liste .sp-ab-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ablage-liste .sp-ab-name small { color: var(--sp-zart); }
.sp-ablage-liste button {
  inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sp-flaeche); color: var(--sp-leise);
}
.sp-ablage-liste button:hover { color: var(--sp-stark); background: var(--sp-rand-stark); }

.sp-klein { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--sp-zart); }
.sp-fehler-zeile { margin: 0; padding: .6rem .8rem; border-radius: var(--sp-r-feld); font-size: .88rem; color: var(--sp-text); background: color-mix(in srgb, var(--sp-fehler) 12%, var(--sp-flaeche)); border-inline-start: 3px solid var(--sp-fehler); }
.sp-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sp .sp-knoepfe .btn { inline-size: auto; }
.sp .btn { min-block-size: 2.75rem; }
.sp .btn .ic { inline-size: 1.05em; block-size: 1.05em; }
.sp .btn[aria-busy="true"] { cursor: progress; opacity: .8; }
.sp .btn-fortschritt { position: relative; overflow: hidden; }
.sp .btn-fortschritt::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: var(--fortschritt, 0%); background: rgb(255 255 255 / .18); transition: inline-size .2s linear; pointer-events: none; }

/* Abgemeldet */
.sp-login { max-inline-size: 560px; margin-inline: auto; text-align: center; align-items: center; padding: clamp(1.5rem, 4vw, 2.25rem) !important; }
.sp-login h2 { margin: .25rem 0 0; font-size: 1.3rem; color: var(--sp-stark); }
.sp-login p { margin: 0; line-height: 1.55; }
.sp-login-zeichen { display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 1rem; background: linear-gradient(135deg, var(--sp-m1), var(--sp-m2)); color: #fff; }
.sp-login-zeichen .ic { inline-size: 1.6rem; block-size: 1.6rem; }
.sp-login .sp-knoepfe { justify-content: center; }
.sp-meldung { display: flex; gap: .5rem; align-items: baseline; }

/* ── Ticket-Seite ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.sp-pfad { margin-bottom: 1rem; }
.sp-pfad a { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 2.75rem; font-size: .9rem; font-weight: 600; color: var(--sp-leise); text-decoration: none; }
.sp-pfad a:hover { color: var(--sp-stark); }
.sp-pfad .ic { transform: rotate(90deg); }
.sp-ticket-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 64rem) {
  .sp-ticket-raster { grid-template-columns: minmax(0, 1fr) 18rem; }
  .sp-seite { position: sticky; top: calc(var(--kopf-hoehe, 4.25rem) + 1rem); }
}
.sp-haupt { display: flex; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.sp .sp-ticket-kopf { flex-direction: row; align-items: flex-start; gap: 1rem; padding: clamp(1rem, 3vw, 1.4rem); }
.sp-kopf-text { flex: 1; min-inline-size: 0; }
.sp-kopf-text h1 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; color: var(--sp-stark); overflow-wrap: anywhere; }
.sp-kopf-meta { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; color: var(--sp-zart); font-size: .85rem; }
.sp-kopf-unter { margin: .5rem 0 0; color: var(--sp-leise); font-size: .92rem; }
.sp-kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
@media (max-width: 36rem) {
  .sp .sp-ticket-kopf { flex-wrap: wrap; }
  .sp-kopf-rechts { flex-direction: row; align-items: center; inline-size: 100%; justify-content: space-between; }
  .sp-ticket-kopf .sp-logo { --g: 40px !important; }
}

/* Gespräch */
.sp-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.sp-trenner { display: flex; align-items: center; gap: .75rem; color: var(--sp-zart); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; margin-block: .35rem; }
.sp-trenner::before, .sp-trenner::after { content: ""; flex: 1; block-size: 1px; background: var(--sp-rand); }
.sp-ereignis { display: flex; justify-content: center; }
.sp-ereignis span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; color: var(--sp-leise); background: var(--sp-flaeche); border: 1px solid var(--sp-rand); text-align: center; }
.sp-nachricht { display: flex; gap: .65rem; align-items: flex-end; max-inline-size: 100%; }
.sp-nachricht.von-dir { justify-content: flex-end; }
.sp-nachricht.ist-neu .sp-blase { animation: sp-auftauchen .7s var(--sp-kurve); }
.sp-avatar { flex: none; inline-size: 2.1rem; block-size: 2.1rem; }
.sp-avatar svg { inline-size: 100%; block-size: 100%; display: block; }
.sp-avatar .s1 { stop-color: var(--logo-1, #7c3aed); } .sp-avatar .s2 { stop-color: var(--logo-2, #06b6d4); } .sp-avatar .w { stroke: #fff; }
.sp-blase {
  min-inline-size: 0; max-inline-size: min(40rem, 86%); padding: .75rem .95rem .8rem; border-radius: 1.15rem;
  background: var(--sp-flaeche-2); border: 1px solid var(--sp-rand); box-shadow: 0 6px 22px -14px rgb(0 0 0 / .8);
}
.von-support .sp-blase { border-end-start-radius: .35rem; }
.von-dir .sp-blase {
  border-end-end-radius: .35rem; border-color: color-mix(in srgb, var(--sp-m1) 50%, var(--sp-rand));
  background: linear-gradient(135deg, color-mix(in srgb, var(--sp-m1) 30%, var(--sp-flaeche)), color-mix(in srgb, var(--sp-m2) 18%, var(--sp-flaeche)));
}
.sp-blase-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .3rem; font-size: .78rem; color: var(--sp-zart); }
.sp-blase-kopf b { color: var(--sp-stark); font-weight: 650; font-size: .82rem; }
.von-dir .sp-blase-kopf { color: color-mix(in srgb, var(--sp-text) 70%, var(--sp-m2)); }
.sp-text { line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.sp-text a { color: var(--sp-m2); text-decoration: underline; text-underline-offset: 2px; }
.von-dir .sp-text a { color: #a5f3fc; }
.sp-anhaenge { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.sp-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .45rem; }
.sp-bild { display: block; border-radius: .7rem; overflow: hidden; background: var(--sp-grund); border: 1px solid var(--sp-rand); aspect-ratio: 4 / 3; }
.sp-bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--sp-dauer) var(--sp-kurve); }
.sp-bild:hover img { transform: scale(1.04); }
.sp-bilder:has(> .sp-bild:only-child) { grid-template-columns: minmax(0, 18rem); }
.sp-bilder > .sp-bild:only-child { aspect-ratio: auto; max-block-size: 22rem; }
.sp-bilder > .sp-bild:only-child img { object-fit: contain; block-size: auto; max-block-size: 22rem; }
.sp-datei {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: .7rem; text-decoration: none; min-block-size: 2.75rem;
  background: var(--sp-grund); border: 1px solid var(--sp-rand); color: var(--sp-text);
}
.sp-datei:hover { border-color: var(--sp-m2); }
.sp-datei > .ic:first-child { inline-size: 1.4rem; block-size: 1.4rem; color: var(--sp-m2); }
.sp-datei span { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; }
.sp-datei b { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-datei small { color: var(--sp-zart); font-size: .75rem; }
.sp-ende { block-size: 1px; }

/* Hinweise, Antwortfeld */
.sp-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .7rem .9rem; border-radius: var(--sp-r-mittel); font-size: .9rem; color: var(--sp-text); background: var(--sp-flaeche); border: 1px solid var(--sp-rand); }
.sp-hinweis > .ic { color: var(--sp-m2); }
.sp-hinweis-zu > .ic { color: var(--sp-warn-t); }
.sp .sp-antwort { padding: clamp(.85rem, 2.5vw, 1.1rem); gap: .75rem; scroll-margin-bottom: 2rem; }
.sp .sp-antwort textarea { min-block-size: 4.2rem; }
.sp-antwort-fuss { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
@media (hover: none) { .sp-tipp { display: none; } }

/* Seitenleiste */
.sp-seite h2 { margin: 0 0 .5rem; }
.sp-details { margin: 0; display: grid; gap: .55rem; }
.sp-details div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-bottom: .5rem; border-bottom: 1px solid var(--sp-rand); }
.sp-details div:last-child { border-bottom: 0; }
.sp-details dt { color: var(--sp-zart); font-size: .82rem; }
.sp-details dd { margin: 0; text-align: end; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.sp-schliessen { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0 0; padding-top: .9rem; border-top: 1px solid var(--sp-rand); }
.sp-schliessen-frage { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Bewertung */
.sp .sp-bewertung { gap: .75rem; }
.sp-bewertung h2 .ic { color: #fbbf24; }
.sp-bewerten { display: flex; flex-direction: column; gap: .75rem; margin: 0; }
.sp-bewerten textarea { inline-size: 100%; padding: .7rem .9rem; border-radius: var(--sp-r-feld); border: 1px solid var(--sp-rand-stark); background: color-mix(in srgb, var(--sp-grund) 60%, var(--sp-flaeche)); color: var(--sp-text); font: inherit; resize: vertical; margin: 0; }
.sp-sterne { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; margin: 0; padding: 0; border: 0; }
.sp .sp-sterne input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.sp .sp-sterne label { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; margin: 0; font-size: 2rem; line-height: 1; color: var(--sp-rand-stark); cursor: pointer; transition: color var(--sp-dauer), transform var(--sp-dauer) var(--sp-kurve); }
.sp .sp-sterne label:hover, .sp .sp-sterne label:hover ~ label, .sp .sp-sterne input:checked ~ label { color: #fbbf24; }
.sp .sp-sterne label:hover { transform: scale(1.12); }
.sp .sp-sterne input:focus-visible + label { outline: 2px solid var(--sp-fokus); border-radius: .5rem; }
.sp-bewertet { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sp-bewertet a { color: var(--sp-m2); }
.sp-sterne-zeile { color: #fbbf24; font-size: 1.3rem; letter-spacing: .1em; }
.sp-sterne-leer { color: var(--sp-rand-stark); }
.sp-bewertung-text { margin: 0; padding: .6rem .9rem; border-inline-start: 3px solid var(--sp-m1); background: var(--sp-flaeche-2); border-radius: 0 .6rem .6rem 0; color: var(--sp-leise); }

/* „Neue Antwort ↓" */
.sp-neu-toast {
  position: fixed; inset-inline: 0; margin-inline: auto; inline-size: fit-content; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40;
  padding: .7rem 1.2rem; border: 0; border-radius: 999px; font: inherit; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(120deg, var(--sp-k1), var(--sp-k2)); box-shadow: 0 14px 34px -10px rgb(0 0 0 / .8);
}

/* Lightbox */
.sp-lightbox { max-inline-size: min(96vw, 1400px); max-block-size: 94vh; padding: 0; border: 1px solid var(--rand-stark, #2e3750); border-radius: 1rem; background: var(--grund-tief, #07090f); color: var(--text, #e5e7eb); overflow: hidden; }
.sp-lightbox::backdrop { background: rgb(4 6 12 / .88); }
.sp-lightbox img { display: block; max-inline-size: min(96vw, 1400px); max-block-size: calc(94vh - 3rem); object-fit: contain; margin: 0 auto; }
.sp-lightbox p { margin: 0; padding: .6rem 1rem; font-size: .85rem; color: var(--text-leise, #9ca3af); overflow-wrap: anywhere; }
.sp-lb-zu { position: absolute; top: .5rem; right: .5rem; inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--flaeche-2, #171d2e); color: var(--text-stark, #fff); }
.sp-lb-zu .ic { inline-size: 1.1rem; block-size: 1.1rem; }

/* Konto-Karte */
.sp-kontokarte h3 .ic { color: var(--akzent-2, #06b6d4); }