/* =============================================================================
   heimspiel-Marke für Vikunja 2.7.1 – marke.css
   -----------------------------------------------------------------------------
   Wird per nginx vor </head> jeder Vikunja-Seite eingehängt:
     <link rel="stylesheet" href="/marke/marke.css?v=1">
   Vikunja selbst bleibt unverändert. Dieses Blatt überschreibt nur Vikunjas
   CSS-Variablen und eine kurze Liste fester Regeln (siehe README.md).

   Aufbau
     1  MARKENWERTE          ← beim Markenwechsel NUR hier ändern (+ logo*.svg)
     2  Schriftdateien       (@font-face, lokal aus /marke/fonts/)
     3  Farbrollen hell / dunkel   (aus 1 abgeleitet, nicht anfassen)
     4  Zuordnung zu Vikunjas Variablen
     5  Schrift
     6  Bausteine: Fokus, Kopfzeile, Seitenleiste, Knöpfe, Felder, Karten,
        Kanban, Aufgabe, Anmeldung, Hinweise, Logo

   Spezifität: Vikunja lädt Teile seines CSS erst beim Seitenwechsel nach, also
   NACH dieser Datei. Deshalb beginnt jede Regel hier mit `html:root` – das
   gewinnt gegen Vikunjas Regeln gleicher Bauart, ohne !important.
   ============================================================================= */


/* =============================================================================
   1  MARKENWERTE
   -----------------------------------------------------------------------------
   Farben als Farbton (h), Sättigung (s) und Helligkeit (l), weil Vikunja seine
   Farben intern aus diesen drei Bausteinen zusammensetzt. Der Hex-Wert steht
   zur Orientierung dahinter. Hex in H/S/L umrechnen: Befehl in README.md.
   Quelle: clubvia origin/main, app/src/theme/tokens.css (Stand 23.10.2026).
   ============================================================================= */
:root {
  /* — Markenfarben — */
  --marke-tanne-h: 161;        --marke-tanne-s: 51%;      --marke-tanne-l: 12%;      /* #0F2E24 Waldgrün: Primärfarbe, Schrift, Seitenleiste */
  --marke-rasengruen-h: 151.2; --marke-rasengruen-s: 44.4%; --marke-rasengruen-l: 33.1%; /* #2F7A56 Rasengrün („spiel“ hell): Links, Erfolg */
  --marke-signalgelb-h: 68.3;  --marke-signalgelb-s: 100%;  --marke-signalgelb-l: 64.5%;  /* #E6FF4A Signalgelb: EIN Akzent je Ansicht, Schrift darauf immer Waldgrün */
  --marke-kalk-h: 45;          --marke-kalk-s: 35.3%;     --marke-kalk-l: 93.3%;     /* #F4F1E8 Kreide: Seitengrund */
  --marke-leinen-h: 45.9;      --marke-leinen-s: 28.8%;   --marke-leinen-l: 88.4%;   /* #EAE6D9 Leinen: Linien */
  --marke-weiss-h: 0;          --marke-weiss-s: 0%;       --marke-weiss-l: 100%;     /* #FFFFFF Weiß: Karten, Felder */
  --marke-moos-h: 148.4;       --marke-moos-s: 11.1%;     --marke-moos-l: 33.5%;     /* #4C5F55 Moos: leise Schrift */
  --marke-moos-hell-h: 148.4;  --marke-moos-hell-s: 9.5%; --marke-moos-hell-l: 39.4%; /* #5B6E64 Moos hell */
  --marke-nebel-h: 138.8;      --marke-nebel-s: 12.9%;    --marke-nebel-l: 75.7%;    /* #B9C9BE Nebel: leise Schrift dunkel */
  --marke-mint-h: 151.7;       --marke-mint-s: 70.1%;     --marke-mint-l: 69.8%;     /* #7CE8B5 Mint: Primärfarbe dunkel, Markierung Seitenleiste */
  --marke-nachtgruen-h: 163;   --marke-nachtgruen-s: 51%; --marke-nachtgruen-l: 8%;  /* #0A1F19 Nachtgrün: Seitengrund dunkel */
  --marke-tannengruen-h: 163.5; --marke-tannengruen-s: 52.6%; --marke-tannengruen-l: 14.9%; /* #123A2F Tannengrün: Karten dunkel */

  /* — Statusfarben (hell / auf dunklem Grund) — */
  --marke-warn-h: 36;          --marke-warn-s: 77%;       --marke-warn-l: 28%;       /* #7E5210 */
  --marke-warn-dunkel-h: 33;   --marke-warn-dunkel-s: 88%; --marke-warn-dunkel-l: 59%; /* #F2A03A */
  --marke-gefahr-h: 7.4;       --marke-gefahr-s: 62.9%;   --marke-gefahr-l: 38%;     /* #9E3324 */
  --marke-gefahr-dunkel-h: 10; --marke-gefahr-dunkel-s: 86%; --marke-gefahr-dunkel-l: 72%; /* #F58F7A */
  --marke-info-h: 199.4;       --marke-info-s: 42.5%;     --marke-info-l: 28.6%;     /* #2A5468 */
  --marke-info-dunkel-h: 200.3; --marke-info-dunkel-s: 48.1%; --marke-info-dunkel-l: 73.5%; /* #9BC6DC */

  /* — Schriften (Dateien und @font-face in Abschnitt 2) — */
  --marke-schrift-display: 'Bricolage Grotesque';   /* Überschriften, Navigation, Knöpfe */
  --marke-schrift-text: 'DM Sans';                  /* Fließtext, Felder, Listen */
}
/* ============================ Ende MARKENWERTE ============================ */


