/* ============================================================
   Humblebee Atelier — Design-Tokens & Basis
   Palette und Fonts aus der alten WP-Seite extrahiert
   ============================================================ */

:root {
  /* Markenfarben laut Infoblatt (Layla Rose Designs):
     #EDECE8 hell, #E1D7CC beige, #908067 braun, #797C61 salbei, #93989C graublau, #555646 dunkel */
  --salbei: #797C61;
  --dunkel: #555646;
  --hell: #E1D7CC;   /* Beige aus Alinas Infoblatt */
  --mittel: #908067; /* Braun aus Alinas Infoblatt, für Nebentexte */
  --graublau: #93989C;
  --creme: #EDECE8; /* helles Grau aus Alinas Infoblatt */
  --weiss: #ffffff;
  --rose: #994040;

  --font-head: 'Rainy Days', serif;
  --font-body: 'Petrona', serif;

  --abstand-section: clamp(6rem, 14vw, 12rem);
  --radius: 2rem;

  --schatten: 0 20px 60px rgba(65, 71, 61, 0.12);
}

@font-face {
  font-family: 'Rainy Days';
  src: url('../assets/fonts/rainydays-webfont.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/petrona-normal-latin.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/petrona-normal-latin-ext.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  unicode-range: U+0100-02BA, U+1E00-1E9F;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--dunkel);
  background: var(--creme);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.2;
  color: var(--salbei);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.5rem; }

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

a { color: var(--salbei); }

::selection { background: var(--hell); color: var(--dunkel); }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
}

section { padding: var(--abstand-section) 0; position: relative; }

.section-label {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--mittel);
  margin-bottom: 1.25rem;
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

.nav--gescrollt {
  background: rgba(249, 249, 247, 0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(65, 71, 61, 0.08);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Zwei fertige Logo-Dateien statt CSS-Filter (Filter machen das Logo unscharf):
   hell über dem Intro, dunkel auf der hellen Leiste */
.nav > a:first-child { flex: 0 0 auto; margin-left: -1.25rem; margin-right: clamp(1rem, 3vw, 3rem); }
.nav__logo { height: 76px; width: auto; display: block; }
.nav__logo--hell { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.nav__logo--dunkel { display: none; }

.nav--gescrollt .nav__logo { height: 76px; } /* bleibt beim Scrollen gleich groß */
.nav--gescrollt .nav__logo--hell { display: none; }
.nav--gescrollt .nav__logo--dunkel { display: block; }

.nav__links {
  display: flex;
  gap: 1.7rem;
  list-style: none;
}

.nav__links a {
  text-decoration: none;
  color: var(--weiss);
  font-size: 1.06rem;
  letter-spacing: 0.04em;
  position: relative;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.nav--gescrollt .nav__links a {
  color: var(--dunkel);
  text-shadow: none;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__links a { white-space: nowrap; }

@media (max-width: 1600px) {
  .nav__links { gap: 1.15rem; }
  .nav__links a { font-size: 0.98rem; }
  .nav__mitte { margin-right: 1.2rem; }
}

/* Unter 1200px passen die Menüpunkte nicht mehr in eine Zeile → Burger-Menü */
@media (max-width: 1200px) {
  .nav__links { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__cta { justify-content: center; }
}

.hero h1 { margin-bottom: 1.5rem; }

.hero p {
  max-width: 46ch;
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
}

.hero__cta { display: flex; gap: var(--abstand-s, 1rem); flex-wrap: wrap; }

.hero__bild {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
  background: linear-gradient(160deg, var(--hell), var(--mittel));
  box-shadow: var(--schatten);
}


/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--salbei);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.btn--voll { background: var(--salbei); color: var(--weiss); }
.btn--voll:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(100, 108, 95, 0.35); }

.btn--geist { background: transparent; color: var(--salbei); }
.btn--geist:hover { background: var(--salbei); color: var(--weiss); transform: translateY(-3px); }

/* ---------- Überschriften-Stickanimation ---------- */

.stich-zeichen {
  fill: transparent;
  stroke: var(--salbei);
  stroke-width: 1.3;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 0.8s ease, fill 0.7s ease;
}

[data-schreiben].schreiben--gestickt .stich-zeichen {
  stroke-dashoffset: 0;
  fill: var(--salbei);
}

/* ---------- Shop ---------- */

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}

.produkt {
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.produkt:hover { transform: translateY(-8px); box-shadow: var(--schatten); }

.produkt__bild {
  aspect-ratio: 1;
  background: linear-gradient(150deg, var(--hell) 0%, var(--creme) 60%, var(--mittel) 130%);
}

.produkt__info { padding: 1.4rem 1.6rem 1.8rem; }

.produkt__name {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--dunkel);
  margin-bottom: 0.4rem;
}

.produkt__preis { color: var(--mittel); margin-bottom: 1.1rem; }

/* GPSR-Angaben auf physischen Produktkarten (Alinas Checkliste 16.09.) */
.produkt__daten { margin: 0 0 1.1rem; font-size: 0.85rem; color: var(--mittel); }
.produkt__daten div { display: flex; gap: 0.5rem; padding: 0.15rem 0; }
.produkt__daten dt { margin: 0; font-weight: 600; color: var(--dunkel); }
.produkt__daten dd { margin: 0; }

.produkt .btn { width: 100%; text-align: center; padding: 0.75rem 1rem; font-size: 0.95rem; }

/* ---------- Galerie (Parallax-Streifen) ---------- */

.galerie { background: var(--weiss); }

.galerie__streifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: 3rem;
  align-items: start;
}

.galerie__bild {
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: linear-gradient(170deg, var(--hell), var(--creme) 55%, var(--mittel));
  box-shadow: 0 10px 40px rgba(65, 71, 61, 0.1);
  will-change: transform;
}

.galerie__bild:nth-child(2) { margin-top: 4rem; }
.galerie__bild:nth-child(3) { margin-top: 8rem; }

@media (max-width: 720px) {
  .galerie__bild:nth-child(2) { margin-top: 2rem; }
  .galerie__bild:nth-child(3) { margin-top: 4rem; }
}

/* ---------- Unikat / Über mich ---------- */

.zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; } }

.zweispaltig__bild {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(200deg, var(--mittel), var(--hell) 70%, var(--creme));
  box-shadow: var(--schatten);
}

.hero__bild,
.galerie__bild,
.zweispaltig__bild { overflow: hidden; }

.hero__bild img,
.galerie__bild img,
.zweispaltig__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Schwebender Kontakt (rechts) ---------- */

.schwebekontakt {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  z-index: 80;
  background: var(--salbei);
  color: var(--creme);
  border: none;
  border-radius: 1rem 0 0 1rem;
  padding: 1.2rem 0.9rem;
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.schwebekontakt--sichtbar { transform: translateY(-50%) translateX(0); }
.schwebekontakt:hover { background: var(--dunkel); }

/* ---------- Kontakt-Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(65, 71, 61, 0.45);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.modal--offen { opacity: 1; pointer-events: auto; }

.modal__box {
  background: var(--creme);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(30px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--schatten);
}

.modal--offen .modal__box { transform: translateY(0) scale(1); }

.modal__schliessen {
  float: right;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--mittel);
  cursor: pointer;
  line-height: 1;
}

/* ---------- Formular ---------- */

.formular { display: grid; gap: var(--abstand-s, 1rem); margin-top: var(--abstand-s, 1rem); }
.formular[hidden] { display: none; }

.formular label {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mittel);
}

.formular input,
.formular select,
.formular textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--hell);
  border-radius: 1rem;
  background: var(--weiss);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--dunkel);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.formular select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23646c5f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  outline: none;
  border-color: var(--salbei);
  box-shadow: 0 0 0 4px rgba(100, 108, 95, 0.12);
}

/* Honeypot: unsichtbar für Menschen, sichtbar für Bots.
   Bewusst nicht display:none — das erkennen Bots. */
.formular__falle {
  position: absolute;
  left: -100vw;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.formular textarea { min-height: 140px; resize: vertical; }

.formular__status { font-size: 0.95rem; color: var(--salbei); min-height: 1.4em; }

/* ---------- Footer ---------- */

.footer {
  background: var(--dunkel);
  color: var(--hell);
  padding: 4rem 0 2.5rem;
  font-size: 0.95rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  list-style: none;
  margin-top: 1.5rem;
}

.footer__links a { color: var(--hell); text-decoration: none; opacity: 0.8; }
.footer__links a:hover { opacity: 1; color: var(--weiss); }

/* ---------- Scroll-Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--sichtbar { opacity: 1; transform: none; }

/* ---------- Sticknadel-Cursor ---------- */

html.nadel-cursor,
html.nadel-cursor * { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=") 0 0, none !important; }
html.nadel-cursor a,
html.nadel-cursor img,
html.nadel-cursor svg { -webkit-user-drag: none; user-drag: none; }

.nadel {
  position: fixed;
  top: 0;
  left: 0;
  width: 31px;
  height: 31px;
  z-index: 2147483647;
  pointer-events: none;
  transform-origin: 2.58px 2.58px; /* Nadelspitze oben links (4,4 im 48er-viewBox, skaliert) */
  will-change: transform;
  transition: scale 0.25s ease, opacity 0.12s ease;
}

.nadel--stich .nadel__svg {
  animation: stich 0.18s ease;
}

@keyframes stich {
  40% { transform: translate(-3.6px, -3.6px) scale(0.92); }
}

.nadel-spur {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nadel-spur polyline {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 0.1 7; /* Stich-Optik: einzelne Punkte */
}

.spur__halo {
  stroke: var(--creme);
  stroke-width: 3;
  opacity: 0.2;
}

.spur__stiche {
  stroke: var(--salbei);
  stroke-width: 1.4;
  opacity: 0.25;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Sprachwahl ---------- */

.nav__rechts { display: flex; align-items: center; gap: 1rem; }

.sprachwahl { display: flex; gap: 0.2rem; }

.sprachwahl button {
  background: none;
  border: none;
  padding: 0.35rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--mittel);
  cursor: pointer;
  border-radius: 0.6rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.sprachwahl button:hover { color: var(--dunkel); }

/* Über dem dunklen Intro: Sprachwahl und Korb hell */
.nav:not(.nav--gescrollt) .sprachwahl button { color: var(--creme); }
.nav:not(.nav--gescrollt) .sprachwahl button:hover { color: var(--weiss); }
.nav:not(.nav--gescrollt) .sprachwahl button.sprachwahl--aktiv { background: var(--creme); color: var(--salbei); }
.nav:not(.nav--gescrollt) .korb-button { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4)); }
.sprachwahl button.sprachwahl--aktiv { background: var(--salbei); color: var(--creme); }

@media (max-width: 720px) {
  .sprachwahl button { padding: 0.3rem 0.4rem; font-size: 0.8rem; }
}

/* ---------- Warenkorb ---------- */

.korb-button {
  background: none;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  position: relative;
  padding: 0.3rem;
}

.korb-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--salbei);
  color: var(--creme);
  border-radius: 999px;
  font-size: 0.72rem;
  font-family: var(--font-body);
  padding: 0.05rem 0.4rem;
}

.korb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(65, 71, 61, 0.45);
  backdrop-filter: blur(4px);
  z-index: 140;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.korb-overlay--sichtbar { opacity: 1; }

.korb {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(430px, 94vw);
  background: var(--creme);
  z-index: 150;
  transform: translateX(105%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--schatten);
}

.korb--offen { transform: none; }

.korb__kopf {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: var(--abstand-s);
}

.korb__kopf h2 { font-size: 2rem; margin: 0; }

.korb__liste { flex: 1; overflow-y: auto; }
.korb__heft-dabei { display: grid; grid-template-columns: 34px 1fr; gap: 0.7rem; align-items: center; margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px dashed rgba(153, 64, 64, 0.35); background: rgba(255, 255, 255, 0.55); font-size: 0.86rem; line-height: 1.45; color: var(--mittel); }
.korb__heft-dabei img { width: 34px; transform: rotate(-4deg); box-shadow: 0 3px 8px rgba(65, 71, 61, 0.18); border-radius: 2px; }

.korb__leer { color: var(--mittel); padding: 2rem 0; }

.korb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hell);
}

.korb-item strong { font-weight: 400; font-family: var(--font-head); color: var(--salbei); }

.korb-item__aktionen { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }

.korb-item__aktionen button {
  background: none;
  border: 1px solid var(--hell);
  border-radius: 0.5rem;
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  color: var(--dunkel);
  font-size: 1rem;
  line-height: 1;
}

.korb-item__aktionen button[data-weg] {
  width: auto;
  padding: 0 0.6rem;
  font-size: 0.8rem;
  color: var(--rose);
  height: 1.8rem;
}

.korb__hinweis {
  font-size: 0.9rem;
  color: var(--mittel);
  margin: var(--abstand-s) 0;
  line-height: 1.45;
}

.korb__fuss {
  border-top: 1px solid var(--hell);
  padding-top: var(--abstand-s);
  display: flex;
  flex-direction: column;
}

.korb__gesamt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.15rem;
  margin: 0;
}

.korb__kasse {
  width: 100%;
  text-align: center;
  margin: var(--abstand-s) 0 0;
}
.korb__kasse:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Zitate ---------- */

.zitat { text-align: center; }

.zitat blockquote p {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  color: var(--salbei);
  max-width: 32ch;
  margin: 0 auto 1.2rem;
}

.zitat cite,
.zitat--klein cite {
  font-style: normal;
  color: var(--mittel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.zitat--klein {
  margin: 1.8rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--hell);
}

.zitat--klein p { font-style: italic; color: var(--mittel); margin-bottom: 0.4rem; }

/* ---------- Galerie-Chips ---------- */

.galerie__chips {
  display: flex;
  gap: 0.8rem;
  list-style: none;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.galerie__chips li {
  border: 1px solid var(--hell);
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  color: var(--mittel);
  font-size: 0.95rem;
}

/* ---------- Über-mich-Blöcke & Werte-Karten ---------- */

.ueber-bloecke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

.ueber-block h3 {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}

.werte-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

.werte-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07);
}

.werte-karte h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.werte-karte p { color: var(--mittel); }

/* ---------- FAQ ---------- */

.container--schmal { max-width: 900px; margin: 0 auto; }

.faq__liste {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}

.faq__liste details {
  background: var(--weiss);
  border-radius: 1.2rem;
  padding: 1.3rem 1.8rem;
  box-shadow: 0 4px 20px rgba(65, 71, 61, 0.06);
}

.faq__liste summary {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--salbei);
  cursor: pointer;
  list-style-position: outside;
}

.faq__liste details p { margin-top: 1rem; }
.faq__liste details p + p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--mittel); }

/* ---------- Hero-Tagline ---------- */

.hero__tagline {
  font-size: 1.15rem;
  letter-spacing: 0.25em;
  color: var(--mittel);
  text-transform: lowercase;
  margin: -0.5rem 0 2rem;
}

/* ---------- Stickerei-Motive ---------- */

