/* =========================================================================
   ACCOUNTY — Designsystem "Dark Premium"
   Ein gemeinsames Stylesheet für ALLE Seitentypen (Startseite, Vergleich,
   Blog, Rechtliches). Wer eine neue Seite baut, bindet nur diese Datei ein
   und verwendet dieselben Bausteine — so bleibt das Erscheinungsbild gleich.
   ========================================================================= */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Dunkle Bühne */
  --ink:        #05070E;
  --ink-2:      #090E1A;
  --surface:    #0D1425;
  --surface-2:  #111A2E;
  --line:       rgba(255,255,255,.08);
  --line-str:   rgba(255,255,255,.14);
  --fg:         #E9EFFB;
  --fg-mut:     #94A3BE;

  /* Helle Bühne */
  --paper:      #FFFFFF;
  --paper-2:    #F4F7FC;
  --paper-line: #E4EAF3;
  --ink-text:   #0A1020;
  --mut-text:   #5A6981;

  /* Marke */
  --brand:      #2563EB;
  --brand-lit:  #5B9BFF;
  --violet:     #7C5CFF;
  --mint:       #34D399;
  --amber:      #F5B84B;

  /* Form */
  --r-sm: 10px;  --r: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --shadow-lift: 0 24px 60px -20px rgba(4,10,26,.55);
  --shadow-card: 0 2px 8px rgba(10,16,32,.05), 0 18px 46px -24px rgba(10,16,32,.22);
  --ease: cubic-bezier(.22,.68,.24,1);
  --maxw: 1200px;
}

/* ── 2. Grundlagen ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
/* height:auto ist entscheidend: ohne das erzwingen die width/height-Attribute im
   HTML das Seitenverhaeltnis und verzerren das Bild. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; line-height: 1.1; letter-spacing: -.025em; font-weight: 800; }
p { margin: 0; }
::selection { background: var(--brand); color: #fff; }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, 820px); margin-inline: auto; }
.dark { background: var(--ink); color: var(--fg); }
.paper { background: var(--paper); }
.paper-2 { background: var(--paper-2); }
section { position: relative; }
.sect { padding: clamp(72px, 9vw, 132px) 0; }

/* Sichtbarer Fokus — Barrierefreiheit vor Effekt. */
:focus-visible { outline: 2px solid var(--brand-lit); outline-offset: 3px; border-radius: 6px; }

/* ── 3. Typo-Skala ─────────────────────────────────────────────────────── */
.display { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.04em; font-weight: 800; }
.h2      { font-size: clamp(2rem, 3.8vw, 3.1rem); letter-spacing: -.03em; }
.h3      { font-size: clamp(1.25rem, 1.7vw, 1.55rem); letter-spacing: -.02em; }
.lead    { font-size: clamp(1.05rem, 1.35vw, 1.28rem); color: var(--mut-text); line-height: 1.6; }
.dark .lead { color: var(--fg-mut); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); padding: 7px 14px; border-radius: 100px;
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.18);
}
.dark .eyebrow { color: var(--brand-lit); background: rgba(91,155,255,.09); border-color: rgba(91,155,255,.22); }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

.grad-text {
  background: linear-gradient(100deg, #fff 8%, var(--brand-lit) 46%, var(--violet) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── 4. Buttons ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--brand);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
  overflow: hidden; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, #3B7BF0 55%, var(--violet) 130%);
  color: #fff; box-shadow: 0 10px 30px -8px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -10px rgba(37,99,235,.72); }
/* Lichtstreif — läuft beim Hover einmal durch. Dezent, kein Blinken. */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform .75s var(--ease); }

.btn-glass {
  background: rgba(255,255,255,.06); color: var(--fg);
  border: 1px solid var(--line-str); backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.paper .btn-glass, .paper-2 .btn-glass {
  background: #fff; color: var(--ink-text); border-color: var(--paper-line); box-shadow: var(--shadow-card);
}
.btn-lg { padding: 18px 36px; font-size: 1.06rem; }
.btn-sm { padding: 11px 20px; font-size: .92rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand); }
.dark .link-arrow { color: var(--brand-lit); }
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ── 5. Kopfzeile ──────────────────────────────────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease),
              border-color .35s var(--ease), padding .35s var(--ease);
  border-bottom: 1px solid transparent; padding: 14px 0;
}
.hdr.solid {
  background: rgba(5,7,14,.82); backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line); padding: 8px 0;
}
.hdr-in { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.16rem; color: #fff; letter-spacing: -.03em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  position: relative; padding: 9px 15px; border-radius: 100px; font-size: .95rem; font-weight: 600;
  color: rgba(233,239,251,.76); transition: color .25s, background .25s;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.hdr-cta { display: flex; align-items: center; gap: 10px; }
.burger { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }

@media (max-width: 940px) {
  .nav { display: none; position: absolute; top: 100%; left: 20px; right: 20px; flex-direction: column;
         background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; gap: 2px; }
  .nav.open { display: flex; }
  .burger { display: block; margin-left: auto; }
  .hdr-cta .btn { display: none; }
  .hdr-cta .btn.always { display: inline-flex; }
}

/* ── 6. Hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(140px, 17vw, 210px) 0 clamp(80px, 9vw, 120px); }
/* Aurora: drei weiche Farbwolken, sehr langsam bewegt. Sie sind der einzige
   „Effekt" im Hero — bewusst ruhig, damit die Aussage trägt, nicht die Animation. */
.aurora { position: absolute; inset: -30% -10% auto -10%; height: 150%; pointer-events: none; filter: blur(90px); opacity: .75; }
.aurora i { position: absolute; display: block; border-radius: 50%; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 4%;  top: 6%;  background: radial-gradient(circle, rgba(37,99,235,.62), transparent 66%); animation: drift1 26s var(--ease) infinite alternate; }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; right: 2%; top: 0;   background: radial-gradient(circle, rgba(124,92,255,.5), transparent 66%);  animation: drift2 32s var(--ease) infinite alternate; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 34%; top: 40%; background: radial-gradient(circle, rgba(52,211,153,.22), transparent 68%); animation: drift3 38s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate3d(9vw, 5vh, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(-8vw, 8vh, 0) scale(1.08); } }
@keyframes drift3 { to { transform: translate3d(5vw, -7vh, 0) scale(1.18); } }

