/* =====================================================================
   arteru – statische STRATO-Landingpage
   Design auf Basis der App (Login-Seite, Startseite, globals.css).
   Reines HTML/CSS. Keine externen Fonts, kein Tracking, keine Skripte.
   ===================================================================== */

:root {
  --bg: #ffffff;
  --ink-900: #111827;
  --ink-800: #1f2937;
  --ink-700: #374151;
  --ink-600: #4b5563;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;
  --line: rgba(15, 23, 42, 0.08);

  --gold: #ffd300;
  --purple: #9333ea;
  --purple-deep: #6d28d9;
  --violet: #8b5cf6;
  --blue: #3b82f6;
  --pink: #ec4899;
  --amber: #f59e0b;

  --radius-sm: 0.875rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 32px;

  --shadow-card: 0 8px 32px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 24px 55px -42px rgba(15, 23, 42, 0.38);
  --shadow-strong: 0 22px 60px rgba(15, 23, 42, 0.18),
    0 8px 30px rgba(15, 23, 42, 0.14);

  --maxw: 1120px;
  --font: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 640px) {
  html {
    font-size: 17px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink-800);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------
   KI-Wolken Hintergrund (aus globals.css übernommen)
   --------------------------------------------------------------------- */
.bg-clouds {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-clouds::before {
  content: "";
  position: absolute;
  top: 8%;
  right: 4%;
  width: 700px;
  height: 525px;
  background: radial-gradient(
      ellipse at 30% 30%,
      rgba(59, 130, 246, 0.30) 0%,
      rgba(139, 92, 246, 0.24) 20%,
      rgba(251, 191, 36, 0.12) 35%,
      rgba(236, 72, 153, 0.18) 50%,
      transparent 65%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      rgba(59, 130, 246, 0.22) 0%,
      rgba(139, 92, 246, 0.18) 30%,
      rgba(251, 191, 36, 0.10) 45%,
      transparent 70%
    );
  filter: blur(120px);
  transform: rotate(-15deg);
}

.bg-clouds::after {
  content: "";
  position: absolute;
  bottom: 4%;
  left: 2%;
  width: 450px;
  height: 350px;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(59, 130, 246, 0.22) 0%,
    rgba(139, 92, 246, 0.18) 30%,
    rgba(236, 72, 153, 0.14) 50%,
    transparent 70%
  );
  filter: blur(100px);
  transform: rotate(20deg);
}

@media (max-width: 1024px) {
  .bg-clouds::before {
    width: 500px;
    height: 375px;
    filter: blur(90px);
  }
  .bg-clouds::after {
    width: 350px;
    height: 280px;
    filter: blur(80px);
  }
}

@media (max-width: 768px) {
  .bg-clouds::before {
    width: 300px;
    height: 230px;
    filter: blur(60px);
  }
  .bg-clouds::after {
    width: 260px;
    height: 210px;
    filter: blur(60px);
  }
}

/* ---------------------------------------------------------------------
   Layout-Grundlagen
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Design-System-Regel: Kästen sitzen mobil bei exakt 16 px Randabstand. */
@media (max-width: 560px) {
  .container {
    padding: 0 1rem;
  }
}

.section {
  padding: 4.5rem 0;
}

@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }
}

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-500);
  margin: 0 0 0.75rem;
}

.section-title {
  font-size: 1.95rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink-800);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.34rem;
  }
}

.section-lead {
  font-size: 1.0625rem;
  color: var(--ink-600);
  max-width: 42rem;
  margin: 0;
}

/* Markenname bleibt auch in GROSSBUCHSTABEN-Labels klein geschrieben */
.lc {
  text-transform: lowercase;
}

.gradient-text {
  background: linear-gradient(90deg, var(--purple) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------------
   Buttons (glassmorphism-upload-btn aus der App)
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease-out;
}

.btn-glass {
  position: relative;
  overflow: hidden;
  color: #111111;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: 1rem 1.75rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 211, 0, 0.1);
}

.btn-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(255, 211, 0, 0.06) 0%,
    rgba(255, 211, 0, 0.02) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 211, 0, 0.2);
  transform: translateY(-3px) scale(1.02);
}