/* =============================================================================
   2  Schriftdateien – lokal, keine externen Server
   Übernommen aus clubvia origin/main app/src/theme/schriften.css, Pfade auf
   /marke/fonts/. Bei neuer Schrift: Dateien tauschen und hier Namen anpassen.
   ============================================================================= */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/marke/fonts/BricolageGrotesque-200-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/marke/fonts/BricolageGrotesque-200-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/marke/fonts/DMSans-100-1000-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: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/marke/fonts/DMSans-100-1000-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================================
   3  Farbrollen – aus den Markenwerten abgeleitet
   ============================================================================= */
:root {
  /* volle Farben aus den Bausteinen */
  --f-tanne: hsl(var(--marke-tanne-h) var(--marke-tanne-s) var(--marke-tanne-l));
  --f-rasengruen: hsl(var(--marke-rasengruen-h) var(--marke-rasengruen-s) var(--marke-rasengruen-l));
  --f-signalgelb: hsl(var(--marke-signalgelb-h) var(--marke-signalgelb-s) var(--marke-signalgelb-l));
  --f-kalk: hsl(var(--marke-kalk-h) var(--marke-kalk-s) var(--marke-kalk-l));
  --f-leinen: hsl(var(--marke-leinen-h) var(--marke-leinen-s) var(--marke-leinen-l));
  --f-weiss: hsl(var(--marke-weiss-h) var(--marke-weiss-s) var(--marke-weiss-l));
  --f-moos: hsl(var(--marke-moos-h) var(--marke-moos-s) var(--marke-moos-l));
  --f-moos-hell: hsl(var(--marke-moos-hell-h) var(--marke-moos-hell-s) var(--marke-moos-hell-l));
  --f-nebel: hsl(var(--marke-nebel-h) var(--marke-nebel-s) var(--marke-nebel-l));
  --f-mint: hsl(var(--marke-mint-h) var(--marke-mint-s) var(--marke-mint-l));
  --f-nachtgruen: hsl(var(--marke-nachtgruen-h) var(--marke-nachtgruen-s) var(--marke-nachtgruen-l));
  --f-tannengruen: hsl(var(--marke-tannengruen-h) var(--marke-tannengruen-s) var(--marke-tannengruen-l));
  --f-warn: hsl(var(--marke-warn-h) var(--marke-warn-s) var(--marke-warn-l));
  --f-warn-dunkel: hsl(var(--marke-warn-dunkel-h) var(--marke-warn-dunkel-s) var(--marke-warn-dunkel-l));
  --f-gefahr: hsl(var(--marke-gefahr-h) var(--marke-gefahr-s) var(--marke-gefahr-l));
  --f-gefahr-dunkel: hsl(var(--marke-gefahr-dunkel-h) var(--marke-gefahr-dunkel-s) var(--marke-gefahr-dunkel-l));
  --f-info: hsl(var(--marke-info-h) var(--marke-info-s) var(--marke-info-l));
  --f-info-dunkel: hsl(var(--marke-info-dunkel-h) var(--marke-info-dunkel-s) var(--marke-info-dunkel-l));

  --stapel-display: var(--marke-schrift-display), var(--marke-schrift-text), system-ui, sans-serif;
  --stapel-text: var(--marke-schrift-text), system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Seitenleiste: in beiden Modi Waldgrün wie im Portal. Stufen wie
     clubvia tokens.css (cv-leiste-*): Weiß darauf 14,6:1, leise Schrift 8,2:1,
     Markierung Mint 9,8:1. */
  --m-leiste-grund: var(--f-tanne);
  --m-leiste-schrift: var(--f-weiss);
  --m-leiste-leise: color-mix(in srgb, var(--f-weiss) 72%, var(--f-tanne));
  --m-leiste-hover: color-mix(in srgb, var(--f-weiss) 8%, var(--f-tanne));
  --m-leiste-aktiv: color-mix(in srgb, var(--f-weiss) 14%, var(--f-tanne));
  --m-leiste-linie: color-mix(in srgb, var(--f-weiss) 18%, var(--f-tanne));
  --m-leiste-marke: var(--f-mint);

  --m-akzent: var(--f-signalgelb);
  --m-akzent-auf: var(--f-tanne);                  /* 13,06:1 */
  --m-buehne: var(--f-tanne);                      /* Fläche der Anmeldeseite */
  --m-buehne-schrift: var(--f-kalk);               /* 12,94:1 */
}

