/* gastwlan.com · Gast WLAN von Airfy
   Sand, Sonnengelb, Waldgrün. Mobile zuerst. */

@font-face {
  font-family: "Fraunces Soft";
  src: url("/assets/fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sand-0: #fdfbf7;
  --sand-50: #f9f4ea;
  --sand-100: #f3eadb;
  --sand-200: #e9dcc5;
  --sand-300: #dbc7a5;
  --sand-500: #a88e66;
  --rand: #957a52; /* Rahmen von Eingaben und Auswahlfeldern: 4,05:1 auf Weiß, 3,7:1 auf Sand */
  --sun: #f2bd3c;
  --sun-300: #f7d47a;
  --sun-100: #fcefc8;
  --forest: #245039;
  --forest-700: #1b3e2c;
  --forest-900: #142c20;
  --ink: #1b2a21;
  --muted: #56655b;
  --line: #e2d5bd;
  --white: #fff;
  --danger: #8a2f1d;

  --serif: "Fraunces Soft", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 18px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(27, 42, 33, .06), 0 8px 28px rgba(27, 42, 33, .08);
  --space: clamp(72px, 10vw, 136px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) { body { font-size: 1.0625rem; } }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--forest-700); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--forest-900); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.4rem + 4.2vw, 4.4rem); line-height: 1.03; letter-spacing: -.018em; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3rem); line-height: 1.08; letter-spacing: -.012em; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; }
