/* Header der neuen Website. Eigener Praefix wh-header, damit nichts aus dem
   alten Theme durchschlaegt. Farben mit #content-Praefix doppelt gesetzt,
   weil das Theme mit ID-Selektoren arbeitet. */

/* Das alte Theme hat eine fixierte Navbar und reserviert dafuer Platz:
   body { padding-top: 114px } in app.css, dazu 90/104/126px in Media Queries.
   Der neue Header ist nicht fixiert und scrollt normal mit - der Platzhalter
   muss also weg. "html body" statt "body", weil app.css nach dieser Datei
   geladen wird und bei gleicher Spezifitaet sonst gewinnt. */
html body { padding-top: 0; }

/* Eigener Stacking-Context fuer den Header - Absicherung, damit positionierte
   Inhalte spaeter nicht ueber die Untermenues geraten. */
/* Kopf bleibt beim Scrollen stehen, aber in minimaler Form: der negative
   top-Wert entspricht der Hoehe der Meta-Zeile (30px), sie scrollt also nach
   oben weg, Logo/Menue/Spenden-Button und Kantonswahl bleiben sichtbar. */
.wh-header {
  /* Bewusst ohne Hintergrund: Weiss liegt nur auf der Meta- und der
     Hauptzeile. Die Kantonszeile bleibt transparent, sonst wuerde das
     weisse Headerfeld genau den Bereich verdecken, unter den sich der
     Seiteninhalt schieben soll. */
  font-family: inherit;
  position: sticky; top: -43px; z-index: 1000;
}
.wh-header a { text-decoration: none; }

/* Meta-Zeile. Hoehe 43px = 13px Luft oben plus 30px Zeile; die Eintraege
   sitzen dadurch tiefer, wie im Entwurf. Der negative top-Wert am Header
   oben muss derselbe sein, sonst bleibt beim Scrollen ein Streifen stehen. */
.wh-header__meta { height: 43px; padding-top: 13px; background: #fff; }
.wh-header__metanav {
  display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem;
  list-style: none; margin: 0; padding: .2rem 0;
}
/* Groesse am li, nicht nur am a: faellt ein Eintrag einmal ohne Link aus,
   bleibt er trotzdem so klein wie die anderen. */
.wh-header__metanav li,
#content .wh-header__metanav li { font-size: .8125rem; color: #6b6b6b; }
.wh-header__metanav a,
#content .wh-header__metanav a { color: #6b6b6b; font-size: .8125rem; }
.wh-header__metanav a:hover,
#content .wh-header__metanav a:hover { color: #009fe3; }
.wh-header__lock::before { content: "\2715"; margin-right: .35rem; }
.wh-header__globe::before { content: "\1F310"; margin-right: .35rem; }
.wh-header__search { display: inline-flex; align-items: center; }

/* Hauptzeile – Bootstrap-Navbar, aber optisch komplett neu.
   Das Theme stylt .navbar/.nav-link/.dropdown-menu mit, deshalb hier
   durchgaengig ueberschrieben. */
.wh-header__navbar,
.wh-header .wh-header__navbar {
  position: static; padding: 0; background: #fff; border: 0; min-height: 0;
}
.wh-header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.75rem; flex-wrap: nowrap;
  /* Nur vertikal setzen! Die Zeile ist ein .container - ein padding-Shorthand
     wuerde dessen seitliche 15px mit ueberschreiben und Logo und Burger an
     den Bildschirmrand kleben. Oben nur 3px Abstand zur Meta-Zeile - die
     Luft steht ueber der Meta-Zeile, unten bleibt Platz fuer die Pille. */
  padding-top: 3px; padding-bottom: 1.625rem;
  transition: padding-top .15s ease;
}
/* Bootstrap macht aus .navbar-brand ein inline-block mit 5px Padding.
   Dadurch haengt das Logo an der Textgrundlinie und sitzt 5px zu hoch.
   Als Flex-Container ohne Padding steht es exakt auf einer Mitte mit
   Menue und Spenden-Button. */
nav.wh-header__navbar .wh-header__brand {
  display: flex; align-items: center; padding: 0; margin: 0;
  /* line-height aus dem Theme wuerde die Linkbox auf Textzeilenhoehe
     halten - das Logo haengt dann oben raus. */
  line-height: 0;
}
/* app.css setzt .navbar-brand img { height: 54px } und laedt nach dieser
   Datei - bei gleicher Spezifitaet gewinnt es. Daher nav. davor. */
