/* ===========================================================================
   dtf.tirol - Theme
   ---------------------------------------------------------------------------
   Laedt NACH uikit.min.css und stellt die genutzten UIkit-Komponenten auf die
   Marke um. UIkit 3 ist Less-basiert und ohne Build-Schritt nicht neu
   kompilierbar - deshalb diese Override-Schicht.

   Saemtliche Gestaltungswerte stehen als Custom Properties in :root.
   Wer die Optik anpassen will, aendert ausschliesslich diesen Block.
   =========================================================================== */

:root {
    /* --- Marke. Werte direkt aus logo-dtf-tirol.svg entnommen. ----------- */
    --c-accent:          #fd0489;   /* Wortmarke "tirol", Icon-Rahmen        */
    --c-accent-alt:      #fb0888;   /* zweiter Magentaton im Logo            */
    --c-accent-dark:     #d1036f;   /* Hover-/Aktiv-Zustand                  */
    --c-accent-soft:     #fff0f7;   /* Flaeche hinter Akzenten               */
    --c-ink:             #020202;   /* Wortmarke "DTF", Fliesstext           */

    /* --- Graustufen ------------------------------------------------------ */
    --c-text:            #1c1d21;
    --c-text-muted:      #6b6d75;
    --c-text-faint:      #9a9ca3;
    --c-line:            #e3e4e8;
    --c-line-strong:     #c9cbd1;
    --c-surface:         #ffffff;
    --c-surface-sunken:  #f6f7f9;
    --c-surface-hover:   #f0f1f4;

    /* --- Signalfarben ---------------------------------------------------- */
    --c-success:         #128a5a;
    --c-success-soft:    #e8f6f0;
    --c-warning:         #a86500;
    --c-warning-soft:    #fff6e6;
    --c-danger:          #c0392b;
    --c-danger-soft:     #fdeceb;

    /* --- Schrift. Technische Grotesk, rein systemseitig, kein CDN. ------- */
    --font-sans:         "Inter", "Helvetica Neue", -apple-system,
                         BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
                         sans-serif;
    --font-mono:         ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                         Consolas, monospace;

    --fs-xs:             0.75rem;    /* 12px - Hilfstexte                    */
    --fs-sm:             0.8125rem;  /* 13px - Labels, Meta                  */
    --fs-base:           0.9375rem;  /* 15px - Fliesstext                    */
    --fs-md:             1.0625rem;  /* 17px                                 */
    --fs-lg:             1.375rem;   /* 22px - Abschnittstitel               */
    --fs-xl:             1.875rem;   /* 30px                                 */
    --fs-hero:           2.75rem;    /* 44px - Hero                          */

    --lh-tight:          1.15;
    --lh-base:           1.55;

    --fw-normal:         400;
    --fw-medium:         500;
    --fw-bold:           700;

    /* Versalien mit Sperrung - fuer Labels wie "MOTIV-POSITION" */
    --ls-caps:           0.08em;

    /* --- Abstaende ------------------------------------------------------- */
    --sp-1:              0.25rem;
    --sp-2:              0.5rem;
    --sp-3:              0.75rem;
    --sp-4:              1rem;
    --sp-5:              1.5rem;
    --sp-6:              2rem;
    --sp-7:              3rem;
    --sp-8:              4rem;

    /* --- Radien ---------------------------------------------------------- */
    --r-sm:              4px;
    --r-md:              8px;
    --r-lg:              14px;
    --r-pill:            999px;

    /* --- Schatten -------------------------------------------------------- */
    --sh-sm:             0 1px 2px rgba(2, 2, 2, 0.06);
    --sh-md:             0 2px 10px rgba(2, 2, 2, 0.07);
    --sh-lg:             0 8px 30px rgba(2, 2, 2, 0.10);
    --sh-focus:          0 0 0 3px rgba(253, 4, 137, 0.28);

    /* --- Masse ----------------------------------------------------------- */
    --control-h:         42px;
    --page-max:          1180px;
    --border-w:          1px;
    --transition:        140ms ease;
}

/* ===========================================================================
   Grundlagen
   =========================================================================== */

/* „hidden" muss staerker sein als jedes display aus einer Klasse. Ohne das
   bleibt ein ausgeblendetes Element sichtbar, sobald irgendwo weiter unten
   eine Klasse display setzt - gleiche Spezifitaet, spaetere Regel gewinnt. */
[hidden] {
    display: none !important;
}

html {
    font-family: var(--font-sans);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--c-surface-sunken);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-normal);
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4 {
    font-family: var(--font-sans);
    color: var(--c-ink);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
    letter-spacing: -0.015em;
}

h1, .uk-h1 { font-size: var(--fs-xl); }
h2, .uk-h2 { font-size: var(--fs-lg); }
h3, .uk-h3 { font-size: var(--fs-md); }

a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus {
    color: var(--c-accent-dark);
    text-decoration: underline;
}

/* Fokus muss immer sichtbar sein - Tastaturbedienung. */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Sperrsatz-Label, z. B. "MOTIV-POSITION" */
.dtf-eyebrow {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* ===========================================================================
   UIkit-Overrides: Buttons
   =========================================================================== */

.uk-button {
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    text-transform: none;
    line-height: calc(var(--control-h) - 2px);
    height: var(--control-h);
    padding: 0 var(--sp-5);
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition);
}

.uk-button-primary {
    background-color: var(--c-accent);
    color: #fff;
    border: var(--border-w) solid var(--c-accent);
}

.uk-button-primary:hover,
.uk-button-primary:focus {
    background-color: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
    color: #fff;
}

.uk-button-primary:active,
.uk-button-primary.uk-active {
    background-color: var(--c-accent-dark);
}

.uk-button-default {
    background-color: var(--c-surface);
    color: var(--c-text);
    border: var(--border-w) solid var(--c-line-strong);
}

.uk-button-default:hover,
.uk-button-default:focus {
    background-color: var(--c-surface-hover);
    border-color: var(--c-text-muted);
    color: var(--c-text);
}

.uk-button-danger {
    background-color: var(--c-danger);
    border: var(--border-w) solid var(--c-danger);
}

.uk-button-text {
    color: var(--c-accent);
    text-transform: none;
    font-size: var(--fs-base);
}

.uk-button-text::before {
    border-bottom-color: var(--c-accent);
}

.uk-button-link {
    color: var(--c-accent);
    text-transform: none;
}

.uk-button-small {
    height: 34px;
    line-height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
}

.uk-button-large {
    height: 52px;
    line-height: 50px;
    padding: 0 var(--sp-6);
    font-size: var(--fs-md);
}

/* ===========================================================================
   UIkit-Overrides: Formulare
   =========================================================================== */

.uk-input,
.uk-select,
.uk-textarea {
    background-color: var(--c-surface);
    color: var(--c-text);
    border: var(--border-w) solid var(--c-line-strong);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.uk-input,
.uk-select:not([multiple]):not([size]) {
    height: var(--control-h);
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    background-color: var(--c-surface);
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
    outline: none;
}

.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
    background-color: var(--c-surface-sunken);
    color: var(--c-text-faint);
    border-color: var(--c-line);
}

.uk-form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text);
    margin-bottom: var(--sp-1);
    display: block;
}

.uk-form-danger,
.uk-input.uk-form-danger:focus {
    border-color: var(--c-danger);
}

.uk-form-success {
    border-color: var(--c-success);
}

/* Hilfstext unter einem Feld */
.dtf-hint {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
}

.uk-checkbox,
.uk-radio {
    border-color: var(--c-line-strong);
}

.uk-checkbox:checked,
.uk-radio:checked,
.uk-checkbox:indeterminate {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
}

.uk-checkbox:focus,
.uk-radio:focus {
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

/* ===========================================================================
   UIkit-Overrides: Karten, Flaechen
   =========================================================================== */

.uk-card-default {
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    color: var(--c-text);
}

.uk-card-title {
    font-size: var(--fs-lg);
    color: var(--c-ink);
}

.uk-card-body {
    padding: var(--sp-5);
}

@media (min-width: 1200px) {
    .uk-card-body { padding: var(--sp-5); }
}

.uk-card-small > .uk-card-body {
    padding: var(--sp-4);
}

/* ===========================================================================
   UIkit-Overrides: Meldungen, Marken, Tabellen, Navigation
   =========================================================================== */

.uk-alert {
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface-sunken);
    color: var(--c-text);
    border: var(--border-w) solid var(--c-line);
}

.uk-alert-primary {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
    color: var(--c-text);
}

.uk-alert-success {
    background: var(--c-success-soft);
    border-color: var(--c-success);
    color: var(--c-text);
}

.uk-alert-warning {
    background: var(--c-warning-soft);
    border-color: var(--c-warning);
    color: var(--c-text);
}

.uk-alert-danger {
    background: var(--c-danger-soft);
    border-color: var(--c-danger);
    color: var(--c-text);
}

.uk-label {
    background: var(--c-ink);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    padding: 2px var(--sp-2);
}

.uk-label-success { background: var(--c-success); }
.uk-label-warning { background: var(--c-warning); }
.uk-label-danger  { background: var(--c-danger); }

.uk-table {
    font-size: var(--fs-base);
}

.uk-table th {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.uk-table td,
.uk-table th {
    border-color: var(--c-line);
}

.uk-table-divider > :not(:first-child) > tr:first-child > *,
.uk-table-divider > :first-child > tr:not(:first-child) > * {
    border-top-color: var(--c-line);
}

.uk-tab > * > a {
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0;
}

.uk-tab > .uk-active > a {
    color: var(--c-ink);
    border-color: var(--c-accent);
}

.uk-tab::before {
    border-bottom-color: var(--c-line);
}

.uk-progress {
    height: 6px;
    border-radius: var(--r-pill);
    background-color: var(--c-line);
}

.uk-progress::-webkit-progress-value { background-color: var(--c-accent); }
.uk-progress::-moz-progress-bar       { background-color: var(--c-accent); }

.uk-text-primary  { color: var(--c-accent) !important; }
.uk-text-muted    { color: var(--c-text-muted) !important; }
.uk-text-danger   { color: var(--c-danger) !important; }
.uk-text-success  { color: var(--c-success) !important; }
.uk-text-warning  { color: var(--c-warning) !important; }

.uk-background-muted { background-color: var(--c-surface-sunken) !important; }

hr, .uk-hr {
    border-top-color: var(--c-line);
}

/* ===========================================================================
   Eigene Bausteine
   =========================================================================== */

.dtf-page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

/* --- Kopfzeile ---------------------------------------------------------- */
.dtf-header {
    background: var(--c-surface);
    border-bottom: var(--border-w) solid var(--c-line);
}

.dtf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    /* Höhe folgt dem Logo: 200 px breit sind bei diesem Seitenverhältnis
       rund 75 px hoch, dazu 16 px Luft nach oben und unten. */
    min-height: 107px;
}

/* Abstand zwischen den Navigationsknoepfen und zum Avatar. */
.dtf-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Der Avatar bekommt etwas mehr Luft, damit er als eigener Bereich liest. */
.dtf-nav .dtf-avatar {
    margin-left: var(--sp-2);
}

/* Das Logo wird über die Breite bemessen - die Höhe ergibt sich aus dem
   Seitenverhältnis der Zeichnung (1847 × 694, also etwa 2,66 : 1).
   200 px Breite sind rund 75 px Höhe. */
.dtf-logo {
    flex: 0 0 auto;
    line-height: 0;
}

.dtf-logo img,
.dtf-logo svg {
    width: 200px;
    height: auto;
    display: block;
}

/* **Wo die Kopfzeile umschaltet.** Oberhalb stehen die Knöpfe in der Leiste,
   darunter liegen sie hinter dem Burger. Die Grenze liegt bei 700 px und nicht
   bei UIkits 640: Mit vier Knöpfen - zwei Sparten, Bibliothek und
   Bestellungen - lief die Zeile knapp 30 px über den rechten Rand, und eine
   Seite, die sich waagrecht schieben lässt, ist kaputt. Gemessen, nicht
   geschätzt. */
