/* =========================================================================
   Schrader Automation - Stylesheet
   Plain CSS, kein Build. Typo-Handschrift an Schrader Media angelehnt:
   eine Schrift (Inter), grosse Versal-Headlines (900), weit gesperrte Kicker.
   Farben aus dem Briefing (Teil 3.2, fest).
   ========================================================================= */

/* ---- Schriften (selbst gehostet, keine Verbindung zu Google) -------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../fonts/inter-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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-italic-latin.woff2) format("woff2"); }

/* ---- Tokens ---------------------------------------------------------- */
:root {
  --navy-900: #0A0F2C;
  --navy-800: #111838;
  --navy-700: #1B2450;
  --violet-500: #7956FF;
  --violet-text: #5B3FE0;   /* kleine violette Schrift auf Hell, Kontrast AA */
  --violet-400: #9D86FF;
  --violet-100: #EEE9FF;
  --white: #FFFFFF;
  --offwhite: #F6F6FA;
  --ink: #0A0F2C;
  --ink-muted: #5A6080;
  --text-on-dark: #F2F3FA;
  --text-on-dark-muted: #A8AECB;
  --success: #2FBF71;

  --maxw: 1120px;
  --readw: 60ch;
  --radius: 8px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

/* Grosse Versal-Headlines (Schrader-Media-Stil) */
h1, h2 {
  font-family: var(--font);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 0.35em;
}
h1 { font-size: clamp(2.4rem, 8vw, 5rem); }
h2 { font-size: clamp(1.9rem, 5vw, 3.25rem); }
h3 {
  font-family: var(--font);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.4em;
}

@media (min-width: 800px) { body { font-size: 18px; } }

/* ---- Kicker (weit gesperrtes Mini-Label) ---------------------------- */
.kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin: 0 0 18px;
  display: block;
}
.bg-navy .kicker { color: var(--text-on-dark-muted); }
.kicker .n { color: var(--violet-500); }

/* ---- Layout helpers -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section .lead { max-width: var(--readw); font-size: 17px; }
@media (min-width: 800px) { .section { padding: 104px 0; } }

.bg-white { background: var(--white); color: var(--ink); }
.bg-offwhite { background: var(--offwhite); color: var(--ink); }
.bg-navy { background: var(--navy-900); color: var(--text-on-dark); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--text-on-dark); }
.bg-navy p { color: var(--text-on-dark-muted); }

.accent { color: var(--violet-500); }

/* ---- Dot grid on navy sections -------------------------------------- */
.dotgrid { position: relative; overflow: hidden; }
.dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}
.dotgrid > * { position: relative; z-index: 1; }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet-500); color: var(--white); }
.btn-primary:hover { background: var(--violet-400); }
.btn-secondary { background: transparent; color: inherit; border-color: currentColor; }
.bg-navy .btn-secondary { border-color: var(--navy-700); color: var(--text-on-dark); }
.bg-navy .btn-secondary:hover { border-color: var(--violet-400); }
.btn-secondary:hover { border-color: var(--violet-500); color: var(--violet-500); }

/* ---- Navigation ------------------------------------------------------ */
/* Schwebende Menueleiste: freistehender, abgerundeter Kasten ueber der Hero. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  padding: 14px 16px 0;
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding: 0 14px 0 20px;
  background: rgba(17,24,56,0.72);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 34px -14px rgba(0,0,0,0.55);
}
/* Unterseiten (main mit .section) muessen unter die fixe Navi ruecken. */
main.section { padding-top: 110px; }
.nav .brand {
  font-family: var(--font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
}
.nav .brand img { height: 42px; width: auto; display: block; }
.nav-links { display: none; gap: 28px; }
.nav-links a {
  color: var(--text-on-dark-muted);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.nav-links a:hover { color: var(--text-on-dark); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 12px; }
@media (min-width: 900px) { .nav-links { display: flex; } }
/* Mobiler Hamburger + Overlay-Menue */
.nav-burger {
  display: none; width: 42px; height: 42px; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--navy-700); background: rgba(255,255,255,0.05); border-radius: 10px;
}
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-on-dark); transition: transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
  .nav-burger { display: flex; }
  .nav .wrap > .btn { display: none; }
}
.mobilemenu {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8,12,30,0.97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}
.mobilemenu[hidden] { display: none; }
.mobilemenu nav { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.mobilemenu a {
  color: var(--text-on-dark); font-family: var(--font); font-weight: 800;
  font-size: clamp(26px, 8vw, 34px); text-transform: uppercase; letter-spacing: -0.01em; padding: 12px 20px;
}
.mobilemenu a:hover { color: var(--violet-400); }

/* ---- Hero (minimal, eine Aussage, viel Luft) ------------------------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 88px 0 96px; }
/* Vollbild-Hintergrundvideo (HLS/Mux), Text bleibt darueber lesbar. */
/* Video-Hintergrund: drei Kacheln uebereinander, abwechselnd gespiegelt,
   damit jede Kachel nahe der nativen Aufloesung bleibt (kein Hochzoomen). */
.mediabg { position: relative; overflow: hidden; }
.mediabg-video { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; }
.mediabg-video .hero-video {
  flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover;
  display: block; pointer-events: none;
  /* Volle Aufloesung, kein Blur. Die Naehte deckt der Scrim an 33%/66% ab. */
}
.mediabg-video .hero-video.flip { transform: scaleY(-1); }
/* Scrim mit kraeftigen dunklen Baendern genau an den Nahtstellen (33% / 66%). */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10,15,44,0.45) 0%,
      rgba(10,15,44,0.52) 24%,
      rgba(10,15,44,0.88) 33.33%,
      rgba(10,15,44,0.52) 43%,
      rgba(10,15,44,0.52) 57%,
      rgba(10,15,44,0.88) 66.66%,
      rgba(10,15,44,0.58) 76%,
      rgba(10,15,44,0.82) 100%);
}
.mediabg > section { position: relative; z-index: 2; background: transparent; }
.mediabg .trust li { color: var(--text-on-dark); }
/* Trust als durchgehende, deckende Bande ueber der Video-Naht. */
.mediabg .trust {
  background: rgba(11,16,38,0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--navy-700);
  border-bottom: 1px solid var(--navy-700);
  padding: 32px 0;
}
/* Gleiche Breite wie .wrap (und die Navi), damit die linke Kante
   mit der Wortmarke "Schrader Automation" fluchtet. */
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); }
.hero .hero-title {
  font-family: var(--font); text-transform: uppercase; font-weight: 900; line-height: 0.95;
  letter-spacing: -0.02em; font-size: clamp(2.4rem, 8vw, 5rem); color: var(--text-on-dark); margin: 0 0 26px;
}
.hero .subline { font-size: 19px; max-width: 46ch; color: var(--text-on-dark-muted); }
.hero-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.hero-cta .btn { width: 100%; }
@media (min-width: 520px) {
  .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero-cta .btn { width: auto; }
}
@media (min-width: 900px) {
  /* Desktop: hohe Hero, Inhalt vertikal mittig (justify-center aus Basis). */
  .hero { min-height: 87vh; padding: 110px 0 90px; }
}
/* Mobile Feinschliff: schlankere Navi, mehr Luft in der Hero,
   "Websitedesign &" passt in eine Zeile. */
