/*! Gravur-Konfigurator fuer Juweluna. (C) 2026 Anja Brinkmann.
    Alle Rechte vorbehalten. Eigenstaendiges Werk, keine Ableitung des
    DZM-Plugins. Nutzung oder Uebernahme, auch in Teilen, nur mit
    schriftlicher Zustimmung. Fremdlizenzen (Schriften: SIL Open Font
    License, opentype.js: MIT) siehe LIZENZ.md im Projekt. */
/* Gravur-Konfigurator, Oberflaeche.
   Alle Regeln haengen unter .gravur, damit im JTL-Template nichts kollidiert. */

/* ===== Marken-Tokens. Nur dieser Block wird pro Shop ausgetauscht. =====
   .gravur-widerruf steht mit in der Liste, weil der Hinweis auf den
   Widerrufsausschluss im Child-Template direkt ueber dem Warenkorbknopf sitzt
   und damit ausserhalb der Wurzel des Konfigurators. Er erbt die Tokens also
   nicht und bekommt sie hier; eine zweite Farbliste waere genau der Weg, auf
   dem die Marke auseinanderlaeuft.
   .gravur-pflege stand bis zum 04.09.2026 mit in dieser Liste, trug also die
   Juweluna-Farben. Sie hat seither einen eigenen Block weiter unten, denn sie
   ist unser Werkzeug fuer BEIDE Shops und gehoert keinem davon.
   .gravur-werkbank ist der Rahmen der Werkbank (src/index.html), also Kopfzeile
   und Grund um den Konfigurator herum. Er stand bis zum 04.09.2026 mit festen
   Juweluna-Werten in der Seite, und damit war genau das nicht zu sehen, wozu
   die Werkbank da ist: ein Vintageparts-Artikel unter einer Juweluna-Kopfzeile.
   Er geht so wenig in den Shop wie die Pflegeseite und steht aus demselben
   Grund hier. */
.gravur,
.gravur-widerruf,
.gravur-anstoss,
.gravur-werkbank {
  /* Juweluna */
  --accent: #12234A;        /* Mitternachtsblau, Akzente und Schaltflaechen */
  --auf-accent: #FFFFFF;    /* Schrift AUF dem Akzent */
  /* Schrift IN der Akzentrolle auf hellem Grund: Rubriken, aktiver Reiter, die
     Ziffer im Textfeld. Bei Juweluna ist das derselbe Ton wie der Akzent, und
     genau deshalb ist die Rolle bis zum 04.09.2026 niemandem aufgefallen: Ein
     dunkles Mitternachtsblau traegt Schrift und fuellt Knoepfe gleich gut.
     Bei Vintageparts ist der Akzent ein zartes Rose, und als Schrift auf Weiss
     gemessene 1,49 zu 1, also praktisch unsichtbar. Ein Akzent hat damit ZWEI
     Rollen, und sie fallen nur in einer Marke zusammen. */
  --accent-text: #12234A;   /* Schrift in Akzentrolle auf hellem Grund */
  --accent-soft: #E3E7EF;   /* aufgehellter Akzent fuer Flaechen */
  /* Die DRITTE Rolle des Akzents, gefunden am 04.09.2026 beim Abgleich mit dem
     Vintageparts-Styleguide: Vierzehn Regeln setzen den Fokusring in
     --accent. Bei Juweluna sind das 15,4 zu 1 gegen die weisse Karte, bei
     Vintageparts 1,49, also ein Ring, den niemand sieht; wer mit der Tastatur
     bedient, weiss dann nicht, wo er steht. Ein Fokusring ist ein
     Bedienelement und braucht nach WCAG 1.4.11 drei zu eins.
     Bei Juweluna ist es derselbe Ton wie der Akzent, aus demselben Grund, aus
     dem --accent-text es ist: Ein dunkles Mitternachtsblau kann alles. */
  --fokus: #12234A;         /* Fokusring, Ton mit mindestens 3 zu 1 */
  /* Griffe und Auswahlrahmen auf dem Werkstueck (05.09.2026, die FUENFTE Rolle
     des Akzents). Sie zeichneten in --accent, und auf dem goldenen Plaettchen
     sind das bei Vintageparts 1,04 bis 1,57 zu 1, also praktisch unsichtbar.
     Anjas Einwand schliesst den naheliegenden Weg aus: "sie brauchen unser text
     grau. aber dann kommt es mit dem gravur grau durcheinander." Grau ist hier
     die Farbe der GRAVUR, ein Griff in Textgrau saehe aus wie graviert.

     Deshalb unterscheidet der Griff sich nicht ueber den Farbton, sondern
     ueber die FORM: deckend weisse Scheibe, dunkles Zeichen darin, dunkler
     Ring aussen. Weiss kommt in der Gravur nie vor, eine gefuellte Scheibe
     auch nicht. Getragen wird der Kontrast vom Ring, nicht von der Scheibe:
     Auf Silber liegt Weiss auf Weiss, und ohne Ring waere der Griff dort
     unsichtbar. Geprueft wird der Ring gegen die HELLSTE Stufe beider
     Metalle. */
  --griff-scheibe: #12234A; /* Fuellung von Anjas Griffpfad */
  --griff-zeichen: none;    /* KEIN Kreis unter der Scheibe: siehe unten */
  --griff-rand: none;       /* und kein Rand darum */
  --griff-linie: #12234A;   /* Auswahlrahmen zwischen den Griffen */
  /* JUWELUNA BLEIBT, WIE ES WAR (Anja, 05.09.2026: "bei Juweluna hatten wir doch
     das perfekte design"). Dort ist der Griff eine gefuellte Scheibe im
     Mitternachtsblau, und das Zeichen darin ist eine AUSSPARUNG, durch die das
     Metall scheint. Genau dafuer steht --griff-ring auf none: Ein dunkler Kreis
     darunter wuerde die Aussparung zufuellen, und das Zeichen waere weg.
     Der Umbau auf die weisse Scheibe war fuer Vintageparts noetig und dort
     bleibt er; hier war er eine Loesung fuer ein Problem, das es nicht gab. */
  /* Die BREITE des Rings ist eine Punkt, nicht zwei (Anja, 04.09.2026: "2px ist
     zu viel, es reicht, wenn er so zart umrandet ist wie bei den Symbolen").
     Der Knopf eines Symbols traegt einen Rand von einem Punkt, und daran misst
     sich der Ring. Das bleibt in der Stufe AA: Verlangt sind dort ein sichtbarer
     Fokus (2.4.7) und drei zu eins fuer das Bedienelement (1.4.11), und der Ton
     traegt 8,86 zu 1. Zwei Punkte Dicke verlangt erst 2.4.13 in der Stufe AAA;
     das ist der Preis dieser Entscheidung und er steht hier, damit ihn niemand
     spaeter fuer ein Versehen haelt. Die Breite steht in jeder Regel und nicht
     in einem Token: outline-width nimmt kein var() in aelteren Browsern zuverlaessig
     entgegen, und vierzehn gleiche Angaben sind ehrlicher als eine, die still
     ausfaellt. */
  --surface: #F3EFE9;       /* Warmes Creme */
  --paper: #FFFFFF;
  --ink: #12234A;
  --ink-soft: #5C6579;
  --line: #DCD6CC;
  --warn: #A4442F;
  /* Juweluna arbeitet durchgehend ohne Kantenabrundung. Ausgenommen bleiben nur
     Elemente, deren runde Form ihre Bedeutung traegt: der Punkt der Statuszeile
     und der Schalter. */
  --radius: 0px;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;

  /* Vier Toene, die bis zum 29.08.2026 mitten im Stilblatt standen. Sie
     gehoeren zur Palette wie die anderen: Wer die Marke wechselt und sie
     vergisst, bekommt einen Konfigurator, der zu drei Vierteln umgestellt ist.
     Genau das soll der Token-Block nach CLAUDE.md verhindern. */
  --accent-tief: #1B3266;          /* Akzent unter dem Zeiger */
  --warn-flaeche: #F8ECE8;         /* Grund einer Warnung */
  --schatten: rgba(18, 35, 74, .16); /* Schlagschatten im Akzentton */
  --line-weich: #d9d2c7;           /* Linie auf hellem Grund */

  /* Markenunabhaengig: Gravurgrau bildet das Fertigungsergebnis ab, nicht die
     Marke, und bleibt in jedem Shop gleich. */
  --gravur: #6A6A6A;
}

/* Vintageparts (O51). Dieselbe Oberflaeche, andere Palette: Anja am 29.08.2026,
   "eine Bearbeitungsoberflaeche fuer beide shops waere vom vorteil, da wir z.b.
   die roehre bei vintageparts schon lange verkaufen". Der Rohling ist derselbe,
   der Shop-Artikel ein anderer, also steht die Marke am ARTIKEL und nicht an
   der Form; gesetzt wird sie vom Konfigurator als data-marke.

   BERICHTIGT am 04.09.2026: Der Absatz an dieser Stelle sagte, hier stuenden
   noch die Juweluna-Werte. Das war der Stand vom Vormittag des 29.08.2026; die
   Werte unten sind seit demselben Tag die gemessenen von Vintageparts. Geraten
   ist keine einzige Farbe. */

