/* =========================================================
DTF Prints — WooCommerce
Reines Umstyling der Plugin-Ausgabe, keine Struktur-Eingriffe.
========================================================= */
.dtf-shop-wrap{max-width:1360px;margin:0 auto;padding:0 28px}
.dtf-theme .woocommerce-breadcrumb{font-size:13px;color:var(--dtf-text-soft);padding:22px 0 6px}
.dtf-theme .woocommerce-breadcrumb a:hover{color:var(--dtf-text)}
.dtf-loop-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.dtf-theme .woocommerce-result-count{margin:0;font-size:14px;color:var(--dtf-text-soft)}
.dtf-theme .woocommerce-ordering select{border:1px solid rgba(0,0,0,.12);border-radius:99px;padding:10px 16px;font-family:inherit;font-size:14px;background:#fff}
/* ------------------------------------------------ Produktraster */
.dtf-theme ul.products{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.dtf-theme ul.products::before,.dtf-theme ul.products::after{display:none}
.dtf-theme ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--dtf-radius);padding:26px 24px 28px;text-align:center;transition:transform .3s var(--dtf-ease),box-shadow .3s var(--dtf-ease)}
.dtf-theme ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.08)}
.dtf-theme ul.products li.product img{border-radius:16px;margin-bottom:18px}
.dtf-theme ul.products li.product .woocommerce-loop-product__title{font-family:var(--dtf-font-display);font-size:21px;font-weight:700;letter-spacing:-.5px;padding:0;margin:0 0 6px}
.dtf-theme ul.products li.product .price{color:var(--dtf-text);font-size:17px;font-weight:600}
.dtf-theme ul.products li.product .price del{color:var(--dtf-text-soft);font-weight:400}
.dtf-theme ul.products li.product .button{margin-top:14px}
.dtf-theme ul.products{margin-bottom:8px}
.dtf-theme span.onsale{background:var(--dtf-brand-600);color:#1d1d1f;border-radius:99px;font-weight:700;font-size:12px;padding:6px 14px;min-height:0;line-height:1;top:14px;left:14px;margin:0}
/* ------------------------------------------------ Shop-Banner + Filter */
.dtf-shop-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b0d0c 0%,#111c15 55%,#0b0d0c 100%);color:#fff;text-align:center;padding:88px 22px 96px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.dtf-shop-banner::after{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 70%,rgba(169,208,186,.12),transparent 85%);animation:dtfShopSpin 12s linear infinite;pointer-events:none}
@keyframes dtfShopSpin{to{transform:rotate(360deg)}}
.dtf-shop-banner-in{position:relative;z-index:1;max-width:720px;margin:0 auto}
.dtf-shop-eyebrow{font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--dtf-brand-200);margin-bottom:16px}
.dtf-shop-banner h1{font-family:var(--dtf-font-display);font-size:clamp(38px,6vw,68px);font-weight:700;letter-spacing:-2.5px;line-height:1.03;color:#fff!important}
.dtf-shop-banner p{margin:18px auto 0;max-width:52ch;font-size:clamp(16px,2vw,20px);color:#c7c7cc;line-height:1.5}
.dtf-filterbar{position:sticky;top:48px;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.07);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.admin-bar .dtf-filterbar{top:80px}
.dtf-filter-in{max-width:1200px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dtf-chips{display:flex;gap:10px;flex-wrap:wrap}
.dtf-chip{border:1.5px solid rgba(0,0,0,.12);background:#fff;border-radius:99px;padding:9px 18px;font-size:14px;font-weight:600;color:var(--dtf-text);transition:all .18s var(--dtf-ease)}
.dtf-chip:hover{border-color:var(--dtf-brand-600)}
.dtf-chip.is-active{background:var(--dtf-brand-600);border-color:var(--dtf-brand-600);color:#fff}
.dtf-sortwrap .woocommerce-ordering{margin:0}
.dtf-sortwrap select{border:1.5px solid rgba(0,0,0,.12);border-radius:99px;padding:9px 16px;font-family:inherit;font-size:14px;background:#fff;cursor:pointer}
/* Loop-Kopf schlanker, da Banner die Rolle übernimmt */
.dtf-theme.woocommerce-shop .dtf-loop-head,
.dtf-theme.tax-product_cat .dtf-loop-head{display:none}
.dtf-theme .woocommerce-products-header{display:none}
/* Produktkarte: Kategorie-Label + größere Bildfläche */
.dtf-theme ul.products li.product{display:flex;flex-direction:column}
.dtf-theme ul.products li.product .dtf-loop-cat{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dtf-brand-dark);margin-bottom:6px}
.dtf-theme ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1}
.dtf-theme ul.products li.product .button{margin-top:auto}
@media (max-width:680px){
.dtf-shop-banner{padding:56px 20px 60px}
.dtf-filter-in{justify-content:flex-start}
.dtf-chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dtf-chips::-webkit-scrollbar{display:none}
.dtf-sortwrap{display:none}
}
/* ------------------------------------------------ Buttons global */
.dtf-theme .button,
.dtf-theme button.button,
.dtf-theme input.button,
.dtf-theme a.button,
.dtf-theme .woocommerce-button,
.dtf-theme #place_order{
display:inline-flex!important;align-items:center;justify-content:center;
height:50px;padding:0 26px;border-radius:99px!important;
background:var(--dtf-brand-600)!important;color:#fff!important;
font-family:inherit;font-size:16px;font-weight:600;line-height:1;border:none;
transition:transform .18s var(--dtf-ease),background .18s var(--dtf-ease),box-shadow .18s var(--dtf-ease);
}
.dtf-theme .button:hover,.dtf-theme button.button:hover,.dtf-theme a.button:hover,.dtf-theme #place_order:hover{
background:var(--dtf-brand-700)!important;box-shadow:0 6px 20px rgba(169,208,186,.5)
}
.dtf-theme .button:active{transform:scale(.965)}
.dtf-theme .button.alt,.dtf-theme button.alt{background:#1d1d1f!important;color:#fff!important}
.dtf-theme .button.alt:hover{background:#000!important}
/* ------------------------------------------------ Produktseite */
.dtf-theme .single-product div.product{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;padding:18px 0 72px}
.dtf-theme .single-product div.product .woocommerce-product-gallery{width:100%!important;float:none!important;position:sticky;top:74px}
.dtf-theme .woocommerce-product-gallery__wrapper img{border-radius:26px}
.dtf-theme .flex-control-thumbs{display:flex;gap:12px;margin-top:14px;padding:0;list-style:none}
.dtf-theme .flex-control-thumbs li{width:84px}
.dtf-theme .flex-control-thumbs img{border-radius:16px;border:1.5px solid transparent;transition:border-color .2s,transform .2s var(--dtf-ease)}
.dtf-theme .flex-control-thumbs img:hover{transform:translateY(-2px)}
.dtf-theme .flex-control-thumbs img.flex-active{border-color:var(--dtf-brand-600)}
.dtf-theme .single-product div.product .summary{width:100%!important;float:none!important;margin:0!important}
.dtf-theme .product_title{font-family:var(--dtf-font-display);font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-1.8px;line-height:1.05;margin-bottom:14px}
.dtf-theme .single-product div.product p.price,
.dtf-theme .single-product div.product span.price{
font-family:var(--dtf-font-display);font-size:38px;font-weight:800;letter-spacing:-1.4px;color:var(--dtf-text);
background:var(--dtf-gray);border-radius:20px;padding:20px 24px;margin:22px 0 0;display:block
}
/* German Market: Steuer-/Versandhinweise unter dem Preis */
.dtf-theme .wgm-info,
.dtf-theme .woocommerce-product-details__short-description{font-size:14px;line-height:1.6;color:var(--dtf-text-soft)}
.dtf-theme .woocommerce-product-details__short-description{margin-top:16px;font-size:16.5px}
/* Zwei Wege (Theme-Block) */
.dtf-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 18px}
.dtf-path{border-radius:18px;padding:18px;border:1.5px solid rgba(0,0,0,.1);cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;transition:border-color .2s var(--dtf-ease),background .2s var(--dtf-ease),transform .2s var(--dtf-ease)}
.dtf-path:hover{transform:translateY(-2px)}
.dtf-path.is-selected{border-color:var(--dtf-brand-600);background:var(--dtf-brand-100)}
.dtf-path-ic{width:40px;height:40px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.06)}
.dtf-path-ic svg{width:20px;height:20px;stroke:#1d1d1f;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dtf-path-txt b{display:block;font-size:15.5px;letter-spacing:-.2px}
.dtf-path-txt small{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--dtf-text-soft)}
/* Mengen-Stepper + Warenkorb */
.dtf-theme form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:22px 0 0!important}
.dtf-theme form.cart .quantity{display:inline-flex;align-items:stretch}
.dtf-theme form.cart .quantity input.qty{width:72px;height:52px;border:1px solid rgba(0,0,0,.14);border-radius:12px;text-align:center;font-family:inherit;font-size:16px;font-weight:600;background:#fff;-moz-appearance:textfield;padding:0}
.dtf-theme form.cart .quantity input.qty::-webkit-outer-spin-button,
.dtf-theme form.cart .quantity input.qty::-webkit-inner-spin-button{opacity:1;height:52px}
.dtf-theme form.cart button.single_add_to_cart_button{flex:1;min-width:220px;height:56px;font-size:17px}
.dtf-theme .woocommerce-variation-add-to-cart{display:flex;gap:12px;width:100%}
/* Stufenpreistabelle (Plugin-Ausgabe umgestylt) */
.dtf-theme .wc-tiered-price-table,
.dtf-theme table.tiered-pricing-table,
.dtf-theme .tiered-pricing-table-wrapper table{
width:100%;border-collapse:separate;border-spacing:0;margin:20px 0 0;
border:1px solid rgba(0,0,0,.09);border-radius:18px;overflow:hidden;font-size:14.5px
}
.dtf-theme .wc-tiered-price-table th,
.dtf-theme table.tiered-pricing-table th{background:var(--dtf-gray);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dtf-text-soft);padding:13px 16px;text-align:left;border:none}
.dtf-theme .wc-tiered-price-table td,
.dtf-theme table.tiered-pricing-table td{padding:12px 16px;border:none;border-top:1px solid rgba(0,0,0,.05)}
.dtf-theme .wc-tiered-price-table tr.dtf-tier-active,
.dtf-theme table.tiered-pricing-table tr.dtf-tier-active{background:var(--dtf-brand-100);font-weight:600}
.dtf-theme .wc-tiered-price-table tr:hover,
.dtf-theme table.tiered-pricing-table tr:hover{background:#fafbfa;cursor:pointer}
/* TM Extra Product Options */
/* (ersetzt durch Optionskarten-Block am Dateiende) */
.dtf-theme .tm-extra-product-options input[type=checkbox],
.dtf-theme .tm-extra-product-options input[type=radio]{width:19px;height:19px;accent-color:var(--dtf-brand-dark);margin-top:1px}
/* TM Extra Product Options: Preis-Angaben in Markenfarbe statt Gold */
.dtf-theme .tm-extra-product-options .tmcp-field-wrap .price,
.dtf-theme .tm-extra-product-options .tc-price,
.dtf-theme .tm-extra-product-options .tm-extra-product-options-price,
.dtf-theme .tm-extra-product-options .tc-label .price,
.dtf-theme .tc-price-wrap,
.dtf-theme .tmcp-field-wrap .tc-price,
.dtf-theme .tm-epo-element-label .price{
color:var(--dtf-brand-dark)!important;font-weight:600!important
}
/* Info-Fragezeichen: sauberer salbeigrüner Kreis mit weißem ? */
.dtf-theme .tm-extra-product-options .tc-tooltip,
.dtf-theme .tm-extra-product-options .tm-tooltip,
.dtf-theme .tm-extra-product-options .tc-epo-element-tooltip,
.dtf-theme .tm-extra-product-options .tm-tooltip-container,
.dtf-theme .tc-tooltip{
width:20px!important;height:20px!important;line-height:20px!important;
border-radius:50%!important;
background:#e5e7e6!important;border:none!important;
color:#6e6e73!important;font-size:12px!important;font-weight:700!important;
text-align:center!important;box-shadow:none!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
padding:0!important;
}
/* falls das Icon als ::before/Font-Icon kommt */
.dtf-theme .tm-extra-product-options .tc-tooltip::before,
.dtf-theme .tc-tooltip::before{color:#6e6e73!important}
/* falls ein Hintergrundbild (Standard-Icon) gesetzt ist, ausblenden zugunsten des ? */
.dtf-theme .tm-extra-product-options .tc-tooltip{background-image:none!important}
/* Upload-Plugin (Drag & Drop) */
.dtf-theme .wcpoi-dropzone,
.dtf-theme .dnd-upload-form,
.dtf-theme .wcuf_upload_field_container,
.dtf-theme .dnd-upload-counter-container{
border:2px dashed rgba(169,208,186,.9)!important;background:var(--dtf-brand-100)!important;
border-radius:18px!important;padding:24px 20px!important;text-align:center
}
.dtf-theme .dnd-upload-form:hover{background:#e0efe6!important}
/* ------------------------------------------------ Upload-Plugin: Vorschau-Kacheln ausrichten
Sorgt dafür, dass alle hochgeladenen Dateien in einer Reihe gleich hoch sind
und das "Anzahl"-Feld immer auf gleicher Höhe (unten) sitzt. */
.dtf-theme .dnd-upload-file-list,
.dtf-theme .wcuf_file_list,
.dtf-theme ul.dnd-uploaded-files,
.dtf-theme .wpcdud-file-list{
display:flex!important;flex-wrap:wrap;gap:16px;align-items:stretch;list-style:none;margin:16px 0 0;padding:0
}
.dtf-theme .dnd-upload-file-list>li,
.dtf-theme .wcuf_file_list>li,
.dtf-theme ul.dnd-uploaded-files>li,
.dtf-theme .dnd-uploaded-file,
.dtf-theme .wpcdud-file{
display:flex!important;flex-direction:column;justify-content:flex-start;
width:150px;margin:0!important;padding:12px!important;
border:1px solid rgba(0,0,0,.1)!important;border-radius:14px;background:#fff;
position:relative
}
/* Vorschaubild: einheitliche Box, Bild wird eingepasst statt zu strecken */
.dtf-theme .dnd-upload-file-list .dnd-upload-image,
.dtf-theme .dnd-upload-file-list img,
.dtf-theme .wcuf_file_list img,
.dtf-theme .dnd-uploaded-file img,
.dtf-theme .wpcdud-file img{
width:100%!important;height:96px!important;object-fit:contain!important;
background:var(--dtf-gray);border-radius:10px;margin:0 0 10px!important;display:block
}
/* Dateiname: feste Höhe, damit kurze/lange Namen nicht die Höhe verschieben */
.dtf-theme .dnd-upload-file-list .dnd-file-name,
.dtf-theme .wcuf_file_list .file-name,
.dtf-theme .dnd-uploaded-file .name,
.dtf-theme .wpcdud-file-name{
font-size:13px;line-height:1.35;color:var(--dtf-brand-dark);
height:2.7em;overflow:hidden;margin-bottom:8px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
/* "Anzahl"-Zeile ans untere Ende schieben -> alle auf gleicher Höhe */
.dtf-theme .dnd-upload-file-list .dnd-quantity,
.dtf-theme .wcuf_file_list .quantity,
.dtf-theme .dnd-uploaded-file .quantity,
.dtf-theme .wpcdud-file .wpcdud-qty{
margin-top:auto!important;display:flex;align-items:center;gap:8px;font-size:13px
}
.dtf-theme .dnd-upload-file-list .dnd-quantity input,
.dtf-theme .wcuf_file_list .quantity input{
width:64px;height:34px;border:1px solid rgba(0,0,0,.14);border-radius:8px;padding:0 8px;font-family:inherit
}
/* Entfernen-Kreuz oben rechts sauber positionieren */
.dtf-theme .dnd-upload-file-list .dnd-remove,
.dtf-theme .wcuf_file_list .remove,
.dtf-theme .dnd-uploaded-file .remove-file{
position:absolute!important;top:8px;right:8px;z-index:2
}
@media (max-width:680px){
.dtf-theme .dnd-upload-file-list>li,
.dtf-theme .wcuf_file_list>li,
.dtf-theme .dnd-uploaded-file,
.dtf-theme .wpcdud-file{width:calc(50% - 8px)}
}
/* Antigro Designer Button */
.dtf-theme .antigro-designer-button,
.dtf-theme .antigro-button,
.dtf-theme a[href*="antigro"]{border-radius:99px!important}
/* ------------------------------------------------ WooCommerce Variations-Tabelle (variable Produkte)
Struktur: table.variations > tr > th.label + td.value > select
Standard ist ein 2-spaltiges Tabellen-Layout -> wir machen es zu Block,
damit Label links oben über dem Feld steht (wie die Karten darüber). */
.dtf-theme table.variations{
display:block!important;width:100%!important;border:none!important;margin:22px 0 0!important;
background:transparent!important
}
.dtf-theme table.variations tbody{display:block!important;width:100%!important}
.dtf-theme table.variations tr{
display:block!important;width:100%!important;margin-bottom:16px;border:none!important;background:transparent!important
}
.dtf-theme table.variations th.label,
.dtf-theme table.variations td.label{
display:block!important;width:auto!important;text-align:left!important;
padding:0 0 8px 0!important;border:none!important;background:transparent!important;
font-family:var(--dtf-font-display)!important;font-size:15px!important;font-weight:600!important;
color:var(--dtf-text)!important;vertical-align:baseline
}
.dtf-theme table.variations th.label label,
.dtf-theme table.variations td.label label{margin:0!important;font-weight:600!important;color:var(--dtf-text)!important}
.dtf-theme table.variations td.value{
display:block!important;width:100%!important;padding:0!important;border:none!important;background:transparent!important
}
/* Das Dropdown selbst im Salbei-Stil */
.dtf-theme table.variations td.value select,
.dtf-theme .single-product .variations select{
width:100%!important;max-width:520px!important;height:52px!important;
border:1px solid rgba(0,0,0,.14)!important;border-radius:14px!important;
padding:0 44px 0 16px!important;margin:0!important;
font-family:inherit!important;font-size:16px!important;color:var(--dtf-text)!important;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center!important;
-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
box-shadow:none!important;cursor:pointer
}
.dtf-theme table.variations td.value select:focus,
.dtf-theme .single-product .variations select:focus{
outline:none!important;border-color:var(--dtf-brand-600)!important;
box-shadow:0 0 0 3px rgba(169,208,186,.35)!important
}
/* "Auswahl zurücksetzen"-Link dezenter */
.dtf-theme .single-product .reset_variations{
display:inline-block;margin-top:8px;font-size:13px;color:var(--dtf-text-soft)!important
}
/* Variations-Preis/Verfügbarkeit unter dem Dropdown */
.dtf-theme .single-product .woocommerce-variation{margin:8px 0 0}
.dtf-theme .single-product .woocommerce-variation-price .price{
font-family:var(--dtf-font-display)!important;font-weight:800!important;color:var(--dtf-text)!important
}
/* ------------------------------------------------ TM Extra Product Options (ThemeComplete 6.x)
Struktur: .tm-extra-product-options .tc-extra-product-options
.tmcp-field-wrap > label.tc-label + .tmcp-field (select)
Grid-Spalten: .tm-epo-field-... / .tmcp-col-* — die brechen wir auf, damit
Label + Feld linksbündig untereinander stehen. */
.dtf-theme .tm-extra-product-options,
.dtf-theme .tc-extra-product-options{margin:22px 0 0!important;clear:both}
/* Grid/Spalten aufheben -> volle Breite, linksbündig */
.dtf-theme .tm-extra-product-options .tmcp-content,
.dtf-theme .tm-extra-product-options .tm-epo-field-wrap,
.dtf-theme .tm-extra-product-options .tc-row,
.dtf-theme .tm-extra-product-options [class*="tmcp-col"],
.dtf-theme .tm-extra-product-options .tm-epo-element{
width:100%!important;max-width:100%!important;float:none!important;
margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;
clear:both;display:block!important
}
/* Label "Formate" linksbündig, über dem Feld */
.dtf-theme .tm-extra-product-options .tc-label,
.dtf-theme .tm-extra-product-options label.tc-label,
.dtf-theme .tm-extra-product-options .tm-epo-element-label,
.dtf-theme .tc-extra-product-options .tc-label{
display:block!important;float:none!important;text-align:left!important;
width:auto!important;margin:0 0 8px!important;padding:0!important;
font-family:var(--dtf-font-display)!important;
font-size:15px!important;font-weight:600!important;color:var(--dtf-text)!important
}
.dtf-theme .tm-extra-product-options .tc-label label,
.dtf-theme .tm-extra-product-options .tc-label .tc-label-text{font-weight:600!important;color:var(--dtf-text)!important}
/* Feld-Wrapper volle Breite */
.dtf-theme .tm-extra-product-options .tmcp-field-wrap,
.dtf-theme .tm-extra-product-options .tc-cell{width:100%!important;max-width:520px!important;float:none!important;padding:0!important}
/* Das Dropdown (select) im Salbei-Stil */
.dtf-theme .tm-extra-product-options select.tmcp-field,
.dtf-theme .tm-extra-product-options select.tm-epo-field,
.dtf-theme .tm-extra-product-options .tmcp-field-wrap select,
.dtf-theme .tc-extra-product-options select{
width:100%!important;max-width:520px!important;height:52px!important;
border:1px solid rgba(0,0,0,.14)!important;border-radius:14px!important;
padding:0 44px 0 16px!important;margin:0!important;
font-family:inherit!important;font-size:16px!important;color:var(--dtf-text)!important;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center!important;
-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
box-shadow:none!important;cursor:pointer;line-height:52px!important
}
.dtf-theme .tm-extra-product-options select.tmcp-field:focus,
.dtf-theme .tm-extra-product-options .tmcp-field-wrap select:focus{
outline:none!important;border-color:var(--dtf-brand-600)!important;
box-shadow:0 0 0 3px rgba(169,208,186,.35)!important
}
/* Preis-Anzeige neben Optionen (schon salbei), Abstand */
.dtf-theme .tm-extra-product-options .price,
.dtf-theme .tm-extra-product-options .amount{color:var(--dtf-brand-dark)!important}
/* ------------------------------------------------ Mengenfeld dezenter & kleiner */
.dtf-theme .single-product form.cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px!important}
.dtf-theme .single-product form.cart .quantity input.qty{
width:72px;height:52px;border:1px solid rgba(0,0,0,.14);border-radius:12px;
text-align:center;font-size:16px;font-weight:600;
line-height:normal;padding:0;box-shadow:none;
display:flex;align-items:center;justify-content:center
}
.dtf-theme .single-product form.cart .quantity input.qty:focus{
outline:none;border-color:var(--dtf-brand-600);box-shadow:0 0 0 3px rgba(169,208,186,.35)
}
.dtf-theme .single-product form.cart button.single_add_to_cart_button{height:52px;min-width:0;font-size:16px}
/* ------------------------------------------------ Abstand vor der Artikelnummer (SKU/Meta) */
.dtf-theme .single-product .product_meta{
margin-top:44px!important;padding-top:30px!important;
border-top:1px solid rgba(0,0,0,.08);
font-size:13.5px;color:var(--dtf-text-soft)
}
.dtf-theme .single-product .product_meta .sku_wrapper,
.dtf-theme .single-product .product_meta .posted_in{display:inline-block;margin-right:16px}
/* ================================================ AUTOSHEET / VARIABLE PRODUKTE (konsolidiert) */
/* Mengenfeld beim Autosheet ausblenden */
/* Autosheet: Mengenfeld raus, kein Rest-Abstand -> Button bündig mit Preis links */
body.dtf-hide-qty form.cart .quantity{display:none!important}
body.dtf-hide-qty form.cart{gap:0!important;padding-left:0!important}
body.dtf-hide-qty form.cart button.single_add_to_cart_button{margin-left:0!important}
/* Der eigentliche Versatz: der innere Flex-Container mit gap:12px + width:0-quantity */
body.dtf-hide-qty .woocommerce-variation-add-to-cart{gap:0!important}
body.dtf-hide-qty .woocommerce-variation-add-to-cart .quantity{display:none!important;width:0!important;margin:0!important}
/* Kaufzeile: linksbündig, Abstand oben und unten */
body.dtf-theme.single-product .product form.cart{
display:flex!important;align-items:center;justify-content:flex-start!important;
gap:14px;flex-wrap:wrap;margin:24px 0 22px!important
}
/* Haupt-Button in Markenfarbe (auch mit .alt), linksbündig */
body.dtf-theme.single-product form.cart button.single_add_to_cart_button,
body.dtf-theme.single-product form.cart button.single_add_to_cart_button.alt,
body.dtf-theme.single-product form.cart button.button.alt.single_add_to_cart_button{
background:var(--dtf-brand-600)!important;color:#fff!important;
height:52px;min-width:220px;align-self:flex-start;border-radius:99px!important
}
body.dtf-theme.single-product form.cart button.single_add_to_cart_button:hover{
background:var(--dtf-brand-700)!important;box-shadow:0 6px 20px rgba(169,208,186,.5)!important
}
/* Gesperrt (kein Format gewählt): dezent grau */
body.dtf-theme.single-product form.cart button.single_add_to_cart_button.disabled,
body.dtf-theme.single-product form.cart button.single_add_to_cart_button:disabled,
body.dtf-theme.single-product form.cart button.wc-variation-selection-needed{
background:#dfe3e1!important;color:#9aa39d!important;cursor:not-allowed;box-shadow:none!important
}
/* Variations-Preis in Salbei statt Gelbgrün */
.dtf-theme .single-product .woocommerce-variation-price .price,
.dtf-theme .single-product .woocommerce-variation-price .amount,
.dtf-theme .single-product .single_variation .price,
.dtf-theme .single-product .single_variation .amount,
.dtf-theme .single-product .woocommerce-variation .price .amount{
color:var(--dtf-brand-dark)!important;
font-family:var(--dtf-font-display)!important;font-weight:800!important;letter-spacing:-1px
}
.dtf-theme .single-product .woocommerce-variation-price .amount bdi,
.dtf-theme .single-product .single_variation .amount bdi{color:var(--dtf-brand-dark)!important}
/* German-Market-Zeilen dezent + Abstand */
.dtf-theme .single-product .single_variation_wrap .wgm-info,
.dtf-theme .single-product .woocommerce-variation .wgm-info{
font-size:13.5px!important;color:var(--dtf-text-soft)!important;line-height:1.5
}
body.dtf-theme.single-product .single_variation_wrap,
body.dtf-theme.single-product .woocommerce-variation{margin-bottom:18px!important}
body.dtf-theme.single-product .single_variation{margin-bottom:10px!important;padding-bottom:4px}
/* Abstand vor der Artikelnummer */
body.dtf-theme.single-product .product_meta{
margin-top:24px!important;padding-top:20px!important;
border-top:1px solid rgba(0,0,0,.08);font-size:13.5px;color:var(--dtf-text-soft)
}
/* Trust-Zeile */
.dtf-trust{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding-top:22px;border-top:1px solid rgba(0,0,0,.08)}
.dtf-tr{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.4}
.dtf-tr svg{width:19px;height:19px;stroke:var(--dtf-brand-dark);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px}
/* Tabs / Beschreibung */
.dtf-theme .woocommerce-tabs{grid-column:1 / -1;padding-top:20px}
.dtf-theme .woocommerce-tabs ul.tabs{padding:0!important;margin:0 0 26px!important;display:flex;gap:10px;flex-wrap:wrap}
.dtf-theme .woocommerce-tabs ul.tabs::before,
.dtf-theme .woocommerce-tabs ul.tabs li::before,
.dtf-theme .woocommerce-tabs ul.tabs li::after{display:none!important}
.dtf-theme .woocommerce-tabs ul.tabs li{background:var(--dtf-gray)!important;border:none!important;border-radius:99px!important;margin:0!important;padding:0!important}
.dtf-theme .woocommerce-tabs ul.tabs li a{padding:12px 22px!important;font-weight:600;font-size:15px;color:var(--dtf-text)!important}
.dtf-theme .woocommerce-tabs ul.tabs li.active{background:var(--dtf-brand-600)!important}
.dtf-theme .woocommerce-tabs .panel{font-size:16px;line-height:1.7;color:var(--dtf-text-soft);max-width:900px}
.dtf-theme .woocommerce-tabs .panel h2{font-size:26px;color:var(--dtf-text);margin-bottom:14px}
/* Ähnliche Produkte */
.dtf-theme .related.products,.dtf-theme .up-sells{grid-column:1 / -1;margin-top:60px;padding-top:60px;border-top:1px solid rgba(0,0,0,.07)}
.dtf-theme .related.products>h2,.dtf-theme .up-sells>h2{font-family:var(--dtf-font-display);font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-1.2px;text-align:center;margin-bottom:34px}
/* ------------------------------------------------ Warenkorb / Kasse */
.dtf-theme table.shop_table{border:1px solid rgba(0,0,0,.08);border-radius:20px;border-collapse:separate;border-spacing:0;overflow:hidden}
.dtf-theme table.shop_table th{background:var(--dtf-gray);font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--dtf-text-soft);padding:14px 18px;border:none}
.dtf-theme table.shop_table td{padding:16px 18px;border:none;border-top:1px solid rgba(0,0,0,.06)}
.dtf-theme .cart_totals h2,.dtf-theme #order_review_heading,.dtf-theme .woocommerce-billing-fields h3{font-family:var(--dtf-font-display);font-size:24px;font-weight:700;letter-spacing:-.8px;margin-bottom:16px}
.dtf-theme .woocommerce-checkout .form-row input.input-text,
.dtf-theme .woocommerce-checkout .form-row textarea,
.dtf-theme .woocommerce-checkout .form-row select,
.dtf-theme .woocommerce form .form-row input.input-text{
border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15.5px;background:#fff
}
.dtf-theme .woocommerce form .form-row input.input-text:focus,
.dtf-theme .woocommerce-checkout .form-row select:focus{outline:none;border-color:var(--dtf-brand-600);box-shadow:0 0 0 3px rgba(169,208,186,.35)}
.dtf-theme .woocommerce form .form-row label{font-size:14px;font-weight:600;margin-bottom:6px}
.dtf-theme #payment{background:var(--dtf-gray)!important;border-radius:20px!important;padding:6px}
.dtf-theme #payment ul.payment_methods{border:none!important;padding:16px 18px!important}
.dtf-theme #payment div.form-row{padding:16px 18px!important}
.dtf-theme .woocommerce-info,.dtf-theme .woocommerce-message{border-top-color:var(--dtf-brand-600);background:var(--dtf-brand-100);border-radius:14px;padding:16px 20px 16px 46px}
.dtf-theme .woocommerce-info::before,.dtf-theme .woocommerce-message::before{color:var(--dtf-brand-dark)}
.dtf-theme .woocommerce-error{border-top-color:#c0392b;border-radius:14px}
/* ------------------------------------------------ Pagination */
.dtf-theme .woocommerce-pagination{margin-top:56px;text-align:center}
.dtf-theme .woocommerce-pagination ul{display:inline-flex;gap:8px;border:none!important;margin:0;padding:0}
.dtf-theme .woocommerce-pagination ul li{border:none!important;margin:0;overflow:visible}
.dtf-theme .woocommerce-pagination ul li a,
.dtf-theme .woocommerce-pagination ul li span{
display:inline-flex;align-items:center;justify-content:center;
min-width:48px;height:48px;padding:0 14px;border-radius:99px;
font-family:var(--dtf-font-display);font-size:16px;font-weight:600;
background:#fff;border:1.5px solid rgba(0,0,0,.1)!important;color:var(--dtf-text)!important;
transition:transform .18s var(--dtf-ease),background .18s var(--dtf-ease),border-color .18s var(--dtf-ease),box-shadow .18s var(--dtf-ease);
}
.dtf-theme .woocommerce-pagination ul li a:hover{
border-color:var(--dtf-brand-600)!important;background:var(--dtf-brand-100);transform:translateY(-2px)
}
.dtf-theme .woocommerce-pagination ul li a:active{transform:scale(.94)}
.dtf-theme .woocommerce-pagination ul li span.current{
background:var(--dtf-brand-600)!important;border-color:var(--dtf-brand-600)!important;color:#fff!important;
box-shadow:0 6px 18px rgba(169,208,186,.5)
}
.dtf-theme .woocommerce-pagination ul li .prev,
.dtf-theme .woocommerce-pagination ul li .next{font-size:20px;line-height:1}
@media (max-width:680px){
.dtf-theme .woocommerce-pagination{margin-top:40px}
.dtf-theme .woocommerce-pagination ul li a,
.dtf-theme .woocommerce-pagination ul li span{min-width:44px;height:44px;font-size:15px}
}
/* ------------------------------------------------ Mobile Kaufleiste */
.dtf-stickybar{
display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-top:1px solid rgba(0,0,0,.09);
padding:12px 18px calc(12px + env(safe-area-inset-bottom));gap:12px;align-items:center
}
.dtf-sb-price b{display:block;font-family:var(--dtf-font-display);font-size:19px;letter-spacing:-.5px}
.dtf-sb-price .woocommerce-Price-currencySymbol{font-size:inherit}
.dtf-stickybar .dtf-btn{flex:1;height:50px}
/* ------------------------------------------------ Mobile */
@media (max-width:900px){
.dtf-theme .single-product div.product{grid-template-columns:1fr;gap:28px;padding-bottom:40px}
.dtf-theme .single-product div.product .woocommerce-product-gallery{position:static}
}
@media (max-width:820px){
.dtf-shop-wrap{padding:0 18px}
.dtf-theme .product_title{font-size:clamp(27px,7.8vw,36px);letter-spacing:-1.1px}
.dtf-theme .single-product div.product p.price,
.dtf-theme .single-product div.product span.price{font-size:31px;padding:18px;border-radius:18px}
.dtf-paths{grid-template-columns:1fr;gap:10px}
.dtf-theme form.cart{flex-direction:column}
.dtf-theme form.cart .quantity{width:100%;justify-content:center}
.dtf-theme form.cart .quantity input.qty{width:100%}
.dtf-theme form.cart button.single_add_to_cart_button{width:100%;min-width:0}
.dtf-trust{grid-template-columns:1fr}
.dtf-theme ul.products{grid-template-columns:1fr 1fr;gap:12px}
.dtf-theme ul.products li.product{padding:18px 16px 22px}
.dtf-theme ul.products li.product .woocommerce-loop-product__title{font-size:17px}
.dtf-theme .woocommerce-tabs ul.tabs{gap:8px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.dtf-theme .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
.dtf-theme .woocommerce-tabs ul.tabs li a{padding:11px 18px!important;white-space:nowrap}
.single-product.dtf-theme .dtf-stickybar{display:flex}
.single-product.dtf-theme{padding-bottom:84px}
}
/* ================================================ PREISFARBE GLOBAL
Das Gelbgrün stammt vom Stufenpreis-Plugin (tiered-pricing-dynamic-price-wrapper).
Wir färben ALLE Preise seitenweit in die Markenfarbe um. */
body.dtf-theme .price,
body.dtf-theme .price .amount,
body.dtf-theme .price ins .amount,
body.dtf-theme .price bdi,
body.dtf-theme .woocommerce-Price-amount,
body.dtf-theme .tiered-pricing-dynamic-price-wrapper,
body.dtf-theme .tiered-pricing-dynamic-price-wrapper .amount,
body.dtf-theme .woocommerce-variation-price .price,
body.dtf-theme .single_variation .price{
color:var(--dtf-brand-dark)!important
}
/* Durchgestrichener Alt-Preis dezent grau statt gelbgrün */
body.dtf-theme .price del,
body.dtf-theme .price del .amount,
body.dtf-theme .price del bdi{
color:var(--dtf-text-soft)!important;opacity:.8
}
/* Aktive Stufenpreis-Zeile (weiß auf Salbei) nicht überschreiben */
body.dtf-theme .tiered-pricing--active td,
body.dtf-theme .tiered-pricing--active td .amount{color:#fff!important}
/* ================================================ OPTIONEN & UPLOAD (v3 — echte DOM-Struktur)
.tmcp-field-wrap = DIE KARTE (flex-Zeile)
├── label.tm-epo-field-label (Checkbox + Text, rahmenlos, flex:1)
├── span.tc-price-wrap (Preis, rechtsbündig)
└── i.tm-tooltip (Fragezeichen, ganz rechts)
*/
/* Die Karte: kompakt, eine Zeile */
body.dtf-theme .tm-extra-product-options .tmcp-field-wrap{
display:flex!important;align-items:center!important;gap:10px!important;
padding:12px 16px!important;margin:0 0 10px!important;
border:1.5px solid rgba(0,0,0,.1)!important;border-radius:14px!important;
background:#fff!important;box-sizing:border-box;max-width:520px;
transition:border-color .18s var(--dtf-ease),background .18s var(--dtf-ease),box-shadow .18s var(--dtf-ease)
}
body.dtf-theme .tm-extra-product-options .tmcp-field-wrap:hover{
border-color:var(--dtf-brand-600)!important;background:var(--dtf-brand-100)!important
}
body.dtf-theme .tm-extra-product-options .tmcp-field-wrap:has(input:checked){
border-color:var(--dtf-brand-600)!important;background:var(--dtf-brand-100)!important;
box-shadow:0 0 0 3px rgba(169,208,186,.22)!important
}
/* Label innen: rahmenlos, füllt den linken Bereich */
body.dtf-theme .tm-extra-product-options label.tm-epo-field-label{
display:flex!important;align-items:center!important;gap:12px!important;
flex:1 1 auto!important;min-width:0;
border:none!important;border-radius:0!important;padding:0!important;margin:0!important;
background:transparent!important;box-shadow:none!important;cursor:pointer;
font-size:14.5px!important;font-weight:600!important;color:var(--dtf-text)!important
}
/* Plugin-eigene Checkbox-Grafik ausblenden */
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper span.tc-label,
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper .tm-epo-style{display:none!important}
/* Wrapper = Platz für unsere Checkbox */
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper{
width:22px!important;height:22px!important;min-width:22px!important;flex:0 0 22px!important;
display:flex!important;align-items:center;justify-content:center;position:relative;margin:0!important
}
/* Unsere Checkbox */
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper input[type=checkbox],
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper input[type=radio]{
appearance:none!important;-webkit-appearance:none!important;opacity:1!important;
position:static!important;width:22px!important;height:22px!important;margin:0!important;
border:1.5px solid rgba(0,0,0,.22)!important;border-radius:7px!important;
background:#fff!important;cursor:pointer;transition:all .18s var(--dtf-ease)
}
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper input[type=radio]{border-radius:50%!important}
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper input:checked{
background:var(--dtf-brand-600)!important;border-color:var(--dtf-brand-600)!important
}
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper input[type=checkbox]:checked::after{
content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;
border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)
}
body.dtf-theme .tm-extra-product-options .tc-epo-style-wrapper input[type=radio]:checked::after{
content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
background:#fff;transform:translate(-50%,-50%)
}
/* Text im Label */
body.dtf-theme .tm-extra-product-options .tc-label-wrap{
display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* Preis: rechtsbündig in derselben Zeile (er ist Geschwister des Labels) */
body.dtf-theme .tm-extra-product-options .tmcp-field-wrap>.tc-price-wrap{
margin-left:auto!important;order:2;display:inline-flex;align-items:center;
color:var(--dtf-brand-dark)!important;font-weight:600!important;font-size:14.5px;white-space:nowrap
}
body.dtf-theme .tm-extra-product-options .tc-price-wrap .amount{color:var(--dtf-brand-dark)!important}
/* Fragezeichen: ganz rechts, dezenter grauer Kreis */
body.dtf-theme .tm-extra-product-options .tmcp-field-wrap>.tm-tooltip,
body.dtf-theme .tm-extra-product-options .tmcp-field-wrap>.tc-tooltip{
order:3;flex:0 0 20px;
width:20px!important;height:20px!important;line-height:20px!important;
border-radius:50%!important;background:#e5e7e6!important;color:#6e6e73!important;
font-size:11px!important;text-align:center!important;display:inline-flex!important;
align-items:center!important;justify-content:center!important;
border:none!important;box-shadow:none!important;padding:0!important;margin:0!important
}
body.dtf-theme .tm-extra-product-options .tc-tooltip::before{color:#6e6e73!important;font-size:11px!important}
/* --- Upload-Block: schlicht --- */
body.dtf-theme .wc-dnd-file-upload{
border:1.5px dashed rgba(0,0,0,.16)!important;border-radius:14px!important;
background:#fff!important;padding:18px!important;margin:16px 0 0!important;max-width:520px;
box-sizing:border-box;
transition:border-color .18s var(--dtf-ease),background .18s var(--dtf-ease)
}
body.dtf-theme .wc-dnd-file-upload:hover{
border-color:var(--dtf-brand-600)!important;background:var(--dtf-brand-100)!important
}
body.dtf-theme .wc-dnd-file-upload button,
body.dtf-theme .wc-dnd-file-upload .dnd-upload-btn{
background:var(--dtf-brand-600)!important;color:#fff!important;border:none!important;
border-radius:99px!important;padding:9px 18px!important;
font-family:inherit!important;font-size:14px!important;font-weight:600!important;cursor:pointer
}
body.dtf-theme .wc-dnd-file-upload button:hover{background:var(--dtf-brand-700)!important}
body.dtf-theme .dnd-upload-counter{
display:block;margin-top:8px;font-size:12px;color:var(--dtf-text-soft)!important
}
/* ================================================ UPLOAD-DATEILISTE (Variante C)
Plugin-Struktur (PRO Drag&Drop v1.7.2):
.codedropz-upload-wrapper > .codedropz--results > .dnd-upload-status (je Datei)
.dnd-upload-image | .dnd-upload-details > span.name, a.remove-file,
.dnd-progress-bar, .wc-dnd-upload-qty > input.dnd-upload-qty */
/* Upload-Bereich volle Breite -> Woo-Menge + Button rutschen darunter */
body.dtf-theme .single-product form.cart .codedropz-upload-wrapper{
flex:0 0 100%!important;max-width:520px!important;width:100%!important
}
/* Die zusammenhängende Dateibox */
body.dtf-theme .codedropz--results,
body.dtf-theme .codedropz--preview{
border:1.5px solid rgba(0,0,0,.1)!important;border-radius:14px!important;
overflow:hidden!important;background:#fff!important;
margin:12px 0 0!important;max-width:520px;padding:0!important;
display:block!important
}
body.dtf-theme .codedropz--results:empty,
body.dtf-theme .codedropz--preview:empty{display:none!important;border:none!important}
/* Eine Datei = eine Zeile */
body.dtf-theme .codedropz--results .dnd-upload-status,
body.dtf-theme .codedropz--preview .dnd-upload-status{
display:flex!important;align-items:center!important;gap:12px!important;
padding:11px 14px!important;margin:0!important;background:#fff!important;
border:none!important;width:auto!important;float:none!important
}
body.dtf-theme .codedropz--results .dnd-upload-status + .dnd-upload-status,
body.dtf-theme .codedropz--preview .dnd-upload-status + .dnd-upload-status{
border-top:1px solid rgba(0,0,0,.07)!important
}
/* Datei-Icon / Vorschau links */
body.dtf-theme .dnd-upload-status .dnd-upload-image{
width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px;
border-radius:8px!important;background:var(--dtf-brand-100)!important;
display:flex!important;align-items:center;justify-content:center;overflow:hidden;
margin:0!important;color:var(--dtf-brand-dark)
}
body.dtf-theme .dnd-upload-status .dnd-upload-image img{
width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important
}
body.dtf-theme .dnd-upload-status .dnd-upload-image span[class*=icon]{font-size:14px}
/* Details = Rest der Zeile */
body.dtf-theme .dnd-upload-status .dnd-upload-details{
display:flex!important;align-items:center!important;gap:12px!important;
flex:1 1 auto!important;min-width:0;padding:0!important;margin:0!important
}
body.dtf-theme .dnd-upload-details span.name{
order:1;flex:1 1 auto;min-width:0;
font-size:13.5px!important;font-weight:600!important;color:var(--dtf-text)!important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left
}
body.dtf-theme .dnd-upload-details span.name a{color:var(--dtf-text)!important;text-decoration:none}
body.dtf-theme .dnd-upload-details span.name em{
font-style:normal;font-size:11.5px;color:var(--dtf-text-soft);margin-left:8px;font-weight:500
}
/* Anzahl-Bereich rechts */
body.dtf-theme .dnd-upload-details .wc-dnd-upload-qty{
order:2;margin-left:auto!important;display:inline-flex!important;align-items:center;gap:8px;
font-size:12px;color:var(--dtf-text-soft);white-space:nowrap
}
/* Stepper (vom Theme-JS um das Zahlenfeld gebaut) */
body.dtf-theme .dtf-stepper{
display:inline-flex;align-items:center;height:32px;
border:1.5px solid rgba(0,0,0,.14);border-radius:99px;overflow:hidden;background:#fff
}
body.dtf-theme .dtf-stepper .dtf-step-btn{
width:30px;height:100%;border:none;background:transparent;cursor:pointer;
font-size:15px;font-weight:600;color:var(--dtf-brand-dark);line-height:1;padding:0;
transition:background .15s var(--dtf-ease)
}
body.dtf-theme .dtf-stepper .dtf-step-btn:hover{background:var(--dtf-brand-100)}
body.dtf-theme .dtf-stepper input,
body.dtf-theme .dtf-stepper input.dnd-upload-qty{
width:36px!important;height:100%!important;border:none!important;margin:0!important;padding:0!important;
text-align:center!important;font-family:inherit!important;font-size:13.5px!important;font-weight:700!important;
background:transparent!important;-moz-appearance:textfield;box-shadow:none!important
}
body.dtf-theme .dtf-stepper input::-webkit-outer-spin-button,
body.dtf-theme .dtf-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Fallback ohne JS: nacktes Zahlenfeld ordentlich */
body.dtf-theme .wc-dnd-upload-qty input.dnd-upload-qty:not(.dtf-stepper input){
width:52px;height:32px;border:1.5px solid rgba(0,0,0,.14);border-radius:8px;text-align:center;
font-family:inherit;font-size:13.5px;font-weight:700
}
/* Entfernen-Kreuz ganz rechts */
body.dtf-theme .dnd-upload-details a.remove-file{
order:3;position:static!important;width:26px;height:26px;min-width:26px;
display:inline-flex!important;align-items:center;justify-content:center;
border-radius:50%;color:#b6b6bb!important;text-decoration:none;font-size:13px;
transition:all .15s var(--dtf-ease);margin:0!important
}
body.dtf-theme .dnd-upload-details a.remove-file:hover{background:#fbeaea;color:#c0392b!important}
/* Fortschritt/Fehler dezent */
body.dtf-theme .dnd-upload-details .dnd-progress-bar{
order:4;flex:0 0 100%;height:3px;border-radius:99px;background:var(--dtf-brand-100);overflow:hidden;margin:6px 0 0
}
body.dtf-theme .dnd-upload-details .dnd-progress-bar span{background:var(--dtf-brand-600)!important;height:100%!important}
body.dtf-theme .dnd-upload-details .has-error{order:5;flex:0 0 100%;font-size:12px;color:#c0392b}
/* Grüne Summen-Fußzeile (vom Theme-JS erzeugt, reine Anzeige) */
body.dtf-theme .dtf-upload-sum{
display:flex;align-items:center;padding:12px 14px;
background:var(--dtf-brand-100);border-top:1.5px solid var(--dtf-brand-600);
font-size:13.5px;font-weight:700;color:var(--dtf-text)
}
body.dtf-theme .dtf-upload-sum b{
margin-left:auto;font-family:var(--dtf-font-display);font-size:18px;font-weight:800;
color:var(--dtf-brand-dark);letter-spacing:-.5px
}
/* ================================================ WARENKORB — AUFTRAGSBLATT (Variante B)
Aufbau je Position:
.dtf-sheet
├── .dtf-sheet-head (Bild, Titel, Aktionen)
├── .dtf-sheet-body (.dtf-brow je Datei)
├── .dtf-sheet-foot (Gesamt Bahnen / Summe)
└── .dtf-tier-hint (optional)
Die originale WooCommerce-Tabelle bleibt für Nonces und Links im DOM
und wird erst ausgeblendet, wenn das Auftragsblatt wirklich steht.
*/
body.dtf-theme.woocommerce-cart.dtf-cart-sheet .woocommerce-cart-form table.shop_table{
display:none!important
}
body.dtf-theme.woocommerce-cart.dtf-cart-sheet .woocommerce-cart-form{
margin:0!important;padding:0!important
}
body.dtf-theme.woocommerce-cart .dtf-sheets{
display:flex;flex-direction:column;gap:16px;margin:0 0 26px
}
body.dtf-theme.woocommerce-cart .dtf-sheet{
border:1px solid rgba(0,0,0,.10);border-radius:16px;background:#fff;overflow:hidden;
box-shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.05);
transition:opacity .2s var(--dtf-ease)
}
body.dtf-theme.woocommerce-cart .dtf-sheet.is-busy{opacity:.55;pointer-events:none}
/* --- Kopf --- */
body.dtf-theme.woocommerce-cart .dtf-sheet-head{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:14px 18px;background:#FAFBFB;border-bottom:1px solid rgba(0,0,0,.10)
}
body.dtf-theme.woocommerce-cart .dtf-sheet-thumb{
width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none;
background:var(--dtf-brand-100);display:grid;place-items:center
}
body.dtf-theme.woocommerce-cart .dtf-sheet-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.dtf-theme.woocommerce-cart .dtf-sheet-titlebox{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
body.dtf-theme.woocommerce-cart a.dtf-sheet-title{
font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:16px;color:var(--dtf-text)!important;
text-decoration:none;line-height:1.3
}
body.dtf-theme.woocommerce-cart a.dtf-sheet-title:hover{color:var(--dtf-brand-dark)!important}
body.dtf-theme.woocommerce-cart .dtf-sheet-meta{font-size:13px;color:var(--dtf-text-soft)}
body.dtf-theme.woocommerce-cart .dtf-sheet-actions{display:flex;gap:8px;flex:none}
body.dtf-theme.woocommerce-cart .dtf-btn{
font-family:Inter,sans-serif;font-weight:600;font-size:13px;line-height:1;
padding:9px 13px;border-radius:10px;border:1px solid rgba(0,0,0,.10);
background:#fff;color:var(--dtf-text-soft);cursor:pointer;
transition:background .16s var(--dtf-ease),color .16s var(--dtf-ease),border-color .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-cart .dtf-btn:hover{
background:var(--dtf-brand-100);color:var(--dtf-brand-dark);border-color:var(--dtf-brand-600)
}
/* --- Dateizeilen --- */
body.dtf-theme.woocommerce-cart .dtf-sheet-body{padding:4px 18px 14px}
body.dtf-theme.woocommerce-cart .dtf-brow{
display:grid;grid-template-columns:34px minmax(0,1fr) 100px 118px 100px;
gap:12px;align-items:center;padding:12px 0;border-top:1px solid rgba(0,0,0,.06);font-size:14px
}
body.dtf-theme.woocommerce-cart .dtf-brow-head{
border-top:0;padding:12px 0 6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:#9AA4AE;font-weight:600
}
body.dtf-theme.woocommerce-cart .dtf-idx{
width:26px;height:26px;border-radius:8px;background:var(--dtf-brand-100);color:var(--dtf-brand-dark);
display:grid;place-items:center;font-size:12px;font-weight:700
}
body.dtf-theme.woocommerce-cart .dtf-fname{display:flex;flex-direction:column;min-width:0}
body.dtf-theme.woocommerce-cart .dtf-fname-text{
font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.dtf-theme.woocommerce-cart .dtf-fname-sub{font-size:12px;color:var(--dtf-text-soft)}
body.dtf-theme.woocommerce-cart .dtf-muted{color:var(--dtf-text-soft);font-size:13px}
body.dtf-theme.woocommerce-cart .dtf-col-sum{text-align:right;font-weight:600}
body.dtf-theme.woocommerce-cart .dtf-brow-head .dtf-col-sum{font-weight:600}
/* --- Stepper --- */
body.dtf-theme.woocommerce-cart .dtf-stepper{
display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,.10);
border-radius:10px;overflow:hidden;background:#fff;width:max-content
}
body.dtf-theme.woocommerce-cart .dtf-stepper button{
width:32px;height:32px;border:0;background:#fff;color:var(--dtf-text);
font-size:15px;line-height:1;cursor:pointer;padding:0;
transition:background .15s var(--dtf-ease)
}
body.dtf-theme.woocommerce-cart .dtf-stepper button:hover:not(:disabled){background:var(--dtf-brand-100)}
body.dtf-theme.woocommerce-cart .dtf-stepper button:disabled{opacity:.35;cursor:default}
body.dtf-theme.woocommerce-cart .dtf-stepper button:focus-visible{outline:2px solid var(--dtf-brand-dark);outline-offset:-2px}
body.dtf-theme.woocommerce-cart .dtf-step-val{min-width:36px;text-align:center;font-weight:600;font-size:14px}
/* --- Fußzeile --- */
body.dtf-theme.woocommerce-cart .dtf-sheet-foot{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:14px 18px;background:var(--dtf-brand-100);
border-top:1px solid rgba(95,153,124,.22);
font-weight:600;color:var(--dtf-brand-dark);font-size:15px
}
body.dtf-theme.woocommerce-cart .dtf-sheet-foot .dtf-foot-sum{font-family:'Inter Tight',Inter,sans-serif;font-size:17px}
/* --- Staffelhinweis --- */
body.dtf-theme.woocommerce-cart .dtf-tier-hint{
display:flex;gap:10px;align-items:flex-start;padding:12px 18px;
background:#fff;border-top:1px solid rgba(0,0,0,.06);
font-size:13.5px;color:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-cart .dtf-tier-icon{font-weight:700}
body.dtf-theme.woocommerce-cart .dtf-sheet-error{
padding:12px 18px;background:#FFF4F4;color:#8A2B2B;font-size:13.5px;
border-top:1px solid rgba(138,43,43,.18)
}
/* --- Mobil --- */
@media (max-width:820px){
body.dtf-theme.woocommerce-cart .dtf-brow{grid-template-columns:28px minmax(0,1fr) 110px;row-gap:6px}
body.dtf-theme.woocommerce-cart .dtf-brow .dtf-col-format{display:none}
body.dtf-theme.woocommerce-cart .dtf-brow .dtf-col-sum{grid-column:2 / -1;text-align:left;font-size:13px}
body.dtf-theme.woocommerce-cart .dtf-brow-head{display:none}
body.dtf-theme.woocommerce-cart .dtf-sheet-actions{width:100%}
body.dtf-theme.woocommerce-cart .dtf-btn{flex:1}
}
/* ---------- Warenkorb: Abstand unter der Überschrift ---------- */
body.dtf-theme.woocommerce-cart h1.dtf-page-title{margin-bottom:30px!important}
/* ---------- Unterer Bereich: drei Blöcke ----------
Versandarten | Abholarten | Zusammenfassung
Der Originalbereich .cart_totals bleibt als Datenquelle im DOM und wird
erst ausgeblendet, wenn die drei Blöcke wirklich stehen. */
body.dtf-theme.woocommerce-cart.dtf-cart-bottom-on .cart-collaterals{display:none!important}
body.dtf-theme.woocommerce-cart .dtf-cart-bottom{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;align-items:stretch!important;margin:0 0 30px
}
/* Gleiche Hoehe: die Kacheln fuellen die Rasterzeile, der Inhalt wird
als Spalte gesetzt. Lieferadresse und Button rutschen per margin-top:auto
nach unten, damit die Unterkanten buendig sind. */
body.dtf-theme.woocommerce-cart .dtf-block{
display:flex;flex-direction:column;
border:1px solid rgba(0,0,0,.10);border-radius:16px;background:#fff;padding:16px 18px;
box-shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.05)
}
body.dtf-theme.woocommerce-cart .dtf-block-title{
font-family:var(--dtf-font-display);font-size:16px!important;font-weight:600!important;
margin:0 0 12px!important;color:var(--dtf-text)!important
}
/* --- Versand- und Abholkarten --- */
body.dtf-theme.woocommerce-cart ul.dtf-ship-list{
list-style:none!important;margin:0!important;padding:0!important;
display:flex;flex-direction:column;gap:8px
}
body.dtf-theme.woocommerce-cart ul.dtf-ship-list li{
display:flex!important;align-items:flex-start;gap:10px;margin:0!important;
border:1.5px solid rgba(0,0,0,.10);border-radius:12px;padding:10px 13px;background:#fff;
transition:border-color .16s var(--dtf-ease),background .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-cart ul.dtf-ship-list li:hover{
border-color:var(--dtf-brand-700);background:var(--dtf-brand-100)
}
body.dtf-theme.woocommerce-cart ul.dtf-ship-list li:has(input:checked){
border-color:var(--dtf-brand-dark);background:var(--dtf-brand-100)
}
body.dtf-theme.woocommerce-cart ul.dtf-ship-list li input[type=radio]{margin:3px 0 0!important;flex:none}
body.dtf-theme.woocommerce-cart ul.dtf-ship-list li label{
display:block!important;flex:1;margin:0!important;cursor:pointer;font-weight:500!important
}
body.dtf-theme.woocommerce-cart .dtf-ship-line{
display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:14px
}
body.dtf-theme.woocommerce-cart .dtf-ship-name{flex:1 1 auto;min-width:0}
body.dtf-theme.woocommerce-cart .dtf-ship-price{flex:none;font-weight:600;white-space:nowrap;color:var(--dtf-text)}
body.dtf-theme.woocommerce-cart .dtf-ship-vat{
display:block;font-size:12px;color:var(--dtf-text-soft);font-weight:400;margin-top:2px
}
body.dtf-theme.woocommerce-cart .dtf-block .woocommerce-shipping-destination{
margin:auto 0 0!important;padding-top:12px;font-size:12.5px!important;color:var(--dtf-text-soft)!important
}
/* --- Zusammenfassung --- */
body.dtf-theme.woocommerce-cart .dtf-sumline{
display:flex;justify-content:space-between;gap:12px;align-items:baseline;
padding:8px 0;font-size:14px;color:var(--dtf-text-soft)
}
body.dtf-theme.woocommerce-cart .dtf-sumline-value{font-weight:600;color:var(--dtf-text);white-space:nowrap}
body.dtf-theme.woocommerce-cart .dtf-sumline-total{
border-top:1px solid rgba(0,0,0,.10);margin-top:14px;padding-top:13px
}
body.dtf-theme.woocommerce-cart .dtf-sumline-total .dtf-sumline-label{
font-family:var(--dtf-font-display);font-size:17px;font-weight:700;color:var(--dtf-text)
}
body.dtf-theme.woocommerce-cart .dtf-sumline-total .dtf-sumline-value{
font-family:var(--dtf-font-display);font-size:19px;font-weight:700;color:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-cart .dtf-sumline-total small{
display:block;font-size:12px;font-weight:500;color:var(--dtf-text-soft)
}
body.dtf-theme.woocommerce-cart .dtf-block-sum a.checkout-button{
display:block!important;width:100%!important;text-align:center!important;margin:auto 0 0!important;
background:var(--dtf-brand-600)!important;color:#14261D!important;
font-weight:600!important;font-size:15px!important;
/* Achtung: .dtf-theme .button setzt height:50px bei box-sizing:content-box —
dadurch addiert sich das Padding oben drauf. Deshalb ausdrücklich zurücksetzen. */
height:auto!important;box-sizing:border-box!important;line-height:1.2!important;
padding:13px 22px!important;border-radius:999px!important;border:0!important
}
body.dtf-theme.woocommerce-cart .dtf-block-sum a.checkout-button:hover{background:var(--dtf-brand-700)!important}
body.dtf-theme.woocommerce-cart .dtf-sum-note{
margin:10px 0 0!important;font-size:11.5px!important;line-height:1.5!important;
color:var(--dtf-text-soft)!important
}
/* --- Zeile unter der Überschrift --- */
body.dtf-theme.woocommerce-cart h1.dtf-page-title{margin-bottom:6px!important}
body.dtf-theme.woocommerce-cart .dtf-cart-subline{
margin:0 0 26px!important;font-size:14px!important;color:var(--dtf-text-soft)!important
}
@media (max-width:1000px){
body.dtf-theme.woocommerce-cart .dtf-cart-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
body.dtf-theme.woocommerce-cart .dtf-block-sum{grid-column:1 / -1}
}
@media (max-width:640px){
body.dtf-theme.woocommerce-cart .dtf-cart-bottom{grid-template-columns:1fr}
}
/* ================================================ KASSE (Variante A)
Links das Formular, rechts die fixierte Bestelluebersicht.
WooCommerce ersetzt #order_review bei jeder Aenderung per AJAX —
deshalb wird hier ausschliesslich ueber Klassen gestylt, die
auch nach dem Neuaufbau wieder da sind. */
body.dtf-theme.woocommerce-checkout h1.dtf-page-title{margin-bottom:6px!important}
body.dtf-theme.woocommerce-checkout .dtf-co-subline{
margin:0 0 26px!important;font-size:14px!important;color:var(--dtf-text-soft)!important
}
/* --- Zweispaltiges Raster ---
Nicht das Formular selbst zum Raster machen: es enthaelt weitere
Direktkinder (Stripe-Express-Checkout, versteckte Felder, Skripte),
die sonst in beliebigen Zellen landen. Das Skript setzt stattdessen
einen eigenen Wrapper um die beiden Spalten. */
/* Ueberschrift sitzt in der Karte, gleiche Groesse wie links */
body.dtf-theme.woocommerce-checkout #order_review_heading{
margin:0 0 14px!important;
font-family:var(--dtf-font-display);font-size:16px!important;font-weight:600!important;
color:var(--dtf-text)!important
}
@media (min-width:1000px){
body.dtf-theme.woocommerce-checkout .dtf-co-grid{
display:grid;grid-template-columns:minmax(0,1fr) 480px;
gap:24px;align-items:start
}
}
body.dtf-theme.woocommerce-checkout .dtf-co-left{min-width:0}
/* Auf der Kasse mehr Breite, damit die Spalten aufgehen */
body.dtf-theme.woocommerce-checkout .dtf-wrap.dtf-content{max-width:1280px!important}
/* --- Versandauswahl: nur die gewaehlte Art, Rest auf Klick --- */
body.dtf-theme.woocommerce-checkout tr.dtf-co-ship-moved{display:none!important}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-box{
margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(0,0,0,.06)
}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-box h4{
font-family:var(--dtf-font-display);font-size:15px!important;font-weight:600!important;margin:0 0 10px!important
}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-current{
display:flex;align-items:center;gap:12px;width:100%;text-align:left;
font-family:var(--dtf-font);cursor:pointer;
border:1.5px solid rgba(0,0,0,.10);border-radius:12px;background:#fff;padding:11px 14px;
height:auto;box-sizing:border-box;
transition:border-color .16s var(--dtf-ease),background .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-current:hover{
border-color:var(--dtf-brand-700);background:var(--dtf-brand-100)
}
body.dtf-theme.woocommerce-checkout .dtf-co-cur-name{
flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;color:var(--dtf-text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.dtf-theme.woocommerce-checkout .dtf-co-cur-price{flex:none;font-size:14px;font-weight:600;color:var(--dtf-text)}
body.dtf-theme.woocommerce-checkout .dtf-co-cur-toggle{
flex:none;font-size:13px;font-weight:600;color:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-options[hidden]{display:none}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-options{margin-top:8px}
/* --- Adressspalten --- */
/* Zwischen den Karten stehen Leerzeichen im HTML. Im Flex-Layout zaehlen
die als eigene Elemente — der gap wuerde dadurch auch VOR der ersten
Karte greifen und die linke Spalte um 14 px nach unten schieben.
Deshalb Abstand ueber margin statt gap. */
body.dtf-theme.woocommerce-checkout .col2-set{display:flex;flex-direction:column;gap:0!important}
body.dtf-theme.woocommerce-checkout .col2-set>.col-1{margin:0 0 24px!important}
body.dtf-theme.woocommerce-checkout .col2-set>.col-2{margin:0!important}
body.dtf-theme.woocommerce-checkout .col2-set .col-1,
body.dtf-theme.woocommerce-checkout .col2-set .col-2{
width:100%!important;float:none!important;margin:0!important;
/* Ohne border-box zaehlen die 18 px Innenabstand zur Breite hinzu —
die Karte ragt dann aus der Spalte in die Nachbarspalte hinein. */
box-sizing:border-box!important;
border:1px solid rgba(0,0,0,.10);border-radius:16px;background:#fff;padding:18px;
box-shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.05)
}
body.dtf-theme.woocommerce-checkout .col2-set h3{
font-family:var(--dtf-font-display);font-size:16px!important;font-weight:600!important;
margin:0 0 14px!important
}
/* --- Formularfelder --- */
body.dtf-theme.woocommerce-checkout .form-row{margin:0 0 12px!important;padding:0!important}
body.dtf-theme.woocommerce-checkout .form-row label{
display:block;font-size:12.5px!important;font-weight:600!important;
letter-spacing:.05em;text-transform:uppercase;color:#9AA4AE!important;margin:0 0 5px!important
}
body.dtf-theme.woocommerce-checkout .form-row label.checkbox,
body.dtf-theme.woocommerce-checkout .woocommerce-form__label-for-checkbox{
text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;
font-weight:500!important;color:var(--dtf-text)!important;display:flex!important;
gap:9px;align-items:flex-start
}
body.dtf-theme.woocommerce-checkout .input-text,
body.dtf-theme.woocommerce-checkout .form-row select,
body.dtf-theme.woocommerce-checkout .select2-container .select2-selection{
width:100%!important;padding:11px 13px!important;
border:1.5px solid rgba(0,0,0,.10)!important;border-radius:11px!important;
font-family:var(--dtf-font)!important;font-size:14.5px!important;background:#fff!important;
/* Feste Hoehe: das Land-Auswahlfeld war 49 px hoch, die Textfelder 42 —
dadurch wuchs die ganze Rasterzeile und das Nachbarfeld wirkte versetzt. */
height:42px!important;line-height:1.2!important;box-sizing:border-box!important;
transition:border-color .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-checkout textarea.input-text{height:auto!important}
/* Beschriftungen einzeilig halten, damit alle Zeilen gleich hoch bleiben */
body.dtf-theme.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row > label,
body.dtf-theme.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row > label{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
height:19px!important;line-height:19px!important;margin:0 0 6px!important
}
/* Felder buendig am unteren Rand ihrer Rasterzeile */
body.dtf-theme.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.dtf-theme.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row{
display:flex;flex-direction:column;justify-content:flex-start
}
body.dtf-theme.woocommerce-checkout .input-text:focus,
body.dtf-theme.woocommerce-checkout .form-row select:focus{
outline:0!important;border-color:var(--dtf-brand-dark)!important;box-shadow:none!important
}
body.dtf-theme.woocommerce-checkout textarea.input-text{min-height:90px!important}
/* ---------- Adressfelder: kompaktes 12-Spalten-Raster ----------
Postleitzahl, Telefon, Firma usw. brauchen keine volle Breite. Die
WooCommerce-Klassen form-row-first/last/wide setzen Floats und feste
Prozentbreiten — die werden hier aufgehoben und durch Rasterplaetze
ersetzt. */
body.dtf-theme.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.dtf-theme.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;
gap:12px 12px!important;
/* Oben ausrichten: einzelne Felder sind minimal hoeher als ihre Nachbarn
(das Firmenfeld etwa um 10 px). Bei Ausrichtung nach unten schiebt das
den Inhalt sichtbar nach unten. */
align-items:start!important
}
body.dtf-theme.woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row,
body.dtf-theme.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>.form-row{
float:none!important;width:auto!important;margin:0!important;padding:0!important;
grid-column:span 12
}
/* Jede Zeile fuellt exakt 12 Spalten — sonst bleibt rechts eine Luecke,
etwa wenn das Bundesland-Feld (in Oesterreich leer) ausgeblendet ist. */
body.dtf-theme.woocommerce-checkout #billing_first_name_field,
body.dtf-theme.woocommerce-checkout #shipping_first_name_field{grid-column:span 6}
body.dtf-theme.woocommerce-checkout #billing_last_name_field,
body.dtf-theme.woocommerce-checkout #shipping_last_name_field{grid-column:span 6}
body.dtf-theme.woocommerce-checkout #billing_company_field,
body.dtf-theme.woocommerce-checkout #shipping_company_field{grid-column:span 6}
body.dtf-theme.woocommerce-checkout #billing_country_field,
body.dtf-theme.woocommerce-checkout #shipping_country_field{grid-column:span 6}
body.dtf-theme.woocommerce-checkout #billing_address_1_field,
body.dtf-theme.woocommerce-checkout #shipping_address_1_field{grid-column:span 8}
body.dtf-theme.woocommerce-checkout #billing_address_2_field,
body.dtf-theme.woocommerce-checkout #shipping_address_2_field{grid-column:span 4}
body.dtf-theme.woocommerce-checkout #billing_postcode_field,
body.dtf-theme.woocommerce-checkout #shipping_postcode_field{grid-column:span 4}
body.dtf-theme.woocommerce-checkout #billing_city_field,
body.dtf-theme.woocommerce-checkout #shipping_city_field{grid-column:span 8}
body.dtf-theme.woocommerce-checkout #billing_state_field,
body.dtf-theme.woocommerce-checkout #shipping_state_field{grid-column:span 12}
body.dtf-theme.woocommerce-checkout #billing_phone_field,
body.dtf-theme.woocommerce-checkout #shipping_phone_field{grid-column:span 6}
body.dtf-theme.woocommerce-checkout #billing_email_field{grid-column:span 6}
/* Leere oder ausgeblendete Felder duerfen keine Luecke reissen */
body.dtf-theme.woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row:empty,
body.dtf-theme.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>.form-row:empty{display:none}
@media (max-width:700px){
body.dtf-theme.woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row,
body.dtf-theme.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>.form-row{grid-column:span 12!important}
}
/* --- Bestelluebersicht --- */
body.dtf-theme.woocommerce-checkout #order_review{
border:1px solid rgba(0,0,0,.10);border-radius:16px;background:#fff;padding:18px;
box-shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.05)
}
body.dtf-theme.woocommerce-checkout table.woocommerce-checkout-review-order-table{
width:100%!important;table-layout:fixed!important;border:0!important;
margin:0 0 6px!important;background:transparent!important
}
body.dtf-theme.woocommerce-checkout table.woocommerce-checkout-review-order-table thead{display:none}
body.dtf-theme.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.dtf-theme.woocommerce-checkout table.woocommerce-checkout-review-order-table td{
border:0!important;padding:9px 0!important;background:transparent!important;font-size:14px!important
}
body.dtf-theme.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item td{
border-bottom:1px solid rgba(0,0,0,.06)!important;padding-bottom:14px!important
}
body.dtf-theme.woocommerce-checkout tr.cart_item .product-name{font-weight:600!important;line-height:1.4}
body.dtf-theme.woocommerce-checkout tr.cart_item .product-quantity{
font-weight:600!important;color:var(--dtf-brand-dark)!important
}
body.dtf-theme.woocommerce-checkout tr.cart_item .product-total{
text-align:right!important;font-weight:600!important;white-space:nowrap
}
body.dtf-theme.woocommerce-checkout tr.cart_item .tc-epo-metadata{margin:6px 0 0!important;font-size:12.5px!important}
body.dtf-theme.woocommerce-checkout tr.cart_item .tc-epo-metadata dt{font-weight:600!important;color:var(--dtf-text-soft)!important}
body.dtf-theme.woocommerce-checkout tr.cart_item .tc-epo-metadata dd{margin:0 0 4px!important;color:var(--dtf-text-soft)!important}
/* Summenzeilen */
body.dtf-theme.woocommerce-checkout tr.cart-subtotal td,
body.dtf-theme.woocommerce-checkout tr.tax-total td,
body.dtf-theme.woocommerce-checkout tr.order-total td{text-align:right!important;font-weight:600!important}
body.dtf-theme.woocommerce-checkout tr.cart-subtotal th,
body.dtf-theme.woocommerce-checkout tr.tax-total th,
body.dtf-theme.woocommerce-checkout tr.order-total th,
body.dtf-theme.woocommerce-checkout tr.woocommerce-shipping-totals th{
font-weight:500!important;color:var(--dtf-text-soft)!important;text-align:left!important
}
body.dtf-theme.woocommerce-checkout tr.order-total th,
body.dtf-theme.woocommerce-checkout tr.order-total td{
border-top:1px solid rgba(0,0,0,.10)!important;padding-top:13px!important;
font-family:var(--dtf-font-display);font-size:18px!important;font-weight:700!important
}
body.dtf-theme.woocommerce-checkout tr.order-total td{color:var(--dtf-brand-dark)!important}
body.dtf-theme.woocommerce-checkout tr.order-total small{
display:block;font-size:11.5px!important;font-weight:500!important;color:var(--dtf-text-soft)!important
}
/* Versand- und Abholarten */
body.dtf-theme.woocommerce-checkout tr.woocommerce-shipping-totals td{padding-top:2px!important}
body.dtf-theme.woocommerce-checkout #order_review ul#shipping_method{
list-style:none!important;margin:0!important;padding:0!important;
display:flex;flex-direction:column;gap:7px
}
body.dtf-theme.woocommerce-checkout #order_review ul#shipping_method li{
display:flex!important;align-items:flex-start;gap:9px;margin:0!important;
border:1.5px solid rgba(0,0,0,.10);border-radius:11px;padding:9px 12px;background:#fff;
transition:border-color .16s var(--dtf-ease),background .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-checkout #order_review ul#shipping_method li:hover{
border-color:var(--dtf-brand-700);background:var(--dtf-brand-100)
}
body.dtf-theme.woocommerce-checkout #order_review ul#shipping_method li:has(input:checked){
border-color:var(--dtf-brand-dark);background:var(--dtf-brand-100)
}
body.dtf-theme.woocommerce-checkout #order_review ul#shipping_method li input{margin:3px 0 0!important;flex:none}
body.dtf-theme.woocommerce-checkout #order_review ul#shipping_method li label{
display:block!important;flex:1;margin:0!important;cursor:pointer;
text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;
font-weight:500!important;color:var(--dtf-text)!important
}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-line{
display:flex;justify-content:space-between;gap:10px;align-items:baseline
}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-name{flex:1 1 auto;min-width:0}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-price{flex:none;font-weight:600;white-space:nowrap}
body.dtf-theme.woocommerce-checkout .dtf-co-ship-vat{
display:block;font-size:11.5px;color:var(--dtf-text-soft);font-weight:400;margin-top:2px
}
/* ---------- Bestellzeile aufraeumen ---------- */
body.dtf-theme.woocommerce-checkout .dtf-co-hide{display:none!important}
body.dtf-theme.woocommerce-checkout tr.cart_item .product-name{
font-weight:600!important;line-height:1.45;font-size:14.5px!important
}
body.dtf-theme.woocommerce-checkout tr.cart_item .product-quantity{
display:inline-block;margin-left:4px;font-weight:600!important;color:var(--dtf-brand-dark)!important
}
/* ---------- Druckdateien als eigener, eingeklappter Block ---------- */
body.dtf-theme.woocommerce-checkout .dtf-co-files-box{
margin:12px 0 0;border:1px solid rgba(0,0,0,.10);border-radius:12px;background:#FAFBFB;overflow:hidden
}
body.dtf-theme.woocommerce-checkout .dtf-co-files-head{
display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
background:transparent;border:0;padding:11px 14px;font-family:var(--dtf-font);height:auto;box-sizing:border-box
}
body.dtf-theme.woocommerce-checkout .dtf-co-files-head:hover{background:var(--dtf-brand-100)}
body.dtf-theme.woocommerce-checkout .dtf-co-files-title{
flex:none;font-size:13.5px;font-weight:600;color:var(--dtf-text)
}
body.dtf-theme.woocommerce-checkout .dtf-co-files-count{
flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--dtf-text-soft);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.dtf-theme.woocommerce-checkout .dtf-co-files-toggle{
flex:none;font-size:12.5px;font-weight:600;color:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-checkout ul.dtf-co-files[hidden]{display:none}
body.dtf-theme.woocommerce-checkout ul.dtf-co-files{
list-style:none!important;margin:0!important;padding:0 14px 12px!important;
display:flex;flex-direction:column;gap:6px
}
body.dtf-theme.woocommerce-checkout ul.dtf-co-files li{
display:flex;justify-content:space-between;gap:12px;align-items:baseline;
font-size:12.5px!important;color:var(--dtf-text-soft)!important;
border-top:1px solid rgba(0,0,0,.06);padding-top:6px
}
body.dtf-theme.woocommerce-checkout ul.dtf-co-files li:first-child{border-top:0;padding-top:0}
body.dtf-theme.woocommerce-checkout .dtf-co-file-name{
flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.dtf-theme.woocommerce-checkout .dtf-co-file-qty{
flex:none;font-weight:600!important;color:var(--dtf-brand-dark)!important
}
/* ---------- Zahlarten: Akkordeon ----------
Ein einziger, ruhiger Block statt Kachelraster. Jede Zahlart ist eine
Zeile; die gewaehlte klappt ihr Formular darunter auf. Radio, Name und
Logos sind im WooCommerce-Markup Geschwister im — deshalb ist das
selbst die Zeile, nicht das Label. */
body.dtf-theme.woocommerce-checkout .dtf-co-pay{
margin:16px 0 0!important;padding:18px;
border:1px solid rgba(0,0,0,.10);border-radius:16px;background:#fff;
box-shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.05)
}
body.dtf-theme.woocommerce-checkout .dtf-co-pay>h3,
body.dtf-theme.woocommerce-checkout .dtf-co-pay #payment>h3{
font-family:var(--dtf-font-display);font-size:16px!important;font-weight:600!important;margin:0 0 12px!important
}
body.dtf-theme.woocommerce-checkout #payment{background:transparent!important;border-radius:0!important;padding:0!important}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods{
list-style:none!important;margin:0!important;padding:0!important;
display:flex!important;flex-direction:column!important;gap:0!important;
border:1px solid rgba(0,0,0,.10)!important;border-radius:14px!important;overflow:hidden!important;
background:#fff!important
}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method{
/* Kein gap: zwischen den Elementen stehen Leerzeichen im HTML, die im
Flex-Layout als eigene Elemente zaehlen. Der Abstand wuerde dadurch
auch VOR dem Auswahlkreis greifen und die Zeile verschieben.
Deshalb Abstand ueber margin am Radiobutton. */
display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:0!important;
margin:0!important;padding:13px 16px!important;
border:0!important;border-top:1px solid rgba(0,0,0,.07)!important;border-radius:0!important;
background:#fff!important;cursor:pointer;
transition:background .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method:first-child{border-top:0!important}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li.wc_payment_method:hover{background:#FAFBFB!important}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li.dtf-pay-open{
background:var(--dtf-brand-100)!important
}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li input.input-radio{
flex:none!important;margin:0 11px 0 0!important;width:17px;height:17px;accent-color:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li>label{
flex:1 1 auto!important;min-width:0!important;margin:0!important;cursor:pointer;
display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;
text-transform:none!important;letter-spacing:0!important;line-height:1.25!important;
font-size:14px!important;font-weight:600!important;color:var(--dtf-text)!important
}
/* Logos rechtsbuendig */
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li>label img{
max-height:20px!important;width:auto!important;margin:0!important;flex:none
}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li>label img:first-of-type{margin-left:auto!important}
/* Hinweislinks klein und in der Zeile, nicht als eigener Block */
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li>label a{
flex:none;font-size:11.5px!important;font-weight:500!important;white-space:nowrap;
color:var(--dtf-text-soft)!important;text-decoration:underline
}
/* Formular der gewaehlten Zahlart darunter */
body.dtf-theme.woocommerce-checkout #payment div.payment_box{
flex:0 0 100%!important;order:9;
margin:11px 0 2px!important;padding:14px 16px!important;
background:#fff!important;border:1px solid rgba(0,0,0,.10)!important;border-radius:11px!important;
font-size:13px!important;color:var(--dtf-text-soft)!important
}
body.dtf-theme.woocommerce-checkout #payment div.payment_box::before{display:none!important}
body.dtf-theme.woocommerce-checkout #payment div.payment_box>*{max-width:100%}
body.dtf-theme.woocommerce-checkout #payment div.payment_box p{margin:0 0 8px!important}
@media (max-width:520px){
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li>label{flex-wrap:wrap!important}
body.dtf-theme.woocommerce-checkout #payment ul.payment_methods>li>label img:first-of-type{margin-left:0!important}
}
/* ---------- Klarna-Gruppe ---------- */
body.dtf-theme.woocommerce-checkout #payment li.dtf-pay-group{
display:block!important;margin:0!important;padding:0!important;
border:0!important;border-top:1px solid rgba(0,0,0,.07)!important;background:#fff!important
}
body.dtf-theme.woocommerce-checkout #payment li.dtf-pay-group:first-child{border-top:0!important}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-head:focus{outline:none}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-head:focus-visible{
outline:2px solid var(--dtf-brand-dark);outline-offset:-2px
}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-head{
display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
background:transparent;border:0;padding:13px 16px;font-family:var(--dtf-font);
height:auto;box-sizing:border-box;
transition:background .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-head:hover{background:#FAFBFB}
body.dtf-theme.woocommerce-checkout .dtf-pay-group.is-open .dtf-pay-group-head,
body.dtf-theme.woocommerce-checkout .dtf-pay-group.dtf-pay-open .dtf-pay-group-head{
background:var(--dtf-brand-100)
}
/* Auswahlkreis wie bei den uebrigen Zahlarten */
body.dtf-theme.woocommerce-checkout .dtf-pay-group-dot{
flex:none;width:17px;height:17px;border-radius:999px;
border:1.5px solid rgba(0,0,0,.30);background:#fff;box-sizing:border-box
}
body.dtf-theme.woocommerce-checkout .dtf-pay-group.dtf-pay-open .dtf-pay-group-dot{
border-color:var(--dtf-brand-dark);box-shadow:inset 0 0 0 3.5px #fff;background:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-name{
font-size:14px;font-weight:600;color:var(--dtf-text);line-height:1.25
}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-sub{
font-size:11.5px;color:var(--dtf-text-soft);line-height:1.3
}
body.dtf-theme.woocommerce-checkout img.dtf-pay-group-logo{flex:none;max-height:20px;width:auto}
body.dtf-theme.woocommerce-checkout .dtf-pay-group-toggle{
flex:none;font-size:12.5px;font-weight:600;color:var(--dtf-brand-dark)
}
/* Untermenue */
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub[hidden]{display:none}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub{
list-style:none!important;margin:0!important;padding:0 16px 12px 44px!important;
display:flex;flex-direction:column;gap:7px;background:var(--dtf-brand-100)
}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li.wc_payment_method{
display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:0!important;
margin:0!important;padding:10px 13px!important;
border:1.5px solid rgba(0,0,0,.10)!important;border-radius:11px!important;background:#fff!important;
transition:border-color .16s var(--dtf-ease)
}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li.wc_payment_method:hover{
border-color:var(--dtf-brand-700)!important
}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li.dtf-pay-open{
border-color:var(--dtf-brand-dark)!important
}
/* Das Klarna-Logo steht schon in der Kopfzeile — in den Unterzeilen weglassen */
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li.wc_payment_method label img{display:none!important}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li.wc_payment_method > label{
flex:1 1 auto!important;min-width:0!important;margin:0!important;cursor:pointer;
display:flex!important;align-items:center!important;gap:8px!important;
font-size:13.5px!important;font-weight:500!important;color:var(--dtf-text)!important;
text-transform:none!important;letter-spacing:0!important
}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li.wc_payment_method > label a{
flex:none;font-size:11px!important;font-weight:500!important;white-space:nowrap;
color:var(--dtf-text-soft)!important
}
body.dtf-theme.woocommerce-checkout ul.dtf-pay-sub > li input.input-radio{
flex:none!important;margin:0 10px 0 0!important;width:16px;height:16px;accent-color:var(--dtf-brand-dark)
}
/* ---------- Gutschein: kompakt in der Bestelluebersicht ---------- */
body.dtf-theme.woocommerce-checkout .dtf-co-coupon{
margin:12px 0 0;padding:12px 0 0;border-top:1px solid rgba(0,0,0,.08)
}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon .woocommerce-form-coupon-toggle{margin:0!important}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon .woocommerce-info{
margin:0!important;padding:0!important;background:transparent!important;border:0!important;
font-size:13px!important;color:var(--dtf-text-soft)!important;line-height:1.4!important;
display:flex;align-items:center;gap:8px
}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon .woocommerce-info::before{
content:'\1F3F7';font-size:13px;position:static!important;margin:0!important;
color:var(--dtf-brand-dark)!important;top:auto!important;left:auto!important
}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon .woocommerce-info a{
color:var(--dtf-brand-dark)!important;font-weight:600!important;text-decoration:underline
}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon form.checkout_coupon{
margin:10px 0 0!important;padding:0!important;border:0!important;background:transparent!important;
display:flex;flex-wrap:wrap;gap:8px;align-items:center
}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon form.checkout_coupon p{margin:0!important;flex:1 1 150px}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon form.checkout_coupon .input-text{height:40px!important}
body.dtf-theme.woocommerce-checkout .dtf-co-coupon form.checkout_coupon button{
flex:none;height:40px!important;padding:0 16px!important;box-sizing:border-box!important;
background:var(--dtf-brand-600)!important;color:#14261D!important;border:0!important;
border-radius:10px!important;font-size:13.5px!important;font-weight:600!important;line-height:1!important
}
/* ---------- Express-Bezahlen im Zahlungsblock ---------- */
body.dtf-theme.woocommerce-checkout .dtf-co-express{
margin:0 0 14px!important;padding:0 0 14px!important;
border-bottom:1px solid rgba(0,0,0,.08)
}
body.dtf-theme.woocommerce-checkout .dtf-co-express .wcpay-express-checkout-wrapper__separator,
body.dtf-theme.woocommerce-checkout .dtf-co-express p{
margin:10px 0 0!important;font-size:12px!important;color:var(--dtf-text-soft)!important;text-align:center
}
body.dtf-theme.woocommerce-checkout .dtf-co-express>*{max-width:100%}
/* Rahmen und Abstaende, soweit von aussen erreichbar. Die Schaltflaechen
selbst liegen in einem iframe des Zahlungsanbieters — deren Hoehe laesst
sich nur in den Plugin-Einstellungen aendern, nicht per CSS. */
body.dtf-theme.woocommerce-checkout .dtf-co-express .StripeElement{
border-radius:12px!important;overflow:hidden;margin:0!important
}
body.dtf-theme.woocommerce-checkout .dtf-co-express p{
margin:8px 0 0!important;font-size:11.5px!important;letter-spacing:.04em;
color:var(--dtf-text-soft)!important;text-align:center
}
/* ---------- Fehlermarkierung erst nach dem Bestellversuch ----------
WooCommerce setzt .woocommerce-invalid schon beim Laden und faerbt ueber
.woocommerce-invalid #terms nur EIN Pflichtfeld rot. Beides drehen wir um:
vorher gar keine Markierung, danach einheitlich an allen Pflichtfeldern. */
body.dtf-theme.woocommerce-checkout .woocommerce-invalid #terms,
body.dtf-theme.woocommerce-checkout .woocommerce-invalid input[type=checkbox]{
outline:none!important;box-shadow:none!important
}
body.dtf-theme.woocommerce-checkout.dtf-co-geprueft .woocommerce-invalid input[type=checkbox]{
outline:2px solid #B3261E!important;outline-offset:1px!important;border-radius:3px
}
body.dtf-theme.woocommerce-checkout.dtf-co-geprueft .woocommerce-invalid .input-text,
body.dtf-theme.woocommerce-checkout.dtf-co-geprueft .woocommerce-invalid select{
border-color:#B3261E!important
}
/* ---------- Zustimmungen: Kaestchen und Text auf gleicher Hoehe ---------- */
body.dtf-theme.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox,
body.dtf-theme.woocommerce-checkout .form-row label.checkbox,
body.dtf-theme.woocommerce-checkout .german-market-checkbox-p label{
display:flex!important;align-items:flex-start!important;gap:10px!important;
margin:0!important;line-height:1.45!important;font-size:13.5px!important;
font-weight:500!important;color:var(--dtf-text)!important;
text-transform:none!important;letter-spacing:0!important
}
body.dtf-theme.woocommerce-checkout .form-row label input[type=checkbox]{
flex:none!important;width:17px;height:17px;margin:1px 0 0!important;
accent-color:var(--dtf-brand-dark)
}
body.dtf-theme.woocommerce-checkout .form-row label span{flex:1 1 auto;min-width:0}
body.dtf-theme.woocommerce-checkout .form-row label .required{
flex:none;color:#B3261E!important;text-decoration:none!important;margin-left:2px
}
body.dtf-theme.woocommerce-checkout .form-row.validate-required,
body.dtf-theme.woocommerce-checkout .german-market-checkbox-p{margin:0 0 10px!important}
body.dtf-theme.woocommerce-checkout .dtf-pay-hint{
margin:0 0 10px!important;padding:10px 13px!important;
background:var(--dtf-brand-100)!important;border:1px solid rgba(95,153,124,.25)!important;
border-radius:11px!important;font-size:13px!important;color:var(--dtf-brand-dark)!important;font-weight:500!important
}
body.dtf-theme.woocommerce-checkout #payment .form-row.place-order{
margin:16px 0 0!important;padding:0!important
}
/* --- Zustimmungen und Bestellbutton --- */
body.dtf-theme.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
margin:14px 0 0!important;font-size:13px!important
}
body.dtf-theme.woocommerce-checkout .woocommerce-terms-and-conditions{
max-height:150px!important;overflow:auto!important;
border:1px solid rgba(0,0,0,.10)!important;border-radius:11px!important;
padding:12px 14px!important;background:#FAFBFB!important;
font-size:12px!important;line-height:1.55!important;color:var(--dtf-text-soft)!important
}
body.dtf-theme.woocommerce-checkout .woocommerce-terms-and-conditions h3{font-size:13px!important;margin:10px 0 4px!important}
body.dtf-theme.woocommerce-checkout #place_order{
width:100%!important;margin:14px 0 0!important;
background:var(--dtf-brand-600)!important;color:#14261D!important;
font-family:var(--dtf-font)!important;font-weight:600!important;font-size:15.5px!important;
/* .dtf-theme .button setzt height:50px bei box-sizing:content-box */
height:auto!important;box-sizing:border-box!important;line-height:1.2!important;
padding:15px 24px!important;border-radius:999px!important;border:0!important
}
body.dtf-theme.woocommerce-checkout #place_order:hover{background:var(--dtf-brand-700)!important}
@media (max-width:999px){
body.dtf-theme.woocommerce-checkout #order_review{margin-top:16px}
}
/* ================================================ LAUFMETER: MENGENFELD AUSBLENDEN
Auf Produktseiten mit Datei-Upload steuert die Summe der Bahnen die Menge.
Das WooCommerce-Mengenfeld daneben verwirrt nur — es hat aber Funktion und
darf deshalb nicht entfernt werden.
Kein display:none, sondern optisch ausgeblendet: das Feld bleibt im
Formular, behaelt seinen Wert und wird weiter mitgesendet. Die Regel
greift ueber :has() nur dort, wo tatsaechlich ein Upload-Feld im
Formular sitzt — andere Produkte behalten ihr Mengenfeld. */
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .quantity{
position:absolute!important;width:1px!important;height:1px!important;
padding:0!important;margin:-1px!important;border:0!important;
overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important
}
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload){gap:0!important}
/* ---------- Einheitliche Breite auf der Laufmeter-Produktseite ----------
Alles richtet sich an den beiden Auswahlkarten oben aus (Container
.dtf-paths, 653 px): die zwei Optionskarten teilen sich diese Breite
je zur Haelfte, Upload und Warenkorb-Button nehmen sie voll ein. */
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .wc-dnd-file-upload,
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) button.single_add_to_cart_button{
flex:0 0 auto!important;width:100%!important;max-width:none!important;
margin-left:0!important;margin-right:0!important;box-sizing:border-box!important
}
/* Die Zusatzoptionen nebeneinander. Das Optionen-Plugin setzt auf mehreren
Ebenen max-width:520px — die werden hier aufgehoben. */
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tc-cell,
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tc-container,
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tc-row,
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tc-element-inner-wrap{
max-width:none!important;width:100%!important
}
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tmcp-ul-wrap{
display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:13px!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important
}
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tmcp-field-wrap{
width:100%!important;max-width:none!important;margin:0!important;
padding:9px 12px!important;gap:7px!important
}
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options label.tm-epo-field-label{
font-size:13px!important;gap:8px!important;line-height:1.25!important
}
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tmcp-field-wrap>.tc-price-wrap{
font-size:13px!important
}
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tmcp-field-wrap>.tm-tooltip,
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tmcp-field-wrap>.tc-tooltip{
width:18px!important;height:18px!important;font-size:11px!important;line-height:18px!important
}
@media (max-width:560px){
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) .tm-extra-product-options .tmcp-ul-wrap{
grid-template-columns:1fr!important
}
}
/* Luft zwischen Upload-Bereich und Warenkorb-Button. Ueber margin statt gap:
das ausgeblendete Mengenfeld ist absolut positioniert und nimmt am
Flex-Fluss nicht teil — ein gap wuerde deshalb nicht zuverlaessig greifen. */
body.dtf-theme.single-product form.cart:has(.wc-dnd-file-upload) button.single_add_to_cart_button{
margin-top:20px!important
}
body.dtf-theme.single-product .tm-extra-product-options .tmcp-ul-wrap{
margin-left:0!important;padding-left:0!important
}
body.dtf-theme.single-product .tm-extra-product-options .tmcp-field-wrap{
margin-left:0!important;width:100%!important;box-sizing:border-box!important
}
/* ================================================ STAFFELPREISE (Variante H)
Links der aktuell gueltige Preis, rechts die uebrigen Stufen. Die
Originaldarstellung des Plugins bleibt als Datenquelle im DOM und wird
erst ausgeblendet, wenn unsere Fassung tatsaechlich aufgebaut wurde. */
body.dtf-theme.dtf-tiers-on .tiered-pricing-blocks{display:none!important}
body.dtf-theme .dtf-tiers{
display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;align-items:stretch;
max-width:520px;margin:0
}
body.dtf-theme .dtf-tiers-now{
border:1.5px solid var(--dtf-brand-dark);background:var(--dtf-brand-100);
border-radius:13px;padding:14px;display:flex;flex-direction:column;justify-content:center
}
body.dtf-theme .dtf-tiers-lbl{
font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
color:var(--dtf-brand-dark);font-weight:700
}
body.dtf-theme .dtf-tiers-pr{
font-family:var(--dtf-font-display);font-size:26px;font-weight:700;
color:var(--dtf-brand-dark);line-height:1.1;margin-top:3px
}
body.dtf-theme .dtf-tiers-qt{font-size:12px;color:var(--dtf-brand-dark);margin-top:2px}
body.dtf-theme .dtf-tiers-rest{
border:1.5px solid rgba(0,0,0,.10);border-radius:13px;overflow:hidden;background:#fff
}
body.dtf-theme .dtf-tiers-row{
display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:12.5px;
border-top:1px solid rgba(0,0,0,.06)
}
body.dtf-theme .dtf-tiers-row:first-child{border-top:0}
body.dtf-theme .dtf-tiers-row.is-past{opacity:.5}
body.dtf-theme .dtf-tiers-row-qt{flex:1 1 auto;min-width:0;color:var(--dtf-text-soft)}
body.dtf-theme .dtf-tiers-row-sv{
flex:none;font-size:10.5px;font-weight:700;color:var(--dtf-brand-dark);
background:var(--dtf-brand-100);padding:2px 7px;border-radius:999px
}
body.dtf-theme .dtf-tiers-row-pr{
flex:none;width:62px;text-align:right;
font-family:var(--dtf-font-display);font-weight:700;font-size:13px;color:var(--dtf-text)
}
body.dtf-theme .dtf-tiers-next{
grid-column:1 / -1;margin:0!important;padding:10px 12px;
background:var(--dtf-brand-100);border:1px solid rgba(95,153,124,.25);
border-radius:11px;font-size:13px!important;color:var(--dtf-brand-dark)!important
}
body.dtf-theme .dtf-tiers-next b{font-weight:700}
@media (max-width:560px){
body.dtf-theme .dtf-tiers{grid-template-columns:1fr}
}
/* Optionen ohne Aufpreis: "€ 0,00" wird ausgeblendet, der Wert bleibt im
Plugin erhalten. Wird per Skript markiert, weil CSS keinen Textinhalt
pruefen kann. */
body.dtf-theme.single-product .tm-extra-product-options .dtf-preis-null{display:none!important}
/* ================================================ KATEGORIE- UND SHOP-SEITEN
Die Buttons in den Produktkacheln standen auf Weiss auf Salbeigruen —
ein Kontrastverhaeltnis von 1,69:1, also faktisch unlesbar. Mit dunklem
Text sind es 9,37:1. Ausserdem erzwang die alte Regel .dtf-theme .button
eine feste Hoehe von 50 px bei box-sizing:content-box. */
body.dtf-theme ul.products li.product a.button,
body.dtf-theme ul.products li.product button.button{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
width:100%!important;box-sizing:border-box!important;height:auto!important;
padding:13px 22px!important;border-radius:999px!important;border:0!important;
background:var(--dtf-brand-600)!important;color:#14261D!important;
font-family:var(--dtf-font)!important;font-size:15px!important;font-weight:600!important;
line-height:1.2!important;margin:12px 0 0!important;text-align:center;
transition:background .18s var(--dtf-ease)
}
body.dtf-theme ul.products li.product a.button:hover,
body.dtf-theme ul.products li.product button.button:hover{
background:var(--dtf-brand-700)!important
}
body.dtf-theme ul.products li.product a.button:focus-visible,
body.dtf-theme ul.products li.product button.button:focus-visible{
outline:2px solid var(--dtf-brand-dark)!important;outline-offset:2px
}
/* "Wurde hinzugefuegt"-Link nach dem Klick dezent halten */
body.dtf-theme ul.products li.product a.added_to_cart{
display:inline-block;margin:8px 0 0;font-size:13px;font-weight:600;
color:var(--dtf-brand-dark)!important;text-decoration:underline
}
/* ================================================ PRODUKTLISTE ALS ZEILEN (Entwurf B)
Bild links, Beschreibung mittig, Preis und Button rechts.
Greift erst, wenn das Skript alle Zeilen aufgebaut hat (Body-Klasse) —
sonst bliebe eine Mischung aus altem und neuem Layout stehen. */
body.dtf-theme.dtf-loop-rows ul.products{
display:flex!important;flex-direction:column!important;gap:14px!important
}
body.dtf-theme.dtf-loop-rows ul.products li.product{
padding:14px!important;text-align:left!important;border-radius:18px;
border:1px solid rgba(0,0,0,.06);background:#fff;
transition:box-shadow .25s var(--dtf-ease)
}
body.dtf-theme.dtf-loop-rows ul.products li.product:hover{
transform:none!important;box-shadow:0 1px 2px rgba(16,24,32,.04),0 10px 30px rgba(16,24,32,.06)
}
body.dtf-theme.dtf-loop-rows .dtf-row-hide{display:none!important}
body.dtf-theme .dtf-row{
display:grid;grid-template-columns:200px minmax(0,1fr) 200px;
gap:20px;align-items:center
}
body.dtf-theme .dtf-row-img{display:block;border-radius:12px;overflow:hidden;line-height:0}
body.dtf-theme .dtf-row-img img{
width:100%!important;height:auto!important;aspect-ratio:4/3;
/* Bilder beschneiden statt verzerren — der Standard stand auf fill. */
object-fit:cover!important;border-radius:12px!important;margin:0!important;display:block
}
body.dtf-theme .dtf-row-main{min-width:0}
body.dtf-theme .dtf-row-main .dtf-loop-cat{margin-bottom:2px}
body.dtf-theme a.dtf-row-title{
display:block;font-family:var(--dtf-font-display);font-size:20px;font-weight:700;
letter-spacing:-.4px;color:var(--dtf-text)!important;text-decoration:none;margin:2px 0 5px
}
body.dtf-theme a.dtf-row-title:hover{color:var(--dtf-brand-dark)!important}
body.dtf-theme .dtf-loop-excerpt{
margin:0!important;font-size:13.5px!important;line-height:1.5!important;
color:var(--dtf-text-soft)!important;max-width:62ch
}
body.dtf-theme .dtf-row-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
body.dtf-theme .dtf-row-side .price{
font-family:var(--dtf-font-display)!important;font-size:22px!important;font-weight:700!important;
margin:0!important;color:var(--dtf-text)!important
}
body.dtf-theme .dtf-row-meta{
font-size:11.5px;color:var(--dtf-text-soft);margin:3px 0 10px;line-height:1.45;max-width:22ch
}
body.dtf-theme.dtf-loop-rows ul.products li.product .dtf-row-side a.button,
body.dtf-theme.dtf-loop-rows ul.products li.product .dtf-row-side button.button{
width:auto!important;margin:0!important;padding:11px 20px!important;white-space:nowrap
}
@media (max-width:860px){
body.dtf-theme .dtf-row{grid-template-columns:120px minmax(0,1fr);gap:14px}
body.dtf-theme .dtf-row-side{
grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
text-align:left;gap:12px;flex-wrap:wrap
}
body.dtf-theme .dtf-row-meta{margin:0;max-width:none;flex:1 1 100%;order:3}
}
/* Luft zwischen Produktliste und Footer — der Abstand betrug nur 8 px.
Auf Archivseiten sitzt der Footer direkt am Listenende, weil kein
weiterer Inhalt folgt. */
body.dtf-theme.woocommerce ul.products{margin-bottom:64px!important}
@media (max-width:700px){
body.dtf-theme.woocommerce ul.products{margin-bottom:40px!important}
}