@media (max-width: 600px) {
  .nav { padding: 10px 14px 0; }
  .nav .wrap { height: 50px; padding: 0 10px 0 14px; border-radius: 14px; }
  .nav .brand img { height: 30px; }
  .nav .btn { min-height: 34px; padding: 0 14px; font-size: 11px; }
  .hero { padding: 116px 0 96px; }
  .hero .hero-title { font-size: clamp(1.8rem, 8.5vw, 2.6rem); margin-bottom: 18px; overflow-wrap: break-word; }
  .hero .subline { font-size: 15px; }
  /* Proportionen an die kleine Navi angleichen. */
  h2 { font-size: clamp(1.45rem, 6.2vw, 2rem); }
  .btn { min-height: 46px; font-size: 13px; padding: 0 20px; }
  .stickybar .btn { min-height: 46px; }
  .feature-card h3 { font-size: 19px; }
  .section .lead { font-size: 16px; }
}

/* Anruf-Protokoll Karte */
.call-card { background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: 14px; padding: 22px; }
.call-card .cc-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-on-dark-muted);
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--navy-700);
}
.call-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.call-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; }
.call-card dt { color: var(--text-on-dark-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.call-card dd { margin: 0; color: var(--text-on-dark); font-size: 15px; }
.call-card .cc-note { margin: 16px 0 0; font-size: 12px; color: var(--text-on-dark-muted); }

/* ---- Vertrauensleiste ------------------------------------------------ */
.trust { padding: 26px 0; }
.trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.trust li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.check { color: var(--success); flex: none; margin-top: 1px; }
@media (min-width: 800px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }

/* ---- Steps (grosse Nummern) ----------------------------------------- */
.steps { display: grid; gap: 0; margin-top: 44px; }
.step {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 28px 0; border-top: 1px solid #E7E7F0;
}
.step .num {
  font-weight: 900; line-height: 0.85; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  flex: none; width: 1.6em;
  /* Glas-Effekt wie die Preispläne-Überschrift */
  color: transparent;
  background: linear-gradient(174deg, #efeaff 0%, #b6a4ff 40%, #8a6bff 51%, #cbbdff 66%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.9))
    drop-shadow(0 3px 4px rgba(124,92,255,0.5))
    drop-shadow(0 10px 18px rgba(124,92,255,0.25));
}
.step .step-body { padding-top: 6px; }
.step p { margin: 0; color: var(--ink-muted); font-size: 15px; max-width: 46ch; }
@media (min-width: 800px) { .step { gap: 40px; } }

/* ---- Cards (Leistungen) ---------------------------------------------- */
.two-cards { display: grid; gap: 20px; margin-top: 44px; align-items: start; }
.feature-card { background: var(--white); border: 1px solid #E7E7F0; border-radius: 16px; padding: 28px; }
.feature-card .kicker { color: var(--violet-500); }
.feature-card .promise { font-size: 15px; color: var(--ink-muted); margin: 0 0 18px; max-width: 42ch; }
.feature-list { margin-top: 0; display: grid; gap: 11px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.combo-note { margin-top: 26px; font-size: 14px; color: var(--ink-muted); max-width: var(--readw); }
@media (min-width: 800px) { .two-cards { grid-template-columns: 1fr 1fr; } }

/* ---- USP tiles ------------------------------------------------------- */
.tiles { display: grid; gap: 16px; margin-top: 44px; }
.tile { background: var(--white); border: 1px solid #E7E7F0; border-radius: 14px; padding: 24px; }
.tile h3 { margin-bottom: 8px; text-transform: none; }
.tile p { margin: 0; color: var(--ink-muted); font-size: 14px; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.callout {
  margin-top: 26px; background: var(--violet-100); border-radius: 14px;
  padding: 22px 26px; color: var(--ink); font-size: 15px;
}
.callout strong { font-weight: 800; }

/* ---- ROI calculator -------------------------------------------------- */
.roi-card {
  background: var(--navy-800); border: 1px solid var(--navy-700); border-radius: 16px;
  padding: 28px; margin-top: 40px; display: grid; gap: 28px;
}
.roi-inputs { display: grid; gap: 20px; }
.roi-field label {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-on-dark-muted); margin-bottom: 8px;
}
.roi-field input[type="number"] {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--navy-700); background: var(--navy-900); color: var(--text-on-dark);
  font-family: var(--font); font-size: 17px;
}
.roi-field input:focus { outline: 2px solid var(--violet-500); outline-offset: 1px; }
.roi-result { border-top: 1px solid var(--navy-700); padding-top: 24px; }
.roi-result .rlabel {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-on-dark-muted); margin: 0 0 8px;
}
.roi-result .rvalue {
  font-weight: 900; font-size: clamp(2.4rem, 7vw, 3.4rem); color: var(--violet-400);
  line-height: 1; letter-spacing: -0.02em;
}
.roi-result .rnote { margin: 16px 0 0; font-size: 14px; color: var(--text-on-dark-muted); }
.roi-foot { font-size: 12px; color: var(--text-on-dark-muted); margin: 0; }
@media (min-width: 720px) {
  .roi-card { grid-template-columns: 1fr 1fr; align-items: start; }
  .roi-inputs { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .roi-result { border-top: none; border-left: 1px solid var(--navy-700); padding: 0 0 0 32px; }
  .roi-foot { grid-column: 1 / -1; }
}

/* ---- Pricing --------------------------------------------------------- */
.prices { display: grid; gap: 18px; margin-top: 44px; align-items: start; }
.price-card { background: var(--white); border: 1px solid #E7E7F0; border-radius: 16px; padding: 28px; }
.price-card.featured { border: 2px solid var(--violet-500); box-shadow: 0 14px 40px -20px rgba(124,92,255,0.5); }
.badge {
  display: inline-block; background: var(--violet-100); color: var(--violet-500);
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 14px;
}
.price-card .pname { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.price-card .amount { font-weight: 900; font-size: clamp(2.2rem, 6vw, 2.8rem); letter-spacing: -0.02em; margin: 8px 0 2px; }
.price-card .amount span { font-size: 16px; font-weight: 500; color: var(--ink-muted); }
.price-card .setup { font-size: 14px; color: var(--ink-muted); margin: 0 0 16px; }
.price-card .feature-list li { font-size: 14px; }
.price-card .btn { width: 100%; margin-top: 22px; }
.price-card .fineprint { font-size: 12px; color: var(--ink-muted); margin: 14px 0 0; }
.price-note { margin-top: 24px; font-size: 13px; color: var(--ink-muted); max-width: var(--readw); }
@media (min-width: 900px) {
  .prices { grid-template-columns: 1fr 1.1fr 1fr; }
  .price-card.featured { transform: translateY(-8px); }
}

/* ---- Limits list ----------------------------------------------------- */
.limits { margin-top: 40px; display: grid; gap: 0; max-width: 760px; }
.limits li {
  display: flex; gap: 16px; align-items: baseline;
  font-size: 16px; padding: 18px 0; border-top: 1px solid #E7E7F0;
}
.limits .x { color: var(--violet-500); font-weight: 800; flex: none; }

/* ---- FAQ accordion --------------------------------------------------- */
.faq { margin-top: 40px; max-width: 820px; }
.faq details { border-bottom: 1px solid #E7E7F0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 16px;
  font-size: 26px; font-weight: 400; color: var(--violet-500); transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 22px; margin: 0; color: var(--ink-muted); font-size: 15px; max-width: var(--readw); }

/* ---- About ----------------------------------------------------------- */
.about-grid { display: grid; gap: 32px; margin-top: 20px; }
.about-grid p { font-size: 17px; max-width: 52ch; }
.photo-slot {
  background: var(--white); border: 1px dashed #C9C9DA; border-radius: 16px; min-height: 300px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 20px;
}
@media (min-width: 800px) { .about-grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; } }

/* ---- Contact --------------------------------------------------------- */
.contact-grid { display: grid; gap: 40px; margin-top: 20px; }
.contact-info dl { display: grid; gap: 20px; margin: 0; }
.contact-info .k { font-size: 11px; color: var(--text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 5px; }
.contact-info .v { font-weight: 800; font-size: 20px; color: var(--text-on-dark); }
.contact-info .v:hover { color: var(--violet-400); }
.contact-info small { display: block; font-weight: 400; font-size: 13px; color: var(--text-on-dark-muted); margin-top: 5px; }
.contact-form { display: grid; gap: 14px; }
.contact-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-dark-muted); margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--navy-700); background: var(--navy-800); color: var(--text-on-dark);
  font-family: var(--font); font-size: 16px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--violet-500); outline-offset: 1px; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form .formnote { font-size: 12px; color: var(--text-on-dark-muted); margin: 2px 0 0; }
@media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Chatbot trigger ------------------------------------------------- */
.chat-launch { margin-top: 22px; }
.chat-launch .chatnote { font-size: 12px; color: var(--ink-muted); margin: 8px 0 0; }

/* ---- Footer ---------------------------------------------------------- */
.footer { padding: 44px 0 32px; border-top: 1px solid var(--navy-700); }
.footer-grid { display: grid; gap: 18px; font-size: 13px; }
.footer a { color: var(--text-on-dark-muted); }
.footer a:hover { color: var(--text-on-dark); }
.footer .fcol strong { display: block; color: var(--text-on-dark); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.footer .footer-logo { height: 46px; width: auto; display: block; margin-bottom: 14px; }
.footer .flinks a { margin-right: 16px; }
.footer .copy { margin-top: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-dark-muted); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.25fr 1fr; gap: 28px; align-items: start; } }

/* ---- Sticky mobile bar ---------------------------------------------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px;
  background: rgba(10,15,44,0.95); backdrop-filter: blur(8px); border-top: 1px solid var(--navy-700);
}
.stickybar .btn { min-height: 50px; width: 100%; }
.stickybar .btn-navy { background: var(--navy-800); color: var(--text-on-dark); border: 1px solid var(--navy-700); }
.stickybar .btn-navy:hover { border-color: var(--violet-400); }
body { padding-bottom: 74px; }
@media (min-width: 768px) { .stickybar { display: none; } body { padding-bottom: 0; } }

/* ---- Subpage / legal ------------------------------------------------- */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 24px; }
.legal h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin-top: 36px; }
.legal p, .legal li { color: var(--ink-muted); font-size: 16px; }
.legal .fill { background: var(--violet-100); color: var(--ink); padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.backlink {
  display: inline-block; margin-bottom: 28px; color: var(--violet-500); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---- Ergaenzungen Copy-Ueberarbeitung -------------------------------- */
/* Karten-Titel in den Leistungen (unter dem Eyebrow-Kicker). */
.feature-card h3 { font-size: 22px; text-transform: none; margin: 2px 0 12px; }
/* Tagline-Zeile in den Preiskarten. */
.price-card .ptag { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* Zitat in "Ueber uns". */
.about-quote {
  margin: 24px 0 0; padding-left: 18px;
  border-left: 3px solid var(--violet-500);
  font-size: 18px; line-height: 1.5; font-style: italic;
  color: var(--ink); max-width: 52ch;
}
.about-quote cite { display: block; margin-top: 12px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink-muted); }
/* Gratis-Einrichtung: durchgestrichener Preis + gruenes "gratis". */
.price-card .setup s { color: var(--ink-muted); text-decoration-thickness: 1px; }
.pricing .price-card .setup s { color: var(--text-on-dark-muted); }
.price-card .free { color: var(--success); font-weight: 700; }
/* Zweitrangige CTA in den Nebenkarten etwas Abstand nach oben. */
.price-card .btn-secondary { margin-top: 22px; }
/* Ablauf-Nummern: beim Hover vergroessern und einfaerben. */
.step .num { transition: transform .2s ease, filter .2s ease; transform-origin: left center; }
.step:hover .num {
  transform: scale(1.1);
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.95))
    drop-shadow(0 4px 6px rgba(124,92,255,0.6))
    drop-shadow(0 14px 26px rgba(124,92,255,0.35));
}

/* ---- Showcase-Bloecke (Leistungen, Stone-Systems-Struktur) ----------- */
.showcase-row { display: grid; gap: 40px; align-items: center; margin-top: 64px; }
.showcase-row:first-of-type { margin-top: 48px; }
.showcase-media { display: flex; justify-content: center; }
.showcase-title { font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: none; letter-spacing: -0.02em; margin: 0 0 14px; }
.showcase-sub { font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-muted); max-width: 44ch; margin: 0 0 28px; }
.showcase-features { display: grid; gap: 22px; }
.showcase-feature .fhead { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--ink); margin: 0 0 5px; }
.showcase-feature .ficon {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--violet-100); color: var(--violet-500);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.showcase-feature p { margin: 0 0 0 34px; color: var(--ink-muted); font-size: 15px; max-width: 46ch; }
.showcase-cta { margin-top: 32px; }
@media (min-width: 900px) {
  .showcase-row { grid-template-columns: 1fr 1fr; gap: 72px; }
  .showcase-row.reverse .showcase-media { order: 2; }
}

