
/* ============================================================================
   Ausstellerportal (exhmypages2012) — CMS-Stylesheet (smk_layout.local_css)
   ----------------------------------------------------------------------------
   Ersetzt das alte Portal-Stylesheet aus der Vor-Shell-Ära (FMT-5976,
   2026-10-05). Entfernt: alle Regeln für das tote alte Rahmenlayout
   (#col1/#col3-Spalten, div#header-Banner, #mainlinks, .subcolumns,
   .service*, #headbanner, Logout-Modul, …) — dieses Markup existiert unter
   dem fm-shop-shell-Frame nicht mehr.

   Lädt NACH fm-shop.css und konsumiert dessen --fairmate-*-Tokens, damit
   die Portal-Elemente den Shop-Look der jeweiligen Messe übernehmen.
   Portal-Regeln sind unter .fair-exhmypages2012 gescopt, weil diese Datei
   als local_css auch auf anderen Seitenbäumen (z. B. Leitstand) hängen kann.

   Abschnitte:
     1. Überschriften (h1–h4)
     2. Formularfelder (Text-Inputs, Select, Textarea, Datei-Upload)
     3. Buttons (generisch nach Element/Typ, primär/sekundär)
     4. Karten & Formular-Strukturen (.formBox/.box, Labels, Radios)
     5. Schritt-Anzeige (eshop2 .comp_steps)
     6. Tabellen (DataTables, Warenkorb, Adressformular, ticketprices)
     7. Modal-Layer & Spinner (Gutschein-App)
     8. Übernommene Portal-Helfer (.transparent, .numberBox, …)
     9. Leitstand/Statistik (unverändert übernommen, eigener Baum)
   ============================================================================ */

@media all {

/* ── 1. Überschriften ────────────────────────────────────────────────────── */

.fair-exhmypages2012 #shop-content h1 {
    font-size: clamp(1.5rem, 1.23rem + 1.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fairmate-color-primary-headline);
    margin: 1rem 0 2rem;
}

.fair-exhmypages2012 #shop-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fairmate-color-primary-headline);
}

.fair-exhmypages2012 #shop-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fairmate-color-primary-headline);
}

.fair-exhmypages2012 #shop-content h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fairmate-color-primary-headline);
}

/* ── 2. Formularfelder ───────────────────────────────────────────────────── */

.fair-exhmypages2012 #shop-content input[type="text"],
.fair-exhmypages2012 #shop-content input[type="password"],
.fair-exhmypages2012 #shop-content input[type="email"],
.fair-exhmypages2012 #shop-content input[type="search"],
.fair-exhmypages2012 #shop-content input[type="tel"],
.fair-exhmypages2012 #shop-content input[type="url"],
.fair-exhmypages2012 #shop-content textarea,
.fair-exhmypages2012 #shop-content select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 1rem;
    color: var(--fairmate-color-darkest);
    background: var(--fairmate-color-lightest);
    border: 1.5px solid var(--fairmate-color-outline-variant);
    border-radius: var(--fairmate-rounded-input, 4px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.fair-exhmypages2012 #shop-content input::placeholder,
.fair-exhmypages2012 #shop-content textarea::placeholder {
    color: var(--fairmate-color-on-surface-variant);
    opacity: 0.7;
}

.fair-exhmypages2012 #shop-content input[type="text"]:hover,
.fair-exhmypages2012 #shop-content input[type="password"]:hover,
.fair-exhmypages2012 #shop-content input[type="email"]:hover,
.fair-exhmypages2012 #shop-content textarea:hover,
.fair-exhmypages2012 #shop-content select:hover {
    border-color: var(--fairmate-color-primary);
}

.fair-exhmypages2012 #shop-content input[type="text"]:focus,
.fair-exhmypages2012 #shop-content input[type="password"]:focus,
.fair-exhmypages2012 #shop-content input[type="email"]:focus,
.fair-exhmypages2012 #shop-content textarea:focus,
.fair-exhmypages2012 #shop-content select:focus {
    outline: none;
    border-color: var(--fairmate-color-primary);
    box-shadow: 0 0 0 3px var(--fairmate-color-focus-visible);
}

.fair-exhmypages2012 #shop-content input:disabled,
.fair-exhmypages2012 #shop-content textarea:disabled,
.fair-exhmypages2012 #shop-content select:disabled {
    background: var(--fairmate-color-surface-container);
    color: var(--fairmate-color-on-surface-variant);
    cursor: not-allowed;
}

/* mehrzeilig: Höhe aus dem Inhalt, nicht die 48px-Einzeilen-Box */
.fair-exhmypages2012 #shop-content textarea {
    height: auto;
    min-height: 6rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    line-height: 1.5;
}

/* Datei-Uploads (Gruppenticket-Upload, Logo-/XLS-Personalisierung) */
.fair-exhmypages2012 #shop-content input[type="file"] {
    display: block;
    max-width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--fairmate-color-darkest);
    background: var(--fairmate-color-lightest);
    border: 1.5px dashed var(--fairmate-color-outline-variant);
    border-radius: var(--fairmate-rounded-input, 4px);
}

