/* ==========================================================================
   ClockTeam Marketing – V4
   Optisches Ziel: das vom Kunden freigegebene Referenzbild (helle,
   hochwertige B2B-SaaS-Optik; Navy/Anthrazit als starke Grundfarbe;
   ClockTeam-Türkis als Akzent; Wechsel hell/dunkel; große
   Produktflächen im Wechsel mit Text; kompakte Preiskarten;
   kräftiger Abschluss-CTA; dunkler Footer).
   Farbwerte (--ct-bg-dark/-mid/-light, Hero-Verlauf) sind bewusst
   identisch zu den bereits im Projekt bewährten, echten ClockTeam-
   Markenwerten aus marketing/css/home.css (nur gelesen, nicht
   veraendert) uebernommen - keine neu erfundene Farbwelt.

   Ueberarbeitung (Einpass-Redesign nach Referenzbild-Feedback):
   - Abstaende in den alternierenden Produktabschnitten deutlich
     reduziert (Kundenwunsch: "deutlich weniger Leerraum als aktuell").
   - Bildplatzhalter durch hochwertigere, rein abstrakte CSS-Mockups
     ersetzt (Browser-/Geraete-Rahmen mit Skeleton-Inhalten) statt
     leerer Flaechen mit Hinweistext - ohne erfundene Screenshots,
     Zahlen oder Kundendaten.
   - Hero-Produktbild: nutzt jetzt das bereits vorhandene, echte
     ClockTeam-Bild (assets/mein bild.png, bereits live auf V1) statt
     eines Platzhalters, da es inhaltlich exakt passt.
   - Bestehende Scroll-Reveal-Animationen (.ct-reveal / .ct-v4-anim-*)
     unveraendert beibehalten.

   Nur fuer body[data-ct-page="index-v4"]. Laedt NACH main.css.
   main.css / layout.js / site.js / pricing-config.js bleiben
   unveraendert (Nav, Footer, Preise, Reveal-Animation, Cookie-Banner).
   ========================================================================== */

body[data-ct-page="index-v4"] {
  --v4-dark: #071629;
  --v4-dark-mid: #10243a;
  --v4-dark-grad: linear-gradient(135deg, #061727 0%, #0b2238 55%, #12314b 100%);
  --v4-cta-grad: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(24,191,174,.14), transparent),
                 linear-gradient(145deg, #071629 0%, #10243a 100%);
  --v4-light: #eaf0f6;
  --v4-light-2: #f4f8fb;
  --v4-card: #ffffff;
  --v4-text-dark: #0b172a;
  --v4-text-light: #f8fafc;
  --v4-accent: #18bfae;
  --v4-accent-hover: #14a89a;
  --v4-accent-soft: rgba(24, 191, 174, .12);
  --v4-border: #e1e8f0;
  --v4-muted: #5c6b7f;
  /* Kleine Akzentfarben-Palette (ergaenzend zu Gruen/Weiss/Navy) - Werte
     bewusst aus dem echten Dienstplan-Farblegende-Schema (Fruehschicht/
     Spaetschicht/Nachtschicht/Urlaub) abgeleitet, damit die Akzente auch
     inhaltlich zur Produktoberflaeche passen statt frei erfunden zu sein. */
  --v4-accent-2: #5b7fdc;
  --v4-accent-3: #8b7cf6;
  --v4-accent-4: #e8a93b;
  background: var(--v4-light);
}

/* Sanftes Scrollen zu den V4-eigenen Nav-Ankern (siehe Script am Seitenende
   von index-v4.html). "html" statt body, da das der tatsaechlich scrollende
   Wurzel-Container ist - diese Regel wirkt trotzdem nur auf V4, weil diese
   CSS-Datei ausschliesslich von index-v4.html geladen wird. */
html:has(body[data-ct-page="index-v4"]) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body[data-ct-page="index-v4"]) { scroll-behavior: auto; }
}
/* Abstand nach oben fuer alle Sprungziele, damit die sticky Navigation die
   Ueberschrift nicht verdeckt. */
body[data-ct-page="index-v4"] #hero,
body[data-ct-page="index-v4"] #funktionen,
body[data-ct-page="index-v4"] #dienstplanung,
body[data-ct-page="index-v4"] #preise,
body[data-ct-page="index-v4"] #unternehmen,
body[data-ct-page="index-v4"] #faq,
body[data-ct-page="index-v4"] #kontakt {
  scroll-margin-top: calc(var(--ct-nav-h) + 16px);
}

body[data-ct-page="index-v4"] .ct-nav { box-shadow: 0 1px 0 rgba(7,22,41,.06); }
/* Runde "Hero nach Referenzbild": Logo soll ca. 1,5-2x so gross wirken wie
   zuvor ("genug Platz lassen, damit es hochwertig aussieht") - dafuer wird
   die Nav-Leisten-Hoehe (--ct-nav-h, aus main.css) NUR fuer V4 per CSS-
   Custom-Property-Ueberschreibung vergroessert (home-v4.css laedt nach
   main.css; ein Wert, der direkt auf body[data-ct-page="index-v4"] gesetzt
   wird, gewinnt gegenueber dem von :root geerbten main.css-Wert, unabhaengig
   von Media-Query-Reihenfolge). main.css selbst bleibt unveraendert - alle
   anderen Seiten (V1/V2/V3) sowie main.css' eigener 768px-Mobile-Wert sind
   nicht betroffen. Der bestehende scroll-margin-top (Zeile ~74, nutzt
   ebenfalls var(--ct-nav-h)) passt sich dadurch automatisch an. */
body[data-ct-page="index-v4"] { --ct-nav-h: 112px; }
/* Tablet (768-991px): die gemeinsame Nav (main.css/layout.js, unveraendert)
   hat hier bereits vor dieser Runde nicht genug Breite fuer alle Links +
   Sprachumschalter + Buttons (bestehende, dokumentierte Einschraenkung,
   identisch auch auf V1 vorhanden - main.css darf nicht geaendert werden).
   Die volle 1,5-2x-Logogroesse wuerde dieses bestehende Problem hier
   spuerbar verschaerfen (das "Firmen-Login" wurde dadurch abgeschnitten) -
   daher auf dieser Zwischenstufe ein etwas moderaterer Zuwachs, auf
   Desktop (≥992px) bleibt die volle Groesse wie gewuenscht. */
@media (max-width: 991px) {
  body[data-ct-page="index-v4"] { --ct-nav-h: 80px; }
}
@media (max-width: 767px) {
  body[data-ct-page="index-v4"] { --ct-nav-h: 88px; }
}
/* Original-ClockTeam-Logo im Kopfbereich (Kundenwunsch: bereits im
   Hauptsystem produktive Datei statt des bisherigen abstrakten
   Platzhalter-Icons aus js/layout.js - siehe assets/clockteam-logo-original.png,
   eine unveraenderte, nur verkleinerte Kopie von assets/images/clockteam-logo.png
   aus dem Hauptsystem/Terminal - Symbol + Schriftzug "ClockTeam" zusammen,
   wie vom Kunden gewuenscht). Ersetzt main.css' feste 42px/32px-Box durch
   freie Groessen-Skalierung mit object-fit:contain, damit das (nicht
   quadratische) Original weder verzerrt noch beschnitten wird. Nur V4
   betroffen - main.css/layout.js sowie Footer und V1/V2/V3 zeigen weiterhin
   das bisherige Icon.
   Groesse (Runde "Hero nach Referenzbild"): von 52px/40px auf 92px/68px
   Hoehe erhoeht (~1,77x) - im gewuenschten 1,5-2x-Rahmen, Seitenverhaeltnis
   bleibt durch object-fit:contain unangetastet (nicht verzerrt). */
body[data-ct-page="index-v4"] .ct-nav__brand .ct-v4-brand-logo {
  width: auto; height: 92px; max-width: 390px; object-fit: contain;
}
/* Tablet-Zwischenstufe (siehe Kommentar bei --ct-nav-h weiter oben): mit
   72px immer noch spuerbar groesser als vorher (52px, +38%), aber ohne die
   Nav-Buttons abzuschneiden. */
@media (max-width: 991px) {
  body[data-ct-page="index-v4"] .ct-nav__brand .ct-v4-brand-logo {
    height: 60px; max-width: 255px;
  }
}
@media (max-width: 767px) {
  body[data-ct-page="index-v4"] .ct-nav__brand .ct-v4-brand-logo {
    height: 68px; max-width: 290px;
  }
}
/* Der Markenname steckt im Original-Logo bereits als Schriftzug - der
   bisherige zusaetzliche Textknoten "ClockTeam" (aus navHtml()) bleibt fuer
   Screenreader/Barrierefreiheit erhalten, wird optisch aber nicht mehr
   doppelt angezeigt (Standard-"visually hidden"-Technik). */
body[data-ct-page="index-v4"] .ct-v4-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Startseite optisch als aktueller Bereich hervorgehoben, passend zur
   Referenzvorlage - reine Darstellung, der Link selbst (aus der
   gemeinsamen navHtml()) bleibt unveraendert. */
body[data-ct-page="index-v4"] .ct-nav__links li:first-child a {
  color: var(--v4-accent);
  position: relative;
}
body[data-ct-page="index-v4"] .ct-nav__links li:first-child a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--v4-accent); border-radius: 2px;
}
/* Mobiles Ausklapp-Menue (main.css: .ct-nav.open .ct-nav__links/-__actions)
   bekommt fuer body[data-ct-page="index"] bereits einen deckenden Hinter-
   grund - fuer alle anderen Seiten (V2/V3/V4) fehlt das, wodurch das Menue
   transparent ueber dem Hero liegt und unlesbar wird. Fuer V4 hier
   nachgeruestet, exakt nach dem gleichen, bereits bewaehrten Muster wie bei
   V1 - main.css/layout.js bleiben unveraendert. */
