/* ================================================================
   Börsenspiel – Schülerseite im Stil einer Trading-App (Entwurf A)
   Hell oder dunkel richtet sich nach dem Gerät (data-thema setzt basis.js).
   ================================================================ */
:root{
  --grund:#ffffff; --flaeche:#f6f4f0; --flaeche2:#fbfaf8; --karte:#ffffff;
  --text:#16181b; --leise:#666c73; --linie:#ebe8e2;
  --akzent:#9a4423; --akzent-hell:#f6e9e2; --knopf-text:#ffffff;
  --plus:#1f7a4a; --plus-hell:#e4f3ea; --minus:#c0362c; --minus-hell:#fbe9e7;
  --hinweis:#8a6100; --hinweis-hell:#fbf3dc; --info:#1e5175; --info-hell:#e8eef3;
  --d1:#1e5175; --d2:#c8643b; --d3:#2f7a4f; --d4:#7a4fa0; --d5:#b08a1e; --d6:#2a8a96;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:14px; --r-klein:10px; --r-rund:999px;
  --leiste:228px; --leiste-zu:76px; --tabbar:64px;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-schub:cubic-bezier(0.32,0.72,0,1);
  color-scheme:light;
}
:root[data-thema="dunkel"]{
  --grund:#0f1113; --flaeche:#1b1e22; --flaeche2:#14171a; --karte:#16191c;
  --text:#ecebe8; --leise:#9ba1a8; --linie:#272b30;
  --akzent:#e3997a; --akzent-hell:#3a261d; --knopf-text:#1b0f09;
  --plus:#5cc98c; --plus-hell:#16301f; --minus:#ff7b72; --minus-hell:#3a1d1b;
  --hinweis:#e2c06a; --hinweis-hell:#33290f; --info:#8db9d9; --info-hell:#1c2a35;
  --d1:#8db9d9; --d2:#e08a62; --d3:#7cc59a; --d4:#b99be0; --d5:#e2c06a; --d6:#6cc3cc;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;line-height:1.2}
h1{font-size:1.5rem} h2{font-size:1.1rem} h3{font-size:1rem}
a{color:var(--akzent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
[hidden]{display:none !important}
svg.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zahl,.wert{font-variant-numeric:tabular-nums}
.leise{color:var(--leise)} .klein{font-size:.85rem}
.plus{color:var(--plus)} .minus{color:var(--minus)}
.mono{font-family:var(--mono);font-size:.92em}

/* ---------------- Grundgerüst ---------------- */
.app{min-height:100vh;min-height:100dvh}
.rahmen{min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1;width:100%;max-width:1320px;margin:0 auto;padding:16px 16px 24px;container-type:inline-size}
.kopfzeile{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--linie);background:var(--grund);position:sticky;top:0;z-index:20}
.marke{font:400 1.25rem var(--serif);color:var(--text);text-decoration:none;white-space:nowrap}
.kopfzeile .marke{margin-right:auto}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--akzent-hell);color:var(--akzent);display:grid;place-items:center;font:700 .8rem var(--sans);flex:none;text-decoration:none;text-transform:uppercase}
.fuss{max-width:1320px;width:100%;margin:0 auto;padding:16px;color:var(--leise);font-size:.8rem;display:flex;gap:.4rem 1rem;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--linie)}
.fuss a{color:inherit}

/* Navigation: auf dem Handy unten, ab 900 px als Seitenleiste */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--grund);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom)}
.leiste .leiste-kopf,.leiste .leiste-fuss{display:none}
.leiste a.nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar);color:var(--leise);text-decoration:none;font-size:.68rem;font-weight:600;min-width:0}
.leiste a.nav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.leiste a.nav[aria-current="page"]{color:var(--akzent)}
.app.mit-leiste .rahmen{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}

