/* ==========================================================================
   doblinger.ai – Stylesheet
   Statisches HTML/CSS, minimales Vanilla-JS. Keine externen Abhängigkeiten.

   Bildmaterial & Farben stammen ausschließlich aus dem Brand-Kit im Ordner
   /brand (color-palette.svg, wordmark-*.svg, symbol.svg, lockup-*.svg).
   Kernpalette: 5 Werte. Zusätzlich die im Brand-Kit verwendeten Trennlinien-
   Töne #D5DAE2 (auf Hell) und #3A4A63 (auf Dunkel). Keine weiteren Farben.
   Schrift: Poppins (Brand-Kit) mit System-Fallback – ohne externe Ladung.
   ========================================================================== */

:root {
  /* Brand-Palette – exakt wie in brand/color-palette.svg */
  --white:  #FFFFFF;
  --navy:   #0A1B33;
  --cyan:   #1BA9C9;
  --teal:   #2CA98F;
  --green:  #8CC63F;

  /* Trennlinien-Töne aus den Lockup-Dateien des Brand-Kits */
  --line-light: #D5DAE2;   /* brand/lockup-on-light.svg */
  --line-dark:  #3A4A63;   /* brand/lockup-on-dark.svg  */

  /* Aliasse / abgeleitete Flächen (nur aus obigen Farben) */
  --off-white: var(--white);
  --navy-soft: var(--navy);
  --surface: var(--white);
  --surface-tint: rgba(10, 27, 51, .035);
  --border: var(--line-light);
  --border-strong: var(--teal);
  --ink-soft: rgba(10, 27, 51, .72);
  --gray-dark: rgba(10, 27, 51, .60);
  --gray-medium: rgba(10, 27, 51, .45);

  --on-navy: rgba(255, 255, 255, .82);
  --on-navy-dim: rgba(255, 255, 255, .68);
  --hairline-light: var(--line-dark);

  --gradient: linear-gradient(90deg, var(--cyan), var(--teal), var(--green));

  /* Poppins laut Brand-Kit; System-Fallback, keine externe Web-Font-Ladung */
  --font-base: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --container-w: 1140px;
  --section-y: clamp(3.5rem, 7vw, 6rem);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--navy);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; }
h1, h2 { text-wrap: balance; }
p { margin: 0 0 1em; }
dl, dd { margin: 0; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--navy); color: var(--white);
  padding: .75rem 1rem; border-radius: 0 0 8px 8px; z-index: 200;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: var(--section-y) 0; }
section[id] { scroll-margin-top: 72px; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}
/* .btn setzt selbst "display" und würde damit das Standardverhalten des
   hidden-Attributs außer Kraft setzen (Buttons blieben trotz hidden sichtbar) –
   hier ausdrücklich wiederhergestellt. Betrifft u. a. #shareBtn/#installBtn. */
.btn[hidden] { display: none; }
.btn-primary {
  background: var(--gradient);
  color: var(--navy);
  box-shadow: 0 8px 20px -10px rgba(27, 169, 201, .5);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(27, 169, 201, .55); }
.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: var(--white);
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--navy);
}
.btn-outline:hover { border-color: var(--navy); background: rgba(10, 27, 51, .04); }
.btn-sm { padding: .6rem 1.15rem; font-size: .85rem; }

/* --- Eyebrow / Section headings --- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .8rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  margin-right: .6rem;
  vertical-align: middle;
  background: var(--gradient);
}
.eyebrow-light { color: var(--green); }
.eyebrow-light::before { display: none; }

h1 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.15rem; }

.on-dark { color: var(--white); }
.section-sub {
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.on-dark-sub { color: var(--on-navy-dim); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy); /* #0A1B33, deckend – oben und beim Scrollen identisch */
  border-bottom: 1px solid var(--hairline-light);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
}
.logo { display: inline-flex; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }

.main-nav { display: flex; align-items: center; }
.main-nav > ul {
  display: flex;
  gap: 1.6rem;
}
.main-nav a {
  color: var(--on-navy);
  font-size: .92rem;
  font-weight: 500;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover { color: var(--white); }
.main-nav a.is-active { color: var(--green); border-color: var(--green); }
/* Dezent hervorgehobener Eintrag für den KI-Reifegradcheck (bessere
   Auffindbarkeit, V2 §4) – eigene Pille statt reinem Textlink. */
.main-nav a.nav-highlight {
  padding: .4rem .9rem;
  border: 2px solid var(--green);
  border-radius: 999px;
  color: var(--green);
}
/* Pille nie umbrechen. Nur im mobilen Menü sichtbar (siehe .nav-rg-mobile). */
.main-nav a.nav-highlight { white-space: nowrap; }
.main-nav a.nav-highlight:hover { border-color: var(--green); color: var(--white); background: rgba(140, 198, 63, .08); }
.main-nav a.nav-highlight.is-active { background: rgba(140, 198, 63, .12); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px 6px;
  cursor: pointer;
}
.nav-toggle span:not(.sr-only) {
  width: 24px; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Rechts neben der Navigation: dezenter Reifegradcheck-Button + Erstgespräch-CTA. */
.header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.header-rg, .header-cta { flex-shrink: 0; white-space: nowrap; }
.header-rg {
  background: var(--navy);
  border: 2px solid var(--green); /* auch ohne Hover klar sichtbar */
  padding: calc(.6rem - 1px) calc(1.15rem - 1px); /* gleiche Höhe wie der CTA trotz dickerem Rahmen */
  color: var(--green);
}
.header-rg:hover { background: var(--green); border-color: var(--green); color: var(--navy); }
.header-rg:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
/* Reifegradcheck-Eintrag im mobilen Menü: auf Desktop nicht gerendert (display:none =
   auch nicht per Tastatur erreichbar, keine Doppelung mit dem Button oben). */
.nav-rg-mobile, .nav-cta-mobile { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  padding-top: clamp(3.5rem, 9vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 9vw, 6.5rem);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 88% 8%, rgba(27, 169, 201, .16), transparent 70%),
    radial-gradient(55% 50% at 8% 100%, rgba(140, 198, 63, .12), transparent 70%);
}
/* Brand-Symbol (brand/symbol.svg) als dezenter Akzent, rechts unten */
.hero-bg::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -12%;
  width: min(560px, 52%);
  aspect-ratio: 400 / 260;
  background: url("../brand/symbol.svg") no-repeat center / contain;
  opacity: .22;
}
/* Kein eigenes max-width mehr auf dem äußeren Wrapper (Korrektur: einheitliche
   Seitenbreite) - die Sektion nutzt jetzt dieselbe .container-Breite wie
   alle anderen Hauptsektionen. Die Lesbarkeit von Überschrift/Unterzeile
   wird stattdessen gezielt über .hero-sub (siehe unten, bereits vorhanden)
   begrenzt; h1 hat einen manuellen Zeilenumbruch und braucht keine
   zusätzliche Breitenbegrenzung. */
.hero-inner { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .55em; }
.hero-sub {
  font-size: 1.15rem;
  color: var(--on-navy);
  max-width: 600px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 2.25rem;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.8rem;
  font-size: .9rem;
  color: var(--on-navy-dim);
}
.hero-trust li { position: relative; padding-left: 1.15rem; }
.hero-trust li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
}

/* ==========================================================================
   Ansatz / Differenzierung
   ========================================================================== */
.approach { background: var(--white); }
/* Kein eigenes max-width mehr auf dem äußeren Wrapper (siehe .hero-inner
   oben) - Lesbarkeit der Fließtexte bleibt über ".approach p { max-width:
   68ch }" (bereits vorhanden, unten) erhalten. */
.approach h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  margin-bottom: .7em;
}
.approach p {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 68ch;
}
.approach p + p { margin-bottom: 0; }

/* ==========================================================================
   Typische Herausforderungen
   ========================================================================== */
.situation { background: var(--surface-tint); }
.situation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 2rem;
  margin: 2.25rem 0;
}
.situation-grid li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--navy);
  font-size: 1.02rem;
}
.situation-grid li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--gradient);
}
.situation-note {
  font-weight: 600;
  font-size: 1.08rem;
  border-left: 3px solid var(--teal);
  padding-left: 1.1rem;
  margin: 0;
  max-width: 720px;
}

/* ==========================================================================
   Vorgehen (dark)
   ========================================================================== */
.process { background: var(--navy); color: var(--white); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
  margin-top: 2.75rem;
}
.process-steps li {
  position: relative;
  padding-top: 1.1rem;
  border-top: 2px solid var(--hairline-light);
}
.step-num {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--green);
  margin-bottom: .55rem;
}
.process-steps h3 { color: var(--white); }
.process-steps p { color: var(--on-navy-dim); font-size: .95rem; margin: 0; }
.process-note {
  margin: 2.5rem 0 0;
  font-size: .95rem;
  color: var(--on-navy-dim);
  max-width: 720px;
  padding-left: 1.1rem;
  border-left: 3px solid var(--teal);
}

/* ==========================================================================
   Anwendungsszenarien (hell)
   ========================================================================== */
.cases { background: var(--surface-tint); }
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.75rem;
}
@media (min-width: 680px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
}
.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.case-card h3 {
  color: var(--navy);
  padding-bottom: .8rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.case-card dt {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  margin-top: .9rem;
}
.case-card dt::before {
  content: "";
  display: inline-block;
  width: .55rem; height: 2px;
  margin-right: .45rem;
  vertical-align: middle;
  background: var(--teal);
}
.case-card dd { font-size: .94rem; color: var(--ink-soft); margin-top: .15rem; }
.cases-more {
  margin: 2.25rem 0 0;
  font-size: .92rem;
  color: var(--gray-dark);
  max-width: 760px;
  padding-left: 1.1rem;
  border-left: 3px solid var(--teal);
}

/* ==========================================================================
   Leistungsbereiche (hell, reduziert – an den Angebots-PDFs orientiert)
   ========================================================================== */
.services { background: var(--white); }
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.svc-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
.svc-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--teal);
  margin-bottom: .8rem;
}
.svc-num {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.svc-icon { display: inline-flex; }
.svc-icon svg { width: 22px; height: 22px; display: block; }
.svc-item h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.svc-item p { font-size: .98rem; color: var(--ink-soft); margin: 0; max-width: 42ch; }

@media (min-width: 720px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-item { padding: 2rem 0; }
  .svc-item:nth-child(odd) { padding-right: 2.75rem; border-right: 1px solid var(--border); }
  .svc-item:nth-child(even) { padding-left: 2.75rem; }
  .svc-item:nth-last-child(-n+2) { border-bottom: none; }
}

.services-note {
  margin: 2.25rem 0 0;
  font-size: .93rem;
  color: var(--gray-dark);
  max-width: 760px;
  padding-left: 1.1rem;
  border-left: 3px solid var(--teal);
}

/* ==========================================================================
   Warum doblinger.ai
   ========================================================================== */
.about { background: var(--surface-tint); }
.about-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.about-text p { color: var(--navy); }
.about-ki-note {
  font-size: .95rem;
  color: var(--gray-dark);
  border-left: 3px solid var(--teal);
  padding-left: 1.1rem;
}

.credentials {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
}
.credentials li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
}
.credentials li::before {
  content: "";
  position: absolute; left: 0; top: .48em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gradient);
}