@media (max-width: 699px) {
    /* Der Elternteil steht mit im Wahlspruch, weil weiter unten eine Regel
       fuer .uk-button die Anzeige noch einmal setzt - und bei gleichem
       Gewicht gewinnt die spaetere. */
    .dtf-nav .dtf-nav__weit {
        display: none;
    }
}

@media (min-width: 700px) {
    .dtf-nav .dtf-nav__schmal {
        display: none;
    }
}

/* Auf schmalen Geräten teilt sich das Logo die Zeile mit der Navigation -
   dort etwas kleiner, sonst bleibt für die Knöpfe nichts übrig. */
@media (max-width: 639px) {
    .dtf-header__inner {
        min-height: 80px;
    }

    .dtf-logo img,
    .dtf-logo svg {
        width: 130px;
    }
}

/* --- Warenkorbbalken unter der Hauptnavigation --------------------------- */
.dtf-cartbar {
    background: var(--c-accent-soft);
    border-bottom: var(--border-w) solid var(--c-accent);
    position: sticky;
    top: 0;
    z-index: 980;   /* unter UIkit-Dialogen (1010), ueber dem Seiteninhalt */
}

.dtf-cartbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

.dtf-cartbar__text,
.dtf-cartbar__aktionen {
    margin: 0;
}

.dtf-cartbar__text {
    font-size: var(--fs-base);
    color: var(--c-text);
}

/* --- Benutzermenue ------------------------------------------------------- */
.dtf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition);
}

.dtf-avatar:hover,
.dtf-avatar:focus {
    background: var(--c-accent-dark);
    color: #fff;
    text-decoration: none;
}

/* Abgemeldet: das Anmeldezeichen. Kraeftig wie der Avatar, damit der Weg
   hinein der auffaelligste auf der Seite bleibt. */
.dtf-avatar--gast {
    background: var(--c-accent);
    color: #fff;
    border: 0;
}

.dtf-avatar--gast:hover,
.dtf-avatar--gast:focus {
    background: var(--c-accent-dark);
    color: #fff;
}

/* Solange UIkit das Aufklappmenü noch nicht übernommen hat, bleibt es
   verborgen - sonst hängt es beim Laden kurz sichtbar in der Kopfzeile. */
[uk-dropdown]:not(.uk-dropdown) {
    display: none;
}

.dtf-usermenu {
    min-width: 220px;
    padding: var(--sp-3);
}

.dtf-usermenu__kopf {
    padding: 0 var(--sp-2) var(--sp-2);
    border-bottom: var(--border-w) solid var(--c-line);
    margin-bottom: var(--sp-2);
    line-height: 1.35;
}

.dtf-usermenu__name {
    display: block;
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}

.dtf-usermenu__mail {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    word-break: break-all;
}

.dtf-usermenu .uk-nav > li > a {
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--c-text);
}

.dtf-usermenu .uk-nav > li > a:hover {
    background: var(--c-surface-hover);
    color: var(--c-ink);
    text-decoration: none;
}

/* Abmelden ist ein Formular, soll aber wie ein Menuepunkt aussehen. */
.dtf-usermenu__abmelden {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    font: inherit;
    color: var(--c-text);
    cursor: pointer;
}

.dtf-usermenu__abmelden:hover {
    background: var(--c-surface-hover);
    color: var(--c-ink);
}

/* --- Fusszeile ---------------------------------------------------------- */
.dtf-footer {
    background: var(--c-surface);
    border-top: var(--border-w) solid var(--c-line);
    margin-top: var(--sp-8);
    padding: var(--sp-6) 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* --- Dropzone ----------------------------------------------------------- */
/* Das Uploadfeld war eine grosse leere Flaeche. Als flache Zeile nimmt es
   weniger Platz und bleibt trotzdem ein grosses Klickziel - die ganze Zeile
   ist empfindlich, nicht nur der Text. */
.dtf-dropzone {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    border: 2px dashed var(--c-line-strong);
    border-radius: var(--r-md);
    background: var(--c-surface);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

/* Das Pluszeichen ersetzt das frühere Sinnbild in der Mitte. */
.dtf-dropzone::before {
    content: "+";
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--c-surface-sunken);
    color: var(--c-accent);
    font-size: 1.375rem;
    line-height: 1;
}

.dtf-dropzone:hover,
.dtf-dropzone:focus-visible {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.dtf-dropzone.is-dragover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.dtf-dropzone__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
    margin: 0;
}

.dtf-dropzone__hint {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.dtf-dropzone.is-dragover::before,
.dtf-dropzone:hover::before {
    background: #fff;
}

/* --- Zahlenfeld mit Steppern (Masse, Menge) ----------------------------- */
.dtf-stepper {
    display: flex;
    align-items: stretch;
    background: var(--c-surface-sunken);
    border-radius: var(--r-md);
    padding: 3px;
    max-width: 190px;
}

/* Auf dem Telefon stehen drei Schrittfelder nebeneinander - dann muss jedes
   mit rund hundert Pixeln auskommen. Die Pfeile werden schmaler, die Einheit
   entfaellt: Was in Zentimetern gemessen wird, steht in der Beschriftung
   darueber und im Rest der Seite. */
@media (max-width: 639px) {
    .dtf-stepper {
        padding: 2px;
    }

    .dtf-stepper__btn {
        width: 22px;
    }

    .dtf-stepper__unit {
        display: none;
    }

    .dtf-stepper .uk-input {
        padding-left: 2px;
        padding-right: 2px;
    }
}

.dtf-stepper__btn {
    flex: 0 0 auto;
    width: 32px;
    border: 0;
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--fs-md);
    line-height: 1;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background-color var(--transition), color var(--transition);
}

.dtf-stepper__btn:hover:not(:disabled) {
    background: var(--c-surface-hover);
    color: var(--c-ink);
}

.dtf-stepper__btn:disabled {
    color: var(--c-text-faint);
    cursor: not-allowed;
}

.dtf-stepper .uk-input {
    flex: 1 1 auto;
    text-align: center;
    border-color: transparent;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.dtf-stepper .uk-input:focus {
    background: var(--c-surface);
    border-color: var(--c-accent);
}

/* Einheit im Feld, z. B. "mm" */
.dtf-stepper__unit {
    align-self: center;
    padding-right: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* Kettensymbol zwischen Breite und Hoehe */
.dtf-lock {
    align-self: center;
    color: var(--c-text-faint);
    padding: 0 var(--sp-2);
}

/* --- Position im Konfigurator ------------------------------------------- */
.dtf-position {
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.dtf-position__no {
    display: inline-block;
    background: var(--c-surface-sunken);
    color: var(--c-text-muted);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: 2px var(--sp-2);
    margin-right: var(--sp-2);
}

.dtf-position__add {
    width: 100%;
    border: 2px dashed var(--c-line-strong);
    border-radius: var(--r-lg);
    background: transparent;
    color: var(--c-text);
    padding: var(--sp-5);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition),
                color var(--transition);
}

.dtf-position__add:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
}

/* Vorschaubild eines Motivs - Karomuster zeigt Transparenz an. */
.dtf-preview {
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-md);
    background-color: var(--c-surface);
    background-image:
        linear-gradient(45deg, var(--c-surface-sunken) 25%, transparent 25%),
        linear-gradient(-45deg, var(--c-surface-sunken) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--c-surface-sunken) 75%),
        linear-gradient(-45deg, transparent 75%, var(--c-surface-sunken) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    object-fit: contain;
}

/* --- Statusanzeige ------------------------------------------------------ */
.dtf-status {
    display: inline-block;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    padding: 3px var(--sp-3);
}

/* Bestellstatus: Neu -> Datenprüfung -> Produktion -> Versandt ->
   Abgeschlossen, daneben Storniert. */
.dtf-status--neu           { background: var(--c-accent-soft);   color: var(--c-accent-dark); }
.dtf-status--datenpruefung { background: var(--c-surface-hover); color: var(--c-text-muted); }
.dtf-status--produktion    { background: var(--c-warning-soft);  color: var(--c-warning); }
.dtf-status--versandt      { background: var(--c-success-soft);  color: var(--c-success); }
.dtf-status--storniert     { background: var(--c-danger-soft);   color: var(--c-danger); }

/* Abgeschlossen ist der Endstand - deutlicher heben. */
.dtf-status--abgeschlossen {
    background: var(--c-success);
    color: #fff;
}

/* Frühere Werte tauchen im Statusverlauf weiterhin auf. */
.dtf-status--verrechnet,
.dtf-status--bezahlt,
.dtf-status--erledigt      { background: var(--c-surface-hover); color: var(--c-text-muted); }

/* Zahlungsstand: eigene, ruhigere Reihe - er steht neben dem Bestellstatus
   und soll ihn nicht überschreien. „Offen" wird gar nicht erst gezeigt. */
.dtf-zahlstand {
    border: var(--border-w) solid currentColor;
    background: transparent;
}

.dtf-zahlstand--verrechnet { color: var(--c-text-muted); }
.dtf-zahlstand--bezahlt    { color: var(--c-success); }
.dtf-zahlstand--storniert,
.dtf-zahlstand--gutschrift { color: var(--c-danger); }

/* Bleibt beim Scrollen stehen - erst ab Zweispaltigkeit sinnvoll. */
@media (min-width: 1200px) {
    .dtf-sticky {
        position: sticky;
        /* Abstand zum Warenkorbbalken, der ebenfalls klebt. */
        top: var(--sp-4);
    }
}

/* --- Summenblock -------------------------------------------------------- */
.dtf-summe th {
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-text);
    font-size: var(--fs-base);
}

.dtf-summe .uk-font-normal {
    font-weight: var(--fw-normal);
}

.dtf-summe td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Nettosumme abgesetzt, Gesamtbetrag hervorgehoben. */
.dtf-summe__zwischen th,
.dtf-summe__zwischen td {
    border-top: var(--border-w) solid var(--c-line-strong);
}

.dtf-summe__gesamt th,
.dtf-summe__gesamt td {
    border-top: 2px solid var(--c-ink);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
}

/* Durchgestrichener Normalpreis neben "Ihr Preis". */
.dtf-preis-alt {
    color: var(--c-text-muted);
    margin-right: var(--sp-2);
}

.dtf-preis-ihr {
    color: var(--c-accent-dark);
    font-weight: var(--fw-bold);
}

/* =========================================================================
   Adminbereich
   -------------------------------------------------------------------------
   Bewusst anders als der Shop: dunkle Kopfzeile, dichtere Darstellung. Wer
   hier arbeitet, soll auf den ersten Blick sehen, wo er ist.
   ========================================================================= */

.dtf-admin {
    background: var(--c-surface-sunken);
}

/* --- Kopfzeile ---------------------------------------------------------- */
/* Die Adminleiste trägt die Markenfarbe. Auf dem kräftigen Magenta ist reines
   Weiss Pflicht - abgeblendete Schrift wäre dort nicht mehr gut lesbar. */
.dtf-adminkopf {
    background: var(--c-accent);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 980;
}

/* Eine Reihe: Logo links, Menü in der Mitte, Konto rechts. Kein Umbruch -
   eine Kopfzeile, die je nach Fensterbreite zwei Zeilen hoch wird, verschiebt
   den ganzen Inhalt darunter. Wird es eng, scrollt das Menü in sich. */
.dtf-adminkopf__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: nowrap;
    padding: var(--sp-2) var(--sp-4);
}

/* Logo und Konto teilen sich den Platz links und rechts zu gleichen Teilen -
   erst dann steht das Menü wirklich in der Mitte der Leiste und nicht nur in
   der Mitte des Restes. */
.dtf-adminkopf__marke {
    display: inline-flex;
    align-items: center;
    /* Kein min-width: 0 - sonst schrumpft der Kasten unter das Logo und das
       Logo mit ihm. Die Marke gibt die Breite vor, den Rest teilt das Menü. */
    flex: 1 1 0;
    gap: var(--sp-2);
    color: #fff;
    text-decoration: none;
    font-weight: var(--fw-bold);
}