/* Klassen aus dem SVG-Set (waren dort als <style> in den defs) */
.stickerei .outline { fill: none; stroke: #556154; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.stickerei .thread { fill: none; stroke: #7F8F7B; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.stickerei .thread-light { fill: none; stroke: #BBC9B7; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.stickerei .thread-thin { fill: none; stroke: #667564; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stickerei .stitch-line { fill: none; stroke: #556154; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; }

/* fill-Attribute wiederherstellen (gleiche Spezifität, nach .outline) */
.stickerei [fill="url(#stitchFill)"] { fill: url(#stitchFill); }
.stickerei [fill="url(#stitchFillDark)"] { fill: url(#stitchFillDark); }
.stickerei [fill="#DCE6D9"] { fill: #DCE6D9; }
.stickerei [fill="#EEF4EC"] { fill: #EEF4EC; }
.stickerei [fill="#7F8F7B"] { fill: #7F8F7B; }
.stickerei [fill="#BBC9B7"] { fill: #BBC9B7; }
.stickerei [fill="#556154"] { fill: #556154; }

/* Gefüllte Formen erscheinen erst nach dem Nachsticken */
.stickerei circle:not(.outline),
.stickerei ellipse:not(.outline):not([transform]) {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stickerei--gestickt circle:not(.outline),
.stickerei--gestickt ellipse:not(.outline):not([transform]) {
  opacity: 1;
  transform: none;
}

/* Platzierungen */
.stickerei--hummel {
  position: absolute;
  width: clamp(110px, 9vw, 165px);
  top: -34px;
  left: -30px;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(65, 71, 61, 0.25));
}

.hero__bild { position: relative; }

.girlande {
  padding: 1rem 0 0;
  display: flex;
  justify-content: center;
}




/* Flügelschlag nach dem Sticken */
@media (prefers-reduced-motion: no-preference) {
  .stickerei--gestickt.stickerei--hummel #wing-left,
  .stickerei--gestickt.stickerei--schmetterling #wing-left {
    animation: fluegel-links 0.9s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: 100% 90%;
  }
  .stickerei--gestickt.stickerei--hummel #wing-right,
  .stickerei--gestickt.stickerei--schmetterling #wing-right {
    animation: fluegel-rechts 0.9s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: 0% 90%;
  }
}

@keyframes fluegel-links { to { transform: rotate(-7deg); } }
@keyframes fluegel-rechts { to { transform: rotate(7deg); } }

/* ---------- Footer-Erweiterungen ---------- */

.footer__tagline { letter-spacing: 0.25em; color: var(--hell); opacity: 0.8; margin-top: 0.6rem; }
.footer__insta { margin: 1.5rem auto 0; max-width: 60ch; }
.footer__insta a { font-weight: 400; }

/* ---------- Shopseite: Filter & Werkzeuge ---------- */

.shop-seite { padding-top: clamp(8rem, 14vw, 11rem); }

.shop-seite__titel { margin-bottom: 1rem; }

.shop-seite__intro { max-width: 60ch; }

.gewaehrleistung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  max-width: 46rem;
  margin: 1.8rem 0 0;
  padding: 1rem 1.3rem;
  border: 1px solid var(--hell);
  border-radius: 14px;
  background: var(--creme);
}

.gewaehrleistung__bild { width: 84px; height: auto; flex-shrink: 0; border-radius: 4px; }

.gewaehrleistung__text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--mittel); }

.shop-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin: 2.5rem 0 0.5rem;
}

.shop-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip {
  background: var(--weiss);
  border: 1px solid var(--hell);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--mittel);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.chip:hover { border-color: var(--salbei); color: var(--dunkel); }

.chip--aktiv {
  background: var(--salbei);
  border-color: var(--salbei);
  color: var(--creme);
}

.shop-werkzeuge__rechts { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.shop-suche,
.shop-sort {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--hell);
  border-radius: 999px;
  background: var(--weiss);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--dunkel);
}

.shop-suche { min-width: 180px; }
.shop-sort { cursor: pointer; }

.shop-suche:focus,
.shop-sort:focus {
  outline: none;
  border-color: var(--salbei);
  box-shadow: 0 0 0 4px rgba(100, 108, 95, 0.12);
}

.shop__leer {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mittel);
  padding: 4rem 0;
  font-size: 1.1rem;
}

.produkt__kategorie {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mittel);
  margin-bottom: 0.4rem;
}

.nav__links--aktiv { color: var(--salbei); }
.nav__links--aktiv::after { transform: scaleX(1) !important; }

/* ---------- Loader: Hummel wird gestickt ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  /* Creme statt Salbei (Alina, 19.09.): wärmer */
  background: linear-gradient(160deg, #fbf8f3 0%, #f5efe6 55%, #ece3d6 100%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loader--weg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__innen { text-align: center; }

.loader__hummel {
  width: clamp(140px, 22vw, 200px);
  height: auto;
}

.loader__text {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--salbei);
  letter-spacing: 0.04em;
  margin-top: 1.2rem;
  opacity: 0;
  animation: loader-einblenden 0.8s 0.8s ease forwards;
}

/* Konturen werden gezeichnet */
.loader path.outline,
.loader path.thread,
.loader path.thread-light,
.loader path.thread-thin {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: loader-zeichnen 1.7s 0.15s ease-in-out forwards;
}

/* Stichlinie behält ihr Punktmuster, läuft aber mit */
.loader path.stitch-line {
  stroke-dasharray: 2 8;
  stroke-dashoffset: 300;
  animation: loader-zeichnen 1.6s 0.7s ease-in-out forwards;
}

/* Füllflächen blenden nach dem Zeichnen ein */
.loader .stickerei circle:not(.outline),
.loader .stickerei ellipse:not(.outline):not([transform]) {
  opacity: 0;
  transform: none;
  animation: loader-einblenden 0.6s 1.3s ease forwards;
}

@keyframes loader-zeichnen {
  to { stroke-dashoffset: 0; }
}

@keyframes loader-einblenden {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loader path,
  .loader circle,
  .loader ellipse,
  .loader__text { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}

/* ---------- Video-Intro ---------- */

.intro {
  position: relative;
  min-height: 100vh;
  min-height: 100lvh; /* volle Bildschirmhöhe, auch wenn Safari am Handy die Leiste einblendet (Georg) */
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 0 5rem;
}

.intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,
    rgba(48, 44, 38, 0.62) 0%,
    rgba(48, 44, 38, 0.35) 55%,
    rgba(48, 44, 38, 0.55) 100%);
}

.intro__inhalt { position: relative; z-index: 1; }

.intro .section-label { color: #bbc9b7; }

/* Gestickte Überschrift in Creme auf dem dunklen Video */
.intro .stich-zeichen { stroke: #eef4ec; }
.intro .schreiben--gestickt .stich-zeichen { fill: #eef4ec; }

.intro__tagline { color: #bbc9b7; }

.intro__zitat {
  margin: 3rem 0 3.5rem;
  max-width: 46ch;
  transition: opacity 0.6s ease;
}

.intro__zitat--aus { opacity: 0; }

.intro__zitat p {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  color: #f7f4ea;
  margin-bottom: 0.8rem;
}

.intro__zitat cite {
  font-style: normal;
  color: #bbc9b7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.btn--gross {
  padding: 1.2rem 3.2rem;
  font-size: 1.15rem;
}

/* Willkommens-Sektion nach dem Intro */
.hero--willkommen { min-height: unset; }

/* Video in den gerundeten Bildrahmen (Unikat-Sektion) */
.zweispaltig__bild video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Mobiles Menü (Burger) ---------- */

.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 96;
}

.nav-burger__icon {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--dunkel);
  border-radius: 2px;
  position: relative;
  transition: background 0.25s ease;
}

.nav-burger__icon::before,
.nav-burger__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--dunkel);
  border-radius: 2px;
  transition: transform 0.3s ease, top 0.3s ease;
}

.nav-burger__icon::before { top: -8px; }
.nav-burger__icon::after { top: 8px; }

.nav-burger--offen .nav-burger__icon { background: transparent; }
.nav-burger--offen .nav-burger__icon::before { top: 0; transform: rotate(45deg); }
.nav-burger--offen .nav-burger__icon::after { top: 0; transform: rotate(-45deg); }

.mobil-menue {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: linear-gradient(165deg, var(--creme) 40%, #eef4ec);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobil-menue--offen { opacity: 1; visibility: visible; }

.mobil-menue ul {
  list-style: none;
  text-align: center;
  display: grid;
  gap: 1.4rem;
}

.mobil-menue a {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  color: var(--salbei);
  text-decoration: none;
}

.mobil-menue li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobil-menue--offen li { opacity: 1; transform: none; }
.mobil-menue--offen li:nth-child(1) { transition-delay: 0.08s; }
.mobil-menue--offen li:nth-child(2) { transition-delay: 0.14s; }
.mobil-menue--offen li:nth-child(3) { transition-delay: 0.2s; }
.mobil-menue--offen li:nth-child(4) { transition-delay: 0.26s; }
.mobil-menue--offen li:nth-child(5) { transition-delay: 0.32s; }
.mobil-menue--offen li:nth-child(6) { transition-delay: 0.38s; }
.mobil-menue--offen li:nth-child(7) { transition-delay: 0.44s; }

@media (max-width: 720px) {
  .nav { z-index: 96; }
}

/* ---------- Intro-Video: Fokus auf die stickende Hand (mobil) ---------- */

@media (max-width: 720px) {
  .intro__video {
    /* Querformat-Video auf Hochformat: Ausschnitt auf die
       Hände/Nadel zentrieren (liegt bei ca. 42 % / 30 %) */
    object-position: 42% 30%;
  }
  .zweispaltig__bild video {
    /* Unikat-Video: Fuchs-Stickerei liegt links im Bild */
    object-position: 22% 50%;
  }
}

/* ============================================================
   Abstandssystem & Seitenbreiten (Vereinheitlichung)
   Skala: xs 0.5 / s 1 / m 1.5 / l 2.5 / xl 4 (rem)
   Inhalt: 78 % Breite · Menü-Inhalt: 90 % · mobil gestaffelt enger
   ============================================================ */

:root {
  --abstand-xs: 0.5rem;
  --abstand-s: 1rem;
  --abstand-m: 1.5rem;
  --abstand-l: 2.5rem;
  --abstand-xl: 4rem;
  --abstand-section: clamp(5rem, 10vw, 9rem);
  --breite-inhalt: 78%;
  --breite-menue: 90%;
}

/* --- Text-zu-Text, Text-zu-Button, Text-zu-Bild einheitlich --- */

section p { margin-bottom: var(--abstand-m); }
section p:last-child { margin-bottom: 0; }

.hero p { margin-bottom: var(--abstand-m); }

h2 { margin-bottom: var(--abstand-m); }

.hero__cta { margin-top: var(--abstand-l); gap: var(--abstand-s); }

/* Text → Button und Button → Button in Stapeln: gleicher Schritt */
p + .btn,
h2 + .btn,
h3 + .btn,
.section-label + .btn,
.btn + .btn,
.btn + .korb__gast-link,
.formular .btn { margin-top: 0; }

.hero__cta .btn + .btn { margin-top: 0; }

.nl-teaser__innen .btn,
.insta-cta .btn,
.share-erfolg .btn {
  margin-top: var(--abstand-s);
}

.formular { gap: var(--abstand-s); }

/* Modal/Kontakt: Text und Formular im gleichen Rhythmus */
.modal__box > p { margin-bottom: var(--abstand-s); }
.modal__box .formular { margin-top: var(--abstand-s); }
.modal__box .btn { margin-top: 0; }

.intro__zitat { margin: var(--abstand-l) 0 var(--abstand-xl); }

.zitat--klein { margin: var(--abstand-l) 0; }

.shop__grid,
.galerie__streifen,
.ueber-bloecke,
.werte-karten { margin-top: var(--abstand-xl); }

.galerie__chips { margin-top: var(--abstand-m); }

.faq__liste { margin-top: var(--abstand-l); }

.shop-werkzeuge { margin: var(--abstand-l) 0 var(--abstand-xs); }

.ueber-block h3 { margin-bottom: var(--abstand-s); }

.werte-karte h3 { margin-bottom: var(--abstand-xs); }

/* --- Menü: Inhalt auf 90 % --- */

.nav {
  padding-left: calc((100% - var(--breite-menue)) / 2);
  padding-right: calc((100% - var(--breite-menue)) / 2);
}

/* --- Inhalt: 78 %, zentriert --- */

.container {
  width: var(--breite-inhalt);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.container--schmal { width: min(78%, 900px); }

/* --- Tablet --- */

@media (max-width: 1023px) {
  :root { --abstand-section: 4rem; }
  .container,
  .container--schmal { width: auto; padding: 0 1.5rem; }
  .nav { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --- Mobil: weniger Weißraum, gleiche Rhythmik --- */

@media (max-width: 720px) {
  :root {
    --abstand-section: 3.25rem;
    --abstand-l: 2rem;
    --abstand-xl: 2rem;
  }

  .hero { padding-top: 7rem; }
  .intro { padding: 7rem 0 3.5rem; min-height: 100vh; min-height: 100lvh; }
  .shop-seite { padding-top: 6.5rem; }

  section p { margin-bottom: var(--abstand-s); }

  .galerie__bild:nth-child(2) { margin-top: 1.5rem; }
  .galerie__bild:nth-child(3) { margin-top: 3rem; }

  .footer { padding: 3rem 0 2rem; }
}


/* ============================================================
   Newsletter-Seite („Vier Blüten“) & Teaser
   ============================================================ */

.nl-hero { padding-top: clamp(8rem, 14vw, 11rem); }
.nl-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

/* Gestickte Überschriften (data-schreiben) werden als SVG mit fester Breite gemessen —
   in schmalen Spalten proportional mitskalieren statt überlaufen */
[data-schreiben] svg { max-width: 100%; height: auto; }
.nl-hero__text p { max-width: 55ch; }
.nl-hinweis { font-size: 0.9rem; color: var(--mittel); }
.nl-hinweis:empty { display: none; }

.nl-kranz {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 45%, var(--weiss) 0%, var(--creme) 55%, #eef4ec 100%);
  box-shadow: var(--schatten);
}
.nl-kranz img { width: 100%; height: auto; display: block; }
.nl-kranz__caption {
  margin: var(--abstand-s) auto 0;
  max-width: 38ch;
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--mittel);
}

.blueten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: var(--abstand-xl);
}
.bluete {
  background: var(--creme);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(65, 71, 61, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.bluete:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.bluete__woche {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mittel);
}
.bluete svg { width: 96px; height: 96px; margin: 1.2rem auto 1rem; display: block; }
.bluete h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--salbei);
  margin-bottom: 0.5rem;
}
.bluete p { font-size: 0.95rem; margin: 0; }

.nl-formular-box {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.nl-formular-box h2 { margin-bottom: var(--abstand-s); }
.nl-formular-box .formular { margin-top: var(--abstand-m); }
.nl-ehrlich { font-size: 0.98rem; color: var(--mittel); }
.nl-datenschutz { font-size: 0.85rem; color: var(--mittel); margin: 0; }
.nl-datenschutz a { color: var(--salbei); }

.nl-erfolg { text-align: center; padding: 1rem 0; }
.nl-erfolg__bluete { width: 110px; height: 110px; margin: 0 auto var(--abstand-s); display: block; }
.nl-erfolg h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2rem;
  color: var(--salbei);
  margin-bottom: var(--abstand-s);
}
.nl-erfolg p { max-width: 40ch; margin: 0 auto; }

.nl-teaser { background: var(--weiss); }
.nl-teaser__innen { text-align: center; }
.nl-teaser__innen .section-label { display: block; }
.nl-teaser__innen h2 { display: block; }
.nl-teaser__innen h2 svg { margin: 0 auto; }
.nl-teaser__innen p { max-width: 50ch; margin-left: auto; margin-right: auto; }
.nl-teaser__innen .btn { display: inline-block; margin-top: var(--abstand-s); }

@media (max-width: 1023px) {
  .blueten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nl-hero__grid { grid-template-columns: 1fr; }
  .nl-kranz { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .blueten-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Shop: kompaktere Karten (auf einen MacBook-Bildschirm passend),
   eigenes Sortier-Menü, Instagram-Icon in der Leiste
   ============================================================ */

.shop__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.produkt__bild { aspect-ratio: 4 / 3; }
.produkt__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produkt__info { padding: 1.1rem 1.3rem 1.3rem; }
.produkt__kategorie { font-size: 0.7rem; margin-bottom: 0.3rem; }
.produkt__name { font-size: 1.2rem; margin-bottom: 0.25rem; line-height: 1.25; }
.produkt__beschreibung { font-size: 0.88rem; color: var(--mittel); margin-bottom: 0.5rem !important; }
.produkt__preis { margin-bottom: 0.8rem; }
.produkt .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }

/* Eigenes Aufklappmenü */
.auswahl { position: relative; }
.auswahl__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 190px;
  justify-content: space-between;
  appearance: none;
}
.auswahl__pfeil { width: 12px; height: 8px; transition: transform 0.25s ease; }
.auswahl--offen .auswahl__pfeil { transform: rotate(180deg); }
.auswahl__liste {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--weiss);
  border: 1px solid var(--hell);
  border-radius: 1.2rem;
  box-shadow: var(--schatten);
  z-index: 20;
}
.auswahl__liste li {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--dunkel);
  cursor: pointer;
  white-space: nowrap;
}
.auswahl__liste li:hover { background: var(--creme); }
.auswahl__liste li[aria-selected="true"] { background: var(--salbei); color: var(--creme); }

/* Instagram-Icon in der Leiste */
.nav-insta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--dunkel);
  transition: color 0.3s ease, transform 0.3s ease;
}
.nav-insta svg { width: 1.3rem; height: 1.3rem; }
.nav-insta:hover { color: var(--salbei); transform: translateY(-1px); }
.nav:not(.nav--gescrollt) .nav-insta { color: var(--creme); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4)); }
.nav:not(.nav--gescrollt) .nav-insta:hover { color: var(--weiss); }

