/* LeibSpeisen – Startseite (docs/STARTSEITE-KONZEPT-2026-11.md): sechs Abschnitte, mobil zuerst (375–430 px), ab 960 px breiter.
   Bausteine aus _bausteine.php (Hero, Beispielwoche, Rechnet) nutzen dieselben Klassen auf den Landingpages.
   Typografie mobil: Headline 34–38 px, Fließtext 17 px, nichts unter 13 px. Bilder mit festem Seitenverhältnis (kein CLS). */

.hp-in { max-width: 1160px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.hp-sec { padding: 56px 0; scroll-margin-top: 72px; }
/* Abschnitte unter dem Hero erst rendern, wenn sie in die Nähe kommen: Chrome lädt lazy-Bilder sonst schon 1.250–2.500 px
   vorher (gemessen 2.11.2026: 13 Bilder, rund 1,3 MB ohne Scrollen). „auto“ merkt sich die echte Höhe (kein CLS danach). */
.hp-sec { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
/* Kontrast WCAG AA: Kicker in warmText (hell #9A3F12, dunkel #FFB48F), Links auf getönten Flächen eine Stufe dunkler */
:root { --linkTief: #12662F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --linkTief: var(--accent); } }
:root[data-theme="dark"] { --linkTief: var(--accent); }
.hp-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warmText); }
.hp-head { max-width: 720px; margin-bottom: 24px; }
.hp-head h2, .hp-endtext h2 { margin: 0; font: 800 30px/1.08 var(--display); letter-spacing: -.03em; hyphens: manual; }
.hp-hero2 h1 { hyphens: manual; }
.hp-sub { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--text2); }
.hp-sub a, .hp-note a, .hp-mehr a, .hp-qa a, .hp-preis1 a, .hp-ktext p a { color: var(--linkTief); }
.hp-ktext p a, .hp-preis1 a, .hp-qa p a, .hp-sub a { text-decoration: underline; text-underline-offset: 3px; }
.hp-hero2 .btn.link, .hp-ende .btn.link, .hp-gaeste a, .hp-dp a { color: var(--linkTief); }
.hp-gaeste a { text-decoration: underline; text-underline-offset: 3px; }
.hp-note { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text2); }
.hp-mehr { margin: 16px 0 0; font-size: 16px; font-weight: 600; }
.hp-h3 { margin: 40px 0 14px; font: 700 22px/1.2 var(--display); letter-spacing: -.01em; }
.site .hp-sec a:focus-visible, .site .hp-sec button:focus-visible, .site .hp-hero a:focus-visible, .site .hp-hero button:focus-visible,
.hp-sec summary:focus-visible, .hp-karussell:focus-visible, .hp-dp input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 0; }

/* --- 1 Hero: Text, Chips, Wochenkarte, Knopf ----------------------------------------------------- */
.hp-hero2 { padding: 24px 0 40px; background: var(--surface2); }
.hp-herogrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.hp-herotext, .wk-box, .wk, .hp-heroacts { min-width: 0; }
.hp-hero2 .kicker { margin: 0 0 12px; }
.hp-hero2 h1 { margin: 0; font: 800 clamp(34px, 9.6vw, 38px)/1.05 var(--display); letter-spacing: -.03em; max-width: 15em; }
.hp-lead { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--text2); max-width: 36em; }
@media (max-width: 599px) { .hp-lead2 { display: none; } }
/* Chips: wischbare Reihe, angeschnitten am Rand */
.hp-stile { display: flex; gap: 8px; margin: 18px -16px 0; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.hp-stile::-webkit-scrollbar { display: none; }
.hp-stil { flex: none; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--lineStrong); border-radius: 999px; background: var(--surface);
  color: var(--text); font: 600 16px/1 var(--font); cursor: pointer; scroll-snap-align: start; }
.hp-stil[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accentText); }
/* Wochenkarte als gedruckter Wochenplan (Nutzerwunsch 2.11.2026, Vorbild Bild „start-wochenkarte“): heller Bogen mit grünem
   Kopf, gelbem Marker, grünen Tagesreitern und kleinen Fotos (240 px, rezeptbild.php). Bleibt auch im Dunkelmodus Papier,
   nur gedämpft. Mobil Zeilen, ab 960 px fünf Spalten. Feste Maße, damit der Chip-Wechsel nichts verschiebt. */
