/* ==========================================================================
   Die Fußzeile · eine Bauart, drei Größen.

   Vorher waren es sechs, jede mit ihrem eigenen Namensraum: .footer__* im
   hellen Blatt, .mp-* im Markt, .sl-* beim Verkäufer, .op__foot im Admin und
   im Onboarding gar keine Klassen, nur Inline-Stile. Der letzte war der
   dringendste Fall: was inline steht, erreicht nie ein Token.

   DIE REGEL, die vorher fehlte (Claude Design):

       Eine Fußzeile trägt, was der Seite darüber fehlt.

   Nicht "öffentlich bekommt die große, Admin die kleine" · das beschreibt nur
   und kann den nächsten Fall nicht entscheiden. Die Regel kann es:

     FULL   eine öffentliche Seite hat keine Seitenleiste und keine einzelne
            Aufgabe. Ihr Fuß ist die Landkarte des Grids.
     SLIM   eine Arbeitshülle trägt ihre Ziele schon in der Seitenleiste. Ihr
            Fuß fügt nur hinzu, was die Leiste nicht kann: den Weg hinaus und
            die Rechtsseiten.
     LINE   eine Schwelle hat eine Aufgabe. Ihr Fuß ist das rechtliche
            Minimum und nichts, was mit dieser Aufgabe konkurriert.

   DER GRUND WECHSELT IMMER · und darin lag der Fehler des Markt-Fußes.
   Auf einer hellen Seite FÄLLT er auf das dunkle Pflaumenband, und das liest
   sich als Ankommen. Der Markt-Fuß kopierte dieselbe Dunkelheit auf eine
   ohnehin dunkle Seite, also änderte sich nichts und er lief einfach aus. Auf
   Nocturne muss er stattdessen auf die Flächenstufe HEBEN, mit der
   auslaufenden Linie darüber. Eine Regel, zwei Richtungen.

   Die zwei Grautöne bleiben getrennt: das helle Band ist #191524 (pflaume),
   Nocturnes Grund ist #161826 (blaugrau). Sie gehören verschiedenen Hälften.
   Nie das Pflaumenband auf eine Nocturne-Seite.
   ========================================================================== */

.ft{--ft-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;}
.ft__inner{max-width:1280px;margin:0 auto;}

/* Die auslaufende Linie über jedem Nocturne-Fuß · auf dunklem Grund ist
   Erhebung eine Kante plus eine Flächenstufe, nie mehr Dunkelheit. */
.ft--nocturne{background:var(--color-surface);
  background-image:linear-gradient(to right,transparent,var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px),transparent);
  background-repeat:no-repeat;background-position:top;background-size:100% 1px;}

/* ============================== FULL ==================================== */

.ft--full.ft--light{background:#191524;color:#A8A2B8;}
.ft--full.ft--light .ft__inner{padding:56px 32px 30px;}
.ft--full.ft--nocturne .ft__inner{padding:44.8px var(--space-8) var(--space-6);}

/* Sechs Spalten: Marke · Explore · Market · Learn · Legal · Grid.
   Beim Schmalerwerden wird NICHTS versteckt. Die Kopfzeile gibt Dinge auf,
   wenn der Platz eng wird · deshalb ist die Fußzeile der Rückfall, der es
   nicht darf. Sie darf hoch werden, aber keine Tür verlieren. Legal und Grid
   stehen zuletzt in der Quelle und landen damit auf dem Telefon unten, wo
   die Leute sie suchen. */
.ft__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr .85fr 1.2fr;gap:36px;}
@media (max-width:1080px){.ft__cols{grid-template-columns:1.4fr 1fr 1fr;row-gap:40px;}}
@media (max-width:680px){.ft__cols{grid-template-columns:1fr 1fr;}
  .ft__brand{grid-column:1 / -1;}}
@media (max-width:420px){.ft__cols{grid-template-columns:1fr;}}

