/* ==========================================================================
   Kotzian Gartenbau · Prototyp
   Grundlage: Figma „Kotzian Relaunch“ (Sektionen + Komponenten), Stand 19.10.2026
   Werte 1:1 aus den Figma-Variablen und Textstilen. Keine Rundungen (0 px).
   ========================================================================== */

/* ---------- Schriften lokal (19.10.2026): kein Aufblitzen beim Seitenwechsel, DSGVO-konform.
   Headlines: Charrow (Brandmagus, Schrift der Bestandsseite, Webfont-Lizenz prüfen).
   Fließtext/UI: Inter (SIL Open Font License, variabler Schnitt 400–500). ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/inter-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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Charrow"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/charrow-extralight.woff2") format("woff2"); }
@font-face { font-family: "Charrow"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/charrow-light.woff2") format("woff2"); }
@font-face { font-family: "Charrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/charrow-regular.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Farben */
  --logo-gruen: #33cc00;
  --primaer: #1f3b2c;          /* Waldgrün, Aktion */
  --primaer-hover: #16301f;
  --moos: #4f6b3a;
  --keim: #e6f2dc;
  --papier: #f5f3ed;
  --weiss: #ffffff;
  --sand: #e8e3d6;
  --nachtgruen: #14211a;
  --kies: #dad5c8;
  --tinte: #1c201b;
  --stein: #565d52;
  --invers: #f5f3ed;
  --fehler: #b3261e;

  /* Schriften */
  --font-titel: "Charrow", "Futura", "Century Gothic", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Abstände (Figma: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 160) */
  --s-2xs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 96px;
  --s-5xl: 160px;

  /* Rahmen: mobil 20, Desktop 80 (fließend dazwischen) */
  /* Rahmen: mobil 20, ab ca. 1500 px Breite 72; Inhalt bis 1600 px (seit 19.10.2026 breiter) */
  --rahmen: clamp(20px, calc(4.6vw + 2px), 72px);
  --inhalt: 1600px;
  --sektion-y: clamp(96px, calc(73.5px + 6.009vw), 160px);
  --kopf-abstand: clamp(40px, calc(27.3px + 3.38vw), 64px);

  --header-h: 104px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Hover-Bewegungen: starten sofort und laufen lang und weich aus (19.10.2026 geglättet;
     vorher childless-Kurve 0.65,0.05,0,1 – wirkte zu Beginn wie ein Hänger) */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --dauer-smooth: 750ms;
}

@media (max-width: 1079px) {
  :root { --header-h: 72px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
input, textarea, select { font: inherit; color: inherit; border-radius: 0; }
:focus-visible { outline: 2px solid var(--primaer); outline-offset: 3px; }
.auf-dunkel :focus-visible, .hero :focus-visible { outline-color: var(--papier); }
::selection { background: var(--keim); color: var(--tinte); }

/* Sprungziele (#details, #abholung …) nicht unter dem fixierten Header verstecken */
[id] { scroll-margin-top: calc(var(--header-h) + 32px); }
/* hidden-Attribut hat immer Vorrang vor display-Regeln (z. B. leere Kasse/Warenkorb) */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--rahmen); top: 12px; z-index: 200;
  background: var(--primaer); color: var(--weiss); padding: 12px 20px;
  transform: translateY(-200%); transition: transform 200ms var(--ease-out);
}
.skip-link:focus { transform: none; }
/* Ziel des Sprunglinks bekommt per main.js kurz tabindex="-1": kein Fokusrahmen um den ganzen Inhalt */
main[tabindex="-1"]:focus { outline: none; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--inhalt) + 2 * var(--rahmen));
  margin-inline: auto;
  padding-inline: var(--rahmen);
}
.sektion { padding-block: var(--sektion-y); }

/* ---------- Typografie (fließend Mobil → Desktop) ----------
   Überarbeitet 19.10.2026: Skala eine Stufe kleiner, Laufweite nach Größe gestaffelt
   Seit 19.10.2026 Charrow statt Jost: Light bis H2, Regular für H3/H4, etwas weitere Laufweite. */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-titel);
  font-kerning: normal;
  text-wrap: balance;
}
.t-display, .t-h1, .t-h2 { font-weight: 300; }
.t-h3, .t-h4 { font-weight: 400; }
.t-display { font-size: clamp(48px, calc(35.32px + 3.380vw), 84px); line-height: clamp(54px, calc(40.62px + 3.568vw), 92px); letter-spacing: 0.04em; }
/* Startseiten-Hero: eine Stufe über Display (104/110, mobil 52/58) */
.t-display--hero { font-size: clamp(52px, calc(33.69px + 4.883vw), 104px); line-height: clamp(58px, calc(39.69px + 4.883vw), 110px); letter-spacing: 0.015em; }
.t-h1      { font-size: clamp(38px, calc(30.25px + 2.066vw), 60px); line-height: clamp(44px, calc(35.55px + 2.254vw), 68px); letter-spacing: 0.04em; }
.t-h2      { font-size: clamp(32px, calc(27.07px + 1.315vw), 46px); line-height: clamp(38px, calc(32.37px + 1.502vw), 54px); letter-spacing: 0.04em; }
.t-h3      { font-size: clamp(23px, calc(21.24px + 0.4695vw), 28px); line-height: clamp(31px, calc(29.24px + 0.4695vw), 36px); letter-spacing: 0.03em; }
.t-h4      { font-size: clamp(17px, calc(16.3px + 0.1878vw), 19px); line-height: clamp(25px, calc(24.3px + 0.1878vw), 27px); letter-spacing: 0.03em; }
.t-body-l { font-size: 18px; line-height: 30px; }
.t-body   { font-size: 16px; line-height: 27px; }
.t-small  { font-size: 14px; line-height: 22px; }
.t-label  { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.t-nav    { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; }
p { text-wrap: pretty; }

@media (max-width: 767px) {
  .t-body-l { font-size: 17px; line-height: 28px; }
}

.stein { color: var(--stein); }
.zweiton .ton { color: var(--stein); }
.auf-dunkel .zweiton .ton, .hero .zweiton .ton { color: rgba(245, 243, 237, 0.55); }
.zentriert { text-align: center; }

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }

/* ---------- Buttons (D1) ----------
   Hover „Pfeil von links“ (19.10.2026, Benchmark childless.ch): Logo-Grün zieht rund vom
   linken Rand auf (Füllschicht unten), die Beschriftung rückt nach rechts, links gleitet
   ein weißer Pfeil herein. Alternativen „Ausbreiten“ und „Rollen“: button-varianten.html */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--primaer);
  color: var(--weiss);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--invers { background: var(--weiss); color: var(--tinte); }
.btn--block { display: flex; width: 100%; }
.btn__text { position: relative; display: inline-block; vertical-align: top; transition: transform var(--dauer-smooth) var(--ease-smooth); will-change: transform; }
.btn__text > span { display: block; }
.btn__text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--weiss);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12H19.25M19.25 12L14.25 7M19.25 12L14.25 17'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12H19.25M19.25 12L14.25 7M19.25 12L14.25 17'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 400ms ease, transform var(--dauer-smooth) var(--ease-smooth);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__text { transform: translateX(12px); }
  .btn:hover .btn__text::before { opacity: 1; transform: none; transition-delay: 80ms; }
  .btn:hover .btn__fuellung { clip-path: circle(var(--fr, 150%) at 0 50%); }
}
.btn:focus-visible .btn__text { transform: translateX(12px); }
.btn:focus-visible .btn__text::before { opacity: 1; transform: none; }
.btn:focus-visible .btn__fuellung { clip-path: circle(var(--fr, 150%) at 0 50%); }

/* Füllschicht: Logo-Grün mit weißer Beschriftung, als Kreis vom linken Rand aufgezogen
   (gleiche Kurve und Dauer wie Text-Link-Kreis und Linien). Weil die Beschriftung darin
   doppelt liegt und sich gleich bewegt, wechselt die Schriftfarbe genau an der Kante. */
.btn__fuellung {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  background: var(--logo-gruen);
  color: var(--weiss);
  clip-path: circle(0px at 0 50%);
  transition: clip-path var(--dauer-smooth) var(--ease-smooth);
  will-change: clip-path;
  pointer-events: none;
}

/* Vergleichsvariante „Ausbreiten“: Keim-Fläche mit Beschriftung in Waldgrün wird als
   Kreis vom Eintrittspunkt der Maus aufgezogen (Position über --x/--y/--r, main.js). */
.hover-ausbreiten .btn__text::before, .hover-ausbreiten .btn__fuellung, .hover-rollen .btn__fuellung { display: none; }
.hover-ausbreiten .btn::after {
  content: attr(data-label);
  content: attr(data-label) / "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  background: var(--keim);
  color: var(--primaer);
  clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
  transition: clip-path var(--dauer-smooth) var(--ease-smooth);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .hover-ausbreiten .btn:hover { background-color: var(--primaer); }
  .hover-ausbreiten .btn--invers:hover { background-color: var(--weiss); color: var(--tinte); }
  .hover-ausbreiten .btn:hover .btn__text { transform: none; }
  .hover-ausbreiten .btn:hover::after { clip-path: circle(var(--r, 120%) at var(--x, 50%) var(--y, 50%)); }
}

/* Vergleichsvariante „Rollen“: Beschriftung rollt nach oben, Kopie kommt von unten.
   Beim Verlassen springt sie unsichtbar zurück – die Bewegung geht immer nach oben. */
.hover-rollen .btn__text::before { display: none; }
.hover-rollen .btn__text { overflow: hidden; height: 20px; }
.hover-rollen .btn__text > span { text-shadow: 0 24px 0 currentColor; transition: transform 0s; }
@media (hover: hover) and (pointer: fine) {
  .hover-rollen .btn:hover .btn__text { transform: none; }
  .hover-rollen .btn:hover .btn__text > span { transform: translateY(-24px); transition: transform var(--dauer-smooth) var(--ease-smooth); }
}

/* Pfeil-Spur: Pfeil gleitet hinaus und blendet aus, kurz danach gleitet eine Kopie von
   der anderen Seite herein (versetzt statt starr gekoppelt, 19.10.2026). */
.pfeil-spur { position: relative; display: block; flex: none; width: 16px; height: 16px; overflow: hidden; }
.pfeil-spur .icon {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 550ms var(--ease-smooth), opacity 300ms ease;
}
.pfeil-spur .icon:last-child { transform: translateX(-90%); opacity: 0; }
.pfeil-spur--links .icon:last-child { transform: translateX(90%); }
.pfeil-spur--unten .icon:last-child { transform: translateY(-90%); }
@media (hover: hover) and (pointer: fine) {
  a:hover .pfeil-spur .icon:first-child, button:hover:not(:disabled) .pfeil-spur .icon:first-child, .karte:hover .pfeil-spur .icon:first-child {
    transform: translateX(90%); opacity: 0;
    transition: transform 380ms cubic-bezier(0.4, 0, 0.6, 1), opacity 260ms ease 60ms;
  }
  a:hover .pfeil-spur--links .icon:first-child, button:hover:not(:disabled) .pfeil-spur--links .icon:first-child { transform: translateX(-90%); }
  a:hover .pfeil-spur--unten .icon:first-child, button:hover:not(:disabled) .pfeil-spur--unten .icon:first-child { transform: translateY(90%); }
  a:hover .pfeil-spur .icon:last-child, button:hover:not(:disabled) .pfeil-spur .icon:last-child, .karte:hover .pfeil-spur .icon:last-child {
    transform: none; opacity: 1;
    transition: transform var(--dauer-smooth) var(--ease-smooth) 140ms, opacity 400ms ease 140ms;
  }
}

/* Text-Button / weiterführender Textlink (19.10.2026): Beschriftung fein unterstrichen,
   Pfeil rechts. Bei Hover wächst hinter dem Pfeil ein Kreis in Logo-Grün auf (Timing wie
   die Buttons, Benchmark childless.ch), der Pfeil läuft weiß darin durch, die Linie zieht sich
   nach rechts zurück. Teaser-Karten lösen schon beim Überfahren aus. */
.pfeil-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tinte);
  -webkit-tap-highlight-color: transparent;
}
.pfeil-link--invers { color: var(--weiss); }
.pfeil-link__text { position: relative; display: inline-block; }
.pfeil-link__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--dauer-smooth) var(--ease-smooth);
}
/* Kreis hinter dem Pfeil */
.pfeil-link__kreis {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  transition: color 300ms ease;
}
.pfeil-link__kreis::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--logo-gruen);
  transform: scale(0);
  transition: transform var(--dauer-smooth) var(--ease-smooth);
}
.pfeil-link__kreis .pfeil-spur { position: relative; }
@media (hover: hover) and (pointer: fine) {
  a:hover > .pfeil-link__kreis::before, button:hover:not(:disabled) > .pfeil-link__kreis::before, .karte:hover .pfeil-link__kreis::before { transform: scale(1); }
  a:hover .pfeil-link__text::after, button:hover:not(:disabled) .pfeil-link__text::after, .karte:hover .pfeil-link__text::after { transform: scaleX(0); }
  a:hover > .pfeil-link__kreis, button:hover:not(:disabled) > .pfeil-link__kreis, .karte:hover .pfeil-link__kreis { color: var(--weiss); }
}
.pfeil-link:focus-visible .pfeil-link__kreis::before { transform: scale(1); }
.pfeil-link:focus-visible .pfeil-link__kreis { color: var(--weiss); }

/* Fließtext-Links (19.10.2026, passend zu Text-Links und Navigation): feine Linie in
   Textfarbe. Bei Hover zieht sie sich nach rechts zurück und zeichnet sich von links neu
   (Benchmark childless.ch). Als Hintergrund-Linie, damit es auch über Zeilenumbrüche geht. */
.text-link, .langtext a, .checkbox a, .formular__erfolg a, .cookie__fuss > a:last-child {
  color: var(--tinte);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 100% 100%;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover, .langtext a:hover, .checkbox a:hover, .formular__erfolg a:hover, .cookie__fuss > a:last-child:hover {
    animation: linie-neu 1100ms both;
  }
}
@keyframes linie-neu {
  0%    { background-size: 100% 1px; background-position: 100% 100%; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  45%   { background-size: 0% 1px;   background-position: 100% 100%; }
  45.1% { background-size: 0% 1px;   background-position: 0% 100%;   animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  100%  { background-size: 100% 1px; background-position: 0% 100%; }
}

/* Kontaktliste (Telefon, E-Mail, Adresse): Icon im runden Papier-Feld wie die
   Steuer-Buttons, keine Trennlinien. Hover: grüner Kreis, Icon weiß, Linie zeichnet sich. */
.kontaktliste { display: grid; gap: 16px; }
.kontaktliste a { display: inline-flex; align-items: center; gap: 20px; color: var(--tinte); -webkit-tap-highlight-color: transparent; }
.kontaktliste__icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--papier);
  transition: color 300ms ease;
}
.kontaktliste__icon .icon { width: 20px; height: 20px; }
.kontaktliste__icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: var(--logo-gruen);
  transform: scale(0);
  transition: transform var(--dauer-smooth) var(--ease-smooth);
}
.kontaktliste__wert {
  font-size: 18px;
  line-height: 28px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 100% 100%;
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .kontaktliste a:hover .kontaktliste__icon { color: var(--weiss); }
  .kontaktliste a:hover .kontaktliste__icon::before { transform: scale(1); }
  .kontaktliste a:hover .kontaktliste__wert { animation: linie-ein var(--dauer-smooth) var(--ease-smooth) both; }
}
@keyframes linie-ein {
  from { background-size: 0% 1px; background-position: 0% 100%; }
  to   { background-size: 100% 1px; background-position: 0% 100%; }
}
.kontaktliste a:focus-visible .kontaktliste__icon { color: var(--weiss); }
.kontaktliste a:focus-visible .kontaktliste__icon::before { transform: scale(1); }
@media (max-width: 767px) {
  .kontaktliste__wert { font-size: 16px; line-height: 24px; }
  .kontaktliste a { gap: 16px; }
}