.btn-glass:hover::before {
  opacity: 1;
}

.btn-glass:active {
  transform: scale(0.98) translateY(0);
  transition: transform 0.1s ease-out;
}

.btn-glass .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 211, 0, 0.7);
}

.btn-ghost {
  color: var(--purple-deep);
  background: linear-gradient(
    135deg,
    rgba(147, 51, 234, 0.09) 0%,
    rgba(59, 130, 246, 0.07) 45%,
    rgba(236, 72, 153, 0.05) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.4rem;
  font-weight: 500;
}

.btn-ghost:hover {
  background: linear-gradient(
    135deg,
    rgba(147, 51, 234, 0.16) 0%,
    rgba(59, 130, 246, 0.13) 45%,
    rgba(236, 72, 153, 0.1) 100%
  );
  border-color: rgba(139, 92, 246, 0.38);
  color: #5b21b6;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.14);
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.brand img {
  height: 28px;
  width: auto;
  display: block;
  /* "Atmen" wie in der App: float 6s ease-in-out (translateY 0 → -10px → 0) */
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand img {
    animation: none;
  }
}

.brand-fallback {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.brand-tag {
  font-size: 0.6875rem;
  color: var(--ink-500);
}

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

.nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.nav .nav-cta {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: var(--purple-deep);
  background: rgba(147, 51, 234, 0.06);
}

@media (max-width: 720px) {
  .nav .nav-link {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 5rem 0 3.5rem;
}

/* Nutzt dieselbe Spaltenbreite wie der Vier-Schritte-Raster darunter. Ein
   schmalerer Hero über einem breiten Raster liest sich wie ein Fehler im
   Layout, nicht wie eine Betonung. Die Textbreiten werden stattdessen innen
   begrenzt, damit die Zeilen lesbar kurz bleiben. */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 3.5rem 2rem 3rem;
  background: radial-gradient(
    circle at 0% 0%,
    #ffffff 0%,
    #f8f4ff 42%,
    #fbe7d3 100%
  );
  box-shadow: var(--shadow-strong);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 80% 18%,
    rgba(233, 230, 255, 0.5) 0%,
    transparent 65%
  );
  filter: blur(18px);
}

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

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.hero-kicker .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 211, 0, 0.6);
}

/* Ruhige Headline wie in der App (.landing-display-headline):
   font-weight medium, gray-800, 1.95rem → 2.34rem, entspannte Zeilenhöhe. */
.hero h1 {
  font-size: 1.95rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-800);
  /* Zeilenlänge begrenzen, sonst läuft die Headline im breiten Kasten über die
     ganze Spalte und wird schwer zu lesen. */
  max-width: 38rem;
  margin: 0 auto 1rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 2.34rem;
  }
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--ink-600);
  max-width: 36rem;
  margin: 0 auto 2rem;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

/* Mobil gestapelt und auf gleicher Breite, sonst stehen die beiden CTAs
   unterschiedlich breit untereinander und wirken ausgefranst. */
@media (max-width: 560px) {
  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
  }
}

.hero-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.hero-note strong {
  color: var(--ink-800);
}

/* ---------------------------------------------------------------------
   Weiterführender Textlink als stille Glas-Pille
   Nutzt das vorhandene Pillen-Vokabular der Seite (Hero-Kicker, Chips,
   Nav-CTA), aber in Tinte statt in einer Signalfarbe: weiße Glasfläche,
   Haarlinienrand, echte Glaskante. So liest sich der Link als hochwertiges
   Element derselben Familie, ohne mit dem goldenen CTA zu konkurrieren.

   display bleibt inline-block, kein Flex: der Pfeil sitzt hinter einem
   geschützten Leerzeichen im Markup und hängt damit am letzten Wort. Eine
   frühere Flex-Fassung ließ den Pfeil bei Zeilenumbruch allein in der Zeile
   stehen. Deshalb keine Konstruktion, die Text und Pfeil trennen kann.
   --------------------------------------------------------------------- */
