/*
 * 1:1 aus prototyp-a-konfigurator.html uebernommen, aber komplett unter
 * .bvik-bav-app gescoped (statt :root/body) und alle Custom Properties
 * umbenannt (--rot -> --bvik-bav-rot usw.), damit nichts mit Enfold oder
 * anderen Plugins kollidiert.
 */
.bvik-bav-app{
  --bvik-bav-rot:#FF4A38;
  --bvik-bav-rot-tief:#AA1917;
  --bvik-bav-blau:#455CF2;
  --bvik-bav-blau-hell:#7AC8E9;
  --bvik-bav-blau-zart:#B6DBEE;
  --bvik-bav-beige:#E5E0D0;
  --bvik-bav-beige-hell:#F3F0E9;
  --bvik-bav-gelb:#EEFA52;
  --bvik-bav-tuerkis:#99F9CC;
  --bvik-bav-schwarz:#0A0A0A;
  --bvik-bav-weiss:#FFFFFF;
  --bvik-bav-grau:#6A665C;
  --bvik-bav-linie:#DCD6C7;
  --bvik-bav-radius:14px;
  --bvik-bav-schrift:'Sora','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  /* Eigener Select-Pfeil. Enfold legt bei <select> ein eigenes Doppelpfeil-
     Bild als Hintergrund an; dagegen anzukaempfen ist fragil, weil die Regel
     aus mehreren Stylesheets kommen kann. Statt Enfolds Bild zu entfernen
     wird es hier schlicht durch ein eigenes ersetzt - das ist unabhaengig
     von der Ladereihenfolge und sieht in allen Browsern gleich aus. */
  --bvik-bav-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  font-family:var(--bvik-bav-schrift);
  font-weight:400;
  color:var(--bvik-bav-schwarz);
  background:var(--bvik-bav-beige-hell);
  line-height:1.55;
  font-size:16px;

  /* Full-Bleed: der beige Hintergrund soll ueber die ganze Fensterbreite
     laufen, obwohl der Shortcode im zentrierten, begrenzten Enfold-Container
     steht. Die inneren .wrap/.buehne behalten ihre max-width und zentrieren
     sich weiterhin selbst, der Inhalt bleibt also an derselben Stelle.

     Die Breite kommt aus --bvik-bav-fensterbreite, das frontend.js aus
     document.documentElement.clientWidth setzt. 100vw waere hier falsch: es
     schliesst die vertikale Scrollleiste mit ein und erzeugt damit eine
     horizontale Scrollleiste. Das liesse sich nur mit overflow-x auf
     html/body abfangen - und genau das (auch in der Variante :clip) haengt
     in Chrome das position:sticky der Zusammenfassung aus. Deshalb lieber
     von vornherein die richtige Breite setzen. 100vw bleibt nur Fallback,
     bis das Skript das erste Mal gelaufen ist. */
  --bvik-bav-fensterbreite:100vw;
  width:var(--bvik-bav-fensterbreite);
  max-width:var(--bvik-bav-fensterbreite);
  margin:0 calc(50% - var(--bvik-bav-fensterbreite) / 2);
}
/* Enfold setzt global (base.css: "html.responsive, .responsive body")
   overflow-x:hidden auch auf den BODY. Auf <html> ist das harmlos - der Wert
   wird auf den Viewport propagiert, html selbst bleibt "visible". Auf <body>
   wird der Wert dagegen NICHT propagiert (weil html bereits nicht visible
   ist): body wird damit selbst zum Scroll-Container, overflow-y rechnet auf
   "auto" hoch. Blink (Chrome/Edge) haengt das position:sticky der
   Zusammenfassung dann an diesen Body - der aber nie scrollt, gescrollt wird
   der Viewport. Ergebnis: die Box klebt nie. Firefox behandelt den Fall
   anders und zeigt den Fehler nicht.
   Auf <html> bleibt overflow-x:hidden erhalten, horizontales Scrollen ist
   also weiterhin unterbunden - der Body braucht die Regel nicht. */
