/*
 * Mevit Rental – Design-Grundlage
 *
 * Enthält Reset, Design-Tokens und alle Bausteine, die sowohl im öffentlichen
 * Bereich als auch im Verwaltungsbereich vorkommen (Buttons, Formulare, Tabellen,
 * Badges, Kalender). Bereichsspezifisches liegt in site.css bzw. admin.css.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
    /* Markenfarben: tiefes Petrol als Basis, Schwarz als Akzent. */
    --brand-900: #0b2b33;
    --brand-800: #0f3a45;
    --brand-700: #14515f;
    --brand-600: #1a6b7d;
    --brand-500: #22879d;
    --brand-100: #dcf0f4;
    --brand-50: #f1fafb;

    /*
     * Der Akzent ist die Farbe der Handlungsknöpfe – „Suchen", „Anfragen",
     * „Bezahlen". Kein reines #000: Ein leicht ins Blaugraue gezogenes Schwarz
     * wirkt neben dem Petrol ruhiger und lässt Ränder und Schatten überhaupt
     * erst erkennbar bleiben.
     *
     * Wie überall hier gilt: größere Zahl = dunkler. `--accent-400` ist die
     * Ausnahme nach oben und dient dem Hover – bei einer schwarzen Fläche ist
     * „heller werden" die sichtbare Reaktion, „noch schwärzer" wäre keine.
     */
    --accent-700: #000000;
    --accent-600: #16181d;
    --accent-500: #23262d;
    --accent-400: #363b45;
    --accent-100: #e7e9ec;

    --ink-900: #10171c;
    --ink-800: #1d2830;
    --ink-700: #33434e;
    --ink-600: #4d6070;
    --ink-500: #6b7f8e;
    --ink-400: #93a5b1;
    --ink-300: #c2ced6;
    --ink-200: #dee6eb;
    --ink-100: #eef2f5;
    --ink-50: #f7f9fb;
    --white: #ffffff;

    --ok-700: #1c6b45;
    --ok-500: #22935d;
    --ok-100: #dcf4e8;
    --warn-700: #8a5a06;
    --warn-500: #d08b12;
    --warn-100: #fdf0d5;
    --bad-700: #9a2b30;
    --bad-500: #c9343b;
    --bad-100: #fbe3e4;
    --info-700: #23527c;
    --info-100: #dceaf7;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-xs: 0 1px 2px rgba(16, 23, 28, .06);
    --shadow-sm: 0 1px 3px rgba(16, 23, 28, .08), 0 1px 2px rgba(16, 23, 28, .04);
    --shadow: 0 4px 16px rgba(16, 23, 28, .08), 0 1px 3px rgba(16, 23, 28, .05);
    --shadow-lg: 0 16px 40px rgba(16, 23, 28, .12), 0 4px 12px rgba(16, 23, 28, .06);

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --container: 1200px;
    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------- Reset */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-800);
    background: var(--ink-50);
    -webkit-font-smoothing: antialiased;
}

/*
 * Deutsche Komposita sind lang: „Geschäftsbedingungen" allein misst auf einem
 * schmalen Telefon mehr als die Spalte breit ist, und eine Überschrift bricht
 * von sich aus nur an Leerzeichen. `hyphens: auto` trennt sie sauber – die
 * Sprache dafür steht im `lang="de"` des Dokuments. `overflow-wrap` ist die
 * Rückfallebene für Browser ohne deutsche Trennmuster: lieber hart umbrochen
 * als seitlich aus dem Bild geschoben.
 *
 * `anywhere` statt `break-word`, weil nur `anywhere` in die Mindestbreite des
 * Elements eingeht. Steht die Überschrift in einer Flexzeile – wie auf der
 * AGB-Seite neben der Fassungsnummer –, schrumpft sie mit `break-word` nie
 * unter die Breite ihres längsten Wortes und schöbe die Seite trotz erlaubtem
 * Umbruch auf. Für den Zeilenumbruch selbst verhalten sich beide gleich.
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    line-height: 1.25;
    color: var(--ink-900);
    font-weight: 650;
    letter-spacing: -.011em;
    overflow-wrap: anywhere;
    hyphens: auto;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--brand-600);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--brand-800); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

hr {
    border: 0;
    border-top: 1px solid var(--ink-200);
    margin: var(--space-5) 0;
}

small { font-size: .8125rem; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }

code, kbd, pre { font-family: var(--font-mono); font-size: .875em; }

:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------- Bewegung */

