/*
Theme Name: Textilveredelung Child
Theme URI: https://deine-seite.de
Description: Child Theme für Textilveredelung Wunstorf basierend auf Divi
Author: Oinkelman
Author URI: https://deine-agentur.de
Template: Divi
Version: 1.0
*/

/* =========================================================
   1) Button unter den Größen (Produktkarten) – HARDCODED
   ========================================================= */
.oinkelman-card-button {
    margin-top: 12px !important;
    text-align: center !important; /* Button bleibt mittig */
}

.oinkelman-card-button .button {
    display: inline-block !important;
    background-color: #21759b !important;   /* WooCommerce-typisches Blau */
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.25s ease, transform 0.1s ease !important;
}

.oinkelman-card-button .button:hover {
    background-color: #1b5f7c !important;   /* dunkleres Blau beim Hover */
    transform: translateY(-2px) !important;
}

/* =========================================================
   2) WooCommerce-Hover-Pfeil + Textverschiebung deaktivieren
   ========================================================= */

/* Entfernt den Pfeil */
.oinkelman-card-button .button::after {
    display: none !important;
    content: none !important;
}

/* Verhindert das Nach-links-Rutschen beim Hover */
.oinkelman-card-button .button {
    padding-right: 20px !important; /* gleicher Wert wie normal */
    transition: background 0.25s ease, transform 0.1s ease !important;
}

.single-product #tvw-info-box { display:none !important; 
}

.woocommerce div.product form.cart .variations td {
  padding: 0 0px 0px 0 !important;
    padding-right: 0px;
  max-width: none !important;
  line-height: 1.3em;
}

/*********************************************************
 * TVW Checkout Polish (50/50 + Reihen wie im Mock)
 * Sicher: greift nur auf der Checkout-Seite
 *********************************************************/
body.woocommerce-checkout form.checkout{ display:block; }

/* --- Grundlayout 50/50 (falls von Divi überschrieben) --- */
body.woocommerce-checkout .tvw-checkout-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
@media (max-width:980px){
  body.woocommerce-checkout .tvw-checkout-grid{ grid-template-columns:1fr; gap:24px; }
}
/* Safety: Spalten dürfen schrumpfen */
body.woocommerce-checkout .tvw-checkout-grid > .tvw-grid-left,
body.woocommerce-checkout .tvw-checkout-grid > .tvw-grid-right{ min-width:0; }

/* --- Reihen 1–3: sauberes 2er-Grid --- */
@media (min-width:981px){
  body.woocommerce-checkout .tvw-row{
    clear:both;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    margin:0 0 16px 0;
    align-items:start;
  }
  body.woocommerce-checkout .tvw-row > .form-row{
    float:none !important; width:auto !important; margin:0 !important; clear:none !important;
  }
}

/* --- Adresszeile (eine Reihe, Verhältnis 30/20/20/30) --- */
@media (min-width:981px){
  body.woocommerce-checkout .tvw-address-row{
    clear:both;
    display:grid;
    grid-template-columns:30fr 20fr 20fr 30fr; /* Straße | Nr | PLZ | Stadt */
    column-gap:24px;
    margin:0 0 16px 0;
    align-items:start;
  }
  body.woocommerce-checkout .tvw-address-row > .form-row{
    float:none !important; width:auto !important; margin:0 !important; clear:none !important;
  }
}
@media (max-width:980px){
  body.woocommerce-checkout .tvw-row,
  body.woocommerce-checkout .tvw-address-row{ display:block; }
}

/* --- Felder/Labels – angenehm & konsistent --- */
body.woocommerce-checkout #customer_details .form-row{ margin:0 0 16px; }
body.woocommerce-checkout #customer_details label{
  display:block;
  font-weight:600;
  margin:0 0 6px;
  letter-spacing:.01em;
}
body.woocommerce-checkout #customer_details .required{
  color:#e11d48; /* rot */
  font-weight:700;
  margin-left:4px;
}
body.woocommerce-checkout #customer_details input.input-text,
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout #customer_details textarea{
  width:100%;
  height:46px;
  padding:10px 12px;
  border:1px solid #d7dbe0;
  border-radius:4px;
  box-sizing:border-box;
  background:#fff;
}
body.woocommerce-checkout #customer_details textarea{
  height:auto; min-height:140px; resize:vertical;
}
body.woocommerce-checkout #customer_details input::placeholder,
body.woocommerce-checkout #customer_details textarea::placeholder{
  color:#8c98a4; opacity:1;
}
body.woocommerce-checkout #customer_details input:focus,
body.woocommerce-checkout #customer_details select:focus,
body.woocommerce-checkout #customer_details textarea:focus{
  outline:none;
  border-color:#4aa3ff;
  box-shadow:0 0 0 3px rgba(74,163,255,.2);
}

