/* HUGO Oberfläche: Rahmen und Komponenten (Bauauftrag Oberfläche, Abschnitte 4 und 5).
   Werte nur aus tokens.css; Pixel nur in Media-Abfragen (dort gehen keine Variablen).
   Handy zuerst: unter 1024 px Fläche mit Leiste unten, ab 1024 px Menü links auf Grau. */

/* ---------- Grundlage ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.h-body {
    margin: 0;
    background: var(--h-ground);
    color: var(--h-text);
    font-family: var(--h-font);
    font-size: var(--h-size-text);
    font-weight: var(--h-weight-text);
    line-height: var(--h-leading);
    -webkit-font-smoothing: antialiased;
}

:where(.h-body) :where(h1, h2, h3) { margin: 0; font-weight: var(--h-weight-strong); line-height: var(--h-leading-tight); }
:where(.h-body) p { margin: 0; }
:where(.h-body) a { color: var(--h-text); text-decoration: none; }
:where(.h-body) a:where(:hover) { color: var(--h-link); }
:where(.h-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.h-body) img { max-width: 100%; }

:where(.h-body) :focus-visible {
    outline: var(--h-focus-width) solid var(--h-link);
    outline-offset: var(--h-focus-offset);
}

.h-visually-hidden {
    position: absolute; width: var(--h-hairline); height: var(--h-hairline); overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.h-skip {
    position: absolute; left: var(--h-space-2); top: var(--h-space-2); z-index: 100;
    padding: var(--h-space-2) var(--h-space-3); border-radius: var(--h-radius-control);
    background: var(--h-surface); transform: translateY(-200%);
}
.h-skip:focus { transform: none; }

.h-icon {
    width: var(--h-icon-m); height: var(--h-icon-m); flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: var(--h-icon-stroke);
    stroke-linecap: round; stroke-linejoin: round;
}
.h-icon--s { width: var(--h-icon-s); height: var(--h-icon-s); }

.h-meta { font-size: var(--h-size-meta); color: var(--h-text-3); }
.h-text-2 { color: var(--h-text-2); }
.h-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.h-link { color: var(--h-link); font-weight: var(--h-weight-label); }
.h-link:hover { text-decoration: underline; }
.h-prose { max-width: var(--h-measure); }
.h-stack { display: flex; flex-direction: column; gap: var(--h-space-5); }
.h-stack--tight { gap: var(--h-space-3); }

/* ---------- Rahmen ---------- */

.h-app {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; gap: var(--h-space-2);
    padding: var(--h-space-2) var(--h-space-2) 0;
}

.h-side { display: none; }

.h-main {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: var(--h-space-5);
    background: var(--h-surface);
    border: var(--h-hairline) solid var(--h-line);
    border-radius: var(--h-radius-sheet);
    padding: var(--h-space-5) var(--h-space-4) var(--h-space-4);
}

.h-content { display: flex; flex-direction: column; gap: var(--h-space-5); min-width: 0; }

.h-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--h-space-3); }
.h-topline__brand { font-size: var(--h-size-row); font-weight: var(--h-weight-strong); }

.h-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--h-space-2) var(--h-space-4);
    padding: var(--h-space-3) var(--h-space-4); border-radius: var(--h-radius-control);
    background: var(--h-todo-soft); color: var(--h-text);
}

/* Leiste unten (Handy, Tablet hochkant) */
.h-bar {
    position: sticky; bottom: 0; z-index: 20;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--h-space-1);
    padding: var(--h-space-2) var(--h-space-1) calc(var(--h-space-4) + env(safe-area-inset-bottom));
    background: var(--h-ground);
}
.h-bar--1 { grid-template-columns: minmax(0, 1fr); }
.h-bar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-bar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-bar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--h-space-1);
    min-height: var(--h-touch); padding: var(--h-space-1) 0;
    border: var(--h-hairline) solid transparent; border-radius: var(--h-radius-control);
    background: none; cursor: pointer;
    font-size: var(--h-size-meta); font-weight: var(--h-weight-label);
}
.h-bar__item { color: var(--h-text-2); }
.h-bar__item[aria-current="page"] { background: var(--h-surface); border-color: var(--h-line); color: var(--h-text); }

