/* ==========================================================================
   Ferienplaner design system (2026 redesign)
   Source of truth: "Ferienplaner Design System" (tokens.json, components).
   The site's only stylesheet: every component uses the fp- prefix.
   ========================================================================== */

/* Fonts: self-hosted Be Vietnam Pro (SIL OFL 1.1, see /fonts/OFL-BeVietnamPro.txt) */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --surface-page: #fdfbf7;
  --surface-card: #ffffff;
  --surface-sand: #fff7e8;
  --surface-sand-strong: #f3e7cc;
  --surface-cream: #fbf6ec;
  --surface-inverse: #173251;
  --border-soft: #ebe3d3;
  --border-subtle: #f3ecdd;
  --border-control: #9c8a5e;
  --ink-strong: #1b2f4d;
  --ink: #324763;
  --ink-muted: #5a6b85;
  --ink-sand: #6b5a33;
  --ink-on-dark: #ffffff;
  --ink-on-dark-muted: #d0d9e2;
  --action-primary: #1a6ad8;
  --action-primary-hover: #1550b8;
  --action-navy: #16336c;
  --action-navy-hover: #0f2550;
  --link: #1550b8;
  --link-hover: #16336c;
  --focus-ring: #1a6ad8;
  --nav-active: #eef5fb;
  --day-vacation: #ffcb47;
  --day-holiday: #c8432a;
  --day-weekend: #f3ecdd;
  --day-bridge: #8bcb2f;
  --day-today: #1a6ad8;
  --savings-bg: #eaf6c8;
  --savings-ink: #3f6b12;
  --shadow-calendar: 0 16px 40px 0 hsl(35 50% 40% / 0.12);
  --shadow-raised: 0 2px 8px 0 hsl(214 46% 24% / 0.08);
  --shadow-segment: 0 1px 3px 0 hsl(214 46% 24% / 0.15);
  --fp-space-1: 4px; --fp-space-2: 8px; --fp-space-3: 12px; --fp-space-4: 16px; --fp-space-5: 20px;
  --fp-space-6: 24px; --fp-space-8: 32px; --fp-space-10: 40px; --fp-space-16: 64px; --fp-space-18: 72px;
  --fp-radius-xs: 4px; --fp-radius-sm: 6px; --fp-radius-md: 8px; --fp-radius-lg: 10px; --fp-radius-xl: 12px;
  --container-max: 1280px;
  --gutter-mobile: 16px;
  --header-height: 72px;
  --touch-target: 44px;
  --button-height: 48px;
  --font-base: "Be Vietnam Pro", "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; margin: 0; overflow-x: clip; background: var(--surface-page); color: var(--ink); font-family: var(--font-base); font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; transition: color 180ms ease; }
a:hover { color: var(--link-hover); }
main.fp-main { display: block; }
.fp { font-family: var(--font-base); color: var(--ink); }
.fp a { color: var(--link); }
.fp a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fp-container { width: min(100% - 2 * var(--gutter-mobile), var(--container-max)); margin-inline: auto; }
.fp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fp-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 14px; border-radius: var(--fp-radius-md); background: var(--action-navy); color: var(--ink-on-dark); }
.fp-skip:focus { left: 8px; color: var(--ink-on-dark); }

/* ---------- Button ---------- */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fp-space-2); min-height: var(--button-height); padding: 0 22px; border: 1px solid transparent; border-radius: var(--fp-radius-md); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 180ms ease, color 180ms ease; }
.fp-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.fp .fp-btn--primary, .fp-btn--primary, .fp-btn--primary:visited { background: var(--action-primary); color: var(--ink-on-dark); }
.fp .fp-btn--primary:hover, .fp-btn--primary:hover { background: var(--action-primary-hover); color: var(--ink-on-dark); }
.fp .fp-btn--navy, .fp-btn--navy, .fp-btn--navy:visited { background: var(--action-navy); color: var(--ink-on-dark); }
.fp .fp-btn--navy:hover, .fp-btn--navy:hover { background: var(--action-navy-hover); color: var(--ink-on-dark); }
.fp .fp-btn--secondary, .fp-btn--secondary, .fp-btn--secondary:visited { background: var(--surface-card); color: var(--ink-strong); border-color: var(--border-control); }
.fp .fp-btn--secondary:hover, .fp-btn--secondary:hover { background: var(--surface-cream); color: var(--ink-strong); }

