/*
 * Die Startseite (landing.html, neu gestaltet 2026-11-01).
 *
 * Eine Aufgabe: dass der Besucher seine eigene dandori-Umgebung anfragt. Darum ist das Auffaelligste
 * auf der Seite die Adresse, die er bekommt, in grosser Schrift und mit seinem eigenen Namen, und
 * daneben ein Plan, der sich mit diesem Namen einmal von selbst besetzt.
 *
 * Regeln dieser Datei:
 *  - Eine Schrift: Source Sans 3 (die Hausschrift), drei Schnitte aus /assets/fonts/.
 *  - dandori-Blau nur fuer Handlungen und Adressen; Nachtblau fuer Text und das eine dunkle Band.
 *  - Rot, Gelb, Gruen nur als Zustand eines Plans (offen, teilweise, besetzt) - nie als Schmuck.
 *  - Eine Bewegung von selbst (der Plan im Helden besetzt sich), alles andere nur auf eine Handlung.
 *  - Hell und dunkel: `data-theme` auf <html>, vom Server aus dem Keks `swp_theme` geschrieben.
 */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-v18-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-v18-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-v18-latin-700.woff2") format("woff2");
}

:root {
  --lp-blue: #0059ff;          /* dandori-Blau: der eine Knopf */
  --lp-blue-hover: #003baa;
  --lp-blue-ink: #004ad4;      /* Blau als Schrift */
  --lp-on-blue: #ffffff;
  --lp-ink: #0d1b3e;           /* Nachtblau: Text */
  --lp-ink-2: #46557a;         /* zweite Stimme */
  --lp-paper: #f5f8fd;         /* Grund */
  --lp-card: #ffffff;          /* was darauf liegt */
  --lp-line: #dbe3f2;
  --lp-line-2: #c3d0ea;
  --lp-soft: #e7eeff;          /* der Platz, die gewaehlte Woche */
  --lp-night: #0d1b3e;         /* das Band des Films */
  --lp-night-ink: #c9d5f2;
  --lp-green: #93c400;         /* besetzt */
  --lp-green-ink: #4a6600;
  --lp-amber: #f2a900;         /* teilweise */
  --lp-red: #e0453a;           /* offen */
  --lp-shadow: 0 1px 2px rgb(13 27 62 / 0.06), 0 14px 36px rgb(13 27 62 / 0.11);
  --lp-font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --lp-blue: #2a63f5;
  --lp-blue-hover: #4a7dff;
  --lp-blue-ink: #9cc1ff;
  --lp-ink: #e8eefb;
  --lp-ink-2: #a9b6d3;
  --lp-paper: #0b1430;
  --lp-card: #121e40;
  --lp-line: #24335f;
  --lp-line-2: #34477d;
  --lp-soft: #1c2b57;
  --lp-night: #050b1c;
  --lp-night-ink: #b8c6e6;
  --lp-green-ink: #b5e12a;
  --lp-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 36px rgb(0 0 0 / 0.38);
  color-scheme: dark;
}

/* ── Grundlagen ──────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body.lp {
  margin: 0;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font: 400 1.125rem/1.55 var(--lp-font);
  -webkit-font-smoothing: antialiased;
}
.lp img { display: block; max-width: 100%; height: auto; }
.lp a { color: var(--lp-blue-ink); }
.lp :focus-visible { outline: 3px solid var(--lp-blue); outline-offset: 3px; border-radius: 6px; }
.lp h1, .lp h2, .lp h3 { text-wrap: balance; }
.lp h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.lp h3 { margin: 0; font-weight: 700; letter-spacing: -0.012em; }

.lp-shell { width: min(1180px, 100% - 48px); margin-inline: auto; }
@media (max-width: 560px) {
  .lp-shell { width: calc(100% - 32px); }
}
.lp-lead {
  max-width: 40em;
  margin: 1rem 0 0;
  color: var(--lp-ink-2);
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem);
}
.lp-note { max-width: 70ch; margin: 1.4rem 0 0; color: var(--lp-ink-2); font-size: 0.95rem; }

.lp-skip {
  position: absolute; left: -999px; top: 0.75rem; z-index: 50;
  padding: 0.55rem 0.9rem; border-radius: 8px;
  background: var(--lp-card); color: var(--lp-ink); font-weight: 700;
}
.lp-skip:focus { left: 1rem; }

/* Der eine Knopf: "Kostenlos starten", ueberall gleich. */
.lp-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 1.6rem;
  border: 0; border-radius: 12px;
  background: var(--lp-blue); color: var(--lp-on-blue);
  font: 700 1.1rem/1 var(--lp-font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 20px rgb(0 89 255 / 0.28);
}
.lp a.lp-button { color: var(--lp-on-blue); }
.lp-button:hover { background: var(--lp-blue-hover); }
.lp-button--small { min-height: 42px; padding: 0 1.05rem; font-size: 1rem; box-shadow: none; }
.lp-button--quiet,
.lp a.lp-button--quiet {
  background: transparent; color: var(--lp-blue-ink);
  box-shadow: inset 0 0 0 2px var(--lp-line-2);
}
.lp-button--quiet:hover { background: var(--lp-soft); }

