/* ==========================================================================
   Wreesmann – Startseite
   Design-Tokens aus Figma (Wreesmann Design System)
   ========================================================================== */

/* Open Sans wird selbst ausgeliefert statt vom Google-CDN geladen
   Lizenz: SIL OFL 1.1, siehe ../fonts/OFL.txt */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Farben */
  --color-primary: #009846;
  --color-primary-hover: #00893f;
  --color-primary-active: #007a38;
  --color-primary-subtle: #e6f5ed;
  --color-primary-subtle-hover: #d2eadd;
  --color-primary-border-subtle: #99d6b5;
  --color-white: #ffffff;
  --color-text: #2b2e33;
  --color-text-subtle: #6b7280;
  --color-border: #a6aab3;
  --color-border-subtle: #c4c7cc;
  --color-surface-variant: #f0f1f2;
  --color-success: #1e9e63;
  --color-success-subtle: #d2ece0;
  --color-error: #c23b2c;
  --color-error-subtle: #f3d8d5;
  --color-warning: #ff6b00;
  --color-warning-subtle: #ffe1cc;
  --color-gold: #d4af37;

  /* Abstände (scale/…) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius: 8px;
  --radius-full: 1000px;

  --font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --page-max-width: 1440px;
  --page-padding: 12px;
  --section-padding-y: 24px;
}

@media (min-width: 1024px) {
  :root {
    --page-padding: 32px;
    --section-padding-y: 32px;
  }
}

/* --------------------------------------------------------------------------
   Reset / Basis
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  background: var(--color-white);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sichtbarkeits-Helfer: nur ausblenden, nie ein display setzen,
   damit die Komponenten-Displays (inline-flex, block …) erhalten bleiben */
@media (max-width: 1023.98px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Typografie (Wreesmann/…)
   -------------------------------------------------------------------------- */

.headline-lg {
  font-size: 40px;
  line-height: 56px;
  font-weight: 700;
}

.headline-md {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}

.title-md {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.label-lg {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.label-md {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
}

.body-md {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

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

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* --------------------------------------------------------------------------
   Basis-Komponenten
   -------------------------------------------------------------------------- */

/* Icon-Button (40×40, Icon 20×20) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.icon-btn img {
  width: 20px;
  height: 20px;
}

.icon-btn:hover {
  background: rgba(43, 46, 51, 0.06);
}

/* Button (Outline) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.btn img {
  width: 20px;
  height: 20px;
}

.btn:hover {
  background: var(--color-primary-subtle);
}

.btn--text-only {
  padding-right: var(--space-4);
}

/* Suchfeld */
.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.search-field img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  font: inherit;
  color: var(--color-text);
  background: transparent;
}

.search-field input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.search-field input::-webkit-search-decoration,
.search-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-field:focus-within {
  border-color: var(--color-primary);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

.badge--angebot {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.badge--neu {
  background: var(--color-error-subtle);
  color: var(--color-error);
}

.badge--limited {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  border-radius: 10px;
  white-space: normal;
  text-align: left;
}

/* Sternebewertung */
.rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
  background: url("../icons/star-filled.svg") no-repeat center / 16px 16px;
}

.star--empty {
  background-image: url("../icons/star-empty.svg");
}

.star--half {
  background-image: url("../icons/star-empty.svg");
}

.star--half::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 16px;
  background: url("../icons/star-filled.svg") no-repeat left top / 16px 16px;
}

.rating__count {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

.rating__count a {
  text-decoration: underline;
}

/* Verfügbarkeit */
/* Availability in the chosen market (Figma "Availability_Indicator"): icon, label and the market as underlined link */
.availability {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) 0;
}

.availability__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--color-text);
  min-width: 0;
}

.availability__item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.availability__link {
  text-decoration: underline;
}

/* The whole indicator is a link (no market chosen): the text wraps beside the icon, not below it */
.availability__item.availability__link {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.availability__item.availability__link img {
  margin-top: 2px;
}

/* Colours of the "Lieferbar" line, which is hidden for now (see AvailabilityList.razor) */
.availability__item--error {
  color: var(--color-error);
}

.availability__item--warning {
  color: var(--color-warning);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--color-white);
}

/* App-Banner (nur Mobile) */
.app-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(13.27deg, #e1e3e6 0%, #ffffff 100%);
}

.app-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.app-banner__text {
  flex: 1;
  min-width: 0;
}

.app-banner__title {
  color: var(--color-primary);
}

/* Header-Leiste */
.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.logo {
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0;
  white-space: nowrap;
}

/*
 * The logo (391 x 44) replaces the text "WREESMANN" and takes its place: it has the proportions of that
 * text (Open Sans 800), so a height of 0.759 em makes it as wide and as high in its capitals as the text was
 * at the same font size. The sizes of the places stay what they were (22 px, 18 px on a phone, 16 px in the footer).
 */
.logo img {
  display: block;
  height: 0.759em;
  width: auto;
}

.header-bar .logo {
  order: 1;
  flex: 1;
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: normal;
}

.header-actions {
  order: 2;
  display: flex;
  align-items: center;
}

.header-bar .market-selector {
  order: 3;
  flex-basis: 100%;
  justify-content: flex-start;
}

.header-bar .search-field {
  order: 4;
  flex-basis: 100%;
  margin: var(--space-3) 0;
}

/* Markt-Auswahl: Icon + Name, ohne Rahmen und Hintergrund (Figma "Market_Selector") */
.market-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
}

.market-selector:hover {
  background: var(--color-primary-subtle-hover);
}

.market-selector img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.market-selector__value {
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Long names must not stretch the header; the full value is in the aria-label. */
  max-width: 22ch;
}

/* Kategorie-Navigation (nur Desktop) */
.category-nav {
  display: none;
}

/* Trust Bar (nur Desktop) */
.trust-bar {
  display: none;
}