/*
 * Ein Satz Einblend-Animationen für Listen und Karten – dasselbe, was Bibliotheken
 * wie animate.css mitbringen, nur als zwanzig Zeilen CSS. Eine Abhängigkeit von
 * einem fremden CDN dafür einzukaufen widerspräche der Regel „keine externen
 * Skripte", und ausgeliefert würde eine Datei, von der drei Klassen gebraucht
 * werden.
 *
 * **Sichtbar ist der Ausgangszustand, nicht das Ziel.** Die Animation läuft von
 * unsichtbar nach sichtbar, aber der Endzustand steht im Stylesheet: Bricht sie
 * ab oder kennt der Browser sie nicht, steht der Inhalt trotzdem da.
 */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-rise { animation: rise-in .5s cubic-bezier(.2, .7, .3, 1) both; }
.animate-fade { animation: fade-in .4s ease-out both; }

/*
 * Nacheinander statt gleichzeitig: Die Verzögerung kommt aus `--stagger` und
 * wird von der Liste selbst gesetzt (`.stagger > *`). Zwölf Stufen reichen –
 * darüber hinaus wartet niemand mehr auf die letzte Kachel, deshalb bleibt es
 * bei der letzten Stufe stehen.
 */
.stagger > * { animation: rise-in .5s cubic-bezier(.2, .7, .3, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }
.stagger > *:nth-child(9) { animation-delay: 480ms; }
.stagger > *:nth-child(10) { animation-delay: 540ms; }
.stagger > *:nth-child(11) { animation-delay: 600ms; }
.stagger > *:nth-child(n+12) { animation-delay: 660ms; }

/*
 * Wer Bewegung abgestellt hat, meint es ernst: Für manche Menschen löst sie
 * Übelkeit oder Schwindel aus. Abgeschaltet wird deshalb alles auf einmal und
 * nicht Regel für Regel – eine vergessene Animation macht die Rücksicht zunichte.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .item-card:hover { transform: none; }
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------- Utilities */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

/* Für Fließtextseiten – lange Zeilen lesen sich schlecht. */
.container-narrow { max-width: 820px; }

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.row-top { align-items: flex-start; }

.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--ink-500); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); font-size: .9em; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.lead {
    font-size: 1.0625rem;
    color: var(--ink-600);
    line-height: 1.65;
}

/* --------------------------------------------------------------- Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 560;
    font-size: .9375rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
        color var(--transition), box-shadow var(--transition), transform var(--transition);
    white-space: nowrap;
}

/*
 * Der Knopf hebt sich beim Überfahren leicht an und legt einen Schatten
 * darunter – die Bewegung, die das Zeigegerät bestätigt, bevor geklickt wird.
 * Ein Pixel genügt dafür; alles darüber wirkt wie ein Sprung und lenkt vom
 * Text ab. Beim Drücken geht es zurück nach unten, damit der Klick sich wie
 * ein Druck anfühlt.
 */
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

/* Geisterknöpfe liegen flach in der Fläche – ein Schatten ließe sie schweben. */
.btn-ghost:hover { transform: none; box-shadow: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--brand-700);
    color: var(--white);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--brand-800); color: var(--white); }

.btn-accent {
    background: var(--accent-600);
    color: var(--white);
    box-shadow: var(--shadow-xs);
}
/* Heller statt dunkler – siehe `--accent-400`. */
.btn-accent:hover { background: var(--accent-400); color: var(--white); }

.btn-secondary {
    background: var(--white);
    border-color: var(--ink-300);
    color: var(--ink-800);
}
.btn-secondary:hover { border-color: var(--ink-400); background: var(--ink-50); color: var(--ink-900); }

.btn-ghost {
    background: transparent;
    color: var(--ink-600);
}
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-900); }

.btn-danger {
    background: var(--white);
    border-color: var(--bad-500);
    color: var(--bad-700);
}
.btn-danger:hover { background: var(--bad-500); color: var(--white); }

.btn-sm { padding: 6px 12px; font-size: .8125rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; }

