@charset "UTF-8";
/* =============================================================================
   KFG — «Komische Freitags Gesellschaft» — Custom design system
   -----------------------------------------------------------------------------
   This file is compiled by Helix Ultimate's bundled scssphp into
   templates/shaper_helixultimate/css/custom.css
   (Template Options → "Compile SCSS to CSS": ON in dev, OFF in production).

   SCOPING CONTRACT (critical): the design prototype uses bare class/element
   selectors (.card, .btn, .chip, section, nav.top, h1..h4, button) that would
   collide with Bootstrap/Helix. Therefore EVERYTHING here is nested under a
   single ".kfg" root. ALL KFG markup placed into SP Page Builder Custom-HTML
   addons MUST be wrapped in <div class="kfg"> … </div> for these styles (and the
   --custom-property tokens, which live on .kfg) to apply. JS must likewise scope
   its DOM queries within .kfg.

   Source of truth: design-reference/index.html (the <style> block) and
   design-reference/README.md. Colors / sizes / animations are reproduced 1:1.
   ============================================================================= */
/* Google Fonts — passed through unchanged by scssphp's url() handling. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Bricolage+Grotesque:wght@500;700&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");
/* -----------------------------------------------------------------------------
   One-pager chrome: the KFG markup carries its own sticky nav + footer, so on any
   page that contains the .kfg one-pager (the Home page) we hide the Helix template
   header / top-bar / page-title / footer. This is the ONLY intentionally-unscoped
   rule in this file. It self-targets via :has(.kfg) so sub-pages without .kfg
   markup keep the normal template chrome — and the com_kfggrinde views (which DO
   wrap their output in .kfg, per the design-system contract) are excluded via
   :not(.com_kfggrinde) so the dashboard/form pages keep the restyled chrome too.
   The com_kfghistory sub-pages (view=events / view=event) also wrap their output
   in .kfg but must keep the Helix chrome, so they're excluded the same way — as
   does the com_kfgsitzung check-in sub-page (view=checkin) and the slimmed-down
   com_users profile (view/edit), which also wrap their output in .kfg.
   -------------------------------------------------------------------------------- */
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) {
  /* Helix's sticky-header JS injects a spacer div even when the header itself
     is hidden — it pushed the page down by ~55px. */
  /* Helix wraps the component output in a Bootstrap .row > .col-* grid with
     ±15px margins and no .container parent — that made the page 30px wider
     than the viewport (clipped on the right before the SPPB rebuild). */
  /* The page canvas: the prototype put these on <body>. overflow-x must live on
     the BODY scrollport (not on .kfg blocks) — an overflow on a wrapper would
     turn it into the scroll container and kill the fixed/sticky nav. The bg is
     hardcoded (#fff7ea = --bg) because the tokens don't cascade to <body>. */
  overflow-x: hidden;
  background: #fff7ea;
  /* SPPB wraps every section in its own stacking context (.sppb-section
     z-index:1, .sppb-row-container z-index:3). That would trap the fixed nav,
     the confetti overlay and the modal backdrops UNDER later sections.
     Neutralise on the one-pager only (scoped via body:has(.kfg)). */
  /* The announcement banner must be FIXED — SPPB's own
     `#sp-page-builder .sppb-section { position: relative }` (id specificity)
     would otherwise keep it in flow, so it needs an id-level override too. */
  /* SPPB emits an empty full-size .sppb-row-overlay (z-index:1) in EVERY
     section, BEFORE the content container. Stock SPPB keeps content clickable
     because the container has z-index:3 — which we neutralise above, so the
     overlay would win every hit-test and swallow ALL clicks on the page.
     It carries no configured overlay on this page; let clicks pass through. */
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-top-bar, body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-header, body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-title, body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) .sp-page-title, body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) .page-header, body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-bottom, body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-footer {
  display: none !important;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) .sticky-header-placeholder {
  display: none !important;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-main-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-component {
  padding: 0 !important;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-main-body .row {
  margin-left: 0;
  margin-right: 0;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-main-body [class*=col-] {
  padding-left: 0;
  padding-right: 0;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .sppb-section {
  z-index: auto;
  will-change: auto;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .sppb-row-container,
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .sppb-container-inner,
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .sppb-column,
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .sppb-column-addons {
  z-index: auto;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .kfg-sec--banner {
  position: fixed;
  z-index: 1055;
}
body:has(.kfg):not(.com_kfggrinde):not(.com_kfghistory):not(.com_kfgsitzung):not(.com_users) #sp-page-builder .sppb-row-overlay {
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Solidres booking pages — themed to the KFG «Konfetti» look. Scoped to
   body.com_solidres so it ONLY affects Solidres views (reservationasset + the
   checkout steps), never the rest of the site. The Konfetti tokens are
   redeclared here because the .kfg-scoped tokens don't cascade to the (non-.kfg)
   Solidres markup. Fonts are imported globally at the top of this file.
   -------------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   KFG sub-page header. The Home one-pager hides the Helix chrome and carries its
   own .kfg nav, but EVERY sub-page (Solidres booking, partner dashboard, login,
   reset) shows the Helix #sp-top-bar + #sp-header + #sp-page-title. Restyle that
   chrome to the «Konfetti» look so it reads as one cohesive cream band, echoing
   the one-pager's nav.top — instead of the stock dark bar + white header.

   The palette tokens are declared LOCALLY on the chrome containers (not :root)
   so these rules work on ANY sub-page, including ones with no .kfg / no
   body.com_solidres token block (e.g. the com_users login & reset pages).
   -------------------------------------------------------------------------------- */
#sp-top-bar, #sp-header, #sp-page-title, .sp-page-title, #sp-footer, #sp-bottom, .offcanvas-menu {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Top contact strip → a slim cream meta-line (was a dark #333 bar) */
#sp-top-bar {
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
#sp-top-bar .sp-contact-info {
  margin: 0;
}
#sp-top-bar .sp-contact-info > li,
#sp-top-bar a {
  color: var(--ink-soft);
  text-decoration: none;
}
#sp-top-bar a:hover {
  color: var(--coral);
}
#sp-top-bar [class*=fa-] {
  color: var(--coral);
}

/* Main header → cream band with a hairline divider (was plain white) */
#sp-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  /* Follow the 88px menu row (Helix pins the header to 60px) so the border sits
     under the whole nav, not through it, matching the home nav.top height. */
  height: auto !important;
  min-height: 88px;
  /* Helix adds .header-sticky on scroll — keep it cream + blurred, like nav.top */
  /* Main menu → DM Sans, ink-soft, coral on hover/active. Matched to the home
     one-pager nav.top: 14px links on a ~88px-tall bar (Helix defaults to 15px on
     a 60px bar), so the sub-page header reads the same as the home nav. */
  /* Dropdown submenus → cream card */
  /* Smart-Search box → KFG pill */
  /* User dropdown ("👤 Test Pate ▾") → coral icon, cream card menu */
  /* Hamburger / off-canvas toggler → coral bars (were black) */
}
#sp-header.header-sticky {
  background: rgba(255, 247, 234, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -22px rgba(26, 20, 16, 0.5);
}
#sp-header .logo a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
#sp-header .logo-slogan {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-top: 2px;
}
#sp-header .sp-megamenu-parent > li > a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 88px;
  height: 88px;
  padding: 0 13px;
  color: var(--ink-soft);
}
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a,
#sp-header .sp-megamenu-parent > li > a:hover {
  color: var(--coral);
}
#sp-header .sp-megamenu-parent .sp-dropdown {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(26, 20, 16, 0.25);
}
#sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item > a {
  font-family: var(--sans);
  color: var(--ink-soft);
}
#sp-header .sp-megamenu-parent .sp-dropdown .sp-menu-item > a:hover {
  color: var(--coral);
  background: var(--bg-soft);
}
#sp-header .mod-finder .js-finder-search-query,
#sp-header .mod-finder input.form-control {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  box-shadow: none;
}
#sp-header .mod-finder .js-finder-search-query::placeholder,
#sp-header .mod-finder input.form-control::placeholder {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
}
#sp-header .mod-finder .js-finder-search-query:focus,
#sp-header .mod-finder input.form-control:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(238, 77, 58, 0.18);
  outline: none;
}
#sp-header .sp-profile-wrapper .sp-sign-in {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
}
#sp-header .sp-profile-wrapper .sp-sign-in:hover {
  color: var(--coral);
}
#sp-header .sp-profile-wrapper .sp-sign-in .fa-user-circle {
  color: var(--coral);
}
#sp-header .sp-profile-wrapper .sp-sign-in .arrow-icon {
  color: var(--ink-soft);
}
#sp-header .sp-profile-wrapper .sp-profile-dropdown {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(26, 20, 16, 0.25);
  overflow: hidden;
}
#sp-header .sp-profile-wrapper .sp-profile-dropdown-item > a {
  font-family: var(--sans);
  color: var(--ink-soft);
}
#sp-header .sp-profile-wrapper .sp-profile-dropdown-item > a:hover {
  color: var(--coral);
  background: var(--bg-soft);
}
#sp-header #offcanvas-toggler {
  color: var(--coral);
}
#sp-header #offcanvas-toggler .burger-icon span {
  background: var(--coral);
}

/* Page-title band, shown on some sub-pages → cream + Instrument Serif */
#sp-page-title, .sp-page-title {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
#sp-page-title .sp-page-title-heading, #sp-page-title .page-header h1, #sp-page-title h1, #sp-page-title h2, .sp-page-title .sp-page-title-heading, .sp-page-title .page-header h1, .sp-page-title h1, .sp-page-title h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Footer chrome → cream instead of the stock near-black strip. (Often empty on
   sub-pages, where it then just blends into the cream body; styled regardless so
   any footer module reads on-brand.) */
#sp-footer, #sp-bottom {
  background: var(--bg);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
}
#sp-footer a, #sp-bottom a {
  color: var(--ink-soft);
}
#sp-footer a:hover, #sp-bottom a:hover {
  color: var(--coral);
}