@media (max-width: 480px) { h1, h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: .75em; }
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.5; color: var(--ink); }
.leise { color: var(--muted); font-size: .9375rem; }
.zahl { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.sprung { position: absolute; left: 12px; top: -60px; background: var(--forest); color: var(--sand-0); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.sprung:focus { top: 12px; color: var(--sand-0); }

/* Knöpfe */
.btn {
  --b: var(--forest); --c: var(--sand-0);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.25em;
  border: 1.5px solid var(--b); border-radius: 999px;
  background: var(--b); color: var(--c);
  font: 600 1rem/1.15 var(--sans); letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { --b: var(--forest-700); color: var(--c); text-decoration: none; }
.btn--sun { --b: var(--sun); --c: var(--forest-900); }
.btn--sun:hover { --b: #e9af27; }
.btn--linie { background: transparent; color: var(--forest); }
.btn--linie:hover { background: var(--forest); color: var(--sand-0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn .pfeil { transition: transform .15s ease; }
.btn:hover .pfeil { transform: translateX(2px); }
.textlink { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--sun); padding-bottom: 1px; }
.textlink:hover { border-bottom-color: var(--forest); }

/* Kopf */
.kopf { position: relative; z-index: 50; background: rgba(249, 244, 234, .92); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopf.ist-gescrollt { border-bottom-color: var(--line); }
.kopf__in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--forest-900); margin-right: auto; }
.marke:hover { color: var(--forest-900); }
.marke img { width: 30px; height: 30px; }
.marke__name { font: 600 1.28rem/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.marke__von { display: block; font: 500 .72rem/1 var(--sans); color: var(--muted); letter-spacing: .02em; margin-top: 3px; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a { display: block; padding: 10px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .975rem; }
.nav a:hover { background: var(--sand-100); color: var(--forest-900); }
.nav a[aria-current="page"] { color: var(--forest); box-shadow: inset 0 -2px 0 var(--sun); border-radius: 0; }
.sprache { font-weight: 600; font-size: .875rem; text-decoration: none; color: var(--muted); padding: 10px 8px; letter-spacing: .04em; }
.sprache:hover { color: var(--forest); }
.kopf .btn { min-height: 42px; padding: .55em 1.05em; font-size: .95rem; }
.menue-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 999px; color: var(--forest-900); cursor: pointer; }
.menue-knopf:hover { background: var(--sand-100); }
.menue-knopf svg { width: 22px; height: 22px; }
.menue { border-top: 1px solid var(--line); padding: 8px 0 18px; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue a { display: block; padding: 12px 2px; font: 500 1.35rem/1.2 var(--serif); color: var(--forest-900); text-decoration: none; border-bottom: 1px solid var(--line); }
.menue a[aria-current="page"] { color: var(--forest); }
.js .kopf { position: sticky; top: 0; }
.menue-knopf { display: none !important; }
.js .menue-knopf { display: inline-flex !important; }
.js .menue { display: none; }
.js .menue.ist-offen { display: block; }
.kopf__in > .sprache { display: none; }
.menue .sprache { display: inline-block; margin-top: 14px; padding: 8px 0; font-size: 1rem; }
@media (min-width: 1200px) { .kopf__in > .sprache { display: inline-block; } }
@media (max-width: 379px) { .kopf .btn { display: none; } }
@media (min-width: 1200px) {
  .nav { display: block; }
  .menue, .js .menue.ist-offen, .menue-knopf, .js .menue-knopf { display: none !important; }
  .kopf__in { min-height: 76px; gap: 18px; }
}

/* Abschnitte */
.abschnitt { padding: var(--space) 0; }
.abschnitt--sand { background: var(--sand-100); }
.abschnitt--hell { background: var(--sand-0); }
.abschnitt__kopf { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.abschnitt__kopf p { margin-top: 18px; }
.ort--text p { font-size: 1.15rem; }

/* Held */
.held { padding: clamp(28px, 5vw, 64px) 0 0; overflow: hidden; }
.held__raster { display: grid; gap: 28px; align-items: end; }
.held__text { padding-bottom: 8px; }
.held h1 { max-width: 12.5em; font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.9rem); -webkit-hyphens: manual; hyphens: manual; }
.held .lead { margin-top: 20px; max-width: 32em; }
.pakete-kurz { margin-top: 28px; display: grid; gap: 10px; }
.pakete-kurz__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
@media (min-width: 600px) { .pakete-kurz__reihe { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; } }
.paketknopf {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 10px 14px; min-height: 52px; border-radius: 14px;
  background: var(--sand-0); border: 1.5px solid var(--sand-300); color: var(--forest-900);
  text-decoration: none; font-weight: 600; transition: border-color .15s, background-color .15s, transform .15s;
}
.paketknopf:hover { border-color: var(--forest); color: var(--forest-900); background: var(--white); }
.paketknopf > span:first-child { font-size: .9rem; }
.paketknopf .zahl { font-size: 1.3rem; font-weight: 500; white-space: nowrap; }
@media (min-width: 600px) { .paketknopf { flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 18px; } .paketknopf > span:first-child { font-size: 1rem; } .paketknopf .zahl { font-size: 1.35rem; } }
.paketknopf--haupt { background: var(--forest); border-color: var(--forest); color: var(--sand-0); }
.paketknopf--haupt:hover { background: var(--forest-700); border-color: var(--forest-700); color: var(--sand-0); }
.pakete-kurz--spalte .pakete-kurz__reihe { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pakete-kurz--spalte .paketknopf { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 10px 16px; }
.pakete-kurz__notiz { font-size: .9rem; color: var(--muted); }
@media (min-width: 960px) {
  .held__raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 40px; }
  .held__text { padding-bottom: clamp(48px, 7vw, 104px); }
}

/* Signatur: Handy am Aufsteller */
.sig { position: relative; width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 600 / 640; container-type: inline-size; }
.sig__sonne { position: absolute; width: 64%; aspect-ratio: 1; right: 4%; top: 2%; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #f9da86 0%, var(--sun) 62%, #eeb12c 100%); opacity: .95; }
.sig__theke { position: absolute; left: 0; right: -40%; bottom: 0; height: 25%; background: linear-gradient(90deg, #e2d2b4, var(--sand-200) 18%); border-top-left-radius: 2.2cqw; }
.sig__theke::before { content: ""; position: absolute; left: -1.5cqw; right: 0; top: -1.2cqw; height: 4.2cqw; background: var(--sand-0); border-radius: 2cqw 0 0 2cqw; box-shadow: 0 .4cqw 0 #d3bf9b; }
.sig__pflanze { position: absolute; left: 3%; bottom: 27.3%; width: 15%; }
.sig__aufsteller { position: absolute; left: 14%; bottom: 27.3%; width: 33%; }
.aufsteller__karte {
  position: relative; background: var(--sand-0); border-radius: 3cqw 3cqw 1cqw 1cqw;
  padding: 4.2cqw 3cqw 4.6cqw; text-align: center;
  box-shadow: 0 0 0 .5cqw rgba(255,255,255,.75), 0 1.4cqw 3cqw rgba(27,42,33,.16);
}
.aufsteller__marke { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; font: 600 max(3cqw, 10px)/1 var(--serif); color: var(--forest-900); }
.aufsteller__marke svg { width: 13cqw; height: 13cqw; }
.aufsteller__titel { margin-top: 3.6cqw; padding-top: 3.2cqw; border-top: .3cqw solid var(--sand-200); font: 500 4.4cqw/1.05 var(--serif); color: var(--forest-900); }
.aufsteller__fuss { height: 2.4cqw; margin: 0 6%; background: linear-gradient(#d7c6a6, #c9b48f); border-radius: 0 0 1cqw 1cqw; }
.sig__handy { position: absolute; right: 11%; bottom: 7%; width: 37%; aspect-ratio: 200 / 410; transform: rotate(-7deg); transform-origin: 60% 100%; container-type: inline-size; }
/* Ab hier cqw = Breite des Handys. Kleine Texte nie unter 9px. */
.handy__koerper { position: absolute; inset: 0; border-radius: 16.8cqw; background: #18241d; box-shadow: 0 8cqw 16cqw rgba(20,44,32,.28), inset 0 0 0 .95cqw #2e3d34; z-index: 1; }
.handy__schirm { position: absolute; inset: 4cqw; border-radius: 13.5cqw; background: var(--sand-0); overflow: hidden; display: flex; flex-direction: column; padding: 8.6cqw 8.6cqw 8.1cqw; font-family: var(--sans); color: var(--ink); }
.handy__leiste { display: flex; justify-content: space-between; align-items: center; font: 600 max(4.6cqw, 9px)/1 var(--sans); color: var(--ink); padding: 0 2.7cqw; }
.handy__insel { width: 24.3cqw; height: 6.8cqw; border-radius: 5.4cqw; background: #18241d; }
.handy__marke { margin-top: 13cqw; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; text-align: center; }
.handy__marke svg { width: 22cqw; height: 22cqw; }
.handy__marke b { font: 600 max(11cqw, 12px)/1 var(--serif); color: var(--forest-900); letter-spacing: -.01em; }
.handy__titel { margin-top: 11cqw; font: 500 8.6cqw/1.08 var(--serif); color: var(--forest-900); letter-spacing: -.01em; text-align: center; }
.handy__titel span, .handy__haken .nb { white-space: nowrap; }
.handy__sub { margin-top: 3.2cqw; font-size: max(5cqw, 9px); line-height: 1.3; color: var(--muted); text-align: center; }
.handy__feld { margin-top: 11cqw; border: .7cqw solid var(--sand-300); border-radius: 3.8cqw; background: var(--white); padding: 2.6cqw 4.3cqw; }
.handy__feld small { display: block; font-size: max(3.9cqw, 9px); color: var(--muted); line-height: 1.2; }
.handy__feld span { display: block; font-size: max(5.5cqw, 9px); font-weight: 500; line-height: 1.3; }
.handy__haken { margin-top: 7cqw; display: flex; gap: 3.2cqw; align-items: flex-start; font-size: max(4.3cqw, 9px); line-height: 1.3; }
.handy__haken i { flex: none; width: 6.5cqw; height: 6.5cqw; border-radius: 1.6cqw; background: var(--forest); position: relative; }
.handy__haken i::after { content: ""; position: absolute; left: 30%; top: 14%; width: 30%; height: 52%; border: solid var(--sand-0); border-width: 0 1.2cqw 1.2cqw 0; transform: rotate(40deg); }
.handy__knopf { margin-top: auto; background: var(--sun); color: var(--forest-900); text-align: center; font-weight: 700; font-size: max(5.8cqw, 9px); padding: 4.4cqw; border-radius: 8.1cqw; }
.sig__hand { position: absolute; left: -35%; top: 36.585%; width: 180%; max-width: none; overflow: visible; pointer-events: none; }
.sig__hand--hinten { z-index: 0; }
.sig__hand--vorn { z-index: 2; }
@media (max-width: 599px) {
  .sig { aspect-ratio: 600 / 700; }
  .sig__pflanze { display: none; }
  .sig__aufsteller { left: 3%; width: 38%; }
  .sig__handy { right: 4%; bottom: 6%; width: 49%; }
}
@media (min-width: 960px) { .sig { max-width: none; } }

/* Ablauf mit Gästeliste */
.ablauf__raster { display: grid; gap: 40px; }
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.schritt { position: relative; padding: 0 0 36px 64px; }
.schritt:last-child { padding-bottom: 0; }
.schritt::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -.08em; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sun-100); color: var(--forest-900); font: 500 1.35rem/1 var(--serif); }
.schritt::after { content: ""; position: absolute; left: 21.5px; top: 52px; bottom: 8px; width: 1px; background: var(--sand-300); }
.schritt:last-child::after { display: none; }
.schritt h3 { margin-bottom: 8px; }
.schritt p { color: var(--ink); max-width: 30em; }
@media (min-width: 960px) {
  .ablauf__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .ablauf__spur { position: relative; }
  .schritt { min-height: 40vh; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
  .schritt::before { top: calc(50% - 22px - 1.5em); }
  .schritt::after { display: none; }
  .ablauf__liste { position: sticky; top: calc(50vh - 230px); }
  .ablauf__spur .schritt { min-height: 32vh; } /* Korrektur 8: drei statt vier Schritte, kürzere Spur */
}

.gl { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.gl__kopf { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--sand-0); }
.gl__kopf svg { width: 26px; height: 26px; flex: none; }
.gl__titel { font: 600 1.05rem/1.2 var(--serif); color: var(--forest-900); }
.gl__haus { display: block; font-size: .8rem; color: var(--muted); font-family: var(--sans); font-weight: 500; }
.gl__zahl { margin-left: auto; text-align: right; font-size: .78rem; color: var(--muted); line-height: 1.1; }
.gl__zahl b { display: block; font: 500 1.6rem/1 var(--serif); color: var(--forest-900); font-variant-numeric: tabular-nums lining-nums; }
.gl__spalten, .gl__eintrag { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 18px; }
.gl__spalten { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sand-100); }
.gl__liste { list-style: none; margin: 0; padding: 0; }
.gl__eintrag { min-height: 54px; border-bottom: 1px solid var(--sand-100); font-size: .95rem; position: relative; }
.gl__eintrag:last-child { border-bottom: 0; }
@media (max-width: 480px) { .gl__spalten, .gl__eintrag { grid-template-columns: 2.9em minmax(0, 1fr) auto; gap: 8px; padding: 0 14px; } .gl__ok { margin-right: 14px; } }
.gl__zeit { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .88rem; }
.gl__spalten span:nth-child(3) { text-align: right; }
.gl__mail { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl__ok { justify-self: end; margin-right: 18px; }
.gl__ok { width: 22px; height: 22px; border-radius: 50%; background: var(--forest); display: grid; place-items: center; }
.gl__ok svg { width: 12px; height: 12px; }
.gl__fuss { padding: 12px 18px; font-size: .8rem; color: var(--muted); background: var(--sand-0); border-top: 1px solid var(--line); }
/* Füllen beim Scrollen (nur mit JS und ohne reduzierte Bewegung) */
.gl-an .gl__eintrag { transition: background-color 1.4s ease; }
.gl-an .gl__eintrag > * { visibility: hidden; }
.gl-an .gl__eintrag::before { content: ""; position: absolute; left: 18px; right: 40%; top: 50%; height: 10px; margin-top: -5px; border-radius: 6px; background: var(--sand-100); }
.gl-an .gl__eintrag.ist-da::before { display: none; }
.gl-an .gl__eintrag.ist-da > * { visibility: visible; animation: gl-rein .5s ease both; }
.gl-an .gl__eintrag.ist-neu { background: var(--sun-100); }
@keyframes gl-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gl-an .gl__eintrag.ist-da > * { animation: none; }
  .gl-an .gl__eintrag { transition: none; }
}

/* Orte */
.orte { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ort { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand-200); min-height: 180px; }
.ort img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
a.ort { display: block; text-decoration: none; }
a.ort img { transition: transform .4s ease; }
a.ort:hover img { transform: scale(1.03); }
a.ort:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.ort img { transition: none; } a.ort:hover img { transform: none; } }
.ort figcaption, .ort__name { position: absolute; left: 10px; bottom: 10px; right: 10px; }
.ort figcaption span, .ort__name span { display: inline; padding: 5px 10px; border-radius: 8px; background: rgba(253, 251, 247, .94); color: var(--forest-900); font-weight: 600; font-size: .9rem; line-height: 1.9; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ort--a { grid-column: 1 / -1; min-height: 240px; }
.ort--text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px 18px; background: var(--forest); color: var(--sand-0); grid-column: 1 / -1; min-height: 110px; }
.ort--text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ort--text li a { color: var(--sand-0); font-weight: 600; font-size: .95rem; text-decoration: underline; text-decoration-color: rgba(253,251,247,.45); text-underline-offset: .2em; }
.ort--text li a:hover { text-decoration-color: var(--sun); }
.ort__alle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--sun); color: var(--forest-900); font-weight: 700; font-size: .92rem; text-decoration: none; }
.ort__alle:hover { color: var(--forest-900); background: #e9af27; }
.ort--text p { font: 500 1.3rem/1.15 var(--serif); color: var(--sand-0); }
.ort--text .sonnenpunkt { position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); }
@media (min-width: 760px) {
  .orte { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 128px; gap: 14px; }
  .ort, .ort--a { min-height: 0; }
  .ort--a { grid-column: 1 / 5; grid-row: span 4; }
  .ort--b { grid-column: 5 / 7; grid-row: span 2; }
  .ort--c { grid-column: 5 / 7; grid-row: span 2; }
  .ort--d { grid-column: 1 / 3; grid-row: span 2; }
  .ort--e { grid-column: 3 / 5; grid-row: span 2; }
  .ort--text { grid-column: 5 / 7; grid-row: span 2; padding: 18px 20px; }
  .ort--text .sonnenpunkt { top: 50%; left: auto; right: 22px; margin-top: -17px; }
  .ort figcaption, .ort__name { left: 14px; bottom: 14px; }
}

/* Router */
.geraet { display: grid; gap: 32px; align-items: center; }
.geraet__bild { position: relative; display: grid; place-items: center; padding: 6% 0; }
.geraet__bild::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--sand-200); }
.geraet__bild img { position: relative; width: 56%; max-width: 420px; }
@media (min-width: 900px) { .geraet__bild img { width: 72%; } }
.geraet__text > p { margin-top: 18px; max-width: 34em; }
.fakten { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.fakten li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fakten li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--sun); }
.zweit { display: flex; gap: 18px; align-items: center; margin-top: 28px; padding: 16px; border-radius: var(--radius); background: var(--sand-0); border: 1px solid var(--line); }
.zweit img { width: 96px; flex: none; }
@media (min-width: 900px) { .geraet { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

/* Preise (Liste statt Kacheln) */
.preise { border-top: 1.5px solid var(--forest-900); }
.preis { display: grid; gap: 14px; padding: 26px 0 28px; border-bottom: 1px solid var(--sand-300); }
.preis__name { font: 500 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1 var(--serif); color: var(--forest-900); }
.preis__inhalt p { max-width: 30em; }
.preis__inhalt p + p { margin-top: .4em; color: var(--muted); }
.preis__inhalt .preis__fuer { margin-top: .7em; font-size: .9rem; font-weight: 600; color: var(--forest); }
.preis--haupt { background: var(--sun-100); border-radius: var(--radius); padding-left: 20px; padding-right: 20px; border-bottom-color: transparent; margin: 6px 0; }
.preis__betrag { font-size: .95rem; color: var(--muted); line-height: 1.35; }
.preis__betrag .zahl { display: block; font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.05; color: var(--forest-900); font-weight: 500; margin: 2px 0 2px; letter-spacing: -.01em; }
.preis__knopf { align-self: center; }
@media (min-width: 900px) {
  .preise { display: grid; grid-auto-rows: 1fr; }
  .preis { grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr) minmax(0, 1.2fr) 230px; gap: 28px; align-items: center; padding: 30px 0; }
  .preis__knopf { white-space: nowrap; }
  .preis--haupt { padding-left: 28px; padding-right: 28px; margin: 8px -28px; }
  .preis__knopf { justify-self: end; }
}
.vertrauen { margin-top: 26px; }
.vertrauen__zeile { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.vertrauen__zeile li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--forest-900); }
.vertrauen__zeichen { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--forest); flex: none; }
.vertrauen__zeichen svg { width: 17px; height: 17px; }
.vertrauen__saetze { margin-top: 12px; font-size: .9rem; color: var(--muted); max-width: 46em; }
.summe .vertrauen { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.summe .vertrauen__zeile { flex-direction: column; gap: 8px; }
.summe .vertrauen__zeile li { font-size: .9rem; }
.summe .vertrauen__zeichen { width: 24px; height: 24px; }
.summe .vertrauen__zeichen svg { width: 15px; height: 15px; }
.summe .vertrauen__saetze { font-size: .85rem; }
.preise__nach { margin-top: 28px; display: grid; gap: 10px 32px; color: var(--muted); font-size: .95rem; }
.preise__nach p { margin: 0; }
@media (min-width: 900px) { .preise__nach { grid-template-columns: 1fr 1fr; } }

/* Hilfe / Steffen */
.hilfe { display: grid; gap: 28px; align-items: center; }
.hilfe__bild { width: min(280px, 70%); border-radius: 50% 50% var(--radius) var(--radius); overflow: hidden; background: var(--sand-200); }
.hilfe__bild img { width: 100%; aspect-ratio: 758 / 800; object-fit: cover; }
.hilfe__text p { margin-top: 14px; max-width: 34em; }
.hilfe__text .btn { margin-top: 26px; }
@media (min-width: 900px) { .hilfe { grid-template-columns: 320px 1fr; gap: 64px; } .hilfe__bild { width: 100%; } }

/* Schluss */
.schluss { background: var(--forest); color: var(--sand-0); position: relative; overflow: hidden; }
.schluss::before { content: ""; position: absolute; width: clamp(220px, 30vw, 400px); aspect-ratio: 1; border-radius: 50%; right: clamp(-120px, -6vw, -40px); top: clamp(-200px, -10vw, -80px); background: var(--sun); opacity: .95; }
.schluss .wrap { position: relative; }
@media (max-width: 599px) { .schluss::before { width: 150px; right: -50px; top: -80px; } }
.schluss h2 { color: var(--sand-0); max-width: 14em; }
.schluss p { margin-top: 16px; color: #dfe8e1; max-width: 34em; }
.schluss .pakete-kurz__reihe { margin-top: 30px; }
.schluss .paketknopf { background: transparent; color: var(--sand-0); border-color: rgba(253, 251, 247, .45); }
.schluss .paketknopf:hover { border-color: var(--sand-0); background: rgba(253, 251, 247, .08); }
.schluss .paketknopf--haupt { background: var(--sun); color: var(--forest-900); border-color: var(--sun); }
.schluss .paketknopf--haupt:hover { background: #e9af27; border-color: #e9af27; color: var(--forest-900); }

/* Fuß */
.fuss { background: var(--forest-900); color: #cfdad2; padding: 64px 0 36px; font-size: .95rem; }
.fuss a { color: var(--sand-0); text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: var(--sand-0); }
.fuss__raster { display: grid; gap: 32px; }
.fuss__marke { display: flex; align-items: center; gap: 10px; font: 600 1.35rem/1 var(--serif); color: var(--sand-0); }
.fuss__marke img { width: 30px; height: 30px; }
.fuss p { margin-top: 12px; max-width: 28em; }
.fuss h2 { font: 600 .8rem/1 var(--sans); letter-spacing: .08em; color: #9fb3a6; margin-bottom: 14px; text-transform: uppercase; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss__unten { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(207, 218, 210, .18); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .85rem; color: #9fb3a6; }
@media (min-width: 820px) { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr; } }

/* Unterseiten */
.seitenkopf { padding: clamp(40px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); }
.seitenkopf h1 { max-width: 15em; }
.seitenkopf .lead { margin-top: 18px; max-width: 34em; }
.seitenkopf--bild { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .seitenkopf--bild { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.seitenkopf__bild { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand-200); }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }

.block { display: grid; gap: 14px 48px; padding: 36px 0; border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; }
.block h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.block__inhalt { max-width: 40em; }
.block__inhalt > p + p, .block__inhalt > ul, .block__inhalt > .btn, .block__inhalt > p + .btn { margin-top: 14px; }
@media (min-width: 900px) { .block { grid-template-columns: 1fr 1.8fr; padding: 48px 0; } }

.vergleich { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vergleich-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); background: var(--sand-0); }
.vergleich th, .vergleich td { padding: 14px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vergleich thead th { font: 500 1.3rem/1.1 var(--serif); color: var(--forest-900); background: var(--sand-100); }
.vergleich thead th small { display: block; font: 500 .82rem/1.3 var(--sans); color: var(--muted); margin-top: 4px; }
.vergleich tbody th { text-align: left; font-weight: 500; min-width: 13em; }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
.vergleich .ja { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--forest); }
.vergleich .ja svg { width: 12px; height: 12px; }
.vergleich .nein { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--rand); vertical-align: middle; }
.vergleich .nein svg { width: 22px; height: 22px; }
.vergleich tfoot td { padding: 16px 10px; }
.vergleich .pro-spalte { background: var(--sun-100); }
.vergleich thead th.pro-spalte { background: var(--sun); }
.vergleich thead th.pro-spalte small { color: var(--forest-900); }
.pro-spalte__tag { display: block; margin-top: 6px; font: 700 .72rem/1.2 var(--sans); letter-spacing: .03em; color: var(--forest-900); }
.vergleich .wert { font-weight: 600; color: var(--forest-900); white-space: nowrap; }
.vergleich tfoot .btn { min-height: 44px; padding: .55em 1em; font-size: .95rem; }

/* FAQ */
.faq-raster { display: grid; gap: 32px; }
.faq-seite p { margin-top: 16px; }
.faq-seite ul { list-style: none; padding: 0; margin: 24px 0 0; display: none; }
.faq-seite li a { display: block; padding: 6px 0; text-decoration: none; color: var(--muted); font-weight: 500; }
.faq-seite li a:hover { color: var(--forest); }
@media (min-width: 960px) {
  .faq-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 72px; align-items: start; }
  .faq-seite { position: sticky; top: 110px; }
  .faq-seite ul { display: block; }
}
.faq-gruppe { margin-top: 40px; }
.faq-pakete { margin-top: 28px; padding: 22px; border-radius: var(--radius); background: var(--sand-100); }
.faq-gruppe:first-child { margin-top: 0; }
.faq-gruppe h2 { font-size: clamp(1.35rem, 1.2rem + .8vw, 1.75rem); margin-bottom: 8px; }
.frage { border-bottom: 1px solid var(--line); }
.frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1.05rem; color: var(--forest-900); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23142c20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s; }
.frage[open] summary::after { transform: rotate(45deg); background-color: var(--sun-100); }
.frage__antwort { padding: 0 0 22px; max-width: 42em; }
@media (prefers-reduced-motion: reduce) { .frage summary::after { transition: none; } }

/* Formular */
.formular { display: grid; gap: 18px; }
.feld label, .feld legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.feld .pflicht { color: var(--muted); font-weight: 400; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"], .feld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--rand); border-radius: 12px;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px var(--sun-100); }
fieldset.feld { border: 0; padding: 0; margin: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--rand); background: var(--white); font-weight: 500; cursor: pointer; }
.wahl input { accent-color: var(--forest); width: 18px; height: 18px; margin: 0; }
.wahl label:has(input:checked) { border-color: var(--forest); background: var(--sun-100); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__fehler { color: var(--danger); font-weight: 500; }
.formular__fehler:empty { display: none; }
.kontakt-raster { display: grid; gap: 40px; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; } }
.karte { background: var(--sand-0); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.karte + .karte { margin-top: 16px; }
.karte h2 { font-size: 1.35rem; margin-bottom: 10px; }
.karte p + p { margin-top: 8px; }
.person { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* Bestellen (Korrektur 4: drei Schritte, Bon) */
.bestell-seite { padding-bottom: clamp(48px, 8vw, 96px); }
.bestell-seite.abschnitt { padding-top: 20px !important; }
.bestellung { display: grid; gap: 28px; grid-template-areas: "schritte" "nav-mobil" "bon" "abschluss"; }
.schritt-nav { grid-area: nav-mobil; }
.bestellung[data-schritt="3"] { grid-template-areas: "schritte" "bon" "abschluss" "nav-mobil"; }
.bestellung__schritte { grid-area: schritte; min-width: 0; }
.bon-huelle { grid-area: bon; min-width: 0; }
.abschluss { grid-area: abschluss; min-width: 0; }
@media (min-width: 900px) {
  .bestellung, .bestellung[data-schritt="3"] { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); grid-template-areas: "schritte bon" "abschluss bon" "nav-mobil bon"; grid-template-rows: auto auto 1fr; gap: 20px 48px; align-items: start; }
  .bon-huelle { position: sticky; top: 96px; max-height: calc(100vh - 96px - 96px); overflow-y: auto; border-radius: var(--radius); }
}
.schritt-anzeige { display: inline-block; margin: 0 0 8px; padding: 6px 12px; border-radius: 999px; background: var(--sun-100); color: var(--forest-900); font-weight: 600; font-size: .875rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.schritt-titel { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.15rem); line-height: 1.12; outline: none; }
.schritt-seite > .standorte, .schritt-seite > .zw-karten, .schritt-seite > .sets { margin-top: 16px; }
#schritt-2 > .zw-karten:first-child, #schritt-3 > .sets:first-child { margin-top: 16px; }
.schritt-seite .lead { margin-top: 6px; font-size: 1rem; color: var(--muted); }
.schritt-seite > .standorte, .schritt-seite > .zw-karten, .schritt-seite > .sets { margin-top: 16px; }
.schritt-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 4px; }
.schritt-nav .btn { min-width: 132px; }
#abbruch-hinweis { margin-bottom: 18px; }

/* Standorte */
.standorte { display: grid; gap: 14px; }
.standort { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand-0); padding: 16px; min-width: 0; }
.standort--zu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 16px 12px 20px; font-weight: 600; color: var(--forest-900); }
.standort__knoepfe { display: inline-flex; gap: 4px; }
.standort__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.standort__titel { font: 500 1.3rem/1.1 var(--serif); color: var(--forest-900); }
.entfernen { border: 0; background: transparent; color: var(--muted); font: 500 .9rem var(--sans); cursor: pointer; padding: 8px 10px; border-radius: 999px; text-decoration: underline; text-underline-offset: .2em; }
.entfernen:hover { color: var(--danger); background: var(--sand-100); }
.entfernen[data-aendern]:hover { color: var(--forest); }
.paketkarten { display: grid; gap: 8px; }
@media (min-width: 640px) { .paketkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paketkarte { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1.5px solid var(--rand); border-radius: 14px; background: var(--white); cursor: pointer; transition: border-color .15s, background-color .15s; }
.paketkarte input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.paketkarte .checkliste { pointer-events: none; } /* Korrektur 8: Klicks auf die Checkliste treffen das Auswahlfeld der Karte */
.paketkarte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.paketkarte__kopf b { font-weight: 600; color: var(--forest-900); }
.paketkarte__kopf .zahl { font-size: 1.2rem; font-weight: 500; color: var(--forest-900); }
.paketkarte__fuer { font-size: .84rem; line-height: 1.35; color: var(--muted); }
.paketkarte:has(input:checked) { border-color: var(--forest); background: var(--sun-100); box-shadow: inset 0 0 0 1px var(--forest); }
.paketkarte:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.paketinfo { margin-top: 12px; font-size: .92rem; color: var(--muted); }
.standort__hinweis { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--sun-100); color: var(--forest-900); font-size: .92rem; font-weight: 500; }
.standort__hinweis--knopf { background: transparent; padding: 0; }
.zeile-router { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.zeile-router label { font-weight: 600; }
.zeile-router small { display: block; color: var(--muted); font-weight: 400; font-size: .85rem; max-width: 26em; }
.zaehler { display: inline-flex; align-items: center; border: 1.5px solid var(--rand); border-radius: 999px; background: var(--white); }
.zaehler button { width: 44px; height: 44px; border: 0; background: transparent; font: 500 1.4rem/1 var(--sans); color: var(--forest-900); cursor: pointer; border-radius: 999px; }
.zaehler button:hover:not(:disabled) { background: var(--sand-100); }
.zaehler button:disabled { color: var(--sand-300); cursor: not-allowed; }
.zaehler input { width: 2.6em; height: 44px; border: 0; text-align: center; font: 600 1.1rem var(--sans); color: var(--ink); background: transparent; -moz-appearance: textfield; appearance: textfield; }
.zaehler input::-webkit-outer-spin-button, .zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.mehr-link { font-size: .88rem; font-weight: 600; }
.hinweis { padding: 14px 16px; border-radius: 12px; background: var(--sun-100); color: var(--forest-900); font-size: .95rem; }
.hinweis[hidden] { display: none; }
#standorte-voll { margin-top: 14px; }

/* Profi-Ausstattung: eine zugeklappte Zeile */
.profi { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--sand-300); }
.profi__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.profi__nur { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sand-100); font-size: .78rem; font-weight: 600; color: var(--muted); }
.profi__knopf { min-height: 40px; padding: .45em .95em; font-size: .92rem; }
.profi__knopf::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.profi__knopf[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.profi-feld { display: grid; gap: 14px; margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.profi-feld[hidden] { display: none; }
.profi-zeile { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.profi-zeile legend, .profi-zeile__titel { font-weight: 600; float: left; padding: 0; margin-right: auto; }
.profi-zeile small { flex-basis: 100%; color: var(--muted); font-size: .84rem; }
.profi-zeile__steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.profi-zeile select { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--white); font: 500 .95rem var(--sans); color: var(--ink); }
.umschalter { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--rand); border-radius: 999px; background: var(--white); padding: 3px; gap: 3px; }
.umschalter label { position: relative; cursor: pointer; }
.umschalter input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.umschalter span { display: block; padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 500; }
.umschalter input:checked + span { background: var(--forest); color: var(--sand-0); }
.umschalter input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 1px; }
@media (max-width: 520px) {
  .umschalter { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 14px; }
  .umschalter span { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; line-height: 1.25; }
}

/* Schritt 2: Zahlweise */
.zw-karten { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.zw-karte { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 18px 20px; border: 1.5px solid var(--rand); border-radius: var(--radius); background: var(--white); cursor: pointer; transition: border-color .15s, background-color .15s; }
.zw-karte input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.zw-karte__name { font: 500 1.25rem/1.2 var(--serif); color: var(--forest-900); }
.zw-karte__heute { text-align: right; font-size: .85rem; color: var(--muted); line-height: 1.2; }
.zw-karte__heute b { display: block; font-size: 1.45rem; font-weight: 500; color: var(--forest-900); }
.zw-karte__kuendbar { grid-column: 1 / -1; font-size: .88rem; font-weight: 600; color: var(--forest); }
.zw-karte__kuendbar[hidden] { display: none; }
.zw-karte:has(input:checked) { border-color: var(--forest); background: var(--sun-100); box-shadow: inset 0 0 0 1px var(--forest); }
.zw-karte:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.zahlung-info { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.zahlung-info summary { cursor: pointer; font-weight: 600; color: var(--forest); padding: 6px 0; }
.zahlung-info p { margin-top: 8px; font-size: .9rem; color: var(--muted); max-width: 44em; }

/* Schritt 3: Aufsteller-Sets */
.sets { display: grid; gap: 14px; }
@media (min-width: 640px) { .sets { grid-template-columns: 1fr 1fr; } }
.set-karte { display: grid; gap: 12px; align-content: start; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--sand-0); transition: border-color .15s, background-color .15s; }
.set-karte--an { border-color: var(--forest); background: var(--sun-100); }
.set-karte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.set-karte__kopf h2 { font-size: 1.35rem; }
.set-karte__optional { font-size: .78rem; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--sand-100); }
.set-karte__inhalt { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.set-karte__inhalt b { display: inline-block; min-width: 2.2em; font-variant-numeric: tabular-nums; color: var(--forest-900); }
.set-karte__preis { display: grid; }
.set-karte__preis .zahl { font-size: 1.35rem; color: var(--forest-900); }
.set-karte__preis small { color: var(--muted); font-size: .85rem; }
.set-karte__zaehler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fallback { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius); background: var(--sun-100); }
.fallback[hidden] { display: none; }
.fallback p { color: var(--forest-900); font-weight: 500; }
.fallback .btn { margin-top: 12px; }

/* Bon (wie der Bestellbon von gastrowlan, in gastwlan-Farben) */
.bon { margin: 0; }
.bon__kurz { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 14px 18px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.bon__kurz::-webkit-details-marker { display: none; }
.bon__kurz b { color: var(--forest-900); font: 500 1.15rem var(--serif); margin-left: 4px; }
.bon[open] .bon__kurz { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 900px) { .bon__kurz { display: none; } }
.bon__papier { position: relative; background: var(--white); padding: 22px 22px 34px; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle 7px at 50% 100%, transparent 6.5px, #000 7px) bottom / 16px 11px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle 7px at 50% 100%, transparent 6.5px, #000 7px) bottom / 16px 11px repeat-x; }
@media (max-width: 899px) { .bon[open] .bon__papier { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } }
.bon__kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--sand-300); }
.bon__kopf img { width: 26px; height: 26px; }
.bon__kopf b { display: block; font: 600 1.15rem/1.1 var(--serif); color: var(--forest-900); }
.bon__kopf span { display: block; font-size: .85rem; color: var(--muted); }
.bon__abschnitt { margin: 14px 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bon__zeilen { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.bon__zeilen li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.bon__zeilen li > span:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bon__zeilen small { display: block; color: var(--muted); font-size: .78rem; white-space: normal; }
.bon__eingerueckt { padding-left: 14px !important; color: var(--muted); }
.bon__decke { font-style: normal; font-size: .74rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--sand-100); color: var(--forest-900); margin-left: 4px; }
.bon__auf-anfrage { font-size: .8rem; font-weight: 600; color: var(--forest); white-space: nowrap; }
.bon__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 3px double var(--forest-900); font-weight: 600; }
.bon__summe .zahl { font-size: 1.9rem; line-height: 1; color: var(--forest-900); font-weight: 500; }
.bon__klein { text-align: right; font-size: .8rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.bon__klein + .bon__abschnitt { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--sand-300); }
.bon__danke { text-align: center; font: 500 1rem var(--serif); color: var(--forest-900); }

/* Abschluss in Schritt 3 */
.abschluss__firma { font-size: .92rem; color: var(--muted); }
.abschluss__knopf { width: 100%; margin-top: 10px; min-height: 56px; font-size: 1.05rem; }
@media (min-width: 900px) { .abschluss__knopf { width: auto; min-width: 280px; } }
.abschluss .vertrauen { margin-top: 20px; }
.kasse-fehler { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fbe9e3; color: var(--danger); font-weight: 500; font-size: .95rem; }
.kasse-fehler a { color: var(--danger); font-weight: 600; }
.kasse-fehler[hidden] { display: none; }

/* Feste Leiste unten (Korrektur 6, Nachtrag 5): auf allen Größen, Summe und Weiter immer sichtbar */
.leiste { display: none; }
.js .leiste { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(253, 251, 247, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(27, 42, 33, .08); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); }
.leiste__in { display: flex; align-items: center; gap: 10px; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.leiste__betraege { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; border: 0; background: transparent; padding: 4px 2px; font: 500 .8rem/1.2 var(--sans); color: var(--muted); cursor: pointer; }
.leiste__betraege b, .leiste__summe b { color: var(--forest-900); font: 600 1rem var(--sans); margin-left: 4px; font-variant-numeric: tabular-nums; }
.leiste__summe { display: none; }
.leiste__knopf { flex: none; min-height: 48px; padding: .6em 1.1em; }
.leiste__zurueck { flex: none; min-height: 48px; }
.leiste__zurueck { display: none !important; }
.js .bestell-seite { padding-bottom: 120px; }
.js .bestell-seite ~ * .fuss, .js main:has(.bestell-seite) + .fuss { padding-bottom: 110px; }
@media (min-width: 900px) {
  .leiste__in { padding: 12px var(--pad); gap: 14px; }
  .leiste__betraege { display: none; }
  .leiste__summe { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; margin: 0; font-size: .9rem; color: var(--muted); }
  .leiste__summe b { font-size: 1.15rem; }
  .leiste__summe small { font-size: .78rem; margin-left: 4px; }
  .leiste__zurueck:not([hidden]) { display: inline-flex !important; }
  .leiste__knopf { min-width: 200px; }
  .js .schritt-nav { display: none; }
}

/* Text / Artikel */
.text { max-width: 42em; font-size: 1.0625rem; }
@media (min-width: 720px) { .text { font-size: 1.15rem; } }
.text p + p { margin-top: .8em; }
.text > h2:first-child { margin-top: 0; }
.text h3 { margin: 1.4em 0 .4em; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }
.text { overflow-wrap: break-word; }
.text a { overflow-wrap: anywhere; }
.text table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95em; background: var(--sand-0); border-radius: 12px; overflow: hidden; }
.text th, .text td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.text thead th { background: var(--sand-100); font-weight: 600; }
.text tbody tr:last-child td { border-bottom: 0; }
.text aside { margin: 1.4em 0; padding: 18px 22px; border-left: 4px solid var(--sun); background: var(--sand-0); border-radius: 0 12px 12px 0; }
.text aside h3 { margin-top: 0; }
.text .pakete-kurz { margin: 1.2em 0 1.4em; }
.text .pakete-kurz__reihe a { text-decoration: none; }
.text h2 { margin: 1.6em 0 .5em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.text ul, .text ol { padding-left: 1.2em; }
.text li + li { margin-top: .4em; }
.artikel__kopf { max-width: 46em; }
.artikel__bild { margin: 36px 0 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sand-200); }
.artikel__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; }
.artikel__raster { display: grid; gap: 40px; }
@media (min-width: 980px) { .artikel__raster { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; } .artikel__seite { position: sticky; top: 100px; } }
.bloglist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--forest-900); }
.bloglist li { border-bottom: 1px solid var(--line); }
.bloglist a { display: grid; gap: 14px; padding: 26px 0; text-decoration: none; color: inherit; }
.bloglist a:hover h2 { color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.bloglist h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.bloglist p { color: var(--muted); max-width: 40em; }
.bloglist img { border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (min-width: 760px) { .bloglist a { grid-template-columns: 240px 1fr; gap: 32px; align-items: center; } .bloglist a.ohne-bild { grid-template-columns: 1fr; } .bloglist a.ohne-bild div { padding-left: 272px; } }

.mitte { min-height: 60vh; display: grid; align-content: center; }
.mitte .btn { margin-top: 28px; }
.sonne-klein { width: 72px; height: 72px; border-radius: 50%; background: var(--sun); margin-bottom: 28px; position: relative; }
.sonne-klein::after { content: ""; position: absolute; left: 26px; top: 18px; width: 18px; height: 32px; border: solid var(--forest-900); border-width: 0 4px 4px 0; transform: rotate(40deg); }

@media print {
  .kopf, .fuss, .schluss, .sig { display: none; }
  body { background: #fff; }
}

/* Korrektur 6 */
.besonderheiten { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 34em; }
.besonderheit { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px 16px 16px 4px; background: var(--sand-0); border: 1px solid var(--line); font-size: .95rem; line-height: 1.4; color: var(--ink); }
.besonderheit--mail { border-radius: 16px 16px 4px 16px; }
.besonderheit b { color: var(--forest-900); margin-right: 4px; }
.besonderheit a { text-decoration: none; }
.besonderheit a:hover b { text-decoration: underline; text-underline-offset: .18em; }
.besonderheit__zeichen { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); color: var(--forest-900); }
.besonderheit--mail .besonderheit__zeichen { background: var(--forest); color: var(--sand-0); }
.besonderheit__zeichen svg { width: 18px; height: 18px; }
.seitenkopf__zusatz { margin-top: 12px; color: var(--muted); max-width: 34em; }
.paket-zeilen { border-top: 1.5px solid var(--forest-900); }
.paket-zeile { display: grid; gap: 10px 32px; padding: 26px 0; border-bottom: 1px solid var(--sand-300); }
.paket-zeile h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.paket-zeile__inhalt { max-width: 40em; }
.paket-zeile__inhalt p + p, .paket-zeile__inhalt ul + p { margin-top: .6em; }
.paket-zeile__inhalt ul { margin: .4em 0 0; padding-left: 1.2em; }
.paket-zeile__inhalt li + li { margin-top: .3em; }
.paket-zeile__bsp { margin-top: .6em; font-weight: 600; color: var(--forest); }
.paket-zeile__preis { font-size: .9rem; color: var(--muted); }
@media (min-width: 900px) { .paket-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, .9fr); align-items: start; } .paket-zeile__preis { text-align: right; } }
.paket-zeilen + .pakete-kurz { margin-top: 28px; }
.branche-weiter { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.branchen-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.branchen-links a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--sand-0); border: 1px solid var(--line); color: var(--forest-900); font-weight: 600; font-size: .92rem; text-decoration: none; }
.branchen-links a:hover { border-color: var(--forest); }
.branchenliste { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--forest-900); }
.branchenliste li { border-bottom: 1px solid var(--line); }
.branchenliste a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; text-decoration: none; color: inherit; }
.branchenliste img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; }
.branchenliste__text { display: grid; gap: 2px; }
.branchenliste__name { font: 500 clamp(1.2rem, 1.05rem + .7vw, 1.6rem)/1.15 var(--serif); color: var(--forest-900); }
.branchenliste__kurz { color: var(--muted); font-size: .95rem; }
.branchenliste__link { color: var(--forest); font-size: .9rem; font-weight: 600; margin-top: 2px; }
.branchenliste .pfeil { color: var(--forest); width: 20px; height: 20px; }
.branchenliste a:hover .branchenliste__name { color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (min-width: 760px) { .branchenliste a { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 28px; padding: 18px 0; } .branchenliste img { width: 200px; height: 130px; } }
.technik-bild { position: relative; display: grid; place-items: center; }
.technik-bild::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--sand-200); }
.technik-bild img { position: relative; width: 78%; max-width: 420px; }
.schritte--kurz { display: grid; gap: 22px; }
.schritte--kurz .schritt { min-height: 0; padding-bottom: 0; justify-content: flex-start; }
.schritte--kurz .schritt::after { display: none; }
.schritte--kurz .schritt::before { top: -.1em; }
.schritte--kurz .schritt h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin-bottom: 6px; }
@media (min-width: 900px) { .schritte--kurz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.haken-liste { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.haken-liste li { position: relative; padding-left: 32px; }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23fdfbf7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wechsel { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); background: var(--sand-0); border: 1.5px dashed var(--sand-300); }
.wechsel__wahl { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--forest-900); cursor: pointer; }
.wechsel__wahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--forest); flex: none; }
.wechsel__text { margin-top: 8px; font-size: .9rem; color: var(--muted); }
.wechsel:has(input:checked) { border-style: solid; border-color: var(--forest); background: var(--sun-100); }
.bon__wechsel { margin-top: 10px; padding: 6px 10px; border-radius: 8px; background: var(--sun-100); font-size: .82rem; font-weight: 600; color: var(--forest-900); text-align: center; }
.bon__danke { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--sand-300); }
.paketkarte--gesperrt { opacity: .5; cursor: not-allowed; }
.paketkarte--gesperrt input { cursor: not-allowed; }
#mehr-pro { margin-top: 14px; }