.dtf-adminkopf__marke img {
    height: 48px;
    width: auto;
    /* Nicht stauchen lassen: Ein Logo, das schmaler gedrueckt wird, ist ein
       anderes Logo. */
    flex: 0 0 auto;
    max-width: none;
    /* Das mitgelieferte Logo ist fuer helle Flaechen gezeichnet - auf der
       farbigen Leiste wird es vollflaechig weiss. */
    filter: brightness(0) invert(1);
}

/* Eine eigens hochgeladene negative Fassung bleibt, wie sie ist. */
.dtf-adminkopf__marke img.dtf-logo--eigen {
    filter: none;
}

.dtf-adminkopf__rechts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 0;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}

/* Auf der Markenfarbe kehrt das Zeichen um: weisser Grund, farbige
   Initialen. Magenta auf Magenta verschwindet. */
.dtf-adminkopf__rechts .dtf-avatar {
    background: #fff;
    color: var(--c-accent-dark);
}

.dtf-adminkopf__rechts .dtf-avatar:hover,
.dtf-adminkopf__rechts .dtf-avatar:focus {
    background: rgba(255, 255, 255, 0.85);
    color: var(--c-accent-dark);
}

.dtf-adminkopf__rechts .dtf-avatar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Navigation --------------------------------------------------------- */
.dtf-adminnav {
    display: flex;
    gap: var(--sp-1);
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

/* Der Balken zum Scrollen wäre auf der Markenfarbe ein Fremdkörper. */
.dtf-adminnav::-webkit-scrollbar {
    display: none;
}

.dtf-adminnav__punkt {
    flex: 0 0 auto;
}

.dtf-adminnav__punkt {
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

/* Weisse Hinterlegung beim Ueberfahren - dieselbe Sprache wie der aktive
   Punkt, nur ohne dessen Dauerhaftigkeit. */
.dtf-adminnav__punkt:hover,
.dtf-adminnav__punkt:focus-visible {
    background: #fff;
    color: var(--c-accent-dark);
    text-decoration: none;
}

.dtf-adminnav__punkt:hover .dtf-melder,
.dtf-adminnav__punkt:focus-visible .dtf-melder {
    background: var(--c-accent);
    color: #fff;
}

/* Der aktive Punkt dreht die Farben um - auf farbigem Grund ist das
   deutlicher als eine weitere Tönung derselben Farbe. */
.dtf-adminnav__punkt.is-aktiv {
    background: #fff;
    color: var(--c-accent-dark);
}

/* Melder: was liegen geblieben ist. Weiss auf Magenta ist im Kopfbalken das
   einzige, was sich noch abhebt - eine weitere Tönung der Markenfarbe ginge
   dort unter. */
.dtf-adminnav__punkt {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.dtf-melder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--c-accent-dark);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* Auf dem aktiven Punkt ist der Grund schon weiss - dort kehrt der Melder um. */
.dtf-adminnav__punkt.is-aktiv .dtf-melder {
    background: var(--c-accent);
    color: #fff;
}

/* --- Burger --------------------------------------------------------------
   Drei Striche, nichts weiter. Auf dem Telefon liegt dahinter, was auf dem
   Bildschirm nebeneinander steht. */
.dtf-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.dtf-burger__strich {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

/* Im Shop steht der Burger auf hellem Grund, im Admin auf der Markenfarbe. */
.dtf-header .dtf-burger {
    color: var(--c-ink);
}

.dtf-adminkopf .dtf-burger {
    color: #fff;
}

.dtf-header .dtf-burger:hover,
.dtf-header .dtf-burger:focus-visible {
    background: var(--c-surface-hover);
}

.dtf-adminkopf .dtf-burger:hover,
.dtf-adminkopf .dtf-burger:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

/* Die Leiste im Admin gehoert ab Tablet-Breite wieder in die Kopfzeile, der
   Burger verschwindet dann. */
@media (min-width: 960px) {
    .dtf-adminkopf .dtf-burger {
        display: none;
    }
}

@media (max-width: 959px) {
    .dtf-adminnav {
        display: none;
    }
}

.dtf-burgermenue {
    min-width: 220px;
    padding: var(--sp-2);
}

.dtf-burgermenue .uk-nav > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--c-text);
}

.dtf-burgermenue .uk-nav > li > a:hover,
.dtf-burgermenue .uk-nav > li > a:focus-visible {
    background: var(--c-surface-hover);
    color: var(--c-ink);
    text-decoration: none;
}

.dtf-burgermenue .uk-nav > li.uk-active > a {
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    font-weight: var(--fw-medium);
}

/* Sammelpunkte stehen flach: die Überschrift, darunter ihre Punkte. */
.dtf-burgermenue .uk-nav-header {
    padding: var(--sp-3) var(--sp-2) var(--sp-1);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}

/* Der Melder liegt hier auf hellem Grund - dort kehrt er sich um. */
.dtf-burgermenue .dtf-melder {
    background: var(--c-accent);
    color: #fff;
}

/* Kein Eingabefeld ist breiter als sein Kasten. Feste Breiten sind an
   manchen Stellen gewollt - auf einem schmalen Bildschirm ist die Seite
   trotzdem wichtiger als die Wunschbreite. */
input,
select,
textarea {
    max-width: 100%;
}

/* Ein Befehl oder eine Adresse ist ein Wort ohne Leerzeichen - der Browser
   bricht es nicht und schiebt stattdessen die ganze Seite nach rechts.
   `anywhere` erlaubt den Umbruch mitten im Wort, aber nur, wenn es sonst
   nicht passt.

   UIkit setzt auf `code` ausserdem `white-space: nowrap` - das schlaegt jeden
   Umbruch aus, auch den erlaubten. Deshalb hier zurueckgenommen. */
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
    white-space: normal;
}

code,
kbd,
samp,
pre {
    overflow-wrap: anywhere;
}

/* --- Tabellen auf schmalen Bildschirmen ----------------------------------
   Eine Tabelle, die breiter ist als das Fenster, soll in sich scrollen und
   nicht die ganze Seite mitnehmen. Ein waagrecht verschobenes Layout wirkt
   kaputt: Die Kopfzeile rutscht weg, und der Anfang ist nicht mehr zu finden.

   `display: block` macht aus der Tabelle einen Kasten, der scrollen kann -
   die Zeilen darin bleiben eine Tabelle. Bewusst als Regel und nicht als
   Umschlag um jede einzelne Tabelle: Es gibt drei Dutzend davon, und die
   naechste wird sonst wieder vergessen.

   Nur schmal. Am Schreibtisch sollen die Spalten ihre Breite weiterhin aus
   dem Inhalt und der Kastenbreite bekommen. */
@media (max-width: 959px) {
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Steht die Tabelle schon in einem scrollenden Kasten, bleibt sie eine
       Tabelle - zwei Scrollbereiche uebereinander sind eine Falle. */
    .uk-overflow-auto table {
        display: table;
        overflow-x: visible;
    }

    /* Auf schmalen Schirmen passt nicht jede Beschriftung in eine Zeile.
       UIkit haelt den Knopf auf fester Hoehe, die zweite Zeile stand dann
       unter ihm im Freien. Hier waechst er stattdessen mit. */
    .uk-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 40px;
        line-height: 1.4;
        padding-top: 8px;
        padding-bottom: 8px;
        white-space: normal;
    }
}

/* Ist die Motivliste ausgeblendet, nimmt die Endkundenwahl die ganze Zeile -
   ein halbes Feld mit Leere daneben sieht nach einem Fehler aus. Ohne `:has`
   bleibt es bei der halben Breite, kaputt ist dann nichts. */
.dtf-bibwahl:has(> [hidden]) > *:not([hidden]) {
    width: 100%;
}

/* --- Warenkorb in der Kopfzeile ----------------------------------------- */
.dtf-warenkorb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    color: var(--c-ink);
    text-decoration: none;
}

.dtf-warenkorb:hover,
.dtf-warenkorb:focus-visible {
    background: var(--c-surface-hover);
    color: var(--c-ink);
}

/* Die Zahl sitzt auf dem Zeichen, nicht daneben - daneben waere sie ein
   zweites Element und die Kopfzeile eine Reihe mehr. */
.dtf-warenkorb__zahl {
    position: absolute;
    top: 1px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-size: 10px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* --- Sammelpunkt mit Untermenue ----------------------------------------- */

/* Der Aufklapper ist eine Schaltflaeche und muss die Knopfvorgaben des
   Browsers erst wieder ablegen, um wie ein Menuepunkt auszusehen. */
button.dtf-adminnav__punkt {
    background: none;
    border: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Ein kleines Dreieck sagt, dass hier etwas aufgeht - ohne es sieht der Punkt
   aus wie jeder andere und der Klick wirkt wie ein Fehlschlag. */
.dtf-adminnav__pfeil {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.75;
}

.dtf-untermenue {
    min-width: 190px;
    padding: var(--sp-2);
}

.dtf-untermenue .uk-nav > li > a {
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: var(--fs-sm);
}

.dtf-untermenue .uk-nav > li > a:hover,
.dtf-untermenue .uk-nav > li > a:focus-visible {
    background: var(--c-surface-hover);
    color: var(--c-ink);
    text-decoration: none;
}

/* Wo man gerade steht, steht auch im Untermenue. */
.dtf-untermenue .uk-nav > li.uk-active > a {
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    font-weight: var(--fw-medium);
}

/* --- Inhalt und Fusszeile ----------------------------------------------- */
.dtf-adminseite {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4);
}

/* Ein Rhythmus fuer alles, was unmittelbar auf der Seite liegt: Ueberschrift,
   Formular, Raster, Karte.
   Vorher trug jeder Baustein seinen Abstand selbst - und wer einen neuen
   danebenstellte, vergass ihn. Dann klebte ein Knopf am Kasten darunter oder
   eine Raster-Reihe an der naechsten Karte. Der Abstand gehoert zwischen die
   Bausteine, nicht in sie.
   Ausgenommen bleibt, was im Markup ausdruecklich einen eigenen Abstand
   mitbringt (`uk-margin-*`): Eine Absicht, die dort steht, soll hier nicht
   stillschweigend ueberschrieben werden. */
.dtf-adminseite > *:not([class*="uk-margin"]) {
    margin-bottom: var(--sp-5);
}

.dtf-adminseite > *:last-child {
    margin-bottom: 0;
}

/* Eine Karte fuellt ihre Rasterspalte. Bricht in einer Karte der Betrag um,
   sollen die Nachbarn nicht kuerzer dastehen - eine Reihe Kennzahlen mit
   ungleich hohen Kaesten sieht nach Versehen aus. */
.uk-grid > * > .dtf-adminkarte:only-child {
    height: 100%;
}

/* Eine Reihe Karten ist selbst ein Baustein und haelt denselben Abstand nach
   unten wie eine einzelne Karte. UIkit nullt nur den jeweils letzten
   Baustein einer Spalte - eine Reihe mittendrin bekaeme sonst gar keinen,
   und die naechste Karte klebte an der hoechsten Kennzahl.
   Ohne `:has` bleibt es beim bisherigen Verhalten, es geht nichts kaputt. */
.dtf-adminseite .uk-grid:has(> * > .dtf-adminkarte):not([class*="uk-margin"]) {
    margin-bottom: var(--sp-5);
}

.dtf-adminseite .uk-grid:has(> * > .dtf-adminkarte):last-child {
    margin-bottom: 0;
}

.dtf-adminfuss {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-4);
    border-top: var(--border-w) solid var(--c-line);
    font-size: var(--fs-xs);
    color: var(--c-text-faint);
}

/* --- Anmeldung ---------------------------------------------------------- */
/* Die Anmeldung sieht aus wie die des Kunden - heller Grund, dieselbe Karte,
   dasselbe Logo. Der dunkle Sonderfall wirkte wie eine fremde Anwendung, und
   das ist sie nicht: Es ist dieselbe Seite mit anderen Rechten. */
.dtf-admin--anmeldung {
    background: var(--c-surface-sunken);
    color: var(--c-text);
}

.dtf-anmeldung {
    max-width: 26rem;
    margin: 0 auto;
    padding: var(--sp-7) var(--sp-4) var(--sp-8);
}