/* Mobile off-canvas menu (the hamburger panel) → cream + KFG menu, coral close */
.offcanvas-menu {
  background: var(--bg);
  /* Search + account that kfg.js clones into the panel (enhanceOffcanvas) so the
     mobile hamburger holds menu + search + Profil/Abmelden, all reachable. */
}
.offcanvas-menu .offcanvas-inner .menu > li > a,
.offcanvas-menu .offcanvas-inner ul li > a {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink-soft);
}
.offcanvas-menu .offcanvas-inner .menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul li > a:hover {
  color: var(--coral);
}
.offcanvas-menu .offcanvas-inner .menu > li.active > a,
.offcanvas-menu .offcanvas-inner .menu > li.current > a {
  color: var(--coral);
}
.offcanvas-menu .close-offcanvas {
  color: var(--coral);
  border-color: var(--line);
}
.offcanvas-menu .close-offcanvas .burger-icon span {
  background: var(--coral);
}
.offcanvas-menu .kfg-oc-search {
  margin-bottom: 18px;
}
.offcanvas-menu .kfg-oc-search .awesomplete, .offcanvas-menu .kfg-oc-search form {
  width: 100%;
}
.offcanvas-menu .kfg-oc-search input[type=text], .offcanvas-menu .kfg-oc-search input.form-control {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 16px; /* >=16px avoids iOS focus-zoom */
  color: var(--ink);
}
.offcanvas-menu .kfg-oc-search input[type=text]::placeholder, .offcanvas-menu .kfg-oc-search input.form-control::placeholder {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
}
.offcanvas-menu .kfg-oc-search input[type=text]:focus, .offcanvas-menu .kfg-oc-search input.form-control:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px rgba(238, 77, 58, 0.18);
  outline: none;
}
.offcanvas-menu .kfg-oc-account {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.offcanvas-menu .kfg-oc-account ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas-menu .kfg-oc-account a {
  display: block;
  padding: 9px 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink-soft);
}
.offcanvas-menu .kfg-oc-account a:hover {
  color: var(--coral);
}

body.com_solidres {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --mint: #1f9d6f;
  --cobalt: #2a4ed8;
  --berry: #c1106d;
  --lilac: #9a73e8;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--bg);
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  /* Headlines → Instrument Serif */
  /* Labels / meta → JetBrains Mono */
  /* Step nav (Room & Rates → Guest info → Confirmation) */
  /* Room-type rows → KFG cards */
  /* ---------------------------------------------------------------------
   * Solidres Hub PARTNER DASHBOARD (view=dashboard) → KFG Konfetti look.
   * Replaces the stock rainbow tiles + Bootstrap navbar with cream cards,
   * Instrument-Serif labels and a coloured icon disc per shortcut.
   * ------------------------------------------------------------------- */
  /* Partner navbar → clean pill bar */
  /* Shortcut grid → KFG cards */
  /* Buttons → pills (coral primary, ink outline) */
  /* Form fields → KFG inputs */
  /* Occupancy / info badges */
  /* Free price highlight */
  /* Booking / search / sidebar panels → soft cards */
  /* Primary "Select / book this Grinde" + submit CTAs → coral pill */
  /* Availability calendar → KFG calendar look */
  /* Links pick up the accent */
}
body.com_solidres h1, body.com_solidres h2, body.com_solidres h3, body.com_solidres h4, body.com_solidres .roomtype_name {
  font-family: "Instrument Serif", "Fraunces", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.com_solidres .roomtype_name {
  font-size: 30px;
}
body.com_solidres #sp-component > h1, body.com_solidres #sp-component > h2 {
  font-size: clamp(40px, 5vw, 72px);
  margin-bottom: 8px;
}
body.com_solidres label, body.com_solidres .control-label, body.com_solidres .badge {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
body.com_solidres .steps .active, body.com_solidres .steps .step-active, body.com_solidres .steps [class*=active] {
  color: var(--coral);
}
body.com_solidres .room_type_row {
  background: var(--paper) !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 18px;
  padding: 22px 24px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  scroll-margin-top: 90px; /* clear the sticky header when deep-linked from a card */
  /* When reached via a catalog card's "…bei Solidres" link (#room_type_row_N),
     highlight the chosen Grinde so it is clearly displayed on arrival. */
}
body.com_solidres .room_type_row:hover {
  box-shadow: 0 18px 40px -20px rgba(26, 20, 16, 0.25);
  transform: translateY(-3px);
}
body.com_solidres .room_type_row:target {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral), 0 18px 44px -18px rgba(238, 77, 58, 0.45);
  animation: kfg-grinde-pulse 1.4s ease 1;
}
@keyframes kfg-grinde-pulse {
  0% {
    box-shadow: 0 0 0 2px var(--coral), 0 0 0 12px rgba(238, 77, 58, 0.2);
  }
  100% {
    box-shadow: 0 0 0 2px var(--coral), 0 18px 44px -18px rgba(238, 77, 58, 0.45);
  }
}
body.com_solidres #solidres {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}
body.com_solidres #solidres .navbar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 12px;
  margin-bottom: 28px;
  box-shadow: 0 12px 32px -24px rgba(26, 20, 16, 0.5);
  /* Mobile collapse toggle (the Bootstrap hamburger) → KFG, not the stock grey
     box. Coral bars via a recoloured icon SVG; cream pill border. */
}
body.com_solidres #solidres .navbar .nav-link, body.com_solidres #solidres .navbar .dropdown-toggle, body.com_solidres #solidres .navbar .dropdown-item, body.com_solidres #solidres .navbar .dashboard-logout {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--ink-soft);
  border-radius: 10px;
}
body.com_solidres #solidres .navbar .nav-link:hover, body.com_solidres #solidres .navbar .dropdown-item:hover {
  color: var(--coral);
  background: var(--bg-soft);
}
body.com_solidres #solidres .navbar .active > .nav-link, body.com_solidres #solidres .navbar .nav-link.active, body.com_solidres #solidres .navbar .dropdown-item.active {
  color: var(--coral);
}
body.com_solidres #solidres .navbar .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}
body.com_solidres #solidres .navbar .navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 12px;
  color: var(--coral);
}
body.com_solidres #solidres .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(238, 77, 58, 0.18);
  outline: none;
}
body.com_solidres #solidres .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ee4d3a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.com_solidres #dashboard {
  /* Map Solidres' stock colour classes onto the Konfetti palette (icon disc). */
}
body.com_solidres #dashboard .row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 18px;
}
body.com_solidres #dashboard .col-md-4 {
  flex: 1 1 280px;
  max-width: none;
  padding: 0;
}
body.com_solidres #dashboard .dashboard-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 168px;
  padding: 30px 18px;
  background: var(--paper) !important;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--ink) !important;
  text-decoration: none;
  text-align: center;
  font-family: "Instrument Serif", "Fraunces", Georgia, serif;
  font-size: 24px;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.com_solidres #dashboard .dashboard-shortcut i {
  width: 66px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  background: var(--coral); /* default disc; per-tile accent below */
}
body.com_solidres #dashboard .dashboard-shortcut:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px -22px rgba(26, 20, 16, 0.34);
  border-color: var(--coral);
}
body.com_solidres #dashboard .dashboard-shortcut.teal i {
  background: var(--cobalt);
}
body.com_solidres #dashboard .dashboard-shortcut.purple i {
  background: var(--berry);
}
body.com_solidres #dashboard .dashboard-shortcut.darkpurple i {
  background: var(--coral);
}
body.com_solidres #dashboard .dashboard-shortcut.green i {
  background: var(--mint);
}
body.com_solidres #dashboard .dashboard-shortcut.skyblue i {
  background: var(--lilac);
}
body.com_solidres #dashboard .dashboard-shortcut.orange i {
  background: var(--mustard);
}
body.com_solidres #solidres .powered {
  text-align: center;
  margin-top: 24px;
}
body.com_solidres #solidres .powered p {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}
body.com_solidres .btn {
  border-radius: 999px !important;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 500;
}
body.com_solidres .btn-primary {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
}
body.com_solidres .btn-primary:hover {
  background: #d63a26 !important;
  border-color: #d63a26 !important;
}
body.com_solidres .btn-secondary, body.com_solidres .btn-outline-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
}
body.com_solidres .btn-secondary:hover, body.com_solidres .btn-outline-secondary:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
body.com_solidres .form-control, body.com_solidres input:not([type=checkbox]):not([type=radio]), body.com_solidres select, body.com_solidres textarea {
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper);
}
body.com_solidres .form-control:focus, body.com_solidres input:not([type=checkbox]):not([type=radio]):focus, body.com_solidres select:focus, body.com_solidres textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
body.com_solidres .badge.bg-secondary {
  background: var(--bg-soft) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line);
  border-radius: 999px;
}
body.com_solidres .price, body.com_solidres .tariff_price, body.com_solidres [class*=price], body.com_solidres .sr-amount {
  color: var(--mint);
}
body.com_solidres .well, body.com_solidres .panel, body.com_solidres .card, body.com_solidres .sr-sidebar, body.com_solidres .sidebar-widget,
body.com_solidres #sr-checkavailability-form-component, body.com_solidres [class*=reservation-form] {
  background: var(--paper);
  border: 1px solid var(--line) !important;
  border-radius: 18px;
}
body.com_solidres .trigger_checkinoutform, body.com_solidres button[type=submit].btn, body.com_solidres .sr-submit {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
}
body.com_solidres .trigger_checkinoutform:hover, body.com_solidres button[type=submit].btn:hover, body.com_solidres .sr-submit:hover {
  background: #d63a26 !important;
  border-color: #d63a26 !important;
}
body.com_solidres table.table[class*=btype-] {
  border: none;
}
body.com_solidres table.table[class*=btype-] th, body.com_solidres table.table[class*=btype-] td {
  border-color: transparent !important;
}
body.com_solidres table.table[class*=btype-] th, body.com_solidres table.table[class*=btype-] .row-week-day td {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
body.com_solidres table.table[class*=btype-] .row-month-day td {
  text-align: center;
  border-radius: 8px;
  padding: 6px;
}
body.com_solidres table.table[class*=btype-] .row-month-day td.past {
  color: rgba(0, 0, 0, 0.25);
}
body.com_solidres table.table[class*=btype-] .row-month-day td.busy, body.com_solidres table.table[class*=btype-] .row-month-day td.restricted, body.com_solidres table.table[class*=btype-] .row-month-day td.unavailable {
  background: repeating-linear-gradient(45deg, var(--bg-soft) 0 4px, transparent 4px 8px);
  color: var(--ink-soft);
}
body.com_solidres table.table[class*=btype-] .row-month-day td:not(.past):not(.busy):hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}
body.com_solidres .legend-busy, body.com_solidres .legend-restricted, body.com_solidres .legend-available {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
}
body.com_solidres a:not(.btn) {
  color: var(--coral);
}

/* -----------------------------------------------------------------------------
   Design tokens — Palette «Konfetti» (default)
   Shared by the .kfg content scope AND the .kfg-sec SP-Page-Builder sections
   (the sections sit OUTSIDE any .kfg wrapper, so they need their own copy).
   -------------------------------------------------------------------------- */
