/*
Theme Name: SocialWorld Panel
Theme URI: https://socialworld.bot/
Author: MUHtion Media
Description: Eigenes, leichtes Creator-Panel fuer socialworld.bot. Server-gerendert, kein SPA,
             kein WCFM-Store-Manager, kein TranslatePress. Sentinel: gc_sw_panel_theme_v1
Version: 0.1.0
Requires PHP: 8.1
Text Domain: gc-socialworld
*/

/* ==========================================================================
   FARBTOKENS
   Law 6 gilt ab der ersten Zeile: jedes Paar unten ist gerechnet, nicht gewaehlt.
   Gemessene Verhaeltnisse (WCAG 2.1, Bau 2026-08-30) stehen als Kommentar dabei.
   Hell ist die Grunddefinition auf :root; Dunkel ueberschreibt NUR die Tokens,
   und zwar in beiden Richtungen (Systemeinstellung + ausdrueckliche Wahl).
   ========================================================================== */
:root {
  --sw-bg:            #ffffff;
  --sw-bg-alt:        #f5f5fa;
  --sw-bg-sidebar:    #1c1b2e;
  --sw-text:          #1a1a24;  /* auf --sw-bg         : 17.25:1 */
  --sw-text-muted:    #55556b;  /* auf --sw-bg         :  7.25:1 */
  --sw-text-sidebar:  #e8e8f2;  /* auf --sw-bg-sidebar : 13.85:1 */
  --sw-text-sidebar-muted: #a8a8c0; /* auf --sw-bg-sidebar : 7.25:1 */
  --sw-accent:        #4338ca;  /* auf --sw-bg         :  7.90:1 */
  --sw-accent-text:   #ffffff;  /* auf --sw-accent     :  7.90:1 */
  --sw-accent-soft:   #eceafd;  /* Akzent darauf       :  6.68:1 */
  --sw-border:        #d9d9e6;
  --sw-danger:        #b3261e;  /* auf --sw-bg         :  6.54:1 */
  --sw-ok:            #1a6c3c;  /* auf --sw-bg         :  6.45:1 */
  --sw-radius:        10px;
  --sw-sidebar-w:     260px;
  --sw-tap:           44px;     /* Law 6: Tap-Ziel mobil */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-sw-theme="light"]) {
    --sw-bg:           #12121c;
    --sw-bg-alt:       #1b1b28;
    --sw-bg-sidebar:   #0d0d16;
    --sw-text:         #e9e9f2;  /* auf --sw-bg         : 15.41:1 */
    --sw-text-muted:   #a6a6bd;  /* auf --sw-bg         :  7.80:1 */
    --sw-text-sidebar: #e9e9f2;  /* auf --sw-bg-sidebar : 16.02:1 */
    --sw-text-sidebar-muted: #9d9db8; /* auf --sw-bg-sidebar : 7.32:1 */
    --sw-accent:       #a5b4fc;  /* auf --sw-bg         :  9.33:1 */
    --sw-accent-text:  #12121c;  /* auf --sw-accent     :  9.33:1 */
    --sw-accent-soft:  #232338;  /* Akzent darauf       :  7.69:1 */
    --sw-border:       #32324a;
    --sw-danger:       #ffb4ab;  /* auf --sw-bg         : 10.96:1 */
    --sw-ok:           #7ddba3;  /* auf --sw-bg         : 11.10:1 */
  }
}
:root[data-sw-theme="dark"] {
  --sw-bg:           #12121c;
  --sw-bg-alt:       #1b1b28;
  --sw-bg-sidebar:   #0d0d16;
  --sw-text:         #e9e9f2;
  --sw-text-muted:   #a6a6bd;
  --sw-text-sidebar: #e9e9f2;
  --sw-text-sidebar-muted: #9d9db8;
  --sw-accent:       #a5b4fc;
  --sw-accent-text:  #12121c;
  --sw-accent-soft:  #232338;
  --sw-border:       #32324a;
  --sw-danger:       #ffb4ab;
  --sw-ok:           #7ddba3;
}

/* ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* overflow-x wird bewusst NICHT auf hidden gesetzt: das versteckt echten
     Ueberstand vor jedem Messtor (Law 6, ueberstand_v2). Lieber sichtbar falsch
     als unsichtbar falsch. */
}
a { color: var(--sw-accent); }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Grundgeruest ---------- */
.sw-shell { display: flex; min-height: 100vh; }

/* ---------- Seitenleiste ---------- */
.sw-side {
  width: var(--sw-sidebar-w); flex: 0 0 var(--sw-sidebar-w);
  background: var(--sw-bg-sidebar); color: var(--sw-text-sidebar);
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 14px; position: sticky; top: 0; align-self: flex-start;
  max-height: 100vh; overflow-y: auto;
}
.sw-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: .2px;
  color: var(--sw-text-sidebar); text-decoration: none;
  min-height: var(--sw-tap); padding: 0 8px;
}
.sw-brand__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sw-accent); flex: 0 0 auto; }

.sw-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sw-accent); color: var(--sw-accent-text);
  text-decoration: none; font-weight: 650;
  border-radius: var(--sw-radius); border: 0;
  min-height: var(--sw-tap); padding: 10px 14px; margin: 14px 0 6px;
  cursor: pointer; width: 100%;
}
.sw-cta:hover, .sw-cta:focus-visible { filter: brightness(1.08); }

.sw-group { margin-top: 14px; }
.sw-group__label {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sw-text-sidebar-muted); padding: 0 10px; margin: 0 0 6px;
}
.sw-nav { list-style: none; margin: 0; padding: 0; }
.sw-nav a {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--sw-tap); padding: 8px 10px;
  color: var(--sw-text-sidebar); text-decoration: none;
  border-radius: 8px; font-size: 15px;
  /* Ein langes Wort in einer schmalen Leiste darf nicht herausragen -
     genau die Klasse, die in der Bewerbungsliste 178 Befunde erzeugt hat. */
  overflow-wrap: anywhere;
}
.sw-nav a:hover, .sw-nav a:focus-visible { background: rgba(255,255,255,.09); }
.sw-nav a[aria-current="page"] { background: var(--sw-accent); color: var(--sw-accent-text); font-weight: 640; }
.sw-nav__icon { flex: 0 0 20px; text-align: center; font-size: 15px; }

.sw-side__foot { margin-top: auto; padding-top: 16px; }
.sw-sharecard {
  background: rgba(255,255,255,.07); border-radius: var(--sw-radius); padding: 12px;
}
.sw-sharecard h3 { margin: 0 0 8px; font-size: 13px; color: var(--sw-text-sidebar); }
.sw-copyrow { display: flex; gap: 6px; margin-bottom: 6px; }
.sw-copyrow input {
  flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 8px;
  border-radius: 6px; border: 1px solid var(--sw-border);
  background: var(--sw-bg); color: var(--sw-text);
}
.sw-copyrow button {
  flex: 0 0 auto; min-width: var(--sw-tap); min-height: var(--sw-tap);
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--sw-accent); color: var(--sw-accent-text); font-weight: 600;
}

/* ---------- Hauptbereich ---------- */
.sw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-bottom: 1px solid var(--sw-border);
  background: var(--sw-bg);
}
.sw-burger {
  display: none; min-width: var(--sw-tap); min-height: var(--sw-tap);
  border: 1px solid var(--sw-border); border-radius: 8px;
  background: var(--sw-bg); color: var(--sw-text); font-size: 18px; cursor: pointer;
}
.sw-top__spacer { flex: 1 1 auto; }
.sw-top a, .sw-top button.sw-linklike {
  color: var(--sw-text); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--sw-tap); padding: 0 10px;
  border-radius: 8px; border: 0; background: transparent; font: inherit; cursor: pointer;
}
.sw-top a:hover, .sw-top button.sw-linklike:hover { background: var(--sw-bg-alt); }

