/* SEMES Farbschema und gemeinsame Gestaltung (Landingpage, Dashboard, Rechner, Einstellungen, Benutzer).
   Farben nur hier ändern. Angelehnt an semes.ch: Navy, Semes-Blau, Orange als Akzent.
   Hell ist Standard; dunkel über [data-theme="dark"] (Schalter in der Navigation, siehe theme.js). */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/montserrat-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: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/montserrat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --navy: #121b2a;       /* SEMES Hauptfarbe (Navigation, Kopfbereich, Fuss) */
  --navy-2: #1e2a3d;     /* zweiter Ton für Verläufe */
  --blue: #1b92d0;       /* SEMES-Blau für Akzente */
  --orange: #ffaa06;     /* SEMES-Orange (Hover, Hervorhebungen) */

  --acc: #1278ad;        /* Buttons und Links (Semes-Blau, dunkler für gute Lesbarkeit) */
  --acc-hover: #0e6593;
  --acc-ink: #ffffff;    /* Schrift auf Buttons */
  --link: #1278ad;
  --on-brand: #ffffff;   /* Schrift auf Navy */
  --nav-bg: var(--navy);
  --nav-active: var(--blue);
  --foot-bg: var(--navy);
  --hero1: var(--navy);
  --hero2: var(--navy-2);

  --c-green: #3a9a57;    /* Kachelfarben im Dashboard */
  --c-blue: #1b92d0;
  --c-pink: #a31366;
  --c-orange: #e89400;

  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #121b2a;
  --muted: #586172;
  --line: #dfe3ea;
  --field: #ffffff;
  --warn: #8a4b00;
  --warn-bg: #fff4e0;
  --err: #b3261e;
  --err-bg: #fdecea;
  --ok: #1d7a3b;
  --ok-bg: #e6f4ea;
  --shadow: 0 1px 2px rgba(18, 27, 42, .06), 0 6px 20px rgba(18, 27, 42, .06);
  --radius: 10px;
  --font: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --acc: #3aa6e0;
  --acc-hover: #63baea;
  --acc-ink: #04111b;
  --link: #6cc0ee;
  --nav-bg: #070b12;
  --foot-bg: #070b12;
  --hero1: #0b1220;
  --hero2: #142033;
  --c-green: #5cbf78;
  --c-pink: #e0629f;
  --c-orange: #ffaa06;
  --bg: #0b111b;
  --card: #141c29;
  --ink: #e8edf4;
  --muted: #9ba7b9;
  --line: #263144;
  --field: #0f1622;
  --warn: #ffc266;
  --warn-bg: #2e2410;
  --err: #ffb4ab;
  --err-bg: #3a1714;
  --ok: #6fd796;
  --ok-bg: #12291b;
  --shadow: none;
}
@media print { /* Ausdrucke und PDFs immer hell */
  :root[data-theme="dark"] { color-scheme: light; --bg: #fff; --card: #fff; --field: #fff; --ink: #000; --muted: #444; --line: #ccc; --link: #000; --warn: #6b3a00; --warn-bg: #fff4e0; }
}
[hidden] { display: none !important; }
a { color: var(--link); }
a:hover { color: var(--acc-hover); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--on-brand); text-decoration: none; min-height: 36px; }
.logo:hover { color: var(--on-brand); }
.logo-svg { display: block; height: 26px; width: auto; }
.logo-sub { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; border-left: 1px solid rgba(255,255,255,.35); padding-left: 12px; white-space: nowrap; }

/* Hell/Dunkel-Schalter */
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--on-brand); cursor: pointer; }
.theme-toggle:hover { border-color: var(--orange); color: var(--orange); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* Navigationsleiste in der Anwendung */
.appbar { background: var(--nav-bg); color: var(--on-brand); position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.appbar-in { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.appbar .logo { padding: 12px 0; flex: none; }
/* Navigation: nebeneinander, solange Platz ist; sonst Hamburger-Menü (Klasse .compact setzt shell.js) */
.appnav { display: flex; flex: 1; min-width: 0; overflow: hidden; margin-left: 8px; }
.appnav a { position: relative; color: var(--on-brand); text-decoration: none; padding: 12px 14px; font-weight: 600; white-space: nowrap; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.menu-toggle { display: none; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--on-brand); cursor: pointer; }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { border-color: var(--orange); color: var(--orange); }
.menu-toggle svg { width: 22px; height: 22px; }
.appbar.compact .menu-toggle { display: grid; }
.appbar.compact .appnav { visibility: hidden; }
.appbar.compact.open .appnav {
  visibility: visible; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; margin: 0; overflow: visible;
  background: var(--nav-bg); padding: 6px 0 10px; box-shadow: 0 12px 24px rgba(0,0,0,.3); border-top: 1px solid rgba(255,255,255,.1);
}
.appbar.compact.open .appnav a { padding: 14px 20px; font-size: .9rem; }
.appbar.compact.open .appnav a.on::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; }
.appnav a:hover { opacity: 1; color: var(--orange); }
.appnav a.on { opacity: 1; }
.appnav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--nav-active); }
.appnav .count { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--orange); color: #121b2a; font-size: .72rem; line-height: 20px; text-align: center; letter-spacing: 0; }
.appbar-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.usermenu { position: relative; }
.userbtn { display: flex; align-items: center; gap: 8px; background: transparent; color: var(--on-brand); border: 0; padding: 8px 4px; font: inherit; font-size: .9rem; cursor: pointer; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; right: 0; top: 100%; min-width: 240px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.menu-info { font-size: .85rem; color: var(--muted); padding: 2px 4px 10px; overflow-wrap: anywhere; }
.menu a, .menu button { display: block; width: 100%; padding: 10px; font: inherit; font-size: .9rem; text-align: center; text-decoration: none; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.menu a { margin-bottom: 8px; }
.menu a:hover, .menu button:hover { border-color: var(--acc); color: var(--ink); }
@media (max-width: 480px) { .logo-sub { display: none; } }
@media (max-width: 420px) { .uname { display: none; } }

/* Seitenrahmen und Fuss */
.page { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
.ptitle { font-size: 1.6rem; font-weight: 800; margin: 4px 0 4px; letter-spacing: -.01em; }
.plead { margin: 0 0 18px; color: var(--muted); }
body:has(> .appbar) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(> .appbar) > main { flex: 1 0 auto; width: 100%; }
.appfoot { background: var(--foot-bg); color: rgba(255,255,255,.75); margin-top: 48px; padding: 18px 0; font-size: .8rem; }
.appfoot .in { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.appfoot .logo-svg { height: 16px; color: #fff; }

/* Gemeinsame Bausteine */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
button.primary, .btn { transition: background-color .15s; }
button.primary:hover:not([disabled]), .btn:hover:not([disabled]) { background: var(--acc-hover); border-color: var(--acc-hover); }

/* Dashboard-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile { --tc: var(--c-blue); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; text-align: center; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.tile h3 { margin: 0; padding: 16px 8px 0; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: manual; }
.tile .ico { flex: 1; display: grid; place-items: center; padding: 18px 8px; color: var(--tc); }
.tile .ico svg { width: 64px; height: 64px; }
.tile .val { border-top: 1px solid var(--line); border-bottom: 4px solid var(--tc); padding: 12px 8px; font-size: 1.6rem; font-weight: 800; }
.tile .val.sm { font-size: .95rem; font-weight: 700; padding: 18px 8px; }
a.tile:hover, a.tile:focus-visible { color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(18,27,42,.14); }
.tile.new { background: linear-gradient(180deg, rgba(27,146,208,.10), transparent 70%), var(--card); }
.tile.off { opacity: .5; }