@media (min-width: 1024px) {
  .app-banner {
    display: none;
  }

  .header-bar {
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .header-bar .logo {
    order: 0;
    flex: 0 0 auto;
    height: auto;
    font-size: 22px;
    margin-right: var(--space-4); /* 8px gap + 16px = 24px zum Suchfeld */
  }

  .header-bar .search-field {
    order: 0;
    flex: 1 1 auto;
    margin: 0;
  }

  .header-bar .market-selector {
    order: 0;
    flex-basis: auto;
    justify-content: center;
  }

  .header-actions {
    order: 0;
  }

  .category-nav {
    display: flex;
    gap: var(--space-2);
    padding: 0 var(--page-padding);
    background: var(--color-surface-variant);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar {
    display: none;
  }

  .category-nav__inner {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
  }

  .category-nav__item {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 14px var(--space-4);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--color-text);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }

  .category-nav__item:hover {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
  }

  .trust-bar {
    display: block;
    padding: var(--space-3) var(--page-padding);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  /* Inhalt so breit wie die Kategorien darüber (category-nav__inner), Linie volle Breite */
  .trust-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
  }

  .trust-bar__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
    white-space: nowrap;
  }

  .trust-bar__item img {
    width: 20px;
    height: 20px;
  }

  .trust-bar__divider {
    width: 1px;
    height: 20px;
    background: var(--color-border-subtle);
    flex-shrink: 0;
  }
}

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

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hero__slide {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--color-primary-hover);
}

/*
 * The banner is one picture (green shape and photo together, 1440 x 500). On a phone it keeps the
 * height of the slide and sticks to the right edge, so only its right part shows (as in the design).
 */
.hero__image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 1440 / 500;
}

/* The <picture> wrapper must not take part in the layout: .hero__image is positioned against the slide */
.hero__slide picture {
  display: contents;
}

.hero__content {
  display: none;
}

/* Caption below the picture (phone only) */
.hero__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--page-padding);
  color: var(--color-primary-hover);
  text-align: center;
}

.hero__caption-title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.hero__caption-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  text-decoration: underline;
}

.hero__caption-link img {
  width: 14px;
  height: 14px;
}

@media (min-width: 1024px) {
  .hero {
    gap: var(--space-4);
  }

  .hero__slide {
    height: auto;
    aspect-ratio: 1440 / 500;
    background: var(--color-white);
  }

  .hero__image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__caption {
    display: none;
  }

  /* Text block from the design (frame 1440 x 500): 80 px from the left, vertically centred */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    position: absolute;
    left: 5.56%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-white);
  }

  /* Scales between 1024 and 1440 px in proportion to the hero (40 px at 1440) */
  .hero__title {
    margin: 0;
    font-size: clamp(28px, 2.78vw, 40px);
    line-height: 1.4;
    font-weight: 700;
  }

  .hero__title span {
    display: block;
    white-space: nowrap;
  }

  .hero__link {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 24px;
    font-weight: 700;
    text-decoration: underline;
  }

  .hero__link img {
    width: 24px;
    height: 24px;
  }
}

/* --------------------------------------------------------------------------
   Sektionen
   -------------------------------------------------------------------------- */

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section--subtle {
  background-color: var(--color-primary-subtle);
  background-image: url("../img/pattern.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: -426px 0;
}

.section--subtle-alt {
  background-position: -1169px 0;
}

/* Wochenangebote folgen direkt auf den Hero */
.section--offers {
  padding-top: var(--space-4);
}

@media (min-width: 1024px) {
  .section--offers {
    padding-top: var(--section-padding-y);
  }
}

/* Willkommen */
.welcome {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-3);
  color: var(--color-primary);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-4);
}

.welcome__brand {
  font-weight: 800;
}

.welcome span {
  display: block;
  width: 100%;
}

/* Sektions-Raster: Titel / CTAs / Inhalt
   Mobile: untereinander, zentriert. Desktop: Titel links, CTAs rechts. */
.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "secondary"
    "content"
    "all";
  row-gap: var(--space-4);
  justify-items: center;
}

.section-grid > .section-title {
  grid-area: title;
}

.section-grid > .section-cta--secondary {
  grid-area: secondary;
}

.section-grid > .section-cta--all {
  grid-area: all;
}

.section-grid > .section-content {
  grid-area: content;
  width: 100%;
  justify-self: stretch;
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
}

.section-subtitle {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .welcome {
    justify-content: flex-start;
    font-size: 40px;
    line-height: 56px;
    text-align: left;
    margin-bottom: var(--space-10);
  }

  .welcome span {
    display: inline;
    width: auto;
  }

  .section-grid {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "title secondary all"
      "content content content";
    column-gap: var(--space-2);
    row-gap: var(--space-6);
    align-items: end;
    justify-items: start;
  }

  .section-grid--no-secondary {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title all"
      "content content";
  }

  .section-grid > .section-cta--all {
    justify-self: end;
    margin-left: var(--space-4); /* 8px gap + 16px = 24px zum Sekundär-Button */
  }

  .section-title {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
    font-size: 32px;
    line-height: 40px;
    text-align: left;
  }

  .section-subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .section--subtle {
    background-position: 238px 0;
  }
}

/* --------------------------------------------------------------------------
   Produktkarte
   -------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-card:hover {
  border-color: var(--color-border);
}

/* Stretched Link: der Produktname-Link deckt die ganze Karte ab,
   eigenständige Bedienelemente liegen per z-index darüber */
.product-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__wishlist,
.product-card .rating__count a,
.product-card .availability__link {
  position: relative;
  z-index: 2;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-surface-variant);
  overflow: hidden;
}

/* absolut, damit die intrinsische Bildhöhe die aspect-ratio-Box nicht aufbläht */
.product-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__media .badge {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
}