/* Handy-Mockup mit Chat */
.phone {
  width: 250px; max-width: 100%; aspect-ratio: 10 / 20;
  background: #0b0e1c; border: 1px solid var(--navy-700); border-radius: 36px; padding: 12px;
  box-shadow: 0 34px 70px -34px rgba(10,15,44,0.55); position: relative;
}
.phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.18); z-index: 2;
}
.phone-screen { background: #fff; border-radius: 26px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.mock-head {
  background: var(--navy-900); color: var(--text-on-dark);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 26px 16px 12px; display: flex; align-items: center; gap: 8px;
}
.mock-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.chat { padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.bubble { max-width: 84%; padding: 9px 11px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; }
.bubble.in { background: #ECECF2; color: #12142a; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: var(--violet-500); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.summary { align-self: stretch; max-width: 100%; background: #F1F0FB; color: #12142a; }
.bubble.summary strong { color: var(--violet-500); }

/* ---- Sektions-Kopf mit zweiter Ueberschrift rechts ------------------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }
.section-head-aside {
  font-family: var(--font); font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: -0.01em; line-height: 1.2;
  text-align: right; max-width: 22ch; margin: 0 0 6px; color: var(--ink);
}
@media (max-width: 760px) { .section-head-aside { text-align: left; } }

/* ---- Aufklappbare Bausteine ("Mehr erfahren") ------------------------ */
.card-more { margin-top: 18px; }
.card-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius);
  border: 1px solid var(--ink); color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: border-color .15s ease, color .15s ease;
}
.card-more > summary::-webkit-details-marker { display: none; }
.card-more > summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
.card-more[open] > summary::after { content: "\2212"; }
.card-more > summary:hover { border-color: var(--violet-500); color: var(--violet-500); }
.card-more[open] > summary { margin-bottom: 22px; }
.card-more .lbl-less { display: none; }
.card-more[open] .lbl-more { display: none; }
.card-more[open] .lbl-less { display: inline; }
.card-more .showcase-cta { margin-top: 24px; }