/* ---------- StateSelect ---------- */
.fp-select { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--ink); }
.fp-select__box { position: relative; display: inline-flex; }
.fp-select select { appearance: none; -webkit-appearance: none; min-height: var(--touch-target); padding: 0 36px 0 12px; border: 1px solid var(--border-control); border-radius: var(--fp-radius-md); background: var(--surface-card); color: var(--ink-strong); font: inherit; font-weight: 600; cursor: pointer; }
.fp-select__chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-strong); display: flex; }
.fp-select__submit { min-height: var(--touch-target); }
.js .fp-select__submit { display: none; }

/* ---------- SiteHeader ---------- */
.fp-header { position: relative; z-index: 100; background: var(--surface-card); border-bottom: 1px solid var(--border-soft); }
.fp-header__bar { display: flex; align-items: center; gap: var(--fp-space-10); min-height: var(--header-height); }
.fp-header__logo { display: flex; flex-shrink: 0; }
.fp-header__logo img { width: 168px; height: auto; display: block; }
.fp-header__nav ul { display: flex; gap: var(--fp-space-2); margin: 0; padding: 0; list-style: none; }
.fp .fp-header__nav a, .fp .fp-header__nav a:visited { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--fp-radius-sm); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.fp .fp-header__nav a:hover { background: var(--surface-cream); color: var(--ink-strong); }
.fp .fp-header__nav a[aria-current="page"] { background: var(--nav-active); color: var(--action-navy); font-weight: 600; }
.fp-header__cta { margin-left: auto; }
.fp-header__toggle { position: absolute; opacity: 0; pointer-events: none; }
.fp-header__menu { display: none; margin-left: auto; width: var(--touch-target); height: var(--touch-target); align-items: center; justify-content: center; border: 1px solid var(--border-soft); border-radius: var(--fp-radius-md); background: var(--surface-card); color: var(--ink-strong); cursor: pointer; }
.fp-header__toggle:focus-visible + .fp-header__menu { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 1023px) {
  .fp-header__bar { flex-wrap: wrap; gap: 0 var(--fp-space-4); min-height: 60px; }
  .fp-header__logo img { width: 140px; }
  .fp-header__menu { display: flex; }
  .fp-header__cta { display: none; }
  .fp-header__nav { display: none; width: 100%; padding: 8px 0 16px; }
  .fp-header__nav ul { flex-direction: column; gap: 2px; }
  .fp .fp-header__nav a { width: 100%; min-height: var(--touch-target); font-size: 16px; }
  .fp-header__toggle:checked ~ .fp-header__nav { display: block; }
}

/* ---------- SiteFooter ---------- */
.fp-footer { background: var(--surface-inverse); color: var(--ink-on-dark-muted); font-size: 14px; }
.fp-footer :focus-visible { outline-color: var(--ink-on-dark); }
.fp-footer__inner { display: flex; gap: var(--fp-space-16); padding: 40px 0; }
.fp-footer__brand { max-width: 420px; }
.fp-footer__brand img.fp-footer__logo { width: 160px; height: auto; display: block; filter: brightness(0) invert(1); }
.fp-footer__brand p { margin: 12px 0 16px; }
.fp-footer__store img { width: 160px; height: auto; display: block; }
.fp-footer__store small { display: block; margin-top: 6px; font-size: 12px; }
.fp-footer__col { display: flex; flex-direction: column; gap: var(--fp-space-2); }
.fp-footer__col h2 { margin: 0 0 4px; color: var(--ink-on-dark); font-size: 14px; font-weight: 700; }
.fp-footer__col ul { display: flex; flex-direction: column; gap: var(--fp-space-2); margin: 0; padding: 0; list-style: none; }
.fp.fp-footer a, .fp .fp-footer a, .fp.fp-footer a:visited { color: var(--ink-on-dark-muted); text-decoration: none; }
.fp.fp-footer a:hover, .fp .fp-footer a:hover { color: var(--ink-on-dark); text-decoration: underline; }
.fp-footer__legal { margin-left: auto; text-align: right; }
@media (max-width: 767px) {
  .fp-footer__inner { flex-direction: column; gap: var(--fp-space-6); padding: 28px 0; }
  .fp-footer__legal { margin-left: 0; text-align: left; }
}