/* Steuer-Buttons (Karussell, Lightbox): runde Papier-Fläche ohne Rahmen, Icon 16 px.
   Hover wie bei den Text-Links (19.10.2026): Kreis in Logo-Grün wächst auf, Pfeil läuft
   weiß durch; „Schließen“ dreht sich leicht. */
.pfeil-btn {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--papier);
  color: var(--tinte);
  transition: color 300ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.pfeil-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: var(--logo-gruen);
  transform: scale(0);
  transition: transform var(--dauer-smooth) var(--ease-smooth);
}
.pfeil-btn .icon, .pfeil-btn .pfeil-spur { width: 16px; height: 16px; }
.pfeil-btn > .icon { transition: transform var(--dauer-smooth) var(--ease-smooth); }
.pfeil-btn:active:not(:disabled) { transform: scale(0.95); }
.pfeil-btn:disabled { color: var(--kies); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pfeil-btn:hover:not(:disabled) { color: var(--weiss); }
  .pfeil-btn:hover:not(:disabled)::before { transform: scale(1); }
  .pfeil-btn--schliessen:hover > .icon { transform: rotate(90deg); }
}
.pfeil-btn:focus-visible { color: var(--weiss); }
.pfeil-btn:focus-visible::before { transform: scale(1); }

/* ---------- Header (G1 transparent / G2 hell) ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  color: var(--tinte);
  transition: color 250ms ease;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--weiss);
  transition: opacity 250ms var(--ease-out);
}
.header--transparent:not(.is-scrolled) { color: var(--weiss); }
.header--transparent:not(.is-scrolled)::before { opacity: 0; }

.header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}
.header__nav ul { display: flex; gap: 40px; }
.header__nav a, .header__rechts ul a { position: relative; padding-block: 8px; }
.header__nav a::after, .header__rechts ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dauer-smooth) var(--ease-smooth);
}
.header a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .header__nav a:hover::after, .header__rechts ul a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.logo { position: relative; display: block; width: 184px; height: 56px; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 250ms ease; }
.logo .logo--hell { opacity: 0; }
.header--transparent:not(.is-scrolled) .logo .logo--hell { opacity: 1; }
.header--transparent:not(.is-scrolled) .logo .logo--dunkel { opacity: 0; }

.header__rechts { display: flex; align-items: center; justify-content: flex-end; gap: 40px; }
.header__rechts ul { display: flex; gap: 40px; }
.header__icons { display: flex; align-items: center; gap: 20px; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -4px; -webkit-tap-highlight-color: transparent; }
.icon-btn:active { transform: scale(0.94); }
.header__menue-btn { display: none; }

@media (max-width: 1079px) {
  .header__inner { grid-template-columns: auto 1fr; }
  .header__nav, .header__rechts > ul, .header__suche { display: none; }
  .header__menue-btn { display: inline-grid; }
  .logo { width: 138px; height: 42px; }
  .header__logo { order: -1; }
}

/* Angemeldet: schwebendes Quadrat ganz rechts am Rand, direkt unter dem Header auf Höhe des Verwaltungs-
   Subheaders; Fläche wie der Subheader. Führt aus dem Frontend zurück in die Verwaltung. */
.dashboard-link {
  position: fixed; z-index: 55; top: var(--header-h); right: 0;
  display: grid; place-items: center; width: 64px; height: 64px;
  background: var(--papier); color: var(--tinte);
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.dashboard-link .icon { width: 24px; height: 24px; }
.dashboard-link:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .dashboard-link:hover { background: var(--sand); } }
.dashboard-link:focus-visible { outline-offset: -3px; }
/* In der Verwaltung sitzt es am Ende des Subheader-Bands und ist als aktiv hinterlegt */
/* In der Verwaltung ersetzt Abmelden das Dashboard-Quadrat; Sand hebt es vom Subheader-Band ab */
.vw .dashboard-link, .konto-seite .dashboard-link { background: var(--sand); }
@media (hover: hover) and (pointer: fine) { .vw .dashboard-link:hover, .konto-seite .dashboard-link:hover { background: var(--kies); } }
@media (max-width: 899px) { .dashboard-link { width: 56px; height: 56px; } }

/* ---------- Mobiles Menü (G3) ---------- */
.menue {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 300ms var(--ease-drawer), visibility 0s linear 300ms;
}
.menue.is-offen { transform: none; visibility: visible; transition: transform 300ms var(--ease-drawer), visibility 0s; }
.menue__kopf { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: none; }
.menue__kopf .logo { width: 138px; height: 42px; }
.menue__kopf .header__icons { gap: 20px; }
.menue__inhalt { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding-top: 32px; padding-bottom: 48px; }
.menue__liste > li + li { border-top: 1px solid var(--kies); }
.menue__liste a, .menue__liste button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding-block: 14px;
  font-family: var(--font-titel); font-weight: 300; letter-spacing: 0.05em;
  font-size: 30px; line-height: 40px; text-align: left;
}
.menue__liste button .icon { transition: transform 250ms var(--ease-out); }
.menue__liste button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.menue__unter { display: none; padding: 0 0 16px; }
.menue__unter.is-offen { display: block; }
.menue__unter a { font-family: var(--font-text); font-size: 16px; line-height: 27px; font-weight: 400; letter-spacing: 0; padding-block: 6px; color: var(--stein); }
.menue__klein { display: flex; gap: 24px; margin-top: 40px; color: var(--stein); }
.menue__fuss { margin-top: auto; padding-top: 48px; }

/* ---------- Hero (01) ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  max-height: 1000px;
  overflow: hidden;
  color: var(--weiss);
  background: var(--nachtgruen);
}
.hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 33, 26, 0.42) 0%, rgba(20, 33, 26, 0) 26%, rgba(20, 33, 26, 0) 48%, rgba(20, 33, 26, 0.5) 100%);
  pointer-events: none;
}
.hero__inhalt {
  position: absolute;
  z-index: 1;
  inset: auto 0 clamp(72px, calc(55px + 4vw), 112px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}
.hero__aktionen { display: flex; align-items: center; gap: 32px; }
.hero h1 { text-shadow: 0 2px 28px rgba(20, 33, 26, 0.35); }
.hero .kontakt-badge { position: absolute; z-index: 2; right: var(--rahmen); bottom: clamp(58px, calc(41px + 4vw), 98px); }

@media (max-width: 767px) {
  .hero { max-height: none; min-height: 600px; }
  .hero__inhalt { gap: 32px; }
  .hero__aktionen { flex-direction: column; align-items: stretch; gap: 24px; width: 100%; }
  .hero__aktionen .btn { width: 100%; }
  .hero__aktionen .pfeil-link { justify-content: center; }
  /* Mobil (19.10.2026): Telefon-Button rechts unten, Inhalt darüber; stärkere Abdunklung für die Headline */
  .hero .kontakt-badge { right: 16px; bottom: 16px; }
  .hero__inhalt { bottom: 104px; }
  .hero::after { background: linear-gradient(180deg, rgba(20, 33, 26, 0.4) 0%, rgba(20, 33, 26, 0) 20%, rgba(20, 33, 26, 0) 34%, rgba(20, 33, 26, 0.55) 58%, rgba(20, 33, 26, 0.75) 100%); }
}

/* ---------- Telefon-Button (G6, ehem. Kontakt-Badge) ----------
   Seit 19.10.2026 ohne Textring: runde Papier-Fläche mit Telefon-Icon. Hover wie die
   übrigen runden Elemente: Kreis in Logo-Grün wächst auf, Icon weiß. */
.kontakt-badge {
  --gr: 80px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--gr);
  height: var(--gr);
  border-radius: 50%;
  background: var(--papier);
  color: var(--tinte);
  transition: color 300ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.kontakt-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 50%;
  background: var(--logo-gruen);
  transform: scale(0);
  transition: transform var(--dauer-smooth) var(--ease-smooth);
}
.kontakt-badge .icon { width: 28px; height: 28px; }
.kontakt-badge:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .kontakt-badge:hover { color: var(--weiss); }
  .kontakt-badge:hover::before { transform: scale(1); }
}
.kontakt-badge:focus-visible { color: var(--weiss); }
.kontakt-badge:focus-visible::before { transform: scale(1); }
@media (max-width: 767px) {
  .kontakt-badge { --gr: 64px; }
  .kontakt-badge .icon { width: 24px; height: 24px; }
}

/* ---------- Seitenkopf Unterseiten (G4) ---------- */
.kopf { padding-top: var(--header-h); overflow: hidden; }
.kopf__titel {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(56px, calc(41px + 4vw), 96px) 0 clamp(48px, calc(43.5px + 1.2vw), 72px);
  text-align: center;
}
.kopf__titel h1 { text-wrap: balance; }
.kopf__titel p { margin-top: 24px; color: var(--stein); text-wrap: pretty; }
.kopf__bilder { position: relative; aspect-ratio: 1280 / 500; }
.kopf__bilder img { position: absolute; object-fit: cover; }
.kopf__bild--links  { left: 0;         top: 40%; width: 20.3125%; height: 38%; }
.kopf__bild--mitte  { left: 26.5625%;  top: 0;   width: 46.875%;  height: 88%; }
.kopf__bild--rechts { left: 82.8125%;  top: 30%; width: 17.1875%; height: 58%; }
.kopf__siegel { position: absolute; left: 67.265625%; top: -10.4%; width: 10.625%; aspect-ratio: 1; z-index: 1; }
.kopf__siegel img { position: static; width: 100%; height: 100%; }

@media (max-width: 767px) {
  .kopf__bilder { aspect-ratio: 335 / 300; }
  .kopf__bild--links { display: none; }
  .kopf__bild--mitte  { left: 0;       top: 0;   width: 88.06%; height: 83.33%; }
  .kopf__bild--rechts { left: 64.18%;  top: 50%; width: 35.82%; height: 50%; }
  .kopf__siegel { left: -3.6%; top: 68.33%; width: 22.7%; }
}

/* ---------- 02 · Teaser-Karten (Karte/Leistung) ---------- */
.kopfzeile { margin-bottom: var(--kopf-abstand); }
.teaser-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.karte__bild { aspect-ratio: 410 / 480; width: 100%; object-fit: cover; }
.karte__flaeche {
  position: relative;
  width: 82.93%;
  margin-top: -72px;
  padding: 28px;
  background: var(--weiss);
}
.karte__flaeche h3 { margin-bottom: 12px; }
.karte__flaeche p { color: var(--stein); }
.karte__flaeche .pfeil-link { margin-top: 24px; }
@media (max-width: 899px) {
  .teaser-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .karte__bild { aspect-ratio: 335 / 250; }
  .karte__flaeche { width: 86%; margin-top: -48px; padding: 20px 20px 0 20px; }
}

/* ---------- Zweispaltig: Liste + Bild (03, L2, K, FAQ) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 580fr) minmax(0, 600fr);
  column-gap: 100px;
  align-items: start;
}
.split__kopf { grid-column: 1; margin-bottom: var(--kopf-abstand); }
.split__links { grid-column: 1; }
.split__rechts { grid-column: 2; grid-row: 2; }
.split__rechts--oben { grid-row: 1 / span 2; }
@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__kopf { margin-bottom: 32px; }
  .split__rechts { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 40px; }
  .split__kopf { order: -2; }
  .split__rechts--oben { grid-row: auto; }
}

/* Zeitleiste/Station + Listen mit feinen Linien (C2) */
.zeilen > li, .zeilen > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 32px;
  padding-block: 28px;
}
.zeilen > * + * { border-top: 1px solid var(--kies); }
.zeilen > :first-child { padding-top: 0; }
/* Zeitleiste (Werdegang, 19.10.2026): feine senkrechte Linie mit kurzen Querstrichen auf
   Höhe der Jahreszahlen, ohne Punkte. Zeichnet sich einmal von oben nach unten, wenn die
   Sektion ins Bild kommt (main.js misst Anfang und Ende der Linie). */
.zeitleiste { position: relative; padding-left: 40px; }
.zeitleiste > * + * { border-top: 0; }
.zeitleiste > li { padding-block: 16px; }
.zeitleiste > li:first-child { padding-top: 0; }
.zeitleiste::before, .zeitleiste::after {
  content: "";
  position: absolute;
  left: 4px;
  top: var(--zl-anfang, 14px);
  width: 1px;
  height: var(--zl-laenge, 0px);
}
.zeitleiste::before { background: var(--kies); }
.zeitleiste::after {
  background: var(--tinte);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1800ms var(--ease-smooth);
}
.zeitleiste.is-sichtbar::after { transform: scaleY(1); }
.zeitleiste > li > span { position: relative; align-self: start; }
.zeitleiste > li > span::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--kies);
  transition: background-color 400ms ease;
  transition-delay: calc(var(--zl-i, 0) * 420ms);
}
.zeitleiste.is-sichtbar > li > span::before { background: var(--tinte); }
.zeilen dd, .zeilen p { color: var(--stein); }
@media (max-width: 767px) {
  .zeilen > li, .zeilen > div { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 24px; }
}
.split .pfeil-link, .split .btn { margin-top: 40px; }
.bild-portrait { width: 100%; aspect-ratio: 600 / 680; object-fit: cover; }
.bild-quer { width: 100%; aspect-ratio: 600 / 474; object-fit: cover; }
@media (max-width: 899px) {
  .bild-portrait { aspect-ratio: 335 / 375; }
  .bild-quer { aspect-ratio: 335 / 265; }
}

/* ---------- 03b · Zitat ---------- */
.zitat blockquote { max-width: 980px; margin-inline: auto; text-align: center; }
.zitat cite { display: block; margin-top: 32px; font-style: normal; color: var(--stein); }
.zitat__bilder {
  display: grid;
  grid-template-columns: 240fr 400fr 240fr;
  align-items: center;
  gap: 40px;
  max-width: 960px;
  margin: clamp(48px, calc(33px + 4vw), 96px) auto 0;
}
.zitat__bilder > img { width: 100%; object-fit: cover; }
.zitat__bilder > img:nth-of-type(odd) { aspect-ratio: 240 / 300; }
.zitat__bilder > img:nth-of-type(2) { aspect-ratio: 400 / 500; }
@media (max-width: 767px) {
  .zitat__bilder { gap: 12px; max-width: 270px; }
}