/* — hell — */
html:root {
  --m-grund: var(--f-kalk);
  --m-flaeche: var(--f-weiss);
  --m-linie: var(--f-leinen);
  --m-feldrand: color-mix(in srgb, var(--f-moos-hell) 75%, var(--f-leinen));   /* 3,5:1 auf Weiß */
  --m-schrift: var(--f-tanne);                     /* 14,62:1 auf Weiß */
  --m-schrift-leise: var(--f-moos);                /* 6,83:1 auf Weiß, 6,05:1 auf Kreide */
  --m-fokus: var(--f-tanne);
  --m-fokus-weich: color-mix(in srgb, var(--f-tanne) 20%, transparent);
  --m-schatten: color-mix(in srgb, var(--f-tanne) 14%, transparent);

  --m-primaer-h: var(--marke-tanne-h); --m-primaer-s: var(--marke-tanne-s); --m-primaer-l: var(--marke-tanne-l);
  --m-primaer: var(--f-tanne);
  --m-primaer-tief: color-mix(in srgb, var(--f-tanne) 72%, black);
  --m-primaer-auf: var(--f-weiss);
  --m-link-h: var(--marke-rasengruen-h); --m-link-s: var(--marke-rasengruen-s); --m-link-l: var(--marke-rasengruen-l);
  --m-link: var(--f-rasengruen);                   /* 5,20:1 auf Weiß, 4,60:1 auf Kreide */

  --m-ok-h: var(--marke-rasengruen-h); --m-ok-s: var(--marke-rasengruen-s); --m-ok-l: var(--marke-rasengruen-l);
  --m-warn-h: var(--marke-warn-h); --m-warn-s: var(--marke-warn-s); --m-warn-l: var(--marke-warn-l);
  --m-gefahr-h: var(--marke-gefahr-h); --m-gefahr-s: var(--marke-gefahr-s); --m-gefahr-l: var(--marke-gefahr-l);
  --m-info-h: var(--marke-info-h); --m-info-s: var(--marke-info-s); --m-info-l: var(--marke-info-l);
  --m-gefahr: var(--f-gefahr);
  --m-status-auf: var(--f-weiss);

  --m-grau-50: color-mix(in srgb, var(--f-kalk) 50%, var(--f-weiss));
  --m-grau-100: var(--f-kalk);
  --m-grau-100-hsl: var(--marke-kalk-h), var(--marke-kalk-s), var(--marke-kalk-l);
  --m-grau-200: var(--f-leinen);
  --m-grau-300: color-mix(in srgb, var(--f-moos) 20%, var(--f-leinen));
  --m-grau-400: color-mix(in srgb, var(--f-moos-hell) 75%, var(--f-leinen));   /* Symbole: 3,52:1 Weiß, 3,11:1 Kreide */
  --m-grau-500: var(--f-moos-hell);
  --m-grau-500-hsl: var(--marke-moos-hell-h), var(--marke-moos-hell-s), var(--marke-moos-hell-l);
  --m-grau-600: var(--f-moos);
  --m-grau-700: color-mix(in srgb, var(--f-moos) 50%, var(--f-tanne));
  --m-grau-800: color-mix(in srgb, var(--f-moos) 25%, var(--f-tanne));
  --m-grau-900: var(--f-tanne);
}