.kfg, .kfg-sec {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --mint: #1f9d6f;
  --cobalt: #2a4ed8;
  --berry: #c1106d;
  --lilac: #9a73e8;
  --display: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --maxw: 1280px;
  --pad: 32px;
}

.kfg {
  /* ---------------------------------------------------------------------------
     Base — these applied to <body> in the prototype. .kfg is a pure CONTENT
     SCOPE: typography + tokens, deliberately NO background and NO overflow.
     Page background lives on body:has(.kfg); section backgrounds on .kfg-sec.
     (An overflow here would break the fixed nav; a background would paint
     boxes inside coloured sections, since every addon carries .kfg now.)
     --------------------------------------------------------------------------- */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Typography helpers */
  /* Konfetti background pattern */
  /* Buttons */
  /* Tag chips */
  /* Card — base, hover lift + shadow, and the playful hover "wobble" rotation.
     transform-origin and the rotation variants reproduce the prototype exactly. */
  /* Catalog layout — the grid + filter row are JS mount points (empty in the
     markup), so the design system owns their layout. Mirrors the prototype's
     inline grid: repeat(auto-fill, minmax(260px, 1fr)), gap 24; filter chips row. */
  /* Catalog toolbar: date range + filter chips + Typ/Zustand/Besitzer + sort. */
  /* Modal photo carousel (media pane). Shares the .placeholder framing; adds
     cross-fading photos + arrow/dot controls when a Grinde has 2+ images. */
  /* Navigation — FIXED (not sticky): under SPPB each section is its own short
     container, so sticky would only stick within the ~70px nav section. Fixed
     is visually identical here (the nav starts at the very top); the
     .kfg-sec--nav section provides the layout spacer, and every anchored
     section carries scroll-margin-top so #idee & co. don't hide underneath. */
  /* Burger — hidden on desktop; replaces .nav-links with a dropdown panel on
     phones (before this, ≤880px had NO navigation at all: the links were
     display:none'd and the Helix hamburger is hidden with the header). */
  /* ---------------------------------------------------------------------------
     One-pager components — these replace the prototype's fixed inline styles
     (grid-template-columns, fixed heights) with breakpoint-aware classes.
     The 2-column layouts themselves are SPPB columns (responsive per device);
     these classes cover what lives INSIDE an addon.
     --------------------------------------------------------------------------- */
  /* Hero */
  /* Idee steps (were an inline auto-fit grid; now SPPB columns).
     `&.` because the class sits ON the same addon element as `kfg`
     (SPPB renders the addon class setting onto one wrapper div). */
  /* Katalog side note (`&.`: class sits on the addon element itself) */
  /* Section lead copy (Mitmachen / Über / Kontakt) */
  /* Mitmachen registration card */
  /* Über — stat cards. Now four native text_block addons (.kfg.kfg-stat); the
     column class .kfg-stats-col grids them 2×2 (rule outside the .kfg scope). */
  /* Footer — logo + meta are now two native text_block addons; the flex layout
     lives on the column class .kfg-footer-col (rule outside the .kfg scope). */
  /* Detail modal — the two inline grids from kfg.js, now stackable on phones */
  /* Desktop: the request form (right) is usually taller than the photo + facts
     (left), which left an empty mat below the facts. Make the photo grow to fill
     that leftover height so the frame is full and the photo is as large as
     possible. (Mobile stacks, so the fixed 260px above still applies there.) */
  /* Modal request form (right column) — replaces the old Solidres handoff CTA.
     Fields reuse .input/.textarea/.label; only layout + the success panel live
     here. The date pair sits side by side and stacks on narrow phones. */
  /* Success panel — swapped in for the form after request.submit succeeds */
  /* Sections + color variants */
  /* Accordion (FAQ) */
  /* Form fields */
  /* Modal */
  /* Calendar (prototype stand-in for the Solidres booking widget) */
  /* Confetti dot */
  /* Logo */
  /* Hero sticker — animated wobble (see keyframes + reduced-motion block) */
  /* Marquee */
  /* Confetti rain */
  /* Sticker overlay on cards */
  /* A booked Grinde (real Solidres availability) is dimmed + slightly desaturated. */
  /* Hand-drawn underline under headlines (inline SVG data-URIs, accent-colored) */
  /* Sparkles */
  /* Section divider squiggle */
  /* Responsive tweaks (prototype @media max-width:880px).
     The old `.display.h1 { font-size:64px !important }` pin is gone — heading
     sizes are fluid clamp()s in the .kfg-h system now, so nothing overflows. */
}
.kfg,
.kfg *,
.kfg *::before,
.kfg *::after {
  box-sizing: border-box;
}
.kfg h1, .kfg h2, .kfg h3, .kfg h4 {
  margin: 0;
  font-weight: 400;
}
.kfg p {
  margin: 0;
}
.kfg a {
  color: inherit;
}
.kfg button {
  font: inherit;
  cursor: pointer;
}
.kfg .display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.kfg .display em {
  font-style: italic;
}
.kfg .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kfg .container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.kfg .confetti-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.kfg .confetti-bg svg {
  position: absolute;
}
.kfg .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  background: var(--ink);
  color: var(--bg);
  transition: transform 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.kfg .btn:hover {
  transform: translateY(-1px);
  background: #2c2218;
}
.kfg .btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.kfg .btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}
.kfg .btn-accent {
  background: var(--coral);
  color: white;
}
.kfg .btn-accent:hover {
  background: #d63a26;
}
.kfg .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kfg .chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.kfg .card {
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 100%;
}
.kfg .card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 18px 40px -20px rgba(26, 20, 16, 0.25);
}
.kfg .card:nth-child(3n):hover {
  transform: translateY(-6px) rotate(1.5deg);
}
.kfg .card:nth-child(4n):hover {
  transform: translateY(-6px) rotate(-1.8deg);
}
.kfg [data-kfg=catalog-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.kfg [data-kfg=catalog-filters] {
  margin-bottom: 36px;
}
.kfg .kfg-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kfg .kfg-toolbar-row + .kfg-toolbar-row {
  margin-top: 12px;
}
.kfg .kfg-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kfg .kfg-select > span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.kfg .kfg-select select,
.kfg .kfg-select input[type=date] {
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.kfg .kfg-select select:focus,
.kfg .kfg-select input[type=date]:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
}
.kfg .kfg-carousel {
  background: var(--bg-soft);
  /* Each slide: a blurred cover of the photo fills the frame (no bare
     letterbox mat) with the sharp, WHOLE photo on top (contain, uncropped —
     masks keep their horns/headdress). Slides cross-fade. */
}
.kfg .kfg-carousel .kfg-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.kfg .kfg-carousel .kfg-carousel-slide.is-active {
  opacity: 1;
}
.kfg .kfg-carousel .kfg-carousel-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(0.94) saturate(1.1);
  transform: scale(1.18); /* hide the blurred edge bleed */
}
.kfg .kfg-carousel .kfg-carousel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(26, 20, 16, 0.22));
}
.kfg .kfg-carousel .kfg-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.kfg .kfg-carousel .kfg-carousel-arrow:hover {
  background: #fff;
}
.kfg .kfg-carousel .kfg-carousel-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
.kfg .kfg-carousel .kfg-carousel-prev {
  left: 14px;
}
.kfg .kfg-carousel .kfg-carousel-next {
  right: 14px;
}
.kfg .kfg-carousel .kfg-carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.kfg .kfg-carousel .kfg-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.kfg .kfg-carousel .kfg-carousel-dot.is-active {
  background: var(--coral);
  border-color: #fff;
  transform: scale(1.15);
}
.kfg .placeholder {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kfg .placeholder .ph-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.kfg .placeholder .ph-mask {
  width: 60%;
  height: 70%;
  mix-blend-mode: multiply;
}
.kfg nav.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050; /* above all sections, below the modal backdrops (1060) */
  background: rgba(255, 247, 234, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  /* .nav-row, NOT .row: Bootstrap's `.row > * { width:100% }` (loaded with
     the SPPB page assets) would stack the logo and links onto two lines. */
}
.kfg nav.top .nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.kfg nav.top a.link {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
  margin: 0 14px;
}
.kfg nav.top a.link:hover {
  color: var(--ink);
}
.kfg nav.top .nav-cta {
  margin-left: 16px;
}
.kfg .nav-links {
  display: flex;
  align-items: center;
}
.kfg .nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.kfg .nav-burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.kfg nav.top.nav-open .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.kfg nav.top.nav-open .nav-burger span:nth-child(2) {
  opacity: 0;
}
.kfg nav.top.nav-open .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.kfg .hero-lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 36px;
  text-wrap: pretty;
}
.kfg .hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.kfg .hero-stats {
  display: flex;
  flex-wrap: wrap; /* the prototype row overflowed on phones */
  gap: 24px 32px;
  margin-top: 56px;
  color: var(--ink-soft);
}
.kfg .hero-stats .stat-num {
  font-size: 44px;
  color: var(--ink);
}
.kfg .hero-stats .stat-label {
  font-size: 11px;
  margin-top: 4px;
}
.kfg .hero-collage {
  position: relative;
  height: 480px;
}
.kfg .hero-collage .hc {
  position: absolute;
}
.kfg .hero-collage .hc-1 {
  top: 0;
  right: 40px;
  width: 220px;
  transform: rotate(-4deg);
}
.kfg .hero-collage .hc-2 {
  top: 80px;
  left: 0;
  width: 200px;
  transform: rotate(3deg);
}
.kfg .hero-collage .hc-3 {
  bottom: 0;
  right: 0;
  width: 240px;
  transform: rotate(-2deg);
}
@media (max-width: 1199px) {
  .kfg .hero-collage {
    height: 420px;
  }
  .kfg .hero-collage .hc-1 {
    width: 190px;
    right: 24px;
  }
  .kfg .hero-collage .hc-2 {
    width: 175px;
  }
  .kfg .hero-collage .hc-3 {
    width: 205px;
  }
}
@media (max-width: 640px) {
  .kfg .hero-collage {
    height: 330px;
  }
  .kfg .hero-collage .hc-1 {
    width: 42%;
    right: 6%;
  }
  .kfg .hero-collage .hc-2 {
    width: 38%;
    top: 64px;
  }
  .kfg .hero-collage .hc-3 {
    width: 44%;
  }
}
.kfg.idee-step {
  padding: 32px 0;
  border-top: 2px solid var(--ink);
}
.kfg.idee-step .step-num {
  font-size: 56px;
  margin-bottom: 16px;
}
.kfg.idee-step h3 {
  font-family: var(--display);
  font-size: 32px;
  margin-bottom: 8px;
}
.kfg.idee-step p {
  color: rgba(26, 20, 16, 0.75);
  text-wrap: pretty;
}
.kfg.katalog-note {
  color: var(--ink-soft);
  max-width: 280px;
}
.kfg .sec-lead {
  color: var(--ink-soft);
  font-size: 18px;
  margin-bottom: 16px;
  max-width: 580px;
  text-wrap: pretty;
}
.kfg .auth-hint {
  color: var(--ink-soft);
  font-size: 13px;
}
.kfg .kfg-reg-card {
  background: var(--paper);
  border-radius: 24px;
  padding: 30px 32px;
  border: 1px solid var(--line);
}
.kfg .kfg-reg-card .reg-title {
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.kfg .kfg-reg-card .reg-status {
  color: var(--mint);
  margin-bottom: 18px;
  font-size: 12px;
}
@media (max-width: 575px) {
  .kfg .kfg-reg-card {
    padding: 24px 20px;
  }
}
.kfg.kfg-stat {
  background: var(--paper);
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid var(--line);
}
.kfg.kfg-stat .stat-num {
  font-size: 56px;
}
.kfg.kfg-stat .mono {
  color: var(--ink-soft);
}
@media (max-width: 575px) {
  .kfg.kfg-stat {
    padding: 20px 16px;
  }
  .kfg.kfg-stat .stat-num {
    font-size: 38px;
  }
}
.kfg .footer-meta {
  color: var(--ink-soft);
}
.kfg .kfg-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}
@media (max-width: 820px) {
  .kfg .kfg-modal-grid {
    grid-template-columns: 1fr;
    /* beats the JS inline height */
  }
  .kfg .kfg-modal-grid .placeholder {
    height: 260px !important;
  }
}
@media (min-width: 821px) {
  .kfg .kfg-modal-media-col {
    display: flex;
    flex-direction: column;
  }
  .kfg .kfg-modal-media-col > .kfg-carousel,
  .kfg .kfg-modal-media-col > .placeholder {
    flex: 1 1 auto;
    height: auto !important; /* override the JS inline height:420px */
    aspect-ratio: auto; /* override the .placeholder 4/5 ratio */
    min-height: 380px;
  }
  .kfg .kfg-modal-facts-col {
    flex: 0 0 auto;
  }
}
.kfg .kfg-modal-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.kfg .kfg-request-form {
  display: grid;
  gap: 12px;
}
.kfg .kfg-request-form .label {
  margin-bottom: 4px;
}
.kfg .kfg-request-form .btn {
  margin-top: 6px;
}
.kfg .kfg-request-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .kfg .kfg-request-dates {
    grid-template-columns: 1fr;
  }
}
.kfg .kfg-request-success {
  padding: 6px 0 14px;
}
.kfg .kfg-request-success .kfg-request-success-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(31, 157, 111, 0.12);
  color: var(--mint);
  border: 1px solid rgba(31, 157, 111, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 16px;
}
.kfg .kfg-request-success .display {
  font-size: 40px;
  margin-bottom: 10px;
}
.kfg .kfg-request-success p {
  color: var(--ink-soft);
}
.kfg section {
  padding: 96px 0;
  position: relative;
}
.kfg section.hero {
  padding: 80px 0 120px;
  position: relative;
}
.kfg section.alt {
  background: var(--bg-soft);
}
.kfg section.coral-section {
  background: var(--coral);
  color: var(--bg);
}
.kfg section.mustard-section {
  background: var(--mustard);
  color: var(--ink);
}
.kfg section.cobalt-section {
  background: var(--cobalt);
  color: var(--bg);
}
.kfg section.coral-section .kicker {
  color: rgba(255, 255, 255, 0.7);
}
.kfg section.coral-section .kicker::before {
  background: rgba(255, 255, 255, 0.7);
}
.kfg section.cobalt-section .kicker {
  color: rgba(255, 255, 255, 0.7);
}
.kfg section.cobalt-section .kicker::before {
  background: rgba(255, 255, 255, 0.7);
}
.kfg .kicker {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kfg .kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ink-soft);
}
.kfg .acc-item {
  border-top: 1px solid var(--line);
}
.kfg .acc-item:last-child {
  border-bottom: 1px solid var(--line);
}
.kfg .acc-item.open .acc-body {
  max-height: 400px;
  padding-bottom: 22px;
}
.kfg .acc-header {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
}
.kfg .acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: var(--ink-soft);
}
.kfg .input,
.kfg .textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}
.kfg .input:focus,
.kfg .textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
}
.kfg .label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  display: block;
}
.kfg .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060; /* above Helix header + Bootstrap modal layers */
  background: rgba(26, 20, 16, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  animation: fade-in 0.2s ease;
}
.kfg .modal {
  /* Neutralise Bootstrap's `.modal { display:none; position:fixed; top/left:0;
     width/height:100%; pointer-events:none }` — without these our design dialog
     is invisible/unclickable inside the .modal-backdrop flex container. */
  display: block;
  position: relative;
  inset: auto;
  height: auto;
  pointer-events: auto;
  background: var(--bg);
  border-radius: 24px;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  animation: pop-in 0.25s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
.kfg .cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kfg .cal .dow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  text-align: center;
  padding: 6px 0;
  letter-spacing: 0.1em;
}
.kfg .cal-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  background: var(--paper);
  position: relative;
}
.kfg .cal-day.muted {
  color: rgba(0, 0, 0, 0.25);
  background: transparent;
  cursor: default;
}
.kfg .cal-day.fasnacht {
  box-shadow: inset 0 0 0 1px var(--mustard);
  font-weight: 700;
}
.kfg .cal-day.taken {
  background: repeating-linear-gradient(45deg, var(--bg-soft) 0 4px, transparent 4px 8px);
  color: var(--ink-soft);
  cursor: not-allowed;
  text-decoration: line-through;
}
.kfg .cal-day.range {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
}
.kfg .cal-day.range-end {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.kfg .cal-day:hover:not(.muted):not(.taken) {
  border-color: var(--ink);
}
.kfg .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.kfg .logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.kfg .logo .lo-mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
}
.kfg .logo .lo-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kfg .sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mustard);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  animation: wobble 3.2s ease-in-out infinite;
}
.kfg .marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
  padding: 22px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-1.2deg);
  margin: -16px -40px;
  position: relative;
  z-index: 3;
}
.kfg .marquee.alt-color {
  background: var(--coral);
  color: white;
}
.kfg .marquee-track {
  display: flex;
  gap: 56px;
  animation: marquee 38s linear infinite;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 38px;
  line-height: 1;
  width: max-content;
}
.kfg .marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  font-style: italic;
}
.kfg .marquee-track span::after {
  content: "✳"; /* asterisk */
  font-style: normal;
  font-family: var(--sans);
  font-size: 22px;
  color: var(--mustard);
}
.kfg .confetti-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.kfg .confetti-rain .flake {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  animation: fall linear infinite;
  will-change: transform;
}
.kfg .card-sticker {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--mustard);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  transform: rotate(6deg);
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.kfg .card-sticker.coral {
  background: var(--coral);
  color: white;
}
.kfg .card-sticker.mint {
  background: var(--mint);
  color: white;
}
.kfg .card-sticker.berry {
  background: var(--berry);
  color: white;
}
.kfg .card-sticker.lilac {
  background: var(--lilac);
  color: white;
}
.kfg .card-sticker.vergeben {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(-3deg);
}
.kfg .card[data-booked] .placeholder {
  opacity: 0.5;
  filter: grayscale(0.35);
}
.kfg .squiggle-under {
  position: relative;
  display: inline-block;
}
.kfg .squiggle-under::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -10px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 Q 25 0 50 7 T 100 7 T 150 7 T 198 6' fill='none' stroke='%23ee4d3a' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
}
.kfg .squiggle-under.mustard::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 Q 25 0 50 7 T 100 7 T 150 7 T 198 6' fill='none' stroke='%23f1b62a' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
}
.kfg .squiggle-under.mint::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 Q 25 0 50 7 T 100 7 T 150 7 T 198 6' fill='none' stroke='%231f9d6f' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
}
.kfg .sparkle {
  position: absolute;
  pointer-events: none;
}
.kfg .sparkle svg {
  display: block;
}
.kfg .sparkle.spin {
  animation: spin-slow 18s linear infinite;
}
.kfg .sparkle.pulse {
  animation: pulse 2.4s ease-in-out infinite;
}
.kfg .section-squiggle {
  width: 100%;
  height: 24px;
  display: block;
}
@media (max-width: 880px) {
  .kfg section {
    padding: 64px 0;
  }
  .kfg .nav-burger {
    display: inline-flex;
  }
  .kfg nav.top .nav-links {
    display: none;
  }
  .kfg nav.top.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 247, 234, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 22px;
    box-shadow: 0 24px 40px -30px rgba(26, 20, 16, 0.5);
  }
  .kfg nav.top.nav-open .nav-links a.link {
    margin: 0;
    padding: 12px 0;
    font-size: 16px;
    width: 100%;
  }
  .kfg nav.top.nav-open .nav-links .nav-cta {
    margin: 12px 0 0;
  }
}

