/* Footer der neuen Website.

   Eigene Datei, weil der Footer auch auf winterhilfe.ch (Site 1) laeuft,
   die neue Kopfzeile dort aber noch nicht. header.css enthaelt Regeln, die
   auf Elemente des Themes zielen (html body, #header.here-i-am,
   #content > .frame) - die duerfen dort nicht mitkommen.
   Hier steht ausschliesslich, was der Footer und das Newsletter-Fenster
   brauchen. */
.wh-footer { background: #fff; padding: 3.5rem 0 2rem; }
.wh-footer a { text-decoration: none; }

/* Im Footer reicht der Farbwechsel - das Theme setzt a:hover global auf
   underline, das hier fuer den gesamten Footer wieder abschalten.
   Ausnahme: die Mailadresse ist dauerhaft unterstrichen (so im Entwurf). */
.wh-footer a:hover, .wh-footer a:focus,
#content .wh-footer a:hover, #content .wh-footer a:focus { text-decoration: none; }
.wh-footer .wh-footer__address a,
.wh-footer .wh-footer__address a:hover,
.wh-footer .wh-footer__address a:focus { text-decoration: underline; }

/* Das alte Theme faerbt span im Footer weiss (blauer Footer) – hier zuruecksetzen,
   sonst verschwinden z.B. die Pfeile auf weissem Grund. */
.wh-footer span,
#content .wh-footer span { color: inherit; }

.wh-footer__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
}

.wh-footer .wh-footer__title,
#content .wh-footer .wh-footer__title {
  font-size: .875rem; font-weight: 500;
  text-transform: uppercase; color: #000; margin: 0 0 1.25rem;
}

.wh-footer .wh-footer__iban,
#content .wh-footer .wh-footer__iban { color: #000; margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.5; }

/* Nachbau des offiziellen RaiseNow-Paylink-Buttons (Variante dark).
   Masse als em uebernommen, damit die Proportionen exakt stimmen:
   Hoehe 3.5em, Padding 2.1875em, Radius .375em, Gewicht 500.
   Kleinere Schriftgroesse, weil der Button im Footer steht und nicht
   als Hauptaktion einer Seite. */
.wh-footer__twint,
#content .wh-footer__twint {
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  box-sizing: border-box;
  font-size: 1rem; font-weight: 500; line-height: 1;
  height: 3.5em; padding: 0 2.1875em; min-width: 12.375em;
  border-radius: .375em;
  background: #262626; color: #fff;
  transition: background-color .3s ease;
}
.wh-footer__twintlogo { display: block; height: 1.9em; width: auto; flex: 0 0 auto; }

.wh-footer__twint:hover,
.wh-footer__twint:focus,
#content .wh-footer__twint:hover,
#content .wh-footer__twint:focus { background: #000; color: #fff; }

.wh-footer__more { margin: 1rem 0 0; }
.wh-footer__more a, #content .wh-footer__more a { color: #000; font-weight: 500; font-size: 1rem; line-height: 1.5; }
/* Hover: kein Unterstrich, Markenblau, und der Pfeil faehrt ein Stueck raus.
   Das Theme setzt a:hover auf underline, daher der spezifischere Selektor. */
.wh-footer .wh-footer__more a:hover,
.wh-footer .wh-footer__more a:focus,
#content .wh-footer .wh-footer__more a:hover,
#content .wh-footer .wh-footer__more a:focus { text-decoration: none; color: #009fe3; }
.wh-footer__more a { transition: color .2s ease; }
.wh-footer__more a span {
  display: inline-block; transition: transform .2s ease;
}
.wh-footer__more a:hover span,
.wh-footer__more a:focus span { transform: translateX(4px); }

.wh-footer__zewo { margin-top: 2.25rem; }
.wh-footer__zewo img { display: block; height: 88px; width: auto; }

.wh-footer__links { list-style: none; margin: 0; padding: 0; }
.wh-footer__links li { margin-bottom: .85rem; }
.wh-footer__links a, #content .wh-footer__links a {
  color: #000; font-size: 1rem; line-height: 1.5; display: inline-flex; align-items: center; gap: .45rem;
}
/* Pfeil wie im Entwurf in Markenblau, nicht schwarz */
.wh-footer__chev {
  display: inline-block; width: .42rem; height: .42rem;
  border-right: 2px solid #009fe3; border-bottom: 2px solid #009fe3;
  transform: rotate(45deg) translate(-1px, -2px);
}
.wh-footer__links a:hover, .wh-footer__links a:focus,
#content .wh-footer__links a:hover { color: #009fe3; }

/* Aufklappbare Gruppen im Footer. summary sieht aus wie die anderen
   Eintraege; das eigene Dreieck des Browsers wird abgeschaltet. */
