/* ==========================================================================
   Seitenhandwerk – Design-Tokens
   Helle Basis, ein blauer Akzent mit Verlauf, dunkle Abschlusszone.
   Metall entsteht hier nicht durch Farbe, sondern durch Kanten: eine helle
   Linie oben auf jeder Flaeche, ein Verlauf quer darueber, ein kuehler
   Schatten darunter. Deshalb bleibt es ruhig und wirkt nicht nach Chrom.
   Die dunklen Abschnitte definieren dieselben Tokens einfach neu – dadurch
   passen sich Karten, Buttons und Formularfelder von selbst an.
   ========================================================================== */

:root {
  /* Papier und Schrift sind leicht ins Blaue gezogen. Reines Grau wirkt neben
     einem starken Blau schnell schmutzig; ein Hauch Blau im Grau haelt alles
     zusammen. */
  --grund: #e2eaf8;
  --paper: #ffffff;
  --paper-2: #f1f5fd;
  --ink: #0a1020;
  --ink-2: #414f68;
  --ink-3: #6d7c96;
  --line: #dde5f2;
  --line-strong: #bfcce2;

  /* Nur noch Blau. Der Verlauf geht von hell nach dunkel und wieder etwas
     heller – das ist es, was eine Flaeche metallisch aussehen laesst, nicht
     die Farbe selbst. */
  --accent: #1e3fd8;
  --accent-2: #4d86ff;
  --accent-dark: #12256e;
  --accent-hell: #7fa8ff;
  --accent-tint: #e9efff;
  --accent-grad: linear-gradient(135deg, #3a63f0 0%, #1e3fd8 46%, #16299b 100%);

  /* Metall: gebuerstetes Blech, kein Chrom. Die hellen Baender sitzen
     absichtlich schmal und ausserhalb der Mitte. */
  --metall: linear-gradient(146deg, #f7f9fd 0%, #e4ebf7 22%, #ffffff 44%,
                            #dae3f2 62%, #f2f6fc 100%);
  --metall-nacht: linear-gradient(146deg, #18213a 0%, #0d1424 24%, #222d4a 46%,
                                  #0b1120 68%, #161f36 100%);
  --metall-leicht: linear-gradient(180deg, #ffffff 0%, #f3f6fc 56%, #e7edf8 100%);
  --kante: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --kante-nacht: inset 0 1px 0 rgba(160, 185, 255, 0.16);

  --night: #070c18;
  --night-2: #111a2e;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 72rem;
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Sprungziele landen nicht unter der klebenden Topbar. */
  scroll-padding-top: 5.5rem;
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  /* Der Grund ist blau, nicht weiss. Weiss sind nur noch die Flaechen, die
     etwas tragen: Karten, Formular, FAQ, Kopfleiste. */
  background: var(--grund);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  /* Lange deutsche Komposita sollen auf schmalen Displays umbrechen dürfen. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.9vw, 2.9rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.3; }

p, li {
  overflow-wrap: break-word;
  hyphens: auto;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sanftes Einblenden beim Scrollen. Ohne JavaScript (dann fehlt .js am
   html-Element) bleibt alles sichtbar – niemand sieht eine leere Seite. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
}

.lead {
  font-size: clamp(1.06rem, 1.7vw, 1.3rem);
  color: var(--ink-2);
  line-height: 1.6;
}

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.section-head h2 { margin: 0.9rem 0 1rem; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font: inherit;
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent-grad);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(6, 15, 55, 0.35),
    0 10px 24px -12px rgba(18, 37, 110, 0.8);
}

/* Ein schmales Lichtband quer ueber den Knopf. Es steht still und wandert
   erst beim Darueberfahren – eine dauerhafte Animation waere Kirmes. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%,
              rgba(255, 255, 255, 0.30) 48%, transparent 62%);
  opacity: 0;
  transform: translateX(-22%);
  transition: transform 0.55s var(--ease), opacity 0.25s var(--ease);
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(6, 15, 55, 0.35),
    0 18px 34px -14px rgba(18, 37, 110, 0.85);
}

.btn-primary:hover::after { opacity: 1; transform: translateX(22%); }

.btn-primary:disabled {
  background: var(--line-strong);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--metall-leicht);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: var(--kante), 0 6px 16px -12px rgba(10, 16, 32, 0.5);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--kante), 0 12px 24px -14px rgba(18, 37, 110, 0.55);
}

.btn-block { width: 100%; }

/* Topbar ----------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94),
              rgba(240, 244, 251, 0.84));
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}

/* Haarfeine Kante unter der Leiste: in der Mitte blau, an den Raendern weg.
   Das ist der ganze Metall-Effekt hier – mehr braucht eine Kopfzeile nicht. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 63, 216, 0.35) 50%,
              transparent);
  pointer-events: none;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.68rem;
  font-weight: 650;
  font-size: 1.24rem;
  letter-spacing: -0.035em;
  text-decoration: none;
}

/* Das Zeichen sitzt in einem eigenen Feld, damit Schein und Kante nicht am
   Schriftzug haengen. */
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  box-shadow:
    0 6px 16px -8px rgba(18, 37, 110, 0.55),
    0 0 0 1px rgba(30, 63, 216, 0.14);
  transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}

.brand:hover .brand-mark {
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px -8px rgba(18, 37, 110, 0.6),
    0 0 0 1px rgba(30, 63, 216, 0.28);
}

.brand-mark svg { display: block; width: 100%; height: 100%; }

.brand-wort { line-height: 1; }

/* Der Wortteil "handwerk" tritt zurueck, damit der Name als eine Marke
   gelesen wird und nicht als zwei Woerter. */
.brand-wort b {
  font-weight: 650;
  color: var(--accent);
}

.section-dark .brand-wort b,
.footer .brand-wort b { color: var(--accent-hell); }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.topbar-nav a {
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

.topbar-nav a:hover { color: var(--ink); }

.topbar-nav .topbar-cta {
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}

.topbar-nav .topbar-cta:hover {
  background: var(--accent-grad);
  color: #fff;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink);
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}

/* Farbschleier statt Hintergrundbild – kostet kein einziges Kilobyte.
   Zwei Blautoene, kein Violett mehr. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(46rem 30rem at 82% 0%, rgba(96, 146, 255, 0.28), transparent 62%),
    radial-gradient(38rem 26rem at 4% 6%, rgba(30, 63, 216, 0.18), transparent 58%);
  pointer-events: none;
}

/* Das Firmenzeichen gross und sehr blass hinter dem Hero. Es ist als
   Hintergrundbild eingebettet, damit es keine zweite Datei braucht. */
.hero::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -9rem;
  width: 34rem;
  height: 34rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231e3fd8' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18 14 H60 L82 36 V54 L18 86 Z'/%3E%3Cpath d='M60 14 V36 H82'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { margin: 1.1rem 0 1.3rem; }

.hero .lead { max-width: 34rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.2rem;
  list-style: none;
}

.chips li {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: var(--kante);
  font-size: 0.84rem;
  color: var(--ink-2);
}

.hero-art {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 40px 60px rgba(18, 37, 110, 0.20));
}

/* Abschnitte ------------------------------------------------------------- */

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

.section-alt {
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  border-block: 1px solid var(--line);
}

/* Dunkle Zone: dieselben Tokens, andere Werte. */
.section-dark {
  --paper: #12161f;
  --paper-2: var(--night-2);
  --ink: #ffffff;
  --ink-2: #a7aeba;
  --ink-3: #79818f;
  --line: #262b36;
  --line-strong: #39404e;
  --accent: #8ea9ff;
  --accent-tint: rgba(77, 134, 255, 0.18);

  position: relative;
  overflow: hidden;
  background: var(--metall-nacht);
  color: var(--ink);
}

/* Gebuerstetes Blech: sehr feine, sehr blasse Linien ueber der dunklen
   Flaeche, dazu zwei blaue Lichter von unten. Einzeln sieht man nichts
   davon – zusammen wirkt die Flaeche wie Material statt wie Farbe. */
.section-dark::before {
  content: "";
  position: absolute;
  inset: auto -10% -55% -10%;
  height: 110%;
  background:
    radial-gradient(44rem 28rem at 78% 100%, rgba(77, 134, 255, 0.30), transparent 62%),
    radial-gradient(38rem 26rem at 12% 90%, rgba(30, 63, 216, 0.28), transparent 60%);
  pointer-events: none;
}

.section-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.section-dark .wrap { position: relative; z-index: 1; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.card {
  position: relative;
  padding: 1.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante), 0 10px 26px -20px rgba(18, 37, 110, 0.45);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              border-color 0.22s var(--ease);
}

/* Lichtkante auf der Oberkante der Karte. Sie sitzt eingerueckt und laeuft
   zu den Seiten aus – so liest sie sich als Materialkante, nicht als Strich. */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 63, 216, 0.30),
              transparent);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--kante), 0 24px 48px -30px rgba(18, 37, 110, 0.55);
}

