/* ------------------------------------------------------------------
   verein.css, Zusatz vom 01.09.2026

   Die Website des Versorgungswerks nutzt das bestehende Designsystem
   der Handwerker-Seite unveraendert: site.css und premium.css werden
   NICHT angefasst. Hier steht nur, was durch den neuen Absender
   dazukommt:

     1. die Absenderzeile in der Kopfzeile, Logo plus Vereinsname
     2. die beiden Leitfaden-Eintraege in der Hero-Karte, an der
        Stelle, an der frueher das Formular stand

   Farben und Schriften kommen aus site.css, hier wird keine neue
   Farbe eingefuehrt.

   ACHTUNG, Befund vom 01.09.2026: Die Kopfzeile hat in site.css
   `background:var(--white)`. Eine erste Fassung dieser Datei hatte die
   Textmarke weiss gesetzt, sie war damit auf weissem Grund unsichtbar.
   Alles, was hier in die Kopfzeile kommt, muss dunkel sein.
   ------------------------------------------------------------------ */

/* 1. Absenderzeile in der Kopfzeile ------------------------------- */
.vw-marke{display:flex;align-items:center;gap:14px;text-decoration:none}
.vw-marke img{height:42px;width:auto;display:block}
.vw-strich{width:1px;height:34px;background:var(--border);flex:0 0 1px}
.vw-verein{display:flex;flex-direction:column;line-height:1.2}
.vw-verein-1{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;
  color:var(--cosmic);letter-spacing:.2px;text-transform:uppercase}
.vw-verein-2{font-size:9.5px;font-weight:600;color:var(--g400);letter-spacing:.4px}
.vw-marke:hover .vw-verein-1{color:var(--g600)}

/* Auf schmalen Schirmen bleibt nur das Logo, der Vereinsname wandert
   in die Fusszeile, wo er ohnehin vollstaendig steht. */
@media (max-width:900px){
  .vw-strich,.vw-verein{display:none}
  .vw-marke img{height:36px}
}

/* 2. Leitfaden-Eintraege in der Hero-Karte ------------------------ */
.vw-lf{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.vw-lf:last-of-type{border-bottom:0}
.vw-lf-nr{flex:0 0 30px;height:30px;border-radius:50%;background:var(--aurora);color:var(--cosmic);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center}
.vw-lf h3{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:#fff;margin:2px 0 6px}
.vw-lf p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62);margin:0 0 8px}
.vw-lf a{font-size:13.5px;font-weight:600;color:var(--aurora);text-decoration:none;border-bottom:1px solid transparent}
.vw-lf a:hover{border-bottom-color:var(--aurora)}

/* Die Navigationspunkte des Versorgungswerks sind laenger als die der alten
   Seite, etwa "Gesetzlich oder privat". Ohne nowrap brechen sie innerhalb des
   Links um und die Kopfzeile wirkt unruhig. Befund vom 01.09.2026. */
.nav-links a{white-space:nowrap}

/* ------------------------------------------------------------------
   Zwei Bausteine, die es im alten Designsystem noch nicht gab, weil die
   bisherige Website weder Wertetabellen noch einspaltige Unterseiten-Heros
   hatte. Beide benutzen ausschliesslich Farben und Masse aus site.css.
   ------------------------------------------------------------------ */

/* Einspaltiger Hero fuer Unterseiten ohne rechte Karte */
.hero-grid.einspaltig{grid-template-columns:1fr;max-width:820px}

/* Wertetabellen, etwa die Rechengroessen 2026 */
table.werte{width:100%;border-collapse:collapse;margin:22px 0;font-size:16px;max-width:680px}
table.werte td{padding:10px 0;border-bottom:1px solid var(--border);vertical-align:top;color:var(--g600);line-height:1.6}
table.werte tr:last-child td{border-bottom:0}
table.werte td.w{text-align:right;font-weight:700;color:var(--cosmic);white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  table.werte,table.werte tbody,table.werte tr,table.werte td{display:block;width:100%}
  table.werte tr{padding:10px 0;border-bottom:1px solid var(--border)}
  table.werte tr:last-child{border-bottom:0}
  table.werte td{border:0;padding:0;white-space:normal}
  table.werte td.w{text-align:left;padding-left:0;margin-top:3px;font-size:17px;white-space:normal;overflow-wrap:anywhere}
}

/* ------------------------------------------------------------------
   Tabellen in den Rechtstexten, Befund vom 01.09.2026.

   Die Datenschutzerklaerung bringt drei Tabellen aus der bisherigen
   Website mit. Sie haben keine Klasse. Die alte Seite hatte dafuer eine
   Regel unter `.rechtstext table`, diese Klasse gibt es seit der
   Umstellung auf `section.fach` nicht mehr. Damit standen die Tabellen
   ohne jede Gestaltung da und liefen auf schmalen Schirmen ueber den
   Rand hinaus, gemessen 427 statt 390 px.

   `:not(.werte)` ist wichtig: Die Wertetabellen weiter oben haben eine
   eigene Regel und duerfen davon nicht erfasst werden.
   ------------------------------------------------------------------ */
