/* ============================================================
   potcha.de – ein Stylesheet für alle Seiten.
   Farben, Radien und Schriftstufen aus dem Corporate Design v1.2
   (dieselben Werte wie PotchaTokens/AppTheme in der App).
   ============================================================ */

/* Schrift lokal eingebunden – keine Verbindung zu Google-Servern. */
@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* Marke */
    --orange: #E27B1E;
    --orange-tief: #A9520F;
    --kruste: #F6C16E;
    --koralle: #F28A66;
    --creme: #FFFBF4;

    /* Flächen und Text (hell) */
    --surface: #FDF3E3;
    --surface-raised: #FFFBF4;
    --teig: #FDEFD5;
    --text: #3B2314;
    --text-leise: #7A5E4A;
    --linie: rgba(59, 35, 20, 0.12);
    --linie-stark: rgba(59, 35, 20, 0.26);
    --erfolg: #2E7D5B;
    --schatten: 0 10px 30px rgba(122, 70, 20, 0.10), 0 2px 6px rgba(122, 70, 20, 0.06);

    /* Maskottchen- bzw. Bereichsfarben (in beiden Modi gleich) */
    --waschbaer: #A89A8E;
    --hamster: #F2BE70;
    --elster: #2F7F86;
    --elefant: #9DAFC2;
    --baer: #D9A46A;
    --eule: #A994C4;

    /* Radien */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-pill: 999px;

    --breite: 72rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --orange-tief: #F29A4A;
        --surface: #000000;
        --surface-raised: #161412;
        --teig: #3B2314;
        --text: #FFFFFF;
        --text-leise: #C9C5C1;
        --linie: rgba(253, 235, 207, 0.12);
        --linie-stark: rgba(253, 235, 207, 0.26);
        --erfolg: #5FBF93;
        --schatten: none;
    }
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: "Nunito", ui-rounded, -apple-system, system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

a { color: var(--orange-tief); text-underline-offset: 0.15em; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0; overflow-wrap: break-word; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); font-weight: 850; }
h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0; }

.leise { color: var(--text-leise); }

.nur-vorleser {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.sprunglink {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--surface-raised); padding: 0.6rem 1rem; border-radius: var(--r-md);
}
.sprunglink:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--orange-tief); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Kopf ---------- */

.kopf {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }

.kopf .wrap {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 4.25rem;
}

.wortmarke { height: 1.9rem; width: auto; }
.wortmarke-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
    .wortmarke-hell { display: none; }
    .wortmarke-dunkel { display: block; }
}

.kopf .wrap > nav { display: none; gap: 1.25rem; margin-left: auto; }
.kopf nav a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.975rem; }
.kopf nav a:hover { color: var(--orange-tief); }
.sprache { margin-left: auto; font-weight: 700; font-size: 0.9rem; text-decoration: none; padding: 0.6rem 0; }

/* Handy: Menü als aufklappbare Liste (ohne JavaScript) */
.menue { position: relative; }
.menue summary {
    list-style: none; cursor: pointer;
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem;
    border-radius: var(--r-md);
}
.menue summary::-webkit-details-marker { display: none; }
.menue summary span, .menue summary span::before, .menue summary span::after {
    display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--text);
    transition: rotate 0.2s, translate 0.2s, opacity 0.2s;
}
.menue summary span { position: relative; }
.menue summary span::before, .menue summary span::after { content: ""; position: absolute; left: 0; }
.menue summary span::before { top: -6px; }
.menue summary span::after { top: 6px; }
.menue[open] summary span { background: transparent; }
.menue[open] summary span::before { translate: 0 6px; rotate: 45deg; }
.menue[open] summary span::after { translate: 0 -6px; rotate: -45deg; }
.menue nav {
    position: absolute; right: -0.5rem; top: calc(100% + 0.5rem);
    display: grid; min-width: 13rem; padding: 0.5rem;
    background: var(--surface-raised); border-radius: var(--r-md);
    box-shadow: 0 12px 30px rgba(59, 35, 20, 0.16), 0 0 0 1px var(--linie);
}
.menue nav a { padding: 0.75rem 0.9rem; border-radius: var(--r-sm); font-size: 1.05rem; }
.menue nav a:active { background: var(--teig); }

@media (min-width: 52.0625rem) {
    .kopf .wrap > nav { display: flex; }
    .sprache { margin-left: 0; }
    .menue { display: none; }
}

/* ---------- Knöpfe ---------- */

/* „Bald im App Store“: bewusst kein Link und kein offizielles Apple-Badge –
   das darf erst verwendet werden, wenn die App verfügbar ist. */
.bald {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 1.35rem 0.7rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--text);
    color: var(--surface);
    font-weight: 800;
    line-height: 1.15;
}
.bald img { width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; }
.bald small { display: block; font-weight: 700; font-size: 0.78rem; opacity: 0.75; }
.bald-klein { padding: 0.4rem 0.9rem; font-size: 0.875rem; }
@media (max-width: 26rem) { .hero-aktionen .bald { width: 100%; } }

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border-radius: var(--r-pill);
    background: var(--orange-tief);
    color: var(--creme);
    border: 0;
    font: inherit; font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
