:root {
    --container-max: 1280px;
    --gutter: 40px;
    --section-y: 64px;
    /* Vertical-rhythm scale (also overridden inside home.css for the
       wider home layout). Keep edits in one place so blog, CMS pages,
       info pages and home stay visually aligned. */
    --block-gap: 40px;
    --stack-lg: 32px;
    --stack-md: 20px;
    --stack-sm: 12px;
    --stack-xs: 8px;
    --radius-lg: 24px;
    --radius-md: 20px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --ink: #000000;
    --brand: #F49B06;
    --brand-deep: #d97e00;
    /* Readable orange on white; --brand-on-dark is its counterpart for the
       navy heroes, where --brand-text drops to 2.7:1 and reads as brown. */
    --brand-text: #8a4d00;
    --brand-on-dark: #ffc45f;
    --on-brand: #18120a;
    --focus-ring: #005fcc;
    --muted: #5a6876;
    --muted-2: #6b7885;
    --line: #eaedf0;
    --line-2: #eef1f4;
    --surface: #f4f5f7;
    --surface-2: #f7f8fa;
    --surface-3: #fafbfc;
    --ok: #2e8b57;
    /* =========================================================
       NAVY PALETTE
       ---------------------------------------------------------
       Four roles, no more: a navy for structure, one blue for anything
       interactive that is not a button, two cool neutrals for fills.
       Orange (--brand, above) stays the ONE action colour — nothing here
       may be used for a button or for a link that behaves like one.

       Every value is consumed through a variable; no sheet should hardcode
       a hex or an rgba() from this family. --navy-rgb exists so scrims and
       shadows can vary alpha without forking the colour.

       Introduced for the homepage. Other pages keep black headings until
       the rollout is decided, which is why base.css defines these but only
       home.css applies them.
       ========================================================= */
    --navy: #0E2743;        /* headings, dark bands */
    --navy-rgb: 14 39 67;   /* same colour, for alpha compositing */
    --navy-2: #17395E;      /* gradient partner, hover on dark */
    --navy-soft: #4E6884;   /* eyebrows, metadata labels */
    --accent: #1B5FA8;      /* links and interactive text */
    --accent-deep: #134780; /* link hover */
    --tint: #F1F5F9;        /* cool neutral section fill */
    --tint-warm: #FFF6E8;   /* warm fill for brand-adjacent accents */
    /* Text, hairlines and edges on the dark bands. */
    --on-dark: #ffffff;
    --on-dark-soft: rgb(255 255 255 / .88);
    --on-dark-mute: rgb(255 255 255 / .80);
    --on-dark-line: rgb(255 255 255 / .16);
    --on-dark-fill: rgb(255 255 255 / .08);
    --on-dark-edge: rgb(255 255 255 / .38); /* outlined control on navy */
    --on-dark-accent: #FFC45F;              /* amber highlight, legible on navy */
    /* Text and chips sitting directly on a photo rather than on a flat
       band — they need more opacity than the navy equivalents. */
    --on-photo: rgb(255 255 255 / .94);
    --on-photo-chip: rgb(255 255 255 / .93);
    /* =========================================================
       TYPE SCALE (single source of truth)
       ---------------------------------------------------------
       One size per role so every section reads as a sibling.
       --fs-display : hero H1 only
       --fs-h2      : ALL section titles
       --fs-h3      : card + prose sub-heads
       --fs-lead    : stand-out intro paragraphs
       --fs-body-lg : long-form prose, section intros
       --fs-body    : default body copy
       --fs-body-sm : card copy
       --fs-meta    : timestamps, opening hours, captions
       --fs-label   : uppercase eyebrows and micro-labels
       --fs-eyebrow : tag pills / kickers
       Lived in home.css until the homepage relaunch, which meant
       contact.css and business-class.css had to duplicate the clamp()
       values by hand. Every sheet can consume the scale from here.

       Copy sizes went up one step in 2026-08: the audience skews 45+ and
       15px body / 13.5px card copy / 12.5px meta was too small for it. The
       display and h2 ceilings came *down* in the same pass — at 62px the
       hero was shouting. Both moves pull the same way: quieter headlines,
       more readable copy.
       ========================================================= */
    --fs-display: clamp(36px, 4vw, 56px);
    --fs-h2: clamp(27px, 2.8vw, 36px);
    --fs-h3: 20px;
    --fs-lead: clamp(18px, 1.4vw, 20px);
    --fs-body-lg: 17px;
    --fs-body: 16px;
    --fs-body-sm: 14.5px;
    --fs-meta: 13px;
    --fs-label: 12px;
    --fs-eyebrow: 13px;
    --lh-title: 1.14;
    --lh-snug: 1.4;
    --lh-body: 1.7;
    --lh-prose: 1.75;
    /* One ratio for every framed card image, site-wide. Paired with the
       .media-frame component below. */
    --card-ratio: 3 / 2;
    /* Card radius + the only two elevations. These live here, not in home.css:
       info-pages.css and contact.css consume them and never load home.css, so
       defining them per-page silently resolved them to nothing. */
    --radius-card: 16px;
    --radius-field: 8px;
    /* How far the bottom-left feedback launcher must sit above the viewport
       bottom to clear a page's own fixed furniture. 0 everywhere; only
       /kombination overrides it, in combination-detail.css, because that page
       pins a full-width booking bar to the same edge. A future page with its
       own bottom bar sets this and the widget moves out of the way — that is
       the entire contract, and there is no JS coupling behind it. */
    --ta-fb-lift: 0px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-card-hover: 0 8px 24px rgba(15, 23, 42, .09);
  }
  /*
   * z-index scale (keep all new values on this ladder):
   *   1-9    in-component layering (card media, hero scrims)
   *   10     sticky page rails (.cat-rail)
   *   50     standard full-screen overlays (.search-loader)
   *   60     page-level fixed furniture (.book-bar on /kombination)
   *   90     collapsed floating corner utilities (.ta-fb launcher)
   *   100    site chrome (.util-bar, nav.top)
   *   140    an opened floating panel (.ta-fb.is-open) — a dialog the visitor
   *          asked for, so it may cover chrome; still under the lightbox
   *   150    immersive overlays that cover site chrome (.lb lightbox)
   *   200    mobile nav drawer (sits above everything)
   * Overlays portal to <body> via JS so the scale isn't trapped inside
   * a section's stacking context — see search-mask.js.
   */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* The nav becomes sticky below 821px; without this, in-page anchor targets
     land underneath it and the focused element is obscured (WCAG 2.4.11). */
  html { scroll-padding-top: 90px; }
  @media (min-width: 821px) { html { scroll-padding-top: 24px; } }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html, body {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background: #ffffff;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  img, video, iframe { max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }
  :where(a[href], button, summary, label, input[type="button"], input[type="submit"], input[type="reset"]) {
    touch-action: manipulation;
  }
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .skip-link {
    position: fixed;
    z-index: 300;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    box-shadow: 0 0 0 3px var(--focus-ring), 0 8px 20px rgba(0,0,0,.22);
    font-size: 14px;
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform .15s ease;
  }
  .skip-link:focus { transform: translateY(0); }
  #main-content:focus { outline: none; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  @media (max-width: 960px) { :root { --gutter: 24px; } }
  @media (max-width: 640px) { :root { --gutter: 18px; } }

  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* =========================================================
     CARD MEDIA (single source of truth for every framed image)
     ---------------------------------------------------------
     The frame owns the aspect ratio; the image fills it absolutely.

     Absolute positioning is load-bearing, not decoration. Two bugs are
     avoided here:
       1. `<img height="533">` is a presentational hint that outranks
          `aspect-ratio` on the image, so images rendered at their literal
          pixel height (531/533/425px) and card rows never lined up.
       2. `aspect-ratio` on the frame + `height:100%` on the child is a
          cyclic percentage dependency; browsers resolve the frame to `auto`
          and the image's intrinsic ratio leaks back out, stretching the
          frame past its declared ratio.
     Taking the image out of flow breaks both: the frame's height comes from
     its ratio alone, and the image can only fill it.
     ========================================================= */
  .media-frame {
    position: relative;
    overflow: hidden;
    background: var(--surface);
  }
  .media-frame > picture,
  .media-frame > img {
    position: absolute;
    inset: 0;
    display: block;
  }
  .media-frame > picture > img {
    width: 100%;
    height: 100%;
  }
  .media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* =========================================================
     AI DISCLOSURE MARKER  (.ai-tag)
     ---------------------------------------------------------
     Printed by App\Support\AiImage on synthetic imagery — the
     EU AI Act (Art. 50) wants AI-generated pictures disclosed
     where the viewer meets them.

     Quiet by design, but quiet is not hidden. The scrim behind
     the text is what keeps 9px legible over an arbitrary photo,
     and hovering or tabbing into the frame brings it to full
     opacity. Do NOT push the opacity lower, drop the scrim, or
     display:none it in a breakpoint: each of those turns a
     legal disclosure back into decoration. The marker needs a
     positioned ancestor — .media-frame already is one.
     ========================================================= */
  .ai-tag {
    position: absolute;
    right: 8px;
    bottom: 7px;
    z-index: 3;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: .65;
    transition: opacity .15s ease;
  }
  .media-frame:hover .ai-tag,
  .media-frame:focus-within .ai-tag,
  .ai-tag:hover {
    opacity: 1;
  }
  /* The badge is an overlay, so it has no counterpart on paper — spell the
     disclosure out instead of printing a floating chip over the photo. */
  @media print {
    .ai-tag {
      position: static;
      opacity: 1;
      background: none;
      color: #000;
    }
    .ai-tag::before { content: "("; }
    .ai-tag::after  { content: ")"; }
  }
  /* ===== Rich utility strip (above main nav) ===== */
  .util-bar { background: var(--ink); color: rgba(255,255,255,0.75); font-size: 12.5px; position: relative; z-index: 100; }
  .util-inner { max-width: var(--container-max); margin: 0 auto; padding: 9px var(--gutter);
                display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .util-left { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
  .online-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.05); }
  }
  .util-left .count { color: #fff; font-weight: 700; }
  .util-right { display: inline-flex; align-items: center; }
  .util-right a {
    color: rgba(255,255,255,0.7); padding: 0 12px; position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .15s ease;
  }
  .util-right a:hover { color: #ffc45f; }
  /* "Lesezeichen" invokes an action rather than navigating, so it is a <button>.
     These rules make it read as the sibling links do. */
  .util-linkbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; position: relative;
    border: 0; background: none; cursor: pointer;
    color: rgba(255,255,255,0.7);
    font: inherit; font-size: inherit; line-height: inherit;
    transition: color .15s ease;
  }
  .util-linkbtn:hover { color: #ffc45f; }
  .util-right a + .util-linkbtn::before,
  .util-linkbtn + a::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 1px; height: 12px; background: rgba(255,255,255,0.2);
    transform: translateY(-50%);
  }
  .drawer-linkbtn {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: inherit; font: inherit; text-align: left;
  }
  .util-right a + a::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 1px; height: 12px; background: rgba(255,255,255,0.2);
    transform: translateY(-50%);
  }

  /* ===== Top nav ===== */
  nav.top { position: relative; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
  .top-inner { max-width: var(--container-max); margin: 0 auto; padding: 16px var(--gutter);
               display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .brand { display: flex; align-items: center; flex-shrink: 0; }
  .brand-logo { height: 44px; width: auto; display: block; }

  .nav-links { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; color: var(--ink); }
  .nav-links a {
    color: inherit; position: relative; padding: 8px 2px;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    transition: color .15s ease;
  }
  .nav-links a + a { margin-left: 28px; }
  .nav-links a:hover { color: var(--brand-text); }
  .nav-links a.active { font-weight: 700; color: var(--ink); }
  .nav-links a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--brand-text); border-radius: 2px;
  }

  .nav-contact {
    display: inline-flex; align-items: center; gap: 12px;
    padding-right: 16px; border-right: 1px solid var(--line);
    margin-right: 4px; flex-shrink: 0;
    color: inherit; text-decoration: none;
  }
  .nav-contact:hover .number { color: var(--brand-text); }
  .nav-contact .phone-ico {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .nav-contact .phone-ico svg { width: 18px; height: 18px; }
  .nav-contact .txt { display: flex; flex-direction: column; line-height: 1.2; }
  .nav-contact .label {
    font-size: 11px; font-weight: 600; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;
  }
  .nav-contact .number { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; transition: color .15s ease; }
  .nav-contact .hours { font-size: 11px; color: var(--muted-2); margin-top: 1px; }

  .nav-actions { display: inline-flex; align-items: center; gap: 8px; }
  .icon-btn {
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    display: grid; place-items: center; cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
    position: relative;
  }
  .icon-btn:hover { color: var(--brand-text); background: #f5f7f9; border-color: #d8dde3; }
  .icon-btn svg { width: 18px; height: 18px; }
  .icon-btn .badge {
    position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand); border: 2px solid #fff;
    box-sizing: content-box; margin: -2px;
    font-size: 0; color: transparent;
  }
  .icon-btn.active,
  .icon-btn.icon-btn--likes.active { color: var(--brand-text); border-color: var(--brand-text); }

  .nav-hamburger { display: none; }

  /* ===== Mobile drawer ===== */
  .nav-drawer[hidden] { display: none; }
  .nav-drawer { position: fixed; inset: 0; z-index: 200; }
  .nav-drawer-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.45);
    opacity: 0; transition: opacity .25s ease;
  }
  .nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
  .nav-drawer-panel {
    position: absolute; top: 0; right: 0; height: 100dvh;
    width: min(86vw, 360px); background: #fff;
    padding: 20px var(--gutter);
    padding:
      max(20px, env(safe-area-inset-top))
      max(var(--gutter), env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(var(--gutter), env(safe-area-inset-left));
    display: flex; flex-direction: column; gap: 24px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
  }
  .nav-drawer-panel:focus { outline:none; }
  .nav-drawer a,
  .nav-drawer button { -webkit-tap-highlight-color:transparent; }
  .nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }
  .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; }
  .nav-drawer-head .brand-logo { height: 36px; width: auto; display: block; }
  .nav-drawer-links { display: flex; flex-direction: column; }
  .nav-drawer-links a {
    display: block; padding: 14px 0;
    font-size: 17px; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line-2);
  }
  .nav-drawer-links a.active { color: var(--brand-text); }
  .nav-drawer-contact {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 4px 0;
  }
  .nav-drawer-contact .phone-ico {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .nav-drawer-contact .phone-ico svg { width: 18px; height: 18px; }
  .nav-drawer-contact .txt { line-height: 1.2; }
  .nav-drawer-contact .label {
    font-size: 11px; font-weight: 600; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;
  }
  .nav-drawer-contact .number { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
  .nav-drawer-contact .hours { font-size: 11px; color: var(--muted-2); margin-top: 1px; }
  .nav-drawer-util { display: flex; flex-direction: column; }
  .nav-drawer-util a,
  .nav-drawer-util .drawer-linkbtn {
    display:block;
    width:100%;
    padding:10px 0;
    border:0;
    background:none;
    color:var(--muted);
    font-family:inherit;
    font-size:14px;
    line-height:normal;
    text-align:left;
  }
  body.nav-locked { overflow: hidden; }

  /* Tier 1 (1100–1279): drop the "hours" line, tighten gaps. */
  @media (max-width: 1279px) {
    .top-inner { gap: 24px; padding: 14px var(--gutter); }
    .nav-links a + a { margin-left: 24px; }
    .nav-contact .hours { display: none; }
    .util-right a { padding: 0 10px; }
  }

  /* Tier 2 (940–1099): drop the label too; keep icon + number. */
  @media (max-width: 1099px) {
    .top-inner { gap: 18px; }
    .nav-links { font-size: 14px; }
    .nav-links a + a { margin-left: 20px; }
    .nav-contact { gap: 10px; padding-right: 12px; margin-right: 0; }
    .nav-contact .label { display: none; }
    .nav-contact .number { font-size: 14px; }
    .util-bar { font-size: 12px; }
    .util-right a { padding: 0 9px; gap: 5px; }
  }

  /* Tier 3 (821–939): show the orange phone-circle only (still a tel: link). */
  @media (max-width: 939px) {
    .top-inner { gap: 14px; }
    .nav-links a + a { margin-left: 16px; }
    .nav-contact { padding-right: 0; border-right: 0; }
    .nav-contact .txt { display: none; }
    .util-right a { padding: 0 8px; font-size: 11.5px; }
  }

  /* Mobile (≤820): hamburger drawer takes over. */
  @media (max-width: 820px) {
    nav.top { position: sticky; top: 0; }
    .top-inner { gap: 8px; }
    .top-inner > .brand { flex: 1 1 auto; min-width: 0; }
    .top-inner > .brand .brand-logo {
      width: 100%;
      max-width: 180px;
      height: auto;
      object-fit: contain;
      object-position: left center;
    }
    .util-bar { display: none; }
    .nav-links { display: none; }
    .nav-contact { display: none; }
    .nav-actions { flex: 0 0 auto; }
    .icon-btn { width: 44px; height: 44px; }
    .nav-hamburger { display: grid; }
    /* iOS zooms the viewport when a focused text control computes below
       16px. Keep controls readable while preserving larger user font sizes. */
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea {
      font-size: 16px !important;
      font-size: max(16px, 1rem) !important;
    }
  }
  /* Footer */
  .site-foot {
    background: var(--ink);
    color: #c9d1d9;
    padding: 80px 0 28px;
    position: relative;
  }
  .site-foot .footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 44px;
    border-bottom: 1px solid #1e2a38;
  }
  .site-foot .footer-brand .brand-logo-footer {
    height: 54px;
    width: auto;
    display: block;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
  }
  .site-foot .footer-brand p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #8c98a3;
    max-width: 340px;
    margin-bottom: 24px;
  }
  .site-foot .footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .site-foot .footer-contact .phone-ico {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .site-foot .footer-contact .phone-ico svg { width: 18px; height: 18px; }
  .site-foot .footer-contact .txt { line-height: 1.2; }
  .site-foot .footer-contact .label {
    font-size: 10.5px;
    font-weight: 600;
    color: #8c98a3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
  }
  .site-foot .footer-contact .number {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
  }
  .site-foot .footer-contact .hours {
    font-size: 11px;
    color: #8c98a3;
    margin-top: 2px;
  }
  .site-foot .footer-heading {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
  }
  .site-foot .footer-heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 22px; height: 2px;
    background: var(--brand);
    border-radius: 2px;
  }
  .site-foot ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
  .site-foot ul a {
    color: #8c98a3;
    text-decoration: none;
    font-size: 13.5px;
    transition: color .15s ease, padding-left .15s ease;
    display: inline-block;
  }
  .site-foot ul a:hover { color: #ffc45f; padding-left: 4px; }
  .site-foot .social-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
  .site-foot .social-row a {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid #1e2a38;
    color: #c9d1d9;
    display: grid; place-items: center;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .site-foot .social-row a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: translateY(-1px);
  }
  .site-foot .social-row a svg { width: 15px; height: 15px; }
  .site-foot .footer-bottom {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #6c7885;
    gap: 20px;
    flex-wrap: wrap;
  }
  .site-foot .footer-bottom a {
    color: #8c98a3;
    text-decoration: none;
    transition: color .15s ease;
  }
  .site-foot .footer-bottom a:hover { color: #ffc45f; }
  .site-foot .footer-bottom .legal { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; justify-content: flex-end; }
  /* 2.5.8 Target Size: give each legal link a 24px-tall hit area so adjacent
     wrapped rows do not overlap each other's targets. */
  .site-foot .footer-bottom .legal > a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-inline: 2px;
  }

  /* ===== Trust strip (used in footer & home) =====
     Layout strategy:
       ≥1280px  : 4 columns, items stacked vertically (seal above label),
                  hairline dividers between columns
       540–1279 : 2×2 grid, items horizontal (seal beside label)
       <540     : 1 column stack with row dividers
  */
  .trust-strip { display: block; }
  /* Double-classed so it outweighs the generic `.site-foot ul` rules. */
  ul.trust-strip__items, .trust-strip__items {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
  }
  .trust-item {
    display: grid;
    grid-template-rows: 60px auto;
    justify-items: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 6px 8px;
    min-width: 0;
    position: relative;
  }
  /* Vertical hairline divider between items at the wide 4-up layout. */
  .trust-item + .trust-item::before {
    content: "";
    position: absolute; left: 0; top: 15%; bottom: 15%;
    width: 1px; background: var(--line-2);
  }
  /* Seal heights are tuned so TÜV (square-ish) and DerTour (wide)
     read at roughly the same visual weight. The 60px media row above
     keeps labels on a shared baseline regardless of seal height. */
  .trust-item__seal { height: 56px; width: auto; object-fit: contain; display: block; align-self: center; }
  .trust-item__seal--wide { height: 36px; }
  .trust-item__ico {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--surface); color: var(--ink);
    display: grid; place-items: center;
    align-self: center;
  }
  .trust-item__ico svg { width: 20px; height: 20px; }
  .trust-item__label {
    align-self: start;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink);
    line-height: 1.3;
  }

  /* --- Home variant: clean light row, flat to match the rest of the page. --- */
  /* Flat band, not a card: it sits directly under the hero as a strip of
     facts. Card chrome here made it read as the page's first content card. */
  .trust-strip--home {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 4px 0 20px;
  }

  /* --- Footer variant: dark theme, seals get a tight white chip so they
         stay legible on near-black. --- */
  .site-foot .trust-strip--footer {
    margin-top: 28px;
    padding: 22px 0 20px;
    border-bottom: 1px solid #1e2a38;
  }
  .site-foot .trust-strip--footer .trust-item + .trust-item::before { background: #1e2a38; }
  .site-foot .trust-strip--footer .trust-item__seal {
    height: 50px; padding: 5px 8px;
    background: #fff; border-radius: 6px;
  }
  .site-foot .trust-strip--footer .trust-item__seal--wide { height: 34px; }
  .site-foot .trust-strip--footer .trust-item__ico { background: #1e2a38; color: #fff; }
  .site-foot .trust-strip--footer .trust-item__label { color: #fff; }

  /* Tablet: 2×2 grid, same vertical seal-above-label rhythm as the 4-up
     desktop layout — just in two columns. */
  @media (max-width: 1279px) {
    ul.trust-strip__items, .trust-strip__items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 24px;
    }
    .trust-item + .trust-item::before { display: none; }
    .trust-strip--home { padding: 20px 24px; }
  }

  /* Mobile: show only the two seal-bearing items (TÜV + DerTour) side by side. */
  @media (max-width: 780px) {
    ul.trust-strip__items, .trust-strip__items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: center;
    }
    /* Wrap to 2x2 rather than hiding items 3 and 4. The dropped pair was the
       insurance certificate and the phone number — real trust content, and the
       phone is the primary mobile conversion path. */
    .trust-item {
      grid-template-rows: 56px auto;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      padding: 12px 6px;
      gap: 8px;
    }
    .trust-strip--home { padding: 12px 16px; }
    .trust-item__seal { height: 52px; }
    .trust-item__seal--wide { height: 32px; }
    .trust-item__label { font-size: 13px; line-height: 1.3; }
    .site-foot .trust-strip--footer .trust-item__seal { height: 46px; }
    .site-foot .trust-strip--footer .trust-item__seal--wide { height: 30px; }
  }

  /* Tiny pair of seals shown under the booking sidebar badges. */
  .trust-mini {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--line);
  }
  .trust-mini img { height: 38px; width: auto; object-fit: contain; display: block; }
  .trust-mini img.trust-mini__wide { height: 24px; }
  /* Generic page header */
  .page-head { background: var(--surface-2); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
  .page-head h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
  .page-head h1 em { color: var(--brand-text); font-style: normal; font-family: 'Caveat', cursive; font-weight: 600; }
  .page-head .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
  .page-head .crumbs a:hover { color: var(--brand-text); }
  .page-head .crumbs .sep { margin: 0 6px; }
  .page-head .lede { font-size: 16px; color: var(--muted); max-width: 780px; line-height: 1.6; margin-top: 12px; }
  /* Cards */
  .card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-md); overflow: hidden; }
  .card-pad { padding: 28px; }
  .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border-radius: 999px;
          padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink); }
  /* Voucher stamp. Shared by the homepage, /vorteile, /reisegutschein and the
     info sidebar — it lived in info-pages.css, which the homepage then had to
     load in full just for these nine lines. */
  .gutschein-stamp {
    display: inline-block;
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
  }
  .gutschein-stamp--lg { font-size: 17px; padding: 8px 18px; }
  .api-html table { width: 100%; border-collapse: collapse; }
  .api-html {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .api-html td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: 14px; vertical-align: top; }
  .api-html td:first-child { color: var(--muted); white-space: nowrap; }
  .api-html button { display: none; } /* hide upstream "flugzeit-btn" launch buttons */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px;
    background: var(--brand); color: var(--on-brand); border-radius: 999px;
    font-weight: 700; font-size: 15px; border: 0; cursor: pointer;
  }
  .btn-primary:hover { filter: brightness(1.05); }
  .btn-secondary {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px;
    background: #fff; border: 1px solid var(--line); color: var(--ink);
    border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer;
  }
  @media (max-width: 960px) {
    .site-foot .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 32px; }
    .site-foot .footer-brand { grid-column: 1 / -1; }
    .site-foot .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  }
  @media (max-width: 640px) {
    .site-foot { padding-top: 56px; }
    .site-foot .footer-top { grid-template-columns: 1fr; gap: 30px; }
    .site-foot .footer-brand { grid-column: auto; }
    .site-foot .footer-bottom .legal { justify-content: flex-start; }
    .site-foot .social-row a { width: 44px; height: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }

  /* ===== FAQ accordion (shared: homepage + /faq) =====
     One accordion component site-wide. Layout (columns, grouping) is the
     caller's job; this owns the row, the +/x toggle and the answer. */
  .faq-item {
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-body);
    color: var(--ink);
  }
  .faq-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-item .q { font-weight: 500; }
  .faq-item .plus {
    flex: 0 0 auto;
    position: relative;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: #4b5968;
    font-size: 0;
    line-height: 0;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  }
  .faq-item .plus::before,
  .faq-item .plus::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: currentColor;
    border-radius: 1px;
  }
  .faq-item .plus::before {
    width: 10px; height: 1.5px;
    transform: translate(-50%, -50%);
  }
  .faq-item .plus::after {
    width: 1.5px; height: 10px;
    transform: translate(-50%, -50%);
  }
  .faq-item[open] .plus {
    transform: rotate(45deg);
    background: var(--ink, #1b2430);
    border-color: var(--ink, #1b2430);
    color: #fff;
  }
  .faq-item .a {
    padding: 0 4px 20px;
    color: var(--muted-2);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: 62ch;
  }

  /* ============ Relaunch feedback widget (bottom-left) ============
     A collapsed launcher that expands into a small rating panel. Markup lives
     in src/Views/partials/feedback-widget.php, behaviour in feedback-widget.js.

     POSITIONING IS THE WHOLE POINT OF THIS BLOCK. Three corners are already
     spoken for: Superchat owns bottom-right site-wide, /kombination's
     `.book-bar` owns the entire bottom edge below 1060px, and five overlays
     cover the page outright. Every rule below exists to keep the widget out of
     their way — do not "simplify" one away without checking what it dodges. */
  .ta-fb {
    position: fixed;
    z-index: 90;
    left: max(var(--gutter), env(safe-area-inset-left));
    bottom: calc(var(--ta-fb-lift) + max(20px, env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Manrope', system-ui, sans-serif;
  }
  .ta-fb[hidden] { display: none; }

  /* Every full-screen overlay in this codebase already marks the document when
     it opens. Reuse those markers rather than inventing new state — and note
     that `.search-loader` is z-index 50 inside combination-detail.css, so on
     /kombination a z-90 widget would otherwise float on top of the loader. */
  html.is-search-pending .ta-fb,
  body.nav-locked .ta-fb,
  body.lb-open .ta-fb,
  body.preview-open .ta-fb,
  body.destination-faq-open .ta-fb { display: none; }

  /* An opened panel is a dialog the visitor asked for and may sit over the
     sticky nav; it stays below the lightbox (150) and every modal above that. */
  .ta-fb[data-open] { z-index: 140; }

  .ta-fb__launcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: #fff;
    font: inherit;
    font-size: var(--fs-meta);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-card-hover);
    transition: background .15s ease, transform .15s ease;
  }
  .ta-fb__launcher:hover { background: var(--navy-2); transform: translateY(-1px); }
  .ta-fb__launcher-ico { display: inline-flex; color: var(--brand); }
  .ta-fb__launcher-ico svg { width: 16px; height: 16px; }
  .ta-fb__launcher-ico svg polygon { fill: currentColor; }
  .ta-fb[data-open] .ta-fb__launcher { display: none; }

  .ta-fb__panel {
    position: relative;
    width: min(320px, calc(100vw - 2 * var(--gutter)));
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-card-hover);
    animation: ta-fb-in .18s ease;
  }
  .ta-fb__panel[hidden] { display: none; }
  @keyframes ta-fb-in { from { opacity: 0; transform: translateY(6px); } }

  .ta-fb__close {
    position: absolute;
    top: 10px; right: 10px;
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    cursor: pointer;
  }
  .ta-fb__close:hover { color: var(--ink); background: var(--surface); }
  .ta-fb__close svg { width: 16px; height: 16px; }

  .ta-fb__title {
    margin: 0 28px 12px 0;
    font-size: var(--fs-body-sm);
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink);
  }

  /* Off-screen, never display:none — a hidden honeypot the browser skips is a
     honeypot a bot skips too. Same treatment as .contact-honeypot. */
  .ta-fb__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }
  .ta-fb__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Stars. Rendered in natural 1 → 5 order so arrow keys walk the group the
     way it is drawn; the fill therefore has to reach *backwards* from the
     chosen star, which is what `:has()` is for. */
  .ta-fb__stars {
    position: relative;
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
  }
  .ta-fb__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  /* Off-screen but still focusable, so the group keeps native keyboard
     selection. `pointer-events: none` because these 1px boxes stack on top of
     each other and would otherwise swallow clicks meant for the labels — the
     labels are the real 44px targets. */
  .ta-fb__radio {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  /* 44px: the label is the hit area, and a 28px glyph on its own is under the
     comfortable tap size. */
  .ta-fb__star {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    color: var(--brand);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .ta-fb__star svg { width: 28px; height: 28px; }
  /* star.svg is a stroked outline (fill="none" on the root, inherited by the
     polygon). The selected state is a CSS fill override, not a second icon. */
  .ta-fb__radio:checked + .ta-fb__star svg polygon,
  .ta-fb__star:has(~ .ta-fb__radio:checked) svg polygon { fill: currentColor; }
  /* Preview on hover: clear the committed fill, then paint up to the cursor.
     All three selectors are scoped under `.ta-fb__stars:hover` so they carry
     equal specificity and resolve on source order — unscoped, the clearing
     rule (three classes) outranks a bare `.ta-fb__star:hover` (two) and the
     hovered star alone stays empty.

     Guarded on a real pointer: on a touchscreen `:hover` sticks after a tap,
     which would leave a phantom preview contradicting the chosen rating. */
  @media (hover: hover) and (pointer: fine) {
    .ta-fb__stars:hover .ta-fb__star svg polygon { fill: none; }
    .ta-fb__stars:hover .ta-fb__star:hover svg polygon,
    .ta-fb__stars:hover .ta-fb__star:has(~ .ta-fb__star:hover) svg polygon { fill: currentColor; }
  }
  .ta-fb__radio:focus-visible + .ta-fb__star {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .ta-fb__comment {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-body-sm);
    resize: vertical;
  }
  .ta-fb__comment:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

  .ta-fb__error {
    margin-top: 8px;
    color: #b42318;
    font-size: var(--fs-label);
  }
  .ta-fb__error[hidden] { display: none; }

  .ta-fb__submit {
    width: 100%;
    margin-top: 12px;
    padding: 11px 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #3d2200;
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
  }
  .ta-fb__submit:hover { background: var(--brand-deep); color: #fff; }
  .ta-fb__submit[disabled] { opacity: .6; cursor: default; }

  .ta-fb__note {
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--fs-label);
    line-height: 1.4;
  }
  .ta-fb__note a { color: var(--brand-text); }

  .ta-fb__thanks { display: flex; gap: 10px; align-items: flex-start; }
  .ta-fb__thanks[hidden] { display: none; }
  .ta-fb__thanks-ico { display: inline-flex; flex: 0 0 auto; color: #067647; }
  .ta-fb__thanks-ico svg { width: 20px; height: 20px; }
  .ta-fb__thanks p { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink); }

  /* Below 640px the row is tight and the gutter drops to 18px — the label goes
     and the launcher becomes a 44px target, the minimum comfortable tap size. */
  @media (max-width: 640px) {
    .ta-fb__launcher { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .ta-fb__launcher-txt { display: none; }
    .ta-fb__launcher-ico svg { width: 20px; height: 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ta-fb__panel { animation: none; }
    .ta-fb__launcher { transition: none; }
    .ta-fb__launcher:hover { transform: none; }
  }