:root{
  --primary:#406f4f;
  --primary-dark:#2d4a38;
  --dark:#222;
  --light:#f9f9f9;
  --bg: #fafbf6;
  --bg-alt: #ffffff;
  --text: #262626;
  --text-light: #262626;;
  --section-width: 950px;
}

:root{
  --glass-dark-bg    : oklab(19.125% 0 -0.00002 / 0.55);   /* 55 % Deckkraft   */
  --glass-dark-stroke: hsla(0,0%,100%,.12);  /* feiner Rand      */
}


*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
/* ---------- Überschriften auf Josefin Sans setzen ---------- */
h1, h2, h3, h4, h5, h6{
  font-family:'League Spartan',sans-serif;
  font-weight:400;
  color: var(--text);
}

/* ─── Feste Kopfzeile – Dark Glass ─── */
.site-header{
  position: fixed;
  top: 1rem; left: 50%;               /* zentriert & etwas Abstand */
  transform: translateX(-50%);
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 2rem;                          /* Abstand Brand ↔ Navigation */

  padding: .8rem 2.2rem;
  max-width: 1180px;                  /* o. k. fürs 16:9-Hero     */


  /* ↓↓↓ Glassmorphism ↓↓↓ */
  background: var(--glass-dark-bg);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--glass-dark-stroke);
  border-radius: 3rem;                /* „Pill“-Form */
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  list-style:none;
}

.brand{
  font-family:'Josefin Sans',sans-serif;
  letter-spacing:.25rem;
  text-transform:uppercase;
  font-weight:600;
  font-size:.9rem;
  color:var(--light);
  text-decoration:none;

  transition:opacity .2s;
  position:relative;
  overflow:hidden; 
}
.main-nav{
  display:flex;
  gap:2rem;
  list-style:none;
  margin-left:auto;
}
.main-nav a{
  font-family:'Josefin Sans',sans-serif;
  letter-spacing:.25rem;
  text-transform:uppercase;
  font-weight:600;
  font-size:.9rem;
  color:var(--light);
  text-decoration:none;
  transition:opacity .2s;
  position:relative;
  overflow:hidden; 
}

.main-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;                     /* Abstand unter dem Text        */
  width:100%;
  height:2px;
  background:var(--light);/* fällt zurück auf Primärfarbe  */
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{
  transform:scaleX(1);             /* Linie fährt sanft aus         */
}

/* ───────── Desktop: Burger ausblenden (>720 px) ───────── */
@media (min-width: 721px) {
  /* Burger-Icon (auf großen Screens nicht nötig) */
  .burger{
    display:none;           /* Desktop: Knopf verstecken */
    background:none;
    border:0;
  }
  .burger span{
    display:block;
    width:24px;
    height:2px;
    background:#f5f5f5;
    margin:5px 0;
  }
}



section{padding:5.5rem 1.5rem 4rem;max-width:1200px;margin:auto}
h2.section-title{text-align:center;color:var(--primary);font-size:2rem;margin-bottom:1rem}
.section-sub{
  margin-top:-0.4rem;          /* etwas dichter an der H2 */
  margin-bottom:2.2rem;        /* Luft zum Konfigurator   */
  font-size:1.15rem;
  line-height:1.55;
  text-align:center;
  color:var(--text);
  max-width:600px;
  margin-inline:auto;          /* schön zentriert */
}



/* ---------- Hero ---------- */
.hero{
  min-height:85vh;
  background:url(Beispielbilder/backround_1.jpg) center/cover no-repeat;
  max-width:none;
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.hero::before{                    /* Abdunkelung */
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem;
}
.hero-title{
  background:url(assets/Logo_3.png) center/cover no-repeat;
  font-family:'League Spartan',sans-serif;
  font-weight:800;
  color:#fff;
  margin:0;
  font-size: 13rem;
}
.hero-sub{
  font-family:'Josefin Sans',sans-serif;
  letter-spacing:.5rem;
  font-size:clamp(1rem,2vw,1.5rem);
  color:#e8e8e8;
  margin-top:0rem;
}

.hero-logo{
  width:clamp(360px,70vw,960px);   /* vorher 180 – 480 px */
  height:auto;
  max-width:90%;
}


/* =========================================================
   LEISTUNGS-SHOWCASE  (nur innerhalb .services-showcase)
   ========================================================= */
.services-showcase{
  text-align:center;
}
.services-showcase .svc-intro{
  font-size:1.05rem; line-height:1.6;
  margin:1.75rem auto 3rem; max-width:48rem;
}

.services-showcase .svc-grid{
  list-style:none; padding:0; margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:3rem 2.5rem;
}


/* ───── Einzelelement (Leistungen) – Glasoptik ───── */
.services-showcase .svc{
  position: relative;            /* nötig für „isolation“            */
  isolation: isolate;            /* Backdrop nur innerhalb des DIV   */

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin-bottom: 0.9rem;

  /* ↓ ↓  Glassmorphism ↓ ↓ */
  background: #ffffff;
  border: 1px solid var(--glass-border);


  border-radius: 32px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}




/* Icon + Blob */
.services-showcase .icon-wrap{position:relative;width:145px;height:145px;margin-bottom:1.2rem}
.services-showcase .blob{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}
.services-showcase .icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70px;height:70px;object-fit:contain;
}

/* Titel, Preis, Listen */
.services-showcase .svc-title{
  font-family:'Josefin Sans',sans-serif;font-size:1.4rem;margin:.3rem 0 .25rem;
}
.services-showcase .svc-price{font-size:1.65rem;font-weight:700;margin-bottom:1.1rem}
.services-showcase .svc-feat{
  list-style:disc inside;text-align:left;line-height:1.55;font-size:.95rem;
  margin-bottom:1.3rem;max-width:18rem;
}
.services-showcase .svc-note{font-size:.85rem;color:var(--text-light)}

/* Mobile Anpassungen */
@media(max-width:560px){
  .services-showcase .icon-wrap{width:115px;height:115px}
  .services-showcase .icon{width:44px;height:44px}
  .services-showcase .svc-title{font-size:1.25rem}
  .services-showcase .svc-price{font-size:1.45rem}
}



/* ───────────── Über-mich-Block ───────────── */
.about-section{
  padding-top:5.5rem;                     /* gleiche Section-Abstände */
}