.card:hover::before { opacity: 1; }

.card h3 { margin-bottom: 0.65rem; }

.card p {
  color: var(--ink-2);
  font-size: 0.97rem;
}

/* Leistungen ------------------------------------------------------------- */

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.75rem 2.5rem;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

.check {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0.1rem;
  border-radius: 9px;
  background: linear-gradient(150deg, #fff 0%, var(--accent-tint) 60%);
  box-shadow: inset 0 0 0 1px rgba(30, 63, 216, 0.16);
  color: var(--accent);
}

.section-dark .check,
.price-card.is-featured .check {
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px rgba(142, 169, 255, 0.24);
}

.checklist strong {
  display: block;
  font-weight: 600;
}

.checklist span.text {
  display: block;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* Pakete ----------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante), 0 1px 2px rgba(18, 37, 110, 0.04);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

/* Glanz: ein weiches Licht in der oberen Ecke. Es liegt unter dem Inhalt,
   deshalb bleibt jede Zeile lesbar. */
.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(22rem 12rem at 18% -8%, rgba(255, 255, 255, 0.9), transparent 70%),
    linear-gradient(160deg, rgba(126, 165, 255, 0.16) 0%, transparent 46%);
  pointer-events: none;
}

.price-card > * { position: relative; }

.price-card:hover { transform: translateY(-4px); }