.about-photo { margin: 0; }
.about-photo picture { display: block; }
.about-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.about-photo figcaption {
  margin-top: .75rem;
  font-size: .88rem;
  color: var(--gray-dark);
}

/* Zertifizierungskarte (TÜV SÜD – AI Strategy and Application Expert)
   Bewusst helles Element in der „Über mich“-Sektion, kompakt gehalten, damit die
   Textspalte etwa so hoch bleibt wie das Foto. Die Blautöne und das Graublau sind
   auf ausdrücklichen Wunsch des Projektinhabers nur hier lokal definiert (nicht
   Teil der Kernpalette, keine globalen Variablen). Kein Logo/Prüfzeichen:
   „TÜV SÜD“ ist normaler Text. Keine Animation. */
.cert-card {
  --cert-blue-dark: #0A4FA3;
  --cert-blue-mid:  #2F7FD0;
  --cert-blue-light: #DCEBFA;
  --cert-slate: #5B6B80;
  display: flex;
  align-items: stretch;
  max-width: 560px;
  margin-top: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(10, 79, 163, .12);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10, 27, 51, .05), 0 10px 28px -10px rgba(10, 79, 163, .30);
  overflow: hidden;
}
.cert-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cert-card .cert-issuer {
  margin: 0 0 .15rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .03em;
  color: var(--navy);
}
.cert-card .cert-title {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cert-blue-dark);
}
.cert-card .cert-desc {
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--cert-slate);
  text-wrap: balance;
}
.cert-card .cert-nb { white-space: nowrap; }
.cert-art {
  position: relative;
  flex: 0 0 clamp(78px, 26%, 132px);
  background: var(--cert-blue-light);
  color: var(--white);
}
.cert-art::before,
.cert-art::after { content: ""; position: absolute; inset: 0; }
.cert-art::before {
  background: linear-gradient(160deg, #5BA2E6, var(--cert-blue-mid));
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}
.cert-art::after {
  background: linear-gradient(160deg, #1766C7, var(--cert-blue-dark));
  clip-path: polygon(66% 0, 100% 0, 100% 100%, 38% 100%);
}
.cert-art svg {
  position: absolute;
  z-index: 1;
  top: 50%; right: 14%;
  box-sizing: content-box;
  width: 22px; height: 22px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  transform: translateY(-50%);
}
@media (max-width: 480px) {
  .cert-text { padding: .9rem 1rem; }
  .cert-art { flex-basis: 64px; }
  .cert-art svg { right: 12px; width: 18px; height: 18px; padding: 7px; }
}

/* ==========================================================================
   Sicherheit
   ========================================================================== */
.security { background: var(--white); border-top: 1px solid var(--border); }
.security-list {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 2.25rem 0;
}
.security-list li {
  font-size: .92rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--navy);
}
.security-note {
  font-size: .97rem;
  color: var(--gray-dark);
  max-width: 720px;
  padding-left: 1.1rem;
  border-left: 3px solid var(--teal);
  margin: 0;
}

/* ==========================================================================
   Kontakt / Abschluss-CTA (dark)
   ========================================================================== */
.contact { background: var(--navy); color: var(--white); }
.contact-actions { margin: 1.75rem 0 2.25rem; }

/* Zweispaltiges Layout (Korrektur): links Überschrift/Beschreibung, rechts
   das Angebot (kostenloses Erstgespräch) mit zwei dezenten Kontaktflächen.
   Kein äußerer Rahmen um die Kontaktdaten, keine Trennlinie innerhalb der
   Sektion, keine Regionsangabe hier (Region steht bereits im Hero). */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-offer-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 .4rem;
}
.contact-offer-text {
  color: var(--on-navy-dim);
  margin: 0 0 1.5rem;
}
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .95rem 1.25rem;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: border-color .15s ease, background-color .15s ease;
}
.contact-card:hover, .contact-card:focus-visible {
  border-color: var(--white);
  background: rgba(255, 255, 255, .06);
}
.contact-card-label {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
}
.contact-card-value { font-size: 1rem; color: var(--on-navy); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  .contact-cards { gap: .75rem; }
}

/* ==========================================================================
   Kontaktliste (kontakt.html – digitale Visitenkarte, eigenes Layout)
   ========================================================================== */
.contact-details {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1.1rem;
  row-gap: .65rem;
  justify-content: center;
  border-top: 1px solid var(--hairline-light);
  padding-top: 1.75rem;
}
.contact-details li { display: contents; }
.contact-details .cd-label {
  grid-column: 1;
  text-align: right;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
  padding-top: .2rem;
}
.contact-details li > a,
.contact-details .cd-value {
  grid-column: 2;
  text-align: left;
  font-size: .98rem;
  color: var(--on-navy);
}
.contact-details a:hover { color: var(--green); }

