:root{
  --vt-primary:#0b5ca6;
  --vt-bg:#ffffff;
  --vt-text:#000000;
  --vt-muted:rgba(0,0,0,.65);
  --vt-card:#ffffff;
  --vt-border:rgba(0,0,0,.12);
  --vt-radius:18px;
}

html,body{height:100%;}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  background: var(--vt-bg);
  color: var(--vt-text);
}

/* Global link styling (do NOT affect navbar links) */
a{color:var(--vt-primary);}
a:hover{color:var(--vt-primary); opacity:.9;}

/* VT Navbar: match vt-kempen.de (white header, gray nav) */
.vt-navbar{
  background: #fff !important;
  border-bottom: 1px solid var(--vt-border);
}

.vt-navbar .navbar-brand,
.vt-navbar .nav-link{
  color: rgba(90, 90, 90, 1) !important;
}

.vt-navbar .nav-link:hover,
.vt-navbar .nav-link:focus{
  color: rgba(60, 60, 60, 1) !important;
}

.text-muted{color:var(--vt-muted)!important;}

.card{border-color: var(--vt-border); border-radius: var(--vt-radius);}
.rounded-4{border-radius: var(--vt-radius)!important;}

/* Buttons: rectangular VT outline, hover filled with white text */
.btn{
  border-radius: 0 !important;
  padding: .6rem 1rem;
  font-weight: 600;
}

/* Make .btn-primary behave like an outlined VT button by default */
.btn-primary,
.btn-outline-primary{
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--vt-primary);
  --bs-btn-border-color: var(--vt-primary);
  --bs-btn-hover-bg: var(--vt-primary);
  --bs-btn-hover-border-color: var(--vt-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #084780;
  --bs-btn-active-border-color: #084780;
  --bs-btn-active-color: #fff;
}

/* Ensure the border looks like a clear outline */
.btn-primary,
.btn-outline-primary{ border-width: 2px; }

/* White outline button for blue backgrounds */
.btn-outline-white{
  --bs-btn-color:#fff;
  --bs-btn-border-color:#fff;
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
  --bs-btn-hover-color: var(--vt-primary);
  --bs-btn-active-bg:#fff;
  --bs-btn-active-border-color:#fff;
  --bs-btn-active-color: var(--vt-primary);
}

/* Department badge */
.dept-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .75rem;
  border:1px solid rgba(255,255,255,.35);
  background: var(--vt-primary);
  color:#fff;
  white-space:nowrap;
}

.dept-badge--light{
  background: rgba(11,92,166,.10);
  border: 1px solid rgba(11,92,166,.25);
  color: var(--vt-primary);
}

.icon-tile{
  width:54px;height:54px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,92,166,.10);
  color: var(--vt-primary);
}


.section-hero{
  background: var(--vt-primary);
  color:#fff;
  border-radius: var(--vt-radius);
  border: 1px solid rgba(255,255,255,.18);
}

.section-hero .text-muted{color: rgba(255,255,255,.75)!important;}

/* --- Signature pads --- */
.signature-wrap,
[data-signature-block] {
  position: relative;
  /* Prevent text selection / callouts while signing (mobile long-press). */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}


.signature-wrap canvas,
[data-signature-block] canvas {
  display: block;
  width: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Fixed CSS height is crucial on iOS: Safari may fire "resize" on scroll.
     Our JS resizes the drawing buffer to match this CSS height.
     Never let the canvas height be derived from its DOM attribute (HiDPI scaling).
  */
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

/* Ensure pointer events reach the canvas */
.signature-wrap canvas,
[data-signature-block] canvas {
  pointer-events: auto;
}

/* Badge contrast on blue hero */
.section-hero .dept-badge--light {
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.15) !important;
}



/* --- Utility UI blocks used in templates --- */
.info-panel{
  background:#fff;
  border:1px solid var(--vt-border);
  border-radius: var(--vt-radius);
  padding: 1.25rem;
}

.section-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.small-muted{
  font-size: .92rem;
  color: var(--vt-muted);
}

.alert-soft{
  background: rgba(11,92,166,.06);
  border: 1px solid rgba(11,92,166,.22);
  border-radius: 14px;
}

@media (max-width: 576px){
  .signature-wrap canvas,
  [data-signature-block] canvas{
    height: 200px;
    min-height: 200px;
    max-height: 200px;
  }
}

/* --- Footer (VT blau, weiße Schrift) --- */
.vt-footer{
  background: var(--vt-primary);
  color:#fff;
}

.vt-footer__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.vt-footer__heading{
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: none;
}

.vt-footer__text{ opacity: .95; }

.vt-footer__link{
  color:#fff;
  text-decoration: none;
  opacity: .95;
}

.vt-footer__link:hover,
.vt-footer__link:focus{
  color:#fff;
  text-decoration: underline;
  opacity: 1;
}

.vt-footer__meta{
  border-top: 1px solid rgba(255,255,255,.22);
}

.vt-footer__copy{opacity:.95;}

/* --- Cookie Modal --- */
.vt-cookie-modal .modal-content{
  border-radius: 18px;
  border: 0;
}

.vt-cookie-modal .modal-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.vt-cookie-modal .modal-footer{
  border-top: 1px solid rgba(255,255,255,.22);
  background: var(--vt-primary);
}

.vt-cookie-modal .modal-footer .btn-outline-light{
  border-width: 2px;
}

.vt-cookie-option{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
}


/* Department icons (SVG) */
.vt-dept-icon{width:18px;height:18px;vertical-align:-0.15em;}


/* Form validation helpers */
.is-invalid{border-color:#dc3545 !important;}
.invalid-feedback{font-size:.85rem;}