nav.wh-header__navbar .wh-header__brand img {
  display: block; height: 46px; width: auto;
  /* app.css zieht das Logo mit margin-top: -10px nach oben - dadurch stand
     es 5px ueber der Mitte von Menue und Button. */
  margin: 0;
}

/* Abstand zwischen Menue-Block und Spenden-Button. Bewusst hier und nicht
   als gap in der Liste - die Abstaende zwischen den Punkten macht allein
   das Padding der Links. */
.wh-header__collapse { flex-grow: 1; justify-content: space-between; gap: 2.75rem; }

.wh-header .wh-header__nav {
  display: flex; align-items: center; gap: 0;
  /* Menueblock rechtsbuendig direkt vor dem Spenden-Button (wie im Entwurf). */
  list-style: none; margin: 0 0 0 auto; padding: 0; flex-direction: row;
}
nav.wh-header__navbar .wh-header__nav .nav-link,
#content nav.wh-header__navbar .wh-header__nav .nav-link {
  color: #000; font-size: 1rem; line-height: 1.5; font-weight: 500; white-space: nowrap;
  /* Abstand zwischen den Punkten kommt ausschliesslich von diesem Padding -
     kein zusaetzliches gap, sonst addieren sich zwei Mechanismen. */
  padding: .5rem .9rem; display: inline-flex; align-items: center; gap: .3rem;
}
nav.wh-header__navbar .wh-header__nav .nav-link:hover,
#content nav.wh-header__navbar .wh-header__nav .nav-link:hover { color: #009fe3; }

/* Eigener Pfeil statt Bootstrap-Caret */
.wh-header .wh-header__nav .dropdown-toggle::after {
  border: 0; width: .4rem; height: .4rem; margin: 0 0 0 .15rem;
  border-right: 1.5px solid #009fe3; border-bottom: 1.5px solid #009fe3;
  transform: rotate(45deg) translateY(-2px); vertical-align: middle;
  transition: transform .2s ease;
}
/* Bei geoeffnetem Untermenue dreht der Pfeil nach oben. */
.wh-header .wh-header__nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

nav.wh-header__navbar .wh-header__dropdown {
  /* Theme setzt .dropdown-menu auf transparent - ohne eigenes Background
     scheint der Seiteninhalt durch das aufgeklappte Menue hindurch. */
  background-color: #fff;
  /* app.css setzt .navbar-nav .dropdown-menu { top: 93px } - ein fester
     Versatz fuer die frueher fixierte Navbar. Dadurch hing das Untermenue
     weit unter dem Menuepunkt. Zurueck auf "direkt darunter". */
  top: 100%; margin-top: .25rem;
  border: 0; border-radius: .25rem; padding: .5rem 0;
  box-shadow: 0 1px 8px rgba(0,0,0,.12); min-width: 15rem;
}
.wh-header .wh-header__dropdown .dropdown-item,
#content .wh-header .wh-header__dropdown .dropdown-item {
  color: #000; font-size: 1rem; line-height: 1.5; font-weight: 500; padding: .5rem 1.25rem;
}
.wh-header .wh-header__dropdown .dropdown-item:hover {
  background: #f4f7f9; color: #009fe3;
}