/* Helle Variante (z. B. am Seitenende von kontakt.html, nicht auf dunklem Grund) */
.contact-details.on-light { border-top-color: var(--border); }
.contact-details.on-light .cd-label { color: var(--teal); }
.contact-details.on-light li > a,
.contact-details.on-light .cd-value { color: var(--ink-soft); }
.contact-details.on-light a:hover { color: var(--teal); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: var(--on-navy);
  font-size: .9rem;
  border-top: 1px solid var(--hairline-light);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  /* Nur vertikales Padding: die Kurzschreibweise "padding: 3rem 0 2rem" setzte
     das horizontale Padding der .container-Klasse auf 0 (Footer-Inhalt lag
     dadurch 24px links der übrigen Sektionen bzw. klebte am Rand). */
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.footer-brand img { height: 26px; width: auto; margin-bottom: .75rem; }
.footer-brand p { margin: 0; color: var(--on-navy-dim); font-size: .86rem; max-width: 30ch; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: .6rem; }
.footer-legal { display: flex; gap: 1.25rem; margin-top: .3rem; }
.footer-nav a:hover, .footer-contact a:hover, .footer-legal a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid var(--hairline-light);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   Scroll-Reveal (nur wenn Bewegung erwünscht)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Reifegradcheck – Teaser auf der Startseite
   ========================================================================== */
.rg-teaser { background: #EAF7F8; color: var(--navy); position: relative; overflow: hidden; }
/* Inhalt liegt auf dem normalen .container-Raster wie alle anderen Sections
   (keine eigene Maximalbreite, keine Zentrierung); Textbreite kommt von
   .section-sub (640px). */
.rg-teaser-inner {
  position: relative;
  z-index: 1;
}
.rg-teaser::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("../brand/symbol.svg") no-repeat right -8% bottom -30% / min(480px, 46%) auto;
  opacity: .12;
  pointer-events: none;
}
.rg-teaser-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.rg-teaser-meta { font-size: .88rem; color: var(--ink-soft); }

/* ==========================================================================
   Reifegradcheck – App-Shell (reifegradcheck.html)
   ========================================================================== */
.rg-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 27, 51, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-light);
}
/* Nur vertikales Padding setzen: die Kurzschreibweise "padding: .8rem 0" hat
   zuvor das horizontale Padding der .container-Klasse auf 0 überschrieben
   (Logo/Link klebten auf schmalen Bildschirmen am Rand). */
.rg-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; padding-bottom: .8rem; }
.rg-header-back { font-size: .88rem; font-weight: 600; color: var(--on-navy); }
.rg-header-back:hover { color: var(--green); }

.rg-main { background: var(--surface-tint); min-height: 60vh; }
.rg-shell { max-width: 880px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(3rem, 6vw, 5rem); }

.rg-step { animation: none; }
.rg-eyebrow { margin-bottom: .75rem; }
.rg-step h1, .rg-step h2 { margin-bottom: .6em; }
.rg-step-lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.75rem; }

/* "Bereich X von 5" / "3 Fragen" – Informationshierarchie des Fragebogens */
.rg-step-kicker {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--teal); margin: 0 0 .4rem;
}
.rg-step-count { font-size: .95rem; font-weight: 600; color: var(--gray-dark); margin: 0 0 1.75rem; }

.rg-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Intro-Screen: Dimensionsliste ---
   Bewusst NICHT wie Buttons/Tabs/Steps/Cards gestaltet: keine Box pro
   Zeile, kein Hover, kein Pointer-Cursor, keine Farbfläche als "Badge".
   Ruhige Informationsliste mit dezenter Trennlinie (gleiche Sprache wie
   z. B. .svc-item auf der Startseite für reine Inhaltslisten). */
.rg-dim-list {
  display: grid;
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--border);
  cursor: default;
}
.rg-dim-list li {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: .97rem;
  color: var(--navy);
  cursor: default;
}
.rg-dim-list .rg-dim-num {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--gray-dark);
  font-size: .74rem; font-weight: 700;
}
.rg-dim-meta {
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-dark);
  margin: 1.25rem 0 1.75rem;
}

/* --- Assessment-Layout: Fortschritt + Fragen --- */
.rg-assessment-layout { display: grid; gap: 2rem; }
@media (min-width: 880px) {
  .rg-assessment-layout { grid-template-columns: 220px 1fr; align-items: start; }
}

.rg-progress { position: static; }
@media (min-width: 880px) { .rg-progress { position: sticky; top: 96px; } }

/* Gesamtfortschritt: "Fortschritt: X von 15 Fragen" + Balken (V2 §8.A) */
.rg-overall-progress { margin-bottom: 1.75rem; }
.rg-overall-progress-label {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .85rem; font-weight: 700; color: var(--navy);
  margin-bottom: .5rem;
}
.rg-overall-progress-pct { color: var(--teal); }
.rg-overall-progress-track { height: 6px; border-radius: 999px; background: var(--line-light); overflow: hidden; }
.rg-overall-progress-fill { height: 100%; width: 0%; background: var(--gradient); border-radius: 999px; transition: width .25s ease; }

/* Status der 5 Dimensionen: 3 eindeutig unterscheidbare Zustände
   (zukünftig / aktuell / abgeschlossen) – niemals Score-artig (V2 §9). */
