/* Pressbiene Designer, Entwurf 2: die Werkbank.
   Idee: Der Editor ist eine Werkstatt. Zeichenfläche = Schneidematte oder Stoffbahn, Werkzeuge = Anhänger an einer Lochwand,
   Format = Maßband, Preis und Eigenschaften = Anhänger, Hinweise = Stempel und Aufkleber mit weißem Bügelrand, die Bügelbiene begleitet. */

/* ================= Raster der Werkbank ================= */
:root { --wand-b: 112px; --sch-b: 320px; }
:root:has(.app[data-schublade="zu"]) { --sch-b: 0px; }
@media (min-width: 900px) and (max-width: 1279px) { :root { --wand-b: 96px; --sch-b: 280px; } :root:has(.app[data-schublade="zu"]) { --sch-b: 0px; } }
.designer { height: 100dvh; overflow: hidden; }
.app {
  --wand-b: 112px; --sch-b: 320px; --rechts-b: 328px;
  height: 100dvh; display: grid;
  grid-template-columns: var(--wand-b) var(--sch-b) minmax(0, 1fr) var(--rechts-b);
  grid-template-rows: var(--werk-h) auto minmax(0, 1fr);
  grid-template-areas: "kopf kopf kopf kopf" "meldung meldung meldung meldung" "wand schublade tisch rechts";
  background: var(--grund);
}
.app[data-schublade="zu"] { --sch-b: 0px; }

