/*
	Theme Name: Hozjan-Theme
	Theme URI: https://www.hozjan.net/
	Description: Willkommen zum Hozjan-Theme – die perfekte Grundlage für dein Webprojekt! Entwickelt und bereitgestellt von Hozjan Artwork, bietet dieses Theme eine Auswahl an durchdachten Features, die deine Arbeit mit Wordpress noch effizienter und kreativer machen.
	Author: Benny Hozjan
	Author URI: https://www.hozjan.net/
	Template: Divi
	Version: 1.0.0-hkc.1
	Tags: Ready-to-go Child Theme, Hozjan Artwork
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html

	Projekt: Hunde & Katzencenter Steffisburg (hunde-katzencenter.ch)
	Schriften: fonts-config.php → --ff-title BigShoulders · --ff-body / --ff-btn Archivo (+ Archivo Italic)

	INHALT
	01  Basic
	02  :root – Farben, Schrift, Abstände, Radien
	03  Grundlayout & Sektions-Farbwelten (hkc-sec-*)
	04  Header / Topbar / Menü (bh_header, hkc-topbar, menu-cta)
	05  Mobile-Menü
	06  Typografie (H1–H5, label, hz-zusatz, lead, statement, meta, quote, display, compact)
	07  Buttons & Links (btn-dark, btn-secondary, hz-more, hz-textlink)
	08  Listen & Blöcke (hz-steps, hz-checklist, hz-facts, hz-contact, hz-quote-card, hz-status, hkc-pills, hkc-faq, hkc-dates)
	09  Bilder (hz-zoom, hkc-arch, hkc-circle, hkc-polaroid, hkc-map, hkc-gallery-grid, hkc-imageband)
	10  Karten (hkc-card, hz-post-card)
	11  Startseite-Elemente (hkc-hero, hkc-breadcrumb, hkc-ticker, hkc-parcours-line, hkc-bib, hkc-brands, hkc-insta)
	12  Occasion-Boxen (occ-liste, occ-item)
	13  Formulare (hz-form, hz-gform, hz-consent)
	14  Akkordeon & Galerie (Divi)
	15  Footer (hkc-footer, bh_footer)
	16  Responsive
	17  Reduced Motion
*/

/*	01 BASIC CSS
============================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

a[href^="#"] {
  cursor: pointer!important;
}

.mce-panel .mce-stack-layout-item.mce-first {
  position: sticky!important;
  top: 0;
}

@property --fluid {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}


/*	02 :ROOT
============================================================================== */
:root {
/*	FLUID-FAKTOR: 0 bei 375px → 1 bei 1440px Viewport
	(tan(atan2()) = Division von Längen → reine Zahl; läuft in allen aktuellen Browsern) */
  --fluid: clamp(0, tan(atan2(100vw - 37.5rem, 106.5rem)), 1);

/*	GLOBAL COLORS (Namen wie Hozjan-Theme 1.0.0)
============================================================================== */
  --primaryColor:   #FFCF26; /* Sonnengelb */
  --secondaryColor: #F8EFDF; /* Creme – Seitenhintergrund */
  --headingColor:   #2A1C12; /* Espresso */
  --bodyColor:      #4A3A2C; /* Textbraun */
  --darkColor:      #2A1C12; /* Espresso */
  --lightColor:     #F8EFDF; /* Creme */
  --white:          #ffffff;
  --black:          #000000;

/*	PROJEKTFARBEN Hunde & Katzencenter
============================================================================== */
  --greyColor:      #5C4A3A; /* Mittelbraun – Labels, Nebentext */
  --sandColor:      #C9B698; /* Sand – feine Linien */
  --sandLight:      #D2C3AC; /* Hellsand – Text auf Espresso (klein) */
  --mutedColor:     #E6D8C2; /* Creme hell – Fliesstext auf Espresso */
  --greenColor:     #2F4A32; /* Waldgrün – nur Katzenbereich */
  --ochreColor:     #9A6F09; /* Ocker – Nummern, nur ≥ 24px */
  --todayColor:     #FFF6D6; /* Hellgelb – «heute» */
  --statusOpen:     #7BD88F;
  --statusClosed:   #FF8A5C;

/*	TRANSITIONS
============================================================================== */
  --tra-3s: all .3s ease-in-out;
  --tra-5s: all .5s ease-in-out;
  --tra-7s: all .7s ease-in-out;

/*	FONT SIZES
	Big Shoulders ist schmal → Titel deutlich grösser als im Standard-Theme
============================================================================== */
  --fs-body:  calc(1.6rem + 0.2rem * var(--fluid)); /* 16px → 18px */

  --fs-small: calc(1.2rem + 0.2rem * var(--fluid)); /* 12px → 14px */
  --fs-label: calc(1.3rem + 0.2rem * var(--fluid)); /* 13px → 15px */
  --fs-btn:   calc(1.6rem + 0.2rem * var(--fluid)); /* 16px → 18px */
  --fs-lead:  calc(1.8rem + 0.4rem * var(--fluid)); /* 18px → 22px */
  --fs-quote: calc(1.8rem + 0.4rem * var(--fluid)); /* 18px → 22px */
  --fs-statement: calc(2.4rem + 1.6rem * var(--fluid)); /* 24px → 40px */

  --fs-h5:    calc(1.8rem + 0.4rem * var(--fluid)); /* 18px → 22px  (Archivo) */
  --fs-h4:    calc(2.0rem + 0.6rem * var(--fluid)); /* 20px → 26px  (Archivo, z.B. Schritte) */
  --fs-h3:    calc(3.2rem + 2.4rem * var(--fluid)); /* 32px → 56px  (Display) */
  --fs-h2:    calc(4.4rem + 4.4rem * var(--fluid)); /* 44px → 88px  */
  --fs-h2-compact: calc(3.6rem + 3.6rem * var(--fluid)); /* 36px → 72px */
  --fs-h1:    calc(5.6rem + 8.0rem * var(--fluid)); /* 56px → 136px */
  --fs-h1-xl: calc(6.4rem + 9.6rem * var(--fluid)); /* 64px → 160px  (Startseite) */
  --fs-num:   calc(4.0rem + 2.4rem * var(--fluid)); /* 40px → 64px  Ocker-Nummern */

/*	FONT WEIGHTS
============================================================================== */
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

/*	LINE HEIGHTS
============================================================================== */
  --lh-body:  1.55;
  --lh-lead:  1.50;
  --lh-small: 1.30;

  --lh-h1:    0.86;
  --lh-h2:    0.90;
  --lh-h3:    0.95;
  --lh-h4:    1.25;
  --lh-h5:    1.30;

/*	LETTER SPACING
============================================================================== */
  --ls-label: 0.14em;
  --ls-title: 0.01em;
  --ls-zusatz: -0.02em;

/*	SPACING FLUID
============================================================================== */
  --space-xs:  calc(0.8rem + 0.4rem * var(--fluid)); /*  8 → 12px */
  --space-s:   calc(1.2rem + 0.8rem * var(--fluid)); /* 12 → 20px */
  --space-m:   calc(2.0rem + 1.2rem * var(--fluid)); /* 20 → 32px */
  --space-l:   calc(3.2rem + 1.6rem * var(--fluid)); /* 32 → 48px */
  --space-xl:  calc(4.8rem + 2.4rem * var(--fluid)); /* 48 → 72px */
  --space-xxl: calc(7.2rem + 4.8rem * var(--fluid)); /* 72 → 120px */

  --gutter:    calc(2.0rem + 4.4rem * var(--fluid)); /* 20 → 64px Seitenrand */

  --btn-p-t-b: calc(1.4rem + 0.4rem * var(--fluid)); /* 14 → 18px */
  --btn-p-l-r: calc(2.4rem + 0.6rem * var(--fluid)); /* 24 → 30px */

/*	RADIEN & SCHATTEN
============================================================================== */
  --radius-sm:   0.8rem;
  --radius-md:   1.4rem;
  --radius-lg:   2.4rem;
  --radius-pill: 99.9rem;
  --shadow-card: 0 2.4rem 4rem rgba(42, 28, 18, .28);
  --shadow-soft: 0 1.2rem 2.4rem rgba(42, 28, 18, .14);

/*	HEADER-HÖHE (Topbar 44 + Navigation 104) – für Abstand erste Sektion
============================================================================== */
  --header-h: calc(9.6rem + 5.2rem * var(--fluid)); /* 96 → 148px */
}


/*  PADDING CLASSES
============================================================================== */
.p-xs  { padding: var(--space-xs); }
.p-s   { padding: var(--space-s); }
.p-m   { padding: var(--space-m); }
.p-l   { padding: var(--space-l); }
.p-xl  { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }


/*	03 GRUNDLAYOUT & SEKTIONS-FARBWELTEN
	Sektions-Hintergrund NICHT im Builder setzen, nur über die Klasse.
============================================================================== */
body,
#page-container,
#et-main-area {
  background-color: var(--secondaryColor);
  color: var(--bodyColor);
  font-family: var(--ff-body);
}

.et_pb_section {
  background-color: var(--secondaryColor);
}

/* Sprungmarken (#katzen, #auto-reisen …) nicht unter dem fixierten Header verstecken */
:is(.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module)[id] {
  scroll-margin-top: calc(var(--header-h) + 2.4rem);
}

/* Gelb */
.et_pb_section.hkc-sec-gelb,
.et_pb_column.hkc-sec-gelb {
  background-color: var(--primaryColor);
  color: var(--darkColor);
}

/* Weiss */
.et_pb_section.hkc-sec-weiss,
.et_pb_column.hkc-sec-weiss {
  background-color: var(--white);
  color: var(--darkColor);
}

/* Dunkel (Espresso) & Grün (nur Katzen) */
.et_pb_section.hkc-sec-dunkel,
.et_pb_column.hkc-sec-dunkel {
  background-color: var(--darkColor);
  color: var(--mutedColor);
}

.et_pb_section.hkc-sec-gruen,
.et_pb_column.hkc-sec-gruen {
  background-color: var(--greenColor);
  color: var(--mutedColor);
}

/* Textfarben auf Dunkel/Grün (bewusst hohe Spezifität, schlägt die Typografie-Regeln) */
:is(.et_pb_section, .et_pb_column):is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module :is(h1, h2, h3, h4, h5, strong, a:not(.et_pb_button)) {
  color: var(--lightColor);
}

:is(.et_pb_section, .et_pb_column):is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module :is(p, li, .et_pb_text_inner) {
  color: var(--mutedColor);
}

:is(.et_pb_section, .et_pb_column):is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module :is(h1, h2, h3) .hz-zusatz,
:is(.et_pb_section, .et_pb_column):is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module.quote :is(p, .et_pb_text_inner) {
  color: var(--primaryColor);
}

:is(.et_pb_section, .et_pb_column):is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module :is(h1, h2, h3) .label,
:is(.et_pb_section, .et_pb_column):is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module.label :is(p, .et_pb_text_inner) {
  color: var(--sandLight);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(h1, h2) .label::before {
  background: var(--sandLight);
}

/* Weisse Karte (hkc-card) in dunkler Sektion: wieder dunkle Schrift */
.et_pb_section:is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_column.hkc-card:not(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module :is(h1, h2, h3, h4, h5, strong, a:not(.et_pb_button)) {
  color: var(--headingColor);
}

.et_pb_section:is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_column.hkc-card:not(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module:not(.meta) :is(p, li, .et_pb_text_inner) {
  color: var(--bodyColor);
}


/*	04 HEADER / TOPBAR / MENÜ
============================================================================== */
.et-db #et-boc .et-l #bh_header {
  background: var(--primaryColor)!important;
  transition: all 0.5s ease;
}

.et-db #et-boc .et-l #bh_header.hide-header {
  opacity: 0;
  margin-top: -150px!important;
  transition: all 0.5s ease;
}

.et-db #et-boc .et-l #bh_header.show-header {
  opacity: 1;
  margin-top: 0px!important;
  transition: all 0.5s ease;
  background: rgba(255, 207, 38, 0.92)!important;
  -webkit-backdrop-filter: blur(6.0px);
          backdrop-filter: blur(6.0px);
  box-shadow: 0 0.6rem 2rem rgba(42, 28, 18, .12);
}

/* Erste Sektion unter fixiertem Header: Headerhöhe + Luft
   (!important, sonst überschreibt das Divi-Sektionspadding den Wert) */
.et-l.et-l--post .et_pb_section:first-of-type {
  padding-top: calc(var(--header-h) + var(--space-l))!important;
}

/* Topbar: dunkle Infozeile über der Navigation */
.et_pb_section.hkc-topbar {
  background-color: var(--darkColor);
  color: var(--lightColor);
  padding: 0!important;
}