/* DIE NACHFAHREN MUESSEN MIT IN DIE LISTE (06.09.2026, Fallstrick 78).
   Der Vorgabeblock oben setzt die Tokens DIREKT auf .gravur, .gravur-widerruf
   und die anderen. Ein direkt gesetzter Wert schlaegt einen geerbten, also
   genuegt es nicht, das Markenattribut ueber sie zu haengen: Sie holten sich
   weiter die Juweluna-Vorgabe. Mit dem Nachfahren-Selektor steht die Marke bei
   0,2,0 gegen 0,1,0 und gewinnt.

   Am laufenden Shop gemessen und nicht angenommen, denn genau diese Annahme
   ist an diesem Tag zweimal falsch gewesen: Ohne die Nachfahren stand der
   Widerrufshinweis bei Vintageparts auf #F3EFE9, mit ihnen auf #FDFBFA, und
   Juweluna bleibt in beiden Faellen unveraendert.

   Die Liste ist dieselbe wie im Vorgabeblock, und eine Zusicherung in
   test/marke.test.mjs haelt beide zusammen: Wer dort eine Klasse ergaenzt,
   muss sie hier ergaenzen, sonst traegt sie in einem Shop die falsche Marke. */
[data-marke='vintageparts'],
[data-marke='vintageparts'] .gravur,
[data-marke='vintageparts'] .gravur-widerruf,
[data-marke='vintageparts'] .gravur-anstoss,
[data-marke='vintageparts'] .gravur-werkbank {
  /* GEMESSEN am 29.08.2026 an der ausgelieferten Datei
     templates/NIUplusChild/themes/clean-custom/clean-custom.css?v=4.10.5, also
     an dem, was der Browser einer Kundin wirklich laedt. Kein Backend-Zugang
     noetig: Ein Stilblatt geht an jeden Besucher, und dieselbe Regel hat schon
     den Serverstand von Juweluna entschieden. Daneben Anjas Festlegungen aus
     dem Lexikon-Design, das sie am selben Tag genannt hat.

     ABGELEITET sind genau drei Werte, sie sind unten benannt. Alles andere
     steht so im Theme oder im Lexikon-Design. */
  --accent: #eeccc7;               /* .btn-primary, zartes Rose */
  --auf-accent: #4d4d4d;           /* .btn-primary, Schrift auf dem Knopf */
  /* Der Hover ist bei Vintageparts HELLER als der Ruhezustand, nicht
     dunkler: Styleguide, "btn-primary Hover / Small #F8EAE8". Bis zum
     04.09.2026 stand hier #e5b1aa aus .btn-primary:hover; das ist der
     Wert einer aelteren Themefassung und widerspricht dem Styleguide. */
  --accent-tief: #F8EAE8;          /* Styleguide: Rose hell */
  --accent-soft: #f3dcd9;          /* Lexikon: Hinweisbox */
  /* ENTSCHIEDEN am 04.09.2026 durch den Styleguide, nicht durch Geschmack:
     "Rose ist die einzige Markenfarbe und wird als Flaeche eingesetzt, nie als
     Textfarbe. Text lebt komplett in warmen Grautoenen." Die Akzentrolle als
     SCHRIFT gibt es bei Vintageparts also nicht, und #4D4D4D ist dort der
     Textton fuer Fliesstext, H1, H3 und die Schrift auf dem Rose-Knopf.
     Damit ist auch ein Vorschlag von mir vom selben Tag zurueckgenommen: ein
     abgedunkeltes Rose, das Farbton und Kontrast gehalten haette. Es haette
     den Styleguide gebrochen, und die Palette ist gemessen und nicht erfunden.
     8,45 zu 1 auf der Karte, 8,19 auf dem Papier. */
  --accent-text: #4D4D4D;          /* Styleguide: Textton, ENTSCHIEDEN */
  /* Der Fokusring. Rose faellt hier aus demselben Grund aus wie als
     Schrift, es sind 1,49 zu 1. Der Styleguide hat den Ton schon:
     Dunkel, dort die Flaeche der Dark-Buttons. 8,86 zu 1 gegen die
     Karte, 8,59 gegen das Papier und 5,95 auf dem Rose-Knopf, also
     sichtbar auf jedem Grund, auf dem ein Ring in dieser Oberflaeche
     liegen kann. Altrosa #CBB4B1 waere der naheliegende Rahmenton des
     Styleguides und faellt mit 1,96 zu 1 durch. */
  --fokus: #514848;                /* Styleguide: Dunkel (Dark) */
  /* Hier traegt der Akzent nicht: Rose auf hellem Gold sind 1,07 zu 1. Deshalb
     eine gefuellte Scheibe mit dunklem Zeichen und dunklem Ring, siehe
     griffBild. Den Kontrast traegt der RING, nicht die Scheibe.

     DIE SCHEIBE IST ROSE UND NICHT WEISS (Anja, 05.09.2026: "das sieht etwas
     pixelig aus. Versuche mal die Farbzusammenstellung wie bei hochkant").
     Damit traegt der Griff dieselbe Zusammenstellung wie der aktive Knopf des
     Ausrichtungsschalters: Flaeche in Rose hell, Zeichen dunkel, Rand dunkel.
     Weiss auf Gold war der haerteste Sprung, den diese Oberflaeche kennt, und
     genau das sah aus wie eine Treppe; Rose liegt naeher am Metall und der Rand
     traegt trotzdem seine 6,39 zu 1. */
  --griff-scheibe: #f3dcd9;
  /* Der Kreis UNTER der Scheibe. Sichtbar ist er nur durch die Aussparung, also
     als das Zeichen selbst; er macht den Griff erkennbar.

     DERSELBE TON WIE DIE SCHRIFT DES SCHALTERKNOPFES (Anja, 05.09.2026: "Sind
     das wirklich die gleichen farben wie beim button quer?"). Nachgemessen
     waren es zwei von drei: Flaeche und Rand stimmten, das Zeichen stand auf
     dem Griffton #514848 statt auf #4d4d4d. Jetzt stimmen alle drei.
     Der Kontrast kostet das fast nichts: 6,10 statt 6,39 zu 1 auf hellem Gold,
     6,46 statt 6,77 auf der eigenen Scheibe. */
  --griff-zeichen: #4d4d4d;
  /* Der Rand um die Scheibe, zart im Rose des Schalterknopfes (Anja,
     05.09.2026: "den rand um den knopf solltest du aendern"). Er traegt keinen
     Kontrast und muss es nicht: Das tut das Zeichen. */
  --griff-rand: #eeccc7;
  /* Die Linie um die Schrift bleibt dunkel. Sie stand am 05.09.2026 kurz in
     Rose, weil ich "Aussenlinie" auf sie bezogen hatte; gemeint war der Rand um
     die Griffknoepfe (Anja: "den rand um den knopf solltest du aendern, nicht
     die linie um die schrift"). */
  --griff-linie: #514848;
  /* Der Seitengrund. Vorher #f9efee, die Kopfzeile einer Tabelle aus
     Anjas Lexikon-Design; der Styleguide nennt fuer den Grund der Seite
     Papier #FDFBFA. Die Folge ist ehrlich zu nennen: Karte und Grund
     liegen damit bei 1,02 zu 1, die weissen Karten heben sich nicht mehr
     ab. Genau so ist der Shop gebaut ("Content auf Papier-Hintergrund.
     Header, Karten und Footer weiss"), und im Seitenpanel des Shops ist
     der Grund ohnehin weiss. Was daraus folgt, ist eine Frage an den
     RAND der Felder und nicht an den Grund. */
  --surface: #FDFBFA;              /* Styleguide: Papier */
  --paper: #FFFFFF;
  /* Der Widerspruch #333 gegen #4d4d4d, offen seit dem 29.08.2026, ist
     damit entschieden und zwar gegen das Lexikon: Der Styleguide fuehrt
     #4D4D4D als Textton fuer Fliesstext, H1 und H3. 8,45 zu 1. */
  --ink: #4D4D4D;                  /* Styleguide: Text */
  /* Vorher Grau warm #877878. Der Styleguide sagt dazu selbst "Nur
     grosser Text / Labels ab 18 px" bei 3,9 zu 1 gemessen, und unsere
     Rubriken, Zaehler und Reiterschriften laufen auf 11 bis 12,5 px.
     Navigation #737373 haelt 4,74 zu 1 auf der Karte und 4,60 auf dem
     Papier, also die Grenze fuer Fliesstext. */
  --ink-soft: #737373;             /* Styleguide: Navigation */
  --line: #e7e4e4;                 /* Theme: hr */
  --line-weich: #f0e9e8;           /* ABGELEITET: die Linie eine Stufe heller */
  --warn: #c0274c;                 /* Theme: .invalid-feedback */
  --warn-flaeche: #f7e4e8;         /* ABGELEITET: der Warnton als Flaeche */
  --schatten: rgba(77, 77, 77, .16); /* ABGELEITET: aus der Schriftfarbe des Knopfs */
  --radius: 4px;                   /* Styleguide: Radius 4 px */
  /* Lexikon: sans-serif generisch, keine benannte Schrift. Der Konfigurator
     bindet ohnehin keine ein, im Shop kommt sie aus dem Template. */
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
}

