/* ==========================================================================
   KLINIKER BRÜCKE – Website Relaunch 2026
   Gemeinsames Stylesheet für alle Seiten
   --------------------------------------------------------------------------
   Basis: Brand Manual Version 2.0 (Juli 2026)
   Grundprinzip: Light Mode First – Porzellanweiß als Grundfläche,
   Executive Blue als Anker, Electric Cyan als streng dosierter Akzent
   (nur auf dunklem Grund, nie als Textfarbe auf hellem Grund).

   Hinweis zur Elementor-Umsetzung:
   Alle Werte in diesem Stylesheet lassen sich 1:1 in die Elementor-
   Global-Settings übertragen (Global Colors, Global Fonts, Buttons).
   Die Layouts nutzen ausschließlich einfache Flexbox-/Grid-Spalten,
   wie sie Elementor-Container nativ erzeugen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens (→ Elementor Global Colors / Global Fonts)
   -------------------------------------------------------------------------- */
:root {
  /* Farbwelt – Brand Manual Seite 4 */
  --porzellan: #F7F7F5;      /* Grundfläche, ca. 70 % */
  --executive-blue: #051c30; /* Anker: Typografie, Hero, Footer, ca. 25 % */
  --electric-cyan: #5ce1e6;  /* Akzent, max. 5 %, nur Interaktion/Grafik */
  --card-white: #FFFFFF;     /* Karten auf hellem Grund */
  --card-line: #E5E7E9;      /* Feine Kartenlinie, 1 px */
  --card-dark: #0a2a45;      /* Karten auf dunklem Grund */
  --blue-soft: rgba(5, 28, 48, 0.72);  /* Sekundärtext auf hell */
  --white-soft: rgba(247, 247, 245, 0.78); /* Sekundärtext auf dunkel */

  /* Typografie – Brand Manual Seite 3 */
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-copy: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius: 10px;
  --shadow-soft: 0 10px 30px rgba(5, 28, 48, 0.06);
  --transition: 200ms ease; /* Calm Motion: 150–250 ms */
}

/* --------------------------------------------------------------------------
   2. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* Ausgleich für Sticky Header bei Ankerlinks */
}

body {
  font-family: var(--font-copy);
  font-size: 17px;            /* Fließtext 16–18 px lt. Brand Manual */
  line-height: 1.65;          /* Zeilenabstand min. 1,4 */
  color: var(--executive-blue);
  background-color: var(--porzellan);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Fokus-Zustände – Brand Manual Seite 13 (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--executive-blue);
  outline-offset: 3px;
}

.section--dark a:focus-visible,
.section--dark button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--electric-cyan);
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em; /* Playfair leicht verringert */
  line-height: 1.15;
}

/* Responsive Typo-Skalierung – Brand Manual Seite 14:
   H1: 64 px Desktop → 40 px Tablet → 32 px Mobile */
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.625rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

p { max-width: 70ch; } /* Zeilenlänge max. ~75 Zeichen */

/* Eyebrow-Label: kurze Versal-Auszeichnung über Headlines */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 1rem;
}

.section--dark .eyebrow { color: var(--electric-cyan); }

/* Claim: Versalien, gesperrt, mit Trennstrich und Schlusspunkt */
.claim {
  font-family: var(--font-copy);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Layout-Grundgerüst
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section {
  padding-block: 72px;
}

/* Dunkle Akzentsektion (Hero, Zitat, CTA) – weiße Typo, Cyan erlaubt */
.section--dark {
  background-color: var(--executive-blue);
  color: var(--porzellan);
}

/* Weiße Zwischensektion für ruhigen Flächenwechsel */
.section--white {
  background-color: var(--card-white);
  border-top: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
}

.section-head {
  max-width: 760px;
  margin-bottom: 3rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: 1rem;
  color: var(--blue-soft);
  font-size: 1.05rem;
}

.section--dark .section-head p { color: var(--white-soft); }

/* Feine Cyan-Linie als grafischer Akzent (nur dosiert einsetzen) */
.accent-line {
  width: 56px;
  height: 2px;
  background-color: var(--electric-cyan);
  border: 0;
  margin: 1.25rem 0;
}

.section-head--center .accent-line { margin-inline: auto; }

/* Zweispaltiges Text/Bild-Layout (Elementor: Container mit 2 Spalten) */
.split {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split--text-right .split-media { order: -1; }
}

.split-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius);
}