/* Menü links (Rechner) */
.h-brand { display: flex; flex-direction: column; gap: var(--h-space-1); padding: var(--h-space-1) var(--h-space-3); }
.h-brand__name { font-size: var(--h-size-row); font-weight: var(--h-weight-strong); }
.h-brand__tenant { font-size: var(--h-size-meta); color: var(--h-text-2); }
.h-brand__logo { display: block; max-height: var(--h-control); max-width: 100%; object-fit: contain; }

.h-nav { display: flex; flex-direction: column; gap: var(--h-space-1); }
.h-nav + .h-nav { padding-top: var(--h-space-3); border-top: var(--h-hairline) solid var(--h-line); }
.h-nav__label { padding: 0 var(--h-space-3); font-size: var(--h-size-meta); color: var(--h-text-3); }
.h-nav__item {
    display: flex; align-items: center; gap: var(--h-space-3);
    min-height: var(--h-control); padding: 0 var(--h-space-3);
    border: var(--h-hairline) solid transparent; border-radius: var(--h-radius-control);
    font-size: var(--h-size-text); font-weight: var(--h-weight-label);
}
.h-nav__item { color: var(--h-text-2); }
.h-nav__item:hover { color: var(--h-text); background: var(--h-surface); }
.h-nav__item[aria-current="page"] { background: var(--h-surface); border-color: var(--h-line); color: var(--h-text); }
.h-nav__item .h-badge { margin-left: auto; }

.h-side__foot { margin-top: auto; }

@media (min-width: 1024px) {
    .h-app { flex-direction: row; align-items: flex-start; gap: var(--h-space-3); padding: var(--h-space-3); }
    .h-side {
        display: flex; flex-direction: column; gap: var(--h-space-4);
        flex: 0 0 var(--h-side-width); width: var(--h-side-width);
        position: sticky; top: var(--h-space-3);
        max-height: calc(100vh - 2 * var(--h-space-3)); overflow-y: auto;
        padding: var(--h-space-2) var(--h-space-1);
    }
    .h-main {
        align-self: stretch; min-height: calc(100vh - 2 * var(--h-space-3));
        border-radius: var(--h-radius-card); padding: var(--h-space-5);
    }
    .h-bar, .h-only-phone { display: none; }
}
@media (max-width: 1023.98px) {
    .h-only-desk { display: none; }
}

/* Profil-Menü und andere Aufklappmenüs (details/summary, hugo.js schließt bei Klick daneben und Escape) */
.h-menu { position: relative; }
.h-menu > summary { list-style: none; cursor: pointer; }
.h-menu > summary::-webkit-details-marker { display: none; }
.h-menu__list {
    position: absolute; right: 0; top: calc(100% + var(--h-space-1)); z-index: 30;
    display: flex; flex-direction: column; min-width: var(--h-menu-width); padding: var(--h-space-1);
    background: var(--h-surface); border: var(--h-hairline) solid var(--h-line);
    border-radius: var(--h-radius-control); box-shadow: var(--h-shadow-menu);
}
.h-menu--up .h-menu__list { top: auto; bottom: calc(100% + var(--h-space-1)); left: 0; right: auto; }
.h-menu__head { display: flex; flex-direction: column; padding: var(--h-space-2) var(--h-space-3); }
.h-menu__head + * { border-top: var(--h-hairline) solid var(--h-line); }
.h-menu__item {
    display: flex; align-items: center; gap: var(--h-space-3); width: 100%;
    min-height: var(--h-control); padding: 0 var(--h-space-3);
    border: 0; border-radius: var(--h-radius-badge); background: none; cursor: pointer; text-align: left;
    font-size: var(--h-size-text); font-weight: var(--h-weight-label);
}
.h-menu__item { color: var(--h-text); }
.h-menu__item:hover { background: var(--h-ground); }
.h-menu form { margin: 0; }

.h-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--h-avatar); height: var(--h-avatar); border-radius: var(--h-radius-round);
    background: var(--h-ground); color: var(--h-text-2);
    font-size: var(--h-size-text); font-weight: var(--h-weight-label);
}
.h-user { display: flex; align-items: center; gap: var(--h-space-3); padding: var(--h-space-1) var(--h-space-2); border-radius: var(--h-radius-control); }
.h-user:hover { background: var(--h-surface); }
.h-user__name { display: flex; flex-direction: column; min-width: 0; font-weight: var(--h-weight-label); }
.h-user__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Seitenkopf, Pfad, Umschalter ---------- */

