/*
 * MERCH MY DAY — Design Lab (Julian, 22.09.2026)
 *
 * Optik nach Julians Video vom 23.09.2026: helle Leiste, nur Icons, alles in
 * einem Kopfband. Die Leiste hat zwei Breiten wie bei Miro (schmal 60 px,
 * seit dem 24.09.2026 nur noch schmal 60 px; der Burger im Kopfband blendet sie
 * ganz aus (html.lab-zu) — Zeilen-Variante und Chevron sind weg.
 *
 * Eigenes Stylesheet statt app.css: das Lab ist ein geschlossener Rahmen mit
 * hellem Grund, app.css ist das dunkle Theme der Website. Beides in einer
 * Datei hieße, jede Regel gegen die andere abzusichern.
 *
 * Mobil: Breakpoint 820 px wie im ganzen Projekt. Unter 820 px ist die Leiste
 * zu und kommt über den Burger als Schubfach mit Namen — 60 px von 390 sind
 * für eine Dauerleiste zu teuer. Der Prototyp hat dafür keine Vorlage.
 */

/* ── Schrift ────────────────────────────────────────────────────────────────
   Das Lab lädt nur dieses Stylesheet, also müssen die @font-face hier stehen.
   Ohne sie rendert die ganze Oberfläche im Systemfont — und CLAUDE.md sagt:
   ausschließlich DM Sans, kein System-Font. Dieselben Dateien wie app.css. */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-v17-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-sans-v17-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/dm-sans-v17-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/dm-sans-v17-latin_latin-ext-700.woff2") format("woff2");
}

:root {
    /* Die linke Leiste ist am 29.09.2026 entfallen (Julian) — mit ihr die
       Tokens --lab-leiste-b und --lab-leiste-w. Alles hängt jetzt an der einen
       Kopfzeile. */
    --lab-kopf-h: 56px;      /* Höhe der Kopfzeile */
    --lab-bereiche-h: 0px;   /* eigene Zeile für die Bereiche — nur auf dem Handy */
    --lab-pillen-h: 25px;    /* wie .nav-lab-pille im Website-Menü (Julian, 25.09.2026) */
    --lab-dunkel: #1e1e21;
    --lab-schwarz: #0d0d0d;
    --lab-flaeche: #f5f5f3;
    --lab-flaeche-2: #f1f0ee;
    --lab-rand: rgba(13, 13, 13, 0.1);
    --lab-sek: rgba(13, 13, 13, 0.5);
}

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

.lab-body {
    margin: 0;
    background: #fff;
    color: var(--lab-schwarz);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

.lab-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--lab-schwarz);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.lab-skip:focus { left: 0; }

/* ── Das M ──────────────────────────────────────────────────────────────
   Es steht links in der Kopfzeile und führt zur Website. Sein Verlauf wandert
   wie der der alten Bereichs-Pille (Julian, 29.09.2026: „das M bekommt den
   Effekt von der lila/pinken bewegten Animation").

   Technisch ist es deshalb keine Bildkachel mehr, sondern eine MASKE: der
   Buchstabe aus favicon.svg schneidet den laufenden Verlauf aus. Der frühere
   Ausschnitt aus mmd-logo.webp (background-position) konnte keine Farbe
   annehmen — ein Foto lässt sich nicht einfärben. */