/* --- Ungewünschtes sicher verstecken (falls Plugins es nachladen) --- */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #billing_state_field{ display:none !important; }

/* --- „Zusätzliche Informationen“: Titel & Label ausblenden --- */
body.woocommerce-checkout .woocommerce-additional-fields__title,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #order_comments_field > label{ display:none !important; }

/* --- Review/Payment (rechts) – saubere Breite --- */
body.woocommerce-checkout #order_review .shop_table{ display:none !important; }
body.woocommerce-checkout #order_review .woocommerce-checkout-payment,
body.woocommerce-checkout #order_review #payment{
  float:none !important; width:100% !important; max-width:100% !important; clear:both !important;
}

/* --- (Optional) Rechte Spalte sticky (Desktop) ---
@media (min-width:981px){
  body.woocommerce-checkout .tvw-grid-right{ position:sticky; top:24px; align-self:start; }
}
*/

/* --- (Optional) Button-Polish ---
body.woocommerce-checkout .place-order .button,
body.woocommerce-checkout button[type="submit"]{
  padding:12px 20px; font-weight:700; border-radius:4px;
}
body.woocommerce-checkout .place-order .button:hover{ filter:brightness(1.05); }
*/

/* --- Woo-Fehler/Notices etwas ruhiger --- */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message{
  border-radius:4px;
}

/* ========= TVW Checkout Summary ========= */
body.woocommerce-checkout {
  /* Komfort-Variablen für schnelle Anpassungen */
  --tvw-thumb: 56px;       /* Größe Produkt-Mini + Slot-Kacheln */
  --tvw-gap:   8px;        /* Standard-Abstand im Grid */
  --tvw-radius: 6px;
  --tvw-bc: #e6e9ef;       /* Border color */
  --tvw-dash: #cdd4df;     /* dashed border color */
}

/* Box rechts */
body.woocommerce-checkout .tvw-summary{
  border:1px solid var(--tvw-bc);
  border-radius:8px;
  padding:16px;
  background:#fff;
  margin:0 0 24px;
}
body.woocommerce-checkout .tvw-summary__title{
  font-size:18px; line-height:1.3; margin:0 0 12px; font-weight:700;
}
body.woocommerce-checkout .tvw-summary__items{ list-style:none; margin:0; padding:0; }
body.woocommerce-checkout .tvw-summary__empty{ padding:6px 0; opacity:.8; }

/* Eine Zeile in der Zusammenfassung */
body.woocommerce-checkout .tvw-summary__item{
  position:relative;
  display:grid;
  grid-template-columns: var(--tvw-thumb) 1fr;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid #f0f2f6;
}
body.woocommerce-checkout .tvw-summary__item:last-child{ border-bottom:0; }

/* Produkt-Miniatur links */
body.woocommerce-checkout .tvw-summary__thumb img{
  width:var(--tvw-thumb);
  height:var(--tvw-thumb);
  object-fit:cover;
  border-radius:4px;
  display:block;
}

/* Textbereich rechts */
body.woocommerce-checkout .tvw-summary__name{ font-weight:600; }
body.woocommerce-checkout .tvw-summary__qty{ display:inline-block; min-width:1.5em; text-align:right; margin-right:6px; opacity:.7; }
body.woocommerce-checkout .tvw-summary__meta{ font-size:12px; opacity:.85; margin-top:2px; }

/* Entfernen (rotes X) */
body.woocommerce-checkout .tvw-remove-item{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; line-height:22px; text-align:center;
  border-radius:50%;
  border:1px solid rgba(200,30,30,.25);
  color:#c81e1e; font-weight:800; text-decoration:none; background:#fff;
}
body.woocommerce-checkout .tvw-remove-item:hover{ background:#ffe8e8; border-color:#c81e1e; }

/* -------- 4 feste Slots: Front / Back / Left / Right -------- */
body.woocommerce-checkout .tvw-pos-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--tvw-gap);
  margin-top:var(--tvw-gap);
}
@media (max-width:980px){
  body.woocommerce-checkout .tvw-pos-grid{ grid-template-columns:repeat(2,1fr); }
}
body.woocommerce-checkout .tvw-pos{ display:flex; flex-direction:column; gap:4px; }