.hkc-topbar .et_pb_row {
  min-height: 4.4rem;
  padding: 0!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.hkc-topbar .et_pb_column {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  margin: 0!important;
  width: auto!important;
}

.hkc-topbar .et_pb_module {
  margin: 0!important;
}

.hkc-topbar :is(p, a, span) {
  font-size: 1.4rem!important;
  line-height: 1.3!important;
  letter-spacing: .02em;
  color: var(--lightColor)!important;
  padding: 0;
}

.hkc-topbar .meta p {
  color: var(--sandLight)!important;
}

.hkc-topbar a {
  text-decoration: none;
}

.hkc-topbar a:hover {
  color: var(--primaryColor)!important;
}

/* Topbar als ZEILE in der Header-Sektion (empfohlen: eine Sektion #bh_header mit 2 Zeilen) */
.et_pb_row.hkc-topbar {
  width: 100%!important;
  max-width: none!important;
  min-height: 4.4rem;
  margin: 0!important;
  padding: 0 var(--gutter)!important;
  background-color: var(--darkColor);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* Navigationszeile: Logo links, Menü rechts */
.et_pb_row.hkc-nav {
  width: 100%!important;
  max-width: none!important;
  min-height: calc(7.2rem + 3.2rem * var(--fluid)); /* 72 → 104px */
  margin: 0!important;
  padding: 0 var(--gutter)!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}

.et_pb_row.hkc-nav > .et_pb_column {
  width: auto!important;
  margin: 0!important;
}

.et_pb_row.hkc-nav > .et_pb_column:last-child {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.et_pb_row.hkc-nav .et_pb_module {
  margin: 0!important;
}

#bh_header {
  padding: 0!important;
}

/* Menü-Modul mit Logo (Stil «Links ausgerichtet»):
   Logo links · Menüpunkte mittig · WhatsApp ganz rechts */
.hkc-nav > .et_pb_column:only-child {
  flex: 1 1 100%!important;
  width: 100%!important;
}

.hkc-nav .et_pb_menu,
.hkc-nav .et_pb_menu_inner_container,
.hkc-nav .et_pb_menu__wrap,
.hkc-nav .et_pb_menu__menu,
.hkc-nav .et_pb_menu__menu > nav {
  width: 100%!important;
  flex: 1 1 auto;
}

.hkc-nav .et_pb_menu_inner_container {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.hkc-nav .et_pb_menu__logo-wrap {
  flex: 0 0 auto;
}

.hkc-nav .et_pb_menu__logo img {
  display: block;
  width: auto;
  height: calc(4.4rem + 2.4rem * var(--fluid)); /* 44 → 68px */
  max-width: 32rem;
}

.hkc-nav .et-menu {
  display: flex!important;
  align-items: center;
  width: 100%;
  margin: 0!important;
  gap: calc(1.2rem + 2.4rem * var(--fluid));
}

.hkc-nav .et-menu > li {
  padding: 0!important;
  margin: 0;
}

/* freie Fläche links vom ersten Punkt und links von WhatsApp → Menü mittig, Button rechts */
.hkc-nav .et-menu > li:first-child,
.hkc-nav .et-menu > li.menu-cta {
  margin-left: auto;
}

.hkc-nav .et-menu > li > a {
  padding: 1rem 0!important;
  color: var(--darkColor)!important;
  opacity: 1!important;
}

.hkc-nav .et-menu > li > a:hover {
  color: var(--greyColor)!important;
}

/* WhatsApp-Button: normale Button-Höhe */
.hkc-nav .et-menu > li.menu-cta > a {
  height: auto!important;
  min-height: 0;
  line-height: 1.2!important;
  padding: var(--btn-p-t-b) var(--btn-p-l-r)!important;
  color: var(--primaryColor)!important;
}

.hkc-nav .et-menu > li.menu-cta > a:hover {
  color: var(--primaryColor)!important;
}

/* Dropdown-Pfeil «Sortiment» */
.hkc-nav .et-menu > li.menu-item-has-children > a {
  padding-right: 2rem!important;
}

/* Logo als Bild-Modul in der Navigation: Höhe begrenzen */
.et_pb_row.hkc-nav .et_pb_image,
.et_pb_row.hkc-nav .et_pb_image .et_pb_image_wrap {
  width: auto!important;
  max-width: none;
}

.et_pb_row.hkc-nav .et_pb_image img {
  display: block;
  width: auto;
  height: calc(4.4rem + 2.4rem * var(--fluid)); /* 44 → 68px */
  max-width: 32rem;
  object-fit: contain;
}

/* Topbar-Spalten: Module nebeneinander (Divi 5 setzt Spalten auf flex-direction: column) */
.hkc-topbar .et_pb_column {
  flex-direction: row!important;
  flex-wrap: wrap;
  align-items: center!important;
  column-gap: 2.8rem!important;
  row-gap: .4rem!important;
}

.hkc-topbar .et_pb_column > .et_pb_module {
  width: auto!important;
  margin: 0!important;
}

/* Telefon und E-Mail im selben Text-Modul: Abstand */
.hkc-topbar .et_pb_text_inner a + a {
  margin-left: 2.8rem;
}

/* Sicherheitsnetz: Klasse hz-status gehört NICHT aufs Code-Modul (der Shortcode setzt sie selbst) */
.et_pb_module.hz-status {
  display: block;
  padding: 0;
  background: none;
}

.et_pb_module.hz-status::before {
  content: none;
}

/* Menü-Links */
.et_pb_menu .et-menu > li > a {
  font-family: var(--ff-body);
  font-size: 1.7rem;
  font-weight: var(--fw-600);
  color: var(--darkColor);
}

.et_pb_menu .et-menu > li > a:hover {
  opacity: 1;
  color: var(--greyColor);
}

.et_pb_menu .et-menu > li.current-menu-item > a,
.et_pb_menu .et-menu > li.current-menu-ancestor > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .6rem;
}

/* Untermenü «Sortiment» – schwebende Karte, weich eingeblendet */
.et_pb_menu .nav li ul.sub-menu {
  width: 26rem;
  padding: .8rem!important;
  margin-top: 1.2rem;
  background: var(--white);
  border: 0!important;
  border-radius: var(--radius-md);
  box-shadow: 0 1.6rem 4rem rgba(42, 28, 18, .16), 0 .2rem .6rem rgba(42, 28, 18, .06);
  transform: translateY(.8rem);
  transition: opacity .25s ease, transform .25s ease, visibility .25s!important;
}

/* unsichtbare Brücke, damit das Menü beim Runterfahren offen bleibt */
.et_pb_menu .nav li ul.sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.6rem;
  height: 1.6rem;
}

.et_pb_menu .nav li:hover > ul.sub-menu,
.et_pb_menu .nav li.et-show-dropdown > ul.sub-menu {
  transform: translateY(0);
}

.et_pb_menu .nav li ul.sub-menu li {
  width: 100%;
  padding: 0!important;
}

.et_pb_menu .nav li ul.sub-menu li a {
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.4rem!important;
  border-radius: var(--radius-sm);
  font-size: 1.6rem;
  font-weight: var(--fw-600);
  line-height: 1.3;
  color: var(--darkColor)!important;
  opacity: 1!important;
  transition: background-color .2s ease, padding .2s ease;
}

.et_pb_menu .nav li ul.sub-menu li a::after {
  content: "→";
  opacity: 0;
  transform: translateX(-.6rem);
  transition: opacity .2s ease, transform .2s ease;
}

.et_pb_menu .nav li ul.sub-menu li a:hover,
.et_pb_menu .nav li ul.sub-menu li.current-menu-item > a {
  background: var(--secondaryColor);
}

.et_pb_menu .nav li ul.sub-menu li a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* menu-cta: WhatsApp als dunkler Pill-Button ganz rechts im Menü */
.et_pb_menu .et-menu > li.menu-cta {
  padding-left: 1.2rem;
}

.et_pb_menu .et-menu > li.menu-cta > a {
  display: inline-flex!important;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 1.4rem 2.2rem!important;
  background: var(--darkColor);
  color: var(--primaryColor)!important;
  border-radius: var(--radius-pill);
  font-family: var(--ff-btn);
  font-weight: var(--fw-700);
  font-size: 1.6rem;
  transition: var(--tra-3s);
}

.et_pb_menu .et-menu > li.menu-cta > a::before {
  content: "";
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 21l2.1-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 21l2.1-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.et_pb_menu .et-menu > li.menu-cta > a:hover {
  background: var(--greyColor);
  color: var(--primaryColor)!important;
  opacity: 1;
}

/* Logo-Schriftzug (Text-Modul im Header, Klasse hkc-logo) */
.hkc-logo,
.hkc-logo p {
  font-family: var(--ff-title);
  text-transform: uppercase;
  line-height: .9!important;
  color: var(--darkColor);
  padding: 0!important;
}

.hkc-logo strong {
  display: block;
  font-weight: var(--fw-900);
  font-size: calc(2.4rem + 1rem * var(--fluid));
  letter-spacing: .01em;
}

.hkc-logo span {
  display: block;
  font-weight: var(--fw-700);
  font-size: calc(1.3rem + .7rem * var(--fluid));
  letter-spacing: .34em;
}


/*	05 MOBILE MENU – Fullscreen-Overlay (Divi-Menümodul, bis 980px)
============================================================================== */

/* Theme Builder Header und Menü-Modul nach vorne */
.et-l--header {
  position: relative;
  z-index: 99999;
}

.et-l--header .et_pb_menu,
.et_pb_menu {
  position: relative;
  z-index: 99999;
}

@media only screen and (max-width: 980px) {

  /* backdrop-filter/transform am Header würden position:fixed einsperren → bei offenem Menü aus */
  .et-db #et-boc .et-l #bh_header:has(.mobile_nav.opened) {
    -webkit-backdrop-filter: none!important;
            backdrop-filter: none!important;
    transform: none!important;
    opacity: 1!important;
    margin-top: 0!important;
  }

  /* Seite darunter nicht scrollen */
  html:has(.mobile_nav.opened),
  body:has(.mobile_nav.opened) {
    overflow: hidden!important;
  }

  /* Overlay: immer gerendert, über opacity/visibility ein- und ausgeblendet
     (überschreibt Divis slideToggle) */
  .et_pb_menu .mobile_nav .et_mobile_menu {
    position: fixed!important;
    inset: 0!important;
    z-index: 100000;
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    width: 100%!important;
    height: 100dvh!important;
    margin: 0!important;
    padding: calc(var(--header-h) + 2rem) var(--gutter) calc(4rem + env(safe-area-inset-bottom))!important;
    overflow-y: auto!important;
    background: var(--darkColor)!important;
    border: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
  }

  .et_pb_menu .mobile_nav.opened .et_mobile_menu {
    opacity: 1;
    visibility: visible;
  }

  /* Pfote als Hintergrund rechts unten (wie Footer) */
  .et_pb_menu .mobile_nav .et_mobile_menu::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -6rem;
    width: 32rem;
    aspect-ratio: 1;
    background-color: var(--lightColor);
    opacity: .05;
    -webkit-mask: url("/wp-content/uploads/2026/10/pfote.svg") center / contain no-repeat;
            mask: url("/wp-content/uploads/2026/10/pfote.svg") center / contain no-repeat;
    transform: rotate(-12deg);
    pointer-events: none;
  }

  /* Einträge */
  .et_pb_menu .et_mobile_menu li {
    width: 100%;
    padding: 0!important;
    border: 0!important;
    list-style: none;
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity .4s ease, transform .4s ease;
  }

  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li {
    opacity: 1;
    transform: translateY(0);
  }

  /* gestaffeltes Einblenden */
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(1) { transition-delay: .08s; }
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(2) { transition-delay: .13s; }
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(3) { transition-delay: .18s; }
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(4) { transition-delay: .23s; }
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(5) { transition-delay: .28s; }
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(6) { transition-delay: .33s; }
  .et_pb_menu .mobile_nav.opened .et_mobile_menu > li:nth-child(n+7) { transition-delay: .38s; }

  .et_pb_menu .et_mobile_menu a {
    text-decoration: none!important;
  }

  /* Hauptpunkte: gross in Big Shoulders */
  .et_pb_menu .et_mobile_menu > li > a {
    display: block;
    padding: .4rem 0!important;
    background: none!important;
    border: 0!important;
    font-family: var(--ff-title)!important;
    font-size: clamp(3.6rem, 11vw, 5.6rem)!important;
    font-weight: var(--fw-800)!important;
    line-height: 1.05!important;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left;
    color: var(--lightColor)!important;
    opacity: 1!important;
    transition: color .2s ease;
  }

  .et_pb_menu .et_mobile_menu > li > a:is(:hover, :focus-visible),
  .et_pb_menu .et_mobile_menu > li:is(.current-menu-item, .current-menu-ancestor) > a {
    color: var(--primaryColor)!important;
  }

  /* Untermenü «Sortiment»: kompakte Chips unter dem Hauptpunkt */
  .et_pb_menu .et_mobile_menu .sub-menu {
    display: flex!important;
    flex-wrap: wrap;
    gap: .8rem;
    width: 100%;
    margin: 1rem 0 1.6rem!important;
    padding: 0!important;
    background: none!important;
    border: 0!important;
    box-shadow: none!important;
  }

  .et_pb_menu .et_mobile_menu .sub-menu li {
    width: auto;
    opacity: 1;
    transform: none;
  }

  .et_pb_menu .et_mobile_menu .sub-menu li a {
    display: block;
    width: auto!important;
    padding: .8rem 1.4rem!important;
    background: rgba(248, 239, 223, .08)!important;
    border: 1px solid rgba(248, 239, 223, .16)!important;
    border-radius: var(--radius-pill);
    font-family: var(--ff-body)!important;
    font-size: 1.5rem!important;
    font-weight: var(--fw-600)!important;
    line-height: 1.2!important;
    text-transform: none;
    color: var(--mutedColor)!important;
  }

  .et_pb_menu .et_mobile_menu .sub-menu li a:is(:hover, :focus-visible),
  .et_pb_menu .et_mobile_menu .sub-menu li.current-menu-item a {
    background: var(--primaryColor)!important;
    border-color: var(--primaryColor)!important;
    color: var(--darkColor)!important;
  }

  /* WhatsApp als gelber Button am Schluss */
  .et_pb_menu .et_mobile_menu > li.menu-cta {
    margin-top: var(--space-l);
  }

  .et_pb_menu .et_mobile_menu > li.menu-cta > a {
    display: inline-flex!important;
    align-items: center;
    gap: 1rem;
    width: auto!important;
    padding: 1.6rem 2.6rem!important;
    background: var(--primaryColor)!important;
    border-radius: var(--radius-pill);
    font-family: var(--ff-btn)!important;
    font-size: 1.7rem!important;
    font-weight: var(--fw-700)!important;
    text-transform: none;
    color: var(--darkColor)!important;
  }

  /* Hamburger / Schliessen: über dem Overlay, im offenen Zustand hell */
  .et_pb_menu .mobile_menu_bar {
    position: relative;
    z-index: 100001;
  }

  .mobile_menu_bar::before {
    display: block;
    color: var(--darkColor)!important;
    transition: transform .4s ease, color .3s ease;
  }

  .mobile_nav.opened .mobile_menu_bar::before {
    content: "\4d"!important;
    color: var(--lightColor)!important;
    transform: rotate(90deg);
  }
}

/*	06 TYPOGRAFIE
	Titel = Big Shoulders, Grossbuchstaben · Text = Archivo
	Titel-Aufbau (Text- oder Heading-Modul, HTML-Ansicht):
	<h2><span class="label">Keyword</span> Titel <span class="hz-zusatz">Zusatz</span></h2>
============================================================================== */
.et_pb_module.et_pb_text :is(h1, h2, h3, h4, h5),
.et_pb_module.et_pb_heading :is(h1, h2, h3, h4, h5) {
  color: var(--headingColor);
  padding-bottom: 0;
}

.et_pb_module.et_pb_text h1,
.et_pb_module.et_pb_heading h1 {
  font-family: var(--ff-title);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-900);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}

/* Startseite: noch grösser */
.et_pb_module.hkc-h1-xl h1,
.hkc-hero--home .et_pb_module h1 {
  font-size: var(--fs-h1-xl);
  line-height: .84;
}

.et_pb_module.et_pb_text h2,
.et_pb_module.et_pb_heading h2 {
  font-family: var(--ff-title);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-900);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}

/* H2-Varianten */
.et_pb_module.display h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

.et_pb_module.compact h2 {
  font-size: var(--fs-h2-compact);
}