@media (prefers-color-scheme: dark) { .knopf { color: #3B2314; } }
.knopf:hover { filter: brightness(1.06); }

.knopf-leise {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--linie-stark);
    background: none; color: var(--text);
    font: inherit; font-size: 0.875rem; font-weight: 700;
    cursor: pointer;
}
.knopf-leise .icon { width: 1rem; height: 1rem; }

/* ---------- Abschnitte ---------- */

section { padding: clamp(3.5rem, 9vw, 7rem) 0; }

.abschnitt-kopf { max-width: 42rem; margin-bottom: 2.25rem; }
@media (min-width: 52.0625rem) { .abschnitt-kopf { margin-bottom: 3rem; } }
.abschnitt-kopf.mitte { margin-inline: auto; text-align: center; }
.abschnitt-kopf p { margin-top: 1rem; font-size: 1.15rem; color: var(--text-leise); }


/* ---------- Hero ---------- */

.hero { padding-top: clamp(2.5rem, 6vw, 5rem); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.hero-text p { margin-top: 1.25rem; font-size: 1.15rem; color: var(--text-leise); max-width: 34rem; }
.hero-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.hero-aktionen a { font-weight: 800; }

.hero-buehne { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Die eine große orange Fläche dieser Bildschirmhöhe („Orange ist kostbar“). */
.hero-buehne::before {
    content: ""; position: absolute; z-index: -1;
    width: min(34rem, 110%); aspect-ratio: 1; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%, -46%);
    background: radial-gradient(circle at 40% 35%, var(--kruste), var(--orange) 70%);
    opacity: 0.9;
}
.hero-pogaca {
    position: absolute; width: 6.5rem; right: 0; bottom: 2rem; rotate: -14deg;
    filter: drop-shadow(0 8px 16px rgba(80, 40, 10, 0.18));
}
.hero-buehne { margin-top: 1rem; }

@media (min-width: 56.0625rem) {
    .hero .wrap { grid-template-columns: 1.05fr 0.95fr; }
    .hero-text p { font-size: 1.25rem; }
    .hero-buehne { margin-top: 0; }
    .hero-pogaca { width: 8.5rem; right: -1rem; }
}

/* ---------- App-Mockups ----------
   Nachgebaut nach dem SwiftUI-Code der App (DashboardView, ChoresView,
   FinanceView, AddRecipeSheet …). Alle Maße in iOS-Punkten: 1pt =
   var(--pt), bezogen auf eine 393 pt breite Bildschirmfläche, damit die
   Proportionen im Rahmen exakt stimmen. Schrift: SF Pro Rounded auf
   Apple-Geräten (ui-rounded), sonst Nunito. */

.phone {
    position: relative;
    width: min(19.5rem, 86vw);
    aspect-ratio: 393 / 852;
    padding: 11px;
    border-radius: 3.1rem;
    background: #1d1a17;
    box-shadow: 0 30px 60px rgba(60, 30, 10, 0.28), inset 0 0 0 2px #3a332d;
}
.screen {
    position: relative; height: 100%; overflow: hidden;
    border-radius: 2.5rem;
    background: var(--surface);
    container-type: inline-size;
    user-select: none;
}
.ios {
    --pt: calc(100cqw / 393);
    --glas: rgba(255, 255, 255, 0.72);
    --glas-rand: rgba(59, 35, 20, 0.08);
    --tint: var(--orange-tief);
    --espresso: #3B2314;
    --espresso-leise: #7A5E4A;
    --text-stark: #3B2314;
    --text-stark-leise: #7A5E4A;
    position: absolute; inset: 0;
    font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
    font-size: calc(17 * var(--pt));
    line-height: 1.3;
    color: var(--espresso);
}
@media (prefers-color-scheme: dark) {
    .ios {
        --glas: rgba(58, 54, 50, 0.72);
        --glas-rand: rgba(255, 255, 255, 0.08);
        --espresso: #FDEBCF;
        --espresso-leise: #C9B49A;
        --text-stark: #FFFFFF;
        --text-stark-leise: #C9C5C1;
    }
}
.ios .icon { width: 1em; height: 1em; }
.ios .t-stark { color: var(--text-stark); }
.ios .t-leise { color: var(--espresso-leise); }

.ios-status {
    display: flex; justify-content: space-between; align-items: center;
    height: calc(54 * var(--pt)); padding: calc(4 * var(--pt)) calc(36 * var(--pt)) 0 calc(44 * var(--pt));
    font-size: calc(17 * var(--pt)); font-weight: 600; color: var(--text-stark);
    font-family: -apple-system, system-ui, sans-serif;
}
.ios-status .symbole { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
.ios-status .balken4 { width: calc(18 * var(--pt)); height: calc(12 * var(--pt)); background: linear-gradient(90deg, currentColor 0 18%, transparent 18% 27%, currentColor 27% 45%, transparent 45% 55%, currentColor 55% 73%, transparent 73% 82%, currentColor 82%); clip-path: polygon(0 100%, 0 70%, 27% 70%, 27% 45%, 55% 45%, 55% 20%, 82% 20%, 82% 0, 100% 0, 100% 100%); }
.ios-status .akku { width: calc(25 * var(--pt)); height: calc(12 * var(--pt)); border-radius: calc(4 * var(--pt)); border: calc(1.3 * var(--pt)) solid currentColor; opacity: 0.9; padding: calc(1.5 * var(--pt)); }
.ios-status .akku::before { content: ""; display: block; height: 100%; width: 80%; background: currentColor; border-radius: calc(2 * var(--pt)); }
.ios-insel {
    position: absolute; z-index: 20; top: calc(11 * var(--pt)); left: 50%; transform: translateX(-50%);
    width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 999px; background: #000;
}

/* Navigationsleiste (iOS 26: Knöpfe in Glas-Kapseln) */
.ios-nav { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--pt)); padding: 0 calc(16 * var(--pt)); }
.ios-nav .mitte { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
.ios-nav .mitte img { height: calc(20 * var(--pt)); width: auto; }
.ios-nav .mitte strong { font-size: calc(17 * var(--pt)); font-weight: 600; color: var(--text-stark); }
.glas {
    display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--pt));
    min-width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); padding: 0 calc(11 * var(--pt));
    border-radius: 999px; background: var(--glas);
    box-shadow: 0 calc(2 * var(--pt)) calc(8 * var(--pt)) rgba(59, 35, 20, 0.08), inset 0 0 0 calc(0.6 * var(--pt)) var(--glas-rand);
    color: var(--tint); font-size: calc(20 * var(--pt));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.glas.text { font-size: calc(17 * var(--pt)); font-weight: 500; padding: 0 calc(16 * var(--pt)); color: var(--text-stark); }