/* — dunkel (Vikunja setzt die Klasse .dark auf <html>) — */
@media screen {
  html:root.dark {
    --m-grund: var(--f-nachtgruen);
    --m-flaeche: var(--f-tannengruen);
    --m-linie: color-mix(in srgb, var(--f-nebel) 20%, var(--f-tannengruen));
    --m-feldrand: color-mix(in srgb, var(--f-nebel) 55%, var(--f-tannengruen));   /* 3,3:1 auf Tannengrün */
    --m-schrift: var(--f-kalk);                    /* 11,12:1 auf Tannengrün */
    --m-schrift-leise: var(--f-nebel);             /* 7,27:1 auf Tannengrün */
    --m-fokus: var(--f-mint);
    --m-fokus-weich: color-mix(in srgb, var(--f-mint) 30%, transparent);
    --m-schatten: rgb(0 0 0 / .45);

    --m-primaer-h: var(--marke-mint-h); --m-primaer-s: var(--marke-mint-s); --m-primaer-l: var(--marke-mint-l);
    --m-primaer: var(--f-mint);
    --m-primaer-tief: color-mix(in srgb, var(--f-mint) 80%, var(--f-weiss));
    --m-primaer-auf: var(--f-tanne);               /* 9,79:1 auf Mint */
    --m-link-h: var(--marke-mint-h); --m-link-s: var(--marke-mint-s); --m-link-l: var(--marke-mint-l);
    --m-link: var(--f-mint);                       /* 8,41:1 auf Tannengrün */

    --m-ok-h: var(--marke-mint-h); --m-ok-s: var(--marke-mint-s); --m-ok-l: var(--marke-mint-l);
    --m-warn-h: var(--marke-warn-dunkel-h); --m-warn-s: var(--marke-warn-dunkel-s); --m-warn-l: var(--marke-warn-dunkel-l);
    --m-gefahr-h: var(--marke-gefahr-dunkel-h); --m-gefahr-s: var(--marke-gefahr-dunkel-s); --m-gefahr-l: var(--marke-gefahr-dunkel-l);
    --m-info-h: var(--marke-info-dunkel-h); --m-info-s: var(--marke-info-dunkel-s); --m-info-l: var(--marke-info-dunkel-l);
    --m-gefahr: var(--f-gefahr-dunkel);
    --m-status-auf: var(--f-tanne);

    --m-grau-50: var(--f-tannengruen);
    --m-grau-100: var(--f-nachtgruen);
    --m-grau-100-hsl: var(--marke-nachtgruen-h), var(--marke-nachtgruen-s), var(--marke-nachtgruen-l);
    --m-grau-200: color-mix(in srgb, var(--f-nebel) 20%, var(--f-tannengruen));
    --m-grau-300: color-mix(in srgb, var(--f-nebel) 32%, var(--f-tannengruen));
    --m-grau-400: color-mix(in srgb, var(--f-nebel) 55%, var(--f-tannengruen));
    --m-grau-500: color-mix(in srgb, var(--f-nebel) 85%, var(--f-tannengruen));
    --m-grau-500-hsl: var(--marke-nebel-h), var(--marke-nebel-s), var(--marke-nebel-l);
    --m-grau-600: var(--f-nebel);
    --m-grau-700: color-mix(in srgb, var(--f-kalk) 30%, var(--f-nebel));
    --m-grau-800: color-mix(in srgb, var(--f-kalk) 60%, var(--f-nebel));
    --m-grau-900: var(--f-kalk);
  }
}


/* =============================================================================
   4  Zuordnung zu Vikunjas Variablen
   (Vikunja: frontend/src/styles/custom-properties/colors.scss, Bulma-Variablen)
   Der Selektor nennt .dark ausdrücklich, weil Vikunjas eigener Dunkel-Block
   (:root.dark) sonst gewänne.
   ============================================================================= */
