/* ===== sp8 Marketing – Spade Vibes: Besonderheiten (Stand 20.10.2026) ===== */

/* 1. Schriften (Dateien folgen in der Instanz; bis dahin Ersatzschrift) */
h1, h2, h3, h4, .spade-full-hero__title { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }

/* 2. Trennlinie zwischen den Sections */
[data-segment-type] + [data-segment-type] > section { border-top: 1px solid oklch(0.271 0.016 264.3); }

/* 3. Hero: Überschrift mit grünem Farbverlauf (Eyebrow bleibt grün) */
.spade-full-hero__title > span:last-child {
  background-image: linear-gradient(135deg, oklch(0.949 0.004 91.4) 0%, oklch(0.813 0.213 150.7) 55%, oklch(0.836 0.117 157.1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}

/* 4. Karten: Leuchtrand beim Überfahren */
.spade-feature-tile {
  background: oklch(0.198 0.012 264.3 / 0.85);
  border-color: oklch(0.271 0.016 264.3);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.spade-feature-tile:hover {
  border-color: oklch(0.813 0.213 150.7 / 0.35);
  box-shadow: 0 0 40px -10px oklch(0.813 0.213 150.7 / 0.4);
  transform: translateY(-2px);
}

/* 5. Abschnitt "KI im Arbeitsablauf": dunkler KI-Verlauf mit Punktraster */
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 {
  background:
    radial-gradient(oklch(0.949 0.004 91.4 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(135deg, oklch(0.2 0.02 264) 0%, oklch(0.219 0.024 292) 50%, oklch(0.2 0.02 264) 100%);
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-feature-tile { backdrop-filter: blur(8px); background: oklch(0.198 0.012 264.3 / 0.6); }

/* 6. Abschnitt "Ein Kern": weicher grüner Farbnebel */
#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a {
  background:
    radial-gradient(ellipse at 20% 50%, oklch(0.813 0.213 150.7 / 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.6 0.12 170 / 0.12) 0%, transparent 50%);
}

/* 7. Schritte-Vergleich: Balken füllen sich nacheinander */
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol { list-style: none; padding: 0; margin: 0; counter-reset: step; text-align: left; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li {
  counter-increment: step; position: relative; padding: .55rem 0 .7rem 2rem; font-size: .95rem;
}
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::before {
  content: counter(step); position: absolute; left: 0; top: .5rem; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .75rem; background: oklch(0.251 0.015 264.3);
}
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::after {
  content: ""; position: absolute; left: 2rem; right: 0; bottom: .25rem; height: 3px; border-radius: 3px;
  background: oklch(0.6 0.02 264); transform-origin: left; transform: scaleX(0);
  animation: sp8-fill var(--dur, 2.5s) linear forwards; animation-delay: calc(var(--i, 0) * var(--dur, 2.5s));
}
/* links: langsam (traditionell), rechts: schnell und grün (sp8) */
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li { --dur: 2.5s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li { --dur: .6s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li::after { background: oklch(0.813 0.213 150.7); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li::before { background: oklch(0.813 0.213 150.7 / 0.2); color: oklch(0.813 0.213 150.7); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(1) { --i: 0; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(2) { --i: 1; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(3) { --i: 2; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(4) { --i: 3; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(5) { --i: 4; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(6) { --i: 5; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(7) { --i: 6; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 ol li:nth-child(8) { --i: 7; }
@keyframes sp8-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::after { animation: none; transform: scaleX(1); }
  .spade-feature-tile { transition: none; }
}

/* 8. Abschnittsköpfe wie im Original: zentriert, kleinere Überschrift */
.spade-tiles-header { text-align: center !important; max-width: 56rem; margin-left: auto; margin-right: auto; }
.spade-tiles-header > * { text-align: center !important; margin-left: auto; margin-right: auto; }
.spade-tiles-header h2 { font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.1; white-space: pre-line; }
.spade-tiles-header .sp8-rich-text { max-width: 44rem; }

/* 9. Karteninhalt zentriert, Icons klein und grün auf dunkelgrünem Grund */
.spade-feature-tile .flex.pt-8 { justify-content: center !important; }
.spade-feature-tile .spade-tile-content > div { text-align: center !important; }
.spade-feature-tile h3 { font-size: 1.15rem !important; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
.spade-tile-icon {
  width: 3rem !important; height: 3rem !important; margin-bottom: 1rem !important; border-radius: .75rem !important;
  background: oklch(0.813 0.213 150.7 / 0.12) !important; color: oklch(0.813 0.213 150.7) !important;
  border-color: oklch(0.813 0.213 150.7 / 0.25) !important;
}
.spade-tile-icon svg { width: 1.4rem; height: 1.4rem; }

/* 10. Hero: zentriert, Badge als Pille mit pulsierendem Punkt, Anbieterzeile */
.spade-full-hero__inner { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.spade-full-hero__title > span:first-child {
  display: inline-flex !important; align-items: center; gap: .5rem; margin: 0 auto 1.75rem !important;
  padding: .4rem 1rem; border-radius: 999px; font-size: .8rem !important; letter-spacing: .12em; font-weight: 500 !important;
  border: 1px solid oklch(0.813 0.213 150.7 / 0.3); background: oklch(0.813 0.213 150.7 / 0.08);
  box-shadow: 0 0 20px -5px oklch(0.813 0.213 150.7 / 0.3);
  -webkit-text-fill-color: oklch(0.813 0.213 150.7); color: oklch(0.813 0.213 150.7) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.spade-full-hero__title > span:first-child::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: oklch(0.813 0.213 150.7);
  animation: sp8-pulse 3s ease-in-out infinite;
}
@keyframes sp8-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.spade-full-hero__title > span:last-child {
  display: block; white-space: pre-line; font-size: clamp(3rem, 8vw, 6.5rem) !important; line-height: 1.02 !important; font-weight: 700 !important;
}
.spade-full-hero__subtitle { max-width: 42rem; margin-left: auto !important; margin-right: auto !important; color: oklch(0.949 0.004 91.4 / 0.8) !important; }
.spade-full-hero__subtitle::after {
  content: "OpenAI · Anthropic · Mistral · DeepL · Google Gemini · Microsoft Azure · und sieben weitere";
  display: block; margin-top: 1.75rem; font-size: .85rem; letter-spacing: .02em; color: oklch(0.733 0.012 91.5);
}
.spade-full-hero__cta-group { justify-content: center !important; }

/* 11. Kleine grüne Überschrift über jedem Abschnitt (wie im Original) */
.spade-tiles-header::before {
  display: block; margin-bottom: 1rem; font: 500 .8rem/1.4 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: oklch(0.813 0.213 150.7);
}
#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a .spade-tiles-header::before { content: "Ein Kern"; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-tiles-header::before { content: "Das Redaktionssystem"; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tiles-header::before { content: "KI im Arbeitsablauf"; }
#tiles-5c524239-6d72-4e5b-84c8-944828b01dbb .spade-tiles-header::before { content: "Jede KI"; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header::before { content: "Assistenten"; }
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-tiles-header::before { content: "Kontrolle"; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-tiles-header::before { content: "Der Umstieg"; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header::before { content: "Extensions"; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tiles-header::before { content: "Kostenmodell"; }

/* 12. Zweifarbige Überschriften: erste Zeile hell, zweite Zeile gedämpft */
.spade-tiles-header h2, section[data-spade-idx^="intro-"] h1 { color: oklch(0.733 0.012 91.5) !important; white-space: pre-line; }
.spade-tiles-header h2::first-line, section[data-spade-idx^="intro-"] h1::first-line { color: oklch(0.949 0.004 91.4); }
/* KI-Abschnitt und Kontakt: zweite Zeile grün */
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tiles-header h2,
section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] h1 { color: oklch(0.813 0.213 150.7) !important; }

/* 13. Großzügigere Abstände wie im Original */
section[data-segment-type="tiles"] { padding-top: 6rem !important; padding-bottom: 6rem !important; }
section[data-spade-idx^="intro-"] { padding-top: 6rem !important; padding-bottom: 6rem !important; }
section[data-spade-idx^="intro-"] h1 { font-size: clamp(2rem, 4vw, 3rem) !important; }

/* 14. Assistenten und Kontrolle: schmale Liste mit Icon links statt Kacheln */
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .sp8-tiles-grid,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .sp8-tiles-grid {
  display: grid !important; grid-template-columns: 1fr !important; max-width: 46rem; margin: 0 auto; gap: 1.25rem !important;
}
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-feature-tile,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-feature-tile {
  background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
}
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-feature-tile > div,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-feature-tile > div { flex-direction: row !important; align-items: flex-start; gap: 1rem; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-feature-tile .flex.pt-8,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-feature-tile .flex.pt-8 { padding-top: 1.25rem !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tile-content > div,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-tile-content > div { text-align: left !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .sp8-responsive-slider-controls,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .sp8-responsive-slider-controls { display: none !important; }

/* 15. FAQ: Überschrift groß und zweifarbig, Fragen als Karten in zwei Spalten */
.spade-faq__title { font-size: clamp(2rem, 4vw, 3rem) !important; white-space: pre-line; color: oklch(0.813 0.213 150.7) !important; }
.spade-faq__title::first-line { color: oklch(0.949 0.004 91.4); }
section[data-segment-type="faq"] { padding-top: 6rem !important; padding-bottom: 6rem !important; }
section[data-segment-type="faq"] .text-xs.uppercase { color: oklch(0.813 0.213 150.7) !important; letter-spacing: .2em; font-size: .8rem; }
section[data-segment-type="faq"] .space-y-4 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 72rem; margin: 0 auto;
}
section[data-segment-type="faq"] .space-y-4 > * { margin-top: 0 !important; }
.spade-faq__item {
  border: 1px solid oklch(0.271 0.016 264.3) !important; border-radius: .75rem; padding: 1.25rem 1.5rem;
  background: oklch(0.198 0.012 264.3 / 0.85);
}
.spade-faq__item button { font-size: 1rem !important; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
@media (max-width: 767px) { section[data-segment-type="faq"] .space-y-4 { grid-template-columns: 1fr; } }

/* 16. Kopfzeile: Seitentitel-Link ausblenden, wirkt sonst wie ein leeres Menü */
header[data-sp8-site-nav] nav a[href="/de"] { display: none; }

/* 17. Feinschliff: Fließtext wie im Original größer, Listen ohne Zwischentitel */
.spade-tiles-header .sp8-rich-text { font-size: 1.2rem !important; line-height: 1.65 !important; color: oklch(0.949 0.004 91.4 / 0.8) !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-feature-tile h3,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-feature-tile h3 { display: none; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tile-description,
#tiles-499dff5d-b987-4746-bb1f-e68fb24847bd .spade-tile-description { font-size: 1.1rem; color: oklch(0.949 0.004 91.4 / 0.85) !important; }