/* ===========================================================================
   Tralic — Gestaltung (Fassung 2, 22.09.2026)

   Tim: „Es muss expensive aussehen. Abgerundet, dünne Ränder, moderne
   Schrift, futuristic, legit — da muss man mit der Website sprechen."

   Was das hier heisst:
     · EIN System aus Werten (Farben, Radien, Abstände, Schrift), nirgends
       Einzelfälle. Dunkel ist Standard (der Floor ist dunkel), Hell gibt es
       auf Knopfdruck (data-thema="hell") — dieselben Werte, andere Töne.
     · Flächen sind Glas: leicht durchscheinend, dünner Rand aus Licht,
       weicher Schatten. Grosse Radien (14 / 20 / 28).
     · Schrift: die Systemschrift des Geräts — auf dem Mac SF Pro, also
       genau Apples Schnitt — eng gesetzt, mit Tabellenziffern für Zahlen.
       Eine eigene Schrift (Manrope, Geist) kann später in /schrift/
       liegen; die Variable --font ist die einzige Stelle.
     · Bewegung, die etwas erzählt: Inhalte steigen beim Scrollen sanft
       ein (.erscheint), Karten heben sich unter der Hand, sonst Ruhe.
       Wer „Bewegung reduzieren" eingestellt hat, bekommt keine.
   Eine Lernumgebung, keine Handelsplattform: ruhig, lesbar, edel.
   =========================================================================== */

/* Die eigene Schrift (/schrift/schrift.woff2) bindet ansichten/rahmen.js ein,
   wenn die Datei da ist — sonst gaebe es bei jedem Aufruf ein 404. */

