/* =====================================================================================================
   Seynstahl Kit MODERN — gemeinsames Stylesheet (Master: ~/SeynstahlHandbuch/static/seynstahl-modern.css, Kit-Doku docs/branding-kit-modern.md)
   Wird in SOLARIS, ARMA und PENSUM VOR dem Modul-CSS geladen. Hier steht nur, was in allen Modulen gleich ist;
   Modul-Eigenes (Logo-Kachel, Seitenaufbau, Karten …) bleibt in <modul>-modern.css.
   Version 1.0.0 · 2026-11-05
   ===================================================================================================== */

/* Urbanist lokal (variable Schrift 400–700, SIL OFL) — kein Google-Aufruf; CSP-sicher (default-src 'self') */
@font-face{ font-family:'Urbanist'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/urbanist-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; }
@font-face{ font-family:'Urbanist'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/urbanist-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; }

/* ---------- Kopf (sentynel_header.js) — transparent, Konto-Pille, Nachtmodus-Knopf ---------- */
.sy-topbar{ background:transparent; color:var(--m-ink); border-bottom:0; padding:18px clamp(16px,1.6vw,28px) 10px; gap:14px;
  max-width:1440px; margin-left:auto; margin-right:auto; }   /* gleiche Box wie .wrap/.band-inner → Kopf fluchtet auch auf breiten Fenstern (wie PENSUM) */
.sy-topbar::before,.sy-topbar::after{ display:none; }
.sy-topbar{ position:relative; display:flex; flex-wrap:wrap; }   /* Layout-Basis, damit der Kopf auch ohne seynstahl-base.css (PENSUM) steht */
.sy-topbar[hidden]{ display:none; }
.sy-topbar .sy-title{ margin:0; }
.sy-topbar button.sy-link{ border:0; background:transparent; font:inherit; }
.sy-topbar .sy-titleblock{ border-left:0; padding-left:2px; flex-direction:column; gap:0; }
.sy-topbar .sy-title{ color:var(--m-ink); font-family:var(--m-font); font-size:21px; font-weight:700; letter-spacing:-.02em !important; text-transform:none; line-height:1.15; }
.sy-topbar .sy-slogan{ color:var(--m-muted); font-family:var(--m-font); font-size:12px; letter-spacing:0; text-transform:none; }
/* Konto-Pille + Nachtmodus-Knopf wie PENSUM: runder Knopf, Initialen-Kreis · Name · Abmelden */
.tbtn{ width:42px; height:42px; border-radius:50% !important; display:grid; place-items:center; flex:none; cursor:pointer; padding:0;
  background:var(--m-glass); color:var(--m-ink); border:1px solid var(--m-line-2); position:relative; z-index:1;
  transition:background .15s, color .15s, transform .1s var(--m-ease); }
.tbtn:hover{ background:var(--m-ink); color:var(--m-on-ink); }
.tbtn:active{ transform:scale(.95); }
.tbtn svg{ width:18px; height:18px; }
.tbtn .i-sonne,.tbtn[aria-pressed="true"] .i-mond{ display:none; }
.tbtn[aria-pressed="true"] .i-sonne{ display:block; }   /* Symbol = Modus, zu dem man wechselt */
.sy-topbar .sy-who{ display:flex; align-items:center; gap:8px; padding:4px 6px 4px 4px; text-align:left; z-index:1;
  background:var(--m-glass); border:1px solid var(--m-line-2); box-shadow:none; border-radius:var(--m-r-pill) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--m-ink); font-family:var(--m-font); }
.sy-who .av{ width:34px; height:34px; border-radius:50% !important; display:inline-grid; place-items:center; flex:none; font-size:12px; font-weight:700;
  background:hsl(var(--h,40) 45% 82%); color:#1a1a1a; }
.sy-topbar .sy-who #whoName,.sy-topbar .sy-who b{ color:var(--m-ink); font-weight:700; font-size:13px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:641px){ .sy-topbar .sy-who #whoName{ max-width:none; overflow:visible; text-overflow:clip; } }   /* Web: Name nie kürzen (wie ARMA/PENSUM); Handy: nur Kreis */
.sy-topbar .sy-who-sub{ font-size:0; }
.sy-topbar .sy-who,.sy-topbar .sy-who #whoName,.sy-topbar .sy-who-sub,.sy-topbar .sy-who-sub .sy-link{ letter-spacing:0; text-transform:none; font-family:var(--m-font); }   /* Maße wie ARMA/PENSUM: kein Versal-Abstand aus dem Kit (.12/.16em) */
.sy-topbar .sy-who-sub #whoRole{ display:none; }          /* Rolle steht im Tooltip des Kreises */
.sy-topbar .sy-who-sub .sy-link,.sy-topbar .sy-link{ display:inline-block; font-size:12.5px; font-weight:600; color:var(--m-muted); text-decoration:none;
  padding:6px 8px; border-radius:var(--m-r-pill); cursor:pointer; }
.sy-topbar .sy-who-sub .sy-link:hover{ color:var(--m-ink); background:var(--m-well); text-decoration:none; }
.sy-topbar .sy-spacer{ flex:1; }
.sy-topbar{ align-items:center; }

@media (max-width:640px){   /* Handy-Kopf: Logo-Kachel 36 px, Zeile 1 19 px, Zeile 2 11,5 px, rechts nur Initialen-Kreis + Abmelden */
  .sy-topbar{ padding:12px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); }
  .sy-topbar .sy-title{ font-size:19px; letter-spacing:-.02em !important; }
  .sy-topbar .sy-slogan{ font-size:11.5px; letter-spacing:0; }
  .sy-topbar .sy-who{ margin-left:auto; }
  .sy-topbar .sy-who #whoName,.sy-topbar .tbtn{ display:none; }
}