.responsive body:has(.bvik-bav-app){overflow-x:visible}
.bvik-bav-app *{box-sizing:border-box}
.bvik-bav-app h1,.bvik-bav-app h2,.bvik-bav-app h3,.bvik-bav-app h4{margin:0;font-weight:800;line-height:1.12;letter-spacing:-.02em}

.bvik-bav-app p{margin:0}
.bvik-bav-app button{font-family:inherit}
.bvik-bav-app a{color:var(--bvik-bav-rot-tief)}

/* ---------- Hero ---------- */
.bvik-bav-app .hero{padding:46px 0 34px;background:var(--bvik-bav-beige-hell)}
.bvik-bav-app .wrap{max-width:1210px;margin:0 auto;padding:0 28px}
.bvik-bav-app .hero h1{font-size:clamp(30px,5vw,50px);max-width:16ch}
.bvik-bav-app .hero .sub{margin-top:16px;max-width:60ch;font-size:17px;color:#33312C}
.bvik-bav-app .fruehbucher{
  border-top:3px solid var(--bvik-bav-rot);padding-top:11px;margin-bottom:24px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;max-width:560px;
}
.bvik-bav-app .fruehbucher .fbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--bvik-bav-rot-tief)}
.bvik-bav-app .fruehbucher .fbd{font-size:13.5px;color:var(--bvik-bav-grau)}

/* ---------- Layout ---------- */
.bvik-bav-app .buehne{max-width:1210px;margin:0 auto;padding:0 28px 140px;display:grid;gap:26px;align-items:start}
@media(max-width:640px){.bvik-bav-app .wrap{padding:0 15px}.bvik-bav-app .buehne{padding-left:15px;padding-right:15px}}
.bvik-bav-app .buehne > *{min-width:0}
@media(min-width:1000px){.bvik-bav-app .buehne{grid-template-columns:minmax(0,1fr) 348px;padding-bottom:80px}}

.bvik-bav-app .karte{
  background:var(--bvik-bav-weiss);border:1px solid var(--bvik-bav-linie);border-radius:var(--bvik-bav-radius);
  padding:26px;margin-bottom:20px;
}
.bvik-bav-app .kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.bvik-bav-app .nummer{
  width:26px;height:26px;flex:none;border-radius:50%;background:var(--bvik-bav-schwarz);color:#fff;
  font-size:13px;font-weight:700;display:grid;place-items:center;transform:translateY(3px);
}
.bvik-bav-app .karte h2{font-size:21px}
.bvik-bav-app .hinweis{font-size:14px;color:var(--bvik-bav-grau);margin-top:8px;margin-left:38px}
.bvik-bav-app .karte .inhalt{margin-top:22px;margin-left:38px}
@media(max-width:600px){
  .bvik-bav-app .karte{padding:20px}
  .bvik-bav-app .hinweis,.bvik-bav-app .karte .inhalt{margin-left:0}
}