.lab-logo {
    display: inline-flex; align-items: center; justify-content: center;
    /* So breit wie die Werkzeugleiste darunter (64 px, ab x = 16 wie der Kopf):
       das M steht mittig über ihr — Julian, 09.10.2026: „mit dieser Leiste
       bündig machen". Auf dem Handy gilt die eigene Breite weiter unten. */
    width: 64px; height: 34px;
    flex-shrink: 0;
}
.lab-logo-m {
    display: block; width: 38px; height: 21px;   /* Seitenverhältnis des Marken-M: 1340 : 736 */
    background: linear-gradient(90deg, #ff5fa2, #7c5cff, #ff5fa2);
    background-size: 220% 100%;
    animation: lab-pille-fluss 14s ease-in-out infinite;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1340 736'%3E%3Cpath d='M0 0H498L670 332L842 0H1340V736H962V364L770 736H570L378 364V736H0Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1340 736'%3E%3Cpath d='M0 0H498L670 332L842 0H1340V736H962V364L770 736H570L378 364V736H0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (prefers-reduced-motion: reduce) { .lab-logo-m { animation: none; } }

/* ── Die vier Bereiche in der Mitte ─────────────────────────────────────
   Nach Julians Airbnb-Vorlage (29.09.2026): Zeichen und Wort nebeneinander,
   darunter ein Strich, der unter dem aktiven Punkt steht. Angefasst wird
   nichts hart — das Zeichen hebt sich beim Zeigen ein Stück, der Strich
   wächst aus der Mitte. Beides mit derselben weichen Kurve, damit die Leiste
   als EINE Bewegung wirkt und nicht als zwei. */
.lab-bereiche {
    display: flex; align-items: stretch; gap: 2px;
    height: 100%;
    min-width: 0;
    overflow-x: auto; scrollbar-width: none;
}
.lab-bereiche::-webkit-scrollbar { display: none; }
.lab-bereich {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 12px;
    color: rgba(13, 13, 13, .58);
    font-size: 13px; font-weight: 500;
    text-decoration: none; white-space: nowrap; flex: none;
    transition: color .2s ease;
}
.lab-bereich-ic { display: inline-flex; transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
.lab-bereich-ic svg { width: 19px; height: 19px; display: block; }
.lab-bereich:hover { color: var(--lab-schwarz); }
.lab-bereich:hover .lab-bereich-ic { transform: translateY(-2px) scale(1.08); }
.lab-bereich.aktiv { color: var(--lab-schwarz); font-weight: 700; }

/* Der Strich. Er sitzt an der Unterkante der Kopfzeile und liegt auf deren
   eigener Linie — deshalb 2 px hoch und bündig unten. scaleX statt width:
   Breite lässt sich nicht flüssig animieren. */
/* Grundfarbe ist das BLASSE Grau, nicht Schwarz (Julian, 30.09.2026: „dieser
   Strich ist erst kurz schwarz und dann grau … wäre besser, wenn die
   Hover-Animation nur grau wäre"). Vorher lag Schwarz zuoberst und wurde beim
   Zeigen nach Grau überblendet — der Strich fuhr schwarz heraus und verblasste
   danach, zwei Bewegungen für eine Geste. Jetzt wechselt beim Zeigen nur die
   Breite; schwarz ist allein, wo man wirklich ist. */
.lab-bereich::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
    height: 2px; border-radius: 2px;
    background: rgba(13, 13, 13, .22);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.lab-bereich:hover::after { transform: scaleX(1); }
.lab-bereich.aktiv::after { background: var(--lab-schwarz); transform: scaleX(1); }

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

.lab-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--lab-schwarz);
    color: #fff;
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Kopfband ───────────────────────────────────────────────────────────
   Alles in einer Zeile: Burger, Bereichs-Pille, die Leiste des Bereichs,
   Sprache und Profil. Julian: „deutlich cleaner, alles in einem, sodass wir
   da mehr Platz dem Unteren geben." */

/* ── Die Kopfzeile ──────────────────────────────────────────────────────
   Seit dem 29.09.2026 die einzige Navigation des Labs. Drei Felder: links M
   und Projekt, in der Mitte die Bereiche, rechts die Icons. Ein Raster statt
   einer Flex-Reihe, damit die Mitte mittig bleibt, auch wenn links und rechts
   verschieden breit sind; `1fr` außen hält beide Seiten gleich groß. */
.lab-kopf {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--lab-kopf-h);
    background: #fff;
    border-bottom: 1px solid var(--lab-rand);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    z-index: 120;
}
.lab-kopf-links { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Der wandernde Verlauf. Er trug bis zum 29.09.2026 die Bereichs-Pille
   („CREATE"); die ist mit dem Seitennamen entfallen, die Bewegung lebt am M
   weiter (Julian, 25.09.2026: „finde das gut, wenn dieser Farbverlauf sich
   immer bewegt"). */
@keyframes lab-pille-fluss { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.lab-kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }

/* Rechts im Kopfband: Tokens, Sprache, Profil — dieselbe Logik wie in der
   Website-Nav (rund, ruhig, kein Unterstrich, keine Umbrüche). Dieser Block
   fehlte nach dem Leisten-Umbau vom 23.09.2026 komplett; die Elemente standen
   als nackte Links da, blau und umgebrochen. */
.lab-kopf-rechts a, .lab-kopf-rechts a * { text-decoration: none; }
.lab-kopf-rechts > * { flex-shrink: 0; white-space: nowrap; }

.lab-ico {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; min-width: 36px;
    border-radius: 999px;
    color: var(--lab-schwarz);
    background: transparent;
    border: none; padding: 0;
    cursor: pointer;
}
.lab-ico:hover { background: var(--lab-flaeche-2); }

/* Sprache, Kurzhinweise: dieselben Bauteile wie das Website-Menü (partials/
   nav-sprache, .nav-tip aus v4-nav.css) — Julian, 24.09.2026: „müssen genauso
   sein wie auf der Webseite". Hier nur die Maße fürs Kopfband. */
.lab-kopf .nav-lang-btn { width: 36px; height: 36px; }
.lab-kopf .nav-lang-btn:hover { background: var(--lab-flaeche-2); color: var(--lab-schwarz); }
.lab-kopf .nav-lang-menu { top: 44px; }
/* Kurzhinweise ganz rechts außen rechtsbündig — mittig unter dem Icon ragten
   sie über den Rand. Die Credits-Pille, für die das ursprünglich galt, ist am
   29.09.2026 in die D.AI-Bereiche gezogen. */

/* Die Wege zu den persönlichen Bereichen auf der Profilseite (29.09.2026) —
   eine ruhige Zeile aus Links, kein zweites Menü. */
.lab-profil-wege { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; }
.lab-profil-wege a { font-size: 13.5px; font-weight: 600; color: var(--lab-schwarz); text-decoration: underline; min-height: 24px; display: inline-flex; align-items: center; }

/* Warenkorb-Fenster am Symbol: seit 09.10.2026 in v4-nav.css (Website und CREATE). */

/* Rückmeldung unter dem Kopfband (Flash nach Anmelden/Registrieren). */
.lab-toast {
    position: fixed; top: calc(var(--lab-kopf-h) + var(--lab-bereiche-h) + 12px); left: 50%; transform: translateX(-50%);
    z-index: 121; max-width: min(560px, calc(100vw - 32px));
    background: var(--lab-schwarz); color: #fff;
    font-size: 13.5px; line-height: 1.45; padding: 12px 18px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    animation: lab-toast-weg .4s ease 6s forwards;
}
@keyframes lab-toast-weg { to { opacity: 0; visibility: hidden; } }

/* „Aufs Board" überall gleich (12.10.2026): der Hinweis trägt „Zum Board",
   am Knopf die Liste der Boards (Bauform wie die Board-Wahl im Board). */
.lab-toast--board { display: flex; align-items: center; gap: 14px; width: max-content; padding: 8px 8px 8px 18px; }
.lab-toast-knopf {
    flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
    background: #fff; color: var(--lab-schwarz); font-size: 13px; font-weight: 600; text-decoration: none;
}
.lab-toast-knopf:hover { background: #f0efec; }
.lab-board-wahl {
    position: fixed; z-index: 130; width: 260px; max-height: min(60vh, 420px); overflow-y: auto;
    padding: 6px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    font-family: 'DM Sans', sans-serif;
}
.lab-board-wahl-titel { margin: 6px 10px 6px; font-size: 12px; font-weight: 600; color: rgba(17, 17, 17, .5); }
.lab-board-wahl-punkt {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px;
    background: none; text-align: left; font: inherit; font-size: 14px; color: #111; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-board-wahl-punkt:hover, .lab-board-wahl-punkt:focus-visible { background: #f5f5f3; outline: none; }
.lab-board-wahl-punkt--aktiv { font-weight: 700; }
.lab-board-wahl-neu { margin-top: 4px; border-top: 1px solid rgba(0, 0, 0, .08); border-radius: 0 0 9px 9px; font-weight: 600; }
.lab-board-wahl-neu:disabled { color: rgba(17, 17, 17, .35); cursor: default; background: none; }
.lab-board-wahl-voll { margin: 2px 10px 8px; font-size: 12px; line-height: 1.45; color: rgba(17, 17, 17, .55); }

/* Testansicht im Test-Team (Kristof, 08.10.2026) — eine Pille in der Kopfzeile
   neben der Projektwahl. Zuerst stand sie fix unten links: dort verdeckte sie auf
   dem Handy den Warenkorb-Knopf des Konfigurators und am Board die Werkzeugleiste
   (Browser-Prüfung). Gelb, solange etwas eingeschränkt ist, damit man nie
   vergisst, dass man nicht mit den echten Rechten unterwegs ist. */
.lab-testansicht { position: relative; flex: none; font-size: 13px; color: var(--lab-schwarz); }
.lab-testansicht > summary {
    list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 0 12px; border-radius: 999px;
    background: #fff; border: 1px dashed var(--lab-schwarz); font-size: 12.5px;
}
.lab-testansicht > summary::-webkit-details-marker { display: none; }
.lab-testansicht--aktiv > summary { background: #fde68a; border: 1px solid #d4a017; }
.lab-testansicht-titel { font-weight: 600; }
.lab-testansicht-kurz { display: none; font-weight: 600; }
.lab-testansicht-stand { color: var(--lab-sek); }
.lab-testansicht--aktiv .lab-testansicht-stand { color: var(--lab-schwarz); }
.lab-testansicht-fenster {
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 130;
    width: 320px;
    padding: 14px 16px; border-radius: 14px;
    background: #fff; border: 1px solid var(--lab-rand);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}
.lab-testansicht-hinweis { margin: 0 0 10px; color: var(--lab-sek); line-height: 1.45; white-space: normal; }
.lab-testansicht-recht, .lab-testansicht-als { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.lab-testansicht-als { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--lab-rand); font-weight: 600; }
.lab-testansicht-recht.is-aus { opacity: .45; cursor: default; }
.lab-testansicht-knoepfe { display: flex; gap: 8px; margin-top: 12px; }
.lab-testansicht-knoepfe .lab-knopf { margin: 0; }
/* Handy: nur „Testansicht", der Stand steht im Fenster; das Fenster über die
   ganze Breite wie das der Projektwahl. */
@media (max-width: 820px) {
    /* Kurz „Test": „Testansicht" drückte die Projektwahl zur leeren Pille zusammen
       (dasselbe Bild wie vor dem 05.10.2026). Der Name bleibt fürs Vorlesen. */
    .lab-testansicht-stand { display: none; }
    .lab-testansicht-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lab-testansicht-kurz { display: inline; }
    .lab-testansicht > summary { min-height: 30px; padding: 0 10px; }
    .lab-testansicht-fenster { position: fixed; top: calc(var(--lab-kopf-h) + 8px); left: 12px; right: 12px; width: auto; }
}

/* ── Der Konfigurator im Lab ────────────────────────────────────────────
   Dieselbe Fläche wie auf /konfigurator, nur in diesem Rahmen. Die Leiste
   steht wie überall und die Fläche rückt mit ihr (Julian, 23.09.2026:
   „Dieses Überklappen würde ich nicht machen"). .kf-app bringt height:100vh
   als Flex-Spalte mit — Kopfband und Pflichtzeile müssen davon abgehen,
   sonst ragt sie unten heraus. */
.lab-body .kf-app {
    /* Die Kopfhöhe steckt INNEN (padding), nicht außen (margin): außen zählte
       sie doppelt — einmal im Abstand, einmal in der Rechnung — und die Seite
       ragte um genau diese 56 px unten heraus. */
    box-sizing: border-box;
    padding-top: calc(var(--lab-kopf-h) + var(--lab-bereiche-h));
    height: 100vh;
    height: 100svh;   /* keine Pflichtzeile mehr darunter — die steht im Warenkorb-Schritt */
}

/* Die Schritt-Leiste steht seit dem 29.09.2026 auch im Lab dort, wo sie auf
   /konfigurator immer stand: über der Arbeitsfläche (Julian: „im Konfigurator
   kommen diese Punkte über die Produktauswahl"). Sonderregeln fürs Kopfband
   braucht sie nicht mehr — konfigurator.css gilt wie außerhalb des Labs. */

/* Im Lab gibt es im ersten Tab nichts zu wählen: der Editor ist als „Board" in
   der Leiste (Julian, 24.09.2026: „dann kann hier auch nur Konfigurator
   stehen"). Kein Chevron, kein Popover. */
.lab-body .kf-tab-modus .kf-tab-chev, .lab-body #kf-modus-pop { display: none !important; }

/* Die Board-Leiste (Name + Speichern) stand vom 24.09. bis zum 30.09.2026
   über der Arbeitsfläche. Sie ist weg (Julian: „das kannst du ja auch alles
   rausnehmen, Projekt steht ja bereits oben"); gesichert wird von selbst. */
.lab-body.kf-modus-board .kf-tabs { display: none; }

/* Die Werkzeugspalte (D.AI, Hochladen, Grafiken …) schwebt auf der Bühne,
   die Bühne läuft links dahinter durch. Julian: „Ich würde diese
   Konfiguratorleiste einfach mit auf das Board nehmen … weiße Fläche wirkt
   nicht so clean." Nur im Lab und nur am Schreibtisch — auf dem Handy liegt
   die Spalte quer unter der Bühne (konfigurator.css), da bleibt alles. Das
   Flyout hängt an .kf-toolbar-inner (absolut) und schwebt weiter daneben. */
/* Ab 921 px (vorher 821): darunter gilt die Tablet-Fassung aus
   konfigurator.css (≤ 920 px) — beide gleichzeitig zerdrückten die Spalte auf
   einen 64×58-Kasten (iPad hochkant, 900×560; Prüfrunde 05.10.2026). */
@media (min-width: 921px) {
    .lab-body .kf-stage { position: relative; }
    .lab-body .kf-toolbar,
    body.kf-design-aktiv.lab-body .kf-toolbar {
        position: absolute; left: 10px; top: 10px; bottom: 10px;
        width: 64px; margin-right: 0;
        z-index: 6;
    }
    /* Solange ein Panel offen ist, gehört die Spalte ÜBER die
       Bearbeitungsleiste (Julian, 28.09.2026: „das darf nicht dahinter liegen,
       das ist ja aktiv"). Die z-index: 20 des Flyouts helfen nicht: die Spalte
       ist hier absolut positioniert und macht einen eigenen Stapelkontext auf —
       nach außen zählt nur ihre 6, und die verliert gegen .kf-ctx mit 14.
       Geschlossen bleibt sie bei 6, damit die Bearbeitungsleiste erreichbar
       bleibt. */
    body.kf-design-aktiv.lab-body .kf-toolbar.panel-offen { z-index: 24; }
    .lab-body .kf-rail { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
    /* Außerhalb des Design-Schritts ist die Spalte nur unsichtbar (opacity 0,
       konfigurator.css) — als absolute Ebene über der Bühne fing sie trotzdem
       Klicks und öffnete Flyouts (Review 23.09.2026). */
    body.lab-body:not(.kf-design-aktiv) .kf-toolbar { pointer-events: none; }
    /* Die Bühne läuft jetzt links hinter der Spalte durch — ihre Overlays
       (Logo ablegen, Vorne/Hinten, Ansicht-Pille) sitzen bei left:12px und
       lägen auf D.AI-Knopf, Undo und Redo. Im Design-Schritt rücken sie neben
       die Spalte: 10 px Rand + 64 px Spalte + 14 px Luft. */
    body.kf-design-aktiv.lab-body .kf-stage-designs,
    body.kf-design-aktiv.lab-body .kf-thumbs,
    body.kf-design-aktiv.lab-body .kf-ansicht-pille { left: 88px; }

    /* Auch das Board läuft hinter seiner Werkzeugspalte durch (Julian,
       24.09.2026: „mach, dass das Board hier auch noch hinter der Leiste
       läuft") — wie die Bühne im Konfigurator. Die Panels (Blanks, Grafiken …)
       rücken neben die Spalte. */
    .lab-body .kf-board-koerper { position: relative; }
    .lab-body .kf-board-rail { position: absolute; left: 16px; top: 10px;   /* x = 16 wie im Konfigurator und unter dem Logo (09.10.2026) */ bottom: 10px; z-index: 30; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
    /* 8 px neben der Spalte (endet bei 74 px) — derselbe Abstand wie im Konfigurator (08.10.2026) */
    .lab-body .kf-board-panel { left: 82px; }
    .lab-body .kf-board-status { left: 92px; }
}

/* ── Inhalt ─────────────────────────────────────────────────────────────── */

.lab-main {
    padding-top: calc(var(--lab-kopf-h) + var(--lab-bereiche-h));
    min-height: 100vh;
    min-height: 100svh;
    /* Spalte, damit die Pflichtangaben unten kleben und nicht direkt unter
       dem Inhalt in der Seitenmitte hängen. */
    display: flex;
    flex-direction: column;
}
.lab-main:focus { outline: none; }

.lab-inhalt { padding: 28px 28px 60px; }
.lab-h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 6px; }
.lab-lead { font-size: 15px; color: var(--lab-sek); margin: 0 0 28px; max-width: 46ch; }

.lab-kacheln--oben { margin-bottom: 36px; }
.lab-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 1100px;
}
/* Die drei Werkzeuge oben: nur Symbol und Name, mittig, über die ganze Breite
   (Julian, 25.09.2026: „ohne diese zusätzlichen Sätze und zentriert, dass die
   die Breite ausfüllen"). Die Erklärsätze standen seit dem 23.09. darunter. */
.lab-kacheln--oben { max-width: none; }
.lab-kacheln--oben .lab-kachel { flex-direction: row; align-items: center; justify-content: center; gap: 12px; padding: 18px 22px; }
.lab-kacheln--oben .lab-kachel-ic { width: 38px; height: 38px; border-radius: 12px; flex: none; }
.lab-kachel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--lab-rand);
    border-radius: 18px;
    background: #fff;
    text-decoration: none;
    color: var(--lab-schwarz);
    transition: transform 0.2s, box-shadow 0.2s;
}
.lab-kachel:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); }
.lab-kachel-ic {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--lab-flaeche);
    display: inline-flex; align-items: center; justify-content: center;
}
.lab-kachel-ic svg { width: 21px; height: 21px; }
.lab-kachel b { font-size: 16px; font-weight: 700; }
.lab-kachel span { font-size: 13.5px; color: var(--lab-sek); line-height: 1.5; }

/* ── Konto: Listen, Bestellung, Profil ──────────────────────────────────── */

.lab-h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lab-sek); margin: 28px 0 12px; }
.lab-text { font-size: 14.5px; line-height: 1.6; margin: 0; }
.lab-link { color: var(--lab-schwarz); font-weight: 600; }
/* Ein Link, den man auf dem Handy trifft: die Mobil-Checkliste verlangt 44 px,
   eine Zeile Fließtext hat 17. Betrifft den Verfolgungslink — den tippt man
   unterwegs am Paketschalter, nicht am Schreibtisch. */
.lab-link--ziel { display: inline-flex; align-items: center; min-height: 44px; }
.lab-fussnote { font-size: 13px; color: var(--lab-sek); line-height: 1.55; margin: 18px 0 0; max-width: 60ch; }
.lab-fehler { font-size: 13.5px; color: #c2410c; margin: 0; }

.lab-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    border: none;
    border-radius: 999px;
    background: var(--lab-schwarz);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.lab-knopf--leise { background: var(--lab-flaeche-2); color: var(--lab-schwarz); }
.lab-knopf--warn { background: #b91c1c; }
.lab-link-knopf {
    background: none; border: none; padding: 0;
    font: inherit; font-weight: 700;
    color: var(--lab-schwarz);
    text-decoration: underline;
    cursor: pointer;
}

.lab-hinweis {
    background: var(--lab-flaeche);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 70ch;
}
/* Hinweis mit Knopf in einer Zeile (Profil: Passwort per Mail für Google-Konten, 25.09.2026) */
.lab-hinweis--zeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lab-hinweis--zeile .lab-knopf { margin: 0; flex-shrink: 0; }
.lab-hinweis--warn { background: #fff4ed; }
/* Der Kasten für unbestätigte Konten: Titel, Satz, Knopf untereinander. */
.lab-mail-bestaetigen { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lab-mail-bestaetigen form { margin: 0; }

.lab-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--lab-flaeche-2);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.lab-badge--ok { background: #e7f5ec; color: #14683c; }
.lab-badge--warn { background: #fdece7; color: #9a3412; }

/* Bestellliste */
.lab-liste { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.lab-liste li + li { margin-top: 8px; }
.lab-zeile {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--lab-rand);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: var(--lab-schwarz);
    transition: box-shadow 0.2s;
}
.lab-zeile:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07); }
.lab-zeile-haupt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lab-zeile-haupt b { font-size: 15px; font-weight: 700; }
.lab-zeile-sub { font-size: 13px; color: var(--lab-sek); }
.lab-zeile-betrag { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-zeile-pfeil { width: 18px; height: 18px; flex-shrink: 0; color: var(--lab-sek); }

.lab-blaettern { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.lab-blaettern-knopf {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 10px 18px;
    border: 1px solid var(--lab-rand); border-radius: 999px;
    font-size: 14px; font-weight: 700;
    color: var(--lab-schwarz); text-decoration: none;
}
.lab-blaettern-knopf[aria-disabled="true"] { color: var(--lab-sek); opacity: .5; }
.lab-blaettern-stand { font-size: 13.5px; color: var(--lab-sek); }

/* Bestell-Detail */
.lab-zurueck {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    font-size: 13.5px; font-weight: 700;
    color: var(--lab-sek);
    text-decoration: none;
}
.lab-zurueck svg { width: 16px; height: 16px; }
.lab-zurueck:hover { color: var(--lab-schwarz); }

.lab-detail-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.lab-detail-kopf .lab-lead { margin: 0; }

.lab-spalten { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 32px; align-items: start; max-width: 1100px; }
.lab-block { min-width: 0; }
.lab-block .lab-h2:first-child { margin-top: 0; }

.lab-pos { list-style: none; margin: 0; padding: 0; }
.lab-pos li {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--lab-rand);
}
.lab-pos li:first-child { padding-top: 0; }
.lab-pos b { font-size: 15px; font-weight: 700; }
.lab-pos span { font-size: 13.5px; color: var(--lab-sek); line-height: 1.5; }
.lab-pos-notiz { font-style: italic; }

.lab-summe { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.lab-summe dt { color: var(--lab-sek); }
.lab-summe dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lab-summe-gesamt { font-weight: 700; font-size: 17px; color: var(--lab-schwarz) !important; padding-top: 10px; }
/* Eine durchgehende Linie über der Summe. Auf dt und dd einzeln gesetzt riss
   sie in der Spaltenlücke auf. */
.lab-summe { position: relative; }
dt.lab-summe-gesamt::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--lab-rand); margin-top: -10px; }
.lab-summe-klein { font-size: 12.5px; }

/* Profil */
.lab-karte {
    display: flex; align-items: center; gap: 16px;
    padding: 20px;
    border: 1px solid var(--lab-rand);
    border-radius: 18px;
    background: #fff;
    margin-bottom: 20px;
    max-width: 900px;
    flex-wrap: wrap;
}
.lab-karte-av {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--lab-schwarz);
    color: #fff;
    font-size: 19px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lab-karte > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lab-karte b { font-size: 17px; font-weight: 700; }
.lab-karte > div span { font-size: 13.5px; color: var(--lab-sek); word-break: break-word; }

.lab-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 900px; }
.lab-zahl {
    display: block;
    background: var(--lab-flaeche);
    border-radius: 16px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--lab-schwarz);
}
.lab-zahl small { display: block; font-size: 12.5px; font-weight: 600; color: var(--lab-sek); margin-bottom: 6px; }
.lab-zahl b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }

.lab-konto { border: 1px solid var(--lab-rand); border-radius: 18px; overflow: hidden; max-width: 900px; background: #fff; }
.lab-details + .lab-details { border-top: 1px solid var(--lab-rand); }
.lab-details > summary {
    min-height: 56px;
    display: flex; align-items: center;
    padding: 16px 20px;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
}
.lab-formular { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 20px; max-width: 420px; }
.lab-formular label { font-size: 13px; font-weight: 600; color: var(--lab-sek); margin-top: 8px; }
/* 16 px, sonst zoomt iOS beim Hineintippen in das Feld. */
.lab-formular input { font-family: inherit; font-size: 16px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--lab-rand); border-radius: 10px; background: #fff; width: 100%; }
.lab-formular .lab-knopf { align-self: flex-start; margin-top: 14px; }

/* ── Bereiche: Kopfzeile, Chips, Raster ─────────────────────────────────── */
/* Kopfzeile rechts: seit 09.10.2026 dasselbe Bauteil wie auf der Website
   (partials/kopf-rechts) — Maße nur in v4-nav.css, hier keine Sondermaße. */

.lab-bereich-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
/* Branche/Season: die Abschnitte unter den Vorlagen brauchen Luft nach oben (15.10.2026) */
.lab-inhalt--branche .lab-branche-bilder, .lab-inhalt--branche .lab-designs { margin-top: 48px; }
.lab-bereich-kopf .lab-h1 { font-size: 23px; margin: 0; }
.lab-zaehler {
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 10px;
    border-radius: 999px;
    background: var(--lab-flaeche-2);
    font-size: 12.5px; font-weight: 600;
    color: var(--lab-sek);
    font-variant-numeric: tabular-nums;
}
.lab-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lab-chip {
    min-height: 34px;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: var(--lab-flaeche-2);
    color: var(--lab-sek);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.lab-chip:hover { color: var(--lab-schwarz); }
.lab-chip.aktiv { background: var(--lab-schwarz); color: #fff; }

.lab-raster {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.lab-gfx {
    border: 1px solid var(--lab-rand);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}
/* Nur mit Maus — auf dem Handy blieb beim Antippen und Scrollen der Schatten hängen (16.10.2026) */
@media (hover: hover) { .lab-gfx:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); } }
.lab-gfx { -webkit-tap-highlight-color: transparent; }
.lab-gfx[hidden] { display: none; }
/* Ein <button>, damit der Klick das Fenster öffnet — aber ohne den
   Browserrahmen, der als schwarzer Rand um jedes Bild stand (Julian, 23.09.). */
.lab-gfx-bild {
    display: block; width: 100%;
    aspect-ratio: 1;
    background: var(--lab-flaeche-2);
    border: none; padding: 0; margin: 0;
    cursor: pointer;
    font: inherit; color: inherit;
}
button.lab-gfx-bild:focus-visible { outline: 2px solid var(--lab-schwarz); outline-offset: -2px; }
.lab-gfx-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-gfx-bild { position: relative; }   /* Anker für das D.AI-Zeichen */
.lab-gfx-fuss { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.lab-gfx-fuss span { font-size: 13.5px; font-weight: 600; line-height: 1.3; min-width: 0; }

/* ── Pinterest-Raster (Julian, 25.09.2026) ──────────────────────────────
   „Das Bild zieht quasi die Größe. In der Breite ist es gleich, aber in der
   Größe zieht sich das dann." Die Spalten sind gleich breit, die Höhe kommt
   aus dem Bild: das <li> bekommt sein Verhältnis als --gfx-verh (Blade, aus
   den echten Maßen in config/lab.php), die Zeilenspanne rechnet lab.js.

   Warum Grid mit Zeilenspanne und nicht `columns`: bei `columns` laufen die
   Karten spaltenweise, die Reihenfolge stimmt dann weder mit den Pfeilen im
   Fenster noch mit dem Filter überein. */
.lab-raster--pin { grid-auto-rows: 8px; align-items: start; gap: 18px; }
.lab-raster--pin .lab-gfx { grid-row-end: span 40; }   /* Startwert, lab.js rechnet nach */
.lab-raster--pin .lab-gfx-bild { aspect-ratio: 1 / var(--gfx-verh, 1); }
/* Gedeckelt heißt beschnitten: `cover` hält den Ausschnitt mittig. */
.lab-raster--pin .lab-gfx-bild img { object-position: center; }
.lab-gfx-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Herz und Punkte liegen IM Bild, oben rechts, und erscheinen beim Zeigen —
   wie in Julians Pinterest-Vorlage (25.09.2026). In der Fußzeile nahmen sie
   dem Titel in einer 190-px-Spalte fast den ganzen Platz; jetzt gehört die
   Unterschrift ihm allein. Ein GEMERKTES Herz bleibt stehen, sonst wüsste man
   es nicht; ebenso ein offenes Menü und was gerade den Fokus hat (Tastatur).
   overflow sichtbar, damit das Menü aus der Karte heraus aufklappen darf. */
.lab-raster--pin .lab-gfx { position: relative; overflow: visible; }
.lab-raster--pin .lab-gfx-bild { border-radius: 18px 18px 0 0; overflow: hidden; }
.lab-raster--pin .lab-gfx-fuss .lab-herz,
.lab-raster--pin .lab-gfx-mehr {
    position: absolute; top: 10px; z-index: 4;
    margin: 0;
    background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
    border-radius: 50%;
}
.lab-raster--pin .lab-gfx-mehr > summary { color: var(--lab-schwarz); }
/* Herz oben links, Punkte oben rechts — wie Herz und Plus der Produktkarte
   (Julian, 08.10.2026, Bild 64: „auf der einen Seite die Punkte, auf der
   anderen Seite das Herz"). Davor beide oben rechts (Abnahme 07.10.2026). */
.lab-raster--pin .lab-gfx-fuss .lab-herz { left: 10px; right: auto; }
.lab-raster--pin .lab-gfx-mehr { right: 10px; }
/* Das Menü klappt nach unten auf: oben sitzt der Knopf am Bildrand. */
.lab-raster--pin .lab-gfx-menue { top: calc(100% + 6px); bottom: auto; }
@media (hover: hover) and (min-width: 821px) {
    .lab-raster--pin .lab-gfx-fuss .lab-herz,
    .lab-raster--pin .lab-gfx-mehr { opacity: 0; transition: opacity .15s ease; }
    .lab-raster--pin .lab-gfx:hover .lab-gfx-fuss .lab-herz,
    .lab-raster--pin .lab-gfx:hover .lab-gfx-mehr,
    .lab-raster--pin .lab-gfx-fuss .lab-herz[aria-pressed="true"],
    .lab-raster--pin .lab-gfx-fuss .lab-herz:focus-visible,
    .lab-raster--pin .lab-gfx-mehr[open],
    .lab-raster--pin .lab-gfx-mehr:focus-within { opacity: 1; }
}

/* Die drei Punkte rechts neben dem Herz. */
.lab-gfx-mehr { position: relative; flex-shrink: 0; }
.lab-gfx-mehr > summary {
    list-style: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lab-sek);
}
.lab-gfx-mehr > summary::-webkit-details-marker { display: none; }
.lab-gfx-mehr > summary:hover { background: var(--lab-flaeche); color: var(--lab-schwarz); }
.lab-gfx-mehr > summary svg { width: 18px; height: 18px; }
.lab-gfx-menue {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30;
    min-width: 168px; padding: 6px;
    background: #fff; border: 1px solid var(--lab-rand); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
    display: flex; flex-direction: column; gap: 2px;
}
.lab-gfx-punkt {
    display: block; width: 100%; text-align: left;
    font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
    color: var(--lab-schwarz); text-decoration: none;
    background: none; border: none; border-radius: 10px;
    padding: 10px 12px; cursor: pointer;
}
.lab-gfx-punkt:hover { background: var(--lab-flaeche); }
.lab-herz {
    margin-left: auto; flex-shrink: 0;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--lab-flaeche);
    color: var(--lab-schwarz);
    cursor: pointer; padding: 0;
}
.lab-herz svg { width: 17px; height: 17px; }
.lab-herz[aria-pressed="true"] svg { fill: currentColor; }

/* „Medien hinzufügen" in der Bibliothek: rechts in der Kopfzeile; das
   Datei-Feld steckt unsichtbar im Knopf (label), Fokus zeigt der Knopf. */
.lab-hochladen { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* [hidden] muss gegen display:inline-flex der Knöpfe gewinnen — lab.js versteckt
   den Absenden-Knopf, sobald die Dateiauswahl selbst abschickt. */
.lab-knopf[hidden] { display: none; }
/* Eigene Dateien ganz zeigen (Logos sind selten quadratisch) — nicht beschneiden. */
.lab-bibliothek .lab-gfx-bild img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.lab-hochladen .lab-knopf { gap: 6px; cursor: pointer; }
.lab-hochladen .lab-knopf svg { width: 16px; height: 16px; }
.lab-hochladen .lab-knopf:focus-within { outline: 2px solid var(--lab-schwarz); outline-offset: 2px; }

/* Abschnitts-Überschrift (Explore: „Branchen", Favoriten: „Mehr entdecken") */
.lab-abschnitt-titel { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }

/* ── „Designs entdecken" mit Filter (24.09.2026) ─────────────────────────
   Der Filter ist ein <details>: die Zusammenfassung ist der Knopf, das Fenster
   klappt rechts darunter auf. Thema als Wahl, Branchen zum Ankreuzen. */
.lab-designs-kopf { margin-bottom: 18px; }
.lab-designs-kopf .lab-abschnitt-titel { margin: 0; }
.lab-filter { position: relative; margin-left: auto; }
.lab-filter > summary { list-style: none; cursor: pointer; gap: 8px; }
.lab-filter > summary::-webkit-details-marker { display: none; }
.lab-filter > summary svg { width: 16px; height: 16px; }
.lab-filter--aktiv > summary { background: var(--lab-schwarz); color: #fff; }
.lab-filter-anzahl {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #fff; color: var(--lab-schwarz); font-size: 12px; font-weight: 700;
}
.lab-filter-anzahl[hidden] { display: none; }
.lab-filter-fenster {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
    width: min(300px, calc(100vw - 32px));
    background: #fff; border: 1px solid var(--lab-rand); border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
    padding: 14px 16px 12px;
}
.lab-filter-fenster .lab-h2 { margin: 6px 0 6px; }
.lab-filter-zeile { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; cursor: pointer; }

.lab-kopf .lab-anmelden {
    min-height: var(--lab-pillen-h); height: var(--lab-pillen-h);
    padding: 0 12px; font-size: 11.5px;
}

.lab-filter-zeile input { width: 18px; height: 18px; margin: 0; accent-color: var(--lab-schwarz); }
.lab-filter-reset { display: block; margin-top: 10px; font-size: 13px; }
.lab-start-entdecken { margin-top: 40px; }
.lab-knopf--gespeichert { background: var(--lab-schwarz); color: #fff; }

/* ── Branchen-Band auf Explore (24.09.2026) ─────────────────────────────
   Endlos-Laufband wie auf der Startseite: js/laufband.js klont die Gruppe und
   setzt --lb-shift (eine Gruppenbreite) und --lb-dauer; die Animation läuft
   erst mit .lb-bereit, damit nichts springt. Zeigen hält an. */
.lab-band { margin: 0 -28px 30px; padding: 0 28px; }
.lab-band-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.lab-band-kopf .lab-link { font-size: 13.5px; text-decoration: none; }
.lab-band-kopf .lab-link:hover { text-decoration: underline; }
.lab-laufband { overflow: hidden; margin: 0 -28px; padding: 6px 0 8px; }
.lab-laufband-track { display: flex; width: max-content; }
.lab-laufband-track.lb-bereit { animation: lab-laufband var(--lb-dauer, 40s) linear infinite; }
@keyframes lab-laufband { to { transform: translateX(calc(-1 * var(--lb-shift, 50%))); } }
.lab-laufband:hover .lab-laufband-track { animation-play-state: paused; }
.lab-laufband-gruppe { display: flex; gap: 14px; padding: 0 7px; }
/* Wischbares Band (Branchen, 18.10.2026): js/laufband.js schiebt scrollLeft statt der Animation */
.lab-laufband.lb-wisch { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.lab-laufband.lb-wisch::-webkit-scrollbar { display: none; }
.lab-laufband.lb-wisch.lb-zieht { cursor: grabbing; }
.lab-laufband.lb-wisch.lb-zieht a { pointer-events: none; }
.lab-band-kachel {
    position: relative; flex: 0 0 auto;
    width: 280px; aspect-ratio: 3 / 2;
    border-radius: 16px; overflow: hidden;
    background: var(--lab-flaeche-2);
    text-decoration: none; color: #fff;
    transition: transform .2s, box-shadow .2s;
}
.lab-band-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lab-band-kachel:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.lab-band-kachel:hover img { transform: scale(1.03); }
.lab-band-text { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 15px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) {
    .lab-laufband-track.lb-bereit { animation: none; }
    .lab-laufband { overflow-x: auto; }
}

/* ── Produkte (24.09.2026, Julians produktseite.html) ─────────────────────
   Reiter im Kopfband, Kopf mit everplain-Zeichen und Ansicht-Umschalter,
   Raster mit einer Karte je Produkt und Farbe. */
.lab-reiter { display: flex; gap: 4px; height: 100%; align-items: stretch; }
.lab-reiter-knopf {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 0 14px; font: inherit; font-size: 12px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase;
    color: rgba(17, 17, 17, .5); cursor: pointer; white-space: nowrap;
}
.lab-reiter-knopf.aktiv { color: var(--lab-schwarz); border-bottom-color: rgba(17, 17, 17, .7); }
/* Die Reiter stehen seit dem 29.09.2026 in der Seite, nicht im Kopfband
   (Julian: „die müssen dann natürlich unten angezeigt werden, also mit in die
   Seite aufgenommen werden"). Eine eigene Zeile über dem Inhalt, wie die
   Schritt-Leiste im Konfigurator. */
.lab-reiter-zeile { border-bottom: 1px solid var(--lab-rand); padding: 0 28px; overflow-x: auto; scrollbar-width: none; }
.lab-reiter-zeile::-webkit-scrollbar { display: none; }
.lab-reiter-zeile .lab-reiter { height: 46px; }
.lab-produkte-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.lab-produkte-logo { height: 26px; width: auto; display: block; }
.lab-produkte-note { font-size: 12.5px; color: var(--lab-sek); margin: 0; }
.lab-produkte-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.lab-bl { position: relative; border: 1px solid var(--lab-rand); border-radius: 18px; overflow: hidden; background: #fff; transition: transform .2s, box-shadow .2s; }
.lab-bl:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); }
.lab-bl[hidden] { display: none; }
/* Kachelgrund wie im Konfigurator (--kf-kachel, Julian 08.10.2026): auf #f4f2ee verschwanden helle Shirts */
.lab-bl-bild { position: relative; aspect-ratio: 1; background: #e3dfd8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lab-bl-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .5s ease; }
.lab-bl:hover .lab-bl-img { transform: scale(1.04); }
.lab-produkte--modell .lab-bl-bild[data-modell] { aspect-ratio: 4 / 5; }
.lab-produkte--modell .lab-bl-bild[data-modell] .lab-bl-img { object-fit: cover; object-position: center 12%; }
/* Plus oben rechts (Julian, 25.09.2026): geöffnet dreht es sich zum Kreuz,
   darunter klappt das Menü „Konfigurieren · Aufs Board" auf. Liegt das Blank
   schon auf dem Board, steht das dort in Grau (kein zweiter Eintrag). */
.lab-bl-plus { position: absolute; right: 12px; top: 12px; z-index: 3; margin: 0; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.lab-bl-plus svg { width: 16px; height: 16px; transition: transform .2s ease; }
.lab-bl-plus[aria-expanded="true"] svg { transform: rotate(45deg); }
.lab-bl-menue { position: absolute; right: 12px; top: 54px; z-index: 4; display: flex; flex-direction: column; gap: 2px; min-width: 156px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.lab-bl-menue[hidden] { display: none; }
/* Die Karte schneidet für die runden Ecken ab — mit den Projekten (07.10.2026)
   wird das Menü länger und scrollt dann in der Bildfläche statt abgeschnitten
   zu werden. */
.lab-bl-menue { max-height: calc(100% - 66px); overflow-y: auto; overscroll-behavior: contain; }
.lab-bl-menue-punkt { display: block; width: 100%; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--lab-schwarz); text-decoration: none; background: none; border: none; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.lab-bl-menue-punkt:hover { background: var(--lab-flaeche); }
.lab-bl-bald { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #fff; color: var(--lab-sek); border-radius: 999px; padding: 5px 9px; }
.lab-bl--bald .lab-bl-img { opacity: .55; }
.lab-bl--bald:hover { transform: none; box-shadow: none; }
.lab-bl-text { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.lab-bl-text a { color: inherit; text-decoration: none; }
.lab-bl-text b { font-size: 14px; font-weight: 700; }
.lab-bl-var { font-size: 12.5px; color: var(--lab-sek); }
.lab-bl-preis { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(13, 13, 13, .07); font-size: 13.5px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lab-bl-preis small { font-size: 12px; color: var(--lab-sek); text-align: right; }
/* Herz oben links auf der Karte (Julians Video, 24.09.2026) — dasselbe Merken wie bei den Designs */
.lab-bl-herz { position: absolute; left: 12px; top: 12px; z-index: 3; margin: 0; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.lab-bl-herz svg { width: 16px; height: 16px; }

/* Filterzeile: „Größe · Sortieren nach · Ansicht" als zarte Textknöpfe mit
   Pfeil, jedes ein <details> wie der Explore-Filter; rechts der Unisex-Satz. */
.lab-produkte-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 2px 0 22px; }
.lab-produkte-filter { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lab-filter--zart { margin-left: 0; }
.lab-filter--zart .lab-filter-fenster { left: 0; right: auto; width: min(240px, calc(100vw - 32px)); }
.lab-qf {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 0;
    font-size: 14px; font-weight: 500; color: rgba(13, 13, 13, .5);
    background: transparent; border: none; cursor: pointer; list-style: none;
}
.lab-qf::-webkit-details-marker { display: none; }
.lab-qf svg { width: 11px; height: 11px; transition: transform .15s; }
.lab-qf:hover, .lab-filter[open] > .lab-qf { color: var(--lab-schwarz); }
.lab-filter[open] > .lab-qf svg { transform: rotate(180deg); }
.lab-filter--zart.lab-filter--aktiv > .lab-qf { background: transparent; color: var(--lab-schwarz); }
.lab-filter--zart .lab-filter-anzahl { background: var(--lab-schwarz); color: #fff; }

/* ── everplain unter dem Raster (Julians Video, 24.09.2026) ──────────────
   Hashtag-Laufband (js/laufband.js, wie das Branchen-Band), dann die Story:
   Bild links klebt unter dem Kopfband, die Texte rechts scrollen vorbei —
   der mittlere ist hell, die anderen blass, das Bild wechselt (lab.js). */
.lab-everplain { margin-top: 72px; }
.lab-hashtags { overflow: hidden; margin: 0 -28px 44px; }
.lab-hashtags .lab-laufband-gruppe { display: flex; }
.lab-hashtags span { font-size: clamp(48px, 7vw, 108px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--lab-schwarz); padding: 0 .45em; white-space: nowrap; }
.lab-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 80px; align-items: start; }
.lab-story-media { position: sticky; top: calc(var(--lab-kopf-h) + 24px); }
.lab-story-rahmen { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: var(--lab-flaeche-2); }
.lab-story-rahmen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1); }
.lab-story-rahmen > img.is-active, .lab-story-rahmen > img.is-past { clip-path: inset(0 0 0 0); }
.lab-story-marke { position: absolute; right: 18px; bottom: 18px; z-index: 2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 100px; padding: 9px 14px 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.lab-story-marke img { display: block; height: 16px; width: auto; }
.lab-story-liste { display: flex; flex-direction: column; }
.lab-story-punkt { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .18; transition: opacity .45s; }
.lab-story-punkt.is-active { opacity: 1; }
.lab-story-punkt-bild { display: none; }
.lab-story-h { font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: 0 0 26px; }
.lab-story-p { font-size: 16px; line-height: 1.6; margin: 0; max-width: 520px; }
.lab-story-p strong { font-weight: 700; }
.lab-story-fakt { display: flex; align-items: flex-start; gap: 10px; margin-top: 28px; font-size: 15px; line-height: 1.3; }
.lab-story-fakt svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #2f6fed; }
.lab-story-fakt strong { display: block; font-weight: 600; }
.lab-story-fakt-sub { display: block; font-size: 12.5px; color: var(--lab-sek); margin-top: 2px; }
.lab-story-farben { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lab-story-farben i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); display: block; }
.lab-story-chip { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(13, 13, 13, .06); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--lab-sek); }
/* Favoriten: gemerkte Blanks unter den Designs */
.lab-fav-blanks-titel { margin-top: 36px; }

/* Cover-Kacheln (Branchen, Seasons) */
.lab-cover-raster {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.lab-cover {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 18px;
    overflow: hidden;
    background: var(--lab-flaeche-2);
}
.lab-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-cover-schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.lab-cover-text {
    position: absolute; left: 18px; right: 18px; bottom: 16px;
    color: #fff; font-size: 16px; font-weight: 700; line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.lab-cover-text i {
    font-style: normal; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    margin-left: 8px; opacity: .85;
}
/* „bald": erkennbar gedämpft, aber nicht unleserlich. */
.lab-cover--bald { background: var(--lab-flaeche); }
.lab-cover--bald .lab-cover-schleier { background: rgba(13, 13, 13, .55); }
/* Als Link (Branchen): Block, keine Unterstreichung, leichtes Anheben. */
a.lab-cover { display: block; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.lab-cover:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
a.lab-cover:hover img { transform: scale(1.03); }
a.lab-cover img { transition: transform .5s ease; }

/* ── Eine Branche (23.09.2026, Screenshot 05) ───────────────────────────
   Cover-Hero mit Titel und Satz, darunter Vorlagen-Karten: Blank-Foto mit
   dem Motiv darauf. Brustposition je Familie über zwei Variablen. */
/* Geteilt (Abnahme 09.10.2026: „wirken unscharf, Ausschnitt nicht wirklich
   passend"): die Cover sind nur 900 px breit; als 5 : 1-Streifen wurden sie
   doppelt hochgezogen und stark beschnitten. Jetzt links die Headline auf
   heller Fläche, rechts das Foto in voller Höhe und fast natürlichem Format —
   nichts wird größer gezogen, als die Datei hergibt. */
.lab-branche-hero {
    position: relative;
    height: 380px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--lab-flaeche-2);
    margin: 18px 0 30px;
    display: grid; grid-template-columns: 1fr 45%; grid-template-rows: 100%; grid-template-areas: "text bild";
}
.lab-branche-hero img { grid-area: bild; display: block; height: 100%; width: auto; min-width: 100%; max-width: 100%; object-fit: cover; object-position: center 30%; }
.lab-branche-schleier { display: none; }
.lab-branche-text { grid-area: text; align-self: end; position: relative; z-index: 1; color: var(--lab-schwarz); padding: 32px; max-width: 620px; }
.lab-branche-text h1 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.lab-branche-text p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); }

.lab-vorlagen {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.lab-vorlage a {
    display: flex; flex-direction: column;
    border: 1px solid var(--lab-rand);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    color: inherit; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.lab-vorlage a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); }
.lab-vorlage-bild { position: relative; display: block; aspect-ratio: 1; background: #f4f2ee; }
.lab-vorlage-blank { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Druck-Sets: der Packshot ist das ganze Bild (weißer Grund wie die Produktfotos) */
.lab-vorlage--packshot .lab-vorlage-bild { background: #fff; }
.lab-vorlage-packshot { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Das Motiv auf der Brust: Mitte bei --vorlage-y, Breite --vorlage-b (Prozent
   des Bildes). T-Shirt und Hoodie tragen es unterschiedlich hoch. */
.lab-vorlage-motiv {
    position: absolute;
    left: 50%; top: var(--vorlage-y, 42%);
    width: var(--vorlage-b, 30%); height: auto;
    max-height: 32%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
}
.lab-vorlage--tee { --vorlage-y: 40%; --vorlage-b: 30%; }
.lab-vorlage--hoodie { --vorlage-y: 46%; --vorlage-b: 26%; }
/* Die Beispielmotive bringen einen eigenen Papiergrund mit — auf hellem Stoff
   multipliziert, verschwindet er und das Motiv liegt auf dem Shirt statt als
   Kachel darauf. Auf dunklem Stoff verschwände das Motiv selbst, deshalb nur
   mit .lab-vorlage--hell (Controller: Helligkeit der Farbe). */
.lab-vorlage--hell .lab-vorlage-motiv { mix-blend-mode: multiply; filter: none; }
.lab-vorlage-text { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 2px; }
.lab-vorlage-text b { font-size: 14px; font-weight: 700; }
.lab-vorlage-text span { font-size: 12px; color: var(--lab-sek); }
.lab-vorlage-los {
    display: flex; align-items: center; justify-content: space-between;
    margin: 10px 16px 14px;
    font-size: 12.5px; font-weight: 700;
}
.lab-vorlage-los svg { width: 14px; height: 14px; }

.lab-knopf--klein { min-height: 36px; padding: 8px 14px; font-size: 13px; }
/* Anmelden im Kopfband: Text; das Icon davor gibt es nur auf dem Handy im
   Konfigurator (s. Mobil-Block), wo der Platz für das Wort fehlt. */
.lab-anmelden { gap: 8px; }
.lab-anmelden svg { display: none; width: 18px; height: 18px; }

/* Boards: Kürzel auf gedämpftem Verlauf statt Bild — der Editor erzeugt keine
   Vorschau, und ein leerer Bilderrahmen sagt weniger als drei Buchstaben. */
.lab-board {
    display: flex; flex-direction: column; gap: 2px;
    padding: 18px;
    border: 1px solid var(--lab-rand);
    border-radius: 18px;
    background: #fff;
}
.lab-board-kuerzel {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9;
    margin: -18px -18px 14px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg, var(--lab-flaeche), var(--lab-flaeche-2));
    color: rgba(13, 13, 13, .18);
    font-size: 40px; font-weight: 700; letter-spacing: -.02em;
}
.lab-board-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.lab-board:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .08); }
.lab-board b { font-size: 15px; font-weight: 700; }
.lab-board > span:last-child, .lab-board-link > span:last-child { font-size: 13px; color: var(--lab-sek); }

/* ── Grafik-Fenster ─────────────────────────────────────────────────────── */

.lab-fenster {
    border: none;
    border-radius: 22px;
    padding: 0;
    /* margin:auto ausgeschrieben: der Reset des Konfigurators (* { margin: 0 })
       nahm dem <dialog> sonst die Zentrierung — auf dem Board stand das
       Anmelde-Fenster links oben (Julian, 24.09.2026). */
    margin: auto;
    max-width: min(960px, calc(100vw - 32px));
    width: 100%;
    background: #fff;
    color: var(--lab-schwarz);
}
.lab-fenster::backdrop { background: rgba(13, 13, 13, .55); }

/* Profilbild zuschneiden (Julian, 15.10.2026) — der Kreis zeigt das Ergebnis */
.lab-fenster.lab-zuschnitt { max-width: min(400px, calc(100vw - 32px)); }
.lab-zuschnitt-box { display: grid; justify-items: center; gap: 16px; padding: 24px; }
.lab-zuschnitt-box .lab-h2 { justify-self: start; margin: 0; }
.lab-zuschnitt-feld { position: relative; width: min(300px, calc(100vw - 96px)); aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #111; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.lab-zuschnitt-feld--zieht { cursor: grabbing; }
.lab-zuschnitt-feld img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.lab-zuschnitt-maske { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent calc(100% - 1px), rgba(13, 13, 13, .6) 100%); }
.lab-zuschnitt-maske::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); }
.lab-zuschnitt-zoom { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--lab-grau, #666); }
.lab-zuschnitt-zoom svg { width: 20px; height: 20px; flex: none; }
.lab-zuschnitt-zoom input { flex: 1; min-height: 44px; accent-color: #0d0d0d; }
.lab-zuschnitt-box .lab-fussnote { margin: -6px 0 0; text-align: center; }
.lab-zuschnitt-knoepfe { display: flex; gap: 10px; justify-self: stretch; }
.lab-zuschnitt-knoepfe .lab-knopf { flex: 1; justify-content: center; }
/* Feste Höhe (nicht max-height): nur mit definiter Höhe wird die 1fr-Zeile so
   hoch wie der Kasten, und erst dann kann die rechte Spalte in sich scrollen.
   Mit 23 Motiven darunter ist die Spalte ohnehin immer länger als der Kasten. */
.lab-fenster-box {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    /* 660 statt 820 (Julian, 24.09.2026: „etwas kleiner, die weiteren Motive
       können schon bei der 2. Zeile abgeschnitten sein"). */
    height: min(calc(100vh - 32px), 660px);
    height: min(calc(100svh - 32px), 660px);
}
.lab-fenster-zu {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--lab-flaeche-2);
    color: var(--lab-schwarz);
    cursor: pointer; padding: 0;
}
.lab-fenster-zu svg { width: 18px; height: 18px; }

/* Das Bild in echter Größe: nie hochskaliert (die Vorlagen sind ~400 px, sonst
   unscharf), nie abgeschnitten (contain statt cover). Der Rest ist ruhige
   Fläche. */
/* Nur das Motiv, keine graue Leinwand dahinter — wie ein Pin bei Pinterest
   (Julian, 23.09.2026). Weißer Grund, das Bild mit runden Ecken, so groß wie
   der Platz erlaubt, nie hochskaliert. */
.lab-fenster-bild {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 420px;
    padding: 28px 64px;
    background: #fff;
}
.lab-fenster-bild img {
    display: block;
    max-width: 100%; max-height: min(600px, 74vh);
    width: auto; height: auto;
    border-radius: 16px;
}
.lab-fenster-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: #fff;
    color: var(--lab-schwarz);
    cursor: pointer; padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.lab-fenster-pfeil svg { width: 18px; height: 18px; }
/* Außen am Fenster, rechts und links (Julian, 15.10.2026) — das Fenster lässt
   dafür Rand und schneidet nicht mehr ab; die Rundung trägt der Kasten. */
#lab-grafik-fenster { overflow: visible; max-width: min(960px, calc(100vw - 176px)); }
#lab-grafik-fenster .lab-fenster-box { border-radius: inherit; overflow: hidden; }
.lab-fenster-pfeil--l { left: -68px; }
.lab-fenster-pfeil--r { right: -68px; }
/* Motive (lab-grafik-karte) auf ihrem Kartengrund, wie im Feed */
.lab-fenster-bild-rahmen--motiv { width: min(440px, 100%); aspect-ratio: 1 / var(--motiv-verh, 1); border-radius: 16px; }
.lab-fenster-bild-rahmen--motiv img { position: absolute; inset: 10%; width: 80%; height: 80%; max-height: none; object-fit: contain; border-radius: 0; }
.lab-fenster-maske { position: absolute; inset: 14%; -webkit-mask: var(--maske) center / contain no-repeat; mask: var(--maske) center / contain no-repeat; }
.lab-fenster-maske[hidden] { display: none; }
.lab-fenster-bild img[hidden], .lab-fenster .lab-herz[hidden] { display: none; }
.lab-fenster-pfeil:hover { background: var(--lab-schwarz); color: #fff; }

.lab-fenster-text { padding: 28px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }   /* die Spalte scrollt: unten die weiteren Motive */
.lab-fenster-kopf { display: flex; align-items: flex-start; gap: 12px; padding-right: 132px; }   /* Platz für Teilen, Herz, Schließen */
.lab-fenster-kopf .lab-h1 { font-size: 22px; margin: 0; flex: 1; min-width: 0; }
/* Herz neben dem Schließ-Knopf, gleiche Höhe und Größe (Julian, 25.09.2026: „Button müssen auf selbe Höhe") */
.lab-fenster-kopf .lab-herz { position: absolute; top: 12px; right: 56px; z-index: 2; width: 36px; height: 36px; margin: 0; background: var(--lab-flaeche-2); }
/* Teilen links neben dem Herz, gleiche Größe (09.10.2026) */
.lab-fenster-teilen { position: absolute; top: 12px; right: 100px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: var(--lab-flaeche-2); color: var(--lab-schwarz); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lab-fenster-teilen svg { width: 17px; height: 17px; }
.lab-fenster-teilen:hover { background: var(--lab-schwarz); color: #fff; }
.lab-fenster-teilen.nav-tip::after, .lab-fenster-kopf .lab-herz.nav-tip::after { top: calc(100% + 8px); bottom: auto; }
/* Die weiteren Motive: UNTER der Auswahl, als Raster zum Herunterscrollen in
   der rechten Spalte — nicht als Reihe nebeneinander (Julian, 24.09.2026:
   „das muss oben sein, und darunter müssen diese weiteren Motive sein … zum
   Runterscrollen"). Das aktuelle mit Ring. */
.lab-fenster-mehr { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--lab-rand); }
.lab-fenster-mehr .lab-h2 { margin-top: 0; }
.lab-fenster-mehr-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lab-fenster-mehr-knopf { margin-top: 14px; width: 100%; justify-content: center; }
.lab-fenster-mini {
    position: relative; overflow: hidden;   /* Motiv-Minis tragen eine Maske (15.10.2026) */
    width: 100%; aspect-ratio: 1;
    padding: 0; border: none; border-radius: 12px;
    background: var(--lab-flaeche-2);
    overflow: hidden; cursor: pointer;
    box-shadow: 0 0 0 1px var(--lab-rand);
}
.lab-fenster-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-fenster-mini[aria-current="true"] { box-shadow: 0 0 0 2px var(--lab-schwarz); }
.lab-fenster-mini:hover { box-shadow: 0 0 0 2px var(--lab-sek); }
.lab-fenster-text .lab-h2 { margin-top: 22px; }

.lab-blanks { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-blank {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 88px; padding: 8px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--lab-flaeche);
    cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--lab-schwarz);
}
.lab-blank img { width: 100%; height: auto; display: block; }
.lab-blank[aria-checked="true"] { border-color: var(--lab-schwarz); background: #fff; }

/* Farben: runde Muster, die gewählte mit Ring — wie die Farbwahl im
   Konfigurator, nur kleiner. */
.lab-farben[hidden] { display: none; }
.lab-farben > div { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-farbe-name { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--lab-sek); }
.lab-farbe {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--lab-rand);
    background: var(--farbe, #ddd);
    cursor: pointer; padding: 0;
}
.lab-farbe[aria-checked="true"] { box-shadow: 0 0 0 2px var(--lab-schwarz); }

.lab-fenster-text .lab-knopf { margin-top: 24px; align-self: flex-start; }
.lab-fenster-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Nur das Design | Direkt aufs Produkt (05.10.2026): ein Satz erklärt den
   oberen Block, ein Strich trennt ihn vom unteren. */
.lab-fenster-block { margin-top: 24px; padding-top: 2px; border-top: 1px solid var(--lab-rand); }
.lab-fenster-knoepfe .lab-knopf { margin-top: 0; }
.lab-fenster-knoepfe .lab-knopf[hidden] { display: none; }
.lab-fenster-knoepfe .lab-knopf svg { width: 15px; height: 15px; margin-left: 6px; }
.lab-fenster-knoepfe button.lab-knopf:disabled { cursor: default; opacity: .7; }
.lab-knopf--aus { background: var(--lab-flaeche-2); color: var(--lab-sek); cursor: default; }

/* ── Anmelde-Fenster (24.09.2026) ────────────────────────────────────── */
.lab-konto-fenster { max-width: min(460px, calc(100vw - 32px)); }
/* Auf flachen Bildschirmen scrollt der Dialog selbst (Browser-Vorgabe für
   dialog:modal) — der Balken lief dabei außerhalb der runden Ecken. Er bleibt
   unsichtbar, gescrollt wird weiter (Julian, 25.09.2026). */
.lab-konto-fenster { overflow-x: hidden; scrollbar-width: none; }
.lab-konto-fenster::-webkit-scrollbar { display: none; }
.lab-konto-box { position: relative; padding: 32px 28px 28px; }
.lab-konto-box .lab-h1 { font-size: 24px; padding-right: 40px; }
.lab-konto-box .lab-lead { margin-bottom: 18px; }
.lab-knopf--google { width: 100%; gap: 10px; background: #fff; border: 1px solid var(--lab-rand); }
.lab-konto-oder { position: relative; text-align: center; margin: 16px 0; font-size: 12px; color: var(--lab-sek); }
.lab-konto-oder::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--lab-rand); }
.lab-konto-oder span { position: relative; background: #fff; padding: 0 10px; }
.lab-konto-reiter { display: flex; gap: 4px; background: var(--lab-flaeche-2); border-radius: 999px; padding: 4px; margin-bottom: 8px; }
.lab-konto-reiter button {
    flex: 1; min-height: 40px; border: none; border-radius: 999px;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--lab-sek);
    background: transparent; cursor: pointer;
}
.lab-konto-reiter button[aria-selected="true"] { background: #fff; color: var(--lab-schwarz); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.lab-konto-form { padding: 0; max-width: none; }
.lab-konto-form[hidden] { display: none; }   /* [hidden] gegen display:flex der Formulare */
.lab-konto-form .lab-knopf { align-self: stretch; }
.lab-konto-vergessen { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; text-align: center; margin-top: 0; }   /* 17 → 44 px Tippfläche (Mobil-Durchgang 16.10.2026) */
.lab-konto-fenster .lab-fehler { margin: 8px 0 4px; }
.lab-feld-fehler { font-size: 12.5px; color: #c2410c; margin: -2px 0 0; }
.lab-formular input[aria-invalid="true"] { border-color: #c2410c; }
/* Einzel- oder Firmenkonto beim Registrieren (05.10.2026): zwei Kacheln wie
   die Reiter darüber; das Firmenfeld zeigt reines CSS, nur wenn „Für ein Team"
   gewählt ist — ohne JavaScript, ohne verstecktes Pflichtfeld. */
.lab-kontoart { border: 0; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-kontoart legend { font-size: 13px; font-weight: 600; color: var(--lab-sek); padding: 0; margin-bottom: 8px; }
.lab-formular .lab-kontoart-wahl {
    position: relative; margin: 0; display: flex; flex-direction: column; gap: 2px;
    min-height: 44px; padding: 10px 12px; border: 1px solid var(--lab-rand); border-radius: 10px;
    background: #fff; cursor: pointer; color: var(--lab-schwarz);
}
.lab-formular .lab-kontoart-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.lab-kontoart-wahl b { font-size: 14px; }
.lab-kontoart-wahl small { font-size: 12px; font-weight: 400; color: var(--lab-sek); }
.lab-kontoart-wahl:has(input:checked) { border-color: var(--lab-schwarz); box-shadow: 0 0 0 1px var(--lab-schwarz); }
.lab-kontoart-wahl:has(input:focus-visible) { outline: 2px solid var(--lab-schwarz); outline-offset: 2px; }
.lab-kontoart-firma { display: none; flex-direction: column; gap: 8px; }
.lab-konto-form:has(input[name="kontoart"][value="firma"]:checked) .lab-kontoart-firma { display: flex; }
/* /konto/login im Lab-Rahmen (lab/anmelden): dieselbe Box wie das Fenster, mittig auf der Fläche */
.lab-konto-seite { max-width: 460px; margin: 12px auto 0; background: #fff; border: 1px solid var(--lab-rand); border-radius: 18px; padding: 32px 28px 28px; }
.lab-konto-seite .lab-h1 { font-size: 24px; }
.lab-konto-seite .lab-lead { margin-bottom: 18px; }
.lab-konto-seite .lab-hinweis { margin-bottom: 14px; }
/* Passwortfeld mit Auge (partials/pw-feld) — Maße aus app.css, hier hell. */
.konto-pw-wrap { position: relative; }
.konto-pw-wrap input { padding-right: 44px; }
.konto-pw-eye {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: transparent; color: var(--lab-sek); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.konto-pw-eye[aria-pressed="false"] .eye-slash { display: none; }
.lab-fenster .lab-fussnote { margin-top: 10px; }

/* ── Meine Artikel (23.09.2026) ─────────────────────────────────────────
   Eine Zeile je Produkt + Farbe: Bild, Name, Artikelnummer, Größen-Chips,
   rechts die Stückzahl und der Nachbestell-Knopf. Aufbau nach Screenshot 11,
   ohne die Lager-Balken — es gibt kein Lager. */
.lab-artikel {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 18px;
    border: 1px solid var(--lab-rand);
    border-radius: 16px;
    background: #fff;
}
.lab-artikel-bild {
    width: 96px; height: 96px; flex-shrink: 0;
    border-radius: 12px;
    background: var(--lab-flaeche);
    color: var(--lab-sek);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.lab-artikel-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lab-artikel-bild svg { width: 32px; height: 32px; }
.lab-artikel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lab-artikel-text b { font-size: 15px; font-weight: 700; }
.lab-artikel-sub { font-size: 13px; color: var(--lab-sek); }
.lab-artikel-groessen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lab-artikel-groessen span { font-size: 12px; font-weight: 700; background: var(--lab-flaeche-2); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.lab-artikel-groessen span b { color: var(--lab-sek); margin-right: 3px; }
.lab-artikel-zahl { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.lab-artikel-zahl b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.lab-artikel-zahl small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lab-sek); }
.lab-artikel-zahl span { font-size: 12.5px; color: var(--lab-sek); }
.lab-artikel-weg { font-size: 13px; color: var(--lab-sek); white-space: nowrap; }
.lab-artikel-letzte { margin-top: 36px; max-width: 900px; }
.lab-artikel-letzte .lab-link { display: inline-block; margin-top: 14px; }

/* ── MERCH MY D.AI (23.09.2026) ─────────────────────────────────────────
   Die Fläche aus dem Prototyp (Screenshots 03/13): Hero mit Foto, Umschalter
   Erstellen | Planen, weiße Prompt-Box. Maße vom Prototyp (.dai-hero 400 px,
   .dai-box 900 px), Farben aus den Lab-Tokens. Die Knöpfe sind deaktiviert
   und sehen auch so aus — ein schwarzer Knopf, der nichts tut, lügt. */

.lab-dai [hidden] { display: none; }   /* eigene display-Werte unten dürfen hidden nicht überstimmen */

.lab-dai-hero {
    position: relative;
    display: flex;
    min-height: 400px;
    border-radius: 22px;
    overflow: hidden;
    background: #222;
    margin-bottom: 34px;
}
/* Ruhige Bildfolge (Julian, 25.09.2026): ein Bild steht sieben Sekunden,
   blendet dann 1,4 s über und wächst dabei sacht (lab.js wechselt „aktiv").
   Das abgelöste Bild bleibt auf 1.06 stehen, damit nichts springt; das neue
   startet bei 1 — unsichtbar, weil es in dem Moment noch durchsichtig ist. */
.lab-dai-bilder { position: absolute; inset: 0; }
.lab-dai-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease; }
.lab-dai-foto.aktiv { opacity: 1; animation: lab-dai-zoom 8.6s ease-out forwards; }
@keyframes lab-dai-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .lab-dai-foto { transform: none; } .lab-dai-foto.aktiv { animation: none; } }
.lab-dai-schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .5)); }
.lab-dai-innen {
    position: relative; z-index: 1;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 36px 24px;
}

.lab-dai-modus {
    display: inline-flex;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
}
.lab-dai-modus button {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 36px;
    font: inherit; font-size: 13px; font-weight: 700;
    color: #fff;
    background: transparent;
    border: none; border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
}
.lab-dai-modus button.aktiv { background: #fff; color: var(--lab-schwarz); }
.lab-dai-modus svg { width: 14px; height: 14px; }

.lab-dai-frage {
    color: #fff;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.lab-dai-box {
    width: min(900px, 100%);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    padding: 16px 18px 14px;
}
.lab-dai-box-oben { display: flex; gap: 14px; align-items: flex-start; }
.lab-dai-referenz {
    width: 66px; height: 66px; flex-shrink: 0;
    border-radius: 14px;
    border: 1.5px dashed rgba(13, 13, 13, .18);
    background: #faf9f7;
    color: var(--lab-sek);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    cursor: default;
}
.lab-dai-referenz svg { width: 24px; height: 24px; }
.lab-dai-funke { width: 66px; height: 66px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.lab-dai-funke svg { width: 28px; height: 28px; }
.lab-dai-text {
    flex: 1; min-width: 0;
    border: none; outline: none; resize: none;
    font: inherit; font-size: 16px; line-height: 1.5;
    color: var(--lab-schwarz);
    background: transparent;
    padding: 8px 0;
    min-height: 66px;
}
.lab-dai-text::placeholder { color: rgba(13, 13, 13, .4); }

.lab-dai-leiste {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid rgba(13, 13, 13, .06);
}
.lab-dai-plus {
    width: 38px; height: 38px; flex-shrink: 0;
    border: none; border-radius: 12px;
    background: transparent; color: var(--lab-schwarz);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.lab-dai-plus:disabled { color: var(--lab-sek); cursor: default; }
.lab-dai-plus svg { width: 20px; height: 20px; }
.lab-dai-modell { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 8px 10px; white-space: nowrap; }
.lab-dai-modell svg { width: 16px; height: 16px; }
/* An dieser Stelle stehen seit dem 01.10.2026 die Credits statt „Merch my
   D.AI" (Julian). Wird es knapp, färbt sich die Zahl — dieselbe Schwelle und
   dieselbe Farbe wie vorher an der eigenen Credits-Zeile. */
.lab-dai-modell--wenig { color: #c2410c; }
/* Als Knopf sieht es aus wie vorher der Text — nur klickbar (Gaeste kommen so
   zu mehr Credits). */
.lab-dai-modell--klick { font-family: inherit; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.lab-dai-modell--klick:hover { background: rgba(0,0,0,.05); }
/* ── Vorgaben als Pillen mit Menü (Julian, 02.10.2026) ──────────────────
   Derselbe Aufbau wie im Konfigurator: eine Pille je Vorgabe, die ihren
   gewählten Wert trägt, dahinter dieselben Chips. Die sechs Stil-Chips lagen
   vorher offen in der Leiste und schoben alles andere an den Rand. */
.lab-dai-vorgaben { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.lab-dai-vorgaben[hidden] { display: none; }
.lab-dai-dd { position: relative; }
.lab-dai-pille {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 6px 12px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--lab-schwarz); background: #fff;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px;
    cursor: pointer; white-space: nowrap;
}
.lab-dai-pille svg { width: 13px; height: 13px; flex: none; opacity: .6; }
.lab-dai-pille:hover { border-color: rgba(0, 0, 0, .3); }
.lab-dai-dd.offen .lab-dai-pille { border-color: var(--lab-schwarz); }
.lab-dai-pille.gesetzt { background: var(--lab-schwarz); color: #fff; border-color: var(--lab-schwarz); }
.lab-dai-pille.gesetzt svg { opacity: .9; }
.lab-dai-format-zeichen { display: block; width: 11px; height: 11px; border: 1.3px solid currentColor; border-radius: 2px; opacity: .7; }
/* Das Menü hängt am Viewport (position: fixed, Stelle setzt lab.js) — der
   Kasten ist rund und schneidet sonst ab. */
.lab-dai-dd-menue {
    position: fixed; z-index: 90;
    min-width: 215px; max-width: min(320px, calc(100vw - 24px));
    padding: 11px 12px 12px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}
.lab-dai-dd-menue[hidden] { display: none; }
.lab-dai-dd-titel {
    margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lab-sek);
}
.lab-dai-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lab-dai-chip {
    font: inherit; font-size: 12px; font-weight: 500; color: var(--lab-schwarz);
    background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px;
    padding: 5px 10px; cursor: pointer;
}
.lab-dai-chip:hover { border-color: rgba(0, 0, 0, .3); }
.lab-dai-chip.aktiv { background: var(--lab-schwarz); color: #fff; border-color: var(--lab-schwarz); font-weight: 600; }
/* Eigener Wert unter der Liste — die Listen decken den Normalfall ab, nicht
   jeden Fall (Julian, 02.10.2026). */
.lab-dai-eigen { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .08); }
.lab-dai-eigen input {
    flex: 1; min-width: 0; font: inherit; font-size: 12px;
    padding: 7px 10px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px;
    background: #fff; color: var(--lab-schwarz);
}
.lab-dai-eigen input:focus { outline: none; border-color: var(--lab-schwarz); }
.lab-dai-eigen button {
    flex: none; width: 32px; height: 32px; border: none; border-radius: 10px;
    background: var(--lab-schwarz); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Referenzbilder in der Leiste */
.lab-dai-refs { display: flex; align-items: center; gap: 6px; }
.lab-dai-refs[hidden] { display: none; }
.lab-dai-ref-bild {
    position: relative; width: 32px; height: 32px; border-radius: 8px; flex: none;
    border: 1px solid rgba(0, 0, 0, .12); background: #f4f4f2;
}
.lab-dai-ref-bild img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; }
.lab-dai-ref-bild button {
    position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid #fff; background: var(--lab-schwarz); color: #fff;
    font-size: 9px; line-height: 1; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* Die Antwort beim Planen: Text, kein Bild */
/* Planen als Gespräch (Julian, 12.10.2026, Bild 41): die Überschrift weicht,
   darüber der Verlauf in einer weißen Karte, die Box darunter bleibt das Feld */
.lab-dai--chat .lab-dai-frage { display: none; }
.lab-dai-chat { width: min(900px, 100%); margin: 0 auto 10px; padding: 14px 16px 16px; background: #fff; border-radius: 20px; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.lab-dai-chat[hidden] { display: none; }
.lab-dai-chat { animation: lab-dai-chat-ein .3s ease-out; }   /* löst die Überschrift weich ab */
@keyframes lab-dai-chat-ein { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .lab-dai-chat { animation: none; } }
.lab-dai-chat-verlauf { display: flex; flex-direction: column; gap: 10px; max-height: min(52vh, 520px); max-height: min(52svh, 520px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.lab-dai-blase { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.lab-dai-blase p { margin: 0 0 8px; white-space: pre-wrap; }
.lab-dai-blase p:last-child { margin-bottom: 0; }
.lab-dai-blase--nutzer { align-self: flex-end; background: var(--lab-schwarz); color: #fff; border-bottom-right-radius: 6px; }
.lab-dai-blase--ki { align-self: flex-start; background: #f3f2ef; color: var(--lab-schwarz); border-bottom-left-radius: 6px; }
.lab-dai-blase--ki:has(.lab-dai-steckbrief) { max-width: 100%; }   /* der Steckbrief braucht die Breite, vor allem am Handy */
.lab-dai-blase--tippt { display: inline-flex; gap: 4px; padding: 14px 16px; }
.lab-dai-blase--tippt span { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 17, 17, .4); animation: lab-dai-tippt 1s infinite ease-in-out; }
.lab-dai-blase--tippt span:nth-child(2) { animation-delay: .15s; }
.lab-dai-blase--tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes lab-dai-tippt { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Steckbrief: die Kennzahlen als Karte in der Antwort, darunter die zwei Wege */
.lab-dai-optionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lab-dai-option { min-height: 36px; padding: 0 14px; border: 1px solid rgba(17, 17, 17, .16); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--lab-schwarz); cursor: pointer; }
.lab-dai-option:hover { background: var(--lab-schwarz); color: #fff; border-color: var(--lab-schwarz); }
@media (max-width: 820px) { .lab-dai-option { min-height: 44px; } }
.lab-dai-steckbrief { margin-top: 10px; padding: 14px 16px; background: #fff; border: 1px solid rgba(17, 17, 17, .08); border-radius: 14px; }
.lab-dai-steckbrief h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.lab-dai-steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; font-size: 13px; }
.lab-dai-steckbrief dt { color: var(--lab-sek); }
.lab-dai-steckbrief dd { margin: 0; }
.lab-dai-steckbrief-produkte { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.lab-dai-steckbrief-produkte strong { display: block; font-weight: 600; }
.lab-dai-steckbrief-produkte span { display: block; font-size: 12.5px; color: var(--lab-sek); }
.lab-dai-steckbrief-titel { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--lab-sek); }
.lab-dai-steckbrief ol { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.lab-dai-steckbrief-hinweis { margin: 0 0 12px; font-size: 12.5px; color: var(--lab-sek); }
.lab-dai-steckbrief-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-dai-antwort[hidden] { display: none; }
.lab-dai-antwort h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lab-sek); }
.lab-dai-antwort p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--lab-schwarz); white-space: pre-wrap; }
.lab-dai-antwort p:last-child { margin-bottom: 0; }
/* Diktieren sitzt direkt links neben „Generieren" und ist genauso schwarz
   (Julian, 02.10.2026). Laeuft die Aufnahme, pulst der Ring — dasselbe Zeichen
   wie im Konfigurator. */
.lab-dai-mikro {
    margin-left: auto;
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 12px;
    background: var(--lab-schwarz); color: #fff; cursor: pointer;
    position: relative;
}
.lab-dai-mikro svg { width: 18px; height: 18px; }
.lab-dai-mikro:hover { opacity: .9; }
.lab-dai-mikro.aktiv::after {
    content: ''; position: absolute; inset: -3px; border-radius: 14px;
    border: 2px solid var(--lab-schwarz); opacity: .35;
    animation: lab-mikro-puls 1.4s ease-out infinite;
}
@keyframes lab-mikro-puls { from { transform: scale(.94); opacity: .45; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lab-dai-mikro.aktiv::after { animation: none; } }
/* Steht das Mikrofon davor, traegt es den automatischen Abstand — sonst
   rutschten beide Knoepfe auseinander. Verborgen (Firefox) bleibt alles wie es war. */
.lab-dai-mikro:not([hidden]) + .lab-dai-los { margin-left: 0; }   /* überall dieselben 8 px (Julian, 16.10.2026: „Abstände noch nicht so optimal“) */

.lab-dai-los {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 18px 0 16px;
    border: none; border-radius: 12px;
    background: var(--lab-schwarz); color: #fff;
    font: inherit; font-size: 13px; font-weight: 700;
    white-space: nowrap;
}
.lab-dai-los:disabled { background: var(--lab-flaeche-2); color: var(--lab-sek); cursor: not-allowed; }
.lab-dai-los svg { width: 18px; height: 18px; }

.lab-dai-bald { margin: 14px 0 0; color: rgba(255, 255, 255, .85); font-size: 13px; line-height: 1.5; text-align: center; max-width: 64ch; }
.lab-dai-bald a { color: #fff; font-weight: 700; }
/* Credits auf der D.AI-Seite: eine ruhige Zeile unter dem Knopf, keine Pille
   (Julian, 29.09.2026). Sie steht IM Hero über dem Foto — also hell wie der
   Hinweis darunter, sonst verschwindet sie im Bild. */
.lab-dai-credits { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.lab-dai-credits--wenig { color: #ff9c8f; font-weight: 700; }
.lab-dai-credits-mehr {
    margin-left: 8px; padding: 0; border: 0; background: none;
    font: inherit; color: #fff; font-weight: 700; text-decoration: underline; cursor: pointer;
}

.lab-dai-h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }
.lab-dai-h2--mitte { text-align: center; margin-bottom: 28px; }

.lab-dai-fragen { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; border-top: 1px solid var(--lab-rand); }
.lab-dai-fragezeile {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 0;
    border: none; border-bottom: 1px solid var(--lab-rand);
    background: transparent;
    font: inherit; font-size: 17px; font-weight: 700;
    color: var(--lab-schwarz);
    text-align: left;
    cursor: pointer;
}
.lab-dai-fragezeile svg { width: 30px; height: 30px; flex-shrink: 0; padding: 7px; border: 1px solid var(--lab-rand); border-radius: 50%; }
.lab-dai-fragezeile:hover svg { background: var(--lab-flaeche-2); }

/* ── Mobil (Breakpoint 820 px wie im ganzen Projekt) ────────────────────── */

@media (max-width: 820px) {
    /* Bis zum 23.09.2026 stand hier eine untere Leiste (.lab-side, 64 px hoch,
       mit Bodenabstand am Inhalt). Sie ist dem Schubfach über den Burger
       gewichen — die Regeln dazu sind raus, der Bodenabstand mit ihnen. */
    .lab-av { width: 24px; height: 24px; font-size: 12px; }
    .lab-main { margin-left: 0; }

    /* Branche: Hero flacher, Vorlagen zu zweit. */
    /* Handy: Foto oben über die volle Breite, Headline darunter */
    .lab-branche-hero { height: auto; border-radius: 18px; margin: 12px 0 22px; grid-template-columns: 100%; grid-template-rows: 240px auto; grid-template-areas: "bild" "text"; }
    .lab-branche-hero img { width: 100%; max-width: none; }
    .lab-branche-text { padding: 18px; }
    .lab-vorlagen { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .lab-vorlage-los { min-height: 44px; margin: 4px 14px 8px; }

    /* Meine Artikel: Bild und Text oben, Zahl darunter, Knopf über die Breite. */
    .lab-artikel { flex-wrap: wrap; gap: 12px 14px; padding: 14px; }
    .lab-artikel-bild { width: 72px; height: 72px; }
    .lab-artikel-zahl { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
    .lab-artikel-zahl span { flex: 1 1 100%; }
    .lab-artikel-zahl small { white-space: nowrap; }
    .lab-artikel .lab-knopf, .lab-artikel-weg { flex: 1 1 100%; justify-content: center; text-align: center; min-height: 44px; }

    /* D.AI: Tap-Ziele auf 44 px, Hero ohne Mindesthöhe (der Inhalt bestimmt). */
    .lab-dai-hero { min-height: 0; border-radius: 18px; margin-bottom: 26px; }
    .lab-dai-innen { padding: 24px 14px; }
    .lab-dai-modus button { min-height: 44px; }
    .lab-dai-box { padding: 12px 14px 12px; }
    .lab-dai-referenz, .lab-dai-funke { width: 48px; height: 48px; }
    /* Die Zeilenzahl setzt lab.js je Modus (der Planen-Platzhalter braucht hier
       vier Zeilen) — field-sizing:content könnte das allein, kann Safari aber
       noch nicht. */
    .lab-dai-text { min-height: 72px; }
    .lab-dai-plus { width: 44px; height: 44px; }
    .lab-dai-pille, .lab-dai-chip { min-height: 44px; padding: 10px 14px; }
    /* Leiste in drei Zeilen (Prüfrunde 05.10.2026): oben Plus · Credits ·
       Mikro, darunter die Vorgaben über die ganze Breite, dann Generieren.
       Vorher standen die Pillen als 66-px-Säule zwischen Credits und Mikro
       und ragten aus der Karte. Umbrechen statt wischen — die Pillen klappen
       Menüs auf, die eine scrollende Reihe abschneiden würde. */
    /* Abnahme 07.10.2026: oben die Vorgaben und gleich dahinter die Credits,
       darunter Plus · Mikrofon · Generieren auf einer Höhe. Die Pillen etwas
       enger, damit alle drei in die 302-px-Leiste passen (vorher 294 + Abstände). */
    .lab-dai-leiste .lab-dai-vorgaben { order: 1; flex: 0 1 auto; }
    .lab-dai-leiste .lab-dai-modell { order: 2; min-height: 44px; }
    .lab-dai-leiste::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
    .lab-dai-leiste .lab-dai-refs { order: 0; }
    .lab-dai-leiste .lab-dai-refs:empty { display: none; }
    .lab-dai-leiste .lab-dai-plus { order: 4; }
    .lab-dai-leiste .lab-dai-mikro { order: 5; margin-left: 0; }
    .lab-dai-leiste .lab-dai-los,
    .lab-dai-leiste .lab-dai-mikro:not([hidden]) + .lab-dai-los { order: 6; flex: 1 1 auto; justify-content: center; margin-left: 0; }
    .lab-dai-vorgaben .lab-dai-pille { padding: 10px 11px; }
    .lab-dai-los { height: 44px; }
    .lab-dai-mikro { width: 44px; height: 44px; }
    .lab-dai-h2 { font-size: 22px; }
    .lab-dai-fragezeile { font-size: 15px; padding: 14px 0; min-height: 44px; }

    /* Tap-Ziele: alles, was man mit dem Daumen trifft, auf 44 px. */
    .lab-chip { min-height: 44px; padding: 11px 16px; white-space: nowrap; }   /* die Reihe scrollt — kein Umbruch in zwei Zeilen */
    .lab-herz { width: 44px; height: 44px; }
    .lab-ico { min-height: 44px; min-width: 44px; }
    .lab-kopf .nav-lang-btn { width: 44px; height: 44px; }
    /* Das Board selbst gibt es auf dem Handy nicht (Hinweis „großer Schirm") —
       im Kopfband reicht der Speichern-Knopf als Icon, der Name hätte keinen Platz. */
    .lab-konto-box { padding: 24px 18px 20px; }
    .konto-pw-eye { width: 44px; height: 44px; }
    .lab-knopf--klein { min-height: 44px; }
    .lab-link-knopf { display: inline-flex; align-items: center; min-height: 44px; }
    /* Der Anmelden-Knopf zeigt auf dem Handy nur sein Symbol — in der Reihe
       aus M, Projekt und vier Icons ist für das Wort kein Platz. */
    .kf-page .lab-anmelden { width: 44px; padding: 0; }
    .kf-page .lab-anmelden svg { display: block; }
    .kf-page .lab-anmelden span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    /* Im Fenster untereinander: nebeneinander bleiben bei 390 px weder Bild
       noch Auswahl lesbar. */
    .lab-fenster-box { grid-template-columns: 1fr; }
    .lab-fenster-text { padding: 20px; }
    .lab-fenster-bild { min-height: 0; padding: 40px 48px 24px; }
    .lab-fenster-bild img { max-height: 46vh; }
    /* Mobil ist neben dem Fenster kein Platz: die Pfeile sitzen am Bildrand */
    #lab-grafik-fenster { max-width: calc(100vw - 32px); }
    .lab-fenster-pfeil { width: 44px; height: 44px; top: calc(40px + 23vh); }
    .lab-fenster-pfeil--l { left: 6px; }
    .lab-fenster-pfeil--r { right: 6px; }
    .lab-fenster-zu { width: 44px; height: 44px; }
    .lab-fenster-kopf .lab-herz { width: 44px; height: 44px; right: 64px; }
    .lab-fenster-teilen { width: 44px; height: 44px; right: 116px; }
    .lab-fenster-kopf { padding-right: 156px; }

    .lab-blank { width: 76px; }
    .lab-farbe { width: 36px; height: 36px; }
    .lab-fenster-mini { border-radius: 10px; }
    /* Auf dem Handy scrollt der ganze Dialog, nicht die Spalte. */
    .lab-fenster-box { height: auto; grid-template-rows: auto; }
    .lab-fenster-text { overflow: visible; }
    .lab-fenster { max-height: calc(100vh - 16px); max-height: calc(100svh - 16px); overflow-y: auto; }
    /* Mobil-Runde 2 (Julian, 16.10.2026: „kann man gar nicht richtig scrollen … X und Herz total buggy"):
       die ID-Regel oben (overflow: visible für die Außenpfeile) schlug das Scrollen —
       mobil sitzen die Pfeile innen, also darf der Dialog selbst scrollen. Teilen und
       Herz stehen in der Titelzeile, das X allein oben rechts auf dem Bild. */
    #lab-grafik-fenster { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    #lab-grafik-fenster:focus { outline: none; }
    #lab-grafik-fenster .lab-fenster-box { overflow: visible; }
    #lab-grafik-fenster .lab-fenster-zu { top: 8px; right: 8px; z-index: 3; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
    #lab-grafik-fenster .lab-fenster-zu:focus:not(:focus-visible), #lab-grafik-fenster .lab-fenster-kopf .lab-herz:focus:not(:focus-visible), #lab-grafik-fenster .lab-fenster-teilen:focus:not(:focus-visible) { outline: none; }
    #lab-grafik-fenster .lab-fenster-kopf { position: relative; padding-right: 104px; align-items: center; min-height: 44px; }
    #lab-grafik-fenster .lab-fenster-kopf .lab-herz { top: 0; right: 0; }
    #lab-grafik-fenster .lab-fenster-teilen { top: 0; right: 52px; }
    .lab-logo { width: 44px; height: 44px; }
    .lab-logo { width: 44px; }
    .lab-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .lab-raster--pin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-rows: 6px; }
    .lab-raster--pin .lab-gfx-fuss .lab-herz { left: 8px; right: auto; top: 8px; }
    .lab-raster--pin .lab-gfx-mehr { right: 8px; top: 8px; }
    .lab-gfx-fuss { padding: 10px; gap: 4px; }
    .lab-gfx-fuss span { font-size: 12.5px; }
    .lab-gfx-mehr > summary { width: 44px; height: 44px; }
    .lab-gfx-punkt { min-height: 44px; display: flex; align-items: center; }
    .lab-produkte-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .lab-bl-herz { width: 44px; height: 44px; left: 8px; top: 8px; }
    .lab-bl-plus { width: 44px; height: 44px; right: 8px; top: 8px; }
    .lab-bl-menue { right: 8px; top: 58px; }
    .lab-bl-menue-punkt { min-height: 44px; display: flex; align-items: center; }
    /* Die Menüs hängen am Zeilenanfang, nicht am eigenen Knopf — sonst ragte
       „Ansicht" rechts aus dem Bildschirm (Review, 24.09.2026). */
    .lab-produkte-filter { position: relative; }
    .lab-filter--zart { position: static; }
    .lab-filter--zart .lab-filter-fenster { left: 0; right: auto; top: calc(100% + 4px); }
    .lab-bl-preis { flex-direction: column; align-items: flex-start; gap: 2px; }
    .lab-bl-preis small { text-align: left; }
    .lab-produkte-filter { gap: 16px; }
    .lab-qf { min-height: 44px; }
    .lab-produkte-note { display: none; }   /* der Unisex-Satz braucht auf dem Handy die Zeile nicht */
    /* Story: Bild nicht klebend, sondern in jedem Block */
    .lab-everplain { margin-top: 44px; }
    .lab-hashtags { margin: 0 -16px 28px; }
    .lab-story { display: block; }
    .lab-story-media { display: none; }
    .lab-story-punkt { min-height: 0; opacity: 1; padding: 28px 0; }
    .lab-story-punkt-bild { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; margin-bottom: 22px; }
    .lab-story-punkt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .lab-story-h { margin-bottom: 16px; }
    .lab-reiter-knopf { padding: 0 10px; }
    .lab-kopf .lab-reiter { overflow-x: auto; scrollbar-width: none; }
    .lab-band { margin: 0 -16px 22px; padding: 0 16px; }
    .lab-laufband { margin: 0 -16px; }
    .lab-band-kachel { width: 210px; }
    .lab-abschnitt-titel { font-size: 18px; }
    .lab-cover-raster { grid-template-columns: 1fr; }
    .lab-bereich-kopf { margin-bottom: 16px; }
    .lab-filter-zeile { min-height: 44px; }
    .lab-filter-zeile input { width: 20px; height: 20px; }
    .lab-start-entdecken { margin-top: 28px; }
    .lab-chips { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .lab-chips::-webkit-scrollbar { display: none; }
    /* Bei 390 px teilen sich M, Projekt, vier Bereiche und vier Icons eine
       Zeile — das geht nicht auf: für die Bereiche blieben keine 70 px. Sie
       bekommen deshalb eine eigene Zeile direkt unter der Kopfzeile, die
       waagerecht scrollt (wie in Julians Apple-Vorlage auf dem Handy). EIN
       Markup für beides, nur die Verankerung wechselt. */
    :root { --lab-bereiche-h: 44px; }
    /* Die Bereiche liegen hier außerhalb des Flusses (position:absolute), die
       Kopfzeile ist damit wieder eine simple Reihe: links M und Projekt,
       rechts die Icons. Der Projektname weicht als Erstes (Textkürzung),
       bevor irgendetwas aus dem Bild läuft. */
    .lab-kopf { display: flex; gap: 6px; padding: 0 10px; }
    .lab-kopf-links { gap: 6px; min-width: 0; }
    .lab-kopf-rechts { margin-left: auto; flex: none; }
    .lab-bereiche {
        position: absolute; top: 100%; left: 0; right: 0;
        height: var(--lab-bereiche-h);
        padding: 0 12px;
        background: #fff;
        border-bottom: 1px solid var(--lab-rand);
        justify-content: center;   /* mittig (Abnahme 07.10.2026); ≤ 480 px über die ganze Breite verteilt */
    }
    .lab-bereich { padding: 0 10px; font-size: 12.5px; }
    .lab-chips { justify-content: flex-start; }
    .lab-inhalt { padding: 22px 16px 40px; }
    .lab-reiter-zeile { padding: 0 16px; }
    .lab-h1 { font-size: 27px; }
    .lab-kacheln { grid-template-columns: 1fr; }

    /* Bestell-Detail: Positionen und Summe untereinander. */
    .lab-spalten { grid-template-columns: 1fr; gap: 8px; }
    /* In der Zeile hat der Betrag neben Nummer, Datum und Abzeichen keinen
       Platz mehr — er wandert unter den Titel. */
    .lab-zeile { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
    .lab-zeile-haupt { flex: 1 1 100%; }
    .lab-zeile-pfeil { margin-left: auto; }
    .lab-formular { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lab-kachel:hover { transform: none; }
    .lab-story-rahmen > img, .lab-story-punkt { transition: none; }
    .lab-logo-m { animation: none; }
    .lab-bereich-ic, .lab-bereich::after { transition: none; }
    .lab-bereich:hover .lab-bereich-ic { transform: none; }
}

/* ── Erzeugen in Explore (Julian, 01.10.2026) ─────────────────────────────
   Das Ergebnis steht unter dem Feld, nicht in einem Fenster: man sieht noch,
   was man geschrieben hat, und kann gleich nachbessern. */
.lab-dai-status { margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.82); }
.lab-dai-status--fehler { color: #ffb4a6; }
/* Das Erzeugen-Fenster (05.10.2026): erst die Lade-Kachel (dai-laden.css),
   dann das Ergebnis. Seit dem 06.10.2026 aus denselben Bauteilen wie das
   D.AI-Panel im Konfigurator (.kf-ki-*, ebenfalls dai-laden.css) — Julian:
   „wenn bereiche quasi gleich sind sollen sie auch gleich aussehen". Hier
   steht nur noch, was es im Konfigurator nicht gibt: der Fensterrahmen und
   die zwei zusätzlichen Wege. */
.lab-dai-dialog { width: min(420px, calc(100vw - 32px)); }
.lab-dai-dialog-box { position: relative; padding: 22px 22px 20px; text-align: left; }
.lab-dai-dialog .lab-fenster-zu { position: absolute; top: 12px; right: 12px; }
.lab-dai-dialog-titel { margin: 0 44px 14px 0; font-size: 15px; font-weight: 700; color: var(--kf-ink); }
.lab-dai-dialog .kf-ki-skelett { margin-top: 4px; }
/* Die zwei Wege: dieselben Knöpfe wie „Ins Design einfügen" im Konfigurator
   (Werte aus konfigurator.css .kf-btn-primary/.kf-btn-ghost, Radius 2 px).
   Nebeneinander (Julian, 12.10.2026); reicht die Breite nicht, brechen sie um. */
.lab-dai-wege { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-dai-wege > * { flex: 1 1 150px; }
/* Spezifischer als die Knopf-Regel darunter, sonst stünden „Aufs Board" und
   „Auf dem Board — öffnen" gleichzeitig da */
.lab-dai-dialog .lab-dai-wege [hidden] { display: none; }
.lab-dai-dialog .kf-btn-primary,
.lab-dai-dialog .kf-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 14px; border-radius: 2px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; text-align: center; transition: opacity .2s, border-color .2s, color .2s;
}
.lab-dai-dialog .kf-btn-primary { background: var(--kf-ink); color: var(--kf-bg); border: none; }
.lab-dai-dialog .kf-btn-primary:hover { opacity: .82; }
.lab-dai-dialog .kf-btn-primary:disabled { opacity: .4; pointer-events: none; }
.lab-dai-dialog .kf-btn-ghost { background: none; color: rgba(17,17,17,.65); border: 1px solid rgba(17,17,17,.18); }
.lab-dai-dialog .kf-btn-ghost:hover { border-color: rgba(17,17,17,.45); color: var(--kf-ink); }
.lab-dai-dialog .kf-btn-ghost svg { width: 14px; height: 14px; flex: none; }
/* Während ein Anpassen rechnet, geht das Bild nicht schon halbfertig weiter */
.lab-dai-dialog .lab-dai-gesperrt { opacity: .4; pointer-events: none; }
.lab-dai-dialog [data-dai-fenster-status] { margin-top: 10px; }
@media (max-width: 480px) {
    .lab-dai-dialog .kf-ki-refine-btn { width: 44px; }
}
/* Der Erzeugen-Knopf ist nicht mehr stumm — während er arbeitet, sagt er es */
.lab-dai-los[disabled] { opacity: .55; cursor: progress; }

/* ════════════════════════════════════════════════════════════════════════
   DAS KONTO (Julian, 02.10.2026; Leiste 05.10.2026)
   Links eine feste Leiste wie im Shopify-Konto, Unterpunkte eingerückt
   darunter (layouts/lab-konto). Projekte als Karten mit Titelbild.
   ════════════════════════════════════════════════════════════════════════ */
.lab-konto-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lab-konto-av {
    width: 48px; height: 48px; flex: none; border-radius: 50%;
    background: var(--lab-schwarz); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 700;
}
.lab-konto-unter { margin: 2px 0 0; font-size: 13.5px; color: var(--lab-sek); }

/* Raster: Leiste links, Seite rechts. Die Leiste klebt unter der Kopfzeile. */
.lab-konto-rahmen--leiste { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
.lab-konto-leiste {
    position: sticky; top: calc(var(--lab-kopf-h) + var(--lab-bereiche-h));
    padding: 28px 8px 28px 20px;
    max-height: calc(100vh - var(--lab-kopf-h) - var(--lab-bereiche-h));
    max-height: calc(100svh - var(--lab-kopf-h) - var(--lab-bereiche-h));
    overflow-y: auto;
}
.lab-konto-flaeche { min-width: 0; }
.lab-konto-nav { display: flex; flex-direction: column; gap: 2px; }
.lab-konto-weg {
    display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px;
    text-decoration: none; font-size: 14px; font-weight: 600; color: var(--lab-schwarz); white-space: nowrap;
}
.lab-konto-weg:hover { background: rgba(13, 13, 13, .05); }
/* Aktiv wie bei Shopify: helle Fläche, kein schwarzer Block */
.lab-konto-weg.aktiv { background: var(--lab-flaeche-2); }

.lab-konto-reihe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.lab-konto-reihe .lab-h2 { margin: 0; }
.lab-konto-reihe .lab-zaehler { margin-left: 6px; vertical-align: middle; }
/* Favoriten und Bibliothek in der Übersicht (15.10.2026): eine Reihe kleiner Kacheln */
.lab-konto-vorschau { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.lab-konto-vorschau .lab-gfx-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Bibliothek: Logos und Dateien ganz zeigen, nicht anschneiden */
.lab-konto-vorschau--dateien .lab-gfx-bild img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.lab-sicherheit-loeschen .lab-knopf { margin-top: 12px; }
.lab-konto-vorschau .lab-gfx-fuss span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Die Projektseite (05.10.2026): Name, Board, Bestellungen, Bibliothek,
   Notizen untereinander — jede Gruppe mit demselben Abstand. ── */
.lab-konto-abschnitt { margin-top: 34px; }
.lab-konto-abschnitt > .lab-h2:first-child { margin-top: 0; }

.lab-knopf--gefahr { background: #b42318; color: #fff; }
.lab-knopf--gefahr:hover { background: #8f1c13; }

.lab-konto-abschnitt .lab-bereich-kopf { align-items: center; margin-bottom: 10px; }
.lab-konto-abschnitt .lab-bereich-kopf .lab-h2 { margin: 0; }

.lab-leer { font-size: 13.5px; color: var(--lab-sek); }
/* Schmal: die Leiste wird eine wischbare Reihe über der Seite, Unterpunkte
   stehen flach mit drin. 44 px hoch (Tap-Regel, vorher 40 px). */
@media (max-width: 820px) {
    .lab-konto-rahmen--leiste { display: block; }
    .lab-konto-leiste {
        position: static; max-height: none; overflow: visible;
        padding: 14px 0 0; border-bottom: 1px solid var(--lab-rand);
    }
    .lab-konto-nav {
        flex-direction: row; gap: 2px; overflow-x: auto; padding: 0 12px 10px;
        scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .lab-konto-nav::-webkit-scrollbar { display: none; }
    /* Etwas kleiner, damit alle vier ohne Wischen passen (Julian, 16.10.2026 —
       vorher erst ab ~412 px, „Sicherheit" war angeschnitten). Mit Team sind es
       fünf: dann blendet der rechte Rand aus und lädt zum Wischen ein. */
    .lab-konto-nav:has(> :nth-child(5)) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    .lab-konto-weg {
        flex: none; min-height: 44px; padding: 0 10px; border-radius: 999px;
        font-size: 13px; font-weight: 600; color: var(--lab-sek);
    }
    .lab-konto-weg.aktiv { background: var(--lab-schwarz); color: #fff; }
}

/* ── Firmenkonto (Julian, 02.10.2026) ─────────────────────────────────── */
.lab-karte--block { display: block; padding: 20px; }
.lab-karte--block .lab-h2 { margin-top: 0; }
.lab-team-wechsel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.lab-team-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 18px; }
.lab-team-zeile {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 14px; border: 1px solid rgba(13, 13, 13, .08); border-radius: 12px; background: #fff;
}
.lab-team-av {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    background: var(--lab-schwarz); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.lab-team-wer { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.lab-team-wer b { font-size: 13.5px; }
.lab-team-wer small { font-size: 12px; color: var(--lab-sek); }
.lab-team-wer .lab-team-darf { margin-top: 3px; color: var(--lab-schwarz); }
/* Einladen: Adresse, darunter die Häkchen, darunter der Knopf (05.10.2026) */
.lab-team-einladen { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 520px; margin-bottom: 8px; }
.lab-team-einladen input[type="email"] {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid rgba(13, 13, 13, .12); border-radius: 10px; font: inherit; font-size: 16px;
}
/* Rechte je Person: zu steht der Knopf rechts in der Zeile, offen nimmt die
   Liste die volle Breite darunter, der Knopf bleibt rechts oben stehen. */
.lab-team-rechte { margin-left: auto; }
.lab-team-rechte[open] { flex-basis: 100%; margin-left: 0; }
.lab-team-rechte > summary { list-style: none; display: flex; width: max-content; margin-left: auto; }
.lab-team-rechte > summary::-webkit-details-marker { display: none; }
.lab-team-rechte[open] > summary { margin-bottom: 10px; }
.lab-team-rechte-form { max-width: 520px; }
/* „+" vor „Rechte" (05.10.2026): offen wird es ein Minus */
.lab-team-plus { display: inline-block; width: 12px; margin-right: 4px; font-weight: 600; text-align: center; transition: transform .15s; }
.lab-team-rechte[open] .lab-team-plus { transform: rotate(45deg); }
/* Beim Einladen steht das Aufklappen links unter der Adresse, nicht rechts in einer Zeile */
/* Ohne Firmenkonto: „Team" ausgegraut, ein Klick führt zum Aktivieren */
.lab-konto-weg--aus { color: rgba(13, 13, 13, .38); }
/* Firmendaten nur lesen */
.lab-firmendaten-liste { display: grid; gap: 10px; max-width: 520px; margin: 0; }
.lab-firmendaten-liste dt { font-size: 12px; color: var(--lab-sek); }
.lab-firmendaten-liste dd { margin: 2px 0 0; font-size: 14px; }
.lab-team-rechte-fuss { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Die Häkchenliste (partials/lab-team-rechte): eine Zeile je Recht, Titel und
   Satz darunter; „Alles auswählen" unten, durch einen Strich getrennt. */
.lab-rechte { border: 0; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; }
.lab-rechte legend { font-size: 13px; font-weight: 600; color: var(--lab-sek); padding: 0; margin-bottom: 4px; }
.lab-recht { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.lab-recht input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--lab-schwarz); cursor: pointer; }
.lab-recht span { display: flex; flex-direction: column; gap: 1px; }
.lab-recht b { font-size: 13.5px; font-weight: 600; }
.lab-recht small { font-size: 12px; color: var(--lab-sek); }
.lab-recht:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.lab-recht:has(input:disabled) input { cursor: not-allowed; }
.lab-recht--alle { border-top: 1px solid var(--lab-rand); margin-top: 4px; padding-top: 12px; }
.lab-team-link {
    flex: 1; min-width: 220px; height: 34px; padding: 0 10px;
    border: 1px solid rgba(13, 13, 13, .12); border-radius: 10px;
    background: #fafafa; font: inherit; font-size: 11.5px; color: var(--lab-sek);
}
.lab-team-firma { max-width: 520px; padding: 0; }   /* bündig mit der Seite, nicht 20 px eingerückt */
.lab-team-zwei { display: flex; gap: 12px; }
.lab-team-zwei > span { flex: 1; display: flex; flex-direction: column; }

/* ── iOS zoomt bei Feldern unter 16 px hinein (Mobil-Checkliste) ──────────
   Prüfrunde 05.10.2026, auf einem iPhone-Profil gemessen: die Projektwahl
   (13,5), „Name des Projekts" (13), „Eigener Wert" in den D.AI-Vorgaben (12),
   der Einladungslink im Team (11,5) und der Link im Freigeben-Fenster (12,5)
   lagen darunter. Gilt für Touch-Geräte und schmale Fenster. */
@media (pointer: coarse), (max-width: 820px) {
    .lab-dai-eigen input,
    .lab-team-link,
    #mm-frei-link { font-size: 16px; }
}

/* Bereichsleiste auf dem Handy (Julian, 06.10.2026: „sieht noch nicht mittig
   aus"): bei 390 px lief „Konfigurator" rechts aus dem Bild. Alle vier stehen
   jetzt in einer Reihe über die ganze Breite — Zeichen und Wort bleiben, nur
   etwas enger gesetzt. */
@media (max-width: 480px) {
    .lab-bereiche { justify-content: space-between; }
    .lab-bereiche { padding: 0 6px; gap: 0; }
    .lab-bereich { padding: 0 6px; gap: 5px; font-size: 12px; }
    .lab-bereich-ic svg { width: 16px; height: 16px; }
}

/* ── Profil bearbeiten (Julian, 06.10.2026) ────────────────────────────────
   Das Bild ist der Knopf: ein Klick wählt eine Datei (lab.js schickt ab), der
   Stift unten rechts zeigt, dass es geht. Name und E-Mail als Zeilen mit Feld
   und Knopf — dieselbe Form wie die übrigen Kontofelder. */
.lab-profil-bild { margin: 0; }
.lab-profil-av { position: relative; cursor: pointer; overflow: visible; }
.lab-profil-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.lab-profil-av-stift {
    position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; color: var(--lab-schwarz); border: 1px solid var(--lab-rand);
    display: inline-flex; align-items: center; justify-content: center;
}
.lab-profil-av-stift svg { width: 12px; height: 12px; }
.lab-profil-av:hover .lab-profil-av-stift, .lab-profil-av:focus-within .lab-profil-av-stift { background: var(--lab-schwarz); color: #fff; }
.lab-profil-felder { margin-top: 28px; max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
.lab-profil-felder .lab-h2 { margin: 0; }
.lab-profil-zeile { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.lab-profil-zeile > label, .lab-profil-label { font-size: 12.5px; font-weight: 600; }
.lab-profil-feld { display: flex; gap: 8px; }
.lab-profil-feld input {
    flex: 1; min-width: 0; height: 42px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid rgba(13, 13, 13, .14); border-radius: 10px; font: inherit; font-size: 14px;
}
.lab-profil-feld input:focus { outline: none; border-color: var(--lab-schwarz); }
.lab-profil-zeile .lab-fussnote { margin: 0; }
.lab-profil-felder { margin-bottom: 28px; }
.lab-profil-entfernen {
    align-self: flex-start; border: 0; background: none; padding: 4px 0; cursor: pointer;
    font: inherit; font-size: 12.5px; color: var(--lab-sek); text-decoration: underline; text-underline-offset: 3px;
}
.lab-profil-entfernen:hover { color: var(--lab-schwarz); }
/* Transparente Bilder (weißes Logo) blieben auf Weiß unsichtbar — schwarzer Grund wie die Initiale */
.kopf-konto-bild > img, .lab-profil-av img { background: var(--lab-schwarz); }
@media (pointer: coarse), (max-width: 820px) { .lab-profil-entfernen { min-height: 44px; } }
@media (pointer: coarse), (max-width: 820px) {
    .lab-profil-feld input { font-size: 16px; height: 44px; }
    .lab-profil-feld .lab-knopf { min-height: 44px; }
}

/* ── D.AI-Zeichen auf KI-Bildern (Julian, 06.10.2026: „ganz klein und auch nur
   ganz leicht zu sehen … unten drauf"). Weiß mit weichem Schatten, damit es
   auf hellen wie dunklen Fotos lesbar bleibt, ohne aufzufallen. Nur Explore,
   Favoriten und das D.AI-Fenster — nie Konfigurator und Board. ── */
.dai-stempel {
    position: absolute; right: 10px; bottom: 10px; z-index: 1;
    display: inline-flex; align-items: center; gap: 3px;
    font: 600 9.5px/1 'DM Sans', sans-serif; letter-spacing: .04em;
    color: #fff; opacity: .62;
    text-shadow: 0 0 3px rgba(0, 0, 0, .5);
    pointer-events: none; user-select: none;
}
.dai-stempel svg { width: 12px; height: 12px; flex: none; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); }   /* nur das Symbol (07.10.2026) */
.dai-stempel[hidden] { display: none; }
.dai-stempel--fenster { right: 12px; bottom: 12px; }
/* Kacheln „Bisher erzeugt": nur das Zeichen, die Schrift wäre dort Krümel */
.dai-stempel--klein { right: 5px; bottom: 5px; font-size: 0; gap: 0; }
.dai-stempel--klein svg { width: 10px; height: 10px; }
/* Der Rahmen ist so groß wie das Bild — das Zeichen sitzt auf dem Foto */
.lab-fenster-bild-rahmen { position: relative; display: block; max-width: 100%; line-height: 0; }
/* Auf dem hellen Karo der D.AI-Ergebnisse verschwände Weiß — dort dunkel */
.kf-ki-vorschau .dai-stempel, .kf-ki-galerie-item .dai-stempel { color: #111; opacity: .45; text-shadow: none; }
.kf-ki-vorschau .dai-stempel svg, .kf-ki-galerie-item .dai-stempel svg { filter: none; }
/* KI-Titelbild einer Season (06.10.2026): das Zeichen unten rechts im Hero und auf der Kachel */
.dai-stempel--hero { right: 16px; bottom: 14px; }
/* Weitere KI-Fotos im Create-Bereich (07.10.2026): Anker für das Zeichen */
.lab-band-kachel{ position: relative; }
.dai-stempel--band { right: 8px; bottom: 8px; }

/* Profil (Abnahme 07.10.2026): Felder erst über „Ändern" bearbeitbar */
.lab-profil-feld input[readonly] { background: var(--lab-flaeche); border-color: transparent; color: var(--lab-schwarz); }
.lab-profil-abbrechen {
    flex: none; width: 36px; height: 36px; align-self: center; border: 0; border-radius: 50%;
    background: var(--lab-flaeche-2); color: var(--lab-schwarz); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.lab-profil-abbrechen[hidden] { display: none; }
.lab-profil-abbrechen svg { width: 14px; height: 14px; }
/* Passwort ändern und Konto löschen: schmal, nicht über die volle Breite;
   Löschen in Rot */
.lab-konto { border: 0; border-radius: 0; background: none; overflow: visible; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.lab-konto > .lab-hinweis { flex-basis: 100%; }
.lab-details + .lab-details { border-top: 0; }
.lab-details > summary {
    min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--lab-flaeche);
    font-size: 13.5px; font-weight: 600; list-style: none; width: max-content;
}
.lab-details > summary::-webkit-details-marker { display: none; }
.lab-details[open] { flex-basis: 100%; }
.lab-details[open] > summary { margin-bottom: 4px; }
.lab-details .lab-formular { padding: 8px 0 4px; }
.lab-details--loeschen > summary { color: #b91c1c; }
.lab-fenster.lab-loeschen-frage,
.lab-fenster.lab-passwort-fenster { width: min(440px, calc(100vw - 32px)); max-width: none; display: block; }
/* Geschlossen versteckt — das display:block oben hob sonst das Verstecken des <dialog> auf (Fund 10.10.2026) */
.lab-fenster.lab-loeschen-frage:not([open]),
.lab-fenster.lab-passwort-fenster:not([open]) { display: none; }
/* Sicherheit (15.10.2026): Passwort als Punkte, Knopf daneben */
.lab-sicherheit-passwort { flex-wrap: wrap; }   /* Google-Konten: zwei Knöpfe, am Handy untereinander */
.lab-sicherheit-wert { flex: 1; letter-spacing: .12em; color: var(--lab-sek); align-self: center; }
.lab-loeschen-box { padding: 26px 26px 22px; }
.lab-loeschen-box h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--lab-schwarz); }
.lab-loeschen-box p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--lab-sek); }
.lab-loeschen-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* „+ Personen hinzufügen" (07.10.2026): der Klick zeigt Adresse und Rechte */
.lab-team-hinzufuegen > summary { list-style: none; width: max-content; }
.lab-team-hinzufuegen > summary::-webkit-details-marker { display: none; }
.lab-team-hinzufuegen[open] > summary { margin-bottom: 12px; }
.lab-team-hinzufuegen[open] .lab-team-plus { transform: rotate(45deg); }
.lab-team-anlegen { padding: 0; max-width: 520px; margin-top: 8px; }

/* Übernahme-Schritt nach dem Kontowechsel (lab/team.blade.php, 07.10.2026).
   .lab-recht setzt display:flex und schlüge sonst das hidden leerer Zeilen. */
.lab-mitnehmen[hidden], .lab-mitnehmen [hidden] { display: none !important; }
.lab-mitnehmen .lab-rechte { margin: 6px 0 14px; }
.lab-mitnehmen-zahl { font-weight: 500; color: var(--lab-sek); margin-left: 4px; }
.lab-karte > .lab-mitnehmen-knoepfe { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }
.lab-mitnehmen .lab-mitnehmen-knoepfe .lab-knopf { width: auto; margin: 0; flex: 0 0 auto; }
/* Die Löschliste im Bestätigungsfenster (Etappe F, 10.10.2026) */
.lab-mitnehmen-weg { margin: 4px 0 16px; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.lab-mitnehmen-weg[hidden] { display: none; }

/* Projekte in der Wahl am Herz (seit 08.10.2026, davor im Kartenmenü): je
   Projekt ein Häkchen — gesetzt heißt „in diesem Projekt gemerkt". */
.lab-herz-wahl [data-herz-liste] { display: flex; flex-direction: column; gap: 2px; }
.lab-gfx-projekte-titel { margin: 2px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lab-sek); }
.lab-gfx-projekt { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.lab-gfx-haken { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--lab-rand); border-radius: 5px; display: grid; place-items: center; color: transparent; }
.lab-gfx-haken svg { width: 13px; height: 13px; }
.lab-gfx-projekt[aria-pressed="true"] .lab-gfx-haken { background: var(--lab-schwarz); border-color: var(--lab-schwarz); color: #fff; }
.lab-gfx-projekt > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bereich „Firma" (08.10.2026): Team und Firmendaten als Reiter */
.lab-firma-reiter { display: flex; gap: 4px; margin: -4px 0 22px; border-bottom: 1px solid var(--lab-rand); }
.lab-firma-reiter-punkt { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--lab-sek); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lab-firma-reiter-punkt:hover { color: var(--lab-schwarz); }
.lab-firma-reiter-punkt.aktiv { color: var(--lab-schwarz); border-bottom-color: var(--lab-schwarz); }
.lab-profil-firma { margin-bottom: 28px; }

/* Konto/Firma löschen im Fenster (08.10.2026) */
.lab-loeschen-box.lab-formular { display: grid; gap: 10px; }
.lab-loeschen-firma { border: 1px solid var(--lab-rand); border-radius: 12px; padding: 10px 14px; margin: 6px 0 0; }
.lab-loeschen-firma legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.lab-recht--warn b { color: #b91c1c; }
.lab-firma-loeschen { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--lab-rand); }

/* Die Wahl am Herz (lab.js labHerz, 08.10.2026): dieselbe Liste mit Häkchen,
   die bis dahin im Kartenmenü stand, jetzt am Herz — fixed, damit sie aus Karte
   und Grafik-Fenster herausragen darf. */
.lab-gfx-menue.lab-herz-wahl { position: fixed; right: auto; bottom: auto; z-index: 1200; min-width: 200px; max-width: calc(100vw - 16px); }

/* ═══ Knöpfe = Pille wie auf der Startseite (Julian, 09.10.2026) ═══
   „Orientiere dich an diesem Button von der Startseite … immer gleich in dieser
   Pillenform." Form und Schrift für alle Text-Knöpfe, die FARBEN bleiben (Julian:
   „jetzt aber keine Knöpfe groß farbig anpassen"). Ersetzt die Regel vom 10.09.2026
   („mit Text nicht mehr rund"). Regeln: docs/MMD-DESIGN-DNA.md „Knöpfe = Pille". */
.lab-dai-dialog .kf-btn-primary, .lab-dai-dialog .kf-btn-ghost, .lab-knopf {
  border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px;
}
a.lab-knopf:not(.lab-knopf--leise):not(.lab-korb-weiter):not(:has(svg))::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; flex: none; vertical-align: -2px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* „Aufs Board" unter einer Branchen-/Season-Karte (12.10.2026) */
.lab-vorlage-board { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 16px; border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--lab-schwarz); cursor: pointer; }
.lab-vorlage-board:hover { background: var(--lab-schwarz); color: #fff; border-color: var(--lab-schwarz); }
@media (max-width: 820px) { .lab-vorlage-board { min-height: 44px; } }

/* ── Referenzbilder im Feld statt daneben (Julian, 09.10.2026, Bilder 26/27) ──
   Ein Bild füllt das graue Feld, mehrere liegen als leicht gefächerter Stapel
   darin, die Zahl unten rechts. × oben rechts nimmt das oberste weg. */
.lab-dai-stapel {
    position: relative; width: 66px; height: 66px; flex-shrink: 0;
    border-radius: 14px; cursor: pointer; outline: none;
}
.lab-dai-stapel[hidden] { display: none; }
.lab-dai-stapel:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lab-schwarz); }
.lab-dai-stapel-bild {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    border-radius: 14px; border: 2px solid #fff; background: #f4f4f2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.lab-dai-stapel--mehr .lab-dai-stapel-bild--0 { transform: none; z-index: 3; }
.lab-dai-stapel--mehr .lab-dai-stapel-bild--1 { transform: rotate(-12deg) translate(-10px, 1px) scale(.9); z-index: 2; }
.lab-dai-stapel--mehr .lab-dai-stapel-bild--2 { transform: rotate(12deg) translate(10px, 1px) scale(.9); z-index: 1; }
.lab-dai-stapel-zahl {
    position: absolute; right: -6px; bottom: -6px; z-index: 4; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: var(--lab-schwarz); color: #fff; border: 2px solid #fff;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.lab-dai-stapel-weg {
    position: absolute; top: -7px; right: -7px; z-index: 4; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #fff; background: var(--lab-schwarz); color: #fff; padding: 0; cursor: pointer;
    font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
@media (pointer: coarse) { .lab-dai-stapel-weg::after { content: ''; position: absolute; inset: -11px; } }
@media (max-width: 820px) { .lab-dai-stapel { width: 48px; height: 48px; } }

/* ── Planen als Gespräch im Seitenfluss (Julian, 14.10.2026, Runde 2) ────────
   „Nicht wie so ein Popup … dass dich das dann so nach unten zieht … das Bild
   dahinter verdunkelt und dann die erste Nachricht so als schöne kurze
   Animation." Der Kopf wächst auf Bildschirmhöhe (unter der Menüleiste), der
   Verlauf scrollt darin, das Feld bleibt unten — die Seite darunter bleibt
   ganz normal scrollbar. Die Antworten schweben auf dem abgedunkelten Foto. */
.lab-dai--chat .lab-dai-hero {
    min-height: calc(100vh - var(--lab-kopf-h) - var(--lab-bereiche-h) - 24px);
    min-height: calc(100svh - var(--lab-kopf-h) - var(--lab-bereiche-h) - 24px);
    height: calc(100svh - var(--lab-kopf-h) - var(--lab-bereiche-h) - 24px);
}
.lab-dai-schleier { transition: background .6s ease; }
.lab-dai--chat .lab-dai-schleier { background: linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .74)); }
.lab-dai--chat .lab-dai-innen { justify-content: flex-start; height: 100%; padding: 18px 24px 24px; }
.lab-dai--chat .lab-dai-modus { flex: none; margin-bottom: 12px; }
.lab-dai--chat .lab-dai-chat {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    width: min(900px, 100%); margin: 0 auto 14px; padding: 0;
    background: none; box-shadow: none; border-radius: 0; animation: none;
}
.lab-dai--chat .lab-dai-chat-verlauf {
    flex: 1 1 auto; min-height: 0; max-height: none; padding: 8px 4px 4px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px);
            mask-image: linear-gradient(180deg, transparent 0, #000 24px);
}
.lab-dai--chat .lab-dai-blase--ki { background: rgba(255, 255, 255, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.lab-dai--chat .lab-dai-blase--nutzer { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(10px); }
.lab-dai--chat .lab-dai-blase--tippt { background: rgba(255, 255, 255, .96); }
.lab-dai--chat .lab-dai-box { flex: none; }
/* Neue Nachricht: kurz von unten einblenden */
.lab-dai-blase--ein { animation: lab-dai-blase-ein .45s cubic-bezier(.2, .8, .2, 1) both; }
.lab-dai-blase--spaet { animation-delay: .35s; }   /* erst wächst der Kopf, dann kommt die Nachricht */
@keyframes lab-dai-blase-ein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lab-dai-blase--ein { animation: none; } .lab-dai--chat .lab-dai-hero, .lab-dai-schleier { transition: none; } }
/* Neu beginnen: unten in der Leiste (statt im Kopf), leise Pille */
.lab-dai-neu {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px; background: #fff;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--lab-schwarz); cursor: pointer;
}
.lab-dai-neu:hover { background: #f5f5f3; }
.lab-dai-neu svg { width: 14px; height: 14px; }
.lab-dai-neu[hidden] { display: none; }
@media (max-width: 820px) {
    .lab-dai--chat .lab-dai-innen { padding: 12px 12px 12px; }
    .lab-dai-neu { min-height: 44px; }
}

/* ── Reine Grafiken als Karten auf Explore (Julian, 09.10.2026, Bild 30) ──────
   Farbige Kachel, die Zeichnung als Maske in der Druckfarbe — wie ein Motiv
   ohne Shirt. Gleiche Kartenform wie die Produktkarten, quadratisch. */
.lab-gfx-flaeche { position: relative; display: block; aspect-ratio: 1 / var(--gfx-verh, 1); border-radius: inherit; overflow: hidden; }
/* Weiße Kachel braucht eine Kante, sonst verschwindet sie im Seitengrund (Runde 2) */
.lab-gfx-flaeche--weiss { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .07); }
/* Spezifischer als .lab-gfx-bild img (cover, 100 %) — sonst schnitt das Motiv am Rand ab */
.lab-gfx-flaeche img.lab-gfx-druck { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.lab-gfx-flaeche:hover img.lab-gfx-druck { transform: scale(1.04); }
.lab-gfx-zeichnung {
    position: absolute; inset: 16%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.lab-gfx-flaeche:hover .lab-gfx-zeichnung { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .lab-gfx-zeichnung { transition: none; } }

/* Kein Doppeltipp-Zoom auf Bedienelementen (Julian, 16.10.2026: „bei der
   Stückzahl Plus und Minus … schnell tippt, zoomt er dann so rein"). Safari
   wertete zwei schnelle Tipps auf + oder − als Zoom-Geste. manipulation lässt
   Tippen und Pinch-Zoom zu und nimmt nur den Doppeltipp-Zoom (und die 300-ms-
   Wartezeit) weg. Steht in jedem Haupt-Stylesheet, weil nicht jede Seite alle lädt.
   :where() hält die Spezifität bei 0 — sonst schlug [role="button"] eigene
   touch-action: none wie den Griff der Kontextleiste (Review 16.10.2026). */
:where(a, button, input, select, textarea, label, summary, [role="button"], [role="switch"], [onclick]) { touch-action: manipulation; }

/* ── D.AI mobil (Mobil-Runde 2, Julian 16.10.2026: „bisher erzeugt, automatisch,
   bunt passen nicht … Antworten bei Planen viel zu klein … viel zu kleines
   Fenster") ── „Bisher erzeugt" und „Neu beginnen" bekamen eine eigene Zeile
   und machten das Feld höher; im Gespräch war das Feld (363 px) größer als der
   Verlauf (253 px). Jetzt: beide als runder Knopf unten neben dem Mikrofon,
   im Gespräch ein schlankes Feld ohne Vorgaben, Antworten 15 px. */
@media (max-width: 820px) {
    .lab-dai-leiste .lab-dai-neu { order: 4; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; flex: none; }
    .lab-dai-leiste .lab-dai-neu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lab-dai-leiste .lab-dai-neu svg { width: 17px; height: 17px; }
    .lab-dai--chat .lab-dai-vorgaben { display: none; }
    .lab-dai--chat .lab-dai-text { min-height: 0; height: 64px; }   /* zwei Zeilen, scrollt bei mehr */
    .lab-dai--chat .lab-dai-box { padding: 10px 12px; }
    .lab-dai--chat .lab-dai-innen { padding: 10px 10px 10px; }
    .lab-dai--chat .lab-dai-modus { margin-bottom: 8px; }
    .lab-dai-blase { font-size: 15px; max-width: 92%; }
    .lab-dai-option { font-size: 14px; }
    .lab-dai-eigen input { font-size: 16px; }   /* sonst zoomt iOS beim Hineintippen */
}
/* 360 px: drei Vorgaben und „Generieren" passen sonst nicht in je eine Zeile */
@media (max-width: 374px) {
    .lab-dai-vorgaben { gap: 5px; }
    .lab-dai-vorgaben .lab-dai-pille { padding: 9px 9px; font-size: 12px; gap: 5px; }
    .lab-dai-leiste .lab-dai-los { padding: 0 12px; min-width: 0; }
    .lab-dai-leiste .lab-dai-plus { width: 36px; }
    .lab-dai-text { min-height: 90px; }
    .lab-dai--chat .lab-dai-text { min-height: 0; }
}

/* ── D.AI-Feld mobil, zweiter Schwung (Julian, 16.10.2026, Galerie Nr. 7/15:
   „Das mit den Credits kann raus, und nicht dieses mit automatisch bunt …
   nur neben dem Mikrofon … über so einen Button … den ganzen Bereich noch ein
   bisschen länger") ── Credits weg, die Vorgaben hinter dem Regler-Knopf,
   das Feld höher. Desktop unverändert. */
.lab-dai-vorgaben-knopf { display: none; }
@media (max-width: 820px) {
    .lab-dai-leiste .lab-dai-modell { display: none; }
    .lab-dai-leiste::after { display: none; }
    .lab-dai-leiste .lab-dai-vorgaben { display: none; order: 0; flex: 1 1 100%; margin-bottom: 4px; }
    .lab-dai--vorgaben-offen .lab-dai-leiste .lab-dai-vorgaben:not([hidden]) { display: flex; }
    .lab-dai-leiste .lab-dai-vorgaben-knopf {
        order: 4; display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 44px; height: 44px; border: 1px solid rgba(17, 17, 17, .14); border-radius: 50%;
        background: #fff; color: var(--lab-schwarz); cursor: pointer; padding: 0;
    }
    .lab-dai-vorgaben-knopf svg { width: 18px; height: 18px; }
    .lab-dai-vorgaben-knopf[aria-expanded="true"] { background: var(--lab-schwarz); color: #fff; border-color: var(--lab-schwarz); }
    .lab-dai-text { min-height: 128px; }
    .lab-dai--chat .lab-dai-vorgaben-knopf { display: none; }
    /* Mehr Luft ums Feld, damit das Foto dahinter wirkt (Julian, 16.10.2026: „für dieses
       Erstellen-Fenster … mehr Platz geben … mit dem Hintergrund … sieht einfach besser aus") */
    .lab-dai-hero:not(.lab-dai--chat .lab-dai-hero) .lab-dai-innen { padding: 40px 16px 48px; }
    .lab-dai-frage { margin-bottom: 22px; }
}
@media (max-width: 374px) { .lab-dai-text { min-height: 104px; } }

/* ── D.AI mobil, flächig (Julian, 17.10.2026: „dem Bild ein bisschen mehr Platz …
   dass man das auch ganz flächig einnimmt. Dann kann man aber auch nach unten
   scrollen"; „diese Textzeile … kann sogar erst mal kleiner sein, und man
   schreibt. Dann wird das vielleicht größer") ── Der Kopf füllt den Bildschirm
   unter der Kopfzeile: oben Erstellen/Planen, unten Frage und Feld, dazwischen
   das Foto. Das Feld startet einzeilig und wächst beim Schreiben (lab.js).
   Nur mobil — Desktop unverändert. */
@media (max-width: 820px) {
    .lab-dai:not(.lab-dai--chat) .lab-dai-hero {
        min-height: calc(100vh - var(--lab-kopf-h, 56px) - var(--lab-bereiche-h, 44px) - 40px);
        min-height: calc(100svh - var(--lab-kopf-h, 56px) - var(--lab-bereiche-h, 44px) - 40px);
    }
    .lab-dai:not(.lab-dai--chat) .lab-dai-innen { justify-content: flex-start; padding: 20px 14px 16px; }
    .lab-dai:not(.lab-dai--chat) .lab-dai-frage { margin-top: auto; margin-bottom: 14px; }
    .lab-dai:not(.lab-dai--chat) .lab-dai-text { min-height: 0; height: 60px; max-height: 168px; overflow-y: auto; }   /* zwei Zeilen: der Beispieltext passt ganz hinein */
    .lab-dai:not(.lab-dai--chat) .lab-dai-box-oben { align-items: center; }
}

/* ── Explore-Einzelbild mobil, vierte Runde (Julian, 17.10.2026) ─────────────
   Teilen und Herz oben links auf dem Bild, „Konfigurieren" (Create-Farbe) neben
   dem Titel mit Pop-up, „Weitere Motive" gleich darunter als Pinterest-Raster —
   jedes Bild in seinem eigenen Format („dass jeder sich da auch diesen Platz
   nimmt, wie er den braucht"). Nur mobil. */
.lab-fenster-gestalten { display: none; }
@media (max-width: 820px) {
    .lab-fenster-bild { position: relative; }
    .lab-fenster-links { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; gap: 8px; }
    .lab-fenster-links .lab-fenster-teilen, .lab-fenster-links .lab-herz {
        position: static; width: 44px; height: 44px; margin: 0; border-radius: 50%;
        background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }
    #lab-grafik-fenster .lab-fenster-kopf { position: relative; padding-right: 0; align-items: center; gap: 10px; min-height: 44px; }
    #lab-grafik-fenster .lab-fenster-kopf .lab-h1 { font-size: 20px; }
    .lab-fenster-gestalten {
        display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 44px; padding: 0 16px;
        border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: inherit; font-size: 14px; font-weight: 700;
        background: linear-gradient(100deg, #6a6cf6 0%, #8e63ea 50%, #c25fd0 100%);
    }
    #lab-grafik-fenster .lab-fenster-kopf .lab-fenster-knoepfe {
        display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 4;
        flex-direction: column; align-items: stretch; gap: 6px; width: min(240px, 80vw); padding: 8px;
        background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(0, 0, 0, .18); margin: 0;
    }
    #lab-grafik-fenster .lab-fenster-kopf--offen .lab-fenster-knoepfe { display: flex; }
    #lab-grafik-fenster .lab-fenster-kopf .lab-fenster-knoepfe .lab-knopf { width: 100%; justify-content: center; min-height: 44px; }
    #lab-grafik-fenster .lab-fenster-mehr { margin-top: 16px; padding-top: 14px; }
    .lab-fenster-mehr-reihe { display: block; column-count: 2; column-gap: 10px; }
    .lab-fenster-mehr-reihe .lab-fenster-mini { display: block; break-inside: avoid; margin: 0 0 10px; aspect-ratio: auto; }
    .lab-fenster-mehr-reihe .lab-fenster-mini img { height: auto; }
    .lab-fenster-mehr-reihe .lab-fenster-mini:has(.lab-fenster-maske) { aspect-ratio: 1; }
}

/* Der Dialog selbst bekommt beim Öffnen den Fokus (statt des X) — ohne Rahmen, auch am Desktop */
#lab-grafik-fenster:focus { outline: none; }