.h-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--h-space-2) var(--h-space-4); }
.h-page-head__text { display: flex; flex-direction: column; gap: var(--h-space-1); min-width: 0; }
.h-page-head__title { font-size: var(--h-size-title-phone); }
.h-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-space-2); }
@media (min-width: 1024px) {
    .h-page-head { align-items: baseline; }
    .h-page-head__title { font-size: var(--h-size-title); }
}

.h-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-space-1); font-size: var(--h-size-meta); color: var(--h-text-3); }
.h-crumbs ol { display: contents; list-style: none; }
.h-crumbs li { display: inline-flex; align-items: center; gap: var(--h-space-1); }
.h-crumbs a { color: var(--h-text-2); }

.h-segments {
    display: flex; gap: var(--h-space-1); max-width: 100%; overflow-x: auto;
    padding: var(--h-space-1); border-radius: var(--h-radius-control); background: var(--h-ground);
    scrollbar-width: none;
}
.h-segments__item {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-height: calc(var(--h-control) - 2 * var(--h-space-1)); padding: 0 var(--h-space-3);
    border: var(--h-hairline) solid transparent; border-radius: var(--h-radius-badge);
    font-size: var(--h-size-text); font-weight: var(--h-weight-label); white-space: nowrap;
}
.h-segments__item { color: var(--h-text-2); }
.h-segments__item[aria-current="page"] { background: var(--h-surface); border-color: var(--h-line); color: var(--h-text); }

/* ---------- Karten und Kennzahlen ---------- */

.h-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--h-card-min), 100%), 1fr)); gap: var(--h-space-3); }
.h-grid-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--h-column-min), 100%), 1fr)); gap: var(--h-space-5); align-items: start; }

.h-card {
    display: flex; flex-direction: column; gap: var(--h-space-4); min-width: 0;
    padding: var(--h-space-4); border: var(--h-hairline) solid var(--h-line); border-radius: var(--h-radius-card);
}
.h-card--now { border-color: var(--h-line-strong); box-shadow: var(--h-shadow-card); }
.h-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--h-space-3); }
.h-card__title { font-size: var(--h-size-row); }
.h-figure { font-size: var(--h-size-figure); font-weight: var(--h-weight-strong); line-height: var(--h-leading-tight); font-variant-numeric: tabular-nums; white-space: nowrap; }

.h-kpi { gap: var(--h-space-2); }
.h-kpi__label { font-size: var(--h-size-text); font-weight: var(--h-weight-label); color: var(--h-text-2); }
.h-kpi__action { margin-top: auto; display: inline-flex; align-items: center; gap: var(--h-space-1); min-height: var(--h-control); }

/* ---------- Abschnitte und Listen ---------- */

.h-section { display: flex; flex-direction: column; min-width: 0; }
.h-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--h-space-3); padding-bottom: var(--h-space-2); }
.h-section__title { font-size: var(--h-size-row); }

.h-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.h-row {
    display: flex; align-items: center; gap: var(--h-space-3);
    padding: var(--h-space-3) 0; border-top: var(--h-hairline) solid var(--h-ground);
}
.h-row__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--h-date-box); height: var(--h-date-box); border-radius: var(--h-radius-control); background: var(--h-ground);
}
.h-row__date-main { font-size: var(--h-size-text); font-weight: var(--h-weight-strong); font-variant-numeric: tabular-nums; }
.h-row__date-sub { font-size: var(--h-size-meta); color: var(--h-text-3); }
.h-row__body { display: flex; flex-direction: column; gap: var(--h-space-1); flex: 1 1 auto; min-width: 0; }
.h-row__title { font-size: var(--h-size-row); font-weight: var(--h-weight-label); }
.h-row__text { color: var(--h-text-2); }
.h-row__chevron { color: var(--h-text-3); }

/* ---------- Status und Zähler ---------- */

