@charset "UTF-8";

/* ==========================================================================
   Landingpage „Ausstellungsküchen" – KüchenWelt Klingeberg
   Eine Datei, mobile-first, gegliedert in nummerierte Abschnitte.

   01  Design-Tokens
   02  Schriften
   03  Reset und Basis
   04  Hilfsklassen
   05  Buttons
   06  Header und Navigation
   07  Hero
   08  Vorteilsleiste
   09  Sektionen und Abschnittsköpfe
   10  Angebotskarten und Slider
   11  Markenkarussell
   12  Vorteilskacheln
   13  FAQ-Akkordeon
   14  Reservierungsformular
   15  Küchenberatungsteam
   16  Küchenstudio
   17  Footer
   18  Social-Media-Symbole
   19  Lightbox-Galerie
   20  Reduzierte Bewegung
   ========================================================================== */


/* ==========================================================================
   01  Design-Tokens
   ========================================================================== */

/*
   Typografie und Footer-Farbe stammen von der Unternehmens-Homepage
   https://www.kuechen-klingeberg.de (abgerufen am 07.09.2026).
   Quellen im Einzelnen:

   - Schriftfamilie   'Open Sans'   /media/custom.css, Zeile 19: `* { font-family: 'Open Sans'; }`
                                    Schnitte lokal eingebunden über /media/fonts.css
                                    (open-sans-v16-latin-*.woff2, Latin-Subset).
                                    Die drei genutzten Schnitte (400/600/700) liegen
                                    unverändert in assets/fonts/.
   - Fließtext        16px / 1.5    Bootstrap 4.3.1 Reboot (/media/bootstrap.min.css):
                                    `body { font-size: 1rem; line-height: 1.5; }`
                                    Die Homepage überschreibt diese Werte nicht.
   - Überschriften    h1 30px       /media/custom.css: `.content .content-headline h1`
                      h2 26px       /media/custom.css: `.content .content-tiny h2`
                      h3 22px       /media/custom.css: `.content .content-tiny h3`
                                    (dort in Gelb gesetzt – hier laut Manifest schwarz)
   - Footer-Hintergrund #424242     /media/custom.css, Zeile 1699: `.footer { background-color: #424242; }`

   Die Überschriftengrößen dieser Landingpage liegen bewusst leicht über den
   Homepage-Werten (siehe --fs-h1/--fs-h2), bleiben aber deutlich unter denen
   der alten Onepage-Version.
*/

:root {
  /* --- Farben (Manifest Abschnitt 3) --- */
  --c-yellow: #F1BD09;
  --c-yellow-dark: #C69B07;
  --c-ink: #191919;
  --c-ink-soft: #5A5A5A;
  --c-white: #FFFFFF;
  --c-grey-50: #F6F6F6;
  --c-grey-100: #F2F2F2;
  --c-border: #E3E3E3;
  --c-footer: #424242;

  /* Senkrechter Markierungsbalken links an den weißen Flächen: an den beiden
     Info-Blöcken der Angebotskarten und am geöffneten FAQ-Eintrag.
     Bewusst heller als --c-footer, das weiterhin die Beschriftungen trägt. */
  --c-rule: #a0a0a0;

  /*
     Fehlerfarbe im Formular. Das Manifest führt bewusst keine weiteren Farben
     ein, deshalb steht hier die Textfarbe. Fehler bleiben trotzdem eindeutig:
     Präfix „Fehler:", Fettung, kräftiger Feldrahmen und aria-invalid.
     Für eine klassische rote Fehlerfarbe genügt es, diese eine Zeile auf
     #B3261E zu ändern.
  */
  --c-error: var(--c-ink);

  /* --- Flächen, die austauschbar bleiben sollen --- */
  --trustbar-bg: var(--c-yellow);   /* Alternative laut Manifest: var(--c-grey-100) */

  /* --- Typografie --- */
  --font-base: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-body: 1rem;                  /* 16px – exakt wie Homepage */
  --lh-body: 1.5;                   /* exakt wie Homepage */
  --fs-h1: clamp(1.9rem, 4.2vw, 2.75rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.15rem);
  --fs-h3: 1.15rem;
  --fs-nav: 1.0625rem;
  --fs-intro: 1.05rem;
  --fs-small: 0.9rem;
  --fs-tiny: 0.8rem;

  /* --- Abstände (Manifest Abschnitt 4) --- */
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-py: clamp(3rem, 6vw, 4.5rem);
  --head-gap: .75rem;               /* Überschrift zu Einleitungstext */

  /* --- Maße --- */
  --container: 1240px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --radius: 6px;
  --radius-s: 4px;

  /* Anzeigebreite der Markenlogos im Karussell. Alle Dateien liegen auf einer
     einheitlichen Bühne von 500 x 150 px, die Höhe ergibt sich also mit 0,3
     daraus – eine Zeile genügt, um den Auftritt größer oder kleiner zu setzen. */
  --marke-breite: 200px;

  /* --- Laufzeitwerte, von main.js gesetzt --- */
  --header-h: 72px;
  --trustbar-h: 120px;   /* Startwert; main.js misst den echten Wert nach */
  --marquee-duration: 36s;
}