/* Feines Raster — gibt der Fläche Technik-Anmutung ohne Unruhe. */
.grid-fade {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 32%, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 32%, transparent 78%);
}
.hero-in { position: relative; z-index: 2; text-align: center; }
.hero .display {
  margin: 24px auto 0; max-width: 19ch;
  /* text-wrap: balance verteilt die Zeilen gleichmaessig — dadurch entstehen keine
     einzelnen Restwoerter mehr. Browser ohne Unterstuetzung zeigen den bisherigen Umbruch. */
  text-wrap: balance;
  line-height: 1.02;
}
.hero .lead { margin: 26px auto 0; max-width: 56ch; text-wrap: pretty; }
/* Kein harter Umbruch mehr per <br> im Fliesstext — der Browser bricht besser. */
.hero .lead br { display: none; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.hero-note { margin-top: 18px; font-size: .92rem; color: var(--fg-mut); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }

/* Produktbild in Gerätefassung, folgt leicht der Maus. */
.stage { position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 78px); perspective: 1800px; }
.device {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-str); background: var(--surface);
  box-shadow: 0 60px 130px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset;
  transform-style: preserve-3d; transition: transform .5s var(--ease);
}
.device-bar { display: flex; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
.device-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.16); }
.device img { width: 100%; display: block; }
/* Die Screenshots sind rund 1400x1020 (4:3-nah). Wir zeigen sie in ihrem eigenen
   Verhaeltnis — kein Strecken, kein Beschneiden. */
.device img { aspect-ratio: 1400 / 1020; object-fit: cover; object-position: top center; }
.stage::after { /* Bodenreflex */
  content:""; position: absolute; left: 12%; right: 12%; bottom: -34px; height: 70px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37,99,235,.4), transparent 70%); filter: blur(28px); z-index: -1;
}

/* Schwebende Kennzahl am Produktbild */
.float-badge {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: 14px; background: rgba(13,20,37,.9);
  border: 1px solid var(--line-str); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lift); font-size: .9rem; font-weight: 600; color: var(--fg);
  animation: bob 7s ease-in-out infinite;
}
.float-badge b { display: block; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }
.float-badge small { color: var(--fg-mut); font-weight: 600; }
.float-badge .dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(52,211,153,.14); color: var(--mint); }
.fb-1 { left: -18px; top: 22%; }
.fb-2 { right: -18px; bottom: 16%; animation-delay: -3.5s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (max-width: 780px) { .float-badge { display: none; } }

/* ── 7. Logoband / Laufband ────────────────────────────────────────────── */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-row { display: flex; gap: 56px; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--fg-mut); white-space: nowrap; font-size: .98rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── 8. Karten ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.card {
  position: relative; padding: 30px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--paper-line);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: #D3DEEE; }
.dark .card { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border-color: var(--line); }
.dark .card:hover { border-color: var(--line-str); box-shadow: var(--shadow-lift); }
/* Leuchtender Rand folgt dem Zeiger — nur auf dunklen Karten. */
.dark .card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .38s var(--ease);
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(91,155,255,.34), transparent 62%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.dark .card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--mut-text); font-size: .98rem; }
.dark .card p { color: var(--fg-mut); }

.ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,92,255,.14));
  color: var(--brand); border: 1px solid rgba(37,99,235,.16);
  transition: transform .38s var(--ease);
}
.dark .ico { color: var(--brand-lit); border-color: rgba(91,155,255,.2); }
.card:hover .ico { transform: scale(1.08) rotate(-4deg); }

/* ── 9. Kennzahlen ─────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

.stat {
  position: relative; overflow: hidden; text-align: center;
  padding: 34px 20px 30px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition: transform .38s var(--ease), border-color .38s var(--ease);
}
.stat:hover { transform: translateY(-4px); border-color: var(--line-str); }
/* Feiner Lichtstrich am oberen Rand — gibt der Kachel Kante, ohne zu blinken. */
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,155,255,.75), transparent);
  opacity: .55; transition: opacity .38s var(--ease);
}
.stat:hover::before { opacity: 1; }