.h-status { display: inline-flex; align-items: center; gap: var(--h-space-2); font-size: var(--h-size-meta); color: var(--h-status, var(--h-text-2)); }
.h-status::before {
    content: ""; flex-shrink: 0; width: var(--h-dot); height: var(--h-dot);
    border-radius: var(--h-radius-round); background: var(--h-status, var(--h-neutral));
}
.h-status--ok { --h-status: var(--h-ok); }
.h-status--todo { --h-status: var(--h-todo); }
.h-status--error { --h-status: var(--h-error); }
.h-status--wait { --h-status: var(--h-wait); }
.h-status--neutral { --h-status: var(--h-neutral); color: var(--h-text-2); }

.h-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--h-badge); height: var(--h-badge); padding: 0 var(--h-space-2);
    border-radius: var(--h-radius-round); background: var(--h-primary); color: var(--h-on-primary);
    font-size: var(--h-size-meta); font-weight: var(--h-weight-label); font-variant-numeric: tabular-nums;
}

/* ---------- Tabellen ---------- */

.h-table-wrap { max-width: 100%; overflow: auto; }
.h-table-wrap--tall { max-height: 70vh; }
.h-table { width: 100%; border-collapse: collapse; font-size: var(--h-size-text); }
.h-table th {
    position: sticky; top: 0; z-index: 1; background: var(--h-surface);
    padding: var(--h-space-2) var(--h-space-3) var(--h-space-2) 0; text-align: left; white-space: nowrap;
    font-size: var(--h-size-meta); font-weight: var(--h-weight-label); color: var(--h-text-2);
    border-bottom: var(--h-hairline) solid var(--h-line);
}
.h-table td { height: var(--h-row); padding: var(--h-space-2) var(--h-space-3) var(--h-space-2) 0; border-bottom: var(--h-hairline) solid var(--h-ground); vertical-align: middle; }
.h-table th:last-child, .h-table td:last-child { padding-right: 0; }
.h-table .h-num { text-align: right; }

/* ---------- Schaltflächen ---------- */

.h-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--h-space-2);
    min-height: var(--h-control); padding: 0 var(--h-space-4);
    border: var(--h-hairline) solid var(--h-line-strong); border-radius: var(--h-radius-control);
    background: var(--h-surface); cursor: pointer; text-decoration: none; white-space: nowrap;
    font-size: var(--h-size-text); font-weight: var(--h-weight-label);
    transition: background-color var(--h-duration), border-color var(--h-duration);
}
.h-btn { color: var(--h-text); }
.h-btn:hover { background: var(--h-ground); color: var(--h-text); }
.h-btn--primary { background: var(--h-primary); border-color: var(--h-primary); color: var(--h-on-primary); }
.h-btn--primary:hover { background: var(--h-primary-hover); border-color: var(--h-primary-hover); color: var(--h-on-primary); }
.h-btn--danger { border-color: var(--h-error); color: var(--h-error); }
.h-btn--danger:hover { background: var(--h-error-soft); color: var(--h-error); }
.h-btn--large { min-height: var(--h-control); font-size: var(--h-size-row); }
.h-btn--block { width: 100%; }
.h-btn[disabled], .h-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-space-2); }
@media (pointer: coarse) {
    .h-btn--large { min-height: var(--h-control); }
}

/* ---------- Formulare ---------- */

.h-form { display: flex; flex-direction: column; gap: var(--h-space-4); max-width: var(--h-field-width); }
.h-field { display: flex; flex-direction: column; gap: var(--h-space-1); }
.h-label { font-size: var(--h-size-text); font-weight: var(--h-weight-label); }
.h-help { font-size: var(--h-size-meta); color: var(--h-text-2); }
.h-field__error { font-size: var(--h-size-meta); color: var(--h-error); }
.h-input,
.h-field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%; min-height: var(--h-control); padding: 0 var(--h-space-3);
    border: var(--h-hairline) solid var(--h-line-strong); border-radius: var(--h-radius-control);
    background: var(--h-surface); font-size: var(--h-size-row);
}
textarea.h-input, .h-field textarea { min-height: calc(3 * var(--h-control)); padding: var(--h-space-2) var(--h-space-3); line-height: var(--h-leading); }
.h-field--invalid :where(.h-input, input, select, textarea) { border-color: var(--h-error); }
.h-help ul { margin: var(--h-space-1) 0 0; padding-left: var(--h-space-4); }
.h-check { display: flex; align-items: flex-start; gap: var(--h-space-3); min-height: var(--h-touch); padding: var(--h-space-2) 0; cursor: pointer; }
.h-check input { width: var(--h-icon-m); height: var(--h-icon-m); margin: 0; accent-color: var(--h-primary); flex-shrink: 0; }