/* =============================================================================
   SPPB SECTION SYSTEM — the one-pager is real SP Page Builder sections
   (src/sppagebuilder/home-onepager.json). Every section is fluid
   (`fullscreen:1` → .sppb-container-inner) and carries `kfg-sec` + a variant;
   the container replicates the prototype's .container (1280px / 32px pad).
   Section chrome (padding, backgrounds) lives HERE, not in the page JSON, so
   the design system stays the single source of truth.
   ============================================================================= */
.kfg-sec {
  position: relative;
  padding: 96px 0;
  background: var(--bg);
  color: var(--ink);
  scroll-margin-top: 100px; /* anchors (#idee …) must clear the fixed nav */
  /* SPPB's -15px gutter — gaps come from column padding */
  /* .sppb-column is display:flex — let content fill it */
  /* e.g. the Katalog side note */
}
.kfg-sec .sppb-container-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.kfg-sec .sppb-row {
  margin: 0;
}
.kfg-sec .sppb-column-addons {
  width: 100%;
}
.kfg-sec .sppb-column.kfg-col-bottom {
  align-items: flex-end;
}
@media (max-width: 880px) {
  .kfg-sec {
    padding: 64px 0;
  }
}

.kfg-sec--nav {
  padding: 0;
  /* Layout spacer = fixed nav.top height (88 desktop / 72 mobile), PLUS the
     announcement banner's height when it is showing (--kfg-banner-h, set by JS;
     0 when dismissed or absent). */
  height: calc(88px + var(--kfg-banner-h, 0px));
  background: transparent;
}
.kfg-sec--nav .sppb-container-inner {
  max-width: none;
  padding: 0;
}
@media (max-width: 880px) {
  .kfg-sec--nav {
    height: calc(72px + var(--kfg-banner-h, 0px));
    padding: 0;
  }
}

