/* ==========================================================================
   Klantportaal en beheer. Zelfde palet als de site, maar compacter —
   dit is gereedschap, geen etalage.
   ========================================================================== */

.portaal-body { background: var(--paper); }

.p-wrap {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── Balk bovenaan ───────────────────────────────────────────────────────── */
.p-nav {
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
  position: sticky;
  top: 0;
  z-index: 100;
}
.p-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}
.p-merk {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 9px;
  margin-left: 4px;
  font-weight: 400;
}
.p-nav-rechts { display: flex; align-items: center; gap: 18px; }
.p-wie { font-size: .88rem; color: var(--muted); }
.p-link {
  font-size: .88rem;
  color: var(--ink);
  font-weight: 500;
  transition: color .3s;
}
.p-link:hover { color: var(--accent); }

.p-main { padding-block: clamp(28px, 5vw, 46px) 80px; }
.p-smal { max-width: 460px; margin-inline: auto; padding-top: 30px; }

/* ── Meldingen ───────────────────────────────────────────────────────────── */
.p-melding {
  padding: 12px 16px;
  border-radius: 11px;
  font-size: .9rem;
  margin-bottom: 18px;
}
.p-melding--fout { background: #FFF1EE; border: 1px solid #FFD5CC; color: #A32E12; }
.p-melding--ok,
.p-melding--goed { background: #EDF7F1; border: 1px solid #C8E6D5; color: #14603A; }

/* ── Bouwstenen ──────────────────────────────────────────────────────────── */
.p-kop { margin-bottom: 26px; }
.p-kop h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

.p-kaart {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 20px;
}

.p-blok { margin-top: 42px; }
.p-titel {
  font-size: 1.1rem;
  font-weight: 500;
  font-family: var(--sans);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.p-som {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--accent);
  font-weight: 500;
}

.p-label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.p-leeg { color: var(--muted-2); font-size: .92rem; margin: 0; }
.p-meta { color: var(--muted-2); font-size: .85rem; }
.p-datum { font-family: var(--mono); font-size: .8rem; color: var(--muted-2); }

/* ── Strippenkaart ───────────────────────────────────────────────────────── */
.p-strip-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.p-strip-groot {
  margin: 10px 0 4px;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.p-strip-groot strong { font-weight: 400; }
.p-strip-onder { margin: 0; font-size: .9rem; color: var(--muted); }
.p-strip-cijfer { text-align: right; flex: none; }
.p-strip-cijfer span {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--accent);
  line-height: 1;
}
.p-strip-cijfer small {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.p-balk {
  height: 10px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.p-balk--klein { height: 6px; margin: 10px 0 6px; }
.p-balk-vol {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 100px;
  transition: width .6s var(--ease);
}
.p-strip-voet {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted-2);
}

.p-strip-kaarten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.p-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .84rem;
}
.p-mini span { color: var(--muted-2); font-family: var(--mono); font-size: .74rem; }

.p-tag {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.p-tag--ok    { background: #EDF7F1; color: #14603A; }
.p-tag--wacht { background: #FFF8E8; color: #7A5A10; }
.p-tag--loopt { background: rgba(42,68,240,.09); color: var(--accent); }

/* ── Tabellen ────────────────────────────────────────────────────────────── */
.p-tabel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.p-tr {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 82px auto;
  gap: 14px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
}
.p-tr:last-child { border-bottom: 0; }
.p-tr--kop {
  background: var(--paper-warm);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.p-tr--totaal { background: var(--paper-warm); font-weight: 500; }
.p-tr .r { text-align: right; }
.p-tijd { font-family: var(--mono); font-size: .85rem; color: var(--ink); }
.p-wie-klein {
  display: block;
  font-style: normal;
  font-size: .76rem;
  color: var(--muted-2);
  margin-top: 2px;
}
.p-weg {
  border: 0;
  background: none;
  color: var(--muted-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color .25s, background .25s;
}
.p-weg:hover { color: #A32E12; background: #FFF1EE; }

/* ── Uren boeken ─────────────────────────────────────────────────────────── */
.p-boeken { border-color: var(--line); box-shadow: var(--shadow-sm); }
.p-boeken-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.p-tijdkiezer {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.p-stepper {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 16px;
}
.p-rond {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-warm);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.p-rond:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.p-rond:active { transform: scale(.94); }

.p-tijd-groot {
  font-family: var(--display);
  font-size: 2.3rem;
  color: var(--ink);
  min-width: 120px;
  text-align: center;
  line-height: 1;
  letter-spacing: -0.02em;
}

.p-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.p-preset {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.p-preset:hover { border-color: rgba(11,14,18,.3); }
.p-preset.actief {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── Klantenlijst ────────────────────────────────────────────────────────── */
.p-klanten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.p-klant {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 20px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.p-klant:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.p-klant-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.p-klant-kop strong { color: var(--ink); font-weight: 500; }
.p-klant-contact { display: block; font-size: .85rem; color: var(--muted); }
.p-klant-uren { display: block; font-size: .82rem; color: var(--muted); }
.p-klant-laatst {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted-2);
}

/* ── Projecten en berichten ──────────────────────────────────────────────── */
.p-project-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.p-project h3, .p-offerte h3 {
  font-size: 1.05rem;
  font-weight: 500;
  font-family: var(--sans);
  letter-spacing: -0.015em;
}
.p-project p, .p-offerte p { margin: 0 0 6px; font-size: .93rem; color: var(--muted); }

.p-gesprek { display: grid; gap: 12px; margin-top: 18px; }
.p-bericht {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.p-bericht--stroomlijn { border-left: 3px solid var(--accent); }
.p-bericht--klant { background: var(--paper-warm); }
.p-bericht-kop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.p-bericht-kop strong { font-size: .9rem; font-weight: 500; color: var(--ink); }
.p-bericht-kop span { font-family: var(--mono); font-size: .7rem; color: var(--muted-2); }
.p-bericht p { margin: 0; font-size: .93rem; color: var(--ink-2); white-space: pre-wrap; }

/* ── Uitnodiging ─────────────────────────────────────────────────────────── */
.p-uitnodiging { background: var(--paper-warm); border-color: var(--line); }
.p-uitnodiging p { font-size: .9rem; color: var(--muted); margin: 10px 0 14px; }
.p-kopieer { display: flex; gap: 10px; }
.p-kopieer input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: .76rem;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
}
.p-link-knop {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Voettekst ───────────────────────────────────────────────────────────── */
.p-voet {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  font-size: .82rem;
  color: var(--muted-2);
}
.p-voet .p-wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.p-voet a { color: var(--muted); }
.p-voet a:hover { color: var(--ink); }

/* ── Projecten: sitelink en factuurverwijzing ────────────────────────────── */
.p-project-rechts { display: flex; align-items: center; gap: 12px; }
.p-project-voet {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.p-sitelink,
.p-factuurref {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  font-weight: 550;
  color: var(--ink);
  transition: color .25s;
}
.p-sitelink svg, .p-factuurref svg { width: 15px; height: 15px; color: var(--accent); }
.p-sitelink:hover, .p-factuurref:hover { color: var(--accent); }
.p-factuurref .p-tag { margin-left: 2px; }

/* ── Facturen ────────────────────────────────────────────────────────────── */
.p-tabel--facturen .p-tr {
  grid-template-columns: 96px minmax(0, 1fr) 100px auto auto auto;
}
.p-download { display: inline-flex; padding: 4px; }
.p-download svg { width: 16px; height: 16px; }
.p-download:hover { color: var(--accent); background: rgba(42,68,240,.08); }

/* ── Uitvouwbare secties (klantportaal) ──────────────────────────────────── */
.p-vouw {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.p-vouw > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
}
.p-vouw > summary::-webkit-details-marker { display: none; }
.p-vouw > summary:hover { background: var(--paper-warm); }
.p-vouw:hover { border-color: var(--muted-2); }
.p-vouw[open] { box-shadow: var(--shadow-sm); }

.p-vouw-pijl {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  transition: transform .3s, color .25s, border-color .25s, background .25s;
}
.p-vouw-pijl svg { width: 15px; height: 15px; }
.p-vouw > summary:hover .p-vouw-pijl {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.p-vouw[open] .p-vouw-pijl { transform: rotate(180deg); }

.p-vouw-titel { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.p-vouw-aantal {
  font-family: var(--mono);
  font-size: .74rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(42,68,240,.09);
  color: var(--accent);
}
.p-vouw-hint {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.p-vouw > summary:hover .p-vouw-hint { color: var(--accent); }
.p-vouw .als-open,
.p-vouw[open] .als-dicht { display: none; }
.p-vouw[open] .als-open { display: inline; }

.p-vouw-inhoud {
  padding: 4px 22px 24px;
  animation: vouwOpen .35s ease both;
}
@keyframes vouwOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
/* Binnen het paneel geen dubbele kaders op kaarten die er al staan. */
.p-vouw-inhoud > .p-kaart:first-child,
.p-vouw-inhoud > .p-tabel:first-child,
.p-vouw-inhoud > .p-projecten:first-child { margin-top: 8px; }

/* ── Strippenkaart bijschrijven (beheer) ─────────────────────────────────── */
.p-bijschrijven { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.p-bijschrijven summary {
  cursor: pointer;
  font-size: .88rem;
  color: var(--muted);
  user-select: none;
}
.p-bijschrijven summary:hover { color: var(--ink); }
.p-bijschrijven form { margin-top: 16px; }

/* ── De portier op de inlogpagina ────────────────────────────────────────── */
.pt-kaart { position: relative; overflow: hidden; }
.kd-portier { position: relative; }

/* De dienstkabel: zakt uit het plafond zodra de portier mag vertrekken. */
.pt-kabel {
  position: absolute;
  left: 38px;
  top: -28px;
  width: 2.5px;
  height: 0;
  background: var(--ink);
  border-radius: 2px;
  transition: height .45s cubic-bezier(.5,0,.3,1);
}
.pt-kabel--zichtbaar { height: 34px; }
/* Het vertrek: eerst even inzakken (de kabel grijpen), dan omhoog. */
.pt-omhoog { animation: ptOmhoog .9s cubic-bezier(.5,-.15,.75,.4) forwards; }
@keyframes ptOmhoog {
  20%  { transform: translateY(6px) rotate(2deg); }
  100% { transform: translateY(-440px) rotate(-3deg); }
}
/* Wegkijken terwijl het wachtwoord wordt getypt. */
.kd-robot--dicht .kd-oog { animation: none; transform: scaleY(.08); }
.kd-robot--dicht .kd-mond { d: path("M50 58 h20"); }

/* De portier */
.kd-portier {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 96px;
  margin-bottom: 6px;
}
.kd-robot { width: 78px; flex: 0 0 78px; color: var(--ink); }
.kd-oog { transform-origin: center; animation: kdKnipper 4.2s infinite; }
@keyframes kdKnipper {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}
.kd-antenne { fill: var(--accent); stroke: var(--accent); }
.kd-lamp { stroke: var(--accent); }
.kd-arm--rechts { transform-origin: 84px 84px; transition: transform .4s; }
.kd-robot--blij .kd-arm--rechts { animation: kdZwaai .9s ease; }
@keyframes kdZwaai {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-135deg); }
  55%      { transform: rotate(-110deg); }
  80%      { transform: rotate(-135deg); }
}
.kd-robot--blij .kd-mond { d: path("M48 57 q12 10 24 0"); }
.kd-kop { transform-origin: 60px 46px; }
.kd-robot--nee .kd-kop { animation: kdNee .5s ease; }
@keyframes kdNee {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.kd-ballon {
  position: relative;
  align-self: center;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  font-size: .95rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
  min-height: 44px;
  flex: 1;
}
.kd-ballon--zichtbaar { opacity: 1; transform: none; }

.kd-confetti {
  position: absolute;
  inset: -12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border-radius: 22px;
}
.kd-confetti i {
  position: absolute;
  top: -14px;
  height: 13px;
  border-radius: 3px;
  opacity: 0;
  animation: kdVal linear forwards;
}
@keyframes kdVal {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(480px) rotate(560deg); }
}

/* De feestende robot */
.kd-robot--feest { animation: kdSpring .75s ease-in-out infinite; }
@keyframes kdSpring {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-9px); }
}
.kd-robot--feest .kd-arm--rechts { animation: kdJuich .75s ease-in-out infinite; }
.kd-robot--feest .kd-arm--links  { animation: kdJuichL .75s ease-in-out infinite; }
.kd-arm--links { transform-origin: 36px 84px; }
@keyframes kdJuich {
  0%, 100% { transform: rotate(-115deg); }
  40%      { transform: rotate(-145deg); }
}
@keyframes kdJuichL {
  0%, 100% { transform: rotate(115deg); }
  40%      { transform: rotate(145deg); }
}
.kd-robot--feest .kd-antenne { animation: kdFlits .4s alternate infinite; }
@keyframes kdFlits {
  from { fill: var(--accent); stroke: var(--accent); }
  to   { fill: #E8B33B; stroke: #E8B33B; }
}
.kd-robot--feest .kd-oog { animation: none; transform: scale(1.3); }
.kd-robot--feest .kd-mond { d: path("M46 56 q14 12 28 0"); }

/* De kunstjes van de robot */
.kd-doet-dans { animation: kdSpring .7s ease-in-out 3; }
.kd-doet-dans .kd-arm--rechts { animation: kdJuich .7s ease-in-out 3; }
.kd-doet-dans .kd-arm--links { animation: kdJuichL .7s ease-in-out 3; }
.kd-doet-spin { animation: kdSpin 1s cubic-bezier(.4,.1,.3,1) 1; }
@keyframes kdSpin {
  to { transform: rotate(360deg); }
}
.kd-doet-moonwalk { animation: kdMoonwalk 2.2s ease-in-out 1; }
@keyframes kdMoonwalk {
  0%, 100% { transform: translateX(0) rotate(0); }
  25%      { transform: translateX(-26px) rotate(-5deg); }
  50%      { transform: translateX(-26px) rotate(0); }
  75%      { transform: translateX(4px) rotate(4deg); }
}
.kd-doet-buig { animation: kdBuig 1.4s ease-in-out 1; transform-origin: 50% 95%; }
@keyframes kdBuig {
  30%, 60% { transform: rotate(14deg) translateY(4px); }
}
.kd-doet-headbang .kd-kop { animation: kdBang .5s ease-in-out 4; }
@keyframes kdBang {
  40% { transform: translateY(7px) rotate(-6deg); }
}
.kd-doet-headbang .kd-antenne { animation: kdFlits .25s alternate 8; }

@media (max-width: 620px) {
  .kd-portier { gap: 12px; }
  .kd-robot { width: 60px; flex-basis: 60px; }
}

/* ── De zwerfrobot in het portaal ────────────────────────────────────────── */
.zwerf {
  position: absolute;
  left: 24px;
  top: 0;
  z-index: 90;
  width: 74px;
  pointer-events: none;
}
.zwerf .kd-robot {
  display: block;
  width: 74px;
  color: var(--ink);
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(11,14,18,.18));
}
.kd-robot--spiegel { transform: scaleX(-1); }
.zwerf--loopt { animation: zwerfStap .38s ease-in-out infinite; }
@keyframes zwerfStap {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-3px) rotate(-1.5deg); }
  75%      { transform: translateY(-3px) rotate(1.5deg); }
}
.zwerf-ballon {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 250px;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: .85rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.zwerf-ballon.kd-ballon--zichtbaar { opacity: 1; }

/* Vallen: tuimelen met maaiende armen, dan een plof bij de landing */
.zwerf--valt .kd-robot { animation: zwerfTuimel .55s linear infinite; }
@keyframes zwerfTuimel {
  to { transform: rotate(360deg); }
}
.zwerf--valt .kd-arm--rechts { transform: rotate(-140deg); }
.zwerf--valt .kd-arm--links  { transform: rotate(140deg); }
.zwerf--valt .kd-oog { animation: none; transform: scale(1.45); }
.zwerf--plof .kd-robot { animation: zwerfPlof .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes zwerfPlof {
  0%  { transform: scaleY(.55) scaleX(1.25); }
  55% { transform: scaleY(1.12) scaleX(.94); }
  100% { transform: none; }
}

/* Springen: ineengedoken afzetten */
.zwerf--springt .kd-robot { animation: zwerfVeer .5s ease; }
@keyframes zwerfVeer {
  0%  { transform: scaleY(.7) scaleX(1.15); }
  60% { transform: scaleY(1.1) scaleX(.95); }
  100% { transform: none; }
}

.p-backup p { font-size: .92rem; color: var(--muted); margin: 10px 0 16px; }
.p-backup-knoppen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.p-gevaar { border-top-color: #FFD5CC; }
.p-gevaar summary { color: #A32E12; }
.p-gevaar summary:hover { color: #7A210C; }
.p-gevaar p { font-size: .9rem; color: var(--muted); margin: 14px 0 4px; }
.p-gevaar .btn { background: #A32E12; border-color: #A32E12; }

.p-vink {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: .88rem;
  color: var(--muted);
  cursor: pointer;
}
.p-vink input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── De kabelrobot: hangt rechts aan een kabel, beweegt alleen verticaal ── */
.zwerf--kabel {
  position: fixed;
  left: auto;
  top: 50vh;
  z-index: 90;
  pointer-events: none;
}
.zwerf--kabel::before {
  /* de kabel, vastgemaakt aan zijn antenne */
  content: "";
  position: absolute;
  bottom: calc(100% - 5px);
  left: calc(50% - 1px);
  width: 2px;
  height: 150vh;
  background: linear-gradient(to bottom, transparent, var(--muted-2) 25%, var(--ink));
}
.zwerf--kabel .kd-robot {
  transform: rotate(var(--slinger, 0deg));
  transform-origin: 50% -30px;      /* slingert om het ophangpunt */
}
.zwerf--kabel .zwerf-ballon {
  bottom: auto;
  top: calc(100% + 12px);
  left: auto;
  transform: none;
  border-radius: 14px 14px 4px 14px;
}
.zwerf--kabel .zwerf-vraag {
  /* het vraagveldje hangt als bordje boven hem aan de kabel */
  top: auto;
  bottom: calc(100% + 12px);
  left: auto;
  transform: none;
}

/* Het vraagveldje voor de robot — reist met hem mee */
.zwerf-vraag {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 6px 5px 15px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s;
}
.zwerf-vraag:focus-within { border-color: var(--accent); }
.zwerf-vraag input {
  border: 0;
  outline: 0;
  background: none;
  flex: 1;
  min-width: 0;
  font-size: .85rem;
  color: var(--ink);
}
.zwerf-vraag input::placeholder { color: var(--muted-2); }
.zwerf-vraag button {
  border: 0;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s;
}
.zwerf-vraag button:hover { background: var(--accent); }
.zwerf-vraag--bezig button { opacity: .45; cursor: wait; }

@media (max-width: 620px) {
  .zwerf, .zwerf .kd-robot { width: 58px; }
  .zwerf-ballon { max-width: 200px; font-size: .8rem; }
}

/* ── Smal scherm ─────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .p-tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: 4px;
  }
  .p-tr .p-datum { grid-column: 1 / -1; }
  .p-tr--kop { display: none; }
  .p-stepper { gap: 12px; }
  .p-tijd-groot { font-size: 1.9rem; min-width: 88px; }
  .p-nav-rechts { gap: 12px; }
  .p-wie { display: none; }
  .p-tabel--facturen .p-tr { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
  .p-tabel--facturen .p-tr > span:first-child { grid-column: 1 / -1; }
}

/* Link naar de uitgeschreven verantwoording bij een urenregel: wat er in die
   tijd precies is gedaan, in de huisstijl van de klant zelf. */
.p-verantwoording {
  display: inline-block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #2f6f4f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-verantwoording:hover { opacity: .78; }

/* ── Bereikt de klant het? Alleen zichtbaar in het beheer ────────────────── */
.p-gezien { margin: 6px 0 0; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.p-gezien--ja { color: #1F7A4D; font-weight: 500; }
.p-gezien--nee { color: var(--muted-2); }
.p-bericht-kop b { font-weight: 500; }
.p-mini--actief { border-color: var(--accent); }
.p-mini-notitie { color: var(--muted-2); font-size: .74rem; }
.p-strip-kaarten--beheer .p-mini { padding-right: 6px; }
.p-strip-kaarten--beheer .p-mini form { margin: 0; display: flex; }

/* ── Uren per strippenkaart: kopregel in de kleur van de kaart ──────────── */
.p-kaartgroep { margin-top: 14px; }
.p-kaartgroep > summary { padding: 14px 18px; flex-wrap: wrap; }
.p-kaartgroep--actief { border-color: rgba(42,68,240,.35); }
.p-kaartgroep--vol { border-color: #CDE6D6; }
.p-kaartgroep--vol > summary .p-vouw-titel { color: var(--muted); }
.p-kaartgroep--buiten { border-style: dashed; }
.p-groep-datum { font-family: var(--mono); font-size: .74rem; color: var(--muted-2); }
.p-groep-som { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: .8rem; margin-right: 8px; }
.p-kaartgroep .p-vouw-inhoud { padding: 0 18px 14px; }
.p-kaartgroep .p-tabel { margin-top: 4px; }