/*
 * 44 px sind eine Fingerkuppe, keine Bildschirmbreite – deshalb hängt die
 * Vergrößerung an `pointer: coarse` und nicht an einer Medienbreite. Ein
 * schmales Fenster am Rechner bleibt damit unverändert, ein Tablet in voller
 * Breite bekommt die größeren Ziele trotzdem. Betroffen sind nur die kleinen
 * Varianten; `.btn` selbst ist mit 41 px nah genug dran.
 */
@media (pointer: coarse) {
    .btn { padding: 12px 18px; }
    .btn-sm { padding: 12px 14px; }
    .btn-icon,
    .btn-sm.btn-icon { padding: 14px; }
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

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

.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }

.field > label,
.label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 560;
    color: var(--ink-700);
}

.field .help {
    display: block;
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--ink-500);
}

/*
 * `hidden` heißt versteckt – auch wenn eine Regel weiter unten ein `display`
 * setzt.
 *
 * Das `[hidden] { display: none }` aus dem Browser-Stylesheet hat dieselbe
 * Spezifität wie eine Klassenregel und verliert deshalb gegen jedes spätere
 * `.irgendwas { display: flex }`. Das Element bleibt dann sichtbar, obwohl das
 * Attribut gesetzt ist – ein Fehler, den man im Code nicht sieht, weil dort
 * alles richtig aussieht. Hier ist `!important` genau am Platz: Es gibt keinen
 * Fall, in dem etwas Verstecktes doch angezeigt werden soll.
 */
[hidden] { display: none !important; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius);
    background: var(--white);
    font: inherit;
    font-size: .9375rem;
    color: var(--ink-900);
    transition: border-color var(--transition), box-shadow var(--transition);
}

textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7f8e'%3E%3Cpath d='M4.2 6.2 8 10l3.8-3.8-1.1-1.1L8 7.8 5.3 5.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}

/*
 * Datums- und Zeitfelder bekommen dasselbe Kalender-/Uhrsymbol wie das
 * Auswahlfeld seinen Pfeil: Der Browser malt sonst ein graues Standardsymbol,
 * das neben den übrigen Feldern wie ein Fremdkörper wirkt. Das Symbol ist reine
 * Zier – bedient wird das Feld weiterhin vom Browser.
 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition), background var(--transition);
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { background: var(--ink-100); }

/*
 * Die Ziffernblöcke der Zeiteingabe sollen beim Anspringen aussehen wie eine
 * Textmarkierung und nicht wie ein blauer Systemkasten.
 */
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-ampm-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background: var(--brand-100);
    color: var(--brand-800);
    border-radius: 3px;
    outline: none;
}

input:hover, select:hover, textarea:hover { border-color: var(--ink-400); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(34, 135, 157, .16);
}

input[readonly], input:disabled, select:disabled, textarea:disabled {
    background: var(--ink-100);
    color: var(--ink-500);
    cursor: not-allowed;
}

.checkbox,
.radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: .9375rem;
    color: var(--ink-700);
    cursor: pointer;
    margin-bottom: var(--space-2);
}

.checkbox input,
.radio input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--brand-600);
    cursor: pointer;
}

.checkbox label,
.radio label { cursor: pointer; margin: 0; font-weight: 400; }

/*
 * Sicherheitsabfrage (hCaptcha).
 *
 * Das Widget bringt seine eigene Größe mit (302 × 76 px) und lässt sich nicht
 * umstylen. Auf schmalen Bildschirmen darf es deshalb nicht die Seite breiter
 * machen als sie ist – lieber scrollt der Kasten selbst.
 */
.captcha-field { margin-top: var(--space-4); overflow-x: auto; }
.captcha-field .h-captcha { min-height: 78px; }

/* Umschalter für die Anzeigeoptionen im Admin */
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--ink-100);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-600); flex: none; }
.switch-row .switch-text { flex: 1; }
.switch-row .switch-text strong { display: block; font-size: .9375rem; color: var(--ink-800); font-weight: 560; }
.switch-row .switch-text span { display: block; font-size: .8125rem; color: var(--ink-500); line-height: 1.5; }

.field-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.field-grid .span-2 { grid-column: span 2; }
@media (max-width: 640px) {
    .field-grid .span-2 { grid-column: span 1; }
}

