/* ==========================================================================
   EVANDO Consulting – Ergänzungen zum Stylesheet der Kanzleiseite
   site.css ist die unveränderte Kopie der Kanzleifassung (Stand 12.11.2026).
   Hier steht nur, was die Consulting-Seite anders braucht:
     1. Menüband und Fußzeile in Tintenblau (statt Weiß und Grau)
     2. Wortmarke "Consulting"
     3. Eigene Bilder (Raum, Portrait Dr. Hofmann)
     4. Bausteine, die es nur hier gibt: Wege, Fragen, Wertrechner,
        Nachfolge-Check
   Wird site.css später durch eine neuere Kanzleifassung ersetzt, bleibt
   diese Datei gültig.
   ========================================================================== */

/* --- 1. Menüband: Tintenblau, durchscheinend, beim Scrollen dichter ------- */
.site-header { background: rgba(26,62,84,.86); color: var(--white); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.site-header.solid { background: rgba(26,62,84,.94); color: var(--white); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.site-header .logo .sub { opacity: .92; }
.nav .menu > li > a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* --- 1. Fußzeile: Tintenblau mit Rauschstruktur -------------------------- */
.site-footer { background-color: var(--ink); background-image: url("img/rauschen.png"); color: var(--mist); }
.site-footer p, .site-footer a, .footer-bottom { color: var(--mist); }
.site-footer a:hover { color: var(--white); }
.site-footer .logo, .site-footer h2 { color: var(--white); }
.footer-bottom { border-top-color: rgba(255,255,255,.14); color: rgba(220,229,234,.85); }
.site-footer .fuss-reichweite { border-top-color: rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.18); color: var(--mist); }

/* --- 2. Wortmarke: "Consulting" so breit wie "EVANDO" ---------------------
   Gemessene Glyphenbreiten der Oswald: EVANDO 2,959 em (400), Consulting
   3,611 em (300). Breite der Wortmarke 2,959 + 5 × 0,16 = 3,759 em.
   Laufweite = (3,759 / 0,48 − 3,611) / 9 = 0,4689 em. */
.logo .sub { font-size: .48em; letter-spacing: .4689em; margin-right: -.4689em; margin-top: .2em; }

/* --- 3. Bilder ------------------------------------------------------------ */
.img-hofmann-band { background-image: url("img/portrait-hofmann-band.jpg"); }
.img-hofmann      { background-image: url("img/portrait-hofmann.jpg"); }

/* Startseite: Raumaufnahme statt Portrait, Schrift links auf hellem Verlauf */
.hero.hell:not(.page) .hero-img.img-raum { background-image: url("img/raum.webp"); background-position: center 60%; }
@media (min-width: 901px) {
  .hero.hell:not(.page) .hero-img.img-raum { background-image: url("img/raum.webp"); }
  .hero.hell:not(.page)::after { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.5) 52%, rgba(255,255,255,.1) 76%, rgba(255,255,255,0) 100%); }
}

/* Ansprechpartner: Portrait Dr. Hofmann, fest stehend, Schrift links auf Schleier */
.person-band .parallax-img, .person-band.hell .parallax-img { background-image: url("img/portrait-hofmann-band.jpg"); background-position: 54% top; }
.parallax.person-band.hell { background-color: var(--paper); }
@media (min-width: 901px) {
  .person-band.hell::after { background: linear-gradient(90deg, rgba(245,245,245,.97) 0%, rgba(245,245,245,.9) 32%, rgba(245,245,245,.45) 50%, rgba(245,245,245,0) 64%); }
}
@media (min-width: 901px) and (max-width: 1200px) { .person-band .parallax-img, .person-band.hell .parallax-img { background-position: 38% top; } }
@media (max-width: 900px) {
  .person-band.hell .parallax-img { background-image: url("img/portrait-hofmann-band.jpg"); background-size: cover; background-position: 68% top; }
}

/* --- 4. Bausteine der Consulting-Seite ------------------------------------
   Gestaltungsregeln wie auf der Kanzleiseite: große Überschriften in
   Newsreader, kleine Überschriften und Labels in Oswald im Gemischtsatz
   mit --spur-titel, Lesetext in Source Sans Pro. Kein Salbeigrün mehr. */

/* Kennwort über einer Kachelüberschrift (Startseite) */
.tile .tag { margin: 0 0 12px; font: 400 13px/1.3 var(--marke); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }

/* Hauptüberschrift im Zweispalter ohne Kennzeile darüber */
.split-kopf .eyebrow + h2.display { margin-top: 0; }

/* Kachel: Pfeilverweis nach der Leistungsliste */
.tile .detail-list + .arrow-link { margin-top: 4px; }

/* Ansprechpartner-Kacheln "Worum geht es Ihnen?" */
.choice h3 { font-family: var(--marke); font-weight: 400; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.25; letter-spacing: var(--spur-titel); text-transform: none; }
.choice p { font-size: var(--klein); line-height: 1.55; }
.choice-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.choice-links .arrow-link { color: var(--ink); }

/* Ablauf in Schritten */
.steps h3 { font-family: var(--marke); font-weight: 400; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.3; letter-spacing: var(--spur-titel); text-transform: none; color: var(--ink); }
.steps p { font-size: var(--klein); line-height: 1.55; }

/* Geschäftsführung (Über uns) */
.prose .person-name { margin: 0 0 8px; font: 300 clamp(28px, 2.4vw, 36px)/1.15 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.prose .person-role { margin: 0 0 28px; font: 400 14px/1.3 var(--marke); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }

/* Auswahlfelder als Flächen (Nachfolge-Check und Wertrechner) */
.q { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.q-text { margin: 0 0 16px; font-size: 18px; line-height: 1.6; color: var(--ink); }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.opt { position: relative; display: flex; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { flex: 1; display: flex; align-items: center; min-height: 54px; padding: 12px 18px; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--paper); border: 1px solid transparent; border-radius: 4px; transition: background-color .2s, border-color .2s, color .2s; }
.opt:hover span { border-color: var(--ink); }
.opt input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Grundsätze auf "Über uns": drei Einträge in drei Spalten */
@media (min-width: 901px) {
  #grundsaetze .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Stichpunkte in den Grundsätzen der Bewertungsseite: Strich statt Punkt */
.keys { list-style: none; margin: 0 0 14px; padding: 0; }
.keys li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.keys li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--ink); }