/* Checkliste je Paket (Korrektur 6, Nachtrag 6) */
.checkliste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; line-height: 1.3; color: var(--ink); }
.checkliste > li, .checkliste > span { position: relative; display: block; padding-left: 22px; }
.checkliste > li::before, .checkliste > span::before { content: ""; position: absolute; left: 0; top: .1em; width: 15px; height: 15px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23fdfbf7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; }
.checkliste > li:first-child:only-child { padding-left: 22px; }
.preis__inhalt .checkliste { font-size: .95rem; gap: 6px; }
.preis__inhalt .checkliste > li::before { width: 17px; height: 17px; background-size: 10px; }

/* Korrektur 7: Anmelden im Kopf und im Menü */
.kopf__login { display: none !important; }
@media (min-width: 1200px) { .kopf__login { display: inline-flex !important; } }
.kopf .btn { white-space: nowrap; }
.marke__name { white-space: nowrap; }
.menue a.menue__login { display: flex; justify-content: center; margin-top: 16px; width: 100%; min-height: 48px; font: 600 1rem var(--sans) !important; border-bottom: 1.5px solid var(--forest) !important; padding: .7em 1.25em !important; }
.menue .sprache + a.menue__login { margin-top: 10px; }
.ki-web__schalter, .ki-web__status { white-space: nowrap; }
@media (max-width: 420px) { .ki-web__unten { grid-template-columns: 1fr; } }