.fach table:not(.werte){
  width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;
  margin:22px 0;font-size:15px}
.fach table:not(.werte) th{
  text-align:left;padding:10px 12px 10px 0;vertical-align:top;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;color:var(--cosmic);
  border-bottom:2px solid var(--cosmic)}
.fach table:not(.werte) td{
  padding:11px 12px 11px 0;vertical-align:top;line-height:1.55;
  color:var(--g600);border-bottom:1px solid var(--border);
  overflow-wrap:break-word;hyphens:auto}
.fach table:not(.werte) th:last-child,
.fach table:not(.werte) td:last-child{padding-right:0}
.fach table:not(.werte) tr:last-child td{border-bottom:0}
.fach table:not(.werte) th:first-child{width:34%}

/* Die Kopfzeile bekommt dieselbe Umbruchregel wie die Zellen. Ohne sie
   ragen lange Woerter wie "Rechtsgrundlage" in die Nachbarspalte,
   gemessen am 01.09.2026 auf 390 px. */
.fach table:not(.werte) th{overflow-wrap:break-word;hyphens:auto}

@media (max-width:760px){
  /* Drei Spalten passen auf einem Telefon nicht nebeneinander. Gemessen am
     01.09.2026: die drei Spalten brauchen selbst bei 12 pt Schrift noch
     391 px, verfuegbar sind 350. Statt die Schrift unleserlich klein zu
     machen oder mitten im Wort umzubrechen, wird jede Zeile zu einem Block.
     Die Spaltenueberschrift steht dann ueber dem jeweiligen Wert, sie kommt
     aus dem Attribut data-label der Zelle. */
  .fach table:not(.werte),
  .fach table:not(.werte) tbody,
  .fach table:not(.werte) tr,
  .fach table:not(.werte) td{display:block;width:100%}
  .fach table:not(.werte) tr:first-child{display:none}
  .fach table:not(.werte) tr{padding:16px 0;border-bottom:1px solid var(--border)}
  .fach table:not(.werte) tr:last-child{border-bottom:0}
  .fach table:not(.werte) td{border:0;padding:0 0 10px 0;font-size:15px;line-height:1.55}
  .fach table:not(.werte) tr td:last-child{padding-bottom:0}
  .fach table:not(.werte) td::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;
    letter-spacing:.4px;text-transform:uppercase;color:var(--cosmic)}
  .fach table:not(.werte) td:not([data-label])::before{content:none}
}

/* ------------------------------------------------------------------
   Formular auf hellem Grund, Befund vom 01.09.2026.

   Die Bausteine .f-field, .f-check und .f-note stammen aus der
   Hero-Karte der Startseite. Die steht auf dunklem Grund, deshalb sind
   dort Beschriftungen und Eingabetext weiss und die Rahmen halb
   durchsichtig weiss. Auf der Kontaktseite liegt dasselbe Formular in
   einer `section.fach` auf weissem Grund. Ergebnis: weisse Schrift auf
   weissem Grund, das Formular war unsichtbar. Live gesehen am
   01.09.2026 nach dem ersten Upload.

   Deshalb hier eine helle Fassung, ausschliesslich innerhalb von
   `.fach`. Die Hero-Karte der Startseite bleibt unberuehrt.
   ------------------------------------------------------------------ */
.fach form{max-width:560px}

.fach .f-field{margin-bottom:18px}
.fach .f-field label{font-size:14px;font-weight:600;color:var(--cosmic);margin-bottom:6px}

.fach .f-field input[type=text],
.fach .f-field input[type=email],
.fach .f-field select,
.fach .f-field textarea{
  /* 16px, damit Safari auf dem iPhone beim Antippen nicht hineinzoomt */
  font-size:16px;color:var(--cosmic);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}

.fach .f-field input:focus,
.fach .f-field select:focus,
.fach .f-field textarea:focus{
  border-color:var(--cosmic);background:var(--white);
  box-shadow:0 0 0 3px rgba(0,27,65,.10)}

.fach .f-field textarea{min-height:110px}

.fach .f-check{margin:20px 0 18px}
.fach .f-check label{font-size:14px;color:var(--g600)}
.fach .f-check label a{color:var(--cosmic);border-bottom:1px solid var(--border)}
.fach .f-check label a:hover{border-bottom-color:var(--cosmic)}

.fach .f-note{font-size:13.5px;color:var(--g600);margin-top:14px;line-height:1.55}

/* Pflichtfeldstern in Aurora, damit er sich vom Text abhebt, ohne dass
   eine neue Farbe dazukommt. */
.fach .f-field label .pflicht{color:var(--cosmic)}