/* Zahl + Einheit sitzen auf einer gemeinsamen Grundlinie. */
.stat .num {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  font-size: clamp(2.3rem, 3.6vw, 3.1rem); font-weight: 800; letter-spacing: -.045em;
  line-height: 1; color: #fff;
}
.stat .unit { font-size: .42em; font-weight: 700; letter-spacing: .02em; color: var(--brand-lit); }
.stat .label {
  display: block; margin-top: 14px; font-size: .88rem; font-weight: 600;
  letter-spacing: .01em; color: var(--fg-mut); line-height: 1.4;
}

/* ── 10. Preis ─────────────────────────────────────────────────────────── */
.price-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }
/* Beide Spalten gleich hoch, damit die dunkle Karte unten buendig mit der
   Treuhaender-Karte abschliesst. Der Knopf wird dafuer nach unten geschoben. */
.price-wrap > div:last-child { display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.price { display: flex; flex-direction: column; }
.price .tick { flex: 1 1 auto; }
@media (max-width: 900px) { .price-wrap { grid-template-columns: 1fr; } }
.price {
  position: relative; padding: 40px; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--ink-2)); border: 1px solid var(--line-str); color: var(--fg);
}
.price::after {
  content:""; position:absolute; width: 340px; height: 340px; right: -110px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.42), transparent 68%); filter: blur(24px);
}
.price .amount { display: flex; align-items: baseline; gap: 9px; margin: 14px 0 4px; }
.price .amount b { font-size: clamp(3rem, 5.6vw, 4.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.price .amount span { color: var(--fg-mut); font-weight: 600; }
.tick { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 13px; }
.tick li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.tick svg { flex: none; margin-top: 3px; color: var(--mint); }
.badge-rec {
  position: absolute; top: 22px; right: 22px; z-index: 1; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px;
  background: rgba(52,211,153,.16); color: var(--mint); border: 1px solid rgba(52,211,153,.3);
}

/* ── 11. Vergleichstabelle ─────────────────────────────────────────────── */
.table-card { border-radius: var(--r-lg); border: 1px solid var(--paper-line); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
table.cmp { width: 100%; border-collapse: collapse; font-size: .98rem; }
table.cmp th, table.cmp td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--paper-line); }
table.cmp thead th { background: var(--paper-2); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut-text); font-weight: 800; }
table.cmp tbody tr { transition: background .25s; }
table.cmp tbody tr:hover { background: #F8FBFF; }
table.cmp td:first-child { font-weight: 700; }
table.cmp .ja { color: #0F9D67; font-weight: 700; }
table.cmp .nein { color: #B44; font-weight: 700; }
.col-hi { background: rgba(37,99,235,.045); }

/* ── 12. FAQ ───────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--paper-line); border-radius: var(--r); background: #fff; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: rgba(37,99,235,.34); box-shadow: var(--shadow-card); }
.faq summary { cursor: pointer; padding: 21px 24px; font-weight: 700; display: flex; align-items: center; gap: 14px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: 400; color: var(--brand); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 24px 22px; color: var(--mut-text); }

/* ── 13. Abschluss-Aufruf ──────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl); text-align: center;
  padding: clamp(46px, 6vw, 78px);
  background: linear-gradient(150deg, #0C1428 0%, #101C38 55%, #14204A 100%);
  border: 1px solid var(--line-str);
}
.cta-band::before { content:""; position:absolute; inset:-40% -10% auto; height: 120%; filter: blur(80px); opacity:.6;
  background: radial-gradient(45% 55% at 30% 30%, rgba(37,99,235,.6), transparent 70%),
              radial-gradient(45% 55% at 72% 40%, rgba(124,92,255,.5), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }

/* ── 14. Fusszeile ─────────────────────────────────────────────────────── */
.ftr { background: var(--ink); color: var(--fg); padding: 74px 0 34px; border-top: 1px solid var(--line); }
.ftr-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
/* Frueher <h4>. Fusszeilen-Rubriken sind aber Navigationsgruppen, keine
   Inhalts-Ueberschriften — als h4 nach einem h2 erzeugten sie einen Ebenen-Sprung,
   den Suchmaschinen und Screenreader bemaengeln. Jetzt: benannte <nav>-Bereiche. */
.ftr .ftr-title { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 16px; font-weight: 800; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ftr a { color: var(--fg-mut); font-size: .96rem; transition: color .25s, transform .25s; display: inline-block; }
.ftr a:hover { color: #fff; transform: translateX(3px); }
.ftr-btm { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-mut); font-size: .9rem; }

/* ── 15. Blog / Fliesstext ─────────────────────────────────────────────── */
.post { max-width: 760px; margin-inline: auto; }
.post h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 52px 0 16px; letter-spacing: -.028em; }
.post h3 { font-size: 1.28rem; margin: 34px 0 12px; }
.post p { margin: 0 0 22px; color: #2A3550; font-size: 1.05rem; line-height: 1.8; }
.post > *:first-child { margin-top: 0; }
.post h2 + p, .post h3 + p { margin-top: 0; }
.post ul { margin: 0 0 22px; padding-left: 22px; color: #26324A; }
.post li { margin-bottom: 10px; line-height: 1.7; }
.post strong { color: var(--ink-text); }
.post blockquote {
  margin: 34px 0; padding: 26px 30px; border-left: 3px solid var(--brand); border-radius: 0 var(--r) var(--r) 0;
  background: var(--paper-2); font-size: 1.14rem; line-height: 1.62; color: var(--ink-text); font-weight: 600;
}
.post .toc { padding: 24px 26px; border: 1px solid var(--paper-line); border-radius: var(--r); background: #fff; margin-bottom: 40px; }
.post .toc ol { margin: 12px 0 0; padding-left: 20px; color: var(--mut-text); }
.post .toc a:hover { color: var(--brand); }
.meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--fg-mut); font-size: .93rem; font-weight: 600; }

/* Lesefortschritt */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--brand), var(--violet)); transition: width .1s linear; }

/* ── 16. Scroll-Einblendung ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ── 17. Mobiler Dauer-Aufruf ──────────────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none;
  padding: 12px; border-radius: 18px; background: rgba(9,14,26,.94); border: 1px solid var(--line-str);
  backdrop-filter: blur(16px); box-shadow: var(--shadow-lift);
  transform: translateY(140%); transition: transform .45s var(--ease);
}
.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (max-width: 780px) { .sticky-cta { display: block; } }

/* ── 18. Bewegung reduzieren ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── 10b. Aktionshinweis, Modulliste, Upgrades ─────────────────────────── */
.promo {
  max-width: 780px; margin: 0 auto; padding: 16px 22px; border-radius: var(--r);
  background: linear-gradient(120deg, rgba(52,211,153,.1), rgba(37,99,235,.08));
  border: 1px solid rgba(52,211,153,.3); color: var(--ink-text);
  font-size: .95rem; line-height: 1.55; text-align: center;
}
.promo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; font-weight: 700;
  background: #fff; border: 1px solid var(--paper-line); border-radius: 6px; padding: 2px 8px;
}

