/* ══════════════════════════════════════════════════════════════════════
   FUSSZEILE, vier Spalten
   Umsetzung der Vorlage Footer4Col fuer die laufende Seite.

   Die Vorlage ist React mit Tailwind. Diese Seite ist ein statischer
   Bricks-Export ohne Node und ohne Tailwind. Die Komponente liegt
   unter components/ui/footer-column.tsx fuer den spaeteren Umbau, hier
   steht dieselbe Struktur als reines CSS, damit sie sofort laeuft.

   Uebersetzung der Vorlagenklassen:
     grid-cols-1 lg:grid-cols-3      -> .kamui-fuss__raster
     lg:col-span-2 md:grid-cols-4    -> .kamui-fuss__spalten
     border-t pt-6                   -> .kamui-fuss__schluss
     text-secondary-foreground/70    -> Deckkraft 0.62 auf Creme

   Zwei Farben, keine dritte. Hierarchie ueber Groesse, Deckkraft und
   Weissraum, nie ueber Farbton.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --kamui-tusche: #161b19;
  --kamui-creme: #ede1ca;
}

/* Franky, Sprachnachricht 25.08.: "der Fusszeile ist ein bisschen zu
   hoch, allgemein. Ich denke, man koennte hier so um die 20 Prozent
   schneiden" - und zwar oben ("dann oben ein bisschen abschneiden").

   5.5rem minus 20 Prozent sind 4.4rem. Unten bleiben die 2rem: dort
   steht die Zeile mit Jahr und Rechtevorbehalt, sie braucht ihren
   Abstand zur Kante. */
.kamui-fuss {
  background: var(--kamui-tusche) !important;
  color: var(--kamui-creme);
  width: 100%;
  padding: 4.4rem 1.5rem 2rem;
  box-sizing: border-box;
}

.kamui-fuss__innen {
  max-width: 1280px;
  margin: 0 auto;
}

/* Erste Reihe: Marke links, vier Spalten rechts (lg:grid-cols-3) */
.kamui-fuss__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .kamui-fuss__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
  }
}

/* ── Markenblock ──────────────────────────────────────────────────── */

.kamui-fuss__marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}

.kamui-fuss__signet {
  /* Hoehe siehe Block weiter unten (Leerrand-Ausgleich).
     contain, nicht cover: das Signet darf nicht beschnitten werden.
     Merkregel aus der Bildarbeit an diesem Theme. */
  object-fit: contain !important;
  flex: none;
}

/* Der Schriftzug ist ein BILD, kein HTML-Text. Die alte Regel
   .kamui-fuss__name baute ihn mit einer Systemschrift nach - erkennbar
   falsch in Sperrung und Strichstaerke.

   ACHTUNG Leerrand: kamui-signet-creme.png hat 159px durchsichtigen Rand
   rundum (Tinte 84.4% der Hoehe), die Wortmarke hat 0. Bei gleicher
   Boxhoehe steht das Signet deshalb sichtbar kleiner da. Ausgleich:
   Signetbox durch 0.844 teilen. Boxmasse zeigen den Unterschied NICHT,
   nur die Tintenzeilen im Screenshot. */
.kamui-fuss__wortmarke {
  height: 1.75rem;
  width: auto;
  display: block;
  flex: none;
}

.kamui-fuss__signet {
  height: 2.073rem; /* 1.75 / 0.844, gleicht den Leerrand aus */
  width: auto;
  display: block;
  flex: none;
}

.kamui-fuss__satz {
  margin: 1.5rem auto 0;
  max-width: 22rem;
  text-align: center;
  line-height: 1.7;
  font-size: 0.95rem;
  color: rgba(237, 225, 202, 0.62);
}

@media (min-width: 640px) {
  .kamui-fuss__marke { justify-content: flex-start; }
  .kamui-fuss__satz { margin-left: 0; text-align: left; }
}

/* ── Die vier Spalten ─────────────────────────────────────────────── */

.kamui-fuss__spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .kamui-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .kamui-fuss__spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .kamui-fuss__spalten { grid-column: span 2 / span 2; }
}

.kamui-fuss__spalte { text-align: center; }

@media (min-width: 640px) {
  .kamui-fuss__spalte { text-align: left; }
}