/* ---------- Instagram-Seite ---------- */
.insta-hero { padding-top: clamp(8rem, 14vw, 11rem); }
.insta-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.insta-hero__text p { max-width: 52ch; }
.insta-handle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  color: var(--salbei);
  text-decoration: none;
  margin-bottom: var(--abstand-m);
}
.insta-handle svg { width: 1.3rem; height: 1.3rem; }
.insta-handle:hover { color: var(--dunkel); }
.insta-zahlen { display: flex; gap: var(--abstand-l); margin-bottom: var(--abstand-m); }
.insta-zahlen strong { display: block; font-family: var(--font-head); font-size: 1.8rem; font-weight: 400; color: var(--salbei); line-height: 1; }
.insta-zahlen span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mittel); }
.insta-telefon {
  max-width: 340px;
  margin: 0 auto;
  background: var(--weiss);
  border-radius: 2.2rem;
  padding: 1rem;
  box-shadow: var(--schatten);
}
.insta-telefon__kopf { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.4rem 0.9rem; }
.insta-telefon__kopf img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.insta-telefon__kopf strong { display: block; font-size: 0.95rem; color: var(--dunkel); }
.insta-telefon__kopf span { font-size: 0.8rem; color: var(--mittel); }
.insta-telefon__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 1.2rem; overflow: hidden; }
.insta-telefon__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.insta-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.5rem); margin-top: var(--abstand-xl); }
.insta-galerie a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07); transition: transform 0.4s ease; }
.insta-galerie a:hover { transform: translateY(-6px); }
.insta-galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.insta-cta { text-align: center; }
.insta-cta p { max-width: 50ch; margin-left: auto; margin-right: auto; }
.insta-cta .btn { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--abstand-s); }
.insta-cta .btn svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 900px) {
  .insta-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .insta-galerie { grid-template-columns: repeat(2, 1fr); }
  .nav-insta { display: none; } /* mobil: Link im Burger-Menü */
}

@media (max-width: 1200px) {
  .nav-burger { display: block; }
  .nav { z-index: 96; }
}


/* ============================================================
   „Share your stitching“ (share.html)
   ============================================================ */

.share-hero { padding-top: clamp(8rem, 14vw, 11rem); }
.share-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.share-hero__text p { max-width: 55ch; }
.share-belohnung {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  background: var(--weiss);
  border-radius: 1.4rem;
  box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07);
  font-size: 0.98rem;
}
.share-belohnung[hidden] { display: none; }
.share-belohnung__bluete { flex: 0 0 56px; width: 56px; height: 56px; }

.share-produkt {
  max-width: 380px;
  margin: 0 auto;
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.share-produkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.share-produkt__info { padding: 1.2rem 1.5rem 1.5rem; display: grid; gap: 0.2rem; }
.share-produkt__info strong { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; color: var(--dunkel); }
.share-produkt__datum { font-size: 0.9rem; color: var(--mittel); }

.wahl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.wahl-grid[hidden] { display: none; }
.wahl {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 1.6rem 1.6rem 1.7rem;
  text-align: left;
  background: var(--creme);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  color: var(--dunkel);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.wahl:hover { transform: translateY(-3px); }
.wahl--aktiv { background: var(--weiss); border-color: var(--salbei); box-shadow: var(--schatten); }
.wahl__icon { width: 2.2rem; height: 2.2rem; color: var(--salbei); }
.wahl__icon svg { width: 100%; height: 100%; }
.wahl strong { font-family: var(--font-head); font-weight: 400; font-size: 1.45rem; color: var(--salbei); }
.wahl > span:last-child { font-size: 0.95rem; color: var(--mittel); }

.share-box {
  margin-top: var(--abstand-l);
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.share-formular { margin-top: 0; }
.share-offen-felder { display: grid; gap: 1.2rem; }
.share-offen-felder[hidden] { display: none; }

.sterne-feld { border: 0; padding: 0; margin: 0; }
.sterne-feld legend { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mittel); margin-bottom: 0.6rem; }
.sterne { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.sterne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* .formular label setzt Farbe/Uppercase – hier gezielt überstimmen */
.formular .sterne__stern { width: 2.3rem; height: 2.3rem; color: var(--hell); cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; }
.sterne__stern svg { width: 100%; height: 100%; }
.formular .sterne__stern:hover { transform: scale(1.12); }
/* row-reverse: alle Sterne links vom gewählten (im DOM: danach) einfärben */
.formular .sterne input:checked ~ label,
.formular .sterne label:hover,
.formular .sterne label:hover ~ label { color: var(--salbei); }
.sterne input:focus-visible + label { outline: 2px solid var(--salbei); outline-offset: 2px; border-radius: 50%; }
.sterne__hinweis { font-size: 0.85rem; color: var(--mittel); margin: 0.5rem 0 0 !important; }

.datei { display: grid; gap: 0.5rem; }
.datei input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.datei__knopf {
  display: inline-block;
  justify-self: start;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--salbei);
  border-radius: 999px;
  color: var(--salbei);
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.datei:hover .datei__knopf { background: var(--salbei); color: var(--weiss); }
.datei__name { font-size: 0.88rem; color: var(--mittel); }

.haekchen { display: flex !important; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; text-transform: none !important; letter-spacing: 0 !important; color: var(--dunkel) !important; }
.haekchen input { margin-top: 0.3rem; accent-color: var(--salbei); width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

.share-oder { font-size: 0.9rem; color: var(--mittel); margin: 0 !important; text-align: center; }
.share-erfolg .btn { display: inline-block; margin-top: var(--abstand-m); }
.mby-galerie a { pointer-events: none; }

@media (max-width: 900px) {
  .share-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wahl-grid { grid-template-columns: 1fr; }
}


/* Newsletter-Kasten auf der Share-Seite */
.share-nl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--creme);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07);
}
.share-nl h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: var(--abstand-s); }
.share-nl__text p { max-width: 42ch; }
.share-nl__mehr { color: var(--salbei); font-size: 0.95rem; }
.share-nl__formular { margin-top: 0; }
@media (max-width: 760px) {
  .share-nl { grid-template-columns: 1fr; }
}


/* Made by you: Dankeschön-Karte, Galerie, Art-Wahl */
.share-dank {
  max-width: 380px;
  margin: 0 auto;
  padding: 2rem 2rem 2.2rem;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-align: center;
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}
.share-dank__bluete { width: 120px; height: 120px; margin-bottom: 0.6rem; }
.share-dank strong { font-family: var(--font-head); font-weight: 400; font-size: 1.6rem; color: var(--salbei); }
.share-dank p { font-size: 0.95rem; color: var(--dunkel); margin: 0.3rem 0 0 !important; max-width: 30ch; }
.share-dank[hidden], .share-produkt[hidden] { display: none; }

.mby-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.mby-kopf > div:first-child { flex: 1 1 420px; min-width: 0; }
.mby-kopf h2 { margin-bottom: 0; }
/* Filter unter die Überschrift, links: oben rechts sitzt die runde Hummel und verdeckte „Worn“ (Georg 19.10.2026) */
#galerie-mby .mby-kopf { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.1rem; }
#galerie-mby .mby-filter { position: relative; z-index: 4; }
#galerie-mby .mby-kopf > div:first-child { flex: none; } /* sonst wird die Mindestbreite zur Höhe */
.mby-filter { margin-bottom: 0.4rem; }
.mby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: var(--abstand-l);
}
.mby-karte {
  background: var(--creme);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mby-karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.mby-karte img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mby-karte__info { padding: 1.1rem 1.3rem 1.3rem; display: grid; gap: 0.3rem; }
.mby-karte__info strong { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; color: var(--dunkel); line-height: 1.2; }
.mby-karte__sterne { display: inline-flex; gap: 0.1rem; color: var(--salbei); }
.mby-karte__sterne svg { width: 0.95rem; height: 0.95rem; }
.mby-karte__info p { font-size: 0.92rem; margin: 0.2rem 0 0 !important; font-style: italic; }
.mby-karte__name { font-size: 0.8rem; color: var(--mittel); letter-spacing: 0.05em; }
.mby-karte__uebersetzt { font-size: 0.72rem; font-style: italic; color: var(--mittel); }
.mby-karte__info p { white-space: pre-line; }
.mby-karte--mittel .mby-karte__info p { font-size: 1.08rem; line-height: 1.7; }
.mby-karte--kurz .mby-karte__info p { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.6; }
.mby-karte--kurz .mby-karte__info strong { font-size: 1.6rem; }
.mby-karte--kurz .mby-karte__name { font-size: 0.95rem; }
/* zwei oder drei Karten: teilen sich die ganze Breite (19.10.2026) */
@media (min-width: 760px) { .mby-grid--wenige { grid-template-columns: repeat(var(--mby-spalten), minmax(0, 1fr)); } }
.mby-grid--wenige .mby-karte__info { padding: 1.4rem 1.6rem 1.6rem; }
.mby-grid--wenige { align-items: start; }
/* Foto flacher, damit Bild und Text einer Karte auf einen Bildschirm passen (Georg 19.10.2026) */
/* Karte mit Foto so breit wie das Foto hoch, damit das quadratische Bild sie ganz füllt (Georg 19.10.2026) */
@media (min-width: 760px) {
  .mby-grid--wenige { display: flex; align-items: flex-start; }
  .mby-grid--wenige .mby-karte { flex: 1 1 0; min-width: 0; }
  .mby-grid--wenige .mby-karte--bild { flex: 0 0 min(36vh, 380px); }
  .mby-grid--wenige .mby-karte--bild img { aspect-ratio: 1; height: auto; }
  .mby-grid--wenige .mby-karte--bild.mby-karte--kurz .mby-karte__info p { font-size: 1.08rem; line-height: 1.6; }
  .mby-grid--wenige .mby-karte--bild .mby-karte__info strong { font-size: 1.35rem; }
}
.mby-grid--wenige .mby-karte:not(.mby-karte--kurz) .mby-karte__info p { font-size: 1.05rem; line-height: 1.75; }
/* nur eine Karte: über die ganze Breite (16.10.2026) */
.mby-grid--eine { grid-template-columns: 1fr; }
.mby-grid--eine .mby-karte:hover { transform: none; }
.mby-grid--eine .mby-karte--bild { display: grid; grid-template-columns: minmax(0, 340px) 1fr; }
.mby-grid--eine .mby-karte--bild img { height: 100%; }
.mby-grid--eine .mby-karte__info { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 4vw, 3rem); gap: 0.5rem; }
.mby-grid--eine .mby-karte__info strong { font-size: 1.6rem; }
.mby-grid--eine .mby-karte__info p { font-size: 1.05rem; line-height: 1.75; max-width: 52rem; }
.mby-grid--eine .mby-karte__name { font-size: 0.9rem; }
@media (max-width: 700px) { .mby-grid--eine .mby-karte--bild { grid-template-columns: 1fr; } }

.art-feld { border: 0; padding: 0; margin: 0; }
.art-feld legend { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mittel); margin-bottom: 0.6rem; }
.art-wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.formular .art-wahl__option {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem; border: 1px solid var(--hell); border-radius: 999px;
  font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--dunkel); cursor: pointer;
}
.formular .art-wahl__option:has(input:checked) { background: var(--salbei); border-color: var(--salbei); color: var(--creme); }
.art-wahl__option input { accent-color: var(--salbei); margin: 0; }
.datei__hinweis { font-size: 0.85rem; color: var(--mittel); text-transform: none; letter-spacing: 0; }
.datei__hinweis[hidden] { display: none; }

.share-bekannt[hidden] { display: none; }
.share-bekannt input[readonly] { background: var(--creme); color: var(--mittel); cursor: default; }

/* ---------- Stimmungsband (Vollbreite-Foto mit Parallax) ---------- */
.stimmungsband {
  position: relative;
  height: min(62vh, 560px);
  overflow: hidden;
  margin-block: calc(var(--abstand-section) / 2);
}
.stimmungsband img {
  width: 100%;
  height: 125%;
  margin-top: -6%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.stimmungsband::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,247,240,0.35), rgba(62,58,51,0.10) 55%, rgba(250,247,240,0.4));
  pointer-events: none;
}
@media (max-width: 899px) {
  .stimmungsband { height: 42vh; margin-block: var(--abstand-l); }
}

/* ---------- Stickmotiv-Highlights (runde Applikationen) ---------- */
#galerie, #unikat, #faq, .nl-teaser, .shop-seite, #wochen, #galerie-mby, #einblicke { position: relative; }
.stickmotiv {
  position: absolute;
  width: clamp(150px, 15vw, 215px);
  margin: 0;
  z-index: 3;
  filter: drop-shadow(0 18px 28px rgba(65, 71, 61, 0.35));
}
.stickmotiv img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.stickmotiv::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 2.5px dashed rgba(100, 108, 95, 0.6);
  border-radius: 50%;
}
.stickmotiv::after {
  content: '';
  position: absolute;
  inset: -18px;
  border: 1.5px solid rgba(100, 108, 95, 0.28);
  border-radius: 50%;
}
.stickmotiv--rt { right: clamp(6px, 2vw, 32px); top: 4%; transform: rotate(3deg); }
.stickmotiv--rb { right: clamp(6px, 2vw, 32px); bottom: 4%; transform: rotate(-3deg); }
.stickmotiv--lt { left: clamp(6px, 2vw, 32px); top: 6%; transform: rotate(-4deg); }
.stickmotiv--lb { left: clamp(6px, 2vw, 32px); bottom: 6%; transform: rotate(4deg); }
/* Unterhalb dieser Breiten ist neben dem Inhalt kein Platz mehr für die runden Motive:
   dann wandern sie zentriert unter den Text statt über ihn. Beim schmalen Container
   (FAQ) reicht der Rand erst ab etwa 1440 px. */
@media (max-width: 1199px) {
  .stickmotiv { position: static; width: 148px; margin: var(--abstand-m) auto 0; }
  .stickmotiv--rt, .stickmotiv--rb, .stickmotiv--lt, .stickmotiv--lb { transform: none; }
}
@media (max-width: 1439px) {
  #faq .stickmotiv { position: static; width: 148px; margin: var(--abstand-m) auto 0; transform: none; }
}

/* ---------- Konto-Link in der Navigation ---------- */
.nav-konto {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: inherit;
}
.nav-konto svg { width: 26px; height: 26px; } /* Stickrahmen statt Figur (09.10.2026) */
.nav-konto:hover { opacity: 0.7; }

/* ---------- Osterei „Kleine Biene“ (Logo-Biene per Maske eingefärbt) ---------- */
.osterei {
  position: absolute;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  opacity: 0.85;
  background-color: var(--salbei);
  -webkit-mask: url('../assets/images/marke/biene.svg?v=7d75708b') center / contain no-repeat;
  mask: url('../assets/images/marke/biene.svg?v=7d75708b') center / contain no-repeat;
  animation: osterei-wiegen 3.2s ease-in-out infinite;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.osterei:hover, .osterei:focus-visible { transform: scale(1.18); opacity: 1; }
/* Auf dunklen Foto-Abschnitten hell, sonst wäre die Biene unsichtbar */
.hero .osterei, .stimmungsband .osterei, footer .osterei { background-color: var(--creme); }
@keyframes osterei-wiegen {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) translateY(-4px); }
}
.osterei-modal__box { text-align: center; }
.osterei-modal__biene { width: 90px; height: 90px; margin: 0 auto var(--abstand-s); background-color: var(--salbei);
  -webkit-mask: url('../assets/images/marke/biene.svg?v=7d75708b') center / contain no-repeat; mask: url('../assets/images/marke/biene.svg?v=7d75708b') center / contain no-repeat;
  animation: osterei-wiegen 3.2s ease-in-out infinite; }
.osterei-modal__code {
  display: inline-block;
  font-family: 'Rainy Days', serif;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: var(--dunkel, #41473d);
  border: 2px dashed rgba(100, 108, 95, 0.6);
  border-radius: 999px;
  padding: 0.35rem 1.4rem;
  margin: var(--abstand-s) 0 var(--abstand-m);
}
@media (prefers-reduced-motion: reduce) {
  .osterei, .osterei-modal__biene { animation: none; }
}

/* ---------- Warenkorb: Rabatt & Kassen-Wahl ---------- */
.korb__gesamt--rabatt {
  color: #994040;
  font-size: 0.92rem;
  margin: 0 0 var(--abstand-xs);
}
.korb__wahl {
  border-top: 1px dashed rgba(100, 108, 95, 0.4);
  margin: var(--abstand-s) 0 0;
  padding-top: var(--abstand-s);
  display: grid;
  gap: var(--abstand-s);
  justify-items: stretch;
}
.korb__wahl > * { margin: 0; }
.korb__wahl p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--dunkel);
}
.korb__wahl .btn { width: 100%; text-align: center; }
.korb__wahl .korb__vorteile {
  font-size: 0.85rem;
  text-align: center;
  color: rgba(100, 108, 95, 0.85);
  line-height: 1.4;
}
.korb__gast-link {
  justify-self: center;
  background: none;
  border: none;
  padding: 0.15rem 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--salbei);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.korb__gast-link:hover { text-decoration-thickness: 2px; }