/* Zwischen 992 und 1280px wird es eng: Abstaende und Schrift leicht
   reduzieren, damit Menue und Spenden-Button nebeneinander passen.
   Ab 1280px gelten die Abstaende aus dem Entwurf. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .wh-header .wh-header__nav { gap: 0; margin-left: .25rem; }
  .wh-header__collapse { gap: 1.25rem; }
  nav.wh-header__navbar .wh-header__nav .nav-link,
  #content nav.wh-header__navbar .wh-header__nav .nav-link { font-size: .9375rem; padding: .5rem .55rem; }
  .wh-header__donate,
  #content .wh-header__donate { padding: .5rem 1rem; font-size: .9375rem; }
  nav.wh-header__navbar .wh-header__brand img { height: 40px; }
}

/* Burger */
.wh-header__mobileactions { display: flex; align-items: center; gap: .75rem; }
.wh-header .wh-header__burger {
  border: 0; background: none; padding: .35rem .1rem; outline: none;
  display: flex; flex-direction: column; gap: 5px; width: 30px;
}
.wh-header__burger span {
  display: block; height: 2px; width: 26px; background: #000; border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.wh-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wh-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wh-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.wh-header__metamobile { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.wh-header__metamobile li { margin-bottom: .75rem; }
.wh-header__metamobile a, #content .wh-header__metamobile a { color: #6b6b6b; font-size: 1rem; }
/* Sprachen stehen mit in dieser Liste. Die aktuelle Sprache bekommt die
   Weltkugel wie in der Kopfzeile, damit die Zeile als Sprachwahl erkennbar
   ist. */
.wh-header__langmobile.is-active > a::before { content: "\1F310"; margin-right: .35rem; }
.wh-header__langmobile.is-active > a { color: #212529; }

.wh-header__donate,
#content .wh-header__donate {
  display: inline-flex; align-items: center; gap: .45rem;
  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;
}
.wh-header__donate:hover,
#content .wh-header__donate:hover { background: #0089c4; color: #fff; }
.wh-header__donate--mobile { padding: .45rem 1.1rem; font-size: .875rem; }

/* Herzschlag – wird nur noch vom Editor-Button (button-heart) genutzt.
   Im Menue steht kein Herz mehr. */
@keyframes wh-heartbeat {
  0%   { transform: scale(1); }
  4%   { transform: scale(1.15); }
  8%   { transform: scale(1); }
  12%  { transform: scale(1.3); }
  18%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Kantonswahl */
/* Kein Platz unter der Pille. Das Hochziehen passiert nicht am Header,
   sondern am Inhaltscontainer des Themes (#header.here-i-am steht immer
   direkt nach dem Header und vor #content). So rutscht der SEITENINHALT
   unter die Pille - und nicht der Footer, wenn eine Seite leer ist. */
.wh-header__canton {
  /* Negativer Margin zieht die Pille nach oben an die Menuezeile heran -
     dadurch bleibt oben kein weisser Streifen und die Pille ragt sauber
     zur Haelfte in den Seiteninhalt. */
  padding: 0; position: relative; z-index: 2; margin-top: -15px;
}

#header.here-i-am { margin-top: -16px; }
.wh-header__cantonpill {
  display: inline-flex; align-items: center; gap: .5rem;
  /* Eigener Hintergrund noetig: der Seiteninhalt liegt jetzt darunter. */
  background: #fff;
  border: 1px solid #e0e0e0; border-radius: 2rem;
  padding: .3rem 1rem; font-size: .8125rem; color: #1a1a1a; cursor: pointer;
}
.wh-header__flag {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #e2001a; position: relative;
}
.wh-header__flag::before,
.wh-header__flag::after {
  content: ""; position: absolute; background: #fff;
}
.wh-header__flag::before { left: 6px; top: 3px; width: 2px; height: 8px; }
.wh-header__flag::after { left: 3px; top: 6px; width: 8px; height: 2px; }

/* Beim Wechsel von Handy- auf Desktopbreite laesst Bootstrap am Klappmenue
   manchmal eine Inline-Hoehe stehen (es schreibt sie waehrend des Auf- und
   Zuklappens hinein). Auf dem Desktop klafft die Kopfzeile dann auseinander,
   bis man die Seite neu laedt. Hier zuruecksetzen - zusammen mit den
   Abstaenden, die nur fuer das Handy gedacht sind. */
@media (min-width: 992px) {
  .wh-header .wh-header__collapse,
  .wh-header .wh-header__collapse.show,
  .wh-header .wh-header__collapse.collapsing {
    height: auto !important;
    background: none; margin-left: 0; margin-right: 0; padding: 0;
  }
}

@media (max-width: 991px) {
  .wh-header { top: 0; }
  /* Unten wieder knapp: die Pille sitzt hier nicht mehr in der Menuezeile,
     sondern in ihrem eigenen Band darunter. */
  .wh-header__row { gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }

  /* Fester, knapper Seitenabstand auf dem Handy statt der 15px von
     Bootstrap - Header, Kantonsband und Footer bleiben so buendig. */
  /* Seitenabstand bewusst NICHT ueberschrieben: Bootstrap bringt von Haus aus
     15px (halbe Gutter-Breite von 30px). Das ist der natuerliche Wert, auf dem
     auch das Grid aufbaut - eigene Zahlen wuerden nur davon abweichen. */
  nav.wh-header__navbar .wh-header__brand img { height: 40px; }
  .wh-header .wh-header__nav {
    flex-direction: column; align-items: flex-start; gap: 0;
    margin: 1rem 0 0; width: 100%;
  }
  /* Das Theme gibt .navbar-nav auf dem Handy 40px seitliches Padding und dem
     ersten/letzten Eintrag je 20px oben bzw. unten (app.css). Daher die
     Luecke ueber dem ersten Eintrag und die weissen Raender. Hier alles auf
     null; der Abstand kommt aus dem Panel selbst. */
  .wh-header .wh-header__nav,
  nav.wh-header__navbar .wh-header__nav { padding: 0; margin: 0; }
  .wh-header .wh-header__nav .nav-item:first-of-type { padding-top: 0; }
  .wh-header .wh-header__nav .nav-item:last-of-type { padding-bottom: 0; }
  /* Keine Trennlinien - das Menue ist eine ruhige blaue Flaeche. */
  .wh-header .wh-header__nav .nav-item { width: 100%; border-bottom: 0; }
  nav.wh-header__navbar .wh-header__nav .nav-link { padding: .6rem 0; font-size: 1.375rem; }

  /* Blaue Flaeche ueber die ganze Breite: das Klappmenue sitzt in einem
     .container, die 15px Gutter werden darum nach aussen geschoben und als
     Innenabstand wieder zugegeben. */
  .wh-header__collapse.show,
  .wh-header__collapse.collapsing {
    background: #e5f5fc;
    margin-left: -15px; margin-right: -15px;
    padding: 1.25rem 15px 1.5rem;
  }
  /* Untermenues klappen inline auf, nicht als Overlay */
  .wh-header .wh-header__dropdown {
    position: static !important; transform: none !important;
    float: none; box-shadow: none; margin: 0 0 .5rem; padding: 0 0 .5rem .75rem;
    border-left: 2px solid #ededed; min-width: 0;
  }
  .wh-header__collapse { flex-direction: column; align-items: stretch; }
  /* Kantonswahl bleibt auf dem Handy sichtbar - als ruhiges, volles Band
     unter der Logozeile, aehnlich wie live, nur zurueckhaltender koloriert. */
  .wh-header__canton { display: block; margin-top: 0; }
  /* Band-Optik (Farbe, Abstaende) steht am Dateiende bei der Kantonswahl. */
}

/* ---------------------------------------------------------------
   Breiten - nur auf der Startseite
   Bootstrap gibt .container ab 1200px fix 1140px. Das neue Design der
   Startseite lebt von mehr Platz, die Unterseiten sollen aber unveraendert
   bleiben. Darum haengen alle eigenen Breiten an der Klasse der Startseite:
   page-1 ist winterhilfe.ch, page-2301 die Vorschau-Site.
   Kopfzeile, Inhalt und Footer stehen auf derselben Linie.
   --------------------------------------------------------------- */
@media (min-width: 1400px) {
  body.page-1 .wh-header .container,
  body.page-1 #content .container,
  body.page-1 #header.here-i-am .container,
  body.page-2301 .wh-header .container,
  body.page-2301 #content .container,
  body.page-2301 #header.here-i-am .container { max-width: 1400px; }
}

/* =================================================================
   Kantonswahl - Widget aus dem Theme (lib.winterhilfeNavi*)
   -----------------------------------------------------------------
   Das Theme hat dieses Widget fuer den frueheren FIXIERTEN Header
   gebaut: feste Versaetze (top 22px, left 40px), absolut positionierte
   Container, eigene Rahmen, Radien und ein Dekorations-Dreieck. Alles
   hier an einer Stelle neutralisiert und neu gesetzt.
   ================================================================= */

.wh-header__cantonwidget,
.wh-header__cantonwidget .frame { display: flex; margin: 0; padding: 0; }
.wh-header__cantonwidget .nav-background-two { display: none; }

/* ---- Trigger-Pille ---- */
.wh-header__cantonwidget #dropdown-places {
  position: relative; top: 0; left: 0; padding: 0;
  line-height: normal; cursor: pointer;
}
.wh-header__cantonwidget #dropdown-places .dropdown-button-places {
  display: inline-flex; align-items: center; gap: .5rem;
  /* leicht blau statt grau - auf hellen Bildern verschwand die Pille */
  background: #e5f5fc; border: 0; border-radius: 2rem;
  padding: .3rem 1rem; font-size: .8125rem; line-height: 1.4; color: #1a1a1a;
}
.wh-header__cantonwidget .winterhilfe-place { color: #1a1a1a; }
/* Deutlicher Hover (auch bei offenem Menue): blau mit weisser Schrift. */
.wh-header__cantonwidget #dropdown-places .dropdown-button-places {
  transition: background-color .2s ease, color .2s ease;
}
.wh-header__cantonwidget #dropdown-places:hover .dropdown-button-places,
.wh-header__cantonwidget #dropdown-places[aria-expanded="true"] .dropdown-button-places {
  background: #009fe3;
}
.wh-header__cantonwidget #dropdown-places:hover .winterhilfe-place,
.wh-header__cantonwidget #dropdown-places:hover .fas,
.wh-header__cantonwidget #dropdown-places[aria-expanded="true"] .winterhilfe-place,
.wh-header__cantonwidget #dropdown-places[aria-expanded="true"] .fas { color: #fff; }