/* Modulliste zweispaltig mit Haken — kompakt, aber gut lesbar. */
.modlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
@media (max-width: 520px) { .modlist { grid-template-columns: 1fr; } }
.modlist li { position: relative; padding-left: 24px; font-size: .95rem; color: var(--mut-text); font-weight: 600; }
.modlist li::before {
  content: ""; position: absolute; left: 0; top: .46em; width: 13px; height: 8px;
  border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}

.upg { text-align: center; }
.upg-plus {
  display: inline-block; font-size: clamp(2.1rem, 3.2vw, 2.7rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(120deg, var(--brand), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.upg-sub { margin-top: 6px; font-size: .9rem; color: var(--mut-text); font-weight: 600; }
.upg-price {
  margin: 18px 0 6px; padding-top: 18px; border-top: 1px solid var(--paper-line);
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink-text);
}
.upg-price span { font-size: .8rem; font-weight: 600; color: var(--mut-text); margin-left: 5px; }
.upg-note { font-size: .9rem; color: var(--mut-text); }

.note-band {
  margin-top: 30px; padding: 24px 28px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--paper-line);
  font-size: .96rem; line-height: 1.65; color: var(--mut-text);
}
.note-band strong { color: var(--ink-text); }

/* ── Treuhaender-Stufen ────────────────────────────────────────────────── */
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tier-list li {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 14px;
  border-radius: 10px; background: var(--paper-2); border: 1px solid var(--paper-line);
}
.tier-price { font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; color: var(--ink-text); min-width: 78px; }
.tier-what { font-size: .94rem; color: var(--mut-text); font-weight: 600; }

/* ── Kostenaufschluesselung der Upgrades ───────────────────────────────── */
.upg-calc {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 12px; padding: 14px 12px; border-radius: 12px;
  background: var(--paper-2); border: 1px solid var(--paper-line);
}
.upg-calc span { display: flex; flex-direction: column; font-size: .74rem; color: var(--mut-text); font-weight: 600; line-height: 1.3; }
.upg-calc b { font-size: 1rem; font-weight: 800; color: var(--ink-text); letter-spacing: -.02em; }
.upg-calc .op { font-size: 1.05rem; font-weight: 700; color: var(--mut-text); align-self: center; }
.upg-calc .tot b { color: var(--brand); }

/* ── Lichtkegel folgt dem Zeiger ───────────────────────────────────────── */
/* Ein weicher Schein, der ueber dunklen Flaechen dem Mauszeiger folgt.
   Bewusst gross, schwach und traege — er soll Tiefe geben, nicht auffallen.
   Auf Touch-Geraeten und bei "Bewegung reduzieren" bleibt er komplett aus. */
.spotlight {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity .45s var(--ease);
  /* Zwei Ebenen: ein enger, heller Kern und ein weiter, weicher Hof. Vorher war der
     Schein zu schwach, um ueberhaupt aufzufallen. */
  background:
    radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%),
      rgba(120,175,255,.30), rgba(120,175,255,.10) 45%, transparent 70%),
    radial-gradient(680px circle at var(--sx, 50%) var(--sy, 50%),
      rgba(124,92,255,.16), transparent 65%);
  mix-blend-mode: screen;
}
.spotlight.on { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) { .spotlight { display: none; } }

/* Sprunglink: nur sichtbar, wenn er per Tastatur angesteuert wird. */
.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 300;
  padding: 12px 20px; border-radius: 100px; background: var(--brand); color: #fff; font-weight: 700;
}
.skip:focus { left: 12px; }