/* KI-Seite */
.ki-kopf .seitenkopf--bild { align-items: center; }
.ki-handy { width: min(300px, 78vw); margin: 0 auto; aspect-ratio: 200 / 410; container-type: inline-size; transform: rotate(-4deg); }
.ki-handy__koerper { width: 100%; height: 100%; border-radius: 16.8cqw; background: #18241d; padding: 4cqw; box-shadow: 0 8cqw 16cqw rgba(20,44,32,.22), inset 0 0 0 .95cqw #2e3d34; }
.ki-handy__schirm { height: 100%; border-radius: 13.5cqw; background: var(--sand-0); overflow: hidden; display: flex; flex-direction: column; padding: 7cqw 6cqw 6cqw; }
.ki-handy__leiste { display: flex; justify-content: space-between; align-items: center; font: 600 max(4.6cqw, 10px)/1 var(--sans); color: var(--ink); padding: 0 2cqw; }
.ki-handy__insel { width: 24cqw; height: 6.8cqw; border-radius: 5cqw; background: #18241d; }
.ki-handy__kopf { display: flex; align-items: center; gap: 3cqw; margin-top: 7cqw; padding-bottom: 4cqw; border-bottom: 1px solid var(--line); }
.ki-handy__kopf svg { width: 10cqw; height: 10cqw; flex: none; }
.ki-handy__kopf b { display: block; font: 600 max(6cqw, 12px)/1.1 var(--serif); color: var(--forest-900); }
.ki-handy__kopf small { display: block; font-size: max(4.4cqw, 10px); color: var(--muted); }
.ki-handy__verlauf { flex: 1; display: flex; flex-direction: column; gap: 3.5cqw; padding-top: 5cqw; }
.blase { margin: 0; max-width: 86%; padding: 3cqw 4.2cqw; border-radius: 6cqw; font-size: max(4.6cqw, 10.5px); line-height: 1.35; }
.blase--ich { align-self: flex-end; background: var(--forest); color: var(--sand-0); border-bottom-right-radius: 1.5cqw; }
.blase--ki { align-self: flex-start; background: var(--sun-100); color: var(--forest-900); border-bottom-left-radius: 1.5cqw; }
.ki-handy__eingabe { display: flex; align-items: center; justify-content: space-between; margin-top: 4cqw; padding: 3cqw 3cqw 3cqw 5cqw; border-radius: 8cqw; border: .7cqw solid var(--sand-300); background: var(--white); font-size: max(4.4cqw, 10px); color: var(--muted); }
.ki-handy__eingabe i { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.8 12.7 8l-4.2 4.2' fill='none' stroke='%23142c20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 55% no-repeat; }
.ki-raster { display: grid; gap: 24px 64px; }
.ki-raster h2 { margin-bottom: 18px; }
.ki-raster__text { max-width: 36em; align-self: end; }
.ki-raster__text p + p { margin-top: 12px; color: var(--muted); }
@media (min-width: 900px) { .ki-raster { grid-template-columns: 1fr 1fr; } }
.ki-beispiele { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ki-beispiele li { padding: 10px 16px; border-radius: 18px 18px 18px 4px; background: var(--sun-100); color: var(--forest-900); font-weight: 600; font-size: .95rem; }
.ki-web-raster { display: grid; gap: 32px 64px; align-items: center; }
@media (min-width: 900px) { .ki-web-raster { grid-template-columns: 1.2fr 1fr; } }
.ki-web { border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; font-size: .88rem; max-width: 620px; width: 100%; }
.ki-web__leiste { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sand-100); border-bottom: 1px solid var(--line); }
.ki-web__punkte { display: inline-flex; gap: 6px; }
.ki-web__punkte i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand-300); }
.ki-web__url { flex: 1; padding: 4px 12px; border-radius: 999px; background: var(--white); color: var(--muted); font-size: .8rem; }
.ki-web__inhalt { padding: 16px; display: grid; gap: 12px; }
.ki-web__kopf { display: flex; align-items: center; gap: 8px; }
.ki-web__kopf svg { width: 22px; height: 22px; }
.ki-web__kopf b { font: 600 1.05rem var(--serif); color: var(--forest-900); }
.ki-web__kopf span { margin-left: auto; color: var(--muted); font-weight: 600; }
.ki-web__kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ki-web__kennzahlen > div { padding: 10px 12px; border-radius: 12px; background: var(--sand-0); border: 1px solid var(--line); }
.ki-web__kennzahlen small { display: block; color: var(--muted); font-size: .76rem; }
.ki-web__kennzahlen b { display: flex; align-items: center; gap: 6px; font: 500 1.35rem/1.2 var(--serif); color: var(--forest-900); }
.ki-web__an { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 3px rgba(47,158,91,.18); flex: none; }
.ki-web__teil { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sand-0); }
.ki-web__titel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ki-web__titel b { color: var(--forest-900); }
.ki-web__knopf { padding: 3px 10px; border-radius: 999px; background: var(--forest); color: var(--sand-0); font-size: .76rem; font-weight: 600; }
.ki-web__teil ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ki-web__teil li { display: flex; gap: 10px; color: var(--ink); }
.ki-web__teil li span { color: var(--muted); font-variant-numeric: tabular-nums; }
.ki-web__unten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ki-web__schalter, .ki-web__status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--forest); }
.ki-web__schalter i { position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--forest); }
.ki-web__schalter i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--sand-0); }
.ki-sehen { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1.5px solid var(--forest-900); }
.ki-sehen li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sand-300); font-weight: 500; }
.ki-sehen__paket { flex: none; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--sand-0); border: 1px solid var(--line); color: var(--forest-900); white-space: nowrap; }
.ki-sehen__paket--marketing { background: var(--sun-100); border-color: var(--sun-300); }
.ki-sehen__paket--pro { background: var(--forest); border-color: var(--forest); color: var(--sand-0); }

