/* ==========================================================================
   Rebenmoment – Stylesheet
   Stand: Oktober 2026 (Edition Farbe + Klassik)

   Inhalt
   01  Variablen
   02  Basis & Typografie
   03  Layout-Helfer
   04  Header & Navigation
   05  Buttons & kleine Elemente
   06  Hero
   07  Sektionen & Editionen
   08  Edition Farbe – Farbumschalter
   09  Klassik – Sorten-Katalog
   10  Werte („Die Idee“)
   11  Kontakt & Footer
   12  Derzeit nicht im HTML verwendet
   13  Responsive
   ========================================================================== */


/* 01  Variablen
   ========================================================================== */
:root {
  --ink: #26382e;
  --olive: #697257;
  --sand: #fff8e9;
  --cream: #fffdf6;
  --gold: #b49a66;
  --line: #ded7ca;
}


/* 02  Basis & Typografie
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1,
h2,
h3,
.brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

h1 {
  font-size: clamp(3.2rem, 6.2vw, 6.4rem);
  line-height: 1.06;
  margin: 12px 0 24px;
}

h2 {
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.12;
  margin: 10px 0 24px;
}

h3 {
  font-size: 1.7rem;
  margin: 6px 0 12px;
}

p {
  margin: 0 0 18px;
}

a {
  color: inherit;
}

img {
  width: 100%;
  display: block;
}


/* 03  Layout-Helfer
   ========================================================================== */
.wrap {
  width: min(1200px, calc(100% - 48px));
  margin: auto;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  background: white;
  padding: 12px;
  z-index: 99;
}


/* 04  Header & Navigation
   ========================================================================== */
.top {
  background: #fffaf0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 85px;
  gap: 18px;
}

.brand {
  text-decoration: none;
  font-size: 1.65rem;
  letter-spacing: -.04em;
}

.brand small {
  display: block;
  font: 10px/1.4 system-ui;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #747a70;
}

nav {
  display: flex;
  gap: 25px;
}

nav a {
  text-decoration: none;
  font-size: .89rem;
}

nav a:hover {
  text-decoration: underline;
}

/* Hamburger-Button (nur auf Handy/kleinem Tablet sichtbar, siehe 13 Responsive) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}

.nav-toggle:focus-visible {
  outline: 3px solid #326856;
  outline-offset: 2px;
}

/* Geöffnet: die drei Linien werden zum X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* 05  Buttons & kleine Elemente
   ========================================================================== */
.eyebrow {
  letter-spacing: .19em;
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #747a62;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 13px 26px;
  text-decoration: none;
  border-radius: 2px;
  font-size: .92rem;
}

.btn:hover {
  background: #57654b;
}