.fair-exhmypages2012 #shop-content p.form_value,
.fair-exhmypages2012 #shop-content p.form_label
{
    margin: 0;
}

/* ── 3. Buttons (generisch) ──────────────────────────────────────────────── */

/* Basisrezept für alles, was als Button wirkt: eshop2-Schritt-Links,
   native Buttons, Submit-/Button-Inputs und die Gutschein-App-Buttons
   (.submitButton, teils ohne type-Attribut). */
.fair-exhmypages2012 #shop-content a.button,
.fair-exhmypages2012 #shop-content button,
.fair-exhmypages2012 #shop-content input[type="submit"],
.fair-exhmypages2012 #shop-content input[type="button"],
.fair-exhmypages2012 #shop-content input[type="reset"],
.fair-exhmypages2012 #shop-content input.submitButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: auto;
    padding: 0.75rem 1.75rem;
    border: none;
    border-radius: var(--fairmate-rounded-button);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    box-sizing: border-box;
    margin: 0.5rem 0.75rem 0.5rem 0;
    background: var(--fairmate-color-cta-primary);
    color: var(--fairmate-color-on-cta-primary);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fair-exhmypages2012 #shop-content a.button:hover,
.fair-exhmypages2012 #shop-content button:hover,
.fair-exhmypages2012 #shop-content input[type="submit"]:hover,
.fair-exhmypages2012 #shop-content input[type="button"]:hover,
.fair-exhmypages2012 #shop-content input[type="reset"]:hover,
.fair-exhmypages2012 #shop-content input.submitButton:hover,
.fair-exhmypages2012 #shop-content a.button:focus-visible,
.fair-exhmypages2012 #shop-content button:focus-visible,
.fair-exhmypages2012 #shop-content input[type="submit"]:focus-visible,
.fair-exhmypages2012 #shop-content input[type="button"]:focus-visible,
.fair-exhmypages2012 #shop-content input[type="reset"]:focus-visible,
.fair-exhmypages2012 #shop-content input.submitButton:focus-visible {
    background: var(--fairmate-color-cta-primary-hover);
    color: var(--fairmate-color-on-cta-primary-hover);
}

.fair-exhmypages2012 #shop-content a.button:focus-visible,
.fair-exhmypages2012 #shop-content button:focus-visible,
.fair-exhmypages2012 #shop-content input[type="submit"]:focus-visible,
.fair-exhmypages2012 #shop-content input[type="button"]:focus-visible,
.fair-exhmypages2012 #shop-content input[type="reset"]:focus-visible,
.fair-exhmypages2012 #shop-content input.submitButton:focus-visible {
    outline: var(--fairmate-outline-width, 2px) solid var(--fairmate-color-focus-visible);
    outline-offset: var(--fairmate-outline-offset, 2px);
}

.fair-exhmypages2012 #shop-content button:disabled,
.fair-exhmypages2012 #shop-content input[type="submit"]:disabled,
.fair-exhmypages2012 #shop-content input[type="button"]:disabled,
.fair-exhmypages2012 #shop-content input[type="reset"]:disabled,
.fair-exhmypages2012 #shop-content input.submitButton:disabled {
    background: var(--fairmate-color-inactive);
    color: var(--fairmate-color-on-inactive);
    cursor: not-allowed;
}

/* alte help_bullet-GIFs in den Schritt-Links */
.fair-exhmypages2012 #shop-content a.button img { display: none; }

/* Sekundär: Zurück/Abbrechen/Schließen und Umschalter — "Bestellung
   aktualisieren", type=button bzw. typlose .submitButton, nackte <button>.
   Vorwärts-Aktionen (a.button, input[type=submit]) bleiben primär. */
.fair-exhmypages2012 #shop-content input[type="reset"],
.fair-exhmypages2012 #shop-content a.button.button_calculate {
    background: var(--fairmate-color-cta-secondary);
    color: var(--fairmate-color-on-cta-secondary);
}

.fair-exhmypages2012 #shop-content input[type="reset"]:hover,
.fair-exhmypages2012 #shop-content a.button.button_calculate:hover,
.fair-exhmypages2012 #shop-content input[type="reset"]:focus-visible,
.fair-exhmypages2012 #shop-content a.button.button_calculate:focus-visible {
    background: var(--fairmate-color-cta-secondary-hover);
    color: var(--fairmate-color-on-cta-secondary-hover);
}

/* ── 4. Karten & Formular-Strukturen ─────────────────────────────────────── */

.fair-exhmypages2012 #shop-content .formBox,
.fair-exhmypages2012 #shop-content .box {
    background: var(--fairmate-color-lightest);
    border: 1px solid var(--fairmate-color-outline-variant);
    border-radius: var(--fairmate-rounded-article);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
}