.text-link {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03);
  color: var(--ink-700);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.25s ease-out, border-color 0.25s ease-out,
    background 0.25s ease-out, box-shadow 0.25s ease-out,
    transform 0.25s ease-out;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--ink-900);
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px -20px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .text-link:hover,
  .text-link:focus-visible {
    transform: none;
  }
}

.text-link .arrow {
  color: var(--ink-400);
  transition: color 0.25s ease-out;
}

.text-link:hover .arrow,
.text-link:focus-visible .arrow {
  color: var(--ink-600);
}

/* ---------------------------------------------------------------------
   Einwand-Karte zwischen Hero und Ablauf

   Zwei Fassungen davor scheiterten am selben Fehler: Der Einwand trat mit
   Eyebrow und `.section-title` als gleichwertiger Abschnitt gegen „Der Ablauf"
   an. Zwei gleich große Überschriften direkt untereinander machen den
   Seitenanfang unruhig, egal wie viel Luft oder wie viele Trennlinien
   dazwischen liegen. Der Einwand ist aber ein Einschub, kein Kapitel.

   Deshalb eine eigene Karte: eigenes Objekt statt eigener Abschnitt. Die
   Überschrift bleibt ein `<h2>` (die real gesuchte Frage soll als Überschrift
   im HTML stehen), wird aber auf Karten-Titelgröße gesetzt und tritt damit
   sichtbar hinter die Abschnittsüberschriften zurück.

   Fläche in leichtem Schiefergrau statt Weiß, damit der weiße Glas-Pillen-Link
   darauf als eigenes Element ablesbar bleibt. Kein Farbakzent: die Karte soll
   ruhig wirken, nicht als Hinweiskasten.
   --------------------------------------------------------------------- */
.section-objection {
  /* Ohne eigenes Padding: der Hero bringt oben 3,5 rem mit, der Ablauf unten
     4,5 rem. Die Karte sitzt damit sauber zwischen beiden Abschnitten. */
  padding: 0;
}

.objection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(248, 250, 252, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 1.75rem 2rem;
  box-shadow: 0 18px 44px -38px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(15, 23, 42, 0.02);
}

.objection-text {
  max-width: 42rem;
}

.objection-card .k {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-500);
  margin: 0 0 0.5rem;
}

/* Bewusst Kartengröße, nicht .section-title: semantisch H2, optisch Einschub. */
.objection-card h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.5rem;
}

.objection-card > .objection-text p:last-child {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-600);
  margin: 0;
}

/* Der Link ist das einzige Element der rechten Seite und darf weder
   schrumpfen noch umbrechen. */
.objection-card > .text-link {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .objection-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    padding: 1.5rem 1.35rem;
  }
}

/* ---------------------------------------------------------------------
   Glass-Cards (Produktbereich / How it works)
   --------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.glass-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 1.75rem;
  background: linear-gradient(
    135deg,
    rgba(147, 51, 234, 0.05),
    rgba(59, 130, 246, 0.05),
    rgba(236, 72, 153, 0.03)
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s ease-out, box-shadow 0.35s ease-out;
}

.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.12),
    0 0 40px rgba(59, 130, 246, 0.08), 0 14px 40px rgba(15, 23, 42, 0.12);
}

.glass-card .ic {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: linear-gradient(
    135deg,
    rgba(255, 211, 0, 0.14),
    rgba(139, 92, 246, 0.12),
    rgba(59, 130, 246, 0.1)
  );
  color: var(--purple-deep);
}

.glass-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 0.4rem;
}

.glass-card p {
  font-size: 0.95rem;
  color: var(--ink-600);
  margin: 0;
}

/* ---------------------------------------------------------------------
   Beispielblock – Fallstudie (aus der App-Startseite)
   --------------------------------------------------------------------- */
.example-wrap {
  position: relative;
}