.about-wrapper{
  display:flex;
  gap:2.5rem;
  align-items:stretch;   /* statt flex-start  → beide Spalten gleich hoch */
  max-width:950px;
  margin:auto;
}

.about-photo{
  flex:0 0 280px;        /* feste Breite bleibt */
  height:100%;           /* gesamte Wrapper-Höhe einnehmen      */
}

.about-photo img{
  width:100%;
  height:100%;           /* streckt bis zum unteren Rand         */
  object-fit:cover;      /* Bild füllt den Rahmen proportional   */
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}


.about-text{
  flex:1 1 0;
  font-size:1.05rem;
  line-height:1.65;
  color:var(--text);
}
.about-text p + p{margin-top:1.25rem}     /* Abstand zwischen Absätzen */
.brand-name{
  color:var(--primary);
  font-weight:700;
}

/* Mobile-Layout */
@media(max-width:700px){
  .about-wrapper{flex-direction:column;gap:1.75rem}
  .about-photo{flex:0 0 auto}
}



/* ---------- Produkte ---------- */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem}
.product-card{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;overflow:hidden}
.product-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.product-content{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.product-content h3{margin-bottom:.5rem;color:var(--primary)}
.price{font-weight:700;margin-top:.75rem}




/* ───────────── Konfigurator – neuer Look ───────────── */
.config-preview{
  flex:0 0 340px;        /* vorher 600px */
  max-width:9000px;
}
.config-preview img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.config-card{
  border-radius:32px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:3rem 2.5rem;
  max-width:1152px;
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  background:var(--bg-alt);
}

.config-section{
  padding-top: 1.5rem;
}

@media(max-width:600px){
  .config-card{padding:2rem 1.5rem}
}

.step{
  border:0;
  margin-bottom:2rem;
  padding:0;
}
.step legend{
  font-family:'Josefin Sans',sans-serif;
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:1.1rem;
  color:var(--text);
}

.choice-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
}

.option{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}

/* Kreise – gleiche Größe für Art & Rahmen */
.option-circle{
  width:110px;
  height:110px;
  border-radius:50%;
  border:3px solid transparent;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border .25s,box-shadow .25s;
  cursor:pointer;
}
.option-circle img{
  width:70%;
  height:70%;
  object-fit:contain;
}

/* Untertitel */
.option-text{
  font-size:.9rem;
  font-family:'Josefin Sans',sans-serif;
  color:var(--text);
}


/* aktiver Zustand */
input[type="radio"]{display:none}
input[type="radio"]:checked + .option-circle{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,0,0,.08);
}

/* Choice-Grid etwas Abstand nach unten */
.choice-grid{
  gap:2rem 2.5rem;         /* Zeilen-, Spaltenabstand   */
  align-items:flex-start;
}

/* Motiv-Textarea */
#motif{
  width:100%;
  padding:1rem 1rem;
  border:1px solid #ccc;
  border-radius:8px;
  font:inherit;
  resize:vertical;
  min-height:120px;
}

/* Rahmen-Schritt erst sichtbar, wenn JS ihn auf 'flex' stellt */
.frame-step .option-circle{width:110px;height:110px}

/* Optionales Minimal-Styling */
.form-error{
  color:#b90000;
  font-size:.88rem;
  margin: .25rem 0 0 2.1rem;   /* etwas eingerückt unter die Kästchen */
}


/* Kleinere Screens */
@media(max-width:500px){
  .option-circle{width:90px;height:90px}
  .option-circle span{font-size:.8rem}
}

/* ---------- Consent-Bereich ---------- */
.consent{
  margin:2rem 0 1.5rem;
  max-width:800px;
}
.check-wrap{
  display:flex;
  align-items:top;
  gap:.65rem;
  margin-bottom:.8rem;
  font-size:1rem;               /* gleiche Größe wie Inputs */
  cursor:pointer;
}

/* ▸ schönes Custom-Checkbox */
.check-wrap input{display:none}
.check-custom{
  width:20px;
  height:20px;
  border:2px solid var(--primary-dark);
  border-radius:4px;
  flex-shrink:0;
  position:relative;
  transition:background .2s,border-color .2s;
}
.check-wrap input:checked + .check-custom{
  background:var(--primary);
  border-color:var(--primary);
}
.check-wrap input:checked + .check-custom::after{
  content:'';
  position:absolute;
  left:4px;
  top:1px;
  width:6px; height:11px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}

.note{
  font-size:.88rem;
  color:var(--text-light);
  line-height:1.5;
  margin-top:.2rem;
}

/* Button mittig, voller Look beibehalten */
.submit-btn{
  padding:.9rem 3rem;
  font-size:1.05rem;
  
}
@media(max-width:480px){
  .submit-btn{width:100%}
}

/* ---------- Höhe – quadratische Buttons ---------- */
.square-btn{
  width:320px;
  height:160px;
  border-radius:16px;
  overflow:hidden;
  border:3px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border .25s,box-shadow .25s;
}
.square-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.h-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
input[name="height"]{display:none}
input[name="height"]:checked + .square-btn{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,0,0,.08);
}

/* mobile etwas kleiner */
@media(max-width:500px){
  .square-btn{width:220px;height:150px}
}


/* ---------- FAQ ---------- */
.faq details{background:var(--bg-alt);border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.05);padding:1rem;margin-bottom:.75rem}
.faq summary{font-weight:600;color:var(--primary);cursor:pointer;list-style:none}
.faq p{margin-top: 5px;}

#faq .faq{
  max-width: 900px;  /* 950 px  */
  margin-inline: auto;              /* zentrieren */
}

