/* finovocation — Shared Styles */

:root {
  --navy:   #0f172a;
  --teal:   #0d9488;
  --teal-dark: #0f766e;   /* Knöpfe: weißer Text braucht 4,5:1 — #0d9488 schaffte nur 3,7:1 */
  --teal-light: #14b8a6;
  --gray:   #64748b;
  --light:  #f8fafc;
  --white:  #ffffff;
  --border: #e2e8f0;
  --red:    #ef4444;
  --green:  #22c55e;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--light);
  color: var(--navy);
  line-height: 1.6;
}

/* ── Navigation ─────────────────────────────────────────── */
nav {
  background: var(--navy);
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: var(--white);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}

@media (max-width: 520px) {
  nav { padding: 0.9rem 1.1rem; }
  .logo { font-size: 1.35rem; }
  .logo svg { width: 30px; height: 30px; }
}

.logo span { color: var(--teal-light); }

nav a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a5f 100%);
  color: var(--white);
  padding: 5rem 2rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  letter-spacing: -1px;
}

.hero h1 em {
  color: var(--teal-light);
  font-style: normal;
}

.hero p {
  font-size: 1.15rem;
  color: #cbd5e1;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.badge {
  display: inline-block;
  background: rgba(20,184,166,0.15);
  color: var(--teal-light);
  border: 1px solid rgba(20,184,166,0.3);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--teal-dark);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(15,118,110,0.28);
}

.btn-primary:hover { background: #115e59; transform: translateY(-1px); }

.btn-lg { padding: 1.1rem 2.5rem; font-size: 1.1rem; }

.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Container ───────────────────────────────────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Features ────────────────────────────────────────────── */
.features {
  padding: 4rem 2rem;
  background: var(--white);
}

.features h2 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--navy);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.feature-card {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.feature-icon { font-size: 1.8rem; margin-bottom: 0.8rem; }

.feature-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--navy);
}

.feature-card p { font-size: 0.9rem; color: var(--gray); }

/* ── Pricing ─────────────────────────────────────────────── */
.pricing {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--light);
}

.pricing h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.price-card {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(13,148,136,0.1);
}

.price-amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--navy);
}

.price-amount span { font-size: 1.2rem; font-weight: 400; color: var(--gray); }

.price-desc { color: var(--gray); margin: 0.5rem 0 1.5rem; font-size: 0.95rem; }

.price-features {
  list-style: none;
  text-align: left;
  margin: 1.5rem 0;
}

.price-features li {
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--navy);
}

.price-features li::before { content: "✓ "; color: var(--teal); font-weight: 700; }

/* ── How it works ────────────────────────────────────────── */
.how {
  padding: 4rem 2rem;
  background: var(--white);
}

.how h2 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.step { text-align: center; }

.step-num {
  width: 48px; height: 48px;
  background: var(--teal);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}

.step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.step p  { font-size: 0.9rem; color: var(--gray); }

/* ── Disclaimer ──────────────────────────────────────────── */
.disclaimer {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  font-size: 0.82rem;
  color: #78350f;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
  background: var(--navy);
  color: #94a3b8;   /* vorher #64748b: 3,8:1 auf Navy, zu blass */
  padding: 2rem;
  text-align: center;
  font-size: 0.85rem;
}