.split-body p + p { margin-top: 1.1rem; }
.split-body .btn { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   5. Buttons – Brand Manual Seite 7
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-copy);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 16px 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* Primary auf hellem Grund: Fläche Executive Blue, Text Porzellanweiß */
.btn--primary {
  background-color: var(--executive-blue);
  color: var(--porzellan);
}

.btn--primary:hover {
  background-color: #0a2a45; /* dezente Farbvertiefung, kein Glow */
}

/* Primary auf dunklem Grund: Fläche Cyan, Text Executive Blue */
.btn--cyan {
  background-color: var(--electric-cyan);
  color: var(--executive-blue);
}

.btn--cyan:hover {
  background-color: #7ce9ed;
}

/* Secondary: transparent mit Randlinie */
.btn--outline {
  background-color: transparent;
  border-color: var(--executive-blue);
  color: var(--executive-blue);
}

.btn--outline:hover {
  background-color: rgba(5, 28, 48, 0.05);
}

.btn--outline-light {
  background-color: transparent;
  border-color: var(--porzellan);
  color: var(--porzellan);
}

.btn--outline-light:hover {
  background-color: rgba(247, 247, 245, 0.1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   6. Header & Navigation (Elementor Pro: Sticky Header Template)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(247, 247, 245, 0.96);
  border-bottom: 1px solid var(--card-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
}

/* Logo: Wortmarke mit Bogen-Signet (Platzhalter bis SVG-Logo vorliegt) */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand svg { flex-shrink: 0; }

.brand-name {
  font-family: var(--font-copy);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  color: var(--executive-blue);
  white-space: nowrap;
}

.brand-claim {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--blue-soft);
  margin-top: 2px;
}

/* Desktop-Navigation */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.main-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap; /* Menüpunkte nie umbrechen */
  color: var(--executive-blue);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}

/* Schmale Desktop-Breiten: Navigation kompakter, damit nichts umbricht */
@media (min-width: 1024px) and (max-width: 1240px) {
  .main-nav ul { gap: 18px; }
  .main-nav a { font-size: 0.88rem; }
  .header-cta .btn { padding: 12px 16px; letter-spacing: 0.1em; }
}

.main-nav a:hover { border-bottom-color: var(--executive-blue); }

.main-nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--executive-blue);
}

.header-cta { flex-shrink: 0; }

.header-cta .btn { padding: 12px 22px; font-size: 0.8rem; }

/* Mobile-Navigation ohne JavaScript (details/summary).
   In WordPress ersetzt das native Elementor-Pro-Nav-Menu-Widget
   dieses Konstrukt inklusive Hamburger-Verhalten. */
.mobile-nav { display: none; }

@media (max-width: 1023px) {
  .main-nav { display: none; }

  .mobile-nav { display: block; position: relative; }

  .mobile-nav summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;   /* Mindest-Touchziel 44 × 44 px */
    height: 44px;
    border: 1px solid var(--card-line);
    border-radius: 6px;
    background-color: var(--card-white);
  }

  .mobile-nav summary::-webkit-details-marker { display: none; }

  .mobile-nav ul {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 240px;
    background-color: var(--card-white);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    list-style: none;
    padding: 10px;
  }

  .mobile-nav a {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
  }

  .mobile-nav a:hover,
  .mobile-nav a[aria-current="page"] {
    background-color: var(--porzellan);
    font-weight: 600;
  }
}

@media (max-width: 479px) {
  /* Responsive Logo: unter 480 px nur Signet – Brand Manual Seite 14 */
  .brand-text { display: none; }
  .header-cta .btn { padding: 12px 16px; letter-spacing: 0.08em; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: 110px 120px;
  overflow: hidden;
}

/* "The Neural Grid": feine Linien, geringe Deckkraft, Cyan nur auf dunkel */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(92, 225, 230, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 225, 230, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.hero .container { position: relative; }

.hero-claim {
  color: var(--electric-cyan);
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  margin-bottom: 1.5rem;
}

.hero h1 {
  max-width: 17ch;
  margin-bottom: 1.5rem;
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--white-soft);
  max-width: 58ch;
  margin-bottom: 2.25rem;
}

/* Vertrauenszeile unter den Hero-Buttons */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 247, 245, 0.16);
  list-style: none;
  font-size: 0.95rem;
  color: var(--white-soft);
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-trust svg { flex-shrink: 0; }

