/* ==========================================================================
   Schrift: Inter, lokal ausgeliefert
   Kein Abruf von Google Fonts — sonst ginge die IP jedes Besuchers an einen
   US-Server. Genau dafür wurde 2022 ein Websitebetreiber vom LG München
   zu Schadenersatz verurteilt. Die Dateien liegen in site/fonts/.
   Inter steht unter der SIL Open Font License, Selbsthosting ist erlaubt.
   Geladen wird nur, was die Seite braucht: Der Browser holt den
   latin-Satz; latin-ext nur, wenn ein Zeichen daraus vorkommt.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Denkora — Design System
   ========================================================================== */

/* Display-Schrift für Überschriften */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrumentserif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrumentserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Farbwelt: tiefes Marineblau mit Champagner-Akzent
   Bewusst kein reines Schwarz und kein greller Signalton — beides sind die
   Merkmale, an denen man generische Seiten sofort erkennt. Die Flächen sind
   blaustichig gestuft, der Akzent kommt sparsam und warm dagegen.
   Die alten Variablennamen bleiben als Aliase bestehen, damit bestehende
   Bauteile (u. a. die Schadenerfassung) ohne Umbau mitziehen.
   ========================================================================== */
:root{
  /* Flächen — von tief nach gehoben */
  --bg: #060B14;
  --bg-soft: #0A1220;
  --surface: #0E1826;
  --surface-2: #142236;
  --surface-3: #1B2C44;

  /* Linien: sehr fein, leicht blaustichig statt neutralgrau */
  --border: rgba(198,214,240,0.09);
  --border-strong: rgba(198,214,240,0.18);

  /* Text — kein Reinweiß, das flimmert auf dunklem Grund */
  --text: #EEF3FA;
  --text-muted: #9FB0C7;
  --text-faint: #66788F;

  /* Akzent: Champagner. Deckt sich mit dem Gold im Logo. */
  --accent: #C9A96A;
  --accent-hover: #E0C68F;
  --accent-fg: #0A1220;
  --accent-soft: rgba(201,169,106,0.12);
  --accent-line: rgba(201,169,106,0.42);

  /* Sekundär: ruhiges Stahlblau, nie als Hauptakzent */
  --blue: #5B8FD4;
  --blue-soft: rgba(91,143,212,0.14);

  --green: #4FBF8B;
  --warning: #D9A441;

  /* Aliase der Vorgängerversion */
  --gold-100: #E0C68F;
  --gold-300: #C9A96A;
  --gold-500: #C9A96A;
  --gold-600: #A88A4E;
  --gold-glow: rgba(201,169,106,0.3);
  --accent-fg2: #0A1220;

  /* Radien: zurückhaltend. Überall gleiche runde Ecken wirken schnell billig. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --font-body: Inter, "SF Pro Display", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --container: 1120px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font: inherit; color: inherit; }
h1,h2,h3,h4,p{ margin:0; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Background FX ---------- */
.bg-fx{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 620px at 50% -12%, rgba(10,132,255,0.14), transparent 62%),
    radial-gradient(700px 520px at 88% 10%, rgba(10,132,255,0.06), transparent 60%),
    var(--bg);
}
.bg-fx::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Type scale ---------- */
h1,h2,h3{ font-family: var(--font-body); font-weight:600; letter-spacing:-0.03em; line-height:1.05; }
h1{ font-size: clamp(40px, 6.4vw, 76px); text-wrap: balance; }
h2{ font-size: clamp(30px, 4.2vw, 44px); text-wrap: balance; }
h3{ font-size:20px; letter-spacing:-0.02em; line-height:1.25; }

/* Im neuen Design ist die Headline durchgehend weiß, ohne Farbverlauf. */
.text-gradient{ color: var(--text); }

.eyebrow,
.eyebrow-line{
  display:block;
  font-size:13px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-muted); margin-bottom:20px;
  padding:0; border:none; background:none;
}
.eyebrow .dot{ display:none; }
.eyebrow-line.light{ color: var(--text-muted); }

.section-head{ max-width: 720px; margin-bottom: 64px; }
.section-lead{ margin-top:18px; color: var(--text-muted); font-size:18px; line-height:1.6; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 28px;
  border-radius: var(--radius-full);
  font-weight:600; font-size:16px; letter-spacing:-0.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ flex:none; }

.btn-primary{ background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover{ background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.24); }

.btn-outline{ background: transparent; color: var(--accent); border-color: rgba(10,132,255,0.4); }
.btn-outline:hover{ background: var(--accent-soft); border-color: rgba(10,132,255,0.7); }