/* Kein rotes Kreuz in der Pille. */
.wh-header__cantonwidget #dropdown-places .swiss-flag { display: none; }
.wh-header__cantonwidget .winterhilfe-place::after { content: " – Kanton wählen"; }
html[lang^="fr"] .wh-header__cantonwidget .winterhilfe-place::after { content: " – choisir le canton"; }
html[lang^="it"] .wh-header__cantonwidget .winterhilfe-place::after { content: " – scegliere il cantone"; }
.wh-header__cantonwidget #dropdown-places .fas { font-size: .7rem; color: #009fe3; }

/* Schweizer Kreuz als CSS-Icon (in der Pille klein) */
.wh-header__cantonwidget .swiss-flag {
  display: inline-block; position: relative; flex: 0 0 auto;
  width: 14px; height: 14px; border-radius: 50%; background: #e2001a;
}
.wh-header__cantonwidget .swiss-flag::before,
.wh-header__cantonwidget .swiss-flag::after { content: ""; position: absolute; background: #fff; }
.wh-header__cantonwidget .swiss-flag::before { left: 6px; top: 3px; width: 2px; height: 8px; }
.wh-header__cantonwidget .swiss-flag::after { left: 3px; top: 6px; width: 8px; height: 2px; }

/* ---- Aufgeklapptes Panel ---- */
/* Bezugsrahmen fuer das Panel: direkt unter der Pille. */
.wh-header__cantonwidget .frame { position: relative; }

.wh-header__cantonwidget #check-places {
  /* Bootstrap positioniert Dropdowns mit Popper.js per Inline-Style und
     klappt sie bei wenig Platz nach OBEN - das Panel legt sich dann ueber
     den Header. Hier immer nach unten; !important ist noetig, weil Popper
     Inline-Styles setzt. Die Hoehe passt sich dem Fenster an und scrollt
     intern, statt aus dem Bild zu laufen. */
  position: absolute !important; top: 100% !important; left: 0 !important;
  bottom: auto !important; right: auto !important; transform: none !important;
  width: 30rem; max-width: 92vw;
  max-height: calc(100vh - 180px); overflow-y: auto; overscroll-behavior: contain;
  margin-top: .5rem; padding: 0;
  background: #fff; border: 0; border-radius: .5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
}
/* Deko-Dreieck des Themes entfernen */
.wh-header__cantonwidget #check-places::before,
.wh-header__cantonwidget #check-places::after,
.wh-header__cantonwidget .container-for-list::before,
.wh-header__cantonwidget .container-for-list::after,
.wh-header__cantonwidget .content-relative::before,
.wh-header__cantonwidget .content-relative::after { content: none; display: none; }