.example-glow {
  position: absolute;
  inset: auto 2rem 0;
  height: 6rem;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(168, 85, 247, 0.1),
    rgba(59, 130, 246, 0.06),
    rgba(236, 72, 153, 0.05),
    transparent 72%
  );
  filter: blur(48px);
}

.case-card {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.75rem;
  box-shadow: 0 28px 70px -48px rgba(15, 23, 42, 0.34);
}

@media (min-width: 768px) {
  .case-card {
    padding: 1.75rem 1.75rem;
  }
}

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.case-head .label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-500);
  margin: 0;
}

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.pill-neutral {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.pill-amber {
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.pill-white {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.8);
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 174px) minmax(0, 1fr) minmax(0, 174px);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .case-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.case-step {
  width: 100%;
  max-width: 174px;
  margin-inline: auto;
}

.case-step .step-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
  line-height: 1.3;
  /* Zwei Zeilen reservieren, damit 01- und 03-Bild auf gleicher Höhe stehen
     (Label "03 Sichtbares Update" bricht um, "01 Ausgangslage" nicht). */
  min-height: 2.6em;
  margin: 0 0 0.75rem;
}

.art-frame {
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98),
    rgba(240, 232, 220, 0.9)
  );
  box-shadow: 0 26px 54px -34px rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.art-frame.after {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98),
    rgba(239, 233, 243, 0.88)
  );
}

.art-inner {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: #f6f2ea;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 23, 42, 0.05);
}

.art-inner.after {
  background: #f7f2f8;
}

.art-img {
  position: relative;
  /* Entspricht exakt dem Seitenverhältnis der Beispieldateien (500×667),
     damit kein Letterboxing entsteht und kein Layout-Shift auftritt. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #efe7da, #e7e0ee);
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.art-img .ph {
  position: absolute;
  font-size: 0.75rem;
  color: var(--ink-500);
  text-align: center;
  padding: 0 0.75rem;
}

.case-caption {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0.75rem 0.25rem 0;
}

.case-center {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.96),
    rgba(248, 244, 238, 0.98) 46%,
    rgba(241, 246, 255, 0.92)
  );
  padding: 1.5rem;
  box-shadow: 0 24px 54px -40px rgba(15, 23, 42, 0.28);
}

.case-center::before {
  content: "";
  position: absolute;
  inset: 0 2.5rem auto;
  height: 4rem;
  background: radial-gradient(
    circle at top,
    rgba(251, 191, 36, 0.16),
    transparent 72%
  );
  filter: blur(32px);
}

.case-center > * {
  position: relative;
}

.case-center .step-label {
  color: #64748b;
}

.case-center h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #0f172a;
  margin: 0.75rem 0 0;
}

.case-center .sub {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
  margin: 1rem 0 0;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.case-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

@media (max-width: 700px) {
  .case-foot {
    grid-template-columns: 1fr;
  }
}

.foot-cell {
  border-radius: var(--radius);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(248, 250, 252, 0.8);
  padding: 0.9rem 1rem;
}

.foot-cell .k {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #64748b;
  margin: 0;
}

.foot-cell .v {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
  margin: 0.35rem 0 0;
}

/* ---------------------------------------------------------------------
   Preise (nur eine Session)
   --------------------------------------------------------------------- */
.price-wrap {
  display: flex;
  justify-content: center;
}

.price-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 30rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: radial-gradient(
    circle at 0% 0%,
    #ffffff 0%,
    #f8f4ff 45%,
    #fbe7d3 100%
  );
  box-shadow: var(--shadow-strong);
  padding: 2.25rem;
  text-align: center;
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 82% 12%,
    rgba(233, 230, 255, 0.5) 0%,
    transparent 60%
  );
  filter: blur(18px);
}

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

.price-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #92400e;
  background: rgba(255, 211, 0, 0.16);
  border: 1px solid rgba(255, 211, 0, 0.4);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.price-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 0.25rem;
}

.price-amount {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1.1;
  margin: 0.5rem 0 0.25rem;
}