/* ---------- Geteilte Skripte: „Zur Startseite“ (sentynel_back.js), BETA-Band (beta.js), SIGNUM ---------- */
html #sentynel-back{ border-radius:var(--m-r-pill) !important; font-family:var(--m-font); }   /* „html“ erhöht die Spezifität gegenüber dem Stil, den sentynel_back.js einfügt */
#sentynel-back .sb-pfeil,#signum-btn{ border-radius:50% !important; }
#sy-beta{ top:auto !important; bottom:calc(22px + env(safe-area-inset-bottom)) !important; border-radius:6px !important; }   /* BETA-Band: unten mittig, 22 px, Ecke 6 px (Vorlage PENSUM) */

/* ---------- „? Version“: gelber Kreis statt Symbol ---------- */
.ver-q{ width:18px; height:18px; flex:0 0 18px; display:grid; place-items:center; border-radius:50% !important; background:var(--m-yellow); color:#1a1a1a; font-size:11px; font-weight:700; }

/* ---------- Sidebar-Zeilen: eine Quelle für ARMA/PENSUM (.navlink, .grouplabel) und SOLARIS (.dnav-item, .drawer-kicker) ---------- */
.navlink{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; width:calc(100% - 20px); margin:2px 10px; padding:10px 14px; border:0; border-left:0;
  border-radius:14px !important; background:transparent; font-family:var(--m-font); font-size:14px; font-weight:600; line-height:1.45; letter-spacing:0; text-transform:none; text-align:left;
  transition:background .15s, color .15s, transform .1s var(--m-ease); }
.navlink[hidden]{ display:none; }
.navlink svg{ width:18px; height:18px; flex:0 0 18px; opacity:.8; transition:color .15s, opacity .15s; }
.dnav-n{ border-left:0; min-width:20px; padding:1px 7px; text-align:center; border-radius:var(--m-r-pill) !important; font-size:11px; font-weight:700; line-height:1.45; }
.dnav-n:empty{ display:none; }
.side-sec{ padding:10px 0 6px; }
.side-admin .grouplabel{ padding-top:10px; }
.side-foot .navlink{ justify-content:flex-start; }
.side-foot .navlink svg{ opacity:.85; }
.navlink:active{ transform:scale(.98); }
.navlink.active svg{ opacity:1; color:var(--m-yellow); }
.navlink .dnav-n{ margin-left:auto; }
.grouplabel{ font-family:var(--m-font); font-size:11px; font-weight:700; letter-spacing:.08em; color:#8e918c; padding:16px 22px 6px; }
@media (min-width:901px){
  .drawer-l .drawer-kicker{ display:block; font-family:var(--m-font); font-size:11px; font-weight:700; letter-spacing:.08em !important; color:#8e918c; padding:16px 22px 6px; }
  .navlink,.drawer-l .dnav-item{ color:#d6d4cf; }
  .drawer-l .dnav-item{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; line-height:1.45; width:calc(100% - 20px); margin:2px 10px; padding:10px 14px;
    border:0; background:transparent; cursor:pointer; text-align:left; border-radius:14px !important; font-family:var(--m-font); font-size:14px; font-weight:600;
    transition:background .15s, color .15s, transform .1s var(--m-ease); }
  .navlink:hover,.drawer-l .dnav-item:hover{ background:#ffffff14; color:#fff; }
  .drawer-l .dnav-item:active{ transform:scale(.98); }
  .navlink.active,.drawer-l .dnav-item.active{ background:#ffffff1f; color:#fff; }
  .navlink.active::before,.drawer-l .dnav-item.active::before{ content:""; position:absolute; left:-4px; top:50%; width:4px; height:18px; margin-top:-9px; border-radius:0 4px 4px 0 !important; background:var(--m-yellow); }
  .navlink .dnav-n,.drawer-l .dnav-n{ background:#ffffff1a; color:#d6d4cf; }
  .navlink.active .dnav-n,.drawer-l .dnav-item.active .dnav-n{ background:var(--m-yellow); color:#1a1a1a; }
}