/* ==========================================================================
   02  Schriften – Open Sans, lokal, Latin-Subset (Quelle siehe Token-Block)
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-v16-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/open-sans-v16-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans-v16-latin-700.woff2") format("woff2");
}


/* ==========================================================================
   03  Reset und Basis
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

body.is-nav-open {
  overflow: hidden;
}

.willy {
	display: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 700;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.35;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

/* Sichtbarer Fokusring auf allen interaktiven Elementen */
:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
}

.hero :focus-visible,
.site-footer :focus-visible,
.slider__arrow:focus-visible {
  outline-color: var(--c-white);
}


/* ==========================================================================
   04  Hilfsklassen
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background-color: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}

.skip-link:focus {
  top: 0;
}

/* Anker-Sprünge unter der klebenden Kopfleiste */
.section,
.hero,
#main {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}


/* ==========================================================================
   05  Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary {
  background-color: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--c-yellow-dark);
  border-color: var(--c-yellow-dark);
}

/* Helle Outline – für dunkle Flächen wie den Hero */
.btn--ghost {
  background-color: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--c-white);
  color: var(--c-ink);
}

/* Dunkle Outline – für helle Flächen */
.btn--outline {
  background-color: transparent;
  border-color: var(--c-ink);
  color: var(--c-ink);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--c-ink);
  color: var(--c-white);
}

.btn--block {
  width: 100%;
}


/* ==========================================================================
   06  Header und Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--c-white);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.site-header--scrolled {
  border-bottom-color: var(--c-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 78px;
  padding-block: var(--space-3);
}

.site-header__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

/* Das Wortlogo trägt drei Zeilen (KüchenWelt / KLINGEBERG / Bruchhausen-Vilsen),
   deshalb ist die Kopfleiste bewusst höher als eine reine Textnavigation. */
.site-header__logo img {
  width: auto;
  height: 54px;
}

/* --- Burger-Schaltfläche (nur unter 992px sichtbar) --- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .5rem .75rem;
  background-color: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

/* Drei Balken: mittlerer als Element, oberer und unterer als Pseudo-Elemente */
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: var(--c-ink);
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bar {
  top: 6px;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
}

.nav-toggle__bar::before {
  top: -6px;
}

.nav-toggle__bar::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Navigation, mobil als Vollflächen-Overlay --- */

.site-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: var(--space-6) var(--container-pad) var(--space-8);
  background-color: var(--c-white);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  /* visibility schaltet beim Öffnen sofort, beim Schließen erst nach dem
     Hinausgleiten. Sonst greift focus() auf ein noch unsichtbares Element. */
  transition: transform .25s ease, visibility 0s linear .25s;
}

