/* ═══════════════════════════════════════════════════════════════════════════
   Board — dritter Modus im Konfigurator
   ---------------------------------------------------------------------------
   Übersetzt aus dem Whiteboard der V3-Vorlage. Dort war es eine Vollbildseite
   mit globalem Reset, `html, body { overflow: hidden }`, invertierten Tokens
   (`--black: #ffffff`) und sieben `position: fixed`-Elementen. Nichts davon
   ist hier übrig:

     · ALLES hängt unter #kf-board — keine Regel greift nach draußen
     · keine eigenen Farbwerte, wo es einen Konfigurator-Token gibt
     · was schwebt, liegt absolut in .kf-board-flaeche statt fixed am Viewport
       (fixed bricht, sobald ein Vorfahre transform hat — unsere Tab-Animation
       tut genau das)
     · Bauteile, die es im Konfigurator schon gibt (.kf-rail, .kf-zoom,
       .kf-btn-primary), werden benutzt statt nachgebaut
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Platz im Raster ──────────────────────────────────────────────────────
   Im Board-Modus nimmt das Board beide Spalten von .kf-body; Bühne und
   Wizard verschwinden. Ab Schritt 2 (Veredelung, Ausstattung, Anfrage) gilt
   das nicht mehr — dort braucht man den Wizard, auch wenn der Board-Modus
   noch gemerkt ist. */
.kf-board { display: none; min-height: 0; min-width: 0; }
body.kf-modus-board .kf-board {
  display: flex; flex-direction: column;
  grid-column: 1 / -1; min-height: 0;
}
body.kf-modus-board .kf-stage,
body.kf-modus-board .kf-panel { display: none; }

/* Die ganze Fläche gehört dem Board (Julian, 30.09.2026: „dann in Boards
   einfach die gesamte Fläche so machen mit dem Board, ohne Ränder … also
   einfach nur das Menü oben").

   .kf-body hält sonst 16/20 px Polster und deckelt sich bei 1840 px — richtig
   für Bühne und Panel, die als zwei Karten nebeneinander liegen. Das Board ist
   keine Karte, sondern die Arbeitsfläche selbst; jeder Rand daran ist Platz,
   auf dem man nichts ablegen kann. Auch die abgerundeten Ecken fallen weg:
   eine Fläche, die bis an den Rand geht, hat keine. */
body.kf-modus-board .kf-body { padding: 0; max-width: none; }
body.kf-modus-board .kf-board-flaeche { border-radius: 0; }
/* Hier stand bis 27.08.2026: `.mmd-berater { display: none }` im Board-Modus.
   Die Regel stammte aus der Zeit, als der Ansprechpartner als Blase unten rechts schwebte und
   dort die Übergabebox verdeckte. Seit er in der Nav-Icon-Reihe sitzt, ist sie
   nicht nur überflüssig, sondern falsch: sie ließ ihn beim Wechsel aufs Board
   verschwinden (Julian, 27.08.2026: „wenn ich aufs Designboard gehe, ist er
   nicht drin"). Der Berater bleibt jetzt in jedem Modus oben stehen. */

/* Die Kopfzeile (Boardname, Speicher-Status, Hilfe) ist am 27.08.2026
   entfallen — s. Kommentar in partials/konfi-board.blade.php. Mit ihr gingen
   .kf-board-kopf, .kf-board-titel, .kf-board-name, #mm-board-name-input,
   .kf-board-spacer und .kf-board-hilfe. Geblieben ist nur der Status, und der
   schwebt jetzt unten links auf der Fläche: er ist eine Rückmeldung, kein
   Bedienelement, und braucht deshalb keine eigene Zeile. */
.kf-board-status {
  position: absolute; left: 14px; bottom: 12px; z-index: 20; pointer-events: none;
  font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(17, 17, 17, 0.34); white-space: nowrap;
}

/* ── Körper: Rail + Fläche ────────────────────────────────────────────── */
.kf-board-koerper {
  flex: 1; min-height: 0; min-width: 0;
  display: flex; flex-direction: row; gap: 10px; align-items: stretch;
}

/* Die Rail ist .kf-rail aus konfigurator.css — hier nur, was das Board
   zusätzlich braucht. Wichtig: KEINE eigene Breite, keine eigenen Farben. */
.kf-board-rail { position: relative; z-index: 30; }
/* Rückgängig/Wiederholen kleben am unteren Ende der scrollenden Leiste. Seit
   der Werkzeug-Wähler die Zeichenpunkte aufnimmt und die Kopfzeile weg ist,
   passt die Leiste meist am Stück — auf sehr flachen Fenstern aber nicht, und
   ohne diesen Fuß wären die beiden Pfeile dann weggescrollt. Der
   Hintergrund ist nötig, damit die scrollenden Knöpfe nicht durchscheinen;
   der weiche Verlauf darüber zeigt, dass oben noch etwas weitergeht. */
.kf-rail-fuss {
  position: sticky; bottom: -8px; z-index: 2; flex: none;
  width: 100%; margin-top: auto; padding-bottom: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff;
}
.kf-rail-fuss::before {
  /* Großzügig (26px): der Knopf darüber ist 52px hoch, ein schmaler Verlauf
     hätte ihn scharf abgeschnitten und wie ein Darstellungsfehler gewirkt
     statt wie „hier geht es weiter". */
  content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 26px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 55%, #fff);
  pointer-events: none;
}
.kf-rail-sep {
  flex: none; width: 32px; height: 1px; margin: 4px 0;
  background: var(--kf-border);
}
/* Der Werkzeug-Wähler: als Ausklapper NEBEN der Leiste, nicht darin. Inline
   ausgeklappt schob er sechs weitere Einträge in eine 64px-Spalte und drängte
   alles darunter aus dem Bild. */
.kf-rail-gruppe { width: 100%; position: relative; }
.kf-rail-gruppe .kf-rail-btn { position: relative; }
.kf-rail-chevron {
  position: absolute; right: 5px; bottom: 5px; opacity: 0.4;
  transition: transform 0.18s ease;
}
.kf-rail-gruppe .kf-rail-btn[aria-expanded="true"] .kf-rail-chevron { transform: rotate(-90deg); }
.kf-rail-untergruppe {
  /* Liegt im Portal über der Fläche, nicht in der Leiste: die scrollt
     (overflow-y: auto) und hätte den Ausklapper abgeschnitten. Position
     setzt konfi-board.js relativ zum „Formen"-Knopf. */
  position: absolute; z-index: 60;
  display: flex; flex-direction: row; gap: 2px; padding: 5px;
  background: #fff; border: 1.5px solid var(--kf-border); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
}
.kf-rail-untergruppe .kf-rail-btn { width: 58px; min-height: 50px; font-size: 9px; }
/* .kf-board-undo (Rückgängig/Wiederholen nebeneinander) ist am 27.08.2026
   entfallen — die beiden Pfeile stehen jetzt wie im Gestalten-Modus
   untereinander, direkt als Kinder der Leiste. */

/* ── Fläche ───────────────────────────────────────────────────────────────
   Bewusst HELLER als die Produktbühne (--kf-buehne #d8d4cd): dort liegt ein
   Foto drauf und der Ton trägt es, hier liegen Grafiken und Notizen drauf und
   müssten gegen ihn ankämpfen. Der Ton bleibt aus derselben warmen Familie,
   nur zwei Stufen heller.

   Das Raster hat zwei Ebenen — feine Punkte im Grundabstand, dazu jede fünfte
   Linie als hauchdünnes Gitter. Das gibt dem Blick Orientierung beim Ausrichten
   und liest sich als Raster, nicht als Textur. Entscheidend: es gehört zur
   FLÄCHE, nicht zum Bildschirm — konfi-board.js verschiebt und skaliert es mit
   (rasterSetzen), sonst klebt es beim Schieben fest und die Fläche wirkt
   unbeweglich (Julian, 25.08.2026: „so wie Miro das hat"). */