.pill {
  display: inline-block;
  border: 1px solid #b8b3a5;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: .73rem;
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.note {
  font-size: .83rem;
  opacity: .82;
  margin-top: 24px;
}


/* 06  Hero
   ========================================================================== */
.hero {
  background: linear-gradient(135deg, #fff8ec 0%, #f5f0d9 65%, #e8eed1 100%);
}

.hero-grid {
  min-height: 690px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 6%;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 80px 0;
}

.hero-copy .eyebrow {
  color: #ad643f;
  font-weight: 800;
}

.hero-copy h1 {
  font-size: clamp(3.8rem, 5.8vw, 6.9rem);
  line-height: 1.06;
  letter-spacing: -.055em;
  max-width: 610px;
  margin: 14px 0 35px;
}

.hero-copy p:not(.eyebrow) {
  max-width: 470px;
  font-size: 1.12rem;
  color: #4b5b47;
}

/* „Jetzt.“ – Schriftzug unter der Headline */
.hero-script {
  display: block;
  color: #b14d43;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(5rem, 8vw, 9.2rem);
  letter-spacing: -.07em;
  line-height: 1.13;
  padding-left: 13%;
  text-shadow: 1px 1px 0 #ebc0a9;
}

.hero-script-image img {
  display: block;
  width: min(100%, 680px);
  height: auto;
}

.hero-under {
  margin-top: 28px;
  font-size: .73rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #72816a;
}

.hero-under span {
  margin: 0 9px;
  color: #c65d3c;
}

.hero-photo {
  position: relative;
  overflow: hidden;
  /* Dieselbe Bogenform wie .edition-image weiter unten */
  aspect-ratio: 4/5;
  height: auto;
  max-height: none;
  margin: 35px 0;
  /* Bogen proportional zum Foto in „Ich lebe mein Leben. Jetzt.“:
     Radius = 36,7 % der Bildbreite (180 px auf 490 px Breite).
     Bei 4:5 entspricht das vertikal 29,4 % der Höhe → kreisrunder Bogen.
     js/main.js setzt --hero-arch zusätzlich exakt passend zur jeweiligen
     Bildschirmbreite; ohne JavaScript greift dieser Prozentwert. */
  border-radius: 36.7% 36.7% 8px 8px / 29.4% 29.4% 8px 8px;
  border-radius: var(--hero-arch, 36.7%) var(--hero-arch, 36.7%) 8px 8px / var(--hero-arch, 29.4%) var(--hero-arch, 29.4%) 8px 8px;
  box-shadow: 0 24px 55px #554e2d26;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  filter: saturate(1.1) brightness(1.05);
}

.hero-photo:after {
  content: 'REBENMOMENT · DEIN MOMENT';
  position: absolute;
  bottom: 22px;
  left: 24px;
  background: #fff9ebeb;
  color: #44533b;
  padding: 10px 20px;
  border-radius: 40px;
  letter-spacing: .1em;
  font-size: .7rem;
}


/* 07  Sektionen & Editionen
   ========================================================================== */
section {
  scroll-margin-top: 90px;
}

.section {
  padding: 100px 0;
}

.two {
  background: #fffaf1;
}

.intro {
  max-width: 760px;
  margin-bottom: 48px;
}

.intro p {
  color: #66705d;
}

.edition {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin: 0 0 80px;
}

.edition.reverse .edition-image {
  order: 2;
}

.edition-image {
  border-radius: 180px 180px 8px 8px;
  overflow: hidden;
  background: #e4ded0;
  aspect-ratio: 4/5;
}

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

.edition-figure {
  position: relative;
}

.edition-figure figcaption {
  padding-top: 10px;
  font-size: .82rem;
  color: #657061;
}

.edition-copy {
  padding: 15px 0;
}

.edition-copy p {
  color: #5d675b;
  max-width: 485px;
}


/* 08  Edition Farbe – Farbumschalter
   ========================================================================== */
.color-switcher {
  margin: 22px 0 18px;
}

.switcher-label {
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6c7667;
  margin-bottom: 10px;
}

.swatch-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.swatch-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8d0c2;
  background: #fffaf1;
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  cursor: pointer;
  color: #435041;
  font-size: .9rem;
  transition: .18s ease;
}

.swatch-btn:hover {
  border-color: #a99f8a;
  transform: translateY(-1px);
}

.swatch-btn.active {
  background: #fff;
  border-color: #6f7b5d;
  box-shadow: 0 8px 24px #54431b14;
}

.swatch-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid #c9c1b1;
  flex: none;
}