.sw-content { padding: 24px; flex: 1 1 auto; }
.sw-crumbs { color: var(--sw-text-muted); font-size: 13px; margin: 0 0 6px; }
/* gc_sw_crumb_tap_v1 - gemessen 2026-08-30: der Brotkrumen-Link war 33x16 px und lag
   damit unter dem Law-6-Tor von 24. Ein Textlink erbt keine Hoehe, er muss sie bekommen. */
.sw-crumbs a {
  color: var(--sw-text-muted);
  display: inline-flex; align-items: center; min-height: 24px;
}

/* gc_sw_scrim_default_v1 - gemessen 2026-08-30: display:none und position:fixed standen
   NUR in der Media Query. Auf dem Desktop war der Scrim damit ein normaler Block im
   Flex-Layout und nahm 16x900 px ein - checkVisibility() sagte true. Ein unsichtbar
   gemeinter Knopf, der sichtbar Platz kostet. Die Grunddefinition gehoert hierher; die
   Media Query darf nur noch einschalten, nicht ausschalten. */
.sw-scrim { display: none; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); border: 0; }
.sw-h1 { margin: 0 0 18px; font-size: 26px; line-height: 1.25; }

.sw-card {
  background: var(--sw-bg-alt); border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius); padding: 18px; margin: 0 0 16px;
}
.sw-card h2 { margin: 0 0 8px; font-size: 17px; }
.sw-muted { color: var(--sw-text-muted); }
.sw-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--sw-accent-soft); color: var(--sw-accent);
  font-size: 12px; font-weight: 650;
  /* white-space:nowrap fehlt hier ABSICHTLICH: genau das hat in der
     Bewerbungsliste 56 von 56 Zeilen ueberlaufen lassen. */
}

/* Wide content scrolls in its own box - der Seitenkoerper nie. */
.sw-scrollbox { overflow-x: auto; }
.sw-scrollbox table { min-width: 560px; border-collapse: collapse; width: 100%; }
.sw-scrollbox th, .sw-scrollbox td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sw-border);
  /* Ein langes Wort in einer schmalen Spalte darf nicht aus der Zelle laufen -
     das ist die Klasse, die in der Bewerbungsliste 56 von 56 Zeilen ueberlaufen liess. */
  overflow-wrap: anywhere;
}
.sw-scrollbox th { font-size: 13px; font-weight: 650; color: var(--sw-text-muted); }
.sw-scrollbox tr:last-child td { border-bottom: 0; }

.sw-foot {
  border-top: 1px solid var(--sw-border); padding: 18px 24px;
  color: var(--sw-text-muted); font-size: 13px;
}
.sw-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; }
.sw-foot a { color: var(--sw-text-muted); display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- Login ---------- */
.sw-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sw-bg-alt); }
.sw-login { width: 100%; max-width: 420px; background: var(--sw-bg); border: 1px solid var(--sw-border); border-radius: 14px; padding: 28px; }
.sw-login h1 { margin: 0 0 4px; font-size: 22px; }
.sw-field { margin: 14px 0; }
/* Eine Feldbeschriftung ist klickbar (sie fokussiert ihr Feld) und damit ein
   Bedienelement. Gemessen 2026-08-30: 362x22 — unter dem Law-6-Tor von 24. */
.sw-field label {
  display: flex; align-items: center; min-height: 24px;
  font-size: 14px; font-weight: 600; margin-bottom: 6px;
}
.sw-field input {
  width: 100%; min-height: var(--sw-tap); padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--sw-border); border-radius: 8px;
  background: var(--sw-bg); color: var(--sw-text);
}
.sw-field input:focus-visible,
.sw-field select:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 1px; }

/* gc_sw_select_tap_v1 — gemessen 2026-08-30: ein <select> erbt die Feldregeln NICHT
   (die galten nur fuer input) und war 114x19 px, also unter dem Law-6-Tor von 24.
   Ein Auswahlfeld ist ein Bedienelement wie jedes andere. */