.price-amount span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-500);
}

.price-desc {
  font-size: 0.95rem;
  color: var(--ink-600);
  max-width: 22rem;
  margin: 0.5rem auto 1.5rem;
}

.price-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 0.6rem;
}

.price-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.price-list li svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--purple);
}

.price-foot {
  font-size: 0.8rem;
  color: var(--ink-500);
  margin: 1rem 0 0;
}

/* ---------------------------------------------------------------------
   Abgrenzung als Gegenüberstellung
   Eine Karte, zwei Spalten, dazwischen nur eine Haarlinie. Zwei getrennte
   Boxen würden wie Vorteil gegen Nachteil wirken; hier gehört beides zusammen.
   --------------------------------------------------------------------- */
.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 58rem;
  margin: 2.5rem auto 0;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px -50px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.contrast-col {
  padding: 2rem 2rem 2.1rem;
}

.contrast-col + .contrast-col {
  border-left: 1px solid rgba(15, 23, 42, 0.07);
}

@media (max-width: 760px) {
  .contrast {
    grid-template-columns: 1fr;
  }
  .contrast-col {
    padding: 1.5rem 1.35rem;
  }
  .contrast-col + .contrast-col {
    border-left: none;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
  }
}

.contrast-col h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 1.4rem;
}

/* Der Marker in der Überschrift ist nur Wiederholung, dort stört er. */
.contrast-col h3 .mark {
  display: none;
}

.contrast-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.contrast-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.contrast-col.muted li {
  color: var(--ink-600);
}

.mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: 999px;
}

.mark.yes {
  color: var(--purple-deep);
  background: rgba(139, 92, 246, 0.13);
}

.mark.no {
  color: var(--ink-500);
  background: rgba(15, 23, 42, 0.06);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  padding: 2.5rem 0;
  margin-top: 2rem;
}

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

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.footer-nav a {
  color: var(--ink-600);
  text-decoration: none;
  text-underline-offset: 2px;
}

.footer-nav a:hover {
  color: var(--ink-900);
  text-decoration: underline;
}

.footer-nav .sep {
  color: var(--ink-400);
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--ink-500);
}

/* ---------------------------------------------------------------------
   Rechtsseiten (Legal Shell)
   --------------------------------------------------------------------- */
.legal {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 0 2rem;
}

.legal h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

.legal .meta {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin: 0 0 2rem;
}

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

.legal h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 0.6rem;
}

.legal p {
  font-size: 0.98rem;
  color: var(--ink-700);
  margin: 0 0 0.7rem;
}

.legal ul {
  margin: 0 0 0.7rem;
  padding-left: 1.25rem;
}

.legal li {
  font-size: 0.98rem;
  color: var(--ink-700);
  margin-bottom: 0.3rem;
}

.legal a {
  color: var(--purple-deep);
  text-underline-offset: 2px;
}

.legal .placeholder {
  background: rgba(255, 211, 0, 0.14);
  border: 1px dashed rgba(245, 158, 11, 0.5);
  border-radius: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-style: normal;
  color: #92400e;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-600);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.back-link:hover {
  color: var(--ink-900);
}

/* Sichtbarer Fokus für Tastaturnavigation */
a:focus-visible,
.btn:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(255, 211, 0, 0.35);
  color: var(--ink-900);
}

/* Satzbild: keine einzelnen Wörter in der letzten Zeile von Überschriften. */
h1,
h2,
h3,
.section-title,
.hero h1,
.cta-band h2 {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* Zahlen in gleicher Breite, damit Preise sauber untereinander stehen. */
.price-amount,
.step .num {
  font-variant-numeric: tabular-nums;
}

/* Glaskanten: 1px Innenlinie plus feiner Innenschatten simulieren die
   Lichtbrechung an einer echten Glaskante. Ohne das wirkt backdrop-filter flach. */
.glass-card,
.step,
.btn-glass,
.mobile-nav-panel {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03);
}

.btn-glass {
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.btn-glass:hover {
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 23, 42, 0.05);
}