/* Boxen schachteln sich (.cart_block > .box) — keine Doppelrahmen */
.fair-exhmypages2012 #shop-content .box .box,
.fair-exhmypages2012 #shop-content .formBox .formBox {
    border: none;
    padding: 0;
    margin: 0;
}

/* Gutschein-Bestellformular: der Rahmen sitzt am Formular selbst,
   die .formBox-Abschnitte darin bleiben rahmenlos */
.fair-exhmypages2012 #shop-content #voucherOrderForm {
    display: block;
    background: var(--fairmate-color-lightest);
    border: 1px solid var(--fairmate-color-outline-variant);
    border-radius: var(--fairmate-rounded-article);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
}

.fair-exhmypages2012 #shop-content #voucherOrderForm .formBox {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}

.fair-exhmypages2012 #shop-content #voucherOrderForm .formBox:last-child {
    margin-bottom: 0;
}

.fair-exhmypages2012 #shop-content .box_footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fairmate-color-outline-variant);
}

/* Label-Zellen (Gutschein-Adressformular + eshop-Formulare) */
.fair-exhmypages2012 #shop-content .fieldName,
.fair-exhmypages2012 #shop-content .eshop_td_label,
.fair-exhmypages2012 #shop-content .form_label,
.fair-exhmypages2012 #shop-content .art_title {
    font-weight: 600;
    color: var(--fairmate-color-darkest);
}

/* Artikel-Titel: Auf-/Zuklapp-Verhalten ist nicht erwünscht (styles_fair.css
   war nie aktiv) — Toggle-Bullets ausblenden und den Link neutralisieren */
.fair-exhmypages2012 #shop-content .art_title {
    line-height: 1.5;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.fair-exhmypages2012 #shop-content .art_title img { display: none; }

.fair-exhmypages2012 #shop-content .radioLabel {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.375rem 0 0.625rem;
    cursor: pointer;
}

.fair-exhmypages2012 #shop-content input.radio,
.fair-exhmypages2012 #shop-content input[type="radio"],
.fair-exhmypages2012 #shop-content input[type="checkbox"] {
    accent-color: var(--fairmate-color-primary);
    width: auto;
    height: auto;
}

.fair-exhmypages2012 #shop-content .infoTxt {
    display: block;
    font-size: 0.875rem;
    color: var(--fairmate-color-on-surface-variant);
}

/* Validierung / Fehlerausgaben */
.fair-exhmypages2012 #shop-content .errorMessage,
.fair-exhmypages2012 #shop-content label.error,
.fair-exhmypages2012 #shop-content .error_box_content,
.fair-exhmypages2012 #shop-content .hinweis {
    color: var(--fairmate-color-error);
}

/* Aktions-Links in Listen (Downloads, Zeilen-Details) */
.fair-exhmypages2012 #shop-content a.linkDownload,
.fair-exhmypages2012 #shop-content a.infoLink {
    font-weight: 600;
    color: var(--fairmate-color-primary-link);
    text-decoration: underline;
    cursor: pointer;
}

.fair-exhmypages2012 #shop-content a.linkDownload:hover,
.fair-exhmypages2012 #shop-content a.infoLink:hover {
    color: var(--fairmate-color-primary-link-hover);
}

/* Registrierungs-Modal: Feldabstand (aus dem alten Stylesheet übernommen) */
.fair-exhmypages2012 #exhibitorRegistrationModal .layerContent input[type="text"] {
    margin-bottom: 1.2em;
}

/* Artikel-Beschreibungsblöcke: von check_section_visibility() (Warenkorb)
   getoggelt. Stammen NICHT aus dem alten CMS-Stylesheet, sondern aus dem
   für dst2027 fehlenden eshop2-Fair-Stylesheet (styles_fair.css → 404) —
   ohne sie sind ausgeblendete Artikelblöcke sichtbar. */
.fair-exhmypages2012 #shop-content .art_invisible { display: none; }
.fair-exhmypages2012 #shop-content .art_visible { display: block; }

/* ── 5. Schritt-Anzeige (eshop2) ─────────────────────────────────────────── */

.fair-exhmypages2012 #shop-content .comp_steps { margin-bottom: 1.5rem; }

.fair-exhmypages2012 #shop-content .comp_steps img { display: none; }

.fair-exhmypages2012 #shop-content .comp_steps table { border-collapse: collapse; }

.fair-exhmypages2012 #shop-content .comp_steps td {
    padding: 0 1.25rem 0 0;
    vertical-align: top;
}

.fair-exhmypages2012 #shop-content .comp_steps .step_nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--fairmate-color-outline-variant);
    border-radius: 50%;
    font-weight: 700;
    color: var(--fairmate-color-on-surface-variant);
    background: var(--fairmate-color-lightest);
}

.fair-exhmypages2012 #shop-content .comp_steps .step_visited .step_nr {
    border-color: var(--fairmate-color-primary);
    color: var(--fairmate-color-primary);
}