/* Alle Theme-Container neutral: kein eigenes Mass, kein Rahmen */
.wh-header__cantonwidget #check-places .container-for-list,
.wh-header__cantonwidget #check-places .content-relative,
.wh-header__cantonwidget #check-places .container-scrollbar,
.wh-header__cantonwidget #check-places .container-scrollbar2,
.wh-header__cantonwidget #check-places .container {
  position: static; width: 100%; max-width: 100%;
  height: auto; min-height: 0; max-height: none; overflow: visible;
  margin: 0; padding: 0; background: none;
  border: 0; border-radius: 0; box-shadow: none;
}

/* ---- Zeilen: alle identisch, eine durchgehende Linie dazwischen ---- */
.wh-header__cantonwidget #check-places .places-link,
.wh-header__cantonwidget #check-places .places-link-no-scroll {
  display: block; margin: 0; padding: 0; text-decoration: none;
  border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid #ededed;
}
/* Erste Zeile oben ohne Linie. Das Theme stylt sie ueber
   "#check-places .container-for-list .content-relative .places-link-no-scroll"
   mit dunkler Unterkante (#868686) und 5px Radius - daher hier mindestens
   genauso spezifisch. */
.wh-header__cantonwidget #check-places .container-for-list .content-relative .places-link-no-scroll {
  border: 0; border-radius: 0; box-shadow: none;
}