.wk { --wkPapier: #FFFDF8; --wkText: #1F2421; --wkLeise: #5C625E; --wkLinie: #E4DFD3; --wkGruen: #17803D; --wkMarker: #F5C518;
  position: relative; background: var(--wkPapier); color: var(--wkText); border: 1px solid #E8E2D4; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(31,36,33,.08), 0 14px 32px rgba(31,36,33,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wk { --wkPapier: #F1EDE3; --wkLinie: #D9D3C5; --wkMarker: #E8C04A; border-color: #3A4A3F; } }
:root[data-theme="dark"] .wk { --wkPapier: #F1EDE3; --wkLinie: #D9D3C5; --wkMarker: #E8C04A; border-color: #3A4A3F; }
.wk-woche { animation: wk-ein .2s ease-out; }
@keyframes wk-ein { from { opacity: 0; } to { opacity: 1; } }
.wk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 12px 16px 10px;
  background: var(--wkGruen); color: #fff; }
.wk-titel { margin: 0; font: 800 20px/1.1 var(--display); letter-spacing: -.02em; }
.wk-marker { position: relative; margin-left: 4px; padding: 0 4px; color: #1F2421; font-weight: 800;
  background: linear-gradient(transparent 18%, var(--wkMarker) 18%, var(--wkMarker) 88%, transparent 88%); border-radius: 3px; }
.wk-meta { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); font-variant-numeric: tabular-nums; }
.wk-tage { list-style: none; margin: 0; padding: 4px 12px; }
.wk-tag + .wk-tag { border-top: 1px dashed var(--wkLinie); }
.wk-link { display: grid; grid-template-columns: 40px 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 6px 0;
  color: inherit; text-decoration: none; }
.wk-reiter { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--wkGruen); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wk-foto { display: block; width: 64px; height: 44px; object-fit: cover; border-radius: 8px; background: #E7E3D9; }
.wk-name { min-width: 0; font: 700 15px/1.25 var(--font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-zeit { font-size: 13px; font-weight: 600; color: var(--wkLeise); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.wk-link { text-decoration: none; }
a.wk-link:hover .wk-name { color: var(--wkGruen); }
a.wk-link:focus-visible { outline: 2px solid var(--wkGruen); outline-offset: 2px; border-radius: 8px; }
.wk-fuss { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--wkLinie);
  font-size: 14px; color: var(--wkLeise); }
.wk-fuss b { color: var(--wkText); font-variant-numeric: tabular-nums; }
.wk-ico { flex: none; color: var(--wkGruen); }
/* Hero-Karte als Beispielwoche (Startseite, .wk-ia): Steuerung über der Karte, Tauschen je Tag, mobil drei Tage, Liste zum Aufklappen */
.wk-box { scroll-margin-top: 72px; }
.wk-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; font-size: 14px; }
.wk-seg { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
.wk-seg legend { float: left; margin-right: 6px; font-weight: 600; color: var(--text2); }
.wk-seg label { position: relative; }
.wk-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wk-seg label span { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--lineStrong); border-radius: 12px; background: var(--surface);
  font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-seg label input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.wk-seg input:focus-visible + span, .wk-sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-sel { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text2); }
.wk-sel select { min-height: 44px; max-width: 180px; padding: 0 10px; border: 1.5px solid var(--lineStrong); border-radius: 12px; background: var(--surface);
  color: var(--text); font: 600 15px var(--font); }
.wk-ia .wk-woche[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
.wk-ia .wk-tag { display: flex; align-items: center; gap: 6px; }
.wk-ia .wk-link { flex: 1 1 auto; min-width: 0; grid-template-columns: 36px 56px minmax(0, 1fr); grid-template-areas: "r f n" "r f z"; row-gap: 0; }
.wk-ia .wk-reiter { grid-area: r; }
.wk-ia .wk-foto { grid-area: f; width: 56px; height: 40px; }
.wk-ia .wk-name { grid-area: n; align-self: end; -webkit-line-clamp: 1; }
.wk-ia .wk-zeit { grid-area: z; align-self: start; }
.wk-tausch { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--wkLinie); border-radius: 10px; background: transparent; color: var(--wkGruen); font: 700 14px var(--font); cursor: pointer; }
.wk-tausch[aria-expanded="true"] { background: var(--wkGruen); border-color: var(--wkGruen); color: #fff; }
.wk-tausch:focus-visible, .wk-mehr:focus-visible, .wk-fuss:focus-visible, .wk-alts button:focus-visible { outline: 2px solid var(--wkGruen); outline-offset: 2px; }
.wk-tt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wk-tag.getauscht .wk-name { color: var(--wkGruen); }
.wk-unten { display: flex; align-items: stretch; border-top: 1px solid var(--wkLinie); }
.wk-mehr { flex: none; min-height: 48px; padding: 0 14px; border: 0; border-left: 1px solid var(--wkLinie); background: transparent;
  color: var(--wkGruen); font: 700 15px var(--font); white-space: nowrap; cursor: pointer; }
.wk-ia .wk-woche:not(.alle) .wk-spaet { display: none; }
.wk-alts { margin: 0 12px 10px; padding: 10px 12px; border-radius: 12px; background: #F4F0E6; font-size: 15px; }
.wk-alts p { margin: 0; }
.wk-althead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.wk-althead .btn { min-height: 44px; color: var(--wkGruen); }
.wk-altlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wk-altlist button { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 4px;
  border: 1px solid var(--wkLinie); border-radius: 10px; background: var(--wkPapier); color: var(--wkText); text-align: left; font: inherit; cursor: pointer; }
.wk-altlist img, .wk-altlist .wk-foto { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; }
.wk-altlist b { display: block; font-size: 15px; line-height: 1.25; }
.wk-altlist small { color: var(--wkLeise); font-size: 13px; }
button.wk-fuss { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 8px 12px 8px 16px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; }
.wk-pico { display: none; }
/* Mobil muss „Meinen Plan starten“ in den ersten Bildschirm – gemessen am sichtbaren Bereich in Safari (390 × 664 abzüglich
   Navigation unten, Prüfung 4.11.2026; vorher lag der Knopf bei 685 px): Überschrift dreizeilig, ohne Schwerpunkt-Auswahl
   (die Stil-Chips decken Abnehmen und Proteinreich ab), kompakte Karte */
@media (max-width: 599px) {
  .hp-hero2 { padding-top: 12px; }
  .hp-hero2 .kicker { margin-bottom: 6px; }
  .hp-hero2 h1 { font-size: 27px; }
  .wk-ctl { display: none; }
  .hp-lead { font-size: 15px; line-height: 1.4; }
  .hp-lead { margin-top: 6px; }
  .hp-stile { margin-top: 10px; }
  .hp-herogrid { gap: 10px; }
  .hp-hero2 .hp-cta { padding-top: 12px; padding-bottom: 12px; }
  /* darunter straffer (8,4 → ~7 Bildschirme): Gästerechner, Schlussbild und die Unterzeilen von Feiern/Frisch nur ab 600 px –
     sie stehen weiter im HTML (Suche), die Karussells zeigen dasselbe in Bildern */
  .hp-gaeste, .hp-endbild, .hp-feiern .hp-sub, .hp-frisch .hp-sub { display: none; }
  .wk-ctl { flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; }
  .wk-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wk-pico { display: block; color: var(--text2); }
  .wk-seg legend { display: flex; align-items: center; margin-right: 2px; }
  .wk-sel { flex: 1 1 auto; min-width: 0; }
  .wk-sel select { width: 100%; max-width: none; }
  .wk-kopf { flex-wrap: wrap; row-gap: 0; padding: 9px 14px 8px; }   /* „KW 45 · 4 Personen, 2 davon Kinder“ lief rechts aus der Karte (4.11.2026) */
  .wk-titel { font-size: 18px; white-space: nowrap; }
  .wk-meta { white-space: nowrap; }
  .wk-tage { padding: 2px 12px; }
  .wk-ia .wk-link { min-height: 48px; padding: 3px 0; }
  .wk-ia .wk-foto { width: 52px; height: 38px; }
  .wk-ia .wk-link { grid-template-columns: 36px 52px minmax(0, 1fr); }
}
.wk-pfeil { margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--wkGruen); border-bottom: 2px solid var(--wkGruen); transform: rotate(45deg) translateY(-3px); }
.wk-fuss[aria-expanded="true"] .wk-pfeil { transform: rotate(-135deg) translateY(-2px); }
.wk-liste { padding: 0 16px 14px; font-size: 14px; }
.wk-hinweis, .wk-legende { margin: 0 0 8px; color: var(--wkLeise); font-size: 13px; line-height: 1.45; }
.wk-legende { margin: 10px 0 0; }
.wk-gang { margin: 10px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wkGruen); }
.wk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 72px 88px; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--wkLinie); font-variant-numeric: tabular-nums; }
.wk-zeile span:nth-child(n+2) { text-align: right; }
.wk-zeile small { display: block; color: var(--wkLeise); font-size: 12px; }
.wk-zkopf { font-size: 12px; font-weight: 700; color: var(--wkLeise); border-bottom: 1px solid var(--wkLinie); }
/* Gerichtsnamen einheitlich, ohne Unterstreichung: 700 bis 1000 px zweizeilig mit Ellipse */
@media (min-width: 700px) and (max-width: 999px) { .wk-name, .wk-ia .wk-name { -webkit-line-clamp: 2; } }
/* Wochenkarte als Ausdruck mit fünf Spalten erst ab 900 px, darunter die Listenform wie mobil */
@media (min-width: 900px) {
  .wk-kopf { padding: 14px 20px 12px; }
  .wk-titel { font-size: 24px; }
  .wk-tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 14px 12px 6px; }
  .wk-tag + .wk-tag { border-top: 0; border-left: 1px dashed var(--wkLinie); }
  .wk-link, .wk-ia .wk-link { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: none; align-content: start; gap: 8px; min-height: 0; padding: 0 8px 10px; }
  .wk-ia .wk-reiter, .wk-ia .wk-foto, .wk-ia .wk-name, .wk-ia .wk-zeit { grid-area: auto; align-self: auto; }
  .wk-reiter { height: 24px; }
  .wk-foto, .wk-ia .wk-foto { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .wk-name, .wk-ia .wk-name { font-size: 14px; -webkit-line-clamp: 2; min-height: 2.5em; }
  /* Schreiblinien wie auf dem Ausdruck */
  .wk-zeit { padding-top: 6px; background: repeating-linear-gradient(transparent 0 15px, var(--wkLinie) 15px 16px); background-size: 100% 32px; background-repeat: no-repeat; background-position: 0 100%; min-height: 32px; }
  .wk-ia .wk-tag { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .wk-ia .wk-tausch { margin: 0 8px; }
  .wk-ia .wk-woche:not(.alle) .wk-spaet { display: flex; }
  .wk-mehr { display: none; }
  .wk-lang { position: static; }
  .wk-tt { position: static; width: auto; height: auto; clip: auto; }
  .wk-ia .wk-tausch { padding: 0 4px; font-size: 13px; }
  .wk-ia .wk-tausch > span[aria-hidden] { display: none; }
}
@media (min-width: 1000px) { .wk-name, .wk-ia .wk-name { -webkit-line-clamp: 3; min-height: 3.75em; } }
.hp-heroacts { display: grid; gap: 10px; justify-items: center; }
.hp-heroacts .hp-cta { width: 100%; justify-content: center; }
.hp-heroacts .btn.link { min-height: 44px; }
.hp-heroacts .hp-note { text-align: center; }
.hp-wlform { width: 100%; }

/* --- Karussell (Abschnitte 3, 4, 5): nativ wischen, nächste Karte angeschnitten ------------------------------ */
.hp-karussell { display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 12px; margin: 0 -16px; padding: 2px 16px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
.hp-karussell::-webkit-scrollbar { display: none; }
.hp-karte { display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--text); text-decoration: none; }
.hp-kbild, .hp-karte picture { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--ph); }
.hp-karte picture img { width: 100%; height: 100%; object-fit: cover; }
.hp-ktext { display: grid; gap: 4px; padding: 14px 16px 16px; align-content: start; }
.hp-ktext h3, .hp-ktext b { margin: 0; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.hp-ktext p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--text2); }
.hp-ktext > span { font-size: 15px; color: var(--text2); }
.hp-saison { justify-self: start; padding: 2px 8px; border-radius: 6px; background: #F5C518; color: #1F2421 !important; font-size: 13px !important;
  font-weight: 700; letter-spacing: .04em; }
