/* Leinen – helles Grau, weiße Karten, weiche Schatten. Aktiv = graue Pille. */

html[data-design="leinen"]{
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-titel:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --titel-gewicht:700; --titel-spacing:-.035em;
  --r-s:10px; --r:14px; --r-l:20px; --r-xl:24px;
  --rahmen:1px;
  --leiste-b:252px; --kopf-h:64px;
}

html[data-design="leinen"][data-modus="hell"]{
  --grund:#F4F6F8; --flaeche:#FFFFFF; --flaeche-2:#F0F2F5; --flaeche-3:#E6E9EE;
  --leiste:#EEF0F3; --leiste-text:#5C6570; --kopf:rgba(244,246,248,.78);
  --linie:#E6E9EE; --linie-2:#D8DCE3;
  --text:#111827; --text-2:#5C6570; --text-3:#8B939E;
  --akzent:#111827; --akzent-2:#000000; --akzent-sanft:#EEF0F3; --auf-akzent:#FFFFFF;
  --leiste-aktiv:#E4E7EC; --leiste-aktiv-text:#111827; --leiste-hover:#E8EAEE;

  --gruen:#17B26A;  --gruen-sanft:#E8F8EF;
  --blau:#3B82F6;   --blau-sanft:#E8F1FE;
  --bernstein:#D97706; --bernstein-sanft:#FEF3E2;
  --rot:#E11D48;    --rot-sanft:#FDE8EE;
  --rosa:#DB2777;   --rosa-sanft:#FCE7F1;
  --violett:#7C3AED;--violett-sanft:#F1E9FE;
  --tuerkis:#0D9488;--tuerkis-sanft:#E0F5F3;
  --grau:#6B7280;   --grau-sanft:#F1F3F5;

  --schatten-1:0 8px 28px -16px rgba(16,24,40,.12);
  --schatten-2:0 14px 40px -18px rgba(16,24,40,.14);
  --schatten-3:0 24px 56px -24px rgba(16,24,40,.18);
}

html[data-design="leinen"][data-modus="dunkel"]{
  --grund:#10141A; --flaeche:#181D26; --flaeche-2:#1F2530; --flaeche-3:#2A3140;
  --leiste:#161B24; --leiste-text:#9AA3B0; --kopf:rgba(16,20,26,.82);
  --linie:#2A3140; --linie-2:#3A4254;
  --text:#F3F5F8; --text-2:#B4BCC8; --text-3:#8B95A3;
  --akzent:#F3F5F8; --akzent-2:#FFFFFF; --akzent-sanft:#1F2530; --auf-akzent:#10141A;
  --leiste-aktiv:#242B38; --leiste-aktiv-text:#F3F5F8; --leiste-hover:#1C2230;

  --gruen:#34D399;  --gruen-sanft:#14301C;
  --blau:#60A5FA;   --blau-sanft:#1A2744;
  --bernstein:#FBBF24; --bernstein-sanft:#2E2410;
  --rot:#FB7185;    --rot-sanft:#3A1520;
  --rosa:#F472B6;   --rosa-sanft:#3A1729;
  --violett:#C4B5FD;--violett-sanft:#241C3A;
  --tuerkis:#2DD4BF;--tuerkis-sanft:#12302C;
  --grau:#9AA3B2;   --grau-sanft:#1E2430;

  --schatten-1:0 8px 28px -16px rgba(0,0,0,.45);
  --schatten-2:0 14px 40px -18px rgba(0,0,0,.5);
  --schatten-3:0 24px 56px -24px rgba(0,0,0,.6);
}

html[data-design="leinen"] .ob-leiste{
  background:var(--leiste);
  border-right:0;
}
html[data-design="leinen"] .ob-marke{padding:18px 18px 8px;height:auto;min-height:var(--kopf-h)}
html[data-design="leinen"] .ob-marke-text strong{
  font-size:17px;font-weight:700;letter-spacing:-.04em;color:var(--text);
}
html[data-design="leinen"] .ob-logo-bild{height:26px}
html[data-design="leinen"] .ob-menue{padding:6px 14px 14px}
html[data-design="leinen"] .ob-leiste-fuss{padding:8px 14px 18px;border-top:0}