/* Announcement banner — a fixed, dismissible bar above the nav (issue #1).
   The message text lives in a text_block addon, so it's editable in SP Page
   Builder; kfg.js injects the close button and manages the dismiss + the
   --kfg-banner-h offset. */
.kfg-sec--banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1055; /* above nav (1050), below modals (1060) */
  padding: 0;
  background: var(--coral);
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.kfg-sec--banner .sppb-container-inner {
  max-width: none;
  padding: 0;
}
.kfg-sec--banner .kfg-banner-msg,
.kfg-sec--banner .sppb-addon-text-block {
  margin: 0;
}
.kfg-sec--banner .sppb-addon-content {
  padding: 0;
}
.kfg-sec--banner .kfg-banner-text {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  padding: 9px 44px; /* room for the × on the right */
}
.kfg-sec--banner .kfg-banner-text strong {
  font-weight: 500;
}
.kfg-sec--banner .kfg-banner-text a {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 575px) {
  .kfg-sec--banner .kfg-banner-text {
    font-size: 12px;
    padding: 8px 40px;
  }
}
.kfg-sec--banner .kfg-banner-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.kfg-sec--banner .kfg-banner-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Nav sits just below the banner while it shows. Same specificity as the
   design-system `.kfg nav.top { top:0 }`, but later in the file, so it wins. */
.kfg nav.top {
  top: var(--kfg-banner-h, 0px);
}

.kfg-sec--hero {
  padding: 80px 0 120px;
}
@media (max-width: 880px) {
  .kfg-sec--hero {
    padding: 48px 0 72px;
  }
}

.kfg-sec--alt {
  background: var(--bg-soft);
}

.kfg-sec--mustard {
  background: var(--mustard);
}

.kfg-sec--marquee {
  padding: 32px 0;
  background: transparent;
  overflow: hidden; /* clips the marquee's rotated ±40px overhang */
}
.kfg-sec--marquee .sppb-container-inner {
  max-width: none;
  padding: 0;
}
@media (max-width: 880px) {
  .kfg-sec--marquee {
    padding: 32px 0;
  }
}

.kfg-sec--footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 880px) {
  .kfg-sec--footer {
    padding: 40px 0 28px;
  }
}

/* =============================================================================
   HEADING SYSTEM — SPPB `heading` addons carry `kfg kfg-h kfg-h--<variant>`.
   The addon renders <h1/h2 class="sppb-addon-title">, so the display face +
   fluid clamp() sizes attach here (replaces the prototype's inline clamps AND
   the old 64px !important mobile pin, which overflowed 375px screens).
   ============================================================================= */
.kfg-h .sppb-addon-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0;
  color: inherit;
}
.kfg-h .sppb-addon-title em {
  font-style: italic;
}

.kfg-h--hero .sppb-addon-title {
  font-size: clamp(42px, 9.2vw, 132px);
  margin: 28px 0;
}

.kfg-h--sec .sppb-addon-title {
  font-size: clamp(36px, 5.5vw, 88px);
}

.kfg-h--idee .sppb-addon-title {
  margin-bottom: 56px;
  max-width: 900px;
}

.kfg-h--katalog .sppb-addon-title {
  max-width: 700px;
}

.kfg-h--mid .sppb-addon-title {
  font-size: clamp(34px, 5vw, 76px);
  margin-bottom: 24px;
}

.kfg-h--faq .sppb-addon-title {
  font-size: clamp(32px, 4.4vw, 64px);
}

.kfg-h--kontakt .sppb-addon-title {
  font-size: clamp(38px, 6vw, 96px);
  margin-bottom: 24px;
}

/* =============================================================================
   FAQ — the real SPPB `accordion` addon (class `kfg kfg-faq`), restyled from
   the stock panels to the prototype's .acc-item look (hairline rows, serif
   titles, +/– toggle). The FA chevron is replaced by a CSS glyph.
   ============================================================================= */
.kfg-faq .sppb-panel-group {
  border: 0;
  background: transparent;
}
.kfg-faq .sppb-panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.kfg-faq .sppb-panel:last-child {
  border-bottom: 1px solid var(--line);
}
.kfg-faq .sppb-panel-heading {
  background: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 22px 0;
  cursor: pointer;
}
.kfg-faq .sppb-panel-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (max-width: 575px) {
  .kfg-faq .sppb-panel-title {
    font-size: 21px;
  }
}
.kfg-faq .sppb-toggle-direction {
  flex-shrink: 0;
  transform: none !important; /* SPPB rotates the icon 90° when open — would turn '–' into '|' */
  /* stock FontAwesome chevron */
}
.kfg-faq .sppb-toggle-direction i {
  display: none;
}
.kfg-faq .sppb-toggle-direction::after {
  content: "+";
  font-family: var(--sans);
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.kfg-faq .sppb-panel-heading.active .sppb-toggle-direction::after {
  content: "–";
}
.kfg-faq .sppb-panel-collapse {
  border: 0;
  background: transparent;
}
.kfg-faq .sppb-panel-body {
  padding: 0 0 22px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
}

/* =============================================================================
   Keyframes — global by spec; names match the prototype 1:1.
   ============================================================================= */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.9;
  }
}
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes wobble {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
/* =============================================================================
   Reduced motion — quiet all confetti / marquee / sparkle / wobble / modal
   animation and the accordion transition for users who request it.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .kfg .marquee-track,
  .kfg .confetti-rain .flake,
  .kfg .sticker,
  .kfg .sparkle.spin,
  .kfg .sparkle.pulse,
  .kfg .modal-backdrop,
  .kfg .modal {
    animation: none !important;
  }
  .kfg .acc-body {
    transition: none !important;
  }
  .kfg .card,
  .kfg .btn {
    transition: none !important;
  }
}
/* ----------------------------------------------------------------------
 * Embedded ConvertForms registration form inside the Mitmachen card.
 * Strip ConvertForms' own chrome and restyle its inputs to the KFG look
 * (the .kfg ancestor supplies the palette vars).
 * ------------------------------------------------------------------- */
/* The Mitmachen registration card AND the Kontakt form (Issue #7) both embed a
   ConvertForms form; they share the same field/label/button treatment. The
   contact wrapper is <div class="kfg kfg-contact"> (both classes on one element),
   so it is matched with the compound `.kfg.kfg-contact`. */
.kfg.kfg-contact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 32px;
}
@media (max-width: 575px) {
  .kfg.kfg-contact {
    padding: 24px 20px;
  }
}

.kfg .kfg-reg-card,
.kfg.kfg-contact { /* placeholder-guided; labels would double up */ }
.kfg .kfg-reg-card .convertforms, .kfg .kfg-reg-card .cf-form-wrap, .kfg .kfg-reg-card .cf-form,
.kfg.kfg-contact .convertforms,
.kfg.kfg-contact .cf-form-wrap,
.kfg.kfg-contact .cf-form {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.kfg .kfg-reg-card .cf-control-group,
.kfg.kfg-contact .cf-control-group {
  margin: 0 0 14px !important;
}
.kfg .kfg-reg-card .cf-label,
.kfg.kfg-contact .cf-label {
  display: none !important;
}
.kfg .kfg-reg-card input:not([type=submit]):not([type=hidden]),
.kfg.kfg-contact input:not([type=submit]):not([type=hidden]) {
  width: 100% !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 15px !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.kfg .kfg-reg-card input:not([type=submit]):focus,
.kfg.kfg-contact input:not([type=submit]):focus {
  border-color: var(--coral) !important;
  outline: none !important;
}
.kfg .kfg-reg-card ::placeholder,
.kfg.kfg-contact ::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}
.kfg .kfg-reg-card .cf-password-toggle,
.kfg.kfg-contact .cf-password-toggle {
  color: var(--ink-soft) !important;
}
.kfg .kfg-reg-card .cf-btn, .kfg .kfg-reg-card button[type=submit], .kfg .kfg-reg-card input[type=submit],
.kfg.kfg-contact .cf-btn,
.kfg.kfg-contact button[type=submit],
.kfg.kfg-contact input[type=submit] {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer;
}
.kfg .kfg-reg-card .cf-btn:hover,
.kfg.kfg-contact .cf-btn:hover {
  filter: brightness(1.06);
}
.kfg .kfg-reg-card .cf-response, .kfg .kfg-reg-card .cf-message,
.kfg.kfg-contact .cf-response,
.kfg.kfg-contact .cf-message {
  font-family: var(--mono);
  font-size: 13px;
}

/* Login-aware nav: kfg.js adds .kfg-authed to the root when the session is logged
   in. Default (guest) hides the user-only links; authed hides the guest-only ones.
   Driving it via :not()/.kfg-authed (not an inline display toggle) lets the shown
   links fall back to their natural .link display instead of getting stuck at none. */
.kfg:not(.kfg-authed) [data-auth=user] {
  display: none;
}

.kfg.kfg-authed [data-auth=guest] {
  display: none;
}

/* Home login modal — narrower than the catalog modal, KFG-styled fields. */
.kfg .modal.kfg-login-modal {
  max-width: 440px;
}

.kfg .kfg-login-modal input:not([type=submit]) {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 14px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
}

.kfg .kfg-login-modal input:focus {
  border-color: var(--coral);
  outline: none;
}

.kfg .kfg-login-modal input::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}

/* Hero collage cards are clickable — a focus-visible ring that overflow:hidden on
   the .placeholder can't clip (negative offset draws it inside the box). */
.kfg [data-kfg=hero-card]:focus {
  outline: none;
}

/* =============================================================================
   com_kfggrinde SUB-PAGES — partner dashboard (view=dashboard) + Grinde form
   (view=grindeform), themed to the KFG «Konfetti» look. Scoped to
   body.com_kfggrinde, mirroring the body.com_solidres approach above, so it
   only affects the component's own pages (which keep the restyled Helix chrome
   — see the :not(.com_kfggrinde) exclusion on the one-pager rule up top).

   The views wrap their markup in .kfg, which supplies the design-system tokens
   and classes (.display, .mono, .kicker, .btn, .input …); this block adds the
   page canvas, the Joomla-rendered form chrome, and the kfg-dash-* / kfg-gform-*
   layout system used by the component templates. Placed at the END of the file
   so ties against the generic .kfg rules resolve in its favour.
   ============================================================================= */
