/* Erzeugt von tools/seo-build.py -- Kopfzeile nach Weigola-Muster.
   Eigene Variablen mit festen Werten: die Kopfzeile sitzt auf zwei
   verschiedenen CSS-Systemen (style.css und dem Inline-CSS der Startseite),
   die nicht dieselben Tokens kennen. So sieht sie ueberall gleich aus. */

.kopf {
  --k-hoehe: 88px;
  --k-grund: rgba(10, 12, 16, 0.92);
  --k-flaeche: #14181f;
  --k-flaeche-alt: #191e26;
  --k-linie: rgba(255, 255, 255, 0.10);
  --k-linie-stark: rgba(255, 255, 255, 0.18);
  --k-text: rgba(255, 255, 255, 0.86);
  --k-text-dim: rgba(255, 255, 255, 0.55);
  --k-akzent: #06B6D4;
  --k-gutter: 20px;

  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--k-linie);
  /* Kein backdrop-filter auf .kopf selbst: das erzeugt einen Bezugsrahmen
     fuer position:fixed, und die mobile Menue-Schublade waere dann in der
     68px hohen Kopfzeile eingesperrt statt bildschirmfuellend. Der Weichzeichner
     liegt deshalb auf einem Pseudo-Element. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Ausdruecklich zurueckgesetzt: die Startseite bringt aus ihrer alten
     Kopfzeile ein `header { backdrop-filter: blur(16px) }` mit. Ein
     backdrop-filter auf .kopf selbst macht sie zum Bezugsrahmen fuer
     position:fixed -- die Schublade steckte dadurch in der Kopfzeile fest.
     Der Weichzeichner gehoert auf ::before, siehe unten. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--k-grund);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.kopf__innen {
  position: relative;
  max-width: calc(1400px + var(--k-gutter) * 2);
  margin-inline: auto; padding-inline: var(--k-gutter);
  min-height: var(--k-hoehe);
  display: flex; align-items: center; gap: 18px;
}
.kopf__marke { display: inline-flex; align-items: center; gap: 10px;
               text-decoration: none; flex: 0 0 auto; }
.kopf__marke img { display: block; width: 66px; height: 66px; object-fit: contain; }
.kopf__name { font-size: 1.32rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }

.hauptnav { margin-left: auto; }
.hauptnav__liste { display: flex; align-items: center; gap: 12px;
                   list-style: none; margin: 0; padding: 0; }
.hauptnav__punkt { position: relative; }
/* Der Kniff aus dem Vorbild: static, damit sich das Mega-Menue an der
   Kopfzeile ausrichtet statt am schmalen Menuepunkt. */
.hauptnav__punkt--mega { position: static; }

.hauptnav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 13px; border: 0; border-radius: 8px;
  background: none; cursor: pointer;
  /* 17px: ausdruecklich groesser als das Vorbild gewuenscht. */
  font: inherit; font-size: 1.0625rem; font-weight: 500;
  color: var(--k-text); text-decoration: none; white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.hauptnav__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.hauptnav__link:focus-visible { outline: 2px solid var(--k-akzent); outline-offset: 2px; }
button.hauptnav__link::after {
  content: ""; width: 6px; height: 6px; margin-left: 3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.hauptnav__punkt.is-open > button.hauptnav__link { background: rgba(255,255,255,0.09); color: #fff; }
.hauptnav__punkt.is-open > button.hauptnav__link::after { transform: rotate(-135deg) translateY(-2px); }
.hauptnav__link[aria-current="page"] { color: var(--k-akzent); }

.hauptnav__sub {
  position: absolute; top: calc(100% + 6px); left: -6px;
  min-width: 268px; list-style: none; margin: 0; padding: 8px;
  background: var(--k-flaeche); border: 1px solid var(--k-linie-stark);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  z-index: 200;
}
.hauptnav__sub[hidden] { display: none; }
.hauptnav__sub a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--k-text); text-decoration: none; font-size: 0.92rem;
  transition: background 0.15s, color 0.15s;
}
.hauptnav__sub a:hover, .hauptnav__sub a:focus-visible {
  background: rgba(255, 255, 255, 0.07); color: #fff; outline: none;
}
.sym { width: 18px; height: 18px; flex: 0 0 18px; color: var(--k-akzent); }