/* =====================================================================
   Erweiterung 30.07.2026: Informationsarchitektur, Vertrauen, Mobile-Nav
   Gleiches Farb- und Formvokabular wie oben (App-Look, hell, Gold-Akzent).
   ===================================================================== */

/* --- Skip-Link ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink-900);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: top 0.2s ease-out;
}

.skip-link:focus {
  top: 0.75rem;
}

/* --- Kopfbereich: Navigation inkl. Mobile ---------------------------- */
.nav .nav-link[aria-current='page'] {
  color: var(--ink-900);
  font-weight: 600;
}

.nav-toggle {
  display: none;
}

/* <details>-basiertes Menü: funktioniert ohne JavaScript. */
.mobile-nav {
  display: none;
}

.mobile-nav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: rgba(147, 51, 234, 0.06);
  color: var(--purple-deep);
  font-size: 0.85rem;
  font-weight: 600;
}

.mobile-nav > summary::-webkit-details-marker {
  display: none;
}

.mobile-nav > summary .bars {
  display: grid;
  gap: 3px;
}

.mobile-nav > summary .bars span {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.mobile-nav[open] > summary {
  background: rgba(147, 51, 234, 0.12);
}

.mobile-nav-panel {
  position: absolute;
  right: 1.25rem;
  left: 1.25rem;
  top: calc(100% + 0.5rem);
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-strong);
}

.mobile-nav-panel a {
  display: block;
  padding: 0.7rem 0.75rem;
  border-radius: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
  background: rgba(147, 51, 234, 0.07);
  color: var(--ink-900);
}

.mobile-nav-panel .divider {
  height: 1px;
  margin: 0.35rem 0.25rem;
  background: var(--line);
}

@media (max-width: 860px) {
  .nav .nav-link {
    display: none;
  }
  .mobile-nav {
    display: block;
  }
  .site-header .container {
    position: relative;
  }
}

@media (max-width: 420px) {
  .nav .nav-cta {
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }
}

/* --- Sprachumschalter DE/EN ------------------------------------------
   Bewusst kein Button und keine Fahne: ein ruhiges Kürzel mit feinem Rahmen.
   Bleibt anders als .nav-link auch mobil sichtbar, weil die Sprachwahl sonst
   erst nach dem Öffnen des Menüs erreichbar wäre. */
.nav .lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 1.9rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-600);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.nav .lang-switch:hover,
.nav .lang-switch:focus-visible {
  color: var(--ink-900);
  border-color: rgba(139, 92, 246, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 420px) {
  .nav {
    gap: 0.5rem;
  }
  .nav .lang-switch {
    min-width: 2.2rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.74rem;
  }
  /* Logo und Sprachkürzel stoßen sonst auf schmalen Geräten direkt aneinander:
     .brand liegt außerhalb von .nav, der nav-Gap greift dort nicht. */
  .site-header .container {
    gap: 0.6rem;
  }
}

/* Sprachhinweis im Footer, eine Zeile über der Copyright-Leiste */
.footer-lang {
  font-size: 0.9rem;
  color: var(--ink-600);
  margin: 0 0 1rem;
}

.footer-lang a {
  color: var(--purple-deep);
  text-underline-offset: 2px;
}

/* --- Vertrauens-Chips ------------------------------------------------ */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-600);
  white-space: nowrap;
}

.chip svg {
  flex-shrink: 0;
  color: var(--purple);
}

/* --- Ablauf in Schritten --------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  /* Ohne Reset erbt <ol> die UA-Einrückung und die Karten stehen versetzt. */
  list-style: none;
  padding: 0;
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  position: relative;
  /* Spalte, damit das Meta-Label unabhängig von der Textlänge
     bei allen vier Karten auf derselben Höhe sitzt. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 1.5rem 1.35rem 1.35rem;
  box-shadow: var(--shadow-card);
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  /* Neutral statt Gold: vier gelbe Kreise nebeneinander ziehen mehr Blick auf
     sich als die Schritte selbst. Der Goldakzent bleibt dem CTA vorbehalten. */
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink-700);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.4rem;
}

