/* ============================================================
   komponenten.css - Kopfzeile, Wortmarke, Hero, Buttons, Fuß

   ÜBERARBEITET:
   - Button in der Kopfzeile ist jetzt die leise Variante, damit
     die Wortmarke die stärkste Stelle der Kopfzeile bleibt.
   - Kontaktzeile im Hero enger gesetzt.
   - Headline bricht ausgewogen statt zufällig.
   ============================================================ */

/* ============================================================
   Kopfzeile
   ============================================================ */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  background-color: var(--farbe-papier);
  border-bottom: 1px solid var(--linie-stark);
}

.kopfzeile__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  min-height: var(--kopf-hoehe);
}

/* ---- Wortmarke A -------------------------------------------
   Gesperrte Kapitälchen in der Serife. Die Markenlinie entfällt
   hier bewusst - die Trennlinie der Kopfzeile übernimmt sie.
------------------------------------------------------------- */
/* Die Marke besteht aus zwei getrennten Wörtern. Dadurch lässt
   sich der Wortabstand unabhängig von der Buchstabensperrung
   steuern.

   Sie bleibt auf allen Bildschirmgrößen einzeilig und wird über
   die Schriftgröße mitskaliert statt umzubrechen oder gekürzt
   zu werden. */
.wortmarke {
  display: inline-flex;
  align-items: center;      /* zentriert innerhalb der Tippfläche */
  column-gap: .5em;
  min-height: 44px;
  font-family: var(--schrift-serife);
  font-size: clamp(.72rem, 3.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--sperr-marke);
  white-space: nowrap;
  transition: color var(--dauer-schnell) var(--kurve);
}

.wortmarke:hover,
.wortmarke:focus-visible { color: var(--farbe-signal); }

/* Auf schmalen Bildschirmen wird zusätzlich die Sperrung enger,
   sonst bliebe für den Schalter daneben kein Platz. */
@media (max-width: 620px) {
  .wortmarke { letter-spacing: .18em; }

  .kopfzeile__kontakt .schalter {
    padding: .7em 1em;
    font-size: var(--text-meta);
  }
}

/* Sehr schmale Geräte: Sperrung weiter zurücknehmen, damit die
   Marke einzeilig bleibt. */
@media (max-width: 380px) {
  .wortmarke { letter-spacing: .10em; }
}

/* ---- Kopfzeilen-Kontakt ------------------------------------ */
.kopfzeile__kontakt {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--text-klein);
}

@media (max-width: 620px) {
  .kopfzeile__kontakt .nur-breit { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding-block: clamp(3.5rem, 11vw, 7rem) clamp(3rem, 8vw, 5.5rem);
}

.hero__satz {
  max-width: 16ch;
  margin-bottom: var(--raum-3);
  text-wrap: balance;        /* gleichmäßiger Umbruch statt Zufall */
}

.hero__text {
  max-width: 62ch;
  margin-bottom: var(--raum-3);
}

.hero__ort {
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
  margin-bottom: var(--raum-4);
}

.hero__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-1) var(--raum-2);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie);
  font-size: var(--text-klein);
}

.hero__name {
  font-family: var(--schrift-serife);
  font-size: 1.05rem;
  margin-right: var(--raum-1);
}

/* ============================================================
   Buttons
   ============================================================ */

.schalter {
  display: inline-block;
  font-family: var(--schrift-grotesk);
  font-size: var(--text-klein);
  font-weight: 500;
  line-height: 1.2;
  padding: .78em 1.5em;
  border: 1px solid var(--farbe-tinte);
  background-color: var(--farbe-tinte);
  color: var(--farbe-papier);
  cursor: pointer;
  transition: background-color var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve),
              color var(--dauer-schnell) var(--kurve);
}

.schalter:hover,
.schalter:focus-visible {
  background-color: var(--farbe-signal);
  border-color: var(--farbe-signal);
}

.schalter--leise {
  background-color: transparent;
  color: var(--farbe-tinte);
}

.schalter--leise:hover,
.schalter--leise:focus-visible {
  background-color: var(--farbe-tinte);
  border-color: var(--farbe-tinte);
  color: var(--farbe-papier);
}

/* ============================================================
   Fußbereich
   ============================================================ */

.fussbereich {
  border-top: 1px solid var(--linie-stark);
  padding-block: var(--raum-4) var(--raum-5);
}

.fussbereich__marke {
  font-family: var(--schrift-serife);
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: var(--sperr-marke);
  text-indent: var(--sperr-marke);
}

/* Hier trägt die Marke ihre eigene Linie - anders als in der Kopfzeile */
.fussbereich__linie {
  border: 0;
  border-top: 1px solid var(--farbe-tinte);
  margin: var(--raum-1) 0 var(--raum-3);
  max-width: 24rem;
}

.fussbereich__zeilen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-4);
  font-size: var(--text-meta);
  letter-spacing: var(--sperr-meta);
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
}

.fussbereich__rechtliches {
  display: flex;
  gap: var(--raum-3);
}