.btn-sm{ padding: 10px 20px; font-size:15px; }
.btn-lg{ padding: 17px 32px; font-size:17px; }
.btn-block{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(7,13,24,0);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.site-header.scrolled{
  background: rgba(7,13,24,0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; gap:24px;
}
.logo{ display:flex; align-items:center; gap:11px; font-weight:600; font-size:18px; letter-spacing:-0.02em; }
/* Bildmarke aus site/brand/. Kein Kreisrahmen mehr — die Silhouette
   trägt selbst, ein Rahmen würde sie bei 34 px zusätzlich verkleinern. */
.logo-mark{
  display:block; width:34px; height:34px; flex:none;
}
.logo-mark img{ display:block; width:100%; height:100%; }
.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:15px; color: var(--text-muted); font-weight:400;
  padding: 4px 0; transition: color .2s ease;
}
.main-nav a:hover{ color: var(--text); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border-radius:8px; border:1px solid var(--border-strong);
  background: transparent; cursor:pointer;
}
.nav-toggle span{ display:block; height:1.5px; width:16px; margin-inline:auto; background: var(--text); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:4px; padding: 8px 24px 22px;
  border-bottom:1px solid var(--border);
  background: rgba(8,9,15,0.96);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:12px 4px; color: var(--text-muted); font-weight:500; border-bottom:1px solid rgba(255,255,255,0.05); }
.mobile-nav a:last-child{ border-bottom:none; margin-top:8px; text-align:center; color: var(--accent-fg); }

@media (max-width: 900px){
  .main-nav{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding: 120px 0 100px; text-align:center; }
.hero-title{ font-size: clamp(40px, 6.4vw, 76px); line-height:1.05; margin-inline:auto; max-width:16ch; }
.hero-sub{ margin:28px auto 0; font-size:19px; line-height:1.6; color: var(--text-muted); max-width: 60ch; }
.hero-cta{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; justify-content:center; }

.lead-magnet{
  margin-top:28px; display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius: var(--radius-md);
  border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease);
  max-width: 480px;
}
.lead-magnet:hover{ border-color: rgba(224,172,71,0.4); transform: translateY(-2px); }
.lead-magnet-icon{
  flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background: rgba(224,172,71,0.12); color: var(--gold-300);
}
.lead-magnet-text{ display:flex; flex-direction:column; gap:2px; }
.lead-magnet-text strong{ font-size:14px; }
.lead-magnet-text span{ font-size:13px; color: var(--text-muted); }
.lead-magnet-arrow{ margin-left:auto; flex:none; color: var(--text-faint); transition: transform .3s var(--ease); }
.lead-magnet:hover .lead-magnet-arrow{ transform: translateX(3px); color: var(--gold-300); }

.trust-strip{ margin-top:46px; }
.trust-label{ font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:14px; }
.trust-logos{ display:flex; flex-wrap:wrap; gap: 28px; align-items:center; }
.trust-logos li{ font-weight:700; font-size:15px; color: var(--text-faint); letter-spacing:-0.01em; opacity:0.8; }
.trust-logos.center{ justify-content:center; margin-top:52px; padding-top:40px; border-top:1px solid var(--border); }
.trust-badge{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color: var(--text-muted);
}
.trust-badge svg{ color: var(--green); }

/* ---- Dashboard mockup ---- */
.hero-visual{ position:relative; }
.glow{ position:absolute; border-radius:50%; filter: blur(70px); z-index:-1; opacity:0.55; }
.glow-1{ width:280px; height:280px; background: var(--gold-glow); top:-40px; right:-40px; }
.glow-2{ width:220px; height:220px; background: rgba(120,140,255,0.25); bottom:-30px; left:-30px; }

.dashboard-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)), var(--surface);
  border:1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  animation: float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.dashboard-titlebar{ display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.dot-group{ display:flex; gap:6px; }
.dot-group i{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.15); }
.dot-group i:nth-child(1){ background:#ff6961; }
.dot-group i:nth-child(2){ background:#ffc542; }
.dot-group i:nth-child(3){ background:#69d17a; }
.dashboard-title{ font-size:12.5px; color: var(--text-faint); }
.live-badge{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color: var(--green); text-transform:uppercase; letter-spacing:0.05em; }
.live-badge i{ width:6px; height:6px; border-radius:50%; background: var(--green); box-shadow:0 0 0 3px rgba(111,214,160,0.25); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:0.4;} }

.dashboard-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.stat-box{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm); padding:14px; }
.stat-label{ font-size:11.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }
.stat-value{ margin-top:8px; font-size:22px; font-weight:700; display:flex; align-items:baseline; gap:8px; }
.stat-delta{ font-size:12px; font-weight:700; padding:2px 7px; border-radius: var(--radius-full); }
.stat-delta.up{ color: var(--green); background: rgba(111,214,160,0.12); }

.dashboard-panel{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm); padding:14px; margin-bottom:12px; }
.dashboard-panel-head{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:10px; }
.dashboard-panel-head .muted{ color: var(--text-faint); font-weight:500; }
.automation-list li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color: var(--text-muted); padding:7px 0; }
.automation-list b{ margin-left:auto; color: var(--text); font-weight:700; }
.ico{ width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; background: rgba(224,172,71,0.1); flex:none; }
.ico::before{ content:""; width:13px; height:13px; background: var(--gold-300); }
.ico-cal::before{ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v3M17 2v3M3.5 9h17M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.ico-doc::before{ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.ico-mail::before{ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m22 6-10 7L2 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.ico-bolt::before{ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4.5 13H11l-1 9 8.5-11H12l1-9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.dashboard-claim{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm); padding:14px; }
.chat-head{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; margin-bottom:12px; }
.claim-mini-list{ display:flex; flex-direction:column; gap:2px; }
.claim-mini-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.claim-mini-list li:last-child{ border-bottom:none; }
.claim-mini-list span{ color: var(--text-muted); }
.claim-mini-list b{ font-weight:700; color: var(--text); }
.claim-mini-list b.is-high{ color: #f0a56e; }
.chat-tag{ font-size:12px; font-weight:700; color: var(--green); display:flex; align-items:center; gap:6px; margin-top:10px; }

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section{ padding: 140px 0; scroll-margin-top: 84px; }
#top{ scroll-margin-top: 0; }
.section-alt{ background: rgba(19,31,51,0.4); }
.section-head{ text-align:left; }
.section-head.center, .section-cta .section-head{ margin-inline:auto; text-align:left; }

/* Problem grid */
.problem-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.problem-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 26px 22px; transition: transform .35s var(--ease), border-color .35s ease, background .35s ease;
}
.problem-card:hover{ transform: translateY(-4px); border-color: rgba(224,172,71,0.3); background: rgba(224,172,71,0.03); }
.problem-num{ font-family: var(--font-display); font-size:26px; color: var(--gold-500); opacity:0.7; }
.problem-card h3{ margin-top:14px; font-size:17px; }
.problem-card p{ margin-top:10px; color: var(--text-muted); font-size:14.5px; }

/* Services */
.service-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; padding: 44px 0; }
.service-row + .service-row{ border-top:1px solid var(--border); margin-top:20px; }
.service-row.reverse .service-copy{ order:2; }
.service-row.reverse .service-visual{ order:1; }

.service-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold-300); background: rgba(224,172,71,0.1); padding:6px 12px; border-radius: var(--radius-full); margin-bottom:16px; }
.service-copy h3{ font-size: clamp(22px, 2.6vw, 28px); margin-bottom:16px; }
.service-copy > p{ color: var(--text-muted); font-size:16px; margin-bottom:22px; }

.check-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--text); }
.check-list li::before{
  content:""; flex:none; width:20px; height:20px; margin-top:1px; border-radius:6px;
  background: rgba(224,172,71,0.14);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/50% no-repeat;
}
.check-list li::before{ background-color: var(--gold-400, var(--gold-300)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/50% no-repeat; }

.step-mini-list{ display:flex; flex-direction:column; gap:20px; margin-bottom:28px; }
.step-mini-list li{ display:flex; gap:16px; }
.step-mini-list span{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:12.5px; font-weight:700; color: var(--gold-300); background: rgba(224,172,71,0.1); border: 1px solid rgba(224,172,71,0.2); }
.step-mini-list strong{ font-size:15px; display:block; margin-bottom:4px; }
.step-mini-list p{ font-size:14px; color: var(--text-muted); }

.compare-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--surface);
  border:1px solid var(--border-strong); border-radius: var(--radius-lg); padding:22px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.compare-head{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); margin-bottom:18px; }
