/*
:root{
  --gold: #b5905b;
  --dark: #282828;
  --light: #ffffff;
  --text: #dddddd;
  --font-serif: 'Cinzel', serif;
  --font-sans: 'Roboto', sans-serif;
  --textprodukt: #b5905b;
}
*/
.anchor-target:target{ 
animation: none; 
}

/* ===== Header-Höhe global definieren + sanft scrollen ===== */
:root{ --header-h: 100px; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
.page{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

[id]:target{ animation: anchor-flash 900ms ease-out both; }

@keyframes anchor-flash{
  0%{
    background-color: var(--farbe6);
    box-shadow: 0 0 0 0 rgba(255,210,0,.6);
  }
  60%{
    background-color: var(--farbe7);
    box-shadow: 0 0 0 6px rgba(255,210,0,.25);
  }
  100%{
    background-color: transparent;
    box-shadow: none;
  }
}  /* ← diese schließende Klammer hat gefehlt! */

/* Datei: css-default/fadein.css */
.fade-in-on-scroll{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-on-scroll.visible{
  opacity: 1;
  transform: translateY(0);
}



/* === Basis === */
*{
  margin: 0;
/*  padding: 0; 04-10-2025 wegen Formular*/
  box-sizing: border-box;
}
body.start{
  background:var(--farbe3);
  font-family: var(--font-sans);
  background-color: var(--farbe5);
  color: var(--farbe2);
  line-height: 1.6;
}

/* === Hintergrundbereich === */
.background-start{
  position: relative;
  height: 91vh;
  overflow: hidden;
}
.responsive-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

/* Robustheit: Transform-Hooks mit */
.Logo1{
  position: absolute; 
  top: 45%;
  bottom: 2rem;
  max-width: 100%;
  left: 50%; 
  transform: translate(-50%, -50%) translate(var(--logo-dx, 0px), var(--logo-dy, 0px))
             scale(var(--logo-scale, 1)) rotateX(calc(8deg * var(--suck-p, 0)));
  transform-origin: center center;
  will-change: transform, opacity, filter;
  z-index: 1002;
}

.slogan{
  font-size: 6rem;
  position: absolute; 
  left: 50%;
  transform: translateX(-50%) translate(var(--slogan-dx, 0px), var(--slogan-dy, 0px))
             scale(var(--slogan-scale,1)) scaleX(var(--slogan-scaleX,1))
             skewX(calc(-4deg * var(--suck-p,0)));
  top: calc(50% + (clamp(270px, 18vw, 320px) * .62) + clamp(6px, 1.2vw, 18px));
  z-index: 1002;
  /*font-family: "Herr Von Muellerhoff", cursive; */
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  /*font-size: clamp(28px, 4.0vw, 72px);*/ 
  line-height: 1.05;
  color: var(--farbe2); 
  text-shadow: 1px 1px 5px var(--farbe5); 
  white-space: nowrap;
  background: transparent; 
  border: 0; 
  overflow: visible;
  will-change: transform, opacity, filter, letter-spacing;
}

@media (max-width: 600px){
  .Logo1{
    max-width: 80%;
  }

  .slogan{
    font-size: 4rem;
  }
}

/* Scrollschwelle etwas später */
:root{ --logo-ready-threshold: 300; } /* px Wert für logo einblenden*/



@media (min-width: 600px){
  .produkte-start .produkt-grid{ grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 1024px){
  .produkte-start .produkt-grid{ grid-template-columns: repeat(3, 1fr); }
}




/* === Overlay Startseite == */

/*


.Logo1{
  position: absolute;
  top: 50%;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  z-index: 2;
}
*/

/* === Section Titel === */
.section-title{
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2rem;
  margin: 3rem 0 1rem;
  color: var(--farbe1);
}

/* Aktiviert durch Hover oder Klick */
/*.produkt-start:hover .produkt-inner,*/
/*.produkt-start.show-overlay .produkt-inner{*/
/* transform: translateY(-100%);*/
/*} Text wird sichtbar beim Swipe */

.produkt-start:hover p,
.produkt-start.show-overlay p{
  opacity: 1;
  /*transform: translateY(0);*/
}
.produkt-start:hover img,
.produkt-start:hover h3,
.produkt-start.show-overlay img,
.produkt-start.show-overlay h3{
  opacity: 0;
}
/* === Produkt-Titel Hover Effekte === */
.produkt-start h3,
.PHead1, .PHead2, .PHead3{
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.41rem;
  color: var(--farbe1);
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.produkt-start h3::after,
.PHead1::after, .PHead2::after, .PHead3::after{
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: var(--farbe1);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
/*
.produkt-grid{
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding: 2rem 1rem;
}

.produkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
*/

/* === Produkte: zentriertes Grid mit großzügigem Seitenabstand (nur .produkt-grid) === */
.produkte-start{
  /* border-top: 0.5rem solid var(--farbe3); /* antelle Rahmen komplett /wieder Entfernt am 06.12.2025*/
  padding-inline: clamp(16px, 6vw, 72px);
  padding-block: clamp(16px, 4vw, 48px);
}

.produkt-grid{
  max-width: clamp(660px, 60vw, 1320px); 
  /* max-width: clamp(960px, 78vw, 1320px);   /* begrenzt & zentriert */
  margin-inline: auto;                      /* ZENTRIERUNG */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
}

/* Optional: Karten-Optik */
.produkt-grid .produkt{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}

/* Sehr große Screens */
@media (min-width:1600px){
  .produkte-start{ padding-inline: max(72px, 10vw); }
  .produkt-grid{ max-width: 1024px; }
}



/* ==== Produktkacheln mit Wrapper (.produkt-pikto) — 07.10.2025 ==== */

/* Kachel-Grundlayout */
.produkte-start{
  padding: .5rem;
  background-color: var(--farbe5);
}

.produkt-start{
  position: relative;
  background: var(--farbe5);
  color: var(--farbe4);
  height: 19rem;                         /* vorhandene Höhe beibehalten */
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  cursor: pointer;
  overflow: hidden;
  transition: none;                       /* Parent NICHT animieren */
  contain: layout paint size;             /* ruckelfrei bei Hover */
  will-change: transform;
}

/* Inhalt: Grid – Reihenfolge: Pikto (1) → h3 (2) → Text/Button (3) */
.produkt-inner{
  display: grid;
  grid-template-rows: 1fr auto auto;     /* Pikto | h3 | Text/Button */
  align-items: center;
  justify-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  height: 100%;
  padding-top: 1rem;
  box-sizing: border-box;
  min-width: 0;                           /* FF darf schrumpfen */
  text-align: center;

  /* Anti-Flicker: das ist die bewegte Ebene */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .60s ease;
}

/* 1) PIKTO – Bühne mit fester Proportion, niemals verzerren */
.produkt-pikto{
  min-height: 12rem; /* 21.10.2025 ergänzt */
  min-width: 12rem; /*21.10.2025 ergänzt */
  grid-row: 1;                            /* oben */
  width: clamp(120px, 60%, 220px);        /* gesteuerte Größe je Kachel */
  aspect-ratio: 1 / 1;                    /* reservierter Platz → kein Shift */
  display: grid;
  place-items: center;                     /* Bild perfekt zentriert */
  padding: clamp(8px, 1.8vw, 14px);
  background: var(--farbe2);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);

  /* Anti-Flicker */
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.produkt-pikto > img{
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  image-rendering: auto;
  -webkit-user-drag: none;
}

/* 2) Titel unter dem Pikto */
.produkt-inner h3{
  grid-row: 2;
  margin: .25rem 0 0;
  font-family: var(--font-serif);
  overflow-wrap: anywhere;
  width:200px; /*04.11.2025 wegen Textänderung */
  will-change: opacity, transform;
  transform: translateZ(0);
  transition: opacity .60s ease, transform .60s ease;
}

/* 3) Beschreibung + Button (starten versteckt, erscheinen beim Hover) */
.produkt-inner > p{
  grid-row: 3;
  opacity: 0;
  transition: opacity .60s ease, transform .60s ease;
  color: var(--farbe2);
  max-height: 280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translate(0px, 10px) translateZ(0);
}

.KachelText {
  color: var(--farbe8);
}

.text-button-wrapper {
  display: flex;              /* Flexbox aktivieren */
  flex-direction: column;     /* Text über Button */
  justify-content: center;    /* vertikal zentrieren innerhalb Container */
  align-items: center;        /* horizontal zentrieren */
  text-align: center;         /* Text mittig */
  gap: 0.8rem;                /* Abstand zwischen Text und Button */
  height: 100%;               /* volle Höhe der Grid-Zelle */
  padding: 0 2.5rem;            /* Abstand links/rechts */
  box-sizing: border-box;
}

.produkt-button p{
  grid-row: 3;
  display: inline-block;
  margin-top: 1rem;
  padding: .8rem 1.5rem;
  background-color: var(--farbe1);
  color: var(--farbe4);
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-family: var(--font-sans);
  opacity: 0;
  /*transform: translateY(100%);*/
  transition: opacity .60s ease, transform .60s ease;
  transition-delay: .10s;                 /* mini-Stagger */
  will-change: opacity, transform;
}

/* === Hover-/Overlay-Verhalten ======================================= */

/* Ein Zustand für beide Welten: :hover ODER .is-open (per JS) */
.produkt-start:hover .produkt-inner,
.produkt-start.is-open .produkt-inner{
  transform: translate3d(0, -90%, 0);
  transition: transform .60s ease;
}

.produkt-start:hover .produkt-pikto,
.produkt-start.is-open .produkt-pikto,
.produkt-start:hover .produkt-inner h3,
.produkt-start.is-open .produkt-inner h3{
  opacity: 0;
  transition: opacity .60s ease;
}

.produkt-start:hover .produkt-inner > p,
.produkt-start.is-open .produkt-inner > p,
.produkt-start:hover .produkt-button p,
.produkt-start.is-open .produkt-button p{
  opacity: 1;
  /*transform: translateY(0);*/
  transition: opacity .60s ease, transform .60s ease;
}

/* WICHTIG: KEIN pauschales transition:none mehr auf Touch! 
   Falls es das noch gibt, raus damit: 
   @media (hover:none){ .produkt-inner{ transition:none } }  <-- LÖSCHEN */



.hovering.hover-left::after{
  width: 100%;
  left: 0%;
  transform: none;
}
.hovering.hover-right::after{
  width: 100%;
  left: auto;
  right: 0;
  transform: none;
}
.exiting::after{
  width: 0%;
  transition: width 0.3s ease-out;
}



@media (max-width: 768px) {
  .text-button-wrapper {
    justify-content: center;    /* vertikal zentrieren innerhalb Container */
    align-items: center;        /* horizontal zentrieren */
    text-align: center;         /* Text mittig */
    padding: 0 2rem;
    gap: 0.6rem;
    padding-top: 1rem;
  }
}








/* === Über Uns === 
.ueber-uns{
  padding: 2rem 5%;
  background-color: var(--farbe3);
  text-align: center;
}
.ueber-uns p{
  max-width: 600px;
  margin: auto;
  margin-bottom: 1rem;
}
.ueber-uns-bild{
  width: 100%;
  max-width: 500px;
  margin: 1rem auto;
  display: block;
  border-radius: 8px;
}

*/
  
.headerStart{
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
  /*section.background-start .slogan{
    font-size: 3.5rem;
    top: 35%; 
  }*/
  .GBWabe{
    top: 65%;
    width: 220px;
  }




/* ====== Grundstruktur Shop-Dual-Sektion */
.shop-dual-section {
  padding: 4rem 1rem;
  background-color: #000;
}

.shop-dual-section .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 600px){
  .shop-dual-section .container{
    width: 90%;
  }

  .shop-dual-section .overlay{
    width: 90%;
    padding: 0rem;
    padding-left: 0rem;
  }
}

/* Einzelne Blöcke */
.shop-dual-section .shop-block {
  position: relative;
  flex: 1 1 45%;
  min-height: 450px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* Text unten orientiert*/
  display: flex;
  align-items: flex-end;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hintergrundbilder + Zoom-Animation */
.shop-dual-section .shop-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  z-index: 1;
}

.shop-dual-section .shop-block.business::before {
  background-image: url('/bilder-default/business-bg.jpg');
}

.shop-dual-section .shop-block.retail::before {
  background-image: url('/bilder-default/retail-bg.jpg');
}

/* Hover Zoom */
.shop-dual-section .shop-block:hover::before {
  transform: scale(1.1);
}

/* Overlay für Text + Button */
.shop-dual-section .shop-block .overlay {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.45);
  padding: 2rem;
  border-radius: 0 0 12px 12px;
  width: 100%;
  box-sizing: border-box;
  

  /* immer sichtbar */
  transform: translateY(0);
  opacity: 1;

  transition: transform 0.3s ease, background 0.3s ease;
}


/* Overlay sichtbar bei Hover */
.shop-dual-section .shop-block:hover .overlay {
  transform: translateY(0);
  opacity: 1;
}

/* Texte */
.shop-dual-section .shop-block h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--farbe1);
}

.shop-dual-section .shop-block p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--farbe8);
}

.shop-dual-section .shop-block:hover .overlay {
  transform: translateY(-6px);
  background: rgba(0,0,0,0.55);
}

/* Button */
.shop-dual-section .shop-block .button {
  display: inline-block;
  background-color: transparent;
  font-size: 1rem;
  border: 2px solid var(--farbe1);
  color: var(--farbe1);
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.shop-dual-section .shop-block .button:hover {
  background-color: var(--farbe1);
  color: #000;
}

.buttonKachel {
  display: inline-block;
  background-color: transparent;
  font-size: 1rem;
  border: 2px solid var(--farbe1);
  color: var(--farbe1);
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 0 20px var(--farbe1);
}

.buttonKachel:hover {
  background-color: var(--farbe1);
  color: #000;
  box-shadow: 0 0 20px transparent;
}


/* Responsive */
@media(max-width: 768px){
  .shop-dual-section .container {
    flex-direction: column;
  }
  .shop-dual-section .shop-block {
    flex: 1 1 100%;
  }
}









/* === Shop-Werbung Grid Layout (2025-09-24) === */

/* === Shop-Werbung (final, Flex-Layout) =================================== */
.shop-werbung{
  /*border-top: 0.5rem solid var(--farbe3); antelle Rahmen komplett, am 04.11.2025 ausgeblendet*/
  /*deaktiviert wegen 24.10.2025 display: flex;                    /* Button links, Icons rechts */
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 24px);
  width: 100%;
}

/* Der Button steckt im letzten .shop-icon in deinem HTML → links vorziehen */
.shop-werbung .shop-icon:last-child{
  order: 0;
  margin-left: auto;   /* schiebt nur den Button ganz nach rechts */
  margin-right: 10rem; /* geändert am 21.10.2025 */
}

/* Das allererste Icon (Geschenk.png im DOM) bekommt auto-Margin → schiebt alle Icons nach rechts */
.shop-werbung .shop-icon:nth-child(1){
  /* margin-left: 0;                /* Freiraum zwischen Button und Icons */
  margin-left: 10rem; /* geändert am 21.10.2025 */
}

/* PNGs verkleinern */
.shop-werbung .shop-icon img{
  height: clamp(38px, 4vw, 54px);
  width: auto;
  display: block;
  opacity: .95;
}

/* Button deutlich größer als die Icons */
.shop-werbung .shop-now{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(40px, 5vw, 56px);       /* > Icon-Höhe */
  padding: .6rem 1.2rem;
  font-size: clamp(2rem, 1.1vw, 1.125rem);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--farbe1) 0%, var(--farbe2) 100%);
  color: var(--farbe8);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.shop-werbung .shop-now:hover{
  transform: translateY(-1px);
  background-color: var(--farbe1, #b5905b);
  color: #111;
}

.shop-now:hover {
  background: linear-gradient(135deg, #e0b95d 0%, var(--farbe1) 100%);
  transform: translateY(-3px) scale(1.05);
}

/* Mobil: zentriert stapeln, Ordnung zurücksetzen (optional) */
@media (max-width: 768px){
  .shop-werbung{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .shop-werbung .shop-icon:last-child{ order: 0; }  /* Button zurück zur DOM-Position */
  .shop-werbung .shop-icon:nth-child(1){ margin-left: 0; }
}




/* === GB Landingpage Overrides (2025-09-17 – Suck v1.6 + Products Reset) === */




/* =========================================================
   Anfrage / Produktbeispiel — bereinigt & strukturiert
   Bereiche:
   1) Container & Karte
   2) Modal
   3) Bild+Overlay (anfrage-bild)
   4) Textspalte & Button
   ========================================================= */

/* 1) Container & Karte -----------------------------------*/
.produkte-anfrage{
  /*border-top: 0.5rem solid var(--farbe3); /* antelle Rahmen komplett /wieder entfernt am 06.12.2025*/
  /*border-bottom: 0.5rem solid var(--farbe3); /* antelle Rahmen komplett /wieder entfernt am 06.12.2025*/
  padding: 1rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.produkt-start1{
  background-color: var(--farbe10);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Inneres Layout (z. B. Bild links, Text rechts) */
.anfrage-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* 2) Modal (Produktbeispiel) -----------------------------*/
.modal{
  display: none;                 /* via .open anzeigen */
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--farbe3);
  justify-content: center;
  align-items: center;
  flex-direction: column;        /* Bild + Caption untereinander */
  padding: clamp(12px, 3vw, 28px);
}
.modal.open{ display: flex; }

.modal-content{
  display: block;
  max-width: 90vw;
  max-height: min(80vh, 80svh);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
  margin: 0;
}

.modal .caption{
  margin-top: 1rem;
  font-size: 1.1rem;
  color: var(--farbe8);
  text-align: center;
  max-width: 90vw;
}

.modal .close{
  position: absolute;
  top: 20px; right: 30px;
  color: var(--farbe8);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

/* 3) Bild & Overlay (deckungsgleich, klickfreundlich) ----*/
/* Container: Bild & Overlay teilen sich die gleiche Fläche */
.anfrage-bild{
  display: grid;
  grid-template-rows: 1fr auto;  /* 1: Bild/Overlay, 2: Titel */
  justify-items: center;
  align-items: center;
  position: relative;
  text-align: center;
  min-height: 320px;             /* ggf. anpassen */
  padding: 1rem;
  cursor: pointer;               /* signalisiert Klick */
  overflow: hidden;
}

/* Bild bestimmt den Platz */
.anfrage-bild > img{
  background-color: var(--farbe2);
  border-radius: 12px;
  grid-area: 1 / 1;
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  z-index: 0;
  transition: opacity .4s ease, transform .4s ease;
}

/* Overlay deckungsgleich über dem Bild, blockiert keine Klicks */
.anfrage-bild::after{
  content: "";
  position: absolute;
  inset: 0;                      /* füllt exakt den Bildbereich */
  grid-area: 1 / 1; /* exakt gleiche Position/Größe wie das Bild */
  background: url("/bilder-default/geschenksidee.jpg") center/contain no-repeat;
  border-radius: 1rem;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;          /* Klicks gehen zum Container/Img */
  z-index: 1;
}

/* Hover: Overlay ein, Bild leicht anheben/ausblenden */
.anfrage-bild:hover::after{ 
  opacity: 1; 
 }
  
.anfrage-bild:hover img{
  opacity: 0;
  transform: translateY(-10px);
}

/* Titel bleibt darunter */
.anfrage-bild > h3{
  grid-row: 2;
  margin-top: .75rem;
  font-family: var(--font-serif);
  z-index: 2;
}

/* Tastatur-Zugänglichkeit: Overlay auch bei Fokus zeigen */
.anfrage-bild:focus-visible::after{
  opacity: 1;
  outline: 2px solid var(--farbe1, #b5905b);
  outline-offset: 4px;
}

/* 4) Textspalte & Button ---------------------------------*/
.anfrage-text{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.anfrage-text p{
  color: var(--farbe2);
  margin-bottom: 1.2rem;
  font-size: 1rem;
  line-height: 1.4;
}

.produkte-anfrage .produkt-button{
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: var(--farbe1);
  color: var(--farbe8);
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: background .3s ease;
}
.produkte-anfrage .produkt-button:hover{
  background: var(--farbe9);
}


/* Basis: direkt nach .produkte-anfrage, links, nur Textbreite */
.produkte-anfrage + .bottom-anfrageslogan{
  display: inline-block;              /* nur Textbreite */
  width: fit-content;
  max-width: 100%;                    /* falls Text sehr lang wird, bricht um */
  margin: .5rem 0 0;                  /* kleiner Abstand nach oben */
  text-align: left;
}

/* Optional: kleinen linken Einzug passend zu Layout */
.produkte-anfrage + .bottom-anfrageslogan{
  margin-left: clamp(12px, 14vw, 48px);
}

/* Fallback für ältere Browser (optional) */
@supports not (width: fit-content){
  .produkte-anfrage + .bottom-anfrageslogan{
    display: inline;                  /* fällt auf Inline zurück */
  }
}

/* Wenn .bottom-anfrageslogan IM selben Container liegt und links „klebt“ soll */
.produkte-anfrage .bottom-anfrageslogan{
  display: inline-block;
  width: fit-content;
  margin-top: .5rem;
  margin-left: 1rem;
  text-align: left;
}

/* Referenzen mit Endlos Slider */

.referenzen {
  padding: 1rem 1rem;
  text-align: center;
  border-top: 1px solid var(--farbe2);;
}

.referenzen h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--farbe2, var(--farbe1));
}

.referenzen-logo {
 background-color: var(--farbe10);
 border-radius: 12px;
 padding: 1rem 1rem;
}


.referenzen-grid {
  overflow: hidden;              /* verhindert Scrollbalken */
  width: 100%;
}

.referenzen-track {
  display: flex;
  width: max-content;
  animation: scroll-logos 25s linear infinite;
}

.referenzen-set {
  display: flex;
}

.referenzen-set img {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-right: 3rem;   /* Abstand zwischen Logos */
}

.referenzen-set img:last-child {
  margin-right: 0;          /* letztes Logo ohne Abstand */
}

.referenzen-track img {
  height: 80px;                  /* feste Logo-Höhe */
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);       /* Logos neutral anzeigen */
  opacity: 0.85;
  transition: filter .3s, opacity .3s;
}

.referenzen-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.referenzen-set img:last-child {
  margin-right: 3rem;      /* kein Extra-Abstand am Ende */
}

@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* läuft einmal durch */
}


/* Anfrage Formular integriert in die index.php */
/* Anfrage – Layout laut PDF */
.anfrage-formular{
  max-width: 1100px;
  margin: 4rem auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  /*background: var(--farbe8, #fff);*/
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.anfrage-formular .hero-title{
  /*font-family: var(--font-serif, serif);*/
  font-family: Times New Roman; /*Wunsch laut Christian 24.10.2025 */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .01em;
  /*color: var(--farbe1, #b5905b);*/
  text-transform: none;
  text-align: left;
  margin: 0 0 1.5rem 0;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
}
.anfrage-formular .hero-kicker{
  /*font-family: var(--font-sans, system-ui, sans-serif);*/
  /*font-family: var(--font-serif, serif);*/
  font-family: Times New Roman; /*Wunsch laut Christian 24.10.2025 */
  font-weight: 600;
  /* color: var(--farbe1, #b5905b);*/
  margin: .2rem 0 2rem 0;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
}

/* 2 Spalten: links Kontakt, rechts Interessen */
.anfrage-formular .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 28px);
}

/* Feldgruppen */
.anfrage-formular label,
.anfrage-formular fieldset{
  display: block;
  text-align: left;
  font-size: 1rem; /*Wunsch laut Christian 24.10.2025, am 4.11.2025 wieder kleiner */
}
.anfrage-formular .field{
  display: flex; 
  flex-direction: column; 
  gap: .5rem;
}

.anfrage-formular input[type=text],
.anfrage-formular input[type=email],
.anfrage-formular input[type=tel],
.anfrage-formular textarea{
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--farbe6, #ccc);
  border-radius: 6px;
  font-size: 1rem;
  background: var(--farbe8, #fff);
  color: var(--farbe3, #222);
}

.anfrage-formular textarea{ min-height: 140px; resize: vertical; }
.anfrage-formular .help{ font-size: .9rem; opacity: .8; }

/* Interessen (rechte Spalte) */
.anfrage-formular .interessen legend{
  padding: 0.3rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.anfrage-formular .checks{
  display: grid; gap: .6rem;
  grid-template-columns: 1fr 1fr; /* zwei Spalten wie im PDF */
}
.anfrage-formular .checks label{
  display: flex; 
  gap: .5rem; 
  align-items: flex-start;
  font-weight: bold; /*Wunsch laut Christian 24.10.2025 */
}

/* Unterkategorie – nur sichtbar wenn „Gemeinsam profitieren…“ gewählt */
.anfrage-formular .subchecks{
  margin-top: .6rem; padding-left: 1.8rem; display: none;
  display: none;
}
.anfrage-formular .subchecks.active{ display: grid; gap: .35rem; }

/* Checkboxen */
.anfrage-formular input[type=checkbox]{ 
  transform: translateY(2px);
  margin-left: 1rem;
}

/* Datenschutz + Button-Zeile */
.anfrage-formular .footer-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1rem;
  flex-wrap: wrap;
}
.anfrage-formular .ds{
  display: flex; gap: .5rem; align-items: center; font-size: .95rem;
}

.anfrage-formular .cta{
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  /* background: var(--farbe3, #111); */
  /* color: var(--farbe8, #fff); */
  font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; 
  text-decoration: none; 
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
}
.anfrage-formular .cta:hover{ 
  transform: translateY(-2px) scale(1.02);
}


/* "Gemeinsam profitieren…" über beide Spalten */
.anfrage-formular .checks .gp{
  grid-column: 1 / -1;          /* spannt beide Spalten */
  align-items: flex-start;       /* Checkbox + Text sauber ausrichten */
}

/* Unterkategorie direkt darunter, ebenfalls über beide Spalten */
.anfrage-formular #gp-sub{
  grid-column: 1 / -1;
  padding-left: 1.8rem;          /* leichte Einrückung unter dem gp-Label */
}

/* "Gemeinsam profitieren…" als zusammengehöriger Block */
.anfrage-formular .checks .gp{
  grid-column: 1 / -1;               /* über beide Spalten */
  display: flex;
  align-items: baseline;              /* Checkbox + Text auf Grundlinie */
  flex-wrap: wrap;                    /* Hilfe darf umbrechen */
  gap: .5rem .6rem;                   /* Abstand zwischen Checkbox, Text, Hilfe */
  line-height: 1.2;                   /* kompakter, wirkt zusammengehörig */
}

/* Checkbox leicht absetzen */
.anfrage-formular .checks .gp > input[type=checkbox]{
  margin-top: 2px;
}

/* Haupttext neben der Checkbox (der Textknoten im Label) */
.anfrage-formular .checks .gp .text{
  font-weight: 600;                   /* wie im PDF markanter */
}

/* Hilfe optisch angehängt */
.anfrage-formular .checks .gp .help{
  font-size: .9em;                    /* kleiner als Haupttext */
  opacity: .7;
  /* color: var(--farbe3, #222); */
  margin-left: 2.25rem;               /* minimaler Abstand , am 4.11.2025 von 1.25 auf 2,25 geändert*/
  white-space: normal;                /* darf umbrechen */
}

/* Anfrage-Formular: Datenschutzlink in Farbe 1 */
.anfrage-formular .ds a{
  color: var(--farbe1);
  text-decoration: none;
  font-weight: 600;
}
.anfrage-formular .ds a:hover,
.anfrage-formular .ds a:focus-visible{
  color: var(--farbe1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.anfrage-formular .ds a:visited{ color: var(--farbe1); }


/* Zähler / Validierung */
.anfrage-formular .count{ font-size: .85rem; opacity: .75; text-align: right; }

/* Mobile */
@media (max-width: 900px){
  .anfrage-formular .grid{ grid-template-columns: 1fr; }
  .anfrage-formular .checks{ grid-template-columns: 1fr; }
}



/* =============== BILDERGALERIE ===================================== */
/* Container: zentriert, fixe Maxbreite → symmetrische Außenränder */
.bildergalerie{
  --outer-pad: clamp(12px, 3vw, 28px);
  --img-radius: 28px;
  --overlap: clamp(12px, 3vw, 40px);   /* Überlappung an der Mittelachse */
  --caption-w: min(520px, 42vw);
  padding: var(--outer-pad);
  /*border-top: 0.5rem solid var(--farbe3); /* antelle Rahmen komplett /wieder entfernt am 06.12.2025*/
  /*border-bottom: 0.5rem solid var(--farbe3); /* antelle Rahmen komplett /wieder entfertnt am 06.12.2025*/
}

/* Item: 2 gleich breite Spalten */
.bildergalerie .gal-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;                                /* Mitte kontrollieren wir selbst */
  /* width: min(1200px, 92vw); */
  margin-inline: auto;                   /* zentrieren */
  margin-bottom: 2rem;

  /* Basis-Entry-State (für Anim) */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.bildergalerie .gal-item.in{
  opacity: 1;
  transform: none;
}

/* Figure „entkapseln“ → img + caption werden eigenständige Grid-Items */
@media (min-width: 901px){
  .bildergalerie .image-card{
    display: contents;
  }
}

/* Bild: 100% der Spalte, Schatten, Zeile 1 */
.bildergalerie .image-card > img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--img-radius);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  grid-row: 1;
  z-index: 1;

  /* Übergänge / Start-Opacity (für Anim) */
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
  opacity: 0;
}

/* Caption: Karte, 25% höher, Zeile 1 */
.bildergalerie .caption-box{
  top: var(--cap-top, 50%);         /* % von der Containerhöhe (Standard 50%) */
  width: var(--caption-w);
  padding: clamp(12px, 2vw, 18px);
  background: var(--farbe8, #fff);
  color: var(--farbe3, #222);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  position: relative;
  grid-row: 1;
  align-self: center;
  transform: translateY(-75%);
  z-index: 2;

  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
  opacity: 0;
  transition-delay: .12s; /* Stagger hinter dem Bild */
}



/* === Ausrichtung + Überlappung an der Mitte ========================= */
/* Schema 1: Bild links, Text rechts */
.bildergalerie .gal-item.from-left  .image-card > img{ grid-column: 1; justify-self: end;  margin-right: calc(var(--overlap) * -0.5); }
.bildergalerie .gal-item.from-left  .caption-box      { grid-column: 2; justify-self: start; margin-left:  calc(var(--overlap) * -0.5); }

/* Schema 2: Bild rechts, Text links */
.bildergalerie .gal-item.from-right .image-card > img{ grid-column: 2; justify-self: start; margin-left:  calc(var(--overlap) * -0.5); }
.bildergalerie .gal-item.from-right .caption-box      { grid-column: 1; justify-self: end;   margin-right: calc(var(--overlap) * -0.5); }

/* Schema 3: wie Schema 1 (Bild links, Text rechts) */
.bildergalerie .gal-item.from-bottom .image-card > img{ grid-column: 1; justify-self: end;  margin-right: calc(var(--overlap) * -0.5); }
.bildergalerie .gal-item.from-bottom .caption-box      { grid-column: 2; justify-self: start; margin-left:  calc(var(--overlap) * -0.5); }

/* === Einflug-Animationen ============================================ */
/* Startzustände je Richtung */
.bildergalerie .gal-item.from-left  .image-card > img{ transform: translateX(-6vw); }
.bildergalerie .gal-item.from-left  .caption-box      { transform: translateX( 6vw) translateY(-25%); }

.bildergalerie .gal-item.from-right .image-card > img{ transform: translateX( 6vw); }
.bildergalerie .gal-item.from-right .caption-box      { transform: translateX(-6vw) translateY(-25%); }

.bildergalerie .gal-item.from-bottom .image-card > img{ transform: translateY( 6vw); }
.bildergalerie .gal-item.from-bottom .caption-box      { transform: translateY(calc(6vw - 25%)); }

/* Zielzustände bei .in */
.bildergalerie .gal-item.in .image-card > img{ opacity: 1; transform: none; }
/*.bildergalerie .gal-item.in .caption-box     { opacity: 1; transform: translateY(-75%); }*/
/*.bildergalerie .gal-item.in .caption-box     { opacity: 1; transform: translate(0px, 10px); } am 4.11.2025 angepasst. */
.bildergalerie .gal-item.in .caption-box     { opacity: 1; transform: translate(0px, -65%); } /*am 6.12.2025 angepasst. */





/* === Reduced Motion ================================================== */
@media (prefers-reduced-motion: reduce){
  .bildergalerie .gal-item{ transition: none !important; transform: none !important; opacity: 1 !important; }
  .bildergalerie .image-card > img,
  .bildergalerie .caption-box{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== Option: reduzierte Bewegung respektieren ===== 
@media (prefers-reduced-motion: reduce){
  .produkt-start,
  .produkt-inner,
  .produkt-start img { transition: none !important; }
}
*/



/* ==== Hard-Facts ==== */


/* ===== Zweispalter: Animation links, Text rechts ===== */
.anim-wrap{
  width: min(1200px, 92vw);
  margin: clamp(16px, 3vw, 36px) auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;                      /* links größer */
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}

/* Spalten */
.animation-col{ min-width: 0; }
.explain-col{
  background: var(--farbe8, #fff);
  color: var(--farbe3, #222);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  padding: clamp(16px, 3vw, 28px);
  opacity: 0;                 /* wird per .in sichtbar */
  transform: translateX(6vw); /* Start rechts draußen */
  will-change: transform, opacity;
}

/* Mobile: untereinander, zuerst Animation, dann Text */
@media (max-width: 900px){
  .anim-wrap{
    grid-template-columns: 1fr;
  }
  .explain-col{
    transform: translateY(24px); /* statt von rechts einfliegen */
  }
}

/* === Responsive ====================================================== */
@media (max-width: 900px){

  .bildergalerie{
    --overlap: 0px;
  }

  .bildergalerie .gal-item{
    display: block;
  }

  .bildergalerie .image-card{
    display: block;     /* WICHTIG */
  }

  .bildergalerie .image-card img{
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    transform: none !important;
  }

  .bildergalerie .caption-box{
    position: static;
    transform: none !important;
    width: 100%;
    margin: 0;
    opacity: 1;
  }

  /*Animation auf kleinen Ansicht abgeschaltet*/
  .bildergalerie .gal-item.in .caption-box{
    transform: none !important;
  }
}


/* ===== Animation-Container (Version, leicht gekürzt) ===== */
.animation-container{
  position: relative;
  width: min(1100px, 94vw);
  height: clamp(520px, 70vw, 900px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
}
.animation-container .base{
  position: absolute; inset: 0;
  top:25%;
  width: 50%; 
  /* height: auto%; */
  object-fit: cover;
  filter: brightness(.95) contrast(1.05);
}


/* Einheitliche Kapselung: jede Figur hat eine “Box”, das Bild füllt die Box */
.fig{ position:absolute; opacity:0; will-change:transform, opacity; }
.fig > img{ width:100%; height:auto; display:block; }

/* Individuelle Box-Größen (responsive via clamp) */
.schwein{ left: 2%;  bottom: 54%; --w: clamp(110px, 14vw, 200px); width: var(--w); }
.kuh    { left: 15%; bottom: 65%; --w: clamp(130px, 16vw, 240px); width: var(--w); }
.biene  { right: 54%; top: 29%;    --w: clamp(90px,  12vw, 160px); width: var(--w); }
.biene > img{ width:100%; height:auto; display:block; transform-origin:50% 60%; }

/* Keyframes */
@keyframes jump-in{
  0%   { opacity:0; transform: translateY(42px) scale(.90); }
  55%  { opacity:1; transform: translateY(-10px) scale(1.06); }
  100% { opacity:1; transform: translateY(0)    scale(1); }
}
@keyframes happy-buzz{
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(-10px,-8px) rotate(-8deg); }
  50%  { transform: translate( 12px,-5px) rotate( 8deg); }
  75%  { transform: translate(-6px,  7px) rotate(-6deg); }
  100% { transform: translate(  8px,-3px) rotate( 6deg); }
}

/* Reveal: nur Opacity (damit Keyframes nicht überschrieben werden) */
.reveal-on-scroll{ opacity: 0; transition: opacity .6s ease; }
.reveal-on-scroll.in{ opacity: 1; }

/* Wenn der Container „in“ ist → Figuren staffeln */
.reveal-on-scroll.in .schwein{ animation: jump-in .9s cubic-bezier(.2,.8,.2,1) .95s both; }
.reveal-on-scroll.in .kuh    { animation: jump-in .9s cubic-bezier(.2,.8,.2,1) .70s both; }
.reveal-on-scroll.in .biene  { animation: jump-in .9s cubic-bezier(.2,.8,.2,1) 1.20s both; }
.reveal-on-scroll.in .biene > img{ animation: happy-buzz 1.6s ease-in-out 1.00s infinite alternate; }

/* Text von rechts einfliegen, sobald .anim-wrap .in gesetzt ist */
.anim-wrap.in .explain-col{
  opacity: 1;
  transform: none;
  transition: transform 2.8s ease, opacity 2.8s ease;
}

/* Zitat-Optik wie gehabt */
/* === Einstein-Zitat (hf-quote) – clean, elegant === */
.hf-block{ 
  width: min(1100px, 92vw); 
  margin: clamp(16px, 3vw, 36px) auto; 
}

.hf-quote{
  /* Container wie im Beispiel */
  /* max-width: 700px; */
  margin-inline: auto;
  background: #fff;                         /* Karte in hell */
  padding: 40px;
  border-left: 6px solid #555;              /* dunkler Akzentstreifen */
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  border-radius: 8px;
  text-align: left;
  position: relative;
  color: #333;                               /* Grundschrift */
  font-family: Georgia, "Times New Roman", serif;
  font-size: larger; /*Wunsch laut Christian 24.10.2025 */
}

/* großes öffnendes Anführungszeichen */
.hf-quote::before{
  content: "“";
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 80px;
  color: var(--farbe1);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

/* Zitattext – nimm dein <p> im Block */
.hf-quote p{
  font-size: 20px;
  line-height: 1.6;
  margin-top: 20px;
  color: inherit;
}

/* Autor – nimm dein <footer> im Block */
.hf-quote footer{
  margin-top: 30px;
  font-size: 18px;
  font-style: italic;
  color: #666;
  text-align: right;
}

/* Dark-Theme/Seitenfarben optional harmonisieren */
body.start .hf-quote{
  background: var(--farbe8, #fff);
  color: var(--farbe3, #222);
   border-left-color: color-mix(in srgb, var(--farbe1, #222) 75%, #999);
  /* border-left-color: color-mix(in srgb, var(--farbe3, #222) 75%, #999);*/
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fig, .biene > img, .explain-col{ animation:none !important; transform:none !important; opacity:1 !important; }
}


/* Customer - Anfrage Formular 21-10-2025*/

/* === Interessen-Block: Typo & Layout === */
.interessen legend{
  font-family: var(--font-serif, serif);
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  color: var(--farbe1, #BE793E);
  margin-bottom: .75rem;
}

.interessen .checks{
  display: grid;
  gap: .75rem;                        /* Abstand zwischen Zeilen */
}

/* Labels größer & besser klickbar */
.interessen .checks label{
  display: grid;
  grid-template-columns: 28px auto;   /* Platz für die Box links */
  align-items: center;
  column-gap: .6rem;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.35;
  color: var(--farbe2, #AD974F);
  cursor: pointer;
  user-select: none;
}

/* "gp" (Sonderzeile) mit Untertitel */
.interessen .checks label.gp{
  grid-template-columns: 28px 1fr;    /* Checkbox | Textblock */
  row-gap: 2px;
}
.interessen .checks label.gp .text{
  font-weight: 700;
}
.interessen .checks label.gp .help{
  opacity: .8;
  font-size: .95em;
  color: var(--farbe2, #AD974F);
  grid-column: 2;                     /* unter dem Haupttext */
}

/* === Custom Checkbox =============================================== */
.interessen .checks input[type="checkbox"]{
  /* native Checkbox ausblenden, aber zugänglich lassen */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  border: 2px solid var(--farbe1, #BE793E);      /* goldener Rahmen */
  background: transparent;                       /* transparenter Hintergrund */
  display: inline-grid;
  place-content: center;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  position: relative;
}

/* Fokus (Tastatur/Barrierefreiheit) */
.interessen .checks input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe1, #BE793E) 35%, transparent);
}

/* Icon: goldener Haken als Vektor via ::after */
.interessen .checks input[type="checkbox"]::after{
  content: "";
  width: 14px; 
  height: 8px;
  transform: rotate(-45deg) scale(0.7);
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
  opacity: 0;                                    /* versteckt im Idle */
}

/* Aktiv: transparenter Hintergrund bleibt, goldener Haken erscheint */
.interessen .checks input[type="checkbox"]:checked{
  background: transparent;                       /* explizit transparent */
  border-color: var(--farbe1, #BE793E);          /* Gold bleibt */
}
.interessen .checks input[type="checkbox"]:checked::after{
  border-left-color: var(--farbe1, #BE793E);
  border-bottom-color: var(--farbe1, #BE793E);
  opacity: 1;
  transform: rotate(-45deg) scale(.81);            /* leicht größer beim Aktivieren */
}

/* Hover-Feedback (optional) */
@media (hover:hover){
  .interessen .checks label:hover input[type="checkbox"]{
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe1, #BE793E) 20%, transparent);
  }
}

/* Dichtes Layout auf schmalen Geräten */
@media (max-width: 560px){
  .interessen .checks label{ font-size: 1.05rem; }
  .interessen .checks input[type="checkbox"]{ width: 22px; height: 22px; }
}

/* Animation 22.10.2025 gändert angepasst /*
/* ===== Nutztier-Animation: proportional skalierend (Base + Figuren als Einheit) ===== */
/* ==== Nutztier-Animation – robustes Scroll-Reveal ==================== */
/* Bühne links, Text rechts (Desktop); mobil untereinander */
.anim-wrap{
  width: min(1200px, 92vw);
  margin: clamp(16px, 3vw, 36px) auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}

/* Bühne: als Einheit skalierend (Base + Figuren) */
.animation-col{ justify-self: center; }
.animation-container{
  position: relative;
  width: min(600px, 46vw);    /* skaliert die ganze Einheit */
  aspect-ratio: 8 / 9;        /* Referenz: 800 x 900 */
  overflow: hidden;
  border-radius: 16px;
}
.animation-container .base{
  position: absolute; inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: contain;
  filter: brightness(.98) contrast(1.03);
}

/* Figuren – prozentuale Größe/Position zur Bühne */
.anim-wrap .fig{
  position: absolute;
  opacity: 0;                 /* Start: unsichtbar */
  transform: translateY(20px) scale(.98);  /* Startversatz */
  will-change: transform, opacity;
}
.anim-wrap .fig > img{ width: 120%; height: auto; display: block; }

/* Schwein: 150/800=18.75%, 120/800=15%, 640/900≈71.11% */
.anim-wrap .schwein{
  width: 14.75%; /*06.12.2025 von 18,75 auf 14,75% geändert*/
  left: 15%; /*06.12.2025 von 13 auf 15% geändert*/
  bottom: 63%; /*06.12.2025 von 61,111 auf 63% geändert*/
}

/* Kuh: 180/800=22.5%, 325/800≈40.625%, 745/900≈82.778% */
.anim-wrap .kuh{
  width: 15%; /*06.12.2025 von 22,5 auf 15% geändert*/
  left: 40.625%; /*06.12.2025 von 36,625 auf 40,625% geändert*/
  bottom: 72.778%;
}

/* Biene: 110/800=13.75%, 110/800=13.75%, 140/900≈15.556% */
.anim-wrap .biene{
  width: 14.75%;
  right: 17.75%;
  top: 28.556%;
  transform-origin: 50% 60%;
}

/* Textkarte rechts (startet versetzt/unsichtbar) */
.anim-wrap .explain-col{
  background: var(--farbe8, #fff);
  color: var(--farbe3, #222);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  padding: clamp(16px, 3vw, 28px);
  opacity: 0;
  transform: translateX(6vw);
  transition: opacity .9s ease, transform .9s ease;
  will-change: transform, opacity;
}

/* ===== Keyframes ===== */
@keyframes jump-in{
  0%   { transform: translateY(-20%) scale(.85); opacity: 0; }
  55%  { transform: translateY(0)    scale(1.06); opacity: 1; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes happy-buzz{
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25%     { transform: translate(-4%, -6%) rotate(-9deg); }
  50%     { transform: translate( 5%, -3%) rotate( 8deg); }
  75%     { transform: translate(-3%,  4%) rotate(-6deg); }
}

/* ===== Aktivzustand – startet erst, wenn .in gesetzt wird ===== */
.anim-wrap.in .fig{ opacity: 1; transform: none; }  /* Basis-Reveal */

/* Staffelung der Keyframes (wichtig: NUR im .in-Zustand setzen!) */
.anim-wrap.in .schwein{ animation: jump-in .95s cubic-bezier(.2,.8,.2,1) .55s both; }
.anim-wrap.in .kuh    { animation: jump-in 1.05s cubic-bezier(.2,.8,.2,1) .20s both; }
.anim-wrap.in .biene  { animation: jump-in 1.10s cubic-bezier(.2,.8,.2,1) .95s both, 
                                  happy-buzz 1.3s ease-in-out 2.2s infinite; }

/* Textkarte reinfahren, wenn .in gesetzt ist */
.anim-wrap.in .explain-col{
  opacity: 1;
  transform: none;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .anim-wrap{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .animation-container{
    width: min(380px, 94vw);
  }
  .anim-wrap .explain-col{
    transform: translateY(18px); /* mobil lieber von unten */
  }
  .anim-wrap.in .explain-col{ 
  transform: none; 
  }
}


/* ===== Reduced Motion ===== 
@media (prefers-reduced-motion: reduce){
  .anim-wrap .fig,
  .anim-wrap .explain-col{ 
    animation: none !important; 
    transform: none !important; 
    opacity: 1 !important; 
  }
}  */

/* Sonderwunsch vom 24.10.2025 Umbau der Shopwerbung */
.cta{
    display:flex;
    flex-wrap:wrap;
	gap:12px;
	justify-content:center;
	margin-top:8px
}
	
/* Basis-Button */
.button{
    appearance:none;
    cursor:pointer;
    border-radius:999px;
    padding:14px 20px;
    font-weight:700;
    font-size:2.5rem;
    color:#1f2937;

    /* WICHTIG: Border-Breite jetzt schon definieren */
    border:1.5px solid transparent;
    box-sizing:border-box;

    box-shadow:0 10px 30px rgba(245,158,11,.35);
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, 
               border-color .12s ease, color .12s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-align: center;
}

/* Hover: nur Farben/Shadow – KEINE font-size-/Border-Breite-Änderung */
.button:hover{
    color:var(--fg);
    border-color:rgba(0,0,0,.12);   /* nur Farbe, Breite bleibt gleich */
    box-shadow:none;
    /* keine font-size hier! */
    /* kein neues border:... mit anderer Breite */
}


.button:active{
	transform:translateY(0);
	opacity:.95
}

.ghost{
    /* background:transparent; */
	/*
	color:var(--fg);
    border:1.5px solid rgba(0,0,0,.12);
    box-shadow:none
	*/
	transform:translateY(-10px);
	color:var(--farbe);
	box-shadow:0 14px 34px rgba(245,158,11,.45)
}

/* Container für den Shop-Button */
.shop-werbung .cta {
  text-align: center;
  margin-top: 2rem;              /* nach Bedarf anpassen */
}

/* Grundzustand des Ghost-Buttons im Shop-Teaser */
.shop-werbung .button.ghost {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  border-radius: 999px;

  /* WICHTIG: Border-BREITE ist hier schon fix,
     im Hover wird nur die FARBE geändert */
  border: 2px solid #ad974f;
  box-sizing: border-box;

  background-color: transparent;
  color: #ad974f;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;

  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease;
}

/* Hover-Zustand – keine Größenänderung mehr */
.shop-werbung .button.ghost:hover {
  background-color: #ad974f;
  color: #fff;
  border-color: #ad974f;         /* gleiche Breite wie vorher */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transform: translateY(-2px);   /* optischer Effekt, aber kein Layout-Ruckeln */
}

/*==============================================================================================*/
/* Erweiterung und ersatz des UNIKAT 22.12.2025 */
/* --- HAU: Grundfarben und Rahmen --- */
.hau{ background:var(--farbe5, var(--hau-bg)); color:var(--hau-fg); padding:clamp(24px,4vw,48px) 0; }
.hau .accent{ color:var(--hau-accent); }
.hau-wrap{ width:min(1200px,92vw); margin:0 auto; display:grid; gap:clamp(16px,3vw,28px); }

/* B-1.0 Headline */
.hau-block.b-1 h2{
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(28px,4.2vw,54px);
  line-height:1.05;
  text-align:center;
}
.hau-block.b-1 .sub{ text-align:center; opacity:.85; margin-top:.25rem; }

/* B-2.0 Teaser */
.hau-block.b-2{ text-align:center; font-weight:600; }

/* B-3.0 Hero + CTA */
.hau-hero{ position:relative; display:grid; place-items:center; padding:clamp(8px,2vw,16px); }
.hau-hero .hero-glas{
  width:min(520px,60vw); height:auto; transform-origin:60% 60%;
}
.hau-hero figcaption{ margin-top:.5rem; }
.more-cta{
  position:relative; display:inline-flex; gap:.6rem; align-items:center;
  padding:.6rem 1rem; border-radius:999px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg,var(--hau-accent),#ffd166); color:#111; border:0;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.more-cta .bar{
  width:54px; height:3px; background:currentColor; display:block; opacity:.7;
  transition:transform .35s ease;
}
.more-cta[aria-expanded="true"] .bar{ transform:rotate(90deg) scaleX(.8); }
.hau-more{ overflow:hidden; max-height:0; transition:max-height .5s ease; }
.hau-more.show{ max-height:900px; }
.hau-more-inner{
  background:var(--hau-card); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:clamp(12px,2.5vw,20px);
}

/* B-4.0 Karten */
.hau-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,18px);
}
.card{
  background:var(--hau-card); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:clamp(12px,2vw,18px); text-align:center;
}
.card h3{ color:var(--hau-accent); margin-bottom:.35rem; }

/* B-5.0 Varianten */
.hau-variants{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2vw,16px); }
.variant{
  background:transparent; border:2px solid var(--hau-accent); color:var(--hau-fg);
  border-radius:999px; padding:.6rem 1rem; text-align:center; font-weight:800;
}

/* B-6.0 */
.hau-block.b-6{ text-align:center; }
.hau-block.b-6 .quality{ margin-top:.75rem; font-size:clamp(18px,2.6vw,26px); }

/* --- Scroll-Reveal & Wischrichtungen --- */
.swipe-left, .swipe-right, .swipe-up { opacity:0; will-change:transform, opacity; }
.swipe-left { transform:translateX(-6vw); }
.swipe-right{ transform:translateX( 6vw); }
.swipe-up   { transform:translateY( 6vw); }

.in .swipe-left,
.in .swipe-right,
.in .swipe-up { opacity:1; transform:none; transition:transform .9s ease, opacity .9s ease; }

/* B-3.1: Glas nach Ende der Hauptanimation einmalig drehen */
.in .hau-hero .hero-glas { animation: glas-tilt 1.1s ease-out .9s 1 both; }
@keyframes glas-tilt{
  0%{ transform:rotate(0); }
  60%{ transform:rotate(var(--hau-glas-rotate)); }
  100%{ transform:rotate(var(--hau-glas-rotate)); }
}

/* Puls-Effekt (welle) – wird per JS klassisch getriggert */
.pulse{
  animation: pulse-scale .6s ease-in-out 1 both;
}
@keyframes pulse-scale{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,158,11,.0); }
  50%{ transform:scale(1.06); box-shadow:0 0 0 8px rgba(245,158,11,.15); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,158,11,.0); }
}

/* Responsiv */
@media (max-width: 960px){
  .hau-grid, .hau-variants{ grid-template-columns:1fr; }
  .hau-hero .hero-glas{ width:min(420px,80vw); }
}



/* Farben-Kurzklassen */
#hau .o{ color:var(--hau-accent); font-weight:800; letter-spacing:.02em; }
#hau .w{ color:var(--hau-fg); font-weight:900; }

/* Headline wie im Mock */
.hau-headline{
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(36px,5vw,64px);
  line-height: 1.05;
  text-align: center;
  letter-spacing:.01em;
}
.hau-sub{
  text-align:center;
  margin-top:.35rem;
  font-size: clamp(12px,1.4vw,14px);
  text-transform: uppercase;
  opacity:.9;
}

/* Lead-Absätze zentral, Maße wie Vorlage */
.hau-block.lead{
  width:min(920px,94vw);
  margin: clamp(14px,2.5vw,24px) auto 0;
}
.hau-block.lead p{
  margin: 0 0 .9rem;
  text-align:center;
  font-size: clamp(15px,1.7vw,18px);
  line-height:1.6;
}
.hau-block.b-2{
  width:min(980px,96vw);
  margin: clamp(14px,3vw,28px) auto 0;
  font-size: clamp(16px,2vw,20px);
  letter-spacing:.015em;
}

/* Hero-Abstand zum Text wie im Screenshot 
.hau-hero{ margin-top: clamp(16px,4vw,40px); }*/

/* Nutzen-Karten: luftiger und typografisch wie im Bild */
.hau-grid .card{
  padding: clamp(16px,2.4vw,22px);
}
.hau-grid .card h3{
  font-size: clamp(16px,2vw,20px);
  letter-spacing:.18em;
}

/* Varianten-Hinweis rechtsbündig */
#hau .variants-note{
  width:min(1200px,92vw);
  margin: clamp(22px,4vw,40px) auto clamp(10px,2vw,16px);
  text-align: right;
  font-size: clamp(14px,1.8vw,18px);
  opacity:.95;
}

/* Varianten-Chips kräftiger wie Vorlage */
.hau-variants .variant{
  border-width: 3px;
  font-size: clamp(13px,1.7vw,16px);
  letter-spacing:.02em;
}



/* Hero-Container als Bezugspunkt */
.hau-hero{
  position: relative;
  display: inline-block;          /* lässt das Pair als Block agieren */
  /* margin-top: clamp(12px, 3vw, 28px);*/
}

/* Glas ~50% der bisherigen Größe */
.hau-hero .hero-glas{
  width: min(250px, 28vw);        /* vorher ~500px/56vw -> halbiert */
  height: auto;
  transform-origin: 60% 60%;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* Größen-Badge: über dem Glas, leicht gedreht */
.hau-hero .hero-badge{
  position: absolute;
  bottom: 21%;                    /* je nach Glasgrafik feinjustieren */
  left: 30%;
  width: min(110px, 12vw);        /* skaliert responsiv mit */
  height: auto;
  transform: rotate(0deg);
  z-index: 2;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
  pointer-events: none;           /* Badge nicht klickbar */
}

/* Feinpositionierung für sehr kleine Screens */
@media (max-width: 520px){
  .hau-hero .hero-glas{ width: min(220px, 44vw); }
  .hau-hero .hero-badge{
    left: 16%;
    bottom: 26%;
    width: min(96px, 18vw);
    transform: rotate(0deg);
  }
}

/* Optional: bei sehr breiten Screens etwas größer wirken lassen */
@media (min-width: 1400px){
  .hau-hero .hero-glas{ width: 280px; }
  .hau-hero .hero-badge{ width: 120px; }
}


/* Stapeln untereinander */
.hau-grid.b-4{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 28px);
}

/* Gemeinsame Karteneigenschaften (keine Farben geändert) */
.b4-card{
  position: relative;
  max-width: var(--card-w, clamp(340px, 72vw, 860px));
  /* vorhandene Einfahr-Animation kann bleiben */
}

/* Treppen-Layout: Reihenfolge festlegen */
.b-4 .b-4-3 { order: 1; }  /* 1. Karte */
.b-4 .b-4-2 { order: 2; }  /* 2. Karte */
.b-4 .b-4-1 { order: 3; }  /* 3. Karte */

/* Treppen-Layout: Ausrichtung pro Karte */
.b-4 .b-4-3{ margin-inline: 0 auto; }     /* linksbündig */
.b-4 .b-4-2{ margin-inline: auto; }        /* mittig */
.b-4 .b-4-1{ margin-inline: auto 0; }      /* rechtsbündig */

/* Icon links oben (wie gewünscht) */
.has-left-icon{
  --icon-size: clamp(28px, 4.6vw, 40px);
  padding-left: calc(var(--icon-size) + 16px);
}
.b4-icon{
  position: absolute;
  top: 10px;
  left: 10px;
  inline-size: var(--icon-size);
  aspect-ratio: 1;
  pointer-events: none;
}

/* Optional: auf sehr kleinen Screens Karten vollbreit zeigen */
@media (max-width: 540px){
  .b4-card{ max-width: 100%; margin-inline: 0; }
}


/*--------------*/
/* Grundzustand: Richtungsversatz + versteckt (nur Hülle animiert translate/opacity) */
.hau-grid.b-4 .b4-card{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .85s cubic-bezier(.22,.8,.24,1),
    opacity  .85s ease-out;
  transition-delay: var(--delay, 0s);
  transform: translateY(12px); /* Fallback-Offset */
}

/* Richtungen über data-anim */
.hau-grid.b-4 .b4-card[data-anim="from-left"]  { transform: translateX(-8vw); }
.hau-grid.b-4 .b4-card[data-anim="from-top"]   { transform: translateY(-8vw); }
.hau-grid.b-4 .b4-card[data-anim="from-right"] { transform: translateX( 8vw); }

/* Sichtbar: in-Status (Hülle fährt ein) */
.hau-grid.b-4 .b4-card.in{
  opacity: 1;
  transform: none;
}

/* Stagger „Treppe“ (1s Abstand) */
.hau-grid.b-4 .b-4-3 { order: 2; --delay: 0s; }
.hau-grid.b-4 .b-4-2 { order: 2; --delay: 1s; }
.hau-grid.b-4 .b-4-1 { order: 1; --delay: 2s; }

/* INNERER WRAPPER: Pop/Poch (nur Scale), startet wenn Parent .in erhält */
.hau-grid.b-4 .b4-card-inner{
  will-change: transform;
  transform: scale(.98); /* minimal komprimiert vor Start */
}
.hau-grid.b-4 .b4-card.in .b4-card-inner{
  animation: b4-pop .55s cubic-bezier(.18,.9,.24,1.2) /* sanfter Overshoot */
             calc(var(--delay,0s) + .75s)             /* startet kurz NACH Einwischung */
             both;
}

/* Pop/Poch-Keyframes: kurz über 1, dann einpendeln */
@keyframes b4-pop{
  0%   { transform: scale(.96); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1.00); }
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce){
  .hau-grid.b-4 .b4-card{ transition: none !important; opacity: 1 !important; transform: none !important; }
  .hau-grid.b-4 .b4-card-inner{ animation: none !important; transform: none !important; }
}


/* Bestseller-Block */

/* === Block-Grundlayout ============================================== */
.hau-block.b-6.swipe-up{
  width: min(1100px, 92vw);
  margin: clamp(16px, 3vw, 36px) auto;
}

.hau-block.b-6 .b6-card{
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(10px, 2.2vw, 18px);
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 2.6vw, 28px);
  background: var(--farbe10, rgba(255,255,255,0.05));
  border: 1px solid color-mix(in srgb, var(--farbe2, #ddd) 14%, transparent);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  overflow: hidden;

  /* Swipe-up Startzustand */
  opacity: 0;
  transform: translateY(8vw);
  will-change: transform, opacity;
  transition:
    transform .85s cubic-bezier(.22,.8,.24,1),
    opacity  .85s ease-out;
  transition-delay: var(--delay, 0s);
}

/* Sichtbar */
.hau-block.b-6 .b6-card.in{
  opacity: 1;
  transform: none;
}

/* === Icon oben rechts =============================================== */
.hau-block.b-6 .b6-icon{
  position: absolute;
  top: clamp(10px, 1.5vw, 14px);
  right: clamp(10px, 1.5vw, 14px);
  width: auto;
  /*width: clamp(34px, 3.6vw, 48px);
  /*height: clamp(34px, 3.6vw, 48px);*/
  display: grid; place-items: center;
  /*border-radius: 50%;
  background: var(--farbe8, #fff);              /* heller Kreis */
  /*color: var(--farbe3, #111);
  box-shadow: 0 6px 18px rgba(0,0,0,.18),
              inset 0 0 0 1px color-mix(in srgb, var(--farbe2, #ddd) 30%, transparent);
  pointer-events: none;                         /* rein dekorativ */
}
.hau-block.b-6 .b6-icon img{
  width: 62%; height: auto; display: block;
  filter: none;                                  /* Farben unverändert */
}

/* === Inhaltstypo ===================================================== */
.hau-block.b-6 .b6-inner{ max-width: 80ch; }
.hau-block.b-6 .b6-title{
  margin: 0 0 .25rem 0;
  font-family: var(--font-serif, serif);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  color: var(--farbe1, #b5905b);
}
.hau-block.b-6 .b6-text{
  margin: 0 0 .6rem 0;
  color: var(--farbe2, #ddd);
  line-height: 1.45;
}
.hau-block.b-6 .b6-cta{
  display: inline-block;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--farbe1) 0%, var(--farbe2) 100%);
  color: var(--farbe8, #111);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  transition: transform .2s ease, filter .2s ease;
}
.hau-block.b-6 .b6-cta:hover{ transform: translateY(-2px); }

/* Mobil-Feinschliff */
@media (max-width: 700px){
  .hau-block.b-6 .b6-inner{ text-align: left; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hau-block.b-6 .b6-card{ transition: none !important; opacity: 1 !important; transform: none !important; }
}


/*==========*/



.hau-block.b-6 h3{
  font-size: clamp(28px,4.4vw,44px);
  letter-spacing:.01em;
}
.hau-block.b-6 h3::first-word{ font-weight:900; } /* optional */
.hau-block.b-6{
  padding-top: clamp(28px,6vw,64px);
}
.hau-block.b-6 .quality{
  margin-top: clamp(14px,3vw,24px);
  letter-spacing:.03em;
}


/* ===== Awards Highlight (oberhalb der awards-grid) ===== */
.awards-highlight{
  /* etwas breiter als die Grid-Bühne */
  width: min(1280px, 96vw);
  margin: clamp(16px, 3vw, 36px) auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: clamp(16px, 2.5vw, 28px);
}

.awards-highlight-head{
  text-align: center;
  margin-bottom: clamp(12px, 2vw, 20px);
}
.awards-highlight-head h2{
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0;
  color: var(--farbe3, #222);
}
.awards-highlight-head .subtitle{
  margin: .35rem 0 0 0;
  color: color-mix(in srgb, var(--farbe3, #222) 70%, #666 30%);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
}

.awards-highlight-head .tags{
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .75rem 0 0 0;
}
.awards-highlight-head .tags li{
  padding: .25rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  background: color-mix(in srgb, var(--farbe1, #b5905b) 15%, #fff);
  color: var(--farbe1, #b5905b);
  border: 1px solid color-mix(in srgb, var(--farbe1, #b5905b) 35%, #fff);
}

/* Bühne mit drei Spalten; Mitte breiter. 
   Die seitlichen Enden liegen in etwa zwischen Container 1 und 3. */
.awards-highlight-stage{
  display: grid;
  grid-template-columns: 1fr minmax(360px, 1.2fr) 1fr; /* Mitte etwas breiter */
  gap: clamp(10px, 1.8vw, 20px);
  align-items: stretch;
  background: #fff;              /* Weiß füllt Zwischenräume */
  border-radius: 10px;
}

/* Elemente */
.awards-highlight-stage .stage-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  min-height: clamp(220px, 28vw, 440px);
  overflow: hidden;
  text-decoration: none;
}
.awards-highlight-stage .stage-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* skaliert proportional, füllt Weiß auf */
  display: block;
}

/* Seiten-Artikel etwas schmaler wirken lassen */
.awards-highlight-stage .stage-item.side{
  min-height: clamp(200px, 24vw, 400px);
}

/* Responsiv: untereinander auf kleineren Displays */
@media (max-width: 900px){
  .awards-highlight-stage{
    grid-template-columns: 1fr;
  }
  .awards-highlight-stage .stage-item{
    min-height: clamp(200px, 48vw, 360px);
  }
}


/* Koppeln des eingefügten Container */

/* Gemeinsamer Rahmen für Highlight + Grid */
.awards-wrap{
  /* gleiche Außenbreite wie deine Grid-Bühne */
  --awards-max: 1200px;           /* ggf. auf deinen realen Maxwert setzen */
  --awards-pad: 16px;             /* innerer Padding-Wert (Grid-Seitenabstand) */

  max-width: var(--awards-max);
  margin-inline: auto;
  padding-inline: var(--awards-pad);
  /* Container-Query aktivieren, damit 1cqw == 1% der .awards-wrap-Breite ist */
  container-type: inline-size;
}

/* Fallback: Wenn Browser KEINE Container-Queries kennen */
.awards-highlight{
  /* Basis (Fallback): minimal größer als das Grid */
  width: min( calc(var(--awards-max) + 120px), 96vw );
  margin: clamp(16px, 3vw, 36px) auto;
}

/* Moderne Browser: exakt relativ zur awards-grid-Breite skalieren */
@supports (width: 1cqw) {
  .awards-highlight{
    /* 110% der .awards-wrap-Breite (= etwas breiter als die Grid-Bühne) */
    width: min(110cqw, 96vw);
    /* zentriert „überhängend“: negative Ränder symmetrisch */
    margin-inline: calc((100cqw - min(110cqw, 96vw)) / 2);
    margin-block: clamp(16px, 3vw, 36px);
  }
}

/* Bühne im Highlight (Mitte breiter, Seiten flächig weiß auffüllen) */
.awards-highlight .awards-highlight-stage{
  display: grid;
  grid-template-columns: 1fr minmax(360px, 1.25fr) 1fr; /* Mitte betont */
  gap: clamp(10px, 1.8vw, 20px);
  align-items: stretch;
  background: #fff;
  border-radius: 10px;
}

.awards-highlight .stage-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  min-height: clamp(220px, 28vw, 440px);
  overflow: hidden;
  text-decoration: none;
}
.awards-highlight .stage-item img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* Weißräume werden automatisch gefüllt */
  display: block;
}

/* Mobile: untereinander stapeln */
@media (max-width: 900px){
  .awards-highlight .awards-highlight-stage{
    grid-template-columns: 1fr;
  }
  .awards-highlight .stage-item{
    min-height: clamp(200px, 48vw, 360px);
  }

  /* Auf sehr schmalen Screens lieber bündig mit der Grid-Breite bleiben */
  @supports (width: 1cqw) {
    .awards-highlight{
      width: 100cqw;                 /* nicht breiter als der Grid-Rahmen */
      margin-inline: 0;              /* kein Überhang */
    }
  }
}

/* Kopfbereich (Titel, Untertitel, Tags) – optional ident mit deiner Version */
/* Gemeinsamer Rahmen für Highlight + Grid */
.awards-wrap{
  /* gleiche Außenbreite wie deine Grid-Bühne */
  --awards-max: 1200px;           /* ggf. auf deinen realen Maxwert setzen */
  --awards-pad: 16px;             /* innerer Padding-Wert (Grid-Seitenabstand) */

  max-width: var(--awards-max);
  margin-inline: auto;
  padding-inline: var(--awards-pad);
  /* Container-Query aktivieren, damit 1cqw == 1% der .awards-wrap-Breite ist */
  container-type: inline-size;
}

/* Fallback: Wenn Browser KEINE Container-Queries kennen */
.awards-highlight{
  /* Basis (Fallback): minimal größer als das Grid */
  width: min( calc(var(--awards-max) + 120px), 96vw );
  margin: clamp(16px, 3vw, 36px) auto;
}

/* Moderne Browser: exakt relativ zur awards-grid-Breite skalieren */
@supports (width: 1cqw) {
  .awards-highlight{
    /* 110% der .awards-wrap-Breite (= etwas breiter als die Grid-Bühne) */
    width: min(110cqw, 96vw);
    /* zentriert „überhängend“: negative Ränder symmetrisch */
    margin-inline: calc((100cqw - min(110cqw, 96vw)) / 2);
    margin-block: clamp(16px, 3vw, 36px);
  }
}

/* Bühne im Highlight (Mitte breiter, Seiten flächig weiß auffüllen) */
.awards-highlight .awards-highlight-stage{
  display: grid;
  grid-template-columns: 1fr minmax(360px, 1.25fr) 1fr; /* Mitte betont */
  gap: clamp(10px, 1.8vw, 20px);
  align-items: stretch;
  background: #fff;
  border-radius: 10px;
}

.awards-highlight .stage-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.6vw, 18px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  min-height: clamp(220px, 28vw, 440px);
  overflow: hidden;
  text-decoration: none;
}
.awards-highlight .stage-item img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* Weißräume werden automatisch gefüllt */
  display: block;
}

/* Mobile: untereinander stapeln */
@media (max-width: 900px){
  .awards-highlight .awards-highlight-stage{
    grid-template-columns: 1fr;
  }
  .awards-highlight .stage-item{
    min-height: clamp(200px, 48vw, 360px);
  }

  /* Auf sehr schmalen Screens lieber bündig mit der Grid-Breite bleiben */
  @supports (width: 1cqw) {
    .awards-highlight{
      width: 100cqw;                 /* nicht breiter als der Grid-Rahmen */
      margin-inline: 0;              /* kein Überhang */
    }
  }
}

/* Kopfbereich (Titel, Untertitel, Tags) – optional ident mit deiner Version */
.awards-highlight .awards-highlight-head{
  text-align: center;
  margin-bottom: clamp(12px, 2vw, 20px);
}
.awards-highlight .awards-highlight-head h2{
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0;
  color: var(--farbe3, #222);
}
.awards-highlight .awards-highlight-head .subtitle{
  margin: .35rem 0 0;
  color: color-mix(in srgb, var(--farbe3, #222) 70%, #666 30%);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
}
.awards-highlight .awards-highlight-head .tags{
  display: inline-flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: .75rem 0 0 0;
}
.awards-highlight .awards-highlight-head .tags li{
  padding: .25rem .6rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  background: color-mix(in srgb, var(--farbe1, #b5905b) 15%, #fff);
  color: var(--farbe1, #b5905b);
  border: 1px solid color-mix(in srgb, var(--farbe1, #b5905b) 35%, #fff);
}