/* ── Brotkrumen ────────────────────────────────────────────────────────── */
.crumbs {
  position: relative; z-index: 2; background: var(--ink); border-bottom: 1px solid var(--line);
  padding: 96px 0 12px; font-size: .86rem; color: var(--fg-mut);
}
.crumbs a { color: var(--fg-mut); transition: color .25s; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { margin: 0 9px; opacity: .5; }
.crumbs + .hero { padding-top: clamp(52px, 6vw, 84px); }

/* ── Soziale Netzwerke in der Fusszeile ────────────────────────────────── */
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: 100px; border: 1px solid var(--line); color: var(--fg-mut);
  font-size: .86rem; font-weight: 700;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.social a:hover { color: #fff; border-color: var(--line-str); background: rgba(255,255,255,.06); transform: translateY(-2px); }

/* ── Chip-Liste (weitere Branchen) ─────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chips a {
  padding: 9px 17px; border-radius: 100px; border: 1px solid var(--paper-line);
  background: #fff; font-size: .92rem; font-weight: 600; color: var(--mut-text);
  transition: color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.chips a:hover { color: var(--brand); border-color: rgba(37,99,235,.4); transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* Statusanzeige */
.dot-ok { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(52,211,153,.16); flex: none; }

/* ── Konto-Seiten ──────────────────────────────────────────────────────── */
.auth-hdr { position: absolute; background: transparent; backdrop-filter: none; border: 0; }
.auth { min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 72px; }
.auth-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; } .auth-side { order: -1; } }

.auth-card {
  padding: clamp(30px, 4vw, 46px); border-radius: var(--r-xl);
  background: rgba(255,255,255,.97); color: var(--ink-text);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
}
.auth-h1 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -.03em; margin-top: 16px; }
.auth-sub { margin-top: 12px; color: var(--mut-text); font-size: 1rem; line-height: 1.55; }

.auth-form { margin-top: 26px; display: grid; gap: 16px; }
.fld { display: grid; gap: 7px; }
.fld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .fld-2 { grid-template-columns: 1fr; } }
.fld label { font-size: .84rem; font-weight: 700; color: var(--ink-text); letter-spacing: .01em; }
.fld input, .fld select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .98rem; color: var(--ink-text);
  border: 1px solid var(--paper-line); border-radius: 12px; background: var(--paper-2);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.fld input::placeholder { color: #9AA7BC; }
.fld input:focus, .fld select:focus {
  outline: none; background: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
.fld-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -2px; }
.chk { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--mut-text); cursor: pointer; }
.chk input { width: 17px; height: 17px; accent-color: var(--brand); }
.chk-block { align-items: flex-start; line-height: 1.5; }
.chk-block input { margin-top: 2px; }
.chk a, .small-link { color: var(--brand); font-weight: 600; }
.small-link { font-size: .88rem; }
.auth-alt { font-size: .9rem; color: var(--mut-text); text-align: center; }
.auth-alt a { color: var(--brand); font-weight: 700; }

.auth-side { color: var(--fg); padding: 0 clamp(0px, 2vw, 22px); }
.auth-side-h { font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -.025em; margin-bottom: 20px; }
.auth-side .tick li { font-size: .98rem; }
.auth-hint {
  margin-top: 18px; padding: 13px 16px; border-radius: 12px; font-size: .9rem; line-height: 1.5;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.28); color: var(--fg);
}
.auth-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  background: rgba(255,255,255,.1); border-radius: 5px; padding: 1px 7px;
}
.auth-trust {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--fg-mut); font-weight: 600;
}