html:root,
html:root.dark {
  /* Grautreppe → warme Markentreppe */
  --grey-50: var(--m-grau-50);
  --grey-100: var(--m-grau-100);
  --grey-100-hsl: var(--m-grau-100-hsl);
  --grey-200: var(--m-grau-200);
  --grey-300: var(--m-grau-300);
  --grey-400: var(--m-grau-400);
  --grey-500: var(--m-grau-500);
  --grey-500-hsl: var(--m-grau-500-hsl);
  --grey-600: var(--m-grau-600);
  --grey-700: var(--m-grau-700);
  --grey-800: var(--m-grau-800);
  --grey-900: var(--m-grau-900);

  /* Flächen */
  --site-background: var(--m-grund);
  --scheme-main: var(--m-flaeche);
  --scheme-main-bis: var(--m-grau-50);
  --scheme-main-ter: var(--m-grund);
  --white: var(--m-flaeche);
  --background: var(--m-grund);
  --body-background-color: var(--m-grund);

  /* Schrift und Linien */
  --text: var(--m-schrift);
  --text-strong: var(--m-schrift);
  --text-light: var(--m-schrift-leise);
  --text-muted: var(--m-schrift-leise);
  --title-color: var(--m-schrift);
  --title-weight: 700;
  --label-font-weight: 600;
  --border: var(--m-linie);
  --border-light: var(--m-linie);
  --border-hover: var(--m-feldrand);
  --card-border-color: var(--m-linie);
  --logo-text-color: var(--m-schrift);
  --tag-background-color: var(--m-grund);
  --tag-color: var(--m-schrift);
  --tag-radius: 999px;
  --dropdown-item-hover-background-color: var(--m-grund);
  --dropdown-item-hover-color: var(--m-schrift);
  --table-row-hover-background-color: var(--m-grund);

  /* Primärfarbe (Knöpfe, aktive Ansicht, Häkchen) */
  --primary-h: var(--m-primaer-h);
  --primary-s: var(--m-primaer-s);
  --primary-l: var(--m-primaer-l);
  --primary-a: 1;
  --primary-hsl: var(--m-primaer-h), var(--m-primaer-s), var(--m-primaer-l);
  --primary: var(--m-primaer);
  --primary-dark: var(--m-primaer-tief);
  --primary-invert: var(--m-primaer-auf);
  --switch-view-color: var(--m-primaer-auf);
  --switch-view-active-background: var(--m-primaer);

  /* Links */
  --link-h: var(--m-link-h);
  --link-s: var(--m-link-s);
  --link-l: var(--m-link-l);
  --link: var(--m-link);
  --link-hover: var(--m-schrift);
  --link-invert: var(--m-primaer-auf);

  /* Status */
  --success-h: var(--m-ok-h);     --success-s: var(--m-ok-s);     --success-l: var(--m-ok-l);
  --warning-h: var(--m-warn-h);   --warning-s: var(--m-warn-s);   --warning-l: var(--m-warn-l);
  --danger-h: var(--m-gefahr-h);  --danger-s: var(--m-gefahr-s);  --danger-l: var(--m-gefahr-l);
  --info-h: var(--m-info-h);      --info-s: var(--m-info-s);      --info-l: var(--m-info-l);
  --success-invert: var(--m-status-auf);
  --warning-invert: var(--m-status-auf);
  --danger-invert: var(--m-status-auf);
  --info-invert: var(--m-status-auf);
  --danger-text: var(--m-gefahr);

  /* Felder */
  --input-border-color: var(--m-feldrand);
  --input-hover-border-color: var(--m-schrift-leise);
  --input-focus-border-color: var(--m-primaer);
  --input-placeholder-color: var(--m-grau-500);
  --input-shadow: none;
  --input-radius: 12px;
  --radius: 10px;
  --radius-small: 6px;
  --radius-large: 16px;

  /* Schatten → Linien (Portal: „Linien und Kontraste statt Schatten“);
     nur Schwebendes (Menüs, Dialoge) behält einen weichen Schatten. */
  --shadow-xs: 0 0 0 1px var(--m-linie);
  --shadow-sm: 0 0 0 1px var(--m-linie);
  --shadow-md: 0 0 0 1px var(--m-linie), 0 8px 24px var(--m-schatten);
  --shadow-lg: 0 0 0 1px var(--m-linie), 0 16px 40px var(--m-schatten);

  /* Schrift (Fließtext; Vikunjas body nutzt --body-family → --family-primary) */
  --family-primary: var(--stapel-text);
  --family-secondary: var(--stapel-text);
  --family-sans-serif: var(--stapel-text);
  --body-family: var(--stapel-text);

  accent-color: var(--m-primaer);
}


/* =============================================================================
   5  Schrift
   Vikunja setzt Quicksand (Überschriften) und Open Sans an festen Stellen.
   Diese Liste stammt aus allen 35 Stylesheets von v2.7.1 (README: Update-Prüfung).
   ============================================================================= */
html:root body { font-family: var(--stapel-text); }

/* Bewusst eine einfache Liste und kein :is(): :is() nähme für alle Glieder die
   höchste Spezifität an und überstimmte dann gezieltere Regeln weiter unten. */