.ft__mark{display:inline-flex;align-items:center;gap:10px;}
.ft__wm{font-size:18px;font-weight:700;letter-spacing:-.3px;}
.ft--light .ft__wm{color:#FFFFFF;}
.ft--light .ft__wm span{color:#8B6BFF;}
.ft--nocturne .ft__wm{color:var(--color-text);}

.ft__claim{margin:16px 0 0;font-size:14.5px;line-height:1.6;max-width:30ch;}
.ft--nocturne .ft__claim{color:var(--color-neutral-400);}
.ft__made{font-family:var(--ft-mono);margin:14px 0 0;font-size:11px;
  letter-spacing:.05em;color:#9A93AD;}

/* Die Spaltenköpfe folgen dem Section-Label: mono, 11px, 500, .167em,
   Versalien. Die helle Section-Farbe #5C5C67 wäre auf dem dunklen Band
   unlesbar, deshalb behält der Kopf auf dunklem Grund Maß und Laufweite und
   nimmt den dunklen Gedämpft-Wert. Diese Ausnahme ist Absicht. */
.ft__head{font-family:var(--ft-mono);font-size:11px;font-weight:500;
  letter-spacing:.167em;text-transform:uppercase;}
.ft--light .ft__head{color:#9A93AD;}
.ft--nocturne .ft__head{color:var(--color-neutral-500);}

.ft__link{display:block;font-size:14.5px;line-height:1.35;margin-top:12px;
  text-decoration:none;}
.ft--light .ft__link{color:#C7C2D6;}
.ft--light .ft__link:hover{color:#FFFFFF;}
.ft--nocturne .ft__link{color:var(--color-neutral-300);}
.ft--nocturne .ft__link:hover{color:var(--color-text);}

/* Die Adresse ist EIN Wort und soll auf EINER Zeile stehen.

   Die Vorlage sagt `word-break:break-all`. Das senkt die Mindestbreite des
   Inhalts auf ein einzelnes Zeichen · und weil eine `1.2fr`-Spalte in
   Wahrheit `minmax(auto, 1.2fr)` ist, darf sie dann beliebig schmal werden.
   Ergebnis: "grid.skimi3d.com:800" und darunter "2".

   Ohne Bruchstelle ist der min-content die volle Wortbreite, und die Spalte
   waechst von selbst, bis die Adresse hineinpasst. Das Raster loest es also
   selbst, wenn man es nur laesst.

   `overflow-wrap:break-word` bleibt als Netz und ist dafuer die richtige
   Wahl: es zaehlt laut Spezifikation NICHT in die Mindestbreite hinein
   (anders als `anywhere`). Gebrochen wird also nur, wenn es wirklich nicht
   anders geht. */
.ft__addr{font-family:var(--ft-mono);font-size:13.5px;margin-top:12px;
  word-break:normal;overflow-wrap:break-word;}
.ft--light .ft__addr{color:#FFFFFF;}
.ft--nocturne .ft__addr{color:var(--color-text);}

/* Der Kopier-Knopf ist eine Zugabe, kein Zugang: die Adresse steht als Text
   daneben. Ohne JavaScript bleibt er verborgen, statt still nichts zu tun. */
.ft__copy{display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-family:var(--ft-mono);font-size:11.5px;font-weight:500;cursor:pointer;}
.ft--light .ft__copy{color:#C4B4FF;background:rgba(110,75,255,.16);
  border:1px solid rgba(110,75,255,.34);border-radius:8px;padding:6px 11px;}
.ft--light .ft__copy:hover{background:rgba(110,75,255,.24);}
.ft--nocturne .ft__copy{font-size:11.5px;padding:5px 11px;}

.ft__hg{font-family:var(--ft-mono);font-size:11px;letter-spacing:.05em;
  margin-top:13px;}
.ft--light .ft__hg{color:#9A93AD;}
.ft--nocturne .ft__hg{color:var(--color-neutral-500);}

.ft__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.ft__bottom span{font-family:var(--ft-mono);font-size:12px;}
.ft--full.ft--light .ft__bottom{margin-top:48px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);}
.ft--full.ft--light .ft__bottom span{color:#9A93AD;}
.ft--full.ft--nocturne .ft__bottom{margin-top:var(--space-8);
  padding-top:var(--space-4);
  background-image:linear-gradient(to right,transparent,var(--color-divider) 24px,
    var(--color-divider) calc(100% - 24px),transparent);
  background-repeat:no-repeat;background-position:top;background-size:100% 1px;}
.ft--full.ft--nocturne .ft__bottom span{color:var(--color-neutral-500);}

/* ============================== SLIM ==================================== */

.ft--slim .ft__inner{padding:var(--space-6) var(--space-8);display:flex;
  align-items:center;justify-content:space-between;gap:var(--space-6);
  flex-wrap:wrap;}
.ft__stamp{font-family:var(--ft-mono);font-size:12px;color:var(--color-neutral-500);}
.ft__row{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;
  font-size:13.5px;}
.ft--slim .ft__row a{color:var(--color-neutral-300);text-decoration:none;}
.ft--slim .ft__row a:hover{color:var(--color-text);}
.ft--slim .ft__note{color:var(--color-neutral-500);}

/* ============================== LINE ==================================== */

.ft--line{background:#FAFAFB;}
.ft--line .ft__inner{padding:16px 32px 22px;border-top:1px solid #EAE8EE;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:12.5px;}
.ft__legal{display:flex;gap:18px;flex-wrap:wrap;color:#5C5C67;}
.ft__legal a{color:#5C5C67;text-decoration:none;}
.ft__legal a:hover{color:#6E4BFF;}

/* DIE RECHTE ZEILE · ein Satz, der hier wahr ist und sonst nirgends. Sie darf
   leer sein (Verkäufer-Bereich). Sie ist INHALT, kein Platzhalter: auf der
   Anmeldeseite ist sie eine Datenschutz-Aussage, und eine unlesbare Aussage
   ist schlechter als keine. Deshalb #5C5C67 wie die Links daneben und nicht
   der Platzhalter-Ton #B7B7C2, in dem sie vorher stand. */
.ft__note{font-family:var(--ft-mono);font-size:11.5px;}
.ft--line .ft__note{color:#5C5C67;}

/* Ohne eigenen Rahmen · für die Anmeldeseite, deren Spalte Breite und
   Polsterung schon setzt. Die Linie darüber bleibt, der Grund entfällt. */
.ft--bare{background:none;}
.ft--bare .ft__inner{max-width:none;padding-left:0;padding-right:0;}

/* Falls das Blatt einmal ohne header.css geladen wird (die Anmeldeseite
   bringt alles selbst mit), muss `hidden` trotzdem gewinnen. */
.ft [hidden]{display:none !important;}