/* ---------- Kontakt ---------- */
.contact{max-width:700px;margin:2rem auto 0;display:flex;flex-direction:column;gap:1.25rem}
.contact-intro{text-align:center;margin-bottom:1rem;font-size:1.1rem}
.field-group{display:grid;grid-template-columns:1fr 1fr;gap:1rem; margin-bottom: 1.3rem;}
.field-group input,textarea{padding:.9rem 1.1rem;border:1px solid #ccc;border-radius:6px;font:inherit;width:100%}
textarea{resize:vertical;min-height:160px}
button{align-self:flex-end;padding:.9rem 1.8rem;background:var(--primary);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .2s}
button:hover{background:var(--primary-dark)}
@media(max-width:600px){.field-group{grid-template-columns:1fr}button{align-self:stretch}}

/* ---------- Footer ---------- */
footer{text-align:center;padding:2rem 1rem;background:var(--dark);color:#fff }
footer a{color:#fff;text-decoration:underline}

/* ---------- Modal (Popup) für Bildvergrößerung ---------- */
.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.8)}
.modal-content{margin:auto;display:block;max-width:90%;max-height:85vh;margin-top:5vh;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,0.5)}
.modal-close{position:absolute;top:1rem;right:1.5rem;color:#fff;font-size:2rem;font-weight:bold;cursor:pointer;transition:color 0.2s}
.modal-close:hover{color:#ddd}

/* ---------- Hinweise ---------- */
.hinweise{color: var(--text);}

/* ───────── Basisbreite – identisch zum Konfigurator ───────── */
:root{
  --content-width: 1300px;          /* gleiche Max-Breite wie .config-card */
}

.services-narrow{
  padding-top:5.5rem;
}

.services-wrap{
  max-width:var(--content-width);
  margin:3rem auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}

/* ───────── Kartenstil ───────── */
.svc-card{
  border-radius:28px;
  padding:2.5rem 2rem 2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  color:#000;
  background:#cbd8c6;             /* wird pro Karte überschrieben */
}

/* Farben beibehalten */
.svc-card.digital{background:#c9d4c1;}
.svc-card.print  {background:#b5cca0;}
.svc-card.framed {background:#8fa577;}

/* Icon-Kreis */
.svc-icon{
  width:108px;height:108px;
  margin:0 auto 1.8rem;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.svc-icon img{width:52px;height:52px}

/* Überschrift & Preis */
.svc-card h3{
  font-family:'Josefin Sans',sans-serif;
  font-size:1.3rem;font-weight:600;margin-bottom:.4rem;
}
.svc-price{
  font-size:1.85rem;font-weight:800;margin-bottom:1.3rem;
}

/* Liste & Hinweis */
.svc-list{
  text-align:left;list-style:disc inside;font-size:.95rem;line-height:1.55;
  margin-bottom:1.8rem;
}
.svc-note{
  font-size:.88rem;color:var(--text-light);
  margin-top:auto;
}

/* Hover-Lift für Interaktivität */
.svc-card:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  transition:transform .25s,box-shadow .25s;
}

/* Mobile – einspaltig & kompakter */
@media(max-width:500px){
  .svc-icon{width:92px;height:92px}
  .svc-icon img{width:46px;height:46px}
  .svc-card h3{font-size:1.15rem}
  .svc-price{font-size:1.6rem}
}



/* ---------- Responsive Height-Choice ---------- */
.height-choice{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;                       /* gleichmäßiger Abstand */
}

/* jede Option nimmt 1/3 Breite abzüglich Gap ein */
.height-choice .h-option{
  flex:1 1 calc(33.333% - 2rem);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Quadrat füllt die ganze Breite, behält Seiten­verhältnis via aspect-ratio */
.square-btn{
  width:100%;
  aspect-ratio:16 / 9;            /* gleiche Proportion für alle Bilder */
  border-radius:16px;
  overflow:hidden;
  border:3px solid transparent;
  position:relative;
  cursor:pointer;
  transition:border .25s,box-shadow .25s;
}
.square-btn img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Aktiv-State bleibt gleich */
input[name="height"]:checked + .square-btn{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,0,0,.08);
}

/* Mobile – unter 700 px nur 1 pro Reihe */
@media(max-width:700px){
  .height-choice .h-option{flex:1 1 100%}
}



/* ───────── 1 · Hero (Titelbild) – Mobile Fix ───────── */
@media(max-width:600px){
  .hero{
    min-height:70vh;                 /* nicht zu hoch, aber groß genug  */
    background-position:center;      /* Bildmitte zentrieren            */
    background-size:cover;           /* immer voll ausfüllen            */
    background-attachment:scroll;    /* Parallax abschalten (ruckelt)   */
  }

  /* Logo nicht zu wuchtig */
  .hero-logo{
    width:85vw;                      /* relativ zur Viewport-Breite     */
    max-width:360px;
  }
}

/* ───────── 2 · Konfigurator-Kreise – flexibles Grid ───────── */

/* Gemeinsame Grid-Basis für Art- und Rahmenwahl */
.choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  gap:1.25rem 1rem;                  /* Zeilen- / Spaltenabstand        */
  justify-items:center;
  border: 0px;
}

/* Kleinstes Viewport: alles untereinander statt zwei Zeilen */
@media(max-width:380px){
  .choice-grid{
    grid-template-columns:1fr;       /* je 1 Kreis pro Zeile            */
  }
}

/* Option-Kreise dürfen auf schmalen Screens kleiner werden */
@media(max-width:480px){
  .option-circle{
    width:90px; height:90px;
  }
}

/* ───────── Collage-Layout ───────── */
:root{
  --content-width: 950px; /* gleicher Kanal wie Konfigurator */
}

/* Abschnitt-Rahmen */
.collage{
  padding-top:5.5rem;
}
.collage-grid{
  max-width:var(--content-width);
  margin:3rem auto 0;
  display:grid;
  gap:2rem;
  /* flexible Spalten: min 260 px, wächst bis 1 fr */
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  border: 0px;
}

/* Grund-Item */
.item{
  background:var(--bg-alt);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

/* Bilder im 4 : 3-Querformat */
.item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* Texte */
.item figcaption,
.item.text{
  padding:1.3rem 1.5rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.item h3,
.item h4{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  color:var(--primary-dark);
  margin:0;
}
.item p{
  font-size:.95rem;
  line-height:1.55;
  color:var(--text);
}

/* großes Leitbild – nimmt 2 × 2 Räume */
.large{
  grid-column:span 2;
  grid-row:span 2;
}

/* reiner Textblock */
.item.text{
  justify-content:center;
  background:var(--bg);
}

/* Hover-Effekt für Bilder */
.item:not(.text):hover img{
  transform:scale(1.04);
  transition:transform .3s ease;
}

/* Mobile: alles einspaltig */
@media(max-width:560px){
  .collage-grid{
    grid-template-columns:1fr;
  }
  .large{grid-column:auto;grid-row:auto}
}

/* 2 · Feldgruppen (fieldset) – nur Trennlinie oben, kein Kasten ----- */
.step fieldset{
  border:0;                                   /* Standard-Rahmen weg  */
  padding:0 0 2.2rem;
  margin:0;
  position:relative;
}
.step fieldset + fieldset{                    /* Abstand zw. Gruppen  */
  margin-top:1.75rem;
}
.step fieldset legend{
  font-family:'Josefin Sans',sans-serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--text);
  padding:0 .25rem;
}

legend{
  font-family:'Josefin Sans',sans-serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--text);
  padding:0 .25rem;
}


/* 5 · „Zum Warenkorb hinzufügen“ Button ----------------------------- */
.add-cart-btn{
  background:var(--primary);
  color:#fff;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition:background .2s;
  padding:.9rem 3rem;
  font-size:1.05rem;
  align-self:flex-start;  /* falls .cfg-main als Flex-Column läuft */
  max-width: 500px;
}
.add-cart-btn:hover{background:var(--primary-dark);}
.add-cart-btn:disabled{opacity:.55;cursor:not-allowed;}

/* ---------- Step-Navigation ---------- */
.steps-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps-nav li {
  position: relative;
  flex: 1 1 33%;
  text-align: center;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  padding-bottom: .5rem;
}

.steps-nav li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-block;
  width: 2.2rem;
  aspect-ratio: 1/1;
  line-height: 2.2rem;
  background: #dcdcdc;
  color: #fff;
  border-radius: 50%;
  margin-right: .5rem;
  transition: background .2s;
}

.steps-nav li.is-active,
.steps-nav li:hover {
  color: var(--primary-dark);
}

.steps-nav li.is-active::before,
.steps-nav li:hover::before {
  background: var(--primary);
}

/* Verbindende Linie */
.steps-nav li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.1rem; left: 50%; right: -50%;
  height: 3px;
  background: var(--primary);
  z-index: -1;
}
.steps-nav li.is-active:not(:last-child)::after {
  background: var(--primary);
}


/* Remove-Schaltfläche im Warenkorb */
.remove-item{
  background:none;
  color:#888;
  font-size:1.25rem;
  line-height:1;
  padding:.25rem .5rem;
}
.remove-item:hover{ 
  color:var(--light);
  background: var(--primary);
}

/* ===== Warenkorb-Tabelle ====================================== */
.cart-wrapper{ overflow-x:auto; margin-bottom:1.65rem; }

.cart-table{
  width:100%;
}

.cart-table th,
.cart-table td{
  padding:.9rem 1rem;
  border-bottom:1px solid var(--clr-border);
  text-align:left;
  vertical-align:middle;
  font-size:.96rem;
}

.cart-table td.note {
  max-width: 14rem;          /* beliebig anpassen */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* „…“ */
}

.cart-table thead{
  background:#f0f3f0;
  font-weight:600;
}

.cart-total-label{
  font-weight:700;
  text-align:right;
}
.cart-total-price{
  font-weight:700;
  color:var(--clr-primary-dark);
  font-size:1.1rem;
}

/* ===== Cart-Action-Buttons ==================================== */
.cart-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  justify-content:flex-end;
}

/* ===== Responsive Tweaks ====================================== */
@media(max-width:680px){
  .choice-grid{ --min:8rem; }
  .steps-nav{ flex-direction:column; gap:.9rem; }
  .steps-nav li:not(:last-child)::after{ display:none; }
}

/* ───── Fehlermeldungen ───── */
.field-wrap { position: relative; }

.error-msg{
  display:block;
  margin-top:.25rem;
  font-size:.8rem;
  color:#b90000;
}

/* Grund-Layout des Blocks */
.config-block{max-width:960px;margin:3rem auto;padding:2.5rem;border-radius:28px;
  background:var(--bg-alt); box-shadow:
      0 1px 3px rgba(0,0,0,.06),
      0 10px 22px rgba(0,0,0,.05);}

/* Gruppen */
.cfg-group{border:0;}
.cfg-group legend{font-family:'Josefin Sans',sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:.85rem;color:var(--text)}

/* Waagrechte Auswahlreihen */
.choice-row{display:flex;flex-wrap:wrap;gap:1.2rem}

/* Rund-Tiles (Kategorie) */
.radio-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer}
/* Rahmen-Art – Icon-Kreis */
.radio-tile .icon{
  width:110px;                 /* deine bisherigen Maße */
  height:110px;
  border:3px solid #cfd3cc;    /* grauer Ring */
  border-radius:50%;           /* wird zur Maske */
  overflow:hidden;             /* alles außerhalb abschneiden */
  display:flex;                /* kann so bleiben */
  align-items:center;
  justify-content:center;
}