@media (min-width:900px){
  .app.mit-leiste{display:grid;grid-template-columns:var(--leiste) minmax(0,1fr);transition:grid-template-columns 200ms var(--ease-out)}
  .app.mit-leiste.zu{grid-template-columns:var(--leiste-zu) minmax(0,1fr)}
  .app.mit-leiste .rahmen{padding-bottom:0}
  .app.mit-leiste .kopfzeile{display:none}
  .leiste{position:sticky;top:0;height:100vh;height:100dvh;flex-direction:column;gap:4px;padding:18px 12px;border-top:0;border-right:1px solid var(--linie);background:var(--flaeche2);overflow:hidden}
  .leiste .leiste-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 14px 10px;min-height:44px}
  .leiste .leiste-fuss{display:flex;flex-direction:column;gap:4px;margin-top:auto}
  .leiste a.nav,.leiste .leiste-fuss .nav{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;padding:0 12px;border-radius:var(--r-klein);font-size:.95rem;color:var(--leise)}
  .leiste a.nav[aria-current="page"]{background:var(--akzent-hell);color:var(--akzent)}
  .einklappen{width:36px;height:36px;border-radius:var(--r-klein);border:1px solid var(--linie);background:var(--karte);color:var(--leise);display:grid;place-items:center;cursor:pointer;flex:none}
  .einklappen svg{transition:transform 200ms var(--ease-out)}
  .wer{display:flex;align-items:center;gap:10px;padding:8px 6px;font-size:.85rem;color:var(--leise);min-width:0}
  .wer b{display:block;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .leiste-fuss .nav{display:flex;align-items:center;border:0;background:none;cursor:pointer;width:100%;font:inherit;font-weight:600}
  /* eingeklappt: nur Symbole */
  .app.zu .leiste{padding:18px 10px}
  .app.zu .leiste .marke,.app.zu .leiste .nav span,.app.zu .wer>div{display:none}
  .app.zu .leiste .leiste-kopf{justify-content:center;padding:0 0 14px}
  .app.zu .leiste a.nav,.app.zu .leiste-fuss .nav{justify-content:center;padding:0}
  .app.zu .wer{justify-content:center;padding:8px 0}
  .app.zu .einklappen svg{transform:rotate(180deg)}
  main{padding:24px 28px 32px}
}
@media (max-width:899px){ .leiste-fuss .nav{display:none} }

