/* 12 Fuß (Entwurf, 23.10.2026, zweite Fassung nach den Referenzen): steht für sich, auch ohne das Erstgespräch darüber. Aufbau nach Heron: Zellen aus
   1-px-Linien mit Plus an den Knoten, alles klein und leise gesetzt; die Wortmarke als Umrisszeichnung, unter der Maus setzt sich ein Tintenfleck in
   die Buchstaben (gleicher Filter wie Herons Fuß). Keine Auftrittsbewegung. Kontakt und Pflichtseiten wortgleich aus dem Konzept, Spalten mit den
   geplanten Adressen aus dem Websitekonzept. Farben über die Kanäle. Skript: quelle/fuss.js. */
.fuss { position: relative; padding: 0 var(--rand) clamp(16px, 1.5vw, 28px); background: var(--nacht); color: var(--sand); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.333fr)); border-left: 1px solid var(--zl); border-top: 1px solid var(--zl); }
.fuss-zelle { position: relative; padding: clamp(24px, 1.4vw + 12px, 36px) clamp(18px, 1vw + 10px, 28px); border-right: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.fuss-zelle::before, .fuss-zelle::after { content: ""; position: absolute; left: -1px; top: -1px; width: 11px; height: 11px; translate: -5px -5px; pointer-events: none;
  background: linear-gradient(var(--zp), var(--zp)) 5px 0 / 1px 11px no-repeat, linear-gradient(var(--zp), var(--zp)) 0 5px / 11px 1px no-repeat; }   /* Plus an der Ecke */
.fuss-zelle::after { display: none; }

.fuss-kontakt { display: grid; gap: 22px; align-content: start; font-size: 15px; line-height: 1.5; letter-spacing: -.005em; }
.fuss-logo { display: inline-flex; width: 118px; color: var(--sand); text-decoration: none; }
.fuss-logo .lockup { width: 100%; height: auto; display: block; }
.fuss-kontakt address, .fuss-kontakt p { margin: 0; font-style: normal; color: var(--leise); }
.fuss-kopf { margin: 0 0 16px; color: rgb(var(--vg-k) / .5); font: 500 13px/1.2 var(--schrift); letter-spacing: -.003em; }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss a { color: inherit; text-decoration: none; }
/* Links wie überall auf der Seite: die Linie lädt beim Zeigen unter dem Text von links */
.fuss-link { position: relative; display: inline-block; padding: 2px 0; font-size: 15px; letter-spacing: -.005em; color: rgb(var(--vg-k) / .82); transition: color .3s var(--aus); }
.fuss-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale var(--raus); }
@media (hover: hover) and (pointer: fine) {
  .fuss-link:hover { color: var(--sand); }
  .fuss-link:hover::after { scale: 1 1; transform-origin: left; transition: scale .6s var(--lade); }
}
.fuss-kontakt .fuss-link { color: var(--leise); }

/* unten: links Rechte und Pflichtseiten (5/12), rechts die Wortmarke (7/12), wie die Teilung der Kopfleiste */
.fuss-rest { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; color: rgb(var(--vg-k) / .5); font-size: 13px; letter-spacing: -.003em; }
.fuss-rest p { margin: 0; }
.fuss-pflicht { display: flex; flex-wrap: wrap; gap: 10px 20px; }   /* mit Cookie-Einstellungen vier Links: am Handy umbrechen (28.10.) */
.fuss-rest .fuss-link { font-size: 13px; color: rgb(var(--vg-k) / .6); }
.fuss-wort { grid-column: 2 / -1; padding-top: clamp(32px, 3vw + 12px, 64px); padding-bottom: clamp(24px, 2vw + 10px, 44px); }
.fuss-wort svg { display: block; width: 100%; height: auto; overflow: visible; }
.fw-tinte { position: absolute; left: 0; top: 0; pointer-events: none; }
.fuss-wort .fw-tinte { left: var(--px); top: var(--pt); width: calc(100% - 2 * var(--px)); }
.fuss-wort { --px: clamp(18px, 1vw + 10px, 28px); --pt: clamp(32px, 3vw + 12px, 64px); }
.fw-umriss path { fill: none; stroke: rgb(var(--vg-k) / .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fw-tinte path { fill: var(--sand); }
.fw-tinte .fw-punkt { fill: var(--sonne); }

@media (max-width: 1100px) {
  .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-kontakt { grid-column: 1 / -1; }
  .fuss-rest { grid-column: 1 / -1; order: 2; }
  .fuss-wort { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-spalte:nth-of-type(3) { grid-column: 1 / -1; }
}
.fuss-cookies { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }   /* öffnet das Banner von Consent Pro (Einwilligung.astro), 28.10. */