/* 05-orbit / support.css — Ticket, Einspruch, Verifizierung.
   Ruhige Flaechen: wer Hilfe sucht, soll den Weg sehen, nicht die Gestaltung. */

/* ── Abschnittsabstaende ─────────────────────────────────────────────────── */

.section--support { padding: clamp(8px, 2vw, 24px) 0 clamp(80px, 10vw, 136px); }
.section--focus   { padding: clamp(48px, 7vw, 96px) 0 clamp(88px, 11vw, 152px); }

/* ── Vorschau-Hinweis (Briefing Kap. 7), gleiche Gestalt wie im Kaufweg ──── */

.preview-note {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-s);
  padding: 7px 12px;
  margin: 0 0 26px;
}

/* Das eine Pink dieser Seiten sitzt in einem Bahnpunkt bzw. im Abzeichen. */
.arc-node--pink {
  background: var(--pink);
  box-shadow: 0 0 10px rgba(240, 85, 155, .6);
}

/* ── Formulare ────────────────────────────────────────────────────────────── */

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.field label,
.check-label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-mute);
}

.input {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  color: var(--ink);
  font: inherit;
  font-size: .94rem;
  padding: 11px 14px;
}

.input::placeholder { color: var(--ink-faint); }

.input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-color: var(--cyan);
}

.input[aria-invalid="true"] { border-color: rgba(249, 115, 22, .7); }

select.input { appearance: auto; }

textarea.input { resize: vertical; min-height: 120px; }

.form-error {
  display: none;
  border: 1px solid rgba(249, 115, 22, .5);
  border-radius: var(--r-s);
  background: rgba(249, 115, 22, .08);
  color: #FDBA74;
  font-size: .88rem;
  padding: 11px 14px;
  margin-top: 14px;
}

.form-error.is-visible { display: block; }

/* ── Ticket: Formular links, eigene Tickets rechts ───────────────────────── */

.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 3.5vw, 44px);
  align-items: start;
}

.ticket-form-card {
  background: var(--bg-2);
  border: 1px solid rgba(15, 217, 192, .35);
  border-radius: var(--r-l);
  padding: clamp(22px, 3vw, 32px);
}

.ticket-form-card h2 { font-size: 1.14rem; margin-bottom: 18px; }

.ticket-form-card .btn { width: 100%; margin-top: 6px; }

.ticket-list-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: clamp(20px, 3vw, 28px);
  transform: translateY(22px);
}

.ticket-list-card h2 { font-size: 1.06rem; margin-bottom: 14px; }

.ticket-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.ticket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg-1);
  padding: 13px 16px;
}

.ticket-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-cat {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 3px;
}

.status-pill {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-2);
  border: 1px solid rgba(15, 217, 192, .45);
  border-radius: 99px;
  padding: 3px 10px;
}

.ticket-empty {
  color: var(--ink-faint);
  font-size: .92rem;
  margin: 0;
}

/* ── Einspruch und Verifizierung: eine ruhige Karte in der Mitte ─────────── */

.focus-wrap {
  max-width: 560px;
  margin-inline: auto;
}

.focus-card {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  padding: clamp(24px, 4vw, 40px);
}

.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: 5px 13px;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

/* Das eine Pink der Einspruch-Seite */
.page-badge--pink {
  color: var(--pink);
  border-color: rgba(240, 85, 155, .5);
}

.focus-card h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin-bottom: 6px;
}

.focus-sub {
  color: var(--ink-mute);
  margin-bottom: 22px;
}

.focus-card .btn { width: 100%; }

.focus-step[hidden] { display: none; }