/* ---- Hero-Feinschliff (angelehnt an Referenz "AI-Power") -------------- */
/* Eyebrow als Pill */
.hero .hero-eyebrow {
  display: inline-flex; align-items: center;
  margin-bottom: 24px; padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid var(--navy-700);
  background: rgba(255,255,255,0.05);
  color: var(--text-on-dark);
  line-height: 1.45;   /* Eyebrow ist jetzt die h1 der Seite */
}
/* Headline: zentriert, duenner (passt zum feinen Serif-KI). */
.hero .hero-title { line-height: 1.14; font-weight: 600; }
.hero .hero-title .accent {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: 0;
  text-transform: none;
}
@media (min-width: 601px) { .hero .hero-title { font-size: clamp(2.2rem, 6.2vw, 4.5rem); } }
/* Hero-Inhalt zentriert statt links. */
.hero-inner { text-align: center; }
.hero .subline { margin-left: auto; margin-right: auto; }
.hero-cta { justify-content: center; align-items: center; }
/* Glas-Button mit Shine-Hover (gleicher Stil wie die Eyebrow-Box). */
.btn-glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--navy-700);
  color: var(--text-on-dark);
  position: relative; overflow: hidden;
}
.btn-glass::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -140%;
  width: 55%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(157,134,255,0.35), transparent);
  transition: left .6s ease;
}
.btn-glass:hover { border-color: var(--violet-400); background: rgba(124,92,255,0.18); }
.btn-glass:hover::before { left: 160%; }

/* Intro: Hero-Elemente blenden beim Laden dezent ein (kein Aufklappen mehr). */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-inner > * {
  animation: heroFadeIn .5s ease both;
}
.hero-inner > .hero-eyebrow { animation-delay: .05s; }
.hero-inner > .hero-title { animation-delay: .14s; }
.hero-inner > .subline { animation-delay: .24s; }
.hero-inner > .hero-cta { animation-delay: .34s; }
/* Solange der Intro-Preloader laeuft, die Hero-Animation pausieren.
   Sie startet erst, wenn <html> die Klasse .reveal bekommt. */
html.preload:not(.reveal) .hero-inner > * { animation-play-state: paused; }
/* Ohne Intro (Handy, interne Navigation) steht die Hero sofort: schnellerer LCP. */
html.nointro .hero-inner > * { animation: none; }

/* ---- Intro-Preloader (echtes Logo + lila TV-Flackern) --------------
   Weisses, leicht durchlaessiges Bild. Die echte Wortmarke erscheint
   wie gedruckt von links nach rechts, danach flackert nur der Kasten
   aus dem Logo lila auf wie ein alter Fernseher, dann blendet weg.
   Umgesetzt mit CSS-Masken aus dem Logo, damit Schriftart exakt stimmt. */