/* ---------------- Bausteine ---------------- */
.zwei{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@container (min-width:860px){
  .zwei{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0;border:1px solid var(--linie);border-radius:var(--r)}
  .zwei>.spalte{padding:24px 26px}
  .zwei>.spalte+.spalte{border-left:1px solid var(--linie);background:var(--flaeche2);border-radius:0 var(--r) var(--r) 0}
  .breit-raster{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
.spalte{min-width:0;container-type:inline-size}
.stapel>*+*{margin-top:18px}
.abschnitt{margin-top:22px}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.abschnitt-kopf h2{white-space:nowrap}
.abschnitt-kopf small{color:var(--leise);font-size:.85rem;text-align:right}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:18px}
.titel-seite{font-size:1.6rem;margin:4px 0 14px}

.etikett{color:var(--leise);font-size:.85rem}
.grosszahl{font:650 2.4rem/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:2px 0 6px;overflow-wrap:anywhere}
@container (min-width:480px){ .grosszahl{font-size:2.9rem} }
.pille{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-rund);font:600 .82rem var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.pille.plus{background:var(--plus-hell);color:var(--plus)}
.pille.minus{background:var(--minus-hell);color:var(--minus)}
.pille.neutral{background:var(--flaeche);color:var(--leise)}
.chip{display:inline-block;padding:2px 9px;border-radius:var(--r-rund);background:var(--flaeche);color:var(--leise);font-size:.75rem;font-weight:600;white-space:nowrap}
.chip.akzent{background:var(--akzent-hell);color:var(--akzent)}
.chip.plus{background:var(--plus-hell);color:var(--plus)} .chip.minus{background:var(--minus-hell);color:var(--minus)}

.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
@container (min-width:560px){ .kacheln{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kachel{background:var(--flaeche);border-radius:var(--r-klein);padding:10px 12px;min-width:0}
.kachel small{display:block;color:var(--leise);font-size:.75rem}
.kachel b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pillen{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px;align-items:center}
.pillen button{border:0;background:none;color:var(--leise);font:600 .85rem var(--sans);padding:6px 12px;border-radius:var(--r-rund);cursor:pointer;min-height:34px}
.pillen button[aria-pressed="true"]{background:var(--text);color:var(--grund)}
.pillen .legende-dax{margin-left:auto;font-size:.8rem;color:var(--d2);font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legende-dax .strich{display:inline-block;width:20px;border-top:2px dashed currentColor}

.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--flaeche);border-radius:12px;padding:4px}
.segment button{border:0;background:none;padding:9px 6px;border-radius:9px;font:700 .92rem var(--sans);color:var(--leise);cursor:pointer;min-height:40px}
.segment button[aria-pressed="true"]{background:var(--karte);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
:root[data-thema="dunkel"] .segment button[aria-pressed="true"]{background:#30353c;box-shadow:none}
.segment button:disabled{opacity:.4;cursor:not-allowed}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:12px;border:0;background:var(--akzent);color:var(--knopf-text);font:700 1rem var(--sans);cursor:pointer;text-decoration:none}
.knopf.voll{display:flex;width:100%}
.knopf.zweit{background:var(--flaeche);color:var(--text)}
.knopf.leise{background:none;border:1px solid var(--linie);color:var(--text);font-weight:600;min-height:38px;padding:6px 12px;font-size:.88rem}
.knopf:disabled{opacity:.5;cursor:not-allowed}
.stern{width:42px;height:42px;border-radius:50%;border:1px solid var(--linie);background:var(--karte);color:var(--leise);display:grid;place-items:center;cursor:pointer;flex:none}
.stern[aria-pressed="true"]{color:var(--hinweis);border-color:var(--hinweis)}
.stern[aria-pressed="true"] svg{fill:currentColor}

.kasten{border-radius:12px;padding:12px 14px;margin:0 0 14px;background:var(--flaeche);font-size:.92rem}
.kasten>b:first-child{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.kasten.info{background:var(--info-hell)} .kasten.info>b:first-child{color:var(--info)}
.kasten.richtig{background:var(--plus-hell)} .kasten.richtig>b:first-child{color:var(--plus)}
.kasten.falsch{background:var(--minus-hell)} .kasten.falsch>b:first-child{color:var(--minus)}
.kasten.hinweis{background:var(--hinweis-hell)} .kasten.hinweis>b:first-child{color:var(--hinweis)}
.kasten.aufgabe{background:var(--flaeche)}
.kasten:last-child{margin-bottom:0}

/* Listen mit „Logo“ */
.liste{list-style:none;margin:0;padding:0}
.liste>li{border-top:1px solid var(--linie)}
.liste>li:first-child{border-top:0}
.eintrag{display:flex;align-items:center;gap:12px;padding:11px 2px;color:inherit;text-decoration:none;min-height:60px;width:100%;background:none;border:0;text-align:left}
.logo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 .82rem var(--sans);flex:none;letter-spacing:.02em}
:root[data-thema="dunkel"] .logo{color:#0f1113}
.eintrag .mitte{flex:1;min-width:0}
.eintrag .mitte b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eintrag .mitte small{display:block;color:var(--leise);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eintrag .mitte small.umbruch{white-space:normal}
.eintrag .rechts{text-align:right;font-variant-numeric:tabular-nums;flex:none}
.eintrag .rechts b{display:block;font-size:.98rem}
.eintrag .rechts small{display:block;font-size:.8rem}
.eintrag .x{border:0;background:none;color:var(--leise);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;flex:none}
.eintrag.ich{background:var(--akzent-hell);border-radius:var(--r-klein);padding-left:8px;padding-right:8px}
.platz{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--flaeche);font:700 .95rem var(--sans);flex:none}
.platz.p1{background:#e9c766;color:#3b2e05} .platz.p2{background:#cfd4da;color:#2a2f35} .platz.p3{background:#d9a27a;color:#3a1f0c}

.raster-gruppen{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@container (min-width:640px){ .raster-gruppen{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Suche */
.suchfeld{display:flex;align-items:center;gap:10px;background:var(--flaeche);border-radius:14px;padding:0 14px;min-height:52px}
.suchfeld input{flex:1;border:0;background:none;font-size:16px;min-height:50px;outline:none;min-width:0}
.suchfeld:focus-within{outline:3px solid var(--akzent);outline-offset:1px}

/* Formulare */
.feld{display:block;margin:12px 0}
.feld>span{display:block;font-size:.85rem;color:var(--leise);margin-bottom:4px}
.feld input,.feld select{width:100%}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select{font-size:16px;min-height:46px;padding:8px 12px;border:1px solid var(--linie);border-radius:12px;background:var(--karte)}
.ofeld{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:4px 6px 4px 14px;margin-bottom:10px;min-height:52px}
.ofeld>span{color:var(--leise);font-size:.92rem;white-space:nowrap}
.ofeld input,.ofeld select{border:0;background:none;text-align:right;font-weight:700;min-height:44px;padding:4px 8px;max-width:60%;font-variant-numeric:tabular-nums}
.ofeld select{text-align-last:right}
.mit-einheit{display:inline-flex;align-items:center;gap:8px;flex:none}
.ofeld:has(.mit-einheit) input{flex:1 1 0;min-width:0;width:0;max-width:none}
.einheit{display:inline-flex;background:var(--flaeche);border-radius:8px;padding:2px}
.einheit button{border:0;background:none;color:var(--leise);font:inherit;font-size:.8rem;font-weight:600;padding:3px 9px;border-radius:6px;cursor:pointer;min-height:28px}
.einheit button[aria-pressed="true"]{background:var(--karte);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.summe{display:flex;justify-content:space-between;padding:8px 2px;font-size:.92rem;color:var(--leise);border-top:1px dashed var(--linie);font-variant-numeric:tabular-nums}
.summe b{color:var(--text)}
.summe.gesamt{font-size:1.02rem;color:var(--text)}
.summe.danach{border-top:0;padding-top:0}
.summe.zu-wenig,.summe.zu-wenig b{color:var(--minus)}
.vor-abstand:not(:empty){margin-bottom:14px}
.erkl{font-size:.82rem;color:var(--leise);margin:-2px 2px 12px}

/* Diagramme */
.diagramm{position:relative;width:100%;min-height:10rem;margin-top:12px}
.diagramm.laedt{opacity:.4;transition:opacity .15s}
.diagramm svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.diagramm .achse{font:11px var(--sans);fill:var(--leise)}
.diagramm .gitter{stroke:var(--linie);stroke-width:1}
.diagramm .beschriftung{font:700 12px var(--sans)}
.diagramm .tipp{position:absolute;pointer-events:none;background:var(--karte);border:1px solid var(--linie);border-radius:8px;padding:4px 8px;font-size:.78rem;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.1);font-variant-numeric:tabular-nums}
.balken{display:flex;height:10px;border-radius:var(--r-rund);overflow:hidden;margin-top:6px}
.balken span{display:block;height:100%}
.legende{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--leise)}
.legende i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}

/* Aktienkopf */
.aktienkopf{display:flex;align-items:center;gap:14px}
.aktienkopf .logo{width:52px;height:52px;font-size:1rem}
.aktienkopf h1{font-size:1.3rem}
.aktienkopf small{color:var(--leise);font-size:.82rem}

/* Kauf-/Verkaufsleiste auf dem Handy */
.aktionsleiste{position:fixed;left:0;right:0;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));z-index:25;display:flex;gap:10px;padding:10px 16px;background:var(--grund);border-top:1px solid var(--linie)}
.aktionsleiste .knopf{flex:1}

@media (min-width:900px){ .aktionsleiste{display:none} }
.platz-fuer-aktionsleiste{height:70px}
@media (min-width:900px){ .platz-fuer-aktionsleiste{display:none} }

/* Anmeldung */
.anmelden{max-width:960px;margin:0 auto}
.anmelden .held{padding:12px 0 22px}
.anmelden .held h1{font:400 2rem/1.15 var(--serif);margin:6px 0 8px}
.kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);font-weight:700}
.zwei-karten{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@container (min-width:700px){ .zwei-karten{grid-template-columns:1fr 1fr} }
.code-eingabe{text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono)}

ul.regeln{padding-left:1.1rem;margin:10px 0 0} ul.regeln li{margin:6px 0}
@media print{ .leiste,.aktionsleiste,.kopfzeile{display:none !important} }

/* Schulen */
.schullogo{object-fit:contain;border-radius:6px;background:#fff;flex:none;vertical-align:middle}
.mit-logo{display:flex;align-items:center;gap:6px}
h1.mit-logo{gap:12px}
.segment button{font-size:clamp(.78rem,2.6vw,.92rem);padding-left:2px;padding-right:2px}

/* Erklärungen hinter ⓘ */
span.info{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}   /* nur die ⓘ-Erklärungen, nicht .kasten.info */
.info-knopf{width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;background:none;color:var(--leise);font:700 11px/1 var(--serif);font-style:italic;display:grid;place-items:center;cursor:pointer;padding:0}
.info-knopf::before{content:"";position:absolute;inset:-12px}   /* größere Tippfläche */
.info-knopf[aria-expanded="true"]{background:var(--text);color:var(--grund);border-color:var(--text)}
.info-text{position:absolute;top:calc(100% + 8px);left:-8px;z-index:40;width:max-content;max-width:min(17rem,calc(100vw - 32px));
  background:var(--text);color:var(--grund);font:400 .82rem/1.45 var(--sans);padding:9px 11px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18);white-space:normal;text-align:left}
.kachel{position:relative}
.kachel small{display:flex;align-items:center;gap:2px}
.pillen .info-knopf{border:1.5px solid currentColor;min-height:0;padding:0;border-radius:50%;width:18px;height:18px;font:700 11px/1 var(--serif);font-style:italic;color:var(--leise)}
.pillen .info-knopf[aria-expanded="true"]{background:var(--text);color:var(--grund);border-color:var(--text)}
.zwei>.spalte:first-child{position:relative;z-index:2}   /* Erklärungen liegen über der rechten Spalte */

/* Börsen: geöffnet / geschlossen */
.boersen-chip{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.punkt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--leise);opacity:.55;flex:none}
.offen>.punkt{background:var(--plus);opacity:1}
.boersen-status{display:inline-flex;align-items:center;gap:6px;color:var(--leise)}
.boersen-status.offen{color:var(--plus)}
.eintrag .mitte small.wartet{color:var(--leise)}
.info .boersen-chip[aria-expanded="true"]{background:var(--text);color:var(--grund)}

/* Nachhaltigkeit */
.gruen-zeichen{color:var(--plus);font-weight:600;white-space:nowrap}
.gruen-zeichen.nein{color:var(--leise);font-weight:400}

/* Bereichsauswahl im Diagramm */
.diagramm svg{user-select:none;-webkit-user-select:none}
.diagramm .auswahl-band{fill:var(--akzent);fill-opacity:.12}
.auswahl-info{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;padding:6px 6px 6px 12px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche);font-size:.88rem;font-variant-numeric:tabular-nums}
.auswahl-info>span:first-child{color:var(--leise)}
.auswahl-weg{margin-left:auto;border:0;background:none;color:var(--leise);font-size:1.2rem;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer}

.eintrag.klickbar{cursor:pointer}
.eintrag.klickbar:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.textknopf{border:0;background:none;color:var(--akzent);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:4px 2px}
/* Pfeil zeigt: Zeile führt zur Aktie */
.eintrag.klickbar::after{content:'›';flex:none;color:var(--leise);font-size:1.4rem;line-height:1;margin-left:6px}
/* Depot: Streifen in der Farbe der Branche (wie in der Streuung) */
.eintrag.mit-gruppe{border-left:4px solid transparent;padding-left:10px;border-radius:2px}

/* ================================================================
   Gefühl einer App (Skills emil-design-eng, mobile-native, apple-design)
   und Jakob's Law: gewohnte Muster aus bekannten Apps
   ================================================================ */
html{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}   /* eigenes „Runterziehen = neu laden“ */
button,a,[role="button"],summary,label{touch-action:manipulation}             /* keine 300-ms-Verzögerung */
button,[role="button"],.knopf,.segment,.pillen,.leiste,.einheit,.chip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Druck-Feedback sofort beim Antippen, nicht erst beim Loslassen */
.knopf,.segment button,.pillen button,.stern,.einheit button,.textknopf,.einklappen,.auswahl-weg,.eintrag .x{transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease}
.knopf:active:not(:disabled),.segment button:active:not(:disabled),.pillen button:active,.stern:active,.einheit button:active,.textknopf:active,.einklappen:active,.auswahl-weg:active,.eintrag .x:active{transform:scale(.97)}
a.eintrag,.eintrag.klickbar{transition:background-color 120ms ease}
a.eintrag:active,.eintrag.klickbar:active{background:var(--flaeche);border-radius:var(--r-klein)}

/* Hover nur mit Maus – auf Touch-Geräten bleibt er sonst nach dem Tippen hängen */
@media (hover:hover) and (pointer:fine){
  a.eintrag:hover,.eintrag.klickbar:hover{background:var(--flaeche);border-radius:var(--r-klein)}
  .knopf:hover:not(:disabled){filter:brightness(1.06)}
  .eintrag .x:hover{background:var(--flaeche)}
  .auswahl-weg:hover{background:var(--linie)}
}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .leiste a.nav:hover,.leiste .leiste-fuss .nav:hover{background:var(--flaeche);color:var(--text)}
  .leiste a.nav[aria-current="page"]:hover{background:var(--akzent-hell);color:var(--akzent)}
}