:root{
  color-scheme: dark;
  /* Toene */
  /* Tim, 23.09.2026: „alles im Style von linear.app" — fast schwarz, kaum
     Farbe, Indigo statt Blau, Raender bei 6–10 % Weiss, Schrift in drei
     Graustufen. Farbe tragen nur Daten (Kerzen, Confluences, Status). */
  --grund:        #08090a;
  --grund-2:      #0d1117;
  --flaeche:      rgba(255,255,255,.025);
  --flaeche-hoch: rgba(255,255,255,.05);
  --flaeche-voll: #101113;
  --rand:         rgba(255,255,255,.07);
  --rand-hell:    rgba(255,255,255,.12);
  --schrift:      #f7f8f8;
  --schrift-2:    #979ca5;   /* D164: eine Spur heller — Nebentext lesbar statt versteckt */
  --schrift-3:    #6f737b;
  /* D311 (Tim, 29.09.): dunkel mit leichtem Gold/Bronze als Signature-Farbe, auf der ganzen Website */
  --ton:          #d8b27a;
  --ton-2:        #b98a55;
  --ton-dunkel:   #a8773f;
  --verlauf:      linear-gradient(135deg, #f0dcae 0%, #b98a55 100%);
  --schein:       radial-gradient(70% 50% at 50% 0%, rgba(216,178,120,.09), transparent 65%);
  --gut:          #3fb950;
  --warn:         #d29922;
  --schlecht:     #f85149;
  --schatten:     0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -24px rgba(0,0,0,.7);
  --schatten-hoch:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px -30px rgba(0,0,0,.9);
  /* Masse: linear rundet massvoll — 8 bis 16 px, keine Kissen. */
  --radius:       6px;
  --radius-gross: 8px;
  --radius-riesig:12px;
  --breite:       min(1180px, calc(100% - 3rem));
  --font: "Tralic", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Edel: ein warmer Champagnerton fuer Akzente neben Blau→Lila — Tim:
     „Bentley-maessig, vom Feel her". Sparsam: Stempel, Ziffern, Linien. */
  /* Der Champagnerton bleibt fuer Ziffern und Nummern — leiser als vorher. */
  --edel:         #b8b2a4;
  --edel-2:       #7d786d;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "JetBrains Mono", monospace;
  --dauer: .45s;
  --kurve: cubic-bezier(.2,.7,.2,1);
}
:root[data-thema="hell"]{
  /* D312 (Tim, 29.09.: „der White Mode nicht zu hell, sondern trotzdem ein bisschen Finanz-Vibes"):
     warmes Elfenbein statt Weiß, Anthrazit als Schrift, dunkles Gold als Akzent, warme Schatten. */
  color-scheme: light;
  --grund:        #f1ece2;
  --grund-2:      #f8f4ec;
  --flaeche:      rgba(70,50,20,.035);
  --flaeche-hoch: rgba(70,50,20,.065);
  --flaeche-voll: #faf7f0;
  --rand:         rgba(70,50,20,.11);
  --rand-hell:    rgba(70,50,20,.18);
  --schrift:      #17181c;
  --schrift-2:    #585046;
  --schrift-3:    #8b8174;
  --ton:          #8a5a22;
  --ton-2:        #6f4717;
  --ton-dunkel:   #6f4717;
  --edel:         #7d6a4c;
  --edel-2:       #a8957a;
  --schein:       radial-gradient(70% 50% at 50% 0%, rgba(185,138,85,.14), transparent 65%);
  --schatten:     0 1px 0 rgba(255,252,245,.7) inset, 0 20px 50px -30px rgba(60,40,15,.32);
  --schatten-hoch:0 1px 0 rgba(255,252,245,.8) inset, 0 30px 70px -30px rgba(60,40,15,.38);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
  position: relative;
}
/* Ein leiser Schein oben — die Seite hat Tiefe, nicht nur Fläche. */
body::before{
  content: ""; position: absolute; inset: -20vh 0 auto 0; height: 80vh;
  background: var(--schein); pointer-events: none; z-index: 0;
}
body > *{ position: relative; z-index: 1; }

a{ color: var(--ton); text-decoration: none; transition: color .2s; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.mitte{ width: var(--breite); margin-inline: auto; }
b, strong{ font-weight: 600; }
.zahlen, .tab{ font-variant-numeric: tabular-nums; }

/* --- Kopf ---------------------------------------------------------------- */

header.kopf{
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--grund) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rand);
}
.kopf .mitte{ display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.marke{
  font-weight: 500; font-size: 1.12rem; letter-spacing: .01em;
  color: var(--schrift); display: flex; align-items: center; gap: .6rem;
}
.marke:hover{ text-decoration: none; }
/* Das Zeichen: einfarbig, in der Schriftfarbe, ohne Kachel und ohne
   Leuchten. Tim, 22.09. 02:50: „Der Farbverlauf in so einer knalligen
   Farbe — ich würde es viel seriöser halten. Wie linear.app." */
.marke .zeichen{
  width: 22px; height: 22px; flex: none; color: var(--schrift);
  display: inline-grid; place-items: center;
}
.marke .zeichen svg{ width: 22px; height: 22px; display: block; }
.marke img.logo{ height: 26px; width: auto; max-width: 180px; display: block; }
/* Ankuendigung aus dem Admin (22.09.): ein schmales Band unter dem Kopf. */
.ankuendigung{ background: var(--flaeche); border-bottom: 1px solid var(--rand-hell); font-size: .85rem; color: var(--schrift-2); }
.ankuendigung .mitte{ padding: .45rem 1.25rem; display: block; }
nav.haupt{ display: flex; gap: .25rem; margin-left: auto; align-items: center; }
/* D430 (Tim, 19.10.: „können wir die Header-Titel mittig halten?"): Marke links, Bereiche in der Mitte, Konto rechts */
.haupt-mitte, .haupt-rechts{ display: flex; gap: .25rem; align-items: center; }
nav.haupt a.konto-link{ display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .4rem; }
nav.haupt a.konto-link .kreis{ width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: var(--schrift); border: 1px solid var(--rand-hell); background: var(--flaeche); }
nav.haupt a.konto-link .kname{ display: none; }
header.kopf.menue-auf nav.haupt a.konto-link .kname{ display: inline; }
header.kopf.menue-auf nav.haupt a.konto-link .kreis{ display: none; }
/* Mittig nur, wo es passt: ohne Anmeldung (wenige Punkte) ab 641 px, angemeldet (sieben Bereiche + Konto) ab 1400 px.
   Angemeldet zwischen 1150 und 1399 px: Bereiche direkt nach der Marke; darunter (641–1149 px) der Menü-Knopf wie am Handy. */
@media (min-width: 641px){
  header.kopf:not(.viele) .mitte{ display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  header.kopf:not(.viele) .mitte > .marke{ justify-self: start; }
  header.kopf:not(.viele) nav.haupt{ display: contents; }
  header.kopf:not(.viele) .haupt-mitte{ grid-column: 2; justify-self: center; }
  header.kopf:not(.viele) .haupt-rechts{ grid-column: 3; justify-self: end; }
}
@media (min-width: 1400px){
  header.kopf.viele .mitte{ display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 1rem; }
  header.kopf.viele .haupt-mitte a{ padding: .42rem .5rem; }
  header.kopf.viele .mitte > .marke{ justify-self: start; }
  header.kopf.viele nav.haupt{ display: contents; }
  header.kopf.viele .haupt-mitte{ grid-column: 2; justify-self: center; }
  header.kopf.viele .haupt-rechts{ grid-column: 3; justify-self: end; }
}
@media (min-width: 1150px) and (max-width: 1399px){
  header.kopf.viele .haupt-mitte{ margin-right: auto; margin-left: .5rem; }
  header.kopf.viele nav.haupt{ flex: 1; margin-left: 0; }
}
@media (min-width: 641px) and (max-width: 1149px){
  header.kopf.viele .menue-knopf{ display: inline-flex; }
  header.kopf.viele nav.haupt{ display: none; }
  header.kopf.viele .haupt-mitte, header.kopf.viele .haupt-rechts{ display: contents; }
  header.kopf.viele.menue-auf nav.haupt{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; position: absolute; top: 64px; left: 0; right: 0;
    padding: .7rem 1rem 1rem; background: var(--grund); border-bottom: 1px solid var(--rand); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
  header.kopf.viele.menue-auf nav.haupt a{ padding: .65rem .85rem; border-radius: 8px; background: var(--flaeche); margin: 0; }
  header.kopf.viele.menue-auf nav.haupt a.jetzt{ background: var(--flaeche-hoch); color: var(--schrift); }
  header.kopf.viele.menue-auf nav.haupt a.sprache{ text-align: center; display: grid; place-items: center; }
  header.kopf.viele.menue-auf nav.haupt .thema{ width: auto; height: auto; min-height: 44px; border-radius: 8px; margin: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; transform: none; }
  header.kopf.viele.menue-auf nav.haupt a.glocke{ display: flex; align-items: center; gap: .5rem; }
  header.kopf.viele.menue-auf nav.haupt a.glocke::after{ content: attr(aria-label); }
}
.menue-knopf{ display: none; margin-left: auto; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 7px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--schrift); font-family: inherit; font-weight: 500; font-size: .9rem; line-height: 1; cursor: pointer; }
.menue-knopf[aria-expanded="true"]{ background: var(--flaeche-hoch); border-color: var(--rand-hell); }
nav.haupt a.sprache{ font: 600 .72rem/1 var(--mono); letter-spacing: .08em; padding: .42rem .6rem; border: 1px solid var(--rand); border-radius: 7px; color: var(--schrift-3); }
nav.haupt a.sprache:hover{ color: var(--schrift); border-color: var(--rand-hell); background: transparent; }
nav.haupt a{
  color: var(--schrift-2); font-size: .92rem; font-weight: 500;
  padding: .42rem .8rem; border-radius: 7px; transition: background .2s, color .2s;
}
nav.haupt a:hover{ color: var(--schrift); background: var(--flaeche-hoch); text-decoration: none; }
nav.haupt a.jetzt{ color: var(--schrift); background: var(--flaeche-hoch); }
nav.haupt a.knopf{ color: var(--grund); margin-left: .4rem; padding: .45rem .9rem; font-size: .86rem; }
nav.haupt a.knopf:hover{ background: var(--schrift); }
/* D310: Reiterleiste über allen Strategie-Seiten (ansichten/rahmen.js stratLeiste) */
.st-leiste{ display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: -.6rem 0 1.6rem; padding: .3rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); width: fit-content; max-width: 100%; }
.st-leiste::-webkit-scrollbar{ display: none; }
.st-leiste a{ flex: none; padding: .5rem .95rem; border-radius: 7px; font-size: .9rem; color: var(--schrift-2); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.st-leiste a:hover{ color: var(--schrift); background: var(--flaeche-hoch); text-decoration: none; }
.st-leiste a.jetzt{ color: var(--schrift); background: var(--flaeche-hoch); box-shadow: inset 0 0 0 1px var(--rand-hell); font-weight: 600; }
.st-leiste a[data-leiste="werkstatt"]{ margin-left: .4rem; color: var(--schrift-3); }
@media (max-width: 640px){ .st-leiste{ width: auto; margin: -.4rem -1rem 1.2rem; border-radius: 0; border-left: 0; border-right: 0; } }
/* D310: „Mehr ▾" im Kopf — Screener, Funde, Preise */
nav.haupt details.mehr{ position: relative; }
nav.haupt details.mehr > summary{ list-style: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; color: var(--schrift-2); font-size: .9rem; padding: .42rem .7rem; border-radius: 7px; }
nav.haupt details.mehr > summary::-webkit-details-marker{ display: none; }
nav.haupt details.mehr > summary:hover, nav.haupt details.mehr[open] > summary, nav.haupt details.mehr > summary.jetzt{ color: var(--schrift); background: var(--flaeche-hoch); }
nav.haupt details.mehr > summary svg{ transition: transform .15s ease; } nav.haupt details.mehr[open] > summary svg{ transform: rotate(180deg); }
nav.haupt .mehr-liste{ position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; display: grid; gap: .15rem; padding: .4rem; border-radius: 8px; background: var(--grund); border: 1px solid var(--rand-hell); box-shadow: 0 20px 44px -18px rgba(0,0,0,.6); }
nav.haupt .mehr-liste a{ display: block; padding: .55rem .75rem; border-radius: 7px; }
.thema{
  width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--schrift-2); display: inline-grid; place-items: center;
  cursor: pointer; padding: 0; margin-left: .35rem; transition: background .2s, color .2s, transform .2s;
}
.thema:hover{ color: var(--schrift); background: var(--flaeche-hoch); transform: rotate(15deg); }
.thema svg{ width: 16px; height: 16px; }

/* --- Inhalt -------------------------------------------------------------- */

main{ padding: 3rem 0 6rem; }

/* Duenn und gross ist teuer; fett und klein ist Zeitung. Ueberschriften
   in Leichtschnitt (300/400), eng gesetzt — auf dem Mac ist das SF Pro
   Display Light. Betontes im Satz dann halbfett, nie fett. */
/* linear.app setzt Titel halbfett (510) und eng (-.02 bis -.03 em), Flies-
   text in Grau 400. Duenn (300) wirkte auf grossen Bildschirmen zart, aber
   nicht so klar wie dort (Tim, 23.09.: „alles im Style von linear.app"). */
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.028em; font-weight: 510; margin: 0 0 .9rem; }
h1 strong, h1 b{ font-weight: 510; }
h2{ font-size: clamp(1.45rem, 2.4vw, 1.95rem); letter-spacing: -.022em; font-weight: 510; margin: 3rem 0 1rem; line-height: 1.18; }
h3{ font-size: 1.04rem; font-weight: 510; letter-spacing: -.012em; margin: 1.4rem 0 .5rem; }
/* D165: eingeklappte Karten und „Weitere …" auf Formularseiten */
details.karte.klapp > summary, details.weitere > summary{ cursor:pointer; list-style:none; }
details.karte.klapp > summary::-webkit-details-marker, details.weitere > summary::-webkit-details-marker{ display:none; }
details.karte.klapp > summary::after, details.weitere > summary::after{ content:" ▾"; color:var(--schrift-3); }
details.karte.klapp[open] > summary::after, details.weitere[open] > summary::after{ content:" ▴"; }
details.karte.klapp[open] > summary{ margin-bottom:.8rem; }
details.weitere{ margin-top:.7rem; font-size:.9rem; color:var(--schrift-2); }
/* D187: duenner Ladebalken oben, wenn ein Formular im Hintergrund laeuft */
.tralic-lade{ position:fixed; left:0; top:0; height:3px; width:0; background:var(--ton); z-index:9999; opacity:0; transition:width .5s ease, opacity .25s; pointer-events:none; box-shadow:0 0 8px rgba(216,178,120,.6); }
.tralic-lade.an{ opacity:1; }
button.laedt{ opacity:.65; cursor:progress; }
/* D177: Broker-Abgleich */
.ba-reihen{ display:grid; gap:.5rem; }
.ba-reihe{ display:grid; grid-template-columns: 70px minmax(0,150px) auto minmax(0,1fr) auto; gap:.5rem .7rem; align-items:center; }
.ba-reihe input{ margin:0; } .ba-reihe .knopf{ padding:.45rem .8rem; font-size:.85rem; }
.ba-stand.gut{ color:#3fb950; } .ba-stand.fehler{ color:#f85149; }
.ba-weg[hidden]{ display:none; }
.ba-reihe b small{ display:block; font-weight:400; font-size:.7rem; color:var(--schrift-3); font-variant-numeric:tabular-nums; }
.ba-weg{ background:none; border:1px solid var(--rand-hell); color:var(--schrift-3); font-size:.75rem; padding:.2rem .6rem; border-radius:7px; box-shadow:none; }
@media (max-width:640px){ .ba-reihe{ grid-template-columns: 70px minmax(0,1fr) auto; } .ba-reihe .ba-stand{ grid-column: 1 / -1; } .ba-reihe .ba-weg{ grid-column: 1 / -1; justify-self:start; } }
.fk-mt5, .pf-mt5{ margin:.45rem 0 0; font-size:.8rem; color:var(--schrift-2); font-variant-numeric:tabular-nums; } .fk-mt5 b, .pf-mt5 b{ color:var(--schrift); font-weight:600; }
/* D164: Arbeitsseiten ruhiger — die Überschrift sagt, wo man ist, sie muss nicht rufen. */
body.app main{ padding-top: 2.2rem; }
/* D306 (Tim, 28.09.: „der gesamte Space muss genutzt werden, nach rechts und links raus — da ist Platz“): angemeldet breiter als 1180 px */
@media (min-width: 641px){ body.app{ --breite: min(1560px, calc(100% - 5rem)); } }
body.app main h1{ font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.022em; margin-bottom: .6rem; }
body.app main h2{ margin-top: 2.2rem; }
body.app .karte{ border-color: rgba(255,255,255,.06); }
:root[data-thema="hell"] body.app .karte{ border-color: rgba(9,9,11,.07); }
@media (max-width: 640px){ body.app main{ padding-top: 1.2rem; } body.app main h1{ font-size: 1.6rem; } }
body{ font-weight: 400; }
.leise{ font-weight: 400; }
p{ margin: 0 0 1rem; }
.leise{ color: var(--schrift-2); }
.klein{ font-size: .88rem; }
.gross{ font-size: 1.15rem; line-height: 1.55; }
/* Ueberschriften-Verlauf: nicht bunt, sondern Schrift → gedaempft, wie
   bei linear.app. Farbe bleibt Datenfarbe (Kerzen, Confluences). */
.verlauf-text{
  background: linear-gradient(180deg, var(--schrift) 0%, var(--schrift-2) 160%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stempel{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .75rem .32rem .55rem; border-radius: 7px;
  border: 1px solid var(--rand-hell); background: var(--flaeche);
  font-size: .8rem; color: var(--schrift-2); letter-spacing: .01em;
}
.stempel .punkt{ width: .45rem; height: .45rem; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 3px rgba(63,185,80,.14); }
.stempel.edel{ border-color: var(--rand-hell); color: var(--schrift-2); letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; font-weight: 500; }
.linie-edel{ height: 1px; background: linear-gradient(90deg, transparent, var(--edel-2), transparent); opacity: .6; border: 0; margin: 2.5rem 0; }

/* --- Karten -------------------------------------------------------------- */

.karte{
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: 1.6rem;
  box-shadow: var(--schatten);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--dauer) var(--kurve), border-color .3s, box-shadow var(--dauer) var(--kurve);
}
a.karte, .karte.hebt{ display: block; color: inherit; position: relative; overflow: hidden; }
/* Unter der Hand (Tim, 22.09. abends: „nicht blau umrandet, eher weiss,
   und es schimmert so schoen drumherum, und es hebt sich leicht"): der
   Rand wird weiss-durchscheinend, ein Lichtschein wandert einmal
   durch, die Karte hebt sich vier Pixel. */
a.karte::after, .karte.hebt::after{
  content: ""; position: absolute; inset: -60% -30%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.10) 52%, transparent 65%);
  transform: translateX(-70%); opacity: 0; transition: transform .9s var(--kurve), opacity .3s;
}
a.karte:hover, .karte.hebt:hover{ text-decoration: none; transform: translateY(-4px); border-color: rgba(255,255,255,.34);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px -6px rgba(255,255,255,.12), var(--schatten-hoch); }
a.karte:hover::after, .karte.hebt:hover::after{ transform: translateX(70%); opacity: 1; }
:root[data-thema="hell"] a.karte:hover, :root[data-thema="hell"] .karte.hebt:hover{ border-color: rgba(15,23,42,.35); box-shadow: 0 0 0 1px rgba(15,23,42,.04), 0 0 40px -6px rgba(15,23,42,.14), var(--schatten-hoch); }
.karten{ display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.karte h3{ margin-top: 0; }

.zahl{ font: 300 2rem/1.05 var(--font); letter-spacing: -.03em; display: block; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.zahl-name{ color: var(--schrift-2); font-size: .85rem; }

/* --- Formulare ----------------------------------------------------------- */

form.saeule{ display: flex; flex-direction: column; gap: 1.05rem; }
label{ display: block; font-size: .88rem; color: var(--schrift-2); margin-bottom: .4rem; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input:not([type]), input[type=datetime-local], input[type=time], input[type=search], input[type=url], input[type=tel],   /* D253: auch Felder ohne type (Journal, Grenzen) und Zeitfelder */
select, textarea{
  width: 100%;
  padding: .72rem .95rem;
  background: var(--flaeche-voll);
  border: 1px solid var(--rand-hell);
  border-radius: 8px;
  color: var(--schrift);
  font: inherit; font-size: .96rem;
  transition: border-color .2s, box-shadow .2s;
}
input[type=datetime-local], input[type=date], input[type=time]{ color-scheme: dark; min-height: 2.9rem; }
input[type=checkbox], input[type=radio]{ accent-color: var(--ton); }   /* D253: Häkchen in der Farbe der Seite statt Systemblau */
:root[data-thema="hell"] input[type=datetime-local], :root[data-thema="hell"] input[type=date], :root[data-thema="hell"] input[type=time]{ color-scheme: light; }
input::placeholder, textarea::placeholder{ color: var(--schrift-3); opacity: .8; }
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--ton); box-shadow: 0 0 0 3px rgba(216,178,120,.18);
}

/* Knoepfe wie bei linear.app: der Hauptknopf ist hell auf dunkel (Schrift-
   farbe als Flaeche), der zweite nur ein Rand — keine blauen Schatten. */
button, .knopf{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.1rem;
  background: var(--schrift);
  color: var(--grund);
  border: 1px solid transparent;
  border-radius: 8px;   /* D174 (Tim, 25.09.: „schöner, runder, richtig modern") */
  font: inherit; font-weight: 510; font-size: .92rem; letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .18s var(--kurve), opacity .2s, background .2s;
}
button:hover, .knopf:hover{ opacity: .9; text-decoration: none; transform: translateY(-1px); }
button:active, .knopf:active{ transform: translateY(0); }
button.still, .knopf.still{
  background: var(--flaeche-hoch); color: var(--schrift); border-color: var(--rand-hell); box-shadow: none;
}
button.still:hover, .knopf.still:hover{ background: var(--rand); opacity: 1; }
.knopf.gross{ padding: .8rem 1.4rem; font-size: .98rem; }
/* D179 (Tim, 25.09.: „nicht immer auf blaue Texte klicken — lieber ein schöner, runder Button"): kleiner runder Knopf fuer Wege im Text */
.knopf.mini{ padding: .3rem .85rem; font-size: .8rem; border-radius: 7px; font-weight: 500; vertical-align: middle; margin: .15rem 0; }
.knopf.mini:hover{ transform: none; }

.hinweis{ font-size: .85rem; color: var(--schrift-3); margin-top: .35rem; }

/* --- Meldungen ----------------------------------------------------------- */

.meldung{
  padding: .85rem 1.05rem; border-radius: 8px; font-size: .93rem;
  border: 1px solid; margin-bottom: 1.2rem;
}
.meldung.fehler{ background: rgba(248,81,73,.09); border-color: rgba(248,81,73,.3); color: #ffb3ae; }
.meldung.gut   { background: rgba(63,185,80,.09); border-color: rgba(63,185,80,.3); color: #7ee787; }
.meldung.info  { background: rgba(216,178,120,.07); border-color: rgba(216,178,120,.28); color: #ecdcb8; }
:root[data-thema="hell"] .meldung.fehler{ color: #a4262c; }
:root[data-thema="hell"] .meldung.gut{ color: #1a7f37; }
:root[data-thema="hell"] .meldung.info{ color: #7d5222; }

/* --- Tabellen ------------------------------------------------------------ */

table{ width: 100%; border-collapse: collapse; font-size: .9rem; }
th{
  text-align: left; font-weight: 600; color: var(--schrift-2);
  padding: .6rem .75rem; border-bottom: 1px solid var(--rand-hell);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
}
td{ padding: .62rem .75rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
tr:last-child td{ border-bottom: none; }
tbody tr{ transition: background .15s; }
tbody tr:hover{ background: var(--flaeche-hoch); }
td.zahlen, th.zahlen{ text-align: right; font-family: var(--mono); font-size: .86rem; }

.marke-klein{
  display: inline-block; padding: .12rem .55rem; border-radius: 7px;
  font-size: .76rem; font-weight: 600; border: 1px solid;
}
.m-gut    { color: var(--gut);      border-color: rgba(63,185,80,.4);  background: rgba(63,185,80,.1); }
.m-warn   { color: var(--warn);     border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.1); }
.m-schlecht{color: var(--schlecht); border-color: rgba(248,81,73,.4);  background: rgba(248,81,73,.1); }
.m-still  { color: var(--schrift-2);border-color: var(--rand-hell);    background: var(--flaeche-hoch); }

/* --- Fuß ----------------------------------------------------------------- */

footer.fuss{
  border-top: 1px solid var(--rand);
  padding: 2.2rem 0 3.5rem;
  color: var(--schrift-3); font-size: .85rem;
}
footer.fuss .mitte{ display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: baseline; }
footer.fuss a{ color: var(--schrift-2); }
.warnband{
  border: 1px solid rgba(210,153,34,.28);
  background: rgba(210,153,34,.06);
  color: #d9b56a;
  border-radius: 8px; padding: .9rem 1.1rem; font-size: .85rem; line-height: 1.55;
  margin-top: 1.5rem;
}
:root[data-thema="hell"] .warnband{ color: #8a5a00; }

/* --- Bewegung ------------------------------------------------------------ */

/* Die Ranke: jedes Stueck blendet weich (bewegung.js setzt die Deckkraft). */
[data-ranke] [data-i]{ transition: opacity .18s linear; }
/* Wie bei linear.app (Tim, 22.09. abends: „erst unscharf, dann kommt es
   von unten hoch"): Elemente beginnen weich verschwommen und ein Stueck
   tiefer, werden scharf und steigen ein. */
.erscheint{ opacity: 0; transform: translateY(14px);   /* D422: ohne Unschärfe, nur weich herein */
  transition: opacity .7s var(--kurve), transform .8s var(--kurve); will-change: opacity, transform; }
.erscheint.da{ opacity: 1; transform: none; }
/* Nach dem Einstieg das Filter loslassen — sonst rechnet der Browser
   weiter an einer Ebene, die nichts mehr tut (Chart-Leinwaende darin
   werden sonst weich). */
.erscheint.da.fertig{ filter: none; will-change: auto; }
.erscheint[data-verzug="1"]{ transition-delay: .08s; }
.erscheint[data-verzug="2"]{ transition-delay: .16s; }
.erscheint[data-verzug="3"]{ transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){
  .erscheint{ opacity: 1; transform: none; filter: none; transition: none; }
  .karte, button, .knopf, .thema{ transition: none; }
  a.karte:hover, .karte.hebt:hover{ transform: none; }
}

/* --- Schmal -------------------------------------------------------------- */

.schmal{ max-width: 440px; margin-inline: auto; }

@media (max-width: 640px){
  :root{ --breite: calc(100% - 2rem); --radius-gross: 18px; }
  /* Der Kopf auf dem Handy: die Navigation in einer Zeile, seitlich
     wischbar, statt ueber den rechten Rand hinaus (22.09.: /anleitung war
     75 px breiter als das Fenster — es war der Kopf, auf jeder Seite). */
  .kopf .mitte{ gap: .75rem; }
  /* D252: am Handy ein Menü-Knopf; die Navigation klappt als Tafel unter dem Kopf auf
     (vorher seitlich wischbar — Journal, Konto und Sprache lagen unsichtbar hinter dem Rand). */
  .menue-knopf{ display: inline-flex; }
  nav.haupt{ display: none; }
  .haupt-mitte, .haupt-rechts{ display: contents; }
  header.kopf.menue-auf nav.haupt{ display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; position: absolute; top: 64px; left: 0; right: 0;
    padding: .7rem 1rem 1rem; background: var(--grund); border-bottom: 1px solid var(--rand); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); max-height: calc(100vh - 64px); overflow-y: auto; }
  header.kopf.menue-auf nav.haupt a{ font-size: 1rem; padding: .7rem .85rem; border-radius: 8px; background: var(--flaeche); margin: 0; }
  header.kopf.menue-auf nav.haupt a.jetzt{ background: var(--flaeche-hoch); color: var(--schrift); }
  header.kopf.menue-auf nav.haupt a.knopf{ background: var(--schrift); color: var(--grund); text-align: center; }
  header.kopf.menue-auf nav.haupt a.sprache{ font-size: .8rem; text-align: center; display: grid; place-items: center; }
  header.kopf.menue-auf nav.haupt .thema{ width: auto; height: auto; min-height: 44px; border-radius: 8px; margin: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; transform: none; }
  header.kopf.menue-auf nav.haupt .thema::after{ content: attr(title); font-size: .9rem; }
  header.kopf.menue-auf nav.haupt a.glocke{ display: flex; align-items: center; gap: .5rem; }
  header.kopf.menue-auf nav.haupt a.glocke::after{ content: attr(aria-label); font-size: 1rem; }
  /* D310: im Handy-Menü steht „Mehr" nicht als Klappe, sondern die drei Einträge wie alle anderen */
  header.kopf.menue-auf nav.haupt details.mehr{ display: contents; }
  header.kopf.menue-auf nav.haupt details.mehr > summary{ display: none; }
  header.kopf.menue-auf nav.haupt details.mehr .mehr-liste{ display: contents; }
  .marke{ flex: none; }
  main{ padding: 1.75rem 0 3.5rem; }
  .karte{ padding: 1.2rem; }
  /* Breite Tabellen (Geraete auf /konto, Admin-Listen) scrollen in ihrer
     Karte statt die Seite zu sprengen (22.09.: /konto 61 px zu breit). */
  .karte:has(> table){ overflow-x: auto; }
  table{ font-size: .84rem; }
}


/* D219: Glocke fuer die Alarme */
nav.haupt a.glocke{ position: relative; display: inline-flex; align-items: center; padding: .42rem .55rem; }
nav.haupt a.glocke .zahl{ position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 7px; background: var(--ton); color: #1a1408; font: 700 .62rem/15px var(--mono, monospace); text-align: center; }
nav.haupt a.glocke.neu{ color: var(--schrift); }
nav.haupt a.glocke .zahl[hidden]{ display: none; }

/* D337: Seitenwechsel ohne Aufblitzen — Kopf und Strategie-Leiste bleiben stehen, der Inhalt blendet kurz über (Safari 18.2+, Chrome 126+; ältere Browser laden wie bisher) */
@view-transition { navigation: auto; }
body > header.kopf{ view-transition-name: kopf; }
nav[data-strat-leiste]{ view-transition-name: stleiste; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .16s; }
@media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } }
/* D344: „Passend zur Kette“ — Confluences der eigenen Kette wieder an */
[data-arten-kette][hidden]{ display:none !important; }
.cblock button[data-arten-kette]{ color:#d8b27a; border-color:rgba(216,178,120,.45); }

/* D425: Einfach / Profi — in der einfachen Ansicht ist alles mit [data-profi] ausgeblendet (lib/ansicht.js) */
html[data-ansicht="einfach"] [data-profi]{ display: none !important; }
html[data-ansicht="profi"] [data-nur-einfach]{ display: none !important; }
.ansicht-schalter{ display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--rand); border-radius: 7px; margin: 0 .2rem; }
nav.haupt .ansicht-schalter a{ padding: .3rem .55rem; border-radius: 5px; font-size: .74rem; color: var(--schrift-3); }
nav.haupt .ansicht-schalter a.an{ color: var(--schrift); background: var(--flaeche-hoch); box-shadow: inset 0 0 0 1px var(--rand-hell); }
.profi-hinweis{ margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--rand); font-size: .86rem; color: var(--schrift-3); }
.profi-hinweis p{ margin: 0; }
/* D425: Floor in der einfachen Ansicht — Leiste nur Markt, Zeitrahmen, Confluences, Sessions, Positionen; kein „Mehr einstellen“, keine Indikatoren */
html[data-ansicht="einfach"] .cblock .nur-mehr,
html[data-ansicht="einfach"] .cblock .mehr-knopf,
html[data-ansicht="einfach"] .cblock [data-feld="profil"]{ display: none !important; }