/* fonts.css */
/* =========================================
   Schriften des Redesigns
   Bricolage Grotesque (Ueberschriften), Karla (Fliesstext/UI),
   IBM Plex Mono (Label/Zettel-Nummern). Siehe
   design/nizember-redesign/APP-SHELL.md und docs/THIRD_PARTY_NOTICES.md.

   Alle drei Dateien liegen lokal unter assets/fonts - keine Google-Fonts-CDN-
   Bindung, keine externe HTTPS-Anfrage im Kernfluss. Nur der lateinische
   Unicode-Bereich (U+0000-00FF), der deckt deutsche Umlaute und ss ab.
========================================= */

@font-face {
    font-family:"Bricolage Grotesque";
    font-style:normal;
    font-weight:200 800;
    font-display:swap;
    src:url("../assets/fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
}

@font-face {
    font-family:"Karla";
    font-style:normal;
    font-weight:400 800;
    font-display:swap;
    src:url("../assets/fonts/karla-variable.woff2") format("woff2-variations");
}

@font-face {
    font-family:"IBM Plex Mono";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
    font-family:"IBM Plex Mono";
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
    font-family:"IBM Plex Mono";
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url("../assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* variables.css */
/* =========================================
   PizzaCalc Theme Tokens
   Light mode is the default. Components use
   semantic roles, never fixed colour values.
========================================= */

:root,
[data-theme="light"] {
    color-scheme:light;

    /* Mehl. Der Entwurf setzt #EDE7DA als Flaeche des Fensters und #F7F4EC als
       Papier der Zettel darauf - die Kopfzeile sitzt direkt auf dem Mehl, die
       Karten liegen als Papier darin. Bis zum 14.08.2026 stand es hier
       umgekehrt, und damit lag jede Karte dunkler als ihr Untergrund. */
    --color-page-background:#ede7da;
    /* Das feine Punktraster auf der Mehl-Flaeche, aus jeder .dc.html-Vorlage
       (Desktop/Tablet/Mobile) uebereinstimmend: radial-gradient, 7x7px Kachel. */
    --page-dot-texture:rgba(35, 32, 27, .05);
    --color-page-raised:#f3ecdd;
    --color-surface:#f7f4ec;
    --color-surface-raised:#f7f4ec;
    --color-surface-muted:#f3ecdd;
    --color-surface-interactive:#e8dfce;
    --color-surface-overlay:rgba(237, 231, 218, .82);
    --color-surface-overlay-strong:rgba(237, 231, 218, .96);
    --color-surface-subtle:rgba(255, 255, 255, .56);
    --color-control-hover:#e8dfce;

    --color-text-primary:#23201b;
    /* Der Entwurf zeichnet #656b5d. Seine Flaechen sind dunkler als die bisherigen
       (#e8dfce statt #e9e6de), und dort faellt der Ton auf 4,16 - unter dem, was
       heute schon lief. Um eine Winzigkeit abgedunkelt haelt er 4,54 auf jeder
       Flaeche, sichtbar ist der Unterschied nicht. */
    --color-text-secondary:#606558;
    --color-text-muted:var(--color-text-secondary);
    --color-text-inverse:#f7f4ec;

    --color-brand-orange:#b85f16;
    /* Der Akzent des Redesigns. Das Orange bleibt als benanntes Thema erhalten
       (accent-themes.css, "forglas-orange"); Vorgabe ist ab dem 14.08.2026 das Rot. */
    --color-brand-red:#b33a1a;
    --color-accent-theme:var(--color-brand-red);
    --color-accent-theme-strong:#8f2e14;
    --color-accent-theme-soft:rgba(179, 58, 26, .12);
    --color-accent-theme-focus:rgba(179, 58, 26, .28);
    /* Im hellen Satz sind Fuellton und Schriftton des Akzents derselbe, deshalb
       braucht er hier kein eigenes Token - --color-primary zeigt unveraendert auf
       den starken Ton. Im dunklen Satz gehen sie auseinander, siehe dort. */
    --color-primary:var(--color-accent-theme-strong);
    /* Ausgenommen die volle Knopffflaeche: der Entwurf fuellt sie im
       Ruhezustand mit dem Rot und dunkelt erst beim Beruehren nach
       (Turn 11b/11c/11d, dort auf --color-primary-strong). Ohne eigenes Token
       laege die Fuellung schon im Ruhezustand auf dem dunklen Ton und das
       Beruehren waere farblich folgenlos. Der dunkle Satz kennt dieses Token
       bereits, siehe dort. */
    --color-accent-theme-fill:var(--color-brand-red);
    --color-primary-strong:var(--color-accent-theme-strong);
    --color-primary-soft:var(--color-accent-theme-soft);
    --color-primary-focus:var(--color-accent-theme-focus);
    --color-accent:var(--color-accent-theme);
    --color-accent-soft:var(--color-accent-theme-soft);
    --color-status-success:#4f7734;
    /* Schrift auf der Erfolgsflaeche. Eigenes Token, weil --color-text-inverse
       im Dark Mode auf der roten Fuellung sitzt und dort creme sein muss - auf
       dem hellen Gruen des Dark Mode waere creme mit 1,85:1 unlesbar. */
    --color-on-success:var(--color-text-inverse);
    --color-status-warning:#9a6500;
    --color-status-error:#a8453c;
    --color-danger:var(--color-status-error);
    --color-focus:#316f9d;

    --color-border-subtle:rgba(35, 32, 27, .14);
    --color-border-strong:rgba(35, 32, 27, .28);
    --color-border-primary:color-mix(in srgb, var(--color-accent-theme) 24%, transparent);
    --color-border-primary-strong:color-mix(in srgb, var(--color-accent-theme) 42%, transparent);
    --color-border-accent:color-mix(in srgb, var(--color-accent-theme) 28%, transparent);

    --color-navigation-background:rgba(237, 231, 218, .82);
    --color-navigation-active:var(--color-surface-raised);
    --color-selection:rgba(217, 120, 32, .28);
    --color-brand-mark:#e6b676;
    --color-brand-mark-border:rgba(99, 70, 31, .12);
    --color-brand-mark-highlight:rgba(255, 255, 255, .75);
    --color-modal-backdrop:rgba(28, 29, 24, .64);
    --gradient-app-chrome:linear-gradient(180deg, rgba(248, 247, 243, .98) 0%, rgba(248, 247, 243, .9) 74%, rgba(248, 247, 243, 0) 100%);
    /* Die Theke. Nuss #3A2E22 laeuft nach #2C2219 aus. Sie sieht in beiden Modi
       gleich aus, darum stehen diese Werte nur hier und nicht noch einmal im
       dunklen Satz. Siehe design/nizember-redesign/APP-SHELL.md. */
    --color-counter-top:#3a2e22;
    --color-counter-bottom:#2c2219;
    --color-counter-text:#f3ecdd;
    --color-counter-text-muted:#c9bfae;
    --color-counter-edge:rgba(247, 244, 236, .14);
    --color-counter-speech:#e8dfce;
    --shadow-counter-figure:drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
    --gradient-counter:linear-gradient(180deg, var(--color-counter-top) 0%, var(--color-counter-bottom) 100%);
    /* Die sechs Flaechenverlaeufe (--gradient-panel, -panel-feature, -planning,
       -guided, -foundation, -recommendation) sind am 15.08.2026 entfallen. Der
       Entwurf kennt genau zwei Verlaeufe - die Theke und die Kopfzeile, beide
       unten - und faerbt jede andere Flaeche flach. Die Verlaeufe kippten je
       nach Fensterbreite unterschiedlich und liessen gleiche Flaechen
       nebeneinander verschieden hell aussehen. */

    --doughy-aura-center:rgba(255, 225, 172, .55);
    --doughy-aura-edge:rgba(230, 188, 116, .13);
    --doughy-contact-shadow:rgba(84, 57, 23, .26);
    --doughy-figure-shadow:rgba(83, 53, 16, .12);
    --doughy-depth-shadow:rgba(86, 57, 22, .16);
    --doughy-rim-light:rgba(255, 248, 229, .34);
    --doughy-stage-floor:rgba(231, 196, 132, .2);
    --doughy-face-surface:rgba(248, 220, 181, .92);
    --doughy-highlight:rgba(255, 248, 229, .42);

    --shadow-sm:0 2px 8px rgba(56, 47, 30, .05), 0 12px 26px rgba(56, 47, 30, .06);
    --shadow-md:0 8px 20px rgba(56, 47, 30, .08), 0 24px 48px rgba(56, 47, 30, .08);
    --shadow-lg:0 20px 48px rgba(56, 47, 30, .12);
    --shadow-primary:0 8px 18px color-mix(in srgb, var(--color-accent-theme) 22%, transparent);
    --shadow-primary-hover:0 12px 24px color-mix(in srgb, var(--color-accent-theme) 30%, transparent);
    --shadow-focus:0 0 0 3px var(--color-primary-focus);

    /* Shared stacking order. Components must use these semantic layers instead of ad-hoc values. */
    --z-content:0;
    --z-sticky:10;
    --z-companion:20;
    --z-popover:30;
    --z-navigation:40;
    --z-modal:50;

    --background:var(--color-page-background);
    --background-raised:var(--color-page-raised);
    --surface:var(--color-surface);
    --surface-raised:var(--color-surface-raised);
    --surface-muted:var(--color-surface-muted);
    --surface-interactive:var(--color-surface-interactive);
    --primary:var(--color-primary);
    --primary-strong:var(--color-primary-strong);
    --primary-soft:var(--color-primary-soft);
    --primary-focus:var(--color-primary-focus);
    --accent:var(--color-accent);
    --accent-soft:var(--color-accent-soft);
    --text:var(--color-text-primary);
    --text-secondary:var(--color-text-secondary);
    --text-muted:var(--color-text-muted);
    --border:var(--color-border-subtle);
    --border-strong:var(--color-border-strong);
    --focus:var(--color-focus);
    --danger:var(--color-danger);
    --success:var(--color-status-success);
    --warning:var(--color-status-warning);
    --error:var(--color-status-error);

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:40px;
    --space-8:48px;
    --space-9:64px;

    --layout-gutter:clamp(16px, 2.2vw, 32px);
    --layout-gap:clamp(16px, 2vw, 28px);
    --layout-rail:204px;
    --content-max-desktop:1600px;
    --content-max-reading:760px;
    --header-mobile:56px;
    --nav-mobile:56px;
    --counter-mobile:172px;
    --touch-target:44px;
    --companion-slot-mobile:132px;
    --companion-slot-landscape:224px;
    --companion-slot-tablet:292px;
    --companion-slot-desktop:348px;
    --companion-header-expanded-min:132px;
    --companion-header-compact-min:82px;
    --companion-character-expanded:142px;
    --companion-character-compact:116px;

    /* Scharfe Linie des Redesigns (design/nizember-redesign, Turn 10-14): 2px fuer
       Fortschrittsbahnen und duenne Akzente, 3px als dominanter Standard fuer
       Buttons, Karten, Chips und Badges, 6px fuer grosse Illustrationsflaechen.
       --radius-full bleibt 999px, aber ab jetzt ausschliesslich fuer den
       Toggle-Switch aus Turn 14e reserviert - der existiert im Code noch nicht,
       jede bisherige Pillen-Verwendung wurde auf --radius-sm/--radius-md umgestellt. */
    --radius-sm:2px;
    --radius-md:3px;
    --radius-lg:6px;
    --radius-xl:6px;
    --radius-full:999px;

    --font-caption:.75rem;
    --font-label:.875rem;
    --font-body:1rem;
    --font-section:1.5rem;
    --font-hero-size:clamp(2.1rem, 4vw, 3rem);
    --line-tight:1.1;
    --line-body:1.55;

    /* Schriften des Redesigns, siehe css/fonts.css und
       design/nizember-redesign/APP-SHELL.md. --font-display trug bis zum
       14.08.2026 zwei widerspruechliche Bedeutungen im selben Namen (erst eine
       Groesse, dann dieser Schriftstapel) - die Groesse heisst jetzt
       --font-hero-size, --font-display ist ausschliesslich der Schriftstapel. */
    --font-display:"Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ui:"Karla", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --motion-fast:160ms;
    --motion-base:220ms;
    --motion-slow:320ms;
    --ease-standard:cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] {
    color-scheme:dark;

    --color-page-background:#1c1712;
    --page-dot-texture:rgba(247, 244, 236, .035);
    --color-page-raised:#23201b;
    --color-surface:#2c2219;
    --color-surface-raised:#3a2e22;
    --color-surface-muted:#3a2e22;
    --color-surface-interactive:#4a4038;
    --color-surface-overlay:rgba(28, 23, 18, .86);
    --color-surface-overlay-strong:rgba(35, 32, 27, .96);
    --color-surface-subtle:rgba(255, 248, 237, .07);
    --color-control-hover:#4a4038;

    --color-text-primary:#f7f4ec;
    --color-text-secondary:#c9bfae;
    --color-text-muted:#b6ac9c;
    --color-text-inverse:#f7f4ec;

    --color-brand-orange:#e8a25c;
    /* Auf dunklem Grund kann der volle Rotton nicht als Schrift stehen: 3,00:1.
       Aufgehellt haelt er 4,52:1 auf allen fuenf Flaechen - siehe DARK-MODE.md.
       Als Fuellung eines Knopfes bleibt #b33a1a unveraendert, mit cremefarbener
       Schrift darauf 5,40:1. */
    --color-brand-red:#ed9881;
    --color-accent-theme:var(--color-brand-red);
    --color-accent-theme-strong:#f3bbac;
    --color-accent-theme-soft:rgba(237, 152, 129, .16);
    --color-accent-theme-focus:rgba(237, 152, 129, .34);
    --color-accent-theme-fill:#b33a1a;
    /* Die Fuellung bleibt der volle Rotton des Entwurfs. Aufgehellt wird der
       Akzent nur dort, wo er SCHRIFT ist - --color-accent-theme oben. */
    --color-primary:var(--color-accent-theme-fill);
    --color-primary-strong:#8f2e14;
    --color-primary-soft:var(--color-accent-theme-soft);
    --color-primary-focus:var(--color-accent-theme-focus);
    --color-accent:var(--color-accent-theme);
    --color-accent-soft:var(--color-accent-theme-soft);
    --color-status-success:#9cc17c;
    --color-on-success:#23201b;
    --color-status-warning:#efc76e;
    --color-status-error:#ffaaa0;
    --color-danger:var(--color-status-error);
    --color-focus:#a8d6ff;

    --color-border-subtle:rgba(247, 244, 236, .13);
    --color-border-strong:rgba(247, 244, 236, .27);
    --color-border-primary:color-mix(in srgb, var(--color-accent-theme) 34%, transparent);
    --color-border-primary-strong:color-mix(in srgb, var(--color-accent-theme) 56%, transparent);
    --color-border-accent:color-mix(in srgb, var(--color-accent-theme) 35%, transparent);

    --color-navigation-background:rgba(48, 45, 38, .82);
    --color-navigation-active:#3a372f;
    --color-selection:rgba(232, 162, 92, .3);
    --color-brand-mark:#f4d49a;
    --color-brand-mark-border:rgba(255, 227, 173, .22);
    --color-brand-mark-highlight:rgba(255, 250, 240, .28);
    --color-modal-backdrop:rgba(5, 5, 4, .76);
    --gradient-app-chrome:linear-gradient(180deg, rgba(23, 23, 19, .98) 0%, rgba(23, 23, 19, .92) 74%, rgba(23, 23, 19, 0) 100%);
    /* Die sechs Flaechenverlaeufe sind auch hier entfallen, siehe hellen Satz. */

    --doughy-aura-center:rgba(255, 204, 137, .18);
    --doughy-aura-edge:rgba(214, 145, 72, .06);
    --doughy-contact-shadow:rgba(0, 0, 0, .38);
    --doughy-figure-shadow:rgba(0, 0, 0, .28);
    --doughy-depth-shadow:rgba(0, 0, 0, .24);
    --doughy-rim-light:rgba(255, 230, 187, .18);
    --doughy-stage-floor:rgba(214, 145, 72, .1);
    --doughy-face-surface:rgba(239, 202, 154, .9);
    --doughy-highlight:rgba(255, 229, 186, .24);

    --shadow-sm:0 2px 8px rgba(0, 0, 0, .16), 0 12px 26px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 248, 237, .035);
    --shadow-md:0 8px 20px rgba(0, 0, 0, .24), 0 24px 48px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 248, 237, .04);
    --shadow-lg:0 20px 48px rgba(0, 0, 0, .32);
    --shadow-primary:0 8px 18px rgba(0, 0, 0, .22);
    --shadow-primary-hover:0 12px 24px rgba(0, 0, 0, .28);
}

/* accent-themes.css */
/* =========================================
   PizzaCalc Accent Theme Foundation
   Sprint 45 prepares token maps only. There
   is intentionally no selector or persistence.
========================================= */

html[data-accent-theme="forglas-orange"] {
    --color-accent-theme:var(--color-brand-orange);
    --color-accent-theme-strong:#91470e;
    --color-accent-theme-soft:rgba(184, 95, 22, .12);
    --color-accent-theme-focus:rgba(184, 95, 22, .28);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-theme="dark"][data-accent-theme="forglas-orange"] {
    --color-accent-theme:var(--color-brand-orange);
    --color-accent-theme-strong:#f3bf83;
    --color-accent-theme-soft:rgba(232, 162, 92, .16);
    --color-accent-theme-focus:rgba(232, 162, 92, .34);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-accent-theme="forest"] {
    --color-accent-theme:#4f7734;
    --color-accent-theme-strong:#3d6129;
    --color-accent-theme-soft:rgba(79, 119, 52, .13);
    --color-accent-theme-focus:rgba(79, 119, 52, .28);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-theme="dark"][data-accent-theme="forest"] {
    --color-accent-theme:#9cc17c;
    --color-accent-theme-strong:#c0dc9e;
    --color-accent-theme-soft:rgba(156, 193, 124, .16);
    --color-accent-theme-focus:rgba(156, 193, 124, .32);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-accent-theme="ocean"] {
    --color-accent-theme:#28748c;
    --color-accent-theme-strong:#18596d;
    --color-accent-theme-soft:rgba(40, 116, 140, .13);
    --color-accent-theme-focus:rgba(40, 116, 140, .28);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-theme="dark"][data-accent-theme="ocean"] {
    --color-accent-theme:#72c2d5;
    --color-accent-theme-strong:#a4dce8;
    --color-accent-theme-soft:rgba(114, 194, 213, .16);
    --color-accent-theme-focus:rgba(114, 194, 213, .32);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-accent-theme="carbon"] {
    --color-accent-theme:#59605e;
    --color-accent-theme-strong:#3e4543;
    --color-accent-theme-soft:rgba(89, 96, 94, .13);
    --color-accent-theme-focus:rgba(89, 96, 94, .28);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-theme="dark"][data-accent-theme="carbon"] {
    --color-accent-theme:#c1c7c5;
    --color-accent-theme-strong:#e0e4e3;
    --color-accent-theme-soft:rgba(193, 199, 197, .15);
    --color-accent-theme-focus:rgba(193, 199, 197, .3);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-accent-theme="midnight"] {
    --color-accent-theme:#344c7d;
    --color-accent-theme-strong:#25375d;
    --color-accent-theme-soft:rgba(52, 76, 125, .13);
    --color-accent-theme-focus:rgba(52, 76, 125, .28);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-theme="dark"][data-accent-theme="midnight"] {
    --color-accent-theme:#93aee2;
    --color-accent-theme-strong:#bacbf0;
    --color-accent-theme-soft:rgba(147, 174, 226, .16);
    --color-accent-theme-focus:rgba(147, 174, 226, .32);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-accent-theme="purple"] {
    --color-accent-theme:#765091;
    --color-accent-theme-strong:#58366f;
    --color-accent-theme-soft:rgba(118, 80, 145, .13);
    --color-accent-theme-focus:rgba(118, 80, 145, .28);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

html[data-theme="dark"][data-accent-theme="purple"] {
    --color-accent-theme:#c4a0dc;
    --color-accent-theme-strong:#dec3ed;
    --color-accent-theme-soft:rgba(196, 160, 220, .16);
    --color-accent-theme-focus:rgba(196, 160, 220, .32);
    --color-accent-theme-fill:var(--color-accent-theme-strong);
}

/* base.css */
/* =========================================
   Base
========================================= */

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* `hidden` is an application-state contract. Component display declarations
   must never turn an intentionally hidden control or live region back on. */
[hidden] { display:none !important; }

html {
    background:var(--background);
    color-scheme:light;
    scroll-behavior:smooth;
}

html[data-theme="dark"] {
    color-scheme:dark;
}

body {
    min-width:0;
    background-color:var(--background);
    background-image:radial-gradient(var(--page-dot-texture) 1px, transparent 1px);
    background-size:7px 7px;
    color:var(--text);
    font-family:var(--font-ui);
    font-size:var(--font-body);
    line-height:var(--line-body);
    text-rendering:optimizeLegibility;
}

h1,
h2,
h3 {
    font-family:var(--font-display);
}

button,
input,
select {
    font:inherit;
}

button,
select {
    -webkit-tap-highlight-color:transparent;
}

::selection {
    background:var(--color-selection);
    color:var(--text);
}

:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

/* layout.css */
/* =========================================
   Application Layout
========================================= */

.app {
    width:min(100%, 1480px);
    margin:0 auto;
    padding:0 max(var(--space-6), env(safe-area-inset-right)) max(var(--space-7), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
}

/* ==========================
   Sticky App Chrome
========================== */

.app-chrome {
    position:sticky;
    z-index:var(--z-sticky);
    top:0;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(290px, 390px);
    grid-template-areas:"header doughy";
    align-items:center;
    column-gap:var(--space-6);
    padding:var(--space-4) 0 var(--space-6);
    background:var(--gradient-app-chrome);
    backdrop-filter:blur(10px);
}

.doughy-scroll-anchor {
    height:1px;
}

/* Die Theke traegt ab 760px abwaerts die Reiter-Zeile und spaeter Doughy als
   eigene Zone am unteren Rand. Oberhalb davon reicht sie ihr Kind unveraendert
   an das Raster der Kopfzeile durch, damit sich am Desktop nichts verschiebt. */
.theke {
    display:contents;
}

.header {
    grid-area:header;
    display:grid;
    grid-template-areas:"brand navigation utilities";
    grid-template-columns:minmax(220px, 1fr) auto minmax(80px, 1fr);
    align-items:center;
    gap:var(--space-5);
    min-height:80px;
    padding:var(--space-3) var(--space-4);
    background:var(--color-surface-overlay);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.brand-lockup {
    grid-area:brand;
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

/* Die Wortmarke ist der Weg nach Home. Auf dem Desktop zeigt der Entwurf keinen
   eigenen Home-Reiter (Rahmen 10b, siehe css/adaptive.css), und dort war sie bis
   zum 16.08.2026 ein totes div: wer Home verlassen hatte, kam nur ueber den
   Zurueck-Knopf oder die URL zurueck. Das Ziel steht als echter Verweis im
   Markup, damit es ohne JavaScript traegt und der Hash-Router es von selbst
   aufnimmt. Aussehen unveraendert - eine Wortmarke soll nicht wie ein Link
   aussehen, sich beim Beruehren aber als einer zu erkennen geben. */
/* Die Wortmarke ist seit dem 31.08.2026 ein echter Weg nach Hause - vorher tat sie auf der
   Werkbank-Route nichts. Damit wurde ihre Hoehe zum Problem: 20 px sind auf einem Touchgeraet
   kein Ziel. Die Flaeche waechst auf 44 px, ohne die Schrift zu verschieben, weil das Lockup
   ohnehin mittig ausrichtet. */
@media (pointer: coarse) {
    .brand-home { min-height:44px; }
}

.brand-home {
    display:inline-flex;
    align-items:center;
    color:inherit;
    text-decoration:none;
    border-radius:var(--radius-md);
}

@media (hover:hover) and (pointer:fine) {
    .brand-home:hover h1 { color:var(--accent); }
}

.brand-home:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:4px;
}

.header h1 {
    color:var(--text);
    font-size:clamp(1rem, 1.4vw, 1.22rem);
    font-weight:700;
    letter-spacing:-.035em;
    line-height:var(--line-tight);
    white-space:nowrap;
}

.header h1 span {
    color:var(--primary);
}

/* Das Entwicklungsstadium steht im Entwurf als stilles Mono-Kuerzel direkt neben der
   Wortmarke (Rahmen 10b), nicht als gefuelltes Etikett. */
/* Medaillen-Leiste (Gimmick, Rahmen 10b). Die Masse stehen, damit das spaetere Einhaengen
   nur noch Inhalte braucht: 25px-Kreise, Mono, 5px Abstand. Drei Auspraegungen sind im
   Entwurf zu sehen - gefuellt (Ofenrot), umrandet und gestrichelt. */
.brand-medals { display:flex; align-items:center; gap:5px; }
.brand-medal {
    display:grid;
    place-content:center;
    width:25px;
    height:25px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-full);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:.66rem;
    font-weight:600;
}
.brand-medal--earned { color:var(--color-text-inverse); background:var(--primary); border-color:transparent; }
.brand-medal--locked { border-style:dashed; color:var(--text-secondary); }

/* Das Zeichen traegt die Akzentfarbe, die Wortmarke die Textfarbe - zusammen ein Lockup,
   einzeln beide brauchbar. flex-shrink:0, damit es in engen Koepfen nicht zerdrueckt wird. */
/* Auf schmalen Koepfen kostet das Zeichen Platz, den die Zeile nicht hatte: Wortmarke und
   Stufenangabe stiessen danach buendig an den Einstellungen-Knopf. Kleiner und enger, und die
   Stufe bekommt einen Abstand nach rechts. */
@media (max-width:480px) {
    .brand-sign { width:18px; height:18px; margin-inline-end:var(--space-1); }
    .brand-stage { margin-inline-end:var(--space-3); }
}

.brand-sign {
    flex:0 0 auto;
    margin-inline-end:var(--space-2);
    color:var(--primary);
}

.brand-stage {
    color:var(--primary);
    font-family:var(--font-mono);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    white-space:nowrap;
}

.version {
    padding:var(--space-2) var(--space-3);
    color:var(--primary);
    font-size:var(--font-caption);
    font-weight:700;
    line-height:1;
    background:var(--primary-soft);
    border:1px solid var(--color-border-primary);
    border-radius:var(--radius-md);
}

.header-utilities {
    display:flex;
    grid-area:utilities;
    gap:var(--space-2);
    align-items:center;
    justify-self:end;
}

/* ==========================
   Workspace
========================== */

.workspace-shell {
    display:grid;
    grid-template-columns:190px minmax(0, 1fr);
    gap:var(--space-6);
    align-items:start;
}

.workspace-content {
    min-width:0;
}

.journey-sidebar {
    position:sticky;
    top:260px;
    padding:var(--space-5) 0;
}

.journey-kicker {
    margin-bottom:var(--space-4);
    color:var(--primary);
    font-size:var(--font-caption);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.journey-list {
    display:grid;
    gap:var(--space-4);
    list-style:none;
}

.journey-list li {
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0, 1fr);
    gap:var(--space-3);
    align-items:start;
    color:var(--text-muted);
}

.journey-list li:not(:last-child)::after {
    position:absolute;
    top:30px;
    left:13px;
    width:1px;
    height:22px;
    background:var(--border);
    content:"";
}

.journey-list li > span {
    display:grid;
    width:28px;
    height:28px;
    color:var(--text-secondary);
    place-items:center;
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:50%;
    font-size:var(--font-caption);
    font-weight:700;
}

.journey-list strong,
.journey-list small {
    display:block;
}

.journey-list strong {
    color:inherit;
    font-size:var(--font-label);
}

.journey-list small {
    margin-top:1px;
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.journey-list .is-current {
    color:var(--text);
}

.journey-list .is-current > span {
    color:var(--color-text-inverse);
    background:var(--primary);
    border-color:var(--primary);
    box-shadow:var(--shadow-primary);
}

.journey-list .is-complete > span {
    color:var(--color-text-inverse);
    background:var(--success);
    border-color:var(--success);
}

.journey-note {
    margin-top:var(--space-6);
    padding-top:var(--space-5);
    color:var(--text-secondary);
    border-top:1px solid var(--border);
    font-size:var(--font-caption);
    line-height:1.55;
}

/* ==========================
   Dashboard
========================== */

.calculator-layout {
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(310px, .8fr);
    gap:var(--space-5);
    align-items:start;
}

.dashboard-column {
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    min-width:0;
}

.dashboard-column > .panel {
    width:100%;
}

.dashboard-column-left {
    display:contents;
}

.input-panel {
    grid-column:1;
    grid-row:1;
}

.result-panel {
    grid-column:2;
    grid-row:1;
}

.preparation-panel {
    grid-column:1;
    grid-row:2;
}

/* ==========================
   Panels
========================== */

.panel {
    padding:var(--space-6);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.panel-heading h2,
.empty-state-panel h2,
.planning-intro h2 {
    margin-top:var(--space-1);
    color:var(--text);
    font-size:var(--font-section);
    letter-spacing:-.04em;
    line-height:var(--line-tight);
}

/* Die Augenbraue sagt, wo man ist - sie ruft nicht. Im Entwurf steht sie ueber
   jedem Block als kleine, gesperrte Monospace-Zeile auf Nebentextfarbe
   (Turn 11b "Teigfuehrung", 11d "Was jetzt", 14a "Essenszeit"), nie in der
   Akzentfarbe. Die Werkbank hatte das am 15.08.2026 zuerst als eigene Regel
   bekommen; jetzt gilt es fuer alle Bildschirme. */
.eyebrow {
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:.1em;
    line-height:1.2;
    text-transform:uppercase;
}

.planning-layout {
    display:grid;
    grid-template-columns:minmax(0, .75fr) minmax(340px, 1fr);
    gap:var(--space-5);
    max-width:940px;
}

.companion-settings {
    max-width:720px;
    margin-bottom:var(--space-5);
}

.companion-settings h2 {
    margin-top:var(--space-1);
    color:var(--text);
    font-size:var(--font-section);
    letter-spacing:-.04em;
    line-height:var(--line-tight);
}

.setting-toggle {
    display:flex;
    gap:var(--space-3);
    align-items:flex-start;
    margin-top:var(--space-4);
    padding:var(--space-3) 0;
    cursor:pointer;
}

.setting-toggle input {
    width:20px;
    height:20px;
    margin-top:2px;
    accent-color:var(--primary);
}

.setting-toggle strong,
.setting-toggle small {
    display:block;
}

.setting-toggle strong {
    color:var(--text);
    font-size:var(--font-label);
}

.setting-toggle small,
.setting-note {
    margin-top:2px;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.45;
}

.setting-note {
    margin-top:0;
}

/* Die Wertkarte aus Turn 14a ("Essenszeit"): gesperrte Monospace-Marke, darunter
   das Ergebnis gross und ruhig. Die Hefemenge ist kein Hinweis, den man
   wegklickt, sondern die Antwort des Assistenten - sie steht deshalb auf
   Papier und nicht mehr in gedaempfter Nebentextfarbe. */
.recommendation-panel {
    margin-top:var(--space-5);
    padding:var(--space-4);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.recommendation-panel h3 {
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.recommendation-panel p {
    margin-top:var(--space-2);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:1.05rem;
    line-height:1.4;
}

/* ==========================
   Feedback & Footer
========================== */

.input-message {
    min-height:1.25rem;
    margin-top:var(--space-4);
    color:var(--danger);
    font-size:var(--font-label);
}

.footer {
    margin-top:var(--space-8);
    color:var(--text-muted);
    font-size:var(--font-caption);
    text-align:center;
}

/* Die Hefeart steht neben der Menge, die sie bestimmt. Vorher lag sie in der
   Schublade "Zeiten anpassen", wo niemand nach einer Zutat sucht. */
.recommendation-panel .form-group {
    margin-top:var(--space-3);
}

/* forms.css */
/* =========================================
   Forms
========================================== */

.form-group {
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin-bottom:var(--space-5);
}

.form-group:last-child {
    margin-bottom:0;
}

.form-group label {
    color:var(--text-secondary);
    font-size:var(--font-label);
    font-weight:600;
    line-height:1.35;
}

.form-group input,
.form-group select {
    width:100%;
    height:56px;
    padding:0 var(--space-4);
    color:var(--text);
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font-size:var(--font-body);
    transition:border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
    appearance:none;
}

.form-group input:hover,
.form-group select:hover {
    border-color:var(--border-strong);
    background:var(--color-control-hover);
}

.form-group input:focus,
.form-group select:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:var(--shadow-focus);
}

.number-control {
    display:grid;
    grid-template-columns:56px minmax(0, 1fr) 56px;
    gap:var(--space-3);
    align-items:center;
}

.number-input {
    text-align:center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin:0;
    -webkit-appearance:none;
}

input[type="number"] {
    appearance:textfield;
    -moz-appearance:textfield;
}

select {
    cursor:pointer;
}

/* cards.css */
/* =========================================
   Result Cards
========================================== */

/* Der Kuechenzettel aus Turn 11d. Mehl, Wasser, Salz und Hefe stehen dort
   zweispaltig als Zeilen mit gepunkteter Trennung, die Menge rechts in der
   Monospace - nicht als Kachelraster. Auf dem Telefon lief das ohnehin schon
   flach; die Kacheln waren nur noch die Desktop-Ausnahme, und mit ihnen fiel
   der Verlaufshintergrund weg, den der Entwurf nirgends benutzt. */
.result-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0 var(--space-6);
    margin-top:var(--space-4);
}

.result-card {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--space-3);
    min-height:0;
    padding:var(--space-3) 0;
    background:none;
    border:0;
    border-bottom:1px dotted var(--border-strong);
    border-radius:0;
    box-shadow:none;
    animation:fadeIn var(--motion-slow) var(--ease-standard);
}

.result-card span {
    margin-bottom:0;
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.35;
}

.result-card strong {
    margin-left:auto;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:1rem;
    font-weight:600;
    line-height:var(--line-tight);
    text-align:right;
    white-space:nowrap;
}

/* Die unterste Zeile jeder Spalte schliesst ohne Linie ab - im Zettel des
   Entwurfs trennt die Punktlinie zwischen Zeilen, sie unterstreicht nicht die
   letzte. Die Summe steht ueber beiden Spalten, danach fuellen vier Zutaten
   zwei Zeilen: die letzten beiden Kinder sind also genau die untersten. */
.result-card:nth-last-child(-n+2):not(:first-child) {
    border-bottom:0;
}

/* Die Hefezeile traegt als einzige einen Nachsatz ("Automatisch berechnet").
   Er bekommt die ganze Zeilenbreite, damit er nicht zwischen Bezeichnung und
   Menge geraet. */
.result-card small {
    flex-basis:100%;
    margin-top:2px;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    text-align:right;
}

/* Der Gesamtteig ist keine Zutat, sondern die Summe darueber. Er steht wie die
   Kopfzeile des Zettels ueber beiden Spalten, mit gesperrter Marke und der
   grossen Zahl im Akzent - dieselbe Rolle, die in Turn 11b die Hydration hat. */
.result-card:first-child {
    grid-column:1 / -1;
    padding-bottom:var(--space-3);
    border-bottom:1px solid var(--border-strong);
}

.result-card:first-child span {
    font-family:var(--font-mono);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.result-card:first-child strong {
    color:var(--accent);
    font-family:var(--font-display);
    font-size:clamp(1.9rem, 3.4vw, 2.4rem);
    font-weight:800;
    letter-spacing:-.045em;
}

/* buttons.css */
/* =========================================
   Actions
========================================== */

.primary-button,
.secondary-button,
.quiet-button,
.number-btn {
    border:1px solid transparent;
    cursor:pointer;
    transition:background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

/* Der Entwurf kennt genau zwei Knopfformen (Turn 11b, 11c, 11d): eine volle
   Flaeche im Akzent und daneben eine blosse Kontur. Verlaeufe kommen darin
   nirgends vor - der 135-Grad-Verlauf hier war das letzte Stueck der alten
   Oberflaeche und liess den Knopf je nach Breite anders aussehen. */
.primary-button {
    min-height:50px;
    padding:0 var(--space-5);
    color:var(--color-text-inverse);
    background:var(--color-accent-theme-fill);
    border-radius:var(--radius-md);
    font-weight:700;
}

/* Zweite und dritte Stufe unterscheiden sich im Entwurf nur durch ihr Gewicht,
   nicht durch Farbe: beide tragen eine Kontur auf der Mehl-Flaeche, die
   leisere in Nebentextfarbe. Die getoente Fuellung, die beide bisher hatten,
   hat den Akzent auf Knoepfe verteilt, die gar keine Entscheidung verlangen. */
.secondary-button {
    min-height:48px;
    padding:0 var(--space-4);
    color:var(--text);
    background:transparent;
    border-color:var(--border-strong);
    border-radius:var(--radius-md);
    font-weight:700;
}

.quiet-button {
    min-height:44px;
    padding:0 var(--space-3);
    color:var(--text-secondary);
    background:transparent;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font:inherit;
    font-size:var(--font-label);
    font-weight:700;
}

.primary-button:disabled,
.secondary-button:disabled {
    opacity:.5;
    cursor:not-allowed;
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.quiet-button:focus-visible,
.number-btn:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

/* Beruehrt wird im Entwurf nicht die Farbe, sondern die Hoehe: der Knopf hebt
   sich um 2px und faellt beim Druecken zurueck. Die volle Flaeche dunkelt
   dabei nach, die Kontur wird nur kraeftiger. */
@media (hover:hover) and (pointer:fine) {
    .primary-button:hover:not(:disabled) {
        background:var(--primary-strong);
        transform:translateY(-2px);
    }

    .secondary-button:hover:not(:disabled),
    .quiet-button:hover {
        color:var(--text);
        border-color:var(--text);
        transform:translateY(-2px);
    }
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.quiet-button:active {
    transform:translateY(0);
}

/* =========================================
   Main Navigation
========================================== */

.navigation {
    grid-area:navigation;
    display:flex;
    gap:var(--space-1);
    width:fit-content;
    max-width:100%;
    padding:var(--space-1);
    overflow-x:auto;
    scrollbar-width:none;
    background:var(--color-navigation-background);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    -webkit-overflow-scrolling:touch;
}

.navigation::-webkit-scrollbar {
    display:none;
}

.nav-item {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    min-height:var(--touch-target);
    padding:0 var(--space-3);
    color:var(--text-secondary);
    appearance:none;
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    font:inherit;
    font-size:var(--font-caption);
    font-weight:700;
    letter-spacing:-.01em;
    white-space:nowrap;
    cursor:pointer;
    transition:background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.nav-item::before {
    font-size:.9rem;
    line-height:1;
}

#navCalculator::before { content:"⌂"; }
#navPreparation::before { content:"✓"; }
#navRecipes::before { content:"◫"; }
#navPlanning::before { content:"◷"; }
#navMore::before { content:"•••"; }

/* Noch ohne Ziel, siehe design/nizember-redesign/APP-SHELL.md. Nur am Desktop
   sichtbar (css/adaptive.css), sonst per default display:none hier. */
.nav-item--planned {
    display:none;
    cursor:default;
    opacity:.55;
}

.nav-item.active {
    color:var(--primary-strong);
    background:var(--surface-raised);
    border-color:var(--color-border-primary);
    box-shadow:var(--shadow-sm);
}

.nav-item:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

/* =========================================
   Theme Control
========================================= */

.theme-toggle {
    display:inline-flex;
    min-width:44px;
    min-height:var(--touch-target);
    padding:0 var(--space-3);
    gap:var(--space-2);
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    font:inherit;
    font-size:var(--font-caption);
    font-weight:700;
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}

.theme-icon {
    display:none;
    width:16px;
    height:16px;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.8;
}

html[data-theme-preference="system"] .theme-icon-system,
html[data-theme-preference="light"] .theme-icon-light,
html[data-theme-preference="dark"] .theme-icon-dark {
    display:block;
}

.theme-toggle:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
    .theme-toggle:hover {
        color:var(--primary-strong);
        background:var(--primary-soft);
        border-color:var(--color-border-primary-strong);
    }
}

@media (hover:hover) and (pointer:fine) {
    .nav-item:hover:not(.active) {
        color:var(--text);
        background:var(--color-surface-subtle);
    }
}

/* =========================================
   Number Controls
========================================== */

.number-btn {
    width:52px;
    height:52px;
    color:var(--primary-strong);
    background:var(--primary-soft);
    border-color:var(--color-border-primary);
    border-radius:var(--radius-md);
    font-size:1.45rem;
    font-weight:600;
    line-height:1;
}

@media (hover:hover) and (pointer:fine) {
    .number-btn:hover {
        color:var(--color-text-inverse);
        background:var(--primary);
        border-color:var(--primary);
    }
}

.number-btn:active {
    transform:scale(.98);
}

/* recipe.css */
/* =========================================
   Recipe
========================================== */

.step {
    position:relative;
    margin-bottom:var(--space-3);
    padding:var(--space-4) var(--space-4) var(--space-4) 20px;
    color:var(--text-secondary);
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    line-height:1.65;
    transition:border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard);
}

.step {
    display:grid;
    grid-template-columns:30px minmax(0, 1fr);
    gap:var(--space-3);
    padding-left:var(--space-4);
}

.step-number {
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    color:var(--color-text-inverse);
    background:var(--primary);
    border-radius:50%;
    font-size:var(--font-caption);
    font-weight:800;
}

.step b,
.step-meta { display:block; }
.step-meta { margin-top:2px; color:var(--text-muted); font-size:var(--font-caption); }
.step p { margin-top:var(--space-2); }

.step::before {
    position:absolute;
    top:var(--space-4);
    bottom:var(--space-4);
    left:0;
    width:3px;
    background:var(--primary);
    border-radius:var(--radius-sm);
    content:"";
}

.step b,
.step strong {
    color:var(--text);
}

@media (hover:hover) and (pointer:fine) {
    .step:hover {
        background:var(--color-control-hover);
        border-color:var(--border-strong);
    }
}

/* Empfehlungen tragen ueberall dieselbe Form: getoente Flaeche, 3px Linie
   links, kein Rahmen ringsum (Turn 11d). */
.baking-recommendation {
    margin-top:var(--space-5);
    padding:var(--space-5);
    color:var(--text-secondary);
    background:var(--primary-soft);
    border:0;
    border-left:3px solid var(--accent);
    border-radius:0;
    line-height:1.65;
}

.baking-recommendation h3 {
    margin-bottom:var(--space-2);
    color:var(--accent);
    font-size:1rem;
}

.baking-recommendation strong {
    color:var(--text);
}
.method-ingredient-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.method-ingredient-blocks article {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.method-ingredient-blocks h3 {
    margin-top: 0;
}

.method-ingredient-blocks dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

@media (max-width: 760px) {
    .method-ingredient-blocks { grid-template-columns: 1fr; }
}

/* guided.css */
/* =========================================
   Guided Start & Recipe Workbench
========================================= */

/* Papier auf der Mehl-Flaeche, wie jede grosse Flaeche im Entwurf. Der
   Schraegverlauf darin liess die Flaeche je nach Fensterbreite anders kippen
   und hatte im Entwurf keine Entsprechung. */
.guided-start {
    display:grid;
    gap:var(--space-5);
    margin-bottom:var(--space-6);
    padding:var(--space-6);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
}

.guided-start-heading {
    max-width:58ch;
}

.guided-start-heading h2 {
    margin-top:var(--space-1);
    color:var(--text);
    font-size:clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing:-.055em;
    line-height:var(--line-tight);
}

.guided-start-heading p {
    margin-top:var(--space-3);
    color:var(--text-secondary);
}

/* Der Hinweiskasten des Entwurfs (Turn 11b/11d): getoente Flaeche, eine 3px
   starke Linie links, kein Rahmen ringsum und keine Rundung. Der Akzent traegt
   hier den Handlungsdruck - solange die Startwerte noch bestaetigt werden
   muessen, steht die Linie in Rot. */
.workbench-defaults-review {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--primary-soft);
    border:0;
    border-left:3px solid var(--accent);
    border-radius:0;
}

.workbench-defaults-review[hidden],
.workbench-defaults-review [hidden] { display:none !important; }
.workbench-defaults-review p { margin-top:var(--space-1); color:var(--text-secondary); font-size:var(--font-caption); }
.workbench-defaults-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--space-2); }
/* Bestaetigt ist der Kasten nur noch eine Notiz: die Linie bleibt, verliert
   aber Farbe und Fuellung, damit der Akzent frei wird fuer das, was als
   naechstes eine Entscheidung verlangt. */
.workbench-defaults-review[data-confirmed="true"] {
    padding-block:var(--space-2);
    background:transparent;
    border-left-color:var(--border-strong);
}
.workbench-defaults-review[data-confirmed="true"] strong { font-size:var(--font-label); }
.workbench-defaults-review[data-confirmed="true"] .workbench-defaults-actions { flex:0 0 auto; }

.choice-number {
    display:grid;
    width:24px;
    height:24px;
    margin-bottom:var(--space-2);
    color:var(--primary);
    place-items:center;
    background:var(--primary-soft);
    border-radius:50%;
    font-size:var(--font-caption);
    font-weight:700;
}

.guided-choice.is-journey-current {
    border-color:var(--color-border-primary-strong);
    box-shadow:var(--shadow-focus);
}

.guided-choice.is-journey-complete {
    border-color:color-mix(in srgb, var(--success) 45%, transparent);
}

.guided-choice.is-journey-complete .choice-number {
    color:var(--color-on-success);
    background:var(--success);
}

/* Dieselbe Hinweisform wie in der Werkbank (Turn 11d, "Einkaufsliste steht
   bereit"): getoente Flaeche, 3px Linie links, sonst nichts. Der Verlauf lief
   waagerecht aus und verwischte genau die Kante, die den Kasten traegt. */
.recipe-foundation {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-5);
    padding:var(--space-5);
    background:var(--primary-soft);
    border:0;
    border-left:3px solid var(--accent);
    border-radius:0;
}

.foundation-copy {
    min-width:0;
}

.recipe-foundation p {
    margin-top:var(--space-1);
    color:var(--text);
    font-weight:600;
    line-height:1.5;
}

.recipe-foundation-actions {
    display:flex;
    flex:0 0 auto;
    flex-wrap:wrap;
    gap:var(--space-2);
}

/* Auf der getoenten Flaeche des Kastens braucht der Knopf eine eigene
   Fuellung, sonst verschwindet seine Kontur im Untergrund - Papier, damit er
   sich abhebt, ohne dem Hauptknopf daneben die Aufmerksamkeit zu nehmen. */
.recipe-foundation .secondary-button {
    background:var(--surface);
}

/* Die Seitenkarte aus Turn 11b/11c ("Wirkt sich aus auf", "Deine sieben
   Antworten"): Papier auf der Mehl-Flaeche, 3px Kante, ein weicher Schatten.
   Bisher lag sie als halbtransparente Flaeche flach im Zettel und war vom
   Untergrund kaum zu unterscheiden. */
.recipe-preview {
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.result-state-notice {
    margin-top:var(--space-4);
    padding:var(--space-3) var(--space-4);
    color:var(--text);
    background:color-mix(in srgb, var(--warning) 14%, var(--surface-raised));
    border-left:3px solid var(--warning);
    border-radius:var(--radius-sm);
    line-height:1.5;
}

.result-state-notice[hidden] { display:none; }
.result-panel[data-result-state="stale"] .result-grid { opacity:.68; }

.recipe-preview-empty {
    padding:var(--space-4);
}

.recipe-preview-empty strong,
.recipe-preview-empty p {
    display:block;
}

.recipe-preview-empty strong {
    color:var(--text);
    font-size:var(--font-body);
}

.recipe-preview-empty p {
    max-width:52ch;
    margin-top:var(--space-1);
    color:var(--text-secondary);
    font-size:var(--font-label);
}

/* Untereinander stehende Zeilen mit gepunkteter Trennung statt nebeneinander
   liegender Kacheln - die Leseform, die der Entwurf in jeder Zusammenfassung
   benutzt (Turn 11b, 11c, 11d, 14a). Der Wert steht rechts in der Monospace,
   damit Zahlen unter Zahlen stehen und beim Aendern nicht springen. */
.recipe-preview-values {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    margin:0;
    padding:0 var(--space-4) var(--space-3);
}

.recipe-preview-values > div {
    display:flex;
    align-items:baseline;
    gap:var(--space-3);
    min-width:0;
    padding:var(--space-2) 0;
    border-bottom:1px dotted var(--border-strong);
}

.recipe-preview-values > div:last-child {
    border-bottom:0;
}

.recipe-preview-values dt,
.recipe-preview-values dd { margin:0; }

.recipe-preview-values dt {
    color:var(--text-secondary);
    font-size:var(--font-label);
}

.recipe-preview-values dd {
    margin-left:auto;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:.98rem;
    font-weight:600;
    text-align:right;
    overflow-wrap:normal;
    word-break:normal;
    white-space:normal;
}

.recipe-preview-values-heading {
    margin:0;
    padding:var(--space-4) var(--space-4) var(--space-1);
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.weight-size-estimate { width:100%; margin:0; text-align:center; }

.guided-primary-action {
    display:flex;
    justify-content:flex-end;
}

.guided-primary-action .primary-button {
    min-width:210px;
    min-height:3rem;
    max-height:4rem;
}

.preset-preview,
.preset-status {
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.45;
}

.preset-preview:empty,
.preset-status:empty {
    display:none;
}

.preset-status {
    color:var(--primary);
    font-weight:700;
}

.workbench-intro,
.result-summary {
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.5;
}

/* Zahlen gehoeren in die Monospace: gleiche Ziffernbreite heisst, dass das
   Feld beim Hoch- und Runterzaehlen stehen bleibt. */
.input-panel .number-input {
    font-family:var(--font-mono);
}

/* Und die Fehlermeldung bekommt die Form des Warnkastens aus Turn 11b -
   getoente Flaeche, 3px Akzentlinie links. Der Text steht dabei in normaler
   Schriftfarbe: die Linie traegt das Signal, die Meldung bleibt lesbar. */
.input-panel .input-message:not(:empty) {
    padding:var(--space-3) var(--space-4);
    color:var(--text);
    background:var(--primary-soft);
    border-left:3px solid var(--accent);
    line-height:1.5;
}

.recipe-workbench {
    margin-top:var(--space-5);
    border-top:1px solid var(--border);
}

.recipe-workbench summary {
    display:flex;
    align-items:center;
    min-height:52px;
    color:var(--text);
    font-weight:700;
    cursor:pointer;
    list-style:none;
}

.recipe-workbench summary::-webkit-details-marker {
    display:none;
}

.recipe-workbench summary::after {
    margin-left:auto;
    color:var(--primary);
    content:"+";
    font-size:1.3rem;
    line-height:1;
}

.recipe-workbench[open] summary::after {
    content:"−";
}

.recipe-workbench summary:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:-2px;
    border-radius:var(--radius-sm);
}

.workbench-fields {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0 var(--space-4);
    padding-top:var(--space-2);
}
.workbench-fermentation {
    display:grid;
    gap:var(--space-4);
    padding-block:var(--space-4);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

/* Abschnittsmarke statt Ueberschrift. Der Entwurf setzt ueber jeden Block im
   Zettel eine kleine, gesperrte Monospace-Zeile ("Ablauf", "Wirkt sich aus
   auf", "Was jetzt") - sie ordnet, ohne mit der Seitenueberschrift zu
   konkurrieren. */
.workbench-fermentation > h3 {
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:var(--font-caption);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.fermentation-details {
    min-width:0;
    border-top:1px solid var(--border);
}

.fermentation-details > summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    gap:var(--space-3);
    color:var(--text);
    font-size:var(--font-label);
    font-weight:700;
    cursor:pointer;
    list-style:none;
}

.fermentation-details > summary::-webkit-details-marker { display:none; }
.fermentation-details > summary::after { content:"+"; color:var(--primary); font-size:1.15rem; }
.fermentation-details[open] > summary::after { content:"\2212"; }
.fermentation-details > summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }

.fermentation-details-content {
    display:grid;
    gap:var(--space-3);
    padding:0 0 var(--space-2);
}

.fermentation-mode-group {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    padding:0;
    border:0;
}

.fermentation-mode-group legend {
    width:100%;
    margin-bottom:var(--space-1);
    color:var(--text-secondary);
    font-size:var(--font-label);
}

/* Die Wahlknoepfe aus Turn 11c: unausgewaehlt nur eine Kontur auf der
   Mehl-Flaeche, ausgewaehlt Papier mit doppelt starker Akzentkante und dem
   Schatten, der sie aus der Flaeche hebt. Die Kante waechst von 1px auf 2px,
   deshalb nimmt die Fuellung im gewaehlten Zustand 1px zurueck - sonst
   ruecken die Nachbarn beim Umschalten. */
.fermentation-mode-group label {
    display:flex;
    align-items:center;
    min-height:44px;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    background:transparent;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    font-size:var(--font-label);
    font-weight:600;
}

.fermentation-mode-group label:has(input:checked) {
    padding:calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
    background:var(--surface);
    border:2px solid var(--accent);
    box-shadow:var(--shadow-sm);
}

.fermentation-mode-panel[hidden],
.fermentation-mode-panel [hidden] { display:none; }

.fermentation-breakdown-fields,
.fermentation-support-fields,
.fermentation-breakdown {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
}

.fermentation-support-fields { grid-template-columns:repeat(3, minmax(0, 1fr)); }

/* Dieselbe Zeilenform wie im Zeitplaner aus Turn 14a: Bezeichnung links,
   Zeitwert rechts in der Monospace, dazwischen eine gepunktete Linie. */
.fermentation-breakdown div {
    display:flex;
    align-items:baseline;
    gap:var(--space-3);
    padding-block:var(--space-2);
    border-bottom:1px dotted var(--border-strong);
}

.fermentation-breakdown dt { color:var(--text-secondary); font-size:var(--font-label); }
.fermentation-breakdown dd {
    margin-left:auto;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:.92rem;
    font-weight:600;
    text-align:right;
}

.yeast-override {
    padding-top:var(--space-3);
    border-top:1px solid var(--border);
}

.yeast-override > :not(summary) { margin-top:var(--space-3); }

@media (max-width:600px) {
    .fermentation-breakdown-fields,
    .fermentation-support-fields,
    .fermentation-breakdown { grid-template-columns:minmax(0, 1fr); }
}
/* Review 61E: one dominant decision at a time. */
.selection-monitor {
    container-type: inline-size;
    min-inline-size: 0;
    overflow: clip;
    border-block: 1px solid var(--border);
    padding-block: var(--space-4);
}

.selection-step-content { display: grid; gap: var(--space-4); min-inline-size: 0; }
.selection-progress-copy { display: grid; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-label); font-weight: 700; }
.selection-progress-track { block-size: .35rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-muted); }
.selection-progress-track > span { display: block; block-size: 100%; inline-size: 33.333%; border-radius: inherit; background: var(--accent); transition: inline-size var(--motion-base) var(--ease-standard); }
.selection-step-heading { max-inline-size: 42rem; }
.selection-step-heading h3 { margin: 0; font-size: clamp(1.25rem, 4vw, 1.85rem); line-height: 1.15; }
.selection-step-heading p { margin: var(--space-2) 0 0; color: var(--text-secondary); }
.selection-context {
    display:grid;
    grid-template-columns:8.5rem minmax(0, 1fr);
    align-items:center;
    gap:var(--space-3);
    margin:0;
    padding:var(--space-3);
    border-block:1px solid var(--border);
    color:var(--text-secondary);
}
.selection-context[hidden] { display:none !important; }
.selection-context img { display:block; inline-size:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); }
.selection-context figcaption { max-inline-size:34rem; line-height:1.5; }
/* Vierspaltiges Kartenraster ohne Bildseitenleiste, nach dem Entwurf: Bild oben
   ueber die volle Kartenbreite, Text darunter, "Gewählt" nur an der gewaehlten
   Karte - keine Marke an den uebrigen. Siehe Nizember Redesign Desktop.dc.html,
   Rahmen mit den Stil- und Ofenkarten. */
.selection-options,
.selection-search-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-inline-size: 0; }
.selection-option-card {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    text-align: start;
    box-shadow: none;
    transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.selection-option-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); }