.rg-progress-list { display: grid; gap: .9rem; }
.rg-progress-item { display: grid; gap: .35rem; }
.rg-progress-item-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; color: var(--gray-dark);
}
.rg-progress-item.is-current .rg-progress-item-label { color: var(--navy); font-weight: 700; }
.rg-progress-item.is-done .rg-progress-item-label { color: var(--navy); }
.rg-progress-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  font-size: .62rem; line-height: 1; color: transparent;
}
.rg-progress-item.is-current .rg-progress-marker {
  border-color: var(--teal); background: var(--teal);
}
.rg-progress-item.is-done .rg-progress-marker {
  background: var(--gradient); border-color: transparent; color: var(--navy); font-weight: 700;
}
.rg-progress-track { height: 5px; border-radius: 999px; background: var(--line-light); overflow: hidden; }
.rg-progress-fill { height: 100%; width: 0%; background: var(--gradient); border-radius: 999px; transition: width .25s ease; }

/* Mobile: Fortschritt kompakt oberhalb der Fragen (nur Gesamtfortschritt +
   5 schlichte Segmente je Dimensionsstatus, kein Score sichtbar). */
@media (max-width: 879px) {
  .rg-progress-list { display: none; }
  .rg-progress-compact { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }
  .rg-progress-dots { display: flex; gap: .4rem; }
  .rg-progress-dots span {
    flex: 1; height: 5px; border-radius: 999px; background: var(--line-light);
  }
  .rg-progress-dots span.is-current { background: var(--teal); }
  .rg-progress-dots span.is-done { background: var(--gradient); }
}
@media (min-width: 880px) {
  .rg-progress-compact { display: none; }
}

.rg-question-block + .rg-question-block { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--border); }
.rg-question-block legend { padding: 0; margin-bottom: 1.1rem; }
.rg-question-kicker {
  display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gray-dark); margin-bottom: .4rem;
}
.rg-question-text { display: block; font-size: 1.05rem; font-weight: 700; color: var(--navy); }

.rg-options { display: grid; gap: .6rem; }
.rg-option { position: relative; }
.rg-option input {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}
.rg-option-label {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* Sichtbarer Radio-Indikator – macht die Optionen eindeutig als
   Formular-Auswahl erkennbar (nicht als Karte/Button, V2 §7). */
.rg-option-radio {
  flex-shrink: 0;
  width: 1.2rem; height: 1.2rem;
  margin-top: .05rem;
  border-radius: 50%;
  border: 1.5px solid var(--gray-medium);
  background: var(--white);
  position: relative;
  transition: border-color .15s ease;
}
.rg-option-radio::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--gradient);
  transform: scale(0);
  transition: transform .15s ease;
}
.rg-option input:checked + .rg-option-label .rg-option-radio { border-color: var(--teal); }
.rg-option input:checked + .rg-option-label .rg-option-radio::after { transform: scale(1); }
.rg-option input:checked + .rg-option-label {
  border-color: var(--teal);
  background: rgba(44, 169, 143, .07);
  color: var(--navy);
  font-weight: 600;
}
.rg-option input:focus-visible + .rg-option-label {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}
.rg-option-label:hover { border-color: var(--teal); background: rgba(44, 169, 143, .035); }

.rg-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.rg-nav .btn:disabled,
.rg-nav .btn:disabled:hover {
  opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.4);
}
.rg-nav-spacer { flex: 1; }
.rg-btn-arrow { margin-left: .35rem; }

/* --- Sofort-/Detailergebnis ---
   "Ihr KI-Reifegrad" (klein) -> Reifegradbezeichnung (SEHR prominent) ->
   Score. Muss ohne Scrollen als Erstes ins Auge fallen (V2 §12). */
.rg-result-head { text-align: center; max-width: 560px; margin: 0 auto 2rem; }
.rg-result-eyebrow { justify-content: center; }
.rg-result-level {
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .35em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rg-result-score { font-size: 1.15rem; font-weight: 700; color: var(--ink-soft); }
.rg-result-score strong { color: var(--navy); font-size: 1.4em; }

.rg-path { margin: 2.5rem 0; }
.rg-path-label { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-dark); margin-bottom: 1.25rem; text-align: center; }
.rg-path-track { display: flex; align-items: flex-start; justify-content: space-between; gap: .25rem; }
.rg-path-stage { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.rg-path-stage::before {
  content: "";
  position: absolute; top: .7rem; left: -50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.rg-path-stage:first-child::before { display: none; }
.rg-path-stage.is-passed::before, .rg-path-stage.is-current::before { background: var(--teal); }
.rg-path-dot {
  position: relative; z-index: 1;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--white); border: 2px solid var(--border);
  margin-bottom: .6rem;
}
.rg-path-stage.is-passed .rg-path-dot { background: var(--teal); border-color: var(--teal); }
.rg-path-stage.is-current .rg-path-dot {
  background: var(--gradient); border-color: transparent;
  width: 1.9rem; height: 1.9rem;
  box-shadow: 0 0 0 4px rgba(44, 169, 143, .18);
}
.rg-path-name { font-size: .82rem; font-weight: 600; color: var(--gray-dark); }
.rg-path-stage.is-current .rg-path-name { color: var(--navy); font-weight: 700; }
@media (max-width: 560px) {
  .rg-path-track { flex-direction: column; align-items: stretch; gap: 1rem; }
  .rg-path-stage { flex-direction: row; text-align: left; gap: .75rem; align-items: center; }
  .rg-path-stage::before { top: -.6rem; left: .7rem; width: 2px; height: .6rem; }
  .rg-path-stage .rg-path-dot { margin-bottom: 0; }
}

/* --- Radar/Spider-Visualisierung der 5 Dimensionen ---
   Reines inline-SVG, keine Chart-Library (V2 §14). Zeigt ausschließlich die
   bereits berechneten Dimensionsscores aus reifegrad-logic.js – keine
   eigene Berechnung. */
.rg-radar-wrap { display: flex; justify-content: center; margin: 0 0 1.5rem; }
.rg-radar-svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
@media (max-width: 420px) {
  .rg-radar-label { font-size: 9.5px; }
}
.rg-radar-grid { fill: none; stroke: var(--line-light); stroke-width: 1; }
.rg-radar-axis { stroke: var(--line-light); stroke-width: 1; }
.rg-radar-shape { fill: rgba(44, 169, 143, .16); stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.rg-radar-point { fill: var(--teal); stroke: var(--white); stroke-width: 1.5; }
.rg-radar-label { font-family: var(--font-base); font-size: 10.5px; font-weight: 600; fill: var(--navy); dominant-baseline: middle; }

.rg-profile { display: grid; gap: 1.1rem; margin: 1.75rem 0 2.25rem; }
.rg-profile-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; }
.rg-profile-label { font-size: .95rem; font-weight: 600; color: var(--navy); }
.rg-profile-score { font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.rg-profile-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--line-light); overflow: hidden; }
.rg-profile-fill { height: 100%; border-radius: 999px; background: var(--gradient); }