footer a { color: #cbd5e1; text-decoration: none; margin: 0 0.5rem; }
footer a:hover { color: #ffffff; }
.footer-klein { margin-top: 0.5rem; font-size: 0.8rem; color: #94a3b8; }

/* ── Upload Page ─────────────────────────────────────────── */
.upload-section {
  max-width: 640px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.upload-section h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.upload-section p { color: var(--gray); margin-bottom: 2rem; }

.drop-zone {
  border: 2px dashed var(--teal);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  background: rgba(13,148,136,0.03);
  transition: all 0.2s;
}

.drop-zone:hover, .drop-zone.dragover {
  background: rgba(13,148,136,0.08);
  border-color: var(--teal-light);
}

.drop-zone input[type="file"] { display: none; }

.drop-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }

.drop-zone h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.drop-zone p  { font-size: 0.85rem; color: var(--gray); }

.file-list {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
}

.file-item .file-name { flex: 1; font-weight: 500; }
.file-item .file-size { color: var(--gray); font-size: 0.8rem; }
.file-remove { cursor: pointer; color: var(--red); font-size: 1.1rem; }

.analyze-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1rem;
}

/* ── Processing ──────────────────────────────────────────── */
.processing {
  text-align: center;
  padding: 5rem 2rem;
  max-width: 500px;
  margin: 0 auto;
}

.spinner {
  width: 60px; height: 60px;
  border: 4px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 2rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.processing h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.processing p  { color: var(--gray); font-size: 0.95rem; }

/* ── Alert ───────────────────────────────────────────────── */
.alert {
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Info-Kästchen an den Unterlagen ──────────────────────── */
/* Das „i" ist bewusst ein <button> und kein <span>: Nur so ist es mit der
   Tastatur erreichbar, und nur so laesst es sich auf dem Handy antippen.
   Reines :hover waere auf Touch-Geraeten tot — und dort liest ein guter Teil
   der Kundschaft. Deshalb oeffnet das Kaestchen bei :hover UND bei :focus. */
.info {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: transparent;
  color: var(--gray, #64748b);
  font: 600 0.72rem/1 Georgia, serif;
  cursor: help;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

/* Das „i" kommt aus dem Stylesheet, nicht aus dem HTML.
   Grund: Scheitert das Stylesheet — etwa weil der Browser noch eine alte
   Fassung im Zwischenspeicher hat —, stünde ein loses „i" unmittelbar vor
   dem Erklärtext und liefe optisch mit ihm zusammen. Genau so sah es aus,
   bevor diese Zeile hier stand. Ohne Gestaltung erscheint jetzt nur ein
   leerer Knopf, und das stört niemanden. */
.info::before { content: "i"; }

.info:hover, .info:focus-visible {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.09);
  color: #0d9488;
  outline: none;
}

/* ── Zeile je Unterlage im Vorkauf-Fenster ────────────────── */
.doc-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  transition: border-color 0.15s, background 0.15s;
}

.doc-row:hover { border-color: #cbd5e1; }

/* Abgehakt wird die Zeile ruhig hervorgehoben — so sieht man mit einem Blick,
   was man schon hat, ohne die Kästchen einzeln durchzugehen. */
.doc-row:has(input:checked) {
  border-color: rgba(13, 148, 136, 0.5);
  background: rgba(13, 148, 136, 0.05);
}

.doc-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;          /* sonst sprengt langer Text die Zeile */
  cursor: pointer;
}

.doc-label input { flex: 0 0 auto; cursor: pointer; }

.doc-name {
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Kennzeichen als kleine Plaketten statt als Text im Fließsatz. Vorher hing
   „· wichtig · bis 2" hinten am Namen und wurde beim Umbruch mitgeschleift. */
.chip {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--gray);
  white-space: nowrap;
}

.chip-wichtig {
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}

/* Auf schmalen Schirmen wandern die Plaketten unter den Namen, damit der
   Name nicht auf zwei Zeichen je Zeile zusammengequetscht wird. */
@media (max-width: 460px) {
  .doc-row { flex-wrap: wrap; }
  .doc-label { flex: 1 0 100%; }
  .chip { margin-left: 1.75rem; }
  .doc-row .info { margin-left: auto; }
}

.info-box {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  width: min(20rem, 68vw);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: #1e293b;
  color: #f1f5f9;
  font: 400 0.79rem/1.5 inherit;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 40;
  pointer-events: none;
}

/* Zeiger zum „i" hinunter */
.info-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #1e293b;
}

.info:hover .info-box,
.info:focus .info-box {
  opacity: 1;
  visibility: visible;
}

/* Auf schmalen Schirmen bleibt das Kaestchen sonst am Rand haengen. */
@media (max-width: 520px) {
  .info-box { left: 0; transform: none; width: min(20rem, 78vw); }
  .info-box::after { left: 0.45rem; margin-left: 0; }
}

/* Im Vorkauf-Fenster sitzt das „i" ganz rechts am Rand. Ein mittig
   ausgerichtetes Kaestchen ragte dort ueber den Fensterrand hinaus und wuerde
   vom scrollenden Hintergrund abgeschnitten. Deshalb hier rechtsbuendig. */
#intake-list .info-box {
  left: auto;
  right: -0.4rem;
  transform: none;
  width: min(22rem, 74vw);
}

#intake-list .info-box::after {
  left: auto;
  right: 0.55rem;
  margin-left: 0;
}


/* ════════════════════════════════════════════════════════════════════
   Startseite, Fassung 03.10.2026 (Marketing-Runde)
   Ziele: Unterschied zu einem Chat-Prompt sichtbar machen, Hinweise ans
   Ende, ruhigere Gestaltung mit einer Symbolsprache statt Emojis,
   Kontrast der Knöpfe nach WCAG AA, mobile Bestellleiste.
   Nur unter .landing — die Upload-Seite bleibt unverändert.
   ════════════════════════════════════════════════════════════════════ */
.landing { background: var(--white); }
.landing .wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.landing .wrap-schmal { max-width: 760px; }
.landing h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.2; letter-spacing: -0.6px; font-weight: 800; margin-bottom: 1rem; }
.landing h3 { font-weight: 700; }
.kicker { text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.78rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 0.6rem; }
.lead { font-size: 1.12rem; color: #334155; max-width: 760px; margin-bottom: 2.2rem; }
.klein { font-size: 0.82rem; color: var(--gray); }
.ico { width: 28px; height: 28px; fill: none; stroke: var(--teal-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-inline { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-left: 0.3rem; }

/* Navigation */
.topnav { position: sticky; top: 0; z-index: 50; padding: 0.8rem 2rem; }
.topnav .logo { color: var(--white); }
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { color: #cbd5e1; font-size: 0.92rem; text-decoration: none; }
.nav-links a:hover { color: var(--white); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.9rem; box-shadow: none; }
@media (max-width: 860px) { .nav-links a { display: none; } }
@media (max-width: 520px) {
  .topnav { padding: 0.7rem 1rem; }
  .nav-links .btn-sm { padding: 0.5rem 0.7rem; font-size: 0.8rem; }
  .landing .btn-lg { padding: 1rem 1rem; font-size: 1rem; }
  .landing .badge { font-size: 0.7rem; letter-spacing: 0.3px; }
}

/* Hero */
.hero-neu { text-align: left; padding: 4.5rem 1.5rem 0; background:
  radial-gradient(1100px 500px at 85% -10%, rgba(20,184,166,0.18), transparent 60%),
  linear-gradient(160deg, #0f172a 0%, #13284a 100%); }
.hero-inner { max-width: 1080px; margin: 0 auto; }
.hero-neu h1 { font-size: clamp(1.9rem, 4.2vw, 3.05rem); letter-spacing: -1.1px; max-width: 980px; }
.landing [id] { scroll-margin-top: 76px; }   /* Sprungziele nicht unter der festen Navigation */
.landing .btn { white-space: nowrap; }
.hero-neu h1 em { color: #5eead4; }
.hero-lead { font-size: 1.15rem; color: #cbd5e1; max-width: 680px; margin: 0 0 2rem !important; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { border-color: #5eead4; color: #5eead4; }
.hero-meta { margin-top: 1.1rem; color: #94a3b8; font-size: 0.88rem; }
.stats { max-width: 1080px; margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.12); }
.stat { padding: 1.6rem 1.2rem 2rem 0; }
.stat strong { display: block; font-size: 2.1rem; font-weight: 800; color: var(--white); letter-spacing: -1px; line-height: 1.1; }
.stat span { display: block; color: #94a3b8; font-size: 0.88rem; margin-top: 0.3rem; line-height: 1.4; }
@media (max-width: 760px) {
  .hero-neu { padding-top: 3rem; }
  .stats { grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
  .stat { padding: 1.2rem 0.8rem 1.2rem 0; }
  .stat strong { font-size: 1.7rem; }
  .hero-ctas .btn { width: 100%; text-align: center; }
}

/* Sektionen */
.sektion { padding: 5rem 0; background: var(--white); }
.sektion-hell { background: #f5f8fa; }

/* Vergleich Chat-Prompt / finovocation */
.vergleich { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 3rem; background: var(--white); }
.v-kopf, .v-zeile { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr; }
.v-kopf div { padding: 0.9rem 1.2rem; font-weight: 700; font-size: 0.92rem; background: #f1f5f9; color: var(--gray); }
.v-kopf .v-wir { background: var(--navy); color: #5eead4; }
.v-zeile div { padding: 1rem 1.2rem; border-top: 1px solid var(--border); font-size: 0.93rem; line-height: 1.5; }
.v-zeile [role=rowheader] { font-weight: 700; color: var(--navy); }
.v-zeile [role=cell]:not(.v-wir) { color: var(--gray); }
.v-zeile .v-wir { background: rgba(13,148,136,0.06); color: #0f172a; }
@media (max-width: 760px) {
  .v-kopf { display: none; }
  .v-zeile { grid-template-columns: 1fr; }
  .v-zeile div { border-top: none; padding: 0.35rem 1rem; }
  .v-zeile [role=rowheader] { padding-top: 1rem; border-top: 1px solid var(--border); }
  .v-zeile [role=cell]:not(.v-wir)::before { content: "Chat-Prompt: "; font-weight: 600; }
  .v-zeile .v-wir { margin: 0.3rem 0.6rem 1rem; border-radius: 8px; padding: 0.7rem 0.9rem; }
  .v-zeile .v-wir::before { content: "finovocation: "; font-weight: 700; color: var(--teal-dark); }
}

.saeulen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.saeule { border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; background: var(--white); }
.saeule h3 { font-size: 1.08rem; margin: 0.7rem 0 0.4rem; }
.saeule p { color: #475569; font-size: 0.95rem; }
@media (max-width: 760px) { .saeulen { grid-template-columns: 1fr; } }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.chips li { font-size: 0.78rem; font-weight: 600; padding: 0.28rem 0.6rem; border-radius: 999px; background: rgba(13,148,136,0.1); color: #115e59; }
.ehrlich { margin-top: 2rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--teal-dark); background: #f5f8fa; color: #334155; border-radius: 0 10px 10px 0; }

/* Bericht-Vorschau */
.bericht-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
.haken { list-style: none; margin: 1.2rem 0 1.8rem; }
.haken li { display: flex; gap: 0.7rem; padding: 0.45rem 0; color: #334155; font-size: 0.97rem; }
.haken svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--teal-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.haken-kompakt { text-align: left; margin: 1.4rem 0 1.6rem; }
.btn-outline { background: var(--white); color: var(--teal-dark); border: 1.5px solid var(--teal-dark); }
.btn-outline:hover { background: rgba(15,118,110,0.06); }
.vorschau { position: relative; display: block; height: 520px; }
.vorschau img { position: absolute; width: 66%; height: auto; border-radius: 6px; box-shadow: 0 18px 50px rgba(15,23,42,0.22); background: #fff; transition: transform 0.25s; }
.vorschau-hinten { right: 0; top: 0; transform: rotate(3deg); }
.vorschau-vorn { left: 0; top: 40px; z-index: 2; transform: rotate(-2deg); }
.vorschau:hover .vorschau-vorn { transform: rotate(-1deg) translateY(-6px); }
@media (max-width: 860px) {
  .bericht-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .vorschau { height: 380px; max-width: 440px; margin: 0 auto; width: 100%; }
}

/* Prüfbereiche */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.6rem; }
.karte { border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem; background: var(--white); }
.karte h3 { font-size: 1rem; margin: 0.6rem 0 0.3rem; }
.karte p { font-size: 0.9rem; color: var(--gray); }
.karte-akzent { border-color: var(--teal-dark); background: rgba(13,148,136,0.05); }
@media (max-width: 860px) { .karten { grid-template-columns: repeat(2, 1fr); } }
/* Mobil: Prüfbereiche als kompakte Kacheln — die Einzelheiten stehen im
   Vergleich und im Musterbericht, hier genügt die Übersicht. */
@media (max-width: 560px) {
  .karten { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .karte { padding: 0.9rem; }
  .karte p { display: none; }
  .karte h3 { font-size: 0.9rem; margin-top: 0.4rem; }
}

/* Ablauf */
.schritte { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 1.6rem; counter-reset: s; }
.schritte li { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem; }
.schritte .nr { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #5eead4; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 0.7rem; }
.schritte h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.schritte p { font-size: 0.9rem; color: var(--gray); }
@media (max-width: 860px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .schritte { grid-template-columns: 1fr; } }

/* Preis */
.price-card-neu { max-width: 520px; text-align: center; border: 2px solid var(--teal-dark); }
.price-card-neu h2 { font-size: 1.6rem; }

/* Fragen */
.landing details { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.landing details:first-of-type { border-top: 1px solid var(--border); margin-top: 1.4rem; }
.landing summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.landing summary::-webkit-details-marker { display: none; }
.landing summary::after { content: "+"; color: var(--teal-dark); font-size: 1.4rem; line-height: 1; }
.landing details[open] summary::after { content: "–"; }
.landing details p { margin-top: 0.7rem; color: #475569; font-size: 0.96rem; }
.landing details a, .disclaimer-neu a { color: var(--teal-dark); }

/* Abschluss */
.abschluss { background: linear-gradient(160deg, #0f172a 0%, #13284a 100%); color: var(--white); padding: 4.5rem 0; text-align: center; }
.abschluss h2 { color: var(--white); margin-bottom: 1.6rem; }
.abschluss .hero-ctas { justify-content: center; }

/* Hinweis am Ende */
.hinweis-sektion { padding: 2rem 1.5rem; background: var(--white); }
.disclaimer-neu { background: #f5f8fa; border: 1px solid var(--border); color: #475569; max-width: 860px; font-size: 0.82rem; }

/* Mobile Bestellleiste */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96);
    border-top: 1px solid var(--border); transform: translateY(110%); transition: transform 0.25s; }
  .sticky-cta.sichtbar { transform: translateY(0); }
  .sticky-cta .btn { width: 100%; }
  .landing footer { padding-bottom: 5.5rem; }
}