.radio-tile input{display:none}
.radio-tile input:checked+span.icon{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.radio-tile img{width:60%;height:60%;object-fit:contain}
.radio-tile .label{font-size:.9rem}

/* Rund-Tiles (Kategorie) */
.radio-tile_2{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer}

/* Rahmen-Art – Icon-Kreis */
.radio-tile_2 .icon{
  width:110px;                 /* deine bisherigen Maße */
  height:110px;
  border:3px solid #cfd3cc;    /* grauer Ring */
  border-radius:50%;           /* wird zur Maske */
  overflow:hidden;             /* alles außerhalb abschneiden */
  display:flex;                /* kann so bleiben */
  align-items:center;
  justify-content:center;
}

.radio-tile_2 .icon img{
  width:100%;
  height:100%;
  object-fit:cover;            /* füllt jede Ecke, beschneidet Überschuss */
  transform:scale(1.15);       /* optionaler 15 %-Zoom, damit kein Rand bleibt */
}

.radio-tile_2 input{display:none}
.radio-tile_2 input:checked+span.icon{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.radio-tile_2 img{width:60%;height:60%;object-fit:contain}
.radio-tile_2 .label{font-size:.9rem}

/* Rechteck-Buttons (Größe + Rahmen) */
.radio-rect{position:relative}
.radio-rect input{display:none}
.radio-rect span{display:inline-block;padding:.65rem 1.4rem;border:2px solid #cfd3cc;border-radius:10px;font-size:.9rem;transition:all .25s;cursor:pointer}
.radio-rect input:checked+span{border-color:var(--primary);background:#f6faf7}
textarea#note{width:100%;border:1px solid #cfd3cc;border-radius:10px;padding:1rem;font:inherit;resize:vertical}





/* Sticky Sidebar – Desktop rechts, Mobile oben */
.price-box{
  right:0; margin-left:auto;
  width:350px; background:#fff; border-radius:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  padding:1.2rem 1.4rem; font-size:.95rem;
}
.price-box h3{font-size:1rem;font-weight:600;margin-bottom:.8rem;color:var(--primary-dark)}
.price-line, .price-total{display:flex;justify-content:space-between;padding:.25rem 0}
.price-total{font-weight:700;font-size:1.05rem}
.price-total span:last-child{color:var(--primary)}
@media(max-width:720px){
  .price-box{position:relative;width:100%;margin-bottom:1.5rem}
}

/* 2-Spalten-Layout für den Konfigurator */
.cfg-layout{
  display:grid;
  grid-template-columns:1fr 380px;   /* Hauptspalte | Sidebar */
  gap:2.5rem;
  align-items:flex-start;             /* ①  statt stretch  */
}

/* linke Spalte füllt Höhe, rechte klebt per sticky */
.cfg-main{display:flex;flex-direction:column;gap:1.8rem}

/* Mobile < 780 px: untereinander */
@media(max-width:780px){
  .cfg-layout{grid-template-columns:1fr}
  .price-box{    /* Sidebar über die Felder schieben */
              width:100%;
              margin-bottom:1.5rem}
}

.cfg-main .submit-btn{
  align-self:flex-start;  /* falls .cfg-main als Flex-Column läuft */
}

/* — Allgemeine Helfer — */
:root{
  --ease-fast: cubic-bezier(.4,0,.2,1);
  --ring: 0 0 0 4px rgba(64,111,79,.15);
}

/* Rund-Tiles (Produktkategorie) */
.radio-tile .icon{
  transition: transform .25s var(--ease-fast), box-shadow .25s var(--ease-fast);
}
.radio-tile:hover   .icon{ transform: translateY(-3px) scale(1.04); box-shadow:var(--ring);}
.radio-tile:focus-within .icon{ box-shadow:0 0 0 3px rgba(64,111,79,.35); }

/* Rund-Tiles (Produktkategorie) */
.radio-tile_2 .icon{
  transition: transform .25s var(--ease-fast), box-shadow .25s var(--ease-fast);
}
.radio-tile_2:hover   .icon{ transform: translateY(-3px) scale(1.04); box-shadow:var(--ring);}
.radio-tile_2:focus-within .icon{ box-shadow:0 0 0 3px rgba(64,111,79,.35); }

/* Rechteck-Buttons (Größe / Rahmen) */
.radio-rect span{
  transition: background .25s var(--ease-fast), transform .25s var(--ease-fast), box-shadow .25s;
}
.radio-rect:hover   span{ transform:translateY(-2px); box-shadow:var(--ring);}
.radio-rect input:focus-visible + span{ box-shadow:0 0 0 3px rgba(64,111,79,.35); }

/* „Zum Warenkorb hinzufügen“ */
.add-cart-btn{
  transition: transform .2s var(--ease-fast), box-shadow .2s;
}
.add-cart-btn:hover   { transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12);}
.add-cart-btn:active  { transform: translateY(1px);  box-shadow:0 3px 8px rgba(0,0,0,.18);}

@keyframes pulse-glow{
  0%  { box-shadow:0 0 0 0 rgba(64,111,79,.35);}
  70% { box-shadow:0 0 0 6px rgba(64,111,79,0);}
  100%{ box-shadow:0 0 0 0 rgba(64,111,79,0);}
}

input[type="radio"]:checked + .icon,
input[type="radio"]:checked + span,        /* rechteckige Buttons */
.radio-rect input:checked + .thumb{
  animation:pulse-glow .9s var(--ease-fast);
}


@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-5px)}
  40%,80%{transform:translateX( 5px)}
}