html:root h1, html:root h2, html:root h3, html:root h4, html:root h5, html:root h6,
html:root .title, html:root .input.title, html:root .image-title,
html:root .top-menu .menu-list li, html:root .notifications .notifications-list .head,
html:root .bottom-sheet__title, html:root .project-title, html:root .is-archived,
html:root .calendar-month__month-select, html:root .calendar-month__year-input,
html:root .time-control__value, html:root .time-control__colon,
html:root .gantt-timeline-months .timeunit-month,
html:root .gantt-timeline-days .timeunit .timeunit-wrapper {
  font-family: var(--stapel-display);
}
/* Vikunja erzwingt 400 !important für alle Überschriften; die App setzt Titel 700. */
html:root :is(h1, h2) { font-weight: 700 !important; letter-spacing: -0.01em; }
html:root :is(h3, h4, h5, h6) { font-weight: 600 !important; }
/* Aufgabentitel (bearbeitbar) und Projekttitel in der Kopfzeile */
html:root h1.input.title { font-weight: 700 !important; letter-spacing: -0.01em; }
html:root .navbar .project-title { font-weight: 700; letter-spacing: -0.01em; }
/* Am Handy hat der Titel nur rund 86 px: schmale Bricolage (Breitenachse),
   sonst kürzt Vikunja „Verwaltung“ zu „Verwaltu…“ */
@media screen and (max-width: 768px) {
  html:root .navbar .project-title { font-stretch: 85%; }
}

html:root .username, html:root .result-item-button, html:root .search-result-button,
html:root .datepicker-popup__clear,
html:root .notifications .notifications-list .single-notification .user span {
  font-family: var(--stapel-text);
}
/* Kartentitel im Kanban sind Inhalt, keine Überschrift: Textschrift. */
html:root .task h3 { font-family: var(--stapel-text); font-weight: 500 !important; letter-spacing: 0; }

/* Versalien-Beschriftungen ruhig setzen (Portal: keine Versalien, keine Laufweite) */
html:root .action-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--m-schrift-leise);
}
html:root .details .detail-title { color: var(--m-schrift-leise); }


/* =============================================================================
   6  Bausteine
   ============================================================================= */

/* — Fokus: 3 px, 2 px Abstand, wie im Portal — */
html:root :focus-visible,
html:root .button:focus-visible,
html:root .base-button:focus-visible {
  outline: 3px solid var(--m-fokus);
  outline-offset: 2px;
}
html:root main:focus-visible { outline: none; }
/* Felder: Rand in der Primärfarbe plus weicher Ring statt Umriss */
html:root :is(.input, .textarea, .select select):focus-visible {
  outline: none;
  border-color: var(--m-primaer);
  box-shadow: 0 0 0 3px var(--m-fokus-weich);
}

/* — Kopfzeile: Kreide wie die Seite, abgesetzt durch eine Leinen-Linie — */
html:root .navbar { box-shadow: 0 1px 0 var(--m-linie); }
/* Die Knöpfe der Kopfzeile sind so hoch wie die Leiste: Ring nach innen, sonst
   schneidet ihn der obere Bildschirmrand ab */
html:root .navbar :focus-visible { outline-offset: -3px; border-radius: 12px; }
html:root .navbar .username { font-weight: 600; }

/* — Logo: Vikunja zeigt es als <img> ohne feste Maße. Eine SVG ohne
     width/height fällt darin auf 0 × 0 px zusammen; deshalb feste Box,
     contain verhindert Verzerrung bei anderen Seitenverhältnissen. — */
html:root img.logo {
  inline-size: 168px;
  block-size: 48px;
  max-inline-size: 100%;
  object-fit: contain;
  object-position: left center;
}
html:root .no-auth-wrapper img.logo { object-position: center; }
/* Rückfall, falls service.customlogourldark nicht gesetzt ist (Chromium, Safari) */
@media screen {
  html:root.dark img.logo[src$="/marke/logo.svg"] { content: url("/marke/logo-dunkel.svg"); }
}

/* — Seitenleiste: Waldgrün wie im Portal. Statt jede Vikunja-Regel einzeln
     umzufärben, bekommen ihre Variablen innerhalb der Leiste andere Werte. — */