.dtf-anmeldung__marke {
    display: block;
    text-align: center;
    margin-bottom: var(--sp-5);
}

.dtf-anmeldung__marke img {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* --- Wiederkehrende Bausteine im Admin ---------------------------------- */
.dtf-adminkarte {
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    margin-bottom: var(--sp-4);
}

.dtf-adminkarte__kopf {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--border-w) solid var(--c-line);
}

.dtf-adminkarte__kopf h2 {
    margin: 0;
    font-size: var(--fs-md);
}

.dtf-adminkarte__inhalt {
    padding: var(--sp-5);
}

/* Nachrichtenzeile: Betreff links, Knopf rechts, und auf schmalen Schirmen
   untereinander mit Luecke. */
.dtf-nachrichtzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Nur-Lesen-Huelle: Ein `fieldset` bringt eigene Raender und eine eigene
   Mindestbreite mit - beides muss weg, sonst zerschiesst es das Raster. */
.dtf-nurlesen {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Gesperrte Felder sollen als solche zu erkennen sein, ohne unlesbar zu
   werden - der Wert ist ja der Grund, warum die Seite offen steht. */
.dtf-nurlesen :disabled {
    background: var(--c-surface-sunken);
    color: var(--c-ink);
    opacity: 1;
    cursor: default;
}

.dtf-nurlesen button:disabled {
    display: none;
}

/* Ausgabe eines Wartungslaufs: Maschinentext, darf umbrechen und soll nicht
   die Spalte sprengen. */
.dtf-wartungsausgabe {
    margin: 0;
    padding: var(--sp-3);
    background: var(--c-surface-sunken);
    border-radius: var(--r-sm, 8px);
    font-size: var(--fs-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Archivierte Zeile: vorhanden, aber zurueckgenommen. */
.dtf-archiviert {
    opacity: 0.6;
}

/* Loeschen ist die eine Handlung, die nichts zurueckholt - sie traegt die
   Warnfarbe, aber keine Flaeche: Sie soll nicht einladen. */
.dtf-loeschknopf {
    color: var(--c-danger);
    border-color: var(--c-danger);
}

.dtf-kontoende {
    margin-top: var(--sp-3);
}

/* Rollenwahl in der Benutzerliste: Auswahl und der Knopf, der erst beim
   Wechseln erscheint, bleiben in einer Zeile. */
.dtf-rollenwahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dtf-rollenwahl .uk-select {
    width: auto;
    min-width: 9rem;
}

.dtf-rollenwahl .dtf-statussetzen,
.dtf-rollenwahl button {
    margin-top: 0;
}

/* Systemzeile im Kundenfuss: eigene Zeile über die ganze Breite, unter
   Kontakt und Rechtsverweisen - sie ist die leiseste Angabe von dreien. */
.dtf-footer__system {
    width: 100%;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

/* Änderungsprotokoll: Werte können lange, umbruchlose Zeichenketten sein.
   Sie dürfen mitten im Wort brechen, sonst sprengt eine Zeile die Spalte. */
.dtf-protokoll td {
    overflow-wrap: anywhere;
}

/* Belegliste im Kundenkonto: eine Zeile je Dokument, ohne Aufzaehlungspunkt.
   Der Verweis traegt die Zeile, der Hinweis daneben ist die Beigabe. */
.dtf-belegliste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dtf-belegliste > li + li {
    margin-top: 4px;
}

/* Der Knopf heisst „Senden" oder „Erneut senden" - zwei verschiedene Breiten
   in derselben Spalte. Eine feste Mindestbreite haelt die Tabelle ruhig,
   statt sie beim ersten Versand springen zu lassen. */
.dtf-sendeknopf {
    min-width: 7.5rem;
    white-space: nowrap;
}

/* In der Bestellung steht er als Textknopf an der Zeile, dort waere eine
   Mindestbreite eine Luecke. */
.dtf-belegversand .dtf-sendeknopf {
    min-width: 0;
}

/* Versandknopf an einer Belegzeile: er steht neben der Zeile, nicht darunter,
   und traegt keine eigene Flaeche - der Beleg ist die Hauptsache. */
.dtf-belegversand {
    display: inline-block;
    margin-left: var(--sp-2, 8px);
}

/* Knopf, der erst erscheint, wenn ein anderer Stand gewaehlt ist. */
.dtf-statussetzen {
    margin-top: 8px;
}

/* Anschrift als Block - sie wird gelesen wie auf einem Briefkopf, nicht wie
   ein Absatz. */
.dtf-abholort {
    line-height: 1.5;
    color: var(--c-ink);
}

/* Ein kurzer Hinweis braucht kein Feld ueber die ganze Seitenbreite - man
   verliert darin die Zeile aus dem Auge. */
.dtf-abholform {
    max-width: 46rem;
}

/* Schalterblock im Mailkasten - abgesetzt, weil es eine Entscheidung ist
   und keine Eingabe. */
.dtf-mailautomatik {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--border-w) solid var(--c-line);
}

/* Probeversand: Knopf und Erklaerung gehoeren zusammen und sind vom Rest der
   Karte abgesetzt - es ist eine Handlung zwischen lauter Eingabefeldern. */
.dtf-mailprobe {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--border-w) solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.dtf-mailprobe .dtf-hint {
    flex: 1 1 16rem;
}

/* Karte am Fuss einer Seite, die etwas ausloest statt etwas anzuzeigen.
   Zurueckgenommen, ohne Fuellung und ohne Schatten - sie soll nicht neben den
   Datenkarten um Aufmerksamkeit werben, und wer hier klickt, soll es
   absichtlich tun. */
.dtf-zugangskarte {
    background: none;
    box-shadow: none;
    border-style: dashed;
}

.dtf-zugangskarte .dtf-adminkarte__kopf {
    border-bottom-style: dashed;
}

.dtf-zugangskarte p {
    max-width: 62ch;
}

/* Hinweisleiste über dem Kopf, wenn für dieses Konto eine Löschfrist läuft.
   Gebaut wie das Übernahme-Banner: volle Breite, damit sie nicht als eine
   Meldung unter vielen gelesen wird. */
.dtf-loeschhinweis {
    background: var(--c-warning-soft);
    border-bottom: var(--border-w) solid var(--c-warning);
    color: var(--c-warning);
    font-size: var(--fs-sm);
}

.dtf-loeschhinweis__knoepfe {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.dtf-loeschhinweis__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}

/* Laufende Kontolöschung, ganz oben auf dem Kundenblatt: Text links, der
   Knopf rechts daneben, auf schmalen Geräten darunter. */
.dtf-loeschlauf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.dtf-loeschlauf__text {
    flex: 1 1 24rem;
}

.dtf-loeschlauf form {
    flex: 0 0 auto;
}

/* „Datei entfernen" unter der Vorschau: zurückhaltend, aber auffindbar. */
.dtf-dateiweg {
    margin-top: var(--sp-1);
    padding: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-decoration: underline;
}

.dtf-dateiweg:hover,
.dtf-dateiweg:focus-visible {
    color: var(--c-danger);
}

/* Abstand zwischen Kopfzeile und Inhalt - auf jeder Seite, nicht nur dort,
   wo gerade eine Meldung steht. Der Aussenabstand des ersten Bausteins fällt
   mit diesem zusammen, statt sich zu addieren; die Startseite behält also
   ihre 24 px und bekommt keine 48. */
.dtf-inhalt {
    margin-top: var(--sp-5);
}

/* Kennzahl auf der Übersicht */
.dtf-kennzahl {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dtf-kennzahl__label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
}

/* Nur fuer Screenreader */
.dtf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================================================
   Mobil ab 360 px
   =========================================================================== */

@media (max-width: 639px) {
    :root {
        --fs-hero: 1.875rem;
        --fs-xl:   1.5rem;
        --sp-7:    2rem;
        --sp-8:    2.5rem;
    }

    .dtf-position,
    .uk-card-body {
        padding: var(--sp-4);
    }

    .dtf-stepper {
        max-width: none;
    }

    .uk-button {
        padding: 0 var(--sp-4);
    }
}

/* ==========================================================================
   Produktkatalog im Adminbereich
   ========================================================================== */

.dtf-inaktiv,
.is-inaktiv {
    opacity: .55;
}

/* --- Farben ------------------------------------------------------------- */

.dtf-farbkarte {
    border: 1px solid var(--c-line);
    border-radius: 6px;
    padding: .75rem;
    background: var(--c-surface);
    height: 100%;
}

.dtf-farbkarte__kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.dtf-farbtupfer {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    flex: 0 0 auto;
}

.dtf-farbkarte__bilder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.dtf-farbkarte__bild img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--c-surface-sunken);
    border-radius: 4px;
}

.dtf-farbkarte__leer {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--c-surface-sunken);
    border: 1px dashed var(--c-line);
    border-radius: 4px;
    font-size: .75rem;
    color: var(--c-text-faint);
    text-align: center;
    padding: .25rem;
}

/* --- Groessen ----------------------------------------------------------- */

.dtf-groessen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.dtf-groesse {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    padding: .25rem .5rem;
    font-size: .875rem;
    background: var(--c-surface);
}

.dtf-groesse__aufpreis {
    color: var(--c-accent);
    font-size: .75rem;
}

.dtf-groesse__weg {
    border: 0;
    background: none;
    color: var(--c-text-faint);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.dtf-groesse__weg:hover {
    color: var(--c-danger);
}

/* --- Druckpositionen ---------------------------------------------------- */

.dtf-positionszeile {
    border-bottom: 1px solid var(--c-line);
    padding: .75rem 0;
}

.dtf-positionszeile:last-child {
    border-bottom: 0;
}

.dtf-positionsvorschau {
    position: relative;
    display: block;
    background: var(--c-surface-sunken);
    border-radius: 4px;
    overflow: hidden;
    min-height: 8rem;
}

.dtf-positionsvorschau img {
    display: block;
    width: 100%;
}

.dtf-positionsvorschau__rahmen {
    position: absolute;
    border: 2px dashed var(--c-accent);
    background: rgba(253, 4, 137, .12);
    pointer-events: none;
}

/* Kleine Vorschau in der Bibliothek. Frueher inline - die CSP verbietet das. */
.dtf-preview--klein {
    max-height: 150px;
}

/* In der Motivbibliothek stehen drei Karten nebeneinander - dort reicht
   eine kleinere Vorschau, und die Karte wird spürbar flacher. */
.dtf-motivkarte .dtf-preview--klein {
    max-height: 110px;
}

/* ==========================================================================
   Textilkonfigurator
   ========================================================================== */

.dtf-filterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* --- Uebersichtskachel --------------------------------------------------- */

.dtf-produktkachel {
    display: block;
    height: 100%;
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.dtf-produktkachel:hover {
    border-color: var(--c-accent);
    box-shadow: var(--sh-sm);
    text-decoration: none;
    color: inherit;
}

.dtf-produktkachel__bild {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background: var(--c-surface-sunken);
}

.dtf-produktkachel__bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dtf-produktkachel__leer {
    color: var(--c-text-faint);
    font-size: var(--fs-sm);
}

.dtf-produktkachel__text {
    display: block;
    padding: var(--sp-4);
}

.dtf-produktkachel__text strong {
    display: block;
}

.dtf-produktkachel__text .dtf-hint {
    display: block;
}

.dtf-produktkachel__preis {
    display: block;
    margin-top: var(--sp-2);
    font-weight: 600;
}

/* --- Vorschau ------------------------------------------------------------ */

.dtf-vorschau {
    position: sticky;
    top: var(--sp-4);
}

.dtf-vorschau__seiten {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.dtf-vorschau__buehne {
    position: relative;
    background: var(--c-surface-sunken);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    min-height: 12rem;
    touch-action: none;   /* sonst scrollt das Ziehen die Seite */
}

.dtf-vorschau__buehne img[data-produktbild] {
    display: block;
    width: 100%;
}

.dtf-flaeche {
    position: absolute;
    border: 1px dashed var(--c-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtf-flaeche.is-belegt {
    border-color: var(--c-accent);
}

.dtf-flaeche__name {
    font-size: 0.6875rem;
    color: var(--c-text-faint);
    text-align: center;
    padding: 2px;
}

.dtf-flaeche__motiv {
    position: absolute;
    object-fit: fill;
    cursor: grab;
}

.dtf-flaeche__motiv:active {
    cursor: grabbing;
}

/* --- Eingabeblöcke ------------------------------------------------------- */

.dtf-block {
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}

.dtf-block h2 {
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-2);
}

.dtf-farbwahl,
.dtf-knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.dtf-farbwahl__punkt,
.dtf-knopfreihe__punkt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-md);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: var(--fs-sm);
}

.dtf-farbwahl__punkt:has(input:checked),
.dtf-knopfreihe__punkt:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.dtf-druckposition {
    border-top: var(--border-w) solid var(--c-line);
    padding: var(--sp-3) 0;
}

.dtf-druckposition__kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

/* Bis zu zwoelf Groessen je Textil. Jede Zelle ist gleich aufgebaut -
   Bezeichnung, Feld, Aufpreiszeile -, damit die Eingabefelder auch dann auf
   einer Linie sitzen, wenn nur einzelne Groessen einen Aufpreis haben. */
.dtf-mengen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--sp-2);
}