@media (max-width: 767px) {
  body[data-ct-page="index-v4"] .ct-nav.open .ct-nav__links,
  body[data-ct-page="index-v4"] .ct-nav.open .ct-nav__actions {
    background: var(--v4-dark); box-shadow: 0 16px 32px -12px rgba(7,22,41,.45);
  }
  body[data-ct-page="index-v4"] .ct-nav.open .ct-nav__links { border-bottom-color: rgba(255,255,255,.08); }
  body[data-ct-page="index-v4"] .ct-nav.open .ct-nav__links a { color: rgba(255,255,255,.88); }
  body[data-ct-page="index-v4"] .ct-nav.open .ct-nav__links li:first-child a { color: var(--v4-accent); }
  body[data-ct-page="index-v4"] .ct-nav.open .ct-nav__actions .ct-btn--ghost {
    border-color: rgba(255,255,255,.3); color: #fff;
  }
}

/* Sprachumschalter (DE/EN/FR) - kompaktes <select>, vom V4-Script in
   .ct-nav__actions eingefuegt (siehe index-v4.html). Bewusst schlicht/klein
   gehalten, damit die ohnehin schon enge Nav-Actionsleiste nicht zusaetzlich
   ueberladen wird; nutzt denselben Container wie Firmen-Login/Kostenlos
   testen und erbt dadurch automatisch dessen mobilen Hintergrund. */
body[data-ct-page="index-v4"] .ct-v4-lang-switch { display: flex; align-items: center; }
body[data-ct-page="index-v4"] .ct-v4-lang-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-weight: 700; font-size: .82rem; letter-spacing: .02em;
  color: var(--v4-text-dark); background: #fff;
  border: 1px solid var(--v4-border); border-radius: 999px;
  padding: .4rem 1.6rem .4rem .85rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235c6b7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 12px;
}
body[data-ct-page="index-v4"] .ct-v4-lang-select:hover { border-color: var(--v4-accent); }
body[data-ct-page="index-v4"] .ct-v4-lang-select:focus-visible { outline: 2px solid var(--v4-accent); outline-offset: 2px; }
body[data-ct-page="index-v4"] .ct-nav.open .ct-v4-lang-select {
  color: #fff; background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");
}
body[data-ct-page="index-v4"] .ct-nav.open .ct-v4-lang-switch { justify-content: center; margin-bottom: .35rem; }

/* -- Gemeinsame Section-Bausteine -- */
body[data-ct-page="index-v4"] .ct-v4-section { padding: clamp(2.75rem, 5vw, 4.5rem) 0; position: relative; }
body[data-ct-page="index-v4"] .ct-v4-section--light { background: var(--v4-light); }
body[data-ct-page="index-v4"] .ct-v4-section--light-2 { background: var(--v4-light-2); }
body[data-ct-page="index-v4"] .ct-v4-section--dark {
  background: var(--v4-dark-grad);
  color: var(--v4-text-light);
}
/* Weichere Uebergaenge an den hell/dunkel-Wechseln: ein dezentes,
   verlaufendes Leuchten ueberbrueckt die harte Farbkante an Anfang und
   Ende jedes dunklen Abschnitts (Branchen, Mitarbeiterportal, Abschluss-
   CTA), statt eines abrupten Schnitts - dezent gehalten, keine eigene
   Sektion, keine Inhaltsaenderung. */
body[data-ct-page="index-v4"] .ct-v4-section--dark::before,
body[data-ct-page="index-v4"] .ct-v4-section--dark::after,
body[data-ct-page="index-v4"] .ct-v4-cta::before,
body[data-ct-page="index-v4"] .ct-v4-cta::after {
  content: ""; position: absolute; left: 50%; width: min(1100px, 92%); height: 240px;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(24,191,174,.16), transparent 70%);
}
body[data-ct-page="index-v4"] .ct-v4-section--dark::before,
body[data-ct-page="index-v4"] .ct-v4-cta::before { top: 0; transform: translateX(-50%) translateY(-55%); }
body[data-ct-page="index-v4"] .ct-v4-section--dark::after,
body[data-ct-page="index-v4"] .ct-v4-cta::after { bottom: 0; transform: translateX(-50%) translateY(55%); }
body[data-ct-page="index-v4"] .ct-v4-section--dark > .ct-container,
body[data-ct-page="index-v4"] .ct-v4-cta > .ct-container { position: relative; z-index: 1; }
body[data-ct-page="index-v4"] .ct-v4-eyebrow {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v4-accent); margin-bottom: .6rem;
}
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-eyebrow { color: var(--v4-accent); }
body[data-ct-page="index-v4"] .ct-v4-head { margin-bottom: 2rem; }
body[data-ct-page="index-v4"] .ct-v4-head--center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
body[data-ct-page="index-v4"] .ct-v4-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .55rem; color: var(--v4-text-dark); line-height: 1.2;
}
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-head h2 { color: #fff; }
body[data-ct-page="index-v4"] .ct-v4-head p { margin: 0; color: var(--v4-muted); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-head p { color: rgba(248,250,252,.72); }

/* ==========================================================================
   HERO
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-hero {
  background: var(--v4-dark-grad);
  color: var(--v4-text-light);
  /* Unten mehr Platz (Runde "Hero nach Referenzbild", Punkt 6): reserviert
     Raum fuer den weichen, geschwungenen Uebergang (.ct-v4-hero__curve)
     statt einer harten Kante - siehe weiter unten. */
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
body[data-ct-page="index-v4"] .ct-v4-hero__grid {
  /* Textspalte verbreitert und Bildspalte anteilig staerker gewichtet,
     damit das Produktbild "fast die gleiche optische Praesenz wie im
     Referenzbild" bekommt (Punkt 4). Abstand zwischen Text und Bild etwas
     reduziert (Punkt 7: "harmonisch naeher zusammenbringen").
     KORREKTUR (Kunden-Feedback): Produktbild war nach der Schriftgroessen-
     Korrektur wieder zu klein (die breitere Textspalte hatte dem Bild zu
     wenig Platz gelassen). Container-Breite fuer den Hero daher NUR hier
     (nicht global/--ct-max) leicht ueber die sonst auf der Seite genutzten
     1180px hinaus vergroessert, damit Text (bei jetzt groesserer Schrift,
     zweizeilig ohne Umbruch-Bruch) UND Bild gleichzeitig genug Platz haben.
     Alle anderen Abschnitte (Kernbereiche, Preise usw.) behalten weiterhin
     die Standard-Containerbreite - nicht betroffen.
     WEITERE KORREKTUR (Kunde: "Bild muss größer, ansonsten gut"): Container-
     Obergrenze von 1360px auf 1600px angehoben (bei ueblichen Desktop-
     Breiten wirkt effektiv nur noch die Bildschirmbreite selbst als Grenze,
     kein zusaetzliches Limit mehr).
     KORREKTUR (Finalisierungsrunde): Textspalte auf 46rem zurueckgesetzt.
     Per Canvas-Textmessung geprueft: "Personalplanung, die" benoetigt bei
     aktueller Schriftgroesse (61.6px, 800, letter-spacing -.03em) ca. 702px
     Breite - bei 42rem (672px, Zwischenstand aus einer frueheren Kunden-
     eigenen CSS-Anpassung) brach die erste Haelfte der Ueberschrift
     zusaetzlich selbst um (4 statt 2 Zeilen). 46rem (736px) schafft wieder
     ausreichend Reserve, bricht sauber zweizeilig. Das neue, schmalere
     Hero-Visual (.ct-v4-hero__art, max. 420px statt vorher bis zu 1000px)
     braucht die zuvor dafuer reservierte Breite ohnehin nicht mehr. */
  width: min(100% - 2.5rem, 1600px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center;
  position: relative; z-index: 1;
}
body[data-ct-page="index-v4"] .ct-v4-hero__eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,250,252,.62); margin-bottom: .75rem; display: block;
}
body[data-ct-page="index-v4"] .ct-v4-hero h1 {
  /* Deutlich groesser (Punkt 3: "Hauptueberschrift deutlich groesser und
     kraeftiger machen", an der Vorlage orientiert). font-weight bleibt 800
     (bereits die kraeftigste im Projekt genutzte Staerke, konsistent mit
     allen anderen Ueberschriften der Seite - siehe .ct-v4-head h2).
     KORREKTUR (Kunden-Feedback): war nach der Umbruch-Korrektur wieder zu
     klein geworden - jetzt +13% (3.4rem -> 3.85rem Maximalgroesse), passend
     zur gleichzeitig verbreiterten Textspalte, damit beide Haelften weiterhin
     sauber zweizeilig ohne zusaetzlichen Umbruch stehen. */
  font-size: clamp(2.5rem, 4.4vw, 3.85rem); line-height: 1.14; font-weight: 800;
  letter-spacing: -.03em; color: #fff; margin: 0 0 .8rem;
  /* Sicherheitsnetz (Finalisierungsrunde, Fund bei der Responsive-Pruefung
     "kein horizontaler Ueberlauf"): auf sehr schmalen Handybreiten war das
     einzelne lange Wort "Personalplanung," minimal breiter als die
     verfuegbare Spalte und wurde dadurch vom hero-eigenen overflow:hidden
     rechts abgeschnitten. overflow-wrap sorgt dafuer, dass ein einzelnes zu
     langes Wort im Zweifel selbst umbricht statt ueberzulaufen - greift nur
     im Extremfall, aendert am normalen zweizeiligen Umbruch nichts. */
  overflow-wrap: break-word;
}
/* Nur die zweite Haelfte der Ueberschrift ("einfach funktioniert.") ist
   tuerkis - der eigene Klassenname (statt eines generischen "h1 span")
   verhindert, dass ein zusaetzliches <span> (z.B. aus der Sprachumschalter-
   Runde fuer den ersten Teil "Personalplanung, die") versehentlich mitgefaerbt
   wird. Erster Teil bleibt WEISS (geerbt von .ct-v4-hero h1 { color:#fff }). */
body[data-ct-page="index-v4"] .ct-v4-hero h1 .ct-v4-hero-accent { color: var(--v4-accent); }
/* Gewuenschter Zeilenumbruch ("Personalplanung, die" / "einfach
   funktioniert.") nur auf Desktop erzwungen - auf Tablet/Handy bleibt der
   <br> ausgeblendet, damit der Text dort ganz normal/frei umbricht. */
body[data-ct-page="index-v4"] .ct-v4-hero-break { display: none; }
@media (min-width: 992px) {
  body[data-ct-page="index-v4"] .ct-v4-hero-break { display: block; }
}
body[data-ct-page="index-v4"] .ct-v4-hero__lead {
  font-size: 1.05rem; color: rgba(248,250,252,.74); line-height: 1.6; margin: 0 0 1.25rem; max-width: 40rem;
}
body[data-ct-page="index-v4"] .ct-v4-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
body[data-ct-page="index-v4"] .ct-v4-hero__actions .ct-btn--ghost {
  border-color: rgba(255,255,255,.3); color: #fff;
}
body[data-ct-page="index-v4"] .ct-v4-hero__actions .ct-btn--ghost:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff;
}
body[data-ct-page="index-v4"] .ct-v4-hero__trust {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.35rem;
}
body[data-ct-page="index-v4"] .ct-v4-hero__trust li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: rgba(248,250,252,.68);
}
body[data-ct-page="index-v4"] .ct-v4-hero__trust svg { width: 15px; height: 15px; color: var(--v4-accent); flex-shrink: 0; }
body[data-ct-page="index-v4"] .ct-v4-hero__visual { display: flex; justify-content: flex-end; position: relative; }