html:root .menu-container {
  --site-background: var(--m-leiste-grund);
  --white: var(--m-leiste-hover);
  --grey-700: var(--m-leiste-schrift);
  --grey-400: var(--m-leiste-leise);
  --grey-300: var(--m-leiste-leise);
  --grey-200: var(--m-leiste-aktiv);
  --primary: var(--m-leiste-schrift);
  color: var(--m-leiste-schrift);
}
@media screen {
  html:root.dark .menu-container { box-shadow: inset -1px 0 0 var(--m-leiste-linie); }
}
/* Menüs, die in der Leiste aufklappen, bekommen die normalen Werte zurück */
html:root .menu-container :is(.dropdown-menu, [popover]) {
  --site-background: var(--m-grund);
  --white: var(--m-flaeche);
  --grey-700: var(--m-grau-700);
  --grey-400: var(--m-grau-400);
  --grey-300: var(--m-grau-300);
  --grey-200: var(--m-grau-200);
  --primary: var(--m-primaer);
  color: var(--m-schrift);
}
html:root .menu-container .menu-list :is(li > a, li > div > a, .list-menu-link) { color: var(--m-leiste-schrift); }
html:root .menu-container .top-menu .menu-list li { font-weight: 600; font-size: .9375rem; }
/* Zeilen als Pillen mit Luft zum Rand */
html:root .menu-container .menu .menu-list :is(.other-menu-items li, li > div) {
  border-radius: 999px;
  margin-inline: .5rem;
  position: relative;
  transition: background-color .12s;
}
/* Aktiver Eintrag: Fläche + Balken in Mint, Symbol in Mint */
html:root .menu-container .menu .menu-list :is(.other-menu-items li, li > div):has(> a.router-link-exact-active) {
  background: var(--m-leiste-aktiv);
}
html:root .menu-container .menu .menu-list :is(.other-menu-items li, li > div):has(> a.router-link-exact-active)::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: 50%;
  inline-size: 4px;
  block-size: 20px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--m-leiste-marke);
}
html:root .menu-container .menu .menu-list a.router-link-exact-active { font-weight: 600; }
html:root .menu-container .menu .menu-list a.router-link-exact-active .icon:not(.handle) { color: var(--m-leiste-marke); }
/* Fokus in der Leiste: innen, damit das Scrollen ihn nicht abschneidet */
html:root .menu-container :focus-visible { outline: 3px solid var(--m-leiste-marke); outline-offset: -3px; border-radius: 999px; }
html:root .menu-container .navigation-item:has(:focus-visible) { box-shadow: none; background-color: var(--m-leiste-hover); }
html:root .menu-container :is(.is-drop-target .navigation-item, .is-drop-target) {
  background-color: var(--m-leiste-aktiv);
  box-shadow: inset 0 0 0 2px var(--m-leiste-marke);
}
html:root .menu-container .menu-bottom-link { color: var(--m-leiste-leise); }
/* Handy: Die Leiste zeigt oben das Logo. Das helle Logo steht dort auf einer
   Kreide-Platte, wie die Rückfall-Platte im Portal. */
html:root:not(.dark) .menu-container .top-menu a.logo {
  inline-size: fit-content;
  margin-inline-start: 1rem;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--f-kalk);
}

/* — Knöpfe: Pille, Display-Schrift 600, keine Versalien, kein Schatten — */
html:root .button {
  --button-text-color: var(--m-primaer-auf);
  font-family: var(--stapel-display);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  box-shadow: none;
  padding-inline: 1.1em;
}
html:root .button:hover { box-shadow: none; }
html:root .button.is-outlined {
  background-color: var(--m-flaeche);
  color: var(--m-schrift);
  box-shadow: inset 0 0 0 1px var(--m-linie);
}
html:root .button.is-outlined:hover {
  color: var(--m-schrift);
  background-color: var(--m-grund);
  box-shadow: inset 0 0 0 1px var(--m-schrift);
}
html:root .button.is-text:hover { background-color: var(--m-grund); }

/* Der eine Akzent je Ansicht: Signalgelb mit Waldgrün (13,06:1).
   Anmelden · Aufgabe hinzufügen · Als erledigt markieren */
html:root #loginform .button.is-primary,
html:root .button.add-task-button,
html:root .action-buttons .button.button--mark-done.is-pending {
  --button-text-color: var(--m-akzent-auf);
  background-color: var(--m-akzent);
  color: var(--m-akzent-auf);
  box-shadow: inset 0 0 0 1px var(--m-akzent);
  filter: none;
}
html:root #loginform .button.is-primary:hover,
html:root .button.add-task-button:hover,
html:root .action-buttons .button.button--mark-done.is-pending:hover {
  background-color: var(--m-akzent);
  color: var(--m-akzent-auf);
  box-shadow: inset 0 0 0 1.5px var(--m-akzent-auf);
}

/* — Ansichtswahl (Liste, Tabelle, Kanban …) als Pillen — */
html:root .switch-view { border-radius: 999px; padding: .375rem; }
html:root .switch-view-button { border-radius: 999px; padding: .3rem .75rem; }

/* — Karten und Flächen — */
html:root .card { border-radius: 16px; }
html:root .dropdown-content { border-radius: 12px; }
html:root .fancy-checkbox__icon { --stroke-color: var(--m-feldrand); }

