/* ===== sp8 Marketing – Spade Vibes: Custom CSS (Stand 22.10.2026, v1.0.23) ===== */
/* Werte 1:1 aus dem Lovable-Projekt „Spade Vibes“ (Tailwind-Klassen + src/index.css) */

/* A. Grundlagen */
body { background: hsl(220 20% 6%); }
h1, h2, h3, h4 { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
[data-segment-type] + [data-segment-type] > section { border-top: 1px solid hsl(220 15% 16%); }

/* B. Abschnittsköpfe aller Kachel-Abschnitte (Label, H2, Text) */
section[data-segment-type="tiles"] { padding: 128px 0 !important; }
section[data-segment-type="tiles"] > .container { padding-left: 16px !important; padding-right: 16px !important; }
.spade-tiles-header { max-width: 768px; margin: 0 auto 64px !important; text-align: center !important; }
.spade-tiles-header > * { text-align: center !important; margin-left: auto; margin-right: auto; }
.spade-tiles-header::before {
  display: block; margin-bottom: 16px; font: 500 14px/20px 'Inter', sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: hsl(145 80% 52%);
}
.spade-tiles-header h2 {
  font-size: 60px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -0.025em !important;
  color: hsl(45 10% 93%) !important; white-space: pre-line; margin: 0 auto 24px !important;
}
.spade-tiles-header .sp8-rich-text, .spade-tiles-header .sp8-rich-text p {
  max-width: 768px; font-size: 20px !important; line-height: 28px !important; color: hsl(45 10% 93%) !important;
}
#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"; }
@media (max-width: 767px) {
  section[data-segment-type="tiles"] { padding: 96px 0 !important; }
  .spade-tiles-header h2 { font-size: 36px !important; line-height: 40px !important; }
  .spade-tiles-header .sp8-rich-text, .spade-tiles-header .sp8-rich-text p { font-size: 18px !important; }
}

/* C. Kachel-Grundgerüst zurücksetzen (für die bereits 1:1 umgebauten Abschnitte) */
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile [data-slot="card-content"] { padding: 0 !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile .flex.pt-8 { padding: 0 !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile .spade-tile-content { padding: 0 !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile .space-y-3 > * + * { margin-top: 0 !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile h3 { font-family: 'Space Grotesk', sans-serif !important; color: hsl(45 10% 93%) !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-tile-description, :is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-tile-description p { color: hsl(45 10% 93%) !important; font-size: 16px !important; line-height: 26px !important; }

/* D. „Ein Kern“ und „Jede KI“: große Karten, mittig (Intro.tsx / AnyAI.tsx) */
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .sp8-tiles-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; max-width: 1024px; margin: 0 auto;
}
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile {
  padding: 32px !important; border-radius: 16px !important; border: 1px solid hsl(220 15% 16%) !important;
  background: hsl(220 18% 9% / 0.5) !important; box-shadow: none !important; text-align: center; transform: none !important;
  transition: border-color .3s, box-shadow .3s;
}
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile:hover {
  border-color: hsl(145 80% 52% / 0.3) !important; box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important;
}
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .flex.pt-8 { justify-content: center !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-tile-icon {
  width: 48px !important; height: 48px !important; margin: 0 auto 16px !important; border-radius: 16px !important; border: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  background: hsl(145 80% 52% / 0.15) !important; color: hsl(145 80% 52%) !important; box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
}
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-tile-icon svg { width: 24px !important; height: 24px !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-tile-content > div { text-align: center !important; }
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile h3 {
  font-size: 24px !important; line-height: 32px !important; font-weight: 600 !important; margin: 0 0 12px !important;
}
/* Icon-Farben: 2. Karte violett-cyan, 3. Karte bernstein */
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile:nth-child(2) .spade-tile-icon {
  background: linear-gradient(to bottom right, rgb(168 85 247 / 0.2), rgb(6 182 212 / 0.2)) !important; color: rgb(34 211 238) !important;
}
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .spade-feature-tile:nth-child(3) .spade-tile-icon {
  background: rgb(245 158 11 / 0.15) !important; color: rgb(251 191 36) !important;
}

/* Jede KI: Anbieterzeile mit Abstand zum Fließtext */
#tiles-5c524239-6d72-4e5b-84c8-944828b01dbb .spade-tiles-header .sp8-rich-text p + p { margin-top: 32px !important; }

/* E. „Das Redaktionssystem“: kleine Karten, linksbündig, Icon ohne Kasten (CoreFeatures.tsx) */
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .sp8-tiles-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; max-width: 1024px; margin: 0 auto;
}
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-feature-tile {
  padding: 24px !important; border-radius: 12px !important; border: 1px solid hsl(220 15% 16%) !important;
  background: hsl(220 18% 9% / 0.3) !important; box-shadow: none !important; text-align: left; transform: none !important;
  transition: border-color .3s, background-color .3s;
}
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-feature-tile:hover { border-color: hsl(145 80% 52% / 0.3) !important; background: hsl(220 18% 9% / 0.6) !important; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .flex.pt-8 { justify-content: flex-start !important; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-tile-icon {
  width: 20px !important; height: 20px !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important; color: hsl(145 80% 52%) !important;
}
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-tile-icon svg { width: 20px !important; height: 20px !important; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-tile-content > div { text-align: left !important; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-feature-tile h3 { font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; margin: 0 0 4px !important; }

/* F. „KI im Arbeitsablauf“: KI-Verlauf mit Punktraster, Glas-Karten (AIFeatures.tsx) */
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 {
  background:
    radial-gradient(hsl(45 10% 93% / 0.012) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(135deg, hsl(220 25% 10%) 0%, hsl(250 20% 12%) 50%, hsl(220 25% 10%) 100%) !important;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tiles-header { margin-bottom: 64px !important; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tiles-header h2 {
  margin-bottom: 16px !important;
  background-image: linear-gradient(to bottom, hsl(45 10% 93%) 0 50%, transparent 50%), linear-gradient(135deg, hsl(145 80% 52%), hsl(145 60% 70%)) !important;
  background-size: 100% 100%, 100% 50% !important; background-position: 0 0, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tiles-header .sp8-rich-text,
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tiles-header .sp8-rich-text p { max-width: 672px; font-size: 18px !important; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .sp8-tiles-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; max-width: 1024px; margin: 0 auto;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-feature-tile {
  padding: 24px !important; border-radius: 12px !important; border: 1px solid hsl(220 15% 16% / 0.5) !important;
  background: hsl(220 18% 9% / 0.2) !important; backdrop-filter: blur(4px); box-shadow: none !important; text-align: left; transform: none !important;
  transition: border-color .3s, box-shadow .3s;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-feature-tile:hover { border-color: hsl(145 80% 52% / 0.3) !important; box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .flex.pt-8 { justify-content: flex-start !important; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tile-icon {
  width: 40px !important; height: 40px !important; margin: 0 0 12px !important; border-radius: 12px !important; border: 0 !important;
  display: flex !important; align-items: center; justify-content: center; box-shadow: none !important;
  background: hsl(145 80% 52% / 0.15) !important; color: hsl(145 80% 52%) !important;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tile-icon svg { width: 20px !important; height: 20px !important; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-feature-tile:nth-child(4) .spade-tile-icon {
  background: linear-gradient(to bottom right, rgb(168 85 247 / 0.2), rgb(6 182 212 / 0.2)) !important; color: rgb(34 211 238) !important;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-feature-tile:nth-child(n+5) .spade-tile-icon {
  background: rgb(245 158 11 / 0.15) !important; color: rgb(251 191 36) !important;
}
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-tile-content > div { text-align: left !important; }
#tiles-b60f3768-34e5-4e40-a73f-f5e13212b564 .spade-feature-tile h3 { font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; margin: 0 0 4px !important; }

/* Kachel-Raster: Tablet 2 Spalten, Handy 1 Spalte */
@media (max-width: 1023px) {
  :is(#tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564) .sp8-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  :is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .sp8-tiles-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 639px) {
  :is(#tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564) .sp8-tiles-grid { grid-template-columns: 1fr !important; }
}
.sp8-responsive-slider-controls { display: none !important; }

/* Raster mittig (wie mx-auto im Original); Redaktionssystem und KI: Überschrift volle Breite */
:is(#tiles-fae19060-9d4b-4231-a53e-c2f58ed8b18a, #tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564, #tiles-5c524239-6d72-4e5b-84c8-944828b01dbb) .sp8-tiles-grid { margin-left: auto !important; margin-right: auto !important; width: 100%; }
:is(#tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564) .spade-tiles-header { max-width: none; }
:is(#tiles-b7055569-d76d-49ee-8884-809ff970ba5a, #tiles-b60f3768-34e5-4e40-a73f-f5e13212b564) .spade-tiles-header h2 { max-width: none; }


/* G. Text-Abschnitte: Wirtschaftlichkeit, Live-Demo, Kosten-Abschluss, Kontakt (Longevity / Proof / Pricing / CTA) */
section[data-spade-idx^="intro-"] { padding: 128px 0 !important; background: none !important; }
section[data-spade-idx^="intro-"] > div { padding-left: 16px !important; padding-right: 16px !important; }
section[data-spade-idx^="intro-"] > div > div { max-width: 768px !important; margin: 0 auto !important; text-align: center; }
section[data-spade-idx^="intro-"] > div > div > p:first-child { font: 500 14px/20px 'Inter', sans-serif !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: hsl(145 80% 52%) !important; margin: 0 0 16px !important; }
section[data-spade-idx^="intro-"] :is(h1, h2) {
  font-family: 'Space Grotesk', sans-serif !important; font-size: 60px !important; line-height: 1 !important; font-weight: 700 !important;
  letter-spacing: -0.025em !important; color: hsl(45 10% 93%) !important; white-space: pre-line; margin: 0 0 24px !important;
}
section[data-spade-idx^="intro-"] .sp8-rich-text, section[data-spade-idx^="intro-"] .sp8-rich-text p { font-size: 20px !important; line-height: 28px !important; color: hsl(45 10% 93%) !important; max-width: 768px; margin-left: auto; margin-right: auto; }
section[data-spade-idx^="intro-"] .spade-intro__cta-group { justify-content: center !important; margin-top: 40px !important; }
section[data-spade-idx^="intro-"] a.spade-intro__cta {
  padding: 14px 32px !important; border-radius: 12px !important; font: 600 16px/24px 'Inter', sans-serif !important;
  background: hsl(145 80% 52%) !important; color: hsl(220 20% 6%) !important; border: 0 !important;
  box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; transition: box-shadow .15s;
}
section[data-spade-idx^="intro-"] a.spade-intro__cta:hover { box-shadow: 0 0 40px -10px hsl(145 80% 52% / 0.4) !important; }
/* Kosten-Abschluss: direkt unter den Kostenkarten, kleinerer Text */
section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] { padding: 0 0 128px !important; border-top: 0 !important; }
section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] .sp8-rich-text, section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] .sp8-rich-text p { font-size: 18px !important; line-height: 29px !important; }
section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] .spade-intro__cta-group { margin-top: 32px !important; }
section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] a.spade-intro__cta { padding: 10px 32px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; }
[data-segment-type] + [data-segment-type] > section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] { border-top: 0 !important; }
/* Kontakt: größere Überschrift, zweite Zeile grün, Farbnebel */
section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] {
  background: radial-gradient(ellipse at 20% 50%, hsl(145 80% 52% / 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, hsl(160 60% 40% / 0.075) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, hsl(145 60% 40% / 0.025) 0%, transparent 50%) !important;
}
section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] :is(h1, h2) { font-size: 72px !important; background-image: linear-gradient(to bottom, hsl(45 10% 93%) 0 50%, transparent 50%), linear-gradient(135deg, hsl(145 80% 52%), hsl(145 60% 70%)) !important;
  background-size: 100% 100%, 100% 50% !important; background-position: 0 0, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; }
section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] .sp8-rich-text, section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] .sp8-rich-text p { max-width: 512px; }
section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] > div > div > p:first-child { display: none; }
@media (max-width: 1023px) { section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] :is(h1, h2) { font-size: 60px !important; } }
@media (max-width: 767px) {
  section[data-spade-idx^="intro-"] { padding: 96px 0 !important; } section[data-spade-idx="intro-251828e7-11d2-4f69-98b2-8147cd08936b"] { padding: 0 0 96px !important; }
  section[data-spade-idx^="intro-"] :is(h1, h2), section[data-spade-idx="intro-28d8ad8e-5219-4bf7-b189-4c2f0a0d3f3a"] :is(h1, h2) { font-size: 36px !important; line-height: 40px !important; }
  section[data-spade-idx^="intro-"] .sp8-rich-text, section[data-spade-idx^="intro-"] .sp8-rich-text p { font-size: 18px !important; }
}

/* J. Kostenmodell (Pricing.tsx): drei Karten ohne Icon, Link als grüner Textlink */
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 { padding-bottom: 48px !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tiles-header { margin-bottom: 48px !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tiles-header h2 { white-space: normal !important; margin-bottom: 0 !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tiles-header .sp8-rich-text, #tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tiles-header .sp8-rich-text p { margin-top: 24px !important; font-size: 18px !important; line-height: 29px !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .sp8-tiles-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; max-width: 1152px; margin: 0 auto !important; width: 100%; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile { padding: 32px !important; border-radius: 16px !important; border: 1px solid hsl(220 15% 16%) !important; background: hsl(220 18% 9% / 0.3) !important; box-shadow: none !important; transform: none !important; text-align: left; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile [data-slot="card-content"], #tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile .spade-tile-content { padding: 0 !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile .flex.pt-8 { display: none !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile .space-y-3 > * + * { margin-top: 0 !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tile-content > div { text-align: left !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile h3 { font: 600 24px/32px 'Space Grotesk', sans-serif !important; color: hsl(45 10% 93%) !important; margin: 0 0 12px !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tile-description, #tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tile-description p { font-size: 16px !important; line-height: 26px !important; color: hsl(45 10% 93%) !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-feature-tile .pt-6 { padding-top: 16px !important; justify-content: flex-start !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tile-cta { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; color: hsl(145 80% 52%) !important; font: 500 16px/24px 'Inter', sans-serif !important; }
#tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .spade-tile-cta:hover { text-decoration: underline; }
@media (max-width: 767px) { #tiles-acf11f18-59d9-4741-a1ee-ff60be037d43 .sp8-tiles-grid { grid-template-columns: 1fr !important; } }

/* K. FAQ (HomeFAQ.tsx): Kopf wie Original, Fragen als Karten in zwei Spalten */
section[data-segment-type="faq"] { padding: 128px 0 !important; }
section[data-segment-type="faq"] > div { padding-left: 16px !important; padding-right: 16px !important; }
section[data-segment-type="faq"] .text-xs.uppercase { font: 500 14px/20px 'Inter', sans-serif !important; letter-spacing: 0.1em !important; color: hsl(145 80% 52%) !important; margin-bottom: 16px !important; }
.spade-faq__title {
  max-width: 768px; margin: 0 auto 48px !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 60px !important; line-height: 1 !important;
  font-weight: 700 !important; letter-spacing: -0.025em !important; white-space: pre-line; background-image: linear-gradient(to bottom, hsl(45 10% 93%) 0 50%, transparent 50%), linear-gradient(135deg, hsl(145 80% 52%), hsl(145 60% 70%)) !important;
  background-size: 100% 100%, 100% 50% !important; background-position: 0 0, 0 100% !important; background-repeat: no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
}
section[data-segment-type="faq"] .space-y-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1024px; margin: 0 auto; align-items: start; }
section[data-segment-type="faq"] .space-y-4 > * { margin-top: 0 !important; }
.spade-faq__item { border: 1px solid hsl(220 15% 16%) !important; border-radius: 8px !important; background: hsl(220 18% 9% / 0.5) !important; padding: 24px !important; }
.spade-faq__item button { font: 600 20px/28px 'Inter', sans-serif !important; color: hsl(45 10% 93%) !important; }
.spade-faq__item [role="region"], .spade-faq__item [role="region"] p { font-size: 18px !important; line-height: 29px !important; color: hsl(45 10% 93%) !important; }
.spade-faq__item [role="region"] > div { padding-top: 12px !important; }
@media (max-width: 767px) {
  section[data-segment-type="faq"] { padding: 96px 0 !important; }
  section[data-segment-type="faq"] .space-y-4 { grid-template-columns: 1fr; }
  .spade-faq__title { font-size: 36px !important; line-height: 40px !important; }
  .spade-faq__item button { font-size: 18px !important; }
}

/* H. Listen mit Icon: Assistenten, Kontrolle, Vorteile im Umstieg (Assistants.tsx / Control.tsx / SpeedSection.tsx) */
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0) .spade-feature-tile [data-slot="card-content"] { padding: 0 !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0) .spade-feature-tile .spade-tile-content { padding: 0 !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0) .spade-feature-tile .space-y-3 > * + * { margin-top: 0 !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .sp8-tiles-grid { display: flex !important; flex-direction: column; gap: 16px !important; max-width: 672px; margin: 0 auto !important; width: 100%; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-feature-tile, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) {
  background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; border-radius: 0 !important;
  padding: 12px 0 !important; height: auto !important;
}
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-feature-tile [data-slot="card-content"], #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) [data-slot="card-content"] {
  flex-direction: row !important; align-items: center; gap: 16px;
}
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-feature-tile .flex.pt-8, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) .flex.pt-8 { padding: 0 !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-tile-icon, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) .spade-tile-icon {
  width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: 8px !important; border: 0 !important; box-shadow: none !important;
  display: flex !important; align-items: center; justify-content: center; background: hsl(145 80% 52% / 0.1) !important; color: hsl(145 80% 52%) !important;
}
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-tile-icon svg, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) .spade-tile-icon svg { width: 16px !important; height: 16px !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-feature-tile h3, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) h3 { display: none !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-tile-content > div, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) .spade-tile-content > div { text-align: left !important; }
:is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-tile-description, :is(#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521, #tiles-499dff5d-b987-4746-bb1f-e68fb24847bd) .spade-tile-description p,
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) .spade-tile-description, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) .spade-tile-description p {
  font-size: 18px !important; line-height: 28px !important; color: hsl(45 10% 93%) !important; margin: 0 !important;
}
/* Assistenten: Grundsatz-Satz unter die Liste, mit Trennlinie */
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 > .container { display: flex; flex-direction: column; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header, #tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header .sp8-rich-text { display: contents !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header::before, #tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header h2, #tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header .sp8-rich-text p { width: 100%; max-width: 768px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header .sp8-rich-text p:has(strong) {
  order: 3; max-width: 672px; margin: 40px auto 0 !important; padding-top: 32px; border-top: 1px solid hsl(220 15% 16%);
  font-size: 20px !important; line-height: 28px !important; font-weight: 500; text-align: left; color: hsl(45 10% 93%) !important;
}
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header .sp8-rich-text p:has(strong) strong { font-weight: 500; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header .sp8-rich-text p:nth-last-child(2) { margin-bottom: 64px !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header h2 { margin-bottom: 24px !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 .spade-tiles-header .sp8-rich-text p { font-size: 20px !important; line-height: 28px !important; color: hsl(45 10% 93%) !important; }
#tiles-3f4079b8-e20a-479d-80d8-460a8e26d521 > .container > div:last-child { order: 2; width: 100%; }

/* I. Der Umstieg: Kopf, Vergleich traditionell vs. sp8 mit Zeitbalken, Vorteile */
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-tiles-header { max-width: none; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-tiles-header h2 { white-space: normal !important; max-width: none; margin-bottom: 16px !important; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-tiles-header .sp8-rich-text p { max-width: 672px; margin-left: auto; margin-right: auto; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-tiles-header .sp8-rich-text p + p { margin-top: 24px; font-size: 18px !important; font-weight: 500; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .sp8-tiles-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 32px !important; row-gap: 16px !important; max-width: 1152px; margin: 0 auto !important; width: 100%; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(n+3) { grid-column: 1 / -1; width: 100%; max-width: 672px; justify-self: center; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(3) { margin-top: 48px; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) {
  padding: 24px !important; border-radius: 16px !important; border: 1px solid hsl(220 15% 16%) !important;
  background: hsl(220 18% 9% / 0.3) !important; box-shadow: none !important; transform: none !important;
}
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) { border-color: hsl(145 80% 52% / 0.3) !important; background: hsl(220 18% 9% / 0.5) !important; box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) .flex.pt-8 { display: none !important; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) .spade-tile-content > div { text-align: left !important; display: flex; flex-direction: column; height: 100%; }
/* Kartenkopf: kleine Großbuchstaben; Zeitangabe groß unten */
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) h3 { font-size: 0 !important; line-height: 0 !important; margin: 0 0 24px !important; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) h3::before { font: 400 14px/20px 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(45 10% 93%); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) h3::before { content: "Traditionelles CMS"; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) h3::before { content: "sp8 CMS"; color: hsl(145 80% 52%); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) .spade-tile-description { flex: 1; display: flex; flex-direction: column; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(-n+2) .spade-tile-description::after { margin-top: 24px; font: 700 30px/36px 'Space Grotesk', sans-serif; color: hsl(45 10% 93%); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) .spade-tile-description::after { content: "3–6 Monate"; margin-top: auto; padding-top: 24px; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) .spade-tile-description::after { content: "2–3 Wochen"; color: hsl(145 80% 52%); margin-top: auto; padding-top: 24px; }
/* Zeitstrahl */
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol { list-style: none !important; position: relative; margin: 0 !important; padding: 0 0 0 24px !important; display: flex; flex-direction: column; gap: 16px; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: hsl(45 10% 93% / 0.2); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol::before { background: hsl(145 80% 52% / 0.3); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li {
  position: relative; display: flex; align-items: center; gap: 16px; margin: 0 !important; padding: 0 !important;
  font-size: 16px !important; line-height: 24px !important; color: hsl(45 10% 93%) !important;
}
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::before {
  content: ""; position: absolute; left: -24px; top: auto; display: block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 9999px;
  border: 2px solid hsl(45 10% 93% / 0.4); background: hsl(220 20% 6%); z-index: 1;
}
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li::before { border-color: hsl(145 80% 52%); }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::after {
  content: ""; order: -1; flex: 0 0 144px; height: 8px; position: static; transform: none; border-radius: 9999px;
  background: linear-gradient(90deg, hsl(270 60% 50% / 0.5), hsl(270 60% 60% / 0.7)) 0 0 / 0% 100% no-repeat, hsl(45 10% 93% / 0.1);
  animation-name: var(--sp8-bar); animation-duration: 5s; animation-timing-function: linear; animation-fill-mode: forwards;
}
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li::after {
  background: linear-gradient(hsl(145 80% 52%), hsl(145 80% 52%)) 0 0 / 0% 100% no-repeat, hsl(145 80% 52% / 0.2);
  animation-name: var(--sp8-bar); animation-duration: .8s; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
@keyframes sp8Bar { to { background-size: 100% 100%, auto; } }
/* traditionell: Zeilen erscheinen nacheinander, jeder Balken 5 s */
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li { opacity: 0; animation-name: var(--sp8-row); animation-duration: .3s; animation-timing-function: ease; animation-fill-mode: forwards; }
@keyframes sp8Row { to { opacity: 1; } }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(1) { animation-delay: 0.0s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(1)::after { animation-delay: 0.3s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(2) { animation-delay: 5.3s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(2)::after { animation-delay: 5.6s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(3) { animation-delay: 10.6s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(3)::after { animation-delay: 10.9s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(4) { animation-delay: 15.9s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(4)::after { animation-delay: 16.2s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(5) { animation-delay: 21.2s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(5)::after { animation-delay: 21.5s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(6) { animation-delay: 26.5s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(6)::after { animation-delay: 26.8s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(7) { animation-delay: 31.8s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(7)::after { animation-delay: 32.1s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(8) { animation-delay: 37.1s; } #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(1) ol li:nth-child(8)::after { animation-delay: 37.4s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li:nth-child(1)::after { animation-delay: 0.20s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li:nth-child(2)::after { animation-delay: 0.35s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li:nth-child(3)::after { animation-delay: 0.50s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li:nth-child(4)::after { animation-delay: 0.65s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li:nth-child(5)::after { animation-delay: 0.80s; }
#tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile:nth-child(2) ol li:nth-child(6)::after { animation-delay: 0.95s; }
/* Animation startet erst, wenn der Abschnitt ins Bild kommt (moderne Browser) */
@property --sp8-bar { syntax: '<custom-ident>'; inherits: true; initial-value: sp8Bar; }
@property --sp8-row { syntax: '<custom-ident>'; inherits: true; initial-value: sp8Row; }
/* Ein- und Ausschalten je nach Sichtbarkeit: beim erneuten Hinscrollen startet alles von vorn */
@keyframes sp8Arm {
  0%, 2% { --sp8-bar: sp8Off; --sp8-row: sp8Off; }
  3%, 97% { --sp8-bar: sp8Bar; --sp8-row: sp8Row; }
  98%, 100% { --sp8-bar: sp8Off; --sp8-row: sp8Off; }
}
@supports (animation-timeline: view()) {
  #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .sp8-tiles-grid {
    animation-name: sp8Arm; animation-duration: 1ms; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
}
@media (max-width: 767px) {
  #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .sp8-tiles-grid { grid-template-columns: 1fr !important; }
  #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::after { flex-basis: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li, #tiles-20aee201-a0d8-4d86-876c-1c627eaa13a0 .spade-feature-tile ol li::after { animation-duration: 0s !important; animation-delay: 0s !important; }
}

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

/* L. Extensions (Extensions.tsx): Karten wie Original, Stufen-Badge oben rechts */
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header { max-width: none; margin-bottom: 48px !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header h2 { white-space: normal !important; max-width: none; margin-bottom: 16px !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header .sp8-rich-text, #tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header .sp8-rich-text p { max-width: 672px; font-size: 18px !important; line-height: 28px !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .sp8-tiles-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; max-width: 1024px; margin: 0 auto !important; width: 100%; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile {
  position: relative; padding: 20px !important; border-radius: 12px !important; border: 1px solid hsl(220 15% 16%) !important;
  background: hsl(220 18% 9% / 0.3) !important; box-shadow: none !important; transform: none !important; height: auto !important; transition: border-color .3s;
}
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile:hover { border-color: hsl(145 80% 52% / 0.3) !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile [data-slot="card-content"], #tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile .spade-tile-content { padding: 0 !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile .flex.pt-8 { display: none !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile .space-y-3 > * + * { margin-top: 0 !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tile-content > div { text-align: left !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-feature-tile h3 { font: 600 18px/22.5px 'Space Grotesk', sans-serif !important; color: hsl(45 10% 93%) !important; margin: 0 0 8px !important; padding-right: 96px; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tile-description, #tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tile-description p { font-size: 16px !important; line-height: 26px !important; color: hsl(45 10% 93%) !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tile-description p:has(em) { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid hsl(220 15% 16% / 0.5); font-size: 14px !important; line-height: 20px !important; color: hsl(45 10% 93% / 0.7) !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tile-description em { font-style: normal; }
/* Stufen-Badge: Basic grau, Advanced grün, Enterprise himmelblau */
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile .spade-tile-content::before {
  content: "Basic"; position: absolute; top: 0; right: 0; padding: 2px 8px; border-radius: 9999px; border: 1px solid hsl(45 10% 93% / 0.3);
  font: 500 12px/16px 'Inter', sans-serif; color: hsl(45 10% 93%); background: none; white-space: nowrap;
}
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(2) .spade-tile-content::before { content: "Advanced"; border-color: hsl(145 80% 52% / 0.4); color: hsl(145 80% 52%); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(7) .spade-tile-content::before { content: "Advanced"; border-color: hsl(145 80% 52% / 0.4); color: hsl(145 80% 52%); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(8) .spade-tile-content::before { content: "Advanced"; border-color: hsl(145 80% 52% / 0.4); color: hsl(145 80% 52%); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(9) .spade-tile-content::before { content: "Enterprise"; border-color: rgb(56 189 248 / 0.4); color: rgb(56 189 248); background: rgb(56 189 248 / 0.1); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(10) .spade-tile-content::before { content: "Enterprise"; border-color: rgb(56 189 248 / 0.4); color: rgb(56 189 248); background: rgb(56 189 248 / 0.1); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(11) .spade-tile-content::before { content: "Enterprise"; border-color: rgb(56 189 248 / 0.4); color: rgb(56 189 248); background: rgb(56 189 248 / 0.1); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(13) .spade-tile-content::before { content: "Advanced"; border-color: hsl(145 80% 52% / 0.4); color: hsl(145 80% 52%); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(15) .spade-tile-content::before { content: "Enterprise"; border-color: rgb(56 189 248 / 0.4); color: rgb(56 189 248); background: rgb(56 189 248 / 0.1); }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-feature-tile:nth-child(16) .spade-tile-content::before { content: "Advanced"; border-color: hsl(145 80% 52% / 0.4); color: hsl(145 80% 52%); }
@media (max-width: 1023px) { #tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .sp8-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px) { #tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .sp8-tiles-grid { grid-template-columns: 1fr !important; } }

/* M. Extensions-Filter-Reiter (CSS-only): Links im Kopftext zeigen auf 5 unsichtbare Sprungmarken-Segmente */
html { scroll-behavior: smooth; }
[data-segment-id] { margin-block-end: 0 !important; }
:is(#segment-ec855dca-5d75-4846-87a2-b953d5ad0b85, #segment-182477ff-a0ac-4d54-916d-bc35edb0b621, #segment-3d150508-428c-4e94-b736-6388236a8d83, #segment-a59611cb-ba94-4433-9078-c738aa888d0b, #segment-800c26dc-53f2-44ea-ade7-974b1bd5c8de) {
  position: fixed !important; top: 50%; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; margin: 0 !important; z-index: -1;
}
:is(#segment-ec855dca-5d75-4846-87a2-b953d5ad0b85, #segment-182477ff-a0ac-4d54-916d-bc35edb0b621, #segment-3d150508-428c-4e94-b736-6388236a8d83, #segment-a59611cb-ba94-4433-9078-c738aa888d0b, #segment-800c26dc-53f2-44ea-ade7-974b1bd5c8de) > section { border: 0 !important; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header .sp8-rich-text p:has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: none !important; margin: 48px auto 0 !important; font-size: 0 !important; line-height: 0 !important;
}
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header .sp8-rich-text a[href^="#segment-"] {
  display: inline-block; padding: 8px 16px; border-radius: 8px; font: 500 16px/24px 'Inter', sans-serif; text-decoration: none !important;
  background: hsl(220 15% 14%); color: hsl(45 10% 93%) !important; transition: background-color .2s, color .2s;
}
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897 .spade-tiles-header .sp8-rich-text a[href^="#segment-"]:hover { background: hsl(220 15% 14% / 0.8); }
/* aktiver Reiter: Standard = Inhalt & Redaktion */
body:not(:has(:is(#segment-182477ff-a0ac-4d54-916d-bc35edb0b621, #segment-3d150508-428c-4e94-b736-6388236a8d83, #segment-a59611cb-ba94-4433-9078-c738aa888d0b, #segment-800c26dc-53f2-44ea-ade7-974b1bd5c8de):target)) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-tiles-header .sp8-rich-text a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"],
body:has(#segment-182477ff-a0ac-4d54-916d-bc35edb0b621:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-tiles-header .sp8-rich-text a[href*="182477ff-a0ac-4d54-916d-bc35edb0b621"],
body:has(#segment-3d150508-428c-4e94-b736-6388236a8d83:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-tiles-header .sp8-rich-text a[href*="3d150508-428c-4e94-b736-6388236a8d83"],
body:has(#segment-a59611cb-ba94-4433-9078-c738aa888d0b:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-tiles-header .sp8-rich-text a[href*="a59611cb-ba94-4433-9078-c738aa888d0b"],
body:has(#segment-800c26dc-53f2-44ea-ade7-974b1bd5c8de:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])) .spade-tiles-header .sp8-rich-text a[href*="800c26dc-53f2-44ea-ade7-974b1bd5c8de"] {
  background: hsl(145 80% 52%) !important; color: hsl(220 20% 6%) !important;
}
/* Karten filtern (nur wenn die Reiter-Links vorhanden sind) */
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])):has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) .spade-feature-tile { display: none !important; }
body:not(:has(:is(#segment-182477ff-a0ac-4d54-916d-bc35edb0b621, #segment-3d150508-428c-4e94-b736-6388236a8d83, #segment-a59611cb-ba94-4433-9078-c738aa888d0b, #segment-800c26dc-53f2-44ea-ade7-974b1bd5c8de):target)) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])):has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) .spade-feature-tile:nth-child(-n+5) { display: flex !important; }
body:has(#segment-182477ff-a0ac-4d54-916d-bc35edb0b621:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])):has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) .spade-feature-tile:nth-child(n+6):nth-child(-n+12) { display: flex !important; animation: sp8TabIn .3s ease-out; }
body:has(#segment-3d150508-428c-4e94-b736-6388236a8d83:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])):has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) .spade-feature-tile:nth-child(n+13):nth-child(-n+15) { display: flex !important; animation: sp8TabIn .3s ease-out; }
body:has(#segment-a59611cb-ba94-4433-9078-c738aa888d0b:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])):has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) .spade-feature-tile:nth-child(n+16):nth-child(-n+18) { display: flex !important; animation: sp8TabIn .3s ease-out; }
body:has(#segment-800c26dc-53f2-44ea-ade7-974b1bd5c8de:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:not(:has(a[href*="#segment-09f47c17"])):has(a[href*="ec855dca-5d75-4846-87a2-b953d5ad0b85"]) .spade-feature-tile:nth-child(n+19):nth-child(-n+20) { display: flex !important; animation: sp8TabIn .3s ease-out; }
/* Reiter ab v1.0.13: Alle · Inhalte · Sichtbarkeit · Medien · Team (Standard: Alle) */
body:not(:has(:is(#segment-ec855dca-5d75-4846-87a2-b953d5ad0b85, #segment-182477ff-a0ac-4d54-916d-bc35edb0b621, #segment-3d150508-428c-4e94-b736-6388236a8d83, #segment-a59611cb-ba94-4433-9078-c738aa888d0b):target)) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-tiles-header .sp8-rich-text a[href*="09f47c17"],
body:has(#segment-ec855dca-5d75-4846-87a2-b953d5ad0b85:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-tiles-header .sp8-rich-text a[href*="ec855dca"],
body:has(#segment-182477ff-a0ac-4d54-916d-bc35edb0b621:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-tiles-header .sp8-rich-text a[href*="182477ff"],
body:has(#segment-3d150508-428c-4e94-b736-6388236a8d83:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-tiles-header .sp8-rich-text a[href*="3d150508"],
body:has(#segment-a59611cb-ba94-4433-9078-c738aa888d0b:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-tiles-header .sp8-rich-text a[href*="a59611cb"] {
  background: hsl(145 80% 52%) !important; color: hsl(220 20% 6%) !important;
}
body:has(:is(#segment-ec855dca-5d75-4846-87a2-b953d5ad0b85, #segment-182477ff-a0ac-4d54-916d-bc35edb0b621, #segment-3d150508-428c-4e94-b736-6388236a8d83, #segment-a59611cb-ba94-4433-9078-c738aa888d0b):target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile { display: none !important; }
body:has(#segment-ec855dca-5d75-4846-87a2-b953d5ad0b85:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile:nth-child(n+1):nth-child(-n+4) { display: flex !important; animation: sp8TabIn .3s ease-out; }
body:has(#segment-182477ff-a0ac-4d54-916d-bc35edb0b621:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile:nth-child(n+5):nth-child(-n+8) { display: flex !important; animation: sp8TabIn .3s ease-out; }
body:has(#segment-3d150508-428c-4e94-b736-6388236a8d83:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile:nth-child(n+9):nth-child(-n+9) { display: flex !important; animation: sp8TabIn .3s ease-out; }
body:has(#segment-a59611cb-ba94-4433-9078-c738aa888d0b:target) #tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile:nth-child(n+10):nth-child(-n+11) { display: flex !important; animation: sp8TabIn .3s ease-out; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile h3 { padding-right: 0; }
#tiles-09f47c17-f0c7-4574-a2f8-467da1669897:has(a[href*="#segment-09f47c17"]) .spade-feature-tile .spade-tile-content::before { content: none; }
@keyframes sp8TabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* N. Nach-oben-Button (ScrollToTop.tsx): grüner Kreis unten rechts, erscheint ab 600 px Scrolltiefe */
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 { position: fixed !important; right: 24px; bottom: 24px; z-index: 50; margin: 0 !important; width: auto !important; }
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 > section { padding: 0 !important; border: 0 !important; background: none !important; }
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 > section > div, #segment-31c4023b-843b-4747-91cd-c8b1b81f0953 > section > div > div { padding: 0 !important; max-width: none !important; margin: 0 !important; }
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 .spade-intro__cta-group { margin: 0 !important; }
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 a.spade-intro__cta {
  width: 48px !important; height: 48px !important; padding: 0 !important; border-radius: 9999px !important; font-size: 0 !important; line-height: 0 !important;
  display: flex !important; align-items: center; justify-content: center; background: hsl(145 80% 52%) !important;
  box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; transition: box-shadow .15s;
}
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 a.spade-intro__cta:hover { box-shadow: 0 0 40px -10px hsl(145 80% 52% / 0.4) !important; }
#segment-31c4023b-843b-4747-91cd-c8b1b81f0953 a.spade-intro__cta::before {
  content: ""; width: 20px; height: 20px; background: hsl(220 20% 6%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@supports (animation-timeline: scroll()) {
  #segment-31c4023b-843b-4747-91cd-c8b1b81f0953 { animation-name: sp8TopIn; animation-duration: 1ms; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 560px 640px; }
  @keyframes sp8TopIn { from { opacity: 0; transform: translateY(20px) scale(0.8); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }
}

/* ===== 22. HERO nach VideoHeroTimed.tsx, Abstände nach Walters Feedback (v1.0.8, 21.10.2026) ===== */
section.spade-full-hero {
  height: 100vh !important; min-height: 820px !important; padding: 0 !important;
  margin-top: -65px !important; display: block !important;
}
/* Video einmal abspielen, danach Standbild (das Standbild liegt darunter) */
.spade-full-hero .spade-full-hero__media {
  position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  animation: sp8VidOut .8s ease-out 9.6s forwards;
}
@keyframes sp8VidOut { to { opacity: 0; visibility: hidden; } }
.spade-full-hero .spade-full-hero__overlay {
  z-index: 2; background: hsl(220 20% 6% / 0.3) !important; opacity: 0;
  animation: sp8HeroOv 1.2s ease-out 2s forwards;
}
.spade-full-hero .spade-full-hero__overlay::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, hsl(220 20% 6% / 0.75), hsl(220 20% 6% / 0.35), transparent), hsl(220 20% 6% / 0.45);
  animation: sp8HeroOv 2.5s ease-out 10.5s forwards;
}
@keyframes sp8HeroOv { to { opacity: 1; } }
@keyframes sp8HeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Inhalt als Block mittig, mit festen, luftigen Abständen */
.spade-full-hero .spade-full-hero__content {
  position: absolute !important; inset: 0; z-index: 20; max-width: none !important; margin: 0 !important;
  padding: 105px 16px 56px !important; display: flex !important; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.spade-full-hero .spade-full-hero__inner {
  animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  max-width: none !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
}
.spade-full-hero .spade-full-hero__title { display: contents !important; }

/* Badge: feiner */
.spade-full-hero__title > span:first-child {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 44px !important;
  padding: 7px 18px; border-radius: 9999px; border: 1px solid hsl(145 80% 52% / 0.3); background: hsl(220 15% 14% / 0.5);
  font-family: 'Inter', sans-serif !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase; box-shadow: none;
  color: hsl(45 10% 93% / 0.8) !important; -webkit-text-fill-color: hsl(45 10% 93% / 0.8);
  opacity: 0; animation: sp8HeroIn .7s ease-out 2s forwards;
}
.spade-full-hero__title > span:first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 9999px; background: hsl(145 80% 52%);
  animation: sp8Pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes sp8Pulse { 50% { opacity: .5; } }

@property --sp8-l1 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sp8-l2 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sp8-l3 { syntax: '<number>'; inherits: false; initial-value: 0; }
.spade-full-hero__title > span:last-child {
  display: block !important; white-space: pre-line; margin: 0 0 36px !important;
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important;
  font-size: 96px !important; line-height: 1.05 !important; letter-spacing: -0.025em !important;
  background-image:
    linear-gradient(to bottom, hsl(45 10% 93%) 0 33.34%, transparent 33.34% 66.66%, hsl(45 10% 93%) 66.66%),
    linear-gradient(135deg, hsl(145 80% 52%), hsl(145 60% 70%)) !important;
  background-size: 100% 100%, 100% 33.34% !important; background-position: 0 0, 0 50% !important; background-repeat: no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--sp8-l1)) 0 33.34%, rgb(0 0 0 / var(--sp8-l2)) 33.34% 66.66%, rgb(0 0 0 / var(--sp8-l3)) 66.66%);
          mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--sp8-l1)) 0 33.34%, rgb(0 0 0 / var(--sp8-l2)) 33.34% 66.66%, rgb(0 0 0 / var(--sp8-l3)) 66.66%);
  animation: sp8L1 .7s ease-out 3.2s forwards, sp8L2 .7s ease-out 4s forwards, sp8L3 .7s ease-out 4.8s forwards;
}
@keyframes sp8L1 { to { --sp8-l1: 1; } }
@keyframes sp8L2 { to { --sp8-l2: 1; } }
@keyframes sp8L3 { to { --sp8-l3: 1; } }

.spade-full-hero .spade-full-hero__subtitle {
  max-width: 680px !important; margin: 0 auto 56px !important; font-family: 'Inter', sans-serif !important;
  font-size: 22px !important; line-height: 1.55 !important; color: hsl(45 10% 93% / 0.9) !important;
  opacity: 0; animation: sp8HeroIn .7s ease-out 6s forwards;
}
.spade-full-hero .spade-full-hero__subtitle::after { content: none !important; }

.spade-full-hero .spade-full-hero__cta-group {
  padding: 0 !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center !important;
  column-gap: 16px; row-gap: 36px; width: 100%;
  opacity: 0; animation: sp8HeroIn .7s ease-out 7.5s forwards;
}
.spade-full-hero .spade-full-hero__cta-group::before {
  content: ""; flex: 0 0 100%; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='816' height='30' viewBox='0 0 816 30'%3E%3Cg font-family='Inter, -apple-system, Segoe UI, Helvetica, Arial, sans-serif' font-size='14' font-weight='500' letter-spacing='0.35' fill='rgb%28239,238,235%29'%3E%3Crect x='0.5' y='0.5' width='77' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='39.0' y='19.5' text-anchor='middle'%3EOpenAI%3C/text%3E%3Crect x='90.5' y='0.5' width='94' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='137.5' y='19.5' text-anchor='middle'%3EAnthropic%3C/text%3E%3Crect x='197.5' y='0.5' width='73' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='234.0' y='19.5' text-anchor='middle'%3EMistral%3C/text%3E%3Crect x='283.5' y='0.5' width='70' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='318.5' y='19.5' text-anchor='middle'%3EDeepL%3C/text%3E%3Crect x='366.5' y='0.5' width='128' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='430.5' y='19.5' text-anchor='middle'%3EGoogle Gemini%3C/text%3E%3Crect x='507.5' y='0.5' width='137' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='576.0' y='19.5' text-anchor='middle'%3EMicrosoft Azure%3C/text%3E%3Crect x='657.5' y='0.5' width='158' height='29' rx='14.5' fill='rgb%2830,34,41%29' fill-opacity='0.4' stroke='rgb%2835,39,47%29'/%3E%3Ctext x='736.5' y='19.5' text-anchor='middle'%3Eund sechs weitere%3C/text%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.spade-full-hero a.spade-full-hero__cta {
  width: auto !important; padding: 14px 32px !important; border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important;
  background: hsl(145 80% 52%) !important; color: hsl(220 20% 6%) !important; border: 0 !important;
  box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; transition: box-shadow .15s, background-color .15s;
}
.spade-full-hero a.spade-full-hero__cta:hover { box-shadow: 0 0 40px -10px hsl(145 80% 52% / 0.4) !important; }
.spade-full-hero a.spade-full-hero__cta--secondary {
  background: transparent !important; color: hsl(45 10% 93%) !important; font-weight: 500 !important;
  border: 1px solid hsl(220 15% 16%) !important; box-shadow: none !important;
}
.spade-full-hero a.spade-full-hero__cta--secondary:hover { background: hsl(220 15% 14% / 0.5) !important; box-shadow: none !important; }
/* Chevron nach unten: erscheint, wenn das Video durch ist; Klick führt zum nächsten Abschnitt */
.spade-full-hero > button[aria-label] {
  display: flex !important; align-items: center; justify-content: center; left: 0 !important; right: 0 !important; bottom: 28px !important;
  width: 48px; height: 48px; margin: 0 auto !important; padding: 0 !important; transform: none; translate: none; z-index: 25 !important;
  color: hsl(145 80% 52%) !important; opacity: 0; visibility: hidden;
  animation: sp8ChevIn .6s ease-out 10.4s forwards, sp8Chev 2s ease-in-out 11s infinite !important;
}
.spade-full-hero > button[aria-label]:hover { color: hsl(145 60% 70%) !important; }
.spade-full-hero > button[aria-label] svg { width: 36px; height: 36px; }
@keyframes sp8ChevIn { to { opacity: 1; visibility: visible; } }
@keyframes sp8Chev { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
header[data-sp8-site-nav] { background: hsl(220 20% 6% / 0.8) !important; border-bottom-color: hsl(220 15% 16% / 0.5) !important; }

@media (max-height: 900px) and (min-width: 768px) {
  .spade-full-hero__title > span:last-child { font-size: 84px !important; margin-bottom: 28px !important; }
  .spade-full-hero__title > span:first-child { margin-bottom: 32px !important; }
  .spade-full-hero .spade-full-hero__subtitle { margin-bottom: 44px !important; }
}
@media (max-width: 1023px) { .spade-full-hero__title > span:last-child { font-size: 72px !important; } }
@media (max-width: 767px) {
  section.spade-full-hero { min-height: 640px !important; }
  .spade-full-hero .spade-full-hero__content { padding: 88px 16px 40px !important; }
  .spade-full-hero__title > span:first-child { padding: 6px 14px; font-size: 11px !important; margin-bottom: 28px !important; animation-delay: .95s; }
  .spade-full-hero__title > span:last-child { font-size: 48px !important; margin-bottom: 24px !important; animation-delay: 1.5s, 1.9s, 2.3s; }
  .spade-full-hero .spade-full-hero__subtitle { font-size: 18px !important; margin-bottom: 36px !important; animation-delay: 2.9s; }
  .spade-full-hero .spade-full-hero__cta-group { animation-delay: 3.6s; flex-direction: column !important; align-items: center; row-gap: 20px; }
  .spade-full-hero .spade-full-hero__cta-group::before { flex-basis: auto; width: 100%; height: 40px; }
  .spade-full-hero .spade-full-hero__overlay { animation-delay: .95s; }
  .spade-full-hero .spade-full-hero__overlay::after { animation-delay: 5s; }
}
@media (prefers-reduced-motion: reduce) {
  .spade-full-hero *, .spade-full-hero *::before, .spade-full-hero *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* ===== O. Unterseiten (v1.0.16): Spade-Vibes-Grundstil für alle Seiten außer der bisherigen Startseite ===== */
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .sp8-tiles-grid { gap: 16px !important; max-width: 1024px; margin-left: auto !important; margin-right: auto !important; width: 100%; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile {
  padding: 24px !important; border-radius: 12px !important; border: 1px solid hsl(220 15% 16%) !important; height: auto !important;
  background: hsl(220 18% 9% / 0.3) !important; box-shadow: none !important; text-align: left; transform: none !important; transition: border-color .3s, box-shadow .3s;
}
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile:hover { border-color: hsl(145 80% 52% / 0.3) !important; box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile :is([data-slot="card-content"], .spade-tile-content, .flex.pt-8) { padding: 0 !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile .space-y-3 > * + * { margin-top: 0 !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .flex.pt-8 { justify-content: flex-start !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tile-content > div { text-align: left !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tile-icon {
  width: 40px !important; height: 40px !important; margin: 0 0 12px !important; border-radius: 12px !important; border: 0 !important; box-shadow: none !important;
  display: flex !important; align-items: center; justify-content: center; background: hsl(145 80% 52% / 0.15) !important; color: hsl(145 80% 52%) !important;
}
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tile-icon svg { width: 20px !important; height: 20px !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile h3 { font: 600 20px/28px 'Space Grotesk', sans-serif !important; color: hsl(45 10% 93%) !important; margin: 0 0 4px !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] :is(.spade-tile-description, .spade-tile-description p) { font-size: 16px !important; line-height: 26px !important; color: hsl(45 10% 93%) !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile img { border-radius: 8px; border: 1px solid hsl(220 15% 16%); }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tiles-header h2 { white-space: pre-line; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tiles-header::before { content: none; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tiles-header { max-width: 1024px; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-tiles-header h2 { max-width: none; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) [data-segment-type]:first-child > section[data-spade-idx^="intro-"] { padding-top: 160px !important; }
@media (max-width: 1023px) { body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .sp8-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px) { body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .sp8-tiles-grid { grid-template-columns: 1fr !important; } }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] a.spade-tile-cta { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; color: hsl(145 80% 52%) !important; font: 500 16px/24px 'Inter', sans-serif !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] a.spade-tile-cta:hover { text-decoration: underline; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) section[data-segment-type="tiles"] .spade-feature-tile .pt-6 { padding-top: 16px !important; justify-content: flex-start !important; }

/* P. Produkt: „So arbeitet dein Team“ als Ablauf mit Verbindungspfeilen */
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .sp8-tiles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 40px 48px !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile { overflow: visible !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-tile-icon {
  width: 56px !important; height: 56px !important; border-radius: 9999px !important; border: 2px solid hsl(145 80% 52%) !important;
  background: hsl(145 80% 52% / 0.12) !important; box-shadow: 0 0 24px -6px hsl(145 80% 52% / 0.6) !important; margin-bottom: 16px !important;
}
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-tile-icon svg { width: 24px !important; height: 24px !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile::after {
  content: ""; position: absolute; top: 44px; left: 100%; width: 48px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, hsl(145 80% 52% / 0.7), hsl(145 80% 52% / 0.25));
}
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile::before {
  content: ""; position: absolute; top: 39px; left: calc(100% + 40px); width: 0; height: 0; pointer-events: none; z-index: 1;
  border-left: 9px solid hsl(145 80% 52% / 0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(4n)::after, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(4n)::before, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:last-child::after, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:last-child::before { display: none; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(6) { border-color: hsl(145 80% 52% / 0.5) !important; box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.4) !important; }
@media (max-width: 1023px) {
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .sp8-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(4n)::after, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(4n)::before { display: none; }
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(2n)::after, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(2n)::before { display: none; }
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(odd):not(:last-child)::after, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:nth-child(odd):not(:last-child)::before { display: block; }
}
@media (max-width: 639px) {
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .sp8-tiles-grid { grid-template-columns: 1fr !important; }
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:not(:last-child)::after { display: block !important; top: 100%; left: 51px; width: 2px; height: 40px; background: linear-gradient(180deg, hsl(145 80% 52% / 0.7), hsl(145 80% 52% / 0.25)); }
  body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-f7f13287-1a8e-43a1-9709-c17029797bf9 .spade-feature-tile:not(:last-child)::before { display: block !important; top: calc(100% + 32px); left: 46px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid hsl(145 80% 52% / 0.8); border-bottom: 0; }
}

/* ===== Q. Startseite: Themen-Überblick mit 4 Karten (v1.0.20) ===== */
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-tiles-header::before { content: "Überblick"; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .sp8-tiles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; width: 100%; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-feature-tile {
  padding: 24px !important; border-radius: 12px !important; border: 1px solid hsl(220 15% 16%) !important; height: 100% !important;
  background: hsl(220 18% 9% / 0.3) !important; box-shadow: none !important; text-align: left; transform: none !important; transition: border-color .3s, box-shadow .3s;
  display: flex !important; flex-direction: column;
}
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-feature-tile:hover { border-color: hsl(145 80% 52% / 0.3) !important; box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3) !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-feature-tile :is([data-slot="card-content"], .spade-tile-content, .flex.pt-8) { padding: 0 !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-feature-tile .space-y-3 > * + * { margin-top: 0 !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-tile-content > div { text-align: left !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-tile-icon {
  width: 40px !important; height: 40px !important; margin: 0 0 12px !important; border-radius: 12px !important; border: 0 !important; box-shadow: none !important;
  display: flex !important; align-items: center; justify-content: center; background: hsl(145 80% 52% / 0.15) !important; color: hsl(145 80% 52%) !important;
}
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-tile-icon svg { width: 20px !important; height: 20px !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-feature-tile h3 { font: 600 20px/28px 'Space Grotesk', sans-serif !important; color: hsl(45 10% 93%) !important; margin: 0 0 4px !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 :is(.spade-tile-description, .spade-tile-description p) { font-size: 16px !important; line-height: 26px !important; color: hsl(45 10% 93%) !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .spade-feature-tile :is(.pt-6, .flex.pt-8) { padding-top: 16px !important; margin-top: auto; justify-content: flex-start !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 a.spade-tile-cta { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; color: hsl(145 80% 52%) !important; font: 500 16px/24px 'Inter', sans-serif !important; }
#tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 a.spade-tile-cta:hover { text-decoration: underline; }
@media (max-width: 1023px) { #tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .sp8-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px) { #tiles-735c2ffc-d0ae-438c-957f-123d32c22c99 .sp8-tiles-grid { grid-template-columns: 1fr !important; } }

/* ===== R. Produkt: Bibliothek der Möglichkeiten als Hintergrund von „Ein Kern“ (v1.0.21) ===== */
#segment-39d96ab5-b32c-46d7-960d-f15a984048c3 { display: none !important; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-074e9e2d-a4b5-4866-86bd-88f60c65d9bc {
  padding: 200px 0 !important; border-top: 0 !important;
  background: linear-gradient(to bottom, hsl(220 20% 6%) 0%, hsl(220 20% 6% / 0.55) 20%, hsl(220 20% 6% / 0.3) 50%, hsl(220 20% 6% / 0.7) 80%, hsl(220 20% 6%) 100%),
    url("https://pibtjxoeelwrioegarwi.supabase.co/storage/v1/object/public/cms-media/uploads/4ae5fbd2-4a74-4e51-b87e-053634d8ba97/a2c6a9ec-df76-4ce5-a577-0ad1774a7752-sp8_-Bibliothek-der-Moeglichkeiten.jpeg") center 35% / cover no-repeat !important;
}
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-074e9e2d-a4b5-4866-86bd-88f60c65d9bc .spade-tiles-header::before { content: "Die Bibliothek der Möglichkeiten"; }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-074e9e2d-a4b5-4866-86bd-88f60c65d9bc .spade-tiles-header h2, body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-074e9e2d-a4b5-4866-86bd-88f60c65d9bc .spade-tiles-header .sp8-rich-text p { text-shadow: 0 2px 24px rgb(0 0 0 / 0.7); }
body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-074e9e2d-a4b5-4866-86bd-88f60c65d9bc .spade-feature-tile { background: hsl(220 20% 6% / 0.6) !important; border-color: hsl(145 80% 52% / 0.2) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 767px) { body:not(:has(#segment-209360ef-310e-4053-a079-a905a0294e57)) #tiles-074e9e2d-a4b5-4866-86bd-88f60c65d9bc { padding: 120px 0 !important; } }

/* ===== S. Produkt: Editor-Screenshot als leuchtendes Fenster mit 3D-Neigung (v1.0.21) ===== */
#image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 { padding: 24px 0 120px !important; perspective: 1600px; }
#image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 figure {
  max-width: 1100px; margin: 0 auto !important; padding-top: 36px; border-radius: 14px;
  background: hsl(220 18% 9%); border: 1px solid hsl(220 15% 20%);
  box-shadow: 0 40px 120px -30px hsl(145 80% 52% / 0.35), 0 0 0 1px hsl(145 80% 52% / 0.08);
  transform-origin: 50% 100%;
}
#image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 figure::before {
  content: ""; position: absolute; top: 13px; left: 16px; width: 10px; height: 10px; border-radius: 9999px;
  background: hsl(220 10% 32%); box-shadow: 16px 0 0 hsl(220 10% 32%), 32px 0 0 hsl(145 80% 52%);
}
#image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 figure::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -70px; height: 140px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, hsl(145 80% 52% / 0.35), transparent 70%); filter: blur(30px);
}
#image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 figure > div { border-radius: 0 0 14px 14px !important; }
#image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 img { border: 0 !important; border-top: 1px solid hsl(220 15% 20%) !important; margin-bottom: -30px; }
@keyframes sp8Tilt { from { transform: rotateX(18deg) scale(0.94); opacity: 0.6; } to { transform: none; opacity: 1; } }
@supports (animation-timeline: view()) {
  #image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 figure { animation: sp8Tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@media (prefers-reduced-motion: reduce) { #image-26b9cf5a-51ad-4edd-a1e6-1837f6486902 figure { animation: none !important; } }

/* ===== T. Startseite: Überleitung zur Produktseite – Blick durchs Fenster (v1.0.22) ===== */
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a { padding-bottom: 0 !important; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .spade-tiles-header { margin-bottom: 0 !important; }
#tiles-b7055569-d76d-49ee-8884-809ff970ba5a .sp8-tiles-grid { display: none !important; }
[data-segment-type] + [data-segment-type] > #image-e482af17-42f6-4c0f-bfee-1ca15bee8255 { border-top: 0 !important; }
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 { padding: 56px 0 128px !important; }
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 figure {
  max-width: 1000px; margin: 0 auto !important; padding-top: 32px; border-radius: 14px 14px 0 0;
  background: hsl(220 18% 9%); border: 1px solid hsl(220 15% 20%); border-bottom: 0;
  box-shadow: 0 -20px 100px -40px hsl(145 80% 52% / 0.4);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  transition: box-shadow .4s;
}
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 figure:hover { box-shadow: 0 -20px 120px -30px hsl(145 80% 52% / 0.6); }
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 figure::before {
  content: ""; position: absolute; top: 11px; left: 16px; width: 10px; height: 10px; border-radius: 9999px; z-index: 1;
  background: hsl(220 10% 32%); box-shadow: 16px 0 0 hsl(220 10% 32%), 32px 0 0 hsl(145 80% 52%);
}
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 figure > div { border-radius: 0 !important; aspect-ratio: 2 / 0.62; }
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 img { border: 0 !important; height: 100% !important; object-fit: cover !important; object-position: 50% 0 !important; }
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 div:has(> a.spade-image-cta) { justify-content: center !important; margin-top: 8px !important; }
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 a.spade-image-cta {
  background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important;
  color: hsl(145 80% 52%) !important; font: 500 18px/28px 'Inter', sans-serif !important;
}
#image-e482af17-42f6-4c0f-bfee-1ca15bee8255 a.spade-image-cta:hover { text-decoration: underline; }
@media (max-width: 767px) { #image-e482af17-42f6-4c0f-bfee-1ca15bee8255 { padding: 40px 0 96px !important; } }