/* ---------- Page scaffolding ---------- */
.fp-main { padding-bottom: 88px; }
.fp-page { display: flex; flex-direction: column; gap: var(--fp-space-18); padding-top: var(--fp-space-18); }
.fp-section { display: flex; flex-direction: column; gap: var(--fp-space-6); }
@media (max-width: 767px) {
  .fp-page { gap: var(--fp-space-10); padding-top: var(--fp-space-8); }
  .fp-section { gap: 14px; }
}

/* ---------- CountdownHero ---------- */
.fp-hero { background: var(--surface-sand); border-bottom: 1px solid var(--border-soft); }
.fp-hero__inner { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: var(--fp-space-16); align-items: center; padding: var(--fp-space-16) 0; }
.fp-hero__text { display: flex; flex-direction: column; gap: var(--fp-space-5); min-width: 0; }
.fp-hero__title { margin: 0 0 -4px; color: var(--ink-strong); font-size: 20px; font-weight: 700; line-height: 1.3; }
.fp-hero__value { margin: 0; color: var(--ink-strong); font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.fp-hero__label { margin: 8px 0 0; color: var(--ink-strong); font-size: 26px; font-weight: 600; line-height: 1.25; }
.fp-hero__detail { margin: 0; font-size: 17px; }
.fp-hero__detail strong { color: var(--ink-strong); }
.fp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--fp-space-3); margin-top: var(--fp-space-2); }
@media (max-width: 1023px) { .fp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-8); } }
@media (max-width: 767px) {
  .fp-hero__inner { padding: var(--fp-space-6) 0 28px; gap: var(--fp-space-4); }
  .fp-hero__text { gap: var(--fp-space-4); }
  .fp-hero__title { font-size: 17px; }
  .fp-hero__value { font-size: 64px; }
  .fp-hero__label { font-size: 21px; }
  .fp-hero__detail { font-size: 15px; }
  .fp-hero__actions .fp-btn { width: 100%; }
  .fp-hero__actions .fp-btn--secondary { display: none; }
  .fp-select { width: 100%; white-space: nowrap; }
  .fp-select__box { flex: 1; min-width: 0; }
  .fp-select select { width: 100%; }
}

/* ---------- SectionHeader ---------- */
.fp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fp-space-6); }
.fp-section-head h2 { margin: 0; color: var(--ink-strong); font-size: 32px; font-weight: 700; line-height: 1.2; }
.fp-section-head p { margin: 8px 0 0; font-size: 17px; }
.fp .fp-section-head a { font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
  .fp-section-head { flex-direction: column; align-items: flex-start; gap: var(--fp-space-2); }
  .fp-section-head h2 { font-size: 24px; }
  .fp-section-head p { font-size: 15px; margin-top: 6px; }
}

/* ---------- CalendarCard / MonthGrid / CalendarLegend ---------- */
.fp-calcard { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); padding: var(--fp-space-6); min-width: 0; }
.fp-calcard--lifted { box-shadow: var(--shadow-calendar); }
.fp-calcard__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fp-space-6); }
.fp-calcard__months--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; column-gap: var(--fp-space-8); }
.fp-calcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fp-space-3) var(--fp-space-5); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.fp .fp-calcard__foot > a { margin-left: auto; font-size: 13px; font-weight: 600; }
.fp-calcard__hint { display: none; color: var(--ink-muted); font-size: 12px; }
@media (max-width: 767px) {
  .fp-calcard { padding: var(--fp-space-4); }
  .fp-calcard__months, .fp-calcard__months--4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--fp-space-4); overscroll-behavior-x: contain; }
  .fp-calcard__months > * { scroll-snap-align: start; }
  .fp-calcard__hint { display: block; }
  .fp-month--responsive .fp-month__wd, .fp-month--responsive .fp-month__grid { gap: 4px; }
  .fp-month--responsive .fp-day { height: 40px; font-size: 15px; border-radius: var(--fp-radius-md); }
}