/* ---------- Mitgliedschaft ---------- */
.bvik-bav-app .segmente{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:520px){.bvik-bav-app .segmente{grid-template-columns:1fr}}
.bvik-bav-app .segment{
  border:1.5px solid var(--bvik-bav-linie);border-radius:12px;padding:16px;background:var(--bvik-bav-weiss);
  text-align:left;cursor:pointer;transition:border-color .12s,background .12s;
}
.bvik-bav-app .segment:hover{border-color:#B9B2A0}
.bvik-bav-app .segment[aria-pressed="true"]{border-color:var(--bvik-bav-schwarz);background:var(--bvik-bav-beige-hell);border-width:2px;padding:15px}
.bvik-bav-app .segment .st{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.bvik-bav-app .segment .sp{font-size:13px;color:var(--bvik-bav-grau);margin-top:4px}
.bvik-bav-app .haken{
  width:17px;height:17px;border-radius:50%;border:1.5px solid #B9B2A0;flex:none;display:grid;place-items:center;
}
.bvik-bav-app .segment[aria-pressed="true"] .haken{background:var(--bvik-bav-rot);border-color:var(--bvik-bav-rot)}
.bvik-bav-app .segment[aria-pressed="true"] .haken::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.bvik-bav-app .selbstauskunft{font-size:12.5px;color:var(--bvik-bav-grau);margin-top:12px}

/* ---------- Stepper ---------- */
.bvik-bav-app .stepperzeile{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bvik-bav-app .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--bvik-bav-schwarz);border-radius:12px;overflow:hidden}
.bvik-bav-app .stepper button{
  width:50px;height:52px;border:0;background:var(--bvik-bav-weiss);font-size:24px;font-weight:600;
  cursor:pointer;color:var(--bvik-bav-schwarz);line-height:1;
}
.bvik-bav-app .stepper button:hover:not(:disabled){background:var(--bvik-bav-beige)}
.bvik-bav-app .stepper button:disabled{color:#C3BCAA;cursor:not-allowed}
.bvik-bav-app .stepper .wert{
  min-width:62px;height:52px;display:grid;place-items:center;font-size:23px;font-weight:800;
  border-left:1.5px solid var(--bvik-bav-schwarz);border-right:1.5px solid var(--bvik-bav-schwarz);
}
.bvik-bav-app .schnellwahl{display:flex;gap:8px;flex-wrap:wrap}
.bvik-bav-app .chip{
  border:1.5px solid var(--bvik-bav-linie);background:var(--bvik-bav-weiss);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
}
.bvik-bav-app .chip:hover{border-color:#B9B2A0}
.bvik-bav-app .chip[aria-pressed="true"]{background:var(--bvik-bav-schwarz);color:#fff;border-color:var(--bvik-bav-schwarz)}
.bvik-bav-app .chip .beliebt{font-size:10.5px;font-weight:700;color:var(--bvik-bav-rot);margin-left:5px;text-transform:uppercase;letter-spacing:.05em}
.bvik-bav-app .chip[aria-pressed="true"] .beliebt{color:var(--bvik-bav-gelb)}

.bvik-bav-app .staffel{margin-top:22px;border:1px solid var(--bvik-bav-linie);border-radius:12px;overflow:hidden}
.bvik-bav-app .staffel .z{display:flex;justify-content:space-between;gap:14px;padding:11px 16px;font-size:14.5px;border-bottom:1px solid var(--bvik-bav-linie)}
.bvik-bav-app .staffel .z:last-child{border-bottom:0}
.bvik-bav-app .staffel .z.rab{background:#FBFAF6}
.bvik-bav-app .staffel .z .lbl{display:flex;align-items:center;gap:9px}
.bvik-bav-app .tag{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--bvik-bav-tuerkis);padding:2px 7px;border-radius:5px;
}
.bvik-bav-app .staffel .z .pr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.bvik-bav-app .leer{padding:16px;font-size:14.5px;color:var(--bvik-bav-grau);text-align:center}

.bvik-bav-app .nudge{
  margin-top:16px;background:var(--bvik-bav-blau-hell);border:2px solid var(--bvik-bav-schwarz);
  padding:18px 20px;border-radius:12px;font-size:14.5px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.bvik-bav-app .nudge .nb{flex:1;min-width:230px}
.bvik-bav-app .nudge .nt{display:block;font-weight:800;font-size:16.5px;line-height:1.3;margin-bottom:7px}
.bvik-bav-app .nudge .ntx{display:block;font-size:14px;line-height:1.6}
.bvik-bav-app .nudge button{
  border:0;background:var(--bvik-bav-schwarz);color:#fff;border-radius:9px;padding:10px 16px;
  font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.bvik-bav-app .nudge button:hover{background:var(--bvik-bav-rot-tief)}
.bvik-bav-app .spar{
  margin-top:16px;border-left:3px solid var(--bvik-bav-tuerkis);padding:3px 0 3px 15px;
  font-size:14.5px;color:#33312C;
}
.bvik-bav-app .spar b{font-weight:800;color:var(--bvik-bav-schwarz)}

/* ---------- Akkordeon Kategorien ---------- */
.bvik-bav-app details.kat{margin-top:22px;border:1px solid var(--bvik-bav-linie);border-radius:12px;background:#FBFAF6}
.bvik-bav-app details.kat > summary{
  cursor:pointer;padding:14px 18px;font-weight:700;font-size:14.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.bvik-bav-app details.kat > summary::-webkit-details-marker{display:none}
.bvik-bav-app details.kat > summary::after{content:"＋";font-size:17px;font-weight:400;color:var(--bvik-bav-grau)}
.bvik-bav-app details.kat[open] > summary::after{content:"−"}
.bvik-bav-app .katinhalt{padding:2px 18px 20px}
.bvik-bav-app .katgruppe{margin-top:16px}
.bvik-bav-app .katgruppe h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--bvik-bav-rot-tief);margin-bottom:9px}
.bvik-bav-app .katliste{display:flex;flex-wrap:wrap;gap:7px}
.bvik-bav-app .katliste span{background:var(--bvik-bav-weiss);border:1px solid var(--bvik-bav-linie);border-radius:8px;padding:6px 11px;font-size:13px}
.bvik-bav-app .katfuss{margin-top:18px;font-size:13px;color:var(--bvik-bav-grau);border-top:1px solid var(--bvik-bav-linie);padding-top:14px}

/* ---------- Sonderpreise ---------- */
.bvik-bav-app .sonder{display:grid;gap:12px}
.bvik-bav-app .sk{
  display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--bvik-bav-linie);border-radius:12px;
  padding:16px;cursor:pointer;background:var(--bvik-bav-weiss);transition:border-color .12s,background .12s;
}
.bvik-bav-app .sk:hover{border-color:#B9B2A0}
.bvik-bav-app .sk[data-an="1"]{border-color:var(--bvik-bav-schwarz);border-width:2px;padding:15px;background:var(--bvik-bav-beige-hell)}
.bvik-bav-app .box{
  width:21px;height:21px;flex:none;border:1.5px solid #B9B2A0;border-radius:6px;background:#fff;
  display:grid;place-items:center;margin-top:2px;
}
.bvik-bav-app .sk[data-an="1"] .box{background:var(--bvik-bav-rot);border-color:var(--bvik-bav-rot)}
.bvik-bav-app .sk[data-an="1"] .box::after{content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.bvik-bav-app .sk .txt{flex:1;min-width:0}
.bvik-bav-app .sk .n{display:block;font-weight:700;font-size:15.5px}
.bvik-bav-app .sk .d{display:block;font-size:13.5px;color:var(--bvik-bav-grau);margin-top:4px;line-height:1.5}
.bvik-bav-app .sk .p{font-weight:800;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Formular ---------- */
.bvik-bav-app .feldgitter{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.bvik-bav-app .feldgitter{grid-template-columns:1fr}}
.bvik-bav-app .feld{display:flex;flex-direction:column;gap:5px}
.bvik-bav-app .feld.voll{grid-column:1/-1}
.bvik-bav-app .feld label{font-size:13px;font-weight:600}
.bvik-bav-app .feld label .opt{font-weight:400;color:var(--bvik-bav-grau)}
.bvik-bav-app .feld input,.bvik-bav-app .feld select,.bvik-bav-app .feld textarea,.bvik-bav-app .feld input[type="email"],.bvik-bav-app .feld input[type="tel"]{
  font-family:inherit;font-size:15px !important;padding:11px 13px !important;border:1.5px solid var(--bvik-bav-linie) !important;
  border-radius:10px !important;background-color:var(--bvik-bav-weiss) !important;color:var(--bvik-bav-schwarz) !important;width:100%;
  box-shadow:none !important;
}
.bvik-bav-app .feld select{
  -webkit-appearance:none !important;appearance:none !important;
  background-image:var(--bvik-bav-pfeil) !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:12px 8px !important;
  padding-right:38px !important;
  border-radius:10px !important;
}
.bvik-bav-app .feld input:focus,.bvik-bav-app .feld select:focus,.bvik-bav-app .feld textarea:focus{outline:2px solid var(--bvik-bav-blau);outline-offset:1px;border-color:var(--bvik-bav-blau) !important}
/* Fehlerhervorhebung als Klasse, nicht als Inline-Style: gegen die
   !important-Regeln oben (und die von Enfold, z.B.
   "#top .main_color input[type=email]") kommt ein Inline-Style ohne
   !important nicht an. */
.bvik-bav-app .feld input.bvik-bav-fehlerhaft,
.bvik-bav-app .feld select.bvik-bav-fehlerhaft,
.bvik-bav-app .feld textarea.bvik-bav-fehlerhaft{border-color:var(--bvik-bav-rot) !important}
.bvik-bav-app .feld .tipp{font-size:12px;color:var(--bvik-bav-grau)}
.bvik-bav-app .zusatz{margin-top:18px;margin-bottom:18px;border-top:1px solid var(--bvik-bav-linie);padding-top:18px}
.bvik-bav-app .agb{margin-top:20px;display:flex;gap:11px;align-items:flex-start;font-size:13.5px}
.bvik-bav-app .agb input{width:19px;height:19px;accent-color:var(--bvik-bav-rot);flex:none;margin-top:2px}
.bvik-bav-app .agb.bvik-bav-fehlerhaft input{outline:2px solid var(--bvik-bav-rot);outline-offset:2px;border-radius:4px}
.bvik-bav-app .rechtlich{margin-top:12px;font-size:12.5px;color:var(--bvik-bav-grau)}
.bvik-bav-app .bvik-bav-honeypot{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.bvik-bav-app .bav-overview{position:absolute;top:-30px;right:0;color:var(--bvik-bav-grau);}

/* ---------- Zusammenfassung ---------- */
.bvik-bav-app .summe{
  background:var(--bvik-bav-weiss);border:1px solid var(--bvik-bav-linie);border-radius:var(--bvik-bav-radius);padding:22px;
}
@media(min-width:1000px){
  /* Enfold macht seinen aeusseren Wrapper in grid.css zum Scroll-Container:
     "#wrap_all{width:100%;position:static;z-index:2;overflow:hidden}".
     position:sticky bindet immer an den NAECHSTGELEGENEN Scroll-Container -
     also an #wrap_all. Der scrollt aber nie (gescrollt wird der Viewport),
     deshalb bleibt die Zusammenfassung wirkungslos stehen. Zusammen mit der
     body-Regel weiter oben sind das die beiden Stellen, die Sticky hier
     ausgehebelt haben.
     Bewusst nur ab 1000px: darunter ist Sticky ohnehin aus, und Enfolds
     mobiles Menue braucht das overflow:hidden. Horizontal clippt weiterhin
     das <html> (overflow-x:hidden), es entsteht also keine horizontale
     Scrollleiste.
     Spezifitaet 1,1,0 gegen Enfolds 1,0,0 - kein !important noetig. */
  #wrap_all:has(.bvik-bav-app){overflow:visible}

  .bvik-bav-app .buehne > aside{
    position:sticky;top:20px;align-self:start;
    max-height:calc(100vh - 40px);display:flex;
  }
  .bvik-bav-app .summe{display:flex;flex-direction:column;min-height:0;width:100%}
  .bvik-bav-app .summe > *{flex:none}
  .bvik-bav-app .summe .posten{flex:1 1 auto;overflow-y:auto;min-height:0}
}
.bvik-bav-app .summe h3{font-size:16px;margin-bottom:4px}
.bvik-bav-app .phase{font-size:12.5px;color:var(--bvik-bav-grau);margin-bottom:16px}
.bvik-bav-app .phase b{color:var(--bvik-bav-rot-tief);font-weight:700}
.bvik-bav-app .posten{border-top:1px solid var(--bvik-bav-linie);padding-top:14px;margin-bottom:14px;display:grid;gap:10px}
.bvik-bav-app .pz{display:flex;justify-content:space-between;gap:12px;font-size:14px;align-items:flex-start}
.bvik-bav-app .pz .pl{min-width:0}
.bvik-bav-app .pz .pl small{display:block;color:var(--bvik-bav-grau);font-size:12px;margin-top:1px}
.bvik-bav-app .pz .pw{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.bvik-bav-app .keinposten{font-size:14px;color:var(--bvik-bav-grau);padding:6px 0}
.bvik-bav-app .zwischen{border-top:1px solid var(--bvik-bav-linie);padding-top:14px;display:grid;gap:8px;font-size:14px}
.bvik-bav-app .zwischen .zz{display:flex;justify-content:space-between;gap:12px}
.bvik-bav-app .zwischen .zz span:last-child{font-variant-numeric:tabular-nums}
.bvik-bav-app .zwischen .zz.gespart{color:var(--bvik-bav-rot-tief);font-weight:700}
.bvik-bav-app .gesamt{
  border-top:2px solid var(--bvik-bav-schwarz);margin-top:14px;padding-top:14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.bvik-bav-app .gesamt .gl{font-weight:700;font-size:15px}
.bvik-bav-app .gesamt .gw{font-weight:800;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bvik-bav-app .netto{font-size:12.5px;color:var(--bvik-bav-grau);text-align:right;margin-top:2px}
.bvik-bav-app .summeupsell{margin-top:16px;border-top:1px solid var(--bvik-bav-linie);padding-top:14px;font-size:13.5px;color:#33312C}
.bvik-bav-app .summeupsell b{font-weight:800;color:var(--bvik-bav-schwarz)}
.bvik-bav-app .summeupsell button{
  margin-top:10px;width:100%;border:1.5px solid var(--bvik-bav-schwarz);background:transparent;
  border-radius:10px;padding:11px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--bvik-bav-schwarz);
}
.bvik-bav-app .summeupsell button:hover{background:var(--bvik-bav-beige-hell)}
.bvik-bav-app .cta{
  width:100%;margin-top:18px;border:0;border-radius:12px;background:var(--bvik-bav-rot);color:#fff;
  font-size:16px;font-weight:700;padding:16px;cursor:pointer;
}
.bvik-bav-app .cta:hover{background:var(--bvik-bav-rot-tief)}
.bvik-bav-app .cta:disabled{background:#D9D3C4;color:#8C8779;cursor:not-allowed}
.bvik-bav-app .ctafuss{font-size:12px;color:var(--bvik-bav-grau);text-align:center;margin-top:10px;line-height:1.45}

/* ---------- Mobile Leiste ---------- */
.bvik-bav-app .mobilleiste{
  position:fixed;left:0;right:0;bottom:0;background:var(--bvik-bav-weiss);border-top:1px solid var(--bvik-bav-linie);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;z-index:20;
  box-shadow:0 -4px 20px rgba(0,0,0,.07);
}
.bvik-bav-app .mobilleiste .mw{flex:1;min-width:0}
.bvik-bav-app .mobilleiste .mw .ml{font-size:11.5px;color:var(--bvik-bav-grau)}
.bvik-bav-app .mobilleiste .mw .mg{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2}
.bvik-bav-app .mobilleiste .cta{margin-top:0;width:auto;padding:14px 22px;font-size:15px}
@media(min-width:1000px){.bvik-bav-app .mobilleiste{display:none}}

/* ---------- Bestätigung ---------- */
.bvik-bav-app .bestaetigung{display:none;padding:40px 20px 90px}
.bvik-bav-app.bvik-bav-fertig .bestaetigung{display:block}
.bvik-bav-app.bvik-bav-fertig .konfig,.bvik-bav-app.bvik-bav-fertig .hero,.bvik-bav-app.bvik-bav-fertig .mobilleiste,.bvik-bav-app.bvik-bav-fertig .summe{display:none}
.bvik-bav-app .bkarte{max-width:720px;margin:0 auto;background:var(--bvik-bav-weiss);border:1px solid var(--bvik-bav-linie);border-radius:var(--bvik-bav-radius);padding:34px}
.bvik-bav-app .bhaken{width:52px;height:52px;border-radius:50%;background:var(--bvik-bav-tuerkis);display:grid;place-items:center;margin-bottom:20px}
.bvik-bav-app .bhaken::after{content:"";width:19px;height:10px;border-left:3px solid var(--bvik-bav-schwarz);border-bottom:3px solid var(--bvik-bav-schwarz);transform:rotate(-45deg) translate(2px,-3px)}
.bvik-bav-app .bkarte h2{font-size:27px}
.bvik-bav-app .bnr{margin-top:16px;display:inline-block;background:var(--bvik-bav-beige-hell);border:1px solid var(--bvik-bav-linie);border-radius:10px;padding:10px 16px;font-size:14px}
.bvik-bav-app .info{
  background:var(--bvik-bav-blau-zart);border-left:4px solid var(--bvik-bav-blau);
  padding:16px 18px;border-radius:0 10px 10px 0;font-size:14px;line-height:1.65;
}
.bvik-bav-app .info a{color:var(--bvik-bav-schwarz);font-weight:600}
.bvik-bav-app .bkarte .info{margin-top:26px}
.bvik-bav-app .bnr b{font-variant-numeric:tabular-nums}
.bvik-bav-app .bliste{margin-top:26px;border-top:1px solid var(--bvik-bav-linie);padding-top:18px;display:grid;gap:10px}
.bvik-bav-app .schritte{margin-top:28px;background:var(--bvik-bav-beige-hell);border-radius:12px;padding:22px}
.bvik-bav-app .schritte h3{font-size:16px;margin-bottom:14px}
.bvik-bav-app .schritte ol{margin:0;padding-left:20px;display:grid;gap:11px;font-size:14.5px}
.bvik-bav-app .portalcta{
  display:inline-block;margin-top:20px;background:var(--bvik-bav-schwarz);color:#fff;text-decoration:none;
  border-radius:12px;padding:15px 26px;font-weight:700;font-size:15.5px;
}
.bvik-bav-app .portalcta:hover{background:var(--bvik-bav-rot-tief);color:#fff;}
/* Dezenter Rueckweg am Ende der Bestaetigung: bewusst kein Button, damit er
   der Portal-CTA darueber nicht die Aufmerksamkeit wegnimmt. */
.bvik-bav-app .zurueck{margin-top:26px;text-align:center;font-size:13.5px}
.bvik-bav-app .zurueck a{color:var(--bvik-bav-grau);text-decoration:underline;text-underline-offset:3px}
.bvik-bav-app .zurueck a:hover{color:var(--bvik-bav-schwarz)}
.bvik-bav-app .fehler{margin-bottom:20px;background:#FDEDEC;border-left:4px solid var(--bvik-bav-rot);padding:14px 16px;border-radius:0 10px 10px 0;font-size:13.5px}

.bvik-bav-app .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Enfold-Korrekturen
   Enfold stylt Ueberschriften und Formularelemente mit ID-Selektoren
   (#top label, #top input[type=...], #top select) bzw. ueber
   .template-page .entry-content-wrapper h1/h2. Gegen deren Spezifitaet
   (bis 1,1,1) kommen die gescopten Plugin-Regeln oben (max. 0,3,1) nicht
   an - auch nicht mit !important, denn bei gleicher !important-Stufe
   entscheidet wieder die Spezifitaet.

   Deshalb hier derselbe Wertesatz wie oben, aber mit #top davor (1,2,1).
   Das schlaegt sowohl Enfolds Theme-CSS als auch typisches Quick CSS aus
   dem Customizer (#top input{...} = 1,0,1).

   Alles ist auf .bvik-bav-app begrenzt: andere Formulare der bvik-Seite
   sind nicht betroffen. Ohne Enfold (kein #top) greifen die Regeln nicht,
   dann gelten die Originalregeln weiter oben - die dort dann auch reichen.
   ============================================================ */

/* --- Ueberschriften ---
   ".template-page .entry-content-wrapper h1,h2{text-transform:uppercase;
   letter-spacing:1px}" macht aus "Rechnungsdaten" ein "RECHNUNGSDATEN",
   das Farbschema faerbt die Ueberschrift zusaetzlich rot. Groessen muessen
   mit, weil Enfolds dynamic-css eigene Schriftgroessen fuer h1-h4 setzt. */
#top .bvik-bav-app h1,
#top .bvik-bav-app h2,
#top .bvik-bav-app h3{
  color:var(--bvik-bav-schwarz) !important;
  font-family:var(--bvik-bav-schrift) !important;
  font-weight:800 !important;
  text-transform:none !important;
  letter-spacing:-.02em !important;
  line-height:1.12 !important;
  margin:0 !important;
}
#top .bvik-bav-app .hero h1{font-size:clamp(30px,5vw,50px) !important}
#top .bvik-bav-app .karte h2{font-size:21px !important}
#top .bvik-bav-app .bkarte h2{font-size:27px !important}
#top .bvik-bav-app .summe h3,
#top .bvik-bav-app .schritte h3{font-size:16px !important}
/* Die Kategorien-Zwischenueberschriften sind dagegen bewusst rot und in
   Versalien - hier also NICHT zurueckstellen, nur absichern. */
#top .bvik-bav-app .katgruppe h4{
  color:var(--bvik-bav-rot-tief) !important;
  font-family:var(--bvik-bav-schrift) !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}

/* --- Labels ---
   "#top label{font-weight:700;font-size:.92em}" und
   "#top label span{font-weight:400;font-size:13px;color:#444}". */
#top .bvik-bav-app .feld label{
  font-family:var(--bvik-bav-schrift) !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:var(--bvik-bav-schwarz) !important;
  margin:0 !important;
}
#top .bvik-bav-app .feld label .opt{
  font-size:13px !important;
  font-weight:400 !important;
  color:var(--bvik-bav-grau) !important;
}
/* .agb ist selbst ein <label> und faellt damit ebenfalls unter #top label. */
#top .bvik-bav-app .agb,
#top .bvik-bav-app .agb span{
  font-size:13.5px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  color:var(--bvik-bav-schwarz) !important;
}

/* --- Eingabefelder ---
   Enfolds Kurzform "font:1em HelveticaNeue,..." setzt neben der Schriftart
   auch line-height auf normal; "margin-bottom:20px" erzeugt die zu grossen
   Zeilenabstaende. Beides hier zuruecknehmen. */
#top .bvik-bav-app .feld input,
#top .bvik-bav-app .feld select,
#top .bvik-bav-app .feld textarea{
  font-family:var(--bvik-bav-schrift) !important;
  font-size:15px !important;
  line-height:1.45 !important;
  padding:11px 13px !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  border:1.5px solid var(--bvik-bav-linie) !important;
  border-radius:10px !important;
  /* Bewusst background-color statt der background-Kurzform: die Kurzform
     wuerde background-repeat/-position auf ihre Initialwerte zuruecksetzen
     und damit Enfolds Pfeil-Bild im <select> ueber die volle Feldbreite
     kacheln. */
  background-color:var(--bvik-bav-weiss) !important;
  color:var(--bvik-bav-schwarz) !important;
  box-shadow:none !important;
  width:100% !important;
}
#top .bvik-bav-app .feld textarea{line-height:1.55 !important}
#top .bvik-bav-app .feld input::placeholder,
#top .bvik-bav-app .feld textarea::placeholder{color:var(--bvik-bav-grau) !important;opacity:1}

/* Enfold legt bei <select> ein eigenes Doppelpfeil-Bild als Hintergrund an
   ("#top .entry-content-wrapper select"). Statt zu versuchen, es
   wegzuraeumen, wird es hier durch das eigene Chevron ersetzt - das ist
   unabhaengig davon, aus welchem Stylesheet Enfolds Regel kommt, und
   liefert in jedem Browser dasselbe Bild. */
#top .bvik-bav-app .feld select{
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:var(--bvik-bav-pfeil) !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:12px 8px !important;
  padding-right:38px !important;
}

/* Fehlerzustand und Fokus muessen ueber den obigen Regeln bleiben. */
#top .bvik-bav-app .feld input.bvik-bav-fehlerhaft,
#top .bvik-bav-app .feld select.bvik-bav-fehlerhaft,
#top .bvik-bav-app .feld textarea.bvik-bav-fehlerhaft{border-color:var(--bvik-bav-rot) !important}
#top .bvik-bav-app .feld input:focus,
#top .bvik-bav-app .feld select:focus,
#top .bvik-bav-app .feld textarea:focus{
  outline:2px solid var(--bvik-bav-blau) !important;
  outline-offset:1px !important;
  border-color:var(--bvik-bav-blau) !important;
}

/* Hinweistexte unter den Feldern (kein <label>, aber Enfold setzt eigene
   Absatz-/Span-Groessen). */
#top .bvik-bav-app .feld .tipp{
  font-family:var(--bvik-bav-schrift) !important;
  font-size:12px !important;
  font-weight:400 !important;
  color:var(--bvik-bav-grau) !important;
  line-height:1.5 !important;
}
