/* ============================================================================
   our.Solutions — Design-System V3  ·  "Ruhe & Übersicht, in Josala"
   Vertrags-File — importieren statt nachbauen:
     <link rel="stylesheet" href="/shared/oS-v3-tokens.css">
   Voraussetzung: der Ordner  /shared/fonts/  liegt neben dieser Datei
   (Josala-*.woff2 / .woff).

   Version : 3.0  ·  Stand: 10.08.2026  ·  Pflege: Uma (UX/UI)
   Basis   : V2 "Ruhe & Übersicht" (28.07.2026) — 1:1 übernommen.
   NEU ggü. V2:
     · Hausschrift Josala eingebunden (5 Schnitte, self-hosted WOFF2/WOFF)
     · Typo-Token --font führt jetzt Josala, --font-brand für Display/Headline
     · System-Schrift bleibt als Fallback (trägt Glyphen, die Josala fehlen)

   Tanzbereich: deutschsprachiger Raum (DE + AT). Josalas Zeichensatz deckt
   das ab — EINE bekannte Lücke: großes Eszett  ẞ  (U+1E9E) fehlt. Bei
   VERSALSATZ ("STRASSE"/"GROSS") greift dort automatisch der Fallback.
   Solange das Eszett nicht nachgeliefert ist: für reine Versal-Headlines
   ss statt ẞ, oder Fallback bewusst in Kauf nehmen.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · HAUSSCHRIFT  ·  Josala (self-hosted)
   Weight-Mapping:  Book 400 · Medium 500 · Bold 700 · Black 900
   Kursiv nur in Book (400 italic) — es gibt KEIN Bold/Black-Kursiv;
   für kursiv+fett faket der Browser die Neigung (bewusst so, bis Schnitte da).
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"Josala"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Josala-Book.woff2") format("woff2"),
      url("fonts/Josala-Book.woff")  format("woff");
}
@font-face{
  font-family:"Josala"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/Josala-BookItalic.woff2") format("woff2"),
      url("fonts/Josala-BookItalic.woff")  format("woff");
}
@font-face{
  font-family:"Josala"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/Josala-Medium.woff2") format("woff2"),
      url("fonts/Josala-Medium.woff")  format("woff");
}
@font-face{
  font-family:"Josala"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/Josala-Bold.woff2") format("woff2"),
      url("fonts/Josala-Bold.woff")  format("woff");
}
@font-face{
  font-family:"Josala"; font-style:normal; font-weight:900; font-display:swap;
  src:url("fonts/Josala-Black.woff2") format("woff2"),
      url("fonts/Josala-Black.woff")  format("woff");
}

/* ---------------------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* --- Farbe: Grundflächen --- */
  --bg:        #f4f6f9;   /* App-Hintergrund, kühl-hell         */
  --card:      #ffffff;   /* Karten / erhöhte Flächen           */
  --line:      #ccd4df;   /* Rahmen, aktive Trennlinien         */
  --line-soft: #e5e9ef;   /* leise Trennung innerhalb Flächen   */

  /* --- Farbe: Text --- */
  --ink:       #2b2f36;   /* Fließtext (nie reines Schwarz)     */
  --muted:     #6b7685;   /* Sekundärtext, Labels, Metazeilen   */

  /* --- Farbe: EIN Akzent (Blau) --- */
  --blau:      #1d4f91;   /* Primär-Akzent: Links, aktiv, CTA   */
  --blau-dark: #143a6b;   /* Überschriften, Hover auf Akzent    */
  --blau-soft: #eaf1f9;   /* Akzent-Fläche: aktiver Nav, Pills  */

  /* --- Farbe: Status (nur funktional, nie Deko) --- */
  --green:      #1ea672;  --green-soft: #e3f7ee;
  --amber:      #ef9f27;
  --red:        #d64541;

  /* --- Farbe: Aktiv-Marker (das einzige Gelb) --- */
  --gelb:      #ffd000;   /* NUR der 3px-Marker am aktiven Nav  */

  /* --- Code-Flächen --- */
  --code:      #eef1f5;
  --pre:       #f0f2f6;

  /* --- Radius --- */
  --radius:    14px;      /* Karten, Panels, Dialoge            */
  --radius-sm: 10px;      /* Buttons, Nav-Items, Inputs         */
  --radius-pill: 999px;   /* Chips, Filter, Badges, Avatare     */

  /* --- Schatten (weich, zweilagig — trägt die Flächentrennung) --- */
  --shadow:    0 1px 3px rgba(16,21,29,.04), 0 8px 24px rgba(16,21,29,.05);

  /* --- Typografie  (V3) -----------------------------------------------------
     --font-sys : reiner System-Stack — Fallback + Notausgang.
     --font      : Body/UI. Josala führt, System trägt fehlende Glyphen (ẞ …).
     --font-brand: Display/Headline/Marke — bewusst Josala, gleicher Fallback.

     >>> Josala im Body zu schwer/dicht? EINE Zeile: --font auf var(--font-sys).
  --------------------------------------------------------------------------- */
  --font-sys:   "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font:       "Josala", var(--font-sys);
  --font-brand: "Josala", var(--font-sys);
  --fs-base: 14px;        /* Body                               */
  --lh-base: 1.5;
  --lh-read: 1.62;        /* Lesetext / Markdown                */

  /* --- Abstands-Skala (4er-Raster) --- */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px;
  --sp-5: 12px; --sp-6: 14px; --sp-7: 16px; --sp-8: 18px;
  --sp-10: 24px; --sp-12: 28px;

  /* --- Struktur-Maße --- */
  --topbar-h: 52px;
  --side-w:   236px;
  --touch:    44px;       /* Mindest-Tap-Ziel, sobald mobil     */

  /* --- Bewegung --- */
  --t-fast: .12s ease;
  --t-base: .18s ease;
}