.fp-month { min-width: 0; }
.fp-month__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
.fp-month__title { margin: 0; color: var(--ink-strong); font-size: 16px; font-weight: 700; line-height: 1.3; }
.fp-month__note { color: var(--ink-muted); font-size: 12px; }
.fp-month__wd, .fp-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.fp-month__wd { margin-bottom: 4px; color: var(--ink-muted); font-size: 11px; text-align: center; }
.fp-day { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--fp-radius-sm); color: var(--ink-strong); font-size: 13px; }
.fp-day--weekend { background: var(--day-weekend); }
.fp-day--vacation { background: var(--day-vacation); font-weight: 600; }
.fp-day--bridge { background: var(--day-bridge); font-weight: 600; }
.fp-day--holiday { background: var(--day-holiday); color: var(--ink-on-dark); font-weight: 600; }
.fp-day--today { box-shadow: inset 0 0 0 2px var(--day-today); }

.fp-legend { display: flex; flex-wrap: wrap; gap: var(--fp-space-2) var(--fp-space-5); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink); }
.fp-legend__item { display: flex; align-items: center; gap: var(--fp-space-2); }
.fp-legend__chip { width: 14px; height: 14px; border-radius: var(--fp-radius-xs); }
.fp-legend__chip--vacation { background: var(--day-vacation); }
.fp-legend__chip--holiday { background: var(--day-holiday); }
.fp-legend__chip--weekend { background: var(--day-weekend); }
.fp-legend__chip--bridge { background: var(--day-bridge); }
.fp-legend__chip--today { box-shadow: inset 0 0 0 2px var(--day-today); }

/* ---------- FreeDayCard / FreeDayList ---------- */
.fp-freedays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fp-space-4); margin: 0; padding: 0; list-style: none; }
.fp-freeday { height: 100%; padding: var(--fp-space-5); background: var(--surface-card); border: 1px solid var(--border-soft); border-top: 4px solid var(--day-holiday); border-radius: var(--fp-radius-xl); }
.fp-freeday--vacation { border-top-color: var(--day-vacation); }
.fp-freeday__eyebrow { color: var(--ink-muted); font-size: 13px; }
.fp-freeday__title { margin: 4px 0 0; color: var(--ink-strong); font-size: 17px; font-weight: 700; line-height: 1.35; }
.fp .fp-freeday__title a { color: inherit; text-decoration: none; }
.fp .fp-freeday__title a:hover { text-decoration: underline; }
.fp-freeday__date { color: var(--ink); font-size: 14px; }
@media (max-width: 1023px) { .fp-freedays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .fp-freedays { grid-template-columns: none; gap: 0; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); }
  .fp-freedays > li + li { border-top: 1px solid var(--border-subtle); }
  .fp-freeday { display: grid; grid-template-columns: 6px minmax(0, 1fr); grid-template-areas: "bar title" "bar date" "bar eyebrow"; column-gap: 14px; row-gap: 2px; padding: 14px var(--fp-space-4); border: 0; border-radius: 0; position: relative; }
  .fp-freeday::before { content: ""; grid-area: bar; border-radius: 3px; background: var(--day-holiday); }
  .fp-freeday--vacation::before { background: var(--day-vacation); }
  .fp-freeday__eyebrow { grid-area: eyebrow; }
  .fp-freeday__title { grid-area: title; margin: 0; font-size: 16px; }
  .fp-freeday__date { grid-area: date; font-size: 14px; color: var(--ink); }
}

/* ---------- SavingsBadge ---------- */
.fp-savings { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--fp-radius-md); background: var(--savings-bg); color: var(--savings-ink); white-space: nowrap; }
.fp-savings strong { font-size: 20px; font-weight: 700; }
.fp-savings span { font-size: 13px; }