/* Fehlerdarstellung von CakePHPs FormHelper */
.input.error input,
.input.error select,
.input.error textarea,
input.form-error, select.form-error, textarea.form-error {
    border-color: var(--bad-500);
    background: #fffafa;
}

.error-message {
    display: block;
    margin-top: 5px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--bad-700);
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-5);
}

legend {
    padding: 0;
    margin-bottom: var(--space-3);
    font-size: .8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
}

/* ---------------------------------------------------------------- Karten */

.card {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/*
 * `flex-wrap: wrap`, weil rechts in der Kopfzeile fast immer ein Knopf steht.
 * Eine lange Überschrift wie „Allgemeine Geschäftsbedingungen" lässt sich nicht
 * beliebig schmal machen – ohne Umbruch schöbe sie den Knopf auf dem Telefon
 * aus dem Bild. Passt beides in eine Zeile, ändert sich nichts.
 */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--ink-200);
}

.card-header h2,
.card-header h3 { margin: 0; font-size: 1.0625rem; }

.card-body { padding: var(--space-5); }
.card-body.tight { padding: var(--space-4); }
.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--ink-200);
    background: var(--ink-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------------------------------------------------------------- Badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    white-space: nowrap;
    background: var(--ink-100);
    color: var(--ink-700);
}

.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-plain::before { display: none; }

.badge-ok { background: var(--ok-100); color: var(--ok-700); }
.badge-warn { background: var(--warn-100); color: var(--warn-700); }
.badge-bad { background: var(--bad-100); color: var(--bad-700); }
.badge-info { background: var(--info-100); color: var(--info-700); }
.badge-brand { background: var(--brand-100); color: var(--brand-700); }
.badge-accent { background: var(--accent-100); color: var(--accent-700); }
.badge-neutral { background: var(--ink-100); color: var(--ink-600); }

/* -------------------------------------------------------------- Meldungen */

.message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: .9375rem;
    margin-bottom: var(--space-4);
}

.message p { margin: 0; }
.message > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* Icon im Fließtext – etwas kleiner als die Schrift, auf der Grundlinie. */
.icon-xs { width: 14px; height: 14px; vertical-align: -2px; }
.icon-sm { width: 16px; height: 16px; flex: none; }
.message.success { background: var(--ok-100); border-color: #b6e3cc; color: var(--ok-700); }
.message.error { background: var(--bad-100); border-color: #f2c4c6; color: var(--bad-700); }
.message.warning { background: var(--warn-100); border-color: #f0d9a8; color: var(--warn-700); }
.message.info { background: var(--info-100); border-color: #bcd6ec; color: var(--info-700); }

.flash-stack { position: relative; }

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

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

table.data th,
table.data td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--ink-200);
    vertical-align: middle;
}

table.data thead th {
    font-size: .75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
    white-space: nowrap;
}

table.data tbody tr { transition: background var(--transition); }
table.data tbody tr:hover { background: var(--brand-50); }
table.data tbody tr:last-child td { border-bottom: 0; }

table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty-state {
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--ink-500);
}

.empty-state svg {
    width: 44px; height: 44px;
    margin-bottom: var(--space-3);
    color: var(--ink-300);
}

.empty-state h3 { color: var(--ink-700); }

/* ------------------------------------------------------------ Paginierung */

.paginator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) 0 0;
}

.paginator ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginator li a,
.paginator li.active a,
.paginator li.disabled a {
    display: block;
    min-width: 34px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-700);
    font-size: .875rem;
    text-decoration: none;
}

.paginator li a:hover { border-color: var(--brand-500); color: var(--brand-700); }
.paginator li.active a { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.paginator li.disabled a { opacity: .45; pointer-events: none; }

/* -------------------------------------------------------------- Kalender */

.calendar {
    --cal-gap: 4px;
}

.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.calendar-months {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.calendar-month h4 {
    margin: 0 0 var(--space-3);
    font-size: .9375rem;
    font-weight: 650;
    color: var(--ink-800);
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--cal-gap);
}

.calendar-dow {
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-400);
    text-align: center;
    padding-bottom: 4px;
}

.calendar-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    min-height: 34px;
}

.calendar-day .qty {
    font-size: .625rem;
    font-weight: 600;
    line-height: 1;
    opacity: .75;
    margin-top: 1px;
}

.calendar-day.is-blank { visibility: hidden; }

