/* ══════════════════════════════════════════════════════════════════════════════
   Vidono im Aussehen von winku.de.

   WARUM EINE ÜBERSCHREIBENDE SCHICHT und keine neu geschriebenen Vidono-Dateien:
   Die mitgelieferten base.css, components.css und dashboard.css legen ihre Farben,
   Abstände und Radien durchgehend in CSS-Variablen ab. Wir müssen deshalb nicht
   1.700 Zeilen fremdes CSS anfassen, sondern die Variablen umdefinieren — dann
   folgt alles, was darauf aufbaut, von selbst. Eine umgeschriebene Kopie hätte
   dagegen bei jedem Vidono-Update von Hand nachgezogen werden müssen.

   Diese Datei wird IMMER ZULETZT eingebunden. Steht sie vorher, gewinnen die
   Vidono-Werte, und die Seite sieht aus wie vorher — nur mit einer zusätzlichen
   Datei im Ladeprotokoll.

   NUR EIN AUSSEHEN, KEIN UMSCHALTER. winku.de ist dunkel, und zwar durchgehend.
   Vidono hatte einen Hell/Dunkel-Schalter; er bleibt technisch bestehen (das
   Attribut data-theme wird weiter gesetzt), führt aber zu demselben Bild — sonst
   stünde ein Knopf da, der scheinbar nichts tut. Der Knopf wird ausgeblendet.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Die Schriftdateien liegen als Kopie unter /fonts NEBEN diesem Ordner — nicht auf
   winku.de. Grund ist die Content-Security-Policy: font-src 'self' erlaubt nur den
   eigenen Host, und vidono.winku.de ist gegenüber winku.de ein anderer Host. Die
   Schriften wurden dort still verworfen, die Seite fiel auf die Systemschrift
   zurück und sah nur ungefähr aus wie winku.de.
   Die Adressen sind RELATIV zu dieser Datei: aus /css/ heraus ist ../fonts/ auf
   winku.de /vidono/fonts/ und auf den eigenen Adressen /fonts/. Eine Adresse, zwei
   Hosts, keine PHP-Verarbeitung in einer .css-Datei nötig. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrainsmono-500.woff2') format('woff2')}

/* ── Die Farbwerte von winku.de, auf die Namen von Vidono gelegt ──────────────── */
:root,
:root[data-theme="dark"],
:root[data-theme="light"]{
  /* winku.de */
  --wk-bg:#0b0f19; --wk-card:rgba(255,255,255,.04); --wk-border:rgba(255,255,255,.08);
  --wk-text:#e5e7eb; --wk-muted:#9ca3af;
  --wk-accent:#7c3aed; --wk-accent2:#06b6d4; --wk-accent3:#f472b6;

  /* Vidono-Namen -> winku.de-Werte */
  --bg-body:var(--wk-bg);
  --bg-card:var(--wk-card);
  --text-main:var(--wk-text);
  --text-muted:var(--wk-muted);
  --primary:var(--wk-accent);
  --primary-hover:#8b5cf6;
  --border-color:var(--wk-border);
  --input-bg:rgba(255,255,255,.05);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --radius:18px;
  /* Zustandsfarben bleiben bei ihrer Bedeutung: Grün heißt gut, Rot heißt Abbruch.
     Sie sind kein Teil der Marke und dürfen nicht in den Akzent aufgehen. */
  --success:#22c55e; --danger:#ef4444; --warning:#f59e0b;
}

/* ── Grund und Hintergrund ────────────────────────────────────────────────────── */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--wk-bg);
  color:var(--wk-text);
}
/* Das Raster und die farbigen Schleier von winku.de. Auf der Webseite stehen dafür
   vier leere <div>; hier kommen sie aus Pseudo-Elementen, damit keine der kopierten
   Vidono-Seiten dafür angefasst werden muss. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--wk-border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--wk-border) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
          mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(520px 520px at 8% -6%,  rgba(124,58,237,.45), transparent 70%),
    radial-gradient(460px 460px at 96% 104%,rgba(6,182,212,.40),  transparent 70%),
    radial-gradient(320px 320px at 58% 42%, rgba(244,114,182,.22),transparent 70%);
  filter:blur(30px);
}

/* ── Kopfleiste ──────────────────────────────────────────────────────────────── */
.navbar{
  background:transparent;border-bottom:1px solid var(--wk-border);
  backdrop-filter:none;position:sticky;top:0;padding:0;
}
[data-theme="dark"] .navbar{background:transparent}
.nav-content{max-width:1100px;padding:18px 24px;gap:14px;flex-wrap:wrap}
.nav-content .logo{
  font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--wk-text);
  display:flex;align-items:center;gap:10px;
}
/* Dieselbe Verlaufskachel mit dem W wie im Kopf von winku.de. */
.logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(124,58,237,.35);
}
.logo-mark svg{width:22px;height:22px;display:block}
.nav-links{gap:12px;flex-wrap:wrap}
.nav-links a:not(.btn){color:var(--wk-muted);font-size:.95rem}
.nav-links a:not(.btn):hover{color:var(--wk-text)}
/* Der Hell/Dunkel-Schalter hat kein Gegenstück mehr — siehe Kopf dieser Datei. */
#theme-toggle,.theme-toggle{display:none !important}

