/* ===== Themenseiten (05.10.2026) =====
   Dienstplan, Urlaub, Krankmeldungen, Personal, seit 06.10.2026 auch
   Zeiterfassung (timepilot.php) — ein Aufbau:
   Kopf · Vorteile · So funktioniert's · Funktionen mit Bild · Fragen · Abschluss.
   Markup: includes/themenseite.php. Geladen NACH main.css und aufwertung.css.

   Bewusst keine neue Formensprache: Creme, Navy-Schrift, Gold wie überall.
   Was hier wegfällt, ist das Durcheinander von vorher — drei verschiedene
   Kartenarten pro Seite, Abstände als style="padding:80px 0" im Markup,
   die goldgefüllte erste Karte neben weißen Karten. */

.thema { --th-rand: rgba(184,134,43,.14); --th-text: #4A5568; --th-leise: #6E6259; }

/* ── Abschnitte: ein Abstand für alle ────────────────────────────── */
.thema-hero { padding: 128px 0 72px; }
.thema-hero .hero-badge { margin-bottom: 22px; }
.thema-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin-bottom: 20px; }
/* Gold der zweiten Zeile wie im Kopf der Startseite: nur satte Töne, der
   helle Teil des alten Verlaufs (#EFDFB4) verschwand auf Creme. */
.thema-hero h1 .accent-text {
    background-image: linear-gradient(100deg, #7A5514 0%, #A87A22 22%, #CFA24A 45%, #E0BC6C 55%, #CFA24A 65%, #A87A22 82%, #7A5514 100%);
    background-size: 220% 100%;
}
.thema-hero .hero-subtitle { max-width: 600px; margin-bottom: 32px; color: var(--th-leise); }
.thema-abschnitt { padding: 88px 0; }
.thema-abschnitt .section-header { margin-bottom: 48px; max-width: 640px; }
.thema-abschnitt h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
.thema-abschnitt .section-header p { color: var(--th-leise); }

/* Lesbarer als das alte Taupe #8B7E74 auf Creme (3,6:1): #6E6259 hat 5,3:1. */
.thema .faq-a, .thema .thema-karte p, .thema .thema-schritt p, .thema .thema-liste span { color: var(--th-leise); }

/* Abzeichen: dunkleres Gold, damit die kleine Schrift lesbar bleibt
   (#B8862B auf dem Goldton dahinter hatte 2,6:1, #7A5514 hat 5,5:1). */
.thema .hero-badge, .thema .section-badge { color: #7A5514; }

/* ── Vorteile: vier gleiche Karten ───────────────────────────────── */
.thema-vorteile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.thema-karte.security-item { flex-direction: column; gap: 0; padding: 26px 24px; height: 100%; }
.thema-karte .security-icon { margin-bottom: 18px; }
.thema-karte h3 { font-size: 1.02rem; font-weight: 600; color: #0F1B2D; margin-bottom: 6px; }
.thema-karte p { font-size: .88rem; line-height: 1.65; }

/* ── So funktioniert's: drei Schritte ────────────────────────────── */
.thema-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.thema-schritt { padding: 0 32px; border-left: 1px solid var(--th-rand); }
.thema-schritt:first-child { border-left: none; padding-left: 0; }
.thema-schritt:last-child { padding-right: 0; }
.thema-nr {
    display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800;
    letter-spacing: -.04em; line-height: 1; margin-bottom: 16px; color: #A87A22;
}
.thema-schritt h3 { font-size: 1.08rem; color: #0F1B2D; margin-bottom: 8px; }
.thema-schritt p { font-size: .9rem; line-height: 1.7; }

/* ── Funktionen: Liste links, Bild rechts ────────────────────────── */
.thema-funktionen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.thema-funktionen .section-header { text-align: left; margin: 0 0 28px; }
.thema-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.thema-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; line-height: 1.6; }
.thema-liste strong { color: #0F1B2D; font-weight: 600; }
.thema-haken {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(184,134,43,.12); color: #8A6318;
}
.thema-haken svg { width: 12px; height: 12px; }
.thema .thema-hinweis { margin-top: 22px; font-size: .8rem; color: var(--th-leise); }

/* Bild: eine ruhige Nachbildung der Oberfläche, nur erfundene Daten */
.thema-bild {
    margin: 0; background: #fff; border: 1px solid var(--th-rand); border-radius: 18px;
    box-shadow: 0 24px 48px -30px rgba(138,99,24,.4), 0 2px 6px rgba(15,27,45,.04);
    overflow: hidden; font-size: .8rem; color: #0F1B2D;
}
.tb-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px; background: #FBF7EC; border-bottom: 1px solid var(--th-rand);
}
.tb-titel { font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: -.01em; }
.tb-leise { color: var(--th-leise); font-size: .74rem; }
.tb-umschalter { display: inline-flex; border: 1px solid var(--th-rand); border-radius: 8px; overflow: hidden; font-size: .72rem; }
.tb-umschalter span { padding: 4px 10px; color: var(--th-leise); }
.tb-umschalter .ist-an { background: rgba(184,134,43,.12); color: #8A6318; font-weight: 600; }
.tb-rumpf { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.tb-unterschrift { padding: 10px 18px 12px; border-top: 1px solid var(--th-rand); font-size: .72rem; color: var(--th-leise); background: #FDFBF5; }

.tb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.tb-chip-gold { background: rgba(184,134,43,.12); color: #7A5514; }
.tb-chip-gruen { background: rgba(61,122,90,.12); color: #2F6248; }
.tb-chip-rot { background: rgba(155,59,59,.1); color: #8A3333; }
.tb-chip-navy { background: rgba(15,27,45,.07); color: #0F1B2D; }
.tb-chip svg { width: 11px; height: 11px; }

/* Dienstplan: Wochenraster */
.tb-raster { display: grid; grid-template-columns: 74px repeat(5, minmax(0, 1fr)); gap: 4px; }
.tb-raster > span { min-height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: .7rem; text-align: center; line-height: 1.2; padding: 2px; }
.tb-raster .tb-tag { min-height: 20px; color: var(--th-leise); font-weight: 600; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.tb-raster .tb-name { justify-content: flex-start; font-weight: 600; font-size: .74rem; }
.tb-dienst { background: #F6EEDA; color: #5C4310; font-weight: 600; }
.tb-spaet { background: #EFE3C6; color: #5C4310; font-weight: 600; }
.tb-frei { background: #FAF8F3; color: #A0968C; }
.tb-urlaub { background: rgba(61,122,90,.12); color: #2F6248; font-weight: 600; }
.tb-eigen { background: #E3ECF7; color: #24456E; font-weight: 600; }
.tb-warn { box-shadow: inset 0 0 0 1.5px #B8862B; }
.tb-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tb-hinweis {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
    background: #FBF5E6; border: 1px solid rgba(184,134,43,.22); font-size: .74rem; line-height: 1.5;
}
.tb-hinweis svg { width: 14px; height: 14px; color: #8A6318; flex-shrink: 0; margin-top: 2px; }

/* Listen- und Antragszeilen */
.tb-reihe {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--th-rand); border-radius: 10px; background: #FDFBF5;
}
.tb-reihe { flex-wrap: wrap; }
.tb-reihe b { font-weight: 600; }
.tb-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tb-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-person > span:last-child { min-width: 0; }
.tb-person small { display: block; color: var(--th-leise); font-size: .7rem; }
.tb-kreis {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(184,134,43,.14); color: #7A5514; font-weight: 700; font-size: .68rem;
}
.tb-balken { height: 6px; border-radius: 99px; background: #F1E7D0; overflow: hidden; }
.tb-balken i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8A6318, #D6AC57); }
.tb-balken-40 i { width: 40%; }
.tb-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-knopf { padding: 6px 12px; border-radius: 8px; font-size: .72rem; font-weight: 600; border: 1px solid var(--th-rand); color: #0F1B2D; background: #fff; }
.tb-knopf-gold { background: linear-gradient(135deg, #8A6318, #C9973A); color: #fff; border-color: transparent; }

/* Krankmeldungen: Mitteilung auf dem Sperrbildschirm */
.tb-mitteilung {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
    background: #0F1B2D; color: #F9F2E0;
}
.tb-mitteilung .tb-app { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; background: linear-gradient(135deg, #8A6318, #D6AC57); }
.tb-mitteilung small { display: block; color: rgba(249,242,224,.7); font-size: .68rem; }
.tb-mitteilung b { display: block; font-weight: 600; font-size: .78rem; }
.tb-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tb-zahl { padding: 10px; border-radius: 10px; border: 1px solid var(--th-rand); background: #FDFBF5; text-align: center; }
.tb-zahl b { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; }
.tb-zahl small { color: var(--th-leise); font-size: .68rem; }

/* ── Fragen ──────────────────────────────────────────────────────── */
.thema .faq-list { max-width: 720px; }
.thema .faq-q { font-size: .98rem; margin-bottom: 8px; color: #0F1B2D; }
.thema .faq-a { font-size: .9rem; }

/* ── Abschluss ───────────────────────────────────────────────────── */
.thema .cta-section { padding: 104px 0; }
.thema .cta-section p { max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: 32px; color: var(--th-leise); }

/* Nur für Vorleser */
.thema-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Breiten ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .thema-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thema-funktionen { gap: 40px; }
}
@media (max-width: 900px) {
    .thema-funktionen { grid-template-columns: minmax(0, 1fr); }
    .thema-bild { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 768px) {
    .thema-hero { padding: 96px 0 56px; }
    .thema-abschnitt { padding: 64px 0; }
    .thema-abschnitt .section-header { margin-bottom: 36px; }
    .thema-schritte { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .thema-schritt, .thema-schritt:first-child, .thema-schritt:last-child { padding: 0 0 0 20px; border-left: 2px solid rgba(184,134,43,.28); }
    .thema-nr { font-size: 1.9rem; margin-bottom: 10px; }
    .thema .cta-section { padding: 72px 0; }
}
@media (max-width: 640px) {
    .thema-hero { padding: 72px 0 48px; }
    .thema-hero h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
    .thema-hero .hero-subtitle { font-size: 1rem; }
    .thema-vorteile { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .thema-karte.security-item { padding: 22px 20px; }
    .thema-abschnitt h2 { font-size: 1.5rem; }
    .tb-rumpf { padding: 14px 12px 14px; }
    .tb-kopf { padding: 12px 12px; }
    .tb-raster { grid-template-columns: 52px repeat(5, minmax(0, 1fr)); gap: 3px; }
    .tb-raster > span { font-size: .6rem; min-height: 30px; padding: 1px; }
    .tb-raster .tb-name { font-size: .64rem; }
}
@media (max-width: 380px) {
    .tb-raster { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); }
    .tb-raster > span { font-size: .56rem; }
    .tb-zahl b { font-size: 1.1rem; }
}

/* ── Pegasus Timepilot (06.10.2026): App-Feld, Telefon, Rechtslage ── */
.thema a.tp-store, .thema-schritt p a, .tp-recht a { text-underline-offset: 2px; }
.thema-schritt p a, .tp-recht a { color: #8A6318; text-decoration: underline; text-decoration-color: rgba(138,99,24,.4); }
.thema-schritt p a:hover, .tp-recht a:hover { text-decoration-color: currentColor; }
.tp-store-zeile { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 26px; }
.tp-store {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 12px;
    background: #0F1B2D; color: #F9F2E0; text-decoration: none; line-height: 1.1;
    font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tp-store small { display: block; font-family: var(--font-body, inherit); font-weight: 500; font-size: .66rem; letter-spacing: .02em; opacity: .8; }
.tp-store-symbol { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; background: linear-gradient(135deg, #8A6318, #D6AC57); color: #fff; }
a.tp-store:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(15,27,45,.55); }
/* Noch ohne Link: gleiche Form, aber erkennbar kein Knopf */
.tp-store-bald { background: transparent; color: #0F1B2D; border: 1px dashed rgba(15,27,45,.32); cursor: default; }
.tp-store-bald small { color: #6E6259; opacity: 1; }
/* Im Kopf steht alles mittig — das Feld auch */
.thema-hero .tp-store-zeile { justify-content: center; }
.tp-store-text { margin: 0; max-width: 360px; font-size: .82rem; line-height: 1.55; color: var(--th-leise); }

.tp-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.tp-app .section-header { text-align: left; margin: 0 0 20px; }
.tp-absatz { margin: 0; max-width: 540px; font-size: .98rem; line-height: 1.75; color: var(--th-leise); }

.tp-telefon { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tp-telefon-rahmen {
    position: relative; width: 264px; padding: 50px 18px 22px; border-radius: 42px; border: 9px solid #0F1B2D;
    background: linear-gradient(180deg, #FDFBF5, #F9F2E0); color: #0F1B2D;
    box-shadow: 0 30px 60px -32px rgba(138,99,24,.55), 0 2px 6px rgba(15,27,45,.06);
    display: flex; flex-direction: column; gap: 14px;
}
.tp-telefon-insel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 82px; height: 22px; border-radius: 99px; background: #0F1B2D; }
.tp-telefon-gruss { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; }
.tp-telefon-gruss small { display: block; font-family: inherit; font-weight: 600; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--th-leise); margin-bottom: 2px; }
.tp-telefon-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--th-rand); font-weight: 600; font-size: .86rem; }
.tp-telefon-status small { display: block; font-weight: 500; font-size: .66rem; color: var(--th-leise); }
.tp-punkt { width: 10px; height: 10px; border-radius: 50%; background: #3D7A5A; box-shadow: 0 0 0 4px rgba(61,122,90,.15); flex-shrink: 0; }
.tp-telefon-zahl { text-align: center; padding: 6px 0 2px; }
.tp-telefon-zahl b { display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #8A6318; }
.tp-telefon-zahl small { font-size: .72rem; color: var(--th-leise); }
.tp-telefon-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-telefon-knoepfe .tb-knopf { text-align: center; padding: 10px 8px; font-size: .78rem; border-radius: 12px; }
.tp-telefon-konto { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--th-rand); font-size: .78rem; color: var(--th-leise); }
.tp-telefon-konto b { color: #2F6248; font-family: var(--font-display); font-size: .95rem; }
.tp-telefon .tb-unterschrift { border: 0; background: none; padding: 0; text-align: center; }

.tp-recht {
    max-width: 780px; margin: 0 auto; padding: 40px 44px; border-radius: 20px;
    border: 1px solid rgba(184,134,43,.28); background: linear-gradient(180deg, #FFFFFF, #FDF8EC);
    box-shadow: 0 24px 48px -36px rgba(138,99,24,.45);
}
.tp-recht h2 { margin: 14px 0 14px; }
.tp-recht p { margin: 0; font-size: .98rem; line-height: 1.75; color: #3F3A33; }
.tp-recht p + p { margin-top: 14px; }
.tp-recht .tp-leise { font-size: .86rem; color: var(--th-leise); }

@media (max-width: 900px) {
    .tp-app { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 640px) {
    .tp-recht { padding: 28px 22px; border-radius: 16px; }
    .tp-telefon-rahmen { width: 240px; padding: 46px 15px 18px; border-width: 8px; border-radius: 38px; }
    .tp-store-zeile { margin-top: 22px; }
}

/* Ohne Bewegung: alles steht sofort da, das Gold im Kopf läuft nicht */
@media (prefers-reduced-motion: reduce) {
    .thema .reveal-up, .thema .stagger-item { opacity: 1; transform: none; transition: none; }
    .thema .hero h1 .accent-text { animation: none; }
}