/* Kachel (Bild, Datei oder Platzhalter) – 56×56, quadratisch */
body.woocommerce-checkout .tvw-pos__box{
  padding:3px;
  background:#fafbff;
  border:1px solid var(--tvw-bc);
  border-radius:var(--tvw-radius);
  aspect-ratio:1 / 1;          /* erzwingt Quadrat */
  height:auto;                  /* Höhe aus Ratio */
  min-height:var(--tvw-thumb);  /* Fallback */
  display:flex; align-items:center; justify-content:center;
}

/* Bild im Slot */
body.woocommerce-checkout .tvw-pos__img{
  max-width:100%; max-height:100%;
  object-fit:cover; border-radius:4px; display:block;
}

/* PDF/FILE-Kachel (kein Bild) */
body.woocommerce-checkout .tvw-pos__icon{
  width:100%; height:100%;
  border:1px dashed var(--tvw-dash);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:10px; color:#556;
  background:#fff;
}

/* Eleganter Kreuz-Platzhalter (wenn Slot leer) */
body.woocommerce-checkout .tvw-pos__placeholder{
  position:relative; width:100%; height:100%;
  border:1px dashed #d1d6e0; border-radius:4px; background:#fff;
}
body.woocommerce-checkout .tvw-pos__placeholder:before,
body.woocommerce-checkout .tvw-pos__placeholder:after{
  content:""; position:absolute; left:50%; top:12%;
  width:2px; height:76%; background:rgba(200,30,30,.28);
  transform-origin:center;
}
body.woocommerce-checkout .tvw-pos__placeholder:before{ transform:translateX(-50%) rotate(45deg); }
body.woocommerce-checkout .tvw-pos__placeholder:after { transform:translateX(-50%) rotate(-45deg); }

/* Slot-Beschriftung */
body.woocommerce-checkout .tvw-pos__label{ text-align:center; font-size:10px; margin-top:3px; opacity:.8; }