.product-card__wishlist {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  white-space: nowrap;
}

.product-card__price .price {
  color: var(--color-error);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.product-card__price .unit {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

.product-card__name {
  padding-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.product-card__name a:hover {
  text-decoration: underline;
}

.product-card__desc {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .availability {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Teaser (Bild + 2 Produktkarten)
   -------------------------------------------------------------------------- */

.teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.teaser__image {
  position: relative;
  aspect-ratio: 366 / 240;
  border-radius: var(--radius);
  overflow: hidden;
}

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

.teaser__image .btn {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
}

.teaser__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .teaser {
    grid-template-columns: 678fr 680fr;
    gap: var(--space-4);
  }

  .teaser__image {
    aspect-ratio: 678 / 445;
  }

  .teaser__image .btn {
    left: var(--space-6);
    bottom: var(--space-6);
  }

  .teaser__cards {
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Sortimente
   -------------------------------------------------------------------------- */

.section-heading {
  color: var(--color-primary);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-6);
}

.sortiment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sortiment-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  aspect-ratio: 177 / 200;
  padding: var(--space-6);
  background: var(--color-primary-subtle);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.sortiment-tile:hover {
  background: #cceada;
}

.sortiment-tile img {
  flex: 1;
  min-height: 0;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .section-heading {
    font-size: 32px;
    line-height: 40px;
    text-align: left;
  }

  .sortiment-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .sortiment-tile {
    aspect-ratio: 216 / 240;
  }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.services-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding: 0 var(--space-4);
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
}

.service-item__circle {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-full);
}

.service-item:hover .service-item__circle {
  background: #cceada;
}

/* Icon absolut mit 21 % Innenabstand (Figma: 32px in 151px-Kreis) */
.service-item__circle img {
  position: absolute;
  inset: 21%;
  width: 58%;
  height: 58%;
  object-fit: contain;
}

/* Figma: Label fest 150px breit, darf über eine schmalere Spalte hinausragen */
.service-item__label {
  display: block;
  width: 150px;
  max-width: calc(100% + 24px);
}

@media (min-width: 1024px) {
  .services-section {
    margin-top: var(--space-10);
    padding-top: 0;
  }

  .services-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: 0;
  }
}

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

.site-footer {
  background: var(--color-surface-variant);
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-primary);
}

.footer-brand .logo {
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
}

.footer-brand__claim {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__title {
  color: var(--color-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.footer-links a:hover,
.footer-legal a:hover {
  text-decoration: underline;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.social-icons a {
  display: block;
  width: 40px;
  height: 40px;
}

.social-icons a > img {
  width: 100%;
  height: 100%;
}

.social-icons__instagram {
  position: relative;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: linear-gradient(
    45deg,
    #f09433 14.61%,
    #e6683c 32.3%,
    #dc2743 50%,
    #cc2366 67.69%,
    #bc1888 85.39%
  );
}

.social-icons .social-icons__instagram > img {
  position: absolute;
  left: 19.03%;
  top: 20.34%;
  width: 62.52%;
  height: 59.86%;
}

.app-badges {
  display: flex;
  gap: var(--space-2);
}

.app-badges img {
  height: 40px;
  width: auto;
}

/* Figma-Box 107×32 (Desktop) / 134×40 (Mobile) mit Cover-Zuschnitt */
.app-badges .app-badge--google {
  width: 134px;
  object-fit: cover;
}

.footer-divider {
  height: 1px;
  background: var(--color-primary-border-subtle);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: var(--space-10);
  }

  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer-nav {
    flex-direction: row;
    gap: var(--space-10);
  }

  .social-icons a {
    width: 32px;
    height: 32px;
  }

  .app-badges {
    flex-direction: column;
  }

  .app-badges img {
    height: 32px;
  }

  .app-badges .app-badge--google {
    width: 107px;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-legal {
    flex-direction: row;
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Produktdetailseite
   -------------------------------------------------------------------------- */

.pdp {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4) 0 var(--space-6);
}

/* Inhaltsspalte: 1160px zentriert (Desktop), volle Breite mit Seitenrand (Mobile) */
.pdp__inner {
  width: 100%;
  max-width: calc(1160px + 2 * var(--page-padding));
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.pdp-heading {
  color: var(--color-primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.pdp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pdp-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Breadcrumb – auf Mobile rechtsbündig, damit bei Überlänge die aktuelle Seite sichtbar bleibt */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  overflow: hidden;
  white-space: nowrap;
}

.breadcrumb a,
.breadcrumb [aria-current] {
  padding: 2px;
  border-radius: 2px;
  color: var(--color-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
}

.breadcrumb a {
  text-decoration: underline;
}

.breadcrumb__sep {
  color: var(--color-text-subtle);
  font-size: 14px;
}

/* Produkt: Medien + Preiskarte */
.pdp-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pdp-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pdp-media__main {
  position: relative;
  display: block;
  height: 320px;
  margin: 0 calc(-1 * var(--page-padding));
  padding: 0;
  border: 0;
  background: var(--color-surface-variant);
  cursor: zoom-in;
}

.pdp-media__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pdp-thumb {
  position: relative;
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--color-surface-variant);
  cursor: pointer;
}

/* Quadratisch gefuellt wie in Figma, auch wenn das Foto quer- oder hochkant ist */
.pdp-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-thumb[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--color-primary);
}

/* Lightbox: das Bild in der Zoomgroesse auf abgedunkeltem Hintergrund */
.pdp-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  /* Oben und unten Platz fuer Schliessen und Zaehler, seitlich fuer die Pfeile */
  padding: 72px var(--space-4);
  border: 0;
  background: transparent;
}

@media (min-width: 1024px) {
  .pdp-lightbox {
    padding: 72px 88px;
  }
}

.pdp-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-lightbox::backdrop {
  background: rgb(0 0 0 / 0.85);
}

.pdp-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--color-white);
}

.pdp-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  cursor: pointer;
}

.pdp-lightbox__btn:hover {
  background: var(--color-primary-subtle);
}

.pdp-lightbox__btn img {
  width: 20px;
  height: 20px;
}

.pdp-lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
}

.pdp-lightbox__prev,
.pdp-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.pdp-lightbox__prev {
  left: var(--space-4);
}

.pdp-lightbox__prev img {
  transform: scaleX(-1);
}

.pdp-lightbox__next {
  right: var(--space-4);
}

.pdp-lightbox__counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-size: 14px;
  line-height: 20px;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
}

.price-card__title {
  padding-right: 48px; /* Platz für die Icon-Buttons oben rechts */
  color: var(--color-primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.price-card__actions {
  position: absolute;
  top: 11px;
  right: 11px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.price-card__uvp {
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

.price-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.price-card__price {
  color: var(--color-error);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.price-card__tax {
  color: var(--color-text-subtle);
}

.price-card__buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.price-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.price-card .availability {
  padding: 0;
}

.points {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  color: var(--color-primary);
  font-size: 12px;
  line-height: 16px;
}

.points img {
  width: 20px;
  height: 20px;
}

.points strong {
  font-weight: 600;
  letter-spacing: 0.15px;
}

/* Mengen-Stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 44px;
  padding: 0 1px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
}

.stepper__value {
  min-width: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

/* Button-Varianten */
.btn--primary {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--block {
  width: 100%;
}

.icon-btn--outlined {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
}

.icon-btn--outlined:hover {
  background: var(--color-primary-subtle);
}

/* Infos zum Produkt */
.pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-info__list li::before {
  content: "•\00a0\00a0";
}

.pdp-info__subtle {
  color: var(--color-text-subtle);
}

/* Produkt-Karussell (Ähnliche Produkte) */
.carousel {
  display: flex;
  gap: var(--space-3);
  margin-right: calc(-1 * var(--page-padding));
  padding-right: var(--page-padding);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel > .product-card {
  flex: 0 0 332px;
  scroll-snap-align: start;
}

/* Kundenbewertungen */
.reviews {
  gap: var(--space-4);
}

.reviews-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rating-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
}

.rating-bar__label {
  width: 10px;
}

.rating-bar__count {
  width: 24px;
  text-align: right;
}

.rating-bar__track {
  display: block;
  flex: 1;
  height: 8px;
  background: var(--color-surface-variant);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.rating-bar__fill {
  display: block;
  height: 100%;
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

.rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.rating-summary__score {
  color: var(--color-primary);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}

.rating-summary__hint {
  color: var(--color-text-subtle);
}

.rate-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-primary-subtle);
  border-radius: var(--radius);
}

.rate-box__title {
  color: var(--color-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
}

.rate-box__stars {
  display: flex;
}

.review-filter {
  display: flex;
  gap: var(--space-2);
}

.review-filter .search-field {
  flex: 1;
  min-width: 0;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.review-list__divider {
  height: 1px;
  background: var(--color-border);
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
}

.review__title {
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.review__recommend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review__recommend img {
  width: 16px;
  height: 16px;
}

.review__helpful {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--color-text-subtle);
}

.review__helpful a {
  padding: 2px;
  color: var(--color-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .pdp {
    gap: var(--space-10);
    padding: var(--space-4) 0 var(--space-10);
  }

  .pdp-heading {
    font-size: 32px;
    line-height: 40px;
  }

  .pdp-section {
    gap: var(--space-6);
  }

  .breadcrumb {
    justify-content: flex-start;
  }

  .pdp-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
    align-items: start;
  }

  .pdp-media {
    gap: var(--space-3);
  }

  .pdp-media__main {
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .pdp-thumbs {
    gap: var(--space-3);
  }

  .pdp-thumb {
    width: 80px;
    height: 80px;
  }

  .price-card {
    padding: var(--space-3);
  }

  .price-card__title,
  .price-card__price {
    font-size: 32px;
    line-height: 40px;
  }

  .price-card__buy {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .price-card__buy .btn {
    flex: 1;
  }

  .price-card__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .carousel {
    gap: var(--space-4);
    margin-right: 0;
    padding-right: 0;
  }

  .reviews {
    gap: var(--space-6);
  }

  .reviews-overview {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-10);
  }

  /* 460 / 240 / Rest bei 1160px; Balken und Bewerten-Box schrumpfen bei weniger Platz */
  .rating-bars {
    flex: 1 1 460px;
    max-width: 460px;
    min-width: 0;
  }

  .rating-summary {
    width: 240px;
    flex-shrink: 0;
  }

  .rate-box {
    flex: 1 1 280px;
    min-width: 0;
  }

  .review-filter {
    gap: var(--space-3);
  }

  .review-list {
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   App-Seite
   -------------------------------------------------------------------------- */

.app-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-4) 0 var(--space-8);
}

/* Inhaltsspalte: 1200px zentriert (Desktop, 120px Rand bei 1440) */
.app-page__inner {
  width: 100%;
  max-width: calc(1200px + 2 * var(--page-padding));
  margin: 0 auto;
  padding: 0 var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.breadcrumb--start {
  justify-content: flex-start;
}

.app-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-title {
  color: var(--color-primary);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}

.app-hero {
  position: relative;
  aspect-ratio: 366 / 244;
  overflow: hidden;
}

.app-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

/* Fließtext body/large, Absätze durch 24px getrennt */
.app-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: 16px;
  line-height: 24px;
}

/* Listen in Fließtexten (Rechtstexte): der Reset entfernt die Aufzählungszeichen */
.app-text ul {
  list-style: disc;
  padding-left: var(--space-6);
}

.app-text h2,
.app-text h3 {
  font-weight: 700;
}

/* Galerie: Screenshot-Kacheln */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* Telefon-Screenshot ragt unten aus der 300:200-Kachel heraus (Figma-Geometrie) */
.gallery__media {
  position: relative;
  aspect-ratio: 300 / 200;
  background: var(--color-surface-variant);
  overflow: hidden;
}

.gallery__media img {
  position: absolute;
  left: 29.84%;
  top: 8.56%;
  width: 37.61%;
  height: 120.31%;
  object-fit: contain;
  object-position: top;
}

/* Download-CTA */
.app-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-cta .app-badges img {
  height: 48px;
}

.app-cta .app-badges {
  gap: var(--space-4);
}

.app-cta .app-badges .app-badge--google {
  width: 161px;
}

/* App-Vorteile: Service-Raster mit 8px Innenabstand statt 16px */
.app-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
}

.services-grid--app {
  padding: 0 var(--space-2);
}

@media (min-width: 1024px) {
  .app-page {
    padding-bottom: var(--space-10);
  }

  .app-page__inner {
    padding: 0 var(--page-padding);
  }

  .app-intro {
    gap: var(--space-6);
  }

  .app-title {
    font-size: 40px;
    line-height: 56px;
  }

  .app-hero {
    aspect-ratio: 1200 / 500;
  }

  .app-hero img {
    object-position: 50% 50%;
  }

  .gallery {
    flex-direction: row;
  }

  .gallery__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .app-cta,
  .app-features {
    gap: var(--space-6);
  }

  .app-cta .app-badges {
    flex-direction: row;
  }

  .app-features {
    padding-bottom: 0;
  }

  .services-grid--app {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Prospektseite (/prospekt)
   -------------------------------------------------------------------------- */

.leaflet {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.leaflet__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.leaflet__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.leaflet__validity {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

/* Auf Mobile bricht die Seitenzahl in eine eigene Zeile, sonst wird die Angabe zu lang. */
.leaflet__pages {
  display: block;
}

.leaflet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Feste Hoehe statt Seitenverhaeltnis: Das Prospekt ist sehr hochformatig (170 x 300 mm), eine
   massstabsgetreue Box waere auf dem Desktop ueber 1400px hoch. Der PDF-Betrachter des Browsers
   passt den Inhalt selbst ein. */
.leaflet__viewer {
  height: clamp(420px, 78vh, 900px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-variant);
}

.leaflet__viewer object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Rueckfallebene, wenn der Browser kein PDF einbetten kann - vor allem auf Mobilgeraeten. */
.leaflet__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-6);
  text-align: center;
}

.leaflet__empty {
  color: var(--color-text-subtle);
}

@media (min-width: 1024px) {
  .leaflet__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
  }

  /* In einer Zeile trennt ein Mittelpunkt die Seitenzahl vom Zeitraum. */
  .leaflet__pages {
    display: inline;
  }

  .leaflet__pages::before {
    content: "\00B7\00A0";
  }

  .leaflet__actions {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   Marktsuche (/maerkte)
   -------------------------------------------------------------------------- */

.market-page {
  padding-bottom: var(--space-10);
}

.market-page__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.market-page__title {
  margin-top: var(--space-2);
  color: var(--color-primary-hover);
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}

.market-page__lead {
  margin-top: var(--space-4);
  color: var(--color-text);
  font-size: 16px;
  line-height: 24px;
}

/* Felder: Suche und Standort */
.market-fields {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.market-fields form {
  margin: 0;
}

.market-fields .search-field {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

.market-fields__search-button {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.market-fields .btn {
  width: 100%;
  height: 44px;
}

.market-fields .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.market-fields .market-fields__locate {
  justify-content: center;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
}

@media (min-width: 1024px) {
  .market-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .market-fields .market-fields__locate {
    width: auto;
  }
}

/* Hinweis (Fehler) */
.market-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: #f7d1d2;
  border: 1px solid #d51920;
  border-radius: var(--radius);
  color: #a61319;
  font-size: 14px;
  line-height: 20px;
}

.market-alert[hidden] {
  display: none;
}

.market-alert img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.market-alert p {
  flex: 1;
  margin: 0;
}

/* Anzahl der Treffer */
.market-count {
  margin-top: var(--space-6);
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
}

/* Liste + Karte: mobil untereinander mit der Karte oben, ab 1024 nebeneinander */
.market-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.market-layout__map {
  order: -1;
}

@media (min-width: 1024px) {
  .market-page__inner {
    padding: 0 40px;
  }

  .market-page__title {
    margin-top: var(--space-4);
    font-size: 32px;
    line-height: 44px;
  }

  .market-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    height: 700px;
  }

  .market-layout__map {
    order: 0;
  }
}

/* Liste: scrollt ab 1024 in der Höhe der Karte, unten blendet sie aus */
.market-results {
  position: relative;
  min-height: 0;
}

.market-results__scroll {
  height: 100%;
}

@media (min-width: 1024px) {
  .market-results__scroll {
    overflow-y: auto;
    /* 4 px room on top and left for the focus ring of a card, taken back by the negative margin */
    height: calc(100% + 8px);
    margin: -4px 0 -4px -4px;
    padding: 4px var(--space-4) 4px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface-variant);
  }

  .market-results::after {
    content: "";
    position: absolute;
    left: 0;
    right: var(--space-4);
    /* the scroll area reaches 4 px below the list (room for the focus ring), the fade covers that too */
    bottom: -4px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    transition: opacity 0.15s;
  }

  .market-results.is-end::after {
    opacity: 0;
  }
}

.market-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobil nur die ersten fünf Märkte, solange der Besucher nicht mehr anfordert */
@media (max-width: 1023.98px) {
  .market-results[data-collapsed] .market-card:nth-child(n + 6) {
    display: none;
  }
}

.market-more {
  margin-top: var(--space-4);
}

.market-more[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .market-more {
    display: none;
  }
}

/* Marktkarte */
.market-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  background: var(--color-white);
  cursor: pointer;
  /* scrollIntoView (pin click) leaves some air around the card instead of putting it flush at the edge */
  scroll-margin: var(--space-4) 0;
}

@media (min-width: 1024px) {
  .market-card {
    /* the list fades out over its last 56 px: keep the card clear of that */
    scroll-margin-bottom: 72px;
  }
}

/*
 * Figma state "focused" (card of the pin clicked on the map): a second border, a 2 px ring around the
 * card with a white gap in between. The gap is 1 px next to the 1 px border of a normal card and 2 px
 * next to the 2 px border of the chosen store's card (the ring sits 3 px / 4 px outside in the design).
 */
.market-card--focus {
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-primary-hover);
}

.market-card--current.market-card--focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-hover);
}

.market-card--current {
  padding: calc(var(--space-4) - 1px);
  border: 2px solid var(--color-primary-hover);
  background: #e9f5ef;
}

.market-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.market-card__name {
  min-width: 0;
  margin: 0;
  color: var(--color-primary-hover);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.market-card--current .market-card__name {
  color: var(--color-primary-active);
}

.market-card__select {
  flex-shrink: 0;
  gap: var(--space-2);
  padding-left: var(--space-3);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-white);
  cursor: pointer;
}

.market-card__select:hover {
  background: var(--color-primary-active);
}

.market-card__current {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-primary-hover);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.market-card__current img {
  width: 20px;
  height: 20px;
}

.market-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: 16px;
  line-height: 24px;
}

/* 16 px icons centred on the 24 px line; the SVGs ignore their aspect ratio, so never stretch them */
.market-card__row > img {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
}

.market-card__row address {
  flex: 1;
  min-width: 0;
  font-style: normal;
}

/* Distance and route sit right of the address */
/* Opening hours: the lines of the days, below them the open/closed status */
.market-card__hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.market-card__hours p {
  margin: 0;
}

.market-card__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
}

.market-card__status img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.market-card__distance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 24px;
}

.market-card__distance strong {
  font-weight: 600;
}

.market-card__distance a {
  font-size: 16px;
}

.market-card a {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.market-card--current a {
  color: var(--color-primary-active);
}

.market-card__clear {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-hover);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* Leerer und ladender Zustand */
.market-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  text-align: center;
}

.market-state[hidden] {
  display: none;
}

.market-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface-variant);
}

.market-state__icon img {
  width: 24px;
  height: 24px;
}

.market-state__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}

.market-state__title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.market-state__text p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.market-state--loading {
  gap: var(--space-2);
}

.market-state--loading img {
  width: 32px;
  height: 32px;
}

.market-state--loading p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

/* Karte (Leaflet) */
.market-map {
  position: relative;
  height: 240px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-variant);
  z-index: 0;
}

.market-map__canvas {
  position: absolute;
  inset: 0;
  font-family: var(--font-family);
}

@media (min-width: 1024px) {
  .market-map {
    height: 100%;
  }
}

.market-map__zoom {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.market-map__zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  cursor: pointer;
}

.market-map__zoom button:hover {
  background: var(--color-primary-subtle);
}

.market-map__zoom img {
  width: 20px;
  height: 20px;
}

.market-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-subtle);
}

