/* AVD-Visualisierung 'Vier Wege' - Gestaltung.
   Quelle: vertriebs.tools/vier-wege/, Plattform-Chrome (Login, Feedback,
   Sprachwahl) entfernt, Schriften auf die lokalen Dateien der Website gelegt. */
/* Investmentadler-Kopfleiste + lokal gehostete Schriften (DM Sans, Tinos) für rechner.html */
  @font-face{
    font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url('/assets/fonts/dmsans-latin-normal.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url('/assets/fonts/dmsans-latin-ext-normal.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face{
    font-family:'Tinos'; font-style:normal; font-weight:400; font-display:swap;
    src:url('/assets/fonts/tinos-latin-normal.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Tinos'; font-style:normal; font-weight:400; font-display:swap;
    src:url('/assets/fonts/tinos-latin-ext-normal.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face{
    font-family:'Tinos'; font-style:normal; font-weight:700; font-display:swap;
    src:url('/assets/fonts/tinos-latin-bold.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Tinos'; font-style:normal; font-weight:700; font-display:swap;
    src:url('/assets/fonts/tinos-latin-ext-bold.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }

  /* ---- Schlanke Investmentadler-Kopfleiste ----
     Bewusst eigener, knapper Namensraum (ia-*), damit nichts mit den
     Klassen des Rechners darunter kollidiert (z. B. .wrap, .card). */
  .ia-bar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px clamp(16px,3vw,32px);
    background:#0c1d2b; color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  .ia-bar__brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
  .ia-bar__brand img{ height:22px; width:auto; display:block; filter:brightness(0) invert(1); }
  .ia-bar__brand span{ font-size:0.95rem; font-weight:600; letter-spacing:0.01em; }
  .ia-bar__back{
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.86rem; font-weight:500; color:rgba(255,255,255,0.75);
    text-decoration:none; border:1px solid rgba(255,255,255,0.22); border-radius:100px;
    padding:7px 14px; transition:border-color .2s ease, color .2s ease;
  }
  .ia-bar__back:hover{ color:#fff; border-color:rgba(255,255,255,0.5); }
  @media (max-width:480px){ .ia-bar__brand span{ display:none; } }

/* tecis-CI · gemeinsame Basis für alle Vertriebstools
Farben und Schriften gem. Corporate Design Manual V1.0.
Schriften lokal gehostet (kein Google-CDN -> DSGVO-sauber, offlinefähig). */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/gemeinsam/schriften/DMSans-Regular.woff2') format('woff2');}
:root{--navy:#00325B; --sky:#009EE3; --lime:#D3D800; --sand:#CBCDB9; --navySoft:#0A4372; --ink:#1c2b38; --bg:#F3F5F4;}
/* Vertriebstools · Designsystem
Eine Quelle für Farben, Abstände und Bausteine. Jede Seite lädt nur noch
diese Datei plus ihre wenigen Besonderheiten – vorher hatte jede Seite
ihren eigenen CSS-Block mit leicht abweichenden Werten. */

/* ---------- Marken ---------- */
:root{/* tecis-CI (Corporate Design Manual V1.0) */ --navy:#00325B; --sky:#009EE3; --lime:#D3D800; --sand:#CBCDB9; --navy-soft:#0A4372; /* Abgeleitete Töne */ --ink:#1c2b38; /* Fließtext */ --mut:#5f6d7a; /* Sekundärtext, WCAG-AA auf Weiß */ --mut2:#8a959f; /* Tertiärtext */ --bg:#F4F6F5; /* Seitengrund */ --flaeche:#F6F8F7; /* Fläche in Karten */ --linie:#E4E8E4; /* Rahmen und Trenner */ --linie-stark:#DCE0DA; /* Rahmen von Eingaben */ --weiss:#fff; /* Signalfarben für Datenreihen */ --violett:#7a5cff; --lime-dunkel:#AEB400; --gruen:#5f7a00; --orange:#E8871E; --sand-dunkel:#A9AC93; /* Maße */ --radius:14px; --radius-klein:9px; --radius-gross:16px; --schatten:0 1px 2px rgba(0,50,91,.05),0 8px 26px rgba(0,50,91,.06); --schrift:'DM Sans',system-ui,-apple-system,sans-serif; --schrift-kopf:'Tinos',Georgia,serif; --breite:1440px;}
/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;}
html{scrollbar-width:thin;scrollbar-color:#D4D7CE transparent;}
html,body{margin:0;background:var(--bg);}
body{font-family:var(--schrift);color:var(--ink);}
button{font:inherit;cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px;}
/* ---------- Karten ---------- */
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);}
.karte--gross{border-radius:var(--radius-gross);box-shadow:var(--schatten);}
/* ---------- Knöpfe: eine Höhe, eine Formensprache ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 17px; border:1px solid transparent;border-radius:var(--radius-klein);font-size:13px;font-weight:600; text-decoration:none;transition:background .15s,border-color .15s,color .15s;}
.knopf--haupt{background:var(--navy);color:#fff;}
.knopf--haupt:hover:not(:disabled){background:var(--sky);}
.knopf--haupt:disabled{background:#C6CCC9;cursor:not-allowed;}
.knopf--rand{background:var(--weiss);border-color:var(--linie-stark);color:var(--navy);}
.knopf--rand:hover{border-color:var(--sky);background:#F6F9FB;}
.knopf--leise{background:transparent;color:var(--mut);height:30px;padding:0 10px;font-size:11.5px;}
.knopf--leise:hover{color:var(--navy);background:#ECEFED;}
/* Auswahl: Chips und Segmente – gleiche Höhen */
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--linie-stark); background:var(--weiss);color:var(--navy);font-size:12px;font-weight:600;border-radius:8px;transition:all .15s;}
.chip:hover{border-color:var(--sky);}
.chip.aktiv{background:var(--navy);color:#fff;border-color:var(--navy);}
.segment{display:flex;gap:6px;}
.segment button{flex:1;height:36px;border:1px solid var(--linie-stark);background:var(--weiss);color:var(--navy); font-size:12.5px;font-weight:600;border-radius:var(--radius-klein);transition:all .15s;}
.segment button:hover{border-color:var(--sky);}
.segment button.aktiv{background:var(--navy);color:#fff;border-color:var(--navy);}
.schalter{display:flex;background:#ECEFED;border-radius:var(--radius-klein);padding:3px;gap:3px;}
.schalter button{flex:1;height:30px;border:none;background:transparent;font-size:12px;font-weight:600; color:var(--mut);border-radius:7px;transition:all .15s;}
.schalter button.aktiv{background:var(--weiss);color:var(--navy);box-shadow:0 1px 3px rgba(0,50,91,.14);}
/* ---------- Eingaben ---------- */
.feld{border:1px solid var(--linie-stark);border-radius:8px;background:var(--weiss);font:inherit;font-size:13px; color:var(--navy);padding:8px 11px;outline:none;transition:border-color .15s;}
.feld:focus{border-color:var(--sky);}
.feld::placeholder{color:var(--mut2);}
.feld--zahl{width:118px;text-align:right;font-size:15px;font-weight:700;-moz-appearance:textfield;padding:5px 9px;}
.feld--zahl::-webkit-outer-spin-button,.feld--zahl::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Regler: schlanke Bahn, präziser Knopf */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;--p:30%;}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px; background:linear-gradient(90deg,var(--sky) var(--p),#E1E4DE var(--p));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%; background:var(--navy);border:3px solid #fff;margin-top:-7px;box-shadow:0 1px 5px rgba(0,50,91,.4);transition:transform .1s;}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.18);}
input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:#E1E4DE;}
input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--sky);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%; background:var(--navy);box-shadow:0 1px 5px rgba(0,50,91,.4);}
/* ---------- Typografie ---------- */
.titel-gross{font-family:var(--schrift-kopf);color:var(--navy);margin:0;line-height:1.05;}
.vorzeile{font-size:11.5px;font-weight:700;color:var(--sky);letter-spacing:1.2px;text-transform:uppercase;}
.klein{font-size:12.5px;color:var(--mut);}
.teiler{color:#D4D8D4;}
.app{max-width:1340px;margin:0 auto;padding:clamp(10px,1.6vw,14px) clamp(14px,2vw,24px) 0; display:flex;flex-direction:column;gap:10px;}
/* Titel sitzt auf derselben Kante wie „Ihre Angaben“ im Kasten darunter */
header.titel{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-left:15px;}
@media (max-width:960px){
  header.titel{padding-left:0;}
}
header.titel h1{font-family:'Tinos',serif;font-size:clamp(21px,2.4vw,29px);color:var(--navy);margin:1px 0 0;line-height:1.05;}
.vorzeile{font-size:11.5px;font-weight:700;color:var(--sky);letter-spacing:1.2px;text-transform:uppercase;}
.cols{display:grid;grid-template-columns:minmax(240px,272px) minmax(0,1fr);gap:14px;align-items:stretch;}
@media (min-width:961px){
  /* Kopf, Titel, Inhalt und Fußzeile teilen sich die Bildschirmhöhe. Frueher
     stand hier eine feste Hoehe plus overflow:hidden – passte der Inhalt
     nicht (schmales Fenster, umgebrochene Schrittleiste), wurde er einfach
     abgeschnitten. Mit min-height fuellt die Ansicht weiterhin genau den
     Bildschirm, darf im Notfall aber wachsen und scrollen. */
html,body{height:100%;}
  .cols{min-height:calc(100vh - 222px);}
  /* Der Kasten scrollt notfalls in sich selbst. Ohne Deckel wuerde seine
     Wunschhoehe die Rasterzeile aufblasen und die ganze Seite scrollen. */
  .panel{overflow-y:auto;min-height:0;max-height:calc(100vh - 222px);}
  .buehne{min-height:0;}
}
@media (max-width:960px){
  .cols{grid-template-columns:1fr;}
}
.panel input[type=range]{height:22px;}
.panel{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:14px 15px 12px; display:flex;flex-direction:column; scrollbar-width:thin;scrollbar-color:#D4D7CE transparent;}
.panel h2{font-size:12px;font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:.3px;text-transform:uppercase;}
.felder{flex:1;display:flex;flex-direction:column;}
.feldgruppe{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:62px;}
.feldgruppe .zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:1px;min-height:22px;}
.feldgruppe .bez{font-size:12.5px;font-weight:600;color:var(--ink);}
.feldgruppe .wert{font-size:15px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;}
.feldgruppe .wert small{font-size:11.5px;color:var(--sky);margin-left:2px;}
.feldgruppe .hinweis{font-size:10.5px;color:var(--mut);margin-top:3px;line-height:1.3;min-height:0;}
.feldgruppe .hinweis:empty{display:none;}
.nurstufe4{opacity:.4;transition:opacity .3s;}
.nurstufe4.aktiv{opacity:1;}
/* Bühne */
.buehne{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0;}
.steuerung{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--linie); border-radius:14px;padding:8px 13px;}
.punkte{display:flex;gap:6px;margin-right:auto;flex-wrap:wrap;}
.punkt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie);background:#fff;border-radius:999px; padding:5px 13px 5px 5px;font-size:12px;font-weight:600;color:var(--mut2);transition:all .2s;}
.punkt .zahl{width:22px;height:22px;border-radius:50%;background:#ECEFED;color:var(--mut);display:flex; align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.punkt.erledigt{color:var(--mut);}
.punkt.erledigt .zahl{background:#D6DAD5;color:#fff;}
.punkt.aktiv{border-color:var(--navy);background:var(--navy);color:#fff;}
.punkt.aktiv .zahl{background:#fff;color:var(--navy);}
/* Graph */
.graphkarte{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:12px 18px 6px; flex:1;display:flex;flex-direction:column;min-height:220px;}
.graphkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:0;}
.graphkopf h3{font-size:15px;color:var(--navy);margin:0 0 2px;}
.graphkopf .unter{font-size:12px;color:var(--mut);max-width:560px;line-height:1.5;}
.grossezahl{text-align:right;}
.grossezahl .zahl{font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.05;}
.grossezahl .zusatz{font-size:12px;color:var(--mut);font-weight:600;}
.graphflaeche{flex:1;min-height:180px;position:relative;margin-top:4px;}
/* Der Graph haengt frei in der Flaeche. Laege er im Fluss, gaebe das
   Seitenverhaeltnis der viewBox dem Kasten eine eigene Wunschhoehe – die
   Flaeche koennte dann nie wieder kleiner werden als die letzte Zeichnung. */
.graphflaeche .graph-voll{position:absolute;inset:0;}
.graphflaeche svg{width:100%;height:100%;display:block;}
.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--mut);margin-top:6px;min-height:18px;}
.legende span{display:inline-flex;align-items:center;gap:6px;}
.legende i{width:11px;height:3px;border-radius:2px;display:inline-block;}
.abschluss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch;}
@media (max-width:820px){
  .abschluss{grid-template-columns:1fr;}
}
.aussage{background:#F6F8F7;border:1px solid var(--linie);border-radius:12px;padding:10px 16px;font-size:12.5px; color:var(--ink);line-height:1.45;display:flex;align-items:center;min-height:56px;min-width:0;container-type:inline-size;}
/* Der Inhalt muss immer GENAU EIN Flex-Element sein. Sonst wird in den Stufen 1–4
jedes <b> zu einem eigenen Element und der Satz zerfällt in Blöcke. */
.aussage .satz{width:100%;}
/* Vergleichsansicht: Kennzahlen nebeneinander statt Fließtext, damit nichts unschön umbricht */
.kennzahlen{display:flex;align-items:stretch;gap:0;width:100%;min-width:0;}
.kennzahlen .kz{flex:1;padding:0 16px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.kennzahlen .kz:first-child{padding-left:0;flex-grow:1.3;} /* laengste Beschriftung; nur
   die Wachstumsrate, damit die Breitenvorgabe des Umbruchs erhalten bleibt */
.kennzahlen .kz+.kz{border-left:1px solid rgba(255,255,255,.18);}
.kennzahlen .kz .wert{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap;}
.kennzahlen .kz .bez{font-size:10.5px;margin-top:2px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Einzeilig nur, wenn auch die Beschriftungen ungekuerzt passen (~175px je Feld) */
@container (max-width:700px){
  .kennzahlen{flex-wrap:wrap;}
  .kennzahlen .kz{flex:1 1 46%;padding:5px 10px;}
  .kennzahlen .kz+.kz{border-left:none;}
}
/* Rueckfallebene fuer Browser ohne Container-Abfragen */
@media (max-width:900px){
  .kennzahlen{flex-wrap:wrap;}
  .kennzahlen .kz{flex:1 1 46%;padding:5px 10px;}
  .kennzahlen .kz+.kz{border-left:none;}
}
.ausgabe{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:9px 14px;display:flex; align-items:center;gap:9px;flex-wrap:wrap;}
.ausgabe input{width:132px;}
.ausgabe .knopf{white-space:nowrap;}
.aussage b{color:var(--navy);}
.aussage .gruen{color:var(--gruen);font-weight:700;}
.aussage.hervor{background:linear-gradient(120deg,var(--navy),var(--navy-soft));border-color:transparent;color:#dbe6f0;}
.aussage.hervor b{color:#fff;}
.aussage.hervor .gruen{color:var(--lime);}
/* ---------- PDF: eigenes A4-Blatt statt Bildschirmabzug ---------- */
#druck{display:none;}
@media print{
  @page{size:A4 portrait;margin:14mm;}
  html,body{background:#fff !important;height:auto !important;overflow:visible !important;}
  #druck{display:block;}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
}
#druck{font-size:12px;color:var(--ink);line-height:1.5;}
.dr-kopf{display:flex;justify-content:space-between;align-items:flex-start; border-bottom:2.5px solid var(--navy);padding-bottom:10px;margin-bottom:16px;}
.dr-kopf .ey{font-size:10.5px;font-weight:700;color:var(--sky);letter-spacing:1px;text-transform:uppercase;}
.dr-kopf h1{font-family:'Tinos',Georgia,serif;font-size:25px;color:var(--navy);margin:2px 0 3px;}
.dr-meta{font-size:11px;color:var(--mut);}
.dr-marke{font-family:'Tinos',Georgia,serif;font-size:17px;color:var(--navy);}
.dr-marke b{font-weight:700;}
.dr-graph{margin-bottom:16px;}
.dr-graph h3,.dr-annahmen h3{font-size:12px;font-weight:700;color:var(--navy);margin:0 0 6px;}
.dr-tabelle{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px;}
.dr-tabelle th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut); border-bottom:1px solid var(--linie);padding:5px 4px;}
.dr-tabelle td{padding:7px 4px;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums;}
.dr-tabelle td:last-child,.dr-tabelle th:last-child{text-align:right;font-weight:700;color:var(--navy);}
.dr-tabelle tr.hervor td{background:#F4F6F5;font-weight:700;}
.dr-tabelle .punkt{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;}
.dr-annahmen .gitter{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px 14px;font-size:10.5px;}
.dr-annahmen .a b{display:block;color:var(--navy);font-size:11.5px;}
.dr-annahmen .a span{color:var(--mut);}
.dr-fazit{background:#F4F6F5;border-radius:9px;padding:12px 15px;margin-bottom:16px; font-size:12.5px;line-height:1.55;}
.dr-fazit b{color:var(--navy);}
.dr-recht{font-size:9px;color:#6d7a85;line-height:1.45;border-top:1px solid var(--linie);padding-top:8px;margin-bottom:10px;}
.dr-fuss{border-top:1px solid var(--linie);padding-top:6px;font-size:9px;color:var(--mut2); display:flex;justify-content:space-between;gap:8px;}
/* ---- Ersatz fuer style="..."-Attribute (Content-Security-Policy) ----------
   Die Website erlaubt kein 'unsafe-inline'. Die Legendenfarben wurden im
   Original per style-Attribut gesetzt und waeren hier wirkungslos. */
  .sw--sparkonto{background:#A9AC93;}
  .sw--etf{background:#00325B;}
  .sw--avd{background:#009EE3;}
  .sw--wowi{background:#AEB400;}
  .bisalter{font-weight:400;color:var(--mut2);}
  .graph-voll{height:100%;}

  /* Kopfleiste: zwei Links nebeneinander */
  .ia-bar__links{display:inline-flex;gap:8px;align-items:center;}
  .ctaline{font-size:13px;color:#7a8794;text-align:center;margin:10px auto 22px;max-width:1340px;}
  .ctaline a{color:var(--sky);font-weight:600;text-decoration:none;}

  /* Kleingedrucktes wie beim Rechner: klein, aber mit ausreichendem Kontrast. */
  .disc{font-size:9.5px;line-height:1.5;color:var(--mut);max-width:1340px;
        margin:14px auto 4px;padding:0 clamp(14px,2vw,24px);text-align:justify;hyphens:auto;}
  @media print{ .disc{font-size:9px;color:#3a3a3a;text-align:left;} }

  /* Wertefenster zum Ablesen im Graph */
  .graphflaeche{position:relative;touch-action:none;cursor:crosshair;}
  .vistip{
    position:absolute;top:8px;left:0;pointer-events:none;opacity:0;
    transition:opacity .12s ease;background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:8px 10px;box-shadow:0 6px 22px rgba(0,50,91,.16);
    font-size:11.5px;min-width:168px;z-index:5;
  }
  .vistip.sichtbar{opacity:1;}
  .vt-kopf{font-weight:700;color:var(--navy);margin-bottom:5px;font-size:11px;
           letter-spacing:.3px;text-transform:uppercase;}
  .vt-zeile{display:grid;grid-template-columns:9px 1fr auto;align-items:center;
            gap:7px;padding:2px 0;}
  .vt-zeile i{width:9px;height:9px;border-radius:50%;display:block;}
  .vt-zeile span{color:var(--mut);}
  .vt-zeile b{color:var(--navy);font-variant-numeric:tabular-nums;}
  @media print{ .vistip{display:none;} }

  /* Bevor die Seite zu scrollen anfaengt, gibt lieber der Graph etwas nach.
     Steht bewusst am Dateiende, weil die Grundregeln weiter oben dieselbe
     Gewichtung haben. */
  @media (min-width:961px){
    .graphkarte{min-height:0;}
    .graphflaeche{min-height:150px;}
  }