/* ---------- Karussell (L1, Instagram) ---------- */
.karussell__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: var(--kopf-abstand);
}
.karussell__steuerung { display: flex; align-items: center; gap: 12px; flex: none; }
.karussell__zaehler { margin-right: 20px; font-size: 14px; line-height: 22px; color: var(--stein); font-variant-numeric: tabular-nums; }
.karussell__zaehler b { font-weight: 500; color: var(--tinte); }
.karussell__profil { display: inline-flex; align-items: center; gap: 8px; margin-right: 68px; }
/* Text-Button direkt neben der Headline (Grundlinie), Zähler und Pfeile bleiben rechts */
.karussell__titel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 40px; }
.karussell__link { white-space: nowrap; }
.karussell__spur {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-right: calc(-1 * (var(--rahmen) + max(0px, (100vw - var(--inhalt) - 2 * var(--rahmen)) / 2)));
  padding-right: var(--rahmen);
}
.karussell__spur::-webkit-scrollbar { display: none; }
.karussell__spur > * { flex: none; scroll-snap-align: start; }
.karussell__fortschritt { position: relative; height: 2px; margin-top: 64px; }
.karussell__fortschritt::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: var(--kies); }
.karussell__balken {
  position: absolute; left: 0; top: 0; height: 2px; background: var(--tinte);
  transition: transform 300ms var(--ease-out);
}
@media (max-width: 767px) {
  .karussell__kopf { flex-direction: column; align-items: flex-start; gap: 24px; }
  .karussell__profil { margin-right: 0; }
  .karussell__titel { flex-direction: column; align-items: flex-start; gap: 16px; }
  .karussell__spur { gap: 12px; }
  .karussell__fortschritt { margin-top: 32px; }
}

/* Slide (Karte/Leistung-Slide) */
.slide { width: min(520px, 80vw); }
.slide__bild { width: 100%; aspect-ratio: 520 / 360; object-fit: cover; }
.slide__flaeche { position: relative; width: 80.77%; margin-top: -72px; padding: 28px 28px 24px; background: var(--weiss); }
.slide__nummer { display: block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--stein); }
.slide__flaeche h3 { margin: 12px 0; }
.slide__flaeche p { color: var(--stein); }
.slide__flaeche .pfeil-link { margin-top: 20px; }
@media (max-width: 767px) {
  .slide__bild { aspect-ratio: 300 / 210; }
  .slide__flaeche { width: 88%; margin-top: -48px; padding: 20px 20px 0; }
}

/* Instagram-Beitrag */
.post { width: clamp(240px, 66vw, 296px); }
.post img { width: 100%; aspect-ratio: 296 / 370; object-fit: cover; }

/* ---------- FAQ (C7) ---------- */
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 695px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}
.faq-split__intro p { margin-top: 32px; max-width: 380px; color: var(--stein); }
.faq-split__intro .btn { margin-top: 40px; }
.faq { border-top: 1px solid var(--kies); }
.faq details { border-bottom: 1px solid var(--kies); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 21px;
  list-style: none;
  cursor: pointer;
  font-size: 16px; line-height: 27px; color: var(--tinte);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 20px; height: 20px; }
.faq .icon-minus { display: none; }
.faq details[open] .icon-minus { display: block; }
.faq details[open] .icon-plus { display: none; }
.faq__antwort { padding: 0 64px 24px 0; color: var(--stein); }
.faq details[open] .faq__antwort { animation: einblenden 220ms var(--ease-out); }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } }
.faq-split__mobil-fuss { display: none; }
@media (max-width: 899px) {
  .faq-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-split__intro p, .faq-split__intro .btn { display: none; }
  .faq-split__mobil-fuss { display: block; margin-top: 40px; }
  .faq-split__mobil-fuss p { color: var(--stein); }
  .faq-split__mobil-fuss .btn { margin-top: 24px; }
  .faq summary { font-size: 15px; line-height: 22px; font-weight: 500; padding-block: 20px; }
  .faq__antwort { padding-right: 0; }
}

/* ---------- Kontakt (K) + Formular ----------
   Überarbeitet 19.10.2026 (Benchmark childless.ch): Felder als Zeilen ohne Kästen.
   Beschriftung in der Headline-Schrift, Nummer rechts, darunter die Eingabe mit feiner Linie; beim
   Fokus zieht sich die Linie in Tinte von links durch (Timing wie die Links). */
.kontakt-intro { margin-bottom: 40px; color: var(--stein); }
/* Anmeldung (21.10.2026): Formular mittig, Headline linksbündig am Formular wie der Kopf der Rechtsseiten */
.kopf--text.kopf--anmelden .kopf__titel, .anmelden__spalte { max-width: 600px; margin-inline: auto; }
.kopf--schlicht.kopf--anmelden .kopf__titel { padding-bottom: clamp(28px, calc(20px + 1.6vw), 44px); } /* engerer Abstand zum Formular (21.10.2026) */
.anmelden__neu { margin-top: 24px; font-size: 15px; line-height: 24px; color: var(--stein); }
.anmelden__recht { margin-top: 28px; }
.formular { background: var(--papier); padding: 56px 56px 48px; }
.feld + .feld { margin-top: 32px; }
/* Gleicher Abstand auch vor und nach einer zweispaltigen Zeile (z. B. Vorname | Nachname, dann E-Mail; 21.10.2026) */
.feld-reihe + .feld, .feld + .feld-reihe, .feld-reihe + .feld-reihe { margin-top: 32px; }
.feld__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.feld__kopf label {
  font-family: var(--font-titel);
  font-weight: 400;
  font-size: clamp(17px, calc(16.3px + 0.1878vw), 19px);
  line-height: 26px;
  letter-spacing: 0.02em;
  color: var(--tinte);
  cursor: pointer;
}
.feld__pflicht { color: var(--stein); }
.feld__nr { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--stein); font-variant-numeric: tabular-nums; }
.feld__eingabe { position: relative; }
.feld__eingabe::before, .feld__eingabe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.feld__eingabe::before { background: var(--kies); }
.feld__eingabe::after {
  background: var(--tinte);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dauer-smooth) var(--ease-smooth), background-color 200ms ease;
}
.feld__eingabe:focus-within::after { transform: scaleX(1); transform-origin: left; }
.feld input, .feld textarea {
  display: block;
  width: 100%;
  padding: 10px 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  font-size: 16px;
  line-height: 26px;
  color: var(--tinte);
  -webkit-appearance: none;
  appearance: none;
}
.feld textarea { resize: none; min-height: 104px; field-sizing: content; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--stein); opacity: 0.55; }
.feld input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--papier) inset; -webkit-text-fill-color: var(--tinte); }
.feld.is-fehler .feld__eingabe::after { background: var(--fehler); transform: scaleX(1); }
.feld__fehler { display: none; margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--fehler); }
.feld.is-fehler .feld__fehler { display: block; }

.checkbox { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 36px; font-size: 14px; line-height: 22px; color: var(--stein); cursor: pointer; }
.checkbox input {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 2px 0 0;
  background: var(--weiss) no-repeat center / 14px;
  border: 1px solid var(--kies);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.checkbox input:hover { border-color: var(--stein); }
.checkbox input:checked {
  background-color: var(--primaer);
  border-color: var(--primaer);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 7L9.5 17L4.5 12'/%3E%3C/svg%3E");
}
.checkbox input:disabled { opacity: 0.6; cursor: default; }
.checkbox.is-fehler input { border-color: var(--fehler); }
.formular__fuss { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; }
.split .formular__fuss .btn { margin-top: 0; }
.feld__pflicht { margin-left: 2px; }
.formular__hinweis { font-size: 14px; line-height: 22px; color: var(--stein); }
.formular__erfolg { display: none; }
.formular.is-gesendet form { display: none; }
.formular.is-gesendet .formular__erfolg { display: block; animation: einblenden 250ms var(--ease-out); }
.formular__erfolg p { margin-top: 16px; color: var(--stein); }
@media (max-width: 767px) {
  .formular { padding: 32px 20px 28px; }
  .feld + .feld, .feld-reihe + .feld, .feld + .feld-reihe, .feld-reihe + .feld-reihe { margin-top: 28px; }
  .formular__fuss { flex-direction: column; align-items: stretch; gap: 16px; }
  .formular__fuss .btn { width: 100%; }
}

/* ---------- Text-Bild (T) ---------- */
.textbild { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 584fr); column-gap: 96px; align-items: center; }
.textbild__bild { width: 100%; aspect-ratio: 600 / 760; object-fit: cover; }
.textbild__text > * + * { margin-top: 24px; }
.textbild__text h2 { margin-bottom: 16px; }
.textbild__text p { color: var(--stein); }
.textbild__text .btn, .textbild__text .pfeil-link { margin-top: 40px; }
.textbild__text p.textbild__einstieg { color: var(--tinte); }
.textbild--quer .textbild__bild { aspect-ratio: 600 / 420; }
@media (max-width: 899px) {
  .textbild { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .textbild__bild { aspect-ratio: 335 / 420; }
  .textbild--quer .textbild__bild { aspect-ratio: 335 / 235; }
}

/* ---------- Projekte: Galerie (B7) ---------- */
.galerie { display: flex; gap: 24px; align-items: flex-start; }
.galerie__spalte { flex: 1; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.galerie__bild {
  display: block; width: 100%; padding: 0; overflow: hidden; background: var(--papier);
  -webkit-tap-highlight-color: transparent;
}
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out), opacity 300ms ease; }
.galerie__bild.is-neu img { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .galerie__bild:hover img { transform: scale(1.02); } }
/* Galerie-Abschluss: Endlos-Scrollen, zentrierter Status mit Fortschrittslinie */
.mehr-laden { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 64px; }
.mehr-laden__status { font-size: 14px; line-height: 22px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.mehr-laden__linie { position: relative; width: 200px; height: 2px; }
.mehr-laden__linie::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: var(--kies); }
.mehr-laden__linie span { position: absolute; inset: 0; background: var(--tinte); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
@media (max-width: 767px) {
  .galerie, .galerie__spalte { gap: 12px; }
  .mehr-laden { margin-top: 32px; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--weiss);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.lightbox.is-offen { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
.lightbox__kopf { display: flex; align-items: center; justify-content: space-between; padding: 24px var(--rahmen); font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; }
/* Bühne mit fester Höhe (Grid-Zeile), Bild passt sich ein. Pfeile sind an der Bühne
   verankert und bleiben bei Hoch- und Querformat exakt an derselben Stelle. */
.lightbox__buehne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 0 calc(var(--rahmen) + 48px + 32px) 48px;
}
.lightbox__buehne > .pfeil-btn { position: absolute; top: calc((100% - 48px) / 2 - 24px); }
.lightbox__buehne > [data-lb-zurueck] { left: var(--rahmen); }
.lightbox__buehne > [data-lb-weiter] { right: var(--rahmen); }
.lightbox__bild { display: block; max-width: min(1020px, 100%); max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity 180ms ease; }
.lightbox__bild.is-laden { opacity: 0; }
.lightbox__mobil-pfeile { display: none; }
@media (max-width: 767px) {
  .lightbox__buehne { padding: 0 var(--rahmen); }
  .lightbox__buehne > .pfeil-btn { display: none; }
  .lightbox__mobil-pfeile { display: flex; justify-content: center; gap: 16px; padding: 32px 0 48px; }

}

/* ---------- Langtext (LT): Landingpages + Rechtstexte ---------- */
.langtext { max-width: 720px; margin-inline: auto; }
.langtext > section + section, .langtext > figure + section, .langtext > section + figure { margin-top: 56px; }
.langtext h2.t-h3 { margin-bottom: 24px; }
.langtext h3.t-h4 { margin: 32px 0 12px; }
.langtext section > :first-child { margin-top: 0; }
.langtext p, .langtext li { color: var(--stein); }
.langtext p + p, .langtext p + ul, .langtext ul + p { margin-top: 20px; }
.langtext ul { padding-left: 1.2em; list-style: disc; }
.langtext ul li + li { margin-top: 8px; }
.langtext a { overflow-wrap: anywhere; }
.langtext strong { font-weight: 500; color: var(--tinte); }
.langtext figure img { width: 100%; aspect-ratio: 720 / 480; object-fit: cover; }
.langtext .t-label { display: block; margin: 24px 0 8px; color: var(--stein); }
.langtext--recht p, .langtext--recht li { font-size: 16px; line-height: 27px; }
.langtext__stand { margin-top: 64px; font-size: 14px; line-height: 22px; color: var(--stein); }

/* Cookie-Tabelle */
.cookie-tabelle { width: 100%; margin-top: 12px; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 22px; }
.cookie-tabelle th:nth-child(1) { width: 34%; }
.cookie-tabelle th:nth-child(2) { width: 20%; }
.cookie-tabelle th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stein); padding: 0 16px 12px 0; }
.cookie-tabelle td { padding: 12px 16px 12px 0; border-top: 1px solid var(--kies); color: var(--stein); vertical-align: top; overflow-wrap: anywhere; }
.cookie-tabelle td:first-child { color: var(--tinte); }
@media (max-width: 599px) {
  .cookie-tabelle thead { display: none; }
  .cookie-tabelle tr { display: block; padding-block: 12px; border-top: 1px solid var(--kies); }
  .cookie-tabelle td { display: block; padding: 2px 0; border: 0; }
}

/* ---------- Footer (G5) ---------- */
.footer { background: var(--nachtgruen); color: rgba(245, 243, 237, 0.85); padding: 72px 0 96px; }
.footer__oben { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 72px; }
.footer__logo { display: block; width: 210px; height: 64px; }
.footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.footer__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.footer__label { margin-bottom: 14px; color: rgba(245, 243, 237, 0.55); }
.footer address, .footer__liste { font-size: 15px; line-height: 24px; }
.footer__liste li + li { margin-top: 8px; }
.footer__liste a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 100% 100%;
  padding-bottom: 2px;
  transition: background-size var(--dauer-smooth) var(--ease-smooth), color 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer__liste a:hover { color: var(--papier); background-size: 100% 1px; background-position: 0% 100%; }
}
.footer address { font-style: normal; }
.footer__social { display: flex; gap: 12px; margin-top: 16px; }
.footer__social a { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px; transition: color 150ms ease; }
.footer__social a { transition: color 300ms ease, transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover { color: var(--papier); } }
@media (max-width: 899px) {
  .footer__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .footer__spalte--besuchen, .footer__spalte--recht { grid-column: 1 / -1; }
  .footer__logo { width: 168px; height: 52px; }
  .footer__oben { margin-bottom: 48px; }
}

/* ---------- Cookie-Banner (G7) ---------- */
.cookie {
  position: fixed;
  z-index: 70;
  left: 32px;
  bottom: 32px;
  width: 440px;
  max-width: calc(100vw - 2 * var(--rahmen));
  padding: 28px;
  background: var(--weiss);
  box-shadow: 0 12px 40px rgba(20, 33, 26, 0.12);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s linear 250ms;
}
.cookie.is-sichtbar { opacity: 1; transform: none; visibility: visible; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s; }
.cookie p { margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--stein); }
.cookie__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.cookie__knoepfe .btn { padding-inline: 12px; font-size: 15px; }
.cookie__fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.cookie__fuss > a:last-child { font-size: 13px; line-height: 16px; }
.cookie__einstellungen { display: none; }
.cookie.zeigt-einstellungen .cookie__start { display: none; }
.cookie.zeigt-einstellungen .cookie__einstellungen { display: block; }
.cookie__kategorien { margin-top: 20px; }
.cookie__kategorien > div { padding-block: 16px; }
.cookie__kategorien > div + div { border-top: 1px solid var(--kies); }
.cookie__kategorien > div:first-child { padding-top: 0; }
.cookie__kategorien .checkbox { margin-top: 0; color: var(--tinte); }
.cookie__kategorien p { margin-top: 6px; padding-left: 30px; }
@media (max-width: 767px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; max-width: none; padding: 24px var(--rahmen) 28px; }
  .cookie__knoepfe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Prototyp-Hinweis (nur Prototyp) ---------- */