.fair-exhmypages2012 #shop-content .comp_steps .step_current .step_nr {
    background: var(--fairmate-color-primary);
    border-color: var(--fairmate-color-primary);
    color: var(--fairmate-color-on-primary);
}

.fair-exhmypages2012 #shop-content .comp_steps .step_desc,
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_inactive {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--fairmate-color-on-surface-variant);
}

.fair-exhmypages2012 #shop-content .comp_steps .step_desc_active {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fairmate-color-darkest);
}

/* ── 6. Tabellen ─────────────────────────────────────────────────────────── */

.fair-exhmypages2012 #shop-content table.dataTable,
.fair-exhmypages2012 #shop-content #cart_article_table,
.fair-exhmypages2012 #shop-content .form_table,
.fair-exhmypages2012 #shop-content table.ticketprices {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
}

.fair-exhmypages2012 #shop-content table.dataTable th,
.fair-exhmypages2012 #shop-content table.dataTable td,
.fair-exhmypages2012 #shop-content #cart_article_table th,
.fair-exhmypages2012 #shop-content #cart_article_table td,
.fair-exhmypages2012 #shop-content .form_table th,
.fair-exhmypages2012 #shop-content .form_table td,
.fair-exhmypages2012 #shop-content table.ticketprices th,
.fair-exhmypages2012 #shop-content table.ticketprices td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--fairmate-color-outline-variant);
    vertical-align: middle;
}

.fair-exhmypages2012 #shop-content table.dataTable th,
.fair-exhmypages2012 #shop-content #cart_article_table th,
.fair-exhmypages2012 #shop-content .form_table th,
.fair-exhmypages2012 #shop-content table.ticketprices th {
    font-weight: 600;
    color: var(--fairmate-color-darkest);
    border-bottom-width: 2px;
}

/* Zeilen-Zustände aus den Bestell-Listen */
.fair-exhmypages2012 #shop-content table.dataTable tr.backGray {
    background-color: var(--fairmate-color-surface-container);
}

.fair-exhmypages2012 #shop-content table.dataTable tr.totalLine {
    font-weight: 700;
}

/* Preistabelle (Inhaltsseiten) */
.fair-exhmypages2012 #shop-content table.ticketprices th {
    background-color: var(--fairmate-color-surface-container);
    text-align: center;
}

.fair-exhmypages2012 #shop-content table.ticketprices td { text-align: right; }
.fair-exhmypages2012 #shop-content table.ticketprices td.first { text-align: left; }

/* Preise einzeilig, Ziffern bündig */
.fair-exhmypages2012 #shop-content td.price_info {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* DataTables-Suchfeld sitzt inline im Label — nicht auf Seitenbreite ziehen */
.fair-exhmypages2012 #shop-content .dataTables_filter input {
    display: inline-block;
    width: auto;
    margin-left: 0.5rem;
}

/* Mengenfelder (Warenkorb + Artikeltabelle): Breite bestimmt das
   size-Attribut des Backends */
.fair-exhmypages2012 #shop-content td.eshop_td_input input,
.fair-exhmypages2012 #shop-content input.form_amount {
    text-align: right;
}

/* ── 7. Modal-Layer & Spinner (Gutschein-App) ────────────────────────────── */

.fair-exhmypages2012 .layerFullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--fairmate-color-darkest) 50%, transparent);
}

.fair-exhmypages2012 .layerContentBox {
    width: 100%;
    max-width: 40rem;
    max-height: 90vh;
    overflow: auto;
    padding: 1.5rem;
    box-sizing: border-box;
    background: var(--fairmate-color-lightest);
    border-radius: var(--fairmate-rounded-article);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--fairmate-color-darkest) 25%, transparent);
}

.fair-exhmypages2012 .layerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.fair-exhmypages2012 .layerHeader h2 { margin: 0; }

/* das leere <a class="closeButton"> bekommt ein sichtbares ✕
   (das alte bu_close_x.png existiert nicht mehr) */
.fair-exhmypages2012 a.closeButton {
    padding: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--fairmate-color-darkest);
    text-decoration: none;
}

.fair-exhmypages2012 a.closeButton::before { content: "✕"; }

.fair-exhmypages2012 a.closeButton:hover { opacity: 0.6; }

/* Lade-Spinner: Die alten SpinKit-Keyframes (12 Punkte) sind weg;
   einfacher tokenfarbener Ring als Ersatz. */
.fair-exhmypages2012 .sk-circle {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--fairmate-color-outline-variant);
    border-top-color: var(--fairmate-color-primary);
    border-radius: 50%;
    animation: fm-portal-spin 0.8s linear infinite;
}

.fair-exhmypages2012 .sk-circle div { display: none; }

@keyframes fm-portal-spin {
    to { transform: rotate(360deg); }
}

/* ── 8. Übernommene Portal-Helfer ────────────────────────────────────────── */

/* dimedis.js blendet Bereiche darüber aus */
.fair-exhmypages2012 .transparent { opacity: 0.3; }