input.is-invalid{
  animation:shake .25s linear 1;
}

.price-box{
  opacity:0; transform: translateY(-12px);
  transition: opacity .5s .15s var(--ease-fast), transform .5s .15s var(--ease-fast);
}
.price-box.is-ready{                       /* Klasse wird via JS gesetzt */
  opacity:1; transform:none;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE-UPGRADE 2025-06 – by ChatGPT
   ---------------------------------------------------------------
   1) Burger-Menü: voll­flächiges Off-Canvas, sanfte Animation,
      Body-Lock, Fokus-Trap-ready.
   2) Fein-Tweaks für Hero, Service-Grid & Collage
   3) Utility-Klassen, falls du sie brauchen willst
   ════════════════════════════════════════════════════════════════ */

/* ─── 1 · Off-Canvas Navigation ───────────────────────────────── */
@media (max-width: 768px) {

  /* Grund­layout ------------------------------------------------- */
  .site-header         { position: fixed; width:100%; display:flex;}
  .site-header nav     {flex:1; display:flex; align-items:center; }           /* stacking context */

  /* Menü-Panel */
  .site-header nav ul.main-nav {
    position: fixed;                /* überdeckt komplette Viewport-Breite */
    inset: 0 0 0 auto;              /* rechts andocken                       */
    width: 80vw; max-width: 18rem;
    height: 100vh;
    padding: 5.5rem 2rem 2rem;      /* Abstand für den Header - Height */
    flex-direction: column;
    gap: 1.75rem;

    background: var(--dark);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(.22,1,.36,1);
    overflow-y: auto;
    z-index: 999;
  }

  /* Sichtbar-Zustand (Klasse wird via JS getoggelt) */
  body.nav-open .site-header nav ul.main-nav {
    transform: translateX(0);
  }

  /* Scroll-Lock, sobald das Panel offen ist */
  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Ästhetik der Menüpunkte ------------------------------------- */
  .site-header nav ul.main-nav a {
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: .02em;
    color: #fafafa;
  }

  /* Burger-Icon selbst – animiertes Kreuz ----------------------- */
  .burger {
    margin-left:auto;
    position: relative; z-index: 1000;                     /* über Panel */
    width: 36px; height: 28px; cursor: pointer; display: flex;
    flex-direction: column; justify-content: space-between;
    background: none; border: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .burger span {
    width: 100%; height: 3px; background: #fff;
    border-radius: 2px; transition: transform .4s, opacity .3s;
  }
  /* Zustand „offen“ */
  body.nav-open .burger span:nth-child(1) { transform: translateY(12.5px) rotate(45deg);}
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-12.5px) rotate(-45deg);}
}

/* ─── 2 · Hero-Bild: iOS Parallax-Fix + Seiten­verhältnis ─────── */
@media (max-width: 600px) {
  .hero {
    background-attachment: scroll;      /* iOS ruckelte vorher */
    min-height: 68vh;
  }
  .hero-logo { max-width: 75vw; }
}