/* ── Wechsel-Band (Bexio-Alternative) ──────────────────────────────────── */
.switch-band {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 24px; border-radius: var(--r);
  background: linear-gradient(100deg, rgba(37,99,235,.16), rgba(124,92,255,.1));
  border: 1px solid rgba(91,155,255,.28); color: var(--fg);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.switch-band:hover { transform: translateY(-2px); border-color: rgba(91,155,255,.55); }
.switch-tag {
  flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; background: rgba(91,155,255,.2); color: var(--brand-lit);
}
.switch-txt { flex: 1 1 320px; font-size: .98rem; line-height: 1.5; color: var(--fg-mut); }
.switch-txt strong { color: #fff; }
.switch-go {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .94rem; color: var(--brand-lit);
}
.switch-go svg { transition: transform .3s var(--ease); }
.switch-band:hover .switch-go svg { transform: translateX(5px); }

/* ── Uebernommene Inhalte: FAQ, Kennzahlen, breite Tabellen ────────────── */
.post .faq { display: grid; gap: 12px; margin: 26px 0 34px; }
.post details.faq-item {
  border: 1px solid var(--paper-line); border-radius: var(--r); background: #fff; overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.post details.faq-item[open] { border-color: rgba(37,99,235,.34); box-shadow: var(--shadow-card); }
.post details.faq-item summary {
  cursor: pointer; padding: 19px 22px; font-weight: 700; list-style: none;
  display: flex; align-items: center; gap: 14px; color: var(--ink-text);
}
.post details.faq-item summary::-webkit-details-marker { display: none; }
.post details.faq-item summary::after {
  content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: 400; color: var(--brand);
  transition: transform .3s var(--ease);
}
.post details.faq-item[open] summary::after { transform: rotate(45deg); }
.post details.faq-item > *:not(summary) { padding: 0 22px 20px; color: var(--mut-text); }
.post details.faq-item p { margin: 0 0 12px; }

/* Kennzahlen — Kontrast geht vor Effekt. Die vorige Fassung hatte graue Beschriftung
   auf dunklem Grund und Verlaufsziffern: beides war kaum lesbar. */
.factlist {
  list-style: none; margin: 40px 0 44px; padding: clamp(24px,3vw,34px);
  border-radius: var(--r-xl); background: linear-gradient(150deg, #101A32, #16223F 60%, #1B2A52);
  border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-lift);
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.factlist li {
  padding: 26px 20px; border-radius: var(--r); text-align: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.factlist li:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
.factlist b {
  display: block; font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: #fff;
}
/* Sicherheitsnetz: auch unausgezeichneter Text in der Kachel bleibt hell. */
.factlist li { color: #CBD8EE; }
.factlist i, .factlist span {
  display: block; margin-top: 12px; font-size: .92rem; line-height: 1.5;
  color: #D3DFF2; font-weight: 600; font-style: normal;
}

/* Breite Tabellen auf schmalen Bildschirmen scrollbar statt gequetscht */
.post .table-scroll { margin: 26px 0 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post .table-scroll table.cmp { min-width: 560px; }
.post table.cmp td:first-child { font-weight: 700; }

/* ── Team-Kacheln (uebernommen von "Ueber uns") ────────────────────────── */
.post .teamlist {
  list-style: none; margin: 30px 0 40px; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.post .teamlist li {
  position: relative; padding: 28px 24px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--paper-line);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.post .teamlist li:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: #D3DEEE; }
/* Initialen als Ersatz fuer ein Portrait — wirkt aufgeraeumt und braucht keine Fotos. */
.post .teamlist .ini {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  font-size: 1.02rem; font-weight: 800; letter-spacing: .02em; color: #fff; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--brand), var(--violet));
  box-shadow: 0 8px 20px -8px rgba(37,99,235,.6);
}
.post .teamlist h3 { font-size: 1.08rem; margin: 0 0 3px; letter-spacing: -.02em; }
.post .teamlist .role {
  margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand);
}
.post .teamlist p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--mut-text); }

/* ── Markenkarte (SEBONA-Logo) ─────────────────────────────────────────── */
/* Frueher mit float — das schnitt die Karte am Abschnittsrand ab und zog den
   ersten Absatz in einen ungewollten Einzug. Jetzt ein eigenstaendiges Banner. */
.post .brandcard {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 36px);
  margin: 0 0 34px; padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
  border-radius: var(--r-xl); background: #fff;
  border: 1px solid var(--paper-line); box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.post .brandcard:hover { transform: translateY(-3px); box-shadow: 0 26px 64px -30px rgba(10,16,32,.34); }
.post .brandcard img {
  flex: none; width: clamp(150px, 22vw, 230px); height: auto;
  /* Das Logo hat viel Weissraum in der Datei — leicht anheben, damit es traegt. */
}
.post .brandcard figcaption {
  margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut-text); line-height: 1.5;
}
@media (max-width: 620px) {
  .post .brandcard { flex-direction: column; text-align: center; }
}

/* ══ Aufgelockerte Inhaltsseiten ═══════════════════════════════════════════
   Der uebernommene Fliesstext wird in Abschnitte zerlegt (siehe _build/enrich.py).
   Diese Regeln geben ihnen Rhythmus: wechselnder Grund, ruhige Zeilenlaenge,
   Kacheln statt Absatzketten und hervorgehobene Kennzahlen.               */

.sect-tight { padding: clamp(46px, 5.5vw, 78px) 0; }
.sect-tight + .sect-tight { padding-top: clamp(40px, 5vw, 68px); }
.sect-tight .post > h2:first-child { margin-top: 0; }

/* Der erste Absatz nach einer Ueberschrift traegt den Abschnitt. */
.post .lead-p {
  font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.7; color: #333F55;
  margin-bottom: 22px;
}

/* Kennzahl-Absatz: die Botschaft, die man auch beim Ueberfliegen mitnimmt. */
.post .keyfact {
  position: relative; margin: 26px 0; padding: 20px 24px 20px 26px;
  border-radius: 0 var(--r) var(--r) 0; background: linear-gradient(100deg, rgba(37,99,235,.07), rgba(124,92,255,.04));
  border-left: 3px solid var(--brand);
  font-size: 1.06rem; line-height: 1.6; font-weight: 600; color: var(--ink-text);
}
.post .keyfact strong, .post .keyfact b { color: var(--brand); }

/* Kachelraster aus Ueberschrift + Absatz */
.post .xgrid {
  list-style: none; margin: 28px 0 34px; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.post .xcard {
  position: relative; padding: 26px 24px; border-radius: var(--r-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--paper-line);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.post .xcard::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; transform: scaleX(0);
  transform-origin: left; background: linear-gradient(90deg, var(--brand), var(--violet));
  transition: transform .45s var(--ease);
}
.post .xcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: #D3DEEE; }
.post .xcard:hover::after { transform: scaleX(1); }
.post .xcard h3, .xcard h2 { font-size: 1.07rem; margin: 0 0 9px; letter-spacing: -.02em; }
.post .xcard p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--mut-text); }

/* Kuerzel-Plakette (aus der Quelle: FB, LO, KI …) */
.post .xico {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  margin-bottom: 15px; font-size: .88rem; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--violet));
  box-shadow: 0 8px 18px -8px rgba(37,99,235,.7);
  transition: transform .4s var(--ease);
}
.post .xcard:hover .xico { transform: scale(1.08) rotate(-5deg); }
.post .xtag {
  display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  background: rgba(37,99,235,.09); color: var(--brand); border: 1px solid rgba(37,99,235,.18);
}

/* Nummerierte Schritte */
.post .xsteps { list-style: none; counter-reset: st; margin: 28px 0 34px; padding: 0; display: grid; gap: 14px; }
.post .xsteps li {
  counter-increment: st; position: relative; padding: 22px 24px 22px 74px;
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--paper-line);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.post .xsteps li::before {
  content: counter(st); position: absolute; left: 22px; top: 22px;
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font-size: .96rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--violet));
  box-shadow: 0 6px 16px -6px rgba(37,99,235,.7);
}
.post .xsteps li:hover { transform: translateX(4px); border-color: #D3DEEE; box-shadow: var(--shadow-card); }
.post .xsteps h3 { font-size: 1.05rem; margin: 0 0 6px; }
.post .xsteps p { margin: 0; font-size: .95rem; color: var(--mut-text); line-height: 1.6; }

/* Ja/Nein in uebernommenen Tabellen */
.post b.ja, .post td.ja { color: #0F9D67; font-weight: 700; }
.post b.nein, .post td.nein { color: #B44; font-weight: 700; }

/* Aufzaehlungen bekommen Haken statt Punkte — wirkt aktiver und passt zum Rest. */
.post ul:not(.xgrid):not(.teamlist):not(.factlist) { list-style: none; padding-left: 0; }
.post ul:not(.xgrid):not(.teamlist):not(.factlist) > li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
}
.post ul:not(.xgrid):not(.teamlist):not(.factlist) > li::before {
  content: ""; position: absolute; left: 4px; top: .5em; width: 13px; height: 8px;
  border-left: 2.4px solid var(--brand); border-bottom: 2.4px solid var(--brand);
  transform: rotate(-45deg);
}

/* Nummerierte Listen mit gestalteter Ziffer */
.post ol:not(.xsteps) { list-style: none; counter-reset: li; padding-left: 0; }
.post ol:not(.xsteps) > li { counter-increment: li; position: relative; padding-left: 44px; margin-bottom: 14px; }
.post ol:not(.xsteps) > li::before {
  content: counter(li); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: .82rem; font-weight: 800; color: var(--brand);
  background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.2);
}

/* ── Handlungsaufruf mitten auf der Seite ──────────────────────────────── */
/* Ein Aufruf nur am Seitenende erreicht bloss die, die bis dorthin lesen. */
.cta-strip { padding: clamp(30px, 4vw, 46px) 0; border-block: 1px solid var(--line); }
.cta-strip-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
}
.cta-strip-k {
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-lit); margin-bottom: 8px;
}
.cta-strip-t {
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 800; letter-spacing: -.025em;
  color: #fff; line-height: 1.25; max-width: 22ch;
}
.cta-strip-b { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .cta-strip-b .btn { width: 100%; } }

