@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&family=Patua+One&display=swap');

/* Wundnetzwerk Zentralschweiz - Brand-Overrides gegen das Dublin-Theme.
   Gilt in allen HTML-Bloecken, die mit <div class="wnz"> beginnen. */

/* Schriften */
.wnz, .wnz p, .wnz li, .wnz a, .wnz span, .wnz strong, .wnz em, .wnz h3,
.wnz label, .wnz input, .wnz select, .wnz textarea, .wnz button, .wnz td, .wnz th {
  font-family: 'PT Sans Narrow', sans-serif !important;
}
.wnz h1, .wnz h2, .wnz details.rub summary, .wnz .tl-jahr {
  font-family: 'Patua One', serif !important;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0 !important;
}
.wnz h1, .wnz h2 { color: #3D5310; }

/* Theme-Verzierungen neutralisieren */
.wnz h3 { font-style: normal !important; text-decoration: none !important; letter-spacing: 0 !important; }
.wnz a { color: #6F9517; }
.wnz .tile, .wnz .tile:hover, .wnz .btn, .wnz .btn-mini, .wnz .bedarf a, .wnz .jump a,
.wnz a.badge, .wnz a.badge-firma, .wnz a.badge-sponsor, .wnz details.rub summary {
  text-decoration: none !important;
}


/* ==========================================================
   NAVIGATION
   Nicht auf .wnz beschraenkt, das ist ClubDesk-Markup.
   ========================================================== */

/* Balken durchgehend weiss, aussen und innen.
   Nur .cd-navigation-bar-content laesst oben das Bannerbild durchscheinen. */
.cd-navigation-bar {
  background-color: #FFFFFF;
  padding-top: 0 !important;
}
.cd-navigation-bar-content {
  background-color: #FFFFFF;
  margin-top: 0 !important;
}

/* CTA "Mitglied werden" als rote Pille.
   Beide Slug-Schreibweisen abgedeckt, der Seitenname wechselte schon
   zwischen mitglied_werden und mitglied-werden. *= statt $=, damit
   ein Praefix wie /entwurf/ oder ein Schraegstrich am Ende nichts bricht.
   Kein cd-menu-active/cd-menu-selected mehr noetig - die Grundregel
   gilt ohnehin fuer alle Zustaende, der Button bleibt immer #890C00. */
a.cd-menu-item[href*="mitglied_werden"],
a.cd-menu-item[href*="mitglied-werden"] {
  background-color: #890C00 !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 8px 26px !important;
  border: 0 !important;
  margin: 0 24px 0 0 !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.3 !important;
}

/* Hover nur dezent abdunkeln, kein Farbwechsel. */
a.cd-menu-item[href*="mitglied_werden"]:hover,
a.cd-menu-item[href*="mitglied-werden"]:hover {
  background-color: #6E0A00 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* Sichtbarer Fokus fuer Tastaturbedienung, Pflicht nach WCAG. */
a.cd-menu-item[href*="mitglied_werden"]:focus-visible,
a.cd-menu-item[href*="mitglied-werden"]:focus-visible {
  outline: 3px solid #3D5310 !important;
  outline-offset: 2px !important;
}

/* Im Burger-Menue volle Breite statt schmaler Pille mittendrin.
   Kein Media-Query noetig: .cd-mobile-menu existiert nur in der
   mobilen Ansicht, damit entfaellt das Raten des Breakpoints. */
.cd-mobile-menu a.cd-menu-item[href*="mitglied_werden"],
.cd-mobile-menu a.cd-menu-item[href*="mitglied-werden"] {
  display: block !important;
  text-align: center !important;
  margin: 14px 16px !important;
  padding: 12px 20px !important;
}


/* ==========================================================
   ANMELDEFORMULAR
   Setzt <div class="wnz wnz-form"> um den Formularblock voraus.
   Ersetzt saemtliche Inline-Styles im HTML.
   ========================================================== */

.wnz-form {
  max-width: 920px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #575656;
}

/* Feldbeschriftung. Als <label> wenn ein echtes Feld folgt,
   als <div class="lbl"> bei Radiogruppen (dort waere for="" ungueltig). */
.wnz-form .cd-data-label,
.wnz-form .lbl {
  font-size: 17px;
  font-weight: 700;
  color: #575656;
  display: block;
  margin-bottom: 6px;
}

/* Zusatz in Klammern: "(erforderlich)", "(optional)" usw.
   Kein helles Grau mehr - #8A8A8A lag bei 3.45:1 und fiel damit durch. */
.wnz-form .hint {
  font-weight: 400;
  color: #6E6E6E;
}

/* Erlaeuterungstext unter einem Feld */
.wnz-form .note {
  font-size: 14px;
  color: #6E6E6E;
  margin: 6px 0 0;
}

.wnz-form a { color: #3D5310; text-decoration: underline; }

/* Hinweiskasten Jahresbeitrag */
.wnz-form .infobox {
  background: #F2F6EA;
  border: 1.5px solid #6F9517;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  margin-top: 14px;
  color: #575656;
}

/* Eingabefelder. ClubDesk erzeugt das Markup selber, deshalb generisch. */
.wnz-form input[type="text"],
.wnz-form input[type="email"],
.wnz-form input[type="tel"],
.wnz-form input[type="number"],
.wnz-form select,
.wnz-form textarea {
  font-size: 16px;
  color: #575656;
  border: 1.5px solid #C7C7C7;
  border-radius: 6px;
  padding: 9px 12px;
  box-sizing: border-box;
  background: #FFFFFF;
}

.wnz-form input:focus-visible,
.wnz-form select:focus-visible,
.wnz-form textarea:focus-visible,
.wnz-form .cd-form-option:focus-within {
  outline: 3px solid #3D5310;
  outline-offset: 2px;
}

/* Radio- und Checkbox-Zeilen etwas Luft geben */
.wnz-form .cd-form-option,
.wnz-form .cd-form-checkbox-container {
  display: block;
  margin: 6px 0;
  line-height: 1.45;
}

.wnz-form .cd-form-item-row,
.wnz-form .cd-form-row { margin-bottom: 18px; }

/* Absendeknopf: linksbuendig, rot, Normalschreibung.
   Durchgehend !important, weil ClubDesks .cd-button-primary sonst
   Farbe, Ausrichtung und Versalien selber setzt. */
.wnz-form .cd-form-submit-row {
  margin-top: 28px;
  text-align: left !important;
  display: block !important;
}
.wnz-form input[type="submit"],
.wnz-form input[type="submit"].cd-button,
.wnz-form input[type="submit"].cd-button-primary {
  background: #890C00 !important;
  background-color: #890C00 !important;
  border: 0 !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
  padding: 12px 32px !important;
  cursor: pointer;
  float: none !important;
  display: inline-block !important;
  margin: 0 auto 0 0 !important;
  position: static !important;
  width: auto !important;
}
.wnz-form input[type="submit"]:hover {
  background: #6E0A00 !important;
  background-color: #6E0A00 !important;
}
.wnz-form input[type="submit"]:focus-visible {
  outline: 3px solid #3D5310 !important;
  outline-offset: 2px !important;
}

/* Mobil: 40px Seitenabstand sind auf dem Handy zu viel */
@media (max-width: 767px) {
  .wnz-form input[type="submit"] { width: 100% !important; }
}


/* ==========================================================
   MOBILER NAVIGATIONSBALKEN
   ========================================================== */

/* ClubDesk setzt in page.css selber
   .cd-mobile-menu-bar-content { background: none !important; }
   und macht damit sein eigenes Weiss wieder kaputt. Ein zweites
   !important reicht dagegen nicht, es braucht hoehere Spezifitaet:
   zwei Klassen statt einer.
   Kein Media-Query noetig, die Leiste existiert nur mobil. */
.cd-mobile-menu-bar,
.cd-mobile-menu-bar .cd-mobile-menu-bar-content,
.cd-mobile-menu-bar .cd-mobile-menu-bar-content.scroll-offset-mobile {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}