.proto-hinweis {
  position: fixed; z-index: 95; left: 50%; bottom: 24px;
  padding: 12px 20px; background: var(--nachtgruen); color: var(--papier);
  font-size: 14px; line-height: 22px;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.proto-hinweis.is-sichtbar { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Ergänzungen: Rhythmus & Details ---------- */
/* Alle Sektionen weiß: zwischen zwei Sektionen nur einmal 160 px Abstand */
.sektion + .sektion { padding-top: 0; }
/* Nach dem Seitenkopf mit Bildkomposition (hat unten bereits Luft) */
.kopf:not(.kopf--schlicht) + .sektion { padding-top: calc(var(--sektion-y) * 0.65); }
/* Schlichter Seitenkopf: nur Headline (+ Text), danach direkt die nächste Sektion */
.kopf--schlicht .kopf__titel { padding-bottom: clamp(48px, calc(30px + 4.8vw), 96px); }
.kopf--schlicht + .sektion { padding-top: 0; }
/* Rechts- und Textseiten: Headline linksbündig auf der Fließtextspalte (720 px) */
.kopf--text .kopf__titel { max-width: 720px; text-align: left; }
.kopf--text .kopf__titel h1 { text-wrap: pretty; }
/* Seiten ohne Seitenkopf (Kontakt, Jobs): erste Sektion unter dem fixierten Header */
main > .sektion:first-child { padding-top: calc(var(--header-h) + clamp(56px, calc(41px + 4vw), 96px)); }

/* Teaser-Karten: Links auf gleicher Höhe */
.karte { display: flex; flex-direction: column; }
.karte__flaeche { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.karte__flaeche .pfeil-link { margin-top: auto; padding-top: 24px; }

/* Kontakt: Formular steht mobil nach den Kontaktdaten */
@media (max-width: 899px) {
  .split__rechts--oben { order: 1; margin: 48px 0 0; }
}

.nur-desktop { }
@media (max-width: 767px) { .nur-desktop { display: none !important; } }

/* ---------- Nur Prototyp: Vergleichsseite Button-Hover ---------- */
.varianten { display: grid; gap: 96px; }
.variante { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; align-items: center; }
.variante__text p { margin-top: 12px; color: var(--stein); }
.variante__buehne { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.variante__hell { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 40px; background: var(--papier); }
.variante__hell--links { gap: 24px; }
.variante__hell .mehr-laden { margin-top: 0; }
.variante__bild { position: relative; display: grid; place-items: center; min-height: 240px; overflow: hidden; }
.variante__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .variante { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .variante__buehne { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   SHOP (19.10.2026) – Aufbau nach Figma S1–S8, Optik nach dem Prototyp:
   weißer Grund, Karten und Flächen in Papier, Felder im Zeilenstil,
   runde Steuer-Buttons, Hover-Kurve wie überall.
   ========================================================================== */
.sektion--shop { padding-block: clamp(64px, calc(46px + 4.8vw), 120px); }
.sektion--shop + .sektion--shop { padding-top: 0; }
.sektion--seitenstart { padding-top: calc(var(--header-h) + clamp(40px, calc(28px + 3.2vw), 72px)); }
.shop-kopf { margin-bottom: clamp(28px, calc(20px + 2vw), 48px); }
.preis { font-size: 20px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.preis-xl { font-size: clamp(24px, calc(22.6px + 0.38vw), 28px); line-height: 36px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Lieferstatus (A4-Ausnahme): eckiges Feld */
.status { display: inline-block; align-self: flex-start; padding: 2px 8px; background: var(--keim); color: var(--primaer); font-size: 13px; line-height: 20px; font-weight: 500; }
.status--spaeter { background: var(--weiss); color: var(--stein); }

/* Warenkorb-Icon im Header mit Anzahl (nur Ziffer, kein Badge) */
.warenkorb-btn { position: relative; width: auto; min-width: 32px; grid-auto-flow: column; gap: 2px; }
.warenkorb-btn__anzahl { font-size: 13px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.warenkorb-btn__anzahl:empty { display: none; }

/* Hero der Shop-Übersicht: wie die Startseite, niedriger */
.hero--shop { height: 680px; min-height: 0; max-height: none; }
.hero--shop .hero__bild { object-position: 70% 60%; }
.hero--shop .hero__inhalt { bottom: clamp(56px, calc(40px + 4vw), 96px); }
/* Mehr Kontrast für die Headline auf dem hellen Himmel/Sprühnebel */
.hero--shop::after {
  background:
    linear-gradient(180deg, rgba(20, 33, 26, 0.45) 0%, rgba(20, 33, 26, 0.1) 30%, rgba(20, 33, 26, 0.25) 55%, rgba(20, 33, 26, 0.62) 100%),
    radial-gradient(ellipse 55% 45% at 50% 72%, rgba(20, 33, 26, 0.35), rgba(20, 33, 26, 0));
}
.hero--shop h1 { text-shadow: 0 2px 24px rgba(20, 33, 26, 0.35); }
@media (max-width: 767px) { .hero--shop { height: 600px; } }

/* ---------- Produktkarte B (F11b): Papier auf Weiß ---------- */
.produktkarte { display: flex; flex-direction: column; background: var(--papier); min-width: 0; }
.produktkarte__bild { display: block; aspect-ratio: 1; overflow: hidden; }
.produktkarte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-smooth); }
.produktkarte__inhalt { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.karussell__spur--produkte .produktkarte__inhalt { padding: 16px 16px 16px; }
.produktkarte__name { font-family: var(--font-text); font-size: 15px; line-height: 22px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.produktkarte__preis { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 10px; }
.produktkarte__ust { font-size: 13px; line-height: 20px; color: var(--stein); }
.produktkarte__cta { margin-top: auto; padding-top: 20px; }
@media (hover: hover) and (pointer: fine) {
  .produktkarte:hover .produktkarte__bild img { transform: scale(1.04); }
}
@media (max-width: 767px) {
  .produktkarte__inhalt { padding: 12px 12px 12px; }
  /* Lange Namen („CV IG-Anschlussverschraubung“) mobil trennen statt abschneiden; Chrome trennt das letzte Wort
     erst in der zweiten Zeile, daher drei Zeilen */
  .produktkarte__name { font-size: 14px; line-height: 20px; -webkit-line-clamp: 3; -webkit-hyphens: auto; hyphens: auto; }
  .produktkarte__preis { margin: 6px 0 8px; }
  .produktkarte__preis .preis { font-size: 16px; line-height: 24px; }
  .produktkarte__ust { display: none; }
  .produktkarte__cta { padding-top: 12px; }
  .produktkarte__cta .btn { min-height: 44px; padding: 10px 6px; font-size: 13px; letter-spacing: 0; }
  .status { font-size: 12px; line-height: 18px; }
}

/* Produkt-Karussell (Beliebte / Ähnliche Produkte): 4 sichtbar */
/* 5 Karten ab 1280 px Breite, darunter 4, mobil 2 angeschnitten */
.karussell__spur--produkte > .produktkarte { width: calc((min(100vw - 2 * var(--rahmen), var(--inhalt)) - 96px) / 5); }
@media (max-width: 1279px) { .karussell__spur--produkte > .produktkarte { width: calc((100vw - 2 * var(--rahmen) - 72px) / 4); } }
@media (max-width: 899px) { .karussell__spur--produkte > .produktkarte { width: clamp(160px, 44vw, 280px); } }

/* ---------- Kategorie-Kacheln (Shop-Übersicht) ---------- */
.shop-alle { display: flex; justify-content: center; margin-top: clamp(40px, calc(28px + 3.2vw), 64px); }
.alle-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: clamp(40px, calc(28px + 3.2vw), 64px); }
.kategorie-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.kategorie-kachel { display: block; color: var(--tinte); -webkit-tap-highlight-color: transparent; }
.kategorie-kachel__bild { display: block; aspect-ratio: 302 / 240; overflow: hidden; background: var(--papier); }
.kategorie-kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-smooth), filter 600ms ease; }
.kategorie-kachel__name { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 17px; line-height: 24px; font-weight: 500; }
.kategorie-kachel__text { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; padding-bottom: 2px; transition: background-size var(--dauer-smooth) var(--ease-smooth); }
@media (hover: hover) and (pointer: fine) {
  .kategorie-kachel:hover .kategorie-kachel__bild img { transform: scale(1.04); filter: brightness(0.92); }
  .kategorie-kachel:hover .kategorie-kachel__text { background-size: 100% 1px; }
  .kategorie-kachel:hover .pfeil-link__kreis { color: var(--weiss); }
  .kategorie-kachel:hover .pfeil-link__kreis::before { transform: scale(1); }
}
@media (max-width: 899px) {
  .kategorie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .kategorie-kachel__name { font-size: 14px; line-height: 20px; margin-top: 10px; }
  .kategorie-kachel__name .pfeil-link__kreis { width: 24px; height: 24px; }
}

/* ---------- Kategorieseite (F12) ---------- */
.kat-hero { position: relative; height: clamp(440px, calc(380px + 16vw), 620px); background: var(--nachtgruen); }
.kat-hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.kat-hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; background: linear-gradient(180deg, rgba(20, 33, 26, 0.38), rgba(20, 33, 26, 0)); pointer-events: none; }
.kat-hero__wrap { position: absolute; inset: auto 0 -48px 0; z-index: 1; }
.kat-hero__flaeche { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 56px 0 48px; background: var(--weiss); }
/* Leistungs-Einzelseiten: Kopfbilder oft hell (Rasen, Himmel) → kräftigerer Verlauf unter Logo und Navigation */
.kat-hero--leistung::after { height: 220px; background: linear-gradient(180deg, rgba(20, 33, 26, 0.55), rgba(20, 33, 26, 0.18) 55%, rgba(20, 33, 26, 0)); }
.pfeil-link--zurueck { flex-direction: row; }
@media (max-width: 767px) {
  .kat-hero__wrap { padding-inline: 0; }
  .kat-hero__flaeche { padding: 24px var(--rahmen) 0; max-width: calc(100% - 40px); }
}
.sektion--kategorie, .kat-hero + .sektion { padding-top: calc(48px + clamp(40px, calc(28px + 3.2vw), 64px)); }
/* Mehr Luft zwischen Kopfbild und erster Sektion als im Shop (Wunsch 20.10.2026) */
.kat-hero--leistung + .sektion { padding-top: calc(48px + var(--sektion-y) * 0.75); }
.werkzeugzeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.werkzeugzeile__anzahl { font-size: 14px; line-height: 22px; color: var(--stein); font-variant-numeric: tabular-nums; }
.werkzeugzeile__rechts { display: flex; align-items: center; gap: 12px; }
.suchfeld { display: flex; align-items: center; gap: 10px; width: 320px; height: 52px; padding: 0 16px; background: var(--papier); color: var(--stein); cursor: text; transition: box-shadow 200ms ease; }
.suchfeld .icon { width: 20px; height: 20px; }
.suchfeld input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--tinte); -webkit-appearance: none; appearance: none; }
.suchfeld input::placeholder { color: var(--stein); opacity: 0.75; }
.suchfeld:focus-within { box-shadow: inset 0 -1px 0 var(--tinte); }
.pfeil-btn--gross { width: 52px; height: 52px; }
.pfeil-btn--gross > .icon { width: 20px; height: 20px; }
.filter-btn__anzahl { position: absolute; top: 4px; right: 4px; font-size: 11px; line-height: 14px; font-weight: 500; }
.filter-btn__anzahl:empty { display: none; }
@media (max-width: 767px) {
  .werkzeugzeile { flex-direction: column-reverse; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  .suchfeld { flex: 1; width: auto; }
}
.produkt-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1279px) { .produkt-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.produktkarte.is-versteckt { display: none; }
@media (max-width: 1023px) { .produkt-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .produkt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Bildband im Raster (F16) */
.shop-banner { grid-column: 1 / -1; position: relative; margin: 24px 0 96px; }
.shop-banner__bild { width: 100%; aspect-ratio: 1280 / 360; object-fit: cover; object-position: 50% 40%; }
.shop-banner__flaeche { position: absolute; left: 0; bottom: -72px; width: min(520px, 46%); padding: 32px 32px 0 0; background: var(--weiss); }
.shop-banner__flaeche p { margin: 16px 0 24px; color: var(--stein); }
@media (max-width: 767px) {
  .shop-banner { margin: 12px 0 0; }
  .shop-banner__bild { aspect-ratio: 335 / 220; }
  .shop-banner__flaeche { position: relative; bottom: auto; width: 88%; margin-top: -48px; padding: 20px 20px 0 0; }
}
.leer-hinweis { padding: 48px 0; }
.leer-hinweis p { margin: 12px 0 24px; color: var(--stein); }
.leer-hinweis--seite { padding-top: 0; }

/* ---------- Drawer (Filter, Mini-Warenkorb, Größenhilfe) ---------- */
.drawer { position: fixed; inset: 0; z-index: 85; visibility: hidden; transition: visibility 0s linear 450ms; }
.drawer.is-offen { visibility: visible; transition: visibility 0s; }
.drawer__abdunklung { position: absolute; inset: 0; background: rgba(20, 33, 26, 0.4); opacity: 0; transition: opacity 350ms ease; }
.drawer.is-offen .drawer__abdunklung { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(480px, 100%);
  background: var(--weiss);
  transform: translateX(100%);
  transition: transform 450ms var(--ease-drawer);
}
.drawer.is-offen .drawer__panel { transform: none; }
.drawer__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 32px; flex: none; }
.drawer__anzahl { font-family: var(--font-text); font-size: 14px; color: var(--stein); letter-spacing: 0; }
.drawer__inhalt { flex: 1; overflow-y: auto; padding: 8px 32px 32px; overscroll-behavior: contain; }
.drawer__fuss { flex: none; padding: 24px 32px 32px; background: var(--weiss); box-shadow: 0 -1px 0 var(--kies); }
.drawer__fuss--filter { display: flex; gap: 12px; }
.drawer__fuss--filter .btn { flex: 1; }
.drawer__hinweis { margin: 2px 0 20px; text-align: right; font-size: 13px; line-height: 20px; color: var(--stein); }
.drawer__link { display: flex; justify-content: center; margin-top: 16px; }
.summe-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.drawer__leer { padding-top: 64px; text-align: center; }
.drawer__leer p { margin: 12px auto 24px; max-width: 320px; color: var(--stein); }
@media (max-width: 767px) {
  .drawer__kopf { padding: 16px var(--rahmen); }
  .drawer__inhalt { padding: 4px var(--rahmen) 24px; }
  .drawer__fuss { padding: 20px var(--rahmen) 24px; }
}

/* Filter-Chips (F15): gefüllt, aktiv Waldgrün */
.filter-gruppe { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.filter-gruppe__titel { margin-bottom: 12px; padding: 0; font-size: 15px; line-height: 20px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 11px 16px; background: var(--papier); font-size: 14px; line-height: 22px; color: var(--tinte); transition: background-color 300ms var(--ease-smooth), color 300ms var(--ease-smooth); -webkit-tap-highlight-color: transparent; }
.chip:hover { background: var(--kies); }
.chip[aria-pressed="true"] { background: var(--primaer); color: var(--weiss); }

/* Versand-Fortschritt (Linie wie L1) */
.versandfortschritt { margin-bottom: 24px; }
.versandfortschritt p { font-size: 14px; line-height: 22px; }
.versandfortschritt__linie { position: relative; height: 2px; margin-top: 10px; }
.versandfortschritt__linie::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: var(--kies); }
.versandfortschritt__linie span { position: absolute; inset: 0; background: var(--tinte); transform-origin: left; transition: transform 600ms var(--ease-smooth); }
.versandfortschritt:empty { display: none; }

/* Artikel im Mini-Warenkorb: Papier-Karten, keine Linien */
.mini-artikel { display: grid; gap: 12px; }
.mini-artikel li, .wk-artikel li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 16px; background: var(--papier); }
.artikel__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.artikel__text { display: flex; flex-direction: column; min-width: 0; }
.artikel__name { font-size: 15px; line-height: 22px; font-weight: 500; }
.artikel__name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.artikel__variante { font-size: 13px; line-height: 20px; color: var(--stein); }
.artikel__unten { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; }
.artikel__preis { font-size: 16px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.artikel__entfernen { width: 32px; height: 32px; align-self: start; }
.artikel__entfernen > .icon { width: 14px; height: 14px; }
@media (max-width: 767px) {
  .mini-artikel li, .wk-artikel li { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding: 12px; }
  .mini-artikel .stepper button { width: 30px; }
  .mini-artikel .stepper output { width: 26px; }
}

/* Mengenwahl */
.stepper { display: inline-flex; align-items: center; height: 40px; background: var(--weiss); }
.stepper button { display: grid; place-items: center; width: 36px; height: 100%; color: var(--tinte); transition: background-color 300ms ease; }
.stepper button:hover { background: rgba(28, 32, 27, 0.07); }
.stepper button:active .icon { transform: scale(0.9); }
.stepper button .icon { transition: transform 160ms var(--ease-out); }
.stepper button .icon { width: 18px; height: 18px; }
.stepper input, .stepper output { width: 36px; border: 0; background: transparent; text-align: center; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Produktseite: Kopf (F17) ---------- */
.wrap--schmal { max-width: calc(1280px + 2 * var(--rahmen)); }
.sektion--produkt { padding: calc(var(--header-h) + clamp(24px, calc(10px + 3.6vw), 48px)) 0 clamp(64px, calc(46px + 4.8vw), 120px); }
.produkt-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, calc(4px + 5vw), 96px); align-items: start; }
/* Galerie (19.10.2026): Vorschaubilder senkrecht links, Bilder in einer Spur (weicher Wechsel);
   mobil wischen, darunter Zähler und Fortschrittslinie wie im Leistungs-Karussell */
.produkt-galerie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.produkt-galerie--mehrere { grid-template-columns: 80px minmax(0, 1fr); }
.galerie-thumbs { display: flex; flex-direction: column; gap: 12px; }
.galerie-thumbs:empty { display: none; }
.galerie-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; opacity: 0.55; transition: opacity 400ms ease; }
.galerie-thumb img { width: 100%; height: 100%; object-fit: cover; }
.galerie-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--tinte); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer-smooth) var(--ease-smooth); }
.galerie-thumb:hover, .galerie-thumb.is-aktiv { opacity: 1; }
.galerie-thumb.is-aktiv::after { transform: scaleX(1); }
.galerie-haupt { aspect-ratio: 1; overflow: hidden; background: var(--papier); }
.galerie-spur { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galerie-spur::-webkit-scrollbar { display: none; }
.galerie-folie { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.galerie-folie img { width: 100%; height: 100%; object-fit: cover; }
.galerie-fuss { display: none; }
@media (max-width: 899px) {
  .produkt-galerie--mehrere { grid-template-columns: minmax(0, 1fr); }
  .galerie-thumbs { display: none; }
  .galerie-fuss { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
  .galerie-fuss .karussell__zaehler { margin: 0; }
  .galerie-fortschritt { flex: 1; margin-top: 0; }
}
.kauf { display: flex; flex-direction: column; align-items: flex-start; padding-top: 8px; }
.kauf h1 { margin-bottom: 8px; }
/* Marke und Artikelnummer der gewählten Variante (wechselt mit der Auswahl) */
.kauf__artnr { margin-bottom: 16px; font-size: 14px; line-height: 22px; color: var(--stein); font-variant-numeric: tabular-nums; }
.kauf__preis { margin-top: 24px; }
.kauf__ust, .kauf__einheit { font-size: 14px; line-height: 22px; color: var(--stein); }
.kauf__ust .text-link { color: inherit; }
.kauf__kurz { margin: 24px 0 20px; color: var(--stein); max-width: 560px; }
.kauf__form { width: 100%; margin-top: 36px; }
.optionen { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.optionen__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.optionen__kopf legend { float: left; padding: 0; }
.optionen__hilfe { font-size: 14px; line-height: 22px; color: var(--tinte); }
.optionen__liste { display: grid; gap: 8px; }
.optionen__liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.optionen__liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* viele kurze Varianten (z. B. Rohr × Gewinde): vier Spalten; lange Bezeichnungen: zwei Spalten, linksbündig */
.optionen__liste--viele { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.optionen__liste--lang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.optionen__liste--lang .option span { place-items: center start; height: auto; min-height: 52px; padding: 14px 16px; text-align: left; }
@media (max-width: 599px) {
  .optionen__liste--viele { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .optionen__liste--mittel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .optionen__liste--lang { grid-template-columns: minmax(0, 1fr); }
}
.option { position: relative; cursor: pointer; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option span { display: grid; place-items: center; height: 52px; padding: 0 12px; background: var(--papier); font-size: 15px; line-height: 20px; font-weight: 500; text-align: center; transition: background-color 300ms var(--ease-smooth), color 300ms var(--ease-smooth); }
.option:hover span { background: var(--kies); }
.option input:checked + span { background: var(--primaer); color: var(--weiss); }
.option input:focus-visible + span { outline: 2px solid var(--primaer); outline-offset: 3px; }
.kauf__menge-zeile { display: flex; align-items: flex-end; gap: 12px; }
.menge-feld { display: flex; flex-direction: column; gap: 12px; }
.menge-feld .stepper { height: 52px; background: var(--papier); }
.menge-feld .stepper button { width: 48px; }
.menge-feld .stepper input { width: 40px; }
.kauf__btn { flex: 1; }
.kauf__liefer { margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--stein); }
@media (max-width: 899px) {
  .produkt-kopf { grid-template-columns: minmax(0, 1fr); }
  .galerie-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

/* ---------- Produktseite: Details (F18) ---------- */
.reiter { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--kies); margin-bottom: 48px; }
.reiter::-webkit-scrollbar { display: none; }
.reiter__tab { position: relative; flex: none; padding: 0 0 14px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--stein); transition: color 300ms ease; }
.reiter__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tinte); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer-smooth) var(--ease-smooth); }
.reiter__tab:hover { color: var(--tinte); }
.reiter__tab[aria-selected="true"] { color: var(--tinte); }
.reiter__tab[aria-selected="true"]::after { transform: scaleX(1); }
.reiter__panel[hidden] { display: none; }
.reiter__panel:not([hidden]) { animation: einblenden 300ms var(--ease-out); }
.details-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, calc(4px + 5vw), 96px); align-items: start; }
.details__einleitung { color: var(--tinte); }
.details__text { margin-top: 16px; color: var(--stein); }
.details__titel { margin-bottom: 8px; font-size: 15px; line-height: 20px; font-weight: 500; }
.linienliste > div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--kies); font-size: 14px; line-height: 22px; }
.linienliste dt { color: var(--stein); }
.linienliste dd { text-align: right; color: var(--tinte); }
@media (max-width: 899px) { .details-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .reiter { margin-bottom: 32px; gap: 24px; } }

