/*
 * Fußzeile (footer.php). Hell mit dem farbigen Logo, im dunklen Theme auf Nachtblau; nur Tokens.
 *   unter 60em  ruhig, einspaltig, linksbündig: Logo, Adresse, zwei Akkordeons (app.js klappt sie zu), Nummern,
 *               Icon-Reihe, Anfrage-Button als Umriss, Pflichtangaben untereinander.
 *   ab 60em     Spalten mit feinen Trennlinien und Icons (Marke, Leistungen, Firma, Kontakt), Anfrage-Button blau,
 *               Icon-Kacheln, rechts unten Sydney als Zierbild (template-parts/skyline.php), Pflichtangaben in einer Reihe.
 *   ab 81em     das Zierbild steht als fünfte Spalte neben dem Kontakt.
 * fuss__schmal / fuss__breit zeigen ein Element nur in einer Fassung.
 */

.fuss {
  position: relative;
  /* unten Platz für die mobile Aktionsleiste (bis 48em), damit darunter kein Streifen bleibt */
  padding-block: var(--space-8) calc(var(--actionbar-h) + env(safe-area-inset-bottom));
  border-block-start: var(--border) solid var(--color-line);
  /* weicher Verlauf von der Fußzeilenfläche in die Tönung */
  background: linear-gradient(180deg, var(--color-footer) 35%, color-mix(in srgb, var(--color-footer), var(--color-tint) 55%));
  color: var(--color-text);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.fuss__breit {
  display: none !important;
}

.fuss__raster {
  display: grid;
}

.fuss__titel {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
  letter-spacing: 0;
}

/* ------------------------------------------------------------ Marke */

.fuss__marke {
  padding-block-end: var(--space-6);
}

.fuss__logo {
  display: inline-block;
}

.fuss__logo .logo {
  width: calc(var(--logo-w) * 1.1);
}

.fuss__name {
  margin-block-start: var(--space-4);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

.fuss__fakten {
  margin: var(--space-3) 0 0;
  color: var(--color-text-2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Die Icons vor Adresse und Gebiet kommen erst ab 60em dazu. */
.fuss__fakten .icon {
  display: none;
}

.fuss__fakten li > span > span {
  display: block;
}

/* ------------------------------------------------------------ Linklisten (unter 60em eingeklappt) */

.fuss__spalte {
  border-block-start: var(--border) solid var(--color-line);
}

.fuss__spalte--firma {
  border-block-end: var(--border) solid var(--color-line);
}

.fuss__spalte summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
  cursor: pointer;
  list-style: none;
}

.fuss__spalte summary::-webkit-details-marker {
  display: none;
}

.fuss__pfeil {
  transition: transform var(--dur) var(--ease-out);
}

.fuss__spalte[open] .fuss__pfeil {
  transform: rotate(180deg);
}

.fuss__liste {
  margin: 0;
  padding-block-end: var(--space-3);
}

.fuss__liste a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap);
  color: var(--color-text-2);
  font-size: var(--text-body);
  text-decoration: none;
}

.fuss__liste .icon {
  color: var(--color-link);
}

.fuss__liste a[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------ Kontakt */

.fuss__kontakt {
  display: grid;
  justify-items: start;
  padding-block: var(--space-6);
}

.fuss__nummer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  color: var(--color-text);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}

.fuss__nummer .icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-link);
}

.fuss__zweit {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block-start: calc(-1 * var(--space-2));
  color: var(--color-text-2);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}

.fuss__email {
  overflow-wrap: anywhere;
}

/* Unter 60em eine Reihe Icon-Links, ab 60em gerahmte Kacheln. */
.fuss__runde {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0 calc(-1 * var(--space-3));
}

.fuss__rund {
  display: grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-tile);
  color: var(--color-link);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.fuss__rund .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.fuss__rund:active {
  background: var(--color-tint);
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}

.fuss__anfrage {
  margin-block-start: var(--space-4);
}

.fuss__anfrage .icon {
  display: none;
}

/* ------------------------------------------------------------ Unterzeile */

.fuss__unten {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding-block: var(--space-5) var(--space-4);
  border-block-start: var(--border) solid var(--color-line);
  color: var(--color-text-2);
}

/* Unter 60em je Angabe eine Zeile, ab 60em eine Reihe mit Trennern. */
.fuss__angaben {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
}

.fuss__recht > a,
.fuss__recht .site-credit,
.fuss__recht .site-credit a,
.fuss__schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: var(--tap);
}