.lp-link {
  font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.lp-link--play { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-link--play::before {
  content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--lp-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5z' fill='white'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

.lp-checks { display: grid; gap: 0.6rem; margin: 1.2rem 0 1.4rem; padding: 0; list-style: none; }
.lp-checks li, .lp-facts li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.lp-checks li::before, .lp-facts li::before {
  content: ""; width: 0.42rem; height: 0.8rem; margin-left: 0.3rem;
  border: solid var(--lp-green-ink); border-width: 0 2.5px 2.5px 0;
  transform: translateY(-0.12rem) rotate(45deg);
}

/* ── Kopf ──────────────────────────────────────────────────────────────────────────────── */

.lp-top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--lp-paper) 90%, transparent);
  border-bottom: 1px solid var(--lp-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lp-top__inner { display: flex; align-items: center; gap: 0.35rem 0.9rem; min-height: 66px; }
.lp-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--lp-ink); text-decoration: none;
  font-size: 1.4rem; font-weight: 700; letter-spacing: -0.015em;
}
.lp a.lp-brand { color: var(--lp-ink); }
/* "eine App von OptWare": hinter einem feinen Strich neben dem Namen, am Telefon klein darunter */
.lp-ident { display: flex; align-items: center; gap: 0.9rem; }
.lp-maker {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  padding-left: 0.9rem; border-left: 1px solid var(--lp-line-2);
  color: var(--lp-ink-2); font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.lp-maker img { width: auto; height: 30px; }
/* Das Logo der Firma gibt es fuer hellen und dunklen Grund; das Thema zeigt eines davon. */
.lp img.lp-logo--dark { display: none; }
:root[data-theme="dark"] .lp img.lp-logo--light { display: none; }
:root[data-theme="dark"] .lp img.lp-logo--dark { display: block; }
.lp-top__spacer { flex: 1; }
.lp a.lp-top__link { padding: 0.5rem 0.35rem; color: var(--lp-ink-2); font-weight: 600; text-decoration: none; }
.lp a.lp-top__link:hover { color: var(--lp-ink); }
.lp-top__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 10px; background: transparent; color: var(--lp-ink-2); cursor: pointer;
}
.lp-top__icon:hover { background: var(--lp-soft); color: var(--lp-ink); }
.lp-top__icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lp-sun { display: none; }
:root[data-theme="dark"] .lp-sun { display: block; }
:root[data-theme="dark"] .lp-moon { display: none; }
@media (max-width: 600px) {
  .lp-top__inner { gap: 0.25rem 0.5rem; }
  .lp a.lp-top__link[href="/status"], .lp-top__icon { display: none; }
  .lp-brand { font-size: 1.25rem; }
  .lp-ident { flex-direction: column; align-items: flex-start; gap: 0; }
  .lp-maker {
    gap: 0.3rem; margin-top: -0.2rem; padding-left: calc(28px + 0.55rem); border-left: 0;
    font-size: 0.72rem;
  }
  .lp-maker img { height: 19px; }
}

/* ── Der Held: das Versprechen, der Name, die Adresse - und der Plan mit diesem Namen ───────── */

