/* =============================================================================
 *  EH-Platforms App-Bibliothek — Oberflaeche
 *  Dritte Fassung, 2026-09-10. Sie folgt der Referenzvorlage des Nutzers:
 *  ein Katalog in Navy mit blauem Leuchten, Kategorie-Kacheln als Einstieg,
 *  Vorschaubilder in einer Bahn mit Punkten, Favoritenstern auf der Karte.
 *
 *  WAS DIE VORIGEN FASSUNGEN FALSCH MACHTEN
 *   1. Lila-Verlaeufe, Milchglas, weiche Schatten ueberall — die Verbotsliste aus
 *      `eh-know gestaltung` fast vollstaendig. (Fassung 1)
 *   2. Danach eine graue Liste im Dashboard-Stil: sauber, aber ein Werkzeug und
 *      kein Katalog. Die Vorlage zeigt Bilder, Tiefe und Farbe. (Fassung 2)
 *
 *  ❗️DER ENTSCHEIDENDE UNTERSCHIED SIND DIE VORSCHAUBILDER. Ohne sie faellt
 *  dieses Design in sich zusammen, egal wie gut das CSS ist. Sie werden erzeugt
 *  (siehe `eh-know webapps`), nicht simuliert: ein Farbverlauf, der ein Bild
 *  vortaeuscht, ist genau der Fehler aus Fassung 1.
 *
 *  DREI REGELN
 *   1. BLAU IST DIE EINZIGE FARBE. Zustaende duerfen Gruen/Gelb tragen, sonst
 *      nichts. Bunt ist kein Ersatz fuer Hierarchie.
 *   2. LEUCHTEN STATT SCHLAGSCHATTEN. Auf dunklem Grund traegt ein Schein die
 *      Tiefe; ein weicher schwarzer Schatten verschwindet darin.
 *   3. ❗️JEDE var() BRAUCHT RUECKFALLWERT ODER DEFINITION IN :root.
 * ========================================================================== */

:root{
  --navy-0:  #050a16;
  --navy-1:  #070d1d;
  --navy-2:  #0b1428;
  --karte:   #0d1830;
  --karte-2: #112040;
  --linie:   rgba(96,141,255,.14);
  --linie-2: rgba(96,141,255,.28);
  --blau:    #2563eb;
  --blau-h:  #3b82f6;
  --blau-l:  #60a5fa;
  --blau-t:  #1e3a8a;
  --schein:  rgba(37,99,235,.38);
  --text:    #e9eefb;
  --text-2:  #93a6c9;
  --text-3:  #64789e;
  --gruen:   #34d399;
  --gelb:    #fbbf24;
  --violett: #a78bfa;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-s: 10px; --r: 14px; --r-l: 20px;
  --ease: .42s cubic-bezier(.22,1,.36,1);
  --ease-k: .22s cubic-bezier(.22,1,.36,1);
  --breite: 1240px;
  --tab-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--navy-0); color:var(--text);
  font:400 15px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100dvh;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
}
/* Der Grund der Vorlage: ein tiefes Navy mit einem breiten blauen Schimmer oben
   und einem zweiten, schwaecheren aus der linken Flanke. Er bewegt sich nicht. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 620px at 50% -180px, rgba(37,99,235,.22), transparent 68%),
    radial-gradient(760px 520px at -8% 16%,   rgba(30,58,138,.28), transparent 66%),
    linear-gradient(180deg, var(--navy-1), var(--navy-0) 62%);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(37,99,235,.4); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(96,141,255,.2); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(96,141,255,.36); }
*::-webkit-scrollbar-track{ background:transparent; }

.huelle{ max-width:var(--breite); margin:0 auto; padding:0 26px; }

/* ================================ KOPF ================================== */
.kopf{ padding:26px 0 4px; }
.kopf-reihe{ display:flex; align-items:center; gap:20px; }
.marke{ display:flex; align-items:center; gap:13px; min-width:0; }
.marke img{ width:34px; height:34px; border-radius:9px; object-fit:contain; }
.kopf-titel{ font-size:26px; font-weight:700; letter-spacing:-.028em; white-space:nowrap; }
.luecke{ flex:1; }