/* SOLANGE DIE MARKE NICHT FESTSTEHT, IST NICHTS MARKENFARBIG (Anja,
   20.09.2026: "beim ersten artikel stand 5 sek. der gravur konfigurator wird
   noch geladen und das war im Juweluna design").

   Der Konfigurator setzt data-marke erst, wenn er die Artikelkonfiguration
   geladen hat; bis dahin greift der Vorgabeblock, und der ist Juweluna. Bei
   Vintageparts stand damit sekundenlang Juwelunas Creme in der Seite, auf
   einer langsamen Verbindung lange genug zum Hinsehen.

   NEUTRAL UND NICHT GERATEN: Die Vorlage koennte die Marke aus der Adresse
   vorbelegen, dann waere sie sofort richtig -- und es gaebe eine zweite
   Stelle, die ueber die Marke entscheidet (Fallstrick 55). Ein farbloser
   Kasten fuer einen Moment sagt die Wahrheit: Es ist noch nicht bekannt, zu
   wem er gehoert.

   Gilt nur in der Box, also im Shop. In der Werkbank gibt es sie nicht, und
   dort ist die Marke ohnehin sofort da.

   Die Toene sind bewusst keine Palette, sondern Graustufen. --gravur bleibt
   unberuehrt, es ist markenunabhaengig; --radius und die Schriften ebenso,
   denn ein Sprung in der Form waere auffaelliger als einer in der Farbe. */
[data-gravur-box]:not([data-marke]),
[data-gravur-box]:not([data-marke]) .gravur,
[data-gravur-box]:not([data-marke]) .gravur-widerruf,
[data-gravur-box]:not([data-marke]) .gravur-anstoss {
  --accent: #5C5C5C;
  --auf-accent: #FFFFFF;
  --accent-text: #3A3A3A;
  --accent-soft: #ECECEC;
  --accent-tief: #3A3A3A;
  --fokus: #3A3A3A;
  --surface: #F4F4F4;
  --paper: #FFFFFF;
  --ink: #3A3A3A;
  --ink-soft: #6A6A6A;
  --line: #D8D8D8;
  --line-weich: #E4E4E4;
  /* Auch die Warntoene sind Graustufen: In dieser Phase zeigt der
     Konfigurator keine eigene Meldung, die Ladezeile ist eine des Shops. Ein
     Rot hier waere Farbe ohne Anlass, und die Zusicherung in test/marke.test.mjs
     nennt sie zu Recht bunt. */
  --warn: #4A4A4A;
  --warn-flaeche: #EFEFEF;
  --schatten: rgba(0, 0, 0, .12);
  --griff-scheibe: #FFFFFF;
  --griff-zeichen: #3A3A3A;
  --griff-rand: #D8D8D8;
  --griff-linie: #5C5C5C;
}

/* Die Bearbeitungsoberflaeche, neutral (04.09.2026).
   Anja: "unsere Bearbeitungsoberflaeche musst du neutraler gestalten, die war
   ja auf Juweluna ausgelegt und bedient nun beide Shops."

   Der Grund ist mehr als Geschmack, und er entscheidet auch die Farbwahl: An
   diesem Werkzeug werden FARBIGE Dinge beurteilt. Die Werkbank zeigt daneben
   eine Marke in ihrer Palette, die Motivbibliothek zeigt Gravurgrau, das
   Einpasswerkzeug zeigt Gold und Silber. Eine Oberflaeche, die selbst Farbe
   mitbringt, faerbt dieses Urteil; deshalb sind Bildbearbeitung und Druckvorstufe
   seit jeher grau. Genau das ist hier die Regel: Die einzigen bunten Toene sind
   die FUNKTIONALEN, also die Meldung, und das Gravurgrau, das ohnehin keiner
   Marke gehoert.

   Damit ist die Oberflaeche zugleich von beiden Shops unterscheidbar: kein
   Mitternachtsblau, kein Rose. Wer die Pflegeseite offen hat, sieht auf einen
   Blick, dass er im Werkzeug steht und nicht im Laden.

   Es sind dieselben Tokennamen wie bei den Marken. Deshalb aendert dieser Block
   das ganze Aussehen, ohne dass eine einzige Regel darunter angefasst wird. */
.gravur-pflege {
  --accent: #3A3A3A;        /* Graphit, Knoepfe und Rahmen */
  --auf-accent: #FFFFFF;    /* Schrift auf dem Knopf */
  --accent-text: #2B2B2B;   /* Schrift in Akzentrolle auf hellem Grund */
  /* Der Fokusring. Graphit wie der Akzent: Die beiden Knoepfe in Akzentfarbe
     tragen outline-offset, ihr Ring liegt auf dem Grund und nicht auf der
     Flaeche. */
  --fokus: #2B2B2B;
  --griff-scheibe: #2B2B2B;
  --griff-zeichen: none;
  --griff-rand: none;
  --griff-linie: #2B2B2B;
  --accent-soft: #E2E2E2;   /* aufgehellter Akzent fuer Flaechen */
  --accent-tief: #1C1C1C;   /* Akzent unter dem Zeiger */
  --surface: #EDEDED;       /* Grund der Seite, neutrales Grau ohne Waerme */
  --paper: #FFFFFF;
  --ink: #1F1F1F;
  --ink-soft: #5B5B5B;
  /* Der Rand eines Feldes ist bei beiden Marken zu blass fuer WCAG 1.4.11
     (1,26 zu 1). An unserem eigenen Werkzeug ist das unsere Entscheidung, und
     hier haelt er die 3 zu 1: #888888 kommt auf 3,54 gegen die Karte und 3,03
     gegen den Grund. Ein Werkzeug wird stundenlang bedient, und Thomas bedient
     es in der Werkstatt und nicht am ruhigen Schreibtisch.
     Nachgerechnet: #8A8A8A, mein erster Wert, kam gegen den Grund auf 2,95 und
     ist durchgefallen. Die Zusicherung hat es gesagt, nicht das Auge. */
  --line: #888888;
  --line-weich: #C4C4C4;
  --warn: #A82015;          /* funktional, kein Markenton */
  --warn-flaeche: #F4E4E2;
  --schatten: rgba(0, 0, 0, .18);
  --radius: 3px;
  /* Die Systemschrift. Ein Werkzeug leiht sich keine Markenschrift, und
     Montserrat und Lato waeren genau das gewesen. */
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  /* Markenunabhaengig, wie in jedem Block: Gravurgrau bildet das
     Fertigungsergebnis ab und ist ueberall dasselbe. */
  --gravur: #6A6A6A;
}