/* Oben das Versprechen ueber die ganze Breite, darunter Seite an Seite: das Feld fuer den Namen und
   der Plan, der ihn sofort traegt - Eingabe und Wirkung auf einer Hoehe. */
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "head head" "copy window";
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3.5rem); align-items: start;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
}
.lp-hero__head { grid-area: head; }
.lp-hero__copy { grid-area: copy; }
.lp-window { grid-area: window; }
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "copy" "window"; }
}
.lp-hero__title {
  max-width: 24ch; margin: 0;
  font-size: clamp(2.6rem, 1.35rem + 4.4vw, 4.75rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.035em;
}
.lp-hero__lead {
  max-width: 36em; margin: 1.2rem 0 0;
  color: var(--lp-ink-2); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.32rem);
}

.lp-builder { max-width: 42rem; margin-top: 0.4rem; }
.lp-builder__label { display: block; margin-bottom: 0.55rem; font-size: 1.08rem; font-weight: 700; }
.lp-builder__row {
  display: flex; gap: 0.5rem; padding: 0.4rem;
  background: var(--lp-card); border: 2px solid var(--lp-line-2); border-radius: 16px;
  box-shadow: var(--lp-shadow);
}
.lp-builder__row:focus-within { border-color: var(--lp-blue); }
.lp-builder__input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 0.85rem;
  border: 0; background: transparent; color: var(--lp-ink);
  font: 600 1.22rem/1.2 var(--lp-font);
}
.lp-builder__input:focus { outline: none; }
.lp-builder__input::placeholder { color: var(--lp-ink-2); opacity: 0.75; font-weight: 400; }
@media (max-width: 560px) {
  .lp-builder__row { flex-direction: column; }
  .lp-builder__row .lp-button { width: 100%; }
}

/* Die Adresse: das Bild dieser Seite. Ihre Groesse richtet sich nach ihrer Laenge (`--chars`, aus
   landing.js), damit auch ein langer Name in eine Zeile passt, statt mitten im Wort zu brechen. */
.lp-plate { container-type: inline-size; margin: 1.15rem 0 0; }
.lp-plate__label { display: block; margin-bottom: 0.15rem; color: var(--lp-ink-2); font-size: 0.98rem; font-weight: 600; }
.lp-plate__address {
  display: block; white-space: nowrap;
  font-size: clamp(1.15rem, calc(100cqi / (var(--chars, 26) * 0.55)), 3rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
}
.lp-plate__slug { color: var(--lp-blue-ink); }
.lp-plate__domain { color: var(--lp-ink); opacity: 0.42; }
.lp-plate[data-empty] .lp-plate__slug { color: var(--lp-ink-2); opacity: 0.55; }

.lp-facts { display: flex; flex-wrap: wrap; gap: 0.45rem 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-weight: 600; }
.lp-facts li { grid-template-columns: 1.1rem auto; }
.lp-hero__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.8rem; margin: 1.7rem 0 0; }

/* Das Fenster: Adresszeile und der Plan der Woche, wie dandori ihn zeigt. */
.lp-window {
  overflow: hidden;
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 18px;
  box-shadow: var(--lp-shadow);
}
.lp-window__bar {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--lp-paper) 65%, var(--lp-card));
  border-bottom: 1px solid var(--lp-line);
}
.lp-window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-line-2); }
.lp-window__url {
  flex: 1; min-width: 0; margin-left: 0.6rem; padding: 0.3rem 0.7rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 8px; background: var(--lp-paper); color: var(--lp-ink-2); font-size: 0.9rem;
}
.lp-window__url [data-slug] { color: var(--lp-ink); font-weight: 600; }