/* ---------- Schrittliste ---------- */

.h-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: h-step; }
.h-step { display: flex; gap: var(--h-space-3); padding: var(--h-space-3) 0; border-top: var(--h-hairline) solid var(--h-ground); counter-increment: h-step; }
.h-step::before {
    content: counter(h-step); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--h-badge); height: var(--h-badge); border-radius: var(--h-radius-round);
    border: var(--h-hairline) solid var(--h-line-strong); color: var(--h-text-2);
    font-size: var(--h-size-meta); font-weight: var(--h-weight-label);
}
.h-step--current::before { background: var(--h-primary); border-color: var(--h-primary); color: var(--h-on-primary); }
.h-step--done::before { content: ""; border-color: var(--h-ok); background: var(--h-ok); }
.h-step__body { display: flex; flex-direction: column; gap: var(--h-space-1); min-width: 0; }
.h-step__title { font-weight: var(--h-weight-label); }

/* ---------- Hinweis, Leerzustand, Dialog ---------- */

.h-notice { display: flex; flex-direction: column; gap: var(--h-space-1); padding: var(--h-space-3) var(--h-space-4); border-radius: var(--h-radius-control); background: var(--h-ground); }
.h-notice--ok { background: var(--h-ok-soft); }
.h-notice--todo { background: var(--h-todo-soft); }
.h-notice--error { background: var(--h-error-soft); }
.h-notice--wait { background: var(--h-wait-soft); }
.h-notice__title { font-weight: var(--h-weight-label); }

.h-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--h-space-3); padding: var(--h-space-5) 0; color: var(--h-text-2); }

.h-dialog {
    width: min(var(--h-dialog-width), calc(100% - 2 * var(--h-space-4))); padding: 0;
    border: var(--h-hairline) solid var(--h-line); border-radius: var(--h-radius-card);
    background: var(--h-surface); color: var(--h-text); box-shadow: var(--h-shadow-menu);
}
.h-dialog::backdrop { background: var(--h-backdrop); }
.h-dialog__body { display: flex; flex-direction: column; gap: var(--h-space-4); padding: var(--h-space-5); }
.h-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--h-space-3); }
.h-dialog__title { font-size: var(--h-size-row); }
.h-dialog--sheet { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--h-radius-sheet) var(--h-radius-sheet) 0 0; }
.h-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--h-touch); height: var(--h-touch); border: 0; border-radius: var(--h-radius-control);
    background: none; color: var(--h-text-2); cursor: pointer;
}
.h-icon-btn:hover { background: var(--h-ground); color: var(--h-text); }

/* ---------- Anmeldung und Fehlerseiten (hugo/auth.html) ---------- */

.h-auth__main {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--h-space-5);
    padding: var(--h-space-4);
}
.h-auth__card {
    display: flex; flex-direction: column; gap: var(--h-space-5);
    width: 100%; max-width: var(--h-field-width);
    padding: var(--h-space-6) var(--h-space-5);
    background: var(--h-surface); border: var(--h-hairline) solid var(--h-line); border-radius: var(--h-radius-sheet);
}
.h-auth__brand { display: flex; align-items: center; gap: var(--h-space-3); }
.h-auth__head { display: flex; flex-direction: column; gap: var(--h-space-2); }
.h-auth__title { font-size: var(--h-size-title-phone); }
.h-auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--h-space-2) var(--h-space-4); font-size: var(--h-size-meta); color: var(--h-text-3); }
.h-auth__foot a { color: var(--h-text-2); }

/* ---------- Meldungen nach einer Aktion ---------- */

.h-messages { display: flex; flex-direction: column; gap: var(--h-space-2); margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
    .h-body *, .h-body *::before, .h-body *::after { transition: none; animation: none; }
}

@media print {
    .h-side, .h-bar, .h-topline, .h-segments { display: none; }
    .h-app { display: block; padding: 0; }
    .h-main { border: 0; padding: 0; }
}