/* Größenhilfe */
.groessenhilfe__schritte { margin: 32px 0; }
.groessenhilfe__schritte > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
.groessenhilfe__fuss { color: var(--stein); }

/* ---------- Warenkorb (F21) ---------- */
.warenkorb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, calc(4px + 5vw), 64px); align-items: start; }
.wk-artikel { display: grid; gap: 12px; }
.wk-artikel li { grid-template-columns: 120px minmax(0, 1fr) auto auto auto; align-items: center; gap: 24px; padding: 20px; }
.wk-artikel .artikel__name { font-size: 18px; line-height: 26px; }
.wk-artikel .artikel__variante { font-size: 14px; line-height: 22px; }
.wk-artikel .stepper { height: 48px; }
.wk-artikel .artikel__preis { min-width: 84px; text-align: right; font-size: 18px; }
.wk-artikel .artikel__entfernen { align-self: center; }
.wk-weiter { margin-top: 32px; }
.zusammenfassung { padding: 32px; background: var(--papier); }
.zusammenfassung .t-h3 { margin-bottom: 20px; }
.zusammenfassung .versandfortschritt { margin-bottom: 20px; }
.summen > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; line-height: 22px; color: var(--stein); }
.summen dd { color: var(--tinte); font-variant-numeric: tabular-nums; }
.summen .summen__gesamt { padding: 16px 0 4px; color: var(--tinte); font-size: 15px; font-weight: 500; }
.zusammenfassung .btn { margin-top: 24px; }
@media (max-width: 1023px) {
  .warenkorb-split { grid-template-columns: minmax(0, 1fr); }
  .wk-artikel li { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px; }
  .wk-artikel .artikel__bild { grid-row: span 2; }
  .wk-artikel .stepper { grid-column: 2; justify-self: start; height: 40px; }
  .wk-artikel .artikel__preis { grid-column: 3; grid-row: 2; font-size: 16px; min-width: 0; }
  .wk-artikel .artikel__entfernen { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
  .wk-artikel .artikel__name { font-size: 15px; line-height: 22px; }
  .zusammenfassung { padding: 24px 20px; }
}

/* ---------- Kasse (F22) ---------- */
.kasse-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, calc(4px + 5vw), 64px); align-items: start; }
.kasse-abschnitte { display: grid; gap: 16px; }
.kasse-abschnitt { padding: 40px; background: var(--papier); }
.kasse-abschnitt > .t-h3 { margin-bottom: 28px; }
.kasse-abschnitt .feld + .feld, .kasse-abschnitt .feld-reihe + .feld, .kasse-abschnitt .feld + .feld-reihe, .kasse-abschnitt .feld-reihe + .feld-reihe { margin-top: 28px; }
.feld-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.feld-reihe > .feld + .feld { margin-top: 0; }
.feld-reihe--plz { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
.feld input[readonly] { color: var(--stein); }
.kasse-hinweis { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--stein); }
.kasse-abschnitt .checkbox { margin-top: 20px; }
.auswahl-liste { display: grid; gap: 8px; }
.auswahl { position: relative; display: block; cursor: pointer; }
.auswahl input { position: absolute; opacity: 0; pointer-events: none; }
.auswahl__flaeche { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; background: var(--weiss); transition: background-color 300ms var(--ease-smooth), color 300ms var(--ease-smooth); }
.auswahl__text { display: flex; flex-direction: column; }
.auswahl__titel { font-size: 15px; line-height: 22px; font-weight: 500; }
.auswahl__unter { font-size: 13px; line-height: 20px; color: var(--stein); transition: color 300ms ease; }
.auswahl__rechts { display: flex; align-items: center; gap: 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.auswahl__haken { width: 20px; height: 20px; opacity: 0; transform: scale(0.8); transition: opacity 250ms ease, transform 400ms var(--ease-smooth); }
.auswahl:hover .auswahl__flaeche { background: var(--kies); }
.auswahl input:checked + .auswahl__flaeche { background: var(--primaer); color: var(--weiss); }
.auswahl input:checked + .auswahl__flaeche .auswahl__unter { color: rgba(255, 255, 255, 0.75); }
.auswahl input:checked + .auswahl__flaeche .auswahl__haken { opacity: 1; transform: none; }
.auswahl input:focus-visible + .auswahl__flaeche { outline: 2px solid var(--primaer); outline-offset: 3px; }
.kartenfelder { padding: 20px 4px 12px; }
/* Abweichende Lieferadresse (Kasse, 20.10.2026): blendet weich ein, eigene Zwischenzeile */
.kasse-andere { margin-top: 28px; }
.kasse-adresse { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--kies); animation: einblenden 250ms var(--ease-out); }
.kasse-adresse > .t-h4 { margin-bottom: 20px; }
.kasse-anmerkung { margin-top: 28px; }
.kasse-anmerkung textarea { min-height: 72px; }
.kartenfelder[hidden] { display: none; }
.zusammenfassung--kasse { position: sticky; top: calc(var(--header-h) + 24px); }
.zusammenfassung__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.zusammenfassung__kopf .t-h3 { margin: 0; }
.kasse-artikel { display: grid; gap: 14px; margin-bottom: 20px; }
.kasse-artikel li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 14px; line-height: 20px; }
.kasse-artikel img { width: 56px; height: 56px; object-fit: cover; }
.kasse-artikel .artikel__name { font-size: 14px; line-height: 20px; }
.kasse-artikel .artikel__preis { font-size: 14px; }
.kasse-recht { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--stein); }
.kasse-mobil { display: none; }
@media (max-width: 1023px) {
  .kasse-split { grid-template-columns: minmax(0, 1fr); }
  .zusammenfassung--kasse { position: static; }
  .zusammenfassung--kasse .kasse-artikel { display: none; }
  .kasse-mobil { display: block; margin-bottom: 16px; background: var(--papier); }
  .kasse-mobil summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 500; }
  .kasse-mobil summary::-webkit-details-marker { display: none; }
  .kasse-mobil summary .kasse-mobil__summe { margin-left: auto; font-variant-numeric: tabular-nums; }
  .kasse-mobil summary .icon { width: 18px; height: 18px; transition: transform 300ms var(--ease-smooth); }
  .kasse-mobil[open] summary .icon { transform: rotate(180deg); }
  .kasse-mobil__inhalt { padding: 0 20px 20px; }
  .kasse-abschnitt { padding: 28px 20px; }
}
@media (max-width: 599px) { .feld-reihe { grid-template-columns: minmax(0, 1fr); gap: 28px; } .feld-reihe--plz { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 16px; } }

/* Bestellbestätigung (Entwurf) */
.bestaetigung { max-width: 760px; }
.bestaetigung .t-body-l { margin-top: 32px; }
.bestaetigung .t-body { margin-top: 16px; color: var(--stein); }
.bestaetigung .btn { margin-top: 40px; }


/* ==========================================================================
   Restliche Seiten (19.10.2026): Versand & Zahlung, AGB, Widerruf, Suche, 404
   ========================================================================== */