.hp-klink { margin-top: 6px; font-weight: 700; color: var(--accent) !important; }
a.hp-karte:hover b { color: var(--accent); }
.hp-rkar { grid-auto-columns: 62%; }
.hp-rkarte .hp-ktext b { font-size: 17px; }

/* --- 3 Rechnet: vier gleich hohe Karten, Bild 4:3, Text oben bündig, Link unten --------------------------------- */
.hp-vier .hp-karte { height: 100%; }
.hp-rechnet .hp-kbild, .hp-rechnet .hp-karte picture { aspect-ratio: 4 / 3; }
.hp-vier .hp-ktext { flex: 1 1 auto; }
.hp-vier .hp-klink { margin: 0; padding: 0 16px 16px; display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.hp-vier .hp-klink:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-ktext b.hp-zahl { font: 800 22px/1.2 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.hp-quelle { font-size: 13px !important; line-height: 1.45 !important; }

/* --- 4 Gästezahl-Teaser ---------------------------------------------------------------------------------------- */
.hp-gaeste { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface2); }
.hp-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; }
.hp-gaeste .stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--lineStrong); border-radius: 12px; background: var(--surface); }
.hp-gaeste .stepper button { width: 44px; height: 44px; border: 0; background: none; color: var(--text); font-size: 22px; cursor: pointer; border-radius: 10px; }
.hp-gaeste output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-gl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; }
@media (min-width: 600px) { .hp-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-gl b { white-space: nowrap; }
.hp-gl li { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; border-bottom: 1px dashed var(--lineStrong); padding: 4px 0; }
.hp-gl b { font-variant-numeric: tabular-nums; }

/* --- 5 Diätplaner-Teaser ----------------------------------------------------------------------------------------- */
.hp-dpsec { padding: 24px 0; }
.hp-dpsec .hp-in { max-width: 880px; }
.hp-dp { display: grid; gap: 14px; padding: 22px 18px; border-radius: var(--rl); background: var(--surface2); }
.hp-dptext .kicker { margin: 0 0 8px; color: #1F2421; }
.hp-dptext h2 { margin: 0; font: 800 26px/1.12 var(--display); letter-spacing: -.02em; }
/* Frage 2, 3 und der Knopf erst nach der ersten Antwort (ohne :has-Unterstützung gleich alle) */
@supports selector(:has(*)) { .hp-dp:not(:has(input[name="ziel"]:checked)) .hp-dpspaet { display: none; } }
.hp-dptext p { margin: 6px 0 0; font-size: 16px; color: var(--text2); }
.hp-dp fieldset { margin: 0; padding: 0; border: 0; }
.hp-dp legend { margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.hp-dpopt { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-dpopt label { position: relative; }
.hp-dpopt input { position: absolute; opacity: 0; inset: 0; }
.hp-dpopt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--lineStrong); border-radius: 999px;
  background: var(--surface); font-size: 15px; font-weight: 600; cursor: pointer; }
.hp-dpopt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accentText); }
.hp-dp .btn { justify-self: start; }