.compare-list{ display:flex; flex-direction:column; gap:16px; }
.compare-list li{ display:grid; grid-template-columns: 140px 1fr auto; align-items:center; gap:14px; font-size:13px; }
.compare-list li > span:first-child{ color: var(--text-muted); }
.compare-bar{ height:6px; border-radius: var(--radius-full); background: rgba(255,255,255,0.06); overflow:hidden; }
.compare-bar i{ display:block; height:100%; width:0; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transition: width 1.2s var(--ease); }
.compare-bar.in-view i{ width: var(--w); }
.compare-list b{ font-weight:700; font-size:13px; white-space:nowrap; }
.compare-total{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.compare-total span{ color: var(--text-muted); font-size:14px; }
.compare-total strong{ font-size:20px; color: var(--gold-300); }

/* ==========================================================================
   Schadensschnellerfassung — Feature block & Live-Demo
   ========================================================================== */
.service-feature{ border-top:1px solid var(--border); margin-top:20px; padding:44px 0 0; }
.service-feature-head{ max-width:760px; margin-inline:auto; text-align:center; }
.service-feature-head h3{ font-size: clamp(22px, 2.6vw, 30px); margin-bottom:16px; }
.service-feature-head > p{ color: var(--text-muted); font-size:16px; }

.feature-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:40px 0 36px; }
.feature-steps li{ display:flex; gap:14px; }
.feature-steps span{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:12.5px; font-weight:700; color: var(--gold-300); background: rgba(224,172,71,0.1); border:1px solid rgba(224,172,71,0.2); }
.feature-steps strong{ font-size:15px; display:block; margin-bottom:4px; }
.feature-steps p{ font-size:14px; color: var(--text-muted); }

.claim-demo{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--surface);
  border:1px solid var(--border-strong); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75);
}
.claim-demo-banner{
  display:flex; align-items:center; gap:14px; padding:16px 22px;
  border-bottom:1px solid var(--border); background: rgba(224,172,71,0.05);
}
.claim-demo-banner p{ font-size:13.5px; color: var(--text-muted); }
.claim-demo-pill{
  flex:none; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase; color:#161104; padding:5px 11px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
}
.claim-demo-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:#161104; animation: claimPulse 1.8s var(--ease) infinite; }
@keyframes claimPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.claim-panes{ display:grid; grid-template-columns:1fr 1fr; }
.claim-pane{ padding:22px; }
.claim-pane + .claim-pane{ border-left:1px solid var(--border); }
.claim-pane-out{ background: rgba(255,255,255,0.015); display:flex; flex-direction:column; }

.claim-pane-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.claim-pane-ico{ width:32px; height:32px; border-radius:9px; }
.claim-pane-titles{ min-width:0; }
.claim-pane-title{ font-size:14px; font-weight:600; }
.claim-pane-sub{ font-size:12px; color: var(--text-faint); }
.claim-tagline{
  margin-left:auto; flex:none; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-faint); border:1px solid var(--border); border-radius: var(--radius-full); padding:4px 10px;
}
.claim-timer.is-live{ color: var(--gold-300); border-color: rgba(224,172,71,0.3); background: rgba(224,172,71,0.08); }
.claim-timer.is-done{ color: var(--green); border-color: rgba(111,214,160,0.3); background: rgba(111,214,160,0.08); }

.claim-samples{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.claim-chip{
  font-size:12.5px; font-weight:500; padding:7px 13px; border-radius: var(--radius-full); cursor:pointer;
  background: rgba(255,255,255,0.04); border:1px solid var(--border); color: var(--text-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.claim-chip:hover{ color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.07); }
.claim-chip.is-active{ color: var(--gold-100); border-color: rgba(224,172,71,0.4); background: rgba(224,172,71,0.12); }

.claim-label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; }
.claim-textarea{
  width:100%; resize:vertical; min-height:190px; font-family: var(--font-body); font-size:13.5px; line-height:1.6;
  color: var(--text); background: rgba(0,0,0,0.28); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:14px; margin-bottom:16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.claim-textarea::placeholder{ color: var(--text-faint); }
.claim-textarea:focus{ outline:none; border-color: rgba(224,172,71,0.45); box-shadow: 0 0 0 3px rgba(224,172,71,0.1); }

.claim-privacy{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color: var(--text-faint); margin-top:14px; line-height:1.5; }
.claim-privacy svg{ flex:none; margin-top:2px; }

.claim-state{ flex:1; }
.claim-state[hidden]{ display:none; }

/* Idle */
#claimIdle{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:300px; padding:20px; }
.claim-idle-art{ display:flex; gap:7px; margin-bottom:20px; }
.claim-idle-art span{ width:34px; height:5px; border-radius: var(--radius-full); background: rgba(255,255,255,0.09); }
.claim-idle-art span:nth-child(2){ width:22px; }
.claim-idle-art span:nth-child(3){ width:12px; }
.claim-idle-title{ font-size:15px; font-weight:600; margin-bottom:8px; }
.claim-idle-text{ font-size:13.5px; color: var(--text-faint); max-width:300px; line-height:1.6; }

/* Processing */
#claimProcessing{ display:flex; align-items:center; min-height:300px; }
.claim-steps-live{ display:flex; flex-direction:column; gap:18px; width:100%; padding:0 6px; }
.claim-steps-live li{ display:flex; align-items:center; gap:13px; font-size:14px; color: var(--text-faint); opacity:.35; transition: opacity .3s var(--ease), color .3s var(--ease); }
.claim-steps-live li i{
  flex:none; width:18px; height:18px; border-radius:50%; border:2px solid currentColor; position:relative;
}
.claim-steps-live li.is-active{ opacity:1; color: var(--gold-300); }
.claim-steps-live li.is-active i{ border-style:dashed; animation: claimSpin .9s linear infinite; }
.claim-steps-live li.is-done{ opacity:1; color: var(--green); }
.claim-steps-live li.is-done i{ border-color: var(--green); background: var(--green); }
.claim-steps-live li.is-done i::after{
  content:""; position:absolute; inset:0;
  background:#06070c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
}
@keyframes claimSpin{ to{ transform: rotate(360deg) } }

/* Result */
#claimResult{ animation: claimIn .45s var(--ease) both; }
@keyframes claimIn{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }

.claim-result-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.claim-num{ font-family: var(--font-display); font-size:20px; color: var(--gold-300); letter-spacing:0.01em; }
.claim-meta{ font-size:12px; color: var(--text-faint); margin-top:3px; }
.claim-badge{
  flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:6px 11px; border-radius: var(--radius-full);
  background: rgba(111,214,160,0.12); border:1px solid rgba(111,214,160,0.3); color: var(--green);
}
.claim-badge.is-partial{ background: rgba(240,165,110,0.12); border-color: rgba(240,165,110,0.3); color:#f0a56e; }

.claim-fields{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; margin-bottom:16px; }
.claim-field{ background: var(--surface); padding:11px 13px; }
.claim-field > span{ display:block; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color: var(--text-faint); margin-bottom:3px; }
.claim-field > b{ display:block; font-size:14px; font-weight:600; color: var(--text); word-break:break-word; }
.claim-field > em{ display:block; font-style:normal; font-size:12px; color: var(--text-faint); margin-top:2px; }
.claim-field.is-missing > b{ color: var(--text-faint); font-weight:500; }
.claim-field.is-high > b{ color:#f0a56e; }
.claim-field.is-ok > b{ color: var(--green); }

.claim-block{ border:1px solid var(--border); border-radius: var(--radius-sm); padding:13px 14px; margin-bottom:12px; background: rgba(255,255,255,0.02); }
.claim-block h4{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; font-weight:600; }
.claim-block p{ font-size:13.5px; color: var(--text-muted); line-height:1.55; }
.claim-block ul{ display:flex; flex-direction:column; gap:7px; }
.claim-block li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color: var(--text-muted); line-height:1.5; }
.claim-block li::before{ content:""; flex:none; width:16px; height:16px; margin-top:1px; border-radius:5px; background-color: var(--gold-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m0 0-6-6m6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m0 0-6-6m6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat; }
.claim-block.is-query{ background: rgba(240,165,110,0.06); border-color: rgba(240,165,110,0.22); }
.claim-block.is-query li::before{ background-color:#f0a56e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17v.01M12 13.5a2.5 2.5 0 1 0-2.5-3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/86% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17v.01M12 13.5a2.5 2.5 0 1 0-2.5-3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/86% no-repeat; }

.claim-result-foot{ display:flex; flex-wrap:wrap; gap:8px 16px; padding-top:14px; border-top:1px solid var(--border); margin-top:16px; }
.claim-result-foot span{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color: var(--green); }
.claim-result-foot span::before{ content:"✓"; }

.feature-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:32px; justify-content:center; }
.feature-cta-note{ font-size:13.5px; color: var(--text-faint); }

/* Timeline */
.timeline{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; position:relative; }
.timeline::before{ content:""; position:absolute; top:22px; left:6%; right:6%; height:1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }
.timeline-item{ padding: 0 20px; position:relative; }
.timeline-item:first-child{ padding-left:0; }
.timeline-num{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  font-family: var(--font-display); font-weight:600; font-size:16px;
  background: var(--bg-soft); border:1px solid var(--border-strong); color: var(--gold-300); margin-bottom:20px;
}
.timeline-item h3{ margin-bottom:10px; font-size:17px; }
.timeline-item p{ color: var(--text-muted); font-size:14.5px; }

/* Stats */
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.stat-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px 24px; text-align:left;
  transition: transform .35s var(--ease), border-color .3s ease;
}
.stat-card:hover{ transform: translateY(-4px); border-color: rgba(224,172,71,0.3); }
.stat-big{ font-family: var(--font-display); font-size: 40px; font-weight:600; color: var(--gold-300); }
.stat-title{ margin-top:12px; font-size:14.5px; font-weight:600; }
.stat-note{ margin-top:6px; font-size:12.5px; color: var(--text-faint); }

/* Testimonials */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.testimonial-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:28px; display:flex; flex-direction:column; gap:24px;
}
.testimonial-card p{ font-size:15.5px; line-height:1.6; color: var(--text); }
.testimonial-card footer{ display:flex; align-items:center; gap:12px; font-size:13.5px; color: var(--text-muted); }
.avatar{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-600)); color:#161104; font-weight:700; font-size:13px;
}