.focus-note {
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: var(--bg-1);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.focus-note p { margin: 0; font-size: .88rem; color: var(--ink-mute); }

.check-box {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-s);
  background: var(--bg-1);
  padding: 22px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.check-box .preview-note { margin: 0; }

.done-state {
  text-align: center;
}

.done-icon {
  width: 58px;
  height: 58px;
  margin: 6px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(15, 217, 192, .5);
  background: rgba(15, 217, 192, .1);
  color: var(--cyan-2);
}

.done-state h2 { margin-bottom: 6px; }

.done-state p { color: var(--ink-mute); }

/* ── Umbrueche ────────────────────────────────────────────────────────────── */

@media (max-width: 999px) {
  .support-layout { grid-template-columns: 1fr; }
  .ticket-list-card { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VERIFY-SEITE: sieben Klassen ohne Regel (28.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Gemessen: `verify.html` traegt 60 Klassen, sieben davon standen in keinem
   der 28 Blaetter — `verify-server`, `-icon`, `-name`, `verify-msg`,
   `verify-who`, `-name`, `-id`. Sie sind alle `hidden`, solange der Link
   unvollstaendig ist; genau deshalb faellt es beim blossen Aufrufen der Seite
   nicht auf. Wer ueber einen ECHTEN Link aus der Bot-Nachricht kommt, sieht
   sie — und sah ein Bild neben nacktem Text ohne jede Ausrichtung.

   Diese Seite ist der erste Kontakt mit einem fremden Server: dort steht, wem
   man beitritt. Sie darf nicht aussehen wie ein Rohentwurf. */

/* Serverzeile: Wappen und Name auf einer Linie, ruhig abgesetzt. */
.verify-server {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.verify-server-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg-2);
  flex: none;
}

.verify-server-name {
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--ink);
  /* Lange Servernamen umbrechen statt die Karte aufzureissen. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Meldung mit `role="alert"`. Dieselbe Farbe wie `.form-error` weiter oben —
   eine zweite Fehlerfarbe auf derselben Seite waere Willkuer. */
.verify-msg {
  margin: 14px 0 0;
  border: 1px solid rgba(249, 115, 22, .5);
  border-radius: var(--r-s);
  background: rgba(249, 115, 22, .08);
  color: #FDBA74;
  font-size: .88rem;
  padding: 11px 14px;
}

/* „Du bist angemeldet als …" — Name kraeftig, Discord-Kennung daneben
   gedaempft und in Ziffernschrift, damit sie als Kennung lesbar ist. */
.verify-who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 12px 0 0;
}

.verify-who-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.verify-who-id {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   EIGENE GESTALTUNG DER VERIFY-SEITE (VIP)
   ══════════════════════════════════════════════════════════════════════════
   Gegenstuecke zu `assets/js/verify.js`. Alle Flaechen sind leer und
   unsichtbar, solange keine Gestaltung gesetzt ist — eine Verify-Seite ohne
   VIP sieht damit aus wie zuvor.

   Warum das hier steht und nicht im Blatt des Bestands: die Klassen des alten
   Designs (`.cinema-vignette`, `.light-beam`, `.nebula`, `.orb`,
   `.float-shape`) laedt diese Seite gar nicht. Am 28.08. gemessen: KEINE der
   sechs Effektflaechen, die der Editor anbot, war hier gestylt. Deshalb tat
   kein Schalter etwas. */

/* Die Effektschicht liegt HINTER dem Inhalt und faengt keine Klicks ab. */
.vf-effekte {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.section--focus > .wrap { position: relative; z-index: 1; }

/* Randabdunklung: der einzige Effekt aus der alten Liste, den ich neu gebaut
   habe. Er ist gestaltungsneutral (ein radialer Verlauf, keine Farbe des alten
   Designs) und tut genau das, wofuer er da ist — die Karte in der Mitte treten
   lassen. */
.vf-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, .55) 100%);
}

/* Eigene Navigationsleiste des Serverbetreibers. */
.vf-navi {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}
.vf-navi img { height: 30px; width: auto; }
.vf-navi a {
  color: var(--ink-mute);
  font-size: .92rem;
  text-decoration: none;
}
.vf-navi a:hover { color: var(--ink); }

/* Bausteine: Text, Bild, Knopf, Trenner. Die Masse setzt das Skript je
   Baustein; hier steht nur, was fuer alle gilt. */
.vfb { position: relative; z-index: 1; }
.vfb-bild { display: block; max-width: 100%; height: auto; }
.vfb-knopf {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* Die Karte bekommt ihr Polster ueber eine Variable, damit „Karte aus" es auf
   0 setzen kann, ohne die Regel darunter zu verlieren. */
/* Der RUECKFALL ist ausdruecklich der bisherige Wert `clamp(24px, 4vw, 40px)`.
   Mit `30px` als Rueckfall haette diese Zeile das Standard-Polster jeder
   Verify-Seite ohne VIP von mitwachsend auf fest umgestellt - eine stille
   Verschlechterung fuer alle, damit eine Einstellung fuer wenige geht. */
.focus-card { padding: var(--vf-polster, clamp(24px, 4vw, 40px)); }
.focus-card.vf-ohne-leiste::before { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Der erklaerende Abschnitt unter der Verify-Karte
   ══════════════════════════════════════════════════════════════════════════
   Er ist bewusst RUHIGER als die Karte darueber: kein eigener Rahmen, kein
   Hintergrund, kleinere Schrift. Die Karte bleibt das, worauf der Blick
   zuerst faellt, denn dort steht der Knopf. Wer den Text lesen will, findet
   ihn; wer nur verifizieren will, scrollt daran vorbei.

   Der Abstand nach oben ist grosszuegig. Zwischen Karte und Text sitzt der
   erste Anzeigenplatz, und eine Anzeige, die zu dicht an der Karte klebt,
   sieht aus wie ein Teil davon. Genau das verbietet Google, und es waere
   auch schlicht unehrlich. */
.vf-info {
  max-width: 780px;
  margin: clamp(40px, 7vw, 72px) auto 0;
  color: var(--ink-mute);
}

.vf-info h2 {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--ink);
  margin: 0 0 clamp(18px, 3vw, 26px);
  text-wrap: balance;
}

/* Eine Spalte auf dem Telefon, zwei ab Tablet. Drei waeren auf dem Bildschirm
   huebsch und auf 1024 px unlesbar schmal. */
.vf-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 30px);
}