/* -------- „Weitere Dateien“ (Rest) – 56×56 Grid -------- */
body.woocommerce-checkout .tvw-line-uploads{
  display:grid; gap:6px;
  grid-template-columns:repeat(6, minmax(0,1fr));
  margin:8px 0 2px;
}
@media (max-width:980px){ body.woocommerce-checkout .tvw-line-uploads{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:680px){ body.woocommerce-checkout .tvw-line-uploads{ grid-template-columns:repeat(3,1fr); } }

body.woocommerce-checkout .tvw-line-uploads__item{
  border:1px solid var(--tvw-bc); border-radius:4px; padding:3px; background:#fafbff;
}
body.woocommerce-checkout .tvw-line-uploads__img{
  width:100%; height:var(--tvw-thumb);
  object-fit:cover; border-radius:3px; display:block; margin:0 0 4px;
}
body.woocommerce-checkout .tvw-line-uploads__icon{
  height:var(--tvw-thumb);
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--tvw-dash); border-radius:3px; font-size:10px; font-weight:700; margin:0 0 4px;
}
body.woocommerce-checkout .tvw-line-uploads__caption{
  font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ==== TVW: Thumbnails überall 56 × 56 ==== */

/* Produkt-Mini links */
body.woocommerce-checkout .tvw-summary__thumb img{
  width:56px !important;
  height:56px !important;
  object-fit:cover;
  border-radius:4px;
}

/* 4 Slots (Front/Back/Left/Right) – Box exakt 56, zentriert */
body.woocommerce-checkout .tvw-pos__box{
  width:56px !important;
  height:56px !important;
  margin:0 auto;                    /* in der Zelle zentrieren */
  padding:2px !important;
  display:flex; align-items:center; justify-content:center;
}
body.woocommerce-checkout .tvw-pos__img{
  max-width:100%; max-height:100%; object-fit:cover; border-radius:4px;
}
body.woocommerce-checkout .tvw-pos__icon,
body.woocommerce-checkout .tvw-pos__placeholder{
  width:56px !important;
  height:56px !important;
  border-radius:4px;
}

/* "Weitere Dateien" – Kacheln 56, Inhalt zentriert */
body.woocommerce-checkout .tvw-line-uploads__item{
  display:flex; flex-direction:column; align-items:center;
}
body.woocommerce-checkout .tvw-line-uploads__img,
body.woocommerce-checkout .tvw-line-uploads__icon{
  width:56px !important;
  height:56px !important;
  object-fit:cover;
  border-radius:3px;
}
body.woocommerce-checkout .tvw-line-uploads__caption{
  max-width:56px;                   /* ellipsis passend zur Breite */
  text-align:center;
  font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* === Produktbild größer (z.B. 96×96), Slots bleiben 56×56 === */
/* Werte 80/96/100 einfach ersetzen */

/* Spaltenbreite der linken Bildspalte anpassen */
body.woocommerce-checkout .tvw-summary .tvw-summary__item{
  grid-template-columns: 96px 1fr !important;
  gap: 14px; /* optional etwas mehr Luft */
}

/* Produkt-Mini IMMER auf neue Größe setzen (übersticht 56×56) */
body.woocommerce-checkout .tvw-summary .tvw-summary__thumb,
body.woocommerce-checkout .tvw-summary .tvw-summary__thumb img{
  width: 96px !important;
  height: 96px !important;
  object-fit: cover;
  border-radius: 4px;
}

/* ===== Ende TVW Checkout Summary ===== */

/* TVW Checkout Buttons */
body.woocommerce-checkout{
  --tvw-primary:#1f6feb;
  --tvw-primary-fore:#fff;
  --tvw-primary-hover:#155ec7;
  --tvw-muted:#eef2f7;
  --tvw-muted-fore:#334;
}

/* Primary: Anfrage senden (#place_order) */
body.woocommerce-checkout #place_order.button,
body.woocommerce-checkout .button.alt#place_order{
  background:var(--tvw-primary);
  color:var(--tvw-primary-fore);
  border:0;
  border-radius:6px;
  padding:12px 18px;
  font-weight:700;
  line-height:1;
  min-height:44px;            /* Touch-Ziel */
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 12px rgba(31,111,235,.15);
}
body.woocommerce-checkout #place_order.button:hover,
body.woocommerce-checkout .button.alt#place_order:hover{
  background:var(--tvw-primary-hover);
}
body.woocommerce-checkout #place_order.button:disabled,
body.woocommerce-checkout #place_order.button:disabled:hover{
  opacity:.6; cursor:not-allowed; box-shadow:none;
}

/* Secondary: Zurück (wc-backward) */
body.woocommerce-checkout .wc-backward.button{
  background:var(--tvw-muted);
  color:var(--tvw-muted-fore);
  border:1px solid #d6dbe5;
  border-radius:6px;
  padding:10px 16px;
  min-height:44px;
}
body.woocommerce-checkout .wc-backward.button:hover{
  background:#e7ecf5;
}

/* Button-Gruppe nebeneinander (falls nötig) */
body.woocommerce-checkout .tvw-back-wrap{ display:flex; gap:10px; align-items:center; }

/* === TVW Checkout Buttons & Legal-Box === */
body.woocommerce-checkout{
  --tvw-primary:#2C3D4C;          /* Grundfarbe (dein Wunsch) */
  --tvw-primary-hover:#9A8D84;    /* Hover */
  --tvw-fore:#fff;
}

/* Pflicht-Checkbox Block */
body.woocommerce-checkout .tvw-legal-consent{
  margin:10px 0 14px; padding:10px 12px;
  border:1px solid #e6e9ef; border-radius:6px; background:#fff;
  font-size:14px;
}
body.woocommerce-checkout .tvw-legal-consent a{ text-decoration:underline; }

/* Primärer Button: Anfrage senden */
body.woocommerce-checkout #place_order.button,
body.woocommerce-checkout .button.alt#place_order{
  background:var(--tvw-primary) !important;
  color:var(--tvw-fore) !important;
  border:0 !important;
  border-radius:6px !important;
  padding:12px 18px !important;
  font: 700 16px/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  min-height:48px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 12px rgba(44,61,76,.18) !important;
  text-shadow:none !important;
}
body.woocommerce-checkout #place_order.button:hover,
body.woocommerce-checkout .button.alt#place_order:hover{
  background:var(--tvw-primary-hover) !important;
}