/* --- 6 Abschluss ------------------------------------------------------------------------------------------------- */
.hp-ende { background: var(--surface2); }
.hp-endgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hp-preis1 { margin: 12px 0 18px; font-size: 18px; line-height: 1.5; }
.hp-qa details { border-bottom: 1px solid var(--line); }
.hp-qa details:first-child { border-top: 1px solid var(--line); }
.hp-qa summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; font-weight: 600; font-size: 17px; min-height: 44px; box-sizing: border-box; }
.hp-qa summary::-webkit-details-marker { display: none; }
.hp-qa summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--accent); }
.hp-qa details[open] summary::after { content: "−"; }
.hp-qa p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--text2); }
.hp-ende .hp-acts .btn { flex: 1 1 100%; justify-content: center; }
.hp-nl { margin-top: 28px; }
.hp-nl h3 { margin: 0; font: 700 20px/1.2 var(--display); }
.hp-nl > p { margin: 4px 0 10px; color: var(--text2); }
.hp-endbild { margin: 0; }
.hp-ebild, .hp-endbild picture { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--rl); }
.hp-endbild picture img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rl); }

/* Feste Leiste „Meinen Plan starten“: mobil schmal direkt über der unteren Navigation (Nutzerentscheidung 3.11.2026, vorher
   nur Desktop), nur nach dem Hero und solange kein anderer Startknopf im Bild ist (start.js) */
