/* pit.css — Footer mit greifbaren Objekten (Vorbild humaan.com, vermessen 2026-09-19: Headline links mit Pfeil,
   Kontaktspalten, Objekte fallen ein und ruhen auf einer Bodenlinie ueber der Rechtszeile, greif- und werfbar).
   Luvirel-System: Anton/Barlow, Weiss/Schwarz ohne Akzent, 24px-Raender, scharfe Kanten.
   Ohne JS / bei reduzierter Bewegung stehen die Objekte geordnet auf der Bodenlinie (kein Fall, kein Greifen).
   Markup kommt aus tools/_footer-faecher.mjs — NIE von Hand. Physik: pit.js + vendor/matter.min.js.
   Seit 21.09. abends (Leo): Wechselwort in Zeile 2 der Headline (Vorbild humaan.com, vermessen tools/_ref-humaan-wort.mjs),
   Block-Button „Projekt anfragen" in der Kontakt-Spalte statt des 12px-Textlinks, Etiketten ohne Festpreis/Remote.
   Leos Wahl 21.09. spaet: ohne Pfeil in der Headline, Zeilenabstand --pf-lh 1.04 (statt .92 der Site), weicherer Wechsel. */
.pitf { --pf-bg: var(--peak); --pf-fg: #fff; --pf-line: rgba(255,255,255,.28);
        background: var(--pf-bg); color: var(--pf-fg); min-height: 88vh; display: flex; flex-direction: column;
        padding-top: var(--pf-luft); padding-bottom: 24px; align-items: stretch; text-align: left;
        --pf-luft: var(--vor-fuss, 128px); }   /* Luft Oberkante → Headline = Headline → Knopf (Leo 28.09. abends); Fußzeile → Ende 24 (Leiter 24 / 48) */