/* ---------- BridgeDayList ---------- */
.fp-bridges { margin: 0; padding: 0; list-style: none; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); }
.fp-bridge { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; align-items: center; gap: var(--fp-space-6); padding: var(--fp-space-5) 28px; }
.fp-bridge + .fp-bridge { border-top: 1px solid var(--border-subtle); }
.fp-bridge__name { margin: 0; color: var(--ink-strong); font-size: 17px; font-weight: 700; }
.fp-bridge__sub { color: var(--ink-muted); font-size: 14px; }
.fp-bridge__take { font-size: 15px; }
.fp-bridge__take strong { color: var(--ink-strong); }
.fp-bridge__range { font-size: 15px; }
.fp-bridge .fp-savings { justify-self: end; }
.fp-empty { margin: 0; padding: var(--fp-space-5) 28px; color: var(--ink-muted); }
@media (max-width: 767px) {
  .fp-bridges { background: none; border: 0; display: flex; flex-direction: column; gap: 14px; }
  .fp-bridge { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name badge" "take take" "range range"; gap: 6px var(--fp-space-3); padding: var(--fp-space-4); background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); }
  .fp-bridge + .fp-bridge { border-top: 1px solid var(--border-soft); }
  .fp-bridge > :nth-child(1) { grid-area: name; }
  .fp-bridge > :nth-child(2) { grid-area: take; font-size: 14px; }
  .fp-bridge > :nth-child(3) { grid-area: range; font-size: 14px; color: var(--ink-muted); }
  .fp-bridge > :nth-child(4) { grid-area: badge; padding: 4px 10px; }
  .fp-bridge .fp-savings strong { font-size: 16px; }
  .fp-bridge .fp-savings span { display: none; }
}

/* ---------- Downloads ---------- */
.fp-dl { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: var(--fp-space-16); align-items: center; }
.fp-dl__preview { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); background: var(--surface-card); box-shadow: var(--shadow-raised); aspect-ratio: 4 / 3; }
.fp-dl__preview img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.fp-dl__text { display: flex; flex-direction: column; gap: var(--fp-space-5); }
.fp-downloads { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-soft); }
.fp .fp-download { display: flex; justify-content: space-between; align-items: center; gap: var(--fp-space-4); min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); color: var(--ink-strong); text-decoration: none; }
.fp-download__detail { color: var(--ink-muted); }
.fp-download__action { color: var(--action-primary); font-weight: 600; white-space: nowrap; }
.fp .fp-download:hover .fp-download__action { color: var(--action-primary-hover); text-decoration: underline; }
.fp-note { margin: 0; color: var(--ink-muted); font-size: 13px; }
@media (max-width: 1023px) { .fp-dl { grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-6); } .fp-dl__preview { max-width: 560px; } }

/* ---------- State links (compact Bundesländer index) ---------- */
.fp-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--fp-space-6); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-soft); }
.fp-states li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fp-space-3); padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.fp-states__name { color: var(--ink-strong); font-weight: 600; }
.fp-states__links { display: flex; gap: var(--fp-space-3); font-size: 14px; white-space: nowrap; }
@media (max-width: 1023px) { .fp-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .fp-states { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page title band (pages without a countdown) ---------- */
.fp-band { background: var(--surface-sand); border-bottom: 1px solid var(--border-soft); }
.fp-band__inner { display: flex; flex-direction: column; gap: var(--fp-space-5); padding: 40px 0 32px; }
.fp-crumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ink-muted); }
.fp-crumbs li + li::before { content: "›"; margin-right: 6px; }
.fp .fp-crumbs a { color: var(--ink-muted); }
.fp-band__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fp-space-8); flex-wrap: wrap; }
.fp-band h1 { margin: 0; color: var(--ink-strong); font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.fp-band__lead { margin: 10px 0 0; font-size: 17px; }
.fp-band__controls { display: flex; align-items: center; gap: var(--fp-space-3); flex-wrap: wrap; }
@media (max-width: 767px) {
  .fp-band__inner { padding: var(--fp-space-6) 0; gap: var(--fp-space-4); }
  .fp-band h1 { font-size: 30px; }
  .fp-band__lead { font-size: 15px; }
  .fp-band__controls { width: 100%; }
}

/* ---------- SegmentedControl (links) ---------- */
.fp-seg { display: inline-flex; padding: var(--fp-space-1); border-radius: var(--fp-radius-lg); background: var(--surface-sand-strong); }
.fp .fp-seg a, .fp .fp-seg a:visited { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--fp-radius-md); color: var(--ink-sand); font-size: 14px; font-weight: 600; text-decoration: none; }
.fp .fp-seg a:hover { color: var(--ink-strong); }
.fp .fp-seg a[aria-current="page"] { background: var(--surface-card); color: var(--ink-strong); box-shadow: var(--shadow-segment); }