/* ─── 3 · Services-Grid: kompakter 2-Spalter statt 1-Spaltig ─── */
@media (max-width: 560px) {
  .services-showcase .svc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem 1.4rem;
  }
}

/* ─── 4 · Collage: horizontales Scrollen statt Schrumpfen ────── */
@media (max-width: 560px) {
  .collage-grid {
    display: flex; overflow-x: auto; gap: 1.5rem;
    scroll-snap-type: x mandatory; padding-bottom: .5rem;
  }
  .collage-grid .item {
    flex: 0 0 80%; max-width: 80%; scroll-snap-align: start;
  }
}

/* ─── 5 · Kleinere Utility-Klassen (optional) ─────────────────── */
.hide-mobile   { display: none !important; }
@media (min-width: 769px) { .hide-desktop { display: none !important; } }

/* ---------- Burger soll transparent bleiben ---------- */
.burger{
  background: none !important;   /* Grundzustand */
}
.burger:hover,
.burger:focus{
  background: none !important;   /* auch bei Hover/Focus */
}




/* ─── 1 · Grund-Wrapper ─────────────────────────────────────── */
.gallery-wrap {
  padding-top: 5.5rem;                /* gleiches Vertical-Rhythmus */
  max-width: var(--content-width);    /* 950 px */

}

/* ─── 2 · Alternierende Cards (bsp_1 … 6) ───────────────────── */
.alt-cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Card-Look wie Konfigurator */
.alt-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--bg-alt);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  align-items: center;
}

/* Bildcontainer (links / rechts) */
.alt-media {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.alt-media img {
   width: 100%;
  height: 100%;        /* <- neu */
  aspect-ratio: 3 / 2; /* fixe Kachelhöhe */
  object-fit: cover;   /* überschüssige Teile abschneiden */
  display: block;      /* beugt Lücke unter Img vor */
}

/* Textbereich */
.alt-content { display: flex; flex-direction: column; gap: .75rem; }
.alt-heading {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--primary-dark);
}

/* Wechselnde Ausrichtung via nth-child */
.alt-card:nth-child(even) .alt-media { order: 2; }

/* Breakpoint: ab 860 px zweispaltig */
@media (min-width: 860px) {
  .alt-card { grid-template-columns: 1fr 1fr; }
}