/* Suchfeld der Vorlage: flache Leiste, Lupe links, blaue Taste rechts. */
.suchfeld{
  display:flex; align-items:center; gap:10px; height:42px; padding:0 6px 0 14px;
  min-width:290px; background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--r-s); transition:border-color var(--ease-k), background var(--ease-k);
}
.suchfeld:focus-within{ border-color:var(--linie-2); background:var(--karte-2); }
.suchfeld > svg{ width:16px; height:16px; flex:none; color:var(--text-3); }
.suchfeld input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:var(--text);
  font:400 14px/1 var(--sans);
}
.suchfeld input::placeholder{ color:var(--text-3); }
.such-taste{
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  background:var(--blau); color:#fff; flex:none; transition:background var(--ease-k);
}
.such-taste:hover{ background:var(--blau-h); }
.such-taste svg{ width:15px; height:15px; }

/* ============================== KATEGORIEN ============================== */
/* In der Vorlage der Einstieg, direkt unter dem Titel: quadratische Kacheln mit
   Zeichen im blauen Feld, Name darunter, Anzahl klein. Sie sind Navigation, nicht
   Schmuck — deshalb stehen sie oben und nicht am Rand. */
.katbahn{
  display:flex; gap:12px; overflow-x:auto; padding:22px 26px 6px; margin:0 -26px;
  scroll-snap-type:x proximity; scroll-padding-left:26px;
  scrollbar-width:none;
}
.katbahn::-webkit-scrollbar{ display:none; }
.kat{
  flex:0 0 auto; width:104px; padding:15px 10px 13px; scroll-snap-align:start;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r);
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  transition:transform var(--ease), border-color var(--ease-k), background var(--ease-k);
}
.kat:hover{ transform:translateY(-3px); border-color:var(--linie-2); background:var(--karte-2); }
.kat:active{ transform:translateY(-1px); }
.kat-feld{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(37,99,235,.16); border:1px solid rgba(96,141,255,.22);
  color:var(--blau-l); transition:background var(--ease-k), color var(--ease-k), box-shadow var(--ease-k);
}
.kat-feld svg{ width:19px; height:19px; }
.kat.an .kat-feld{ background:var(--blau); color:#fff; border-color:transparent; box-shadow:0 0 20px -4px var(--schein); }
.kat-name{ font-size:12px; font-weight:600; line-height:1.3; color:var(--text-2); }
.kat.an .kat-name{ color:var(--text); }
.kat-zahl{ font-family:var(--mono); font-size:10.5px; color:var(--text-3); }

/* =============================== SEKTION ================================ */
.sektion{ margin-top:30px; }
.sektion-kopf{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sektion-titel{ font-size:17px; font-weight:700; letter-spacing:-.018em; }
.sektion-zahl{ font-family:var(--mono); font-size:11.5px; color:var(--text-3); }
.sektion-mehr{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--blau-l); transition:gap var(--ease-k);
}
.sektion-mehr:hover{ gap:10px; }
.sektion-mehr svg{ width:14px; height:14px; }

/* ================================ KARTE ================================= */
/* Die Karte der Vorlage: Bild oben mit 16:10, darunter Name und eine Zeile
   Nebenangabe. Der Stern liegt IM Bild, oben rechts. */
.bahn{
  display:flex; gap:16px; overflow-x:auto; padding:2px 26px 16px; margin:0 -26px;
  scroll-snap-type:x mandatory; scroll-padding-left:26px; scrollbar-width:none;
}
.bahn::-webkit-scrollbar{ display:none; }
.bahn .karte{ flex:0 0 268px; scroll-snap-align:start; }

.raster{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); }