/* Freikarten-Zähler-Box */
.fair-exhmypages2012 div.numberBox {
    float: left;
    margin-right: 10px;
}

.fair-exhmypages2012 div.numberBox div span {
    color: var(--fairmate-color-primary);
    font-weight: 700;
}

/* Übersichts-Listen */
.fair-exhmypages2012 ul.uebersicht,
.fair-exhmypages2012 ul.uebersicht li { list-style-type: none; margin-left: 0; }
.fair-exhmypages2012 ul.uebersicht li a { font-weight: 700; }
.fair-exhmypages2012 ul.uebersicht li p { margin-bottom: 10px; }

/* Datenschutz-Block */
.fair-exhmypages2012 div#privacy_provisions {
    text-align: justify;
    border-top: 1px solid var(--fairmate-color-outline-variant);
    padding-top: 1rem;
}

/* Umfrage-/Fragen-Gruppen (Exhibitor-Formulare) */
.fair-exhmypages2012 fieldset {
    margin-top: 2rem;
    border: none;
    border-top: 1px solid var(--fairmate-color-outline-variant);
}

.fair-exhmypages2012 fieldset.question_group div.question_level0 { padding-left: 20px; }
.fair-exhmypages2012 fieldset.question_group fieldset.question { margin-top: 0.8em; }
.fair-exhmypages2012 ul.answers { margin-left: 4ex; margin-top: 20px; }

/* Feldboxen (Registrierungs-/Kontaktformulare) */
.fair-exhmypages2012 div.fieldbox { margin-bottom: 0.5rem; }
.fair-exhmypages2012 div.fieldbox span.info {
    display: block;
    margin: 0.25rem 0 1rem;
    color: var(--fairmate-color-on-surface-variant);
}

/* ---------- Übersicht Bestellungen: Filterbereich ---------- */

/* Sortier-Button rechtsbündig */
.fair-exhmypages2012 #exhOrders_navigationBox {
  display: flex;
  justify-content: flex-end;
}
.fair-exhmypages2012 #exhOrders_navigationBox #exhOrders_toggleArticleTypeView {
  margin-right: 0;
}

/* Filter: Label + Feld in einer Zeile, rechtsbündig */
.fair-exhmypages2012 #article_filter_dropdown,
.fair-exhmypages2012 #article_searchfield {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
.fair-exhmypages2012 #shop-content #article_filter_dropdown select[name="carlist"],
.fair-exhmypages2012 #shop-content #article_searchfield input[type="search"] {
  width: 50%;
  flex: 0 0 50%;
  margin-left: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

  /* Sortier-Button über volle Breite */
  .fair-exhmypages2012 #exhOrders_navigationBox #exhOrders_toggleArticleTypeView {
    width: 100%;
    justify-content: center;
  }

  /* Filterblock nicht mehr gefloatet, volle Breite */
  .fair-exhmypages2012 #shop-content div#dataTablesOrders_filter {
    float: none;
    width: 100%;
    margin-bottom: 1rem;
  }

  /* Label über dem Feld, Feld volle Breite */
  .fair-exhmypages2012 #article_filter_dropdown,
  .fair-exhmypages2012 #article_searchfield {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25em;
    margin-bottom: 0.75em;
  }
  .fair-exhmypages2012 #article_filter_dropdown label,
  .fair-exhmypages2012 #article_searchfield label {
    text-align: left;
  }
  .fair-exhmypages2012 #shop-content #article_filter_dropdown select[name="carlist"],
  .fair-exhmypages2012 #shop-content #article_searchfield input[type="search"] {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Tabelle horizontal scrollbar statt Seitenüberlauf */
  .fair-exhmypages2012 #shop-content #dataTablesOrders_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fair-exhmypages2012 #shop-content table#dataTablesOrders {
    min-width: 600px;
  }
}

@media (max-width: 767px) {
  .fair-exhmypages2012 #shop-content table.dataTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}


/* ── 9. Leitstand / Statistik (eigener Seitenbaum, bewusst ungescopt) ────── */

div#stat_container table.statistik th a { color: var(--fairmate-color-on-primary) !important; }
div#stat_container table.statistik th {
    text-align: center;
    padding: 3px 5px;
    background-color: var(--fairmate-color-primary);
}
div#stat_container table.statistik td {
    padding: 3px 5px;
    border-right: 1px dotted var(--fairmate-color-outline-variant);
}

div#article_box,
div#article_box h3 {
    clear: both;
    padding-top: 10px;
}

} /* end of media all */

/* Druckansicht: Schritt-Anzeige & Co. nicht mitdrucken (Klasse stammt wie
   .art_visible aus dem fehlenden eshop2-Fair-Stylesheet) */
@media print {
    .fair-exhmypages2012 .no_print { display: none !important; }
}