/* ---------- Kundenbereich ---------- */
.konto-seite { padding-block: calc(var(--abstand-section) + 3rem) var(--abstand-section); position: relative; }
.anmelde-karte {
  max-width: 460px;
  margin: var(--abstand-l) auto 0;
  padding: var(--abstand-l);
  background: #fff;
  border: 1px solid rgba(100, 108, 95, 0.25);
  border-radius: 18px;
  box-shadow: 0 24px 60px -30px rgba(65, 71, 61, 0.35);
  display: grid;
  gap: var(--abstand-s);
}
.anbieter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.anbieter svg { width: 20px; height: 20px; flex: none; }
.anbieter:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(65, 71, 61, 0.5); }
.anbieter--google { background: #fff; color: #3c4043; border: 1px solid rgba(60, 64, 67, 0.3); }
.anbieter--apple { background: #41473d; color: #f9f9f7; border: 1px solid #41473d; }
.anmelde-trenner {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #7a8474;
  font-size: 0.9rem;
}
.anmelde-trenner::before, .anmelde-trenner::after {
  content: '';
  flex: 1;
  border-top: 1px dashed rgba(100, 108, 95, 0.4);
}
.demo-hinweis {
  font-size: 0.85rem;
  color: #7a8474;
  border-top: 1px dashed rgba(100, 108, 95, 0.35);
  padding-top: var(--abstand-s);
  margin: 0;
}
.konto-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-s);
  margin-bottom: var(--abstand-l);
}
.konto-weiter {
  background: #eef4ec;
  border: 1px dashed rgba(100, 108, 95, 0.5);
  border-radius: 12px;
  padding: var(--abstand-s) var(--abstand-m);
  margin-bottom: var(--abstand-l);
}
.konto-produkte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-xl);
}
.konto-produkt {
  background: #fff;
  border: 1px solid rgba(100, 108, 95, 0.25);
  border-radius: 14px;
  overflow: hidden;
}
.konto-produkt img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.konto-produkt > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: var(--abstand-s) var(--abstand-m);
}
.btn--klein { padding: 0.4rem 1rem; font-size: 0.9rem; }
.konto-tabelle-huelle { overflow-x: auto; margin-bottom: var(--abstand-xl); }
.konto-tabelle { width: 100%; border-collapse: collapse; }
.konto-tabelle th, .konto-tabelle td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(100, 108, 95, 0.25);
}
.konto-tabelle th { font-family: 'Rainy Days', serif; font-weight: 400; letter-spacing: 0.04em; color: #646c5f; }
.konto-status {
  display: inline-block;
  padding: 0.15rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid currentColor;
}
.konto-status--bezahlt { color: #7a8474; }
.konto-status--versendet { color: #556154; background: #eef4ec; }
.konto-status--abgeschlossen { color: #994040; }
.konto-infos {
  background: #eef4ec;
  border-radius: 18px;
  padding: var(--abstand-l);
}
@media (max-width: 899px) {
  .konto-seite { padding-block: calc(var(--abstand-xl) + 3rem) var(--abstand-xl); }
  .anmelde-karte { padding: var(--abstand-m); }
}

/* ---------- ALTCHA-Spamschutz ---------- */
.altcha-box {
  margin-bottom: var(--abstand-s);
}
.altcha-box altcha-widget {
  --altcha-color-base: #f9f9f7;
  --altcha-color-text: #41473d;
  --altcha-color-border: rgba(100, 108, 95, 0.4);
  --altcha-border-radius: 12px;
  max-width: 320px;
}


/* Sprachwahl als Aufklappmenü */
.sprachwahl { position: relative; display: block; }
.sprachwahl .sprachwahl__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--dunkel);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.sprachwahl .sprachwahl__knopf:hover, .sprachwahl--offen .sprachwahl__knopf { border-color: var(--hell); }
.sprachwahl__pfeil { width: 11px; height: 7px; transition: transform 0.25s ease; }
.sprachwahl--offen .sprachwahl__pfeil { transform: rotate(180deg); }
.sprachwahl__liste {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  display: grid;
  gap: 0.15rem;
  min-width: 100%;
  padding: 0.35rem;
  background: var(--weiss);
  border: 1px solid var(--hell);
  border-radius: 1rem;
  box-shadow: var(--schatten);
  z-index: 20;
}
.sprachwahl__liste[hidden] { display: none; }
.sprachwahl__liste button { text-align: left; color: var(--dunkel); padding: 0.45rem 0.9rem; border-radius: 999px; }
.sprachwahl__liste button:hover { background: var(--creme); }
.sprachwahl__liste button.sprachwahl--aktiv { display: none; }
/* Über dem dunklen Intro: heller Knopf, Liste bleibt weiß */
.nav:not(.nav--gescrollt) .sprachwahl .sprachwahl__knopf { color: var(--creme); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); background: none; }
.nav:not(.nav--gescrollt) .sprachwahl .sprachwahl__knopf:hover { border-color: rgba(249, 249, 247, 0.5); color: var(--weiss); }
.nav:not(.nav--gescrollt) .sprachwahl__liste button { color: var(--dunkel); }
.nav:not(.nav--gescrollt) .sprachwahl__liste button:hover { color: var(--dunkel); background: var(--creme); }
@media (max-width: 720px) {
  .sprachwahl .sprachwahl__knopf { padding: 0.35rem 0.55rem; font-size: 0.82rem; }
}


/* Newsletter im Menü dezent hervorheben: kleine Blüte davor */
/* Newsletter im Menü: kleine Margerite aus dem Logo davor */
.nav__links a.nav__links--neu { position: relative; }
/* Margerite größer und mittig über der Rubrik */
.nav__links a.nav__links--neu::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1.5rem;
  width: 2rem;
  height: 1.4rem;
  transform: translateX(-50%);
  background: url('../assets/images/marke/margerite-salbei.svg?v=4d2d22e8') no-repeat center / contain;
  /* die Blüte gehört zum Link: Klick darauf öffnet den Newsletter (Georg, 09.10.2026) */
  cursor: pointer;
}
.nav:not(.nav--gescrollt) .nav__links a.nav__links--neu::before {
  background-image: url('../assets/images/marke/margerite-creme.svg?v=aac34316');
  filter: brightness(1.2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.45));
}
@media (max-width: 1023px) {
  .nav > a:first-child { margin-left: 0; }
}


/* Instagram als Menüpunkt vor „Über mich“, etwas größer, dezent hervorgehoben */
.nav__links a.nav__insta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: -0.45rem 0;
  border-radius: 50%;
  background: rgba(100, 108, 95, 0.1);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.nav__links a.nav__insta svg { width: 1.35rem; height: 1.35rem; }
.nav__links a.nav__insta::after { display: none; }
.nav__links a.nav__insta:hover { background: var(--salbei); color: var(--creme); transform: translateY(-1px); }
.nav:not(.nav--gescrollt) .nav__links a.nav__insta { background: rgba(249, 249, 247, 0.18); }
.nav:not(.nav--gescrollt) .nav__links a.nav__insta:hover { background: var(--creme); color: var(--salbei); }
.nav__links a.nav__insta.nav__links--aktiv { background: var(--salbei); color: var(--creme); }


/* Rechte Gruppe gestapelt: Konto und Korb oben, Sprachwahl darunter unter dem Konto-Icon */
.nav__rechts--gestapelt {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.55rem;
}
.nav__icons { display: flex; align-items: center; gap: 1rem; }
/* Sprachwahl unter den Icons; Logo und Menü zentrieren sich gegen die ganze Gruppe */
.nav__rechts--gestapelt .sprachwahl { position: relative; }
.nav__rechts--gestapelt .sprachwahl .sprachwahl__knopf { padding: 0.1rem 0.45rem; font-size: 0.8rem; gap: 0.3rem; }
.nav__rechts--gestapelt .sprachwahl__liste { right: auto; left: 50%; transform: translateX(-50%); }

/* Konto-Icon kontrastreicher */
.nav-konto { color: var(--dunkel); }
.nav:not(.nav--gescrollt) .nav-konto { color: var(--creme); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45)); }
.nav-konto:hover { opacity: 1; color: var(--salbei); }
.nav:not(.nav--gescrollt) .nav-konto:hover { color: var(--weiss); }

@media (max-width: 1200px) {
  .nav__rechts--gestapelt { display: flex; align-items: center; gap: 0.6rem; }
  .nav__rechts--gestapelt .sprachwahl__liste { transform: none; }
  .nav__rechts--gestapelt .sprachwahl__liste { right: 0; left: auto; }
}


/* ============================================================
   Muster des Monats: im Loader und als Marke unten links
   ============================================================ */

.loader__monat {
  position: relative;
  width: clamp(150px, 22vw, 210px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  animation: loader-einblenden 0.8s 0.2s ease both;
}
.loader__monat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loader__monat-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 3px dashed rgba(249, 249, 247, 0.9);
  animation: monat-ring 14s linear infinite;
  pointer-events: none;
}
@keyframes monat-ring { to { transform: rotate(360deg); } }
.loader__text--monat { display: grid; gap: 0.15rem; }
.loader__monat-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mittel);
}

.monatsmarke {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--weiss);
  box-shadow: 0 8px 26px rgba(65, 71, 61, 0.18);
  text-decoration: none;
  color: var(--dunkel);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease, gap 0.3s ease, padding-right 0.3s ease;
}
.monatsmarke--sichtbar { opacity: 1; transform: none; }
.monatsmarke__bild { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.monatsmarke__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.monatsmarke__text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.92rem;
  line-height: 1.15;
  transition: max-width 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}
.monatsmarke__text small { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mittel); }
.monatsmarke:hover, .monatsmarke:focus-visible { gap: 0.7rem; padding-right: 1.1rem; }
.monatsmarke:hover .monatsmarke__text, .monatsmarke:focus-visible .monatsmarke__text { max-width: 240px; opacity: 1; }
@media (max-width: 720px) {
  .monatsmarke { left: 0.8rem; bottom: 0.8rem; }
  .monatsmarke__bild { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__monat-ring { animation: none; }
}


/* Newsletter: Ablauf mit wachsendem Kranz, Woche fünf */
.ablauf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  margin-top: var(--abstand-xl);
}
.ablauf {
  background: var(--creme);
  border-radius: var(--radius);
  padding: 1.5rem 1.2rem 1.7rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(65, 71, 61, 0.06);
}
/* Beschriftung immer zweizeilig hoch, damit die Kränze auf einer Linie liegen */
.ablauf .bluete__woche { display: block; min-height: 2.6em; line-height: 1.3; }
.ablauf .kranz-svg { width: 108px; height: 108px; margin: 0.9rem auto 0.8rem; display: block; }
.ablauf h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; line-height: 1.2; min-height: 2.4em; display: grid; align-content: center; color: var(--salbei); margin-bottom: 0.4rem; }
.ablauf p { font-size: 0.92rem; margin: 0; }
.ablauf--ergebnis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem 2.5rem;
  text-align: left;
  background: var(--weiss);
  padding: 1.8rem 2.2rem;
}
.ablauf--ergebnis .kranz-svg { width: 150px; height: 150px; margin: 0; grid-row: 1 / span 3; }
.ablauf--ergebnis h3 { font-size: 1.7rem; margin-bottom: 0.2rem; }
.ablauf--ergebnis p { max-width: 52ch; }

.w5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: var(--abstand-xl); }
.w5-karte { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 1.5rem; background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(65, 71, 61, 0.07); }
.w5-karte__bild { width: 150px; height: 100%; min-height: 150px; }
.w5-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w5-karte__bild--svg { display: grid; place-items: center; background: var(--creme); }
.w5-karte__bild--svg .kranz-svg { width: 120px; height: 120px; }
.w5-karte__info { padding: 1.3rem 1.5rem 1.3rem 0; display: grid; gap: 0.35rem; }
.w5-karte__info h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; color: var(--salbei); }
.w5-karte__info p { font-size: 0.95rem; margin: 0 !important; }
.w5-karte__preis { font-size: 1.05rem; color: var(--dunkel); }
.w5-paket { margin-top: var(--abstand-m); font-size: 1.05rem; }
.w5-paket strong { color: var(--salbei); font-weight: 400; font-family: var(--font-head); font-size: 1.5rem; margin-right: 0.5rem; }
@media (max-width: 1200px) { .ablauf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .ablauf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .w5-grid { grid-template-columns: 1fr; } .ablauf--ergebnis { grid-template-columns: 1fr; text-align: center; } .ablauf--ergebnis .kranz-svg { grid-row: auto; margin: 0 auto; } }
@media (max-width: 560px) { .ablauf-grid { grid-template-columns: 1fr; } .w5-karte { grid-template-columns: 1fr; } .w5-karte__bild { width: 100%; height: 180px; } .w5-karte__info { padding: 1.2rem 1.4rem 1.4rem; } }

.ablauf--fuenf { background: var(--weiss); outline: 1.5px dashed var(--hell); outline-offset: -8px; }


/* Art-Wahl auf der Share-Seite: kompakte Pillen statt großer Formularfelder */
.formular .art-wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.formular label.art-wahl__option {
  display: inline-flex; align-items: center; gap: 0.5rem; width: auto;
  padding: 0.55rem 1.1rem; margin: 0; border: 1px solid var(--hell); border-radius: 999px;
  font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--dunkel); cursor: pointer; white-space: nowrap;
}
.formular label.art-wahl__option input[type="radio"] {
  width: 1rem; height: 1rem; padding: 0; margin: 0; border: 0; border-radius: 50%; box-shadow: none; accent-color: var(--salbei);
}


/* Markenelemente aus dem Logo-Set */
.marke-margerite, .marke-biene { color: var(--salbei); }
.nl-erfolg__bluete.marke-margerite { width: 130px; height: auto; }
.share-dank__bluete.marke-margerite { width: 150px; height: auto; }
.share-belohnung__bluete.marke-biene { flex: 0 0 56px; width: 56px; height: 56px; }
.kranz-margerite { color: var(--salbei); }
.footer__logo { height: 110px; width: auto; opacity: 0.92; }


/* Newsletter: Kranz als Foto */
.nl-kranz--foto { padding: 0; overflow: hidden; }
.nl-kranz--foto img { width: 100%; height: 100%; object-fit: cover; }


/* Biene aus dem Logo statt der gezeichneten Hummel */
.stickerei--marke { color: var(--salbei); }

/* Newsletter: Kacheln und Anmeldung schneller einblenden */
.ablauf.reveal, .nl-formular-box.reveal, #wochen .reveal { transition-duration: 0.45s; }

/* ---------- Alinas Markenelemente als Maske eingefärbt ----------
   Die Vektoren aus dem Logo-Set sind groß (bis 400 KB), darum nicht inline,
   sondern als Maske: Form aus der Datei, Farbe per background-color. */
.marke-maske, .trenner__zweig, .trenner__margerite {
  display: block;
  background-color: var(--salbei);
  -webkit-mask: var(--maske) center / contain no-repeat;
  mask: var(--maske) center / contain no-repeat;
}
.trenner { padding: 1rem 0 0; display: flex; justify-content: center; align-items: center; gap: clamp(0.4rem, 2vw, 1.4rem); }
.trenner__zweig { --maske: url('../assets/images/marke/zweig-liegend.svg?v=a1984872'); width: clamp(190px, 30vw, 360px); aspect-ratio: 844.2 / 513.9; }
.trenner__zweig--rechts { transform: scaleX(-1); }
.trenner__margerite { --maske: url('../assets/images/marke/margerite.svg?v=a2e187cb'); width: clamp(80px, 10vw, 120px); aspect-ratio: 249 / 175.6; }
.ueber-margerite { --maske: url('../assets/images/marke/margerite.svg?v=a2e187cb'); float: right; width: 130px; aspect-ratio: 249 / 175.6; margin: 0 0 1rem 1.5rem; }
.kontakt-biene { --maske: url('../assets/images/marke/biene.svg?v=7d75708b'); width: 84px; aspect-ratio: 100.4 / 99; margin: 0 auto 1.5rem; }

/* ---------- Handy: kleineres Logo, Schnellzugriff Shop/Newsletter, lesbarer Hero ----------
   Georg, 15.09.: Logo am Handy halb so groß, dafür oben Platz für Shop und Newsletter;
   Hero-Text hatte über dem Video zu wenig Kontrast. */