.intro { display: none; }
html.preload .intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity .45s ease;
}
html.preload .intro.out { opacity: 0; }
.intro-inner { position: relative; width: clamp(220px, 58vw, 420px); aspect-ratio: 1224 / 382; }
.intro-logo, .intro-logo-box {
  position: absolute; inset: 0;
  -webkit-mask: url(../assets/logo-white.png?v=1) no-repeat center / contain;
          mask: url(../assets/logo-white.png?v=1) no-repeat center / contain;
}
/* Navy-Wortmarke, wird von links nach rechts "gedruckt" */
.intro-logo { background: var(--ink); clip-path: inset(0 100% 0 0); }
html.preload .intro.play .intro-logo { animation: logoPrint 1.15s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes logoPrint { to { clip-path: inset(0 0 0 0); } }
/* Nur der Kasten aus dem Logo, in Lila, flackert wie ein alter Fernseher */
.intro-logo-box {
  background: var(--violet-500); opacity: 0;
  clip-path: inset(15% 1% 52% 80.5%);
  -webkit-filter: drop-shadow(0 0 16px rgba(124,92,255,0.85));
          filter: drop-shadow(0 0 16px rgba(124,92,255,0.85));
}
.intro-logo-box.on { animation: tvFlicker .95s steps(1, end) 1 forwards; }
@keyframes tvFlicker {
  0% { opacity: 0; } 8% { opacity: .9; } 13% { opacity: .1; } 20% { opacity: 1; }
  30% { opacity: .15; } 38% { opacity: 1; } 52% { opacity: .35; } 60% { opacity: 1; }
  74% { opacity: .12; } 82% { opacity: 1; } 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-logo { clip-path: none !important; animation: none !important; }
  .intro-logo-box { opacity: 1 !important; animation: none !important; }
}

/* ---- Zusammengefuehrter dunkler Bereich (Leistungen + Warum + Rechner) */
.section.flow { padding-top: 28px; }
@media (min-width: 800px) { .section.flow { padding-top: 44px; } }
.subhead { font-size: clamp(1.4rem, 3.2vw, 2.1rem); }
/* Karten & Kacheln auf dunklem Grund als Glas. */
.bg-navy .feature-card,
.bg-navy .tile {
  background: rgba(17,24,56,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: var(--navy-700);
}
.bg-navy .feature-card .promise,
.bg-navy .showcase-feature p,
.bg-navy .tile p,
.bg-navy .combo-note { color: var(--text-on-dark-muted); }
.bg-navy .showcase-feature .fhead { color: var(--text-on-dark); }
.bg-navy .card-more > summary { border-color: var(--navy-700); color: var(--text-on-dark); }
.bg-navy .card-more > summary:hover { border-color: var(--violet-400); color: var(--violet-400); }

/* ---- Bento (Ueber uns + Verlustrechner + Ueber-uns-Link) ------------- */
.bento { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.4fr 1fr; grid-auto-rows: 1fr; align-items: stretch; }
  .bento-main { grid-row: span 2; }
}
.bento-card {
  position: relative; overflow: hidden;
  background: rgba(17,24,56,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--navy-700);
  border-radius: 18px; padding: 26px;
  color: var(--text-on-dark);
}
.bento-main { display: flex; flex-direction: column; min-height: 240px; }
.bento-main .subhead { margin-bottom: 14px; }
.bento-main p { color: var(--text-on-dark-muted); max-width: 46ch; position: relative; z-index: 1; }
.bento-watermark {
  position: absolute; right: 20px; bottom: -12px;
  font-weight: 900; font-size: clamp(3.5rem, 9vw, 7rem); line-height: 1;
  letter-spacing: -0.03em; color: rgba(255,255,255,0.045); pointer-events: none;
}
.bento-card h3 { color: var(--text-on-dark); margin-bottom: 6px; }
.bento-sub { color: var(--text-on-dark-muted); font-size: 14px; margin: 0 0 16px; }
.bento-calc .roi-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
/* Feld als Spalte, damit die Eingabe unten sitzt und alle Felder auf einer Ebene liegen,
   auch wenn ein Label (z.B. "Davon unbeantwortet") zweizeilig umbricht. */
.bento-calc .roi-field { display: flex; flex-direction: column; justify-content: flex-end; }
.bento-calc .roi-field label { display: flex; align-items: flex-start; font-size: 11px; line-height: 1.3; min-height: 2.6em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-on-dark-muted); margin-bottom: 6px; }
.bento-calc .roi-field input { width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--navy-700); background: var(--navy-900); color: var(--text-on-dark); font-family: var(--font); font-size: 15px; }
.bento-calc .roi-field input:focus { outline: 2px solid var(--violet-500); outline-offset: 1px; }
.roi-mini-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--navy-700); display: flex; flex-direction: column; gap: 4px; }
.roi-mini-result .rlabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-on-dark-muted); }
.roi-mini-result .rvalue { font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--violet-400); line-height: 1; letter-spacing: -0.02em; }
.bento-link { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, transform .1s ease; }
.bento-link p { color: var(--text-on-dark-muted); margin: 0; }
.bento-link:hover { border-color: var(--violet-400); background: rgba(124,92,255,0.12); transform: translateY(-2px); }
.bento-cta { color: var(--violet-400); font-weight: 700; font-size: 14px; }

/* ---- Kundenstimmen (Video-Testimonial) ------------------------------- */
.testimonial { display: grid; gap: 28px; margin-top: 40px; align-items: center; }
@media (min-width: 820px) { .testimonial { grid-template-columns: 0.72fr 1fr; gap: 48px; } }
.testimonial-video {
  position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  max-width: 420px; margin: 0 auto; width: 100%;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  border: 1px solid #E1E1EC;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.testimonial-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;
  filter: brightness(1.16) contrast(1.05) saturate(1.05);
}
.tv-play {
  width: 66px; height: 66px; border-radius: 50%; background: var(--violet-500);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -10px rgba(124,92,255,0.7);
}
.tv-play::before {
  content: ""; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.tv-label { color: var(--text-on-dark-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.testimonial-quote { font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.45; font-style: italic; color: var(--ink); margin: 0 0 20px; }
.testimonial-name { font-weight: 800; color: var(--ink); }
.testimonial-name span { display: block; font-weight: 500; font-size: 13px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 5px; }

/* ---- Neon-Uebergang von der Animation zu den Preisplaenen ------------- */
.neon-divider {
  position: relative; z-index: 3;
  height: 3px; margin-top: -1px;
  background: linear-gradient(90deg, transparent 0%, rgba(157,134,255,0.5) 20%, var(--violet-400) 50%, rgba(157,134,255,0.5) 80%, transparent 100%);
  box-shadow: 0 0 22px 5px rgba(124,92,255,0.65), 0 0 70px 18px rgba(124,92,255,0.35);
}
.neon-divider::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(124,92,255,0.28), transparent 70%);
  pointer-events: none;
}
.neon-divider::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(124,92,255,0.22), transparent 70%);
  pointer-events: none;
}