/* ---------- HolidayTable ---------- */
.fp-table { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); overflow-x: auto; }
.fp-table table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
.fp-table th { padding: 12px 16px; background: var(--surface-cream); color: var(--ink-muted); font-size: 13px; font-weight: 600; text-align: left; border: 0; }
.fp-table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--border-subtle); color: var(--ink-strong); text-align: left; }
.fp-table th:first-child, .fp-table td:first-child { padding-left: 20px; }
.fp-table td:first-child { font-weight: 600; }
.fp .fp-table td:first-child a { color: inherit; text-decoration: none; }
.fp .fp-table td:first-child a:hover { text-decoration: underline; }
.fp-table td.fp-table__scope { color: var(--ink-muted); }
.fp-table tr.is-past td { color: var(--ink-muted); }
.fp-table__dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px; background: var(--day-holiday); vertical-align: middle; }
.fp-table tr.is-past .fp-table__dot { background: var(--border-soft); }
@media (max-width: 767px) {
  .fp-table thead { display: none; }
  .fp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
  .fp-table tbody tr:first-child { border-top: 0; }
  .fp-table td, .fp-table th:first-child, .fp-table td:first-child { padding: 0; border: 0; font-size: 15px; }
  .fp-table td:nth-child(3):not(.fp-table__scope) { display: none; }
  .fp-table td.fp-table__scope { grid-column: 1 / -1; padding-left: 18px; font-size: 13px; }
}

/* ---------- Two-column content + side panels ---------- */
.fp-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.fp-aside { display: flex; flex-direction: column; gap: var(--fp-space-4); }
.fp-panel { display: flex; flex-direction: column; gap: 10px; padding: var(--fp-space-6); background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); }
.fp-panel h2, .fp-panel h3 { margin: 0; color: var(--ink-strong); font-size: 18px; font-weight: 700; line-height: 1.3; }
.fp-panel p { margin: 0; font-size: 14px; }
.fp-panel .fp-savings { align-self: flex-start; }
.fp .fp-panel > a { font-size: 14px; font-weight: 600; }
@media (max-width: 1023px) { .fp-split { grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-8); } }