.dtf-menge {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 3px;
    min-width: 0;
    text-align: center;
    cursor: pointer;
}

.dtf-menge .uk-input {
    height: 2.25rem;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

.dtf-menge .uk-input:not(:placeholder-shown) {
    border-color: var(--c-accent);
    font-weight: 600;
}

.dtf-menge__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtf-menge__aufpreis {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--c-text-faint);
    white-space: nowrap;
}

.dtf-mengensumme {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.dtf-textilid {
    font-variant-numeric: tabular-nums;
}

.dtf-abschluss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.dtf-abschluss__preis strong {
    display: block;
    font-size: 1.375rem;
}

.dtf-hint--warnung {
    color: var(--c-warning);
}

/* Veredelungen einer Textilposition im Warenkorb */
.dtf-drucke {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
}

.dtf-drucke li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 2px 0;
}

.dtf-drucke__bild {
    object-fit: contain;
    background: var(--c-surface-sunken);
    border-radius: 4px;
}

.dtf-drucke .dtf-hint {
    display: block;
}

.dtf-preview--leer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: var(--c-surface-sunken);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--c-text-faint);
}

/* Auswahl für eine weitere Druckposition */
.dtf-druckhinzu {
    border-top: var(--border-w) solid var(--c-line);
    padding-top: var(--sp-3);
    margin-top: var(--sp-3);
}

.dtf-druckposition__kopf .uk-button-text {
    margin-left: auto;
}

/* Kopf des Textilkonfigurators: Kennung, Zielgruppe und Material in einer
   Zeile, damit die Auswahl nicht wie ein eigener Arbeitsschritt aussieht. */
.dtf-textilkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-2);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.dtf-textilkopf .dtf-hint {
    margin: 0;
}

/* Gespeicherte Konfigurationen */
.dtf-konfigkarte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-surface);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.dtf-konfigkarte__bild {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background: var(--c-surface-sunken);
}

.dtf-konfigkarte__bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dtf-konfigkarte__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-4);
    flex: 1 1 auto;
}

.dtf-konfigkarte__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-3);
}

.dtf-speichern {
    border-top: var(--border-w) solid var(--c-line);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
}

/* Profidatencheck */
.dtf-datencheck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: var(--border-w) dashed var(--c-line-strong);
    border-radius: var(--r-md);
    background: var(--c-surface-sunken);
}

.dtf-datencheck.is-gebucht {
    border-style: solid;
    border-color: var(--c-success);
    background: var(--c-success-soft);
}

.dtf-datencheck form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
}

.dtf-datencheck .dtf-hint {
    display: block;
}

.dtf-ungeprueft {
    margin-bottom: var(--sp-4);
}

/* Seitenkopf: links Titel, rechts Knoepfe. Bricht die Reihe auf schmalen
   Schirmen um, standen beide bisher ohne Luecke aufeinander. Der Abstand
   gehoert an den Container, nicht an die Bausteine - sonst fehlt er beim
   naechsten Kopf, den jemand anlegt. Greift auf allen Seiten mit diesem
   Muster, im Adminbereich wie im Shop. */
.uk-flex-between.uk-flex-wrap {
    gap: 16px;
}

/* Knoepfe innerhalb dieser Reihe untereinander. */
.dtf-kopfaktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dtf-pruefstand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px var(--sp-2);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    background: var(--c-surface-sunken);
    color: var(--c-text-muted);
}

.dtf-pruefstand--freigegeben {
    background: var(--c-success-soft);
    color: var(--c-success);
}

.dtf-pruefstand--nachbesserung {
    background: var(--c-warning-soft);
    color: var(--c-warning);
}

.dtf-adminkarte--betont {
    border-color: var(--c-accent);
}

.dtf-kennzahl__label + .dtf-hint {
    display: block;
    margin-top: 2px;
}

/* Banner waehrend einer Kundensitzung. Bewusst laut - man soll nie vergessen,
   in wessen Konto man gerade arbeitet. */
.dtf-impersonation {
    position: sticky;
    top: 0;
    z-index: 990;
    background: var(--c-warning);
    color: #fff;
}

.dtf-impersonation__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
    font-size: var(--fs-sm);
}

.dtf-impersonation__wer {
    opacity: .85;
    margin-left: var(--sp-2);
}

/* Auf dem Telefon eine Zeile, nicht drei.
   Der Balken klebt oben und verdeckt beim Scrollen alles, was darunter
   liegt - bei 118 Pixeln Hoehe ein Drittel des Bildschirms. Deshalb hier
   das Noetigste: als wen man arbeitet, und der Weg zurueck. Wer angemeldet
   ist, weiss man selbst. */
@media (max-width: 639px) {
    .dtf-impersonation__inner {
        flex-wrap: nowrap;
        padding-top: var(--sp-1);
        padding-bottom: var(--sp-1);
        font-size: var(--fs-xs);
    }

    .dtf-impersonation__inner > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dtf-impersonation__inner form {
        flex: 0 0 auto;
    }

    .dtf-impersonation__wer {
        display: none;
    }
}

/* Statusauswahl in der Bestellliste: die Farbe sagt auf einen Blick, wo die
   Bestellung steht - dieselbe Zuordnung wie beim Kunden. */
.dtf-statuswahl {
    font-weight: 600;
    border-width: var(--border-w);
}

.dtf-statuswahl--neu {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
    color: var(--c-accent-dark);
}

.dtf-statuswahl--datenpruefung {
    background: var(--c-surface-hover);
    border-color: var(--c-line-strong);
    color: var(--c-text-muted);
}

.dtf-statuswahl--produktion {
    background: var(--c-warning-soft);
    border-color: var(--c-warning);
    color: var(--c-warning);
}

.dtf-statuswahl--versandt {
    background: var(--c-success-soft);
    border-color: var(--c-success);
    color: var(--c-success);
}

/* Abgeschlossen ist der Endstand - kraeftiger als „Versandt". */
.dtf-statuswahl--abgeschlossen {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
}

.dtf-statuswahl--storniert {
    background: var(--c-danger-soft);
    border-color: var(--c-danger);
    color: var(--c-danger);
}

/* Der Zahlungsstand steht daneben und bleibt bewusst blasser - sonst
   streiten zwei kräftige Felder in derselben Zeile um die Aufmerksamkeit. */
.dtf-zahlwahl {
    background: var(--c-surface);
    border-color: var(--c-line-strong);
    color: var(--c-text-muted);
}

.dtf-zahlwahl--verrechnet {
    border-color: var(--c-warning);
    color: var(--c-warning);
}

.dtf-zahlwahl--bezahlt {
    background: var(--c-success-soft);
    border-color: var(--c-success);
    color: var(--c-success);
}

.dtf-zahlwahl--storniert,
.dtf-zahlwahl--gutschrift {
    background: var(--c-danger-soft);
    border-color: var(--c-danger);
    color: var(--c-danger);
}

/* Der Änderungsknopf steht links neben den Ständen und schließt unten ab. */
.dtf-statuspaar__aendern {
    align-self: flex-end;
}

/* Beide Auswahlfelder in der Kopfzeile der Detailseite nebeneinander. */
.dtf-statuspaar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: flex-end;
}

.dtf-statuspaar form {
    margin: 0;
}

/* Beträge in Listen rechtsbündig und mit gleich breiten Ziffern. */
.dtf-betrag {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dtf-bestelltabelle__summe td {
    border-top: var(--border-w) solid var(--c-line-strong);
    font-weight: 600;
}

/* Aktionen in der Kundenliste nebeneinander, gleich hoch. Umbrechen darf die
   Reihe, sobald die Rückfrage dazukommt - sonst schiebt sie die Spalte auf. */
.dtf-kundenaktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.dtf-kundenaktionen form {
    margin: 0;
}

/* Statusauswahl: breit genug für „Abgeschlossen", nicht breiter. In der
   Liste stehen zwei davon nebeneinander, dazu Beträge und zwei Schaltflächen -
   jedes überflüssige Zentimeter drängt die Zeile in den Umbruch. */
.dtf-statuswahl {
    min-width: 9.5rem;
}

/* Eine Zeile bleibt eine Zeile. Umbrechende Zellen machen aus einer Liste
   eine Folge von Blöcken, in der sich nichts mehr vergleichen lässt. */
.dtf-bestelltabelle td,
.dtf-bestelltabelle th,
.dtf-kundentabelle td,
.dtf-kundentabelle th,
.dtf-belegtabelle td,
.dtf-belegtabelle th {
    white-space: nowrap;
}

/* Nur die breite Spalte kürzt statt umzubrechen - der volle Text steht im
   Titel. */
.dtf-bestelltabelle td.uk-table-expand,
.dtf-kundentabelle td.uk-table-expand,
.dtf-belegtabelle td.uk-table-expand {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Bezug steht klein unter der Belegnummer und darf dort umbrechen. */
.dtf-belegtabelle .dtf-hint {
    white-space: normal;
}

.dtf-oeffnen {
    white-space: nowrap;
}

/* Bestellliste: Nummer, Datum, Status und Knopf sind in der Breite bekannt,
   der Rest gehört dem Kundennamen. */
.dtf-bestelltabelle .uk-table-shrink {
    white-space: nowrap;
    width: 1%;
}

.dtf-bestelltabelle .uk-table-expand {
    width: 100%;
}

/* Rückfrage als eigener Dialog.
   Kein Systemdialog (in eingebetteten Ansichten verschluckt), keine Frage
   neben dem Knopf (in einer Tabellenzelle am Spaltenrand abgeschnitten - man
   las die halbe Frage und drückte trotzdem), und nicht UIkits Modal: Dessen
   JavaScript setzt Inline-Styles, die die Content-Security-Policy blockiert.
   Hier steht das Aussehen vollständig in dieser Datei. */
.dtf-dialog {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    background: rgba(17, 24, 39, 0.55);
}

.dtf-dialog__karte {
    width: 100%;
    max-width: 28rem;
    padding: var(--sp-5);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 48px rgba(17, 24, 39, 0.25);
}

/* Formulardialog: breiter als eine Rückfrage, mit Titel und scrollendem
   Inhalt - eine Belegwahl mit sechs Punkten passt sonst auf einem Notebook
   nicht auf den Schirm. */
.dtf-dialog__karte--breit {
    max-width: 40rem;
}

.dtf-dialog__titel {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-lg);
}

.dtf-dialog__inhalt {
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: var(--sp-5);
}

.dtf-dialog__text {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-md);
    line-height: 1.45;
    color: var(--c-ink);
}

/* Abbrechen links, Ja rechts: Der Rückweg soll nicht dort liegen, wo der
   Daumen ohnehin schon ist. */
.dtf-dialog__knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-3);
}

.dtf-dialog__ja {
    min-width: 6rem;
}

/* Solange gefragt wird, scrollt der Hintergrund nicht mit. */
.dtf-dialog-offen,
.dtf-dialog-offen body {
    overflow: hidden;
}