.rg-highlight-grid { display: grid; gap: 1rem; margin: 1.75rem 0; }
@media (min-width: 640px) { .rg-highlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .rg-highlight-wide { grid-column: 1 / -1; } }
.rg-highlight {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1.2rem 1.3rem; background: var(--white);
}
.rg-highlight-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: .5rem; }
.rg-highlight-dim { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; }
.rg-highlight-score { font-size: .86rem; color: var(--gray-dark); }

.rg-recommendation {
  margin-top: .6rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--teal);
  background: var(--surface-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .95rem;
  color: var(--ink-soft);
}

.rg-governance-notice {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-sm);
  background: rgba(44, 169, 143, .07);
}
.rg-governance-notice h3 { margin-bottom: .4em; font-size: 1.02rem; }
.rg-governance-notice p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

.rg-dimension-detail + .rg-dimension-detail { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }

.rg-benefits { display: grid; gap: .75rem; margin: 1.75rem 0 2.25rem; }
.rg-benefits li { position: relative; padding-left: 1.7rem; font-size: 1rem; color: var(--navy); font-weight: 600; }
.rg-benefits li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gradient);
}

.rg-benefits-heading { font-size: .88rem; font-weight: 700; color: var(--teal); margin: 1.5rem 0 0; }
.rg-benefits-heading + .rg-benefits { margin-top: .9rem; }

/* --- Ausführliche Auswertung: Abschnitte und Handlungsfeld-Karten --- */
.rg-section-heading { margin-top: 2.75rem; }
.rg-section-intro { color: var(--gray-dark); font-size: .95rem; margin: -.2rem 0 1.5rem; }

.rg-action-cards { display: grid; gap: 1.25rem; }
.rg-action-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3.5vw, 2rem);
}
.rg-action-card.is-primary { border: 1.5px solid var(--teal); }
.rg-action-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rg-action-rank { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--teal); flex-shrink: 0; }
.rg-action-title { flex: 1 1 12rem; min-width: 0; }
.rg-action-kicker { margin: 0 0 .15rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); }
.rg-action-title h3 { margin: 0; }
.rg-action-score { margin: 0; text-align: right; font-size: .9rem; color: var(--gray-dark); white-space: nowrap; }
.rg-action-score strong { color: var(--navy); font-size: 1.3rem; }
.rg-action-level { display: block; font-size: .78rem; margin-top: .1rem; }
.rg-action-card h4 { margin: 1.25rem 0 .4rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }
.rg-action-card p { margin: 0; font-size: .96rem; color: var(--ink-soft); }
.rg-action-card .rg-recommendation { margin-top: 0; }
.rg-action-steps { margin: 0; padding: 0; list-style: none; counter-reset: rg-step; display: grid; gap: .6rem; }
.rg-action-steps li {
  position: relative; padding-left: 2rem; font-size: .96rem; color: var(--ink-soft);
  counter-increment: rg-step;
}
.rg-action-steps li::before {
  content: counter(rg-step);
  position: absolute; left: 0; top: .05em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: rgba(44, 169, 143, .14); color: var(--teal);
  font-size: .78rem; font-weight: 700; line-height: 1.35rem; text-align: center;
}
@media (max-width: 420px) {
  .rg-action-score { text-align: left; flex-basis: 100%; }
  .rg-action-level { display: inline; margin-left: .5rem; }
}

@media (max-width: 560px) {
  .rg-closing .btn { width: 100%; text-align: center; }
}

.rg-method { margin-top: 2rem; font-size: .9rem; color: var(--ink-soft); }
.rg-method summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: .4rem 0; }
.rg-method summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.rg-method p { margin: .75rem 0 .4rem; }
.rg-method ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; list-style: disc; }