/* ---- Preispläne (weiss, violetter Titel, farbige Textur, Glaskarten) -- */
.pricing { position: relative; overflow: hidden; }
.pricing .wrap { position: relative; z-index: 1; }
/* ---- Durchgehender heller Bereich (Preise .. FAQ), violetter Rand ---- */
.lightbg { position: relative; overflow: clip; background: var(--white); }
.lightbg::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Rauschen als kleines Bild: gleicher Look wie der fruehere SVG-Filter, ohne Rechenlast */
  background-image: url(../assets/noise.webp?v=1);
  background-size: 160px 160px; opacity: 0.06;
}
.lightbg::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 34px rgba(124,92,255,0.26), inset 0 0 60px 0 rgba(124,92,255,0.18);
}
.lightbg > section { position: relative; z-index: 1; background: transparent; }
/* Inhalte als helle Glas-Boxen (gleiches Konzept wie oben, aber hell). */
.lightbg .step {
  position: relative; overflow: hidden;
  background: linear-gradient(157deg, rgba(255,255,255,0.9) 0%, rgba(245,242,255,0.62) 55%, rgba(232,225,255,0.5) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid rgba(124,92,255,0.24); border-radius: 18px;
  padding: 24px 26px; margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 10px 30px -12px rgba(124,92,255,0.34),
    0 2px 6px rgba(10,15,44,0.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* diagonaler Glanzstreifen fuer den Glas-Look */
.lightbg .step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  pointer-events: none;
}
.lightbg .step > * { position: relative; z-index: 1; }
.lightbg .step:hover {
  transform: translateY(-3px);
  border-color: rgba(124,92,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 20px 44px -14px rgba(124,92,255,0.5),
    0 3px 8px rgba(10,15,44,0.06);
}
.lightbg .faq details {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(124,92,255,0.16); border-radius: 14px; margin-bottom: 12px;
}
.lightbg .faq summary { padding: 18px 46px 18px 20px; }
.lightbg .faq summary::after { right: 18px; top: 15px; }
.lightbg .faq details p { padding: 0 20px 20px; }
.lightbg .testimonial-video { border-color: rgba(124,92,255,0.2); }
.pricing-title {
  text-align: center; text-transform: none;
  font-size: clamp(2.5rem, 12vw, 8rem);
  letter-spacing: -0.03em; line-height: 0.9;
  margin: 0 0 56px; white-space: nowrap;
  position: relative; z-index: 1;
  /* Glas-Effekt: glaenzender Verlauf mit heller Kante und violettem Glow. */
  color: transparent;
  background: linear-gradient(174deg, #efeaff 0%, #b6a4ff 40%, #8a6bff 51%, #cbbdff 66%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.9))
    drop-shadow(0 3px 4px rgba(124,92,255,0.55))
    drop-shadow(0 16px 28px rgba(124,92,255,0.28));
}
/* Monatlich / Jaehrlich Umschalter */
.billing-toggle {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 32px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.billing-toggle em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-muted); margin-left: 5px; }
.bt-switch {
  width: 50px; height: 27px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 1px solid #d7d7e2; background: #e9e9f1; position: relative; transition: background-color .2s ease;
}
.bt-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--violet-500); transition: left .2s ease; }
.pricing.yearly .bt-switch { background: rgba(124,92,255,0.22); border-color: var(--violet-400); }
.pricing.yearly .bt-knob { left: 26px; }
.billing-toggle .bt-y { color: var(--ink-muted); }
.pricing.yearly .billing-toggle .bt-y { color: var(--ink); }
.pricing.yearly .billing-toggle .bt-m { color: var(--ink-muted); }
/* Monats-/Jahrespreis umschalten */
.pricing .amt-yearly { display: none; }
.pricing.yearly .amt-monthly { display: none; }
.pricing.yearly .amt-yearly { display: inline; }
/* Runde, dunkle Glaskarten auf Weiss. */
.pricing-cards { position: relative; z-index: 2; }
.pricing .price-card {
  background: rgba(14,18,42,0.82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 28px;
  box-shadow: 0 34px 70px -34px rgba(10,15,44,0.55);
}
.pricing .price-card.featured {
  background: rgba(22,26,58,0.88);
  border-color: rgba(157,134,255,0.6);
  box-shadow: 0 40px 90px -34px rgba(124,92,255,0.5);
}
.pricing .pname,
.pricing .setup,
.pricing .amount span,
.pricing .fineprint { color: var(--text-on-dark-muted); }
.pricing .amount { color: #fff; }
.pricing .ptag,
.pricing .feature-list li { color: var(--text-on-dark); }
.pricing .feature-list .check { color: var(--violet-400); }
.pricing .badge { background: var(--violet-500); color: #fff; }
.pricing .price-note { color: var(--ink-muted); text-align: center; margin-left: auto; margin-right: auto; }
/* Buttons: dunkel, die empfohlene Karte weiss. */
.pricing .price-card .btn {
  width: 100%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); color: #fff;
}
.pricing .price-card .btn:hover { border-color: var(--violet-400); background: rgba(124,92,255,0.2); }
.pricing .price-card.featured .btn { background: #fff; color: var(--navy-900); border-color: #fff; }
.pricing .price-card.featured .btn:hover { background: #ececf5; }

/* ---- Mobile-Overrides, die spaeter definierte Basisregeln schlagen ---- */
@media (max-width: 600px) {
  .feature-card h3 { font-size: 19px; }
  .card-more > summary { min-height: 42px; font-size: 12px; }
  /* Eyebrow klar kleiner als die Headline (Hierarchie). */
  .hero .hero-eyebrow { font-size: 10px; letter-spacing: 0.1em; padding: 6px 12px; margin-bottom: 16px; }
  .hero-cta .btn { font-size: 12px; min-height: 44px; }
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero-inner > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---- Grosses Kundenzitat (zwischen Ablauf und Seitenende) ------------- */
.quote-section { padding: 0; }
.bigquote {
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
}
.bigquote blockquote {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 15.5em;
  margin-left: auto;
  margin-right: auto;
}
.bigquote .bq-mark {
  color: var(--violet-500);
  font-size: 1.15em;
  line-height: 0;
  vertical-align: -0.06em;
}
.bigquote figcaption {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bigquote figcaption::before {
  content: "";
  width: 64px;
  height: 2px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--violet-500), transparent);
}
.bigquote .bq-name {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 25px;
  line-height: 1.3;
  color: var(--ink);
}
.bigquote .bq-role {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-muted);
}
@media (max-width: 600px) {
  .bigquote figcaption { margin-top: 26px; }
  .bigquote figcaption::before { margin-bottom: 18px; }
}

/* ---- Scroll-Pin: Zitat leuchtet Wort fuer Wort auf --------------------- */
.quote-track { position: relative; height: 250vh; }
.quote-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Wortweises Aufleuchten. Startwert 1, damit ohne JS alles lesbar bleibt. */
.bigquote blockquote .qw {
  --t: 1;
  --g: 0;
  display: inline-block;
  opacity: calc(0.16 + 0.84 * var(--t));
  text-shadow: 0 0 calc(var(--g) * 28px) rgba(124, 92, 255, calc(var(--g) * 0.65));
}
.quote-pin .wrap { --cap: 1; }   /* Startwert 1: ohne JS ist alles sichtbar */
.bigquote figcaption { opacity: var(--cap); }
.quote-cta {
  margin-top: 64px;
  text-align: center;
  opacity: var(--cap);
  transform: translateY(calc((1 - var(--cap)) * 14px));
}
/* Mobil ueber die volle Breite, ab Tablet nur so breit wie der Text.
   Gleiches Verhalten wie der Button in der Hero. */
@media (max-width: 519px) {
  .quote-cta .btn { display: flex; width: 100%; }
}
@media (max-width: 600px) {
  .quote-cta { margin-top: 48px; }
}
/* Der Glas-Button aus der Hero, umgefaerbt fuer helle Flaechen.
   Aufbau und Shine-Hover bleiben identisch, nur Schrift und Rand
   wechseln, weil Weiss auf Hell nicht lesbar waere. */
.lightbg .btn-glass {
  background: rgba(124, 92, 255, 0.07);
  border-color: rgba(124, 92, 255, 0.38);
  color: var(--ink);
}
.lightbg .btn-glass::before {
  background: linear-gradient(100deg, transparent, rgba(124, 92, 255, 0.3), transparent);
}
.lightbg .btn-glass:hover {
  border-color: var(--violet-500);
  background: rgba(124, 92, 255, 0.15);
}
.bigquote figcaption::before { transform: scaleX(calc(0.2 + 0.8 * var(--cap))); }
@media (max-width: 700px) {
  .quote-track { height: 210vh; }
}
/* Flache Fenster: Zitat kleiner, damit im Pin nichts abgeschnitten wird. */
@media (max-height: 620px) {
  .bigquote blockquote { font-size: clamp(1.5rem, 3.6vh, 2.4rem); }
  .bigquote figcaption { margin-top: 20px; }
  .bigquote figcaption::before { margin-bottom: 14px; }
  .bigquote .bq-name { font-size: 20px; }
  .bigquote .bq-role { font-size: 16px; }
  .quote-cta { margin-top: 36px; }
}
/* Wer Bewegung reduziert haben will, bekommt die statische Fassung. */
@media (prefers-reduced-motion: reduce) {
  .quote-track { height: auto; }
  .quote-pin { position: static; height: auto; padding: 92px 0 104px; }
  .bigquote blockquote .qw { --t: 1 !important; --g: 0 !important; }
  .quote-pin .wrap { --cap: 1 !important; }
  .quote-cta { transform: none; }
}

/* ---- Foto auf der Ueber-uns-Seite ------------------------------------ */
.about-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--offwhite);
}

/* ---- Violetter Rand-Glow fuer Unterseiten ---------------------------
   Gleiche Werte wie .funnel::after auf der Erstgespraech-Seite, hier als
   wiederverwendbare Klasse.
   ------------------------------------------------------------------- */
.glowedges { position: relative; overflow: clip; }
.glowedges::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 34px rgba(124,92,255,0.24), inset 0 0 60px 0 rgba(124,92,255,0.16);
}
.glowedges > * { position: relative; z-index: 1; }

/* =========================================================================
   SEO-Ausbau (September 2026): Unterseiten, Ratgeber, Barrierefreiheit
   ========================================================================= */

/* Sichtbarer Fokus fuer Tastatur und Sprung zum Inhalt */
:focus-visible { outline: 2px solid var(--violet-500); outline-offset: 3px; border-radius: 4px; }
.bg-navy :focus-visible, .footer :focus-visible { outline-color: var(--violet-400); }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px;
  font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px rgba(10,15,44,.25);
}
.skip:focus { top: 12px; }
.nav-links a[aria-current="page"] { color: var(--text-on-dark); }