/* ---------- Ticket auswählen (eshop2): Mobile ---------- */
@media (max-width: 767px) {

  /* Schrittleiste als 2x2-Raster statt 4 Spalten */
  .fair-exhmypages2012 #steps_content table,
  .fair-exhmypages2012 #steps_content tbody {
    display: block;
    width: 100%;
  }
  .fair-exhmypages2012 #steps_content tr {
    display: flex;
    flex-wrap: wrap;
  }
  .fair-exhmypages2012 #steps_content td {
    display: block;
    flex: 0 0 50%;
    box-sizing: border-box;
    width: auto;
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  /* Formulartabellen: Label über dem Feld */
  .fair-exhmypages2012 #shop-content table.form_table,
  .fair-exhmypages2012 #shop-content table.form_table tbody,
  .fair-exhmypages2012 #shop-content table.form_table tr,
  .fair-exhmypages2012 #shop-content table.form_table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .fair-exhmypages2012 #shop-content table.form_table td.eshop_td_label {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .fair-exhmypages2012 #shop-content table.form_table td.eshop_td_label p.form_label {
    margin-bottom: 0.25rem;
  }
  .fair-exhmypages2012 #shop-content table.form_table input[type="file"] {
    width: 100%;
  }

  /* Land-Auswahl im Footer (table width="530") */
  .fair-exhmypages2012 #shop-content .box_footer table,
  .fair-exhmypages2012 #shop-content .box_footer tbody,
  .fair-exhmypages2012 #shop-content .box_footer tr,
  .fair-exhmypages2012 #shop-content .box_footer td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Warenkorbtabelle: feste Spaltenaufteilung, passt ohne Scrollen */
  .fair-exhmypages2012 #shop-content #cart_article_table {
    table-layout: fixed;
    width: 100%;
  }
  .fair-exhmypages2012 #shop-content #cart_article_table tr:first-child td:nth-child(1) { width: 52%; }
  .fair-exhmypages2012 #shop-content #cart_article_table tr:first-child td:nth-child(2) { width: 24%; }
  .fair-exhmypages2012 #shop-content #cart_article_table tr:first-child td:nth-child(3) { width: 24%; }
  .fair-exhmypages2012 #shop-content #cart_article_table td {
    padding: 0.5rem;
    overflow-wrap: anywhere;
  }
  .fair-exhmypages2012 #shop-content #cart_article_table h3 {
    font-size: 0.9rem;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Zurück / Weiter über volle Breite */
  .fair-exhmypages2012 #shop-content .comp_back_next_buttons a.button {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
}

/* ── 5. Schritt-Anzeige (eshop2), angelehnt an fmui-stepper aus RegiNA ── */
.fair-exhmypages2012 #shop-content .comp_steps { margin-bottom: 1.5rem; }
.fair-exhmypages2012 #shop-content .comp_steps img { display: none; }
.fair-exhmypages2012 #shop-content .comp_steps #steps_content { container-type: inline-size; }

.fair-exhmypages2012 #shop-content .comp_steps table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.fair-exhmypages2012 #shop-content .comp_steps tr {
  display: flex; align-items: stretch; gap: 1.5rem;
  min-height: 4rem; box-shadow: 0 6px 4px 0 #0000001f;
}
.fair-exhmypages2012 #shop-content .comp_steps td {
  display: flex; align-items: center; flex: none; position: relative;
  width: auto !important;            /* überschreibt width="137" */
  min-width: 0; padding: 1.25rem 1rem;
}
.fair-exhmypages2012 #shop-content .comp_steps td.step_current {
  border-bottom: 2px solid var(--fairmate-color-primary);
  background-color: var(--fairmate-color-active-step, var(--fmui-color-surface-container, #f3f3f8));
}

/* Trennlinie zwischen den Schritten, auf Höhe des Kreises (ersetzt step_arrow.gif) */
.fair-exhmypages2012 #shop-content .comp_steps td + td::before {
  content: ""; position: absolute; left: 0; top: calc(1.25rem + 12px);
  width: 1.5rem; height: 1px; transform: translateX(-100%);
  background: var(--fairmate-color-primary);
}

/* Nummern-Kreis, alle drei Varianten */
.fair-exhmypages2012 #shop-content .comp_steps .step_nr,
.fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive,
.fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive_linked_not_visited {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; margin-inline-end: 8px;
  border: 0; border-radius: 50%;
  font-size: .75rem; font-weight: 400; line-height: 1; text-decoration: none;
  background: color-mix(in srgb, var(--fairmate-color-primary) 60%, transparent);
  color: #fff;
}
.fair-exhmypages2012 #shop-content .comp_steps .step_visited .step_nr {
  background: var(--fairmate-color-on-active-step, var(--fairmate-color-accent, var(--fairmate-color-primary)));
}

/* Titel */
.fair-exhmypages2012 #shop-content .comp_steps p { margin: 0; line-height: 1; min-width: 0; }
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_active,
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_inactive,
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_inactive_linked {
  display: block; margin: 0; font-size: inherit; font-weight: 400;
  text-decoration: none; text-align: left;
  color: var(--fairmate-color-accent, var(--fairmate-color-primary));
}
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_active {
  color: var(--fairmate-color-on-active-step, var(--fairmate-color-accent, var(--fairmate-color-primary)));
}
.fair-exhmypages2012 #shop-content .comp_steps .step_not_visited:not(.step_current) { opacity: .6; }