.rg-priority-list { display: grid; gap: .9rem; margin: 1.5rem 0 2.25rem; }
.rg-priority-list li {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rg-priority-rank { font-weight: 700; color: var(--teal); font-size: .9rem; flex-shrink: 0; }
.rg-priority-name { font-weight: 700; color: var(--navy); }
.rg-priority-score { margin-left: auto; font-size: .88rem; color: var(--gray-dark); flex-shrink: 0; }

.rg-disclaimer {
  margin-top: 2.5rem;
  font-size: .84rem;
  color: var(--gray-dark);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

/* --- Lead-Formular --- */
.rg-field { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.rg-field label { font-size: .88rem; font-weight: 700; color: var(--navy); }
.rg-field input[type="text"],
.rg-field input[type="email"] {
  font: inherit;
  padding: .8rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  width: 100%;
}
.rg-field input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; border-color: var(--teal); }
.rg-field-error { font-size: .82rem; color: #B3261E; min-height: 1.1em; }
.rg-field input[aria-invalid="true"] { border-color: #B3261E; }
.rg-honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rg-privacy-note { font-size: .86rem; color: var(--gray-dark); margin: 1.5rem 0 0; }
.rg-privacy-note a { text-decoration: underline; color: var(--navy-soft); }
.rg-delivery-note {
  margin-top: 1.25rem; padding: 1rem 1.2rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-tint); font-size: .88rem; color: var(--ink-soft);
}

.rg-form-status[role="alert"] { font-size: .92rem; font-weight: 600; margin-top: 1rem; }
.rg-form-status.is-error { color: #B3261E; }

/* Deutlich sichtbarer Hinweis, wenn die Detailauswertung mit dem
   Mock-Adapter zustande kam (kann laut backend/CrmAdapterResolver.php nur
   in einer ausdrücklich als Entwicklungsumgebung markierten Installation
   vorkommen). Bewusst derselbe "Hinweis-Rahmen" wie .legal-draft-note
   (Korrekturauftrag: keine neuen Farbtöne einführen). */
.rg-test-mode-notice {
  margin-bottom: 1.25rem;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--teal);
  background: var(--surface-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
}

/* Ladezustand des Absenden-Buttons während der Serverkommunikation
   (api/reifegrad-lead.php) – verhindert optisch wie funktional (disabled)
   Mehrfach-Klicks. */
#rg-lead-submit.is-loading { opacity: .7; cursor: progress; }

/* Live-Region für Screenreader-Ansagen beim Schrittwechsel */
.rg-live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo { max-width: 320px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Desktop-Header (Logo + 6 Links + Reifegradcheck-Button + Erstgespräch-Button) braucht rund
   1140px; darunter Hamburger-Menü statt horizontalem Überlauf (Reifegradcheck dann als Menüeintrag). */
@media (max-width: 1160px) {
  .nav-toggle { display: flex; }
  .main-nav > ul {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--navy);
    border-bottom: 1px solid var(--hairline-light);
    padding: 1rem 1.5rem 1.5rem;
    gap: .35rem;
    display: none;
  }
  .main-nav > ul.is-open { display: flex; }
  .nav-rg-mobile { display: list-item; margin-top: .5rem; }
  .nav-cta-mobile { display: list-item; margin-top: .25rem; }
  .nav-rg-mobile a, .nav-cta-mobile a { display: inline-block; }
  /* .main-nav a (Link-Stil) würde sonst Farbe/Padding des Buttons überschreiben. */
  .main-nav a.nav-cta-btn { color: var(--navy); padding: .7rem 1.4rem; font-size: .96rem; border: 1.5px solid transparent; }
  .main-nav a.nav-cta-btn:hover { color: var(--navy); }
  .main-nav a { padding: .6rem 0; font-size: 1rem; }
  .main-nav a.is-active { border-color: transparent; }
  .header-actions { display: none; }
}

@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-legal { flex-wrap: wrap; row-gap: .5rem; }
}

@media (max-width: 460px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 560px) {
  .rg-teaser-actions { flex-direction: column; align-items: stretch; }
  .rg-teaser-actions .btn { width: 100%; text-align: center; }
  .rg-nav { flex-wrap: wrap; }
  .rg-nav .btn { flex: 1 1 auto; }
  .rg-highlight-score, .rg-priority-score { margin-left: 0; }
  .rg-priority-list li { flex-wrap: wrap; }
}

/* ==========================================================================
   Digitale Visitenkarte – /karte (Vorzeigeansicht)
   Bewusst ohne Header/Footer der Hauptseite: bildschirmfüllender
   „Vorzeigemodus" für das eigene Smartphone, im Zentrum steht der QR-Code.
   ========================================================================== */
.karte-view {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--navy);
  color: var(--white);
  padding: clamp(1.5rem, 5vh, 3rem) 1.5rem;
  text-align: center;
}
.karte-head { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.karte-head img { height: 28px; width: auto; }
.karte-head h1 { font-size: clamp(1.5rem, 4.5vw, 2rem); margin: 0; }
.karte-tagline { margin: 0; color: var(--on-navy-dim); font-size: 1rem; max-width: 40ch; }

.karte-qr-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.karte-qr-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(.9rem, 3vw, 1.5rem);
  box-shadow: 0 20px 50px -20px rgba(10, 27, 51, .5);
  width: min(88vw, 62svh, 480px);
  aspect-ratio: 1 / 1;
}
.karte-qr-card svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.karte-qr-card svg path { fill: var(--navy); }

.karte-foot { display: flex; flex-direction: column; align-items: center; gap: .9rem; width: 100%; max-width: 420px; }
.karte-foot .btn { width: 100%; }
.karte-share { background: transparent; border: 1.5px solid rgba(255, 255, 255, .4); color: var(--white); }
.karte-share:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.karte-foot small { color: var(--on-navy-dim); font-size: .82rem; }

.karte-install-hint {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .85rem;
  color: var(--on-navy-dim);
  text-align: left;
}
.karte-install-hint p { margin: 0 0 .4rem; }
.karte-install-hint p:last-child { margin-bottom: 0; }
.karte-install-hint strong { color: var(--white); }

/* ==========================================================================
   Digitale Visitenkarte – /kontakt (öffentliche Ansicht)
   ========================================================================== */
.kv-top {
  background: var(--navy);
  color: var(--white);
  padding: clamp(2.5rem, 8vw, 4rem) 0 clamp(2rem, 6vw, 3rem);
  text-align: center;
}
.kv-top .container { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 480px; }
.kv-top img.kv-logo { height: 28px; width: auto; }
.kv-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .25);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}
.kv-top h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.2rem); }
.kv-top-sub { margin: 0; color: var(--on-navy); max-width: 38ch; }

