/* =======================================================================
   PortaSplit Scanner -- gemeinsame Design-Schicht.

   Reine Optik, keine Funktionsaenderung. Wird in JEDER Seite als LETZTES
   Stylesheet geladen und legt sich ueber die seiteneigenen Regeln.
   Alle Farben, Radien und Schatten liegen hier als Tokens an EINER
   Stelle -- wer eine Farbe aendern will, aendert sie hier und nirgends
   sonst.

   Warum eine eigene Datei und nicht in jeder Seite eingebettet: bei vier
   Seiten waeren die Tokens sonst viermal gepflegt. Genau das war der
   Grund, weshalb aus drei Eckenradien im Laufe der Monate sechzehn
   geworden sind.

   Die Schriftart: der Stapel nennt "Inter Tight" und "Inter" zuerst,
   laedt sie aber NICHT von Google nach. Wer die Schrift auf dem Geraet
   hat, sieht sie; alle anderen bekommen die Systemschrift (auf iPhone
   und Mac ist das San Francisco, das sehr aehnlich wirkt). Der Grund ist
   Absicht: eine Einbindung ueber fonts.googleapis.com wuerde bei jedem
   Seitenaufruf die IP jedes Nutzers an Google melden. Soll die Schrift
   verbindlich sein, gehoeren die woff2-Dateien neben diese Datei und
   werden hier per @font-face eingebunden.

   Stand: 7.8.2026
   ===================================================================== */