.et_pb_module.et_pb_text h3,
.et_pb_module.et_pb_heading h3 {
  font-family: var(--ff-title);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-900);
  text-transform: uppercase;
}

.et_pb_module.et_pb_text h4,
.et_pb_module.et_pb_heading h4,
h3.et_pb_toggle_title {
  font-family: var(--ff-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-700);
}

.et_pb_module.et_pb_text h5,
.et_pb_module.et_pb_heading h5 {
  font-family: var(--ff-body);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-700);
}

/* Fliesstext */
.et_pb_module.et_pb_text p,
.et_pb_blurb .et_pb_blurb_description p,
.et_pb_module .et_pb_toggle_content p {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bodyColor);
}

.et_pb_module.et_pb_text p:not(:last-child) {
  padding-bottom: 1em;
}

.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-bottom: var(--space-s);
}

/* label – Keyword-Zeile über dem Titel (Teil des H-Tags) */
:is(h1, h2, h3) .label {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: calc(1.6rem + 1.2rem * var(--fluid));
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-700);
  font-style: normal;
  line-height: 1.35;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--greyColor);
}

:is(h1, h2) .label::before {
  content: "";
  width: 2rem;
  height: 2px;
  flex-shrink: 0;
  background: var(--darkColor);
}

.hkc-sec-gelb :is(h1, h2) .label {
  color: var(--darkColor);
}

/* label – als Text-Modul (z.B. über Karten, in Zitat-Boxen) */
.et_pb_text.label p,
.et_pb_text.label .et_pb_text_inner,
p.label {
  font-family: var(--ff-body);
  font-size: var(--fs-label)!important;
  font-weight: var(--fw-700);
  line-height: 1.35;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--greyColor);
}

/* hz-zusatz – emotionaler 2. Titelteil: Archivo kursiv, normale Schreibweise */
:is(h1, h2, h3) .hz-zusatz {
  display: block;
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: var(--fw-500);
  font-size: .7em;
  line-height: 1.1;
  letter-spacing: var(--ls-zusatz);
  text-transform: none;
}

/* Zusatz in derselben Zeile (kurze Titel) */
:is(h1, h2, h3) .hz-zusatz.is-inline {
  display: inline;
}

/* lead – Einleitung unter H1 */
.et_pb_text.lead p,
.et_pb_text.lead .et_pb_text_inner {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--darkColor);
  max-width: 60rem;
  text-wrap: pretty;
}

/* statement – grosser Aussagesatz */
.et_pb_text.statement p,
.et_pb_text.statement .et_pb_text_inner {
  font-size: var(--fs-statement);
  line-height: 1.2;
  font-weight: var(--fw-600);
  letter-spacing: -0.01em;
  color: var(--darkColor);
}

/* meta – kleine Hinweise, Datum, Marken
   Farbe nur als Vorgabe (:where = Spezifität 0) → Textfarbe im Divi-Modul überschreibt sie */
:where(.et_pb_text.meta) {
  color: var(--greyColor);
}

:where(.hkc-sec-dunkel, .hkc-sec-gruen) :where(.et_pb_text.meta) {
  color: var(--sandLight);
}

:where(.hkc-sec-dunkel, .hkc-sec-gruen) :where(.hkc-card:not(.hkc-sec-dunkel, .hkc-sec-gruen)) :where(.et_pb_text.meta) {
  color: var(--greyColor);
}

.et_pb_text.meta p,
.et_pb_text.meta .et_pb_text_inner {
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: var(--fw-600);
  letter-spacing: .04em;
  color: inherit;
}

/* quote – Slogan / Bildunterschrift: Archivo kursiv */
.et_pb_text.quote p,
.et_pb_text.quote .et_pb_text_inner,
figcaption.quote {
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: var(--fw-600);
  font-size: var(--fs-quote);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--greyColor);
}

/* Ocker-Zahlen (nur ≥ 24px verwenden – Kontrast) */
.hkc-ocker,
.hkc-ocker p {
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: var(--fs-num);
  line-height: .9;
  color: var(--ochreColor);
}


/*	07 BUTTONS & LINKS
============================================================================== */
.et_pb_button,
.et_pb_button.submit {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--ff-btn);
  font-size: var(--fs-btn);
  font-weight: var(--fw-700);
  line-height: 1.2;
  text-transform: none;
  padding: var(--btn-p-t-b) var(--btn-p-l-r)!important;
  border: none!important;
  border-radius: var(--radius-pill)!important;
  transition: var(--tra-3s);
  background: var(--darkColor);
  color: var(--primaryColor)!important;
}

.et_pb_button:hover,
.et_pb_button.submit:hover {
  font-size: var(--fs-btn)!important;
  padding: var(--btn-p-t-b) var(--btn-p-l-r)!important;
  border: none;
  background: var(--greyColor)!important;
  color: var(--primaryColor)!important;
}

.et_pb_button::after {
  display: none;
}

/* btn-dark – Hauptbutton: Espresso, gelbe Schrift
   Klasse im Button-Modul setzen (Divi setzt sie aufs <a> bzw. den Wrapper) */
:is(.et_pb_button.btn-dark, .btn-dark .et_pb_button) {
  background: var(--darkColor)!important;
  color: var(--primaryColor)!important;
}

:is(.et_pb_button.btn-dark, .btn-dark .et_pb_button):hover {
  background: var(--greyColor)!important;
}

/* btn-secondary – Nebenbutton: Outline */
:is(.et_pb_button.btn-secondary, .btn-secondary .et_pb_button) {
  background: transparent!important;
  color: var(--darkColor)!important;
  box-shadow: inset 0 0 0 2px var(--darkColor);
}

:is(.et_pb_button.btn-secondary, .btn-secondary .et_pb_button):hover {
  background: var(--darkColor)!important;
  color: var(--lightColor)!important;
}

/* Auf Dunkel/Grün invertiert */
:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(.et_pb_button.btn-dark, .btn-dark .et_pb_button, .et_pb_button:not(.btn-secondary)) {
  background: var(--primaryColor)!important;
  color: var(--darkColor)!important;
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(.et_pb_button.btn-dark, .btn-dark .et_pb_button, .et_pb_button:not(.btn-secondary)):hover {
  background: var(--lightColor)!important;
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(.et_pb_button.btn-secondary, .btn-secondary .et_pb_button) {
  color: var(--lightColor)!important;
  box-shadow: inset 0 0 0 2px var(--lightColor);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(.et_pb_button.btn-secondary, .btn-secondary .et_pb_button):hover {
  background: var(--lightColor)!important;
  color: var(--darkColor)!important;
}

/* hkc-btns – Buttons nebeneinander (Klasse auf Spalte oder Zeile)
   Divi 5 stapelt Module in Spalten, daher flex-direction: row erzwungen */
.et_pb_column.hkc-btns,
.hkc-btns {
  display: flex;
  flex-direction: row!important;
  flex-wrap: wrap;
  align-items: center!important;
  gap: 1.4rem!important;
}

.hkc-btns > .et_pb_module,
.hkc-btns > .et_pb_button_module_wrapper {
  width: auto!important;
  margin: 0!important;
}

/* Variante: Buttons als Links in EINEM Text-Modul (Klasse hkc-btns auf dem Modul) */
.et_pb_text.hkc-btns :is(.et_pb_text_inner, p) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  padding: 0!important;
}

a.et_pb_button {
  text-decoration: none!important;
}

/* hz-more – Pfeil-Link «… →» (Text-Modul mit Link oder Button-Modul) */
.hz-more a,
a.hz-more,
.et_pb_button.hz-more {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 0 0 .4rem!important;
  background: none!important;
  border-radius: 0!important;
  box-shadow: inset 0 -2px 0 currentColor;
  font-family: var(--ff-btn);
  font-size: calc(1.6rem + .1rem * var(--fluid))!important;
  font-weight: var(--fw-700);
  color: var(--darkColor)!important;
  text-decoration: none;
  transition: var(--tra-3s);
}

.hz-more a:hover,
a.hz-more:hover,
.et_pb_button.hz-more:hover {
  gap: 1.4rem;
  padding: 0 0 .4rem!important;
  background: none!important;
  color: var(--greyColor)!important;
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(.hz-more a, a.hz-more, .et_pb_button.hz-more) {
  color: var(--primaryColor)!important;
}

/* hz-textlink – Link im Fliesstext */
.hz-textlink a,
a.hz-textlink,
:where(.et_pb_text p) a {
  color: inherit;
  font-weight: var(--fw-600);
  text-decoration: underline;
  text-decoration-color: var(--primaryColor);
  text-decoration-thickness: .3rem;
  text-underline-offset: .3rem;
  transition: var(--tra-3s);
}

.hz-textlink a:hover,
a.hz-textlink:hover,
:where(.et_pb_text p) a:hover {
  text-decoration-color: var(--darkColor);
}

.hkc-sec-gelb :is(.hz-textlink a, a.hz-textlink, :where(.et_pb_text p) a) {
  text-decoration-color: var(--darkColor);
}

/* Fokus sichtbar (Tastatur) */
:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--darkColor);
  outline-offset: 3px;
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen, .hkc-topbar) :is(a, button):focus-visible {
  outline-color: var(--primaryColor);
}


/*	08 LISTEN & BLÖCKE
============================================================================== */

/* hz-steps – nummerierte Schritte (Text-Modul, <ol> mit <li><h4>Titel</h4><p>Text</p></li>)
   Standard: untereinander, Nummer links · .is-cols: 3 Spalten, Linie oben */
:is(.hz-steps ol, ol.hz-steps) {
  list-style: none!important;
  padding: 0!important;
  margin: 0;
  counter-reset: hzstep;
  border-top: 2px solid var(--darkColor);
}

:is(.hz-steps ol, ol.hz-steps) > li {
  counter-increment: hzstep;
  display: grid;
  grid-template-columns: calc(6.4rem + 3.2rem * var(--fluid)) minmax(0, 1fr);
  column-gap: var(--space-m);
  row-gap: .8rem;
  padding: 2.8rem 0!important;
  border-bottom: 1px solid var(--sandColor);
}

:is(.hz-steps ol, ol.hz-steps) > li::before {
  content: counter(hzstep, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: calc(4rem + 1.6rem * var(--fluid));
  line-height: .9;
  color: var(--ochreColor);
}

:is(.hz-steps ol, ol.hz-steps) > li > :is(h3, h4) {
  grid-column: 2;
  font-family: var(--ff-body)!important;
  font-size: calc(2rem + .4rem * var(--fluid))!important;
  font-weight: var(--fw-700)!important;
  line-height: 1.25!important;
  text-transform: none!important;
  color: var(--darkColor);
}

:is(.hz-steps ol, ol.hz-steps) > li > p {
  grid-column: 2;
  padding: 0!important;
}

/* 3 Spalten nebeneinander (BARF) */
:is(.hz-steps.is-cols ol, ol.hz-steps.is-cols) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  border-top: none;
}

:is(.hz-steps.is-cols ol, ol.hz-steps.is-cols) > li {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.4rem 0 0!important;
  border-top: 3px solid var(--darkColor);
  border-bottom: none;
}

:is(.hz-steps.is-cols ol, ol.hz-steps.is-cols) > li::before {
  font-size: var(--fs-num);
}

/* hz-checklist – Liste mit Titel + Text, Linien (Text-Modul, <ul>)
   <li><h4>Titel</h4><p>Text</p></li> · Standard 2-spaltig
   .is-compact: 3-spaltig, <li><strong>Titel</strong> Text</li> */
:is(.hz-checklist ul, ul.hz-checklist) {
  list-style: none!important;
  padding: 0!important;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-l);
}

:is(.hz-checklist ul, ul.hz-checklist) > li {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 2.4rem 0!important;
  border-top: 1px solid currentColor;
}

:is(.hz-checklist ul, ul.hz-checklist) > li > :is(h3, h4) {
  font-family: var(--ff-body)!important;
  font-size: calc(2rem + .4rem * var(--fluid))!important;
  font-weight: var(--fw-700)!important;
  line-height: 1.25!important;
  text-transform: none!important;
}

:is(.hz-checklist ul, ul.hz-checklist) > li > p {
  padding: 0!important;
}

:is(.hz-checklist.is-compact ul, ul.hz-checklist.is-compact) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(.hz-checklist.is-compact ul, ul.hz-checklist.is-compact) > li {
  display: block;
  padding: 2rem 0!important;
  border-top-color: var(--sandColor);
}

:is(.hz-checklist.is-compact ul, ul.hz-checklist.is-compact) > li strong {
  display: block;
  margin-bottom: .4rem;
  font-size: calc(1.7rem + .2rem * var(--fluid));
  color: var(--darkColor);
}

/* hz-facts – Zweispaltige Angaben (Öffnungszeiten, Datum/Ort)
   Ausgabe [hkc_oeffnungszeiten]: <ul class="hz-facts"><li class="is-today"><span>Montag</span><span>13.30 – 18.30 Uhr</span></li></ul> */
ul.hz-facts,
.hz-facts ul {
  list-style: none!important;
  padding: 0!important;
  margin: 0;
  border-top: 2px solid var(--darkColor);
}

ul.hz-facts > li,
.hz-facts ul > li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 1.4rem 1.2rem!important;
  border-bottom: 1px solid var(--sandColor);
  font-size: calc(1.6rem + .2rem * var(--fluid));
  line-height: 1.4;
}

ul.hz-facts > li > span:first-child,
.hz-facts ul > li > span:first-child {
  font-weight: var(--fw-700);
  color: var(--darkColor);
}

ul.hz-facts > li > span:last-child,
.hz-facts ul > li > span:last-child {
  text-align: right;
}

/* Heute: kräftiges Gelb, Text dunkel */
ul.hz-facts > li.is-today,
.hz-facts ul > li.is-today {
  background: var(--primaryColor);
}

:is(ul.hz-facts, .hz-facts ul) > li.is-today > span {
  color: var(--darkColor)!important;
}

/* in gelber Sektion wäre Gelb unsichtbar → weiss */
.hkc-sec-gelb :is(ul.hz-facts, .hz-facts ul) > li.is-today {
  background: var(--white);
}