/* Schmaler Seiten-Hero für Unterseiten */
.page-hero { padding-block: 80px; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero p { color: var(--white-soft); font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   8. Karten & Grids
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 700px) { .card-grid--2, .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Karte auf hellem Grund: reines Weiß, feine Linie, sehr weicher Schatten */
.card {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition), transform var(--transition);
}

.card:hover {
  border-color: rgba(5, 28, 48, 0.25);
  transform: translateY(-3px);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background-color: var(--porzellan);
  border: 1px solid var(--card-line);
  margin-bottom: 1.5rem;
}

.card h3 { margin-bottom: 0.85rem; }

.card p {
  color: var(--blue-soft);
  font-size: 0.98rem;
}

.card p + p { margin-top: 0.85rem; }

.card-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--executive-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition);
}

/* Karte auf dunklem Grund: aufgehelltes Blau statt Grau */
.section--dark .card {
  background-color: var(--card-dark);
  border-color: rgba(247, 247, 245, 0.12);
  box-shadow: none;
}

.section--dark .card p { color: var(--white-soft); }
.section--dark .card-link { color: var(--porzellan); }

/* --------------------------------------------------------------------------
   9. Kennzahlen (Elementor: Counter-Widget)
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: 32px;
  text-align: center;
}

@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  line-height: 1.1;
}

.section--dark .stat-value { color: var(--porzellan); }

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

.section--dark .stat-label { color: var(--white-soft); }

/* Feine vertikale Trennlinien zwischen den Kennzahlen (Desktop) */
@media (min-width: 700px) {
  .stats > div + div { border-left: 1px solid var(--card-line); }
  .section--dark .stats > div + div { border-left-color: rgba(92, 225, 230, 0.25); }
}

/* --------------------------------------------------------------------------
   10. Zitat-Modul (dunkle Akzentfläche)
   -------------------------------------------------------------------------- */
.quote {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.quote blockquote {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--porzellan);
}

.quote figcaption {
  margin-top: 1.75rem;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

/* --------------------------------------------------------------------------
   11. FAQ-Akkordeon (Elementor Pro: Accordion-Widget)
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  font-weight: 600;
  font-size: 1.02rem;
  transition: background-color var(--transition);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { background-color: var(--porzellan); }

/* Plus/Minus-Indikator rein über CSS */
.faq-marker {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--executive-blue);
}

.faq-marker::before { content: "+"; }
.faq-item[open] .faq-marker::before { content: "–"; }

.faq-body {
  padding: 0 26px 24px;
  color: var(--blue-soft);
}

.faq-body p + p { margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   12. Team
   -------------------------------------------------------------------------- */
.team-card { padding: 0; overflow: hidden; }

.team-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.team-card-body { padding: 28px 30px 32px; }

.team-role {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin: 0.35rem 0 1rem;
}

.team-contact {
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
}

.team-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--executive-blue);
  text-decoration: none;
}

.team-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   13. CTA-Band (Zwischensektion vor dem Footer)
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }

.cta-band h2 { color: var(--porzellan); max-width: 22ch; margin-inline: auto; }

.cta-band p {
  color: var(--white-soft);
  max-width: 60ch;
  margin: 1.25rem auto 2.25rem;
}

.cta-band .btn-row { justify-content: center; }

/* Diskretionshinweis – Vertrauenselement an jedem Kontaktpunkt */
.discretion-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2rem;
  font-size: 0.88rem;
  color: var(--white-soft);
}

.discretion-note--light { color: var(--blue-soft); }

/* --------------------------------------------------------------------------
   14. Kontaktseite & WPForms
   -------------------------------------------------------------------------- */
.contact-cards .card { text-align: left; }

.contact-cards .card a {
  color: var(--executive-blue);
  font-weight: 600;
  text-decoration: none;
}

.contact-cards .card a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* WPForms-Styling: Selektoren entsprechen der nativen WPForms-Markup-
   Struktur, damit das später eingebundene WPForms-Widget ohne
   Anpassungen dieses Erscheinungsbild übernimmt. */
