/* ==========================================================================
   gawlix. Rahmen: Kopf- und Fußzeile für ALLE Seiten.
   Eigene Klassennamen (gxk = Kopf, gxm = Handy-Menü, gxf = Fuß), damit die alte
   styles.css der noch nicht umgebauten Seiten nicht hineinwirkt und umgekehrt.
   Die Kopfzeile bleibt fixiert und 76px hoch: die alten Seiten rechnen mit
   var(--header-h) = 76px für ihren oberen Abstand.
   Farben: hell mit Rot. Kein Gelb; auf dunklen Flächen ein helles Rosé für Fokus und Hover.
   ========================================================================== */
.gxk, .gxm, .gxf, .skip-link, .gx-led, .gx-taste {
  /* Markenfarben (Oscar): Weiß #f0efed, Schwarz #191919, Rot #c00146 */
  --gx-rot: #c00146;
  --gx-rot-tief: #a3003b;
  --gx-rose: #f4a3bd;
  --gx-anthrazit: #191919;
  --gx-weiss: #f0efed;
  --gx-grund: #f0efed;
  --gx-grund-hell: #e6e4e0;
  --gx-tinte: #191919;
  --gx-tinte-2: #4d4b47;
  --gx-linie: #cfccc6;
  --gx-linie-hell: #dedbd6;
  --gx-schrift: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gx-tasten: 'Space Grotesk', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gx-aus: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------------------------------------------------------------- Sprunglink */
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 400;
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 0 16px; border-radius: 8px;
  background: var(--gx-tinte); color: #fff;
  font: 600 16px/1 var(--gx-tasten); letter-spacing: 0.02em; text-decoration: none;
  transition: top 200ms var(--gx-aus);
}
.skip-link:focus { top: 12px; outline: 3px solid var(--gx-rot); outline-offset: 2px; }

/* ---------------------------------------------------------------- Leuchte */
/* Drei Zustände, flach und seitenweit gleich, auch ohne Blinken unterscheidbar:
   offen = voll rot (blinkt nur in den ersten Sekunden), arbeit = roter Ring,
   aus = unbeleuchteter Ring in der Textfarbe der Umgebung. */
.gx-led {
  display: inline-block; flex: none; box-sizing: border-box;
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  opacity: 0.4;
  transition: background-color 360ms var(--gx-aus), box-shadow 360ms var(--gx-aus), opacity 360ms var(--gx-aus);
}
.gx-led[data-zustand="offen"] { background: var(--gx-rot); box-shadow: none; opacity: 1; }
.gx-led[data-zustand="arbeit"] { background: transparent; box-shadow: inset 0 0 0 2.5px var(--gx-rot); opacity: 1; }
@keyframes gx-blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.22; } }
.gx-blinkphase .gx-led[data-zustand="offen"] { animation: gx-blinken 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
  .gx-blinkphase .gx-led[data-zustand="offen"] { animation: none; }
}

/* ---------------------------------------------------------------- Taste */
.gx-taste {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; box-sizing: border-box;
  border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--gx-rot); color: #fff;
  font: 600 16px/1.15 var(--gx-tasten); letter-spacing: 0.03em;
  box-shadow: 0 10px 20px -14px rgba(25, 25, 25, 0.45);
  transition: transform 160ms var(--gx-aus), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .gx-taste:hover { background: var(--gx-rot-tief); color: #fff; } }
.gx-taste:active { transform: scale(0.97); }
.gx-taste:focus-visible { outline: 3px solid var(--gx-tinte); outline-offset: 3px; }

/* ---------------------------------------------------------------- Kopf */
.gxk {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 76px; box-sizing: border-box;
  background: var(--gx-weiss); color: var(--gx-tinte);
  border-bottom: 1px solid var(--gx-linie-hell);
  font-family: var(--gx-schrift);
  transition: box-shadow 300ms var(--gx-aus);
}
.gxk[data-gescrollt="true"] { box-shadow: 0 12px 24px -20px rgba(27, 26, 25, 0.45); }
.gxk__innen {
  box-sizing: border-box; height: 100%; max-width: 1340px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px);
}
.gxk__marke { flex: none; display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.gxk__marke img { display: block; height: 50px; width: auto; }
.gxk__marke:focus-visible { outline: 3px solid var(--gx-tinte); outline-offset: 2px; }

.gxk__leitungen {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; box-sizing: border-box;
  border-radius: 999px; background: var(--gx-weiss); color: var(--gx-tinte-2); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--gx-linie-hell);
  transition: background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .gxk__leitungen:hover { background: var(--gx-grund-hell); } }
