/* nebra Konto — eigenes, schlankes Blatt.
   Die Seiten der Website bringen sehr viel CSS mit, das dieser Bereich nicht
   braucht. Deshalb steht hier alles fuer sich, in denselben Farben. */

:root{
  --tinte:#111A22;
  --grau:#5A6470;
  --leise:#8A8F98;
  --linie:#E4E2D8;
  --grund:#F6F6F4;
  --gold:#C2A677;
  --navy:#16305C;
  --gruen:#2E9E5B;
  --rot:#B4472F;
  --rund:14px;
  --schrift:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font:400 16px/1.6 var(--schrift);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy)}
a:hover{color:var(--tinte)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.kb-breite{max-width:940px;margin:0 auto;padding:0 24px}
.kb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Kopf ── */
.kb-kopf{background:#fff;border-bottom:1px solid var(--linie)}
.kb-kopf .kb-breite{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:68px;flex-wrap:wrap}
.kb-marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinte)}
.kb-zeichen{width:34px;height:34px;flex:none;display:block}
.kb-zeichen svg{width:100%;height:100%;display:block;border-radius:9px}
.kb-wort{font-weight:700;font-size:19px;letter-spacing:-.015em}
.kb-wer{display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--grau);
  min-width:0;flex-wrap:wrap}