.selection-option-card.is-selected { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.selection-option-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.selection-option-visual {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    border-radius: 0;
    background: var(--surface-muted);
}
.selection-option-copy { padding: var(--space-3); }
.selection-option-badge {
    display: block;
    margin-top: var(--space-1);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.selection-option-visual img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
}
.selection-option-visual.is-loaded img { opacity: 1; }
.selection-option-visual.is-error { border: 1px solid var(--danger); }
.selection-asset-error {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--danger);
    font-size: var(--font-caption);
    font-weight: 700;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) { .selection-option-visual img { transition: none; } }
.selection-option-copy { display: grid; gap: var(--space-1); min-inline-size: 0; }
.selection-option-copy strong { overflow-wrap:normal; word-break:normal; hyphens:none; font-size:var(--font-body); line-height:1.25; }
.selection-option-copy > span { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:var(--text-secondary); font-size:var(--font-label); line-height:1.4; }
.selection-option-copy .selection-option-meta { color:var(--accent); font-size:var(--font-caption); font-weight:750; line-height:1.35; }
.selection-options.is-flour,
.selection-search-results.is-flour { grid-template-columns: minmax(0, 1fr); }
.selection-option-card--flour {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--touch-target);
    padding: var(--space-3);
}
.selection-option-copy--flour { gap: var(--space-2); padding: 0; }
.selection-flour-details { display: grid; gap: var(--space-1); min-inline-size: 0; }
/* "W 220-280 · Protein 11-12,5 %" und "Empfohlene Ruhezeit 24-72 Std." sind
   Messwerte, keine Saetze. Sie stehen deshalb in der Monospace wie jeder andere
   Wert im Entwurf (Turn 11b, Seitenkarte). Ueber dieselbe Klasse laufen aber
   auch Beschreibung, "Ideal fuer ..." und der Datenhinweis - Fliesstext, der in
   der Monospace schlechter zu lesen waere. Der Kartenbauer in
   js/selectionFlow.js kennzeichnet die Werte-Zeilen deshalb eigens. */
