/* Seitenrahmen: Kopfzeile, Bildkopf, Fußzeile.
   Alles, was jede Seite umgibt.

   Namen: Klassen deutsch und nach dem Muster block__element--art.
   Werte, die aus dem Bestand kommen, reisen als CSS-Eigenschaft am
   Element mit (--bereich-eigenschaft) – siehe includes/stil.php. */

/* ----------------------------------------------------------- Kopfzeile */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  min-height: var(--kopf-hoehe);
  padding-block: var(--abstand-s);
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
              padding 0.25s ease;
}

.kopf__bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  width: min(100% - 2 * var(--abstand-m), var(--inhalt-breite));
  margin-inline: auto;
}

.kopf__logo {
  display: flex;
  align-items: center;
  min-height: 44px;   /* Tippfläche, unabhängig von der Bildhöhe */
  flex-shrink: 0;
  line-height: 0;
}

.kopf__logo img {
  width: auto;
  height: 46px;
  transition: height 0.25s ease;
}

/* Über dem dunklen Bildkopf steht das Logo hell */
.kopf--ueber-bild .kopf__logo img {
  filter: brightness(0) invert(1);
}

/* Angedockt: weiß und flächig mit der Seite, ohne Linie darunter. Erst beim
   Scrollen trennt ein weicher Schatten die Leiste vom Inhalt (kopf--gescrollt,
   gesetzt von haupt.js) und sie wird etwas flacher. */
.kopf--haftend {
  background: rgba(255, 255, 255, 0.97);
  padding-block: 0.9rem;
}

.kopf--haftend .kopf__logo img {
  height: 46px;
  filter: none;
}

.kopf--gescrollt {
  box-shadow: 0 2px 18px rgba(2, 32, 59, 0.1);
  padding-block: 0.45rem;
}

.kopf--gescrollt .kopf__logo img {
  height: 38px;
}

.kopf__menue {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf__verweis {
  font-size: 1rem;
  color: var(--rein-weiss);
  text-decoration: none;
  white-space: nowrap;
}

.kopf--haftend .kopf__verweis {
  color: var(--dunkel);
}

.kopf__verweis[aria-current="page"] {
  color: var(--blau-hell);
}

@media (hover: hover) {
  .kopf__verweis:hover {
  color: var(--blau-hell);
  }
}

@media (hover: hover) {
  .kopf--haftend .kopf__verweis:hover {
  color: var(--blau);
  }
}

/* „Kontakt“ ist als Hauptaktion hervorgehoben – gefüllte Pille statt des
   dünnen Rahmens aus dem Bestand. */
.kopf__verweis--rahmen {
  padding: 0.42rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.kopf--haftend .kopf__verweis--rahmen {
  background: rgba(15, 74, 126, 0.09);
  color: var(--blau);
}

.kopf--haftend .kopf__verweis--rahmen[aria-current="page"] {
  background: var(--blau);
  color: var(--rein-weiss);
}

@media (hover: hover) {
  .kopf--haftend .kopf__verweis--rahmen:hover {
  background: var(--blau);
  color: var(--rein-weiss);
  }
}

.kopf__extern::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.35em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3Z'/%3E%3Cpath d='M5 5h5v2H7v10h10v-3h2v5H5V5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kopf__schalter {
  display: none;
  /* Über dem aufgeklappten Menü bleiben: Es liegt als fixe Fläche über der
     ganzen Kopfzeile und würde den Knopf sonst verdecken – das Menü ließe
     sich öffnen, aber nie wieder schließen. */
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.kopf__schalter svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 900px) {
  .kopf__schalter {
    display: grid;
    place-items: center;
    color: var(--rein-weiss);
  }

  .kopf--haftend .kopf__schalter {
    color: var(--dunkel);
  }

  /* Bei offenem Menü sitzen Logo und Schließen-Knopf auf der dunklen
     Fläche – beide hell, beide darüber. */
  .kopf--menue-offen .kopf__schalter {
    color: var(--rein-weiss);
  }

  .kopf__logo {
    position: relative;
    z-index: 2;
  }

  .kopf--menue-offen .kopf__logo img {
    filter: brightness(0) invert(1);
  }

  .kopf__menue {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--kopf-hoehe) + var(--abstand-m)) var(--abstand-m) var(--abstand-m);
    background: var(--dunkel);
    transform: translateY(-100%);
    /* visibility nimmt das zugeklappte Menü aus Tastatur- und Vorlese-Reihe –
       nur weggeschoben blieben alle Punkte fokussierbar. Die Verzögerung
       lässt erst die Bewegung ausspielen, dann verschwinden. */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s 0.3s;
  }

  .kopf__menue[data-offen="ja"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s 0s;
  }

  .kopf__menue .kopf__verweis {
    display: block;
    padding: var(--abstand-s) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--rein-weiss);
    font-size: 1.1rem;
  }

  /* Im aufgeklappten Menü ist „Kontakt“ eine Zeile wie alle anderen. */
  .kopf__menue .kopf__verweis--rahmen,
  .kopf--haftend .kopf__menue .kopf__verweis--rahmen {
    padding: var(--abstand-s) 0;
    border-radius: 0;
    background: transparent;
    color: var(--rein-weiss);
  }
}