.lp-board { padding: 1rem 1rem 1.1rem; font-size: 0.85rem; }
.lp-board__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.lp-board__name { overflow: hidden; max-width: 14ch; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.lp-board__week { color: var(--lp-ink-2); font-weight: 600; }
.lp-board__auto {
  margin-left: auto; padding: 0.28rem 0.7rem;
  border: 2px solid var(--lp-blue); border-radius: 999px;
  color: var(--lp-blue-ink); font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.lp-board__days { display: flex; gap: 0.35rem; margin: 0.85rem 0; }
.lp-board__days span {
  padding: 0.22rem 0.5rem; border: 1px solid var(--lp-line); border-radius: 8px;
  color: var(--lp-ink-2); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.lp-board__days .is-on { border-color: var(--lp-blue); background: var(--lp-soft); color: var(--lp-blue-ink); }
.lp-board__grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 0.4rem; align-items: center; }
.lp-board__shift { color: var(--lp-ink-2); font-size: 0.78rem; font-weight: 600; text-align: center; }
.lp-board__task { padding-right: 0.35rem; font-size: 0.82rem; font-weight: 700; }
.lp-cell {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 50px; padding: 0.5rem 0.3rem;
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 10px;
}
.lp-seat {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--lp-soft); border: 1.5px solid var(--lp-ink);
  color: var(--lp-ink); font-size: 0.66rem; font-style: normal; font-weight: 700;
}
.lp-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-green); }
.lp-board__foot { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.95rem; }
.lp-board__bar { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: var(--lp-soft); }
.lp-board__bar i { display: block; width: 100%; height: 100%; background: var(--lp-green); transform-origin: left; }
.lp-board__done {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem;
  border: 1.5px solid var(--lp-green); border-radius: 99px;
  background: color-mix(in srgb, var(--lp-green) 16%, var(--lp-card));
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.lp-board__done::before {
  content: ""; width: 0.5rem; height: 0.26rem;
  border: solid var(--lp-green-ink); border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
@media (max-width: 420px) {
  .lp-board__auto { display: none; }
  .lp-seat { width: 26px; height: 26px; font-size: 0.6rem; }
}

/* Die eine Bewegung von selbst: der Plan besetzt sich, Platz fuer Platz, die Ampel jeder Zeile
   springt auf Gruen, wenn ihr letzter Platz besetzt ist, dann "Alles besetzt". Ohne Bewegung (oder
   ohne Animation) steht sofort der fertige Plan da - er ist der Grundzustand dieser Regeln. */
@media (prefers-reduced-motion: no-preference) {
  .lp-seat { animation: lp-seat 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; animation-delay: calc(0.7s + var(--i) * 0.14s); }
  .lp-dot { animation: lp-dot 0.3s ease-out both; animation-delay: calc(0.86s + var(--i) * 0.14s); }
  .lp-board__bar i { animation: lp-bar 1.75s ease-out 0.7s both; }
  .lp-board__done { animation: lp-pop 0.4s ease-out 2.6s both; }
}
@keyframes lp-seat {
  from { transform: scale(0.35); opacity: 0; }
}
@keyframes lp-dot {
  from { background: var(--lp-red); }
}
@keyframes lp-bar {
  from { transform: scaleX(0); }
}
@keyframes lp-pop {
  from { transform: scale(0.8); opacity: 0; }
}

/* ── Der Film: das einzige dunkle Band ─────────────────────────────────────────────────── */

.lp-night { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--lp-night); color: var(--lp-night-ink); }
.lp-night__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 980px) {
  .lp-night__inner { grid-template-columns: minmax(0, 1fr); }
}
.lp-night h2 { color: #ffffff; }
.lp-night__copy p { margin: 1rem 0 0; font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); }
.lp-film { margin: 0; }
.lp-film__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: #000000; border-radius: 16px; box-shadow: 0 26px 60px rgb(0 0 0 / 0.45);
}
.lp-film__frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-film__play {
  position: absolute; inset: 0; width: fit-content; height: fit-content; margin: auto;
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 56px; padding: 0.6rem 1.5rem 0.6rem 0.65rem;
  border: 0; border-radius: 999px; background: var(--lp-blue); color: var(--lp-on-blue);
  font: 700 1.15rem/1 var(--lp-font); cursor: pointer;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);
}
.lp-film__play:hover { background: var(--lp-blue-hover); }
.lp-film__play[hidden] { display: none; }
.lp-film__icon {
  position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: #ffffff;
}
.lp-film__icon::after {
  content: ""; position: absolute; top: 50%; left: 55%; translate: -50% -50%;
  border-style: solid; border-width: 0.55rem 0 0.55rem 0.85rem;
  border-color: transparent transparent transparent var(--lp-blue);
}
.lp-film figcaption { margin-top: 0.9rem; font-size: 0.95rem; }

/* ── Ihre Umgebung ─────────────────────────────────────────────────────────────────────── */

.lp-own {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 980px) {
  .lp-own { grid-template-columns: minmax(0, 1fr); }
}
.lp-own__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.2rem; margin: 2.2rem 0 0; }
.lp-own__list div { padding-top: 0.9rem; border-top: 2px solid var(--lp-ink); }
.lp-own__list dt { font-size: 1.1rem; font-weight: 700; }
.lp-own__list dd { margin: 0.3rem 0 0; color: var(--lp-ink-2); }
@media (max-width: 640px) {
  .lp-own__list { grid-template-columns: minmax(0, 1fr); }
}