/* Listen in Rechtstexten ohne Punkte, als feine Linienliste (A7) */
.langtext ul.liste-linien { padding: 0; list-style: none; margin-top: 16px; }
.langtext ul.liste-linien li { padding: 12px 0; border-bottom: 1px solid var(--kies); margin: 0; }
.langtext ul.liste-linien li:first-child { border-top: 1px solid var(--kies); }
.langtext p + .liste-linien, .langtext .liste-linien + p, .langtext p + .linienliste, .langtext .linienliste + p { margin-top: 20px; }
.linienliste--text > div { font-size: 16px; line-height: 26px; }
.linienliste--text dd { color: var(--tinte); }
.versand-kurz { margin-bottom: 56px; border-top: 1px solid var(--kies); }
.langtext em { font-style: normal; color: var(--stein); }
.langtext > p + section { margin-top: 40px; }
.entwurf-hinweis { margin-bottom: 48px; padding: 16px 20px; background: var(--papier); font-size: 14px; line-height: 22px; color: var(--stein) !important; }

/* Online-Widerruf (§ 13a FAGG) */
.widerruf-funktion { margin-bottom: 64px; padding: 40px; background: var(--papier); }
.widerruf-funktion > p { margin-top: 8px; }
.widerruf-start { margin-top: 28px; }
.formular--widerruf { margin-top: 28px; padding: 0; background: transparent; }
.formular--widerruf .feld + .feld, .formular--widerruf .feld + .feld-reihe, .formular--widerruf .feld-reihe + .feld, .formular--widerruf .feld-reihe + fieldset, .formular--widerruf fieldset + .feld { margin-top: 28px; }
.widerruf-umfang { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.widerruf-umfang__titel { margin-bottom: 12px; padding: 0; font-family: var(--font-titel); font-size: clamp(17px, calc(16.3px + 0.1878vw), 19px); line-height: 26px; letter-spacing: 0.03em; color: var(--tinte); }
.widerruf-umfang + .feld, .widerruf-artikel + .feld { margin-top: 28px; }
.formular--widerruf .formular__erfolg p { color: var(--stein); }
.muster-formular { padding: 32px; background: var(--papier); }
@media (max-width: 767px) {
  .widerruf-funktion { padding: 28px 20px; }
  .muster-formular { padding: 24px 20px; }
}

/* Suche */
.suche-gross { display: flex; align-items: center; gap: 16px; max-width: 760px; padding: 0 0 14px; border-bottom: 1px solid var(--kies); transition: border-color 300ms ease; }
.suche-gross:focus-within { border-color: var(--tinte); }
.suche-gross .icon { width: 24px; height: 24px; color: var(--stein); }
.suche-gross input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-titel); font-weight: 300; letter-spacing: 0.03em; font-size: clamp(22px, calc(19px + 0.9vw), 32px); line-height: 1.3; color: var(--tinte); -webkit-appearance: none; appearance: none; }
.suche-gross input::placeholder { color: var(--stein); opacity: 0.6; }
.suche-gross input::-webkit-search-cancel-button { -webkit-appearance: none; }
.suche-vorschlaege { margin-top: 32px; }
.suche-vorschlaege__titel { margin-bottom: 12px; font-size: 14px; line-height: 22px; color: var(--stein); }
.suche-status { margin-top: 32px; font-size: 14px; line-height: 22px; color: var(--stein); }
.suche-status:empty { display: none; }
.suche-block { margin-top: 48px; }
.suche-block > .t-h3 { margin-bottom: 20px; }
.suche-seiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
@media (max-width: 899px) { .suche-seiten { grid-template-columns: minmax(0, 1fr); } }

/* Fehlerseite */
.fehlerseite .t-body-l { margin-top: 28px; max-width: 560px; color: var(--stein); }
.fehlerseite__aktionen { display: flex; align-items: center; gap: 32px; margin-top: 40px; flex-wrap: wrap; }

/* ---------- Illustrationen (Planungsskizze, freistehend) ----------
   SVG mit Tusche- und Lavur-Ebene, beide maskiert. Ablauf (einmalig beim Hineinscrollen):
   Fadenkreuz wächst aus der Mitte, Hilfskreis wird gezogen, jeder Umriss wird einzeln nachgezeichnet,
   danach blühen Binnenstruktur und Lavur aus der Mitte der Form auf. Weiche Kanten über Unschärfe in der Maske.
   Ohne JS bzw. bei reduzierter Bewegung: fertiger Zustand. Nur „Mit Leidenschaft“ und Zitat. */
.sektion--illu { overflow-x: clip; }
.sektion--illu .split__rechts, .sektion--illu .zitat__bilder, .sektion--illu .mehr-laden { position: relative; }
/* Galerie liegt über der Illustration am Seitenende */
.sektion--illu .galerie { position: relative; z-index: 1; }
/* Fotos liegen über der Illustration */
.sektion--illu .split__rechts > img, .sektion--illu .zitat__bilder > img { position: relative; }

/* Gemeinsamer Maßstab: Breite = Pixelbreite der Ebene × Einheit. Alle Elemente stammen aus demselben Sprite
   und haben denselben Planmaßstab – Grashalme und Punkte sind dadurch überall gleich groß. */
.sektion--illu, .kopf--illu { --illu-einheit: clamp(0.26px, calc(0.1px + 0.0191vw), 0.4px); }
@media (max-width: 767px) { .sektion--illu, .kopf--illu { --illu-einheit: 0.2px; } }
.illu {
  --illu-b: calc(var(--illu-px) * var(--illu-einheit));
  position: absolute;
  width: var(--illu-b);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}
.illu svg { display: block; width: 100%; height: auto; overflow: visible; }
.illu .illu__tusche { opacity: var(--illu-tusche, 0.95); }
.illu .illu__aquarell { opacity: var(--illu-aquarell, 0.85); }

/* Startzustand (setzt JS) */
.illu.ist-bereit:not(.ist-gezeichnet) .m-zug { stroke-dashoffset: var(--l); }
.illu.ist-bereit:not(.ist-gezeichnet) .m-arm--h { transform: scale(0, 1); }
.illu.ist-bereit:not(.ist-gezeichnet) .m-arm--v { transform: scale(1, 0); }
.illu.ist-bereit:not(.ist-gezeichnet) .m-bluete { transform: scale(0.18); opacity: 0; }
.illu.ist-bereit:not(.ist-gezeichnet) .m-patina { transform: scale(0.05); opacity: 0; }
.illu.ist-bereit:not(.ist-gezeichnet) .m-rest { opacity: 0; }
/* Zeichnen: ruhiger Anlauf, langes Auslaufen – wie ein Strich, der ansetzt und ausläuft */
.illu.ist-gezeichnet .m-zug,
.illu.ist-gezeichnet .m-arm {
  transition: stroke-dashoffset var(--t) cubic-bezier(0.5, 0.05, 0.2, 1) calc(var(--illu-verz, 0ms) + var(--d)),
              transform var(--t) cubic-bezier(0.5, 0.05, 0.2, 1) calc(var(--illu-verz, 0ms) + var(--d));
}
/* Aufblühen wie nasse Farbe: schnell angesetzt, sehr weich auslaufend */
.illu.ist-gezeichnet .m-bluete {
  transition: transform var(--t) cubic-bezier(0.25, 0.6, 0.3, 1) calc(var(--illu-verz, 0ms) + var(--d)),
              opacity calc(var(--t) * 0.6) ease-in-out calc(var(--illu-verz, 0ms) + var(--d));
}
/* Patina (Grashalme, Punkte) breitet sich fleckweise aus, als würde die Fläche nachgezeichnet */
.illu.ist-gezeichnet .m-patina {
  transition: transform var(--t) cubic-bezier(0.3, 0.5, 0.25, 1) calc(var(--illu-verz, 0ms) + var(--d)),
              opacity calc(var(--t) * 0.4) ease-out calc(var(--illu-verz, 0ms) + var(--d));
}
.illu.ist-gezeichnet .m-rest { transition: opacity var(--t) ease-in-out calc(var(--illu-verz, 0ms) + var(--d)); }

/* Platzierung Startseite – großzügig, Fotos liegen darüber */
.illu--baumgruppe { top: calc(var(--illu-b) * -0.62); right: calc(var(--illu-b) * -0.12); }
/* Zitat: Steinweg im Rasen läuft von links unten unter dem linken Bild hindurch und hinter das mittlere,
   Pflanzgruppe im Beet rechts oben hinter dem rechten Bild */
.illu--steinweg { top: 43%; left: calc(var(--illu-b) * -0.315); }
.illu--pflanzgruppe { top: calc(20% - var(--illu-b) * 0.45); right: calc(var(--illu-b) * -0.5); }
@media (max-width: 899px) {
  /* mobil: Krone schaut oben rechts hinter dem Foto hervor, ohne über die Headline zu laufen */
  .illu--baumgruppe { top: -50px; right: -70px; }
}
@media (max-width: 767px) {
  .illu--steinweg { top: calc(88% - var(--illu-b) * 0.33); left: calc(var(--illu-b) * -0.42); }
  .illu--pflanzgruppe { top: calc(20% - var(--illu-b) * 0.3); right: calc(var(--illu-b) * -0.36); }
}

/* Unterseiten – je Sektion höchstens zwei Elemente, an Fotos verankert */
/* Leistungen, Seitenkopf: Baum mit Rasen über dem linken Bild */
.illu--leistung-baum { top: calc(var(--illu-b) * -0.2); left: calc(var(--illu-b) * -0.28); }
/* Leistungen, Service: Sträucher und Gräser im Beet an der rechten oberen Bildecke */
.illu--leistung-service { top: calc(var(--illu-b) * -0.5); right: calc(var(--illu-b) * -0.32); }
/* Über uns: Sträucher im Rasen hinter dem Foto, Zitat mit Trittsteinen links und Gräsern rechts */
.illu--ueber-straeucher { top: calc(var(--illu-b) * -0.58); right: calc(var(--illu-b) * -0.18); }
.illu--ueber-trittsteine { top: 52%; left: calc(var(--illu-b) * -0.38); }
.illu--ueber-graeser { top: calc(20% - var(--illu-b) * 0.45); right: calc(var(--illu-b) * -0.5); }
/* Projekte (Test): Sitzplatz am Galerie-Ende, halb hinter den letzten Bildern */
.illu--projekte-sitzplatz { top: calc(var(--illu-b) * -0.36); left: calc(var(--illu-b) * -0.12); }
/* erst wenn alle Projekte geladen sind – sonst würde sie beim Nachladen mitwandern */
.mehr-laden:not(.ist-fertig) .illu { display: none; }
@media (max-width: 899px) {
  .illu--ueber-straeucher { top: -78px; right: -62px; }
}
@media (max-width: 767px) {
  /* mobil gibt es das linke Kopfbild nicht: Baum schaut rechts oben hinter dem großen Bild hervor */
  .illu--leistung-baum { top: -14%; left: auto; right: calc(var(--illu-b) * -0.42); }
  .illu--leistung-service { top: calc(var(--illu-b) * -0.42); right: calc(var(--illu-b) * -0.3); }
  .illu--ueber-trittsteine { top: calc(88% - var(--illu-b) * 0.3); left: calc(var(--illu-b) * -0.3); }
  .illu--ueber-graeser { top: calc(20% - var(--illu-b) * 0.3); right: calc(var(--illu-b) * -0.36); }
  /* mobil unter dem Status, rechts – die Spalten enden unterschiedlich hoch */
  .illu--projekte-sitzplatz { top: 56px; left: auto; right: -36px; }
  .sektion--illu .mehr-laden.ist-fertig { padding-bottom: 130px; }
}

/* ==========================================================================
   Verwaltung (Backend) · nur Gestaltung, 20.10.2026
   Normaler Website-Header, darunter ein Subheader der Verwaltung (Papier-Band). Weiße Seite,
   Karten in Papier wie die Produktkarten, keine Schatten und Rundungen. Charrow für Titel und
   Kennzahlen, Inter für alles Bedienbare, Textlinks wie im Frontend.
   ========================================================================== */
.vw { --linie: #ebe7dc; }

/* Subheader: Navigation links, Abmelden rechts; bleibt beim Scrollen unter dem Header.
   Schrift, Farbe und Unterstreichung wie im Hauptmenü des Headers. */
.vw-sub { position: sticky; top: var(--header-h); z-index: 40; margin-top: var(--header-h); background: var(--papier); color: var(--tinte); }
.vw-sub__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 64px; }
.vw-nav ul { display: flex; gap: 40px; }
.vw-nav a { position: relative; display: block; padding-block: 8px; }
.vw-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--dauer-smooth) var(--ease-smooth);
}
.vw-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .vw-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.vw-sub__rechts { display: flex; align-items: center; flex: none; }

/* Inhalt */
.vw-main { padding: 64px 0 120px; }
.vw-seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 40px; }

/* Kennzahlen und Listen: Papier-Flächen auf Weiß wie die Produktkarten im Shop.
   Die Listen-Headlines stehen über den Boxen. */