.kv-save {
  width: 100%;
  max-width: 340px;
  margin-top: .5rem;
  font-size: 1.02rem;
  padding: 1.05rem 1.7rem;
}

.kv-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: .25rem;
}
.kv-quick a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: var(--white);
  font-size: .88rem;
  font-weight: 600;
}
.kv-quick a:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.kv-quick svg { width: 16px; height: 16px; flex-shrink: 0; }

.kv-cards { padding: clamp(2.5rem, 7vw, 3.5rem) 0; }
.kv-card-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 680px) { .kv-card-grid { grid-template-columns: repeat(3, 1fr); } }
.kv-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.kv-card h2 { font-size: 1.02rem; margin: 0 0 .6rem; }
.kv-card p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

.kv-cta {
  background: var(--surface-tint);
  padding: clamp(2.5rem, 7vw, 3.5rem) 0;
  text-align: center;
}
.kv-cta-inner { max-width: 480px; margin: 0 auto; }
.kv-cta h2 { font-size: clamp(1.35rem, 3.5vw, 1.7rem); }
.kv-cta p { color: var(--ink-soft); }

.kv-endcontact { padding: clamp(2rem, 6vw, 3rem) 0 0; }
.kv-endcontact .contact-details { max-width: 420px; margin: 0 auto; }

.kv-back {
  text-align: center;
  padding: 2rem 0;
  font-size: .9rem;
}
.kv-back a { color: var(--navy-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kv-back a:hover { color: var(--teal); }

.kv-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  text-align: center;
  font-size: .8rem;
  color: var(--gray-medium);
}
.kv-footer nav { display: flex; justify-content: center; gap: 1.25rem; margin-top: .5rem; }
.kv-footer a { text-decoration: underline; text-underline-offset: 2px; }
.kv-footer a:hover { color: var(--teal); }

@media (max-width: 420px) {
  .kv-quick a { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Platzhalter-Startseite „Bald verfügbar" (index.html)
   ========================================================================== */
.soon-view {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
}
.soon-inner {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.soon-inner img { height: 30px; width: auto; }
.soon-inner h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.4rem); }
.soon-inner p { margin: 0; color: var(--on-navy); }
.soon-inner .soon-note { color: var(--on-navy-dim); font-size: .95rem; }
.soon-inner .btn { margin-top: .4rem; }

/* ==========================================================================
   Rechtstexte (datenschutz.html) – Überschriften, Inhaltsverzeichnis, Listen
   ========================================================================== */
.legal-page h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); margin-bottom: .3rem; }
.legal-meta { color: var(--gray-dark); font-size: .9rem; margin: 0 0 2rem; }

.legal-toc {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.75rem;
}
.legal-toc ul { display: grid; gap: .45rem; font-size: .92rem; }
.legal-toc a { color: var(--navy-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal-toc a:hover { color: var(--teal); }

.legal-section { padding: 0; margin: 0 0 3rem; scroll-margin-top: 90px; }
.legal-section:last-of-type { margin-bottom: 2rem; }
.legal-page h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.legal-page h3 { font-size: 1.02rem; margin: 1.5rem 0 .6rem; }
.legal-page p { color: var(--ink-soft); }
.legal-page ul { list-style: disc; padding-left: 1.35rem; margin: 0 0 1em; display: grid; gap: .3rem; color: var(--ink-soft); }
.legal-page a { text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--teal); }
.legal-back { margin-top: 1rem; }

/* Klar gekennzeichneter Entwurfs-/Prüfhinweis für technisch bereits
   umgesetzte, rechtlich aber noch nicht final freigegebene Absätze (z. B.
   neue Datenflüsse, die erst nach Freigabe live geschaltet werden). Bewusst
   optisch von den eigentlichen, verbindlichen Absätzen unterscheidbar. */
.legal-draft-note {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--teal);
  background: var(--surface-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-draft-note p { margin: 0 0 .6rem; font-size: .93rem; }
.legal-draft-note p:last-child { margin-bottom: 0; }
.legal-draft-note strong { color: var(--navy); }