.nav__schnell { display: none; }
@media (max-width: 1200px) {
  .nav__schnell { display: flex; align-items: center; gap: 1.1rem; margin-left: 0.2rem; flex: 1 1 auto; }
  .nav__schnell a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--weiss);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    transition: color 0.4s ease, text-shadow 0.4s ease;
  }
  .nav--gescrollt .nav__schnell a { color: var(--dunkel); text-shadow: none; }
}
@media (max-width: 700px) {
  .nav > a:first-child { margin-right: 0.8rem; }
  .nav__logo, .nav--gescrollt .nav__logo { height: 38px; }
  .nav__schnell { gap: 0.8rem; }
  .nav__schnell a { font-size: 0.88rem; }
  .nav__rechts--gestapelt { gap: 0.3rem; }

  /* Hero: dunklerer Schleier, weiße Schrift mit Schatten */
  .intro__schleier {
    background: linear-gradient(170deg,
      rgba(38, 35, 30, 0.78) 0%,
      rgba(38, 35, 30, 0.58) 55%,
      rgba(38, 35, 30, 0.74) 100%);
  }
  .intro .section-label, .intro__tagline, .intro__zitat cite { color: #eef4ec; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
  .intro__zitat p { color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
  .intro .stich-zeichen { stroke: #ffffff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
  .intro .schreiben--gestickt .stich-zeichen { fill: #ffffff; }
}

/* Zaunfoto: fast das ganze Bild zeigen (Georgs Referenz von Alinas alter Seite).
   Kein schmaler Streifen und kein Parallax, sondern Bildformat 3:2, nur oben und
   unten minimal beschnitten */
.stimmungsband--hoch { height: auto; aspect-ratio: 3 / 2; }
.stimmungsband--hoch img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-position: center 45%; }
@media (max-width: 700px) { .stimmungsband--hoch { aspect-ratio: auto; height: min(70vh, 620px); } .stimmungsband--hoch img { object-position: center 40%; } }

/* Handy: Sprachwahl wandert aus der Kopfzeile ins Burger-Menü, damit Logo, Shop,
   Newsletter und die Icons in eine Zeile passen */
.mobil-menue__sprachen { display: none; }
.sprachwahl--menue { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.2rem; }
.sprachwahl--menue button { font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.1em; padding: 0.4rem 0.9rem; border-radius: 999px; color: var(--mittel); }
.sprachwahl--menue button.sprachwahl--aktiv { background: var(--salbei); color: var(--weiss); }
@media (max-width: 700px) {
  .nav { padding-left: 10px; padding-right: 10px; }
  .nav > a:first-child { margin-right: 0.2rem; }
  .nav__schnell { gap: 0.55rem; margin: 0 0.2rem; justify-content: center; }
  .nav__schnell a { font-size: 0.85rem; letter-spacing: 0.03em; }
  .nav__icons { gap: 0.3rem; }
  /* Sprachwahl bleibt am Handy in der Kopfzeile, nur kompakt (zwei Buchstaben, kein Pfeil);
     zusätzlich steht sie im Burger-Menü */
  .nav__rechts .sprachwahl { display: block; margin-left: 0.15rem; }
  .nav__rechts .sprachwahl .sprachwahl__knopf { padding: 0.15rem 0.3rem; font-size: 0.74rem; gap: 0; }
  .nav__rechts .sprachwahl__pfeil { display: none; }
  .nav__rechts--gestapelt { display: flex; align-items: center; }
  .nav-burger { width: 32px; padding: 0.3rem 0.2rem; }
  .mobil-menue__sprachen { display: block; }
}

/* Burger-Menü: bei vielen Einträgen scrollbar und auf kleinen Handys enger gesetzt */
.mobil-menue { overflow-y: auto; padding: 5.5rem 1rem 2rem; display: flex; flex-direction: column; align-items: center; }
.mobil-menue ul { margin: auto 0; } /* mittig, aber bei Überlänge oben nicht abgeschnitten */
@media (max-height: 820px) {
  .mobil-menue ul { gap: 0.9rem; }
  .mobil-menue a { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* Handy-Feinschliff (Georg, 15.09. nachmittags) */
/* Burger über dem Startvideo weiß, sonst unsichtbar; als X über dem hellen Menü bleibt er dunkel */
.nav:not(.nav--gescrollt) .nav-burger:not(.nav-burger--offen) .nav-burger__icon,
.nav:not(.nav--gescrollt) .nav-burger:not(.nav-burger--offen) .nav-burger__icon::before,
.nav:not(.nav--gescrollt) .nav-burger:not(.nav-burger--offen) .nav-burger__icon::after { background: var(--weiss); }
.nav:not(.nav--gescrollt) .nav-burger:not(.nav-burger--offen) { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45)); }
/* Shop und Newsletter füllen die freie Fläche zwischen Logo und Icons gleichmäßig */
@media (max-width: 1200px) {
  .nav__mitte { display: none; } /* leerer Platzhalter der Desktop-Navigation, frisst sonst Breite */
  .nav__schnell { flex: 1 1 auto; justify-content: space-evenly; gap: 0; margin: 0; }
}
/* Startseite am Handy: nur drei Artikel im Shop-Ausschnitt, sonst scrollt man ewig */
@media (max-width: 700px) {
  .shop--start .shop__grid .produkt:nth-child(n + 4) { display: none; }
}

/* Desktop: die rechte Gruppe (Konto, Korb, Sprache) etwas luftiger und weiter weg vom Menü */
@media (min-width: 1201px) {
  /* Konto, Korb und Sprachwahl in einer Reihe (Georg, 15.09.) */
  .nav__icons { gap: 2.2rem; }
  .nav__rechts--gestapelt { display: flex; align-items: center; gap: 2.2rem; margin-left: 2.5rem; }
  .nav__rechts--gestapelt .sprachwahl .sprachwahl__knopf { gap: 0.5rem; letter-spacing: 0.08em; font-size: 0.9rem; }
  .nav__rechts--gestapelt .sprachwahl__liste { left: auto; right: 0; transform: none; }
}

/* Footer mittig (Georg, 15.09.) */
.footer { text-align: center; }
.footer__logo { display: block; margin: 0 auto; }
.footer__links { justify-content: center; }

/* Warenkorb als Linien-Icon im Stil des Konto-Symbols statt Emoji (Georg, 15.09.) */
.korb-button { display: inline-grid; place-items: center; color: var(--dunkel); font-size: 0; transition: color 0.3s ease; }
.korb-button svg { width: 27px; height: 27px; } /* Blumenkörbchen (09.10.2026) */
.korb-button:hover { color: var(--salbei); }
.nav:not(.nav--gescrollt) .korb-button { color: var(--creme); }
.nav:not(.nav--gescrollt) .korb-button:hover { color: var(--weiss); }
.korb-badge { font-size: 0.72rem; line-height: 1.2; min-width: 1.2rem; text-align: center; top: -6px; right: -8px; }

/* Zwischen 1201 und 1600 px: rechte Gruppe enger, sonst rutscht die Sprachwahl aus dem Bild */
@media (min-width: 1201px) and (max-width: 1600px) {
  .nav__icons { gap: 1.2rem; }
  .nav__rechts--gestapelt { gap: 1.2rem; margin-left: 0.8rem; }
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: 0.95rem; }
}

/* ---------- Dein Unikat: Alinas Text mit Preisorientierung (16.09.) ---------- */
.unikat__titel { font-family: var(--font-head); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--dunkel); margin: 0 0 0.3rem; line-height: 1.2; }
.unikat__titel--zwei { margin-top: var(--abstand-l); }
.unikat__lead { font-style: italic; color: var(--mittel); margin-bottom: var(--abstand-m) !important; }
.preise { margin: var(--abstand-m) 0 0.6rem; padding: 0; }
.preise div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hell); }
.preise div:first-child { border-top: 1px solid var(--hell); }
.preise dt { margin: 0; color: var(--dunkel); }
.preise dd { margin: 0; white-space: nowrap; color: var(--salbei); font-family: var(--font-body); letter-spacing: 0.03em; }
.preise__hinweis { font-size: 0.92rem; color: var(--mittel); margin-bottom: 0.6rem !important; }

/* Preisrechner (js/preisrechner.js): Chips wie im Shop-Filter, Ergebniszeile wie .preise */
.rechner { margin: var(--abstand-m) 0 0.6rem; }
.rechner__gruppe { margin-bottom: 0.9rem; }
.rechner__label { display: block; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mittel); margin-bottom: 0.4rem; }
.rechner__chips { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); }
.rechner__chips .chip { background: var(--weiss); }
/* Gewählter Chip eindeutig: Salbei gefüllt, weiße Schrift (die Weiß-Regel darüber hatte
   die Auswahl überdeckt, Georg 17.09.) */
.rechner__chips .chip--aktiv, .rechner__chips .chip--aktiv:hover { background: var(--salbei); color: var(--weiss); border-color: var(--salbei); box-shadow: 0 4px 12px rgba(65, 71, 61, 0.18); }
.rechner__ergebnis { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; margin: var(--abstand-m) 0 0.6rem; border-top: 1px solid var(--hell); border-bottom: 1px solid var(--hell); color: var(--dunkel); }
.rechner__ergebnis strong { color: var(--salbei); font-family: var(--font-body); letter-spacing: 0.03em; white-space: nowrap; }
.rechner__hinweis { font-size: 0.92rem; color: var(--mittel); }

/* Newsletter-Kacheln: keine Kranz-Viertel mehr (Alina, 16.09.: Freebies sind einzelne Blüten,
   der Kranz ist die Bezahlanleitung), nur die Blüte bleibt */
.ablauf .kranz-svg > path { display: none; }

/* Newsletter-Kacheln mit Alinas Blüten-Zeichnungen (16.09.); Woche 5 teasert den Kranz nur an */
.ablauf__bild { display: block; height: 150px; width: auto; max-width: 100%; margin: 0.9rem auto 0.8rem; mix-blend-mode: multiply; }
.ablauf__teaser { position: relative; display: block; }
.ablauf__bild--teaser { height: 150px; width: 100%; object-fit: cover; object-position: center top; opacity: 0.45; }
.ablauf__frage { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 2.6rem; color: var(--salbei); }

/* Dein Unikat: vier Fotos statt Video, damit man die Stickerei erkennt (Georg, 17.09.) */
.zweispaltig__bild--raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; background: none; box-shadow: none; overflow: visible; align-self: start; position: sticky; top: 6.5rem; }
@media (max-width: 860px) { .zweispaltig__bild--raster { position: static; } }
.zweispaltig__bild--raster img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.2rem; box-shadow: var(--schatten); }

/* Trenner (Zweige) rückt näher an „Dein Unikat“ (Georg, 17.09.) */
#unikat { padding-top: calc(var(--abstand-section) * 0.35); }
.trenner { padding-top: 2rem; }

/* Über mich: die drei Textblöcke untereinander statt in Spalten (Georg, 17.09.) */
.ueber-bloecke { grid-template-columns: 1fr; gap: clamp(1.8rem, 3vw, 2.8rem); max-width: 72ch; }

/* Startseite: die fünf Newsletter-Kacheln unter dem Knopf, linksbündiger Text wie auf der Newsletter-Seite */
.nl-teaser__grid { margin-top: var(--abstand-l); text-align: center; }

/* Zitat-Abschnitt und Shop rücken näher zusammen (Georg, 17.09.) */
section.zitat { padding-top: calc(var(--abstand-section) * 0.4); padding-bottom: calc(var(--abstand-section) * 0.35); }
.hero--willkommen { padding-bottom: calc(var(--abstand-section) * 0.35); }
#shop { padding-top: calc(var(--abstand-section) * 0.4); }

/* Startseite: Knopf „Schick mir die erste Blüte“ unter den Kacheln, wie auf der Newsletter-Seite */
.nl-teaser__unten { margin: var(--abstand-l) auto 0 !important; max-width: none; width: 100%; text-align: center; }

/* ---------- Angebotsseite „Der Kranz“ (kranz.html) ---------- */
.kranz-wahl { display: grid; gap: var(--abstand-s); margin-top: var(--abstand-m); max-width: 34rem; }
.kranz-wahl__option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; background: var(--weiss); border: 1.5px solid var(--hell); border-radius: 1.2rem; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.kranz-wahl__option:hover { border-color: var(--salbei); }
.kranz-wahl__option--aktiv { border-color: var(--salbei); box-shadow: 0 8px 22px rgba(65, 71, 61, 0.12); }
.kranz-wahl__option input { accent-color: var(--salbei); width: 1.1rem; height: 1.1rem; margin: 0; }
.kranz-wahl__text { display: grid; gap: 0.15rem; }
.kranz-wahl__text strong { font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; color: var(--dunkel); line-height: 1.2; }
.kranz-wahl__text small { font-size: 0.88rem; color: var(--mittel); }
.kranz-wahl__preis { font-family: var(--font-body); color: var(--salbei); white-space: nowrap; }
.kranz-wahl__summe { display: flex; justify-content: space-between; align-items: baseline; padding: var(--abstand-s) 0.2rem 0; border-top: 1px solid var(--hell); margin: 0; color: var(--dunkel); }
.kranz-wahl__summe strong { font-family: var(--font-head); font-size: 1.6rem; color: var(--salbei); }
.kranz-wahl .btn { justify-self: start; margin: 0; }
.kranz-wahl .nl-hinweis { margin: 0; }
.kranz-bild img { object-position: center top; }

/* ---------- Produktkarten sauber strukturiert (Georg, 17.09.) ----------
   Knopf „In den Warenkorb“ auf allen Karten auf gleicher Höhe, Beschreibung kräftiger,
   auf der Startseite die letzte Reihe mittig */
.produkt { display: flex; flex-direction: column; height: 100%; }
.produkt__info { display: flex; flex-direction: column; flex: 1 1 auto; }
.produkt__name { margin: 0 0 var(--abstand-xs); }
.produkt__beschreibung { color: var(--dunkel); font-size: 0.95rem; line-height: 1.5; margin: 0 0 var(--abstand-xs); }
.produkt__preis { color: var(--dunkel); font-size: 1.05rem; margin: 0 0 var(--abstand-s); }
.produkt__daten { margin: 0 0 var(--abstand-s); }
.produkt__info .btn {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
}
.shop--start .shop__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.shop--start .shop__grid .produkt { flex: 0 1 calc((100% - 2 * clamp(1.5rem, 3vw, 2.5rem)) / 3); min-width: 250px; }
@media (max-width: 700px) { .shop--start .shop__grid .produkt { flex-basis: 100%; } }

/* Alinas Querformat-Videos (18.09.): Newsletter-Hero und Stimmungsband */
.nl-kranz--foto video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stimmungsband video { width: 100%; height: 125%; margin-top: -6%; object-fit: cover; object-position: center 45%; display: block; will-change: transform; }

/* Stick-Video als Band: ganzes Bild zeigen, nichts abschneiden (Georg, 18.09.), darum Bildformat 16:9
   und kein Parallax-Überstand */
.stimmungsband--video { height: auto; aspect-ratio: 16 / 9; }
.stimmungsband--video::after { background: linear-gradient(180deg, rgba(250,247,240,0.14), rgba(62,58,51,0.04) 55%, rgba(250,247,240,0.16)); } /* Alina, 09.10.: Video war zu blass */
.stimmungsband--video video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center; }

/* Muster des Monats: Flug vom Ladebildschirm ins Eck */
.monatsflug { position: fixed; z-index: 10001; border-radius: 50%; overflow: hidden; transform-origin: top left; will-change: transform;
  box-shadow: 0 14px 40px rgba(65, 71, 61, 0.28); border: 4px solid var(--weiss); box-sizing: border-box;
  transition: transform 1s cubic-bezier(0.55, 0, 0.2, 1); pointer-events: none; }