.karte{
  position:relative; text-align:left; width:100%; border-radius:var(--r);
  background:var(--karte); border:1px solid var(--linie); overflow:hidden;
  transition:transform var(--ease), border-color var(--ease-k), box-shadow var(--ease);
}
.karte:hover{
  transform:translateY(-4px); border-color:var(--linie-2);
  /* Regel 2: Schein statt Schatten. */
  box-shadow:0 0 0 1px rgba(96,141,255,.16), 0 18px 44px -22px var(--schein);
}
.karte:active{ transform:translateY(-1px); }
/* ❗️DER KERN DER VORLAGE, erst beim dritten Hinsehen verstanden: die Vorschauen
   sind KEINE flaechenfuellenden Screenshots. Sie sind kleine Bildschirme, die auf
   dem blauen Grund der Karte sitzen und unten angeschnitten sind. Genau deshalb
   wirkt dort alles einheitlich blau — der Farbeindruck kommt vom Katalog, nicht
   vom Inhalt der App.
   Das loest nebenbei ein Problem, an dem zwei Anlaeufe gescheitert sind: Expyris
   hat eine warmgelbe Oberflaeche. Flaechenfuellend beisst sie im blauen Katalog,
   egal wie stark man sie entsaettigt — und sie ganz grau zu rechnen waere gelogen.
   Als kleiner Bildschirm auf blauem Grund ist sie ein Detail statt der Hauptfarbe. */
.karte-bild{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  /* Der Rand ist kein Rest, sondern das Motiv: er traegt die blaue Grundfarbe und
     macht aus dem Screenshot einen Bildschirm im Katalog. Zu schmal, und die App
     bestimmt wieder den Farbeindruck der ganzen Karte. */
  padding:26px 34px 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(59,130,246,.24), transparent 62%),
    linear-gradient(158deg, #16255c 0%, #0e1a3d 46%, #0a1330 100%);
}
.karte-bild img{
  width:100%; max-height:100%; object-fit:cover; object-position:top center;
  border:1px solid rgba(150,185,255,.22); border-bottom:0;
  border-radius:7px 7px 0 0;
  box-shadow:0 -1px 0 rgba(255,255,255,.07), 0 -14px 40px -14px rgba(0,0,0,.85);
  transition:transform .55s var(--ease);
}
.karte:hover .karte-bild img{ transform:translateY(-5px); }
/* Ohne Bild: das App-Zeichen gross und mittig auf demselben Grund. */
.karte-zeichen{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:46px; font-weight:700; letter-spacing:-.04em;
  color:var(--app-schrift,var(--blau-l));
}
.karte-bild::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(5,10,22,.3) 0%, transparent 26%, rgba(5,10,22,.5) 100%);
}
.stern{
  position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(5,10,22,.55); color:var(--text-2);
  transition:background var(--ease-k), color var(--ease-k), transform var(--ease-k);
}
.stern:hover{ background:rgba(5,10,22,.78); color:var(--text); transform:scale(1.08); }
.stern.an{ color:var(--blau-l); }
.stern.an svg{ fill:currentColor; }
.stern svg{ width:15px; height:15px; }
.karte-marke{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.04em;
  padding:3px 7px; border-radius:5px; background:rgba(5,10,22,.66);
  border:1px solid currentColor; line-height:1.3;
}
.m-live{ color:var(--gruen); } .m-beta{ color:var(--gelb); }
.m-soon{ color:var(--violett); } .m-dev{ color:var(--text-2); }
.karte-fuss{ padding:12px 14px 14px; }
.karte-name{
  display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600;
  letter-spacing:-.012em; margin-bottom:3px;
}
.karte-neben{
  font-family:var(--mono); font-size:11px; color:var(--text-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.schloss{ display:inline-flex; color:var(--text-3); }
.schloss svg{ width:12px; height:12px; }

.punkte{ display:flex; justify-content:center; gap:6px; margin-top:-6px; }
.punkt{
  width:6px; height:6px; border-radius:99px; background:rgba(96,141,255,.25);
  transition:width var(--ease), background var(--ease-k);
}
.punkt.an{ width:24px; background:var(--blau-h); }

/* ================================ KNOPF ================================= */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--r-s);
  font-size:14px; font-weight:600; white-space:nowrap;
  background:var(--blau); color:#fff;
  box-shadow:0 0 22px -8px var(--schein);
  transition:background var(--ease-k), transform var(--ease-k), box-shadow var(--ease-k);
}
.knopf:hover{ background:var(--blau-h); box-shadow:0 0 30px -6px var(--schein); }
.knopf:active{ transform:translateY(1px); }
.knopf svg{ width:15px; height:15px; }
.knopf.still{ background:var(--karte-2); color:var(--text); box-shadow:none; border:1px solid var(--linie); }
.knopf.still:hover{ background:#16294f; border-color:var(--linie-2); }

/* ============================== TABLEISTE =============================== */
.tableiste{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex; background:rgba(7,13,29,.94); border-top:1px solid var(--linie);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--text-3); transition:color var(--ease-k);
  -webkit-tap-highlight-color:transparent;
}
.tab svg{ width:21px; height:21px; transition:transform var(--ease); }
.tab-wort{ font-size:10.5px; font-weight:500; }
.tab.an{ color:var(--blau-l); }
.tab.an svg{ transform:translateY(-1px); }