.calendar-day.is-free { background: var(--ok-100); color: var(--ok-700); }
.calendar-day.is-tight { background: var(--warn-100); color: var(--warn-700); }
.calendar-day.is-full { background: var(--bad-100); color: var(--bad-700); }
.calendar-day.is-past { background: var(--ink-100); color: var(--ink-400); }

.calendar-day.is-today { border-color: var(--brand-600); font-weight: 700; }

.calendar-day.in-range {
    outline: 2px solid var(--brand-600);
    outline-offset: -2px;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink-200);
    font-size: .8125rem;
    color: var(--ink-600);
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend i {
    width: 14px; height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.legend-free { background: var(--ok-100); border: 1px solid #b6e3cc; }
.legend-tight { background: var(--warn-100); border: 1px solid #f0d9a8; }
.legend-full { background: var(--bad-100); border: 1px solid #f2c4c6; }
.legend-past { background: var(--ink-100); border: 1px solid var(--ink-200); }

.calendar-loading { opacity: .45; pointer-events: none; transition: opacity var(--transition); }

/* ------------------------------------------------- Verfügbarkeitsergebnis */

.availability-result {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: .9375rem;
}

.availability-result .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 7px;
    flex: none;
}

.availability-result strong { display: block; margin-bottom: 2px; }
.availability-result p { margin: 0; font-size: .875rem; opacity: .9; }

.availability-result.is-available { background: var(--ok-100); border-color: #b6e3cc; color: var(--ok-700); }
.availability-result.is-partial { background: var(--warn-100); border-color: #f0d9a8; color: var(--warn-700); }
.availability-result.is-unavailable { background: var(--bad-100); border-color: #f2c4c6; color: var(--bad-700); }
.availability-result.is-on_request { background: var(--info-100); border-color: #bcd6ec; color: var(--info-700); }

.availability-notices {
    margin: var(--space-2) 0 0;
    padding-left: 1.1rem;
    font-size: .8125rem;
}

/* --------------------------------------------------------- Staffelpreise */

/*
 * Vier Spalten passen auf einem Handy nicht mehr nebeneinander, ohne dass die
 * Beträge umbrechen. Statt eine Spalte zu verstecken – „Pro Miettag" ist die
 * einzige, die sich zwischen Stufen vergleichen lässt – scrollt die Tabelle
 * dort waagerecht, wie die Kategoriezeile in der Kopfzeile.
 */
.tier-table-wrap {
    overflow-x: auto;
    margin: 0 calc(var(--space-1) * -1);
    padding: 0 var(--space-1);
}

.tier-table {
    width: 100%;
    min-width: 280px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9375rem;
}

/*
 * Die Überschriften dürfen umbrechen: „Preis gesamt" auf zwei Zeilen kostet
 * einmal Höhe, ein erzwungenes `nowrap` dagegen so viel Breite, dass die
 * Tabelle auf dem Handy schon in der Kopfzeile zu scrollen anfängt.
 */
.tier-table th {
    padding: 0 var(--space-3) var(--space-2);
    text-align: left;
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
    border-bottom: 1px solid var(--ink-200);
}

.tier-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--ink-100);
    vertical-align: middle;
}

.tier-table th:first-child, .tier-table td:first-child { padding-left: var(--space-2); }
.tier-table th:last-child, .tier-table td:last-child { padding-right: var(--space-2); }

.tier-table tr:last-child td { border-bottom: 0; }
.tier-table th.num, .tier-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Die Zeile hebt sich beim Überfahren ab – sie ist die Einheit, die gelesen
   wird, und über vier Spalten verliert man sonst leicht die Spur. */
.tier-table tbody tr:hover td { background: var(--ink-50); }

.tier-name {
    display: block;
    font-weight: 600;
    color: var(--ink-800);
}

/* Ab wann die Stufe gilt – unter ihrem Namen, nicht an seiner Stelle. */
.tier-condition {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    color: var(--ink-500);
}

/*
 * Der Preis der ganzen Stufe: die Zahl, nach der gefragt wird. Beträge und die
 * Angabe darunter brechen nie um – „10,00" über „€" ist keine Zahl mehr, die
 * man liest. Wird es zu eng, scrollt lieber die Tabelle.
 */
.tier-total {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ink-900);
    letter-spacing: -.01em;
}

/* Wofür dieser Betrag gilt – „3 Miettage". */
.tier-note {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    white-space: nowrap;
    color: var(--ink-500);
}

.tier-per-day {
    display: block;
    white-space: nowrap;
    color: var(--ink-700);
}

/* Auf grünem Grund tragen die Nebenzeilen die Farbe der Zeile mit; graue
   Schrift darauf sähe nach abgeschaltet aus. */
.tier-table tr.is-active td,
.tier-table tbody tr.is-active:hover td {
    background: var(--ok-100);
    color: var(--ok-700);
    border-bottom-color: #c3e6d3;
}

.tier-table tr.is-active .tier-name,
.tier-table tr.is-active .tier-total,
.tier-table tr.is-active .tier-per-day { color: inherit; }
.tier-table tr.is-active .tier-condition,
.tier-table tr.is-active .tier-note { color: inherit; opacity: .75; }

.tier-table tr.is-active td:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    box-shadow: inset 3px 0 0 var(--ok-500);
}

.tier-table tr.is-active td:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/*
 * Auf dem Telefon zählt jede Spalte: Vier davon passen nur dann ohne Scrollen
 * nebeneinander, wenn Schrift und Abstände mitgehen. Weggelassen wird keine –
 * „Pro Miettag" ist die einzige Zahl, die sich zwischen Stufen mit
 * verschiedenen Mindestdauern vergleichen lässt, und die Ersparnis ist der
 * Grund, warum überhaupt jemand hinsieht.
 */
@media (max-width: 560px) {
    .tier-table { font-size: .8125rem; }
    .tier-table th { font-size: .625rem; padding-bottom: var(--space-2); }
    .tier-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .tier-table th, .tier-table td { padding-left: var(--space-1); padding-right: var(--space-1); }
    .tier-table th:first-child, .tier-table td:first-child { padding-left: var(--space-2); }
    .tier-table th:last-child, .tier-table td:last-child { padding-right: var(--space-2); }
    .tier-total { font-size: .9375rem; }
    .tier-condition, .tier-note { font-size: .6875rem; }
}

/* Durchgestrichener Grundpreis neben dem Staffelpreis */
.price-was {
    font-size: .9375rem;
    color: var(--ink-400);
    text-decoration: line-through;
}

.tier-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--accent-100);
    color: var(--accent-700);
    font-size: .8125rem;
    line-height: 1.5;
}

.tier-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Staffelzeilen im Artikelformular */
.tier-rows { width: 100%; min-width: 480px; border-collapse: collapse; }

.tier-rows th {
    padding: 0 var(--space-2) var(--space-2);
    text-align: left;
    font-size: .75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
}

.tier-rows td { padding: 4px var(--space-2); vertical-align: top; }
.tier-rows td input { font-size: .875rem; padding: 8px 10px; }
.tier-rows .col-num { width: 110px; }
.tier-rows .col-actions { width: 44px; text-align: right; }
.tier-rows tr.is-removed { display: none; }

/* ------------------------------------------------------------------ Print */

@media print {
    body { background: var(--white); }
    .no-print { display: none !important; }
}

/* -------------------------------------------------------- Suchvorschläge */

.search-field,
.quick-add { position: relative; }

.suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
}