/* FAQ */
.faq-list{ max-width: 760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; background:transparent; border:none; text-align:left; cursor:pointer; font-size:15.5px; font-weight:600;
}
.faq-q svg{ flex:none; color: var(--gold-300); transition: transform .35s var(--ease); }
.faq-item.open .faq-q svg{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease), padding .4s var(--ease); padding: 0 22px; }
.faq-item.open .faq-a{ padding: 0 22px 20px; }
.faq-a p{ color: var(--text-muted); font-size:14.5px; line-height:1.6; }

/* Contact */
.section-cta{ position:relative; }
.cta-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:start; }
.cta-points{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.cta-points li{ display:flex; align-items:center; gap:12px; font-size:15px; }
.cta-points svg{ flex:none; color: var(--gold-300); background: rgba(224,172,71,0.1); border-radius:50%; padding:4px; width:26px; height:26px; }

.contact-form{
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)), var(--surface);
  border:1px solid var(--border-strong); border-radius: var(--radius-lg); padding:32px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color: var(--text-muted); margin-bottom:8px; }
.field input, .field textarea{
  width:100%; background: rgba(255,255,255,0.03); border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding:12px 14px; font: inherit; color: var(--text); resize: vertical;
  transition: border-color .25s ease, background .25s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--gold-500); background: rgba(224,172,71,0.05); }