ul.hz-facts > li.is-closed > span:last-child,
.hz-facts ul > li.is-closed > span:last-child {
  color: var(--greyColor);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(ul.hz-facts, .hz-facts ul) {
  border-top-color: var(--lightColor);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(ul.hz-facts, .hz-facts ul) > li {
  border-bottom-color: rgba(248, 239, 223, .25);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(ul.hz-facts, .hz-facts ul) > li > span:first-child {
  color: var(--lightColor);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(ul.hz-facts, .hz-facts ul) > li.is-today {
  background: var(--primaryColor);
}

/* Footer: kompakt, heute nur mit gelbem Punkt markiert */
.hkc-footer :is(ul.hz-facts, .hz-facts ul) > li.is-today {
  background: transparent;
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) :is(ul.hz-facts, .hz-facts ul) > li.is-closed > span:last-child {
  color: var(--sandLight);
  font-style: italic;
}

/* hz-contact – Adresse / Kontaktdaten (Text-Modul) */
.hz-contact p {
  padding-bottom: 0!important;
  font-size: calc(1.7rem + .2rem * var(--fluid))!important;
  line-height: 1.5!important;
}

.hz-contact p + p {
  margin-top: 1.2rem;
}

.hz-contact strong {
  font-size: 1.1em;
  color: var(--darkColor);
}

.hz-contact a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3rem;
}

/* hz-quote-card – Box mit Label + Text (Espresso; .is-gelb oder in dunkler Sektion: Gelb) */
.et_pb_module.hz-quote-card {
  background: var(--darkColor);
  color: var(--lightColor);
  border-radius: var(--radius-lg);
  padding: var(--space-m) var(--space-m)!important;
}

.hz-quote-card :is(p, .et_pb_text_inner) {
  color: var(--lightColor)!important;
  font-size: calc(1.6rem + .2rem * var(--fluid))!important;
  line-height: 1.5!important;
}

.hz-quote-card .label,
.hz-quote-card p.label {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-label)!important;
  font-weight: var(--fw-700);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--primaryColor)!important;
}

.hz-quote-card :is(h3, h4, .hz-quote-card__title) {
  font-family: var(--ff-body)!important;
  font-style: italic;
  font-weight: var(--fw-600)!important;
  font-size: calc(2.2rem + .8rem * var(--fluid))!important;
  line-height: 1.2!important;
  text-transform: none!important;
  letter-spacing: -0.01em;
  color: var(--primaryColor)!important;
  margin-bottom: 1rem;
}

.et_pb_module.hz-quote-card.is-gelb,
:is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module.hz-quote-card {
  background: var(--primaryColor);
}

:is(.hz-quote-card.is-gelb, .hkc-sec-dunkel .hz-quote-card, .hkc-sec-gruen .hz-quote-card) :is(p, .et_pb_text_inner, h3, h4, .label) {
  color: var(--darkColor)!important;
}

/* hz-status – Offen/Geschlossen-Pill · Ausgabe [hkc_status]:
   <span class="hz-status">Jetzt geöffnet · bis 18.30 Uhr</span>  (+ .is-busy = geschlossen) */
.hz-status {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-weight: var(--fw-600);
  font-size: 1.4rem;
  line-height: 1.3;
}

.hz-status::before {
  content: "";
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--statusOpen);
  box-shadow: 0 0 0 0 rgba(123, 216, 143, .6);
  animation: hz-pulse 2.4s ease-out infinite;
}

.hz-status.is-busy::before {
  background: var(--statusClosed);
  animation: none;
}

/* Grosse Variante (Kontakt-Hero) */
.hz-status.is-lg {
  padding: 1.2rem 2rem;
  border-radius: var(--radius-pill);
  background: var(--darkColor);
  color: var(--lightColor);
  font-size: calc(1.6rem + .2rem * var(--fluid));
}

.hz-status.is-lg::before {
  width: 1.2rem;
  height: 1.2rem;
}

@keyframes hz-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(123, 216, 143, .6); }
  70%  { box-shadow: 0 0 0 .8rem rgba(123, 216, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 216, 143, 0); }
}

/* hkc-pills – Schlagwort-Pillen (Text-Modul, <ul>) · .is-light auf Dunkel/Grün */
:is(.hkc-pills ul, ul.hkc-pills) {
  list-style: none!important;
  padding: 0!important;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

:is(.hkc-pills ul, ul.hkc-pills) > li {
  padding: .8rem 1.6rem!important;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-pill);
  font-size: calc(1.4rem + .2rem * var(--fluid))!important;
  font-weight: var(--fw-600);
  line-height: 1.3!important;
  color: var(--darkColor);
}

:is(.hkc-pills.is-light ul, ul.hkc-pills.is-light, .hkc-sec-dunkel .hkc-pills ul, .hkc-sec-gruen .hkc-pills ul) > li {
  border-color: rgba(248, 239, 223, .6);
  color: var(--lightColor);
}

/* Verlinkte Pillen: <li><a href="…">…</a></li> – ganze Pille klickbar, Hover gelb */
:is(.hkc-pills ul, ul.hkc-pills) > li:has(> a) {
  padding: 0!important;
  transition: background-color .2s ease, border-color .2s ease;
}

:is(.hkc-pills ul, ul.hkc-pills) > li > a {
  display: block;
  padding: .8rem 1.6rem;
  color: inherit!important;
  text-decoration: none!important;
}

:is(.hkc-pills ul, ul.hkc-pills) > li:has(> a):hover {
  background-color: var(--primaryColor);
  border-color: var(--darkColor);
}

:is(.hkc-pills ul, ul.hkc-pills) > li:has(> a):hover > a {
  color: var(--darkColor)!important;
}

/* hkc-faq – FAQ ohne Akkordeon (Text-Modul: <h3>Frage</h3><p>Antwort</p> …) */
.hkc-faq .et_pb_text_inner {
  border-top: 2px solid var(--darkColor);
}

.hkc-faq :is(h3, h4) {
  font-family: var(--ff-body)!important;
  font-size: calc(2rem + .4rem * var(--fluid))!important;
  font-weight: var(--fw-700)!important;
  line-height: 1.3!important;
  text-transform: none!important;
  padding-top: 2.8rem!important;
  margin-bottom: 1rem;
}

.hkc-faq p {
  padding-bottom: 2.8rem!important;
  border-bottom: 1px solid var(--sandColor);
}

/* hkc-dates – Terminliste · Ausgabe [hkc_termine]:
   <ul class="hkc-dates"><li><span class="hkc-dates__date">7.<small>Nov</small></span>
   <div><h3>Name</h3><p>Satz</p></div><a class="hz-more" href="…">Details →</a></li></ul> */
ul.hkc-dates {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 2px solid var(--darkColor);
}

ul.hkc-dates > li {
  display: grid;
  grid-template-columns: calc(8rem + 4rem * var(--fluid)) minmax(0, 1fr) auto;
  gap: var(--space-m);
  align-items: center;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--sandColor);
}

.hkc-dates__date {
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: calc(4rem + 2.4rem * var(--fluid));
  line-height: .9;
  text-transform: uppercase;
  color: var(--darkColor);
}

.hkc-dates__date small {
  display: block;
  font-size: .4em;
  letter-spacing: .08em;
  color: var(--greyColor);
}

ul.hkc-dates h3 {
  font-family: var(--ff-body)!important;
  font-size: calc(2rem + .4rem * var(--fluid))!important;
  font-weight: var(--fw-700)!important;
  text-transform: none!important;
  line-height: 1.25!important;
  margin-bottom: .4rem;
}

ul.hkc-dates p {
  padding: 0!important;
  margin-top: .4rem;
  font-size: var(--fs-body)!important;   /* 16 → 18px */
  line-height: 1.45!important;
  color: var(--bodyColor);
}

ul.hkc-dates > li.is-past {
  opacity: .55;
}


/*	09 BILDER
============================================================================== */

/* hz-zoom – Bild-Modul mit Hover-Zoom, Radius 24px */
.et_pb_image.hz-zoom .et_pb_image_wrap {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.et_pb_image.hz-zoom img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.et_pb_image.hz-zoom:hover img {
  transform: scale(1.04);
}

/* Bilder mit fester Höhe: zusätzlich .hkc-img-h (z.B. Ladenbild 400px) */
.et_pb_image.hkc-img-h img {
  height: calc(28rem + 12rem * var(--fluid));
  object-fit: cover;
}

/* hkc-bildgrid – Klasse auf ZEILE: Bild der ersten Spalte so hoch wie die zweite Spalte
   (z.B. BARF S3: links grosses Bild, rechts Bild + Zitat-Box) */
.et_pb_row.hkc-bildgrid {
  align-items: stretch!important;
}

.et_pb_row.hkc-bildgrid > .et_pb_column {
  display: flex!important;
  flex-direction: column;
}

.et_pb_row.hkc-bildgrid > .et_pb_column > .et_pb_module:last-child {
  margin-bottom: 0!important;
}

.et_pb_row.hkc-bildgrid > .et_pb_column:first-child > .et_pb_image {
  flex: 1 1 auto;
  display: flex;
  margin-bottom: 0!important;
}

.et_pb_row.hkc-bildgrid > .et_pb_column:first-child > .et_pb_image .et_pb_image_wrap {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 32rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.et_pb_row.hkc-bildgrid > .et_pb_column:first-child > .et_pb_image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .et_pb_row.hkc-bildgrid > .et_pb_column:first-child > .et_pb_image .et_pb_image_wrap {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Radius 24px ohne Zoom */
.et_pb_image.hkc-rounded .et_pb_image_wrap,
.et_pb_image.hkc-rounded img {
  border-radius: var(--radius-lg);
}

/* hkc-arch – Bild mit Bogen oben (Hero) · --sm für Karten */
.et_pb_image.hkc-arch,
.et_pb_image.hkc-arch .et_pb_image_wrap {
  display: block;
  width: 100%;
}

.et_pb_image.hkc-arch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 999px 999px 0 0; /* wird automatisch zum Halbkreis */
}

.et_pb_image.hkc-arch.hkc-arch--sm img {
  aspect-ratio: 1 / 1;
  border-radius: 200px 200px var(--radius-lg) var(--radius-lg);
}

/* Bogen auch unten abgerundet (Hero Unterseiten mit Bild nicht am Sektionsrand) */
.et_pb_image.hkc-arch.is-rounded img {
  border-radius: 280px 280px var(--radius-lg) var(--radius-lg);
}

/* hkc-circle – rundes Zweitbild mit gelbem Rahmen (absolut in der Hero-Spalte) */
.et_pb_image.hkc-circle {
  position: absolute!important;
  right: -2.4rem;
  top: 40%;
  width: calc(12rem + 7.6rem * var(--fluid))!important;
  margin: 0!important;
  z-index: 3;
}

.et_pb_image.hkc-circle img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: .8rem solid var(--primaryColor);
}

/* Hero-Bildspalte: Bezug für hkc-circle / hkc-bib */
.hkc-hero .et_pb_column:last-child {
  position: relative;
}

/* hkc-polaroid – weisser Rahmen, leicht gedreht (Bild-Modul mit Bildunterschrift
   oder Text-Modul mit <figure><img><figcaption>) */
.hkc-polaroid {
  background: var(--white);
  padding: 1.2rem 1.2rem 1.6rem!important;
  box-shadow: var(--shadow-soft);
  transform: rotate(-2deg);
  transition: transform .4s ease;
}

.hkc-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.hkc-polaroid :is(figcaption, .et_pb_image_caption, p) {
  padding: 1.2rem .4rem 0!important;
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: var(--fw-600);
  font-size: 1.6rem!important;
  line-height: 1.3!important;
  text-align: center;
  color: var(--darkColor)!important;
}

/* Rotation abwechselnd – auf Modul- oder Spaltenebene */
:is(.et_pb_column, .et_pb_row) > .hkc-polaroid:nth-child(2n),
.et_pb_column:nth-child(2n) > .hkc-polaroid { transform: rotate(2deg) translateY(1.6rem); }
:is(.et_pb_column, .et_pb_row) > .hkc-polaroid:nth-child(3n),
.et_pb_column:nth-child(3n) > .hkc-polaroid { transform: rotate(-1deg); }
:is(.et_pb_column, .et_pb_row) > .hkc-polaroid:nth-child(4n),
.et_pb_column:nth-child(4n) > .hkc-polaroid { transform: rotate(3deg) translateY(-.8rem); }

.hkc-polaroid:hover {
  transform: rotate(0) scale(1.03)!important;
  z-index: 2;
}

/* hkc-polaroids – mehrere Polaroids in EINEM Code-/Text-Modul (<figure class="hkc-polaroid">…) */
.hkc-polaroids :is(.et_pb_code_inner, .et_pb_text_inner) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-m);
  align-items: start;
}

.hkc-polaroids figure.hkc-polaroid { margin: 0; transform: rotate(-3deg); }
.hkc-polaroids figure.hkc-polaroid:nth-child(2) { transform: rotate(2deg) translateY(2.4rem); }
.hkc-polaroids figure.hkc-polaroid:nth-child(3) { transform: rotate(-1deg) translateY(-.8rem); }
.hkc-polaroids figure.hkc-polaroid:nth-child(4) { transform: rotate(3deg) translateY(1.6rem); }
.hkc-polaroids figure.hkc-polaroid:nth-child(5) { transform: rotate(-2deg); }

/* hkc-map – statisches Kartenbild mit überlagertem Button
   Spalte mit Klasse hkc-map: Bild-Modul + Button-Modul (Button wird unten links platziert) */
.hkc-map {
  position: relative;
}

.hkc-map .et_pb_image .et_pb_image_wrap,
.hkc-map .et_pb_image img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
}

.hkc-map .et_pb_button_module_wrapper {
  position: absolute;
  left: var(--space-m);
  bottom: var(--space-m);
  margin: 0!important;
  z-index: 2;
}

/* hkc-map als Code-Modul: <div class="hkc-map__wrap"><img …><a class="et_pb_button btn-dark" …></a></div> */
.hkc-map__wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hkc-map__wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.hkc-map__wrap .et_pb_button {
  position: absolute;
  left: var(--space-m);
  bottom: var(--space-m);
  z-index: 2;
}

/* hkc-gallery-grid – Ladenbilder 2fr/1fr/1fr, erstes Bild über 2 Reihen
   Text- oder Code-Modul mit Bildern direkt hintereinander (<img> oder <figure>) */
.hkc-gallery-grid .et_pb_text_inner,
.hkc-gallery-grid .et_pb_code_inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: calc(16rem + 10rem * var(--fluid));
  gap: var(--space-s);
}