/* Auf dem Handy nehmen beide Schaltflächen die ganze Breite - ein 8 mm
   breiter Knopf neben einem anderen wird zur Zielübung. */
@media (max-width: 479px) {
    .dtf-dialog__knoepfe {
        flex-direction: column-reverse;
    }

    .dtf-dialog__knoepfe .uk-button {
        width: 100%;
    }
}

/* Rabatte im Warenkorb: Wer spart, soll sehen, wodurch und wie viel. */
.dtf-rabatte {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.dtf-rabatt {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 3px var(--sp-2);
    border-radius: var(--r-md);
    background: var(--c-success-soft);
    color: var(--c-success);
    font-size: var(--fs-sm);
}

.dtf-rabatt .dtf-hint {
    color: inherit;
    opacity: .75;
}

.dtf-rabatt--summe {
    background: var(--c-success);
    color: #fff;
}

/* Im Konfigurator stehen die Rabatte unter dem Preis - der steht rechts,
   also stehen sie es auch. */
.dtf-rabatte--position {
    justify-content: flex-end;
}

.dtf-naechstestufe {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    font-size: var(--fs-sm);
}

.dtf-preisblock {
    text-align: right;
}

.dtf-summe__rabatt th,
.dtf-summe__rabatt td {
    color: var(--c-success);
}

.dtf-summe__rabatt td {
    font-weight: 600;
}

.dtf-summe__rabatt .dtf-hint {
    color: var(--c-text-muted);
    font-weight: 400;
}

/* „Warenkorb aktualisieren" fällt auf, sobald es etwas zu speichern gibt. */
[data-aktualisieren].is-offen {
    animation: dtf-auftauchen .18s ease-out;
}

@keyframes dtf-auftauchen {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-aktualisieren].is-offen { animation: none; }
}

/* Die Mengenspalte ist schmal - die Beschriftung soll nicht abgeschnitten
   werden, sondern das Feld bestimmen. */
.dtf-aktualisieren {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    white-space: nowrap;
}

/* Quer hochgeladene Bahn - Hinweis für Kunde und Produktion. */
.dtf-gedreht {
    display: inline-block;
    padding: 1px var(--sp-2);
    border-radius: var(--r-md);
    background: var(--c-warning-soft);
    color: var(--c-warning);
    font-size: var(--fs-sm);
}

/* Beschriftung vor einem Preis. Wie die Eyebrow-Zeile, aber ohne Versalien:
   Hier steht sie im Satz („Preis für Position wird im Warenkorb berechnet"),
   und Grossbuchstaben mitten im Satz lesen sich wie ein Etikett. */
.dtf-preislabel {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* Rechnet im Browser mit. Ein Gedankenstrich steht dort, solange Maß oder
   Menge noch fehlen - eine 0,00 EUR waere eine Aussage, die nicht stimmt. */
.dtf-positionspreis {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Die zwei Bestellwege
   ========================================================================== */

/* Als schmale Reiter gingen sie unter. Zwei gleich grosse Karten zeigen auf
   den ersten Blick, dass es eine Wahl gibt - und welche. */
/* UIkit zeichnet unter jede Reiterleiste eine Linie - über ein `::before` am
   Listenelement, nicht über dessen Rahmen. Hier sind es aber keine Reiter,
   sondern zwei Karten; der Strich darunter sah aus wie ein Trenner, der
   nirgends hingehört. */
.dtf-wege::before {
    display: none;
}

.dtf-wege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    /* Waagrecht mehr Luft, weil die Nummer der zweiten Karte links
       heraushängt und sonst an der ersten klebt. */
    gap: var(--sp-3) var(--sp-6);
    /* Links Platz für den Überhang der Nummer - sonst schnitte ihn der
       Seitenrand ab. */
    margin: var(--sp-2) 0 var(--sp-6);
    padding: 0 0 0 1.25rem;
    list-style: none;
    border: 0;
}

/* Die Zeile ist ein Flexkasten, damit die Karte sie fuellt.
   Vorher stand `height: 100%` auf der Karte selbst - und das ist ein Ring:
   Die Rasterzeile misst sich an ihrem Inhalt, der Inhalt misst sich an der
   Zeile. Der Browser loest ihn, indem er die Karte aus der Messung nimmt;
   sie wurde dann hoeher als ihre Zeile und ragte in die naechste Karte. */
.dtf-wege > * {
    display: flex;
    padding: 0;
}

.dtf-wege > li > a {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    /* UIkit zentriert die Beschriftung seiner Reiter - hier soll sie links
       stehen, sonst wandert der Name mit seiner Länge hin und her und die
       beiden Karten fluchten nicht. */
    justify-content: flex-start;
    gap: var(--sp-3);
    /* Links Platz für die überhängende Nummer, rechts für den Haken der
       aktiven Karte. */
    padding: var(--sp-3) var(--sp-5) var(--sp-3) 2.25rem;
    text-align: left;
    border: 2px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text);
    text-transform: none;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

/* **Die Nummer hängt links aus der Karte heraus** - so wie im Entwurf. Sie
   gehört zur Wahl, nicht zum Inhalt der Karte, und aussen stehend liest sie
   sich als Aufzählung: erstens, zweitens.

   Sie trägt immer die Markenfarbe, auch wenn die Karte nicht gewählt ist:
   Die Ziffer sagt, welcher Weg es ist, nicht welcher gewählt wurde. Dafür
   sind Rahmen, Fläche und Haken da. */
.dtf-weg__nummer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-40%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-md);
    background: var(--c-accent);
    color: #fff;
    font-size: 1.375rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--sh-sm);
}

.dtf-weg__inhalt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dtf-wege > li > a:hover {
    border-color: var(--c-line-strong);
    text-decoration: none;
    color: var(--c-text);
}

.dtf-wege > li.uk-active > a {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-text);
    box-shadow: var(--sh-sm);
}

.dtf-weg__titel {
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.dtf-wege > li.uk-active .dtf-weg__titel {
    color: var(--c-accent-dark);
}

.dtf-weg__text {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.4;
}


/* Die aktive Karte bekommt einen Haken, damit die Wahl auch ohne Farbe
   erkennbar bleibt. */
.dtf-wege > li.uk-active > a::before {
    content: "✓";
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-3);
    color: var(--c-accent);
    font-weight: 700;
}

.dtf-wege > li {
    position: relative;
}

/* ==========================================================================
   Bestellung von Hand erfassen
   ========================================================================== */

/* Die Zeilensumme rechnet mit - ein Gedankenstrich steht, solange Menge oder
   Preis fehlen. */
.dtf-zeilensumme {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kopfzeile einzeilig. Umgebrochene Ueberschriften wie „Länge / m" lesen
   sich wie zwei Spalten, die es nicht gibt. */
.dtf-handtabelle th {
    white-space: nowrap;
}

/* Die Art-Auswahl muss „Gangsheet" ganz zeigen - abgeschnitten auf „G" ist
   sie unlesbar. */
.dtf-handtabelle select {
    min-width: 8.5rem;
}

/* Gesperrte Felder sollen als gesperrt erkennbar sein, nicht als kaputt. */
.dtf-handtabelle input[readonly],
.dtf-handtabelle input:disabled {
    background: var(--c-surface-hover);
    color: var(--c-text-muted);
}

/* Meldung direkt unter dem Feld, um das es geht. Klein und rot - eine
   gesammelte Liste oben zwingt zum Suchen. */
.dtf-feldfehler {
    margin: 4px 0 0;
    max-width: 16rem;
    color: var(--c-danger);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

/* Zahlenfelder brauchen nur wenig Platz, sollen aber nicht schrumpfen. */
.dtf-handtabelle input[data-laenge],
.dtf-handtabelle input[data-menge] {
    width: 5.5rem;
}

.dtf-handtabelle input[data-preis] {
    width: 7rem;
}

/* Summenblock: schmal halten, sonst laufen Beschriftung und Betrag ueber die
   ganze Kartenbreite auseinander. */
.dtf-handsumme {
    max-width: 26rem;
}

.dtf-handsumme th {
    font-weight: 400;
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dtf-handsumme td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dtf-handsumme__netto th,
.dtf-handsumme__netto td {
    border-top: var(--border-w) solid var(--c-line-strong);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
}

/* ==========================================================================
   Ertragsrechnung auf der Übersicht
   ========================================================================== */

.dtf-ertrag th {
    font-weight: 400;
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Der Zusatz erklärt die Zeile, soll sie aber nicht zweizeilig machen. */
.dtf-ertrag th .dtf-hint {
    display: inline;
    margin-left: var(--sp-1);
}

.dtf-ertrag td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dtf-ertrag__kosten {
    color: var(--c-danger);
}

.dtf-ertrag__summe th,
.dtf-ertrag__summe td {
    border-top: var(--border-w) solid var(--c-line-strong);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
}

/* ==========================================================================
   Motivbibliothek
   ========================================================================== */

/* Das Anlegeformular sitzt über dem Bestand und ist zugeklappt. Jede Zeile,
   die es spart, holt eine Motivkarte in den sichtbaren Bereich. */
.dtf-anlegen__kopf {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    font-weight: var(--fw-bold);
    list-style: none;
}

/* Das Standarddreieck ersetzen wir durch das Pluszeichen daneben. */
.dtf-anlegen__kopf::-webkit-details-marker { display: none; }
.dtf-anlegen__kopf::marker { content: ''; }

.dtf-anlegen__kopf:hover {
    color: var(--c-accent-dark);
}

.dtf-anlegen__zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    font-size: var(--fs-lg);
    line-height: 1;
}

.dtf-anlegen[open] .dtf-anlegen__zeichen {
    transform: rotate(45deg);
}

.dtf-anlegen .dtf-dropzone {
    padding: var(--sp-3) var(--sp-4);
}

/* Der Verweis auf neue Endkunden gehört zur Beschriftung, nicht in eine
   eigene Zeile darunter. */
.dtf-anlegen .uk-form-label a {
    font-weight: var(--fw-normal);
    text-transform: none;
    letter-spacing: 0;
}

/* Filter und Archivschalter in einer Zeile. */
.dtf-motivfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.dtf-motivfilter__archiv {
    margin-left: auto;
}

/* Kopfzeile der Motivkarte: Name und Endkunde direkt untereinander, ohne
   Absatzabstände. */
.dtf-motivkopf h3 {
    font-size: var(--fs-base);
    line-height: 1.25;
}

.dtf-motivkopf__rechts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Herunterladen als Symbol statt als Knopf - eine Nebensache, die keine
   Zeile in der Aktionsreihe verdient. */
.dtf-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-text-muted);
}

.dtf-download:hover,
.dtf-download:focus {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
}

/* Die Angaben zur Datei sind Nachschlagewerte - klein, ruhig, zweizeilig. */
.dtf-motivdaten {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-text-muted);
}

.dtf-motivdaten strong {
    color: var(--c-text);
}

/* Die Aktionsreihe darf umbrechen, soll aber nicht auseinanderfallen. */
.dtf-motivkarte .uk-card-body {
    padding: var(--sp-4);
}

.dtf-motivaktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin-top: var(--sp-3);
}

.dtf-motivaktionen form {
    margin: 0;
}

/* Der Papierkorb sitzt oben rechts neben dem Herunterladen und sieht aus wie
   dieses - dieselbe Groesse, dieselbe Form. Rot wird er erst beim
   Ueberfahren: Eine dauerhaft rote Flaeche in jeder Karte waere eine
   Warnung, die nie zutrifft. */
