.hpa-customer-portal {
  --hpa-portal-navy: #113557;
  --hpa-portal-blue: #1b6ca8;
  --hpa-portal-cyan: #eaf5fb;
  --hpa-portal-green: #157347;
  --hpa-portal-border: #dbe5ee;
  --hpa-portal-muted: #647487;
  --hpa-portal-bg: #f4f7fa;
  --hpa-portal-shadow: 0 18px 50px rgba(17, 53, 87, .10);
  max-width: 1240px;
  margin: 32px auto;
  color: #203040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hpa-customer-portal * { box-sizing: border-box; }
.hpa-portal-login-layout { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 560px; overflow: hidden; border: 1px solid var(--hpa-portal-border); border-radius: 24px; background: #fff; box-shadow: var(--hpa-portal-shadow); }
.hpa-portal-intro { display: flex; flex-direction: column; justify-content: center; padding: 64px; color: #fff; background: radial-gradient(circle at top right, rgba(65, 164, 215, .55), transparent 34%), linear-gradient(145deg, #103454, #1a6094); }
.hpa-portal-intro h1 { max-width: 680px; margin: 10px 0 18px; color: #fff; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; }
.hpa-portal-intro p { max-width: 620px; margin: 0; color: rgba(255,255,255,.84); font-size: 18px; line-height: 1.6; }
.hpa-portal-eyebrow { display: block; color: #56c2ed; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hpa-portal-feature-list { display: grid; gap: 12px; margin-top: 34px; }
.hpa-portal-feature-list span { position: relative; padding-left: 28px; color: #fff; font-weight: 650; }
.hpa-portal-feature-list span::before { position: absolute; left: 0; content: "✓"; color: #70e0ae; }
.hpa-portal-panel { border: 1px solid var(--hpa-portal-border); border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(17,53,87,.06); }
.hpa-login-card { display: flex; flex-direction: column; justify-content: center; padding: 52px; border: 0; border-radius: 0; box-shadow: none; }
.hpa-login-card h2 { margin: 0 0 8px; color: var(--hpa-portal-navy); font-size: 28px; }
.hpa-login-card > p { margin: 0 0 26px; color: var(--hpa-portal-muted); line-height: 1.55; }
.hpa-login-card label { display: grid; gap: 7px; margin: 0 0 16px; color: var(--hpa-portal-navy); font-weight: 700; }
.hpa-login-card input[type="text"], .hpa-login-card input[type="password"] { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #cdd9e4; border-radius: 10px; background: #fbfdff; font-size: 16px; }
.hpa-login-card input:focus, .hpa-portal-toolbar input:focus { outline: 3px solid rgba(27,108,168,.16); border-color: var(--hpa-portal-blue); }
.hpa-remember { display: flex !important; grid-template-columns: auto 1fr; align-items: center; font-weight: 500 !important; }
.hpa-primary-button, .hpa-secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease; }
.hpa-primary-button { width: 100%; color: #fff; background: linear-gradient(135deg, #1769aa, #114d7c); box-shadow: 0 8px 18px rgba(23,105,170,.22); }
.hpa-secondary-button { color: var(--hpa-portal-navy); border: 1px solid var(--hpa-portal-border); background: #fff; }
.hpa-primary-button:hover, .hpa-secondary-button:hover { transform: translateY(-1px); }
.hpa-forgot { display: block; margin-top: 16px; text-align: center; color: var(--hpa-portal-blue); }
.hpa-portal-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; }
.hpa-portal-alert.is-error { color: #9d261e; border: 1px solid #f1c1bd; background: #fff0ee; }
.hpa-portal-dashboard { display: grid; gap: 18px; }
.hpa-portal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 30px; border-radius: 20px; color: #fff; background: radial-gradient(circle at right top, rgba(73,173,221,.48), transparent 30%), linear-gradient(135deg, #103454, #1b6297); box-shadow: var(--hpa-portal-shadow); }
.hpa-portal-topbar h1 { margin: 5px 0 3px; color: #fff; font-size: 30px; }
.hpa-portal-topbar p { margin: 0; color: rgba(255,255,255,.78); }
.hpa-portal-topbar .hpa-secondary-button { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); }
.hpa-portal-toolbar { display: flex; align-items: end; gap: 12px; padding: 16px 18px; border: 1px solid var(--hpa-portal-border); border-radius: 14px; background: #fff; }
.hpa-portal-toolbar label { display: grid; gap: 5px; color: var(--hpa-portal-muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.hpa-portal-toolbar input { min-height: 42px; padding: 7px 10px; border: 1px solid var(--hpa-portal-border); border-radius: 9px; background: #fff; font: inherit; }
.hpa-portal-kpis { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 14px; }
.hpa-portal-kpis article { min-height: 126px; padding: 19px; border: 1px solid var(--hpa-portal-border); border-radius: 16px; background: #fff; box-shadow: 0 7px 18px rgba(17,53,87,.05); }
.hpa-portal-kpis article.is-highlight { color: #fff; border-color: transparent; background: linear-gradient(135deg, #16704a, #20966a); }
.hpa-portal-kpis span, .hpa-portal-kpis small { display: block; color: var(--hpa-portal-muted); }
.hpa-portal-kpis strong { display: block; margin: 9px 0 6px; color: var(--hpa-portal-navy); font-size: 27px; line-height: 1.1; }
.hpa-portal-kpis article.is-highlight span, .hpa-portal-kpis article.is-highlight small { color: rgba(255,255,255,.78); }
.hpa-portal-kpis article.is-highlight strong { color: #fff; }
.hpa-portal-panel { padding: 24px; }
.hpa-portal-section-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.hpa-portal-section-head h2 { margin: 0 0 4px; color: var(--hpa-portal-navy); font-size: 22px; }
.hpa-portal-section-head p { margin: 0; color: var(--hpa-portal-muted); }
.hpa-portal-site-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }
.hpa-site-card { padding: 18px; border: 1px solid var(--hpa-portal-border); border-radius: 14px; background: linear-gradient(180deg, #fff, #f8fbfd); }
.hpa-site-card-head { display: flex; justify-content: space-between; gap: 10px; }
.hpa-site-card h3 { margin: 0 0 4px; color: var(--hpa-portal-navy); font-size: 18px; }
.hpa-site-card-head div > span { color: var(--hpa-portal-muted); font-size: 13px; }
.hpa-rate-badge { height: fit-content; padding: 5px 9px; border-radius: 999px; color: #155b3d; background: #e8f7ef; font-size: 12px; font-weight: 800; }
.hpa-site-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.hpa-site-card dl div { padding: 11px; border-radius: 10px; background: #fff; }
.hpa-site-card dt { color: var(--hpa-portal-muted); font-size: 12px; }
.hpa-site-card dd { margin: 5px 0 0; color: var(--hpa-portal-navy); font-size: 17px; font-weight: 800; }
.hpa-portal-table-wrap { overflow-x: auto; border: 1px solid var(--hpa-portal-border); border-radius: 12px; }
.hpa-portal-table-wrap table { width: 100%; border-collapse: collapse; }
.hpa-portal-table-wrap th, .hpa-portal-table-wrap td { padding: 13px 12px; border-bottom: 1px solid var(--hpa-portal-border); text-align: left; white-space: nowrap; }
.hpa-portal-table-wrap th { color: var(--hpa-portal-navy); background: #eff5f9; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.hpa-portal-table-wrap tr:last-child td { border-bottom: 0; }
.hpa-download-link { color: var(--hpa-portal-blue); font-weight: 750; }
.hpa-portal-footnote { margin: 0; color: var(--hpa-portal-muted); font-size: 13px; text-align: right; }
.hpa-empty-state { grid-column: 1 / -1; padding: 30px; border: 1px dashed #cbd8e4; border-radius: 14px; text-align: center; }
.hpa-empty-state h3 { margin: 0 0 6px; color: var(--hpa-portal-navy); }
.hpa-empty-state p { margin: 0; color: var(--hpa-portal-muted); }
.hpa-customer-portal.is-loading { opacity: .78; pointer-events: none; }
.hpa-customer-portal.is-loading .hpa-portal-loading { display: inline-block; width: 18px; height: 18px; border: 2px solid #cbd8e4; border-top-color: var(--hpa-portal-blue); border-radius: 50%; animation: hpa-spin .8s linear infinite; }
@keyframes hpa-spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .hpa-portal-login-layout { grid-template-columns: 1fr; } .hpa-portal-intro { padding: 42px; } .hpa-portal-kpis { grid-template-columns: repeat(2, 1fr); } .hpa-portal-site-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hpa-customer-portal { margin: 16px 10px; } .hpa-portal-intro, .hpa-login-card { padding: 28px 22px; } .hpa-portal-topbar { align-items: flex-start; padding: 22px; } .hpa-portal-toolbar { align-items: stretch; flex-direction: column; } .hpa-portal-kpis, .hpa-portal-site-grid { grid-template-columns: 1fr; } .hpa-portal-panel { padding: 18px; } }
.hpa-customer-portal .hpa-workflow-badge { display:inline-flex; align-items:center; padding:4px 9px; border:1px solid #d8e1ea; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.hpa-customer-portal .hpa-workflow-badge.is-success { color:#14633e; border-color:#abd8bf; background:#e9f7ef; }
.hpa-customer-portal .hpa-workflow-badge.is-warning { color:#865d00; border-color:#ead28f; background:#fff7df; }
.hpa-customer-portal .hpa-workflow-badge.is-info { color:#155c8f; border-color:#b9d7eb; background:#eaf3fb; }
.hpa-customer-portal .hpa-workflow-badge.is-muted { color:#6a7682; border-color:#d9e0e6; background:#f1f3f5; }
.hpa-link-button { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.hpa-portal-document-grid { display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:14px; }
.hpa-portal-document-grid article { display:grid; gap:6px; padding:18px; border:1px solid var(--hpa-portal-border); border-radius:14px; background:linear-gradient(180deg,#fff,#f8fbfd); }
.hpa-portal-document-grid article span,.hpa-portal-document-grid article small { color:var(--hpa-portal-muted); }
.hpa-portal-document-grid article strong { color:var(--hpa-portal-navy); font-size:17px; }
.hpa-portal-document-grid article a { color:var(--hpa-portal-blue); font-weight:800; }
.hpa-portal-modal[hidden] { display:none; }
.hpa-portal-modal { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:24px; }
.hpa-portal-modal-backdrop { position:absolute; inset:0; background:rgba(8,28,45,.72); backdrop-filter:blur(4px); }
.hpa-portal-modal-dialog { position:relative; z-index:1; width:min(920px,100%); max-height:min(780px,90vh); overflow:auto; padding:28px; border-radius:20px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.28); }
.hpa-modal-close { position:absolute; top:14px; right:16px; width:38px; height:38px; border:1px solid var(--hpa-portal-border); border-radius:999px; background:#fff; color:var(--hpa-portal-navy); cursor:pointer; font-size:25px; line-height:1; }
.hpa-modal-head h2 { margin:5px 0; color:var(--hpa-portal-navy); font-size:28px; }
.hpa-modal-head p { margin:0 0 18px; color:var(--hpa-portal-muted); }
.hpa-modal-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 18px; }
.hpa-modal-kpis div { padding:14px; border:1px solid var(--hpa-portal-border); border-radius:12px; background:var(--hpa-portal-bg); }
.hpa-modal-kpis span { display:block; color:var(--hpa-portal-muted); font-size:12px; }
.hpa-modal-kpis strong { display:block; margin-top:5px; color:var(--hpa-portal-navy); font-size:20px; }
.hpa-modal-loading { padding:50px; text-align:center; color:var(--hpa-portal-muted); }
html.hpa-modal-open { overflow:hidden; }
@media (max-width:700px) { .hpa-portal-document-grid,.hpa-modal-kpis { grid-template-columns:1fr; } .hpa-portal-modal { padding:10px; } .hpa-portal-modal-dialog { padding:22px 16px; } }

/* Administrator-Vorschau des Kundenportals */
.hpa-admin-preview-badge { display:inline-flex; align-items:center; min-height:34px; padding:7px 12px; border:1px solid rgba(255,255,255,.30); border-radius:999px; color:#fff; background:rgba(255,255,255,.12); font-size:12px; font-weight:800; letter-spacing:.03em; }
.hpa-admin-toolbar { flex-wrap:wrap; }
.hpa-admin-toolbar label:first-child { min-width:min(420px,100%); flex:1; }
.hpa-admin-toolbar select { width:100%; min-height:42px; padding:7px 36px 7px 10px; border:1px solid var(--hpa-portal-border); border-radius:9px; background:#fff; font:inherit; }
.hpa-admin-toolbar select:focus { outline:3px solid rgba(27,108,168,.16); border-color:var(--hpa-portal-blue); }
.hpa-admin-manage-link { text-decoration:none; }
.hpa-admin-empty { display:grid; justify-items:start; gap:10px; }
.hpa-admin-empty h2,.hpa-admin-empty p { margin:0; }
.hpa-admin-action { width:auto; margin-top:6px; text-decoration:none; }
@media (max-width:640px) { .hpa-admin-preview-topbar { flex-direction:column; } .hpa-admin-toolbar label:first-child { min-width:100%; } .hpa-admin-manage-link { width:100%; } }


/* 0.8.1: Live-Belegung und aktuell parkende Fahrzeuge im Kundenportal. */
.hpa-site-live-stat { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hpa-site-live-stat dd { display:flex; align-items:center; gap:8px; }
.hpa-live-dot { width:9px; height:9px; border-radius:50%; background:#25a56b; box-shadow:0 0 0 4px rgba(37,165,107,.13); }
.hpa-live-occupancy { overflow:hidden; }
.hpa-live-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:5px; color:var(--hpa-portal-green); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.hpa-live-pulse { width:9px; height:9px; border-radius:50%; background:#25a56b; box-shadow:0 0 0 rgba(37,165,107,.35); animation:hpa-live-pulse 2s infinite; }
@keyframes hpa-live-pulse { 0% { box-shadow:0 0 0 0 rgba(37,165,107,.35); } 70% { box-shadow:0 0 0 8px rgba(37,165,107,0); } 100% { box-shadow:0 0 0 0 rgba(37,165,107,0); } }
.hpa-live-updated { align-self:flex-start; padding:7px 10px; border:1px solid #cfe4d8; border-radius:999px; color:#17613e; background:#edf8f2; font-size:12px; font-weight:800; white-space:nowrap; }
.hpa-live-site-list { display:grid; gap:16px; }
.hpa-live-site-card { overflow:hidden; border:1px solid var(--hpa-portal-border); border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(17,53,87,.045); }
.hpa-live-site-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 18px; border-bottom:1px solid var(--hpa-portal-border); background:linear-gradient(180deg,#fbfdff,#f5f9fc); }
.hpa-live-site-head h3 { margin:0 0 3px; color:var(--hpa-portal-navy); font-size:18px; }
.hpa-live-site-head p { margin:0; color:var(--hpa-portal-muted); font-size:13px; }
.hpa-live-count { display:inline-flex; align-items:baseline; gap:5px; min-width:88px; justify-content:center; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.hpa-live-count strong { font-size:18px; line-height:1; }
.hpa-live-count.is-occupied { color:#155f3e; border:1px solid #bfe0cc; background:#eaf7f0; }
.hpa-live-count.is-empty { color:#647487; border:1px solid #dbe5ee; background:#f3f6f8; }
.hpa-live-table-wrap { overflow-x:auto; }
.hpa-live-table { width:100%; border-collapse:collapse; }
.hpa-live-table th,.hpa-live-table td { padding:13px 16px; border-bottom:1px solid #e8eef3; text-align:left; vertical-align:middle; white-space:nowrap; }
.hpa-live-table th { color:#54687a; background:#f8fbfd; font-size:11px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.hpa-live-table tbody tr:last-child td { border-bottom:0; }
.hpa-live-table tbody tr:hover { background:#fbfdff; }
.hpa-live-plate { display:inline-flex; padding:5px 9px; border:1px solid #cad8e3; border-radius:7px; color:#152f46; background:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; letter-spacing:.055em; box-shadow:inset 0 -2px 0 rgba(17,53,87,.04); }
.hpa-live-duration { color:var(--hpa-portal-navy); font-weight:750; }
.hpa-live-status { display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:800; }
.hpa-live-status.is-success { color:#155f3e; border-color:#bfe0cc; background:#eaf7f0; }
.hpa-live-status.is-info { color:#155c8f; border-color:#bfd9ea; background:#eaf3fb; }
.hpa-live-status.is-warning { color:#7a5700; border-color:#ead28f; background:#fff7df; }
.hpa-live-status.is-danger { color:#8a1f17; border-color:#edc1bd; background:#fdebea; }
.hpa-live-status.is-muted { color:#647487; border-color:#dbe2e8; background:#f1f4f6; }
.hpa-live-empty { display:flex; align-items:center; gap:13px; padding:18px; color:#17613e; }
.hpa-live-empty > span { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:#e7f6ed; font-weight:900; }
.hpa-live-empty strong { display:block; color:var(--hpa-portal-navy); }
.hpa-live-empty p { margin:3px 0 0; color:var(--hpa-portal-muted); font-size:13px; }
.hpa-live-limit-note,.hpa-live-privacy { margin:0; padding:11px 16px; color:var(--hpa-portal-muted); background:#f8fbfd; font-size:12px; }
.hpa-live-privacy { margin-top:14px; padding:0; background:transparent; text-align:right; }
@media (max-width:640px) {
  .hpa-live-occupancy .hpa-portal-section-head,.hpa-live-site-head { align-items:flex-start; flex-direction:column; }
  .hpa-live-updated { align-self:flex-start; }
  .hpa-live-count { align-self:flex-start; }
  .hpa-live-table thead { display:none; }
  .hpa-live-table,.hpa-live-table tbody,.hpa-live-table tr,.hpa-live-table td { display:block; width:100%; }
  .hpa-live-table tr { padding:10px 14px; border-bottom:1px solid #e8eef3; }
  .hpa-live-table tr:last-child { border-bottom:0; }
  .hpa-live-table td { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:7px 0; border:0; white-space:normal; text-align:right; }
  .hpa-live-table td::before { content:attr(data-label); color:#6a7b8b; font-size:11px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; text-align:left; }
}

/* 0.8.1: Skalierbare Live-Belegung für große Flächen. */
.hpa-vehicle-browser { position:relative; }
.hpa-vehicle-browser.is-loading { opacity:.78; }
.hpa-vehicle-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) minmax(170px,220px) 110px auto; align-items:end; gap:12px; padding:14px 16px; border-bottom:1px solid var(--hpa-portal-border); background:#fff; }
.hpa-vehicle-toolbar label { display:grid; gap:5px; margin:0; color:#586b7c; font-size:11px; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.hpa-vehicle-toolbar input,.hpa-vehicle-toolbar select { width:100%; min-height:40px; padding:8px 10px; border:1px solid #cbd8e3; border-radius:9px; color:var(--hpa-portal-navy); background:#fff; font:500 14px/1.2 DejaVu Sans,system-ui,sans-serif; text-transform:none; letter-spacing:normal; }
.hpa-vehicle-toolbar input:focus,.hpa-vehicle-toolbar select:focus { outline:3px solid rgba(27,108,168,.14); border-color:var(--hpa-portal-blue); }
.hpa-vehicle-toolbar .hpa-secondary-button { min-height:40px; }
.hpa-vehicle-loading { display:flex; align-items:center; justify-content:center; gap:10px; min-height:110px; padding:24px; color:var(--hpa-portal-muted); }
.hpa-vehicle-loading .hpa-portal-loading { display:inline-block; width:18px; height:18px; border:2px solid #cbd8e4; border-top-color:var(--hpa-portal-blue); border-radius:50%; animation:hpa-spin .8s linear infinite; }
.hpa-vehicle-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; color:#5d6f7f; background:#f8fbfd; font-size:12px; }
.hpa-vehicle-result-head strong { color:var(--hpa-portal-navy); font-size:14px; }
.hpa-vehicle-pagination { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; border-top:1px solid var(--hpa-portal-border); background:#f8fbfd; color:var(--hpa-portal-muted); font-size:12px; }
.hpa-vehicle-pagination > div { display:flex; flex-wrap:wrap; gap:5px; }
.hpa-page-button { min-width:34px; height:34px; padding:0 8px; border:1px solid #cbd8e3; border-radius:8px; color:#24445f; background:#fff; font:750 13px/1 system-ui,sans-serif; cursor:pointer; }
.hpa-page-button:hover { border-color:#91b2ca; background:#eef6fb; }
.hpa-page-button.is-current { color:#fff; border-color:var(--hpa-portal-blue); background:var(--hpa-portal-blue); }
@media (max-width:900px) {
  .hpa-vehicle-toolbar { grid-template-columns:1fr 1fr; }
  .hpa-vehicle-search-field { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .hpa-vehicle-toolbar { grid-template-columns:1fr; }
  .hpa-vehicle-search-field { grid-column:auto; }
  .hpa-vehicle-pagination { align-items:flex-start; flex-direction:column; }
  .hpa-vehicle-pagination > div { width:100%; }
}

/* 0.8.6: Freiparker-Verwaltung im Kundenportal. */
.hpa-free-parking-portal { overflow:hidden; }
.hpa-free-parking-portal > .hpa-portal-section-head { align-items:flex-start; }
.hpa-free-parking-portal > .hpa-portal-section-head .hpa-primary-button { width:auto; flex:0 0 auto; }
.hpa-free-eyebrow { display:block; margin-bottom:5px; color:#1b6ca8; font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.hpa-free-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,390px); gap:18px; align-items:start; }
.hpa-free-list-column { min-width:0; overflow:hidden; border:1px solid var(--hpa-portal-border); border-radius:14px; background:#fff; }
.hpa-free-toolbar { display:grid; grid-template-columns:minmax(180px,1fr) minmax(170px,220px) 100px auto; gap:10px; align-items:end; padding:14px; border-bottom:1px solid var(--hpa-portal-border); background:#f8fbfd; }
.hpa-free-toolbar label,.hpa-free-editor label { display:grid; gap:6px; margin:0; color:#5b6e7f; font-size:11px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.hpa-free-toolbar input,.hpa-free-toolbar select,.hpa-free-editor input,.hpa-free-editor select,.hpa-free-editor textarea { width:100%; min-height:40px; padding:8px 10px; border:1px solid #cbd8e3; border-radius:9px; color:var(--hpa-portal-navy); background:#fff; font:500 14px/1.3 system-ui,sans-serif; text-transform:none; letter-spacing:normal; }
.hpa-free-editor textarea { min-height:86px; resize:vertical; }
.hpa-free-toolbar input:focus,.hpa-free-toolbar select:focus,.hpa-free-editor input:focus,.hpa-free-editor select:focus,.hpa-free-editor textarea:focus { outline:3px solid rgba(27,108,168,.14); border-color:var(--hpa-portal-blue); }
.hpa-free-editor { position:sticky; top:20px; padding:18px; border:1px solid #c9d9e7; border-radius:14px; background:linear-gradient(180deg,#fff,#f8fbfd); box-shadow:0 12px 30px rgba(17,53,87,.09); }
.hpa-free-editor[hidden] { display:none !important; }
.hpa-free-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.hpa-free-editor-head h3 { margin:0; color:var(--hpa-portal-navy); font-size:20px; }
.hpa-icon-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #cedbe6; border-radius:50%; color:#52687a; background:#fff; font-size:22px; line-height:1; cursor:pointer; }
.hpa-free-editor form { display:grid; gap:13px; }
.hpa-free-editor fieldset { display:grid; gap:8px; margin:0; padding:0; border:0; }
.hpa-free-editor legend { margin-bottom:3px; color:#5b6e7f; font-size:11px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.hpa-radio-card { display:flex !important; grid-template-columns:none !important; flex-direction:row; align-items:flex-start; gap:9px !important; padding:10px; border:1px solid #d8e3ec; border-radius:10px; background:#fff; text-transform:none !important; letter-spacing:normal !important; cursor:pointer; }
.hpa-radio-card input { width:auto; min-height:0; margin-top:3px; }
.hpa-radio-card span { display:grid; gap:2px; }
.hpa-radio-card strong { color:var(--hpa-portal-navy); font-size:13px; }
.hpa-radio-card small { color:var(--hpa-portal-muted); font-size:12px; font-weight:500; }
.hpa-free-date-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hpa-check-row { display:flex !important; grid-template-columns:none !important; flex-direction:row; align-items:center; gap:8px !important; text-transform:none !important; letter-spacing:normal !important; }
.hpa-check-row input { width:auto; min-height:0; }
.hpa-free-form-actions { display:flex; flex-wrap:wrap; gap:8px; }
.hpa-free-form-actions .hpa-primary-button { width:auto; }
.hpa-free-row-actions { display:flex; gap:10px; }
.hpa-link-button { padding:0; border:0; color:var(--hpa-portal-blue); background:transparent; font:750 13px/1.3 system-ui,sans-serif; cursor:pointer; }
.hpa-link-button.is-danger { color:#a12d25; }
.hpa-free-table small { color:var(--hpa-portal-muted); }
.hpa-portal-alert.is-success { color:#155f3e; border:1px solid #bfe0cc; background:#eaf7f0; }
.hpa-free-parking-portal.is-loading { opacity:.82; }
@media (max-width:1050px) {
  .hpa-free-layout { grid-template-columns:1fr; }
  .hpa-free-editor { position:static; }
}
@media (max-width:760px) {
  .hpa-free-parking-portal > .hpa-portal-section-head { flex-direction:column; }
  .hpa-free-toolbar { grid-template-columns:1fr 1fr; }
  .hpa-free-toolbar label:first-child { grid-column:1 / -1; }
}
@media (max-width:520px) {
  .hpa-free-toolbar { grid-template-columns:1fr; }
  .hpa-free-toolbar label:first-child { grid-column:auto; }
  .hpa-free-date-grid { grid-template-columns:1fr; }
  .hpa-free-form-actions { flex-direction:column; }
  .hpa-free-form-actions .hpa-primary-button,.hpa-free-form-actions .hpa-secondary-button { width:100%; }
}

/* 0.8.15: Gelände-QR-Code im Kundendashboard. */
.hpa-customer-site-qr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--hpa-portal-border); }
.hpa-customer-site-qr strong { display:block; color:var(--hpa-portal-navy); font-size:14px; }
.hpa-customer-site-qr p { margin:4px 0 8px; color:var(--hpa-portal-muted); font-size:12px; line-height:1.45; }
.hpa-site-link { color:var(--hpa-portal-blue); font-size:13px; font-weight:800; text-decoration:none; }
.hpa-site-link:hover { text-decoration:underline; }
.hpa-customer-qr-actions { display:grid; justify-items:center; gap:8px; }
.hpa-customer-qr { width:132px; min-height:132px; padding:6px; border:1px solid #dbe5ed; border-radius:10px; background:#fff; }
.hpa-customer-qr canvas,.hpa-customer-qr img { display:block; width:120px !important; height:120px !important; }
.hpa-customer-qr-download { white-space:nowrap; }
@media (max-width:560px) {
  .hpa-customer-site-qr { grid-template-columns:1fr; }
  .hpa-customer-qr-actions { justify-items:start; }
}

/* 0.8.16: Geschütztes Einfahrtsbild-Popup im Kundendashboard. */
.hpa-entry-image-button { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 10px; border:1px solid #bfd2e1; border-radius:8px; color:var(--hpa-portal-blue); background:#f4f9fc; font:800 12px/1.2 system-ui,sans-serif; white-space:nowrap; cursor:pointer; }
.hpa-entry-image-button:hover { border-color:#7fa9c7; background:#eaf4fa; }
.hpa-entry-image-button:focus-visible { outline:3px solid rgba(27,108,168,.18); outline-offset:2px; }
.hpa-live-no-image { color:#8a98a5; }
.hpa-entry-image-dialog { width:min(1100px,100%); }
.hpa-entry-image-stage { display:grid; place-items:center; min-height:260px; overflow:hidden; border:1px solid var(--hpa-portal-border); border-radius:14px; background:#0d1821; }
.hpa-entry-image-stage .hpa-modal-loading { color:#d9e4ec; }
.hpa-entry-image-stage img { display:block; width:auto; max-width:100%; max-height:72vh; object-fit:contain; }
@media (max-width:640px) {
  .hpa-entry-image-button { white-space:normal; }
  .hpa-entry-image-stage { min-height:180px; }
  .hpa-entry-image-stage img { max-height:68vh; }
}

/* ParkingMeter 0.9.5 Park-customer product view. */
.hpa-park-customer-portal { display: grid; gap: 18px; }
.hpa-park-customer-portal .description { color: var(--hpa-portal-muted); }
.hpa-park-customer-portal .hpa-badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid #c7d9e7; border-radius: 999px; color: #155c8f; background: #eaf3fb; font-size: 12px; font-weight: 800; }
.hpa-park-customer-portal .hpa-badge-success { color: #14633e; border-color: #abd8bf; background: #e9f7ef; }
.hpa-park-customer-portal .hpa-badge-danger { color: #9d261e; border-color: #f1c1bd; background: #fff0ee; }