/* Trendchart "Zinsverlauf" (CT-0616) - Vorschau unter dem zweiten Auswahlband, Chart beim Aufklappen.
   Plan: Listendarstellung/Festgeld DE/PLANUNG-trendchart-t1.md, Abschnitt 4.4.
   Geteilt von Liste und Tabelle, byte-gleich DE und AT. Alles unter #vergleich .fg-trend, Abstaende in em.
   Keine Regel auf FLIP-Elementen (.produkt-karte, .produkt-liste), kein !important. */

/* Das Band gibt seinen Abstand (5em) an den Container ab. z-index 1: Tooltip und Steuer-Hinweis
   des Ausland-Schalters ragen aus dem Band nach unten und muessen ueber der Vorschau liegen
   (beide Elemente tragen backdrop-filter, die spaetere Box laege sonst darueber).
   Ohne :has() bleibt der Abstand doppelt (hingenommene Rueckfallstufe, Plan R2). */
#vergleich .filter-section:has(+ .fg-trend) {
    margin-bottom: 0;
    z-index: 1;
}

/* Container: eingeklappte Hoehe 5em auf derselben Schriftgroessen-Basis wie das Band
   (beide erben die Schrift des Dashboards), auch wenn er leer ist.
   Linienfarben gegen den Box-Hintergrund gemessen (K10, Soll 3:1): dunkel #00d9ae 3,13:1 (der
   Ueberblick-Ton #00d4aa erreicht hier nur 2,97:1, daher +1 Prozentpunkt Helligkeit bei gleichem
   Farbton), #ffb59e 3,34:1; hell #007a66 4,63:1, #b0502a 4,57:1. */
#vergleich .fg-trend {
    --fg-trend-inland: #00d9ae;
    --fg-trend-ausland: #ffb59e;
    --fg-trend-text: rgba(255, 255, 255, 0.85);
    --fg-trend-fokus: #DFFDF2;
    --fg-trend-hoehe: 14em;
    display: flow-root;
    position: relative;
    min-height: 5em;
}
#vergleich.kontrast-hell .fg-trend {
    --fg-trend-inland: #007a66;
    --fg-trend-ausland: #b0502a;
    --fg-trend-text: #003A66;
    --fg-trend-fokus: #0070C0;
}
@media (max-width: 38em) {
    #vergleich .fg-trend { --fg-trend-hoehe: 12em; }
}

#vergleich .fg-trend [hidden] { display: none; }

/* Box: eingeklappt so gross wie die Vorschau, rechtsbuendig zum Kontrast-Icon
   (--fg-trend-rechts = Container.right - Kontrast-Icon.right, setzt festgeld-trend.js).
   Innenmasse in der eigenen Schrift (1rem), damit 2.75em die Touch-Hoehe von 44 px ergibt. */
#vergleich .fg-trend-box {
    position: relative;
    box-sizing: border-box;
    width: 13em;
    height: 2.75em;
    margin: 0.75em var(--fg-trend-rechts, 0) 0 auto;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--text-primary);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
}
#vergleich .fg-trend-box.ist-offen {
    width: auto;
    height: var(--fg-trend-hoehe);
    margin-right: 0;
    margin-bottom: 1.25em;
}

/* Vorschau */
#vergleich .fg-trend-vorschau {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0.9em;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--fg-trend-text);
    font-family: inherit;
    font-size: 0.8125em;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#vergleich .fg-trend-vorschau > * { pointer-events: none; }
#vergleich .fg-trend-wort { white-space: nowrap; }
#vergleich .fg-trend-spark {
    flex: 0 0 auto;
    width: 4.5em;
    height: 1.5em;
    overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
    #vergleich .fg-trend-vorschau:hover { background: var(--bg-card-hover); }
    #vergleich .fg-trend-x:hover { background: var(--bg-card-hover); }
}
#vergleich .fg-trend-vorschau:focus-visible,
#vergleich .fg-trend-x:focus-visible,
#vergleich .fg-trend-plot:focus-visible {
    outline: 0.125em solid var(--fg-trend-fokus);
    outline-offset: -2px;
}

/* Panel (aufgeklappt): Kopf, Zeile mit Stufe/Zeitraum/Legende, Plot, Hinweis */
#vergleich .fg-trend-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0.5em 0.4em 1em;
}
#vergleich .fg-trend-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    flex: 0 0 auto;
    min-height: 2.75em;
}
#vergleich .fg-trend-titel {
    margin: 0;
    font-size: 0.875em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#vergleich .fg-trend-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75em;
    height: 2.75em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-trend-text);
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#vergleich .fg-trend-x-zeichen { font-size: 1.5em; pointer-events: none; }
#vergleich .fg-trend-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15em 1.1em;
    flex: 0 0 auto;
    padding-right: 0.5em;
    font-size: 0.75em;
    color: var(--fg-trend-text);
}
#vergleich .fg-trend-legende {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.15em 0.9em;
}
#vergleich .fg-trend-leg { white-space: nowrap; }
#vergleich .fg-trend-leg::before {
    content: "";
    display: inline-block;
    width: 1.6em;
    height: 0;
    margin-right: 0.4em;
    vertical-align: middle;
    border-top: 0.17em solid var(--fg-trend-inland);
}
#vergleich .fg-trend-leg-ausland::before {
    border-top-style: dashed;
    border-top-color: var(--fg-trend-ausland);
}
#vergleich .fg-trend-plot {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0.3em 0.5em 0 0;
    color: var(--fg-trend-text);
    border-radius: var(--radius-sm);
    touch-action: pan-y;
    cursor: crosshair;
}
#vergleich .fg-trend-plot > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#vergleich .fg-trend-leer {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding-right: 0.5em;
    font-size: 0.8125em;
    color: var(--fg-trend-text);
}
#vergleich .fg-trend-hinweis {
    flex: 0 0 auto;
    margin: 0.2em 0 0;
    padding-right: 0.5em;
    font-size: 0.6875em;
    color: var(--fg-trend-text);
}