/* ==========================================================================
   HERO-VISUAL "Endgueltige Fertigstellung": statt des vorherigen Laptop/
   Tablet/Handy-Fotos (mit problematischem transform:scale-Hack) jetzt eine
   hochwertige, abstrakte Arbeitswelt-/Marken-Visualisierung - ein echtes,
   bereits vorhandenes ClockTeam-Markenbild (assets/images/mein-bild-rechts.png:
   leuchtende tuerkise Uhr + Pflanze vor dunklem Navy-Hintergrund, komplett
   mit echtem, freigegebenem ClockTeam-Wording gestaltet), reiner
   Bildausschnitt (keine neu gezeichnete/erfundene Grafik) ohne den linken
   Textbereich (der die eigene HTML-Headline doppeln wuerde) unter
   marketing/assets/v4-hero-clock.png abgelegt. Blendet am linken Rand
   weich in den dunklen Hero-Hintergrund ein (mask-image) statt als
   harte Bildkante/-karte zu wirken - passend zur Kundenvorgabe "ein
   hochwertiger abstrakter Software-/Arbeitswelt-Hintergrund". */
body[data-ct-page="index-v4"] .ct-v4-hero__art {
  position: relative; z-index: 1;
  width: min(100%, 420px);
  height: auto;
}
body[data-ct-page="index-v4"] .ct-v4-hero__art::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: min(700px, 160%); height: min(760px, 128%);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(24,191,174,.46), rgba(24,191,174,.16) 55%, transparent 76%);
  pointer-events: none; z-index: 0;
}
body[data-ct-page="index-v4"] .ct-v4-hero__art img {
  position: relative; z-index: 1;
  width: 100%; height: auto; object-fit: contain; object-position: 50% 32%;
  display: block;
  -webkit-mask-image: none;
          mask-image: none;
}

/* -- Bildplatzhalter-Grundbaustein. Feste, seit V4-Auftrag unveraenderte
   Klassen (ct-v4-product-image / -schedule-image / -terminal-image /
   -employee-image / -portal-image / -cta-image) fuer Groesse + Seiten-
   verhaeltnis. Inhalt: entweder ein echtes ClockTeam-Bild (--photo) oder
   ein rein abstraktes CSS-Mockup (.ct-v4-mock), nie leer. -- */
