/* —— Ebene 0: Plattform (app.kuechenly.de, helles Theme). Werte von dort übernehmen, nie erfinden. —— */:root {--p-background: #e6e3de;--p-ui: #f5f2ee;--p-surface-1: #faf7f3;--p-surface-2: color-mix(in srgb, var(--p-ui), white 40%);--p-heading: #1a1c1f;--p-secondary: #5c574f;--p-accent: #8a847c;--p-accent-warm: #b4aaa0;--p-danger: #b42318;--p-font: 'Montserrat', 'Montserrat Fallback', Arial, sans-serif;--p-text-3: color-mix(in srgb, var(--p-heading), transparent 38%);--p-divider: color-mix(in srgb, var(--p-heading), transparent 88%);--p-wash: color-mix(in srgb, var(--p-heading) 6%, transparent);--p-ring: color-mix(in srgb, var(--p-heading) 28%, transparent);--p-fill-hover: color-mix(in srgb, var(--p-heading), var(--p-surface-1) 14%);--p-input-bg: color-mix(in srgb, var(--p-surface-2), var(--p-heading) 2.5%);--p-input-border: color-mix(in srgb, var(--p-heading), transparent 91%);--p-input-border-hover: color-mix(in srgb, var(--p-heading), transparent 84%);--p-input-border-focus: color-mix(in srgb, var(--p-heading), transparent 68%);--p-input-ring: 0 0 0 0.125rem color-mix(in srgb, var(--p-heading), transparent 92%);--p-modal-veil: color-mix(in srgb, var(--p-heading), transparent 52%);--p-surface-sheen: linear-gradient( 165deg, color-mix(in srgb, white 8%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--p-heading) 2.5%, transparent) 100% );--p-panel-highlight: inset 0 0.0625rem 0 color-mix(in srgb, white, transparent 48%), inset 0 -0.0625rem 0 color-mix(in srgb, var(--p-heading), transparent 96%);--p-soft-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--p-heading), transparent 93%), 0 0.375rem 1.375rem color-mix(in srgb, var(--p-heading), transparent 92%), 0 0.875rem 2.5rem color-mix(in srgb, var(--p-heading), transparent 94%);--p-nested-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--p-heading), transparent 94%), 0 0.25rem 0.875rem color-mix(in srgb, var(--p-heading), transparent 93%);--p-float-shadow: 0 0.25rem 1.5rem color-mix(in srgb, var(--p-heading), transparent 88%), 0 0.875rem 2.75rem color-mix(in srgb, var(--p-heading), transparent 91%), 0 0.0625rem 0.1875rem color-mix(in srgb, var(--p-heading), transparent 93%);--p-button-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--p-heading), transparent 88%), 0 0.375rem 1rem color-mix(in srgb, var(--p-heading), transparent 90%);--p-panel-r: 1.25rem;--p-card-r: 1.05rem;--p-control-r: 0.85rem;--p-pill-r: 50rem;--p-control-h: 2.75rem;--p-button-weight: 600;--p-ease: cubic-bezier(0.25, 0.8, 0.25, 1);--p-dark-bg: #161412;--p-dark-surface-1: #262320;--p-dark-heading: #f3f0eb;--p-dark-secondary: #9a938a; /* —— Ebene 1: Grundwerte —— */--c-stone-50: var(--p-ui);--c-stone-100: #ece8e2;--c-ink-900: var(--p-heading);--c-ink-700: #4b4945;--c-ink-500: #655f58;--font-ui: var(--p-font);--fw-body: 300;--fw-strong: 500;--fw-display: 600;--fs-kicker: 0.76rem;--fs-caption: 0.86rem;--fs-ui: 0.96rem;--fs-sm: 1rem;--fs-body: 1.06rem;--fs-lead: 1.12rem;--fs-h4: 1.25rem;--fs-h3: 1.45rem;--fs-stat: 2rem; /* Eine Skala für alle Seiten, die der Startseite: h2 wie die Kapitel der Bühne, h1 wie ihr Titel. */--fs-h2: clamp(1.6rem, 2.4vw, 2.3rem);--fs-display: clamp(2.3rem, 3.6vw, 3.9rem); /* Zwei Spaltenlinien für alle Blöcke: Überschrift | Text (7:5) und Text | Bild oder Formular (5:7). */ /* Eine Spaltenlinie wie auf der Bühne der Startseite: zwei gleiche Hälften mit breiter Fuge. */--split-head: minmax(0, 1fr) minmax(0, 1fr);--split-media: minmax(0, 1fr) minmax(0, 1fr);--split-gap: clamp(2rem, 5vw, 6rem); /* Eine Ebene für alle Flächen auf der Seite; die Kopfzeile schwebt mit --p-float-shadow. */--panel-shadow: var(--p-soft-shadow), var(--p-panel-highlight);--measure: 58ch;--sp-1: 0.25rem;--sp-2: 0.5rem;--sp-3: 0.75rem;--sp-4: 1rem;--sp-5: 1.5rem;--sp-6: 2rem;--sp-7: 2.5rem;--sp-8: 3.5rem;--dur-fast: 0.16s;--dur-base: 0.28s;--dur-slow: 0.7s; /* —— Ebene 2: Bedeutung —— */--canvas: var(--c-stone-50);--surface: var(--p-surface-1);--surface-2: var(--c-stone-100);--wash: color-mix(in srgb, var(--p-background) 45%, var(--p-ui));--overlay: var(--p-modal-veil);--ink: var(--c-ink-900);--ink-2: var(--c-ink-700);--muted: var(--c-ink-500);--line: var(--p-divider);--line-strong: color-mix(in srgb, var(--c-ink-900), transparent 80%);--line-invert: color-mix(in srgb, white, transparent 82%);--accent-strong: var(--p-secondary);--err: var(--p-danger);--gutter: clamp(1.35rem, 5.5vw, 3.5rem);--wide: 78rem;--section-y: clamp(3.75rem, 6.5vw, 6rem);--control-h: var(--p-control-h);--r-sm: var(--p-control-r);--r-md: var(--p-card-r);--r-lg: var(--p-panel-r);--r-full: var(--p-pill-r);--t: var(--dur-base) var(--p-ease);--t-fast: var(--dur-fast) var(--p-ease);--t-slow: var(--dur-slow) var(--p-ease);--focus: 0.125rem solid color-mix(in srgb, var(--ink), transparent 32%);--z-header: 40;--z-overlay: 80;--header-h: 4.25rem; /* —— Ebene 3: Komponenten —— */--btn-bg: var(--ink);--btn-fg: var(--surface);--btn-hover-bg: var(--p-fill-hover); /* Formulare und Bausteine von Eile lesen --t-*: auf die Tokens der Website abgebildet. */--t-accent: var(--ink);--t-on-accent: var(--surface);--t-text: var(--ink);--t-muted: var(--muted);--t-border: var(--p-input-border);--t-surface: var(--p-input-bg);--t-hover: var(--p-wash);--t-danger: var(--p-danger);--t-success: #2f6f3e;--t-radius: calc(var(--control-h) / 8);--t-gap: var(--sp-5);color-scheme:light;scroll-padding-top:6.5rem;overflow-x:clip;accent-color:var(--ink);-webkit-text-size-adjust:100%;} /* Kästchen und Optionsfelder in Tinte und in lesbarer Größe statt der 13 px des Browsers. */:where(input[type='checkbox'], input[type='radio']) {inline-size:1.125rem;block-size:1.125rem;margin:0.1em 0 0;flex:none;}*, *::before, *::after {box-sizing:border-box;}body {margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.65;text-wrap:pretty;caret-color:var(--ink);-webkit-font-smoothing:antialiased;}::selection {color:var(--ink);background:color-mix(in srgb, var(--ink), transparent 86%);}:focus-visible {outline:var(--focus);outline-offset:0.125rem;}img, svg, video {max-width:100%;}img, video {height:auto;}:where(h1, h2, h3, h4) {margin:0 0 var(--sp-3);color:var(--ink);font-weight:var(--fw-display);line-height:1.12;letter-spacing:-0.025em;text-wrap:balance;}:where(h1) {font-size:var(--fs-display);}:where(h2) {font-size:var(--fs-h2);}:where(h3) {font-size:var(--fs-h3);letter-spacing:-0.015em;}:where(h4) {font-size:var(--fs-h4);letter-spacing:-0.015em;} /* Ein in einer großen Überschrift steht kursiv, sonst keine Kursive. */:where(h1, h2) :where(span) {font-style:italic;font-weight:500;}:where(strong, b) {font-weight:var(--fw-strong);}:where(a) {color:inherit;text-decoration-thickness:0.0625rem;text-underline-offset:0.22em;text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);transition:color var(--t-fast), text-decoration-color var(--t-fast);}:where(a:hover) {text-decoration-color:currentColor;}.row {width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter);}.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} /* —— Schaltflächen: Tintenpille der Plattform —— */ /* Endet die Seite mit einer Fläche (data-band), schließt der Fußbereich ohne Streifen daran an. */main.main:has(> [data-band]:last-child) ~ footer {margin-top:0;}.btn {display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--control-h);padding:var(--sp-2) var(--sp-5);border:0;border-radius:var(--r-full);background:var(--btn-bg);color:var(--btn-fg);font:inherit;font-size:var(--fs-ui);font-weight:var(--p-button-weight);letter-spacing:0.01em;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer; /* Flache Tintenpillen wie auf der Startseite. */box-shadow:none;transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);} @media (max-width: 30rem) {.btn {white-space:normal;}:where(h1, h2) {hyphens:auto;overflow-wrap:break-word;} }.btn:hover {background:var(--btn-hover-bg);color:var(--btn-fg);}.btn:active {transform:scale(0.98);} /* Aufruf nach vorn: derselbe Winkel wie auf der Startseite, er rückt beim Überfahren ein Stück vor. */.btn-go {gap:var(--sp-4);}.btn-go::after {content:'';flex:none;width:1.125rem;height:1.125rem;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E") center / contain no-repeat;transition:translate var(--t);}.btn-go:hover::after {translate:0.15rem 0;} @media (prefers-reduced-motion: reduce) {.btn-go::after {transition:none;} }.btn:disabled, .btn[aria-disabled='true'] {opacity:0.5;pointer-events:none;}.btn-outline {background:transparent;color:var(--ink);box-shadow:inset 0 0 0 0.0625rem var(--p-ring);}.btn-outline:hover {background:var(--p-wash);color:var(--ink);box-shadow:inset 0 0 0 0.0625rem var(--ink);}.btn-link {background:none;box-shadow:none;color:var(--ink);text-decoration:underline;text-underline-offset:0.22em;padding-inline:var(--sp-2);}.btn-link:hover {background:none;color:var(--accent-strong);} /* Auf dunklem Grund kehrt sich die Hauptschaltfläche um. */.btn-on-dark {background:var(--p-dark-heading);color:var(--p-heading);}.btn-on-dark:hover {background:var(--surface-2);color:var(--p-heading);} /* —— Formulare von Eile im Stil der Plattform: Felder wie in der App, Absenden als Tintenpille —— */.cms-form {max-width:none;}.cms-form .field > label {font-size:var(--fs-ui);}.cms-form :is(input:not([type='checkbox'], [type='radio'], [type='range']), select, textarea) {border-color:var(--p-input-border);background:var(--p-input-bg);transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);}.cms-form :is(input, select, textarea):hover {border-color:var(--p-input-border-hover);}.cms-form :is(input, select, textarea):focus-visible {outline:none;border-color:var(--p-input-border-focus);background:var(--surface);box-shadow:var(--p-input-ring);}.cms-form :is(input, select, textarea):is(:user-invalid, [aria-invalid='true']) {border-color:var(--p-danger);background:color-mix(in srgb, var(--p-danger) 5%, var(--p-input-bg));box-shadow:0 0 0 0.125rem color-mix(in srgb, var(--p-danger), transparent 85%);}.cms-form button[type='submit'] {border-radius:var(--r-full);padding-inline:var(--sp-5);font-size:var(--fs-ui);letter-spacing:0.01em;line-height:1.2;box-shadow:none;display:inline-flex;align-items:center;gap:var(--sp-4);transition:background var(--t-fast), transform var(--t-fast);}.cms-form button[type='submit']::after {content:'';flex:none;width:1.125rem;height:1.125rem;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E") center / contain no-repeat;}.cms-form ::placeholder {color:var(--muted);opacity:1;}.cms-form button[type='submit']:hover {background:var(--btn-hover-bg);}.cms-form button[type='submit']:active {transform:scale(0.98);}.cms-form .form-step-nav {display:flex;flex-wrap:wrap;gap:var(--sp-3);}.cms-form .form-step-nav button {min-height:var(--control-h);padding:0 var(--sp-5);border:0;border-radius:var(--r-full);background:var(--ink);color:var(--surface);font:inherit;font-size:var(--fs-ui);font-weight:600;letter-spacing:0.01em;cursor:pointer;} /* „Weiter“ führt nach vorn: derselbe Winkel wie alle Aufrufe nach vorn. */.cms-form .form-step-nav button.next {display:inline-flex;align-items:center;gap:var(--sp-4);}.cms-form .form-step-nav button.next::after {content:'';flex:none;width:1.125rem;height:1.125rem;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E") center / contain no-repeat;}.cms-form .form-step-nav button:first-child {background:transparent;color:var(--ink);box-shadow:inset 0 0 0 0.0625rem var(--p-ring);}.cms-form .form-step-progress {color:var(--muted);font-size:var(--fs-caption);}.cms-form-message, .cms-form-sent {border-radius:var(--r-sm);} /* —— Seitentext: Spezifität null, Komponenten im Text sind stärker —— */:where(.prose) {max-width:var(--measure);}:where(.prose) > :last-child {margin-bottom:0;}:where(.prose) :where(h2) {margin:var(--sp-7) 0 var(--sp-3);font-size:clamp(1.35rem, 2.2vw, 1.7rem);}:where(.prose) :where(h3) {margin:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-h4);letter-spacing:-0.015em;line-height:1.25;}:where(.prose) :where(h4) {margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-lead);}:where(.prose) :where(p, ul, ol, blockquote) {margin:0 0 var(--sp-4);}:where(.prose) :where(ul, ol) {padding-left:1.25em;}:where(.prose) :where(li + li) {margin-top:var(--sp-2);}:where(.prose) :where(li::marker) {color:var(--muted);}:where(.prose) :where(blockquote) {padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--wash);color:var(--ink-2);}:where(.prose) :where(a) {font-weight:var(--fw-strong);} /* —— Bildlaufleisten in den Farben der Website —— */html {scrollbar-color:color-mix(in srgb, var(--ink), transparent 68%) transparent;}::-webkit-scrollbar {width:0.75rem;height:0.75rem;}::-webkit-scrollbar-thumb {background:color-mix(in srgb, var(--ink), transparent 68%);border:0.1875rem solid transparent;border-radius:var(--r-full);background-clip:padding-box;}::-webkit-scrollbar-track {background:transparent;} /* Weicher Seitenwechsel zwischen Seiten der Website; ohne Unterstützung lädt der Browser wie gewohnt. */ @view-transition {navigation:auto; }::view-transition-old(root), ::view-transition-new(root) {animation-duration:0.18s;animation-timing-function:var(--p-ease);} @media (prefers-reduced-motion: reduce) { @view-transition {navigation:none; }*, *::before, *::after {transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;} } /* —— Knopf der Plattform (kuechenly-partner.js, auch in der Vorschau des Blocks „KI-Chat“) im Stil der Kopfzeile —— Die Tafel ist dieselbe Fläche wie die Leiste der Kopfzeile (Höhe --header-h, Glanz, schwebender Schatten, Pillenform); die Tintenscheibe sitzt in ihrem rechten Ende mit 0,375rem Einzug rundum, die Rundung läuft mit ihr. Die Bühne des Knopfs ist 4,65rem breit, die Scheibe 3,5rem: die Tafel reicht 4,45rem unter die Bühne, der Text endet 0,8rem vor der Scheibe. Ohne Ring und Puls. Nur Tafel, Zeilen und Knopf; das Chatfenster (.kuechenly-partner-chat) bleibt, wie die Plattform es zeichnet. */body .kuechenly-partner-sticky {font-family:var(--p-font);} /* Die Tafel schrumpft nie unter ihren Inhalt: die Zeilen laufen so nie unter die Scheibe. Über 30rem passt der Inhalt (gut 26rem) immer unter die Kappe der Breite (Fenster − 2,2rem), bei jeder Grundschrift. */body .kuechenly-partner-sticky .caption {flex-shrink:0;min-height:var(--header-h);max-width:calc((100vw - 2rem) / var(--kuechenly-sticky-scale) - 0.2rem);margin-right:-4.45rem;padding:0.55rem 4.75rem 0.55rem var(--sp-5);border-radius:var(--r-full);background-color:var(--surface);background-image:var(--p-surface-sheen);color:var(--ink);box-shadow:var(--p-float-shadow), var(--p-panel-highlight);}body .kuechenly-partner-sticky .msg {justify-items:start;gap:0.1rem;line-height:1.3;text-align:left;}body .kuechenly-partner-sticky .msg span {white-space:nowrap;text-wrap:nowrap;}body .kuechenly-partner-sticky .msg span:first-child {color:var(--ink);font-size:var(--fs-ui);font-weight:600;letter-spacing:-0.01em;}body .kuechenly-partner-sticky .msg span:last-child {color:var(--ink-2);font-size:var(--fs-caption);font-weight:400;letter-spacing:0;opacity:1;} /* Telefon: die Plattform begrenzt die Breite; die erste Zeile trägt allein (sonst würde die Tafel dreizeilig) und bricht auf den schmalsten Telefonen in sich um, statt unter die Scheibe zu laufen. */ @media (max-width: 30rem) {body .kuechenly-partner-sticky .caption {padding-left:var(--sp-4);}body .kuechenly-partner-sticky .msg span:first-child {white-space:normal;text-wrap:balance;}body .kuechenly-partner-sticky .msg span:last-child {display:none;} } /* Schmalste Telefone (320 px): die erste Zeile etwas kleiner, damit sie einzeilig bleibt. */ @media (max-width: 21rem) {body .kuechenly-partner-sticky .msg span:first-child {font-size:0.84rem;} } /* Die Bühne der Scheibe bleibt 4,65rem breit, sonst rückt die Scheibe über den Text. */body .kuechenly-partner-sticky .stage {flex-shrink:0;}body .kuechenly-partner-sticky .ring {display:none;}body .kuechenly-partner-sticky .fab {background:var(--ink);color:var(--surface);box-shadow:0 0.125rem 0.375rem color-mix(in srgb, var(--p-heading), transparent 82%);}body .kuechenly-partner-sticky .fab:hover {background:var(--btn-hover-bg);box-shadow:0 0.125rem 0.375rem color-mix(in srgb, var(--p-heading), transparent 82%);} /* Offen steht die Scheibe allein (die Tafel ist weg): dann der Schatten der Schaltflächen. */body .kuechenly-partner-sticky[data-open] .fab, body .kuechenly-partner-sticky[data-open] .fab:hover {box-shadow:var(--p-button-shadow);}body .kuechenly-partner-sticky button:focus-visible {outline:0.125rem solid var(--ink);outline-offset:0.15rem;}.skip.svelte-1vvz1vq {position:fixed;top:var(--sp-2);left:var(--sp-2);z-index:200;padding:0.6rem 1rem;border-radius:var(--r-full);background:var(--ink);color:var(--canvas);font-size:var(--fs-ui);font-weight:600;text-decoration:none;transform:translateY(-160%);transition:transform var(--t-fast);}.skip.svelte-1vvz1vq:focus-visible {transform:none;}.main.svelte-1vvz1vq {display:block;min-height:60vh;padding-top:calc(var(--header-h) + 2.25rem);}