/* Konzeptseite /abnehmen-ohne-hunger (F18). Grundgerüst; das Aussehen "Notizbuch" (Richtung B, Bennis Wahl 02.10.2026) setzt unten darauf auf.
   Alles unter .lcb-ks, nichts wirkt auf andere Seiten. */
@font-face { font-family: "KS Caprasimo"; src: url(fonts/caprasimo-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KS Figtree"; src: url(fonts/figtree-400-800-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "KS Kalam"; src: url(fonts/kalam-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KS Kalam"; src: url(fonts/kalam-700-latin.woff2) format("woff2"); font-weight: 700; font-display: swap; }

.lcb-ks {
	--ks-tinte: #1f2840;
	--ks-tinte-weich: #4a5470;
	--ks-papier: #ffffff;
	--ks-morgen: #ffe4c4;
	--ks-morgen-hell: #fff7ec;
	--ks-mittag: #d6edf6;
	--ks-mittag-hell: #f2f9fc;
	--ks-abend: #2b2d5e;
	--ks-blatt: #2f7d57;
	--ks-blatt-hell: #e5f3ea;
	--ks-sonne: #f7b538;
	--ks-marke: #b9541f; /* Orange der Herbst-Leiste; #c4552a hatte mit weißer Schrift nur 4,49 statt 4,5 Kontrast */
	--ks-marke-dunkel: #a6431d;
	--ks-linie: rgba(31, 40, 64, .12);
	--ks-display: "KS Caprasimo", Georgia, serif;
	--ks-text: "KS Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ks-hand: "KS Kalam", "Comic Sans MS", cursive;
	--ks-rand: clamp(16px, 4.5vw, 32px);
	--ks-kopf: 0px;
}

/* Theme-Rahmen lösen: Astra schließt den Inhalt in .ast-container ein */
.lcb-ks .site-content > .ast-container { max-width: none; padding: 0; display: block; }
.lcb-ks #primary, .lcb-ks .site-main { margin: 0; padding: 0; }
/* Am PC setzt das Theme overflow:auto auf body - das macht body zum Scrollbereich und hebelt "position: sticky" des Himmels aus */
body.lcb-ks { overflow-x: clip !important; overflow-y: visible !important; }

.ks { color: var(--ks-tinte); font-family: var(--ks-text); font-size: 18px; line-height: 1.62; background: var(--ks-papier); overflow-x: clip; }
.ks *, .ks *::before, .ks *::after { box-sizing: border-box; }
/* Theme-Vorgaben neutralisieren: Astra trennt Silben automatisch und schreibt Knöpfe groß */
.ks, .ks * { -webkit-hyphens: manual; hyphens: manual; word-break: normal; overflow-wrap: break-word; }
.lcb-ks .ks button { text-transform: none; letter-spacing: normal; line-height: 1.35; min-height: 0; font-family: var(--ks-text); box-shadow: none; }
.ks p { margin: 0 0 1em; }
.ks a { color: var(--ks-marke-dunkel); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ks strong, .ks b { font-weight: 700; }
.ks img { max-width: 100%; height: auto; display: block; }
.ks :focus-visible { outline: 3px solid var(--ks-marke); outline-offset: 3px; border-radius: 6px; }

.ks-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--ks-rand); }
.ks-schmal { max-width: 720px; margin-left: auto; margin-right: auto; }
.ks-wrap.ks-schmal { max-width: calc(720px + 2 * var(--ks-rand)); }
.ks-abschnitt { padding: clamp(56px, 10vw, 104px) 0; }

.ks-h1, .ks-h2, .ks-h3 { font-family: var(--ks-display); font-weight: 400; color: var(--ks-tinte); letter-spacing: -.01em; hyphens: manual; margin: 0; }
.ks-h1 { font-size: clamp(46px, 13vw, 92px); line-height: .98; margin-bottom: .32em; }
.ks-h2 { font-size: clamp(31px, 7.4vw, 50px); line-height: 1.08; margin-bottom: .55em; text-wrap: balance; }
.ks-h2--klein { font-size: clamp(26px, 5.6vw, 34px); }
.ks-h3 { font-size: clamp(23px, 5.4vw, 30px); line-height: 1.15; margin-bottom: .5em; text-wrap: balance; }
.ks-hand { font-family: var(--ks-hand); font-weight: 700; }
.ks-klein { font-size: 14px; color: var(--ks-tinte-weich); line-height: 1.5; }
.ks-lead { font-size: clamp(19px, 4.6vw, 22px); line-height: 1.55; color: var(--ks-tinte); }

