/* ==========================================================================
   Ordivis – Marketing Website
   Design System (Material Design 3 inspiriert, Dark-Enterprise-Look)
   ========================================================================== */

:root {
  /* Markenfarben - Brand Sheet Ordivis. Nur diese fünf sind gesetzt; alles
     Weitere leitet sich davon ab. Navy führt, Teal ist der einzige Akzent. */
  --clr-navy:          #16233F;
  --clr-teal:          #17B8B0;   /* Icon-Akzent, Flächen */
  --clr-teal-deep:     #0F9E96;   /* farbige Textteile auf hellem Grund */
  --clr-teal-bright:   #34C8BE;   /* auf dunklem Grund - hier der Regelfall */
  --clr-light:         #EAF1F8;

  /* Farbpalette */
  --clr-bg:            #0b1424;
  --clr-bg-alt:        #101b30;
  --clr-surface:       #16233f;   /* exakt Navy */
  --clr-surface-2:     #1e2e4e;
  --clr-border:        #2a3b5e;
  --clr-primary:       #17b8b0;
  --clr-primary-600:   #0f9e96;
  --clr-primary-300:   #34c8be;
  --clr-accent:        #34c8be;
  --clr-accent-600:    #17b8b0;
  --clr-warn:          #ff8a3d;
  --clr-danger:        #ff5c6c;
  --clr-text:          #eaf1f8;   /* exakt Light */
  --clr-text-mut:      #a9b7d0;
  /* Aufgehellt von #7488a8: die gedämpfte Textfarbe erreichte auf der gehobenen
     Fläche nur 3,75:1 und blieb damit unter WCAG AA. #8698b8 hält denselben
     Blauton, schafft aber auf allen drei Flächen mindestens 4,6:1. */
  --clr-text-dim:      #8698b8;

  /* Typografie */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Marken-Verlauf – der Teal-Bogen des Ordivis-Zeichens, von der Icon-Variante
     zur helleren Variante für dunklen Grund. Bewusst innerhalb der Teal-Familie:
     Navy als zweiter Halt wäre auf dem dunklen Grund unsichtbar, und der Verlauf
     färbt auch Fließtext (.hero h1 span). */
  --grad-brand: linear-gradient(100deg, var(--clr-teal) 0%, var(--clr-teal-bright) 100%);

  /* Layout */
  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .3);
  --trans: .2s ease;
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Lange Komposita ("Datenschutzerklärung", "Erhebung/Vertragsende/…") sind
     sonst breiter als ihr Container und schieben die Seite seitlich auf. */
  overflow-wrap: anywhere;
}
img { max-width: 100%; display: block; }
a { color: var(--clr-primary-300); text-decoration: none; transition: color var(--trans); }
a:hover { color: #fff; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; color: var(--clr-text-mut); }

/* Layout-Helfer ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--clr-bg-alt); }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--clr-accent); margin-bottom: 14px;
}
/* Markenarchitektur: der Modulname steht als Unterschrift UNTER der Überschrift.
   Bewusst nicht in ihr und nicht im Eyebrow – dort tragen die Schlagworte (CMDB,
   Service Desk, IPAM, ISMS) die Auffindbarkeit in der Suche und dürfen nicht
   verdrängt werden. Die Unterschrift ordnet die Seite der Marke zu, ohne sie zu
   ersetzen. */
.modul-signatur {
  display: flex; align-items: center; gap: 11px;
  margin: -4px 0 20px;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clr-accent);
}
.modul-signatur::before {
  content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px;
  background: var(--grad-brand);
}