/* ---------- StateYearBars ---------- */
.fp-barsbox { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); padding: 20px 24px 24px; }
.fp-bars { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; font-size: 12px; }
.fp-bars__months { display: flex; color: var(--ink-muted); }
.fp-bars__months span { padding-left: 4px; border-left: 1px solid var(--border-soft); overflow: hidden; white-space: nowrap; }
.fp .fp-bars__code { color: var(--ink-muted); font-weight: 500; line-height: 22px; text-decoration: none; }
.fp .fp-bars__code:hover { color: var(--ink-strong); text-decoration: underline; }
.fp .fp-bars__code.is-highlight { color: var(--ink-strong); font-weight: 700; }
.fp-bars__row { display: grid; height: 22px; border-radius: var(--fp-radius-xs); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.fp-bars__row.is-highlight { box-shadow: 0 0 0 2px var(--action-navy); }
.fp-bars__row .v { background: var(--day-vacation); }
.fp-bars__row .h { background: var(--day-holiday); }
.fp-bars__row .w { background: var(--day-weekend); }
.fp-barsbox .fp-calcard__foot { margin-top: 18px; }
@media (max-width: 767px) {
  .fp-barsbox { padding: 16px; overflow-x: auto; }
  .fp-bars { min-width: 720px; }
}

/* ==========================================================================
   Section pages: Schulferien, Feiertage, Downloads
   ========================================================================== */
html:not(.js) .fp-js-only { display: none; }

/* Minor rows (e.g. Heiligabend: not a day off) look like past rows */
.fp-table tr.is-minor td { color: var(--ink-muted); }
.fp-table tr.is-minor .fp-table__dot { background: var(--border-soft); }
.fp-table tr.is-now td:first-child { color: var(--ink-strong); }
.fp-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: var(--fp-radius-md); background: var(--savings-bg); color: var(--savings-ink); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.fp-table__dot--vacation { background: var(--day-vacation); }
.fp-table td.fp-table__num { color: var(--ink-muted); white-space: nowrap; }
.fp-table caption.fp-table__caption { padding: 14px 20px; caption-side: top; text-align: left; color: var(--ink-strong); font-size: 17px; font-weight: 700; background: var(--surface-card); border-bottom: 1px solid var(--border-soft); }
.fp .fp-table caption a { color: inherit; }

/* Vacation lists: stack every row on phones (long date ranges) */
@media (max-width: 767px) {
  .fp-table--stack tr { display: block; }
  .fp-table--stack td, .fp-table--stack td:nth-child(3):not(.fp-table__scope) { display: block; }
  .fp-table--stack td + td { margin-top: 2px; padding-left: 18px; }
  .fp-table--stack td.fp-table__num { font-size: 13px; }
}

/* Matrix: Bundesland x Ferienart */
.fp-table--matrix table { font-size: 14px; }
.fp-table--matrix th, .fp-table--matrix td { padding: 12px 12px; vertical-align: top; }
.fp-table--matrix td { white-space: nowrap; }
.fp-table--matrix td span { display: block; }
.fp-table--matrix td span + span { margin-top: 2px; }
.fp-table--matrix td .is-past { color: var(--ink-muted); }
.fp-table--matrix tr.is-highlight td { background: var(--nav-active); }
.fp .fp-table--matrix th a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-control); text-underline-offset: 3px; }
@media (max-width: 1279px) { .fp-table--matrix table { font-size: 13px; } .fp-table--matrix th, .fp-table--matrix td { padding: 10px 8px; } }
@media (max-width: 1023px) {
  .fp-table--matrix thead { display: none; }
  .fp-table--matrix tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px; border-top: 1px solid var(--border-subtle); }
  .fp-table--matrix tbody tr:first-child { border-top: 0; }
  .fp-table--matrix td, .fp-table--matrix td:first-child, .fp-table--matrix td:nth-child(3):not(.fp-table__scope) { display: block; padding: 0; border: 0; white-space: normal; font-size: 13px; }
  .fp .fp-table--matrix td:first-child { grid-column: 1 / -1; font-size: 16px; }
  .fp-table--matrix td[data-label]::before { content: attr(data-label); display: block; color: var(--ink-muted); font-size: 12px; font-weight: 600; }
}

/* Prose from the text files */
.fp-prose { max-width: 72ch; }
.fp-prose p { margin: 0 0 1em; font-size: 17px; line-height: 1.7; }
.fp-prose p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .fp-prose p { font-size: 16px; } }

/* Fact list in a panel */
.fp-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.fp-facts dt { color: var(--ink-muted); }
.fp-facts dd { margin: 0; color: var(--ink-strong); font-weight: 600; }

/* Link lists in a panel */
.fp-linklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.fp-linklist li { border-bottom: 1px solid var(--border-subtle); }
.fp .fp-linklist a { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.fp .fp-linklist a:hover { text-decoration: underline; }

/* Gantt (reuses .fp-bars): one vacation type across all states */
.fp-bars__row > span { grid-row: 1; }

/* Check list (Downloads) */
.fp-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fp-checks li { position: relative; padding-left: 30px; }
.fp-checks li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: var(--fp-radius-xs); background: var(--savings-bg); color: var(--savings-ink); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; }