.hp-leiste { display: none; }
@media (max-width: 959px) {
  .hp-leiste { position: fixed; z-index: 44; left: 0; right: 0; bottom: calc(var(--navh, 0px) + env(safe-area-inset-bottom)); display: flex;
    padding: 8px 16px; border-top: 1px solid var(--line); background: var(--surface); }
  body:not(.mitnav) .hp-leiste { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .hp-leiste > span { display: none; }
  .hp-leiste .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .hp-leiste[hidden] { display: none; }
}
/* Hero-Karte nach dem Ausprobieren: Hauptknopf einmal kurz hervorheben (start.js) */
.hp-cta-so { animation: hp-so .5s ease-out; }
@keyframes hp-so { 50% { transform: scale(1.03); } }

/* Beispielwoche: Abstand zum Knopf */
.hp-bcta { display: grid; gap: 10px; margin-top: 20px; }
.hp-bcta .btn { justify-self: stretch; justify-content: center; }

/* --- Desktop ------------------------------------------------------------------------------------------------------ */
@media (min-width: 960px) {
  .hp-in { padding: 0 32px; }
  .hp-sec { padding: 88px 0; }
  .hp-head h2, .hp-endtext h2 { font-size: 42px; }
  .hp-hero2 { padding: 56px 0 64px; }
  .hp-herogrid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "text karte" "acts karte"; column-gap: 56px; row-gap: 24px; align-items: start; }
  .hp-herotext { grid-area: text; }
  .wk-box { grid-area: karte; }
  .wk { transform: rotate(-.6deg); }
  .hp-heroacts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .hp-heroacts .hp-cta { width: auto; }
  .hp-heroacts .hp-note, .hp-heroacts .hp-wlform, .hp-heroacts .wlmsg { flex: 1 1 100%; text-align: left; }
  .hp-hero2 h1 { font-size: 60px; }
  .hp-stile { flex-wrap: wrap; margin: 22px 0 0; padding: 0; overflow: visible; }
  .hp-karussell { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; gap: 20px; }
  .hp-rkar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-dpsec { padding: 40px 0; }
  .hp-dp { padding: 28px 32px; }
  .hp-dptext h2 { font-size: 32px; }
  .hp-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-endgrid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
  .hp-ende .hp-acts .btn { flex: 0 0 auto; }
  .hp-bcta { grid-template-columns: auto 1fr; align-items: center; }
  .hp-bcta .btn { justify-self: start; }
  .hp-leiste { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px;
    padding: 10px 10px 10px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow);
    font-weight: 600; }
  .hp-leiste[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wk { transform: none !important; } .wk-woche, .hp-cta-so { animation: none; } .hp-karussell { scroll-behavior: auto; } }
@media print { .hp-leiste, .hp-stile, .hp-dp { display: none !important; } }