.dtf-download--loeschen {
    /* Der Rahmen kommt von `.dtf-download`; hier faellt nur weg, was ein
       Knopf von sich aus mitbringt - samt der Kastenrechnung, sonst waere er
       zwei Pixel groesser als das Zeichen daneben. */
    box-sizing: border-box;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.dtf-download--loeschen:hover,
.dtf-download--loeschen:focus-visible {
    color: var(--c-danger);
    border-color: var(--c-danger);
}


/* Der Hinweis, warum nicht gelöscht werden kann, gehört unter die Knöpfe. */
.dtf-motivaktionen__hinweis {
    flex-basis: 100%;
    margin: 0;
}

/* ==========================================================================
   Kundenkonto anfragen
   ========================================================================== */

/* Ein Formular liest sich in einer schmalen Spalte besser - über die volle
   Breite wandert das Auge zwischen Beschriftung und Feld zu weit. */
.dtf-anfrage {
    max-width: 46rem;
    margin: 0 auto var(--sp-6);
}

/* Kontoanfragen im Adminbereich */
.dtf-anfragedaten th {
    width: 10rem;
    font-weight: var(--fw-normal);
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dtf-anfrageaktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.dtf-anfrageaktionen form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}

/* Der Grund gehört neben den Ablehnen-Knopf, nicht in eine eigene Zeile -
   auf dem Telefon darf er dafür schrumpfen, statt die Seite zu verbreitern. */
.dtf-anfragenotiz {
    flex: 1 1 12rem;
    width: 18rem;
    min-width: 0;
}

.dtf-anfrageaktionen form {
    flex-wrap: wrap;
}

/* ==========================================================================
   Startseite für Gäste

   Aufgebaut wie eine Landingpage: links die Behauptung auf dunklem Grund,
   rechts der Weg hinein. Wer überzeugt ist, soll nicht erst eine zweite Seite
   suchen müssen - deshalb steht das Anfrageformular im Aufmacher.

   Der dunkle Block läuft nicht bis zum Fensterrand, sondern bleibt in der
   Seitenbreite und bekommt einen grossen Radius. Ein randloser Streifen
   verlangte negative Aussenabstände quer durch das Grundgerüst, und das
   Grundgerüst gehört allen Seiten, nicht dieser einen.
   ========================================================================== */

/* --- Randlos über die ganze Fensterbreite --------------------------------
   Der Inhalt steckt in `.dtf-page` (zentriert, mit Rand). Ein Abschnitt, der
   trotzdem bis an den Fensterrand reichen soll, zieht sich mit negativen
   Aussenabständen wieder heraus. `overflow-x: clip` am Inhalt fängt die
   Breite der Bildlaufleiste ab - ohne das schöbe `100vw` die Seite um ein
   paar Pixel nach rechts, und genau das ist ein waagrechter Balken. */
.dtf-randlos {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

main {
    overflow-x: clip;
}

/* --- Der dunkle Block ---------------------------------------------------- */
.dtf-start__panel {
    position: relative;
    overflow: hidden;
    /* Oben etwas Luft zur Leiste - ohne sie klebt der Block daran. Unten
       der übliche Abstand zum nächsten Abschnitt. */
    margin: var(--sp-5) 0 var(--sp-6);
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: #0b0b0d;
    color: #fff;
}

/* Der Text bleibt in der Seitenbreite - randlos ist die Fläche, nicht die
   Zeile. Eine Überschrift, die von Fensterkante zu Fensterkante läuft, liest
   niemand. */
.dtf-start__panelinhalt {
    position: relative;
    /* Über Foto, Schraffur und Schimmer - der Text liegt nie darunter. */
    z-index: 2;
}

/* --- Das Foto im Hintergrund -------------------------------------------- */
.dtf-start__panel > .dtf-start__foto {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.dtf-start__foto img {
    width: 100%;
    height: 100%;
    /* Rechts angeschnitten: Dort liegt die Rolle, links der Text. */
    object-fit: cover;
    object-position: right center;
}

/* **Der Verlauf ist die halbe Miete.** Er dunkelt die Textseite ab, damit
   Weiss auf Foto lesbar bleibt - und zwar mit derselben Farbe wie der Block
   selbst, sonst sieht man die Kante. */
.dtf-start__panel--foto::before {
    background:
        linear-gradient(100deg,
            #0b0b0d 0%,
            rgba(11, 11, 13, 0.97) 46%,
            rgba(11, 11, 13, 0.80) 64%,
            rgba(11, 11, 13, 0.10) 100%),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.035) 0,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 9px
        );
}

/* **Telefon und Tablet: der Text steht über dem ganzen Bild.** Erst ab 960 px
   bekommt er seine eigene Spalte links, und erst dort darf die Rolle in voller
   Deckkraft daneben liegen. Darunter deckt der Verlauf flächig ab, und das
   Foto tritt weit zurück - ein Foto, das man ahnt, ist besser als eine
   Überschrift, die man raten muss. */
@media (max-width: 959px) {
    .dtf-start__panel--foto::before {
        background:
            linear-gradient(180deg,
                rgba(11, 11, 13, 0.92) 0%,
                rgba(11, 11, 13, 0.86) 55%,
                rgba(11, 11, 13, 0.72) 100%),
            repeating-linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.035) 0,
                rgba(255, 255, 255, 0.035) 1px,
                transparent 1px,
                transparent 9px
            );
    }

    .dtf-start__foto img {
        object-position: center bottom;
    }

    /* **Auf dem Telefon nur noch geahnt.** Der Text liegt hier über der
       ganzen Fläche, und die Rolle ist weiss - ohne kräftiges Abdunkeln
       stünde die halbe Überschrift auf hellem Grund. Lieber ein Foto, das
       man erahnt, als eine Seite, die man nicht lesen kann. */
    .dtf-start__panel > .dtf-start__foto {
        opacity: 0.15;
    }
}

/* Feine Schraffur statt Farbfläche: Sie gibt dem Schwarz eine Oberfläche,
   ohne ein Bild zu laden. */
.dtf-start__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 9px
    );
    pointer-events: none;
}

/* Ein Magentaschimmer aus der Ecke - dieselbe Farbe wie die Wortmarke. */
.dtf-start__panel::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -10%;
    bottom: -60%;
    width: 55%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(253, 4, 137, 0.28) 0%, rgba(253, 4, 137, 0) 70%);
    pointer-events: none;
}

/* Alles im Block liegt über Schraffur und Schimmer - bis auf das Foto, das
   liegt darunter und trägt deshalb sein eigenes `position: absolute`. */
.dtf-start__panel > *:not(.dtf-start__foto) {
    position: relative;
}

@media (min-width: 960px) {
    .dtf-start__panel {
        padding: var(--sp-7);
    }

    /* Mit Foto gehört die rechte Hälfte der Rolle. Der Text bleibt links und
       läuft nicht darüber - lesbar bleibt er sonst nur dank des Verlaufs, und
       das sieht man ihm an. */
    .dtf-start__panel--foto .dtf-start__panelinhalt {
        max-width: 60%;
    }
}

/* --- Kleines Label mit Strich darunter ----------------------------------- */
.dtf-start__label {
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    display: inline-block;
    border-bottom: 2px solid var(--c-accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-accent);
}

.dtf-start__label--dunkel {
    color: var(--c-accent-dark);
}

/* In der Karte ist das Label ein Flex-Kind und würde sonst über die ganze
   Breite gezogen - der Strich darunter liefe dann quer durch die Karte. */
.dtf-start__karte > .dtf-start__label {
    align-self: flex-start;
}

.dtf-start__titel {
    margin: 0 0 var(--sp-3);
    color: #fff;
    font-size: clamp(2.2rem, 5.4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

/* Das hervorgehobene Wort in der Überschrift. Steht auch im Konfigurator
   und darf deshalb nicht an die Startseite gebunden werden. */
.dtf-akzent {
    color: var(--c-accent);
}

.dtf-start__sub {
    margin: 0 0 var(--sp-3);
    color: #fff;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: var(--fw-bold);
}

.dtf-start__text {
    margin: 0 0 var(--sp-4);
    max-width: 32rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: var(--lh-base);
}

/* --- Blickfang: „ab … je Laufmeter" -------------------------------------- */
.dtf-start__preis {
    /* Inline-flex, damit der Kasten so breit ist wie sein Inhalt: über die
       ganze Spalte gezogen liest er sich als Band, nicht als Blickfang. */
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgba(253, 4, 137, 0.45);
    border-radius: var(--r-md);
    background: rgba(253, 4, 137, 0.10);
}

.dtf-start__preis__wert {
    font-size: clamp(1.5rem, 3.4vw, 2.125rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.dtf-start__preis__text {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.78);
}

/* --- Hakenliste ---------------------------------------------------------- */
.dtf-start__haken {
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-2);
}

.dtf-start__haken li {
    position: relative;
    padding-left: var(--sp-5);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
}

/* Der Haken ist gezeichnet, kein Zeichen aus der Schrift: Nicht jede
   Systemschrift hat ein Häkchen, und wo es fehlt, steht ein Kästchen. */
.dtf-start__haken li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 0.7em;
    height: 0.4em;
    border-left: 2px solid var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    transform: rotate(-45deg);
}

.dtf-start__knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5);
}

/* Der zweite Weg ist ein Link, kein Knopf - sonst konkurrieren zwei
   gleichrangige Flächen, und der Hauptweg verliert. */
.dtf-start__zweit {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.dtf-start__zweit:hover,
.dtf-start__zweit:focus-visible {
    color: #fff;
    border-bottom-color: var(--c-accent);
    text-decoration: none;
}

/* --- Die Karte mit dem Formular ------------------------------------------ */
.dtf-start__karte {
    position: relative;
    /* Spalte, damit die Kleinschrift unten stehen bleibt: Die Karte ist so
       hoch wie der dunkle Block daneben, und die überschüssige Luft gehört
       zwischen Formular und Fussnote, nicht unter die Fussnote. */
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-md, 0 10px 30px rgba(2, 2, 2, 0.07));
}

@media (min-width: 960px) {
    .dtf-start__karte {
        padding: var(--sp-7);
    }

    .dtf-start__karte > .dtf-start__klein {
        margin-top: auto;
    }
}