.gravur {
  font-family: var(--font-body);
  color: var(--ink);
  /* Der Schriftschnitt gehoert uns und wird nicht geerbt.
     Anja am 26.08.2026: "das darf nicht so komisch ausgegraut sein alles."
     Im Browser nachgemessen war die Ursache nicht die Farbe und kein Filter,
     sondern font-weight 300, also Lato Light, bei 11,5 px. Der Wert stand
     nirgends in dieser Datei: Er kommt aus dem Shop-Template, und deshalb sah
     der Konfigurator im Shop blass aus und in der Werkbank nicht. Genau die
     Sorte Unterschied, die nur am Livesystem auffaellt.
     Dieselbe Regel wie bei Farbe und Schriftfamilie zwei Zeilen darueber: Was
     das Aussehen tragen soll, wird hier gesetzt und nicht von der Umgebung
     uebernommen. */
  font-weight: 400;
  /* Der Cremegrund der Marke, und er gehoert uns genauso wie Farbe und Schnitt.
     Anja am 27.08.2026: "cremegrund muss wieder rein." Damit ist es eine
     Gestaltungsentscheidung und faehrt nicht mehr unter einer Fehlerbehebung
     mit, wie am 26.08.2026, als ich ihn kurz eingebaut und wieder
     herausgenommen hatte (die Ursache des "ausgegraut" war die unbeschnittene
     Maske des Ausschnittrahmens, siehe `.gravur-ausschnitt`).
     Der abgenommene Prototyp setzt denselben Ton auf `body`; im Seitenpanel des
     Shops ist der Grund weiss, dort gibt es nichts zu erben. Die Karten bleiben
     weiss und heben sich davon ab. */
  background: var(--surface);
  display: grid;
  /* Die Spalten richten sich nach dem Platz des Behaelters, nicht nach dem
     Bildschirm: Im Seitenpanel des Shops ist der Konfigurator auf einem
     grossen Monitor trotzdem schmal, und zweispaltig war die Vorschau dort
     winzig (Anja, 13.08.2026). Zwei Spalten gibt es erst, wenn beide wirklich
     Platz haben. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 60px;
}
.gravur *,
.gravur *::before,
.gravur *::after { box-sizing: border-box; }
@media (max-width: 760px) {
  .gravur { grid-template-columns: 1fr; }
}

/* ---- Vorschau ---- */
.gravur-vorschau {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky;
  top: 14px;
  align-self: start;
}
@media (max-width: 760px) {
  .gravur-vorschau { position: relative; top: 0; }
}
/* Platz fuer Griffe, die ueber die Buehne hinausragen (11.09.2026).

   Die Buehne schneidet nicht ab (overflow: visible weiter unten), und auf einer
   flachen Flaeche wandern die Griffe ueber und unter das Metall: Ihre Mitte
   liegt eine Griffscheibe ausserhalb der Plaettchenkante, die Scheibe reicht
   noch eine weiter. Solange der Rand in der viewBox 30 Einheiten betrug, blieb
   das darin. Seit Juweluna ohne Bemassung 16 Einheiten hat
   (BUEHNENRAND_OHNE_MASS in kern/artikel.mjs), ragen sie um bis zu acht
   Einheiten hinaus, am Bildschirm rund zehn bis zwoelf Punkte.

   Der Platz gehoert HIERHER und nicht in die viewBox: Ein Rand in der viewBox
   verkleinert das Werkstueck, ein Abstand im Layout kostet nur Abstand. Und
   genau darum ging es Anja am 11.09.2026, der Rohling soll groesser werden. */
.gravur-buehne { --griffluft: 16px; }
.gravur-buehne { display: flex; justify-content: center; padding: var(--griffluft) 0 var(--griffluft); }
/* Mehrere Gravurflaechen (M3c): die Seiten liegen untereinander wie auf der
   Produktabbildung, nicht als Reiter zum Umschalten. Was die Kundin sieht, ist
   das ganze Werkstueck, und eine leere Seite bleibt sichtbar leer. */
.gravur-buehne.mehrflaechig { flex-direction: column; align-items: center; gap: 0; }
.gravur-buehne figure { margin: 0; width: 100%; display: flex; align-items: center; gap: 5px; justify-content: center; }
.gravur-buehne figcaption {
  font-size: 12px; color: var(--ink-soft); text-align: right;
  /* Die Beschriftung nimmt nur so viel Platz, wie "Seite 1" braucht. Jeder
     Punkt, den sie mehr belegt, fehlt der Gravurflaeche daneben; an der Roehre
     ist die Flaeche das Kleinste im Bild (Anja, 19.08.2026). */
  flex: 0 0 52px; line-height: 1.2;
}
/* Das Aussenmass unter dem Seitennamen, kleiner und blasser: Es ist eine
   Angabe ueber das Werkstueck und keine Bedienung. */
.gravur-buehne figcaption .mass {
  display: block; font-size: 10px; opacity: .75; margin-top: 1px; white-space: nowrap;
}
/* Die gerade bearbeitete Seite ist erkennbar, ohne dass die anderen
   verschwinden. Ein blasser Streifen statt eines Rahmens: Ein Rahmen um eine
   Buehne sieht aus wie eine Auswahl IN der Vorschau, und die gibt es dort
   schon fuer das einzelne Objekt. */
.gravur-buehne figure[data-aktiv="true"] figcaption { color: var(--accent-text); font-weight: 600; }
/* Die bearbeitete Seite liegt oben (21.08.2026, Anjas Befund "die Greifer sind
   nicht korrekt sichtbar, sie werden von der naechsten seite abgeschnitten").
   Die Griffe einer flachen Flaeche liegen ausserhalb des Metalls und ragen
   damit ueber die eigene Buehne hinaus, siehe overflow unten. Ohne diese Zeile
   entscheidet die Reihenfolge im Dokument: Die naechste Buehne kommt spaeter
   und gewinnt, sowohl beim Zeichnen als auch beim Treffer. Der Griff waere
   sichtbar und trotzdem nicht fassbar, und der Tipp darauf wuerde die
   Nachbarseite auswaehlen. Nur die aktive Seite wird angehoben, denn nur sie
   zeigt Griffe. */
.gravur-buehne figure[data-aktiv="true"] { position: relative; z-index: 1; }
/* Die Buehne ist eine Arbeitsflaeche, kein Bild zum Mitnehmen. touch-action
   haelt Scrollen und Zoomen aus dem Ziehen heraus; die drei Angaben darunter
   halten das Bildmenue und die Textauswahl heraus, die ein Handy nach etwa einer
   Sekunde Halten anbietet (Anja, 14.08.2026). Ohne sie unterbricht das Menue
   genau die ruhige Bewegung, mit der man etwas genau platziert. */
/* overflow: Ein SVG schneidet seinen Inhalt ab der viewBox ab, das ist die
   Vorgabe des Browsers. Auf einer flachen Flaeche liegen die Griffe ausserhalb
   des Metalls, und der Rand der Buehne (FLAECHENRAND_HOEHE in kern/artikel.mjs)
   ist schmaler als die Griffscheibe: Die obere Haelfte wurde abgeschnitten,
   genau dort, wo die naechste Seite anfaengt (Anja, 21.08.2026).
   Entschieden wurde gegen einen breiteren Rand: Der haette jede Buehne der
   Roehre um ein Fuenftel hoeher gemacht, und die Hoehe ist am Handy das knappe
   Gut. Zwischen zwei Seiten stehen ohnehin zweimal 16 leere Einheiten, der
   Griff braucht 24; der Platz ist also da, nur auf zwei Buehnen verteilt.
   Nebenwirkung, von Anja am 21.08.2026 mit entschieden: Eine Gravur, die nicht
   passt, wird jetzt auch ueber die Buehnenkante hinaus gezeichnet statt dort
   abgeschnitten. Das ist das Kernprinzip, zeigen und melden statt verstecken. */
/* Der Nachsatz ">" ist wichtig: Es gilt fuer die BUEHNE, nicht fuer jedes SVG
   darin. Das Foto sitzt in einer verschachtelten Buehne, die abschneiden MUSS
   (siehe gv-fotohuelle in vorschau.mjs), und CSS gewinnt gegen das
   overflow-Attribut im Markup. Ohne diese Einschraenkung erbt die Huelle das
   overflow: visible von hier und schneidet nicht mehr ab. */
/* min-width: Die Buehne steht bei mehreren Flaechen als Flex-Kind neben der
   Beschriftung. Ein Flex-Kind mit eigener Breitenangabe schrumpft von sich aus
   nicht unter diese Breite (min-width: auto), und "width: 100%" meint hier die
   volle Zeile: 52 Punkte Beschriftung und 5 Punkte Abstand kommen also OBEN
   DRAUF. Am Handy war die Zeile damit 363 Punkte breit bei 306 Platz und hing
   auf jeder Seite 28 heraus, die Beschriftung links bis an den Bildschirmrand,
   das Metall rechts ueber den Rahmen (Anja, 21.08.2026: "am handy stoesst jetzt
   die 20x4 mm an den duennen rahmen"). Mit min-width: 0 darf die Buehne
   schrumpfen und nimmt sich, was nach der Beschriftung uebrig ist. Nicht an der
   Breite gedreht: Eine feste kleinere Breite waere am Tisch zu klein und am
   naechsten Geraet wieder falsch. Bei einer einzelnen Flaeche aendert sich
   nichts, dort gibt es keine Beschriftung neben der Buehne. */
/* Die Grenze ist seit dem 04.09.2026 die HOEHE und nicht mehr die Breite
   (Anja: "das plaettchen sollte groesser dargestellt werden, sonst hat man
   wieder das problem der zu kleinen griffe").
   Vorher stand hier max-width: 340px. Ein flaches Plaettchen ist damit auf
   einer breiten Karte klein geblieben: Das 41 x 10 kam auf 340 von 441
   verfuegbaren Punkten, und die Griffe haengen am Maszstab der viewBox, waren
   also mit ihm zu klein.
   520 Punkte sind kein runder Wert, sondern der Kreuzanhaenger: Er ist das
   hochkantigste Stueck im Bestand (Verhaeltnis 1,53) und war mit der alten
   Grenze 340 x 520 gross. Eine Hoehengrenze in genau dieser Hoehe kann deshalb
   kein Stueck kleiner machen, als es war, und macht jedes flachere groesser,
   bis die Karte zu Ende ist. Kommt ein hochkantigerer Rohling dazu, gehoert
   die Zahl nachgerechnet; test/vorschau-groesse.test.mjs sagt es dann. */
.gravur-buehne > svg,
.gravur-buehne > figure > svg {
  width: 100%; max-height: 520px; min-width: 0; touch-action: none; overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Doppelt gesichert: Die Fotohuelle schneidet ab, auch wenn die Regel darueber
   einmal weniger eng gefasst wird. Ein Foto, das aus der Buehne laeuft, deckt
   das Bedienfeld zu; das ist der Fehler vom 21.08.2026. */
.gravur-buehne svg.gv-fotohuelle { overflow: hidden; width: auto; max-width: none; }

/* Das ganze Foto als Buehne (Juweluna, 23.09.2026). Das Bild ist dort die
   Gestaltung, ein weisser Rahmen darum waere ein Passepartout um ein
   Stimmungsbild. Es laeuft deshalb bis an die Kante der Karte, oben und
   seitlich, und das Fragezeichen liegt auf dem Bild.
   Die Griffluft entfaellt: Das Stueck liegt mitten im Foto, und die Griffe
   bleiben darin. Die Hoehengrenze entfaellt auch, sonst stuende das Bild auf
   einer breiten Karte schmaler als die Karte und der Rand kaeme seitlich
   zurueck; die Breite der Karte begrenzt es ohnehin. */
.gravur[data-buehne="foto"] .gravur-vorschau { overflow: hidden; }
.gravur[data-buehne="foto"] .gravur-buehne {
  margin: -18px -18px 14px; padding: 0;
}
.gravur[data-buehne="foto"] .gravur-buehne > svg { max-height: none; display: block; }
.gravur[data-buehne="foto"] .gravur-hilfeknopf {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}

/* Schmaler Platz: die Beschriftung wandert UEBER die Flaeche (Anja, 23.08.2026,
   "die variante, bei der die gravurflaechendarstellung am groessten bleibt").
   Neben der Flaeche kostet sie 52 Punkte plus 5 Abstand, und am Handy ist das
   ein Fuenftel der Gravurflaeche: Die Roehre kam auf 248 statt 306 Punkte.
   Darueber kostet sie stattdessen eine Zeile Hoehe je Seite, und die Flaeche
   bekommt den vollen Platz.

   Umgeschaltet wird nach der Breite des BEHAELTERS und nicht nach der des
   Bildschirms (@container): Der Konfigurator steht im Seitenpanel des Shops,
   und wie breit das ist, sagt der Bildschirm nicht. Die Schwelle ist die
   Breite, ab der die Buehne neben der Beschriftung noch die alte Hoechstbreite
   von 340 Punkten erreicht: 340 plus 52 plus 5 sind 397.
   BERICHTIGT am 04.09.2026: Bis dahin stand hier "darueber sind beide
   Anordnungen gleich gross und die schmalere gewinnt". Das galt, solange die
   Buehne bei 340 Punkten aufhoerte. Seit die Grenze die Hoehe ist, nimmt sie
   sich jede Breite, die da ist, und damit kostet die Beschriftung DANEBEN
   immer 57 Punkte Flaeche. Nach Anjas Maszstab vom 23.08.2026, "die Variante,
   bei der die Gravurflaechendarstellung am groessten bleibt", waere die
   Beschriftung also immer oben. Die Schwelle bleibt trotzdem stehen: Sie ist
   eine abgenommene Anordnung, und sie zu kippen ist eine Entscheidung und
   keine Folge dieser Aenderung.

   Der Name und das Aussenmass stehen dann NEBENEINANDER statt untereinander,
   sonst kostet die Beschriftung zwei Zeilen statt einer. Aus demselben Grund
   linksbuendig an der Kante der Flaeche und nicht mittig: Vier Seiten
   untereinander sollen eine Kante haben. */
.gravur-buehne.mehrflaechig { container-type: inline-size; container-name: buehne; }
@container buehne (width < 397px) {
  /* 10 Punkte Luft ueber und unter der Buehne: Die Griffe der bearbeiteten
     Seite ragen gemessene 8,2 Punkte ueber die Buehnenkante hinaus (siehe
     overflow oben). Ohne diese Luft liegt die Griffscheibe mitten in der
     Beschriftung, oben in der eigenen und unten in der der naechsten Seite.
     Das ist der Preis dieser Anordnung und er steht hier als Zahl, damit er
     nicht wieder verloren geht. */
  .gravur-buehne figure { flex-direction: column; align-items: stretch; gap: 10px; }
  .gravur-buehne figure + figure { margin-top: 10px; }
  /* Im Spaltenfluss ist die Flex-Grundgroesse die HOEHE. Ohne diese Zeile waere
     die Beschriftung 52 Punkte hoch, also genau das, was gespart werden soll. */
  .gravur-buehne figcaption {
    flex: 0 0 auto; text-align: left;
    display: flex; align-items: baseline; gap: 6px;
  }
  .gravur-buehne figcaption .mass { display: inline; margin-top: 0; }
}

.gravur-hinweis-einfarbig {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12px; color: var(--ink-soft); margin-top: 10px;
}
.gravur-punkt {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gravur); flex: 0 0 auto;
}
.gravur-passform {
  text-align: center; font-size: 12.5px; margin-top: 8px;
  min-height: 18px; color: var(--ink-soft);
}
.gravur-passform.warnung { color: var(--warn); font-weight: 600; }
/* Wie voll das Freifeld dieser Seite ist. Steht unter dem Knopf "+ Textfeld"
   und bleibt verborgen, solange Platz ist; erst knapp vor der Grenze taucht
   sie auf, am Anschlag in der Warnfarbe. Dieselben Farben und Groessen wie
   die Passform darueber, denn es ist dieselbe Art Auskunft: eine Grenze des
   Stuecks, nicht ein Fehler der Kundin. */
.gravur-feldfuellung {
  text-align: center; font-size: 12.5px; margin-top: 6px;
  color: var(--ink-soft);
}
.gravur-feldfuellung.warnung { color: var(--warn); font-weight: 600; }
/* Die Vorschau zum Mitnehmen (O56). Zurueckhaltend, weil sie eine Zugabe ist:
   ein Knopf in der Randfarbe, kein Akzent, keine Flaeche. Der Warenkorbknopf
   darunter bleibt der einzige, der wie ein Ziel aussieht. */

.gravur-ablehnung {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--warn-flaeche); border: 1px solid var(--warn);
  color: var(--warn); font-size: 12.5px; font-weight: 600; text-align: center;
}
/* Die Bedienungsanleitung sitzt hinter dem Fragezeichen oben rechts in der
   Vorschau. Der Knopf ist rund, weil seine Form seine Bedeutung traegt; das ist
   die im Tokenblock genannte Ausnahme von der eckigen Juweluna-Kante. */
