/* Seitenkopf — drei Einstiegsarten, eine Bildsprache.
   ==========================================================================

   Die Unterseiten hatten schon zwei Kopfmuster, nur ungeschrieben: eines mit
   Kicker (Magazin, Glossar, Regionen, Meldefristen, FAQ) und eines mit
   Goldlinie (Warum, Kosten, Ueber uns). Beide funktionierten, aber es stand
   nirgends, welche Seite welches bekommt — und wo es keine Regel gibt,
   entstehen Abweichungen: Die FAQ hatte 34px Ueberschrift, ihre
   Geschwister 36px; der Rundgang mit 30px die kleinste der ganzen Site,
   ausgerechnet die Seite, in der man zehn Minuten verbringt.

   Diese Datei schreibt die Regel auf und ergaenzt, was fehlte: eine
   funktionale Variante, die aus dem Weg geht, und eine Handlungszeile.

   Die drei Arten unterscheiden sich in der INFORMATIONSHIERARCHIE, nicht im
   Aussehen. Dieselbe Schrift, dieselben Farben, dieselben Abstaende-Schritte:

     strategisch   Die Ueberschrift traegt die Aussage (38px), darunter eine
                   Handlungszeile, abgeschlossen von der Goldlinie. Fuer
                   Seiten, auf denen eine Haltung steht: Warum, Kosten,
                   Ueber uns.

     funktional    So klein wie moeglich (28px), keine Handlungszeile, keine
                   Linie. Die Funktion IST der naechste Schritt; der Kopf
                   soll niemanden aufhalten. Fuer den Rundgang.

     redaktionell  Mittlere Ueberschrift (32px), dafuer eine Metazeile mit
                   Anzahl oder Filter. Orientierung, keine Inszenierung.
                   Fuer Magazin, FAQ, Glossar, Meldefristen, Regionen.

   Die Groessen sind bewusst gestuft (38 / 32 / 28): Wer von der Startseite
   (54px) auf eine Unterseite wechselt, soll den Rang der Seite an der
   Ueberschrift ablesen koennen, bevor er ein Wort gelesen hat. */

.kopf {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 56px 24px 0;
}
.kopf-funktional   { padding-top: 32px; }
.kopf-redaktionell { padding-top: 48px; }

/* Der Kicker sagt in drei Woertern, wo man ist. Er stand bisher nur auf den
   redaktionellen Seiten; auf Warum, Kosten und Ueber uns fehlte die Antwort
   auf "wo bin ich" ganz. */
.kopf-kicker {
  display: block;
  color: var(--wein);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.kopf h1 {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.kopf-strategisch   h1 { font-size: 38px; }
.kopf-redaktionell  h1 { font-size: 32px; }
.kopf-funktional    h1 { font-size: 28px; line-height: 1.2; }

/* Der zweite Satz der Ueberschrift in Wein. Kein Verlauf, kein Effekt: eine
   Farbe, die im Rest der Site dieselbe Bedeutung hat. */
.kopf-akzent { color: var(--wein); }

/* Rechts neben der Ueberschrift, nur strategisch. Traegt die Zuspitzung,
   die nicht in die H1 passt ("Nicht was Sie nutzen — wie gross Ihr Betrieb
   ist"). Bricht unter die Ueberschrift, sobald es eng wird. */
.kopf-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.kopf-zusatz {
  font-size: 13.5px;
  color: var(--matt);
  flex: 0 1 auto;
}

.kopf-vorspann {
  margin: 14px 0 0;
  color: var(--matt);
  line-height: 1.62;
}
.kopf-strategisch  .kopf-vorspann { font-size: 17px;   max-width: 68ch; }
.kopf-redaktionell .kopf-vorspann { font-size: 16.5px; max-width: 64ch; }
.kopf-funktional   .kopf-vorspann { font-size: 15px;   max-width: 72ch; margin-top: 10px; }
.kopf-vorspann b { color: var(--tinte); font-weight: 600; }

/* Zaehlung, Stand, Filterhinweis. Nur redaktionell: Dort ist die Menge die
   Information ("61 Begriffe"), auf einer strategischen Seite waere sie Beiwerk. */
.kopf-meta {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--matt2);
}

/* Die Handlungszeile. Nur strategisch — auf einer funktionalen Seite steht
   die Handlung ohnehin direkt darunter, und auf einer redaktionellen ist
   die Liste die Handlung. */
.kopf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.kopf-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  padding: 11px 19px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--tinte);
  transition: border-color .2s ease, background .2s ease;
}
.kopf-btn:hover { border-color: #D8BF92; }
.kopf-btn:focus-visible { outline: 2px solid var(--wein); outline-offset: 2px; }
.kopf-btn-stark {
  background: #232323;
  border-color: #232323;
  color: #fff;
  font-weight: 600;
}
.kopf-btn-stark:hover { background: var(--wein); border-color: var(--wein); }

/* Die Goldlinie schliesst den strategischen Kopf ab — dasselbe Zeichen, das
   auf diesen Seiten schon die Abschnitte trennt. Redaktionell und funktional
   bekommen sie nicht: Dort folgt sofort Inhalt, und eine Linie davor waere
   eine Tuer ohne Raum dahinter. */
.kopf-strategisch::after {
  content: "";
  display: block;
  height: 1px;
  background: #D8BF92;
  margin-top: 26px;
}

@media (max-width: 760px) {
  .kopf               { padding-top: 40px; }
  .kopf-funktional    { padding-top: 24px; }
  .kopf-redaktionell  { padding-top: 34px; }
  .kopf-strategisch  h1 { font-size: 30px !important; line-height: 1.14 !important; }
  .kopf-redaktionell h1 { font-size: 27px !important; line-height: 1.18 !important; }
  .kopf-funktional   h1 { font-size: 24px !important; line-height: 1.22 !important; }
  .kopf-strategisch  .kopf-vorspann { font-size: 15.5px; }
  .kopf-redaktionell .kopf-vorspann { font-size: 15.5px; }
  /* Am Handy zaehlt jede Zeile: Die Zuspitzung rutscht unter die
     Ueberschrift statt daneben, und die Knoepfe werden voll breit,
     damit sie mit dem Daumen zu treffen sind. */
  .kopf-zusatz { flex: 1 1 100%; }
  .kopf-cta    { gap: 8px; }
  .kopf-btn    { flex: 1 1 auto; justify-content: center; padding: 12px 16px; }
  .kopf-strategisch::after { margin-top: 20px; }
}

@media (min-width: 1500px) {
  /* Auf sehr breiten Schirmen waechst nur die Ueberschrift mit, nicht der
     Fliesstext: Der bleibt bei seinen 64 bis 72 Zeichen, sonst wandert das
     Auge am Zeilenende ins Leere. */
  .kopf-strategisch  h1 { font-size: 42px; }
  .kopf-redaktionell h1 { font-size: 34px; }
}