/* ==========================================================================
   Xyntal · Fußzeile im Startseiten-Stil (Auszug aus css/neu.css)
   Nur die Regeln für <footer class="foot">. Alles ist unter .foot gebunden,
   damit nichts auf der Seite selbst verändert wird. Schriften kommen aus
   fonts/fonts.css (Archivo, IBM Plex Sans, JetBrains Mono).
   ========================================================================== */

/* Farben, Abstände und Schriften innerhalb der Fußzeile (Werte wie auf der Startseite).
   Sie stehen hier fest, damit die Fußzeile auf jeder Seite gleich aussieht. */
.foot {
  --g-2: #1F1F21;
  --t-1: #ECEAE4;
  --t-2: #B9B7B0;
  --t-3: #918F89;
  --t-rgb: 236, 234, 228;
  --line: rgba(var(--t-rgb), .10);
  --line-2: rgba(var(--t-rgb), .22);
  --pu: #B36BFF;
  --bl: #4C8DFF;
  --cy: #4C8DFF;
  --grad: linear-gradient(90deg, var(--pu), var(--bl) 50%, var(--cy));
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-text: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --pad: clamp(20px, 4.2vw, 76px);
  --gap: clamp(16px, 2vw, 32px);
  --s-3: 24px; --s-4: 40px; --s-5: 64px;
  position: relative;
  z-index: 1;
  padding: 0 var(--pad) 28px;
  container-type: inline-size;
  overflow: hidden;
  color: var(--t-1);
  font-family: var(--f-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.foot *, .foot *::before, .foot *::after { box-sizing: border-box; }
.foot p, .foot ul, .foot h2, .foot h3 { margin: 0; padding: 0; }
.foot ul { list-style: none; }
.foot a { color: inherit; text-decoration: none; }
.foot svg { display: block; max-width: 100%; }
.foot :focus-visible { outline: 2px solid var(--cy); outline-offset: 4px; border-radius: 4px; }

.foot .mono { font: 400 .72rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t-3); }
.foot .top__logo { display: inline-flex; align-items: center; gap: 9px; font: 600 1.15rem/1 var(--f-display); font-stretch: 110%; letter-spacing: -.01em; color: var(--t-1); }

/* Fußzeile: links Marke und Kontakt, rechts drei beschriftete Spalten, darunter eine schmale Schlusszeile */
.foot__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4) var(--gap); padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--line); position: relative; z-index: 1; }
.foot__brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.foot__contact { display: grid; justify-items: start; color: var(--t-2); font-size: .94rem; }
.foot__contact a { padding: 5px 0; transition: color .25s; }
.foot__contact a:hover { color: var(--t-1); }
.foot__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot .soc { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--t-2); transition: color .25s, background .25s, border-color .25s, transform .35s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.foot .soc::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 2px; border-radius: 2px; background: var(--grad); opacity: 0; transform: scaleX(.4); transition: opacity .25s, transform .35s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.foot .soc:hover, .foot .soc:focus-visible { background: var(--t-1); border-color: var(--t-1); color: var(--g-2); transform: translateY(-3px); }
.foot .soc:hover::after, .foot .soc:focus-visible::after { opacity: 1; transform: none; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--gap); }
.foot nav { display: grid; align-content: start; justify-items: start; color: var(--t-2); font-size: .94rem; }
.foot nav a { position: relative; transition: color .25s; padding: 5px 0; }
.foot nav a:hover { color: var(--t-1); }
.foot__h { margin-bottom: 10px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; padding-top: 20px; border-top: 1px solid var(--line); position: relative; z-index: 1; }
.foot__cancel { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--t-2); transition: color .25s, border-color .25s; }
.foot__cancel:hover { color: var(--t-1); border-color: var(--t-3); }
/* Großer Schriftzug als weicher Farbschein hinter den Links: unscharf und schwach, damit alles davor klar lesbar bleibt */
.foot__mark { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; transform: translateY(-60%); margin: 0; font: 800 25.6cqw/1 var(--f-display); font-stretch: 125%; text-align: center; white-space: nowrap; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; opacity: .16; filter: blur(clamp(6px, 1.3cqw, 18px)); pointer-events: none; user-select: none; }

@media (max-width: 760px) {
  .foot__main { grid-template-columns: 1fr; padding-bottom: var(--s-4); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__legal { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .foot__legal .foot__h { grid-column: 1 / -1; }
}

/* Handy: einzeln stehende Links bekommen eine Tippfläche von mindestens 44 px (sichtbar bleibt alles gleich). */
@media (pointer: coarse), (max-width: 760px) {
  .foot nav a, .foot__contact a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding-block: 0; }
  .foot__cancel { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* Unsichtbare SVG-Definitionen (Marke) vor der Fußzeile */
svg.defs[aria-hidden="true"] { position: absolute; width: 0; height: 0; overflow: hidden; }