/* Karten-Link in den Leistungskarten der Startseite */
.card-link {
  display: inline-block; margin-top: 18px; color: var(--violet-400); font-weight: 700; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.card-link:hover { color: #fff; }
.price-note a { color: var(--violet-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Footer mit Linkspalten */
.footer .fcol p { margin: 0; line-height: 1.75; }
.footer .flist { display: grid; gap: 7px; margin: 0; }
.footer .fnote { margin: 30px 0 0; font-size: 13px; }

/* Grundgeruest Unterseiten */
.sub { padding-top: 118px; padding-bottom: 72px; }
@media (min-width: 800px) { .sub { padding-bottom: 110px; } }
.crumbs ol {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted);
}
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #9da1b8; }
.crumbs a { color: var(--violet-text); }
.crumbs a:hover { text-decoration: underline; }

.page-head, .article-head { max-width: 820px; }
.page-head .kicker, .article-head .kicker { color: var(--violet-text); }
.page-head h1 { font-size: clamp(2rem, 6.4vw, 3.6rem); line-height: 1; margin-bottom: 22px; overflow-wrap: break-word; hyphens: auto; }
.article-head h1 {
  text-transform: none; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 4.8vw, 2.8rem); line-height: 1.12; margin-bottom: 16px;
}
.answer { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 64ch; margin: 0; }
@media (max-width: 600px) {
  .answer { font-size: 17px; }
  /* lange Wörter wie TELEFONASSISTENT ohne Silbentrennung auf eine Zeile */
  .page-head h1 { font-size: clamp(1.45rem, 7.2vw, 2.1rem); hyphens: manual; line-height: 1.05; }
}
.byline { font-size: 13px; color: var(--ink-muted); margin: 0 0 20px; }
.byline a { color: var(--violet-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Inhaltsbloecke: Lesebreite, Ueberschriften im Satzbau (lange Fragen) */
.block { margin-top: 56px; max-width: 760px; }
.block.wide { max-width: none; }
.block h2, .prose h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.9rem); text-transform: none; font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 16px; scroll-margin-top: 100px;
}
.prose h2 { margin-top: 52px; }
.block h3, .prose h3 { font-size: 18px; margin: 26px 0 8px; }
.block > p, .block > ul > li, .block > ol > li,
.prose > p, .prose > ul > li, .prose > ol > li {
  color: #3f4563; font-size: 17px; line-height: 1.68;
}
.block > ul, .prose > ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.2em; }
.block > ol, .prose > ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1.2em; }
.block > ul > li, .block > ol > li, .prose > ul > li, .prose > ol > li { margin-bottom: 8px; padding-left: 2px; }
.block > p a, .block > ul a, .block > ol a, .prose > p a, .prose > ul a, .prose > ol a, .table-wrap a {
  color: var(--violet-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.block strong, .prose strong { color: var(--ink); }
.prose > p.note, .block > p.note { font-size: 14px; color: var(--ink-muted); }

/* Tabellen */
.table-wrap { overflow-x: auto; margin: 8px 0 26px; border: 1px solid #E4E4EE; border-radius: 14px; background: rgba(255,255,255,0.8); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 540px; }
.data-table caption { text-align: left; padding: 12px 14px 0; font-size: 13px; color: var(--ink-muted); }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid #ECECF3; line-height: 1.5; }
.data-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: var(--offwhite); }
.data-table tbody th { font-weight: 700; color: var(--ink); }
.data-table td { color: #3f4563; }
.data-table tr:last-child td, .data-table tr:last-child th { border-bottom: 0; }

/* Inhaltsverzeichnis und Quellen */
.toc { background: rgba(255,255,255,0.8); border: 1px solid rgba(124,92,255,0.2); border-radius: 16px; padding: 20px 24px; margin: 30px 0 0; max-width: 760px; }
.toc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); margin: 0 0 10px; }
.toc ol { list-style: decimal; padding-left: 1.3em; margin: 0; display: grid; gap: 6px; }
.toc li { color: var(--ink-muted); font-size: 15px; }
.toc a { color: var(--violet-text); }
.toc a:hover { text-decoration: underline; }
.prose { max-width: 760px; }
.sources { max-width: 760px; margin-top: 60px; padding-top: 24px; border-top: 1px solid #E4E4EE; }
.sources h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; margin: 0 0 12px; }
.sources ol { list-style: decimal; padding-left: 1.3em; display: grid; gap: 7px; }
.sources li { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.sources a { color: var(--violet-text); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 2px; }

/* Beispielgespraech des Assistenten */
.dialog { margin: 14px 0 26px; padding: 22px; border-radius: 18px; background: var(--navy-900); }
.dialog figcaption { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-on-dark-muted); margin: 0 0 14px; }
.dialog ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dialog li { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; color: var(--text-on-dark); }
.dialog .ai { background: rgba(124,92,255,0.24); border-bottom-left-radius: 4px; }
.dialog .caller { background: rgba(255,255,255,0.08); margin-left: auto; border-bottom-right-radius: 4px; }
.dialog .who { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet-400); margin-bottom: 2px; }
.dialog .caller .who { color: var(--text-on-dark-muted); }
.dialog .result { max-width: 100%; background: #fff; color: var(--ink); border-radius: 12px; }
.dialog .result .who { color: var(--violet-text); }

/* Zusammenfassungs-Karte */
.summary-card { margin: 10px 0 26px; padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,0.85); border: 1px solid rgba(124,92,255,0.22); display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.summary-card dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); padding-top: 3px; }
.summary-card dd { margin: 0; font-size: 15px; color: var(--ink); }
@media (max-width: 520px) { .summary-card { grid-template-columns: 1fr; gap: 2px; } .summary-card dd { margin-bottom: 8px; } }

