/* Swaags Etikettengestalter – lädt nur mit dem Portlet.
 * Das Etikett auf seinem Trägerpapier ist der Blickfang; die Bedienung bleibt ruhig in den Theme-Farben (SwaagsNOVA):
 * Navy #0b1f3a Text · Blau #004f9f aktiv · Cyan #1ab4e7 Auswahl/Fokus · Orange nur für „Anfrage senden“ (btn-cta). */
.swe {
  --swe-navy: #0b1f3a; --swe-text: #24364f; --swe-grau: #566579; --swe-linie: #dfe3e8; --swe-flaeche: #f4f6fa;
  --swe-blau: #004f9f; --swe-cyan: #1ab4e7; --swe-traeger: #e3e9f1; --swe-rot: #b3261e;
  margin: 1rem 0 2.5rem; color: var(--swe-text);
}
.swe__hinweis { font-size: 1.0625rem; margin-bottom: 1.25rem; max-width: 46rem; }
.swe__ohne-js { padding: 1rem 1.25rem; border-radius: 1rem; background: var(--swe-flaeche); }
.swe__raster { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
  .swe__raster { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; gap: 2rem; }
  .swe__buehne { position: sticky; top: calc(var(--swe-kopf, 0px) + 1rem); }
}

/* --- Etikett-Einstellungen im Bedienfeld (Größe, Ausrichtung, Logo) -------------------------------------------------- */
.swe .swe__leiste .custom-select { height: 2.5rem !important; min-height: 0 !important; padding-top: .375rem; padding-bottom: .375rem; }
.swe__logo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.swe__datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.swe__logo-knopf { display: inline-flex !important; flex-direction: column; justify-content: center; min-height: 2.75rem; margin: 0 !important; padding: .375rem 1rem;
  border: 1px dashed #9fb0c5; border-radius: .75rem; background: #fff; color: var(--swe-blau) !important; font-weight: 700 !important; font-size: .875rem !important; line-height: 1.25; cursor: pointer; }
.swe__logo-knopf small { font-weight: 400; font-size: .75rem; color: var(--swe-grau); }
.swe__logo-knopf:hover { border-color: var(--swe-blau); background: #f2f7fc; }
.swe__datei:focus-visible + .swe__logo-knopf { outline: 3px solid var(--swe-cyan); outline-offset: 2px; }
.swe__leiste .swe__segment { display: flex; }
.swe__leiste .swe__segment label { flex: 1; margin: 0; }
.swe__leiste .swe__segment span { justify-content: center; }
/* Umschalter (Hochkant/Quer, Schriftgröße, Vordruck): Radio-Knöpfe als Segmente, Pfeiltasten wechseln */
.swe__segment { display: inline-flex; padding: .1875rem; border-radius: .75rem; background: #e9eef4; }
.swe__segment label { position: relative; margin: 0; }
.swe__segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swe__segment span { display: flex; align-items: center; min-height: 2.125rem; padding: 0 .875rem; border-radius: .5625rem; font-size: .875rem; font-weight: 600; color: var(--swe-grau); white-space: nowrap; }
.swe__segment input:checked + span { background: #fff; color: var(--swe-blau); box-shadow: 0 1px 3px rgba(11, 31, 58, .14); }
.swe__segment input:focus-visible + span { outline: 3px solid var(--swe-cyan); outline-offset: 1px; }
.swe__segment input:disabled + span { opacity: .5; }

/* --- Bühne: Etikett auf Trägerpapier ---------------------------------------------------------------------------- */
.swe__flaeche { position: relative; display: flex; justify-content: center; padding: 1rem .75rem .5rem; border-radius: 1.25rem; background: var(--swe-flaeche); outline: none; }
.swe__svg { display: block; max-width: 100%; height: auto; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; } /* Breite setzt gestalter.js */
.swe__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; margin-top: .625rem; }
.swe__masse { margin: 0; font-weight: 700; color: var(--swe-navy); }
.swe__tipp { margin: 0; font-size: .8125rem; color: var(--swe-grau); max-width: 34rem; }
.swe__fehler { margin: .5rem 0 0; color: var(--swe-rot); font-size: .875rem; font-weight: 600; }

.swe-traeger { fill: var(--swe-traeger); }
.swe-etikett { filter: drop-shadow(0 4px 6px rgba(11, 31, 58, .12)); }
/* HTML-Ebene über dem SVG: Lineal und Texte in echter Bildschirmschrift (Lage setzt gestalter.js auf ganze Pixel) */
.swe__ebene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.swe__ebene > * { position: absolute; }
.swe-mass__strich { display: block; background: #6b7d93; }
.swe-mass__zahl { font: 600 11px/13px Inter, 'Inter Fallback', Arial, sans-serif; color: #4a5a6f; font-variant-numeric: tabular-nums; }
.swe-text { overflow: hidden; font-family: Arial, Helvetica, sans-serif; color: #000; }
.swe-text__zeile { position: absolute; white-space: pre; }
.swe-text__zeile--tabelle { left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 2px; } /* Trennlinien zeichnet das SVG */
.swe-text__ziffern { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.swe-text__ziffern--gedreht { right: auto; bottom: auto; white-space: nowrap; transform: translate(-50%, -50%) rotate(90deg); }
.swe-text__dreh { position: absolute; left: 0; top: 0; transform-origin: 0 0; } /* gedrehtes Feld: Zeilen im ungedrehten Rahmen */

.swe-feld { cursor: move; touch-action: none; outline: none; }
.swe-flaeche { fill: transparent; }
.swe-feldrahmen { /* nicht „.swe-rahmen“ – so heißt der Container des Portlets, sonst erbt jede SVG-Linie die Strichelung */ fill: none; stroke: #a9b7c8; stroke-width: 1.5; stroke-dasharray: 8 6; }
.swe-feld:hover .swe-feldrahmen { stroke: var(--swe-blau); stroke-dasharray: none; }
.swe-auswahl { fill: rgba(26, 180, 231, .07); stroke: var(--swe-blau); stroke-width: 3; }
.swe-feld:focus-visible .swe-feldrahmen, .swe-feld:focus-visible .swe-auswahl { stroke: var(--swe-cyan); stroke-width: 4.5; stroke-dasharray: none; }
.swe-griff { fill: var(--swe-blau); pointer-events: none; }
.swe-griff-treffer { fill: transparent; stroke: none; cursor: nwse-resize; } /* stroke: none – SVG vererbt sonst den gestrichelten Feldrahmen */
.swe-loeschen { pointer-events: none; }
.swe-loeschen circle { fill: var(--swe-rot); }
.swe-loeschen path { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; fill: none; }
.swe-loeschen-treffer { fill: transparent; stroke: none; cursor: pointer; }
.swe-griff, .swe-loeschen circle { stroke: none; }
.swe-lasso { fill: rgba(26, 180, 231, .08); stroke: var(--swe-cyan); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.swe-hilfslinie { stroke: #f39932; stroke-width: 2; pointer-events: none; }

/* Text direkt im Etikett: echte Eingabe über dem Feld, Maße setzt gestalter.js */
.swe__inline { position: absolute; z-index: 2; transform-origin: 0 0; box-sizing: border-box; margin: 0; border: 2px solid var(--swe-cyan); border-radius: 3px;
  background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; line-height: 1.2; resize: none; overflow: auto;
  box-shadow: 0 .375rem 1.25rem rgba(11, 31, 58, .2); outline: none; }
.swe__inline::placeholder { color: #8b97a8; }

/* --- Bedienfeld rechts: ein ruhiges Feld, Abschnitte durch Linien getrennt ---------------------------------------- */
.swe__leiste { padding: .25rem 1.25rem 1.25rem; border: 1px solid var(--swe-linie); border-radius: 1.25rem; background: #fff; }
.swe__abschnitt { padding: 1rem 0; }
.swe__abschnitt + .swe__abschnitt { border-top: 1px solid var(--swe-linie); }
.swe__abschnitt h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 800; color: var(--swe-navy); }
.swe__klein { margin: 0 0 .625rem; font-size: .8125rem; color: var(--swe-grau); }
.swe__leiste label, .swe__beschriftung { display: block; margin: .625rem 0 .25rem; font-size: .8125rem; font-weight: 600; color: var(--swe-text); }
.swe .swe__leiste .form-control { height: 2.5rem !important; min-height: 0 !important; padding-top: .375rem; padding-bottom: .375rem; }
.swe .swe__leiste textarea.form-control { height: 4rem !important; }
.swe__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; align-items: end; }

.swe__knoepfe { display: flex; flex-wrap: wrap; gap: .375rem; }
.swe__chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .75rem; border: 1px solid #c5d3e3; border-radius: 99rem;
  background: #fff; color: var(--swe-blau); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.swe__chip:hover { border-color: var(--swe-blau); background: #f2f7fc; }
.swe__chip[aria-pressed="true"] { border-color: var(--swe-blau); background: var(--swe-blau); color: #fff; }
.swe__chip:disabled { opacity: .45; cursor: not-allowed; }
.swe__chip:focus-visible, .swe__textknopf:focus-visible { outline: 3px solid var(--swe-cyan); outline-offset: 2px; }

.swe__feld-einstellungen { margin-top: .875rem; padding: .75rem .875rem; border-radius: .875rem; background: #eef5fc; }
.swe__gewaehlt { margin: 0 0 .5rem; font-size: .875rem; color: var(--swe-navy); }
/* Schrift: Größe in pt und Bündigkeit des gewählten Felds */
.swe__format { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.swe__format[hidden], .swe__schrift[hidden], .swe__buendig[hidden] { display: none; }
.swe__schrift, .swe__buendig { display: inline-flex; align-items: center; gap: .25rem; }
.swe__format-titel { margin-right: .125rem; font-size: .8125rem; font-weight: 600; color: var(--swe-text); }
.swe__gruppe { display: inline-flex; padding: .1875rem; border-radius: .75rem; background: #dce7f3; }
.swe__mini { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2.25rem; padding: 0 .375rem; border: 1px solid #c5d3e3; border-radius: .5625rem;
  background: #fff; color: var(--swe-blau); font-size: .875rem; font-weight: 700; line-height: 1; cursor: pointer; }
.swe__mini sup { top: -.4em; font-size: .7em; }
.swe__mini:hover:not(:disabled) { border-color: var(--swe-blau); }
.swe__mini:disabled { opacity: .4; cursor: not-allowed; }
.swe__mini:focus-visible { outline: 3px solid var(--swe-cyan); outline-offset: 2px; }
.swe__gruppe .swe__mini { border-color: transparent; background: transparent; color: var(--swe-grau); }
.swe__gruppe .swe__mini[aria-pressed="true"] { background: #fff; color: var(--swe-blau); box-shadow: 0 1px 3px rgba(11, 31, 58, .14); }
.swe__schrift-wert { min-width: 2.75rem; text-align: center; font-size: .875rem; font-weight: 700; color: var(--swe-navy); font-variant-numeric: tabular-nums; }
.swe__aktionen { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; }
.swe__textknopf { min-height: 2.25rem; padding: 0; border: 0; background: none; color: var(--swe-blau); font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swe__textknopf--warnung { color: var(--swe-rot); }
.swe__zuruecksetzen { margin-top: .5rem; font-weight: 400; color: var(--swe-grau); }
@media (pointer: coarse) { .swe__chip, .swe__textknopf, .swe__segment span, .swe__mini { min-height: 2.75rem; } .swe__mini { min-width: 2.75rem; } }

.swe__ds { display: flex !important; align-items: flex-start; gap: .5rem; margin-top: .875rem !important; font-weight: 400 !important; }
.swe__ds input { margin-top: .2rem; flex: 0 0 auto; }
.swe__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.swe__senden { margin-top: 1rem; min-height: 3rem; font-size: 1rem; }
.swe__meldung { margin: .625rem 0 0; }
.swe__meldung:empty { display: none; }
.swe__meldung--ok { color: #1c871e; font-weight: 600; }
.swe__meldung--fehler { color: var(--swe-rot); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .swe__chip, .swe__segment span, .swe__logo-knopf { transition: background-color .15s ease, color .15s ease, border-color .15s ease; } }

/* Seitentext (Eigene Seite) direkt über dem Gestalter: bündig mit Überschrift und Gestalter statt schmal und mittig.
 * Das Theme setzt .link-content auf 56rem und zentriert den Container; hier gelten wieder die Container-Breiten
 * des Themes (swaags.css: 97vw / 720 / 960 / 1400 px), die Zeilenlänge bleibt linksbündig begrenzt. */
.container.link-content:has(+ .swe-rahmen) { max-width: 100%; }
@media (min-width: 576px) { .container.link-content:has(+ .swe-rahmen) { max-width: 97vw; } }
@media (min-width: 768px) { .container.link-content:has(+ .swe-rahmen) { max-width: 720px; } }
@media (min-width: 992px) { .container.link-content:has(+ .swe-rahmen) { max-width: 960px; } }
@media (min-width: 1300px) { .container.link-content:has(+ .swe-rahmen) { max-width: 1400px; } }
.container.link-content:has(+ .swe-rahmen) > * { max-width: 54rem; }
/* Vorgedruckt oder von der Waage gedruckt: Schraffur am Bildschirm, Legende unter dem Etikett */
.swe-flaeche--waage { fill: url(#swe-waage); }
.swe__legende { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0; font-size: .8125rem; color: var(--swe-grau); }
.swe__legende[hidden] { display: none; }
.swe__legende > span { display: inline-flex; align-items: center; gap: .375rem; }
.swe__muster { display: inline-block; width: 1rem; height: .75rem; border: 1px dashed #9fb0c5; border-radius: 2px; background: #fff; }
.swe__muster--waage { border-color: #e2a35c; background: repeating-linear-gradient(45deg, #fbe3c4 0 2px, #fff8ee 2px 5px); }
.swe__druck { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.swe__druck[hidden] { display: none; }
.swe__druck .swe__mini { font-size: .8125rem; font-weight: 600; }

/* Pflichtangaben (LMIV) als Chips: grün = vorhanden, orange = fehlt (Klick legt das Feld an) */
.swe__pflicht { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.swe__pflicht li { display: inline-flex; align-items: center; gap: .25rem; min-height: 2rem; padding: 0 .625rem; border-radius: 99rem; background: #e7f4e7; color: #155f16; font-size: .8125rem; font-weight: 600; }
.swe__pflicht li[hidden] { display: none; }
.swe__pflicht-name::before { content: "✓ "; }
.swe__pflicht li.fehlt { padding-right: .25rem; background: #fdf0d9; color: #7a4f00; }
.swe__pflicht li.fehlt .swe__pflicht-name::before { content: "! "; }
.swe__pflicht .swe__textknopf { min-height: 1.75rem; padding: 0 .5rem; border-radius: 99rem; background: #fff; color: var(--swe-blau); font-size: .75rem; text-decoration: none; }
.swe__pflicht .swe__textknopf[hidden] { display: none; }
.swe__vorlagen { margin-bottom: .25rem; }
.swe__meldung--warnung { color: #8a5a00; font-weight: 600; }

/* Gestaltung: fett/kursiv, Farbe, Ausrichten, Rückgängig */
.swe__fuss-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.swe__verlauf { display: inline-flex; gap: .25rem; }
.swe__verlauf .swe__mini { font-size: 1.125rem; font-weight: 600; }
.swe__stil, .swe__farbe, .swe__ausrichten { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin-top: .5rem; }
.swe__stil[hidden], .swe__farbe[hidden], .swe__ausrichten[hidden] { display: none; }
.swe .swe__stil .swe__schriftart { width: auto; min-width: 8.5rem; height: 2.25rem !important; min-height: 0 !important; padding-top: 0; padding-bottom: 0; font-size: .875rem; }
.swe__farbe-knopf { width: 1.625rem; height: 1.625rem; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c5d3e3; cursor: pointer; }
.swe__farbe-knopf[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--swe-blau); }
.swe__farbe-knopf:focus-visible { outline: 3px solid var(--swe-cyan); outline-offset: 2px; }
.swe__farbe-eigen { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; margin: 0 !important;
  border-radius: 50%; background: conic-gradient(#c00000, #e2711d, #f2c94c, #1c871e, #1ab4e7, #004f9f, #7a4f9f, #c00000); cursor: pointer; }
.swe__farbe-eigen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.swe__farbe-eigen span { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; color: var(--swe-navy); font-size: .75rem; font-weight: 800; line-height: 1; }
.swe__farbe-eigen:focus-within { outline: 3px solid var(--swe-cyan); outline-offset: 2px; }
@media (pointer: coarse) { .swe__farbe-knopf, .swe__farbe-eigen { width: 2.25rem; height: 2.25rem; } }

/* Datumsfelder: das Datum druckt immer die Waage – schraffiert und schwarz */
.swe-datum { color: #000 !important; font-style: normal; background: repeating-linear-gradient(45deg, #fbe3c4 0 2px, #fff8ee 2px 5px); box-shadow: 0 0 0 1px #f0c48f; border-radius: 1px; }
.swe-text.ist-waage .swe-datum { background: none; box-shadow: none; } /* ganzes Feld aus der Waage: Schraffur trägt das Feld */
.swe__mhd-arten { margin-top: .5rem; }
.swe__mhd-arten[hidden] { display: none; }
.swe__mhd-arten .swe__mini { font-size: .8125rem; font-weight: 600; }
.swe__druck-hinweis { flex-basis: 100%; margin: 0; font-size: .8125rem; color: var(--swe-grau); }
.swe__druck-hinweis[hidden] { display: none; }

/* QR-Code und Identitätskennzeichen im Bedienfeld */
.swe__qr-hinweis { margin: .5rem 0 0; }
.swe__idkz { margin: .5rem 0 0; }

/* Vorschau „so kommt die Rolle an“ */
.swe__vorschau-knopf { align-self: flex-start; min-height: 2.5rem; font-size: .875rem; }
.swe__vorschau { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.25rem; border: 0; border-radius: 1.25rem;
  background: #fff; color: var(--swe-text); box-shadow: 0 1.5rem 3rem rgba(11, 31, 58, .25); }
.swe__vorschau::backdrop { background: rgba(11, 31, 58, .45); }
.swe__vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.swe__vorschau-kopf h3 { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--swe-navy); }
.swe__vorschau-bild { display: flex; justify-content: center; padding: 1rem; border-radius: 1rem; background: var(--swe-flaeche); }
.swe__vorschau-bild svg { display: block; max-width: 100%; height: auto; }