.market-map .leaflet-container {
  background: var(--color-surface-variant);
  font: inherit;
}

/* Pins und Cluster als Leaflet-DivIcons */
.market-pin {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-primary-hover);
  border-radius: var(--radius-full);
  background: var(--color-white);
}

.market-pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-full);
  background: var(--color-primary-hover);
}

/* The chosen store: filled green, white rim, storefront icon instead of the dot */
.market-pin--current {
  border-color: var(--color-white);
  background: var(--color-primary-hover) url("/assets/icons/storefront-white.svg") center / 20px 20px no-repeat;
}

.market-pin--current::after {
  display: none;
}

/* Leaflet's own stylesheet loads later and sets display:block on marker icons, hence the prefix. */
.market-map .market-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-primary-hover);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary-hover);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

/* Infofenster */
/* The 16 px rim is padding of the frame: as margin of the content its vertical part would collapse outwards. */
.market-map .leaflet-popup-content-wrapper {
  padding: var(--space-4);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  color: var(--color-text);
}

.market-map .leaflet-popup-content {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.market-map .leaflet-popup-content p {
  margin: 0;
}

.market-map .leaflet-popup-close-button {
  display: none;
}

.market-map .leaflet-control-attribution {
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Warengruppen- und Kollektionsseite
   -------------------------------------------------------------------------- */

.category-page__intro {
  max-width: 72ch;
  color: var(--color-text);
  font-size: 16px;
  line-height: 24px;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary-border-subtle);
  border-radius: 18px;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.chip:hover {
  background: #cceada;
}

.category-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.category-toolbar__count {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

.category-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
}

.category-toolbar__sort select {
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
}

.category-page__empty {
  padding: var(--space-8) 0;
  color: var(--color-text-subtle);
  text-align: center;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.pager__status {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   Kontoseiten (Anmelden, Registrieren, Passwort)
   -------------------------------------------------------------------------- */

.account-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .account-columns {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

.account-card {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
}

.account-card--single {
  max-width: 480px;
}

.account-card__title {
  margin-bottom: var(--space-4);
  color: var(--color-text);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-field label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.account-field input {
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
  background: var(--color-white);
}

.account-field input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.account-field__error,
.account-form__errors {
  color: var(--color-error);
  font-size: 13px;
  line-height: 18px;
}

.account-form__errors:empty {
  display: none;
}

.account-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
}

.account-form__alt {
  text-align: center;
}

.account-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
}

.account-links a {
  color: var(--color-primary);
  text-decoration: underline;
}

.account-hint {
  color: var(--color-text-subtle);
  font-size: 14px;
  line-height: 20px;
}

.account-providers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-providers__btn {
  justify-content: center;
  width: 100%;
}

.account-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 20px;
}

.account-status--success {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.account-status--error {
  background: var(--color-error-subtle);
  color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Anmeldeseiten mit AuthLayout (Figma "Login" Desktop 2211:6316, Mobile 2211:12875)
   Primärfarbe des neuen Design Systems ist #00893f (= --color-primary-hover);
   die Fehlerfarben weichen von --color-error ab und stehen deshalb hier.
   -------------------------------------------------------------------------- */

/* Farben des neuen Design Systems, auch für den Kontobereich im Shop-Layout */
.auth-layout,
.account-area {
  --auth-primary: var(--color-primary-hover);
  --auth-error: #ed1c24;
  --auth-error-text: #be161d;
  --auth-error-surface: #fbd2d3;
  --auth-divider: var(--color-border-subtle);
  --auth-disabled-surface: #ececec;
  --auth-disabled-text: var(--color-border);
}

.auth-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-white);
}

.auth-header {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--space-10) 0 var(--space-6);
}

.auth-header__logo img {
  display: block;
  width: auto;
  height: 24px;
}

.auth-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 440px;
  padding: 0 20px;
}

.auth-card {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-10);
}