/* =============================== FENSTER ================================ */
.schleier{
  position:fixed; inset:0; z-index:60; background:rgba(3,6,14,.8);
  opacity:0; pointer-events:none; transition:opacity var(--ease-k);
}
.schleier.an{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; z-index:61; left:0; right:0; bottom:0;
  max-height:90dvh; display:flex; flex-direction:column;
  background:var(--navy-2); border-top:1px solid var(--linie-2);
  border-radius:var(--r-l) var(--r-l) 0 0;
  transform:translateY(100%); transition:transform var(--ease);
  /* ❗️PFLICHT. Ohne diese Zeile lag das unsichtbare Fenster auf dem Rechner
     mitten im Bild und fing jeden Klick darunter ab — die Ursache fuer „viele
     Knoepfe gehen nicht". Unsichtbar heisst nicht unberuehrbar. */
  pointer-events:none; visibility:hidden;
}
.sheet.an{ transform:translateY(0); pointer-events:auto; visibility:visible; }
.sheet-griff{ width:36px; height:4px; border-radius:99px; background:var(--linie-2); margin:10px auto 0; flex:none; }
.sheet-bild{ position:relative; aspect-ratio:16/9; overflow:hidden; flex:none; background:var(--blau-t); }
.sheet-bild img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:none;
}
.sheet-bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--navy-2) 98%);
}
.sheet-kopf{ display:flex; align-items:center; gap:14px; padding:0 22px 14px; margin-top:-26px; position:relative; z-index:2; }
.sheet-zeichen{
  width:56px; height:56px; border-radius:var(--r); flex:none; display:grid; place-items:center;
  background:var(--karte); border:1px solid var(--linie-2); overflow:hidden;
  font-size:23px; font-weight:700; color:var(--app-schrift,var(--blau-l));
}
.sheet-zeichen img{ width:100%; height:100%; object-fit:cover; }
.sheet-name{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.sheet-kat{ font-family:var(--mono); font-size:11px; color:var(--text-3); margin-top:3px; }
.sheet-zu{
  position:absolute; top:12px; right:14px; z-index:3; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(5,10,22,.6); color:var(--text-2);
}
.sheet-zu:hover{ background:rgba(5,10,22,.85); color:var(--text); }
.sheet-zu svg{ width:14px; height:14px; }
/* ❗️min-height:0: ohne sie schrumpft ein flex-Kind nicht unter seinen Inhalt,
   overflow-y bleibt wirkungslos und der Text laesst sich nicht scrollen. */
.sheet-koerper{ flex:1; min-height:0; overflow-y:auto; padding:4px 22px 26px; }
.sheet-marken{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.marke-n{
  font-family:var(--mono); font-size:10.5px; color:var(--text-3);
  padding:4px 9px; border:1px solid var(--linie); border-radius:6px;
  display:inline-flex; align-items:center; gap:5px;
}
.marke-n svg{ width:11px; height:11px; }
.marke-z{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em;
  padding:4px 9px; border:1px solid currentColor; border-radius:6px;
}
.sheet-text{ color:var(--text-2); font-size:14px; line-height:1.68; margin:0 0 20px; }
.sheet-liste{ margin:22px 0 0; border-top:1px solid var(--linie); }
.sheet-zeile{
  display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--linie); font-size:13px;
}
.sheet-zeile dt{ color:var(--text-3); font-family:var(--mono); font-size:11.5px; }
.sheet-zeile dd{ margin:0; color:var(--text-2); text-align:right; }

/* ============================== ZUSTAENDE =============================== */
.leer{ text-align:center; padding:60px 20px; }
.leer-zeichen{
  width:54px; height:54px; border-radius:15px; margin:0 auto 14px;
  display:grid; place-items:center; background:rgba(37,99,235,.12);
  border:1px solid var(--linie); color:var(--text-3);
}
.leer-zeichen svg{ width:24px; height:24px; }
.leer-titel{ font-size:15px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.leer-text{ font-size:13px; color:var(--text-3); max-width:38ch; margin:0 auto; }
.fuss{
  margin-top:44px; padding:20px 0 30px; border-top:1px solid var(--linie);
  font-family:var(--mono); font-size:11.5px; color:var(--text-3);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.fuss a:hover{ color:var(--text-2); }

.rein{ opacity:0; transform:translateY(9px); }
.rein.da{
  opacity:1; transform:none;
  transition:opacity .4s ease calc(var(--i,0) * 34ms), transform .46s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 34ms);
}

/* ============================== RECHNER ================================= */
@media (min-width:900px){
  body{ padding-bottom:0; }
  /* Auf dem Rechner wandert die Navigation nach oben neben den Titel. Die untere
     Leiste ist eine Handy-Geste; auf einem Schirm gehoert sie nicht hin. */
  .tableiste{
    position:static; height:auto; padding:0; background:none; border:0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    gap:4px; margin-top:18px;
  }
  .tab{
    flex:0 0 auto; flex-direction:row; gap:9px; height:38px; padding:0 16px;
    border-radius:var(--r-s); border:1px solid transparent;
    transition:background var(--ease-k), color var(--ease-k), border-color var(--ease-k);
  }
  .tab:hover{ background:var(--karte); color:var(--text-2); }
  .tab.an{ background:rgba(37,99,235,.16); border-color:rgba(96,141,255,.3); color:var(--text); }
  .tab.an svg{ transform:none; }
  .tab svg{ width:17px; height:17px; }
  .tab-wort{ font-size:13.5px; font-weight:500; }
  .bahn .karte{ flex-basis:292px; }
  .sheet{
    left:50%; right:auto; top:50%; bottom:auto; width:min(580px,92vw);
    max-height:88dvh; border-radius:var(--r-l); border:1px solid var(--linie-2);
    transform:translate(-50%,-48%); opacity:0;
    transition:transform var(--ease), opacity var(--ease-k);
  }
  .sheet.an{ transform:translate(-50%,-50%); opacity:1; }
  .sheet-griff{ display:none; }
}
@media (max-width:899px){
  .karte-bild{ padding:18px 22px 0; }
  .huelle{ padding:0 18px; }
  .katbahn,.bahn{ padding-left:18px; padding-right:18px; margin:0 -18px; scroll-padding-left:18px; }
  .kopf{ padding:20px 0 0; }
  .kopf-titel{ font-size:22px; }
  .kopf-reihe{ flex-wrap:wrap; }
  .suchfeld{ min-width:0; width:100%; order:3; }
  .raster{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .bahn .karte{ flex-basis:min(78vw,270px); }
  .kat{ width:92px; padding:13px 8px 11px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rein{ opacity:1; transform:none; }
}