.ks-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 14px 28px;
	background: var(--ks-marke); color: #fff !important; font-weight: 800; font-size: 18px; line-height: 1.2; text-decoration: none;
	border-radius: 999px; box-shadow: 0 6px 0 var(--ks-marke-dunkel); transition: transform .12s, box-shadow .12s; text-align: center;
}
.ks-knopf:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ks-marke-dunkel); }
.ks-knopf:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ks-marke-dunkel); }
.ks-knopf--gross { min-height: 62px; font-size: 20px; padding: 16px 36px; }
.ks-link { font-weight: 700; color: var(--ks-tinte) !important; text-decoration: underline; text-decoration-color: var(--ks-sonne); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* 1 Einstieg: Morgenhimmel, Sonne geht einmal auf */
.ks-hero { position: relative; padding: clamp(28px, 7vw, 72px) 0 clamp(48px, 9vw, 96px); isolation: isolate; overflow: hidden; }
.ks-hero__himmel { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ks-morgen) 0%, var(--ks-morgen-hell) 62%, #fff 100%); }
.ks-hero__sonne {
	position: absolute; width: min(120vw, 900px); aspect-ratio: 1; left: 50%; top: 100%; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 210, 120, .75) 0%, rgba(255, 210, 120, .28) 38%, rgba(255, 210, 120, 0) 66%);
	transform: translate(-50%, -38%); animation: ks-aufgang 2.4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes ks-aufgang { from { transform: translate(-50%, -8%); opacity: 0; } to { transform: translate(-50%, -38%); opacity: 1; } }
