/* mehr gefunden — Fußzeile mit gezeichnetem Rand
   Ein Stylesheet für alle Seiten mit Fußzeile. Das Markup erzeugt fusszeile.py
   zwischen den Marken FUSSZEILE ANFANG und FUSSZEILE ENDE, nie von Hand ändern.

   Aufbau
     .fuss                    Fußzeile als Ganzes
       svg.fuss__rand         gezeichneter Rand (Läden und Werkstätten), inline
       .fuss__flaeche         Fläche in der Farbe des Randes
         .fuss__innen         Breite und Seitenrand
           .fuss__raster      voll: Marke links, Spalten rechts
           .fuss__kopfzeile   kompakt: Marke links, Linkzeile rechts
           .fuss__abbinder    Haarlinie und Zeile „Ein Service von …“

   Fassung (Farbe der Fläche)
     .fuss--tag      Website-Seiten, Fläche #00264e
     .fuss--nacht    Checkseiten, Fläche = Fußzeilenton der Nacht-Welt (#071630)
   Aufbau
     .fuss--voll     Marke, Spalten Überblick / Rechtliches / Kontakt, Abbinder
     .fuss--kompakt  Marke mit Claim, eine Linkzeile, Abbinder
   Übergang zur Seite
     .fuss--abschnitt  Rand liegt im Unterabstand des letzten Abschnitts
                       (Versatz um die Randhöhe nach oben, Himmel = dessen Grund)
     .fuss--seite      Rand sitzt unter dem Abschnitt, Himmel = Seitengrund
   Himmelton (nur Farbe der hinteren Reihe und der Kante)
     .fuss--himmel-hell     heller Himmel: dunklere Reihe und Kante
     .fuss--himmel-dunkel   dunkler Himmel: hellere Reihe, grüne Kante
   Weitere Klassen
     .fuss--gc         Breite und Seitenrand der Checkseite statt der Website
     .fuss--chat       Seite mit Chat-Knopf unten rechts: mehr Unterabstand am Handy
     .fuss--grund-bg2  Modus seite mit Himmel in --bg-2 (letzter Abschnitt trägt nicht den Seitengrund)

   Diese Datei trägt ohne style.css und gratischeck.css (Ersatzwerte hinter den
   Variablen). Gegen deren Grundregeln (.gc a, img { display: block },
   :focus-visible) sind die Selektoren hier mit Absicht spezifischer. */

.fuss {
  /* Höhe des Randes: Untergrenze, Wachstum mit der Breite, Obergrenze. Ganzzahlig, wenn der
     Browser round() kann (sonst schiene in der letzten Pixelzeile eine Haarlinie durch).
     Die Website-Seiten bekommen die größere Fassung, die Nacht-Fassung (Checkseiten) hat
     unter ihrem letzten Abschnitt weniger Luft (gemessen 52 px am Handy) und bleibt knapper. */
  --fuss-h-min: 46px;
  --fuss-h-vw: 6vw;
  --fuss-h-max: 92px;
  --fuss-h: clamp(var(--fuss-h-min), var(--fuss-h-vw), var(--fuss-h-max));

  --fuss-flaeche: #00264e;
  --fuss-gruen: #3ddc97;
  --fuss-kante: var(--fuss-gruen);
  --fuss-nadel: var(--fuss-gruen);
  --fuss-hinten: rgba(159, 217, 187, .18);

  --fuss-text: #e3ebf5;
  --fuss-text-2: #b7c5d8;
  --fuss-kopf: #9fd9bb;
  --fuss-linie: rgba(255, 255, 255, .16);

  --fuss-breite: var(--container, 1320px);
  --fuss-seitenrand: var(--pad-x, clamp(20px, 5vw, 72px));

  --fuss-schrift-marke: "Clash Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fuss-schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuss-schrift-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  font-family: var(--fuss-schrift-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fuss-text);
  -webkit-text-size-adjust: 100%;
}
@supports (height: round(1.4px, 1px)) {
  .fuss { --fuss-h: round(clamp(var(--fuss-h-min), var(--fuss-h-vw), var(--fuss-h-max)), 1px); }
}
.fuss *, .fuss *::before, .fuss *::after { box-sizing: border-box; }