body[data-ct-page="index-v4"] .ct-v4-shot {
  background: linear-gradient(155deg, #f8fbfd 0%, #eef3f8 100%);
  border: 1px solid var(--v4-border);
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center; color: var(--v4-muted);
  box-shadow: 0 30px 60px -20px rgba(7,22,41,.35);
  padding: 1.5rem;
}
body[data-ct-page="index-v4"] .ct-v4-shot svg { width: 30px; height: 30px; color: var(--v4-accent); }
body[data-ct-page="index-v4"] .ct-v4-shot span { font-size: .82rem; line-height: 1.5; max-width: 28ch; }
body[data-ct-page="index-v4"] .ct-v4-shot strong { color: var(--v4-text-dark); font-size: .9rem; }

/* Echtes Foto (Hero): Rahmen/Schatten von .ct-v4-shot bleiben, Inhalt
   fuellt die Flaeche randlos statt zentriertem Icon+Text. */
body[data-ct-page="index-v4"] .ct-v4-shot--photo {
  display: block; padding: 0; overflow: hidden; background: var(--v4-dark-mid);
}
body[data-ct-page="index-v4"] .ct-v4-shot--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Weicher, geschwungener Uebergang am unteren Hero-Rand statt einer harten
   Kante (Punkt 6, "ganz wichtig" laut Kundenwunsch). Eine einzelne, flache
   SVG-Kurve (kein Wellenmuster) in der Farbe des direkt folgenden hellen
   Bereichs (--v4-card, Weiss - identisch zum Hintergrund von
   .ct-v4-kernbereiche direkt danach), liegt innerhalb von .ct-v4-hero
   (overflow:hidden bleibt unangetastet) ganz unten, hinter dem eigentlichen
   Inhalt (z-index 0 vs. .ct-v4-hero__grid z-index 1). Der zusaetzliche
   Hero-Bodenabstand oben (padding-bottom) wurde bereits vergroessert, damit
   die Kurve nicht mit Text/Bild ueberlappt. Der bereits freigegebene
   tuerkise Glow-Uebergang von .ct-v4-kernbereiche::before (bleeded von
   dort nach oben in den Hero hinein) bleibt unveraendert bestehen und legt
   sich zusaetzlich ueber diese Kurve - beide zusammen ergeben den weichen
   Gesamtuebergang aus der Vorlage.
   KORREKTUR (Kunden-Feedback nach erster Umsetzung): Kurvenrichtung war
   umgekehrt (helle Flaeche woelbte sich nach oben in den Hero). Jetzt per
   SVG-Pfad in index-v4.html richtig herum: die DUNKLE Flaeche woelbt sich
   in der Mitte weit nach unten, links/rechts endet sie etwas hoeher - ein
   einzelner grosser, flacher, sehr weicher Bogen ohne Spitze/Welle. Nur der
   Pfad in der HTML wurde angepasst, diese CSS-Regeln (Container, Fuellfarbe)
   sind unveraendert. */
body[data-ct-page="index-v4"] .ct-v4-hero__curve {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(40px, 6vw, 72px);
  line-height: 0; pointer-events: none; z-index: 0;
}
body[data-ct-page="index-v4"] .ct-v4-hero__curve svg {
  display: block; width: 100%; height: 100%;
}
body[data-ct-page="index-v4"] .ct-v4-hero__curve-path { fill: var(--v4-card); }
body[data-ct-page="index-v4"] .ct-v4-portal-image {
  width: 100%; max-width: 300px; aspect-ratio: 9 / 17; border-radius: 34px;
}
body[data-ct-page="index-v4"] .ct-v4-cta-image {
  width: 100%; max-width: 760px; aspect-ratio: 1400 / 830; border-radius: 24px; margin: 2.25rem auto 0;
}

/* ==========================================================================
   ECHTER BILD-AUSSCHNITT (Dienstplanung)
   Nutzt einen gezielten Ausschnitt des bereits vorhandenen, echten
   ClockTeam-Bildes (assets/mein bild.png, bereits live auf V1) statt eines
   Platzhalters. Technik: ein <div> mit Hintergrundbild, dessen
   background-size/-position prozentual (nicht in px) berechnet sind -
   dadurch bleibt der gewaehlte Bildausschnitt bei jeder Containerbreite
   exakt erhalten (voll responsiv), ohne dass ein zusaetzliches Bild
   angelegt werden muss.
   Zeiterfassung / Mitarbeiterverwaltung / Abschluss-CTA nutzen seit dem
   Kunden-Feedback ("nimm genau diese Bilder") stattdessen eigene, aus dem
   vom Kunden freigegebenen Referenzbild ausgeschnittene Dateien
   (assets/v4-terminal.png / v4-employee.png / v4-cta.png) ueber das
   gleiche --photo-Muster wie der Hero - siehe Bericht: fuer das
   Mitarbeiterportal wurde die Referenz bewusst NICHT uebernommen, da der
   dortige Bildtext bei Vergroesserung nicht lesbar/fehlerfrei ist. -- */
body[data-ct-page="index-v4"] .ct-v4-shot--crop {
  display: block; padding: 0; overflow: hidden;
  background-image: url("../assets/mein bild.png?v=12");
  background-repeat: no-repeat;
  background-color: var(--v4-light-2);
}
/* Bildausschnitt vergroessert (Runde "Kernbereiche + Dienstplan"): zeigt
   jetzt den kompletten Wochenraster inkl. aller sieben Tage (Mo-So) und der
   Farb-Legende darunter, statt vorher an "Sa" abgeschnitten. Der rechte Rand
   ist bewusst exakt an der Stelle gewaehlt, an der im Originalfoto das
   danebenliegende Smartphone das Tablet zu ueberlappen beginnt - weiter
   nach rechts waere kein echter Bildinhalt mehr vorhanden. */
body[data-ct-page="index-v4"] .ct-v4-crop--schedule {
  background-size: 310.08% 258.03%;
  background-position: 82.07% 67.32%;
}

/* ==========================================================================
   GERAETE-MOCKUP (Mitarbeiterportal)
   Fuer diese eine Ansicht (persoenlicher Mitarbeiterportal-Login) liegt kein
   passender echter Bildausschnitt vor - daher ein Geraete-Mockup (dunkler
   Rahmen, heller "Screen" mit Notch). Statt der vorherigen bedeutungslosen
   Skeleton-Balken (Kundenfeedback "keine billigen CSS-Mockups") zeigt der
   Screen jetzt einen abstrakten Profil-Header (Avatar/Status als reine
   Formen, keine echten Namen/Fotos/Daten) und eine Menue-Liste mit den
   TATSAECHLICHEN Mitarbeiterportal-Funktionen - identischer Text wie in
   der Textspalte links (.ct-v4-feature__list, per data-i18n verknuepft),
   keine erfundenen Inhalte. Wirkt dadurch wie ein glaubwuerdiger App-
   Ausschnitt statt eines Platzhalters. */
body[data-ct-page="index-v4"] .ct-v4-shot.ct-v4-mock {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  text-align: left; background: var(--v4-dark-mid);
}
body[data-ct-page="index-v4"] .ct-v4-mock--device { padding: 12px; }
body[data-ct-page="index-v4"] .ct-v4-mock--device .ct-v4-mock__notch {
  width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.25);
  margin: 0 auto .55rem; flex-shrink: 0;
}
body[data-ct-page="index-v4"] .ct-v4-mock__body {
  flex: 1; background: var(--v4-card); border-radius: 18px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: 100%; padding: 1.1rem 1.05rem;
}
body[data-ct-page="index-v4"] .ct-v4-mock__header {
  display: flex; align-items: center; gap: .65rem;
  padding-bottom: .95rem; margin-bottom: .9rem;
  border-bottom: 1px solid rgba(11,23,42,.08);
}
body[data-ct-page="index-v4"] .ct-v4-mock__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--v4-accent), var(--v4-accent-2));
}
body[data-ct-page="index-v4"] .ct-v4-mock__header-lines { flex: 1; display: grid; gap: .35rem; }
body[data-ct-page="index-v4"] .ct-v4-mock-line { display: block; height: 9px; border-radius: 5px; background: #dbe4ee; }
body[data-ct-page="index-v4"] .ct-v4-mock-line--name { height: 10px; width: 62%; background: var(--v4-text-dark); opacity: .22; }
body[data-ct-page="index-v4"] .ct-v4-mock-line--role { height: 8px; width: 42%; }
body[data-ct-page="index-v4"] .ct-v4-mock__status {
  width: 10px; height: 10px; border-radius: 50%; background: var(--v4-accent); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(24,191,174,.18);
}
body[data-ct-page="index-v4"] .ct-v4-mock__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
body[data-ct-page="index-v4"] .ct-v4-mock__menu li {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .6rem; border-radius: 12px; background: var(--v4-light-2);
  font-size: .8rem; font-weight: 600; color: var(--v4-text-dark); line-height: 1.3;
}
body[data-ct-page="index-v4"] .ct-v4-mock__menu-icon {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
body[data-ct-page="index-v4"] .ct-v4-mock__menu-icon svg { width: 15px; height: 15px; }
body[data-ct-page="index-v4"] .ct-v4-mock__menu-icon--a { background: var(--v4-accent); }
body[data-ct-page="index-v4"] .ct-v4-mock__menu-icon--b { background: var(--v4-accent-2); }
body[data-ct-page="index-v4"] .ct-v4-mock__menu-icon--c { background: var(--v4-accent-3); }
body[data-ct-page="index-v4"] .ct-v4-mock__menu-icon--d { background: var(--v4-accent-4); }

/* ==========================================================================
   KERNBEREICHE (kompakte Icon-Reihe direkt unter dem Hero)
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche {
  background: var(--v4-card);
  padding: 2.25rem 0 3rem;
  position: relative;
}
/* Weicher Uebergang vom dunklen Hero zu diesem hellen Bereich: dasselbe
   dezente Leuchten wie bei den anderen hell/dunkel-Wechseln, hier auf der
   hellen Seite der Kante platziert (bleeds nach oben in den Hero hinein),
   damit .ct-v4-hero (overflow:hidden) nicht veraendert werden muss. Bereits
   freigegeben, unveraendert beibehalten. */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 92%); height: 200px;
  transform: translateX(-50%) translateY(-55%); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(24,191,174,.18), transparent 70%);
}
/* Weicher Uebergang Kernbereiche -> Dienstplan-Abschnitt: statt der
   vorherigen harten 1px-Trennlinie ein sanftes Ineinanderblenden von Weiss
   in den hell-blaeulichen Ton des Dienstplan-Abschnitts darunter (beide
   Flaechen sind ohnehin sehr hell, daher bewusst dezent statt eines
   auffaelligen Leucht-Effekts wie beim Hero-Uebergang). */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px;
  background: linear-gradient(to bottom, rgba(234,240,246,0), var(--v4-light));
  pointer-events: none; z-index: 0;
}
body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid { position: relative; z-index: 1; }
/* minmax(0, 1fr) statt reinem 1fr (hier und in allen Responsive-Varianten
   unten sowie bei .ct-v4-branchen__grid): sonst hat eine Grid-Spalte eine
   implizite Mindestbreite in Hoehe ihres Inhalts, wodurch eine Karte auf
   sehr schmalen Handybreiten (getestet 320px) den Kartenraster leicht
   ueberlaufen liess (gleicher Fund/Fix wie beim Hero-Textumbruch oben,
   Finalisierungsrunde). */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .65rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern__icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--v4-accent); color: #fff;
  box-shadow: 0 10px 18px -6px rgba(24,191,174,.45);
  display: flex; align-items: center; justify-content: center;
}
body[data-ct-page="index-v4"] .ct-v4-kern__icon svg { width: 26px; height: 26px; }
body[data-ct-page="index-v4"] .ct-v4-kern strong { font-size: .98rem; color: var(--v4-text-dark); font-weight: 700; }
body[data-ct-page="index-v4"] .ct-v4-kern span { font-size: .82rem; color: var(--v4-muted); }

/* Farbvarianz statt vier identischer tuerkiser Icons - orientiert an
   derselben Fruehschicht/Spaetschicht/Nachtschicht/Urlaub-Farblogik wie im
   echten Dienstplan-Bild oben. Kraeftige, deckende Kreisflaechen mit
   weissem Icon statt zartem Farbton, passend zur Referenzvorlage. */
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(2) .ct-v4-kern__icon { background: var(--v4-accent-2); box-shadow: 0 10px 18px -6px rgba(91,127,220,.45); }
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(3) .ct-v4-kern__icon { background: var(--v4-accent-3); box-shadow: 0 10px 18px -6px rgba(139,124,246,.45); }
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(4) .ct-v4-kern__icon { background: var(--v4-accent-4); box-shadow: 0 10px 18px -6px rgba(232,169,59,.45); }

/* ==========================================================================
   PRODUKTABSCHNITTE im Wechsel (Text/Bild, Bild/Text, Text/Bild)
   Abstaende bewusst kompakter als in der Vorversion.
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-feature {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 4vw, 3.25rem); align-items: center;
}
body[data-ct-page="index-v4"] .ct-v4-feature--reverse .ct-v4-feature__text { order: 2; }
body[data-ct-page="index-v4"] .ct-v4-feature--reverse .ct-v4-feature__visual { order: 1; }
body[data-ct-page="index-v4"] .ct-v4-feature__text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--v4-text-dark); margin: 0 0 .7rem; line-height: 1.22;
}
body[data-ct-page="index-v4"] .ct-v4-feature__text > p {
  color: var(--v4-muted); font-size: 1rem; line-height: 1.6; margin: 0 0 1.1rem; max-width: 42ch;
}
body[data-ct-page="index-v4"] .ct-v4-feature__list { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .5rem; }
body[data-ct-page="index-v4"] .ct-v4-feature__list li {
  display: flex; align-items: flex-start; gap: .55rem; font-size: .93rem; color: var(--v4-text-dark);
}
body[data-ct-page="index-v4"] .ct-v4-feature__list svg { width: 18px; height: 18px; color: var(--v4-accent); flex-shrink: 0; margin-top: 1px; }
/* Fund bei der visuellen Endkontrolle dieser Runde: das Mitarbeiterportal
   ist der einzige dunkle Abschnitt, der den (sonst nur auf hellem
   Hintergrund genutzten) .ct-v4-feature-Textblock verwendet - Ueberschrift,
   Absatz und Haekchen-Liste standen dadurch in den dunklen Textfarben
   (var(--v4-text-dark)/var(--v4-muted), fuer helle Abschnitte gedacht) auf
   dunklem Navy-Hintergrund und waren praktisch unlesbar. Gleiche helle
   Farbgebung wie bereits bei .ct-v4-section--dark .ct-v4-head (siehe oben)
   ergaenzt. */
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-feature__text h2 { color: #fff; }
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-feature__text > p { color: rgba(248,250,252,.72); }
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-feature__list li { color: rgba(248,250,252,.88); }
body[data-ct-page="index-v4"] .ct-v4-feature__visual { position: relative; display: flex; justify-content: center; }
body[data-ct-page="index-v4"] .ct-v4-feature__blob {
  position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(24,191,174,.16), rgba(24,191,174,0) 70%);
  z-index: 0;
}
body[data-ct-page="index-v4"] .ct-v4-feature__visual .ct-v4-shot { position: relative; z-index: 1; }
body[data-ct-page="index-v4"] .ct-v4-btn-arrow { display: inline-block; margin-left: .3rem; transition: transform .2s; }
body[data-ct-page="index-v4"] .ct-btn--secondary:hover .ct-v4-btn-arrow { transform: translateX(3px); }