/* Beweise (LS\Beweise): Zahlkarte ohne Foto, Stimmen nur freigegeben, Zähler erst ab Schwelle */
.hp-zahlkarte { background: var(--surface2); }
.hp-zahl { margin: 8px 0 0 !important; font-size: 15px; color: var(--text2); }
.hp-zahl b { display: block; font: 800 34px/1.05 var(--display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.hp-zahl2 { margin-top: 18px !important; padding-top: 14px; border-top: 1px dashed var(--lineStrong); }
.hp-stimmen { display: grid; gap: 14px; margin-top: 24px; }
.hp-stimme { margin: 0; padding: 18px 20px; border-left: 4px solid #F5C518; border-radius: 0 var(--r) var(--r) 0; background: var(--surface); }
.hp-stimme blockquote { margin: 0; }
.hp-stimme p { margin: 0; font: 600 18px/1.45 var(--font); }
.hp-stimme figcaption { margin-top: 8px; font-size: 14px; color: var(--text2); }
.hp-zaehler { font-weight: 700; color: var(--text) !important; }
@media (min-width: 960px) { .hp-stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hp-karussell:has(.hp-zahlkarte) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================================================================================================================
   Startseite 6.11.2026 (docs/STARTSEITE-ACHT-2026-11.md): Kopf mit Satz, Bild und zwei Knöpfen, darunter acht Abschnitte.
   Mobil zuerst (375–430 px), ab 960 px Bild neben Text. Die Klassen oben (Hero mit Karte, Rechnet) bleiben für die Landingpages.
   ================================================================================================================ */
/* --- Kopf ------------------------------------------------------------------------------------------------------ */
.hk { padding: 16px 0 28px; background: var(--surface2); }
.hk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hk .kicker { margin: 0 0 8px; }
.hk h1 { margin: 0; font: 800 clamp(28px, 7.6vw, 34px)/1.08 var(--display); letter-spacing: -.03em; hyphens: manual; max-width: 14em; }
.hk-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.hk-liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--text2); }
.hk-liste b { color: var(--text); font-weight: 700; }
.hk-ico { width: 24px; height: 24px; color: var(--accent); }
.hk-bild { margin: 4px 0 0; order: 3; }      /* mobil unter den Knöpfen: „Jetzt loslegen“ bleibt im ersten Bildschirm (375 × 812: bei 396 px) */
.hk-img, .hk-bild picture { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: var(--rl); background: var(--ph); }
.hk-bild picture img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rl); }
.hk-bild:empty { display: none; }
.hk-acts { display: grid; gap: 10px; }
.hk-acts .btn { width: 100%; justify-content: center; }
.hk-acts .hp-note { text-align: center; }
.hk-acts .hp-wlform { width: 100%; }
/* Kopf-Slider (9.11.2026): drei Szenen mit aufgelegten Karten, das Bild trägt die Aussage. Mobil: Slider direkt unter der Überschrift, Knopf darunter,
   Aufzählung nur am Desktop (dort steht sie neben dem Slider). */