.site-nav--open {
  visibility: visible;
  transform: translateX(0);
  transition: transform .25s ease, visibility 0s linear 0s;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100%;
}

.site-nav__link {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--c-yellow-dark);
}

.site-nav__item--cta {
  margin-top: auto;
  padding-top: var(--space-6);
}

.site-nav__item--cta .btn {
  width: 100%;
}


/* ==========================================================================
   07  Hero
   ========================================================================== */

.hero {
  position: relative;
}

.hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 62vh, 640px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
   Verlauf über dem Foto, damit der weiße Text lesbar bleibt.
   Werte gegen hero.jpg gemessen: Überschrift (Großtext) erreicht mindestens
   3:1, Fließtext und Buttons mindestens 4.5:1 nach WCAG 1.4.3.
   Auf schmalen Displays steht die Caption über die volle Breite, dort trägt
   allein der senkrechte Verlauf – er ist deshalb kräftiger. Ab 768px sitzt sie
   links; dann genügt ein moderater senkrechter Verlauf plus ein Schleier von
   links, und die rechte Bildhälfte bleibt weitgehend unangetastet.
*/
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, .80) 0%,
      rgba(0, 0, 0, .66) 45%,
      rgba(0, 0, 0, .46) 80%,
      rgba(0, 0, 0, .30) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-12);
}

.hero__caption {
  max-width: 640px;
  color: var(--c-white);
}

.hero__title {
  color: var(--c-white);
}

.hero__text {
  margin-top: var(--space-4);
  font-size: var(--fs-intro);
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__actions .btn {
  width: 100%;
}


/* ==========================================================================
   08  Vorteilsleiste
   Unter 560px normaler Block unter dem Hero, darüber zur Hälfte überlappend.
   ========================================================================== */

.trustbar {
  position: relative;
  z-index: 2;
}

.trustbar__container {
  padding-inline: 0;
}

.trustbar__list {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--trustbar-bg);
  color: var(--c-ink);
}

.trustbar__item {
  padding: var(--space-4) var(--container-pad);
  border-top: 1px solid rgba(0, 0, 0, .15);
}

.trustbar__item:first-child {
  border-top: 0;
}

.trustbar__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.trustbar__text {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-small);
  line-height: 1.45;
}


/* ==========================================================================
   09  Sektionen und Abschnittsköpfe
   ========================================================================== */

.section {
  padding-block: var(--section-py);
}

.section--white {
  background-color: var(--c-white);
}

.section--grey {
  background-color: var(--c-grey-50);
}

.section--yellow {
  background-color: var(--c-yellow);
}

/* Auf Gelb erreicht --c-ink-soft nur 4.0:1 – der Einleitungstext steht dort
   deshalb in der vollen Textfarbe (10.3:1). */
.section--yellow .section__intro {
  color: var(--c-ink);
}

.section__head {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}

.section__intro {
  max-width: 68ch;
  margin-top: var(--head-gap);
  margin-inline: auto;
  color: var(--c-ink-soft);
  font-size: var(--fs-intro);
  line-height: 1.55;
}


/* ==========================================================================
   10  Angebotskarten und Slider
   ========================================================================== */

.offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.offer {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Textbereich in demselben Grau wie die Kacheln unter „Warum Klingeberg" */
.offer__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) var(--space-6);
  background-color: var(--c-grey-100);
}