.wh-header__cantonwidget #check-places .row {
  display: flex; flex-wrap: nowrap; align-items: center;
  /* feste Hoehe + zentriert = oben und unten exakt gleich viel Luft */
  min-height: 52px; box-sizing: border-box;
  margin: 0; padding: 0 1.25rem;
  border: 0; border-radius: 0; background: none;
  transition: background-color .15s ease;
}
.wh-header__cantonwidget #check-places .row:hover { background: #f5f8fa; }
/* Die Bootstrap-Spalte des Themes streckt sich auf volle Zeilenhoehe -
   ohne eigenes Zentrieren klebt der Inhalt oben. */
.wh-header__cantonwidget #check-places .row > [class*="col-"] {
  flex: 1 1 auto; max-width: none; padding: 0;
  display: flex; align-items: center; align-self: stretch;
}

/* Name + Wappen */
/* Theme zentriert per "position: absolute; top: 50%; transform:
   translate(0,-50%)". Ohne absolute Position bleibt der transform aber
   aktiv und schiebt den Namen um die halbe Hoehe nach oben - also auch
   den transform zuruecksetzen. */
.wh-header__cantonwidget #check-places .wh-name {
  position: static; top: auto; transform: none;
  display: flex; align-items: center; gap: .75rem;
  font-size: 1rem; line-height: 1.4; color: #212529; white-space: nowrap;
}
/* Kantone: ihr Wappen (Hintergrundbild kommt aus dem Theme ueber
   .area-CH-*). Winterhilfe Schweiz hat kein Wappen - dort die
   Schneeflocke aus dem Logo statt des roten Kreuzes. */
.wh-header__cantonwidget #check-places .wh-name::before {
  content: ""; display: block;
  width: 28px; height: 28px; flex: 0 0 28px;
  /* .area-CH-*:before im Theme haengt 6px margin-right an - Abstand
     regelt hier allein das gap. */
  margin: 0 !important;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
/* VORERST: Wappen ausgeschaltet, ueberall die Schneeflocke. Um die Wappen
   zurueckzuholen, nur ":not([class*="area-"])" wieder in den Selektor
   einsetzen - dann bekommt nur Winterhilfe Schweiz die Flocke. */
.wh-header__cantonwidget #check-places .wh-name::before {
  background-image: url("/Images/schneeflocke.svg") !important;
  background-size: 20px 20px !important;
  /* Rechts ausgerichtet wie die Wappen (deren Schild endet ~2px vor dem
     Feldrand) - so ist der sichtbare Abstand Icon -> Text ueberall gleich. */
  background-position: right 2px center;
}
.wh-header__cantonwidget #check-places .row:hover .wh-name { color: #009fe3; }

/* Kein rotes Schweizerkreuz in der Liste - auch Winterhilfe Schweiz
   bekommt die Schneeflocke. (In der Pille oben bleibt das Kreuz.) */
/* Die Zeile hat ihre Schneeflocke schon ueber .wh-name::before -
   das Flaggen-Element daher ganz ausblenden, sonst erscheinen zwei. */
.wh-header__cantonwidget #check-places .swiss-flag { display: none; }
.wh-header__cantonwidget #check-places .swiss-flag::before,
.wh-header__cantonwidget #check-places .swiss-flag::after { content: none; }

/* "Zur Website" entfaellt - die ganze Zeile ist der Link */
.wh-header__cantonwidget #check-places .button-wh { display: none; }

/* ---- Handy: Kantonswahl als hellblaues Band ueber die volle Breite ----
   Die Pille selbst verschmilzt mit dem Band (kein eigenes Kaestchen),
   Abstaende oben/unten knapp. */