.step p {
  font-size: 0.92rem;
  color: var(--ink-600);
  margin: 0;
}

.step .meta {
  display: block;
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* --- Zielgruppen ----------------------------------------------------- */
.audience {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
}

@media (max-width: 860px) {
  .audience {
    grid-template-columns: 1fr;
  }
}

.audience article {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  padding: 1.5rem;
}

.audience h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.45rem;
}

.audience p {
  font-size: 0.92rem;
  color: var(--ink-600);
  margin: 0;
}

.audience .who {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 0.6rem;
}

/* --- FAQ (details/summary, ohne JavaScript) --------------------------- */
.faq {
  max-width: 48rem;
  margin: 2.25rem auto 0;
  display: grid;
  gap: 0.75rem;
}

.faq details {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.faq details[open] {
  border-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.4);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
}

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

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.4rem;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: rotate(45deg);
  transition: transform 0.25s ease-out;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq .answer {
  padding: 0 1.25rem 1.25rem;
}

.faq .answer p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-600);
  margin: 0 0 0.7rem;
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

.faq .answer a {
  color: var(--purple-deep);
  text-underline-offset: 2px;
}

/* --- Abschluss-CTA --------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  max-width: 56rem;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  text-align: center;
  background: radial-gradient(
    circle at 0% 0%,
    #ffffff 0%,
    #f8f4ff 45%,
    #fbe7d3 100%
  );
  box-shadow: var(--shadow-strong);
}

.cta-band > * {
  position: relative;
}

.cta-band h2 {
  font-size: 1.6rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-800);
  margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
  .cta-band h2 {
    font-size: 1.9rem;
  }
}

.cta-band p {
  font-size: 1.02rem;
  color: var(--ink-600);
  max-width: 34rem;
  margin: 0 auto 1.75rem;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

/* --- Vertrauensblock ------------------------------------------------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

.trust-grid article {
  display: flex;
  gap: 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  padding: 1.25rem;
}

.trust-grid .tic {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: linear-gradient(
    135deg,
    rgba(255, 211, 0, 0.16),
    rgba(139, 92, 246, 0.13)
  );
  color: var(--purple-deep);
}

.trust-grid h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.25rem;
}

.trust-grid p {
  font-size: 0.9rem;
  color: var(--ink-600);
  margin: 0;
}

/* --- Inhaltsseiten (Prosa) ------------------------------------------- */
.page-head {
  padding: 3.25rem 0 0.5rem;
}

.page-head h1 {
  font-size: 1.95rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink-800);
  margin: 0.5rem 0 1rem;
  max-width: 40rem;
}

@media (min-width: 768px) {
  .page-head h1 {
    font-size: 2.34rem;
  }
}

.page-head .lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 44rem;
  margin: 0;
}

.breadcrumb {
  font-size: 0.8rem;
  color: var(--ink-500);
  margin: 0;
}

.breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
  text-underline-offset: 2px;
}

.breadcrumb a:hover {
  color: var(--ink-800);
  text-decoration: underline;
}

.breadcrumb .sep {
  margin: 0 0.4rem;
  color: var(--ink-400);
}

.prose {
  max-width: 44rem;
}

.prose h2 {
  font-size: 1.45rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink-800);
  margin: 2.75rem 0 0.85rem;
  letter-spacing: -0.005em;
}

.prose h3 {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 1.85rem 0 0.5rem;
}

.prose p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 1rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
}

.prose li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin-bottom: 0.5rem;
}

.prose a {
  color: var(--purple-deep);
  text-underline-offset: 2px;
}

.prose strong {
  color: var(--ink-900);
  font-weight: 600;
}

.prose > *:first-child {
  margin-top: 0;
}

/* Hervorgehobener Absatz.
   Bewusst ohne Farbfläche: eine feine Randlinie und ein ruhiges Label reichen,
   sonst wirkt der Block wie ein Warnhinweis statt wie eine Auszeichnung. */