.hkc-gallery-grid :is(img, figure) {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.hkc-gallery-grid :is(img, figure):first-child {
  grid-row: span 2;
}

.hkc-gallery-grid figure img {
  height: 100%;
}

/* hkc-gallery-grid auf dem Divi-Galerie-Modul (Layout «Raster», Lightbox inklusive)
   Erstes Bild gross über 2 Reihen, danach 2 Spalten · ideal 5 Bilder */
.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_items {
  display: grid!important;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: calc(16rem + 10rem * var(--fluid)); /* 160 → 260px */
  gap: var(--space-s);
}

.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_items::before,
.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_items::after {
  display: none; /* Clearfix von Divi stört das Raster */
}

.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_item {
  width: 100%!important;
  height: 100%;
  margin: 0!important;
  border: none!important;
  float: none!important;
  clear: none!important;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* kein display:…!important – sonst greift die «Bildanzahl» von Divi nicht
     (Divi blendet überzählige Bilder per display:none aus) */
}

/* jedes 5. Bild ab dem 1. gross über 2 Reihen → ideal 5 oder 10 Bilder */
.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_item:nth-child(5n+1) {
  grid-row: span 2;
}

.et_pb_gallery.hkc-gallery-grid :is(.et_pb_gallery_image, .et_pb_gallery_image a) {
  display: block;
  width: 100%;
  height: 100%;
}

.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_image img {
  width: 100%;
  height: 100%!important;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.et_pb_gallery.hkc-gallery-grid .et_pb_gallery_item:hover img {
  transform: scale(1.04);
}

/* Titel/Bildunterschrift und Seitenzahlen der Galerie ausblenden */
.et_pb_gallery.hkc-gallery-grid :is(.et_pb_gallery_title, .et_pb_gallery_caption, .et_pb_gallery_pagination) {
  display: none;
}

/* hkc-imageband – Sektion mit Hintergrundbild (im Builder), Box unten links */
.et_pb_section.hkc-imageband {
  min-height: calc(36rem + 20rem * var(--fluid)); /* 360 → 560px */
  display: flex!important;
  flex-direction: column!important;
  justify-content: flex-end!important; /* Box unten */
  align-items: stretch!important;
  background-size: cover!important;
  background-position: center!important;
}

.hkc-imageband .et_pb_row {
  width: 100%;
  margin-top: auto;
}

.hkc-imageband .hz-quote-card {
  max-width: 52rem;
}


/*	10 KARTEN
============================================================================== */

/* hkc-card – weisse Karte, Radius 24px (Klasse auf Spalte) */
.et_pb_column.hkc-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-l)!important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.et_pb_column.hkc-card > .et_pb_module {
  margin-bottom: 0!important;
}

/* Link-Zeile immer unten */
.et_pb_column.hkc-card > .hz-more:last-child {
  margin-top: auto!important;
  padding-top: var(--space-xs);
}

/* Bild oben randabfallend */
.et_pb_column.hkc-card > .et_pb_image:first-child {
  margin: calc(var(--space-l) * -1) calc(var(--space-l) * -1) var(--space-xs)!important;
  width: auto!important;
  max-width: none;
}

.et_pb_column.hkc-card > .et_pb_image:first-child img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

/* Karten-Titel H3 */
.et_pb_column.hkc-card h3 {
  font-size: calc(2.8rem + 1.0rem * var(--fluid))!important; /* 28 → 38px, alle Karten gleich */
  line-height: 1!important;
  text-wrap: balance;
  hyphens: manual;
}

/* (Titelgrösse für alle Karten gleich, siehe oben) */

/* Fliesstext in Karten etwas kompakter */
.et_pb_column.hkc-card .et_pb_module.et_pb_text p {
  line-height: 1.45;
}

.et_pb_column.hkc-card .et_pb_module.et_pb_text p:not(:last-child) {
  padding-bottom: .75em;
}

/* hkc-card--media – Bild links über die volle Kartenhöhe, Text rechts
   (Bild-Modul als ERSTES Modul in der Spalte) */
.et_pb_column.hkc-card.hkc-card--media:not(.is-right) {
  --card-img: calc(16rem + 12rem * var(--fluid)); /* 160 → 280px (Prozent ginge auf die Zeilenbreite) */
  position: relative;
  display: flex!important;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-l) var(--space-l) calc(var(--card-img) + var(--space-l))!important;
}

.et_pb_column.hkc-card.hkc-card--media:not(.is-right) > .et_pb_module:not(.et_pb_image) {
  padding: 0!important;
}

.et_pb_column.hkc-card.hkc-card--media:not(.is-right) > .et_pb_image:first-child {
  position: absolute!important;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--card-img)!important;
  max-width: none;
  margin: 0!important;
  padding: 0!important;
}

.et_pb_column.hkc-card.hkc-card--media:not(.is-right) > .et_pb_image:first-child :is(.et_pb_image_wrap, img) {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

/* hkc-card--media is-right – Text links, Bild rechts über die volle Kartenhöhe
   (Bild-Modul als LETZTES Modul in der Spalte) */
.et_pb_column.hkc-card.hkc-card--media.is-right {
  --card-img: calc(16rem + 12rem * var(--fluid)); /* 160 → 280px (Prozent ginge auf die Zeilenbreite) */
  position: relative;
  display: flex!important;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) calc(var(--card-img) + var(--space-l)) var(--space-l) var(--space-l)!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right > .et_pb_module:not(.et_pb_image) {
  padding: 0!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right > .et_pb_image:last-child {
  position: absolute!important;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--card-img)!important;
  max-width: none;
  margin: 0!important;
  padding: 0!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right > .et_pb_image:last-child :is(.et_pb_image_wrap, img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* is-breit – Bild nimmt 45% der Karte ein (statt fester 160–280px)
   Klasse zusätzlich auf die Spalte: hkc-card hkc-card--media is-right is-breit
   Raster statt absoluter Positionierung, damit sich % auf die KARTE beziehen */
.et_pb_column.hkc-card.hkc-card--media.is-right.is-breit {
  display: grid!important;
  grid-template-columns: minmax(0, 1fr) 45%;
  grid-template-rows: repeat(5, auto) 1fr;
  column-gap: 0;
  row-gap: var(--space-s);
  padding: 0!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_module:not(.et_pb_image) {
  grid-column: 1;
  padding: 0 var(--space-l)!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_module:first-child {
  padding-top: var(--space-l)!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_module:nth-last-child(2) {
  padding-bottom: var(--space-l)!important;
}

.et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_image:last-child {
  position: relative!important;
  grid-column: 2;
  grid-row: 1 / -1;
  inset: auto;
  width: auto!important;
  min-height: 28rem;
}

.et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_image:last-child .et_pb_image_wrap {
  position: absolute;
  inset: 0;
}

@media only screen and (max-width: 767px) {
  .et_pb_column.hkc-card.hkc-card--media.is-right.is-breit {
    display: flex!important;
    flex-direction: column;
    gap: var(--space-s);
  }

  .et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_image:last-child {
    order: -1;
    min-height: 0;
    margin: 0!important;
    aspect-ratio: 16 / 10;
  }

  .et_pb_column.hkc-card.hkc-card--media.is-right.is-breit > .et_pb_module:first-child {
    padding-top: 0!important;
  }
}

/* Karte dunkel / grün: Hintergrund aus hkc-sec-* (Spaltenklasse kombinieren) */
.et_pb_column.hkc-card.hkc-sec-dunkel { background-color: var(--darkColor); }
.et_pb_column.hkc-card.hkc-sec-gruen  { background-color: var(--greenColor); }

/* hkc-contact-card – Kontaktkarte (Kontaktseite): ganze Karte klickbar
   Text-Modul: <p class="label">…</p><h3><a href="…">…</a></h3><p>…</p> */
.et_pb_column.hkc-contact-card {
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}

.et_pb_column.hkc-contact-card:hover {
  transform: translateY(-.4rem);
  box-shadow: var(--shadow-soft);
}

.et_pb_column.hkc-card.hkc-contact-card h3 {
  font-size: calc(2.6rem + 1rem * var(--fluid))!important; /* 26 → 36px */
  line-height: 1.05!important;
  overflow-wrap: anywhere;
  margin: .6rem 0 1rem;
}

.hkc-contact-card h3 a {
  color: inherit!important;
  text-decoration: none!important;
}

.hkc-contact-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hkc-contact-card p.label {
  padding-bottom: 0!important;
}

/* hz-post-card – Beitragskarte im Divi-Loop (Neuheiten)
   Klasse auf die Loop-Spalte. Module darin: Bild (Beitragsbild) · Text .meta (Datum) · Titel H3 · Text (Auszug)
   Optik: weisse Karte, Radius 24px, Bild oben randabfallend 240px, Text mit 28px Innenabstand */
.et_pb_column.hz-post-card,
.hz-post-card {
  display: flex!important;
  flex-direction: column!important;
  gap: .8rem;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0 0 2.8rem!important;
  transition: var(--tra-3s);
}

.hz-post-card:hover {
  box-shadow: var(--shadow-soft);
}

.hz-post-card > .et_pb_module {
  width: 100%!important;
  margin: 0!important;
  padding: 0 2.8rem!important;
}

/* Beitragsbild oben, randabfallend */
.hz-post-card > .et_pb_image:first-child {
  padding: 0!important;
  margin-bottom: 1.2rem!important;
  overflow: hidden;
}

.hz-post-card > .et_pb_image:first-child :is(.et_pb_image_wrap, a, img) {
  display: block;
  width: 100%;
  border-radius: 0!important;
}

.hz-post-card > .et_pb_image:first-child img {
  height: calc(18rem + 6rem * var(--fluid)); /* 180 → 240px */
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.hz-post-card:hover > .et_pb_image:first-child img {
  transform: scale(1.04);
}

/* Datum */
.hz-post-card .meta :is(p, .et_pb_text_inner) {
  font-size: 1.4rem!important;
  font-weight: var(--fw-700);
  letter-spacing: 0;
  color: var(--greyColor)!important;
  padding: 0!important;
}

/* Titel (Text-Modul mit h3 oder Heading-Modul) */
.hz-post-card :is(h2, h3, h4, .et_pb_module_header) {
  font-family: var(--ff-body)!important;
  font-size: calc(2rem + .4rem * var(--fluid))!important; /* 20 → 24px */
  font-weight: var(--fw-700)!important;
  line-height: 1.25!important;
  letter-spacing: 0!important;
  text-transform: none!important;
  color: var(--darkColor)!important;
  padding: 0!important;
}

.hz-post-card :is(h2, h3, h4, .et_pb_module_header) a {
  color: inherit!important;
  text-decoration: none!important;
}

.hz-post-card:hover :is(h2, h3, h4, .et_pb_module_header) a {
  text-decoration: underline!important;
  text-decoration-color: var(--primaryColor)!important;
  text-decoration-thickness: .3rem!important;
  text-underline-offset: .3rem;
}

/* Auszug */
.hz-post-card .et_pb_text:not(.meta) p {
  font-size: calc(1.6rem + .1rem * var(--fluid))!important;
  line-height: 1.5!important;
  color: var(--bodyColor);
  padding: 0!important;
}


/*	11 HERO, BREADCRUMB, TICKER, PARCOURS, BIB, MARKEN, INSTAGRAM
============================================================================== */

/* hkc-hero – Zeile 7/5, Bild unten bündig (Sektion: hkc-sec-gelb hkc-hero; Startseite zusätzlich hkc-hero--home) */
.et_pb_section.hkc-hero {
  padding-bottom: 0!important;
}

.hkc-hero .et_pb_row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xl);
  padding-bottom: 0!important;
}

.hkc-hero .et_pb_column:first-child {
  padding-bottom: var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.hkc-hero .et_pb_column:first-child > .et_pb_module {
  margin-bottom: 0!important;
}

.hkc-hero .et_pb_column:last-child .et_pb_image:not(.hkc-circle) {
  margin-bottom: 0!important;
}

/* Hero mit Countdown-Karte statt Bild (Events): Karte mittig, nicht am Sektionsrand */
.hkc-hero .et_pb_column:last-child:has(.hkc-bib--lg) {
  align-self: center;
  padding: var(--space-xl) 0;
}

/* Hero ohne Bild: unten wieder normaler Innenabstand */
.et_pb_section.hkc-hero:not(:has(.hkc-arch)) {
  padding-bottom: var(--space-xl)!important;
}

.et_pb_section.hkc-hero:not(:has(.hkc-arch)) .et_pb_column:first-child {
  padding-bottom: 0;
}

/* Pfote als Hintergrund im Hero (erste Sektion jeder Seite): links unten, ragt unten heraus
   Gleiche Technik wie im Footer · auf Gelb in Espresso, auf Dunkel in Creme */
.et_pb_section.hkc-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.et_pb_section.hkc-hero::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -.5);
  bottom: calc(-1 * clamp(4rem, 9vw, 10rem)); /* Überlauf nach unten */
  width: clamp(33rem, 30vw, 55rem);
  aspect-ratio: 1;
  background-color: var(--darkColor);
  -webkit-mask: url("/wp-content/uploads/2026/10/pfote.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/10/pfote.svg") center / contain no-repeat;
  opacity: .06;
  transform: rotate(12deg);
  pointer-events: none;
  z-index: -1;
}

.et_pb_section.hkc-hero:is(.hkc-sec-dunkel, .hkc-sec-gruen)::before {
  background-color: var(--lightColor);
}

/* Pfote auf einzelner Seite weglassen: Sektionsklasse no-pfote ergänzen */
.et_pb_section.hkc-hero.no-pfote::before {
  content: none;
}

/* hkc-breadcrumb – Brotkrumen (Code-Modul / Yoast [wpseo_breadcrumb]) */
.hkc-breadcrumb,
.hkc-breadcrumb p,
.hkc-breadcrumb span {
  font-size: 1.5rem!important;
  font-weight: var(--fw-600);
  line-height: 1.4!important;
  color: var(--darkColor);
}

.hkc-breadcrumb a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3rem;
}

.hkc-breadcrumb .breadcrumb_last {
  color: var(--greyColor);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) .hkc-breadcrumb :is(p, span, a) {
  color: var(--sandLight)!important;
}

/* hkc-ticker – Sortimentsband (Sektion hkc-ticker, Text-Modul <ul><li><a href="…">BARF</a></li>…</ul>)
   Desktop: eine Zeile · Mobil: bricht in 2–3 Zeilen um (kein verstecktes Scrollen) */
.et_pb_section.hkc-ticker {
  background-color: var(--darkColor);
  padding: 0!important;
}

.hkc-ticker .et_pb_row {
  padding: 0!important;
}

.hkc-ticker ul {
  list-style: none!important;
  padding: 0!important;
  margin: 0;
  min-height: 7.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
}

.hkc-ticker ul li {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 0!important;
  font-family: var(--ff-title)!important;
  font-weight: var(--fw-800);
  font-size: calc(2rem + 1rem * var(--fluid))!important;
  line-height: 1!important;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lightColor)!important;
}

.hkc-ticker ul li a {
  color: inherit!important;
  text-decoration: none!important;
  transition: color .2s ease;
}

.hkc-ticker ul li a:is(:hover, :focus-visible) {
  color: var(--primaryColor)!important;
}

.hkc-ticker ul li + li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--primaryColor);
}