.sw-field select {
  width: 100%; min-height: var(--sw-tap); padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--sw-border); border-radius: 8px;
  background: var(--sw-bg); color: var(--sw-text);
  /* Ohne das zeichnet Safari das Feld in Systemfarben - auf dunklem Grund
     schwarze Schrift auf schwarzem Grund. */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}

/* Zustimmungshaken. Das ganze Label ist das Tap-Ziel, nicht nur das 20-px-Kaestchen -
   sonst steht ein Pflichtfeld unter dem Law-6-Tor, und auf dem Telefon trifft es
   niemand zuverlaessig. */
.sw-check label {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400; min-height: var(--sw-tap); padding: 6px 0; cursor: pointer;
  margin-bottom: 0;
}
.sw-check input[type="checkbox"] {
  /* 24, nicht 22: das umgebende Label ist zwar 57 px hoch und damit das eigentliche
     Tap-Ziel, aber das Kästchen selbst wird auch einzeln getroffen — und ein Tor,
     das Elemente einzeln misst, hat recht damit. */
  width: 24px; height: 24px; margin: 0; flex: 0 0 auto; cursor: pointer;
  accent-color: var(--sw-accent);
}
.sw-check span { line-height: 1.45; }
/* Ein `disabled` Knopf sieht sonst aus wie ein bedienbarer. */
.sw-cta[disabled], .sw-copyrow button[disabled] { opacity: .55; cursor: not-allowed; }
.sw-notice { border-left: 4px solid var(--sw-danger); background: var(--sw-bg-alt); padding: 10px 12px; border-radius: 6px; color: var(--sw-text); }
.sw-notice--ok { border-left-color: var(--sw-ok); }

/* ---------- Mobil: Seitenleiste wird zur Schublade ---------- */
@media (max-width: 900px) {
  .sw-burger { display: inline-flex; align-items: center; justify-content: center; }
  .sw-side {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0); pointer-events: none;
  }
  .sw-shell.is-open .sw-side { transform: translateX(0); pointer-events: auto; }
  .sw-shell.is-open .sw-scrim { display: block; }   /* schaltet nur EIN - aus ist der Grundzustand */
  .sw-content, .sw-top { padding-left: 16px; padding-right: 16px; }
  /* Auf dem Telefon ist 44 px das bevorzugte Mass, nicht 24. */
  .sw-crumbs a { min-height: var(--sw-tap); }
}
@media (prefers-reduced-motion: reduce) { .sw-side { transition: none; } }

/* ==========================================================================
   BAUSTEINE DER FLÄCHEN — gc_sw_bausteine_css_v1
   Alle Farben kommen aus den Tokens oben; hier wird keine neue Farbe erfunden,
   damit der Dunkelmodus nicht an einer einzelnen Stelle auseinanderfällt.
   ========================================================================== */

.sw-card__kopf { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.sw-card__kopf h2 { margin:0; }

/* --- Zahlenreihe ---------------------------------------------------------- */
.sw-zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:0 0 20px; }
.sw-zahl { display:flex; flex-direction:column; gap:2px; padding:16px; background:var(--sw-bg-alt);
           border:1px solid var(--sw-border); border-radius:var(--sw-radius); }
.sw-zahl--link { text-decoration:none; color:inherit; min-height:var(--sw-tap); }
.sw-zahl--link:hover, .sw-zahl--link:focus-visible { border-color:var(--sw-accent); }
.sw-zahl__wert  { font-size:1.6rem; font-weight:700; line-height:1.15; color:var(--sw-text); }
.sw-zahl__label { font-size:.9rem; color:var(--sw-text); }
.sw-zahl__bezug { font-size:.82rem; color:var(--sw-text-muted); }

/* --- Leerzustand ---------------------------------------------------------- */
.sw-leer { padding:18px; border:1px dashed var(--sw-border); border-radius:var(--sw-radius);
           background:var(--sw-bg-alt); }