.gravur-hilfeknopf {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1;
}
.gravur-hilfeknopf:hover { border-color: var(--accent); color: var(--accent-text); }
.gravur-hilfeknopf:focus-visible { outline: 1px solid var(--fokus); }
.gravur-hilfeknopf[aria-expanded="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text);
}

.gravur-hilfe {
  position: absolute; top: 48px; right: 12px; left: 12px; z-index: 2;
  display: block;
  background: var(--paper); border: 1px solid var(--accent);
  padding: 14px 16px 12px; font-size: 13px; line-height: 1.5;
  box-shadow: 0 6px 24px var(--schatten);
}
/* Ohne diese Zeile bliebe die Hilfe offen: das Attribut hidden verliert gegen
   jede Klassenregel mit display. Siehe .gravur-bereich[hidden]. */
.gravur-hilfe[hidden] { display: none; }
.gravur-hilfe h3 {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin: 0 0 8px;
}
.gravur-hilfe ul { margin: 0; padding-left: 18px; }
.gravur-hilfe li { margin-bottom: 5px; }
.gravur-hilfe b { font-weight: 700; color: var(--ink); }
.gravur-hilfezu {
  margin-top: 10px; width: 100%; padding: 9px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--auf-accent); cursor: pointer;
  font-family: var(--font-body); font-size: 13px;
}
.gravur-hilfezu:focus-visible { outline: 1px solid var(--fokus); outline-offset: 2px; }
.gravur-auswahlinfo {
  text-align: center; font-size: 12px; color: var(--ink-soft);
  margin-top: 6px; min-height: 16px;
}
/* Die Uhrzeit der ausgewaehlten Uhr (O77). Unter der Auswahlzeile, in ihrer
   Schriftgroesse, damit sie als Eigenschaft des angetippten Objekts gelesen
   wird und nicht als eigener Bereich. */
.gravur-uhrzeit {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 13px; color: var(--ink);
}
.gravur-uhrzeit[hidden] { display: none; }
.gravur-uhrzeit select,
.gravur-uhrzeit input {
  font: inherit; color: inherit; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 6px;
}

/* Roemische Zahlen unter den Textfeldern (O48). */
.gravur-roemisch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 13px; color: var(--ink);
}
.gravur-roemisch[hidden] { display: none; }
.gravur-roemisch button {
  font: inherit; color: inherit; background: var(--paper); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 8px;
}
.gravur-roemisch .gravur-roemisch-tipp { flex-basis: 100%; color: var(--ink-soft); }

/* ---- Bedienung ---- */
.gravur-bedienung { display: flex; flex-direction: column; gap: 16px; }

/* Die drei Bereiche (O21). Eine Reiterreihe oben, darunter genau einer davon.
   Bewusst kraeftiger als die frueheren Textreiter: Das hier ist die oberste
   Ebene der Bedienung, sie muss auf einem Handyschirm sofort als solche zu
   erkennen sein. */
/* Die Reiterleiste steht auf Papier und nicht auf dem Cremegrund (Anja,
   11.09.2026, mit einem Bild vom Uebergang): "entweder musst du die Tabgruppe
   mit weiss darstellen oder die Buehne weiter unten anfangen lassen, damit die
   Kaestchen zueinander passen."

   Genommen ist die erste Haelfte, und zwar wegen der Hoehe: Die Buehne tiefer
   anzusetzen kostet auf jedem Schirm eine Reiterleiste voll Abstand, und am
   Handy ist Hoehe das Knappste, was der Konfigurator hat -- genau darum ging es
   Anja am selben Tag beim 41 x 10. Papier kostet nichts.

   Damit beginnen links die Buehnenkarte und rechts die Reiterleiste auf
   derselben Hoehe, und beide sind weiss. Die Werte sind die von .gravur-karte
   und stehen deshalb nicht noch einmal als eigene Zahlen da. */