/* Stufe 1: Titel rutschen unter die Zahl */
@container (max-width: 960px) {
  .fair-exhmypages2012 #shop-content .comp_steps td { flex-direction: column; align-items: center; gap: .5rem; }
  .fair-exhmypages2012 #shop-content .comp_steps .step_nr,
  .fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive,
  .fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive_linked_not_visited { margin-inline-end: 0; }
  .fair-exhmypages2012 #shop-content .comp_steps p,
  .fair-exhmypages2012 #shop-content .comp_steps p[class],
  .fair-exhmypages2012 #shop-content .comp_steps p a { text-align: center; }
}

/* Stufe 2: Titel werden mit Ellipsis gekürzt */
@container (max-width: 820px) {
  .fair-exhmypages2012 #shop-content .comp_steps td { flex: 1 1 0; }
  .fair-exhmypages2012 #shop-content .comp_steps p { max-width: 100%; }
  .fair-exhmypages2012 #shop-content .comp_steps p,
  .fair-exhmypages2012 #shop-content .comp_steps p[class],
  .fair-exhmypages2012 #shop-content .comp_steps p a {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Stufe 3: nur noch Zahlen */
@container (max-width: 420px) {
  .fair-exhmypages2012 #shop-content .comp_steps p,
  .fair-exhmypages2012 #shop-content .comp_steps p[class] { display: none; }
  .fair-exhmypages2012 #shop-content .comp_steps td { flex: none; gap: 0; }
  .fair-exhmypages2012 #shop-content .comp_steps tr { justify-content: space-between; }
  .fair-exhmypages2012 #shop-content .comp_steps td + td::before { top: 50%; }
}

/* Eingabefelder ohne type-Attribut (input.form_entry) wie Select-Boxen gestalten */
.fair-exhmypages2012 #shop-content input:not([type]),
.fair-exhmypages2012 #shop-content input.form_entry,
.fair-exhmypages2012 #shop-content input.form_entry_nosize {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 1rem;
  color: var(--fairmate-color-darkest);
  background-color: #fff;
  border: 1.5px solid var(--fairmate-color-outline-variant);
  border-radius: var(--fairmate-rounded-input, 4px);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.fair-exhmypages2012 #shop-content input:not([type]):focus,
.fair-exhmypages2012 #shop-content input.form_entry:focus,
.fair-exhmypages2012 #shop-content input.form_entry_nosize:focus {
  outline: none;
  border-color: var(--fairmate-color-primary);
  box-shadow: 0 0 0 3px var(--fairmate-color-focus-visible);
}

/* Text in allen Formularfeldern linksbuendig */
.fair-exhmypages2012 #shop-content td.eshop_td_input input,
.fair-exhmypages2012 #shop-content input.form_entry,
.fair-exhmypages2012 #shop-content input.form_entry_nosize,
.fair-exhmypages2012 #shop-content select.form_popup,
.fair-exhmypages2012 #shop-content textarea {
  text-align: left;
}

/* Formulartabellen kompakter */
.fair-exhmypages2012 #shop-content .form_table {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.fair-exhmypages2012 #shop-content .form_table th,
.fair-exhmypages2012 #shop-content .form_table td {
  padding: 0.375rem 0.75rem;
}
.fair-exhmypages2012 #shop-content .form_table select,
.fair-exhmypages2012 #shop-content .form_table input[type="text"],
.fair-exhmypages2012 #shop-content .form_table input[type="email"],
.fair-exhmypages2012 #shop-content .form_table input[type="tel"],
.fair-exhmypages2012 #shop-content .form_table input[type="password"] {
  height: 40px;
}

/* Stepper: bereits erfolgte (verlinkte) Steps mit Hintergrund, ohne Unterstreichung */
.fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive_linked,
.fair-exhmypages2012 #shop-content .comp_steps .step_visited .step_nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-inline-end: 8px;
  border: 0;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  background: var(--fairmate-color-on-active-step, var(--fairmate-color-accent, var(--fairmate-color-primary)));
  color: #fff;
}
.fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive_linked:hover,
.fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive_linked:focus,
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_inactive_linked:hover,
.fair-exhmypages2012 #shop-content .comp_steps .step_desc_inactive_linked:focus {
  text-decoration: none;
}

@container (max-width: 960px) {
  .fair-exhmypages2012 #shop-content .comp_steps .step_nr_inactive_linked {
    margin-inline-end: 0;
  }
}