/* ---------- Fassung ---------- */
.fuss--tag { --fuss-flaeche: #00264e; }
.fuss--nacht {
  --fuss-flaeche: var(--gc-grund-tief, #071630);
  --fuss-gruen: var(--gc-gruen, #3ddc97);
  --fuss-h-min: 42px;
  --fuss-h-vw: 5.6vw;
  --fuss-h-max: 86px;
}
/* Auf sehr breiten Bildschirmen wächst der Rand mit, sonst schnitte `slice` oben die
   Turmspitze und die Signalbögen ab (Zeichnung 2560 : 110, also 23,3 : 1). */
@media (min-width: 2200px) {
  .fuss, .fuss--nacht { --fuss-h-max: 4.3vw; }
}
.fuss--gc {
  --fuss-breite: var(--gc-breite, 72rem);
  --fuss-seitenrand: var(--gc-rand, clamp(16px, 4vw, 32px));
  /* Unter dem letzten Abschnitt von /gratis-check sind nur 97 px frei (gemessen bei 1440 bis 2560 px):
     im Modus abschnitt ragt der Rand höchstens 86 px hinein, der Rest hängt darunter (dort sind nur
     schmale Lücken zwischen den Häusern durchsichtig). */
  --fuss-ueberlapp: 86px;
}

/* ---------- Himmelton ---------- */
.fuss--himmel-hell {
  --fuss-kante: var(--accent, #0a6b43);
  --fuss-nadel: var(--accent, #0a6b43);
  --fuss-hinten: rgba(0, 38, 78, .30);
}
.fuss--himmel-dunkel {
  --fuss-kante: var(--fuss-gruen);
  --fuss-nadel: var(--fuss-gruen);
  --fuss-hinten: rgba(159, 217, 187, .18);
}

/* ---------- Übergang zur Seite ---------- */
.fuss--abschnitt { margin-top: calc(-1 * min(var(--fuss-h), var(--fuss-ueberlapp, var(--fuss-h)))); }
/* Modus "seite" mit eigenem Himmel: der letzte Abschnitt trägt nicht den Seitengrund (ki-monitoring: --bg-2) */
.fuss--grund-bg2 .fuss__rand { background: var(--bg-2, #eaf0f7); }

/* ---------- Der Rand ---------- */
.fuss .fuss__rand {
  display: block;
  width: 100%;
  height: var(--fuss-h);
  max-width: none;
  margin: 0 0 -1px;
  overflow: hidden;
}
.fuss .fuss__hinten { fill: var(--fuss-hinten); }
.fuss .fuss__vorn {
  fill: var(--fuss-flaeche);
  stroke: var(--fuss-kante);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fuss .fuss__zier,
.fuss .fuss__linie {
  fill: none;
  stroke: var(--fuss-kante);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.fuss .fuss__zier { stroke-opacity: .65; }
.fuss .fuss__linie { stroke-opacity: .42; }
.fuss .fuss__punkt { fill: var(--fuss-kante); }
.fuss .fuss__boegen path {
  fill: none;
  stroke: var(--fuss-nadel);
  stroke-width: 1.6px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fuss .fuss__koerper { fill: var(--fuss-nadel); }
.fuss .fuss__kern { fill: var(--fuss-flaeche); }
.fuss .fuss__haken {
  fill: none;
  stroke: var(--fuss-gruen);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Die Fläche ---------- */
.fuss .fuss__flaeche {
  position: relative;
  background: var(--fuss-flaeche);
  padding: clamp(24px, 3.4vw, 46px) 0 clamp(32px, 3.6vw, 44px);
}
@media (max-width: 700px) {
  /* der Chat-Knopf (unten rechts, fest) darf am Handy keinen Link verdecken */
  .fuss--chat .fuss__flaeche { padding-bottom: 100px; }
}
.fuss .fuss__innen {
  width: 100%;
  max-width: var(--fuss-breite);
  margin-inline: auto;
  padding-inline: var(--fuss-seitenrand);
}

/* ---------- Marke ---------- */
.fuss .fuss__logo {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  font: 700 1.7rem/1.1 var(--fuss-schrift-marke);
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.fuss--nacht .fuss__logo {
  font-weight: 600;
  letter-spacing: 0;
  word-spacing: .1em;
  gap: .4em;
}
.fuss a.fuss__logo:hover { color: #fff; }
.fuss .fuss__pin { display: block; width: auto; max-width: none; height: 1.45em; flex: none; }
.fuss .fuss__wort-punkt { color: var(--fuss-gruen); }
.fuss .fuss__claim {
  margin: .55rem 0 0;
  padding: 0;
  font: 500 .72rem/1.5 var(--fuss-schrift-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fuss-text-2);
  text-wrap: balance;   /* bricht der Claim um, dann ausgewogen statt "KI-" am Zeilenende */
}

/* ---------- Spalten (voll) ---------- */
.fuss--voll .fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 36px clamp(32px, 6vw, 96px);
  align-items: start;
}
.fuss .fuss__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 20px;
  margin: 0;
  padding: 0;
}
.fuss .fuss__spalte { min-width: 0; margin: 0; padding: 0; }
.fuss .fuss__kopf {
  margin: 0 0 .7rem;
  padding: 0;
  font: 500 .68rem/1.4 var(--fuss-schrift-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fuss-kopf);
}
.fuss ul.fuss__liste,
.fuss ul.fuss__zeile {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuss ul.fuss__liste > li,
.fuss ul.fuss__zeile > li { margin: 0; padding: 0; list-style: none; }

/* ---------- Links ---------- */
.fuss a.fuss__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 24px;
  padding: .3rem 0;
  font: 400 .98rem/1.45 var(--fuss-schrift-text);
  color: var(--fuss-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  overflow-wrap: anywhere;
}
.fuss a.fuss__link:hover {
  color: var(--fuss-gruen);
  text-decoration-color: currentColor;
}
.fuss :focus-visible {
  outline: 3px solid var(--fuss-gruen);
  outline-offset: 3px;
  border-radius: 4px;
}
.fuss .fuss__mini {
  display: block;
  width: .74em;
  height: .92em;
  flex: none;
  fill: var(--fuss-gruen);
}
.fuss .fuss__mini circle { fill: var(--fuss-flaeche); }

/* ---------- Kompakt ---------- */
.fuss--kompakt .fuss__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 48px;
}
.fuss--kompakt .fuss__kopfzeile > * { min-width: 0; }
.fuss .fuss__zeile { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }

/* ---------- Abbinder ---------- */
.fuss .fuss__abbinder {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: 1.15rem;
  border-top: 1px solid var(--fuss-linie);
}
.fuss--kompakt .fuss__abbinder { margin-top: clamp(22px, 3vw, 32px); }
.fuss .fuss__credit {
  margin: 0;
  padding: 0;
  font: 500 .72rem/1.7 var(--fuss-schrift-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fuss-text-2);
}
.fuss .fuss__credit + .fuss__credit { margin-top: .5rem; }
.fuss .fuss__credit a {
  color: var(--fuss-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  overflow-wrap: anywhere;
}
.fuss .fuss__credit a:hover { color: var(--fuss-gruen); }
.fuss .fuss__credit--hinweis {
  font: 400 .8rem/1.6 var(--fuss-schrift-text);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Schmal ----------
   Die Grenzen stehen in em: sie wandern mit der Schriftgröße, die der Browser
   einstellt. Marke über den Spalten erst unterhalb von 73,75em (1180 px), dort
   ist neben der Marke zu wenig Platz für drei Spalten samt E-Mail-Adresse.
   Unterhalb von 47,5em (760 px) stehen Überblick und Rechtliches nebeneinander,
   Kontakt darunter über die ganze Breite, damit die Adresse nie umbricht. */
@media (max-width: 73.75em) {
  .fuss--voll .fuss__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.5em) {
  /* rechts etwas breiter: dort steht mit „Abo-Bedingungen“ der längste Link, der bei 320 px sonst am Bindestrich bräche */
  .fuss--voll .fuss__spalten { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 16px; }
  .fuss--voll .fuss__spalte:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fuss .fuss__logo { font-size: 1.5rem; }
  .fuss--kompakt .fuss__kopfzeile { gap: 14px; }
}
@media (max-width: 400px) {
  .fuss .fuss__logo { font-size: min(1.5rem, 8.4vw); }
}

/* ---------- Bewegung: Nadel setzt sich, Bögen blenden ein ----------
   Nur mit scrollgekoppelten Animationen und nur ohne Wunsch nach weniger Bewegung.
   Die Ruhelage (Nadel an ihrem Platz, Bögen sichtbar) ist der Grundzustand oben;
   ohne Unterstützung bleibt es dabei. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fuss .fuss__rand { view-timeline: --fuss-rand block; }
    .fuss .fuss__nadel {
      animation: fuss-nadel linear both;
      animation-timeline: --fuss-rand;
      animation-range: entry 0% entry 100%;
    }
    .fuss .fuss__boegen {
      animation: fuss-boegen linear both;
      animation-timeline: --fuss-rand;
      animation-range: entry 30% entry 100%;
    }
    @keyframes fuss-nadel {
      from { transform: translateY(-9px); opacity: 0; }
      to { transform: none; opacity: 1; }
    }
    @keyframes fuss-boegen {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .fuss a.fuss__link,
    .fuss .fuss__credit a { transition: color .3s ease, text-decoration-color .3s ease; }
  }
}

/* ---------- Dauerbewegung: die drei Bögen über der Nadel funken nacheinander ----------
   Läuft in jedem Browser, auch ohne scrollgekoppelte Animation, und nur ohne Wunsch
   nach weniger Bewegung. Der Mittelpunkt der Bögen liegt bei (1536, 56.4) im viewBox-
   Raster des Rands. Die Ruhelage bleibt der Grundzustand oben; die Einblendung beim
   Scrollen (fuss-boegen) läuft auf der Gruppe, der Loop auf den einzelnen Bögen. */
@media (prefers-reduced-motion: no-preference) {
  .fuss .fuss__boegen path {
    transform-box: view-box;
    transform-origin: 1536px 56.4px;
    animation: fuss-funk 3.8s ease-in-out infinite;
  }
  .fuss .fuss__boegen path:nth-child(1) { --a: .9; }
  .fuss .fuss__boegen path:nth-child(2) { --a: .6; animation-delay: .3s; }
  .fuss .fuss__boegen path:nth-child(3) { --a: .3; animation-delay: .6s; }
  @keyframes fuss-funk {
    0% { stroke-opacity: var(--a); transform: none; }
    9% { stroke-opacity: 1; transform: none; }
    30% { stroke-opacity: 0; transform: scale(1.09); }
    31% { stroke-opacity: 0; transform: scale(.91); }
    62%, 100% { stroke-opacity: var(--a); transform: none; }
  }
}