/*
 * 05-fussbereich.css
 *
 * Drei Spalten, keine Navigationsspalte. Spaltenüberschriften 14px/400 in
 * salbei — kein goldener Kicker, die Marke hat kein Gold.
 */

.db-fussbereich {
  position: relative;
  background: var(--db-gruen);
  color: var(--db-salbei-hell);
  margin-top: var(--db-fuss-abstand);
  padding: var(--db-fuss-oben) var(--db-seitenrand) var(--db-fuss-unten);
  /* Wegen des Wasserzeichens. */
  overflow: hidden;
}

/* Abstand zwischen Spalten und Fußzeile: im Entwurf trägt ihn die Fußzeile
   als margin-top:58px, nicht das Raster als padding-bottom. */

/* Wasserzeichen: gemessen im Entwurf steht dort das VOLLE Logo, aber die
   Hülle ist nur 320px breit und schneidet ab — sichtbar bleibt genau das
   Signet, die Wortmarke liegt außerhalb. Das Bild wird an der Höhe
   ausgerichtet (490px) und links bündig gesetzt.
   left 26%, top 64px, Deckkraft .07, weiß invertiert. */
.db-fussbereich__wasserzeichen {
  position: absolute;
  left: 26%;
  top: 64px;
  width: min(320px, 26%);
  height: 490px;
  overflow: hidden;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.db-fussbereich__wasserzeichen-bild {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  /* Das Logo ist grün. Für das Wasserzeichen auf grüner Fläche muss es weiß
     werden: erst auf Schwarz ziehen, dann umkehren. */
  filter: brightness(0) invert(1);
}

.db-fussbereich__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--db-spalte-fuss), 100%), 1fr));
  gap: var(--db-gap-fuss);
  position: relative;
  z-index: 1;
}

/* Gemessen: 24px/600 in creme. */
.db-fussbereich__wortmarke {
  font-size: var(--db-wortmarke-fuss-size);
  font-weight: var(--db-w-halbfett);
  color: var(--db-creme);
  letter-spacing: -.02em;
  margin-bottom: 22px;
}

.db-fussbereich__ueberschrift {
  font-size: var(--db-label-size);
  font-weight: var(--db-w-normal);
  color: var(--db-salbei);
  margin-bottom: 18px;
}

/* Der ganze Anschriftsblock steht in salbei — auch der Name der Inhaberin.
   Gemessen: 15px/400 #9FB3A7 in EINEM Absatz. */
.db-fussbereich__anschrift {
  font-style: normal;
  font-size: var(--db-ui-size);
  line-height: 1.7;
  color: var(--db-salbei);
  margin-bottom: 18px;
}

.db-fussbereich p { margin: 0; font-size: var(--db-ui-size); }
.db-fussbereich__text { max-width: 34ch; margin-bottom: 20px; }

/* Klickflächen im Fußbereich: gemessen waren Telefon, E-Mail und Routenlink
   nur 19,5px hoch. 44px entstehen hier durch Polsterung, nicht durch eine
   feste Höhe — und inline-flex, weil Polsterung an einem reinen Inline-Element
   die Layouthöhe gar nicht verändert.
   Der negative Seitenversatz hält die linke Textkante bündig mit dem Rest
   der Spalte. */
/* Klickflächen 44px durch Polsterung, nicht durch feste Höhe — und
   inline-flex, weil Polsterung an einem reinen Inline-Element die
   Layouthöhe gar nicht verändert. */
.db-fussbereich__telefon,
.db-fussbereich__karte {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 8px;
  margin-inline-start: -8px;
  border-radius: var(--db-r-panel);
  font-size: var(--db-ui-size);
}
.db-fussbereich__karte { font-size: var(--db-ui-klein-size); }

/* Diese Regel darf Schaltflächentext nicht treffen — .db-btn ist in
   03-bausteine.css ausgenommen. */
.db-fussbereich a:not(.db-btn) {
  color: var(--db-salbei-hell);
  transition: color var(--db-t-menuelink) ease;
}
.db-fussbereich a:not(.db-btn):hover,
.db-fussbereich a:not(.db-btn):focus-visible { color: var(--db-creme); }

.db-fussbereich__telefon { color: var(--db-creme-warm) !important; }
.db-fussbereich__karte   { color: var(--db-creme-warm) !important; margin-top: 18px; }

/* Tag und Uhrzeit beide 14.5px/400 in salbei-hell — gemessen im Entwurf.
   Keine Mono-Schrift, keine Trennlinien, kein Farbunterschied. */
.db-fussbereich__zeiten { font-size: var(--db-ui-klein-size); }
.db-fussbereich__zeit {
  display: grid;
  grid-template-columns: 8ch 1fr;
  gap: 18px;
  padding: 5px 0;
  color: var(--db-salbei-hell);
}
.db-fussbereich__zeit dt { color: inherit; }
.db-fussbereich__zeit dd { margin: 0; color: inherit; white-space: nowrap; }
.db-fussbereich__zeit--zu { color: var(--db-salbei); }

/* Anfahrtshinweise: 14.5px/400 in salbei-hell. */
.db-fussbereich__hinweise {
  font-size: var(--db-ui-klein-size);
  line-height: 1.6;
  color: var(--db-salbei-hell);
}
.db-fussbereich__hinweise li + li { margin-top: 14px; }
.db-fussbereich__zusatz { margin-top: 16px; font-size: var(--db-ui-klein-size); }
.db-fussbereich__knopf { margin-top: 18px; }

/* Im Entwurf sitzen Impressum und Datenschutz rechts in der Fußzeile,
   nicht in einer Spalte. */
.db-fussbereich__rechtliches { margin-left: auto; }
.db-fussbereich__rechtsliste {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: var(--db-ui-klein-size);
}
.db-fussbereich__rechtsliste a { padding-block: 12px; display: inline-block; }

.db-fussbereich__zeile {
  position: relative;
  z-index: 1;
  margin-top: 58px;
  padding-top: 22px;
  border-top: 1px solid var(--db-linie-dunkel-15);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}
.db-fussbereich__copyright {
  font-size: var(--db-meta-size);
  color: var(--db-salbei);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 .35em;
  min-height: 44px;
}
/* Der Ortslink sitzt mitten im Satz. Er bekommt trotzdem die volle Höhe der
   Zeile als Klickfläche, statt nur seine 19,5px Textzeile. */
.db-fussbereich__copyright a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 44px;
  padding-inline: 6px;
  margin-inline: -6px;
  border-radius: var(--db-r-panel);
}