:root {
  color-scheme: light;
  --bg: #f5f8fc;
  --surface: #ffffff;
  --ink: #172944;
  --ink-strong: #10213a;
  --muted: #6a7c92;
  --line: #e4ebf4;
  --line-strong: #d8e2ee;
  --blue: #176cc4;
  --blue-dark: #1057a5;
  --blue-pale: #eff6ff;
  --green: #0b9163;
  --green-pale: #e6f7f0;
  --red: #c8474b;
  --red-pale: #fff0f1;
  --amber: #9c6d21;
  --amber-pale: #fff4dc;
  --shadow: 0 11px 32px rgba(23, 57, 98, .045), 0 2px 7px rgba(15, 37, 75, .025);
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #80baff; outline-offset: 2px; }
.page-width { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { background: #fff; border-bottom: 1px solid #e6edf5; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo { display: block; flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(9, 48, 89, .13)); }
.brand-name { min-width: 0; }
.footer-brand { display: flex !important; align-items: center; flex-direction: row !important; gap: 12px !important; }
.footer-brand > img { flex: 0 0 auto; display: block; width: 40px; height: 40px; object-fit: contain; }
.footer-brand-copy { display: flex; flex-direction: column; gap: 5px; }

.brand-name { display: grid; gap: 2px; }
.brand-name strong { color: #102b50; font-size: 19px; letter-spacing: -.035em; line-height: 1.1; }
.brand-name strong span { color: #2b75bc; font-size: 11px; letter-spacing: .015em; vertical-align: 3px; margin-left: 2px; }
.brand-sub { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #748aa4; }
.secure-label { display: flex; align-items: center; gap: 8px; color: #447a69; background: #f2fbf6; border: 1px solid #dcefe5; padding: 10px 14px; border-radius: 999px; font-weight: 630; font-size: 12px; white-space: nowrap; }
.secure-label svg { width: 16px; height: 16px; }
.main-content { padding-top: 47px; padding-bottom: 64px; flex: 1; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 26px; }
.section-kicker { display: flex; gap: 9px; align-items: center; color: #337bb9; font-weight: 770; font-size: 10px; letter-spacing: .125em; }
.kicker-line { width: 18px; height: 2px; border-radius: 4px; background: #328fd7; }
h1, h2, p { margin-top: 0; }
h1 { color: var(--ink-strong); font-weight: 760; font-size: clamp(32px, 4vw, 42px); letter-spacing: -.052em; margin: 9px 0 5px; line-height: 1.18; }
.heading-period { color: #237ccc; }
.intro-copy > p { max-width: 650px; font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-bottom: 2px; }
.button { display: inline-flex; gap: 9px; align-items: center; justify-content: center; border-radius: 11px; padding: 12px 16px; font-weight: 680; border: 1px solid transparent; white-space: nowrap; transition: background-color .15s, transform .15s, border-color .15s; font-size: 12.5px; }
.button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .55; cursor: progress; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(28, 109, 199, .15); }
.button-primary:hover { background: var(--blue-dark); }
.button-ghost { background: #fff; border-color: var(--line-strong); color: #3d5673; }
.button-ghost:hover { background: #f7faff; border-color: #b9cfe6; }
.message { display: flex; gap: 12px; align-items: center; padding: 18px 21px; border-radius: 13px; border: 1px solid #d9e7f7; background: #f0f7ff; color: #285e97; font-weight: 560; line-height: 1.55; margin-bottom: 22px; }
.message.error { color: #a33644; background: #fff2f3; border-color: #f3d4d8; }
.loading-spinner { display: none; height: 18px; width: 18px; border: 2px solid #b8dafa; border-top-color: var(--blue); border-radius: 50%; animation: spin .9s linear infinite; flex-shrink: 0; }
.message.is-loading .loading-spinner { display: block; }
@keyframes spin { to {transform: rotate(360deg)} }
.balance-card { position: relative; overflow: hidden; background: linear-gradient(115deg, #fff 0%, #fff 45%, #eef6ff 100%); border: 1px solid #dbe8f7; border-radius: 23px; box-shadow: 0 9px 30px rgba(34, 100, 184, .055); margin-bottom: 18px; }
.balance-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 33px 40px; min-height: 192px; }
.balance-owner { min-width: 0; }
.balance-owner h2 { font-size: clamp(25px, 3vw, 32px); font-weight: 770; letter-spacing: -.045em; color: #132e4f; margin: 12px 0 17px; overflow-wrap: anywhere; }
.updated-label { color: #7b8da2; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.updated-label svg { width: 15px; height: 15px; }
.balance-overview { text-align: right; flex-shrink: 0; }
.balance-caption { font-size: 10.5px; font-weight: 780; letter-spacing: .115em; color: #4f7199; }
.balance-value { color: #164f91; font-size: clamp(37px, 5vw, 52px); font-weight: 810; letter-spacing: -.052em; line-height: 1.12; margin: 8px 0 13px; white-space: nowrap; }
.balance-pill { display: inline-flex; border-radius: 999px; padding: 7px 12px; font-size: 11px; font-weight: 720; background: var(--red-pale); color: #b14147; }
.balance-pill.status-credit, .balance-pill.status-clear { color: var(--green); background: var(--green-pale); }
.balance-decoration { position: absolute; right: -160px; top: -265px; width: 475px; height: 475px; border: 1px solid rgba(30, 109, 199, .065); box-shadow: 0 0 0 36px rgba(40, 137, 222, .017), 0 0 0 83px rgba(40, 137, 222, .014), 0 0 0 137px rgba(40, 137, 222, .008); border-radius: 50%; pointer-events: none; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 25px; }
.metric-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 23px; box-shadow: var(--shadow); min-width: 0; position: relative; overflow: hidden; }
.metric-card::before { content: ""; width: 38px; height: 3px; background: #e5edf7; position: absolute; left: 24px; top: 0; border-radius: 0 0 4px 4px; }
.metric-debit::before { background: #e38d91; }
.metric-credit::before { background: #42caa2; }
.metric-neutral::before { background: #7aaed9; }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: #677d96; font-size: 12.5px; font-weight: 660; margin-bottom: 13px; }
.metric-icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; color: #608dbd; background: #f1f6fc; margin-top: -5px; flex: 0 0 auto; }
.metric-icon svg { height: 19px; width: 19px; }
.metric-credit .metric-icon { background: #effaf4; color: var(--green); }
.metric-debit .metric-icon { background: #fff3f3; color: #ce6a70; }
.metric-card strong { display: block; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; color: #122845; font-weight: 770; letter-spacing: -.045em; margin-bottom: 9px; white-space: nowrap; }
.metric-caption { color: #8a9aaf; font-size: 11.5px; }
.ledger-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.ledger-header { padding: 26px 28px 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.ledger-header h2 { color: #172d4d; font-size: 24px; letter-spacing: -.045em; font-weight: 760; margin: 9px 0 5px; }
.ledger-header p { color: #8394aa; font-size: 12px; margin-bottom: 0; line-height: 1.5; }
.ledger-counter { color: #3e75ae; background: #edf5ff; border: 1px solid #dceafa; white-space: nowrap; padding: 8px 12px; font-weight: 740; font-size: 11px; border-radius: 999px; }
.filters { display: flex; gap: 10px; padding: 0 28px 20px; }
.search-field { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; }
.search-field svg { position: absolute; left: 14px; width: 16px; height: 16px; color: #93a3b6; pointer-events: none; }
.search-field input, .select-field select { width: 100%; color: #2f4967; background: #f9fbfe; border: 1px solid #e0e8f2; height: 43px; border-radius: 10px; font-size: 12px; outline: none; }
.search-field input { padding: 0 15px 0 41px; }
.search-field input::placeholder { color: #96a5b6; }
.select-field { position: relative; flex: 0 0 177px; }
.select-field select { appearance: none; padding: 0 30px 0 13px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23798ba0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; }
.search-field input:focus, .select-field select:focus { background: #fff; outline: 2px solid #a6cfff; outline-offset: 0; }
.table-scroll { width: 100%; overflow-x: auto; }
.bookings-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
.bookings-table thead { background: #f5f8fc; color: #6d829b; font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }
.bookings-table th { padding: 15px 20px; font-weight: 760; border-top: 1px solid #eaf0f7; border-bottom: 1px solid #eaf0f7; }
.bookings-table th:first-child, .bookings-table td:first-child { padding-left: 28px; width: 14%; }
.bookings-table th:nth-child(2) { width: 20%; }
.bookings-table th:nth-child(3) { width: 35%; }
.bookings-table th:nth-child(4) { width: 15%; }
.bookings-table th:nth-child(5) { width: 16%; }
.bookings-table th:last-child, .bookings-table td:last-child { padding-right: 28px; }
.bookings-table td { color: #334b69; font-size: 12px; border-bottom: 1px solid #edf2f8; padding: 14px 20px; vertical-align: middle; word-wrap: break-word; }
.bookings-table tbody tr { transition: background .12s; }
.bookings-table tbody tr:nth-child(even) { background: #fcfdff; }
.bookings-table tbody tr:hover { background: #f5f9ff; }
.bookings-table tbody tr:last-child td { border-bottom: 0; }
.cell-date { font-variant-numeric: tabular-nums; white-space: nowrap; color: #73879e !important; }
.cell-description { min-width: 0; }
.description-title { font-weight: 660; color: #273d58; display: block; }
.category-note { color: #91a0af; display: block; font-size: 10.5px; margin-top: 3px; }
.type-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 10.5px; font-weight: 710; line-height: 1.4; padding: 6px 10px; white-space: nowrap; }
.type-debit { background: #fff0f0; color: #ba545b; }
.type-payment { background: #eaf8f1; color: #14865e; }
.type-payout { background: #fff2e1; color: #a56b20; }
.type-reversal { background: #f1f1f7; color: #76758d; }
.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 740; }
.bookings-table td.amount-debit { color: #ca5359; }
.bookings-table td.amount-credit { color: #09885b; }
.bookings-table td.amount-neutral { color: #96a2ae; }
.empty-state { text-align: center; padding: 45px 20px 50px; color: #8293a8; }
.empty-icon { font-size: 36px; color: #9bb6d0; font-weight: 400; }
.empty-state strong { display: block; color: #344e6c; font-size: 14px; margin-bottom: 7px; }
.empty-state p { font-size: 12px; margin-bottom: 0; }
.ledger-bottom { border-top: 1px solid var(--line); padding: 17px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #8d9daf; }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot-debit { background: #d96f75; }
.dot-credit { background: #29ad80; }
.dot-payout { background: #d6a35c; }
.notice-card { display: flex; align-items: flex-start; gap: 15px; border: 1px solid #dce8f6; background: #eef6ff; border-radius: 16px; padding: 20px 23px; margin-top: 20px; }
.notice-icon { height: 34px; width: 34px; flex: 0 0 auto; background: #e0efff; color: #2676bd; border-radius: 10px; display: grid; place-items: center; }
.notice-icon svg { width: 18px; height: 18px; }
.notice-card strong { display: block; color: #24527e; font-size: 12.5px; margin: 2px 0 5px; }
.notice-card p { color: #6080a1; line-height: 1.65; font-size: 12px; margin-bottom: 0; }
.site-footer { background: #fff; border-top: 1px solid #e5edf6; padding: 28px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner > div { display: flex; flex-direction: column; gap: 6px; }
.footer-inner > div:last-child { align-items: flex-end; }
.footer-inner strong { font-weight: 790; font-size: 14px; color: #244060; }
.footer-inner span { font-size: 10.8px; color: #90a0b2; }
.footer-inner a { color: #3079bd; font-weight: 670; font-size: 12px; }
.visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }
.print-only { display: none; }
@media (max-width: 990px) {
  .page-intro { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; }
  .balance-content { padding: 28px 29px; }
  .metric-card { padding: 21px 18px; }
  .bookings-table th, .bookings-table td { padding-inline: 12px; }
  .bookings-table th:first-child, .bookings-table td:first-child { padding-left: 18px; }
  .bookings-table th:last-child, .bookings-table td:last-child { padding-right: 18px; }
  .bookings-table th:nth-child(2) { width: 23%; }
  .bookings-table th:nth-child(3) { width: 32%; }
}
@media (max-width: 760px) {
  .page-width { width: calc(100% - 34px); }
  .header-inner { min-height: 72px; }
  .main-content { padding-top: 32px; padding-bottom: 43px; }
  .secure-label span { display: none; }
  .secure-label { padding: 10px; }
  .page-intro { margin-bottom: 23px; }
  .page-intro h1 { font-size: 33px; }
  .balance-content { align-items: flex-start; gap: 27px; flex-direction: column; }
  .balance-overview { text-align: left; }
  .balance-owner h2 { margin-bottom: 9px; }
  .balance-value { font-size: 44px; }
  .balance-decoration { top: -240px; }
  .metrics { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card:nth-child(3) { grid-column: 1 / -1; }
  .metric-card strong { font-size: 26px; }
  .ledger-header { padding: 23px 20px 19px; }
  .filters { padding: 0 20px 17px; gap: 9px; flex-wrap: wrap; }
  .search-field { flex: 1 1 100%; }
  .select-field { flex: 1 1 calc(50% - 5px); }
  .bookings-table { display: block; }
  .bookings-table thead { display: none; }
  .bookings-table tbody { display: grid; padding: 0 16px 12px; gap: 11px; }
  .bookings-table tbody tr { display: grid; border: 1px solid #e4ebf4; border-radius: 13px; padding: 14px 16px; gap: 10px; background: #fff !important; grid-template-columns: 1fr 1fr; }
  .bookings-table tbody tr:hover { background: #fbfdff !important; }
  .bookings-table td { display: block; border: 0; padding: 0 !important; min-width: 0; width: auto !important; font-size: 12px; }
  .bookings-table td:nth-child(1) { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 4px; }
  .bookings-table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .bookings-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; border-bottom: 1px solid #f0f2f6; padding-bottom: 11px !important; }
  .bookings-table td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .bookings-table td:nth-child(5) { grid-column: 2; grid-row: 3; }
  .bookings-table td:nth-child(4), .bookings-table td:nth-child(5) { display: flex; flex-direction: column; gap: 4px; }
  .bookings-table td::before { content: attr(data-label); font-weight: 650; font-size: 10px; color: #9ba9b8; letter-spacing: .02em; }
  .bookings-table td:nth-child(2)::before, .bookings-table td:nth-child(3)::before { display: none; }
  .bookings-table td:nth-child(5) { text-align: right; }
  .bookings-table td:nth-child(4) { text-align: left; }
  .description-title { font-size: 13px; }
  .ledger-bottom { padding: 15px 20px; }
  .footer-inner { align-items: flex-start; }
}
@media (max-width: 520px) {
  .page-width { width: calc(100% - 28px); }
  .brand-logo { width: 44px; height: 44px; }
  .brand-name strong { font-size: 16px; }
  .brand-name strong span { font-size: 9px; }
  .brand-sub { font-size: 9px; }
  .header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .button { padding: 11px 8px; font-size: 11px; }
  .button svg { width: 14px; height: 14px; }
  .balance-content { padding: 25px 22px; }
  .balance-owner h2 { font-size: 25px; }
  .balance-value { font-size: 40px; }
  .metric-card { padding: 18px 15px; }
  .metric-top { font-size: 11px; }
  .metric-card strong { font-size: 23px; }
  .metric-icon { width: 29px; height: 29px; }
  .metric-icon svg { width: 16px; height: 16px; }
  .metric-caption { font-size: 10px; }
  .ledger-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .ledger-header h2 { font-size: 22px; }
  .ledger-counter { align-self: flex-start; }
  .notice-card { padding: 17px; gap: 11px; }
  .footer-inner { flex-direction: column; }
  .footer-inner > div:last-child { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@page { size: A4 portrait; margin: 14mm 13mm 14mm; }
@media print {
  :root { --ink: #141c27; --bg: #fff; --line: #ddd; }
  html, body { background: #fff !important; color: #161b22 !important; font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app-shell, .main-content { display: block; min-height: 0; }
  .page-width { max-width: none; width: 100%; }
  .site-header { border-bottom: 1px solid #b6c5d5; }
  .header-inner { min-height: 52px; }
  .brand-logo { width: 44px; height: 44px; filter: none; }
  .brand-sub { color: #51657c !important; }
  .secure-label, .header-actions, .filters, .notice-card, .site-footer, .ledger-bottom, .message { display: none !important; }
  .main-content { padding: 19px 0 8px; }
  .page-intro { margin: 0 0 14px; }
  .section-kicker { font-size: 8px; }
  h1 { font-size: 25px; margin: 5px 0 0; }
  .intro-copy > p { display: none; }
  .balance-card { border: 1px solid #d0d9e5; box-shadow: none; border-radius: 7px; margin-bottom: 9px; background: #fff !important; }
  .balance-content { min-height: 0; padding: 13px 16px; gap: 13px; }
  .balance-owner h2 { margin: 5px 0 6px; font-size: 18px; }
  .updated-label { font-size: 9px; }
  .balance-overview { text-align: right; }
  .balance-value { color: #143f7a !important; font-size: 24px; margin: 3px 0 4px; }
  .balance-caption { font-size: 8px; }
  .balance-pill { font-size: 8px; padding: 3px 7px; border: 1px solid #d5dce6; }
  .balance-decoration { display: none; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
  .metric-card, .metric-card:nth-child(3) { grid-column: auto; border: 1px solid #d9e1e9; border-radius: 6px; padding: 9px 11px; box-shadow: none; }
  .metric-card::before, .metric-icon, .metric-caption { display: none; }
  .metric-top { margin-bottom: 5px; font-size: 9px; }
  .metric-card strong { font-size: 15px; margin: 0; }
  .ledger-card { border: 0; box-shadow: none; border-radius: 0; }
  .ledger-header { padding: 0 0 9px; flex-direction: row; align-items: center; gap: 10px; }
  .ledger-header .section-kicker, .ledger-header p { display: none; }
  .ledger-header h2 { margin: 0; font-size: 15px; }
  .ledger-counter { font-size: 9px; padding: 5px 8px; background: #fff; border-color: #ddd; }
  .table-scroll { overflow: visible; }
  .bookings-table { display: table; width: 100%; table-layout: auto; }
  .bookings-table thead { display: table-header-group; background: #eaf0f5 !important; }
  .bookings-table tbody { display: table-row-group; padding: 0; }
  .bookings-table tbody tr { display: table-row; border: 0; border-radius: 0; padding: 0; background: #fff !important; break-inside: avoid; page-break-inside: avoid; }
  .bookings-table th { font-size: 8px; padding: 8px 6px; border-bottom: 1px solid #b3c2d3; }
  .bookings-table td, .bookings-table td:nth-child(n) { display: table-cell; padding: 7px 6px !important; font-size: 8.6px; border-bottom: 1px solid #e3e6ec; width: auto !important; }
  .bookings-table th:first-child, .bookings-table td:first-child { padding-left: 4px !important; }
  .bookings-table th:last-child, .bookings-table td:last-child { padding-right: 4px !important; }
  .bookings-table td::before { display: none !important; }
  .bookings-table td:nth-child(4), .bookings-table td:nth-child(5) { text-align: right; }
  .description-title { font-size: 8.6px; }
  .category-note { display: none; }
  .type-pill { padding: 0; background: none !important; color: #35465a !important; font-size: 8px; white-space: normal; }
  .money { white-space: nowrap; }
  .print-only { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; color: #64758a; font-size: 8px; border-top: 1px solid #dde2ea; padding-top: 7px; }
  .print-only > img { display: block; width: 22px; height: 22px; object-fit: contain; }
}

/* 6.2.3 – Kundenprofil / persönlicher PIN-Schutz */
.profile-wrap { position:relative; margin-left:auto; z-index:30; }
.profile-button { display:flex; align-items:center; gap:11px; border:1px solid #dce7f4; border-radius:14px; padding:8px 11px 8px 8px; background:#fff; color:#193752; text-align:left; box-shadow:0 3px 12px rgba(29,86,150,.06); }
.profile-button:hover {background:#f6faff; border-color:#adcdec;}
.profile-avatar { width:39px; height:39px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#1675c6,#24b6d9); color:white; font-size:15px; font-weight:790; letter-spacing:-.04em; }
.profile-copy { display:flex; flex-direction:column; gap:2px; max-width:210px; }
.profile-copy strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-copy small { font-size:10px; color:#7890aa; }
.profile-chevron {margin-left:3px; color:#7b90a7; font-size:20px;}
.profile-menu {position:absolute; right:0; top:calc(100% + 9px); width:min(290px,calc(100vw - 26px)); background:white; border:1px solid #dce7f3; border-radius:15px; box-shadow:0 17px 42px rgba(17,48,91,.17); padding:7px; }
.profile-menu-head {padding:12px; border-bottom:1px solid #e9eef6; display:flex; flex-direction:column; gap:4px;}
.profile-menu-head strong {font-size:13px; color:#1a344f; overflow-wrap:anywhere;}
.profile-menu-head span {font-size:11px; color:#869ab0;}
.profile-menu-item {display:block; width:100%; border:0; background:#fff; color:#1f527c; border-radius:9px; text-align:left; padding:12px; font-weight:650; font-size:12px;}
.profile-menu-item:hover {background:#f0f7ff;}
.pin-gate {max-width:570px; margin:0 auto 40px; background:#fff; border:1px solid #dfe9f4; border-radius:22px; padding:36px 40px; box-shadow:var(--shadow);}
.pin-illustration {width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,#e7f5ff,#effbfa);display:grid;place-items:center;color:#1d75b2;font-size:38px;margin-bottom:23px;}
.pin-gate h2 {font-size:clamp(21px,3vw,27px);letter-spacing:-.04em;margin:15px 0 9px;}
.pin-gate > p {color:#70869e;line-height:1.65;font-size:13px;margin-bottom:20px;}
.pin-gate label,.settings-body label {display:block;color:#294766;font-size:12px;font-weight:720;margin:17px 0 7px;}
.pin-input-wrap {display:flex;align-items:center;position:relative;gap:7px;}
.pin-input-wrap input {height:48px;width:100%;flex:1;min-width:0; border:1px solid #d8e4f2; background:#fbfdff; color:#183455;border-radius:11px;padding:11px 48px 11px 14px; outline:none; font-variant-numeric:tabular-nums;letter-spacing:.15em;}
.pin-input-wrap input:focus {border-color:#75b5e9;box-shadow:0 0 0 3px #bce0ff66;}
.eye-button {position:absolute;right:6px;top:5px;height:38px;width:39px;border:0;background:transparent;color:#51738f;border-radius:8px;font-size:20px;}
.eye-button:hover {background:#e9f2fc;}
.pin-submit {margin-top:18px;min-width:190px;}
.pin-gate .pin-footnote {margin:20px 0 0;font-size:11px;color:#889ab0;}
.form-error {margin:10px 0 0;color:#af3342!important;font-size:12px!important;font-weight:650;line-height:1.45;}
.form-success {margin:14px 0 0;padding:12px;background:#eaf9f1;color:#087c58;border-radius:10px;font-size:12px;}
.settings-dialog {border:1px solid #dbe7f4;border-radius:20px;box-shadow:0 25px 70px rgba(12,38,70,.25);padding:0;max-width:min(480px,calc(100vw - 24px));width:100%;max-height:min(90vh,740px);color:#192f4b;background:#fff;overflow:auto;}
.settings-dialog::backdrop {background:rgba(10,24,47,.53);backdrop-filter:blur(3px);}
.settings-head {background:#f7faff;border-bottom:1px solid #e4edf6;display:flex;align-items:flex-start;justify-content:space-between;padding:24px 26px 19px;gap:10px;}
.settings-overline {font-size:10px;letter-spacing:.10em;color:#377bb8;font-weight:760;}
.settings-head h2 {font-size:24px;margin:7px 0 4px;letter-spacing:-.04em;}
.settings-head p {font-size:12px;color:#748ba2;margin:0;}
.dialog-close {flex:0 0 31px;height:31px;border:0;border-radius:9px;background:#e8f1fa;color:#527190;font-size:23px;line-height:1;}
.settings-body {padding:25px 26px 30px;}
.settings-status {display:flex;gap:13px;align-items:center;border:1px solid #e3ecf4;border-radius:13px;padding:13px;background:#fbfdff;margin-bottom:17px;}
.settings-shield {font-size:23px;color:#277eb8;}
.settings-status strong {font-size:13px;}
.settings-status p {font-size:11px;color:#748ba3;margin:4px 0 0;line-height:1.5;}
.field-help {line-height:1.6;font-size:12px;color:#71869d;}
.settings-action {margin-top:18px;width:100%;}
.settings-actions {display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;}
.settings-actions .button {flex:1 1 130px;}
.danger-button {color:#b5434c!important;}
.settings-disclaimer {margin-top:24px;padding-top:16px;border-top:1px solid #e6ebf3;color:#8594a5;font-size:11px;line-height:1.6;}
@media(max-width:520px){.header-inner{gap:9px}.profile-button{gap:5px;padding:6px}.profile-avatar{width:33px;height:33px;border-radius:10px}.profile-copy{max-width:125px}.profile-copy strong{font-size:11px}.profile-copy small{font-size:9px}.profile-chevron{font-size:15px}.pin-gate{padding:27px 22px}.settings-head,.settings-body{padding-inline:20px;}}
@media print {.profile-wrap,.pin-gate,.settings-dialog{display:none!important}.secure-label{display:none!important}}

/* KONTOR Kundenportal 6.2.4 – Profil & Kontaktdaten */
.profile-tabs {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 26px 0;background:#fff;}
.profile-tab {border:1px solid #e1eaf5;border-radius:11px;padding:13px 8px;background:#f7faff;color:#4c6480;font-weight:720;font-size:12px;cursor:pointer;}
.profile-tab:hover {background:#edf5ff;border-color:#bad3ec;}
.profile-tab[aria-selected="true"] {background:#e8f3ff;color:#105ca3;border-color:#88bce8;box-shadow:inset 0 0 0 1px #c8e5fa;}
.profile-details-panel {padding:24px 26px 27px;}
.profile-info-intro strong {font-size:15px;color:#143456;}
.profile-info-intro p {font-size:12px;line-height:1.6;color:#71869d;margin:6px 0 18px;}
.profile-info-grid {margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.profile-info-item {margin:0;min-width:0;padding:13px 14px;border-radius:12px;background:#f7faff;border:1px solid #e2ebf5;}
.profile-info-wide {grid-column:1/-1;}
.profile-info-item dt {margin-bottom:6px;color:#7086a0;font-size:10px;font-weight:780;letter-spacing:.045em;text-transform:uppercase;}
.profile-info-item dd {margin:0;color:#203a5c;font-size:13px;font-weight:670;overflow-wrap:anywhere;line-height:1.45;}
.profile-info-item dd.is-missing {color:#93a3b4;font-weight:500;font-style:italic;}
.profile-info-note {margin:20px 0 0;font-size:11px;line-height:1.65;color:#8496aa;border-top:1px solid #e5edf5;padding-top:14px;}
.profile-security-panel .settings-body {padding-top:24px;}
@media (max-width:520px) {
  .profile-tabs {padding:12px 18px 0;gap:7px;}
  .profile-details-panel {padding:22px 18px 24px;}
  .profile-info-item {padding:12px;}
  .profile-info-grid {gap:8px;}
  .profile-info-item dd {font-size:12px;}
}
@media print {
  .profile-tabs,.profile-details-panel,.profile-security-panel {display:none !important;}
}


/* =========================================================================
   KONTOR Kundenportal 6.2.5 | Premium-Profilfenster (nur Design)
   Fixierter Kopf + Tabs + Fuss, eigener scrollbar Inhaltsbereich.
   PIN-/API-Logik und Kundendaten bleiben unveraendert.
   ========================================================================= */
.settings-dialog[open] {
  display: flex;
  flex-direction: column;
  width: min(748px, calc(100vw - 32px));
  max-width: min(748px, calc(100vw - 32px));
  height: min(780px, calc(100dvh - 38px));
  max-height: min(780px, calc(100dvh - 38px));
  overflow: hidden;
  padding: 0;
  border: 1px solid #d8e7f5;
  border-radius: 24px;
  background: #fff;
  color: #173251;
  box-shadow: 0 34px 110px rgba(7, 24, 55, .25), 0 8px 28px rgba(7, 24, 55, .1);
}
.settings-dialog::backdrop { background: rgba(11, 30, 58, .53); backdrop-filter: blur(5px); }
.settings-head {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  background: linear-gradient(115deg, #f7fbff 3%, #e8f4ff 100%);
  border-bottom: 1px solid #dfebf7;
  position: relative;
}
.settings-head::after {
  content: "";
  position: absolute;
  width: 225px;
  height: 225px;
  right: -85px;
  top: -115px;
  border: 1px solid rgba(27, 115, 199, .08);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 34px rgba(27,115,199,.025),0 0 0 75px rgba(27,115,199,.02);
}
.settings-topline {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(180, 206, 230, .52);
  padding: 14px 27px;
  min-height: 64px;
  position:relative; z-index:1;
}
.settings-product {display:flex;align-items:center;gap:10px;min-width:0;}
.settings-product img {width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(12,56,105,.13));}
.settings-product span {display:flex;flex-direction:column;gap:3px;min-width:0;}
.settings-product strong {font-size:12px;color:#17395c;letter-spacing:.04em;font-weight:800;}
.settings-product small {font-size:10px;font-weight:630;color:#7188a4;letter-spacing:.03em;}
.settings-dialog .dialog-close {
  flex:0 0 auto;display:grid;place-items:center;width:35px;height:35px;
  background:#fff;border:1px solid #dce8f5;border-radius:11px;
  color:#5c7b99;box-shadow:0 2px 5px rgba(20,60,100,.035);
  transition:background-color .15s, transform .15s;
}
.settings-dialog .dialog-close svg {width:16px;height:16px;}
.settings-dialog .dialog-close:hover {background:#eaf4ff;color:#166bb8;transform:translateY(-1px);}
.settings-hero {display:flex;align-items:center;gap:19px;padding:25px 29px 26px;position:relative;z-index:1;min-width:0;}
.settings-hero-mark {height:66px;width:66px;flex:0 0 66px;border-radius:19px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#1a8edb,#165ba7);border:1px solid #3c97d4;box-shadow:0 10px 22px rgba(26,116,195,.2);}
.settings-hero-mark svg {width:32px;height:32px;}
.settings-hero-text {min-width:0;flex:1;}
.settings-overline {font-size:10px;letter-spacing:.14em;color:#287cbd;font-weight:800;}
.settings-head h2 {font-size:clamp(22px,2.4vw,29px);font-weight:800;letter-spacing:-.04em;color:#102b4b;line-height:1.12;margin:6px 0 5px;}
.settings-head p {margin:0;font-size:13px;color:#5e7c9b;font-weight:600;overflow-wrap:anywhere;}
.settings-privacy-tag {display:inline-flex;align-items:center;gap:6px;padding:8px 11px;background:#fff;border:1px solid #d2e7f5;border-radius:999px;color:#327a70;font-size:11px;font-weight:720;white-space:nowrap;}
.settings-privacy-tag svg {width:14px;height:14px;}
.profile-tabs {
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:13px 27px 12px;background:#fff;border-bottom:1px solid #e9eef5;
  box-shadow:0 4px 12px rgba(21,63,112,.02);
}
.profile-tab {display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 12px;border:1px solid transparent;border-radius:11px;background:#f4f7fb;color:#6c849f;font-size:13px;font-weight:750;transition:background-color .15s,border-color .15s,color .15s;}
.profile-tab svg {width:17px;height:17px;}
.profile-tab:hover {background:#edf5ff;border-color:#d4e5f6;color:#175d9a;}
.profile-tab[aria-selected="true"] {background:linear-gradient(120deg,#eaf5ff,#e4f1ff);color:#1365a8;border-color:#c0dcf5;box-shadow:inset 0 -2px 0 #439be0;}
.profile-details-panel,.profile-security-panel {
  flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#94bddf #f0f6fc;
  overscroll-behavior:contain;
}
.profile-details-panel::-webkit-scrollbar,.profile-security-panel::-webkit-scrollbar {width:10px;}
.profile-details-panel::-webkit-scrollbar-track,.profile-security-panel::-webkit-scrollbar-track {background:#f1f6fb;border-left:1px solid #e7eef7;border-radius:16px;}
.profile-details-panel::-webkit-scrollbar-thumb,.profile-security-panel::-webkit-scrollbar-thumb {background:#9abfe0;border:2px solid #f1f6fb;border-radius:99px;min-height:45px;}
.profile-details-panel::-webkit-scrollbar-thumb:hover,.profile-security-panel::-webkit-scrollbar-thumb:hover {background:#4e93cc;}
.profile-details-panel {padding:25px 29px 30px;background:#fff;}
.profile-info-intro {display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid #e0edf8;border-radius:16px;background:linear-gradient(110deg,#f7fbff,#eef7ff);margin-bottom:25px;}
.profile-content-symbol {display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#e2f1ff;color:#2175b9;}
.profile-content-symbol svg {width:21px;height:21px;}
.profile-info-intro > div:nth-child(2){flex:1;min-width:0;}
.profile-info-intro strong {color:#14395f;font-size:14px;font-weight:770;}
.profile-info-intro p {font-size:11.5px;line-height:1.58;color:#69819c;margin:5px 0 0;}
.profile-readonly {white-space:nowrap;flex:0 0 auto;font-size:10px;letter-spacing:.02em;color:#236b9f;background:#fff;border:1px solid #cfe3f4;padding:7px 10px;border-radius:999px;font-weight:750;}
.profile-section+.profile-section {margin-top:25px;}
.profile-section-heading {display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.profile-section-number {flex:0 0 auto;width:27px;height:27px;display:grid;place-items:center;background:#eaf4ff;border:1px solid #d5e7f8;color:#2f76b1;font-size:10px;font-weight:850;border-radius:9px;}
.profile-section-heading h3 {font-size:14px;font-weight:760;letter-spacing:-.01em;color:#1c3859;margin:0;}
.profile-info-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0;}
.profile-info-item {min-width:0;background:#fafcff;border:1px solid #e4edf5;border-radius:13px;padding:14px 16px;transition:border-color .15s,background-color .15s;}
.profile-info-item:hover {border-color:#c9e1f5;background:#f6faff;}
.profile-info-wide {grid-column:1/-1;}
.profile-info-item dt {font-size:10px;font-weight:790;letter-spacing:.095em;text-transform:uppercase;color:#8ba0b5;margin:0 0 7px;}
.profile-info-item dd {font-size:14px;font-weight:700;letter-spacing:-.01em;color:#183657;line-height:1.5;margin:0;overflow-wrap:anywhere;user-select:text;}
.profile-info-item dd.is-missing {font-size:13px;font-weight:520;color:#9aaabc;}
.profile-info-note {display:flex;align-items:flex-start;gap:11px;margin:25px 0 0;background:#f4f9fd;border:1px dashed #d4e4f2;border-radius:13px;color:#6b829c;font-size:11.5px;line-height:1.65;padding:15px;}
.profile-info-note svg {flex:0 0 18px;width:18px;height:18px;color:#498baa;margin-top:1px;}
.profile-security-panel .settings-body {padding:25px 29px 32px;}
.settings-footer {background:#fbfdff;border-top:1px solid #e8eff7;padding:12px 27px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex:0 0 auto;}
.settings-footer > span {display:inline-flex;gap:8px;align-items:center;font-size:11px;color:#7991aa;font-weight:640;}
.settings-footer > span svg {width:15px;height:15px;color:#348d79;}
.settings-footer form {margin:0;}
.profile-done-button {display:inline-flex;align-items:center;gap:15px;background:#185fa4;color:#fff;border:1px solid #155b9e;border-radius:11px;padding:9px 14px;font-weight:740;font-size:12px;box-shadow:0 5px 11px rgba(24,95,164,.1);}
.profile-done-button:hover {background:#0d518f;}
.profile-done-button span {font-size:17px;font-weight:500;line-height:1;}
.settings-dialog .settings-status {background:#f6faff;border-color:#dfecf8;}
.settings-dialog .settings-disclaimer {font-size:11.5px;}
@media (max-width:650px){
  .settings-dialog[open] {width:calc(100vw - 18px);max-width:calc(100vw - 18px);height:calc(100dvh - 18px);max-height:calc(100dvh - 18px);border-radius:19px;}
  .settings-topline {padding:12px 17px;}
  .settings-hero {padding:19px 19px 21px;gap:11px;align-items:center;flex-wrap:wrap;}
  .settings-hero-mark {height:52px;width:52px;flex-basis:52px;border-radius:16px;}
  .settings-hero-mark svg {width:27px;height:27px;}
  .settings-privacy-tag {margin-left:63px;margin-top:-3px;padding:6px 9px;font-size:10px;}
  .settings-head h2 {font-size:24px;}
  .profile-tabs {padding:10px 14px;gap:7px;}
  .profile-tab {padding:11px 8px;font-size:12px;gap:7px;}
  .profile-tab svg {width:15px;height:15px;}
  .profile-details-panel {padding:18px 16px 25px;}
  .profile-info-intro {display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;padding:12px;gap:9px 11px;margin-bottom:20px;}
  .profile-content-symbol {grid-column:1;grid-row:1;}
  .profile-info-intro > div:nth-child(2) {grid-column:2;grid-row:1;}
  .profile-readonly {grid-column:2;grid-row:2;justify-self:start;margin:0;}
  .profile-section+.profile-section {margin-top:22px;}
  .profile-info-grid {gap:9px;}
  .profile-info-item {padding:12px;}
  .profile-info-item dd {font-size:13px;}
  .profile-security-panel .settings-body {padding:19px 16px 25px;}
  .settings-footer {padding:10px 15px;}
}
@media (max-width:375px){
  .profile-info-grid {grid-template-columns:minmax(0,1fr);}
  .profile-info-wide {grid-column:1;}
  .settings-footer > span {font-size:10px;}
  .profile-done-button {padding:9px 11px;gap:6px;}
  .settings-product small {font-size:9px;}
}
@media (prefers-reduced-motion:reduce){
  .profile-tab,.profile-info-item,.settings-dialog .dialog-close{transition:none;}
}
@media print {
  .settings-dialog[open]{display:none!important;}
}