/* ---------------------------------------------------------------
   Die WhatsApp-Seite

   Uebernommen von der alten Seite. Das Stylesheet war dort schon unter
   .fa-wa gekapselt und arbeitete mit eigenen Farbvariablen - deshalb
   musste nichts neu geschrieben werden: Die Variablen zeigen jetzt auf
   die des Themes, und die Schrift kommt aus dem Theme statt aus dem
   System.

   Das Gruen bleibt. Es ist die Farbe von WhatsApp und sagt auf einen
   Blick, worum es geht; die Marke des Filderanzeigers steht in der
   Kopfleiste darueber.

   Die Ausrufezeichen stammen aus der alten Seite, wo das Newspaper-Theme
   in jede Ueberschrift hineinregierte. Unter GeneratePress waeren die
   meisten entbehrlich - sie stehen zu lassen ist trotzdem billiger, als
   sie einzeln zu pruefen und dabei eine zu uebersehen, die noch gebraucht
   wird.

   Die Versalien der alten Seite sind raus - im Haus wird nichts durch
   Grossbuchstaben hervorgehoben. Die leichte Sperrung traegt die
   Auszeichnung allein.
   --------------------------------------------------------------- */

.fa-wa{
  --tinte:var(--fa-tinte);
  --papier:var(--fa-papier);
  --karte:var(--fa-karte);
  --linie:var(--fa-linie);
  --grau:var(--fa-text-sekund);
  --signal:var(--fa-rot);
  /* Das Gruen ist die Farbe von WhatsApp und bleibt, wie es war. */
  --gruen:#1D8B4E;
  --gruen-tief:#146B3B;
  font-family:inherit;
  color:var(--tinte);background:var(--papier);line-height:1.55;-webkit-font-smoothing:antialiased;}
.fa-wa *,.fa-wa *::before,.fa-wa *::after{box-sizing:border-box;}
.fa-wa p{margin:0 0 14px;}
.fa-wa .wrap{max-width:1040px;margin:0 auto;padding:0 20px;}