/* ================= Kopf: Webband mit Webkante ================= */
.kopf {
  grid-area: kopf; position: relative; display: flex; align-items: center; gap: var(--a-16); padding: 0 var(--a-24) 0 var(--a-16);
  background: var(--band); color: var(--band-text); z-index: 20; /* Entwurf 5: über den Ecken der Matte (Biene, Unterlage, Lupe), sonst liegen sie auf dem offenen Menü */
}
.kopf::before, .kopf::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--faden) 0 8px, transparent 8px 14px); opacity: 0.8; pointer-events: none; }
.kopf::before { top: 4px; } .kopf::after { bottom: 4px; }
.kopf .knopf.leise { color: var(--band-text); }
.kopf .knopf.leise:hover { background: rgb(255 255 255 / 0.28); color: var(--band-text); }
.marke { display: flex; align-items: center; justify-content: center; flex: none; min-height: 44px; min-width: 44px; color: var(--tinte); border-radius: 8px; }
.logo-lang { height: 34px; width: auto; aspect-ratio: 942.85 / 204.04; --tinte: #17333D; --logo-rand: transparent; }
.logo-bild { display: none; height: 38px; aspect-ratio: 1 / 1; --tinte: #17333D; --logo-rand: transparent; }
.etikett-name { display: flex; align-items: center; gap: 8px; margin-left: var(--a-16); padding: 0 6px 0 12px; height: 44px; background: var(--zettel); color: var(--tinte); border-radius: 4px; border: 1.5px dashed var(--tinte); min-width: 0; flex: 0 1 300px; }
.etikett-name label { font-family: var(--f-mono); font-size: var(--s-11); font-weight: 700; color: var(--tinte-2); }
.etikett-name input { flex: 1; min-width: 0; height: 40px; background: transparent; border: 0; color: var(--tinte); font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: 600; font-size: var(--s-16); text-overflow: ellipsis; }
.etikett-name input:focus-visible { outline-offset: 0; border-radius: 2px; }
/* 0.4.0: Eine Gruppe links um den Bogen: Name, Speichern, Rückgängig und Wiederholen, Meine Designs. Rechts Zufall, Hell/Dunkel, Mehr. */
.bogen-gruppe { display: flex; align-items: center; gap: var(--a-8); min-width: 0; flex: 0 1 auto; }
.verlauf { display: flex; }
.kopf-aktionen { display: flex; gap: var(--a-8); margin-left: auto; }
/* Ungespeicherte Änderungen: ein kleiner Punkt am Speichern-Knopf (zusätzlich zum Namen für den Screenreader) */
#speichern { position: relative; }
#speichern .punkt { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--rot); border: 2px solid var(--zettel); }
#speichern[aria-disabled="true"] .punkt { display: none; }
.kopf .knopf.zweit { border-color: var(--tinte); }
.ansicht-wrap { position: relative; }
.menue { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 320px; max-width: calc(100vw - 24px); display: grid; gap: var(--a-16); padding: var(--a-16); background: var(--zettel); color: var(--tinte); border: 2px solid var(--tinte); border-radius: var(--r-karte); box-shadow: 0 6px 0 rgb(23 51 61 / 0.18); }
.menue .knopf.leise { color: var(--tinte); justify-content: flex-start; }
.menue-teil { display: grid; gap: var(--a-8); }
.menue-teil.mobil-nur { display: none; }
.menue-titel { font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; color: var(--tinte-2); }
.menue-klein { font-size: var(--s-13); color: var(--tinte-2); }
.menue-teil.entwurf { padding-top: var(--a-12); border-top: 1.5px dashed var(--kante); }
/* Eintrag, der Arbeit vernichten kann ("Bogen leeren"): abgesetzt und in der Warnfarbe, mit Rückfrage davor. */
.menue .knopf.leise.heikel { color: var(--fehler); }

/* ================= Wand mit Werkzeug-Anhängern =================
   0.4.0: Die Punktierung (Lochwand) ist weg, die Fläche bleibt einfarbig wie im Shop. Kante und Anhänger mit Stanzloch bleiben. */
.wand {
  grid-area: wand; position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--a-16) 0 var(--a-12); gap: var(--a-12);
  background-color: var(--grund);
  border-right: 1.5px solid var(--linie); overflow: hidden;
}
.werkzeuge { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.werkzeug {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  width: 80px; min-height: 84px; padding: 22px 4px 8px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--tinte);
  background: var(--zettel); border: 1.5px solid var(--kante); border-radius: 4px 4px 14px 14px;
  transition: transform var(--tempo) var(--auslauf), background var(--tempo) var(--auslauf);
}
/* Stanzloch und Schnur */
.werkzeug::before { content: ""; position: absolute; top: 6px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--grund); border: 1.5px solid var(--kante); }
.werkzeug::after { content: ""; position: absolute; top: -13px; left: 50%; width: 0; height: 17px; border-left: 2px solid var(--kante); transform: rotate(var(--schnur, 0deg)); transform-origin: bottom center; }
.werkzeuge > li:nth-child(odd) .werkzeug { --schnur: -2deg; transform: rotate(-1.2deg); }
.werkzeuge > li:nth-child(even) .werkzeug { --schnur: 2deg; transform: rotate(1deg); }
.werkzeug .ico { width: 30px; height: 30px; --fleck-an: 0; transition: transform var(--tempo) var(--auslauf); }
.werkzeug[data-w="hochladen"] .ico { --fleck: #FFDC3C; }
.werkzeug[data-w="text"] .ico { --fleck: #FA98D1; }
.werkzeug[data-w="formen"] .ico { --fleck: #1DB9B0; }
.werkzeug[data-w="motive"] .ico { --fleck: #EDA237; }
.werkzeug[data-w="filter"] .ico { --fleck: #3A8DDE; }
.werkzeug[data-w="ebenen"] .ico { --fleck: #9DB8A0; }
.werkzeug:hover { background: var(--zettel-2); transform: translateX(4px) rotate(-1.5deg); }
.werkzeug:hover .ico { --fleck-an: 1; }
.werkzeug[aria-pressed="true"] { background: var(--haupt-zart); border-color: var(--tinte); transform: translateX(10px) rotate(1.5deg); }
.werkzeug[aria-pressed="true"] .ico { --fleck-an: 1; }
.werkzeug[aria-pressed="true"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* B: laute bunte Sticker. C: nur Linie, aktiver Eintrag mit Markerstrich */

/* ================= Bügelbiene, die Begleiterin (Entwurf 5: neue Biene aus dem Logo, Greta 2026-10-02) =================
   Größe immer über die Bienenbreite: --biene (Schreibtisch 92 px, Handy 64 px). Das Bild ist 450/233 mal so breit wie die Biene,
   so hat sie dieselbe Linienstärke wie das Logo in dieser Größe (3,2 px bei 92 px, 2,2 px bei 64 px). Ab Bienenbreite unter 40 px: Pose "klein". */
.biene-ecke { position: absolute; left: calc(var(--biene, 92px) * -96 / 233); top: calc(var(--biene, 92px) * -90 / 233); width: calc(var(--biene, 92px) * 450 / 233); display: block; pointer-events: none; }
.biene-ecke svg { width: 100%; height: auto; max-width: none; overflow: visible; }
.biene-ecke.klein { left: 50%; top: 50%; width: 32px; transform: translate(-50%, -50%); }
.zeig-biene { display: block; margin: 0 auto; width: calc(var(--biene, 140px) * 450 / 233); max-width: 100%; }
.zeig-biene svg, .leer .zeig-biene svg { width: 100%; height: auto; max-width: none; overflow: visible; }
[data-biene="aus"] .biene-ecke { display: none; }
.bahn .biene-klein svg { width: 100%; height: auto; }

/* ================= Schublade (Ablage des Werkzeugs) ================= */
.schublade { grid-area: schublade; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--zettel); border-right: 1.5px solid var(--linie); }
.app[data-schublade="zu"] .schublade { visibility: hidden; border: 0; }
.sch-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--a-16) var(--a-16) var(--a-8) var(--a-24); flex: none; }
.sch-kopf h2 { font-size: var(--s-32); }
.sch-kopf .knopf { display: none; }
.sch-inhalt { flex: 1; overflow-y: auto; padding: var(--a-8) var(--a-24) var(--a-32); display: grid; gap: var(--a-24); align-content: start; }
.gruppe { display: grid; gap: var(--a-12); }
.gruppe > h3 { font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; color: var(--tinte); }
.klein-text { font-size: var(--s-13); color: var(--tinte-2); line-height: 1.45; }
.hinweis { display: grid; grid-template-columns: 24px 1fr; gap: var(--a-12); align-items: start; font-size: var(--s-13); line-height: 1.45; color: var(--tinte); }
.hinweis .ico { --fleck-an: 1; }
.hinweis.warn { color: var(--warn); } .hinweis.fehler { color: var(--fehler); }
.suche { position: relative; }
.suche input { padding-left: 40px !important; }
.suche .ico { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; pointer-events: none; --fleck-an: 0; }

/* Stickerbogen: Motive als Aufkleber auf Trägerpapier, nicht als gleich große Kacheln */
.stickerbogen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px 8px; padding: 14px 12px 12px;
  background: var(--zettel-2); border-radius: var(--r-karte); border: 1.5px dashed var(--kante); position: relative;
}
.sticker { position: relative; align-self: start; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 4px 2px 2px; background: transparent; border: 0; color: var(--tinte); font-family: var(--f-mono); font-size: 12px; font-weight: 700; transform: rotate(var(--neig, 0deg)); transition: transform var(--tempo) var(--auslauf); min-height: var(--ziel); }
.sticker svg { width: 100%; height: auto; overflow: visible; }
.sticker:nth-child(4n+1) { --neig: -2.2deg; } .sticker:nth-child(4n+2) { --neig: 1.6deg; } .sticker:nth-child(4n+3) { --neig: -0.8deg; } .sticker:nth-child(4n) { --neig: 2.4deg; }
.sticker.gross { grid-column: span 2; grid-row: span 2; }
.sticker.breit { grid-column: span 2; }
.sticker:hover { transform: rotate(0) translateY(-3px) scale(1.04); }
.sticker:active { transform: rotate(0) scale(0.98); }
.sticker .name { color: var(--tinte); }

/* Zufall-Karte in der Motiv-Schublade */
.zufall-zeile { display: grid; grid-template-columns: 1fr; gap: var(--a-8); }

/* Hochladen */
.ablegen { display: grid; justify-items: center; gap: var(--a-12); padding: var(--a-24) var(--a-16); border: 2px dashed var(--kante); border-radius: var(--r-karte); text-align: center; background: var(--zettel); transition: background var(--tempo) var(--auslauf); }
.ablegen.zieht { background: var(--haupt-zart); }
.ablegen .ico { width: 40px; height: 40px; --fleck-an: 1; --fleck: #FFDC3C; }
.ablegen strong { font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: var(--gew-display); font-size: var(--s-20); }
.upload-liste { display: grid; gap: var(--a-8); }
.upload-liste li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--a-12); align-items: center; padding: 6px; border-bottom: 1.5px dashed var(--linie); }
.upload-liste img { width: 56px; height: 44px; object-fit: cover; border-radius: 3px; border: 1.5px solid var(--kante); background: #fff; }
.upload-liste b { display: block; font-family: var(--f-mono); font-size: var(--s-13); }
.bahn { position: relative; height: 40px; border-radius: 6px; border: 1.5px solid var(--kante); background: var(--zettel-2); overflow: hidden; }
.bahn > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: #FFDC3C; background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgb(23 51 61 / 0.35) 12px 13px); }
.bahn .biene-klein { position: absolute; top: -8px; left: calc(var(--p, 0) * (100% - 40px)); width: 40px; transition: left 120ms linear; }
.bahn span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; color: var(--tinte); background: var(--zettel); padding: 0 4px; border-radius: 3px; }
.qr-zeile { display: grid; grid-template-columns: 88px 1fr; gap: var(--a-16); align-items: center; }
.qr-zeile .qr { background: #fff; padding: 6px; border: 1.5px solid var(--kante); border-radius: 4px; }
.qr-zeile .qr svg { width: 100%; height: auto; }

/* Filter: Stoffproben */
.proben { display: flex; gap: var(--a-12); flex-wrap: wrap; }
.probe { display: grid; justify-items: center; gap: 4px; background: transparent; border: 0; font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; color: var(--tinte); min-height: var(--ziel); }
.probe svg { width: 72px; height: 72px; border-radius: 50%; border: 2px dashed var(--kante); padding: 3px; background: var(--zettel); }
.probe[aria-pressed="true"] svg { border-style: solid; border-color: var(--tinte); }
.probe[aria-pressed="true"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Ebenen: Stapel zugeschnittener Teile */
.ebenen { display: grid; gap: 6px; }
.ebene { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; background: var(--zettel); border: 1.5px solid var(--linie); border-radius: 4px; padding: 2px 2px 2px 4px; }
.ebene[aria-current="true"] { border-color: var(--tinte); background: var(--haupt-zart); }
.ebene-wahl { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; min-height: var(--ziel); background: transparent; border: 0; text-align: left; font-family: var(--f-mono); font-size: var(--s-13); font-weight: 700; padding: 0 4px; min-width: 0; }
.ebene-wahl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ebene-wahl svg.mini { width: 40px; height: 32px; overflow: visible; }
.ebene-wahl .ico { margin: 0 8px; }
.ebene-tools { display: flex; }
.ebene-tools .knopf { min-height: 40px; min-width: 40px; width: 40px; }
.ebene-tools .knopf .ico { width: 20px; height: 20px; }

/* Leere Zustände mit Zeichnung */
.leer { display: grid; justify-items: center; text-align: center; gap: var(--a-12); padding: var(--a-16); }
.leer svg { width: min(210px, 70%); height: auto; overflow: visible; }
.leer h3 { font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: var(--gew-display); font-size: var(--s-24); line-height: 1.1; text-wrap: balance; color: var(--tinte); }
.leer p { max-width: 30ch; color: var(--tinte-2); font-size: var(--s-14); text-wrap: pretty; }

/* ================= Tisch: Matte und Stoffbahn ================= */
.tisch { grid-area: tisch; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--grund); }
.matte {
  --stoff-farbe: var(--matte); --marke: var(--matte-text); --masse: var(--matte-text); --faden: var(--matte-text); --rolle: #FFFFFF;
  --gf: 10px; --gs: 50px; --ox: 0px; --oy: 0px;
  position: relative; flex: 1; min-height: 0; overflow: auto; margin: var(--a-8) var(--a-12) 0; border-radius: var(--r-karte);
  background-color: var(--stoff-farbe);
  background-image:
    linear-gradient(var(--matte-stark) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--matte-stark) 1.5px, transparent 1.5px),
    linear-gradient(var(--matte-fein) 1px, transparent 1px), linear-gradient(90deg, var(--matte-fein) 1px, transparent 1px);
  background-size: var(--gs) var(--gs), var(--gs) var(--gs), var(--gf) var(--gf), var(--gf) var(--gf);
  background-position: var(--ox) var(--oy); background-attachment: local;
  scrollbar-width: thin; scrollbar-color: var(--marke) transparent;
  border: 2px solid var(--tinte);
  display: grid; place-items: center; align-content: safe center; justify-content: safe center;
}
.matte[data-stoff="weiss"] { --stoff-farbe: #FFFFFF; --marke: #17333D; --masse: #17333D; --faden: #6C858B; --webe: rgb(23 51 61 / 0.075); }
.matte[data-stoff="grau"] { --stoff-farbe: #B7BDC1; --marke: #17333D; --masse: #17333D; --faden: #F4F6F7; --webe: rgb(23 51 61 / 0.09); }
.matte[data-stoff="navy"] { --stoff-farbe: #1D2948; --marke: #FFFFFF; --masse: #FFFFFF; --faden: #C9D3F2; --webe: rgb(255 255 255 / 0.07); }
.matte[data-stoff="schwarz"] { --stoff-farbe: #0D0D0D; --marke: #FFFFFF; --masse: #FFFFFF; --faden: #A5B3B8; --webe: rgb(255 255 255 / 0.08); }
.matte:not([data-stoff="matte"]) {
  background-image: repeating-linear-gradient(0deg, var(--webe) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--webe) 0 1px, transparent 1px 4px);
  background-size: auto; background-position: 0 0;
}
.platte { position: relative; flex: none; }
#bogen { display: block; max-width: none; overflow: visible; touch-action: none; }
#bogen text { font-family: var(--f-mono); }
.s-folie { fill: rgb(255 255 255 / 0.1); stroke: #fff; stroke-width: 2; }
.matte[data-stoff="matte"] .s-folie-licht { fill: rgb(255 255 255 / 0.12); }
.matte:not([data-stoff="matte"]) .s-folie { fill: none; stroke: var(--faden); stroke-dasharray: 8 6; stroke-width: 2; stroke-linecap: round; }
.s-rand-aussen { fill: none; stroke: rgb(23 51 61 / 0.35); stroke-width: 1.5; }
.s-lineal line { stroke: var(--masse); stroke-width: 1.2; opacity: 0.85; }
.s-lineal text { fill: var(--masse); font-size: 10.5px; font-weight: 700; }
.s-kenn-bg { fill: #fff; }
.s-kenn text, .s-kenn rect.qr-m { fill: #17333D; }
.s-schnitt { stroke: var(--marke); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.9; }
.s-schnitt-text { fill: var(--marke); font-size: 10px; font-weight: 700; }
.s-auswahl { fill: none; stroke: var(--marke); stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: round; pointer-events: none; }
.s-auswahl.gesperrt { stroke-dasharray: 2 4; }
.s-nadel circle.kopf { fill: #FFDC3C; stroke: #17333D; stroke-width: 2.5; }
.s-nadel circle.glanz { fill: #fff; }
.s-nadel line { stroke: #17333D; stroke-width: 2.5; stroke-linecap: round; }
.s-abstand { fill: none; stroke: var(--marke); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.75; pointer-events: none; }
.s-abstand.eng { fill: rgb(255 220 60 / 0.35); stroke: #FFDC3C; opacity: 1; stroke-width: 2; }
.s-engetext rect { fill: var(--zettel); stroke: var(--fehler); stroke-width: 2; }
.s-engetext text { fill: var(--fehler); font-size: 12px; font-weight: 800; }
.s-sperre { fill: none; stroke: var(--marke); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: 0.8; pointer-events: none; }
.s-hilfslinie { stroke: #FA98D1; stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.s-schnitt-zone { fill: rgb(255 255 255 / 0.07); }
.item { cursor: grab; outline: none; }
.item:focus-visible { outline: none; }
.item.gesperrt { cursor: not-allowed; }
.item[data-sel="true"] { cursor: grabbing; }
.s-fokus { fill: none; stroke: #FFDC3C; stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
.matte:not([data-stoff="matte"]):not([data-stoff="schwarz"]):not([data-stoff="navy"]) .s-fokus { stroke: #0B6E7F; }

/* Auflösungs-Ampel als Aufkleber am Bild */
.s-ampel .kleber-rand { fill: #fff; stroke: #fff; stroke-width: 10; stroke-linejoin: round; }
.s-ampel .kleber { stroke: #17333D; stroke-width: 3; stroke-linejoin: round; }
.s-ampel.ok .kleber { fill: #9BE0B7; } .s-ampel.warn .kleber { fill: #FFB347; } .s-ampel.fehler .kleber { fill: #FF9A94; }
.s-ampel .symbol { fill: none; stroke: #17333D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-ampel .zahl { fill: #17333D; font-size: 12px; font-weight: 800; }
.s-ampel .wort { fill: #17333D; font-size: 10.5px; font-weight: 700; }

/* Leerer Bogen: die Zeichnung steht auf der Matte, der Bogen darunter bleibt sichtbar */
.leer-bogen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding: 24px; z-index: 3; }
.leer-bogen .leer { pointer-events: auto; background: var(--zettel); border: 2px solid var(--tinte); border-radius: var(--r-karte); padding: var(--a-24); max-width: 340px; box-shadow: 0 0 0 var(--sticker-rand) #fff; transform: rotate(-1deg); }
.leer-bogen .leer svg { width: min(170px, 60%); }

/* Stempel: Druckcheck (am Handy auf der Matte, am Schreibtisch im Preisanhänger) */
.stempel.auf-matte { display: none; position: absolute; right: 12px; bottom: calc(var(--fuss-h, 100px) + 16px); }
.stempel {
  --st: var(--ok);
  position: relative; z-index: 4; display: inline-flex; justify-self: start; align-items: center; gap: var(--a-12); min-height: 56px; padding: 8px 18px 8px 12px;
  color: var(--st); background: var(--zettel); border: 3px solid var(--st); border-radius: 12px; transform: rotate(-3deg);
  font-family: var(--f-display); font-variation-settings: var(--v-display); text-align: left;
  box-shadow: 0 0 0 var(--sticker-rand) #fff; transition: transform var(--tempo) var(--auslauf);
}
.stempel::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid currentColor; border-radius: 8px; pointer-events: none; opacity: 0.8; }
.stempel:hover { transform: rotate(-1deg) scale(1.03); }
.stempel .ico { width: 32px; height: 32px; --fleck-an: 0; }
.stempel b { display: block; font-size: var(--s-20); font-weight: var(--gew-display); line-height: 1.05; }
.stempel span { display: block; font-family: var(--f-mono); font-weight: 700; font-size: var(--s-12); }
.stempel.warn { --st: var(--warn); } .stempel.fehler { --st: var(--fehler); }

/* ================= Fuß: Maßband und Werkzeugzeile =================
   0.4.0: Maßband und die Knöpfe Abstand und Anordnen liegen in EINER Zeile (vorher zwei). Das gibt der Matte rund 70 px Höhe zurück.
   Erst unter 600 px brechen sie um, weil dort beide Teile schieben müssen. */
.fuss { flex: none; display: flex; align-items: flex-end; gap: var(--a-12); padding: var(--a-8) var(--a-12) var(--a-12); }
.massband { flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
.massband::-webkit-scrollbar { display: none; }
.mb-haken { flex: none; width: 14px; margin-top: 6px; background: var(--tinte); border-radius: 6px 0 0 6px; }
.mb-marke {
  position: relative; flex: 1 0 74px; display: grid; justify-items: start; align-content: start; gap: 2px; min-height: 56px; padding: 6px 8px 14px; margin-top: 6px; text-align: left;
  font-family: var(--f-mono); font-size: var(--s-12); color: #17333D; background: #FFDC3C; border: 0; border-top: 2px solid #17333D; border-right: 1.5px solid #17333D; border-radius: 0;
  transition: background var(--tempo) var(--auslauf);
}
.mb-marke::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, #17333D 0 1.5px, transparent 1.5px 9px); opacity: 0.8; }
.mb-marke b { font-size: var(--s-14); font-weight: 800; }
.mb-marke .p { font-weight: 600; }
.mb-marke.ausgerollt-nicht { background: var(--zettel-2); color: var(--tinte); border-top-style: dashed; }
.mb-marke.ausgerollt-nicht::after { opacity: 0.35; }
.mb-marke[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #17333D; }
.mb-marke[aria-pressed="true"]::before { content: ""; position: absolute; top: -13px; left: 14px; border: 7px solid transparent; border-top: 9px solid var(--rot); border-bottom: 0; filter: drop-shadow(0 0 0 #fff); }
.mb-marke[aria-disabled="true"] { cursor: not-allowed; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(23 51 61 / 0.18) 6px 7px); }
.mb-marke[aria-disabled="true"] b { text-decoration: line-through; text-decoration-thickness: 2px; }
.mb-mehr { flex: 0 0 auto; min-width: 84px; margin-top: 6px; padding: 6px 12px 14px; border: 2px dashed var(--kante); border-left: 0; border-radius: 0 var(--r-feld) var(--r-feld) 0; background: transparent; display: flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-weight: 700; font-size: var(--s-13); color: var(--tinte); }
.mb-mehr:hover { background: var(--zettel-2); }
.mb-mehr .ico { width: 20px; height: 20px; --fleck-an: 0; }
.fuss-zeile { flex: none; display: flex; align-items: center; gap: var(--a-8); }
.fuss-knoepfe { display: flex; gap: var(--a-8); align-items: center; flex-wrap: nowrap; }
.stoff-zyklus { display: none; }
.zoom { display: flex; align-items: center; }
.zoom .chip { min-width: 64px; justify-content: center; border-style: solid; }
.stoffe .chip { font-size: var(--s-12); }
.menue .chip { min-width: var(--ziel); justify-content: center; }

/* ================= Rechts: Preisanhänger und Etikett ================= */
.rechts { grid-area: rechts; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--a-16); padding: var(--a-24) var(--a-16) var(--a-16); border-left: 1.5px solid var(--linie); overflow: hidden; }
.anhaenger { position: relative; background: var(--zettel); border: 1.5px solid var(--kante); border-radius: 6px 6px var(--r-karte) var(--r-karte); }
.preis-tag { flex: none; display: grid; gap: var(--a-12); padding: 30px var(--a-16) var(--a-16); }
.preis-tag::before { content: ""; position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--grund); border: 1.5px solid var(--kante); }
.preis-tag::after { content: ""; position: absolute; top: -25px; left: 50%; width: 38px; height: 38px; margin-left: -19px; border: 2px solid var(--kante); border-radius: 50%; border-bottom-color: transparent; border-right-color: transparent; transform: rotate(45deg); z-index: -1; }
.preis-tag .preis { font-size: var(--s-56); line-height: 1; color: var(--tinte); }
.preis-tag .beschr:first-of-type { color: var(--tinte); font-weight: 700; }
.etikett { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: var(--a-8); overflow: hidden; }
.eig-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--a-12) var(--a-8) var(--a-4) var(--a-16); flex: none; }
.eig-kopf h2 { font-size: var(--s-24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eig-kopf .knopf { display: none; }
.eig-inhalt { flex: 1; overflow-y: auto; padding: var(--a-8) var(--a-16) var(--a-24); display: grid; gap: var(--a-24); align-content: start; }
.etikett::before { content: ""; position: absolute; top: -9px; left: 22px; width: 64px; height: 20px; background: var(--fleck); opacity: 0.95; transform: rotate(-3deg); z-index: 2; }
[data-r~="mix"] .etikett::before { background: #FFDC3C; }

/* Aktionen als Mini-Anhänger */
.aktionen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.aktion { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; background: transparent; border: 1.5px dashed var(--kante); border-radius: var(--r-feld); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--tinte); }
.aktion:hover { background: var(--zettel-2); }
.aktion[aria-pressed="true"] { background: var(--haupt-zart); border-style: solid; border-color: var(--tinte); }
.aktion[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.aktion .ico { width: 22px; height: 22px; --fleck-an: 0; }
.aktion.loesch { color: var(--fehler); }
.aktion.v .ico { transform: rotate(90deg); }

/* Farben als Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.knopf-farbe { position: relative; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: 50%; display: grid; place-items: center; }
.knopf-farbe i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid #17333D; box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.35); }
.knopf-farbe i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 36%, #17333D 0 1.6px, transparent 2px), radial-gradient(circle at 64% 36%, #17333D 0 1.6px, transparent 2px), radial-gradient(circle at 36% 64%, #17333D 0 1.6px, transparent 2px), radial-gradient(circle at 64% 64%, #17333D 0 1.6px, transparent 2px); }
.knopf-farbe[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--tinte); }
.knopf-farbe[aria-pressed="true"] i::after { content: ""; position: absolute; right: -4px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--haupt); box-shadow: 0 0 0 2px var(--zettel); }
.farbname { font-family: var(--f-mono); font-size: var(--s-12); color: var(--tinte-2); }

/* Druckcheck-Liste mit Stempeln */
.pruef { display: grid; gap: var(--a-12); }
.pruef li { display: grid; grid-template-columns: 76px 1fr; gap: var(--a-12); align-items: start; font-size: var(--s-13); line-height: 1.4; }
.pruef .mini-stempel { display: inline-grid; justify-items: center; gap: 2px; padding: 6px 4px; border: 2px solid var(--st); border-radius: 8px; color: var(--st); background: var(--zettel); font-family: var(--f-mono); font-size: 11px; font-weight: 800; line-height: 1.1; transform: rotate(-3deg); }
.pruef li:nth-child(even) .mini-stempel { transform: rotate(2.5deg); }
.pruef .mini-stempel .ico { width: 24px; height: 24px; --fleck-an: 0; }
.pruef li.ok { --st: var(--ok); } .pruef li.warn { --st: var(--warn); } .pruef li.fehler { --st: var(--fehler); }
.pruef strong { display: block; font-family: var(--f-mono); font-size: var(--s-13); }
.pruef .knopf { margin-top: 6px; min-height: 40px; padding: 0 12px; font-size: var(--s-13); }
.tabelle { display: grid; gap: 2px; }

/* dpi-Skala */
.dpi { display: grid; gap: 6px; }
.dpi-skala { position: relative; height: 12px; border-radius: 6px; border: 1.5px solid var(--kante); background: linear-gradient(90deg, var(--fehler-zart) 0 33.3%, var(--warn-zart) 33.3% 66.6%, var(--ok-zart) 66.6% 100%); }
.dpi-skala i { position: absolute; top: -6px; width: 4px; height: 21px; margin-left: -2px; background: var(--tinte); border-radius: 2px; }
.dpi-zahlen { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: var(--s-11); color: var(--tinte-2); }

/* ================= Meldungen als Aufkleber ================= */
.klebezettel { position: fixed; left: calc(var(--wand-b, 112px) + var(--sch-b, 320px) + 32px); top: calc(var(--kopf-h, 60px) + 24px); z-index: 40; display: grid; gap: 14px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.meldung {
  pointer-events: auto; display: flex; align-items: center; gap: var(--a-12); padding: 10px 14px; background: #FFDC3C; color: #17333D; border: 2.5px solid #17333D; border-radius: 16px; box-shadow: 0 0 0 5px #fff, 0 7px 0 5px rgb(23 51 61 / 0.18);
  font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: 600; font-size: var(--s-16); line-height: 1.25; transform: rotate(-1.5deg);
  animation: kleben 260ms var(--auslauf) both;
}
.meldung:nth-child(even) { transform: rotate(1.2deg); }
.meldung .ico { --fleck-an: 0; }
.meldung.ok { background: #9BE0B7; } .meldung.warn { background: #FFB347; } .meldung.fehler { background: #FF9A94; }
.meldung .knopf { min-height: 40px; padding: 0 12px; font-size: var(--s-13); background: #17333D; color: #fff; border-color: #17333D; }
.meldung .knopf::after { display: none; }
@keyframes kleben { from { transform: translateY(12px) scale(0) rotate(-5deg); } 70% { transform: translateY(-2px) scale(1.08) rotate(1deg); } to { transform: none; } }

/* Bogen gewachsen: Biene zu Besuch und Aufkleber */
.zu-besuch { position: absolute; width: 104px; z-index: 6; pointer-events: none; }
.zu-besuch svg { width: 100%; height: auto; overflow: visible; }
.aufkleber-gewachsen { position: absolute; z-index: 6; pointer-events: none; padding: 8px 14px; background: #FFDC3C; color: #17333D; border: 2.5px solid #17333D; border-radius: 14px; box-shadow: 0 0 0 5px #fff; font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: 700; font-size: var(--s-16); line-height: 1.15; transform: rotate(-4deg); animation: kleben 300ms var(--auslauf) both; max-width: 200px; }
.aufkleber-gewachsen small { display: block; font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; }

/* ================= Dialoge ================= */
dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; color: var(--tinte); background: var(--zettel); border: 2px solid var(--tinte); border-radius: var(--r-karte); box-shadow: 0 0 0 var(--sticker-rand) #fff; overflow: visible; }
dialog::backdrop { background: rgb(12 29 34 / 0.62); }
.dialog-innen { display: flex; flex-direction: column; max-height: calc(100dvh - 28px); position: relative; }
.dialog-innen::before { content: ""; position: absolute; top: -12px; left: 28px; width: 80px; height: 24px; background: #FFDC3C; opacity: 0.95; transform: rotate(-3deg); }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--a-24) var(--a-16) var(--a-8) var(--a-24); }
.dialog-kopf h2 { font-size: var(--s-32); }
.dialog-inhalt { padding: var(--a-8) var(--a-24) var(--a-16); overflow-y: auto; display: grid; gap: var(--a-16); }
.dialog-fuss { display: flex; gap: var(--a-12); justify-content: flex-end; flex-wrap: wrap; padding: var(--a-12) var(--a-24) var(--a-24); }
.dialog-inhalt p { line-height: 1.5; }
.designs { display: grid; gap: var(--a-16); }
.design { display: grid; grid-template-columns: 84px 1fr; gap: var(--a-16); align-items: center; padding-bottom: var(--a-16); border-bottom: 1.5px dashed var(--linie); }
.design-bild { position: relative; width: 84px; height: 110px; display: grid; place-items: center; background: var(--matte); border: 2px solid var(--tinte); border-radius: 4px; padding: 6px; transform: rotate(-1.5deg); }
.design:nth-child(even) .design-bild { transform: rotate(1.5deg); }
.design-bild::before { content: ""; position: absolute; top: -12px; left: 50%; width: 14px; height: 26px; margin-left: -7px; background: #FFDC3C; border: 2px solid #17333D; border-radius: 4px; z-index: 2; }
.design-bild svg { width: 100%; height: 100%; }
.design-text b { display: block; font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: 600; font-size: var(--s-20); line-height: 1.15; }
.design-tun { grid-column: 1 / -1; display: flex; gap: var(--a-8); flex-wrap: wrap; }
.design-tun .knopf { min-height: 44px; padding: 0 14px; font-size: var(--s-13); }

/* ================= Handy: Fläche oben, Werkzeuge unten ================= */
.kasse-m, .kontext { display: none; }
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--werk-h) auto minmax(0, 1fr) auto auto auto; grid-template-areas: "kopf" "meldung" "tisch" "sheet" "kasse" "wand"; }
  .kopf { gap: var(--a-8); padding: 0 var(--a-8) 0 var(--a-8); }
  .logo-lang { display: none; } .logo-bild { display: block; }
  .etikett-name { margin-left: 4px; flex: 1 1 auto; }
  .etikett-name label { display: none; }
  .verlauf { margin-left: 0; }
  #redo { display: none; }
  .kopf-aktionen { display: none; }
  .menue-teil.mobil-nur { display: grid; }
  .menue { position: fixed; top: calc(var(--kopf-h) + 4px); right: 8px; }
  .wand { grid-area: wand; flex-direction: row; justify-content: space-between; padding: 14px 8px calc(8px + env(safe-area-inset-bottom)); gap: 0; border-right: 0; border-top: 1.5px solid var(--linie); background-image: none; }
  .werkzeuge { flex-direction: row; gap: 4px; width: 100%; justify-content: space-between; }
  .werkzeug { width: 56px; min-height: 68px; padding: 18px 2px 6px; font-size: 11px; }
  .werkzeug .ico { width: 26px; height: 26px; }
  .werkzeug::after { top: -11px; height: 14px; }
  .werkzeuge > li:nth-child(odd) .werkzeug, .werkzeuge > li:nth-child(even) .werkzeug { transform: rotate(0); }
  .werkzeug:hover { transform: translateY(-2px); }
  .werkzeug[aria-pressed="true"] { transform: translateY(-8px); }
  .tisch { grid-area: tisch; }
  .matte { margin: 8px 8px 0; }
  .stempel.auf-matte { display: inline-flex; position: relative; right: auto; bottom: auto; justify-self: end; margin: 6px 14px 10px; min-height: 44px; padding: 4px 12px 4px 8px; }
  .stempel .ico { width: 24px; height: 24px; } .stempel b { font-size: var(--s-16); } .stempel.auf-matte span { display: none; }
  .fuss { padding: var(--a-8) var(--a-8) var(--a-8); gap: 4px; }
  .massband { padding-top: 8px; }
  .mb-marke { min-height: 50px; flex-basis: 70px; }
  .fuss-zeile { flex-wrap: nowrap; overflow-x: auto; gap: var(--a-8); scrollbar-width: none; }
  .fuss-zeile::-webkit-scrollbar { display: none; }
  .fuss-knoepfe { margin-left: 0; flex-wrap: nowrap; flex: none; }
  .fuss-knoepfe .chip { flex: none; }
  .rechts { display: none; grid-area: sheet; border-left: 0; padding: 0; }
  .app[data-sheet="eig"] .rechts { display: flex; max-height: 46dvh; }
  .preis-tag { display: none; }
  .etikett { margin: 14px 8px 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
  .eig-kopf .knopf { display: inline-flex; }
  .schublade { grid-area: sheet; display: none; border-right: 0; border-top: 1.5px solid var(--kante); max-height: 46dvh; }
  .app[data-sheet="schublade"] .schublade { display: flex; visibility: visible; }
  .sch-kopf { padding: var(--a-8) var(--a-8) 0 var(--a-16); }
  .sch-kopf h2 { font-size: var(--s-24); }
  .sch-kopf .knopf { display: inline-flex; }
  .sch-inhalt { padding: 4px var(--a-16) var(--a-16); gap: var(--a-16); }
  .stickerbogen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .app[data-sheet] .fuss, .app[data-sheet] .stempel { display: none; }
  .kasse-m { grid-area: kasse; display: flex; align-items: center; justify-content: space-between; gap: var(--a-12); padding: 8px var(--a-12); background: var(--zettel); border-top: 1.5px solid var(--kante); }
  .kasse-text { display: grid; }
  .kasse-m .preis { font-size: var(--s-32); line-height: 1; }
  .kasse-m .knopf { min-height: 48px; padding: 0 var(--a-16); }
  .app[data-sheet] .kasse-m { display: none; }
  .kontext { grid-area: kontext; display: flex; gap: 6px; align-items: center; padding: 6px var(--a-12); background: var(--zettel); border-top: 1.5px solid var(--kante); overflow-x: auto; }
  .kontext[hidden] { display: none; }
  /* Preis bleibt immer sichtbar: mit gewähltem Element wird die Kasse schlanker, die Kontextleiste liegt darüber */
  .app:has(.kontext:not([hidden])) .kasse-m { padding: 4px var(--a-12) 6px; border-top: 0; }
  .app:has(.kontext:not([hidden])) .kasse-m .preis { font-size: var(--s-24); }
  .app:has(.kontext:not([hidden])) .kasse-m .knopf { min-height: 44px; }
  .kontext .knopf { flex: none; min-height: 44px; }
  .klebezettel { left: 12px; right: 12px; width: auto; top: calc(var(--kopf-h) + 16px); }
  dialog { margin: auto; }
  .aktionen { grid-template-columns: repeat(4, 1fr); }
  .design { grid-template-columns: 72px 1fr; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .app { --wand-b: 96px; --sch-b: 280px; --rechts-b: 288px; }
  .werkzeug { width: 72px; }
  .stickerbogen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kopf-aktionen .knopf span { display: none; }
  .kopf-aktionen .knopf { padding: 0; width: var(--ziel); }
}
@media (min-width: 900px) and (max-height: 780px) {
  .werkzeuge { gap: 12px; }
}

/* C: helle Matte, die Folie bekommt eine Tintenlinie */

.matte :focus-visible { outline-color: var(--marke); }
.item:focus-visible > rect { stroke: #FFDC3C; stroke-width: 3; }


/* =====================================================================
   Entwurf 4: heller, stoffliches Material, Schulschrift.
   Lichtrichtung überall gleich: von links oben. Schatten fallen nach rechts unten, kurz und weich (höchstens 8 px Unschärfe).
   Nichts davon gehört in die Druckdatei, es ist nur die Werkbank um den Bogen.
   ===================================================================== */

/* Papierlicht: im Hellen weiß von links oben, im Dunklen nur ein Hauch */
html { --zl: #FFFFFF; --hl: rgb(255 255 255 / 0.9); }
:root[data-theme="dunkel"] { --zl: #214550; --hl: rgb(255 255 255 / 0.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --zl: #214550; --hl: rgb(255 255 255 / 0.1); } }
:root[data-theme="dunkel"] .mb-marke.ausgerollt-nicht { background: repeating-linear-gradient(135deg, rgb(255 217 43 / 0.2) 0 6px, rgb(255 217 43 / 0.1) 6px 12px), var(--zettel-2); }

/* ---------- Schrift (wie im Shop): Titel Quicksand, Text Figtree, Knöpfe und Etiketten Atkinson Mono. Handschrift (Playpen Sans Latin) nur für die kurzen Sätze der Biene in der Sprechblase, nie unter 20 px. ---------- */
html { --lab: 14px; --lab-k: 13px; }
.blase:not(.warn):not(.fehler) { font-family: var(--f-hand); font-weight: 400; font-variation-settings: normal; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; }
/* Immer in der klaren Schrift: Preise, Zahlen, Fehlermeldungen, Hinweise, lange Texte, Stempel, Eingabefelder */
.preis, .feld input, .pruef, .hinweis, .klein-text, .stempel, .s-ampel text, .mb-marke, .dpi-zahlen, .menue-klein { font-variant-numeric: tabular-nums; }
.biene-mini { display: inline-grid; place-items: center; flex: none; }
.biene-mini .ico { width: 30px; height: 30px; --fleck-an: 1; }

/* ---------- Werkbank-Grund und Kopf ---------- */
.kopf { background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 70%); box-shadow: 0 2px 5px var(--sh-weich); }
.wand {
  background-color: var(--wand-bg); background-image: none;
  border-right: 0; box-shadow: inset -1px 0 0 rgb(23 51 61 / 0.12), 2px 0 5px var(--sh-weich); z-index: 2;
}

/* ---------- Werkzeug-Anhänger: zurück auf die Form aus Entwurf 2 (Rahmen, Stanzloch, einfache Schnur), Wunsch von Melanie ---------- */

/* ---------- Papier: Schublade, Preisanhänger, Etikett, Dialoge ---------- */
.schublade { background: linear-gradient(165deg, var(--zl) 0%, var(--zettel) 35%); border-right: 0; box-shadow: 3px 0 7px var(--sh-weich); z-index: 1; }
.anhaenger, .preisblock { border: 0; background: linear-gradient(160deg, var(--zl), var(--zettel) 38%); box-shadow: inset 0 0 0 1px rgb(23 51 61 / 0.13), inset 1px 1px 0 var(--hl), 1px 3px 0 var(--sh-weich), 2px 6px 8px var(--sh-weich); }
.preis-tag::before, .preisblock::before { width: 14px; height: 14px; margin-left: -7px; top: 8px; border: 0; background: radial-gradient(circle, var(--wand-bg) 0 3.8px, #EEF1F2 4.2px 5.6px, #98A3A8 6px 7.2px); box-shadow: 0 1px 1px rgb(23 51 61 / 0.25); }
.preisblock::before { left: 16px; margin-left: 0; }
.preis-tag::after { border-color: var(--haupt); opacity: 0.85; }
dialog { background: linear-gradient(165deg, var(--zl), var(--zettel) 40%); border: 0; box-shadow: inset 0 0 0 1px rgb(23 51 61 / 0.14), 2px 6px 8px rgb(23 51 61 / 0.3); }
/* Washi-Tape mit gezackter Kante, leicht durchscheinend */
.etikett::before, .dialog-innen::before { clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); opacity: 0.88; background: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 60%), #FFDC3C; box-shadow: none; filter: drop-shadow(1px 1px 1px var(--sh-weich)); }

/* ---------- Matte und Bogen: wieder exakt wie in Entwurf 2 (Grün mit Millimeter-Raster, Lineal, Bogen, Griffe, Kennzeile). Keine Textur, kein Winkelmesser, keine Schnittspuren, kein Aufdruck. ---------- */

/* ---------- Maßband: gedruckte Skala, Metallklemme ---------- */
.massband { filter: drop-shadow(1.5px 3px 2px var(--sh)); padding-top: 10px; }
.mb-haken {
  width: 24px; margin-top: 3px; border-radius: 5px 0 0 5px; position: relative;
  background: linear-gradient(180deg, #F7F9FA 0%, #C7CED2 40%, #8F9AA0 52%, #D8DEE1 100%);
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.9), inset -1px 0 0 rgb(23 51 61 / 0.25);
}
.mb-haken::before, .mb-haken::after { content: ""; position: absolute; left: 7px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 1px, #9AA4A9 2px, #5E6A70 3.5px); }
.mb-haken::before { top: 9px; } .mb-haken::after { bottom: 12px; }
.mb-marke {
  margin-top: 6px; border: 0; border-right: 1px solid rgb(23 51 61 / 0.45); border-radius: 0;
  background: linear-gradient(180deg, #FFE866 0%, #FFD92B 50%, #F4C511 100%);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 0.75), inset 0 -2px 0 rgb(150 100 0 / 0.28);
}
.mb-marke::after { height: 10px; opacity: 0.9; background: repeating-linear-gradient(90deg, #17333D 0 1.2px, transparent 1.2px 5px), repeating-linear-gradient(90deg, #17333D 0 1.6px, transparent 1.6px 25px); background-size: 100% 5px, 100% 10px; background-position: 0 100%, 0 100%; background-repeat: repeat-x; }
.mb-marke b { font-weight: 800; }
.mb-marke.ausgerollt-nicht { background: repeating-linear-gradient(135deg, rgb(255 217 43 / 0.34) 0 6px, rgb(255 217 43 / 0.2) 6px 12px), var(--zettel-2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6); border-top: 0; color: var(--tinte); }
.mb-marke[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #17333D, inset 0 1.5px 0 rgb(255 255 255 / 0.75); }
.mb-marke[aria-pressed="true"]::before { border-top-color: #D6402B; filter: drop-shadow(1px 1px 0 var(--sh)); }
.mb-mehr { border: 2px dashed var(--kante); border-left: 0; }

/* ---------- Knöpfe, Farbknöpfe und Chips: wie in Entwurf 2 (flach, mit Rahmen und Steppnaht). Hier nur Meldungen und Stempel mit Schatten ---------- */
.meldung { box-shadow: 0 0 0 5px #fff, 2px 6px 8px 5px var(--sh-weich); }
.stempel { box-shadow: 0 0 0 var(--sticker-rand) #fff, 1px 3px 4px var(--sh-weich); }
.kasse-m { box-shadow: 0 -2px 6px var(--sh-weich); }
.design-bild { box-shadow: 1px 3px 4px var(--sh); }

/* Hell/Dunkel und Ansicht sind sichtbare, beschriftete Knöpfe im Kopf */
.kopf .thema-schnell, .kopf #ansicht { padding: 0 14px; }
.kopf #ansicht .ico, .kopf .thema-schnell .ico { --fleck-an: 1; }
@media (max-width: 899px) { .kopf #thema-schnell, .kopf #ansicht { padding: 0; width: var(--ziel); } .kopf #thema-schnell span, .kopf #ansicht span { display: none; } .kopf #redo { display: none; } }
@media (min-width: 900px) and (max-width: 1279px) { .kopf #thema-schnell span { display: none; } .kopf #thema-schnell { padding: 0; width: var(--ziel); } }

.ansicht-wrap { display: flex; gap: var(--a-8); align-items: center; }
.kopf .menue { right: 0; }
.menue { z-index: 60; max-height: calc(100dvh - var(--kopf-h) - 24px); overflow-y: auto; }

/* Mittlere Breite (Tablet hochkant, etwa 600 bis 899 px): Blatt links neben der Matte statt darunter, damit der Bogen groß bleibt */
@media (min-width: 600px) and (max-width: 899px) {
  .app[data-sheet] { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: var(--werk-h) minmax(0, 1fr) auto auto auto; grid-template-areas: "kopf kopf" "sheet tisch" "sheet kontext" "sheet kasse" "wand wand"; }
  .app[data-sheet] .schublade, .app[data-sheet="eig"] .rechts { max-height: none; }
  .app[data-sheet] .fuss { display: grid; }
  .app[data-sheet] .stempel.auf-matte { display: inline-flex; }
  .app[data-sheet] .kasse-m { display: flex; }
  .app[data-sheet] .schublade { border-top: 0; border-right: 1.5px solid var(--linie); }
  .app[data-sheet] .etikett { margin: 14px 8px 8px; border-radius: 6px 6px var(--r-karte) var(--r-karte); }
}
.etikett-name { height: 44px; padding-block: 0; } .etikett-name input { height: 44px; }



/* =====================================================================
   Entwurf 4, Ecken der Zeichenfläche: Biene mit Sprechblase (oben links), Unterlage (unten links), Lupe (unten rechts).
   Die Blase liegt nur im oberen Bereich der Matte, nie auf Maßband, Werkzeugen, Kennzeile oder Kasse.
   ===================================================================== */
.biene-bereich { --biene: 92px; position: absolute; top: calc(28px + var(--biene) * 0.4); left: calc(28px + var(--biene) * 0.4); right: 28px; z-index: 9; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }
.biene-bereich > * { pointer-events: auto; }
.biene-knopf { position: relative; flex: none; width: var(--biene); height: calc(var(--biene) * 170 / 233); min-height: 44px; padding: 0; background: none; border: 0; border-radius: 14px; color: var(--tinte); }
.biene-bereich[data-klein] .biene-knopf { width: 44px; height: 44px; }
.biene-knopf:hover .biene-ecke { filter: brightness(1.04); }
.biene-aus-icon { display: none; }
[data-biene="aus"] .biene-knopf, [data-biene="aus"] .biene-bereich[data-klein] .biene-knopf { width: 48px; height: 48px; }
[data-biene="aus"] .biene-bereich { top: 28px; left: 28px; }
[data-biene="aus"] .blase { margin-left: 0; }
[data-biene="aus"] .blase::before { display: none; }
.biene-bereich[data-klein] .biene-badge { display: none; }
[data-biene="aus"] .biene-aus-icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--zettel); border: 1.5px solid var(--kante); border-radius: 50%; }
/* Fokusring auf der Matte: Türkis auf Grün war unsichtbar, darum weiß mit dunklem Innenring */
.biene-knopf:focus-visible, .unterlage-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px #17333D; }
.biene-badge { position: absolute; top: -6px; right: -4px; width: 26px; height: 26px; display: grid; place-items: center; background: #C23D22; color: #fff; border: 2px solid #fff; border-radius: 50%; font-family: var(--f-mono); font-weight: 800; font-size: 16px; line-height: 1; box-shadow: 1px 2px 3px var(--sh-weich); animation: kleben 300ms var(--auslauf) both; }
/* ---------- Sprechblase (0.4.0): eigener Platz ÜBER der Matte ----------
   Sie liegt nie auf dem Bogen, auf einem Motiv oder auf einer Problemstelle, fängt keine Klicks darunter ab (darunter ist nichts mehr)
   und hat immer ein Schließen-Zeichen, auch bei Problemen (Esc schließt ebenfalls). Kompakt: eine bis zwei Zeilen. */
.meldungs-platz { grid-area: meldung; display: flex; align-items: flex-start; padding: 6px var(--a-12) 0; padding-left: calc(var(--wand-b, 112px) + var(--sch-b, 0px) + var(--a-12)); }
.meldungs-platz:not(:has(.blase:not([hidden]))) { display: none; }
.blase { position: relative; margin-left: calc(var(--biene, 92px) * 0.45); flex: 0 1 auto; min-width: 0; max-width: min(760px, 100%); min-height: 48px; padding: 2px 2px 2px 12px; display: flex; align-items: center; gap: var(--a-8); background: #FFDC3C; color: #17333D; border: 2.5px solid #17333D; border-radius: 14px; box-shadow: 0 0 0 4px #fff, 2px 5px 8px var(--sh-weich); font-family: var(--f-display); font-variation-settings: var(--v-display); font-weight: 600; font-size: 15px; line-height: 1.3; animation: kleben 220ms var(--auslauf) both; }
.blase::before { content: ""; position: absolute; left: 22px; bottom: -8px; width: 12px; height: 12px; background: inherit; border-right: 2.5px solid #17333D; border-bottom: 2.5px solid #17333D; transform: rotate(45deg); }
.blase .blase-text { flex: 1 1 auto; min-width: 0; }
.blase .zu { flex: none; }
.blase.ok { background: #9BE0B7; } .blase.warn { background: #FFB347; } .blase.fehler { background: #FF9A94; }
.blase-text { display: block; }
.blase .knopf { min-height: 44px; padding: 0 14px; font-size: var(--s-13); background: #17333D; color: #fff; border-color: #17333D; }
.blase .knopf::after { display: none; }
.verlauf-panel { margin-top: 12px; width: min(330px, calc(100vw - 150px)); max-height: 280px; overflow-y: auto; padding: 10px 12px 12px; display: grid; gap: 10px; background: var(--zettel); color: var(--tinte); border: 1.5px solid var(--kante); border-radius: var(--r-karte); box-shadow: 2px 5px 8px var(--sh-weich); }
.verlauf-kopf { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: var(--s-13); }
.verlauf-eintrag { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; font-size: var(--s-13); line-height: 1.35; padding-bottom: 8px; border-bottom: 1.5px dashed var(--linie); }
.verlauf-eintrag small { display: block; font-family: var(--f-mono); font-size: var(--s-11); color: var(--tinte-2); }
.verlauf-eintrag.fehler { color: var(--fehler); } .verlauf-eintrag.warn { color: var(--warn); }
.verlauf-eintrag .ico { --fleck-an: 0; }

.unterlage { position: absolute; left: 28px; bottom: calc(var(--fuss-h, 140px) + 12px); z-index: 8; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.unterlage-knopf { width: 54px; height: 54px; padding: 4px; background: var(--zettel); border: 2px solid var(--tinte); border-radius: 50%; box-shadow: 1px 3px 4px var(--sh-weich); }
.unterlage-knopf .muster { width: 100%; height: 100%; }
.unterlage-wahl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; width: min(330px, calc(100vw - 72px)); padding: 10px 12px 12px; background: var(--zettel); border: 1.5px solid var(--kante); border-radius: var(--r-karte); box-shadow: 2px 5px 8px var(--sh-weich); }
.unterlage-titel { flex: 0 0 100%; font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; color: var(--tinte); }
.unterlage-hinweis { flex: 0 0 100%; font-size: var(--s-12); line-height: 1.4; color: var(--tinte-2); }
.muster-knopf { display: grid; justify-items: center; gap: 2px; width: 56px; min-height: 66px; padding: 0; background: none; border: 0; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--tinte); }
.muster-knopf .muster { width: 44px; height: 44px; }
.muster-knopf[aria-pressed="true"] .muster { box-shadow: 0 0 0 2px var(--zettel), 0 0 0 4.5px var(--tinte); }
.muster-knopf[aria-pressed="true"] .muster-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.muster { display: block; border-radius: 50%; border: 2px solid #17333D; background-color: #0E7C7B; }
.muster[data-stoff="matte"] { background-color: #0E7C7B; background-image: linear-gradient(rgb(255 255 255 / 0.85) 1.5px, transparent 1.5px), linear-gradient(90deg, rgb(255 255 255 / 0.85) 1.5px, transparent 1.5px); background-size: 9px 9px; background-position: 1px 1px; }
.muster[data-stoff="weiss"], .muster[data-stoff="grau"], .muster[data-stoff="navy"], .muster[data-stoff="schwarz"] { background-image: repeating-linear-gradient(0deg, var(--wb) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--wb) 0 1px, transparent 1px 3px); }
.muster[data-stoff="weiss"] { background-color: #FFFFFF; --wb: rgb(23 51 61 / 0.2); }
.muster[data-stoff="grau"] { background-color: #B7BDC1; --wb: rgb(23 51 61 / 0.22); }
.muster[data-stoff="navy"] { background-color: #1D2948; --wb: rgb(255 255 255 / 0.18); }
.muster[data-stoff="schwarz"] { background-color: #0D0D0D; --wb: rgb(255 255 255 / 0.2); }


.lupe { position: absolute; right: 28px; bottom: calc(var(--fuss-h, 140px) + 12px); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; background: var(--zettel); border: 1.5px solid var(--kante); border-radius: 28px; box-shadow: 1px 3px 4px var(--sh-weich); }
.lupe .knopf.icon { background: var(--zettel); }
.lupe-wert { min-width: 56px; text-align: center; font-family: var(--f-mono); font-weight: 700; font-size: var(--s-13); color: var(--tinte); font-variant-numeric: tabular-nums; }
.lupe .tasten-knopf { display: none; }
.tasten-hilfe { position: absolute; right: 0; bottom: calc(100% + 8px); width: 340px; padding: 12px 14px 14px; background: var(--zettel); color: var(--tinte); border: 1.5px solid var(--kante); border-radius: var(--r-karte); box-shadow: 2px 5px 8px var(--sh-weich); text-align: left; }
.tasten-hilfe h3 { font-family: var(--f-mono); font-size: var(--s-13); margin-bottom: 8px; }
.tasten-hilfe ul { display: grid; gap: 6px; font-size: var(--s-13); line-height: 1.4; }
kbd { display: inline-block; min-width: 22px; padding: 0 5px; text-align: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--tinte); background: var(--zettel-2); border: 1.5px solid var(--kante); border-bottom-width: 3px; border-radius: 4px; }
@media (min-width: 1280px) {
  .lupe { flex-direction: row; border-radius: 28px; }
  .lupe #zoom-aus { order: 1; } .lupe .lupe-wert { order: 2; } .lupe #zoom-ein { order: 3; } .lupe #zoom-ganz { order: 4; } .lupe .tasten-knopf { display: inline-flex; order: 5; }
}
@media (max-width: 899px) {
  .biene-bereich { --biene: 64px; top: calc(20px + var(--biene) * 0.4); left: calc(20px + var(--biene) * 0.4); right: 24px; gap: 8px; }
  .biene-bereich[data-klein], [data-biene="aus"] .biene-bereich { top: 20px; left: 20px; }
  .meldungs-platz { padding: 6px var(--a-8) 0; }
  .blase { max-width: 100%; font-size: 14px; padding: 4px 4px 4px 10px; margin-left: calc(var(--biene, 64px) * 0.45); }
  .verlauf-panel { width: min(300px, calc(100vw - 172px)); }
  .unterlage { left: 20px; z-index: 12; } .lupe { right: 20px; }
  .unterlage-wahl { width: auto; max-width: calc(100vw - 56px); flex-wrap: nowrap; gap: 4px; padding: 8px 8px 6px; }
  .unterlage-titel, .unterlage-hinweis { display: none; }
  .muster-knopf { width: 48px; }
  .stempel.auf-matte { justify-self: center; }
  .fuss-zeile { justify-content: center; }
  .fuss-knoepfe { margin-left: 0; }
}

/* Mittlere Breite ohne Blatt: Kontextleiste und Kasse teilen sich eine Zeile, damit der Bogen mehr Höhe bekommt */
@media (min-width: 600px) and (max-width: 899px) {
  .app:not([data-sheet]) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--werk-h) minmax(0, 1fr) auto auto auto; grid-template-areas: "kopf kopf" "tisch tisch" "sheet sheet" "kontext kasse" "wand wand"; }
  .app:not([data-sheet]):not(:has(.kontext:not([hidden]))) .kasse-m { grid-area: 4 / 1 / 5 / 3; }
  .app:not([data-sheet]) .kontext { border-right: 0; }
}


/* =====================================================================
   Hand-Werkzeug: Ansicht verschieben (Leertaste halten, Hand-Knopf, mittlere Maustaste, am Handy zwei Finger).
   Die Matte scrollt nicht mehr selbst, der Bogen wird per Versatz verschoben und so begrenzt, dass immer ein Teil sichtbar bleibt.
   ===================================================================== */
.matte { overflow: hidden; touch-action: none; }
.matte.hand-an, .matte.hand-an * { cursor: grab !important; }
.matte.hand-zieht, .matte.hand-zieht * { cursor: grabbing !important; }
.lupe .knopf[aria-pressed="true"] { background: var(--haupt-zart); border-color: var(--tinte); }
@media (min-width: 1280px) { .lupe #hand-knopf { order: 5; } .lupe .tasten-knopf { order: 6; } }
.matte:focus-visible { outline: 3px solid #fff; outline-offset: -8px; border-radius: 10px; }
/* Handy mit offenem Blatt: Die Matte ist niedrig, die Lupe wird zur Zeile */
@media (max-width: 599px) {
  .app[data-sheet] .lupe { flex-direction: row; right: 12px; bottom: 12px; padding: 4px; border-radius: 28px; }
  .app[data-sheet] .lupe-wert { min-width: 48px; order: 0; }
  .app[data-sheet] .lupe #zoom-aus { order: 1; } .app[data-sheet] .lupe .lupe-wert { order: 2; } .app[data-sheet] .lupe #zoom-ein { order: 3; } .app[data-sheet] .lupe #zoom-ganz { order: 4; } .app[data-sheet] .lupe #hand-knopf { order: 5; }
  .app[data-sheet] .unterlage { left: 12px; bottom: 12px; }
}