.kf-board-flaeche {
  position: relative; flex: 1; min-width: 0; min-height: 0;
  overflow: hidden; border-radius: 10px;
  background-color: #edebe6;
  background-image:
    radial-gradient(circle, rgba(17, 17, 17, 0.115) 1px, transparent 1.4px),
    linear-gradient(to right, rgba(17, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
  background-size: 26px 26px, 130px 130px, 130px 130px;
  touch-action: none;
}
.kf-board-flaeche.mm-space-pan { cursor: grab; }
.kf-board-flaeche.mm-panning { cursor: grabbing; }
.kf-board-flaeche.mm-crosshair { cursor: crosshair; }
.kf-board-flaeche.mm-pipette,
.kf-board-flaeche.mm-pipette * { cursor: copy; }

#mm-edges-svg { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
#mm-viewport { position: absolute; top: 0; left: 0; transform-origin: 0 0; z-index: 2; }
#mm-draw-canvas { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; }
/* Formvorschau. Seit 27.08.2026 ein SVG über der ganzen Fläche: der Pfeil
   braucht Anfang und Ende, nicht Ecke und Ecke — als Kasten war er nicht
   darstellbar. Gestrichelt bleibt es, weil es eine Ankündigung ist und kein
   Ergebnis. */
.mm-shape-preview { position: absolute; left: 0; top: 0; z-index: 15; pointer-events: none; overflow: visible; }
.mm-shape-preview rect,
.mm-shape-preview ellipse,
.mm-shape-preview polygon {
  fill: rgba(29, 107, 255, 0.05);
  stroke: var(--kf-akzent); stroke-width: 1.5; stroke-dasharray: 5 4;
}
.mm-shape-preview line {
  stroke: var(--kf-akzent); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round;
}
.mm-shape-preview [hidden] { display: none; }

/* ── Werkzeug-Marke am Zeiger ─────────────────────────────────────────────
   Sagt, WAS der nächste Zug erzeugt. Ein Fadenkreuz allein sagt nur, dass
   überhaupt etwas passiert. Sie liegt über allem und fängt keine Klicks. */
.mm-wz-cursor {
  position: absolute; z-index: 55; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--kf-akzent); color: #fff;
  box-shadow: 0 3px 12px rgba(29, 107, 255, 0.34);
}
.mm-wz-cursor-icon { display: inline-flex; }
.mm-wz-cursor-icon svg { width: 13px; height: 13px; display: block; }

/* Der Wähler-Knopf in der Leiste zeigt dasselbe Icon wie der gewählte
   Eintrag im Ausklapper — konfi-board.js kopiert es dorthin. */
.mm-wz-icon { display: inline-flex; }
.mm-wz-icon svg { display: block; }
/* Im Ausklapper sind die Knöpfe kleiner, also auch ihre Icons. */
.kf-rail-untergruppe .kf-rail-btn svg:not(.kf-rail-chevron) { width: 18px; height: 18px; }

/* Dreieck: als Umriss nur mit SVG machbar (clip-path würde den Rahmen
   mitschneiden). Gestreckt auf die Elementgröße, Strichbreite konstant. */
.mm-free-dreieck > .mm-dreieck { display: block; width: 100%; height: 100%; overflow: visible; }
.mm-select-rect {
  position: absolute; z-index: 25; pointer-events: none;
  border: 1.5px solid rgba(29, 107, 255, 0.8); border-radius: 2px;
  background: rgba(29, 107, 255, 0.07);
}
/* Zeigt vor dem Klick, wo und wie groß der Text landet. Gestrichelt wie die
   Druckflächen, damit sofort klar ist: das ist noch nichts, das ist eine
   Ankündigung. Die Maße entsprechen dem, was anlegen('text') erzeugt. */
.mm-text-cursor {
  position: absolute; z-index: 50; pointer-events: none;
  width: 200px; height: 34px; display: flex; align-items: center; padding: 0 6px;
  border: 1.5px dashed var(--kf-akzent); border-radius: 4px;
  background: rgba(29, 107, 255, 0.05);
}
.mm-text-cursor span {
  font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 600;
  color: var(--kf-akzent); opacity: 0.5; letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: no-preference) {
  .mm-text-cursor { transition: opacity 0.12s ease; }
}

/* Griffe kommen als .kf-eckpunkt / .kf-griff aus konfigurator.css. Dort
   schaltet .kf-logo-item.ausgewaehlt sie sichtbar — hier heißt der Träger
   .mm-free.mm-sel, also dieselbe Regel mit unserem Elternselektor. */
#kf-board .mm-free.mm-sel > .kf-eckpunkt { display: block; }
#kf-board .mm-free.mm-sel > .kf-griff { display: flex; }
#kf-board .mm-free.mm-gesperrt > .kf-eckpunkt,
#kf-board .mm-free.mm-gesperrt > .kf-griff { display: none; }

/* ── Druckfläche am Produkt ───────────────────────────────────────────────
   Dieselbe Optik wie #kf-druckzone im Designfeld (gestrichelt, Akzentfarbe) —
   wer sie dort kennt, erkennt sie hier wieder. Sichtbar nur am ausgewählten
   Produkt oder während man ein Design zieht: zwanzig gestrichelte Rahmen
   gleichzeitig wären Krach, aber beim Ablegen muss man das Ziel sehen.
   pointer-events: none ist Pflicht — sonst würde die Fläche den Griff auf das
   Produkt selbst abfangen. */
.mm-zone {
  position: absolute; pointer-events: none; box-sizing: border-box;
  border: 1.5px dashed rgba(29, 107, 255, 0.5); border-radius: 2px;
  transform-origin: center center;
  opacity: 0; transition: opacity 0.16s ease;
}
.mm-free.mm-sel > .mm-zone,
.mm-free.mm-zone-zeigen > .mm-zone,
.kf-board-flaeche.mm-zonen-an .mm-free > .mm-zone { opacity: 1; }
.kf-board-flaeche.mm-zonen-an .mm-free > .mm-zone { background: rgba(29, 107, 255, 0.05); }

/* Zähler unter dem Produkt: sagt, was daran hängt, ohne dass man es anfassen
   muss. Nach der Übergabe wird er zum Häkchen — damit man auf einem Board mit
   zehn Produkten sieht, welche schon in der Anfrage sind. */
.mm-produkt-marke {
  position: absolute; left: 50%; bottom: -9px; transform: translate(-50%, 100%);
  pointer-events: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(17, 17, 17, 0.82); color: var(--kf-bg);
  font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mm-produkt-marke[hidden] { display: none; }
.mm-produkt-marke.ist-uebernommen { background: var(--kf-neon); color: #111; }

/* Welche Seite diese Tafel zeigt. Sitzt INNEN unten links — genau wie die
   „Vorne"-Marke auf der Bühne im Gestalten-Modus, damit man es als dieselbe
   Angabe liest. Außerhalb der Tafel wäre sie oben von der Kontext-Leiste und
   unten vom Design-Zähler verdeckt worden. Nur da, wenn es zwei Seiten gibt. */
.mm-seite-marke {
  position: absolute; left: 8px; bottom: 8px;
  pointer-events: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88); color: rgba(17, 17, 17, 0.66);
  border: 1px solid rgba(17, 17, 17, 0.1);
  font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Ein Design, das auf der gerade nicht gezeigten Seite liegt, ist nicht
   gelöscht — es liegt hinten. Genau wie im Designfeld verschwindet es beim
   Drehen, statt auf der falschen Seite zu kleben. */
.mm-free.mm-andere-seite { display: none; }

/* ── Elemente auf dem Board ─────────────────────────────────────────────── */
.mm-free { position: absolute; }
.mm-free.mm-sel { outline: 2px solid rgba(29, 107, 255, 0.85); outline-offset: 2px; }
.mm-free.mm-gesperrt { cursor: default; }
.mm-free-text {
  font-family: 'DM Sans', sans-serif; line-height: 1.3; color: var(--kf-ink);
  outline: none; caret-color: transparent; white-space: pre-wrap; word-break: break-word;
}
.mm-free-text.mm-tippt { caret-color: auto; }
/* WICHTIG: kein overflow:hidden am Element selbst — die Griffe (.kf-eckpunkt,
   .kf-griff) liegen außerhalb seiner Kante und würden abgeschnitten. Der
   Textüberlauf wird deshalb innen begrenzt. */
.mm-free-notiz {
  background: #fdf3c3; color: #2a2413; border-radius: 6px; padding: 11px 13px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.45;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.12); outline: none;
  word-break: break-word;
}
.mm-free-notiz > .mm-text-inhalt { overflow: hidden; }
.mm-free-notiz:empty::before { content: 'Notiz…'; color: rgba(42, 36, 19, 0.35); }
.mm-free-bild img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  border-radius: 4px; pointer-events: none;
}
/* Ein Rahmen ist ein Bereich, kein Deckel: seine Fläche darf Klicks nicht
   abfangen, sonst kann man nichts hineinlegen. Greifbar ist er über Label und
   Griffe — dieselbe Konvention wie in Figma. */
.mm-free-rahmen {
  border: 1.5px solid rgba(17, 17, 17, 0.34); border-radius: 3px;
  background: rgba(255, 255, 255, 0.55); pointer-events: none;
}
.mm-free-rahmen .mm-frame-label,
.mm-free-rahmen .kf-eckpunkt,
.mm-free-rahmen .kf-griff { pointer-events: auto; }
.mm-free-rahmen .mm-frame-label { cursor: move; }
.mm-frame-label {
  position: absolute; top: -22px; left: 0; padding: 1px 5px;
  font-size: 10px; letter-spacing: 0.04em;
  color: rgba(17, 17, 17, 0.5); background: rgba(255, 255, 255, 0.85);
  border-radius: 4px; outline: none; white-space: nowrap;
}
.mm-lock-badge {
  position: absolute; top: 4px; right: 4px; z-index: 10;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.9); border-radius: 4px; color: rgba(17, 17, 17, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Griffe: exakt die Bauform aus dem Designfeld (.kf-eckpunkt / .kf-griff),
   damit Vergrößern und Drehen sich überall gleich anfühlen — Julians
   ausdrückliche Vorgabe. Rotation kannte das Board vorher gar nicht. */
/* Drehgriff: dieselbe Bauform wie .kf-griff-rotate im Designfeld — 22px,
   blau, unten links. Oben mittig läge er unter der Float-Leiste. */

/* ── Panels über der Fläche ───────────────────────────────────────────────
   Bauform, Kopfzeile, Schließer und Scroll-Verhalten kommen aus .kf-flyout /
   .kf-tb-label / .kf-flyout-zu (konfigurator.css) — hier steht nur, was das
   Board zusätzlich braucht: Höhe und Lage über der Fläche. */
/* Bauform wie im Konfigurator (Julian, 08.10.2026, Bilder 58–60: „im Konfi
   richtig schön sauber … Im Board ist es aber total lang, auch nicht passend
   von der Breite"): oben neben der Leiste, so hoch wie der Inhalt — lange
   Listen scrollen darin —, 340 px breit, D.AI 430, Bibliothek 400. Vorher
   300 px und über die volle Höhe. */
.kf-board-panel {
  position: absolute; top: 10px; left: 10px; bottom: auto; z-index: 40;
  width: 340px; height: auto; max-height: calc(100% - 20px);
}
#mm-ai-panel { width: 430px; }
#mm-vorlagen-panel { width: 400px; }
/* Lange Listen wie „Designs & Symbole" im Konfigurator: höchstens 680 px, scrollen darin */
#mm-mockup-panel, #mm-grafiken-panel { max-height: min(680px, calc(100% - 20px)); }
/* .kf-flyout startet unsichtbar und wird im Designfeld über
   .kf-toolbar.panel-offen eingeblendet. Diese Klammer gibt es hier nicht —
   das Board schaltet über [hidden]. Also dieselbe Endstellung an das
   Nicht-Versteckt-Sein hängen. */
.kf-board-panel:not([hidden]) { opacity: 1; transform: none; pointer-events: auto; }
/* Kleine Panels (Hochladen, Text) enden mit ihrem Inhalt, statt bis zum
   unteren Rand zu laufen — die leere Fläche darunter hatte keinen Grund
   (Julian, 28.08.2026: „einfach White Space ohne irgendeinen Grund"); so
   folgen sie derselben Regel wie die Flyouts in der Konfiguration. Die
   großen Panels (Blanks, Grafiken, Bibliothek, Ebenen) behalten die volle
   Höhe, ihre Listen scrollen darin. */
#kf-board [hidden] { display: none !important; }
.kf-board-panel-kopf {
  flex: none; display: flex; align-items: center; gap: 8px;
  /* Keine Kopfleiste mit Strich mehr — die Überschrift steht wie im
     Konfigurator klein im Panel, der Schließer als ‹ am Rand (08.10.2026). */
  padding: 12px 12px 0;
}
.kf-board-panel-kopf .kf-tb-label { margin: 0; }
/* D.AI ist das Konfigurator-Panel (07.10.2026) und bringt seine Überschrift
   „D.AI-DESIGN (i) … Credits" selbst mit — die des Boards entfällt. */
#mm-ai-panel .kf-board-panel-kopf { padding: 0; }
#mm-ai-panel .kf-board-panel-kopf .kf-tb-label { display: none; }
.kf-board-panel-such { flex: none; padding: 10px 14px 0; }
.kf-board-panel-such input {
  width: 100%; height: 34px; padding: 0 11px; border-radius: 8px;
  border: 1.5px solid var(--kf-border); background: var(--kf-bg); outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--kf-ink);
}
.kf-board-panel-such input:focus { border-color: var(--kf-akzent); }
/* Eine Reihe statt Umbruch (Julian, 27.08.2026) — sieben Gruppen brauchten
   sonst drei Zeilen und drückten die Kacheln aus dem Blick. */
.kf-board-panel-tabs {
  flex: none; display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kf-board-panel-tabs::-webkit-scrollbar { height: 0; }
.kf-board-chip {
  flex: none; white-space: nowrap;
  padding: 5px 10px; border: 1px solid var(--kf-border); border-radius: 999px;
  background: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(17, 17, 17, 0.55);
  transition: all 0.15s ease;
}
.kf-board-chip:hover { border-color: rgba(17, 17, 17, 0.28); color: var(--kf-ink); }
.kf-board-chip.active { background: var(--kf-akzent); border-color: var(--kf-akzent); color: #fff; }
/* Blank-Kacheln zeigen Fotos, keine Icons — die Bildfläche darf höher sein */
.kf-board-panel .apc-tile-img { height: 62px; }
.kf-board-panel .apc-tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.kf-board-spinner { width: 14px; height: 14px; border-width: 2px; border-top-color: currentColor; }

/* Nicht mehr gebraucht (kommt aus konfigurator.css / konfi-eigen.css):
/* ── Portal: alles, was frei über der Fläche schwebt ────────────────────── */
.kf-board-portal { position: absolute; inset: 0; z-index: 150; pointer-events: none; }
.kf-board-portal > * { pointer-events: auto; }

/* Mehrfach-Übernahme (Julian, 01.09.2026): Knopf in der Auswahl-Leiste — legt
   alle markierten Produkte direkt als Anfrage-Artikel ab. Dunkel abgesetzt,
   damit die Hauptaktion der Auswahl sofort ins Auge fällt. */
.mm-multi-anfrage {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--kf-ink, #111) !important; color: #fff !important;
  border-radius: 999px; padding: 6px 13px !important;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.mm-multi-anfrage:hover { opacity: 0.86; }

.mm-ctx {
  position: absolute; min-width: 200px; padding: 5px;
  background: #fff; border: 1.5px solid var(--kf-border); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.17);
}
.mm-ctx-section {
  padding: 6px 9px 4px; font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17, 17, 17, 0.32);
}
.mm-ctx-item {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: none; background: none; border-radius: 7px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--kf-ink); text-align: left;
  transition: background 0.14s ease;
}
.mm-ctx-item:hover { background: rgba(17, 17, 17, 0.05); }
.mm-ctx-item svg { flex: none; opacity: 0.65; }
.mm-ctx-item[disabled] { opacity: 0.35; pointer-events: none; }
.mm-ctx-item.mm-ctx-dai { color: #8b5cf6; }
.mm-ctx-item.mm-ctx-gefahr { color: #dc2626; }
.mm-ctx-divider { height: 1px; margin: 4px 6px; background: var(--kf-border); }

/* Die Kontext-Leiste ist .kf-ctx aus dem Designfeld. Dort sitzt sie fest oben
   mittig über der Bühne (left: 50% + translateX(-50%)); hier folgt sie dem
   ausgewählten Element, also müssen Ursprung und Verschiebung zurückgesetzt
   werden — sonst rutscht sie um ihre halbe Breite nach links aus dem Bild. */
.kf-board-ctx { top: auto; left: auto; transform: none; z-index: 150; }
.kf-board-ctx .kf-ctx-pop { z-index: 160; }
/* Steht die Leiste über dem Element, klappen ihre Fenster nach oben auf — sie
   sollen nicht das verdecken, was man gerade einstellt (Julian, 07.10.2026) */
.kf-board-ctx[data-pop-lage="oben"] .kf-ctx-pop { top: auto; bottom: calc(100% + 9px); }

/* ── Zoom unten rechts (Bauform .kf-zoom aus konfigurator.css) ──────────── */
/* Seit dem 30.09.2026 unten statt oben (Julian: „mach das mit dem Zoomen nach
   unten rechts") — oben rechts gehört jetzt dem Freigeben, und Zoom ist dort,
   wo ihn jedes Canvas-Werkzeug hat.

   Der Beige-Chip ist im Designfeld für die dunklere Bühne (#d8d4cd) gedacht.
   Auf der hellen Boardfläche verschwindet er beinahe — deshalb hier eine
   Haarlinie und ein etwas tieferer Schatten, damit die Pille schwebt statt zu
   verschwimmen. Farbe bleibt gleich, die Bauform bleibt erkennbar. */
/* ── Freigeben: Leiste oben rechts (Julian, 02.10.2026) ──────────────────
   Links die Köpfe derer, die zuschauen, rechts der Knopf. Dieselbe weiche
   Karte wie die Zoom-Leiste unten rechts — eine Bauform, zwei Ecken. */
.mm-frei {
  position: absolute; top: 12px; right: 12px; z-index: 22;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 10px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(17, 17, 17, 0.07);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
.mm-frei[hidden] { display: none; }
.mm-frei-koepfe { display: flex; align-items: center; }
.mm-frei-koepfe:empty { display: none; }
.mm-frei-kopf {
  width: 24px; height: 24px; margin-right: -6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #111; color: #fff; border: 2px solid #fff;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
}
.mm-frei-kopf--gast { background: #8a8a8a; }
/* Der eigene Kreis traegt denselben Ring wie der Avatar im Kopfband — man
   erkennt sich wieder (Julian, 02.10.2026, Vorbild Miro). */
.mm-frei-kopf--ich {
  background: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px transparent;
  border: 2px solid transparent;
  background-image: linear-gradient(#111, #111), linear-gradient(135deg, #ff5fa2, #7c5cff);
  background-origin: border-box; background-clip: content-box, border-box;
}
.mm-frei-kopf--mehr { background: #e9e8e6; color: #444; }
/* Gast: eine graue Person statt einer Initiale (Julian, 05.10.2026) */
.mm-frei-kopf--gast-ich { background: #e9e8e6; color: #9a9a9a; }
.mm-frei-koepfe .mm-frei-kopf:last-child { margin-right: 4px; }
.mm-frei-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px; border: 0;
  background: #111; color: #fff; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600;
}
.mm-frei-knopf:hover { opacity: .9; }
.mm-frei-knopf:disabled { opacity: .5; cursor: default; }
.mm-frei-knopf--still { background: #e9e8e6; color: #333; }
/* Ist ein Link draußen, sieht man das an der Leiste, ohne sie zu öffnen. */
.mm-frei--offen .mm-frei-knopf { background: #2f6bff; }

.mm-frei-fenster {
  border: 0; padding: 0; margin: auto; width: 420px; max-width: calc(100vw - 32px);
  border-radius: 18px; background: #fff; color: #111;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
}
.mm-frei-fenster::backdrop { background: rgba(13, 13, 13, .5); }
.mm-frei-f-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 8px 24px; }   /* Luft oben und am X (05.10.2026) */
.mm-frei-f-kopf b { font-size: 16px; font-weight: 700; }
.mm-frei-zu { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; background: #f4f4f2; font-size: 18px; line-height: 1; cursor: pointer; color: #111; }
.mm-frei-zu:hover { background: #e9e8e6; }
/* Ohne :not() traf die Regel auch den Kopf und nahm ihm den oberen Abstand —
   deshalb klebten Titel und X am Rand (Julian, 05.10.2026: „das X ist sehr nah dran“). */
.mm-frei-fenster > div:not(.mm-frei-f-kopf) { padding: 0 24px 24px; }
.mm-frei-status { margin: 0; font-size: 13px; color: rgba(17, 17, 17, .62); }
.mm-frei-status[hidden] { display: none; }
.mm-frei-status--fehler { color: #b42318; }
.mm-frei-team-link { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Personen einladen wie bei Miro (05.10.2026): Adresse · Art · Einladen */
.mm-frei-abschnitt { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(17, 17, 17, .5); }
.mm-frei-abschnitt--link { margin: 4px 24px 6px; padding-top: 16px; border-top: 1px solid rgba(17, 17, 17, .08); }
.mm-frei-einladen-zeile { display: flex; gap: 8px; align-items: stretch; }
/* Ein Feld: Adresse links, Wahl rechts darin; der Rahmen gehört dem Feld,
   nicht den beiden Teilen — sonst stehen zwei Kästen mit zwei Fokusrändern */
.mm-frei-feld {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 38px;
  border: 1px solid rgba(17, 17, 17, .12); border-radius: 10px; background: #fff;
  transition: border-color .15s;
}
.mm-frei-feld:focus-within { border-color: #111; }
.mm-frei-feld input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: #111;
}
/* Ansehen / Mitarbeiten: eigene Wahl statt Browser-Menü (06.10.2026),
   Liste in der Form der Board-Popover (.kf-modus-pop) */
.mm-frei-wahl { position: relative; flex: none; height: 100%; }
.mm-frei-wahl-knopf {
  height: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px;
  border: 0; border-left: 1px solid rgba(17, 17, 17, .08); border-radius: 0 10px 10px 0;
  background: transparent; cursor: pointer; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: #111;
}
.mm-frei-wahl-knopf svg { width: 14px; height: 14px; transition: transform .15s; }
.mm-frei-wahl-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-frei-wahl-knopf:focus-visible { box-shadow: inset 0 0 0 2px rgba(17, 17, 17, .15); }
.mm-frei-wahl-liste {
  position: absolute; right: -1px; top: calc(100% + 6px); z-index: 5; width: 250px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: #fff; border: 1.5px solid rgba(17, 17, 17, .1); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}
.mm-frei-wahl-liste[hidden] { display: none; }
.mm-frei-wahl-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left;
  font-family: 'DM Sans', sans-serif; outline: none;
}
.mm-frei-wahl-opt:hover, .mm-frei-wahl-opt:focus-visible { background: rgba(17, 17, 17, .045); }
.mm-frei-wahl-opt[aria-selected="true"] { background: rgba(29, 107, 255, .08); }
.mm-frei-wahl-opt strong { font-size: 13px; font-weight: 600; color: #111; }
.mm-frei-wahl-opt[aria-selected="true"] strong { color: #1d6bff; }
.mm-frei-wahl-opt em { font-size: 11px; font-style: normal; line-height: 1.45; color: rgba(17, 17, 17, .5); }
.mm-frei-einladen .mm-frei-status { margin-top: 8px; }
/* Wer Zugriff hat (Prüfrunde 08.10.2026): Team, offene Einladungen, Gäste —
   Kopf, Name/Adresse, rechts Rolle oder „Entfernen" */
.mm-frei-zugriff { padding-top: 16px !important; border-top: 1px solid rgba(17, 17, 17, .08); }
.mm-frei-zugriff[hidden] { display: none; }
.mm-frei-personen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.mm-frei-person { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.mm-frei-person-kopf {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #111; color: #fff; font-size: 12px; font-weight: 700;
}
.mm-frei-person-kopf--gast, .mm-frei-person--offen .mm-frei-person-kopf { background: #e9e8e6; color: #555; }
.mm-frei-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-frei-person-text b, .mm-frei-person-text em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-frei-person-text b { font-size: 13px; font-weight: 600; }
.mm-frei-person-text em { font-size: 11.5px; font-style: normal; color: rgba(17, 17, 17, .5); }
.mm-frei-person-rolle { flex: none; font-size: 12px; color: rgba(17, 17, 17, .5); }
.mm-frei-person-weg {
  flex: none; min-height: 32px; padding: 0 12px; border: 1px solid rgba(17, 17, 17, .12); border-radius: 999px; background: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: #b42318; cursor: pointer;
}
.mm-frei-person-weg:hover { background: #fdf3f2; }
.mm-frei-person-weg:disabled { opacity: .5; cursor: default; }
.mm-frei-zugriff-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: rgba(17, 17, 17, .55); }
.mm-frei-zugriff-hinweis a { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) {
  .mm-frei-einladen-zeile { flex-wrap: wrap; }
  .mm-frei-feld { flex-basis: 100%; height: 44px; }
  .mm-frei-feld input, .mm-frei-wahl-knopf { font-size: 16px; }
  .mm-frei-einladen-zeile .mm-frei-haupt { height: 44px; flex: 1; }
}
.mm-frei-haupt {
  height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
  background: #111; color: #fff; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
}
.mm-frei-haupt:hover { opacity: .9; }
.mm-frei-linkzeile { display: flex; gap: 8px; }
.mm-frei-linkzeile input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, .12); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: #111; background: #fafafa;
}
.mm-frei-widerruf {
  display: block; margin-top: 8px; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: #c0392b; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 820px) {
  .mm-frei { top: 8px; right: 8px; }
  .mm-frei-knopf { height: 44px; }
}

.kf-board-zoom {
  position: absolute; bottom: 12px; right: 12px; z-index: 20; gap: 7px; padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.07);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
.kf-board-zoom #mm-zoom-range { width: 78px; }
/* Notizfarben-Fenster: sechs Post-it-Chips neben dem Notiz-Werkzeug. */
#mm-notiz-pop {
  position: absolute; z-index: 60;
  display: flex; gap: 8px; padding: 10px 12px;
  background: #fff; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
#mm-notiz-pop[hidden] { display: none; }
.mm-notiz-swatch {
  width: 26px; height: 26px; border-radius: 7px; padding: 0; cursor: grab;
  border: 1px solid rgba(17, 17, 17, 0.14); transition: transform 0.12s;
}
.mm-notiz-swatch:hover { transform: scale(1.12); }
.mm-notiz-swatch.active { outline: 2px solid #1d6bff; outline-offset: 2px; }
/* Mini-Notiz am Zeiger, solange das Notiz-Werkzeug aktiv ist */
#mm-notiz-cursor {
  position: absolute; z-index: 55; width: 38px; height: 38px; border-radius: 5px;
  pointer-events: none; border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.18);
}
#mm-notiz-cursor[hidden] { display: none; }
.mm-notiz-geist {
  position: fixed; z-index: 9999; width: 34px; height: 34px; border-radius: 6px;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 1px solid rgba(17, 17, 17, 0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Ebenen-Popover in der Float-Leiste: die vier Wege untereinander, in der
   Optik der Kontextmenü-Einträge (mm-ctx-item). */
.kf-ctx-pop-ebenen { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; min-width: 190px; max-width: none; }
.kf-ctx-pop-ebenen .mm-ctx-item { width: 100%; }
.kf-ctx-pop-ebenen .mm-ctx-item.active { background: rgba(29, 107, 255, 0.08); color: #1d6bff; }
/* Zähler in der Mehrfach-Leiste: Anzeige, kein Knopf */
.mm-multi-zahl { pointer-events: none; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(17, 17, 17, 0.5); white-space: nowrap; }
/* Bogenstärke-Regler unten im Textform-Popover */
.mm-kurve-stark { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid rgba(17, 17, 17, 0.08); }
.mm-kurve-stark .mono { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(17, 17, 17, 0.45); }
/* „Fit" gibt es im Designfeld nicht (dort ist die Bühne immer ganz zu sehen).
   Auf einem unendlichen Board braucht man es — in der Optik der Prozentzahl
   daneben, damit die Pille eine Einheit bleibt. */
.kf-board-zoom-fit {
  flex: none; border: none; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(17, 17, 17, 0.45);
  border-left: 1px solid rgba(17, 17, 17, 0.14); margin-left: 2px; padding-left: 9px;
}
.kf-board-zoom-fit:hover { color: var(--kf-ink); }

/* Das Fan-Menü unten links und die beiden Schubladen (Kollektions-Checkliste,
   „Trends, Farben & Vorlagen") sind am 27.08.2026 entfallen — s. Kommentar in
   partials/konfi-board.blade.php. Mit ihnen gingen .kf-board-fan*,
   .kf-board-schub*, .kf-board-koll*, .kf-board-trends*, .kf-board-keycolor*,
   .kf-board-farb*, .kf-board-kombi* und .kf-board-referenz*. */

/* ── Willkommen ───────────────────────────────────────────────────────── */
.kf-board-willkommen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60;
  width: min(400px, calc(100% - 48px)); padding: 24px 26px 22px;
  background: #fff; border: 1.5px solid var(--kf-border); border-radius: 12px;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.16); text-align: center;
  animation: kfBoardAuf 0.24s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes kfBoardAuf { from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); } }
.kf-board-willkommen p {
  margin: 0 0 16px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.65;
  color: rgba(17, 17, 17, 0.7);
}
.kf-board-willkommen strong { color: var(--kf-ink); }

/* ── Mobil ────────────────────────────────────────────────────────────── */
.kf-board-mobil { display: none; }
.kf-board-mobil-wege { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.kf-board-mobil-wege a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Bis 920 px statt 820 (Prüfrunde 05.10.2026): zwischen 821 und 920 griff
   schon das Tablet-Layout des Konfigurators, das Board fiel in sich zusammen
   (Werkzeuge gestapelt, Fläche 200–440 px, Freigeben verdeckt). */
@media (max-width: 920px) {
  body.kf-modus-board .kf-board-koerper { display: none; }
  .kf-board-mobil {
    display: flex; align-items: center; justify-content: center;
    flex: 1; min-height: 320px; padding: 20px;
  }
  .kf-board-mobil-karte {
    max-width: 420px; padding: 26px 24px; text-align: center;
    background: #fff; border: 1.5px solid var(--kf-border); border-radius: 12px;
  }
  .kf-board-mobil-karte h3 {
    margin: 0 0 10px; font-family: 'DM Sans', sans-serif;
    font-size: 17px; font-weight: 700; color: var(--kf-ink);
  }
  .kf-board-mobil-karte p {
    margin: 0 0 10px; font-family: 'DM Sans', sans-serif;
    font-size: 13.5px; line-height: 1.65; color: rgba(17, 17, 17, 0.55);
  }
  .kf-board-mobil-tipp { color: var(--kf-akzent) !important; margin-bottom: 0 !important; }
}

/* Schmale Fenster: Panels dürfen die Fläche nicht komplett verdecken */
@media (max-width: 1100px) {
  .kf-board-panel { width: 260px; }
}

/* ── Nachträge ───────────────────────────────────────────────────────────── */
.mm-text-inhalt { display: block; outline: none; white-space: pre-wrap; word-break: break-word; }
/* Text IN einer Form: mittig, mit Luft zum Rand (Julian, 28.08.2026 — wie
   in Miro). transform statt Flex, damit die contentEditable-Eingabe einen
   normalen Textfluss behält. */
.mm-form-text {
  position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%);
  text-align: center; line-height: 1.3; max-height: 88%; overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}
.mm-free-text .mm-kurve, .mm-free-notiz .mm-kurve { display: block; overflow: visible; }
/* Notiz-Text sitzt mittig — horizontal wie vertikal — und bleibt in der
   Fläche (Julian, 28.08.2026). Flex zentriert; der Inhalt selbst behält
   normalen Textfluss für die Eingabe. */
.mm-free-notiz { display: flex; align-items: center; justify-content: center; }
.mm-free-notiz .mm-text-inhalt { height: auto; max-height: 100%; width: 100%; overflow: hidden; }

/* Kurze Einblendung für Rückmeldungen („Das ist ein Produkt, kein Design") —
   ersetzt die alert()-Aufrufe der Vorlage, die den ganzen Fluss anhalten. */
.kf-board-hinweis {
  position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 8px);
  z-index: 200; max-width: min(420px, calc(100% - 40px));
  padding: 11px 16px; border-radius: 9px;
  background: rgba(17, 17, 17, 0.94); color: #f5f5f3;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; line-height: 1.5; text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.26);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.kf-board-hinweis.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* ══ Ebenen-Panel (27.08.2026) ═══════════════════════════════════════════════
   Nutzt .kf-ebene aus konfigurator.css — hier nur, was das Board zusätzlich
   braucht: der Name nimmt den Platz, die zwei Pfeile stehen rechts. Ziehen zum
   Sortieren gibt es hier bewusst nicht: auf dem Board liegen die Dinge frei im
   Raum, die Liste ist eine Übersicht mit Zugriff, kein zweiter Arbeitsplatz. */
#mm-ebenen-panel .kf-ebene { cursor: pointer; }
.kf-ebene-name {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--kf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kf-ebene-btn {
  flex: none; width: 22px; height: 22px; padding: 0; border: none; border-radius: 5px;
  background: none; color: rgba(17, 17, 17, 0.42); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.13s, color 0.13s;
}
.kf-ebene-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--kf-ink); }

/* Pipette im Farb-Popover: sitzt als letzter Punkt in der Farbreihe und sieht
   aus wie ein Farbfeld, ist aber keins — deshalb heller Grund statt Farbe. */
.kf-farbe-pipette {
  background: #fff; color: rgba(17, 17, 17, 0.6);
  display: inline-flex; align-items: center; justify-content: center;
}
.kf-farbe-pipette:hover { color: var(--kf-ink); border-color: var(--kf-ink); }

/* ── Die Namen nur beim Zeigen (25.09.2026) ───────────────────────────────
   Julian: „mach diese Leiste auch ohne die Namen drunter, auch nur wenn man
   drüber hovert, dass die dann angezeigt werden, also wie beim Menü daneben."
   Derselbe Kurzhinweis wie in der Lab-Leiste: er tritt rechts neben den Knopf,
   statt unter dem Symbol Platz zu verbrauchen. Auf dem Handy bleibt die
   Beschriftung stehen — dort liegt die Leiste quer und es gibt kein Zeigen. */
@media (hover: hover) and (min-width: 821px) {
  .kf-rail-btn { position: relative; }
  .kf-rail-btn > span {
    position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%);
    white-space: nowrap; background: #0d0d0d; color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 6px 10px; border-radius: 8px;
    opacity: 0; pointer-events: none; z-index: 30;
    transition: opacity .12s, transform .12s;
  }
  .kf-rail-btn:hover > span,
  .kf-rail-btn:focus-visible > span { opacity: 1; transform: translate(0, -50%); }
  /* Oben in der Leiste steht das SYMBOL des aktiven Werkzeugs, nicht sein Name
     (Julian, 25.09.2026: „anstatt Auswahl zu schreiben muss da der Pfeil rein").
     Der Name erscheint wie bei allen anderen beim Zeigen — die Regel darüber
     gilt also auch für ihn. Nur das Symbol selbst bleibt im Fluss. */
  .kf-rail-btn > span.mm-wz-icon { position: static; transform: none; opacity: 1; background: none; color: inherit; padding: 0; }
  .kf-rail-btn > span#mm-ki-gen-text { position: static; transform: none; opacity: 1; background: none; color: inherit; padding: 0; font-size: inherit; }
  /* Ohne Beschriftung im Fluss darf der Knopf flacher sein. */
  .kf-rail-btn { min-height: 46px; gap: 0; }
  .kf-rail-untergruppe .kf-rail-btn { min-height: 44px; }
}

/* „i" neben „Link zum Ansehen" (07.10.2026): das Fenster ist klickbar (Widerrufen
   darin) und bleibt offen, solange die Maus auf dem „i" oder dem Fenster ist —
   die Brücke (::before) überspannt die Lücke dazwischen. */
.mm-frei-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* .kf-info-wrap fährt auf Maus-Geräten sonst erst beim Hovern aus (Größen-„i“, konfigurator.css) — hier steht es immer da */
@media (hover: hover) { .kf-info-wrap.mm-frei-info { max-width: none; opacity: 1; overflow: visible; margin-left: 4px; } }
/* Nach OBEN: unten schneidet der Dialog das Fenster ab (gesehen 07.10.2026) */
.mm-frei-info .kf-info-tip { left: -8px; right: auto; top: auto; bottom: calc(100% + 6px); color: rgba(17, 17, 17, .75); }
.mm-frei-info .kf-info-tip::before { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; }
.mm-frei-info:hover .kf-info-tip, .mm-frei-info:focus-within .kf-info-tip { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.mm-frei-widerruf[hidden] { display: none; }

/* Gleichzeitig bearbeitet (F2, 07.10.2026): Leiste oben mittig mit „Neu laden" */
.mm-konflikt { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 14px; max-width: min(620px, calc(100% - 32px)); padding: 12px 14px 12px 18px; background: #0a0a0a; color: #f5f5f3; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,0.25); font-size: 14px; line-height: 1.45; }
.mm-konflikt-knopf { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #f5f5f3; color: #0a0a0a; font: inherit; font-weight: 600; cursor: pointer; }

/* ── Board-Wahl links oben (Julian, 09.10.2026) ──────────────────────────
   Auf Höhe der Freigeben-Pille (top 12 px), rechts neben der Werkzeugleiste
   (x 16 + 64 + 12). Dieselbe weiche Karte wie die Pille gegenüber. Die
   Werkzeug-Fenster der Leiste liegen darüber (z-index 40). */
.mm-board-wahl { position: absolute; top: 12px; left: 92px; z-index: 22; }
.mm-board-wahl[hidden] { display: none; }
.mm-board-wahl-knopf {
  display: inline-flex; align-items: center; gap: 8px; max-width: 320px; height: 40px; padding: 0 14px 0 16px;
  border-radius: 999px; background: #fff; border: 1px solid rgba(17, 17, 17, 0.07); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
  font: inherit; font-size: 13.5px; font-weight: 600; color: #111; cursor: pointer;
}
.mm-board-wahl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Stand als Wolke neben der Pille (12.10.2026, wie Google Docs): Haken = im
   Konto, drehende Wolke = wird gesichert; Details nur im Tooltip */
.mm-board-wahl { display: flex; align-items: center; gap: 8px; }
.mm-board-stand { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: rgba(17, 17, 17, .45); cursor: default; border-radius: 50%; outline: none; }
.mm-board-stand:focus-visible { box-shadow: 0 0 0 2px rgba(17, 17, 17, .2); }
.mm-board-stand .mm-stand-dreht { display: none; }
.mm-board-stand--sichert .mm-stand-ok { display: none; }
.mm-board-stand--sichert .mm-stand-dreht { display: block; animation: mm-stand-puls 1.2s ease-in-out infinite; }
@keyframes mm-stand-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mm-board-stand--sichert .mm-stand-dreht { animation: none; } }
/* Gast: schwarze Pille „Speichern" an derselben Stelle, Höhe wie die Pillen oben */
.mm-gast-speichern {
  position: absolute; top: 12px; left: 92px; z-index: 22; height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: #111; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); animation: mm-gast-ein .25s ease-out;
}
.mm-gast-speichern[hidden] { display: none; }
.mm-gast-speichern:hover { opacity: .9; }
@keyframes mm-gast-ein { from { opacity: 0; transform: translateX(-8px); } }
.mm-board-wahl-menue {
  position: absolute; top: calc(100% + 8px); left: 0; width: 280px; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14); padding: 6px;
}
.mm-board-wahl-menue[hidden] { display: none; }
.mm-board-wahl-zeile { display: flex; align-items: center; gap: 4px; border-radius: 9px; }
.mm-board-wahl-zeile:hover, .mm-board-wahl-zeile.aktiv { background: #f5f5f3; }
.mm-board-wahl-zeile > button.mm-bw-oeffnen { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: #111; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-board-wahl-zeile.aktiv > button.mm-bw-oeffnen { font-weight: 700; }
.mm-board-wahl-zeile input { flex: 1; min-width: 0; height: 34px; margin: 3px 4px; padding: 0 10px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; font: inherit; font-size: 13.5px; }
.mm-bw-icon { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: rgba(17, 17, 17, 0.5); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mm-bw-icon:hover { color: #111; background: #ebeae6; }
.mm-bw-icon.sicher { width: auto; padding: 0 10px; color: #b42318; font-size: 12.5px; font-weight: 600; }
.mm-board-wahl-neu { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 4px; padding: 0 10px; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0 0 9px 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #111; cursor: pointer; }
.mm-board-wahl-neu:hover { background: #f5f5f3; }


/* ── Planungskarte (Julian, 12.10.2026: „wie ein richtiges, gutes Ding … Tourplaner-mäßig") ── */
.mm-free-plan { background: #fff; border-radius: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .10); border: 1px solid rgba(17, 17, 17, .08); }
.mm-plan-karte { padding: 16px 18px 14px; font-family: 'DM Sans', sans-serif; color: #111; text-align: left; cursor: default; }   /* wächst mit dem Inhalt, kein Scrollen (Julian, 14.10.2026) */
.mm-plan-karte:focus { outline: none; }
.mm-plan-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; cursor: move; }
.mm-plan-marke { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(17, 17, 17, .45); }
.mm-plan-knopf { min-height: 28px; padding: 0 10px; border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; color: #111; cursor: pointer; }
.mm-plan-knopf:hover { background: #111; color: #fff; border-color: #111; }
.mm-plan-titel { display: block; width: 100%; margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.2; }
.mm-plan-daten { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 12px; margin: 0 0 12px; font-size: 12.5px; }
.mm-plan-daten dt { color: rgba(17, 17, 17, .5); }
.mm-plan-daten dd { margin: 0; min-width: 0; }
/* Direkt beschreibbar (12.10.2026): sieht aus wie Text, zeigt sich erst beim
   Darüberfahren und Tippen als Feld — die Karte bleibt eine Karte, kein Formular */
.mm-plan-eingabe { width: 100%; min-height: 28px; padding: 3px 6px; margin: 0 -6px; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; color: #111; cursor: text; }
.mm-plan-titel.mm-plan-eingabe { min-height: 34px; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.mm-plan-eingabe::placeholder { color: rgba(17, 17, 17, .35); font-weight: 400; }
.mm-plan-eingabe:hover { background: #f6f5f2; }
.mm-plan-eingabe:focus { outline: none; background: #fff; border-color: rgba(17, 17, 17, .3); }
.mm-plan-abschnitt { margin: 12px 0 6px; font-size: 11px; font-weight: 700; color: rgba(17, 17, 17, .5); }
/* Produkt: Bild in der gewählten Farbe links, Auswahl rechts */
.mm-plan-produkt { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(17, 17, 17, .08); font-size: 12.5px; }
.mm-plan-bild { width: 68px; height: 68px; border-radius: 10px; background: #f3f2ef; overflow: hidden; }
.mm-plan-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mm-plan-produkt-rechts { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.mm-plan-produkt-kopf { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mm-plan-produkt-kopf b { font-size: 13.5px; font-weight: 600; }
.mm-plan-farbname { font-weight: 400; color: rgba(17, 17, 17, .55); }
.mm-plan-info { display: block; color: rgba(17, 17, 17, .55); }
.mm-plan-weg { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: none; font-size: 17px; line-height: 1; color: rgba(17, 17, 17, .45); cursor: pointer; }
.mm-plan-weg:hover { background: #f3f2ef; color: #111; }
.mm-plan-tupfer { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-plan-tupfer button { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(17, 17, 17, .18); border-radius: 50%; cursor: pointer; }
.mm-plan-tupfer button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #111; }
.mm-plan-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mm-plan-chips button { min-height: 26px; padding: 0 10px; border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; color: rgba(17, 17, 17, .7); cursor: pointer; }
.mm-plan-chips button[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.mm-plan-mengen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.mm-plan-mengen label { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: rgba(17, 17, 17, .55); }
.mm-plan-mengen input { width: 36px; min-height: 28px; padding: 2px 2px; text-align: center; border: 1px solid rgba(17, 17, 17, .14); border-radius: 7px; background: #fff; font: inherit; font-size: 12.5px; color: #111; -moz-appearance: textfield; }
.mm-plan-mengen input::-webkit-inner-spin-button, .mm-plan-mengen input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mm-plan-stueck input { width: 60px; font-weight: 600; }
.mm-plan-groessen { display: flex; flex-wrap: wrap; gap: 3px; }
.mm-plan-dazu { margin-top: 6px; }
/* „+ Produkt": die Produkte als Bilder, direkt in der Karte */
.mm-plan-auswahl { margin-top: 8px; padding: 10px; border-radius: 12px; background: #f6f5f2; }
.mm-plan-auswahl[hidden] { display: none; }
.mm-plan-auswahl p { margin: 0 0 8px; font-size: 11.5px; color: rgba(17, 17, 17, .55); }
.mm-plan-auswahl > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.mm-plan-auswahl button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border: 1px solid transparent; border-radius: 10px; background: #fff; font: inherit; font-size: 11px; font-weight: 600; color: #111; cursor: pointer; }
.mm-plan-auswahl button:hover { border-color: #111; }
.mm-plan-auswahl img { width: 56px; height: 56px; object-fit: contain; }
.mm-plan-schritte { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; }
.mm-plan-schritte li { padding-left: 2px; }
.mm-plan-schritt-neu::marker { color: rgba(17, 17, 17, .3); }
.mm-plan-leer { margin: 4px 0 10px; font-size: 12.5px; color: rgba(17, 17, 17, .5); }
.mm-plan-hinweis { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(17, 17, 17, .08); font-size: 11px; color: rgba(17, 17, 17, .5); }
/* Planen im D.AI-Panel des Boards (12.10.2026) */
.mm-ai-tabs { display: flex; gap: 4px; margin: 14px 14px 10px; padding: 3px; background: #f1f0ee; border-radius: 999px; }
.mm-ai-tabs button { flex: 1; min-height: 32px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: rgba(17, 17, 17, .6); cursor: pointer; }
/* Bunt wie der Rest von D.AI, mit Abstand zum Rand (Julian, 12.10.2026) */
.mm-ai-tabs button.aktiv { background: linear-gradient(135deg, #ff5fa2, #7c5cff); color: #fff; box-shadow: 0 1px 4px rgba(124, 92, 255, .25); }
.mm-planen { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.mm-planen[hidden] { display: none; }
/* Kopf wie „D.AI-DESIGN" bei Erstellen (13.10.2026); ⟳ = neu beginnen */
.mm-planen-kopf { display: flex; align-items: center; gap: 8px; margin: 0; }
.mm-planen-neu { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--kf-border, rgba(17,17,17,.12)); border-radius: 50%; background: #fff; color: #111; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mm-planen-neu:hover { border-color: #111; }
.mm-planen-intro { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(17, 17, 17, .6); }
.mm-planen-verlauf { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.mm-planen-verlauf:empty { display: none; }
.mm-planen-blase { max-width: 92%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.mm-planen-blase p { margin: 0 0 6px; white-space: pre-wrap; }
.mm-planen-blase p:last-child { margin-bottom: 0; }
.mm-planen-blase--nutzer { align-self: flex-end; background: #111; color: #fff; border-bottom-right-radius: 5px; }
.mm-planen-blase--ki { align-self: flex-start; background: #f3f2ef; color: #111; border-bottom-left-radius: 5px; }
.mm-planen-tippt { display: inline-flex; gap: 4px; padding: 12px 14px; }
.mm-planen-tippt span { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 17, 17, .4); animation: lab-dai-tippt 1s infinite ease-in-out; }
.mm-planen-tippt span:nth-child(2) { animation-delay: .15s; }
.mm-planen-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); } }
/* Antwort-Knöpfe wie die Pillen bei Erstellen */
.mm-planen-optionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm-planen-option { min-height: 30px; padding: 0 12px; border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #111; cursor: pointer; text-align: left; }
.mm-planen-option:hover { border-color: #111; }
/* Steckbrief so ausführlich wie in Explore */
.mm-planen-steckbrief { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 12px 14px; background: #fff; border: 1px solid rgba(17, 17, 17, .08); border-radius: 12px; font-size: 12.5px; }
.mm-planen-sb-titel { font-size: 14px; }
.mm-planen-steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.mm-planen-steckbrief dt { color: rgba(17, 17, 17, .5); }
.mm-planen-steckbrief dd { margin: 0; }
.mm-planen-sb-produkte { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mm-planen-sb-produkte span { display: block; color: rgba(17, 17, 17, .55); }
.mm-planen-sb-abschnitt { margin: 4px 0 0; font-size: 11px; font-weight: 700; color: rgba(17, 17, 17, .5); }
.mm-planen-steckbrief ol { margin: 0; padding-left: 18px; }
.mm-planen-sb-hinweis { margin: 2px 0 0; font-size: 11px; color: rgba(17, 17, 17, .5); }
.mm-planen-sb-wege { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mm-planen-sb-haupt, .mm-planen-sb-leise { min-height: 34px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mm-planen-sb-haupt { border: 0; color: #fff; background: linear-gradient(135deg, #ff5fa2, #7c5cff); }
.mm-planen-sb-leise { border: 1px solid rgba(17, 17, 17, .14); background: #fff; color: #111; }
/* Eingabe wie bei Erstellen: Feld mit Diktat, Pillen, bunter Hauptknopf */
.mm-planen-feld { display: flex; flex-direction: column; gap: 10px; }
.mm-planen-feld .kf-ki-prompt { resize: vertical; }
.mm-planen-pillen { margin: 0; }
.mm-planen-los { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(90deg, #ff5fa2, #7c5cff, #ff5fa2); background-size: 220% 100%; border-color: transparent; color: #fff; animation: kf-ki-gen-fluss 14s ease-in-out infinite; }
.mm-planen-los:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .mm-planen-los { animation: none; } }
/* Eigener Wert im Pillen-Menü */
.mm-planen-eigen { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(17, 17, 17, .08); }
.mm-planen-eigen input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px; font: inherit; font-size: 12.5px; }
.mm-planen-eigen input:focus { outline: none; border-color: #111; }
.mm-planen-eigen button { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Grafiken: Suche + Filter-Symbole in einer Zeile (Julian, 09.10.2026) */
.kf-board-panel-such.kf-formen-kopfzeile input { flex: 1 1 auto; width: auto; min-width: 0; padding-left: 31px; }
.kf-board-panel-aktiv { padding: 8px 14px 0; }

/* Blocksatz (16.10.2026), wie im Konfigurator (.kf-bz-zeile) */
.mm-bz-zeile { display: block; text-align: justify; text-align-last: justify; }
.mm-bz-letzte { text-align-last: center; }