/* Kundenportal-Design: gemeinsame Tokens, Formulare, Panels und Tabellen der Kundenseiten */

.tk {
  --tk-ink: #374250;
  --tk-text: #606975;
  --tk-muted: #6b7685;
  --tk-line: #e1e7ec;
  --tk-soft: #f6f8fa;
  --tk-blue: #2563eb;
  --tk-band: #1d4ed8;
  --tk-ok: #43d9a3;
  --tk-ok-ink: #0b6446;
  --tk-ok-bg: #edfbf5;
  --tk-err: #d64545;
  --tk-err-ink: #a12626;
  --tk-err-bg: #fdf1f1;
  color: var(--tk-text);
}
.tk [hidden] { display: none !important; }

.tk-head { max-width: 68ch; margin: 0 0 32px; }
.tk-title { margin: 0 0 10px; font-size: 30px; font-weight: 500; line-height: 1.2; color: var(--tk-ink); }
.tk-lead { margin: 0; font-size: 16px; line-height: 1.6; }

.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }

/* Formularfläche */
.tk-panel { background: #fff; border: 1px solid var(--tk-line); border-radius: 16px; overflow: hidden; }
.tk-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px 40px; padding: 28px 32px; }
.tk-group + .tk-group { border-top: 1px solid var(--tk-line); }
.tk-group-head h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tk-ink); }
.tk-group-head p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tk-muted); }

.tk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-content: start; }
.tk-fields-company { grid-template-columns: minmax(0, 1fr) 140px; }
.tk-full { grid-column: 1 / -1; }

.tk-field label { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--tk-ink); text-transform: none; letter-spacing: 0; }
.tk .tk-input {
  display: block; width: 100%; margin: 0; padding: 11px 14px;
  border: 1px solid #d3dbe2; border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--tk-ink);
  box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
  scroll-margin-top: 140px; /* Sticky-Navigation verdeckt sonst fokussierte Fehlerfelder */
}
.tk .tk-input:hover { border-color: #b8c3cd; }
.tk .tk-input:focus { outline: none; border-color: var(--tk-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.tk .tk-input[aria-invalid="true"] { border-color: var(--tk-err); }
.tk .tk-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, .16); }
.tk textarea.tk-input { min-height: 180px; resize: vertical; }

.tk-field-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.tk-error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--tk-err-ink); }
.tk-field-foot .tk-error { margin: 0; }
.tk-count { margin-left: auto; font-size: 13px; color: var(--tk-muted); font-variant-numeric: tabular-nums; }

/* Erkannt über IP */
.tk-recognized { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: var(--tk-ok-bg); color: var(--tk-ok-ink); font-size: 14px; line-height: 1.5; }
.tk-recognized-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tk-ok); color: #fff; font-size: 12px; }
.tk-recognized p { margin: 0; }
.tk-recognized strong { color: var(--tk-ink); font-weight: 600; }

.tk-link { padding: 0; border: 0; background: none; font: inherit; color: var(--tk-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tk-link:hover { text-decoration-thickness: 2px; }
.tk a:focus-visible, .tk-link:focus-visible, .tk .btn:focus-visible { outline: 2px solid var(--tk-blue); outline-offset: 2px; }

.tk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 24px 32px; border-top: 1px solid var(--tk-line); background: var(--tk-soft); }
.tk-foot-meta { display: flex; flex-direction: column; gap: 10px; }
.tk-privacy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tk-muted); max-width: 44ch; }
.tk-privacy a { color: inherit; text-decoration: underline; }
.tk-foot .btn { margin: 0; min-width: 200px; }
.tk-foot #message-box { flex-basis: 100%; }
.tk-foot #message-box:empty { display: none; }
.tk-alert { padding: 12px 16px; border-radius: 10px; background: var(--tk-err-bg); color: var(--tk-err-ink); font-size: 14px; line-height: 1.5; }

.tk-done { padding: 56px 32px; text-align: center; }
.tk-done-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--tk-ok-bg); color: var(--tk-ok-ink); font-size: 22px; }
.tk-done h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: var(--tk-ink); }
.tk-done p { margin: 0 auto; max-width: 48ch; font-size: 15px; line-height: 1.6; }
.tk-nowrap { white-space: nowrap; }
.tk-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.tk-done-actions .btn { margin: 0; }
.tk-foot-user { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tk-muted); }
.tk-foot-user strong { color: var(--tk-ink); font-weight: 500; }