.auth-card > * + * {
  margin-top: 20px;
}

.auth-title {
  color: var(--auth-primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
}

/* Fehlerbanner (Figma "Error Banner" 2393:34151); Statusmeldungen aus dem Cookie sehen gleich aus */
.auth-alert,
.auth-card .account-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--auth-error);
  border-radius: var(--radius);
  background: var(--auth-error-surface);
  color: var(--auth-error-text);
  font-size: 14px;
  line-height: 20px;
}

.auth-card .account-status--error::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("../icons/error.svg") no-repeat center / contain;
}

.auth-card .account-status--success {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.auth-alert__icon {
  flex: none;
}

.auth-alert__text {
  flex: 1;
  min-width: 0;
}

.auth-alert a {
  color: inherit;
  text-decoration: underline;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Pflichtfeld-Stern sitzt links vor dem Label, außerhalb der Feldkante */
.auth-label,
.auth-required-note {
  position: relative;
  align-self: flex-start;
  padding: 0 var(--space-1);
  font-size: 12px;
  line-height: 16px;
}

.auth-label {
  font-weight: 600;
  letter-spacing: 0.15px;
}

.auth-label::before,
.auth-required-note::before {
  content: "*";
  content: "*" / "";
  position: absolute;
  left: -5px;
  color: var(--auth-error);
  font-weight: 600;
}

.auth-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.auth-input:focus-within {
  outline: 2px solid var(--auth-primary);
  outline-offset: 1px;
}

.auth-input input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  outline: none;
}

.auth-input input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.auth-input__toggle {
  display: flex;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Fehlerzustand: Blazor setzt "invalid" an das Eingabefeld */
.auth-input:has(.invalid) {
  border-color: var(--auth-error);
}

.auth-field:has(.invalid) .auth-label,
.auth-field__error {
  color: var(--auth-error);
}

/* Hilfetext unter dem Feld; im Fehlerzustand ersetzt ihn die Fehlermeldung */
.auth-field__hint {
  color: var(--color-text-subtle);
  font-size: 12px;
  line-height: 16px;
}

.auth-field:has(.invalid) .auth-field__hint {
  display: none;
}

.auth-field__error {
  display: flex;
  gap: var(--space-1);
  font-size: 12px;
  line-height: 16px;
}

.auth-field__error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("../icons/error-field.svg") no-repeat center / contain;
}

.auth-form__forgot {
  display: flex;
  justify-content: flex-end;
}

.auth-link {
  color: var(--auth-primary);
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
}

.auth-check {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.auth-check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-white) no-repeat center / 14px;
  cursor: pointer;
}

