/* ==========================================================================
   Zusatz-Stylesheet NUR fuer die eingefuegten Leitsatz-Bausteine auf den
   1:1-Klonen der echten Startseite. Bewusst mit "wvv-leitsatz-" prefixed,
   damit nichts mit den echten Theme-Klassen (.card, .btn, .row, ...)
   kollidiert -- die echte Seite bringt ihr eigenes Bootstrap-5-CSS mit.
   ========================================================================== */

:root {
  --wvv-blue: #003cc5;
  --wvv-blue-dark: #041c4a;
}

.wvv-demo-banner {
  background: #fff3cd;
  color: #664d03;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ffe69c;
  position: relative;
  z-index: 10;
}
.wvv-demo-banner a { color: #664d03; font-weight: 700; }

.wvv-leitsatz-topbar {
  background: var(--wvv-blue-dark);
  color: #fff;
  font-size: 0.92rem;
  padding: 0.55rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  width: 100%;
}
.wvv-leitsatz-topbar a { color: #fff; font-weight: 700; white-space: nowrap; margin-left: auto; text-decoration: none; }
.wvv-leitsatz-topbar a:hover { text-decoration: underline; }

.wvv-leitsatz-bar {
  background: var(--wvv-blue);
  color: #fff;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
}
.wvv-leitsatz-bar-text { margin: 0; font-family: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif; font-weight: 600; font-size: 1.05rem; }
.wvv-leitsatz-bar-link {
  color: #fff !important; font-weight: 700; white-space: nowrap; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.6); border-radius: 6px; padding: 0.45rem 1rem; margin-left: auto;
  min-height: 44px; display: inline-flex; align-items: center;
}
.wvv-leitsatz-bar-link:hover { background: rgba(255,255,255,0.15); }

.wvv-leitsatz-section { background: var(--wvv-blue); color: #fff; padding: clamp(2rem, 5vw, 3rem) 0; }
.wvv-leitsatz-section .wvv-leitsatz-eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.8rem;
  color: #cfe0ff; margin: 0 0 0.5rem;
}
.wvv-leitsatz-section .wvv-leitsatz-heading {
  font-family: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1rem; max-width: 820px;
}
.wvv-leitsatz-section p { max-width: 800px; }

.wvv-leitsatz-section--light { background: #f4f6fb; color: #1c2733; }
.wvv-leitsatz-section--light .wvv-leitsatz-eyebrow { color: var(--wvv-blue); }
.wvv-leitsatz-section--light .wvv-leitsatz-heading { color: var(--wvv-blue-dark); }
.wvv-leitsatz-section--light .wvv-leitsatz-pills li { border-color: var(--wvv-blue); color: var(--wvv-blue-dark); }

/* Mehr Luft zum direkt folgenden "Willkommen"-Bereich der echten Seite
   (Variante 2 + 4 -- die --light-Variante/Akkordeon-Variante 5 bleibt unangetastet). */
.wvv-leitsatz-section:not(.wvv-leitsatz-section--light) + .container-fluid {
  padding-top: 2rem;
}

.wvv-leitsatz-hero-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem) !important;
}

.wvv-leitsatz-pills { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wvv-leitsatz-pills li {
  border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 0.4rem 0.95rem;
  font-family: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif; font-weight: 600; font-size: 0.95rem;
}

.wvv-leitsatz-split .wvv-leitsatz-quote {
  font-family: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif; font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.3; margin: 0;
}

.wvv-leitsatz-link {
  display: inline-block; margin-top: 1rem; font-weight: 700; text-decoration: none;
  min-height: 44px; line-height: 2.6;
}
.wvv-leitsatz-section .wvv-leitsatz-link { color: #fff; }
.wvv-leitsatz-section--light .wvv-leitsatz-link { color: var(--wvv-blue); }
.wvv-leitsatz-link:hover { text-decoration: underline; }

.wvv-leitsatz-details {
  padding: 1rem;
}
.wvv-leitsatz-details summary {
  cursor: pointer; font-weight: 700; font-family: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif;
  padding: 0.75rem 0; list-style: none; display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
}
.wvv-leitsatz-details summary::-webkit-details-marker { display: none; }
.wvv-leitsatz-details summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; }
.wvv-leitsatz-details[open] summary::after { content: "\2212"; }
.wvv-leitsatz-details .wvv-leitsatz-details-body { padding-bottom: 1rem; }
.wvv-leitsatz-details .wvv-leitsatz-details-body p { margin: 0 0 0.9rem; }

.wvv-leitsatz-card {
  margin-top: 1.5rem; border-left: 4px solid var(--wvv-blue); background: #f4f6fb;
  border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem;
}
.wvv-leitsatz-card .wvv-leitsatz-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.8rem; color: var(--wvv-blue); margin: 0 0 0.4rem; }
.wvv-leitsatz-card p:not(.wvv-leitsatz-eyebrow) { margin: 0 0 0.85rem; }
.wvv-leitsatz-card .wvv-leitsatz-link { color: var(--wvv-blue); margin-top: 0; }

.wvv-leitsatz-slide .card-body { color: #1c2733; }

a.wvv-leitsatz-bar-link:focus-visible,
a.wvv-leitsatz-topbar-link:focus-visible,
.wvv-leitsatz-link:focus-visible,
.wvv-leitsatz-details summary:focus-visible {
  outline: 3px solid #ffb703; outline-offset: 2px;
}

@media (max-width: 700px) {
  .wvv-leitsatz-bar, .wvv-leitsatz-topbar { flex-direction: column; align-items: flex-start; }
  .wvv-leitsatz-bar-link, .wvv-leitsatz-topbar a { margin-left: 0; }
}