.offer__badge {
  align-self: flex-start;
  padding: .18rem .55rem;
  border-radius: 3px;
  background-color: var(--c-yellow);
  color: var(--c-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.offer__title {
  margin-top: var(--space-3);
  /* zwei Zeilen reservieren, damit die Karten einer Reihe gleich hoch bleiben */
  min-height: calc(2 * 1.35 * var(--fs-h3));
}

/* --- Preisblock --- */

.offer__price {
  margin-top: var(--space-4);
}

.offer__rrp {
  color: var(--c-ink-soft);
  font-size: .95rem;
}

.offer__price s {
  text-decoration-thickness: 1px;
}

.offer__now {
  margin-top: .1rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Eigene Zeile, damit der Block bei jeder Textlänge gleich aussieht
   und nichts aus der Karte läuft. */
.offer__save {
  display: inline-block;
  margin-top: var(--space-4);
  padding: .15rem .5rem;
  border-radius: 3px;
  background-color: var(--c-yellow);
  color: var(--c-ink);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Zwei Info-Blöcke, auf jeder Breite nebeneinander --- */

.offer__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
}

.fact {
  padding: .6rem .7rem;
  border-left: 3px solid var(--c-rule);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background-color: var(--c-white);
  /* Keine automatische Silbentrennung: sie zerlegt sonst Markennamen
     („BER-BEL", „Ho-meyer"). Umbrochen wird an Leerzeichen und vorhandenen
     Bindestrichen, break-word bleibt als Notbremse für sehr lange Wörter. */
  overflow-wrap: break-word;
  hyphens: manual;
}

.fact__label {
  color: var(--c-footer);
  font-size: var(--fs-tiny);
  font-weight: 600;
  line-height: 1.3;
}

.fact__value {
  margin: .2rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* --- Aktionen --- */

.offer__actions {
  margin-top: auto;
  padding-top: var(--space-6);
  text-align: center;
}

.offer__call {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  font-weight: 600;
}

.offer__call:hover {
  color: var(--c-ink);
}

/* --- Slider --- */

.slider {
  position: relative;
}

/* Jedes Slider-Bild öffnet die Lightbox. main.js hält immer nur die
   sichtbare Schaltfläche im Tabfluss. */
.slider__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.slider__viewport {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--c-grey-100);
}

.slider__track {
  display: flex;
  height: 100%;
  transition: transform .45s ease;
}

.slider__slide {
  flex: 0 0 100%;
  height: 100%;
}

.slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: background-color .18s ease;
}

.slider__arrow:hover {
  background-color: var(--c-white);
}

/* Pfeilspitze rein per CSS gezeichnet – keine Icon-Font, kein Bild */
.slider__arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
}

.slider__arrow--prev {
  left: var(--space-3);
}

.slider__arrow--prev::before {
  margin-left: 3px;
  transform: rotate(135deg);
}

.slider__arrow--next {
  right: var(--space-3);
}

.slider__arrow--next::before {
  margin-right: 3px;
  transform: rotate(-45deg);
}

.slider__counter {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: .15rem .5rem;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, .6);
  color: var(--c-white);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   11  Markenkarussell
   Das Logo-Set liegt zweimal im Markup, deshalb ist -50% ein nahtloser Umlauf.
   Der Abstand steckt bewusst in margin-right der Elemente (nicht in gap),
   damit beide Hälften exakt gleich breit sind.
   ========================================================================== */

.marquee {
  overflow: hidden;
  padding-block: var(--space-2);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-right: var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  background-color: var(--c-white);
}

.marquee__item img {
  width: var(--marke-breite);
  height: auto;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* ==========================================================================
   12  Vorteilskacheln („Warum Klingeberg")
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.tile {
  padding: var(--space-6);
  border-top: 3px solid var(--c-yellow);
  border-radius: var(--radius);
  background-color: var(--c-grey-100);
}

.tile__title {
  font-size: 1.1rem;
}

.tile__text {
  margin-top: var(--space-2);
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}


/* ==========================================================================
   13  FAQ-Akkordeon
   ========================================================================== */

.accordion {
  max-width: 820px;
  margin-inline: auto;
}

.accordion__item {
  margin-bottom: 8px;
  border: 1px solid var(--c-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background-color: var(--c-white);
  overflow: hidden;
  transition: background-color .2s ease, border-color .2s ease;
}

/* Ein gelber Balken würde vor der gelben Sektionsfläche verschwinden,
   deshalb markiert der graue Balken den geöffneten Eintrag. */
.accordion__item--open {
  border-left-color: var(--c-rule);
  background-color: var(--c-grey-50);
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background-color: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.accordion__label {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
}

/* Zustandsanzeige als reines CSS-Plus, das sich zum Minus verkürzt */
.accordion__marker {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.accordion__marker::before,
.accordion__marker::after {
  content: "";
  position: absolute;
  background-color: var(--c-ink);
  transition: transform .22s ease, opacity .22s ease;
}

.accordion__marker::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}

.accordion__marker::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}

.accordion__trigger[aria-expanded="true"] .accordion__marker::after {
  opacity: 0;
  transform: scaleY(0);
}

.accordion__panel {
  height: 0;
  overflow: hidden;
  transition: height .28s ease;
}

.accordion__panel[hidden] {
  display: none;
}

.accordion__body {
  padding: 0 var(--space-6) var(--space-4);
  color: var(--c-ink-soft);
  line-height: 1.55;
}


/* ==========================================================================
   14  Reservierungsformular
   ========================================================================== */

.form {
  max-width: 720px;
  margin-inline: auto;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.form__field {
  display: flex;
  flex-direction: column;
}

.form__label {
  margin-bottom: .3rem;
  font-size: var(--fs-small);
  font-weight: 600;
}

.form__req {
  color: var(--c-ink-soft);
  text-decoration: none;
}

.form__input {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  background-color: var(--c-white);
  color: var(--c-ink);
  font: inherit;
}

.form__input:hover {
  border-color: var(--c-ink-soft);
}

.form__select {
  /* eigener Pfeil, damit die Auswahl auf allen Systemen gleich aussieht */
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - .85rem) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form__textarea {
  resize: vertical;
}

.form__input[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--c-error);
}

.form__error {
  margin-top: .25rem;
  color: var(--c-error);
  font-size: var(--fs-small);
  font-weight: 700;
}

.form__error:empty {
  display: none;
}

.form__field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem var(--space-3);
  margin-top: var(--space-6);
}

.form__check {
  width: 20px;
  height: 20px;
  margin: .15rem 0 0;
  accent-color: var(--c-yellow);
}

.form__label--check {
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.5;
}

.form__field--check .form__error {
  grid-column: 1 / -1;
}

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet,
   aber nicht display:none – sonst füllen manche Bots das Feld nicht. */
.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__submit {
  margin-top: var(--space-6);
}

.form__status {
  margin-top: var(--space-4);
  font-weight: 600;
  text-align: center;
}

.form__status:empty {
  display: none;
}

.form__status--ok {
  padding: var(--space-4);
  border-left: 3px solid var(--c-yellow);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background-color: var(--c-grey-100);
  text-align: left;
}


/* ==========================================================================
   15  Küchenberatungsteam
   ========================================================================== */

.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.team__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
}

.team__lead {
  margin-top: var(--head-gap);
  color: var(--c-ink-soft);
  font-size: var(--fs-intro);
  line-height: 1.55;
}

.team__quote {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--c-yellow);
  font-size: 1.1rem;
  line-height: 1.5;
}

.team__person {
  margin-top: var(--space-6);
}

.team__name {
  display: block;
  font-size: 1.0625rem;
}

.team__role {
  display: block;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}


/* ==========================================================================
   16  Küchenstudio
   ========================================================================== */

.studio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.studio__title {
  margin-bottom: var(--space-3);
}

.studio__text {
  color: var(--c-ink-soft);
  line-height: 1.6;
}

.studio__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* ==========================================================================
   17  Footer – Hintergrundfarbe 1:1 von kuechen-klingeberg.de
   ========================================================================== */

.site-footer {
  padding-block: var(--section-py) var(--space-8);
  background-color: var(--c-footer);
  color: var(--c-white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* Das Logo trägt dunkle Schrift, teilweise über der gelben Raute. Auf dem
   dunklen Footer steht es deshalb auf einer weißen Kachel – wie die
   Markenlogos im Karussell – statt in einer aufgehellten Fassung. */
.site-footer__logo {
  display: block;
  width: auto;
  height: 104px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background-color: var(--c-white);
}

.site-footer__title {
  margin-bottom: var(--space-3);
  font-size: 1.0625rem;
  color: var(--c-white);
}

.site-footer__text {
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-small);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: var(--c-yellow);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.site-footer__copy {
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-tiny);
}


/* ==========================================================================
   Breakpoint 480px
   ========================================================================== */

@media (min-width: 480px) {

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    width: auto;
    min-width: 220px;
  }

  /* Vorteilsleiste ab hier zweispaltig */
  .trustbar__list {
    grid-template-columns: 1fr 1fr;
  }

  .trustbar__item {
    border-left: 1px solid rgba(0, 0, 0, .15);
  }

  .trustbar__item:nth-child(-n+2) {
    border-top: 0;
  }

  .trustbar__item:nth-child(odd) {
    border-left: 0;
  }

  .studio__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   Breakpoint 560px – ab hier überlappt die Vorteilsleiste den Hero
   ========================================================================== */

@media (min-width: 560px) {

  .trustbar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(50%);
  }

  .trustbar__container {
    padding-inline: var(--container-pad);
  }

  .trustbar__list {
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  }

  .trustbar__item {
    padding: var(--space-4) var(--space-6);
  }

  /* Platz für die Hälfte der Leiste, die in diese Sektion hineinragt */
  .section--below-trustbar {
    padding-top: calc(var(--space-16) + var(--trustbar-h) / 2);
  }

  /* Caption hält Abstand zur überlappenden Leiste */
  .hero__inner {
    padding-bottom: calc(var(--space-12) + var(--trustbar-h) / 2);
  }
}


/* ==========================================================================
   Breakpoint 768px
   ========================================================================== */

@media (min-width: 768px) {

  .hero__media::after {
    background-image:
      linear-gradient(to right,
        rgba(0, 0, 0, .38) 0%,
        rgba(0, 0, 0, .30) 40%,
        rgba(0, 0, 0, 0) 78%),
      linear-gradient(to top,
        rgba(0, 0, 0, .74) 0%,
        rgba(0, 0, 0, .56) 45%,
        rgba(0, 0, 0, .34) 80%,
        rgba(0, 0, 0, .18) 100%);
  }

  .site-header__inner {
    min-height: 88px;
  }

  .site-header__logo img {
    height: 64px;
  }

  .offers {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer__body {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }

  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .form__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-6);
  }

  .form__field--full {
    grid-column: 1 / -1;
  }

  .studio {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   Breakpoint 992px – Desktop-Navigation, vierspaltige Vorteilsleiste
   ========================================================================== */

@media (min-width: 992px) {

  .site-header__inner {
    min-height: 96px;
  }

  .site-header__logo img {
    height: 72px;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    padding: 0;
    background-color: transparent;
    overflow: visible;
    visibility: visible;
    transform: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    min-height: 0;
  }

  .site-nav__link {
    padding: 0;
    border-bottom: 0;
    font-size: var(--fs-nav);
  }

  /* Im Desktop-Menü stehen die Symbole nicht – dort führt der Footer sie. */
  .site-nav__item--social {
    display: none;
  }

  .site-nav__item--cta {
    margin-top: 0;
    padding-top: 0;
  }

  .site-nav__item--cta .btn {
    width: auto;
    min-height: 44px;
    padding-block: .55rem;
  }

  /* Das Teamfoto ist 1200 x 820 px. Zweispaltig erst ab hier, sonst bliebe
     die Bildspalte zu schmal und neben dem Text stünde viel Leerraum. */
  .team {
    grid-template-columns: 1fr 1fr;
  }

  .trustbar__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .trustbar__item:nth-child(-n+4) {
    border-top: 0;
  }

  .trustbar__item:nth-child(4n+1) {
    border-left: 0;
  }

  .trustbar__item:nth-child(odd) {
    border-left: 1px solid rgba(0, 0, 0, .15);
  }

  .trustbar__item:first-child {
    border-left: 0;
  }

}


/* ==========================================================================
   Breakpoint 1200px – drei Angebotskarten, vier Vorteilskacheln
   ========================================================================== */

@media (min-width: 1200px) {

  .offers {
    grid-template-columns: repeat(3, 1fr);
  }

  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   18  Social-Media-Symbole
   Facebook, Instagram und WhatsApp als Inline-SVG – keine Icon-Font.
   Im mobilen Menü unter dem letzten Menüpunkt, im Footer ab 768px rechts
   in der Copyright-Leiste.
   ========================================================================== */

.social {
  display: flex;
  gap: var(--space-3);
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.social__icon {
  width: 22px;
  height: 22px;
}

/* Der Name bleibt für Screenreader lesbar, sichtbar ist nur das Symbol. */
.social__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-nav__item--social {
  padding-top: var(--space-4);
}

.social--nav .social__link {
  border: 1px solid var(--c-border);
  color: var(--c-ink);
}

.social--nav .social__link:hover {
  border-color: var(--c-yellow);
  background-color: var(--c-yellow);
}

.social--footer .social__link {
  color: rgba(255, 255, 255, .88);
}

.social--footer .social__link:hover {
  background-color: rgba(255, 255, 255, .14);
  color: var(--c-yellow);
}

/* Unter 768px steckt derselbe Block bereits im Burger-Menü, im Footer
   erscheint er erst ab Tablet. Die Umschaltung steht bewusst hier und nicht
   im 768er-Sammelblock weiter oben – der käme in der Datei vorher und würde
   von der Basisregel wieder überschrieben. */
.site-footer__bar .social {
  display: none;
}

@media (min-width: 768px) {

  .site-footer__bar .social {
    display: flex;
  }
}


/* ==========================================================================
   19  Lightbox-Galerie
   Wird von main.js einmalig erzeugt und je Angebotskarte neu befüllt.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .92);
  opacity: 0;
  transition: opacity .2s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox--visible {
  opacity: 1;
}

.lightbox__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  height: 100%;
  padding: var(--space-16) var(--space-4) var(--space-8);
}

.lightbox__stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__counter {
  color: var(--c-white);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* --- Schaltflächen: Pfeile und Kreuz rein per CSS gezeichnet --- */

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: background-color .18s ease;
}

.lightbox__close:hover,
.lightbox__arrow:hover {
  background-color: rgba(255, 255, 255, .32);
}

.lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: var(--c-white);
}

.lightbox__close::before {
  transform: rotate(45deg);
}

.lightbox__close::after {
  transform: rotate(-45deg);
}

.lightbox__arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
}

.lightbox__arrow--prev {
  left: var(--space-4);
}

.lightbox__arrow--prev::before {
  margin-left: 4px;
  transform: rotate(135deg);
}

.lightbox__arrow--next {
  right: var(--space-4);
}

.lightbox__arrow--next::before {
  margin-right: 4px;
  transform: rotate(-45deg);
}

.lightbox__arrow {
  top: 50%;
  margin-top: -24px;
}

.lightbox :focus-visible {
  outline-color: var(--c-white);
}

body.is-lightbox-open {
  overflow: hidden;
}

/* Ab Tablet Platz schaffen, damit die Pfeile neben dem Bild stehen */
@media (min-width: 768px) {

  .lightbox__dialog {
    padding-inline: calc(var(--space-8) + 48px);
  }
}


/* ==========================================================================
   20  Reduzierte Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }

  .slider__track,
  .accordion__panel,
  .site-nav,
  .lightbox {
    transition: none;
  }

  /* Logo-Reihe statt Endlosband: Duplikat aus, Umbruch an */
  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }

  .marquee__item {
    margin: 0 var(--space-3) var(--space-3) 0;
  }

  .marquee__item--clone {
    display: none;
  }
}