/* ============================================================
   AVISON — Der Fuß
   Eine Quelle für alle Seiten: Startseite (index.html) und die
   Projektseiten (projekte/<kunde>). Braucht die Token --pad,
   --font-display, --font-type, --font-mono und --ease-out aus
   style.css bzw. seite.css.
   ============================================================ */

/* ---- Fuss (unterer, dunkler Teil) ----
   Eigene Token, weil der Fuss die einzige dunkle Flaeche der Seite
   ist. Die allgemeinen Token werden darin umgedeutet, damit alles,
   was --ink oder --accent benutzt, automatisch mitgeht. */
.footer {
  --foot-bg: #232425;                          /* Blue Charcoal */
  --foot-fg: #e9dac5;                          /* Almond */
  --foot-dim: rgba(233, 218, 197, 0.7);
  --foot-faint: rgba(233, 218, 197, 0.16);
  --foot-em: #be5e21;                          /* Burnt Orange */
  --foot-on-em: #f8f6f3;                       /* Papier: bester Wert auf Orange */
  --ink: var(--foot-fg);
  --ink-dim: var(--foot-dim);
  --ink-faint: var(--foot-faint);
  --accent: var(--foot-em);
  --bg: var(--foot-bg);

  position: relative;
  background: var(--foot-bg);
  color: var(--foot-fg);
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  padding: clamp(5.5rem, 9vw, 8rem) var(--pad) 1.75rem;
}
/* Die frueheren Iris-Ringe um die Marke sind raus: die Flaeche bleibt
   glatt. */

/* Die Marke auf der Kante: nur zwei Farben, jetzt Almond mit Orange-
   Details, weil die obere Haelfte auf Orange liegt. Dort verschwinden
   die Details im Grund, auf der dunklen Haelfte zeichnen sie sich ab. */
.footer__mark-wrap {
  position: absolute; z-index: 1;
  left: 50%; top: 0;
  width: clamp(88px, 11vw, 140px);
  aspect-ratio: 754 / 602;
  transform: translate(-50%, -50%);
  color: var(--foot-fg);
}
/* Bewusst ohne Hover-Effekt: die Marke sitzt genau auf der Kante
   zwischen hell und dunkel — jede Bewegung wuerde den Schnitt
   verschieben. */
.footer__mark-wrap:focus-visible { outline: 2px solid var(--foot-em); outline-offset: 6px; border-radius: 12px; }
.footer__mark {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  --logo-main: #e9dac5;                        /* Almond */
  --logo-detail: #be5e21;                      /* Burnt Orange */
}

/* Kopf: Wortmarke, Dreiklang, zwei Knoepfe */
.footer__head { position: relative; text-align: center; }
.footer__wordmark {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1; letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--foot-fg);
}
.footer__tagline {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--foot-dim);
}
.footer__cta {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.footer__btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  border-radius: 99px;
  border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.footer__btn svg { width: 18px; height: 18px; transition: transform 0.35s var(--ease-out); }
.footer__btn:hover svg { transform: translateX(4px); }
.footer__btn:focus-visible { outline: 2px solid var(--foot-fg); outline-offset: 3px; }
/* Beide Knoepfe gefuellt, ohne Rahmen; beim Hovern kommen nur die
   Wimpern (hover.css), die Farben bleiben. */
.footer__btn--primary { background: var(--foot-em); color: var(--foot-on-em); --wimpern-farbe: var(--foot-em); }
.footer__btn--secondary { background: var(--foot-fg); color: var(--foot-bg); --wimpern-farbe: var(--foot-fg); }

/* Drei Spalten: Kontakt, Folgen, Schnell zu */
.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(4rem, 8vw, 6.5rem);
}
.footer__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -0.01em;
  color: var(--foot-fg);
  margin-bottom: 0.75rem;
}
.footer__text {
  font-family: var(--font-type);
  font-size: 0.88rem; line-height: 1.7;
  color: var(--foot-dim);
}
.footer__mail {
  display: inline-block; margin-top: 0.7rem;
  font-family: var(--font-type); font-size: 0.88rem;
  color: var(--foot-fg); text-decoration: none;
  border-bottom: 1px solid rgba(233, 218, 197, 0.35);
  padding-bottom: 0.1rem;
  transition: border-color 0.3s;
}
.footer__social, .footer__nav { list-style: none; display: grid; gap: 0.5rem; }
.footer__nav { grid-template-columns: repeat(2, auto); column-gap: 2rem; justify-content: start; }
.footer__social a, .footer__nav a {
  font-family: var(--font-type); font-size: 0.88rem;
  color: var(--foot-dim); text-decoration: none;
  transition: color 0.3s;
}
.footer__social a:hover, .footer__nav a:hover { color: var(--foot-fg); }
.footer__social a:focus-visible, .footer__nav a:focus-visible,
.footer__mail:focus-visible { outline: 2px solid var(--foot-em); outline-offset: 3px; }
/* Externe Ziele bekommen den kleinen Pfeil nach oben rechts */
.footer__ext { display: inline-flex; align-items: center; gap: 0.35em; }
.footer__ext::after {
  content: "";
  width: 0.8em; height: 0.8em;
  background: var(--foot-em);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s var(--ease-out);
}
.footer__ext:hover::after { transform: translate(2px, -2px); }

/* Fussleiste: Copyright links, die rechtlichen Links als helle Pille
   rechts — so hebt sich das Pflichtprogramm von den Spalten ab. */
.footer__bottom {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--foot-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--foot-dim);
}
.footer__links {
  display: inline-flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 99px;
  background: var(--foot-fg); color: var(--foot-bg);
}
.footer__links a { color: inherit; text-decoration: none; transition: color 0.3s; }
.footer__links a:hover { color: var(--foot-em); }
.footer__links a:focus-visible { outline: 2px solid var(--foot-bg); outline-offset: 2px; border-radius: 2px; }

/* Schmal: alles in eine Spalte, Fussleiste mittig */
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__nav { grid-template-columns: repeat(2, auto); }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* Die Marke auf der Kante als Maske statt als <use>-Symbol — so
   braucht eine Seite das lange SVG-Symbol nicht mitzuschleppen.
   Zwei Masken, zwei Farben (--logo-main, --logo-detail). */
.footer__mark--maske {
  background: var(--logo-main);
  -webkit-mask: url("../brand/marke-flaeche.svg") no-repeat center / contain;
          mask: url("../brand/marke-flaeche.svg") no-repeat center / contain;
}
.footer__mark--maske > span {
  position: absolute; inset: 0;
  background: var(--logo-detail);
  -webkit-mask: url("../brand/marke-detail.svg") no-repeat center / contain;
          mask: url("../brand/marke-detail.svg") no-repeat center / contain;
}

/* Text-Links im Fuß: Unterstrich wie in der Kopfzeile (siehe
   TEXT-LINKS in style.css). */
.footer__mail,
.footer__social a,
.footer__nav a,
.footer__links a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 100% 100%;
  background-size: 0 1px;
  transition: background-size 0.45s var(--ease-out), color 0.3s ease;
}
.footer__mail:hover, .footer__mail:focus-visible,
.footer__social a:hover, .footer__social a:focus-visible,
.footer__nav a:hover, .footer__nav a:focus-visible,
.footer__links a:hover, .footer__links a:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* Sehr schmale Geräte (iPhone SE & Co.) */
@media (max-width: 380px) {
  .footer__links { gap: 0.9rem; }
}