/* ── Knöpfe im Zuschnitt von winku.de: Pillenform, Verlauf beim Hauptknopf ────── */
.btn{
  border-radius:999px;font-weight:600;font-family:inherit;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));
  color:#fff;border:0;box-shadow:0 10px 30px rgba(124,58,237,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(124,58,237,.5)}
.btn-outline,.btn-secondary{
  border:1px solid var(--wk-border);background:var(--wk-card);color:var(--wk-text);
}
.btn-outline:hover,.btn-secondary:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* ── Karten, Felder, Tabellen ────────────────────────────────────────────────── */
.card,.alert,.invite-card,.modal-content,.panel{
  background:var(--wk-card);border:1px solid var(--wk-border);border-radius:var(--radius);
}
input,select,textarea{
  background:var(--input-bg);border:1px solid var(--wk-border);color:var(--wk-text);
  border-radius:12px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--wk-accent);outline:none}
/* Klapplisten werden vom Betriebssystem gezeichnet: ohne diese Zeile steht in der
   aufgeklappten Liste dunkle Schrift auf dunklem Grund und man liest nichts. */
select option{background:#131826;color:var(--wk-text)}
code,kbd,samp,pre{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
table{max-width:100%}
h1,h2,h3,h4{letter-spacing:-.02em}

/* Das Profilbild trägt denselben Ring wie der Akzent der Seite. */
.profile-img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:3px solid transparent;
  background:linear-gradient(var(--wk-bg),var(--wk-bg)) padding-box,
             linear-gradient(135deg,var(--wk-accent),var(--wk-accent2)) border-box;
}

/* ── Fuß ─────────────────────────────────────────────────────────────────────── */
footer,.v-fuss{
  border-top:1px solid var(--wk-border);padding:22px 24px;text-align:center;
  color:var(--wk-muted);font-size:.9rem;line-height:1.9;margin-top:auto;
}
footer a,.v-fuss a{color:inherit;text-decoration:none;display:inline-block;padding:6px 2px}
footer a:hover,.v-fuss a:hover{color:var(--wk-text)}

/* ── Eigene Seiten (Anmeldung, Hinweisbänder) ────────────────────────────────── */
.v-inhalt{max-width:1100px;margin:0 auto;padding:34px 24px 60px}
.v-anmelden h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:0 0 8px}
.v-sub{color:var(--wk-muted);max-width:62ch;margin:0 0 26px}
.v-wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.v-weg{background:var(--wk-card);border:1px solid var(--wk-border);border-radius:var(--radius);padding:20px 22px}
.v-weg h2{font-size:1rem;font-weight:700;margin:0 0 8px}
.v-weg p{color:var(--wk-muted);font-size:.9rem;margin:0 0 16px}
.v-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;
  font-size:.95rem;font-weight:600;text-decoration:none;
  border:1px solid var(--wk-border);background:var(--wk-card);color:var(--wk-text)}
.v-btn-primar{background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));color:#fff;border:0;
  box-shadow:0 10px 30px rgba(124,58,237,.35)}
.v-hinweis{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:1100px;margin:18px auto 0;padding:14px 20px;
  background:rgba(124,58,237,.14);border:1px solid var(--wk-border);border-radius:var(--radius);
  color:var(--wk-text);font-size:.95rem}
.v-hinweis code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;font-size:.85rem}
.v-hinweis .v-btn{margin-left:auto}

/* ── Handy und Tablett ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .nav-content{padding:14px 18px}
  .nav-content .logo{font-size:1.1rem}
  .nav-links{width:100%;justify-content:flex-start}
  .v-inhalt,.main-container{padding-left:18px;padding-right:18px}
  .v-hinweis{margin:14px 18px 0}
  .v-hinweis .v-btn{margin-left:0;width:100%;justify-content:center}
}

/* ── Reste des früheren Hell/Dunkel-Umschalters ───────────────────────────────
   base.css, style.css und components.css enthalten Regeln, die nur unter
   [data-theme="dark"] greifen. Gesetzt wird das Attribut nicht mehr — theme.js ist
   entfernt —, also greifen sie ohnehin nicht. Sie hier trotzdem zu überschreiben
   kostet vier Zeilen und nimmt der Seite eine stille Abhängigkeit: Sollte das
   Attribut je wieder auftauchen (ein Browser-Add-on, ein zurückgeholtes Skript,
   eine kopierte Seite), sähe sonst genau ein Teil der Oberfläche anders aus als
   der Rest, und man suchte den Fehler im Formular statt im Attribut. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background-color:var(--input-bg);border-color:var(--wk-border);color:var(--wk-text);
}
[data-theme="dark"] .slider{background-color:rgba(255,255,255,.14)}