/* Download-Links der eTickets (Schritt 4): Icons per Mask, analog zu .pdf_ticketdownload */
.fair-exhmypages2012 #shop-content .eticket_request_article {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fair-exhmypages2012 #shop-content .eticket_request_article span {
  margin-left: 0;
}
.fair-exhmypages2012 #shop-content a.eticket_request_pdf,
.fair-exhmypages2012 #shop-content a.eticket_request_mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: none;
  color: var(--fairmate-color-primary);
  text-decoration: none;
  transition: background-color .15s;
}
.fair-exhmypages2012 #shop-content a.eticket_request_pdf:hover,
.fair-exhmypages2012 #shop-content a.eticket_request_mobile:hover,
.fair-exhmypages2012 #shop-content a.eticket_request_pdf:focus-visible,
.fair-exhmypages2012 #shop-content a.eticket_request_mobile:focus-visible {
  background-color: var(--fairmate-color-surface-container, #f3f3f8);
  outline: none;
}
.fair-exhmypages2012 #shop-content a.eticket_request_pdf::before,
.fair-exhmypages2012 #shop-content a.eticket_request_mobile::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  -webkit-mask: var(--svg) no-repeat center / 100%;
  mask: var(--svg) no-repeat center / 100%;
}
.fair-exhmypages2012 #shop-content a.eticket_request_pdf::before {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m4 18H6V4h7v5h5v11m-5.5-5.4c.3 0 .5-.2.5-.5V12h-1v2.1c0 .3.2.5.5.5M8 12h1.5c.8 0 1.5.7 1.5 1.5S10.3 15 9.5 15H9v2H8v-5m1 2h.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H9v1m3 3v-5h1.5c.8 0 1.5.7 1.5 1.5v2c0 .8-.7 1.5-1.5 1.5H12m1-1h.5c.3 0 .5-.2.5-.5v-2c0-.3-.2-.5-.5-.5H13v3m3-4h2v1h-1v1h1v1h-1v2h-1v-5Z'/%3E%3C/svg%3E");
}
.fair-exhmypages2012 #shop-content a.eticket_request_mobile::before {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 19H7V5h10m0-4H7c-1.11 0-2 .89-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E");
}

/* Modal "Handyticket senden" (#mobile_send_window): Positionierung fehlt in der neuen fm-shop.css */
.fair-exhmypages2012 #shop-content .eshop_window_darken_layer {
  position: fixed;
  inset: 0;
  width: auto !important;
  height: auto !important;
  background-color: rgba(0, 0, 0, .5);
  z-index: 10000;
}
.fair-exhmypages2012 #shop-content .eshop_window {
  position: absolute;
  z-index: 10100;
  background-color: var(--fairmate-color-lightest, #fff);
  border: 1px solid var(--fairmate-color-outline-variant, #bbb);
  border-radius: var(--fairmate-rounded-input, 4px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}
.fair-exhmypages2012 #shop-content .eshop_window_inner {
  padding: 20px 40px;
}
.fair-exhmypages2012 #shop-content .eshop_window_close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--fairmate-color-primary);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center / 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center / 100%;
}

/* Legacy-Verhalten: Seitentitel war auf Desktop ausgeblendet; Stepper ist jetzt responsiv */
.fair-exhmypages2012 #shop-content #page_title {
  display: none;
}

/* Legacy-Verhalten: Schritt 4 zeigt weder Warenkorb noch Summen noch Zahlungsart-Box */
.fair-exhmypages2012 #shop-content .step_4 #article_sum_sheet,
.fair-exhmypages2012 #shop-content .step_4 .cart_block,
.fair-exhmypages2012 #shop-content .step_4 .box.eshop_form_box_payment {
  display: none;
}

/* Legacy-Verhalten: Online-Zahlungsarten im Ausstellerportal ausgeblendet (Schritt 3 prüfen) */
.fair-exhmypages2012 #shop-content #payment_type_concardis_cc_visa,
.fair-exhmypages2012 #shop-content #payment_type_concardis_cc_master,
.fair-exhmypages2012 #shop-content #payment_type_concardis_cc_amex,
.fair-exhmypages2012 #shop-content #payment_type_paypal,
.fair-exhmypages2012 #shop-content #payment_type_concardis_ls_sofort,
.fair-exhmypages2012 #shop-content #payment_type_concardis_ls,
.fair-exhmypages2012 #shop-content .eshop_td_text p,
.fair-exhmypages2012 #shop-content #marketing_agreement_checkbox,
.fair-exhmypages2012 #shop-content .breadcrumbs {
  display: none;
}
.fair-exhmypages2012 #shop-content label[for="marketing_agreement_checkbox"] {
  pointer-events: none;
}

/* Legacy-Verhalten: Fehler- und Hinweiszustände */
.fair-exhmypages2012 #shop-content input.error {
  border-color: var(--fairmate-color-error, #d8000c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fairmate-color-error, #d8000c) 25%, transparent);
}
.fair-exhmypages2012 #shop-content .missing_mandatory_field,
.fair-exhmypages2012 #shop-content .errormsg {
  color: var(--fairmate-color-error, #d8000c);
}
.fair-exhmypages2012 #shop-content .messages {
  margin: 20px 0;
}