.auth-check input:checked {
  border-color: var(--auth-primary);
  background-color: var(--auth-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}

/* Mehrzeiliges Label: Box oben bündig mit der ersten Zeile */
.auth-check--multiline {
  align-items: flex-start;
  align-self: stretch;
}

.auth-check--required > span::before {
  content: "*";
  margin-right: var(--space-1);
  color: var(--auth-error);
  font-weight: 600;
}

.auth-check input.invalid {
  border-color: var(--auth-error);
}

.auth-check input:focus-visible {
  outline: 2px solid var(--auth-primary);
  outline-offset: 1px;
}

.auth-submit {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--auth-primary);
  color: var(--color-white);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
}

a.auth-submit {
  display: block;
  text-align: center;
  text-decoration: none;
}

.auth-submit:hover {
  background: var(--color-primary-active);
}

/* Solange ein Feld leer ist, wirkt der Button inaktiv wie im Design; er bleibt aber klickbar
   und zeigt dann die Feldfehler (ein echtes disabled bräuchte Script und bremst Autofill aus). */
.auth-form:has(.auth-input input:placeholder-shown) .auth-submit,
.auth-form:has(.auth-check--required input:not(:checked)) .auth-submit {
  background: var(--auth-disabled-surface);
  color: var(--auth-disabled-text);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-subtle);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.15px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-option.btn {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-color: var(--auth-primary);
  color: var(--auth-primary);
}