/* Handy: Leiste unten wie in bekannten Apps – Start links, Konto rechts, Hauptaktion in der Mitte */
@media (max-width:899px){
  .leiste,.kopfzeile,.aktionsleiste{background:var(--grund);background:color-mix(in srgb,var(--grund) 95%,transparent);
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
  .leiste a.nav{position:relative;transition:color 160ms ease}
  .leiste a.nav>svg.ic{margin:5px 0;transition:transform 160ms var(--ease-out)}   /* gleiche Höhe wie die Mitte: Beschriftungen auf einer Linie */
  .leiste a.nav:active>svg.ic{transform:scale(.88)}
  .leiste a.nav[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:0 0 3px 3px;background:var(--akzent)}
  .leiste a.nav-mitte{color:var(--text)}
  .leiste a.nav-mitte .mitte-knopf{display:grid;place-items:center;width:48px;height:32px;border-radius:12px;background:var(--akzent);color:var(--knopf-text);transition:transform 160ms var(--ease-out),box-shadow 160ms ease}
  .leiste a.nav-mitte:active .mitte-knopf{transform:scale(.94)}
  .leiste a.nav-mitte[aria-current="page"]::before{display:none}
  .leiste a.nav-mitte[aria-current="page"] .mitte-knopf{box-shadow:0 0 0 3px var(--akzent-hell)}
  #avatar-klein{display:none !important}   /* Konto steht rechts in der Leiste */
}
@media (min-width:900px){ .leiste .mitte-knopf{display:contents} }

/* Runterziehen = neu laden */
.ptr{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;margin-left:-19px;width:38px;height:38px;border-radius:50%;
  background:var(--karte);color:var(--leise);box-shadow:0 4px 14px rgba(0,0,0,.16);display:grid;place-items:center;z-index:40;
  opacity:0;transform:translateY(-56px);pointer-events:none;will-change:transform}
.ptr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ptr.bereit{color:var(--akzent)}
.ptr.laeuft svg{animation:ptr-dreh 650ms linear infinite}   /* schneller Kreisel wirkt schneller */
@keyframes ptr-dreh{to{transform:rotate(360deg)}}
@media (min-width:900px){ .ptr{display:none} }

/* Erklärungen erscheinen aus ihrem Auslöser heraus, kurz und ohne Verzögerung */
.info-text{transform-origin:14px 0;transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
@starting-style{ .info-text{opacity:0;transform:scale(.97) translateY(-2px)} }
.auswahl-info{transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
@starting-style{ .auswahl-info{opacity:0;transform:translateY(-3px)} }

/* Weniger Bewegung gewünscht: keine Verschiebungen, Überblendungen bleiben */
@media (prefers-reduced-motion:reduce){
  .knopf:active:not(:disabled),.segment button:active:not(:disabled),.pillen button:active,.stern:active,.einheit button:active,.textknopf:active,.einklappen:active,.auswahl-weg:active,.eintrag .x:active,
  .leiste a.nav:active>svg.ic,.leiste a.nav-mitte:active .mitte-knopf{transform:none}
  @starting-style{ .info-text,.auswahl-info{transform:none} }
}

/* Kachel mit Zusatzzeile (z. B. Vergleich mit dem DAX) */
.kachel .kachel-unter{display:block;font-size:.72rem;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
/* Welt-ETF als Vergleichszeile in der Rangliste */
.eintrag.geist{opacity:.9}
.eintrag.geist .platz{background:none;border:1.5px dashed var(--leise);color:var(--leise)}
/* Begriffe */
dl.begriffe{margin:0;display:grid;gap:10px}
dl.begriffe dt{font-weight:700;font-size:.92rem}
dl.begriffe dd{margin:2px 0 0;color:var(--leise);font-size:.88rem}