/* Handlungsaufrufe generell praesenter */
.btn-lg { padding: 19px 40px; font-size: 1.08rem; }
.btn-primary {
  box-shadow: 0 12px 34px -8px rgba(37,99,235,.68), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-primary:hover { box-shadow: 0 20px 48px -10px rgba(37,99,235,.8); }
/* Leichtes Pulsieren beim ersten Erscheinen lenkt den Blick — einmalig, nicht dauernd. */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 12px 34px -8px rgba(37,99,235,.68), inset 0 1px 0 rgba(255,255,255,.24); }
  50%      { box-shadow: 0 12px 44px -6px rgba(37,99,235,.92), inset 0 1px 0 rgba(255,255,255,.24); }
}
.hero .btn-primary { animation: ctaPulse 3.4s ease-in-out 1.2s 3; }
@media (prefers-reduced-motion: reduce) { .hero .btn-primary { animation: none; } }

/* ── Google-Bewertungen (Elfsight) ─────────────────────────────────────── */
/* Das Widget bringt sein eigenes Aussehen mit. Wir geben ihm nur Raum und eine
   Mindesthoehe, damit die Seite beim Nachladen nicht springt. */
.reviews-embed { margin: 30px 0 8px; min-height: 320px; }
/* ⚠ Das Widget bringt eine EIGENE, englische Ueberschrift mit ("What Our Customers
   Say"). Direkt darueber steht bereits unsere deutsche — zweimal dieselbe Aussage in
   zwei Sprachen wirkt unfertig. Wir blenden deshalb nur den Titelblock des Widgets
   aus; die Bewertungen selbst bleiben unberuehrt. */