/* Zurück-Button (ohne Icon, gleiche Höhe) */
body.woocommerce-checkout .wc-backward.button{
  background:#eef2f7 !important;
  color:#334 !important;
  border:1px solid #d6dbe5 !important;
  border-radius:6px !important;
  padding:12px 16px !important;
  font: 600 16px/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  min-height:48px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
}
/* Woo legt standardmäßig ein Icon über :before – komplett deaktivieren */
body.woocommerce-checkout .wc-backward.button:before { content:none !important; }

/* Buttons nebeneinander falls in einer Zeile */
body.woocommerce-checkout .tvw-back-wrap{ display:flex; gap:10px; align-items:center; margin:8px 0 0; }

/* 1) Linke Spalte im „Karten“-Look wie rechts */
body.woocommerce-checkout #customer_details{
  border:1px solid #e6e9ef; border-radius:8px; padding:16px; background:#fff;
}
body.woocommerce-checkout #customer_details h3{ margin-top:0; }

/* 2) „Deine Bestellung“ Heading sicher verstecken (falls Filter nicht greift) */
body.woocommerce-checkout h3#order_review_heading{ display:none !important; }

/* 3) Buttons angleichen – keine Icons, gleiche Höhe */
body.woocommerce-checkout{
  --tvw-primary:#2C3D4C;
  --tvw-primary-hover:#9A8D84;
  --tvw-fore:#fff;
}

body.woocommerce-checkout #place_order.button,
body.woocommerce-checkout .button.alt#place_order{
  background:var(--tvw-primary) !important;
  color:var(--tvw-fore) !important;
  border:0 !important; border-radius:6px !important;
  padding:12px 18px !important;
  font:700 16px/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  min-height:48px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 12px rgba(44,61,76,.18) !important;
  text-shadow:none !important;
}
body.woocommerce-checkout #place_order.button:hover,
body.woocommerce-checkout .button.alt#place_order:hover{
  background:var(--tvw-primary-hover) !important;
}

/* Zurück-Button (ohne Icon, gleiche Höhe) */
body.woocommerce-checkout .wc-backward.button{
  background:#eef2f7 !important; color:#334 !important;
  border:1px solid #d6dbe5 !important; border-radius:6px !important;
  padding:12px 16px !important;
  font:600 16px/1 Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  min-height:48px !important; box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
}

/* wirklich ALLE Woo-Button-Pseudoicons abschalten – auch Hover */
body.woocommerce-checkout .wc-backward.button:before,
body.woocommerce-checkout .wc-backward.button:after,
body.woocommerce-checkout #place_order.button:before,
body.woocommerce-checkout #place_order.button:after,
body.woocommerce-checkout .button.alt#place_order:before,
body.woocommerce-checkout .button.alt#place_order:after { content:none !important; }

/* Buttons nebeneinander */
body.woocommerce-checkout .tvw-back-wrap{ display:flex; gap:10px; align-items:center; margin:8px 0 0; }

/* 4) Unsere Checkbox-Box optisch passend */
body.woocommerce-checkout .tvw-legal-consent{
  margin:10px 0 14px; padding:10px 12px;
  border:1px solid #e6e9ef; border-radius:6px; background:#fff; font-size:14px;
}
body.woocommerce-checkout .tvw-legal-consent a{ text-decoration:underline; }

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{display:none !important;}

/* Keine Pfeile/Icons – egal welcher Woo-Selector */
body.woocommerce-checkout .place-order #place_order.button:before,
body.woocommerce-checkout .place-order #place_order.button:after,
body.woocommerce-checkout .place-order .button.alt#place_order:before,
body.woocommerce-checkout .place-order .button.alt#place_order:after,
body.woocommerce-checkout .tvw-back-wrap .wc-backward.button:before,
body.woocommerce-checkout .tvw-back-wrap .wc-backward.button:after{ content:none !important; }

/* Gleich hoch bleiben sie durch min-height:48px in deiner CSS.
   Wenn der Zurück-Button noch 1–2px „tiefer“ wirkt: */
body.woocommerce-checkout .tvw-back-wrap .wc-backward.button{ line-height:1 !important; }