/* ---------- Kopf ---------- */
.fa-wa .kopf{background:var(--tinte);color:#fff;padding:52px 0 56px;}
.fa-wa .eyebrow{font-size:12.5px;letter-spacing:1.1px;color:#8FC7A6;font-weight:700;margin-bottom:14px;}
.fa-wa h1{font-size:clamp(30px,5.4vw,50px);line-height:1.08;margin:0 0 16px;font-weight:800;letter-spacing:-.02em;max-width:15ch;}
.fa-wa .lead{font-size:clamp(16px,2.1vw,19px);color:#CFD3CC;max-width:46ch;margin:0;}
.fa-wa .kopf-grid{display:flex;gap:44px;align-items:center;flex-wrap:wrap;}
.fa-wa .kopf-text{flex:1 1 320px;min-width:0;}

/* ---------- Signature: Handy-Vorschau ---------- */
.fa-wa .phone{flex:0 0 268px;width:268px;background:#0B0D0C;border-radius:30px;padding:9px;box-shadow:0 22px 50px rgba(0,0,0,.42);}
.fa-wa .phone-in{background:#ECE4DA;border-radius:23px;overflow:hidden;}
.fa-wa .phone-bar{background:var(--gruen-tief);color:#fff;padding:13px 14px;display:flex;align-items:center;gap:9px;}
.fa-wa .avatar{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--gruen-tief);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 30px;}
.fa-wa .phone-bar b{font-size:12.5px;display:block;line-height:1.25;}
.fa-wa .phone-bar span{font-size:10.5px;color:#B7DCC5;}
.fa-wa .chat{padding:14px 12px 20px;}
.fa-wa .bubble{background:#fff;border-radius:3px 12px 12px 12px;padding:11px 12px 8px;font-size:12.5px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.09);}
.fa-wa .bubble .head{font-weight:800;margin-bottom:8px;}
.fa-wa .bubble .rule{color:#B9BEB6;letter-spacing:-1px;margin:9px 0 6px;font-size:11px;overflow:hidden;}
.fa-wa .bubble .ort{font-weight:800;margin-bottom:7px;}
.fa-wa .bubble .kicker{color:var(--grau);font-size:11.5px;}
.fa-wa .bubble .titel{font-weight:700;}
.fa-wa .bubble .link{color:#2A6FB0;word-break:break-all;font-size:11.5px;}
.fa-wa .bubble .zeit{text-align:right;color:#9AA096;font-size:10px;margin-top:6px;}

/* ---------- Abschnitte ---------- */
.fa-wa .sektion{padding:52px 0;}
.fa-wa .sektion--hell{background:var(--papier);}
.fa-wa h2{font-size:clamp(21px,3vw,27px);font-weight:800;letter-spacing:-.01em;margin:0 0 8px;}
.fa-wa .sub{color:var(--grau);margin:0 0 28px;max-width:56ch;}

/* ---------- Kanal-Karte ---------- */
.fa-wa .kanal{background:var(--tinte);color:#fff;border-radius:14px;padding:30px 32px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.fa-wa .kanal-text{flex:1 1 300px;min-width:0;}
.fa-wa .kanal h3{margin:0 0 8px;font-size:21px;font-weight:800;}
.fa-wa .kanal p{color:#C6CBC4;margin:0;font-size:15px;max-width:52ch;}
.fa-wa .badge{display:inline-block;background:var(--signal);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:4px;margin-bottom:12px;}

/* ---------- Ortsraster ---------- */
.fa-wa .orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;list-style:none;padding:0;margin:0;}
.fa-wa .ort-karte{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px;transition:border-color .18s ease,transform .18s ease;}
.fa-wa .ort-karte:hover{border-color:var(--gruen);transform:translateY(-2px);}
.fa-wa .ort-name{font-size:17px;font-weight:800;letter-spacing:-.01em;}
.fa-wa .ort-teil{font-size:13px;color:var(--grau);margin-top:3px;}

/* ---------- Knöpfe ---------- */
.fa-wa .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gruen);color:#fff;font-size:15px;font-weight:700;text-decoration:none;padding:12px 20px;border-radius:8px;transition:background .18s ease;}
.fa-wa .btn:hover{background:var(--gruen-tief);color:#fff;}
.fa-wa .btn--klein{font-size:14px;padding:10px 16px;align-self:flex-start;}
.fa-wa .btn--weiss{background:#fff;color:var(--tinte);}
.fa-wa .btn--weiss:hover{background:#E8E4DA;color:var(--tinte);}
.fa-wa a:focus-visible,.fa-wa .btn:focus-visible{outline:3px solid var(--signal);outline-offset:3px;}

/* ---------- So läuft's ---------- */
.fa-wa .schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px 30px;list-style:none;padding:0;margin:0;}
.fa-wa .schritt{border-top:3px solid var(--tinte);padding-top:14px;}
.fa-wa .schritt b{display:block;font-size:16px;margin-bottom:5px;}
.fa-wa .schritt span{color:var(--grau);font-size:14.5px;}

/* ---------- Hinweiskasten ---------- */
.fa-wa .info{background:#EFF4EE;border-left:4px solid var(--gruen);border-radius:0 10px 10px 0;padding:22px 24px;}
.fa-wa .info h3{margin:0 0 10px;font-size:16px;font-weight:800;}
.fa-wa .info ul{margin:0;padding-left:19px;color:#3E443D;font-size:15px;}
.fa-wa .info li{margin-bottom:7px;}
.fa-wa .info li:last-child{margin-bottom:0;}

/* ---------- Rückkanal ---------- */
.fa-wa .rueck{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:30px 32px;}
.fa-wa .rueck h2{margin-bottom:10px;}
.fa-wa .nummer{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--gruen-tief);text-decoration:none;display:inline-block;margin-top:4px;}


/* ---------- Zwei Wege: Gruppe „Alle Orte" und Kanal ---------- */
.fa-wa .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.fa-wa .duo-karte{background:var(--tinte);border-radius:14px;padding:28px 30px 26px;display:flex;flex-direction:column;align-items:flex-start;}
.fa-wa .duo-karte h3{margin:0 0 10px;font-size:22px;font-weight:800;color:#fff;}
.fa-wa .duo-karte p{color:#C6CBC4;font-size:15px;margin:0 0 12px;}
.fa-wa .duo-hinweis{color:#8A9089 !important;font-size:14px !important;margin-top:auto !important;padding-top:6px;}
.fa-wa .duo-karte .btn{align-self:flex-start;margin-top:16px;}


.fa-wa .merkmale{margin:16px 0 0;padding:0;}
.fa-wa .merkmale dt{font-size:11.5px;letter-spacing:.6px;color:#7E857C;font-weight:700;margin-top:13px;}
.fa-wa .merkmale dd{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:#D5DAD3;padding-left:19px;position:relative;}
.fa-wa .merkmale dd::before{position:absolute;left:0;top:0;font-weight:800;}
.fa-wa .merkmale dd.ja::before{content:"+";color:#7BC496;}
.fa-wa .merkmale dd.nein::before{content:"–";color:#E08A7B;}
.fa-wa .empfehlung{margin-top:18px;background:#EFF4EE;border-left:4px solid var(--gruen);border-radius:0 10px 10px 0;padding:20px 24px;font-size:15px;line-height:1.6;}
.fa-wa .duo-karte .btn{margin-top:22px;}

/* ---------- Blitzer ---------- */
.fa-wa .blitz{background:var(--tinte);color:#fff;}
.fa-wa .blitz-grid{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;}
.fa-wa .blitz-text{flex:1 1 340px;min-width:0;}
.fa-wa .blitz-text h2{margin-bottom:14px;max-width:20ch;}
.fa-wa .hell-grau{max-width:52ch;}
.fa-wa .rueck-klein{margin-top:14px;font-size:14.5px;}
.fa-wa .melder{flex:0 0 306px;background:#22262A;border:1px solid #343A3E;border-radius:12px;padding:24px 24px 22px;}
.fa-wa .melder h3{margin:0 0 9px;font-size:19px;font-weight:800;}
.fa-wa .melder p{color:#C6CBC4;font-size:14.5px;}
.fa-wa .melder .klein{color:#8A9089;font-size:13px;margin:12px 0 0;}
.fa-wa .stvo{margin-top:30px;border-left:4px solid var(--signal);background:#22262A;border-radius:0 10px 10px 0;padding:18px 22px;font-size:14.5px;line-height:1.6;color:#C6CBC4;}
.fa-wa .stvo strong{color:#fff;}

@media (max-width:760px){
  .fa-wa .melder{flex:1 1 100%;width:100%;}
  .fa-wa .phone{margin:0 auto;}
  .fa-wa .kopf{padding:38px 0 42px;}
  .fa-wa .sektion{padding:38px 0;}
  .fa-wa .kanal,.fa-wa .rueck{padding:24px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .fa-wa *{transition:none !important;}
}

/* ================================================================
   THEME-ÜBERSCHREIBUNGEN
   Das Newspaper-Theme setzt eigene Farben für Überschriften, fette
   Texte und Links. Deshalb hier alles noch einmal ausdrücklich.
   Nicht entfernen, sonst wird Schrift unsichtbar.
   ================================================================ */
.fa-wa h1,.fa-wa h2,.fa-wa h3,.fa-wa p,.fa-wa div,.fa-wa span,.fa-wa li,.fa-wa strong,.fa-wa b,.fa-wa td{color:inherit !important;font-family:inherit !important;}
.fa-wa h1,.fa-wa h2,.fa-wa h3{
  text-transform:none !important;
  margin-top:0 !important;
  font-family:"Archivo","Segoe UI",system-ui,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.015em;
}
.fa-wa a{text-decoration:none !important;box-shadow:none !important;}

/* Heller Grund → dunkle Schrift */
.fa-wa .sektion,.fa-wa .sektion *{color:var(--tinte) !important;}
.fa-wa .sub,.fa-wa .ort-teil,.fa-wa .schritt span,.fa-wa .rueck-klein{color:var(--grau) !important;}
.fa-wa .info,.fa-wa .info *{color:#3E443D !important;}
.fa-wa .info h3{color:var(--tinte) !important;}

/* Dunkler Grund → helle Schrift */
.fa-wa .kopf,.fa-wa .kopf h1{color:#FFFFFF !important;}
.fa-wa .eyebrow{color:#8FC7A6 !important;}
.fa-wa .lead{color:#CFD3CC !important;}
.fa-wa .kanal,.fa-wa .kanal h3{color:#FFFFFF !important;}
.fa-wa .duo-karte,.fa-wa .duo-karte h3{color:#FFFFFF !important;}
.fa-wa .duo-karte p{color:#C6CBC4 !important;}
.fa-wa .duo-karte .duo-hinweis{color:#8A9089 !important;}
.fa-wa .merkmale dt{color:#7E857C !important;}
.fa-wa .merkmale dd{color:#D5DAD3 !important;}
.fa-wa .empfehlung,.fa-wa .empfehlung *{color:#3E443D !important;}
.fa-wa .empfehlung strong{color:var(--tinte) !important;}
.fa-wa .merkmale{list-style:none !important;}
.fa-wa .kanal p{color:#C6CBC4 !important;}
.fa-wa .blitz,.fa-wa .blitz *{color:#FFFFFF !important;}
.fa-wa .hell-grau,.fa-wa .melder p,.fa-wa .stvo{color:#C6CBC4 !important;}
.fa-wa .melder .klein{color:#8A9089 !important;}
.fa-wa .badge{color:#FFFFFF !important;}

/* Knöpfe und Links */
.fa-wa .btn{color:#FFFFFF !important;background:var(--gruen) !important;}
.fa-wa .btn:hover{background:var(--gruen-tief) !important;}
.fa-wa .btn--weiss{color:var(--tinte) !important;background:#FFFFFF !important;}
.fa-wa .btn--weiss:hover{background:#E8E4DA !important;}
.fa-wa .nummer{color:var(--gruen-tief) !important;}
/* Die Sprechblase liegt im dunklen Kopf, erbt dort aber Weiss auf Weiss */
.fa-wa .chat,.fa-wa .chat *,.fa-wa .bubble,.fa-wa .bubble *{color:var(--tinte) !important;}
.fa-wa .bubble .txt{color:#3A403A !important;}
.fa-wa .bubble .link{color:#2A6FB0 !important;}
.fa-wa .bubble .kicker,.fa-wa .bubble .zeit{color:var(--grau) !important;}
.fa-wa .bubble .rule{color:#B9BEB6 !important;}
.fa-wa .phone-bar,.fa-wa .phone-bar *{color:#FFFFFF !important;}
.fa-wa .phone-bar span{color:#B7DCC5 !important;}
.fa-wa .avatar{color:var(--gruen-tief) !important;}

/* WordPress ersetzt Emoji durch Bilder — die sonst riesig werden */
.fa-wa img.wp-smiley,.fa-wa img.emoji{display:inline !important;height:1em !important;width:1em !important;vertical-align:-.12em !important;margin:0 .05em !important;padding:0 !important;border:0 !important;box-shadow:none !important;background:none !important;}

/* Theme-Listenpunkte und Abstände abschalten */
.fa-wa ul{list-style:none !important;margin:0 !important;padding:0 !important;}
.fa-wa ul li::before,.fa-wa ul li::marker{content:none !important;display:none !important;}
.fa-wa .info ul{padding-left:19px !important;}
.fa-wa .info li{list-style:disc !important;}
.fa-wa .info li::marker{content:initial !important;display:list-item !important;}
.fa-wa table{margin:0 !important;border:0 !important;background:none !important;}
.fa-wa td{border:0 !important;padding:inherit;}