.kb-wer > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.kb-raus{font-weight:600;text-decoration:none;color:var(--grau);
  border:1px solid var(--linie);border-radius:8px;padding:6px 12px;background:#fff}
.kb-raus:hover{border-color:var(--gold);color:var(--tinte)}

/* ── Reiter ── */
.kb-navi{background:#fff;border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:5}
.kb-navi .kb-breite{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.kb-navi .kb-breite::-webkit-scrollbar{display:none}
.kb-navi a{
  padding:14px 14px 12px;text-decoration:none;color:var(--grau);
  font-size:14.5px;font-weight:600;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.kb-navi a:hover{color:var(--tinte)}
.kb-navi a.is-hier{color:var(--tinte);border-bottom-color:var(--gold)}

/* ── Inhalt ── */
.kb-inhalt{padding:40px 24px 72px}
h1{margin:0 0 8px;font-size:clamp(26px,4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
h2{margin:0 0 10px;font-size:19px;font-weight:700;letter-spacing:-.012em}
.kb-lead{margin:0 0 28px;color:var(--grau);max-width:62ch}
.kb-klein{font-size:13.5px;line-height:1.55;color:var(--grau)}
.kb-mitte{max-width:460px;margin:24px auto 0}

.kb-block{margin:0 0 34px}
.kb-block + .kb-block{padding-top:6px}

.kb-kasten{
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
  padding:26px 26px 24px;margin:0 0 24px;
}
.kb-kasten p:last-child{margin-bottom:0}
.kb-still-kasten{background:transparent;border-style:dashed}
.kb-gut{border-color:rgba(46,158,91,.4);background:rgba(46,158,91,.06)}

.kb-meldung{padding:13px 16px;border-radius:11px;margin:0 0 22px;font-size:14.5px}
.kb-meldung.kb-gut{border:1px solid rgba(46,158,91,.4);background:rgba(46,158,91,.08);color:#1F5E3A}
.kb-fehler{border:1px solid rgba(180,71,47,.35);background:rgba(180,71,47,.07);color:#8A3A26}

/* ── Karten ── */
.kb-karte{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
  padding:20px 22px;margin:0 0 12px}
.kb-karte-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.kb-plan{font-weight:700;font-size:15px}
.kb-punkt{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.kb-punkt.ist-aktiv{background:rgba(46,158,91,.12);color:#1F5E3A}
.kb-punkt.ist-aus{background:rgba(17,26,34,.07);color:var(--grau)}
.kb-schluessel{margin:0 0 8px}
.kb-schluessel code{font-size:15px;background:var(--grund);border:1px solid var(--linie);
  border-radius:8px;padding:8px 12px;display:inline-block;letter-spacing:.04em;
  user-select:all;word-break:break-all}

.kb-zwei{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:14px}
@media(max-width:720px){.kb-zwei{grid-template-columns:1fr}}

/* ── Knoepfe und Formulare ── */
.kb-knopf{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);color:#fff;text-decoration:none;
  padding:12px 20px;border-radius:10px;font-weight:700;font-size:14.5px;
  border:1px solid var(--navy);
  transition:background .18s,transform .18s;
}
.kb-knopf:hover{background:#1E3D73;color:#fff;transform:translateY(-1px)}
.kb-knopf.kb-still{background:#fff;color:var(--tinte);border-color:var(--linie)}
.kb-knopf.kb-still:hover{border-color:var(--gold);background:#fff}
.kb-klein-knopf{padding:8px 14px;font-size:13.5px}

.kb-form{margin:0 0 24px}
.kb-form label{display:block;font-weight:600;font-size:14px;margin:16px 0 5px}
.kb-form label:first-of-type{margin-top:0}
.kb-form input[type=text],.kb-form input[type=email],.kb-form textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:15.5px;
  border:1px solid var(--linie);border-radius:10px;background:#fff;color:var(--tinte);
}
.kb-form input:focus-visible,.kb-form textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.kb-form textarea{resize:vertical;min-height:96px}
.kb-form button{
  margin-top:18px;padding:13px 24px;border:0;border-radius:10px;cursor:pointer;
  background:var(--navy);color:#fff;font:700 15px/1 var(--schrift);
  transition:background .18s,transform .18s;
}
.kb-form button:hover{background:#1E3D73;transform:translateY(-1px)}
.kb-form-breit{max-width:560px}
.kb-reihe{display:flex;gap:12px;flex-wrap:wrap}
.kb-reihe > div{flex:0 0 110px}
.kb-reihe > div.kb-weit{flex:1 1 200px}
.kb-warum{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie);max-width:46ch}

/* ── Tabelle ── */
.kb-tabelle{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--linie);border-radius:var(--rund);overflow:hidden;margin-bottom:18px}
.kb-tabelle th,.kb-tabelle td{padding:14px 16px;text-align:left;font-size:14.5px;
  border-bottom:1px solid var(--linie)}
.kb-tabelle thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--leise);background:var(--grund)}
.kb-tabelle tbody tr:last-child td{border-bottom:0}
.kb-rechts{text-align:right}
@media(max-width:620px){
  .kb-tabelle,.kb-tabelle tbody,.kb-tabelle tr,.kb-tabelle td{display:block;width:100%}
  .kb-tabelle thead{display:none}
  .kb-tabelle tr{border-bottom:1px solid var(--linie);padding:6px 0}
  .kb-tabelle td{border:0;padding:6px 16px}
  .kb-rechts{text-align:left;padding-top:10px!important}
}

/* ── Abstimmung ── */
.kb-wahl{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:10px}
.kb-wahl form{margin:0}
.kb-wahl-knopf{
  width:100%;display:flex;align-items:flex-start;gap:14px;text-align:left;
  background:#fff;border:1px solid var(--linie);border-radius:var(--rund);
  padding:18px 20px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.kb-wahl-knopf:hover{border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 10px 26px -18px rgba(17,26,34,.5)}
.kb-haken{
  flex:none;width:22px;height:22px;margin-top:2px;border-radius:6px;
  border:2px solid var(--linie);background:#fff;
  transition:background .18s,border-color .18s;
}
.ist-gewaehlt .kb-haken{
  background:var(--gruen) no-repeat center/13px 13px;border-color:var(--gruen);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.ist-gewaehlt .kb-wahl-knopf{border-color:var(--gruen)}
.kb-wahl-text{flex:1;min-width:0}
.kb-wahl-text strong{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px}
.kb-wahl-text span{display:block;font-size:14px;color:var(--grau);line-height:1.5}
.kb-zahl{flex:none;text-align:center;font-weight:700;font-size:18px;line-height:1.1;
  color:var(--tinte);min-width:56px}
.kb-zahl small{display:block;font-size:11px;font-weight:600;color:var(--leise);margin-top:3px}

/* ── Fuss ── */
.kb-fuss{border-top:1px solid var(--linie);background:#fff;padding:24px 0}
.kb-fuss p{margin:0;font-size:13px;color:var(--leise)}
.kb-fuss a{color:var(--grau)}

@media(prefers-reduced-motion:reduce){
  .kb-knopf,.kb-form button,.kb-wahl-knopf,.kb-haken{transition:none}
  .kb-knopf:hover,.kb-form button:hover,.kb-wahl-knopf:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Anmeldeseite: Wald, Nebel, Glaskarte (08.09.2026)

   Derselbe Aufbau wie der Hero der Startseite: forest.jpg, darueber ein
   weisser Schleier, darueber eine Nebelschicht, die sich beim Laden lichtet.
   Der Hintergrund ist fest (position:fixed) und deckt den ganzen Viewport,
   auch wenn der Inhalt kuerzer ist als der Bildschirm.

   Warum drei Ebenen statt eines fertigen Bildes: Schleier und Nebel sind
   reine Deckkraft. Die bewegt der Compositor, das laeuft auch auf einem alten
   Rechner rund. Ein animierter Filter auf dem Bild wuerde jede Bildwiederholung
   die ganze Flaeche neu zeichnen.
   ═══════════════════════════════════════════════════════════════════════════ */

body.kb-wald{
  min-height:100dvh;
  display:flex;flex-direction:column;
  background:#DCE0DA;                 /* Grundton, falls das Bild noch laedt */
}

/* Ebene 1: das Bild, fest ueber dem ganzen Viewport. */
body.kb-wald::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url('/assets/forest.jpg') center/cover no-repeat;
}
/* Ebene 2: der weisse Schleier, der das Bild zuruecknimmt, damit Text darauf
   lesbar bleibt. Derselbe Wert wie im Hero. */
body.kb-wald::after{
  content:"";position:fixed;inset:0;z-index:-2;
  background:rgba(255,255,255,.58);
}
/* Ebene 3: der Nebel, der sich einmal lichtet. */
body.kb-wald .kb-nebel{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#fff;
  animation:kbNebelWeg 1.9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes kbNebelWeg{ from{opacity:.42} to{opacity:0} }

/* Kopf und Fuss treten auf dieser Seite zurueck: die Karte traegt alles. */
body.kb-tor .kb-kopf,
body.kb-tor .kb-fuss{background:none;border:0}
body.kb-tor .kb-fuss p{color:#4A4F57}
body.kb-tor .kb-fuss a{color:#3A3F46}
body.kb-tor .kb-inhalt{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:28px 24px 48px;
}

/* ── Die Karte ─────────────────────────────────────────────────────────────
   Milchglas heisst: die Flaeche ist halbdurchsichtig UND zeichnet weich, was
   dahinter liegt. Eine Ebene allein sieht nur nach grauem Schleier aus.
   Dazu eine helle Kante oben innen: das ist der Lichtreflex, der eine Scheibe
   erst wie Glas wirken laesst. */
.kb-glas{
  position:relative;
  width:min(430px,100%);
  padding:44px 40px 38px;
  border-radius:26px;
  text-align:center;
  background:rgba(255,255,255,.60);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 40px 90px -30px rgba(20,32,26,.45),
    0 6px 20px -10px rgba(20,32,26,.2),
    inset 0 1px 0 rgba(255,255,255,.85);
  animation:kbKarteRein .7s cubic-bezier(.22,1,.36,1) .15s both;
}
@keyframes kbKarteRein{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to  {opacity:1;transform:none}
}

.kb-glas-mark{display:block;width:52px;height:52px;margin:0 auto 20px}
.kb-glas-mark svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 16px rgba(17,26,34,.28))}

.kb-glas h1{margin:0 0 10px;font-size:30px;font-weight:700;letter-spacing:-.022em}
.kb-glas-lead{margin:0 0 26px;font-size:15.5px;line-height:1.55;color:#3A3F46}

.kb-glas-form{margin:0 0 18px;text-align:left}
.kb-glas-form label{display:block;font-size:13px;font-weight:600;color:#3A3F46;margin:0 0 6px}
.kb-glas-form input{
  width:100%;padding:14px 16px;font:inherit;font-size:16px;   /* 16px: iOS zoomt sonst beim Tippen */
  border:1px solid rgba(17,26,34,.16);border-radius:12px;
  background:rgba(255,255,255,.82);color:var(--tinte);
}
.kb-glas-form input:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;
  border-color:var(--gold);background:#fff;
}

.kb-glas-knopf{
  display:block;width:100%;margin-top:14px;
  padding:14px 20px;border:1px solid var(--tinte);border-radius:12px;cursor:pointer;
  background:var(--tinte);color:#fff;font:700 15px/1 var(--schrift);
  transition:background .18s,transform .18s,box-shadow .22s;
}
.kb-glas-knopf:hover{background:#000;transform:translateY(-1px);
  box-shadow:0 14px 30px -14px rgba(17,26,34,.6)}
.kb-glas-stiller{
  margin-top:0;
  background:rgba(255,255,255,.72);color:var(--tinte);
  border-color:rgba(17,26,34,.18);
}
.kb-glas-stiller:hover{background:#fff;color:var(--tinte);box-shadow:0 12px 26px -16px rgba(17,26,34,.45)}

.kb-glas-fein{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#5A6470}
.kb-glas-warum{margin-top:16px;padding-top:14px;border-top:1px solid rgba(17,26,34,.10)}

.kb-glas-oder{position:relative;margin:22px 0 16px;text-align:center}
.kb-glas-oder::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(17,26,34,.12)}
.kb-glas-oder span{position:relative;padding:0 12px;font-size:12px;font-weight:600;
  color:#7C8698;background:transparent}
/* Der Strich soll hinter dem Wort unterbrochen wirken. Ein Hintergrund waere
   auf Milchglas ein sichtbarer Fleck, deshalb ein Farbverlauf zu Transparenz. */
.kb-glas-oder span{background:linear-gradient(90deg,
  rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 22%,
  rgba(255,255,255,.85) 78%, rgba(255,255,255,0) 100%)}

.kb-glas-gut{
  margin:0 0 4px;padding:16px 18px;border-radius:14px;text-align:left;
  background:rgba(46,158,91,.14);border:1px solid rgba(46,158,91,.34);
}
.kb-glas-gut p{margin:0;font-size:14.5px;line-height:1.55;color:#1F5E3A}

.kb-glas-unten{margin:26px 0 0;font-size:13px;color:#4A4F57;text-align:center}
.kb-glas-unten a{color:#3A3F46;font-weight:600}

@media(max-width:480px){
  .kb-glas{padding:34px 24px 30px;border-radius:20px}
  .kb-glas h1{font-size:26px}
}
/* Aeltere Browser ohne backdrop-filter wuerden eine zu 60 % durchsichtige
   Karte zeigen; darauf waere der Text vor dem Wald unlesbar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kb-glas{background:rgba(255,255,255,.94)}
}
@media(prefers-reduced-motion:reduce){
  body.kb-wald .kb-nebel{animation:none;opacity:0}
  .kb-glas{animation:none}
  .kb-glas-knopf:hover{transform:none}
}

/* ── Demo-Band ───────────────────────────────────────────────────────────── */
.kb-demo-band{background:#2A2118;color:#F3E9D6}
.kb-demo-band .kb-breite{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 24px;font-size:13.5px}
.kb-demo-band strong{background:var(--gold);color:#241C12;padding:3px 9px;
  border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em}
.kb-demo-band span{color:rgba(243,233,214,.82)}
.kb-demo-band a{margin-left:auto;color:#F3E9D6;font-weight:600;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════════
   Der angemeldete Bereich auf demselben Grund (08.09.2026)

   Der Wald liegt jetzt hinter dem ganzen Kontobereich, nicht nur hinter der
   Anmeldung. Damit das lesbar bleibt, wird jeder Inhaltsblock zu einer
   Glasflaeche: hell, halbdurchsichtig, mit weicher Zeichnung dahinter.

   Wichtig dabei: Text steht NIE direkt auf dem Wald. Alles Lesbare sitzt auf
   einer Glasflaeche, und die ist hell genug, dass dunkle Schrift darauf
   sicher trägt — auch über einer dunklen Stelle des Bildes.
   ═══════════════════════════════════════════════════════════════════════════ */

body.kb-innen{background:#DCE0DA}

/* Kopf und Reiter bleiben deckend weiss (08.09.2026, auf Wunsch).
   Der Wald gehoert hinter den Inhalt, nicht hinter die Bedienung: eine
   Kopfzeile, durch die ein Bild schimmert, macht die Reiter unruhig, und die
   Reiterleiste klebt beim Scrollen ohnehin oben. Deckend heisst hier: der
   Wald beginnt sichtbar erst unter der Leiste. */
body.kb-innen .kb-kopf{background:#fff;border-bottom-color:var(--linie)}
body.kb-innen .kb-navi{background:#fff;border-bottom-color:var(--linie)}

/* Der Inhalt sitzt in einer grossen Glasflaeche. So steht die Ueberschrift
   nicht nackt auf dem Bild und die Seite bekommt einen Rahmen. */
body.kb-innen .kb-inhalt{
  /* Deutlicher als zuvor: der Wrapper soll als eigene Scheibe erkennbar sein,
     nicht als leicht aufgehellter Bereich. Drei Dinge machen das aus:
       · kraeftigere Saettigung, damit das Gruen dahinter lebendig bleibt
       · eine helle, klar sichtbare Kante ringsum plus Lichtkante oben innen
       · ein tiefer, weicher Schatten, der die Scheibe vom Grund abhebt
     Der Aussenabstand ist gewachsen, damit links und rechts wirklich Wald
     stehen bleibt: ohne sichtbaren Rand daneben wirkt keine Box wie eine Box. */
  margin:34px auto 64px;
  padding:40px 38px 44px;
  border-radius:28px;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 48px 110px -34px rgba(18,30,24,.55),
    0 10px 30px -18px rgba(18,30,24,.3),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
}
/* Etwas Luft zum Rand, damit der Wald die Scheibe umrahmt. */
body.kb-innen .kb-inhalt{max-width:min(940px, calc(100% - 48px))}

/* Die Bloecke darin liegen als hellere Scheiben auf der grossen Flaeche.
   Kein zweites backdrop-filter: geschachtelte Weichzeichner kosten viel und
   bringen optisch nichts, weil die Ebene darunter schon weich ist. */
body.kb-innen .kb-kasten,
body.kb-innen .kb-karte,
body.kb-innen .kb-tabelle,
body.kb-innen .kb-wahl-knopf{
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 10px 26px -20px rgba(20,32,26,.4);
}
body.kb-innen .kb-still-kasten{background:rgba(255,255,255,.34);border-style:dashed;
  border-color:rgba(17,26,34,.18)}
body.kb-innen .kb-tabelle thead th{background:rgba(255,255,255,.5);
  border-bottom-color:rgba(17,26,34,.10)}
body.kb-innen .kb-tabelle th,
body.kb-innen .kb-tabelle td{border-bottom-color:rgba(17,26,34,.09)}
body.kb-innen .kb-schluessel code{background:rgba(255,255,255,.66);
  border-color:rgba(17,26,34,.12)}
body.kb-innen .kb-form input,
body.kb-innen .kb-form textarea{background:rgba(255,255,255,.8);
  border-color:rgba(17,26,34,.14)}
body.kb-innen .kb-wahl-knopf:hover{background:rgba(255,255,255,.88)}
body.kb-innen .ist-gewaehlt .kb-wahl-knopf{border-color:var(--gruen)}

/* Fuss ohne eigene Flaeche, er sitzt schon auf dem Glas darueber. */
body.kb-innen .kb-fuss{background:none;border-top-color:rgba(17,26,34,.10)}
body.kb-innen .kb-fuss p{color:#4A4F57}
body.kb-innen .kb-fuss a{color:#3A3F46}

/* Das Demo-Band bleibt kraeftig: es ist eine Warnung, keine Deko. */
body.kb-innen .kb-demo-band{background:rgba(42,33,24,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

@media(max-width:720px){
  body.kb-innen .kb-inhalt{margin:16px auto 34px;padding:24px 18px 28px;border-radius:18px}
}
/* Ohne backdrop-filter waere die grosse Flaeche zu 60 % durchsichtig und der
   Wald schluege durch den Text. Dann lieber fast deckend. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.kb-innen .kb-inhalt{background:rgba(255,255,255,.95)}
  body.kb-innen .kb-kopf,body.kb-innen .kb-navi{background:rgba(255,255,255,.95)}
}