.form-note{ margin-top:14px; font-size:12.5px; color: var(--text-faint); text-align:center; }
.form-status{ margin-top:10px; font-size:13.5px; text-align:center; min-height:1.4em; }
.form-status.ok{ color: var(--green); }
.form-status.err{ color:#ff8a80; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--border); padding-top:56px; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-brand p{ margin-top:14px; color: var(--text-muted); font-size:14px; max-width:32ch; }
.footer-nav{ display:flex; flex-direction:column; gap:12px; }
.footer-nav a, .footer-legal a{ color: var(--text-muted); font-size:14px; transition: color .25s ease; }
.footer-nav a:hover, .footer-legal a:hover{ color: var(--text); }
.footer-legal{ display:flex; flex-direction:column; gap:12px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 22px 24px; border-top:1px solid var(--border); font-size:13px; color: var(--text-faint); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
/* Einblenden nur, wenn JavaScript läuft. Ohne die .js-Klasse bleibt der
   Inhalt sichtbar — sonst wäre die Seite bei blockiertem oder fehlerhaftem
   JavaScript komplett leer. */
.js .reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0ms); }
.js .reveal.in-view{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1020px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:560px; margin-inline:auto; width:100%; }
  .problem-grid{ grid-template-columns: repeat(2,1fr); }
  .service-row{ grid-template-columns:1fr; gap:36px; }
  .service-row.reverse .service-copy{ order:1; }
  .service-row.reverse .service-visual{ order:2; }
  .timeline{ grid-template-columns: repeat(2,1fr); row-gap:36px; }
  .timeline::before{ display:none; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns:1fr; }
  .cta-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .feature-steps{ grid-template-columns:1fr; gap:20px; margin:32px 0 28px; }
  .claim-panes{ grid-template-columns:1fr; }
  .claim-pane + .claim-pane{ border-left:none; border-top:1px solid var(--border); }
  #claimIdle, #claimProcessing{ min-height:220px; }
}
@media (max-width: 620px){
  .section{ padding: 76px 0; }
  .hero{ padding: 56px 0 40px; }
  .problem-grid{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
  .trust-logos{ gap:18px 22px; }
  .cta-grid, .service-row{ gap:32px; }
  .claim-fields{ grid-template-columns:1fr; }
  .claim-demo-banner{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px 18px; }
  .claim-pane{ padding:18px; }
  .claim-result-head{ flex-direction:column; }
  .feature-cta{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* ==========================================================================
   Layout-Anpassungen an das aktuelle Denkora-Design
   (zentrierter Hero, Kostensektion, Über-uns, Terminbuchung)
   ========================================================================== */

/* ---------- Hero-Zusatz ---------- */
.hero-actions{ margin-top:40px; display:flex; flex-direction:column; align-items:center; }
.cta-note{ margin-top:16px; color: var(--text-faint); font-size:14px; }
.hero .eyebrow{ margin-bottom:26px; }

/* ---------- Kosten-Sektion ---------- */
.cost-grid{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:20px; align-items:stretch; }
.card{
  background: var(--surface); border:1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding:32px;
}
.card-feature{ background: linear-gradient(160deg, rgba(10,132,255,0.14), rgba(14,23,40,0.6) 55%), var(--surface); }
.cost-stat{ font-size: clamp(34px, 4vw, 44px); font-weight:600; letter-spacing:-0.03em; line-height:1.05; }
.card h3{ margin-bottom:12px; }
.card p{ color: var(--text-muted); font-size:15.5px; line-height:1.6; }
.card-feature p{ margin-top:16px; }
.cost-note{ margin-top:28px; color: var(--text-faint); font-size:13px; line-height:1.6; }

/* ---------- Leistungen ---------- */
.service-row{ grid-template-columns: 1fr 1fr; gap:72px; padding:0; }
.service-row + .service-row{ margin-top:120px; padding-top:120px; border-top:1px solid var(--border); }
.service-tag{
  display:block; padding:0; background:none; border-radius:0; margin-bottom:18px;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--accent);
}
.service-copy h3{ font-size: clamp(24px, 3vw, 32px); letter-spacing:-0.03em; line-height:1.15; margin-bottom:18px; }
.service-copy > p{ color: var(--text-muted); font-size:17px; line-height:1.6; margin-bottom:0; }
.service-copy > p + p{ margin-top:14px; }
.check-list{ gap:14px; margin-top:28px; margin-bottom:0; }
.check-list li{ font-size:16px; }

/* Beispielrechnung */
.compare-card{ border-radius: var(--radius-lg); padding:28px; background: var(--surface); }
.compare-head{ font-size:12.5px; letter-spacing:0.06em; color: var(--text-faint); margin-bottom:22px; }
.compare-list{ gap:18px; }
.compare-list li{ grid-template-columns: 1fr auto; gap:8px 16px; font-size:15px; }
.compare-list li > span:first-child{ color: var(--text-muted); }
.compare-list b{ font-size:15px; font-weight:600; }
.compare-bar{ grid-column:1 / -1; height:5px; background: rgba(255,255,255,0.06); }
.compare-bar i{ background: var(--accent); }
.compare-total{ margin-top:26px; padding-top:22px; }
.compare-total span{ font-size:15px; }
.compare-total strong{ font-size:24px; font-weight:600; letter-spacing:-0.02em; color: var(--text); }
.calc-note{ margin-top:16px; color: var(--text-faint); font-size:13px; line-height:1.6; }

/* ---------- Ablauf ---------- */
.timeline{ gap:28px; }
.timeline::before{ display:none; }
.timeline-item{ padding:0; }
.timeline-num{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-body); font-size:14px; font-weight:600; color: var(--accent);
  margin-bottom:22px; font-variant-numeric: tabular-nums;
}
.timeline-item h3{ font-size:18px; margin-bottom:10px; }
.timeline-item p{ font-size:15.5px; line-height:1.6; }

/* ---------- Über uns ---------- */
.about-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap:64px; align-items:start; }
.about-person{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.about-avatar{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center; flex:none;
  background: linear-gradient(150deg, var(--accent), #0a5fc0);
  color:#fff; font-weight:600; font-size:18px; letter-spacing:-0.01em;
}
.about-name{ font-size:19px; font-weight:600; letter-spacing:-0.02em; }
.about-role{ color: var(--text-muted); font-size:14.5px; margin-top:3px; }
.about-quote{ font-size:19px; line-height:1.6; letter-spacing:-0.01em; color: var(--text); }
.about-points{ display:flex; flex-direction:column; gap:16px; }
.about-point{ background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-md); padding:22px 24px; }
.about-point h3{ font-size:16px; margin-bottom:7px; }
.about-point p{ color: var(--text-muted); font-size:14.5px; line-height:1.55; }

/* ---------- FAQ als Trennlinien-Liste ---------- */
.faq-list{ max-width:768px; gap:0; }
.faq-item{ border:none; border-top:1px solid var(--border); border-radius:0; background:none; }
.faq-item:last-child{ border-bottom:1px solid var(--border); }
.faq-q{ padding:26px 4px; font-size:18px; font-weight:500; letter-spacing:-0.02em; }
.faq-q svg{ color: var(--text-faint); }
.faq-q:hover svg{ color: var(--accent); }
.faq-item.open .faq-q svg{ color: var(--accent); }
.faq-a{ padding:0; }
.faq-item.open .faq-a{ padding:0; }
.faq-a p{ font-size:16px; line-height:1.65; padding:0 4px 26px; max-width:66ch; }

/* ---------- Terminbuchung ---------- */
.contact-head{ text-align:center; margin-bottom:44px; max-width:none; }
.contact-head .section-lead{ margin:18px auto 0; max-width:58ch; }
.trust-line{ margin-top:20px; display:inline-flex; align-items:center; gap:9px; font-size:14px; color: var(--text-muted); }
.trust-line svg{ color: var(--green); flex:none; }

.promo{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:0 auto 32px; padding:13px 22px; width:fit-content; max-width:100%;
  background: var(--accent-soft); border:1px solid rgba(10,132,255,0.28);
  border-radius: var(--radius-full); font-size:14.5px; color: var(--text); text-align:center;
}
.promo b{ font-weight:600; }
.promo .sep{ color: var(--text-faint); }

.booking{ background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-lg); overflow:hidden; }
.booking-gate{ padding:56px 32px; text-align:center; }
.booking-gate h3{ font-size:21px; margin-bottom:12px; }
.booking-gate > p{ color: var(--text-muted); font-size:15.5px; max-width:52ch; margin:0 auto 26px; line-height:1.6; }
.booking-gate .btn{ margin-bottom:18px; }
.booking-alt{ font-size:14px; color: var(--text-faint); }
.booking-alt a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; }
.booking-alt a:hover{ color: var(--accent-hover); }
.calendly-inline-widget{ min-width:320px; height:720px; }