html[data-design="leinen"] .ob-punkt{
  border-radius:12px;padding:9px 12px;font-size:14.5px;color:var(--leiste-text);
}
html[data-design="leinen"] .ob-punkt [data-lucide]{opacity:.55;stroke-width:1.7}
html[data-design="leinen"] .ob-punkt.ist-aktiv{
  background:var(--leiste-aktiv); color:var(--leiste-aktiv-text); font-weight:600;
}
html[data-design="leinen"] .ob-punkt.ist-aktiv [data-lucide]{opacity:.9;color:var(--text)}
html[data-design="leinen"] .ob-punkt-kind{font-size:13.5px;padding:8px 12px;color:var(--text-2)}
html[data-design="leinen"] .ob-hub-klappe{opacity:.4}

html[data-design="leinen"] .ob-karte,
html[data-design="leinen"] .ob-kennzahl,
html[data-design="leinen"] .ob-kachel,
html[data-design="leinen"] .ob-suchfeld-kasten,
html[data-design="leinen"] .ob-klappe,
html[data-design="leinen"] .ob-toast{
  border:0;
  border-radius:var(--r-l);
  box-shadow:var(--schatten-1);
}

html[data-design="leinen"] .ob-kopf{
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-design="leinen"] .ob-kopf-titel{font-size:18px}

html[data-design="leinen"] .ob-kachel.ob-kachel-app{
  background:var(--flaeche);
}

html[data-design="leinen"] .ob-knopf{border-radius:12px;border-color:var(--linie)}
html[data-design="leinen"] .ob-knopf-haupt{
  background:var(--text); border-color:var(--text); color:var(--flaeche);
}

html[data-design="leinen"] .dp-app,
html[data-design="leinen"] .pk-app,
html[data-design="leinen"] .gr-app,
html[data-design="leinen"] .fz-app,
html[data-design="leinen"] .ag-app{
  --dp-gold:var(--gruen); --dp-gold-sanft:var(--gruen-sanft);
  --pk-gold:var(--gruen); --pk-gold-sanft:var(--gruen-sanft);
  --gr-gold:var(--gruen); --gr-gold-sanft:var(--gruen-sanft);
  --fz-gold:var(--gruen); --fz-gold-sanft:var(--gruen-sanft);
  --ag-gold:var(--gruen); --ag-gold-sanft:var(--gruen-sanft);
  border:0; box-shadow:var(--schatten-1); background:var(--flaeche);
}

html[data-design="leinen"] kbd{background:var(--flaeche-2);border-color:var(--linie)}
html[data-modus="dunkel"][data-design="leinen"] .ob-schalter-bahn::after{background:#F3F5F8}

/* Weicher Landschaftshimmel rechts oben, wie im Mockup */
html[data-design="leinen"][data-modus="hell"] .ob-schmuck i{display:block;opacity:.55}
html[data-design="leinen"][data-modus="hell"] .ob-schmuck i:nth-child(1){
  --schmuck-farbe:#B8C9D4;width:70vw;height:70vw;right:-18vw;top:-22vw}
html[data-design="leinen"][data-modus="hell"] .ob-schmuck i:nth-child(2){
  --schmuck-farbe:#C5D5C8;width:50vw;height:50vw;right:8vw;top:4vh}
html[data-design="leinen"][data-modus="hell"] .ob-schmuck i:nth-child(3){
  --schmuck-farbe:#D7E0E8;width:40vw;height:40vw;left:40vw;top:-8vw}
html[data-design="leinen"][data-modus="dunkel"] .ob-schmuck i{display:none}

html[data-design="leinen"] .hh-leiste{
  background:var(--leiste); border-right:0;
}
html[data-design="leinen"] .hh-marke{border-bottom:0}
html[data-design="leinen"] .hh-marke-text strong{color:var(--text)}
html[data-design="leinen"] .hh-punkt{color:var(--leiste-text);border-radius:12px}
html[data-design="leinen"] .hh-punkt.ist-aktiv{
  background:var(--leiste-aktiv); color:var(--leiste-aktiv-text); box-shadow:none;
}
html[data-design="leinen"] .hh-leiste-fuss{border-top:0}
html[data-design="leinen"] .hh-kopf{
  background:transparent; backdrop-filter:none; border-bottom:0;
}
html[data-design="leinen"] .hh-schmuck{display:none}
html[data-design="leinen"] .hh-logo{
  background:var(--text); box-shadow:none; color:var(--flaeche);
}

@media (hover:hover) and (pointer:fine){
  html[data-design="leinen"] .ob-punkt:hover{
    background:var(--leiste-hover); color:var(--text);
  }
  html[data-design="leinen"] .ob-hub-klappe:hover{
    background:var(--leiste-hover); opacity:1; color:var(--text);
  }
  html[data-design="leinen"] .ob-kachel:hover,
  html[data-design="leinen"] a.ob-kennzahl:hover{
    box-shadow:var(--schatten-2);
  }
}