.monatsflug img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Muster des Monats als Karte im Shop: Marke oben links, kurzes Hervorheben nach dem Sprung */
.produkt--monat { position: relative; box-shadow: 0 0 0 1.5px var(--salbei), 0 8px 30px rgba(65, 71, 61, 0.1); }
.produkt--monat .produkt__bild { position: relative; }
/* unten links auf dem Bild, damit sie das Motiv nicht verdeckt (Georg, 18.09.) */
.produkt__marke { position: absolute; bottom: 0.8rem; left: 0.8rem; z-index: 2; padding: 0.3rem 0.75rem; border-radius: 999px;
  background: var(--salbei); color: var(--weiss); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.produkt--hervor { animation: produkt-hervor 2.4s ease; }
@keyframes produkt-hervor { 0%, 100% { box-shadow: 0 0 0 1.5px var(--salbei), 0 8px 30px rgba(65, 71, 61, 0.1); }
  30% { box-shadow: 0 0 0 6px rgba(121, 124, 97, 0.45), 0 14px 40px rgba(65, 71, 61, 0.2); } }
@media (prefers-reduced-motion: reduce) { .produkt--hervor { animation: none; } }

/* ---------- Seite „Muster des Monats“ ---------- */
.mdm { padding-top: clamp(8rem, 14vw, 11rem); }
.mdm__raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .mdm__raster { grid-template-columns: 1fr; } }
.mdm__karte { background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); max-width: 440px; width: 100%; justify-self: center; }
.mdm__bild { aspect-ratio: 1 / 1; overflow: hidden; }
.mdm__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdm__info { padding: 1.4rem 1.6rem 1.7rem; display: grid; gap: 0.35rem; }
.mdm__monat { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mittel); }
.mdm__titel { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.15; color: var(--dunkel); margin: 0; }
.mdm__art { color: var(--dunkel); font-size: 0.95rem; margin: 0 !important; }
.mdm__preis { color: var(--dunkel); font-size: 1.1rem; margin: 0.6rem 0 0.9rem !important; }
.mdm__info .btn { width: 100%; text-align: center; }
.mdm__bald { color: var(--mittel); font-size: 0.95rem; margin: 0.6rem 0 0 !important; }
.mdm__text p { max-width: 52ch; }
.mdm__jahr { list-style: none; padding: 0; margin: 1.6rem 0 1.2rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.35rem; max-width: 34rem; }
.mdm__jahr li { text-align: center; font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.45rem 0; border-radius: 999px; border: 1px solid var(--hell); color: var(--mittel); background: var(--weiss); }
.mdm__jahr li.mdm__jahr--vorbei { color: var(--dunkel); border-color: var(--salbei); }
.mdm__jahr li.mdm__jahr--jetzt { background: var(--salbei); border-color: var(--salbei); color: var(--weiss); }
@media (max-width: 520px) { .mdm__jahr { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mdm__hinweis { font-size: 0.92rem; color: var(--mittel); }
.mdm__hinweis a { color: var(--salbei); }

/* Preisorientierung (statt Preisrechner): drei Gruppen mit Zwischentitel */
.preise-gruppe { margin-top: var(--abstand-m); }
.preise-gruppe__titel { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mittel); margin: 0 0 0.3rem !important; }
.preise-gruppe__text { font-size: 0.95rem; margin: 0 0 0.4rem !important; }
.preise-gruppe .preise { margin-top: 0.4rem; }

/* Handy: Shop und Newsletter größer und optisch auf Höhe der Symbole (Georg, 19.09.).
   Der Textkasten ist schon mittig, die Buchstaben sitzen darin aber höher als die Mitte
   eines Symbols, darum ein kleiner Versatz nach unten. */
@media (max-width: 1200px) {
  .nav__schnell a { font-size: 1.02rem; letter-spacing: 0; line-height: 1; display: inline-block; transform: translateY(2px); }
}
@media (max-width: 1200px) { .nav__schnell { gap: 0.75rem; } }
@media (max-width: 380px) {
  .nav__schnell a { font-size: 0.92rem; }
  .nav__schnell { gap: 0.6rem; }
}

/* Handy, 19.09.: Grundlinie von Shop/Newsletter auf Höhe des unteren Rands der Symbole,
   die beiden Wörter enger zusammen, den gewonnenen Platz bekommt das Logo */
@media (max-width: 700px) {
  .nav__schnell { justify-content: center; gap: 0.5rem; }
  .nav__schnell a { transform: translateY(6.5px); }
  .nav__logo, .nav--gescrollt .nav__logo { height: 48px; }
}
@media (max-width: 380px) {
  .nav__schnell { gap: 0.45rem; }
  .nav__logo, .nav--gescrollt .nav__logo { height: 44px; }
}
@media (max-width: 365px) {
  .nav__logo, .nav--gescrollt .nav__logo { height: 42px; }
}

/* Handy, 19.09.: Sprachwahl unter den Hamburger, der frei gewordene Platz geht ans Logo;
   kleine Margerite über „Newsletter“ wie im großen Menü */
@media (max-width: 700px) {
  .nav__rechts--gestapelt { position: relative; }
  .nav__rechts .sprachwahl { position: absolute; top: 100%; right: 0; margin: 0.1rem 0 0; }
  .nav__rechts .sprachwahl .sprachwahl__knopf { padding: 0.05rem 0.25rem; font-size: 0.7rem; }
  .nav__rechts--gestapelt .sprachwahl__liste { right: 0; left: auto; transform: none; }
  .nav__logo, .nav--gescrollt .nav__logo { height: 52px; }

  .nav__schnell a[href="newsletter.html"] { position: relative; }
  .nav__schnell a[href="newsletter.html"]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -1.15rem;
    width: 1.6rem;
    height: 1.1rem;
    transform: translateX(-50%);
    background: url('../assets/images/marke/margerite-salbei.svg?v=4d2d22e8') no-repeat center / contain;
  }
  .nav:not(.nav--gescrollt) .nav__schnell a[href="newsletter.html"]::before {
    background-image: url('../assets/images/marke/margerite-creme.svg?v=aac34316');
    filter: brightness(1.2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.45));
  }
}
@media (max-width: 380px) {
  .nav__logo, .nav--gescrollt .nav__logo { height: 48px; }
}
@media (max-width: 365px) {
  .nav__logo, .nav--gescrollt .nav__logo { height: 46px; }
}

/* Handy, 19.09.: Shop und Newsletter wieder etwas weiter auseinander */
@media (max-width: 700px) { .nav__schnell { gap: 0.95rem; } }
@media (max-width: 380px) { .nav__schnell { gap: 0.8rem; } }

/* Handy, 19.09.: Konto, Korb und Hamburger ganz dezent weiter auseinander */
@media (max-width: 700px) { .nav__rechts--gestapelt .nav__icons { gap: 0.6rem; } }
@media (max-width: 380px) { .nav__rechts--gestapelt .nav__icons { gap: 0.5rem; } }

/* Handy, 19.09.: Sprachwahl so breit wie der Hamburger (26 px Striche) */
@media (max-width: 700px) {
  .nav__rechts .sprachwahl { right: 0; width: 32px; margin-top: 0; }
  .nav__rechts .sprachwahl .sprachwahl__knopf { width: 100%; justify-content: center; padding: 0.1rem 0; font-size: 0.95rem; letter-spacing: 0.06em; }
}

/* Handy, 19.09.: Sprachwahl etwas tiefer, Hamburger und Sprachwahl minimal weiter weg vom rechten Rand */
@media (max-width: 700px) {
  .nav { padding-right: 14px; }
  .nav__rechts .sprachwahl { margin-top: 0.35rem; }
}
/* beim Scrollen die Leiste unten etwas tiefer, damit „DE“ nicht aus dem Hintergrund ragt */
@media (max-width: 700px) { .nav.nav--gescrollt { padding-bottom: 24px; } }

/* ============================================================
   Newsletter-Wachstum (21.09.): Häkchen im Warenkorb, im Konto, Danke-Seite
   ============================================================ */
.korb__nl { margin: 0.2rem 0 0.9rem; font-size: 0.86rem !important; line-height: 1.45; color: var(--mittel) !important; cursor: pointer; }
.korb__nl input { margin-top: 0.15rem; }
.korb__nl[hidden] { display: none !important; }

.konto-nl { margin: var(--abstand-l) 0; padding: clamp(1.4rem, 3vw, 2rem); background: var(--weiss); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(65, 71, 61, 0.07); }
.konto-nl h2 { margin-top: 0; }
.konto-nl .haekchen { cursor: pointer; }
.konto-nl .formular__status { margin: 0.8rem 0 0; }

.danke { padding: clamp(9rem, 16vw, 12rem) 0 var(--abstand-section); text-align: center; }
.danke__inhalt { max-width: 720px; }
.danke__inhalt > p { max-width: 560px; margin-left: auto; margin-right: auto; }
.danke__nl { margin-top: var(--abstand-xl); text-align: left; }
.danke__nl .section-label { display: block; }
#danke-nl-schon { text-align: center; }
#danke-nl-schon p { margin: 0; }

/* ============================================================
   Rechtsseiten (22.09.): Impressum, AGB, Datenschutz
   Ruhige Lesespalte, deutsche Fassung ist maßgeblich, Englisch
   liegt daneben im selben Dokument (js/recht.js schaltet um).
   ============================================================ */
.recht { padding: clamp(9rem, 16vw, 12rem) 0 var(--abstand-section); }
.recht .container { max-width: 760px; }

.recht__entwurf {
  margin: 0 0 var(--abstand-l);
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--rose);
  background: rgba(153, 64, 64, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mittel);
}
.recht__entwurf strong { color: var(--rose); }

.recht__sprachen { display: flex; gap: 0.5rem; margin-bottom: var(--abstand-l); }
.recht__sprachen button {
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(85, 86, 70, 0.25);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mittel);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.recht__sprachen button:hover { border-color: var(--salbei); color: var(--dunkel); }
.recht__sprachen button[aria-pressed='true'] { background: var(--salbei); border-color: var(--salbei); color: var(--weiss); }

.recht__text > h1 { margin-bottom: var(--abstand-s); }
.recht__text > p.recht__stand { margin: 0 0 var(--abstand-xl); font-size: 0.9rem; color: var(--mittel); }
.recht__text h2,
.widerruf h2 {
  margin: var(--abstand-xl) 0 var(--abstand-s);
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dunkel);
}
.recht__text h3 { margin: var(--abstand-l) 0 var(--abstand-xs); font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--dunkel); }
.recht__text p, .recht__text li, .widerruf > .container > p { font-size: 0.97rem; line-height: 1.75; }
.recht__text ul, .recht__text ol { margin: 0 0 var(--abstand-m); padding-left: 1.3rem; }
.recht__text li { margin-bottom: 0.45rem; }
.recht__text a { color: var(--salbei); text-decoration: underline; text-underline-offset: 0.2em; }

/* Angaben, die Alina bzw. die Steuerberatung noch prüfen oder liefern muss */
.recht__pruefen {
  background: rgba(153, 64, 64, 0.1);
  color: var(--rose);
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  font-style: italic;
}

/* Anschriftenblock, Muster-Widerrufsformular */
.recht__block {
  margin: 0 0 var(--abstand-m);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(65, 71, 61, 0.06);
}
.recht__block p { margin: 0 0 0.5rem; }
.recht__block p:last-child { margin-bottom: 0; }
.recht__block dl { margin: 0; display: grid; grid-template-columns: minmax(11rem, auto) 1fr; gap: 0.45rem 1.2rem; }
.recht__block dt { font-weight: 600; color: var(--dunkel); font-size: 0.93rem; }
.recht__block dd { margin: 0; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 600px) {
  .recht__block dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .recht__block dd { margin-bottom: 0.7rem; }
}

/* Tabelle auf der Cookie-Seite */
.recht__tabelle { width: 100%; border-collapse: collapse; margin: 0 0 var(--abstand-m); font-size: 0.9rem; }
.recht__tabelle th, .recht__tabelle td { padding: 0.7rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(85, 86, 70, 0.12); line-height: 1.55; }
.recht__tabelle th { font-weight: 600; color: var(--dunkel); border-bottom-width: 2px; }
.recht__tabelle td:first-child { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82rem; color: var(--mittel); white-space: nowrap; }
@media (max-width: 640px) {
  .recht__tabelle, .recht__tabelle tbody, .recht__tabelle tr, .recht__tabelle td { display: block; width: 100%; }
  .recht__tabelle thead { display: none; }
  .recht__tabelle tr { padding: 0.9rem 0; border-bottom: 1px solid rgba(85, 86, 70, 0.12); }
  .recht__tabelle td { border: 0; padding: 0.1rem 0; }
  .recht__tabelle td:first-child { white-space: normal; margin-bottom: 0.3rem; }
  .recht__tabelle td:last-child { color: var(--mittel); font-size: 0.85rem; }
}

/* Vertrag widerrufen */
.widerruf__schritt { margin-bottom: var(--abstand-xl); }
.widerruf__schritt[hidden] { display: none; }
.widerruf__kopf { margin: 0 0 var(--abstand-s); font-size: 0.9rem; color: var(--mittel); letter-spacing: 0.04em; }
.widerruf__hilfe { margin-top: var(--abstand-s); font-size: 0.88rem; color: var(--mittel); }

.widerruf__liste { list-style: none; margin: 0 0 var(--abstand-s); padding: 0; }
.widerruf__position { border-bottom: 1px solid rgba(85, 86, 70, 0.12); }
.widerruf__position:last-child { border-bottom: 0; }
.widerruf__position label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  padding: 0.9rem 0;
  margin: 0;
  cursor: pointer;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}
.widerruf__position input { margin: 0; align-self: center; }
.widerruf__name { color: var(--dunkel); }
.widerruf__preis { color: var(--mittel); white-space: nowrap; }
.widerruf__grund { grid-column: 2 / -1; font-size: 0.82rem; line-height: 1.5; color: var(--rose); }
.widerruf__position--gesperrt label { cursor: default; opacity: 0.75; }
.widerruf__position--gesperrt .widerruf__name { text-decoration: line-through; text-decoration-color: rgba(85, 86, 70, 0.35); }

/* Faserzusammensetzung in der Preisorientierung (22.09., Angaben von Alina) */
.preise-gruppe__material { margin: -0.4rem 0 var(--abstand-s); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--mittel); }

/* Womit ich sticke (23.09.): die kleine Seite mit den Partnerlinks.
   Nummer links, darunter Text und Knopf. Der Knopf steht bewusst unter dem Satz
   und nicht daneben, sonst geht er neben dem Fließtext unter. */
.werkzeuge__liste { list-style: none; margin: var(--abstand-l) 0 var(--abstand-xl); padding: 0; }
.werkzeug {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: start;
  gap: 0.2rem 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(85, 86, 70, 0.12);
}
.werkzeug:last-child { border-bottom: 0; }
.werkzeug__nr {
  width: 2.2rem; height: 2.2rem;
  border: 1px solid rgba(121, 124, 97, 0.45);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.82rem;
  color: var(--mittel);
}
.werkzeug__text h2 { margin: 0.15rem 0 0.35rem; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--dunkel); }
.werkzeug__text p { margin: 0; font-size: 0.95rem; line-height: 1.7; }
.werkzeug__links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.werkzeug__link, .werkzeug__fehlt { grid-column: 2; justify-self: start; margin-top: 0.9rem; }
.werkzeug__fehlt {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px dashed rgba(121, 124, 97, 0.5);
  border-radius: 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mittel);
}
.werkzeug__kein {
  grid-column: 2;
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--mittel);
}
.werkzeug__wo { grid-column: 2; margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.7; }
.werkzeug__wo p { margin: 0 0 0.4rem; }
.werkzeug__laeden { margin: 0; padding-left: 1.1rem; }
.werkzeug__laeden li { margin: 0.15rem 0; }
.werkzeug__laeden a { color: var(--dunkel); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: rgba(121, 124, 97, 0.5); }
.werkzeuge__hinweis { font-size: 0.9rem; color: var(--mittel); }
.werkzeuge__pflicht { margin-top: -0.4rem; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--mittel); }

/* Danke-Seite nach der Newsletter-Bestätigung (28.09.) */
.recht.danke h1 { margin-bottom: var(--abstand-l); }
.recht.danke .danke__inhalt { margin: 0 auto; }
.nld-dl__titel { margin-bottom: 0.8rem !important; }
.nld-dl { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.8rem !important; }
.nld-dl .btn { min-width: 9rem; }
.nld-dl__hinweis { font-size: 0.88rem; color: var(--mittel); }
.nld-foto { width: min(340px, 100%); border-radius: var(--radius); margin: 0 auto; display: block; }
.nld-ps { font-size: 0.9rem; color: var(--mittel); text-align: left; }

/* Gewährleistungshinweis im Fuß jeder Seite (EU-Pflicht seit 27.09.2026).
   Die große Fassung über den Produkten bleibt auf shop.html, diese hier ist
   der allgemeine Hinweis, den es auf jeder Seite braucht. */
.fuss-gewaehr { display: flex; align-items: center; gap: 0.9rem; margin-top: 2rem;
                padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.16); }