/* hkc-parcours-line – Laufspur über den 3 Stationen (Code-Modul, Klasse hkc-parcours-line)
   <div class="hkc-parcours-line__wrap" aria-hidden="true">
     <svg viewBox="0 0 1312 64" preserveAspectRatio="none"><path class="hkc-parcours-line__path" d="…"/></svg>
     <span class="hkc-parcours-line__dot" style="--pos:0">01</span> … --pos:1 / --pos:2
     <span class="hkc-parcours-line__goal">Ziel: ein glücklicher Hund</span>
   </div> */
.hkc-parcours-line {
  margin: var(--space-m) 0 var(--space-l)!important;
}

.hkc-parcours-line__wrap {
  position: relative;
  height: 6.4rem;
}

.hkc-parcours-line__wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hkc-parcours-line__path {
  fill: none;
  stroke: var(--darkColor);
  stroke-width: 2.5;
  stroke-dasharray: 10 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hkc-parcours-line__dot {
  position: absolute;
  top: 0;
  left: calc(var(--pos, 0) * 34.15%); /* Spaltenanfang bei 3 Spalten */
  width: 6.4rem;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primaryColor);
  border: 2.5px solid var(--darkColor);
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: 3rem;
  line-height: 1;
  color: var(--darkColor);
}

.hkc-parcours-line__goal {
  position: absolute;
  right: 0;
  top: 1rem;
  padding: .8rem 1.8rem;
  border-radius: var(--radius-pill);
  background: var(--darkColor);
  color: var(--primaryColor);
  font-style: italic;
  font-weight: var(--fw-500);
  font-size: calc(1.6rem + .3rem * var(--fluid));
  line-height: 1.4;
  white-space: nowrap;
}

/* hkc-bib – Startnummer / Countdown-Karte · Ausgabe [hkc_event_bib]:
   <div class="hkc-bib"><div class="hkc-bib__head"><span>Noch</span><span>Tage</span></div>
   <div class="hkc-bib__num">23</div><div class="hkc-bib__text">bis Hundetag</div></div>
   --lg: <div class="hkc-bib hkc-bib--lg"> … <div class="hkc-bib__units"><div><strong>23</strong><span>Tage</span></div>…</div>
   <a class="hkc-bib__ics" href="….ics">Im Kalender eintragen</a></div> */
.hkc-bib {
  position: absolute;
  left: calc(var(--gutter) * -1);
  top: 11rem;
  z-index: 4;
  width: 20rem;
  display: flex;
  flex-direction: column;
  background: var(--lightColor);
  color: var(--darkColor);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transform: rotate(-5deg);
}

.hkc-bib__head {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  border-bottom: 2px dashed var(--darkColor);
  font-size: 1.2rem;
  font-weight: var(--fw-700);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hkc-bib__num {
  padding: .8rem 0 .4rem;
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: 10.4rem;
  line-height: 1;
  text-align: center;
}

.hkc-bib__text {
  padding: .8rem 1.6rem 1.6rem;
  font-style: italic;
  font-weight: var(--fw-500);
  font-size: 1.6rem;
  line-height: 1.25;
  text-align: center;
}

/* Karte ist hell: Schrift immer Espresso, auch in dunklen Sektionen */
.et_pb_module .hkc-bib :is(div, span, strong, p),
:is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module .hkc-bib :is(div, span, strong, p) {
  color: var(--darkColor)!important;
}

/* Grosse Countdown-Karte (Event-Sektion, Events-Hero): im Fluss, nicht absolut */
.hkc-bib.hkc-bib--lg {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 44rem;
  margin-left: auto;
  border-radius: 1.8rem;
  overflow: hidden;
  transform: rotate(2deg);
  box-shadow: -1.4rem 1.4rem 0 var(--primaryColor); /* gelber Versatz-Schatten */
}

.hkc-bib__units {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 2rem 1.6rem 1.2rem;
  text-align: center;
}

.hkc-bib__units > div + div {
  border-left: 2px dashed var(--sandColor);
}

.hkc-bib__units strong {
  display: block;
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: calc(5.6rem + 3.2rem * var(--fluid));
  line-height: 1;
  color: var(--darkColor);
}

.hkc-bib__units span {
  font-size: 1.2rem;
  font-weight: var(--fw-700);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hkc-bib__ics {
  display: block;
  padding: 1.4rem 1.6rem;
  border-top: 2px dashed var(--darkColor);
  font-weight: var(--fw-700);
  text-align: center;
  color: var(--darkColor)!important;
  text-decoration: none;
}

.hkc-bib__ics:hover {
  background: var(--todayColor);
}

/* hkc-brands – Markenzeile mit Linien oben und unten (Klasse auf Zeile oder Sektion) */
.hkc-brands .et_pb_row,
.et_pb_row.hkc-brands {
  border-top: 2px solid var(--darkColor);
  border-bottom: 2px solid var(--darkColor);
  padding: var(--space-m) 0!important;
  display: flex;
  align-items: baseline;
  gap: var(--space-l);
}

.hkc-brands .quote {
  flex-shrink: 0;
  margin: 0!important;
}

.hkc-brands .hkc-brands__list p,
.hkc-brands .et_pb_text:not(.quote) p {
  font-family: var(--ff-title)!important;
  font-weight: var(--fw-800);
  font-size: calc(2.2rem + 1.2rem * var(--fluid))!important;
  line-height: 1.2!important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--greyColor)!important;
}

/* hkc-brands is-alle – komplette Markenliste, mehrspaltig
   Zeile: hkc-brands is-alle · Text-Modul: <ul class="hkc-brands__alle"><li>Marke</li>…</ul> */
.et_pb_row.hkc-brands.is-alle,
.hkc-brands.is-alle .et_pb_row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-m);
}

.et_pb_row.hkc-brands.is-alle > .et_pb_column,
.hkc-brands.is-alle .et_pb_row > .et_pb_column {
  width: 100%!important;
  max-width: 100%!important;
  margin-right: 0!important;
}

ul.hkc-brands__alle {
  list-style: none!important;
  margin: 0;
  padding: 0!important;
  columns: 4 16rem;
  column-gap: var(--space-l);
}

ul.hkc-brands__alle li {
  break-inside: avoid;
  padding: .7rem 0!important;
  border-bottom: 1px solid rgba(42, 28, 18, .14);
  font-family: var(--ff-title)!important;
  font-weight: var(--fw-800);
  font-size: calc(1.6rem + .4rem * var(--fluid))!important;
  line-height: 1.2!important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--greyColor)!important;
}

@media only screen and (max-width: 767px) {
  ul.hkc-brands__alle {
    columns: 2;
  }
}

/* hkc-insta – Smash Balloon Instagram Feed im Polaroid-Look (Code-Modul [instagram-feed feed=1]) */
.hkc-insta #sb_instagram {
  padding: 0!important;
}

.hkc-insta #sb_instagram #sbi_images {
  display: grid!important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-s)!important;
  padding: 0!important;
}

.hkc-insta #sb_instagram .sbi_item {
  width: 100%!important;
  padding: 1rem 1rem 2.4rem!important;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transform: rotate(-2deg);
  transition: transform .4s ease;
}

.hkc-insta #sb_instagram .sbi_item:nth-child(2n) { transform: rotate(2deg) translateY(1.2rem); }
.hkc-insta #sb_instagram .sbi_item:nth-child(3n) { transform: rotate(-1deg); }
.hkc-insta #sb_instagram .sbi_item:hover { transform: rotate(0) scale(1.03); }

.hkc-insta #sb_instagram .sbi_photo_wrap,
.hkc-insta #sb_instagram .sbi_photo {
  border-radius: 0;
}

.hkc-insta #sb_instagram #sbi_load {
  margin-top: var(--space-l);
}

.hkc-insta #sb_instagram .sbi_follow_btn a {
  background: var(--darkColor)!important;
  color: var(--primaryColor)!important;
  border-radius: var(--radius-pill);
  font-family: var(--ff-btn);
  font-weight: var(--fw-700);
}


/*	12 OCCASION-BOXEN · Ausgabe [occasion_boxen]
	<div class="occ-liste">
	  <div class="occ-item">
	    <div class="occ-titel"><strong>Marke · Doppelbox</strong><span>Zustand, passend für Kombi</span></div>
	    <span class="occ-masse">B × T × H cm</span>
	    <strong class="occ-preis">CHF 450.–</strong>
	  </div>
	  <p class="occ-leer">Zurzeit keine Occasionen – fragen Sie trotzdem nach.</p>
	</div>
============================================================================== */
.occ-liste {
  border-top: 2px solid var(--darkColor);
}

.occ-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem 14rem;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--darkColor);
}

.occ-titel {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.occ-titel strong {
  font-size: calc(1.9rem + .3rem * var(--fluid));
  color: var(--darkColor);
}

.occ-titel span,
.occ-masse {
  font-size: calc(1.5rem + .2rem * var(--fluid));
  line-height: 1.4;
}

.occ-preis {
  justify-self: end;
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: calc(2.6rem + .6rem * var(--fluid));
  line-height: 1;
  color: var(--darkColor);
}

.occ-item.is-reserviert {
  opacity: .55;
}

.occ-item.is-reserviert .occ-preis::after {
  content: " · reserviert";
  font-family: var(--ff-body);
  font-size: 1.4rem;
  font-weight: var(--fw-600);
}

.occ-leer {
  padding: 2.4rem 0;
  font-style: italic;
}


/*	13 FORMULARE
	hz-form = Divi-Kontaktformular · hz-gform = Gravity Forms (CSS-Klasse im Formular bzw. am Code-Modul)
	hz-consent = Checkbox Datenschutz
============================================================================== */

/* Divi-Kontaktformular */
.hz-form .et_pb_contact_field input,
.hz-form .et_pb_contact_field textarea,
.hz-form .et_pb_contact_field select {
  background: var(--secondaryColor)!important;
  border: 1.5px solid var(--sandColor)!important;
  border-radius: var(--radius-md)!important;
  padding: 1.6rem 1.8rem!important;
  font-family: var(--ff-body);
  font-size: 1.7rem!important;
  color: var(--darkColor)!important;
}

.hz-form .et_pb_contact_field input:focus,
.hz-form .et_pb_contact_field textarea:focus {
  border-color: var(--darkColor)!important;
  box-shadow: 0 0 0 3px var(--primaryColor);
}

/* Gravity Forms */
.hz-gform .gform_wrapper .gform_fields {
  row-gap: var(--space-s)!important;
}

.hz-gform .gform_wrapper .gfield_label,
.hz-gform .gform_wrapper legend.gfield_label {
  font-family: var(--ff-body);
  font-size: 1.5rem!important;
  font-weight: var(--fw-700)!important;
  color: var(--darkColor)!important;
  margin-bottom: .8rem!important;
}

.hz-gform .gform_wrapper .gfield_required {
  color: var(--greyColor)!important;
}

.hz-gform .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select) {
  width: 100%;
  background: var(--secondaryColor)!important;
  border: 1.5px solid var(--sandColor)!important;
  border-radius: var(--radius-md)!important;
  padding: 1.6rem 1.8rem!important;
  min-height: 5.6rem;
  font-family: var(--ff-body)!important;
  font-size: 1.7rem!important;
  line-height: 1.4!important;
  color: var(--darkColor)!important;
  box-shadow: none!important;
  transition: var(--tra-3s);
}

.hz-gform .gform_wrapper textarea {
  min-height: 18rem;
}

.hz-gform .gform_wrapper :is(input, textarea, select):focus {
  border-color: var(--darkColor)!important;
  box-shadow: 0 0 0 3px var(--primaryColor)!important;
  outline: none;
}

.hz-gform .gform_wrapper .gfield_description,
.hz-gform .gform_wrapper .gform_validation_errors,
.hz-gform .gform_wrapper .validation_message {
  font-size: 1.4rem!important;
}

.hz-gform .gform_wrapper .gfield_error :is(input, textarea) {
  border-color: #B4331A!important;
}

.hz-gform .gform_wrapper .gform_footer {
  margin-top: var(--space-m)!important;
  padding: 0!important;
}

.hz-gform .gform_wrapper .gform_footer :is(input[type="submit"], button) {
  display: inline-flex;
  align-items: center;
  padding: var(--btn-p-t-b) var(--btn-p-l-r)!important;
  border: none!important;
  border-radius: var(--radius-pill)!important;
  background: var(--darkColor)!important;
  color: var(--primaryColor)!important;
  font-family: var(--ff-btn)!important;
  font-size: var(--fs-btn)!important;
  font-weight: var(--fw-700)!important;
  line-height: 1.2!important;
  cursor: pointer;
  transition: var(--tra-3s);
}

.hz-gform .gform_wrapper .gform_footer :is(input[type="submit"], button):hover {
  background: var(--greyColor)!important;
}

/* Pills für Auswahl-Felder (Radio/Checkbox): CSS-Klasse «hz-pills» im Feld setzen */
.hz-gform .gfield.hz-pills .gfield_radio,
.hz-gform .gfield.hz-pills .gfield_checkbox {
  display: flex!important;
  flex-wrap: wrap;
  gap: 1rem;
}

.hz-gform .gfield.hz-pills .gchoice input {
  position: absolute;
  opacity: 0;
}

.hz-gform .gfield.hz-pills .gchoice label {
  display: inline-block;
  margin: 0!important;
  padding: .8rem 1.6rem;
  border: 2px solid var(--darkColor);
  border-radius: var(--radius-pill);
  font-size: 1.5rem;
  font-weight: var(--fw-600);
  cursor: pointer;
  max-width: none!important;
}

.hz-gform .gfield.hz-pills .gchoice input:checked + label {
  background: var(--darkColor);
  color: var(--primaryColor);
}

.hz-gform .gfield.hz-pills .gchoice input:focus-visible + label {
  box-shadow: 0 0 0 3px var(--primaryColor);
}

/* hz-consent – Datenschutz-Checkbox (Divi: Feld-Klasse · Gravity: CSS-Klasse im Feld) */
:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) :is(.gchoice, .ginput_container_consent, .et_pb_contact_field_checkbox) {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 2.4rem!important;
  height: 2.4rem!important;
  margin: .1rem 0 0!important;
  border: 2px solid var(--darkColor)!important;
  border-radius: .6rem!important;
  background: var(--white)!important;
  cursor: pointer;
  display: grid;
  place-content: center;
}

:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) input[type="checkbox"]::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background: var(--darkColor);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform .15s ease;
}

:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) input[type="checkbox"]:checked {
  background: var(--primaryColor)!important;
}

:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) input[type="checkbox"]:checked::before {
  transform: scale(1);
}

:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) label {
  font-size: 1.5rem!important;
  line-height: 1.45!important;
  font-weight: var(--fw-400)!important;
  max-width: none!important;
}