/* Login „Mein Gast WLAN“ */
.login-seite { padding-top: clamp(32px, 5vw, 72px); }
.login-raster { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .login-raster { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; } }
.login-karte { background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 40px); }
.login-karte__marke svg { width: 40px; height: 40px; }
.login-karte h1 { margin-top: 14px; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); }
.login-karte__lead { margin-top: 8px; color: var(--muted); }
.login-form { display: grid; gap: 14px; margin-top: 22px; }
.login-form__knopf { width: 100%; min-height: 52px; margin-top: 4px; }
.login-form__antwort { padding: 12px 14px; border-radius: 12px; background: var(--sun-100); color: var(--forest-900); font-size: .93rem; font-weight: 500; }
.login-form__vergessen { margin: 0; }
.textknopf { border: 0; background: none; padding: 4px 0; font: 600 .95rem var(--sans); color: var(--forest); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.textknopf:hover { color: var(--forest-700); }
.login-karte__neu { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.login-seite__info { display: grid; gap: 18px; justify-items: start; }
.login-seite__info p { max-width: 34em; color: var(--muted); }

/* Korrektur 8: Marketing an die eigene Gästeliste in drei Schritten (F116) */
.mail-schritte { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: ms; }
.mail-schritte li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 44px 16px 18px; background: var(--sand-0); border: 1px solid var(--line); border-radius: 18px; }
.mail-schritte li::after { counter-increment: ms; content: counter(ms); position: absolute; top: 14px; right: 18px; font: 600 .85rem/1 var(--sans); color: var(--muted); }
.mail-schritte__zeichen { width: 48px; height: 48px; border-radius: 50%; background: var(--sun); color: var(--forest-900); display: grid; place-items: center; }
.mail-schritte__zeichen svg { width: 24px; height: 24px; }
.mail-schritte p { margin: 0; font-size: 1.05rem; line-height: 1.4; color: var(--forest-900); }
.mail-abschnitt__mehr { margin-top: 22px; }
@media (min-width: 860px) {
  .mail-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .mail-schritte li { grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 24px 24px 26px; }
}
.preis__inhalt .preis__fuer:first-child { margin-top: 0; }
/* Korrektur 8: Paketseite Marketing */
.marketing-kopf .seitenkopf--bild { align-items: center; }
.marketing-kopf__knopf { margin-top: 22px; }
.marketing-kopf__liste { max-width: 420px; width: 100%; justify-self: center; }
.marketing-paket { display: grid; gap: 28px; }
.marketing-paket h2 { margin-bottom: 14px; }
.marketing-paket .checkliste { font-size: 1.02rem; gap: 10px; }
.marketing-paket .checkliste > li::before { top: .15em; }
.beispiel-mails { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.beispiel-mails li { display: grid; gap: 2px; padding: 12px 16px; background: var(--sand-0); border: 1px solid var(--line); border-radius: 14px; }
.beispiel-mails a { font-size: .85rem; font-weight: 600; color: var(--forest); text-decoration: none; }
.beispiel-mails a:hover { text-decoration: underline; }
.marketing-paket + .wrap .pakete-kurz { margin-top: 36px; }
@media (min-width: 900px) { .marketing-paket { grid-template-columns: 1fr 1fr; gap: 56px; } }
/* Korrektur 8: Preise je Zahlweise (F61) als Tabelle im Angebot */
.block__inhalt .vergleich-huelle { margin-top: 16px; }
.zahlweisen { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.zahlweisen caption { caption-side: bottom; text-align: left; padding: 10px 14px; font-size: .85rem; color: var(--muted); }
.zahlweisen th, .zahlweisen td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.zahlweisen th[scope="row"] { text-align: left; font-weight: 600; color: var(--forest-900); white-space: normal; }
.zahlweisen thead th { font-weight: 600; font-size: .85rem; color: var(--muted); background: var(--sand-100); }
.zahlweisen tbody tr:last-child th, .zahlweisen tbody tr:last-child td { border-bottom: 0; }
.ki-web-raster .ki-sehen { margin: 22px 0 0; }
.ki-web-raster + .wrap .pakete-kurz { margin-top: clamp(32px, 5vw, 56px); }
.block__inhalt { min-width: 0; }
@media (max-width: 479px) { .zahlweisen { font-size: .88rem; } .zahlweisen th, .zahlweisen td { padding: 10px 8px; } }
@media (max-width: 359px) { .zahlweisen { font-size: .8rem; } .zahlweisen th, .zahlweisen td { padding: 9px 5px; } }
.zahlweisen thead td { background: var(--sand-100); }
/* Korrektur 9: Preistabellen der AGB (K183816) auf schmalen Bildschirmen seitlich scrollbar statt Überlauf der Seite */
@media (max-width: 719px) {
  .text .legal-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .85em; }
  .text .legal-table th, .text .legal-table td { padding: 8px 10px; }
}
@media (max-width: 719px) { .text .legal-table td:first-child, .text .legal-table th:first-child { min-width: 9.5em; } }