/* --- Dark Mode: gleiche Token-Namen, invertierte Werte --------------------- */
:root[data-theme="dark"]{
  --bg:#0f141a; --card:#171e27; --ink:#e6eaef; --muted:#9aa6b2;
  --line:#2f3a46; --line-soft:#232c35;
  --blau:#4f86d6; --blau-dark:#a9c6ef; --blau-soft:#1a2740;
  --green:#3ecb93; --green-soft:#13332a; --amber:#f0b45a; --red:#e0706b;
  --gelb:#ffd94d; --code:#1e2732; --pre:#1b232d;
  --shadow:0 1px 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------------------
   2 · RESET / BASIS
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--blau); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blau); outline-offset:2px; border-radius:4px}
::selection{background:var(--blau-soft)}

/* ---------------------------------------------------------------------------
   3 · APP-SHELL   (Topbar + Sidebar + Content)
   --------------------------------------------------------------------------- */
.app{display:flex; flex-direction:column; height:100%}

/* Topbar — weiß, nur eine leise Unterkante */
.top{
  height:var(--topbar-h); flex:none;
  display:flex; align-items:center; gap:var(--sp-5); padding:0 var(--sp-8);
  background:var(--card); border-bottom:1px solid var(--line-soft);
}
.mark{                       /* quadratisches oS-Badge — Marke: Josala Black */
  width:28px; height:28px; border-radius:8px;
  background:var(--blau); color:#fff;
  font-family:var(--font-brand); font-weight:900; font-size:13px;
  display:grid; place-items:center; flex:none;
}
.wm{font-family:var(--font-brand); font-weight:700; font-size:15px}
.crumb{color:var(--muted); font-size:13px}
.crumb b{color:var(--ink); font-weight:600}
.top-spacer{margin-left:auto}
.hello{color:var(--muted); font-size:13px}
.ava{                        /* runder Nutzer-Avatar */
  width:30px; height:30px; border-radius:50%;
  background:var(--blau-soft); color:var(--blau); font-weight:700; font-size:12px;
  display:grid; place-items:center; border:1px solid transparent; cursor:pointer;
}
.ava:hover{border-color:var(--blau)}

.shell{display:flex; flex:1; min-height:0}

/* Sidebar — weiß, randlos, gruppiert */
.side{
  width:var(--side-w); flex:none; overflow-y:auto;
  background:var(--card); border-right:1px solid var(--line-soft);
  padding:var(--sp-6) var(--sp-4);
}
.grp{margin-bottom:var(--sp-2)}
.grp-h{                      /* Gruppen-Überschrift: klein, laut in Versalien */
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  background:none; border:0; cursor:pointer; color:var(--muted);
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:9px 8px 5px;
}
.grp-h .chev{transition:transform var(--t-base); font-size:9px; opacity:.7}
.grp.collapsed .chev{transform:rotate(-90deg)}