.vw-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vw-kennzahl { display: flex; flex-direction: column; gap: 6px; padding: 32px 32px 30px; background: var(--papier); transition: background-color 200ms ease; }
.vw-kennzahl__wert { font-family: var(--font-titel); font-weight: 300; font-size: clamp(34px, calc(27px + 0.9vw), 44px); line-height: 1.15; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-kennzahl__label { font-size: 14px; line-height: 22px; color: var(--stein); }
@media (hover: hover) and (pointer: fine) { .vw-kennzahl:hover { background: #efece4; } }

.vw-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; align-items: start; }
.vw-block__kopf { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
.vw-block__link { white-space: nowrap; }
.vw-karte { background: var(--papier); }
.vw-liste { padding: 6px 0; }
.vw-zeile { position: relative; display: grid; align-items: center; gap: 20px; padding: 20px 32px; }
.vw-liste > .vw-zeile + .vw-zeile::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: var(--sand); transition: opacity 300ms ease; }
.vw-zeile--bestellung { grid-template-columns: minmax(0, 1fr) auto 176px; }
.vw-zeile--anfrage { grid-template-columns: minmax(0, 1fr) 176px; }

/* Hover für alle Listen: Fläche dunkelt leicht nach (Papier → Sand-Hauch). Der Status steht ganz rechts, weicht
   nach links und macht dem Pfeil Platz, der wie bei den Textlinks hereingleitet. Produktbilder zoomen langsam
   wie die Produktkarten im Shop. */
a.vw-zeile { transition: background-color 400ms var(--ease-smooth); }
.vw-zeile__ende { position: relative; display: flex; align-items: center; justify-content: flex-end; justify-self: end; min-width: 0; }
.vw-zeile__ende .vw-status { transition: transform var(--dauer-smooth) var(--ease-smooth); }
.vw-zeile__pfeil { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 16px; height: 16px; margin-top: -8px; color: var(--tinte); opacity: 0; transform: translateX(-10px); transition: opacity 300ms ease, transform var(--dauer-smooth) var(--ease-smooth); }
@media (hover: hover) and (pointer: fine) {
  a.vw-zeile:hover { background-color: #eeebe3; }
  a.vw-zeile:hover .vw-zeile__ende .vw-status { transform: translateX(-32px); }
  a.vw-zeile:hover .vw-zeile__pfeil { opacity: 1; transform: none; transition-delay: 60ms; }
  a.vw-zeile:hover .vw-produkt__bild img { transform: scale(1.06); }
}
a.vw-zeile:focus-visible .vw-zeile__ende .vw-status { transform: translateX(-32px); }
a.vw-zeile:focus-visible .vw-zeile__pfeil { opacity: 1; transform: none; }
a.vw-zeile:focus-visible { outline-offset: -2px; }
.vw-zeile__text b { display: block; font-size: 15px; line-height: 22px; font-weight: 500; transition: color 200ms ease; }
.vw-zeile__text > span { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--stein); }
.vw-zeile__betrag { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-zeile__status { justify-self: end; }

/* Status: getönte Flächen in den Website-Farben */
.vw-status { display: inline-block; padding: 3px 10px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.vw-status--neu, .vw-status--online { background: var(--keim); color: var(--primaer); }
.vw-status--offen, .vw-status--wenig { background: var(--sand); color: var(--tinte); }
.vw-status--versendet { background: var(--weiss); color: var(--stein); }
.vw-status--fertig { background: var(--weiss); color: var(--stein); box-shadow: inset 0 0 0 1px var(--kies); }
.vw-status--storniert { background: rgba(179, 38, 30, 0.08); color: var(--fehler); }

/* ---------- Produkte & Lager (Liste) ---------- */
.vw-rechts { text-align: right; }
.vw-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.vw-werkzeug__suche { width: 360px; flex: none; }
.vw-nur-desktop { display: inline; }
.vw-werkzeug__filter { display: flex; gap: 12px; }
/* Auswahlfelder im Select2-Stil (verwaltung.js baut sie auf dem echten <select> auf).
   Ohne Skript: normales Select in derselben Optik. */
.vw-auswahl, .vw-feld__select { position: relative; display: block; }
.vw-auswahl select, .vw-feld__select select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.vw-auswahl select { height: 52px; padding: 0 44px 0 16px; border: 0; background: var(--papier); font-size: 15px; color: var(--tinte); outline: none; }
.vw-auswahl > .icon, .vw-feld__select > .icon { position: absolute; right: 16px; top: 50%; margin-top: -8px; pointer-events: none; color: var(--stein); }
.vw-feld__select > .icon { right: 0; }
.vw-select__nativ { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.vw-select__knopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; color: var(--tinte); }
.vw-select__wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-select__knopf .icon { flex: none; color: var(--stein); transition: transform 300ms var(--ease-out); }
.vw-select.ist-offen .vw-select__knopf .icon { transform: rotate(180deg); }
.vw-auswahl .vw-select__knopf { height: 52px; padding: 0 16px; background: var(--papier); font-size: 15px; line-height: 20px; transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .vw-auswahl .vw-select__knopf:hover { background: #eeebe3; } }
.vw-auswahl .vw-select__knopf:focus-visible { outline-offset: -2px; }
.vw-feld__select .vw-select__knopf { padding: 8px 0 10px; border-bottom: 1px solid var(--kies); font-size: 15px; line-height: 24px; transition: border-color 200ms ease; }
.vw-feld__select.ist-offen .vw-select__knopf, .vw-feld__select .vw-select__knopf:focus-visible { border-bottom-color: var(--tinte); outline: none; }
.vw-feld__select.ist-platzhalter .vw-select__wert { color: var(--stein); opacity: 0.75; }
.vw-select__panel {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: 340px;
  background: var(--weiss); box-shadow: 0 0 0 1px var(--sand), 0 18px 40px rgba(20, 33, 26, 0.1);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(0.98); transform-origin: top left;
  transition: opacity 160ms ease-out, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.vw-select.ist-offen .vw-select__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.vw-feld__select .vw-select__panel { width: 100%; max-width: none; }
.vw-werkzeug__filter .vw-select:nth-last-child(-n+2) .vw-select__panel { left: auto; right: 0; transform-origin: top right; }
.vw-select .vw-select__suche { display: flex; align-items: center; gap: 8px; height: 40px; margin: 8px 8px 2px; padding: 0 12px; background: var(--papier); color: var(--stein); font-size: 14px; font-weight: 400; cursor: text; }
.vw-select .vw-select__suche input { display: block; flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; font-size: 14px; line-height: 20px; color: var(--tinte); }
.vw-select__liste { max-height: 300px; overflow-y: auto; padding: 6px 0; overscroll-behavior: contain; }
.vw-select__liste [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 16px; font-size: 15px; line-height: 22px; white-space: nowrap; cursor: pointer; }
.vw-select__liste .ist-aktiv { background: var(--papier); }
.vw-select__haken { opacity: 0; color: var(--primaer); }
.vw-select__liste [aria-selected="true"] { font-weight: 500; }
.vw-select__liste [aria-selected="true"] .vw-select__haken { opacity: 1; }
.vw-select__leer { padding: 10px 16px; font-size: 14px; line-height: 22px; color: var(--stein); }

/* Suche: eigenes X statt des Browser-Symbols */
.vw input[type="search"]::-webkit-search-cancel-button, .vw input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.suchfeld__leeren { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: -6px; color: var(--stein); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .suchfeld__leeren:hover { color: var(--tinte); } }

.vw-zeile--produkt { grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1.2fr) 120px 110px 136px; }
.vw-tabelle__zeilen { display: grid; gap: 6px; }
.vw-tabelle__zeilen > .vw-zeile { padding: 14px 24px; background: var(--papier); }
.vw-produkt__bild { width: 56px; height: 56px; background: var(--weiss); overflow: hidden; }
.vw-produkt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-smooth); }
.vw-produkt__kategorie { font-size: 14px; line-height: 20px; color: var(--stein); }
.vw-produkt__preis { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-produkt__bestand { justify-self: end; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-seitenfuss { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; font-size: 14px; line-height: 22px; color: var(--stein); }
.vw-seitenfuss__pfeile { display: flex; gap: 12px; }

/* ---------- Produkt bearbeiten ---------- */
.vw-zurueck { margin-bottom: 20px; }
.vw-seitenkopf__aktionen { display: flex; align-items: center; gap: 32px; flex: none; }
.vw-formular { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vw-formular__haupt, .vw-formular__seite { display: grid; gap: 56px; }
.vw-abschnitt__kopf { margin-bottom: 24px; }
.vw-karte--formular { padding: 28px 32px 32px; }
.vw-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.vw-felder--eins { grid-template-columns: minmax(0, 1fr); }
.vw-feld--voll { grid-column: 1 / -1; }
.vw-feld label { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--stein); }
.vw-feld input, .vw-feld textarea, .vw-feld select, .vw-varianten input, .vw-fakten input {
  display: block; width: 100%; padding: 8px 0 10px; border: 0; border-bottom: 1px solid var(--kies); background: transparent;
  font-size: 15px; line-height: 24px; color: var(--tinte); outline: none; transition: border-color 200ms ease;
}
.vw-feld textarea { resize: vertical; min-height: 96px; }
.vw-feld textarea[rows="7"] { min-height: 184px; }
.vw-feld input:focus, .vw-feld textarea:focus, .vw-feld select:focus, .vw-varianten input:focus, .vw-fakten input:focus { border-bottom-color: var(--tinte); }
.vw-feld ::placeholder, .vw-varianten ::placeholder, .vw-fakten ::placeholder { color: var(--stein); opacity: 0.6; }
/* Pflichtfeld leer (z. B. Sendungsnummer bei „Versendet“): Linie in Fehlerrot, auch im Fokus */
.vw-feld.ist-fehler input, .vw-feld.ist-fehler textarea { border-bottom-color: var(--fehler); }
.vw-feld__select select { padding-right: 28px; }

.vw-varianten__zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 140px; gap: 24px; align-items: center; }
/* Ohne Bestandserfassung entfällt die Spalte „Bestand“ */
.vw-varianten--ohne-bestand .vw-varianten__zeile { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr) 140px; }
.vw-varianten--ohne-bestand .vw-varianten__bestand { display: none; }
.vw-varianten__zeile + .vw-varianten__zeile { margin-top: 6px; }
.vw-varianten__kopf { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--stein); }
.vw-eingabe-einheit { position: relative; display: block; }
.vw-eingabe-einheit input { padding-right: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.vw-eingabe-einheit > span { position: absolute; right: 0; top: 8px; font-size: 14px; line-height: 24px; color: var(--stein); }
.vw-hinzu { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinte); }
.vw-hinzu .icon { color: var(--primaer); }
@media (hover: hover) and (pointer: fine) { .vw-hinzu:hover { color: var(--primaer); } }
.vw-fakten__zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 140px; gap: 24px; align-items: center; }
.vw-fakten__zeile + .vw-fakten__zeile { margin-top: 6px; }

.vw-bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vw-bild { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.vw-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vw-bild figcaption { font-size: 13px; line-height: 20px; color: var(--stein); }
.vw-bild--neu { aspect-ratio: 1; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--kies); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--stein); transition: border-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .vw-bild--neu:hover { border-color: var(--stein); color: var(--tinte); } }
.vw-hinweis { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--stein); }
.vw-checkbox { margin-top: 20px; color: var(--tinte); }
.vw-checkbox--erste { margin-top: 0; }
.vw-loeschen { justify-self: start; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fehler); }
@media (hover: hover) and (pointer: fine) { .vw-loeschen:hover { text-decoration: underline; text-underline-offset: 4px; } }
/* Zeilen und Bilder verschieben und entfernen (Muster V14): Pfeile aus dem Icon-Set, „Entfernen“ rot wie „Produkt löschen“ */
.vw-eintrag__aktionen { display: flex; align-items: center; gap: 2px; flex: none; }
.vw-eintrag__knopf { display: grid; place-items: center; width: 32px; height: 32px; color: var(--stein); transition: color 200ms ease, background-color 200ms ease; }
.vw-eintrag__knopf--hoch .icon { transform: rotate(180deg); }
.vw-eintrag__knopf--links .icon { transform: rotate(90deg); }
.vw-eintrag__knopf--rechts .icon { transform: rotate(-90deg); }
.vw-eintrag__knopf:disabled { opacity: 0.35; cursor: default; }
.vw-eintrag__entfernen { margin-left: 12px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--fehler); }
.vw-eintrag__entfernen:disabled { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .vw-eintrag__knopf:not(:disabled):hover { color: var(--tinte); background: #eeebe3; }
  .vw-eintrag__entfernen:not(:disabled):hover { text-decoration: underline; text-underline-offset: 4px; }
}
.vw-zeile-aktionen { justify-self: end; }
.vw-bild__aktionen { margin: -4px 0 0 -8px; }
.vw-hinzu + .vw-checkbox { margin-top: 24px; }
.vw-feld__zusatz { margin-top: 8px; }
.vw-inhalt__fuss { display: flex; }
.vw-produkt__bestand--leer { color: var(--stein); }

@media (max-width: 1199px) {
  .vw-werkzeug { flex-direction: column; align-items: stretch; }
  .vw-werkzeug__suche { width: 100%; }
  .vw-werkzeug__filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vw-auswahl select { width: 100%; }
  .vw-werkzeug__filter .vw-select:nth-child(odd) .vw-select__panel { left: 0; right: auto; transform-origin: top left; }
  .vw-werkzeug__filter .vw-select:nth-child(even) .vw-select__panel { left: auto; right: 0; transform-origin: top right; }
  .vw-select__panel { max-width: calc(100vw - 2 * var(--rahmen)); }
  .vw-formular { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ---------- Bestellungen ---------- */
.vw-zeile--bestellliste { grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 96px 104px 110px 200px; }
.vw-bestellliste__nr { font-weight: 500; font-variant-numeric: tabular-nums; }
.vw-zeile--bestellliste .vw-zeile__betrag { text-align: right; }
.vw-bestellliste__datum b { font-weight: 400; font-variant-numeric: tabular-nums; }
.vw-bestellliste__klein { font-size: 14px; line-height: 20px; color: var(--stein); }
.vw-seitenkopf__titel { display: grid; gap: 10px; }
.vw-seitenkopf__unter { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 22px; color: var(--stein); }
.vw-summe { display: grid; gap: 10px; margin-top: 6px; margin-left: auto; width: min(100%, 420px); padding: 22px 24px 20px; background: var(--papier); font-size: 15px; line-height: 22px; }
.vw-summe > div { display: flex; justify-content: space-between; gap: 24px; font-variant-numeric: tabular-nums; }
.vw-summe > div > span:first-child { color: var(--stein); }
.vw-summe__gesamt { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--sand); align-items: baseline; }
.vw-summe__gesamt > span:first-child { color: var(--tinte) !important; font-weight: 500; }
.vw-summe__gesamt > span:last-child { font-family: var(--font-titel); font-weight: 300; font-size: 30px; line-height: 36px; letter-spacing: 0.02em; }
.vw-summe__ust { font-size: 13px; line-height: 20px; }
.vw-adressen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; font-size: 15px; line-height: 24px; }
.vw-adressen__label { display: block; margin-bottom: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--stein); }
.vw-adressen a { text-decoration: underline; text-decoration-color: var(--kies); text-underline-offset: 4px; transition: text-decoration-color 200ms ease; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .vw-adressen a:hover { text-decoration-color: currentColor; } }
.vw-verlauf li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; font-size: 14px; line-height: 22px; }
.vw-verlauf li + li { border-top: 1px solid var(--sand); }
.vw-verlauf li:first-child { padding-top: 0; }
.vw-verlauf li:last-child { padding-bottom: 0; }
.vw-verlauf li > span:first-child { color: var(--stein); font-variant-numeric: tabular-nums; }
.vw-daten { display: grid; gap: 12px; margin: 0; }
.vw-daten > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 22px; }
.vw-daten dt { color: var(--stein); }
.vw-daten dd { margin: 0; text-align: right; font-weight: 500; }
.vw-felder--abstand { margin-top: 24px; }
.vw-dokumente li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.vw-dokumente li + li { border-top: 1px solid var(--sand); }
.vw-dokumente li:first-child { padding-top: 0; }
.vw-dokumente li:last-child { padding-bottom: 0; }
.vw-dokumente b { display: block; font-size: 15px; line-height: 22px; font-weight: 500; }
.vw-dokumente li > span > span { display: block; font-size: 13px; line-height: 20px; color: var(--stein); }