.lp-login {
  display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 22px;
  background:
    linear-gradient(var(--lp-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--lp-line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--lp-soft);
}
.lp-login__card {
  display: grid; gap: 0.7rem; width: min(100%, 340px); padding: 1.6rem;
  background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 18px;
  box-shadow: var(--lp-shadow);
}
.lp-login__logo {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: var(--lp-ink); color: var(--lp-paper); font-size: 1.2rem; font-weight: 700;
}
.lp-login__title { margin: 0.2rem 0 0.25rem; font-size: 1.15rem; }
.lp-login__title b { overflow-wrap: anywhere; }
.lp-login__field {
  display: block; padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--lp-line-2); border-radius: 10px;
  color: var(--lp-ink-2); font-size: 0.95rem;
}
.lp-login__button {
  display: block; padding: 0.78rem; border-radius: 10px;
  background: var(--lp-ink); color: var(--lp-paper); font-weight: 700; text-align: center;
}
.lp-login__address { overflow: hidden; color: var(--lp-ink-2); font-size: 0.85rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.lp-login__address [data-slug] { color: var(--lp-blue-ink); font-weight: 700; }

/* ── So laeuft Ihre Woche: eine Reihenfolge, darum Ziffern ─────────────────────────────── */

.lp-steps { padding-block: clamp(3rem, 7vw, 5rem); }
.lp-steps__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 2.2rem 0 0; padding: 0; list-style: none; counter-reset: lp-step;
}
@media (max-width: 860px) {
  .lp-steps__list { grid-template-columns: minmax(0, 1fr); }
}
.lp-steps__list li { counter-increment: lp-step; }
.lp-steps__list img { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px; }
.lp-steps__list h3 { display: flex; align-items: baseline; gap: 0.65rem; margin: 1.15rem 0 0.35rem; font-size: 1.3rem; }
.lp-steps__list h3::before {
  content: counter(lp-step);
  color: var(--lp-blue-ink); font-size: 2.6rem; font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
}
.lp-steps__list p { margin: 0; color: var(--lp-ink-2); }

/* ── Branchen: Reiter, jede mit eigener Adresse (#produktion, #krankenhaus, #verein) ─────── */

.lp-trades { padding-block: clamp(3rem, 7vw, 5rem); scroll-margin-top: 66px; }
.lp-tabs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.8rem 0 1.6rem; }
.lp-tab {
  min-height: 48px; padding: 0 1.3rem;
  border: 2px solid var(--lp-line-2); border-radius: 999px; background: transparent;
  color: var(--lp-ink); font: 700 1.05rem/1 var(--lp-font); cursor: pointer;
}
.lp-tab:hover { border-color: var(--lp-ink-2); }
.lp-tab[aria-selected="true"] { background: var(--lp-ink); border-color: var(--lp-ink); color: var(--lp-paper); }
.lp-trade { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.lp-trade.is-active { display: grid; }
@media (max-width: 860px) {
  .lp-trade.is-active { grid-template-columns: minmax(0, 1fr); }
}
.lp-trade h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.lp-trade__copy > p { margin: 0.7rem 0 0; color: var(--lp-ink-2); }
.lp-trade__shot { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px; box-shadow: var(--lp-shadow); }

/* ── Alles drin: eine Liste, die man ueberfliegt ───────────────────────────────────────── */

.lp-all { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.lp-all__list { margin: 2rem 0 0; padding: 0; list-style: none; columns: 2 24rem; column-gap: 3rem; }
.lp-all__list li { padding: 0.9rem 0; border-top: 1px solid var(--lp-line-2); color: var(--lp-ink-2); break-inside: avoid; }
.lp-all__list b { display: block; color: var(--lp-ink); font-size: 1.08rem; }

/* ── Der Weg zur Umgebung: das Band, in dem man anfaengt ───────────────────────────────── */

.lp-path {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--lp-soft);
  box-shadow: 0 0 0 100vmax var(--lp-soft);
  clip-path: inset(0 -100vmax);
  scroll-margin-top: 66px;
}
.lp-path__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem;
  margin: 2.6rem 0 0; padding: 0; list-style: none; counter-reset: lp-path;
}
@media (max-width: 820px) {
  .lp-path__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
}
.lp-path__list li { position: relative; padding-top: 1.7rem; border-top: 3px solid var(--lp-line-2); counter-increment: lp-path; }
.lp-path__list li::before {
  content: counter(lp-path);
  position: absolute; top: -1.15rem; left: 0;
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--lp-soft); border: 3px solid var(--lp-blue);
  color: var(--lp-blue-ink); font-size: 0.95rem; font-weight: 700;
}
.lp-path__list b { display: block; font-size: 1.12rem; }
.lp-path__list span { color: var(--lp-ink-2); }
.lp-path__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.6rem; }
.lp-path__echo { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); font-weight: 700; overflow-wrap: anywhere; }
.lp-path__echo [data-slug] { color: var(--lp-blue-ink); }
/* Bevor ein Name dasteht, ist die Adresse ein Beispiel und sieht auch so aus. */
body:not(.has-company) .lp-path__echo { opacity: 0.45; }
.lp-notice {
  max-width: 60ch; margin: 1.6rem 0 0; padding: 0.85rem 1rem;
  background: var(--lp-card); border: 1px solid var(--lp-line-2); border-radius: 12px;
}