.wpforms-container {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 40px 36px;
}

.wpforms-field { margin-bottom: 22px; }

.wpforms-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.wpforms-field-sublabel,
.wpforms-field-description {
  font-size: 0.85rem;
  color: var(--blue-soft);
  margin-top: 6px;
}

.wpforms-required-label { color: #b4231f; }

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea {
  width: 100%;
  font-family: var(--font-copy);
  font-size: 1rem;
  color: var(--executive-blue);
  background-color: var(--porzellan);
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 14px 16px;
  transition: border-color var(--transition);
}

.wpforms-form input:focus,
.wpforms-form textarea:focus {
  border-color: var(--executive-blue);
  outline: none;
}

.wpforms-form textarea { min-height: 150px; resize: vertical; }

/* Zweispaltige Feldreihe (WPForms-Layout "50/50") */
.wpforms-field-row {
  display: grid;
  gap: 22px;
}

@media (min-width: 700px) {
  .wpforms-field-row { grid-template-columns: 1fr 1fr; }
}

.wpforms-field-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--blue-soft);
  font-weight: 400;
  cursor: pointer;
}

.wpforms-field-checkbox input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--executive-blue);
}

.wpforms-submit {
  font-family: var(--font-copy);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--porzellan);
  background-color: var(--executive-blue);
  border: 0;
  border-radius: 6px;
  padding: 16px 36px;
  cursor: pointer;
  transition: background-color var(--transition);
}

.wpforms-submit:hover { background-color: #0a2a45; }

/* --------------------------------------------------------------------------
   15. Blog – Beitragsübersicht (Elementor Pro: Posts-Widget)
   Raster: 3 Karten Desktop / 2 Tablet / 1 Mobile über .card-grid--3
   -------------------------------------------------------------------------- */
.post-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hover: Schattenverstärkung auf der Karte + Bildzoom (Calm Motion, 250 ms) */
.post-card:hover {
  transform: none; /* kein Karten-Lift – die Wirkung kommt aus Bild und Schatten */
  box-shadow: 0 18px 44px rgba(5, 28, 48, 0.14);
}

/* Bildcontainer: einheitliches Seitenverhältnis, Zoom bleibt beschnitten */
.post-media {
  position: relative;
  overflow: hidden;
}

.post-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 250ms ease;
}

.post-card:hover .post-media img { transform: scale(1.05); }

/* Kategorie-Badge auf dem Beitragsbild */
.post-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--card-white);
  color: var(--executive-blue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
}

.post-card-body {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-card h2,
.post-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.8rem;
}

/* Beitragstitel ist verlinkt, erbt aber die Headline-Optik */
.post-card h2 a,
.post-card h3 a {
  color: inherit;
  text-decoration: none;
}

.post-card h2 a:hover,
.post-card h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Zusammenfassung auf 3 Zeilen begrenzt (Elementor: Excerpt-Länge) */
.post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Weiterlesen"-Button am Kartenende, bündig über alle Karten */
.post-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.btn--sm {
  padding: 12px 24px;
  font-size: 0.8rem;
  margin-top: 1.5rem;
}

/* Kategorie-Filter (Elementor: Posts-Widget mit Taxonomie-Filter) */
.post-meta {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 0.8rem;
}

/* --------------------------------------------------------------------------
   15b. Blog – Detailansicht (Elementor Pro: Theme Builder "Single Post")
   Widgets: Post Title, Post Info, Featured Image, Post Content
   -------------------------------------------------------------------------- */
.post-single-header {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  padding-top: 64px;
}

.post-single-header .post-badge {
  position: static;
  display: inline-block;
  background-color: var(--porzellan);
  margin-bottom: 1.5rem;
}

.post-single-header h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  margin-bottom: 1.25rem;
}

/* Meta-Zeile: Datum, Autor, Lesezeit (Elementor: Post-Info-Widget) */
.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  list-style: none;
  font-size: 0.88rem;
  color: var(--blue-soft);
}

.post-meta-row li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Beitragsbild (Elementor: Featured-Image-Widget) */
.post-figure {
  max-width: 980px;
  margin: 48px auto 0;
}