/* ---------- Footer ---------- */
.footer-inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-brand p{ font-size:14.5px; line-height:1.6; max-width:34ch; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border-strong); color: var(--text-muted);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.footer-social a:hover{ color: var(--text); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); }
.footer-cols{ display:flex; gap:72px; flex-wrap:wrap; }
.footer-col h4{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:16px; }
.footer-col a{ display:block; color: var(--text-muted); font-size:15px; padding:5px 0; transition: color .2s ease; }
.footer-col a:hover{ color: var(--text); }

/* ---------- Rechtsseiten ---------- */
.legal{ padding:88px 0 100px; max-width:768px; }
.legal h1{ font-size: clamp(32px, 4.4vw, 42px); margin-bottom:14px; }
.legal h2{ font-size:19px; margin-top:38px; margin-bottom:10px; }
.legal p{ color: var(--text-muted); margin-bottom:10px; line-height:1.7; font-size:15.5px; }
.legal p strong{ color: var(--text); }
.legal a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; font-size:15px; color: var(--accent); }
.legal-back:hover{ color: var(--accent-hover); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .section{ padding:100px 0; }
  .cost-grid{ grid-template-columns:1fr; }
  .service-row{ grid-template-columns:1fr; gap:44px; }
  .service-row + .service-row{ margin-top:80px; padding-top:80px; }
  .timeline{ grid-template-columns: repeat(2,1fr); gap:36px 28px; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .footer-cols{ gap:48px; }
}
@media (max-width: 620px){
  .section{ padding:80px 0; }
  body{ font-size:16px; }
  .hero{ padding:72px 0 64px; }
  .hero-sub{ font-size:17px; }
  .timeline{ grid-template-columns:1fr; }
  .card{ padding:26px; }
  .section-head{ margin-bottom:44px; }
  .compare-card{ padding:20px; }
  .footer-inner{ flex-direction:column; gap:36px; }
  .promo{ border-radius: var(--radius-md); }
  .booking-gate{ padding:40px 22px; }
}

/* Leistung 02 nutzt die volle Breite (Demo braucht Platz) */
.service-row-wide{ grid-template-columns:1fr; gap:44px; }
.service-row-wide .service-copy{ max-width:768px; }
.booking-footnote{ text-align:center; margin-top:20px; }

/* ==========================================================================
   Touch- und Mobilkorrekturen
   ========================================================================== */

/* iOS Safari zoomt beim Fokus automatisch hinein, wenn ein Eingabefeld
   kleiner als 16px gesetzt ist. Das reisst das Layout auseinander. */
@media (max-width: 860px){
  .claim-textarea{ font-size:16px; }
}

/* Auf Touchgeräten mindestens ~44px Trefferfläche */
@media (pointer: coarse){
  .nav-toggle{ width:44px; height:44px; }
  .claim-chip{ padding:11px 16px; font-size:13.5px; }
  .footer-col a{ padding:11px 0; }
  .footer-social a{ width:44px; height:44px; }
  .mobile-nav a{ padding:15px 4px; }
  .faq-q{ padding-top:22px; padding-bottom:22px; }
}

/* Kein blaues Aufblitzen beim Antippen, aber Fokus bleibt sichtbar */
a, button{ -webkit-tap-highlight-color: rgba(10,132,255,0.18); }

/* Textgroesse nicht automatisch skalieren (iOS Querformat) */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Lange Woerter (z. B. Auftragsverarbeitungsvertraege) nicht ueberlaufen lassen */
h1, h2, h3, p, li, .legal p{ overflow-wrap: break-word; }

/* ==========================================================================
   Mobile Feinschliff
   ========================================================================== */

/* iOS Safari zoomt beim Antippen automatisch in jedes Eingabefeld mit
   Schriftgröße unter 16px. Das Textfeld der Demo hatte 13,5px — der
   Zoom riss die Seite aus dem Layout und musste manuell zurückgesetzt
   werden. 16px verhindert das zuverlässig. */
@media (max-width: 900px){
  .claim-textarea{ font-size: 16px; }
}

/* Antippbare Flächen auf mindestens ~44px bringen (Richtwert Apple/Google).
   Betroffen waren die Beispiel-Chips, die Footer-Links und die Social-Icons. */
@media (max-width: 900px){
  .claim-chip{ padding: 11px 16px; }
  .footer-col a{ padding: 11px 0; }
  .footer-social a{ width: 44px; height: 44px; }
  .nav-toggle{ width: 44px; height: 44px; }
  .legal-back{ padding: 8px 0; display: inline-flex; }
}

/* ==========================================================================
   Premium-Ebene
   Überschreibt gezielt Typografie, Bauteile und Rhythmus. Steht bewusst am
   Ende, damit die Grundregeln oben unangetastet bleiben.
   ========================================================================== */

/* ---------- Hintergrund: ruhiger Verlauf statt greller Leuchtflecken ------ */
.bg-fx{
  background:
    radial-gradient(1100px 700px at 50% -20%, rgba(91,143,212,0.10), transparent 64%),
    radial-gradient(760px 520px at 92% 6%, rgba(201,169,106,0.05), transparent 62%),
    var(--bg);
}

/* ---------- Typografie ---------------------------------------------------- */
h1, h2{
  font-family: var(--font-display);
  font-weight: 400;              /* Instrument Serif hat nur einen Schnitt */
  letter-spacing: -0.015em;
  line-height: 1.04;
}
h1{ font-size: clamp(44px, 6.6vw, 82px); }
h2{ font-size: clamp(32px, 4.4vw, 52px); }
h3{
  font-family: var(--font-body);
  font-weight: 600; font-size: 19px; letter-spacing: -0.015em; line-height: 1.3;
}

/* Kursive Hervorhebung in Überschriften — ein Detail, das Handarbeit zeigt */
h1 em, h2 em{ font-style: italic; color: var(--accent); }

/* Label-Zeilen: klein, gesperrt, mit vorangestelltem Strich */
.eyebrow, .eyebrow-line{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.eyebrow::before, .eyebrow-line::before{
  content: ""; width: 28px; height: 1px; background: var(--accent-line); flex: none;
}

.section-lead{
  font-family: var(--font-body);
  color: var(--text-muted); font-size: 17.5px; line-height: 1.65; max-width: 58ch;
}

/* ---------- Buttons ------------------------------------------------------- */
.btn{
  font-size: 15px; font-weight: 600; letter-spacing: 0.005em;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  transition: background .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.btn-primary{
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset;
}
.btn-primary:hover{ background: var(--accent-hover); transform: none; }
.btn-ghost, .btn-outline{
  background: transparent; color: var(--text);
  border-color: var(--border-strong); border-radius: var(--radius-full);
}
.btn-ghost:hover, .btn-outline:hover{
  background: rgba(255,255,255,0.04); border-color: var(--accent-line); color: var(--accent);
}
.btn-lg{ padding: 17px 34px; font-size: 16px; }

/* ---------- Kopfzeile ----------------------------------------------------- */
.site-header.scrolled{
  background: rgba(6,11,20,0.86);
  border-bottom-color: var(--border);
}
.main-nav a{ font-size: 14.5px; letter-spacing: 0.01em; }
.main-nav a:hover{ color: var(--accent); }
.logo-word{ font-family: var(--font-display); font-size: 21px; letter-spacing: 0; font-weight: 400; }

/* ---------- Hero: linksbündig statt mittig ------------------------------- */
.hero{ padding: 132px 0 108px; text-align: left; }
.hero .container > .reveal{ max-width: 940px; }
.hero-title{ margin-inline: 0; max-width: 18ch; }
.hero-sub{ margin: 30px 0 0; max-width: 56ch; font-size: 18.5px; }
.hero-actions{ align-items: flex-start; margin-top: 42px; }
.hero-cta{ justify-content: flex-start; }
.cta-note{ color: var(--text-faint); font-size: 13.5px; letter-spacing: 0.02em; }

/* Feine Trennlinie unter dem Hero */
.hero::after{
  content: ""; display: block; height: 1px; margin-top: 96px;
  background: linear-gradient(90deg, var(--accent-line), transparent 42%);
}

/* ---------- Sektionen: nummeriert, editorial ----------------------------- */
.section{ padding: 132px 0; }
.section-alt{ background: var(--bg-soft); border-block: 1px solid var(--border); }
.section-head{ max-width: 760px; margin-bottom: 72px; }

/* ---------- Karten: kantiger, weniger Schatten --------------------------- */
.card, .about-point, .compare-card, .claim-demo, .booking{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
.card-feature{
  background:
    linear-gradient(150deg, rgba(201,169,106,0.10), transparent 58%),
    var(--surface);
  border-color: var(--accent-line);
}
.cost-stat{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 58px); letter-spacing: -0.01em; color: var(--accent);
}

/* ---------- Ablauf: Ziffern als Display-Schrift -------------------------- */
.timeline-num{
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  color: var(--accent); background: transparent;
  border: 1px solid var(--accent-line); width: 52px; height: 52px;
}

/* ---------- Leistungs-Label ---------------------------------------------- */
.service-tag{
  font-family: var(--font-body);
  font-size: 11.5px; letter-spacing: 0.16em; color: var(--accent);
  background: none; padding: 0; margin-bottom: 20px; display: inline-flex; gap: 12px; align-items: center;
}
.service-tag::before{ content: ""; width: 28px; height: 1px; background: var(--accent-line); }
.service-copy h3{ font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.015em; line-height: 1.12; }

/* ---------- Über uns ------------------------------------------------------ */
.about-quote{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.5vw, 28px); line-height: 1.42; letter-spacing: -0.01em;
}
.about-avatar{ background: linear-gradient(150deg, var(--accent), var(--gold-600)); color: var(--accent-fg); }

/* ---------- FAQ ----------------------------------------------------------- */
.faq-q{ font-family: var(--font-body); font-size: 17.5px; font-weight: 500; }
.faq-q:hover{ color: var(--accent); }

/* ---------- Aktionsbanner ------------------------------------------------- */
.promo{
  background: var(--accent-soft); border-color: var(--accent-line);
  border-radius: var(--radius-md); font-size: 14px; letter-spacing: 0.01em;
}

/* ---------- Fußzeile ------------------------------------------------------ */
.site-footer{ border-top: 1px solid var(--border); }
.footer-col h4{ color: var(--text-faint); letter-spacing: 0.14em; font-size: 11.5px; }
.footer-col a:hover, .footer-social a:hover{ color: var(--accent); }
.footer-social a:hover{ border-color: var(--accent-line); }

/* ---------- Bewegung: ruhiger, gestaffelt -------------------------------- */
.js .reveal{ transform: translateY(16px); transition-duration: .85s; }

/* ==========================================================================
   Eröffnungssequenz
   Läuft einmal pro Sitzung, dauert ~2,2 s und lässt sich mit Klick oder
   Taste abbrechen. Ohne JavaScript oder bei reduzierter Bewegung erscheint
   sie gar nicht erst — die Seite ist dann sofort da.
   ========================================================================== */
.intro{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  cursor: pointer;
}
.intro[hidden]{ display: none; }

.intro-inner{ display: flex; flex-direction: column; align-items: center; gap: 22px; }

.intro-mark{
  width: 92px; height: 92px;
  opacity: 0; transform: scale(.88);
  animation: introMark .9s var(--ease-out) .12s forwards;
}
@keyframes introMark{ to{ opacity: 1; transform: scale(1); } }

/* Haarlinie wächst aus der Mitte */
.intro-rule{
  width: 0; height: 1px; background: var(--accent-line);
  animation: introRule .7s var(--ease-out) .62s forwards;
}
@keyframes introRule{ to{ width: 190px; } }

.intro-word{
  font-family: var(--font-display); font-size: 34px; letter-spacing: .02em;
  color: var(--text);
  opacity: 0; transform: translateY(8px);
  animation: introWord .7s var(--ease-out) .78s forwards;
}
.intro-sub{
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0;
  animation: introWord .7s var(--ease-out) .96s forwards;
}
@keyframes introWord{ to{ opacity: 1; transform: none; } }

/* Vorhang öffnet sich nach oben und unten */
.intro-blind{
  position: absolute; left: 0; right: 0; height: 50%;
  background: var(--bg);
  transition: transform 1s var(--ease-out);
}
.intro-blind.top{ top: 0; }
.intro-blind.bottom{ bottom: 0; }
.intro.is-open .intro-inner{ opacity: 0; transition: opacity .35s ease; }
.intro.is-open .intro-blind.top{ transform: translateY(-100%); }
.intro.is-open .intro-blind.bottom{ transform: translateY(100%); }

.intro-skip{
  position: absolute; right: 24px; bottom: 22px;
  background: none; border: none; cursor: pointer;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0; animation: introWord .5s ease 1.3s forwards;
}
.intro-skip:hover{ color: var(--accent); }

/* Inhalt hebt sich sanft mit an, sobald der Vorhang öffnet */
.intro-aktiv main, .intro-aktiv .site-header, .intro-aktiv .site-footer{
  opacity: 0;
}
.intro-fertig main, .intro-fertig .site-header, .intro-fertig .site-footer{
  opacity: 1; transition: opacity .6s ease .1s;
}

@media (prefers-reduced-motion: reduce){
  .intro{ display: none !important; }
  .intro-aktiv main, .intro-aktiv .site-header, .intro-aktiv .site-footer{ opacity: 1; }
}

/* ==========================================================================
   Schaden-Schnellerfassung — Feinschliff
   Vorher: pulsierende Pille, kräftige Farbflächen, uneinheitliche Abstände.
   Das wirkte wie ein Widget. Jetzt ruhiger, mit klarer Rangfolge.
   ========================================================================== */
.claim-demo{ overflow: hidden; }

/* Kopfzeile: sachliches Label statt blinkender Pille */
.claim-demo-banner{
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 18px 26px;
  gap: 16px;
}
.claim-demo-pill{
  background: none; color: var(--accent);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.claim-demo-pill::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: none;   /* kein Blinken */
}
.claim-demo-banner p{ font-size: 13px; color: var(--text-faint); }

/* Panels */
.claim-pane{ padding: 26px; }
.claim-pane + .claim-pane{ border-left: 1px solid var(--border); }
.claim-pane-out{ background: rgba(255,255,255,0.012); }
.claim-pane-ico{ background: var(--accent-soft); border-radius: var(--radius-sm); }
.claim-pane-title{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.claim-pane-sub{ font-size: 12.5px; }
.claim-tagline{
  font-size: 10.5px; letter-spacing: .14em; padding: 5px 11px;
  border-radius: var(--radius-sm); border-color: var(--border);
}
.claim-timer.is-live{ color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.claim-timer.is-done{ color: var(--green); border-color: rgba(79,191,139,.3); background: rgba(79,191,139,.1); }

/* Beispiel-Auswahl */
.claim-chip{
  border-radius: var(--radius-sm); font-size: 12.5px;
  background: transparent; border-color: var(--border);
}
.claim-chip:hover{ border-color: var(--border-strong); background: rgba(255,255,255,0.03); }
.claim-chip.is-active{
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}

/* Eingabefeld */
.claim-label{ letter-spacing: .14em; font-size: 11px; }
.claim-textarea{
  border-radius: var(--radius-md);
  background: rgba(0,0,0,.24);
  line-height: 1.65;
}
.claim-textarea:focus{
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Verarbeitungsschritte */
.claim-steps-live li.is-active{ color: var(--accent); }
.claim-steps-live li.is-done i::after{ background: var(--surface); }

/* Ergebnis: klare Rangfolge, Aktenzeichen als Display-Schrift */
.claim-num{ font-family: var(--font-display); font-size: 24px; color: var(--accent); letter-spacing: 0; }
.claim-meta{ font-size: 12.5px; }
.claim-badge{
  border-radius: var(--radius-sm); font-size: 11px; letter-spacing: .06em;
  background: rgba(79,191,139,.1); border-color: rgba(79,191,139,.3); color: var(--green);
}
.claim-badge.is-partial{
  background: rgba(217,164,65,.1); border-color: rgba(217,164,65,.3); color: var(--warning);
}
.claim-fields{ border-radius: var(--radius-md); gap: 1px; }
.claim-field{ padding: 13px 15px; }
.claim-field > span{ font-size: 10.5px; letter-spacing: .12em; }
.claim-field > b{ font-size: 14.5px; }
.claim-field.is-high > b{ color: var(--warning); }

.claim-block{ border-radius: var(--radius-md); padding: 15px 16px; background: rgba(255,255,255,.015); }
.claim-block h4{ font-size: 10.5px; letter-spacing: .14em; }
.claim-block.is-query{ background: rgba(217,164,65,.06); border-color: rgba(217,164,65,.22); }
.claim-block.is-query li::before{ background-color: var(--warning); }
.claim-result-foot span{ color: var(--green); font-size: 12px; }

.claim-privacy{ font-size: 12px; line-height: 1.6; }

@media (max-width: 900px){
  .claim-pane + .claim-pane{ border-left: none; border-top: 1px solid var(--border); }
}

/* ==========================================================================
   Zeitspar-Rechner
   ========================================================================== */
.rechner-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}

/* ---- Regler ---- */
.rechner-regler{ display: flex; flex-direction: column; gap: 34px; }
.regler{ display: block; }
.regler-kopf{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.regler-name{ font-size: 15px; color: var(--text-muted); }
.regler-kopf output{
  font-family: var(--font-display); font-size: 20px; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.regler input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--border-strong);
  border-radius: 2px; outline: none; cursor: pointer;
}
.regler input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-soft);
  box-shadow: 0 0 0 1px var(--accent-line);
  cursor: grab; transition: transform .2s var(--ease-out);
}
.regler input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.regler input[type="range"]::-moz-range-thumb{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-soft); cursor: grab;
}
.regler input[type="range"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 6px; }

.rechner-formel{
  font-size: 13px; line-height: 1.7; color: var(--text-faint);
  padding-top: 22px; border-top: 1px solid var(--border);
}
.rechner-formel span{ color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Ergebnis ---- */
.rechner-ergebnis{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px;
}
.rechner-zeile{
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 16px 0;
}
.rechner-zeile + .rechner-zeile{ border-top: 1px solid var(--border); }
.rechner-label{ font-size: 14.5px; color: var(--text-muted); }
.rechner-zahl{
  font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 8px;
}
.rechner-zahl small{
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--text-faint); letter-spacing: .04em;
}
.rechner-zahl-2{ font-size: 30px; color: var(--text); }

.rechner-balken{
  height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 4px 0 8px;
}
.rechner-balken i{
  display: block; height: 100%; width: var(--fuellung, 40%);
  background: linear-gradient(90deg, var(--gold-600), var(--accent));
  transition: width .45s var(--ease-out);
}

.rechner-cta{ margin-top: 26px; }
.rechner-hinweis{
  margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); text-align: center;
}