.suggestions:empty { display: none; }

.suggestion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 10px var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--ink-100);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ink-800);
    text-decoration: none;
}

.suggestion:last-child { border-bottom: 0; }
.suggestion:hover,
.suggestion.is-active { background: var(--brand-50); text-decoration: none; }

.suggestion img,
.suggestion .s-thumb-empty {
    width: 42px; height: 32px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex: none;
    background: var(--ink-100);
}

.suggestion .s-body { flex: 1; min-width: 0; }
.suggestion .s-name { display: block; font-weight: 550; font-size: .9375rem; }

.suggestion .s-excerpt {
    display: block;
    font-size: .8125rem;
    color: var(--ink-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion .s-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: .75rem;
    color: var(--ink-500);
    margin-top: 2px;
}

/* Trennpunkt zwischen Kategorie, Standort und Übergabeart. */
.suggestion .s-meta span + span::before { content: "·"; margin-right: 10px; color: var(--ink-300); }

.suggestion .s-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: none;
    text-align: right;
}

.suggestion .s-price { font-size: .9375rem; font-weight: 650; color: var(--ink-900); white-space: nowrap; }
.suggestion .s-price-note,
.suggestion .s-stock { font-size: .6875rem; color: var(--ink-500); white-space: nowrap; }

.suggestion .s-availability {
    font-size: .6875rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.suggestion .s-availability.is-available { background: var(--ok-100); color: var(--ok-700); }
.suggestion .s-availability.is-partial { background: var(--warn-100); color: var(--warn-700); }
.suggestion .s-availability.is-unavailable { background: var(--bad-100); color: var(--bad-700); }
.suggestion .s-availability.is-on_request { background: var(--info-100); color: var(--info-700); }

/*
 * Auf der Startseite darf die Liste großzügiger sein – dort ist sie das
 * eigentliche Suchergebnis und nicht nur eine Abkürzung.
 */
.suggestions-rich .suggestion { padding: var(--space-3) var(--space-4); gap: var(--space-4); }

.suggestions-rich .suggestion img,
.suggestions-rich .suggestion .s-thumb-empty { width: 72px; height: 54px; }

.suggestions-rich .suggestion .s-name { font-size: 1rem; }

@media (max-width: 560px) {
    .suggestion .s-excerpt { display: none; }
    .suggestions-rich .suggestion img,
    .suggestions-rich .suggestion .s-thumb-empty { width: 48px; height: 40px; }
}

/* ------------------------------------------------------------ Fließtext */

/*
 * Ausgabe der Editor-Inhalte. Dieselben Regeln gelten im Editor selbst, damit
 * beim Schreiben zu sehen ist, was später auf der Seite steht.
 */
.prose { font-size: .9688rem; color: var(--ink-700); line-height: 1.7; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin-bottom: var(--space-3); }

.prose h2, .prose h3, .prose h4 {
    color: var(--ink-900);
    line-height: 1.3;
    margin: var(--space-5) 0 var(--space-2);
}

.prose h2 { font-size: 1.1875rem; }
.prose h3 { font-size: 1.0625rem; }
.prose h4 { font-size: .9688rem; }
.prose > :first-child { margin-top: 0; }

.prose ul, .prose ol { margin: 0 0 var(--space-3) 1.25rem; }
.prose li { margin-bottom: 4px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose blockquote {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid var(--brand-500);
    background: var(--ink-50);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose a { color: var(--brand-700); text-decoration: underline; }
.prose strong { color: var(--ink-900); font-weight: 650; }

/* --------------------------------------------------------- Dispositionshinweis */

/*
 * Steht über dem Vorgang – im Kundenportal wie in der Verwaltung. Bewusst
 * ruhiger als eine Warnung: es ist eine Information, kein Problem.
 */
.disposition-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--ink-200);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--radius);
    background: var(--ink-50);
    font-size: .9375rem;
}