/* Nav-Item */
.nav{
  display:flex; align-items:center; gap:var(--sp-4); width:100%;
  text-align:left; background:none; border:0; cursor:pointer;
  color:var(--ink); font-size:13.5px; font-family:inherit;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm); position:relative;
}
.nav:hover{background:var(--bg)}
.nav.on{background:var(--blau-soft); color:var(--blau); font-weight:600}
.nav.on::before{            /* der EINE gelbe Marker */
  content:""; position:absolute; left:-10px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--gelb);
}
.nav .ic{width:18px; text-align:center; font-size:15px; flex:none}
.nav .soon{                 /* "bald"-Hinweis */
  margin-left:auto; font-size:9px; color:var(--muted);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-pill); padding:0 6px;
}
.nav .nb{                   /* Zähler-Badge */
  margin-left:auto; min-width:20px; height:18px; padding:0 6px;
  border-radius:var(--radius-pill); background:var(--line); color:var(--ink);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}

/* Content-Seite */
.page{flex:1; min-height:0; padding:var(--sp-10) var(--sp-12); overflow:auto; display:flex; flex-direction:column}
.ph{display:flex; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-6); flex:none}
.h1{font-family:var(--font-brand); font-size:22px; font-weight:700; margin:0}
.sub{color:var(--muted); font-size:13px}

/* ---------------------------------------------------------------------------
   4 · FLÄCHEN   (Karte, Spalte, Panel)
   --------------------------------------------------------------------------- */
