/* 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 */
:root { --ak-kopf-flaeche: rgba(129, 140, 248, .24); --ak-kopf-linie: rgba(165, 180, 252, .45); --ak-kopf-text: #f1f5f9; }
:root[data-theme="light"] { --ak-kopf-flaeche: #d5e0ee; --ak-kopf-linie: #94a3b8; --ak-kopf-text: #0f172a; }

/* 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-flaeche) !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;
    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-flaeche);
    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-flaeche); 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-flaeche); 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-flaeche); 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 */
.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-flaeche); border-bottom: 1px solid var(--ak-kopf-linie); border-radius: 1rem 1rem 0 0;
}