.post-figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.post-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--blue-soft);
  text-align: center;
}

/* Beitragstext (Elementor: Post-Content-Widget) */
.post-content {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 56px 24px;
}

.post-content h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  margin: 2.5rem 0 1rem;
}

.post-content p { margin-bottom: 1.15rem; }

.post-content p:first-child {
  font-size: 1.12rem;
  color: var(--blue-soft);
}

/* Zitat im Fließtext: heller Kasten mit Blue-Anker statt dunkler Fläche */
.post-content blockquote {
  margin: 2.25rem 0;
  padding: 28px 32px;
  background-color: var(--card-white);
  border-left: 3px solid var(--electric-cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.5;
}

.post-content blockquote footer {
  margin-top: 1rem;
  font-family: var(--font-copy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

/* Zurück-Link über dem Beitrag */
.post-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--executive-blue);
  text-decoration: none;
  margin-bottom: 2rem;
}

.post-backlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Textlinks im Beitrag: beschreibende Ankertexte, Executive Blue, unterstrichen */
.post-content a {
  color: var(--executive-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   15c. GEO-/Pillar-Komponenten (Pillar-Content-Strategie)
   Alle Elemente sind mit Elementor-Standard-Widgets nachbaubar
   (Icon-Box, Text-Editor, Tabelle als HTML im Text-Widget, Button).
   -------------------------------------------------------------------------- */

/* Kernantwort-Box: direkte Antwort in max. 25 Wörtern (Qualitätsprinzip 5) */
.key-answer {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--electric-cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 28px;
  margin-bottom: 2.25rem;
}

.key-answer-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 0.5rem;
}

.key-answer p {
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0;
}

/* Praxis-Box: originäres Element aus der Mandatsarbeit (Qualitätsprinzip 3) */
.practice-box {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--executive-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 28px;
  margin: 2.25rem 0;
}

.practice-box-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 0.6rem;
}

.practice-box p { margin: 0; }
.practice-box p + p { margin-top: 0.85rem; }

/* Vergleichstabellen (Qualitätsprinzip 5: Tabellen für Vergleiche) */
.table-scroll { overflow-x: auto; margin: 1.75rem 0; }

.post-content table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.post-content th {
  background-color: var(--executive-blue);
  color: var(--porzellan);
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
}

.post-content td {
  padding: 14px 18px;
  border-top: 1px solid var(--card-line);
  vertical-align: top;
}

.post-content td:first-child { font-weight: 600; white-space: nowrap; }

/* Listen im Beitragstext */
.post-content ul,
.post-content ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
}

.post-content li { margin-bottom: 0.5rem; }
.post-content li::marker { color: var(--executive-blue); font-weight: 600; }

/* Inline-CTA in der Artikelmitte (CTA-Strategie: Mitte + Ende, nie oben) */
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 28px 32px;
  margin: 2.75rem 0;
}

.inline-cta p {
  margin: 0;
  font-weight: 500;
  max-width: 46ch;
}

/* CTA am Artikelende: intentbasierter Textlink mit Pfeil */
.article-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 2.5rem 0 1rem;
}

/* E-E-A-T-Autorenblock (Qualitätsprinzip 2) */
.author-box {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-top: 3rem;
}

.author-box img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-box-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 0.4rem;
}

.author-box-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.author-box p {
  font-size: 0.92rem;
  color: var(--blue-soft);
  margin-top: 0.5rem;
}

@media (max-width: 560px) {
  .author-box { flex-direction: column; }
}

/* Pillar-Teaser auf der Blogübersicht: dunkle Akzentkarte */
.pillar-card {
  background-color: var(--executive-blue);
  color: var(--porzellan);
  border-radius: var(--radius);
  padding: clamp(32px, 3vw + 20px, 56px);
  margin-bottom: 3rem;
}

.pillar-card .eyebrow { color: var(--electric-cyan); }

.pillar-card h2 {
  color: var(--porzellan);
  max-width: 24ch;
  margin-bottom: 1rem;
}

.pillar-card p {
  color: var(--white-soft);
  max-width: 62ch;
  margin-bottom: 1.75rem;
}

/* Cluster-Artikellisten auf der Pillar Page */
.cluster-article-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 10px;
}

.cluster-article-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.97rem;
}