.glas.prominent { background: var(--tint); color: #FFFBF4; font-weight: 600; }
.glas.aus { color: var(--espresso-leise); opacity: 0.55; }
.ios-large { padding: calc(2 * var(--pt)) calc(16 * var(--pt)) 0; }
.ios-large h4 { margin: 0; font-size: calc(34 * var(--pt)); font-weight: 800; line-height: 1.2; color: var(--text-stark); }
.ios-large p { font-size: calc(15 * var(--pt)); color: var(--espresso-leise); margin-top: calc(1 * var(--pt)); }

/* Maskottchen-Statuskopf (MascotStatusHeader, Figur 56 pt) */
.maskottchen-kopf { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(8 * var(--pt)) calc(16 * var(--pt)) 0; }
.maskottchen-kopf img { height: calc(56 * var(--pt)); width: auto; transition: opacity 0.28s, transform 0.28s; }
.maskottchen-kopf span { font-size: calc(15 * var(--pt)); font-weight: 600; color: var(--espresso); }
.ios img.neu { opacity: 0; transform: scale(0.92); }

/* Segmented Control */
.segmente {
    display: flex; margin: calc(16 * var(--pt)) calc(16 * var(--pt)) 0; padding: calc(2 * var(--pt));
    height: calc(32 * var(--pt)); border-radius: 999px; background: rgba(118, 118, 128, 0.14);
}
.segmente span {
    flex: 1; display: grid; place-items: center; border-radius: 999px;
    font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--text-stark);
}
.segmente .an { background: #FFFFFF; box-shadow: 0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgba(0, 0, 0, 0.1); }
@media (prefers-color-scheme: dark) { .segmente .an { background: #636366; } }

/* Liste im Inset-Grouped-Stil mit potchaList() */
.ios-liste { padding: calc(4 * var(--pt)) calc(16 * var(--pt)) 0; }
.ios-kopf { padding: calc(18 * var(--pt)) calc(16 * var(--pt)) calc(7 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 600; color: var(--espresso-leise); }
.ios-fuss { padding: calc(7 * var(--pt)) calc(16 * var(--pt)) 0; font-size: calc(13 * var(--pt)); color: var(--espresso-leise); line-height: 1.35; }
.ios-gruppe { background: var(--surface-raised); border-radius: calc(26 * var(--pt)); overflow: hidden; }
.ios-zeile {
    position: relative; display: flex; align-items: center; gap: calc(12 * var(--pt));
    min-height: calc(44 * var(--pt)); padding: calc(10 * var(--pt)) calc(16 * var(--pt));
    transition: opacity 0.35s, max-height 0.35s, padding 0.35s;
    max-height: calc(200 * var(--pt));
}
.ios-zeile + .ios-zeile::before { content: ""; position: absolute; top: 0; left: calc(16 * var(--pt)); right: 0; height: calc(0.5 * var(--pt)); min-height: 0.5px; background: var(--linie); }
.ios-zeile .wachsen { flex: 1; min-width: 0; }
.ios-zeile .titel { font-size: calc(17 * var(--pt)); font-weight: 600; color: var(--espresso); }
.ios-zeile .text { font-size: calc(17 * var(--pt)); color: var(--espresso); }
.ios-zeile .klein { font-size: calc(12 * var(--pt)); color: var(--espresso-leise); }
.ios-zeile .winzig { font-size: calc(11 * var(--pt)); color: var(--espresso-leise); }
.ios-zeile .hinweis-text { font-size: calc(17 * var(--pt)); color: var(--espresso-leise); }
.ios-zeile .platzhalter { font-size: calc(17 * var(--pt)); color: var(--espresso-leise); }
.ios-zeile .wert { font-size: calc(17 * var(--pt)); color: var(--espresso); }
.ios-zeile.tint { color: var(--tint); font-size: calc(17 * var(--pt)); }
.ios-zeile.tint .icon { font-size: calc(19 * var(--pt)); }
.ios-zeile.zu { opacity: 0; max-height: 0; padding-block: 0; min-height: 0; }

.erledigt-knopf { font-size: calc(28 * var(--pt)); color: var(--espresso-leise); --haken-ink: var(--surface-raised); transition: color 0.2s, transform 0.25s; }
.erledigt-knopf.gruen { color: var(--erfolg); transform: scale(1.25); }
.rechts-spalte { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--pt)); }
.teilaufgaben { display: flex; align-items: center; gap: calc(8 * var(--pt)); padding-top: calc(8 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 500; color: var(--espresso); }
.teilaufgaben .icon { font-size: calc(12 * var(--pt)); color: var(--espresso-leise); }
.teilaufgaben b { margin-left: auto; font-size: calc(12 * var(--pt)); color: var(--espresso-leise); }
.spalte { display: flex; flex-direction: column; }

.ios-avatar {
    flex: none; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%;
    display: grid; place-items: center; background: var(--a);
    font-size: calc(12 * var(--pt)); font-weight: 600; color: #3B2314;
}
.betrag { font-variant-numeric: tabular-nums; }
.saldo { font-size: calc(15 * var(--pt)); font-weight: 700; color: var(--erfolg); }
.saldo.offen { color: var(--espresso); }
.bordered {
    padding: calc(5 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px;
    background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint);
    font-size: calc(15 * var(--pt)); font-weight: 500; transition: transform 0.15s;
}
.ios-zeile .flieger { font-size: calc(17 * var(--pt)); color: var(--espresso-leise); }

/* Dashboard */
.dash { padding: calc(16 * var(--pt)); display: flex; flex-direction: column; gap: calc(22 * var(--pt)); }
.dash-gruss strong { display: block; font-size: calc(28 * var(--pt)); font-weight: 800; line-height: 1.2; color: var(--text-stark); }
.dash-gruss span { font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--text-stark-leise); }
.dash-sektion { display: flex; flex-direction: column; gap: calc(10 * var(--pt)); }
.dash-kopf { padding: 0 calc(4 * var(--pt)); font-size: calc(20 * var(--pt)); font-weight: 800; color: var(--text-stark); }

.karte {
    display: flex; gap: calc(12 * var(--pt)); padding: calc(12 * var(--pt));
    border-radius: calc(22 * var(--pt)); background: var(--surface-raised);
    box-shadow: 0 calc(3 * var(--pt)) calc(8 * var(--pt)) rgba(59, 35, 20, 0.05);
    transition: opacity 0.35s, transform 0.35s;
}
.karte.weg { opacity: 0; transform: translateX(-40%); }
.karte .streifen { width: calc(5 * var(--pt)); border-radius: calc(3 * var(--pt)); background: var(--farbe); flex: none; }
.karte .koerper { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--pt)); }
.karte .zeile { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.karte .symbol {
    flex: none; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: calc(10 * var(--pt));
    display: grid; place-items: center; background: var(--farbe); color: var(--auf-farbe, #3B2314);
    font-size: calc(20 * var(--pt));
}
.karte .texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--pt)); }
.karte .texte strong { font-size: calc(16 * var(--pt)); font-weight: 700; color: var(--text-stark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte .texte span { font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--text-stark-leise); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.karte .aktion { flex: none; font-size: calc(28 * var(--pt)); color: var(--farbe); --haken-ink: var(--auf-farbe, #3B2314); transition: transform 0.15s; }
.karte .chevron { flex: none; font-size: calc(13 * var(--pt)); color: var(--text-stark-leise); }
.chips { display: flex; gap: calc(8 * var(--pt)); }
.chip {
    padding: calc(8 * var(--pt)) calc(14 * var(--pt)); border-radius: 999px;
    background: var(--farbe); color: var(--auf-farbe, #3B2314);
    font-size: calc(13 * var(--pt)); font-weight: 600; white-space: nowrap; transition: transform 0.15s;
}
.bestaetigung { display: none; align-items: center; gap: calc(8 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--text-stark); }
.bestaetigung .icon { font-size: calc(15 * var(--pt)); color: var(--text-stark); --haken-ink: var(--surface-raised); }
.bestaetigung .aendern { margin-left: auto; padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px; box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--linie-stark); }
.gewaehlt .chips { display: none; }
.gewaehlt .bestaetigung { display: flex; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--pt)); }
.kachel {
    position: relative; overflow: hidden; min-height: calc(144 * var(--pt)); padding: calc(16 * var(--pt));
    border-radius: calc(22 * var(--pt));
    background: color-mix(in srgb, var(--farbe) var(--anteil, 28%), #FFFBF4);
    box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(59, 35, 20, 0.06);
}
@media (prefers-color-scheme: dark) { .kachel { background: #161412; } }
.kachel .symbol {
    position: relative; z-index: 1;
    width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: calc(12 * var(--pt));
    display: grid; place-items: center; background: var(--farbe); color: var(--auf-farbe, #3B2314); font-size: calc(22 * var(--pt));
}
.kachel strong { position: relative; z-index: 1; display: block; margin-top: calc(10 * var(--pt)); font-size: calc(20 * var(--pt)); font-weight: 800; color: var(--text-stark); }
/* MascotPeek: 110 pt hoch, −18°, 22/26 pt über den unteren rechten Rand hinaus */
.kachel .peek {
    position: absolute; height: calc(110 * var(--pt)); width: auto;
    right: calc(-22 * var(--pt)); bottom: calc(-26 * var(--pt)); rotate: -18deg;
    transition: opacity 0.28s, transform 0.28s;
}

/* Bereichsfarben (AppModule.tintHex / cardTintAmount), Text darauf per onColor */
.f-aufgaben   { --farbe: var(--waschbaer); --anteil: 36%; }
.f-einkauf    { --farbe: var(--hamster); }
.f-finanzen   { --farbe: var(--elster); --anteil: 20%; --auf-farbe: #FDEBCF; }
.f-kalender   { --farbe: var(--elefant); --anteil: 42%; }
.f-essen      { --farbe: var(--baer); }
.f-abstimmung { --farbe: var(--eule); }
.f-aktivitaet { --farbe: var(--koralle); }

/* Bestätigungsdialog (confirmationDialog) */
.dialog { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(8 * var(--pt)) calc(8 * var(--pt)) calc(30 * var(--pt)); background: rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.dialog.offen { opacity: 1; }
.dialog .blatt { border-radius: calc(26 * var(--pt)); background: var(--glas); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow: hidden; text-align: center; transform: translateY(20%); transition: transform 0.3s; }
.dialog.offen .blatt { transform: none; }
.dialog .blatt p { padding: calc(14 * var(--pt)) calc(16 * var(--pt)); font-size: calc(13 * var(--pt)); color: var(--espresso-leise); border-bottom: calc(0.5 * var(--pt)) solid var(--linie); }
.dialog .blatt p b { display: block; font-weight: 600; margin-bottom: calc(2 * var(--pt)); }
.dialog .knopf-zeile { padding: calc(16 * var(--pt)); font-size: calc(17 * var(--pt)); color: var(--tint); }
.dialog .abbrechen { margin-top: calc(8 * var(--pt)); font-weight: 600; background: var(--glas); border-radius: calc(26 * var(--pt)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* Sheet (z. B. „Rezept hinzufügen“) */
.sheet-hinter { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); }
.sheet { position: absolute; inset: calc(62 * var(--pt)) 0 0; border-radius: calc(38 * var(--pt)) calc(38 * var(--pt)) 0 0; background: var(--surface); overflow: hidden; }
.sheet .ios-nav { height: calc(60 * var(--pt)); }
.feld-inhalt { transition: color 0.2s; }
.ladezeile { display: none; align-items: center; gap: calc(8 * var(--pt)); font-size: calc(12 * var(--pt)); color: var(--espresso-leise); }
.laedt .ladezeile { display: flex; }
.spinner { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; border: calc(2 * var(--pt)) solid var(--linie-stark); border-top-color: var(--espresso-leise); animation: dreh 0.8s linear infinite; }
@keyframes dreh { to { rotate: 360deg; } }
.vorschau-bild {
    height: calc(150 * var(--pt)); border-radius: calc(12 * var(--pt));
    background:
        radial-gradient(circle at 38% 44%, #F4A921 0 4%, #FFF6E6 4.6% 10%, transparent 10.6%),
        radial-gradient(circle at 60% 36%, #F4A921 0 4%, #FFF6E6 4.6% 10%, transparent 10.6%),
        radial-gradient(circle at 55% 66%, #F4A921 0 4%, #FFF6E6 4.6% 10%, transparent 10.6%),
        radial-gradient(circle at 30% 64%, #5E9C4E 0 2%, transparent 2.5%),
        radial-gradient(circle at 70% 55%, #5E9C4E 0 2%, transparent 2.5%),
        radial-gradient(ellipse 34% 62% at 50% 50%, #C8412B 0 88%, #3A3430 90% 100%, transparent 101%),
        linear-gradient(135deg, #5C3A22, #3B2314);
}
.eingeblendet { transition: opacity 0.4s, max-height 0.45s; max-height: calc(400 * var(--pt)); overflow: hidden; }
.eingeblendet.versteckt { opacity: 0; max-height: 0; }

/* Tipp-Finger in den Animationen */
.finger {
    position: absolute; z-index: 30; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: rgba(59, 35, 20, 0.22); border: 2px solid rgba(255, 251, 244, 0.9);
    pointer-events: none; opacity: 0; transform: scale(1.4);
    transition: left 0.6s cubic-bezier(.4,0,.2,1), top 0.6s cubic-bezier(.4,0,.2,1), opacity 0.25s, transform 0.18s;
}
.finger.sichtbar { opacity: 1; transform: scale(1); }
.finger.tippt { transform: scale(0.8); }
@media (prefers-color-scheme: dark) { .finger { background: rgba(255, 251, 244, 0.28); } }

.nochmal { margin-top: 1.25rem; }
.mockup-hinweis { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-leise); text-align: center; max-width: 20rem; }

/* ---------- Alltag (Problem) ---------- */

.alltag { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.sprechblase {
    position: relative; padding: 1.5rem 1.5rem 1.35rem;
    background: var(--surface-raised); border-radius: var(--r-lg);
    box-shadow: var(--schatten);
}
.sprechblase::after {
    content: ""; position: absolute; left: 2.2rem; bottom: -0.7rem;
    width: 1.5rem; height: 1.5rem; background: inherit; rotate: 45deg; border-radius: 0 0 6px 0;
}
.sprechblase q { display: block; font-size: 1.3rem; font-weight: 850; quotes: "„" "“"; line-height: 1.3; }
.sprechblase p { margin-top: 0.75rem; color: var(--text-leise); }
.sprechblase img { width: 4.2rem; position: absolute; right: 0.9rem; top: -2.3rem; }
@media (min-width: 52.0625rem) { .alltag { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* ---------- Bereiche ---------- */

.bereiche { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.bereich {
    position: relative; overflow: hidden;
    padding: 1.5rem 1.5rem 1.75rem; min-height: 11rem;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--farbe) var(--anteil, 28%), #FFFBF4);
}
@media (min-width: 38.0625rem) { .bereich { min-height: 14rem; } }
@media (prefers-color-scheme: dark) { .bereich { background: var(--surface-raised); } }
.bereich .abzeichen {
    width: 3rem; height: 3rem; border-radius: 0.85rem; display: grid; place-items: center;
    background: var(--farbe); color: var(--auf-farbe, #3B2314);
}
.bereich h3 { margin-top: 1rem; }
.bereich p { margin-top: 0.5rem; max-width: 80%; }
.bereich .peek { position: absolute; width: 7.5rem; right: -1.5rem; bottom: -1.9rem; rotate: -16deg; transition: rotate 0.35s, translate 0.35s; }
.bereich:hover .peek { rotate: -8deg; translate: -0.4rem -0.5rem; }
@media (prefers-reduced-motion: reduce) { .bereich:hover .peek { rotate: -16deg; translate: none; } }
@media (min-width: 38.0625rem) { .bereiche { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 60.0625rem) { .bereiche { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Funktionen im Detail ---------- */

.funktion { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.funktion + .funktion { margin-top: clamp(4.5rem, 10vw, 8rem); }
.funktion-text p { margin-top: 1rem; font-size: 1.1rem; color: var(--text-leise); }
.funktion-bild { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 56.0625rem) {
    .funktion { grid-template-columns: 1fr 1fr; }
    .funktion.gespiegelt .funktion-text { order: 2; }
}

/* ---------- Schritte ---------- */

.schritte { display: grid; grid-template-columns: 1fr; gap: 2.5rem; counter-reset: schritt; list-style: none; padding: 0; margin: 0; }
.schritt {
    position: relative; padding: 1.75rem 1.5rem;
    background: var(--surface-raised); border-radius: var(--r-lg); box-shadow: var(--schatten);
}
.schritt::before {
    counter-increment: schritt; content: counter(schritt);
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--kruste); color: #3B2314; font-weight: 900; font-size: 1.1rem;
}
.schritt h3 { margin-top: 1rem; }
.schritt p { margin-top: 0.5rem; color: var(--text-leise); }
.schritt img { position: absolute; width: 5rem; right: 1rem; top: -1.6rem; }
.code {
    display: inline-block; margin-top: 0.9rem; padding: 0.3rem 0.8rem;
    border-radius: var(--r-sm); background: var(--teig);
    font-weight: 900; letter-spacing: 0.08em;
}
@media (min-width: 52.0625rem) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* ---------- Überall dabei ---------- */

.geraete { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.geraet {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 2rem 1.5rem; background: var(--surface-raised); border-radius: var(--r-lg); box-shadow: var(--schatten);
}
.geraet h3 { margin-top: 1.5rem; }
.geraet p { margin-top: 0.5rem; color: var(--text-leise); }
.geraet .buehne { height: 11rem; display: grid; place-items: center; }
@media (min-width: 56.0625rem) { .geraete { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* Apple Watch (WatchShoppingView, immer dunkel) */
.watch {
    width: 9.2rem; aspect-ratio: 208 / 248; padding: 0.55rem;
    border-radius: 2.6rem; background: #1d1a17;
    box-shadow: 0 16px 30px rgba(60, 30, 10, 0.25), inset 0 0 0 2px #3a332d;
}
.watch-screen {
    --pt: calc(100cqw / 184);
    container-type: inline-size;
    height: 100%; border-radius: 2rem; background: #000; overflow: hidden;
    font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}
.watch-inhalt { --pt: calc(100cqw / 184); padding: calc(8 * var(--pt)) calc(8 * var(--pt)) 0; color: #fff; }
.watch-titel { display: flex; justify-content: space-between; align-items: baseline; padding: 0 calc(6 * var(--pt)) calc(6 * var(--pt)); }
.watch-titel b { font-size: calc(17 * var(--pt)); font-weight: 600; color: #F29A4A; }
.watch-titel span { font-size: calc(15 * var(--pt)); font-weight: 600; font-family: -apple-system, system-ui, sans-serif; }
.watch-kopf { padding: calc(4 * var(--pt)) calc(8 * var(--pt)); font-size: calc(14 * var(--pt)); color: #C9B49A; }
.watch-zeile { display: flex; align-items: center; gap: calc(8 * var(--pt)); margin-bottom: calc(4 * var(--pt)); padding: calc(9 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(20 * var(--pt)); background: #222120; font-size: calc(16 * var(--pt)); }
.watch-zeile .icon { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); color: var(--hamster); }
.watch-zeile small { display: block; font-size: calc(12 * var(--pt)); color: #C9B49A; }
.watch-zeile.hinzu { color: #F29A4A; }
.watch-zeile.hinzu .icon { color: #F29A4A; --haken-ink: #222120; }

/* Widget „Nächste Aufgabe“ (NextChoreView, systemSmall) */
.widget {
    --pt: calc(100cqw / 170);
    container-type: inline-size;
    width: 9.5rem; aspect-ratio: 1; border-radius: 1.55rem;
    background: var(--surface); box-shadow: var(--schatten), inset 0 0 0 1px var(--linie);
    font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}
.widget-inhalt { --pt: calc(100cqw / 170); height: 100%; padding: calc(16 * var(--pt)); display: flex; flex-direction: column; text-align: left; }
.widget-inhalt .marke { display: flex; align-items: center; gap: calc(4 * var(--pt)); font-size: calc(11 * var(--pt)); font-weight: 700; color: var(--orange-tief); }
.widget-inhalt .marke .icon { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.widget-inhalt .luft { flex: 1; }
.widget-inhalt strong { font-size: calc(17 * var(--pt)); font-weight: 600; line-height: 1.25; color: var(--text); }
.widget-inhalt span { font-size: calc(12 * var(--pt)); color: var(--text-leise); margin-top: calc(2 * var(--pt)); }

/* Live-Aktivität auf dem Sperrbildschirm (CookingTimerLockScreenView) */
.live {
    --pt: calc(100cqw / 360);
    container-type: inline-size;
    width: min(18rem, 100%); border-radius: 1.4rem; background: var(--surface-raised);
    box-shadow: 0 16px 30px rgba(60, 30, 10, 0.18);
    font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
}
.live-inhalt { --pt: calc(100cqw / 360); display: flex; align-items: center; gap: calc(14 * var(--pt)); padding: calc(16 * var(--pt)); }
.live-inhalt img { width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); object-fit: contain; }
.live-inhalt .zeit { display: block; font-size: calc(40 * var(--pt)); font-weight: 600; line-height: 1.1; color: var(--orange-tief); font-variant-numeric: tabular-nums; }
.live-inhalt small { font-size: calc(15 * var(--pt)); color: var(--text-leise); }

/* ---------- Datenschutz ---------- */

.vertrauen {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem); border-radius: calc(var(--r-lg) * 1.4);
    background: var(--surface-raised); box-shadow: var(--schatten);
}
.vertrauen > img { width: clamp(6rem, 16vw, 11rem); }
.vertrauen-text { margin-top: 1.25rem; font-size: 1.1rem; color: var(--text-leise); max-width: 40rem; }
@media (min-width: 56.0625rem) { .vertrauen { grid-template-columns: auto 1fr; gap: 2.5rem; } }

/* ---------- FAQ ---------- */

.faq { max-width: 46rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.faq details { background: var(--surface-raised); border-radius: var(--r-md); padding: 0 1.25rem; box-shadow: var(--schatten); }
.faq summary {
    list-style: none; cursor: pointer; padding: 1.1rem 0; min-height: 3.25rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-weight: 800; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: rotate 0.2s; color: var(--orange-tief); }
.faq details[open] summary .icon { rotate: 90deg; }
.faq details p { padding: 0 0 1.2rem; color: var(--text-leise); }

/* ---------- Abschluss ---------- */

.abschluss { text-align: center; }
.bande { display: flex; justify-content: center; align-items: flex-end; gap: 0.25rem; margin-bottom: 2rem; flex-wrap: wrap; }
.bande img { width: clamp(4rem, 9vw, 6.5rem); }
.bande img:nth-child(odd) { translate: 0 0.6rem; }
.abschluss p { margin: 1rem auto 2rem; max-width: 34rem; font-size: 1.15rem; color: var(--text-leise); }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); padding: 2.5rem 0 3rem; color: var(--text-leise); font-size: 0.95rem; }
.fuss .wrap { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem 2rem; }
@media (min-width: 38.0625rem) { .fuss .wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.fuss nav a { padding: 0.4rem 0; }
.fuss a { color: var(--text-leise); font-weight: 700; }
.fuss a:hover { color: var(--orange-tief); }

/* ---------- Einblenden beim Scrollen ---------- */

.einblenden { opacity: 0; translate: 0 1.5rem; transition: opacity 0.6s, translate 0.6s; }
.einblenden.sichtbar { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
    .einblenden { opacity: 1; translate: none; transition: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* Ohne JavaScript alles sofort zeigen. */
.no-js .einblenden { opacity: 1; translate: none; }

/* ---------- Unterseiten (Rechtstexte, Kontakt, 404) ---------- */

.seite main {
    max-width: 46rem; margin: 1rem 0.75rem 0;
    background: var(--surface-raised); border-radius: var(--r-lg);
    padding: 1.75rem 1.25rem;
    box-shadow: var(--schatten);
}
@media (min-width: 40rem) { .seite main { margin: 2rem auto 0; padding: 2.5rem 2.75rem; } }
.seite main h1 { font-size: 1.75rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 40rem) { .seite main h1 { font-size: 2rem; } }
.seite main h2 { font-size: 1.3rem; margin: 2.25rem 0 0.5rem; }
.seite main h3 { font-size: 1.1rem; margin: 1.5rem 0 0.25rem; }
.seite main p + p { margin-top: 0.9rem; }
.seite main ul { padding-left: 1.25rem; }
.seite main li { margin: 0.25rem 0; }
.seite .stand { color: var(--text-leise); font-size: 0.9375rem; margin-bottom: 1rem; }
.seite address { font-style: normal; }
.seite address + p, .seite address + ul { margin-top: 0.9rem; }
.seite .fuss { margin-top: 3rem; }

/* Kontaktformular */
.formular { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.formular label { display: grid; gap: 0.35rem; font-weight: 800; }
.formular input, .formular textarea {
    font: inherit; color: var(--text);
    padding: 0.75rem 0.9rem; border-radius: var(--r-md);
    border: 1px solid var(--linie-stark); background: var(--teig);
}
.formular input::placeholder, .formular textarea::placeholder { color: var(--text-leise); }
.formular textarea { min-height: 9rem; resize: vertical; }
.formular .hinweis { font-size: 0.9rem; color: var(--text-leise); font-weight: 400; }
.formular .falle { position: absolute; left: -9999px; }
.meldung { padding: 0.9rem 1.1rem; border-radius: var(--r-md); background: var(--teig); font-weight: 700; }
.meldung[hidden] { display: none; }

.fehlerseite main { text-align: center; }
.fehlerseite main img { width: 10rem; margin: 0 auto 1rem; }
.fehlerseite main p { margin: 1rem 0 1.75rem; color: var(--text-leise); }


/* ---------- Korrekturen Mockups ---------- */
/* Ausgeblendete bzw. entfernte Zeilen nehmen keinen Platz ein und zeigen keine Trennlinie. */
.ios-zeile.eingeblendet.versteckt, .ios-zeile.zu { min-height: 0; padding-block: 0; }
.ios-zeile.versteckt::before, .ios-zeile.zu + .ios-zeile::before { display: none; }
.dialog { text-align: center; }
.bordered { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); }
/* Navigationstitel kürzt wie in iOS, wenn die Knöpfe links und rechts Platz brauchen. */
.ios-nav .mitte { max-width: 38%; }
.ios-nav .mitte strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch-inhalt, .widget-inhalt, .live-inhalt { text-align: left; }
.geraet .buehne { width: 100%; }
.live { width: 18rem; max-width: 100%; }