/* Auswahlkarten (Radio-Gruppen) */
.tk-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tk-choice-stack { grid-template-columns: minmax(0, 1fr); }
.tk .tk-option { position: relative; display: block; margin: 0; padding: 0; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; }
.tk-option input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tk-option-box {
  position: relative; display: block; height: 100%; padding: 12px 14px 12px 42px;
  border: 1px solid #d3dbe2; border-radius: 10px; background: #fff;
  font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--tk-ink);
  hyphens: auto; overflow-wrap: break-word;
  transition: border-color .15s ease, background-color .15s ease;
}
.tk-option-box::before {
  content: ""; position: absolute; top: 14px; left: 14px; width: 16px; height: 16px;
  border: 1.5px solid #b8c3cd; border-radius: 50%; background: #fff; box-sizing: border-box;
  transition: border-width .15s ease, border-color .15s ease;
}
.tk-option-box small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--tk-text); }
.tk-option:hover .tk-option-box { border-color: #b8c3cd; }
.tk-option input:checked + .tk-option-box { border-color: var(--tk-blue); background: #f4f7ff; box-shadow: inset 0 0 0 1px var(--tk-blue); }
.tk-option input:checked + .tk-option-box::before { border: 5px solid var(--tk-blue); }
.tk-option input:focus-visible + .tk-option-box { outline: 2px solid var(--tk-blue); outline-offset: 2px; }
.tk-choice[aria-invalid="true"] .tk-option-box { border-color: var(--tk-err); }
.tk-choice-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--tk-ink); }

/* Seitenspalte */
.tk-hotline { padding: 28px; border-radius: 16px; background: var(--tk-band); color: rgba(255, 255, 255, .86); }
.tk-hotline h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: #fff; }
.tk-hotline p { margin: 0; font-size: 14px; line-height: 1.55; }
.tk-hotline .tk-phone { display: block; margin: 18px 0 4px; font-size: 22px; white-space: nowrap; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.tk-hotline .tk-phone:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tk-hotline .tk-phone:focus-visible { outline-color: #fff; }

.tk-more { margin: 8px 0 0; padding: 0; list-style: none; }
.tk-more li { display: flex; gap: 14px; padding: 20px 4px; }
.tk-more li + li { border-top: 1px solid var(--tk-line); }
.tk-more-icon { flex: none; width: 20px; padding-top: 2px; font-size: 17px; color: var(--tk-blue); text-align: center; }
.tk-more h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--tk-ink); }
.tk-more p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.tk-more a { color: var(--tk-blue); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.tk-note { margin: 4px 4px 0; font-size: 13px; line-height: 1.55; color: var(--tk-muted); }
.tk-hotline + .tk-note { margin-top: 20px; }
.tk-note a { color: var(--tk-blue); text-decoration: underline; text-underline-offset: 2px; }

/* Ansprechpartner: Foto, Name, Funktion, Status, Telefon/E-Mail als lesbarer Text */
.tk-person { display: flex; align-items: center; gap: 14px; }
.tk-person img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--tk-soft); }
.tk-person strong { display: block; font-size: 15px; font-weight: 600; color: var(--tk-ink); }
.tk-person span { display: block; font-size: 13px; line-height: 1.5; color: var(--tk-text); }
.tk-person .tl-status { display: inline-flex; }
.tk-reach { margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; }
.tk-reach li { display: flex; align-items: baseline; gap: 8px; }
.tk-reach li + li { margin-top: 8px; }
.tk-reach i { flex: none; width: 18px; color: var(--tk-muted); text-align: center; }
.tk-reach a { color: var(--tk-blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Schritte (nur für echte Abfolgen) */
.tk-steps { margin: 0; padding: 0; list-style: none; counter-reset: tk-step; }
.tk-steps > li { position: relative; padding: 28px 32px 28px 88px; counter-increment: tk-step; }
.tk-steps > li + li { border-top: 1px solid var(--tk-line); }
.tk-steps > li::before {
  content: counter(tk-step); position: absolute; top: 26px; left: 32px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; background: #eef3ff; color: var(--tk-band); font-size: 15px; font-weight: 600;
}
.tk-steps h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--tk-ink); }
.tk-steps p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 60ch; }
.tk-step-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; }
.tk-step-actions .btn { margin: 0; }
.tk-step-actions .btn i { margin-right: 8px; }