/* Das Element trägt nur Attribute für PasskeySubmit.razor.js und würde sonst eine Flex-Lücke belegen */
.auth-form passkey-submit {
  display: none;
}

/* Auf der Anmeldeseite stehen die Dienste in einem eigenen Formular direkt unter dem Passkey-Button */
.auth-card > .auth-form + .account-providers {
  margin-top: var(--space-2);
}

.auth-card .account-providers {
  gap: var(--space-2);
}

.auth-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.auth-card > .auth-required-note {
  margin-top: 60px;
}

/* Bestätigungsseiten (Figma 2352:313 "Bestätigung", 2334:13334 Willkommen) */
.auth-card--center {
  align-items: center;
  text-align: center;
}

.auth-card--center > * {
  width: 100%;
}

.auth-card--center .auth-alert {
  text-align: left;
}

.auth-text {
  font-size: 14px;
  line-height: 20px;
}

.auth-dev-hint {
  color: var(--color-text-subtle);
  font-size: 12px;
  line-height: 16px;
}

.auth-dev-hint a {
  color: inherit;
  text-decoration: underline;
}

.auth-text--center {
  text-align: center;
}

/* Seiten mit Illustration rücken enger an den Kopf (24 statt 40 px Abstand) */
.auth-main--illustrated {
  margin-top: -16px;
}