/* Linien und Achsen (SVG). Der Plot zeichnet im Massstab 1:1 (ohne viewBox), Striche und Muster
   stehen in em und wachsen mit der Schrift. Die Vorschau skaliert ihre viewBox mit ihrer em-Groesse,
   non-scaling-stroke haelt dort die Strichstaerke in Bildschirm-Einheiten. */
#vergleich .fg-trend-linie {
    fill: none;
    stroke-width: 0.125em;
    stroke-linejoin: round;
    stroke-linecap: round;
}
#vergleich .fg-trend-spark .fg-trend-linie {
    stroke-width: 0.125em;
    vector-effect: non-scaling-stroke;
}
#vergleich .fg-trend-linie-inland { stroke: var(--fg-trend-inland); }
#vergleich .fg-trend-linie-ausland { stroke: var(--fg-trend-ausland); stroke-dasharray: 0.3125em 0.25em; }
#vergleich .fg-trend-spark .fg-trend-linie-ausland { stroke-dasharray: 0.25em 0.15em; }
#vergleich .fg-trend-punkt-inland { fill: var(--fg-trend-inland); }
#vergleich .fg-trend-punkt-ausland { fill: var(--fg-trend-ausland); }
/* Gitter und Hilfslinie: Strichstaerke bewusst einheitenlos = 1 Nutzereinheit = 1 CSS-Pixel
   (Haarlinie, crispEdges); sie soll bei grosser Schrift nicht kraeftiger werden als die Datenlinie. */
#vergleich .fg-trend-gitter {
    stroke: currentColor;
    stroke-opacity: 0.22;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
#vergleich .fg-trend-achse {
    fill: currentColor;
    font-size: 0.6875em;
}
#vergleich .fg-trend-hilfslinie {
    stroke: currentColor;
    stroke-opacity: 0.7;
    stroke-width: 1;
    stroke-dasharray: 0.125em 0.125em;
}

/* Tooltip: haengt am Container (.fg-trend), nicht im Panel. Er steht unter dem Zinsverlauf, beginnt auf
   Hoehe der Datumsbeschriftung und ragt nach unten aus der Box, die ihren Inhalt abschneidet.
   Flaeche im Farbton des Steuer-Hinweises (.ausland-steuerhinweis, #10233b), leicht durchscheinend
   mit Unschaerfe (Glas-Optik); ohne backdrop-filter bleibt sie fast deckend lesbar.
   Schrift 0.75rem = 0.75em der Box-Schrift (1rem), der Container erbt die Schrift des Dashboards.
   Breite samt Innenabstand hoechstens 24em; "nie breiter als der Plot" und die Position setzt
   festgeld-trend.js (zeigeTag), 100% ist hier die Containerbreite. border-box steht ausdruecklich,
   statt nur aus style.css zu erben. Lange Namen brechen auch ohne Leerzeichen um.
   z-index 5: ueber den Sticky-Zellen der Tabellenansicht (festgeld-tabelle.css: Kopfzellen 3, erste
   Spalte 4), in deren Kopf der Tooltip bei langen Namen ragt; unter Hinweisen und Overlays ab 100. */
#vergleich .fg-trend-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    box-sizing: border-box;
    width: max-content;
    max-width: 24em;
    max-width: min(24em, 100%);
    padding: 0.45em 0.7em;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    background: rgba(16, 35, 59, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 0.375em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
/* Datum: so breit wie sein Text, damit festgeld-trend.js (zeigeTag) es per margin-left mittig unter die
   Hilfslinie ruecken kann. Ohne max-content bleibt es linksbuendig. */
#vergleich .fg-trend-tip-datum {
    width: max-content;
    max-width: 100%;
    font-weight: 600;
}

/* Visuell verborgen, fuer Screenreader lesbar (Aenderungsliste, Live-Region) */
#vergleich .fg-trend-sr {
    position: absolute;
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Bewegung reduzieren: keine Uebergaenge im Teilbaum (das JS ruft dann auch kein animate() auf) */
@media (prefers-reduced-motion: reduce) {
    #vergleich .fg-trend,
    #vergleich .fg-trend * {
        transition: none;
        animation: none;
    }
}