/* Mega-Menue: drei Spalten Leistungen, rechts Kontakt und Handlungsaufforderung. */
.hauptnav__sub--mega {
  left: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100vw - 2 * var(--k-gutter)));
  padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.02fr);
  overflow: hidden;
}
.mega__spalte { padding: 20px 14px; border-right: 1px solid var(--k-linie); min-width: 0; }
.mega__spalte h3, .mega__info h3 {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--k-text-dim);
  margin: 0 0 10px; padding-inline: 12px;
}
.mega__spalte ul { list-style: none; margin: 0; padding: 0; }
.mega__spalte a { align-items: flex-start; }
.mega__spalte .sym { margin-top: 2px; }
.mega__text { display: flex; flex-direction: column; min-width: 0; }
.mega__name { font-weight: 600; color: #fff; font-size: 0.92rem; }
.mega__teaser { font-size: 0.78rem; color: var(--k-text-dim); margin-top: 1px; }
.mega__info {
  padding: 20px 18px; background: var(--k-flaeche-alt);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.mega__info p { margin: 0; font-size: 0.84rem; line-height: 1.6; color: var(--k-text-dim); }
.mega__kontakt { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mega__kontakt a { display: block; padding: 3px 0; color: var(--k-text);
                   text-decoration: none; font-size: 0.88rem; }
.mega__kontakt a:hover { color: var(--k-akzent); }

.btn-kopf {
  display: inline-block; text-align: center; padding: 9px 16px;
  border-radius: 999px; background: var(--k-akzent); color: #04121a;
  font-weight: 600; font-size: 0.86rem; text-decoration: none;
  transition: filter 0.18s;
}
.btn-kopf:hover { filter: brightness(1.1); }
.btn-kopf--rand { background: none; color: var(--k-text);
                  border: 1px solid var(--k-linie-stark); }
.btn-kopf--rand:hover { border-color: var(--k-akzent); color: var(--k-akzent); filter: none; }

.kopf__aktionen { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kopf__tel { color: var(--k-text); text-decoration: none; font-size: 1.02rem;
             font-weight: 500; white-space: nowrap; }
.kopf__tel:hover { color: var(--k-akzent); }
.kopf__cta {
  padding: 12px 22px; border-radius: 999px; background: var(--k-akzent);
  color: #04121a; font-weight: 600; font-size: 1rem;
  text-decoration: none; white-space: nowrap;
}
.kopf__cta:hover { filter: brightness(1.1); }
.hauptnav__fuss { display: none; }

/* Die drei Striche brauchen eine eigene Breite.

   Bis 08.09.2026 stand hier nur "height: 2px" -- die Breite kam daraus, dass
   ein Flex-Container seine Kinder quer aufzieht (align-items: stretch). Genau
   das gilt bei einem <button> aber nicht ueberall: Safari auf dem iPad setzt
   im eigenen Stylesheet align-items: center. Damit wurden die Striche mittig
   gesetzt statt aufgezogen, und da sie keinen Inhalt haben, blieben sie 0
   Pixel breit. Das Symbol war unsichtbar, der Knopf trotzdem anklickbar --
   deshalb ging das Menue auf, obwohl nichts zu sehen war.

   align-items ausdruecklich setzen und die Striche auf volle Breite: dann
   haengt es an keiner Voreinstellung mehr. Die Farbe bekommt einen festen
   Rueckfall, falls --k-text einmal fehlt. */
.burger {
  display: none; flex-direction: column; justify-content: center;
  align-items: stretch; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; margin-right: -8px;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; width: 100%; min-width: 22px; height: 2px;
               background: #fff; background: var(--k-text, #fff); border-radius: 2px;
               transition: transform 0.22s, opacity 0.22s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.kopf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -------- Mobil: Navigation wird zur Schublade unter der Kopfzeile -------- */
/* 1330 statt 1100: die Navigation braucht seit der Vergroesserung auf 17px
   zusammen mit Telefon und Knopf 1233 Pixel, mit Innenrand rund 1273.
   Bei 1250px ragte sie aus der Kopfzeile. */
/* Zwei Stufen statt einer. Alles zusammen (Marke 169 + Navigation 711 +
   Telefon 116 + Knopf 226 + Abstaende + Innenrand) braucht 1308 Pixel.
   Ohne Telefon nur noch 1182. Deshalb faellt zuerst die Nummer weg und
   erst darunter die ganze Leiste -- sonst haette ein 1280er MacBook das
   Handy-Menue bekommen. */
/* Tablet-Breiten: Telefonnummer weg, Menuepunkte etwas enger.

   Ohne das Engerruecken verfehlte der Anfrage-Knopf das iPad im Querformat um
   zwei Pixel: 169 (Marke) + 711 (Navigation) + 226 (Knopf) + 36 (Abstaende) +
   40 (Innenrand) = 1182, verfuegbar sind 1180. Die Leiste zeigte dann Logo,
   241 Pixel Leerraum und eine rechtsbuendige Navigation -- das sah aus, als
   waere rechts etwas abgeschnitten.

   13 auf 8 Pixel Innenabstand je Menuepunkt spart bei sechs Punkten 60 Pixel.
   Damit braucht die Leiste mit Knopf 1122 Pixel und passt ab 1130. Auf dem
   Laptop bleibt der grosse Abstand unveraendert. */
@media (max-width: 1330px) {
  .kopf__tel { display: none; }
  .hauptnav__link { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1120px) {
  .kopf__cta { display: none; }
}

/* 980 statt 1220 fuer das Handy-Menue.

   Vorher lag diese Grenze bei 1100px. Am 07.09.2026 wurde die Navigation
   vergroessert und die Grenze deshalb auf 1220 gezogen -- damit bekamen iPads
   im Querformat (1180 und 1194 Pixel) ploetzlich den Burger, obwohl sie vorher
   die volle Leiste hatten. Das war ein Rueckschritt, kein Gewinn.

   Massgeblich ist, was die Leiste ohne Telefonnummer und ohne Knopf braucht:
   Marke 169 + Navigation 711 + Abstand 18 + Innenrand 40 = 938 Pixel. Ab 980
   passt das mit Luft. Darunter -- iPad im Hochformat, Handy -- bleibt es beim
   Burger, dort waeren 711 Pixel Navigation nicht unterzubringen. */
@media (max-width: 980px) {
  .burger { display: inline-flex; }
  /* Nach rechts geschoben hat bisher das margin-left:auto der Navigation.
     Mobil ist die aber display:none -- dadurch klebte der Burger direkt am
     Logo. Jetzt schiebt sich der Aktionsbereich selbst nach rechts. */
  .kopf__aktionen { margin-left: auto; }
  .hauptnav {
    position: fixed; inset: var(--k-hoehe) 0 0 0; z-index: 99;
    background: var(--k-grund); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 14px var(--k-gutter) 28px; overflow-y: auto;
    display: none; margin-left: 0;
  }
  .hauptnav.open { display: block; }
  .hauptnav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .hauptnav__punkt { position: static; }
  .hauptnav__link { width: 100%; justify-content: space-between; padding: 13px 12px;
                    font-size: 1rem; }
  button.hauptnav__link::after { margin-left: auto; }
  .hauptnav__sub, .hauptnav__sub--mega {
    position: static; transform: none; width: auto; min-width: 0;
    display: none; grid-template-columns: 1fr;
    box-shadow: none; border-radius: 10px; margin: 2px 0 6px;
    background: rgba(255, 255, 255, 0.04); border-color: var(--k-linie);
  }
  .hauptnav__punkt.is-open > .hauptnav__sub { display: block; }
  .hauptnav__punkt.is-open > .hauptnav__sub--mega { display: grid; }
  .mega__spalte { border-right: 0; border-bottom: 1px solid var(--k-linie); padding: 14px 8px; }
  .mega__info { background: none; padding: 14px 12px 16px; }
  .hauptnav__fuss { display: flex; flex-direction: column; gap: 10px;
                    margin-top: 18px; padding-top: 18px;
                    border-top: 1px solid var(--k-linie); }
  .hauptnav__tel { color: var(--k-text); text-decoration: none; text-align: center;
                   font-size: 0.95rem; }
}

/* Handy: Marke deutlich kleiner.

   Am 07.09.2026 wurde die Kopfzeile fuer den Laptop vergroessert (Schrift 17px,
   Logo 66px, Hoehe 88px) -- das galt bis dahin fuer alle Breiten. Auf 390 Pixel
   Bildschirm nahmen Logo und Schriftzug damit 169 Pixel ein, also gut ein
   Drittel der Zeile, ohne dass sie dort etwas ausrichten: neben ihnen steht nur
   der Burger. Die Vergroesserung war fuer die sechs Menuepunkte gedacht, und
   die sind auf dem Handy gar nicht sichtbar. */
@media (max-width: 640px) {
  .kopf { --k-hoehe: 64px; }
  .kopf__marke { gap: 10px; }
  .kopf__marke img { width: 40px; height: 40px; }
  .kopf__name { font-size: 1.06rem; }
}