.gxk__leds { display: inline-flex; gap: 6px; }
.gxk__leds .gx-led { width: 8px; height: 8px; }
.gxk__zahl { min-width: 1ch; font: 700 17px/1 var(--gx-tasten); font-variant-numeric: tabular-nums; color: var(--gx-rot); }
.gxk__offen { font: 600 12px/1 var(--gx-tasten); letter-spacing: 0.1em; text-transform: uppercase; }
.gxk__leitungen:focus-visible { outline: 3px solid var(--gx-tinte); outline-offset: 3px; }

.gxk__nav { margin-left: auto; }
.gxk__nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gxk__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border-radius: 8px; color: var(--gx-tinte); text-decoration: none;
  font: 500 16px/1 var(--gx-tasten); letter-spacing: 0; text-transform: lowercase;   /* Kleinschreibung wie das Logo (Oscar) */
  transition: background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .gxk__nav a:hover { background: var(--gx-grund-hell); } }
.gxk__nav a:focus-visible { outline: 3px solid var(--gx-tinte); outline-offset: 2px; }
.gxk__cta { flex: none; }

.gxk__menue {
  display: none; flex: none; align-items: center; gap: 10px; margin-left: auto;
  min-height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--gx-weiss); color: var(--gx-tinte);
  font: 500 15px/1 var(--gx-tasten); letter-spacing: 0; text-transform: lowercase;
  box-shadow: inset 0 0 0 1px var(--gx-linie);
  transition: transform 160ms var(--gx-aus);
  -webkit-tap-highlight-color: transparent;
}
.gxk__menue:active { transform: scale(0.97); }
.gxk__menue:focus-visible { outline: 3px solid var(--gx-tinte); outline-offset: 2px; }
.gxk__striche { display: grid; gap: 4px; }
.gxk__striche span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--gx-aus), opacity 200ms var(--gx-aus); }
.gxk__menue[aria-expanded="true"] .gxk__striche span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gxk__menue[aria-expanded="true"] .gxk__striche span:nth-child(2) { opacity: 0; }
.gxk__menue[aria-expanded="true"] .gxk__striche span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Knöpfe in der Navigation ebenfalls klein geschrieben */
.gxk__cta, .gxm .gx-taste { text-transform: lowercase; }

/* ---------------------------------------------------------------- Kopf als Insel (nur Startseite) */
/* $gxKopfInsel = true: Oben liegt die Leiste auf der dunklen Hero-Fläche (hell auf Dunkel). Beim Scrollen zieht sie
   sich zu einer hellen, schwebenden Leiste zusammen (Oscar, 13.09.), wie die Dynamic Island. Alle anderen Seiten
   behalten die helle, feste Leiste. Den Zustand setzt gawlix-rahmen.js über data-gescrollt.
   Ecken höchstens so rund wie der normale Knopf (Oscar, 13.09.): Leiste 12px wie .gx-knopf, Knöpfe darin 10px wie .gx-taste. */