@media (max-width: 991px) {
  .wh-header .wh-header__canton { background: #e5f5fc; }
  .wh-header .wh-header__canton .container { padding-top: .3rem; padding-bottom: .3rem; }
  .wh-header__cantonwidget #dropdown-places .dropdown-button-places {
    background: transparent; padding-left: 0; padding-right: 0; font-size: .9375rem;
  }
  /* Hover-Blau der Desktop-Pille hier nicht - das Band bleibt ruhig */
  .wh-header__cantonwidget #dropdown-places:hover .dropdown-button-places,
  .wh-header__cantonwidget #dropdown-places[aria-expanded="true"] .dropdown-button-places { background: transparent; }
  .wh-header__cantonwidget #dropdown-places:hover .winterhilfe-place,
  .wh-header__cantonwidget #dropdown-places[aria-expanded="true"] .winterhilfe-place { color: #1a1a1a; }
  .wh-header__cantonwidget #dropdown-places:hover .fas,
  .wh-header__cantonwidget #dropdown-places[aria-expanded="true"] .fas { color: #009fe3; }
}

/* ---- Handy/Tablet: Inhalt ueber die volle Breite, fuer die ganze Seite ----
   Bootstrap setzt .container zwischen 576 und 991px auf feste 540/720px und
   zentriert - auf groesseren Handys entstehen so links und rechts ~35px
   zusaetzlicher Rand. Hier fluid mit einem knappen, festen Seitenabstand.
   "body" im Selektor, weil Bootstrap mit gleicher Spezifitaet arbeitet. */
@media (max-width: 991px) {
  body .container {
    max-width: 100%;
    padding-left: 16px; padding-right: 16px;
  }
  /* verschachtelte Container (z.B. Inhaltselemente in #content) nicht
     doppelt einruecken */
  body .container .container { padding-left: 0; padding-right: 0; }

  /* Bootstrap nullt unter 992px das Padding von ".navbar-expand-lg > .container"
     - Logo und Burger klebten am Rand statt buendig mit dem Inhalt. */
  nav.wh-header__navbar > .container.wh-header__row {
    padding-left: 16px; padding-right: 16px;
  }
}

/* ---- Schmale Handys (bis 480px, z.B. iPhone 390px) ----
   Logo 46px + "Spenden" + Burger passen nicht nebeneinander - der Button
   rutschte in eine zweite Zeile. Etwas kleiner, alles in einer Linie. */
@media (max-width: 480px) {
  /* app.css fixiert unter 560px ".navbar .navbar-brand img" auf
     width: 209px !important - nur mit !important zu ueberstimmen. */
  .wh-header nav.wh-header__navbar .wh-header__brand img { height: 34px; width: auto !important; }
  nav.wh-header__navbar > .container.wh-header__row { column-gap: .5rem; }
  .wh-header__mobileactions { gap: .5rem; }
  .wh-header__donate--mobile,
  #content .wh-header__donate--mobile { padding: .4rem .85rem; font-size: .875rem; }
}

/* =================================================================
   Suche - Band ueber die volle Breite (wie bisher, aber auf Weiss)
   ================================================================= */
/* Bezugsrahmen fuer das Band ist der ganze Header (sticky = positioniert),
   nicht der kleine Listenpunkt mit der Lupe. */
.wh-header .wh-header__searchwrap { position: static; }