:root{
  --bg:#080d18; --bg-2:#0b1220;
  --flaeche:#0e1728; --flaeche-2:#121c31; --flaeche-3:#162138;
  --linie:#1c2942; --linie-2:#26344f;
  --text:#e8eefb; --text-2:#a5b3cc; --text-3:#6f7f9b;
  --gruen:#2fd47f; --gruen-tief:#0d7a4a; --gold:#f4bf4f; --blau:#4f8dff;
  --rot:#f87171;
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:24px;
  --schatten-1:0 1px 2px #0006, 0 1px 1px #00000040;
  --schatten-2:0 10px 30px -12px #000000b3, 0 2px 6px #00000059;
  --schatten-3:0 24px 60px -20px #000000cc, 0 4px 14px #0000006b;
  --ring:0 0 0 2px #080d18, 0 0 0 4px #4f8dff88;
  --fade:cubic-bezier(.22,.61,.36,1);
}
html{-webkit-text-size-adjust:100%}
body{background:
       radial-gradient(1100px 620px at 50% -260px,#14224088,transparent 70%),
       radial-gradient(900px 500px at 100% 0,#0f2a3d55,transparent 70%),
       var(--bg);
     background-attachment:fixed;
     color:var(--text);
     font-family:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     font-size:15px;line-height:1.55;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     font-feature-settings:"cv11","ss01";letter-spacing:-.006em}
.wrap{max-width:1040px;padding-left:20px;padding-right:20px}
@media(max-width:640px){.wrap{padding-left:13px;padding-right:13px}}

/* Ziffern gleicher Breite ueberall dort, wo sich Werte laufend aendern */
.zeit,.wann,.wegzeit,.meta,.messwert,.preis,.zahl,.spanne,.zt,.d,.num,.wert,
.laufinfo,.marken,.kachel .z,.skachel .z,.aufzeit,.ts,.vz
{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- Kopf */
header{background:color-mix(in oklab,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--linie);box-shadow:none}
h1{font-weight:700;letter-spacing:-.018em;color:var(--text)}
h1 .dot{box-shadow:0 0 0 3px #ffffff08}
h1 .dot.live{background:var(--gruen);box-shadow:0 0 14px #2fd47f99}
h1 .b{background:#3a2a06;color:var(--gold);border-radius:999px;
  letter-spacing:.12em;font-weight:700}
.meta,.sub,.hilfe{color:var(--text-3)}
.meta{font-size:11.5px}

/* ----------------------------------------------------------- Reiter
   EINE Optik fuer alle vier Reiterleisten des Systems:

     .reiter        Hauptseite   (Feed, Karte, Maerkte, Chat, Statistik)
     .kreiter       Konto        (Suche, Meldungen, Telegram, ...)
     #tipps .ttabs  Ratgeber
     nav            Verwaltung

   Vorher hatte jede ihre eigene Farbe -- Verwaltung und Ratgeber gold,
   Konto hellgrau, Hauptseite gruen. Ein Reiter sah je nach Seite anders
   aus, obwohl er dasselbe tut.

   Zwei Dinge sind hier wichtig und nicht offensichtlich:

   1. #tipps wird mitgenannt, weil die seiteneigene Regel dort eine ID
      benutzt (#tipps .ttabs button.an). Eine ID wiegt schwerer als jede
      Klasse -- ohne sie kaeme diese Schicht nicht dagegen an, und der
      Ratgeber haette als einziger weiter goldene Reiter.

   2. Der aktive Reiter traegt seine Bedeutung ueber die gruene
      Unterkante, NICHT ueber eine Flaeche. Eine Flaeche stand hier
      frueher -- zusammen mit dem allgemeinen Knopf-Aussehen sahen aktiv
      und inaktiv dadurch gleich aus, und man konnte nicht mehr erkennen,
      auf welchem Reiter man stand. */
.reiter button,.kreiter button,#tipps .ttabs button,nav a{
  appearance:none;background:transparent;border:0;
  border-bottom:2px solid transparent;
  padding:8px 12px 10px;font-size:13.5px;font-weight:600;
  font-family:inherit;line-height:1.2;white-space:nowrap;cursor:pointer;
  color:var(--text-3);text-decoration:none;
  border-radius:var(--r-s) var(--r-s) 0 0;
  transition:color .18s var(--fade),background .18s var(--fade)}
.reiter button:hover,.kreiter button:hover,
#tipps .ttabs button:hover,nav a:hover{
  color:var(--text);background:#ffffff0a}
.reiter button.an,.reiter button.aktiv,.kreiter button.an,
#tipps .ttabs button.an,nav a.aktiv{
  background:transparent;color:#fff;border-bottom-color:var(--gruen)}

@media(max-width:640px){
  .reiter button,.kreiter button,#tipps .ttabs button,nav a{
    padding:7px 10px 9px;font-size:12.5px}
}

/* -------------------------------------------------- Flaechen/Karten */
.kasten,.kachel,.skachel,.box,.feld,.innen,.muster,.feed,
.dblock,.zeile,.plzbox,.wegblock,.hinweis,.filter,.scrollbox,#adminkarte,
#nutzerfenster,#prot,#miniprot,#klartext,.zfeld,.netzk{
  background:linear-gradient(168deg,var(--flaeche-2),var(--flaeche));
  border:1px solid var(--linie);border-radius:var(--r-l);
  box-shadow:var(--schatten-1)}
.kachel,.skachel{transition:border-color .2s var(--fade),transform .2s var(--fade)}
.kachel:hover,.skachel:hover{border-color:var(--linie-2);transform:translateY(-1px)}
.kachel .z,.skachel .z{font-weight:800;letter-spacing:-.03em}
.kachel .l,.skachel .l,.lab{color:var(--text-3);font-size:11.5px;letter-spacing:.01em}
.skachel.gold .z,.kachel.gold .z,.gelb{color:var(--gold)}
.skachel.gruen .z,.kachel.gruen .z,.gruen{color:var(--gruen)}
.rot{color:var(--rot)}
.grau{color:var(--text-3)}
.blau{color:var(--blau)}
h2{font-size:11px;letter-spacing:.14em;color:var(--text-3);font-weight:700;
  text-transform:uppercase}

/* -------------------------------------------------- Zustand / Ampel */
.zustand{border-radius:var(--r-xl);box-shadow:var(--schatten-2);
  border-width:1px;border-style:solid}
.zustand.gut{background:linear-gradient(158deg,#0f3524,#0a2318);
  border-color:#1c6b45;color:#8bf0bb}
.zustand.warn{background:linear-gradient(158deg,#33260a,#201705);
  border-color:#7a5a12;color:#fbd98a}
.zustand.gefahr,.zustand.fehler{background:linear-gradient(158deg,#3a1414,#230c0c);
  border-color:#7f1d1d;color:#fca5a5}

/* ----------------------------------------------------- Treffer-Block */
#hit{border-radius:var(--r-xl);border:0;
  background:linear-gradient(158deg,#16a34a,#0a6b45 58%,#064e3b);
  box-shadow:var(--schatten-3),inset 0 1px 0 #ffffff26}
#hit .hd{padding:14px 18px;letter-spacing:-.01em;font-size:15px;
  background:#00000033;border-bottom:1px solid #ffffff1a}
#hit.nurweg{background:linear-gradient(168deg,var(--flaeche-2),var(--flaeche));
  border:1px solid var(--linie);box-shadow:var(--schatten-2)}
.card{padding:16px 18px;border-top:1px solid #ffffff1c;border-bottom:0;
  transition:background .2s var(--fade)}
.card:first-child{border-top:0}
.card:hover{background:#ffffff08}
.card .n{font-size:17.5px;font-weight:700;letter-spacing:-.02em}
.card.favorit{background:linear-gradient(160deg,#2e2208,#1a1305);
  border-left:3px solid var(--gold)}
.call{background:#fff;color:#064e3b;font-weight:800;
  border-radius:var(--r-m);letter-spacing:-.01em;
  box-shadow:0 8px 22px -12px #00000099;
  transition:transform .15s var(--fade),box-shadow .15s var(--fade)}
.call:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px #000000b3}
.call:active{transform:translateY(0)}
.pill,.badge,.ch,.ipchip,.b-alt,.b-aussen,.b-fav,.b-neu,.b-tot,.b-uralt,
.wegbadge,.admin,.gesperrt,.online,.art,.ztyp{border-radius:999px;
  letter-spacing:.04em}
.pill{background:#ffffff1f;padding:3px 10px}

/* ------------------------------------------------- Bedienelemente */
button,.btn{border-radius:var(--r-m);font-family:inherit;font-weight:600;
  transition:background .16s var(--fade),color .16s var(--fade),
             border-color .16s var(--fade),transform .12s var(--fade)}
/* Das Grundaussehen eines Knopfes -- bewusst in :where() gefasst.
   :where() zaehlt fuer die Spezifitaet NICHT mit, der Selektor wiegt
   also nur so viel wie ein blosses "button". Damit gewinnt jede Regel
   mit einer Klasse dagegen, und genau das ist gewollt: das hier ist die
   Grundlage, keine Uebersteuerung.

   Vorher stand hier button:not(.haupt):not(.call):not(.zu):not(.tonknopf.an).
   Diese Kette wog durch die vier :not() schwerer als .reiter button.an --
   mit der Folge, dass der aktive Reiter genauso aussah wie die uebrigen.
   Man konnte nicht mehr erkennen, auf welchem Reiter man stand. Derselbe
   Fehler traf die Sortierleiste. */
button:where(:not(.haupt):not(.call):not(.zu):not(.tonknopf.an)){
  background:var(--flaeche-3);border:1px solid var(--linie-2);color:var(--text-2)}
button:where(:not(.haupt):not(.call):not(.zu)):hover{
  background:#1d2b47;color:var(--text);border-color:#31425f}

/* Die Reiter stehen weiter oben, im Abschnitt "Reiter" -- sie sind
   keine Knoepfe im Sinne dieser Regeln, auch wenn sie welche sind. */
button:active{transform:translateY(1px)}
button.haupt,.btn.haupt{background:linear-gradient(180deg,#3b7bff,#1d4ed8);
  border:1px solid #2c5fd0;color:#fff;box-shadow:0 8px 20px -12px #2563eb}
button.haupt:hover,.btn.haupt:hover{background:linear-gradient(180deg,#4d88ff,#2258e0)}
button.gefahr,.btn.gefahr{background:linear-gradient(180deg,#e05252,#b91c1c);
  border-color:#b91c1c;color:#fff}
.tonknopf{border-radius:999px}
.tonknopf.an{background:linear-gradient(180deg,#12633f,#0d4c31);
  border:1px solid #1c6b45;color:#8bf0bb}
:where(button,a,input,select,textarea):focus-visible{outline:none;
  box-shadow:var(--ring)}
input,select,textarea{border-radius:var(--r-m);border:1px solid var(--linie-2);
  background:#0a1220;color:var(--text);font-family:inherit;
  transition:border-color .16s var(--fade),box-shadow .16s var(--fade)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#3c5580}
input::placeholder,textarea::placeholder{color:var(--text-3)}
.mono,.code,#sqlFeld{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* -------------------------------------------------- Tabellen/Listen */
thead th{background:var(--flaeche);color:var(--text-3);letter-spacing:.1em;
  font-size:10px;text-transform:uppercase;padding:9px 8px;
  border-bottom:1px solid var(--linie)}
td{border-bottom:1px solid #16203acc}
tbody tr{transition:background .15s var(--fade)}
tbody tr:hover{background:#ffffff06}
.tel{color:var(--gruen);font-weight:700;letter-spacing:-.01em}
.tel.miss{color:var(--gold);font-weight:500}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a3a58;border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3b4f74;background-clip:content-box}

/* ------------------------------------------------- Ueberlagerungen */
#konto,#holen,#setup,#tipps,#nutzerfenster{background:
  radial-gradient(900px 500px at 50% -220px,#14224066,transparent 70%),var(--bg)}
.kkopf{background:color-mix(in oklab,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linie)}
#holen ol li{background:linear-gradient(168deg,var(--flaeche-2),var(--flaeche));
  border:1px solid var(--linie);border-radius:var(--r-l)}
#holen .zuerst,.zuerst{border-radius:var(--r-xl);box-shadow:var(--schatten-2)}

/* -------------------------------------------------------- Karte/Map */
#map,#karte{border-radius:var(--r-l);overflow:hidden}
.leaflet-popup-content-wrapper{background:var(--flaeche-2);color:var(--text);
  border-radius:var(--r-m);box-shadow:var(--schatten-2)}
.leaflet-popup-tip{background:var(--flaeche-2)}

/* --------------------------------------------------------- Anmelden */
.logo h1{font-size:23px;letter-spacing:-.03em}
.logo p{color:var(--text-3)}
.kasten{box-shadow:var(--schatten-2)}
.msg.gut{color:#8bf0bb}
.fuss{color:var(--text-3)}

/* ------------------------------------------------- Lesbarer Nebentext
   An elf Stellen im System stand #475569 als Farbe fuer Nebensaechliches:
   Zeitstempel im Chat, "löschen", Fussnoten unter den Diagrammen,
   "300 von 650 angezeigt", die Zeitspalte im Protokoll.

   Auf dem dunklen Grund ergibt das einen Kontrast von 2,4:1. Lesbar ist
   ab 4,5:1 -- gemessen, nicht geschaetzt. Wer nicht sehr gute Augen hat
   oder das Handy in der Sonne haelt, sieht diese Zeilen schlicht nicht.

   --text-3 liegt bei 4,4 bis 4,8:1 und ist die Farbe, die im System
   ohnehin fuer Nebentext gedacht ist. Sie wird hier nachgezogen, statt
   in vier Dateien elf Farbwerte einzeln zu tauschen. */
.wann,.loeschen,.note,.fuss,.mehr,.ts,.zt,.wu,.verborgen,
.cn .wann,.cn .loeschen,h2 .note,.muster .fuss,.ware .wu,
#ev .ts,#prot .ts,#miniprot .ts,.vz .zt{color:var(--text-3)}
/* Beim Ueberfahren wird "löschen" rot -- das muss diese Regel
   ueberleben, sonst verliert der Knopf seine Warnfarbe. */
.cn:hover .loeschen{color:var(--rot)}

/* Die Ereignis-Abzeichen im Verlauf der Verwaltung: sieben von acht
   haben einen hellen Grund (blau, gelb, gruen ...), dort ist der dunkle
   Text aus ".vz .art" richtig. Nur "zugriff" hat einen dunklen Grund und
   setzt sich deshalb selbst eine helle Schrift -- ueber EINE Klasse,
   waehrend ".vz .art" ueber zwei geht und damit gewinnt. Ergebnis war
   fast schwarze Schrift auf fast schwarzem Grund, 1,8:1. Diese Zeile
   zieht gleich und stellt die helle Schrift wieder her. */
.vz .art.a-zugriff{color:#cbd5e1}

/* --------------------------------------------------------- Marktakte
   Das Detailfenster je Markt. Es oeffnet sich hinter jedem Marktnamen
   im System -- deshalb liegen die Stile hier und nicht in einer Seite. */

/* Ein klickbarer Marktname. Die gepunktete Linie sagt "hier gibt es
   mehr", ohne wie ein Weblink auszusehen. */
.ml{cursor:pointer;border-bottom:1px dotted var(--text-3)}
.ml:hover{color:#fff;border-bottom-color:var(--gruen)}
.leaflet-popup-content .ml{color:inherit}

.aktetab{padding-top:4px}
.dgruppe{font-size:11px;letter-spacing:.14em;color:var(--text-3);
  font-weight:700;text-transform:uppercase;margin:18px 0 8px}

/* Wochentagsbalken im Muster-Reiter. Bewusst schlicht: sieben Balken,
   Hoehe = Anteil, mehr Aussage geben die Daten nicht her. */
.mbalken{display:flex;gap:6px;align-items:flex-end;margin:14px 0 4px;
  height:64px}
.mb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  justify-content:flex-end;height:100%}
.mbf{width:100%;max-width:38px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--gruen),var(--gruen-tief))}
.mbl{font-size:10.5px;color:var(--text-3)}

/* --------------------------------------------------------- JoyBuy
   Bezugsquelle zum Selbstpruefen -- KEIN Treffer, kein Alarm. Optisch
   deshalb bewusst ruhiger als eine Trefferkarte (kein Gruen, kein
   Verfuegbar-Signal), aber klar als Handlungsmoeglichkeit erkennbar.
   JoyBuys Markenfarbe ist ein warmes Rot. */
.joybuy{background:linear-gradient(168deg,var(--flaeche-2),var(--flaeche));
  border:1px solid var(--linie);border-left:3px solid #e0322d;
  border-radius:var(--r-l);padding:14px 16px;margin-top:14px;
  box-shadow:var(--schatten-1)}
.jb-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jb-marke{background:#e0322d;color:#fff;font-weight:800;font-size:12px;
  letter-spacing:.02em;padding:2px 9px;border-radius:6px}
.jb-titel{font-weight:700;color:var(--text)}
.jb-preis{margin-left:auto;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums}
.jb-text{color:var(--text-2);font-size:13.5px;line-height:1.5;margin:8px 0 0}
.jb-tipp{margin-top:10px;padding:10px 12px;border-radius:var(--r-m);
  background:#2a180a;border:1px solid #7a5a12;color:#fbd98a;
  font-size:13px;line-height:1.5}
.jb-rabatt{margin-top:8px;color:var(--gold);font-weight:600;font-size:13px}
.jb-knopf{display:inline-block;margin-top:12px;background:#e0322d;color:#fff;
  font-weight:700;padding:9px 16px;border-radius:var(--r-m);
  text-decoration:none;transition:background .16s var(--fade),
  transform .12s var(--fade)}
.jb-knopf:hover{background:#f0433d;transform:translateY(-1px)}
.jb-knopf:active{transform:translateY(0)}

/* ------------------------------------------------------------ Feines */
.tab.an,.an{animation-timing-function:var(--fade)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}

/* Ein sichtbarer Fokus fuer alles, was den Fokus bekommen kann -- nicht
   nur fuer Knoepfe und Felder. Ohne diese Zeile haetten etwa die Reiter
   und die Trefferkarten gar keine Kennzeichnung, wenn jemand die Seite
   mit der Tastatur bedient. :focus-visible und nicht :focus, damit ein
   Mausklick keinen Ring stehen laesst. */
:where([tabindex],summary,[contenteditable]):focus-visible{outline:none;
  box-shadow:var(--ring)}