.cluster-article-list svg { flex-shrink: 0; margin-top: 4px; }

.cluster-article-list a {
  color: var(--executive-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Geplante, noch nicht veröffentlichte Beiträge */
.cluster-article-list .planned { color: var(--blue-soft); }

.planned-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-soft);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Kategorie-Filter (Elementor: Posts-Widget mit Taxonomie-Filter) */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2.5rem;
}

.filter-chip {
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background-color: var(--card-white);
  color: var(--executive-blue);
  transition: background-color var(--transition), color var(--transition);
}

.filter-chip:hover,
.filter-chip[aria-current="true"] {
  background-color: var(--executive-blue);
  color: var(--porzellan);
  border-color: var(--executive-blue);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--executive-blue);
  color: var(--porzellan);
  padding-top: 72px;
}

.footer-grid {
  display: grid;
  gap: 40px;
  padding-bottom: 56px;
}

@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

.footer-brand p {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--white-soft);
  max-width: 40ch;
}

.footer-claim {
  margin-top: 1rem;
  font-size: 0.68rem;
  color: var(--electric-cyan);
}

.footer-title {
  font-family: var(--font-copy);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-soft);
  margin-bottom: 1.25rem;
}

.footer-nav {
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 0.97rem;
}

.footer-nav a {
  color: var(--porzellan);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-contact {
  list-style: none;
  display: grid;
  gap: 14px;
  font-size: 0.97rem;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--white-soft);
}

.footer-contact a { color: var(--porzellan); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; }

.footer-contact .btn { margin-top: 0.75rem; }

.footer-bottom {
  border-top: 1px solid rgba(247, 247, 245, 0.14);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--white-soft);
}

/* --------------------------------------------------------------------------
   17. Hilfsklassen
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Reduzierte Bewegung respektieren – Calm Motion konsequent gedacht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}


/* ==========================================================================
   WordPress/Elementor-Adapter – KLINIKER BRÜCKE
   Mappt native Elementor-Widgets auf das Corporate Design (Brand Manual v2.0).
   Wird nach den Elementor-Styles geladen (Prio 50 im Child-Theme).
   ========================================================================== */

/* Elementor-Basiselemente erben die Markentypografie
   (Spezifität bewusst über Elementors eigener Heading-Regel) */
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: inherit;
}

/* Auf dunklen Akzentflächen immer Porzellanweiß */
.section--dark .elementor-widget-heading .elementor-heading-title,
.pillar-card .elementor-widget-heading .elementor-heading-title {
  color: var(--porzellan);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-copy);
  color: inherit;
}

.elementor-widget-text-editor p { max-width: 70ch; }

/* Headings-Größen wie im Stylesheet */
h1.elementor-heading-title { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); }
h2.elementor-heading-title { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.625rem); }
h3.elementor-heading-title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

/* --------------------------------------------------------------------------
   Buttons (Elementor-Button-Widget → Markenstil)
   -------------------------------------------------------------------------- */
.elementor-button,
.elementor-button:focus {
  font-family: var(--font-copy);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: var(--executive-blue);
  color: var(--porzellan);
  transition: background-color 200ms ease, color 200ms ease;
}