body[data-ct-page="index-v4"] .ct-v4-schedule-image { width: 100%; max-width: 480px; aspect-ratio: 645 / 548; border-radius: 20px; }
body[data-ct-page="index-v4"] .ct-v4-employee-image { width: 100%; max-width: 340px; aspect-ratio: 720 / 822; border-radius: 20px; }
body[data-ct-page="index-v4"] .ct-v4-terminal-image { width: 100%; max-width: 300px; aspect-ratio: 3 / 3.6; border-radius: 24px; }

/* Sections direkt nacheinander ohne eigene Section-Umrandung sollen
   trotzdem knapper wirken: Feature-Sections ohne separate Kopfzeile
   (kein .ct-v4-head) verlieren dadurch automatisch dessen Abstand. */

/* ==========================================================================
   PREISE
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-pricing-toggle-wrap { text-align: center; margin-bottom: 2rem; }
body[data-ct-page="index-v4"] .ct-price-card {
  border-radius: 18px; border-color: var(--v4-border); background: #fff;
}
body[data-ct-page="index-v4"] .ct-price-card--popular {
  background: var(--v4-dark-grad);
  border-color: transparent;
  box-shadow: 0 24px 48px -12px rgba(7,22,41,.45);
}
body[data-ct-page="index-v4"] .ct-price-card--popular h3,
body[data-ct-page="index-v4"] .ct-price-card--popular .ct-price-card__value { color: #fff; }
body[data-ct-page="index-v4"] .ct-price-card--popular .ct-price-card__desc,
body[data-ct-page="index-v4"] .ct-price-card--popular .ct-price-card__amount small { color: rgba(248,250,252,.68); }
body[data-ct-page="index-v4"] .ct-price-card--popular li { color: rgba(248,250,252,.88); }
body[data-ct-page="index-v4"] .ct-price-card--popular .ct-price-card__badge {
  background: var(--v4-accent); color: #04211d;
}
body[data-ct-page="index-v4"] .ct-price-card--popular .ct-price-card__cta.ct-btn--primary {
  background: var(--v4-accent); box-shadow: 0 8px 20px rgba(24,191,174,.35);
}
body[data-ct-page="index-v4"] .ct-pricing-notes { color: var(--v4-muted); }

/* ==========================================================================
   FÜR UNTERNEHMEN (Branchen, dunkel)
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-branchen__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
}
body[data-ct-page="index-v4"] .ct-v4-branche {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.5rem 1.25rem; text-align: left;
}
body[data-ct-page="index-v4"] .ct-v4-branche__icon {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(24,191,174,.14); color: var(--v4-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}
body[data-ct-page="index-v4"] .ct-v4-branche__icon svg { width: 22px; height: 22px; }
body[data-ct-page="index-v4"] .ct-v4-branche strong { display: block; color: #fff; font-size: 1rem; margin-bottom: .3rem; }
body[data-ct-page="index-v4"] .ct-v4-branche span { color: rgba(248,250,252,.62); font-size: .86rem; line-height: 1.5; }
body[data-ct-page="index-v4"] .ct-v4-branchen-cta { text-align: center; margin-top: 2rem; }

/* Gleiche dezente Farbvarianz wie bei den Kernbereichen, hier fuer den
   dunklen Hintergrund abgestimmt. */
body[data-ct-page="index-v4"] .ct-v4-branche:nth-child(2) .ct-v4-branche__icon { background: rgba(91,127,220,.18); color: #8fa5ea; }
body[data-ct-page="index-v4"] .ct-v4-branche:nth-child(3) .ct-v4-branche__icon { background: rgba(139,124,246,.18); color: #b0a4f8; }
body[data-ct-page="index-v4"] .ct-v4-branche:nth-child(4) .ct-v4-branche__icon { background: rgba(232,169,59,.2); color: #f0c264; }

/* ==========================================================================
   FAQ
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-faq-wrap { max-width: 760px; margin: 0 auto; }

/* ==========================================================================
   MITARBEITERPORTAL (dunkel)
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-portal { align-items: center; }

/* ==========================================================================
   IN WENIGEN SCHRITTEN
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; position: relative;
}
body[data-ct-page="index-v4"] .ct-v4-steps::before {
  content: ""; position: absolute; top: 22px; left: 12%; right: 12%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--v4-border) 0 8px, transparent 8px 16px);
  z-index: 0;
}
body[data-ct-page="index-v4"] .ct-v4-step { position: relative; z-index: 1; text-align: center; }
body[data-ct-page="index-v4"] .ct-v4-step__num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--v4-accent); color: #04211d;
  font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
body[data-ct-page="index-v4"] .ct-v4-step strong { display: block; font-size: 1rem; color: var(--v4-text-dark); margin-bottom: .4rem; }
body[data-ct-page="index-v4"] .ct-v4-step span { font-size: .86rem; color: var(--v4-muted); line-height: 1.5; }

/* ==========================================================================
   ABSCHLUSS-CTA
   ========================================================================== */
body[data-ct-page="index-v4"] .ct-v4-cta {
  background: var(--v4-cta-grad);
  color: var(--v4-text-light);
  text-align: center;
}
body[data-ct-page="index-v4"] .ct-v4-cta__eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(248,250,252,.6); display: block; margin-bottom: 1rem;
}
body[data-ct-page="index-v4"] .ct-v4-cta h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em;
  color: #fff; margin: 0 0 .85rem;
}
body[data-ct-page="index-v4"] .ct-v4-cta p { color: rgba(248,250,252,.72); font-size: 1.02rem; margin: 0 auto 1.75rem; max-width: 46ch; }
body[data-ct-page="index-v4"] .ct-v4-cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
body[data-ct-page="index-v4"] .ct-v4-cta__actions .ct-btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
body[data-ct-page="index-v4"] .ct-v4-cta__actions .ct-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

/* ==========================================================================
   RESPONSIVE – Tablet (≤991px)
   ========================================================================== */
@media (max-width: 991px) {
  /* minmax(0, 1fr) statt nur 1fr: eine Grid-Spalte hat sonst eine implizite
     Mindestbreite in Hoehe ihres Inhalts (min-width:auto) - bei einem
     einzelnen langen Wort in der Ueberschrift konnte die Spalte dadurch
     breiter werden als der verfuegbare Platz (siehe Fund/Fix bei .ct-v4-hero h1
     oben). minmax(0, 1fr) erlaubt der Spalte, bei Bedarf zu schrumpfen. */
  body[data-ct-page="index-v4"] .ct-v4-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  body[data-ct-page="index-v4"] .ct-v4-hero__lead { margin-left: auto; margin-right: auto; }
  body[data-ct-page="index-v4"] .ct-v4-hero__actions { justify-content: center; }
  body[data-ct-page="index-v4"] .ct-v4-hero__trust { justify-content: center; }
  body[data-ct-page="index-v4"] .ct-v4-hero__visual { order: -1; margin-bottom: 1rem; justify-content: center; }
  /* Auf Tablet/Handy als normal gerahmtes, abgerundetes Bild oberhalb des
     Textes statt als seitlich ausblendende Hintergrund-Grafik (die
     linksseitige mask-Ausblendung ergibt zentriert keinen Sinn mehr). */
  body[data-ct-page="index-v4"] .ct-v4-hero__art {
    width: 100%; max-width: 420px;
    height: clamp(260px, 46vw, 420px);
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(7,22,41,.5);
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art img {
    object-position: 50% 30%;
    -webkit-mask-image: none; mask-image: none;
  }

  body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }

  body[data-ct-page="index-v4"] .ct-v4-feature { grid-template-columns: 1fr; text-align: center; }
  body[data-ct-page="index-v4"] .ct-v4-feature--reverse .ct-v4-feature__text,
  body[data-ct-page="index-v4"] .ct-v4-feature--reverse .ct-v4-feature__visual,
  body[data-ct-page="index-v4"] .ct-v4-feature__text,
  body[data-ct-page="index-v4"] .ct-v4-feature__visual { order: 0; }
  body[data-ct-page="index-v4"] .ct-v4-feature__visual { order: -1; margin-bottom: .5rem; }
  body[data-ct-page="index-v4"] .ct-v4-feature__text > p { margin-left: auto; margin-right: auto; }
  body[data-ct-page="index-v4"] .ct-v4-feature__list { justify-items: center; }
  body[data-ct-page="index-v4"] .ct-v4-feature__list li { text-align: left; }

  body[data-ct-page="index-v4"] .ct-v4-branchen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-ct-page="index-v4"] .ct-v4-steps { grid-template-columns: 1fr; gap: 2rem; }
  body[data-ct-page="index-v4"] .ct-v4-steps::before { display: none; }
}

/* ==========================================================================
   RESPONSIVE – Smartphone (≤767px / ≤479px)
   ========================================================================== */