/* ─── 3 · Vertikaler Zeitstrahl (history_1 … 4) ─────────────── */
.timeline-title {        /* kleine Überschrift über der Leiste */
  margin: 5rem 0 2.5rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

.v-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-timeline::before {               /* zentrale Linie */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: translateX(-50%);
}

/* Einzelschritt */
.v-step {
  position: relative;
  width: 50%;
  padding: 2rem 2.5rem;
}
.v-step:nth-child(odd)  { left: 0;   text-align: right; }
.v-step:nth-child(even) { left: 50%; text-align: left; }

.v-step figure {
  background: var(--bg-alt);
  border-radius: 24px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  padding: 1.5rem;
}
.v-step img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Connector-Dot */
.v-step::after {
  content: '';
  position: absolute;
  top: calc(50% - 6px);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid var(--bg-alt);
}
.v-step:nth-child(odd)::after  { right: -7px; }
.v-step:nth-child(even)::after { left:  -7px; }

/* Mobile: einspaltig, Linie links */
@media (max-width: 720px) {
  .v-timeline::before { left: 1.3rem; }
  .v-step {
    width: 100%;
    padding-left: 3.5rem;
    text-align: left;
    left: 0 !important;
  }
  .v-step::after { left: 1.3rem; }
}

/* ─── Compact Timeline – dichter & leicht überlappend ───────── */
.v-step {                         /* weniger „Luft“ in den Cards   */
  padding: 1.25rem 1.8rem;
}

/* alle Cards ab #2 etwas dichter zur vorherigen schieben         */
.v-step:not(:first-child) {
  margin-top: -2.75rem;          /* Wert gern feinjustieren       */
}

/* even-Cards zusätzlich leicht anheben → diagonaler Versatz      */
.v-step:nth-child(even) {
  transform: translateY(-1.25rem);
}

/* Mobile bleibt sauber gestapelt                                 */
@media (max-width: 720px) {
  .v-step:not(:first-child) { margin-top: 1rem; }   /* kein Überlapp */
  .v-step:nth-child(even)   { transform: none; }
}





/* ─── Grundkarte ────────────────────────────────────────────── */
.style-slider{
  max-width: var(--content-width);
  margin: 4rem auto 0;
  background: var(--bg-alt);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  padding: clamp(2rem,5vw,3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

/* Hauptbild */
.slider-main{
  width: 100%; max-width: 640px;
  aspect-ratio: 4/3;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}
.slider-main img{
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .4s var(--ease-fast);
}

/* Thumbnails */
.slider-thumbs{
  display: flex; gap: 1.2rem; list-style: none; padding: 0; margin: 0;
}
.slider-thumbs li{ cursor: pointer; }
.slider-thumbs img{
  width: 110px; aspect-ratio: 1/1;
  border-radius: 12px; object-fit: cover;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  transition: transform .25s var(--ease-fast), box-shadow .25s var(--ease-fast);
}
.slider-thumbs img:hover{
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* aktiv markiertes Thumb (das ehemals große) */
.slider-thumbs img.is-new{ outline: 3px solid var(--primary); }

/* Mobile – Thumbs umbrechen */
@media(max-width: 500px){
  .slider-thumbs{ flex-wrap: wrap; justify-content: center; }
}

/* ─── Kleinunternehmer-Hinweis ──────────────────────────────── */
.tax-note{
  max-width: var(--content-width);
  margin: 0.75rem auto 0;        /* leichter Abstand zum Warenkorb */
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: right;             /* rechtsbündig unter der Summe  */
}
@media(max-width: 560px){
  .tax-note{text-align:center;}
}


/* Overlay-Label unten rechts */
.slider-main{ position:relative; }
.style-label{
  position:absolute; right:1rem; bottom:1rem;
  padding:.35rem .75rem;
  background:rgba(0,0,0,.65);
  color:#fff; font-size:.9rem;
  border-radius:8px;
  pointer-events:none;            /* nicht anklickbar */
}

/* ===========================================================
   1 · KONFIGURATOR – Kreise zentrieren
   =========================================================== */

/* a) gesamte Reihe mittig ausrichten */
.choice-row{
  justify-content: center;             /* vorher: flex-Start */
}

/* b) jedem Tile eine feste Breite geben – sorgt für bündige Kacheln */
.radio-tile,
.radio-tile_2{
  width: 120px;                        /* Icon (110) + etwas Rand */
  text-align: center;
}

/* c) Mobile etwas verkleinern, damit sie weiter 2-spaltig bleiben */
@media(max-width:480px){
  .radio-tile,
  .radio-tile_2{ width: 96px; }

  .radio-tile  .label,
  .radio-tile_2.label{ font-size: .8rem; }
}


/* ===========================================================
   MOBILE SERVICE-CARDS – Ein-Klick-Facelift
   =========================================================== */
@media (max-width:560px){

  /* 1 · Karten horizontal scrollen lassen */
  .services-showcase .svc-grid{
    display:flex;
    gap:1.4rem;                         /* Abstand zwischen Cards   */
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-inline:1rem;                /* Rand links/rechts        */
  }

  /* iOS Bounce vermeiden */
  .services-showcase .svc-grid::-webkit-scrollbar{display:none;}

  /* 2 · jede Card = Miniblock, volle Breite − 2rem                */
  .services-showcase .svc{
    flex:0 0 calc(100% - 2rem);
    scroll-snap-align:center;           /* snappt schön ein         */
    padding:1.6rem 1.2rem 1.8rem;
    border-radius:22px;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }

  /* 3 · Icon-Fläche größer, luftholen                              */
  .services-showcase .icon-wrap{
    width:120px;height:120px;
    margin:0 auto 1.2rem;
  }
  .services-showcase .icon{width:56px;height:56px;}

  /* 4 · Headline & Preis etwas kleiner (bricht nicht um)           */
  .services-showcase .svc-title{
    font-size:1.15rem; text-align:center;
  }
  .services-showcase .svc-price{
    font-size:1.35rem; text-align:center;
  }

  /* 5 · Bullet-Liste kompakter, mit ✓ Symbol                       */
  .services-showcase .svc-feat{
    font-size:.9rem; margin-top:.8rem; padding-left:0;
    list-style:none;
  }
  .services-showcase .svc-feat li{
    position:relative; padding-left:1.25rem; margin-bottom:.35rem;
  }
  .services-showcase .svc-feat li::before{
    content:"✓";
    position:absolute; left:0; top:0;
    color:var(--primary); font-weight:600;
  }

}

/* ===========================================================
   SERVICE-CARDS – Info-Icon & Kaufen-Button
   =========================================================== */
.services-showcase .svc{ position:relative; }

/* Kaufen-Button */
.svc-buy{
  display:block;
  width:100%; margin-top:1rem;
  padding:.55rem 0;
  background:var(--primary);
  color:#fff; font-weight:600;
  border:none; border-radius:10px;
  cursor:pointer; transition:background .25s;
}
.svc-buy:hover{ background:var(--primary-dark); }

/* ===========================================================
   MODAL (Beispielanzeige)
   =========================================================== */
.svc-modal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  z-index:2000;
}
.svc-modal__dialog{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:90%; max-width:380px;
  background:#fff; padding:1.2rem 1rem 1.6rem;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.svc-modal__dialog img{
  width:100%; border-radius:12px; margin-bottom:1rem;
}
.svc-modal__close{
  position:absolute; top:.3rem; right:.6rem;
  background:none; border:0; font-size:1.6rem;
  cursor:pointer; line-height:1;
}



/* ===========================================================
   A · Allgemein – „App-Feeling“ (kein horizontales Wischen)
   =========================================================== */
html,body{overflow-x:hidden;}
body{overscroll-behavior-x:contain;} /* Safari: verhindert Bounce */

/* ===========================================================
   B · Konfigurator – Produktkreise immer 2×2
   =========================================================== */
@media(max-width:768px){
  /* nur die ERSTE choice-row (Produktkategorie) betreffen */
  .cfg-group:first-child .choice-row{
    display:grid;
    grid-template-columns:repeat(2,1fr); /* 2 Spalten */
    gap:1.6rem 2.2rem;                  /* Zeile | Spalte */
    justify-items:center;
  }
}
@media(max-width:768px){
  #frameWrap .choice-row{              /* spezifisch für den Rahmen-Step */
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.6rem 2.2rem;                /* Zeilen | Spalten */
    justify-items:center;
  }
}



/* ===========================================================
   D · Kleinunternehmer-Hinweis dezenter
   =========================================================== */
.tax-note{
  font-size:.75rem;
  opacity:.65;
  text-align:center;
  max-width:28rem;
  margin: .5rem auto 0;
}

/* ===========================================================
   SCROLL-SPY  – aktiver Menüpunkt
   =========================================================== */
.main-nav a.is-current{
  color:var(--light);                    /* wenn du mehr Kontrast willst */
}
.main-nav a.is-current::after{
  transform:scaleX(1);                   /* Linie dauerhaft ausgeklappt */
}

/* Marker besitzt keinen Einfluss auf Layout */
.spy-marker{
  position:absolute;
  top:80px;                      /*  = Header + etwas Puffer   */
  left:0;
  width:1px; height:1px;
  pointer-events:none;
}
section{position:relative;}      /* nötig, damit top:80px greift */





/* ---- 4-er-Grid + Jahreszahl-Overlay ---- */
.alt-media.history-4{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 × 2 */
  gap: .5rem;
}

.alt-media.history-4 .year-img{
  position: relative;               /* Bezug für das Label */
}

.alt-media.history-4 img{
  width: 100%;
  height: 100%;
  object-fit: cover;                /* bleibt 4 : 3 dank alt-media-defaults */
  aspect-ratio: 4 / 3;
  display: block;
}

.alt-media.history-4 .year{
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,.65); /* leichte Kontur */
}

/* Optional: auf sehr schmalen Screens stapeln */
@media (max-width: 480px){
  .alt-media.history-4{
    grid-template-columns: 1fr;     /* 4 Bilder untereinander */
  }
}

/* === Zahlungs-Popup – Glass-Look & zentrierte Buttons ============== */
.pay-modal{
  display:none; 
  /* bleibt weiter display:none bis JS „block“ setzt */
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.45);           /* leicht abdunkeln            */
}