.elementor-button:hover { background-color: #0a2a45; color: var(--porzellan); }

.kb-btn-cyan .elementor-button { background-color: var(--electric-cyan); color: var(--executive-blue); }
.kb-btn-cyan .elementor-button:hover { background-color: #7ce9ed; color: var(--executive-blue); }

.kb-btn-outline .elementor-button { background-color: transparent; border-color: var(--executive-blue); color: var(--executive-blue); }
.kb-btn-outline .elementor-button:hover { background-color: rgba(5, 28, 48, 0.05); }

.kb-btn-outline-light .elementor-button { background-color: transparent; border-color: var(--porzellan); color: var(--porzellan); }
.kb-btn-outline-light .elementor-button:hover { background-color: rgba(247, 247, 245, 0.1); }

/* --------------------------------------------------------------------------
   Grid-Klassen gegen Elementor-Flex durchsetzen
   -------------------------------------------------------------------------- */
.e-con.card-grid { display: grid !important; }
.e-con.stats { display: grid !important; }
.e-con.card-grid > .e-con, .e-con.stats > .e-con { width: auto; min-width: 0; }

/* Abstände: Elementor-Widgets ohne Zusatzmargen, Rhythmus wie Prototyp */
.e-con.card-grid { gap: 24px; }
.elementor-widget-heading + .elementor-widget-text-editor { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Counter-Widget → Kennzahlen
   -------------------------------------------------------------------------- */
.elementor-counter { text-align: center; }

.elementor-counter .elementor-counter-number-wrapper {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  line-height: 1.1;
  color: var(--executive-blue);
  justify-content: center;
}

.section--dark .elementor-counter .elementor-counter-number-wrapper { color: var(--porzellan); }

.elementor-counter .elementor-counter-title {
  margin-top: 0.5rem;
  font-family: var(--font-copy);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-soft);
  justify-content: center;
}

.section--dark .elementor-counter .elementor-counter-title { color: var(--white-soft); }

/* --------------------------------------------------------------------------
   Nav-Menü (Elementor Pro) im Header
   -------------------------------------------------------------------------- */
.kb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(247, 247, 245, 0.96);
  border-bottom: 1px solid var(--card-line);
}

.kb-header .elementor-nav-menu a {
  font-family: var(--font-copy);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--executive-blue);
}

.kb-header .elementor-nav-menu a:hover,
.kb-header .elementor-nav-menu .elementor-item-active {
  color: var(--executive-blue);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.kb-header .elementor-menu-toggle { color: var(--executive-blue); }

/* --------------------------------------------------------------------------
   Posts-Widget (Elementor Pro) → Blogkarten
   -------------------------------------------------------------------------- */
.elementor-posts .elementor-post {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 250ms ease;
}

.elementor-posts .elementor-post:hover { box-shadow: 0 18px 44px rgba(5, 28, 48, 0.14); }

.elementor-posts .elementor-post__thumbnail { aspect-ratio: 16 / 10; }

.elementor-posts .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease;
}

.elementor-posts .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.05); }

.elementor-posts .elementor-post__text { padding: 24px 28px 30px; }

.elementor-posts .elementor-post__title,
.elementor-posts .elementor-post__title a {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--executive-blue);
  text-decoration: none;
}

.elementor-posts .elementor-post__excerpt p { color: var(--blue-soft); font-size: 0.98rem; }

.elementor-posts .elementor-post__read-more {
  display: inline-block;
  font-family: var(--font-copy);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--executive-blue);
  border: 1px solid var(--executive-blue);
  border-radius: 6px;
  padding: 12px 24px;
  margin-top: 1rem;
  transition: background-color 200ms ease;
}

.elementor-posts .elementor-post__read-more:hover { background-color: rgba(5, 28, 48, 0.05); }

.elementor-post__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background-color: var(--card-white);
  color: var(--executive-blue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
}

/* --------------------------------------------------------------------------
   Formular-Widget (Elementor Pro) → WPForms-Optik des Prototyps
   -------------------------------------------------------------------------- */
.elementor-form {
  background-color: var(--card-white);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 40px 36px;
}

.elementor-form .elementor-field-group label {
  font-family: var(--font-copy);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--executive-blue);
  margin-bottom: 8px;
}

.elementor-form .elementor-field-textual {
  font-family: var(--font-copy);
  font-size: 1rem;
  color: var(--executive-blue);
  background-color: var(--porzellan);
  border: 1px solid var(--card-line);
  border-radius: 6px;
  padding: 14px 16px;
}

.elementor-form .elementor-field-textual:focus { border-color: var(--executive-blue); box-shadow: none; }

.elementor-form .elementor-field-type-acceptance label { font-weight: 400; font-size: 0.9rem; color: var(--blue-soft); }

.elementor-form .elementor-button[type="submit"] { width: auto; }

/* --------------------------------------------------------------------------
   Beitragsseite (Hello Elementor Single) – Artikelinhalt zentriert
   -------------------------------------------------------------------------- */
.single-post .site-main, .single-post .page-content { background-color: var(--porzellan); }

.single-post .entry-title,
.single-post h1.entry-title {
  font-family: var(--font-head);
  color: var(--executive-blue);
  max-width: 820px;
  margin: 48px auto 0;
  padding-inline: 20px;
  text-align: center;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.single-post .page-content > * { max-width: 100%; }