:is(.hz-gform .gfield.hz-consent, .hz-form .hz-consent) label a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--primaryColor);
  text-decoration-thickness: .3rem;
}


/*	14 AKKORDEON & GALERIE (Divi-Standard, Farben angepasst)
============================================================================== */
.et_pb_accordion .et_pb_toggle {
  background: transparent;
  border: none;
  border-top: 1px solid var(--sandColor);
  padding: 2.4rem 0;
}

.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title::before {
  content: "\33"!important;
  font-size: 20px;
  color: var(--darkColor);
}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before {
  display: block;
  content: "\32"!important;
  font-size: 20px;
  color: var(--darkColor);
}

@media only screen and (max-width: 980px) {
  .et_pb_gallery_grid .et_pb_gallery_item img {
    width: 100%;
  }
}

.et_pb_gallery .et_pb_gallery_item {
  border: 3px solid white;
}

.et_pb_gallery .et_overlay {
  background: var(--darkColor);
  border: none!important; /* Divi setzt 1px hellgrauen Rahmen auf das Overlay */
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: var(--tra-5s);
  transition: var(--tra-5s);
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  content: '';
  background-color: var(--primaryColor);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
}

.et_pb_gallery_image:before {
  width: 60px;
  height: 1px;
  left: 100%;
}

.et_pb_gallery_image:after {
  height: 60px;
  width: 1px;
  top: 0%;
}

.et_pb_gallery_item:hover .et_overlay {
  zoom: 1;
  opacity: 0.55;
}

.et_pb_gallery_image:hover:before,
.et_pb_gallery_image:hover:after {
  opacity: 1;
  top: 50%;
  left: 50%;
}

.et_pb_inline_icon:before,
.et_overlay.et_pb_inline_icon:before {
  content: '';
}


/*	15 FOOTER (Theme Builder)
	Sektion 1  CTA-Band ............ hkc-sec-gelb hkc-cta
	           Zeile 2 Spalten: Text (H2 + hz-zusatz) | Spalte hkc-btns
	Sektion 2  Footer .............. hkc-sec-dunkel hkc-footer
	           Zeile 1: 4 Spalten (Logo/Text · Adresse hz-contact · Öffnungszeiten · Instagram)
	           Zeile 2: Klasse bh_footer (Text bh_credits | Text bh_footer_list)
============================================================================== */

/* --- Sektion 1: CTA-Band ------------------------------------------------- */
.et_pb_section.hkc-cta {
  padding: var(--space-xl) 0!important;
}

.hkc-cta .et_pb_row {
  display: flex;
  align-items: center!important;
  justify-content: space-between;
  gap: var(--space-l);
}

.hkc-cta h2 {
  font-size: var(--fs-h2-compact)!important;
}

.hkc-cta h2 .hz-zusatz {
  font-size: calc(2rem + .8rem * var(--fluid)); /* 20 → 28px */
  line-height: 1.25;
  margin-top: .6rem;
}

.hkc-cta .et_pb_column.hkc-btns {
  justify-content: flex-end;
}

/* --- Sektion 2, Zeile 1: vier Spalten ------------------------------------ */
.hkc-footer .et_pb_row:not(.bh_footer) .et_pb_text :is(p, li) {
  font-size: calc(1.4rem + .1rem * var(--fluid))!important; /* 14 → 15px */
  line-height: 1.7!important;
  color: var(--sandLight)!important;
  padding-bottom: 0!important;
}

/* Spaltentitel: <strong> am Anfang des Text-Moduls */
.hkc-footer .et_pb_row:not(.bh_footer) .et_pb_text:not(.hkc-logo) strong,
.hkc-footer h4 {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--ff-body)!important;
  font-size: 1.6rem!important;
  font-weight: var(--fw-700)!important;
  text-transform: none!important;
  color: var(--lightColor)!important;
}

.hkc-footer .et_pb_row:not(.bh_footer) a {
  color: var(--sandLight)!important;
  text-decoration: none;
  transition: var(--tra-3s);
}

.hkc-footer .et_pb_row:not(.bh_footer) a:hover {
  color: var(--primaryColor)!important;
}

/* Logo-Schriftzug (Text-Modul hkc-logo) */
.hkc-footer .hkc-logo strong {
  display: block;
  font-family: var(--ff-title)!important;
  font-weight: var(--fw-900)!important;
  font-size: calc(2.4rem + .4rem * var(--fluid))!important;
  line-height: .9!important;
  letter-spacing: .01em;
  text-transform: uppercase!important;
  color: var(--lightColor)!important;
}

.hkc-footer .hkc-logo span {
  display: block;
  font-family: var(--ff-title)!important;
  font-weight: var(--fw-700);
  font-size: 1.6rem!important;
  line-height: 1.2!important;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--lightColor)!important;
}

/* Öffnungszeiten kompakt: Tag oben, Zeit darunter, heute = gelber Punkt */
.hkc-footer :is(ul.hz-facts, .hz-facts ul) {
  border-top: none!important;
}

.hkc-footer :is(ul.hz-facts, .hz-facts ul) > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: .6rem 0!important;
  border-bottom: none!important;
  background: none!important;
  font-size: calc(1.4rem + .1rem * var(--fluid))!important;
  line-height: 1.5!important;
}

.hkc-footer :is(ul.hz-facts, .hz-facts ul) > li > span:first-child {
  font-weight: var(--fw-600);
  color: var(--lightColor)!important;
}

.hkc-footer :is(ul.hz-facts, .hz-facts ul) > li > span:last-child {
  text-align: left;
  color: var(--sandLight)!important;
}

.hkc-footer :is(ul.hz-facts, .hz-facts ul) > li.is-today > span:first-child::after {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-left: .8rem;
  border-radius: 50%;
  background: var(--primaryColor);
  vertical-align: middle;
}

/* Instagram (Social-Media-Modul) */
.hkc-footer .et_pb_social_media_follow li a.icon {
  background: transparent!important;
  border: 2px solid var(--sandLight);
  border-radius: 50%;
}

.hkc-footer .et_pb_social_media_follow li a.icon:hover {
  border-color: var(--primaryColor);
}

/* Pfote als Hintergrund: rechts unten, 6 % Deckkraft, ragt unten aus der Sektion (wird abgeschnitten)
   Farbe kommt aus dem CSS (Maske), nicht aus dem SVG → funktioniert unabhängig von der SVG-Farbe */
.et_pb_section.hkc-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.et_pb_section.hkc-footer::after {
  content: "";
  position: absolute;
  right: calc(var(--gutter) * -.5);
  bottom: calc(-1 * clamp(4rem, 9vw, 10rem)); /* Überlauf nach unten */
  width: clamp(33rem, 30vw, 55rem);
  aspect-ratio: 1;
  background-color: var(--lightColor); /* Creme – für Gelb: var(--primaryColor) */
  -webkit-mask: url("/wp-content/uploads/2026/10/pfote.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/10/pfote.svg") center / contain no-repeat;
  opacity: .06;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: -1;
}

/* --- Sektion 2, Zeile 2: Credits (bh_footer, Hozjan-Standard) ------------ */
.et_pb_row.bh_footer,
.bh_footer .et_pb_row {
  border-top: 1px solid rgba(248, 239, 223, .2);
  padding-top: var(--space-m)!important;
}

.bh_footer .et_pb_column {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.bh_footer .et_pb_column:last-child {
  justify-content: flex-end;
}

.bh_footer :is(.bh_credits, .bh_footer_list) :is(p, span, li, a) {
  font-size: calc(1.1rem + .1rem * var(--fluid))!important; /* 11 → 12px */
  line-height: 1.4!important;
  letter-spacing: .08em;
  font-weight: var(--fw-500);
  text-transform: uppercase!important;
  padding-bottom: 0!important;
}

.bh_footer .bh_credits :is(p, span) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--sandLight)!important;
}

.bh_footer .bh_credits strong {
  font-weight: var(--fw-700);
  color: var(--lightColor);
}

.bh_footer .bh_credits a {
  color: var(--lightColor)!important;
  text-decoration: none!important;
  transition: var(--tra-3s);
}

.bh_footer .bh_credits a:hover {
  color: var(--primaryColor)!important;
}

.bh_footer .bh_credits img.swissmade {
  width: 13px!important;
  height: 13px!important;
  margin: 0 2px;
}

.bh_footer .bh_footer_list ul {
  list-style: none;
  display: flex;
  padding: 0!important;
}

.bh_footer .bh_footer_list ul li {
  margin: 0 0 0 2rem;
  -webkit-font-smoothing: antialiased;
}

.bh_footer .bh_footer_list ul li a {
  color: var(--lightColor)!important;
  text-decoration: none;
  transition: var(--tra-3s);
}

.bh_footer .bh_footer_list ul li a:hover {
  color: var(--primaryColor)!important;
}


/* hkc-neuheiten – CPT «Neuheiten» · [hkc_neuheiten anzahl="3"] bzw. [hkc_neuheit_galerie] im Divi-Loop
============================================================================== */
ul.hkc-neuheiten {
  list-style: none!important;
  margin: 0;
  padding: 0!important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
  gap: var(--space-l);
}

.hkc-neuheit {
  display: flex;
  flex-direction: column;
  padding: 0!important;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hkc-neuheit__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-m) var(--space-l);
}

.hkc-neuheit__body h3 {
  font-size: calc(1.8rem + .8rem * var(--fluid))!important;
  line-height: 1.05!important;
  padding: 0!important;
  font-weight: var(--fw-700);
  letter-spacing: -.03em
}

.hkc-neuheit__body p {
  padding: 0!important;
  line-height: 1.45!important;
}

.hkc-neuheit__marke {
  margin-top: auto!important;
  padding-top: var(--space-xs)!important;
  font-size: var(--fs-small)!important;
  font-weight: var(--fw-700);
  letter-spacing: .04em;
  color: var(--greyColor)!important;
}

.hkc-neuheit__meta {
  font-size: var(--fs-small)!important;
  font-weight: var(--fw-600);
  letter-spacing: .04em;
  color: var(--greyColor)!important;
}