body.com_kfggrinde {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --mint: #1f9d6f;
  --cobalt: #2a4ed8;
  --berry: #c1106d;
  --lilac: #9a73e8;
  --serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  /* Headlines → Instrument Serif (covers Joomla-rendered headings without .display) */
  /* Joomla system messages → quiet cards */
  /* Joomla-rendered labels + fields (grindeform XML output) → KFG look.
     Fields that already carry the design-system classes are excluded so
     .input/.textarea stay authoritative. */
  /* Selects (Zustand / Kachel-Farbe / Publizieren): match the .input fields and
     add a KFG chevron. These carry Bootstrap's .form-select (own height + chevron)
     and the design-system .input (a `background` shorthand that would wipe the
     chevron), so force the KFG look with !important + explicit height. */
  /* File input (Grinde photo): the native control → a KFG field with a pill
     "Datei auswählen" button. */
  /* Bootstrap-classed buttons (Joomla core output) → pills like .kfg .btn */
  /* ---------------------------------------------------------------------
   * Dashboard layout (kfg-dash-*) — view=dashboard
   * ------------------------------------------------------------------- */
  /* Request + handover lists: one readable column. Meine-Grinde: a card grid. */
  /* All dashboard cards carry .card from the design system, which is built for
     the clickable catalog tiles (cursor:pointer, hover-rotate, overflow:hidden,
     NO padding — the latter clipped the date at the card edge). Reset that here:
     these are static content cards with their own padding + coral accent spine. */
  /* photo bleeds to the edges */
  /* Meine-Grinde card: photo / colour placeholder, then a padded body. */
  /* ---------------------------------------------------------------------
   * Grinde form layout (kfg-gform-*) — view=grindeform
   * ------------------------------------------------------------------- */
  /* Gallery management: existing photos as square thumbnails with a delete button. */
  /* Inline "add Sperrdatum" row: fields side by side, button at the end. */
  /* Sperrdaten + Ausleih-Historie tables → hairline style (mono headers,
     row separators, no boxes). Scoped to the component's own tables. */
}
body.com_kfggrinde h1, body.com_kfggrinde h2, body.com_kfggrinde h3, body.com_kfggrinde h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.com_kfggrinde h1 {
  font-size: clamp(40px, 5vw, 68px);
  margin-bottom: 10px;
}
body.com_kfggrinde #sp-component {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 16px 56px;
}
body.com_kfggrinde #system-message-container .alert {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
body.com_kfggrinde label, body.com_kfggrinde .control-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--ink-soft);
}
body.com_kfggrinde .form-control:not(.input):not(.textarea),
body.com_kfggrinde input:not([type=checkbox]):not([type=radio]):not([type=submit]):not(.input),
body.com_kfggrinde select,
body.com_kfggrinde textarea:not(.textarea) {
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 14px;
}
body.com_kfggrinde .form-control:not(.input):not(.textarea):focus,
body.com_kfggrinde input:not([type=checkbox]):not([type=radio]):not([type=submit]):not(.input):focus,
body.com_kfggrinde select:focus,
body.com_kfggrinde textarea:not(.textarea):focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
body.com_kfggrinde select,
body.com_kfggrinde select.form-select,
body.com_kfggrinde select.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.3;
  font: inherit;
  padding: 14px 44px 14px 16px !important;
  background-color: var(--paper) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7l6-5.5' stroke='%235a4a3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 9px !important;
}
body.com_kfggrinde input[type=file] {
  width: 100%;
  padding: 10px 14px !important;
  font: inherit;
  color: var(--ink-soft);
}
body.com_kfggrinde input[type=file]::file-selector-button {
  font-family: var(--sans);
  font-weight: 500;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body.com_kfggrinde input[type=file]::file-selector-button:hover {
  background: var(--ink);
  color: var(--bg);
}
body.com_kfggrinde .btn {
  border-radius: 999px !important;
  font-family: var(--sans);
  font-weight: 500;
}
body.com_kfggrinde .btn-primary {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
}
body.com_kfggrinde .btn-primary:hover {
  background: #d63a26 !important;
  border-color: #d63a26 !important;
}
body.com_kfggrinde .btn-secondary, body.com_kfggrinde .btn-outline-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
}
body.com_kfggrinde .btn-secondary:hover, body.com_kfggrinde .btn-outline-secondary:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
body.com_kfggrinde a:not(.btn) {
  color: var(--coral);
}
body.com_kfggrinde .kfg-dash-head {
  margin-bottom: 40px;
}
body.com_kfggrinde .kfg-dash-section {
  position: relative;
  padding: 0; /* beats .kfg section{padding:96px 0} (<section> element) */
  margin: 0 0 44px;
}
body.com_kfggrinde .kfg-dash-title {
  margin: 0 0 18px;
}
body.com_kfggrinde .kfg-dash-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
body.com_kfggrinde .kfg-dash-title-row .kfg-dash-title {
  margin: 0;
}
body.com_kfggrinde .kfg-dash-cards {
  display: grid;
  gap: 16px;
}
body.com_kfggrinde .kfg-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
body.com_kfggrinde .kfg-dash-request,
body.com_kfggrinde .kfg-dash-handover,
body.com_kfggrinde .kfg-dash-grinde-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: 18px;
  padding: 20px 22px;
  cursor: default;
  overflow: visible;
  transform-origin: initial;
}
body.com_kfggrinde .kfg-dash-request:hover,
body.com_kfggrinde .kfg-dash-handover:hover,
body.com_kfggrinde .kfg-dash-grinde-card:hover {
  transform: none;
  box-shadow: none;
}
body.com_kfggrinde .kfg-dash-request h3,
body.com_kfggrinde .kfg-dash-handover h3,
body.com_kfggrinde .kfg-dash-grinde-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0;
}
body.com_kfggrinde .kfg-dash-request .mono,
body.com_kfggrinde .kfg-dash-handover .mono,
body.com_kfggrinde .kfg-dash-grinde-card .mono {
  color: var(--ink-soft);
}
body.com_kfggrinde .kfg-dash-grinde-card {
  padding: 0;
  overflow: hidden;
}
body.com_kfggrinde .kfg-dash-requester {
  font-size: 14px;
  color: var(--ink-soft);
}
body.com_kfggrinde .kfg-dash-message {
  font-size: 15px;
  color: var(--ink);
}
body.com_kfggrinde .kfg-dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
body.com_kfggrinde .kfg-dash-actions form {
  margin: 0;
}
body.com_kfggrinde .kfg-dash-photo,
body.com_kfggrinde .kfg-dash-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
body.com_kfggrinde .kfg-dash-ph {
  background: var(--coral); /* default; per-accent below */
}
body.com_kfggrinde .kfg-dash-ph[data-color=coral] {
  background: var(--coral);
}
body.com_kfggrinde .kfg-dash-ph[data-color=mustard] {
  background: var(--mustard);
}
body.com_kfggrinde .kfg-dash-ph[data-color=mint] {
  background: var(--mint);
}
body.com_kfggrinde .kfg-dash-ph[data-color=cobalt] {
  background: var(--cobalt);
}
body.com_kfggrinde .kfg-dash-ph[data-color=berry] {
  background: var(--berry);
}
body.com_kfggrinde .kfg-dash-ph[data-color=lilac] {
  background: var(--lilac);
}
body.com_kfggrinde .kfg-dash-grinde-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}
body.com_kfggrinde .kfg-dash-grinde-body h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0;
}
body.com_kfggrinde .kfg-dash-grinde-body .mono {
  color: var(--ink-soft);
}
body.com_kfggrinde .kfg-dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
body.com_kfggrinde .kfg-dash-badge {
  background: rgba(241, 182, 42, 0.22);
  border-color: rgba(241, 182, 42, 0.55);
  color: #8a6410;
}
body.com_kfggrinde .kfg-dash-hints {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
body.com_kfggrinde .kfg-dash-hints li {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 2px 0;
}
body.com_kfggrinde .kfg-dash-edit {
  margin-top: 6px;
  align-self: flex-start;
}
body.com_kfggrinde .kfg-dash-empty,
body.com_kfggrinde .kfg-gform-empty {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 26px 20px;
  border: 1px dashed rgba(26, 20, 16, 0.28);
  border-radius: 16px;
}
body.com_kfggrinde .kfg-gform-head {
  margin-bottom: 32px;
}
body.com_kfggrinde .kfg-gform-form {
  max-width: 720px;
  display: grid;
  gap: 16px;
}
body.com_kfggrinde .kfg-gform-field {
  display: grid;
  gap: 6px;
}
body.com_kfggrinde .kfg-gform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 640px) {
  body.com_kfggrinde .kfg-gform-row {
    grid-template-columns: 1fr;
  }
}
body.com_kfggrinde .kfg-gform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}
body.com_kfggrinde .kfg-gform-preview {
  margin: 0 0 8px;
}
body.com_kfggrinde .kfg-gform-preview img {
  max-width: 220px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}
body.com_kfggrinde .kfg-gform-preview figcaption {
  color: var(--ink-soft);
  margin-top: 6px;
}
body.com_kfggrinde .kfg-gform-hint {
  color: var(--ink-soft);
  font-size: 12px;
  margin: 6px 0 0;
}
body.com_kfggrinde .kfg-gform-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}
body.com_kfggrinde .kfg-gform-photo {
  width: 150px;
  margin: 0;
}
body.com_kfggrinde .kfg-gform-photo img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}
body.com_kfggrinde .kfg-gform-photo form {
  margin-top: 8px;
  text-align: center;
}
body.com_kfggrinde .kfg-gform-section {
  margin-top: 48px;
  padding-top: 8px;
}
body.com_kfggrinde .kfg-gform-title {
  margin: 0 0 6px;
}
body.com_kfggrinde .kfg-gform-tablewrap {
  overflow-x: auto;
  margin-top: 16px;
}
body.com_kfggrinde .kfg-gform-loan-actions form {
  display: inline-block;
  margin: 0 6px 0 0;
}
body.com_kfggrinde .kfg-gform-mini {
  padding: 7px 14px !important;
  font-size: 13px;
}
body.com_kfggrinde .kfg-gform-blockadd {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
}
body.com_kfggrinde .kfg-gform-blockadd .kfg-gform-field {
  flex: 1 1 160px;
}
body.com_kfggrinde .kfg-gform-blockadd .btn {
  flex: 0 0 auto;
}
body.com_kfggrinde .kfg-gform-danger {
  margin-top: 40px;
}
body.com_kfggrinde .kfg-gform-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 15px;
}
body.com_kfggrinde .kfg-gform-table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 12px 16px 10px 0;
  border-bottom: 1px solid var(--line);
}
body.com_kfggrinde .kfg-gform-table td {
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
body.com_kfggrinde .kfg-gform-table thead + tbody tr:first-child td {
  border-top: 0;
}
body.com_kfggrinde .kfg-gform-table th:last-child, body.com_kfggrinde .kfg-gform-table td:last-child {
  padding-right: 0;
}

.kfg [data-kfg=hero-card]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}