.selection-flour-detail {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.35;
}

.selection-flour-detail--values {
    font-family: var(--font-mono);
    font-size: var(--font-caption);
}
.selection-option-state {
    align-self: center;
    min-inline-size: 5.75rem;
    color: var(--accent);
    font-size: var(--font-label);
    font-weight: 800;
    text-align: end;
    white-space: nowrap;
}
.selection-option-card--flour.is-selected .selection-option-state { color: var(--text); }
.selection-option-card--flour.is-selected { background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised)); }
/* Die drei Mehlgruppen sind Abschnittsmarken und tragen deshalb dieselbe Form
   wie jede andere Augenbraue im Entwurf: gesperrte Monospace auf
   Nebentextfarbe, siehe .eyebrow in css/layout.css. */
.selection-group-heading { margin: var(--space-4) 0 var(--space-1); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--font-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.selection-group-heading:first-child { margin-block-start: 0; }
.selection-option-copy--flour > .selection-flour-headline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; min-inline-size: 0; overflow: visible; -webkit-line-clamp: none; }
.selection-flour-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Zustandsmarken stehen im Entwurf in gesperrten Monospace-Versalien - "GEPLANT"
   und "IN ARBEIT" in Turn 11d, die Sequenznamen in Turn 14a. Staerkeklasse,
   Empfehlung und "geschaetzt" sind genau solche Marken. */
.selection-flour-badge { padding: 0.1rem 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--font-caption); font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; }
.selection-flour-badge--mittel { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.selection-flour-badge--stark,
.selection-flour-badge--sehr-stark,
.selection-flour-badge--recommended { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-raised)); color: var(--text); }
.selection-flour-badge--speziell,
.selection-flour-badge--estimated { border-style: dashed; }
.selection-flour-refine { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
.selection-flour-refine-label { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--font-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.selection-flour-refine-select { inline-size: 100%; min-block-size: var(--touch-target); }
.selection-flour-refine-hint { margin: 0; color: var(--text-secondary); font-size: var(--font-caption); line-height: 1.4; }
.selection-option-meta--flour { color: var(--text); }
/* Die Produktzeile unter dem Stilvorschlag ist ein Beispiel, keine Ansage. Im
   Entwurf steht solcher Nachsatz leise und ungefettet (Turn 11d). */
.selection-option-meta--products { color: var(--text-secondary); font-weight: 400; }
.selection-summary { display: grid; gap: 0; border-block: 1px solid var(--border); }
.selection-summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-inline-size: 0; padding-block: var(--space-3); border-block-end: 1px solid var(--border); }
.selection-summary-row > div { display: grid; gap: var(--space-1); min-inline-size: 0; }
.selection-summary-row span { color: var(--text-secondary); font-size: var(--font-label); }
.selection-summary-warning,
.selection-summary-profile,
.selection-summary-recommendation,
.selection-help-note,
.selection-empty { margin: var(--space-3) 0; color: var(--text-secondary); }
.selection-actions,
.kitchen-quick-start-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.selection-actions .primary-button { margin-inline-start: auto; }
.selection-status:empty { display: none; }
.selection-search { display: grid; gap: var(--space-2); font-weight: 700; }
.selection-search input { inline-size: 100%; min-block-size: var(--touch-target); }
.kitchen-quick-start { display: grid; gap: var(--space-3); }
.kitchen-quick-start[hidden],
.selection-monitor[hidden],
.selection-step-content[hidden] { display: none !important; }
.selection-native-controls[hidden] { display: none !important; }

@container (min-width: 28rem) {
    .selection-options,
    .selection-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .selection-options.is-flour,
    .selection-search-results.is-flour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 42rem) {
    .selection-help-note,
    .selection-search { grid-column: 1 / -1; }
    .selection-options.is-flour,
    .selection-search-results.is-flour { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 56rem) {
    .selection-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 25rem) {
    .selection-option-card--flour { grid-template-columns: minmax(0, 1fr); }
    .selection-option-copy--flour { padding: 0; }
    .selection-option-state { justify-self: start; text-align: start; }
    .selection-actions > * { flex: 1 1 100%; }
    .selection-actions .primary-button { margin-inline-start: 0; }
}

.recommendation-comparison { display:grid; gap:var(--space-3); padding-block:var(--space-3); border-block:1px solid var(--border); }
.recommendation-comparison[hidden] { display:none !important; }
.recommendation-comparison h3 { margin:var(--space-1) 0 0; }
.recommendation-comparison dl { display:grid; gap:0; margin:0; }
.recommendation-comparison dl > div { display:grid; grid-template-columns:minmax(8rem, .65fr) minmax(0, 1fr); gap:var(--space-3); align-items:start; padding-block:var(--space-2); border-block-end:1px solid var(--border); }
.recommendation-comparison dt { color:var(--text-secondary); }
.recommendation-comparison dd { display:grid; gap:.2rem; margin:0; }
.recommendation-comparison dd span { color:var(--text-secondary); }
.recommendation-comparison dd strong { color:var(--text); }
.recommendation-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }

@media (prefers-reduced-motion: reduce) {
    .selection-progress-track > span { transition: none; }
}

/* Review 61F: one shared quantity presentation in normal and guided preparation. */
.phase-quantities {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-3);
    min-inline-size: 0;
}

.phase-quantity-group {
    display: grid;
    gap: var(--space-2);
}

.phase-quantity-group h4 {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-label);
}

.phase-quantity-group dl,
.phase-technical dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.phase-quantity-group dl > div,
.phase-technical dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--border);
}

.phase-quantity-group dt,
.phase-technical dt { min-inline-size: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.phase-quantity-group dd,
.phase-technical dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 750; text-align: end; }
.phase-technical { padding-block-start: var(--space-1); }
.phase-technical summary { min-block-size: var(--touch-target); color: var(--text-secondary); cursor: pointer; }
.phase-card-meta { display: block; margin-block-start: var(--space-1); color: var(--text-secondary); }

@media (max-width: 25rem) {
    .phase-quantity-group dl > div,
    .phase-technical dl > div { gap: var(--space-2); }
}
.dough-method-panel {
    margin-top: var(--space-4);
}

.dough-method-disclosure {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.dough-method-disclosure > summary {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-weight: 700;
}

.dough-method-content {
    display: grid;
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-4);
}

.dough-method-heading h3,
.dough-method-heading p {
    margin: 0;
}

.dough-method-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.dough-method-option {
    position: relative;
    display: block;
    min-width: 0;
}

.dough-method-option > input {
    position: absolute;
    inset: 12px auto auto 12px;
    width: 20px;
    height: 20px;
    margin: 0;
}

.dough-method-option > span {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 132px;
    padding: 42px var(--space-2) var(--space-2);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    cursor: pointer;
}

.dough-method-option input:checked + span {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.dough-method-option input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.dough-method-option small,
.dough-method-selection-state {
    color: var(--text-muted);
}

.dough-method-option input:checked + span .dough-method-selection-state {
    color: var(--text);
    font-weight: 700;
}

.dough-method-option input:checked + span .dough-method-selection-state::before {
    content: "✓ ";
}

.dough-method-option input:checked + span .dough-method-selection-state {
    font-size: 0;
}

.dough-method-option input:checked + span .dough-method-selection-state::after {
    content: "Ausgewählt";
    font-size: 0.875rem;
}

.preferment-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.preferment-fields input,
.preferment-fields select {
    min-height: 44px;
}

.dough-method-time-summary,
.dough-method-status {
    margin: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.dough-method-status[data-status="error"] {
    border-inline-start: 4px solid var(--danger);
}

.dough-method-status[data-status="warning"] {
    border-inline-start: 4px solid var(--warning);
}

@media (max-width: 760px) {
    .dough-method-options,
    .preferment-fields {
        grid-template-columns: 1fr;
    }

    .dough-method-option > span {
        min-height: 0;
    }
}

/* Übliche Pizzagrößen: Der Teigling ist das Mittel, die Größe der Pizza ist das Ziel.
   Deshalb steht die Größe wählbar unter dem Gewicht und rechnet es selbst aus. */
.weight-size-options {
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-2);
    width:100%;
    margin-top:var(--space-2);
}

.weight-size-option {
    min-height:36px;
    padding:0 var(--space-3);
    color:var(--text-secondary);
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font:inherit;
    font-size:var(--font-label);
    cursor:pointer;
}

.weight-size-option.is-active {
    color:var(--color-primary);
    border-color:var(--color-primary);
    font-weight:700;
}

.weight-size-option:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:2px;
}

/* Die empfohlene Gesamtruhezeit steht über der Auswahl, nicht zwei Schritte davor
   auf der Stilkarte. */
.fermentation-recommendation {
    margin:0 0 var(--space-2);
    color:var(--text-secondary);
    font-size:var(--font-label);
}

/* experience.css */
/* =========================================
   Adaptive Experience Levels
========================================= */

.experience-welcome,
.experience-settings {
    padding:var(--space-5);
    background:var(--color-surface-subtle);
    border:1px solid var(--color-border-primary);
    border-radius:var(--radius-lg);
}

.experience-indicator {
    display:none;
    margin-top:var(--space-3);
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:700;
}

html[data-experience="guided"] [data-experience-visible~="balanced"] {
    display:none;
}

.experience-welcome legend,
.experience-settings h2 {
    color:var(--text);
    font-size:var(--font-section);
    font-weight:700;
    letter-spacing:-.04em;
    line-height:var(--line-tight);
}

.experience-welcome > p,
.experience-settings > p {
    margin-top:var(--space-2);
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.5;
}

.experience-choice-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-3);
    margin-top:var(--space-4);
}

.experience-option {
    position:relative;
    display:flex;
    min-height:112px;
    padding:var(--space-4);
    cursor:pointer;
    background:var(--color-surface-overlay);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    transition:border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}

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

.experience-option span {
    display:grid;
    align-content:start;
    gap:var(--space-2);
}

.experience-option strong {
    color:var(--text);
    font-size:var(--font-label);
}

.experience-option small {
    color:var(--text-secondary);
    font-size:var(--font-caption);
    line-height:1.45;
}

