/* ============================================================================
 * Kopf und Fußzeile der Website für die ausgelieferten Portalseiten.
 * Vorgabe Oliver 31.08.2026: "Auf allen Seiten wie auch /referral/ soll Kopf
 * und Fußzeile erhalten bleiben."
 *
 * Warum ein Nachbau und keine Wiederverwendung: die Website ist Next/React mit
 * Motion, die Portalseiten sind einzelne HTML-Dateien, die Caddy direkt
 * ausliefert. Ein React-Bundle in jede davon zu hängen wäre ein Vielfaches an
 * Gewicht für eine Leiste. Optik, Maße und Radien folgen exakt
 * floating-navigation.tsx und site-footer.tsx.
 *
 * Die ALTEN Köpfe und Fußzeilen der Portalseiten werden ausgeblendet, nicht
 * entfernt: ihre Elemente tragen IDs, die das Seiten-JS anfasst (l-logo,
 * l-zurueck, t-footer, footer-inhalt, lang-switch …). Entfernen hieße, in
 * zehn Dateien JavaScript nachzuziehen und bei jeder künftigen Änderung
 * daran zu denken. Ausblenden kostet eine CSS-Regel und bricht nichts.
 * ========================================================================== */
:root {
  --lr-shell: #f2f0e8;
  --lr-ink: #0a0a0a;
  --lr-coal: #252525;
  --lr-cream: #f6f5ef;
  --lr-mute: #63625b;
  --lr-linie: rgba(10, 10, 10, 0.1);
}

/* Alte Leisten aus dem Weg — DOM bleibt, damit kein Skript ins Leere greift. */
body > header:not(.lr-kopf),
body > footer:not(.lr-fuss) { display: none !important; }

body { padding-top: 88px; }
@media (max-width: 1023px) { body { padding-top: 80px; } }

/* ---------------------------------------------------------------- Kopf */
.lr-kopf {
  position: fixed; inset-inline: 0; top: 12px; z-index: 400;
  display: flex; justify-content: center; padding: 0 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (min-width: 1024px) { .lr-kopf { top: 24px; } }
.lr-bar {
  display: flex; align-items: center; gap: 0;
  height: 54px; width: auto; max-width: calc(100vw - 2rem);
  padding: 6px; border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(37, 37, 37, 0.95);
  box-shadow: 0 8px 28px rgba(10, 10, 10, 0.18);
  backdrop-filter: blur(6px);
}
/* Kachel und Wortmarke liegen in EINEM Link (.lr-logo): das Logo ist eine
   Flaeche, nicht zwei Ziele. Unter 360 px Fensterbreite faellt die Wortmarke
   weg — dort braucht der Anfrage-Knopf den Platz. */
.lr-logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  text-decoration: none; color: var(--lr-cream);
}
.lr-marke {
  display: flex; align-items: center; justify-content: center;
  height: 42px; width: 42px; flex-shrink: 0;
  border-radius: 9px; background: var(--lr-cream);
  text-decoration: none;
}
.lr-marke img { display: block; height: 23px; width: auto; }
.lr-wortmarke { display: block; height: 15px; width: auto; flex-shrink: 0; }
/* Grenze nachgemessen, nicht geschaetzt: mit Wortmarke braucht die Leiste
   407 px Fensterbreite. Darunter faellt die Wortmarke weg — der Anfrage-Knopf
   und der Menueknopf sind wichtiger als der Schriftzug. Die Kachel bleibt. */
@media (max-width: 419px) { .lr-wortmarke { display: none; } }
.lr-links { display: none; align-items: center; gap: 24px; padding: 0 20px; margin: 0; list-style: none; }
@media (min-width: 1024px) { .lr-links { display: flex; } }
@media (min-width: 1280px) { .lr-links { gap: 28px; } }
.lr-links a {
  white-space: nowrap; font-size: 12.5px; font-weight: 500; text-decoration: none;
  color: rgba(246, 245, 239, 0.7); transition: color .2s ease;
}
.lr-links a:hover { color: var(--lr-cream); }
.lr-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 12px; }
.lr-cta {
  /* nowrap ist Pflicht: die Portalseiten bringen eigene Textregeln mit, und
     ohne das bricht "Jetzt anfragen" im Knopf auf zwei Zeilen um. */
  display: inline-flex; align-items: center; gap: 8px; height: 40px;
  flex-shrink: 0; white-space: nowrap; line-height: 1;
  padding: 0 8px 0 16px; border-radius: 999px;
  background: var(--lr-cream); color: var(--lr-ink);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.lr-cta:active { transform: scale(.97); }
/* NUR der Pfeil, nicht "jedes span im Knopf": im Knopf steckt seit der
   Laufzeit-Sprachumschaltung auch der Text in einem span, und der wurde von
   der alten Regel `.lr-cta span` zu einem 26-px-Kreis gemacht. */
.lr-cta__pfeil {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--lr-ink); color: var(--lr-cream); font-size: 12px;
}
.lr-lang {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 8px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px;
  color: rgba(246, 245, 239, 0.7); font-size: 12px; font-weight: 600;
  text-decoration: none; transition: color .2s ease, border-color .2s ease;
}
.lr-lang:hover { color: var(--lr-cream); border-color: rgba(255, 255, 255, 0.25); }

