/* KrakenBot – Startseite (2.3). Gestaltung aus dem Programm selbst: ruhige helle Flächen, das dunkle Anzeigefenster,
   Bernstein nur für Bedingungs-Lampen, Stahlblau für Aktionen. Keine fremden Schriften, keine Inline-Stile (CSP). */
:root {
  color-scheme: light;
  --page: #eef1f5;
  --paper: #f7f9fb;
  --panel: #ffffff;
  --line: #dde3ea;
  --line-strong: #c3ccd6;
  --ink: #111a24;
  --ink-2: #4b5967;
  --muted: #6f7c89;
  --window: #0f1a26;
  --window-2: #16263a;
  --window-3: #1d3049;
  --window-line: #26384d;
  --window-ink: #eef3f8;
  --window-ink-2: #9fb0c2;
  --lamp: #e09a12;
  --lamp-glow: rgba(224, 154, 18, .45);
  --lamp-off: #2c3d51;
  --steel: #2453d4;
  --steel-hover: #1d45b5;
  --steel-ink: #ffffff;
  --steel-soft: rgba(36, 83, 212, .09);
  --display: "Bahnschrift", "DIN Alternate", "D-DIN", "Barlow", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --max: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0b0f14; --paper: #0f141b; --panel: #131a23; --line: #222c39; --line-strong: #334152;
    --ink: #e7edf3; --ink-2: #a9b5c1; --muted: #7f8b98;
    --window: #0a1520; --window-2: #10202f; --window-3: #16293d; --window-line: #22364a;
    --steel: #6e9bff; --steel-hover: #8bb0ff; --steel-ink: #08111d; --steel-soft: rgba(110, 155, 255, .12);
  }
}
* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--steel); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------ Kopf */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px 28px; padding: 12px var(--gut);
  background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 34px; height: 34px; border-radius: 9px; background: var(--window); display: flex; align-items: center;
  justify-content: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--window-line); flex: none; }
.mark i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp-off); }
.mark i:first-child { background: var(--lamp); box-shadow: 0 0 7px var(--lamp-glow); }
.brand-name { font-family: var(--display); font-size: 20px; font-weight: 600; }
.top-nav { display: flex; gap: 22px; margin-right: auto; }
.top-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.top-nav a:hover { color: var(--ink); }
.top-act { display: flex; gap: 10px; align-items: center; }
.demo-form { margin: 0; display: contents; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 18px; border-radius: 10px;
  font: 600 15px/1.2 var(--body); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-solid { background: var(--steel); color: var(--steel-ink); }
.btn-solid:hover { background: var(--steel-hover); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { background: var(--panel); }
.btn-line-dark { background: transparent; color: var(--window-ink); border-color: #3a5068; }
.btn-line-dark:hover { background: var(--window-2); }
.btn-big { min-height: 50px; padding: 12px 24px; font-size: 16px; border-radius: 12px; }
.btn:disabled { opacity: .55; cursor: wait; }

/* ------------------------------------------------------------ Anzeigefenster (Hero) */
.hero { background: var(--window); color: var(--window-ink); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px; align-items: center; padding: clamp(48px, 8vw, 104px) max(var(--gut), calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--window-line); }
.hero h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.03; letter-spacing: -.02em; max-width: 14ch; }
.lead { margin: 22px 0 30px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--window-ink-2); max-width: 54ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 16px 0 0; font-size: 14px; color: var(--window-ink-2); }
.demo-msg { margin: 10px 0 0; min-height: 1.4em; font-size: 15px; color: #ffcf7a; }
.demo-msg:empty { display: none; }

/* Bedingungs-Lampen */
.panel { margin: 0; background: var(--window-2); border: 1px solid var(--window-line); border-radius: 18px; padding: 20px 22px 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px;
  border-bottom: 1px solid var(--window-line); }
.panel-mkt { font-family: var(--display); font-size: 22px; font-weight: 600; }
.panel-tf { font-size: 13.5px; color: var(--window-ink-2); }
.lamps { list-style: none; margin: 0; padding: 6px 0; }
.lamps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05); }
.lamps li:last-child { border-bottom: 0; }
.lamp { width: 14px; height: 14px; border-radius: 50%; background: var(--lamp-off); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: lampOn .5s ease-out forwards; }
.l-name { font-size: 15.5px; }
.l-val { font-family: var(--display); font-size: 14.5px; color: var(--window-ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.lamps li:nth-child(1) .lamp { animation-delay: .5s; }
.lamps li:nth-child(2) .lamp { animation-delay: .9s; }
.lamps li:nth-child(3) .lamp { animation-delay: 1.3s; }
.lamps li:nth-child(4) .lamp { animation-delay: 1.7s; }
.lamps li:nth-child(5) .lamp { animation-delay: 2.1s; }
.lamps li:nth-child(6) .lamp { animation-delay: 2.5s; }
@keyframes lampOn { to { background: var(--lamp); box-shadow: 0 0 0 4px rgba(224, 154, 18, .16), 0 0 14px var(--lamp-glow); } }
.signal { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--window-3);
  border: 1px solid #36506d; opacity: 0; transform: translateY(6px); animation: sigIn .45s ease-out 3.05s forwards; }
.sig-tag { font-family: var(--display); font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--lamp); color: #1c1302; }
.sig-text { font-family: var(--display); font-size: 16px; font-variant-numeric: tabular-nums; }
@keyframes sigIn { to { opacity: 1; transform: none; } }
.panel figcaption { margin-top: 12px; font-size: 12.5px; color: var(--window-ink-2); }

/* ------------------------------------------------------------ Abschnitte */
.block { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gut) 0; }
.block > h2, .row-text h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; }
.block > h2 { margin-bottom: 28px; }
.row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.row + .row { margin-top: clamp(56px, 8vw, 96px); }
.row-flip .row-text { order: 2; }
.row-text h2 { margin-bottom: 16px; }
.row-text p { color: var(--ink-2); font-size: 17px; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 7px 0 7px 26px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 2px; background: var(--steel); }
.shot { margin: 0; }
.shot img { border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px rgba(16, 24, 40, .14);
  background: var(--panel); }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.shot-phone { justify-self: center; width: min(320px, 100%); }