/* --- Upload-Popup Abstand nach unten setzen --- */
.tvw-upload-popup {
  top: 150px !important;   /* vorher evtl. 20px o.ä. */
  max-width: 350px !important;  /* feste Breite, wie gewünscht */
  margin: 0 auto !important;    /* zentrieren */
}

button.tvwu-remove {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
}

button.tvwu-remove {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
}

/* TVW: Busy-Feedback nur, wenn data-busy="1" gesetzt ist */
button.tvw-add-all[data-busy="1"]{
  background:#28a745 !important;     /* Grün */
  border-color:#28a745 !important;
  color:transparent !important;       /* ursprünglichen Text ausblenden */
  position:relative;
  cursor:progress !important;
  opacity:1 !important;               /* falls das Theme sonst ausgraut */
}
button.tvw-add-all[data-busy="1"]::after{
  content:"Artikel werden der Liste hinzugefügt …";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff !important; font-weight:400; text-align:center; padding:0 12px;
}

/* ================================
   TVW Positions – UI & Modal
   Namespace: #tvw-positions-ui / .tvw-modal
   ================================ */

/* Container */
#tvw-positions-ui.tvw-positions{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:12px;
  margin:12px 0;
}

/* Headline */
#tvw-positions-ui .tvw-head{
  font-weight:600;
  margin-bottom:10px;
}

/* 4 Karten */
#tvw-positions-ui .tvw-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

/* Karte */
#tvw-positions-ui .tvw-card{
  position:relative;
  background:#fafafa;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px;
  text-align:center;
}

/* Reset oben links */
#tvw-positions-ui .tvw-card .tvw-reset{
  position:absolute;
  left:8px;
  top:8px;
  border:1px solid #cfd6dd;
  background:#fff;
  border-radius:4px;
  padding:2px 6px;
  font-size:12px;
  cursor:pointer;
}

/* Badge oben rechts */
#tvw-positions-ui .tvw-card .tvw-badge{
  position:absolute;
  right:8px;
  top:8px;
  background:#111;
  color:#fff;
  border-radius:999px;
  font-size:12px;
  line-height:22px;
  width:22px;
  height:22px;
  text-align:center;
}

/* Thumbnail – größer & klickbar */
#tvw-positions-ui .tvw-thumbwrap{
  height:150px;                /* <- gewünschte größere Vorschau */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  cursor:pointer;              /* Hand-Cursor */
}
#tvw-positions-ui .tvw-thumb{
  max-width:100%;
  max-height:100%;
  display:block;
  cursor:pointer;
}
#tvw-positions-ui .tvw-thumb--empty{
  width:100px;
  height:130px;
  border:1px dashed #cfd6dd;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#999;
  background:#fff;
}

/* Label */
#tvw-positions-ui .tvw-label{
  font-size:13px;
  color:#333;
  margin-bottom:2px;
}

/* „Öffnen“-Button ausblenden (wir öffnen per Bildklick) */
#tvw-positions-ui .tvw-open{ display:none !important; }

/* ================= Modal ================= */
html.tvw-modal-open,
body.tvw-modal-open{ overflow:hidden !important; }

.tvw-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}
.tvw-modal.is-open{ display:block; }

.tvw-modal .tvw-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.tvw-modal .tvw-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:10px;
  max-width:min(1200px,92vw);
  max-height:92vh;
  overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.tvw-modal .tvw-modal__close{
  position:absolute;
  right:10px;
  top:10px;
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer;
}
.tvw-modal .tvw-modal__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid #eef1f4;
}
.tvw-modal .tvw-btn{
  border:1px solid #cfd6dd;
  background:#fff;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
}
.tvw-modal .tvw-btn--primary{
  background:#0a84ff;
  border-color:#0a84ff;
  color:#fff;
}
.tvw-modal .tvw-stage{
  padding:12px 16px;
}
#tvw-canvas{
  width:min(900px,80vw);
  height:auto;
  background:#f7f8f9;
  border:1px dashed #e2e8f0;
  display:block;
}

/* Optional: leichtes Hover auf Karten */
#tvw-positions-ui .tvw-card:hover{
  border-color:#d9dee5;
  background:#fdfdfd;
}

/* Responsiv: bei schmalen Geräten 2 Spalten */
@media (max-width: 720px){
  #tvw-positions-ui .tvw-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}