/* Link-Liste: jede Zeile ist komplett klickbar */
.tk-nav { margin: 0; padding: 0; list-style: none; }
.tk-nav > li + li { border-top: 1px solid var(--tk-line); }
.tk .tk-nav-item { display: flex; align-items: center; gap: 16px; padding: 22px 28px; color: inherit; text-decoration: none; transition: background-color .15s ease; }
.tk .tk-nav-item:hover { background: var(--tk-soft); color: inherit; text-decoration: none; }
.tk .tk-nav-item:focus-visible { outline: 2px solid var(--tk-blue); outline-offset: -2px; }
.tk-nav-icon { flex: none; width: 24px; font-size: 20px; color: var(--tk-blue); text-align: center; }
.tk-nav-text { flex: 1 1 auto; min-width: 0; }
.tk-nav-text strong { display: block; margin: 0 0 2px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--tk-ink); }
.tk-nav-text span { display: block; font-size: 14px; line-height: 1.55; color: var(--tk-text); }
.tk-nav-action { flex: none; font-size: 14px; font-weight: 500; color: var(--tk-blue); white-space: nowrap; }
.tk-nav-item:hover .tk-nav-action { text-decoration: underline; text-underline-offset: 2px; }

/* Listen-Seiten: Kopf, Panels, Tabellen (DataTables), Status */
.tl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin: 0 0 32px; }
.tl-head .tk-head { margin: 0; }
.tl-head .btn { margin: 0; }