@media (min-width: 720px) {
  .vf-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vf-info-grid h3 {
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.vf-info-grid p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
}

.vf-info-mehr {
  margin: clamp(22px, 3.5vw, 32px) 0 0;
  font-size: 0.92rem;
}

.vf-info-mehr a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}

.vf-info-mehr a:hover,
.vf-info-mehr a:focus-visible {
  color: var(--cyan-2);
  border-bottom-color: currentColor;
}

/* Luft um die beiden Anzeigenplaetze auf dieser Seite.
   `.ad-slot` bringt seine eigene Gestalt mit; hier geht es nur darum, dass
   sie nicht an der Karte und nicht am Text klebt. */
.section--focus .ad-slot {
  max-width: 780px;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Die eigene Leiste des Serverbetreibers ist eine LEISTE, kein Logo im Raum
   ══════════════════════════════════════════════════════════════════════════
   Betreiber, 28.08.2026: „die custom navbar funktioniert auch nicht … das logo
   fliegt aktuell dadrunter in der luft und die navbar ist die hauseigene
   standard navbar".

   Zwei Fehler steckten darin, und `verify.js` behebt den ersten: die eigene
   Leiste wurde ZUSAETZLICH unter der hauseigenen eingeblendet. Jetzt ersetzt
   sie diese (`#siteHead` wird versteckt, `body` bekommt `.vf-eigene-navi`).

   Der zweite Fehler ist dieser hier: `.vf-navi` war eine schlichte Zeile mit
   `margin-bottom` — ohne Grund, ohne Kante, ohne Höhe. Ein Logo darin sah
   deshalb aus, als schwebe es. Eine Leiste braucht Boden unter den Füssen.

   Die Werte stammen eins zu eins von `.site-head` und `.head-inner`
   (`min-height: 66px`, `border-bottom: 1px solid var(--line)`, derselbe
   halbdurchsichtige Grund) — damit der Wechsel nicht wie ein anderes Gerüst
   wirkt, sondern wie dieselbe Seite mit anderem Inhalt. */
body.vf-eigene-navi .vf-navi {
  min-height: 66px;
  margin: 0 0 34px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 19, .82);
  backdrop-filter: blur(10px);
}