.fuss__recht a,
.fuss__schalter {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.fuss__schalter {
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .fuss__liste a:hover,
  .fuss__zweit:hover,
  .fuss__recht a:hover,
  .fuss__schalter:hover {
    color: var(--color-text);
  }

  .fuss__nummer:hover {
    color: var(--color-link);
  }

  .fuss__rund:hover {
    background: var(--color-tint);
  }
}

/* Ab 48em gibt es keine Aktionsleiste. */
@media (min-width: 48em) {
  .fuss {
    padding-block-end: 0;
  }
}

/* ============================================================ ab 60em: Spalten */

@media (min-width: 60em) {
  .fuss {
    padding-block-start: var(--space-9);
  }

  .fuss__schmal {
    display: none !important;
  }

  .fuss__breit {
    display: revert !important;
  }

  .fuss__raster {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.35fr);
  }

  /* ---- Marke */
  .fuss__marke {
    padding-block-end: 0;
    padding-inline-end: var(--space-7);
  }

  .fuss__logo .logo {
    width: calc(var(--logo-w) * 1.25);
  }

  .fuss__name {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: 0;
  }

  .fuss__fakten {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    font-size: inherit;
    line-height: var(--leading-small);
  }

  .fuss__fakten li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .fuss__fakten .icon {
    display: block;
    color: var(--color-link);
  }

  /* ---- Linklisten und Kontakt: Trennlinie links */
  .fuss__spalte,
  .fuss__kontakt {
    padding-block: 0;
    padding-inline: var(--space-7) var(--space-4);
    border-block: 0;
    border-inline-start: var(--border) solid var(--color-line);
  }

  /* Die Spalten stehen immer offen, die Zeile ist keine Schaltfläche. */
  .fuss__spalte summary {
    min-height: 0;
    margin-block-end: var(--space-3);
    cursor: default;
    pointer-events: none;
  }

  .fuss__pfeil {
    display: none;
  }

  .fuss__liste {
    padding-block-end: 0;
  }

  .fuss__liste a {
    gap: var(--space-3);
    min-height: 2.5rem;
    font-size: inherit;
  }

  /* ---- Kontakt */
  .fuss__kontakt {
    align-content: start;
  }

  .fuss__nummer {
    margin-block-start: var(--space-2);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
  }

  .fuss__nummer .icon {
    display: block !important;
  }

  .fuss__zweit {
    min-height: 2.25rem;
    margin-block-start: 0;
    margin-inline-start: calc(1.75rem + var(--space-3));
    font-size: inherit;
    text-decoration: none;
  }

  /* Der Anfrage-Button ist hier der blaue, gefüllte. */
  .fuss__anfrage {
    --btn-bg: var(--color-primary);
    --btn-bg-hover: var(--color-primary-hover);
    --btn-fg: var(--color-on-primary);
    order: 1;
    margin-block-start: var(--space-3);
    white-space: nowrap;
    border-color: transparent;
  }

  .fuss__anfrage .icon {
    display: block;
  }

  .fuss__runde {
    order: 2;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
  }

  .fuss__rund {
    border: var(--border) solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .fuss__rund .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* ---- Zierbild: eigene Zeile unter den Spalten, rechts */
  div.fuss__bild {
    display: block !important;
    grid-column: 1 / -1;
    justify-self: end;
    width: min(100%, 26rem);
    margin-block-start: var(--space-5);
    /* schließt bündig an die Haarlinie der Unterzeile an */
    margin-block-end: calc(-1 * var(--border));
    color: var(--color-primary);
    pointer-events: none;
  }

  /* Das Wasser läuft nach links weich aus. */
  /* Vorlage von Sören als einfarbiger Pfad; Farbe über currentColor, etwas zurückgenommen. */
  .skyline {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.55;
  }

  /* ---- Unterzeile */
  .fuss__unten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-7);
    padding-block: var(--space-3);
  }

  .fuss__angaben {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1) 0;
  }

  .fuss__recht {
    gap: 0;
  }

  .fuss__angaben > span + span,
  .fuss__recht > * + * {
    margin-inline-start: var(--space-4);
    padding-inline-start: var(--space-4);
    background: linear-gradient(var(--color-line-strong), var(--color-line-strong)) left center / var(--border) 1em no-repeat;
  }
}

/* Dunkel: Hellblau, stärker zurückgenommen. */
:root[data-theme="dark"] .fuss__bild {
  color: var(--color-light);
}

:root[data-theme="dark"] .skyline {
  opacity: 0.4;
}

/* ============================================================ ab 81em: Zierbild als fünfte Spalte */

@media (min-width: 81em) {
  .fuss__raster {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.95fr) minmax(0, 0.85fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
  }

  /* Das Bild darf nach links unter den Kontakt auslaufen, liegt aber hinter den Inhalten. */
  div.fuss__bild {
    position: relative;
    z-index: 0;
    grid-column: auto;
    align-self: end;
    width: 125%;
    margin-block-start: 0;
    margin-inline-start: -25%;
  }

  .fuss__kontakt {
    position: relative;
    z-index: 1;
  }

  .fuss__raster {
    padding-block-end: 0;
  }

  .fuss__marke,
  .fuss__spalte,
  .fuss__kontakt {
    margin-block-end: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fuss__rund:active {
    transform: none;
  }
}

@media print {
  .fuss__runde,
  .fuss__anfrage,
  .fuss__bild {
    display: none !important;
  }
}