/* ------------------------------------------------------------- Bildkopf */

.bildkopf {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 88vh, 860px);
  padding-top: var(--kopf-hoehe);
  padding-bottom: calc(var(--schraege) + var(--abstand-l));
  background: var(--dunkel);
  color: var(--hell);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
}

.bildkopf__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.bildkopf__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(2, 32, 59, 0.94) 0%,
    rgba(2, 32, 59, 0.72) 34%,
    rgba(2, 32, 59, 0.15) 62%,
    rgba(2, 32, 59, 0) 100%);
}

.bildkopf__inhalt {
  position: relative;
  max-width: 34rem;
}

.bildkopf__name {
  margin-bottom: 0.2rem;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  color: var(--rein-weiss);
}

.bildkopf__rolle {
  margin-bottom: var(--abstand-s);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  color: var(--rein-weiss);
}

.bildkopf__nachsatz {
  color: rgba(232, 238, 241, 0.86);
}

/* Hochkant schneidet ein Querformat stark an. Deshalb wird der Kopf hier
   flacher, das Bild rückt auf das Gesicht und der Schleier bleibt oben
   durchsichtig – sonst sieht man vom Motiv fast nichts mehr.
   Gilt bis 900 px, weil auch auf Tablets sonst der Text im Gesicht steht. */
@media (max-width: 900px) {
  .bildkopf {
    min-height: 0;
    align-items: flex-end;
    padding-top: calc(var(--kopf-hoehe) + 46vh);
  }

  .bildkopf__bild {
    object-position: 58% 22%;
  }

  .bildkopf__schleier {
    background: linear-gradient(180deg,
      rgba(2, 32, 59, 0.1) 0%,
      rgba(2, 32, 59, 0.1) 34%,
      rgba(2, 32, 59, 0.82) 66%,
      rgba(2, 32, 59, 0.97) 100%);
  }

  .bildkopf__inhalt {
    max-width: none;
  }
}

/* ------------------------------------------------------------ Fußzeile */

.fuss {
  padding-block: var(--abschnitt-luft) var(--abstand-l);
  background: var(--dunkel);
  color: var(--hell);
}

.fuss a {
  color: var(--rein-weiss);
  text-decoration: none;
}

@media (hover: hover) {
  .fuss a:hover {
  text-decoration: underline;
  }
}

.fuss__raster {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
  gap: var(--abstand-l);
}

@media (max-width: 1100px) {
  .fuss__raster {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .fuss__raster {
    grid-template-columns: 1fr;
    gap: var(--abstand-m);
  }
}

/* Spaltentitel: leise Ordnung, keine Überschriftenhierarchie. */
.fuss__titel {
  margin: 0 0 var(--abstand-s);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(232, 238, 241, 0.55);
}

.fuss__marke .fuss__logo {
  margin-bottom: var(--abstand-m);
}

.fuss__marke .fuss__zeile {
  max-width: 22rem;
  color: rgba(232, 238, 241, 0.82);
}

.fuss__marke .fuss__sozial {
  margin-top: var(--abstand-m);
}

.fuss__zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  margin-bottom: var(--abstand-s);
  font-size: 0.95rem;
}

.fuss__zeile svg {
  width: 18px;
  height: 18px;
  margin-top: 0.35em;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.85;
}

.fuss__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__liste li + li {
  margin-top: 0.45rem;
}

/* Mit dem Finger sind 17 Zeilenhöhen nicht zu treffen – auf kleinen
   Schirmen bekommen die Fußzeilen-Verweise deshalb eine Tipphöhe. */
@media (max-width: 860px) {
  .fuss__liste a {
    display: inline-block;
    padding-block: 0.55rem;
  }

  .fuss__liste li + li {
    margin-top: 0;
  }
}

.fuss__abschluss {
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid rgba(232, 238, 241, 0.14);
}

.fuss__hinweiszeile {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(232, 238, 241, 0.55);
}

.fuss__logo img {
  height: 44px;
  width: auto;
}

.fuss__sozial {
  display: flex;
  gap: var(--abstand-s);
}

.fuss__sozial a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(232, 238, 241, 0.1);
}

@media (hover: hover) {
  .fuss__sozial a:hover {
  background: var(--blau-hell);
  }
}

.fuss__sozial svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}