/* =============================================================================
   com_kfghistory — History (view=events) + Fotogalerie (view=event), themed to
   the KFG «Konfetti» look. Scoped to body.com_kfghistory, mirroring
   body.com_kfggrinde above: the views wrap their markup in .kfg (design-system
   tokens + classes), and this block adds the page canvas + the kfg-hist-* /
   kfg-gallery-* / kfg-lightbox-* layout used by the component templates and the
   kfg.js lightbox. Placed at the END of the file so ties against the generic
   .kfg rules resolve in its favour. (The one-pager chrome-hider up top excludes
   this body class via :not(.com_kfghistory), so these sub-pages keep the Helix
   header/footer — restyled to «Konfetti» by the site-wide #sp-header rules.)
   ============================================================================= */
body.com_kfghistory {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --mint: #1f9d6f;
  --cobalt: #2a4ed8;
  --berry: #c1106d;
  --lilac: #9a73e8;
  --serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  /* Headlines → Instrument Serif (covers Joomla-rendered headings without .display) */
  /* Joomla system messages → quiet cards */
  /* Bootstrap-classed buttons (Joomla core output) → pills like .kfg .btn */
  /* ---------------------------------------------------------------------
   * History list (kfg-hist-*) — view=events
   * ------------------------------------------------------------------- */
  /* Event card — a paper tile linking to the Fotogalerie. Hover-lift like the
     design-system .card (translateY + shadow) but WITHOUT the playful rotate;
     the whole card is an <a>, so the pointer cursor comes naturally. */
  /* Card cover: a photo (kfg-hist-cover img) or an accent-colour placeholder
     (kfg-hist-ph[data-color]), both a 4/3 band bleeding to the card edges. The
     palette mapping mirrors .kfg-dash-ph in body.com_kfggrinde. */
  /* List empty state (shares the dashed-card look with the gallery). */
  /* ---------------------------------------------------------------------
   * Single event (kfg-hist-single) + Fotogalerie (kfg-gallery) — view=event
   * ------------------------------------------------------------------- */
  /* Single-event head: the year as a mono accent above the big company h1
     (.display, styled by the h1 rule above), then the laudatio. */
  /* ---------------------------------------------------------------------
   * Lightbox — built by kfg.js setupGallery() in the body-level
   * .kfg.kfg-modal-host, reusing the design-system .modal-backdrop (fixed,
   * dimmed, blurred, z-index 1060, fade-in). Here we re-center the stage and
   * add the big image, caption + circular prev/next/close controls.
   * ------------------------------------------------------------------- */
  /* Circular controls floating over the dimmed backdrop. */
}
body.com_kfghistory h1, body.com_kfghistory h2, body.com_kfghistory h3, body.com_kfghistory h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.com_kfghistory h1 {
  font-size: clamp(40px, 5vw, 68px);
  margin-bottom: 10px;
}
body.com_kfghistory #sp-component {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 16px 56px;
}
body.com_kfghistory #system-message-container .alert {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
body.com_kfghistory .btn {
  border-radius: 999px !important;
  font-family: var(--sans);
  font-weight: 500;
}
body.com_kfghistory .btn-primary {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
}
body.com_kfghistory .btn-primary:hover {
  background: #d63a26 !important;
  border-color: #d63a26 !important;
}
body.com_kfghistory .btn-secondary, body.com_kfghistory .btn-outline-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
}
body.com_kfghistory .btn-secondary:hover, body.com_kfghistory .btn-outline-secondary:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
body.com_kfghistory a:not(.btn) {
  color: var(--coral);
}
body.com_kfghistory .kfg-hist-head {
  margin-bottom: 40px;
}
body.com_kfghistory .kfg-hist-intro {
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 18px;
}
body.com_kfghistory .kfg-hist-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
body.com_kfghistory .kfg-hist-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.com_kfghistory .kfg-hist-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -20px rgba(26, 20, 16, 0.25);
}
body.com_kfghistory .kfg-hist-card:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
body.com_kfghistory .kfg-hist-cover,
body.com_kfghistory .kfg-hist-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
}
body.com_kfghistory .kfg-hist-cover {
  position: relative;
  overflow: hidden;
}
body.com_kfghistory .kfg-hist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.com_kfghistory .kfg-hist-ph {
  background: var(--coral); /* default; per-accent below */
}
body.com_kfghistory .kfg-hist-ph[data-color=coral] {
  background: var(--coral);
}
body.com_kfghistory .kfg-hist-ph[data-color=mustard] {
  background: var(--mustard);
}
body.com_kfghistory .kfg-hist-ph[data-color=mint] {
  background: var(--mint);
}
body.com_kfghistory .kfg-hist-ph[data-color=cobalt] {
  background: var(--cobalt);
}
body.com_kfghistory .kfg-hist-ph[data-color=berry] {
  background: var(--berry);
}
body.com_kfghistory .kfg-hist-ph[data-color=lilac] {
  background: var(--lilac);
}
body.com_kfghistory .kfg-hist-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 22px;
}
body.com_kfghistory .kfg-hist-year {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 0.95;
  color: var(--ink);
}
body.com_kfghistory .kfg-hist-firma {
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
body.com_kfghistory .kfg-hist-excerpt {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  /* clamp the teaser to a few lines on the card */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.com_kfghistory .kfg-hist-empty {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 26px 20px;
  border: 1px dashed rgba(26, 20, 16, 0.28);
  border-radius: 16px;
}
body.com_kfghistory .kfg-hist-single-head {
  margin-bottom: 36px;
}
body.com_kfghistory .kfg-hist-single-head .kfg-hist-year {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 8px;
}
body.com_kfghistory .kfg-hist-single-head .display {
  font-size: clamp(40px, 6vw, 80px);
}
body.com_kfghistory .kfg-hist-laudatio {
  max-width: 680px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
  margin-top: 14px;
}
body.com_kfghistory .kfg-hist-back {
  display: inline-block;
  margin-bottom: 28px;
}
body.com_kfghistory .kfg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
body.com_kfghistory .kfg-gallery-empty {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 26px 20px;
  border: 1px dashed rgba(26, 20, 16, 0.28);
  border-radius: 16px;
}
body.com_kfghistory .kfg-gallery-item {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
}
body.com_kfghistory .kfg-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.3s ease;
}
body.com_kfghistory .kfg-gallery-item:hover img {
  transform: scale(1.06);
}
body.com_kfghistory .kfg-gallery-item:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
body.com_kfghistory .kfg-lightbox.modal-backdrop {
  align-items: center;
  padding: 24px;
}
body.com_kfghistory .kfg-lightbox-figure {
  margin: 0;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: pop-in 0.25s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
body.com_kfghistory .kfg-lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  background: var(--paper);
}
body.com_kfghistory .kfg-lightbox-caption {
  max-width: 90vw;
  text-align: center;
  color: var(--bg);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
body.com_kfghistory .kfg-lightbox-close,
body.com_kfghistory .kfg-lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 247, 234, 0.92);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background 0.15s ease;
}
body.com_kfghistory .kfg-lightbox-close:hover,
body.com_kfghistory .kfg-lightbox-nav:hover {
  background: var(--paper);
  transform: scale(1.06);
}
body.com_kfghistory .kfg-lightbox-close:focus-visible,
body.com_kfghistory .kfg-lightbox-nav:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 2px;
}
body.com_kfghistory .kfg-lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 22px;
}
body.com_kfghistory .kfg-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 30px;
}
body.com_kfghistory .kfg-lightbox-nav:hover {
  transform: translateY(-50%) scale(1.06);
}
body.com_kfghistory .kfg-lightbox-prev {
  left: 20px;
}
body.com_kfghistory .kfg-lightbox-next {
  right: 20px;
}
@media (max-width: 640px) {
  body.com_kfghistory .kfg-lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  body.com_kfghistory .kfg-lightbox-prev {
    left: 10px;
  }
  body.com_kfghistory .kfg-lightbox-next {
    right: 10px;
  }
  body.com_kfghistory .kfg-lightbox-close {
    top: 12px;
    right: 12px;
  }
}

/* =============================================================================
   com_kfgsitzung — QR-Check-in (view=checkin), themed to the KFG «Konfetti»
   look. Scoped to body.com_kfgsitzung, mirroring body.com_kfghistory above: the
   checkin view wraps its markup in .kfg (design-system tokens + classes), and
   this block adds the page canvas + the kfg-checkin-* layout for the single
   focused attendance card (kfg.js setupCheckin() drives the 2-step flow). It's
   NARROWER than the other sub-pages (max-width ~640px, centered) since check-in
   is one card. Placed at the END of the file so ties against the generic .kfg
   rules resolve in its favour. (The one-pager chrome-hider up top excludes this
   body class via :not(.com_kfgsitzung), so the check-in page keeps the Helix
   header/footer — restyled to «Konfetti» by the site-wide #sp-header rules.)
   ============================================================================= */