.dtf-start__marke {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    padding: 2px var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

.dtf-start__kartentitel {
    margin: 0 0 var(--sp-3);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.dtf-start__kartenlead {
    margin: 0 0 var(--sp-5);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* Felder ohne Kasten: eine Linie genügt, und die Karte bleibt ruhig. */
.dtf-start__form {
    display: grid;
    gap: var(--sp-4);
}

.dtf-start__feld {
    display: grid;
    gap: var(--sp-1);
}

.dtf-start__feld > span {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.dtf-start__feld input {
    width: 100%;
    padding: var(--sp-2) 0;
    border: 0;
    border-bottom: var(--border-w) solid var(--c-line-strong);
    border-radius: 0;
    background: transparent;
    font: inherit;
    color: var(--c-text);
}

.dtf-start__feld input::placeholder {
    color: var(--c-text-faint);
}

.dtf-start__feld input:focus {
    outline: none;
    border-bottom-color: var(--c-accent);
}

.dtf-start__klein {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-2);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--c-text-muted);
}

/* --- Abschnitte darunter ------------------------------------------------- */
.dtf-start__block {
    margin: var(--sp-8) 0;
}

/* Zwei Drittel der Seitenbreite: So bricht die Überschrift nach zwei Zeilen
   um statt nach drei, und der Absatz darunter liest sich nicht wie eine
   Fortsetzung. Feste Zeichenbreite hätte auf grossen Schirmen dasselbe Loch
   gelassen wie vorher. */
.dtf-start__blocktitel {
    margin: 0 0 var(--sp-6);
    max-width: 66%;
    font-size: clamp(1.6rem, 3.4vw, 2.375rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

@media (max-width: 760px) {
    .dtf-start__blocktitel {
        max-width: none;
    }
}

.dtf-start__raster {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .dtf-start__raster {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dtf-start__punkt {
    padding: var(--sp-5);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

.dtf-start__punkt h3,
.dtf-start__schritte h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
}

.dtf-start__punkt p:last-child,
.dtf-start__schritte p:last-child {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.dtf-start__nummer {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    color: var(--c-accent);
}

/* --- Bild und die zwei Bestellwege --------------------------------------- */
.dtf-start__zwei {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
    align-items: center;
    margin: var(--sp-8) 0;
}

@media (min-width: 900px) {
    .dtf-start__zwei {
        grid-template-columns: 0.9fr 1.1fr;
    }
}

.dtf-start__bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
}

.dtf-start__weg {
    padding: var(--sp-4) 0;
    border-top: var(--border-w) solid var(--c-line);
}

.dtf-start__weg h3 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-md);
}

.dtf-start__weg p {
    margin: 0;
    color: var(--c-text-muted);
    line-height: var(--lh-base);
}

/* --- Ablauf in Schritten ------------------------------------------------- */
.dtf-start__schritte {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

@media (min-width: 760px) {
    .dtf-start__schritte {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dtf-start__schritte li {
    padding-top: var(--sp-4);
    border-top: 2px solid var(--c-line);
}

@media (min-width: 760px) {
    .dtf-start__schritte li:first-child {
        border-top-color: var(--c-accent);
    }
}

/* --- USP-Leiste: Zahl gross, Text klein -------------------------------- */
.dtf-usp {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    padding: var(--sp-5) 0;
    border-top: var(--border-w) solid var(--c-line);
    border-bottom: var(--border-w) solid var(--c-line);
}

.dtf-usp__wert {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    color: var(--c-accent);
}

.dtf-usp__text {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--c-text-muted);
    max-width: 14rem;
}

/* --- Abschnitte -------------------------------------------------------- */
.dtf-abschnitt {
    padding: var(--sp-6) 0;
}

.dtf-abschnitt__titel {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-lg);
}

/* Vorteile ohne Kästen: Die Überschrift trägt, der Text erklärt knapp.
   Rahmen um jeden Punkt machten die Seite nur unruhiger. */
.dtf-vorteile {
    display: grid;
    gap: var(--sp-5) var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.dtf-vorteile h2 {
    margin: 0 0 var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 3px solid var(--c-accent);
    font-size: var(--fs-md);
}

.dtf-vorteile p {
    margin: 0;
    color: var(--c-text-muted);
    line-height: 1.55;
}

/* --- Ablauf ------------------------------------------------------------ */
.dtf-ablauf {
    counter-reset: schritt;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.dtf-ablauf li {
    counter-increment: schritt;
    color: var(--c-text-muted);
    line-height: 1.5;
}

.dtf-ablauf li::before {
    content: counter(schritt);
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-accent);
}

.dtf-ablauf strong {
    color: var(--c-text);
}

/* --- Fakten ------------------------------------------------------------ */
.dtf-fakten {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin: 0;
    padding: var(--sp-5) 0;
    border-top: var(--border-w) solid var(--c-line);
}

.dtf-fakten dt {
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.dtf-fakten dd {
    margin: 4px 0 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Schlussaufruf ----------------------------------------------------- */
/* Eigener Name: `.dtf-abschluss` gehoert dem Textilkonfigurator und dem
   Nachbestellen - dieselbe Klasse haette dort das Layout zerlegt. */
.dtf-ruf {
    margin: var(--sp-5) 0 var(--sp-7);
    padding: var(--sp-7) var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--c-accent);
    color: #fff;
    text-align: center;
}

.dtf-ruf h2 {
    margin: 0 0 var(--sp-2);
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

.dtf-ruf p {
    margin: 0 0 var(--sp-5);
    color: rgba(255, 255, 255, 0.85);
}

/* Auf farbigem Grund kehrt der Knopf um - Magenta auf Magenta verschwindet. */
.dtf-ruf .uk-button-primary {
    background: #fff;
    color: var(--c-accent-dark);
}

.dtf-ruf .uk-button-primary:hover,
.dtf-ruf .uk-button-primary:focus {
    background: rgba(255, 255, 255, 0.9);
    color: var(--c-accent-dark);
}

/* Kontoanfragen im Adminbereich */
.dtf-anfragedaten th {
    width: 10rem;
    font-weight: var(--fw-normal);
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dtf-anfrageaktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.dtf-anfrageaktionen form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}

/* Der Grund gehört neben den Ablehnen-Knopf, nicht in eine eigene Zeile -
   auf dem Telefon darf er dafür schrumpfen, statt die Seite zu verbreitern. */
.dtf-anfragenotiz {
    flex: 1 1 12rem;
    width: 18rem;
    min-width: 0;
}

.dtf-anfrageaktionen form {
    flex-wrap: wrap;
}


/* ==========================================================================
   Positionsaufstellung (Bestelldetail)
   ========================================================================== */

/* Zwei schmale Tabellen nebeneinander: links was gedruckt wird, rechts was es
   kostet. Beschriftungen zurückgenommen - sie erklären, sie tragen nicht. */
.dtf-merkmale th,
.dtf-betraege th {
    width: 9.5rem;
    padding: 3px 0;
    font-weight: var(--fw-normal);
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
    vertical-align: top;
}

.dtf-merkmale td,
.dtf-betraege td {
    padding: 3px 0;
    vertical-align: top;
}

.dtf-betraege td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Laufmeter, Notiz und Hinweise sind das, wonach jemand sucht. */
.dtf-merkmale__stark td {
    font-weight: 600;
}

.dtf-betraege--abzug th,
.dtf-betraege--abzug td {
    color: var(--c-success);
}

.dtf-betraege--summe th,
.dtf-betraege--summe td {
    padding-top: var(--sp-2);
    border-top: var(--border-w) solid var(--c-line-strong);
    font-weight: 600;
    color: var(--c-text);
}

/* ==========================================================================
   Betragsblock unter den Positionen (Bestelldetail)

   Liest sich wie der Fuss einer Rechnung: Beschriftung links, Betrag rechts,
   zwei Linien für Netto und Brutto.
   ========================================================================== */

.dtf-summe {
    max-width: 30rem;
    margin-left: auto;
}

.dtf-summe th {
    padding: 5px 0;
    font-weight: var(--fw-normal);
    color: var(--c-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Der Zusatz erklärt die Zeile und gehört darunter, nicht daneben. */
.dtf-summe th .dtf-hint {
    display: block;
    margin: 0;
}

.dtf-summe td {
    padding: 5px 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dtf-summe__menge th,
.dtf-summe__menge td {
    border-bottom: var(--border-w) solid var(--c-line);
    color: var(--c-text);
}

.dtf-summe__netto th,
.dtf-summe__netto td {
    border-top: var(--border-w) solid var(--c-line-strong);
    font-weight: 600;
    color: var(--c-text);
}

.dtf-summe__brutto th,
.dtf-summe__brutto td {
    border-top: var(--border-w) solid var(--c-line-strong);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
}

/* ==========================================================================
   Rechnungskreis
   ========================================================================== */

/* Die drei Belegarten auf einen Blick unterscheidbar - Storno und Gutschrift
   sind Ausnahmen und dürfen so aussehen. */
.dtf-beleg--rechnung   { background: var(--c-accent-soft);  color: var(--c-accent-dark); }
.dtf-beleg--storno     { background: var(--c-danger-soft);  color: var(--c-danger); }
.dtf-beleg--gutschrift { background: var(--c-warning-soft); color: var(--c-warning); }
/* Proformarechnung, Angebot und Lieferschein sind keine Belege des
   Rechnungskreises - sie tragen deshalb keine der drei Farben. Das Angebot
   steht am Anfang und bekommt den ruhigen gruenen Ton. */
.dtf-beleg--proforma     { background: var(--c-surface-sunken); color: var(--c-text-muted); }
.dtf-beleg--lieferschein { background: var(--c-surface-sunken); color: var(--c-text-muted); }
.dtf-beleg--angebot      { background: var(--c-success-soft);   color: var(--c-success); }

/* Die Belegarten als Reihe ueber der Liste - ein Klick statt Auswahlfeld
   und Knopf. */
.dtf-belegarten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* Die Belegarten im Dialog: Bezeichnung und ein Satz dazu. Ohne den Satz
   muesste man wissen, was eine Proformarechnung von einer Rechnung
   unterscheidet - im Dialog steht die Art ohne Zusammenhang. */
.dtf-belegwahl {
    display: grid;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}

.dtf-belegwahl__punkt {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: var(--border-w) solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.dtf-belegwahl__punkt:hover {
    background: var(--c-surface-hover);
}

.dtf-belegwahl__punkt input {
    margin-top: 0.25em;
    flex: 0 0 auto;
}

.dtf-belegwahl__punkt .dtf-hint {
    display: block;
    margin: 0;
}

/* Die gewaehlte Zeile hebt sich ab - sonst sucht man den Punkt. */
.dtf-belegwahl__punkt:has(input:checked) {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
}

/* Grund und Betrag stehen neben dem Knopf, nicht darüber. */
.dtf-belegaktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.dtf-belegaktion input[type="text"] {
    flex: 1 1 8rem;
    min-width: 0;
}

.dtf-belegbetrag {
    flex: 0 0 8rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Aktionen am Ende einer Tabellenzeile
   ========================================================================== */

/* --- Druckgroessen je Motiv ---------------------------------------------
   Eine Quelldatei, mehrere Varianten. Der Block sitzt in der Motivkarte
   zwischen den Daten und den Knoepfen.

   Nicht `.dtf-groessen`: Den Namen tragen schon die Groessen-Chips im
   Textilkonfigurator, und deren `display: flex` hat die Liste hier
   zusammengezogen. */
.dtf-druckgroessen {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: var(--border-w) solid var(--c-line);
}

.dtf-druckgroessen__liste {
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
}

.dtf-druckgroessen__liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
}

.dtf-druckgroessen__liste li + li {
    border-top: var(--border-w) solid var(--c-line);
}

.dtf-druckgroessen__liste .dtf-hint {
    margin-left: var(--sp-2);
}

/* Das Kreuz ist die Nebenhandlung - es soll da sein, aber nicht rufen. */
.dtf-druckgroessen__weg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--c-text-faint);
    font-size: var(--fs-md);
    line-height: 1;
    cursor: pointer;
}

.dtf-druckgroessen__weg:hover,
.dtf-druckgroessen__weg:focus-visible {
    background: var(--c-danger-soft);
    color: var(--c-danger);
}


/* Bezeichnung, Breite und der Knopf in einer Zeile - auch auf dem Telefon.
   Umgebrochen sah es aus wie zwei Formulare. */
.dtf-druckgroessen__neu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.dtf-druckgroessen__neu input[type="text"] {
    flex: 1 1 5rem;
    min-width: 0;
}

/* Die Breite ist eine Zahl mit einer Nachkommastelle - dafuer genuegt eine
   schmale Spalte. */
.dtf-druckgroessen__neu .dtf-druckgroessen__breite {
    flex: 0 0 4rem;
}

.dtf-druckgroessen__neu button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Nebeneinander und ohne Umbruch: Ein zweizeiliger Block macht aus jeder
   Zeile zwei und zerreisst die Liste. */
.dtf-zeilenaktionen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    white-space: nowrap;
}

/* Der Stift ist die Nebenhandlung neben „öffnen" - gleich hoch, aber ruhiger. */
.dtf-stift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-text-muted);
}

.dtf-stift:hover,
.dtf-stift:focus {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    text-decoration: none;
}

/* ==========================================================================
   Logo austauschen (Einstellungen)
   ========================================================================== */

.dtf-logofeld {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-top: var(--border-w) solid var(--c-line);
}

/* Die negative Fassung ist auf hellem Grund unsichtbar - sie bekommt den
   Untergrund, für den sie gedacht ist. */
.dtf-logofeld__bild {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 200px;
    height: 76px;
    padding: var(--sp-2);
    border: var(--border-w) solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface);
}

.dtf-logofeld--dunkel .dtf-logofeld__bild {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* Wie auf der Adminleiste: Die mitgelieferte Fassung wird weiss, eine
   hochgeladene negative Fassung bleibt unangetastet. */
.dtf-logofeld--dunkel .dtf-logofeld__bild img {
    filter: brightness(0) invert(1);
}

.dtf-logofeld--dunkel .dtf-logofeld__bild img.dtf-logo--eigen {
    filter: none;
}

.dtf-logofeld__bild img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.dtf-logofeld__form {
    flex: 1 1 18rem;
    min-width: 0;
}

.dtf-logofeld__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
}

.dtf-logofeld__zeile input[type="file"] {
    flex: 1 1 12rem;
    min-width: 0;
}