.tl-panel ~ .tl-panel { margin-top: 24px; }
.tl-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 28px; border-bottom: 1px solid var(--tk-line); }
.tl-panel-head h3 { margin: 0 0 2px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--tk-ink); }
.tl-meta { margin: 0; font-size: 14px; color: var(--tk-muted); font-variant-numeric: tabular-nums; }
/* Meldungen */
.tl-loading { padding: 28px; text-align: center; }
.tl-empty { margin: 0; padding: 24px 28px; font-size: 14px; color: var(--tk-muted); }
.tl-msg { margin: 20px 28px; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
/* Tabellen */
.tl .table { width: 100% !important; margin: 0; border-collapse: collapse; }
.tl .table thead th,
.tl table.dataTable thead th {
    padding: 12px 16px; border: 0; border-bottom: 1px solid var(--tk-line); background-color: transparent;
    font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tk-muted); white-space: nowrap; vertical-align: bottom;
}
.tl .table tbody td,
.tl .table tbody th {
    padding: 14px 16px; border: 0; border-top: 1px solid var(--tk-line);
    font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--tk-ink); vertical-align: middle;
}
.tl .table tbody tr:first-child > * { border-top: 0; }
.tl .table tr > :first-child { padding-left: 28px; }
.tl .table tr > :last-child { padding-right: 28px; }
.tl .table-hover tbody tr:hover { background-color: #f8fafc; }
.tl table.dataTable thead .sorting,
.tl table.dataTable thead .sorting_asc,
.tl table.dataTable thead .sorting_desc { padding-right: 28px; background-position: right 8px center; }
.tl table.dataTable thead th:focus-visible { outline: 2px solid var(--tk-blue); outline-offset: -2px; }
.tl table.dataTable.no-footer { border-bottom: 0; }
.tl table.dataTable tbody tr { background-color: transparent; }

.tl-ticket-link { font-weight: 600; color: var(--tk-blue); text-decoration: none; font-variant-numeric: tabular-nums; }
.tl-ticket-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.tl-date-cell { color: var(--tk-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Status: Punkt + Text statt Badge */
.tl-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tl-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-dot, #9aa5b1); }
.tl-status-amber { --tl-dot: #f59e0b; }
.tl-status-grey { --tl-dot: #9aa5b1; }
.tl-status-blue { --tl-dot: #2563eb; }
.tl-status-green { --tl-dot: #22c55e; }
.tl-status-slate { --tl-dot: #475569; }
.tl-status-violet { --tl-dot: #8b5cf6; }
.tl-status-red { --tl-dot: #dc2626; }
.tl-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Lange Referenzen ("#122728;#122729;...") und Komposita ("Stundenkontingentvertrag") dürfen die Tabelle nicht aufblähen */
.tl-stack .tl-stack-title { overflow-wrap: anywhere; }
.tl-stack td { hyphens: auto; }
/* DataTables-Leisten */
.tl-dt-top, .tl-dt-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 28px; }
.tl-dt-top { border-bottom: 1px solid var(--tk-line); }
.tl-dt-bottom { border-top: 1px solid var(--tk-line); }
/* .tk-panel schneidet mit overflow:hidden ab, breite Tabellen (768–1199 px) scrollen stattdessen */
.tl .dataTables_wrapper { overflow-x: auto; }
.tl .dataTables_wrapper .dataTables_filter,
.tl .dataTables_wrapper .dataTables_length,
.tl .dataTables_wrapper .dataTables_info,
.tl .dataTables_wrapper .dataTables_paginate { float: none; padding: 0; margin: 0; text-align: left; font-size: 14px; color: var(--tk-muted); }
.tl .dataTables_wrapper .dataTables_filter { flex: 1 1 280px; max-width: 420px; }
.tl .dataTables_wrapper .dataTables_filter label { display: block; width: 100%; margin: 0; padding: 0; font-size: 0; }
.tl .dataTables_wrapper .dataTables_filter input {
    width: 100%; margin: 0; padding: 9px 14px 9px 38px; border: 1px solid #d3dbe2; border-radius: 10px;
    font: inherit; font-size: 15px; color: var(--tk-ink); box-shadow: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a94a1' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
.tl .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--tk-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.tl .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 14px; font-weight: 400; color: var(--tk-muted); text-transform: none; }
.tl .dataTables_wrapper .dataTables_length select { width: auto; margin: 0; padding: 6px 30px 6px 10px; border: 1px solid #d3dbe2; border-radius: 8px; font: inherit; font-size: 14px; color: var(--tk-ink); background-color: #fff; }
.tl .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; gap: 4px; }
.tl .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px; margin: 0; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px;
    background: none; font-size: 14px; line-height: 1.4; text-align: center; color: var(--tk-text) !important;
}
.tl .dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-color: var(--tk-line); background: var(--tk-soft); color: var(--tk-ink) !important; }
.tl .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.tl .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-color: var(--tk-blue); background: #eef3ff; color: var(--tk-band) !important; font-weight: 600; }
.tl .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.tl .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { border-color: transparent; background: none; color: #c3cbd3 !important; cursor: default; }
@media (max-width: 767px) {
    .tl-panel-head, .tl-dt-top, .tl-dt-bottom { padding-left: 18px; padding-right: 18px; }
    .tl .table tr > :first-child { padding-left: 18px; }
    .tl .table tr > :last-child { padding-right: 18px; }
    .tl-msg { margin: 16px 18px; }
    .tl-empty { padding: 20px 18px; }
    .tl .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; padding: 10px 12px; }
}
@media (max-width: 575px) {
  .tl-head .btn { width: 100%; }
}
/* Tabellen mit .tl-stack werden auf dem Handy zu Einträgen "Label: Wert" (Labels per data-label) */
@media (max-width: 767px) {
  .tl-stack thead { display: none; }
  .tl-stack tbody tr { display: block; padding: 14px 18px; border-top: 1px solid var(--tk-line); }
  .tl-stack tbody tr:first-child { border-top: 0; }
  .tl .tl-stack tbody tr > * { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; }
  .tl-stack tbody tr > [data-label]::before { content: attr(data-label); flex: none; font-size: 13px; color: var(--tk-muted); text-align: left; }
  .tl .tl-stack tbody tr > .tl-stack-title { display: block; padding-bottom: 6px !important; font-size: 15px; text-align: left !important; }
  .tl .tl-stack tbody td.dataTables_empty { display: block; text-align: center !important; }
}

@media (max-width: 1199px) {
  .tk-group { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 991px) {
  .tk-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .tk-title { font-size: 25px; }
  .tk-group { padding: 22px 18px; }
  .tk-fields, .tk-fields-company, .tk-choice { grid-template-columns: minmax(0, 1fr); }
  .tk-foot { padding: 20px 18px; }
  .tk-foot .btn { width: 100%; }
  .tk-hotline { padding: 24px 20px; }
  .tk .tk-nav-item { flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; padding: 18px; }
  .tk-nav-text { flex-basis: calc(100% - 38px); }
  .tk-nav-action { padding-left: 38px; }
  .tk-steps > li { padding: 22px 18px 22px 64px; }
  .tk-steps > li::before { top: 20px; left: 18px; width: 30px; height: 30px; font-size: 14px; }
  .tk-step-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .tk .g-recaptcha { transform: scale(.88); transform-origin: left top; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk .tk-input, .tk-option-box, .tk-option-box::before, .tk .tk-nav-item { transition: none; }
}