body.com_kfgsitzung {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --mint: #1f9d6f;
  --cobalt: #2a4ed8;
  --berry: #c1106d;
  --lilac: #9a73e8;
  --serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  /* Headlines → Instrument Serif (covers Joomla-rendered headings without .display) */
  /* Single focused card → a narrow, centered component column. */
  /* Joomla system messages → quiet cards */
  /* Bootstrap-classed buttons (Joomla core output) → pills like .kfg .btn */
  /* ---------------------------------------------------------------------
   * Check-in card (kfg-checkin-*) — view=checkin
   * ------------------------------------------------------------------- */
  /* Mitmachen details: hidden until the endpoint reports need_details; kfg.js
     adds .is-open to reveal them (display:none default per spec). */
  /* Vorname / Name side by side, stacking on the narrowest phones. */
  /* Gentle hint kfg.js injects into the details block when a new visitor is asked
     for their Mitmachen data — a calm mint note, NOT the coral error tone. */
  /* Inline error box (kfg.js showLoginError) — the coral error tone. Hidden until
     JS sets display:block; the template may also carry inline display:none. */
  /* Success panel — swapped into [data-kfg="checkin-area"] after a check-in
     succeeds; green like the ConvertForms success + .kfg-request-success. */
}
body.com_kfgsitzung h1, body.com_kfgsitzung h2, body.com_kfgsitzung h3, body.com_kfgsitzung h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.com_kfgsitzung h1 {
  font-size: clamp(40px, 5vw, 68px);
  margin-bottom: 10px;
}
body.com_kfgsitzung #sp-component {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 56px;
}
body.com_kfgsitzung #system-message-container .alert {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
body.com_kfgsitzung .btn {
  border-radius: 999px !important;
  font-family: var(--sans);
  font-weight: 500;
}
body.com_kfgsitzung a:not(.btn) {
  color: var(--coral);
}
body.com_kfgsitzung .kfg-checkin {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 34px 34px;
  box-shadow: 0 24px 60px -34px rgba(26, 20, 16, 0.28);
}
body.com_kfgsitzung .kfg-checkin-head {
  margin-bottom: 24px;
}
body.com_kfgsitzung .kfg-checkin-head .display,
body.com_kfgsitzung .kfg-checkin-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.02;
  margin-bottom: 8px;
  color: var(--ink);
}
body.com_kfgsitzung .kfg-checkin-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}
body.com_kfgsitzung .kfg-checkin-form {
  display: grid;
  gap: 14px;
  /* 16px keeps iOS Safari from auto-zooming the inputs on focus. */
}
body.com_kfgsitzung .kfg-checkin-form .label {
  margin-bottom: 4px;
}
body.com_kfgsitzung .kfg-checkin-form .input {
  width: 100%;
  font-size: 16px;
}
body.com_kfgsitzung .kfg-checkin-form .btn {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
body.com_kfgsitzung .kfg-checkin-details {
  display: none;
}
body.com_kfgsitzung .kfg-checkin-details.is-open {
  display: grid;
  gap: 14px;
}
body.com_kfgsitzung .kfg-checkin-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  body.com_kfgsitzung .kfg-checkin-names {
    grid-template-columns: 1fr;
  }
}
body.com_kfgsitzung .kfg-checkin-hint {
  background: rgba(31, 157, 111, 0.1);
  color: #17795a;
  border: 1px solid rgba(31, 157, 111, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
body.com_kfgsitzung .kfg-checkin-error {
  display: none;
  background: rgba(238, 77, 58, 0.1);
  color: var(--coral);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
}
body.com_kfgsitzung .kfg-checkin-success {
  text-align: center;
  padding: 8px 0 6px;
}
body.com_kfgsitzung .kfg-checkin-success .kfg-checkin-success-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(31, 157, 111, 0.12);
  color: var(--mint);
  border: 1px solid rgba(31, 157, 111, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 16px;
}
body.com_kfgsitzung .kfg-checkin-success .display {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.02;
  margin-bottom: 10px;
  color: var(--ink);
}
body.com_kfgsitzung .kfg-checkin-success p {
  color: var(--ink-soft);
}
body.com_kfgsitzung .kfg-checkin-success .kfg-checkin-success-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 12px;
}

/* -------------------------------------------------------------------------------
   com_users — slimmed-down frontend profile (Issue #6), themed to the KFG
   «Konfetti» look. Scoped to body.com_users, mirroring body.com_kfgsitzung: the
   profile/edit sub-pages wrap their output in .kfg but keep the Helix chrome (see
   the :not(.com_users) exclusion on the one-pager rule up top). plg_system_kfgprofile
   strips the confusing field groups; the Helix override renders just the KFG card.
   -------------------------------------------------------------------------------- */
body.com_users {
  --bg: #fff7ea;
  --bg-soft: #fdeed2;
  --ink: #1a1410;
  --ink-soft: #5a4a3e;
  --paper: #ffffff;
  --line: rgba(26, 20, 16, 0.12);
  --coral: #ee4d3a;
  --mustard: #f1b62a;
  --mint: #1f9d6f;
  --serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* A narrow, centered column for the single form card. */
  /* Read-only view (default.php): header row + definition list. */
  /* Joomla's field help text / validation hints → quiet mono lines. */
}
body.com_users #sp-component {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 56px;
}
body.com_users #system-message-container .alert {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
body.com_users .btn {
  border-radius: 999px !important;
  font-family: var(--sans);
  font-weight: 500;
}
body.com_users .kfg-profile-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 34px 34px;
  box-shadow: 0 24px 60px -34px rgba(26, 20, 16, 0.28);
}
body.com_users .kfg-profile .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.02;
  margin: 6px 0 8px;
  color: var(--ink);
}
body.com_users .kfg-profile .display em {
  font-style: italic;
  color: var(--coral);
}
body.com_users .kfg-profile-lead {
  color: var(--ink-soft);
  margin-bottom: 26px;
}
body.com_users .kfg-profile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
body.com_users .kfg-profile-head .display {
  margin: 6px 0 0;
}
body.com_users .kfg-profile-head .btn {
  flex-shrink: 0;
}
body.com_users .kfg-profile-list {
  margin: 0;
  display: grid;
}
body.com_users .kfg-profile-list > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 520px) {
  body.com_users .kfg-profile-list > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
body.com_users .kfg-profile-list dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
body.com_users .kfg-profile-list dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  word-break: break-word;
}
body.com_users .kfg-profile-form {
  display: grid;
  gap: 18px;
}
body.com_users .kfg-field {
  display: grid;
  gap: 4px;
  /* 16px keeps iOS Safari from auto-zooming inputs on focus. */
}
body.com_users .kfg-field .label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
body.com_users .kfg-field .input,
body.com_users .kfg-field input[type=text],
body.com_users .kfg-field input[type=email],
body.com_users .kfg-field input[type=tel],
body.com_users .kfg-field input[type=password] {
  width: 100%;
  font-size: 16px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
body.com_users .kfg-field .input:focus,
body.com_users .kfg-field input[type=text]:focus,
body.com_users .kfg-field input[type=email]:focus,
body.com_users .kfg-field input[type=tel]:focus,
body.com_users .kfg-field input[type=password]:focus {
  outline: none;
  border-color: var(--coral);
  background: var(--paper);
}
body.com_users .kfg-profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 520px) {
  body.com_users .kfg-profile-row {
    grid-template-columns: 1fr;
  }
}
body.com_users .kfg-profile-readonly {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}
body.com_users .kfg-profile-readonly .mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}
body.com_users .kfg-profile-pw {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 20px;
  margin: 4px 0 0;
  /* Joomla wraps the password input + reveal button in .input-group, with the
     strength <meter> + rules hint below. Overlay the toggle inside the field
     and quiet the meter/rules (the stock toggle is a jarring black pill). */
  /* Password strength meter → a thin KFG bar. */
  /* Keep both password inputs on the SAME line. The min-length rules hint only
     exists for the first field and sits between its label and input, pushing
     that input down. Lay each field out as a flex column and order the hint
     BELOW the input (the meter lives inside .password-group, so it follows). */
  /* "Mindestanforderung …" rules hint → quiet mono, moved below the input. */
}
body.com_users .kfg-profile-pw legend {
  float: none;
  width: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 8px;
  margin: 0;
  border: 0;
}
body.com_users .kfg-profile-pw .input-group {
  position: relative;
  display: block;
}
body.com_users .kfg-profile-pw .input-group input {
  width: 100% !important;
  border-radius: 12px !important;
  padding-right: 48px !important;
}
body.com_users .kfg-profile-pw .input-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink-soft) !important;
  padding: 0 14px !important;
  min-width: 0 !important;
}
body.com_users .kfg-profile-pw .input-password-toggle:hover {
  color: var(--coral) !important;
  background: transparent !important;
}
body.com_users .kfg-profile-pw meter {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin-top: 10px;
  border: none;
  border-radius: 999px;
  background: var(--line);
}
body.com_users .kfg-profile-pw meter::-webkit-meter-bar {
  background: var(--line);
  border: none;
  border-radius: 999px;
}
body.com_users .kfg-profile-pw meter::-webkit-meter-optimum-value {
  background: var(--mint);
  border-radius: 999px;
}
body.com_users .kfg-profile-pw meter::-webkit-meter-suboptimum-value {
  background: var(--mustard);
  border-radius: 999px;
}
body.com_users .kfg-profile-pw meter::-webkit-meter-even-less-good-value {
  background: var(--coral);
  border-radius: 999px;
}
body.com_users .kfg-profile-pw meter::-moz-meter-bar {
  background: var(--mint);
  border-radius: 999px;
}
body.com_users .kfg-profile-pw .kfg-field {
  display: flex;
  flex-direction: column;
}
body.com_users .kfg-profile-pw .kfg-field > label {
  order: 1;
}
body.com_users .kfg-profile-pw .kfg-field > .password-group {
  order: 2;
}
body.com_users .kfg-profile-pw [id$=-rules], body.com_users .kfg-profile-pw .password-rules, body.com_users .kfg-profile-pw .small.text-muted {
  order: 3;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 10px;
  display: block;
}
body.com_users .kfg-profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
body.com_users .kfg-profile-form .form-text,
body.com_users .kfg-profile-form .field-tip {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------------
   SPPB native-addon layout helpers. The Über stat cards and the footer used to be
   single raw-HTML blocks; they are now native text_block addons. A raw-HTML block
   was one wrapper we could grid/flex directly — native addons each render in their
   own .sppb-addon-wrapper, so the layout lives on the COLUMN class instead.
   -------------------------------------------------------------------------------- */
.kfg-stats-col .sppb-column-addons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kfg-stats-col .sppb-addon-wrapper {
  margin-bottom: 0;
}

.kfg-footer-col .sppb-column-addons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.kfg-footer-col .sppb-addon-wrapper {
  margin-bottom: 0;
}

/* Helix top bar (contact/info strip) removed on every page. The one-pager hid it
   via the chrome-hider; the sub-pages kept it. contactinfo=0 empties it but Helix
   still renders the (now blank) strip, so hide the container outright. */
#sp-top-bar {
  display: none !important;
}

/* Sub-page top nav: make the Helix header match the one-pager nav's look (the
   home page hides #sp-header entirely, so these rules only touch sub-pages). The
   one-pager nav has no search box and its burger is mobile-only — so drop the
   Helix search field everywhere and the redundant desktop off-canvas hamburger. */
#sp-header .mod-finder,
#sp-header .js-finder-searchform,
#sp-header .form-search {
  display: none !important;
}

@media (min-width: 992px) {
  #sp-header .offcanvas-toggler,
  #sp-header .offcanvas-toggler-secondary,
  #sp-header .burger-icon {
    display: none !important;
  }
}