/* ── Fragen ────────────────────────────────────────────────────────────────────────────── */

.lp-faq {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) {
  .lp-faq { grid-template-columns: minmax(0, 1fr); }
}
.lp-faq__list details { border-top: 1px solid var(--lp-line-2); }
.lp-faq__list details:last-child { border-bottom: 1px solid var(--lp-line-2); }
.lp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 0.9rem 0; cursor: pointer; list-style: none;
  font-size: 1.12rem; font-weight: 700;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; flex: none; color: var(--lp-blue-ink); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.lp-faq details[open] summary::after { content: "\2013"; }
.lp-faq details p { max-width: 62ch; margin: 0 0 1.25rem; color: var(--lp-ink-2); }

/* ── Mehr als 100 Personen ─────────────────────────────────────────────────────────────── */

.lp-more {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start;
  padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--lp-line);
}
@media (max-width: 600px) {
  .lp-more { grid-template-columns: minmax(0, 1fr); }
}
.lp-more h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.lp-more__copy > p { max-width: 60ch; margin: 0.8rem 0 0; color: var(--lp-ink-2); }
.lp-more__person { width: 9rem; margin: 0; }
.lp-more__person img { width: 112px; height: 112px; object-fit: cover; border: 1px solid var(--lp-line); border-radius: 18px; }
.lp-more__person figcaption { margin-top: 0.6rem; color: var(--lp-ink-2); font-size: 0.9rem; line-height: 1.35; }
.lp-more__person b { display: block; color: var(--lp-ink); }
.lp-more__copy .lp-more__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.5rem; }

/* ── Fuss ──────────────────────────────────────────────────────────────────────────────── */

.lp-foot { padding-block: 2.2rem 2.6rem; border-top: 1px solid var(--lp-line); color: var(--lp-ink-2); font-size: 0.93rem; }
.lp-foot__maker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-bottom: 1.4rem; }
.lp-foot__maker img { width: auto; height: 38px; }
.lp-foot__maker p { margin: 0; color: var(--lp-ink); font-weight: 600; }
.lp-foot__maker a { margin-left: 0.4rem; font-weight: 600; }
.lp-foot__name { margin: 0; }
.lp-foot__name dfn { color: var(--lp-ink); font-style: normal; font-weight: 700; }
.lp-foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1rem 0; }
.lp .lp-foot__links a { color: var(--lp-ink-2); }
.lp-foot__note { margin: 0; }

/* ── Die Leiste am Telefon ─────────────────────────────────────────────────────────────── */

.lp-sticky { display: none; }
@media (max-width: 700px) {
  .lp-sticky:not([hidden]) {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    background: var(--lp-card); border-top: 1px solid var(--lp-line);
    box-shadow: 0 -10px 26px rgb(13 27 62 / 0.12);
  }
  .lp-sticky .lp-button { min-height: 48px; box-shadow: none; }
  .lp-sticky__note { color: var(--lp-ink-2); font-size: 0.9rem; font-weight: 600; }
  body.has-sticky-cta .lp-foot { padding-bottom: 6rem; }
}