.fuss-gewaehr__bild { width: 54px; height: auto; flex: none; }
.fuss-gewaehr__text { margin: 0; font-size: 0.82rem; line-height: 1.5; opacity: 0.75; }
@media (max-width: 560px) { .fuss-gewaehr { flex-direction: column; align-items: flex-start; } }
/* Angebotspreis aus dem Companion: alter Preis durchgestrichen, neuer in Rose */
.produkt__preis-alt { opacity: .6; font-size: .9em; margin-right: .25em; }
.produkt__preis:has(.produkt__preis-alt) { color: var(--rose); }

/* Kostenlose Anleitungen auf der Danke-Seite (Korb ohne Bezahlung) */
.danke-gratis { margin: 2.4rem 0; padding: 1.6rem 1.8rem 1.8rem; background: var(--creme, #f5efe6);
                border-radius: var(--radius); text-align: left; }
.danke-gratis > p { margin: 0.5rem 0 1.2rem; }
.danke-gratis__liste { display: grid; gap: 0.8rem; }
.danke-gratis__stueck { display: flex; align-items: center; justify-content: space-between;
                        gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(63,64,53,0.12); }
.danke-gratis__stueck:last-child { border-bottom: 0; padding-bottom: 0; }
.danke-gratis__fehlt { font-size: 0.88rem; opacity: 0.7; }
/* Zwei Knöpfe je Muster, einer je Papierformat. Auf schmalen Schirmen
   untereinander, sonst stehen sie zu eng. */
.danke-gratis__knoepfe { display: flex; gap: 0.5rem; flex-shrink: 0; }
.danke-gratis__knoepfe .btn { white-space: nowrap; }
@media (max-width: 520px) { .danke-gratis__stueck { flex-direction: column; align-items: flex-start; }
                            .danke-gratis__knoepfe { width: 100%; } 
                            .danke-gratis__knoepfe .btn { flex: 1; } }

/* Startseite, Shop-Teil (09.10.2026): Ankündigung des nächsten Shop Drops, darunter die Vorlagen,
   bis Weihnachten mit dem Adventskalender groß in der Mitte (js/start-shop.js) */
.drop-hinweis { max-width: 34rem; margin: 2.2rem auto 0; padding: 1.6rem 2rem 1.5rem; text-align: center;
  border: 1px solid rgba(121, 124, 97, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.45); }
.drop-hinweis__label { display: block; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mittel); }
.drop-hinweis__wann { font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; margin: 0.35rem 0 0.4rem; color: var(--dunkel); }
.drop-hinweis__text { margin: 0; color: var(--mittel); font-size: 0.95rem; }

.start-vorlagen { margin-top: clamp(4rem, 8vw, 6rem); }
.start-vorlagen__titel { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0.2rem 0 2rem; }

.start-advent { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
  text-align: left; color: inherit; text-decoration: none; margin: 0 auto clamp(3rem, 6vw, 4.5rem); max-width: 1080px; }