/* — Projektkacheln („Zuletzt angesehen“, Projekte) — */
html:root .project-card { border-radius: 16px; }
html:root .project-card .project-title { font-weight: 600; }

/* — Hinweis „Zum Startbildschirm hinzufügen“ (nur Handy): Symbol in Schriftfarbe,
     Vikunjas --primary-light verschwände im Dunkelmodus auf dem hellen Grund — */
html:root .add-to-home-screen .add-icon { color: inherit; }

/* — Kanban — */
html:root .kanban .bucket { border-radius: 16px; }
html:root .kanban .task,
html:root .task.kanban-card { border-radius: 12px; }
html:root .task :is(.due-date, .priority-label),
html:root .task .footer .icon { border-radius: 999px; }
html:root .kanban .ghost::after { border-color: var(--m-feldrand); border-radius: 12px; }
/* „Aufgabe hinzufügen“ unter der Spalte bleibt leise wie bei Vikunja */
html:root .kanban .bucket-footer .button.is-outlined { background-color: transparent; box-shadow: none; }
html:root .kanban .bucket-footer .button.is-outlined:hover { background-color: var(--m-flaeche); }

/* — Startseite: Vikunjas Lama-Bild im Leerzustand entfällt — */
html:root .llama-cool { display: none; }

/* — Anmeldeseite: Bühne in Waldgrün statt Foto, kein Lama-Wasserzeichen — */
html:root .no-auth-wrapper { background-image: none; }
@media screen and (min-width: 769px) {
  html:root .noauth-container { border-radius: 20px; }   /* am Handy randlos wie bei Vikunja */
}
html:root .noauth-container .image {
  background: var(--m-buehne);
  padding: 2rem;
}
html:root .noauth-container .image::before { content: none; }
html:root .noauth-container .image-title {
  color: var(--m-buehne-schrift);
  font-weight: 800 !important;
  font-size: clamp(2rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* — Hinweise (unten eingeblendet) und Tooltips — */
html:root .vue-notification {
  background: var(--f-tanne);
  color: var(--f-weiss);
  border-left: 5px solid var(--f-mint);
  border-radius: 12px;
  font-family: var(--stapel-text);
}
html:root .vue-notification.success { background: var(--f-tanne); border-left-color: var(--f-mint); }
html:root .vue-notification.warn { background: var(--f-warn); border-left-color: var(--f-warn-dunkel); }
html:root .vue-notification.error { background: var(--f-gefahr); border-left-color: var(--f-gefahr-dunkel); }
html:root .v-popper--theme-tooltip .v-popper__inner { background: var(--f-tanne); color: var(--f-weiss); }
html:root .v-popper--theme-tooltip .v-popper__arrow-outer { border-color: var(--f-tanne); }


/* =============================================================================
   7  Anmeldeseite: Hinweis „Verwende die Vikunja-Installation unter … ändern“
   -----------------------------------------------------------------------------
   Ausgeblendet (23.10.2026): Es gibt nur diesen einen Server. Die Server-Adresse
   zu ändern, würde das Team nur verwirren.
   ============================================================================= */
html:root .noauth-container .api-config { display: none; }

/* „Passwort vergessen?“ ausgeblendet (23.10.2026): Der Mailversand ist aus
   (mailer.enabled: false), ein Zurücksetzen per Mail kann nicht ankommen.
   Wer sein Kennwort vergisst, meldet sich bei Daniel. */
html:root .noauth-container .reset-password-link { display: none; }


/* =============================================================================
   8  Anmeldeseite: Spielfeld auf der Bühne
   -----------------------------------------------------------------------------
   Daniel 23.10.2026: „kannst du da bei willkommen zurück noch ein bild einfügen?
   da sieht so leer aus“ und dann: „mach doch irgendwas cooles da als bild das du
   selber generierst für heimspiel. so ein spielfeld wie auf der webseite“
   (Trello oc9noeZl). anmeldung-feld.svg zeichnet den Hallenboden wie im Hero von
   heimspiel-meinverein.de: Handball Signalgelb, Basketball und Volleyball blass,
   Handball der Website. Die Linien ziehen sich beim Laden einmal auf, außer bei
   „Bewegung reduzieren“. Das SVG füllt die Bühne (100 % 100 %) und schneidet über
   preserveAspectRatio slice zu, das Tor bleibt oben. Farben beim Markentausch im
   SVG ändern. Am Handy blendet Vikunja die Bühne aus.
   ============================================================================= */
html:root .noauth-container .image {
  background-image: url('/marke/anmeldung-feld.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}