/* ============================================================
   easylocal — Feinschliff über allen Seiten
   ============================================================
   Wird von jeder Seite NACH dem eingebetteten <style> geladen und
   überschreibt daher gezielt.

   Die Markenfarben bleiben unangetastet — hier stehen nur
   Seitenwechsel, Bedienbarkeit und Bewegung.
   ============================================================ */

/* ------------------------------------------------------------
   1) SEITENWECHSEL
   ------------------------------------------------------------
   Der Browser blendet zwischen alter und neuer Seite über, statt
   weiß aufzublitzen. Kopf, Top-Strip und Fuß bekommen eigene Namen
   und bleiben dadurch stehen, während nur der Inhalt wechselt —
   auch beim Sprachwechsel. Browser ohne Unterstützung navigieren
   ganz normal.
------------------------------------------------------------ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: .14s; }
::view-transition-new(root) { animation-duration: .2s; }

.nav      { view-transition-name: site-nav; }
.topstrip { view-transition-name: site-strip; }
.foot     { view-transition-name: site-foot; }
.langsw   { view-transition-name: site-lang; }


/* ------------------------------------------------------------
   2) BEDIENUNG
------------------------------------------------------------ */

/* Sichtbarer Fokus überall — auch dort, wo outline entfernt wurde.
   Ohne das sehen Tastaturnutzer nicht, wo sie gerade stehen. */
:focus-visible {
  outline: 3px solid var(--el-green);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Auf dunklem Grund braucht der Ring Weiß, sonst verschwindet er */
.band :focus-visible,
.final :focus-visible,
.foot :focus-visible,
.final__form input:focus-visible,
.foot__news-field input:focus-visible {
  outline-color: #fff;
}

/* Touch-Ziele auf mindestens 44px — die Fläche wächst über padding,
   das Aussehen bleibt unverändert. */
.calc__tick {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 6px;
  margin-top: -12px;
}
.langsw__opt {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Mit Maus darf es kompakter sitzen — 44px ist eine Fingerregel */
@media (hover: hover) and (pointer: fine) {
  .langsw__opt { min-height: 30px; min-width: 36px; }
}
.cookie__btn { min-height: 44px; }

.co-locs__btn { width: 40px; height: 40px; }
@media (pointer: coarse) {
  .co-locs__btn { width: 44px; height: 44px; }
}

/* Zeigefinger auf allem Klickbaren */
button:not([disabled]),
summary,
[role="button"],
label.kontakt-tab,
.calc__tier:not([disabled]) {
  cursor: pointer;
}

/* Übergänge einheitlich: 180ms, gleiche Kurve wie der Regler */
.pill,
.calc__tier,
.langsw__opt,
.nav__link,
.plans__hook-link,
.co-locs__btn {
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}


/* ------------------------------------------------------------
   3) BEWEGUNG
   ------------------------------------------------------------
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   die Inhalte sofort — inklusive Seitenwechsel.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee__logos,
  .calc__price.is-changing .num {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   5) KOPFZEILE AUF KLEINEN BILDSCHIRMEN

   Der Knopf im Kopf heisst „Angebot anfordern" und ist damit
   breiter als der frueher dort stehende Text. Bei 375px lief die
   Zeile ueber und schob den Burger aus dem Bild — das Menue war
   auf dem Handy nicht mehr erreichbar.

   Unter 620px wird der Knopf kompakt, unter 480px weicht er ganz:
   Dort traegt ihn das aufklappbare Menue, prominent und in voller
   Breite.
------------------------------------------------------------ */
@media (max-width: 620px) {
  .nav__cta { gap: 8px; }
  .nav__cta .pill { height: 38px; padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  /* Auf Telefonen passen Wortmarke, Knopf und Burger nicht nebeneinander.
     Der Knopf weicht – im Klappmenue steht er in voller Breite ganz oben. */
  .nav__cta .pill { display: none; }
}

/* ------------------------------------------------------------
   6) FUSSBEREICH — EINE FARBE

   Vier Seiten trugen #07241b, elf das hellere --el-green-house.
   Beim Wechsel von der Startseite auf eine Unterseite wurde der Fuss
   dadurch sichtbar heller — der haeufigste Grund fuer den Eindruck,
   man sei auf einer anderen Website gelandet.

   Der dunklere Ton gewinnt: Er setzt sich vom Abschlussband
   (--el-green-house) ab, statt damit zu verschmelzen.

   Es blieb nicht bei der Farbe: Jede Seite trug einen eigenen
   Fuss-Bausatz. Startseite vierspaltiges Raster mit gestylten
   Spaltentiteln, Audit-Seite zweispaltig ohne h5-Regel, Vergleich
   Flexbox statt Raster. Gleiches Markup, drei Darstellungen.

   Deshalb steht der Bausatz der Startseite ab hier zentral und gilt
   fuer alle Seiten. Die Einzelregeln in den Seiten duerfen bleiben —
   theme.css laedt danach und gewinnt.
------------------------------------------------------------ */
.foot {
  background: #07241b;
  color: rgba(255,255,255,.72);
  padding: 64px 0 32px;
  border-top: 0;
  margin-top: 0;
}
.foot__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 0;
  border-bottom: 0;
}
.foot__lockup { display: inline-flex; }
.foot__wordmark { height: 30px; width: auto; }
.foot__brand .nav__wordmark { color: #fff; }
.foot__brand .nav__wordmark .dot { color: var(--el-green); }
.foot__brand p {
  font: 400 14px/1.55 var(--font-sans);
  color: rgba(255,255,255,.55);
  margin-top: 14px;
  max-width: 36ch;
}
.foot h5 {
  font: 600 13.5px/1 var(--font-sans);
  color: #fff;
  letter-spacing: -0.01em;
  margin: 6px 0 18px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font: 500 14px/1 var(--font-sans);
}
.foot a:hover { color: #fff; }
.foot__bot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font: 500 12.5px/1 var(--font-mono);
  color: rgba(255,255,255,.45);
  letter-spacing: .08em; text-transform: uppercase;
}
.foot__bot a { font-family: var(--font-mono); }

@media (max-width: 880px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .foot { padding: 48px 0 28px; } .foot__top { gap: 28px; } }
@media (max-width: 540px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__wordmark { height: 26px; }
}