.pitf[data-ground="light"] { --pf-bg: #fff; --pf-fg: #000; --pf-line: rgba(0,0,0,.22); }

/* Buehne: alles ueber der Bodenlinie; ihre Unterkante IST der Boden der Physik */
.pitf-stage { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start;
              border-bottom: 1px solid var(--pf-line); padding-bottom: var(--pit-zone, 0px); }
/* Knopf unter der Headline (Leo 28.09. abends: „mach den button unter ‚deine website'"): Luft darüber = Luft über der Headline (--pf-luft),
   Breite = Spaltenmodul; die Spalten stehen am Boden der Bühne (margin-top:auto), mindestens 96 unter dem Knopf */
.pitf-cta { position: relative; z-index: 3; mix-blend-mode: difference; margin-top: 0; margin-bottom: 96px; }
/* Luft an der TINTE, nicht an der Box: Anton bei lh 1.04 trägt die Kappenlinie 0.075 em unter der Box-Oberkante und die Grundlinie 0.104 em über
   der Box-Unterkante (Pixel-Scan 28.09., 1440 + 1710; mit 0.075/0.104 blieben 129,7/127,0, mit 0.08/0.096 128/128 ±1) — Range-Rects liefern hier die
   Inhaltsfläche (1,47 em) und taugen nicht. Die Headline zieht sich um diese Beträge in ihr Polster, der Knopf folgt in --pf-luft unter der Grundlinie:
   oben wie unten --vor-fuss, gemessen an der Kappen-/Grundlinie (Wächter tools/_fuss-luft-kette.mjs --scan). */
.pitf-stage > h2 { margin: -0.08em 0 calc(var(--pf-luft) - 0.096em); }
.pitf-cta .pitf-btn { width: var(--pf-col, 220px); }

/* Textebene liegt UEBER den Objekten und mischt per Differenz: Schrift bleibt auf jedem Untergrund lesbar
   (weiss auf dem Grund, schwarz auf einem weissen Objekt) und jeder Link klickbar, egal was darauf liegt
   (Jury 19.09.: deckend weisse Objekte loeschten weisse Schrift). Differenz braucht Weiss als Schriftfarbe —
   auch auf hellem Grund (Weiss auf Weiss ergibt Schwarz). Nicht fixed, deshalb Safari-unkritisch. */
.pitf h2, .pitf-cols, .pitf .pitf-hint { position: relative; z-index: 3; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.pitf h2 a, .pitf-cols a { pointer-events: auto; }
.pitf-cta { pointer-events: none; } .pitf-cta a { pointer-events: auto; }
.pitf h2 { font-size: clamp(52px, 8vw, 128px); line-height: var(--pf-lh, 1.04); }   /* Groesse des bisherigen Outro-h2: EINE Titelgroesse je Ebene; Zeilenabstand groesser als die Site-.92 (Leo 21.09.: „ein bisschen groesser"; Faecher .92/1.04/1.14 → ?lh=) */
.pitf h2 a { display: inline-block; }
.pitf h2 .ln { clip-path: inset(-.3em 0 -.08em 0); }        /* Zeilenmaske wie site.css (der Pfeil, fuer den sie rechts offen war, ist seit 21.09. spaet weg) */

/* ── Wechselwort (Vorbild humaan.com, vermessen 21.09.): alle Woerter in EINER Zelle, das aktive steht, die anderen warten
   oben (-25 % der Zeile, unsichtbar); beim Wechsel sinkt das alte nach unten hinaus (0,2 s), das neue kommt von oben
   herunter (0,25 s, ab +0,1 s) — pit.js schaltet. Die Zellenbreite folgt der Tinte des aktiven Worts (--wt-w aus pit.js),
   damit der Handy-Pfeil dahinter mitgeht statt am breitesten Wort zu kleben. Ohne JS / bei reduzierter Bewegung steht
   das erste Wort (is-live fehlt). Die Wechselzeile oeffnet ihre Maske nach unten, sobald der Ticker laeuft (is-ticking,
   fruehestens 2,85 s nach dem Eintritt — der Reveal ist dann durch): das alte Wort geht .23em unter die Grundlinie. ── */
.pitf h2 .wt { display: inline-grid; vertical-align: baseline; text-align: left; width: var(--wt-w, auto); transition: width .35s var(--ease); }
.pitf h2 .wt-w { grid-area: 1 / 1; display: block; white-space: nowrap; opacity: 0; transform: translateY(-25%); }
.pitf h2 .wt:not(.is-live) .wt-w:first-child { opacity: 1; transform: none; }
/* Dauern kommen aus pit.js (data-takt → --wt-in/--wt-out; Standard weicher als das Vorbild, Leo 21.09.: „ein bisschen smoother":
   raus 0,45 s, rein 0,6 s ab +0,2 s; Vorbild war 0,2 / 0,25 ab +0,1). Das alte Wort verliert seine Deckkraft schneller
   (65 % der Zeit, ease-in) als es sinkt — sonst stehen bei langen Dauern altes und neues Wort als Doppelbild uebereinander
   (Iteration 3: „APP" ueber „IDEE"); das neue kommt erst, wenn das alte fast weg ist (Pause = 45 % der Raus-Dauer). */
.pitf h2 .wt-w.is-on { opacity: 1; transform: none; transition: opacity calc(var(--wt-in, .6s) * .8) var(--ease), transform var(--wt-in, .6s) var(--ease); }
.pitf h2 .wt-w.is-out { opacity: 0; transform: translateY(25%); transition: opacity calc(var(--wt-out, .45s) * .65) ease-in, transform var(--wt-out, .45s) cubic-bezier(.45, 0, .2, 1); }
.pitf.is-ticking h2 .wt-ln { clip-path: inset(-.3em 0 -.3em 0); }

/* Spalten als EIN Modul --pf-col (220 = Knopf 163 Tinte + 2 × 28 Polster; „Stuttgart & Deutschlandweit" braucht 187): gleicher Titel-Pitch
   268 = 220 + 48 (Leo 28.09.: „Abstände zwischen Kontakt/Studio/Stuttgart sind unterschiedlich" — max-content + 64 machte die Lücken der
   BOXEN gleich, der Pitch der Titel war 283 / 163, weil der Knopf Spalte 1 auf 219 zog; gemessen tools/_fuss-review.mjs). Der Knopf füllt das
   Modul (justify-self: stretch), Wächter: Knopf-Tinte + Polster ≤ --pf-col, Titel ≤ --pf-col. 3 × 220 + 2 × 48 = 756 ≈ die Mauer (45 %). */
.pitf-cols { display: grid; grid-template-columns: repeat(3, var(--pf-col, 220px)); grid-template-areas: "k s d";
             gap: 0 var(--pf-colgap, 48px); padding-bottom: 44px; margin-top: auto; font-size: 15px; line-height: 1.62; }   /* 44 + 1 px Linie + 3 px Inhaltsfläche unter der letzten Zeile = 48 an der Tinte; auto = am Boden der Bühne */
.pitf-cols > div:nth-child(1) { grid-area: k; } .pitf-cols > div:nth-child(2) { grid-area: s; } .pitf-cols > div:nth-child(3) { grid-area: d; }
.pitf-cols h3 { font-family: Barlow, Arial, sans-serif; font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 6px; white-space: nowrap; }   /* „Stuttgart & Deutschlandweit" (187) passt ins Modul 220; nie umbrechen */
.pitf-cols p { color: rgba(255,255,255,.72); font-weight: 300; }
.pitf-cols a:not(.pitf-btn) { position: relative; color: #fff; font-weight: 400; }   /* :not(.pitf-btn): sonst schlägt (0,1,1) die Schrift der .btn-Familie (0,1,0) */
.pitf-cols a:not(.pitf-btn)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor;
                      transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pitf-cols a:not(.pitf-btn):hover::after, .pitf-cols a:not(.pitf-btn):focus-visible::after { transform: scaleX(1); }
.pitf-cols .tl { margin-top: 10px; color: #fff; }
/* „Projekt anfragen" = die Knopf-Familie der Site (.btn aus site.css; seit 28.09. — Leo 24.09.: EIN Button-Design für die ganze Website):
   Höhe, Polster, Schrift, Pfeil-Lücke und Hover kommen aus .btn, hier stehen nur Lage im Raster und Breite (= Spaltenmodul --pf-col).
   Auf dem dunklen Grund .is-hell.is-leer (weißer 1-px-Umriss, beim Hover fällt Weiß von unten ein, die Schrift kippt = Leos Wahl C, 22.09.);
   in der Differenz-Ebene bleibt er auf jedem Etikett lesbar. 21 px unter den Kontaktzeilen = 24 px an der Zeilen-Tinte (Leiter 28.09.). */
.pitf-cols .pitf-btn { grid-area: b; justify-self: stretch; align-self: start; margin: 21px 0 0; }   /* nur noch Fächer b/d/e/f (Knopf steht seit 28.09. abends unter der Headline) */
.pitf-cols .pitf-btn::after, .pitf-cta .pitf-btn::after { content: none; }
/* Fächer-Fassungen b/d/e/f (nur Vorschau, --btn-faecher) tragen die alten Maße selbst: */
.pitf-cols .pitf-btn:not(.btn) { display: inline-flex; align-items: center; justify-content: space-between; height: var(--btn-h, 56px);
                       padding: 0 var(--btn-px, 28px); background: #fff; color: #000; font-family: Barlow, Arial, sans-serif;
                       font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
                       white-space: nowrap; transition: background .35s ease; }
.pitf-cols .pitf-btn:not(.btn) .arr { display: inline-block; margin-left: var(--btn-gap, 14px); transition: transform .5s var(--ease); }
.pitf-cols .pitf-btn:not(.btn):hover, .pitf-cols .pitf-btn:not(.btn):focus-visible { background: #ededed; }
.pitf-cols .pitf-btn:not(.btn):hover .arr, .pitf-cols .pitf-btn:not(.btn):focus-visible .arr { transform: translateX(6px); }
.pitf a:focus-visible { outline-color: #fff; }        /* in der Differenz-Ebene waere der schwarze Site-Ring unsichtbar */

/* ── Button-Richtungen (Faecher 22.09., Leo: „damit es zur brand passt und designerisch aussieht"; Markup im Generator).
   Gemeinsam: Barlow/Anton der Marke, scharfe Kanten, Weiss als Tinte, Tippziel >= 44px, Bewegung nur auf Hover/Fokus. ── */
/* B · Zeile: kein Kasten. Anton ueber einer Linie, die beim Hover von rechts hinaus und von links neu einlaeuft. */
.pitf-cols .pitf-btn.bt-b { display: block; height: auto; padding: 0 0 12px; background: none; color: #fff;
                            font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: clamp(22px, 1.7vw, 28px);
                            font-weight: 400; letter-spacing: var(--tight); text-transform: uppercase; }
.pitf-cols .pitf-btn.bt-b .bt-t { display: block; padding-top: 12px; }
.pitf-cols .pitf-btn.bt-b .arr { margin-left: .3em; }
.pitf-cols .pitf-btn.bt-b .bt-l { display: block; height: 2px; margin-top: 12px; background: currentColor;
                                  transform-origin: right; transition: transform .45s var(--ease); }
.pitf-cols .pitf-btn.bt-b:hover .bt-l, .pitf-cols .pitf-btn.bt-b:focus-visible .bt-l { animation: bt-sweep .7s var(--ease); }
@keyframes bt-sweep { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; }
                      50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.pitf-cols .pitf-btn.bt-b:hover, .pitf-cols .pitf-btn.bt-b:focus-visible { background: none; }
.pitf-cols .pitf-btn.bt-b:hover .arr, .pitf-cols .pitf-btn.bt-b:focus-visible .arr { transform: translateX(.16em); }

/* C · Umriss: 1px-Rahmen, beim Hover faellt Weiss von unten ein (Pseudo-Element, damit die Schrift darueber kippt).
   = Familie .btn.is-leer.is-hell aus site.css (24.09.): Wort + Pfeil mittig und 14 px beieinander — am Handy spannt der Knopf
   die ganze Zeile, dort stand der Pfeil vorher an der rechten Kante (Leo: „nicht so ein grosser Abstand zum Pfeil“). */
.pitf-cols .pitf-btn.bt-c { justify-content: center; gap: var(--btn-gap, 14px); position: relative; overflow: hidden; background: none; color: #fff; box-shadow: inset 0 0 0 1px #fff;
                            transition: color .35s var(--ease); z-index: 0; }
.pitf-cols .pitf-btn.bt-c .arr { margin-left: 0; }   /* Abstand trägt die Lücke (gap) wie bei .btn — eine Signatur, nicht Rand hier, Lücke dort */
.pitf-cols .pitf-btn.bt-c::before { content: ""; position: absolute; inset: 0; background: #fff; z-index: -1;
                                    transform: translateY(101%); transition: transform .5s var(--ease); }
.pitf-cols .pitf-btn.bt-c:hover, .pitf-cols .pitf-btn.bt-c:focus-visible { background: none; color: #000; }
.pitf-cols .pitf-btn.bt-c:hover::before, .pitf-cols .pitf-btn.bt-c:focus-visible::before { transform: translateY(0); }

/* D · Feld: Flaeche + eigenes Pfeil-Quadrat rechts (Trennkante); beim Hover wandert der Pfeil hinaus, der zweite kommt nach. */
.pitf-cols .pitf-btn.bt-d { padding: 0 0 0 26px; }
.pitf-cols .pitf-btn.bt-d .bt-q { position: relative; display: block; width: 52px; height: 52px; margin-left: 26px;
                                  overflow: hidden; border-left: 1px solid rgba(0,0,0,.22); }
.pitf-cols .pitf-btn.bt-d .bt-a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                                  font-size: 17px; transition: transform .45s var(--ease); }
.pitf-cols .pitf-btn.bt-d .bt-a:last-child { transform: translateX(-100%); }
.pitf-cols .pitf-btn.bt-d:hover .bt-a:first-child, .pitf-cols .pitf-btn.bt-d:focus-visible .bt-a:first-child { transform: translateX(100%); }
.pitf-cols .pitf-btn.bt-d:hover .bt-a:last-child, .pitf-cols .pitf-btn.bt-d:focus-visible .bt-a:last-child { transform: translateX(0); }

/* E · Kreis: Wort und Pfeil-Kreis nebeneinander (zitiert die Invert-Linse des Cursors), ohne Flaeche. */
.pitf-cols .pitf-btn.bt-e { height: 48px; padding: 0; background: none; color: #fff; gap: 16px; letter-spacing: .1em; }
.pitf-cols .pitf-btn.bt-e .bt-c { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
                                  border-radius: 50%; box-shadow: inset 0 0 0 1px #fff; font-size: 17px;
                                  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.pitf-cols .pitf-btn.bt-e:hover, .pitf-cols .pitf-btn.bt-e:focus-visible { background: none; }
.pitf-cols .pitf-btn.bt-e:hover .bt-c, .pitf-cols .pitf-btn.bt-e:focus-visible .bt-c { background: #fff; color: #000; transform: translateX(6px); }

/* F · Etikett: Flaeche wie A, Beschriftung in Anton wie die Etiketten der Mauer — der Aufruf wird ihr Gegenstueck.
   Groesse aus der Mauer abgeleitet (dort clamp(30px, 3.3vw, 56px)), hier eine Stufe kleiner, damit er neben den
   15px-Kontaktzeilen nicht zur zweiten Headline wird. */
.pitf-cols .pitf-btn.bt-f { height: auto; min-height: 44px; padding: .3em .34em .26em; font-family: Anton, Impact, "Arial Narrow", sans-serif;
                            font-size: clamp(22px, 1.7vw, 28px); font-weight: 400; line-height: 1; letter-spacing: var(--tight); }
/* min-height + Innenluft: Anton traegt bei 27px nur 36px Kastenhoehe — unter dem 44px-Tippziel (gemessen 22.09.) */
.pitf-cols .pitf-btn.bt-f .arr { margin-left: .34em; font-size: .72em; }

@media (prefers-reduced-motion: reduce) {
  .pitf-cols .pitf-btn.bt-b:hover .bt-l, .pitf-cols .pitf-btn.bt-b:focus-visible .bt-l { animation: none; }
  .pitf-cols .pitf-btn * { transition: none !important; }
}

/* Hinweis: Bildunterschrift am Fuss der Objekte, auf der Bodenlinie links NEBEN dem Objektblock
   (Jury: oben rechts las es sich als Nav-Eintrag, am Handy als Unterzeile der Headline; UEBER der Wortmarke waere es ein Kicker) */
.pitf .pitf-hint { position: absolute; margin: 0; white-space: nowrap; bottom: 12px; right: calc(var(--pit-left, var(--pit-w, 50%)) + 26px); }   /* --pit-left misst pit.js; ohne JS gilt die Sollbreite */
/* Seit 29.09. (Leo: „mach den hinweis neben dem kasten stuttgart"): pit.js setzt --pit-hint-right (Buehne-rechts → linke Kante der Reihe, in der
   Stuttgart ruht) und --pit-hint-top (Reihenmitte minus halbe Hinweis-Hoehe — KEIN translateY: transform gehoert dem Vorhang-Nachlauf); der Hinweis
   steht 26 px links daneben, auf der Reihenmitte. Am Handy ist Stuttgart aus (hm), dann gilt die Fussnoten-Lage der Handy-Regel; ohne JS ebenso. */
.pitf-stage.has-hint-anchor .pitf-hint { bottom: auto; top: var(--pit-hint-top); right: calc(var(--pit-hint-right) + 26px); }

.pitf.is-played .pitf-hint { opacity: 0 !important; transition: opacity .3s ease; }
.pitf > footer { width: 100%; margin-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px;
                 font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.pitf[data-ground="light"] > footer { color: var(--grey); }
.pitf > footer nav { display: flex; gap: 28px; flex-wrap: wrap; }
.pitf > footer a { transition: color .3s; }
.pitf > footer a:hover { color: var(--pf-fg); }

/* ── Pit: Objekte. Ruhelage = geordnet auf der Bodenlinie (rechts), so steht es auch ohne JS ── */
.pit { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pit-row { position: absolute; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: flex-end; }
.pit-o { flex: none; display: block; color: var(--pf-fg); pointer-events: auto; touch-action: none;
         -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; will-change: transform; }
.pit-o svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; pointer-events: none; }

/* Drei Gestalten (Bereichsgrenzen 900 / 1439): ab 1440px liegt der Pit RECHTS NEBEN den Kontaktspalten wie beim Vorbild
   (--pit-zone 0); darunter wuerden Wortmarke/Stapel vor den Spalten landen (die Spalten skalieren nicht mit, die Objekte
   schon) — dort bekommt der Pit eine eigene Landezone UNTER den Spalten.
   --pit-w = Breite des Objektblocks (Anker des Hinweises), 2.6957 = Tintenbreite von LUVIREL in em (make-pit-glyphs). */
.pitf-stage[data-set~="letters"] { --pit-w: calc((100vw - 2 * var(--pad)) * .45); --pit-fs: calc(var(--pit-w) / 2.6957); }   /* .45: bei 1440px bleiben 24px+ zwischen Spalte 3 und Hinweis */
.pitf-stage[data-set="labels"] { --pit-w: 50%; }
.pitf-stage[data-set="dots"] { --pit-w: 46%; }

/* A · Buchstaben: Breite/Hoehe/Abstand je Glyphe in em (Generator) */
.pit-o.is-letter { width: calc(var(--pit-fs) * var(--w)); height: calc(var(--pit-fs) * var(--h)); margin-left: calc(var(--pit-fs) * var(--ml)); }
/* B · Etiketten: gefuellte Bloecke, Schrift in der Gegenfarbe, scharfe Kanten; Ruhelage = Mauer, Reihen liegen aufeinander */
.pit[data-set~="labels"] .pit-row { flex-wrap: wrap-reverse; gap: 0 6px; max-width: var(--pit-w); }
.pit-o.is-label { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: clamp(30px, 3.3vw, 56px); line-height: 1;
                  text-transform: uppercase; letter-spacing: var(--tight); white-space: nowrap;
                  background: var(--pf-fg); color: var(--pf-bg); padding: .2em .3em .16em; }
/* C · Punkte: das ●-Zeichen der Labels als Baelle */
.pit[data-set~="dots"] .pit-row { gap: 8px; flex-wrap: wrap-reverse; max-width: 62%; }
.pit-o.is-dot { width: var(--d); height: var(--d); border-radius: 50%; background: var(--pf-fg); }
/* Mix: die Punkte gehoeren nicht in die Ruhe-Reihe der Wortmarke (sie schoeben sie nach links vor die Spalten) —
   messbar bleiben sie (absolute Elemente haben eine Groesse), sichtbar werden sie erst, wenn die Physik uebernimmt */
.pit[data-set~="letters"]:not(.is-live) .pit-o.is-dot { position: absolute; right: 0; bottom: 0; visibility: hidden; }

/* live: pit.js hat uebernommen — Objekte absolut, Position kommt per transform aus der Physik */
.pit.is-live .pit-row { position: static; display: contents; }
.pit.is-live .pit-o { position: absolute; left: 0; top: 0; margin: 0; }
.pit.is-armed:not(.is-dropped) .pit-o { visibility: hidden; }
.pit-o.is-held { z-index: 3; }
html.pit-dragging, html.pit-dragging * { -webkit-user-select: none !important; user-select: none !important; }
html:not(.alx-cursor) .pit.is-live .pit-o { cursor: grab; }
html:not(.alx-cursor) .pit.is-live .pit-o.is-held { cursor: grabbing; }

@media (max-width: 1439px) {
  /* --pit-zone hier ist die Schaetzung fuer No-JS; pit.js setzt sie aus der gemessenen Blockhoehe (+44px) */
  .pitf { min-height: 0; }   /* padding-top folgt --pf-luft (seit 28.09. spät; vorher 148) */
  .pitf-cols { margin-top: auto; }
  .pitf-stage[data-set~="letters"] { --pit-w: calc((100vw - 2 * var(--pad)) * .6); --pit-zone: calc(var(--pit-fs) * .86 + 40px); }
  .pitf-stage[data-set~="letters"][data-set~="dots"] { --pit-zone: calc(var(--pit-fs) * .86 + 110px); }
  .pitf-stage[data-set="labels"] { --pit-w: 62%; --pit-zone: calc(13.5vw + 60px); }
  .pitf-stage[data-set="dots"] { --pit-w: 60%; --pit-zone: 21vw; }
  .pit[data-set~="dots"] .pit-row { max-width: 100%; }
  .pitf-cols { padding-bottom: 0; }
}
@media (max-width: 900px) {
  .pitf { padding-bottom: 24px; }   /* --pf-luft folgt --vor-fuss (96 am Handy) */
  .pitf-cta { margin-bottom: 64px; } .pitf-cta .pitf-btn { width: 100%; }   /* Familie: am Handy spaltenbreit */
  .pitf h2 { font-size: 13.5vw; }
  .pitf-cols { grid-template-columns: 1fr 1fr; grid-template-areas: "k s" "d d"; gap: 21px 0; margin-top: auto; }   /* 24-Raster (28.09.): 21 + Halbzeile 3 = 24 an der Zeilen-Tinte */
  .pitf-cols .pitf-btn { margin: 0; }                      /* nur Fächer b/d/e/f */
  .pitf-cols .pitf-btn.bt-b { font-size: 26px; }
  .pitf-cols .pitf-btn.bt-d { width: max-content; }
  .pitf-cols a:not(.pitf-btn) { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .pitf-cols a:not(.pitf-btn)::after { bottom: 11px; }
  .pitf-cols a.tl { padding-block: 16px; margin-block: -6px -16px; }      /* 12px-Link: 16+12+16 = 44px Tippziel */
  .pitf-cols a.tl::after { bottom: 14px; }
  .pitf > footer { justify-content: flex-start; margin-top: 63px; row-gap: 28px; }   /* Linie → Hinweis 24 → © 24 (Hinweis-Tinte 15 hoch, bottom -42, Zeile 18); Links im Takt 28 */
  .pitf > footer a { display: inline-block; padding: 15px 8px; margin: -15px -8px; }   /* „AGB" ist 23px breit: +8px je Seite (Lücke 28px bleibt 12px frei) — df-tippziele.mjs */
  /* Handy: Wortmarke Rand zu Rand (Tinte = Innenbreite; die Drehsperre bis zur Landung verhindert das Klemmen) */
  .pitf-stage[data-set~="letters"] { --pit-w: calc(100vw - 2 * var(--pad)); --pit-zone: calc(var(--pit-fs) * .86 + 56px); }
  .pitf-stage[data-set~="letters"][data-set~="dots"] { --pit-zone: calc(var(--pit-fs) * .86 + 96px); }
  .pitf-stage[data-set="labels"] { --pit-w: 100%; --pit-zone: 62vw; }
  .pitf-stage[data-set="dots"] { --pit-zone: 52vw; }
  .pit-o.is-label { font-size: 7.6vw; }
  .pit-o.is-label.hm { display: none; }                  /* Handy: sechs statt sieben Etiketten (Stuttgart steht schon in den Spalten; 3 Reihen à 2) */
  /* Hinweis als Bildunterschrift UNTER der Bodenlinie */
  .pitf .pitf-hint { right: auto; left: 0; bottom: -42px; }   /* 24 unter der Linie (28.09.) */
}