/* Shirtfarben der Farbpunkte (vorher als Inline-Style im HTML) */
.swatch-dot--olive  { background: #8a8d72; }
.swatch-dot--natur  { background: #f4efe4; }
.swatch-dot--petrol { background: #056d7d; }
.swatch-dot--taube  { background: #7C93A8; }

.color-caption {
  font-size: .85rem;
  color: #5c6558;
  margin: 12px 0 0;
}


/* 09  Klassik – Sorten-Katalog
   ========================================================================== */
.classic-link {
  margin: 12px 0 22px;
}

.classic-catalog {
  padding-top: 38px;
  scroll-margin-top: 110px;
}

.catalog-heading {
  max-width: 760px;
  margin-bottom: 24px;
}

.catalog-heading h3 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.catalog-heading p {
  color: #5d675b;
}

.classic-overview {
  margin: 0 0 34px;
  background: #f4f0e8;
  border-radius: 20px;
  overflow: hidden;
}

.classic-overview img {
  display: block;
  width: 100%;
  height: auto;
}

.classic-overview figcaption {
  text-align: center;
  font-size: .82rem;
  color: #596153;
  padding: 10px;
}

.classic-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}

.classic-card {
  background: #fff;
  border: 1px solid #e2dbcc;
  border-radius: 12px;
  overflow: hidden;
}

.classic-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.classic-card-copy {
  padding: 15px;
}

.classic-card h4 {
  font-family: Georgia, serif;
  font-size: 1.14rem;
  margin: 0 0 5px;
}

.classic-card p {
  font-size: .83rem;
  line-height: 1.5;
  margin: 0 0 9px;
  color: #58604f;
}

.classic-card span {
  font-size: .75rem;
  color: #74786c;
}


/* 10  Werte („Die Idee“)
   ========================================================================== */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.value {
  border-top: 1px solid #c9c3b7;
  padding-top: 23px;
}

.value h3 {
  font-size: 1.4rem;
}

.value p {
  color: #677063;
}


/* 11  Kontakt & Footer
   ========================================================================== */
.contact {
  background: #e5e7da;
  text-align: center;
  padding: 96px 20px;
}

.contact p {
  max-width: 680px;
  margin: 0 auto 30px;
  color: #596351;
}

footer {
  padding: 26px 0;
  background: #26332d;
  color: #dce2d7;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: .85rem;
}

.foot a {
  color: inherit;
}


/* 12  Derzeit nicht im HTML verwendet
   Aus früheren Versionen übernommen (dunkle „Kunst“-Sektion, Artwork-Block,
   einfache Farbpunkte). Kann gelöscht werden, falls nicht mehr gebraucht.
   ========================================================================== */
.swatches {
  display: flex;
  gap: 9px;
  margin: 24px 0;
}

.swatches i {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #e6dfd2;
  outline: 1px solid #cfc7b9;
  border-radius: 50%;
}

.art {
  background: #283a35;
  color: #f7f2e8;
}

.art .eyebrow,
.art .edition-copy p {
  color: #d4ddce;
}

.art .edition-image {
  border-radius: 8px 150px 8px 8px;
  background: #727e64;
}

.art .pill {
  border-color: #74867d;
}

.art .edition {
  margin-bottom: 0;
}

.artwork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  max-width: 900px;
  margin: auto;
}

.artwork img {
  border-radius: 5px;
}

.artwork p {
  color: #5b6458;
}


/* 13  Responsive
   Reihenfolge absteigend – nicht umsortieren, spätere Regeln überschreiben frühere.
   ========================================================================== */

/* Tablet quer */
@media (max-width: 1050px) {
  .classic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Handy & kleines Tablet: Hamburger-Menü
   (nur mit JavaScript – ohne JS bleibt das normale Menü sichtbar) */
@media (max-width: 860px) {
  .js .nav {
    min-height: 68px;
    position: relative;
  }

  .js .nav-toggle {
    display: flex;
  }

  .js nav {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    flex-direction: column;
    gap: 0;
    padding: 6px 16px 14px;
    background: #fffaf0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px #26382e1a;
  }

  .js nav.is-open {
    display: flex;
  }

  .js nav a {
    padding: 14px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid #ece5d8;
  }

  .js nav a:last-child {
    border-bottom: 0;
  }

  .js section {
    scroll-margin-top: 76px;
  }
}

/* Tablet / einspaltig */
@media (max-width: 800px) {
  .wrap {
    width: min(100% - 32px, 1200px);
  }

  .no-js nav {
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .8rem;
  }

  .hero-grid,
  .edition,
  .artwork {
    grid-template-columns: 1fr;
  }

  .edition,
  .artwork {
    gap: 24px;
  }

  .hero-copy {
    padding: 60px 0 0;
  }

  .hero-script {
    padding-left: 5%;
  }

  .hero-photo {
    height: auto;
    max-height: none;
    margin: 8px 0 35px;
  }

  .section {
    padding: 65px 0;
  }

  .edition.reverse .edition-image {
    order: 0;
  }

  .edition-image {
    max-height: 650px;
  }

  .values {
    grid-template-columns: 1fr;
  }
}

/* Großes Smartphone */
@media (max-width: 640px) {
  .swatch-buttons {
    gap: 8px;
  }

  .swatch-btn {
    font-size: .82rem;
    padding: 6px 10px 6px 6px;
  }

  .classic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .classic-card-copy {
    padding: 10px;
  }

  .classic-card h4 {
    font-size: 1rem;
  }
}

/* Smartphone */
@media (max-width: 510px) {
  .no-js .nav {
    flex-wrap: wrap;
    padding: 12px 0;
  }

  .brand {
    font-size: 1.35rem;
  }

  .no-js nav {
    width: 100%;
  }

  h1 {
    font-size: 3.3rem;
  }

  .hero-copy h1 {
    font-size: 3.65rem;
  }

  .hero-script {
    font-size: 5.8rem;
  }

  .hero-photo {
    height: auto;
  }

  .foot {
    flex-direction: column;
  }
}

/* Edition Farbe · Formatauswahl & Testimonialgalerie */
.format-picker {margin: 0 0 54px; padding: 30px; border-radius: 20px; background: #f5f1e7; border: 1px solid #e8e0d2; scroll-margin-top: 100px;}
.format-picker-head {max-width: 700px; margin-bottom: 20px;}
.format-picker-head h3 {font-size: clamp(1.85rem,2.7vw,2.8rem); line-height:1.15;}
.format-picker-head p:last-child {color:#616b60;font-size:.96rem;}
.format-options {display:grid; grid-template-columns:1fr 1fr;gap:16px;}
.format-option {text-align:left; min-width:0; display:flex; flex-direction:column; gap:7px; padding:24px; border-radius:14px; border:1px solid #d6d1c4; background:#fffdf8; color:#314236; cursor:pointer; transition: background .2s,border .2s,transform .2s; font:inherit;}
.format-option strong {font:400 clamp(1.4rem,2vw,1.85rem)/1.2 Georgia,serif;}
.format-option>span:nth-of-type(2) {font-size:.89rem;color:#697267;}
.format-num {font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#848b77;font-weight:700;}
.format-action {font-size:.8rem;letter-spacing:.035em; margin-top:10px; color:#455941;}
.format-option.is-selected {background:#e7e9db; border-color:#738269; box-shadow: inset 0 0 0 1px #738269;}
.format-option:hover {transform:translateY(-2px);}
.format-option:focus-visible,.swatch-btn:focus-visible,.look-card:focus-visible {outline:3px solid #326856; outline-offset:3px;}
.looks-section {border-top:1px solid #ded7ca; padding-top:42px; margin-top:4px;}
.looks-heading {display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 0 25px;}
.looks-heading h3 {font-size:clamp(1.75rem,3vw,2.7rem);line-height:1.12;}
.looks-heading p:not(.eyebrow) {color:#687266;font-size:.94rem;}
.looks-count {font:italic 1rem Georgia,serif;color:#879080;white-space:nowrap;}
.looks-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;}
.look-card {appearance:none;text-align:left;display:block;width:100%;cursor:pointer;border:1px solid #ded8ca;background:#fffdf7;border-radius:16px;padding:7px;overflow:hidden;color:var(--ink);transition:transform .18s,box-shadow .18s,border .18s;}
.look-card:hover {transform:translateY(-3px);box-shadow:0 12px 35px #213b2a14;}
.look-card.active {border-color:#738269;box-shadow:0 0 0 2px #73826945;}
.look-card img {width:100%;height:auto;aspect-ratio:4/4.5;object-fit:cover;object-position:center 35%;border-radius:11px;}
.look-card>span {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 10px 8px;}
.look-card strong {font:400 1.25rem Georgia,serif;}
.look-card small {font-size:.75rem;color:#6e796c;}
@media(max-width:700px){.format-picker{padding:20px 17px;}.format-options{grid-template-columns:1fr;gap:10px}.format-option{padding:18px}.looks-grid{gap:9px}.look-card{padding:4px;border-radius:10px}.look-card img{border-radius:7px}.look-card>span{padding:10px 5px;display:block}.look-card strong{font-size:.98rem}.look-card small{display:block;font-size:.68rem}.looks-count{display:none}}
@media(max-width:440px){.look-card strong{font-size:.84rem}.look-card small{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.format-option,.look-card{transition:none}.format-option:hover,.look-card:hover{transform:none}}


/* 14 Neue Hoodie- und Sweater-Linie – eigenständig, bestehende Auswahl unberührt */
.autumn-section{background:#ecebe1;scroll-margin-top:90px}
.autumn-section .intro{max-width:810px}
.autumn-layout{display:grid;grid-template-columns:minmax(290px,.85fr) minmax(0,1.15fr);gap:32px;align-items:stretch}
.autumn-controls{background:#fffdf7;border:1px solid #ddd8c9;border-radius:22px;padding:30px}
.autumn-field{border:0;padding:0;margin:0 0 22px;min-width:0}
.autumn-field legend{font-weight:650;margin-bottom:10px;font-size:.95rem}
.autumn-choice-group{display:flex;flex-wrap:wrap;gap:9px}
.autumn-choice{font:inherit;font-size:.86rem;line-height:1.25;cursor:pointer;border:1px solid #cfcfc3;border-radius:99px;color:#2b3e32;background:#fff;padding:11px 15px;display:inline-flex;align-items:center;gap:8px}
.autumn-choice:hover{border-color:#64785d}
.autumn-choice.active{border-color:#465c46;background:#dce6d6;box-shadow:inset 0 0 0 1px #465c46}
.autumn-choice:focus-visible{outline:3px solid #427b63;outline-offset:3px}
.autumn-dot{width:14px;height:14px;border-radius:50%;background:var(--dot);border:1px solid #0002;display:inline-block}
.autumn-note{font-size:.84rem;color:#667166;margin:26px 0 0;border-top:1px solid #e5e1d5;padding-top:18px}
.autumn-preview{background:#faf8f1;border:1px solid #dad6c8;border-radius:22px;padding:20px;overflow:hidden;display:flex;flex-direction:column}
.autumn-preview-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.78rem;letter-spacing:.04em;color:#677164}
.autumn-garment{position:relative;width:100%;max-width:570px;margin:auto;aspect-ratio:600/630;display:grid;place-items:center}
.garment-shape{width:100%;height:100%;object-fit:contain;display:block}
.autumn-print{position:absolute;left:38%;top:33%;width:24%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;pointer-events:none}
.autumn-leaf{width:76%;height:auto;display:block;filter:drop-shadow(0 1px 0 #0001)}
.autumn-slogan{font-family:Georgia,'Times New Roman',serif;font-size:clamp(9px,1.55vw,18px);font-style:italic;font-weight:700;line-height:1.12;white-space:nowrap;color:#344536;letter-spacing:-.025em;margin-top:-2px}
.autumn-preview.light-ink .autumn-slogan{color:#fff8e9;text-shadow:0 1px 2px #0008}
.autumn-preview-foot{text-align:center;font-size:.82rem;color:#667061;max-width:500px;margin:0 auto 8px}
.autumn-bottom{border-top:1px solid #d3d1c4;padding-top:30px;margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:35px}
.autumn-bottom h3{font-size:1.8rem}
.autumn-bottom p{color:#586459}
@media(max-width:800px){.autumn-layout{grid-template-columns:1fr}.autumn-bottom{grid-template-columns:1fr;gap:8px}.autumn-slogan{font-size:clamp(10px,2.9vw,19px)}}
@media(max-width:480px){.autumn-controls{padding:20px 17px}.autumn-preview{padding:12px}.autumn-slogan{font-size:clamp(9px,3vw,14px)}.autumn-choice{padding:10px 12px}}

/* Rebenmoment: interaktive Motivansicht und Damen-/Herren-Testimonialwechsel */
.autumn-zoom{align-self:center;background:#fff;border:1px solid #ddd8c9;border-radius:14px;padding:10px 16px;cursor:zoom-in;display:flex;align-items:center;gap:12px;color:#344536;font:inherit;margin:8px auto 18px;transition:transform .2s,box-shadow .2s}
.autumn-zoom:hover{transform:translateY(-2px);box-shadow:0 9px 24px #293a2a22}
.autumn-zoom img{height:85px;width:75px;object-fit:contain}
.autumn-zoom span{font-weight:650;font-size:.9rem}
.autumn-testimonials{margin-top:48px;border-top:1px solid #c9ccbf;padding-top:32px}
.autumn-testimonials-header{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.autumn-testimonials-header h3{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 6px}
.autumn-testimonials-header p{margin:0}
.autumn-gender-switch{display:flex;background:#f8f8f2;padding:5px;border-radius:40px;border:1px solid #c8d0bf}
.autumn-gender-switch button{font:inherit;cursor:pointer;border:0;border-radius:40px;padding:12px 25px;background:transparent;color:#3b4c3c}
.autumn-gender-switch button.active{background:#3c513e;color:white}
.autumn-testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.autumn-testimonial{padding:0;overflow:hidden;position:relative;border:0;border-radius:18px;cursor:pointer;background:#d0bea5;color:white;min-height:250px}
.autumn-testimonial img{display:block;width:100%;height:320px;object-fit:cover;transition:transform .35s}
.autumn-testimonial:hover img{transform:scale(1.035)}
.autumn-testimonial span{position:absolute;left:0;bottom:0;width:100%;padding:26px 20px 18px;background:linear-gradient(transparent,#101710ba);text-align:left;font-weight:650;font-size:1.16rem}
.autumn-dialog{max-width:min(610px,90vw);width:90vw;max-height:92vh;border:0;border-radius:18px;padding:30px;background:#fffdf8;box-shadow:0 30px 100px #0005;text-align:center;color:#344536}
.autumn-dialog::backdrop{background:#17221bbd}
.autumn-dialog img{display:block;width:min(100%,410px);max-height:70vh;object-fit:contain;margin:auto}
.autumn-dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#344536;font-size:35px;cursor:pointer}
.autumn-dialog p{font-weight:600}
@media(max-width:620px){.autumn-testimonial-grid{grid-template-columns:1fr}.autumn-testimonial img{height:240px}.autumn-gender-switch{width:100%;justify-content:center}.autumn-gender-switch button{flex:1}}

/* Shop-Einstieg: Die beiden Datenattribute markieren die späteren Spreadshirt-Ziele. */
.shop-cta{margin:24px 0 12px}.shop-cta .btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none}.shop-cta-caption{margin:10px 0 0;font-size:.84rem;color:#667166}.shop-info{padding:48px 0;background:#eeeae1;scroll-margin-top:88px}.shop-info-inner{max-width:760px}.shop-info h2{margin:6px 0 12px;font-size:clamp(1.6rem,3vw,2.4rem)}.shop-info p:not(.eyebrow){line-height:1.65}.shop-back{display:inline-block;margin-top:14px;color:#394332;text-underline-offset:4px}

/* Originalnahe Produktansicht auf hellem Hintergrund – Bildvorlagen mit Textilstruktur */
.autumn-garment{aspect-ratio: 1.30;max-width:650px}
.garment-shape{object-fit:contain;background:#f5f5f5;border-radius:12px}
.autumn-print[hidden]{display:none!important}
.product-image-note{font-size:.75rem;color:#777}

/* Transparente Motivgrafik: maßvolle Brustplatzierung – kein neu gesetzter Text. */
.autumn-print,.autumn-print[hidden]{display:block!important;position:absolute;left:50%;top:28%;width:16.5%;transform:translateX(-50%);pointer-events:none;z-index:2;}
.autumn-print img{display:block;width:100%;height:auto;filter:none;}
.autumn-garment[data-garment="sweater"] .autumn-print{top:27%;width:17%;}

/* 2026-10-27 – ausgeglichene Produktdarstellung und besser sichtbare Look-Fotos */
.autumn-garment{aspect-ratio:1.30;max-width:650px}
.autumn-garment .garment-shape{width:100%;height:100%;object-fit:contain}
/* Brustdruck mittig und niedriger, separat an den Stofftyp angepasst */
.autumn-garment[data-garment="hoodie"] .autumn-print{top:35%;width:15.25%}
.autumn-garment[data-garment="sweater"] .autumn-print{top:34%;width:14.25%}
/* Mehr Oberkörper sichtbar; Original-Fotos sind ohne Druckgrafik. */
.autumn-testimonial img{height:410px;object-fit:cover;object-position:center 55%}
@media(max-width:620px){.autumn-testimonial img{height:335px;object-position:center 55%}}

/* Finale Korrektur: Brustdruck sitzt visuell mittig, nicht am äußeren Stängel. */
.autumn-garment[data-garment="hoodie"] .autumn-print{left:46.8%;top:36.5%;width:16%;transform:translateX(-50%)}
.autumn-garment[data-garment="sweater"] .autumn-print{left:48.5%;top:28.8%;width:14.7%;transform:translateX(-50%)}
/* Testimonials: volle Oberkörperbilder bis zur Taille statt Zoom auf das Gesicht */
.autumn-testimonial img{height:410px;object-fit:cover;object-position:center center}
@media(max-width:620px){.autumn-testimonial img{height:330px;object-position:center center}}

/* Druckmotiv: optische Mittelachse je nach Produktfoto. */
.autumn-garment[data-garment="hoodie"] .autumn-print{left:48%;top:36%;width:16%;transform:translateX(-50%)}
.autumn-garment[data-garment="sweater"] .autumn-print{left:53%;top:29%;width:14.7%;transform:translateX(-50%)}
/* Testimonials: unbeschnittene Köpfe, Oberkörper bis Taille. */
.autumn-testimonial img{height:410px;object-fit:cover;object-position:center center}
@media(max-width:620px){.autumn-testimonial img{height:335px;object-position:center center}}

/* Bebilderter Einstieg vor dem Hoodie-/Pullover-Konfigurator */
.autumn-section .autumn-testimonials{margin:30px 0 24px;border-top:0;padding-top:0}
.gallery-to-config{margin:0 0 34px;text-align:center}
#hoodie-konfigurator{scroll-margin-top:110px}


/* Saisonale Winteredition · zurückhaltend, als eigener Abschnitt nach dem Hero */
.winter-edition[hidden]{display:none!important}
.winter-edition{background:linear-gradient(145deg,#20372f 0%,#2c4339 60%,#23372e 100%);color:#f7f0df;padding:clamp(60px,7vw,108px) 0 62px;overflow:hidden;position:relative;scroll-margin-top:90px}
.winter-edition:before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;background:radial-gradient(circle at 90% 7%,#bfa87d 0,transparent 27%),radial-gradient(circle at 3% 94%,#81947a 0,transparent 30%)}
.winter-wrap{position:relative}
.winter-heading{display:grid;grid-template-columns:1.4fr .8fr;align-items:end;gap:50px;margin-bottom:36px}
.winter-kicker,.winter-product-meta{font-size:.72rem;font-weight:700;letter-spacing:.21em;text-transform:uppercase;color:#e8cba0}
.winter-heading h2{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.13;letter-spacing:-.035em;margin:15px 0 0;color:#f7f1e7}
.winter-heading h2 em{font-family:Georgia,serif;font-weight:400;color:#e7cba2}
.winter-intro{font-size:1.06rem;line-height:1.78;max-width:390px;color:#e1e4d8;margin:0 0 8px}
.winter-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.winter-product{min-width:0;background:#f7f2e9;color:#2d4035;border-radius:17px;overflow:hidden;box-shadow:0 16px 55px #0d1e1740}
.winter-art{position:relative;min-height:350px;height:clamp(350px,36vw,475px);display:flex;align-items:center;justify-content:center;padding:26px 34px;background:radial-gradient(ellipse at 52% 35%,#354a40 0%,#162c25 65%,#0e211c 100%)}
.winter-art:after{content:"";position:absolute;inset:14px;border:1px solid #bda98532;border-radius:7px;pointer-events:none}
.winter-art img{display:block;width:100%;height:100%;max-height:425px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 12px 20px #0003)}
.winter-snow{position:absolute;top:20px;left:32px;color:#d4c6a066;letter-spacing:1.4em;font-size:10px}
.winter-product-info{padding:29px 33px 33px}
.winter-product-meta{color:#798473;font-size:.68rem;margin:0 0 12px}
.winter-product-info h3{color:#2a4033;font-size:clamp(1.48rem,2.7vw,2.05rem);letter-spacing:-.023em;margin:0 0 10px;line-height:1.18}
.winter-product-info p:not(.winter-product-meta){line-height:1.6;color:#5d6a60;margin:0 0 22px;min-height:3.1em}
.winter-buy{display:inline-flex;background:#354b3b;color:#fff!important;text-decoration:none;gap:20px;align-items:center;padding:13px 20px;border-radius:5px;font-weight:650;transition:background .2s,transform .2s}
.winter-buy:hover{background:#4c6953;transform:translateY(-1px)}
.winter-buy:focus-visible{outline:3px solid #ba9464;outline-offset:3px}
.winter-unlinked{display:inline-block;font-size:.88rem;color:#777d73;border:1px solid #d3d4cb;padding:11px 15px;border-radius:5px}
.winter-fineprint{margin:24px 0 0;font-size:.78rem;line-height:1.6;color:#c4cec2}
@media(max-width:760px){.winter-heading{grid-template-columns:1fr;gap:16px}.winter-products{grid-template-columns:1fr}.winter-art{height:350px;min-height:300px}.winter-product-info p:not(.winter-product-meta){min-height:0}}
@media(max-width:430px){.winter-edition{padding:54px 0}.winter-art{height:300px;padding:22px}.winter-product-info{padding:25px}.winter-heading h2{font-size:2.35rem}}

.winter-buy[hidden],.winter-unlinked[hidden]{display:none!important}