/* C•D•E — Chrome (Header/Footer-Layout + Lesetypografie).
   Wird als LETZTES Stylesheet geladen und gewinnt daher gegen components.css.
   Heller Header (dunkles CDE-Logo auf Weiß), Flyout „Über mich", Footer-Wordmark. */

body { padding-top: 64px; }

/* --- Heller, fixierter Header --- */
.pv-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 0.7rem var(--gutter);
  background: rgba(255,255,255,0.92); color: var(--c-navy-900);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.pv-header img { height: 34px; width: auto; display: block; }
.pv-nav { display: none; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
@media (min-width: 1000px) { .pv-nav { display: flex; } }

/* Nav-Links auf hellem Header: Slate, Hover/Active = Orange-Akzent (kräftiger für Kontrast) */
.pv-header .pv-nav > a,
.pv-header .pv-nav__subtoggle {
  color: var(--c-navy-700); text-decoration: none; font-weight: 500;
  font-size: .95rem; transition: color .15s ease;
}
.pv-header .pv-nav > a:hover,
.pv-header .pv-nav__subtoggle:hover { color: var(--c-accent-700); }
.pv-header .pv-nav > a[aria-current="page"],
.pv-header .pv-nav__subtoggle[data-active="true"] { color: var(--c-accent-700); font-weight: var(--fw-semibold); }
.pv-header__right { display: flex; align-items: center; gap: 1rem; }
/* Hamburger (von animations.js injiziert): dunkel auf dem hellen Header. */
.pv-header .pv-burger { color: var(--c-navy-700); }
.pv-header .btn { padding: .6em 1.15em; font-size: .92rem; }

/* --- Flyout „Über mich" --- */
.pv-nav__sub { position: relative; display: inline-flex; align-items: center; }
.pv-nav__subtoggle { background: none; border: 0; cursor: pointer; display: inline-flex;
  align-items: center; gap: .35em; font-family: inherit; padding: 0; }
.pv-nav__chev { width: .5em; height: .5em; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform .15s ease; }

@media (min-width: 1000px) {
  .pv-nav__menu {
    position: absolute; top: calc(100% + .55rem); left: 0; min-width: 190px;
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .4rem; display: none; flex-direction: column;
  }
  .pv-nav__sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .7rem; }
  .pv-nav__sub:hover .pv-nav__menu,
  .pv-nav__sub:focus-within .pv-nav__menu,
  .pv-nav__subtoggle[aria-expanded="true"] + .pv-nav__menu { display: flex; }
  .pv-nav__sub:hover .pv-nav__chev,
  .pv-nav__subtoggle[aria-expanded="true"] .pv-nav__chev { transform: rotate(-135deg) translateY(2px); }
  .pv-header .pv-nav__menu a {
    display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
    color: var(--c-navy-700); font-size: .92rem; text-decoration: none;
  }
  .pv-header .pv-nav__menu a:hover { background: var(--c-bg-alt); color: var(--c-accent-700); }
  .pv-header .pv-nav__menu a[aria-current="page"] { color: var(--c-accent-700); font-weight: var(--fw-semibold); }
}

/* --- Mobile Nav-Panel (Toggle wird von animations.js injiziert) --- */
@media (max-width: 999px) {
  .pv-header > a:first-child { margin-right: auto; }
  .pv-header .social { display: none; }
  .pv-header .btn { padding: .5em .9em !important; font-size: .82rem !important; white-space: nowrap; }
  .pv-header .pv-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow); padding: .5rem var(--gutter) 1rem;
  }
  .pv-header .pv-nav.is-open { display: flex; }
  .pv-header .pv-nav > a,
  .pv-header .pv-nav__subtoggle { padding: .8rem .2rem; border-bottom: 1px solid var(--c-border); width: 100%; }
  .pv-header .pv-nav__sub { display: block; width: 100%; }
  .pv-header .pv-nav__subtoggle { justify-content: space-between; }
  .pv-header .pv-nav__menu { display: none; padding: 0 0 .4rem .8rem; }
  .pv-header .pv-nav__subtoggle[aria-expanded="true"] + .pv-nav__menu { display: block; }
  .pv-header .pv-nav__subtoggle[aria-expanded="true"] .pv-nav__chev { transform: rotate(-135deg) translateY(2px); }
  .pv-header .pv-nav__menu a { display: block; padding: .6rem .2rem; color: var(--c-navy-700); text-decoration: none; }
  .pv-header .pv-nav__menu a[aria-current="page"] { color: var(--c-accent-700); font-weight: var(--fw-semibold); }
}

/* --- Breadcrumb im (dunklen) Hero --- */
.crumbs { font-size: var(--fs-sm); color: rgba(255,255,255,.7); margin-bottom: var(--sp-3); }
.crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.crumbs a:hover { color:#fff; }

/* --- Footer-Logo ---
   assets/logos/cde-logo-invers.png: aus der hochaufloesenden Breitversion erzeugt,
   Wortmarke auf Weiss umgefaerbt (im Original 1,26:1 auf dem Footer = unsichtbar),
   Claim-Farben erhalten. Die Datei ist 560 px breit und damit fuer 2x scharf. */
.footer-logo { width: 240px; max-width: 100%; height: auto; margin-bottom: .9rem; }

/* --- Lesetypografie für Rechts-/Textseiten --- */
.legal { max-width: 820px; margin-inline: auto; }
.legal h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.legal h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.legal h2:first-child, .legal h3:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--c-grey-700); }
.legal ul { padding-left: 1.2em; display: grid; gap: .4em; }
.legal a { color: var(--c-slate-600); }
.legal .note {
  background: rgba(62,75,107,0.07); border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm); color: var(--c-grey-700); margin-bottom: var(--sp-6);
}
.legal address { font-style: normal; }

/* --- Kontaktliste (Kontaktseite) ---
   Eigene Klasse statt .checklist: Dort macht display:flex auf dem <li> aus
   „<strong>Name</strong><br>Adresse" zwei nebeneinanderliegende Flex-Elemente.
   Hier steht der Text deshalb in einem eigenen <span>. */
.contact-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-4); }
.contact-list li { display: flex; gap: .85em; align-items: flex-start; color: var(--c-grey-700); }
.contact-list__icon {
  width: 1.35em; height: 1.35em; flex: 0 0 auto; margin-top: .18em;
  color: var(--c-navy-700);
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact-list__icon--solid { fill: currentColor; stroke: none; }
.contact-list strong { color: var(--c-heading); }

/* --- Checkliste / Steps --- */
.checklist { list-style:none; padding:0; margin:0; display:grid; gap:.7em; }
.checklist li { display:flex; gap:.6em; align-items:flex-start; color: var(--c-grey-700); }
.checklist li::before { content:"✓"; color:#fff; background:var(--c-success-500); width:1.4em; height:1.4em;
  border-radius:50%; display:grid; place-items:center; font-size:.8em; flex:0 0 auto; margin-top:.15em; }
.form-field { margin-bottom: var(--sp-4); display:flex; flex-direction:column; }
.form-2col { display:grid; gap:0 var(--sp-4); grid-template-columns:1fr 1fr; }
@media(max-width:560px){ .form-2col{ grid-template-columns:1fr; } }