/* Bestellte Artikel: Positionen und Summen in einem Container */
.vw-positionen { display: grid; }
.vw-position { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 110px; align-items: center; gap: 20px; padding: 16px 0; }
.vw-position + .vw-position { border-top: 1px solid var(--sand); }
.vw-position:first-child { padding-top: 0; }
.vw-position__text b { display: block; font-size: 15px; line-height: 22px; font-weight: 500; }
.vw-position__text > span { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--stein); }
.vw-position__menge { font-size: 14px; line-height: 20px; color: var(--stein); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-position__summe { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-karte--formular .vw-summe { width: 100%; margin-top: 8px; padding: 22px 0 0; background: none; border-top: 1px solid var(--kies); }

/* ---------- Anfragen ---------- */
.vw-zeile--anfrageliste { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 120px 200px; }
.vw-anfrageliste__text > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.vw-anfrageliste__thema { font-size: 14px; line-height: 20px; color: var(--stein); }
.vw-anfrageliste__datum b { font-weight: 400; font-variant-numeric: tabular-nums; }
.vw-nachricht { max-width: 680px; font-size: 16px; line-height: 27px; }
.vw-nachricht p + p { margin-top: 16px; }
.vw-nachricht + .vw-hinweis { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sand); }
.vw-antwort__fuss { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.vw-antwort__fuss .vw-hinweis { margin: 0; max-width: 420px; }
.vw-antwort__fuss .btn { flex: none; }
.vw-daten a { text-decoration: underline; text-decoration-color: var(--kies); text-underline-offset: 4px; overflow-wrap: anywhere; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .vw-daten a:hover { text-decoration-color: currentColor; } }
.vw-daten dd { min-width: 0; }

/* ---------- Kunden und Übersicht „Wenig Bestand“ ---------- */
.vw-zeile--lager { grid-template-columns: 48px minmax(0, 1fr) 176px; }
.vw-zeile--lager .vw-produkt__bild { width: 48px; height: 48px; }
.vw-zeile--kundenliste { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 110px 200px; }
.vw-kundenliste__klein { font-size: 14px; line-height: 20px; color: var(--stein); }
.vw-kundenliste__bestellt b { font-weight: 400; }
.vw-zeile--kundenliste .vw-zeile__betrag { text-align: right; }
.vw-kennzahlen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vw-kennzahlen--drei .vw-kennzahl { padding: 24px 24px 22px; }
.vw-kennzahlen--drei .vw-kennzahl__wert { font-size: clamp(28px, calc(23px + 0.6vw), 34px); }
.vw-abschnitt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

@media (max-width: 899px) {
  .vw-sub { position: static; }
  .vw-sub__inner { height: 56px; gap: 16px; padding-right: 68px; }
  .vw-nav { min-width: 0; flex: 1; }
  .vw-nav ul { gap: 24px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .vw-nav ul::-webkit-scrollbar { display: none; }
  .vw-nav a { padding-block: 8px; }
  /* weiche Kante rechts: zeigt, dass die Navigation weiterläuft */
  .vw-nav { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .vw-main { padding: 36px 0 72px; }
  .vw-seitenkopf { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 28px; }
  .vw-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vw-kennzahl { padding: 22px 20px; }
  .vw-spalten { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 56px; }
  .vw-block__kopf { margin-bottom: 16px; }
  .vw-zeile { gap: 12px; padding: 16px 20px; }
  .vw-liste > .vw-zeile + .vw-zeile::before { left: 20px; right: 20px; }
  .vw-zeile__pfeil { display: none; }
  .vw-tabelle__zeilen > .vw-zeile { padding: 14px 16px; }
  .vw-zeile--bestellung { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text betrag" "text status"; row-gap: 6px; }
  .vw-zeile--anfrage { grid-template-columns: minmax(0, 1fr) auto; }
  .vw-zeile--bestellung .vw-zeile__text { grid-area: text; }
  .vw-zeile--bestellung .vw-zeile__betrag { grid-area: betrag; justify-self: end; }
  .vw-zeile--bestellung .vw-zeile__ende { grid-area: status; }
  .vw-zeile--anfrage { grid-template-columns: minmax(0, 1fr) auto; }
  .vw-zeile--kopf { display: none; }
  .vw-zeile--kopf + .vw-zeile { border-top: 0; }
  .vw-nur-desktop { display: none; }
  .vw-werkzeug__filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vw-auswahl select { height: 48px; font-size: 14px; padding-left: 14px; }
  .vw-zeile--produkt { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "bild text preis" "bild text bestand"; row-gap: 4px; align-items: start; }
  .vw-zeile--produkt .vw-produkt__bild { grid-area: bild; width: 48px; height: 48px; }
  .vw-zeile--produkt .vw-zeile__text { grid-area: text; }
  .vw-zeile--produkt .vw-produkt__preis { grid-area: preis; }
  .vw-zeile--produkt .vw-produkt__bestand { grid-area: bestand; }
  .vw-produkt__kategorie, .vw-zeile--produkt .vw-zeile__ende { display: none; }
  .vw-seitenkopf__aktionen { flex-direction: column-reverse; align-items: stretch; gap: 18px; }
  .vw-seitenkopf__aktionen .pfeil-link { align-self: flex-start; }
  .vw-block__kopf { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .vw-formular__haupt, .vw-formular__seite { gap: 44px; }
  .vw-abschnitt__kopf { margin-bottom: 16px; }
  .vw-karte--formular { padding: 20px 20px 24px; }
  .vw-felder { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vw-varianten__zeile, .vw-varianten--ohne-bestand .vw-varianten__zeile, .vw-fakten__zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; }
  .vw-zeile-aktionen { grid-column: 1 / -1; }
  .vw-fakten__zeile + .vw-fakten__zeile { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sand); }
  .vw-varianten__zeile + .vw-varianten__zeile { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sand); }
  .vw-varianten__kopf { display: none; }
  .vw-varianten__kopf + .vw-varianten__zeile { margin-top: 0; padding-top: 0; border-top: 0; }
  .vw-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .vw-inhalt__fuss .btn { width: 100%; }
  .vw-zeile--bestellliste { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kunde betrag" "datum status"; row-gap: 6px; }
  .vw-zeile--bestellliste > .vw-zeile__text:not(.vw-bestellliste__datum) { grid-area: kunde; }
  .vw-zeile--bestellliste .vw-zeile__betrag { grid-area: betrag; justify-self: end; }
  .vw-bestellliste__datum { grid-area: datum; }
  .vw-bestellliste__datum b, .vw-bestellliste__datum span { display: inline; font-size: 14px; color: var(--stein); }
  .vw-bestellliste__datum span::before { content: " um "; }
  .vw-zeile--bestellliste .vw-zeile__ende { grid-area: status; }
  .vw-bestellliste__nr, .vw-bestellliste__klein { display: none; }
  .vw-position { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "bild text summe" "bild menge summe"; row-gap: 2px; align-items: start; }
  .vw-position .vw-produkt__bild { grid-area: bild; width: 48px; height: 48px; }
  .vw-position__text { grid-area: text; }
  .vw-position__menge { grid-area: menge; white-space: normal; }
  .vw-position__summe { grid-area: summe; }
  .vw-adressen { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vw-verlauf li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vw-seitenkopf__titel { gap: 8px; }
  .vw-seitenkopf__unter { flex-wrap: wrap; }
  .vw-zeile--anfrageliste { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text ende" "datum datum"; row-gap: 6px; }
  .vw-anfrageliste__text { grid-area: text; }
  .vw-zeile--anfrageliste .vw-zeile__ende { grid-area: ende; align-self: start; }
  .vw-anfrageliste__datum { grid-area: datum; }
  .vw-anfrageliste__datum b, .vw-anfrageliste__datum span { display: inline; font-size: 14px; color: var(--stein); }
  .vw-anfrageliste__datum span::before { content: " um "; }
  .vw-anfrageliste__thema { display: none; }
  .vw-antwort__fuss { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .vw-zeile--lager { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .vw-zeile--kundenliste { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text betrag" "bestellt ende"; row-gap: 6px; }
  .vw-zeile--kundenliste > .vw-zeile__text:first-child { grid-area: text; }
  .vw-zeile--kundenliste .vw-zeile__betrag { grid-area: betrag; }
  .vw-kundenliste__bestellt { grid-area: bestellt; }
  .vw-kundenliste__bestellt b, .vw-kundenliste__bestellt span { display: inline; font-size: 14px; color: var(--stein); }
  .vw-kundenliste__bestellt span::before { content: ", "; }
  .vw-zeile--kundenliste .vw-zeile__ende { grid-area: ende; }
  .vw-kundenliste__klein { display: none; }
  .vw-kennzahlen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vw-kennzahlen--drei .vw-kennzahl { padding: 16px 12px; }
  .vw-kennzahlen--drei .vw-kennzahl__wert { font-size: 19px; letter-spacing: 0; white-space: nowrap; }
  .vw-kennzahlen--drei .vw-kennzahl__label { font-size: 13px; line-height: 18px; }
}

/* ---------- Kundenkonto „Mein Konto“ (21.10.2026) ----------
   Seitenkopf wie Warenkorb/Kasse, Navigation im Stil der Produkt-Reiter (als Links), Bestellungen als
   Papier-Karten wie im Warenkorb, Formulare als Papier-Abschnitte wie an der Kasse. */
.konto-nav { margin-bottom: clamp(32px, calc(24px + 2vw), 48px); }
.reiter__tab[aria-current="page"] { color: var(--tinte); }
.reiter__tab[aria-current="page"]::after { transform: scaleX(1); }
.konto-gruss { max-width: 760px; margin-bottom: clamp(28px, calc(20px + 2vw), 48px); color: var(--stein); }
.konto-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, calc(4px + 5vw), 64px); align-items: start; }
.konto-spalte { display: grid; gap: 16px; }
.konto-titel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.konto-titel--bestellung { align-items: center; margin-bottom: 28px; }
.konto-unter { margin-top: 6px; font-size: 15px; line-height: 24px; color: var(--stein); }
.konto-zurueck { margin-bottom: 28px; }
.konto-bestellungen { display: grid; gap: 12px; }
.konto-bestellung { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(84px, auto) 20px; align-items: center; gap: 24px; padding: 20px 24px; background: var(--papier); }
.konto-bestellung__text { display: flex; flex-direction: column; min-width: 0; }
.konto-bestellung__nr { font-size: 17px; line-height: 26px; font-weight: 500; }
.konto-bestellung__info { font-size: 14px; line-height: 22px; color: var(--stein); }
.konto-bestellung__betrag { font-size: 16px; line-height: 24px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.konto-bestellung > .icon { width: 18px; height: 18px; color: var(--stein); transition: transform var(--dauer-smooth) var(--ease-smooth), color 300ms ease; }
.konto-bestellung .status, .konto .vw-seitenkopf > .status { align-self: center; }
.konto .vw-seitenkopf > .status--spaeter { background: var(--papier); } /* auf Weiß sonst unsichtbar */
@media (hover: hover) and (pointer: fine) { .konto-bestellung:hover > .icon { transform: translateX(4px); color: var(--tinte); } }
.konto-bestellung:focus-visible { outline-offset: 2px; }
.konto-hinweis { margin-top: 24px; font-size: 14px; line-height: 22px; color: var(--stein); }
.konto-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }
.konto-sendung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-bottom: 16px; padding: 20px 24px; background: var(--keim); font-size: 15px; line-height: 24px; }
.konto-artikel li { grid-template-columns: 96px minmax(0, 1fr) auto minmax(84px, auto); }
.artikel__menge { font-size: 14px; line-height: 22px; color: var(--stein); white-space: nowrap; font-variant-numeric: tabular-nums; }
.konto-adressen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.konto-adresse { display: flex; flex-direction: column; align-items: flex-start; }
.konto-adresse > .t-h3 { margin-bottom: 20px; }
.konto-adresse > .t-h4 { margin-bottom: 12px; }
.konto-adresse p { font-size: 15px; line-height: 24px; }
.konto-adresse__kontakt, .konto-adresse__leer { margin-top: 12px; color: var(--stein); }
.konto-adresse .pfeil-link { margin-top: auto; padding-top: 28px; }
.konto-zahlung { margin-top: 20px; }
.konto-nachrichten > .t-h4 { margin-bottom: 8px; }
.konto-nachrichten dd { max-width: 70%; text-align: left; }
.konto-nachrichten dd p + p { margin-top: 8px; }
.konto-formular { display: grid; gap: 16px; max-width: 760px; }
.konto-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 16px; }
.konto-formular > .konto-hinweis { margin-top: 16px; }
.kasse-konto { margin-top: 28px; }
@media (max-width: 1023px) {
  .konto-split { grid-template-columns: minmax(0, 1fr); }
  .konto-artikel li { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px; }
  .konto-artikel .artikel__bild { grid-row: span 2; }
  .konto-artikel .artikel__menge { grid-column: 2; }
  .konto-artikel .artikel__preis { grid-column: 3; grid-row: 2; }
}
@media (max-width: 599px) {
  .konto-bestellung { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 16px; }
  .konto-bestellung .status { grid-row: 2; justify-self: start; }
  .konto-bestellung__betrag { grid-column: 2; grid-row: 1; }
  .konto-bestellung > .icon { display: none; }
  .konto-adressen { grid-template-columns: minmax(0, 1fr); }
  .konto-sendung { padding: 16px; }
}

/* ---------- Verwaltung: Papierkorb in Produkte & Lager (21.10.2026) ----------
   Gelöschte Produkte: keine Verlinkung ins Formular, rechts „Wiederherstellen“ und „Endgültig löschen“. */
.vw-papierkorb-hinweis { margin: 0 0 16px; }
.vw-zeile--papierkorb { grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1fr) auto; }
.vw-zeile--papierkorb .vw-produkt__bild img { opacity: 0.6; }
.vw-produkt__geloescht { font-size: 14px; line-height: 22px; color: var(--stein); }
.vw-zeile--papierkorb .vw-zeile-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.vw-zeile--papierkorb .vw-zeile-aktionen form { display: contents; }
.vw-zeile--papierkorb .vw-eintrag__entfernen { margin-left: 0; }
@media (max-width: 899px) {
  .vw-zeile--papierkorb { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "bild text" "bild datum" "aktionen aktionen"; row-gap: 4px; }
  .vw-zeile--papierkorb .vw-produkt__geloescht { grid-area: datum; font-size: 13px; }
  .vw-zeile--papierkorb .vw-zeile-aktionen { grid-area: aktionen; justify-self: start; margin-top: 12px; }
}


/* ---------- Verwaltung: Filter als Slide-out wie im Shop (21.10.2026) ----------
   Werkzeugzeile: Suche links, rechts nur das Filter-Icon (wie im Shop, mit Anzahl aktiver Filter); im Drawer
   Auswahl-Chips (Radio) je Gruppe, dazu die Sortierung. Liste lädt ohne Neuladen (verwaltung.js, Live-Suche). */
.vw-werkzeug__filter { margin-left: auto; }
.chip--auswahl { cursor: pointer; }
.chip--auswahl:has(input:checked), .chip--auswahl:has(input:checked):hover { background: var(--primaer); color: var(--weiss); }
.chip--auswahl:has(input:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 2px; }
[data-live-ergebnis] { transition: opacity 200ms ease; }
[data-live-ergebnis][aria-busy="true"] { opacity: 0.55; }
@media (max-width: 1199px) {
  .vw-werkzeug { flex-direction: row; align-items: center; }
  .vw-werkzeug__suche { flex: 1; width: auto; min-width: 0; }
  .vw-werkzeug__filter { display: flex; }
}

/* Mobil: iOS vergrößert die Ansicht, sobald ein Eingabefeld mit weniger als 16 px Schrift angetippt wird. Auf
   Touch-Geräten und schmalen Bildschirmen daher 16 px (21.10.2026). Zoomen bleibt möglich (kein maximum-scale). */
@media (pointer: coarse), (max-width: 767px) {
  .suchfeld input, .stepper input, .vw-auswahl select, .vw-select .vw-select__suche input,
  .vw-feld input, .vw-feld textarea, .vw-feld select, .vw-varianten input, .vw-fakten input { font-size: 16px; }
}