.experience-option em {
    display:inline-flex;
    margin-left:var(--space-1);
    padding:2px 6px;
    color:var(--primary-strong);
    background:var(--primary-soft);
    border-radius:var(--radius-md);
    font-size:.64rem;
    font-style:normal;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.experience-option:has(input:checked) {
    background:var(--primary-soft);
    border-color:var(--color-border-primary-strong);
    box-shadow:var(--shadow-sm);
}

.experience-option:has(input:focus-visible) {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
    .experience-option:hover {
        background:var(--color-control-hover);
        border-color:var(--border-strong);
    }
}

.experience-status {
    min-height:1.3rem;
    margin-top:var(--space-4);
    color:var(--primary-strong);
    font-size:var(--font-label);
    font-weight:700;
}

.workbench-fields-core {
    margin-top:var(--space-5);
}

.more-layout {
    display:grid;
    gap:var(--space-5);
    max-width:940px;
}

/* Die Zusammenfassung ist seit dem 15.08.2026 ueberall eine einspaltige
   Zeilenliste (css/guided.css). Hier stand bis dahin dieselbe Spaltenformel
   noch einmal fuer den gefuehrten Modus - sie laedt nach guided.css und haette
   die Zeilen dort wieder in fuenf schmale Spalten gezogen. */
html[data-experience="guided"] .recipe-preview-values { grid-template-columns:minmax(0, 1fr); }

@media (max-width:760px) {
    .experience-welcome,
    .experience-settings {
        padding:var(--space-4);
    }

    .experience-choice-grid {
        grid-template-columns:minmax(0, 1fr);
    }

    .experience-option {
        min-height:0;
    }

    html[data-experience-first-run="false"] .experience-indicator {
        display:inline-flex;
        align-items:center;
        min-height:28px;
        padding:0 var(--space-2);
        color:var(--primary-strong);
        background:var(--primary-soft);
        border-radius:var(--radius-md);
    }
}
html[data-experience="expert"] .dough-method-disclosure > summary {
    display: none;
}

html[data-experience="expert"] .dough-method-content {
    padding-top: var(--space-4);
}

html[data-experience="guided"] .dough-method-panel {
    display: none;
}

/* doughy.css */
/* =========================================
   Doughy Companion: stage, character and speech
========================================= */

.doughy-companion {
    --doughy-gaze-x:0px;
    --doughy-gaze-y:0px;
    --doughy-pitch:0deg;
    --doughy-yaw:0deg;
    position:relative;
    z-index:var(--z-companion);
    display:grid;
    grid-area:doughy;
    --companion-character-current:var(--companion-character-expanded);
    /* Die Hoehe folgt der Breite, statt fest zu stehen.
       Die Laufzeit misst --companion-character-current und leitet die Leinwandhoehe
       daraus mit dem Seitenverhaeltnis der Vorgabe ab (105x114 in pet.json). Die
       Kastenhoehe stand dagegen fest bei 114 px, und zwar bei JEDER Fensterbreite:
       schon ohne Breitenstaffel ragte die 154 px hohe Leinwand 40 px heraus, ab
       1800 px waren es 164 px. Am 13. August 2026 auf develop sichtbar - Doughys
       Kopf war oben abgeschnitten. Ein Kasten, der seinen Inhalt nicht kennt, ist
       kein Kasten. */
    --companion-character-height:calc(var(--companion-character-current) * 114 / 105);
    min-height:var(--companion-header-expanded-min);
    grid-template-columns:var(--companion-character-current) minmax(0, 1fr);
    grid-template-rows:auto auto auto;
    column-gap:var(--space-3);
    width:100%;
    margin-top:0;
    padding:var(--space-3) var(--space-3) var(--space-3) 0;
    color:var(--text);
}

.doughy-stage { display:contents; }

.doughy-avatar {
    position:relative;
    z-index:1;
    display:grid;
    grid-row:span 3;
    width:var(--companion-character-current);
    /* Die zwei Pixel Vorsprung vor der Figur bleiben, sie waren vorher 116 zu 114. */
    height:calc(var(--companion-character-height) + 2px);
    place-items:center;
    isolation:isolate;
    perspective:620px;
    padding:0;
    color:inherit;
    font:inherit;
    background:transparent;
    border:0;
    border-radius:var(--radius-lg);
    cursor:pointer;
    touch-action:manipulation;
    transform:translateY(-18px) rotate(-1.5deg);
    transition:transform var(--motion-base) var(--ease-standard), filter var(--motion-base) var(--ease-standard);
}

.doughy-avatar::before {
    position:absolute;
    z-index:-3;
    inset:-16px -8px -10px;
    background:radial-gradient(circle at 48% 38%, var(--doughy-rim-light), var(--doughy-aura-center) 24%, var(--doughy-aura-edge) 56%, transparent 72%);
    border-radius:50%;
    content:"";
    pointer-events:none;
}

.doughy-avatar::after {
    position:absolute;
    z-index:-2;
    bottom:-2px;
    left:8%;
    width:84%;
    height:24px;
    background:radial-gradient(ellipse at center, var(--doughy-stage-floor), transparent 72%);
    border-radius:50%;
    content:"";
    filter:blur(4px);
    pointer-events:none;
}

.doughy-character {
    position:relative;
    width:var(--companion-character-current);
    height:var(--companion-character-height);
    isolation:isolate;
    /* Der Vorsprung von 1.1 laesst die Figur ueber ihren Kasten hinausragen. In der
       Theke muss sie genau 90x90 bleiben und auf ihrer Fusslinie stehen, darum ist
       der Wert eine Variable und kein fester Faktor mehr. */
    transform:perspective(620px) rotateX(var(--doughy-pitch)) rotateY(var(--doughy-yaw)) scale(var(--doughy-scale, 1.1)) translateZ(0);
    transform-origin:50% 82%;
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform var(--motion-base) var(--ease-standard);
}

.doughy-character::before {
    position:absolute;
    z-index:-2;
    right:9%;
    bottom:3%;
    left:9%;
    height:28%;
    background:radial-gradient(ellipse at center, var(--doughy-depth-shadow), transparent 72%);
    border-radius:50%;
    content:"";
    filter:blur(3px);
    opacity:.82;
    transform:translateZ(-8px) scaleY(.5);
}

.doughy-shadow {
    position:absolute;
    z-index:-1;
    bottom:3px;
    left:17%;
    width:70%;
    height:12px;
    background:var(--doughy-contact-shadow);
    border-radius:50%;
    filter:blur(4px);
    opacity:.88;
    transform:scaleX(1);
    transition:opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.doughy-body {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 10px 8px var(--doughy-figure-shadow));
    transform:translateZ(7px);
    transform-origin:50% 82%;
    transition:filter var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.doughy-face-layer {
    position:absolute;
    inset:0;
    pointer-events:none;
    transform:translate(var(--doughy-gaze-x), var(--doughy-gaze-y));
    transition:transform var(--motion-fast) var(--ease-standard);
}

.doughy-eyelid {
    position:absolute;
    top:53%;
    width:13%;
    height:23%;
    background:var(--doughy-face-surface);
    border-radius:50%;
    opacity:0;
    transform:scaleY(.08);
    transform-origin:50% 0;
}

.doughy-eyelid-left { left:31%; }
.doughy-eyelid-right { right:24%; }

.doughy-highlight {
    position:absolute;
    top:18%;
    left:34%;
    width:27%;
    height:17%;
    background:radial-gradient(ellipse at center, var(--doughy-highlight), transparent 70%);
    border-radius:50%;
    opacity:0;
    transform:scale(.8);
    transition:opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

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

.doughy-introduction { align-self:end; }
.doughy-introduction span { display:block; color:var(--text); font-size:1rem; font-weight:700; letter-spacing:-.025em; }
.doughy-introduction p { margin-top:2px; color:var(--text-secondary); font-size:var(--font-caption); line-height:1.4; }

.doughy-speech {
    position:relative;
    z-index:var(--z-companion);
    grid-column:2;
    min-width:0;
    margin-top:var(--space-2);
    padding:var(--space-2) var(--space-3);
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:0 8px 18px color-mix(in srgb, var(--doughy-contact-shadow) 20%, transparent);
    transition:opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.doughy-speech::before {
    position:absolute;
    top:14px;
    left:-5px;
    width:10px;
    height:10px;
    background:var(--color-surface-subtle);
    border-bottom:1px solid var(--border);
    border-left:1px solid var(--border);
    content:"";
    transform:rotate(45deg);
}

.doughy-speech[hidden] { display:none; }
#doughyMessage { margin:0; color:var(--text); font-size:var(--font-label); font-weight:600; line-height:1.45; overflow-wrap:anywhere; }

/* Die Gare-Schiene aus der Theke (Nizember Redesign Desktop.dc.html, Rahmen 10b):
   "ansetzen - falten - stueckeln - backen" als staendig sichtbare Referenz, nicht nur
   waehrend ein Teig laeuft. Bisher nur fuer Desktop platziert (adaptive.css), siehe
   design/nizember-redesign/APP-SHELL.md - hier nur die Basis, per default verborgen. */
.doughy-journey-rail { display:none; }
.doughy-journey-track { position:relative; height:10px; border-radius:var(--radius-sm); background:rgba(247, 244, 236, .08); overflow:hidden; }
.doughy-journey-tick { position:absolute; top:0; bottom:0; width:2px; background:rgba(44, 34, 25, .5); }
.doughy-journey-labels { display:flex; justify-content:space-between; margin-top:var(--space-1); color:var(--color-counter-text-muted); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; }

.doughy-avatar:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }

/* Emotion matrix: the raster face remains stable; eyes, posture, light and shadow express context. */
.doughy-companion.is-warning { --doughy-pitch:-2deg; --doughy-yaw:2deg; }
.doughy-companion.is-warning .doughy-avatar { filter:saturate(.88) brightness(.98); transform:translateY(-16px) rotate(1.2deg) scale(.99); }
.doughy-companion.is-warning .doughy-shadow { opacity:.72; transform:scaleX(.92); }
.doughy-companion.is-watching { --doughy-pitch:1.5deg; --doughy-yaw:-3deg; }
.doughy-companion.is-watching .doughy-avatar { transform:translateY(-17px) rotate(-3deg) scale(.995); }
.doughy-companion.is-thinking { --doughy-pitch:2.5deg; --doughy-yaw:3deg; }
.doughy-companion.is-thinking .doughy-avatar { transform:translateY(-16px) rotate(1.5deg) scale(.985); }
.doughy-companion.is-happy { --doughy-pitch:1.5deg; --doughy-yaw:-2deg; }
.doughy-companion.is-happy .doughy-avatar { transform:translateY(-20px) rotate(-1deg) scale(1.012); }
.doughy-companion.is-happy .doughy-highlight,
.doughy-companion.is-celebrate .doughy-highlight { opacity:1; transform:scale(1); }
.doughy-companion.is-celebrate { --doughy-pitch:3deg; --doughy-yaw:-2.5deg; }
.doughy-companion.is-celebrate .doughy-avatar { transform:translateY(-22px) rotate(-1deg) scale(1.025); }
.doughy-companion.is-celebrate .doughy-shadow { opacity:.62; transform:scaleX(.88); }
.doughy-companion.is-resting { --doughy-pitch:0deg; --doughy-yaw:1.5deg; }
.doughy-companion.is-resting .doughy-avatar { filter:saturate(.9); transform:translateY(-15px) rotate(1deg) scale(.975); }
.doughy-companion.is-resting .doughy-eyelid { opacity:.86; transform:scaleY(.86); }

.doughy-companion.is-blinking .doughy-eyelid { animation:doughy-blink 260ms ease-in-out 1; }
.doughy-companion.is-thinking .doughy-character { animation:doughy-think 440ms var(--ease-standard) 1; }
.doughy-companion.is-celebrate .doughy-character { animation:doughy-celebrate 760ms var(--ease-standard) 1; }

.doughy-companion[data-doughy-gaze="style"] { --doughy-gaze-x:-1px; --doughy-gaze-y:1px; }
.doughy-companion[data-doughy-gaze="flour"] { --doughy-gaze-x:-2px; --doughy-gaze-y:1px; }
.doughy-companion[data-doughy-gaze="oven"] { --doughy-gaze-x:2px; --doughy-gaze-y:1px; }
.doughy-companion[data-doughy-gaze="hydration"] { --doughy-gaze-x:-1px; --doughy-gaze-y:2px; }
.doughy-companion[data-doughy-gaze="fermentation"] { --doughy-gaze-x:1px; --doughy-gaze-y:2px; }
.doughy-companion[data-doughy-gaze="calculate"] { --doughy-gaze-x:1px; --doughy-gaze-y:-1px; }
.doughy-companion[data-doughy-gaze="result"] { --doughy-gaze-x:0; --doughy-gaze-y:2px; }

.doughy-companion[data-compact] .doughy-introduction p { display:none; }
.app-chrome[data-companion-header="compact"] .doughy-companion {
    --companion-character-current:var(--companion-character-compact);
    min-height:var(--companion-header-compact-min);
}
.doughy-companion[data-compact] .doughy-avatar { transform:translateY(-11px) rotate(-.5deg) scale(.88); }
.doughy-companion[data-compact] .doughy-character { transform:perspective(620px) rotateX(var(--doughy-pitch)) rotateY(var(--doughy-yaw)) scale(var(--dc,1.02)) translateZ(0); }
.doughy-companion[data-compact] .doughy-speech { margin-top:var(--space-1); padding-top:6px; padding-bottom:6px; }
.doughy-companion[data-compact] .doughy-speech::before { top:10px; }

@keyframes doughy-blink { 0%, 44%, 47%, 100% { opacity:0; transform:scaleY(.08); } 45%, 46% { opacity:.84; transform:scaleY(1); } }
@keyframes doughy-think { 0%,100% { transform:perspective(620px) rotateX(var(--doughy-pitch)) rotateY(var(--doughy-yaw)) scale(var(--doughy-scale, 1.1)) translate3d(0, 0, 0); } 50% { transform:perspective(620px) rotateX(var(--doughy-pitch)) rotateY(var(--doughy-yaw)) scale(calc(var(--doughy-scale, 1.1) * .977)) translate3d(0, -3px, 0); } }
@keyframes doughy-celebrate { 0%,100% { transform:perspective(620px) rotateX(var(--doughy-pitch)) rotateY(var(--doughy-yaw)) scale(var(--doughy-scale, 1.1)) translate3d(0, 0, 0); } 45% { transform:perspective(620px) rotateX(var(--doughy-pitch)) rotateY(var(--doughy-yaw)) scale(calc(var(--doughy-scale, 1.1) * 1.027)) translate3d(0, -6px, 0); } }

@media (hover:hover) and (pointer:fine) {
    .doughy-companion:hover .doughy-avatar { transform:translateY(-20px) rotate(-1deg) scale(1.015); }
}

.doughy-avatar:active { filter:brightness(.97); }

@media (prefers-reduced-motion:reduce) {
    .doughy-avatar, .doughy-character, .doughy-face-layer, .doughy-speech, .doughy-shadow, .doughy-highlight { transition:none; animation:none; }
    .doughy-companion.is-idle .doughy-character, .doughy-companion.is-thinking .doughy-character, .doughy-companion.is-celebrate .doughy-character { animation:none; }
    .doughy-companion.is-resting .doughy-eyelid, .doughy-companion.is-idle .doughy-eyelid, .doughy-companion.is-blinking .doughy-eyelid { animation:none; opacity:0; transform:scaleY(.08); }
}

/* mobile.css */
/* =========================================
   Responsive Layout
========================================= */

@media (max-width:1180px) {
    .workspace-shell {
        grid-template-columns:164px minmax(0, 1fr);
        gap:var(--space-5);
    }

    .app-chrome {
        grid-template-columns:minmax(0, 1fr) minmax(260px, 330px);
        grid-template-areas:
            "header header"
            ". doughy";
        align-items:start;
    }

    .doughy-companion {
        margin-top:var(--space-3);
    }
}

@media (max-width:1050px) {
    .version {
        display:none;
    }

    .header {
        grid-template-areas:
            "brand utilities"
            "navigation navigation";
        grid-template-columns:minmax(200px, 1fr) auto;
    }

    .navigation {
        justify-self:stretch;
    }

    .app-chrome {
        grid-template-columns:minmax(0, 1fr) minmax(230px, 300px);
    }

    .workspace-shell {
        /* Prevent intrinsic content in the journey rail from widening the page. */
        grid-template-columns:minmax(0, 1fr);
    }

    .journey-sidebar {
        position:static;
        padding:0;
    }

    .journey-kicker,
    .journey-note {
        display:none;
    }

    .journey-list {
        display:flex;
        gap:var(--space-2);
        overflow-x:auto;
        padding-bottom:var(--space-2);
        scrollbar-width:none;
    }

    .journey-list::-webkit-scrollbar {
        display:none;
    }

    .journey-list li {
        grid-template-columns:24px auto;
        flex:0 0 auto;
        gap:var(--space-2);
        align-items:center;
        padding:var(--space-2) var(--space-3);
        background:var(--color-surface-subtle);
        border:1px solid var(--border);
        border-radius:var(--radius-md);
    }

    .journey-list li:not(:last-child)::after,
    .journey-list small {
        display:none;
    }

    .journey-list li > span {
        width:24px;
        height:24px;
    }

    .calculator-layout,
    .planning-layout {
        grid-template-columns:minmax(0, 1fr);
    }

    .input-panel,
    .result-panel,
    .preparation-panel {
        grid-column:auto;
        grid-row:auto;
    }
}

@media (max-width:760px) {
    .app {
        padding:0 max(var(--space-4), env(safe-area-inset-right)) calc(var(--counter-mobile) + var(--space-4) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    }

    .app-chrome {
        grid-template-columns:1fr;
        grid-template-areas:
            "header"
            "doughy";
        padding:var(--space-2) 0 var(--space-4);
    }

    .header {
        grid-template-areas:"brand utilities";
        grid-template-columns:minmax(0, 1fr) auto;
        min-height:52px;
        padding:var(--space-2) 0;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .header h1 {
        font-size:1.15rem;
    }

    .header p {
        font-size:.68rem;
    }

    /* Die Theke. Eine eigene Zone von 172px am unteren Rand, die die Reiter-Zeile
       traegt und spaeter Doughy aufnimmt. Die freie Flaeche oberhalb der Zeile ist
       sein Platz: seine Fussline liegt bei bottom:79px, die Zeile endet 54px ueber
       dem Rand, das laesst die geforderten 17px Abstand. Siehe
       design/nizember-redesign/APP-SHELL.md. */
    .theke {
        position:fixed;
        z-index:var(--z-navigation);
        right:0;
        bottom:0;
        left:0;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        height:calc(var(--counter-mobile) + env(safe-area-inset-bottom));
        padding:0 max(var(--space-3), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
        background:var(--gradient-counter);
        box-shadow:var(--shadow-md);
    }

    /* Vier Reiter nach dem Entwurf, Turn 10: "die vier Reiter à 48px" - Home,
       Rezepte und die zwei Platzhalter. Backtag und Zeitplaner haben in der Theke
       keinen eigenen Eintrag mehr, wie schon am Desktop; Mehr zieht in den Kopf um
       (Turn 10: "Kopf 52px - Marke, Medaillen, Menü"), siehe .header-utilities
       #navMore weiter unten. Das laesst Doughy dieselben 17px Abstand wie zuvor,
       jetzt ueber einer 48px statt 44px hohen Zeile. */
    #navPreparation,
    #navPlanning {
        display:none;
    }

    .theke .nav-item--planned {
        display:inline-flex;
    }

    html[data-layout^="mobile"] .theke .navigation,
    .theke .navigation {
        justify-self:auto;
        justify-content:space-between;
        width:auto;
        min-height:48px;
        gap:2px;
        overflow:visible;
        margin:0;
        padding:0;
        background:transparent;
        border:0;
    }

    .theke .nav-item {
        color:var(--color-counter-text-muted);
    }

    .theke .nav-item.active {
        color:var(--color-counter-text);
        background:var(--color-accent-theme-fill);
    }

    /* A backdrop-filter would turn the sticky app chrome into the containing block
       for the fixed counter zone. Keep the companion surface clear so the counter
       anchors to the viewport instead of covering Doughy's actions. */
    .app-chrome {
        backdrop-filter:none;
    }

    .nav-item {
        flex:1 1 0;
        min-width:0;
        min-height:var(--touch-target);
        padding:0 var(--space-2);
        font-size:.7rem;
        overflow:visible;
        white-space:nowrap;
    }

    .nav-item::before { display:none; }

    /* "Mehr" zieht in den Kopf um (Turn 10: "Kopf 52px - Marke, Medaillen, Menü") und
       ist dort kein Theken-Reiter mehr - eigene, kompakte Form statt der
       flex:1-Zeilenbreite oben. */
    .header-utilities .nav-item--menu {
        flex:0 0 auto;
        min-width:44px;
        min-height:44px;
        padding:0 var(--space-3);
        color:var(--text-secondary);
        font-size:var(--font-caption);
        background:var(--color-surface-subtle);
        border:1px solid var(--border);
        border-radius:var(--radius-md);
    }

    .header-utilities .nav-item--menu.active {
        color:var(--primary-strong);
        background:var(--surface-raised);
        border-color:var(--color-border-primary);
    }

    .doughy-companion {
        grid-template-columns:112px minmax(0, 1fr);
        min-height:92px;
        width:100%;
        margin-top:0;
        padding:var(--space-1) 0 var(--space-3);
        border-bottom:1px solid var(--border);
    }

    .doughy-avatar {
        width:112px;
        height:88px;
        transform:translateY(-17px) rotate(-1deg);
    }

    .doughy-character {
        width:126px;
        height:94px;
    }

    .doughy-introduction span {
        font-size:var(--font-label);
    }

    .doughy-introduction p {
        font-size:.7rem;
    }

    .doughy-speech {
        margin-top:var(--space-1);
        padding:6px var(--space-2);
    }

    #doughyMessage {
        font-size:var(--font-caption);
        line-height:1.4;
    }

    .app-chrome.is-doughy-compact .doughy-companion {
        min-height:76px;padding:0;
    }

    .app-chrome.is-doughy-compact .doughy-character {
        width:108px;
        height:82px;
    }

    .journey-sidebar {
        display:none;
    }

    .guided-start {
        gap:var(--space-5);
        margin-bottom:var(--space-4);
        padding:var(--space-5) 0 var(--space-4);
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .guided-start-heading h2 {
        font-size:1.9rem;
    }

    .guided-choice-grid,
    .workbench-fields {
        grid-template-columns:minmax(0, 1fr);
        gap:0;
    }

    .guided-choice .choice-number {
        grid-row:span 2;
        margin-bottom:0;
    }

    .recipe-foundation {
        align-items:stretch;
        flex-direction:column;
        gap:var(--space-3);
        padding:var(--space-4) 0;
        background:transparent;
        border-width:1px 0;
        border-radius:0;
    }

    .recipe-foundation-actions {
        width:100%;
    }

    .recipe-foundation-actions > * {
        flex:1;
    }

    /* Auf dem Telefon laeuft die Zusammenfassung ueber die volle Breite und
       traegt deshalb keinen Schatten - eine schwebende Karte wuerde sich an
       einer Kante abschneiden, die es hier nicht gibt. Die Regeln fuer die
       dritte und vierte Kachel sind mit der Kachelform entfallen; sie zielten
       auf Kinder, die es in der Zeilenliste nicht mehr gibt. */
    .recipe-preview {
        background:transparent;
        border-width:1px 0;
        border-radius:0;
        box-shadow:none;
    }

    .guided-primary-action,
    .guided-primary-action .primary-button {
        width:100%;
    }

    /* Die flache Zeilenform ist seit css/cards.css der Normalfall - hier bleibt
       nur, was das Telefon wirklich anders braucht: engere Spalten und keine
       Einblendbewegung. Die frueheren Regeln bauten die erste Zeile wieder zur
       Kachel mit Verlauf und Rahmen zurueck; das war die Gegenbewegung zum
       Entwurf und ist ersatzlos entfallen. */
    .result-grid {
        gap:0 var(--space-4);
    }

    .result-card {
        animation:none;
    }

    .calculator-layout {
        display:flex;
        flex-direction:column;
        gap:var(--space-6);
    }

    .dashboard-column {
        display:contents;
    }

    .input-panel,
    .result-panel,
    .preparation-panel {
        width:100%;
        padding:0;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .input-panel {
        order:1;
        padding-top:var(--space-4);
        border-top:1px solid var(--border);
    }

    .result-panel {
        order:2;
        scroll-margin-top:156px;
    }

    .preparation-panel {
        order:3;
        padding-top:var(--space-5);
        border-top:1px solid var(--border);
    }

    .panel-heading {
        margin-bottom:var(--space-4);
    }

    .workbench-fields-core {
        margin-top:var(--space-4);
    }

    .workbench-fields {
        gap:0;
    }

    .number-control {
        grid-template-columns:50px minmax(0, 1fr) 50px;
        gap:var(--space-2);
    }

    .number-btn {
        width:50px;
        height:52px;
    }

    .form-group {
        margin-bottom:var(--space-4);
    }

    .form-group input,
    .form-group select {
        height:52px;
        font-size:16px;
    }

    #recipeSteps {
        position:relative;
        display:grid;
        gap:0;
    }

    #recipeSteps::before {
        position:absolute;
        top:24px;
        bottom:24px;
        left:5px;
        width:1px;
        background:var(--border);
        content:"";
    }

    .step {
        margin:0;
        padding:0 var(--space-2) var(--space-5) var(--space-5);
        background:transparent;
        border:0;
        border-radius:0;
    }

    .step::before {
        top:6px;
        bottom:auto;
        left:0;
        width:11px;
        height:11px;
        background:var(--primary);
    }

    .baking-recommendation {
        margin-top:var(--space-3);
        padding:var(--space-4) 0 0;
        background:transparent;
        border-width:1px 0 0;
        border-radius:0;
    }
}

@media (max-width:340px) {
    .header p,
    .doughy-introduction p,
    .guided-start-heading > p:not(.experience-indicator) {
        display:none;
    }

    .doughy-companion {
        grid-template-columns:104px minmax(0, 1fr);
        padding-bottom:var(--space-2);
    }

    .doughy-avatar {
        width:104px;
        height:82px;
    }

    .doughy-character {
        width:116px;
        height:88px;
    }

    .guided-start-heading h2 {
        font-size:1.75rem;
    }
}

@media (max-width:390px) {
    .brand-lockup {
        gap:var(--space-2);
    }

    .navigation {
        justify-content:flex-start;
        overflow-x:auto;
        overscroll-behavior-x:contain;
    }

    .nav-item::before {
        display:none;
    }

    .nav-item {
        flex:0 0 auto;
        min-width:var(--touch-target);
        padding:0 7px;
        font-size:.67rem;
    }

    .recipe-foundation-actions {
        flex-direction:column;
    }

    .recipe-foundation-actions > * {
        width:100%;
    }
}

/* Doughy zieht in die Theke. Der Entwurf setzt ihn im Hochformat des Telefons auf
   90x90px mit der Fusslinie bei bottom:79px, seine Rede daneben ab left:118px und
   bottom:124px, ohne Blase, als Mono-Zeile auf der Nuss. Siehe
   design/nizember-redesign/APP-SHELL.md und die Rahmen 3a bis 6b der Entwurfsdatei
   fuer Mobile.

   Nicht in der Unterhaltung: dort zeigt die Theke keine Flaeche, Doughy stuende
   sonst frei ueber dem Verlauf. Und nicht im flachen Querformat, wo die Zone auf
   die Reiter-Zeile schrumpft und keine 79px Fusslinie mehr traegt. In beiden
   Faellen bleibt der Beistellkasten, wie er war. */
@media (max-width:760px) and (min-height:561px) {
    html:not([data-nizember-view="conversation"]) .doughy-companion {
        position:fixed;
        z-index:calc(var(--z-navigation) + 1);
        inset:0;
        display:block;
        min-height:0;
        margin:0;
        padding:0;
        border:0;
        pointer-events:none;
    }

    html:not([data-nizember-view="conversation"]) .doughy-companion .doughy-avatar {
        position:absolute;
        bottom:79px;
        left:8px;
        width:72px;
        height:72px;
        transform:none;
        pointer-events:auto;
    }

    html:not([data-nizember-view="conversation"]) .doughy-companion .doughy-character {
        --doughy-scale:1;
        width:72px;
        height:72px;
        filter:var(--shadow-counter-figure);
    }

    html:not([data-nizember-view="conversation"]) .doughy-companion .doughy-introduction {
        display:none;
    }

    html:not([data-nizember-view="conversation"]) .doughy-companion .doughy-speech {
        position:absolute;
        right:16px;
        bottom:124px;
        left:118px;
        margin:0;
        padding:0;
        background:none;
        border:0;
        box-shadow:none;
        pointer-events:auto;
    }

    html:not([data-nizember-view="conversation"]) .doughy-companion .doughy-speech::before {
        display:none;
    }

    html:not([data-nizember-view="conversation"]) .doughy-companion #doughyMessage {
        color:var(--color-counter-speech);
        font-family:var(--font-mono);
        font-size:.76rem;
        font-weight:500;
        line-height:1.4;
    }

    /* Gare-Schiene, exakt nach Nizember Redesign Mobile.dc.html Rahmen 3a: Bahn
       bottom:104px, Beschriftungszeile darunter bei bottom:82px, dieselbe linke
       Kante wie die Sprechblase. */
    html:not([data-nizember-view="conversation"]) .doughy-journey-rail {
        display:block;
        position:absolute;
        right:16px;
        left:118px;
        bottom:104px;
        pointer-events:none;
    }

    html:not([data-nizember-view="conversation"]) .doughy-journey-labels {
        position:absolute;
        right:0;
        left:0;
        bottom:-22px;
    }

    /* Die Schiene gehoert auch in die Unterhaltung, aber unter den Verlauf statt darueber.
       Im Kopf konkurriert sie mit Doughy, ueber den Karten schwebt sie. Fest am unteren
       Rand hat sie ihren eigenen Streifen; der Verlauf bekommt unten Polsterung, damit
       nichts darunter laeuft. Die Navigationsleiste ist in dieser Ansicht ausgeblendet,
       der Streifen nimmt also niemandem den Platz weg. */
    html[data-nizember-view="conversation"][data-layout="mobile-portrait"] .doughy-journey-rail {
        display:block;
        position:fixed;
        z-index:calc(var(--z-navigation) + 1);
        right:16px;
        bottom:calc(46px + env(safe-area-inset-bottom));
        left:16px;
        pointer-events:none;
    }

    html[data-nizember-view="conversation"][data-layout="mobile-portrait"] .doughy-journey-labels {
        position:absolute;
        right:0;
        left:0;
        bottom:-22px;
    }

    html[data-nizember-view="conversation"][data-layout="mobile-portrait"] .conversation-shell {
        padding-bottom:calc(84px + env(safe-area-inset-bottom));
    }
}

/* Im Querformat des Telefons bleiben keine 172px fuer die Theke uebrig, ohne dass
   der Inhalt darunter verschwindet. Bis die Staffel fuer Doughy im Querformat
   steht, schrumpft die Zone auf die Reiter-Zeile. Die Vorgabe fuer das Tablet im
   Querformat, 190px, bleibt davon unberuehrt. */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape) {
    :root {
        --counter-mobile:74px;
    }
}

/* adaptive.css */
/* =========================================
   Adaptive product layouts
   The same DOM, state and calculations receive
   four intentional spatial compositions.
========================================= */

/* Desktop: persistent product rail, calm workbench and a free companion stage. */
@media (min-width:1181px) {
    html[data-layout="desktop"] .app {
        position:relative;
    }

    /* Waagerechte Kopfzeile statt linker Seitenleiste, nach dem Entwurf:
       Nizember Redesign Desktop.dc.html, Rahmen 10b. Backtag und Zeitplaner
       haben dort keinen eigenen Eintrag; Backtag ist ueber die Zettel-Karten auf
       Home erreichbar (schon vorhanden). Einkaufsliste und Backtagebuch zeigen
       noch auf nichts, siehe design/nizember-redesign/APP-SHELL.md.

       Home stand hier bis zum 16.08.2026 ebenfalls auf display:none, mit der
       Begruendung, es sei ueber die Wortmarke erreichbar. Das stimmte nicht: die
       Wortmarke war ein totes div ohne Verweis, und im Browser nachgestellt gab
       es auf dem Desktop kein einziges sichtbares Bedienelement zurueck nach
       Home - nur Zurueck-Knopf oder URL. Die Wortmarke traegt jetzt den Verweis
       (css/layout.css), und Home steht zusaetzlich als eigener Reiter in der
       Leiste. Das sind fuenf Reiter statt der vier aus Rahmen 10b, bewusst und
       auf ausdruecklichen Wunsch: ein Weg zurueck zum Anfang gehoert sichtbar in
       die Leiste, nicht nur in eine Wortmarke, die niemand fuer anklickbar
       haelt. */
    html[data-layout="desktop"] #navPreparation,
    html[data-layout="desktop"] #navPlanning {
        display:none;
    }

    html[data-layout="desktop"] .nav-item--planned {
        display:inline-flex;
    }

    /* Kopfzeile nach Rahmen 10b: 62px hoch, 34px Rand, eine Haarlinie nach unten -
       kein eigener Kasten mit Rundung und Schatten. Die Reiter sind dort schlichte
       Textlinks mit 22px Abstand, keine Pillen-Gruppe mit Symbolen. */
    html[data-layout="desktop"] .header {
        grid-template-columns:auto minmax(0, 1fr) auto;
        min-height:62px;
        padding:0 34px;
        background:none;
        border:0;
        border-bottom:1px solid var(--border);
        border-radius:0;
        box-shadow:none;
        gap:var(--space-4);
    }

    html[data-layout="desktop"] .navigation {
        justify-self:end;
        gap:22px;
        padding:0;
        background:none;
        border:0;
    }

    html[data-layout="desktop"] .nav-item::before {
        display:none;
    }

    html[data-layout="desktop"] .theke .nav-item,
    html[data-layout="desktop"] .header-utilities .nav-item {
        min-height:0;
        padding:0;
        color:var(--color-counter-top);
        background:none;
        border:0;
        box-shadow:none;
        font-size:.87rem;
        font-weight:700;
    }

    html[data-layout="desktop"] .theke .nav-item:hover:not([aria-disabled="true"]),
    html[data-layout="desktop"] .header-utilities .nav-item:hover {
        color:var(--primary);
        background:none;
    }

    html[data-layout="desktop"] .header-utilities {
        gap:22px;
    }

    /* Die Versionsangabe ist im Entwurf kein gefuelltes Etikett, sondern eine stille
       Mono-Zeile - dort steht an dieser Stelle das Alpha-Zeichen. */
    html[data-layout="desktop"] .version {
        padding:0;
        color:var(--text-muted);
        background:none;
        border:0;
        font-family:var(--font-mono);
        font-size:.66rem;
        font-weight:500;
        letter-spacing:.06em;
    }

    /* Die Theke: eine neue, eigene Zone unten fuer Doughy allein - die Reiter
       bleiben oben im Kopf, .theke dort unveraendert display:contents. .app-chrome
       umschliesst aber .header UND .doughy-companion als Geschwister (siehe
       index.html) - es fix zu setzen zieht den Kopf mit nach unten. Stattdessen
       bleibt .app-chrome im normalen Fluss, nur .doughy-companion selbst wird fix,
       genau wie schon bei Telefon und Tablet. */
    html[data-layout="desktop"] .app-chrome {
        position:static;
        display:block;
        width:auto;
        min-height:0;
        padding:0;
        background:transparent;
        backdrop-filter:none;
    }

    html[data-layout="desktop"] .app-chrome::before {
        display:none;
    }

    html[data-layout="desktop"] .doughy-companion {
        position:fixed;
        z-index:calc(var(--z-navigation) + 1);
        right:0;
        bottom:0;
        left:0;
        display:block;
        width:auto;
        min-height:0;
        height:176px;
        margin:0;
        padding:0;
        background:var(--gradient-counter);
        box-shadow:var(--shadow-md);
    }

    html[data-layout="desktop"] .workspace-shell {
        margin-bottom:176px;
        grid-template-columns:minmax(0, 1fr);
    }

    html[data-layout="desktop"] main > .page:not(#calculatorPage) {
        margin-bottom:176px;
    }

    html[data-layout="desktop"] .journey-sidebar {
        display:none;
    }

    html[data-layout="desktop"] .workspace-content {
        position:relative;
    }

    html[data-layout="desktop"] .guided-start {
        grid-template-columns:minmax(0, 1.65fr) minmax(300px, 1fr);
        width:100%;
        min-height:0;
        margin-top:var(--space-4);
        padding:var(--space-4) 0 var(--space-5);
        gap:var(--space-4);
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    html[data-layout="desktop"] .guided-start-heading,
    html[data-layout="desktop"] .guided-choice-grid,
    html[data-layout="desktop"] .recipe-foundation {
        grid-column:1;
    }

    html[data-layout="desktop"] .guided-start-heading { grid-row:1; }
    html[data-layout="desktop"] .recipe-foundation { grid-row:3; }

    html[data-layout="desktop"] .guided-start-heading h2 {
        font-size:clamp(2.15rem, 3.2vw, 3rem);
    }

    html[data-layout="desktop"] .recipe-foundation {
        padding:var(--space-4);
    }

    html[data-layout="desktop"] .recipe-preview {
        grid-column:1;
        grid-row:4;
        align-self:stretch;
    }

    html[data-layout="desktop"] .recipe-preview > div {
        padding:var(--space-3);
    }

    html[data-layout="desktop"] .guided-primary-action {
        grid-column:2;
        grid-row:4;
        align-self:stretch;
    }

    html[data-layout="desktop"] .guided-primary-action .primary-button {
        width:100%;
        max-width:260px;
        min-width:0;
        margin-left:auto;
    }

    html[data-layout="desktop"] .preset-preview,
    html[data-layout="desktop"] .preset-status {
        grid-column:1 / -1;
    }

    /* Doughy in der Theke, Rahmen 10b: Fusslinie bottom:4px, Figur ~197px,
       Rede daneben ab left:290px in Mono. .doughy-companion selbst ist bereits
       oben in der Zone positioniert (fix, 176px). */
    html[data-layout="desktop"] .doughy-avatar {
        position:absolute;
        bottom:4px;
        left:17px;
        width:197px;
        height:197px;
        transform:none;
    }

    html[data-layout="desktop"] .doughy-character {
        --doughy-scale:1;
        width:197px;
        height:197px;
        filter:var(--shadow-counter-figure);
    }

    html[data-layout="desktop"] .doughy-introduction {
        display:none;
    }

    html[data-layout="desktop"] .doughy-speech {
        position:absolute;
        left:290px;
        right:34px;
        bottom:70px;
        /* Die alte schwebende Spalte hatte overflow:auto fuer eine lange Nachricht;
           die feste 176px-Theke braucht dieselbe Grenze, sonst waechst der Text
           ueber die Theke hinaus in den Seiteninhalt. */
        max-height:58px;
        overflow:hidden;
        margin:0;
        padding:0;
        background:none;
        border:0;
        box-shadow:none;
    }

    html[data-layout="desktop"] .doughy-speech::before {
        display:none;
    }

    html[data-layout="desktop"] #doughyMessage {
        color:var(--color-counter-speech);
        font-family:var(--font-mono);
        font-size:.9rem;
        font-weight:500;
        line-height:1.4;
    }

    /* Die Gare-Schiene sitzt im unteren, von der Sprechblase (bottom:70px) noch
       nicht belegten Teil der 176px-Theke - dieselbe linke Kante wie die
       Sprechblase (300px, siehe APP-SHELL.md "damit Doughy und seine Sprechblase
       ihn nie ueberdecken"). */
    html[data-layout="desktop"] .doughy-journey-rail {
        display:block;
        position:absolute;
        left:300px;
        right:34px;
        bottom:18px;
    }
}

/* Tablet: one controlled chrome row; no duplicated horizontal journey strip. */
@media (min-width:761px) and (max-width:1180px) {
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .app-chrome {
        grid-template-columns:minmax(0, 1fr) minmax(238px, 300px);
        grid-template-areas:"header doughy";
        align-items:center;
        padding:var(--space-3) 0 var(--space-4);
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .journey-sidebar {
        display:none;
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .workspace-shell {
        grid-template-columns:minmax(0, 1fr);
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion {
        grid-template-columns:142px minmax(0, 1fr);
        min-height:126px;
        margin:0;
        padding:var(--space-2) 0;
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-avatar {
        width:142px;
        height:120px;
        transform:translateY(-20px) rotate(-1deg);
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-character {
        width:156px;
        height:124px;
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .guided-start {
        padding:var(--space-5);
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .guided-primary-action .primary-button {
        min-width:220px;
    }
}

@media (min-width:761px) and (max-width:899px) and (orientation:portrait) {
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .app-chrome {
        grid-template-columns:minmax(0, 1fr);
        grid-template-areas:
            "header"
            "doughy";
        gap:var(--space-3);
    }

    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion {
        width:min(100%, 390px);
        justify-self:end;
    }
}

/* Die Theke aufs Tablet. Zwei Zonen, je nach Ausrichtung: Hochformat 214px hoch
   (Entwurfsdatei; die Vorgabe in APP-SHELL.md nennt dafuer keine eigene Zahl),
   Querformat 190px (Entwurfsdatei und Vorgabe stimmen ueberein). In beiden bleibt
   die Fusslinie bei bottom:108px; die Koerperhoehe sinkt von 104px auf 80px. Fuer
   96px, den zweiten von der Vorgabe genannten Zwischenwert, liegt in den
   ausgelieferten Rahmen keine zweite Querformat-Breite vor - 80px ist der einzige
   gemessene Wert und damit hier verbindlich.

   Wie auf dem Telefon: Doughy und die Reiter-Zeile verlassen ihr Rasterfeld in der
   Kopfzeile per position:fixed, darum verliert .app-chrome seine zweite Spalte,
   sonst bliebe dort eine leere Luecke. Nicht in der Unterhaltung - dort bleibt der
   Beistellkasten, wie er auf dem Telefon auch bleibt. */
@media (min-width:761px) and (max-width:1180px) {
    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .app-chrome {
        grid-template-columns:minmax(0, 1fr);
        grid-template-areas:"header";
        /* backdrop-filter macht die sitzende Theke sonst zum Bezugsrahmen fuer die
           fixierten Kinder .theke und .doughy-companion - dieselbe Falle wie auf
           dem Telefon, siehe css/mobile.css. */
        backdrop-filter:none;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .theke {
        position:fixed;
        z-index:calc(var(--z-navigation) + 1);
        right:0;
        bottom:0;
        left:0;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        padding:0 var(--space-4) 10px;
        background:var(--gradient-counter);
        box-shadow:var(--shadow-md);
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-portrait"] .theke {
        height:214px;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-landscape"] .theke {
        height:190px;
    }

    /* Vier Reiter wie am Telefon (Home, Rezepte, zwei Platzhalter) statt der
       fuenf alten - Backtag und Zeitplaner entfallen, Mehr zieht in den Kopf um.
       52px Reihenhoehe nach der Entwurfsdatei (Tablet, "Home"-Schaltflaeche). */
    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) #navPreparation,
    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) #navPlanning {
        display:none;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .theke .nav-item--planned {
        display:inline-flex;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .theke .navigation {
        justify-content:space-between;
        width:auto;
        min-height:52px;
        gap:var(--space-2);
        margin:0;
        padding:0;
        background:transparent;
        border:0;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .theke .nav-item {
        color:var(--color-counter-text-muted);
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .theke .nav-item.active {
        color:var(--color-counter-text);
        background:var(--color-accent-theme-fill);
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion {
        position:fixed;
        z-index:calc(var(--z-navigation) + 1);
        inset:0;
        display:block;
        /* css/concept-layout.css setzt fuer .doughy-companion auf diesem Breakpoint
           noch width:min(100%, var(--companion-slot-tablet)) aus der Zeit vor der
           Theke - das war fuer die alte Grid-Zelle richtig, schiebt die jetzt
           fixierte Box aber rechtsbuendig auf 292px zusammen, statt sie ueber
           inset:0 auf die volle Breite zu strecken. Gefunden beim ersten echten
           Tablet-Screenshot dieser Session - kein width war je gesetzt worden.
           width:auto ist hier laut Spezifikation korrekt (beide inset-Seiten
           gesetzt, sollte auf volle Breite strecken), rechnet sich in dieser
           Vorschau-Umgebung aber nachweislich zu 0 statt zur Fensterbreite -
           width:100% umgeht das zuverlaessig, siehe Desktop-Regel oben fuer den
           Vergleichsfall ohne das Problem. */
        width:100%;
        min-height:0;
        margin:0;
        padding:0;
        border:0;
        pointer-events:none;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion .doughy-avatar {
        position:absolute;
        bottom:108px;
        transform:none;
        pointer-events:auto;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-portrait"] .doughy-companion .doughy-avatar,
    html:not([data-nizember-view="conversation"])[data-layout="tablet-portrait"] .doughy-companion .doughy-character {
        width:104px;
        height:104px;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-portrait"] .doughy-companion .doughy-avatar {
        left:43px;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-landscape"] .doughy-companion .doughy-avatar,
    html:not([data-nizember-view="conversation"])[data-layout="tablet-landscape"] .doughy-companion .doughy-character {
        width:80px;
        height:80px;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-landscape"] .doughy-companion .doughy-avatar {
        left:50px;
    }

    /* Genau wie auf dem Telefon: das Mass steht explizit auf beiden Ebenen, statt
       100% weiterzureichen. Mit 100% maass die Figur real 104x113px statt 104x104,
       neun Pixel zu hoch. */
    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion .doughy-character {
        --doughy-scale:1;
        filter:var(--shadow-counter-figure);
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion .doughy-introduction {
        display:none;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion .doughy-speech {
        position:absolute;
        right:26px;
        left:190px;
        margin:0;
        padding:0;
        background:none;
        border:0;
        box-shadow:none;
        pointer-events:auto;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-portrait"] .doughy-companion .doughy-speech {
        bottom:152px;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-landscape"] .doughy-companion .doughy-speech {
        top:18px;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion .doughy-speech::before {
        display:none;
    }

    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion #doughyMessage {
        color:var(--color-counter-speech);
        font-family:var(--font-mono);
        font-size:.86rem;
        font-weight:500;
        line-height:1.4;
    }

    /* Gare-Schiene, dieselbe linke/rechte Kante wie die Sprechblase (190px/26px).
       APP-SHELL.md nennt fuer das Tablet keine eigene Rahmen-Zahl fuer die Schiene
       selbst - Platzierung mittig in der Luecke zwischen Sprechblase und
       Reiter-Zeile, gegengeprueft per Screenshot bei 900x1200 und 1100x760. */
    html:not([data-nizember-view="conversation"]):is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-journey-rail {
        display:block;
        position:absolute;
        right:26px;
        left:190px;
        pointer-events:none;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-portrait"] .doughy-journey-rail {
        bottom:96px;
    }

    html:not([data-nizember-view="conversation"])[data-layout="tablet-landscape"] .doughy-journey-rail {
        bottom:56px;
    }
}

/* Mobile portrait remains guided and emotional, without gaining desktop density. */
@media (max-width:760px) and (orientation:portrait) {
    html[data-layout="mobile-portrait"] .doughy-companion {
        grid-template-columns:124px minmax(0, 1fr);
        min-height:104px;
        border-bottom-color:var(--color-border-primary);
    }

    html[data-layout="mobile-portrait"] .doughy-avatar {
        width:124px;
        height:98px;
        transform:translateY(-19px) rotate(-1deg);
    }

    /* 140x112 stand bei 393x852 ueber der Begruessung im Kopf. 104x83 haelt dasselbe
       Seitenverhaeltnis und laesst den Text daneben frei. */
    html[data-layout="mobile-portrait"] .doughy-character {
        width:104px;
        height:83px;
    }

    html[data-layout="mobile-portrait"] .guided-start-heading {
        max-width:30rem;
    }

    html[data-layout="mobile-portrait"] .guided-primary-action,
    html[data-layout="mobile-portrait"] .guided-primary-action .primary-button {
        width:100%;
    }
}

/* Mobile landscape is a dedicated two-zone workbench, not rotated portrait. */
@media (max-width:960px) and (max-height:560px) and (orientation:landscape) {
    html[data-layout="mobile-landscape"] .app {
        width:100%;
        padding:0 max(var(--space-4), env(safe-area-inset-right)) var(--space-4) max(var(--space-4), env(safe-area-inset-left));
    }

    html[data-layout="mobile-landscape"] .app-chrome {
        grid-template-columns:minmax(0, 1fr) minmax(218px, 242px);
        grid-template-areas:"header doughy";
        align-items:center;
        min-height:92px;
        padding:var(--space-2) 0;
        backdrop-filter:none;
    }

    html[data-layout="mobile-landscape"] .header {
        grid-template-areas:"brand navigation utilities";
        grid-template-columns:minmax(122px, 1fr) auto var(--touch-target);
        min-height:68px;
        padding:var(--space-2) var(--space-3);
        gap:var(--space-3);
    }

    html[data-layout="mobile-landscape"] .header h1 {
        font-size:1rem;
    }

    html[data-layout="mobile-landscape"] .header p,
    html[data-layout="mobile-landscape"] .version {
        display:none;
    }

    html[data-layout="mobile-landscape"] .navigation {
        gap:2px;
        overflow:visible;
    }

    html[data-layout="mobile-landscape"] .nav-item {
        min-height:var(--touch-target);
        padding:0 6px;
        font-size:.66rem;
    }

    html[data-layout="mobile-landscape"] .header-utilities {
        justify-self:end;
    }

    html[data-layout="mobile-landscape"] .theme-toggle {
        min-width:var(--touch-target);
        min-height:var(--touch-target);
        padding:0;
    }

    html[data-layout="mobile-landscape"] #themeToggleLabel {
        display:none;
    }

    html[data-layout="mobile-landscape"] .doughy-companion {
        grid-template-columns:92px minmax(0, 1fr);
        min-height:84px;
        margin:0;
        padding:0;
        border:0;
    }

    html[data-layout="mobile-landscape"] .doughy-avatar {
        width:92px;
        height:76px;
        transform:translateY(-6px) rotate(-.75deg);
    }

    html[data-layout="mobile-landscape"] .doughy-character {
        width:104px;
        height:82px;
    }

    html[data-layout="mobile-landscape"] .doughy-introduction p {
        display:none;
    }

    html[data-layout="mobile-landscape"] .doughy-introduction span {
        font-size:var(--font-label);
    }

    html[data-layout="mobile-landscape"] .doughy-speech {
        margin-top:2px;
        padding:var(--space-2);
    }

    html[data-layout="mobile-landscape"] #doughyMessage {
        font-size:.7rem;
        line-height:1.3;
    }

    html[data-layout="mobile-landscape"] .journey-sidebar {
        display:none;
    }

    html[data-layout="mobile-landscape"] .workspace-shell {
        grid-template-columns:minmax(0, 1fr);
    }

    html[data-layout="mobile-landscape"] .guided-start {
        grid-template-columns:minmax(172px, .66fr) minmax(0, 1.34fr);
        column-gap:var(--space-5);
        row-gap:var(--space-3);
        margin-bottom:var(--space-4);
        padding:var(--space-4);
    }

    html[data-layout="mobile-landscape"] .guided-start-heading {
        grid-column:1;
        grid-row:1;
    }

    html[data-layout="mobile-landscape"] .guided-start-heading h2 {
        font-size:clamp(1.45rem, 3vw, 1.9rem);
    }

    html[data-layout="mobile-landscape"] .guided-start-heading p {
        margin-top:var(--space-2);
        font-size:var(--font-label);
    }

    html[data-layout="mobile-landscape"] .choice-number {
        width:20px;
        height:20px;
        margin-bottom:0;
    }

    html[data-layout="mobile-landscape"] .recipe-foundation,
    html[data-layout="mobile-landscape"] .recipe-preview,
    html[data-layout="mobile-landscape"] .guided-primary-action,
    html[data-layout="mobile-landscape"] .preset-preview,
    html[data-layout="mobile-landscape"] .preset-status {
        grid-column:1 / -1;
    }

    html[data-layout="mobile-landscape"] .recipe-foundation {
        gap:var(--space-3);
        padding:var(--space-3) var(--space-4);
    }

    html[data-layout="mobile-landscape"] .recipe-foundation p {
        font-size:var(--font-label);
    }

    html[data-layout="mobile-landscape"] .recipe-preview > div {
        padding:var(--space-3);
    }

    html[data-layout="mobile-landscape"] .guided-primary-action .primary-button {
        width:100%;
    }

    html[data-layout="mobile-landscape"] .calculator-layout {
        grid-template-columns:minmax(0, 1.2fr) minmax(230px, .8fr);
        gap:var(--space-4);
    }

    html[data-layout="mobile-landscape"] .input-panel {
        grid-column:1;
        grid-row:1;
    }

    html[data-layout="mobile-landscape"] .result-panel {
        grid-column:2;
        grid-row:1;
    }

    html[data-layout="mobile-landscape"] .preparation-panel {
        grid-column:1 / -1;
        grid-row:2;
    }

    html[data-layout="mobile-landscape"] .planning-layout {
        grid-template-columns:minmax(200px, .72fr) minmax(0, 1fr);
        gap:var(--space-4);
    }
}

@media (prefers-reduced-motion:reduce) {
    html[data-layout="mobile-landscape"] .app-chrome,
    html[data-layout="desktop"] .header {
        transition:none;
    }
}

/* planning.css */
/* =========================================
   Central Planning Engine UI
========================================= */

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.planning-summary[hidden],
.planning-timeline[hidden],
.planning-error[hidden],
.planning-error [hidden] {
    display:none;
}

.planning-compact {
    display:grid;
    grid-template-columns:minmax(150px, .8fr) minmax(260px, 1.5fr) auto auto;
    align-items:center;
    gap:var(--space-4);
    padding:var(--space-3) var(--space-4);
    background:var(--color-surface-subtle);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.planning-compact h3 {
    margin-top:2px;
    color:var(--text);
    font-size:var(--font-label);
}

.planning-compact dl {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-4);
}

.planning-compact dl div {
    display:grid;
    gap:2px;
}

.planning-compact dt,
.planning-compact > p {
    color:var(--text-secondary);
    font-size:var(--font-caption);
}

/* Nur die Bezeichnung wird zur gesperrten Marke - der Satzstatus darunter
   bleibt Fliesstext und darf nicht in Versalien stehen. */
.planning-compact dt {
    font-family:var(--font-mono);
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Start- und Backzeit sind Uhrzeiten - im Entwurf stehen die durchgehend in
   der Monospace, damit "heute 19:00" und "morgen 19:00" untereinander gleich
   breit bleiben (Turn 11b, Theke; Turn 14a, Zeitfenster). */
.planning-compact dd {
    color:var(--text);
    font-family:var(--font-mono);
    font-size:var(--font-label);
    font-weight:600;
}

.planning-compact[data-state="warning"] {
    border-color:var(--color-border-accent);
    background:var(--accent-soft);
}

.planning-layout {
    grid-template-columns:minmax(300px, .7fr) minmax(0, 1.35fr);
    align-items:start;
    max-width:1180px;
}

.planning-controls {
    position:sticky;
    top:var(--space-5);
    background:var(--surface);
}

.planning-help,
.field-help {
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.55;
}

.planning-help {
    margin-bottom:var(--space-5);
}

.planning-mode-group {
    display:grid;
    gap:var(--space-2);
    margin:0 0 var(--space-5);
    padding:0;
    border:0;
}

.planning-mode-group legend {
    margin-bottom:var(--space-2);
    color:var(--text);
    font-size:var(--font-label);
    font-weight:700;
}

.planning-mode-group label {
    display:grid;
    grid-template-columns:24px minmax(0, 1fr);
    align-items:start;
    min-height:64px;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--surface-raised);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    cursor:pointer;
}

.planning-mode-group input { margin-top:3px; }
.planning-mode-copy { display:grid; min-width:0; gap:var(--space-1); }
.planning-mode-copy strong { color:var(--text); font-size:var(--font-label); line-height:1.35; }
.planning-mode-copy small { color:var(--text-secondary); font-size:var(--font-caption); line-height:1.45; }

.planning-mode-group label:has(input:checked) {
    border-color:var(--primary);
    box-shadow:var(--shadow-focus);
}

.field-help {
    margin-top:calc(var(--space-2) * -1);
    margin-bottom:var(--space-5);
    font-size:var(--font-caption);
}

.planning-date-fields,
.planning-advanced-fields {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
}

.planning-date-fields input,
.planning-controls input,
.planning-controls select {
    width:100%;
}

.planning-advanced-fields .recommendation-panel,
.planning-advanced-fields > .secondary-button {
    grid-column:1 / -1;
}

.planning-error {
    margin-top:var(--space-4);
    padding:var(--space-4);
    background:var(--accent-soft);
    border:1px solid var(--color-border-accent);
    border-radius:var(--radius-md);
}

.planning-error h3 {
    color:var(--text);
    font-size:var(--font-body);
}

.planning-error p {
    margin-top:var(--space-2);
    color:var(--text-secondary);
    line-height:1.5;
}

.planning-error-actions {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin-top:var(--space-4);
}

.planning-confirmation,
.active-plan-actions {
    display:grid;
    gap:var(--space-3);
    margin-top:var(--space-4);
    padding:var(--space-4);
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

.planning-confirmation[hidden],
.active-plan-actions[hidden],
.preparation-plan-context[hidden],
.preparation-plan-offer[hidden],
.preparation-recipe-summary[hidden] { display:none; }

.planning-confirmation-actions,
.preparation-plan-context,
.preparation-plan-offer {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
}

.planning-confirmation-actions .primary-button { flex:1 1 100%; }
.planning-confirmation-actions .secondary-button,
.planning-confirmation-actions .quiet-button { flex:1 1 160px; }

.preparation-plan-offer,
.preparation-recipe-summary {
    display:grid;
    gap:var(--space-3);
    margin-bottom:var(--space-5);
    padding:var(--space-4);
    background:var(--color-surface-subtle);
    border-radius:var(--radius-md);
}

.preparation-recipe-summary dl {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-3);
    margin:0;
}
.preparation-recipe-summary dl div { display:grid; gap:var(--space-1); }
.preparation-recipe-summary dt { color:var(--text-muted); font-size:var(--font-caption); }
.preparation-recipe-summary dd { margin:0; font-weight:750; }

.preparation-plan-context {
    display:grid;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}
.preparation-plan-phases {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
}

.active-plan-status {
    color:var(--primary-strong);
    font-weight:700;
}

.active-phase-card,
.next-phase-card {
    display:grid;
    gap:var(--space-2);
    padding:var(--space-5);
    border-radius:var(--radius-md);
}

.active-phase-card {
    color:var(--text);
    background:var(--primary-soft);
    border:1px solid var(--color-border-accent);
}

.next-phase-card {
    background:var(--color-surface-subtle);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    border-radius:0;
}

.active-phase-card > span,
.next-phase-card > span,
.active-phase-card small,
.next-phase-card small {
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.active-phase-card p,
.next-phase-card p {
    max-width:58ch;
    color:var(--text-secondary);
    line-height:1.5;
}

@media (max-width:640px) {
    .preparation-recipe-summary dl,
    .preparation-plan-phases { grid-template-columns:minmax(0, 1fr); }
}

.planning-journey {
    min-width:0;
}

html[data-layout="desktop"] #planningPage .planning-journey {
    padding-top:0;
}

.planning-empty {
    display:grid;
    gap:var(--space-3);
    margin-bottom:var(--space-5);
    padding:var(--space-5);
    background:var(--surface-raised);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}
.planning-empty[hidden] { display:none; }
.planning-empty p { max-width:54ch; color:var(--text-secondary); }
.planning-empty .primary-button { width:max-content; }

.planning-summary {
    display:grid;
    grid-template-columns:minmax(200px, .8fr) minmax(0, 1.6fr);
    gap:var(--space-5);
    margin-bottom:var(--space-6);
    padding:var(--space-5);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.planning-summary-primary {
    display:grid;
    align-content:start;
    gap:var(--space-2);
}

.planning-summary-primary span,
.planning-summary-primary small,
.planning-summary dt {
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.planning-summary-primary strong {
    color:var(--text);
    font-size:clamp(1.2rem, 2vw, 1.65rem);
    line-height:1.25;
}

.planning-summary-primary small {
    width:max-content;
    padding:4px var(--space-2);
    color:var(--primary-strong);
    background:var(--primary-soft);
    border-radius:var(--radius-md);
    font-weight:700;
}

.planning-summary dl {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3) var(--space-5);
}

.planning-summary dl div {
    display:grid;
    gap:3px;
}

.planning-summary dd {
    color:var(--text);
    font-size:var(--font-label);
    font-weight:650;
}

.timeline-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:var(--space-4);
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--border);
}

.timeline-heading h2 {
    margin-top:var(--space-1);
    color:var(--text);
    font-size:var(--font-section);
}

.timeline-heading > p {
    color:var(--primary-strong);
    font-size:var(--font-label);
    font-weight:700;
}

.planning-timeline {
    position:relative;
    margin:0;
    padding:var(--space-3) 0 var(--space-3) 22px;
    list-style:none;
}

.planning-timeline::before {
    position:absolute;
    top:var(--space-5);
    bottom:var(--space-5);
    left:5px;
    width:1px;
    background:var(--border-strong);
    content:"";
}

.timeline-phase {
    position:relative;
    padding:var(--space-4) 0;
}

.timeline-marker {
    position:absolute;
    top:26px;
    left:-22px;
    width:11px;
    height:11px;
    background:var(--surface-raised);
    border:2px solid var(--primary);
    border-radius:50%;
}

.timeline-phase[data-status="completed"] .timeline-marker {
    background:var(--success);
    border-color:var(--success);
}

.timeline-phase[data-status="current"] .timeline-marker {
    box-shadow:var(--shadow-focus);
}

.timeline-phase[data-status="missed"] .timeline-marker {
    background:var(--warning);
    border-color:var(--warning);
}

.timeline-phase[data-category="cold"] .timeline-marker {
    border-color:var(--focus);
}

.timeline-phase[data-category="oven"] .timeline-marker,
.timeline-phase[data-category="baking"] .timeline-marker {
    border-color:var(--accent);
}

.timeline-phase article {
    display:grid;
    grid-template-columns:minmax(145px, .55fr) minmax(0, 1.45fr);
    gap:var(--space-5);
}

.timeline-time {
    display:grid;
    align-content:start;
    gap:var(--space-1);
}

.timeline-time span,
.timeline-meta,
.timeline-temperature,
.timeline-source {
    color:var(--text-muted);
    font-size:var(--font-caption);
}

.timeline-status {
    display:inline-flex;
    margin-inline-start:var(--space-2);
    padding:.15rem .5rem;
    color:var(--text);
    background:var(--surface-muted);
    border-radius:var(--radius-md);
    font-weight:700;
}

/* Uhrzeit und Dauer in der Monospace, wie im Zeitplaner aus Turn 14a. Die
   Zeitspalte steht dort links unter einer festen Breite; nur wenn alle Ziffern
   gleich breit sind, liegen "heute 18:00" und "morgen 19:00" wirklich
   untereinander. Die Beschreibung daneben bleibt Fliesstext. */
.timeline-time strong {
    color:var(--text);
    font-family:var(--font-mono);
    font-size:var(--font-label);
    font-weight:600;
}

.timeline-time span,
.timeline-meta {
    font-family:var(--font-mono);
}

.timeline-copy h3 {
    margin-top:var(--space-1);
    color:var(--text);
    font-size:var(--font-body);
}

.timeline-copy > p:not(.timeline-meta, .timeline-temperature, .timeline-source) {
    margin-top:var(--space-2);
    max-width:54ch;
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.5;
}

.timeline-temperature,
.timeline-source {
    margin-top:var(--space-2);
}

.timeline-source {
    display:none;
}

html[data-experience="expert"] .timeline-source {
    display:block;
}

html[data-experience="guided"] .timeline-copy > p:not(.timeline-meta) {
    display:none;
}

html[data-experience="guided"] .timeline-phase article {
    grid-template-columns:minmax(110px, .5fr) minmax(0, 1fr);
}

@media (max-width:900px) {
    .planning-layout,
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .planning-layout {
        grid-template-columns:minmax(0, 1fr);
    }

    .planning-controls {
        position:static;
    }

    html[data-layout] #planningPage .planning-journey {
        padding-top:0;
    }

    .planning-compact {
        grid-template-columns:minmax(0, 1fr) auto;
    }

    .planning-compact dl {
        grid-column:1 / -1;
        grid-row:2;
    }
}

@media (max-width:600px) {
    .planning-date-fields,
    .planning-advanced-fields,
    .planning-summary,
    .planning-summary dl {
        grid-template-columns:minmax(0, 1fr);
    }

    .planning-summary {
        gap:var(--space-4);
        padding:var(--space-4);
    }

    .timeline-heading {
        align-items:start;
        flex-direction:column;
    }

    .timeline-phase article,
    html[data-experience="guided"] .timeline-phase article {
        grid-template-columns:minmax(0, 1fr);
        gap:var(--space-2);
    }

    .planning-compact {
        grid-template-columns:minmax(0, 1fr) auto;
        padding-inline:0;
        background:transparent;
    }
}

@media (orientation:landscape) and (max-height:520px) and (max-width:900px) {
    html[data-layout="mobile-landscape"] .planning-layout {
        grid-template-columns:minmax(250px, .8fr) minmax(0, 1.2fr);
    }

    html[data-layout="mobile-landscape"] .planning-controls {
        position:sticky;
        top:var(--space-2);
        max-height:calc(100vh - var(--space-4));
        overflow:auto;
    }

    html[data-layout="mobile-landscape"] .planning-summary {
        grid-template-columns:minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion:reduce) {
    .timeline-marker,
    .planning-timeline,
    .planning-summary {
        animation:none;
        transition:none;
    }
}
/* Knetart: die letzte Entscheidung vor dem ersten Handgriff. Sie steht in der
   Zubereitung und nicht in der Werkbank, weil sie keine Menge im Rezept aendert. */
.kneading-choice {
    display:grid;
    gap:var(--space-3);
    margin-bottom:var(--space-5);
    padding:var(--space-4);
    background:var(--color-surface-subtle);
    border-radius:var(--radius-lg);
}

.kneading-choice h3 { margin:0; }
.kneading-help, .kneading-reason { margin:0; color:var(--text-secondary); font-size:var(--font-caption); }

.kneading-options {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
    gap:var(--space-2);
}

.kneading-option {
    display:grid;
    align-content:start;
    gap:var(--space-1);
    padding:var(--space-3);
    text-align:left;
    color:var(--text);
    background:var(--color-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font:inherit;
    cursor:pointer;
}

.kneading-option span { color:var(--text-secondary); font-size:var(--font-caption); }
.kneading-option small { color:var(--text-muted); font-size:var(--font-caption); }

.kneading-option.is-selected {
    border-color:var(--color-primary);
    box-shadow:inset 0 0 0 1px var(--color-primary);
}

.kneading-badge {
    justify-self:start;
    padding:0 var(--space-2);
    color:var(--color-primary);
    background:var(--color-surface-subtle);
    border-radius:var(--radius-sm);
    font-size:var(--font-caption);
    font-style:normal;
    font-weight:700;
}

.kneading-option:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:2px;
}

/* calendar.css */
.calendar-export {
    display:grid;
    gap:var(--space-3);
    margin-top:var(--space-5);
    padding-top:var(--space-5);
    border-top:1px solid var(--border);
}

.calendar-scope {
    display:grid;
    gap:var(--space-2);
    padding:0;
    border:0;
}

.calendar-scope legend {
    margin-bottom:var(--space-2);
    color:var(--text-secondary);
    font-size:var(--font-label);
    font-weight:700;
}

.calendar-scope label {
    display:flex;
    align-items:center;
    min-height:var(--touch-target);
    gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

.calendar-scope label:has(input:checked) { border-color:var(--primary); }

.calendar-export-preview {
    display:grid;
    gap:0;
    padding:0;
    list-style:none;
    border-top:1px solid var(--border);
}

.calendar-export-preview li {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:var(--space-3);
    padding-block:var(--space-2);
    border-bottom:1px solid var(--border);
}

.calendar-export-preview span { color:var(--text-secondary); font-size:var(--font-caption); text-align:right; }

.calendar-export-warning {
    padding:var(--space-3);
    color:var(--text-secondary);
    background:color-mix(in srgb, var(--warning) 5%, transparent);
    border-left:3px solid var(--warning);
    border-radius:var(--radius-sm);
}

.calendar-export-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.calendar-privacy { color:var(--text-muted); font-size:var(--font-caption); }

html[data-layout="mobile-portrait"] .calendar-export-preview li,
html[data-layout="mobile-landscape"] .calendar-export-preview li {
    grid-template-columns:minmax(0, 1fr);
    gap:2px;
}

html[data-layout="mobile-portrait"] .calendar-export-preview span,
html[data-layout="mobile-landscape"] .calendar-export-preview span { text-align:left; }

@media (prefers-reduced-motion:reduce) {
    .calendar-export,
    .calendar-export-preview li { animation:none; transition:none; }
}

/* pwa.css */
.pwa-status,
.storage-recovery-notice {
    position: fixed;
    z-index: var(--z-popover);
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: calc(var(--nav-mobile) + var(--space-4) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: min(28rem, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.pwa-status[hidden],
.storage-recovery-notice[hidden],
.pwa-install-panel[hidden],
.pwa-install-restore[hidden],
.pwa-install-actions > [hidden] {
    display:none !important;
}

.storage-recovery-notice {
    position: relative;
    z-index: var(--z-sticky);
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0 auto var(--space-3);
}

.pwa-status p,
.storage-recovery-notice p { margin: 0; line-height: 1.45; }
.pwa-status p { flex:1 1 auto; }
.pwa-status-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:var(--space-2); }
.pwa-status .quiet-button,
.storage-recovery-notice .quiet-button { flex: 0 0 auto; min-height: 2.75rem; }
.pwa-install-panel p { max-width: 60ch; }
.pwa-install-panel .primary-button { margin-top: var(--space-2); }
.pwa-install-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pwa-install-restore { justify-self:start; }
.pwa-install-help { margin-top: var(--space-3); color: var(--text-secondary); }
.pwa-install-panel[data-pwa-state="standalone"] { border-color:color-mix(in srgb, var(--success) 42%, var(--border)); }
.pwa-install-panel[data-pwa-state="ios-guidance"] { border-color:color-mix(in srgb, var(--primary) 42%, var(--border)); }

@media (max-width: 767px) {
    .pwa-status,
    .storage-recovery-notice {
        right: var(--space-3);
        left: var(--space-3);
        bottom: calc(var(--counter-mobile) + var(--space-3) + env(safe-area-inset-bottom));
    }
    .pwa-status { align-items:stretch; flex-direction:column; }
    .pwa-status-actions { justify-content:flex-end; }
    .storage-recovery-notice { right:auto; bottom:auto; left:auto; }
}

@media (orientation: landscape) and (max-height: 560px) {
    .pwa-status { left: auto; bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-status,
    .storage-recovery-notice { scroll-behavior: auto; }
}

@media (display-mode: standalone) {
    html, body { min-height:100dvh; }
    body { overscroll-behavior-y:none; }
    .app { padding-top:max(var(--layout-gutter), env(safe-area-inset-top)); }
}

/* data-portability.css */
.data-portability-panel { display:grid; gap:var(--space-4); }
.more-layout { grid-template-columns:minmax(0, 1fr); }
.more-layout > *, .data-portability-panel > * { min-width:0; }
.data-portability-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.file-input-label { display:grid; gap:var(--space-2); font-weight:600; }
.file-input-label input { width:100%; max-width:100%; min-width:0; min-height:2.75rem; }
.import-preview-dialog { max-width:min(36rem, calc(100vw - 2 * var(--space-4))); }
.import-preview-dialog > div { display:grid; gap:var(--space-4); }
.import-preview-content dl { display:grid; gap:var(--space-2); margin:0; }
.import-preview-content dl div { display:flex; justify-content:space-between; gap:var(--space-4); border-bottom:1px solid var(--border); padding-block:var(--space-2); }
.import-preview-content dt { color:var(--text-secondary); }
.import-preview-content dd { margin:0; text-align:right; font-weight:600; }
.import-conflict-options { display:grid; gap:var(--space-2); margin:0; padding:0; border:0; }
.import-conflict-options label { display:flex; align-items:flex-start; gap:var(--space-2); min-height:2.75rem; }
@media (max-width:540px) { .data-portability-actions > * { width:100%; } }
.about-panel dl { display:grid; gap:var(--space-2); }
.about-panel dl div { display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); border-bottom:1px solid var(--border); }
.about-panel dd { margin:0; text-align:right; font-weight:600; }
.privacy-data-panel { display:grid; gap:var(--space-4); }
.privacy-data-facts { display:grid; gap:var(--space-2); margin:0; }
.privacy-data-facts div { display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); border-bottom:1px solid var(--border); }
.privacy-data-facts dd { margin:0; text-align:right; font-weight:600; }
.privacy-delete-control { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:var(--space-2); }
.privacy-delete-control label { grid-column:1 / -1; font-weight:600; }
@media (max-width:540px) { .privacy-delete-control { grid-template-columns:1fr; } .privacy-delete-control label { grid-column:auto; } }

/* diagnostics.css */
.app-recovery-panel {
    position:relative;
    z-index:var(--z-companion);
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:var(--space-4);
    align-items:center;
    margin:var(--space-3);
    padding:var(--space-4);
    border:1px solid var(--error);
    border-radius:var(--radius-lg);
    background:var(--surface);
}
.app-recovery-panel[hidden] { display:none; }
.app-recovery-panel h2, .app-recovery-panel p { margin-block:0 var(--space-2); }
.recovery-code { color:var(--text-secondary); font-size:.875rem; }
.recovery-actions, .diagnostics-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.diagnostics-panel, .whats-new-panel { display:grid; gap:var(--space-4); }
.diagnostics-facts { display:grid; gap:var(--space-2); margin:0; }
.diagnostics-facts div { display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); border-bottom:1px solid var(--border); }
.diagnostics-facts dd { margin:0; max-width:65%; overflow-wrap:anywhere; text-align:right; font-weight:600; }
.diagnostics-preview { max-width:100%; max-height:22rem; overflow:auto; margin:0; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-muted); color:var(--text); font:400 .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.diagnostics-export-dialog { max-width:min(44rem, calc(100vw - 2 * var(--space-4))); }
.diagnostics-export-dialog > div { display:grid; gap:var(--space-4); }
.whats-new-panel ul { margin:0; padding-inline-start:1.25rem; }
#diagnosticsStatus.is-error { color:var(--error); }
@media (max-width:700px) {
    .app-recovery-panel { grid-template-columns:1fr; }
    .recovery-actions > *, .diagnostics-actions > * { flex:1 1 10rem; }
}
@media (prefers-reduced-motion:reduce) {
    .app-recovery-panel, .diagnostics-panel, .whats-new-panel { scroll-behavior:auto; transition:none; }
}

/* kitchen-profile.css */
.kitchen-profile-panel,.kitchen-profile-form,.kitchen-profile-group { display:grid; gap:var(--space-4); }
.kitchen-profile-group { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; border:0; }
.kitchen-profile-group legend { grid-column:1/-1; margin-bottom:var(--space-2); font-weight:700; }
.kitchen-profile-group .field-wide { grid-column:1/-1; }
.kitchen-profile-group select[multiple] { min-height:8.5rem; }
.kitchen-profile-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.kitchen-profile-toggle { display:none; }
.kitchen-quick-start { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--primary-soft); }
.kitchen-quick-start p { margin:0; color:var(--text-secondary); }
.kitchen-quick-start strong { color:var(--text); }
@media(max-width:620px){.kitchen-profile-toggle{display:block;width:100%}.kitchen-profile-panel[data-mobile-collapsed="true"] .kitchen-profile-form{display:none}.kitchen-profile-group{grid-template-columns:minmax(0,1fr)}.kitchen-profile-group legend,.kitchen-profile-group .field-wide{grid-column:auto}.kitchen-profile-actions>*{width:100%}.kitchen-quick-start{align-items:stretch;flex-direction:column}}
html[data-experience="guided"] .kitchen-profile-group { grid-template-columns:minmax(0,1fr); }
html[data-experience="guided"] .kitchen-profile-group legend,html[data-experience="guided"] .kitchen-profile-group .field-wide { grid-column:auto; }
html[data-experience="expert"] .kitchen-profile-form { gap:var(--space-3); }

/* recipes.css */
.recipe-library-layout {
    display:grid;
    grid-template-columns:minmax(240px, 280px) minmax(0, 1fr);
    gap:var(--space-5);
    width:100%;
    max-width:none;
    margin-inline:auto;
    padding:var(--space-5);
}

.recipe-library-header {
    grid-column:1 / -1;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:var(--space-4);
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--border);
}

.recipe-library-filters { grid-column:1; grid-row:2 / span 3; }
.recipe-recommendations { grid-column:2; grid-row:2; }
.recipe-library-content { grid-column:2; grid-row:3; }
.recipe-library-detail { grid-column:2; grid-row:4; }

.recipe-library-header p { max-width:62ch; color:var(--text-secondary); }

.recipe-library-views {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
}

.recipe-library-views button {
    min-height:44px;
    padding:var(--space-2) var(--space-3);
    color:var(--text-secondary);
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--radius-md);
}

.recipe-library-views button.is-active {
    color:var(--text);
    background:var(--surface-raised);
    border-color:var(--primary);
}

.recipe-library-filters {
    align-self:start;
    display:grid;
    gap:var(--space-4);
    padding-right:var(--space-4);
    border-right:1px solid var(--border);
}

.recipe-library-filters details > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:44px; }
.recipe-filter-count { padding:.2rem .55rem; color:var(--primary-strong); background:var(--primary-soft); border-radius:var(--radius-md); font-size:var(--font-caption); font-weight:700; white-space:nowrap; }
.recipe-filter-fields { display:grid; gap:var(--space-3); padding-top:var(--space-3); }
.recipe-library-content { min-width:0; }

.recipe-recommendations {
    display:grid;
    gap:var(--space-2);
    margin-bottom:var(--space-5);
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--border);
}

#recipeRecommendations {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-2);
}

#recipeRecommendations button {
    display:grid;
    gap:var(--space-1);
    min-height:72px;
    padding:var(--space-3);
    text-align:left;
    color:var(--text);
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

#recipeRecommendations span { color:var(--text-secondary); font-size:var(--font-caption); }

.recipe-library-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--space-4); }

.library-recipe-card {
    min-width:0;
    overflow:hidden;
    cursor:pointer;
    background:var(--surface-raised);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.library-recipe-visual {
    position:relative;
    aspect-ratio:4 / 3;
    min-height:150px;
    overflow:hidden;
    background:var(--surface-muted);
}

.library-recipe-card:has([data-open-recipe]:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }

.library-recipe-visual img { display:block; width:100%; height:100%; object-fit:cover; }
.library-recipe-visual.is-error { display:grid; place-items:center; border:1px solid var(--error); }
.library-recipe-visual.is-error::after { content:"Bild nicht verfügbar"; padding:var(--space-3); color:var(--error); font-size:var(--font-caption); font-weight:700; text-align:center; }

.library-recipe-card-body { display:grid; gap:var(--space-2); padding:var(--space-4); }
.library-recipe-card-body h3 { overflow-wrap:normal; word-break:normal; hyphens:none; }
.library-recipe-card-body > p { color:var(--text-secondary); }
.library-recipe-card dl { display:grid; gap:var(--space-1); }
.library-recipe-card dl div { display:flex; justify-content:space-between; gap:var(--space-2); padding-top:var(--space-1); border-top:1px solid var(--border); }
.library-recipe-card dt { color:var(--text-muted); }
.library-recipe-card dd { text-align:right; color:var(--text); font-weight:600; }
.library-recipe-card-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.recipe-favorite { min-width:44px; font-size:1.35rem; }

.recipe-library-detail {
    align-self:start;
    position:static;
    display:grid;
    gap:var(--space-3);
    padding-top:var(--space-4);
    border-top:1px solid var(--border);
}

.recipe-detail-values { display:grid; gap:var(--space-1); }
.recipe-detail-values div { display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); border-bottom:1px solid var(--border); }
.recipe-detail-values dt { color:var(--text-muted); }
.recipe-detail-values dd { text-align:right; color:var(--text); font-weight:600; }
.recipe-detail-actions { display:grid; gap:var(--space-2); }
.library-empty { padding:var(--space-6) 0; border-top:1px solid var(--border); }

.recipe-dialog {
    width:min(92vw, 540px);
    max-height:min(86vh, 720px);
    padding:0;
    color:var(--text);
    background:var(--surface-raised);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}

.recipe-dialog::backdrop { background:var(--color-modal-backdrop); }
.recipe-dialog > form,
.recipe-dialog > div { display:grid; gap:var(--space-4); padding:var(--space-5); }
.dialog-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:flex-end; }
.danger-button { color:var(--error); }

html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .recipe-library-layout { grid-template-columns:minmax(220px, 260px) minmax(0, 1fr); }
html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .recipe-library-detail { grid-column:1 / -1; grid-row:4; position:static; padding:var(--space-4) 0 0; border:0; border-top:1px solid var(--border); }

html[data-layout="mobile-portrait"] .recipe-library-layout,
html[data-layout="mobile-landscape"] .recipe-library-layout { padding:var(--space-3); }

html[data-layout="mobile-portrait"] .recipe-library-layout { display:flex; flex-direction:column; }
html[data-layout="mobile-portrait"] .recipe-library-header { align-items:start; flex-direction:column; }
html[data-layout="mobile-portrait"] .recipe-library-views { display:grid; width:100%; grid-template-columns:repeat(3, minmax(0, 1fr)); }
html[data-layout="mobile-portrait"] .recipe-library-views button { padding-inline:var(--space-1); font-size:var(--font-caption); }
html[data-layout="mobile-portrait"] .recipe-library-filters { padding:0 0 var(--space-3); border:0; border-bottom:1px solid var(--border); }
html[data-layout="mobile-portrait"] .recipe-recommendations { margin-bottom:var(--space-2); }
html[data-layout="mobile-portrait"] #recipeRecommendations { grid-template-columns:minmax(0, 1fr); }
html[data-layout="mobile-portrait"] .recipe-library-grid { grid-template-columns:minmax(0, 1fr); }
html[data-layout="mobile-portrait"] .recipe-library-detail { position:static; padding:var(--space-4) 0 0; border:0; border-top:1px solid var(--border); }

html[data-layout="mobile-landscape"] .recipe-library-layout { grid-template-columns:minmax(190px, .42fr) minmax(0, 1fr); }
html[data-layout="mobile-landscape"] .recipe-library-header { grid-column:1 / -1; }
html[data-layout="mobile-landscape"] .recipe-library-filters { max-height:calc(100vh - var(--header-mobile) - var(--space-6)); overflow:auto; }
html[data-layout="mobile-landscape"] #recipeRecommendations { grid-template-columns:minmax(0, 1fr); }
html[data-layout="mobile-landscape"] .recipe-library-grid { grid-template-columns:minmax(0, 1fr); }
html[data-layout="mobile-landscape"] .recipe-library-detail { grid-column:2; position:static; padding:var(--space-4) 0 0; border:0; border-top:1px solid var(--border); }

@media (max-width:360px) {
    .recipe-library-views { grid-template-columns:minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion:reduce) {
    .library-recipe-card,
    .recipe-dialog { animation:none; transition:none; }
}

/* shopping.css */
/* Einkaufsliste.

   Eine Liste, die man im Laden mit einer Hand bedient: grosse Trefferflaechen,
   der abgehakte Posten bleibt stehen und tritt nur zurueck. Radien folgen dem
   Haus: 2, 3, 6 px, nichts Rundes. */

.shopping-header p {
    margin:.35rem 0 0;
    color:var(--color-text-muted, #685f55);
}

.shopping-items {
    margin:18px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:6px;
}

.shopping-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:2px 4px 2px 0;
    border-radius:3px;
    border-bottom:1px solid var(--color-border-subtle, rgba(120, 100, 80, .18));
}

.shopping-item:last-child { border-bottom:0; }

/* Das Label traegt die Trefferflaeche, nicht nur der Haken. */
.shopping-item label {
    flex:1 1 auto;
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:48px;
    padding:8px 0;
    cursor:pointer;
}

.shopping-item input[type="checkbox"] {
    flex:0 0 auto;
    width:22px;
    height:22px;
    margin-top:2px;
    accent-color:var(--primary);
}

.shopping-item-text {
    display:grid;
    gap:2px;
    min-width:0;
}

.shopping-item-text strong { font-size:1.02rem; }

.shopping-item-amount {
    font-family:var(--font-mono);
    font-size:.92rem;
    color:var(--primary);
}

.shopping-item-text small { color:var(--color-text-muted, #685f55); }

/* Erledigtes verschwindet nicht - im Laden will man sehen, was man schon hat. */
.shopping-item[data-done="true"] .shopping-item-text { opacity:.5; }
.shopping-item[data-done="true"] .shopping-item-text strong { text-decoration:line-through; }

.shopping-remove {
    flex:0 0 auto;
    min-height:44px;
}

.shopping-extra {
    display:flex;
    align-items:flex-end;
    gap:10px;
    margin-top:22px;
    flex-wrap:wrap;
}

.shopping-extra .conversation-field { flex:1 1 220px; }

.shopping-status {
    margin:16px 0 0;
    color:var(--color-text-muted, #685f55);
    font-family:var(--font-mono);
    font-size:.9rem;
}

/* diary.css */
/* Backtagebuch.

   Jeder Eintrag ist eine Karte mit Datum, den Werten des Backtags, einer
   Bewertung und einer Notiz. Radien folgen dem Haus: 2, 3, 6 px. */

.diary-header p {
    margin:.35rem 0 0;
    color:var(--color-text-muted, #685f55);
}

.diary-entries {
    margin:20px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:14px;
}

.diary-entry {
    display:grid;
    gap:8px;
    padding:16px;
    border-radius:6px;
    border:1px solid var(--color-border-subtle, rgba(120, 100, 80, .18));
    background:color-mix(in srgb, var(--color-surface, #fffaf2) 70%, var(--color-background, #f6f1e8));
}

.diary-entry-head h3 {
    margin:0;
    font-size:1.04rem;
}

.diary-entry-values {
    margin:0;
    font-family:var(--font-mono);
    font-size:.86rem;
    line-height:1.6;
    color:var(--color-text-muted, #685f55);
}

.diary-rating {
    display:flex;
    gap:2px;
}

/* Fuenf einzelne Knoepfe, jeder mit 44 px Trefferflaeche. */
.diary-star {
    min-width:44px;
    min-height:44px;
    padding:0;
    border:0;
    border-radius:3px;
    background:none;
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    color:var(--color-border-subtle, rgba(120, 100, 80, .38));
}

.diary-star[aria-pressed="true"] { color:var(--primary); }
.diary-star:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.diary-entry-note {
    display:grid;
    gap:4px;
}

.diary-entry-note span {
    font-size:.8rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-text-muted, #685f55);
}

.diary-entry-note textarea {
    width:100%;
    padding:10px 12px;
    border-radius:3px;
    border:1px solid var(--color-border-subtle, rgba(120, 100, 80, .28));
    background:var(--color-surface, #fffaf2);
    color:inherit;
    font:inherit;
    line-height:1.5;
    resize:vertical;
}

.diary-status {
    margin:16px 0 0;
    color:var(--color-text-muted, #685f55);
    font-family:var(--font-mono);
    font-size:.9rem;
}

/* walkthrough.css */
/* =========================================
   First-run walkthrough
========================================= */

body.has-walkthrough {
    overflow:hidden;
}

.walkthrough-dialog {
    width:min(calc(100% - var(--space-6)), 1060px);
    max-width:none;
    max-height:min(820px, calc(100dvh - var(--space-6)));
    margin:auto;
    padding:0;
    color:var(--text);
    background:transparent;
    border:0;
    overflow:visible;
}

.walkthrough-dialog::backdrop {
    background:var(--color-modal-backdrop);
}

.walkthrough-dialog:not([open]) {
    display:none;
}

.walkthrough-shell {
    position:relative;
    display:grid;
    grid-template-columns:minmax(300px, .9fr) minmax(360px, 1.1fr);
    min-height:580px;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}

.walkthrough-skip {
    position:absolute;
    z-index:2;
    top:var(--space-4);
    right:var(--space-4);
    min-width:44px;
    min-height:44px;
    padding:0 var(--space-3);
    color:var(--text-secondary);
    background:var(--color-surface-overlay-strong);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font:inherit;
    font-size:var(--font-caption);
    font-weight:700;
    cursor:pointer;
}

.walkthrough-visual {
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    overflow:hidden;
    background:radial-gradient(circle at 50% 42%, var(--doughy-aura-center), var(--doughy-aura-edge) 48%, transparent 72%);
    perspective:760px;
}

.walkthrough-visual img {
    position:relative;
    z-index:1;
    width:min(88%, 390px);
    height:auto;
    filter:drop-shadow(0 22px 20px var(--doughy-figure-shadow));
    transform:translate3d(0, 0, 24px) rotateY(0deg);
    transform-origin:50% 84%;
    transition:transform var(--motion-slow) var(--ease-standard), filter var(--motion-base) var(--ease-standard);
}

.walkthrough-orbit {
    position:absolute;
    width:74%;
    aspect-ratio:1;
    background:radial-gradient(circle, var(--doughy-rim-light), transparent 68%);
    border-radius:50%;
    opacity:.7;
}

.walkthrough-shadow {
    position:absolute;
    z-index:0;
    bottom:18%;
    width:58%;
    height:34px;
    background:radial-gradient(ellipse at center, var(--doughy-contact-shadow), transparent 70%);
    border-radius:50%;
    filter:blur(5px);
    transition:opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.walkthrough-visual.is-watching img { transform:translate3d(-4px, 0, 24px) rotateY(-4deg); }
.walkthrough-visual.is-thinking img { transform:translate3d(3px, -3px, 24px) rotateY(4deg) rotateZ(1deg); }
.walkthrough-visual.is-resting img { transform:translate3d(0, 3px, 18px) rotateY(2deg) scale(.985); }
.walkthrough-visual.is-celebrate img { animation:walkthrough-celebrate 720ms var(--ease-standard) 1; }
.walkthrough-visual.is-celebrate .walkthrough-shadow { opacity:.7; transform:scaleX(.88); }

.walkthrough-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:var(--space-9) var(--space-8) var(--space-7);
    background:var(--color-surface-overlay);
    border-left:1px solid var(--border);
}

.walkthrough-step-label {
    color:var(--primary-strong);
    font-size:var(--font-caption);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.walkthrough-content h2 {
    margin-top:var(--space-3);
    color:var(--text);
    font-size:clamp(2.25rem, 5vw, 4rem);
    letter-spacing:-.06em;
    line-height:.98;
}

.walkthrough-content h2:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:4px;
}

.walkthrough-content > p:not(.walkthrough-step-label) {
    max-width:36ch;
    margin-top:var(--space-4);
    color:var(--text-secondary);
    font-size:1.1rem;
    line-height:1.55;
}

.walkthrough-context {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    min-height:40px;
    margin-top:var(--space-6);
}

.walkthrough-context span {
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 var(--space-3);
    color:var(--text);
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font-size:var(--font-caption);
    font-weight:700;
}

.walkthrough-progress {
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:var(--space-2);
    margin-top:auto;
    padding-top:var(--space-8);
    list-style:none;
}

.walkthrough-progress li {
    position:relative;
    overflow:hidden;
    padding-top:12px;
    color:transparent;
    font-size:0;
}

.walkthrough-progress li::before {
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:4px;
    background:var(--surface-interactive);
    border-radius:var(--radius-sm);
    content:"";
}

.walkthrough-progress li.is-complete::before,
.walkthrough-progress li[aria-current="step"]::before {
    background:var(--primary);
}

.walkthrough-progress li[aria-current="step"]::before {
    box-shadow:0 0 0 3px var(--primary-focus);
}

.walkthrough-actions {
    display:flex;
    justify-content:flex-end;
    gap:var(--space-3);
    margin-top:var(--space-5);
}

.walkthrough-actions button {
    min-width:112px;
}

.walkthrough-actions .quiet-button:disabled {
    opacity:.4;
    cursor:not-allowed;
}

.walkthrough-restart {
    margin-top:var(--space-5);
}

.walkthrough-skip:focus-visible {
    outline:2px solid var(--focus);
    outline-offset:3px;
}

@keyframes walkthrough-celebrate {
    0%, 100% { transform:translate3d(0, 0, 24px) rotateY(0deg); }
    45% { transform:translate3d(0, -10px, 30px) rotateY(-2deg) scale(1.025); }
}

@media (max-width:760px) {
    .walkthrough-dialog {
        width:100%;
        max-height:none;
        height:100dvh;
        margin:0;
    }

    .walkthrough-shell {
        grid-template-columns:minmax(0, 1fr);
        grid-template-rows:minmax(230px, 38dvh) minmax(0, 1fr);
        min-height:100dvh;
        border:0;
        border-radius:0;
    }

    .walkthrough-visual img {
        width:min(72%, 280px);
    }

    .walkthrough-shadow {
        bottom:14%;
        width:48%;
    }

    .walkthrough-content {
        justify-content:flex-start;
        padding:var(--space-6) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
        border-top:1px solid var(--border);
        border-left:0;
    }

    .walkthrough-content h2 {
        font-size:2.35rem;
    }

    .walkthrough-context {
        margin-top:var(--space-5);
    }

    .walkthrough-progress {
        padding-top:var(--space-6);
    }

    .walkthrough-actions {
        margin-top:var(--space-4);
    }

    .walkthrough-actions button {
        flex:1;
        min-width:0;
    }
}

@media (max-width:760px) and (max-height:650px) and (orientation:portrait) {
    .walkthrough-shell {
        grid-template-rows:minmax(180px, 34dvh) minmax(0, 1fr);
    }

    .walkthrough-skip {
        top:var(--space-2);
        right:var(--space-2);
    }

    .walkthrough-visual img {
        width:min(58%, 220px);
    }

    .walkthrough-content {
        padding:var(--space-4) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
    }

    .walkthrough-content h2 {
        margin-top:var(--space-2);
        font-size:2rem;
    }

    .walkthrough-content > p:not(.walkthrough-step-label) {
        margin-top:var(--space-2);
        font-size:1rem;
    }

    .walkthrough-context,
    .walkthrough-actions {
        margin-top:var(--space-3);
    }

    .walkthrough-context span {
        min-height:32px;
        padding:0 var(--space-2);
    }

    .walkthrough-progress {
        padding-top:var(--space-4);
    }
}

@media (max-width:960px) and (max-height:560px) and (orientation:landscape) {
    .walkthrough-dialog {
        width:calc(100% - var(--space-4));
        max-height:calc(100dvh - var(--space-4));
    }

    .walkthrough-shell {
        grid-template-columns:minmax(230px, .78fr) minmax(340px, 1.22fr);
        min-height:calc(100dvh - var(--space-4));
    }

    .walkthrough-visual img {
        width:min(80%, 250px);
    }

    .walkthrough-content {
        padding:var(--space-6) var(--space-7) var(--space-5);
    }

    .walkthrough-content h2 {
        font-size:2.4rem;
    }

    .walkthrough-context,
    .walkthrough-actions {
        margin-top:var(--space-3);
    }

    .walkthrough-progress {
        padding-top:var(--space-4);
    }
}

@media (prefers-reduced-motion:reduce) {
    .walkthrough-visual img,
    .walkthrough-shadow,
    .walkthrough-visual.is-celebrate img {
        animation:none;
        transition:none;
    }
}

/* animations.css */
/* ==========================================
   Motion
========================================== */

@keyframes fadeIn {
    from {
        opacity:0;
        transform:translateY(8px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadePage {
    from {
        opacity:0;
        transform:translateY(6px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }
}

.page {
    display:none;
    animation:fadePage var(--motion-slow) var(--ease-standard);
}

.active-page {
    display:block;
}

@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior:auto !important;
        animation-duration:1ms !important;
        animation-iteration-count:1 !important;
        transition-duration:1ms !important;
    }
}

/* concept-layout.css */
/* =========================================
   Sprint 44 canonical concept composition
   One DOM and state model, four intentional
   layouts: portrait, landscape, tablet, desktop.
========================================= */

html { overflow-x:hidden; overflow-x:clip; }

.app {
    width:min(100%, var(--content-max-desktop));
    padding-right:max(var(--layout-gutter), env(safe-area-inset-right));
    padding-left:max(var(--layout-gutter), env(safe-area-inset-left));
}

main,
.page,
.workspace-shell,
.workspace-content,
.guided-start,
.calculator-layout,
.planning-layout {
    min-width:0;
}

.panel {
    border-color:color-mix(in srgb, var(--border) 72%, transparent);
    box-shadow:none;
}

.guided-start {
    container-type:inline-size;
}

.choice-value {
    display:-webkit-box;
    min-height:2.7em;
    overflow:hidden;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:650;
    line-height:1.35;
    overflow-wrap:anywhere;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.workflow-next-hint {
    margin:var(--space-2) 0 0;
    color:var(--text-secondary);
    font-size:var(--font-label);
    line-height:1.45;
    text-align:right;
}

.workflow-next-hint[hidden] { display:none; }

.flour-profile {
    margin-top:var(--space-4);
    border-block:1px solid var(--border);
}

.flour-profile[hidden] { display:none; }

.flour-profile > summary {
    display:flex;
    min-height:44px;
    gap:var(--space-3);
    align-items:center;
    justify-content:space-between;
    padding:var(--space-3) 0;
    color:var(--text);
    cursor:pointer;
    list-style:none;
}

.flour-profile > summary::-webkit-details-marker { display:none; }
.flour-profile > summary::after { content:"+"; color:var(--accent); font-size:1.25rem; }
.flour-profile[open] > summary::after { content:"−"; }
.flour-profile > summary span { font-weight:800; }
.flour-profile > summary strong {
    min-width:0;
    color:var(--text-secondary);
    font-size:var(--font-caption);
    font-weight:650;
    overflow-wrap:anywhere;
    text-align:right;
}

.flour-profile-content {
    display:grid;
    gap:var(--space-4);
    padding:0 0 var(--space-4);
}

.flour-profile dl {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
}

.flour-profile dl div { min-width:0; }
.flour-profile dt { color:var(--text-muted); font-size:var(--font-caption); }
.flour-profile dd { margin-top:2px; color:var(--text); font-size:var(--font-label); font-weight:700; overflow-wrap:anywhere; }

.flour-style-chips {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-1);
    margin-top:var(--space-2);
    padding:0;
    list-style:none;
}

.flour-style-chips li {
    padding:4px var(--space-2);
    color:var(--text-secondary);
    font-size:var(--font-caption);
    background:var(--surface-muted);
    border:1px solid var(--border);
    border-radius:999px;
}

.workbench-fermentation {
    display:grid;
    grid-template-columns:minmax(180px, .62fr) minmax(0, 1.38fr);
    gap:var(--space-4);
    align-items:start;
    margin-top:var(--space-2);
    padding-top:var(--space-4);
    border-top:1px solid var(--border);
}

.workbench-fermentation > .form-group { margin:0; }
.workbench-fermentation .planning-advanced { margin:0; }
.workbench-fermentation .planning-advanced-fields { padding-bottom:0; }
.workbench-fermentation > .fermentation-details { grid-column:1 / -1; }
.workbench-fermentation .recommendation-panel { grid-column:1 / -1; margin-top:0; }

.result-next-action {
    width:100%;
    margin-top:var(--space-4);
}

.input-panel .planning-compact {
    grid-template-columns:minmax(130px, .75fr) minmax(210px, 1.25fr) auto auto;
    gap:var(--space-3);
    margin-top:var(--space-4);
    padding:var(--space-4) 0;
    background:transparent;
    border-width:1px 0;
    border-radius:0;
}

.preparation-panel {
    max-width:var(--content-max-reading);
}

.flour-profile > .field-help {
    grid-column:1 / -1;
    margin:0;
}

.preparation-layout {
    width:100%;
    max-width:var(--content-max-reading);
    margin-inline:auto;
}

#preparationPage .preparation-panel {
    width:100%;
    max-width:none;
}

#preparationHeading,
#resultHeading,
#calculatorHeading,
#guidedStartHeading {
    scroll-margin-top:var(--space-6);
}

/* Desktop: permanent rail, focused work area and reserved companion studio. */
@media (min-width:1181px) {
    html[data-layout="desktop"] .app {
        width:min(100%, var(--content-max-desktop));
        max-width:none;
    }

    /* Waagerechte Kopfzeile statt linker Seitenleiste, Doughy unten in der
       Theke - siehe css/adaptive.css fuer die eigentlichen Regeln. Diese Datei
       laedt spaeter als adaptive.css und ueberschrieb bislang mit der alten
       Seitenleisten-/Schwebekasten-Geometrie; die Rail-/Schwebekasten-Regeln
       entfallen ersatzlos. */
    /* pointer-events:none gehoerte zum Telefon-/Tablet-Muster, wo .doughy-companion
       inset:0 ueber den ganzen Bildschirm legt und Klicks durchlassen muss. Hier ist
       .app-chrome position:static, kein Overlay - die Regel machte die ganze Kopfzeile
       darin (Reiter, Theme-Umschalter) unklickbar. Am 14.08.2026 gemeldet: "Menü in
       der Desktopversion funktioniert nicht". */
    html[data-layout="desktop"] .app-chrome {
        position:static;
        display:block;
        width:auto;
        min-height:0;
        padding:0;
        background:transparent;
        backdrop-filter:none;
    }

    html[data-layout="desktop"] .app-chrome::before {
        display:none;
    }

    html[data-layout="desktop"] .doughy-companion {
        position:fixed;
        z-index:calc(var(--z-navigation) + 1);
        right:0;
        bottom:0;
        left:0;
        display:block;
        width:auto;
        min-height:0;
        height:176px;
        margin:0;
        padding:0;
        background:var(--gradient-counter);
        box-shadow:var(--shadow-md);
    }

    html[data-layout="desktop"] .guided-start {
        grid-template-columns:minmax(0, 1fr) minmax(180px, 200px);
        width:100%;
        min-height:0;
        margin-top:var(--space-3);
        padding:var(--space-3) 0 var(--space-5);
        row-gap:var(--space-4);
    }

    html[data-layout="desktop"] .guided-start-heading,
    html[data-layout="desktop"] .guided-choice-grid {
        grid-column:1 / -1;
    }

    html[data-layout="desktop"] .choice-number {
        position:absolute;
        z-index:1;
        top:var(--space-3);
        left:var(--space-3);
    }

    /* Die Rundung fiel mit dem Rahmen weg: der Kasten traegt seit css/guided.css
       nur noch die Linie links, und eine gerundete Ecke ohne Rahmen daneben
       liest sich als Fehler. */
    html[data-layout="desktop"] .recipe-foundation {
        display:grid;
        grid-column:1;
        grid-template-columns:minmax(0, 1fr);
        align-content:start;
        padding:var(--space-3) var(--space-4);
        border-radius:0;
    }

    html[data-layout="desktop"] .recipe-foundation-actions { justify-content:flex-start; gap:var(--space-1); }
    html[data-layout="desktop"] .recipe-foundation-actions button { min-height:40px; padding-inline:var(--space-3); }

    html[data-layout="desktop"] .flour-profile {
        grid-column:2;
        grid-template-columns:minmax(0, 1fr);
        gap:var(--space-2);
        padding:var(--space-3);
        background:var(--color-surface-subtle);
        border:1px solid var(--border);
        border-radius:var(--radius-md);
    }

    html[data-layout="desktop"] .flour-profile dl { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2); }

    html[data-layout="desktop"] .recipe-preview {
        grid-column:1;
        grid-row:auto;
        border-radius:var(--radius-md);
    }

    html[data-layout="desktop"] .guided-primary-action {
        grid-column:2;
        grid-row:auto;
        align-self:stretch;
    }

    html[data-layout="desktop"] .guided-primary-action .primary-button {
        width:100%;
        max-width:none;
        height:100%;
        min-height:58px;
    }

    html[data-layout="desktop"] .preset-preview,
    html[data-layout="desktop"] .preset-status {
        grid-column:1 / -1;
    }

    html[data-layout="desktop"] .calculator-layout {
        grid-template-columns:minmax(0, 1.3fr) minmax(300px, .7fr);
        gap:var(--layout-gap);
        width:100%;
    }

    html[data-layout="desktop"] .input-panel,
    html[data-layout="desktop"] .result-panel {
        padding:var(--space-5);
    }

    html[data-layout="desktop"] .preparation-panel {
        grid-column:1 / -1;
        max-width:100%;
        padding:var(--space-6) 0 0;
        background:transparent;
        border-width:1px 0 0;
        border-radius:0;
    }

    html[data-layout="desktop"] .planning-layout {
        width:100%;
        max-width:1120px;
    }
}

@media (min-width:1181px) and (max-width:1499px) {
    html[data-layout="desktop"] .calculator-layout { grid-template-columns:minmax(0, 1fr); }
    html[data-layout="desktop"] .input-panel,
    html[data-layout="desktop"] .result-panel,
    html[data-layout="desktop"] .preparation-panel { grid-column:1; grid-row:auto; }
}

/* Tablet: deliberate transition layout, never a squeezed desktop rail. */
@media (min-width:761px) and (max-width:1180px) {
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .app { padding-inline:var(--layout-gutter); }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .app-chrome {
        position:relative;
        top:auto;
        background:var(--background);
        border-bottom:1px solid var(--border);
    }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .header { min-height:68px; }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .doughy-companion { width:min(100%, var(--companion-slot-tablet)); justify-self:end; }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .guided-start { margin-top:var(--space-2); }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .calculator-layout { grid-template-columns:minmax(0, 1.18fr) minmax(280px, .82fr); }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .preparation-panel { grid-column:1 / -1; max-width:100%; }
}

@media (min-width:761px) and (max-width:899px) and (orientation:portrait) {
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .calculator-layout { grid-template-columns:minmax(0, 1fr); }
    html:is([data-layout="tablet-portrait"],[data-layout="tablet-landscape"]) .result-panel { grid-row:auto; }
}

/* Mobile portrait: host, three-step journey, preview, one CTA. */
@media (max-width:760px) and (orientation:portrait) {
    html[data-layout="mobile-portrait"] .app-chrome {
        position:sticky;
        top:0;
        padding-top:max(var(--space-2), env(safe-area-inset-top));
        background:var(--background);
        border-bottom:1px solid var(--border);
    }

    html[data-layout="mobile-portrait"] .header { min-height:var(--header-mobile); }
    html[data-layout="mobile-portrait"] .doughy-companion {
        min-height:var(--companion-header-expanded-min);
        padding-block:var(--space-2) var(--space-4);
    }

    /* Die Hoehe des klebenden Kopfes bleibt in beiden Zustaenden gleich. Vorher fiel sie
       beim Kompaktwerden von 85 auf 53 Pixel (gemessen bei 375x812) und verschob das
       Dokument mitten in der Scrollgeste. Kompakt heisst jetzt: weniger Text, gleiche
       Kastenhoehe. Der Preis sind 32 Pixel, die auf kleinen Geraeten nicht frei werden -
       das ist der Tausch gegen eine Seite, die beim Scrollen nicht klemmt. */

    /* visibility statt display: display:none nimmt die Zeilen aus dem Layout und liess den
       Kopf von 60 auf 56 Pixel fallen - wieder ein Hoehensprung waehrend des Scrollens, nur
       ein kleinerer. Verborgen sind sie so genauso, auch fuer Screenreader, aber ihr Platz
       bleibt reserviert. */
    html[data-layout="mobile-portrait"] .app-chrome.is-doughy-compact .header p,
    html[data-layout="mobile-portrait"] .app-chrome.is-doughy-compact #themeToggleLabel {
        visibility:hidden;
    }
    /* mobile.css verkleinert im kompakten Zustand Begleiter und Figur. Fuer den klebenden
       Kopf im Hochformat darf das die Hoehe nicht anfassen - sonst kehrt der Sprung durch
       die Hintertuer zurueck. */
    html[data-layout="mobile-portrait"] .app-chrome.is-doughy-compact .doughy-companion {
        min-height:var(--companion-header-expanded-min);
        padding-block:var(--space-2) var(--space-4);
    }


    html[data-layout="mobile-portrait"] .guided-start {
        gap:var(--space-4);
        padding-top:var(--space-3);
    }

    html[data-layout="mobile-portrait"] .guided-start-heading { order:1; }
    html[data-layout="mobile-portrait"] .recipe-foundation { order:4; }
    html[data-layout="mobile-portrait"] .preset-preview,
    html[data-layout="mobile-portrait"] .preset-status { order:5; }

    html[data-layout="mobile-portrait"] .guided-start-heading > p:not(.experience-indicator) {
        max-width:32ch;
    }

    html[data-layout="mobile-portrait"] .guided-choice .choice-number {
        grid-row:auto;
        width:22px;
        height:22px;
    }

    html[data-layout="mobile-portrait"] .guided-choice .choice-value {
        min-height:2.7em;
    }

    html[data-layout="mobile-portrait"] .workbench-defaults-review {
        align-items:stretch;
        flex-direction:column;
        padding:var(--space-3);
    }

    html[data-layout="mobile-portrait"] .workbench-defaults-review[data-confirmed="true"] .workbench-defaults-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; }

    html[data-layout="mobile-portrait"] .recipe-foundation { padding-block:var(--space-3); }

    html[data-layout="mobile-portrait"] .flour-profile {
        grid-template-columns:minmax(0, 1fr);
        gap:var(--space-3);
    }

    html[data-layout="mobile-portrait"] .flour-profile dl { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    html[data-layout="mobile-portrait"] .recipe-preview-values { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    html[data-layout="mobile-portrait"] .recipe-preview-values > div { padding:var(--space-3) var(--space-2); }
    html[data-layout="mobile-portrait"] .recipe-preview-values strong { font-size:.9rem; }
    html[data-layout="mobile-portrait"] .recipe-preview-values span { font-size:.65rem; }

    html[data-layout="mobile-portrait"] .workbench-fields-core { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
    html[data-layout="mobile-portrait"] .workbench-fields-core .number-control { grid-template-columns:44px minmax(0, 1fr) 44px; }
    html[data-layout="mobile-portrait"] .workbench-fields-core .number-btn { width:44px; }
    html[data-layout="mobile-portrait"] .workbench-fermentation { grid-template-columns:minmax(0, 1fr); }
    html[data-layout="mobile-portrait"] .input-panel .planning-compact {
        grid-template-columns:minmax(0, 1fr) auto;
        width:100%;
    }
    html[data-layout="mobile-portrait"] .input-panel .planning-compact dl { grid-column:1 / -1; grid-row:auto; }
    html[data-layout="mobile-portrait"] .input-panel .planning-compact > p { min-width:0; }
    html[data-layout="mobile-portrait"] .navigation { min-height:var(--nav-mobile); }
}

@media (max-width:360px) and (orientation:portrait) {
    html[data-layout="mobile-portrait"] .workbench-fields-core { grid-template-columns:minmax(0, 1fr); }
}

/* Mobile landscape: compact chrome and two content zones. */
@media (max-width:960px) and (max-height:560px) and (orientation:landscape) {
    html[data-layout="mobile-landscape"] .app-chrome {
        position:sticky;
        top:0;
        grid-template-columns:minmax(0, 1fr) var(--companion-slot-landscape);
        min-height:78px;
        background:var(--background);
        border-bottom:1px solid var(--border);
    }

    html[data-layout="mobile-landscape"] .header { min-height:60px; }
    html[data-layout="mobile-landscape"] .doughy-companion { min-height:72px; }

    html[data-layout="mobile-landscape"] .guided-start {
        grid-template-columns:minmax(190px, .68fr) minmax(0, 1.32fr);
        gap:var(--space-3) var(--layout-gap);
        padding:var(--space-3) 0 var(--space-4);
        background:transparent;
        border:0;
        box-shadow:none;
    }
    html[data-layout="mobile-landscape"] .flour-profile { grid-column:1 / -1; }
    html[data-layout="mobile-landscape"] .recipe-preview { grid-column:2; }
    html[data-layout="mobile-landscape"] .guided-primary-action { grid-column:1; grid-row:auto; }
    html[data-layout="mobile-landscape"] .recipe-foundation {
        display:grid;
        grid-column:1;
        grid-template-columns:minmax(0, 1fr);
        align-content:start;
    }
    html[data-layout="mobile-landscape"] .recipe-foundation-actions { width:100%; }
    html[data-layout="mobile-landscape"] .recipe-foundation-actions > * { flex:1 1 100%; }
    html[data-layout="mobile-landscape"] .calculator-layout { grid-template-columns:minmax(0, 1.15fr) minmax(250px, .85fr); }
    html[data-layout="mobile-landscape"] .workbench-fermentation { grid-template-columns:minmax(0, 1fr); }
    html[data-layout="mobile-landscape"] .input-panel .planning-compact { grid-template-columns:minmax(0, 1fr) auto; }
    html[data-layout="mobile-landscape"] .input-panel .planning-compact dl { grid-column:1 / -1; grid-row:auto; }
    html[data-layout="mobile-landscape"] .preparation-panel { grid-column:1 / -1; max-width:100%; }
    html[data-layout="mobile-landscape"] .navigation { min-height:44px; }
}

@media (prefers-reduced-motion:reduce) {
    .choice-visual,
    .guided-choice,
    .flour-profile,
    .result-next-action { transition:none; animation:none; }
}

/* product-shells.css */
:root {
    --shell-selection-max:760px;
    --shell-workbench-max:1120px;
    --shell-desktop-main:minmax(0, 1fr);
    --shell-desktop-companion:clamp(292px, 22vw, 348px);
    --shell-landscape-guide:minmax(190px, .72fr);
    --shell-landscape-task:minmax(0, 1.28fr);
}

.desktop-recommendation,
.mobile-workbench-flow { box-sizing:border-box; }

.entry-hub {
    display:grid;
    gap:var(--space-5);
    width:min(100%, 920px);
    margin-inline:auto;
    padding:clamp(var(--space-5), 5vw, var(--space-7));
    background:var(--color-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
}
.entry-hub[hidden] { display:none !important; }
.entry-hub-copy { max-width:58ch; }
.entry-hub-copy h2 { margin:var(--space-1) 0 var(--space-2); font-size:clamp(1.8rem, 4vw, 2.65rem); }
.entry-hub-copy p,
.entry-hub-status { margin:0; color:var(--text-secondary); }
.entry-hub-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
.entry-hub-action {
    display:grid;
    gap:var(--space-2);
    min-height:112px;
    padding:var(--space-4);
    color:var(--text);
    text-align:left;
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}
.entry-hub-action:hover { border-color:var(--color-border-accent); background:var(--surface-interactive); }
.entry-hub-action:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.entry-hub-action strong { font-size:1rem; }
.entry-hub-action span { color:var(--text-secondary); line-height:1.45; }
.entry-hub-action--primary { background:var(--primary-soft); border-color:var(--color-border-accent); }

html[data-product-phase="entry"] .guided-start,
html[data-product-phase="entry"] .calculator-layout,
html[data-product-phase="entry"] #flourProfile { display:none !important; }

.desktop-recommendation {
    padding:var(--space-4);
    background:var(--primary-soft);
    border:0;
    border-left:3px solid var(--accent);
    border-radius:0;
}

.desktop-recommendation h2 { margin:.35rem 0 .5rem; font-size:1rem; }
.desktop-recommendation p { margin:0; color:var(--text-secondary); line-height:1.5; }

.mobile-workbench-flow {
    display:grid;
    gap:var(--space-2);
    padding:var(--space-2);
    background:var(--color-surface-subtle);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

.mobile-workbench-flow[hidden] { display:none !important; }
.mobile-workbench-flow h3,
.mobile-workbench-flow p { margin:0; }
.mobile-workbench-progress { display:grid; gap:var(--space-2); color:var(--text-secondary); font-size:var(--font-label); font-weight:750; }
.mobile-workbench-progress-track { display:block; height:4px; overflow:hidden; background:var(--surface-interactive); border-radius:var(--radius-sm); }
.mobile-workbench-progress-track span { display:block; width:25%; height:100%; background:var(--accent); border-radius:inherit; transition:width var(--motion-base) var(--ease-standard); }
.mobile-workbench-actions { display:flex; justify-content:space-between; gap:var(--space-3); }
.mobile-workbench-actions > * { min-height:var(--touch-target); }

html[data-selection-step="method"] .selection-options { display:block; }
html[data-selection-step="method"] .selection-options .dough-method-panel { width:100%; margin:0; }
html[data-selection-step="method"] .selection-options .dough-method-disclosure > summary { display:none; }
html[data-selection-step="method"] .selection-options .dough-method-content { padding:var(--space-3); }
html[data-product-shell="mobile-portrait"][data-selection-step="method"] .dough-method-options,
html[data-product-shell="mobile-portrait"][data-selection-step="method"] .preferment-fields,
html[data-product-shell="mobile-landscape"][data-selection-step="method"] .dough-method-options,
html[data-product-shell="mobile-landscape"][data-selection-step="method"] .preferment-fields { grid-template-columns:minmax(0, 1fr); }
html[data-selection-step="method"] .dough-method-option > span { min-height:0; }

/* Mobile portrait is a focused assistant, not a long workbench document. */
html[data-product-shell="mobile-portrait"] .workspace-shell,
html[data-product-shell="mobile-portrait"] .workspace-content,
html[data-product-shell="mobile-portrait"] .calculator-layout { width:100%; min-width:0; }

html[data-product-shell="mobile-portrait"][data-product-phase="selection"] .guided-start-heading,
html[data-product-shell="mobile-portrait"][data-product-phase="selection"] .recipe-foundation,
html[data-product-shell="mobile-portrait"][data-product-phase="selection"] .preset-preview,
html[data-product-shell="mobile-portrait"][data-product-phase="selection"] .preset-status,
html[data-product-shell="mobile-portrait"][data-product-phase="selection"] .calculator-layout,
html[data-product-shell="mobile-portrait"][data-product-phase="selection"] #flourProfile { display:none !important; }

html[data-product-shell="mobile-portrait"][data-product-phase="selection"] .guided-start {
    width:min(100%, var(--shell-selection-max));
    margin-inline:auto;
    padding-top:var(--space-2);
}

html[data-product-shell="mobile-portrait"] .selection-monitor { min-width:0; }
html[data-product-shell="mobile-portrait"] .selection-step-heading h3 { font-size:clamp(1.35rem, 7vw, 1.8rem); }
html[data-product-shell="mobile-portrait"] .selection-options { grid-template-columns:minmax(0, 1fr); overflow:visible; }
html[data-product-shell="mobile-portrait"] .selection-option { min-width:0; }
html[data-product-shell="mobile-portrait"] .guided-primary-action .primary-button { width:100%; }
/* Die Zusammenfassung steht seit css/guided.css ueberall als Zeilenliste mit
   gepunkteter Trennung - was hier frueher stand (eigenes Raster, durchgezogene
   Trennlinie oben), war die Telefon-Fassung der alten Kachelform und haette
   jetzt eine zweite Linie unter jede gepunktete gelegt. */
html[data-product-shell="mobile-portrait"] .recipe-preview-values { width:100%; }
html[data-product-shell="mobile-portrait"] .recipe-preview-values dt,
html[data-product-shell="mobile-portrait"] .recipe-preview-values dd { min-width:0; overflow:visible; text-overflow:clip; white-space:normal; }
html[data-product-shell="mobile-portrait"] .form-group input,
html[data-product-shell="mobile-portrait"] .form-group select,
html[data-product-shell="mobile-landscape"] .form-group input,
html[data-product-shell="mobile-landscape"] .form-group select { font-size:16px; transform:none; }
html[data-product-shell="mobile-portrait"] .entry-hub { padding:var(--space-4); border-radius:var(--radius-lg); }
html[data-product-shell="mobile-portrait"] .entry-hub-actions { grid-template-columns:minmax(0, 1fr); }
html[data-product-shell="mobile-portrait"] .entry-hub-action { min-height:96px; }

html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .guided-start,
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] #flourProfile { display:none !important; }

html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .calculator-layout { display:block; }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .input-panel { width:100%; padding:var(--space-3); }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .input-panel > .panel-heading,
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .workbench-intro { display:none; }

html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] [data-shell-task] { display:none !important; }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"][data-workbench-step="portion"] [data-shell-task="portion"],
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"][data-workbench-step="fermentation"] [data-shell-task="fermentation"],
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"][data-workbench-step="review"] [data-shell-task="review"] { display:block !important; }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] [data-shell-task][hidden] { display:none !important; }

/* Anzahl und Gewicht sind eine Entscheidung: Sie teilen sich eine Zeile, statt zwei Bildschirme zu belegen. */
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .workbench-fields-core { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .workbench-fields-core [data-shell-task] { margin-top:var(--space-2); }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .workbench-fields-core .number-control { grid-template-columns:44px minmax(0, 1fr) 44px; gap:var(--space-1); }
html[data-product-shell="mobile-portrait"][data-product-phase="workbench"] .workbench-fields-core .number-btn { width:44px; }

html[data-product-shell="mobile-portrait"][data-product-phase="result"] .guided-start,
html[data-product-shell="mobile-portrait"][data-product-phase="result"] .input-panel,
html[data-product-shell="mobile-portrait"][data-product-phase="result"] #flourProfile { display:none !important; }
html[data-product-shell="mobile-portrait"][data-product-phase="result"] .result-panel { display:block; width:100%; }

/* Mobile landscape has an explicit guide zone and a task zone. */
html[data-product-shell="mobile-landscape"] .workspace-shell { display:block; width:100%; }
html[data-product-shell="mobile-landscape"] .workspace-content { width:100%; }
html[data-product-shell="mobile-landscape"] .journey-sidebar { display:none; }
html[data-product-shell="mobile-landscape"] .guided-start {
    display:grid;
    grid-template-columns:var(--shell-landscape-guide) var(--shell-landscape-task);
    align-items:start;
    gap:var(--space-3) var(--layout-gap);
    width:100%;
}
html[data-product-shell="mobile-landscape"] .entry-hub { grid-template-columns:minmax(180px, .7fr) minmax(0, 1.3fr); padding:var(--space-4); }
html[data-product-shell="mobile-landscape"] .entry-hub-actions { grid-template-columns:repeat(2, minmax(0, 1fr)); }
html[data-product-shell="mobile-landscape"] .entry-hub-action { min-height:86px; }
html[data-product-shell="mobile-landscape"] .guided-start-heading { grid-column:1; }
html[data-product-shell="mobile-landscape"] .selection-monitor { grid-column:1 / -1; }
html[data-product-shell="mobile-landscape"] .selection-step-content {
    display:grid;
    grid-template-columns:var(--shell-landscape-guide) var(--shell-landscape-task);
    gap:var(--space-3) var(--layout-gap);
}
html[data-product-shell="mobile-landscape"] .selection-progress-copy,
html[data-product-shell="mobile-landscape"] .selection-step-heading,
html[data-product-shell="mobile-landscape"] .selection-actions,
html[data-product-shell="mobile-landscape"] .selection-status { grid-column:1; }
html[data-product-shell="mobile-landscape"] .selection-options,
html[data-product-shell="mobile-landscape"] .selection-summary { grid-column:2; grid-row:1 / span 5; align-self:start; }
html[data-product-shell="mobile-landscape"] .selection-options { grid-template-columns:repeat(2, minmax(0, 1fr)); max-height:calc(100svh - 150px); overflow:auto; }
html[data-product-shell="mobile-landscape"] .selection-options.is-flour { grid-template-columns:minmax(0, 1fr); }
html[data-product-shell="mobile-landscape"] .calculator-layout { grid-template-columns:var(--shell-landscape-guide) var(--shell-landscape-task); }
html[data-product-shell="mobile-landscape"][data-product-phase="workbench"] .input-panel { grid-column:1 / -1; display:grid; grid-template-columns:var(--shell-landscape-guide) var(--shell-landscape-task); gap:var(--layout-gap); }
html[data-product-shell="mobile-landscape"][data-product-phase="workbench"] .mobile-workbench-flow { grid-column:1; align-self:start; }
html[data-product-shell="mobile-landscape"][data-product-phase="workbench"] .input-panel > :not(.mobile-workbench-flow) { grid-column:2; }

/* Tablet portrait is a full-width guided workspace with two-column choices. */
html[data-product-shell="tablet-portrait"] .app { width:100%; padding-inline:var(--layout-gutter); }
html[data-product-shell="tablet-portrait"] .app-chrome { position:relative; inset:auto; width:100%; background:var(--background); border-bottom:1px solid var(--border); }
html[data-product-shell="tablet-portrait"] .workspace-shell,
html[data-product-shell="tablet-portrait"] main > .page { width:100%; max-width:none; margin-inline:0; }
html[data-product-shell="tablet-portrait"] .workspace-content { width:100%; }
html[data-product-shell="tablet-portrait"] .selection-options { grid-template-columns:repeat(2, minmax(0, 1fr)); }
html[data-product-shell="tablet-portrait"] .calculator-layout { grid-template-columns:minmax(0, 1fr); }
html[data-product-shell="tablet-portrait"] .input-panel { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4); }
html[data-product-shell="tablet-portrait"] .input-panel > .panel-heading,
html[data-product-shell="tablet-portrait"] .input-panel > .workbench-intro,
html[data-product-shell="tablet-portrait"] .input-panel > .recipe-preview,
html[data-product-shell="tablet-portrait"] .input-panel > .recommendation-comparison,
html[data-product-shell="tablet-portrait"] .input-panel > .workflow-next-hint,
html[data-product-shell="tablet-portrait"] .input-panel > .guided-primary-action,
html[data-product-shell="tablet-portrait"] .input-panel > .input-message { grid-column:1 / -1; }
html[data-product-shell="tablet-portrait"] .guided-primary-action .primary-button { width:100%; }

/* Tablet landscape keeps touch navigation compact and reserves a companion column. */
html[data-product-shell="tablet-landscape"] .app { width:100%; padding-inline:var(--layout-gutter); }
html[data-product-shell="tablet-landscape"] .app-chrome { position:relative; inset:auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(240px, var(--companion-slot-tablet)); width:100%; }
html[data-product-shell="tablet-landscape"] .header { min-width:0; }
html[data-product-shell="tablet-landscape"] .workspace-shell,
html[data-product-shell="tablet-landscape"] main > .page { width:100%; max-width:none; margin-inline:0; }
html[data-product-shell="tablet-landscape"] .selection-options { grid-template-columns:repeat(3, minmax(230px, 1fr)); }
html[data-product-shell="tablet-landscape"] .selection-options.is-flour { grid-template-columns:repeat(2, minmax(0, 1fr)); }
html[data-product-shell="tablet-landscape"][data-selection-step="oven"] .selection-options { grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
html[data-product-shell="tablet-landscape"] .calculator-layout { grid-template-columns:minmax(0, 1fr); }
html[data-product-shell="tablet-landscape"] .input-panel { display:grid; grid-template-columns:minmax(0, 1fr) minmax(20rem, .8fr); gap:var(--space-4); }
html[data-product-shell="tablet-landscape"] .input-panel > .panel-heading,
html[data-product-shell="tablet-landscape"] .input-panel > .workbench-intro,
html[data-product-shell="tablet-landscape"] .input-panel > .workbench-fields-core,
html[data-product-shell="tablet-landscape"] .input-panel > .workbench-fermentation,
html[data-product-shell="tablet-landscape"] .input-panel > .planning-compact,
html[data-product-shell="tablet-landscape"] .input-panel > .recipe-workbench,
html[data-product-shell="tablet-landscape"] .input-panel > .recommendation-comparison,
html[data-product-shell="tablet-landscape"] .input-panel > .workflow-next-hint,
html[data-product-shell="tablet-landscape"] .input-panel > .guided-primary-action,
html[data-product-shell="tablet-landscape"] .input-panel > .input-message { grid-column:1; }
html[data-product-shell="tablet-landscape"] .input-panel > .recipe-preview { grid-column:2; grid-row:1 / span 5; align-self:start; }
html[data-product-shell="tablet-landscape"] .guided-primary-action .primary-button { width:100%; }
html[data-product-shell="tablet-landscape"] .result-panel { width:100%; }

/* Desktop follows the canonical left rail / work area / companion studio composition. */
html[data-product-shell="desktop"] .app { width:min(100%, var(--content-max-desktop)); max-width:none; }
/* Waagerechte Kopfzeile statt linker Seitenleiste, Doughy unten in der Theke -
   diese Datei laedt als letzte in style.css und hatte bislang mit der alten
   Rail-/Schwebekasten-Geometrie jede Aenderung in adaptive.css und
   concept-layout.css ueberschrieben, weil productShell.js data-product-shell
   per .dataset setzt statt als literales Attribut im Quelltext zu stehen - ein
   Grep danach fand es nicht. Siehe css/adaptive.css fuer die eigentlichen
   Regeln, hier nur ersatzlos entfernt. */
/* pointer-events:none war das Telefon-/Tablet-Muster fuer eine inset:0-Vollbild-
   Ueberlagerung uebertragen auf ein position:static-Element ohne Overlay - machte
   die ganze Kopfzeile (Reiter, Theme-Umschalter) unklickbar. Diese Datei laedt
   zuletzt und gewinnt die Kaskade, war also die eigentliche Ursache der Meldung
   "Menü in der Desktopversion funktioniert nicht" am 14.08.2026. */
html[data-product-shell="desktop"] .app-chrome {
    position:static;
    display:block;
    width:auto;
    max-height:none;
    overflow:visible;
}
html[data-product-shell="desktop"] .header { position:static; left:auto; top:auto; width:auto; }
html[data-product-shell="desktop"] .doughy-companion {
    position:fixed;
    z-index:calc(var(--z-navigation) + 1);
    right:0;
    bottom:0;
    left:0;
    min-height:0;
    height:176px;
    background:var(--gradient-counter);
    box-shadow:var(--shadow-md);
}
/* Zweite Absicherung neben css/adaptive.css: data-layout und data-product-shell
   sind zwei unabhaengig gesetzte Attribute, die im Normalfall gleichzeitig auf
   "desktop" stehen, aber keine Garantie dafuer haben. Ohne diese Zeile bliebe
   Doughys Kastenmass beim alten Vorsprung scale(1.1) aus css/doughy.css haengen,
   wenn nur dieses Attribut greift - zu gross fuer die 176px-Theke. */
html[data-product-shell="desktop"] .doughy-character {
    --doughy-scale:1;
    width:197px;
    height:197px;
}
html[data-product-shell="desktop"] .doughy-avatar {
    width:197px;
    height:197px;
}
html[data-product-shell="desktop"] .desktop-recommendation { display:block; }
html[data-product-shell="desktop"] .workspace-shell,
html[data-product-shell="desktop"] main > .page:not(#calculatorPage) {
    width:auto;
    max-width:none;
    margin-left:0;
    margin-bottom:176px;
}
html[data-product-shell="desktop"] .workspace-shell { display:block; }
html[data-product-shell="desktop"] .journey-sidebar { display:none; }
html[data-product-shell="desktop"] .guided-start { width:100%; grid-template-columns:minmax(0, 1fr); }
/* Vierspaltig nach dem Entwurf statt auto-fit - siehe css/guided.css fuer die
   Kartenform selbst. auto-fit fiel je nach Fensterbreite auf 5 oder mehr
   Spalten, die guided.css-Regel dahinter (repeat(4,...)) kam nie zum Zug, weil
   diese Datei zuletzt laedt und dieselbe Klasse traf. */
html[data-product-shell="desktop"] .selection-options { grid-template-columns:repeat(4, minmax(0, 1fr)); }
html[data-product-shell="desktop"] .selection-options.is-flour { grid-template-columns:repeat(3, minmax(0, 1fr)); }
html[data-product-shell="desktop"][data-selection-step="oven"] .selection-options { grid-template-columns:repeat(4, minmax(0, 1fr)); }
html[data-product-shell="desktop"] .selection-option { min-width:0; }
html[data-product-shell="desktop"] .calculator-layout { grid-template-columns:minmax(0, 1fr); width:100%; }
html[data-product-shell="desktop"] .input-panel { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 380px); gap:var(--space-4); }
html[data-product-shell="desktop"] .input-panel > .panel-heading,
html[data-product-shell="desktop"] .input-panel > .workbench-intro,
html[data-product-shell="desktop"] .input-panel > .workbench-fields-core,
html[data-product-shell="desktop"] .input-panel > .workbench-fermentation,
html[data-product-shell="desktop"] .input-panel > .recipe-workbench,
html[data-product-shell="desktop"] .input-panel > .recommendation-comparison,
html[data-product-shell="desktop"] .input-panel > .workflow-next-hint,
html[data-product-shell="desktop"] .input-panel > .guided-primary-action,
html[data-product-shell="desktop"] .input-panel > .input-message { grid-column:1; }
html[data-product-shell="desktop"] .input-panel > .planning-compact,
html[data-product-shell="desktop"] .input-panel > .recipe-preview { grid-column:2; }
html[data-product-shell="desktop"] .input-panel > .recipe-preview { grid-row:1 / span 5; align-self:start; }
html[data-product-shell="desktop"] .guided-primary-action .primary-button { width:min(100%, 32rem); min-height:3.25rem; max-height:4rem; }
html[data-product-shell="desktop"] .result-panel { width:100%; }

@media (min-width:1600px) {
    html[data-product-shell="desktop"] .selection-options { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (min-width:1181px) and (max-width:1599px) {
    html[data-product-shell="desktop"][data-product-phase="recipes"] .doughy-companion,
    html[data-product-shell="desktop"][data-product-phase="recipes"] .desktop-recommendation { display:none !important; }
    /* Reservierte fuer die alte rechte Seitenspalte gedachte Breitenformel
       (--layout-rail) entfaellt: die Theke ist jetzt eine feste Zone unten, keine
       Spalte, die noch Platz beansprucht - #recipesPage bekommt dieselbe volle
       Breite wie jede andere Seite ueber die allgemeine Regel weiter oben. */
    html[data-product-shell="desktop"][data-product-phase="recipes"] main > #recipesPage {
        margin-right:0;
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    :root { --layout-rail:184px; --shell-desktop-companion:292px; }
    html[data-product-shell="desktop"] .input-panel { grid-template-columns:minmax(0, 1fr); }
    html[data-product-shell="desktop"] .input-panel > * { grid-column:1 !important; grid-row:auto !important; }
}

@media (prefers-reduced-motion:reduce) {
    .mobile-workbench-progress-track span { transition:none; }
}

@media (max-width:520px) {
    .entry-hub-actions { grid-template-columns:minmax(0, 1fr); }
}

/* style.css */
.doughy-character::after{position:absolute;z-index:1;inset:0;background:url("../assets/doughy-v2.svg") 50% 100%/contain no-repeat;content:"";filter:drop-shadow(0 10px 8px var(--doughy-figure-shadow));opacity:1;pointer-events:none;transition:opacity 120ms ease}.doughy-body,.doughy-face-layer{opacity:0}.doughy-companion.is-pet-v2-ready .doughy-character::after{opacity:0}.walkthrough-visual img{content:url("../assets/doughy-v2.svg")}
@media(max-width:760px){html[data-nizember-view="conversation"]{--conversation-nav-clearance:calc(var(--space-3) + env(safe-area-inset-bottom))}html[data-nizember-view="conversation"] .app{padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}html[data-nizember-view="conversation"] .conversation-summary{position:relative;bottom:auto}html[data-nizember-view="conversation"] .conversation-choice-grid--visual{gap:8px}html[data-nizember-view="conversation"] .conversation-choice-grid--visual .choice-value{-webkit-line-clamp:4}}
@media(prefers-reduced-motion:reduce){.doughy-character::after{transition:none}}