/* ==========================================================================
   DHB Contactwidget v4

   Gegenereerd uit het ontwerp dhb-contactwidget (designupgrade). Geen enkele
   waarde is veranderd. Wat wel anders is dan in het ontwerp:

   - Elke regel heeft drie keer .dhbw extra gekregen. Omdat dat voor ELKE regel
     geldt, verandert hun onderlinge volgorde niet, maar komt een thema of een
     Elementor-kit er niet meer tussen. Het ontwerp schermde zelf alleen zijn
     knoppen en de kleur van zijn koppen af; op de site erft de popup ook de
     regelafstand, de lettergrootte en de alineamarges van het thema, en noemt
     de kit h3, p, a, img en span bij naam.
   - Onder dit blok staan twee regels die het ontwerp niet nodig had, omdat het
     op een kale pagina gemaakt is: de beginwaarden van alles wat erft, en een
     regel die thema en kit terugdraait voor kale elementen.

   Wie iets aan de opmaak wil veranderen doet dat in het ontwerp en bouwt dit
   bestand opnieuw; hier met de hand in schrijven gaat bij de volgende keer
   bouwen verloren.
   ========================================================================== */

/* Wat in het ontwerp de browser regelt, omdat er verder niets op de pagina
   staat. Op de site zet het thema dit op <body>, en de popup zou het erven. */
.dhbw.dhbw.dhbw.dhbw{font-size:16px;line-height:normal;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:left;text-indent:0;text-shadow:none;white-space:normal;font-variant:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}

/* Thema en kit terugdraaien voor kale elementen. Lichter dan elke regel
   hieronder, zwaarder dan wat een kit schrijft. Geen svg: de icoontjes zetten
   hun lijn met attributen, en die zou all:revert ook terugdraaien. */
.dhbw.dhbw.dhbw :is(div,section,span,p,a,h1,h2,h3,h4,b,strong,small,i,em,img,button,input,label,form,video){all:revert}

