/* =========================================================
   Design Tokens
   ========================================================= */
:root {
  --max: 960px;
  --muted: #666;
  --bd: #ddd;
  --border: var(--bd);
  --accent: #E86D27;
  --darkgreen: #496354;
  --lightgreen: #BED1C8;
  --lightgray: #e9e9e9;
  --card: #fff;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* =========================================================
   Base / Reset
   ========================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font: 16px/1.5 system-ui, Roboto, Segoe UI, Arial, sans-serif;
  margin: 0;
  background: var(--lightgray);
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

h1 {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4em;
}

/* Form Controls (einmal zentral) */
label { display: block; margin: .5rem 0; }
input, button { font: inherit; }
input {
  width: 100%;
  max-width: 420px;
  padding: .6rem;
  border: 1px solid var(--bd);
  border-radius: 8px;
}
button {
  margin-top: .5rem;
  padding: .55rem .9rem;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: not-allowed; }

/* Helfer */
.muted { color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; } /* honeypot */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* =========================================================
   Layout: Header / Main / Footer
   ========================================================= */
.wrap { margin: 0 auto; }

header.wrap {
  position: relative; 
  top: 0; 
  z-index: 3000; 
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  background: var(--darkgreen);
  color: var(--lightgreen);
  min-width: 100%;
  padding: 1rem;
  /* mit Main optisch einrücken */
  padding-inline: max(1rem, calc((100vw - var(--max)) / 2 + 2em));
}
.brand { display: inline-flex; align-items: center; font-weight: 700; color: inherit; }
.brand img { height: clamp(56px, 10vw, 128px); width: auto; }

main {
  flex: 1;
  width: min(100%, var(--max));
  margin-inline: auto;
  padding: 0 2em 2em;
  box-shadow: 0 20px 48px -10px #999;
}
main nav { text-align: right; padding-bottom: .6em; }

footer.wrap {
  background: transparent;
  text-align: center;
  padding: 1rem;
  padding-inline: max(1rem, calc((100vw - var(--max)) / 2 + 2em));
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
footer nav.social { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
footer nav.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px; color: var(--muted);
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
footer nav.social a:hover, footer nav.social a:focus-visible { color: var(--accent); outline: none; }
footer nav.social span { font-size: 1.6rem; line-height: 1; }

/* =========================================================
   Navigation (oben)
   ========================================================= */
nav a { display: inline-flex; align-items: center; gap: .25em; margin-left: 1rem; }
nav a .icon { text-decoration: none; }
nav a .label { text-decoration: none; }
nav a:hover .label, nav a:focus-visible .label {
  text-decoration: underline;
  text-underline-offset: .12em;
  text-decoration-thickness: from-font;
}
.nav-logout { display:inline; margin-left: 1rem; }
.nav-linklike {
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--accent);
  display: inline-flex; align-items: center; gap: .25em; font: inherit;
}
.nav-linklike:hover .label,
.nav-linklike:focus-visible .label { text-decoration: underline; text-underline-offset: .12em; }


/* Auth-Bereich im Header */
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-form { display: flex; align-items: center; gap: .75rem; }
.auth-slot .icon { font-size: 22px; vertical-align: -4px; }
.hello { display: flex; align-items: center; gap: .4rem; color: #333; }

/* =========================================================
   Karten & Grids (Produktlisten, generisch)
   ========================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
  padding: 0; margin: 0; list-style: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  contain: content;
  padding: 1em;
}
.card:is(a, article, li) { display: block; }
.card a { text-decoration: none; }

.card__media { position: relative; background: #f3f4f6; overflow: hidden; }
.card__media img { width: 200px; height: auto; object-fit: cover; display: block; transition: transform .25s ease; }

/* =========================================================
   Content + Aside (Startseite Codebox)
   ========================================================= */
.wrap .content-with-aside {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .wrap .content-with-aside { grid-template-columns: 1fr; }
}

/* Codebox */
.codebox {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
  background: #fff;
  position: sticky;
  top: 1rem;
  z-index: 1;
}
.codebox h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.codebox form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
}
.codebox input[type="text"] {
  padding: .55rem .65rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 100%;
}
.codebox .codebox-hint { color: #666; font-size: .9rem; margin-top: .25rem; }
.codebox .codebox-msg.error { color: #b00; }

/* =========================================================
   Produktdetailseite (PDP)
   ========================================================= */
.pdp__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1rem, 3vw, 2rem);
  margin: 1rem 0 2rem;
}
@media (max-width: 860px) { .pdp__grid { grid-template-columns: 1fr; } }

.pdp__image {
  display: flex; align-items: center; justify-content: center;
  width: min(100%, 720px);
  height: clamp(260px, 60vh, 540px);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}
.pdp__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px,1fr));
  gap: .5rem; margin-top: .6rem;
}
.pdp__thumb {
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.pdp__thumb.is-active { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; }

.pdp__meta .pdp__price { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.pdp__meta .price { font-weight: 800; font-size: 1.4rem; letter-spacing: .2px; font-variant-numeric: tabular-nums; }

.pdp__body { margin-top: 1rem; }
.pdp__body p { margin: .6rem 0; }

.buyform { display: grid; gap: .75rem; }
.pdp__price { display: flex; align-items: baseline; gap: .5rem; }
.price { font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums; }

.qty__wrap {
  display: inline-grid;
  grid-template-columns: 2.2rem 4.5rem 2.2rem;
  gap: .5rem; align-items: center;
}
.qty__btn {
  border: 1px solid var(--bd);
  background: #fff;
  border-radius: 8px;
  height: 2.2rem; cursor: pointer; color: black; line-height: .9;
}
.qty__wrap input { text-align: center; height: 2.2rem; width: 4.5rem; }

.cta { display: flex; gap: .5rem; }
.btn { padding: .6rem .9rem; border-radius: 8px; border: 1px solid var(--bd); background: #fff; cursor: pointer; }
.btn--primary { background: var(--darkgreen); color: #fff; border-color: var(--lightgreen); }
.btn--ghost { background: transparent; color: var(--darkgreen); }
.btn--secondary { background: transparent; color: var(--darkgreen); }

.meta { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .25rem; font-size: .92rem; }
.redeem { margin-top: .75rem; display: grid; gap: .5rem; }

/* =========================================================
   Tabs (generisch)
   ========================================================= */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.tabs a { padding: .4rem .7rem; border: 1px solid var(--bd); border-radius: .6rem; text-decoration: none; }
.tabs a.active { background: var(--lightgray); }

/* Claim-/Auth-Panels (per Klasse toggeln) */
.claim-panel { display: none; }
.claim-panel.active { display: block; }

.auth-tabs { display: flex; gap: .5rem; margin: 1rem 0; }
.auth-tabs a { padding: .4rem .8rem; border: 1px solid #ccc; border-radius: .5rem; text-decoration: none; }
.auth-tabs a.active { background: #eee; }
.auth-panels { max-width: 720px; }
.auth-panel { display: none; border: 1px solid #eee; border-radius: 12px; padding: 16px; }
.auth-panel.active { display: block; }

/* Auth Seite (zweispaltig ohne Tabs) */
.auth-wrap { max-width: 720px; margin: 2rem auto; padding: 1rem; }
.grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   Tabellen
   ========================================================= */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid #eee; padding: .6rem .5rem; text-align: left; }
.table-wrap { overflow: auto; }

/* Warenkorb */
table.cart { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
table.cart th, table.cart td { padding: .6rem; border-bottom: 1px solid var(--bd); vertical-align: middle; }
table.cart .right { text-align: right; }
.center { text-align: center; } .nowrap { white-space: nowrap; }
table.cart .item { display: grid; grid-template-columns: 72px 1fr; gap: .6rem; align-items: center; }
table.cart .thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bd); }
.qty { width: 4.5rem; text-align: center; }
.cart-actions { display: flex; gap: .5rem; justify-content: flex-end; margin: .5rem 0 1rem; }
.cart-summary { margin-left: auto; max-width: 360px; }
.cart-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; }
.cart-summary dt { color: var(--muted); }
.cart-summary .total dt, .cart-summary .total dd { font-weight: 700; font-size: 1.1rem; }

/* =========================================================
   Flash-Messages (einmal, konsolidiert)
   ========================================================= */
.flash {
  position: relative;
  padding: .6rem .9rem;
  border-radius: 8px;
  margin: .5rem 0;
  border: 1px solid var(--bd);
  background: #e6ffed; /* default success */
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  will-change: opacity, transform, max-height, margin, padding;
  transition:
    opacity .25s ease,
    transform .25s ease,
    max-height .48s ease,
    margin .48s ease,
    padding .48s ease;
}
.flash.success { background: #e6ffed; border-color: #b2f1c9; }
.flash.error   { background: #ffe6e6; border-color: #f5b3b3; }
.flash.info    { background: #e9f2ff; border-color: #b8d0ff; }

.flash__close {
  position: absolute; top: .3rem; right: .5rem;
  background: transparent; border: 0; font-size: 1.1rem; line-height: 1; cursor: pointer; color: #444;
}

/* Fortschrittsleiste */
.flash__bar {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px;
  background: var(--accent);
  transform-origin: left center;
  animation: flash-shrink var(--dur, 10s) linear forwards;
}
.flash.error .flash__bar { background: #d33; }
.flash.info  .flash__bar { background: #4a74d9; }

@keyframes flash-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.flash:hover .flash__bar { animation-play-state: paused; }
.flash.is-fading { opacity: 0; transform: translateY(-6px); }
.flash.is-collapsing { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

/* =========================================================
   Kleines Dropdown (Header)
   ========================================================= */
.has-sub { position: relative; }
.has-sub .sub {
  display: none; position: absolute; left: 0; top: 100%;
  background: #fff; border: 1px solid var(--bd); padding: .4rem;
}
.has-sub:hover .sub { display: block; }

.breadcrumbs a {
  margin-left: 0 !important;
}


/* ========== Carousel Core ========== */
/* Sichtfensterhöhe des Karussells (an der <section> per --car-h anpassbar) */
.hero-carousel { margin: 24px 0 8px; --car-h: 320px; }

.hero-carousel__header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.hero-carousel__header h2 {
  display:flex; align-items:center; gap:8px; font-size:1.25rem; margin:0;
}

/* Sichtfenster */
.carousel {
  position: relative;
  height: var(--car-h);
  overflow: hidden;
  /* Layout-Parameter */
  --gap: 12px;      /* Abstand zwischen Slides */
  --slide-w: 320px; /* wird per JS (layoutSlides) dynamisch gesetzt */
}

/* Band mit Slides */
.carousel__track {
  display: flex;
  gap: var(--gap);
  align-items: stretch;      /* Slides füllen die Höhe von .carousel */
  will-change: transform;
  transition: transform .35s ease;
  touch-action: pan-y;
  cursor: grab;
  padding: 0;
  min-width: 100%;
}
.carousel__track:active { cursor: grabbing; }

/* Einzelnes Slide: volle Höhe, feste Breite aus --slide-w */
.carousel__slide {
  flex: 0 0 var(--slide-w);
  height: 100%;
  min-width: 0;
  display: flex;  /* damit der Inhalt (Card) höhenflexibel ist */
}

/* Dots */
.carousel__dots {
  display:flex; justify-content:center; gap:8px; padding:10px 0 0;
}
.carousel__dots button {
  width:8px; height:8px; border-radius:999px; border:0; background:var(--border);
}
.carousel__dots button[aria-current="true"] { background: var(--darkgreen); }

/* =========================================================
   Produktkarte – horizontales Layout
   ========================================================= */

/* Grundkarte */
.product-card {
  height: 100%;
  display: block;               /* wird von .product-card--h überschrieben */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
}

/* Horizontaler Modus: Bild links, Info rechts */
.product-card--h {
  display: grid;
  grid-template-columns: 1.2fr 1fr;   /* Bild : Text */
  gap: 12px;
  height: 100%;
  padding: 10px;                      /* etwas Innenabstand für ruhige Optik */
}

/* Media füllt die gesamte Höhe des Slides */
.product-card--h .product-card__media {
  /*height: 100%;*/
  /*width: 100%;*/
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.product-card--h .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* Bild flächig; alternativ .--contain s.u. */
  display: block;
}

/* Body rechts: spaltet in Titel/Teaser und Meta/CTA (unten) */
.product-card--h .product-card__body {
  min-width: 0;                       /* Text darf umbrechen, aber nicht sprengen */
  display: grid;
  grid-template-rows: 1fr auto;       /* Inhalt oben wächst, Meta unten fix */
  gap: 10px;
}

/* Titel/Teaser */
.product-card__title {
  margin: 16px 0 6px;
  font-size: 1.05rem;
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__desc {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta unten: Preis links, CTA rechts */
.product-card__meta {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size: .95rem; color: var(--muted);
}
.product-card .price { font-weight: 700; color: var(--text); font-size: 1.05rem; }

/* Button (du hast .btn bereits global; hier nur minimale Ergänzung) */
.product-card__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem; border: 1px solid var(--bd); border-radius: 8px; background: #fff; cursor: pointer;
}
.product-card__cta--primary {
  background: var(--darkgreen);
  border-color: var(--lightgreen);
  color: #fff;
}

/* „Bild nicht beschneiden“-Variante */
.hero-carousel.--contain .product-card--h .product-card__media img {
  object-fit: contain; background: #f3f4f6;
}

/* == Single-Slide (exakt 1 Karte je Seite) – optional aktivieren ==
   Falls du harte Ein-Karte-Ansicht willst, gib am Wrapper class="carousel --single" */
.carousel.--single .carousel__track { gap: 0; padding-inline: 12px; }
.carousel.--single { --slide-w: calc(100% - 24px) !important; } /* 12px links + rechts */
.carousel.--single .carousel__slide { flex: 0 0 var(--slide-w); }

/* Mobile: unten Bild, oben Text (besserer Flow bei wenig Breite) */
/*
@media (max-width: 700px) {
  .product-card--h { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .product-card--h .product-card__media { height: min(52vw, var(--car-h)); } /* angenehm groß * /
  .product-card__title { font-size: 1rem; }
}
*/
/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none !important; }
}

/* === Mobile: Auto-Höhe & Stapel-Layout (fix für abgeschnittenen unteren Teil) === */
@media (max-width: 700px) {
  /* 1) Kein festes Sichtfenster auf Mobile */
  .carousel { height: auto; }

  /* 2) Slides wachsen mit ihrem Inhalt */
  .carousel__slide { height: auto; }

  /* 3) Horizontale Karte wird auf Mobile gestapelt: Bild oben, Text unten */
  .product-card--h {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;   /* Bild in natürlicher Höhe, Text darunter */
    gap: 10px;
    padding: 10px;
  }

  /* 4) Bildbereich: keine fixe Höhe ableiten – wir geben ein sanftes Seitenverhältnis,
        damit das Bild nicht winzig wird, die Karte aber beliebig hoch werden kann */
  .product-card--h .product-card__media {
    height: auto;           /* wichtig: nicht auf var(--car-h) / 100% pinnen */
    aspect-ratio: 4 / 3;    /* angenehme Bildhöhe; wenn du echte Intrinsic-Höhe willst -> Zeile entfernen */
    overflow: hidden;
  }
  .product-card--h .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* alternativ: contain, wenn nichts beschnitten werden soll */
    display: block;
  }

  /* 5) Body unten darf beliebig wachsen (mehrzeilige Titel/Teaser) */
  .product-card--h .product-card__body {
    grid-template-rows: auto auto;   /* alles in natürlicher Höhe */
    gap: 8px;
    min-width: 0;
  }

  /* 6) Typo minimal anpassen */
  .product-card__title { font-size: 1rem; -webkit-line-clamp: 3; } /* max. 3 Zeilen */
  .product-card__desc  { font-size: .95rem; -webkit-line-clamp: 3; }
  .product-card__meta  { font-size: .95rem; }

  /* 7) Abstände/Dots leicht größer fürs Tippen */
  .carousel__dots button { width: 10px; height: 10px; }
}


/* ==================== NAV ==================== */
.site-nav {
  position: relative;
  margin-top: .5rem;
  z-index: 2500;
}

/* Toggle (nur mobil sichtbar) */
.nav-toggle {
  display: none;
  position: absolute;
  z-index: 3500;
  right: 1.2em;
  top: 0.8em;
  width: 48px; height: 48px;
  border: 1px solid transparent;
  background: transparent; 
  color: #000 !important;
  border-radius: 8px; cursor: pointer;
  align-items: center; justify-content: center;
  gap: 4px; padding: 0 6px;
}
.nav-toggle span {
  font-size: 3em;
}
.nav-toggle__bar {
  display: block; width: 100%; height: 2px; background: currentColor;
}

/* Grid: 3 Spalten; Mitte wirklich zentriert */
.nav-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
}
.nav-left  { justify-self: start; display: inline-flex; gap: 1rem; align-items: center; }
.nav-center{ justify-self: center; display: inline-flex; gap: 1rem; align-items: center; }
.nav-right { justify-self: end;   display: inline-flex; gap: 1rem; align-items: center; }

/* Links schön anklickbar */
.site-nav a { display: inline-flex; align-items: center; gap: .25em; padding: .25rem .2rem; }

/* ===== Mobile Off-Canvas (Slide-in von rechts) ===== */
@media (max-width: 760px) {
  /* Toggle zeigen, Grid verstecken bleibt wie gehabt */
  .nav-grid { display: none; }
  .nav-toggle { display: inline-flex; }

  .mobile-menu[hidden] { display: none !important; }

  /* Gesamter Container inkl. Backdrop */
  .mobile-menu {
    position: fixed;
    inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
    z-index: 5000;
  }

  /* Backdrop klickbar */
  .mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.36);
    border-radius: 0;
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }

  /* Panel rechts */
  .mobile-menu__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(85vw, 360px);
    background: #fff;
    border-left: 1px solid var(--bd);
    box-shadow: -8px 0 24px rgba(0,0,0,.12);
    transform: translateX(100%);
    overflow: auto;
    display: block;
    z-index: 1;
  }
  .mobile-menu__panel ul { list-style: none; margin: 0; padding: .5rem; }
  .mobile-menu__panel li { border-bottom: 1px solid #eee; }
  .mobile-menu__panel li:last-child { border-bottom: 0; }
  .mobile-menu__panel a {
    display: inline-flex; padding: .9rem 1rem; color: #000 !important; text-decoration: none;
  }
  .mobile-menu__panel .label { margin-left: 0.5em; }
  .mobile-menu__panel a:active { background: #f7f7f7; }

  /* Animationen */
  @media (prefers-reduced-motion: no-preference) {
    .mobile-menu__panel,
    .mobile-menu__backdrop { transition: transform .22s ease, opacity .22s ease; }
  }
  /* Zustände */
  .mobile-menu[data-anim="out"] .mobile-menu__panel { transform: translateX(100%); }
  .mobile-menu[data-anim="out"] .mobile-menu__backdrop { opacity: 0; pointer-events: none; }

  .mobile-menu[data-anim="in"]  .mobile-menu__panel { transform: translateX(0%); }
  .mobile-menu[data-anim="in"]  .mobile-menu__backdrop { opacity: 1; pointer-events: auto; }
}

/* Body-Scroll sperren, wenn Menü offen */
.body--lock { overflow: hidden; }

/* ===== Cart: Responsive Cards statt Tabelle (Mobile) ===== */
@media (max-width: 700px) {
  table.cart { border-collapse: separate; border-spacing: 0; }
  table.cart thead { display: none; }

  table.cart tbody tr {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--bd);
    border-radius: 12px;
    background: #fff;
  }

  /* Zellen: Standard-Reset */
  table.cart td {
    border: 0;
    padding: 0;
    background: transparent;
  }

  /* 1) Artikelzelle bleibt zweispaltig (Thumb + Titel) und spannt über die ganze Card */
  table.cart td.item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: center;
  }
  table.cart .thumb img {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--bd);
    display: block;
  }
  table.cart .title a { color: inherit; text-decoration: none; font-weight: 600; }

  /* 2) Preiszeile – mit Label links, Wert rechts */
  table.cart td:nth-child(2) {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 2px;
  }
  table.cart td:nth-child(2)::before {
    content: "Preis";
    color: var(--muted);
  }
  table.cart td:nth-child(2) .nowrap { font-variant-numeric: tabular-nums; font-weight: 600; }

  /* 3) Menge – Label + Input rechts */
  table.cart td:nth-child(3) {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: center;
  }
  table.cart td:nth-child(3)::before {
    content: "Menge";
    color: var(--muted);
  }
  table.cart .qty { width: 4.5rem; text-align: center; }

  /* 4) Summe – Label + Wert rechts, etwas größer */
  table.cart td:nth-child(4) {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: center;
  }
  table.cart td:nth-child(4)::before {
    content: "Summe";
    color: var(--muted);
  }
  table.cart td:nth-child(4) .nowrap {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.05rem;
  }

  /* 5) Entfernen-Button – volle Breite, rechts ausgerichtet */
  table.cart td:nth-child(5) {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; align-items: center;
    margin-top: 4px;
  }
  table.cart td:nth-child(5) .btn { padding: .45rem .7rem; border-radius: 8px; }

  /* Summary unter dem Table hübsch einrücken */
  .cart-summary { width: 100%; max-width: none; margin: 8px 0 0; }
  .cart-summary dl { gap: 6px 10px; }
}

/* ===== Checkout Layout ===== */
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

/* Karte-Optik und Innenabstände angleichen */
.checkout-form,
.checkout-summary {
  padding: 16px;
}

/* Auf Desktop: Summary leicht „sticky“, auf Mobile normal fließend */
.checkout-summary { position: sticky; top: 1rem; }
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; top: auto; }
}

/* ===== Formularfelder ===== */
.checkout-form .fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Zweier-Reihen (PLZ/Ort) hübsch nebeneinander, mobil stapeln */
.checkout-form .fields .row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .checkout-form .fields .row {
    grid-template-columns: 1fr; /* übereinander auf schmalen Screens */
  }
}

/* Inputs 100% Breite (du hast das global schon, hier nur Sicherheit) */
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form input[type="number"] {
  width: 100%;
}

/* Checkbox-Zeilen gut klickbar */
.checkout-form label[style*="display:flex"] {
  padding: 8px 0;
}
.checkout-form input[type="checkbox"] {
  width: 1.2em; height: 1.2em;
}

/* Trennlinie dezenter */
.checkout-form hr {
  border: 0;
  border-top: 1px solid var(--bd);
  margin: 10px 0;
}

/* ===== Zusammenfassungsliste ===== */
.checkout-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.checkout-summary li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.checkout-summary h2,
.checkout-summary h3 { margin: .25rem 0 .5rem; }

/* Beträge schöner lesen */
.checkout-summary p,
.checkout-summary li span:last-child {
  font-variant-numeric: tabular-nums;
}
.checkout-summary p:last-of-type b { font-size: 1.1em; }

/* Auf sehr schmalen Geräten: Innenabstand etwas erhöhen */
@media (max-width: 400px) {
  .checkout-form,
  .checkout-summary { padding: 14px; }
}

/* ===== PayPal-Container auf Mobile: volle Breite ===== */
#pp-buttons { width: 100%; }
#pp-buttons > div { width: 100% !important; } /* PayPal erzwingt sonst fixe Breiten */

/* Form-Fehlerzustände */
.is-invalid { border-color: #d33 !important; outline-color: #d33; }
.field-error {
  color: #b00; font-size: .9rem; margin-top: .25rem;
}
label.has-error input { border-color: #d33; }

.slogen {
  font-family: pacifico;
  font-size: 1.6em;
}