.card{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-pad{padding:var(--sp-8)}

/* Scrollende Spalte (z. B. Listen-/Vorschau-Layout) */
.col{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.col-head{padding:var(--sp-7) var(--sp-8) var(--sp-5); border-bottom:1px solid var(--line-soft); flex:none}
.col-body{flex:1; overflow-y:auto; padding:var(--sp-8)}
.col-foot{padding:var(--sp-5) var(--sp-8); border-top:1px solid var(--line-soft); flex:none}

/* ---------------------------------------------------------------------------
   5 · BUTTONS
   --------------------------------------------------------------------------- */
/* Standard: leise Outline auf Weiß */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:12.5px; font-weight:600; font-family:inherit; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:7px 13px; cursor:pointer; transition:background var(--t-fast), border-color var(--t-fast);
}
.btn:hover{background:var(--bg)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Primär: gefüllt blau — sparsam, ein CTA je Sicht */
.btn.primary{background:var(--blau); border-color:var(--blau); color:#fff}
.btn.primary:hover{background:var(--blau-dark); border-color:var(--blau-dark)}

/* Erfolg / erledigt */
.btn.done{color:#1a7a54; background:var(--green-soft); border-color:#bfe6d5}
.btn.done:hover{background:#d5f2e5}

/* Ghost: nur Text, kein Rahmen */
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--bg); color:var(--ink)}

/* Pill-Toolbar-Button (Topbar) */
.tbtn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:var(--radius-pill); padding:5px 12px; font-size:12.5px; cursor:pointer;
}
.tbtn:hover{border-color:var(--blau); color:var(--blau); background:var(--blau-soft)}

/* ---------------------------------------------------------------------------
   6 · CHIPS · FILTER · BADGES · STATUS
   --------------------------------------------------------------------------- */
/* Filter-Chip (an/aus) mit Farbpunkt */
.chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:12px; font-weight:600; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:5px 11px; cursor:pointer;
}
.chip.on{background:var(--blau-soft); border-color:var(--blau); color:var(--blau)}
.chip .dot{width:9px; height:9px; border-radius:50%}

/* Kontext-Pill (z. B. Kategorie eines Eintrags) */
.pill{
  display:inline-block; font-size:11px; font-weight:700;
  color:var(--blau); background:var(--blau-soft); border-radius:var(--radius-pill); padding:2px 10px;
}

/* Status-Punkt — die einzige Verwendung von Rot/Grün/Amber */
.dot-red   {background:var(--red)}
.dot-amber {background:var(--amber)}
.dot-green {background:var(--green)}
.dot-none  {background:var(--line)}

/* Kleines Overline-Label über Gruppen */
.overline{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* ---------------------------------------------------------------------------
   7 · LISTEN
   --------------------------------------------------------------------------- */
.list{display:flex; flex-direction:column; gap:2px}
.item{
  display:flex; gap:var(--sp-4); padding:var(--sp-4);
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
}
.item:hover{background:var(--bg)}
.item.sel{background:var(--blau-soft); border-color:var(--blau-soft)}
.item .prio{width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none}
.item .ti{
  font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.item .meta{font-size:11.5px; color:var(--muted); margin-top:3px}

/* ---------------------------------------------------------------------------
   8 · FORMULARE / EINGABE
   --------------------------------------------------------------------------- */
label{font-size:12.5px; font-weight:600; color:var(--ink)}
input, textarea, select{
  width:100%; box-sizing:border-box;
  font-family:var(--font); font-size:14px; line-height:1.5; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--blau); box-shadow:0 0 0 3px var(--blau-soft)}
textarea{resize:vertical; line-height:var(--lh-read)}

/* Runde Suchzeile */
.search{
  display:flex; align-items:center; gap:var(--sp-3);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:7px 12px; background:var(--bg);
}
.search input{border:0; background:transparent; padding:0}
.search input:focus{box-shadow:none}

/* ---------------------------------------------------------------------------
   9 · LESETEXT / MARKDOWN-INHALT   (.md)
   --------------------------------------------------------------------------- */
.md{font-size:14px; line-height:var(--lh-read); color:var(--ink); word-break:break-word}
.md>*:first-child{margin-top:0}
.md p{margin:0 0 10px}
.md h1,.md h2,.md h3,.md h4{font-family:var(--font-brand); color:var(--blau-dark); font-weight:700; line-height:1.3; margin:15px 0 7px}
.md h1{font-size:18px} .md h2{font-size:16px} .md h3{font-size:14.5px}
.md h4{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.md a{color:var(--blau); text-decoration:underline; overflow-wrap:anywhere}
.md ul,.md ol{margin:0 0 10px; padding-left:22px} .md li{margin:3px 0}
.md blockquote{margin:0 0 10px; padding:6px 14px; border-left:3px solid var(--blau);
  background:var(--blau-soft); border-radius:0 8px 8px 0}
.md code{background:var(--code); border-radius:5px; padding:1px 6px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.md pre{background:var(--pre); border:1px solid var(--line-soft); border-radius:10px;
  padding:12px; overflow-x:auto; margin:0 0 10px}
.md pre code{background:none; padding:0}
.md hr{border:none; border-top:1px solid var(--line-soft); margin:14px 0}
.md table{border-collapse:collapse; width:100%; margin:0 0 12px; font-size:12.5px}
.md th,.md td{border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top}
.md th{background:var(--bg); font-weight:700; color:var(--blau-dark)}

/* ---------------------------------------------------------------------------
   10 · LEERZUSTAND
   --------------------------------------------------------------------------- */
.empty{
  color:var(--muted); font-size:14px; text-align:center; padding:30px;
  display:grid; place-items:center; height:100%;
}

/* ---------------------------------------------------------------------------
   11 · UTILITIES
   --------------------------------------------------------------------------- */
.muted{color:var(--muted)}
.brand{font-family:var(--font-brand)}   /* explizit Josala erzwingen           */
.black{font-weight:900}                 /* Josala Black — Display/Zahlen-Hero  */
.row{display:flex; align-items:center; gap:var(--sp-3)}
.col-stack{display:flex; flex-direction:column; gap:var(--sp-3)}
.spacer{margin-left:auto}
.hide{display:none !important}

/* ---------------------------------------------------------------------------
   12 · RESPONSIVE
   Handy-Hochformat liegt bei 360–430 CSS-px — immer bei ~360/~390 prüfen.
   --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .page{padding:var(--sp-8) var(--sp-7)}
  .grid-2{grid-template-columns:1fr}     /* zweispaltige Inhalte stapeln */
}
@media (max-width:860px){
  .side{                                  /* Sidebar → Off-canvas-Drawer */
    position:fixed; left:0; top:var(--topbar-h); bottom:0; z-index:40;
    transform:translateX(-100%); transition:transform var(--t-base);
    box-shadow:var(--shadow);
  }
  .side.open{transform:none}
  .hamburger{display:inline-grid}
}
@media (max-width:640px){
  .top{padding:0 var(--sp-6)}
  .page{padding:var(--sp-6)}
  /* Touch-Ziele vergrößern */
  .nav,.btn,.chip,.tbtn{min-height:var(--touch)}
  /* Datentabellen → Karten-Liste via [data-label] */
  .table-cards thead{display:none}
  .table-cards tr{display:block; margin-bottom:var(--sp-4);
    border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:var(--sp-4)}
  .table-cards td{display:flex; justify-content:space-between; gap:var(--sp-5); border:0; padding:4px 0}
  .table-cards td::before{content:attr(data-label); color:var(--muted); font-weight:600}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}