/* Pressbiene Designer 0.2.0: Werkbank im Stil des Shops (nur designer.html). Liegt nach rahmen.css, designer.css und biene-final.css.
   Flach, Schatten klein und hart (nie weich), Zettel mit Tinte-Rand, Sprechblase wie im Shop. Geblieben ist, was den Designer ausmacht:
   dunkle Matte, Werkzeug-Anhänger an der Lochwand, Maßband, Biene mit Sprechblase, Lupe, Hand-Werkzeug. */
.designer { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.designer .app { flex: 1 1 0; height: auto; min-height: 0; }
/* ================= Werkzeugleiste des Designers (unter dem Shop-Kopf) ================= */
.kopf { height: var(--werk-h); gap: var(--a-12); padding: 0 var(--a-24) 0 var(--a-16); background: var(--tuerkis-zart); background-image: none; color: var(--tinte); box-shadow: none; border-bottom: 2px dashed var(--naht); z-index: 20; }
.kopf::before, .kopf::after { display: none; }
.kopf .knopf.leise, .kopf .knopf.leise:hover { color: var(--tinte); }
.kopf .knopf.leise:hover { background: var(--gelb); color: var(--auf-gelb); }
.etikett-name { margin-left: 0; gap: 8px; padding: 0 6px 0 12px; height: 48px; background: var(--zettel); color: var(--tinte); border: 2px solid var(--kante); border-radius: var(--r-feld); }
.etikett-name label { font-family: var(--f-mono); font-size: var(--s-12); font-weight: 700; color: var(--tinte-2); }
.etikett-name input { height: 44px; font-family: var(--f-display); font-weight: 700; font-size: var(--s-16); }
.etikett-name:focus-within { border-color: var(--tinte); }
.kopf .knopf { min-height: 44px; box-shadow: 3px 3px 0 var(--sh-voll); }
.kopf .knopf.leise { box-shadow: none; }
.kopf .knopf.zweit { border-color: var(--tinte); }

.fuellstand .skala { border: 2px solid var(--kante); border-radius: var(--r-feld); background: var(--zettel-2); }
.fuellstand .skala > i { background: var(--tuerkis); }
.fuellstand .skala::after { background: repeating-linear-gradient(90deg, transparent 0 9px, var(--tinte-fest) 9px 10px); opacity: 0.45; }
.fuellstand[data-warn="true"] .skala > i { background: var(--fehler); }
/* ================= Werkbank: Lochwand, Anhänger, Papier. Flach, mit kleinen harten Schatten ================= */
/* 0.4.0 (Wunsch der Chefin): keine Punktierung mehr. Ruhige, einfarbige Fläche wie im Shop, nur die gestrichelte Kante bleibt. */
.wand { background-color: var(--wand-bg); background-image: none; border-right: 2px dashed var(--naht); box-shadow: none; }
.werkzeug { font-size: 0.8125rem; color: var(--tinte); background: var(--zettel); border: 2px solid var(--tinte); border-radius: 4px 4px 14px 14px; box-shadow: 2px 3px 0 var(--sh); }
.werkzeug::before { background: var(--wand-bg); border: 2px solid var(--tinte); }
.werkzeug::after { border-left: 2px solid var(--tinte); }
.werkzeug:hover { background: var(--tuerkis-zart); }
.werkzeug[aria-pressed="true"] { background: var(--gelb); color: var(--auf-gelb); border-color: var(--tinte-fest); }
.werkzeug[aria-pressed="true"]::before { background: var(--zettel); border-color: var(--tinte-fest); }
.werkzeug[aria-pressed="true"]::after { border-left-color: var(--tinte-fest); }
.werkzeug .ico { --fleck-an: 1; }
.werkzeug[data-w] .ico { --fleck: #FFDC3C; }
.werkzeug[aria-pressed="true"] .ico { --fleck: #FFFFFF; }

.schublade { background: var(--zettel); border-right: 0; box-shadow: none; }
.sch-kopf h2 { font-size: var(--s-32); }
.gruppe > h3 { font-family: var(--f-mono); font-size: var(--s-13); font-weight: 700; color: var(--tinte); }
.stickerbogen { background: var(--zettel-2); border: 2px dashed var(--kante); border-radius: var(--r-karte); }
.sticker { font-size: 0.8125rem; }
.ablegen { border: 2px dashed var(--kante); border-radius: var(--r-karte); background: var(--zettel); }
.ablegen.zieht { background: var(--tuerkis-zart); }
.bahn { border: 2px solid var(--kante); border-radius: var(--r-feld); background: var(--zettel-2); }
.bahn > i { background: var(--gelb); background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgb(23 51 61 / 0.35) 12px 13px); }
.upload-liste li { border-bottom: 2px dashed var(--linie); }
.upload-liste img { border: 2px solid var(--kante); }
.probe svg { border: 2px dashed var(--kante); background: var(--zettel); }
.probe[aria-pressed="true"] svg { border: 2px solid var(--tinte); background: var(--gelb); }
.ebene { background: var(--zettel); border: 2px solid var(--linie); border-radius: var(--r-klein); }
.ebene[aria-current="true"] { border-color: var(--tinte); background: var(--tuerkis-zart); }
.aktion { border: 2px dashed var(--kante); border-radius: var(--r-feld); background: var(--zettel); font-size: 0.8125rem; }
.aktion:hover { background: var(--tuerkis-zart); }
.aktion[aria-pressed="true"] { background: var(--gelb); color: var(--auf-gelb); border: 2px solid var(--tinte-fest); }
.knopf-farbe[aria-pressed="true"] i::after { background: var(--gelb); box-shadow: 0 0 0 2px var(--tinte-fest); }
.dpi-skala { border: 2px solid var(--kante); }
.leer h3 { font-size: var(--s-24); }

.rechts { background: var(--grund); border-left: 2px dashed var(--naht); }
.anhaenger, .preisblock { background: var(--zettel); border: 2.5px solid var(--tinte); border-radius: 8px; box-shadow: 3px 4px 0 var(--sh); }
.preis-tag::before, .preisblock::before { width: 14px; height: 14px; margin-left: -7px; top: 8px; border: 2.5px solid var(--tinte); background: var(--grund); box-shadow: none; }
.preis-tag::after { border-color: var(--tinte); opacity: 1; }
.preis-tag .preis { color: var(--tinte); }
html[data-r] .etikett::before, .dialog-innen::before { background: var(--gelb-tape, #FFE680); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.5) 0 5px, transparent 5px 11px); opacity: 1; filter: none; box-shadow: none; }
:root { --gelb-tape: #FFE680; }

dialog { color: var(--tinte); background: var(--zettel); border: 2.5px solid var(--tinte); border-radius: var(--r-karte); box-shadow: 4px 5px 0 var(--sh); }
dialog::backdrop { background: var(--schleier); }
.design { border-bottom: 2px dashed var(--linie); }
.design-bild { border: 2px solid var(--tinte); box-shadow: 2px 3px 0 var(--sh); }
.design-bild::before { background: var(--gelb); border-color: var(--tinte-fest); }

.menue { background: var(--zettel); color: var(--tinte); border: 2.5px solid var(--tinte); border-radius: var(--r-karte); box-shadow: 4px 5px 0 var(--sh); }
.menue-titel { font-family: var(--f-mono); font-size: var(--s-13); color: var(--tinte-2); }
.menue-teil.entwurf, .menue-teil.recht { padding-top: var(--a-12); border-top: 2px dashed var(--naht); }
.menue-links { display: grid; gap: 0; }
.menue-links a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 8px; color: var(--tinte); font-size: 1rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tuerkis); }
.menue-links a:hover { background: var(--gelb); color: var(--auf-gelb); text-decoration-color: var(--auf-gelb); }

/* ================= Matte, Maßband, Ecken der Zeichenfläche ================= */
.tisch { background: var(--grund); }
.matte { border: 2px solid var(--tinte-fest); border-radius: var(--r-karte); box-shadow: 3px 4px 0 var(--sh); }
.fuss { padding-top: var(--a-12); }
.massband { filter: drop-shadow(2px 3px 0 var(--sh)); }
.mb-marke { background: var(--gelb); box-shadow: inset 0 -2px 0 rgb(23 51 61 / 0.18); border-right: 1px solid rgb(23 51 61 / 0.55); color: var(--tinte-fest); }
.mb-marke.ausgerollt-nicht { background: repeating-linear-gradient(135deg, rgb(255 220 60 / 0.38) 0 6px, rgb(255 220 60 / 0.2) 6px 12px), var(--zettel-2); box-shadow: none; color: var(--tinte); }
.mb-marke[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--tinte-fest); }
.mb-marke[aria-pressed="true"]::before { border-top-color: var(--marker); filter: none; }
.mb-mehr { border: 2px dashed var(--kante); border-left: 0; background: var(--zettel); }
.mb-mehr:hover { background: var(--tuerkis-zart); }
:root[data-theme="dunkel"] .mb-marke.ausgerollt-nicht { background: repeating-linear-gradient(135deg, rgb(255 220 60 / 0.2) 0 6px, rgb(255 220 60 / 0.1) 6px 12px), var(--zettel-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mb-marke.ausgerollt-nicht { background: repeating-linear-gradient(135deg, rgb(255 220 60 / 0.2) 0 6px, rgb(255 220 60 / 0.1) 6px 12px), var(--zettel-2); } }

.lupe { background: var(--zettel); border: 2px solid var(--tinte); border-radius: 14px; box-shadow: 2px 3px 0 var(--sh); }
.lupe .knopf.icon { background: var(--zettel); }
.lupe .knopf.icon:hover { background: var(--tuerkis-zart); }
.lupe .knopf[aria-pressed="true"] { background: var(--gelb); border-color: var(--tinte-fest); color: var(--auf-gelb); }
.unterlage-knopf { background: var(--zettel); border: 2px solid var(--tinte); box-shadow: 2px 3px 0 var(--sh); }
.unterlage-wahl, .verlauf-panel, .tasten-hilfe { background: var(--zettel); border: 2px solid var(--tinte); border-radius: var(--r-karte); box-shadow: 3px 4px 0 var(--sh); }
.muster-knopf[aria-pressed="true"] .muster { box-shadow: 0 0 0 2px var(--zettel), 0 0 0 4.5px var(--tinte); }
kbd { background: var(--tuerkis-zart); border: 2px solid var(--kante); border-bottom-width: 3px; }
.verlauf-eintrag { border-bottom: 2px dashed var(--linie); }

/* Sprechblase der Biene wie .pb-sprechblase im Shop: Zettel, Tinte-Rand 2,5 px, harter Schatten, Handschrift ab 20 px.
   Zustandsfarben (ok, Hinweis, Fehler) bleiben als zarte Fläche mit Symbol und Wort. */
.blase { background: var(--zettel); color: var(--tinte); border: 2.5px solid var(--tinte); border-radius: 14px; box-shadow: 3px 3px 0 var(--sh); font-family: var(--f-display); font-weight: 700; line-height: 1.3; }
.blase::before { border-left: 0; border-right: 2.5px solid var(--tinte); border-bottom: 2.5px solid var(--tinte); background: inherit; }
.blase.ok { background: var(--ok-zart); } .blase.warn { background: var(--warn-zart); } .blase.fehler { background: var(--fehler-zart); }
/* 0.4.0: Die Handschrift bleibt, aber eine Nummer kleiner (17 px statt 20 px). Die Blase soll kurz sein, nicht laut. */
.blase:not(.warn):not(.fehler) { font-weight: 400; font-size: 1rem; }
.blase .knopf { background: var(--gelb); color: var(--auf-gelb); border-color: var(--tinte-fest); }
.biene-badge { background: #C23D22; color: #fff; border: 2px solid var(--zettel); box-shadow: none; }

/* Meldungen und Stempel */
.meldung { background: var(--haftnotiz); color: var(--haftnotiz-text); border: 2.5px solid var(--tinte-fest); border-radius: 14px; box-shadow: 3px 4px 0 var(--sh); font-family: var(--f-display); font-weight: 700; transform: rotate(-1deg); }
.meldung.ok { background: var(--ok-zart); color: var(--tinte); } .meldung.warn { background: var(--warn-zart); color: var(--tinte); } .meldung.fehler { background: var(--fehler-zart); color: var(--tinte); }
.meldung .knopf { background: var(--tinte-fest); color: #fff; border-color: var(--tinte-fest); }
.aufkleber-gewachsen { background: var(--gelb); color: var(--tinte-fest); border: 2.5px solid var(--tinte-fest); border-radius: 14px; box-shadow: 3px 3px 0 var(--sh); }
.stempel { background: var(--zettel); border: 3px solid var(--st); border-radius: 12px; box-shadow: 2px 3px 0 var(--sh); }
.leer-bogen .leer { background: var(--zettel); border: 2.5px solid var(--tinte); border-radius: var(--r-karte); box-shadow: 3px 4px 0 var(--sh); }
.kasse-m { background: var(--zettel); border-top: 2px dashed var(--naht); box-shadow: none; }
.kontext { background: var(--zettel); border-top: 2px dashed var(--naht); }

/* ================= Handy und mittlere Breiten ================= */
@media (max-width: 899px) {
  .kopf { gap: var(--a-8); padding: 0 var(--a-8); }
  .etikett-name { flex: 1 1 auto; margin-left: 0; }
  .wand { border-right: 0; border-top: 2px dashed var(--naht); }
  .schublade { border-top: 2px dashed var(--naht); }
  .kopf .knopf { box-shadow: 2px 3px 0 var(--sh-voll); }
  .kopf .knopf.leise { box-shadow: none; }
}
@media (max-width: 599px) { .blase:not(.warn):not(.fehler) { font-size: 1rem; line-height: 1.25; } .biene-bereich { right: 12px; } }

/* Motive-Blatt: der Zufallsknopf soll in die schmale Schublade passen */
.zufall-zeile .knopf { padding-inline: 12px; font-size: 0.875rem; }


/* Handy: Der Hinweiskasten "Noch ein leerer Bogen" muss auf die kleine Matte passen (er ist reine Anzeige, die Knöpfe darin bleiben erreichbar). */
@media (max-width: 599px) {
  /* Nur eine Biene je Ansicht: Oben links begrüßt die Begleiterin, die Karte zeigt darum keine zweite Biene
     und sitzt unten auf der Matte, damit sie die Begleiterin nicht überdeckt. */
  .leer-bogen { padding: 8px 76px 12px 8px; place-items: end center; }
  .leer-bogen .leer { gap: 8px; max-width: 300px; padding: 12px; transform: none; }
  .leer-bogen .zeig-biene { display: none; }
  .leer-bogen .leer h3 { font-size: 1.25rem; }
  .leer-bogen .leer p { font-size: 0.875rem; }
  .leer-bogen .leer .knopf { padding: 0 12px; font-size: 0.875rem; }
}
@media (max-width: 599px) and (max-height: 720px) {
  .leer-bogen .leer p { display: none; }
}

/* Handy: Das Blatt (Motive, Eigenschaften) etwas niedriger, damit die Matte mit Shop-Kopf und Werkzeugleiste Platz behält */
@media (max-width: 599px) {
  .schublade, .app[data-sheet="eig"] .rechts { max-height: 42dvh; }
  .kopf .knopf { min-height: 44px; }
}

/* Tippflächen mindestens 44 px: Ebenen-Werkzeuge und Kästchen mit Text */
.ebene-tools .knopf { min-height: 44px; min-width: 44px; width: 44px; }
.ebene { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ebene-tools { justify-content: flex-end; border-top: 2px dashed var(--linie); }
.kasten { min-height: 44px; align-items: center; }
.kasten input { margin: 0; }

/* Handy mit offenem Blatt: Lupe und Unterlage rücken ganz an den unteren Rand der kleinen Matte, damit sie die Kennzeile des Bogens nicht berühren */
@media (max-width: 599px) {
  .app[data-sheet] .lupe, .app[data-sheet] .unterlage { bottom: 4px; }
}
@media (max-width: 599px) {
  /* Der Stempel behält seinen Platz unter dem Bogen (unsichtbar), so sitzt der Bogen bei offenem Blatt über der Lupe und nicht darunter */
  .app[data-sheet] .stempel.auf-matte { display: inline-flex; visibility: hidden; }
}

/* Kurzes Handy (Höhe bis 720 px): Die Lupe wird eine Zeile oben rechts. Als Spalte unten wäre sie höher als die kleine Matte und ragte unter die Werkzeugleiste. */
@media (max-width: 599px) and (max-height: 720px) {
  .app:not([data-sheet]) .lupe { flex-direction: row; top: 8px; bottom: auto; right: 8px; padding: 4px; }
  .app:not([data-sheet]) .lupe-wert { display: none; }
  .app:not([data-sheet]) .lupe #zoom-aus { order: 1; }
  .app:not([data-sheet]) .lupe #zoom-ein { order: 3; }
  .app:not([data-sheet]) .lupe #zoom-ganz { order: 4; }
  .app:not([data-sheet]) .lupe #hand-knopf { order: 5; }
}


/* =====================================================================
   Version 0.4.0: die 14 Punkte der Chefin aus ihrem eigenen Durchklick.
   Grundsatz: Die Zeichenfläche bekommt Platz, alles um sie herum wird leiser.
   ===================================================================== */

/* ---------- (2) Mehr Platz für die Matte: der Designer hat keine Info-Leiste und eine schlankere Shop-Zeile ---------- */
:root {
  --info-h: 0px; --kopf-zeile-h: 60px;
  --shop-h: calc(var(--kopf-zeile-h) + 2px);
  --kopf-h: calc(var(--shop-h) + var(--werk-h));
}
@media (max-width: 899px) { :root { --kopf-zeile-h: 56px; --werk-h: 52px; } }
@media (max-width: 599px) { :root { --kopf-zeile-h: 52px; --werk-h: 52px; } }
.pb-kopf__zeile { min-height: var(--kopf-zeile-h); padding-block: 4px; }
@media (min-width: 992px) { .pb-kopf__logo img { width: 156px; } }
.pb-werkstatt { min-height: 44px; padding: 12px 12px 5px 7px; }

/* ---------- (1) Zoom und Werkzeuge auf der Matte: nur noch Symbole, keine weiße Pillenfläche ----------
   Jedes Symbol sitzt auf einer dunklen, halbdurchsichtigen Scheibe. So bleibt es sowohl auf der türkisen Matte
   als auch auf dem weißen Bogen lesbar (Weiß auf der Scheibe mindestens 7 : 1), nimmt aber kaum Fläche ein.
   Die Tippfläche bleibt 44 px, nur die sichtbare Scheibe ist kleiner. */
.lupe { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: 2px; }
.lupe .knopf.icon, .lupe .knopf.icon:hover {
  width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; box-shadow: none; transform: none;
  background: radial-gradient(circle, rgb(10 40 45 / 0.72) 0 17px, transparent 17.5px);
  color: #fff;
}
.lupe .knopf.icon:hover { background: radial-gradient(circle, rgb(10 40 45 / 0.85) 0 18px, transparent 18.5px); }
.lupe .knopf.icon .ico { width: 20px; height: 20px; }
.lupe .knopf[aria-pressed="true"], .lupe .knopf[aria-pressed="true"]:hover { background: radial-gradient(circle, var(--gelb) 0 17px, transparent 17.5px); color: var(--auf-gelb); }
.lupe .tasten-knopf .ico { width: 16px; height: 16px; }
.lupe .tasten-knopf, .lupe .tasten-knopf:hover { background: radial-gradient(circle, rgb(10 40 45 / 0.72) 0 12px, transparent 12.5px); }
.lupe-wert { min-width: 44px; padding: 3px 6px; border-radius: 10px; background: rgb(10 40 45 / 0.72); font-size: var(--s-12); font-weight: 700; color: #fff; }
.lupe .knopf.icon:focus-visible, .unterlage-knopf:focus-visible {
  background: radial-gradient(circle, #fff 0 17px, transparent 17.5px); color: var(--tinte-fest);
  outline: 3px solid var(--tinte-fest); outline-offset: -4px; border-radius: 50%;
}
.unterlage-knopf { width: 44px; height: 44px; border-width: 2px; box-shadow: 1px 2px 0 var(--sh); }

/* ---------- (7) Maßband wie auf der Produktseite des Shops ----------
   Übernommen aus scss/pressbiene/_produkt.scss: eine gelbe Leiste mit Tinte-Rand 2,5 px, Radius 4 px, harter Schatten 4/4,
   Lineal-Striche OBEN (dieselbe Maske --tex-lineal, 14 px hoch), Marken ohne Abstand mit gestrichelter Trennlinie 2 px,
   Stufe in Quicksand, Preis in Atkinson Mono 15 px, gewählt = Tinte mit gelber Schrift, nicht möglich = Schraffur 135 Grad.
   Einziger Unterschied: Die Leiste ist 76 px hoch statt rund 103 px, weil im Designer die Matte den Platz braucht. */
.massband {
  position: relative; align-items: stretch; gap: 0; padding: 0; overflow: hidden; overflow-x: auto;
  border: 2.5px solid var(--tinte-fest); border-radius: var(--r-klein); background: var(--gelb);
  box-shadow: 4px 4px 0 var(--sh-voll); filter: none;
}
.massband::before {
  content: ""; position: absolute; top: 0; right: 4px; left: 4px; z-index: 1; height: 14px; background: var(--tinte-fest);
  -webkit-mask: var(--tex-lineal) left top / 40px 14px repeat-x; mask: var(--tex-lineal) left top / 40px 14px repeat-x; pointer-events: none;
}
.mb-haken { display: none; }
.mb-marke {
  flex: 1 1 0; min-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 76px; margin: 0; padding: 20px 4px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--tinte-fest); font-family: var(--f-mono); font-size: 0.9375rem; text-align: center;
}
.mb-marke + .mb-marke { border-left: 2px dashed var(--tinte-fest); }
.mb-marke::after { display: none; }
.mb-marke b { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.mb-marke .p { font-size: 0.8125rem; font-weight: 700; }
.mb-marke:hover { background: var(--gelb-tape); color: var(--tinte-fest); }
.mb-marke[aria-pressed="true"], .mb-marke[aria-pressed="true"]:hover { background: var(--tinte-fest); color: var(--gelb); box-shadow: none; }
.mb-marke[aria-pressed="true"]::before { display: none; }
.mb-marke.ausgerollt-nicht { background: transparent; box-shadow: none; color: var(--tinte-fest); }
.mb-marke.ausgerollt-nicht:hover { background: var(--gelb-tape); }
.mb-marke[aria-disabled="true"] { background-image: repeating-linear-gradient(135deg, rgb(23 51 61 / 0.18) 0 1px, transparent 1px 7px); color: rgb(23 51 61 / 0.75); }
.mb-marke:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; }
.mb-mehr { flex: 0 0 auto; min-width: 76px; min-height: 76px; margin: 0; padding: 20px 10px 8px; border: 0; border-left: 2px dashed var(--tinte-fest); border-radius: 0; background: transparent; color: var(--tinte-fest); justify-content: center; }
.mb-mehr:hover { background: var(--gelb-tape); }
:root[data-theme="dunkel"] .mb-marke.ausgerollt-nicht, :root[data-theme="dunkel"] .mb-marke { color: var(--tinte-fest); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mb-marke, :root:not([data-theme]) .mb-marke.ausgerollt-nicht { color: var(--tinte-fest); } }

/* ---------- (8) Preisblock kompakter, die große Preisangabe bleibt genau so groß ---------- */
.rechts { padding: var(--a-12) var(--a-12) var(--a-12); }
.preis-tag { gap: 6px; padding: 22px var(--a-12) var(--a-12); }
.preis-tag .preis { font-size: var(--s-56); line-height: 0.95; }
.preis-tag .beschr:first-of-type { font-size: var(--s-13); }
.preis-tag .fuellstand { display: grid; gap: 4px; }
.preis-tag .fuellstand .text { font-size: var(--s-12); line-height: 1.3; color: var(--tinte-2); }
.preis-tag .beschr.klein { font-size: var(--s-11); line-height: 1.3; }
.preis-tag .knopf.gross { min-height: var(--ziel-kaufen); padding: 8px 12px; }
.anhaenger.etikett { margin-top: 0; }
.eig-kopf { padding: var(--a-8) var(--a-8) 0 var(--a-12); }
.eig-inhalt { padding: 6px var(--a-12) var(--a-16); gap: var(--a-16); }

/* ---------- (9) Druckcheck-Stempel: am Schreibtisch reine Anzeige, am Handy der Weg zur Liste ---------- */
.stempel.anzeige { cursor: default; }
.stempel.anzeige:hover { transform: rotate(-3deg); }
.stempel { min-height: 48px; padding: 6px 14px 6px 10px; }
.stempel .ico { width: 26px; height: 26px; }
.stempel b { font-size: var(--s-16); }
/* Sichtbare Rückmeldung, wenn der Druckcheck geöffnet wird: der Kasten bekommt kurz einen Tinte-Rahmen (keine Deckkraft-Animation) */
.gruppe.hervor { outline: 3px solid var(--tinte); outline-offset: 6px; border-radius: var(--r-karte); }

/* ---------- (12) Icons eine Nummer dünner ---------- */
:root { --strich: 2.1; }
.werkzeug .ico { --strich: 1.75; }
.lupe .ico, .aktion .ico, .ebene-tools .ico, .kontext .ico { --strich: 1.9; }

/* ---------- (13) Kontextleiste: eine echte Werkzeugleiste direkt über der Matte ---------- */
.kontext { gap: 8px; padding: 6px var(--a-8); background: var(--tuerkis-zart); border-top: 0; border-bottom: 2px dashed var(--naht); }
.kontext .kontext-name { flex: 1 1 56px; min-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: var(--s-13); font-weight: 700; color: var(--tinte); }
.kontext .kontext-tun { display: flex; gap: 6px; align-items: center; margin-left: auto; }
@media (max-width: 899px) {
  .app { grid-template-rows: var(--werk-h) auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "kopf" "kontext" "meldung" "tisch" "sheet" "kasse" "wand"; }
  .app[data-sheet] .kontext { display: none; }
  .meldungs-platz { padding-left: var(--a-8); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .app[data-sheet] { grid-template-rows: var(--werk-h) auto auto minmax(0, 1fr) auto auto; grid-template-areas: "kopf kopf" "sheet kontext" "sheet meldung" "sheet tisch" "sheet kasse" "wand wand"; }
  .app:not([data-sheet]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--werk-h) auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "kopf" "kontext" "meldung" "tisch" "sheet" "kasse" "wand"; }
  .app:not([data-sheet]):not(:has(.kontext:not([hidden]))) .kasse-m { grid-area: kasse; }
}
/* Der Preis bleibt am Handy immer sichtbar: die Kasse unten bleibt stehen, auch wenn ein Element gewählt ist */
@media (max-width: 899px) {
  .app:has(.kontext:not([hidden])) .kasse-m { padding: 6px var(--a-12); border-top: 2px dashed var(--naht); }
  .app:has(.kontext:not([hidden])) .kasse-m .preis { font-size: var(--s-32); }
}

/* ---------- (14) Speichern: im Kopf neben Name, Rückgängig und Meine Designs ---------- */
.kopf { gap: var(--a-8); }
.bogen-gruppe { gap: 6px; }
.etikett-name { flex: 0 1 240px; height: 48px; }
.etikett-name input { height: 44px; }
#speichern .punkt { border-color: var(--gelb); }
#speichern.zweit .punkt { border-color: var(--zettel); }
@media (max-width: 991px) { .kopf #meine span, .kopf #zufall span { display: none; } .kopf #meine, .kopf #zufall { padding: 0; width: var(--ziel); } }
@media (max-width: 899px) {
  .kopf #meine, .kopf #redo, .kopf #thema-schnell { display: none; }
  .kopf #speichern span { display: none; } .kopf #speichern { padding: 0; width: var(--ziel); }
  .etikett-name { flex: 1 1 auto; }
}
@media (min-width: 900px) and (max-width: 1279px) { .kopf #thema-schnell span { display: none; } .kopf #thema-schnell { padding: 0; width: var(--ziel); } }
@media (min-width: 1280px) { .kopf #thema-schnell { padding: 0 12px; } }

/* ---------- Fuß: unter 600 px brechen Maßband und Knöpfe wieder um ---------- */
@media (max-width: 599px) {
  .fuss { flex-wrap: wrap; gap: 6px; padding: 6px var(--a-8) var(--a-8); }
  .massband { flex: 1 1 100%; }
  .fuss-zeile { flex: 1 1 100%; justify-content: center; }
  .mb-marke { min-height: 64px; min-width: 64px; padding: 18px 2px 6px; }
  .mb-marke b { font-size: 1.25rem; }
  .mb-mehr { min-height: 64px; min-width: 64px; padding: 18px 8px 6px; }
}
@media (min-width: 600px) and (max-width: 899px) { .mb-marke, .mb-mehr { min-height: 68px; padding-top: 19px; } }

/* Knopftexte im Kopf bleiben einzeilig */
.kopf .knopf span { white-space: nowrap; }

/* Schmaler Fuß (zum Beispiel 1280 px mit offener Schublade): Maßband und Knöpfe bleiben in einer Zeile,
   die Marken werden dafür eine Stufe kleiner, statt umzubrechen. Gemessen am Fuß selbst, nicht am Fenster. */
.fuss { container-type: inline-size; }
.mb-marke .p { white-space: nowrap; }
@container (max-width: 680px) {
  .mb-marke, .mb-mehr { min-width: 58px; min-height: 68px; padding: 18px 2px 6px; }
  .mb-marke b { font-size: 1.25rem; }
  .mb-marke .p { font-size: 0.75rem; }
  .fuss .chip { padding: 0 10px; font-size: 0.8125rem; gap: 6px; }
  .fuss .chip .ico { width: 18px; height: 18px; }
}
/* Nur wenn Maßband und Knöpfe sich wirklich eine Zeile teilen (ab 600 px): bei ganz engem Fuß zeigen die Knöpfe
   nur ihr Zeichen, der Name bleibt für Screenreader und als Kurzinfo erhalten. Unter 600 px haben sie eine eigene Zeile und bleiben beschriftet. */
@media (min-width: 600px) {
  @container (max-width: 470px) {
    .fuss .chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .fuss .chip { width: 44px; padding: 0; justify-content: center; }
  }
}

/* Handy: Höhe für die Matte zurückholen. Werkzeug-Anhänger etwas flacher (Stanzloch bleibt), Druckcheck-Stempel enger,
   Meldungs-Platz knapp. Alle Tippflächen bleiben 44 px. */
@media (max-width: 899px) {
  .wand { padding: 10px 8px calc(6px + env(safe-area-inset-bottom)); }
  .werkzeug { min-height: 60px; padding: 16px 2px 4px; }
  .werkzeug .ico { width: 24px; height: 24px; }
  .stempel.auf-matte { margin: 4px 10px 6px; min-height: 44px; }
  .meldungs-platz { padding: 4px var(--a-8) 0; }
  .blase { min-height: 44px; }
  .kasse-m { padding: 6px var(--a-12); }
  .kasse-m .preis { font-size: var(--s-24); }
}

/* Die drei Punkte im Knopf "Mehr" sollen klar lesbar sein, ohne gelben Fleck dahinter */
.kopf #ansicht .ico { --fleck-an: 0; }

/* Maßband in Dunkel: Die Leiste bleibt gelb mit Tinte-Schrift wie im Shop. Nicht ausgerollte Marken sind nur blasser,
   nicht dunkel (die alten Regeln für Dunkel werden hier bewusst zurückgenommen). */
:root[data-theme="dunkel"] .mb-marke, :root[data-theme="dunkel"] .mb-marke.ausgerollt-nicht { background: transparent; color: var(--tinte-fest); box-shadow: none; }
:root[data-theme="dunkel"] .mb-marke[aria-pressed="true"] { background: var(--tinte-fest); color: var(--gelb); }
:root[data-theme="dunkel"] .mb-marke[aria-disabled="true"] { background-image: repeating-linear-gradient(135deg, rgb(23 51 61 / 0.18) 0 1px, transparent 1px 7px); color: rgb(23 51 61 / 0.75); }
:root[data-theme="dunkel"] .mb-marke:hover, :root[data-theme="dunkel"] .mb-mehr:hover { background: var(--gelb-tape); }
:root[data-theme="dunkel"] .mb-mehr { background: transparent; color: var(--tinte-fest); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mb-marke, :root:not([data-theme]) .mb-marke.ausgerollt-nicht { background: transparent; color: var(--tinte-fest); box-shadow: none; }
  :root:not([data-theme]) .mb-marke[aria-pressed="true"] { background: var(--tinte-fest); color: var(--gelb); }
  :root:not([data-theme]) .mb-marke[aria-disabled="true"] { background-image: repeating-linear-gradient(135deg, rgb(23 51 61 / 0.18) 0 1px, transparent 1px 7px); color: rgb(23 51 61 / 0.75); }
  :root:not([data-theme]) .mb-marke:hover, :root:not([data-theme]) .mb-mehr:hover { background: var(--gelb-tape); }
  :root:not([data-theme]) .mb-mehr { background: transparent; color: var(--tinte-fest); }
}

/* Niedrige Fenster bis 899 px Breite: Die Lupe wäre als Spalte höher als die Matte und ragte heraus. Sie wird zur Zeile oben rechts. */
@media (max-width: 899px) and (max-height: 780px) {
  .lupe { flex-direction: row; top: 8px; bottom: auto; right: 8px; padding: 0; gap: 0; }
  .lupe .lupe-wert { display: none; }
  .lupe #zoom-aus { order: 1; } .lupe #zoom-ein { order: 3; } .lupe #zoom-ganz { order: 4; } .lupe #hand-knopf { order: 5; }
  /* Die Unterlage zieht mit nach oben rechts neben die Lupe, damit sie der Biene oben links nicht in die Quere kommt */
  .lupe { right: 60px; }
  .unterlage { bottom: auto; top: 8px; left: auto; right: 8px; flex-direction: column-reverse; align-items: flex-end; }
}

/* Mittlere Breiten: Die vier Aktionen dürfen schrumpfen, statt aus dem Etikett zu laufen */
.aktionen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aktion { min-width: 0; }
.aktion span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Stufenname und Preis auf dem Maßband brechen nie um, die Leiste schiebt lieber seitlich */
.mb-marke b, .mb-mehr { white-space: nowrap; }