.gravur-bereiche {
  display: flex; gap: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.gravur-bereichsknopf {
  flex: 1 1 0; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-soft); cursor: pointer;
  /* 44 Pixel hoch, das ist das kleinste Ziel, das ein Daumen sicher trifft. */
  padding: 13px 6px; font-family: var(--font-display); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.gravur-bereichsknopf.aktiv { color: var(--accent-text); border-bottom-color: var(--accent); }
.gravur-bereichsknopf[disabled] { opacity: .35; cursor: default; }
.gravur-bereichsknopf:focus-visible { outline: 1px solid var(--fokus); }
.gravur-bereich { display: flex; flex-direction: column; gap: 16px; }
/* Muss sein und darf nicht weg: Das Attribut hidden bringt nur ein sehr
   schwaches display:none mit, jede Klassenregel mit display schlaegt es. Ohne
   diese Zeile stehen alle drei Bereiche gleichzeitig da und die Reiter wirken
   funktionslos. Genau so am 12.08.2026 passiert. */
.gravur-bereich[hidden] { display: none; }

/* Textfelder als Liste statt als zweite Reiterreihe (O21). Die aktive Zeile
   traegt links einen Balken in Akzentfarbe; das ist dasselbe Signal wie der
   Auswahlrahmen in der Vorschau, nur in der Liste. */
.gravur-textliste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.gravur-textzeile { border-left: 2px solid transparent; padding-left: 10px; }
.gravur-textzeile.aktiv { border-left-color: var(--accent); }
.gravur-textmarke {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 5px;
}
.gravur-textzeile.aktiv .gravur-textmarke { color: var(--accent-text); }
.gravur-karte {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.gravur-karte h2 {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text); font-weight: 600;
  margin: 0 0 10px;
}
.gravur textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  resize: none; background: var(--surface); color: var(--ink);
}
/* Der Fokus des Hauptfeldes, behoben am 04.09.2026. Vorher lag hier ein Ring
   in --accent-soft UND der Rand wurde durchsichtig gesetzt: 1,24 zu 1 bei
   Juweluna, 1,31 bei Vintageparts, also ein Feld, das im Fokus weniger zu sehen
   war als davor. Es ist das eine Feld, ueber das die ganze Gravur laeuft.
   Der Rand bleibt jetzt stehen, der Ring liegt aussen davor. */
.gravur textarea:focus { outline: 1px solid var(--fokus); outline-offset: 1px; }
.gravur-zaehler { text-align: right; font-size: 11px; color: var(--ink-soft); margin-top: 5px; }

.gravur-textreiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.gravur-reiter {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  padding: 6px 12px; font-family: var(--font-body); font-size: 12.5px;
}
.gravur-reiter.aktiv {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text);
  font-weight: 600;
}
.gravur-reiter:focus-visible { outline: 1px solid var(--fokus); }
.gravur-reiter-neu { color: var(--accent-text); }
.gravur-reiter-neu[disabled] { opacity: .4; cursor: default; }

.gravur-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.gravur .chip {
  flex: 1 1 30%; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 10px 6px 7px; text-align: center; cursor: pointer;
}
.gravur .chip-muster { display: block; height: 26px; }
.gravur .chip-muster svg { width: 100%; height: 100%; }
.gravur .chip-name { font-size: 10px; color: var(--ink-soft); letter-spacing: .04em; }
.gravur .chip.aktiv { border-color: var(--accent); background: var(--accent-soft); }
.gravur .chip:focus-visible { outline: 1px solid var(--fokus); }

.gravur-reglerzeile { display: flex; align-items: center; gap: 12px; }
.gravur-reglerzeile input[type=range] { flex: 1; accent-color: var(--accent); }
.gravur-reglerzeile .wert {
  font-size: 12px; color: var(--ink-soft); width: 62px; text-align: right;
}
.gravur-klein { font-size: 12px; color: var(--ink-soft); }
.gravur-gross { font-size: 19px; color: var(--ink-soft); }

.gravur-schalterzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gravur-schalterzeile label { font-size: 14px; }
.gravur-schalter { position: relative; width: 44px; height: 24px; flex: 0 0 auto; }
.gravur-schalter input { opacity: 0; width: 0; height: 0; }
.gravur-schalter .bahn {
  position: absolute; inset: 0; border-radius: 24px;
  background: var(--line); transition: .18s; cursor: pointer;
  display: block;
}
.gravur-schalter .bahn::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: .18s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.gravur-schalter input:checked + .bahn { background: var(--accent); }
.gravur-schalter input:checked + .bahn::after { transform: translateX(20px); }
.gravur-schalter input:focus-visible + .bahn { outline: 1px solid var(--fokus); }

.gravur-auswahlzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: 14px;
}
.gravur-textknopf {
  border: none; background: none; color: var(--accent-text); font-size: 12px;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.gravur-textknopf:focus-visible { outline: 1px solid var(--fokus); }
.gravur-reglerzeile + .gravur-reglerzeile { margin-top: 10px; }
.gravur-schalterzeile { margin-top: 12px; }
.gravur input[type=range]:disabled { opacity: .4; }

/* Quer oder hochkant (O54, 05.09.2026). Zwei kleine Knoepfe unter der Buehne,
   mittig, denn sie gehoeren zum Bild darueber und nicht zur Bedienspalte
   darunter. Bewusst kleiner als die Modusknoepfe: Die Ausrichtung wird einmal
   gewaehlt, die Bereiche wechselt die Kundin staendig. */
.gravur-ausrichtung {
  display: flex; justify-content: center; gap: 6px; margin: 8px 0 2px;
}
/* Muss sein: Das Attribut hidden bringt nur ein schwaches display:none mit,
   jede Klassenregel mit display schlaegt es (12.08.2026 teuer bezahlt). Der
   Schalter wird versteckt ausgeliefert und erst gezeigt, wenn der Rohling sich
   drehen laesst; ohne diese Zeile stuende er an jedem Stueck da. */
.gravur-ausrichtung[hidden] { display: none; }
.gravur-lageknopf {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  padding: 4px 12px; font-family: var(--font-body); font-size: 12px;
}
.gravur-lageknopf.aktiv {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text);
  font-weight: 600;
}
.gravur-lageknopf:focus-visible { outline: 1px solid var(--fokus); }

/* ENTFALLEN am selben Tag, an dem sie entstanden: der Knopf "Symbol in den
   Text" und seine Klappzeile am Textfeld (Anja: "das symbol in den text finde
   ich ueberfluessig", dann "genau in die textzeile"). Welche Zeichen in die
   Zeile gehoeren, steht jetzt an den Zeichen; sie bilden einen eigenen
   Abschnitt der Auswahlliste und brauchen keinen eigenen Knopf. */

/* Raster statt Reihe. Am Handy waren die Symbole zu klein (Anja, 13.08.2026),
   und das Nachmessen am 14.08.2026 hat gesagt, woran es lag: Bei 375 Punkten
   Bildschirmbreite war ein Knopf 44 Punkte gross, das Zeichen darin aber nur
   24,7. Der Knopf war also gross genug fuer den Finger und zu klein fuer das
   Auge, und entschieden wird hier nach dem Auge, denn das Symbol muss man
   erkennen, bevor man es antippt.

   Die Spalten richten sich nach der Breite des Behaelters, nicht nach dem
   Bildschirm, wie ueberall in dieser Oberflaeche (Fallstrick 25): Es passen so
   viele Knoepfe in eine Zeile, wie bei 56 Punkten Mindestbreite hineingehen,
   und den freien Rest teilen sie sich. Am Handy sind das vier Knoepfe von 71
   Punkten mit einem Zeichen von 52, also mehr als das Doppelte.

   Die Innenluft steht in Prozent, damit sie mitwaechst; min-height traegt den
   Knopf in Browsern ohne aspect-ratio. */
