/* Card headers clearer on every page (user 15.10.2026: "mache bei allen Karten auf allen Seiten die Header leicht deutlicher, damit man die Karten
   besser abgrenzen kann" - then "die Farbanpassung der Kartenheader fehlt noch": the first version was too faint in the dark theme and missed the
   Marktlage cards). Own file outside the Vite build: the deploy builds no CSS. Site default = dark set, data-theme="light" switches. */
/* 15.10.2026, third pass (user: "es hebt sich kaum vom Hintergrund ab"): about twice as strong */
/* 01.11.2026 (user: "alle Header wie im Dashboard"): the cyan band of the dashboard cards - gradient fading to the right, cyan line below */
/* 05.11.2026 (user: "mache die Headerfarben in einem Navy-Blau, nicht ganz zu dunkel"): navy rgb(2, 6, 18) (ten steps darker than rgb(52, 86, 150) the same day) instead of the steel blue rgb(65, 143, 174) */
:root { --ak-kopf-flaeche: rgba(2, 6, 18, .80); --ak-kopf-linie: rgba(22, 40, 82, .95); --ak-kopf-text: #f1f5f9;
    --ak-kopf-verlauf: linear-gradient(100deg, rgba(2, 6, 18, 1), rgba(2, 6, 18, .78) 55%, rgba(2, 6, 18, .32) 95%); }