.callout {
  position: relative;
  margin: 2rem 0;
  padding: 0.1rem 0 0.1rem 1.6rem;
  border-left: 1px solid rgba(15, 23, 42, 0.14);
}

.callout p {
  margin: 0 0 0.7rem;
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--ink-700);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout .k {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.65rem;
}

/* Variante für die zentrale Kernaussage einer Seite: etwas mehr Gewicht,
   markiert durch einen goldenen Punkt an der Linie statt durch eine Fläche. */
.callout.gold {
  border-left-color: rgba(255, 211, 0, 0.85);
}

.callout.gold::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}

.callout.gold p {
  font-size: 1.1rem;
  color: var(--ink-800);
}

.callout.gold .k {
  color: var(--ink-500);
}

/* Definitionsliste für „Begriff → Bedeutung“ (gut für KI-Auslesbarkeit) */
.deflist {
  margin: 1.5rem 0;
  display: grid;
  gap: 0.9rem;
}

.deflist > div {
  border-left: 2px solid rgba(139, 92, 246, 0.28);
  padding-left: 1rem;
}

.deflist dt {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.2rem;
}

.deflist dd {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-600);
  margin: 0;
}

/* Tabelle */
.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 30rem;
}

.table-wrap th,
.table-wrap td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
  vertical-align: top;
}

.table-wrap th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: rgba(248, 250, 252, 0.7);
}

.table-wrap tr:last-child td {
  border-bottom: none;
}

/* Weiterführende Links am Seitenende */
.next-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.75rem;
}

@media (max-width: 700px) {
  .next-links {
    grid-template-columns: 1fr;
  }
}

.next-links a {
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out,
    border-color 0.25s ease-out;
}

.next-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 12px 32px -24px rgba(15, 23, 42, 0.5);
}

.next-links .k {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.35rem;
}

.next-links .t {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.2rem;
}

.next-links .d {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-600);
}

/* --- Preisvergleich (Free vs. Pay-per) -------------------------------- */
.price-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 820px) {
  .price-duo {
    grid-template-columns: 1fr;
  }
}

.price-card.plain {
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  max-width: none;
}

.price-card.plain::before {
  display: none;
}

/* Beide Karten sind unterschiedlich lang. Ohne Flex-Verteilung stünden die
   Buttons auf verschiedenen Höhen, was den Vergleich optisch zerreißt. */
.price-duo .price-card {
  max-width: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.price-duo {
  align-items: stretch;
}

.price-duo .price-list {
  flex: 1 1 auto;
}

.price-duo .price-desc {
  min-height: 3.6rem;
}

/* Zwei Zeilen reservieren, damit beide CTA-Buttons auf einer Linie sitzen. */
.price-duo .price-foot {
  min-height: 2.6rem;
}

@media (max-width: 820px) {
  .price-duo .price-desc,
  .price-duo .price-foot {
    min-height: 0;
  }
}

/* --- Footer erweitert ------------------------------------------------- */
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 760px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
  .footer-cols .about {
    grid-column: 1 / -1;
  }
}

.footer-cols .about p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0.75rem 0 0;
  max-width: 22rem;
}

.footer-cols h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 0.85rem;
}

.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

/* Mindestens 24 px hohe Klickfläche (WCAG 2.5.8). */
.footer-cols a {
  display: inline-block;
  padding: 0.22rem 0;
  font-size: 0.92rem;
  color: var(--ink-600);
  text-decoration: none;
  text-underline-offset: 2px;
}

.footer-cols a:hover {
  color: var(--ink-900);
  text-decoration: underline;
}

/* --- Kleinteiliges ---------------------------------------------------- */
.center {
  text-align: center;
}

.lead-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-alt {
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.updated {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin-top: 2.5rem;
}

@media print {
  .site-header,
  .bg-clouds,
  .cta-band,
  .mobile-nav,
  .skip-link {
    display: none !important;
  }
  body {
    color: #000;
  }
}