.gravur-symbole {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
/* Zugeklappt bleibt die erste Kachelzeile stehen (13.09.2026). Die Hoehe setzt
   richteKlapp() gemessen, weil die Spaltenzahl an der Panelbreite haengt; hier
   steht nur, dass darunter nichts hervorschaut. */
.gravur-symbole[data-zugeklappt='ja'] { overflow: hidden; }
/* Die Ueberschrift IST der Schalter. Sie soll wie eine Ueberschrift aussehen
   und sich wie ein Knopf verhalten, deshalb erbt sie Schrift und Farbe und
   bringt nur den Zeiger und den Pfeil mit. */
.gravur .gravur-klapp {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.gravur .gravur-klapp::after {
  content: ''; margin-left: auto;
  width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.gravur .gravur-klapp[aria-expanded='true']::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
/* Passt die Gruppe ohnehin in eine Zeile, bleibt der Name stehen und der
   Schalter verschwindet: kein Pfeil, kein Zeiger, kein Fokus. */
.gravur .gravur-klapp[data-klappbar='nein'] { cursor: default; }
.gravur .gravur-klapp[data-klappbar='nein']::after { content: none; }
.gravur .gravur-klapp:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.gravur .symbol {
  width: 100%; height: auto; aspect-ratio: 1; min-height: 56px; padding: 12%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.gravur .symbol span { display: block; width: 100%; height: 100%; }
.gravur .symbol svg { width: 100%; height: 100%; }
.gravur .symbol:hover { border-color: var(--accent); }
.gravur .symbol:focus-visible { outline: 1px solid var(--fokus); }
/* ENTFALLEN am 12.09.2026: die waagerechte Leiste der Motivgruppen (O20,
   15.08.2026). Sie nannte dieselben Namen, die zwei Zeilen tiefer als
   Zwischenueberschrift stehen; mit den Symbolen in derselben Liste war das die
   dritte Beschriftung an derselben Stelle (Anja: "oben ist jetzt die
   beschriftung zu doppelt"). Gescrollt wird jetzt, wie im Vorbild. */
.gravur-motivabschnitt + .gravur-motivabschnitt { margin-top: 16px; }
/* Die Zwischenueberschrift laeuft mit und klebt NICHT (berichtigt am
   12.09.2026). Geklebt schob sie sich beim Scrollen ueber die Kacheln der
   eigenen Gruppe, und angeschnittene Kacheln unter einer stehenden Zeile sind
   genau das, was Anja "macht komische sachen" genannt hat. Eine Ueberschrift,
   die mitlaeuft, sagt beim Vorbeiziehen dasselbe und verdeckt nichts. */
.gravur-motivabschnitt h3 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-weak, inherit);
}
/* ===== Die Ideen (O71, 21.09.2026) =====
   Eine Kachel je Vorlage, und sie ist GEZEICHNET: das Plaettchen in seiner
   echten Form, die Gravur in Gravurgrau, beides aus derselben Rechnung wie die
   Vorschau. Deshalb steht hier auch keine feste Kachelgroesse fuer das Bild:
   Das SVG bringt sein Seitenverhaeltnis mit, ein 41 x 10 liegt flach und ein
   Oval steht hoch, und genau das soll man sehen.

   Zwei Spalten und nicht das Symbolraster mit seinen 56 Punkten: Eine Vorlage
   wird gelesen und nicht getippt, und eine Anordnung aus vier Teilen ist im
   Daumennagel nichts. */
.gravur-vorlagen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.gravur .gravur-vorlage {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.gravur .gravur-vorlage:hover { border-color: var(--accent); }
.gravur .gravur-vorlage:focus-visible { outline: 1px solid var(--fokus); }
/* Das Bild bekommt eine feste Hoehe und behaelt sein Verhaeltnis darin
   (preserveAspectRatio im SVG). Ohne feste Hoehe stuenden die Kacheln einer
   Reihe verschieden hoch, und das Raster saehe zerrissen aus. */
/* 110 Punkte, im Browser gemessen (21.09.2026): Bei 84 blieb vom Oval
   15 x 20 mm nur ein Daumennagel von 63 Punkten Breite uebrig, und eine
   Anordnung, die man nicht erkennt, ist keine Idee. Ein flaches 41 x 10 laesst
   hier Luft ueber und unter sich; das ist der Preis dafuer, dass jede Form ihr
   echtes Verhaeltnis behaelt. */
.gravur .gravur-vorlagenbild { display: block; height: 110px; }
.gravur .gravur-vorlagenbild svg { width: 100%; height: 100%; }
.gravur .gravur-vorlagenname { font-size: 0.82rem; line-height: 1.2; }
.gravur .gravur-vorlagenanlass {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-weak, inherit);
}
/* Der Hinweis auf den Mustertext. Er steht ganz unten und damit im Shop
   unmittelbar ueber dem Warenkorbknopf; auffaellig genug, um vor der
   Bestellung gelesen zu werden, und kein Alarm: Es ist kein Fehler, eine
   Vorlage zu uebernehmen. */
.gravur-vorlagenhinweis {
  margin-top: 14px; padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 0.84rem; line-height: 1.35;
}

/* Motivknopf (O20). Wie ein Symbolknopf, aber mit Namen darunter: Ein Sternbild
   ist im Daumennagel nicht zu unterscheiden, ein Symbol schon. Der Name traegt
   deshalb die Auswahl, das Bild bestaetigt sie. */
.gravur .symbol.motiv { aspect-ratio: auto; padding: 8% 8% 4%; }
.gravur .symbol.motiv span { height: auto; }
.gravur .symbol.motiv svg { aspect-ratio: 1; }
.gravur .symbol.motiv .motiv-name {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.2;
  /* Immer Platz fuer zwei Zeilen (23.09.2026): Ein Name wie "Zunehmende
     Sichel" bricht an der Leerstelle, und ohne feste Hoehe waere seine Kachel
     hoeher als die eines Sternbilds daneben. */
  min-height: 2.4em;
  color: var(--text-weak, inherit);
  overflow-wrap: anywhere;
}
/* Die Kachelbreite haengt am laengsten Namen der Gruppe (O43, Befund vom
   28.08.2026: "Wassermann" brach mitten im Wort, und mit den Geburtsblumen
   kommen laengere Namen wie Maigloeckchen dazu). Die Spaltenbreite der Symbole
   ist 56 Punkte und richtet sich nach dem Finger; ein Name richtet sich nach dem
   Auge, also nach seiner gemessenen Breite.

   --motivlabel setzt der Konfigurator je Abschnitt, gemessen am gerenderten
   Text in seiner echten Schrift. Geteilt wird durch 0.84, weil die Innenluft der
   Kachel oben 8 Prozent je Seite ist und sich auf die Kachelbreite bezieht; die
   Zahl gehoert zu diesem padding und ist mit ihm zu aendern. Die zwei Punkte
   sind der Rahmen. max() haelt die Fingergroesse als Untergrenze.

   overflow-wrap oben bleibt als Notausgang: Ist der Behaelter schmaler als eine
   Spalte, bricht der Name lieber, als aus der Kachel zu laufen. Bei gemessener
   Spalte tritt der Fall nicht ein. */
.gravur-motivabschnitt .gravur-symbole {
  grid-template-columns: repeat(auto-fill, minmax(max(56px, calc(var(--motivlabel, 40px) / 0.84 + 2px)), 1fr));
}
/* Grundformen (O12). Sie standen bis zum 12.09.2026 in einer eigenen Karte mit
   einem breiten, beschrifteten Knopf; seit sie ein Abschnitt derselben Liste
   sind (Anja: "formen im frontend in der gleichen liste integrieren"), tragen
   sie eine Symbolkachel wie jedes andere Zeichen. Eine zweite Knopfform daneben
   waere genau der Bruch gewesen, den die eine Liste beseitigt. Die Vorschau in
   der Kachel ist in Gravurgrau, damit Knopf und Gravur dasselbe zeigen.
   .gravur-formen und .gravur-formknopf sind damit entfallen. */

.gravur-fussnote { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; }

.gravur-exportknopf {
  width: 100%; border: none; border-radius: var(--radius);
  background: var(--accent); color: var(--auf-accent); cursor: pointer;
  padding: 12px 14px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
}
.gravur-exportknopf:hover { filter: brightness(1.08); }
.gravur-exportknopf:focus-visible { outline: 1px solid var(--fokus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gravur * { transition: none !important; }
}

/* ---- Einbau im NIU-Seitenpanel des Shops ----
   Die einzige Regel dieser Datei, die nicht unter .gravur haengt, und dafuer
   gibt es keinen anderen Ort: Das Panel ist ein Vorfahr, und nur von hier aus
   reist die Regel gemeinsam mit dem Konfigurator in den Shop.

   Grund (Anja, 13.08.2026): Das NIU-Panel ist am PC rund 500 Pixel schmal.
   Einspaltig verschwindet die Bedienung dann unterhalb der Vorschau im
   Scrollbereich und wirkt wie fehlend. Deshalb wird das Panel auf breiten
   Bildschirmen geweitet, wenn unser Konfigurator darin steckt; das Raster
   stellt sich dann von selbst zweispaltig. Am Handy bleibt das Panel, wie es
   ist. !important, weil NIUplus die Breite selbst setzt. Browser ohne :has()
   zeigen weiter das schmale Panel mit Scrollen, es fehlt dann nichts, es ist
   nur der alte Zustand. */
@media (min-width: 992px) {
  .niu-sidebar:has(#juweluna-gravur) {
    width: min(920px, 92vw) !important;
    max-width: none !important;
  }
  /* NIUplus schiebt das offene Panel per transform an eine Position, die mit
     der urspruenglichen Breite gerechnet ist; nur geweitet liefe es rechts aus
     dem Fenster (am 13.08.2026 gesehen). Das offene Panel wird deshalb am
     rechten Rand verankert. Nur im offenen Zustand (.show), damit die
     Schiebeanimation beim Oeffnen und Schliessen unangetastet bleibt. */
  .niu-sidebar.show:has(#juweluna-gravur) {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
}

/* Hinweis auf den Widerrufsausschluss (O23). Steht im Child-Template unmittelbar
   ueber dem Warenkorbknopf, weil er vor dem Absenden der Bestellung klar
   dastehen muss und nicht in einer Fussnote weiter oben.
   Entschieden am 16.08.2026 (Anja): fest eingebaut statt ueber ein Attribut in
   der Wawi, "dann koennen wir das Attribut nicht vergessen, das ist viel
   sicherer". Vorbild ist der Hinweis bei Vintageparts, die Farben sind hier
   aber die von Juweluna: Der Kasten gehoert zur Seite, nicht zur Gravur, und
   Gravurgrau haette ausgesehen wie eine Ansage des Konfigurators. */
.gravur-widerruf {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 14px;
  text-align: center;
  line-height: 1.5;
}
.gravur-widerruf strong { font-family: var(--font-display); }
.gravur-widerruf p { margin: 0; }
.gravur-widerruf .titel {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 6px;
}

/* Der Knopf, der den Konfigurator oeffnet ("Artikel gravieren").
   Er ist eine Custom Box des Companion-Plugins auf der Produktdetailseite;
   Anja traegt im Feld "Eigene CSS Klassen" dieser Box den Namen gravur-anstoss
   ein, und diese Regeln greifen.

   BERICHTIGT am 06.09.2026 (Anja: "wir haben eine eigene costum box mit
   unserem attribut gebaut. in beiden shops"). Hier stand, der Knopf gehoere
   uns nicht und haenge an product_engravable. Seit Sitzung 48 ist es unsere
   EIGENE Box mit unserem Funktionsattribut, in beiden Shops; product_engravable
   ist an unseren Artikeln entfernt, sonst rendern zwei Boxen. Ich hatte den
   alten Satz an diesem Tag nachgesprochen statt geprueft und daraus geschlossen,
   der Knopf werde gar nicht mehr gerendert. Am laufenden Shop gemessen: Er wird.

   DIE MARKE ERREICHT IHN NICHT, und das ist der Grund, warum er hier nur die
   Vorgabefarben traegt. Er liegt im Custom-Box-Container der Seite, sein erster
   gemeinsamer Vorfahre mit unserer Box ist die Seite selbst (#result-wrapper);
   ein data-marke von uns kann er also nicht erben (Fallstricke 77 und 78). Bei
   Juweluna ist die Vorgabe die richtige Antwort. Bei Vintageparts traegt die
   Box diese Klasse NICHT und steht in den Shop-Farben, was am 06.09.2026
   abgenommen ist ("design passt doch"). Wer sie dort eintraegt, bekommt
   Juwelunas Mitternachtsblau und braucht vorher einen eigenen Weg zur Marke.

   Warum das hier steht und nicht im Shop-Stilblatt: Unser Stilblatt liegt auf
   der Produktseite ohnehin schon, auch bei geschlossenem Seitenpanel (am
   16.08.2026 im Browser nachgemessen). Es braucht also keine weitere Datei und
   keine weitere Aenderung an DREIZACKs Child-Template. Und die Farben kommen
   aus dem Tokenblock, nicht aus zwei von Hand gepflegten Werten je Artikel;
   genau daran hatte sich Anja gestoert.

   Kein :hover-Zwang und keine Animation: Der Knopf steht auf einer
   Produktseite, die schon genug will. Auffaellig ist er durch Flaeche und
   Groesse, nicht durch Bewegung. */
/* Die Schrift in dieser Box las --paper und --surface, also zweimal Weiss,
   und stand damit bei Vintageparts mit 1,49 zu 1 auf dem Rose. Gefunden am
   04.09.2026: Der Kommentar in test/marke.test.mjs sagt seit dem 29.08.2026,
   das Stilblatt habe die weisse Schrift "an drei Stellen" festgeschrieben und
   seither gebe es --auf-accent; diese vier Stellen waren nicht dabei. Es ist
   der Knopf, ueber den auf der Produktseite der ganze Konfigurator laeuft.
   Der Untertitel war bei Juweluna eine Spur cremefarben statt weiss; diese
   Nuance faellt weg, denn ein zweiter Weisston auf dem Akzent waere ein
   zweiter Wert fuer dieselbe Frage. */
.gravur-anstoss {
  background: var(--accent);
  color: var(--auf-accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 8px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 44 Pixel hoch waere das Mindestmass fuer den Daumen; hier deutlich mehr,
     denn das ist der eine Knopf, ueber den der ganze Konfigurator laeuft. */
  min-height: 62px;
}
/* Die Box bringt Titel und Untertitel als eigene Zeilen mit. Angesprochen wird
   ueber die Reihenfolge und nicht ueber fremde Klassennamen: Die Klassen des
   Plugins gehoeren ihm und koennen sich mit dem naechsten Update aendern. */
.gravur-anstoss :is(h1, h2, h3, h4, .h3, .h4, strong, b) {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--auf-accent);
}
.gravur-anstoss p,
.gravur-anstoss small,
.gravur-anstoss span {
  font-family: var(--font-body);
  font-size: 13px;
  margin: 0;
  color: var(--auf-accent);
}
/* Der Pfeil sagt, dass sich etwas oeffnet. Als Inhalt eines ::after, damit im
   Markup der Fremdbox nichts geaendert werden muss. */
.gravur-anstoss::after {
  content: '›';
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--auf-accent);
  flex: 0 0 auto;
}
.gravur-anstoss:hover { background: var(--accent-tief); }
.gravur-anstoss:focus-visible { outline: 1px solid var(--fokus); outline-offset: 2px; }

/* Kontur-Upload (O35). Der Ausschnittrahmen liegt ueber der Vorlage; sie wird
   in Graustufen gezeigt, damit sie nicht mit der Gravurvorschau darueber
   verwechselt wird: Was graviert wird, steht in Gravurgrau, alles andere ist
   Vorlage. */
.gravur-ausschnitt {
  position: relative;
  margin: 12px 0;
  background: #fff;
  border: 1px solid var(--line-weich);
  touch-action: none;
  /* Ohne diese Zeile maskiert der Ausschnittrahmen die ganze Seite.
     Anja am 26.08.2026: "solange ich bei upload bleibe, ist alles grau
     maskiert. gehe ich auf schrift zurueck, wird die ansicht normal."
     Der Rahmen darunter hebt alles ausserhalb des Ausschnitts mit
     `box-shadow: 0 0 0 9999px rgba(255,255,255,.62)` auf. Ein box-shadow wird
     aber NICHT vom Elternelement beschnitten, solange dort kein overflow
     steht. Die 9999 px lagen damit ueber dem ganzen Panel: Plaettchen, Regler
     und Meldungen bekamen eine weisse Schicht mit 62 Prozent Deckkraft.
     Nur im Upload-Bereich, weil nur dort ein Rahmen existiert, und beim
     Wechsel auf Text sofort weg. Genau so hat Anja es beschrieben.
     Zwei Umwege auf dem Weg hierher, beide lehrreich: Der Schriftschnitt und
     der fehlende Cremegrund waren echte Abweichungen und beide NICHT diese
     Ursache. Gesucht hatte ich mit getComputedStyle nach Farben und
     Deckkraeften, und das findet eine Ueberlagerung nie: Die Farbe des Textes
     bleibt richtig, es liegt nur etwas darueber. Wer eine Maske sucht, muss
     die Bildpunkte ansehen oder den Aufbau lesen, nicht die Farbwerte. */
  overflow: hidden;
}
.gravur-ausschnitt img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  user-select: none;
  -webkit-user-drag: none;
}
/* Kein rechteckiger Rand (Anja, 29.08.2026: "eckig, die kante links"). Der
   Ausschnitt ist zwar ein Rechteck, gezeigt wird aber die GRAVURFLAECHE, und
   die ist beim Oval keine. Eine durchgezogene gerade Kante mitten im Bild las
   sich als die Grenze der Gravur, und sie ist es nicht: Was in den Ecken des
   Rechtecks liegt, faellt aus der Flaeche und wird von der Passform abgelehnt.
   Die sichtbare Kante ist deshalb die Form selbst, gezeichnet in
   zeigeRahmenform; hier bleibt nur die Aufhellung nach aussen und der Griff. */
.gravur-rahmen {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, .62);
  cursor: grab;
}
.gravur-rahmen:active { cursor: grabbing; }

/* Ein abgeschalteter Knopf muss abgeschaltet AUSSEHEN. Ohne diese Regel sieht
   er aus wie immer, die Kundin tippt, und nichts passiert: die schlechteste
   Art, nein zu sagen (gefunden am 26.08.2026 an einem abgelehnten
   Fingerabdruck). */
.gravur-exportknopf:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}
.gravur-exportknopf:disabled:hover { filter: none; }

/* Die display-Falle vom 12.08.2026, hier zweimal: hidden bringt nur ein sehr
   schwaches display:none mit, und jede Klassenregel mit display schlaegt es.
   Die Reglerzeile des Ausschnitts steht mit hidden in der Seite und traegt
   display:flex; ohne diese Regel waere sie immer sichtbar, auch bevor eine
   Datei gewaehlt wurde. Gefunden hat es test/module.test.mjs und nicht das
   Auge. */
.gravur-reglerzeile[hidden] { display: none; }
.gravur-ausschnitt[hidden] { display: none; }

/* Die Form der Gravurflaeche im Ausschnittrahmen. Sie liegt ueber der Vorlage
   und zeigt, was vom Ausschnitt spaeter wirklich graviert wird: Beim Oval
   fallen die Ecken heraus. */
.gravur-rahmen svg { width: 100%; height: 100%; display: block; opacity: .85; }