.start-advent[hidden] { display: none; }
.start-advent__bild { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; transition: transform 0.9s ease, box-shadow 0.9s ease; }
.start-advent__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); }
.start-advent:hover .start-advent__bild, .start-advent:focus-visible .start-advent__bild { transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(65, 71, 61, 0.55); }
.start-advent:hover .start-advent__bild img, .start-advent:focus-visible .start-advent__bild img { transform: scale(1.025); }
.start-advent__text { display: grid; gap: 0.9rem; justify-items: start; }
.start-advent__text .section-label { color: var(--rose, #994040); margin: 0; }
.start-advent__name { font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; color: var(--dunkel); }
.start-advent__p { max-width: 28rem; }
.start-advent__motive { display: flex; gap: 0.5rem; margin: 0.2rem 0; }
.start-advent__motive img { width: clamp(2.6rem, 5vw, 3.4rem); aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #F3EDE3; padding: 0.3rem; box-sizing: border-box; }
.start-advent--monat .start-advent__p, .start-advent--monat .start-advent__motive { display: none; }
.start-advent__fuss { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.start-advent__preis { font-size: 1.15rem; color: var(--dunkel); }

.start-vorlagen__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); max-width: 1080px; margin: 0 auto; text-align: left; }
.start-vorlagen__alle { margin-top: 2.8rem; }

@media (max-width: 760px) {
  .start-advent { grid-template-columns: 1fr; }
  .start-vorlagen__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .start-advent__bild, .start-advent__bild img { transition: none; transform: none !important; }
}

/* Intro mit sanftem Salbei-Schleier (Georg, 09.10.2026): heller und wärmer als der dunkle,
   Creme war zu grell. Schrift bleibt hell. Zurück: Klasse intro--salbei in index.html entfernen. */
.intro--salbei .intro__schleier { background: linear-gradient(155deg,
    rgba(104, 100, 74, 0.58) 0%,
    rgba(120, 114, 86, 0.36) 55%,
    rgba(104, 100, 74, 0.52) 100%); }
.intro--salbei .section-label, .intro--salbei .intro__tagline, .intro--salbei .intro__zitat cite { color: #f1ead9; text-shadow: 0 1px 8px rgba(60, 56, 40, 0.35); }
.intro--salbei .intro__zitat p { color: #fffaf0; text-shadow: 0 1px 10px rgba(60, 56, 40, 0.35); }
.intro--salbei .stich-zeichen { stroke: #fffaf0; filter: drop-shadow(0 1px 4px rgba(60, 56, 40, 0.35)); }
.intro--salbei .schreiben--gestickt .stich-zeichen { fill: #fffaf0; }
/* Knopf in Creme, sonst verschwindet er im Salbei */
.intro--salbei .btn--voll { background: #f6f0e2; color: var(--dunkel); }
.intro--salbei .btn--voll:hover { box-shadow: 0 12px 30px rgba(60, 56, 40, 0.3); }
@media (max-width: 700px) {
  .intro--salbei .intro__schleier { background: linear-gradient(170deg,
      rgba(96, 92, 68, 0.66) 0%,
      rgba(110, 104, 78, 0.48) 55%,
      rgba(96, 92, 68, 0.62) 100%); }
}
/* Zitat im Intro am Desktop in einer Zeile (Georg, 09.10.2026), lange Zitate brechen weiter um */
@media (min-width: 900px) { .intro__zitat { max-width: 62rem; } }

/* Die vier Blüten: erst Alinas Abpausvorlage Strich für Strich, dann das Foto (js/zeichnen.js, 09.10.2026) */
.zeichnung-rahmen { position: relative; display: block; }
.ablauf__bildrahmen { height: 150px; aspect-ratio: 4 / 5; margin: 0.9rem auto 0.8rem; }
.ablauf__bildrahmen .ablauf__bild { margin: 0 auto; }
.nld-fotorahmen { width: min(340px, 100%); margin: 0 auto; }
.nld-fotorahmen .nld-foto { width: 100%; }
.rahmen-zeichnung { position: absolute; inset: 4%; pointer-events: none; color: var(--dunkel); transition: opacity 0.9s ease; }
.rahmen-zeichnung svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rahmen-zeichnung:not(.zeichnet-js):not(.still) path { opacity: 0; }
.zeichnung-rahmen:not(.mit-zeichnung) .rahmen-zeichnung { display: none; }
.zeichnung-rahmen.mit-zeichnung > img { opacity: 0; transition: opacity 1.4s ease 0.1s; }
.zeichnung-rahmen.mit-zeichnung.gezeichnet > img { opacity: 1; }
.zeichnung-rahmen.gezeichnet > .rahmen-zeichnung { opacity: 0; }
.nld-fotorahmen .rahmen-zeichnung { inset: 12% 22%; }

/* Made by you ohne Einsendungen: Einladung statt Beispielkarten (09.10.2026) */
.mby-leer { grid-column: 1 / -1; max-width: 34rem; margin: 0 auto; padding: 2.4rem 2rem; text-align: center;
  border: 1px dashed rgba(121, 124, 97, 0.45); border-radius: 18px; }
.mby-leer h3 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.3rem); margin: 0 0 0.6rem; }
.mby-leer p { margin: 0 0 1.4rem; color: var(--mittel); }
.mby-filter[hidden], #mby-hinweis[hidden] { display: none; }
.haekchen--leise span { color: var(--mittel); font-size: 0.92em; }

/* Codefeld im Warenkorb (09.10.2026) */
.korb__code { margin: 0 0 0.9rem; font-size: 0.92rem; }
.korb__code[hidden], .korb__code [hidden] { display: none !important; }
.korb__code-frage { background: none; border: 0; padding: 0; color: var(--mittel); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.korb__code-frage:hover { color: var(--dunkel); }
.korb__code-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.korb__code-form input { flex: 1 1 auto; min-width: 0; padding: 0.55rem 0.8rem; border: 1px solid rgba(121, 124, 97, 0.45); border-radius: 999px; font: inherit; letter-spacing: 0.08em; text-transform: uppercase; background: var(--weiss); color: var(--dunkel); }
.korb__code-form .btn { padding: 0.5rem 1.1rem; font-size: 0.88rem; }
.korb__code-aktiv { margin: 0; color: var(--dunkel); }
.korb__code-weg { background: none; border: 0; padding: 0; margin-left: 0.3rem; color: var(--mittel); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.korb__code-status { margin: 0.4rem 0 0; color: var(--rose); font-size: 0.86rem; min-height: 0; }
.korb__code-status:empty { display: none; }

/* Alinas Zeichnungen für Konto und Warenkorb (12.10.2026): ersetzen Stickrahmen und Blumenkörbchen.
   Als Maske, damit sie die Farbe der Kopfzeile übernehmen (hell über dem Startbild, sonst dunkel). */
.nav-zeichnung { display: block; background-color: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.nav-zeichnung--korb { width: 34px; height: 27px;
  -webkit-mask-image: url('../assets/images/marke/korb-symbol.svg?v=bdbe0504'); mask-image: url('../assets/images/marke/korb-symbol.svg?v=bdbe0504'); }
.nav-zeichnung--profil { width: 26px; height: 29px;
  -webkit-mask-image: url('../assets/images/marke/profil-symbol.svg?v=aa5374c4'); mask-image: url('../assets/images/marke/profil-symbol.svg?v=aa5374c4'); }

/* Konto-Seite: das Profil zeichnet sich über „Dein Konto“ */
.konto-zeichnung { display: block; width: min(190px, 46vw); aspect-ratio: 420 / 461; margin: 2.5rem 0 1.2rem; color: var(--dunkel); pointer-events: none; }
.konto-zeichnung svg { width: 100%; height: 100%; overflow: visible; }
.konto-zeichnung:not(.zeichnet-js):not(.still) path { opacity: 0; }

/* Leerer Warenkorb: Alinas Körbchen */
.korb__leer-bild { display: block; width: 150px; aspect-ratio: 420 / 325; margin: 1.5rem auto 1rem; background-color: var(--dunkel);
  -webkit-mask: url('../assets/images/shop/zeichnungen/korb.svg?v=215a7c8d') center / contain no-repeat; mask: url('../assets/images/shop/zeichnungen/korb.svg?v=215a7c8d') center / contain no-repeat; }

/* Rabatt-Zeile im Warenkorb: display:flex von .korb__gesamt überstimmte [hidden], bei leerem Korb stand „Rabatt −0,00 €“ (12.10.2026) */
.korb__gesamt[hidden] { display: none; }

/* ---------- Alle Muster des Monats (12.10.2026) ---------- */
/* Im Detail: Nahaufnahmen mit Stichangaben (12.10.2026) */
.mdm-detail { padding: var(--abstand-l, 4rem) 0 0; }
.mdm-detail h2 { margin: 0.3rem 0 0.6rem; }
.mdm-detail__p { max-width: 42rem; color: var(--dunkel); margin-bottom: 2.2rem; }
.mdm-detail__p p { margin: 0 0 0.6rem; }
.mdm-detail__p ul { margin: 0 0 0.8rem; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.mdm-detail__p li::marker { color: var(--salbei); }
.mdm-detail__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 1100px) { .mdm-detail__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; } }
@media (max-width: 600px) { .mdm-detail__raster { grid-template-columns: 1fr; max-width: 30rem; } }
.mdm__rahmen { color: var(--mittel) !important; font-size: 0.9rem !important; }
.mdm-detail__karte { margin: 0; }
.mdm-detail__bild { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); margin-bottom: 1.1rem; }
.mdm-detail__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdm-detail__titel { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; color: var(--dunkel); margin: 0; }
.mdm-detail__karte p { font-size: 0.95rem; line-height: 1.6; color: var(--dunkel); margin: 0 0 0.55rem; }
.mdm-alle { padding: var(--abstand-l, 4rem) 0; }
.mdm-alle h2 { margin: 0.3rem 0 0.6rem; }
.mdm-alle__p { max-width: 42rem; color: var(--dunkel); margin-bottom: 2rem; }
.mdm-alle__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.6rem 1.2rem; }
.mdm-alle__karte { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: var(--dunkel); }
.mdm-alle__bild { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--weiss, #fff); margin-bottom: 0.5rem; }
.mdm-alle__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
a.mdm-alle__karte:hover .mdm-alle__bild img { transform: scale(1.04); }
.mdm-alle__bild--bald { display: grid; place-items: center; background: rgba(121, 124, 97, 0.08); border: 1px dashed rgba(121, 124, 97, 0.35); }
.mdm-alle__bild--bald img { width: 38%; height: auto; opacity: 0.5; object-fit: contain; }
.mdm-alle__monat { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salbei); }
.mdm-alle__titel { font-size: 1.05rem; }
.mdm-alle__preis { font-size: 0.95rem; opacity: 0.85; }
.mdm-alle__karte--bald { opacity: 0.75; }

/* Shop: Hinweis beim Filter „Muster des Monats“ */
.pmonate-hinweis { margin: 0 0 1.4rem; font-size: 0.95rem; color: var(--dunkel); opacity: 0.85; }

/* Konto: Sammlung der Monatsmuster */
.konto-monate { margin: 0 0 2.5rem; }
.konto-monate__reihe { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem 0.7rem; }
@media (max-width: 600px) { .konto-monate__reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.konto-monat, .konto-monat a { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--dunkel); text-decoration: none; text-align: center; }
.konto-monat__bild { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: rgba(121, 124, 97, 0.08); border: 1px dashed rgba(121, 124, 97, 0.35); }
.konto-monat__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.konto-monat--habe .konto-monat__bild { border: 2px solid var(--salbei); }
.konto-monat--fehlt .konto-monat__bild img { filter: grayscale(0.7); opacity: 0.55; }
.konto-monat--fehlt small { color: var(--salbei); text-decoration: underline; text-underline-offset: 2px; }

/* Über mich: Alinas lange Texte in Absätzen (13.10.2026) */
.ueber-text p { margin: 0 0 0.9em; }
.ueber-text p:last-child { margin-bottom: 0; }

/* Galerie-Filter (13.10.2026): Chips als Knöpfe, Treppe nach sichtbaren Bildern */
.galerie__chips { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.galerie__chip { font: inherit; font-size: 0.95rem; color: var(--mittel); background: transparent; border: 1px solid var(--hell);
  border-radius: 999px; padding: 0.4rem 1.2rem; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.galerie__chip:hover { border-color: var(--salbei); color: var(--dunkel); }
.galerie__chip--aktiv { background: var(--salbei); border-color: var(--salbei); color: var(--weiss); }
.galerie__bild[hidden] { display: none; }
.galerie__mehr { display: flex; justify-content: center; margin-top: var(--abstand-l, 3rem); }
a.galerie__chip { text-decoration: none; display: inline-block; }
.galerie--seite .container { max-width: none; }
.galerie--seite .galerie__chips { margin-top: var(--abstand-l, 2.5rem); }
.galerie__streifen .galerie__bild { will-change: auto; }
/* seit 13.10.2026 abends ohne Treppe: gleichmäßiges Raster (Alinas Wunsch) */
.galerie__streifen .galerie__bild:nth-child(n) { margin-top: 0; }
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Über mich: zwei Fotos (13.10.2026) */
.ueber-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); margin-top: var(--abstand-xl, 4rem); }
.ueber-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(65, 71, 61, 0.1); display: block; }
.ueber-fotos img:nth-child(2) { margin-top: 3rem; }

/* Warenkorb: Gewährleistungslabel nur bei physischen Stücken (13.10.2026) */
.korb__gewaehr { margin: 1.2rem 0 0.4rem; padding-top: 1rem; border-top: 1px dashed rgba(100, 108, 95, 0.4); }
.korb__gewaehr img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }

/* Menü mit acht kurzen Punkten (13.10.2026 abends): wieder Luft, also größere Schrift */
/* 15.10.: noch etwas mehr Luft und ganz dezent größer (Georg), je Breite nachgemessen */
.nav__links { gap: 3.4rem; }
.nav__links a { font-size: 1.24rem; }
@media (min-width: 1201px) and (max-width: 1600px) {
  .nav__links { gap: 2.5rem; }
  .nav__links a { font-size: 1.13rem; }
}
@media (min-width: 1201px) and (max-width: 1400px) {
  .nav__links { gap: 1.8rem; }
  .nav__links a { font-size: 1.04rem; }
  .nav__mitte { margin-right: 0.6rem; }
}
@media (min-width: 1201px) and (max-width: 1300px) {
  .nav__links { gap: 1.5rem; }
  .nav__links a { font-size: 1.02rem; }
}

/* Kundenkonto vorerst aus (15.10.2026, bis Jeremias die echte Anmeldung anschließt).
   Wieder einschalten: Klasse „ohne-konto“ in js/i18n.js entfernen. */
.ohne-konto .nav-konto,
.ohne-konto li:has(> a[href="konto.html"]),
.ohne-konto #korb-wahl,
.ohne-konto [data-i18n="dk.p2"] { display: none !important; }

/* Galerie: Großansicht (14.10.2026) */
.galerie__bild img { cursor: zoom-in; }
.grossbild { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(38, 36, 32, 0.92); padding: max(3.5rem, env(safe-area-inset-top)) 1rem max(3.5rem, env(safe-area-inset-bottom)); }
.grossbild[hidden] { display: none; }
.grossbild__bild { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6); }
.grossbild__knopf { position: absolute; border: 0; cursor: pointer; display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 1.9rem; line-height: 1; }
.grossbild__knopf:hover, .grossbild__knopf:focus-visible { background: rgba(255, 255, 255, 0.28); }
.grossbild__zu { top: max(0.8rem, env(safe-area-inset-top)); right: 0.8rem; }
.grossbild__zurueck, .grossbild__weiter { top: 50%; transform: translateY(-50%); }
.grossbild__zurueck { left: 0.8rem; }
.grossbild__weiter { right: 0.8rem; }
@media (max-width: 700px) {
  .grossbild { padding-inline: 0.5rem; }
  .grossbild__zurueck, .grossbild__weiter { top: auto; bottom: max(0.6rem, env(safe-area-inset-bottom)); transform: none; }
  .grossbild__zurueck { left: calc(50% - 3.4rem); }
  .grossbild__weiter { right: calc(50% - 3.4rem); }
}
body.grossbild-offen { overflow: hidden; }

/* Woche 5: Alinas Kranz zeichnet sich ohne den Fuchs, in der Lücke ihr Fragezeichen (15.10.2026) */
.ablauf__kranz { display: block; width: 100%; max-width: 300px; aspect-ratio: 520 / 214; margin: 0.9rem auto 0.8rem; color: var(--salbei); }
.ablauf__kranz svg { display: block; width: 100%; height: 100%; overflow: visible; stroke-width: 3; }
.ablauf__kranz:not(.zeichnet-js):not(.still) path { opacity: 0; }

/* Warenkorb (15.10.): Fuß direkt unter den Produkten statt ganz unten, Codefrage gut lesbar */
.korb__liste { flex: 0 1 auto; }
.korb__fuss { margin-top: 1.4rem; border-top: 0; row-gap: 1rem; margin-bottom: auto; }
/* Ganzer Inhalt samt „Your basket“ senkrecht mittig (Georg, 15.10.) */
.korb__kopf { margin-top: auto; }
.korb__liste { margin-top: 0; }
.korb__fuss .korb__gesamt, .korb__fuss .korb__nl, .korb__fuss .korb__hinweis { margin-top: 0; margin-bottom: 0; }
.korb__fuss .korb__kasse { margin-top: 0.4rem; }
.korb__code-frage { font-size: 1.05rem; color: var(--dunkel); }
.korb__fuss .korb__hinweis { margin: 0.2rem 0 0.9rem; font-size: 0.85rem; }

/* Eingelöster Code (15.10.): Feld offen mit dem Code, alter Preis durchgestrichen */
.korb__code--aktiv .korb__code-form input { background: #eef4ec; border-color: var(--salbei); color: var(--salbei); font-weight: 600; cursor: default; }
.korb__code--aktiv .korb__code-aktiv { margin-top: 0.5rem; font-size: 0.9rem; color: var(--salbei); }
.korb__alt { font-weight: 400; color: var(--mittel); margin-right: 0.35rem; }
#korb-rabatt-zeile, #korb-rabatt-zeile strong { color: var(--salbei); }

/* Zustimmung Rücktrittsrecht an der Kasse (15.10.2026) */
.korb__verzicht { font-size: 0.86rem !important; line-height: 1.45; color: var(--dunkel) !important; cursor: pointer; margin: 0; }
.korb__verzicht input { margin-top: 0.15rem; }
.korb__verzicht[hidden] { display: none !important; }
.korb__verzicht--fehlt { color: var(--rose) !important; }
.korb__verzicht--fehlt input { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Warenkorb kompakter unter den Produkten (Georg, 15.10.): auch mit zwei, drei Anleitungen ohne Scrollen */
.korb__fuss { margin-top: 0.8rem; row-gap: 0.6rem; }
.korb-item { padding: 0.75rem 0; }
.korb__code-form { margin-top: 0.4rem; }
.korb__code-form input { padding: 0.4rem 0.8rem; }
.korb__code-form .btn { padding: 0.35rem 1rem; }
.korb__code--aktiv .korb__code-aktiv { margin-top: 0.3rem; font-size: 0.85rem; }
.korb__fuss .korb__gesamt--rabatt { margin: 0; }
.korb__fuss .korb__hinweis { font-size: 0.8rem; line-height: 1.4; }
.korb__verzicht, .korb__nl { font-size: 0.82rem !important; line-height: 1.4; }
.korb__fuss .korb__kasse { margin-top: 0.2rem; }
.korb-item strong { line-height: 1.25; display: inline-block; margin-bottom: 0.15rem; }
.korb-item__aktionen { gap: 0.4rem; }
/* eingelöster Code: Feld und „Du sparst“ sagen genug, die Zeile „ist eingelöst“ entfällt */
.korb__code--aktiv .korb__code-aktiv { display: none; }
/* Produktzeile: Name über die ganze Breite, darunter Preis links und Knöpfe rechts */
.korb-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name name" "preis aktionen"; align-items: center; row-gap: 0.35rem; column-gap: 1rem; }
.korb-item > div:first-child { display: contents; }
.korb-item > div:first-child > strong { grid-area: name; margin: 0; }
.korb-item > div:first-child > br { display: none; }
.korb-item > div:first-child > span { grid-area: preis; }
.korb-item > .korb-item__aktionen { grid-area: aktionen; }

/* fehlendes Häkchen: kurz wackeln, damit man es sieht */
@keyframes korb-wackeln { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.korb__verzicht--fehlt { animation: korb-wackeln 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .korb__verzicht--fehlt { animation: none; } }

/* Kundenbereich mit echten Downloads (15.10.2026): A4 und US Letter nebeneinander */
.konto-produkt__knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.konto-leer { color: var(--mittel); grid-column: 1 / -1; }
.konto-produkt > div { flex-direction: column; align-items: flex-start; }

/* Anmeldung am Computer (Georg, 15.10.): Zeichnung links, Überschrift, Text und Anmeldekarte rechts daneben */
@media (min-width: 900px) {
  #anmelden .container--schmal { width: min(88%, 1080px); max-width: 1080px; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  #anmelden .konto-zeichnung { grid-column: 1; grid-row: 1 / span 4; width: 100%; margin: 0; }
  #anmelden .container--schmal > :not(.konto-zeichnung) { grid-column: 2; }
  #anmelden .anmelde-karte { margin-left: 0; margin-right: 0; max-width: 520px; }
}
.anbieter[hidden], .anmelde-trenner[hidden], .konto-nl[hidden] { display: none !important; }

/* Hinweis unter der Anmeldung: wie lange man angemeldet bleibt */
.anmelde-hinweis { margin: 0.2rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--mittel); }

/* Anmelde-Knopf: sichtbare Rückmeldung beim Klicken (15.10.2026) */
#login-email-formular .btn { transition: transform 0.12s ease, background-color 0.3s ease, box-shadow 0.2s ease; }
#login-email-formular .btn:active { transform: scale(0.97); box-shadow: none; }
#login-email-formular .btn.knopf--laeuft { opacity: 0.75; cursor: progress; }
#login-email-formular .btn.knopf--fertig { background: var(--salbei); opacity: 1; cursor: default; }
#login-email-formular .btn:disabled { pointer-events: none; }
#login-status:empty { display: none; }
#login-status.formular__status--ok { margin: 0.2rem 0 0; padding: 0.75rem 1rem; border-radius: 12px; background: #eef4ec; color: var(--dunkel); font-size: 0.9rem; line-height: 1.45; }

/* Danke-Seite, Download-Knöpfe am Handy untereinander statt aus dem Bild (15.10.2026) */
.danke-gratis__stueck > span { min-width: 0; }
@media (max-width: 600px) {
  .danke-gratis__stueck { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .danke-gratis__knoepfe { flex-direction: column; width: 100%; }
  .danke-gratis__knoepfe .btn { width: 100%; text-align: center; white-space: normal; }
}

/* Prüfseite „Ist es ein Original?“ (15.10.2026) */
.original-ergebnis { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; border-radius: 12px; font-size: 0.95rem; line-height: 1.45; }
.original-ergebnis strong { font-weight: 500; }
.original-ergebnis--ja { background: #eef4ec; color: var(--dunkel); }
.original-ergebnis--ja strong { color: var(--salbei); }
.original-ergebnis--nein { background: #f6ece6; color: var(--dunkel); }
.original-melden { margin-top: var(--abstand-m); font-size: 0.95rem; color: var(--mittel); }
@media (min-width: 900px) {
  #original .container--schmal { width: min(88%, 1080px); max-width: 1080px; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  #original .original-foto { grid-column: 1; grid-row: 1 / span 5; width: 100%; margin: 0; }
  #original .container--schmal > :not(.original-foto) { grid-column: 2; }
  #original .anmelde-karte { margin-left: 0; margin-right: 0; max-width: 520px; }
}

.original-foto { display: block; width: min(240px, 60vw); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; margin: 2rem 0 1.4rem; box-shadow: 0 24px 60px -32px rgba(65, 71, 61, 0.45); }

/* Warenkorb am Handy (15.10. abends): ganzer Korb scrollt, Liste wird nie zusammengedrückt,
   Seite dahinter bleibt stehen. Die auto-Ränder zum Zentrieren fallen weg, sobald es zu hoch wird. */
.korb { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.korb > * { flex-shrink: 0; }
.korb__liste { overflow: visible; }
html.korb-offen, html.korb-offen body { overflow: hidden; }
/* Konto-Auswahl im Korb nur nach Klick auf Checkout und nur ohne Anmeldung (15.10. abends):
   display:grid oben hat [hidden] überschrieben, die Auswahl stand immer da. */
.korb__wahl[hidden] { display: none !important; }
/* Shop-Seite (15.10. abends): „#shop“ oben ist für den Shop-Teil der Startseite gedacht und hat
   der Shop-Seite den Abstand unter der Menüleiste genommen, am Handy stieß „The shop“ oben an. */
#shop.shop-seite { padding-top: clamp(9.5rem, 14vw, 11rem); }
/* Warenkorb luftiger (Georg, 15.10. abends): Abstände zwischen den Abschnitten wachsen mit der
   Bildschirmhöhe, damit der Inhalt den freien Raum oben und unten dezent füllt. Am kleinen Handy
   bleibt es kompakt (untere Grenze), damit nicht mehr gescrollt werden muss als nötig. */
.korb__kopf { margin-bottom: clamp(1rem, 3.2vh, 2.2rem); }
.korb-item { padding: clamp(0.9rem, 1.9vh, 1.4rem) 0; }
.korb__fuss { margin-top: clamp(1.4rem, 3.6vh, 2.6rem); row-gap: clamp(1rem, 2.6vh, 1.8rem); }
.korb__fuss .korb__code { margin: 0; }
.korb__fuss .korb__kasse { margin-top: clamp(0.2rem, 1vh, 0.8rem); }
.korb__wahl { margin-top: 0; }
/* Warenkorb (Georg, 15.10. abends): mehr Luft zwischen Produktname (Schönschrift) und Preis/Anzahl */
.korb-item { row-gap: clamp(0.7rem, 1.6vh, 1.1rem); }
/* Sterne (15.10. abends): .formular input gab den versteckten Radios Innenabstand, sie lagen
   unsichtbar übereinander über dem rechten Stern. Am Handy traf ein Tipp dort immer „1“. */
.sterne { position: relative; }
.formular .sterne input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Share-Seite (Georg, 15.10. abends): das Dankeschön zeigt die Mini-Hummel, erst Alinas Strichzeichnung, dann das Foto */
.share-dank__hummel { width: 180px; aspect-ratio: 1; margin: 0 auto 0.8rem; border-radius: calc(var(--radius) * 0.8); overflow: hidden; }
.share-dank__hummel > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.share-dank__hummel .rahmen-zeichnung { inset: 25% 26% 27% 24%; }
/* Als Geschenk (15.10.2026): Häkchen, darunter Name und ein paar Worte */
.korb__geschenk[hidden], .korb__geschenk-felder[hidden] { display: none !important; }
.korb__geschenk-haken { font-size: 0.86rem !important; line-height: 1.45; cursor: pointer; }
.korb__geschenk-haken input { margin-top: 0.15rem; }
.korb__geschenk-felder { display: grid; gap: 0.7rem; margin: 0.8rem 0 0 1.8rem; }
.korb__geschenk-felder label { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--mittel); }
.korb__geschenk-felder input, .korb__geschenk-felder textarea {
  width: 100%; padding: 0.55rem 0.8rem; border: 1px solid rgba(121, 124, 97, 0.45); border-radius: 0.8rem;
  font: inherit; font-size: 0.95rem; color: var(--dunkel); background: var(--weiss); resize: vertical; }
.korb__geschenk-felder input:focus, .korb__geschenk-felder textarea:focus { outline: none; border-color: var(--salbei); }
.korb__geschenk-info { margin: 0 !important; font-size: 0.78rem; line-height: 1.45; color: var(--mittel); }
.korb__geschenk--fehlt #korb-geschenk-name { border-color: var(--rose); animation: geschenk-wackeln 0.4s ease; }
@keyframes geschenk-wackeln { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Als Geschenk (16.10.2026): Kasten mit Geschenkkarte auf der Danke-Seite, Zeile im Kundenbereich */
.danke-geschenk { margin: var(--abstand-m) auto 0; max-width: 34rem; padding: 1.6rem 1.8rem; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); text-align: center; display: grid; gap: 0.6rem; justify-items: center; }
.danke-geschenk h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.6rem; color: var(--salbei); margin: 0; }
.danke-geschenk p { margin: 0 !important; color: var(--dunkel); }
.danke-geschenk__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.4rem; }
.konto-geschenk td { font-size: 0.85rem; color: var(--mittel); padding-top: 0 !important; }
.konto-geschenk a { color: var(--salbei); }
/* Verschenken im Warenkorb, neue Fassung (html.geschenk-neu): zu eine ruhige Zeile, angehakt ein Kärtchen */
.geschenk-neu .korb__geschenk { padding: 0; background: none; border: 0; transition: padding 0.25s ease; }
.geschenk-neu .korb__geschenk-haken { align-items: flex-start; font-size: 0.86rem !important; color: var(--mittel) !important; }
.korb__geschenk-bild { flex: 0 0 auto; width: 22px; transform: rotate(-6deg); border-radius: 2px; box-shadow: 0 2px 5px rgba(65, 71, 61, 0.2); }
.korb__geschenk-zusatz { display: block; font-size: 0.78rem; color: var(--mittel); margin-top: 0.15rem; }
.geschenk-neu .korb__geschenk:not(.offen) .korb__geschenk-zusatz { display: none; }
.geschenk-neu .korb__geschenk.offen { padding: 0.9rem 1rem; background: var(--weiss); border: 1px solid rgba(121, 124, 97, 0.35); border-radius: 14px; }
.geschenk-neu .korb__geschenk.offen .korb__geschenk-haken { color: var(--dunkel) !important; font-size: 0.95rem !important; }
.geschenk-neu .korb__geschenk.offen .korb__geschenk-bild { width: 44px; }
.geschenk-neu .korb__geschenk-felder { margin-left: 0; }
.danke-video__muster { font-family: var(--font-head); font-weight: 400; color: var(--dunkel); margin-top: 0.6rem; }