:root[data-theme="light"] { --ak-kopf-flaeche: #12284f; --ak-kopf-linie: #34528c; --ak-kopf-text: #ffffff;
    --ak-kopf-verlauf: linear-gradient(100deg, #0d1f42, #152b58 55%, #1e3a72 95%); }
/* the same tint as an opaque colour, for sticky table headers that must not show the rows under them (20.10.2026) */
:root { --ak-kopf-solid: #020612; }
/* 10.11.2026 (user: "bei manchen Tabellen wo die erste Spalte feststehen soll der hintergund transparent ist", "auch im hellen design"): the card colours are
   semi-transparent in the dark design (--ak-card .68, --ak-card-strong .82) - a fixed first column needs an opaque surface, here for both designs */
:root { --ak-fest-bg: #0b1626; }
:root[data-theme="light"] { --ak-fest-bg: #ffffff; }
:root[data-theme="light"] { --ak-kopf-solid: #12284f; }
/* 01.11.2026 (user: "ändere das Teal in die Farbe von den Balken der Indikatorenfilter"): bar blue of the indicator screener, rgb(65, 143, 174). Earlier: cyan, stone, sky, orange 400, teal 800 */

/* footer band in the same hue as the header, lighter (user 01.11.2026: "die Footer dürfen jetzt auch nicht grau sein") */
:root { --ak-fuss-flaeche: rgba(110, 145, 215, .52); --ak-fuss-linie: rgba(110, 145, 215, .74); }   /* 06.11.2026: five steps lighter (user: "macht die Footer in den Karten heller", twice "noch 2 Stufen heller"), light text (below) */
:root[data-theme="light"] { --ak-fuss-flaeche: #d0dcf1; --ak-fuss-linie: #b0c2e4; }   /* 06.11.2026: very light navy, dark navy text (below) */

/* table heads in the light design: the same teal, opaque so sticky heads do not show the rows under them (user 01.11.2026: "das Teal muss für alle Header und Tabellenköpfe im Light-Design gelten") */
:root[data-theme="light"] table > thead > tr > th, :root[data-theme="light"] table > thead > tr > td { background-color: var(--ak-kopf-solid); color: var(--ak-kopf-text); border-bottom: 1px solid var(--ak-kopf-linie); }

/* 1 the shared master card and the page-specific card heads */
.ak-master-card-header, #markets-page .ak-market-card-head, #sectors-page .ak-sector-overview-card-head { background: var(--ak-kopf-verlauf) !important; border-bottom-color: var(--ak-kopf-linie) !important; }

/* 2 Tailwind cards: a header row with a bottom line as the first child of a bordered, rounded box (not list items, not table rows) */
:where([class*="rounded"][class*="border"]) > [class~="border-b"]:first-child:not(li):not(tr) {
    background-color: var(--ak-kopf-flaeche) !important;
    background-image: var(--ak-kopf-verlauf) !important;
    border-bottom-color: var(--ak-kopf-linie) !important;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* 3 Marktlage / Deutschland (.ah): the first line of a card becomes a tinted header band from edge to edge; each card kind carries its own padding */
.ah .ah-label { color: color-mix(in srgb, var(--ah-text) 72%, var(--ah-muted)); }
.ah .ah-flaeche { --kopf-oben: .8rem; --kopf-seite: 1rem; }
.ah .ah-matching-zeile { --kopf-oben: .8rem; --kopf-seite: 1.1rem; }
.ah .ah-tk-karte { --kopf-oben: .7rem; --kopf-seite: .9rem; }
.ah .ah-dax { --kopf-oben: .75rem; --kopf-seite: 1rem; }
.ah .ah-reihe-zelle { --kopf-oben: .6rem; --kopf-seite: .8rem; }
.ah .ah-flaeche > :is(.ah-label, .ah-diagramm-satz, .ah-vorschau-kopf):first-child,
.ah .ah-zeitleiste-karte > .ah-zeitleiste > .ah-label:first-child {
    margin: calc(-1 * var(--kopf-oben)) calc(-1 * var(--kopf-seite)) .65rem;
    padding: .55rem var(--kopf-seite);
    background: var(--ak-kopf-verlauf);
    border-bottom: 1px solid var(--ak-kopf-linie);
    border-radius: 1rem 1rem 0 0;
    color: var(--ak-kopf-text);
}
/* cards whose first child is not a title keep their look; a card inside a card never gets a band */
.ah .ah-reihe-wolke .ah-flaeche > :first-child { margin: 0; padding: 0; background: none; border: 0; }

/* 4 stronger card shadows (user 15.10.2026: "kannst du die Schatten der Karten stärker machen"): the shared token of the site and the Marktlage token.
   This file loads after app.css (same selectors win by order); the Marktlage sets its token in a <style> inside the page, so "body .ah" outranks it. */
:root { --ak-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 22px 60px rgba(0, 0, 0, .58); --ak-shadow-hover: 0 3px 8px rgba(0, 0, 0, .5), 0 28px 72px rgba(124, 58, 237, .32); }
:root[data-theme="light"] { --ak-shadow: 0 2px 4px rgba(15, 23, 42, .10), 0 16px 40px rgba(15, 23, 42, .26); --ak-shadow-hover: 0 3px 6px rgba(15, 23, 42, .12), 0 24px 56px rgba(15, 23, 42, .32); }
body .ah { --ah-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .55); }
:root[data-theme="light"] body .ah { --ah-shadow: 0 2px 4px rgba(15, 23, 42, .10), 0 14px 36px rgba(15, 23, 42, .22); }

/* 5 the live cards (Asia, Europe, Germany, USA): their reserved top slot for the "Daten vom …" hint becomes the header band with a title (user 15.10.2026:
   "nicht alle Karten sind mit Header") */
.ah .ah-live-rahmen { --kopf-oben: .3rem; --kopf-seite: 1.1rem; }
.ah .ah-live-rahmen > .ah-live-kopf:first-child {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    min-height: 2.6rem; margin: calc(-1 * var(--kopf-oben)) calc(-1 * var(--kopf-seite)) .6rem; padding: .45rem var(--kopf-seite);
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: 1rem 1rem 0 0;
}
.ah .ah-live-kopf > .ah-label { color: var(--ak-kopf-text); }

/* 6 dashboard "Heute": the Top-3 cards start with sector, name and rank - that row becomes the header band (card padding 16px, radius 16px) */
article.dh-karte > .flex:first-child {
    margin: -16px -16px 0; padding: 12px 16px 10px;
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: 16px 16px 0 0;
}

/* 7 a card in a row that starts with an embedded section ("Prognose gegen Ist" with its help button, user 15.10.2026): its section head is the band */
.ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child {
    margin: calc(-1 * var(--kopf-oben)) calc(-1 * var(--kopf-seite)) .65rem; padding: .45rem var(--kopf-seite);
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: 1rem 1rem 0 0;
}
.ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child .ah-label { color: var(--ak-kopf-text); }

/* 8 the index-chart tile of a row starts with its chart head (name, help, value) - that head is the band */
/* the head of the first index sits in its wrapper since 19.10.2026; on phones every index card gets the band (each index its own card) */
.ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf,
.ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child {
    margin: calc(-1 * var(--kopf-oben)) calc(-1 * var(--kopf-seite)) .65rem; padding: .45rem var(--kopf-seite);
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: 1rem 1rem 0 0;
}

/* 7 sector and index screener (user 17.10.2026: "die Header der Karten bei den Sektoren und Indizes sollen das gleiche Design wie auf der Marktlage haben"):
   the title row of an .ak-card (p-4 / sm:p-5) becomes the same tinted band from edge to edge, title in the Marktlage label style */
.ak-card > .ak-karten-kopf:first-child, .ak-card > style:first-child + .ak-karten-kopf, .ak-card > .ak-karten-kopf:nth-child(2) {
    margin: -1rem -1rem .75rem; padding: .4rem 1rem; min-height: 2.25rem;
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: clamp(1rem, 1.3vw, 1.5rem) clamp(1rem, 1.3vw, 1.5rem) 0 0;
}
@media (min-width: 640px) { .ak-card > .ak-karten-kopf:first-child, .ak-card > style:first-child + .ak-karten-kopf, .ak-card > .ak-karten-kopf:nth-child(2) { margin: -1.25rem -1.25rem .75rem; padding: .4rem 1.25rem; } }
.ak-karten-kopf, .ak-karten-kopf > h2 { font-size: .75rem !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--ak-kopf-text) !important; }
.ak-karten-kopf button { letter-spacing: 0; text-transform: none; }

@media (max-width: 699px) {
    .ah .ah-reihe-index > .ah-reihe-chartkopf {
        margin: calc(-1 * var(--kopf-oben)) calc(-1 * var(--kopf-seite)) .65rem !important; padding: .45rem var(--kopf-seite) !important;
        background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie) !important; border-radius: 1rem 1rem 0 0;
    }
}

/* master table design (user 20.10.2026, from the swing and indicator tables): coloured header band, first column fixed on phones, the frame
   scrolls sideways; the sticky header on phones comes from public/js/kopf-fest.js. Child selectors, so nested tables keep their own look. */
.ind-rahmen { margin-top: .5rem; border: 1px solid var(--ak-border, #334155); border-radius: .75rem; overflow-x: auto; }
@media (min-width: 1101px) { .ind-rahmen { overflow: visible; } }
.ind-tab { border-collapse: separate; border-spacing: 0; min-width: 640px; }
.ind-tab > thead > tr > th { padding: .5rem .55rem; font-size: .65rem; font-weight: 800; letter-spacing: .08em; line-height: 1.25; color: var(--ak-kopf-text, var(--ak-text)); background: var(--ak-kopf-solid, #272f53); border-bottom: 1px solid var(--ak-border, #334155); text-align: left; }
.ind-tab > thead > tr > th:first-child { border-top-left-radius: .75rem; }
.ind-tab > thead > tr > th:last-child { border-top-right-radius: .75rem; }
.ind-tab > tbody > tr > td { padding: .45rem .55rem; border-bottom: 1px solid color-mix(in srgb, var(--ak-border, #334155) 60%, transparent); color: var(--ak-text); }
.ind-tab > tbody > tr:last-child > td { border-bottom: 0; }
@media (min-width: 1101px) { .ind-tab > thead > tr > th { position: sticky; top: var(--sw-oben, 73px); z-index: 2; } }
@media (max-width: 640px) {
    .ind-tab > thead > tr > th:first-child, .ind-tab > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--ak-fest-bg, #0b1626); box-shadow: inset -1px 0 0 var(--ak-border, #334155); }
    .ind-tab > thead > tr > th:first-child { background: var(--ak-kopf-solid, #272f53); z-index: 3; }
    .ind-tab > tbody > tr > td:first-child { box-shadow: 1px 0 0 var(--ak-border, #334155); }
}

/* sector overview: the frame only scrolls sideways on narrow screens, so the table header can stick on wide ones (20.10.2026) */
.sektor-rahmen { margin-top: .5rem; overflow-x: auto; }
@media (min-width: 1101px) { .sektor-rahmen { overflow: visible; } }

/* 9 Watchlist and Musterdepot cards (user 25.10.2026: "Watchlist und Musterdepot: mach die Header im gleichen Design wie im Dashboard"): the first row of the
   card becomes the tinted band from edge to edge; a live Strategiedepot keeps its own orange tint (inline style) */
article.ak-detail-panel[data-watchlist-id] > div:first-child {
    margin: -1.25rem -1.25rem 1rem; padding: .8rem 1.25rem;
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: 1.5rem 1.5rem 0 0;
}
article.ak-detail-panel[data-watchlist-id] > div:first-child h2 { color: var(--ak-kopf-text) !important; }
article.ak-card > .border-b:first-child:not([style]) { background: var(--ak-kopf-verlauf) !important; border-bottom-color: var(--ak-kopf-linie) !important; }

/* 10 standard card design on every page: header band / content / footer (user 01.11.2026: "es soll aber wie überall das Standard-Kartendesign gelten. Auf allen Seiten! Header, Content, Footer").
   .ak-detail-panel is the card of the detail and report pages: its first child (a heading, or a row that holds the heading) becomes the cyan header band edge to edge, a last child
   with the class .ak-k-fuss becomes the footer band. --kp is the card's padding, --kr its corner radius. */
.ak-detail-panel { --kp: 1.5rem; --kr: 1.5rem; }
.ak-detail-panel.p-4 { --kp: 1rem; } .ak-detail-panel.p-5 { --kp: 1.25rem; } .ak-detail-panel.rounded-2xl { --kr: 1rem; }
@media (max-width: 767px) { .ak-detail-design .ak-detail-panel { --kp: .85rem; --kr: 1rem; } }
.ak-detail-panel > :is(h2, h3):first-child,
.ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .9rem;
    margin: calc(-1 * var(--kp)) calc(-1 * var(--kp)) .9rem; padding: .45rem var(--kp); min-height: 2.25rem;
    background: var(--ak-kopf-verlauf); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: var(--kr) var(--kr) 0 0;
}
.ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child > :is(h2, h3) {
    margin-bottom: 0; font-size: .8rem !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ak-kopf-text) !important;
}
.ak-detail-panel > .ak-k-fuss:last-child {
    margin: .9rem calc(-1 * var(--kp)) calc(-1 * var(--kp)); padding: .6rem var(--kp); border-top: 1px solid var(--ak-fuss-linie);
    background: var(--ak-fuss-flaeche); border-radius: 0 0 var(--kr) var(--kr); font-size: .75rem; line-height: 1.4; color: var(--ak-muted, #94a3b8);
}


/* system blue (bar blue of the indicator screener) for selected states and primary buttons in the strategy tester (user 01.11.2026: "im Strategietester passen die Farben nicht mehr") */
.ak-sys-an { border-color: #418fae !important; background: rgba(65, 143, 174, .28); color: #9fd0e6; }
:root[data-theme="light"] .ak-sys-an { color: #25688a; }
.ak-sys-box { border-color: rgba(65, 143, 174, .45); background: rgba(65, 143, 174, .07); }
.ak-sys-btn { background: #418fae; color: #08202c; } .ak-sys-btn:hover { background: #5aa5c4; }

/* footer band of an .ak-card (the pendant of .ak-karten-kopf; user 01.11.2026: "mach bei den Karten wieder Header und Footer") */
.ak-card > .ak-karten-fuss:last-child { margin: .9rem -1rem -1rem; padding: .5rem 1rem; border-top: 1px solid var(--ak-fuss-linie); background: var(--ak-fuss-flaeche); border-radius: 0 0 clamp(1rem, 1.3vw, 1.5rem) clamp(1rem, 1.3vw, 1.5rem); font-size: .75rem; line-height: 1.4; color: var(--ak-muted, #94a3b8); }
@media (min-width: 640px) { .ak-card > .ak-karten-fuss:last-child { margin: .9rem -1.25rem -1.25rem; padding: .5rem 1.25rem; } }
/* header and footer bands must match the card's own padding (p-4 = 1rem, p-5 = 1.25rem) and the footer sits at the bottom of a stretched card (user 01.11.2026: "die Footer passen nicht") */
.ak-card.p-4 > .ak-karten-kopf:first-child, .ak-card.p-4 > style:first-child + .ak-karten-kopf { margin: -1rem -1rem .75rem; padding: .4rem 1rem; }
.ak-card.p-4 > .ak-karten-fuss:last-child { margin: auto -1rem -1rem; padding: .5rem 1rem; }
.ak-card.p-5 > .ak-karten-fuss:last-child { margin: auto -1.25rem -1.25rem; padding: .5rem 1.25rem; }
.ak-card:has(> .ak-karten-fuss:last-child) { display: flex; flex-direction: column; }
.ak-card:has(> .ak-karten-fuss:last-child) > :nth-last-child(2) { margin-bottom: .9rem; }

/* the header bands of the cards in one row (chart, money flow, "Prognose gegen Ist") are exactly the same height (user 02.11.2026) */
.ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf,
.ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
.ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child,
.ah .ah-reihe-zelle.ah-flaeche > .ah-label:first-child {
    box-sizing: border-box; min-height: 3.1rem; display: flex; align-items: center; margin-bottom: .65rem;
}
.ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child { justify-content: space-between; }
.ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child > h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }

.ah .ah-live-rahmen { --kopf-oben: .3rem; --kopf-seite: 1.1rem; }   /* card padding of the live index list: the header band reaches the edge */

/* 06.11.2026 (user: "bei einigen Karten im Light-Design sind die Headertexte noch nicht weiß"; then dashboard watchlist: every band with the inline header gradient --ak-kopf-verlauf): label, swing, group-screener, market-page, KI-wizard and profile heads added.
   05.11.2026 (user: "macht das Navy-Blau dunkler und macht die Schrift weiß", light design): the header bands are navy in the light design too, so everything written in them is white;
   status colours inside a band (plus, minus) get light tints that stay readable on navy */
:root[data-theme="light"] :is(.ak-master-card-header, #markets-page .ak-market-card-head, #sectors-page .ak-sector-overview-card-head, .dh-flaeche-kopf, .dh-karte-kopf, .dh-finale-kopf, article.dh-karte > .flex:first-child, .lb-karte > .lb-kopf:first-child, .sw-karte > .sw-karten-kopf:first-child, .gs-karte > .gs-kopf, .de-bew-kopf, #kiw-kern > details > summary, .ak-detail-card-head, [style*="--ak-kopf-verlauf"],
    .ah .ah-flaeche > :is(.ah-label, .ah-diagramm-satz, .ah-vorschau-kopf):first-child, .ah .ah-zeitleiste-karte > .ah-zeitleiste > .ah-label:first-child,
    :where([class*="rounded"][class*="border"]) > [class~="border-b"]:first-child:not(li):not(tr)),
:root[data-theme="light"] :is(.ak-master-card-header, #markets-page .ak-market-card-head, #sectors-page .ak-sector-overview-card-head, .dh-flaeche-kopf, .dh-karte-kopf, .dh-finale-kopf, article.dh-karte > .flex:first-child, .lb-karte > .lb-kopf:first-child, .sw-karte > .sw-karten-kopf:first-child, .gs-karte > .gs-kopf, .de-bew-kopf, #kiw-kern > details > summary, .ak-detail-card-head, [style*="--ak-kopf-verlauf"],
    .ah .ah-flaeche > :is(.ah-label, .ah-diagramm-satz, .ah-vorschau-kopf):first-child, .ah .ah-zeitleiste-karte > .ah-zeitleiste > .ah-label:first-child,
    :where([class*="rounded"][class*="border"]) > [class~="border-b"]:first-child:not(li):not(tr)) * { color: var(--ak-kopf-text) !important; }
:root[data-theme="light"] :is(.dh-flaeche-kopf, .dh-karte-kopf, .dh-finale-kopf, article.dh-karte > .flex:first-child, .lb-karte > .lb-kopf:first-child, .sw-karte > .sw-karten-kopf:first-child, .gs-karte > .gs-kopf, .de-bew-kopf, #kiw-kern > details > summary, .ak-detail-card-head, .ak-master-card-header, [style*="--ak-kopf-verlauf"]) :is([class*="is-neg"], [class*="text-red"], [class*="text-rose"]) { color: #fca5a5 !important; }
:root[data-theme="light"] :is(.dh-flaeche-kopf, .dh-karte-kopf, .dh-finale-kopf, article.dh-karte > .flex:first-child, .lb-karte > .lb-kopf:first-child, .sw-karte > .sw-karten-kopf:first-child, .gs-karte > .gs-kopf, .de-bew-kopf, #kiw-kern > details > summary, .ak-detail-card-head, .ak-master-card-header, [style*="--ak-kopf-verlauf"]) :is([class*="is-pos"], [class*="text-emerald"], [class*="text-green"]) { color: #86efac !important; }
:root[data-theme="light"] article.dh-karte > .flex:first-child .dh-platz { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .45) !important; }
:root[data-theme="light"] :is(.dh-karte-fuss, .ak-signal-fuss, .kia-fuss, .de-bew-fuss, .lb-fuss, .ak-profil-fuss, .hs-fuss, .ak-k-fuss, .ak-karten-fuss),
:root[data-theme="light"] :is(.dh-karte-fuss, .ak-signal-fuss, .kia-fuss, .de-bew-fuss, .lb-fuss, .ak-profil-fuss, .hs-fuss, .ak-k-fuss, .ak-karten-fuss) * { color: #12284f !important; }   /* 06.11.2026: dark navy on the light footer */
/* dark design: the lighter footer band needs light text, the muted grey would only reach about 2.6:1 (06.11.2026) */
:root:not([data-theme="light"]) :is(.dh-karte-fuss, .ak-signal-fuss, .kia-fuss, .de-bew-fuss, .lb-fuss, .ak-profil-fuss, .hs-fuss, .ak-k-fuss, .ak-karten-fuss),
:root:not([data-theme="light"]) :is(.dh-karte-fuss, .ak-signal-fuss, .kia-fuss, .de-bew-fuss, .lb-fuss, .ak-profil-fuss, .hs-fuss, .ak-k-fuss, .ak-karten-fuss) * { color: #e8eefa !important; }
/* link in the tile heads (dashboard, market report; 06.11.2026): no text-cyan class, the light-design layer ak-global-light would turn it grey - white there, cyan in the dark design */
.ak-kopf-link { color: #67e8f9; }
:root[data-theme="light"] .ak-kopf-link { color: var(--ak-kopf-text) !important; }
/* 06.11.2026 (user: "Stelle die seitenweite Regelung auf 3 Pixel um"): the site-wide corner rule of resources/css/app.css (.375rem) at 3px - repeated here with :root in front,
   so it already holds before the next Vite build; the source in app.css says 3px as well */
:root :is(button, a, span, label, summary, input[type="submit"], input[type="button"])[class*="rounded"]:is([class^="px-"], [class*=" px-"], [class*=" sm:px-"], [class^="py-"][class*=" px-"]),
:root :is(.ak-top-link, .ak-top-link-active, .ak-app-topbar nav .ak-top-link-active, .dh-badge, .dh-chip, .ix-pille, .link-btn, .solid-btn, .primary-cta, .secondary-cta, .sector-chips span) {
    border-radius: 3px !important;
}

/* 06.11.2026 (user: "Auf den Märkteseiten sind viele Header noch nicht lesbar. Die müssen alle in weiß sein"), light design:
   (1) the index chart heads of the market pages (Indizes row), the section heads of the market rows and the panel heads of the market report get the white text too;
   (2) headings: the light layer ak-global-light sets every h1-h6 to the dark text colour with !important - an !important rule inside a cascade layer beats every
   unlayered one, so the white rule above lost on the h2/h3 of the bands (Gewinner/Verlierer, Markteinschätzung, Marktbericht). The same rule inside that layer wins
   by its higher specificity (the ids in the list). Only headings go into the layer: there it would also beat the light status tints below. */
:root[data-theme="light"] :is(.ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf, .ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
    .ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child, .ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero)),
:root[data-theme="light"] :is(.ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf, .ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
    .ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child, .ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero)) * { color: var(--ak-kopf-text) !important; }
:root[data-theme="light"] :is(.ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf, .ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
    .ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child, .ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero)) :is([class*="is-neg"], [class*="text-red"], [class*="text-rose"]) { color: #fca5a5 !important; }
:root[data-theme="light"] :is(.ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf, .ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
    .ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child, .ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero)) :is([class*="is-pos"], [class*="text-emerald"], [class*="text-green"]) { color: #86efac !important; }
@layer ak-global-light {
    :root[data-theme="light"] body :is(.ak-master-card-header, #markets-page .ak-market-card-head, #sectors-page .ak-sector-overview-card-head, .dh-flaeche-kopf, .dh-karte-kopf, .dh-finale-kopf, article.dh-karte > .flex:first-child, .lb-karte > .lb-kopf:first-child, .sw-karte > .sw-karten-kopf:first-child, .gs-karte > .gs-kopf, .de-bew-kopf, #kiw-kern > details > summary, .ak-detail-card-head, [style*="--ak-kopf-verlauf"],
    .ah .ah-flaeche > :is(.ah-label, .ah-diagramm-satz, .ah-vorschau-kopf):first-child, .ah .ah-zeitleiste-karte > .ah-zeitleiste > .ah-label:first-child,
    :where([class*="rounded"][class*="border"]) > [class~="border-b"]:first-child:not(li):not(tr),
    .ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf, .ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
    .ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child, .ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero)) :is(h1, h2, h3, h4, h5, h6, .ak-card-value, .ak-label),
    :root[data-theme="light"] body :is(.ak-master-card-header, #markets-page .ak-market-card-head, #sectors-page .ak-sector-overview-card-head, .dh-flaeche-kopf, .dh-karte-kopf, .dh-finale-kopf, article.dh-karte > .flex:first-child, .lb-karte > .lb-kopf:first-child, .sw-karte > .sw-karten-kopf:first-child, .gs-karte > .gs-kopf, .de-bew-kopf, #kiw-kern > details > summary, .ak-detail-card-head, [style*="--ak-kopf-verlauf"],
    .ah .ah-flaeche > :is(.ah-label, .ah-diagramm-satz, .ah-vorschau-kopf):first-child, .ah .ah-zeitleiste-karte > .ah-zeitleiste > .ah-label:first-child,
    :where([class*="rounded"][class*="border"]) > [class~="border-b"]:first-child:not(li):not(tr),
    .ah .ah-reihe-zelle > .ah-reihe-index:first-child > .ah-reihe-chartkopf, .ah .ah-reihe-zelle > .ah-reihe-chartkopf:first-child,
    .ah .ah-reihe-zelle > .ah-abschnitt:first-child > .ah-abschnitt-kopf:first-child, .ak-detail-panel > :is(h2, h3):first-child, .ak-detail-panel > div:first-child:has(> :is(h2, h3)):not(.ak-detail-hero)):is(h1, h2, h3, h4, h5, h6) { color: var(--ak-kopf-text) !important; }
}