/* Logo links, Verweise rechts — die gewohnte Ordnung. Der Abstand entsteht
   durch den automatischen Rand am ersten Verweis, nicht durch feste Werte:
   so sitzt es richtig, egal ob ein Logo da ist oder nicht. */
body.vf-eigene-navi .vf-navi img { height: 34px; }
body.vf-eigene-navi .vf-navi img + a { margin-left: auto; }
body.vf-eigene-navi .vf-navi > a:first-child { margin-left: auto; }

/* Der Bereich darunter braucht die Luft, die sonst die hauseigene Leiste
   mitbrachte. Ohne das klebte die Karte an der neuen Kante. */
body.vf-eigene-navi .section--focus { padding-top: 0; }

@media (max-width: 720px) {
  body.vf-eigene-navi .vf-navi {
    min-height: 54px;
    margin-bottom: 22px;
    gap: 12px;
  }
  body.vf-eigene-navi .vf-navi img { height: 26px; }
}

/* ── Ticket-Verlauf (31.08.2026) ────────────────────────────────────────────
   Betreiber: „der user kann nirgendwo den ticket chat öffnen, bei support
   steht nur der stand des tickets aber keine möglichkeit weiter zu schreiben."

   Die `status-pill` sah durch Rahmen und Grossbuchstaben aus wie ein Knopf und
   wurde auch so geklickt. Sie bleibt, was sie ist — der echte Knopf steht
   daneben und heisst so, wie er wirkt. */
.ticket-item-rechts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-open-btn {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  color: var(--bg-0, #05070d);
  background: var(--cyan-2);
  border: 0;
  border-radius: var(--r-s);
  padding: 7px 15px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.ticket-open-btn:hover { filter: brightness(1.12); }
.ticket-open-btn:active { transform: translateY(1px); }
.ticket-open-btn:focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 2px; }

.ticket-detail {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg-1);
  padding: 14px 16px;
}

.ticket-detail-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.ticket-detail-titel {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
}

.ticket-detail-zu {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 12px;
  cursor: pointer;
}
.ticket-detail-zu:hover { color: var(--cyan-2); border-color: rgba(15, 217, 192, .45); }

/* Der Verlauf bekommt eine feste Hoehe. Ohne sie waechst die Seite mit jeder
   Nachricht, und das Antwortfeld wandert aus dem Bild — man tippt dann unten
   in einer Seite, die immer laenger wird. */
.tk-verlauf {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tk-msg {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 9px 12px;
  background: var(--bg-0, transparent);
}
.tk-msg--system {
  border-style: dashed;
  opacity: .75;
}
.tk-msg--leer {
  border: 0;
  text-align: center;
  color: var(--ink-faint);
}

.tk-msg-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.tk-msg-wer {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
}
.tk-msg-wann {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
/* `pre-wrap`: Absaetze, die jemand geschrieben hat, bleiben Absaetze. */
.tk-msg-text {
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tk-msg-bild {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--r-s);
  margin-top: 8px;
}
.tk-msg-datei {
  display: inline-block;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--cyan-2);
}

.ticket-antwort {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ticket-antwort-feld {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  font-size: .88rem;
  color: inherit;
  background: var(--bg-0, rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 9px 12px;
}
.ticket-antwort-feld:focus { outline: none; border-color: var(--cyan-2); }
.ticket-antwort-feld:disabled { opacity: .5; }
.ticket-antwort-hinweis {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-faint);
}

@media (max-width: 560px) {
  .ticket-item { flex-wrap: wrap; }
  .ticket-item-rechts { width: 100%; justify-content: space-between; }
}