/* Download cards per Bundesland */
.fp-dlcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fp-space-4); margin: 0; padding: 0; list-style: none; }
.fp-dlcard { padding: 18px 20px 8px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--fp-radius-xl); scroll-margin-top: 96px; outline: none; }
.fp-dlcard:target, .fp-dlcard:focus { box-shadow: 0 0 0 2px var(--action-navy); }
.fp-dlcard h3 { margin: 0 0 8px; color: var(--ink-strong); font-size: 17px; font-weight: 700; }
.fp-dlrow { display: flex; align-items: center; justify-content: space-between; gap: var(--fp-space-3); border-top: 1px solid var(--border-subtle); font-size: 14px; }
.fp-dlrow > strong { color: var(--ink-strong); }
.fp-dlrow.is-past > strong { color: var(--ink-muted); font-weight: 500; }
.fp-dlrow__links { display: flex; gap: 4px; }
.fp .fp-dlrow__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 600; }
.fp .fp-dlrow__links a:last-child { padding-right: 0; }
@media (max-width: 1023px) { .fp-dlcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .fp-dlcards { grid-template-columns: minmax(0, 1fr); } }
.fp-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--fp-space-4); align-items: start; }
.fp-table caption.fp-table__caption + tbody tr:first-child td { border-top: 0; }
.fp-bars__row .t { background: var(--day-today); opacity: 0.9; }
@media (max-width: 767px) { .fp .fp-seg { flex-wrap: wrap; } }
.fp-cardgrid .fp-table table { font-size: 14px; }
.fp-cardgrid .fp-table td.fp-table__num { text-align: right; }

/* Prose headings (Impressum, Datenschutz, background texts) */
.fp-prose h2 { margin: 40px 0 12px; color: var(--ink-strong); font-size: 24px; font-weight: 700; line-height: 1.25; }
.fp-prose h3 { margin: 28px 0 8px; color: var(--ink-strong); font-size: 18px; font-weight: 700; line-height: 1.3; }
.fp-prose > :first-child { margin-top: 0; }
.fp-prose address { margin: 0 0 1em; font-style: normal; font-size: 17px; line-height: 1.7; }
@media (max-width: 767px) { .fp-prose h2 { font-size: 21px; margin-top: 32px; } .fp-prose address { font-size: 16px; } }

/* Status pages (404, error) */
.fp-status { display: flex; flex-direction: column; gap: var(--fp-space-6); max-width: 720px; padding: 72px 0 96px; }
.fp-status__code { margin: 0; color: var(--ink-muted); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fp-status h1 { margin: 0; color: var(--ink-strong); font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.fp-status p { margin: 0; font-size: 17px; }
.fp-status__actions { display: flex; flex-wrap: wrap; gap: var(--fp-space-3); }
@media (max-width: 767px) { .fp-status { padding: 40px 0 56px; } .fp-status h1 { font-size: 30px; } .fp-status__actions .fp-btn { width: 100%; } }

/* Fallback for pages not built from components (Sitemap, Feedback, …): readable plain HTML */
.fp-plain { padding: 40px 0 72px; }
.fp-plain h1 { margin: 0 0 16px; color: var(--ink-strong); font-size: 36px; font-weight: 700; line-height: 1.15; }
.fp-plain h2 { margin: 32px 0 12px; color: var(--ink-strong); font-size: 24px; font-weight: 700; }
.fp-plain h3, .fp-plain h4 { margin: 24px 0 8px; color: var(--ink-strong); font-size: 18px; font-weight: 700; }
.fp-plain p, .fp-plain ul, .fp-plain ol { margin: 0 0 1em; }
.fp-plain ul, .fp-plain ol { padding-left: 1.25em; }
.fp-plain table { border-collapse: collapse; margin: 0 0 1em; }
.fp-plain th, .fp-plain td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.fp-plain input, .fp-plain textarea, .fp-plain select, .fp-plain button { font: inherit; }