.disposition-note > svg { color: var(--brand-600); margin-top: 3px; }

/* ------------------------------------------------------ Uhrzeitauswahl */

/*
 * Das native Zeitfeld mit einer Auswahlliste daneben. Der eigene Knopf ersetzt
 * das Browsersymbol – zwei Uhren nebeneinander wären albern –, das Feld selbst
 * bleibt aber ein ganz normales `input[type="time"]`: tippbar, geprüft, und auf
 * dem Handy mit dem gewohnten Auswahlrad.
 */
.time-field { position: relative; }

.time-field input[type="time"] { padding-right: 40px; }

/* Das Browsersymbol weicht dem eigenen Knopf – aber nur dort, wo es ihn gibt. */
.time-field input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

.time-field-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-500);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.time-field-toggle svg { width: 18px; height: 18px; }
.time-field-toggle:hover { background: var(--ink-100); color: var(--ink-700); }
.time-field-toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.time-field-toggle[aria-expanded="true"] { background: var(--brand-50); color: var(--brand-700); }

.time-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 128px;
    max-height: 232px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.time-menu button {
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-700);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.time-menu button:hover { background: var(--ink-100); color: var(--ink-900); }
.time-menu button:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }

.time-menu button.is-active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
}

/* Der Rollbalken der Liste soll nicht schwerer wiegen als die Liste selbst. */
.time-menu::-webkit-scrollbar { width: 8px; }
.time-menu::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; }
.time-menu::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }