/* ============================================================================
   GLAZIFY — Mandanten-CSS
   Richtung „Glasur": warme Neutraltöne, Jadegrün als einziger Akzent.

   Diese Datei wird als VORLETZTE Datei der Kaskade geladen (nur die
   Backend-layout.css kommt danach). Gleiche Spezifität wie der Master
   genügt deshalb — kein !important nötig, außer der Master setzt selbst
   welches.

   Quelle: <repo>/child/data/custom.css — nicht direkt am Server editieren.
   Dokumentation: docs/02-css-kaskade.md, docs/10-template-erkenntnisse.md
   ========================================================================== */

/* ---------------------------------------------------------------- 1 TOKENS */
:root {
  --gl-bg:         #F7F6F3;   /* Seitengrund, warmes Gebrochen-Weiß         */
  --gl-surface:    #EDEBE5;   /* abgesetzte Flächen, Topbar, Karten         */
  --gl-surface-2:  #E4E1D9;   /* eine Stufe tiefer                          */
  --gl-ink:        #16130F;   /* Text und dunkle Flächen                    */
  --gl-muted:      #7A736A;   /* Sekundärtext                               */
  --gl-muted-2:    #514A42;   /* Fließtext gedämpft                         */
  --gl-line:       #DED9D0;   /* Trennlinien                                */
  --gl-line-2:     #BCB4A8;   /* kräftigere Rahmen                          */
  --gl-accent:     #17604F;   /* Jadegrün — Links, primäre Aktionen         */
  --gl-accent-h:   #0F4739;   /* Hover                                      */
  --gl-accent-sub: #E7EFEB;   /* sehr helle Akzentfläche                    */
  --gl-on-dark:    #F1EFEA;   /* Text auf dunklem Grund                     */
  --gl-radius:     14px;
  --gl-radius-sm:  8px;
}

/* Reparatur: der Master kompiliert seine :root-Variablen kaputt
   (--color_font enthält wörtlich den String "$color_font").
   Siehe docs/02-css-kaskade.md, Abschnitt 3. */
:root {
  --color_font:       #16130F;
  --color_white:      #ffffff;
  --color_highlight:  #17604F;
  --color_dark:       #514A42;
  --color_light:      #BCB4A8;
  --color_success:    #17604F;
  --color_error:      #C0392B;
  --color_warning:    #B7791F;
  --color_gray:       #EDEBE5;
  --color_individual: #B7791F;
  --color_btn:        #17604F;
  --color_green:      #17604F;
  --color_logo_dark:  #16130F;
}

/* ------------------------------------------------------------ 2 GRUNDLAGEN */
body            { background: var(--gl-bg); color: var(--gl-ink); }
.highlight      { color: var(--gl-accent); }

a               { color: var(--gl-accent); }
a:hover         { color: var(--gl-accent-h); }
a::selection,
a::-moz-selection { background: var(--gl-accent); color: #fff; }

::-webkit-input-placeholder { color: var(--gl-muted); }
::-moz-input-placeholder    { color: var(--gl-muted); }
::-ms-input-placeholder     { color: var(--gl-muted); }
::input-placeholder         { color: var(--gl-muted); }

/* ------------------------------------------------------------- 3 TYPOGRAFIE
   Der Master benennt seine Schriften nach Rolle, nicht nach Namen:
       "regular"   = Roboto Light   — Fließtext, 175 Elemente
       "bold"      = Roboto Medium  — Hervorhebungen, 14 Elemente
       "extrabold" = Roboto Bold    — h1–h6 und .headline
   Weil das Familiennamen sind, lassen sie sich hier einfach neu belegen.
   Eine einzige Umdefinition wirkt dadurch auf den ganzen Shop, ohne dass
   ein einziger Selektor angefasst werden muss.

   Beide Schriften liegen als Variable Font im Child und werden NICHT von
   einem CDN geladen (Datenschutz + keine Fremdabhängigkeit). Lizenz:
   SIL Open Font License, kommerzielle Nutzung und Self-Hosting erlaubt.
   Als zweite Quelle steht die bisherige Roboto-Datei — fällt die neue
   Schrift aus, bleibt der Shop lesbar.

   WICHTIG — hier steckte eine Falle: Der Master setzt auf seinen
   Überschriften `font-weight: 100`. Eine @font-face mit fest verdrahtetem
   `font-weight: 800` wird dann NICHT ausgewählt; der Browser nimmt die
   Master-Datei, die mit 400 näher an 100 liegt. Deshalb decken die Faces
   hier den vollen Bereich `100 900` ab (Variable Fonts können das) und
   das gewünschte Gewicht wird auf den Elementen gesetzt. */
@font-face {
  font-family: "regular";
  src: url("../assets/font/inter-var.woff2") format("woff2"),
       url("../assets/font/roboto-light-webfont.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "bold";
  src: url("../assets/font/inter-var.woff2") format("woff2"),
       url("../assets/font/roboto-medium-webfont.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "extrabold";
  src: url("../assets/font/bricolage-grotesque-var.woff2") format("woff2"),
       url("../assets/font/Roboto-Bold.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* Rolle „extrabold" = Display. Exakt die Selektoren, die der Master mit
   dieser Familie belegt — ermittelt aus application(_pre).css. */
h1, h2, h3, h4, h5, h6, .headline, .h1, .h2, .h3, .h4, .h5, .h6,
.trade-groups .headline, .product-listing .headline,
.cd-dropdown-trigger                                  { font-weight: 600; }

/* Rolle „bold" = Hervorhebung. */
strong:not([class=headline]), b,
.cd-dropdown-content .cd-secondary-dropdown > li > a,
div .sidebar li a, section .sidebar li a,
.hint strong, .hint_msg strong, .error_msg strong,
header.main #service-bar span.label_tel,
header.main #service-bar span.label_mail,
header.main #customer-menu #login.modal fieldset label,
header.main #customer-menu #search.modal fieldset label,
footer.main i, footer.main i a,
#usp-bar.individualUSP span strong,
#product-detail #bulk .info .tooltip > strong:first-child,
#navbar a.topMenu,
.cart_breadcrumb li.active,
#cart_second #formular h3, #cart_second #formular .h3,
form:not([id=formular_reseller]) h2, form:not([id=formular_reseller]) h3,
form:not([id=formular_reseller]) h4, form:not([id=formular_reseller]) h5,
form:not([id=formular_reseller]) h6,
.rte_container strong,
#cart #total_price strong,
#cart tbody tr > th, #cart > tr > th,
#crop #total                                          { font-weight: 600; }

/* Eingabefelder nutzen im Master ebenfalls „bold" — dort reicht 500,
   sonst wirkt eingegebener Text zu schwer. */
form:not([id=formular_reseller]) input:not(.btn),
form:not([id=formular_reseller]) select,
form:not([id=formular_reseller]) .non-input-field,
form:not([id=formular_reseller]) textarea              { font-weight: 500; }

body, input, select, textarea, button { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-size: 15px; line-height: 1.6; }

h1, h2, h3, h4, h5, h6, .headline, .h1, .h2, .h3 {
  color: var(--gl-ink);
  letter-spacing: -.03em;
  /* Bricolage hat eine optische Größenachse — auf Display-Größe stellen */
  font-variation-settings: "opsz" 48;
}
h1, .h1 { line-height: 1.06; }
h2, .h2 { line-height: 1.12; }
h3, .h3 { line-height: 1.2; letter-spacing: -.02em; }
p       { color: var(--gl-muted-2); }

/* ---------------------------------------------------------------- 4 BUTTONS
   Rollentausch 1:1 zum Master:
     .btn          war Petrol   -> Jadegrün  (Standardaktion)
     .btn.success  war Magenta  -> Tiefschwarz (stärkster CTA, z.B. Upload)
   Dadurch bleibt die Hierarchie erhalten, die der Shop schon kennt. */
.btn {
  background: var(--gl-accent);
  color: #fff;
  border-radius: var(--gl-radius-sm);
  font-family: "bold", Helvetica, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: .01em;
  box-shadow: none;
}
.btn:hover, .btn.hover   { background: var(--gl-accent-h); border-color: var(--gl-accent-h); color: #fff; }
.btn:active, .btn.active { background: #0B3529; border-color: #0B3529; }
.btn:focus-visible       { outline: 2px solid var(--gl-ink); outline-offset: 2px; }

.btn.success             { background: var(--gl-ink); }
.btn.success:hover,
.btn.success.hover       { background: #000; }
.btn.success:active,
.btn.success.active      { background: #000; }
.btn.upload.finished     { background: var(--gl-ink); }

.btn.edit                { color: var(--gl-accent); }
.btn.edit:hover          { background: var(--gl-accent); color: #fff; }

.anim.loading            { border-color: var(--gl-line); border-top-color: var(--gl-accent); }
#preloader .anim.loading { border-color: var(--gl-line); border-top-color: var(--gl-accent); }

/* ----------------------------------------------------------------- 5 HEADER
   Achtung: application.css überschreibt application_pre.css beim selben
   Selektor. Der wirksame Wert der Topbar steht in application.css. */
header.main #service-bar        { background: var(--gl-surface); color: var(--gl-ink); border-bottom: 1px solid var(--gl-line); }
header.main #service-bar a,
header.main #service-bar span,
header.main #service-bar ul li,
header.main #service-bar ul li a { color: var(--gl-ink); }
header.main #service-bar span.label_tel,
header.main #service-bar span.label_mail        { color: var(--gl-ink); }
header.main #service-bar span.label_tel:before,
header.main #service-bar span.label_mail:before { color: var(--gl-muted); }

header.main #customer-menu a:hover,
header.main #customer-menu > button:hover       { color: var(--gl-accent); }
header.main #customer-menu a .count,
header.main #customer-menu > button .count      { background: var(--gl-accent); }
header.main #customer-menu #login.modal .btn,
header.main #customer-menu #search.modal .btn   { background: var(--gl-accent); }
header.main #customer-menu #login.modal a:hover,
header.main #customer-menu #login.modal button:hover,
header.main #customer-menu #search.modal a:hover,
header.main #customer-menu #search.modal button:hover { background: var(--gl-accent); }

/* ------------------------------------------------------------- 6 NAVIGATION */
#navbar { background: var(--gl-bg); border-bottom: 1px solid var(--gl-line); }
#navbar .wrp > ul > li a:hover,
#navbar .wrp > ul > li a .current { background: transparent; color: var(--gl-accent); }
#navbar .topMenu:hover            { color: var(--gl-accent); }
#navbar .service-menu div:hover,
#navbar_mega .service-menu div:hover,
#navbar_multi .service-menu div:hover           { color: var(--gl-accent); }
#navbar .service-menu ul li:hover a,
#navbar_mega .service-menu ul li:hover a,
#navbar_multi .service-menu ul li:hover a       { color: var(--gl-accent); }

.cd-dropdown-trigger              { color: var(--gl-ink); }
.cd-dropdown-trigger::before,
.cd-dropdown-trigger::after       { background: var(--gl-ink); }
.cd-dropdown-content .see-all a   { color: var(--gl-accent); }
.cd-dropdown-content a:hover      { color: var(--gl-accent); }

/* --------------------------------------------------------------- 7 FORMULARE */
form:not([id=formular_reseller]) input:not(.btn):focus,
form:not([id=formular_reseller]) select:focus,
form:not([id=formular_reseller]) .non-input-field:focus,
form:not([id=formular_reseller]) textarea:focus {
  border: solid 1px var(--gl-accent);
  color: var(--gl-ink);
  outline: none;
  box-shadow: 0 0 0 3px var(--gl-accent-sub);
}
form:not([id=formular_reseller]) .info:hover:before,
form:not([id=formular_reseller]) .info:focus:before { color: var(--gl-accent); }

/* ------------------------------------------------------- 8 LISTEN & KACHELN */
.breadcrumb li:last-child a,
.breadcrumb li:hover a            { color: var(--gl-accent); }

.pagination:not(.UserSavedDesigns) a,
.pagination:not(.UserSavedDesigns) .current       { background: var(--gl-accent); border-radius: var(--gl-radius-sm); }
.pagination:not(.UserSavedDesigns) a:hover,
.pagination:not(.UserSavedDesigns) .current:hover { background: var(--gl-accent-h); }

#related .item a                  { background: var(--gl-accent); }
#trade-blocks .card               { background: var(--gl-accent); border-radius: var(--gl-radius); }
.trade-groups .card em,
.product-listing .card em         { border: 1px solid var(--gl-line-2); color: var(--gl-ink); }

div .sidebar li a:hover,
section .sidebar li a:hover,
div .sidebar li.current a,
section .sidebar li.current a     { color: var(--gl-accent); }

/* --------------------------------------------------------- 9 DETAIL / PREIS */
#product-detail #total_block h1,
#product-detail #total_block h2,
#product-detail #total_block h3   { background: var(--gl-accent); border-radius: var(--gl-radius-sm) var(--gl-radius-sm) 0 0; }
#product-detail #delivery .icon:before,
#product-detail #weight .icon:before { color: var(--gl-accent); }
#product-detail #bulk             { background: var(--gl-surface); border-bottom: solid 1px var(--gl-line); }
#product_informations .tab        { background: var(--gl-surface); }
#cart strong, #cart h3, #cart h4, #cart h5, #cart h6 { color: var(--gl-ink); }
#cart #total_price                { color: var(--gl-accent); }
#cart_third_agb span              { color: var(--gl-accent); }
#calculator_preloader:before      { border-color: var(--gl-line); border-top-color: var(--gl-accent); }
.cnt_prn-table th,
.cnt_prn-table td:before          { color: var(--gl-ink); }

/* --------------------------------------------------------------- 10 SLIDER */
/* Der Hero-CTA. Achtung: drag_slider.css setzt in derselben Regel
   background-color:#b42b95 und color:white — beides muss hier mit
   überschrieben werden, sonst bleibt der Button magenta. */
.slide__text-link {
  background: var(--gl-accent); background-color: var(--gl-accent);
  color: #fff; border: 1px solid var(--gl-accent);
  font-family: "bold", system-ui, sans-serif; font-weight: 600;
  font-size: 17px; padding: .95rem 2rem;
  border-radius: var(--gl-radius); text-decoration: none;
}
.slide__text-link:hover           { background: var(--gl-accent-h); background-color: var(--gl-accent-h); border-color: var(--gl-accent-h); color: #fff; }
.slide__text-link:focus-visible   { outline: 2px solid var(--gl-ink); outline-offset: 3px; }

/* Überschrift und Text im Hero an die Glasur-Typografie angleichen */
.slide__text-heading { font-family: "extrabold", system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em; color: var(--gl-ink); }
.slide__text-desc    { color: var(--gl-muted-2); }
.slider-pagi__elem                { border: 1px solid var(--gl-accent); }
.slider-pagi__elem:before         { background: var(--gl-accent); }
#slider #controlNav a.current     { background: var(--gl-accent); border: solid 1px var(--gl-accent); }

/* ------------------------------------------------------ 11 USP / ARGUMENTE */
#payment-bar h3                   { color: var(--gl-ink); }

/* ------------------------------------------------------------------ 12 FUSS */
footer.main                       { background: var(--gl-ink); color: var(--gl-on-dark); }
footer.main > .wrp > nav li a:hover { color: #fff; }
#footer-bar                       { background: var(--gl-ink); border-top: 1px solid rgba(255,255,255,.12); }
#footer-product-nav_toggle        { background: var(--gl-surface); color: var(--gl-ink); }

/* Nach-oben-Button: lag im Master mitten im USP-Band und hat Text verdeckt.
   Wird hier fest unten rechts verankert und aus dem Textfluss genommen. */
#totop                            { position: fixed; right: 24px; bottom: 24px; left: auto; top: auto; z-index: 60; margin: 0; }
#totop a:before                   { background: var(--gl-accent); border-radius: var(--gl-radius-sm); }
#totop a:hover:before             { background: var(--gl-accent-h); }

/* -------------------------------------------------------------- 13 HINWEISE */
.hint.message.success,
.hint_msg.message.success          { background: var(--gl-accent-sub); }
.climate .climateItem .accHead h3  { color: var(--gl-ink); }
.rte_container a                   { color: var(--gl-accent) !important; }

/* ------------------------------------------------- 14 KALTE FLÄCHEN WÄRMEN
   Der Master benutzt durchgehend ein bläuliches Weiß als Flächenfarbe
   (#f9fbff, 62 Vorkommen) plus die kalten Blautöne #c6d9ff, #dfeaff und
   #adc8ff. Ohne diese Umsetzung bleibt der Shop trotz warmer Akzente
   insgesamt kühl. Zuordnung:
       #f9fbff  Fläche     -> --gl-surface  (Bänder) bzw. #fff (Eingaben)
       #c6d9ff  Rahmen     -> --gl-line
       #dfeaff  Fläche     -> --gl-surface-2
       #adc8ff  Platzhalter-> --gl-muted / --gl-line-2                     */

/* Seitenbänder und Sektionsflächen */
.trade-groups, .product-listing,
#product-detail,
#usp-bar,
#delivery_countdown,
#upload, #uploadcheck, #contact, #address, #summary, #order_sample,
#cart_first, #register, #calculator,
.cat_listing article header,
#popup_offer section, #popup_recommend section { background: var(--gl-surface); }

ul.link_list li                    { background: var(--gl-surface); }
#configurator h1                   { background: var(--gl-surface); border-bottom: solid 1px var(--gl-line); }

/* Tabellenflächen */
.cat_listing article .content table td               { background: var(--gl-bg); }
.cat_listing article .content table tr:nth-child(odd) td { background: var(--gl-surface); }
#cart .product_calculation td,
#cart #total_netto td              { background: var(--gl-surface); }
#cart #total_price                 { background: var(--gl-surface); }
.cnt_prn-table tr                  { border-color: var(--gl-line); }

/* Rahmen und Trennlinien */
#ds_popup,
#opc_image,
#uploadcheck #upload_data figure img,
#crop .crop_image img              { border-color: var(--gl-line); }
#related .item img,
#product-detail #total_block li strong { border-bottom-color: var(--gl-line); }
#product_informations .tab         { border: solid 1px var(--gl-line); background: var(--gl-surface-2); }
#product_informations .content     { border: solid 1px var(--gl-line); }
#product-detail #bulk              { background: var(--gl-surface); border-bottom-color: var(--gl-line); }

/* Eingabefelder: heller als der Grund, damit sie als Feld lesbar bleiben */
form:not([id=formular_reseller]) input:not(.btn),
form:not([id=formular_reseller]) select,
form:not([id=formular_reseller]) .non-input-field,
form:not([id=formular_reseller]) textarea,
form.search input                  { background: #fff; border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm); color: var(--gl-ink); }
form:not([id=formular_reseller]) input:not(.btn):hover,
form:not([id=formular_reseller]) select:hover { background-color: #fff; border-color: var(--gl-muted); }
form:not([id=formular_reseller]) select        { background: url("../assets/elements_select.png") no-repeat 98% center #fff; }

.btn.disabled,
.btn.disabled:hover, .btn.disabled:active, .btn.disabled:focus {
  background: var(--gl-surface); border: solid 1px var(--gl-line-2); color: var(--gl-muted);
}
.btn.upload                        { border: solid 1px var(--gl-line-2); }

/* Hinweisboxen */
.hint.message, .hint_msg.message   { background: var(--gl-surface); border: solid 1px var(--gl-line); border-radius: var(--gl-radius-sm); }

/* Navigations-Hover */
#navbar .wrp > ul > li:first-child:hover,
#navbar .wrp > ul > li:hover ul,
#navbar .wrp > ul > li:hover ul > li:hover ul li a,
#navbar .service-menu div:hover,
#navbar .service-menu ul           { background: var(--gl-surface); }

/* Der Login-Aufklapper wird in Abschnitt 37.3 vollstaendig neu gefasst;
   die beige Flaeche auf `fieldset`, `a` und `button` stammte noch aus der
   ersten Farbumstellung und liess Beschriftung und Verweise wie
   Schaltflaechen aussehen. Nur die Suche behaelt sie. */
header.main #customer-menu #search.modal fieldset { background: var(--gl-surface); }

/* -------------------------------------------- 15 WARENGRUPPEN-INHALTE
   Die Texte kommen aus dem Backend (Warengruppe → Details → description
   bis description5). CKEditor behält eigene Klassen und <div>s, wickelt
   den Inhalt aber zusätzlich in <div class="rte_container">.
   Layout des Masters: description = volle Breite in .hint.message,
   description2/3 = zweispaltig (.col_left / .col_right),
   description4/5 = wieder volle Breite. */

section.description                { padding-block: clamp(2rem, 5vw, 3.5rem); }
section.description .rte_container { max-width: 62ch; }
section.description.col_left,
section.description.col_right      { background: transparent; }

/* Einleitung: als Fließtext lesen, nicht als Hinweiskasten */
section.description.wrp .hint.message {
  background: transparent; border: 0; padding: 0;
  border-left: 2px solid var(--gl-accent); padding-left: 1.5rem;
}
.gl-intro p {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55; color: var(--gl-ink); margin: 0; max-width: 60ch;
}

.gl-col h3 {
  font-size: 1.375rem; margin: 0 0 1.25rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--gl-line);
}

/* Ablauf: hier tragen Zahlen echte Information — es ist eine Reihenfolge.
   Der Master setzt list-style auf square zurück, daher eigene Zähler. */
ol.gl-steps            { list-style: none; counter-reset: gl; margin: 0; padding: 0; }
ol.gl-steps > li       { counter-increment: gl; position: relative; padding-left: 3rem; margin-bottom: 1.5rem; line-height: 1.55; color: var(--gl-muted-2); }
ol.gl-steps > li::before {
  content: counter(gl); position: absolute; left: 0; top: -.1em;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gl-accent); color: #fff;
  font-family: "bold", system-ui, sans-serif; font-weight: 600; font-size: .875rem;
}
ol.gl-steps > li strong { color: var(--gl-ink); font-weight: 600; }

/* Faktenliste: schlichte Häkchen statt Quadrate */
ul.gl-facts            { list-style: none; margin: 0; padding: 0; }
ul.gl-facts > li       { position: relative; padding-left: 1.75rem; margin-bottom: .875rem; line-height: 1.55; color: var(--gl-muted-2); }
ul.gl-facts > li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gl-accent);
}

.gl-textlink           { color: var(--gl-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.gl-textlink:hover     { color: var(--gl-accent-h); }

/* Kopfstreifen der Kategorie: fester Zuschnitt, kein Verzerren */
/* Kopfstreifen der Warengruppe. 110-170 px war zu wenig: das Bild wurde
   auf einen Streifen zusammengeschnitten, auf dem nichts mehr zu
   erkennen war. Dawn gibt der Sammlung ein richtiges Band. Passend
   dazu liegen die Bilder jetzt in 1920x640 statt 1920x150 vor. */
header.headline img    { width: 100%; height: clamp(180px, 22vw, 320px); object-fit: cover; display: block; }

@media screen and (max-width: 900px) {
  section.description.col_left,
  section.description.col_right { width: 100%; float: none; }
}

/* ------------------------------------ 16 ARTIKEL- UND KALKULATIONSSEITE
   Der Shop läuft auf `detailPageLayout = optische Kalkulation` mit
   `defaultOptical = Expertenansicht` (Backend → Template-Einstellungen →
   Layout → Kalkulationsseite). Markup: <main id="visual_calculation">
   mit .contentwrapper.left (Optionen) und .contentwrapper.right (Preis).

   Achtung: 48 Markenfarb-Regeln der Detailseite stehen im Master **innerhalb
   von @media screen**. Media Queries erhöhen die Spezifität nicht — eine
   normale Regel hier gewinnt trotzdem, weil custom.css später lädt.

   Farbsystem hier: Überschriften = Tinte, Preise und Termine = Jade,
   interaktive Zustände = Jade. */

/* --- Rahmen und Flächen --- */
#visual_calculation .contentwrapper.left,
#visual_calculation .contentwrapper.right {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
}
#visual_calculation .contentwrapper.left .head .text h1,
#visual_calculation .contentwrapper.left .optionGroup h2 { color: var(--gl-ink); }

/* --- Preisblock --- */
#visual_calculation .contentwrapper.right .row.total span   { color: var(--gl-accent); }
#visual_calculation .contentwrapper.right .row span.donation { color: var(--gl-muted); }
#visual_calculation .contentwrapper.right #delivery .content .date,
#visual_calculation .contentwrapper.right #delivery .content .weight { color: var(--gl-accent); }
#product-detail #total_block h1,
#product-detail #total_block h2,
#product-detail #total_block h3 { background: var(--gl-accent); }
#product-detail #total_block li.total.gross { color: var(--gl-accent); }
#product-detail #total_block li.discount *  { color: var(--gl-muted); }
#product-detail #delivery .icon:before,
#product-detail #weight .icon:before        { color: var(--gl-accent); }
form:not([id=formular_reseller]) table tr.total { color: var(--gl-accent); }

/* --- Optionen: Berechnen-Knöpfe, aktive Zustände --- */
/* Der Berechnen-Knopf wird abschliessend in Abschnitt 37.13 gefasst.
   Frueher standen hier eigene Regeln; sie wurden entfernt, weil sich
   ueber vier Runden sechs ueberlappende Saetze angesammelt hatten. */
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .btnDelete:hover { border-color: var(--gl-accent); }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.active,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions .conOptions.active,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-content fieldset label.active,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-item .selectOptions .conOptions.active {
  border-color: var(--gl-accent); color: var(--gl-accent);
}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .optionGroupCon,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions .conOptions { border-color: var(--gl-line-2); }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .optionGroupCon ul li.focus,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .optionGroupCon ul li:hover,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-item .optionGroupCon ul li.focus,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-item .optionGroupCon ul li:hover { background: var(--gl-accent); }
#visual_calculation.expert .contentwrapper.left .accordion .accordion-item .optionGroupCon ul li.selected { color: var(--gl-accent); }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions .conOptions .flex-container .panel.focus .hoverOverlay,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-item .selectOptions .conOptions .flex-container .panel.focus .hoverOverlay { background-color: var(--gl-accent); }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions .conOptions .flex-container .panel.selected,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-item .selectOptions .conOptions .flex-container .panel.selected { border-color: var(--gl-accent); }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper .zusTextCon .zusTextCover { color: var(--gl-ink); }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview tbody tr:hover td:not(:first-of-type),
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview tbody tr:focus td:not(:first-of-type),
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper #priceTable #priceOverview tbody tr:active td:not(:first-of-type) {
  color: var(--gl-accent); text-shadow: none;
}

/* --- Expertenansicht: Akkordeon --- */
#visual_calculation.expert .contentwrapper.left .accordion button:hover,
#visual_calculation.expert .contentwrapper.left .accordion button:focus,
#visual_calculation.expert .contentwrapper.left .accordion button[aria-expanded=true] { color: var(--gl-accent); }
#visual_calculation.expert .contentwrapper.left .accordion button:hover::after,
#visual_calculation.expert .contentwrapper.left .accordion button:focus::after { color: var(--gl-accent); border-color: var(--gl-accent); }
#visual_calculation.expert .contentwrapper.left .accordion button .icon::before,
#visual_calculation.expert .contentwrapper.left .accordion button .icon::after { background: var(--gl-accent); }
#visual_calculation.expert .contentwrapper.left .accordion button .counter { background: var(--gl-accent); border-color: var(--gl-accent); }
#visual_calculation.expert .contentwrapper.left .accordion button .accordion-title strong { color: var(--gl-ink); }

/* --- Upload --- */
#upload .upload_field .btn { background: var(--gl-accent); }
#upload .fileuploader-theme-dragdrop .fileuploader-input .fileuploader-icon-main:before,
#upload .fileuploader > div.fileuploader-progressbar.active { background-color: var(--gl-accent); }

/* --- Reseller-Formular ist vom Formular-Reset ausgenommen, daher separat --- */
#formular_reseller input:not(.btn):focus,
#formular_reseller select:focus,
#formular_reseller textarea:focus { border-color: var(--gl-accent); outline: none; box-shadow: 0 0 0 3px var(--gl-accent-sub); }

/* ------------------------------------------------------------- 17 RESPONSIV
   Der Master arbeitet ausschließlich mit max-width, größter Breakpoint 1280. */
@media screen and (max-width: 1280px) {
  #offcanvas header #offcanvas_close { background: var(--gl-accent); border-color: var(--gl-accent); }
  #offcanvas .btn                    { background: var(--gl-accent) !important; }
}
@media screen and (max-width: 500px) {
  #product_informations .tab.current { color: var(--gl-accent); }
}

/* ============================================================================
   18 DAWN-FEINSCHLIFF
   Ziel ist Shopify Dawn: viel Luft, Haarlinien statt Flächen, ruhige
   Typografie, weiche Radien, ein einziger Akzent.
   Dieser Abschnitt steht bewusst am Ende — er darf alles davor korrigieren.
   ========================================================================== */

/* --- 18.1 Rhythmus ------------------------------------------------------
   ACHTUNG: Der Master rechnet mit einer festen .wrp-Breite von 1150 px und
   float-basierten Spalten. Eine globale Änderung von `.wrp { width }` oder
   ein pauschaler `padding-block` auf `main > *` zerlegt das Raster —
   Service-Menü rutscht in die zweite Zeile, die USP-Spalten laufen
   ineinander. Deshalb hier nur gezielte Abstände, keine Breiten. */
#usp-bar              { padding-block: clamp(2rem, 4vw, 3rem); }

/* --- 18.2 Typografie ----------------------------------------------------- */
h1, .h1               { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.025em; }
h2, .h2               { font-size: clamp(1.45rem, 2.4vw, 2rem); }
h3, .h3               { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h1, h2, h3, h4, h5, h6, .headline { font-variation-settings: "opsz" 36; }

/* Kleine Auszeichnungen bekommen Dawns weite Sperrung */
header.main #service-bar,
.breadcrumb,
.cart_breadcrumb li,
#payment-bar h3 {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
}
header.main #service-bar span,
header.main #service-bar ul li a { font-size: .75rem; letter-spacing: .09em; }

/* --- 18.3 Navigation ----------------------------------------------------- */
#navbar               { background: var(--gl-bg); border-bottom: 1px solid var(--gl-line); }
#navbar .wrp > ul > li > a,
#navbar .wrp > ul > li           { position: relative; }
#navbar .wrp > ul > li > a,
#navbar > .wrp > ul > li:first-child {
  padding: 1.1rem .95rem; font-size: .9375rem; letter-spacing: .01em; color: var(--gl-ink);
}
/* Hover: feine Linie statt Farbfläche */
#navbar .wrp > ul > li > a::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .85rem;
  height: 1px; background: var(--gl-ink); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
#navbar .wrp > ul > li > a:hover::after { transform: scaleX(1); }
#navbar .wrp > ul > li > a:hover,
#navbar .wrp > ul > li:first-child:hover { background: transparent; color: var(--gl-ink); }

/* Aufklappmenü als schwebende Karte */
#navbar .wrp > ul > li:hover ul {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  box-shadow: 0 18px 44px -22px rgba(22,19,15,.28); padding: .5rem; margin-top: -2px;
  overflow: hidden;
}
#navbar .wrp > ul > li:hover ul > li > a {
  padding: .7rem .9rem; border-radius: var(--gl-radius-sm); color: var(--gl-ink);
}
#navbar .wrp > ul > li:hover ul > li > a:hover { background: var(--gl-surface); color: var(--gl-accent); }
#navbar .wrp > ul > li:hover ul > li:hover ul li a { background: #fff; }
#navbar .service-menu ul {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  box-shadow: 0 18px 44px -22px rgba(22,19,15,.28); padding: .5rem; overflow: hidden;
}
#navbar .service-menu ul li a { padding: .7rem .9rem; border-radius: var(--gl-radius-sm); display: block; }
#navbar .service-menu ul li:hover a { background: var(--gl-surface); color: var(--gl-accent); }

/* --- 18.4 Kundenmenü: Label lag über dem Symbol -------------------------- */
header.main #customer-menu                      { display: flex; align-items: center; gap: .35rem; }
header.main #customer-menu .menu-item-login,
header.main #customer-menu .menu-item-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 0;
  transition: background .18s ease;
}
header.main #customer-menu .menu-item-login:hover,
header.main #customer-menu .menu-item-cart:hover { background: var(--gl-surface); }
/* Das Textlabel des Anmelde-Buttons ist nur für Screenreader gedacht */
header.main #customer-menu .menu-item-login > span:not(.count) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
header.main #customer-menu .count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--gl-accent); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}

/* --- 18.5 Modale als schwebende Karte ------------------------------------ */
header.main #customer-menu .modal {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  box-shadow: 0 26px 60px -26px rgba(22,19,15,.34); padding: 1.25rem; overflow: hidden;
}
header.main #customer-menu .modal fieldset {
  background: transparent; display: block; margin-bottom: .9rem;
}
header.main #customer-menu .modal fieldset label {
  display: block; text-align: left; margin-bottom: .35rem;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-muted);
}
header.main #customer-menu .modal input:not(.btn) {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem;
}
header.main #customer-menu .modal .btn { width: 100%; margin: .25rem 0 .75rem; }
header.main #customer-menu .modal a {
  display: block; background: transparent; color: var(--gl-muted-2);
  padding: .45rem .1rem; border-radius: var(--gl-radius-sm); font-size: .9rem;
}
header.main #customer-menu .modal a:hover { background: transparent; color: var(--gl-accent); text-decoration: underline; }

/* --- 18.6 Formularfelder überall gleich ---------------------------------- */
input:not([type=checkbox]):not([type=radio]):not(.btn),
select, textarea, .non-input-field {
  border-radius: var(--gl-radius-sm);
  border: 1px solid var(--gl-line-2);
  background: #fff;
  padding: .7rem .85rem;
  font-family: "regular", system-ui, sans-serif;
  font-size: .9375rem;
  color: var(--gl-ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--gl-accent); box-shadow: 0 0 0 3px var(--gl-accent-sub);
}
/* Auch das Reseller-Formular, das der Master vom Reset ausnimmt */
#formular_reseller input:not(.btn),
#formular_reseller select,
#formular_reseller textarea {
  border-radius: var(--gl-radius-sm); border: 1px solid var(--gl-line-2);
  background: #fff; padding: .7rem .85rem;
}

/* --- 18.7 Schritte im Bestellweg: Text statt Farbbalken ------------------ */
.cart_breadcrumb            { display: flex; gap: 0; border-bottom: 1px solid var(--gl-line); margin-bottom: 2.5rem; background: transparent; }
.cart_breadcrumb li {
  background: transparent !important; color: var(--gl-muted);
  padding: 1rem 1.25rem; border: 0; border-bottom: 2px solid transparent;
  font-weight: 500;
}
.cart_breadcrumb li.active   { background: transparent !important; color: var(--gl-ink); border-bottom-color: var(--gl-accent); }
.cart_breadcrumb li.disabled { background: transparent !important; color: var(--gl-line-2); }
.cart_breadcrumb li a        { color: inherit; }

/* --- 18.8 Warenkorb und Kasse: Haarlinien statt Grauflächen -------------- */
#cart, #cart_second, #cart_third            { background: transparent; }
#cart table                                  { border-collapse: collapse; }
/* box-sizing ist hier wichtig: Der Master gibt den Spalten feste Breiten
   (370/240/140 px). Ohne border-box addiert sich der Innenabstand darauf,
   die Tabelle wird zu breit und der rechte Infokasten fällt darunter. */
#cart table td, #cart table th               { box-sizing: border-box; background: transparent !important; border-bottom: 1px solid var(--gl-line); padding: 1rem .75rem; }
#cart tbody tr > th, #cart > tr > th         { color: var(--gl-muted); font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
#cart .product_calculation td                { background: transparent !important; }
#cart #total_price                           { background: transparent !important; color: var(--gl-accent); font-size: 1.5rem; }
#cart #total_netto td                        { background: transparent !important; }
#cart tr.total td, #cart tr.total th         { border-top: 1px solid var(--gl-ink); border-bottom: 0; }

/* Die Infobox rechts */
#cart_secure, .cart_secure, #cart aside, #cart .secure {
  background: var(--gl-surface); border: 0; border-radius: var(--gl-radius);
  padding: 1.5rem; color: var(--gl-muted-2);
}

/* --- 18.9 Kanten weicher --------------------------------------------------*/
.trade-groups .card, .product-listing .card,
#related .item, .line, .modal, .hint, .hint_msg { border-radius: var(--gl-radius); }
.trade-groups .card img, .product-listing .card img { border-radius: var(--gl-radius-sm); }
#totop a:before       { border-radius: 50%; }

/* --- 18.10 Bewegung nur, wo sie hilft ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 18.11 Korrekturen aus der Sichtprüfung ------------------------------ */

/* Die Schrittleiste ist selbst ein .wrp und hatte dadurch 72 px Innenabstand
   aus Regel 18.1 bekommen — dadurch klaffte eine große Lücke. */
.wrp.cart_breadcrumb  { padding-block: 0; margin-bottom: 2rem; }

/* Zahlungsleiste bleibt leer, solange keine Zahlungs-Icons hinterlegt sind */
#payment-bar:not(:has(img)) { display: none; }

/* Infokasten neben dem Warenkorb: warme Fläche statt weißem Kasten mit
   Wasserzeichen-Grafik */
aside#sidebar {
  /* border-box, sonst addiert sich der Innenabstand auf die feste Breite
     des Masters und der Kasten passt nicht mehr neben die Tabelle. */
  box-sizing: border-box;
  background: var(--gl-surface); border: 0; border-radius: var(--gl-radius);
  padding: 1.5rem; background-image: none;
}
aside#sidebar section          { background: transparent; background-image: none; border: 0; padding: 0; }
aside#sidebar h1, aside#sidebar h2, aside#sidebar h3, aside#sidebar h4 {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gl-muted); margin: 0 0 .75rem;
}
aside#sidebar p                { color: var(--gl-muted-2); font-size: .875rem; line-height: 1.6; margin: 0; }
aside#sidebar section:empty    { display: none; }

/* Warenkorb-Tabelle: Kartenrahmen weglassen, Haarlinien reichen */
#cart table                    { background: transparent; border: 0; }
#cart .product_calculation     { background: transparent; }

/* --- 18.12 Nachzieher aus der zweiten Sichtprüfung ----------------------- */

/* Warenkorb-Symbol trug noch die Master-Fläche #466e84 */
header.main #customer-menu a.menu-item-cart,
header.main #customer-menu a.menu-item-cart.active { background: transparent; }
header.main #customer-menu a.menu-item-cart:hover  { background: var(--gl-surface); }

/* Das Wasserzeichen sitzt als Hintergrundbild auf der <section> im Sidebar.
   Die Master-Regel hat zwei IDs, deshalb hier ebenfalls zwei. */
/* Die Master-Regel lautet `#cart #sidebar section:first-child` — zwei IDs
   plus Pseudoklasse. Ohne `:first-child` verliert der eigene Selektor. */
#cart aside#sidebar section,
#cart aside#sidebar section:first-child,
#cart_second aside#sidebar section,
#cart_second aside#sidebar section:first-child,
#cart_third aside#sidebar section,
#cart_third aside#sidebar section:first-child {
  background: transparent; background-image: none; border: 0; padding: 0;
}
#cart aside#sidebar section.cf:empty,
#cart aside#sidebar section:not(:has(*)):empty { display: none; }

/* Die Spaltentrenner der Warenkorbtabelle sind 6 px weiße Rahmen — im warmen
   Layout wirken sie wie Löcher. Die Master-Regeln adressieren die Spalten
   einzeln über :first-child und :nth-child, deshalb hier genauso. */
#cart tbody tr th:first-child,  #cart tbody tr > td:first-child,
#cart tbody tr th:nth-child(2), #cart tbody tr > td:nth-child(2),
#cart tbody tr th:nth-child(3), #cart tbody tr > td:nth-child(3) {
  border-right: 0; padding-right: .75rem;
}

/* ============================================================================
   19 MOBILER HERO
   Der Master entfernt den Startseiten-Slider auf kleinen Bildschirmen gleich
   doppelt: per JavaScript im Block `slider-js` (überschrieben in
   child/index.htm) und per CSS in drag_slider.css:

       @media (max-width: 600px) { .slider-container { display: none } }

   Damit wäre der zentrale Handlungsaufruf genau dort unsichtbar, wo die
   meisten Besucher ankommen. Hier wird stattdessen gestapelt: Bild oben,
   Text und Schaltfläche darunter.

   Das Slider-Layout arbeitet mit absoluter Positionierung und einem
   diagonalen SVG-Overlay. Beides ergibt auf schmalen Bildschirmen keinen
   Sinn und wird aufgelöst.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .slider-container            { display: block; height: auto; padding: 0; }
  .slider                      { height: auto; }
  .slide                       { position: relative; height: auto; }
  .slide__content              { position: relative; height: auto; }
  .slide__overlay              { display: none; }

  /* Bild als eigener Block statt als absoluter Hintergrund */
  .slide__bg {
    position: relative; left: 0; top: 0; width: 100%; height: auto;
    margin-left: 0 !important; aspect-ratio: 16 / 10;
    background-size: cover; background-position: center;
  }

  /* Text darunter, dunkel auf hellem Grund */
  .slide.active .slide__text,
  .slide__text {
    position: relative; left: 0; bottom: auto; width: 100%; max-width: none;
    height: auto; margin-left: 0; transform: none;
    display: block; color: var(--gl-ink);
    background: var(--gl-surface);
    padding: 1.75rem 1.25rem 2rem;
    opacity: 1;
  }
  .slide__text-heading {
    display: block; font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.1; margin-bottom: .75rem; color: var(--gl-ink);
  }
  .slide__text-desc    { font-size: 1rem; line-height: 1.55; margin-bottom: 1.5rem; color: var(--gl-muted-2); max-width: 42ch; }
  .slide__text-link    { display: inline-flex; align-items: center; }

  /* Pfeile nur bei EINEM Slide ausblenden — siehe Abschnitt 48. */
  .slider-container:not(:has(.slide-1)) .slider-control { display: none; }
  .slider-pagi         { position: static; transform: none; padding: .75rem 0 0; text-align: center; }
}

/* Vier Verkaufsargumente stapeln statt nebeneinander quetschen */
@media screen and (max-width: 767px) {
  #usp-bar .wrp        { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  #usp-bar .wrp > *    { width: auto !important; float: none !important; margin: 0 !important; }
}
@media screen and (max-width: 480px) {
  #usp-bar .wrp        { grid-template-columns: 1fr; }
}

/* --- 19.1 Nachbesserungen mobil ----------------------------------------- */
@media screen and (max-width: 991px) {
  /* Ohne border-box addiert sich der Innenabstand auf die volle Breite,
     der Text lief rechts aus dem Bild. */
  .slide__text          { box-sizing: border-box; max-width: 100%; }
  /* Bei einem einzigen Slide braucht es keine Punktnavigation — sie stand
     außerdem vor dem Bild im Quelltext und landete dadurch über dem Kopf. */
  .slider-pagi:not(:has(li + li)) { display: none; }
}

/* Die vier Argumente liegen als <span> in einem .individualUSP-Container */
@media screen and (max-width: 767px) {
  #usp-bar .wrp .individualUSP {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem;
    width: 100%; float: none;
  }
  #usp-bar .wrp .individualUSP > span {
    width: auto !important; float: none !important; margin: 0 !important;
    display: block; text-align: left;
  }
  #usp-bar .wrp .individualUSP > span p      { margin: 0; text-align: left; }
  #usp-bar .wrp .individualUSP > span strong { display: block; margin-bottom: .35rem; color: var(--gl-ink); }
}
@media screen and (max-width: 480px) {
  #usp-bar .wrp .individualUSP { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- 19.2 Kopfbereich mobil --------------------------------------------- */
@media screen and (max-width: 991px) {
  header.main            { height: auto; margin-bottom: 0; }
  header.main > .wrp     { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; }
  header.main #brand-logo { flex: 0 1 auto; }
  header.main #brand-logo img { max-height: 34px; width: auto; }
  header.main #customer-menu {
    position: static; float: none; width: auto; height: auto;
    display: flex; align-items: center; gap: .15rem; margin: 0;
  }
  header.main #customer-menu .menu-item-login,
  header.main #customer-menu .menu-item-cart { width: 40px; height: 40px; }
}

/* Die USP-Kacheln haben im Master eine feste Höhe von 210 px — Platz für
   Icons, die hier bewusst nicht hochgeladen sind. Ohne Icon bleibt davon
   nur Leerraum. */
#usp-bar .wrp .individualUSP > span { min-height: 0; height: auto; }
@media screen and (max-width: 767px) {
  #usp-bar .wrp .individualUSP > span { min-height: 0; height: auto; }
}

/* ============================================================================
   20 SYSTEM — Typo-Skala, Flächen, Formulare
   Bis hierher wurde punktuell korrigiert. Das Ergebnis waren zu viele
   Schriftgrößen und Flächen ohne gemeinsame Sprache. Dieser Abschnitt legt
   ein System fest und wendet es auf alle Seiten an.

   Skala (Verhältnis ~1.25):
     xs  12px  Kleinversalien, Tabellenköpfe, Fußnoten
     sm  14px  Sekundärtext, Formularhilfen
     md  16px  Fließtext, Formularinhalte
     lg  20px  Zwischenüberschrift
     xl  28px  Seitenüberschrift
     2xl 44px  Hero

   Flächen: genau zwei Ebenen — Seite (--gl-bg) und Karte (weiß, 1 px Linie,
   14 px Radius). Keine dritte Ebene, keine Schatten außer bei Überlagerungen.
   ========================================================================== */
:root {
  --gl-fs-xs:  .75rem;
  --gl-fs-sm:  .875rem;
  --gl-fs-md:  1rem;
  --gl-fs-lg:  1.25rem;
  --gl-fs-xl:  1.75rem;
  --gl-fs-2xl: clamp(2rem, 4vw, 2.75rem);
  --gl-pad-card: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* --- 20.1 Typo-Skala durchsetzen ---------------------------------------- */
body, p, li, td, label, input, select, textarea, button, a { font-size: var(--gl-fs-md); }
small, .small, sub, sup                         { font-size: var(--gl-fs-xs); }

h1, .h1                     { font-size: var(--gl-fs-xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 1.25rem; }
h2, .h2                     { font-size: var(--gl-fs-lg); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 1rem; }
h3, .h3, h4, h5, h6         { font-size: var(--gl-fs-md); font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 0 0 .75rem; }

/* Kleinversalien-Rolle: Tabellenköpfe, Schrittleiste, Kastenüberschriften */
.cart_breadcrumb li,
#cart tbody tr > th, #cart > tr > th,
aside#sidebar h1, aside#sidebar h2, aside#sidebar h3, aside#sidebar h4,
.contentwrapper.right h2, #delivery h3, #total_block h2 {
  font-size: var(--gl-fs-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gl-muted);
}

/* --- 20.2 Karten: genau eine Sprache ------------------------------------ */
#cart .cart_table_wrap,
#cart_second form, #cart_third form,
#konto_index section, #address form, #register form,
#visual_calculation .contentwrapper.left,
#visual_calculation .contentwrapper.right,
aside#sidebar {
  background: #fff;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius);
  padding: var(--gl-pad-card);
  box-sizing: border-box;
  box-shadow: none;
}
/* Der Sidebar bleibt die ruhige Variante */
aside#sidebar { background: var(--gl-surface); border-color: transparent; }

/* Die rechte Preisspalte hatte padding:0, ihre Abschnitte brachten eigene
   Abstände mit — dadurch stimmten die Fluchten zur linken Karte nicht. */
#visual_calculation .contentwrapper.right > section { padding: 0; margin: 0 0 1.5rem; }
#visual_calculation .contentwrapper.right > section:last-child { margin-bottom: 0; }
#visual_calculation .contentwrapper.left  { padding: var(--gl-pad-card); }

/* --- 20.3 Formulare: ein Feld, ein Rahmen -------------------------------
   Der Master wickelt Eingaben in <label class="input">, das selbst Rahmen und
   Hintergrund trägt. Wer zusätzlich das <input> rahmt, bekommt zwei Kästen
   ineinander. Also: das Label ist das Feld, das Input ist nackt. */
label.input,
.non-input-field {
  display: block; box-sizing: border-box; width: 100%;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  background: #fff; padding: 0; overflow: hidden;
}
label.input > input,
label.input > select,
label.input > textarea {
  display: block; width: 100%; box-sizing: border-box;
  border: 0 !important; background: transparent !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: .7rem .85rem; font-size: var(--gl-fs-md); color: var(--gl-ink);
}
label.input:focus-within { border-color: var(--gl-accent); box-shadow: 0 0 0 3px var(--gl-accent-sub); }
label.input > input:focus, label.input > input:focus-visible { outline: none; }

/* Auswahlfelder: das Master-PNG ist ein cyanfarbener Pfeil und passt zu
   nichts. Ersetzt durch ein Chevron in Textfarbe. */
select,
form:not([id=formular_reseller]) select,
#formular_reseller select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316130F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  background-size: 14px 9px !important;
  background-color: #fff !important;
  padding-right: 2.4rem;
}
label.input > select { background-color: transparent !important; }

/* Beschriftungen links, nicht rechtsbündig wie 2005 */
#cart_second form label:not(.input),
#cart_third form label:not(.input),
#address form label:not(.input),
#register form label:not(.input),
form:not([id=formular_reseller]) label:not(.input) {
  display: block; text-align: left;
  font-size: var(--gl-fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gl-muted); font-weight: 600; margin-bottom: .35rem;
}

/* --- 20.4 Runde 1: Reste aus der systematischen Prüfung ------------------
   Ermittelt mit `node scripts/pruefen.js`. Die Master-Regeln sind hier sehr
   spezifisch (1 ID + 5 Klassen), deshalb werden sie 1:1 nachgebildet. */

/* Eingabefeld-Wrapper auf der Kalkulationsseite: kaltes #f9fbff -> weiß */
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.input,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-content fieldset label.input {
  background: #fff; padding-left: 0;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  box-sizing: border-box;
}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.input input,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-content fieldset label.input input {
  background: transparent; border: 0; padding: .7rem .85rem; box-sizing: border-box;
}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.input:focus-within,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-content fieldset label.input:focus-within {
  border-color: var(--gl-accent); box-shadow: 0 0 0 3px var(--gl-accent-sub);
}

/* Gesamtpreis im Warenkorb trug noch die alte Erfolgsfarbe */
#cart #total_price strong          { color: var(--gl-accent); font-size: var(--gl-fs-lg); font-weight: 600; }
.hint.message.success strong,
.hint_msg.message.success strong   { color: var(--gl-ink); }

/* Hinweisblasen liefen rechts aus dem Fenster */
form:not([id=formular_reseller]) .info .tooltip,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .info .tooltip,
#product-detail #bulk .info .tooltip {
  max-width: min(360px, 90vw); width: auto; box-sizing: border-box;
  background: var(--gl-ink); color: var(--gl-on-dark);
  border: 0; border-radius: var(--gl-radius-sm); padding: .75rem .9rem;
  font-size: var(--gl-fs-sm); line-height: 1.5;
  box-shadow: 0 14px 32px -18px rgba(22,19,15,.5);
}

/* Das Hero-Bild ist im Master 1150 px breit und sitzt bei left:53% —
   dadurch ragt es über den rechten Rand hinaus. */
/* NUR der Behaelter darf beschneiden. `.slider` ist der Laufwagen: Er ist
   so breit wie EIN Slide und wird per `transform` verschoben, die Slides
   liegen bei 1440, 2880, 4320 innerhalb. Ein `overflow: hidden` auf ihm
   schneidet damit alle Slides ausser dem ersten weg — sie sind da, messen
   richtig und sind trotzdem unsichtbar. Mit einem einzigen Slide faellt
   das nie auf. Siehe docs/10, G65. */
.slider-container { overflow: hidden; }
.slider, .slide, .slide__content { overflow: visible; }

/* ============================================================================
   21 KOPFBEREICH — neu aufgebaut
   Markup: child/data/inc.header.htm. Der Master-Kopf mit drei Zeilen und
   separatem <nav id="navbar"> wird dort nicht mehr eingebunden.
   ========================================================================== */

/* --- Ankündigungsleiste -------------------------------------------------- */
.gl-announce {
  background: var(--gl-ink); color: var(--gl-on-dark);
  font-size: var(--gl-fs-xs); letter-spacing: .08em; text-transform: uppercase;
}
.gl-announce .wrp {
  display: flex; justify-content: center; align-items: center; gap: .6rem;
  padding: .7rem 0; text-align: center;
}
.gl-announce__sep { opacity: .45; }

/* --- Kopfzeile ----------------------------------------------------------- */
header.main.gl-header {
  height: auto; margin: 0; background: var(--gl-bg);
  border-bottom: 1px solid var(--gl-line);
  position: sticky; top: 0; z-index: 100;
}
.gl-header__inner {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  height: 76px; box-sizing: border-box;
}
.gl-header__brand { flex: 0 0 auto; display: block; line-height: 0; }
.gl-header__brand img { height: 40px; width: auto; display: block; }

/* --- Navigation ---------------------------------------------------------- */
.gl-nav { flex: 1 1 auto; }
.gl-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.gl-nav__item { position: relative; }
.gl-nav__link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .8rem; border-radius: var(--gl-radius-sm);
  font-size: var(--gl-fs-md); color: var(--gl-ink); text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.gl-nav__link:hover        { background: var(--gl-surface); color: var(--gl-ink); }
.gl-nav__link:focus-visible{ outline: 2px solid var(--gl-accent); outline-offset: 2px; }
.gl-nav__chev              { transition: transform .18s ease; opacity: .55; }
.gl-nav__item--sub:hover .gl-nav__chev,
.gl-nav__item--sub:focus-within .gl-nav__chev { transform: rotate(180deg); opacity: 1; }

/* Aufklappmenü: eine Karte, keine Kästen darin */
.gl-nav__panel {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 120;
  min-width: 260px; padding: .5rem;
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  box-shadow: 0 20px 48px -24px rgba(22,19,15,.32);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.gl-nav__item--sub:hover .gl-nav__panel,
.gl-nav__item--sub:focus-within .gl-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.gl-nav__panel ul   { list-style: none; margin: 0; padding: 0; }
.gl-nav__panel li   { margin: 0; }
.gl-nav__panel a {
  display: block; padding: .6rem .8rem; border-radius: var(--gl-radius-sm);
  color: var(--gl-ink); text-decoration: none; font-size: var(--gl-fs-md);
  border: 0; background: transparent; box-shadow: none;
}
.gl-nav__panel a:hover { background: var(--gl-surface); color: var(--gl-accent); }
.gl-nav__panel em      { display: block; font-style: normal; font-size: var(--gl-fs-xs); color: var(--gl-muted); margin-top: .1rem; }

/* --- Symbole rechts ------------------------------------------------------ */
.gl-header__inner #customer-menu {
  flex: 0 0 auto; position: static; float: none; width: auto; height: auto;
  display: flex; align-items: center; gap: .25rem; margin: 0;
}

/* --- Mobil ---------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .gl-header__inner { height: 60px; gap: .75rem; }
  .gl-header__brand img { height: 32px; }
  .gl-nav { display: none; }
  .gl-announce .wrp { padding: .55rem 0; font-size: 11px; letter-spacing: .06em; }
}

/* --- 21.1 Korrekturen Kopfbereich ---------------------------------------
   `#brand-logo img` des Masters ist eine ID-Regel und schlägt jede
   Klassenregel — deshalb hier ebenfalls über die ID. */
header.main #brand-logo          { display: block; line-height: 0; padding: 0; margin: 0; height: auto; width: auto; }
header.main #brand-logo img      { height: 30px; width: auto; max-width: none; display: block; }
.gl-nav__link, .gl-nav__link:hover, .gl-nav__panel a, .gl-nav__panel a:hover { text-decoration: none; }
@media screen and (max-width: 991px) { header.main #brand-logo img { height: 24px; } }

/* ============================================================================
   22 HERO — randlos, Text mittig  (Dawn-Vorbild)
   Der Master baut den Hero als Zweispalter: Bild rechts bei left:53% mit
   background-size:contain, Text links, dazwischen ein diagonales SVG.
   Dawn macht das Gegenteil: ein randloses Bild, Text mittig darauf,
   Schaltfläche als Umriss.

   Diese Regeln gelten für ALLE Breiten und lösen den gestapelten
   Mobil-Sonderfall aus Abschnitt 19 ab.
   ========================================================================== */
.slider-container {
  padding: 0; height: clamp(440px, 62vh, 660px);
  overflow: hidden; position: relative;
}
.slider, .slide, .slide__content { height: 100%; }
.slide          { position: absolute; top: 0; left: 0; width: 100%; }
.slide__content { position: absolute; inset: 0; }

/* Bild randlos über die volle Breite */
.slide__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; left: 0; top: 0; margin-left: 0 !important;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Der diagonale Keil weicht einem ruhigen Verlauf für die Lesbarkeit */
.slide__overlay { display: none; }
.slide__content::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,19,15,.10) 0%, rgba(22,19,15,.34) 55%, rgba(22,19,15,.52) 100%);
}

/* Text mittig auf dem Bild */
.slide.active .slide__text,
.slide__text {
  position: absolute; inset: auto 0 0 0; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: none; height: 100%; margin: 0; left: 0; transform: none;
  padding: 2rem clamp(1.25rem, 5vw, 3rem); box-sizing: border-box;
  text-align: center; color: #fff; background: transparent; opacity: 1; z-index: 3;
}
.slide__text-heading {
  display: block; color: #fff;
  font-family: "extrabold", system-ui, sans-serif; font-weight: 500;
  font-size: var(--gl-fs-2xl); line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 .85rem; max-width: 20ch;
  text-shadow: 0 1px 24px rgba(0,0,0,.25);
}
.slide__text-desc {
  color: rgba(255,255,255,.92); font-size: var(--gl-fs-md); line-height: 1.55;
  margin: 0 0 1.75rem; max-width: 46ch;
  text-shadow: 0 1px 18px rgba(0,0,0,.3);
}
/* Umriss-Schaltfläche wie bei Dawn */
.slide__text-link {
  background: transparent !important; background-color: transparent !important;
  border: 1px solid rgba(255,255,255,.85); color: #fff;
  padding: .9rem 2.25rem; border-radius: var(--gl-radius-sm);
  font-size: var(--gl-fs-md); font-weight: 500; letter-spacing: .01em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.slide__text-link:hover {
  background: #fff !important; background-color: #fff !important;
  color: var(--gl-ink); border-color: #fff;
}
.slide__text-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.slide__text-link:after { display: none; }

/* Punktnavigation nur bei mehreren Slides */
.slider-pagi        { bottom: 1.25rem; }
.slider-pagi__elem  { border-color: rgba(255,255,255,.7); }
.slider-pagi__elem:before { background: #fff; }
/* Nur wenn es einen einzigen Slide gibt. Sobald ein zweiter dazukommt,
   sind die Pfeile der einzige Weg weiter — siehe Abschnitt 48. */
.slider-container:not(:has(.slide-1)) .slider-control { display: none; }

@media screen and (max-width: 767px) {
  .slider-container   { height: clamp(400px, 66vh, 520px); }
  .slide__text-heading{ font-size: clamp(1.75rem, 8vw, 2.25rem); max-width: 16ch; }
  .slide__text-desc   { font-size: var(--gl-fs-sm); }
}

/* --- 22.1 Kontrast im Hero ----------------------------------------------
   Das Produktbild ist hell (Porzellan auf hellem Grund). Weiße Schrift
   darauf erreicht keinen ausreichenden Kontrast — gemessen an der hellsten
   Bildstelle deutlich unter 4.5:1. Dawn nutzt Weiß, weil dortige Motive
   dunkel sind. Für helle Motive ist dunkle Schrift die richtige Antwort:
   Tinte auf einem hellen Schleier. */
.slide__content::after {
  background: linear-gradient(180deg, rgba(247,246,243,.55) 0%, rgba(247,246,243,.72) 55%, rgba(247,246,243,.82) 100%);
}
.slide__text            { color: var(--gl-ink); }
.slide__text-heading    { color: var(--gl-ink); text-shadow: none; }
.slide__text-desc       { color: var(--gl-muted-2); text-shadow: none; }
.slide__text-link {
  border-color: var(--gl-ink); color: var(--gl-ink);
  background: transparent !important; background-color: transparent !important;
}
.slide__text-link:hover {
  background: var(--gl-ink) !important; background-color: var(--gl-ink) !important;
  color: var(--gl-bg); border-color: var(--gl-ink);
}
.slide__text-link:focus-visible { outline-color: var(--gl-ink); }
.slider-pagi__elem      { border-color: var(--gl-ink); }
.slider-pagi__elem:before { background: var(--gl-ink); }

/* Navigationslinks sind Text, nicht Links im Sinne der Akzentfarbe */
.gl-nav__link, .gl-nav__link:visited { color: var(--gl-ink); }
.gl-nav__panel a, .gl-nav__panel a:visited { color: var(--gl-ink); }

/* Punktnavigation nur, wenn es mehr als einen Slide gibt */
.slider-pagi:not(:has(li + li)) { display: none; }

/* Zähler am Warenkorb saß am oberen Rand an */
header.main #customer-menu .count { top: 4px; right: -2px; }

/* --- 22.2 Schleier zurücknehmen -----------------------------------------
   Version davor war so hell, dass das Motiv seine Wirkung verlor. Der
   Verlauf sitzt jetzt niedriger und lässt die obere Bildhälfte frei;
   der Text steht im ruhigeren unteren Drittel. */
.slide__content::after {
  background:
    radial-gradient(120% 75% at 50% 62%, rgba(247,246,243,.86) 0%, rgba(247,246,243,.62) 45%, rgba(247,246,243,0) 78%),
    linear-gradient(180deg, rgba(247,246,243,.18) 0%, rgba(247,246,243,0) 40%);
}
.slide__text { justify-content: center; }

/* ============================================================================
   23 WARENGRUPPEN-KACHELN auf der Startseite
   Der Shop steht jetzt auf „Produktübersicht auf der Startseite"
   (cms_homepage_status = OVERVIEW_INDEX). Das Modul rendert die
   Warengruppen selbst als Karten — bei Dawn sind das die „Featured
   collections": großes Bild, Name darunter, dezenter Link.
   ========================================================================== */
.trade-groups.full            { padding-block: clamp(3rem, 6vw, 5rem); background: var(--gl-bg); }
.trade-groups.full h1         { font-size: var(--gl-fs-xl); font-weight: 500; text-align: center; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.trade-groups.full .content   { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); float: none; width: 100%; }
.trade-groups.full .card      { width: auto !important; float: none !important; margin: 0 !important; background: transparent; border: 0; }
.trade-groups.full .card figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--gl-radius); background: var(--gl-surface);
}
.trade-groups.full .card figure img,
.trade-groups.full .card figure picture {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.trade-groups.full .card:hover figure img { transform: scale(1.03); }
.trade-groups.full .card figcaption {
  position: static; background: transparent; padding: 1rem .25rem 0; text-align: left;
}
.trade-groups.full .card figcaption h2 {
  font-size: var(--gl-fs-lg); font-weight: 500; color: var(--gl-ink);
  margin: 0 0 .35rem; letter-spacing: -.01em;
}
.trade-groups.full .card figcaption .link {
  display: inline-block; font-size: var(--gl-fs-sm); color: var(--gl-muted-2);
  border-bottom: 1px solid var(--gl-line-2); padding-bottom: 2px;
}
.trade-groups.full .card:hover figcaption .link { color: var(--gl-accent); border-color: var(--gl-accent); }
.trade-groups.full .card > a  { position: absolute; inset: 0; z-index: 2; }
.trade-groups.full .card      { position: relative; }

/* --- 23.1 Startseite: leeres Band und Fußzeile --------------------------- */

/* #trade-blocks rendert nur einen leeren Rahmen, solange im Backend keine
   Startseiten-Blöcke angelegt sind. */
#trade-blocks:not(:has(figure)) { display: none; }
#payment-bar:not(:has(img))     { display: none; }

/* Fußzeile: alle drei Spaltenüberschriften gleich, Pfeilzeichen weg */
footer.main h1, footer.main h2, footer.main h3, footer.main h4,
footer.main .headline, footer.main nav > strong, footer.main > .wrp > div > strong {
  font-size: var(--gl-fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(241,239,234,.6);
  margin: 0 0 1.1rem; line-height: 1.4;
}
footer.main li a, footer.main nav li a {
  display: inline-block; padding: .3rem 0; font-size: var(--gl-fs-sm);
  color: var(--gl-on-dark); text-decoration: none; border: 0;
}
footer.main li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Die Pfeile sind ::after-Zeichen der Master-Liste */
footer.main li a:after, footer.main li:after,
footer.main nav li a:after, footer.main nav li:after { content: none !important; display: none !important; }
footer.main ul { list-style: none; margin: 0; padding: 0; }

/* ============================================================================
   24 WARENKORB — Typografie auf die Skala
   Gemessen mit scripts/pruefen.js: zehn verschiedene Größen-/Gewichts-
   Kombinationen auf einer Seite, dazu reines Schwarz statt der Tinte.
   Rollen hier:
     Tabellenkopf, Schritte   xs / 600 / Versalien / gedämpft
     Produktname              md / 500 / Tinte
     Zeilenwerte              md / 400 / Tinte, Beschriftungen gedämpft
     Summe                    lg / 600 / Jade,  Label md / 500 / Tinte
     Nebenangaben             xs / 400 / gedämpft
   ========================================================================== */
#cart, #cart td, #cart th, #cart p, #cart span, #cart li, #cart a { color: var(--gl-ink); }

#cart table td                      { font-size: var(--gl-fs-md); font-weight: 400; }
#cart tbody tr > td:first-child     { color: var(--gl-muted-2); }
#cart h3                            { font-size: var(--gl-fs-md); font-weight: 500; color: var(--gl-ink); margin: 0; }
#cart .product_calculation td       { font-size: var(--gl-fs-sm); color: var(--gl-muted-2); }

#cart td.total, #cart .total td,
#cart tr.total td                   { font-size: var(--gl-fs-md); font-weight: 500; color: var(--gl-ink); }
#cart #total_price                  { font-size: var(--gl-fs-md); font-weight: 500; }
#cart #total_price strong           { font-size: var(--gl-fs-lg); font-weight: 600; color: var(--gl-accent); }
#cart small, #cart .small           { font-size: var(--gl-fs-xs); color: var(--gl-muted); font-weight: 400; }
#cart .delete, #cart span.delete,
#cart a.delete                      { font-size: var(--gl-fs-sm); color: var(--gl-muted-2); }
#cart .delete:hover                 { color: var(--gl-accent); }

/* „Gesamtpreis" stand mit 21 px aus der Reihe */
#cart td:has(+ td #total_price),
#cart tr.total td:first-child       { font-size: var(--gl-fs-md); font-weight: 500; }

/* Schaltflächen einheitlich */
.btn, a.btn, button.btn, input.btn  { font-size: var(--gl-fs-md); font-weight: 500; padding: .85rem 1.75rem; }

/* Infokasten */
aside#sidebar h3                    { font-size: var(--gl-fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gl-muted); }
aside#sidebar p                     { font-size: var(--gl-fs-sm); color: var(--gl-muted-2); }

/* --- 24.1 Warenkorb: Spezifität nachziehen -------------------------------
   Die vorherigen Regeln verloren gegen spezifischere Master-Selektoren.
   Gemessen: tbody>tr>td stand auf 14px, .btn auf 18px, strong auf Gewicht 300,
   die Kastenüberschrift auf 14px/700. */
#cart table tbody tr td,
#cart table tbody tr th                  { font-size: var(--gl-fs-md); }
#cart table tbody tr.product_calculation td { font-size: var(--gl-fs-sm); color: var(--gl-muted-2); }
#cart table tbody tr.product_calculation td h3 { font-size: var(--gl-fs-md); font-weight: 500; }
#cart table tbody tr.product_calculation td strong { font-size: var(--gl-fs-md); font-weight: 500; color: var(--gl-ink); }
#cart table tbody tr#total_price td strong { font-size: var(--gl-fs-lg); font-weight: 600; color: var(--gl-accent); }
#cart table tbody tr#total_price td small  { font-size: var(--gl-fs-xs); color: var(--gl-muted); }

#cart .actionbar .btn,
#cart form .btn, #cart a.btn, #cart button.btn { font-size: var(--gl-fs-md); font-weight: 500; }

#cart aside#sidebar section h3,
#cart_second aside#sidebar section h3,
#cart_third aside#sidebar section h3 {
  font-size: var(--gl-fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gl-muted); margin: 0 0 .75rem;
}

/* ============================================================================
   25 FLÄCHEN-PRINZIP KORRIGIERT
   Abschnitt 14 hatte die <main>-Container ganzer Seiten auf die Flächenfarbe
   gesetzt. Ergebnis: Die Seite war durchgehend grau und alles darauf verlor
   seine Abgrenzung — Tabellen und Infokästen schwebten ohne Halt.

   Richtig ist die Umkehrung: Die Seite bleibt hell (--gl-bg), der Inhalt
   sitzt in weißen Karten mit Haarlinie.
   ========================================================================== */
main#cart_first, main#cart_second, main#cart_third,
main#upload, main#uploadcheck, main#contact, main#address, main#summary,
main#order_sample, main#register, main#calculator, main#konto_index,
#upload, #uploadcheck, #contact, #address, #summary, #order_sample,
#cart_first, #register, #calculator {
  background: var(--gl-bg);
}

/* Warenkorb: Tabelle und Infokasten als Karten */
#cart form.cf > table,
#cart table.preisberechnung {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
  box-sizing: border-box;
}
#cart table.preisberechnung td,
#cart table.preisberechnung th { border-bottom: 1px solid var(--gl-line); }
#cart table.preisberechnung tr:last-child td,
#cart table.preisberechnung tr:last-child th { border-bottom: 0; }

#cart aside#sidebar, #cart_second aside#sidebar, #cart_third aside#sidebar {
  background: #fff; border: 1px solid var(--gl-line);
}

/* Zähler am Warenkorb: der Master färbt ihn weiß auf hell */
header.main #customer-menu a.menu-item-cart .count,
header.main #customer-menu .menu-item-login .count,
header.main #customer-menu .count {
  background: var(--gl-accent) !important; color: #fff !important;
}

/* Sekundäre Aktion als Umriss, damit die Hierarchie stimmt */
#cart .actionbar a.btn:not(.success),
#cart form .btn.back, .btn.secondary {
  background: transparent; color: var(--gl-ink);
  border: 1px solid var(--gl-line-2);
}
#cart .actionbar a.btn:not(.success):hover,
.btn.secondary:hover { background: var(--gl-surface); color: var(--gl-ink); border-color: var(--gl-ink); }

/* ============================================================================
   26 ADRESSFORMULARE — Zweispalter als Grid
   Der Master setzt jedes Feld als <fieldset float:left; width:518px>. Sobald
   zwei Felder unterschiedlich hoch sind (Pflichtfeld-Stern, zweizeiliges
   Label, PLZ+Ort in einer Zeile), brechen die Float-Zeilen und die Spalten
   versetzen sich gegeneinander. Ein Grid hält die Zeilen zusammen.
   Betrifft: Kasse Schritt 2 und 3, Adressseite, Registrierung.
   ========================================================================== */
/* Der eigentliche Feldcontainer heisst div.form_billing-address bzw.
   .form_delivery-address — nicht das <article>. */
#cart_second form [class*="form_"],
#cart_third  form [class*="form_"],
#address     form [class*="form_"],
#register    form [class*="form_"] {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2.5rem; align-items: start;
}
#cart_second form [class*="form_"] > fieldset,
#cart_third  form [class*="form_"] > fieldset,
#address     form [class*="form_"] > fieldset,
#register    form [class*="form_"] > fieldset {
  float: none !important; width: auto !important; margin: 0 !important;
  min-width: 0; box-sizing: border-box; padding: 0; border: 0;
}
/* Überschrift, Adressbuch-Schaltfläche und Ankreuzfelder über beide Spalten */
#cart_second form article > h1,
#cart_second form article > h2,
#cart_second form article > p,
#cart_third  form article > h1,
#address     form article > h1,
#register    form article > h1,
#cart_second form [class*="form_"] > fieldset:has(input[type=checkbox]),
#cart_third  form [class*="form_"] > fieldset:has(input[type=checkbox]),
#address     form [class*="form_"] > fieldset:has(input[type=checkbox]),
#register    form [class*="form_"] > fieldset:has(input[type=checkbox]),
 { grid-column: 1 / -1; }

/* .formTitle ist KEIN Titel, sondern ein normales Feld (Anrede) — nicht
   spannen. Feldgruppen, die nur ein leeres Label enthalten, sind
   Platzhalter des Float-Layouts und im Grid überflüssig. */
#cart_second form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)),
#cart_third  form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)),
#address     form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)),
#register    form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)) { display: none; }

/* PLZ und Ort teilen sich eine Zelle */
#cart_second form fieldset.col-2,
#cart_third  form fieldset.col-2,
#address     form fieldset.col-2,
#register    form fieldset.col-2 {
  display: grid; grid-template-columns: 110px 1fr; gap: .5rem .75rem; align-items: center;
}
#cart_second form fieldset.col-2 > label,
#cart_third  form fieldset.col-2 > label,
#address     form fieldset.col-2 > label,
#register    form fieldset.col-2 > label { grid-column: 1 / -1; margin-bottom: 0; }

/* Leere Platzhalter-Felder des Masters ausblenden */
#cart_second form [class*="form_"] > fieldset:not(:has(label)):not(:has(input)):not(:has(select)):not(:has(span)),
#cart_third  form [class*="form_"] > fieldset:not(:has(label)):not(:has(input)):not(:has(select)):not(:has(span)) { display: none; }

/* Felder füllen ihre Spalte */
#cart_second form input.input, #cart_second form input.adresse_input,
#cart_third  form input.input, #cart_third  form input.adresse_input,
#address     form input.input, #register form input.input,
#cart_second form select, #cart_third form select, #address form select, #register form select {
  width: 100%; box-sizing: border-box;
  border-radius: var(--gl-radius-sm); border: 1px solid var(--gl-line-2);
  padding: .7rem .85rem; font-size: var(--gl-fs-md); height: auto;
}
/* Pflichtfeld-Stern an das Feld binden statt frei daneben */
#cart_second form fieldset, #cart_third form fieldset,
#address form fieldset, #register form fieldset { position: relative; }
#cart_second form fieldset > span:not(.optionName),
#cart_third  form fieldset > span:not(.optionName) {
  position: absolute; right: -.9rem; bottom: .8rem;
  color: var(--gl-accent); font-size: var(--gl-fs-md);
}

/* Adressbuch-Schaltfläche rechts oben in der Karte */
#cart_second form article > h1 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#cart_second form article > #addressBookModal,
#cart_second form article > span.btn.edit {
  grid-column: 2; justify-self: end; margin-top: -3.75rem;
  font-size: var(--gl-fs-sm); padding: .55rem 1.1rem;
  background: transparent; color: var(--gl-ink); border: 1px solid var(--gl-line-2);
}
#cart_second form article > span.btn.edit:hover { background: var(--gl-surface); border-color: var(--gl-ink); color: var(--gl-ink); }

@media screen and (max-width: 767px) {
  #cart_second form [class*="form_"], #cart_third form [class*="form_"],
  #address form [class*="form_"], #register form [class*="form_"] { grid-template-columns: 1fr; gap: 1rem; }
}

/* --- 26.1 Adressformular: Feldbreiten, Sternchen, leere Zellen ----------- */
#cart_second form [class*="form_"] fieldset > input:not([type=checkbox]):not([type=radio]),
#cart_second form [class*="form_"] fieldset > select,
#cart_second form [class*="form_"] fieldset > textarea,
#cart_third  form [class*="form_"] fieldset > input:not([type=checkbox]):not([type=radio]),
#cart_third  form [class*="form_"] fieldset > select,
#address     form [class*="form_"] fieldset > input:not([type=checkbox]):not([type=radio]),
#address     form [class*="form_"] fieldset > select,
#register    form [class*="form_"] fieldset > input:not([type=checkbox]):not([type=radio]),
#register    form [class*="form_"] fieldset > select {
  width: 100% !important; max-width: none; box-sizing: border-box; float: none;
}
/* PLZ und Ort: schmales Feld, breites Feld */
#cart_second form fieldset.col-2 > input:first-of-type,
#cart_third  form fieldset.col-2 > input:first-of-type { grid-column: 1; }
#cart_second form fieldset.col-2 > input:nth-of-type(2),
#cart_third  form fieldset.col-2 > input:nth-of-type(2) { grid-column: 2; }

/* Pflichtfeld-Sternchen an das Feld heften statt frei rechts */
#cart_second form [class*="form_"] fieldset > span,
#cart_third  form [class*="form_"] fieldset > span,
#address     form [class*="form_"] fieldset > span {
  position: absolute; top: 0; left: auto; right: auto; margin: 0;
  color: var(--gl-accent); font-size: var(--gl-fs-sm); line-height: 1.4;
}
#cart_second form [class*="form_"] fieldset,
#cart_third  form [class*="form_"] fieldset { position: relative; padding-top: 0; }
/* Der Stern sitzt jetzt direkt hinter der Beschriftung */
#cart_second form [class*="form_"] fieldset > label,
#cart_third  form [class*="form_"] fieldset > label { padding-right: 1rem; }
#cart_second form [class*="form_"] fieldset > span { top: .05rem; }

/* Feldgruppen ohne sichtbares Feld belegen keine Zelle mehr */
#cart_second form [class*="form_"] > fieldset:empty,
#cart_third  form [class*="form_"] > fieldset:empty { display: none; }

/* Adressbuch-Schaltfläche oben rechts in der Karte verankern */
#cart_second form article           { position: relative; }
#cart_second form article > h1      { margin-right: 10rem; }
#cart_second form article > #addressBookModal,
#cart_second form article > span.btn.edit {
  position: absolute; top: 0; right: 0; margin: 0;
  font-size: var(--gl-fs-sm); padding: .55rem 1.1rem;
  background: transparent; color: var(--gl-ink); border: 1px solid var(--gl-line-2);
  border-radius: var(--gl-radius-sm); cursor: pointer;
}

/* --- 26.2 Letzte Korrekturen am Adressformular --------------------------- */
/* Das erste Feld landete in Spalte 2 und liess links eine Lücke. */
#cart_second form [class*="form_"] > fieldset:first-of-type,
#cart_third  form [class*="form_"] > fieldset:first-of-type,
#address     form [class*="form_"] > fieldset:first-of-type,
#register    form [class*="form_"] > fieldset:first-of-type,
#contact     form [class*="form_"] > fieldset:first-of-type,
#druckmuster form [class*="form_"] > fieldset:first-of-type,
#konto_adresse form [class*="form_"] > fieldset:first-of-type,
#konto_adressbuch form [class*="form_"] > fieldset:first-of-type { grid-column: 1; }

/* Pflicht-Sternchen oben rechts an der Feldgruppe statt über der Beschriftung */
#cart_second form [class*="form_"] fieldset > span,
#cart_third  form [class*="form_"] fieldset > span,
#address     form [class*="form_"] fieldset > span {
  top: 0; right: 0; left: auto;
}

/* --- 27 Letzte Reste aus der Abschlussprüfung ---------------------------- */

/* label.default trug noch das kalte #f9fbff (Artikelseite, Optionsfelder) */
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.default,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-content fieldset label.default,
label.default {
  background: #fff; border: 1px solid var(--gl-line-2);
  border-radius: var(--gl-radius-sm); box-sizing: border-box;
}

/* Hinweisblase am rechten Rand: nach links ausrichten statt hinauslaufen */
#cart_second .info .tooltip, #cart_third .info .tooltip,
form:not([id=formular_reseller]) .info .tooltip {
  left: auto; right: 0; max-width: min(320px, 80vw);
}
#cart_second .info, #cart_third .info { position: relative; }

/* Artikelseite: H1 und die Kastenüberschriften auf die Skala */
#visual_calculation .contentwrapper.left .head .text h1,
#visual_calculation .contentwrapper.left h1,
#product-detail h1 {
  font-size: var(--gl-fs-xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.15;
}
#visual_calculation .contentwrapper.right h2,
#visual_calculation .contentwrapper.right h3,
#visual_calculation .contentwrapper.right #delivery h3,
#total_block h2, #total_block h3 {
  font-size: var(--gl-fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gl-muted); margin: 0 0 .85rem;
}
#visual_calculation .contentwrapper.left .optionGroup h2 {
  font-size: var(--gl-fs-md); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gl-ink);
}

/* „Voraussichtlicher Versandtermin" ist Inhalt, kein Abschnittstitel —
   Kleinversalien brechen dort auf zwei Zeilen und lesen sich schlecht. */
#visual_calculation .contentwrapper.right #delivery h3,
#product-detail #delivery h3 {
  font-size: var(--gl-fs-sm); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--gl-ink); margin: 0 0 .2rem;
}
/* Hinweiskasten weicher */
#visual_calculation .contentwrapper.right .hint,
#visual_calculation .contentwrapper.right .tooltip_delivery,
#product-detail #delivery .hint {
  background: var(--gl-surface); border: 0; border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-sm); color: var(--gl-muted-2);
}
/* Doppelte Beschriftung: der Master setzt Überschrift UND Feldnamen */
#visual_calculation .optionGroup h2 + .optionWrapper fieldset > .optionName:only-child { display: none; }

/* ============================================================================
   28 KALKULATIONSSEITE — Bedienelemente
   Die wichtigste Seite des Shops. Der Master baut die Auswahlfelder nicht als
   <select>, sondern als <label class="default selectList"> mit zwei
   Bildern: einem grauen Bleistift links (::before) und einem cyanfarbenen
   Pfeil rechts (::after). Beide sind Master-Assets und passen zu nichts.
   ========================================================================== */

/* --- Auswahlfelder ------------------------------------------------------- */
#visual_calculation label.default,
#visual_calculation label.default.selectList,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.default {
  position: relative; display: flex; align-items: center;
  box-sizing: border-box; width: 100%; min-height: 46px;
  padding: .7rem 2.6rem .7rem .95rem;
  background: #fff; border: 1px solid var(--gl-line-2);
  border-radius: var(--gl-radius-sm);
  font-size: var(--gl-fs-md); color: var(--gl-ink); cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#visual_calculation label.default:hover      { border-color: var(--gl-muted); }
#visual_calculation label.default:focus-visible,
#visual_calculation label.default.active     { border-color: var(--gl-accent); box-shadow: 0 0 0 3px var(--gl-accent-sub); outline: none; }

/* Bleistift raus */
#visual_calculation label.default::before,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.default::before,
#visual_calculation.expert .contentwrapper.left .accordion .accordion-content fieldset label.default::before {
  content: none !important; display: none !important;
}
/* Eigener Chevron statt Master-Pfeil */
#visual_calculation label.default::after,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.default::after {
  content: "" !important;
  position: absolute; right: .95rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 9px; margin: 0; padding: 0; border: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316130F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 9px;
}
/* Aufgeklappte Optionsliste als Karte */
#visual_calculation .optionGroupCon {
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  background: #fff; box-shadow: 0 18px 40px -22px rgba(22,19,15,.28); overflow: hidden;
}
#visual_calculation .optionGroupCon ul li { padding: .7rem .95rem; border: 0; }
#visual_calculation .optionGroupCon ul li:hover,
#visual_calculation .optionGroupCon ul li.focus { background: var(--gl-accent); color: #fff; }

/* --- Texteingaben: gleiche Höhe, gleiche Rundung ------------------------- */
#visual_calculation label.input,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset label.input {
  display: flex; align-items: center; box-sizing: border-box;
  min-height: 46px; padding: 0; width: 100%;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm); background: #fff;
}
#visual_calculation label.input > input {
  border: 0; background: transparent; width: 100%; box-sizing: border-box;
  padding: 0 .95rem; height: 44px; line-height: 44px; font-size: var(--gl-fs-md);
}
#visual_calculation label.input.input-small { width: 100%; }

/* Zweispaltiges Raster eine Ebene höher, sonst verliert die Seite ihre
   Spalten (der Master arbeitet hier mit Floats). */
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; align-items: end;
}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end;
  width: auto !important; float: none !important; margin: 0 !important; box-sizing: border-box;
}
/* Auswahlfelder und lange Felder über die volle Breite */
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset:has(label.default),
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset:has(textarea) { grid-column: 1 / -1; }

/* Der Gruppentitel benennt die Gruppe; enthält sie nur ein einziges Feld,
   ist der Feldname darunter eine wörtliche Doppelung. */
#visual_calculation .optionWrapper:not(:has(fieldset + fieldset)) .optionName { display: none; }

@media screen and (max-width: 767px) {
  #visual_calculation .contentwrapper.left .optionGroup .optionWrapper { grid-template-columns: 1fr; }
  /* Der Master schiebt den Berechnen-Knopf unterhalb 768 px um 42 px
     nach unten (`position: relative; top: 42px` — gedacht fuer sein
     Float-Layout mit Beschriftung darueber). In unserem Raster sitzt der
     Knopf ohnehin in der zweiten Spalte; der Versatz warf ihn aus dem
     Feldkasten heraus, quer ueber die naechste Beschriftung. */
  #visual_calculation .btnCalcOptical { top: 0 !important; float: none !important; }
  /* `responsive.css`: `form h2, form h3, form h4, form h5, form h6
     { background: #f9fbff }` — einer der kalten Master-Toene, der NUR im
     Telefonlayout auftaucht und deshalb drei Runden lang unbemerkt blieb
     (docs/10, G70). Betroffen waren die Kalkulation und die
     Druckmusteranforderung. */
  form h2, form h3, form h4, form h5, form h6 {
    background: none !important;
    width: auto !important;
  }
}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset > .optionName,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset > legend { grid-column: 1 / -1; }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset > label { grid-column: 1; }

/* --- Berechnen-Knopf zurückhaltender ------------------------------------- */

/* --- Beschriftungen: Gruppentitel klein, Feldname normal ----------------- */
#visual_calculation .contentwrapper.left .optionGroup > h2,
#visual_calculation .contentwrapper.left .optionGroup h2 {
  display: block; clear: both; width: 100%; box-sizing: border-box;
  font-size: var(--gl-fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gl-muted);
  margin: 2.25rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--gl-line);
}
/* Nur die allererste Überschrift der Karte steht ohne Trennstrich —
   `:first-of-type` traf die einzige .optionGroup und hob den Abstand
   für ALLE Gruppentitel auf. */
#visual_calculation .contentwrapper.left .optionGroup > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#visual_calculation .optionName {
  display: block; font-size: var(--gl-fs-sm); color: var(--gl-muted-2);
  margin-bottom: .4rem; font-weight: 400;
}

/* --- 28.1 CTA und Hinweiskasten in der Preisspalte ----------------------- */
#visual_calculation .contentwrapper.right .btn,
#total_block .btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; box-sizing: border-box; height: auto; min-height: 52px;
  line-height: 1.2; padding: .9rem 1.25rem; margin: 1.25rem 0 0;
  font-size: var(--gl-fs-md); font-weight: 500; border-radius: var(--gl-radius-sm);
}
/* Das Wagensymbol des Masters lag über dem Text */
#visual_calculation .contentwrapper.right .btn:before,
#visual_calculation .contentwrapper.right .btn:after,
#total_block .btn:before, #total_block .btn:after {
  position: static; margin: 0; float: none; transform: none; right: auto; top: auto;
}

/* Hinweiskästen in der Preisspalte weich und warm */
#visual_calculation .contentwrapper.right div[class*="hint"],
#visual_calculation .contentwrapper.right .tooltip_delivery,
#visual_calculation .contentwrapper.right p[class*="hint"],
#visual_calculation .contentwrapper.right .content > div:not([class]) {
  background: var(--gl-surface); border: 0; border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-sm); color: var(--gl-muted-2); margin-top: .75rem;
}

/* Trennlinien zwischen den Abschnitten der Preisspalte */
#visual_calculation .contentwrapper.right > section + section {
  border-top: 1px solid var(--gl-line); padding-top: 1.5rem; margin-top: 1.5rem;
}

/* --- 28.2 Doppelte Beschriftung und blauer Kasten ------------------------ */
/* Enthält eine Optionsgruppe nur ein einziges Feld, wiederholt der Feldname
   wörtlich den Gruppentitel. `:only-of-type` ist hier zuverlässiger als
   eine :has()-Konstruktion. */
#visual_calculation .optionWrapper > fieldset:only-of-type > .optionName { display: none !important; }

/* Der Lieferhinweis trug einen hellblauen Rahmen aus dem Master */
#visual_calculation .contentwrapper.right div,
#product-detail #delivery div {
  border-color: var(--gl-line);
}
#visual_calculation .contentwrapper.right #delivery > div:last-child,
#visual_calculation .contentwrapper.right section > div[style],
#visual_calculation .contentwrapper.right section > div:not([class]) {
  background: var(--gl-surface); border: 0; border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-sm); color: var(--gl-muted-2);
}

/* ============================================================================
   29 LETZTE TYPO-RESTE UND BEDIENELEMENTE
   Gemessen über alle Seiten: 18px tauchte noch an drei Stellen auf —
   „Bitte beachten Sie" in Hinweiskästen, dem Pflichtfeld-Stern und
   einzelnen Schaltflächen.
   ========================================================================== */
.hint strong, .hint_msg strong, p.hint strong, .error_msg strong,
div.hint strong, div.hint_msg strong {
  font-size: var(--gl-fs-md); font-weight: 600; color: var(--gl-ink);
  display: block; margin-bottom: .25rem;
}
.hint, .hint_msg, p.hint, div.hint, div.hint_msg {
  font-size: var(--gl-fs-sm); line-height: 1.6; color: var(--gl-muted-2);
  background: var(--gl-surface); border: 0; border-radius: var(--gl-radius-sm);
  padding: 1rem 1.15rem;
}
span.requirement, .requirement {
  font-size: var(--gl-fs-sm); color: var(--gl-accent); font-weight: 400;
}
section.actionbar .btn, .actionbar button.btn, .actionbar a.btn,
button.btn, input[type=submit].btn { font-size: var(--gl-fs-md); font-weight: 500; }

/* --- Berechnen-Knöpfe: Nebenaktion, also zurückhaltend ------------------- */

/* --- Seiten ohne Karte bekommen eine ------------------------------------- */
main#druckmuster > .wrp > form,
main#contact > .wrp > form,
main#konto_tracking > .wrp > table,
main#konto_tracking > .wrp > section,
main#address > .wrp > form,
main#register > .wrp > form,
main#pw_lost > .wrp > form,
main#konto_login > .wrp > form,
main#konto_index > .wrp > section,
main#konto_adressbuch > .wrp > form,
main#konto_adressbuch > .wrp > table {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  padding: var(--gl-pad-card); box-sizing: border-box;
}

/* ============================================================================
   30 FORMULARE — allgemeingültig
   Die Regeln aus Abschnitt 26 waren auf einzelne Seiten-IDs beschränkt.
   Dieselbe Master-Struktur (fieldset float:left, label.input, .col-2)
   steckt aber in jedem Formular des Shops: Kontakt, Druckmuster,
   Registrierung, Adressbuch, Konto, Passwort vergessen, Newsletter.
   Deshalb hier eine gemeinsame Regelgruppe über eine Sammelvariable.
   ========================================================================== */
/* WICHTIG: Nur der INNERE Feldcontainer wird zum Grid. Wird zusätzlich das
   umgebende <article> zum Grid, entstehen verschachtelte Raster und die
   Seite bekommt drei Spalten statt zwei. */
#contact form article,
#druckmuster form article,
#konto_adresse form article { display: block; }

#contact form [class*="form_"],
#druckmuster form [class*="form_"],
#konto_adresse form [class*="form_"],
#konto_adressbuch form [class*="form_"],
#pw_lost form [class*="form_"],
#newsletter_anmelden form [class*="form_"] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; align-items: start;
}

/* Freitextfelder (Mitteilung, Anmerkung) stehen unter den Adressfeldern
   über die volle Breite. */
#contact form article > fieldset,
#druckmuster form article > fieldset,
#konto_adresse form article > fieldset {
  float: none !important; width: 100% !important; margin: 1.5rem 0 0 !important;
  box-sizing: border-box; border: 0; padding: 0; position: relative;
}
#contact form article > fieldset textarea,
#druckmuster form article > fieldset textarea {
  width: 100% !important; box-sizing: border-box; min-height: 140px;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-md);
}
#contact form fieldset, #druckmuster form fieldset,
#konto_adresse form fieldset, #konto_adressbuch form fieldset,
#pw_lost form fieldset, #newsletter_anmelden form fieldset {
  float: none !important; width: auto !important; margin: 0 !important;
  min-width: 0; box-sizing: border-box; position: relative; border: 0; padding: 0;
}
/* Felder füllen ihre Spalte */
#contact form fieldset > input:not([type=checkbox]):not([type=radio]),
#contact form fieldset > select, #contact form fieldset > textarea,
#druckmuster form fieldset > input:not([type=checkbox]):not([type=radio]),
#druckmuster form fieldset > select, #druckmuster form fieldset > textarea,
#konto_adresse form fieldset > input:not([type=checkbox]):not([type=radio]),
#konto_adresse form fieldset > select, #konto_adresse form fieldset > textarea,
#konto_adressbuch form fieldset > input:not([type=checkbox]):not([type=radio]),
#konto_adressbuch form fieldset > select,
#pw_lost form fieldset > input:not([type=checkbox]):not([type=radio]),
#newsletter_anmelden form fieldset > input:not([type=checkbox]):not([type=radio]) {
  width: 100% !important; max-width: none; box-sizing: border-box; float: none;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-md); height: auto;
}
/* PLZ und Ort in einer Zelle nebeneinander */
#contact form fieldset.col-2, #druckmuster form fieldset.col-2,
#konto_adresse form fieldset.col-2, #konto_adressbuch form fieldset.col-2 {
  display: grid; grid-template-columns: 110px 1fr; gap: .5rem .75rem; align-items: center;
}
#contact form fieldset.col-2 > label, #druckmuster form fieldset.col-2 > label,
#konto_adresse form fieldset.col-2 > label, #konto_adressbuch form fieldset.col-2 > label {
  grid-column: 1 / -1; margin-bottom: 0;
}
/* Über beide Spalten: Überschriften, Ankreuzfelder, mehrzeilige Texte */
#contact form [class*="form_"] > fieldset:has(input[type=checkbox]),
#contact form [class*="form_"] > fieldset:has(textarea),
#druckmuster form [class*="form_"] > fieldset:has(input[type=checkbox]),
#druckmuster form [class*="form_"] > fieldset:has(textarea),
#konto_adresse form [class*="form_"] > fieldset:has(input[type=checkbox]),
#konto_adressbuch form [class*="form_"] > fieldset:has(input[type=checkbox]) { grid-column: 1 / -1; }
/* Leere Platzhalter-Felder belegen keine Zelle */
#contact form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)),
#druckmuster form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)),
#konto_adresse form [class*="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)) { display: none; }
/* Pflichtstern oben rechts */
#contact form fieldset > span, #druckmuster form fieldset > span,
#konto_adresse form fieldset > span, #konto_adressbuch form fieldset > span {
  position: absolute; top: 0; right: 0; color: var(--gl-accent); font-size: var(--gl-fs-sm);
}
#contact form fieldset > label, #druckmuster form fieldset > label { padding-right: 1rem; }

@media screen and (max-width: 767px) {
  #contact form [class*="form_"], #contact form article,
  #druckmuster form [class*="form_"], #druckmuster form article,
  #konto_adresse form [class*="form_"], #konto_adresse form article,
  #konto_adressbuch form [class*="form_"] { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================================
   31 FORMULARE — global über die Container-Konvention des Masters
   Das Aufzählen von Seiten-IDs war fehleranfällig: Auf der Druckmuster-Seite
   heißt die Seite `#order_sample`, das FORMULAR aber `#druckmuster` — der
   Selektor `#druckmuster form …` traf deshalb nichts.

   Der Master benennt seine Feldcontainer durchgängig `form_*`
   (`form_billing-address`, `form_delivery-address`, …). Darauf lässt sich
   verlässlich zielen, unabhängig von der Seite.
   ========================================================================== */
form div[class^="form_"], form div[class*=" form_"] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; align-items: start;
}
form div[class^="form_"] > fieldset, form div[class*=" form_"] > fieldset {
  float: none !important; width: auto !important; margin: 0 !important;
  min-width: 0; box-sizing: border-box; position: relative; border: 0; padding: 0;
}
form div[class^="form_"] > fieldset:first-of-type { grid-column: 1; }
form div[class^="form_"] > fieldset:has(input[type=checkbox]),
form div[class^="form_"] > fieldset:has(textarea) { grid-column: 1 / -1; }
form div[class^="form_"] > fieldset:not(:has(input)):not(:has(select)):not(:has(textarea)) { display: none; }

form div[class^="form_"] fieldset > input:not([type=checkbox]):not([type=radio]),
form div[class^="form_"] fieldset > select,
form div[class^="form_"] fieldset > textarea {
  width: 100% !important; max-width: none; box-sizing: border-box; float: none;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-md); height: auto;
}
form fieldset.col-2 {
  display: grid; grid-template-columns: 110px 1fr; gap: .5rem .75rem; align-items: center;
}
form fieldset.col-2 > label { grid-column: 1 / -1; margin-bottom: 0; }
form div[class^="form_"] fieldset > span {
  position: absolute; top: 0; right: 0; color: var(--gl-accent); font-size: var(--gl-fs-sm);
}
form div[class^="form_"] fieldset > label { padding-right: 1rem; }

@media screen and (max-width: 767px) {
  form div[class^="form_"], form div[class*=" form_"] { grid-template-columns: 1fr; gap: 1rem; }
}

/* Der Master begrenzt <article> in einigen Formularen auf gut die halbe
   Breite (Rest war früher eine zweite Spalte). Wo nichts daneben steht,
   verschenkt das Platz und drückt die Felder auf 265 px. */
form > article, form article:only-of-type {
  width: 100% !important; max-width: none; float: none; box-sizing: border-box;
}

/* ============================================================================
   32 MOBIL — Querscrollen verhindern
   Das Offcanvas-Menü des Masters parkt rechts außerhalb des Viewports
   (right ≈ 790 bei 390 px Breite). Auf Seiten ohne eigenen Überlaufschutz
   erzeugt das waagerechtes Scrollen.

   `overflow-x: clip` statt `hidden`: `hidden` auf <body> bricht
   `position: sticky` am Kopfbereich, `clip` nicht.
   ========================================================================== */
html { overflow-x: clip; }

/* Warenkorbtabelle: die festen Spaltenbreiten (370/240/140) passen nicht
   auf schmale Bildschirme. */
@media screen and (max-width: 767px) {
  #cart table, #cart table.preisberechnung { width: 100%; table-layout: fixed; }
  #cart tbody tr th:first-child,  #cart tbody tr > td:first-child,
  #cart tbody tr th:nth-child(2), #cart tbody tr > td:nth-child(2),
  #cart tbody tr th:nth-child(3), #cart tbody tr > td:nth-child(3),
  #cart tbody tr th:nth-child(4), #cart tbody tr > td:nth-child(4) {
    width: auto; min-width: 0; padding: .75rem .5rem;
    overflow-wrap: anywhere; hyphens: auto;
  }
  #cart table td, #cart table th { font-size: var(--gl-fs-sm); }
  #cart aside#sidebar { width: 100%; float: none; margin-top: 1.5rem; }
  #cart .actionbar .btn, #cart form .btn { width: 100%; margin-bottom: .75rem; }
}

/* ============================================================================
   33 MOBIL — Kopfzeile, Schrittleiste, Warenkorb
   ========================================================================== */

/* Ankündigungsleiste: der Master faerbt Text im Kopfbereich dunkel */
.gl-announce, .gl-announce span, .gl-announce a { color: var(--gl-on-dark) !important; }
.gl-announce a:hover { color: #fff !important; }

/* Burger sitzt jetzt in der Kopfzeile (Markup: child/data/inc.header.htm) */
.gl-header__inner #offcanvas_open {
  display: none; order: 9; position: static; float: none;
  width: 40px; height: 40px; margin: 0 0 0 .25rem; padding: 0;
  background: transparent; border: 0; border-radius: var(--gl-radius-sm);
  cursor: pointer;
}
.gl-header__inner #offcanvas_open:hover { background: var(--gl-surface); }
@media screen and (max-width: 991px) {
  .gl-header__inner #offcanvas_open { display: inline-flex; align-items: center; justify-content: center; }
}

/* Schrittleiste: auf schmalen Bildschirmen nur Nummer und Kurzform */
@media screen and (max-width: 767px) {
  .wrp.cart_breadcrumb { margin-bottom: 1.5rem; }
  .cart_breadcrumb li {
    padding: .7rem .5rem; font-size: 10px; letter-spacing: .06em;
    text-align: center; line-height: 1.35;
  }
  .cart_breadcrumb li.active { text-decoration: none; }
}

/* Warenkorb auf Mobil als Kartenliste statt Tabelle ---------------------- */
@media screen and (max-width: 767px) {
  #cart table.preisberechnung, #cart table.preisberechnung tbody,
  #cart table.preisberechnung tr, #cart table.preisberechnung td,
  #cart table.preisberechnung th { display: block; width: auto; }
  #cart table.preisberechnung thead, #cart table.preisberechnung tr > th:empty { display: none; }
  #cart table.preisberechnung tr {
    border-bottom: 1px solid var(--gl-line); padding: .9rem 0;
  }
  #cart table.preisberechnung tr:last-child { border-bottom: 0; }
  #cart table.preisberechnung td {
    border: 0 !important; padding: .15rem 0 !important; min-height: 0;
  }
  #cart table.preisberechnung td:empty { display: none; }
  #cart table.preisberechnung tr.product_calculation td h3 { font-size: var(--gl-fs-md); }
  #cart table.preisberechnung tr#total_price td { padding: .35rem 0 !important; }
}

/* --- 33.1 Offcanvas nach dem Verschieben wieder herauslösen --------------
   Der Burger sitzt jetzt in der Kopfzeile (gut), das Offcanvas-Menü selbst
   wurde dadurch aber zum Flex-Kind und verlor seine feste Positionierung —
   sein Kopfbereich erschien als Streifen ganz oben. */
.gl-header__inner > nav#offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: 280px; max-width: 85vw; z-index: 1000;
  transform: translateX(100%); transition: transform .28s ease;
  background: var(--gl-bg); border-left: 1px solid var(--gl-line);
  overflow-y: auto; margin: 0; flex: 0 0 auto;
}
.gl-header__inner > nav#offcanvas.active { transform: translateX(0); }
#overlay { position: fixed; inset: 0; background: rgba(22,19,15,.45); z-index: 999; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
#overlay.active { opacity: 1; visibility: visible; }

/* Symbole rechtsbündig, auch wenn die Navigation ausgeblendet ist */
@media screen and (max-width: 991px) {
  .gl-header__inner #customer-menu { margin-left: auto; }
}

/* Offcanvas-Inhalt an das Theme angleichen */
#offcanvas header.cf { display: flex; justify-content: flex-end; padding: .75rem; border-bottom: 1px solid var(--gl-line); }
#offcanvas #offcanvas_close { width: 40px; height: 40px; border-radius: var(--gl-radius-sm); background: transparent; border: 0; }
#offcanvas #offcanvas_close:hover { background: var(--gl-surface); }
#offcanvas ul { list-style: none; margin: 0; padding: .5rem; }
#offcanvas li a { display: block; padding: .8rem .9rem; border-radius: var(--gl-radius-sm); color: var(--gl-ink); text-decoration: none; font-size: var(--gl-fs-md); }
#offcanvas li a:hover { background: var(--gl-surface); color: var(--gl-accent); }
#offcanvas #shortcut_menu { display: flex; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--gl-line); }
#offcanvas #shortcut_menu .btn { flex: 1; font-size: var(--gl-fs-sm); padding: .6rem .5rem; }

/* --- 33.2 Offcanvas-Menü durchgestalten ---------------------------------- */
.gl-header__inner > nav#offcanvas,
nav#offcanvas {
  background: var(--gl-bg) !important; opacity: 1 !important;
  box-shadow: -24px 0 60px -30px rgba(22,19,15,.4);
  z-index: 1200 !important;
}
#overlay { z-index: 1100 !important; }

/* Schnellzugriff oben: zurückhaltend statt zwei grüne Kacheln */
#offcanvas #shortcut_menu { background: transparent; }
#offcanvas #shortcut_menu .btn,
#offcanvas #shortcut_menu a.btn {
  background: var(--gl-surface) !important; color: var(--gl-ink) !important;
  border: 1px solid var(--gl-line) !important; border-radius: var(--gl-radius-sm);
  display: flex; align-items: center; justify-content: center; min-height: 46px;
}
#offcanvas #shortcut_menu .btn:hover { background: var(--gl-surface-2) !important; border-color: var(--gl-ink) !important; }
#offcanvas #shortcut_menu .count {
  background: var(--gl-accent) !important; color: #fff !important;
  min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-align: center;
}

/* Abschnittstitel im Menü */
#offcanvas h2, #offcanvas h3, #offcanvas strong, #offcanvas .headline {
  font-size: var(--gl-fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gl-muted);
  margin: 1.5rem .9rem .5rem; display: block;
}

/* Listeneinträge: keine grauen Kästen, nur Zeilen */
#offcanvas li { background: transparent; border: 0; margin: 0; }
#offcanvas li a {
  background: transparent; border: 0; border-bottom: 1px solid var(--gl-line);
  border-radius: 0; padding: .85rem .9rem;
}
#offcanvas li:last-child a { border-bottom: 0; }

/* Abmelden ist keine Fehlermeldung */
#offcanvas .btn.error, #offcanvas a.error, #offcanvas .logout,
#offcanvas a[href*="logout"], #offcanvas a[href*="exit"] {
  background: transparent !important; color: var(--gl-muted-2) !important;
  border: 1px solid var(--gl-line-2) !important; border-radius: var(--gl-radius-sm);
  margin: 1rem .9rem; display: block; text-align: center; padding: .7rem 1rem;
}
#offcanvas .btn.error:hover, #offcanvas a[href*="logout"]:hover {
  background: var(--gl-surface) !important; color: var(--gl-ink) !important; border-color: var(--gl-ink) !important;
}
#offcanvas #offcanvas_close {
  background: transparent !important; border: 1px solid var(--gl-line) !important;
  color: var(--gl-ink); border-radius: var(--gl-radius-sm);
}
#offcanvas #offcanvas_close:hover { background: var(--gl-surface) !important; }

/* Suchfeld im Menü */
#offcanvas #mainSearchOffcanvas { display: flex; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--gl-line); }
#offcanvas #mainSearchOffcanvas label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#offcanvas #mainSearchOffcanvas input { flex: 1; border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm); padding: .6rem .75rem; }

/* --- 33.3 Stapelkontext und Abmelde-Schaltflächen ------------------------
   Das Offcanvas liegt jetzt IM klebenden Kopfbereich. `position: sticky`
   mit z-index bildet einen eigenen Stapelkontext — ein z-index von 1200
   am Offcanvas nützt darin nichts, weil der ganze Kontext bei 100 liegt.
   Also den Kopfbereich anheben. */
header.main.gl-header { z-index: 1300; }
#overlay { z-index: 1100 !important; }

/* Abmelden ist eine gewöhnliche Aktion, kein Fehler */
#offcanvas a[href*="exit"], #offcanvas a[href*="logout"],
#offcanvas a[href*="logout=1"], #offcanvas .btn.delete, #offcanvas .btn.error,
#offcanvas form a.btn, #offcanvas form button.btn {
  background: transparent !important; background-color: transparent !important;
  color: var(--gl-muted-2) !important;
  border: 1px solid var(--gl-line-2) !important;
  border-radius: var(--gl-radius-sm) !important;
  display: block; text-align: center; padding: .7rem 1rem; margin: 1rem .9rem;
}
#offcanvas a[href*="exit"]:hover, #offcanvas a[href*="logout"]:hover {
  background: var(--gl-surface) !important; background-color: var(--gl-surface) !important;
  color: var(--gl-ink) !important; border-color: var(--gl-ink) !important;
}

/* Die Abmelde-Schaltfläche ist ein <button> ohne Klasse mit der
   Fehlerfarbe #d12b0b des Masters. */
#offcanvas button:not(#offcanvas_close):not([type=submit]),
#offcanvas form button {
  background: transparent !important; background-color: transparent !important;
  color: var(--gl-muted-2) !important;
  border: 1px solid var(--gl-line-2) !important;
  border-radius: var(--gl-radius-sm) !important;
  display: block; width: calc(100% - 1.8rem); box-sizing: border-box;
  text-align: center; padding: .75rem 1rem; margin: 1rem .9rem;
  font-size: var(--gl-fs-md); font-weight: 500; cursor: pointer;
}
#offcanvas button:not(#offcanvas_close):hover,
#offcanvas form button:hover {
  background: var(--gl-surface) !important; background-color: var(--gl-surface) !important;
  color: var(--gl-ink) !important; border-color: var(--gl-ink) !important;
}

/* Listenzeilen im Menü trugen noch das kalte #f9fbff des Masters */
#offcanvas li a, #offcanvas ul li, #offcanvas nav ul li a,
#offcanvas .menu-item-more a, #offcanvas li.children a {
  background: transparent !important; background-color: transparent !important;
}
#offcanvas li a:hover { background: var(--gl-surface) !important; background-color: var(--gl-surface) !important; }
#offcanvas ul { margin: 0; padding: 0 .9rem; }

/* --- 34 Kasse Schritt 3: AGB-Satz -----------------------------------------
   Das Markup lautet: „… dass ich die <span id="BtnAGB">AGB</span> gelesen
   und akzeptiert habe." Der Master zieht den Span aus dem Satz heraus
   (float/absolut) — übrig bleibt „dass ich die gelesen und akzeptiert habe"
   und ein loses „AGB" am rechten Rand. */
#cart_third_agb #BtnAGB, #BtnAGB {
  display: inline !important; float: none !important; position: static !important;
  margin: 0 !important; padding: 0 !important; right: auto !important; top: auto !important;
  color: var(--gl-accent); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; font-size: inherit; background: transparent;
}
#cart_third_agb #BtnAGB:hover { color: var(--gl-accent-h); }
#cart_third_agb {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: var(--gl-fs-md); line-height: 1.6; color: var(--gl-muted-2);
  padding: 1.25rem 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--gl-line);
}
#cart_third_agb fieldset { display: contents; border: 0; padding: 0; margin: 0; }
#cart_third_agb label[for=agb_jn] { flex: 0 0 auto; margin: 0; padding: 0; }
#cart_third_agb input[type=checkbox] { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--gl-accent); }
#cart_third_agb .modal-cart { display: none; }

/* ============================================================================
   35 SEITENGRUND GENERISCH
   Das Auflisten einzelner <main>-IDs war lückenhaft (Konto, Tracking,
   Passwort … fehlten und standen weiter auf dem kalten #f9fbff).
   ========================================================================== */
/* Der Master setzt den Seitengrund über ID-Selektoren (`#account_tracking`,
   `#cart_first`, …). Ein Element-Selektor kommt dagegen nicht an, und die
   IDs einzeln aufzuzählen war nachweislich lückenhaft. Ein <main> hat in
   diesem Design nie einen eigenen Grund — deshalb hier ausnahmsweise
   `!important`, bewusst und dokumentiert. */
main[id], main, main.cf { background: var(--gl-bg) !important; }

/* Karten sichtbar abgrenzen, auch wenn Weiß auf Fast-Weiß steht */
main section.box, main .box,
#konto_index section, #konto_index .col,
#konto_index > .wrp > div,
main#konto_index article {
  background: #fff; border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
  padding: var(--gl-pad-card); box-sizing: border-box;
}

/* Fußzeile: Das Social-Symbol des Masters kommt aus einem Pseudoelement mit
   leerem `content` und einem Bild, das hier nicht ankommt — daneben stand
   der Text „Instagram". Eigenes SVG ist verlässlicher. */
footer.main a.icon-instagram, footer.main a[href*="instagram"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.1) no-repeat center / 18px 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EFEA' stroke-width='1.8'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.1' fill='%23F1EFEA' stroke='none'/%3E%3C/svg%3E");
  font-size: 0; color: transparent; overflow: hidden; text-indent: -9999px;
  transition: background-color .16s ease;
}
footer.main a.icon-instagram::before, footer.main a[href*="instagram"]::before { content: none !important; display: none !important; }
footer.main a.icon-instagram:hover, footer.main a[href*="instagram"]:hover { background-color: rgba(255,255,255,.22); }

/* ============================================================================
   36 KORREKTUREN AUS DER NUTZERPRÜFUNG
   Zwei Fehler, beide vom selben Typ: Ich habe die Fläche geändert und den
   Inhalt nicht nachgeprüft.
   ========================================================================== */

/* 36.1 Berechnen-Knopf: Das Symbol ist ein WEISSES Zeichen aus der
   Icon-Schrift (`::before { content:"o"; color:#fff }`). Nach der
   Umstellung von schwarzer Fläche auf Umriss war es unsichtbar. */

/* 36.2 Schaltflächen: Der Master setzt `height: 40px` fest. Zusammen mit
   eigener Polsterung schiebt das den Text unter die Unterkante — sichtbar
   auf der Anmeldeseite der Kasse („Jetzt registrieren!", „Einloggen").
   Höhe freigeben, Zeilenhöhe auf einen normalen Wert. */
.btn, a.btn, button.btn, input.btn, input[type=submit].btn,
.actionbar .btn, #cart_second .btn, #cart_third .btn, #konto_login .btn {
  height: auto !important; min-height: 48px;
  line-height: 1.25 !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.5rem; box-sizing: border-box; text-align: center;
  white-space: normal;
}
/* Die quadratischen Symbolknöpfe behalten ihre feste Größe */
#visual_calculation .btnCalcOptical,
header.main #customer-menu .menu-item-login,
header.main #customer-menu .menu-item-cart {
  min-height: 0 !important; padding: 0 !important;
}
#visual_calculation .btnCalcOptical { width: 46px !important; height: 46px !important; }

/* Anmelde-/Registrierblock der Kasse: Beschriftungen über die Felder */
#cart_second .login_wrapper label, #cart_second fieldset > label,
#konto_login fieldset > label {
  display: block; text-align: left; margin-bottom: .35rem;
}
#cart_second .login_wrapper input:not(.btn), #konto_login input:not(.btn) {
  width: 100%; box-sizing: border-box;
}

/* 36.3 Anmeldeblock der Kasse: Der Master lässt die Beschriftung links
   neben dem Feld schweben (`label { float: left; width: 160px }`).
   Container ist `#formular .col_right .content`. */
#formular .col_left fieldset,
#formular .col_right fieldset,
#konto_login fieldset, #pw_lost fieldset { position: relative; }
#formular .col_left fieldset > label,
#formular .col_right fieldset > label,
#konto_login fieldset > label, #pw_lost fieldset > label {
  display: block !important; float: none !important; width: auto !important;
  text-align: left; margin: 0 0 .35rem;
  font-size: var(--gl-fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gl-muted); font-weight: 600;
}
#formular .col_left fieldset > input:not(.btn),
#formular .col_right fieldset > input:not(.btn),
#konto_login fieldset > input:not(.btn), #pw_lost fieldset > input:not(.btn) {
  width: 100% !important; box-sizing: border-box; float: none;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  padding: .7rem .85rem; font-size: var(--gl-fs-md);
}
#formular .col_left .btn, #formular .col_right .btn { width: 100%; }
#formular .col_left, #formular .col_right { box-sizing: border-box; }


/* ===================================================================== *
 * 37  FEINSCHLIFF — Aktionsfarben, Knopfsatz, Login-Aufklapper, Korb
 *
 * Anlass: Durchsicht aller Seiten mit Blick auf die Details, die den
 * Unterschied zwischen "ordentlich" und "gut" ausmachen.
 *
 *   37.1  EINE Farbe fuer die Hauptaktion (vorher schwarz UND gruen)
 *   37.2  Text in Schaltflaechen zuverlaessig mittig (WebKit-Eigenheit)
 *   37.3  Login-Aufklapper im Kopf
 *   37.4  Warenkorb: Schriftgroessen zusammenfuehren
 *   37.5  Zeigezustaende durchgaengig
 * ===================================================================== */

/* --------------------------------------------------------------------- *
 * 37.1  Aktionsfarben — verbindlich
 *
 * BEFUND: Der Master kennt zwei Knopfklassen, `.btn` und `.btn.success`,
 * und verteilt sie ohne erkennbares System: die Hauptaktion war je nach
 * Seite jadegruen (Absenden, Einloggen) oder tiefschwarz (Warenkorb,
 * Upload). Fuer den Betrachter wirkt das wie zwei konkurrierende
 * Handlungsaufforderungen.
 *
 * KONSEQUENZ: Drei Stufen, mehr nicht.
 *
 *   1. Hauptaktion   Jadegruen, weisse Schrift   — pro Ansicht genau EINE
 *   2. Nebenaktion   weiss, Rahmen, dunkle Schrift
 *   3. Textaktion    Verweis mit Unterstrich
 *
 * Jadegruen ist die Markenfarbe und traegt bereits die Geldstrecke
 * (Einloggen, Zur Kasse). Schwarz waere die zweite Signalfarbe gewesen —
 * eine zu viel.
 * --------------------------------------------------------------------- */

/* Hauptaktion: `.success` und `.upload.finished` waren schwarz */
.btn.success,
.btn.upload.finished,
.btn.success:link,
.btn.success:visited {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: #fff !important;
}
.btn.success:hover, .btn.success.hover,
.btn.upload.finished:hover {
  background: var(--gl-accent-h) !important;
  border-color: var(--gl-accent-h) !important;
}
.btn.success:active, .btn.success.active {
  background: #0B3529 !important;
  border-color: #0B3529 !important;
}

/* Nebenaktion: weiss mit Rahmen — gilt auch fuer die Zurueck-Wege */
.btn.secondary, .btn.edit, .btn.upload,
.btn.back, a.btn.back, .btn[value*="urück"] {
  background: #fff !important;
  border: 1px solid var(--gl-line-2) !important;
  color: var(--gl-ink) !important;
}
.btn.secondary:hover, .btn.edit:hover, .btn.upload:hover,
.btn.back:hover, a.btn.back:hover {
  background: var(--gl-ink) !important;
  border-color: var(--gl-ink) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------- *
 * 37.2  Text mittig in der Schaltflaeche
 *
 * BEFUND: In Abschnitt 36.2 hatte ich die feste Hoehe des Masters durch
 * `display: inline-flex; align-items: center` ersetzt. In Chromium sitzt
 * der Text damit sauber mittig — in Safari haengt er nach unten und wird
 * bei Fokus unterstrichen. WebKit behandelt den Textinhalt eines
 * `<button>` nicht als vollwertiges Flex-Kind.
 *
 * KONSEQUENZ: Bei `<button>` und `<input>` NICHT ueber Flexbox zentrieren.
 * Zeilenhoehe plus gleiche Innenabstaende oben und unten wirken in jeder
 * Maschine. Flexbox bleibt nur dort, wo ein Symbol neben dem Text steht.
 *
 * Merksatz fuer kuenftige Umbauten: vertikale Zentrierung in nativen
 * Bedienelementen ueber `padding` loesen, nicht ueber `align-items`.
 * --------------------------------------------------------------------- */
button.btn, input.btn, input[type=submit], input[type=button], input[type=reset],
button[type=submit], button[type=button] {
  display: inline-block !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  padding: .95rem 1.75rem !important;
  text-align: center;
  text-decoration: none !important;
  box-sizing: border-box;
  vertical-align: middle;
}
button.btn:focus, input[type=submit]:focus,
button.btn:hover,  input[type=submit]:hover { text-decoration: none !important; }

/* Verweise, die wie Schaltflaechen aussehen, duerfen Flexbox behalten —
   dort steht der Text in einem echten Kindknoten. */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; line-height: 1.2; padding: .8rem 1.75rem;
  text-decoration: none !important; box-sizing: border-box;
}

/* Volle Breite dort, wo die Schaltflaeche allein in einer Spalte steht —
   ein mittig schwebender Knopf unter einem breiten Feld wirkt verrutscht. */
form .btn.full, #formular .btn { width: 100%; }

/* Pflichtfeld-Stern stand verwaist unter dem Feld */
form .required, form em.required, main form > .wrp > em {
  display: block; margin: -.4rem 0 1.25rem; font-size: var(--gl-fs-xs);
  color: var(--gl-muted); font-style: normal;
}

/* --------------------------------------------------------------------- *
 * 37.3  Login-Aufklapper im Kopf  (#login.modal)
 *
 * ACHTUNG SPEZIFITAET: `application_pre.css` des Masters enthaelt
 *
 *     header.main #customer-menu #login.modal a,
 *     header.main #customer-menu #login.modal button { margin: 5px 0 0 !important }
 *
 * Drei IDs UND `!important`. Ein Kind-`!important` auf `#login.modal a`
 * verliert dagegen, weil bei gleichem `!important` die hoehere
 * Spezifitaet entscheidet — nicht die spaetere Position der Datei.
 * Deshalb tragen alle Regeln hier zusaetzlich das Master-Praefix.
 *
 * BEFUND: Der Aufklapper kam unberuehrt aus dem Master und fiel dadurch
 * aus dem Bild: `fieldset` traegt eine beige Flaeche, `label` schwebt
 * links in fester Breite 110 px in der Schrift "bold", das Eingabefeld
 * ist 180 px breit und 30 px hoch, die beiden Verweise darunter tragen
 * dieselbe beige Flaeche und sehen aus wie Schaltflaechen.
 *
 * Drei Schriftschnitte, zwei Feldbreiten, kein Innenabstand links.
 *
 * KONSEQUENZ: Gleiche Bauform wie jedes andere Formular im Laden —
 * Beschriftung als Versalzeile ueber dem Feld, Feld ueber die volle
 * Breite, darunter genau EINE Hauptaktion und zwei Textverweise.
 * --------------------------------------------------------------------- */
#login.modal,
header.main #customer-menu #login.modal {
  padding: 1.5rem !important;
  border: 1px solid var(--gl-line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(20, 18, 15, .16);
}
#login.modal form,
header.main #customer-menu #login.modal form { display: block; }

#login.modal fieldset,
header.main #customer-menu #login.modal fieldset {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.1rem !important;
  display: block !important;
}
#login.modal label,
header.main #customer-menu #login.modal label {
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 0 .45rem !important;
  margin: 0 !important;
  font-family: "regular", sans-serif !important;
  font-size: var(--gl-fs-xs) !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gl-muted) !important;
  line-height: 1.2 !important;
}
#login.modal input[type=text],
header.main #customer-menu #login.modal input[type=text],
#login.modal input[type=password],
header.main #customer-menu #login.modal input[type=password] {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  box-sizing: border-box;
  padding: 0 .9rem !important;
  /* Der Master laesst das Feld rechts fliessen und gibt ihm 10 px Abstand
     rechts — dadurch stand es 10 px links neben der Flucht von Beschriftung
     und Schaltflaeche. */
  float: none !important;
  margin: 0 !important;
  font-family: "regular", sans-serif !important;
  font-size: var(--gl-fs-md) !important;
  font-weight: 400 !important;
  background: #fff !important;
  border: 1px solid var(--gl-line-2) !important;
  border-radius: 10px !important;
  color: var(--gl-ink) !important;
}
#login.modal input[type=text]:focus,
header.main #customer-menu #login.modal input[type=text]:focus,
#login.modal input[type=password]:focus,
header.main #customer-menu #login.modal input[type=password]:focus {
  border-color: var(--gl-accent) !important;
  outline: 2px solid rgba(23, 96, 79, .18);
  outline-offset: 0;
}
#login.modal .btn,
header.main #customer-menu #login.modal .btn {
  /* Als Block, nicht inline-block: inline gesetzt begann die Flaeche 10 px
     rechts der Feldkante, weil sie in der Textzeile des Formulars sass.
     `text-align` braucht `!important`, weil der Master es auf `left` setzt. */
  display: block !important;
  width: 100% !important;
  margin: .35rem 0 1.1rem !important;
  text-align: center !important;
}
/* Die beiden Verweise: Textstufe, nicht noch einmal Flaeche */
/* Der Master gibt den beiden Verweisen `display: block` und volle Breite —
   sie sahen dadurch wie zwei weitere Schaltflaechen aus und stellten drei
   gleichrangige Aktionen nebeneinander. Sie gehoeren in EINE Zeile unter
   die Hauptaktion, als Text. */
#login.modal form > a,
header.main #customer-menu #login.modal form > a {
  display: inline-block !important;
  width: auto !important;
  float: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 1.6rem 0 0 !important;
  font-size: var(--gl-fs-sm);
  color: var(--gl-muted-2) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--gl-line-2);
  line-height: 1.9;
}
#login.modal form > a:hover,
header.main #customer-menu #login.modal form > a:hover {
  color: var(--gl-ink) !important;
  border-bottom-color: var(--gl-ink);
}

/* --------------------------------------------------------------------- *
 * 37.4  Warenkorb — Schriftgroessen zusammenfuehren
 *
 * BEFUND: cart_first zeigte sieben Groessen-/Schnittkombinationen. Die
 * Tabelle mischt Artikelnamen, Merkmalzeilen, Preise und Summen in je
 * eigener Groesse, obwohl es inhaltlich nur drei Ebenen gibt.
 *
 * KONSEQUENZ: Kopfzeile klein und versal, Artikelname halbfett,
 * alles Uebrige eine Groesse. Zahlen bekommen Tabellenziffern, damit
 * die Betraege in der Spalte untereinander fluchten.
 * --------------------------------------------------------------------- */
#warenkorb table, .cart table, #cart_first table { font-size: var(--gl-fs-md); }

#warenkorb th, .cart th, #cart_first th {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  padding: 0 0 1rem;
}
#warenkorb td, .cart td, #cart_first td {
  font-size: var(--gl-fs-md);
  font-weight: 400;
  color: var(--gl-ink);
  padding: .85rem 0;
  vertical-align: top;
}
#warenkorb td b, #warenkorb td strong,
.cart td b, .cart td strong { font-weight: 600; }

/* Betraege: gleiche Ziffernbreite, damit die Spalte fluchtet */
#warenkorb td:last-child, .cart td:last-child,
#warenkorb .preis, #warenkorb .summe, .cart .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}
/* Merkmalzeilen (Auflage, Seitenanzahl) sind Beiwerk, kein Inhalt */
#warenkorb tr.option td, #warenkorb tr.attribute td,
.cart tr.option td { color: var(--gl-muted-2); }

/* Gesamtsumme: die einzige hervorgehobene Zahl der Seite */
#warenkorb .gesamt, #warenkorb tr.total td, .cart tr.total td {
  font-size: var(--gl-fs-lg);
  font-weight: 600;
  color: var(--gl-accent);
}
/* "inkl . 19.00% MwSt." — der Master setzt ein Leerzeichen vor den Punkt;
   das laesst sich per CSS nicht entfernen, aber optisch beruhigen. */
#warenkorb tr.tax td, .cart tr.tax td { color: var(--gl-muted); }

/* Loeschen: rotes Kreuz war das farbstaerkste Element im Korb */
#warenkorb a.delete, #warenkorb a[href*="del"], .cart a.delete {
  color: var(--gl-muted) !important;
  font-size: var(--gl-fs-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--gl-line-2);
}
#warenkorb a.delete:hover, .cart a.delete:hover { color: #B3261E !important; border-bottom-color: #B3261E; }
#warenkorb a.delete::before, .cart a.delete::before { color: inherit !important; }

/* --------------------------------------------------------------------- *
 * 37.5  Zeigezustaende
 *
 * BEFUND: Mehrere Flaechen hatten gar keinen Zeigezustand, andere den
 * des Masters in Petrol. Ohne Rueckmeldung beim Ueberfahren wirkt eine
 * Seite tot, egal wie sauber sie steht.
 * --------------------------------------------------------------------- */
a { transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.btn, a.btn, button.btn, input[type=submit] { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

main a:not(.btn):not(.gl-nav__link):hover { color: var(--gl-accent); }

/* Tabellenzeilen im Korb und in der Bestellhistorie */
#warenkorb tbody tr:hover td, .cart tbody tr:hover td { background: rgba(237, 235, 229, .5); }

/* --------------------------------------------------------------------- *
 * 37.6  Einspaltige Formulare bekommen ein Satzmass
 *
 * BEFUND: `#formular` fuellt auf Seiten wie „Passwort vergessen", Kontakt
 * und Newsletter die volle Kartenbreite. Ein 1076 px breites Eingabefeld
 * fuer eine E-Mail-Adresse ist nicht nur haesslich, es macht die Zeile
 * auch unlesbar lang. Die Schaltflaeche darunter stand ausserdem im
 * Inline-Fluss und rutschte dadurch aus der Flucht des Feldes.
 *
 * KONSEQUENZ: Einspaltige Formulare auf 34rem begrenzen, Feld und
 * Schaltflaeche als Block ueber die volle Breite dieses Satzmasses.
 * Damit fluchten Beschriftung, Feld und Aktion auf derselben Kante.
 *
 * Unterschieden wird ueber `:has()` — ein Formular MIT `.col_left` ist
 * die zweispaltige Kasse und bleibt unberuehrt. Das ist verlaesslicher
 * als die Seiten-ID, die auf Druckmuster bereits danebenlag (siehe
 * docs/10, G21).
 * --------------------------------------------------------------------- */
#formular:not(:has(.col_left)):not(:has(.col_right)) fieldset,
#formular:not(:has(.col_left)):not(:has(.col_right)) > p,
#formular:not(:has(.col_left)):not(:has(.col_right)) > .btn,
#formular:not(:has(.col_left)):not(:has(.col_right)) > .requirement,
#formular:not(:has(.col_left)):not(:has(.col_right)) > .hint {
  max-width: 34rem;
}
#formular:not(:has(.col_left)):not(:has(.col_right)) > .btn {
  /* `!important` ist hier noetig, weil 37.2 `display: inline-block` mit
     `!important` setzt, um die feste Hoehe des Masters zu brechen.
     Ohne Gegenzug bliebe die Schaltflaeche im Inline-Fluss stehen und
     saesse 250 px neben der Flucht des Eingabefeldes. */
  display: block !important;
  width: 100%;
  margin: 1.5rem 0 0 !important;
}
#formular fieldset > input[type=text],
#formular fieldset > input[type=email],
#formular fieldset > input[type=password],
#formular fieldset > input[type=tel],
#formular fieldset > textarea,
#formular fieldset > select { width: 100%; box-sizing: border-box; }

/* Der Pflicht-Stern heisst im Master `.requirement` und steht im Markup
   NACH dem Eingabefeld — er landete dadurch als verwaiste Zeile darunter.
   Ihn per Positionierung an die Beschriftung zu schieben scheitert daran,
   dass die Breite der Beschriftung unbekannt ist.
   Loesung: das freie `<span>` ausblenden und den Stern dort erzeugen, wo
   er hingehoert — an der Beschriftung eines Feldes, das `required` traegt.
   Das Attribut steht bereits im Master-Markup, es wurde nur nie genutzt. */
#formular fieldset > .requirement,
form fieldset > .requirement { display: none; }
#formular fieldset:has(input[required]) > label::after,
#formular fieldset:has(textarea[required]) > label::after,
#formular fieldset:has(select[required]) > label::after {
  content: " *"; color: var(--gl-muted); font-weight: 400;
}
#formular fieldset { margin-bottom: 1.4rem; }

/* --------------------------------------------------------------------- *
 * 37.7  Kopfsymbole — aktiver Zustand und Statusfarbe
 *
 * BEFUND 1: Auf den Warenkorbseiten setzt der Master `.active` auf den
 * Warenkorbverweis und faerbt dessen Symbol weiss:
 *
 *     header.main #customer-menu a.active::before { color: #fff }
 *
 * Das war fuer den dunklen Kopf des Masters gedacht. Auf unserem hellen
 * Kopf verschwindet der Wagen vollstaendig — sichtbar bleiben nur die
 * beiden Raeder als weisse Punkte. Ausgerechnet auf der Kaufstrecke.
 *
 * Gefunden hat das die neue Pruefung „unsichtbare Symbole" in
 * `scripts/pruefen.js`, nicht das Auge — im Kleinbild sieht der jadegruene
 * Zaehler wie ein vollstaendiges Symbol aus. Siehe docs/10, G26.
 *
 * BEFUND 2: Das Statusabzeichen am Kontosymbol traegt `rgb(105, 202, 0)` —
 * ein grelles Grasgruen, das mit keinem Ton der Palette verwandt ist. Im
 * Kopf standen dadurch zwei Gruen nebeneinander.
 * --------------------------------------------------------------------- */
header.main #customer-menu a.menu-item-cart.active::before,
header.main #customer-menu a.active::before,
header.main #customer-menu > a.active::before {
  color: var(--gl-ink) !important;
}
/* Der aktive Zustand darf sichtbar bleiben — aber ueber die Markenfarbe,
   nicht ueber das Verschwinden des Symbols. */
header.main #customer-menu a.menu-item-cart.active:hover::before {
  color: var(--gl-accent) !important;
}

header.main #customer-menu button.login_status_green::after,
header.main #customer-menu .login_status_green::after {
  background: var(--gl-accent) !important;
}
header.main #customer-menu button.login_status_red::after,
header.main #customer-menu .login_status_red::after {
  background: var(--gl-muted) !important;
}

/* --------------------------------------------------------------------- *
 * 37.8  Schaltflaechen, die nur ein Symbol tragen
 *
 * BEFUND: In der Sendungsverfolgung steht `<button class="btn"
 * name="cmd_calc" title="Suchen"></button>` — ohne Textinhalt. Der
 * Innenabstand aus 37.2 (28 px links und rechts) ist auf Text ausgelegt;
 * bei leerem Inhalt lief das Symbol aus der Flaeche heraus
 * (56 px breit, 76 px Inhalt).
 *
 * KONSEQUENZ: `:empty` greift genau diesen Fall — quadratische Flaeche,
 * gleicher Abstand ringsum, Symbol mittig.
 * --------------------------------------------------------------------- */
button.btn:empty, input.btn[value=""], a.btn:empty {
  /* `!important` noetig, weil 37.2 `height: auto !important` und
     `min-height: 0 !important` setzt, um die feste Hoehe des Masters zu
     brechen. Ohne Gegenzug bliebe die Flaeche 40x20 px. */
  width: 50px !important; min-width: 50px; height: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
button.btn:empty::before, a.btn:empty::before {
  line-height: 1; font-size: 20px;
}

/* --------------------------------------------------------------------- *
 * 37.9  Eingabefelder — eine Gestalt fuer den ganzen Laden
 *
 * BEFUND: Die Felder waren bisher seitenweise gefasst — Kasse, Anmeldung,
 * Passwort, Login-Aufklapper. Ueberall dort, wo keine eigene Regel griff,
 * stand noch der Master-Standard: 40 px hoch, 2 px Radius, kalter Rahmen.
 * In der Sendungsverfolgung standen so ein 40-px-Feld und eine 50-px-
 * Schaltflaeche nebeneinander.
 *
 * Das ist der Fehler im Vorgehen, nicht in der Regel: Grundformen gehoeren
 * EINMAL global gesetzt, Sonderfaelle danach. Umgekehrt bleibt immer eine
 * Seite uebrig, an die niemand gedacht hat.
 *
 * Bewusst NICHT erfasst: `#visual_calculation`. Die Auswahlfelder der
 * Kalkulation sind keine `<select>`, sondern `label`-Konstruktionen mit
 * eigenem Aufklappfeld (docs/10, G4) — sie haben ihre Regeln in
 * Abschnitt 30 und wuerden hier nur kollidieren.
 * --------------------------------------------------------------------- */
main input[type=text],
main input[type=email],
main input[type=password],
main input[type=tel],
main input[type=number],
main input[type=search],
main input[type=url],
main input[type=date],
main select,
main textarea {
  height: 46px;
  box-sizing: border-box;
  padding: 0 .9rem;
  border: 1px solid var(--gl-line-2);
  border-radius: var(--gl-radius-sm);
  background: #fff;
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-md);
  line-height: 1.2;
  color: var(--gl-ink);
}
main textarea {
  height: auto;
  min-height: 9rem;
  padding: .8rem .9rem;
  line-height: 1.55;
}
main input[type=text]:focus,
main input[type=email]:focus,
main input[type=password]:focus,
main input[type=tel]:focus,
main input[type=number]:focus,
main input[type=search]:focus,
main select:focus,
main textarea:focus {
  border-color: var(--gl-accent);
  outline: 2px solid rgba(23, 96, 79, .16);
  outline-offset: 0;
}
/* Kalkulation ausgenommen — dort gilt Abschnitt 30 */
#visual_calculation input[type=text],
#visual_calculation select { height: auto; }

/* Symbol-Schaltflaechen auf Feldhoehe bringen, damit sie in einer Zeile
   mit einem Feld buendig stehen. */
button.btn:empty, input.btn[value=""], a.btn:empty {
  width: 46px !important; min-width: 46px;
  height: 46px !important; min-height: 46px !important;
}

/* --------------------------------------------------------------------- *
 * 37.10  Kontakt- und Druckmusterformular
 *
 * Drei Befunde aus der Sichtprüfung der Kontaktseite:
 *
 * 1. Ueber der Schaltflaeche stand ein grauer Balken: `<progress
 *    class="progressBar">` OHNE `value`. Ein `<progress>` ohne Wert ist
 *    „unbestimmt" und wird vom Browser dauerhaft gezeichnet — der Master
 *    blendet es nur per JavaScript waehrend eines Uploads ein, ohne es
 *    vorher zu verstecken.
 *
 * 2. Die Dateiauswahl war das rohe Bedienelement des Browsers, inklusive
 *    englischer Beschriftung „No file chosen".
 *
 * 3. `<span class="requirement">*</span>` stand als Block am rechten Rand.
 *
 * Nebenbei bestaetigt die Seite noch einmal G21: das Kontaktformular
 * traegt die ID `#druckmuster`. Seiten-IDs taugen hier nicht als Anker.
 * --------------------------------------------------------------------- */

/* 1 — Fortschrittsbalken nur waehrend eines Uploads */
progress.progressBar:not([value]),
progress.progressBar[value="0"] { display: none !important; }
progress.progressBar {
  width: 100%; height: 4px; margin: 0 0 1rem;
  border: 0; border-radius: 2px; background: var(--gl-surface-2);
  appearance: none; -webkit-appearance: none;
}
progress.progressBar::-webkit-progress-bar  { background: var(--gl-surface-2); border-radius: 2px; }
progress.progressBar::-webkit-progress-value { background: var(--gl-accent); border-radius: 2px; }
progress.progressBar::-moz-progress-bar      { background: var(--gl-accent); border-radius: 2px; }

/* 2 — Dateiauswahl: die Schaltflaeche des Browsers als Nebenaktion fassen.
       Der Text „No file chosen" kommt vom Browser und ist per CSS nicht
       erreichbar; erreichbar ist die Schaltflaeche davor. */
main input[type=file] {
  height: auto; padding: .55rem; line-height: 1.4;
  background: #fff; border: 1px dashed var(--gl-line-2);
  border-radius: var(--gl-radius-sm); width: 100%; box-sizing: border-box;
  font-size: var(--gl-fs-sm); color: var(--gl-muted-2);
}
main input[type=file]::file-selector-button {
  margin-right: .9rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--gl-line-2); border-radius: var(--gl-radius-sm);
  background: #fff; color: var(--gl-ink);
  font-family: "regular", sans-serif; font-size: var(--gl-fs-sm);
  cursor: pointer;
}
main input[type=file]::file-selector-button:hover {
  background: var(--gl-ink); border-color: var(--gl-ink); color: #fff;
}
main fieldset.upload_field { margin-bottom: 1.4rem; }

/* 3 — Pflichtstern: der freie `<span>` verschwindet ueberall im Inhalt,
       der Stern kommt aus 37.6 an der Beschriftung. Hoehere Spezifitaet
       als zuvor, weil der Master `display: block` gesetzt hatte. */
main form fieldset > span.requirement,
main form span.requirement { display: none !important; }

/* --------------------------------------------------------------------- *
 * 37.11  Wo steht die Hauptaktion eines Formulars?
 *
 * BEFUND: drei verschiedene Antworten im selben Laden — mittig (Kontakt),
 * rechts (Kasse), volle Breite (Passwort vergessen).
 *
 * KONSEQUENZ: eine Regel, an der Breite des Formulars festgemacht.
 *   schmal, einspaltig  -> volle Breite  (37.6)
 *   breit / mehrspaltig -> rechts, Inhaltsbreite
 * Mittig gibt es nicht mehr; mittig hat keine Kante, an der das Auge
 * entlanglaufen kann.
 * --------------------------------------------------------------------- */
main form > .btn:not(:only-child),
#druckmuster > .btn, #druckmuster button.btn {
  display: block !important;
  width: auto !important;
  min-width: 14rem;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 1.5rem !important;
}
/* Der Browser setzt „No file chosen" fett und schwarz; die Farbe laesst
   sich am Element steuern, der Text nicht. */
main input[type=file] { font-weight: 400; color: var(--gl-muted-2); }

/* --------------------------------------------------------------------- *
 * 37.12  Nachbesserung aus der Zeigezustands- und Typo-Pruefung
 *
 * BEFUND 1 — Abschnitt 37.4 hat nie gegriffen. Ich hatte auf `#warenkorb`,
 * `.cart` und `#cart_first` gezielt. Der Korb heisst aber
 *
 *     <div id="cart" class="wrp cf"><form class="cf">
 *       <table class="preisberechnung">
 *
 * Die Seite heisst `cart_first.htm`, der Container `#cart`, die Tabelle
 * `preisberechnung`. Wieder G21: nicht von der Seite auf die ID schliessen,
 * sondern im ausgelieferten HTML nachsehen. Sechs Schrift-Kombinationen
 * standen deshalb unveraendert im Korb.
 *
 * BEFUND 2 — Die Wortmarke bekam beim Ueberfahren einen Unterstrich.
 *
 * BEFUND 3 — Der Berechnen-Knopf faerbt seinen Text beim Ueberfahren weiss
 * (Master-Regel fuer eine gefuellte Flaeche), waehrend unsere Fassung ein
 * Umriss ist. Weisser Text auf weissem Grund. Derselbe Fehlertyp wie beim
 * unsichtbaren Symbol in 36.1 — wer eine Flaeche von gefuellt auf Umriss
 * umstellt, muss ALLE Zustaende mitnehmen, nicht nur den Ruhezustand.
 * --------------------------------------------------------------------- */

/* 1 — Korbtabelle */
#cart table.preisberechnung { font-size: var(--gl-fs-md); width: 100%; }
#cart table.preisberechnung th {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gl-muted); padding: 0 0 1rem; text-align: left;
}
#cart table.preisberechnung td {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-md); font-weight: 400;
  color: var(--gl-ink); padding: .8rem 0; vertical-align: top;
}
#cart table.preisberechnung td b,
#cart table.preisberechnung td strong,
#cart table.preisberechnung td .bold { font-family: "regular", sans-serif; font-weight: 600; }
/* Betraege fluchten nur mit Tabellenziffern untereinander */
#cart table.preisberechnung td:last-child,
#cart table.preisberechnung th:last-child {
  text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* Merkmalzeilen sind Beiwerk */
#cart table.preisberechnung tr.detail td,
#cart table.preisberechnung tr.option td { color: var(--gl-muted-2); padding: .3rem 0; }
/* Genau EINE hervorgehobene Zahl: der Gesamtpreis */
#cart table.preisberechnung tr.gesamt td,
#cart table.preisberechnung .gesamtpreis {
  font-size: var(--gl-fs-lg); font-weight: 600; color: var(--gl-accent);
}
#cart table.preisberechnung tbody tr:hover td { background: rgba(237, 235, 229, .45); }
#cart a.delete, #cart a[href*="loeschen"], #cart a[href*="del="] {
  color: var(--gl-muted) !important; font-size: var(--gl-fs-sm); text-decoration: none;
}
#cart a.delete:hover, #cart a[href*="loeschen"]:hover, #cart a[href*="del="]:hover { color: #B3261E !important; }

/* 2 — Die Wortmarke ist kein Textlink */
.gl-header__brand,
.gl-header__brand:hover,
.gl-header__brand:focus { text-decoration: none !important; }

/* 3 — Berechnen-Knopf: Umriss fuellt sich beim Ueberfahren */
#visual_calculation .btnCalcOptical:hover,
#visual_calculation .btnCalcOptical:focus {
  background: var(--gl-ink) !important;
  border-color: var(--gl-ink) !important;
  color: #fff !important;
}
#visual_calculation .btnCalcOptical:hover::before,
#visual_calculation .btnCalcOptical:focus::before { color: #fff !important; }

/* 4 — Auswahlfelder der Kalkulation hatten gar keine Reaktion */
#visual_calculation label.default:hover { border-color: var(--gl-ink); }
#visual_calculation label.default { transition: border-color .15s ease; }

/* --------------------------------------------------------------------- *
 * 37.13  Zusammenfassung statt Anbau
 *
 * BEFUND: Fuer `.btnCalcOptical` standen am Ende SECHS eigene Regelsaetze
 * in dieser Datei, aus vier Arbeitsrunden gewachsen — Groesse, Farbe,
 * Symbolfarbe, Zeigezustand, jeweils teils mit `!important`. Welcher Wert
 * am Ende gilt, war ohne Werkzeug nicht mehr zu sagen; der Zeigezustand
 * faerbte den Text weiss, waehrend die Flaeche transparent blieb.
 *
 * KONSEQUENZ, und das ist die eigentliche Lehre dieser Runde: Wenn ein
 * Element in mehr als zwei Anlaeufen nachgebessert wurde, hilft kein
 * weiterer Anbau. Dann gehoert EIN abschliessender Satz an das Ende der
 * Datei, der alle Zustaende benennt — Ruhe, Zeigen, Fokus, Symbol.
 *
 * Zweiter Punkt: Hierarchie im Warenkorb ueber FARBE statt ueber Groesse.
 * Sechs Schriftgroessen fuer sechs Bedeutungen sind sechs Groessen zu
 * viel; drei Groessen und zwei Farbstufen tragen dieselbe Ordnung.
 * --------------------------------------------------------------------- */

/* --- Berechnen-Knopf, abschliessend ---------------------------------- */
#visual_calculation .btnCalcOptical {
  width: 46px !important; height: 46px !important;
  min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #fff !important;
  border: 1px solid var(--gl-line-2) !important;
  border-radius: var(--gl-radius-sm) !important;
  color: var(--gl-ink) !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#visual_calculation .btnCalcOptical::before {
  color: var(--gl-ink) !important;
  font-size: 22px !important; line-height: 1 !important;
  text-indent: 0 !important; width: auto !important; height: auto !important;
}
#visual_calculation .btnCalcOptical:hover,
#visual_calculation .btnCalcOptical:focus {
  background: var(--gl-ink) !important;
  border-color: var(--gl-ink) !important;
  color: #fff !important;
}
#visual_calculation .btnCalcOptical:hover::before,
#visual_calculation .btnCalcOptical:focus::before { color: #fff !important; }
#visual_calculation .btnCalcOptical:focus-visible {
  outline: 2px solid var(--gl-accent); outline-offset: 2px;
}
/* Die rote Loeschen-Variante des Masters bleibt als Warnung erkennbar,
   aber in gedecktem Rot statt `rgb(232,1,0)`. */
#visual_calculation .btnCalcOptical.delete {
  background: #fff !important; border-color: #D8C3C0 !important; color: #B3261E !important;
}
#visual_calculation .btnCalcOptical.delete::before { color: #B3261E !important; }
#visual_calculation .btnCalcOptical.delete:hover {
  background: #B3261E !important; border-color: #B3261E !important;
}
#visual_calculation .btnCalcOptical.delete:hover::before { color: #fff !important; }

/* --- Warenkorb: Ordnung ueber Farbe ---------------------------------- */
#cart table.preisberechnung tbody tr.product_calculation td {
  font-size: var(--gl-fs-md) !important;
  color: var(--gl-muted) !important;
  padding: .25rem 0 !important;
}
#cart table.preisberechnung td small {
  font-size: var(--gl-fs-sm); color: var(--gl-muted);
}
#cart table.preisberechnung td h3 {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-md); font-weight: 500; margin: 0 0 .2rem;
}

/* --------------------------------------------------------------------- *
 * 37.14  Loeschen im Warenkorb
 *
 * BEFUND: Das rote Kreuz war das farbstaerkste Element der ganzen Seite —
 * staerker als „Zur Kasse gehen". Eine Abrissfunktion darf nicht lauter
 * rufen als der Kaufabschluss.
 *
 * Das Kreuz ist KEIN Pseudoelement, sondern ein eigenes `<i class="icon
 * delete …">`. Die Regel aus 37.4 lief deshalb ins Leere.
 *
 * NEBENBEFUND, wichtig fuer jede kuenftige Regel im Korb: der Master
 * schreibt den Produktnamen ungefiltert in das Klassenattribut —
 *
 *     <a class="delete Mein erster Artikel" href="...">
 *
 * Aus den Leerzeichen werden echte Klassen (`.Mein`, `.erster`,
 * `.Artikel`). Ein Selektor wie `.delete.Artikel` wuerde also je nach
 * Warenkorbinhalt zufaellig treffen. Klassen im Korb nur einzeln und nie
 * kombiniert verwenden.
 * --------------------------------------------------------------------- */
#cart a.delete, #cart a.delete i.icon {
  color: var(--gl-muted) !important;
  font-size: var(--gl-fs-sm);
}
#cart a.delete i.icon { font-size: 15px; margin-right: .35rem; }
#cart a.delete:hover, #cart a.delete:hover i.icon { color: #B3261E !important; }

/* --------------------------------------------------------------------- *
 * 37.15  Mobil: Hauptaktionen ueber die volle Breite
 *
 * BEFUND: Die Regel aus 37.11 (Hauptaktion rechts, Inhaltsbreite) ist auf
 * dem Schreibtisch richtig und auf dem Telefon falsch. Auf der
 * Registrierung lief „Weiter" aus `section.actionbar` mit fester Breite
 * 350 px bis x=580 — bei 390 px Sichtbreite.
 *
 * Ebenfalls: die Kontoschaltflaeche im Offcanvas hatte 40 px Hoehe bei
 * 43 px Inhalt. Drei Pixel, die man auf dem Bild nicht sieht und im
 * Messwert sofort.
 * --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  main form > .btn,
  section.actionbar .btn,
  section.actionbar button.btn,
  #formular .btn,
  #druckmuster > .btn, #druckmuster button.btn {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* `flex-shrink: 0` ist hier keine Kosmetik: in einer Flex-Spalte darf ein
     Kind unter seine Inhaltshoehe schrumpfen. „Weiter" stand dadurch mit
     30 px Hoehe bei 50 px Inhalt da — derselbe abgeschnittene Text wie bei
     der festen Master-Hoehe, nur mit anderer Ursache. */
  section.actionbar { display: flex; flex-direction: column; gap: .75rem; }
  section.actionbar > .btn,
  section.actionbar > button.btn {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 48px !important;
  }

  /* Die Kontoschaltflaeche sitzt in `nav#customer-menu` im Kopf, nicht im
     Offcanvas — dort zeigt sie mobil zusaetzlich den Text „Mein Konto". */
  header.main #customer-menu .menu-item-login,
  header.main #customer-menu button.menu-item-login {
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    padding: .35rem 0 !important;
  }

  /* „Adressbuch" ist ein `<span class="btn edit">` mit `position: absolute`
     in der oberen rechten Ecke der Karte. Auf 390 px legt es sich ueber die
     Ueberschrift „Ihre Adressdaten". Absolute Positionierung, die auf dem
     Schreibtisch passt, muss auf dem Telefon in den Fluss zurueck. */
  #addressBookModal, span.btn.edit#addressBookModal {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    /* margin-left ausdruecklich auf 0: die Nebenaktion soll mit
       Ueberschrift und Feldern auf derselben Kante stehen. */
    margin: 0 0 1.5rem 0 !important;
  }
  /* Nebenaktion gehoert unter die Hauptaktion, nicht darueber */
  section.actionbar .btn.secondary, section.actionbar .btn.back { order: 2; }

  header.main #offcanvas .menu-item-login,
  header.main #offcanvas button.menu-item-login,
  #offcanvas .menu-item-login {
    height: auto !important;
    min-height: 46px !important;
    line-height: 1.3 !important;
    padding: .6rem 0 !important;
  }
}


/* --------------------------------------------------------------------- *
 * 37.16  Der Aufruf auf der Startseite ist die Hauptaktion
 *
 * BEFUND: `a.slide__text-link` im Titelbild war als Umriss gesetzt —
 * die einzige Hauptaktion des Ladens, die nicht in der Hauptfarbe stand.
 * Genau die Uneinheitlichkeit, die 37.1 beseitigen sollte.
 *
 * Der Umriss war seinerzeit eine Ruecksicht auf das helle Titelbild.
 * Jadegruen traegt auf diesem Bild aber ebenso, und Einheitlichkeit wiegt
 * hier schwerer als der Einzelfall: Wer den Laden zweimal besucht, soll
 * die Kauffarbe wiedererkennen.
 * --------------------------------------------------------------------- */
.slider .slide__text-link,
a.slide__text-link {
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: #fff !important;
}
.slider .slide__text-link:hover,
a.slide__text-link:hover {
  background: var(--gl-accent-h) !important;
  border-color: var(--gl-accent-h) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------- *
 * 37.17  Schaltflaechen mit Symbol vor dem Text
 *
 * BEFUND: „Daten hochladen" war 69 px hoch, waehrend jede andere
 * Schaltflaeche 48 bis 50 px misst, und das Wagensymbol sass zu hoch.
 *
 * Ursache: Das Symbol ist ein `::before` aus der Icon-Schrift mit
 * `display: inline-block; width: 38px; height: 38px; line-height: 38px`
 * und `vertical-align: baseline`. Ein 38 px hohes Inline-Element auf der
 * Grundlinie zieht die gesamte Zeilenbox nach oben — 38 px Symbol plus
 * Unterlaenge plus 2x15 px Innenabstand ergeben die 69 px.
 *
 * EIGENER ANTEIL, ehrlich benannt: Solange die feste `height: 40px` des
 * Masters galt, war das nicht zu sehen — die Zeilenbox wurde einfach
 * abgeschnitten (und mit ihr das Symbol). Als ich in 37.2 die feste Hoehe
 * gegen `padding` tauschte, um den abgeschnittenen Text zu beheben, wurde
 * aus dem verdeckten Fehler ein sichtbarer. Die Ursache lag schon vorher
 * im Master; mein Eingriff hat sie freigelegt, nicht erzeugt — repariert
 * war sie damit aber auch nicht.
 *
 * KONSEQUENZ: Symbol auf `vertical-align: middle`, eigene Masse loesen,
 * Zeilenhoehe 1. Dann bestimmt der Text die Zeilenbox und das Symbol
 * sitzt mittig daneben.
 * --------------------------------------------------------------------- */
.btn.success::before,
.btn.upload::before,
.btn.upload.finished::before,
button.btn.success::before {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 21px !important;
  vertical-align: -.22em !important;
  margin: 0 .6rem 0 0 !important;
  float: none !important;
  text-indent: 0 !important;
}
/* Die Hauptaktion einer Artikelseite darf etwas kraeftiger stehen als eine
   Formularschaltflaeche — aber in derselben Familie, nicht als Ausreisser. */
#visual_calculation .btn.success,
section .btn.success {
  min-height: 54px;
  padding: .9rem 1.9rem !important;
  font-size: var(--gl-fs-md);
}

/* --------------------------------------------------------------------- *
 * 37.18  Herstellernennung in der Fussleiste
 *
 * BEFUND: „Lead-Print ONLINE DRUCKSHOP" stand in Weiss und 12 px — also
 * genauso kraeftig wie die eigene Zeile „2026 | handmade | authentic |
 * ceramics". Zwei gleich laute Absender in derselben Leiste.
 *
 * ENTSCHEIDUNG: zuruecknehmen, nicht entfernen. Der Hinweis ist die
 * Nennung des Softwareherstellers; ob er weg darf, ist eine Frage des
 * Vertrags mit Lead-Print und nicht meine. Gedaempft erfuellt er seinen
 * Zweck, ohne der Marke die Fussleiste streitig zu machen.
 *
 * WENN er ganz weg soll: Der Master haelt dafuer einen eigenen Block
 * bereit — `{block name="footer-brand"}` in `data/inc.footer.htm`. Weil
 * Bloecke nur aus der `{extends}`-Datei heraus greifen und der Footer per
 * `{include}` eingebunden wird, braeuchte es dafuer eine Vollkopie von
 * `data/inc.footer.htm` im Child (Stufe 5). Ein Einzeiler waere dagegen
 * `display: none` hier — reversibel, aber der Verweis bliebe im Quelltext.
 * Beides erst nach ausdruecklicher Freigabe.
 * --------------------------------------------------------------------- */
#footer-bar .leadprint-brand,
#footer-bar a.leadprint-brand {
  color: rgba(255, 255, 255, .38) !important;
  font-size: 11px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .15s ease;
}
#footer-bar .leadprint-brand:hover {
  color: rgba(255, 255, 255, .72) !important;
}

/* --------------------------------------------------------------------- *
 * 37.19  Artikelseite: Abschnitte statt toter Reiterleiste
 *
 * Ein kleines Skript in `data/inc.header.htm` schiebt jedes `.tab` vor
 * seinen zugehoerigen `.tab_content` (Zuordnung ueber `menu-item-N`) und
 * markiert es mit `.gl-abschnitt`. Hier bekommt es das Aussehen einer
 * Abschnittsueberschrift — die Reiterleiste selbst war im Layout
 * „optical" ausgeblendet und ohne Umschaltlogik.
 * --------------------------------------------------------------------- */
#product_informations header:empty { display: none; }
#product_informations .content .tab.gl-abschnitt {
  display: block !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  cursor: default;
}
#product_informations .content .tab.gl-abschnitt ~ .tab.gl-abschnitt { margin-top: 2.5rem !important; }
#product_informations .content > article.tab_content { margin-bottom: 2.25rem; }
#product_informations .content > article.tab_content:last-child { margin-bottom: 0; }

/* Einleitung und nachfolgende Liste standen ohne Luft aufeinander: `.gl-intro p`
   hat bewusst `margin: 0`, weil der Block in der Warengruppe allein steht. Auf
   der Artikelseite folgt darunter die Schrittliste. */
.gl-intro + ol.gl-steps,
.gl-intro + ul.gl-facts,
#product_informations .gl-intro { margin-top: 1.75rem; }
#product_informations .gl-intro { margin-top: 0; margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------- *
 * 37.20  Lupe auf der Artikelkachel
 *
 * BEFUND: `a.fresco::before` ist ein weisses „+" (Icon-Schrift, 30 px) auf
 * einer Flaeche `rgba(255,255,255,.2)`. Ueber der hellen Produktfotografie
 * — creme Hintergrund, weisse Keramik — war davon nichts zu sehen.
 *
 * Der Fehler war vorher nicht auffindbar: Der einzige Artikel des Ladens
 * hatte gar kein Bild, also gab es auch keine Lupe. Er trat erst zutage,
 * nachdem das Vorschaubild gesetzt war. Merksatz: **Prüfungen finden nur,
 * was auch gerendert wird** — dieselbe Ursache wie bei der ausgeloggten
 * Kasse (docs/10, G26).
 * --------------------------------------------------------------------- */
/* NUR die Kachel-Lupe der Warengruppenliste. Ohne diese Eingrenzung traf
   die Regel auch die Miniaturen der grossen Galerie (Abschnitt 38) — beide
   sind `a.fresco`. Die Miniaturen waren dadurch 28 px grosse Kreise.
   Derselbe Fehlertyp wie G31: die eigene Regel schlaegt die eigene Regel. */
.product-listing a.fresco,
#overview a.fresco,
.trade-groups a.fresco {
  background: rgba(255, 255, 255, .92) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(20, 18, 15, .18);
  width: 40px !important; height: 40px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background-color .15s ease, transform .15s ease;
}
.product-listing a.fresco::before,
#overview a.fresco::before,
.trade-groups a.fresco::before {
  color: var(--gl-ink) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}
.product-listing a.fresco:hover,
#overview a.fresco:hover,
.trade-groups a.fresco:hover {
  background: var(--gl-ink) !important;
  transform: scale(1.06);
}
.product-listing a.fresco:hover::before,
#overview a.fresco:hover::before,
.trade-groups a.fresco:hover::before { color: #fff !important; }

/* --------------------------------------------------------------------- *
 * 37.21  Artikelseite: die Textkarten in die Kartensprache aufnehmen
 *
 * BEFUND: Nach dem Umbau in 37.19 standen die Textabschnitte zwar richtig,
 * gehoerten optisch aber nicht zum Rest der Seite:
 *
 *   Produktkarte darueber   padding 36px · radius 14px · 1px Rahmen
 *   Textkarte               padding 15px · radius 0   · kein Rahmen
 *
 * Eine weisse Flaeche ohne Rahmen und mit 15 px Rand liest sich nicht als
 * Karte, sondern als Textblock, dem jemand den Hintergrund vergessen hat.
 *
 * Zweiter Punkt: `.gl-intro p` ist mit 21 px gesetzt. Das ist auf der
 * Warengruppenseite richtig — dort steht der Absatz allein und traegt die
 * Seite. Auf der Artikelseite steht darueber bereits eine Ueberschrift und
 * darunter eine Liste; 21 px gegen 16 px Fliesstext macht den Block
 * kopflastig. Innerhalb der Textkarten eine Stufe zurueck.
 * --------------------------------------------------------------------- */
#product_informations .content > article.tab_content {
  padding: 2.25rem !important;
  background: #fff;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius);
  box-sizing: border-box;
}

/* Einleitung: Vorspann, nicht zweite Ueberschrift */
#product_informations .gl-intro p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--gl-muted-2);
  max-width: 68ch;
}

/* Die Listen brauchen den Vorspann-Abstand nur, wenn einer davorsteht */
#product_informations .gl-intro + ol.gl-steps,
#product_informations .gl-intro + ul.gl-facts { margin-top: 2rem; }

/* Abstand zwischen den Abschnitten: Ueberschrift gehoert naeher an ihre
   Karte als an die Karte darueber. */
#product_informations .content > article.tab_content { margin-bottom: 2.5rem; }
#product_informations .content .tab.gl-abschnitt ~ .tab.gl-abschnitt { margin-top: 0 !important; }
#product_informations .content > article.tab_content:last-child { margin-bottom: 0; }

/* Letztes Listenelement traegt seinen Abstand mit in den Kartenrand — dadurch
   wirkte unten mehr Luft als oben. */
#product_informations ol.gl-steps > li:last-child,
#product_informations ul.gl-facts > li:last-child { margin-bottom: 0; }
#product_informations .rte_container > *:last-child { margin-bottom: 0; }


/* ===================================================================== *
 * 38  ARTIKELSEITE MIT GROSSER GALERIE  (Backend-Option „große
 *     Gallerieansicht", Artikel „Muster Decal")
 *
 * BEFUND: Die Option erzeugt im Master bereits die richtige Struktur —
 *
 *   div.wrp.cf
 *     div#calculation.contentwrapper.left
 *       header.head
 *         div#detail_infobar.detail_infobar_gallery
 *           figure#detail_infobar_gallery
 *             a.fresco > picture > img.gallery_preview     <- Hauptbild
 *             figcaption > ul.cf > li > a.fresco > img     <- Miniaturen
 *         div.text.detail_infobar_gallery                  <- H1, Nummer
 *       div#reseller_attributes                            <- Auflage, Sorte
 *     aside#resellerArticle.contentwrapper.right           <- Preis, Knopf
 *
 * — sie ist aber ungestaltet. Das Hauptbild wurde mit 40x30 px ausgegeben
 * (Originalmaß 1448x1086), die Miniaturen lagen als Textzeile daneben, und
 * die Überschrift stand in einer 165 px schmalen Spalte darunter.
 *
 * KONSEQUENZ: Das ist reine CSS-Arbeit, Stufe 3 — keine Vollkopie nötig.
 * Ziel ist die klassische Produktansicht: links die Bilder, rechts Titel,
 * Menge, Preis und Kaufaktion.
 *
 * MITTEL: `display: contents` auf `#calculation` und `header.head`. Beide
 * sind reine Verpackungen ohne eigene Gestalt; ihre Kinder werden dadurch
 * zu Rasterfeldern des gemeinsamen Elternteils. So lässt sich der Aufbau
 * zweispaltig setzen, ohne eine Zeile HTML zu ändern.
 *
 * ABGRENZUNG: Alles hier hängt an `:has(.detail_infobar_gallery)`. Artikel
 * ohne die Option behalten ihren bisherigen Aufbau unverändert.
 * ===================================================================== */

/* ---------------------------------------------------- 38.1 Grundraster */
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 3.5rem;
  row-gap: 1.75rem;
  align-items: start;
}
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #calculation,
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #calculation > header.head {
  display: contents;
}

/* Galerie links, über die volle Höhe */
main#visual_calculation #detail_infobar.detail_infobar_gallery {
  grid-column: 1;
  grid-row: 1 / span 3;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  position: sticky;
  top: 6.5rem;
}
/* Titelblock, Optionen und Preiskarte rechts, untereinander */
main#visual_calculation .text.detail_infobar_gallery { grid-column: 2; grid-row: 1; }
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #calculation > #reseller_attributes { grid-column: 2; grid-row: 2; }
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #resellerArticle { grid-column: 2; grid-row: 3; }

main#visual_calculation .text.detail_infobar_gallery,
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #calculation > #reseller_attributes,
main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #resellerArticle {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ------------------------------------------------- 38.2 Das Hauptbild */
main#visual_calculation figure#detail_infobar_gallery { margin: 0; }
main#visual_calculation figure#detail_infobar_gallery > a.fresco {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--gl-line) !important;
  border-radius: var(--gl-radius) !important;
  box-shadow: none;
  transform: none !important;
  position: relative;
}
main#visual_calculation figure#detail_infobar_gallery > a.fresco::before { content: none !important; }
main#visual_calculation figure#detail_infobar_gallery > a.fresco picture,
main#visual_calculation figure#detail_infobar_gallery > a.fresco img.gallery_preview {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

/* Die Lupe gehört auf das Hauptbild, nicht als eigene Fläche daneben.
   Sie wird hier als Marke in der Ecke gesetzt — dieselbe Sprache wie die
   Lupe auf der Warengruppenkachel (Abschnitt 37.20). */
main#visual_calculation figure#detail_infobar_gallery > a.fresco::after {
  content: "";
  /* Oben rechts, nicht unten rechts: unten rechts schwebt der feste
     „Nach oben"-Knopf, und die Kachel in der Warengruppe traegt ihre Lupe
     ebenfalls oben rechts (Abschnitt 39). */
  position: absolute; right: .9rem; top: .9rem;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130F' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 21 21M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
  box-shadow: 0 2px 10px rgba(20, 18, 15, .18);
  transition: background-color .15s ease, transform .15s ease;
}
main#visual_calculation figure#detail_infobar_gallery > a.fresco:hover::after {
  transform: scale(1.06);
}

/* ------------------------------------------------- 38.3 Die Miniaturen */
main#visual_calculation figure#detail_infobar_gallery > figcaption {
  display: block;
  margin-top: .85rem;
}
main#visual_calculation figure#detail_infobar_gallery figcaption ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0; padding: 0;
  float: none !important;
}
main#visual_calculation figure#detail_infobar_gallery figcaption li {
  margin: 0 !important; padding: 0 !important;
  float: none !important; list-style: none;
}
main#visual_calculation figure#detail_infobar_gallery figcaption li::before { content: none !important; }
main#visual_calculation figure#detail_infobar_gallery figcaption li > a {
  display: block !important;
  width: 100% !important; height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
  transition: border-color .15s ease;
}
main#visual_calculation figure#detail_infobar_gallery figcaption li > a::before,
main#visual_calculation figure#detail_infobar_gallery figcaption li > a::after { content: none !important; }
main#visual_calculation figure#detail_infobar_gallery figcaption li img {
  display: block;
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
main#visual_calculation figure#detail_infobar_gallery figcaption li > a:hover { border-color: var(--gl-ink); }

/* --------------------------------------------- 38.4 Der Titel rechts */
main#visual_calculation .text.detail_infobar_gallery h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  line-height: 1.15;
}
main#visual_calculation .text.detail_infobar_gallery small.articleNumber {
  display: block;
  font-size: var(--gl-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gl-muted);
}
main#visual_calculation .text.detail_infobar_gallery p.articleDescription {
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gl-muted-2);
  max-width: 52ch;
}

/* ------------------------------------------------------ 38.5 Mobil */
@media screen and (max-width: 900px) {
  /* Der Master stellt `.wrp` auf Mobilgeraeten auf `display: block` zurueck —
     mit hoeherer Spezifitaet als unser Raster. Dagegen anzukaempfen lohnt
     nicht: In der DOM-Reihenfolge stehen Galerie, Titel, Optionen und
     Preiskarte ohnehin schon richtig untereinander. Also Blockfluss lassen
     und nur die Breiten erzwingen — der Master gibt den Bloecken sonst die
     Spaltenbreite der Schreibtischansicht (rund 150 px). */
  main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) {
    display: block;
  }
  main#visual_calculation #detail_infobar.detail_infobar_gallery,
  main#visual_calculation .text.detail_infobar_gallery,
  main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #calculation > #reseller_attributes,
  main#visual_calculation .wrp.cf:has(#detail_infobar.detail_infobar_gallery) > #resellerArticle {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;
  }
  main#visual_calculation #detail_infobar.detail_infobar_gallery { margin-bottom: 1.75rem !important; }
  main#visual_calculation .text.detail_infobar_gallery { margin-bottom: 1.25rem !important; }
  main#visual_calculation figure#detail_infobar_gallery figcaption ul {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}

/* ------------------------------------- 38.6 Nachzieher aus der Messung */
/* Die Miniaturen sind ebenfalls `a.fresco`; hier zaehlt die Galerie-Fassung.
   Hoehere Spezifitaet als der Master, der 28x28 und einen Kreis setzt. */
main#visual_calculation figure#detail_infobar_gallery figcaption ul li a.fresco {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  min-width: 0 !important;
  border-radius: var(--gl-radius-sm) !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  display: block !important;
}
main#visual_calculation figure#detail_infobar_gallery figcaption ul li a.fresco img {
  width: 100% !important; height: 100% !important; object-fit: cover;
}
main#visual_calculation figure#detail_infobar_gallery figcaption ul li a.fresco::after { content: none !important; }

/* Titelblock: der Master gibt ihm feste 320 px */
main#visual_calculation .wrp.cf .text.detail_infobar_gallery {
  width: auto !important;
  max-width: none !important;
}

/* Preisstaffel und der Werbesatz daneben standen als zwei schmale Spalten
   ineinander. Beides untereinander, in voller Breite der rechten Spalte. */
main#visual_calculation fieldset.priceTableText,
main#visual_calculation .priceTable,
main#visual_calculation table.priceTable {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 1.25rem !important;
}
main#visual_calculation fieldset.priceTableText h2 {
  float: none !important;
  width: auto !important;
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs) !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin: 0 0 .5rem !important;
  padding: 0 !important;
}
main#visual_calculation fieldset.priceTableText p,
main#visual_calculation fieldset.priceTableText div {
  float: none !important; width: auto !important;
  font-size: var(--gl-fs-sm); color: var(--gl-muted-2);
  text-align: left !important; margin: 0;
}
main#visual_calculation table.priceTable,
main#visual_calculation .priceTable table { width: 100% !important; border-collapse: collapse; }
main#visual_calculation .priceTable th {
  font-family: "regular", sans-serif; font-size: var(--gl-fs-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gl-muted);
  text-align: left; padding: 0 0 .6rem; border: 0;
}
main#visual_calculation .priceTable td {
  font-size: var(--gl-fs-md); padding: .5rem 0; border: 0;
  border-top: 1px solid var(--gl-line); font-variant-numeric: tabular-nums;
}

/* Der Master gibt den Miniatur-`li` eine feste Breite (rund 26 px). Als
   Rasterfeld dehnen sie sich dadurch nicht auf die Spaltenbreite. */
main#visual_calculation figure#detail_infobar_gallery figcaption ul li {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  justify-self: stretch;
  align-self: start;
}

/* --------------------------------------------------------------------- *
 * 38.7  Clearfix im Raster
 *
 * BEFUND: Die Miniaturen begannen erst in Spalte 2, obwohl nur zwei Bilder
 * vorhanden sind und die Liste links bündig mit dem Hauptbild anfängt.
 *
 * Ursache: Die Liste trägt die Klasse `cf` — den Clearfix des Masters, der
 * über `::before` und `::after` arbeitet. **In einem Rastercontainer werden
 * Pseudoelemente zu vollwertigen Rasterfeldern.** Der Clearfix belegte
 * damit die erste und die letzte Spalte.
 *
 * Gilt genauso für Flexbox. Wer einen Container mit Clearfix-Klasse auf
 * `grid` oder `flex` umstellt, muss dessen Pseudoelemente abschalten.
 * --------------------------------------------------------------------- */
main#visual_calculation figure#detail_infobar_gallery figcaption ul.cf::before,
main#visual_calculation figure#detail_infobar_gallery figcaption ul.cf::after {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------- *
 * 38.8  Preisstaffel und Werbesatz
 *
 * BEFUND: `div.optionWrapper.overflowHidden` steht als Zweispalter da —
 * links die Staffeltabelle, rechts `fieldset.priceTableText` mit dem Satz
 * „Darf es ein wenig mehr sein?". In der rechten Produktspalte sind das je
 * 251 px: die Tabelle wird gequetscht, die Überschrift bricht auf vier
 * Zeilen, der Satz steht rechtsbündig im Nichts.
 *
 * KONSEQUENZ: In der schmalen Spalte gehört beides untereinander. Die
 * Tabelle bekommt dieselbe Fassung wie die Korbtabelle (Abschnitt 37.12):
 * Kopfzeile klein und versal statt grauer Fläche, Zahlen mit
 * Tabellenziffern.
 * --------------------------------------------------------------------- */
main#visual_calculation .optionWrapper.overflowHidden {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 1.25rem;
}
main#visual_calculation fieldset.priceTableText {
  text-align: left !important;
  order: 2;
}
main#visual_calculation fieldset.priceTableText h2,
main#visual_calculation fieldset.priceTableText * { text-align: left !important; }

main#visual_calculation .optionWrapper.overflowHidden table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0;
}
main#visual_calculation .optionWrapper.overflowHidden th {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gl-line) !important;
  padding: 0 0 .6rem !important;
  text-align: left;
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
}
main#visual_calculation .optionWrapper.overflowHidden td {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gl-line);
  padding: .6rem 0 !important;
  font-size: var(--gl-fs-md);
  color: var(--gl-ink);
  font-variant-numeric: tabular-nums;
}
main#visual_calculation .optionWrapper.overflowHidden th:last-child,
main#visual_calculation .optionWrapper.overflowHidden td:last-child { text-align: right; }
main#visual_calculation .optionWrapper.overflowHidden tr:last-child td { border-bottom: 0; }

/* Der Master setzt Ausrichtung und Rahmen der Staffelzellen mit hoeherer
   Spezifitaet — hier gegenhalten, damit Betraege rechts fluchten und die
   Tabelle nicht mit einer Linie in den Werbesatz laeuft. */
main#visual_calculation .optionWrapper.overflowHidden th + th,
main#visual_calculation .optionWrapper.overflowHidden td + td { text-align: right !important; }
main#visual_calculation .optionWrapper.overflowHidden tr:last-child td { border-bottom: 0 !important; }
main#visual_calculation .optionWrapper.overflowHidden tbody tr:last-child td { border-bottom: 0 !important; }
main#visual_calculation fieldset.priceTableText { border: 0 !important; padding: 0 !important; }

/* Die Gruppenueberschriften der Kalkulation tragen eine Trennlinie oben.
   Im Werbesatz unter der Staffel wirkt sie wie eine weitere Tabellenzeile. */
main#visual_calculation fieldset.priceTableText h2 { border-top: 0 !important; }
main#visual_calculation .optionWrapper.overflowHidden table { border: 0 !important; }


/* ===================================================================== *
 * 39  WARENGRUPPENKACHEL — Bild, Lupe, Verweis
 *
 * BEFUND:
 *   1. Die Lupe (`a.fresco.preview-btn`) sitzt `absolute` auf `top: 0;
 *      right: 0` — sie klebt ohne jeden Abstand in der Bildecke und wirkt
 *      dadurch nicht gesetzt, sondern hingerutscht.
 *   2. Das Kachelbild steht auf `object-fit: fill`. Beim Musterartikel
 *      (1448x1086 auf 284x213) faellt das nicht auf, weil beide 4:3 sind —
 *      ein Bild mit anderem Seitenverhaeltnis wuerde verzerrt.
 *   3. Die Kachel ist 4:3, die Galerie der Artikelseite quadratisch. Zwei
 *      Seitenverhaeltnisse fuer dasselbe Produkt.
 *
 * KONSEQUENZ: Quadrat wie in der Galerie, `cover` statt `fill`, und die
 * Lupe mit Abstand in die Ecke gesetzt — im Ruhezustand zurueckhaltend,
 * beim Ueberfahren deutlich.
 * ===================================================================== */
.product-listing .card {
  border-radius: var(--gl-radius);
  overflow: hidden;
}
.product-listing .card picture,
.product-listing .card > a:not(.preview-btn) {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.product-listing .card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  display: block;
  transition: transform .4s ease;
}
.product-listing .card:hover img { transform: scale(1.03); }

/* Die Lupe: Abstand zur Ecke, im Ruhezustand leiser */
.product-listing a.fresco.preview-btn,
.product-listing a.fresco {
  top: .75rem !important;
  right: .75rem !important;
  opacity: .85;
}
.product-listing .card:hover a.fresco.preview-btn,
.product-listing .card:hover a.fresco { opacity: 1; }

/* Titel und Verweis unter der Kachel */
.product-listing .card + *, .product-listing .card ~ .link { margin-top: .85rem; }
.product-listing span.link, .product-listing .link {
  display: inline-block;
  font-size: var(--gl-fs-sm);
  color: var(--gl-muted-2);
  transition: color .15s ease;
}
.product-listing li:hover span.link, .product-listing .card ~ * span.link { color: var(--gl-accent); }


/* ===================================================================== *
 * 40  AUFKLAPPKASTEN DER AUSWAHLFELDER  (`.optionGroupCon`)
 *
 * BEFUND beim Anklicken von „Auflage" auf der Artikelseite:
 *
 *   - Der Kasten oeffnet sich UEBER dem Feld und verdeckt es. Der Master
 *     ahmt damit das Verhalten eines nativen `<select>` nach, das den
 *     gewaehlten Eintrag ueber dem Feld ausrichtet. In einem Formular mit
 *     eigener Gestalt liest sich das als Fehler.
 *   - Er ist 256 px breit, das Feld darunter 526 px.
 *   - Der gewaehlte Eintrag traegt `rgb(153, 174, 180)`, die uebrigen
 *     `rgb(249, 251, 255)`. Beides Master-Altfarben.
 *
 * WARUM DAS BISHER DURCHGERUTSCHT IST: Der Kasten existiert nur im
 * geoeffneten Zustand. Alle bisherigen Pruefungen — Farben, Masse,
 * Ueberlauf — laufen auf der ruhenden Seite. Dritter Fall desselben
 * Musters nach G26 (ausgeloggte Kasse) und G36 (Lupe ohne Artikelbild):
 * **eine Pruefung findet nur, was gerendert wird.**
 * ===================================================================== */
#visual_calculation .optionGroupCon {
  /* unter dem Feld, nicht darueber */
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 17rem;
  overflow-y: auto;
  padding: .35rem !important;
  background: #fff !important;
  border: 1px solid var(--gl-line-2) !important;
  border-radius: var(--gl-radius-sm) !important;
  box-shadow: 0 14px 34px rgba(20, 18, 15, .14) !important;
  z-index: 60 !important;
}
#visual_calculation .optionGroupCon ul {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  position: static !important;
}
#visual_calculation .optionGroupCon ul li,
#visual_calculation .optionGroupCon ul li.fakeOption {
  display: block;
  width: auto !important;
  margin: 0 !important;
  padding: .62rem .8rem !important;
  border: 0 !important;
  border-radius: 6px;
  background: #fff !important;
  color: var(--gl-ink) !important;
  font-size: var(--gl-fs-md);
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
#visual_calculation .optionGroupCon ul li::before { content: none !important; }
/* Der gewaehlte Eintrag: ruhig markiert, nicht als Signalfarbe */
#visual_calculation .optionGroupCon ul li.selected,
#visual_calculation .optionGroupCon ul li.fakeOption.selected {
  background: var(--gl-surface) !important;
  color: var(--gl-ink) !important;
  font-weight: 600;
}
/* Zeigezustand traegt die Aktionsfarbe */
#visual_calculation .optionGroupCon ul li:hover,
#visual_calculation .optionGroupCon ul li.focus,
#visual_calculation .optionGroupCon ul li.fakeOption:hover,
#visual_calculation .optionGroupCon ul li.fakeOption.focus {
  background: var(--gl-accent) !important;
  color: #fff !important;
}
/* Das Feld selbst waehrend des Aufklappens */
#visual_calculation label.default.active {
  border-color: var(--gl-accent) !important;
  outline: 2px solid rgba(23, 96, 79, .16);
  outline-offset: 0;
}
/* Feld und Kasten auf dieselbe Breite bringen — der Master laesst dem
   Label 8 px Luft nach rechts, der Kasten spannt ueber den ganzen
   Wrapper. */
#visual_calculation .optionWrapper > fieldset > label.default { width: 100% !important; }

/* Der Master gibt jedem Optionsfeld ein zweispaltiges Raster: Feld plus
   Berechnen-Knopf, mit 8 px Abstand dazwischen. Fehlt der Knopf, bleiben
   die leere Spalte und ihr Abstand stehen — das Feld war dadurch genau
   8 px schmaler als der Aufklappkasten darunter. */
#visual_calculation .optionWrapper > fieldset:not(:has(.btnCalcOptical)) {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

/* --------------------------------------------------------------------- *
 * 41  Nachzieher: Bildwechsel, blaue Zeigefarbe, leere Textflaechen
 * --------------------------------------------------------------------- */

/* 41.1  Aktive Miniatur in der Galerie.
   Das Skript in `data/inc.header.htm` setzt `.gl-aktiv`. */
main#visual_calculation figure#detail_infobar_gallery figcaption ul li a.gl-aktiv {
  border-color: var(--gl-ink) !important;
  box-shadow: 0 0 0 1px var(--gl-ink) !important;
}
main#visual_calculation figure#detail_infobar_gallery figcaption ul li a { cursor: pointer; }

/* 41.2  Blaue Zeigefarbe auf der Warengruppenkachel
 *
 * BEFUND: Beim Ueberfahren legte der Master `rgba(70, 110, 132, .65)` auf
 * die Bildunterschrift — sein Petrol, nur mit Transparenz. Meine
 * Farbpruefung sucht exakte `rgb(...)`-Werte und hat die `rgba`-Fassung
 * deshalb nie gemeldet. `scripts/pruefen.js` prueft das jetzt mit.
 */
.product-listing figcaption,
.product-listing .card figcaption,
.product-listing li:hover figcaption,
.product-listing .card:hover figcaption {
  background: transparent !important;
  color: inherit !important;
}
.product-listing .card:hover figcaption strong { color: var(--gl-ink); }

/* 41.3  Leere Textflaechen der Warengruppe einklappen
 *
 * BEFUND: Ist die Beschreibung im Backend nicht gefuellt, liefert der
 * Master trotzdem den kompletten Rahmen aus —
 *
 *     <section class="description wrp">
 *       <div class="hint message"><div class="rte_container">
 *         <div class="gl-intro"><p></p></div>
 *       </div></div>
 *     </section>
 *
 * — mit 56 px Innenabstand oben und unten. Auf „Fertige Decals" standen so
 * 137 px Leere zwischen Kopfbild und Artikelliste.
 *
 * `:empty` hilft nicht: der Abschnitt enthaelt ja Elemente, nur keinen
 * Inhalt. Der Test muss also lauten „enthaelt kein Element MIT Inhalt".
 * Genau das laesst sich mit `:has()` und `:not(:empty)` formulieren.
 */
main section.description:not(:has(img)):not(:has(li)):not(:has(td)):not(:has(table)):not(:has(p:not(:empty))):not(:has(h1:not(:empty))):not(:has(h2:not(:empty))):not(:has(h3:not(:empty))):not(:has(h4:not(:empty))) {
  display: none !important;
}

/* --------------------------------------------------------------------- *
 * 42  Kurzanleitung zum Editor auf der Artikelseite
 *
 * Der Master gibt der dritten Textflaeche (`articleDescriptionOne`) KEINE
 * Beschriftung — sie erscheint als `<article class="tab_content">` ohne
 * `menu-item-N`. Das Skript in `data/inc.header.htm`, das Reiter zu
 * Abschnittsueberschriften macht, findet dort also nichts zuzuordnen.
 * Die Ueberschrift steht deshalb im Inhalt selbst und wird hier gefasst.
 * --------------------------------------------------------------------- */
#product_informations .content > article.tab_content:not([class*="menu-item"]) {
  /* Diese Flaeche traegt ihre Ueberschrift selbst und braucht daher oben
     etwas mehr Luft als die beschrifteten Abschnitte. */
  margin-top: 2.5rem;
}
#product_informations .gl-anleitung__titel {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin: 0 0 1.1rem;
}
#product_informations .gl-anleitung__vor {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--gl-muted-2);
  margin: 0 0 1.75rem;
  max-width: 68ch;
}
#product_informations .gl-anleitung__hinweis {
  margin: 1.75rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gl-accent);
  font-size: var(--gl-fs-md);
  line-height: 1.6;
  color: var(--gl-muted-2);
  max-width: 68ch;
}
#product_informations .gl-anleitung__hinweis em,
#product_informations ol.gl-steps em {
  font-style: normal;
  font-weight: 600;
  color: var(--gl-ink);
}


/* ===================================================================== *
 * 43  ARTIKELSEITE — Feldbeschriftungen und Seitenzahl
 *
 * 43.1 Die Feldnamen (`span.optionName`) standen als 16-px-Fliesstext ueber
 *      den Feldern und waren dadurch von einer Zwischenueberschrift nicht
 *      zu unterscheiden. Ueberall sonst im Laden ist eine Feldbeschriftung
 *      klein, versal und gedaempft — hier jetzt auch.
 *
 * 43.2 Die Seitenzahl ist ein Ergebnis, keine Eingabe: Sie kommt aus dem
 *      Editor zurueck, wenn der Kunde dort Seiten anlegt. Das zugehoerige
 *      Skript steht in `data/inc.header.htm`.
 *        eine Seite    -> Zeile unsichtbar, Feld bleibt im HTML
 *        mehr als eine -> als Text mit Herkunftshinweis
 * ===================================================================== */

/* --- 43.1 Feldbeschriftungen ---------------------------------------- */
#visual_calculation .optionName,
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset > .optionName {
  display: block;
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin: 0 0 .5rem;
  line-height: 1.2;
}

/* --- 43.2 Seitenzahl als Anzeige ------------------------------------ */
/* Die Zeile bleibt in BEIDEN Zustaenden stehen, damit die Ansicht vor und
   nach der Personalisierung gleich aufgebaut ist. Nur der Text wechselt:
   vorher der Hinweis, woher der Wert kommen wird — nachher die Zahl.
   Das Eingabefeld ist in beiden Faellen verborgen, bleibt aber im HTML
   und wird mitgeschickt (`display: none` tut das, `disabled` nicht). */
#visual_calculation fieldset.gl-seiten > label.input,
#visual_calculation fieldset.gl-seiten > .btnCalcOptical {
  display: none !important;
}
#visual_calculation fieldset.gl-seiten .gl-seiten__wert {
  display: block;
  grid-column: 1 / -1;
  font-size: var(--gl-fs-md);
  font-weight: 600;
  color: var(--gl-ink);
  line-height: 1.3;
}
#visual_calculation fieldset.gl-seiten .gl-seiten__hinweis {
  display: block;
  grid-column: 1 / -1;
  margin-top: .15rem;
  font-size: var(--gl-fs-xs);
  color: var(--gl-muted);
}
/* Im Ausgangszustand gibt es keine Zahl zu zeigen — dort traegt der
   Hinweis allein die Aussage und steht deshalb in Textgroesse. */
#visual_calculation fieldset.gl-seiten--eine .gl-seiten__wert { display: none !important; }
#visual_calculation fieldset.gl-seiten--eine .gl-seiten__hinweis {
  margin-top: 0;
  font-size: var(--gl-fs-md);
  color: var(--gl-muted-2);
  line-height: 1.4;
}


/* ===================================================================== *
 * 44  NACH DER PERSONALISIERUNG — zwei Knoepfe, eine Hauptaktion
 *
 * BEFUND: Kommt der Kunde aus dem Editor zurueck, liefert
 * `data/inc.detail/inc.detail.default.actions.send.htm`
 *
 *   <button name="cmd_pitch_print_next" class="btn success PitchprintChng">Personalisierung bearbeiten</button>
 *   <button name="order_personalization" class="btn success">Bestellen</button>
 *
 * Beide tragen `btn success`, sind also gleich gewichtet — und der
 * laengere Text macht „Personalisierung bearbeiten" sogar groesser als
 * die eigentliche Kaufaktion. Genau der Fall, den Abschnitt 37.1
 * ausschliessen sollte: EINE Hauptaktion je Ansicht.
 *
 * KONSEQUENZ: Der Bearbeiten-Knopf wird zur Nebenaktion — weiss mit
 * Rahmen, eine Stufe kleiner. Der Kaufknopf bleibt jadegruen und breit.
 * ===================================================================== */
/* NUR die Nebenaktion abschwaechen. `PitchprintPrs` traegt im Ausgangs-
   zustand „Produkt personalisieren" und steht dort ALLEIN — das ist die
   Hauptaktion und bleibt jadegruen. Dieselbe Klasse taucht bei Printess
   ein zweites Mal auf, dann aber neben der Kaufaktion. Entschieden wird
   deshalb nach dem Zusammenhang, nicht nach der Klasse: liegt im selben
   Elternteil ein `[name="order_personalization"]`, ist der Knopf zweite
   Wahl. */
#visual_calculation .btn.success.PitchprintChng,
.btn.success.PitchprintChng,
*:has(> [name="order_personalization"]) > .btn.success.PitchprintPrs {
  background: #fff !important;
  border: 1px solid var(--gl-line-2) !important;
  color: var(--gl-ink) !important;
  min-height: 44px !important;
  font-size: var(--gl-fs-sm) !important;
  /* Der Master setzt hier die Schriftfamilie „bold" — die Familien sind
     nach ROLLE benannt (docs/10, C1), nicht nach Gewicht. `font-weight`
     allein macht den Knopf deshalb nicht leichter; die Familie muss mit. */
  font-family: "regular", sans-serif !important;
  font-weight: 400 !important;
  padding: .6rem 1.1rem !important;
  order: 2;
}
#visual_calculation .btn.success.PitchprintChng:hover,
.btn.success.PitchprintChng:hover,
*:has(> [name="order_personalization"]) > .btn.success.PitchprintPrs:hover {
  background: var(--gl-ink) !important;
  border-color: var(--gl-ink) !important;
  color: #fff !important;
}
/* Das Wagensymbol des Masters gehoert nur auf die Kaufaktion */
.btn.success.PitchprintChng::before,
*:has(> [name="order_personalization"]) > .btn.success.PitchprintPrs::before { content: none !important; }

/* Der Ausgangszustand: „Produkt personalisieren" ist die Hauptaktion. */
.btn.success.PitchprintPrs {
  width: 100%;
  min-height: 54px !important;
  font-size: var(--gl-fs-md) !important;
}

/* Die Kaufaktion bleibt die Hauptaktion und steht oben */
#visual_calculation .btn.success[name="order_personalization"],
.btn.success[name="order_personalization"] {
  order: 1;
  width: 100%;
  min-height: 54px !important;
  font-size: var(--gl-fs-md) !important;
  font-weight: 500 !important;
}
/* Der Master legt die beiden Knoepfe ohne Behaelter nebeneinander —
   als Spalte gestapelt ist die Rangfolge eindeutig. */
#visual_calculation .contentwrapper.right section.actionbar,
#visual_calculation section.actionbar:has(> .PitchprintChng),
#total_block:has(> .PitchprintChng) {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}


/* ===================================================================== *
 * 45  STARTSEITE — „Zwei Wege" und „Gut zu wissen"
 *
 * Inhalte aus dem Backend, Flaechen `cms_homepage_text2` (direkt unter den
 * Warengruppen) und `cms_homepage_text4` (weiter unten). Beide sind
 * CKEditor-Flaechen; eigenes HTML ueberlebt dort (docs/10, D11).
 *
 * GESTALTUNGSENTSCHEIDUNG: „Fertiges Design hochladen" ist KEINE dritte
 * Kachel neben den Warengruppen. „Erstellen" und „hochladen" sind zwei
 * Wege zum selben Produkt — die echte Wahl ist eigenes gegen fertiges
 * Motiv, und das sind zwei. Die beiden Wege stehen deshalb eine Ebene
 * tiefer, als erklaerender Block direkt unter den Kacheln.
 * ===================================================================== */
.gl-wege {
  max-width: 1150px;
  margin: 0 auto;
  padding: 4.5rem 0 1rem;
}
.gl-wege__titel {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
}
.gl-wege__vor {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gl-muted-2);
  max-width: 62ch;
  margin: 0 0 2.5rem;
}
.gl-wege__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
}
.gl-weg {
  position: relative;
  background: #fff;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius);
  padding: 2rem 2rem 1.75rem;
}
.gl-weg__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--gl-accent); color: #fff;
  font-size: var(--gl-fs-sm); font-weight: 600;
  margin-bottom: 1rem;
}
.gl-weg h3 {
  font-size: 1.1875rem;
  margin: 0 0 .6rem;
  line-height: 1.25;
}
.gl-weg p {
  font-size: var(--gl-fs-md);
  line-height: 1.6;
  color: var(--gl-muted-2);
  margin: 0 0 1.1rem;
}

/* --- „Gut zu wissen": Verweise auf die Landingpages ------------------ */
.gl-wissen {
  max-width: 1150px;
  margin: 0 auto;
  padding: 3.5rem 0 1rem;
}
.gl-wissen__titel {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin: 0 0 1.25rem;
}
.gl-wissen__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.gl-wissen__karte {
  display: block;
  background: #fff;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
  padding: 1.35rem 1.5rem;
  text-decoration: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
.gl-wissen__karte strong {
  display: block;
  font-size: var(--gl-fs-md);
  color: var(--gl-ink);
  margin-bottom: .3rem;
}
.gl-wissen__karte span {
  display: block;
  font-size: var(--gl-fs-sm);
  line-height: 1.5;
  color: var(--gl-muted);
}
.gl-wissen__karte:hover {
  border-color: var(--gl-ink);
  transform: translateY(-2px);
}

/* --- Inhaltsseiten aus dem Content-Management ------------------------ */
/* Die Landingpages laufen ueber dieselbe Vorlage wie AGB und Impressum. */
main .rte_container > h3,
main .cms_text h3 {
  font-size: 1.25rem;
  margin: 2.25rem 0 .85rem;
  line-height: 1.3;
}
main .rte_container > h3:first-child { margin-top: 0; }
.gl-hinweis {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.35rem;
  background: var(--gl-surface);
  border-radius: var(--gl-radius-sm);
  font-size: var(--gl-fs-md);
  line-height: 1.6;
  color: var(--gl-muted-2);
}
.gl-hinweis strong { color: var(--gl-ink); }

/* --------------------------------------------------------------------- *
 * 45.1  Bilder in den Startseitenkarten
 *
 * Die Bilder liegen als Template-Assets unter `/tpl/ds_andre/assets/gl/`,
 * NICHT in der Medienverwaltung. Grund: Alles, was ueber `image.php`
 * laeuft, wird zusaetzlich als WebP ausgeliefert und dabei siebenfach
 * staerker komprimiert (docs/10, G60). Assets gehen unveraendert raus.
 * --------------------------------------------------------------------- */
.gl-weg { padding: 0 0 1.75rem; overflow: hidden; }
.gl-weg__bild {
  display: block;
  width: 100%;
  /* `height: auto` ist hier PFLICHT, nicht Kosmetik: Die Attribute
     `width="1200" height="675"` im HTML wirken als CSS-Vorgabe. Sind
     Breite UND Hoehe gesetzt, ignoriert der Browser `aspect-ratio` — die
     Bilder standen dadurch 675 px hoch und hochkant. Die Attribute selbst
     bleiben stehen, sie verhindern das Springen des Layouts beim Laden. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 1.5rem;
}
.gl-weg__text { padding: 0 2rem; }

.gl-wissen__karte { padding: 0 0 1.35rem; overflow: hidden; }
.gl-wissen__karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 1.1rem;
  transition: transform .4s ease;
}
.gl-wissen__karte:hover img { transform: scale(1.03); }
.gl-wissen__karte strong,
.gl-wissen__karte span { padding: 0 1.5rem; }

/* Kopfbild der Inhaltsseiten (Landingpages) */
main .gl-lp__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--gl-radius);
  margin: 0 0 2.25rem;
}

/* --------------------------------------------------------------------- *
 * 45.2  Einstieg direkt unter dem Titelbild (`cms_homepage_text`)
 *
 * Steht zwischen Titelbild und Warengruppen. Zwei Saetze, mehr nicht —
 * wer hier ankommt, hat das Bild gesehen und will wissen, worum es geht.
 * --------------------------------------------------------------------- */
/* Der Master gestaltet diesen Bereich als dunkles Band:
     .cms_homepage_text   { background-color: var(--color_logo_dark) }
     .cms_homepage_text * { color: #fff }
   Direkt unter dem Titelbild waere das die zweite dunkle Flaeche im oberen
   Drittel — die Seite lebt aber von ruhigem Hell. Also Band aufhellen und
   die Textfarben zuruecknehmen. Das `*` des Masters faerbt ALLES darin
   weiss, deshalb muss die Ruecknahme ebenfalls alles erfassen. */
main .cms_homepage_text {
  background-color: var(--gl-bg) !important;
  padding: 0 !important;
}
main .cms_homepage_text * { color: inherit !important; }

.gl-einstieg {
  max-width: 1150px;
  margin: 0 auto;
  padding: 4rem 0 1rem;
  text-align: center;
}
.gl-einstieg__lead {
  font-family: "extrabold", sans-serif;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
  color: var(--gl-ink) !important;
  margin: 0 0 1rem;
}
.gl-einstieg__text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gl-muted-2) !important;
  max-width: 58ch;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .gl-einstieg { padding: 2.5rem 0 .5rem; text-align: left; }
}

/* Die Ruecknahme oben (`.cms_homepage_text *`) ist spezifischer als die
   Textregeln des Einstiegs — dadurch wurde alles reines Schwarz. Die
   beiden Textstufen brauchen deshalb dieselbe Verankerung. */
main .cms_homepage_text .gl-einstieg__lead { color: var(--gl-ink) !important; }
main .cms_homepage_text .gl-einstieg__text { color: var(--gl-muted-2) !important; }


/* ===================================================================== *
 * 46  ARTIKEL MIT DATEI-UPLOAD  (`Eigens-Design-Hochladen`)
 *
 * Der Master baut den Upload so:
 *
 *   <label class="upload_field">              <- 40 px hoch, Inhalt 135 px
 *     <div class="upload_area">               <- grauer Kasten #f7f7f7
 *       <span>Dateie(n) in diesen Bereich ziehen</span>
 *       <span class="btn" for="files[]">Datei auswaehlen</span>
 *       <strong>Nur eine Datei im Upload erlaubt.</strong>
 *       <input type="file">                   <- verborgen
 *     </div>
 *     <button class="btn upload">Datei hochladen</button>
 *   </label>
 *
 * DREI BEFUNDE:
 *   1. `label.upload_field` ist 40 px hoch, sein Inhalt 135 — der Knopf
 *      „Datei hochladen" ragt unten aus dem Kasten heraus.
 *   2. Zwei Knoepfe direkt uebereinander, beide gleich gewichtet: „Datei
 *      auswaehlen" jadegruen, „Datei hochladen" weiss. Der Kunde sieht
 *      zwei Aktionen und weiss nicht, welche zuerst.
 *   3. `label.upload_field` traegt `#f9fbff`, `.upload_area` `#f7f7f7` —
 *      zwei kalte Master-Toene, die meine Farbumstellung nie erwischt hat,
 *      weil sie nur auf dieser einen Seite vorkommen.
 *
 * KONSEQUENZ: EIN Ablagefeld mit gestricheltem Rand. Darin die Auswahl als
 * Nebenaktion, darunter das Hochladen als Hauptaktion. Damit ist die
 * Reihenfolge sichtbar: erst waehlen, dann hochladen.
 * ===================================================================== */
#visual_calculation label.upload_field {
  display: block !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
}
#visual_calculation .upload_area {
  display: block;
  background: var(--gl-bg) !important;
  border: 1px dashed var(--gl-line-2) !important;
  border-radius: var(--gl-radius-sm);
  padding: 1.6rem 1.25rem !important;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
#visual_calculation .upload_area:hover { border-color: var(--gl-ink) !important; }
#visual_calculation .upload_area > span:first-child {
  display: block;
  font-size: var(--gl-fs-sm);
  color: var(--gl-muted);
  margin: 0 0 .9rem;
}
/* NACHTRAG: Es ist kein Zwei-Schritt-Vorgang. Das Aufsatzskript laeuft
   mit `autoSubmit: true` (`inc.detail.general.optical.htm`, Zeile 436) —
   das Hochladen beginnt schon beim Auswaehlen. Nachgemessen: eine Datei
   ins Feld gelegt, nichts angeklickt, die Datei war oben. Der Knopf
   „Datei hochladen" wird also nie gebraucht; er stand nur als zweite,
   gleich grosse Aktion daneben. Deshalb bleibt EIN Knopf — der, der den
   Dateidialog oeffnet — und der traegt jetzt die Markenfarbe. */
#visual_calculation .upload_area > span.btn {
  display: inline-block !important;
  width: auto !important;
  min-width: 12rem;
  background: var(--gl-accent) !important;
  border: 1px solid var(--gl-accent) !important;
  color: #fff !important;
  font-size: var(--gl-fs-sm) !important;
  min-height: 48px !important;
  padding: .8rem 1.6rem !important;
  cursor: pointer;
}
#visual_calculation .upload_area > span.btn:hover {
  background: var(--gl-accent-h) !important;
  border-color: var(--gl-accent-h) !important;
  color: #fff !important;
}
#visual_calculation .upload_area > strong {
  display: block;
  margin: .9rem 0 0;
  font-size: var(--gl-fs-xs);
  font-weight: 400;
  color: var(--gl-muted);
}
#visual_calculation .upload_area > strong:empty { display: none; }

/* Siehe oben: der Knopf ist ueberfluessig, weil das Hochladen von selbst
   beginnt. Er bleibt im HTML (das Aufsatzskript haengt daran), wird aber
   nicht mehr angezeigt. ROLLBACK: diese eine Regel entfernen. */
#visual_calculation label.upload_field > button.btn.upload { display: none !important; }

#visual_calculation label.upload_field > button.btn.upload--unbenutzt {
  display: block !important;
  width: 100% !important;
  margin: .85rem 0 0 !important;
  background: var(--gl-accent) !important;
  border-color: var(--gl-accent) !important;
  color: #fff !important;
  min-height: 48px !important;
  float: none !important;
}
#visual_calculation label.upload_field > button.btn.upload:hover {
  background: var(--gl-accent-h) !important;
  border-color: var(--gl-accent-h) !important;
}

/* --------------------------------------------------------------------- *
 * 46.1  Die hochgeladene Datei
 *
 * BEFUND: Nach dem Upload steht der Dateiname als blanker Text, daneben
 * ein 58x50 grosser roter Knopf mit der Aufschrift „X" — `rgb(209,43,11)`,
 * kein Ton unserer Palette. Er ueberlappt den Dateinamen und ist das
 * farbstaerkste Element der Seite. Eine Abrissfunktion darf nicht lauter
 * rufen als der Kauf (vgl. 37.14 im Warenkorb).
 *
 * KONSEQUENZ: Ein Streifen wie ein Anhang — Papiersymbol, Name, und rechts
 * ein zurueckhaltendes Kreuz, das erst beim Ueberfahren rot wird.
 * --------------------------------------------------------------------- */
#visual_calculation fieldset label.text:has(.fileName) {
  display: flex !important;
  align-items: center;
  gap: .75rem;
  width: 100% !important;
  box-sizing: border-box;
  background: var(--gl-bg) !important;
  border: 1px solid var(--gl-line) !important;
  border-radius: var(--gl-radius-sm);
  padding: .7rem .7rem .7rem 1rem !important;
  min-height: 52px;
}
#visual_calculation label.text .fileName {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--gl-fs-sm);
  color: var(--gl-ink);
  /* Umbruch waere die Alternative, bricht aber mitten in der Endung
     („pitchPrint." / „pdf") — eine Zeile mit Auslassung liest sich
     besser, die Dateiart steht ohnehin in der Beschriftung darueber. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
/* Papiersymbol vor dem Namen */
#visual_calculation label.text .fileName::before {
  content: "";
  display: inline-block;
  vertical-align: -.2em;
  width: 15px; height: 18px;
  margin-right: .55rem;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 18' fill='none' stroke='%237A736A' stroke-width='1.3'%3E%3Cpath d='M9 1H2.5A1.5 1.5 0 0 0 1 2.5v13A1.5 1.5 0 0 0 2.5 17h10a1.5 1.5 0 0 0 1.5-1.5V6z'/%3E%3Cpath d='M9 1v5h5'/%3E%3C/svg%3E") no-repeat center / 15px 18px;
}
#visual_calculation label.text input.btnDelete {
  flex: 0 0 auto;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: none !important;
  border: 1px solid var(--gl-line-2) !important;
  color: var(--gl-muted) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#visual_calculation label.text input.btnDelete:hover {
  background: #B3261E !important;
  border-color: #B3261E !important;
  color: #fff !important;
}

/* Das `input[type=button]` zieht sich am Wert „X" auf — feste Kantenlaenge. */
#visual_calculation label.text input.btnDelete,
#visual_calculation fieldset label.text input.btnDelete {
  width: 34px !important; max-width: 34px !important; box-sizing: border-box;
}

/* Der Hinweis ist ein `<strong>` — und `font-weight: 400` allein hilft
   nicht, weil der Master die Schriftfamilie „bold" setzt (docs/10, G58). */
#visual_calculation .upload_area > strong {
  font-family: "regular", sans-serif !important;
  font-weight: 400 !important;
  color: var(--gl-muted) !important;
}

/* --------------------------------------------------------------------- *
 * 46.2  „In den Warenkorb" ohne hochgeladene Datei
 *
 * BEFUND: Ohne Datei laesst sich der Artikel nicht in den Warenkorb legen —
 * der Shop lehnt es ab. Sichtbar ist davon nichts: Der Knopf steht in
 * voller Markenfarbe da und wirkt bereit. Der Kunde klickt, nichts
 * passiert, und er sucht den Fehler bei sich.
 *
 * KONSEQUENZ: Der Zustand wird sichtbar gemacht. Erkannt wird er ueber
 * `:has()` — solange im Formular kein `.fileName` steht, ist keine Datei
 * hochgeladen. Der Knopf bleibt anklickbar (die Pruefung gehoert dem
 * Server), sieht aber nicht mehr nach „bereit" aus, und darueber steht,
 * was fehlt.
 * --------------------------------------------------------------------- */
#formular_reseller:not(:has(.fileName)) .contentwrapper.right .btn.success[name="cmd_next"] {
  background: var(--gl-surface-2) !important;
  border-color: var(--gl-surface-2) !important;
  color: var(--gl-muted) !important;
}
#formular_reseller:not(:has(.fileName)) .contentwrapper.right .btn.success[name="cmd_next"]::before {
  color: var(--gl-muted) !important;
}
#formular_reseller:not(:has(.fileName)) .contentwrapper.right .btn.success[name="cmd_next"]:hover {
  background: var(--gl-surface-2) !important;
  border-color: var(--gl-line-2) !important;
}
/* Der Grund steht ueber dem Knopf, nicht daneben. */
#formular_reseller:not(:has(.fileName)) .contentwrapper.right .btn.success[name="cmd_next"]::after {
  content: "";
}
#formular_reseller:not(:has(.fileName)) .gl-upload-hinweis { display: block; }
.gl-upload-hinweis {
  display: none;
  margin: 1.25rem 0 -.35rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gl-line-2);
  font-size: var(--gl-fs-sm);
  line-height: 1.5;
  color: var(--gl-muted-2);
}


/* ===================================================================== *
 * 47  DATENPRÜFUNG  (`upload.htm`)
 *
 * Aufbau des Masters:
 *
 *   main#upload > .wrp > section#upload_section > form#fileupload
 *     section#upload_browser
 *       h3   „Daten jetzt per Browser-Upload senden."
 *       hr
 *       div.fileuploader
 *         div#dropzone-fileupload.fileuploader-input   <- Ablagebereich
 *         div.table.files                              <- Datei + Pruefung
 *           .fileuploader-check   Auflaesung / Masse
 *           .fileuploader-action  Loeschen
 *           .fileuploader-title   Name und Groesse
 *           .fileuploader-status  PrintCheck in Prozent
 *           .fileuploader-progress  Balken
 *     input#to_upload_check.btn.success                <- „Weiter"
 *
 * BEFUND: Die Datei ist an dieser Stelle bereits hochgeladen — sie kommt
 * von der Artikelseite. Trotzdem steht hier erneut ein vollstaendiger
 * Upload-Bereich samt Ueberschrift „Daten jetzt per Browser-Upload
 * senden.". Der Kunde soll hier nichts mehr hochladen, sondern das
 * Ergebnis der Pruefung sehen und weitergehen.
 *
 * KONSEQUENZ: Ablagebereich und Ueberschrift verschwinden — aber NUR,
 * wenn tatsaechlich eine Datei da ist. Landet jemand ohne Datei hier,
 * bleibt der Upload sichtbar, sonst saesse er fest.
 * ===================================================================== */
main#upload .fileuploader:has(.fileuploader-items) > #dropzone-fileupload,
main#upload #upload_browser:has(.fileuploader-items) > h3,
main#upload #upload_browser:has(.fileuploader-items) > hr {
  display: none !important;
}

/* Die Karte drumherum in unsere Sprache */
main#upload section#upload_section {
  background: #fff;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius);
  padding: 2.25rem !important;
  box-sizing: border-box;
}

/* --- Die Prüfzeile ---------------------------------------------------- */
main#upload .fileuploader-title {
  font-size: var(--gl-fs-md);
  color: var(--gl-ink);
}
main#upload .fileuploader-title span { color: var(--gl-muted); font-size: var(--gl-fs-sm); }
main#upload .fileuploader-status {
  font-family: "regular", sans-serif;
  color: var(--gl-muted);
  font-size: var(--gl-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Der Balken war tuerkis — kein Ton der Palette. */
main#upload .fileuploader-progress {
  background: var(--gl-surface-2) !important;
  border-radius: 999px;
  overflow: hidden;
  height: 6px !important;
}
main#upload .fileuploader-progress > span,
main#upload .fileuploader-progress-bar {
  background: var(--gl-accent) !important;
  border-radius: 999px;
  height: 100% !important;
}

/* --- Löschen: zurückhaltend, wie im Warenkorb ------------------------- */
main#upload .fileuploader-action a.delete {
  color: var(--gl-muted) !important;
  opacity: 1;
  transition: color .15s ease;
}
main#upload .fileuploader-action a.delete:hover { color: #B3261E !important; }

/* --- Die Aktionszeile unten ------------------------------------------ */
main#upload .gl-upload-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2rem;
}
main#upload .gl-upload-aktionen .gl-zurueck {
  order: 1;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
  background: #fff;
  border: 1px solid var(--gl-line-2);
  border-radius: var(--gl-radius-sm);
  color: var(--gl-ink);
  font-size: var(--gl-fs-sm);
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
main#upload .gl-upload-aktionen .gl-zurueck:hover {
  background: var(--gl-ink); border-color: var(--gl-ink); color: #fff;
}
main#upload .gl-upload-aktionen #to_upload_check { order: 2; margin: 0 !important; }

/* Auf dem Telefon standen die beiden Knoepfe untereinander, aber
   verschieden breit und verschieden ausgerichtet — der Zurueckweg links,
   „Weiter" rechts. Volle Breite, Hauptaktion oben. */
@media screen and (max-width: 600px) {
  main#upload .gl-upload-aktionen { flex-direction: column; align-items: stretch; }
  main#upload .gl-upload-aktionen .gl-zurueck {
    order: 2; margin-right: 0; justify-content: center;
  }
  main#upload .gl-upload-aktionen #to_upload_check {
    order: 1; width: 100% !important; min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------- *
 * 47.1  Die Prüfmarken und das Löschsymbol
 *
 * BEFUND: Die Haken tragen `rgb(107, 206, 54)` — ein grelles Grasgrün,
 * dasselbe Muster wie beim Statusabzeichen im Kopf (37.7). Das
 * Löschsymbol ist ein rotes Bild (`::before` mit `url(...)`), also nicht
 * umfärbbar — es wird durch ein eigenes ersetzt.
 * --------------------------------------------------------------------- */
main#upload .fileuploader-check ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
main#upload .fileuploader-check li.check {
  list-style: none;
  color: var(--gl-muted-2) !important;
  font-size: var(--gl-fs-sm);
  display: inline-flex;
  align-items: center;
}
main#upload .fileuploader-check li.check::before {
  background: var(--gl-accent) !important;
  color: #fff !important;
}
/* Fehlerfall: der Master vergibt dafür eine eigene Klasse */
main#upload .fileuploader-check li.error::before,
main#upload .fileuploader-check li.check.error::before,
main#upload .fileuploader-check li.failed::before {
  background: #B3261E !important;
}
main#upload .fileuploader-check li.error,
main#upload .fileuploader-check li.failed { color: #B3261E !important; }
/* Die Warnstufe traegt im Master `rgb(235, 216, 25)` — Warnwestengelb auf
   weissem Grund, also praktisch unlesbar. */
main#upload .fileuploader-check li.warning::before {
  background: #B98518 !important;
  color: #fff !important;
}

/* Löschsymbol: eigenes statt des roten Bildes */
main#upload .fileuploader-action a.delete::before {
  content: "" !important;
  display: inline-block;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%237A736A' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5h13M7 4.5V2.8h4v1.7M4 4.5l.9 11.2h8.2L14 4.5M7.3 7.8v5M10.7 7.8v5'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
main#upload .fileuploader-action a.delete:hover::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23B3261E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5h13M7 4.5V2.8h4v1.7M4 4.5l.9 11.2h8.2L14 4.5M7.3 7.8v5M10.7 7.8v5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------- *
 * 47.2  Die Dateizeile ordnen
 *
 * Der Master setzt Vorschau, Prüfmarken, Löschen, Name, Größe und Balken
 * mit Floats nebeneinander. Ohne den Ablagebereich darüber steht das
 * auseinandergezogen da. Als Raster wird daraus eine Zeile.
 * --------------------------------------------------------------------- */
main#upload .fileuploader-items.cf {
  display: flex !important;
  align-items: center;
  gap: 1.25rem;
  float: none !important;
}
main#upload .fileuploader-thumb {
  flex: 0 0 auto;
  width: 56px !important;
  height: 56px !important;
  float: none !important;
  display: flex; align-items: center; justify-content: center;
  background: var(--gl-bg);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-sm);
  overflow: hidden;
}
main#upload .fileuploader-thumb .preview,
main#upload .fileuploader-thumb img {
  max-width: 100% !important; max-height: 100% !important;
  width: auto !important; height: auto !important;
  opacity: .55;
}
main#upload .fileuploader-check { flex: 1 1 auto; float: none !important; width: auto !important; }
main#upload .fileuploader-action { flex: 0 0 auto; float: none !important; width: auto !important; text-align: right; }
main#upload .fileuploader-title { margin-top: 1.1rem; float: none !important; width: auto !important; }
main#upload .fileuploader-status { float: none !important; width: auto !important; }

/* Das Symbol gehoerte zur ausgeblendeten Ueberschrift und stand danach
   allein oben links (`#upload_browser::before`, Icon-Zeichen "a"). */
main#upload #upload_browser:has(.fileuploader-items)::before { content: none !important; }
/* Der Platz links (50 px) gehoerte zu diesem Symbol. Ohne das Symbol
   steht die Pruefkarte um 50 px eingerueckt gegenueber den Schaltflaechen
   darunter — zwei Fluchten in einer Karte. */
main#upload #upload_browser:has(.fileuploader-items) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Der Vorschaukasten bleibt bei einer PDF leer — ein leerer, gerahmter
   Kasten liest sich als Fehler. Rahmen und Flaeche entfallen, das Bild
   wird nur eingepasst, falls es eines gibt. */
main#upload .fileuploader-thumb {
  background: none !important;
  border: 0 !important;
  width: 58px !important; height: 58px !important;
}
main#upload .fileuploader-thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
}
/* Prüfmarken nebeneinander statt untereinander */
main#upload .fileuploader-check li.check { flex: 0 0 auto; }

/* --------------------------------------------------------------------- *
 * 47.3  Der Fehlerfall der Datenprüfung
 *
 * BEFUND (geprüft mit einer PDF im Format 90x55 statt DIN A4):
 *
 *   <li class="error tooltip">Maße
 *     <div class="top">Die Abmessung ihrer Seite ist nicht DIN A4 …</div>
 *   </li>
 *   <div class="fileuploader-errormsg">Bitte korrigieren Sie Ihre Daten …</div>
 *
 * Drei Sachen stimmen nicht:
 *   1. Der GRUND steht in einem Tooltip. Der Kunde sieht „Maße ✗" und
 *      erfährt erst beim Überfahren, was los ist — auf einem Telefon
 *      also gar nicht. Die wichtigste Information der Seite ist versteckt.
 *   2. Das Fehlerband ist `rgb(237, 60, 74)`, volle Breite, ohne Radius —
 *      ein Signalton, der mit nichts im Laden verwandt ist.
 *   3. Der Dateiname läuft aus der Karte heraus (586 px Zeile in einer
 *      730-px-Karte, kein Umbruch).
 * --------------------------------------------------------------------- */

/* 1 — den Grund sichtbar machen */
main#upload .fileuploader-check li.error {
  display: block !important;
  flex: 1 1 100% !important;
}
main#upload .fileuploader-check li.error > div.top {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  margin: .5rem 0 0 2.1rem;
  padding: .7rem .9rem;
  max-width: 46rem;
  background: #FBF2F1 !important;
  border: 1px solid #E3CFCC !important;
  border-radius: var(--gl-radius-sm);
  color: #8A2119 !important;
  font-size: var(--gl-fs-sm);
  line-height: 1.5;
  white-space: normal !important;
  box-shadow: none !important;
}
main#upload .fileuploader-check li.error > div.top i { display: none !important; }

/* 2 — das Fehlerband in unsere Sprache */
main#upload .fileuploader-errormsg {
  background: #FBF2F1 !important;
  color: #8A2119 !important;
  border: 1px solid #E3CFCC !important;
  border-radius: var(--gl-radius-sm) !important;
  padding: .85rem 1.1rem !important;
  font-family: "regular", sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--gl-fs-md) !important;
  margin: 1.5rem 0 0 !important;
  text-align: left;
}

/* 3 — langer Dateiname bleibt in der Karte */
main#upload .fileuploader-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
main#upload .fileuploader-title span { white-space: normal; }


/* ===================================================================== *
 * 48  SLIDER MIT MEHREREN SLIDES
 *
 * BEFUND, und der Fehler war meiner: Solange die Startseite genau EINEN
 * Slide hatte, habe ich `.slider-control` ausgeblendet — Pfeile auf einem
 * einzelnen Bild sind Zierrat. Als der Betreiber drei weitere Slides
 * anlegte, blieben die Pfeile aus, und damit war kein Weiterblaettern
 * mehr moeglich: Die Slides liegen bei x = 1440, 2880 und 4320 in einem
 * Behaelter mit `overflow: hidden`. Die Bilder waren geladen — nur
 * unerreichbar.
 *
 * LEHRE: Eine Regel, die an einer Menge haengt („nur ein Slide"), muss
 * diese Menge auch pruefen. `:has(.slide-1)` tut das; ein blankes
 * `display: none` gilt fuer immer.
 * ===================================================================== */
.slider-container:has(.slide-1) .slider-control {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 12px rgba(20, 18, 15, .18);
  cursor: pointer;
  opacity: 1 !important;
  transition: background-color .15s ease, transform .15s ease;
}
.slider-container:has(.slide-1) .slider-control.left  { left: 1.25rem; }
.slider-container:has(.slide-1) .slider-control.right { right: 1.25rem; }
.slider-container:has(.slide-1) .slider-control:hover {
  background: var(--gl-ink);
  transform: translateY(-50%) scale(1.06);
}
/* Der Master setzt das Zeichen ueber eine Icon-Schrift — die Farbe muss
   beim Ueberfahren mitwechseln, sonst verschwindet sie (vgl. 36.1). */
.slider-container:has(.slide-1) .slider-control::before,
.slider-container:has(.slide-1) .slider-control > * {
  color: var(--gl-ink) !important;
  font-size: 20px;
  line-height: 1;
}
.slider-container:has(.slide-1) .slider-control:hover::before,
.slider-container:has(.slide-1) .slider-control:hover > * { color: #fff !important; }

/* Die Punkte darunter zeigen, wie viele Slides es gibt */
.slider-container:has(.slide-1) .slider-pagi { display: block; }

@media screen and (max-width: 767px) {
  .slider-container:has(.slide-1) .slider-control { width: 38px; height: 38px; }
  .slider-container:has(.slide-1) .slider-control.left  { left: .6rem; }
  .slider-container:has(.slide-1) .slider-control.right { right: .6rem; }
}

/* --------------------------------------------------------------------- *
 * 48.1  Der Hintergrund gehört in SEINEN Slide
 *
 * BEFUND: Bei mehreren Slides sass `.slide__bg` um 720 px versetzt neben
 * dem eigenen Slide — die Bilder ab Slide 2 waren dadurch unsichtbar,
 * obwohl sie geladen waren. Der Wert stammt weder aus einer CSS-Regel
 * noch aus einem Inline-Stil (beides nachgesehen); der Slider des Masters
 * setzt ihn im Ablauf, offenbar fuer einen Parallaxe-Effekt. Mit genau
 * einem Slide war der Versatz immer 0 und fiel deshalb nie auf.
 *
 * KONSEQUENZ: Der Hintergrund wird an seinen Slide gebunden. Der
 * Parallaxe-Effekt entfaellt — er war ohnehin nie sichtbar, und ein Bild,
 * das man sieht, ist mehr wert als eine Bewegung, die man nicht sieht.
 * --------------------------------------------------------------------- */
.slider-container .slide .slide__bg,
.slider .slide .slide__bg {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------- *
 * 46.3  Das Symbol im Hochladen-Knopf
 *
 * BEFUND: `button.btn.upload::before` traegt ein Zeichen der Icon-Schrift,
 * gesetzt mit `position: absolute; left: 5px; top: 2px` und in Schwarz —
 * es klebt oben links in der jadegruenen Flaeche statt neben dem Text.
 *
 * KONSEQUENZ: In die Zeile holen, weiss, mittig — wie beim Wagensymbol in
 * 37.17. Dieselbe Ursache, dieselbe Loesung.
 * --------------------------------------------------------------------- */
#visual_calculation label.upload_field > button.btn.upload::before {
  position: static !important;
  left: auto !important; top: auto !important; right: auto !important;
  display: inline-block !important;
  width: auto !important; height: auto !important;
  margin: 0 .55rem 0 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: -.15em !important;
  text-indent: 0 !important;
  float: none !important;
}

/* --------------------------------------------------------------------- *
 * 46.4  Das Löschkreuz
 *
 * BEFUND: Der Knopf ist ein `<input type="button" value="X">` — das „X"
 * ist also ein BUCHSTABE, kein Symbol. Er sass ausserdem einen Pixel ueber
 * der Kante des Streifens.
 *
 * KONSEQUENZ: Buchstabe unsichtbar machen und ein echtes Kreuz als
 * Hintergrundbild setzen. Pseudoelemente gehen bei `input` nicht — es ist
 * ein ersetztes Element. `font-size: 0` ist hier also richtig; bei einem
 * Symbol aus `::before` waere es falsch (docs/10, G19).
 * --------------------------------------------------------------------- */
#visual_calculation label.text input.btnDelete,
#visual_calculation fieldset label.text input.btnDelete {
  /* Der Master setzt `position: relative; top: -10px` — daher hing das
     Kreuz zehn Pixel zu hoch und stand oben einen Pixel ueber der Kante
     des Streifens. `align-self: center` allein hilft dagegen nicht: der
     Versatz wird NACH dem Ausrichten aufgeschlagen. */
  position: static !important;
  top: auto !important;
  align-self: center;
  /* Der graue Ring machte aus dem Kreuz einen zweiten Knopf neben dem
     Dateinamen. Ohne Ring ist es ein Zeichen, das erst beim Ueberfahren
     eine Flaeche bekommt. */
  border: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%237A736A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 2l10 10M12 2L2 12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
}
/* Beim Ueberfahren nur die Farbe wechseln, nicht die Flaeche fluten —
   eine Loeschfunktion neben einem Dateinamen darf nicht knallen. */
#visual_calculation label.text input.btnDelete:hover,
#visual_calculation fieldset label.text input.btnDelete:hover {
  /* Der Streifen ist selbst schon warmweiss — ein zarter Rosaton
     verschwindet darauf. Der Kreis muss etwas kraeftiger sein, damit man
     die Trefferflaeche sieht und nicht nur ein groesser wirkendes Kreuz. */
  background-color: #F3DEDB !important;
  border: 0 !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B3261E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 2l10 10M12 2L2 12'/%3E%3C/svg%3E") !important;
}

/* --------------------------------------------------------------------- *
 * 47.4  Die Prüfanzeige, neu gefasst
 *
 * Das Skript in `data/inc.header.htm` baut die Liste um: Tooltip weg,
 * Statuswort dazu, Grund als eigener Absatz. Hier bekommt sie ihre Form —
 * eine Zeile je Prüfpunkt, der Grund direkt darunter.
 * --------------------------------------------------------------------- */
main#upload .gl-pruef__titel {
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin: 0 0 .9rem;
}
main#upload .fileuploader-check ul {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--gl-line);
}
main#upload .fileuploader-check li.check,
main#upload .fileuploader-check li.warning,
main#upload .fileuploader-check li.error {
  display: block !important;
  flex: none !important;
  position: relative;
  margin: 0 !important;
  padding: .85rem 0 .85rem 2.1rem !important;
  border-bottom: 1px solid var(--gl-line);
  font-size: var(--gl-fs-md);
  color: var(--gl-ink) !important;
}
/* Das Zeichen des Masters sitzt als `::before` — Groesse und Lage hier */
main#upload .fileuploader-check li::before {
  position: absolute !important;
  left: 0; top: .95rem;
  width: 20px !important; height: 20px !important;
  line-height: 20px !important;
  font-size: 12px !important;
  text-align: center;
  border-radius: 999px;
}
main#upload .gl-pruef__name { font-weight: 500; }
main#upload .gl-pruef__status {
  float: right;
  font-size: var(--gl-fs-sm);
  color: var(--gl-muted);
}
main#upload li.error .gl-pruef__status { color: #B3261E; font-weight: 500; }
main#upload li.warning .gl-pruef__status { color: #8A5A12; font-weight: 500; }
main#upload .gl-pruef__grund {
  clear: both;
  margin: .65rem 0 0;
  padding: .75rem .95rem;
  background: #FBF2F1;
  border: 1px solid #E3CFCC;
  border-radius: var(--gl-radius-sm);
  font-size: var(--gl-fs-sm);
  line-height: 1.55;
  color: #8A2119;
}
/* Der Master kennt drei Stufen — `check`, `warning`, `error` (upload.htm,
   Zeilen 453-477). Ein Hinweis ist kein Fehler und darf nicht wie einer
   aussehen; er bekommt denselben Kasten in Bernstein. */
main#upload li.warning .gl-pruef__grund {
  background: #FBF6EC;
  border-color: #E6D6B4;
  color: #6E4E11;
}

/* --------------------------------------------------------------------- *
 * 47.5  Die Anordnung der Prüfkarte
 *
 * BEFUND: Der Master legt Vorschau, Prüfliste und Löschen in eine Zeile.
 * Das war richtig, solange die Prüfliste zwei kurze Marken nebeneinander
 * war. Jetzt ist sie eine Liste mit Begründung — in einer schmalen Spalte
 * bricht der Begründungstext auf sechs Zeilen um.
 *
 * Die Vorschau bleibt bei einer PDF ohnehin leer (siehe 47.2) und kostet
 * nur Breite. Sie entfaellt; das Loeschen wandert in die Kopfzeile.
 * --------------------------------------------------------------------- */
main#upload .fileuploader-items.cf {
  display: block !important;
  position: relative;
}
main#upload .fileuploader-thumb { display: none !important; }
main#upload .fileuploader-check {
  width: 100% !important;
  flex: none !important;
}
main#upload .fileuploader-action {
  position: absolute !important;
  top: 0; right: 0;
  width: auto !important;
}
main#upload .gl-pruef__grund { max-width: none; }

/* Der Master laesst die Pruefpunkte floaten (`li` mit `float: left` und
   fester Breite). In einer Liste mit Begruendung darunter ist das falsch —
   der Text bricht sonst in einer 170-px-Spalte um. */
main#upload .fileuploader-check li.check,
main#upload .fileuploader-check li.warning,
main#upload .fileuploader-check li.error,
main#upload .fileuploader-check li.failed {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
main#upload .gl-pruef__grund,
main#upload .gl-pruef__name {
  float: none !important;
  width: auto !important;
}
main#upload .gl-pruef__grund {
  display: block;
  width: auto !important;          /* 100% waere die Breite OHNE das eigene
                                      Innenmass — der Kasten lief 30 px ueber
                                      die rechte Flucht der Liste hinaus */
  box-sizing: border-box;
}

/* --------------------------------------------------------------------- *
 * 47.6  Die Dateizeile nach der Prüfung
 *
 * BEFUND: Unter der Prüfliste stehen drei Reste des Hochladens — der
 * Dateiname in Überschriftengröße, darunter „100% PrintCheck" und ein
 * randvoller Fortschrittsbalken. Ein Balken auf 100 % sagt nichts mehr;
 * er sieht nur aus, als liefe noch etwas. Sobald ein Prüfergebnis da ist,
 * entfallen Statuszeile und Balken, und der Name wird zur ruhigen
 * Fußzeile mit der Größe dahinter.
 *
 * Der Master fuellt `.fileuploader-status` erst mit „0% Upload", dann mit
 * „100% PrintCheck" (upload.htm, Zeilen 345 und 373) — solange noch kein
 * Prüfpunkt gesetzt ist, bleibt beides stehen und zeigt den Fortschritt.
 * --------------------------------------------------------------------- */
main#upload .fileuploader:has(.fileuploader-check li.check) .fileuploader-status,
main#upload .fileuploader:has(.fileuploader-check li.warning) .fileuploader-status,
main#upload .fileuploader:has(.fileuploader-check li.error) .fileuploader-status,
main#upload .fileuploader:has(.fileuploader-check li.check) .fileuploader-progress,
main#upload .fileuploader:has(.fileuploader-check li.warning) .fileuploader-progress,
main#upload .fileuploader:has(.fileuploader-check li.error) .fileuploader-progress {
  display: none !important;
}
/* `#to_upload_check.hidden` ist im Master `visibility: hidden` — die
   Schaltflaeche verschwindet, ihr Platz bleibt. Im Fehlerfall steht dann
   rechts neben „Andere Datei waehlen" ein 120-px-Loch. */
main#upload #to_upload_check.hidden { display: none !important; }

main#upload .fileuploader-title {
  margin: 1.1rem 0 0 !important;
  font-family: "regular", sans-serif;
  font-size: var(--gl-fs-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: var(--gl-muted) !important;
  word-break: break-all;
}
/* Name und Groesse standen mit einem Mittelpunkt in einer Zeile — bei
   einem langen Dateinamen bricht die Zeile aber um, und der Punkt landet
   allein am Anfang der zweiten. Also zwei Zeilen. */
main#upload .fileuploader-title span {
  display: block;
  font-family: "regular", sans-serif !important;
  font-weight: 400 !important;
  font-size: var(--gl-fs-xs) !important;
  color: var(--gl-muted-2) !important;
}