.reviews-embed [class*="Header"],
.reviews-embed [class*="header"][class*="eapps"],
.reviews-embed [class*="eapps"][class*="title"],
.reviews-embed [class*="eapps"][class*="Title"],
.reviews-embed .eapps-google-reviews-header,
.reviews-embed .eapps-widget-title { display: none !important; }
.reviews-fallback {
  text-align: center; padding: 30px 24px; border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--paper-line); color: var(--mut-text);
}
.reviews-fallback a { color: var(--brand); font-weight: 700; }

/* ── Systemstatus ──────────────────────────────────────────────────────────
   Farben sind hier nicht Dekoration, sondern Aussage. Deshalb zusaetzlich ein
   Wort im Text — Verlass auf Farbe allein schliesst farbfehlsichtige Menschen aus. */
.st-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .98rem;
  border: 1px solid transparent;
}
.st-badge .st-dot { width: 11px; height: 11px; }
.st-state {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 10px; font-weight: 700; font-size: .95rem;
}
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

.st-ok      { color: #0F7A43; background: #E8F6EE; border-color: #BFE5D0; }
.st-warn    { color: #9A5B00; background: #FDF3E2; border-color: #F0DBB2; }
.st-err     { color: #B00000; background: #FDECEC; border-color: #F3C4C4; }
.st-unknown { color: #6B7688; background: var(--paper-2); border-color: var(--paper-line); }
/* In den Karten steht der Zustand ohne Fuellung — nur Schriftfarbe und Punkt. */
.card .st-state { background: none; border: 0; padding: 0; }

/* Sanftes Pulsieren, solange geprueft wird. Ruhe bewahren: kein Blinken. */
@keyframes st-puls { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.st-state:not(.st-ok):not(.st-warn):not(.st-err):not(.st-unknown) .st-dot {
  animation: st-puls 1.4s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) { .st-dot { animation: none !important; } }

/* ── Eingebettete Diagramme aus den Vergleichsbeiträgen ────────────────────
   Sie bringen eigene Farben und Schriftgroessen mit. Wir geben ihnen nur Rahmen
   und Beweglichkeit: auf dem Telefon schiebbar statt gestaucht. */
.chart {
  margin: 28px 0; padding: 18px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--paper-line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.chart svg { max-width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .chart { padding: 12px; } .chart svg { min-width: 520px; } }

/* ── Vertrauenszeile und Autorenzeile ─────────────────────────────────────── */
.ftr-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; font-size: .87rem; color: var(--fg-mut);
}
.ftr-trust span {
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.ftr-trust i { opacity: .45; font-style: normal; }

/* Verfasser, Datum und Lesedauer über dem Beitrag. */
.byline {
  margin-top: 20px; font-size: .92rem; color: var(--fg-mut);
  letter-spacing: .01em;
}

/* ── Breite Tabellen und Diagramme aus der Textspalte ausbrechen ───────────
   Der Fliesstext ist bewusst auf 760px begrenzt — das ist die Breite, die sich
   angenehm liest. Eine Vergleichstabelle mit sieben Spalten passt da nicht hinein
   und landete im seitlichen Schiebefenster. Wer vergleichen will, soll aber alle
   Spalten nebeneinander sehen, ohne zu schieben.

   Deshalb: nur diese beiden Elementarten dehnen sich bis zur Abschnittsbreite.
   Die Begrenzung auf 100vw abzüglich Rand verhindert, dass dabei die ganze Seite
   seitlich verschiebbar wird — der Abzug ist grosszügig genug für die Bildlaufleiste. */
.post .table-scroll,
.post .chart {
  width: min(1140px, calc(100vw - 60px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Mit mehr Platz braucht die Tabelle keine Mindestbreite mehr — und etwas
   kompaktere Zellen lassen alle Spalten bequem nebeneinander stehen. */
.post .table-scroll table.cmp { min-width: 0; font-size: .94rem; }
.post .table-scroll table.cmp th,
.post .table-scroll table.cmp td { padding: 14px 15px; }
.post .table-scroll table.cmp thead th { font-size: .73rem; letter-spacing: .07em; }
/* Die erste Spalte trägt den Anbieternamen — der soll nicht umbrechen. */
.post .table-scroll table.cmp td:first-child,
.post .table-scroll table.cmp th:first-child { white-space: nowrap; }

/* Auf schmalen Geräten bringt das Ausbrechen nichts: zurück in die Textspalte,
   dort ist das seitliche Schieben die richtige Lösung. */
@media (max-width: 900px) {
  .post .table-scroll,
  .post .chart { width: auto; margin-left: 0; transform: none; }
  .post .table-scroll table.cmp { min-width: 580px; font-size: .9rem; }
  .post .table-scroll table.cmp th,
  .post .table-scroll table.cmp td { padding: 12px 12px; }
  .post .table-scroll table.cmp td:first-child,
  .post .table-scroll table.cmp th:first-child { white-space: normal; }
}

/* Sicherheitsnetz: nichts darf die Seite als Ganzes seitlich verschiebbar machen.
   "clip" statt "hidden", weil hidden einen Scroll-Kontext erzeugt und damit
   klebende Elemente (Kopfzeile) aushebeln kann. */
html, body { overflow-x: clip; }