.pay-dialog{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:92%; max-width:420px;
  padding:2rem 2rem 2.6rem;
  border-radius:28px;

  background:var(--bg-alt);             /* = dein Standard-Weiß    */
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.25);

  /* Buttons zentrieren */
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}

.pay-dialog h3{
  margin:0 0 .9rem;
  font-family:'Josefin Sans',sans-serif;
  font-size:1.35rem; font-weight:600;
  color:var(--primary-dark);
  text-align:center;
}

/* Einheits-Buttons */
.pay-btn{
  width:clamp(220px,80%,320px);         /* schmale Max-Breite      */
  margin-inline:auto;                   /* wirklich mittig         */
  border-radius:12px;
  padding:1rem 1.2rem;
  font-size:1rem; font-weight:600;
  background:var(--primary); color:#fff;
  cursor:pointer;
}
.pay-btn:hover  { background:var(--primary-dark); }

/* Close-Icon kleiner & dezenter */
.pay-close{
  position:absolute; top:.8rem; right:1rem;
  font-size:1.4rem; line-height:1;
  background:none; border:0; color:#666; cursor:pointer;
  transition:color .2s;
  color:var(--primary-dark);
  padding: 1rem;
}
.pay-close:hover{ 
  color: var(--light);
  background-color: var(--primary); 
}


/* === Galerie – Instagram-Style 3×3 === */
.insta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* 3 Spalten */
  gap:1rem;
  list-style:none;
  margin:2.5rem 0 0;
  padding:0;
}

/* einzelne Kachel */
.insta-item{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);

  width: 100%;
  height: 100%;        /* <- neu */
  aspect-ratio: 3 / 2; /* fixe Kachelhöhe */
  object-fit: cover;   /* überschüssige Teile abschneiden */
  display: block;      /* beugt Lücke unter Img vor */
}

/* Bilder im festen 3:2-Verhältnis */
.insta-item img{
  width:100%;
  aspect-ratio:3/2;            /*  ➜ immer 3:2  */
  object-fit:cover;
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}


/* ─── Responsiv ─── */
/* Tablet: 2 Spalten, Mobile: 1 Spalte */
@media(max-width:800px){
  .insta-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .insta-grid{grid-template-columns:1fr;}
  .insta-item img{aspect-ratio:4/3;}     /* auf sehr schmalen Screens etwas höher */
  .insta_hidden{display: none;}}



.submit-btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* main.css oder <style> */
.disc-tag{
  color:#c00;          /* Rot als deutlicher Hinweis */
  font-size:.75rem;    /* etwas kleiner */
  line-height:1.2;
}

/* =========================================
   Warenkorb-Tabelle – feste Spaltenbreiten
   ========================================= */
#cartBody, #cartHead               { table-layout: fixed; width: 100%; }

#cartHead th:nth-child(1),         /* Produkt */
#cartBody td:nth-child(1)          { width: 22%; }

#cartHead th:nth-child(2),         /* Optionen */
#cartBody td:nth-child(2)          { width: 26%; }

#cartHead th:nth-child(3),         /* Bemerkung */
#cartBody td:nth-child(3)          { width: 28%; }

#cartHead th:nth-child(4),         /* Preis */
#cartBody td.price-cell            { width: 14%; text-align: right; }

#cartHead th:nth-child(5),         /* Entfernen-Button */
#cartBody td:nth-child(5)          { width: 10%; text-align: center; }

.price-cell { white-space: nowrap; }
.disc-tag   { color:#c00; font-size:.75rem; line-height:1.2; }



/* =====================================================
   CART-CARD   –  identisch zur grünen Preis-Box
   =====================================================*/
@media (max-width: 600px){

  .cart-table thead      { display:none; }          /* Head ausblenden  */
  .cart-wrapper          { overflow-x:hidden; }     /* Scrolling killen */

  /* ► jede Zeile wird zur Card   */
  .cart-table tbody tr{
    position:relative;
    display:block;
    margin:1.2rem 0;
    padding:1.25rem 1.4rem 1.35rem;
    border-radius:18px;
    background:#fff;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
  }

  /* 1 · Grund-Layout jeder Zelle -------------------------------- */
  .cart-table tbody td{
    display:flex;                 /* 2 Items: Label-Pseudo + Wert-Span */
    padding:.30rem 0;
    border:none;
    font-size:.92rem;
  }

  /* Label aus data-attr links   */
  .cart-table tbody td[data-label]::before{
    content:attr(data-label) ":";    /* ③ Doppelpunkte nur, wenn attr da */
    font-weight:600;
    flex:0 0 120px;                  /* feste Spaltenbreite links */
    text-align:left;
  }

  /* 3 · Wert rechts */
  .cart-table .cart-val{
    margin-left:auto;             /* schiebt ihn ganz nach rechts */
    white-space:nowrap;           /* kein Zeichen-Umbruch mehr     */
    text-align:right;
  }

  /* Werte rechtsbündig, kein Buchstaben-Umbruch  */
  .cart-table tbody td > *{
    white-space:nowrap;              /* ① verhindert Vertikalbruch   */
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cart-table tbody td.price-cell{ font-weight:700; }

  .old-price{ text-decoration:line-through; color:#888; font-weight:400; }
  .disc-tag { color:#c00; font-size:0.92rem; }

  /* Remove-Icon rechts oben   */
  .cart-table td.remove-cell{
    position:absolute; top:.95rem; right:1rem;
  }
  .cart-table .remove-item{
    background:none; border:0;
    font-size:1.3rem; line-height:1;
    color:#666; cursor:pointer;
  }

  /* ► Gesamt unten, NICHT in Card ◄ */
  .cart-table tfoot tr{
    display:flex;
    justify-content:space-between;
    margin-top:1.2rem;
    padding-top:.6rem;
    border-top:2px solid #e5e5e5;
    font-weight:700;
    font-size:1.05rem;
  }
  /* überflüssige Pseudo-Label vermeiden */
  .cart-table tfoot td::before{ content:none !important; }

  .cart-table tbody td{
    display:flex;
    justify-content:space-between;
  }

  .cart-table .cart-val{
    white-space:nowrap;         /* alles in einer Zeile */
  }
}


/* Mobile – attachment auf scroll zurücksetzen */
@media (max-width: 768px){
  .hero{
    background-attachment: scroll;   /* oder einfach weglassen */
    background:url(Beispielbilder/640px/header.avif) center/cover no-repeat;
  }
}