.wh-header .wh-header__searchbox {
  /* Popper setzt Position per Inline-Style - daher !important */
  /* Beginnt direkt unter der Menuezeile (16px = der Teil der Kantonspille,
     der unter den Header ragt) - sonst blitzt zwischen Menue und Suchband
     ein Streifen Bild durch. Die Pille liegt per z-index darueber. */
  position: absolute !important; top: calc(100% - 16px) !important; left: 0 !important;
  right: 0 !important; bottom: auto !important; transform: none !important;
  width: 100%; margin: 0; border: 0; border-radius: 0;
  padding: calc(3rem + 16px) 0 3rem;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  z-index: 1;
}
.wh-header .wh-header__canton { z-index: 3; }
.wh-header .wh-header__searchbox form {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: .75rem; margin: 0 !important;
}
.wh-header .wh-header__searchbox input[type="search"] {
  flex: 0 1 480px; width: auto; height: 46px; margin: 0 !important;
  padding: 0 .9rem; font-size: 1rem;
  border: 1px solid #ced4da; border-radius: 4px; background: #fff; color: #212529;
}
.wh-header .wh-header__searchbox input[type="search"]:focus {
  outline: none; border-color: #009fe3; box-shadow: 0 0 0 3px rgba(0,159,227,.15);
}
.wh-header .wh-header__searchbox button[type="submit"],
#content .wh-header .wh-header__searchbox button[type="submit"] {
  flex: 0 0 auto; height: 46px; margin: 0 !important;
  padding: 0 1.9rem; border: 0; border-radius: 2rem;
  background: #009fe3; color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer;
}
.wh-header .wh-header__searchbox button[type="submit"]:hover { background: #0089c4; }

@media (max-width: 991px) {
  /* Auf dem Handy ist die Kantonswahl ein eigenes Band - keine Ueberlappung */
  .wh-header .wh-header__searchbox { top: 100% !important; padding: 2rem 0; }
}
@media (max-width: 575px) {
  .wh-header .wh-header__searchbox { padding: 1.5rem 0; }
  .wh-header .wh-header__searchbox input[type="search"] { flex: 1 1 auto; min-width: 0; }
}

/* =================================================================
   Button aus dem Editor: Link markieren -> Format "Button mit Herz"
   (eigene Klasse button-heart, siehe Configuration/RTE/Neu.yaml).
   Die Theme-Klasse button-wh-blue bleibt unberuehrt.
   ----------------------------------------------------------------- */
#content a.button-heart,
.wh-content a.button-heart {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 46px; padding: 0 1.5rem; margin: 0;
  border: 0; border-radius: 2rem; background: #009fe3; color: #fff;
  font-size: 1rem; line-height: 1.5; font-weight: 500; text-decoration: none;
  transition: background-color .2s ease;
}
#content a.button-heart:hover,
#content a.button-heart:focus {
  background: #0089c4; color: #fff; text-decoration: none;
}
#content a.button-heart::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: #fff;
  -webkit-mask: var(--wh-heart) center / contain no-repeat;
  mask: var(--wh-heart) center / contain no-repeat;
  /* gleicher Herzschlag wie im Header-Button */
  transform-origin: center;
  animation: wh-heartbeat 5s ease-in-out infinite;
  animation-delay: 4s;
}
@media (prefers-reduced-motion: reduce) {
  #content a.button-heart::before { animation: none; }
}
:root {
  --wh-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.7-9.3-9A5.3 5.3 0 0 1 12 6.6 5.3 5.3 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z'/%3E%3C/svg%3E");
}

/* Standard-Inhaltselemente (Text, Bild ...) stehen im Theme ohne Raster,
   weil dort alles in Gridelements liegt. Auf der neuen Website bekommen
   sie dieselbe Breite wie die neuen Content Blocks. */
#content > .frame {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: 15px; padding-right: 15px;
}
/* gleiche Stufen wie .container von Bootstrap, damit Text- und
   Bildelemente exakt mit den neuen Blocks fluchten */
@media (min-width: 576px)  { #content > .frame { max-width: 540px; } }
@media (min-width: 768px)  { #content > .frame { max-width: 720px; } }
@media (min-width: 992px)  { #content > .frame { max-width: 960px; } }
@media (min-width: 1200px) { #content > .frame { max-width: 1140px; } }
@media (min-width: 1400px) {
  body.page-1 #content > .frame,
  body.page-2301 #content > .frame { max-width: 1400px; }
}
@media (max-width: 991px) {
  #content > .frame { max-width: 100%; padding-left: 16px; padding-right: 16px; }
}
/* Das Theme packt die Ueberschrift nochmals in einen .container - sonst
   steht sie 15px weiter rechts als der Text darunter. */
#content > .frame .container { max-width: none; padding-left: 0; padding-right: 0; }

/* Klebt die Kopfzeile oben, ist die Meta-Zeile aus dem Bild gescrollt und
   das Logo saesse ohne diesen Zuschlag direkt an der Bildschirmkante.
   Die Klasse setzt header.js. */
.wh-header.is-stuck .wh-header__row { padding-top: 13px; }
@media (max-width: 991px) {
  /* Auf dem Handy klebt die Kopfzeile ganz oben (top: 0), die Meta-Zeile
     bleibt also sichtbar - dort braucht es den Zuschlag nicht. */
  .wh-header.is-stuck .wh-header__row { padding-top: .75rem; }
}