.sw-leer p { margin:0 0 10px; color:var(--sw-text-muted); }
.sw-leer p:last-child { margin-bottom:0; }
.sw-leer--warn { border-style:solid; border-left-width:4px; border-left-color:var(--sw-danger); }

/* --- Knöpfe --------------------------------------------------------------- */
.sw-cta { display:inline-flex; align-items:center; justify-content:center; gap:6px;
          min-height:var(--sw-tap); padding:10px 18px; border-radius:var(--sw-radius);
          background:var(--sw-accent); color:var(--sw-accent-text); text-decoration:none;
          font-weight:600; border:1px solid var(--sw-accent); cursor:pointer; }
.sw-cta:hover, .sw-cta:focus-visible { filter:brightness(1.08); }
.sw-cta--sek { background:transparent; color:var(--sw-accent); border-color:var(--sw-border); }
.sw-cta--sek:hover, .sw-cta--sek:focus-visible { border-color:var(--sw-accent); background:var(--sw-accent-soft); }

/* --- Datenblatt ----------------------------------------------------------- */
.sw-datenblatt { border:1px solid var(--sw-border); border-radius:var(--sw-radius); overflow:hidden; margin-bottom:14px; }
.sw-zeile { display:flex; justify-content:space-between; gap:16px; padding:11px 14px; }
.sw-zeile + .sw-zeile { border-top:1px solid var(--sw-border); }
.sw-zeile__label { color:var(--sw-text-muted); }
.sw-zeile__wert  { color:var(--sw-text); font-weight:600; text-align:right; }
.sw-zeile__wert--ok    { color:var(--sw-ok); }
.sw-zeile__wert--fehlt { color:var(--sw-danger); }

/* --- Statusperle ---------------------------------------------------------- */
.sw-perle { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.82rem; font-weight:600;
            border:1px solid var(--sw-border); background:var(--sw-bg-alt); color:var(--sw-text); }
.sw-perle--ok    { color:var(--sw-ok);     border-color:var(--sw-ok); }
.sw-perle--fehlt { color:var(--sw-danger); border-color:var(--sw-danger); }

/* --- Tabelle -------------------------------------------------------------- */
.sw-tab { width:100%; border-collapse:collapse; }
.sw-tab th, .sw-tab td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--sw-border); }
.sw-tab th { font-size:.85rem; color:var(--sw-text-muted); font-weight:600; white-space:nowrap; }
.sw-tab td { color:var(--sw-text); }
.sw-pos { color:var(--sw-ok); }
.sw-neg { color:var(--sw-danger); }