.ks-hero__raster { display: grid; gap: 20px; }
.ks-hero__bild { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 14px; }
.ks-bogen { display: block; width: clamp(116px, 34vw, 190px); aspect-ratio: 4 / 5; border-radius: 999px 999px 22px 22px; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(196, 85, 42, .18); background: var(--ks-morgen); }
.ks-bogen img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
.ks-hero__unterschrift { display: grid; gap: 12px; align-content: end; padding-bottom: 6px; }
.ks-hero__gruss { display: block; font-size: clamp(26px, 7vw, 36px); line-height: 1.15; color: var(--ks-marke-dunkel); transform: rotate(-3deg); transform-origin: left bottom; }
.ks-hero__sterne { display: grid; gap: 4px; font-size: 14px; line-height: 1.3; color: var(--ks-tinte-weich); }
.ks-hero__sterne b { color: var(--ks-tinte); font-size: 16px; }
.ks-hero__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 26px 0 30px; }
.ks-hero__video { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--ks-tinte) !important; text-decoration: none; }
.ks-hero__video:hover, .ks-hero__video:focus { color: var(--ks-tinte) !important; text-decoration: underline; text-decoration-color: var(--ks-sonne); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ks-hero__video .ks-video__dreieck { width: 28px; height: 28px; flex: none; }
.ks-hero__video .ks-video__dreieck::after { left: 11px; top: 8px; border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
.ks-vertrauen { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1.5px dashed rgba(196, 85, 42, .35); display: grid; grid-template-columns: repeat(2, auto); gap: 6px 28px; justify-content: start; font-size: 14px; line-height: 1.3; }
.ks-vertrauen li { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ks-vertrauen b { font-size: 16px; }
.ks-vertrauen span { color: var(--ks-tinte-weich); }
.ks-sterne { display: inline-flex; gap: 2px; color: var(--ks-sonne); vertical-align: middle; }
.lcb-ks .ks-sterne svg { width: 20px; height: 20px; fill: #f5a524; }

/* 2 Kennst Du das? */
.ks-kennst { background: #fff; }
.ks-chips { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 8px; }
.ks-chip {
	appearance: none; text-align: left; font: inherit; font-size: 17px; font-weight: 600; color: var(--ks-tinte); cursor: pointer;
	padding: 14px 18px 14px 54px; border-radius: 18px; border: 2px solid var(--ks-linie); background: #fff; position: relative;
	transition: border-color .2s, background .2s, transform .2s;
}
.ks-chip::before {
	content: ""; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
	border: 2px solid rgba(31, 40, 64, .3); transition: all .2s;
}
.ks-chip[aria-pressed="true"] { border-color: var(--ks-blatt); background: var(--ks-blatt-hell); }
.ks-chip[aria-pressed="true"]::before { background: var(--ks-blatt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: var(--ks-blatt); }
.ks-chip:active { transform: scale(.98); }
/* Das Theme (Astra) färbt jeden Knopf bei :hover UND :focus weiß auf Orange - nach dem Antippen am Handy bleibt der Fokus stehen.
   Auf der Konzeptseite eigene Zustände (Benni 03.10.: "Maus drüber, und der Text ist einfach weg"; Prüfung werkzeuge/zustand_kontrast.py) */
.ks .ks-chip:hover, .ks .ks-chip:focus { color: var(--ks-tinte); background-color: #fffdf7; border-color: var(--ks-linie); }
.ks .ks-chip:not([aria-pressed="true"]):hover { box-shadow: 0 0 0 2px rgba(47, 125, 87, .35), 0 8px 20px rgba(80, 60, 30, .1); }
.ks .ks-chip[aria-pressed="true"]:hover, .ks .ks-chip[aria-pressed="true"]:focus { background-color: #eef7f0; border-color: var(--ks-blatt); }
.ks .ks-umschalter__knopf:hover, .ks .ks-umschalter__knopf:focus { background-color: transparent; color: var(--ks-tinte); border: 0; }
.ks .ks-umschalter__knopf[aria-pressed="true"]:hover, .ks .ks-umschalter__knopf[aria-pressed="true"]:focus { background-color: var(--ks-tinte); color: #fff; }
.ks .ks-umschalter__knopf[data-kurve="konzept"][aria-pressed="true"]:hover, .ks .ks-umschalter__knopf[data-kurve="konzept"][aria-pressed="true"]:focus { background-color: var(--ks-blatt); }
.ks .ks-video__start:hover, .ks .ks-video__start:focus { background-color: #fff; color: var(--ks-tinte); border: 0; }
.ks-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.ks-antwort__text { overflow: hidden; margin: 0; }
.ks-antwort.ist-offen { grid-template-rows: 1fr; }
.ks-antwort.ist-offen .ks-antwort__text { margin-top: 14px; padding: 18px 20px; border-radius: 4px 22px 22px 22px; background: var(--ks-morgen-hell); border: 2px solid var(--ks-morgen); }
html:not(.ks-js) .ks-antwort { grid-template-rows: 1fr; }

/* 3 Geschichte mit Fotoabzügen */
.ks-geschichte { background: linear-gradient(180deg, #fff 0%, var(--ks-morgen-hell) 100%); }
.ks-geschichte__raster { display: grid; gap: 28px; }
@media (max-width: 979px) {
	.ks-geschichte__text { display: contents; }
	.ks-geschichte__raster > .ks-abzuege { order: 1; margin-bottom: 8px; }
	.ks-geschichte__text > p { order: 2; margin: 0; }
	.ks-geschichte__text > .ks-h2 { order: 0; margin: 0; }
}
.ks-abzuege { position: relative; height: clamp(330px, 96vw, 440px); max-width: 460px; width: 100%; margin: 0 auto; }
.ks .ks-abzug {
	position: absolute; margin: 0; width: 58%; background: #fff; padding: 10px 10px 0; border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 32px rgba(31, 40, 64, .16); transition: transform .5s cubic-bezier(.2, .8, .2, 1), z-index 0s .2s; cursor: pointer;
}
.ks-abzug img { aspect-ratio: 6 / 7; object-fit: cover; width: 100%; }
.ks-abzug figcaption { font-size: clamp(19px, 5vw, 24px); text-align: center; padding: 8px 4px 10px; line-height: 1.15; }
.ks .ks-abzug--vorher { left: 0; top: 0; transform: rotate(-6deg); z-index: 1; }
.ks-abzug--vorher figcaption { color: var(--ks-tinte-weich); }
.ks .ks-abzug--nachher { right: 0; bottom: 0; left: auto; top: auto; transform: rotate(4deg); z-index: 2; }
.ks-abzug--nachher figcaption { color: var(--ks-blatt); }
.ks-abzug.ist-vorn { z-index: 3; transform: rotate(0) scale(1.04); transition: transform .5s cubic-bezier(.2, .8, .2, 1), z-index 0s; }

.ks-ehrlich { border-left: 5px solid var(--ks-sonne); background: #fff; border-radius: 0 16px 16px 0; padding: 14px 16px; font-size: 16px; }
.ks-ehrlich p { margin: 0 !important; }
.ks-autor { font-size: 14px; color: var(--ks-tinte-weich); }
@media (max-width: 979px) { .ks-geschichte__text > .ks-ehrlich, .ks-geschichte__text > .ks-autor { order: 3; } }

/* 4 Blutzucker */
.ks-kurve { background: var(--ks-mittag-hell); }
.ks-kurve__karte { background: #fff; border-radius: 26px; padding: 18px 16px 12px; margin-top: 24px; box-shadow: 0 2px 0 var(--ks-linie); }
.ks-umschalter { display: grid; grid-template-columns: 1fr 1fr; background: var(--ks-mittag-hell); border-radius: 999px; padding: 4px; gap: 4px; }
.ks-umschalter__knopf { appearance: none; border: 0; font: inherit; font-size: 15px; font-weight: 700; padding: 11px 8px; border-radius: 999px; background: transparent; color: var(--ks-tinte-weich); cursor: pointer; transition: background .25s, color .25s; }
.ks-umschalter__knopf[aria-pressed="true"] { background: var(--ks-tinte); color: #fff; }
.ks-umschalter__knopf[data-kurve="konzept"][aria-pressed="true"] { background: var(--ks-blatt); }
.ks-kurve__svg { width: 100%; height: auto; display: block; margin: 14px 0 8px; overflow: visible; }
.ks-kurve__zone { fill: #fde3d7; }
.ks-kurve__zonetext { font: 700 12px var(--ks-text); fill: var(--ks-marke-dunkel); }
.ks-kurve__linie { fill: none; stroke: var(--ks-tinte); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.ks-kurve.ist-konzept .ks-kurve__linie { stroke: var(--ks-blatt); }
.ks-kurve__achse text { font: 600 12px var(--ks-text); fill: var(--ks-tinte-weich); text-anchor: middle; }
.ks-kurve__satz { font-weight: 600; min-height: 3.2em; margin: 0 0 6px !important; }

/* 5 Der Tag */
.ks-tag { background: #fff; padding: clamp(56px, 10vw, 104px) 0 clamp(40px, 8vw, 80px); }
.ks-tag__buehne { position: relative; max-width: 1140px; margin: 0 auto; padding: 0 var(--ks-rand); }
.ks-himmel {
	position: sticky; top: calc(var(--ks-kopf) + 8px); z-index: 3; height: clamp(120px, 32vh, 230px); height: clamp(120px, 32svh, 230px); border-radius: 26px; overflow: hidden;
	box-shadow: 0 10px 30px rgba(31, 40, 64, .14); background: var(--ks-morgen);
	/* Kopfzeile fährt ein: Himmel schneller (0,16 s) als die Kopfzeile (0,25 s), damit sie ihn nie überdeckt - die Kopfzeile läuft als
	   Grafik-Animation, der Himmel im Hauptprozess und hinkte gleich lang bis 14 px hinterher (WebKit-Geräteprüfung 02.10.) */
	transition: top .16s ease-out;
	--h-oben: #ffcf9a; --h-unten: #fff1de; --h-schrift: var(--ks-tinte); --h-huegel: #9ccc8a; --h-huegel2: #c3e0a8; --h-sterne: 0; --h-mond: 0; --h-sonne: 1;
}
/* Handy-Kopfzeile weggefahren (Front F12): Himmel klebt direkt unter der Herbst-Leiste statt 81 px tiefer (Bennis "fette Lücke", 02.10.) */
body:has(#masthead.lcb-kopf-weg) .ks-himmel { top: calc(var(--ks-kopf-weg, var(--ks-kopf)) + 8px); transition: top .25s ease; } /* fährt weg: Nachhinken lässt nur kurz mehr Luft */
.ks-himmel__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Höhe wächst mit der sichtbaren Bildschirmhöhe (svh = mit Safari-Leisten): Pro Max 230 px wie bisher, iPhone SE rund 147 px statt 170 -
   Benni 03.10.: "hat man auch so viel Platz unter dem mitlaufenden Ding auf kleineren Screens?" Kompakte Anzeige, wenn der Kasten flach ist */
@media (max-width: 979px) and (max-height: 640px) {
	.ks-himmel__anzeige { top: 10px; left: 12px; right: 12px; }
	.ks-uhr { font-size: 32px; }
	.ks-phase { font-size: 13px; }
	.ks-budget { padding: 6px 10px; gap: 2px; min-width: 120px; }
	.ks-budget__wert { font-size: 18px; }
	.ks-budget__balken { width: 96px; height: 6px; }
}
.ks-himmel__oben { stop-color: var(--h-oben); }
.ks-himmel__unten { stop-color: var(--h-unten); }
.ks-himmel__bahn { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 3 6; }
.ks-himmel__scheibe { fill: #ffd56b; }
.ks-himmel__sonne { opacity: var(--h-sonne); }
.ks-himmel__mond { opacity: var(--h-mond); }
.ks-himmel__mondscheibe { fill: #fff6d8; }
.ks-himmel__mondschatten { fill: var(--h-oben); }
.ks-himmel__sterne { fill: #fff; opacity: var(--h-sterne); }
.ks-himmel__huegel { fill: var(--h-huegel); }
.ks-himmel__huegel--hinten { fill: var(--h-huegel2); }
.ks-himmel__anzeige { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; color: var(--h-schrift); gap: 12px; }
.ks-uhrblock { display: grid; gap: 2px; }
.ks-phase { font-weight: 800; font-size: 15px; }
.ks-uhr { font-family: var(--ks-display); font-size: clamp(34px, 9vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.ks-budget { display: grid; justify-items: end; gap: 4px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .88); color: var(--ks-tinte); min-width: 136px; }
.ks-budget__name { font-size: 12px; font-weight: 700; color: var(--ks-tinte-weich); }
.ks-budget__wert { font-family: var(--ks-display); font-size: 22px; line-height: 1.05; }
.ks-budget__balken { width: 112px; height: 7px; border-radius: 9px; background: rgba(31, 40, 64, .12); overflow: hidden; }
.ks-budget__balken i { display: block; height: 100%; width: 100%; background: var(--ks-blatt); border-radius: 9px; transform-origin: left center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* Textwechsel in der Anzeige (Uhr, Mahlzeit, Budget) bleiben ein Layout nur dieser Anzeige, nicht der Seite */
.ks-himmel__anzeige { contain: layout style; }
/* Designrunde 2 (Bennis Wahl 02.10.): auf dem Handy fest verankert statt klebend, Zustände setzt ks.js festSetzen() */
.ks-himmel-platz { display: block; }
.ks-himmel.ist-verankert { position: absolute; top: 0 !important; left: var(--ks-rand); right: var(--ks-rand); margin: 0; }
.ks-himmel.ist-verankert.ist-unten { top: auto !important; bottom: 0; }
.ks-himmel.ist-verankert.ist-fest { position: fixed; top: calc(var(--ks-kopf) + 8px) !important; right: auto; }
body:has(#masthead.lcb-kopf-weg) .ks-himmel.ist-verankert.ist-fest { top: calc(var(--ks-kopf-weg, var(--ks-kopf)) + 8px) !important; }
.ks-himmel.ks-sofort { transition: none !important; }

.ks-kapitel { list-style: none; margin: 0; padding: 26px 0 0; counter-reset: none; }
.ks-kapitel__eintrag { margin: 0 0 14vh; display: grid; gap: 18px; opacity: .38; transition: opacity .5s; }
.ks-kapitel__eintrag:last-child { margin-bottom: 6vh; }
.ks-kapitel__eintrag.ist-aktiv { opacity: 1; }
html:not(.ks-js) .ks-kapitel__eintrag { opacity: 1; }
.ks-kapitel__text { background: #fff; border-radius: 22px; padding: 22px 20px 6px; border: 2px solid var(--ks-linie); }
.ks-kapitel__eintrag--pause .ks-kapitel__text { border-style: dashed; background: var(--ks-mittag-hell); }
.ks-teller { margin: 0 auto; width: min(74vw, 300px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px #fff, 0 0 0 12px var(--ks-linie), 0 18px 40px rgba(31, 40, 64, .18); }
.ks-teller img { width: 100%; height: 100%; object-fit: cover; }

/* 6 Kniffe */
.ks-kniffe { background: linear-gradient(180deg, #fff 0%, var(--ks-mittag-hell) 100%); }
.ks-kniffe__raster { display: grid; gap: 18px; margin-top: 8px; }
.ks-kniff { background: #fff; border-radius: 24px; padding: 24px 20px 10px; border: 2px solid var(--ks-linie); }
.ks-kniff--wasser { border-color: #9fd3ea; }
.ks-rechner { background: var(--ks-mittag-hell); border-radius: 18px; padding: 16px; margin: 4px 0 16px; }
.ks-rechner label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.ks-rechner__zeile { display: flex; align-items: center; gap: 14px; }
.ks-rechner input[type=range] { flex: 1; accent-color: #2a8fbd; height: 36px; }
.ks-rechner__kg { font-family: var(--ks-display); font-size: 24px; min-width: 76px; text-align: right; }
.ks-rechner__ergebnis { margin: 8px 0 10px !important; }
.ks-glaeser { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; }
.ks-glaeser i { width: 18px; height: 26px; border: 2px solid #2a8fbd; border-top: 0; border-radius: 2px 2px 6px 6px; background: linear-gradient(0deg, #8fd0ee 72%, transparent 72%); animation: ks-glas .35s ease both; }
@keyframes ks-glas { from { transform: translateY(6px); opacity: 0; } }
.ks-woche { display: flex; gap: 6px; margin: 4px 0 16px; }
.ks-woche span { flex: 1; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 0; border-radius: 10px; background: #f1f3f7; color: var(--ks-tinte-weich); }
.ks-woche .an { background: var(--ks-sonne); color: var(--ks-tinte); }

/* 1b Video (direkt unter dem Einstieg; Sprungziel des Hero-Links, nicht unter der festen Kopfzeile) */
.ks-video { background: var(--ks-mittag-hell); padding: clamp(32px, 7vw, 64px) 0 clamp(40px, 8vw, 80px); scroll-margin-top: var(--ks-kopf, 0px); }
.ks-video__rahmen { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; margin: 18px 0 10px; box-shadow: 0 16px 40px rgba(31, 40, 64, .2); }
.ks-video__rahmen img, .ks-video__rahmen video { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.ks-video__rahmen video { object-fit: contain; background: #000; }
.ks-video__rahmen img { cursor: pointer; }
.ks-video__zertifikat { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 !important; font-size: 14px; line-height: 1.4; color: var(--ks-tinte-weich); }
.ks-video__zertifikat b { color: var(--ks-tinte); font-weight: 700; background: none !important; padding: 0 !important; }
.ks-video__zertifikat .ks-haken { color: var(--ks-blatt); }
.ks-video__dauer { margin-left: 4px; font-weight: 600; color: var(--ks-tinte-weich); }
.ks-video__start { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font: 800 17px var(--ks-text); color: var(--ks-tinte); background: #fff; padding: 14px 22px 14px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.ks-video__dreieck { width: 34px; height: 34px; border-radius: 50%; background: var(--ks-marke); position: relative; }
.ks-video__dreieck::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
/* Handy: Knopf flacher und tiefer, damit er die Beschriftungen "120 kg / 90 kg" im Vorschaubild nicht verdeckt */
@media (max-width: 599px) {
	.ks-video__start { bottom: 8px; gap: 8px; font-size: 15px; padding: 7px 16px 7px 7px; }
	.ks-video__start .ks-video__dreieck { width: 30px; height: 30px; }
	.ks-video__start .ks-video__dreieck::after { left: 11px; top: 8px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
}
/* Flacher PC-Bildschirm (Laptop 1366x657): nach dem Sprung aus dem Einstieg passt das ganze Video samt Knopf ins Bild */
@media (min-width: 980px) and (max-height: 820px) {
	.ks-video { padding-top: 16px; }
	.ks-video__rahmen { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* 8 Kühlschrankzettel */
.ks-blick { background: linear-gradient(180deg, var(--ks-mittag-hell) 0%, #fff 40%); }
.ks-zettel { background: #fffdf3; padding: 30px 22px 18px; border-radius: 6px; position: relative; transform: rotate(-.8deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 20px 40px rgba(31, 40, 64, .14); background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(42, 143, 189, .12) 33px 34px); }
.ks-zettel::before { content: ""; position: absolute; top: -14px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a65, var(--ks-marke) 60%, var(--ks-marke-dunkel)); box-shadow: 0 4px 6px rgba(0, 0, 0, .25); }
.ks-zettel__kopf { color: var(--ks-marke-dunkel); font-size: 22px; margin: 0 0 4px !important; }
.ks-zettel__liste { margin: 0; }
.ks-zettel__liste > div { padding: 12px 0; border-top: 1.5px dashed rgba(31, 40, 64, .18); display: grid; gap: 2px; }
.ks-zettel__liste dt { font-family: var(--ks-hand); font-weight: 700; font-size: 22px; line-height: 1.2; }
.ks-zettel__liste dd { margin: 0; }

/* 9 Stimmen */
.ks-stimmen { background: #fff; }
.ks-stimmen__summe { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.ks-stimmen__summe span { flex: 1 1 240px; }
.ks-stimmen__band { display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 360px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--ks-rand) 22px; margin: 6px calc(-1 * var(--ks-rand)) 4px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.ks-stimme { scroll-snap-align: center; margin: 0; background: var(--ks-morgen-hell); border-radius: 24px; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--ks-morgen); }
.ks-stimme blockquote { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.55; flex: 1; }
.ks-stimme blockquote p { margin: 0; }
.ks-stimme blockquote p::before { content: "„"; }
.ks-stimme blockquote p::after { content: "“"; }
.ks-stimme figcaption { display: grid; gap: 2px; font-size: 15px; }
.ks-stimme figcaption span { display: inline-flex; align-items: center; gap: 4px; color: var(--ks-blatt); font-weight: 600; font-size: 13px; }
.ks-haken { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 10 Konzeptbuch */
.ks-buch { background: radial-gradient(120% 70% at 50% 0%, var(--ks-morgen) 0%, var(--ks-morgen-hell) 55%, #fff 100%); }
.ks-buch__raster { display: grid; gap: 24px; }
.ks-buch__bild { margin: 0 auto; width: min(66vw, 320px); filter: drop-shadow(0 26px 30px rgba(31, 40, 64, .25)); transform: rotate(-4deg); }
.ks-liste { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.ks-liste li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.ks-liste .ks-haken { color: var(--ks-blatt); margin-top: 4px; width: 22px; height: 22px; }
.ks-garantie { padding: 14px 16px; border-radius: 16px; background: var(--ks-blatt-hell); border: 2px solid rgba(47, 125, 87, .3); font-size: 16px; }
.ks-buch__knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 22px 0 18px; }
.ks-unterschrift { font-size: 26px; color: var(--ks-marke-dunkel); transform: rotate(-2deg); transform-origin: left; }

/* 11 Fragen */
.ks-fragen { background: #fff; }
.ks-frage { border-top: 2px solid var(--ks-linie); }
.ks-frage:last-of-type { border-bottom: 2px solid var(--ks-linie); }
.ks-frage summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 18px; padding: 18px 44px 18px 0; position: relative; line-height: 1.35; }
.ks-frage summary::-webkit-details-marker { display: none; }
.ks-frage summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--ks-morgen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23a6431d' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s; }
.ks-frage[open] summary::after { transform: rotate(45deg); }
.ks-frage p { margin: 0 0 20px; }

/* 12 Rezepte, Links */
.ks-rezepte { background: var(--ks-morgen-hell); }
.ks-rezepte__raster { display: grid; gap: 16px; }
.ks-rezept { display: grid; background: #fff; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ks-tinte) !important; box-shadow: 0 2px 0 var(--ks-linie); }
.ks-rezept img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ks-rezept__art { font-size: 13px; font-weight: 800; color: var(--ks-blatt); padding: 14px 18px 0; }
.ks-rezept__titel { font-family: var(--ks-display); font-size: 21px; line-height: 1.2; padding: 2px 18px 18px; }
.ks-rezepte__alle { margin-top: 18px; }
.ks-links { margin-top: 56px; }
.ks-links ul { padding-left: 1.1em; margin: 0; }
.ks-links li { margin-bottom: .6em; }

/* 12b Community */
.ks-community { background: var(--ks-blatt-hell); }
.ks-newsletter { margin: 10px 0 18px; }
.ks-sozial { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ks-sozial li { margin: 0; }
.ks-sozial a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ks-blatt) !important; border: 2px solid rgba(47, 125, 87, .25); }

/* 13 Recht */
.ks-recht { background: #fff; padding-top: 48px; font-size: 15px; color: var(--ks-tinte-weich); }

/* Ab Tablet */
@media (min-width: 760px) {
	.ks-chips { flex-direction: row; flex-wrap: wrap; }
	.ks-chip { flex: 1 1 calc(50% - 10px); }
	.ks-kniffe__raster { grid-template-columns: 1fr 1fr; }
	.ks-rezepte__raster { grid-template-columns: repeat(3, 1fr); }
}
/* PC */
@media (min-width: 980px) {
	.ks { font-size: 19px; }
	.ks-hero__raster { grid-template-columns: 1.25fr .9fr; align-items: center; gap: 56px; }
	.ks-hero__text { order: -1; }
	.ks-hero__bild { grid-template-columns: 1fr; justify-items: center; }
	.ks-bogen { width: min(100%, 380px); }
	.ks-hero__unterschrift { order: -1; justify-self: start; }
	.ks-geschichte__raster { grid-template-columns: .95fr 1.05fr; align-items: center; gap: 64px; }
	.ks-tag__buehne { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
	.ks-himmel { height: min(560px, calc(100vh - var(--ks-kopf) - 60px)); top: calc(var(--ks-kopf) + 30px); }
	.ks-kapitel { padding-top: 0; }
	.ks-kapitel__eintrag { margin-bottom: 30vh; }
	.ks-uhr { font-size: 64px; }
	.ks-buch__raster { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 56px; }
	.ks-buch__bild { width: min(100%, 380px); }
	.ks-buch__knoepfe { flex-direction: row; align-items: center; gap: 28px; }
}

/* Kleine Handys (iPhone 8/SE): Einstieg kompakter */
@media (max-width: 979px) and (max-height: 700px) {
	.ks-hero { padding-top: 18px; }
	.ks-hero__raster { gap: 12px; }
	.ks-bogen { width: clamp(100px, 28vw, 150px); }
	.ks-h1 { font-size: clamp(40px, 11.5vw, 60px); margin-bottom: .25em; }
	.ks-lead { font-size: 17px; line-height: 1.5; }
	.ks-hero__knoepfe { margin: 16px 0 22px; }
}
/* Flache Bildschirme (Laptop 1366x657, Tablet quer): Einstieg kompakter, damit der Hauptknopf im ersten Bildschirm bleibt */
@media (min-width: 980px) and (max-height: 820px) {
	.ks-hero { padding-top: 22px; padding-bottom: 40px; }
	.ks-h1 { font-size: clamp(46px, 5.6vw, 72px); }
	.ks-lead { font-size: 18px; }
	.ks-hero__knoepfe { margin: 18px 0 20px; }
	.ks-bogen { width: min(100%, 300px); }
}
@media (min-width: 760px) and (max-width: 979px) and (max-height: 820px) {
	.ks-hero__raster { grid-template-columns: auto 1fr; align-items: center; column-gap: 32px; }
	.ks-hero__bild { grid-template-columns: 1fr; }
	.ks-h1 { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.ks *, .ks *::before, .ks *::after { animation: none !important; transition: none !important; }
	.ks-hero__sonne { transform: translate(-50%, -38%); }
}

/* ================= Richtung B "Notizbuch": Bennis Küchentisch - Papier, Handschrift, Klebeband, Textmarker ================= */
.lcb-ks-richtung-b .ks {
	--ks-papier: #fbf6ec;
	--ks-morgen-hell: #fbf3e4;
	--ks-mittag-hell: #f3f1e7;
	--ks-display: "KS Kalam", "Comic Sans MS", cursive;
	background: var(--ks-papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lcb-ks-richtung-b .ks-h1, .lcb-ks-richtung-b .ks-h2, .lcb-ks-richtung-b .ks-h3 { font-weight: 700; letter-spacing: 0; }
.lcb-ks-richtung-b .ks-h1 { font-size: clamp(50px, 14.5vw, 104px); line-height: .95; transform: rotate(-1.5deg); transform-origin: left; }
.lcb-ks-richtung-b .ks-h2 { font-size: clamp(34px, 8.4vw, 56px); line-height: 1.05; }
.lcb-ks-richtung-b .ks-h3 { font-size: clamp(26px, 6.2vw, 34px); line-height: 1.1; }
.lcb-ks-richtung-b .ks strong { background: linear-gradient(transparent 58%, rgba(255, 214, 102, .75) 58%, rgba(255, 214, 102, .75) 92%, transparent 92%); padding: 0 .08em; }
.lcb-ks-richtung-b .ks-hero__himmel { background: transparent; }
.lcb-ks-richtung-b .ks-hero__sonne { background: radial-gradient(circle, rgba(255, 214, 102, .45) 0%, rgba(255, 214, 102, 0) 60%); }
.lcb-ks-richtung-b .ks-bogen { border-radius: 4px; box-shadow: 0 0 0 8px #fff, 0 12px 26px rgba(80, 60, 30, .22); transform: rotate(-3deg); overflow: visible; position: relative; }
.lcb-ks-richtung-b .ks-bogen img { border-radius: 2px; }
/* Gedrehter Fotoabzug mit 8-px-Rahmen ragt in den Spalt: mehr Luft zu Gruß und Sternen (Benni 02.10.) und zur Überschrift darunter */
.lcb-ks-richtung-b .ks-hero__bild { column-gap: 26px; }
@media (max-width: 979px) and (min-height: 701px) { .lcb-ks-richtung-b .ks-hero__raster { row-gap: 30px; } }
.lcb-ks-richtung-b .ks-bogen::before, .lcb-ks-richtung-b .ks-abzug::before, .lcb-ks-richtung-b .ks-zettel::after {
	content: ""; position: absolute; top: -16px; left: 50%; width: 92px; height: 26px; margin-left: -46px; z-index: 2;
	background: rgba(196, 85, 42, .28); transform: rotate(-4deg); border-left: 2px dashed rgba(255, 255, 255, .5); border-right: 2px dashed rgba(255, 255, 255, .5);
}
.lcb-ks-richtung-b .ks-zettel::before { display: none; }
.lcb-ks-richtung-b .ks-zettel::after { background: rgba(47, 125, 87, .25); }
.lcb-ks-richtung-b .ks-knopf { border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; }
.lcb-ks-richtung-b .ks-kennst, .lcb-ks-richtung-b .ks-tag, .lcb-ks-richtung-b .ks-fragen, .lcb-ks-richtung-b .ks-stimmen, .lcb-ks-richtung-b .ks-recht { background: transparent; }
.lcb-ks-richtung-b .ks-geschichte, .lcb-ks-richtung-b .ks-kniffe, .lcb-ks-richtung-b .ks-blick, .lcb-ks-richtung-b .ks-buch { background: transparent; }
.lcb-ks-richtung-b .ks-kurve, .lcb-ks-richtung-b .ks-video, .lcb-ks-richtung-b .ks-rezepte, .lcb-ks-richtung-b .ks-community { background: rgba(255, 255, 255, .45); }
.lcb-ks-richtung-b .ks-chip, .lcb-ks-richtung-b .ks-kapitel__text, .lcb-ks-richtung-b .ks-kniff, .lcb-ks-richtung-b .ks-kurve__karte, .lcb-ks-richtung-b .ks-rezept {
	border-radius: 3px; border: 0; background: #fffdf7; box-shadow: 0 1px 1px rgba(80, 60, 30, .1), 0 8px 20px rgba(80, 60, 30, .1);
	background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(42, 143, 189, .1) 31px 32px);
}
.lcb-ks-richtung-b .ks-kniff:nth-child(odd), .lcb-ks-richtung-b .ks-kapitel__eintrag:nth-child(odd) .ks-kapitel__text { transform: rotate(-.6deg); }
.lcb-ks-richtung-b .ks-kniff:nth-child(even), .lcb-ks-richtung-b .ks-kapitel__eintrag:nth-child(even) .ks-kapitel__text { transform: rotate(.5deg); }
.lcb-ks-richtung-b .ks-chip[aria-pressed="true"] { background-color: #eef7f0; box-shadow: 0 0 0 2px var(--ks-blatt), 0 8px 20px rgba(80, 60, 30, .1); }
.lcb-ks-richtung-b .ks-himmel { border-radius: 4px; box-shadow: 0 0 0 8px #fff, 0 14px 30px rgba(80, 60, 30, .22); }
.lcb-ks-richtung-b .ks-teller { box-shadow: 0 0 0 10px #fff, 0 16px 34px rgba(80, 60, 30, .22); }
.lcb-ks-richtung-b .ks-stimme { border-radius: 3px; background: #fffdf7; border: 0; box-shadow: 0 8px 20px rgba(80, 60, 30, .12); }
.lcb-ks-richtung-b .ks-stimme blockquote { font-family: var(--ks-hand); font-size: 20px; line-height: 1.4; }
.lcb-ks-richtung-b .ks-uhr, .lcb-ks-richtung-b .ks-budget__wert, .lcb-ks-richtung-b .ks-rechner__kg, .lcb-ks-richtung-b .ks-rezept__titel { font-weight: 700; }
.lcb-ks-richtung-b .ks-link { text-decoration-style: wavy; text-decoration-thickness: 2px; }
@media (min-width: 760px) and (max-height: 820px) {
	.lcb-ks-richtung-b .ks-h1 { font-size: clamp(46px, 5.4vw, 70px); }
}
@media (max-width: 979px) and (max-height: 700px) {
	.lcb-ks-richtung-b .ks-h1 { font-size: clamp(40px, 11vw, 58px); }
}