/* Kartenraster fuer Uebersichten */
.cards { display: grid; gap: 16px; margin: 18px 0 8px; }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
.card-link-box {
  display: block; background: rgba(255,255,255,0.8); border: 1px solid rgba(124,92,255,0.2);
  border-radius: 18px; padding: 22px 24px; color: var(--ink);
  transition: border-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.card-link-box:hover { border-color: var(--violet-500); transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(124,92,255,.45); }
.card-link-box .ck { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--violet-text); }
.card-link-box h2, .card-link-box h3 { font-size: 19px; line-height: 1.25; text-transform: none; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 8px; color: var(--ink); }
.card-link-box p { font-size: 15px; margin: 0; color: var(--ink-muted); line-height: 1.55; }

/* FAQ und Abschluss auf Unterseiten */
.faq-block .faq { margin-top: 18px; max-width: none; }
.faq-block .faq details { background: rgba(255,255,255,0.7); border: 1px solid rgba(124,92,255,0.16); border-radius: 14px; margin-bottom: 12px; }
.faq-block .faq summary { padding: 18px 48px 18px 20px; font-size: 16px; }
.faq-block .faq summary::after { right: 18px; top: 14px; }
.faq-block .faq details p { padding: 0 20px 20px; color: #3f4563; font-size: 16px; line-height: 1.65; }
.page-cta { max-width: 760px; margin-top: 64px; padding: 30px 28px; border-radius: 20px; background: var(--navy-900); }
.page-cta-title { font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 10px; color: #fff; }
.page-cta p { color: var(--text-on-dark-muted); font-size: 16px; }
.page-cta .btn { margin-top: 6px; }

/* Preise und Rechner auf Unterseiten */
.block .pricing { overflow: visible; }
.block .prices { margin-top: 24px; }
.block .roi-card { margin-top: 18px; }
.roi-result .rlabel, .roi-result .rvalue { margin: 0 0 8px; }
.roi-card .roi-foot { color: var(--text-on-dark-muted); }

/* Erstgespraech (vorher Inline-Styles der Seite) */
.funnel { position: relative; overflow: hidden; background: var(--white); }
.funnel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 34px rgba(124,92,255,0.24), inset 0 0 60px 0 rgba(124,92,255,0.16); }
.funnel .wrap { position: relative; z-index: 1; max-width: 780px; }
.funnel h1 { font-size: clamp(1.9rem, 5vw, 3.25rem); }
.book-card { background: rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(124,92,255,0.16); border-radius: 20px; padding: 30px 26px; margin-top: 28px; }
.book-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.book-points li { display: flex; gap: 14px; align-items: flex-start; }
.book-points .bico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; background: var(--violet-100); color: var(--violet-text); }
.book-points .bico svg { width: 16px; height: 16px; }
.book-points strong { display: block; font-size: 16px; margin-bottom: 2px; }
.book-points p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.book-cta { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(10,15,44,0.1); text-align: center; }
.book-cta .hint { font-size: 13px; color: var(--ink-muted); margin: 12px 0 0; }
@media (max-width: 519px) { .book-cta .btn { display: flex; width: 100%; } }

/* Kontrast: violette Kleinschrift auf hellen Flaechen */
.backlink { color: var(--violet-text); }
.lightbg .kicker .n, .bg-white .kicker .n { color: var(--violet-text); }

/* Vorschau-Hinweis fuer Entwuerfe (nur dist-preview) */
.draft-ribbon { position: fixed; left: 12px; bottom: 90px; z-index: 300; background: #FFE066; color: #1a1a1a; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 8px; text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 768px) { .draft-ribbon { bottom: 16px; } }