.auth-illustration {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
}

.auth-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6) var(--space-3);
  background: var(--color-surface-variant);
  color: var(--color-primary-active);
  font-size: 14px;
  line-height: 20px;
}

.auth-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 16px;
}

.auth-footer__legal a {
  color: inherit;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .auth-header {
    padding: 56px 0;
  }

  .auth-header__logo img {
    height: 40px;
  }

  .auth-title {
    font-size: 24px;
    line-height: 32px;
  }

  .auth-illustration {
    width: 160px;
    height: 160px;
    margin-bottom: 48px;
  }

  .auth-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
  }

  .auth-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Mein Konto (Figma Section 2413:38108): Übersicht im Shop-Layout, Dialoge darüber
   -------------------------------------------------------------------------- */

.account-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--page-padding) var(--space-10);
}

.account-area__title {
  color: var(--auth-primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.account-overview {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-white);
}

.account-overview__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) 0;
}

.account-overview__section + .account-overview__section {
  border-top: 1px solid var(--auth-divider);
}

.account-overview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.account-overview__title {
  color: var(--auth-primary);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.account-overview__edit {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--auth-primary);
  border-radius: var(--radius);
  background: var(--color-white);
}

.account-overview__edit:hover {
  background: var(--color-primary-subtle);
}

.account-overview__value {
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.account-overview__delete {
  align-self: flex-start;
  color: var(--auth-error);
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
}

/* Dialog: die Seite ist der geöffnete Dialog, Schließen führt zurück zur Übersicht */
body:has(.account-dialog-layer) {
  overflow: hidden;
}

.account-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.account-dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 32%);
}

.account-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  border-radius: 16px;
  background: var(--color-white);
}

.account-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
}

.account-dialog__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.account-dialog__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
}

.account-dialog__close:hover {
  background: var(--color-surface-variant);
}

.account-dialog__body {
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--auth-divider);
  border-bottom: 1px solid var(--auth-divider);
}

.account-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* Löschen: gefährliche Aktion links, Abbrechen (primär) rechts */
.account-dialog__footer:has(.auth-button--danger) {
  justify-content: space-between;
}

.account-dialog .auth-required-note {
  margin-top: var(--space-10);
}

/* Buttons in Dialogen */
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--auth-primary);
  border-radius: var(--radius);
  background: var(--auth-primary);
  color: var(--color-white);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.auth-button:hover {
  border-color: var(--color-primary-active);
  background: var(--color-primary-active);
}

.auth-button--outline {
  background: var(--color-white);
  color: var(--auth-primary);
}

.auth-button--outline:hover {
  border-color: var(--auth-primary);
  background: var(--color-primary-subtle);
}

.auth-button--danger {
  border-color: var(--auth-error);
  background: var(--color-white);
  color: var(--auth-error);
}

.auth-button--danger:hover {
  border-color: var(--auth-error);
  background: var(--auth-error-surface);
}

/* Wie beim Login: inaktiv wirkend, solange ein Pflichtfeld leer ist, aber klickbar */
.account-dialog:has(.auth-input input[aria-required="true"]:placeholder-shown) button[type="submit"].auth-button:not(.auth-button--danger) {
  border-color: var(--auth-disabled-surface);
  background: var(--auth-disabled-surface);
  color: var(--auth-disabled-text);
}

.account-dialog:has(.auth-input input[aria-required="true"]:placeholder-shown) .auth-button--danger {
  border-color: var(--auth-divider);
  color: var(--auth-disabled-text);
}

/* Formularteile der Dialoge */
.auth-label--optional::before {
  content: none;
}

.auth-text-block {
  font-size: 14px;
  line-height: 20px;
}

.auth-text-block p + p {
  margin-top: 20px;
}

.auth-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.auth-radio-group legend {
  float: left;
  margin-bottom: var(--space-2);
}

.auth-radio-group__options {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.auth-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.auth-radio input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}

.auth-radio input:checked {
  border: 6px solid var(--auth-primary);
}

.auth-radio input:focus-visible {
  outline: 2px solid var(--auth-primary);
  outline-offset: 1px;
}

.auth-row {
  display: flex;
  gap: var(--space-4);
}

.auth-row > * {
  flex: 1;
  min-width: 0;
}

.auth-input--disabled {
  border-color: var(--auth-divider);
}

.auth-input--disabled input {
  color: var(--auth-disabled-text);
}

.auth-success {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-size: 14px;
  line-height: 20px;
}

.auth-success img {
  flex: none;
}

@media (min-width: 1024px) {
  .account-area {
    padding: var(--space-10) var(--page-padding) 68px;
  }

  .account-area__title {
    font-size: 24px;
    line-height: 32px;
  }

  .account-overview {
    padding: var(--space-2) var(--space-6);
  }
}

.header-logout {
  display: inline-flex;
  align-items: center;
}

.header-logout__btn {
  white-space: nowrap;
}