@media (max-width: 767px) {
  body[data-ct-page="index-v4"] .ct-v4-hero { padding-top: 2rem; }
  body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  body[data-ct-page="index-v4"] .ct-v4-branchen__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  /* Fund bei der Responsive-Pruefung dieser Runde: das lange Einzelwort
     "Personalplanung," war auf sehr schmalen Handybreiten (getestet 390px)
     bei 2.5rem/40px minimal breiter als die verfuegbare Spalte und brach
     dadurch (dank des oben ergaenzten overflow-wrap) mitten im Wort um -
     kein Ueberlauf mehr, aber unschoen. Auf dieser Breite etwas kleinere
     Mindestschriftgroesse, per Canvas-Textmessung geprueft (passt bei
     ca. 36px wieder ohne Wortumbruch in ~350px Spaltenbreite). */
  body[data-ct-page="index-v4"] .ct-v4-hero h1 { font-size: clamp(1.75rem, 9vw, 2.3rem); }
  body[data-ct-page="index-v4"] .ct-v4-hero__actions,
  body[data-ct-page="index-v4"] .ct-v4-cta__actions { flex-direction: column; align-items: stretch; }
  body[data-ct-page="index-v4"] .ct-v4-hero__actions .ct-btn,
  body[data-ct-page="index-v4"] .ct-v4-cta__actions .ct-btn { width: 100%; text-align: center; }
  body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 1rem; }
  body[data-ct-page="index-v4"] .ct-v4-portal-image { max-width: 220px; }
}

/* ==========================================================================
   SCROLL-/REVEAL-ANIMATIONEN
   Ergaenzt die bestehende, sitesweite .ct-reveal-Basis aus main.css
   (opacity 0→1 + translateY, ueber initReveal()/IntersectionObserver in
   site.js – unveraendert weiterverwendet). Hier NUR zusaetzliche,
   V4-eigene Richtungs- und Verzoegerungs-Varianten, orientiert an den
   dezenten Scroll-Einblendungen der gekauften HRFlow-TNC-Vorlage:
   Elemente auf der linken Seite kommen leicht von links, Elemente auf
   der rechten Seite leicht von rechts, Texte/Kacheln blenden leicht von
   unten ein. Keine neue Sektion, keine Farb-/Abstands-/Textaenderung –
   nur Bewegung. Kein zusaetzliches JS noetig. UNVERAENDERT beibehalten.
   ========================================================================== */

body[data-ct-page="index-v4"] .ct-reveal {
  transition-duration: .75s;
  transition-timing-function: cubic-bezier(.16, .84, .32, 1);
  will-change: opacity, transform;
}

body[data-ct-page="index-v4"] .ct-v4-anim-left,
body[data-ct-page="index-v4"] .ct-v4-anim-right {
  transform: translate3d(0, 0, 0);
}
body[data-ct-page="index-v4"] .ct-v4-anim-left { transform: translate3d(-34px, 0, 0); }
body[data-ct-page="index-v4"] .ct-v4-anim-right { transform: translate3d(34px, 0, 0); }
body[data-ct-page="index-v4"] .ct-v4-anim-left.is-visible,
body[data-ct-page="index-v4"] .ct-v4-anim-right.is-visible { transform: none; }

body[data-ct-page="index-v4"] .ct-v4-kern.ct-reveal {
  transform: translate3d(0, 16px, 0);
  transition-duration: .6s;
}
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(1) { transition-delay: 0s; }
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(2) { transition-delay: .1s; }
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(3) { transition-delay: .2s; }
body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(4) { transition-delay: .3s; }