/* Galerie: Titelbild gross, weitere als Mini-Vorschau darüber */
.hkc-neuheit__galerie {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.hkc-neuheit__bild {
  grid-column: 1 / -1;
  display: block;
  overflow: hidden;
}

.hkc-neuheit__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.hkc-neuheit__bild:hover img {
  transform: scale(1.04);
}

/* Weitere Bilder nicht als Vorschau zeigen – sie bleiben im HTML und erscheinen in der Lightbox;
   das Badge «x Bilder» weist darauf hin */
.hkc-neuheit__thumb {
  display: none!important;
}

.hkc-neuheit__anzahl {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  padding: .4rem 1rem;
  border-radius: 99rem;
  background: var(--darkColor);
  color: var(--lightColor);
  font-size: 1.2rem;
  font-weight: var(--fw-700);
  letter-spacing: .04em;
  pointer-events: none;
}

.hkc-neuheiten__leer {
  color: var(--greyColor);
}

/* Lightbox */
dialog.hkc-lb {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(42, 28, 18, .94);
  color: var(--lightColor);
}

dialog.hkc-lb::backdrop {
  background: transparent;
}

dialog.hkc-lb[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hkc-lb figure {
  margin: 0;
  max-width: min(110rem, 88vw);
  text-align: center;
}

.hkc-lb img {
  display: block;
  max-width: 100%;
  max-height: 80dvh;
  margin: 0 auto;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.hkc-lb figcaption {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: var(--sandLight);
}

.hkc-lb button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 0;
  border-radius: 50%;
  background: var(--primaryColor);
  color: var(--darkColor);
  font-size: 2.8rem;
  line-height: 1;
  cursor: pointer;
}

.hkc-lb__close { top: 2rem; right: 2rem; }
.hkc-lb__prev  { left: 2rem; top: 50%; translate: 0 -50%; }
.hkc-lb__next  { right: 2rem; top: 50%; translate: 0 -50%; }
.hkc-lb.is-single .hkc-lb__nav { display: none; }

@media only screen and (max-width: 767px) {
  .hkc-lb__prev, .hkc-lb__next { top: auto; bottom: 2rem; translate: none; }
}

/* Divi-Galerie-Lightbox (Magnific Popup, .mfp-*) im Stil der hkc-lb
============================================================================== */
.mfp-bg {
  background: var(--darkColor)!important;
  opacity: .94!important;
}

.mfp-figure::after {
  box-shadow: none!important;
  background: transparent!important;
}

img.mfp-img {
  padding: 4rem 0!important;
  border-radius: var(--radius-md);
}

.mfp-bottom-bar {
  margin-top: -3.2rem!important;
}

.mfp-title,
.mfp-counter {
  font-family: var(--ff-body)!important;
  font-size: 1.4rem!important;
  color: var(--sandLight)!important;
}

.mfp-counter {
  position: static!important;
  display: block;
  text-align: center;
  padding-top: .4rem;
}

/* Runde gelbe Buttons wie hkc-lb */
button.mfp-close,
button.mfp-arrow {
  display: grid!important;
  place-items: center;
  width: 4.8rem!important;
  height: 4.8rem!important;
  margin: 0!important;
  padding: 0!important;
  border: 0!important;
  border-radius: 50%;
  background: var(--primaryColor)!important;
  color: var(--darkColor)!important;
  opacity: 1!important;
  font-family: var(--ff-body)!important;
  font-size: 2.8rem!important;
  line-height: 1!important;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease;
}

/* hohe Spezifität: Divi setzt beim Hover einen eigenen Hintergrund mit !important */
html body .mfp-wrap button.mfp-close:is(:hover, :focus),
html body .mfp-wrap button.mfp-arrow:is(:hover, :focus, :active) {
  background: var(--primaryColor)!important;
  background-color: var(--primaryColor)!important;
  color: var(--darkColor)!important;
  opacity: 1!important;
  transform: scale(1.08);
}

.mfp-image-holder button.mfp-close,
.mfp-iframe-holder button.mfp-close {
  position: fixed!important;
  top: 2rem!important;
  right: 2rem!important;
  left: auto!important;
}

button.mfp-arrow {
  position: fixed!important;
  top: 50%!important;
  translate: 0 -50%;
}

button.mfp-arrow-left  { left: 2rem!important; }
button.mfp-arrow-right { right: 2rem!important; left: auto!important; }

/* Standard-Dreiecke bzw. Divi-Icons ersetzen */
button.mfp-arrow::before,
button.mfp-arrow::after,
button.mfp-arrow .mfp-b,
button.mfp-arrow .mfp-a {
  content: none!important;
  display: none!important;
  border: 0!important;
}

/* Chevron als CSS-Form statt Schriftzeichen → exakt zentriert */
button.mfp-arrow-left::after,
button.mfp-arrow-right::after,
html body .mfp-wrap button.mfp-arrow-left:is(:hover, :focus, :active)::after,
html body .mfp-wrap button.mfp-arrow-right:is(:hover, :focus, :active)::after {
  content: ""!important;
  display: block!important;
  position: static!important;
  inset: auto!important;
  width: 1.2rem!important;
  height: 1.2rem!important;
  margin: 0!important;
  border: 0!important;
  border-top: .3rem solid var(--darkColor)!important;
  border-left: .3rem solid var(--darkColor)!important;
  opacity: 1!important;
  transform: translateX(.2rem) rotate(-45deg);
}

button.mfp-arrow-right::after,
html body .mfp-wrap button.mfp-arrow-right:is(:hover, :focus, :active)::after {
  transform: translateX(-.2rem) rotate(135deg);
}

@media only screen and (max-width: 767px) {
  button.mfp-arrow {
    top: auto!important;
    bottom: 2rem;
    translate: none;
  }
}

/* hkc-legal – Rechtstexte (Datenschutz, Impressum): Klasse auf jedes Text-Modul
============================================================================== */
.et_pb_text.hkc-legal {
  max-width: 78rem;
  margin-bottom: var(--space-l)!important;
}

.et_pb_text.hkc-legal h2 {
  font-size: calc(2.6rem + 1.0rem * var(--fluid))!important; /* 26 → 36px */
  line-height: 1.05!important;
  margin-bottom: var(--space-s);
}

.et_pb_text.hkc-legal :is(p, li) {
  font-size: var(--fs-body);
  line-height: 1.55;
}

.et_pb_text.hkc-legal ul {
  list-style: disc!important;
  padding: 0 0 1em 2rem!important;
}

.et_pb_text.hkc-legal li {
  padding-bottom: .3em!important;
}

.et_pb_text.hkc-legal a {
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

/*	16 RESPONSIVE
============================================================================== */

/* Tablet */
@media only screen and (max-width: 980px) {

  .hkc-topbar .et_pb_row {
    flex-wrap: wrap;
    justify-content: center;
    padding: .8rem 0!important;
    row-gap: .4rem;
  }

  .hkc-topbar .et_pb_column:last-child,
  .et_pb_row.hkc-topbar > .et_pb_column:last-child {
    display: none; /* Tel./Mail sind im CTA-Band & Footer */
  }

  .et_pb_row.hkc-topbar {
    justify-content: center;
  }

  .hkc-hero .et_pb_row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-l);
  }

  .hkc-hero .et_pb_column:first-child {
    padding-bottom: 0;
  }

  .et_pb_image.hkc-arch img {
    aspect-ratio: 4 / 5;
    max-height: 64rem;
  }

  .et_pb_image.hkc-circle {
    right: 0;
    top: auto;
    bottom: 12%;
  }

  .hkc-bib {
    left: 0;
    top: 2.4rem;
    width: 16rem;
  }

  .hkc-bib__num {
    font-size: 8rem;
  }

  .hkc-bib.hkc-bib--lg {
    margin: var(--space-l) auto 0;
    width: 100%;
  }

  :is(.hz-steps.is-cols ol, ol.hz-steps.is-cols) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
  }

  :is(.hz-checklist.is-compact ul, ul.hz-checklist.is-compact) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hkc-ticker ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem 2rem;
    padding: 2rem var(--gutter)!important;
  }

  .hkc-ticker ul li {
    gap: 2rem;
    font-size: 2rem!important;
  }

  /* Punkte nur zwischen Begriffen in derselben Zeile wirken sauber → mobil weg */
  .hkc-ticker ul li + li::before {
    content: none;
  }

  .hkc-insta #sb_instagram #sbi_images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hkc-brands .et_pb_row,
  .et_pb_row.hkc-brands {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .hkc-gallery-grid .et_pb_text_inner,
  .hkc-gallery-grid .et_pb_code_inner {
    grid-template-columns: 1fr 1fr;
  }

  .hkc-gallery-grid :is(img, figure):first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .et_pb_gallery.hkc-gallery-grid .et_pb_gallery_items {
    grid-template-columns: 1fr 1fr;
  }

  .et_pb_gallery.hkc-gallery-grid .et_pb_gallery_item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .hkc-parcours-line {
    display: none;
  }

  .hkc-polaroids :is(.et_pb_code_inner, .et_pb_text_inner) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* hkc-stack-md – Klasse auf ZEILE: Spalten ab Tablet (≤ 980px) untereinander */
  .et_pb_row.hkc-stack-md {
    flex-direction: column!important;
    align-items: stretch!important;
  }

  .et_pb_row.hkc-stack-md > .et_pb_column {
    width: 100%!important;
    max-width: 100%!important;
    flex: 0 0 auto!important;
    margin-right: 0!important;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {

  /* Polaroids: 2 pro Zeile, letzte ungerade zentriert, weniger Versatz */
  .hkc-polaroids :is(.et_pb_code_inner, .et_pb_text_inner) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-m) var(--space-s);
  }

  .hkc-polaroids figure.hkc-polaroid {
    flex: 0 0 calc(50% - var(--space-s) / 2);
    padding: .8rem .8rem 1.2rem!important;
  }

  .hkc-polaroids figure.hkc-polaroid:nth-child(odd)  { transform: rotate(-2deg); }
  .hkc-polaroids figure.hkc-polaroid:nth-child(even) { transform: rotate(2deg) translateY(1.2rem); }

  .hkc-polaroid :is(figcaption, .et_pb_image_caption, p) {
    font-size: 1.4rem!important;
    padding-top: .8rem!important;
  }

  .hkc-topbar .meta {
    display: none;
  }

  :is(.hz-checklist ul, ul.hz-checklist),
  :is(.hz-checklist.is-compact ul, ul.hz-checklist.is-compact) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.hz-steps ol, ol.hz-steps) > li {
    padding: 2rem 0!important;
  }

  .et_pb_column.hkc-card {
    padding: var(--space-m)!important;
  }

  .et_pb_column.hkc-card > .et_pb_image:first-child {
    margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) var(--space-xs)!important;
  }

  .et_pb_column.hkc-card.hkc-card--media:not(.is-right) {
    padding: 0 var(--space-m) var(--space-m)!important;
  }

  .et_pb_column.hkc-card.hkc-card--media:not(.is-right) > .et_pb_image:first-child {
    position: static!important;
    width: auto!important;
    margin: 0 calc(var(--space-m) * -1) var(--space-xs)!important;
  }

  .et_pb_column.hkc-card.hkc-card--media:not(.is-right) > .et_pb_image:first-child img {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .et_pb_column.hkc-card.hkc-card--media.is-right {
    padding: 0 var(--space-m) var(--space-m)!important;
  }

  .et_pb_column.hkc-card.hkc-card--media.is-right > .et_pb_image:last-child {
    position: static!important;
    order: -1;
    width: auto!important;
    margin: 0 calc(var(--space-m) * -1) var(--space-xs)!important;
  }

  .et_pb_column.hkc-card.hkc-card--media.is-right > .et_pb_image:last-child img {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  ul.hkc-dates > li {
    grid-template-columns: 7.2rem minmax(0, 1fr);
  }

  ul.hkc-dates > li > .hz-more,
  ul.hkc-dates > li > a {
    grid-column: 2;
  }

  .occ-item {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .6rem;
  }

  .occ-masse {
    grid-column: 1;
    grid-row: 2;
  }

  .occ-preis {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .hkc-insta #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hkc-map .et_pb_button_module_wrapper {
    position: static;
    margin-top: var(--space-s)!important;
  }

  .hkc-btns .et_pb_button {
    width: 100%;
    justify-content: center;
  }

  .hkc-btns > .et_pb_module,
  .hkc-btns > .et_pb_button_module_wrapper {
    width: 100%!important;
  }

  .hkc-cta .et_pb_row {
    flex-direction: column;
    align-items: stretch!important;
  }

  .bh_footer .et_pb_column:last-child {
    justify-content: center;
  }

  ul.hz-facts > li,
  .hz-facts ul > li {
    padding: 1.2rem .8rem!important;
  }
}

@media only screen and (max-width: 640px) {
  .bh_footer .et_pb_column {
    flex-direction: column-reverse !important;
    align-items: center;
  }

  .bh_footer .et_pb_column,
  .bh_footer .et_pb_column:last-child {
    justify-content: center;
  }

  .bh_footer .bh_footer_list ul {
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .bh_footer .bh_footer_list ul li {
    margin: 0 1rem;
  }

  .bh_footer .bh_credits :is(p, span) {
    justify-content: center;
    text-align: center;
  }
}


/*	17 REDUCED MOTION
============================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
    scroll-behavior: auto!important;
  }

  .hz-status::before {
    animation: none;
  }
}

/*	18 SHORTCODE-AUSGABEN (inc/hkc-shortcodes.php)
	Ausgabe steht in einem Code-Modul → Typografie hier für .hkc-sc nachgezogen
============================================================================== */
.hkc-sc h2 {
  font-family: var(--ff-title);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-900);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--headingColor);
  padding: 0;
}

.hkc-sc p {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bodyColor);
  padding: 0;
}

.hkc-sc p.quote {
  font-style: italic;
  font-weight: var(--fw-600);
  font-size: var(--fs-quote);
  line-height: 1.35;
  color: var(--greyColor);
}

:is(.hkc-sec-dunkel, .hkc-sec-gruen) .hkc-sc h2 { color: var(--lightColor); }
:is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module .hkc-sc p { color: var(--mutedColor); }
:is(.hkc-sec-dunkel, .hkc-sec-gruen) .et_pb_module .hkc-sc p.quote { color: var(--primaryColor); }

/* [hkc_event] – Countdown (Text | Karte 440px) / Rückblick (Text | 2 Polaroids) */
.hkc-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44rem);
  gap: var(--space-xl);
  align-items: center;
}

.hkc-event--rueckblick {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hkc-event__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.hkc-event .hz-facts {
  max-width: 56rem;
}

.hkc-event__bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  align-items: start;
}

.hkc-event__bilder > .hkc-polaroid { margin: 0; transform: rotate(-3deg); }
.hkc-event__bilder > .hkc-polaroid:nth-child(2) { transform: rotate(3deg) translateY(4rem); }
.hkc-event__bilder img { height: auto; }

/* Rückblick: Polaroids klickbar, Hinweis auf weitere Bilder */
.hkc-event__bilder > a.hkc-polaroid {
  position: relative;
  display: block;
  cursor: zoom-in;
}

.hkc-event__mehr {
  position: absolute;
  right: 2rem;
  bottom: 2.8rem;
  padding: .4rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--darkColor);
  color: var(--lightColor);
  font-size: 1.2rem;
  font-weight: var(--fw-700);
  letter-spacing: .04em;
  pointer-events: none;
}

/* Kleine Startnummer im Hero: Code-Modul darf nicht Bezugsrahmen sein */
.hkc-hero .et_pb_code:has(.hkc-bib:not(.hkc-bib--lg)) {
  position: static;
  margin: 0!important;
}

/* Grosse Karte skaliert mit ihrer eigenen Breite (Container-Einheiten) */
.hkc-bib.hkc-bib--lg {
  container-type: inline-size;
}

.hkc-bib--lg .hkc-bib__units strong {
  font-size: clamp(5.6rem, 24cqi, 16rem);
}

.hkc-bib--lg :is(.hkc-bib__units span, .hkc-bib__head) {
  font-size: clamp(1.2rem, 2.6cqi, 1.8rem);
}

.hkc-bib--lg .hkc-bib__units {
  padding: clamp(2rem, 5cqi, 4rem) 1.6rem clamp(1.2rem, 4cqi, 3.2rem);
}

.hkc-bib--lg .hkc-bib__ics {
  font-size: clamp(1.6rem, 3cqi, 2rem);
  padding-block: clamp(1.4rem, 3.5cqi, 2.4rem);
}

/* Events-Hero: Karte nutzt die ganze Spaltenbreite (Platz für den gelben Schatten links) */
.hkc-hero .hkc-bib.hkc-bib--lg {
  max-width: none;
  width: calc(100% - 1.4rem);
  margin-left: 1.4rem;
}

/* Save the Date (Event mit geheimen Details, vor dem Vorlauf) */
.hkc-bib--std .hkc-bib__std {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 5cqi, 4rem) 1.6rem clamp(.8rem, 2cqi, 1.6rem);
  text-align: center;
}

.hkc-bib--std .hkc-bib__std strong {
  font-family: var(--ff-title);
  font-weight: var(--fw-900);
  font-size: clamp(8rem, 32cqi, 20rem);
  line-height: .85;
  color: var(--darkColor);
}

.hkc-bib--std :is(.hkc-bib__std-tag, .hkc-bib__std-monat) {
  font-size: clamp(1.2rem, 2.8cqi, 1.8rem);
  font-weight: var(--fw-700);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hkc-bib--std .hkc-bib__std-monat {
  margin-top: .8rem;
}

.hkc-bib--std .hkc-bib__text {
  padding: 0 clamp(1.6rem, 5cqi, 3.2rem) clamp(1.6rem, 4cqi, 2.8rem);
  font-size: clamp(1.5rem, 3cqi, 1.8rem);
}

.hkc-bib--std .hkc-bib__text strong {
  font-style: normal;
  font-weight: var(--fw-700);
}

/* Terminliste: geheimer Event dezent markiert */
.hkc-dates li.is-geheim h3::after {
  content: "Save the Date";
  display: inline-block;
  margin-left: 1rem;
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  background: var(--primaryColor);
  color: var(--darkColor);
  font-family: var(--ff-body);
  font-size: 1.2rem;
  font-weight: var(--fw-700);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Grosse Karte «Heute» und Platzhalter */
.hkc-bib--lg .hkc-bib__num {
  font-size: clamp(6.4rem, 24cqi, 16rem);
}

.hkc-bib--leer .hkc-bib__text {
  padding: 3.2rem 2.4rem;
  font-size: 1.8rem;
}

.hkc-dates__leer {
  padding: 2.4rem 0;
  border-top: 2px solid var(--darkColor);
  font-style: italic;
}

ul.hz-facts > li.is-ferien {
  background: rgba(255, 138, 92, .14);
}

ul.hz-facts > li.is-ferien > span:last-child {
  color: var(--darkColor);
  font-weight: var(--fw-600);
}

@media only screen and (max-width: 980px) {
  .hkc-event,
  .hkc-event--rueckblick {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  .hkc-event__bilder > .hkc-polaroid:nth-child(2) {
    transform: rotate(3deg) translateY(2rem);
  }
}