.shot-phone img { border-radius: 28px; border: 8px solid var(--window); box-shadow: 0 24px 50px rgba(16, 24, 40, .22); }

/* Ablauf */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  counter-reset: s; border-top: 2px solid var(--ink); }
.steps li { counter-increment: s; padding: 18px 18px 0 0; }
.steps li::before { content: counter(s); display: block; font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1;
  color: var(--steel); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.steps b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.steps span { display: block; color: var(--ink-2); font-size: 15px; }

/* Funktionen */
.features { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.features div { padding: 18px 0; border-top: 1px solid var(--line-strong); }
.features dt { font-family: var(--display); font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.features dd { margin: 0; color: var(--ink-2); }

/* Sicherheit */
.safety { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.safety .ticks li { padding-top: 10px; padding-bottom: 10px; }
.safety .ticks li::before { top: 18px; }
.risk { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #c98500; border-radius: 0 14px 14px 0; padding: 18px 20px; }
.risk h3 { font-size: 19px; margin-bottom: 8px; }
.risk p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Demo-Band */
.demo-band { margin-top: clamp(64px, 9vw, 112px); background: var(--window); color: var(--window-ink); }
.demo-inner { max-width: var(--max); margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--gut); display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto; gap: 24px 48px; align-items: center; }
.demo-band h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
.demo-band p { color: var(--window-ink-2); max-width: 62ch; }
.demo-band .fine { font-size: 14px; margin: 0; }
.demo-band a { color: #a9c4ff; }
.demo-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.demo-off { color: #ffcf7a; margin: 0; }

/* Fuß */
.foot { max-width: var(--max); margin: 0 auto; padding: 28px var(--gut) 40px; display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 13.5px; }
.foot-risk { margin: 0; max-width: 70ch; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.foot-nav a { color: var(--ink-2); }
.foot-ver { font-variant-numeric: tabular-nums; }

/* Rechtliche Seiten */
.legal { max-width: 760px; margin: 0 auto; padding: 48px var(--gut) 64px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 24px; }
.legal h2 { font-size: 21px; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal address { font-style: normal; line-height: 1.7; color: var(--ink); }
.legal .stand { font-size: 13.5px; color: var(--muted); margin-top: 32px; }

/* ------------------------------------------------------------ Kleinere Bildschirme */
@media (max-width: 1020px) {
  .top-nav { display: none; }
  .top { justify-content: space-between; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero h1 { max-width: 16ch; }
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 16px 0; border-top: 1px solid var(--line-strong); }
  .steps li::before { grid-row: 1 / span 2; margin: 0; font-size: 34px; }
}
@media (max-width: 820px) {
  .row, .row-flip, .safety, .demo-inner { grid-template-columns: minmax(0, 1fr); }
  .row-flip .row-text { order: 0; }
  .features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .top { padding: 10px 14px; gap: 8px; }
  .brand-name { font-size: 18px; }
  .mark { width: 30px; height: 30px; }
  .top-act { gap: 6px; }
  .top-act .btn { min-height: 38px; padding: 7px 12px; font-size: 14px; }
  .hero-act .btn, .hero-act .demo-form button { width: 100%; }
  .hero-act { flex-direction: column; }
  .lamps li { grid-template-columns: 16px minmax(0, 1fr); }
  .l-val { grid-column: 2; text-align: left; font-size: 13.5px; }
  .panel { padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lamp { animation: none; background: var(--lamp); box-shadow: 0 0 0 4px rgba(224, 154, 18, .16), 0 0 14px var(--lamp-glow); }
  .signal { animation: none; opacity: 1; transform: none; }
}
@media print {
  .top, .demo-band, .hero-act { display: none; }
  .hero { background: none; color: #000; }
}

/* ------------------------------------------------------------ 2.4: moderner – Tiefe, Glas, Licht */
.top { background: color-mix(in srgb, var(--page) 72%, transparent); }
.top-nav { background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px; gap: 2px; margin: 0 auto; }
.top-nav a { padding: 6px 14px; border-radius: 999px; }
.top-nav a:hover, .top-nav a[aria-current="page"] { background: var(--steel-soft); color: var(--steel); }
.btn { border-radius: 999px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-solid { background: linear-gradient(180deg, #3a6cf0, var(--steel)); box-shadow: 0 6px 18px rgba(36, 83, 212, .35); }
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(36, 83, 212, .45); }
.hero { position: relative; overflow: hidden; background:
  radial-gradient(900px 500px at 85% 20%, rgba(36, 83, 212, .38), transparent 60%),
  radial-gradient(700px 420px at 10% 110%, rgba(224, 154, 18, .16), transparent 60%),
  linear-gradient(180deg, #0b1522, #0f1a26); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); }
.hero > * { position: relative; }
.pill { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; color: #cfe0ff;
  background: rgba(110, 155, 255, .14); border: 1px solid rgba(110, 155, 255, .35); }
a.pill { text-decoration: none; transition: background .2s ease, border-color .2s ease; }
a.pill:hover { background: rgba(110, 155, 255, .24); border-color: rgba(110, 155, 255, .6); }
a.pill:focus-visible { outline: 2px solid #cfe0ff; outline-offset: 3px; }
.glow { background: linear-gradient(90deg, #ffd27a, #e09a12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel { background: rgba(22, 38, 58, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px;
  border-color: rgba(120, 160, 210, .22); box-shadow: 0 40px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.shot img { border-radius: 18px; }
.features { gap: 16px; }
.features div { border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; background: var(--panel);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .2s ease, box-shadow .2s ease; }
.features div:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 24, 40, .1); }
.steps { gap: 14px; border-top: 0; }
.steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.risk { border-radius: 18px; border-left-width: 1px; border-color: color-mix(in srgb, #c98500 45%, var(--line)); }
.demo-band { background: radial-gradient(800px 380px at 90% 0%, rgba(36, 83, 212, .4), transparent 60%), linear-gradient(180deg, #0f1a26, #0b1522); }
.demo-cta { flex-direction: row; flex-wrap: wrap; }

/* Preise */
.prices { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) 40px; }
.p-head { margin: 0 calc(-1 * var(--gut)); padding: clamp(48px, 7vw, 88px) var(--gut) clamp(90px, 10vw, 130px); color: var(--window-ink); text-align: center;
  background: radial-gradient(800px 400px at 50% 0%, rgba(36, 83, 212, .45), transparent 65%), linear-gradient(180deg, #0b1522, #0f1a26); border-radius: 0 0 32px 32px; }
.p-head h1 { font-size: clamp(36px, 5vw, 56px); }
.lead-dark { color: var(--window-ink-2); max-width: 60ch; margin: 16px auto 0; font-size: 18px; }
.p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: -70px; position: relative; }
.p-card { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 28px 28px 24px; box-shadow: 0 24px 50px rgba(16, 24, 40, .14);
  display: flex; flex-direction: column; }
.p-card.p-vps { border-color: color-mix(in srgb, var(--steel) 45%, var(--line)); box-shadow: 0 24px 50px rgba(36, 83, 212, .2); }
.p-card h2 { font-size: 24px; }
.p-desc { color: var(--ink-2); margin: 10px 0 18px; }
.p-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.p-num { font-family: var(--display); font-size: 46px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.p-num.p-ask { font-size: 26px; }
.p-per { color: var(--muted); font-size: 15px; }
.p-buy { align-self: stretch; }
.p-pay { font-size: 13px; color: var(--muted); margin: 10px 0 14px; }
.p-card .ticks { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.p-fine { text-align: center; color: var(--muted); font-size: 14px; max-width: 70ch; margin: 22px auto 0; }
.p-none { text-align: center; padding: 40px; background: var(--panel); border-radius: 24px; }
@media (max-width: 1020px) { .top-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn, .features div { transition: none; } }

/* 2.5: Preise – Vergleich, Kontakt, Download */
.p-soon { margin: 4px 0 14px; font-weight: 600; color: var(--ink-2); }
.p-compare { margin-top: 56px; }
.p-compare h2, .p-contact h2 { font-size: clamp(26px, 3vw, 34px); }
.p-sub { color: var(--ink-2); max-width: 70ch; margin: 10px 0 18px; }
.p-table { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.p-table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.p-table th, .p-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.p-table thead th { font-family: var(--display); font-size: 15px; color: var(--ink-2); background: var(--paper); }
.p-table tbody th { font-weight: 500; }
.p-table td.yes { color: var(--steel); font-weight: 700; font-size: 18px; text-align: center; }
.p-table td.no { color: var(--muted); text-align: center; }
.p-table tr:last-child th, .p-table tr:last-child td { border-bottom: 0; }
.p-contact { margin: 48px 0 0; padding: 28px; border-radius: 24px; background: var(--window); color: var(--window-ink); }
.p-contact p { color: var(--window-ink-2); }
.contact-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.p-contact .btn-line { color: var(--window-ink); border-color: #3a5068; }
.dl-file { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
/* 2.5: Funktionen in drei Spalten, dezente Nummer-freie Kacheln */
@media (min-width: 1021px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.features dt::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--steel), color-mix(in srgb, var(--steel) 30%, transparent)); }
.p-table .l-short { display: none; }
.p-table thead th + th, .p-table tr.txt td { text-align: center; }
@media (max-width: 640px) {
  .p-table table, .p-table thead, .p-table tbody { display: block; min-width: 0; font-size: 14.5px; }
  .p-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px; align-items: center; border-bottom: 1px solid var(--line); }
  .p-table tr:last-child { border-bottom: 0; }
  .p-table th, .p-table td { border-bottom: 0; padding: 11px 8px; }
  .p-table th:first-child { padding-left: 14px; }
  .p-table thead th { text-align: center; font-size: 13.5px; }
  .p-table thead th:first-child { text-align: left; }
  .p-table .l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .p-table .l-short { display: inline; }
  .p-table tr.txt { grid-template-columns: 1fr 1fr; align-items: start; }
  .p-table tr.txt th { grid-column: 1 / -1; padding-bottom: 0; font-weight: 600; }
  .p-table tr.txt td { padding-left: 14px; font-size: 14px; text-align: left; }
  .p-table tr.txt td::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
}

/* 2.6: Ablauf als Strecke mit Lampen, Funktionen als Bento mit kleinen Beispielen */
.sec-sub { color: var(--ink-2); max-width: 62ch; margin: -14px 0 28px; font-size: 17px; }
.flow { list-style: none; margin: 0; padding: 30px 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
  position: relative; border-radius: 24px; color: var(--window-ink); counter-reset: f;
  background: radial-gradient(720px 320px at 0% 0%, rgba(224, 154, 18, .13), transparent 60%), linear-gradient(180deg, var(--window-2), var(--window)); }
.flow::before { content: ""; position: absolute; left: 48px; right: 48px; top: 48px; height: 2px;
  background: linear-gradient(90deg, var(--lamp), color-mix(in srgb, var(--lamp) 25%, var(--window-line))); }
.flow li { position: relative; counter-increment: f; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.flow-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--window); position: relative; z-index: 1;
  border: 2px solid var(--lamp); box-shadow: 0 0 0 5px rgba(224, 154, 18, .12), 0 0 18px var(--lamp-glow); margin-bottom: 8px; }
.flow-dot::before { content: counter(f); font-family: var(--display); font-weight: 700; font-size: 16px; color: #ffd27a; }
.flow h3 { font-size: 20px; color: var(--window-ink); }
.flow p { margin: 0; color: var(--window-ink-2); font-size: 15px; flex: 1; }
.flow-ex { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--window-line); font-family: var(--display); font-size: 13px;
  color: var(--window-ink); font-variant-numeric: tabular-nums; }
.mini-lamps { display: inline-flex; gap: 3px; }
.mini-lamps i { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 6px var(--lamp-glow); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bx { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bx-wide { grid-column: span 2; }
.bx-head h3 { font-size: 24px; }
.bx-head p { margin: 4px 0 0; color: var(--ink-2); }
.bx .features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bx-wide .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; }
.bx .features div { border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; transition: none; }
.bx .features div:hover { transform: none; box-shadow: none; }
.bx .features dt { font-size: 17px; margin-bottom: 2px; }
.bx .features dt::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 9px 2px 0;
  background: var(--lamp); box-shadow: 0 0 6px var(--lamp-glow); vertical-align: middle; }
.bx .features dd { font-size: 15px; }
.bx-dark { background: linear-gradient(160deg, var(--window-2), var(--window)); border-color: var(--window-line); color: var(--window-ink); }
.bx-dark .bx-head p, .bx-dark .features dd { color: var(--window-ink-2); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; background: rgba(255, 255, 255, .06); border: 1px solid var(--window-line); }
.chips .chip-auto { border-color: var(--lamp); color: #ffd27a; }
.meters { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.meters div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 13.5px; color: var(--ink-2); }
.meters b { font-family: var(--display); color: var(--ink); }
.meters i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.meters i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--steel), #7fa6ff); }
.meters .m1::after { width: 18%; }
.meters .m2::after { width: 42%; }
.meters .m3::after { width: 72%; }
.fan { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.fan-90 { fill: color-mix(in srgb, var(--steel) 12%, transparent); }
.fan-50 { fill: color-mix(in srgb, var(--steel) 26%, transparent); }
.fan-hist { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fan-med { fill: none; stroke: var(--steel); stroke-width: 2.5; stroke-linecap: round; }
.fan-now { fill: var(--ink); }
.note { display: grid; gap: 3px; padding: 12px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); max-width: 440px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .08); }
.note-app { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.note-app i { width: 16px; height: 16px; border-radius: 5px; background: radial-gradient(circle at 34% 50%, var(--lamp) 0 2.6px, transparent 3.2px), var(--window); }
.note b { font-size: 15px; }
.note span:last-child { font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 1020px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 20px; }
  .flow::before { left: 38px; right: auto; top: 42px; bottom: 42px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--lamp), color-mix(in srgb, var(--lamp) 25%, var(--window-line))); }
  .flow li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding-bottom: 24px; }
  .flow li:last-child { padding-bottom: 0; }
  .flow-dot { grid-row: 1 / span 3; margin: 0; }
  .flow h3 { margin-top: 7px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bx-wide { grid-column: auto; }
  .bx-wide .features { grid-template-columns: minmax(0, 1fr); }
  .bx { padding: 20px; }
}
/* 2.6: Kündigung, Rechtstexte */
.kform { display: grid; gap: 14px; max-width: 560px; margin: 22px 0 8px; }
.kform label { display: grid; gap: 6px; font-weight: 600; color: var(--ink); }
.kform input:not([type="radio"]), .kform select, .kform textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%; box-sizing: border-box; }
.kform fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; }
.kform legend { font-weight: 700; padding: 0 6px; }
.kform .k-opt { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.kform .k-opt input { width: 18px; height: 18px; accent-color: var(--steel); }
.kform button { justify-self: start; margin-top: 6px; }
.k-err { padding: 10px 14px; border-radius: 10px; background: rgba(214, 64, 64, .1); border-left: 3px solid #d64040; color: var(--ink); }
.k-ok { padding: 14px 18px; border-radius: 14px; background: rgba(22, 160, 90, .1); border-left: 3px solid #16a05a; margin: 18px 0; }
.k-ok h2 { margin: 0 0 6px; }
.receipt { white-space: pre-wrap; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 13.5px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-wrap: anywhere; }
.form-lines { padding-left: 18px; }
.form-lines li { margin: 6px 0; }
@media print { .top, .foot, .contact-btns { display: none; } }

.lang-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); font-size: 13px; }
.lang-sw a { padding: 4px 10px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 700; }
.lang-sw a[aria-current="true"] { background: var(--ink); color: var(--panel); }
@media (max-width: 560px) {
  .lang-sw a[aria-current="true"] { display: none; }
  .lang-sw { padding: 2px; }
}
@media (max-width: 430px) {
  .top .brand-name { display: none; }
}
/* 2.8: Häufige Fragen */
.faq-page { max-width: 820px; }
.faq-lead { font-size: 18px; }
.faq-cat { margin-top: 36px; }
.faq { display: grid; gap: 10px; margin-top: 12px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 0; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; font-family: var(--display); font-weight: 600; font-size: 17.5px;
  color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details[open] { border-color: color-mix(in srgb, var(--steel) 40%, var(--line)); box-shadow: 0 10px 26px rgba(16, 24, 40, .07); }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--ink-2); }
.faq-more { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* 2.9: sichtbarer Text über KrakenBot (Admin → Suchmaschinen) */
.seo-about p { max-width: 72ch; color: var(--ink-2, inherit); font-size: 17px; line-height: 1.65; margin: 0 0 14px; }

/* 2.9: Lizenz auf der persönlichen Download-Seite (ein Schlüssel = ein Gerät, Freigeben für den Umzug) */
.dl-lic { margin-top: 22px; }
.dl-lic .dl-file { margin-bottom: 10px; }
.lic-free { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.lic-free p { flex: 1 1 100%; margin: 0; }
.chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 0; }

/* ------------------------------------------------------------ 2.9: Einblenden beim Scrollen
   Nur aktiv, wenn home.js die Klasse rv-on setzt (JavaScript da, „Bewegung reduzieren“ aus). Bilder wischen von ihrer
   Seite herein (Maske + Weg), Texte und Karten steigen auf, im Ablauf gehen die Lampen der Reihe nach an. */
.rv-ready [data-rv] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1),
  clip-path 1s cubic-bezier(.2, .7, .2, 1); }
.rv-on [data-rv="rise"]:not(.rv-in) { opacity: 0; transform: translateY(28px); }
.rv-on [data-rv="from-r"]:not(.rv-in) { opacity: 0; transform: translateX(64px); clip-path: inset(0 0 0 38%); }
.rv-on [data-rv="from-l"]:not(.rv-in) { opacity: 0; transform: translateX(-64px); clip-path: inset(0 38% 0 0); }
.rv-on [data-rv="from-r"].rv-in, .rv-on [data-rv="from-l"].rv-in { clip-path: inset(-80px); }
.rv-on [data-rv="slide"]:not(.rv-in) { opacity: 0; transform: translateX(120px); }
.rv-ready .bento [data-rv]:nth-child(2) { transition-delay: .08s; }
.rv-ready .bento [data-rv]:nth-child(3) { transition-delay: .16s; }
.rv-ready .bento [data-rv]:nth-child(4) { transition-delay: .24s; }
.rv-ready .row [data-rv="rise"] { transition-delay: .12s; }
/* Ablauf: Strecke füllt sich von links, Lampen gehen nacheinander an, Texte folgen */
.rv-on .flow[data-rv]::before { transform-origin: 0 50%; }
.rv-ready .flow[data-rv]::before { transition: transform 1.6s cubic-bezier(.3, .6, .2, 1) .1s; }
.rv-on .flow[data-rv]:not(.rv-in)::before { transform: scaleX(0); }
.rv-ready .flow[data-rv] li { transition: opacity .6s ease; }
.rv-on .flow[data-rv]:not(.rv-in) li { opacity: .28; }
.rv-ready .flow[data-rv] .flow-dot { transition: border-color .4s ease, box-shadow .5s ease; }
.rv-on .flow[data-rv]:not(.rv-in) .flow-dot { border-color: var(--lamp-off); box-shadow: none; }
.rv-on .flow[data-rv]:not(.rv-in) .flow-dot::before { color: var(--window-ink-2); }
.rv-ready .flow[data-rv] .flow-dot::before { transition: color .4s ease; }
.rv-ready .flow[data-rv] li:nth-child(1), .rv-ready .flow[data-rv] li:nth-child(1) .flow-dot, .rv-ready .flow[data-rv] li:nth-child(1) .flow-dot::before { transition-delay: .15s; }
.rv-ready .flow[data-rv] li:nth-child(2), .rv-ready .flow[data-rv] li:nth-child(2) .flow-dot, .rv-ready .flow[data-rv] li:nth-child(2) .flow-dot::before { transition-delay: .45s; }
.rv-ready .flow[data-rv] li:nth-child(3), .rv-ready .flow[data-rv] li:nth-child(3) .flow-dot, .rv-ready .flow[data-rv] li:nth-child(3) .flow-dot::before { transition-delay: .75s; }
.rv-ready .flow[data-rv] li:nth-child(4), .rv-ready .flow[data-rv] li:nth-child(4) .flow-dot, .rv-ready .flow[data-rv] li:nth-child(4) .flow-dot::before { transition-delay: 1.05s; }
.rv-ready .flow[data-rv] li:nth-child(5), .rv-ready .flow[data-rv] li:nth-child(5) .flow-dot, .rv-ready .flow[data-rv] li:nth-child(5) .flow-dot::before { transition-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) {
  .rv-on [data-rv], .rv-on .flow[data-rv] li, .rv-on .flow[data-rv]::before { transition: none !important; opacity: 1 !important;
    transform: none !important; clip-path: none !important; }
}
@media print { [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* ------------------------------------------------------------ 2.9: Einblicke – wischbare Bildreihe (scroll-snap) */
.gallery { padding-top: clamp(56px, 8vw, 96px); }
.gal-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.gal-head h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; }
.gal-head .sec-sub { margin: 12px 0 0; }
.gal-nav { display: flex; align-items: center; gap: 10px; }
.gal-nav[hidden] { display: none; }
.gal-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.gal-btn:hover:not(:disabled) { border-color: var(--steel); color: var(--steel); }
.gal-btn:active:not(:disabled) { transform: scale(.94); }
.gal-btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.gal-btn:disabled { opacity: .35; cursor: default; }
.gal-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gal-count { font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px; min-width: 5ch; text-align: center; }
.gal-track { list-style: none; margin: 26px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 780px); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))) 26px;
  scroll-padding-inline: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent; }
.gal-track:focus-visible { outline: 2px solid var(--steel); outline-offset: -4px; border-radius: 12px; }
.gal-slide { scroll-snap-align: start; min-width: 0; }
.gal-slide figure { margin: 0; height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 36px rgba(16, 24, 40, .10); }
.gal-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
  border-bottom: 1px solid var(--line); background: var(--paper); }
.gal-slide figcaption { padding: 16px 20px 20px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.gal-slide figcaption b { display: block; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 18.5px; margin-bottom: 4px; }
@media (max-width: 640px) {
  .gal-track { grid-auto-columns: 88%; gap: 14px; }
  .gal-nav { display: none; }
  .gal-slide figcaption { padding: 14px 16px 16px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .gal-track { scroll-behavior: auto; } .gal-btn { transition: none; } }

/* 2.9: Häufige Fragen als Auszug auf der Startseite */
.faq-home { max-width: 860px; }
#fragen .faq-more { margin-top: 22px; }
/* Hereinwischende Teile dürfen vor dem Einblenden nicht seitlich überstehen (sonst wackelt die Seite am Handy) */
.rv-on main { overflow-x: clip; }
@supports not (overflow: clip) { .rv-on main { overflow-x: hidden; } }