.gxk--insel { --gx-feder: cubic-bezier(0.32, 0.72, 0, 1); height: auto; background: transparent; border-bottom: 0; pointer-events: none; }
.gxk--insel[data-gescrollt="true"] { box-shadow: none; }
.gxk--insel .gxk__innen {
  pointer-events: auto;
  max-width: 1240px; height: 76px; margin: clamp(6px, 0.8vw, 12px) auto 0;
  border-radius: 12px; background-color: rgba(240, 239, 237, 0);
  transition: max-width 600ms var(--gx-feder), height 600ms var(--gx-feder), margin 600ms var(--gx-feder), padding 600ms var(--gx-feder), background-color 280ms ease, box-shadow 420ms ease;
}
.gxk--insel[data-gescrollt="true"] .gxk__innen {
  max-width: 940px; height: 58px; margin-top: 10px; padding: 0 9px 0 22px;
  /* Milchglas wie bei Apple (Oscar, 13.09.): halb durchsichtig mit Weichzeichner, Farben dahinter schimmern durch.
     0.72 Deckkraft hält die dunkle Schrift auch über dem dunklen Hero gut lesbar. */
  background-color: rgba(240, 239, 237, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 18px 40px -22px rgba(25, 25, 25, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 0 0 1px rgba(25, 25, 25, 0.08);
}
.gxk--insel .gxk__marke { position: relative; }
.gxk--insel .gxk__logo { transition: height 600ms var(--gx-feder), opacity 260ms ease; }
.gxk--insel .gxk__logo--insel { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.gxk--insel .gxk__marke img { height: 40px; }   /* oben im Hero etwas kleiner, damit die Leiste Luft hat (Oscar, 13.09.) */
.gxk--insel[data-gescrollt="true"] .gxk__marke img { height: 34px; }
.gxk--insel[data-gescrollt="true"] .gxk__logo--hell { opacity: 0; }
.gxk--insel[data-gescrollt="true"] .gxk__logo--insel { opacity: 1; }
.gxk--insel .gxk__nav a { color: #ffffff; transition: color 280ms ease, background-color 180ms ease, font-size 600ms var(--gx-feder), padding 600ms var(--gx-feder); }
@media (hover: hover) and (pointer: fine) {
  .gxk--insel .gxk__nav a:hover { background: rgba(255, 255, 255, 0.14); }
  .gxk--insel[data-gescrollt="true"] .gxk__nav a:hover { background: var(--gx-grund-hell); }
}
.gxk--insel[data-gescrollt="true"] .gxk__nav a { font-size: 15px; padding: 0 10px; color: var(--gx-tinte); }
.gxk--insel .gxk__nav ul { gap: 14px; transition: gap 600ms var(--gx-feder); }   /* mehr Platz zwischen den Reitern im Hero (Oscar, 13.09.) */
.gxk--insel[data-gescrollt="true"] .gxk__nav ul { gap: 2px; }
.gxk--insel .gxk__marke:focus-visible, .gxk--insel .gxk__nav a:focus-visible,
.gxk--insel .gxk__cta:focus-visible, .gxk--insel .gxk__menue:focus-visible { outline-color: #f0efed; }
.gxk--insel[data-gescrollt="true"] .gxk__marke:focus-visible, .gxk--insel[data-gescrollt="true"] .gxk__nav a:focus-visible,
.gxk--insel[data-gescrollt="true"] .gxk__cta:focus-visible, .gxk--insel[data-gescrollt="true"] .gxk__menue:focus-visible { outline-color: var(--gx-tinte); }
.gxk--insel .gxk__cta { background: #f0efed; color: #c00146; box-shadow: none; transition: background-color 280ms ease, color 280ms ease, transform 160ms var(--gx-aus); }
.gxk--insel[data-gescrollt="true"] .gxk__cta { background: var(--gx-rot); color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .gxk--insel .gxk__cta:hover { background: #ffffff; color: #a3003b; }
  .gxk--insel[data-gescrollt="true"] .gxk__cta:hover { background: var(--gx-rot-tief); color: #ffffff; }
}
.gxk--insel .gxk__menue { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); transition: color 280ms ease, box-shadow 280ms ease, transform 160ms var(--gx-aus); }
.gxk--insel[data-gescrollt="true"] .gxk__menue { color: var(--gx-tinte); box-shadow: inset 0 0 0 1px var(--gx-linie); }
@media (max-width: 979px) {
  .gxk--insel[data-gescrollt="true"] .gxk__innen { max-width: calc(100% - 20px); height: 56px; padding: 0 6px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gxk--insel .gxk__innen, .gxk--insel .gxk__logo, .gxk--insel .gxk__nav ul, .gxk--insel .gxk__nav a, .gxk--insel .gxk__cta, .gxk--insel .gxk__menue { transition: none; }
}

/* ---------------------------------------------------------------- Handy-Menü */
.gxm {
  position: fixed; top: 76px; left: 0; right: 0; bottom: 0; z-index: 190;
  display: none; flex-direction: column; gap: 4px; box-sizing: border-box;
  padding: 20px clamp(16px, 4vw, 32px) calc(24px + env(safe-area-inset-bottom));
  background: var(--gx-anthrazit); overflow-y: auto; overscroll-behavior: contain;
  font-family: var(--gx-schrift);
}
.gxm[data-offen="true"] { display: flex; }
.gxm a:not(.gx-taste) {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #efefec; text-decoration: none;
  font: 500 24px/1.1 var(--gx-tasten); letter-spacing: 0; text-transform: lowercase;
}
.gxm a:not(.gx-taste):focus-visible { outline: 3px solid var(--gx-rose); outline-offset: 2px; }
.gxm .gx-taste { margin-top: 20px; min-height: 56px; font-size: 18px; }
.gxm .gx-taste:focus-visible { outline-color: var(--gx-rose); }

@media (max-width: 979px) {
  .gxk__nav, .gxk__cta { display: none; }
  .gxk__menue { display: inline-flex; }
  .gxk__leitungen { margin-left: auto; }
  .gxk__leitungen ~ .gxk__menue { margin-left: 0; }
}
@media (max-width: 400px) {
  .gxk__marke img { height: 42px; }
  .gxk__offen, .gxk__menue-text { display: none; }
}
/* Sehr schmal: Logo, Leuchten und Menü passen nicht nebeneinander; die Zahl bleibt. */
@media (max-width: 374px) {
  .gxk__leds { display: none; }
  .gxk__leitungen { padding: 0 16px; }
}
@media (min-width: 980px) { .gxm { display: none !important; } }

/* ---------------------------------------------------------------- Fuß */
.gxf {
  background: var(--gx-anthrazit); color: #d9d6ce;
  font: 400 16px/1.5 var(--gx-schrift);
  border-top: 1px solid #45433f;
  /* unten 72px: Platz für den fest unten links sitzenden Cookie-Knopf (Zumdo) */
  padding: clamp(48px, 6vw, 80px) 0 72px;
}
.gxf__innen { box-sizing: border-box; max-width: 1340px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.gxf__oben {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 36px 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gxf__marke a { display: inline-block; border-radius: 8px; }
.gxf__marke img { display: block; height: 60px; width: auto; }
.gxf__claim { margin: 10px 0 0; font: 600 16px/1.2 var(--gx-tasten); letter-spacing: 0.06em; color: var(--gx-rose); }
.gxf__titel { margin: 0 0 10px; font: 600 13px/1 var(--gx-tasten); letter-spacing: 0.12em; text-transform: uppercase; color: #a9a59c; }
.gxf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.gxf a { color: #efefec; text-decoration: none; }
.gxf__spalte a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .gxf a:hover { color: var(--gx-rose); } }
.gxf a:focus-visible { outline: 3px solid var(--gx-rose); outline-offset: 3px; border-radius: 4px; }
.gxf__unten { margin: 20px 0 0; font-size: 14px; color: #a9a59c; }
@media (max-width: 859px) {
  .gxf__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gxf__marke { grid-column: 1 / -1; }
}
@media (max-width: 479px) { .gxf__oben { grid-template-columns: minmax(0, 1fr); } }

/* Kopf-Knopf oben im Hero (Leiste noch nicht gescrollt): schwarz auf weiß statt rot (Oscar, 13.09.2026) */
.gxk--insel:not([data-gescrollt="true"]) .gxk__cta { background: #ffffff; color: var(--gx-tinte); }
@media (hover: hover) and (pointer: fine) { .gxk--insel:not([data-gescrollt="true"]) .gxk__cta:hover { background: var(--gx-tinte); color: #ffffff; } }

/* ---------------------------------------------------------------- Weiche Bildschirmränder */
/* Oscar, 13.09.2026 (wie auf emilkowal.ski): Inhalte verschwimmen milchglasartig, wenn sie ganz oben oder ganz unten ins Bild
   kommen oder es verlassen. Je Rand zwei Ebenen, außen stärker. Nur Unschärfe, keine Farbe, damit es auf hellen und dunklen
   Flächen gleich wirkt. Unter Kopfleiste (z-index 200) und WhatsApp-Knopf (150); Klicks gehen durch. */
html::before, html::after, body::before, body::after {
  content: ""; position: fixed; left: 0; right: 0; z-index: 120; pointer-events: none;
}
html::before {
  top: 0; height: 76px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 100%);
}
body::before {
  top: 0; height: 34px;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
html::after {
  bottom: 0; height: 104px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%);
}
body::after {
  bottom: 0; height: 46px;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}
/* Nicht auf Handy und Tablet (Oscar, 13.09.2026: sieht dort schlecht aus). */
@media (max-width: 767px), (hover: none) and (pointer: coarse) { html::before, html::after, body::before, body::after { display: none; } }
@media (prefers-reduced-transparency: reduce) { html::before, html::after, body::before, body::after { display: none; } }
@media print { html::before, html::after, body::before, body::after { display: none; } }