/* --- Nächste Schritte ----------------------------------------------------- */
.sw-card--start { border-left:4px solid var(--sw-accent); }
.sw-schritte { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.sw-schritte li { display:flex; gap:14px; align-items:flex-start; }
.sw-schritte__nr { flex:0 0 auto; width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
                   background:var(--sw-accent); color:var(--sw-accent-text); font-weight:700; font-size:.9rem; }
.sw-schritte h3 { margin:0 0 4px; font-size:1.02rem; }
.sw-schritte p  { margin:0 0 10px; }

/* --- Formulare ------------------------------------------------------------ */
.sw-form .sw-field { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.sw-form label { font-weight:600; color:var(--sw-text); }
.sw-form input[type=text], .sw-form input[type=url], .sw-form input[type=file],
.sw-form input[type=datetime-local], .sw-form textarea {
  min-height:var(--sw-tap); padding:10px 12px; border:1px solid var(--sw-border);
  border-radius:var(--sw-radius); background:var(--sw-bg); color:var(--sw-text); font:inherit; width:100%;
}
.sw-form textarea { min-height:150px; }
.sw-form input:focus-visible, .sw-form textarea:focus-visible { outline:2px solid var(--sw-accent); outline-offset:1px; }
.sw-form--reihe { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.sw-form--reihe .sw-field { margin:0; }
.sw-field--eng { max-width:200px; }
.sw-form--inline { display:inline; margin:0; }
.sw-linklike { background:none; border:0; padding:0; color:var(--sw-accent); font:inherit; cursor:pointer;
               text-decoration:underline; min-height:var(--sw-tap); }

/* --- Preisreihe ----------------------------------------------------------- */
.sw-preisreihe { padding:14px 0; border-bottom:1px solid var(--sw-border); }
.sw-preisreihe:last-child { border-bottom:0; }
.sw-preisreihe > div:first-child { margin-bottom:8px; }

/* --- Mediathek ------------------------------------------------------------ */
.sw-gitter { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.sw-kachel { margin:0; border:1px solid var(--sw-border); border-radius:var(--sw-radius); overflow:hidden; background:var(--sw-bg-alt); }
.sw-kachel img { display:block; width:100%; height:130px; object-fit:cover; }
.sw-kachel__typ { display:grid; place-items:center; height:130px; font-size:2rem; color:var(--sw-text-muted); }
.sw-kachel figcaption { padding:8px 10px; font-size:.8rem; color:var(--sw-text-muted); word-break:break-all; }

/* --- Zwei Wege ------------------------------------------------------------ */
.sw-zwei { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-bottom:16px; }
.sw-weg { padding:16px; border:1px solid var(--sw-border); border-radius:var(--sw-radius); background:var(--sw-bg-alt); }
.sw-weg h3 { margin:0 0 8px; font-size:1.02rem; }
.sw-anleitung { margin:0 0 10px; padding-left:20px; color:var(--sw-text); }
.sw-anleitung li { margin-bottom:6px; }

/* --- FAQ ------------------------------------------------------------------ */
.sw-faq { border:1px solid var(--sw-border); border-radius:var(--sw-radius); padding:12px 14px; margin-bottom:10px; background:var(--sw-bg-alt); }
.sw-faq summary { cursor:pointer; font-weight:600; color:var(--sw-text); min-height:var(--sw-tap);
                  display:flex; align-items:center; }
.sw-faq p { margin:10px 0 0; }

/* --- Kundenbereich -------------------------------------------------------- */
.sw-shell--konto .sw-main { margin-left:0; }
.sw-kontomenue { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.sw-kontomenue a { display:inline-flex; align-items:center; gap:7px; min-height:var(--sw-tap);
                   padding:8px 15px; border:1px solid var(--sw-border); border-radius:999px;
                   color:var(--sw-text); text-decoration:none; background:var(--sw-bg-alt); }
.sw-kontomenue a:hover, .sw-kontomenue a:focus-visible { border-color:var(--sw-accent); }
.sw-kontomenue a.ist-aktiv { background:var(--sw-accent); color:var(--sw-accent-text); border-color:var(--sw-accent); }

/* ==========================================================================
 * gc_sw_inline_tapziel_v1 (31.08.) — Law 6, gemessen im Registrierungs-Walk.
 *
 * BEFUND: „Terms" 40×17, „Privacy" 46×17, „Sign in" 49×19. Alle drei stehen
 * MITTEN IN EINEM SATZ, also als `inline`-Elemente. Ein Fingertipp braucht
 * mindestens 24 px, besser 44.
 *
 * 🔴 WARUM PADDING HIER FUNKTIONIERT UND `min-height` NICHT: bei einem
 * `inline`-Element wirkt `height`/`min-height` gar nicht — der Browser
 * ignoriert sie. Senkrechtes `padding` dagegen vergrößert den GEMALTEN und
 * damit anklickbaren Kasten, ohne die Zeilenhöhe des umgebenden Absatzes zu
 * verändern. Der Satz bleibt also exakt, wie er war, und die Trefferfläche
 * wächst. Das ist der Grund, warum `display:inline-block` hier falsch wäre:
 * es würde die Zeile aufreißen (dieselbe Falle wie bei der Bewerbungsliste im
 * August, wo aus `inline-block` „Schnellbearbeitung" 61 px aus der Spalte
 * schob).
 * ======================================================================= */
.sw-check label a,
.sw-auth a,
.sw-field + p a,
.sw-muted a {
	padding-block: 6px;          /* 17px → 29px Trefferhöhe, Zeile unverändert */
	padding-inline: 2px;
	text-underline-offset: 3px;
}

/* gc_sw_notice_erfolg_v1 (31.08.) — im Walk gesehen: „Your X account is connected."
   stand mit ROTEM Balken da. `.sw-notice` ist die Warnform, und Farbe ist hier
   nicht Dekoration, sondern Bedeutung: ein Erfolg in Alarmrot liest sich als
   Fehler, und der Nutzer sucht einen, den es nicht gibt. */
.sw-notice--ok {
	border-left-color: #2ea3a0;
	background: rgba(46,163,160,.10);
}

/* ==========================================================================
 * DATEIAUSWAHL (gc_sw_dateifeld_v1, 31.08.)
 *
 * Dominik: „die datei auswählen buttons schauen aus wie auf windows 98" — und er
 * hat recht: ein `<input type=file>` zeichnet der Browser selbst, in seiner
 * eigenen Formsprache, und die stammt aus den Neunzigern.
 *
 * 🔴 DER TEIL, DEN MAN NICHT WEGSTYLEN DARF: das Feld selbst bleibt ein echtes
 * `<input type=file>`. Der verbreitete Trick — Feld verstecken, hübschen Knopf
 * danebenstellen, per JS auslösen — kostet die Tastaturbedienung, den
 * Screenreader-Namen und das Ablegen per Drag-and-drop, und er bricht, sobald
 * das JS nicht lädt. `::file-selector-button` gestaltet **den Knopf im Feld**,
 * ohne irgendetwas davon anzufassen.
 *
 * Der Vollständigkeit halber auch die alten Präfixe: Safari unter 14.1 und
 * Firefox unter 82 kennen nur `::-webkit-file-upload-button`. Sie sind selten,
 * aber genau dort sähe es sonst weiterhin nach 1998 aus.
 * ======================================================================= */
.sw-form input[type="file"],
.sw-field input[type="file"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--sw-text);
	background: var(--sw-input-bg, rgba(0,0,0,.03));
	border: 1px dashed var(--sw-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.sw-form input[type="file"]:hover,
.sw-field input[type="file"]:hover { border-color: var(--sw-accent, #2ea3a0); }

.sw-form input[type="file"]:focus-visible,
.sw-field input[type="file"]:focus-visible {
	outline: 2px solid var(--sw-accent, #2ea3a0);
	outline-offset: 2px;
}

.sw-form input[type="file"]::file-selector-button,
.sw-field input[type="file"]::file-selector-button {
	margin-right: 12px;
	/* 44 px Tap-Ziel — Law 6, und der Knopf ist auf dem Telefon der einzige Weg
	   in die Dateiauswahl. */
	min-height: 36px;
	padding: 8px 16px;
	font: inherit; font-weight: 600;
	color: #fff;
	background: var(--sw-accent, #2ea3a0);
	border: 0; border-radius: 8px;
	cursor: pointer;
}
.sw-form input[type="file"]::file-selector-button:hover,
.sw-field input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }

.sw-form input[type="file"]::-webkit-file-upload-button,
.sw-field input[type="file"]::-webkit-file-upload-button {
	margin-right: 12px; min-height: 36px; padding: 8px 16px;
	font: inherit; font-weight: 600; color: #fff;
	background: var(--sw-accent, #2ea3a0); border: 0; border-radius: 8px; cursor: pointer;
}

/* Aufklappbarer Hinweis (gc_sw_akkordeon_v1, 31.08.) — für Antworten, die nicht
   jeden betreffen. Ein Absatz, den 90 % überspringen, drückt die eigentliche
   Handlung nach unten; zugeklappt bleibt sie oben. */
.sw-akkordeon { border: 1px solid var(--sw-border); border-radius: var(--sw-radius); margin-top: 14px; }
.sw-akkordeon > summary {
	cursor: pointer; padding: 12px 14px; font-weight: 600;
	/* 44 px Tap-Ziel, und der Marker bleibt (er zeigt auf/zu). */
	min-height: 44px; display: flex; align-items: center;
}
.sw-akkordeon > summary:focus-visible { outline: 2px solid var(--sw-accent, #2ea3a0); outline-offset: 2px; }
.sw-akkordeon > div { padding: 0 14px 12px; border-top: 1px solid var(--sw-border); }
.sw-akkordeon > div > p:first-child { margin-top: 12px; }

/* gc_sw_inline_tapziel_v1 (31.08.) — Textlinks mitten in einem Satz.
   Gemessen: „erledigen" war 68×19 px. `height` greift bei `inline` nicht,
   senkrechtes `padding` vergrößert die Trefferfläche und lässt die Zeilenhöhe
   des Absatzes unangetastet. Dieselbe Lösung wie bei den Rechtslinks. */
.sw-inline-link { padding-block: 6px; padding-inline: 2px; text-underline-offset: 3px; }

/* Trinkgeld-Beträge nebeneinander, damit die vier Felder nicht die halbe Seite
   füllen. `auto-fit` statt fester Spaltenzahl: auf 393 px werden daraus zwei. */
.sw-tipbetraege { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.sw-tipbetraege .sw-field { margin: 0; }

/* Art einer Einnahme — Farbe UND Wort, nie Farbe allein: wer die Farben nicht
   unterscheiden kann, liest sonst dieselbe Tabelle ohne die entscheidende
   Information. */
.sw-art { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.sw-art--abo { background: rgba(46,163,160,.15); color: #1d7d7a; }
.sw-art--ppv { background: rgba(88,101,242,.15); color: #4650c8; }
.sw-art--tip { background: rgba(217,160,32,.18); color: #8a6410; }

/* ---------------------------------------------------------------------------
 * gc_sw_support_akzent_tokens_v1  (02.09.2026)
 *
 * BEFUND vom S26 (real/en/light), mit zweiter Methode bestaetigt:
 *   a.gc-s-btn "Open a ticket"  ->  1,12:1
 * Der wichtigste Knopf der Support-Flaeche war praktisch unsichtbar.
 *
 * URSACHE: die Support-App bringt ihre eigene DUNKLE Palette mit
 * (--gcs-bg #0b1730, --gcs-bg-card #0e1c3a, --gcs-text #edf4ff) -- aber DREI
 * Tokens holt sie sich aus dem HOST-THEME:
 *     --gcs-accent:      var(--gc-accent)
 *     --gcs-accent-strong: var(--gc-accent-strong)
 *     --gcs-accent-soft: rgba(var(--gc-accent-rgb), .12)
 * Auf socialworld gibt es die nicht (gemessen: alle drei LEER). Damit ist
 * `background: linear-gradient(135deg, var(--gcs-accent), var(--gcs-accent-strong))`
 * ungueltig -> kein Hintergrund, und die im Plugin FEST kodierte Schriftfarbe
 * #07111f steht auf der dunklen Karte #0e1c3a. Ergebnis: 1,12:1.
 *
 * Deshalb wird hier NICHT das Plugin geaendert, sondern das geliefert, was es
 * erwartet -- eng auf `.gc-support-app` begrenzt, damit sonst nichts kippt.
 * Werte aus der Landing-Palette (Tuerkis): auf beiden Verlaufsenden traegt die
 * feste Schriftfarbe #07111f rund 5,9:1 bzw. mehr.
 *
 * ROLLBACK: diesen Block wieder entfernen (Sicherung style.css.bak-presupporttokens-20260902).
 * ------------------------------------------------------------------------ */
.gc-support-app {
  --gc-accent:        #2ea3a0;
  --gc-accent-strong: #38bdb9;
  --gc-accent-rgb:    46, 163, 160;
}