/* Menü für kleine Bildschirme: details/summary statt eigenem JS. */
.lr-menue { position: relative; display: block; }
@media (min-width: 1024px) { .lr-menue { display: none; } }
.lr-menue > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  height: 40px; width: 40px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.15); color: var(--lr-cream);
}
.lr-menue > summary::-webkit-details-marker { display: none; }
.lr-menue > summary::after { content: "☰"; font-size: 15px; line-height: 1; }
.lr-menue[open] > summary::after { content: "✕"; font-size: 13px; }
.lr-menue-inhalt {
  position: absolute; right: 0; top: 48px; width: 210px;
  display: grid; gap: 2px; padding: 8px;
  border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(37, 37, 37, 0.98);
  box-shadow: 0 12px 34px rgba(10, 10, 10, 0.34);
}
.lr-menue-inhalt a {
  padding: 9px 10px; border-radius: 9px; text-decoration: none;
  color: rgba(246, 245, 239, 0.78); font-size: 14px;
}
.lr-menue-inhalt a:hover { background: rgba(246, 245, 239, 0.08); color: var(--lr-cream); }

/* ------------------------------------------------------------ Fußzeile */
.lr-fuss {
  border-top: 1px solid var(--lr-linie);
  margin-top: 56px; background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.lr-fuss-innen {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px;
  font-size: 12px; line-height: 1.7; color: var(--lr-mute);
}
@media (min-width: 1024px) {
  .lr-fuss-innen { flex-direction: row; align-items: center; justify-content: space-between; }
}
.lr-fuss-marke { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.lr-fuss-marke img { display: block; height: 48px; width: auto; }
.lr-fuss-marke a { display: inline-flex; width: fit-content; transition: opacity .3s ease; }
.lr-fuss-marke a:hover { opacity: .7; }
.lr-fuss-b2b { max-width: 520px; margin: 0; }
.lr-fuss-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 0; }
.lr-fuss-links a, .lr-teilen-btn {
  color: var(--lr-mute); text-decoration: none; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: color .3s ease;
}
.lr-fuss-links a:hover, .lr-teilen-btn:hover { color: var(--lr-ink); }
.lr-teilen { position: relative; }
.lr-teilen-menue {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; z-index: 500;
  width: 188px; display: grid; gap: 2px; padding: 6px;
  border-radius: 13px; border: 1px solid var(--lr-linie); background: var(--lr-cream);
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.12);
}
.lr-teilen-menue[hidden] { display: none; }
.lr-teilen-menue a, .lr-teilen-menue button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0;
  border-radius: 9px; background: none; font: inherit; font-size: 12px;
  color: var(--lr-mute); text-decoration: none; cursor: pointer;
}
.lr-teilen-menue a:hover, .lr-teilen-menue button:hover { background: rgba(10, 10, 10, 0.05); color: var(--lr-ink); }

/* Sehr schmale Geraete (iPhone SE der ersten Generation und aehnliche):
   288 px Leiste, 289 px Inhalt — die rechten Elemente ruecken zusammen.
   DIESER BLOCK MUSS AM DATEIENDE STEHEN. Er ueberschreibt .lr-rechts und
   .lr-cta bei gleicher Spezifitaet; stand er weiter oben, gewannen die
   spaeteren Grundregeln und die Medienabfrage blieb wirkungslos. */
@media (max-width: 359px) {
  .lr-rechts { gap: 6px; padding-left: 6px; }
  .lr-cta { padding: 0 6px 0 12px; gap: 6px; }
  .lr-menue > summary { width: 36px; }
}