/* Spaltentitel: klein, gesperrt, ruhig. Deckkraft 0.72, nicht 0.38 -
   kleine Grossbuchstaben mit weiter Sperrung fallen sonst unter den
   Kontrastwert 4.5 und sehen nur scheinbar gut aus. */
.kamui-fuss__titel {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(237, 225, 202, 0.72);
}

.kamui-fuss__liste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Der Abstand steckt jetzt in der Polsterung der Links (Tippflaeche,
     siehe unten). Bliebe hier zusaetzlich `gap: 1rem`, addierte sich
     beides und die Fusszeile wuerde deutlich laenger. */
  gap: 0;
  font-size: 0.9rem;
}

/* TIPPFLAECHE. Gemessen auf 390px Breite: die Links waren als
   `display:inline` ohne Polsterung nur 17px hoch, gefordert sind 44px.
   Die Polsterung ersetzt das fruehere `gap: 1rem` der Liste.

   NACHGEZOGEN, zweimal. Mit 0.85rem wuchs die Fusszeile von 1092 auf
   1257px. Mit 0.42rem war sie bei 1133px, aber die Links nur 35px hoch -
   meine Rechnung ging von 17px Zeilenhoehe aus, gemessen waren es 8.6px.
   Deshalb jetzt nicht mehr ueber die Polsterung gerechnet, sondern die
   Zielhoehe direkt gesetzt: `min-height: 44px` plus `align-items` haelt
   den Text mittig. Die Polsterung dient nur noch dem Abstand.

   `min-width` fuer die kurzen Eintraege: "Ablauf" war nur 40px breit.
   Waagerecht KEINE Polsterung, sonst bricht die linke Kante der
   Spalten - stattdessen Mindestbreite, die den Text links laesst. */
.kamui-fuss__liste a {
  color: rgba(237, 225, 202, 0.62);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

.kamui-fuss__liste a:hover,
.kamui-fuss__liste a:focus-visible {
  color: var(--kamui-creme);
}

/* Kontaktzeile mit Zeichen davor */
.kamui-fuss__zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .kamui-fuss__zeile { justify-content: flex-start; }
}

.kamui-fuss__zeichen {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: rgba(237, 225, 202, 0.55);
  fill: none;
  stroke-width: 1.5;
}

/* ── Schlusszeile ─────────────────────────────────────────────────── */

.kamui-fuss__schluss {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 225, 202, 0.15);
  font-size: 0.85rem;
  color: rgba(237, 225, 202, 0.55);
  text-align: center;
}

@media (min-width: 640px) {
  .kamui-fuss__schluss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.kamui-fuss__schluss p { margin: 0; }

.kamui-fuss__schluss p + p { margin-top: 1rem; }

@media (min-width: 640px) {
  .kamui-fuss__schluss p + p { margin-top: 0; }
  /* sm:order-first der Vorlage */
  .kamui-fuss__jahr { order: -1; }
}

/* Die alte Themefusszeile steht unter der neuen und trug dieselben
   Inhalte ein zweites Mal: ein grosses Signet (die neue Fusszeile hat
   ihr eigenes im Markenblock) und nochmals Impressum und Datenschutz
   (stehen jetzt in der Spalte Rechtliches). Beides gemessen am 25.08.
   im Bild - die Zahlenpruefung sieht so etwas nicht, sie zaehlt nur.

   Die Sprachwahl bleibt: die gibt es in der neuen Fusszeile nicht.
   Deshalb wird gezielt ausgeblendet, nicht die ganze Leiste. */
.kamui-fuss ~ .art-footer .art-footer__legal__logo,
.art-footer .art-footer__legal__logo {
  display: none !important;
}

.kamui-fuss ~ .art-footer .art-footer__legal__navigation,
.art-footer .art-footer__legal__navigation {
  display: none !important;
}

/* Die Leiste traegt jetzt nur noch die Sprachwahl, also darf sie
   schmal werden. Ohne das bliebe der Platz der entfernten Teile als
   Loch stehen - der Fall aus competing-animation-owners.md, Abschnitt 2:
   verstecken allein raeumt den Platz nicht ab. */
.art-footer {
  padding-top: 0 !important;
  padding-bottom: 1.5rem !important;
}

.kamui-fuss + .art-footer,
.kamui-fuss + * .art-footer {
  padding-top: 0 !important;
}