/* =====================================================================
   treuekarte/hell.css: helle Farbschicht im Look der Startseite (seit 07.10.2026).
   Die Treuekarte nutzt ein fertig kompiliertes Tailwind (tw.css) mit dunklen Farben.
   Statt jede Klasse im Markup zu ändern, überschreibt diese Datei die verwendeten
   Farbklassen für body.tk. Farben aus assets/subpage.css (Papier, Tinte, Gelb).
   Wird nach tw.css und subpage.css geladen. Bei Änderung ?v= in index.php hochzählen.
   ===================================================================== */

body.tk {
    --tk-akzent: #a63f08;      /* dunkles Orange, auf Papier und Weiß mind. 5,5:1 */
    --tk-feld:   #ffffff;
    --tk-rand:   #c9c7bb;
    --tk-rand-stark: #8a8d80;
    --tk-ok-bg: #e8f5ec; --tk-ok-text: #165d3c; --tk-ok-rand: #9fd3b2;
    --tk-err-bg: #fdecea; --tk-err-text: #9b1c1c; --tk-err-rand: #e8a5a5;
    background: var(--paper);
    background-image: none;
    color: var(--t2);
    display: block;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* App-Fläche: auf dem Handy volle Breite, ab 640 px eine schmale Karte in der Mitte */
body.tk .main-container {
    background: var(--paper);
    background-image: none;
    min-height: 0;
    max-width: 480px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    body.tk .main-container {
        margin: 2rem auto 3rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-soft);
    }
}

/* Zeile mit An- und Abmelden über der App */
body.tk .tk-konto {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .5rem 1rem; border-bottom: 1px solid var(--line);
    font-size: .85rem; color: var(--t3);
}
body.tk .tk-konto a {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem;
    color: var(--t1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* Überschriften wie auf der Startseite: Oswald, nicht in Versalien gesperrt */
body.tk h1, body.tk h2, body.tk h3, body.tk h4, body.tk .font-heading { font-family: Oswald, Impact, sans-serif; }

/* ---------- Schriftfarben ---------- */
body.tk .text-white, body.tk .text-gray-100, body.tk .text-gray-200 { color: var(--t1); }
body.tk .text-white\/90, body.tk .text-white\/80 { color: var(--t2); }
body.tk .text-gray-300 { color: var(--t2); }
body.tk .text-gray-400, body.tk .text-gray-500, body.tk .text-gray-600, body.tk .text-gray-700, body.tk .text-\[\#555\] { color: var(--t3); }
body.tk .text-\[\#FF4500\], body.tk .text-orange-500 { color: var(--tk-akzent); }
body.tk .active\:text-white:active, body.tk .hover\:text-white:hover, body.tk .active\:text-\[\#FF4500\]:active, body.tk .hover\:text-\[\#FF4500\]:hover { color: var(--t1); }

/* ---------- Flächen ---------- */
body.tk .bg-\[\#121212\], body.tk .bg-\[\#1e1e1e\], body.tk .bg-\[\#222\], body.tk .bg-\[\#252525\] { background-color: var(--tk-feld); }
body.tk .bg-\[\#333\], body.tk .bg-\[\#444\], body.tk .bg-gray-700 { background-color: var(--elevated); }
body.tk .bg-black\/20 { background-color: rgba(25, 28, 25, .04); }
body.tk .active\:bg-\[\#444\]:active, body.tk .hover\:bg-\[\#333\]:hover { background-color: #e2ddcf; }
body.tk .shadow-2xl, body.tk .shadow-xl, body.tk .shadow-lg { box-shadow: var(--shadow-soft); }

/* ---------- Ränder ---------- */
body.tk .border-\[\#333\], body.tk .border-\[\#444\], body.tk .border-\[\#222\] { border-color: var(--tk-rand); }
body.tk .divide-\[\#333\] > * + * { border-color: var(--tk-rand); }
body.tk .border-\[\#FF4500\], body.tk .border-\[\#FF4500\]\/30, body.tk .border-orange-500\/30 { border-color: var(--tk-akzent); }

/* ---------- Hauptknöpfe: Gelb mit Tinte, wie auf der Startseite ---------- */
body.tk .btn-primary,
body.tk .bg-\[\#FF4500\], body.tk .bg-orange-600,
body.tk .from-\[\#FF4500\] {
    background: var(--yellow);
    background-image: none;
    color: var(--ink);
}
body.tk .btn-primary:hover, body.tk .bg-\[\#FF4500\]:hover { background: var(--yellow-h); }
body.tk .btn-primary .text-white, body.tk .bg-\[\#FF4500\] .text-white, body.tk .bg-\[\#FF4500\].text-white, body.tk .bg-orange-600.text-white { color: var(--ink); }
body.tk .bg-\[\#FF4500\]\/5 { background-color: rgba(248, 199, 66, .12); }
body.tk .bg-\[\#FF4500\]\/20 { background-color: rgba(248, 199, 66, .35); }
body.tk .shadow-orange-900\/30, body.tk .shadow-orange-950\/40 { --tw-shadow-color: rgba(122, 84, 16, .18); }

/* Rot für Löschen und Warnungen: kräftig mit weißer Schrift */
body.tk .bg-\[\#D32F2F\], body.tk .bg-red-600, body.tk .bg-red-800 { background-color: #b42318; color: #fff; }
body.tk .bg-\[\#D32F2F\] .text-white, body.tk .bg-red-600 .text-white, body.tk .bg-red-800 .text-white { color: #fff; }
body.tk .text-\[\#D32F2F\], body.tk .text-red-400, body.tk .text-red-500, body.tk .text-red-900 { color: var(--tk-err-text); }
body.tk .bg-green-800 { background-color: var(--tk-ok-text); color: #fff; }
body.tk .bg-\[\#1f7a4d\] { background-color: var(--tk-ok-text); }

/* Hinweis- und Fehlerboxen hell */
body.tk .bg-red-900\/20, body.tk .bg-red-900\/30 { background-color: var(--tk-err-bg); }
body.tk .border-red-800 { border-color: var(--tk-err-rand); }
body.tk .bg-green-900\/20 { background-color: var(--tk-ok-bg); }
body.tk .border-green-800 { border-color: var(--tk-ok-rand); }
body.tk .text-green-400, body.tk .text-green-500 { color: var(--tk-ok-text); }

/* ---------- Eingabefelder ---------- */
body.tk .input-dark {
    background-color: var(--tk-feld);
    border: 1px solid var(--tk-rand-stark);
    color: var(--t1);
}
body.tk .input-dark::placeholder { color: #6b6f66; opacity: 1; }
body.tk .input-dark:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(188, 73, 12, .25); }
body.tk select.input-dark option { color: var(--t1); background: #fff; }

/* Fokus sichtbar wie im Rest der Seite */
body.tk :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media print {
    body.tk .site-header, body.tk .site-footer, body.tk .page-hero, body.tk .skip-link { display: none !important; }
}

/* Auf Rot bleibt die Schrift weiß (auch die abgeschwächte Zeile der Belohnungsbox) */
body.tk .bg-\[\#D32F2F\] .text-white\/80, body.tk .bg-\[\#D32F2F\] .text-white\/90 { color: #fff; }
body.tk .tk-belohnung { box-shadow: 0 0 0 4px rgba(180, 35, 24, .18), var(--shadow-soft); }

/* Klickziele mindestens 24 px (WCAG 2.5.8): Checkbox und die kleinen Textlinks unten */
body.tk input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--ink); }
body.tk main a[class*="tracking-[0.3em]"] { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem; }

/* =====================================================================
   Mobile first (07.10.2026): kompaktes Kopfband, damit Formular und Erstellen-Knopf auch bei
   360 × 740 auf den ersten Bildschirm passen; Mindestschrift 12 px; KI-Knopf oben.
   ===================================================================== */
body.tk .tk-hero { padding-block: 1rem 1.15rem; }
body.tk .tk-hero .eyebrow { margin-bottom: .35rem; }
body.tk .tk-hero .page-title { font-size: clamp(1.75rem, 8vw, 2.6rem); line-height: 1.1; }
body.tk .tk-hero .page-intro { margin-top: .4rem; font-size: .95rem; }
@media (min-width: 761px) {
    body.tk .tk-hero { padding-block: 2rem 2.25rem; }
}

/* KI-Knopf: im dunklen Kopfband hell umrandet, in der Kontozeile dunkel umrandet */
body.tk .tk-ki-knopf {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .55rem 1rem;
    border: 2px solid var(--ink); border-radius: var(--r-sm);
    background: transparent; color: var(--ink);
    font: 700 .9rem/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer;
}
body.tk .tk-ki-knopf:hover { background: rgba(25, 28, 25, .06); }
body.tk .tk-ki-knopf--hell { margin-top: .85rem; border-color: var(--yellow); color: var(--paper); }
body.tk .tk-ki-knopf--hell:hover { background: rgba(248, 199, 66, .14); color: var(--yellow); }
body.tk .tk-ki-icon { width: 20px; height: 20px; flex-shrink: 0; }
body.tk .tk-ki-knopf[aria-busy="true"] { cursor: progress; }
body.tk .tk-konto { padding-block: .45rem; }

/* App-Inhalt auf dem Handy enger an den Kopf */
@media (max-width: 760px) {
    body.tk main#main { padding-top: .75rem; }
    body.tk main#main > .space-y-8 { padding-top: 0; }
    body.tk main#main > .space-y-8 > * + * { margin-top: 1.25rem; }
}

/* Mindestschriftgrößen: die Tailwind-Klassen mit 8 bis 11 px sind auf dem Handy zu klein */
body.tk .text-\[9px\], body.tk .text-\[10px\] { font-size: .75rem; }
body.tk .text-\[11px\] { font-size: .8125rem; }
body.tk .text-\[8px\] { font-size: .6875rem; }