.dhbw.dhbw.dhbw.dhbw{--o:#FF4400;--o2:#D93A00;--o-zacht:#FFF0EA;--d:#161616;--d2:#232323;--g:#5F5A55;--g2:#8C857E;--l:#E7E3DE;--vlak:#F5F3F0;--ok:#1FB86B;--a:0deg;
  --kaart:radial-gradient(300px 190px at 100% 0%,rgba(255,68,0,.34),rgba(255,68,0,0) 70%),linear-gradient(160deg,#222 0%,#161616 60%,#121212 100%);
  position:fixed;right:24px;bottom:24px;z-index:9990;font-family:'Poppins',system-ui,sans-serif;color:var(--d);-webkit-font-smoothing:antialiased}
.dhbw.dhbw.dhbw.dhbw *{box-sizing:border-box;margin:0;padding:0}
.dhbw.dhbw.dhbw.dhbw a{text-decoration:none;color:inherit}
.dhbw.dhbw.dhbw.dhbw button,.dhbw.dhbw.dhbw.dhbw input{font:inherit;color:inherit}
.dhbw.dhbw.dhbw.dhbw :focus-visible{outline:2px solid var(--o);outline-offset:3px}
.dhbw.dhbw.dhbw.dhbw input:focus-visible{outline:none}
.dhbw.dhbw.dhbw.dhbw svg{display:block;flex:none}
.dhbw.dhbw.dhbw.dhbw *{-webkit-tap-highlight-color:transparent}

/* Afscherming van thema en Elementor-kit. Staat bewust bovenaan. */
.dhbw.dhbw.dhbw.dhbw.dhbw button{background:none;border:0;cursor:pointer;color:inherit;box-shadow:none;text-transform:none;letter-spacing:0}
.dhbw.dhbw.dhbw.dhbw.dhbw button:hover,.dhbw.dhbw.dhbw.dhbw.dhbw button:focus{color:inherit}
.dhbw.dhbw.dhbw.dhbw.dhbw h1,.dhbw.dhbw.dhbw.dhbw.dhbw h2,.dhbw.dhbw.dhbw.dhbw.dhbw h3,.dhbw.dhbw.dhbw.dhbw.dhbw h4{color:inherit}

/* De gloeiende bogen, het DHB-motief op donkere vlakken */
.dhbw.dhbw.dhbw .dhbw-boog{position:absolute;pointer-events:none;width:300px;height:300px;top:-236px;right:-190px;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;border:1px solid rgba(255,106,42,.42)}
.dhbw.dhbw.dhbw .dhbw-boog.b2{top:-218px;right:-172px;border-color:rgba(255,106,42,.22)}

/* ---------- Launcher ---------- */
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch{position:relative;display:flex;align-items:center;height:68px;padding:8px;border-radius:999px;isolation:isolate;
  background:var(--d);color:#fff;box-shadow:0 22px 44px -16px rgba(22,22,22,.6);transition:transform .3s,box-shadow .3s;
  animation:dhbwKom .8s .25s cubic-bezier(.2,.8,.2,1) both}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch:hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch:focus{background:var(--d);color:#fff}
@keyframes dhbwKom{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
.dhbw.dhbw.dhbw.dhbw .dhbw-launch::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--a),transparent 0 240deg,#FF4400 300deg,#FFC2A6 322deg,transparent 350deg),#303030}
.dhbw.dhbw.dhbw.dhbw .dhbw-launch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--d)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch:hover{transform:translateY(-2px)}
.dhbw.dhbw.dhbw .dhbw-lfoto{position:relative;width:52px;height:52px;flex:none;transition:width .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.dhbw.dhbw.dhbw .dhbw-lfoto img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#2a2a2a}
.dhbw.dhbw.dhbw .dhbw-dot{position:absolute;right:-1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid var(--d)}
.dhbw.dhbw.dhbw .dhbw-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ok);animation:dhbwPuls 2.4s infinite}
.dhbw.dhbw.dhbw.dhbw.gesloten .dhbw-dot{background:#8f8f8f}.dhbw.dhbw.dhbw.dhbw.gesloten .dhbw-dot::after{display:none}
@keyframes dhbwPuls{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.dhbw.dhbw.dhbw .dhbw-badge{position:absolute;top:-3px;left:-3px;min-width:20px;height:20px;border-radius:999px;background:var(--o);color:#fff;font-size:12px;font-weight:600;
  display:grid;place-items:center;border:2.5px solid var(--d);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.dhbw.dhbw.dhbw.dhbw.ongelezen .dhbw-badge{transform:scale(1)}
.dhbw.dhbw.dhbw .dhbw-ltekst{overflow:hidden;white-space:nowrap;max-width:200px;padding:0 16px 0 13px;text-align:left;transition:max-width .4s cubic-bezier(.2,.8,.2,1),padding .4s,opacity .25s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-ltekst strong{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;line-height:1.25;color:#fff}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-ltekst span{font-size:13px;color:#C4BEB7}
.dhbw.dhbw.dhbw .dhbw-lcirkel{position:relative;width:52px;height:52px;border-radius:50%;background:var(--o);display:grid;place-items:center;flex:none;transition:background .3s}
.dhbw.dhbw.dhbw .dhbw-lcirkel svg{position:absolute;width:22px;height:22px;stroke:#fff;transition:opacity .3s,transform .4s}
.dhbw.dhbw.dhbw .dhbw-lcirkel .x{opacity:0;transform:rotate(-90deg) scale(.6)}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-lfoto{width:0;opacity:0}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-ltekst{max-width:0;padding:0;opacity:0}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-lcirkel{background:#2e2e2e}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-lcirkel .chat{opacity:0;transform:rotate(90deg) scale(.6)}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-lcirkel .x{opacity:1;transform:none}

/* ---------- Teaser ---------- */
.dhbw.dhbw.dhbw .dhbw-teaser{position:absolute;right:4px;bottom:86px;width:292px;padding:14px 42px 14px 14px;border-radius:20px 20px 6px 20px;background:#fff;
  box-shadow:0 20px 50px -18px rgba(22,22,22,.4),0 0 0 1px rgba(22,22,22,.05);display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.dhbw.dhbw.dhbw .dhbw-teaser.zien{opacity:1;transform:none;pointer-events:auto}
.dhbw.dhbw.dhbw .dhbw-teaser img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--vlak)}
.dhbw.dhbw.dhbw .dhbw-teaser b{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;margin-bottom:2px}
.dhbw.dhbw.dhbw .dhbw-teaser p{font-size:14px;line-height:1.5;color:#3A3632}
.dhbw.dhbw.dhbw .dhbw-teaser .dhbw-typ{margin-top:6px;padding:0}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tx{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--g2)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tx:hover{background:var(--vlak);color:var(--d)}
.dhbw.dhbw.dhbw .dhbw-tx svg{width:13px;height:13px;stroke:currentColor}

/* ---------- Paneel ---------- */
.dhbw.dhbw.dhbw .dhbw-paneel{position:absolute;right:0;bottom:88px;width:404px;border-radius:28px;padding:2px;
  background:conic-gradient(from var(--a),transparent 0 250deg,#FF4400 305deg,#FFC2A6 325deg,transparent 348deg),#dcdcdc;
  box-shadow:0 50px 100px -30px rgba(22,22,22,.5),0 20px 40px -20px rgba(22,22,22,.25);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom right;
  transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-paneel{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.dhbw.dhbw.dhbw.dhbw.sleept .dhbw-paneel{transition:none}
.dhbw.dhbw.dhbw .dhbw-binnen{border-radius:26px;overflow:hidden;background:#fff;display:flex;flex-direction:column;max-height:min(800px,calc(100vh - 130px))}

/* Kop met foto */
.dhbw.dhbw.dhbw .dhbw-kop{position:relative;height:232px;flex:none;color:#fff;overflow:hidden;background:var(--d);touch-action:pan-y}
.dhbw.dhbw.dhbw .dhbw-kop-foto{position:absolute;inset:-14px;transition:transform .25s ease-out}
.dhbw.dhbw.dhbw .dhbw-kop-foto img{width:100%;height:100%;object-fit:cover;object-position:52% 62%;transform:scale(1.07);transition:transform 7s ease-out}
.dhbw.dhbw.dhbw.dhbw.open .dhbw-kop-foto img{transform:scale(1.01)}
/* De video ligt over de sfeerfoto en wordt pas zichtbaar als hij echt speelt. */
.dhbw.dhbw.dhbw.dhbw .dhbw-kop-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity .7s ease;pointer-events:none;background:transparent;border:0;border-radius:0}
.dhbw.dhbw.dhbw.dhbw .dhbw-kop-video.speelt{opacity:1}
.dhbw.dhbw.dhbw .dhbw-kop::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(22,22,22,.42) 0%,rgba(22,22,22,0) 28%,rgba(22,22,22,.14) 50%,rgba(22,22,22,.9) 84%,#161616 100%),
  radial-gradient(120% 80% at 100% 0%,rgba(255,68,0,.32),transparent 55%)}
.dhbw.dhbw.dhbw .dhbw-kop .dhbw-boog{z-index:1;width:520px;height:520px;top:-400px;right:-330px}
.dhbw.dhbw.dhbw .dhbw-kop .dhbw-boog.b2{top:-372px;right:-302px}
.dhbw.dhbw.dhbw .dhbw-handvat{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.6);z-index:3}
.dhbw.dhbw.dhbw .dhbw-kop-top{position:absolute;top:14px;left:16px;right:14px;z-index:2;display:flex;justify-content:space-between;align-items:center}
.dhbw.dhbw.dhbw .dhbw-pill{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 12px;border-radius:999px;background:rgba(22,22,22,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:13px;font-weight:500;transition:background .3s}
.dhbw.dhbw.dhbw .dhbw-pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,184,107,.25);transition:background .3s}
.dhbw.dhbw.dhbw.dhbw.gesloten .dhbw-pill i{background:#a0a0a0;box-shadow:0 0 0 3px rgba(160,160,160,.25)}
.dhbw.dhbw.dhbw.dhbw.typt .dhbw-pill i{background:var(--o);box-shadow:0 0 0 3px rgba(255,68,0,.25);animation:dhbwKnip 1s infinite}
@keyframes dhbwKnip{50%{opacity:.35}}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-sluit{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(22,22,22,.5);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,transform .3s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-sluit:hover{background:var(--o);transform:rotate(90deg)}
.dhbw.dhbw.dhbw .dhbw-sluit svg{width:16px;height:16px;stroke:#fff}
.dhbw.dhbw.dhbw .dhbw-kop-onder{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-kop-onder h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:25px;line-height:1.1;letter-spacing:-.02em;margin-bottom:5px;color:#fff}
.dhbw.dhbw.dhbw .dhbw-kop-onder p{font-size:13.5px;color:#DAD5CF}
.dhbw.dhbw.dhbw .dhbw-feiten{display:flex;gap:7px;margin-top:13px}
.dhbw.dhbw.dhbw .dhbw-feit{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:12.5px;font-weight:500;white-space:nowrap}
.dhbw.dhbw.dhbw .dhbw-feit svg{width:14px;height:14px}
.dhbw.dhbw.dhbw .dhbw-feit .ster{fill:#FFB400}
.dhbw.dhbw.dhbw .dhbw-feit .lijn{stroke:var(--o);fill:none}

/* Schermen */
.dhbw.dhbw.dhbw .dhbw-schermen{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.dhbw.dhbw.dhbw .dhbw-scherm{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 16px;
  opacity:0;transform:translateX(30px);visibility:hidden;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s linear .4s}
.dhbw.dhbw.dhbw .dhbw-scherm.actief{position:relative;flex:1;min-height:340px;opacity:1;transform:none;visibility:visible;transition:opacity .3s .05s,transform .4s .05s cubic-bezier(.2,.8,.2,1)}
.dhbw.dhbw.dhbw .dhbw-scherm.weg{transform:translateX(-30px)}
.dhbw.dhbw.dhbw .dhbw-scherm::-webkit-scrollbar{width:0}

/* ---------- Scherm 1: gesprek ---------- */
.dhbw.dhbw.dhbw .dhbw-rij{display:flex;gap:9px;align-items:flex-end;margin-bottom:6px;animation:dhbwIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes dhbwIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dhbw.dhbw.dhbw .dhbw-rij img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--vlak)}
.dhbw.dhbw.dhbw .dhbw-rij .leeg{width:30px;flex:none}
.dhbw.dhbw.dhbw .dhbw-bub{background:var(--vlak);border-radius:18px 18px 18px 6px;padding:12px 16px;font-size:14.5px;line-height:1.55;max-width:296px}
.dhbw.dhbw.dhbw .dhbw-bub b{font-weight:600}
.dhbw.dhbw.dhbw .dhbw-rij.jij{justify-content:flex-end;margin:10px 0}
.dhbw.dhbw.dhbw .dhbw-rij.jij .dhbw-bub{background:var(--d);color:#fff;border-radius:18px 18px 6px 18px;font-weight:500}
.dhbw.dhbw.dhbw .dhbw-typ{display:inline-flex;gap:4px;padding:15px 16px}
.dhbw.dhbw.dhbw .dhbw-typ i{width:7px;height:7px;border-radius:50%;background:#b0aaa3;animation:dhbwTyp 1s infinite}
.dhbw.dhbw.dhbw .dhbw-typ i:nth-child(2){animation-delay:.15s}.dhbw.dhbw.dhbw .dhbw-typ i:nth-child(3){animation-delay:.3s}
@keyframes dhbwTyp{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.dhbw.dhbw.dhbw .dhbw-meta{font-size:12px;color:var(--g2);margin:2px 0 10px 39px}

/* Onderwerptegels, over de volle breedte */
.dhbw.dhbw.dhbw .dhbw-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 4px;animation:dhbwIn .45s cubic-bezier(.2,.8,.2,1) both}
.dhbw.dhbw.dhbw .dhbw-tegels-lbl{grid-column:1/-1;margin:4px 2px 0;font-size:13px;font-weight:500;color:var(--g)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:13px;border-radius:16px;background:#fff;color:var(--d);
  box-shadow:inset 0 0 0 1px var(--l);text-align:left;transition:box-shadow .2s,transform .2s,background .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel:hover{box-shadow:inset 0 0 0 1.5px var(--o);transform:translateY(-2px);color:var(--d)}
.dhbw.dhbw.dhbw .dhbw-tegel .ic{width:38px;height:38px;border-radius:50%;background:var(--vlak);display:grid;place-items:center;transition:background .2s;flex:none}
.dhbw.dhbw.dhbw .dhbw-tegel .ic svg{width:19px;height:19px;stroke:var(--d);fill:none;transition:stroke .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel:hover .ic{background:var(--o)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel:hover .ic svg{stroke:#fff}
.dhbw.dhbw.dhbw .dhbw-tegel strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;line-height:1.25}
/* Compacte dienst-tegels, 4 naast elkaar */
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.mini{align-items:center;justify-content:center;text-align:center;gap:8px;padding:12px 2px 10px;border-radius:16px;min-width:0}
.dhbw.dhbw.dhbw .dhbw-tegel.mini .ic{width:40px;height:40px}
.dhbw.dhbw.dhbw .dhbw-tegel.mini .ic svg{width:20px;height:20px}
.dhbw.dhbw.dhbw .dhbw-tegel.mini strong{font-size:13px;white-space:nowrap}
/* Storing als smalle rij onderaan */
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;min-height:54px;padding:9px 14px 9px 9px;border-radius:16px;background:var(--o-zacht);box-shadow:inset 0 0 0 1px #FFD2C2}
.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij .ic{width:36px;height:36px;background:#fff}
.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij .ic svg{width:18px;height:18px;stroke:var(--o2)}
.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij strong{font-size:14.5px;font-weight:800;color:var(--o2);white-space:nowrap}
.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij .spoed{margin-left:auto;font-weight:500;color:#8A4A30;font-size:12.5px;white-space:nowrap}
.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij .pijl{width:16px;height:16px;stroke:var(--o2);fill:none;flex:none}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij:hover{box-shadow:inset 0 0 0 1.5px var(--o)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij:hover .ic{background:var(--o)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij:hover .ic svg{stroke:#fff}
/* Check-tegel: de hoofdactie, donker met gloed en bogen */
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.check{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--kaart);color:#fff;box-shadow:none;overflow:hidden}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.check:hover{box-shadow:0 18px 32px -16px rgba(22,22,22,.75);transform:translateY(-2px);color:#fff}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.check .ic,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.check:hover .ic{position:relative;background:var(--o);width:50px;height:50px;border-radius:15px;box-shadow:0 10px 22px -8px rgba(255,68,0,.8)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.check .ic svg{width:24px;height:24px;stroke:#fff}
.dhbw.dhbw.dhbw .dhbw-tegel.check .tx{position:relative;flex:1;min-width:0}
.dhbw.dhbw.dhbw .dhbw-tegel.check strong{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.dhbw.dhbw.dhbw .dhbw-tegel.check small{display:block;font-size:13px;color:#C4BEB7;font-weight:400;margin-top:3px;line-height:1.4}
.dhbw.dhbw.dhbw .dhbw-check-stappen{display:flex;gap:4px;margin-top:9px}
.dhbw.dhbw.dhbw .dhbw-check-stappen i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.22)}
.dhbw.dhbw.dhbw .dhbw-check-stappen i:first-child{background:var(--o)}
.dhbw.dhbw.dhbw .dhbw-tegel.check .ga{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .25s}
.dhbw.dhbw.dhbw .dhbw-tegel.check .ga .pijl{width:16px;height:16px;stroke:var(--d);fill:none;stroke-width:2.6}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.check:hover .ga{transform:translateX(3px)}

/* Keuze-acties na een onderwerp */
.dhbw.dhbw.dhbw .dhbw-keuzes{display:grid;gap:8px;margin:8px 0 4px;animation:dhbwIn .45s cubic-bezier(.2,.8,.2,1) both}
.dhbw.dhbw.dhbw .dhbw-keuzes.vol{margin-left:0}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-keuze{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:11px 14px;border-radius:16px;background:#fff;color:var(--d);box-shadow:inset 0 0 0 1px var(--l);text-align:left;width:100%;transition:box-shadow .2s,transform .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-keuze:hover{box-shadow:inset 0 0 0 1.5px var(--d);transform:translateX(3px);color:var(--d)}
.dhbw.dhbw.dhbw .dhbw-keuze .ic{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--vlak);flex:none}
.dhbw.dhbw.dhbw .dhbw-keuze .ic svg{width:19px;height:19px;stroke:var(--d);fill:none}
.dhbw.dhbw.dhbw .dhbw-keuze .tx{position:relative}
.dhbw.dhbw.dhbw .dhbw-keuze strong{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14.5px}
.dhbw.dhbw.dhbw .dhbw-keuze small{font-size:13px;color:var(--g)}
.dhbw.dhbw.dhbw .dhbw-keuze .pijl{position:relative;margin-left:auto;width:16px;height:16px;stroke:#b0aaa3;fill:none}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-keuze.hoofd{background:var(--kaart);color:#fff;box-shadow:none;overflow:hidden;min-height:66px}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-keuze.hoofd:hover{box-shadow:0 14px 28px -14px rgba(22,22,22,.75);color:#fff}
.dhbw.dhbw.dhbw .dhbw-keuze.hoofd strong{font-weight:800;font-size:15.5px}
.dhbw.dhbw.dhbw .dhbw-keuze.hoofd small{color:#C4BEB7}
.dhbw.dhbw.dhbw .dhbw-keuze.hoofd .ic{background:var(--o);box-shadow:0 8px 18px -8px rgba(255,68,0,.8)}
.dhbw.dhbw.dhbw .dhbw-keuze.hoofd .ic svg{stroke:#fff}
.dhbw.dhbw.dhbw .dhbw-keuze.hoofd .pijl{stroke:#fff}
.dhbw.dhbw.dhbw .dhbw-keuze[href*="wa.me"] .ic{background:#E7F7EE}
.dhbw.dhbw.dhbw .dhbw-keuze[href*="wa.me"] .ic svg{stroke:#178C47}

/* ---------- Scherm 2: beveiligingscheck ---------- */
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-terug{display:flex;width:fit-content;align-items:center;gap:6px;min-height:32px;font-size:13.5px;font-weight:500;color:var(--g);margin-bottom:12px;padding:4px 10px 4px 0}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-terug:hover{color:var(--d)}
.dhbw.dhbw.dhbw .dhbw-terug svg{width:16px;height:16px;stroke:currentColor;fill:none;transition:transform .2s}
.dhbw.dhbw.dhbw .dhbw-terug:hover svg{transform:translateX(-3px)}
.dhbw.dhbw.dhbw .dhbw-stappen{display:flex;gap:6px;margin:0 0 18px}
.dhbw.dhbw.dhbw .dhbw-stappen i{flex:1;height:5px;border-radius:99px;background:var(--l);overflow:hidden;position:relative}
.dhbw.dhbw.dhbw .dhbw-stappen i::after{content:"";position:absolute;inset:0;background:var(--o);border-radius:99px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dhbw.dhbw.dhbw .dhbw-stappen i.aan::after{transform:none}
.dhbw.dhbw.dhbw .dhbw-stap-lbl{font-size:13px;font-weight:600;color:var(--o2);margin-bottom:6px}
.dhbw.dhbw.dhbw .dhbw-vraag{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.015em;margin-bottom:4px}
.dhbw.dhbw.dhbw .dhbw-vsub{font-size:13.5px;color:var(--g);margin-bottom:16px;min-height:1em}
.dhbw.dhbw.dhbw .dhbw-opties{display:grid;gap:8px;animation:dhbwIn .35s cubic-bezier(.2,.8,.2,1) both}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie{display:flex;align-items:center;gap:13px;min-height:64px;padding:11px 14px;border-radius:18px;background:#fff;color:var(--d);box-shadow:inset 0 0 0 1px var(--l);text-align:left;width:100%;transition:box-shadow .2s,transform .2s,background .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie:hover{box-shadow:inset 0 0 0 1.5px var(--d);transform:translateX(3px);color:var(--d)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--o);background:var(--o-zacht)}
.dhbw.dhbw.dhbw .dhbw-optie .ic{width:42px;height:42px;border-radius:50%;background:var(--vlak);display:grid;place-items:center;flex:none;transition:background .2s}
.dhbw.dhbw.dhbw .dhbw-optie .ic svg{width:20px;height:20px;stroke:var(--d);fill:none;transition:stroke .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie[aria-pressed=true] .ic{background:var(--o)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie[aria-pressed=true] .ic svg{stroke:#fff}
.dhbw.dhbw.dhbw .dhbw-optie strong{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px}
.dhbw.dhbw.dhbw .dhbw-optie small{font-size:13px;color:var(--g)}
.dhbw.dhbw.dhbw .dhbw-optie .vk{margin-left:auto;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #d2ccc5;display:grid;place-items:center;flex:none;transition:all .2s}
.dhbw.dhbw.dhbw .dhbw-optie .vk svg{width:13px;height:13px;stroke:#fff;fill:none;opacity:0;transform:scale(.5);transition:all .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie[aria-pressed=true] .vk{background:var(--o);box-shadow:none}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie[aria-pressed=true] .vk svg{opacity:1;transform:none}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende{width:100%;height:54px;margin-top:14px;border-radius:999px;background:var(--d);color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;transition:opacity .2s,transform .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende:hover{color:#fff}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende:disabled{opacity:.3;cursor:default}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende:not(:disabled):hover{transform:translateY(-1px)}
.dhbw.dhbw.dhbw .dhbw-volgende svg{width:16px;height:16px;stroke:var(--o);fill:none}

/* ---------- Scherm 3: advies ---------- */
.dhbw.dhbw.dhbw .dhbw-advies{animation:dhbwIn .4s cubic-bezier(.2,.8,.2,1) both}
.dhbw.dhbw.dhbw .dhbw-adv-kop{position:relative;overflow:hidden;display:flex;gap:13px;align-items:center;margin-bottom:12px;padding:16px;border-radius:20px;background:var(--kaart);color:#fff}
.dhbw.dhbw.dhbw .dhbw-adv-kop img{position:relative;width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--o);background:#2a2a2a;flex:none}
.dhbw.dhbw.dhbw .dhbw-adv-kop div{position:relative}
.dhbw.dhbw.dhbw .dhbw-adv-kop strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.01em}
.dhbw.dhbw.dhbw .dhbw-adv-kop span{font-size:13px;color:#C4BEB7}
.dhbw.dhbw.dhbw .dhbw-adv-lijst{display:grid;gap:8px;margin-bottom:12px}
.dhbw.dhbw.dhbw .dhbw-adv-item{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--l);opacity:0;animation:dhbwIn .4s cubic-bezier(.2,.8,.2,1) forwards}
.dhbw.dhbw.dhbw .dhbw-adv-item .ic{width:40px;height:40px;border-radius:50%;background:var(--o-zacht);display:grid;place-items:center;flex:none}
.dhbw.dhbw.dhbw .dhbw-adv-item .ic svg{width:19px;height:19px;stroke:var(--o2);fill:none}
.dhbw.dhbw.dhbw .dhbw-adv-item strong{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14.5px;margin-bottom:2px}
.dhbw.dhbw.dhbw .dhbw-adv-item p{font-size:13px;color:var(--g);line-height:1.5}
.dhbw.dhbw.dhbw .dhbw-adv-nr{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--d);color:#fff;display:grid;place-items:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;flex:none}
/* Het advieswoord van de adviseur, als spreekballon in plaats van citaatstreep */
.dhbw.dhbw.dhbw .dhbw-adv-quote{position:relative;margin:0 0 14px;padding:12px 16px;border-radius:18px 18px 18px 6px;background:var(--vlak);font-size:14px;line-height:1.55;color:#3A3632}

/* ---------- Scherm 4: terugbelformulier ---------- */
.dhbw.dhbw.dhbw .dhbw-fkop{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.015em;margin-bottom:5px}
.dhbw.dhbw.dhbw .dhbw-fsub{font-size:14px;color:var(--g);line-height:1.55;margin-bottom:18px}
.dhbw.dhbw.dhbw .dhbw-onderwerp{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 11px;border-radius:999px;background:var(--o-zacht);color:var(--o2);font-size:13px;font-weight:600;margin-bottom:14px}
.dhbw.dhbw.dhbw .dhbw-onderwerp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--o)}
.dhbw.dhbw.dhbw .dhbw-veld{position:relative;margin-bottom:10px}
.dhbw.dhbw.dhbw .dhbw-veld input{width:100%;height:58px;border-radius:16px;border:0;background:var(--vlak);padding:24px 46px 6px 16px;font-size:15.5px;font-weight:500;outline:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background .2s}
.dhbw.dhbw.dhbw .dhbw-veld label{position:absolute;left:16px;top:19px;font-size:15px;color:var(--g2);pointer-events:none;transition:all .2s}
.dhbw.dhbw.dhbw .dhbw-veld input:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--d),0 0 0 4px rgba(255,68,0,.12)}
.dhbw.dhbw.dhbw .dhbw-veld input:focus+label,.dhbw.dhbw.dhbw .dhbw-veld input:not(:placeholder-shown)+label{top:9px;font-size:12px;color:var(--g)}
.dhbw.dhbw.dhbw .dhbw-vink{position:absolute;right:16px;top:18px;width:22px;height:22px;border-radius:50%;background:var(--ok);display:grid;place-items:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.dhbw.dhbw.dhbw .dhbw-vink svg{width:12px;height:12px;stroke:#fff;fill:none}
.dhbw.dhbw.dhbw .dhbw-veld.goed .dhbw-vink{transform:scale(1)}
.dhbw.dhbw.dhbw .dhbw-veld.fout input{box-shadow:inset 0 0 0 1.5px var(--o);background:#fff}
.dhbw.dhbw.dhbw .dhbw-fout{font-size:12.5px;color:var(--o2);margin:5px 0 0 6px;display:none}
.dhbw.dhbw.dhbw .dhbw-veld.fout .dhbw-fout{display:block}
.dhbw.dhbw.dhbw .dhbw-lbl{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;margin:16px 0 9px}
.dhbw.dhbw.dhbw .dhbw-momenten{display:flex;flex-wrap:wrap;gap:7px}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-moment{height:42px;padding:0 16px;border-radius:999px;background:#fff;color:var(--d);box-shadow:inset 0 0 0 1px #dcd6cf;font-size:13.5px;font-weight:500;transition:all .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-moment:hover{box-shadow:inset 0 0 0 1.5px var(--d);color:var(--d)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-moment[aria-pressed=true]{background:var(--d);color:#fff;box-shadow:none}
.dhbw.dhbw.dhbw .dhbw-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-verstuur{position:relative;overflow:hidden;width:100%;height:58px;margin-top:20px;border-radius:999px;background:var(--o);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 16px 30px -12px rgba(255,68,0,.7);transition:background .2s,transform .2s,opacity .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-verstuur:hover{background:#E83E00;color:#fff;transform:translateY(-1px)}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-verstuur:disabled{opacity:.7;cursor:default;transform:none}
.dhbw.dhbw.dhbw .dhbw-verstuur svg{width:19px;height:19px;stroke:#fff;fill:none}
.dhbw.dhbw.dhbw .dhbw-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dhbwDraai .7s linear infinite;display:none}
.dhbw.dhbw.dhbw .dhbw-verstuur.bezig .dhbw-spinner{display:block}.dhbw.dhbw.dhbw .dhbw-verstuur.bezig svg,.dhbw.dhbw.dhbw .dhbw-verstuur.bezig span{display:none}
@keyframes dhbwDraai{to{transform:rotate(360deg)}}
.dhbw.dhbw.dhbw .dhbw-privacy{font-size:12.5px;color:var(--g2);text-align:center;margin-top:12px;line-height:1.5}
.dhbw.dhbw.dhbw .dhbw-privacy::before{content:"";display:inline-block;vertical-align:-2px;margin-right:6px;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C857E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Scherm 5: bedankt ---------- */
.dhbw.dhbw.dhbw .dhbw-succes{text-align:center;padding:10px 2px 4px}
.dhbw.dhbw.dhbw .dhbw-ring{width:92px;height:92px;margin:0 auto 14px;position:relative}
.dhbw.dhbw.dhbw .dhbw-ring svg{width:92px;height:92px}
.dhbw.dhbw.dhbw .dhbw-ring .c{stroke:var(--o);stroke-width:3;fill:none;stroke-dasharray:283;stroke-dashoffset:283;transform:rotate(-90deg);transform-origin:center}
.dhbw.dhbw.dhbw .dhbw-ring .v{stroke:var(--d);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.dhbw.dhbw.dhbw .dhbw-scherm.actief .dhbw-ring .c{animation:dhbwTeken .8s .15s cubic-bezier(.6,0,.3,1) forwards}
.dhbw.dhbw.dhbw .dhbw-scherm.actief .dhbw-ring .v{animation:dhbwTeken .45s .8s ease-out forwards}
.dhbw.dhbw.dhbw .dhbw-ring img{position:absolute;right:-6px;bottom:-4px;width:38px;height:38px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:var(--vlak);opacity:0;transform:scale(.5)}
.dhbw.dhbw.dhbw .dhbw-scherm.actief .dhbw-ring img{animation:dhbwPop .45s 1.1s cubic-bezier(.3,1.6,.5,1) forwards}
.dhbw.dhbw.dhbw .dhbw-vonk{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--o);opacity:0;pointer-events:none}
.dhbw.dhbw.dhbw .dhbw-scherm.actief .dhbw-vonk{animation:dhbwVonk .75s .95s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes dhbwVonk{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}
@keyframes dhbwTeken{to{stroke-dashoffset:0}}
@keyframes dhbwPop{to{opacity:1;transform:none}}
.dhbw.dhbw.dhbw .dhbw-succes h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:23px;letter-spacing:-.015em;margin-bottom:6px}
.dhbw.dhbw.dhbw .dhbw-succes>p{font-size:14.5px;color:var(--g);line-height:1.6;max-width:30ch;margin:0 auto 18px}
.dhbw.dhbw.dhbw .dhbw-bon{text-align:left;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--l);padding:4px 16px}
.dhbw.dhbw.dhbw .dhbw-bon div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:14px}
.dhbw.dhbw.dhbw .dhbw-bon div+div{border-top:1px dashed #dcd6cf}
.dhbw.dhbw.dhbw .dhbw-bon span{color:var(--g);flex:none}
.dhbw.dhbw.dhbw .dhbw-bon b{font-weight:600;text-align:right}
/* Wat er nu gebeurt: een echte volgorde, dus een tijdlijn */
.dhbw.dhbw.dhbw .dhbw-vervolg{text-align:left;margin-top:12px;padding:16px 16px 4px;border-radius:18px;background:var(--vlak)}
.dhbw.dhbw.dhbw .dhbw-vervolg-kop{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;margin-bottom:12px}
.dhbw.dhbw.dhbw .dhbw-vstap{position:relative;display:flex;gap:12px;align-items:flex-start;padding-bottom:14px}
.dhbw.dhbw.dhbw .dhbw-vstap:not(:last-child)::before{content:"";position:absolute;left:10.5px;top:24px;bottom:2px;width:1.5px;background:#d8d2cb}
.dhbw.dhbw.dhbw .dhbw-vstap i{position:relative;width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px #cfc9c2}
.dhbw.dhbw.dhbw .dhbw-vstap.klaar i{background:var(--ok);box-shadow:none}
.dhbw.dhbw.dhbw .dhbw-vstap.klaar i svg{width:12px;height:12px;stroke:#fff;fill:none}
.dhbw.dhbw.dhbw .dhbw-vstap.nu i{box-shadow:inset 0 0 0 2px var(--o)}
.dhbw.dhbw.dhbw .dhbw-vstap.nu i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--o)}
.dhbw.dhbw.dhbw .dhbw-vstap b{display:block;font-size:14px;font-weight:600;line-height:1.4}
.dhbw.dhbw.dhbw .dhbw-vstap small{display:block;font-size:13px;color:var(--g);line-height:1.45}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-klaar{margin-top:14px;height:52px;width:100%;border-radius:999px;background:var(--d);color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;transition:transform .2s}
.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-klaar:hover{color:#fff;transform:translateY(-1px)}

/* ---------- Voet ---------- */
.dhbw.dhbw.dhbw .dhbw-voet{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 14px;border-top:1px solid var(--l);background:#fff}
.dhbw.dhbw.dhbw .dhbw-voet span{font-size:13px;color:var(--g);white-space:nowrap}
.dhbw.dhbw.dhbw .dhbw-direct{display:flex;gap:7px}
.dhbw.dhbw.dhbw .dhbw-direct a{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--l);font-size:13.5px;font-weight:600;white-space:nowrap;transition:box-shadow .2s,background .2s,color .2s}
.dhbw.dhbw.dhbw .dhbw-direct a span{font-size:13.5px;color:inherit}
.dhbw.dhbw.dhbw .dhbw-direct a:hover{box-shadow:inset 0 0 0 1.5px var(--d)}
.dhbw.dhbw.dhbw .dhbw-direct svg{width:16px;height:16px;stroke:var(--o2);fill:none}
.dhbw.dhbw.dhbw .dhbw-direct .js-wa svg{stroke:#178C47}
@media (hover:hover){
  .dhbw.dhbw.dhbw .dhbw-direct .js-wa:hover{background:#1FA855;color:#fff;box-shadow:none}
  .dhbw.dhbw.dhbw .dhbw-direct .js-wa:hover svg{stroke:#fff}
}

/* ================= MOBIEL ================= */
.dhbw.dhbw.dhbw .dhbw-sluier{display:none}
.dhbw.dhbw.dhbw .dhbw-mini{display:none}
@media (max-width:640px){
  .dhbw.dhbw.dhbw.dhbw{right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch{height:60px;padding:6px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s,box-shadow .3s}
  .dhbw.dhbw.dhbw .dhbw-lfoto,.dhbw.dhbw.dhbw .dhbw-lfoto img,.dhbw.dhbw.dhbw .dhbw-lcirkel{width:48px;height:48px}
  .dhbw.dhbw.dhbw .dhbw-ltekst{padding:0 12px 0 11px}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-ltekst strong{font-size:14.5px}
  .dhbw.dhbw.dhbw.dhbw.dhbw.verborgen:not(.open) .dhbw-launch{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
  .dhbw.dhbw.dhbw.dhbw.dhbw.open .dhbw-launch,.dhbw.dhbw.dhbw.dhbw.dhbw.verborgen:not(.open) .dhbw-launch{animation:none}
  .dhbw.dhbw.dhbw.dhbw.dhbw.open .dhbw-launch{transform:scale(.85);opacity:0;visibility:hidden;pointer-events:none}
  .dhbw.dhbw.dhbw .dhbw-teaser{right:0;bottom:74px;width:min(296px,calc(100vw - 24px))}

  /* Achtergrond */
  .dhbw.dhbw.dhbw .dhbw-sluier{display:block;position:fixed;inset:0;background:rgba(22,22,22,.5);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
  .dhbw.dhbw.dhbw.dhbw.open .dhbw-sluier{opacity:1;visibility:visible;transition:opacity .35s}

  /* Bottom sheet */
  .dhbw.dhbw.dhbw .dhbw-paneel{position:fixed;left:0;right:0;bottom:var(--kb,0px);width:auto;border-radius:24px 24px 0 0;padding:2px 2px 0;opacity:1;
    transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.85,.2,1),visibility 0s linear .45s;box-shadow:0 -20px 60px -20px rgba(22,22,22,.5)}
  .dhbw.dhbw.dhbw.dhbw.open .dhbw-paneel{transform:none;transition:transform .45s cubic-bezier(.2,.85,.2,1)}
  .dhbw.dhbw.dhbw .dhbw-binnen{border-radius:22px 22px 0 0;height:92vh;height:var(--sheet-h,92dvh);max-height:none}
  .dhbw.dhbw.dhbw .dhbw-handvat{display:block}
  .dhbw.dhbw.dhbw .dhbw-kop{height:172px;transition:height .3s cubic-bezier(.2,.8,.2,1)}
  .dhbw.dhbw.dhbw .dhbw-kop-top{top:20px;left:14px;right:12px}
  .dhbw.dhbw.dhbw .dhbw-kop-onder{left:16px;right:16px;bottom:14px;transition:bottom .3s}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-kop-onder h2{font-size:21px;transition:font-size .3s}
  .dhbw.dhbw.dhbw .dhbw-kop-onder p{font-size:13px}
  .dhbw.dhbw.dhbw .dhbw-feiten{margin-top:10px}
  .dhbw.dhbw.dhbw .dhbw-kop-onder p,.dhbw.dhbw.dhbw .dhbw-feiten{transition:opacity .2s,max-height .3s;max-height:60px;overflow:hidden}

  /* Toetsenbord open: kop klapt in */
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-kop{height:66px}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-kop-onder{bottom:18px;left:64px}
  .dhbw.dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-kop-onder h2{font-size:16px;margin:0}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-kop-onder p,.dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-feiten{opacity:0;max-height:0;margin:0}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-pill{display:none}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-kop-top{top:13px}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-handvat{display:none}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-mini{display:block;position:absolute;left:14px;top:13px;width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--o);z-index:3}

  /* Inhoud */
  .dhbw.dhbw.dhbw .dhbw-scherm{padding:16px 14px 18px}
  .dhbw.dhbw.dhbw .dhbw-scherm.actief{min-height:0}
  .dhbw.dhbw.dhbw .dhbw-bub{max-width:calc(100vw - 90px);font-size:15px}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.mini{min-height:82px}
  .dhbw.dhbw.dhbw .dhbw-veld input{font-size:16px}   /* 16px voorkomt inzoomen op iOS */
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-moment{height:46px;padding:0 17px;font-size:14px}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende{height:56px}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-terug{min-height:40px}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tx{width:36px;height:36px;top:4px;right:4px}

  /* Voet: twee brede knoppen */
  .dhbw.dhbw.dhbw .dhbw-voet{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .dhbw.dhbw.dhbw.dhbw.toetsenbord .dhbw-voet{display:none}
  .dhbw.dhbw.dhbw .dhbw-voet>span{display:none}
  .dhbw.dhbw.dhbw .dhbw-direct{flex:1}
  .dhbw.dhbw.dhbw .dhbw-direct a{flex:1;justify-content:center;height:48px;font-size:14.5px}
  .dhbw.dhbw.dhbw .dhbw-direct a span{font-size:14.5px}
}
@media (max-width:360px){
  .dhbw.dhbw.dhbw .dhbw-tegels{gap:6px}
  .dhbw.dhbw.dhbw .dhbw-tegel.mini strong{font-size:12px}
  .dhbw.dhbw.dhbw .dhbw-feit:nth-child(2){display:none}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-ltekst span{display:none}
}
@media (max-width:640px) and (max-height:520px){
  .dhbw.dhbw.dhbw .dhbw-kop{height:66px}
  .dhbw.dhbw.dhbw .dhbw-kop-onder{bottom:18px;left:64px}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-kop-onder h2{font-size:16px;margin:0}
  .dhbw.dhbw.dhbw .dhbw-kop-onder p,.dhbw.dhbw.dhbw .dhbw-feiten,.dhbw.dhbw.dhbw .dhbw-pill,.dhbw.dhbw.dhbw .dhbw-handvat{display:none}
  .dhbw.dhbw.dhbw .dhbw-kop-top{top:13px}
  .dhbw.dhbw.dhbw .dhbw-mini{display:block;position:absolute;left:14px;top:13px;width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--o);z-index:3}
}
/* Touch: geen hover-sprongen, wel directe feedback bij tikken */
@media (hover:none){
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch:hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel:hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-keuze:hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie:hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-verstuur:hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende:not(:disabled):hover,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-klaar:hover{transform:none}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-sluit:hover{transform:none;background:rgba(22,22,22,.5)}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.mini:hover{box-shadow:inset 0 0 0 1px var(--l)}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.mini:hover .ic{background:var(--vlak)}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.mini:hover .ic svg{stroke:var(--d)}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij:hover{box-shadow:inset 0 0 0 1px #FFD2C2}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij:hover .ic{background:#fff}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel.storing-rij:hover .ic svg{stroke:var(--o2)}
  .dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-launch:active,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-tegel:active,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-keuze:active,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-optie:active,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-moment:active,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-verstuur:active,.dhbw.dhbw.dhbw.dhbw.dhbw .dhbw-volgende:active,.dhbw.dhbw.dhbw .dhbw-direct a:active{transform:scale(.97);transition:transform .08s}
}
@media (prefers-reduced-motion:reduce){.dhbw.dhbw.dhbw.dhbw *,.dhbw.dhbw.dhbw.dhbw *::before,.dhbw.dhbw.dhbw.dhbw *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}}