@media (max-width: 991px) {
  body[data-ct-page="index-v4"] .ct-v4-anim-left,
  body[data-ct-page="index-v4"] .ct-v4-anim-right {
    transform: translate3d(0, 16px, 0);
    transition-duration: .5s;
  }
  body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(1) { transition-delay: 0s; }
  body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(2) { transition-delay: .06s; }
  body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(3) { transition-delay: .12s; }
  body[data-ct-page="index-v4"] .ct-v4-kern:nth-child(4) { transition-delay: .18s; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ct-page="index-v4"] .ct-reveal,
  body[data-ct-page="index-v4"] .ct-v4-anim-left,
  body[data-ct-page="index-v4"] .ct-v4-anim-right,
  body[data-ct-page="index-v4"] .ct-v4-kern.ct-reveal {
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}


/* ========================================================================== 
   MONITOR-REDESIGN 2026-09-13
   Nur V4. Zeigt die vom Nutzer gewuenschte Multi-Device-Darstellung im Hero.
   ========================================================================== */
@media (min-width: 1100px) {
  body[data-ct-page="index-v4"] .ct-v4-hero {
    min-height: 700px;
    padding-top: 2.25rem;
    padding-bottom: 5.25rem;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__grid {
    width: min(100% - 3rem, 1540px);
    grid-template-columns: minmax(0, 43rem) minmax(620px, 1fr);
    gap: clamp(1.25rem, 2.8vw, 3rem);
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__content {
    padding-top: 1rem;
    position: relative;
    z-index: 3;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero h1 {
    font-size: clamp(3rem, 4.25vw, 4.25rem);
    line-height: 1.08;
    max-width: 12ch;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__lead {
    max-width: 39rem;
    font-size: 1.08rem;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__visual {
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    overflow: visible;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art {
    width: min(100%, 900px);
    height: auto;
    margin-right: -1.25rem;
    filter: drop-shadow(0 28px 42px rgba(0,0,0,.24));
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art::before {
    width: 92%;
    height: 88%;
    background: radial-gradient(ellipse at center, rgba(24,191,174,.28), rgba(24,191,174,.08) 58%, transparent 76%);
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 100%);
    border-radius: 20px;
  }
}

/* Vier Kernbereiche wie im freigegebenen Mockup: echte, helle Produktkarten */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche {
  background: linear-gradient(180deg, #f7fbfd 0%, #eef5f9 100%);
  padding: 1.35rem 0 2.4rem;
}
body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid {
  gap: 1rem;
  align-items: stretch;
}
body[data-ct-page="index-v4"] .ct-v4-kern {
  background: #fff;
  border: 1px solid rgba(10,42,69,.08);
  border-radius: 22px;
  min-height: 150px;
  padding: 1.4rem 1.35rem;
  box-shadow: 0 16px 36px -24px rgba(6,23,39,.45);
  align-items: flex-start;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-ct-page="index-v4"] .ct-v4-kern:hover {
  transform: translateY(-4px);
  border-color: rgba(24,191,174,.28);
  box-shadow: 0 22px 45px -25px rgba(6,23,39,.5);
}
body[data-ct-page="index-v4"] .ct-v4-kern__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(24,191,174,.11);
  display: grid;
  place-items: center;
  margin-bottom: .95rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern strong {
  font-size: 1rem;
  color: var(--v4-text-dark);
  margin-bottom: .2rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern > span:not(.ct-v4-kern__icon) {
  color: var(--v4-muted);
  line-height: 1.45;
}

@media (max-width: 1099px) {
  body[data-ct-page="index-v4"] .ct-v4-hero__art {
    width: min(100%, 760px);
    height: auto;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art img {
    width: 100%; height: auto; object-fit: contain; object-position: center;
    -webkit-mask-image: none; mask-image: none;
    border-radius: 18px;
  }
}

@media (max-width: 767px) {
  body[data-ct-page="index-v4"] .ct-v4-hero__visual {
    margin-top: 1.1rem;
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art {
    width: 100%;
  }
  body[data-ct-page="index-v4"] .ct-v4-kern {
    min-height: 0;
  }
}

/* ========================================================================== 
   HERO-FEINSCHLIFF 2026-09-13 – groessere Geraete, weniger blaue Leerflaeche
   Nur Darstellung. Keine Links, Logins, Preise oder Funktionen veraendert.
   ========================================================================== */
@media (min-width: 1100px) {
  body[data-ct-page="index-v4"] .ct-v4-hero {
    min-height: 0;
    padding-top: 2.1rem;
    padding-bottom: 2.8rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__grid {
    width: min(100% - 3rem, 1580px);
    grid-template-columns: minmax(0, 42rem) minmax(700px, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__content {
    padding-top: 0;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero h1 {
    font-size: clamp(3rem, 4vw, 4rem);
    line-height: 1.08;
    max-width: 42rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__lead {
    margin-bottom: 1.05rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__trust {
    margin-top: .7rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__visual {
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__art {
    width: min(112%, 1060px);
    max-width: none;
    height: auto;
    margin-right: -2rem;
    transform: translateY(.15rem);
    filter: drop-shadow(0 24px 36px rgba(0,0,0,.2));
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__art::before {
    width: 100%;
    height: 92%;
    opacity: .75;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__art img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: none;
            mask-image: none;
    border-radius: 0;
  }

  /* Der Uebergang soll flacher und ruhiger wirken. */
  body[data-ct-page="index-v4"] .ct-v4-hero__curve {
    height: 34px;
  }
}

@media (min-width: 1100px) and (max-width: 1350px) {
  body[data-ct-page="index-v4"] .ct-v4-hero__grid {
    grid-template-columns: minmax(0, 39rem) minmax(600px, 1fr);
  }
  body[data-ct-page="index-v4"] .ct-v4-hero h1 {
    font-size: clamp(2.8rem, 4.1vw, 3.65rem);
  }
  body[data-ct-page="index-v4"] .ct-v4-hero__art {
    width: min(108%, 940px);
    margin-right: -1rem;
  }
}

/* ========================================================================== 
   FINAL HERO KORREKTUR 2026-09-14
   Nur Darstellung: Logo klarer, Personalplanung nicht im Wort umbrechen,
   Hero unten kompakter. Keine Links/Buttons/Funktionen betroffen.
   ========================================================================== */
@media (min-width: 1100px) {
  body[data-ct-page="index-v4"] {
    --ct-nav-h: 96px;
  }

  body[data-ct-page="index-v4"] .ct-nav__brand .ct-v4-brand-logo {
    height: 86px;
    max-width: 330px;
    opacity: 1;
    filter: contrast(1.12) saturate(1.08);
  }

  body[data-ct-page="index-v4"] .ct-v4-hero {
    min-height: 0;
    padding-top: 2.15rem;
    padding-bottom: 1.75rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__grid {
    width: min(100% - 3rem, 1580px);
    grid-template-columns: minmax(0, 47rem) minmax(650px, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
  }

  body[data-ct-page="index-v4"] .ct-v4-hero h1 {
    max-width: none;
    font-size: clamp(3rem, 4vw, 4rem);
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Erster Teil bleibt zusammen: "Personalplanung, die". */
  body[data-ct-page="index-v4"] .ct-v4-hero h1 > span:first-child {
    white-space: nowrap;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__content {
    padding-top: 0;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__lead {
    margin-bottom: .9rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__trust {
    margin-top: .55rem;
  }

  body[data-ct-page="index-v4"] .ct-v4-hero__curve {
    height: 20px;
  }
}

/* ========================================================================== 
   KOMPLETTE UNTERE SEITE – POLISH 2026-09-14
   WICHTIG: Der freigegebene Hero oben bleibt unangetastet.
   Diese Regeln beginnen erst bei den Kernbereichen unter dem Hero.
   ========================================================================== */

/* 1) Vier Funktionskarten kompakter und hochwertiger */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche {
  padding: 1.15rem 0 1.9rem;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
}
body[data-ct-page="index-v4"] .ct-v4-kernbereiche::before {
  height: 110px;
  opacity: .55;
}
body[data-ct-page="index-v4"] .ct-v4-kernbereiche::after {
  height: 55px;
}
body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid {
  gap: 1rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern {
  min-height: 0;
  padding: 1.15rem 1.15rem 1.1rem;
  border-radius: 20px;
  gap: .38rem;
  box-shadow: 0 12px 30px -22px rgba(7,22,41,.38);
}
body[data-ct-page="index-v4"] .ct-v4-kern__icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  margin-bottom: .55rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern__icon svg {
  width: 23px;
  height: 23px;
}
body[data-ct-page="index-v4"] .ct-v4-kern strong {
  font-size: 1.02rem;
}
body[data-ct-page="index-v4"] .ct-v4-kern span {
  font-size: .84rem;
}

/* 2) Einheitlicher Seitenrhythmus ab den Produktabschnitten */
body[data-ct-page="index-v4"] .ct-v4-section {
  padding: clamp(3.25rem, 5vw, 5rem) 0;
}
body[data-ct-page="index-v4"] .ct-v4-section--light {
  background: #f5f8fb;
}
body[data-ct-page="index-v4"] .ct-v4-section--light-2 {
  background: #edf3f8;
}
body[data-ct-page="index-v4"] .ct-v4-section + .ct-v4-section {
  border-top: 1px solid rgba(10,42,69,.045);
}

/* 3) Produktabschnitte – wie moderne SaaS-Karten, Bilder groesser */
body[data-ct-page="index-v4"] .ct-v4-feature {
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
body[data-ct-page="index-v4"] .ct-v4-feature__text {
  max-width: 600px;
}
body[data-ct-page="index-v4"] .ct-v4-feature__text h2 {
  font-size: clamp(2rem, 3.1vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: .9rem;
}
body[data-ct-page="index-v4"] .ct-v4-feature__text > p {
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 49ch;
  margin-bottom: 1.3rem;
}
body[data-ct-page="index-v4"] .ct-v4-feature__list {
  gap: .7rem;
  margin-bottom: 1.55rem;
}
body[data-ct-page="index-v4"] .ct-v4-feature__list li {
  font-size: .98rem;
}
body[data-ct-page="index-v4"] .ct-v4-feature__list svg {
  width: 19px;
  height: 19px;
}
body[data-ct-page="index-v4"] .ct-v4-feature__visual {
  min-width: 0;
}
body[data-ct-page="index-v4"] .ct-v4-feature__blob {
  inset: 4% 0;
  background: radial-gradient(circle at center, rgba(24,191,174,.20), rgba(24,191,174,0) 68%);
}
body[data-ct-page="index-v4"] .ct-v4-shot {
  box-shadow: 0 28px 65px -28px rgba(7,22,41,.38);
  border-color: rgba(10,42,69,.08);
}
body[data-ct-page="index-v4"] .ct-v4-schedule-image {
  max-width: 620px;
  border-radius: 24px;
}
body[data-ct-page="index-v4"] .ct-v4-terminal-image {
  max-width: 400px;
  border-radius: 26px;
}
body[data-ct-page="index-v4"] .ct-v4-employee-image {
  max-width: 430px;
  border-radius: 24px;
}
body[data-ct-page="index-v4"] .ct-v4-portal-image {
  max-width: 330px;
}

/* Erste Produktsektion direkt nach den Karten etwas kompakter */
body[data-ct-page="index-v4"] #dienstplanung {
  padding-top: 3.4rem;
}

/* 4) Buttons in den Inhaltsabschnitten */
body[data-ct-page="index-v4"] .ct-v4-feature .ct-btn--secondary {
  min-height: 48px;
  border-radius: 14px;
  padding-inline: 1.25rem;
  font-weight: 750;
  box-shadow: 0 8px 20px -16px rgba(7,22,41,.5);
}

/* 5) Preisbereich – klarere Karten und bessere Hierarchie */
body[data-ct-page="index-v4"] #preise .ct-v4-head--center {
  max-width: 720px;
}
body[data-ct-page="index-v4"] .ct-v4-head h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  letter-spacing: -.035em;
}
body[data-ct-page="index-v4"] .ct-v4-head p {
  font-size: 1.03rem;
  line-height: 1.65;
}
body[data-ct-page="index-v4"] .ct-v4-pricing-toggle-wrap {
  margin-bottom: 1.5rem;
}
body[data-ct-page="index-v4"] .ct-price-card {
  border-radius: 22px;
  border: 1px solid rgba(10,42,69,.08);
  box-shadow: 0 16px 42px -30px rgba(7,22,41,.42);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-ct-page="index-v4"] .ct-price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(24,191,174,.25);
  box-shadow: 0 24px 52px -30px rgba(7,22,41,.48);
}
body[data-ct-page="index-v4"] .ct-price-card--popular {
  transform: translateY(-8px);
  box-shadow: 0 28px 65px -28px rgba(7,22,41,.58);
}
body[data-ct-page="index-v4"] .ct-price-card--popular:hover {
  transform: translateY(-12px);
}
body[data-ct-page="index-v4"] .ct-pricing-compare details {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10,42,69,.08);
}

/* 6) Branchen – dunkle Glas-Karten */
body[data-ct-page="index-v4"] #unternehmen {
  background:
    radial-gradient(circle at 50% 0%, rgba(24,191,174,.18), transparent 38%),
    linear-gradient(145deg, #061523 0%, #0a2034 60%, #0e2a42 100%);
}
body[data-ct-page="index-v4"] .ct-v4-branchen__grid {
  gap: 1rem;
}
body[data-ct-page="index-v4"] .ct-v4-branche {
  padding: 1.5rem 1.35rem;
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
body[data-ct-page="index-v4"] .ct-v4-branche:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.075);
  border-color: rgba(24,191,174,.30);
}
body[data-ct-page="index-v4"] .ct-v4-branche__icon {
  border-radius: 14px;
}

/* 7) FAQ – breite, hochwertige Akkordeons */
body[data-ct-page="index-v4"] #faq .ct-v4-head {
  text-align: center;
}
body[data-ct-page="index-v4"] .ct-v4-faq-wrap {
  max-width: 920px;
}
body[data-ct-page="index-v4"] .ct-v4-faq-wrap details {
  background: #fff;
  border: 1px solid rgba(10,42,69,.08);
  border-radius: 16px;
  margin-bottom: .8rem;
  box-shadow: 0 10px 28px -24px rgba(7,22,41,.45);
  overflow: hidden;
}
body[data-ct-page="index-v4"] .ct-v4-faq-wrap summary {
  padding: 1.15rem 1.25rem;
  font-weight: 750;
  cursor: pointer;
}
body[data-ct-page="index-v4"] .ct-v4-faq-wrap details p {
  padding: 0 1.25rem 1.2rem;
  margin: 0;
  line-height: 1.65;
}

/* 8) Mitarbeiterportal – staerkeres Produkt-Highlight */
body[data-ct-page="index-v4"] .ct-v4-portal {
  gap: clamp(2.5rem, 5vw, 5rem);
}
body[data-ct-page="index-v4"] .ct-v4-portal .ct-v4-feature__visual {
  justify-content: center;
}
body[data-ct-page="index-v4"] .ct-v4-portal-image {
  box-shadow: 0 34px 65px -28px rgba(0,0,0,.58);
}

/* 9) Schritte – aus der Linie werden echte Prozesskarten */
body[data-ct-page="index-v4"] .ct-v4-steps {
  gap: 1rem;
}
body[data-ct-page="index-v4"] .ct-v4-steps::before {
  display: none;
}
body[data-ct-page="index-v4"] .ct-v4-step {
  background: #fff;
  border: 1px solid rgba(10,42,69,.08);
  border-radius: 20px;
  padding: 1.5rem 1.35rem;
  box-shadow: 0 14px 34px -28px rgba(7,22,41,.45);
}
body[data-ct-page="index-v4"] .ct-v4-step__num {
  margin-bottom: .85rem;
  box-shadow: 0 9px 20px -10px rgba(24,191,174,.55);
}
body[data-ct-page="index-v4"] .ct-v4-step strong {
  font-size: 1.05rem;
}

/* 10) Abschluss-CTA – kompakter, klarer Abschluss */
body[data-ct-page="index-v4"] .ct-v4-cta {
  padding-top: clamp(3.75rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 50% 110%, rgba(24,191,174,.26), transparent 42%),
    linear-gradient(145deg, #061523 0%, #0c263d 100%);
  overflow: hidden;
}
body[data-ct-page="index-v4"] .ct-v4-cta h2 {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  line-height: 1.08;
  max-width: 820px;
  margin-inline: auto;
}
body[data-ct-page="index-v4"] .ct-v4-cta p {
  max-width: 54ch;
}
body[data-ct-page="index-v4"] .ct-v4-cta-image {
  max-width: 820px;
  margin-top: 2rem;
  border-radius: 26px;
  box-shadow: 0 35px 80px -34px rgba(0,0,0,.65);
}

/* 11) Responsive – untere Seite */
@media (max-width: 991px) {
  body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  body[data-ct-page="index-v4"] .ct-v4-feature,
  body[data-ct-page="index-v4"] .ct-v4-feature--reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  body[data-ct-page="index-v4"] .ct-v4-feature--reverse .ct-v4-feature__text,
  body[data-ct-page="index-v4"] .ct-v4-feature--reverse .ct-v4-feature__visual {
    order: initial;
  }
  body[data-ct-page="index-v4"] .ct-v4-feature__text {
    max-width: none;
  }
  body[data-ct-page="index-v4"] .ct-v4-feature__text > p {
    max-width: none;
  }
  body[data-ct-page="index-v4"] .ct-v4-branchen__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 600px) {
  body[data-ct-page="index-v4"] .ct-v4-kernbereiche {
    padding: .9rem 0 1.4rem;
  }
  body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid,
  body[data-ct-page="index-v4"] .ct-v4-branchen__grid {
    grid-template-columns: 1fr;
  }
  body[data-ct-page="index-v4"] .ct-v4-kern {
    padding: 1rem;
  }
  body[data-ct-page="index-v4"] .ct-v4-section {
    padding: 2.6rem 0;
  }
  body[data-ct-page="index-v4"] .ct-v4-feature__text h2,
  body[data-ct-page="index-v4"] .ct-v4-head h2 {
    font-size: 1.85rem;
  }
  body[data-ct-page="index-v4"] .ct-price-card--popular {
    transform: none;
  }
  body[data-ct-page="index-v4"] .ct-price-card--popular:hover {
    transform: translateY(-4px);
  }
}

/* ========================================================================== 
   CLOCKTEAM V4 – DEUTLICHER REDESIGN DER KOMPLETTEN SEITE UNTER DEM HERO
   Hero/Nav bleiben bewusst unangetastet.
   ========================================================================== */

/* Funktionskarten: deutlich kompakter, horizontaler Aufbau */
body[data-ct-page="index-v4"] .ct-v4-kernbereiche {
  padding: .9rem 0 1.35rem !important;
  background: #f4f8fb !important;
}
body[data-ct-page="index-v4"] .ct-v4-kernbereiche__grid {
  gap: .8rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-kern {
  min-height: 118px !important;
  padding: 1rem 1.05rem !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: .9rem !important;
  row-gap: .15rem !important;
  align-items: center !important;
  text-align: left !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(10,42,69,.07) !important;
  box-shadow: 0 10px 24px -20px rgba(7,22,41,.45) !important;
}
body[data-ct-page="index-v4"] .ct-v4-kern__icon {
  grid-row: 1 / 3 !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  align-self: center !important;
}
body[data-ct-page="index-v4"] .ct-v4-kern strong {
  align-self: end !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
}
body[data-ct-page="index-v4"] .ct-v4-kern > span:not(.ct-v4-kern__icon) {
  align-self: start !important;
  font-size: .8rem !important;
  line-height: 1.35 !important;
}

/* Produktsektionen: jede Funktion als sichtbare, hochwertige Produktkarte */
body[data-ct-page="index-v4"] #dienstplanung,
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section,
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section + .ct-v4-section {
  padding: 2.1rem 0 !important;
}
body[data-ct-page="index-v4"] #dienstplanung,
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section + .ct-v4-section {
  background: #eef4f8 !important;
}
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section {
  background: #f7fafc !important;
}
body[data-ct-page="index-v4"] #dienstplanung .ct-v4-feature,
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section .ct-v4-feature,
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section + .ct-v4-section .ct-v4-feature {
  background: #fff !important;
  border: 1px solid rgba(10,42,69,.075) !important;
  border-radius: 30px !important;
  padding: clamp(1.6rem, 3vw, 2.75rem) !important;
  gap: clamp(2rem, 4vw, 4.5rem) !important;
  box-shadow: 0 24px 60px -40px rgba(7,22,41,.52) !important;
  overflow: hidden !important;
}
body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section .ct-v4-feature {
  background: linear-gradient(135deg,#ffffff 0%,#f5fbfb 100%) !important;
}
body[data-ct-page="index-v4"] .ct-v4-feature__text h2 {
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  line-height: 1.08 !important;
  margin-bottom: .8rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-feature__text > p {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-feature__list {
  gap: .5rem !important;
  margin-bottom: 1.15rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-feature__list li {
  font-size: .94rem !important;
}

/* Produktbilder sichtbar groesser */
body[data-ct-page="index-v4"] .ct-v4-schedule-image {
  width: 100% !important;
  max-width: 700px !important;
  min-height: 390px !important;
  border-radius: 22px !important;
  box-shadow: 0 26px 60px -30px rgba(7,22,41,.42) !important;
}
body[data-ct-page="index-v4"] .ct-v4-terminal-image {
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 60px -32px rgba(7,22,41,.46) !important;
}
body[data-ct-page="index-v4"] .ct-v4-employee-image {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 60px -32px rgba(7,22,41,.40) !important;
}

/* Preisbereich: staerker abgesetzt und kompakter */
body[data-ct-page="index-v4"] #preise {
  padding: 3.2rem 0 3.5rem !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(24,191,174,.11), transparent 34%),
    #f5f9fc !important;
}
body[data-ct-page="index-v4"] #preise .ct-v4-head {
  margin-bottom: 1.45rem !important;
}
body[data-ct-page="index-v4"] #pricingCards {
  gap: 1.2rem !important;
  align-items: stretch !important;
}
body[data-ct-page="index-v4"] .ct-price-card {
  border-radius: 24px !important;
  padding: 1.55rem !important;
  box-shadow: 0 18px 42px -30px rgba(7,22,41,.48) !important;
}
body[data-ct-page="index-v4"] .ct-price-card--popular {
  background: linear-gradient(160deg,#07182a 0%,#0a2c45 100%) !important;
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 64px -32px rgba(7,22,41,.75) !important;
}

/* Branchen kompakter und moderner */
body[data-ct-page="index-v4"] #unternehmen {
  padding: 3.6rem 0 !important;
}
body[data-ct-page="index-v4"] .ct-v4-branchen__grid {
  gap: .9rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-branche {
  min-height: 150px !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* FAQ kompakter */
body[data-ct-page="index-v4"] #faq {
  padding: 3.2rem 0 !important;
  background: #f6f9fc !important;
}
body[data-ct-page="index-v4"] .ct-v4-faq-wrap {
  max-width: 860px !important;
  margin-inline: auto !important;
}
body[data-ct-page="index-v4"] .ct-v4-faq-wrap details {
  border-radius: 14px !important;
  margin-bottom: .65rem !important;
}

/* Mitarbeiterportal als starkes dunkles Produktpanel */
body[data-ct-page="index-v4"] .ct-v4-section--dark .ct-v4-portal {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 30px !important;
  padding: clamp(1.75rem,3vw,3rem) !important;
  box-shadow: 0 28px 70px -40px rgba(0,0,0,.65) !important;
}
body[data-ct-page="index-v4"] .ct-v4-portal-image {
  max-width: 360px !important;
}

/* Schritte kompakt */
body[data-ct-page="index-v4"] .ct-v4-steps {
  gap: .9rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-step {
  min-height: 150px !important;
  padding: 1.25rem !important;
}

/* Abschluss-CTA: mehr Fokus, weniger Leerraum */
body[data-ct-page="index-v4"] .ct-v4-cta {
  padding: 3.6rem 0 3.8rem !important;
}
body[data-ct-page="index-v4"] .ct-v4-cta-image {
  max-width: 760px !important;
  margin-top: 1.5rem !important;
}

@media (max-width: 991px) {
  body[data-ct-page="index-v4"] .ct-v4-kern {
    min-height: 104px !important;
  }
  body[data-ct-page="index-v4"] .ct-v4-schedule-image {
    min-height: 330px !important;
  }
  body[data-ct-page="index-v4"] .ct-price-card--popular {
    transform: none !important;
  }
}

@media (max-width: 600px) {
  body[data-ct-page="index-v4"] .ct-v4-kern {
    grid-template-columns: 46px 1fr !important;
    min-height: 92px !important;
    padding: .85rem !important;
  }
  body[data-ct-page="index-v4"] .ct-v4-kern__icon {
    width: 44px !important;
    height: 44px !important;
  }
  body[data-ct-page="index-v4"] #dienstplanung .ct-v4-feature,
  body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section .ct-v4-feature,
  body[data-ct-page="index-v4"] #dienstplanung + .ct-v4-section + .ct-v4-section .ct-v4-feature {
    border-radius: 22px !important;
    padding: 1.2rem !important;
  }
  body[data-ct-page="index-v4"] .ct-v4-schedule-image {
    min-height: 240px !important;
  }
}