/* ============================================================
   Heimwoche Design-System
   Für Menschen, die nicht jeden Tag am Computer sitzen:
   große Schrift, klare Flächen, große Klickziele, sichtbarer Fokus,
   Satzschreibung statt Versalien, ruhige Farben.
   Schrift: Archivo (SIL OFL 1.1), selbst gehostet.
   ============================================================ */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f3f0e8;
  --card: #fffdf8;
  --ink: #17211c;
  --ink-2: #4a554f;
  --muted: #6b746e;
  --line: #d9d3c5;
  --line-2: #c4bdad;
  --primary: #2f6f55;
  --primary-ink: #ffffff;
  --primary-dark: #23573f;
  --primary-soft: #e4eee8;
  --mark: #f3c969;
  --mark-soft: #fbefcd;
  --warm: #f6ecd6;
  --danger: #a33a2c;
  --focus: #e8a33d;
  --radius: 4px;
  --radius-s: 4px;
  --shadow: none;
  --paper-shadow: 0 1px 1px rgba(23, 33, 28, .08), 0 10px 22px -8px rgba(23, 33, 28, .22);
  --font: "Archivo", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --narrow: 75%;
  --max: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-underline-offset: .2em; }
a:hover { color: var(--primary-dark); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
h1, h2 { font-stretch: var(--narrow); font-weight: 800; line-height: 1.02; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: var(--radius-s); }
.muted { color: var(--muted); }

/* Kopfzeile */
.site-header { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: .625rem; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo__img { width: 2.25rem; height: 2.25rem; display: block; }
.logo__mark { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--primary); display: grid; place-items: center; color: #fff; }
.logo__mark svg { width: 1.375rem; height: 1.375rem; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 1.0625rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--primary); }
.site-nav a.btn-primary { color: var(--primary-ink); }
.site-nav a.btn-secondary { color: var(--ink); }
@media (max-width: 760px) { .site-nav a:not(.btn) { display: none; } }
.site-nav .btn { white-space: nowrap; }
@media (max-width: 420px) { .site-nav .btn-secondary { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .625rem 1.375rem; border-radius: 4px; border: 2px solid transparent;
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.btn-primary, .btn-ink { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover, .btn-ink:hover { background: var(--primary-dark); color: var(--primary-ink); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--primary); padding-inline: .75rem; }
.btn-ghost:hover { background: var(--primary-soft); color: var(--primary-dark); }
.btn-light { background: #fff; color: var(--primary-dark); }
.btn-light:hover { background: var(--warm); color: var(--ink); }
.btn-small { min-height: 2.75rem; padding: .375rem 1rem; font-size: 1rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.linkbtn { background: none; border: 0; padding: .25rem 0; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.linkbtn:hover { color: var(--primary-dark); }

/* ===================== Startseite ===================== */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.eyebrow { display: inline-block; background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; font-size: .9375rem; padding: .25rem .75rem; border-radius: 999px; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.hero .lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--ink-2); margin-top: 1.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__note { margin-top: 1rem; color: var(--muted); font-size: 1rem; display: flex; gap: .5rem; align-items: center; }
.hero__note svg { width: 1.25rem; height: 1.25rem; color: var(--primary); flex: none; }
.hero__visual { position: relative; min-height: 20rem; }
.hero__paper { background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(28,42,36,.14); border: 1px solid var(--line); padding: 1.25rem; transform: rotate(-1.5deg); }
.hero__paper h4 { font-size: 1.25rem; border-bottom: 4px solid var(--primary); padding-bottom: .375rem; margin-bottom: .75rem; display: flex; justify-content: space-between; }
.hero__paper h4 small { font-weight: 500; color: var(--muted); font-size: .875rem; }
.hero__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; font-size: .75rem; line-height: 1.3; }
.hero__cols b { display: block; font-size: .8125rem; border-bottom: 2px solid var(--primary-soft); margin-bottom: .375rem; }
.hero__cols span { display: block; margin-bottom: .375rem; color: var(--ink-2); }
.hero__cols i { font-style: normal; color: var(--primary); font-weight: 700; display: block; }
.hero__screen { position: absolute; right: -0.5rem; bottom: -1.5rem; width: 46%; background: var(--primary); color: #fff; border-radius: 12px; padding: .875rem; box-shadow: 0 16px 40px rgba(28,42,36,.25); border: 6px solid #1c2a24; transform: rotate(2deg); }
.hero__screen b { display: block; font-size: 1.375rem; line-height: 1.1; }
.hero__screen span { display: block; font-size: .8125rem; opacity: .85; margin-top: .375rem; }
@media (max-width: 560px) { .hero__screen { position: static; width: 70%; margin: -1rem 0 0 auto; } }

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section--white { background: var(--card); border-block: 1px solid var(--line); }
.section-head { max-width: 46rem; margin-bottom: 2.25rem; }
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.section-head p { margin-top: .75rem; color: var(--ink-2); font-size: 1.1875rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--shadow); }
.section--white .card { background: var(--bg); box-shadow: none; }
.card h3 { font-size: 1.3125rem; }
.card p { color: var(--ink-2); }
.card__icon { width: 3rem; height: 3rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; flex: none; }
.card__icon svg { width: 1.625rem; height: 1.625rem; }
.steps-list { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1000px) { .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps-list { grid-template-columns: 1fr; } }
.steps-list li { counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.steps-list li::before { content: counter(s); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; margin-bottom: .875rem; }
.steps-list h3 { font-size: 1.25rem; margin-bottom: .375rem; }
.steps-list p { color: var(--ink-2); }
.tpl-showcase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .tpl-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-showcase figure { margin: 0; display: grid; gap: .5rem; }
.tpl-showcase figcaption { font-weight: 600; text-align: center; }
.tpl-showcase figcaption small { display: block; font-weight: 400; color: var(--muted); font-size: .9375rem; }
.tpl-showcase .tpl i { pointer-events: none; }
.checks { display: grid; gap: .875rem; }
.checks li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; align-items: start; }
.checks svg { width: 1.75rem; height: 1.75rem; color: var(--primary); }
.checks strong { display: block; }
.checks span { color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; gap: .75rem; max-width: 52rem; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { list-style: none; cursor: pointer; padding: 1.125rem 1.25rem; font-weight: 600; font-size: 1.125rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.75rem; line-height: 1; color: var(--primary); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }

/* Pilot */
.pilot { background: var(--primary); color: #fff; }
.pilot h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.pilot__lead { margin-top: .875rem; font-size: 1.1875rem; color: #e3efe8; }
.pilot .checks { margin-top: 1.5rem; }
.pilot .checks svg { color: #f3d48a; }
.pilot .checks strong { color: #fff; }
.pilot .checks span { color: #d7e6dd; }
.price-box { margin-top: 1.75rem; background: rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.price-box b { display: block; font-size: 1.75rem; }
.price-box span { color: #d7e6dd; }
.form-card { background: var(--card); color: var(--ink); border-radius: 20px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.125rem; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.form-card h3 { font-size: 1.375rem; }
.field { display: grid; gap: .375rem; }
.field > span, .field > label, .fieldset legend { font-weight: 600; font-size: 1rem; }
.field small { color: var(--muted); font-size: .9375rem; }
.input, .field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink); background: #fff;
  border: 2px solid var(--line-2); border-radius: var(--radius-s); padding: .625rem .875rem; min-height: 3.125rem;
}
.field textarea { min-height: 6rem; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.choice { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border: 2px solid var(--line-2); border-radius: var(--radius-s); cursor: pointer; font-size: 1.0625rem; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); margin: 0; }
.consent { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; font-size: 1rem; color: var(--ink-2); cursor: pointer; }
.consent input { width: 1.375rem; height: 1.375rem; accent-color: var(--primary); margin: .125rem 0 0; }
.hp { position: absolute; left: -9999px; }
.wl-status { font-weight: 600; min-height: 1.5rem; }
.wl-status.ok { color: var(--primary-dark); }
.wl-status.err { color: var(--danger); }
.wl-small { font-size: .9375rem; color: var(--muted); }

/* Fuß */
.site-footer { padding-block: 2rem; color: var(--muted); font-size: 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.site-footer nav { display: flex; gap: 1.25rem; }
.pilot + .site-footer { background: var(--primary-dark); color: #cfe0d6; }
.pilot + .site-footer a { color: #fff; }

/* Rechtstexte, Rückmeldeseiten, Auswertung (auch alte Klassennamen aus dem Backend) */
.nav { background: var(--card); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; min-height: 4.5rem; }
.nav__brand { font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; display: inline-flex; gap: .625rem; align-items: center; }
.nav__mark { width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--primary); display: inline-block; }
.page { padding-block: 3rem 4rem; max-width: 52rem; }
.page__title, .page h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-bottom: 1rem; }
.page .lead { font-size: 1.1875rem; color: var(--ink-2); }
.page form, .page .back { margin-top: 1.5rem; }
.legal-body { display: grid; gap: 1rem; color: var(--ink-2); }
.legal-body h2 { font-size: 1.375rem; color: var(--ink); margin-top: 1rem; }
.legal-body ul { list-style: disc; padding-left: 1.5rem; display: grid; gap: .25rem; }
.foot-plain { padding-block: 2rem; border-top: 1px solid var(--line); color: var(--muted); }
.foot-plain .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot-plain nav { display: flex; gap: 1.25rem; }
.stats-h { font-size: 1.375rem; margin: 2rem 0 .75rem; }
.stats-p { margin: .75rem 0; color: var(--ink-2); }
.stats-table { width: 100%; border-collapse: collapse; background: var(--card); margin-bottom: 1rem; font-size: 1rem; }
.stats-table th, .stats-table td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.display { font-weight: 700; }

/* ===================== Generator ===================== */
.app { padding-block: 1.5rem 5rem; }
.app-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; align-items: end; margin-bottom: 1.25rem; }
.app-top h1 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
.app-top p { color: var(--ink-2); margin-top: .25rem; }
.saved { display: inline-flex; align-items: center; gap: .375rem; color: var(--primary-dark); font-weight: 600; font-size: 1rem; }
.saved svg { width: 1.25rem; height: 1.25rem; }
.setup { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; grid-template-columns: 1.2fr 1.8fr; gap: 1.25rem; align-items: end; box-shadow: var(--shadow); }
@media (max-width: 900px) { .setup { grid-template-columns: 1fr; } }
.weeknav { display: grid; gap: .375rem; }
.weeknav > span { font-weight: 600; font-size: 1rem; }
.weeknav__row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.weeknav__label { flex: 1; min-width: 11rem; text-align: center; font-weight: 700; font-size: 1.125rem; padding: .5rem .75rem; background: var(--bg); border-radius: var(--radius-s); line-height: 1.3; }
.weeknav__label small { display: block; font-weight: 500; color: var(--muted); font-size: .9375rem; }
.icon-round { width: 3.125rem; height: 3.125rem; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); flex: none; }
.icon-round:hover { border-color: var(--primary); color: var(--primary); }
.icon-round svg { width: 1.375rem; height: 1.375rem; }

.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 1.5rem 0 1.25rem; }
@media (max-width: 760px) { .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stepper button { font: inherit; text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; cursor: pointer; display: grid; grid-template-columns: 2.25rem 1fr; gap: .125rem .75rem; align-items: center; color: var(--ink); }
.stepper button b { grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 1.0625rem; }
.stepper button span { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.stepper button small { color: var(--muted); font-size: .875rem; line-height: 1.2; }
.stepper button[aria-selected="true"] { border-color: var(--primary); background: var(--primary-soft); }
.stepper button[aria-selected="true"] b { background: var(--primary); color: #fff; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: var(--shadow); }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel__head h2 { font-size: 1.5rem; }
.panel__head p { color: var(--muted); }

.daypills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.daypills button { font: inherit; border: 2px solid var(--line-2); background: #fff; border-radius: 8px; padding: .5rem 1rem; min-height: 3rem; cursor: pointer; display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; color: var(--ink); }
.daypills button small { font-weight: 500; color: var(--muted); }
.daypills button .count { min-width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--bg); font-size: .875rem; display: grid; place-items: center; padding-inline: .375rem; }
.daypills button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.daypills button[aria-pressed="true"] small { color: #e3efe8; }
.daypills button[aria-pressed="true"] .count { background: rgba(255,255,255,.25); }

.entries { display: grid; gap: .75rem; }
.entry { display: grid; grid-template-columns: 8.5rem 1.4fr 1fr auto; gap: .625rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); }
@media (max-width: 760px) { .entry { grid-template-columns: 8rem 1fr auto; grid-template-areas: "zeit . del" "titel titel titel" "ort ort ort"; } .entry .e-zeit { grid-area: zeit; } .entry .e-titel { grid-area: titel; } .entry .e-ort { grid-area: ort; } .entry .del { grid-area: del; } }
.entry .input { min-height: 3rem; }
.entry label { display: contents; }
.del { width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.del:hover { background: #f6e3df; color: var(--danger); }
.del svg { width: 1.375rem; height: 1.375rem; }
.empty { padding: 1.25rem; border: 2px dashed var(--line-2); border-radius: var(--radius-s); color: var(--muted); text-align: center; }
.add-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.chips-title { margin-top: 1.5rem; font-weight: 600; font-size: 1rem; }
.chips-title small { color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.chip { font: inherit; font-size: 1rem; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: .375rem .875rem; min-height: 2.5rem; cursor: pointer; color: var(--ink-2); }
.chip:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.chip b { color: var(--primary); margin-right: .25rem; }
.copy-row { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.copy-row select { width: auto; min-height: 2.75rem; }

.dishes { display: grid; gap: 1rem; }
.dish { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1rem; background: var(--bg); display: grid; gap: .625rem; }
.dish__label { font-weight: 700; }
.dish details summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 1rem; padding: .25rem 0; }
.dish details[open] summary { margin-bottom: .5rem; }
.allergens { display: flex; flex-wrap: wrap; gap: .375rem; }
.allergens label { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem .75rem .25rem .375rem; min-height: 2.5rem; background: #fff; cursor: pointer; font-size: .9375rem; user-select: none; position: relative; }
.allergens label b { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: .875rem; }
.allergens input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.allergens label:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.allergens label:has(input:checked) b { background: var(--primary); color: #fff; }
.allergens label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .look { grid-template-columns: 1fr; } }
.look h3 { font-size: 1.125rem; margin: 1.5rem 0 .625rem; }
.look h3:first-child { margin-top: 0; }
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: .625rem; }
.tpl { --sw: #2f6f55; font: inherit; border: 2px solid var(--line-2); background: #fff; border-radius: var(--radius-s); padding: .5rem; cursor: pointer; display: grid; gap: .375rem; text-align: center; color: var(--ink); }
.tpl[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tpl span { font-weight: 600; font-size: .9375rem; }
.tpl small { color: var(--muted); font-size: .8125rem; line-height: 1.25; }
.tpl i { display: block; aspect-ratio: 4 / 3; border-radius: 6px; border: 1px solid var(--line); background: #fff; position: relative; overflow: hidden; }
.tpl i::before, .tpl i::after { content: ""; position: absolute; left: 10%; right: 10%; }
.tpl--klar i::before { top: 12%; height: 10%; background: var(--sw); }
.tpl--klar i::after { top: 34%; bottom: 12%; background: repeating-linear-gradient(90deg, #ddd 0 18%, transparent 18% 20.5%); }
.tpl--warm i { background: #fbf4e6; }
.tpl--warm i::before { top: 12%; height: 14%; border-radius: 6px; background: color-mix(in srgb, var(--sw) 35%, #fbf4e6); }
.tpl--warm i::after { top: 36%; bottom: 12%; background: repeating-linear-gradient(90deg, #ead9b9 0 18%, transparent 18% 20.5%); }
.tpl--frisch i::before { top: 0; left: 0; right: 0; height: 26%; background: var(--sw); }
.tpl--frisch i::after { top: 36%; bottom: 12%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sw) 22%, #fff) 0 18%, transparent 18% 20.5%); }
.tpl--festlich i { border: 4px double var(--sw); }
.tpl--festlich i::before { top: 14%; left: 30%; right: 30%; height: 8%; background: var(--sw); border-radius: 3px; }
.tpl--festlich i::after { top: 36%; bottom: 14%; background: repeating-linear-gradient(90deg, #e6e6e6 0 18%, transparent 18% 20.5%); }
.tpl--kontrast i::before { top: 0; left: 0; right: 0; height: 26%; background: #000; }
.tpl--kontrast i::after { top: 34%; bottom: 10%; background: repeating-linear-gradient(90deg, #000 0 2%, transparent 2% 20%); }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.swatch { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; background: var(--sw); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.swatch-custom { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; cursor: pointer; padding-left: .5rem; }
.swatch-custom input { width: 2.75rem; height: 2.75rem; border: 0; padding: 0; background: none; cursor: pointer; }
.logo-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.logo-row img { max-height: 3.5rem; max-width: 10rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: .25rem; }
.segmented { display: inline-flex; border: 2px solid var(--line-2); border-radius: 999px; padding: .25rem; gap: .25rem; flex-wrap: wrap; }
.segmented button { font: inherit; font-size: 1rem; border: 0; background: transparent; border-radius: 999px; padding: .5rem 1rem; min-height: 2.5rem; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.segmented button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.preview-box { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
@media (min-width: 1001px) { .preview-box { position: sticky; top: 6rem; } }
.preview-box__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; font-weight: 600; }
.preview-stage { overflow: hidden; background: #fff; border-radius: 6px; box-shadow: var(--shadow); position: relative; }
.preview-stage .sheet { transform-origin: top left; position: absolute; left: 0; top: 0; }

.outputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.out { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .75rem; align-content: start; background: var(--bg); }
.out .card__icon { background: #fff; }
.out h3 { font-size: 1.1875rem; }
.out p { color: var(--ink-2); font-size: 1rem; }
.out .btn { justify-self: start; }
.backup { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--radius); background: var(--warm); display: grid; gap: .625rem; }
.backup h3 { font-size: 1.125rem; }
.backup div { display: flex; flex-wrap: wrap; gap: .5rem; }
.hint { background: var(--warm); border-radius: var(--radius-s); padding: .875rem 1rem; color: var(--ink-2); font-size: 1rem; display: grid; grid-template-columns: 1.5rem 1fr; gap: .625rem; }
.hint svg { width: 1.5rem; height: 1.5rem; color: #9a6a12; }
.nextbar { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.nextbar .btn:only-child { margin-left: auto; }
.pilot-cta { margin-top: 2rem; background: var(--primary); color: #fff; border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .75rem; }
.pilot-cta h2 { font-size: 1.375rem; }
.pilot-cta p { color: #e3efe8; }
.pilot-cta .btn { justify-self: start; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .875rem 1.25rem; border-radius: 999px; z-index: 120; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 2rem); text-align: center; }

/* ===================== Vorlagen (Aushang, Bildschirm, Angehörigenseite) ===================== */
/* Grundlage aller fünf Vorlagen: schmale, kräftige Überschriften und Uhrzeiten, feine Linien, viel Luft */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin-italic.woff2) format('woff2'); }
.sheet { --acc: #2f6f55; --acc-soft: color-mix(in srgb, var(--acc) 10%, #fff); --acc-ink: #fff; --rule: #d9d9d6; --sub: #585e64; --disp: "Archivo", Arial, sans-serif;
  background: #fff; color: #15181b; font-family: var(--font); line-height: 1.25; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet--quer { width: 277mm; min-height: 190mm; padding: 6mm 7mm; display: flex; flex-direction: column; }
.sheet--hoch { width: 186mm; min-height: 273mm; padding: 9mm 9mm 8mm; }

/* Kopf */
.sh-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8mm; padding-bottom: 3.5mm; margin-bottom: 4mm; border-bottom: 1.4mm solid var(--acc); }
.sh-head__l { display: flex; align-items: center; gap: 5mm; min-width: 0; }
.sh-logo { max-height: 15mm; max-width: 42mm; object-fit: contain; }
.sh-title { font-family: var(--disp); font-stretch: 74%; font-weight: 800; font-size: 31pt; line-height: .95; letter-spacing: -.01em; }
.sh-house { font-size: 12.5pt; font-weight: 500; color: var(--sub); margin-top: 1.4mm; }
.sh-week { text-align: right; line-height: 1; white-space: nowrap; }
.sh-week b { display: block; font-family: var(--disp); font-stretch: 72%; font-weight: 800; font-size: 30pt; color: var(--acc); letter-spacing: -.01em; }
.sh-week span { display: block; font-size: 10.5pt; font-weight: 500; color: var(--sub); margin-top: 1.6mm; }
.sh-motto { font-size: 13.5pt; font-weight: 600; margin-bottom: 4mm; padding: 2.4mm 4mm 2.4mm 4.5mm; background: var(--acc-soft); border-left: 1.8mm solid var(--acc); }

/* Wochentabelle */
.wk { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0; }
.wk th { text-align: left; vertical-align: bottom; padding: 0 2.6mm 2mm; border-bottom: .5mm solid #15181b; font-family: var(--disp); font-stretch: 78%; font-weight: 800; font-size: 16pt; line-height: 1; }
.wk th small { display: block; font-family: var(--font); font-stretch: 100%; font-size: 9.5pt; font-weight: 500; color: var(--sub); margin-top: 1mm; }
.wk td { vertical-align: top; padding: 2.6mm 2.6mm 0; font-size: 12.5pt; line-height: 1.2; font-stretch: 90%; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.wk th + th, .wk td + td { border-left: .25mm solid var(--rule); }
.wk .it { padding-bottom: 2.3mm; margin-bottom: 2.3mm; border-bottom: .2mm solid #e6e6e3; }
.wk .it:last-child { border-bottom: 0; }
.wk .it b { display: block; font-stretch: 74%; font-weight: 800; font-size: 13pt; color: var(--acc); font-variant-numeric: tabular-nums; letter-spacing: .01em; margin-bottom: .5mm; }
.wk .it span { display: block; font-size: 9.5pt; font-stretch: 100%; color: var(--sub); margin-top: .7mm; }
.wk .we { background: #f5f5f3; }
.sheet.size-gross .wk td { font-size: 15pt; }
.sheet.size-gross .wk .it b { font-size: 15pt; }

/* Speiseplan */
.menu-cell .ml { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-top: 3mm; color: var(--acc); font-stretch: 100%; }
.menu-cell .ml:first-child { margin-top: 0; }
.menu-cell .mt { font-size: 12.5pt; padding-bottom: 2mm; border-bottom: .2mm solid #e6e6e3; }
.menu-cell .mt:last-child { border-bottom: 0; }
.sheet.size-gross .menu-cell .mt { font-size: 15pt; }
.ma { font-size: 8.5pt; color: #6a6f75; white-space: nowrap; font-stretch: 100%; }
.legend { margin-top: auto; padding-top: 2.5mm; border-top: .3mm solid #15181b; font-size: 9.5pt; display: flex; flex-wrap: wrap; gap: 1.2mm 4.5mm; }
.wk + .legend { margin-top: 5mm; }
.legend span { display: inline-flex; align-items: center; gap: 1.2mm; }
.legend b { display: inline-grid; place-items: center; width: 4.6mm; height: 4.6mm; border: .3mm solid currentColor; border-radius: 50%; font-size: 7.5pt; }
.legend p { width: 100%; font-size: 8.5pt; color: #6a6f75; }
.sh-foot { margin-top: auto; padding-top: 4mm; font-size: 8.5pt; color: #6a6f75; display: flex; justify-content: space-between; gap: 4mm; }

/* Tagesblatt */
.day-date { font-family: var(--disp); font-stretch: 70%; font-weight: 800; font-size: 66pt; line-height: .88; letter-spacing: -.015em; color: var(--acc); }
.day-sub { font-size: 17pt; font-weight: 500; color: var(--sub); margin: 3mm 0 6mm; padding-bottom: 4mm; border-bottom: 1.4mm solid var(--acc); }
.day-item { display: grid; grid-template-columns: 34mm 1fr; gap: 5mm; font-size: 26pt; line-height: 1.12; padding-block: 4.5mm; border-bottom: .35mm solid #cfcfcc; }
.day-item b { font-stretch: 72%; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; font-size: 1.08em; line-height: 1.05; }
.day-item small { display: block; font-size: 15pt; color: var(--sub); margin-top: 1.2mm; }
.day-menu { margin-top: 9mm; font-size: 19pt; line-height: 1.3; padding: 5mm 6mm; background: var(--acc-soft); border-left: 1.8mm solid var(--acc); }
.day-menu h3 { font-size: 11.5pt; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 2mm; color: var(--acc); }
.day-menu div + div { margin-top: 1.5mm; }
.sheet.size-gross .day-item { font-size: 30pt; }

/* Vorlage: Warm – cremefarbenes Papier, Serifenschrift Fraunces, gepunktete Linien */
.tpl-warm.sheet { background: #fbf7ef; --rule: #e1d5bd; --disp: "Fraunces", Georgia, serif; }
.tpl-warm .sh-title, .tpl-warm .wk th, .tpl-warm .sh-week b, .tpl-warm .day-date { font-stretch: 100%; font-weight: 600; letter-spacing: -.005em; }
.tpl-warm .sh-title { font-size: 30pt; }
.tpl-warm .sh-week b { font-size: 24pt; }
.tpl-warm .sh-head { border-bottom: .5mm solid var(--acc); box-shadow: 0 1.2mm 0 -.25mm #fbf7ef, 0 1.45mm 0 -.25mm var(--acc); }
.tpl-warm .sh-motto { background: transparent; border-left: 0; padding: 0 0 3mm; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: 15pt; color: color-mix(in srgb, var(--acc) 80%, #000); }
.tpl-warm .wk th { font-size: 15pt; border-bottom: .3mm solid var(--acc); }
.tpl-warm .wk th + th, .tpl-warm .wk td + td { border-left: .3mm dotted #cbbb98; }
.tpl-warm .wk .it { border-bottom: .3mm dotted #d8c9a8; }
.tpl-warm .wk .we { background: #f3eadb; }
.tpl-warm .day-date { font-size: 58pt; }
.tpl-warm .day-sub { border-bottom: .5mm solid var(--acc); }
.tpl-warm .day-item { border-bottom: .4mm dotted #c9b892; }
.tpl-warm .day-menu { background: #f3eadb; border-left: 0; }

/* Vorlage: Frisch – farbige Kopfzeile über die ganze Breite, Termine als Kacheln */
.tpl-frisch .sh-head { background: var(--acc); color: var(--acc-ink); border: 0; margin: -6mm -7mm 4.5mm; padding: 7mm 7mm 5mm; }
.tpl-frisch .sh-house, .tpl-frisch .sh-week span { color: var(--acc-ink); opacity: .85; }
.tpl-frisch .sh-week b { color: var(--acc-ink); }
.tpl-frisch .sh-motto { border-left: 0; background: var(--acc-soft); }
.tpl-frisch .wk { border-collapse: separate; border-spacing: 1.6mm 0; margin-inline: -1.6mm; width: calc(100% + 3.2mm); }
.tpl-frisch .wk th { background: var(--acc-soft); border: 0; padding: 2mm 2.4mm; }
.tpl-frisch .wk th + th, .tpl-frisch .wk td + td { border-left: 0; }
.tpl-frisch .wk td { padding: 1.8mm 0 0; }
.tpl-frisch .wk .it { background: color-mix(in srgb, var(--acc) 6%, #fff); border: 0; border-left: 1.1mm solid var(--acc); padding: 1.8mm 2.2mm; margin-bottom: 1.6mm; }
.tpl-frisch .wk .we { background: transparent; }
.tpl-frisch .wk th.we { background: color-mix(in srgb, var(--acc) 5%, #fff); }
.tpl-frisch .menu-cell { padding-inline: 2.2mm; background: color-mix(in srgb, var(--acc) 4%, #fff); }
.tpl-frisch.sheet--hoch .day-date { background: var(--acc); color: var(--acc-ink); margin: -9mm -9mm 0; padding: 10mm 9mm 2mm; }
.tpl-frisch .day-sub { background: var(--acc); color: var(--acc-ink); margin: 0 -9mm 6mm; padding: 2mm 9mm 7mm; border: 0; opacity: 1; }
.tpl-frisch .day-item { border: 0; background: color-mix(in srgb, var(--acc) 6%, #fff); border-left: 1.4mm solid var(--acc); padding: 4mm 5mm; margin-bottom: 2.5mm; }

/* Vorlage: Festlich – Rahmen, zentrierter Kopf, Fraunces kursiv */
.tpl-festlich.sheet { --disp: "Fraunces", Georgia, serif; outline: .5mm solid var(--acc); outline-offset: -3.2mm; box-shadow: inset 0 0 0 4.6mm #fff, inset 0 0 0 4.9mm var(--acc); }
.tpl-festlich.sheet--quer { padding: 9mm 10mm 8mm; }
.tpl-festlich.sheet--hoch { padding: 12mm 12mm 10mm; }
.tpl-festlich .sh-head { grid-template-columns: 1fr; justify-items: center; text-align: center; border-bottom: .3mm solid var(--acc); gap: 2mm; }
.tpl-festlich .sh-head__l { flex-direction: column; gap: 2mm; }
.tpl-festlich .sh-title { font-style: italic; font-weight: 500; font-stretch: 100%; font-size: 32pt; letter-spacing: 0; }
.tpl-festlich .sh-title::before, .tpl-festlich .sh-title::after { content: "\2726"; font-style: normal; font-size: .42em; color: var(--acc); vertical-align: middle; margin: 0 4mm; }
.tpl-festlich .sh-week { text-align: center; }
.tpl-festlich .sh-week b, .tpl-festlich .sh-week span { display: inline; font-size: 11.5pt; font-family: var(--font); font-stretch: 100%; font-weight: 600; color: var(--sub); }
.tpl-festlich .sh-week b::after { content: " \00b7 "; }
.tpl-festlich .sh-motto { text-align: center; background: transparent; border: 0; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: 15pt; padding: 0 0 2mm; color: var(--acc); }
.tpl-festlich .wk th { text-align: center; font-weight: 600; font-stretch: 100%; font-size: 15pt; border-bottom: .3mm solid var(--acc); }
.tpl-festlich .wk th + th, .tpl-festlich .wk td + td { border-left: .2mm solid color-mix(in srgb, var(--acc) 30%, #fff); }
.tpl-festlich .wk .we { background: transparent; }
.tpl-festlich .wk th.we { color: var(--sub); }
.tpl-festlich .day-date, .tpl-festlich .day-sub { text-align: center; }
.tpl-festlich .day-date { font-style: italic; font-weight: 500; font-stretch: 100%; font-size: 56pt; }
.tpl-festlich .day-sub { border-bottom: .3mm solid var(--acc); }
.tpl-festlich .day-menu { background: transparent; border: .3mm solid var(--acc); text-align: center; }

/* Vorlage: Kontrast – Schwarz auf Weiß, sehr groß, kräftige Linien (gut lesbar bei Sehschwäche) */
.sheet.tpl-kontrast { --acc: #000; --acc-soft: #fff; --sub: #000; --rule: #000; }
.tpl-kontrast .sh-head { background: #000; color: #fff; border: 0; margin: -6mm -7mm 5mm; padding: 7mm 7mm 5mm; }
.tpl-kontrast.sheet--hoch .sh-head { margin: -9mm -9mm 6mm; padding: 8mm 9mm; }
.tpl-kontrast .sh-house, .tpl-kontrast .sh-week span, .tpl-kontrast .sh-week b { color: #fff; }
.tpl-kontrast .sh-title { font-size: 34pt; }
.tpl-kontrast .sh-logo { background: #fff; padding: 1mm; }
.tpl-kontrast .sh-motto { border: .8mm solid #000; background: #fff; font-size: 15pt; }
.tpl-kontrast .wk th { background: #000; color: #fff; border: 0; font-size: 18pt; padding: 2.2mm 2.6mm; }
.tpl-kontrast .wk th small { color: #fff; }
.tpl-kontrast .wk th + th, .tpl-kontrast .wk td + td { border-left: .6mm solid #000; }
.tpl-kontrast .wk td { font-size: 15pt; font-stretch: 95%; border-bottom: .8mm solid #000; }
.tpl-kontrast .wk .it { border-bottom: .4mm solid #000; }
.tpl-kontrast .wk .it b { font-size: 15pt; color: #000; }
.tpl-kontrast .wk .it span, .tpl-kontrast .day-item small, .tpl-kontrast .ma { color: #000; }
.tpl-kontrast .wk .we { background: #fff; }
.tpl-kontrast .day-date { color: #000; font-size: 70pt; }
.tpl-kontrast .day-sub { color: #000; border-bottom: 2mm solid #000; }
.tpl-kontrast .day-item { border-bottom: 1mm solid #000; font-size: 32pt; }
.tpl-kontrast .day-item b { color: #000; }
.tpl-kontrast .day-menu { border: 1mm solid #000; background: #fff; }
.tpl-kontrast .legend, .tpl-kontrast .sh-foot, .tpl-kontrast .legend p { color: #000; }


/* ===================== Vorlagen: Abstände und Schriftgrößen (Fassung 2) =====================
   „Groß“ (Standard) etwas kleiner, „Sehr groß“ = bisheriges „Groß“, damit weniger getrennt wird. */
.wk td { font-size: 11.25pt; }
.wk .it b { font-size: 11.75pt; }
.menu-cell .mt { font-size: 11.25pt; }
.day-item { font-size: 23pt; }
.day-menu { font-size: 17pt; }
.sheet.size-gross .wk td, .sheet.size-gross .menu-cell .mt { font-size: 12.5pt; }
.sheet.size-gross .wk .it b { font-size: 13pt; }
.sheet.size-gross .day-item { font-size: 26pt; }
.sheet.size-gross .day-menu { font-size: 19pt; }
/* Kontrast: eine Stufe größer, aber nicht mehr so groß, dass ständig getrennt wird */
.tpl-kontrast .wk td, .tpl-kontrast .menu-cell .mt { font-size: 12.5pt; }
.tpl-kontrast .wk .it b { font-size: 13pt; }
.tpl-kontrast .day-item { font-size: 26pt; }
.sheet.size-gross.tpl-kontrast .wk td, .sheet.size-gross.tpl-kontrast .menu-cell .mt { font-size: 13.75pt; }
.sheet.size-gross.tpl-kontrast .wk .it b { font-size: 14.25pt; }
.sheet.size-gross.tpl-kontrast .day-item { font-size: 29pt; }
/* Frisch: Speiseplan-Zellen bekommen ihren Innenabstand zurück (vorher von einer stärkeren Regel aufgehoben) */
.sheet.tpl-frisch .wk td.menu-cell { padding: 2mm 2.6mm 1mm; }
.sheet.tpl-frisch .wk td.menu-cell .mt { border-bottom-color: color-mix(in srgb, var(--acc) 14%, #fff); }
/* Gleicher Abstand links für Kopf, Hinweis und erste Spalte */
.sheet:not(.tpl-frisch):not(.tpl-kontrast) .wk th:first-child, .sheet:not(.tpl-frisch):not(.tpl-kontrast) .wk td:first-child { padding-left: 0; }
.sheet:not(.tpl-frisch):not(.tpl-kontrast) .wk th:last-child, .sheet:not(.tpl-frisch):not(.tpl-kontrast) .wk td:last-child { padding-right: 0; }
.sheet:not(.tpl-frisch):not(.tpl-kontrast) .wk td.we, .sheet:not(.tpl-frisch):not(.tpl-kontrast) .wk th.we { padding-left: 2.6mm; padding-right: 2.6mm; }

/* Druck */
#print-area { display: none; }
@page wochen { size: A4 landscape; margin: 10mm; }
@page tag { size: A4 portrait; margin: 12mm; }
@media print {
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block; }
  body.printing { background: #fff; }
  .sheet { break-after: page; }
  .sheet:last-child { break-after: auto; }
  .sheet--quer { page: wochen; width: auto; min-height: 0; }
  .sheet--hoch { page: tag; width: auto; min-height: 0; }
}

/* Bildschirm */
.screen { --acc: #2f6f55; position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto; padding: 3vw 4vw; gap: 2vw; cursor: none;
  background: #fff; color: #111; font-family: var(--font); }
.screen.tpl-warm { background: #fbf6ec; }
.screen.tpl-warm .scr-date, .screen.tpl-festlich .scr-date { font-family: var(--serif); }
.screen.tpl-frisch { background: var(--acc); color: #fff; }
.screen.tpl-festlich { outline: 1vw double var(--acc); outline-offset: -2vw; }
.screen.tpl-kontrast { background: #000; color: #fff; }
.scr-top { display: flex; justify-content: space-between; align-items: center; gap: 2vw; }
.scr-top__l { display: flex; align-items: center; gap: 2vw; }
.scr-logo { max-height: 8vw; max-width: 22vw; object-fit: contain; background: #fff; border-radius: .6vw; padding: .4vw; }
.scr-house { font-size: 2.2vw; font-weight: 600; opacity: .85; }
.scr-date { font-size: 4.2vw; font-weight: 800; line-height: 1.05; }
.scr-clock { font-size: 6.4vw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.scr-body { display: grid; align-content: start; gap: 1.2vw; overflow: hidden; }
.scr-title { font-size: 2.4vw; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--acc); }
.screen.tpl-frisch .scr-title { color: #fff; opacity: .85; }
.screen.tpl-kontrast .scr-title { color: #ffd400; }
.scr-item { display: grid; grid-template-columns: 12vw 1fr; gap: 2vw; align-items: baseline; font-size: 3.6vw; line-height: 1.15; padding: .8vw 1vw; border-radius: .8vw; }
.scr-item b { font-variant-numeric: tabular-nums; }
.scr-item small { display: block; font-size: 2.2vw; opacity: .75; }
.scr-item.is-past { opacity: .4; }
.scr-item.is-now { background: var(--acc); color: #fff; }
.screen.tpl-frisch .scr-item.is-now { background: #fff; color: var(--acc); }
.screen.tpl-kontrast .scr-item.is-now { background: #ffd400; color: #000; }
.scr-dish { font-size: 3.4vw; line-height: 1.2; }
.scr-dish small { display: block; font-size: 2vw; opacity: .7; }
.scr-foot { display: flex; justify-content: space-between; font-size: 1.8vw; opacity: .75; gap: 2vw; }
.scr-close { position: fixed; bottom: 1rem; right: 1rem; z-index: 101; opacity: .6; cursor: pointer; }

/* Angehörigenseite */
.rel-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(20, 30, 25, .55); display: grid; place-items: center; padding: 1rem; overflow: auto; }
.rel-frame { background: #fff; width: min(25rem, 100%); max-height: 92vh; overflow: auto; border: 8px solid #1c2a24; border-radius: 2rem; }
.rel { --acc: #2f6f55; font-family: var(--font); color: #111; }
.rel__top { background: var(--acc); color: #fff; padding: 1.25rem; display: grid; gap: .5rem; }
.rel.tpl-kontrast .rel__top { background: #000; }
.rel.tpl-warm .rel__top, .rel.tpl-klar .rel__top, .rel.tpl-festlich .rel__top { background: color-mix(in srgb, var(--acc) 14%, #fff); color: #111; }
.rel.tpl-warm, .rel.tpl-warm .rel__body { background: #fbf6ec; }
.rel.tpl-warm h2, .rel.tpl-festlich h2 { font-family: var(--serif); }
.rel__top img { max-height: 3rem; max-width: 9rem; background: #fff; border-radius: 6px; padding: .25rem; justify-self: start; }
.rel__top h2 { font-size: 1.5rem; }
.rel__body { padding: 1.25rem; display: grid; gap: .75rem; font-size: 1.0625rem; }
.rel__badge { background: #fff4d6; font-size: .9375rem; padding: .625rem .75rem; border-radius: 10px; color: #5a4300; }
.rel h3 { font-size: 1.125rem; color: var(--acc); border-bottom: 2px solid color-mix(in srgb, var(--acc) 30%, #fff); padding-bottom: .25rem; margin-top: .5rem; }
.rel.tpl-kontrast h3 { color: #000; border-color: #000; }
.rel ul { display: grid; gap: .375rem; }
.rel li { display: grid; grid-template-columns: 3.5rem 1fr; gap: .5rem; }
.rel__note { font-size: .9375rem; color: #555; }
.rel-close { position: sticky; bottom: .75rem; margin: 0 1.25rem 1.25rem; width: calc(100% - 2.5rem); }

/* ===================== Startseite v2: echte Aushänge statt Symbolkarten ===================== */
.hero2 { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 960px) { .hero2 { grid-template-columns: 1fr; } }
.hero2 h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
.hero2 h1 em { font-style: normal; color: var(--primary); }
.hero2 .lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--ink-2); margin-top: 1.25rem; max-width: 34rem; }
.hero2 .hero__cta { margin-top: 1.75rem; }
.made-in { margin-top: 1.5rem; font-size: 1rem; color: var(--muted); }
.pinboard { position: relative; aspect-ratio: 5 / 4; border-radius: 6px; padding: 6%;
  background-color: #c7a57d;
  background-image: radial-gradient(rgba(90, 60, 30, .18) 1px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px;
  box-shadow: inset 0 0 0 10px #8a6a48, inset 0 0 0 12px #6f5338, 0 18px 40px rgba(28, 42, 36, .18); }
.paper { position: absolute; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.18); }
.paper img { display: block; width: 100%; height: auto; }
.paper--week { left: 5%; top: 8%; width: 70%; transform: rotate(-2.2deg); }
.paper--day { right: 5%; bottom: 7%; width: 32%; transform: rotate(3deg); }
.pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a73, #c0392b 60%, #7d1f15); box-shadow: 0 3px 4px rgba(0,0,0,.35); z-index: 2; }
.pin--y { background: radial-gradient(circle at 35% 35%, #ffe08a, #e0a91b 60%, #8a6200); }
@media (max-width: 560px) { .pinboard { aspect-ratio: 4 / 4.2; } .paper--week { width: 82%; } .paper--day { width: 40%; } }

.story { max-width: 46rem; }
.story h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.story__text { margin-top: 1.25rem; font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.6; color: var(--ink-2); }
.story__text p + p { margin-top: 1rem; }
.story__text strong { color: var(--ink); }

.gallery { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: #fff; }
.gallery .tv { background: #1c2a24; padding: 10px; border-radius: 10px; }
.gallery .tv img { border: 0; border-radius: 3px; }
.gallery figcaption { margin-top: .75rem; color: var(--ink-2); font-size: 1.0625rem; }
.gallery figcaption strong { display: block; color: var(--ink); font-size: 1.1875rem; }
.gallery__side { display: grid; gap: 1.5rem; }

.tplrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .tplrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tplrow figure { margin: 0; }
.tplrow img { width: 100%; height: auto; display: block; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(28,42,36,.08); }
.tplrow figcaption { margin-top: .5rem; font-weight: 600; }
.tplrow figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: .9375rem; }

.plainlist { display: grid; gap: 1rem; max-width: 46rem; }
.plainlist li { padding-left: 1.25rem; border-left: 3px solid var(--primary); }
.plainlist strong { display: block; font-size: 1.125rem; }
.plainlist span { color: var(--ink-2); }

.note-from { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; max-width: 50rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 560px) { .note-from { grid-template-columns: 1fr; } }
.note-from__avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; font-weight: 700; font-size: 1.5rem; }
.note-from p { color: var(--ink-2); font-size: 1.125rem; }
.note-from p + p { margin-top: .75rem; }
.note-from .sig { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink); }

/* Auswahlfelder: eigener Pfeil mit Abstand zum Rand */
.field select, select.input {
  -webkit-appearance: none; appearance: none; padding-right: 3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6f55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem;
}
select::-ms-expand { display: none; }

/* Hinweis auf den Pilot nach dem ersten Ergebnis */
.nudge { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; max-width: 26rem; background: var(--card); border: 2px solid var(--primary); border-radius: 12px; padding: 1.125rem 1.25rem; box-shadow: 0 16px 40px rgba(28,42,36,.2); display: grid; gap: .75rem; font-size: 1rem; }
.nudge p { color: var(--ink-2); }
.nudge strong { color: var(--ink); display: block; font-size: 1.0625rem; margin-bottom: .25rem; }
.nudge div { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 560px) { .nudge { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; } }
@media print { .nudge { display: none !important; } }

/* ===================== Pilot: öffentliche Angehörigenseite und Bildschirm ===================== */
.hp-page { background: var(--bg); }
.hp-wrap { max-width: 40rem; margin: 0 auto; padding: 1rem; }
.hp-msg { padding: 3rem 1rem; text-align: center; color: var(--muted); font-size: 1.125rem; }
.hp-rel { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.hp-rel h1 { font-size: 1.625rem; line-height: 1.2; }
.hp-rel .rel__top p { opacity: .9; }
.hp-motto { font-weight: 600; font-size: 1.125rem; background: color-mix(in srgb, var(--acc) 12%, #fff); padding: .75rem 1rem; border-radius: 10px; }
.hp-day { padding-top: .25rem; }
.hp-day h2 { font-size: 1.1875rem; color: var(--acc); border-bottom: 2px solid color-mix(in srgb, var(--acc) 30%, #fff); padding-bottom: .25rem; margin-bottom: .5rem; }
.hp-day ul { display: grid; gap: .5rem; }
.hp-day li { display: grid; grid-template-columns: 3.75rem 1fr; gap: .75rem; font-size: 1.125rem; }
.hp-day li small { display: block; color: var(--muted); font-size: .9375rem; }
.hp-day.is-today { background: color-mix(in srgb, var(--acc) 8%, #fff); margin: 0 -1.25rem; padding: .75rem 1.25rem; }
.hp-day.is-past { opacity: .55; }
.hp-foot { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .5rem; display: grid; gap: .375rem; font-size: .9375rem; color: var(--ink-2); }
.hp-screen { margin: 0; background: #000; }
.hp-screen .screen { cursor: none; }
.connected { background: var(--primary-soft); border: 2px solid var(--primary); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; display: grid; gap: .5rem; }
.connected strong { font-size: 1.125rem; }
.connected a { word-break: break-all; }
.connected .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.qr-sheet { text-align: center; }
.qr-sheet svg { width: 90mm; height: 90mm; }
.qr-sheet h1 { font-size: 30pt; margin-bottom: 6mm; }
.qr-sheet p { font-size: 16pt; margin-top: 6mm; }
.saved.is-bad { color: var(--danger); }
.saved.is-bad svg { display: none; }
.out__link { font-size: .9375rem; color: var(--ink-2); margin-top: .25rem; }
.out [hidden] { display: none !important; }
.connected p { color: var(--ink-2); }
.connected .row span { font-weight: 600; min-width: 11rem; }
.connected .hint { margin-top: .25rem; }
.qr-sheet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4mm; }
.qr-sheet .sh-logo { max-height: 22mm; }
.qr-sheet h1 { color: var(--acc); max-width: 150mm; line-height: 1.15; }
.qr-sheet p { max-width: 150mm; line-height: 1.4; }
.qr-sheet .qr-url { font-size: 12pt; color: #555; word-break: break-all; }
.tpl-kontrast.qr-sheet h1 { color: #000; }
.input[readonly] { background: var(--bg); color: var(--ink-2); cursor: default; }

/* =====================================================================
   Gestaltung v3 „Der Aushang“ (siehe Gestaltung.md)
   Papier statt Karten, Wochenraster, Uhrzeit als Schrift, eine gelbe Markierung, Daumen zuerst.
   ===================================================================== */
.t, .num { font-stretch: 80%; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl { background: linear-gradient(transparent 60%, var(--mark) 60%, var(--mark) 92%, transparent 92%); padding-inline: .05em; }

/* Papier statt Karten: keine weichen Schatten, kleine Ecken */
.card, .panel, .setup, .out, .note-from, .preview-box, .form-card, .backup, .pilot-cta, .connected, .hint, .empty, .dish, .entry { border-radius: var(--radius); box-shadow: none; }
.section--white { background: var(--card); }

/* Kopfzeile flacher */
.site-header { background: var(--card); }
@media (max-width: 760px) { :root { --header-h: 3.75rem; } .site-header .wrap { min-height: var(--header-h); } .logo { font-size: 1.125rem; } .logo__img { width: 2rem; height: 2rem; } }

/* Tagesmarke über Abschnitten: die Seite liest sich wie eine Woche */
.daytab { display: flex; align-items: baseline; gap: .75rem; border-top: 2px solid var(--ink); padding-top: .5rem; margin-bottom: 1.25rem; font-size: 1rem; color: var(--muted); }
.daytab b { font-stretch: 80%; font-weight: 800; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.section-head h2, .story h2 { font-size: clamp(2rem, 5.5vw, 3.25rem); }

/* Startseite: Kopf */
.hero3 { padding-block: clamp(1.75rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
@media (max-width: 960px) { .hero3 { grid-template-columns: 1fr; } }
.hero3 h1 { font-size: clamp(2.6rem, 11.5vw, 5rem); letter-spacing: -.01em; }
.hero3 .lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--ink-2); margin-top: 1.125rem; max-width: 34rem; }
.hero3 .hero__cta { margin-top: 1.5rem; }
.hero3 .made-in { margin-top: 1rem; }
.outputs-line { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .375rem 1rem; font-size: 1rem; color: var(--ink-2); }
.outputs-line span { display: inline-flex; align-items: center; gap: .375rem; }
.outputs-line span::before { content: ""; width: .625rem; height: .625rem; background: var(--primary); border-radius: 1px; }
@media (max-width: 560px) { .hero3 .hero__cta .btn { flex: 1 1 100%; } }

/* Wand mit Aushängen: Wochenraster im Hintergrund, Klebestreifen statt Reißzwecken */
.wall { position: relative; aspect-ratio: 5 / 4; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 7)); }
.wall__days { position: absolute; inset: .375rem 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); font-stretch: 80%; font-weight: 700; font-size: .8125rem; color: var(--muted); padding-left: .375rem; }
.wall__days .is-today { color: var(--ink); }
.wall__days .is-today::after { content: ""; display: block; width: 1.25rem; height: 3px; background: var(--mark); margin-top: 2px; }
.sheet-img { position: absolute; background: #fff; box-shadow: var(--paper-shadow); }
.sheet-img img { display: block; width: 100%; height: auto; }
.sheet-img--week { left: 3%; top: 16%; width: 74%; transform: rotate(-1.2deg); }
.sheet-img--day { right: 3%; bottom: 5%; width: 33%; transform: rotate(2deg); }
.tape { position: absolute; top: -.7rem; left: 50%; width: 4.25rem; height: 1.4rem; margin-left: -2.125rem; background: rgba(243, 201, 105, .82); transform: rotate(-3deg); z-index: 2; }
.sheet-img--day .tape { width: 2.75rem; margin-left: -1.375rem; transform: rotate(4deg); }
@media (max-width: 560px) { .wall { aspect-ratio: 1 / 1; } .sheet-img--week { width: 84%; top: 14%; } .sheet-img--day { width: 42%; } }

/* Startseite: Bänder auf dem Handy waagerecht wischbar statt endlos lang */
@media (max-width: 760px) {
  .tplrow { display: flex; overflow-x: auto; gap: .875rem; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
  .tplrow::-webkit-scrollbar { display: none; }
  .tplrow figure { flex: 0 0 66%; scroll-snap-align: start; }
}
.tplrow img, .gallery img { box-shadow: none; border: 1px solid var(--line); }

/* Ehrliche Liste statt Kacheln */
.plainlist li { border-left: 0; padding-left: 0; padding-block: .875rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.5rem 1fr; gap: .125rem .5rem; }
.plainlist li::before { content: "–"; grid-row: span 2; font-weight: 800; color: var(--primary); }
.plainlist li:last-child { border-bottom: 1px solid var(--line); }

/* Fragen als linierte Liste */
.faq { gap: 0; border-top: 2px solid var(--ink); }
.faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq summary { padding: 1.125rem 0; }
.faq details p { padding: 0 0 1.25rem; }

/* Notiz von Niklas: ein Zettel */
.note-from { background: var(--card); border: 1px solid var(--line); box-shadow: var(--paper-shadow); transform: rotate(-.4deg); }
.note-from__avatar { border-radius: 4px; background: var(--mark); color: var(--ink); font-stretch: 80%; }

/* Pilot: dunkle Tinte statt grüner Fläche */
.pilot { background: var(--ink); }
.pilot__lead, .pilot .checks span, .price-box span { color: #c9d1cc; }
.pilot .checks svg { color: var(--mark); }
.price-box { background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); }
.price-box b { font-stretch: 80%; font-size: 2rem; }
.pilot + .site-footer { background: #101813; }

/* Fester Knopf unten auf dem Handy, sobald der Kopf weggescrollt ist */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .2s ease; }
  .mcta .btn { flex: 1; }
  body.show-mcta .mcta { transform: none; }
  body.show-mcta .site-footer { padding-bottom: 6rem; }
}

/* ===================== Werkzeug v3 ===================== */
.app { padding-block: 1rem 6rem; }
.app-top h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
.saved { font-weight: 500; color: var(--muted); }
.saved svg { color: var(--primary); }

/* Erster Besuch: erst das Ergebnis zeigen */
.welcome { border-top: 2px solid var(--ink); background: var(--card); border-bottom: 1px solid var(--line); padding: 1.25rem var(--gutter); margin: 0 calc(-1 * var(--gutter)) 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 761px) { .welcome { margin-inline: 0; border: 1px solid var(--line); border-top: 2px solid var(--ink); } }
.welcome h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
.welcome p { color: var(--ink-2); }
.welcome ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; counter-reset: w; }
.welcome li { counter-increment: w; border-top: 3px solid var(--line); padding-top: .375rem; font-size: .9375rem; line-height: 1.25; color: var(--ink-2); }
.welcome li::before { content: counter(w); display: block; font-stretch: 80%; font-weight: 800; font-size: 1.375rem; color: var(--ink); }
.welcome li:first-child { border-top-color: var(--mark); }
.welcome__cta { display: flex; flex-wrap: wrap; gap: .625rem; }
@media (max-width: 560px) { .welcome__cta .btn { flex: 1 1 100%; } }

/* Kopf: Haus und Woche kompakt */
.weeknav__row { flex-wrap: nowrap; }
.weeknav__label { min-width: 0; background: transparent; border-block: 1px solid var(--line); border-radius: 0; font-stretch: 80%; }
.icon-round { border-radius: 4px; }
@media (max-width: 760px) {
  .setup { padding: 1rem; gap: 1rem; }
  .weeknav__row { flex-wrap: wrap; }
  .weeknav__row .weeknav__label { flex: 1 1 0; }
  #next-week { order: 3; flex: 1 1 100%; }
}

/* Schritte als Wochenleiste */
.stepper { gap: 0; margin: 1.25rem 0 1rem; border-bottom: 1px solid var(--line); }
.stepper button { background: transparent; border: 0; border-bottom: 4px solid transparent; border-radius: 0; padding: .625rem .5rem .5rem; margin-bottom: -1px; }
.stepper button b { background: transparent; border: 2px solid var(--line-2); border-radius: 4px; font-stretch: 80%; }
.stepper button[aria-selected="true"] { background: transparent; border-bottom-color: var(--mark); }
.stepper button[aria-selected="true"] b { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper button:hover b { border-color: var(--ink); }
@media (max-width: 760px) {
  .stepper { position: sticky; top: var(--header-h); z-index: 40; background: var(--bg); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: calc(-1 * var(--gutter)); padding-inline: calc(var(--gutter) - .25rem); }
  .stepper button { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .125rem; padding: .5rem .125rem .375rem; }
  .stepper button b { grid-row: auto; width: 1.75rem; height: 1.75rem; font-size: .9375rem; }
  .stepper button span { font-size: .8125rem; font-weight: 600; }
  .stepper button small { display: none; }
}

/* Bereiche */
.panel__head h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
@media (max-width: 760px) {
  .panel { border-inline: 0; border-radius: 0; margin-inline: calc(-1 * var(--gutter)); padding: 1rem var(--gutter) 0; }
  .panel__head { margin-bottom: .75rem; }
  .panel__head p { font-size: 1rem; }
}

/* Tage: eine wischbare Leiste, heute gelb markiert */
.daypills button { border-radius: 4px; }
.daypills button .count { font-stretch: 80%; }
.daypills button.is-today { box-shadow: inset 0 -4px 0 var(--mark); }
.daypills button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) {
  .daypills { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--gutter)) 1rem; padding: .5rem var(--gutter) .5rem; scrollbar-width: none; }
  .daypills::-webkit-scrollbar { display: none; }
  .daypills button { flex: 0 0 auto; flex-direction: column; gap: 0; min-width: 3.75rem; min-height: 3.75rem; padding: .375rem .5rem; line-height: 1.1; scroll-snap-align: center; position: relative; font-stretch: 80%; font-size: 1.125rem; font-weight: 800; }
  .daypills button small { font-size: .75rem; font-weight: 500; }
  .daypills button .count { position: absolute; top: -.375rem; right: -.375rem; min-width: 1.25rem; height: 1.25rem; font-size: .75rem; background: var(--primary); color: #fff; }
  .daypills button[aria-pressed="true"] .count { background: var(--mark); color: var(--ink); }
}

/* Einträge: Uhrzeit groß und schmal */
.entry { background: var(--card); }
.entry .e-zeit { font-stretch: 80%; font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .entry { grid-template-columns: 6.75rem 1fr; grid-template-areas: "zeit titel" "ort del"; gap: .5rem; padding: .625rem; }
  .entry .del { width: 2.75rem; height: 2.75rem; justify-self: end; }
  .entry .e-ort { font-size: 1rem; min-height: 2.75rem; }
  .add-row .btn { flex: 1 1 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .copy-row select, .copy-row .btn { flex: 1 1 100%; width: 100%; }
}
.chip { border-radius: 4px; display: inline-flex; align-items: center; gap: .375rem; }
.chip b { font-stretch: 80%; font-variant-numeric: tabular-nums; color: var(--primary); margin-right: 0; }

/* Weiter-Leiste: auf dem Handy immer im Daumenbereich */
@media (max-width: 760px) {
  .nextbar { position: sticky; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); margin: 1.25rem calc(-1 * var(--gutter)) 0; padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: .5rem; }
  .nextbar .btn { flex: 1; min-width: 0; padding-inline: .75rem; }
  .nextbar .btn-secondary { flex: 0 0 auto; }
  .toast { bottom: 5.5rem; border-radius: 4px; }
}

/* Aussehen: auf dem Handy zuerst die Vorschau */
.tpl { border-radius: 4px; }
@media (max-width: 1000px) { .look > .preview-box { order: -1; } }
@media (max-width: 760px) {
  .preview-box { border: 0; padding: 0; background: transparent; }
  .tpls { display: flex; overflow-x: auto; gap: .5rem; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
  .tpls .tpl { flex: 0 0 7.5rem; }
}
.segmented { border-radius: 4px; }
.segmented button { border-radius: 3px; }
.segmented button[aria-pressed="true"] { background: var(--ink); }

/* Fertig: Ausgaben als Liste */
.out { background: var(--card); }
@media (max-width: 760px) {
  .outputs { gap: 0; border-top: 1px solid var(--line); }
  .out { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1rem 0; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; background: transparent; }
  .out .card__icon { display: none; }
  .out h3, .out p { grid-column: 1; }
  .out p { font-size: .9375rem; }
  .out > .btn { grid-column: 2; grid-row: 1 / span 2; }
  .out .out__link, .out #print-qr { grid-column: 1 / -1; }
}
.backup { background: transparent; border: 1px solid var(--line); }
.pilot-cta { background: var(--ink); }
.daytab--dark { border-top-color: #fff; color: #9fb0a6; }
.daytab--dark b { color: #fff; }
@media (max-width: 1000px) { .look { grid-template-columns: minmax(0, 1fr); } }
.preview-box__head { flex-wrap: wrap; }
@media (max-width: 760px) { .preview-box__head .segmented { width: 100%; } .preview-box__head .segmented button { flex: 1; } }
@media (max-width: 760px) {
  .entry { grid-template-columns: 7.5rem minmax(0, 1fr) 2.75rem; grid-template-areas: "zeit titel titel" "ort ort del"; }
  .entry .e-zeit { padding-inline: .625rem; font-size: 1.1875rem; }
  .entry input[type="time"]::-webkit-calendar-picker-indicator { margin-left: 2px; padding: 0; }
}

/* =====================================================================
   v4: Redaktioneller Auftritt mit Scroll-Geschichte
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* Kopf: übergroße Schrift, Zeilen erscheinen nacheinander */
.hx { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; padding-block: clamp(2rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .hx { grid-template-columns: 1fr; } }
.mega { font-size: clamp(3.25rem, 13.5vw, 9.5rem); line-height: .9; letter-spacing: -.025em; font-stretch: 72%; font-weight: 800; }
.mega .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.mega .ln > span { display: inline-block; animation: lnUp .9s var(--ease) both; }
.mega .ln:nth-child(2) > span { animation-delay: .08s; }
.mega .ln:nth-child(3) > span { animation-delay: .16s; }
.mega .ln:nth-child(4) > span { animation-delay: .24s; }
@keyframes lnUp { from { transform: translateY(105%); } to { transform: none; } }
.mega .hl { background: linear-gradient(transparent 62%, var(--mark) 62%, var(--mark) 90%, transparent 90%); }
.hx__side .lead { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); color: var(--ink-2); }
.hx__side .hero__cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hx__side .made-in { margin-top: 1rem; color: var(--muted); font-size: 1rem; }
.hx__side { animation: fadeIn .9s .35s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .hx__side .hero__cta .btn { flex: 1 1 100%; } }

/* Laufband wie auf dem Foyer-Bildschirm */
.ticker { background: var(--ink); color: #fff; overflow: hidden; border-block: 1px solid #000; }
.ticker__track { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker__set { display: flex; margin: 0; }
.ticker__set span { display: inline-flex; align-items: center; gap: .625rem; padding: 1rem 1.75rem 1rem 0; font-size: clamp(1.125rem, 2vw, 1.5rem); white-space: nowrap; }
.ticker__set span::after { content: ""; width: .5rem; height: .5rem; background: var(--mark); margin-left: 1.75rem; }
.ticker__set b { font-stretch: 75%; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mark); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Geschichte: feste Bühne, Text zieht vorbei */
.story3 { padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.story3__title { font-size: clamp(2.25rem, 7vw, 5rem); line-height: .95; max-width: 16ch; }
.story3__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.stage { position: sticky; top: calc(var(--header-h) + 1.5rem); height: calc(100vh - var(--header-h) - 3rem); max-height: 46rem; min-height: 26rem; border-top: 2px solid var(--ink);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 20%); background-color: var(--bg); }
.stage__week { position: absolute; inset: .5rem 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); padding-left: .5rem; font-stretch: 78%; font-weight: 800; font-size: 1rem; color: var(--line-2); z-index: 3; }
.sw { transition: color .3s; }
.sw::after { content: ""; display: block; height: 3px; width: 0; background: var(--mark); margin-top: 3px; transition: width .35s var(--ease); }
.stage[data-step="1"] .sw-1, .stage[data-step="2"] .sw-1, .stage[data-step="3"] .sw-3, .stage[data-step="4"] .sw-3, .stage[data-step="5"] .sw-5 { color: var(--ink); }
.stage[data-step="1"] .sw-1::after, .stage[data-step="2"] .sw-1::after, .stage[data-step="3"] .sw-3::after, .stage[data-step="4"] .sw-3::after, .stage[data-step="5"] .sw-5::after { width: 1.5rem; }
.frame { position: absolute; inset: 2.75rem 0 1rem; display: grid; place-items: center; opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .45s var(--ease), transform .6s var(--ease); pointer-events: none; }
.stage[data-step="1"] .frame--1, .stage[data-step="2"] .frame--2, .stage[data-step="3"] .frame--3, .stage[data-step="4"] .frame--4, .stage[data-step="5"] .frame--5 { opacity: 1; transform: none; }

/* Szene 1: Eingabe */
.m-editor { width: min(24rem, 90%); background: var(--card); border: 1px solid var(--line); box-shadow: var(--paper-shadow); padding: 1rem 1.125rem 1.125rem; }
.m-editor__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin-bottom: .5rem; }
.m-editor__head b { font-stretch: 78%; font-weight: 800; font-size: 1.375rem; }
.m-editor__head span { font-size: .875rem; color: var(--muted); }
.m-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; opacity: 0; transform: translateX(-14px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.m-row b, .m-tv__row b, .m-phone__row b, .m-day__row b, .m-editor .m-chips b { font-stretch: 78%; font-weight: 800; font-variant-numeric: tabular-nums; }
.stage[data-step="1"] .m-row { opacity: 1; transform: none; }
.stage[data-step="1"] .m-row:nth-of-type(2) { transition-delay: .15s; }
.stage[data-step="1"] .m-row:nth-of-type(3) { transition-delay: .35s; }
.stage[data-step="1"] .m-row:nth-of-type(4) { transition-delay: .55s; }
.stage[data-step="1"] .m-row:nth-of-type(5) { transition-delay: .75s; }
.m-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; }
.m-chips span { border: 1px solid var(--line-2); padding: .25rem .5rem; font-size: .8125rem; border-radius: 3px; color: var(--ink-2); }
.m-chips b { color: var(--primary); }

/* Szene 2: Aushang */
.m-sheet { position: relative; width: 94%; background: #fff; box-shadow: var(--paper-shadow); transform: rotate(-1.5deg); }
.m-sheet img { display: block; width: 100%; height: auto; }
.m-sheet .tape { top: -.75rem; }

/* Szene 3: Änderung im Tagesblatt */
.m-day { width: min(22rem, 86%); aspect-ratio: 1 / 1.3; background: #fff; box-shadow: var(--paper-shadow); padding: 1.5rem 1.375rem; transform: rotate(1deg); }
.m-day__wd { font-stretch: 72%; font-weight: 800; font-size: 2.75rem; line-height: 1; color: var(--primary); }
.m-day__sub { font-size: .875rem; color: var(--muted); border-bottom: 2px solid var(--primary); padding-bottom: .5rem; margin-bottom: .75rem; }
.m-day__row { display: grid; grid-template-columns: 3.75rem 1fr; gap: .625rem; font-size: 1.375rem; line-height: 1.2; padding: .625rem 0; border-bottom: 1px solid var(--line); }
.m-day__row span { position: relative; }
.m-day__row s { position: relative; text-decoration: none; display: inline-block; color: var(--ink); transition: color .4s .3s; }
.m-day__row s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 3px; background: var(--danger); transform: scaleX(0); transform-origin: left; transition: transform .45s .25s var(--ease); }
.m-day__row ins { display: block; text-decoration: none; background: var(--mark); padding: 0 .25rem; margin-top: .25rem; opacity: 0; transform: translateY(6px); transition: opacity .4s .75s, transform .45s .75s var(--ease); }
.stage[data-step="3"] .m-day__row s, .stage[data-step="4"] .m-day__row s { color: var(--muted); }
.stage[data-step="3"] .m-day__row s::after { transform: scaleX(1); }
.stage[data-step="3"] .m-day__row ins { opacity: 1; transform: none; }

/* Szene 4: Foyer und Handy */
.frame--4 { place-items: center start; }
.m-tv { width: 88%; aspect-ratio: 16 / 9; background: #0f1512; color: #fff; border: 10px solid #000; border-radius: 6px; padding: 4% 5%; display: grid; align-content: start; gap: 3%; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.m-tv__top { display: flex; justify-content: space-between; align-items: center; font-size: clamp(.75rem, 1.4vw, 1rem); opacity: .85; }
.m-tv__top small { opacity: .7; }
.m-tv__top b { font-stretch: 75%; font-weight: 800; font-size: 2.2em; opacity: 1; }
.m-tv__row { display: grid; grid-template-columns: 4.5em 1fr; font-size: clamp(.875rem, 1.7vw, 1.25rem); padding: .25em .5em; }
.m-tv__row.is-past { opacity: .4; }
.m-tv__row.is-now { background: var(--mark); color: var(--ink); }
.m-phone { position: absolute; right: 0; bottom: 4%; width: 38%; min-width: 9.5rem; aspect-ratio: 9 / 18; background: #fff; border: 7px solid #111; border-radius: 22px; padding: 1.25rem .75rem .75rem; box-shadow: 0 18px 36px -14px rgba(0,0,0,.45); font-size: .75rem; transform: translateY(24px); opacity: 0; transition: opacity .45s .35s, transform .55s .35s var(--ease); }
.stage[data-step="4"] .m-phone { opacity: 1; transform: none; }
.m-phone__head { font-weight: 700; font-size: .8125rem; border-bottom: 2px solid var(--primary); padding-bottom: .25rem; }
.m-phone__day { color: var(--primary); font-weight: 700; margin: .5rem 0 .25rem; }
.m-phone__row { display: grid; grid-template-columns: 2.5rem 1fr; padding: .25rem 0; border-bottom: 1px solid var(--line); }
.m-phone__row.is-new { background: var(--mark-soft); box-shadow: inset 3px 0 0 var(--mark); padding-left: .25rem; }
.m-phone__foot { margin-top: .5rem; color: var(--muted); font-size: .6875rem; }

/* Szene 5: neue Woche */
.m-weeks { position: relative; width: min(22rem, 80%); aspect-ratio: 1 / 1.2; }
.m-weeks__sheet { position: absolute; inset: 0; background: #fff; box-shadow: var(--paper-shadow); padding: 1.5rem; display: grid; align-content: start; gap: .25rem; }
.m-weeks__sheet b { font-stretch: 72%; font-weight: 800; font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; }
.m-weeks__sheet span { color: var(--muted); }
.m-weeks__sheet--old { transform: rotate(-5deg) translate(-8%, 4%); opacity: .7; }
.m-weeks__sheet--new { transform: translateX(14%) rotate(2deg); transition: transform .7s .15s var(--ease); }
.stage:not([data-step="5"]) .m-weeks__sheet--new { transform: translateX(40%) rotate(8deg); }
.m-weeks__sheet em { font-style: normal; justify-self: start; margin-top: auto; background: var(--mark); padding: .25rem .5rem; font-weight: 700; }
.m-weeks__sheet--new { grid-template-rows: auto auto 1fr; }

/* Textabschnitte */
.beats { display: grid; padding-bottom: 30vh; }
.beat { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: .875rem; padding-block: 2rem; opacity: .28; transition: opacity .4s; }
.beat.is-active { opacity: 1; }
.beat__time { font-stretch: 78%; font-weight: 800; font-size: 1.125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.beat__time b { color: var(--ink); margin-right: .375rem; }
.beat h3 { font-stretch: 75%; font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; }
.beat p:not(.beat__time) { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); color: var(--ink-2); max-width: 30rem; }
.beat .btn { align-self: flex-start; margin-top: .5rem; }

/* Handy: Bühne oben fest, Text zieht darunter vorbei */
@media (max-width: 900px) {
  .story3__grid { grid-template-columns: 1fr; gap: 0; }
  .stage { top: var(--header-h); height: 50vh; min-height: 18rem; max-height: none; margin-inline: calc(-1 * var(--gutter)); z-index: 2; border-bottom: 1px solid var(--line); }
  .beats { position: relative; z-index: 3; padding-bottom: 10vh; }
  .beat { min-height: 62vh; justify-content: flex-end; padding-block: 1.5rem; opacity: 1; }
  .beat > * { position: relative; }
  .beat { background: linear-gradient(transparent 0, transparent 30%, var(--bg) 30%); }
  .m-tv { width: 92%; border-width: 6px; }
  .m-phone { width: 34%; min-width: 7.5rem; border-width: 5px; border-radius: 16px; padding: .875rem .5rem .5rem; font-size: .625rem; }
  .m-day { width: min(17rem, 70%); padding: 1rem; }
  .m-day__wd { font-size: 2rem; }
  .m-day__row { font-size: 1.0625rem; padding: .375rem 0; }
}

/* Weitere Abschnitte erscheinen beim Scrollen */
.rv.rv-wait { opacity: 0; transform: translateY(18px); }
.rv { transition: opacity .6s var(--ease), transform .7s var(--ease); }

/* Großer Schriftzug am Ende */
.bigword { overflow: hidden; background: var(--ink); color: #fff; border-top: 1px solid #000; }
.bigword span { display: block; font-stretch: 70%; font-weight: 800; font-size: 23.5vw; line-height: .78; letter-spacing: -.03em; padding: 3vw var(--gutter) 0; transform: translateY(8%); white-space: nowrap; }
.pilot + .bigword { border-top: 1px solid rgba(255,255,255,.12); }
.bigword + .site-footer { background: var(--ink); color: #9fb0a6; }
.bigword + .site-footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mega .ln > span, .hx__side { animation: none; }
  .ticker__track { animation: none; }
  .frame, .m-row, .m-phone, .m-day__row ins, .m-day__row s::after, .m-weeks__sheet--new, .rv { transition: none !important; }
  .rv.rv-wait { opacity: 1; transform: none; }
}
.stage { overflow: hidden; }
@media (max-width: 900px) {
  .stage { z-index: 4; }
  .beats { z-index: 1; }
  .beat { background: none; min-height: 70vh; justify-content: flex-end; padding-bottom: 3rem; }
  .beat:first-child { min-height: 55vh; }
}
.tpl-kontrast .wk th.we { background: #000; color: #fff; }
.tpl-warm .wk .it:last-child, .tpl-kontrast .wk .it:last-child { border-bottom: 0; }
.tpl-festlich .sh-week b::after { content: ""; }
.tpl-festlich .sh-week b { margin-right: .5em; }
.tpl-festlich .sh-week span::before { content: "\00b7"; margin-right: .5em; }
/* Bildschirm und Angehörigenseite im neuen Schriftbild */
.scr-clock, .scr-house, .scr-title { font-stretch: 75%; }
.scr-clock { font-weight: 800; letter-spacing: -.01em; }
.scr-item b, .hp-day li b, .rel li b { font-stretch: 75%; font-weight: 800; font-variant-numeric: tabular-nums; }
.scr-date { font-stretch: 80%; font-weight: 800; }
.tpl img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border: 1px solid var(--line); background: #fff; }
.tpl[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--mark); }
.bigword span { font-size: 21vw; }

/* =====================================================================
   v5: ruhiger, hochwertiger – Fotos, klare Zeilen, heller Fußbereich
   ===================================================================== */
:root { --bg: #f6f5f1; --card: #ffffff; --line: #e1ded6; --line-2: #c9c5bb; }

/* Kopf: zwei feste Zeilen, keine Markierung, Foto mit echtem Tagesblatt */
.hero5 { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.eyebrow5 { font-size: 1rem; color: var(--muted); max-width: 40rem; margin-bottom: 1.25rem; animation: fadeIn .8s var(--ease) both; }
.h5 { font-stretch: 72%; font-weight: 800; line-height: .92; letter-spacing: -.02em; font-size: clamp(3rem, 7.2vw, 7.75rem); }
.h5 .l1, .h5 .l2 { display: block; white-space: nowrap; animation: fadeIn .9s var(--ease) both; }
.h5 .l2 { color: var(--primary); animation-delay: .12s; }
.br-m { display: none; }
@media (max-width: 700px) { .h5 { font-size: 12.4vw; } .br-m { display: inline; } }
.hero5__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(1.75rem, 4vw, 3.25rem); }
@media (max-width: 900px) { .hero5__grid { grid-template-columns: 1fr; } }
.hero5__text { animation: fadeIn .9s .25s var(--ease) both; }
.hero5__text .lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); color: var(--ink-2); max-width: 32rem; }
.hero5__text .hero__cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero5__text .made-in { margin-top: 1rem; color: var(--muted); font-size: 1rem; }
@media (max-width: 560px) { .hero5__text .hero__cta .btn { flex: 1 1 100%; } }
.hero5__visual { position: relative; margin: 0 0 3rem; animation: fadeIn 1s .35s var(--ease) both; }
.hero5__photo { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 35% 45%; }
.hero5__sheet { position: absolute; left: -5%; bottom: -9%; width: 32%; background: #fff; box-shadow: var(--paper-shadow); transform: rotate(-3deg); }
.hero5__sheet img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .hero5__visual { margin-inline: calc(-1 * var(--gutter)); } .hero5__sheet { left: 5%; width: 36%; bottom: -10%; } }

/* Laufband ruhiger */
.ticker__set b { color: #fff; }
.ticker__set span { color: #c9d1cc; }
.ticker__set span::after { background: #6fb08f; width: .375rem; height: .375rem; }

/* Fotoband */
.band { position: relative; margin: 0; }
.band img { display: block; width: 100%; height: clamp(18rem, 44vw, 36rem); object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 14, 12, .62), rgba(10, 14, 12, 0) 60%); }
.band figcaption { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3.25rem); z-index: 1; color: #fff; font-stretch: 74%; font-weight: 800; font-size: clamp(1.875rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -.01em; }
.band figcaption span { display: block; opacity: .75; }

/* Von mir */
.me { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
@media (max-width: 760px) { .me { grid-template-columns: 1fr; } .me__photo { max-width: 22rem; } }
.me__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.me__text h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); margin-bottom: 1.25rem; }
.me__text p { font-size: 1.1875rem; color: var(--ink-2); max-width: 34rem; }
.me__text p + p { margin-top: 1rem; }
.me .sig { font-family: var(--serif); font-style: italic; font-size: 1.625rem; color: var(--ink); margin-top: 1.5rem; }

/* Fußbereich hell und aufgeräumt */
.foot5 { background: var(--bg); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; color: var(--ink-2); font-size: 1rem; }
.foot5__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 900px) { .foot5__grid { grid-template-columns: 1fr 1fr; } .foot5__brand { grid-column: 1 / -1; } }
.foot5 h2 { font-size: .8125rem; font-stretch: 100%; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .875rem; line-height: 1.2; }
.foot5 nav { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.foot5 a { color: var(--ink); text-decoration: none; }
.foot5 a:hover { text-decoration: underline; }
.foot5__brand p { margin-top: .875rem; max-width: 22rem; }
.foot5__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
body.show-mcta .foot5 { padding-bottom: 6rem; }

/* Geschichte auf dem Handy: jede Szene mit eigenem Bild über dem Text */
.stage--inline { display: none; }
@media (max-width: 900px) {
  #stage { display: none; }
  .beats { padding-bottom: 1rem; }
  .beat, .beat:first-child { min-height: 0; justify-content: flex-start; padding-block: 2rem 2.5rem; border-top: 1px solid var(--line); opacity: 1; background: none; }
  .beat:first-child { border-top: 0; padding-top: .5rem; }
  .stage.stage--inline { display: block; position: relative; top: auto; height: auto; min-height: 0; max-height: none; aspect-ratio: 1 / .95; margin: 0 calc(-1 * var(--gutter)) 1.25rem; z-index: auto; border-bottom: 0; overflow: hidden; }
  .stage--inline .m-weeks { width: 64%; }
  .stage--inline .m-sheet { width: 92%; }
  .beat h3 { font-size: clamp(1.875rem, 8vw, 2.5rem); }
}
@media (max-width: 900px) {
  .stage--inline .m-tv { width: 74%; border-width: 5px; }
  .stage--inline .m-tv__row { font-size: .8125rem; }
  .stage--inline .m-phone { width: 46%; min-width: 0; aspect-ratio: 9 / 15; right: 3%; bottom: 3%; font-size: .6875rem; padding: .875rem .625rem .5rem; }
  .stage--inline .m-phone__row { grid-template-columns: 2.25rem 1fr; }
}
/* Nur sehr lange Wörter trennen (weiche Trennstellen ab 14 Buchstaben), keine automatische Trennung des Browsers */
.sheet .wk td, .sheet .day-item, .sheet .day-menu, .sheet .sh-motto { -webkit-hyphens: manual; hyphens: manual; }