.hk-liste { display: none; }
.hk-bild { order: 1; margin: 0; }
.hk-acts { order: 2; }
.hk-spur { position: relative; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hk-spur::-webkit-scrollbar { display: none; }
.hk-slide { position: relative; flex: 0 0 92%; margin: 0; scroll-snap-align: start; aspect-ratio: 6 / 5; border-radius: var(--rl); overflow: hidden; background: var(--ph); container-type: inline-size; }
/* gedruckte Wochenkarte mit Logo auf dem Tisch-Foto (Slide 1): Maße in cqw, damit sie mobil und am Desktop gleich aussieht */
.hkp { position: absolute; left: 50%; top: 3.5%; width: 60cqw; transform: translateX(-50%) rotate(-1.5deg); font-size: 3.7cqw; line-height: 1.2; background: #FFFDF8; color: #1F2421;
  border-radius: .7em; overflow: hidden; box-shadow: 0 1px 2px rgba(31, 36, 33, .12), 0 .9em 1.8em rgba(31, 36, 33, .28); }
.hkp-logo { display: block; height: 1.7em; width: auto; margin: .3em auto .25em; }
.hkp-band { margin: 0; padding: .25em .7em; background: #17803D; color: #fff; font: 800 1em/1.2 var(--display); letter-spacing: -.01em; }
.hkp-marker { margin-left: .2em; padding: 0 .25em; border-radius: .2em; background: #F5C518; color: #1F2421; }
.hkp-tage { list-style: none; margin: 0; padding: .1em .55em .2em; }
.hkp-tage li { display: grid; grid-template-columns: 2.2em 3.2em minmax(0, 1fr); gap: .5em; align-items: center; height: 2.1em; }
.hkp-tage li + li { border-top: 1px dashed #E4DFD3; }
.hkp-reiter { display: grid; place-items: center; height: 1.4em; border-radius: .3em; background: #17803D; color: #fff; font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hkp-tage img { position: static; width: 3.2em; height: 1.6em; object-fit: cover; border-radius: .3em; background: #E7E3D9; }
.hkp-tage b { min-width: 0; font: 700 .8em/1.15 var(--font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hk-slide > picture, .hk-slide > picture img, .hk-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.hk-oben { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.hk-pille, .hk-woche span { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 5px rgba(0, 0, 0, .2); font: 700 13px/1 var(--display); color: var(--text); }
.hk-woche { gap: 4px; flex-wrap: nowrap; }
.hk-woche span { flex: 1 1 0; padding: 6px 0; text-align: center; font-size: 12px; }
.hk-karte { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); font-size: 14px; line-height: 1.3; color: var(--text2); }
.hk-karte b { display: block; color: var(--text); font: 800 16px/1.2 var(--display); letter-spacing: -.01em; }
.hk-punkte { display: flex; justify-content: center; gap: 0; margin-top: 4px; }
.hk-punkt { box-sizing: content-box; width: 8px; height: 8px; padding: 8px; border: 0; border-radius: 50%; background: currentColor; background-clip: content-box; color: var(--text2); opacity: .35; cursor: pointer; }
.hk-punkt[aria-current="true"] { color: var(--accent); opacity: 1; }
/* --- Abschnittsrhythmus: Nummer im Kicker, Knöpfe immer in einer Reihe ----------------------------------------- */
.hp-sec .hp-acts { margin-top: 20px; }
@media (max-width: 599px) { .hp-sec .hp-acts > .btn:not(.link) { flex: 1 1 100%; justify-content: center; } .hp-sec { padding: 44px 0; } }
/* --- 1 Wochenplaner: Stil-Chips, Karte ohne Tauschen (nur Einkaufsliste und +2 Tage), Knopf ---------------------- */
.hp-wp { background: var(--bg); }
.hp-wpgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hp-wptext { margin-bottom: 0; }
.hp-wp .wk-tausch { display: none; }
.hp-wp .wk-ia .wk-link { min-height: 52px; }
.hp-wpacts { display: grid; gap: 12px; }
.hp-wpacts .btn { width: 100%; justify-content: center; }
.hp-wpacts .hp-mehr { margin: 0; font-size: 15px; font-weight: 500; color: var(--text2); line-height: 1.6; }
.hp-wpacts .hp-mehr a { font-weight: 600; }
/* --- 2 Stöbern: Suchfeld und acht Kategorie-Kacheln ---------------------------------------------------------------- */
.hp-suche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hp-suche .input { min-height: 48px; font-size: 16px; }
.hp-suche .btn { min-height: 48px; gap: 6px; }
.hp-sico { width: 20px; height: 20px; }
@media (max-width: 420px) { .hp-suche .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hp-suche .btn { width: 48px; padding: 0; justify-content: center; } }
.hp-kats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hp-kat { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--ph); color: #fff; text-decoration: none; }
.hp-kabild, .hp-kat picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-kat picture img { width: 100%; height: 100%; object-fit: cover; }
.hp-kat span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; font: 700 17px/1.2 var(--display); letter-spacing: -.01em;
  background: linear-gradient(transparent, rgba(13, 21, 16, .72)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.hp-kat:hover span, .hp-kat:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
/* --- 3 Feiern: kleine Kacheln wie die Kategorien, einheitlich 4:3, Name und Zahl im Bild, Saison-Marke oben ------------ */
.hp-feste .hp-kat span small { display: block; margin-top: 2px; font: 500 13px/1.2 var(--font); opacity: .9; }
.hp-ksaison { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; background: #F5C518; color: #1F2421; font: 700 12px/1.2 var(--font); letter-spacing: .04em; font-style: normal; }
/* --- 4 Diät: drei Diätpläne als Karten (Farbfeld-Bilder), Diätplaner als Knopf ------------------------------------------ */
.hp-diaet { background: var(--surface2); }
.hp-dkarte .hp-ktext b { font-size: 18px; }
.hp-kleer { display: block; width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #B7A6F0, #7D8B2B); }
/* --- 5 Angebote: Collage der Ketten (ein Link), darunter die Angebots-Wochen der Woche --------------------------------- */
.hp-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--rl); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.hp-ckachel { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--ph); }
.hp-cbild, .hp-ckachel picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-ckachel picture img { width: 100%; height: 100%; object-fit: cover; }
.hp-ckachel b { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 253, 248, .92); color: #1F2421; font: 700 12px/1.2 var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-collage:hover .hp-ckachel b, .hp-collage:focus-visible .hp-ckachel b { background: var(--accent); color: var(--accentText, #fff); }
.hp-awochen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.hp-awochen a { display: block; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); text-decoration: none; font-size: 15px; }
.hp-awochen a:hover { border-color: var(--accent); }
.hp-awochen b { color: var(--accent); }
@media (min-width: 600px) { .hp-awochen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hp-collage { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding: 10px; } .hp-ckachel b { font-size: 13px; } .hp-awochen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* --- 4 (alt) Diät-Fragen: Klassen bleiben für die Landingpages ---------------------------------------------------------- */
.hp-dpsec { padding: 44px 0; background: var(--surface2); }
.hp-dpsec .hp-in { max-width: 1160px; }
.hp-dpgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hp-dp { background: var(--surface); border: 1px solid var(--line); }
.hp-dptext .kicker { color: var(--warmText); }
.hp-dpmehr { margin: 0; }
.hp-dpbild { margin: 0; }
.hp-fbild, .hp-dpbild picture, .hp-nlbild picture { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--rl); background: var(--ph); }
.hp-dpbild picture img, .hp-nlbild picture img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rl); }
.hp-dpbild:empty, .hp-nlbild:empty { display: none; }
@media (max-width: 599px) { .hp-dpbild { display: none; } }
/* --- 5 Angebote: Karussell mit Kettenbildern --------------------------------------------------------------------- */
.hp-akarte .hp-ktext b { font-size: 18px; }
/* --- 6 App: Text, Badges, Bildschirm im Geräterahmen -------------------------------------------------------------- */
.hp-app { background: var(--surface2); }
.hp-appgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hp-apptext .fapp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 18px 0 0; }
.hp-apptext .fapp img { display: block; height: 40px; width: auto; }
.hp-apptext .fapp img.play { height: 52px; margin: -6px 0; }
.hp-appframe { margin: 0; justify-self: center; width: 230px; padding: 10px; border-radius: 36px; background: #1F2421; box-shadow: 0 18px 40px rgba(31, 36, 33, .22); }
.hp-appshot { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--ph); aspect-ratio: 780 / 1688; }
/* --- 7 Fragen ----------------------------------------------------------------------------------------------------- */
.hp-faqin { max-width: 880px; }
.hp-faq .hp-acts .btn.primary { width: 100%; justify-content: center; }
/* --- 8 Newsletter ------------------------------------------------------------------------------------------------- */
.hp-nl { background: var(--surface2); }
.hp-nlgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hp-nlbild { margin: 0; }
@media (max-width: 599px) { .hp-nlbild { display: none; } }
/* --- Breiter ------------------------------------------------------------------------------------------------------ */
@media (min-width: 600px) {
  .hk-acts { grid-template-columns: auto auto; justify-content: start; align-items: center; }
  .hk-acts .btn { width: auto; }
  .hk-acts .hp-note, .hk-acts .hp-wlform, .hk-acts .wlmsg { grid-column: 1 / -1; text-align: left; }
  .hp-kats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-wpacts { grid-template-columns: auto 1fr; align-items: center; gap: 12px 24px; }
  .hp-wpacts .btn { width: auto; }
  .hp-faq .hp-acts .btn.primary { width: auto; }
}
@media (min-width: 960px) {
  .hk { padding: 56px 0 64px; }
  .hk-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "text bild" "acts bild"; column-gap: 56px; row-gap: 28px; align-items: center; }
  .hk-text { grid-area: text; }
  .hk-bild { grid-area: bild; }
  .hk-acts { grid-area: acts; }
  .hk h1 { font-size: 54px; max-width: 12em; }
  .hk-liste { display: grid; }
  .hk-liste li { font-size: 17px; }
  .hk-slide { flex-basis: 94%; aspect-ratio: 4 / 3; }
  .hk-karte { left: 14px; right: 14px; bottom: 14px; font-size: 15px; }
  .hk-oben { top: 14px; left: 14px; right: 14px; }
  .hk-img, .hk-bild picture { aspect-ratio: 4 / 3; }
  .hp-wpgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text karte" "acts karte"; column-gap: 56px; row-gap: 24px; align-items: start; }
  .hp-wptext { grid-area: text; }
  .hp-wp .wk-box { grid-area: karte; }
  .hp-wpacts { grid-area: acts; }
  .hp-wp .wk { transform: rotate(-.6deg); }
  /* Karte am Desktop als Liste (fünf Zeilen) statt fünf Spalten: sie steht neben dem Text und hat nur die halbe Breite */
  .hp-wp .wk-tage { display: block; padding: 4px 12px; }
  .hp-wp .wk-tag + .wk-tag { border-left: 0; border-top: 1px dashed var(--wkLinie); }
  .hp-wp .wk-ia .wk-tag { flex-direction: row; align-items: center; padding-bottom: 0; }
  .hp-wp .wk-ia .wk-link { grid-template-columns: 40px 64px minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "r f n" "r f z"; gap: 0 10px; min-height: 60px; padding: 6px 0; }
  .hp-wp .wk-ia .wk-reiter { grid-area: r; height: 26px; }
  .hp-wp .wk-ia .wk-foto { grid-area: f; width: 64px; height: 44px; aspect-ratio: auto; }
  .hp-wp .wk-ia .wk-name { grid-area: n; align-self: end; -webkit-line-clamp: 1; min-height: 0; font-size: 15px; }
  .hp-wp .wk-ia .wk-zeit { grid-area: z; align-self: start; background: none; padding-top: 0; min-height: 0; }
  .hp-wp .wk-ia .wk-woche:not(.alle) .wk-spaet { display: flex; }
  .hp-dpgrid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
  .hp-appgrid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
  .hp-appframe { width: 260px; }
  .hp-nlgrid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
  .hp-karussell[data-karussell="angebote"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}