:root {
  /* Fehlerrot ALS TEXT */
  --danger: #C0341C;
  --ok-ink: #126944;
  /* Amber ALS TEXT - ersetzt vier historisch gewachsene
     Toene. Flaechen behalten #FFF3D6 und #FFC24B, Letzterer
     immer mit dunkler Tinte. */
  --warn-text: #8F6000;
  /* Gruen ALS TEXT. --ok bleibt fuer Flaechen. */
  --ok-text: #157A50;
  --bg: #FFF7F2;
  --surface: #FFFFFF;
  --ink: #241A22;
  --muted: #6E5F68;
  --line: #F1E3DB;
  --accent: #FF5A3C;
  --accent-dark: #B81C00;
  /* Flaeche MIT weissem Text (Knopf im Grundzustand). Der
     Markenton --accent traegt weissen Text nur mit 3,1:1. */
  --accent-ink: #DE2200;
  --accent-soft: #FFE9DE;
  --ok: #1B7A55;
  --ok-soft: #E6F6EF;
  --radius: 14px;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-body);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent-dark); }

code {
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: .92em;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.topbar {
  background: rgba(255, 247, 242, .86);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
/* Die "2" im Wortzeichen: 22px/800, also grosser Text -> Schwelle 3,0.
   Der reine Markenton kaeme auf --bg (#FFF7F2) nur auf 2,93; der
   mittlere Ton schafft 4,58 und bleibt warm.
   Die Kachel daneben behaelt --accent: weisse Balken darauf sind
   grafische Objekte mit 3,10:1. */
.brand-word span { color: var(--accent-ink); }
.brand-mark { box-sizing: border-box; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; justify-content: center; padding-left: 7px; box-shadow: 0 5px 12px rgba(255, 90, 60, .35); }
.brand-mark i { display: block; height: 3.5px; border-radius: 2px; background: #fff; }
.brand-mark i:nth-child(1) { width: 12px; }
.brand-mark i:nth-child(2) { width: 8px; opacity: .75; }
.brand-mark i:nth-child(3) { width: 10px; opacity: .5; }
.topnav { display: flex; align-items: center; gap: 18px; }
.topnav a { color: var(--muted); font-weight: 600; font-size: 15px; }
.topnav a:hover { color: var(--ink); }

.topnav a.btn-accent { color: #fff; }
.topnav a.btn-accent:hover { color: #fff; }

.btn {
  display: inline-block;
  border-radius: 12px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
}
.btn-accent { background: var(--accent-ink); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-lg { padding: 15px 26px; font-size: 16.5px; }

.main { padding: 56px 24px 72px; flex: 1 0 auto; }

/* .hero und .hero h1 gab es hier bis eben - beide TOT: die Klasse
   steht in keiner Ansicht mehr, das Markup nutzt .lp-hero und
   .lp-hero-copy. Die Regeln sahen aus, als bestimmten sie die
   Ueberschrift der Startseite, und taten nichts.

   Aufgefallen ist es, weil eine Aenderung an .hero h1 keinerlei
   Wirkung hatte. Ohne diesen Zufall haette man die Groesse dort
   weiter "eingestellt" - und sich gewundert. */
.eyebrow {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

/* Die grosse Zeile der Startseite ("Ganz ohne Programmieren").
   BEWUSST DER HELLERE TON: bei clamp(34px, 5vw, 56px) fett gilt die
   Schwelle 3,0 statt 4,5 - grosser Text ist auch mit weniger Kontrast
   lesbar, und die Marke soll dort sichtbar bleiben, wo sie am meisten
   wirkt.

   Der reine Markenton #FF5A3C reicht trotzdem nicht: auf dem
   Seitenhintergrund --bg (#FFF7F2, nicht weiss!) kommt er auf 2,93:1
   und liegt damit knapp UNTER der Schwelle fuer grossen Text. Auf
   weissem Grund waeren es 3,10 - ein gutes Beispiel dafuer, dass die
   Tönung des Hintergrunds mitzaehlt.

   --accent-ink schafft 4,58:1 und bleibt warm. */
.accent { color: var(--accent-ink); }
.lead { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 64px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
  max-width: 620px;
}
.panel h1 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.02em; }

.notice {
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  margin: 22px 0;
}

.img-slot {
  display: inline-block;
  padding: 8px 12px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  background: var(--surface);
}

.notice-warn {
  background: #fdf2e2;
  border-left: 4px solid #c2761a;
  color: #6b3f07;
}

.muted { color: var(--muted); font-size: 15px; }

.site-list { list-style: none; margin: 24px 0 0; padding: 0; }
.site-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.site-item:last-child { border-bottom: none; }
.site-title { font-weight: 700; }

.badge {
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 700;
  background: var(--line);
  color: var(--muted);
}
.badge-published { background: var(--ok-soft); color: var(--ok-text); }

.lp-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px;
  align-items: center;
  padding: 16px 0 48px;
}

.lp-hero-copy { max-width: 560px; }

/* Die Ueberschrift der Startseite.
   OHNE DIESE REGEL greift nur "h1, h2, h3, .brand" weiter oben - und
   die setzt keine Groesse. Das h1 lief damit auf der Browser-Vorgabe,
   die fuer ein h1 innerhalb einer <section> kleiner ausfaellt als
   erwartet.
   7vw entspricht dem Entwurf; die beiden Zeilen brechen dadurch von
   selbst um. */
.lp-hero-copy h1 {
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 0 0 18px;
}

.lp-checks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 26px 0 0;
  padding: 0;
}

.lp-checks li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; font-weight: 500; }
/* Haekchen sind grafische Objekte: dafuer gilt 3,0 (WCAG 1.4.11),
   nicht 4,5. Der helle Markenton kaeme auf --bg aber nur auf 2,93 -
   deshalb auch hier der mittlere Ton. */
.lp-checks svg { color: var(--accent-ink); flex-shrink: 0; }

.lp-visual { position: relative; }

.lp-glow {
  position: absolute;
  width: min(380px, 90%);
  height: 340px;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -45%);
  background: radial-gradient(circle at 40% 40%, rgba(255, 194, 75, .55), rgba(255, 90, 60, .28) 55%, rgba(255, 90, 60, 0) 72%);
  filter: blur(18px);
}

.lp-browser {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(36, 26, 34, .16);
  overflow: hidden;
}

.lp-browser-bar {
  height: 42px;
  background: #FBEFE9;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.lp-browser-bar > i { width: 11px; height: 11px; border-radius: 50%; }
.lp-browser-bar > i:nth-child(1) { background: #FF6B5B; }
.lp-browser-bar > i:nth-child(2) { background: #FFC24B; }
.lp-browser-bar > i:nth-child(3) { background: #4CC38A; }

.lp-browser-url {
  flex: 1;
  max-width: 230px;
  margin-left: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.lp-browser-body {
  min-height: 320px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 30px;
  justify-content: center;
}

.lp-mock-nav { display: block; height: 12px; border-radius: 6px; background: #fff; width: 72%; }

.lp-mock-hero {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 16px rgba(36, 26, 34, .06);
}

.lp-mock-hero i { display: block; height: 8px; border-radius: 4px; background: var(--accent); }
.lp-mock-hero i:nth-child(1) { width: 55%; }
.lp-mock-hero i:nth-child(2) { width: 82%; opacity: .3; }
.lp-mock-hero i:nth-child(3) { width: 26%; height: 12px; }

.lp-mock-cards { display: flex; gap: 10px; }
.lp-mock-cards i { flex: 1; height: 40px; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(36, 26, 34, .05); }

.lp-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 15px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 14px 30px rgba(36, 26, 34, .14);
  animation: lp-floaty 5s ease-in-out infinite;
}

.lp-chip-a { top: -16px; left: -14px; }
.lp-chip-b { bottom: -16px; right: -10px; border-radius: 999px; animation-delay: .5s; animation-duration: 6s; font-weight: 700; }

.lp-chip-dots { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; }
.lp-chip-dots i { width: 3px; height: 3px; border-radius: 50%; background: #C9BAB2; }

.lp-chip-ok {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-chip-ok svg { width: 12px; height: 12px; }

@keyframes lp-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  padding: 8px 0 24px;
}

.lp-trust span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.lp-section { padding: 64px 0 0; }

.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.lp-section-head.is-left { text-align: left; margin: 0 0 36px; }

.lp-kicker {
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 12px 0 14px;
  font-weight: 800;
}

.lp-section-head p { font-size: 18px; color: var(--muted); margin: 0; line-height: 1.6; }

.lp-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.lp-feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
}

.lp-feature-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
}

.lp-feature-icon.is-sun { background: #FFF3D6; color: var(--warn-text); }
.lp-feature h3 { font-size: 21px; margin: 20px 0 8px; letter-spacing: -.01em; }
.lp-feature p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; }

.lp-steps-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(36px, 5vw, 64px);
  box-shadow: 0 14px 40px rgba(36, 26, 34, .05);
}

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }

.lp-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFC24B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
}

.lp-step h3 { font-size: 22px; margin: 20px 0 8px; letter-spacing: -.01em; }
.lp-step p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; }

.lp-templates {
  display: grid;
  /* auto-FILL statt auto-fit: leere Spuren bleiben bestehen. Mit
     auto-fit dehnte sich eine einzeln gefilterte Karte ueber die ganze
     Breite - jetzt bleibt sie so gross wie im vollen Raster. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.lp-tpl {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.lp-tpl:hover { box-shadow: 0 20px 44px rgba(36, 26, 34, .1); transform: translateY(-3px); }

.lp-tpl-prev {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tpl-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-tpl-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(36, 26, 34, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}

.lp-mini { width: 76%; display: flex; flex-direction: column; gap: 6px; }

.lp-mini-hero {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 7px 9px;
  background: #fff;
  border-radius: var(--tpl-r, 8px);
  box-shadow: 0 4px 10px rgba(36, 26, 34, .07);
}

.lp-mini-txt { flex: 1.2; display: flex; flex-direction: column; gap: 4px; }
.lp-mini-txt b { display: block; height: 4px; border-radius: 99px; background: var(--tpl-accent); }
.lp-mini-txt b:nth-child(1) { width: 72%; }
.lp-mini-txt b:nth-child(2) { width: 92%; opacity: .35; }
.lp-mini-txt b:nth-child(3) { width: 36%; height: 7px; opacity: .9; }

.lp-mini-media {
  flex: 1;
  align-self: stretch;
  min-height: 30px;
  border-radius: calc(var(--tpl-r, 8px) * .7);
  background: linear-gradient(135deg, var(--tpl-accent), var(--tpl-soft));
  opacity: .8;
}

.lp-tpl[data-hero="imageLeft"] .lp-mini-media { order: -1; }

.lp-tpl[data-hero="overlay"] .lp-mini-hero {
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(36, 26, 34, .3), rgba(36, 26, 34, .78)),
    linear-gradient(135deg, var(--tpl-accent), var(--tpl-soft));
}

.lp-tpl[data-hero="overlay"] .lp-mini-media { display: none; }
.lp-tpl[data-hero="overlay"] .lp-mini-txt b { background: #fff; }
.lp-tpl[data-hero="overlay"] .lp-mini-txt b:nth-child(3) { background: var(--tpl-accent); opacity: 1; }

.lp-tpl[data-hero="center"] .lp-mini-hero { flex-direction: column; gap: 5px; }
.lp-tpl[data-hero="center"] .lp-mini-txt { width: 72%; flex: none; align-items: center; }
.lp-tpl[data-hero="center"] .lp-mini-media { width: 100%; flex: none; align-self: auto; min-height: 14px; }

.lp-tpl[data-hero="minimal"] .lp-mini-hero { flex-direction: column; justify-content: center; }
.lp-tpl[data-hero="minimal"] .lp-mini-txt { width: 74%; flex: none; align-items: center; }
.lp-tpl[data-hero="minimal"] .lp-mini-media { display: none; }

.lp-mini-feat { display: flex; gap: 5px; }

.lp-mini-feat b {
  flex: 1;
  height: 20px;
  background: #fff;
  border-radius: calc(var(--tpl-r, 8px) * .6);
  box-shadow: 0 3px 8px rgba(36, 26, 34, .06);
}

.lp-tpl[data-card="border"] .lp-mini-feat b { box-shadow: none; border: 1px solid rgba(36, 26, 34, .14); }
.lp-tpl[data-card="flat"] .lp-mini-feat b { box-shadow: none; background: var(--tpl-soft); }

.lp-tpl[data-feat="plain"] .lp-mini-feat b {
  height: 14px;
  background: transparent;
  border: 0;
  border-top: 3px solid var(--tpl-accent);
  border-radius: 0;
  box-shadow: none;
  opacity: .55;
}

.lp-tpl[data-feat="iconband"] .lp-mini-feat {
  background: var(--tpl-accent);
  border-radius: calc(var(--tpl-r, 8px) * .6);
  padding: 5px 8px;
  justify-content: space-around;
}

.lp-tpl[data-feat="iconband"] .lp-mini-feat b {
  flex: 0 0 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .45);
  border: 0;
  box-shadow: none;
}

.lp-tpl[data-feat="spotlight"] .lp-mini-feat { flex-direction: column; gap: 4px; }

.lp-tpl[data-feat="spotlight"] .lp-mini-feat b {
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  background: linear-gradient(90deg, var(--tpl-accent) 0 38%, rgba(36, 26, 34, .1) 46% 100%);
  opacity: .75;
}

.lp-tpl[data-feat="spotlight"] .lp-mini-feat b:nth-child(2) {
  background: linear-gradient(270deg, var(--tpl-accent) 0 38%, rgba(36, 26, 34, .1) 46% 100%);
}

.lp-tpl[data-feat="spotlight"] .lp-mini-feat b:nth-child(3) { display: none; }

.lp-tpl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}

.lp-tpl-foot strong { font-family: var(--font-display); font-size: 18px; }
.lp-tpl-foot a { font-weight: 700; font-size: 14px; white-space: nowrap; }

.lp-band {
  background: #FFF1EA;
  border-top: 1px solid #F5E2D8;
  border-bottom: 1px solid #F5E2D8;
  box-shadow: 0 0 0 100vmax #FFF1EA;
  clip-path: inset(0 -100vmax);
  margin-top: 80px;
}

.lp-band-in { padding: 80px 0; }

.lp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

.lp-plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}

.lp-plan.is-pop { border: 2px solid var(--accent); box-shadow: 0 18px 44px rgba(255, 90, 60, .14); }

.lp-plan-pop {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-ink);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(255, 90, 60, .3);
}

.lp-plan h3 { font-size: 22px; margin: 0 0 4px; }
.lp-plan-tag { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }

.lp-plan-price { display: flex; align-items: flex-end; gap: 4px; margin: 0; }
.lp-plan-price span { font-size: 18px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.lp-plan-price strong { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.02em; }

.lp-plan-note { color: var(--muted); font-size: 13.5px; margin: 8px 0 22px; }
.lp-plan-btn { text-align: center; }

.lp-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; padding: 0; }
.lp-plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.lp-plan-feats svg { color: var(--accent-dark); flex-shrink: 0; margin-top: 2px; }

.lp-band-note { text-align: center; color: var(--muted); font-size: 14.5px; margin: 32px 0 0; }

.lp-faq { max-width: 820px; margin: 0 auto; }

.lp-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 14px;
}

.lp-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.lp-faq-item summary::-webkit-details-marker { display: none; }

.lp-faq-item summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  transition: transform .18s ease;
}

.lp-faq-item[open] summary::after { transform: rotate(45deg); }
.lp-faq-item p { margin: 14px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

.lp-cta {
  position: relative;
  overflow: hidden;
  background: var(--accent-ink);
  border-radius: 28px;
  padding: clamp(44px, 6vw, 80px) 32px;
  text-align: center;
}

.lp-cta-orb-a {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 194, 75, .35);
  top: -90px;
  right: -40px;
  filter: blur(10px);
}

.lp-cta-orb-b {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  bottom: -90px;
  left: -30px;
}

.lp-cta h2 {
  position: relative;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 800;
}

.lp-cta p { position: relative; font-size: 18.5px; color: rgba(255, 255, 255, .9); margin: 0 auto 30px; max-width: 560px; line-height: 1.6; }

.lp-cta-btn {
  position: relative;
  display: inline-block;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 17px;
  padding: 17px 34px;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(36, 26, 34, .22);
}

.lp-cta-btn:hover { background: #FFF1EA; color: var(--accent-dark); }

.footer {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  color: var(--muted);
  font-size: 14px;
}

.error {
  background: #FDE8E4;
  color: #B3311B;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  margin-top: 18px;
}
.hidden { display: none; }

.auth-card {
  max-width: 440px;
  margin: 48px auto;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 40px 38px 34px;
  color: var(--ink);
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(36, 26, 34, .1);
}

.auth-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }

.auth-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  justify-content: center;
  padding-left: 11px;
  box-shadow: 0 6px 16px rgba(255, 90, 60, .45);
}

.auth-mark i { display: block; height: 5px; border-radius: 2px; background: #fff; }
.auth-mark i:nth-child(1) { width: 17px; }
.auth-mark i:nth-child(2) { width: 11px; opacity: .75; }
.auth-mark i:nth-child(3) { width: 14px; opacity: .5; }

.auth-word { font-family: var(--font-display, "Bricolage Grotesque", sans-serif); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.auth-word em { font-style: normal; color: var(--accent-dark); }

.auth-card h1 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.02em; }
.auth-lead { color: var(--muted); font-size: 14.5px; margin: 0 0 28px; line-height: 1.55; }

.auth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-ink) 0%, #C42400 100%);
  border: none;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 90, 60, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}

.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 90, 60, .42); }

.auth-btn:disabled { opacity: .85; cursor: wait; transform: none; }

/* Wartezustand: das Passkey-Symbol pulsiert, statt einem Kreisel zu
   weichen. Beim Passkey wartet man auf die eigene Bestaetigung am
   Geraet - nicht darauf, dass der Server rechnet. Das Pulsieren sagt
   "du bist dran", der Kreisel sagte "warte ab". */
.auth-btn.is-loading svg {
  animation: auth-pulse 1.5s ease-in-out infinite;
}

@keyframes auth-pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* Der Hinweis erscheint allein durch die Klasse am Knopf - ohne
   JavaScript, das ihn ein- und ausblenden muesste. */
.auth-wait {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #6E5F68);
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .25s ease, max-height .25s ease;
}

.auth-btn.is-loading ~ .auth-wait {
  opacity: 1;
  max-height: 60px;
}

/* Wer Bewegung reduziert haben moechte, bekommt den Hinweis trotzdem -
   nur eben ohne Puls und ohne Aufblenden. */
@media (prefers-reduced-motion: reduce) {
  .auth-btn.is-loading svg { animation: none; opacity: .75; }
  .auth-wait { transition: none; }
}

.auth-error {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  background: #FDE8E4;
  border: 1px solid #F4C4B8;
  color: #B3311B;
}

.auth-error.hidden { display: none; }

.auth-icons { display: flex; justify-content: center; gap: 30px; margin-top: 26px; }

.auth-icons > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  /* app.css definiert --faint nicht, hier gilt also wirklich der
     Rueckfallwert. Der frühere #A9998F kam auf 2.60:1 - bei 11px
     Grossbuchstaben mit Sperrung ist das noch weniger lesbar, als die
     Zahl vermuten laesst. */
  color: var(--faint, #786A62);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.auth-icons i {
  width: 40px;
  height: 40px;
  background: #FBF2EC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.auth-divider {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 26px 0 20px;
}

.auth-alt { margin: 0; font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--accent-dark); font-weight: 600; }
.auth-alt a:hover { color: var(--accent-ink); }

.auth-notice {
  text-align: left;
  background: #FFF3D6;
  border: 1px solid #F2DCA4;
  color: #8A6A14;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

.auth-notice strong { display: block; margin-bottom: 2px; }

.auth-form { text-align: left; margin: 0 0 6px; }

.auth-field { display: block; margin-bottom: 18px; }
.auth-field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3F343B;
  margin-bottom: 7px;
}

.auth-field input,
.auth-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #FCF7F3;
  color: var(--ink);
}

.auth-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.auth-field input:focus,
.auth-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 60, .16);
}

.auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.auth-error {
  text-align: left;
  background: #FDE8E4;
  border: 1px solid #F4C4BA;
  color: #B3311B;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.flash { border-radius: 12px; padding: 12px 18px; margin-bottom: 22px; font-size: 15px; }
.flash-ok { background: var(--ok-soft); color: var(--ok-text); }
.flash-error { background: #FDE8E4; color: #B3311B; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-head h1 { margin: 0; }
.site-actions { display: flex; align-items: center; gap: 12px; }

.field { margin: 18px 0; }
.field label, .list-field legend { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.field input[type="text"], .field textarea, .list-row input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .list-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.field textarea { resize: vertical; }
.subdomain-row { display: flex; align-items: center; gap: 10px; }
.subdomain-row input { flex: 1; }

.editor { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; }
@media (max-width: 800px) { .editor { grid-template-columns: 1fr; } }

.editor-palette {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  position: sticky;
  top: 90px;
}
.editor-palette h2 { font-size: 15px; margin: 0 0 12px; }
.palette-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 13px;
  margin-bottom: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.palette-btn:hover { border-color: var(--accent); color: var(--accent-ink); }

.editor-canvas {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
}
.editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.editor-site { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.block-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 18px 0;
  background: var(--bg);
}
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.block-type {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.link-danger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: #B3311B;
  cursor: pointer;
  text-decoration: underline;
}

.list-field { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; margin: 18px 0; }
.list-row { display: flex; gap: 10px; margin-bottom: 8px; }
@media (max-width: 600px) { .list-row { flex-direction: column; } }

.editor-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

.soon-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.soon-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.soon-list .badge {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.site-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-actions { display: flex; align-items: center; gap: 12px; }

* { scrollbar-width: thin; scrollbar-color: #D9C7BC transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D9C7BC; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #C9B4A6; }

.lp-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -8px 0 40px;
}

.lp-cycle-seg {
  display: flex;
  background: #FBE6DB;
  border-radius: 999px;
  padding: 5px;
}

.lp-cycle-seg label {
  padding: 9px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  color: #6E5F68;
  user-select: none;
}

#lp-monat:checked ~ .lp-cycle .lp-cycle-seg label[for="lp-monat"],
#lp-jahr:checked ~ .lp-cycle .lp-cycle-seg label[for="lp-jahr"] {
  background: var(--accent-ink);
  color: #fff;
}

.lp-cycle-save {
  background: #FFE9DE;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
}

.lp-price-y { display: none; }
#lp-jahr:checked ~ .lp-plans .lp-price-m { display: none; }
#lp-jahr:checked ~ .lp-plans .lp-price-y { display: block; }

.lp-addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 24px auto 0;
}

.lp-addon {
  background: #fff;
  border: 1.5px dashed #E8CDBD;
  border-radius: 22px;
  padding: 26px 28px;
}

.lp-addon-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.lp-addon-top h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
}

.lp-addon-tag {
  background: #FBF2EC;
  border: 1px solid #EADBD1;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

.lp-addon-desc { color: #6E5F68; font-size: 14px; line-height: 1.55; margin: 0 0 16px; }

.lp-addon-price span { font-size: 15px; margin-bottom: 6px; }
.lp-addon-price strong { font-size: 34px; }
.lp-addon .lp-plan-note { margin: 6px 0 0; font-size: 13px; }

.lp-addon-feats { margin-top: 14px; gap: 10px; }
.lp-addon-feats li { font-size: 14.5px; }
.lp-addon-feats svg { width: 18px; height: 18px; margin-top: 1px; }

#lp-jahr:checked ~ .lp-addons .lp-price-m { display: none; }
#lp-jahr:checked ~ .lp-addons .lp-price-y { display: block; }

.soon-badge {
  display: inline-block;
  background: #FFE9DE;
  color: var(--danger);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 14px 0 6px;
}

.soon-small { font-size: 12.5px; opacity: .75; }

.lp-testphase {
  background: #241A22;
  color: #FFEFE8;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
}

.footer a { color: inherit; text-decoration: underline; }
.footer a:hover { color: var(--accent-ink); }

.rl-page { max-width: 820px; margin: 0 auto; padding: 40px 0 72px; }

.rl-tabs { display: flex; justify-content: center; width: max-content; margin: 0 auto 40px; background: #FBE6DB; border-radius: 999px; padding: 4px; }
.rl-tabs a { padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); transition: all .2s ease; }
.rl-tabs a:hover { color: var(--ink); }
.rl-tabs a.on { background: #fff; color: var(--ink); box-shadow: 0 3px 9px rgba(36, 26, 34, .12); }

.rl-eyebrow { color: var(--accent-dark); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.rl-page h1 { font-weight: 800; font-size: clamp(32px, 5vw, 44px); line-height: 1.06; letter-spacing: -.02em; margin: 12px 0 8px; }
.rl-page h1.rl-solo { margin-bottom: 36px; }
.rl-stand { color: var(--muted); font-size: 14px; margin: 0 0 36px; line-height: 1.5; }

.rl-head { text-align: center; margin-bottom: 44px; }
.rl-head h1 { margin-bottom: 12px; }
.rl-head p { font-size: 17px; color: var(--muted); margin: 0; line-height: 1.6; }
.rl-head a { color: var(--accent-dark); }

.rl-card { background: #fff; border: 1px solid #F1E3DB; border-radius: 16px; padding: 26px 30px; margin-bottom: 14px; }
.rl-card h2 { font-weight: 700; font-size: 19px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 12px; }
.rl-card h2.rl-ich { align-items: center; font-size: 17px; margin-bottom: 12px; }
.rl-card .rl-nr { color: var(--accent-dark); font-size: 15px; }
.rl-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 20px 0 8px; }
.rl-card p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.rl-card p:last-child { margin-bottom: 0; }
.rl-card p.rl-lines { line-height: 1.8; }
.rl-card a { color: var(--accent-dark); }

.rl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rl-grid .rl-card { margin-bottom: 0; }

.rl-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: #FFE9DE; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-dark); }

.rl-group { margin-bottom: 34px; }
.rl-group > h2 { font-weight: 700; font-size: 19px; letter-spacing: -.01em; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }

.rl-faq { display: flex; flex-direction: column; gap: 12px; }
.rl-faq details { background: #fff; border: 1px solid #F1E3DB; border-radius: 15px; padding: 18px 22px; }
.rl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.rl-faq summary::-webkit-details-marker { display: none; }
.rl-plus { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #FFE9DE; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.rl-faq details.rl-open .rl-plus { transform: rotate(45deg); }
.rl-faq details > p { overflow: hidden; max-height: 0; opacity: 0; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease; }
.rl-faq details.rl-open > p, .rl-faq.rl-njs details > p { max-height: 340px; opacity: 1; margin-top: 10px; }

.rl-cta { background: var(--accent); border-radius: 20px; padding: 34px 32px; text-align: center; margin-top: 10px; }
.rl-cta h2 { font-weight: 800; font-size: 24px; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; }
.rl-cta p { color: rgba(255, 255, 255, .9); font-size: 15.5px; margin: 0 0 20px; }
.rl-cta a { display: inline-block; background: #fff; color: var(--accent-dark); font-weight: 800; font-size: 15px; padding: 13px 26px; border-radius: 12px; }
.rl-cta a:hover { background: #FFF1EA; color: var(--accent-dark); }

.auth-terms { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); cursor: pointer; text-align: left; }
.auth-terms input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.auth-terms a { color: var(--accent-dark); font-weight: 600; }

@media (max-width: 760px) {
  .topbar-inner { gap: 12px; }
  .topnav { gap: 10px; }
  .topnav a { font-size: 14px; }
  .topnav .btn { padding: 9px 14px; }

  .lp-testphase { font-size: 12.5px; padding: 9px 14px; }

  .lp-hero { grid-template-columns: 1fr; gap: 24px; padding: 8px 0 28px; }
  .lp-visual { display: none; }
  .lead { font-size: 16.5px; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }

  .lp-section { padding: 44px 0 0; }
  .lp-section-head { margin-bottom: 26px; }
  .lp-section-head p { font-size: 16px; }

  .lp-steps { gap: 20px; }
  .lp-templates { grid-template-columns: 1fr; }
  .lp-plans { grid-template-columns: 1fr; }
  .lp-addons { grid-template-columns: 1fr; }

  .lp-band { margin-top: 48px; }
  .lp-band-in { padding: 44px 0; }
  .lp-cycle { flex-wrap: wrap; row-gap: 10px; }

  .lp-plan { padding: 24px 20px; }
  .lp-addon { padding: 22px 20px; }

  .rl-page { padding: 20px 0 48px; }
  .rl-card { padding: 20px 22px; }
  .rl-tabs a { padding: 8px 14px; }
}

@media (max-width: 420px) {
  .brand { font-size: 20px; }
  .topnav .btn { padding: 8px 12px; font-size: 13px; }
  .lp-hero-copy h1 { font-size: 34px; }
  .lp-section-head h2 { font-size: 26px; }
}

/* --- Startseiten-Band / Mitteilung (eigener Prefix lp-nb, um NICHT mit der
   Preis-Sektion .lp-band zu kollidieren) ------------------------------- */
.lp-nb {
  background: #241A22;
  color: #FFF7F2;
  position: relative;
  z-index: 51;
}
.lp-nb-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 48px 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.lp-nb-tag {
  background: #FFC24B;
  color: #241A22;
  font-weight: 800;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.lp-nb-txt { font-size: 14px; font-weight: 600; }
.lp-nb-txt strong { font-weight: 800; }
.lp-nb-body { font-weight: 500; opacity: .9; }
.lp-nb-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 247, 242, .12);
  color: #FFF7F2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-nb-close:hover { background: rgba(255, 247, 242, .24); }
/* Schliessen rein per CSS: die Checkbox steht direkt vor dem Band. */
.lp-nb-x:checked + .lp-nb { display: none; }

/* ============================================================
   MELDESEITE (/melden)
   Wirkt wie ein Dialog, ist aber eine gewoehnliche Seite: die
   Kundenseiten bleiben dadurch skriptfrei und alle Pruefungen
   (CSRF, Rate-Limit, Honeypot) liegen weiter an einer Stelle.
   ============================================================ */

.rep-card {
  max-width: 470px;
  margin: 48px auto;
  background: var(--surface);
  border-radius: 22px;
  padding: 30px 30px 28px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(36, 26, 34, .14);
}

.rep-card h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 7px;
}

.rep-lead { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }

/* Gemeldete Adresse: ruhig, aber eindeutig - sie ist der Bezugspunkt
   der ganzen Seite. */
.rep-target {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 13px;
  margin: 0 0 18px;
  /* Lange eigene Domains duerfen die Karte nicht sprengen. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rep-error {
  background: #FDE8E4;
  border: 1px solid #F4C4BA;
  color: #B3311B;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin: 0 0 16px;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots verlockend. Nicht
   display:none - manche Bots ueberspringen genau das. */
.rep-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rep-cats { border: 0; margin: 0 0 16px; padding: 0; }

.rep-cats legend {
  padding: 0;
  font-weight: 600;
  font-size: 13px;
  color: #3F343B;
  margin-bottom: 8px;
}

/* Echte Radio-Buttons, nur gross und klickbar gemacht: Tastatur und
   Screenreader funktionieren dadurch ohne Zutun. */
.rep-cat {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 7px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.rep-cat:hover { border-color: #E3CFC4; }

.rep-cat input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--accent-dark);
}

.rep-cat-txt { display: block; min-width: 0; }
.rep-cat-txt strong { display: block; font-size: 13.5px; color: var(--ink); }
.rep-cat-txt small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Die gewaehlte Karte hebt sich ab - :has() greift auf das Label,
   sobald das Radio darin gewaehlt ist. Kennt ein Browser :has() nicht,
   bleibt der Punkt selbst als Kennzeichnung; nichts geht verloren. */
.rep-cat:has(input:checked) {
  border-color: var(--accent-dark);
  background: #FFF0EC;
}

.rep-cat:has(input:focus-visible) { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.rep-field { display: block; margin-bottom: 14px; }

.rep-field > span {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #3F343B;
  margin-bottom: 7px;
}

.rep-field > span em { font-style: normal; font-weight: 500; color: var(--muted); }

.rep-field textarea,
.rep-field input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.55;
}

.rep-field textarea { resize: vertical; }

.rep-field textarea:focus,
.rep-field input:focus { outline: none; border-color: var(--accent-dark); }

.rep-btn {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: #C0341C;
  border: none;
  border-radius: 12px;
  padding: 13px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(192, 52, 28, .25);
}

.rep-btn:hover { background: #A82B15; }

.rep-note {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin: 12px 0 0;
}

.rep-alt { font-size: 13.5px; margin: 22px 0 0; }
.rep-alt a { color: var(--muted); }

/* Bestaetigung nach dem Senden */
.rep-card:has(.rep-ok) { text-align: center; }

.rep-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ok-ink);
  color: #fff;
  margin: 10px auto 16px;
}

@media (max-width: 560px) {
  .rep-card { margin: 20px 14px; padding: 24px 20px 22px; }
}

/* ---- Landingpage: Branchen-Filter der Vorlagen (ohne Skript) ------- */

.lp-flt { position: absolute; opacity: 0; pointer-events: none; }

.lp-tpl-filter {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}

.lp-tpl-filter label {
  background: #fff;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}

.lp-tpl-filter label:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---- Dunkle Welten in den Vorlagen-Kacheln ------------------------- */

/* Bei Nacht/Mitternacht ist --tpl-soft eine DUNKLE Flaeche: das Etikett
   und die Skelett-Karte muessen hell werden, sonst versinkt alles. */
.lp-tpl.is-dark .lp-tpl-badge { background: rgba(241, 239, 233, .92); color: #15171E; }

.lp-tpl.is-dark .lp-mini-hero {
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.lp-tpl.is-dark .lp-mini-feat b { background: rgba(255, 255, 255, .1); }

/* Art im Startseiten-Band: das Band ist dunkel, deshalb helle Etiketten
   statt der zarten Toene aus Dashboard und Verwaltung. Die Grundfarbe
   (Gold) bleibt als Rueckfall stehen, falls je eine Art dazukommt. */
.lp-nb-tag.is-neu { background: #4CC38A; color: #0E2E1E; }
.lp-nb-tag.is-update { background: #7FA8FF; color: #101E3D; }
.lp-nb-tag.is-hinweis { background: #FFC24B; color: #241A22; }
.lp-nb-tag.is-wartung { background: #FF9478; color: #2E0E06; }

/* Aktion im Startseiten-Band: gelbes Etikett wie im Mockup, plus der
   Verweis auf die Preise. */
.lp-nb-tag.is-aktion { background: #FFC24B; color: #241A22; }

.lp-nb-cta {
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}

.lp-nb-cta:hover { color: #FFC24B; }

/* ---- Ergebnisseite der Website-Formulare --------------------------- */

/* Die Seite steht zwischen zwei Marken: der Besucher kommt von einer
   Kundenwebsite und ist gerade mitten in einem Vorgang. Deshalb eine
   ruhige, mittige Karte ohne Ablenkung - und ein Rueckweg, der als
   wichtigstes Element erkennbar ist. */

/* Kein eigenes Aussenpolster und keine Viewport-Hoehe: die Seite laeuft
   im normalen Rahmen (layouts/app), und .main bringt seinen Abstand
   bereits mit. Beides doppelt zu setzen schoebe die Karte weit nach
   unten. */
.frm-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 0 16px;
}

.frm-card {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 34px 36px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(36, 26, 34, .04), 0 18px 40px -22px rgba(36, 26, 34, .22);
  /* Damit der Deckstreifen die Rundung der Karte uebernimmt, statt als
     gerader Balken darueber zu liegen. Den eigenen Schatten der Karte
     beschneidet das nicht - der liegt ausserhalb. */
  overflow: hidden;
}

/* Farbiger Deckstreifen: gibt der Karte auf einen Blick eine Richtung,
   bevor irgendein Wort gelesen ist.
   inset -1px zieht ihn ueber den 1px-Rahmen hinaus, sonst bliebe an den
   Ecken ein heller Spalt zwischen Streifen und Kartenkante. Das
   Ueberstehende schneidet das overflow der Karte sauber ab - deshalb
   braucht der Streifen selbst keinen eigenen Radius. */
.frm-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 4px;
  background: var(--ok);
}

.frm-card.is-error::before { background: #A62C17; }

.frm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok-text);
  margin-bottom: 20px;
  /* Weicher Ring statt harter Kontur - traegt die Farbe nach aussen,
     ohne eine zweite Linie zu zeichnen. */
  box-shadow: 0 0 0 8px rgba(27, 122, 85, .07);
}

.frm-card.is-error .frm-icon {
  background: #FEF1EE;
  color: #A62C17;
  box-shadow: 0 0 0 8px rgba(166, 44, 23, .06);
}

/* Das Haekchen zeichnet sich einmal. Reine Zierde: die Aussage steht im
   Text, nicht in der Bewegung. */
.frm-tick {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: frm-draw .45s cubic-bezier(.65, 0, .35, 1) .1s forwards;
}

@keyframes frm-draw { to { stroke-dashoffset: 0; } }

.frm-card h1 {
  margin: 0 0 12px;
  font-family: var(--font-display, inherit);
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--ink);
}

.frm-msg {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62;
}

.frm-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.frm-actions { margin: 26px 0 0; }

/* Weisse Schrift auf einem dunkleren Orange.
   Auf dem hellen Markenorange #FF5A3C erreicht Weiss nur 3.1:1 und
   verfehlt die AA-Schwelle von 4.5:1 fuer normalen Text deutlich - der
   Knopf waere bei Sonnenlicht oder schwaecheren Augen schwer zu lesen.
   #D13F26 ist derselbe Farbton, nur satter, und kommt auf 4.72:1. */
.frm-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #D13F26;
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  padding: 13px 24px;
  border-radius: 999px;
  transition: background .15s ease, transform .15s ease;
}

.frm-back:hover {
  background: #B8351E;   /* 5.89:1 */
  color: #fff;
  transform: translateY(-1px);
}

.frm-back:active { transform: none; }

.frm-back svg { flex: 0 0 auto; }

.frm-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
  color: var(--muted);
}

.frm-note svg { flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 480px) {
  .frm-card { padding: 36px 22px 28px; border-radius: 20px; }
  .frm-card::before { border-radius: 20px 20px 0 0; }
  .frm-card h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .frm-tick { animation: none; stroke-dashoffset: 0; }
  .frm-back { transition: none; }
  .frm-back:hover { transform: none; }
}