.lead { font-size: 1.15rem; color: var(--clr-text-mut); max-width: 640px; }
.center .lead { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .98rem;
  padding: 13px 26px; border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: transform var(--trans), background var(--trans), box-shadow var(--trans);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Auf den Teal-Flächen steht Navy, nicht Weiß: Weiß auf #17B8B0 erreicht nur
   rund 2,3:1 und fällt unter WCAG AA durch. Navy auf Teal ist die Paarung, die
   das Brand Sheet dafür vorsieht. */
.btn--primary { background: var(--clr-primary); color: var(--clr-navy); box-shadow: 0 8px 24px rgba(23,184,176,.35); }
.btn--primary:hover { background: var(--clr-primary-600); color: var(--clr-navy); }
.btn--accent { background: var(--clr-accent); color: #16233f; box-shadow: 0 8px 24px rgba(52,200,190,.3); }
.btn--accent:hover { background: var(--clr-accent-600); color: #16233f; }
.btn--ghost { background: transparent; color: var(--clr-text); border-color: var(--clr-border); }
.btn--ghost:hover { background: var(--clr-surface); color: #fff; }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; justify-content: center; }

/* Header / Navigation ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,20,36,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -.01em; }
.brand:hover { color: #fff; }
.brand svg { width: 34px; height: 34px; }
.brand span b { color: var(--clr-primary-300); }
.brand-logo { height: 40px; width: auto; }
.site-footer .brand-logo { height: 44px; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--clr-text-mut); font-weight: 500; font-size: .95rem; padding: 9px 13px; border-radius: 8px; }
.nav-links a:hover, .nav-links a.active { color: #fff; background: var(--clr-surface); }
/* Die Gruppe, in der die angezeigte Seite liegt, bleibt sichtbar markiert – auch
   wenn die Seite selbst nur im aufgeklappten Menue steht. */
.nav-links > .is-active > a { color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.nav-toggle svg { width: 28px; height: 28px; }

/* Sprachwahl (I18N-03) — zusammengeklapptes Auswahlfeld mit Flagge und Kuerzel, wie es
   auf Produktseiten ueblich ist. Die erste Fassung stellte die drei Sprachnamen
   nebeneinander in die Kopfzeile; sie sprengte dort die Navigation, und die Menuepunkte
   brachen mitten im Wort um ("Kontak/t", "Deutsc/h").

   Aufgeklappt steht neben dem Kuerzel der Eigenname ("Deutsch", "English", "Français") –
   wer die Oberflaeche gerade nicht lesen kann, findet "Français", aber nicht
   "Franzoesisch". Zugeklappt reichen Flagge und Kuerzel.

   details/summary statt Skript: Das Aufklappen macht der Browser. */
/* Vorrangklausel auf uebersetzten Rechtstexten. Auffaellig genug, um gelesen zu werden,
   ruhig genug, um den Text darunter nicht zu entwerten. */
.rechtshinweis {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--accent, #c8a24a);
  background: rgba(200, 162, 74, .08);
  font-size: .9rem;
  line-height: 1.5;
}

.lang-switch { position: relative; }
.lang-switch > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--clr-border);
  color: var(--clr-text-mut); font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { color: #fff; background: var(--clr-surface); }
.lang-switch[open] > summary { color: #fff; background: var(--clr-surface); }
.lang-caret { font-size: .7em; opacity: .65; }
.lang-flag {
  width: 18px; height: 12px; flex: 0 0 auto; border-radius: 2px;
  /* Ein heller Rand, damit die weissen Anteile von FR und EN auf dunklem Grund nicht auslaufen. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.lang-switch > ul {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 190px;
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  list-style: none; margin: 0; padding: 6px;
}
.lang-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  color: var(--clr-text-mut); font-size: .9rem;
}
.lang-item b { min-width: 2.2em; font-weight: 700; }
.lang-item .lang-name { color: var(--clr-text-mut); font-weight: 400; }
a.lang-item:hover { color: #fff; background: var(--clr-bg-alt); }
a.lang-item:hover .lang-name { color: #fff; }
.lang-item.is-current { color: #fff; background: var(--clr-bg-alt); }
/* Sprache ohne jede Seite: sichtbar, aber erkennbar nicht waehlbar. */
.lang-item.is-off { opacity: .45; cursor: default; }

/* Dropdown */
.has-drop { position: relative; }
.caret { font-size: .7em; opacity: .65; }
.drop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: all var(--trans); list-style: none; margin: 0;
}
/* :focus-within gehoert zwingend dazu: mit reinem :hover ist das Untermenue per
   Tastatur nicht erreichbar. .open setzt das Skript auf Touch-Geraeten. */
.has-drop:hover > .drop,
.has-drop:focus-within > .drop,
.has-drop.open > .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--clr-text); }
.drop a small { display: block; color: var(--clr-text-dim); font-weight: 400; font-size: .82rem; }
.drop a:hover, .drop a:focus-visible { background: var(--clr-surface-2); }
.drop a.active { background: var(--clr-surface-2); color: #fff; }
/* Untergeordnete Ziele stehen sichtbar unter ihrer Leitseite, damit "Kommunen &
   KRITIS" nicht als Alternative zur "Oeffentlichen Verwaltung" gelesen wird. */
.drop-sub > a { margin-left: 14px; border-left: 2px solid var(--clr-border); border-radius: 0 8px 8px 0; }
/* Zehn Themen einspaltig waeren hoeher als der sichtbare Bereich. */
.drop--wide { min-width: 520px; columns: 2; column-gap: 8px; }
.drop--wide li { break-inside: avoid; }

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(23,184,176,.22), transparent 60%),
    radial-gradient(800px 420px at 8% 12%, rgba(52,200,190,.14), transparent 55%),
    var(--clr-bg);
  padding: 96px 0 84px;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
/* Rasterzellen duerfen unter ihre min-content-Breite schrumpfen. Ohne diese
   Zeile zieht eine lange, nicht umbrechbare Codezeile im .panel die Spur auf
   ihre eigene Breite - der Text daneben laeuft dann aus dem Bildschirm und
   wird vom overflow:hidden des Hero abgeschnitten (sichtbar unter ~420 px).
   Das overflow-x:auto von .code greift erst, wenn die Zelle schrumpfen darf. */
.hero-grid > *, .split > * { min-width: 0; }
.hero h1 span { color: var(--clr-primary-300); }
.hero .lead { font-size: 1.28rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-trust { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 20px 30px; color: var(--clr-text-dim); font-size: .9rem; }
.hero-trust b { color: var(--clr-text); }

/* Karten / Panels --------------------------------------------------------- */
.card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius); padding: 28px; transition: transform var(--trans), border-color var(--trans);
}
.card:hover { transform: translateY(-4px); border-color: var(--clr-primary); }
.card .ico {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(23,184,176,.25), rgba(52,200,190,.18));
  margin-bottom: 16px; color: var(--clr-accent);
}
.card .ico svg { width: 26px; height: 26px; }
.card h3 { color: #fff; }
.card p { margin-bottom: 0; }

/* USP-Kacheln mit Kennzahl */
.stat { font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.stat small { display: block; font-size: .92rem; font-weight: 500; color: var(--clr-text-mut); margin-top: 8px; letter-spacing: 0; }

/* Split-Panel (Bild/Text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--rev .split-media { order: 2; }
.panel {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}

/* Vergleichstabelle ------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--clr-border); }
table.compare { width: 100%; border-collapse: collapse; min-width: 760px; background: var(--clr-surface); }
table.compare th, table.compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--clr-border); vertical-align: top; font-size: .92rem; }
table.compare thead th { background: var(--clr-bg-alt); color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
table.compare th:first-child { color: var(--clr-text-mut); font-weight: 600; }
table.compare .col-us { background: rgba(23,184,176,.1); color: #fff; }
table.compare thead .col-us { background: var(--clr-primary); color: var(--clr-navy); }
table.compare td.col-us { font-weight: 600; }
.tick { color: var(--clr-accent); font-weight: 700; }
.cross { color: var(--clr-danger); font-weight: 700; }

/* Preis-Karten ------------------------------------------------------------ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .pricing-4 { grid-template-columns: repeat(2, 1fr); } }
/* Trenner zwischen den Preis-Bereichen */
.area-divider { display: flex; align-items: center; gap: 18px; margin: 8px 0 4px; color: var(--clr-text-dim); }
.area-divider::before, .area-divider::after { content: ""; flex: 1; height: 1px; background: var(--clr-border); }
.gov-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:20px; background:rgba(52,200,190,.14); border:1px solid var(--clr-accent); color:var(--clr-accent); font-size:.8rem; font-weight:700; }
.price-card {
  display: flex; flex-direction: column; background: var(--clr-surface);
  border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 32px 28px; position: relative;
}
.price-card.featured { border-color: var(--clr-primary); box-shadow: 0 0 0 1px var(--clr-primary), var(--shadow); }
.price-card .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--clr-primary); color: var(--clr-navy); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
}
.price-card h3 { color: #fff; margin-bottom: 4px; }
.price-card .tier-desc { color: var(--clr-text-dim); font-size: .9rem; min-height: 40px; }
.price { font-size: 2.4rem; font-weight: 800; color: #fff; margin: 14px 0 2px; }
.price small { font-size: .95rem; color: var(--clr-text-mut); font-weight: 500; display: block; margin-top: 2px; white-space: nowrap; }
.feat-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; }
.feat-list li { position: relative; padding-left: 28px; color: var(--clr-text-mut); font-size: .93rem; }
.feat-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(52,200,190,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2334c8be' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.price-card .btn { margin-top: auto; }

/* TCO-Rechner ------------------------------------------------------------- */
.tco {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.tco-grid { display: grid; grid-template-columns: 1fr 1.1fr; }
.tco-inputs { padding: 36px; border-right: 1px solid var(--clr-border); }
.tco-results { padding: 36px; background: var(--clr-bg-alt); }
.field { margin-bottom: 24px; }
.field label { display: block; font-weight: 600; color: #fff; margin-bottom: 8px; font-size: .95rem; }
.field .hint { color: var(--clr-text-dim); font-size: .82rem; margin-top: 6px; }
input[type="range"] { width: 100%; accent-color: var(--clr-primary); }
.field-val { font-family: var(--font-mono); font-size: 1.3rem; color: var(--clr-primary-300); font-weight: 700; }
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pill { flex: 1; min-width: 140px; }
.radio-pill input { position: absolute; opacity: 0; }
.radio-pill label {
  display: block; padding: 12px 14px; border: 1px solid var(--clr-border); border-radius: 10px;
  cursor: pointer; text-align: center; color: var(--clr-text-mut); font-weight: 500; transition: all var(--trans);
}
.radio-pill input:checked + label { border-color: var(--clr-primary); background: rgba(23,184,176,.14); color: #fff; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--clr-border); }
.result-row .name { color: var(--clr-text-mut); }
.result-row .val { font-family: var(--font-mono); font-size: 1.15rem; color: var(--clr-text); }
.result-row.us { border-bottom: 0; }
.result-row.us .name { color: #fff; font-weight: 700; }
.result-row.us .val { color: var(--clr-accent); font-size: 1.5rem; font-weight: 700; }
.savings {
  margin-top: 22px; padding: 20px; border-radius: 12px; text-align: center;
  background: linear-gradient(140deg, rgba(52,200,190,.16), rgba(23,184,176,.14)); border: 1px solid var(--clr-border);
}
.savings .big { font-size: 2.4rem; font-weight: 800; color: var(--clr-accent); line-height: 1; }
.savings .sub { color: var(--clr-text-mut); font-size: .9rem; margin-top: 6px; }

/* Formulare --------------------------------------------------------------- */
.form-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 36px; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 600; color: #fff; margin-bottom: 7px; font-size: .93rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--clr-text);
  background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: 9px; transition: border-color var(--trans);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--clr-primary); }
.form-row textarea { min-height: 130px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-note { font-size: .82rem; color: var(--clr-text-dim); }
.form-msg { padding: 14px 16px; border-radius: 9px; margin-bottom: 20px; font-size: .92rem; display: none; }
.form-msg.ok { display: block; background: rgba(52,200,190,.14); border: 1px solid var(--clr-accent); color: #b8f5e6; }
.form-msg.err { display: block; background: rgba(255,92,108,.12); border: 1px solid var(--clr-danger); color: #ffc4ca; }

/* Callout / Zitat --------------------------------------------------------- */
.callout {
  background: linear-gradient(140deg, rgba(23,184,176,.14), rgba(52,200,190,.1));
  border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 40px;
}
.quote { border-left: 3px solid var(--clr-primary); padding-left: 22px; font-size: 1.15rem; color: var(--clr-text); font-style: italic; }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; color: var(--clr-text-dim); }

/* Code-Block (Architektur) */
.code {
  font-family: var(--font-mono); font-size: .86rem; background: #0a0f1c; color: #cdd9f0;
  border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 22px 24px; overflow-x: auto; line-height: 1.55;
}
.code .k { color: var(--clr-primary-300); } .code .c { color: var(--clr-text-dim); } .code .s { color: var(--clr-accent); }

/* Funnel-Karten */
.funnel { border-top: 3px solid var(--clr-primary); }
.funnel:nth-child(2) { border-top-color: var(--clr-accent); }
.funnel:nth-child(3) { border-top-color: var(--clr-warn); }

/* CTA-Band ---------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 80% 20%, rgba(23,184,176,.28), transparent 60%),
    var(--clr-surface);
  border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 56px; text-align: center;
}
.cta-band h2 { color: #fff; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--clr-bg-alt); border-top: 1px solid var(--clr-border); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer-grid h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-grid a { color: var(--clr-text-mut); font-size: .92rem; }
.footer-grid a:hover { color: #fff; }
.footer-brand p { font-size: .9rem; max-width: 300px; }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--clr-border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: var(--clr-text-dim); font-size: .85rem;
}

/* Badges / Chips ---------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 20px;
  background: var(--clr-surface); border: 1px solid var(--clr-border); font-size: .82rem; color: var(--clr-text-mut);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clr-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Utility ----------------------------------------------------------------- */
.text-accent { color: var(--clr-accent); }
.text-white { color: #fff; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 940px) {
  .hero-grid, .split, .tco-grid, .grid-2, .grid-3, .grid-4, .pricing, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  .split--rev .split-media { order: 0; }
  .tco-inputs { border-right: 0; border-bottom: 1px solid var(--clr-border); }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--clr-bg-alt); border-bottom: 1px solid var(--clr-border); padding: 12px; gap: 2px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px; }
  /* Mobil als Ziehharmonika. Vorher standen alle Untermenues dauerhaft offen –
     das Menue war ueber 30 Eintraege lang und niemand fand darin etwas. */
  .has-drop > .drop {
    position: static; box-shadow: none; border: 0; background: transparent;
    padding: 0 0 6px 12px; min-width: 0; columns: 1; transform: none;
    display: none; opacity: 1; visibility: visible;
  }
  .has-drop.open > .drop { display: block; }
  .has-drop > a { display: flex; align-items: center; justify-content: space-between; }
  .has-drop.open > a .caret { transform: rotate(180deg); }
  .caret { transition: transform var(--trans); }
  .drop-sub > a { margin-left: 10px; }
  .nav-toggle { display: block; }
  /* Auf schmalen Schirmen teilen sich Logo, Sprachwahl, Handlungsaufforderung und der
     Menueknopf eine Zeile. Das Auswahlfeld schrumpft dafuer auf Flagge und Pfeil — das
     Kuerzel steht ohnehin auf der Flagge, und aufgeklappt sind alle drei Sprachen zu sehen. */
  .lang-switch > summary { padding: 6px; gap: 4px; }
  .lang-switch > summary .lang-code { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 60px 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band, .callout, .tco-inputs, .tco-results, .form-card { padding: 28px 22px; }
  /* Beschriftungen wie "Aktuellen Entwicklungsstand ansehen" passen hier nicht
     mehr einzeilig; ohne Umbruch ziehen sie das Raster über den Bildschirm. */
  .btn { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Produkt-Screenshots: Galerie-Frames + Lightbox
   ═══════════════════════════════════════════════════════════════════════ */

/* Screenshot-Kachel im „Browser-Rahmen" */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.shot {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
  cursor: zoom-in; transition: transform var(--trans), border-color var(--trans);
  margin: 0;
}
.shot:hover { transform: translateY(-4px); border-color: var(--clr-primary); }
.shot .bar { display: flex; gap: 7px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--clr-border); background: var(--clr-bg-alt); }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #33436b; }
.shot .bar i:nth-child(1) { background: #ff5c6c; }
.shot .bar i:nth-child(2) { background: #ff8a3d; }
.shot .bar i:nth-child(3) { background: #34c8be; }
.shot .bar span { margin-left: 8px; font-size: .78rem; color: var(--clr-text-dim); font-family: var(--font-mono); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 13px 15px; font-size: .9rem; color: var(--clr-text-mut); }
.shot figcaption b { display: block; color: #fff; font-size: .98rem; margin-bottom: 3px; }

/* Inline-Screenshot innerhalb eines Funktions-Moduls */
.mod .shot { margin-top: 22px; max-width: 660px; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 32px;
      background: rgba(6,10,20,.88); backdrop-filter: blur(4px); }
.lb.open { display: flex; }
.lb img { max-width: 95vw; max-height: 86vh; border-radius: 10px; border: 1px solid var(--clr-border); box-shadow: var(--shadow); }
.lb-close { position: absolute; top: 16px; right: 26px; font-size: 2.4rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
.lb-cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--clr-text-mut); font-size: .95rem; padding: 0 24px; }

/* ── Modulreife (Roadmap) + Entwicklungs-Hinweis ─────────────────────────── */
.mr-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 14px; font-size: .9rem; color: var(--clr-text-mut); }
.mr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mr-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mr-done { background: var(--clr-accent); }
.mr-partial { background: var(--clr-warn); }
.mr-open { background: var(--clr-danger); }
.mr-paused { background: var(--clr-text-dim); }

.mr-table { border: 1px solid var(--clr-border); border-radius: var(--radius); overflow: hidden; background: var(--clr-surface); }
.mr-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) 3fr 76px; align-items: center; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--clr-border); }
.mr-row:first-child { border-top: 0; }
.mr-name { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.mr-name small { display: block; font-weight: 400; font-size: .76rem; color: var(--clr-text-dim); margin-top: 2px; }
.mr-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--clr-surface-2); }
.mr-seg { display: block; height: 100%; }
.mr-seg.mr-done { background: var(--clr-accent); }
.mr-seg.mr-partial { background: var(--clr-warn); }
.mr-seg.mr-open { background: var(--clr-danger); }
.mr-seg.mr-paused { background: var(--clr-text-dim); }
.mr-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .95rem; }
.mr-pct small { display: block; font-weight: 400; font-size: .74rem; color: var(--clr-text-dim); }
@media (max-width: 720px) {
  .mr-row { grid-template-columns: 1fr 64px; grid-template-areas: "name pct" "bar bar"; row-gap: 8px; }
  .mr-name { grid-area: name; } .mr-pct { grid-area: pct; } .mr-bar { grid-area: bar; }
}

/* Entwicklungs-Hinweis (Startseite) */
/* Der Banner meldet seit dem Produktivstart eine Tatsache, keine Einschraenkung mehr —
   deshalb der Akzent- statt des Warntons. */
.dev-banner { background: linear-gradient(140deg, rgba(52,200,190,.15), rgba(23,184,176,.10)); border-bottom: 1px solid var(--clr-border); }
.dev-banner .container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 24px; }
.dev-banner .dev-tag { flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #16233f; background: var(--clr-accent); border-radius: 999px; padding: 5px 12px; }
.dev-banner p { margin: 0; font-size: .95rem; color: var(--clr-text); flex: 1 1 420px; }
.dev-banner a.btn { flex: none; }

/* Sprungziele nicht unter der fixierten Kopfzeile verstecken */
#demo, #modulreife, #phasen, #transparenz, #kontaktformular, #feedback, #loesungen, #updates { scroll-margin-top: 96px; }

/* Statusleiste: Produktversion im Footer (analog Client), gefüllt aus version.json via main.js */
.site-version { opacity: .6; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
   Corporate Identity – Marken-Verlauf (Blau→Türkis, wie Logo-Wortmarke)
   ═══════════════════════════════════════════════════════════════════════ */
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Headline-Spans tragen jetzt den Markenverlauf statt Flachblau */
.hero h1 span, h2 span.text-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Marken-Akzentlinie: dünner Verlaufsstreifen als wiederkehrendes CI-Element */
.brand-rule { height: 4px; width: 68px; border-radius: 3px; background: var(--grad-brand); margin: 0 0 20px; }
.center .brand-rule { margin-left: auto; margin-right: auto; }
/* Eyebrow bekommt einen Marken-Punkt */
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand); margin-right: 9px; vertical-align: middle; }
.center .eyebrow::before { margin-right: 8px; }
/* Marken-Balken oben an der Kopfzeile (feiner CI-Strich) */
.site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); }
.site-header { position: sticky; }

/* ── Unternehmensgrößen-Segmente (USP je Firmengröße) ──────────────────── */
.seg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .seg-grid { grid-template-columns: 1fr; } }
.seg {
  position: relative; background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius); padding: 26px 24px 24px; overflow: hidden;
  transition: transform var(--trans), border-color var(--trans);
}
.seg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-brand); opacity: .85; }
.seg:hover { transform: translateY(-4px); border-color: var(--clr-primary); }
.seg .seg-size { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-accent); }
.seg h3 { color: #fff; margin: 6px 0 4px; }
.seg .seg-who { font-size: .84rem; color: var(--clr-text-dim); margin-bottom: 14px; }
.seg ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.seg li { position: relative; padding-left: 24px; font-size: .9rem; color: var(--clr-text-mut); }
.seg li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(52,200,190,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2334c8be' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.seg .seg-link { font-size: .9rem; font-weight: 600; }
/* Die oeffentliche Verwaltung ist die erste Zielgruppe und steht deshalb an
   erster Stelle im Raster - sichtbar hervorgehoben, damit die Reihenfolge als
   Aussage gelesen wird und nicht als Zufall. */
.seg--lead { border-color: rgba(52,200,190,.34); background: rgba(52,200,190,.05); }
.seg--lead .seg-size { color: var(--clr-accent); }

/* Weiterfuehrende Ziele innerhalb einer Zielgruppen-Karte. Sie stehen unter dem
   Haupt-Button, damit die Karte genau eine primaere Handlung behaelt. */
.card-more { font-size: .88rem; color: var(--clr-text-dim); margin-top: 12px; }
.card-more a { color: var(--clr-text-mut); text-decoration: underline; text-underline-offset: 3px; }
.card-more a:hover { color: #fff; }

/* ── Einfachheits-Sektion (einfache Lizenz · wenig Admin-Arbeit) ────────── */
.simple-band {
  background: linear-gradient(140deg, rgba(23,184,176,.10), rgba(52,200,190,.08)), var(--clr-surface);
  border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 40px;
}
.simple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px) { .simple-grid { grid-template-columns: 1fr; } }
.simple-item { display: flex; gap: 16px; align-items: flex-start; }
.simple-item .num {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; color: var(--clr-navy); background: var(--grad-brand); font-size: 1.1rem;
}
.simple-item h3 { color: #fff; font-size: 1.08rem; margin: 4px 0 6px; }
.simple-item p { margin: 0; font-size: .93rem; }

/* ── FAQ (SEO: FAQPage-Rich-Snippets) ──────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq details {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm); padding: 4px 20px; transition: border-color var(--trans);
}
.faq details[open] { border-color: var(--clr-primary); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--clr-accent); line-height: 1; flex: none; transition: transform var(--trans); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; font-size: .94rem; }