/* Das mittlere Paket ist dunkel – es zieht den Blick ohne lauten Rahmen. */
.price-card.is-featured {
  --paper: var(--night-2);
  --ink: #ffffff;
  --ink-2: #b6c0d4;
  --ink-3: #8894ac;
  --line: #26314b;
  --accent: #8ea9ff;
  --accent-tint: rgba(142, 169, 255, 0.16);

  background: var(--metall-nacht);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--kante-nacht), 0 30px 60px -32px rgba(7, 12, 24, 0.75);
}

/* Der Glanz der hellen Karten waere auf der dunklen ein grauer Schleier.
   Hier faengt stattdessen ein blaues Licht die obere Ecke. */
.price-card.is-featured::before {
  background:
    radial-gradient(20rem 11rem at 20% -8%, rgba(150, 182, 255, 0.22), transparent 66%),
    linear-gradient(200deg, transparent 52%, rgba(4, 9, 26, 0.45) 100%);
}

.price-badge {
  position: absolute;
  top: -0.75rem;
  left: 2rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Gewaehltes Paket ---------------------------------------------------------
   Dieselbe Technik wie bei den dunklen Abschnitten: die Karte setzt ihre
   eigenen Farbwerte neu, alles darin folgt von selbst. */

.price-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.price-card.is-gewaehlt {
  --paper: #1a35b4;
  --ink: #ffffff;
  --ink-2: #d3ddff;
  --ink-3: #aebfff;
  --line: rgba(255, 255, 255, 0.22);
  --line-strong: rgba(255, 255, 255, 0.4);
  --accent: #ffffff;
  --accent-tint: rgba(255, 255, 255, 0.18);

  background: linear-gradient(152deg, #4470f7 0%, #1e3fd8 42%, #14268f 100%);
  border-color: transparent;
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 22px 46px -22px rgba(20, 38, 143, 0.85);
}

.price-card.is-gewaehlt::before {
  background:
    radial-gradient(20rem 11rem at 20% -10%, rgba(255, 255, 255, 0.34), transparent 68%),
    linear-gradient(200deg, transparent 55%, rgba(6, 14, 60, 0.35) 100%);
}

/* Der Knopf muss auf der blauen Karte hell werden, sonst verschwindet er. */
.price-card.is-gewaehlt .btn {
  background: #ffffff;
  border-color: transparent;
  color: var(--accent-dark);
  box-shadow: 0 10px 22px -12px rgba(6, 14, 60, 0.9);
}

.price-card.is-gewaehlt .btn::after { display: none; }

.price-card.is-gewaehlt .btn:hover {
  background: #eef3ff;
  transform: translateY(-2px);
}

/* «Am haeufigsten gewaehlt» und «Gewaehlt» nebeneinander liest sich doppelt.
   Sobald die Karte gewaehlt ist, zaehlt nur noch die eigene Wahl. */
.price-card.is-gewaehlt .price-badge { display: none; }

/* «Gewählt» erscheint erst, wenn es zutrifft – sonst steht die Karte falsch da. */
.price-wahl {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-card.is-gewaehlt .price-wahl { display: inline-flex; }

.price-hinweis {
  margin-top: 1.4rem;
  color: var(--ink-3);
  font-size: 0.88rem;
}

.price-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

.price-for {
  min-height: 3.2rem;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.5;
}

.price-amount {
  display: block;
  margin: 1.2rem 0 0.3rem;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.price-note {
  display: block;
  margin-bottom: 1.6rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.price-list {
  flex: 1;
  margin-bottom: 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 0.7rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.price-list li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.65rem;
  align-items: start;
}

.price-list svg {
  margin-top: 0.35rem;
  color: var(--accent);
}

.price-list .is-head {
  grid-template-columns: 1fr;
  margin-bottom: 0.2rem;
  font-weight: 600;
  color: var(--ink);
}

/* Kleingedrucktes ------------------------------------------------------- */

.fineprint {
  margin-top: 1.6rem;
  font-size: 0.86rem;
  color: var(--ink-3);
  max-width: 46rem;
}

.fineprint + .fineprint { margin-top: 0.5rem; }

/* Betreuungsstufen ------------------------------------------------------- */

.care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.care-card h3 { margin-bottom: 0.5rem; }

/* Zwei Klassen, damit die Regel das allgemeinere .card p schlägt. */
.care-card .care-amount {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.care-card .care-amount span {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.care-list {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0 1.05rem;
  color: var(--ink-2);
  font-size: 0.94rem;
}

.care-list strong { color: var(--ink); }

/* Die aktive Stufe bekommt denselben Farbschleier wie die Betreuungsbox vorher. */
.care-card.is-aktiv {
  background: linear-gradient(135deg, var(--accent-tint) 0%, transparent 55%), var(--paper);
  border-color: var(--line-strong);
}

/* Referenz --------------------------------------------------------------- */

.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.case h2 { margin: 0.9rem 0 1rem; }

.case p { color: var(--ink-2); }

.case-list {
  margin: 1.5rem 0 2rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.case-link {
  font-weight: 500;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.15s var(--ease);
}

.case-link:hover { text-decoration-color: var(--accent); }

/* Referenz-Screenshots */

.shot {
  position: relative;
  padding-bottom: 2.5rem;
}

.shot-browser {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 40px 70px -44px rgba(11, 13, 18, 0.6);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.8rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.shot-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.shot-browser img,
.shot-phone {
  display: block;
  width: 100%;
  height: auto;
}

.shot-phone {
  position: absolute;
  right: -0.5rem;
  bottom: 0;
  width: 26%;
  max-width: 148px;
  border: 4px solid var(--paper-2);
  border-radius: 18px;
  box-shadow: 0 26px 50px -22px rgba(11, 13, 18, 0.7);
}

/* Ablauf ----------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem 1.5rem;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding-top: 3.4rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
              0 8px 18px -10px rgba(18, 37, 110, 0.7);
}

/* Verbindungslinie zwischen den Schritten, nur auf breiten Displays. */
.steps li::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 3rem;
  right: -1.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-2), var(--line) 65%);
  opacity: 0.55;
}

.steps li:last-child::after { display: none; }

.steps h3 { margin-bottom: 0.5rem; }

.steps p {
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* FAQ -------------------------------------------------------------------- */

/* Das FAQ steht auf der weissen Zwischenzone. Weiss auf Weiss waere flach,
   deshalb bekommt der Kasten den blauen Ton. */
.faq {
  max-width: 48rem;
  padding: 0.5rem 1.75rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante), 0 1px 2px rgba(18, 37, 110, 0.04);
}

.faq details + details {
  border-top: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq details p {
  padding: 0 0 1.4rem;
  max-width: 42rem;
  color: var(--ink-2);
  font-size: 0.97rem;
}

/* Kontakt ---------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-grid h2 { margin: 0.9rem 0 1rem; }

.contact-steps {
  margin-top: 2rem;
  display: grid;
  gap: 0.85rem;
  list-style: none;
  font-size: 0.96rem;
  color: var(--ink-2);
}

.contact-steps li {
  display: grid;
  grid-template-columns: 1.65rem 1fr;
  gap: 0.85rem;
  align-items: start;
}

.contact-direct {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.35rem;
  font-size: 0.94rem;
  color: var(--ink-3);
}

.contact-direct a {
  color: var(--ink);
  text-underline-offset: 4px;
}

.form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante-nacht), 0 26px 54px -34px rgba(7, 12, 24, 0.8);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.88rem;
  font-weight: 500;
}

.field .optional {
  font-weight: 400;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Honeypot: für echte Besucher unsichtbar, für Bots ein Pflichtfeld-Angebot. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-size: 0.93rem;
  line-height: 1.55;
}

.form-status[data-state="error"] { color: #ff8f84; }
.form-status[data-state="success"] { color: #6fe3ac; }

.form-legal {
  font-size: 0.82rem;
  color: var(--ink-3);
}

.form-legal a { color: var(--ink-2); }

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

.footer {
  position: relative;
  padding: 2.75rem 0;
  background: var(--night);
  border-top: 1px solid rgba(142, 169, 255, 0.18);
  color: #7d8aa4;
}

/* Dieselbe Lichtkante wie unter der Kopfzeile – oben und unten der gleiche
   Abschluss, dazwischen die Seite. */
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 134, 255, 0.55) 50%,
              transparent);
}

.footer-inner { position: relative; }

.footer-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-marke svg {
  display: block;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(142, 169, 255, 0.22);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-links a {
  color: #aab6cc;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

.footer-links a:hover { color: #fff; }

/* Rechtstexte ------------------------------------------------------------ */

.legal { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }

.legal-inner {
  max-width: 44rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante), 0 14px 34px -26px rgba(18, 37, 110, 0.5);
}

.legal h1 { margin-bottom: 2rem; }

.legal h2 {
  margin: 2.4rem 0 0.6rem;
  font-size: 1.2rem;
}

.legal p, .legal li { color: var(--ink-2); }

.legal ul {
  margin: 0.5rem 0 0 1.1rem;
  display: grid;
  gap: 0.3rem;
}

.legal a { color: var(--ink); }

.legal-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.legal-back { margin-top: 3rem; }

/* Schmale Displays ------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero-grid,
  .case,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .price-grid { grid-template-columns: 1fr; }

  .price-card:hover,
  .card:hover { transform: none; }

  .care-grid { grid-template-columns: 1fr; }

  .steps li::after { display: none; }

  .hero::after {
    right: -8rem;
    bottom: -7rem;
    width: 22rem;
    height: 22rem;
    opacity: 0.045;
  }
}

@media (max-width: 46rem) {
  .nav-toggle { display: inline-flex; }

  .topbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .topbar-nav.is-open { display: flex; }

  .topbar-nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }

  .topbar-nav .topbar-cta {
    margin-top: 1rem;
    border-bottom: none;
    text-align: center;
  }

  .form-row { grid-template-columns: 1fr; }

  .hero-actions .btn { flex: 1 1 auto; }

  .brand { font-size: 1.12rem; gap: 0.55rem; }
  .brand-mark { width: 2.1rem; height: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  .js [data-reveal] {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Chat-Fenster und Einwilligung ------------------------------------------
   Beide hängen an body und dürfen den Seiteninhalt nicht verschieben. */

.assi-knopf {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.05rem; border: 0; border-radius: 999px;
  background: var(--accent-grad); color: #fff;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
              0 10px 24px -10px rgba(18, 37, 110, .7);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.assi-knopf:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42),
              0 16px 30px -12px rgba(18, 37, 110, .75);
}
.assi-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.assi-panel {
  position: fixed; right: 16px; bottom: 74px; z-index: 61;
  width: min(380px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--kante), 0 24px 60px -26px rgba(18, 37, 110, .5);
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
.assi-panel[data-sichtbar] { opacity: 1; transform: none; }

.assi-kopf {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.assi-kopf strong { font-weight: 600; }
.assi-punkt {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
}
.assi-punkt.ist-da { background: #1a7f37; }
.assi-status { flex: 1; font-size: .78rem; color: var(--ink-2); }
.assi-zu {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.assi-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.assi-inhalt {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .55rem;
}

.assi-blase {
  max-width: 85%; padding: .6rem .85rem; border-radius: 13px;
  font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere;
}
.assi-ich { align-self: flex-start; background: var(--paper-2); border-bottom-left-radius: 4px; }
.assi-sie { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.assi-sie a, .assi-ich a { color: inherit; }

.assi-eingabe {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .7rem .8rem; border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.assi-eingabe textarea, .assi-eingabe input {
  flex: 1; min-width: 0; resize: none;
  padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 9px; background: var(--paper); color: inherit;
  font: inherit; font-size: .9rem; line-height: 1.4;
}
.assi-eingabe textarea:focus, .assi-eingabe input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.assi-senden {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 9px;
  background: var(--accent-grad); color: #fff;
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.assi-senden:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.assi-kontakt { flex-wrap: wrap; }
.assi-kontakt input { flex: 1 1 100%; }
.assi-kontakt .btn { flex: 1 1 100%; padding: .55rem 1rem; font-size: .9rem; }

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

@media (max-width: 520px) {
  .assi-panel { right: 8px; left: 8px; bottom: 70px; width: auto; max-height: calc(100vh - 100px); }
  .assi-knopf span { display: none; }
  .assi-knopf { padding: .8rem; }
}

/* Einwilligung: erscheint nur, wenn wirklich etwas zu entscheiden ist. */
.einwilligung {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  max-width: 560px; margin: 0 auto; padding: 1rem 1.1rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--kante), 0 20px 50px -22px rgba(18, 37, 110, .5);
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.einwilligung[data-sichtbar] { opacity: 1; transform: none; }
.einwilligung-text { margin: 0 0 .8rem; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.einwilligung-text a { color: var(--accent); }
.einwilligung-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.einwilligung-knoepfe .btn { flex: 1 1 auto; padding: .5rem 1rem; font-size: .86rem; }

/* Beide sitzen unten rechts. Solange über die Einwilligung entschieden wird,
   tritt der Chat-Knopf zurück – sonst liegt er unter dem Banner. */
body[data-einwilligung-offen] .assi-knopf,
body[data-einwilligung-offen] .assi-panel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .assi-panel, .einwilligung { transition: none; }
}

/* Bewertungen --------------------------------------------------------------
   Der Abschnitt kommt nur auf die Seite, wenn echte Einträge vorliegen.
   Deshalb gibt es hier keinen Leerzustand zu gestalten. */

.bewertung-schnitt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.bewertung-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.bewertung {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante), 0 10px 26px -20px rgba(18, 37, 110, 0.45);
}

.bewertung blockquote {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Anführungszeichen kommen aus dem CSS, damit sie im Text nicht mitkopiert
   werden, wenn jemand das Zitat markiert. */
.bewertung blockquote::before { content: "«"; }
.bewertung blockquote::after { content: "»"; }

.bewertung figcaption {
  display: grid;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.bewertung figcaption span { color: var(--ink-3); }

.sterne {
  display: inline-flex;
  gap: 2px;
  color: #e8a33d;
}

.sterne svg { display: block; }

/* Regionsseiten ------------------------------------------------------------
   Eigene Seiten für Bremgarten, Muri, Wohlen und Affoltern. Sie benutzen
   dieselben Bausteine wie die Startseite; nur diese drei Regeln kommen dazu. */

.region-text {
  display: grid;
  gap: 1.15rem;
  max-width: 42rem;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
}

.region-preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  list-style: none;
}

.region-preise li {
  display: grid;
  gap: 0.4rem;
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--kante), 0 10px 26px -20px rgba(18, 37, 110, 0.45);
}

.region-preise strong {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.region-preise span {
  color: var(--ink-2);
  font-size: 0.94rem;
}

.region-schluss {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.region-schluss h2 { margin-bottom: 1rem; }

/* Die Ortsliste in der Fusszeile. Sie ist der einzige Weg, auf dem Google
   die Regionsseiten findet – deshalb steht sie auf jeder Seite. */
.footer-regionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(142, 169, 255, 0.14);
  font-size: 0.88rem;
}

.footer-regionen span {
  color: #6b7896;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: center;
}

.footer-regionen a {
  color: #aab6cc;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

.footer-regionen a:hover { color: #fff; }

/* Der Hero der Regionsseiten ist niedriger als der auf der Startseite.
   Das Wasserzeichen war dort zu gross und wurde am Rand hart abgeschnitten. */
.hero-schmal { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

.hero-schmal::after {
  right: -4rem;
  bottom: -6rem;
  width: 22rem;
  height: 22rem;
  opacity: 0.04;
}