@media (max-width: 980px){
  .rechner-grid{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 620px){
  .rechner-ergebnis{ padding: 24px; }
  .rechner-zahl{ font-size: 38px; }
  .rechner-zahl-2{ font-size: 26px; }
}

/* Trefferfläche der Regler: das Eingabefeld war nur so hoch wie die Spur
   (2 px) und damit auf dem Handy praktisch nicht zu greifen. Jetzt 44 px
   hoch und transparent — die sichtbare Spur zeichnet das Track-Element. */
.regler input[type="range"]{
  height: 44px; background: transparent; border-radius: 0;
}
.regler input[type="range"]::-webkit-slider-runnable-track{
  height: 2px; background: var(--border-strong); border-radius: 2px;
}
.regler input[type="range"]::-webkit-slider-thumb{ margin-top: -9px; }
.regler input[type="range"]::-moz-range-track{
  height: 2px; background: var(--border-strong); border-radius: 2px;
}

/* Kontaktspalte im Footer: Art des Kontakts als kleine Zeile darüber,
   damit Telefonnummer und Adresse nicht kommentarlos nebeneinanderstehen. */
.footer-col a .kontakt-art{
  display: block;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
  transition: color .2s ease;
}
.footer-col a:hover .kontakt-art{ color: var(--text-faint); }

/* Die E-Mail-Adresse brach am Bindestrich um ("info@denkora-" / "ki.com").
   Die Spalte darf dafür breiter werden — der Footer bricht ohnehin um. */
.footer-col a{ white-space: nowrap; }