.wh-footer__group summary {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #000; font-size: 1rem; line-height: 1.5; cursor: pointer;
  list-style: none;
}
.wh-footer__group summary::-webkit-details-marker { display: none; }
.wh-footer__group summary::marker { content: ""; }
.wh-footer__group summary:hover { color: #009fe3; }
.wh-footer__group .wh-footer__chev { transition: transform .2s ease; }
.wh-footer__group details[open] > summary .wh-footer__chev {
  transform: rotate(-135deg) translate(-2px, -1px);
}
.wh-footer__sub { list-style: none; margin: .6rem 0 0; padding: 0 0 0 .9rem; }
.wh-footer__sub li { margin-bottom: .55rem; }
.wh-footer__sub a, #content .wh-footer__sub a { color: #5b646b; font-size: .9375rem; }
.wh-footer__sub a:hover, #content .wh-footer__sub a:hover { color: #009fe3; }

@media (prefers-reduced-motion: reduce) {
  .wh-footer__group .wh-footer__chev { transition: none; }
}

/* Spenden-Button im Footer - gleiche blaue Pille wie im Seitenkopf. */
.wh-footer .wh-footer__donate,
#content .wh-footer .wh-footer__donate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #009fe3; color: #fff; font-weight: 500; font-size: 1rem; line-height: 1.5;
  padding: .55rem 1.35rem; border-radius: 2rem; white-space: nowrap;
  text-decoration: none; transition: background-color .2s ease;
}
.wh-footer .wh-footer__donate:hover,
.wh-footer .wh-footer__donate:focus,
#content .wh-footer .wh-footer__donate:hover { background: #0089c4; color: #fff; text-decoration: none; }

.wh-footer__newsletter,
#content .wh-footer__newsletter {
  display: inline-block; border: 1px solid #009fe3; border-radius: 2rem;
  /* <button> bekommt vom Browser ein graues Standard-Background - explizit weiss. */
  background: #fff; cursor: pointer; font-family: inherit;
  color: #009fe3; font-weight: 500; font-size: 1rem; line-height: 1.5; padding: .6rem 2.5rem;
}
.wh-footer__newsletter:hover, #content .wh-footer__newsletter:hover { background: #009fe3; color: #fff; }

.wh-footer__social { display: flex; gap: 1.4rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.wh-footer__social a, #content .wh-footer__social a { color: #000; display: inline-flex; }
.wh-footer__social a:hover, #content .wh-footer__social a:hover { color: #009fe3; }
.wh-footer__social svg { display: block; }
.wh-footer__social a:hover, #content .wh-footer__social a:hover { color: #009fe3; }

.wh-footer__rule { border: 0; border-top: 1px solid #ededed; margin: 2.5rem 0 1.5rem; }

.wh-footer__bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.wh-footer__brand img { display: block; height: 46px; width: auto; margin-bottom: 1.1rem; }
.wh-footer .wh-footer__address,
#content .wh-footer .wh-footer__address { margin: 0; font-size: 1rem; color: #000; line-height: 1.5; }
.wh-footer__address strong { font-weight: 500; }
/* Die Kontaktangaben kommen als Absaetze aus dem Inhaltselement. Das Theme
   faerbt footer p weiss (der alte Footer war dunkel) - und erwischt damit
   genau diese Absaetze. Hier wieder auf Schwarz, und die Abstaende
   zuruecknehmen, damit der Block so eng steht wie zuvor. */
.wh-footer .wh-footer__address p,
#content .wh-footer .wh-footer__address p { color: #000; margin: 0; }
.wh-footer .wh-footer__address p + p { margin-top: .35rem; }
/* Dasselbe gilt fuer die Icons vor Telefon und Mail: das Theme setzt
   footer .fas auf weiss. Sie stehen im Inhaltselement, wir koennen sie
   nicht entfernen - also einfaerben wie den Text daneben. */
.wh-footer .wh-footer__address .fas,
.wh-footer .wh-footer__address .fab,
#content .wh-footer .wh-footer__address .fas { color: #000; }
.wh-footer__address a, #content .wh-footer__address a { color: #000; text-decoration: underline; }

.wh-footer__legal { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wh-footer__legal a, #content .wh-footer__legal a { color: #000; font-size: 1rem; line-height: 1.5; }
.wh-footer__legal a:hover, .wh-footer__legal a:focus,
#content .wh-footer__legal a:hover { color: #009fe3; }
.wh-footer__copy { color: #000; font-size: .8125rem; }

@media (max-width: 767px) {
  .wh-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
  .wh-footer__bottom { flex-direction: column; align-items: flex-start; }
}



/* Schliessen-Kreuz im Newsletter-Fenster. Das Fenster steht neu ausserhalb
   des footer-Elements, damit greift die Regel des Themes
   (footer span.newsl-close) nicht mehr und das Kreuz war schwarz auf dem
   Foto - praktisch unsichtbar. Darum hier weiss, mit leichtem Schatten
   fuer helle Bildstellen. */
#whnewsletter .close { opacity: 1; text-shadow: none; }
#whnewsletter .close span.newsl-close,
#content #whnewsletter .close span.newsl-close {
  color: #fff; font-size: 2rem; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
#whnewsletter .close:hover span.newsl-close,
#whnewsletter .close:focus span.newsl-close { color: #009fe3; text-shadow: none; }

/* Auf sehr breiten Schirmen dieselbe Breite wie der Inhalt - und wie dort
   nur auf der Startseite, damit die Unterseiten bei den Breiten von
   Bootstrap bleiben. */
@media (min-width: 1400px) {
  body.page-1 .wh-footer .container,
  body.page-2301 .wh-footer .container { max-width: 1400px; }
}