/* Theme Name: JR Shop Austria Description: Custom-Theme für Japan Racing Shop Austria (Vertrieb: StreetMarkers Customs e.U.). Dunkles Schwarz/Weiß/Rot/Grau-Design nach freigegebenem Prototyp v3. Version: 1.2.29 Author: StreetMarkers Customs e.U. Text Domain: jrshop */ :root{ --black: #0d0d0e; --panel: #17171a; --panel-2: #1e1e22; --steel: #9a9da3; --steel-light: #d2d5da; --white: #f4f4f6; --red: #e01b24; --red-bright: #ff3b44; --line: rgba(255,255,255,0.09); --radius: 3px; } *{box-sizing:border-box; margin:0; padding:0;} html,body{background:var(--black); color:var(--white); font-family:'Work Sans', sans-serif; -webkit-font-smoothing:antialiased;} h1,h2,h3{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em;} .mono{font-family:'JetBrains Mono', monospace;} a{color:inherit; text-decoration:none;} img{max-width:100%; height:auto;} button, input, select, textarea{font-family:inherit;} /* ---- topbar ---- */ .topbar{display:flex; align-items:center; justify-content:space-between; padding:5px 40px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(13,13,14,0.95); backdrop-filter:blur(8px); z-index:50;} .logo{display:flex; align-items:center; gap:14px;} .logo .jr-mark{height:36px; width:auto; display:block;} .logo-text{display:flex; flex-direction:column; line-height:1.1;} .logo .l1{font-family:'Oswald',sans-serif; font-weight:700; font-size:26px; letter-spacing:0.05em; text-transform:uppercase;} .logo .l1 em{font-style:normal; color:var(--red-bright);} .logo .l2{color:var(--steel); font-size:15px; font-family:'JetBrains Mono',monospace; letter-spacing:0.09em; margin-top:2px; text-transform:uppercase;} .nav{display:flex; font-size:17px; font-weight:500; color:var(--steel-light);} .nav ul{display:flex; gap:10px; list-style:none;} .nav a{display:inline-block; padding:9px 18px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,0.02); transition:color .18s, border-color .18s, background .18s;} .nav a:hover{color:var(--white); border-color:var(--red-bright); background:rgba(224,27,36,0.13);} .nav .current-menu-item a, .nav .current_page_item a{color:var(--white); border-color:rgba(224,27,36,0.55);} /* Dropdown (z.B. „Konfigurator") — Desktop: Untermenü bei Hover */ .nav li{position:relative;} .nav .menu-item-has-children > a::after{content:'\25BE'; margin-left:7px; font-size:0.78em; opacity:0.75;} .nav .sub-menu{position:absolute; top:calc(100% + 6px); left:0; min-width:212px; display:none; flex-direction:column; gap:6px; margin:0; padding:8px; list-style:none; background:rgba(20,20,22,0.98); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 30px rgba(0,0,0,0.42); z-index:60;} .nav li.open > .sub-menu{display:flex;} /* Hover NUR auf echten Zeigegeräten — auf Touch (iOS) würde „erster Tipp = Hover" den Tap-Toggle stören */ @media(hover:hover){.nav li.menu-item-has-children:hover > .sub-menu{display:flex;}} .nav .sub-menu a{display:block; white-space:nowrap;} .topbar-right{display:flex; align-items:center; gap:14px;} /* Höhere Spezifität nötig, um WooCommerce's globales ".woocommerce img{height:auto}" auf Shop-/Produktseiten zu schlagen (dort trägt die Klasse "woocommerce"). */ .topbar-right .sm-logo{height:42px; width:42px; display:block;} .cart-btn{position:relative; background:rgba(255,255,255,0.02); border:1px solid var(--line); color:var(--white); padding:10px 14px; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; gap:8px; transition:color .18s, border-color .18s, background .18s;} .cart-btn svg{width:24px; height:24px; display:block;} .cart-btn:hover{border-color:var(--red-bright); background:rgba(224,27,36,0.13); color:var(--white);} .cart-count{background:var(--red); color:#fff; font-size:12px; font-weight:700; border-radius:50%; min-width:21px; height:21px; padding:0 3px; display:flex; align-items:center; justify-content:center;} /* ---- hero ---- */ .hero{padding:80px 40px 60px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; overflow:hidden; background: radial-gradient(ellipse 900px 420px at 80% 115%, rgba(224,27,36,0.10), transparent 60%), radial-gradient(ellipse 700px 300px at 5% -15%, rgba(255,255,255,0.04), transparent 60%);} .hero-eyebrow{font-family:'JetBrains Mono',monospace; color:var(--red-bright); font-size:14px; letter-spacing:0.2em; margin-bottom:18px;} .hero h1{font-size:56px; line-height:1.02; margin-bottom:22px;} .hero h1 em{font-style:normal; color:var(--red-bright);} .hero p{color:var(--steel-light); font-size:18px; line-height:1.6; max-width:460px; margin-bottom:32px;} .btn-primary{display:inline-block; background:var(--red); color:#fff; border:none; padding:15px 30px; font-weight:600; font-size:16px; letter-spacing:0.03em; border-radius:var(--radius); cursor:pointer; text-transform:uppercase;} .btn-primary:hover{background:var(--red-bright); color:#fff;} .btn-ghost{display:inline-block; background:none; border:1px solid var(--line); color:var(--white); padding:15px 26px; font-size:16px; border-radius:var(--radius); cursor:pointer; margin-left:12px;} .btn-ghost:hover{border-color:var(--steel);} /* signature spec plate */ .spec-plate{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:28px; position:relative;} .spec-plate::before{content:'FITMENT DATA'; position:absolute; top:-11px; left:20px; background:var(--black); padding:0 10px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.15em; color:var(--steel);} /* hero image: freigestellter BMW 3er (JR36) — steht direkt auf dem Seiten-Schwarz */ .hero-visual{position:relative;} .hero-visual img{display:block; width:112%; max-width:none; margin-left:-6%; height:auto; filter:drop-shadow(0 26px 50px rgba(0,0,0,0.65));} .hero-visual-tag{position:absolute; bottom:2px; left:14px; z-index:2; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.15em; color:var(--steel); padding:6px 0;} .hero-visual-tag b{color:var(--red-bright); font-weight:700;} .spec-rows{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px;} .spec-row .k{font-size:13px; color:var(--steel); font-family:'JetBrains Mono',monospace; letter-spacing:0.08em; margin-bottom:3px;} .spec-row .v{font-family:'JetBrains Mono',monospace; font-size:17px; color:var(--white); font-weight:500;} /* ---- finder ---- */ .finder{margin:0 40px 10px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:22px 26px; display:grid; grid-template-columns:auto 1fr 1fr 1fr 1fr auto; gap:18px; align-items:end; position:relative;} .front-finder{transform:translateY(-6px); margin-bottom:0;} .finder::before{content:'FELGEN-FINDER'; position:absolute; top:-11px; left:20px; background:var(--black); padding:0 10px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.15em; color:var(--red-bright);} .finder .f-label{font-size:13px; color:var(--steel); font-family:'JetBrains Mono',monospace; letter-spacing:0.08em; margin-bottom:7px; text-transform:uppercase;} .finder select{width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:11px 12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:15px;} .finder .f-title{font-family:'Oswald',sans-serif; font-size:19px; text-transform:uppercase; padding-bottom:8px; letter-spacing:0.04em; max-width:150px; line-height:1.25;} .finder .btn-primary{padding:12px 26px;} /* Generischer Filter-Bereich für Nicht-Felgen-Kategorien (z.B. Zubehör). Nimmt WooCommerce-Standard-Widgets auf (Design → Widgets → Bereich "Shop-Filter"), z.B. "Filter nach Attribut". */ .shop-filters{margin:34px 40px 14px;} .acc-filter{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:22px 26px; display:flex; flex-wrap:wrap; gap:18px 22px; align-items:flex-end;} .acc-filter::before{content:'ZUBEHÖR-FILTER'; position:absolute; top:-11px; left:20px; background:var(--black); padding:0 10px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.15em; color:var(--red-bright);} .shop-filter-widget{flex:1 1 160px; min-width:160px; max-width:230px;} .shop-filter-widget .f-label{font-size:13px; color:var(--steel); font-family:'JetBrains Mono',monospace; letter-spacing:0.08em; margin-bottom:8px; text-transform:uppercase;} .shop-filter-widget select{width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:11px 10px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:15px; transition:border-color .18s;} .shop-filter-widget select:hover, .shop-filter-widget select:focus{border-color:var(--steel); outline:none;} .acc-filter-actions{display:flex; flex-direction:row; align-items:center; gap:14px; flex:0 0 auto; min-width:0; max-width:none; margin-left:auto;} .acc-filter .btn-primary{padding:11px 26px;} .acc-filter-reset{color:var(--steel); font-size:14px; text-decoration:none; text-align:center; font-family:'JetBrains Mono',monospace;} .acc-filter-reset:hover{color:var(--white);} /* Kategorie-Kacheln (Zubehör-Übersicht): Name groß und zentriert unter dem Bild, Produktzähler dezent in Mono darunter (statt gelb markiertem "(82)") */ .woocommerce ul.products li.product-category h2{text-align:center; font-family:'Oswald',sans-serif; font-size:22px; letter-spacing:0.04em; color:var(--white); padding:18px 14px 22px; text-transform:uppercase;} .woocommerce .product-category .woocommerce-loop-category__title mark, .woocommerce .product-category h2 mark{display:block; background:none; color:var(--steel); font-weight:400; font-family:'JetBrains Mono',monospace; font-size:13.5px; letter-spacing:0.1em; margin-top:6px;} /* ---- sections ---- */ .section{padding:70px 40px;} .section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:30px;} .section-head h2{font-size:30px;} .section-head h2 span{color:var(--red-bright);} .section-head a{color:var(--steel); font-size:15px; font-family:'JetBrains Mono',monospace;} .section-head a:hover{color:var(--white);} .model-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;} .model-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:26px 22px 22px; text-align:center; transition:transform .18s, border-color .18s; display:block;} .model-card:hover{transform:translateY(-3px); border-color:var(--red);} .model-card img{width:70%; aspect-ratio:1; object-fit:contain; margin:0 auto 18px; display:block;} .model-name{font-family:'Oswald',sans-serif; font-size:22px; margin-bottom:5px; text-transform:uppercase;} .model-sizes{font-size:13.5px; color:var(--steel); font-family:'JetBrains Mono',monospace; margin-bottom:10px;} .model-price{font-size:15px; color:var(--steel-light);} .model-price b{color:var(--red-bright); font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:0.02em;} /* ---- usp ---- */ .usp{margin:0 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px;} .usp-item .u-icon{font-family:'JetBrains Mono',monospace; color:var(--red-bright); font-size:14px; letter-spacing:0.18em; margin-bottom:10px;} .usp-item h3{font-size:19px; margin-bottom:8px;} .usp-item p{color:var(--steel-light); font-size:16px; line-height:1.55;} /* ================================================================== WooCommerce: Produktraster (Shop, Archive, Front-Page-Loop) ================================================================== */ .woocommerce ul.products{display:grid !important; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0;} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none;} .woocommerce ul.products li.product{width:auto !important; float:none !important; margin:0 !important; padding:0 !important; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:transform .18s, border-color .18s; display:flex; flex-direction:column;} .woocommerce ul.products li.product:hover{transform:translateY(-3px); border-color:var(--steel);} .woocommerce ul.products li.product a img{margin:0; aspect-ratio:1; object-fit:contain; background:radial-gradient(circle at 50% 40%, #29292e, #17171a); padding:14px;} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:'Oswald',sans-serif; font-size:26px; letter-spacing:0.02em; color:var(--white); padding:14px 16px 2px; text-transform:none;} .jr-loop-specs{display:flex; gap:12px; padding:6px 16px 0; font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--steel-light); flex-wrap:wrap;} .woocommerce ul.products li.product .price{color:var(--white) !important; font-family:'Oswald',sans-serif; font-size:20px; font-weight:600; padding:10px 16px 0;} .woocommerce ul.products li.product .price del{color:var(--steel) !important; font-size:15px;} .woocommerce ul.products li.product .price ins{text-decoration:none;} .per-wheel{display:block; font-size:14px; color:var(--steel); font-family:'Work Sans',sans-serif; font-weight:400; margin-top:1px; text-transform:none; letter-spacing:0;} .woocommerce-price-suffix{display:block; font-size:14px; color:var(--steel); font-family:'Work Sans',sans-serif; font-weight:400; margin-top:1px; text-transform:none; letter-spacing:0;} .woocommerce-price-suffix a{color:var(--steel); text-decoration:underline;} .jr-loop-meta{display:flex; justify-content:space-between; align-items:center; padding:8px 16px 0;} .stock-dot{width:7px; height:7px; border-radius:50%; background:#4caf6d; display:inline-block; margin-right:6px;} .stock-dot.out{background:var(--red);} .stock-label{font-size:14px; color:var(--steel-light); display:flex; align-items:center;} .badge-ttg{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; color:var(--steel-light); border:1px solid var(--line); padding:3px 8px; border-radius:var(--radius);} .woocommerce ul.products li.product .button{margin:12px 16px 16px; background:none; border:1px solid var(--line); color:var(--white); padding:10px; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; border-radius:var(--radius); text-align:center; font-weight:500;} .woocommerce ul.products li.product .button:hover{background:var(--red); border-color:var(--red); color:#fff;} .woocommerce span.onsale{background:var(--red); color:#fff; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:13px; min-height:auto; min-width:auto; padding:4px 9px; line-height:1.4; top:10px; left:10px;} /* Shop-Kopf (Titel, Sortierung, Ergebnis-Zähler) */ .shop-wrap{padding:40px 40px 90px;} /* Kategorie-Titel (h1.page-title, direkt in .shop-wrap — WooCommerce rendert hier keinen products-header-Wrapper): Mono-Kicker + Trennlinie zum Raster */ .shop-wrap h1.page-title, .woocommerce-products-header__title{font-size:40px; line-height:1.05; margin:4px 0 30px; padding-bottom:20px; border-bottom:1px solid var(--line);} .shop-wrap h1.page-title::before, .woocommerce-products-header__title::before{content:'KATEGORIE'; display:block; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.2em; color:var(--red-bright); margin-bottom:8px;} .woocommerce .woocommerce-result-count{color:var(--steel); font-size:15px; font-family:'JetBrains Mono',monospace; float:none; margin:0;} .woocommerce .woocommerce-ordering{float:none; margin:0;} .woocommerce .woocommerce-ordering select{background:var(--panel); border:1px solid var(--line); color:var(--white); padding:9px 12px; border-radius:var(--radius); font-size:15px;} .shop-toolbar{display:flex; justify-content:space-between; align-items:center; margin:18px 0 24px; gap:16px; flex-wrap:wrap;} .woocommerce .woocommerce-breadcrumb{color:var(--steel); font-size:14px; font-family:'JetBrains Mono',monospace; margin-bottom:16px;} .woocommerce .woocommerce-breadcrumb a{color:var(--steel-light);} .woocommerce nav.woocommerce-pagination{margin-top:36px;} .woocommerce nav.woocommerce-pagination ul{border:none; display:flex; gap:8px; justify-content:center;} .woocommerce nav.woocommerce-pagination ul li{border:none;} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{background:var(--panel); border:1px solid var(--line); color:var(--steel-light); border-radius:var(--radius); padding:10px 15px; line-height:1;} .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--red); border-color:var(--red); color:#fff;} /* ================================================================== WooCommerce: Produkt-Einzelseite ================================================================== */ .woocommerce div.product{color:var(--white);} /* Produktbild ca. 20% kleiner als WooCommerce-Standard (48%/48%) — Textspalte gleicht den Platz aus. */ .woocommerce div.product div.images{width:38%;} .woocommerce div.product div.summary{width:58%;} .woocommerce div.product div.images img{background:radial-gradient(circle at 50% 40%, #29292e, #17171a); border:1px solid var(--line); border-radius:6px; padding:20px;} .woocommerce div.product .product_title{font-size:34px; margin-bottom:10px;} .woocommerce div.product p.price{color:var(--white); font-family:'Oswald',sans-serif; font-size:30px;} .woocommerce div.product p.price del{color:var(--steel);} .woocommerce div.product p.price ins{text-decoration:none;} .jr-single-specs{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0;} .jr-spec-chip{font-family:'JetBrains Mono',monospace; font-size:13.5px; letter-spacing:0.05em; color:var(--steel-light); border:1px solid var(--line); background:var(--panel); padding:7px 12px; border-radius:var(--radius);} .jr-spec-chip b{color:var(--white); font-weight:500;} .woocommerce div.product form.cart{margin:22px 0;} /* Varianten-Dropdowns (Modell-Konfigurator) */ .woocommerce div.product form.cart .variations{margin-bottom:8px; border:1px solid var(--line); border-radius:6px; background:var(--panel); padding:18px 20px 10px;} .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th{border:none; padding:0 0 12px; line-height:1.4; vertical-align:middle;} .woocommerce div.product form.cart .variations label{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; color:var(--steel); text-transform:uppercase;} .woocommerce div.product form.cart .variations select{width:100%; max-width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:11px 12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:15px; margin-right:0;} .woocommerce div.product form.cart .reset_variations{font-size:13.5px; color:var(--steel); font-family:'JetBrains Mono',monospace;} .woocommerce div.product form.cart .reset_variations:hover{color:var(--red-bright);} .woocommerce-variation.single_variation{margin-bottom:14px;} .woocommerce-variation-price .price{font-family:'Oswald',sans-serif; font-size:28px; color:var(--white);} .woocommerce-variation-availability{font-size:15px; margin-top:4px;} .jr-variation-extra{display:block; margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--steel); letter-spacing:0.04em;} #jr-wunsch-fields{border:1px solid rgba(224,27,36,0.4); border-radius:6px; background:var(--panel); padding:16px 18px; margin-bottom:16px;} .jr-wunsch-info{font-size:15px; color:var(--steel-light); margin-bottom:12px;} .jr-wunsch-info b{color:var(--red-bright);} .jr-wunsch-row{margin-bottom:10px;} .jr-wunsch-row label{display:block; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; color:var(--steel); text-transform:uppercase; margin-bottom:5px;} .jr-wunsch-row select{width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:11px 12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:15px;} .jr-wunsch-row select:disabled{opacity:0.45;} .jr-wunsch-wait{font-size:14px; color:var(--steel); margin-top:6px; font-family:'Work Sans',sans-serif;} .woocommerce div.product .woocommerce-variation-availability .stock{font-family:'JetBrains Mono',monospace; font-size:14px;} .woocommerce-variation-description p{color:var(--steel-light); font-size:15px;} /* Farbauswahl als Bild-Kacheln statt Dropdown */ .jr-native-select-hidden{display:none;} .jr-color-swatches{display:flex; flex-wrap:wrap; gap:10px;} .jr-color-swatch{display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; background:var(--black); border:1px solid var(--line); border-radius:6px; padding:8px 6px 10px; cursor:pointer; transition:border-color .15s;} .jr-color-swatch:hover{border-color:var(--steel);} .jr-color-swatch img{width:52px; height:52px; object-fit:contain; border-radius:4px; background:radial-gradient(circle at 50% 40%, #29292e, #17171a);} .jr-color-swatch span{font-size:12.5px; color:var(--steel-light); text-align:center; line-height:1.25; font-family:'JetBrains Mono',monospace;} .jr-color-swatch.jr-color-swatch-active{border-color:var(--red); background:rgba(224,27,36,0.08);} .jr-color-swatch.jr-color-swatch-active span{color:var(--white);} /* Hinweis auf noch fehlende Auswahl (v.a. Farbe) + Kachel-Hervorhebung */ .jr-auswahl-hinweis{margin:14px 0 4px; padding:11px 15px; background:rgba(224,27,36,0.08); border:1px solid rgba(224,27,36,0.4); border-radius:var(--radius); color:var(--white); font-size:16px; line-height:1.5;} .jr-auswahl-hinweis b{color:var(--red-bright); font-weight:600;} .jr-color-swatches.jr-needs-choice{position:relative; padding:8px; margin:-8px; border:1px dashed rgba(224,27,36,0.55); border-radius:8px; animation:jr-needs-pulse 1.6s ease-in-out infinite;} @keyframes jr-needs-pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,27,36,0.28);}50%{box-shadow:0 0 0 5px rgba(224,27,36,0);}} /* 4-Felgen-Grenze: Sofort-Popup auf der Produktseite */ .jr-felgen-popup{display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.72); align-items:center; justify-content:center; padding:20px;} .jr-felgen-popup.is-open{display:flex;} .jr-felgen-popup-box{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--radius); max-width:440px; width:100%; padding:28px 28px 24px; box-shadow:0 24px 60px rgba(0,0,0,0.6);} .jr-felgen-popup-box h3{font-family:'Oswald',sans-serif; font-size:22px; text-transform:uppercase; letter-spacing:0.04em; color:var(--white); margin:0 0 12px;} .jr-felgen-popup-box p{color:var(--steel-light); font-size:16.5px; line-height:1.6; margin:0 0 20px;} .jr-felgen-popup-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap;} .jr-felgen-popup-cart{color:var(--red-bright); font-size:16px;} .jr-felgen-popup-cart:hover{color:var(--white);} .woocommerce div.product form.cart div.quantity .qty{background:var(--panel); border:1px solid var(--line); color:var(--white); border-radius:var(--radius); padding:11px 6px; width:70px;} .woocommerce div.product form.cart .button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{ background:var(--red); color:#fff; border-radius:var(--radius); text-transform:uppercase; font-weight:600; letter-spacing:0.03em; padding:14px 28px;} .woocommerce div.product form.cart .button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{background:var(--red-bright); color:#fff;} .jr-gutachten-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); color:var(--steel-light); font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.06em; padding:11px 16px; border-radius:var(--radius); margin-top:6px;} .jr-gutachten-btn:hover{border-color:var(--red); color:var(--white);} .woocommerce div.product .product_meta{color:var(--steel); font-size:14.5px; margin-top:18px;} .woocommerce div.product .product_meta a{color:var(--steel-light);} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 -1px;} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--line);} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0;} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--steel-light);} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--panel-2);} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--white);} .woocommerce div.product .woocommerce-tabs .panel{background:var(--panel); border:1px solid var(--line); border-radius:0 6px 6px 6px; padding:24px;} .woocommerce table.woocommerce-product-attributes{border:none;} .woocommerce table.woocommerce-product-attributes th, .woocommerce table.woocommerce-product-attributes td{border-color:var(--line) !important; color:var(--steel-light); background:none !important; font-style:normal;} .woocommerce table.woocommerce-product-attributes th{color:var(--steel); font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.05em; text-transform:uppercase;} .woocommerce .related.products > h2, .woocommerce .upsells.products > h2{font-size:26px; margin:50px 0 24px;} .woocommerce .stock.in-stock{color:#4caf6d;} .woocommerce .stock.out-of-stock{color:var(--red-bright);} /* ================================================================== WooCommerce: Warenkorb / Kasse / Konto / Formulare / Hinweise ================================================================== */ .woocommerce table.shop_table{border:1px solid var(--line); border-radius:6px; background:var(--panel);} .woocommerce table.shop_table th, .woocommerce table.shop_table td{border-color:var(--line) !important; color:var(--steel-light);} .woocommerce table.shop_table th{color:var(--steel); font-family:'JetBrains Mono',monospace; font-size:14px; text-transform:uppercase; letter-spacing:0.05em;} .woocommerce table.shop_table td a{color:var(--white);} .woocommerce .cart_totals h2, .woocommerce-checkout h3{font-size:22px;} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce form .form-row .select2-selection{background:var(--panel); border:1px solid var(--line); color:var(--white); border-radius:var(--radius); padding:11px 12px;} .woocommerce form .form-row label{color:var(--steel-light); font-size:15px;} .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button{ background:var(--panel-2); color:var(--white); border:1px solid var(--line); border-radius:var(--radius);} .woocommerce .button:hover, .woocommerce button.button:hover{background:var(--red); border-color:var(--red); color:#fff;} .woocommerce-message, .woocommerce-info, .woocommerce-error{background:var(--panel); color:var(--steel-light); border-top-color:var(--red);} .woocommerce-message::before, .woocommerce-info::before{color:var(--red-bright);} .woocommerce-error::before{color:var(--red-bright);} .woocommerce-message a.button, .woocommerce-info a.button{background:var(--red); color:#fff; border:none;} /* WooCommerce Block-basierte Cart/Checkout (dunkel einfärben, best effort) */ .wc-block-components-sidebar-layout, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{color:var(--steel-light);} .wc-block-components-panel, .wc-block-cart-items, .wc-block-components-totals-wrapper{border-color:var(--line);} /* ---- Gutachten-Suche ---- */ .gutachten-finder{margin-bottom:50px; transform:none; grid-template-columns:repeat(6,1fr);} .jr-gutachten-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px;} .jr-gutachten-table{width:100%; border-collapse:collapse; background:var(--panel); font-size:15.5px;} .jr-gutachten-table th{text-align:left; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap;} .jr-gutachten-table td{padding:12px 16px; border-bottom:1px solid var(--line); color:var(--steel-light); white-space:nowrap;} .jr-gutachten-table td.mono{font-family:'JetBrains Mono',monospace; font-size:14.5px;} .jr-gutachten-table tbody tr:hover{background:var(--panel-2);} .jr-gutachten-table tbody tr:last-child td{border-bottom:none;} .jr-gutachten-table td a{color:var(--white);} .jr-gutachten-table td a:hover{color:var(--red-bright);} .jr-gutachten-dl{display:inline-block; border:1px solid var(--line); padding:6px 12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:14px;} .jr-gutachten-dl:hover{background:var(--red); border-color:var(--red); color:#fff !important;} .jr-gutachten-dl-off{color:var(--steel) !important; opacity:0.4; cursor:default; text-align:center;} .jr-gutachten-dl-off:hover{background:none !important; border-color:var(--line) !important;} /* Fixe FG/TG/TTG-Badges auf der Produktseite (nach Variantenwahl) */ .jr-cert-badges{display:flex; gap:10px; margin-bottom:16px;} .jr-cert-badge{font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.06em; padding:8px 16px; border-radius:var(--radius); border:1px solid var(--line); color:var(--steel); opacity:0.4; cursor:default;} .jr-cert-badge.jr-cert-active{opacity:1; color:var(--white); border-color:rgba(224,27,36,0.5); cursor:pointer;} .jr-cert-badge.jr-cert-active:hover{background:var(--red); border-color:var(--red); color:#fff;} /* "Nur TÜV"-Checkbox: erste Zeile der Varianten-Tabelle, bewusst auffällig */ .woocommerce div.product form.cart .variations tr.jr-tuv-only-row td{ background:rgba(224,27,36,0.08); border:1px solid rgba(224,27,36,0.35); border-radius:6px; padding:14px 16px;} .jr-tuv-only-row label{display:flex; align-items:center; gap:12px; cursor:pointer; font-size:17px; font-weight:600; color:var(--white); text-transform:none; letter-spacing:0;} .jr-tuv-only-row input{accent-color:var(--red); width:20px; height:20px; flex-shrink:0; cursor:pointer;} /* ---- footer ---- */ .site-footer{padding:44px 40px 30px; border-top:1px solid var(--line); color:var(--steel); font-size:15px;} /* Firmenlogo im Fußbereich — width+height nötig, sonst schlägt ".woocommerce img{height:auto}" zu. */ .site-footer .sm-foot-logo{width:78px; height:78px; display:block; margin:0 0 14px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:30px;} .footer-grid h4{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:15px; letter-spacing:0.08em; color:var(--steel-light); margin-bottom:12px;} .footer-grid a{display:block; padding:3px 0; color:var(--steel);} .footer-grid a:hover{color:var(--white);} .footer-grid p{line-height:1.7;} .footer-legal{border-top:1px solid var(--line); padding-top:18px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.05em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;} /* ================================================================== Responsive / Mobile ================================================================== */ /* Hamburger-Button (Desktop unsichtbar; Klick toggelt body.nav-open) */ .nav-toggle{display:none; background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px; cursor:pointer; flex-direction:column; gap:5px;} .nav-toggle span{display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:transform .2s, opacity .2s;} body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.nav-open .nav-toggle span:nth-child(2){opacity:0;} body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* --- Tablet & kleiner --- */ @media(max-width:1000px){ /* Menü hinter dem Hamburger: klappt als Panel unter der Topbar auf */ .nav-toggle{display:flex;} .nav{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(13,13,14,0.98); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:14px 20px 18px;} body.nav-open .nav{display:block;} .nav ul{flex-direction:column; gap:8px;} .nav a{display:block; text-align:center; padding:13px 18px; font-size:16px;} /* Dropdown mobil: Untermenü als Aufklapp-Block (per Tipp, via .open) statt Hover */ .nav li{position:static;} .nav .sub-menu{position:static; box-shadow:none; background:rgba(255,255,255,0.03); margin:6px 0 0; min-width:0;} .nav li.open > .sub-menu{display:flex;} .nav .menu-item-has-children > a::after{content:'\25BE'; opacity:0.9;} .nav li.open.menu-item-has-children > a::after{content:'\25B4';} .hero{grid-template-columns:1fr; gap:34px; padding:50px 40px 44px;} .hero-visual img{width:100%; max-width:620px; margin:0 auto;} .model-grid{grid-template-columns:repeat(2,1fr);} .woocommerce ul.products{grid-template-columns:repeat(2,1fr);} .finder{grid-template-columns:1fr 1fr;} .finder .f-title{max-width:none;} .gutachten-finder{grid-template-columns:1fr 1fr;} .usp{grid-template-columns:1fr; gap:28px;} .footer-grid{grid-template-columns:1fr; gap:28px;} } /* --- Große Smartphones / kleine Tablets --- */ @media(max-width:768px){ /* Header zweizeilig: Zeile 1 = Logo (scrollt beim Runterscrollen weg), Zeile 2 = Menü/Konto/Warenkorb (bleibt sticky). top:-55px = exakte Höhe der Logo-Zeile (54px + 1px border) — bei Höhenänderung beides anpassen! */ .topbar{flex-wrap:wrap; padding:0; gap:0; top:-55px;} .logo{flex:0 0 100%; height:54px; padding:0 14px; border-bottom:1px solid var(--line);} .topbar-right{flex:0 0 100%; padding:8px 14px; gap:8px; align-items:stretch;} .topbar-right .sm-logo{display:none;} /* .topbar-right nötig — Basisregel hat höhere Spezifität */ .nav-toggle{flex:1; align-items:center; justify-content:center;} .topbar-right .cart-btn{flex:1; justify-content:center;} /* Produkt-Einzelseite: Bild über den Infos statt Zwei-Spalten-Layout */ .woocommerce div.product div.images, .woocommerce div.product div.summary{width:100%; float:none;} .woocommerce div.product div.images{margin-bottom:22px;} .shop-toolbar{flex-direction:column; align-items:flex-start; gap:10px;} .finder{grid-template-columns:1fr; gap:14px;} .finder .f-title{padding-bottom:0;} .finder .btn-primary{width:100%; padding:14px;} .acc-filter{padding:18px 16px;} .shop-filter-widget{flex:1 1 100%; max-width:none;} .acc-filter-actions{margin-left:0; width:100%;} .acc-filter .btn-primary{flex:1;} .gutachten-finder{grid-template-columns:1fr 1fr;} } /* --- Smartphones --- */ @media(max-width:560px){ .logo{gap:9px;} .logo .jr-mark{height:29px;} .logo .l1{font-size:16.5px;} .logo .l2{font-size:9px; letter-spacing:0.05em;} .cart-btn{padding:9px 10px;} .cart-btn svg{width:21px; height:21px;} .cart-count{min-width:19px; height:19px; font-size:11px;} .nav{padding:12px 14px 16px;} .hero{padding:38px 20px 34px; gap:26px;} .hero h1{font-size:33px;} .hero p{font-size:15px; margin-bottom:24px;} .btn-primary{padding:14px 22px; font-size:13px;} .hero .btn-primary{display:block; text-align:center;} .hero .btn-ghost{display:block; text-align:center; margin:10px 0 0;} .section{padding:42px 20px;} .section-head{flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:22px;} .section-head h2{font-size:23px;} .model-grid{gap:12px;} .model-card{padding:16px 12px 14px;} .model-name{font-size:16px;} .woocommerce ul.products{grid-template-columns:1fr; gap:14px;} .usp{margin:0 20px; padding:32px 0; gap:22px;} .shop-wrap{padding:24px 20px 60px;} .shop-wrap h1.page-title, .woocommerce-products-header__title{font-size:27px; margin-bottom:20px; padding-bottom:14px;} .finder{margin-left:20px; margin-right:20px;} .shop-filters{margin:30px 20px 10px;} .woocommerce div.product .product_title{font-size:24px;} .woocommerce div.product p.price, .woocommerce-variation-price .price{font-size:23px;} .woocommerce div.product .woocommerce-tabs .panel{padding:16px 14px;} /* Varianten-Tabelle: Label über dem Dropdown statt daneben */ .woocommerce div.product form.cart .variations tr{display:block;} .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td{display:block; width:100%;} .woocommerce div.product form.cart .variations th{padding-bottom:5px;} .woocommerce div.product form.cart div.quantity{float:none; margin:0 0 10px;} .woocommerce div.product form.cart .button{width:100%;} .jr-color-swatch{width:68px;} .spec-plate{padding:22px 18px;} .paket-grid{grid-template-columns:1fr;} .jr-gutachten-table th,.jr-gutachten-table td{padding:10px 10px;} .site-footer{padding:34px 20px 24px;} .footer-grid{gap:22px;} .footer-legal{flex-direction:column; gap:5px;} } /* --- Handys (Hochformat): Wortmarke füllt die volle Breite --- Auf Handybreiten (~360–430px) saß der Schriftzug links mit totem Freiraum rechts (dort war das mobil ausgeblendete SM-Logo). Die Schrift wächst jetzt mit der Bildschirmbreite (vw), sodass beide Zeilen die Breite natürlich ausfüllen (Faktoren aus Messung im Customizer: endet ~6-8px vor dem rechten Rand, Zeilenhöhe bleibt unter den 54px der Logo-Zeile). Bewusst auf ≤480px begrenzt — auf Tablets würde die Schrift sonst absurd groß. */ @media(max-width:480px){ .logo .l1{font-size:calc(7.2vw - 6px); white-space:nowrap;} .logo .l2{font-size:calc(3.9vw - 3.2px); white-space:nowrap;} } /* ------------------------------------------------------------------ * Fahrzeug-Konfigurator: Komplett-Set-Karten * ---------------------------------------------------------------- */ .paket-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px;} .paket-card{background:var(--panel,#141414); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:14px;} .paket-img{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--black); border-radius:var(--radius); overflow:hidden;} .paket-img img{max-width:85%; max-height:85%; object-fit:contain;} .paket-card h3{margin:0; font-size:22px;} .paket-inhalt{list-style:none; margin:0; padding:0; font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--steel); line-height:1.7;} .paket-inhalt li::before{content:'+ '; color:var(--red-bright);} .paket-inhalt li:first-child::before{content:'';} .paket-label{display:block; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--steel);} .paket-preis{font-size:28px; font-weight:700; font-family:'JetBrains Mono',monospace;} .paket-preis::after{content:' inkl. MwSt.'; font-size:13px; font-weight:400; color:var(--steel);} .paket-kaufen{width:100%; text-align:center; cursor:pointer;} .paket-note{margin:0; font-size:14px; color:var(--steel); line-height:1.5;} .paket-leer{color:var(--steel); max-width:640px; line-height:1.7;} .paket-hinweis{border:1px solid; border-radius:var(--radius); padding:10px 14px; font-size:15px; line-height:1.5;} .paket-hinweis b{display:block; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px;} .paket-hinweis.gruen{background:rgba(76,175,109,0.09); border-color:rgba(76,175,109,0.45); color:#9fd8b2;} .paket-hinweis.gruen b{color:#4caf6d;} .paket-hinweis.gelb{background:rgba(224,178,72,0.09); border-color:rgba(224,178,72,0.45); color:#e3c88f;} .paket-hinweis.gelb b{color:#e0b248;} .paket-hinweis.rot{background:rgba(255,59,68,0.09); border-color:rgba(255,59,68,0.5); color:#f0a1a6;} .paket-hinweis.rot b{color:var(--red-bright,#ff3b44);} /* Wunschanfertigung-Hinweis (Wunsch-ET/-Lochkreis-Sets) */ .paket-wunsch{border:1px solid rgba(122,162,255,0.4); background:rgba(122,162,255,0.08); border-radius:var(--radius); padding:9px 13px; font-size:14.5px; line-height:1.5; color:#bcccf5;} /* WooCommerce-Produkt-Grid ("Neu im Shop" im leeren Warenkorb u.a.): Bilder einheitlich groß darstellen. Manche "…-300x300.jpg"-Thumbnails sind real größer (z.B. 546px) und rendern sonst in Dateigröße → "links klein, rechts groß". max-width kappt alle auf einheitliche Thumbnail-Größe + zentriert. */ .wc-block-grid__product-image img{width:100% !important; height:auto; max-width:300px !important; margin-left:auto; margin-right:auto; display:block;} /* 360°-Ansicht auf der Produktseite (inc/felgen-360.php) */ #jr-360{margin:14px 0;} #jr-360-toggle{display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; background:rgba(224,27,36,0.07); border:1px dashed var(--red-bright); border-radius:var(--radius); color:var(--white); font-size:15.5px; font-weight:600; cursor:pointer; transition:background .18s;} #jr-360-toggle:hover{background:rgba(224,27,36,0.16);} #jr-360 .jr-360-icon{font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:1px; background:var(--red-bright); color:#fff; padding:4px 8px; border-radius:4px;} #jr-360-box{margin-top:10px; max-width:480px;} #jr-360-frame{width:100%; aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--radius); background:#fff; display:block;} #jr-360-toggle{max-width:480px;} #jr-360 .jr-360-hint{margin:6px 0 0; font-size:13.5px; color:var(--steel); font-family:'JetBrains Mono',monospace;} /* Beta-Warnbanner ganz oben im Konfigurator (Testphase-Hinweis) */ .jr-beta-banner{display:flex; gap:16px; align-items:flex-start; margin:24px 40px 0; padding:15px 20px; background:rgba(224,178,72,0.1); border:1px solid rgba(224,178,72,0.5); border-left:4px solid #e0b248; border-radius:var(--radius);} .jr-beta-badge{flex:0 0 auto; margin-top:2px; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:1.5px; color:#141414; background:#e0b248; padding:6px 10px; border-radius:4px; white-space:nowrap;} .jr-beta-banner p{margin:0; font-size:15.5px; line-height:1.6; color:#e3c88f;} .jr-beta-banner strong{color:#f4e0ad;} @media(max-width:768px){ .jr-beta-banner{flex-direction:column; gap:10px;} } @media(max-width:560px){ .jr-beta-banner{margin:20px 20px 0; padding:13px 15px;} .jr-beta-banner p{font-size:12.5px;} } /* Kunden-Hinweis über den Komplett-Sets (Empfehlung/TÜV/Rückgabe) */ .jr-disclaimer{border:1px solid rgba(255,59,68,0.5); background:rgba(255,59,68,0.06); border-radius:var(--radius); padding:16px 20px; margin-bottom:26px; font-size:15.5px; line-height:1.6; color:var(--gray-light,#d2d5da);} .jr-disclaimer b{display:block; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--red-bright,#ff3b44); margin-bottom:8px;} .jr-disclaimer p{margin:0 0 10px;} .jr-disclaimer p:last-child{margin-bottom:0;} .jr-disclaimer strong{color:var(--white);} /* ------------------------------------------------------------------ * Header-Suche (Lupe in der Topbar) * ---------------------------------------------------------------- */ body.suche-open{overflow:hidden;} .jr-suche{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0.6); backdrop-filter:blur(3px);} .jr-suche-box{max-width:720px; margin:90px auto 0; padding:0 20px;} .jr-suche-eingabe{display:flex; align-items:center; gap:12px; background:var(--panel,#17171a); border:1px solid var(--red-bright); border-radius:var(--radius); padding:14px 18px;} .jr-suche-eingabe svg{width:22px; height:22px; color:var(--steel); flex:none;} .jr-suche-eingabe input{flex:1; background:none; border:none; outline:none; color:var(--white); font-family:'JetBrains Mono',monospace; font-size:18px;} .jr-suche-eingabe input::placeholder{color:var(--steel); opacity:0.7;} .jr-suche-zu{background:none; border:none; color:var(--steel); font-size:28px; line-height:1; cursor:pointer; padding:0 2px;} .jr-suche-zu:hover{color:var(--white);} .jr-suche-ergebnis{margin-top:10px; background:var(--panel,#17171a); border:1px solid var(--line); border-radius:var(--radius); max-height:min(62vh,560px); overflow-y:auto;} .jr-suche-gruppe{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:1.5px; color:var(--red-bright); padding:12px 18px 6px; border-bottom:1px solid var(--line);} .jr-suche-zeile{display:flex; align-items:center; gap:14px; padding:9px 18px; color:var(--white); text-decoration:none; border-bottom:1px solid var(--line);} .jr-suche-zeile:hover{background:rgba(224,27,36,0.10);} .jr-suche-zeile img{width:46px; height:46px; object-fit:contain; background:var(--black); border-radius:6px; flex:none;} .jr-suche-zeile .t{flex:1; min-width:0;} .jr-suche-zeile .l{display:block; font-family:'JetBrains Mono',monospace; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .jr-suche-zeile .s{display:block; font-size:14px; color:var(--steel); margin-top:2px;} .jr-suche-zeile .p{font-family:'JetBrains Mono',monospace; font-size:15.5px; font-weight:700; white-space:nowrap;} .jr-suche-zeile .lager.aus{font-size:12.5px; font-family:'JetBrains Mono',monospace; color:var(--steel); border:1px solid var(--line); border-radius:4px; padding:2px 6px; white-space:nowrap;} .jr-suche-mehr, .jr-suche-leer{padding:12px 18px; font-size:14.5px; color:var(--steel); line-height:1.5;} @media (max-width:560px){ .jr-suche-box{margin-top:64px; padding:0 10px;} .jr-suche-zeile .p{font-size:12.5px;} } /* ------------------------------------------------------------------ * Kaufberater-Popup (nach Felgen-Kauf) * ---------------------------------------------------------------- */ .jr-kb-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px;} .jr-kb-modal{position:relative; background:var(--panel,#141414); border:1px solid var(--line); border-radius:var(--radius); max-width:560px; width:100%; max-height:90vh; overflow:auto; padding:32px;} .jr-kb-close{position:absolute; top:12px; right:16px; background:none; border:none; color:var(--steel); font-size:30px; cursor:pointer; line-height:1;} .jr-kb-eyebrow{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:2px; color:var(--red-bright);} .jr-kb-modal h3{margin:10px 0 12px; font-size:26px;} .jr-kb-modal p{color:var(--steel); line-height:1.6; margin:0 0 18px;} .jr-kb-step label{display:block; font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--steel); margin-bottom:6px;} .jr-kb-step select{width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:16px;} .jr-kb-step select + select{margin-top:8px;} .jr-kb-step select:disabled{opacity:0.45; cursor:not-allowed;} #jr-kb-manuell{margin-top:12px;} #jr-kb-manuell summary{cursor:pointer; display:block; text-align:center; padding:11px 14px; border:1px dashed var(--red-bright); border-radius:var(--radius); color:var(--white); font-size:15.5px; font-weight:600; background:rgba(224,27,36,0.07); transition:background .18s, border-color .18s;} #jr-kb-manuell summary:hover{background:rgba(224,27,36,0.16);} #jr-kb-manuell summary::marker{content:'';} #jr-kb-manuell summary::-webkit-details-marker{display:none;} #jr-kb-manuell summary::before{content:'▸ '; color:var(--red-bright);} #jr-kb-manuell[open] summary::before{content:'▾ ';} .jr-kb-manuell-felder{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px;} .jr-kb-manuell-felder label{font-size:12px;} .jr-kb-list{margin-top:20px; display:flex; flex-direction:column; gap:10px;} .jr-kb-list-head{font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--steel);} .jr-kb-btn{display:block; text-align:center; padding:13px 18px; border-radius:var(--radius); background:var(--red-bright); color:#fff; font-weight:600; text-decoration:none;} .jr-kb-btn:hover{filter:brightness(1.1);} .jr-kb-btn-ghost{background:transparent; border:1px solid var(--line); color:var(--white); font-weight:400;} .jr-kb-ok{padding:12px 14px; border:1px solid #2e6b3e; border-radius:var(--radius); color:#4caf6d; font-size:15px; line-height:1.5;} .jr-kb-note{font-size:14px; color:var(--steel);} /* Zubehör-Auswahlzeilen im Popup (Dropdowns statt Links) */ .jr-kb-row{display:flex; flex-direction:column; gap:6px;} .jr-kb-row-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--steel-light);} .jr-kb-alle{color:var(--steel); font-size:13px; text-transform:none; letter-spacing:0; text-decoration:underline; white-space:nowrap;} .jr-kb-alle:hover{color:var(--white);} .jr-kb-row select{width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:11px 12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:15px;} .jr-kb-hint{font-size:13.5px; color:var(--steel); line-height:1.5;} #jr-kb-add{width:100%; margin-top:16px; border:none; cursor:pointer; font-size:16px;} .jr-kb-btn[hidden]{display:none;} /* Block-Warenkorb: "Weiter zur Kasse" ist die Haupt-Aktion → auffällig rot. (Ohne diese Regel erbt der Button das graue Standard-Button-Styling und wirkt neben dem roten "Warenkorb leeren" wie die zweitrangige Aktion.) */ .wc-block-cart__submit-button, a.wc-block-cart__submit-button, button.wc-block-cart__submit-button{ background:var(--red); border:1px solid var(--red); color:#fff; font-weight:600;} .wc-block-cart__submit-button:hover, a.wc-block-cart__submit-button:hover, button.wc-block-cart__submit-button:hover{ background:var(--red-bright); border-color:var(--red-bright); color:#fff;} /* "Warenkorb leeren"-Button unter dem Block-Warenkorb — bewusst zurückhaltend (destruktive Neben-Aktion), damit die Haupt-Aktion "Weiter zur Kasse" führt. */ .jr-cart-leeren{max-width:1600px; margin:0 auto; padding:0 40px 36px; text-align:right;} .jr-cart-leeren-btn{display:inline-block; padding:11px 20px; border-radius:var(--radius); background:transparent; border:1px solid var(--line); color:var(--steel); font-weight:600; font-size:15px; text-decoration:none; transition:color .18s, border-color .18s;} .jr-cart-leeren-btn:hover{color:var(--red-bright); border-color:var(--red-bright);} @media(max-width:560px){ .jr-cart-leeren{padding:0 14px 28px; text-align:center;} .jr-cart-leeren-btn{display:block;} } .jr-kb-later{margin-top:18px; background:none; border:none; color:var(--steel); text-decoration:underline; cursor:pointer; font-size:15px;} /* ---- 404-Seite ---- */ .jr-404{text-align:center;} .jr-404-inner{max-width:640px; margin:0 auto; padding:40px 0 30px;} .jr-404-code{font-family:'Oswald',sans-serif; font-weight:700; font-size:98px; line-height:1; color:var(--red-bright); letter-spacing:0.03em;} .jr-404 h1{margin:6px 0 14px; font-size:32px;} .jr-404 p{color:var(--steel-light); margin-bottom:26px;} .jr-404-search{display:flex; gap:8px; max-width:460px; margin:0 auto 26px;} .jr-404-search input[type="search"]{flex:1 1 auto; background:var(--panel); border:1px solid var(--line); color:var(--white); border-radius:var(--radius); padding:12px 14px; font-size:17px;} .jr-404-search input[type="search"]::placeholder{color:var(--steel);} .jr-404-search button{flex:0 0 auto; background:var(--red); border:1px solid var(--red); color:#fff; border-radius:var(--radius); padding:12px 22px; font-weight:600; cursor:pointer;} .jr-404-search button:hover{background:var(--red-bright); border-color:var(--red-bright);} .jr-404-links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;} @media(max-width:560px){ .jr-404-code{font-size:72px;} .jr-404-search{flex-wrap:wrap;} .jr-404-search input[type="search"], .jr-404-search button{width:100%;} .jr-404-links{flex-direction:column;} .jr-404-links a{width:100%;} } @media(max-width:560px){ .jr-kb-manuell-felder{grid-template-columns:1fr;} } /* Nicht verfügbare Felgenfarbe (in gewählter Ausführung): ausgegraut + gesperrt */ .jr-color-swatch-unavailable{opacity:.28; filter:grayscale(1); cursor:not-allowed;} .jr-color-swatch-unavailable span{text-decoration:line-through;} /* ------------------------------------------------------------------ Mein Konto (Login/Registrierung, Dashboard, Bestellungen, Adressen) ------------------------------------------------------------------ */ .woocommerce-account .woocommerce{display:block;} /* WooCommerce-Core-Floats/-Breiten neutralisieren: woocommerce-layout.css setzt float + width:48% auf .col-1/.col-2 und width:47% auf .form-row-first/-last — im Grid-Layout des Themes landeten die Felder dadurch "irgendwo". Floats weg, alles volle Breite; Zweispaltigkeit regeln gezielt die Grids weiter unten. */ .woocommerce-account .col2-set{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;} /* WooCommerce' Clearfix .col2-set::before/::after (content:"") werden im Grid zu eigenen Zellen und verschieben die echten Spalten (Login landete rechts, Registrieren links-unten). Im Konto-Grid abschalten. */ .woocommerce-account .col2-set::before, .woocommerce-account .col2-set::after{display:none;} .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2{width:auto; float:none;} .woocommerce-account form .form-row{width:auto; float:none; margin:0 0 16px; padding:0;} .woocommerce-account form .form-row-first, .woocommerce-account form .form-row-last{width:auto; float:none;} .woocommerce-account .u-columns{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; max-width:1040px; margin:0 auto;} .woocommerce form.login, .woocommerce form.register, form.woocommerce-ResetPassword{border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:28px; margin-top:14px;} .woocommerce-account h2{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:26px; margin:18px 0 4px;} .woocommerce form .form-row label{display:block; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); margin-bottom:5px;} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-account .woocommerce-address-fields select{width:100%; background:var(--black); border:1px solid var(--line); color:var(--white); padding:11px 12px; border-radius:var(--radius); font-family:'JetBrains Mono',monospace; font-size:15px;} .woocommerce form .form-row input.input-text:focus{border-color:var(--red-bright); outline:none;} .woocommerce form .show-password-input{top:8px; right:10px;} /* Primäre Formular-Buttons (Anmelden/Registrieren/Passwort setzen): rot, volle Breite */ .woocommerce form.login .button, .woocommerce form.register .button, form.woocommerce-ResetPassword .button{width:100%; background:var(--red); border:none; color:#fff; padding:14px; font-weight:600; font-size:16px; letter-spacing:0.03em; text-transform:uppercase; margin-top:4px;} .woocommerce form.login .button:hover, .woocommerce form.register .button:hover, form.woocommerce-ResetPassword .button:hover{background:var(--red-bright); color:#fff;} /* "Angemeldet bleiben" + "Passwort vergessen?" */ .woocommerce form.login .woocommerce-form-login__rememberme{display:flex; align-items:center; gap:9px; margin:0 0 14px; color:var(--steel-light); font-size:15.5px; font-family:'Work Sans',sans-serif; text-transform:none; letter-spacing:0; cursor:pointer;} .woocommerce form.login .lost_password{margin:14px 0 0; font-size:15px; color:var(--steel);} .woocommerce form.login .lost_password a{color:var(--red-bright);} .woocommerce form.login .lost_password a:hover{color:var(--white);} /* Passwort vergessen / neues Passwort setzen: schmale, zentrierte Karte */ form.woocommerce-ResetPassword{max-width:520px; margin-left:auto; margin-right:auto;} .woocommerce-lost-password .woocommerce > p:not(.form-row){max-width:520px; margin:0 auto 6px; color:var(--steel-light); line-height:1.6;} /* Kontodetails: Vor-/Nachname nebeneinander, Rest volle Breite */ .woocommerce-account form.edit-account{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; max-width:720px;} .woocommerce-account form.edit-account > *{grid-column:1 / -1;} .woocommerce-account form.edit-account .form-row-first{grid-column:span 1;} .woocommerce-account form.edit-account .form-row-last{grid-column:span 1;} .woocommerce-account form.edit-account fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px 6px; margin:10px 0 18px;} .woocommerce-account form.edit-account fieldset legend{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:18px; padding:0 8px; margin-left:-8px;} .woocommerce-account form.edit-account button.button{width:auto; background:var(--red); border:none; color:#fff; padding:13px 28px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;} .woocommerce-account form.edit-account button.button:hover{background:var(--red-bright); color:#fff;} /* Adresse bearbeiten: gleiche Zweispaltigkeit */ .woocommerce-account .woocommerce-address-fields__field-wrapper{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;} .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row{grid-column:1 / -1;} .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first, .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last{grid-column:span 1;} .woocommerce-account .woocommerce-address-fields button.button{background:var(--red); border:none; color:#fff; padding:13px 28px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;} .woocommerce-account .woocommerce-address-fields button.button:hover{background:var(--red-bright); color:#fff;} .jr-firma-toggle{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--black);} .jr-firma-toggle label{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--steel-light); cursor:pointer; text-transform:none; letter-spacing:0; font-family:'Work Sans',sans-serif;} .jr-firma-toggle input{margin-top:2px;} #jr-firma-fields{border:1px solid rgba(224,27,36,0.4); border-radius:6px; background:var(--panel); padding:16px 18px; margin-bottom:16px;} .jr-firma-hinweis{font-size:14.5px; color:var(--steel); line-height:1.5;} /* Konto-Navigation + Inhalt */ .woocommerce-account .woocommerce-MyAccount-navigation{float:none; width:auto; margin-bottom:26px;} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block; padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); color:var(--steel-light); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:14.5px; letter-spacing:0.05em; text-transform:uppercase;} .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{border-color:var(--red-bright); color:var(--white);} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--red-bright); background:rgba(224,27,36,0.13); color:var(--white);} .woocommerce-account .woocommerce-MyAccount-content{float:none; width:auto; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:26px 28px;} /* Nur TEXT-Links rot — Button-Links (a.button "Ansehen"/"Bearbeiten") wurden sonst rot-auf-rot und beim Hover unleserlich. */ .woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.jr-dash-link){color:var(--red-bright);} .woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.jr-dash-link):hover{color:var(--white);} /* Button-Links in Bestell-/Konto-Tabellen: WooCommerce 10.9 stylt a.button (Spezifität 0,2,1) mit hellgrauem Hintergrund und schlägt die Basisregel — hier mit höherer Spezifität (0,3,1) Hintergrund UND Schrift setzen, sonst stand weiße Schrift auf fast-weißem Button (unlesbar). */ .woocommerce-account .woocommerce-MyAccount-content a.button, .woocommerce-account .woocommerce-MyAccount-content button.button{background:var(--panel-2); border:1px solid var(--line); color:var(--white);} .woocommerce-account .woocommerce-MyAccount-content a.button:hover, .woocommerce-account .woocommerce-MyAccount-content button.button:hover{background:var(--red); border-color:var(--red); color:#fff;} /* "Bezahlen" ist die primäre Aktion → rot hervorgehoben */ .woocommerce-account .woocommerce-MyAccount-content a.button.pay{background:var(--red); border-color:var(--red); color:#fff;} .woocommerce-account .woocommerce-MyAccount-content a.button.pay:hover{background:var(--red-bright); border-color:var(--red-bright);} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button, .woocommerce-account button.button{margin-top:6px;} /* Links in Hinweis-/Fehlerboxen sichtbar machen (weiß + unterstrichen) */ .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button){color:var(--white); text-decoration:underline;} /* Bestellstatus in der Bestellliste farblich kodieren */ .woocommerce-orders-table__cell-order-status{font-family:'JetBrains Mono',monospace; font-size:14.5px; letter-spacing:0.04em;} tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{color:#4caf6d;} tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{color:#e0a51b;} tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status{color:var(--steel-light);} tr.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status{color:var(--steel);} tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status, tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status, tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status{color:var(--red-bright);} /* Tabellen (Bestellungen etc.) */ .woocommerce-account table.shop_table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} .woocommerce-account table.shop_table th{background:var(--black); font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); padding:12px 14px; text-align:left;} .woocommerce-account table.shop_table td{padding:12px 14px; border-top:1px solid var(--line); font-size:16px;} .woocommerce-account table.shop_table .button{margin-right:6px;} /* Adress-Karten */ .woocommerce-account .woocommerce-Addresses{display:grid; grid-template-columns:1fr 1fr; gap:22px;} .woocommerce-account .woocommerce-Address{border:1px solid var(--line); border-radius:var(--radius); padding:18px;} .woocommerce-account .woocommerce-Address address{font-style:normal; color:var(--steel-light); line-height:1.6;} /* Händlerkonto-Statusboxen */ .jr-haendler-status{border:1px solid var(--line); border-left:3px solid var(--steel); border-radius:var(--radius); background:var(--black); padding:18px 20px; line-height:1.7;} .jr-haendler-status-ok{border-left-color:#4caf6d;} .jr-haendler-status-wait{border-left-color:#e0a51b;} .jr-haendler-status-no{border-left-color:var(--red-bright);} /* Versand & Rechnung in der Bestellansicht */ .jr-bestell-extras{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:20px 22px; margin:26px 0;} .jr-bestell-extras h2{font-size:22px;} .jr-bestell-extras-zeile{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:10px 0 0;} .jr-bestell-extras-zeile .k{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; color:var(--steel); min-width:180px;} .jr-bestell-extras-zeile .mono{font-family:'JetBrains Mono',monospace;} /* Konto-Dashboard (Template-Override woocommerce/myaccount/dashboard.php) */ .jr-dash-head{display:flex; justify-content:space-between; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-bottom:22px;} .jr-dash-hallo{color:var(--steel); font-size:14px; font-family:'JetBrains Mono',monospace; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 3px;} .jr-dash-name{font-size:29px; margin:0; line-height:1.1;} .jr-dash-badge{display:inline-block; border:1px solid var(--line); border-radius:var(--radius); padding:7px 13px; font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.05em; color:var(--steel-light); white-space:nowrap;} .jr-dash-badge-ok{border-color:rgba(76,175,109,0.55); color:#4caf6d; background:rgba(76,175,109,0.08);} .jr-dash-badge-wait{border-color:rgba(224,165,27,0.55); color:#e0a51b; background:rgba(224,165,27,0.08);} .jr-dash-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px;} .jr-dash-stat{border:1px solid var(--line); background:var(--black); border-radius:var(--radius); padding:16px 18px;} .jr-dash-stat .k{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); margin-bottom:7px;} .jr-dash-stat .v{font-family:'Oswald',sans-serif; font-size:29px; line-height:1; color:var(--white);} .jr-dash-stat .v small{font-size:16px; color:var(--steel-light); font-family:'Work Sans',sans-serif; margin-left:5px;} .jr-dash-sub{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 13px;} .jr-dash-sub h3{font-size:19px; margin:0;} .jr-dash-sub a{font-family:'JetBrains Mono',monospace; font-size:14px;} .jr-dash-bestellungen{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:28px;} .jr-dash-bestellung{display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; padding:13px 16px; background:var(--black);} .jr-dash-bestellung + .jr-dash-bestellung{border-top:1px solid var(--line);} .jr-dash-bestellung .nr{font-family:'JetBrains Mono',monospace; font-weight:700; min-width:74px;} .jr-dash-bestellung .datum{color:var(--steel); font-size:15px; min-width:88px;} .jr-dash-bestellung .status{font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.04em; flex:1;} .jr-dash-bestellung .summe{font-weight:600; margin-left:auto;} .jr-dash-status-completed{color:#4caf6d;} .jr-dash-status-processing{color:#e0a51b;} .jr-dash-status-on-hold{color:var(--steel-light);} .jr-dash-status-pending{color:var(--steel);} .jr-dash-status-cancelled, .jr-dash-status-failed, .jr-dash-status-refunded{color:var(--red-bright);} .jr-dash-leer{border:1px dashed var(--line); border-radius:var(--radius); padding:26px 20px; text-align:center; color:var(--steel-light); margin-bottom:28px;} .jr-dash-leer .btn-primary{margin-top:14px;} .jr-dash-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px;} .woocommerce-account .woocommerce-MyAccount-content a.jr-dash-link{display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--black); padding:15px 17px; color:var(--white); transition:border-color .18s, background .18s;} .woocommerce-account .woocommerce-MyAccount-content a.jr-dash-link:hover{border-color:var(--red-bright); background:rgba(224,27,36,0.07); color:var(--white);} .jr-dash-link .t{display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:600; margin-bottom:4px;} .jr-dash-link .t::after{content:'→'; color:var(--red-bright); font-weight:400;} .jr-dash-link .d{color:var(--steel); font-size:14.5px; line-height:1.5;} @media (max-width:768px){ .woocommerce-account .u-columns{grid-template-columns:1fr; gap:22px;} .woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr;} .jr-bestell-extras-zeile .k{min-width:0; width:100%;} /* Konto mobil: Karten/Formulare kompakter, Zweispaltiges einspaltig */ .woocommerce-account .col2-set{grid-template-columns:1fr;} .woocommerce-account .woocommerce-MyAccount-content{padding:18px 16px;} .woocommerce form.login, .woocommerce form.register, form.woocommerce-ResetPassword{padding:20px 16px;} .woocommerce-account form.edit-account .form-row-first, .woocommerce-account form.edit-account .form-row-last, .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first, .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last{grid-column:1 / -1;} .woocommerce-account .woocommerce-MyAccount-navigation li a{padding:8px 12px; font-size:11.5px;} /* Gestapelte Tabellen (WooCommerce-smallscreen.css macht aus Zeilen Blöcke): Beschriftungs-Labels im Theme-Look */ .woocommerce-account table.shop_table_responsive tr{display:block; padding:4px 0;} .woocommerce-account table.shop_table_responsive tr + tr{border-top:1px solid var(--line);} .woocommerce-account table.shop_table_responsive td::before{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel);} .woocommerce-account table.shop_table_responsive td{border-top:none; padding:8px 14px;} /* Dashboard mobil */ .jr-dash-name{font-size:23px;} .jr-dash-bestellung .datum{min-width:0;} .jr-dash-bestellung .status{flex-basis:100%;} } /* ================================================================== Kasse (klassischer Checkout) + Bestell-Freigabe ================================================================== */ .woocommerce-checkout .col2-set{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:30px;} .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{width:auto; float:none;} .woocommerce-checkout form .form-row label{display:block; font-family:'Work Sans',sans-serif; font-size:15.5px; letter-spacing:0; text-transform:none; color:var(--steel-light); margin-bottom:5px;} .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row textarea, .woocommerce-checkout form .form-row select, .woocommerce-checkout .select2-container--default .select2-selection--single{width:100%; background:var(--black); border:1px solid var(--line); border-radius:var(--radius); color:var(--white); padding:11px 13px; font-size:16.5px; height:auto;} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--white); line-height:1.5; padding:0;} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;} .select2-dropdown{background:var(--panel); border:1px solid var(--line); color:var(--white);} .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:var(--red-bright);} .select2-container--default .select2-search--dropdown .select2-search__field{background:var(--black); border:1px solid var(--line); color:var(--white);} .woocommerce-checkout h3, .woocommerce-checkout h3#order_review_heading{font-size:23px; margin:26px 0 14px;} .woocommerce-checkout table.shop_table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} .woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td{padding:14px 15px; border-top:1px solid var(--line); font-size:18px; text-align:left;} .woocommerce-checkout table.shop_table thead th{background:var(--black); font-family:'Work Sans',sans-serif; font-size:17px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--steel-light); border-top:none;} .woocommerce-checkout #payment{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-top:22px;} .woocommerce-checkout #payment ul.payment_methods{list-style:none; margin:0; padding:16px 18px; border-bottom:1px solid var(--line);} .woocommerce-checkout #payment div.payment_box{background:var(--black); color:var(--steel-light); border-radius:var(--radius); padding:12px 14px; margin-top:10px;} .woocommerce-checkout #payment div.payment_box::before{display:none;} .woocommerce-checkout .place-order{padding:18px;} .woocommerce-checkout #place_order{width:100%; background:var(--red-bright); color:#fff; border:none; border-radius:var(--radius); padding:15px 20px; font-size:18px; font-weight:700; letter-spacing:0.03em; cursor:pointer;} .woocommerce-checkout #place_order:hover{background:#c01820;} .woocommerce-checkout .woocommerce-checkout-review-order, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;} /* Hinweisblöcke vor dem Bestell-Button */ .jr-kasse-hinweis{border:1px solid var(--line); border-radius:var(--radius); background:var(--black); padding:16px 18px; margin:0 0 16px; line-height:1.65;} .jr-kasse-hinweis h3{font-family:'Work Sans',sans-serif; font-size:19px; font-weight:600; text-transform:none; letter-spacing:0; margin:0 0 10px; color:var(--white);} .jr-kasse-hinweis p{font-size:16.5px; line-height:1.7; color:var(--steel-light); margin:0 0 12px;} .jr-kasse-hinweis a{color:var(--red-bright);} .jr-kasse-hinweis-warn{border-left:3px solid var(--red-bright);} .jr-kasse-hinweis-service{border-left:3px solid #e0a51b;} .jr-kasse-hinweis-lieferzeit{border-left:3px solid #2e9e57; background:rgba(46,158,87,0.06);} .jr-lieferzeit-gross{font-family:'Oswald',sans-serif; font-size:24px; color:var(--white) !important; margin:0 0 8px !important; letter-spacing:0.01em;} .jr-lieferzeit-detail{font-size:15px; color:var(--steel-light); margin:0 !important; line-height:1.6;} .jr-lieferzeit-produkt{font-size:16px; color:var(--white); margin:14px 0; padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-left:3px solid #2e9e57; border-radius:var(--radius); line-height:1.6;} .jr-lieferzeit-produkt .jr-lieferzeit-lager{color:#4caf6d;} .jr-lieferzeit-produkt .jr-lieferzeit-zusatz{font-size:14.5px; color:var(--steel-light);} .jr-kasse-check{display:flex; gap:11px; align-items:flex-start; font-size:16.5px; line-height:1.6; color:var(--white); cursor:pointer;} .jr-kasse-check input{margin-top:3px; width:18px; height:18px; accent-color:var(--red-bright); flex:none;} .jr-kasse-klein{font-size:15px; line-height:1.65; color:var(--steel-light); margin:10px 0 0;} #jr-pruefung-felder{margin-top:12px;} #jr-pruefung-felder textarea{width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); color:var(--white); padding:11px 13px; font-size:16px;} /* Kundenfreigabe-Box (Bestellansicht) */ .jr-freigabe-box{border:1px solid #e0a51b; border-radius:var(--radius); background:var(--panel); padding:22px 24px; margin:0 0 28px;} .jr-freigabe-box h2{font-size:23px; margin-top:0;} .jr-freigabe-box .button{margin-top:14px; background:var(--red-bright); color:#fff; border:none; border-radius:var(--radius); padding:13px 26px; font-size:17px; font-weight:700; cursor:pointer;} .jr-freigabe-box .button:hover{background:#c01820;} .jr-freigabe-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px;} .jr-freigabe-actions .button{margin-top:0;} .jr-freigabe-storno{background:none; border:1px solid var(--line); color:var(--steel-light); border-radius:var(--radius); padding:13px 24px; font-size:16px; cursor:pointer;} .jr-freigabe-storno:hover{border-color:var(--red-bright); color:var(--white);} @media (max-width:768px){ .woocommerce-checkout .col2-set{grid-template-columns:1fr;} } /* Kasse: Adress-Spalten sauber ausrichten (WC-Floats/48%-Breiten neutralisieren). Wichtig: WCs Clearfix-Pseudoelemente (::before/::after) würden im Grid selbst zu Grid-Zellen und schieben die Spalten diagonal — deshalb ausblenden. */ .woocommerce-checkout .col2-set::before, .woocommerce-checkout .col2-set::after{display:none !important; content:none !important;} .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{width:100% !important; float:none !important; margin:0;} .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3{margin-top:0; min-height:34px; display:flex; align-items:center; gap:10px;} .woocommerce-checkout h3#ship-to-different-address{font-size:19px;} .woocommerce-checkout h3#ship-to-different-address label{display:flex; align-items:center; gap:10px; cursor:pointer;} .woocommerce-checkout h3#ship-to-different-address input{width:17px; height:17px; accent-color:var(--red-bright); margin:0; flex:none;} .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{display:grid; grid-template-columns:1fr 1fr; column-gap:14px;} .woocommerce-checkout form .form-row{width:auto !important; float:none !important; grid-column:span 2; margin:0 0 14px; padding:0;} .woocommerce-checkout form .form-row-first, .woocommerce-checkout form .form-row-last{grid-column:span 1;} /* Bestellübersicht: Einzelpreis-/Mengen-Spalte + Netto/MwSt/Brutto-Aufstellung */ .woocommerce-checkout-review-order-table .product-quantity{text-align:center; white-space:nowrap; width:110px;} .woocommerce-checkout-review-order-table .product-price{text-align:right; white-space:nowrap; width:150px;} .woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table tfoot td{text-align:right; white-space:nowrap;} .woocommerce-checkout-review-order-table th.product-total{text-align:right; width:150px;} /* Inhalte nicht direkt an den Tabellenrand kleben lassen: 80px Luft links und rechts */ .woocommerce-checkout table.shop_table th.product-total, .woocommerce-checkout table.shop_table td.product-total, .woocommerce-checkout table.shop_table tfoot td{padding-right:80px;} .woocommerce-checkout table.shop_table th.product-name, .woocommerce-checkout table.shop_table td.product-name, .woocommerce-checkout table.shop_table tfoot th{padding-left:80px;} /* Summenblock klar von der Produktliste abgesetzt: eigener Hintergrund + dicke Trennlinie */ .woocommerce-checkout table.shop_table tfoot th, .woocommerce-checkout table.shop_table tfoot td{background:var(--black);} .woocommerce-checkout-review-order-table tfoot tr:first-child th, .woocommerce-checkout-review-order-table tfoot tr:first-child td{border-top:3px solid var(--red-bright);} .woocommerce-checkout table.shop_table tfoot th{font-family:'Work Sans',sans-serif; font-size:17px; letter-spacing:0; text-transform:none; color:var(--steel-light); font-weight:500;} .woocommerce-checkout table.shop_table tfoot td{font-size:18px;} .woocommerce-checkout-review-order-table tr.jr-netto th, .woocommerce-checkout-review-order-table tr.jr-netto td{border-top:2px solid var(--line);} .woocommerce-checkout-review-order-table tr.jr-netto td, .woocommerce-checkout-review-order-table tr.jr-mwst td{color:var(--steel-light);} .woocommerce-checkout-review-order-table tr.order-total th{color:var(--white); font-weight:600; font-size:18px;} .woocommerce-checkout-review-order-table tr.order-total td{font-size:23px; color:var(--white);} /* ---- Phase 4: Rechtsseiten + Widerrufsfunktion ---- */ .jr-rechtstext{max-width:820px; color:var(--steel-light); font-size:17px; line-height:1.65;} .jr-rechtstext h2{color:var(--white); font-size:22px; margin:34px 0 12px;} .jr-rechtstext h3{color:var(--white); font-size:18px; margin:26px 0 10px;} .jr-rechtstext p{margin:0 0 14px;} .jr-rechtstext ul, .jr-rechtstext ol{margin:0 0 14px 22px;} .jr-rechtstext li{margin-bottom:6px;} .jr-rechtstext a{color:var(--red-bright); text-decoration:underline;} .jr-rechtstext blockquote{border-left:3px solid var(--red); background:var(--panel); padding:14px 18px; margin:0 0 14px;} .jr-rechtstext table{border-collapse:collapse; margin:0 0 14px;} .jr-rechtstext table td, .jr-rechtstext table th{border:1px solid var(--line); padding:8px 12px;} .jr-rechtstext .jr-vorlaeufig{border:1px dashed var(--red); background:rgba(224,27,36,0.08); padding:12px 16px; border-radius:var(--radius); color:var(--white);} .site-footer .jr-widerruf-btn{display:inline-block; margin-top:12px; padding:9px 16px; border:1.5px solid var(--red-bright); border-radius:var(--radius); color:var(--red-bright); font-weight:600; font-size:15px; letter-spacing:0.03em;} .site-footer .jr-widerruf-btn:hover{background:var(--red); border-color:var(--red); color:#fff;} .jr-widerruf-section{max-width:720px;} .jr-widerruf-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-bottom:18px;} .jr-widerruf-form p{margin:0 0 16px;} .jr-widerruf-form label{display:block; margin-bottom:6px; color:var(--steel-light); font-size:16px;} .jr-widerruf-form input[type=text], .jr-widerruf-form input[type=email], .jr-widerruf-form textarea{width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--white); padding:10px 12px; font-size:17px;} .jr-widerruf-form input:focus, .jr-widerruf-form textarea:focus{outline:none; border-color:var(--red);} .jr-widerruf-form .jr-hp{position:absolute !important; left:-9999px !important; height:1px; overflow:hidden;} .jr-widerruf-submit{background:var(--red); color:#fff; border:none; border-radius:var(--radius); padding:13px 26px; font-size:17px; font-weight:700; letter-spacing:0.04em; cursor:pointer; text-transform:uppercase;} .jr-widerruf-submit:hover{background:var(--red-bright);} .jr-widerruf-ok{border:1px solid #2f9e44; background:rgba(47,158,68,0.1); border-radius:var(--radius); padding:20px 24px; margin-bottom:18px;} .jr-widerruf-ok h3{color:#51cf66; margin-bottom:8px;} .jr-widerruf-fehler{border:1px solid var(--red); background:rgba(224,27,36,0.1); border-radius:var(--radius); padding:14px 20px 14px 36px; margin-bottom:18px; color:var(--white);} .jr-widerruf-alternativ{color:var(--steel); font-size:15px;} .jr-widerruf-alternativ a{color:var(--red-bright);} /* ---- Kontakt-/Anfrageseite ---- */ .jr-kontakt-grid{display:grid; grid-template-columns:1.7fr 1fr; gap:26px; align-items:start; max-width:980px;} .jr-kontakt-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px;} .jr-kontakt-form p{margin:0 0 16px;} .jr-kontakt-row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;} .jr-kontakt-form label{display:block; margin-bottom:6px; color:var(--steel-light); font-size:16px;} .jr-kontakt-form .jr-opt{color:var(--steel); font-size:14px;} .jr-kontakt-form input[type=text], .jr-kontakt-form input[type=email], .jr-kontakt-form textarea, .jr-kontakt-form select{width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--white); padding:10px 12px; font-size:17px;} .jr-kontakt-form input:focus, .jr-kontakt-form textarea:focus, .jr-kontakt-form select:focus{outline:none; border-color:var(--red);} .jr-kontakt-form .jr-hp{position:absolute !important; left:-9999px !important; height:1px; overflow:hidden;} .jr-kontakt-submit{background:var(--red); color:#fff; border:none; border-radius:var(--radius); padding:13px 26px; font-size:17px; font-weight:700; letter-spacing:0.04em; cursor:pointer; text-transform:uppercase;} .jr-kontakt-submit:hover{background:var(--red-bright);} .jr-kontakt-ok{border:1px solid #2f9e44; background:rgba(47,158,68,0.1); border-radius:var(--radius); padding:20px 24px;} .jr-kontakt-ok h3{color:#51cf66; margin-bottom:8px;} .jr-kontakt-fehler{border:1px solid var(--red); background:rgba(224,27,36,0.1); border-radius:var(--radius); padding:14px 20px 14px 22px; margin-bottom:18px; color:var(--white);} .jr-kontakt-fehler ul{margin:0; padding-left:18px;} .jr-kontakt-aside > div{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px;} .jr-kontakt-hours{border-left:3px solid var(--red-bright) !important;} .jr-kontakt-aside h3{font-size:18px; color:var(--white); margin:0 0 12px;} .jr-kontakt-hours ul{list-style:none; margin:0 0 12px; padding:0;} .jr-kontakt-hours li{display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px solid var(--line); font-size:16px;} .jr-kontakt-hours li:last-child{border-bottom:none;} .jr-kontakt-hours li span{color:var(--steel);} .jr-kontakt-hours li b{color:var(--white); white-space:nowrap;} .jr-kontakt-hours p, .jr-kontakt-direkt p{color:var(--steel-light); font-size:15.5px; line-height:1.6; margin:0 0 8px;} .jr-kontakt-direkt a{color:var(--red-bright);} .jr-kontakt-adresse{color:var(--steel); font-size:15px;} @media (max-width:768px){ .jr-kontakt-grid{grid-template-columns:1fr;} .jr-kontakt-row{grid-template-columns:1fr;} } /* ---- Kasse: AGB-Box (gleiche Optik wie Passgenauigkeit/Service-Box) ---- */ .jr-kasse-hinweis-agb{border-left:3px solid var(--red-bright);} .jr-kasse-hinweis-agb .form-row{margin:0; padding:0;} .jr-kasse-hinweis-agb label.checkbox{display:flex; gap:11px; align-items:flex-start; font-size:16.5px; line-height:1.6; color:var(--white); cursor:pointer;} .jr-kasse-hinweis-agb label.checkbox input{margin-top:3px; width:18px; height:18px; accent-color:var(--red-bright); flex:none;} .jr-kasse-hinweis-agb .woocommerce-terms-and-conditions{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:0 0 12px;} /* ---- Kasse: Produktbilder in der Bestellübersicht ---- */ .woocommerce-checkout-review-order-table td.product-name{display:flex; flex-wrap:wrap; align-items:center; gap:12px;} .woocommerce-checkout-review-order-table .jr-review-thumb{flex:none;} .woocommerce-checkout-review-order-table .jr-review-thumb img{width:54px; height:54px; object-fit:contain; display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2px;} .woocommerce-checkout-review-order-table .jr-review-name{flex:1; min-width:140px;} .woocommerce-checkout-review-order-table td.product-name dl.variation{flex-basis:100%; margin:0 0 0 66px;} /* ---- Kasse: Anmerkungs-Box + prominente Gesamtsumme ---- */ .jr-kasse-hinweis-anmerkung{border-left:3px solid var(--steel);} .jr-kasse-hinweis-anmerkung .jr-anmerkung-optional{font-size:14px; font-weight:400; color:var(--steel); text-transform:none;} .jr-kasse-hinweis-anmerkung .form-row{margin:0; padding:0;} .jr-kasse-hinweis-anmerkung textarea{width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--white); padding:10px 12px; font-size:16.5px;} .jr-kasse-hinweis-anmerkung textarea:focus{outline:none; border-color:var(--red);} /* Hohe Spezifität nötig: die ältere Regel ".woocommerce-checkout table.shop_table tfoot td{font-size:18px}" (Phase-3-Kassen-Styling) gewinnt sonst den Kaskaden-Kampf. */ .woocommerce-checkout table.shop_table tfoot tr.order-total th, .woocommerce-checkout table.shop_table tfoot tr.order-total td{background:rgba(224,27,36,0.09); border-top:2px solid var(--red) !important; border-bottom:2px solid var(--red); padding-top:16px; padding-bottom:16px;} .woocommerce-checkout table.shop_table tfoot tr.order-total th{font-family:'Oswald',sans-serif; font-size:21px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--white);} .woocommerce-checkout table.shop_table tfoot tr.order-total td{font-size:32px; font-weight:700; color:var(--red-bright);} .woocommerce-checkout table.shop_table tfoot tr.order-total td .woocommerce-Price-amount{white-space:nowrap;} /* ---- Kasse: Mobile ---- */ /* Breakpoint 768px (nicht 560): schon ab dieser Breite stellt sich das Layout einspaltig um (col2-set), deshalb muss die Produkttabelle hier ebenfalls stapeln — sonst quetschen die festen Desktop-Spaltenbreiten die Artikel im Bereich 561–768px nach links. */ @media (max-width:768px){ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields{padding:14px 12px;} /* Box-Verschachtelung auflösen: der #order_review-Rahmen entfällt mobil, damit Tabelle und #payment die einzigen umrandeten Boxen sind (kein „Box in Box“, kein doppelt eingeschnürter Text). */ .woocommerce-checkout .woocommerce-checkout-review-order{padding:0; border:0; background:none;} .woocommerce-checkout #payment{margin-top:16px;} .woocommerce-checkout .place-order .jr-kasse-hinweis-agb .woocommerce-terms-and-conditions{padding:10px 12px;} .woocommerce-checkout form .form-row-first, .woocommerce-checkout form .form-row-last{grid-column:span 2;} .woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td{padding:10px 6px; font-size:13px;} .woocommerce-checkout table.shop_table th.product-name, .woocommerce-checkout table.shop_table td.product-name, .woocommerce-checkout table.shop_table tfoot th{padding-left:8px;} .woocommerce-checkout table.shop_table th.product-total, .woocommerce-checkout table.shop_table td.product-total, .woocommerce-checkout table.shop_table tfoot td{padding-right:8px;} /* Bestellübersicht mobil als kompakte Karten — Optik wie im Warenkorb-Reiter: Bild links, Name + Zeilensumme oben, darunter Einzelpreis, Maße in EINER Zeile, dann Menge. Die 4-Spalten-Tabelle wird dafür komplett auf Grid/Block umgestellt, sonst schiebt das Tabellen-Spaltenmodell (feste Breiten + nowrap) die Tabelle über den rechten Rand, während der Artikelname nach links gequetscht wird. */ .woocommerce-checkout-review-order-table, .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot{display:block; width:100%; max-width:100%;} .woocommerce-checkout-review-order-table thead{display:none;} /* Jede Position ein Grid: Spalte 1 = Bild, Spalte 2/3 = Name + Zeilensumme. */ .woocommerce-checkout-review-order-table tbody tr.cart_item{ display:grid; grid-template-columns:54px 1fr auto; grid-template-areas:"thumb name total" "thumb price price" "thumb var var" "thumb menge menge"; column-gap:11px; row-gap:4px; align-items:start; padding:14px 12px; border-top:1px solid var(--line);} /* product-name auflösen, damit Bild/Name/Maße eigene Grid-Zellen werden. */ .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name{display:contents;} .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name::before{display:none;} .woocommerce-checkout-review-order-table .jr-review-thumb{grid-area:thumb; align-self:start;} .woocommerce-checkout-review-order-table .jr-review-thumb img{width:54px; height:54px;} .woocommerce-checkout-review-order-table .jr-review-name{grid-area:name; align-self:center; min-width:0; font-weight:600; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere;} /* Zeilensumme oben rechts, ohne Label. */ .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total{ grid-area:total; align-self:center; display:block; width:auto; padding:0; border:0; text-align:right; font-weight:600; font-size:13.5px; white-space:nowrap;} .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total::before{display:none;} /* Einzelpreis: schlichte Zeile unter dem Namen (kein lautes Label). */ .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-price{ grid-area:price; display:block; width:auto; padding:0; border:0; text-align:left; font-size:13px; color:var(--steel-light);} .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-price::before{display:none;} /* Maße kompakt in EINER Zeile, mit „ / “ getrennt (dt/dd von WooCommerce sind normalerweise float:left+clear:both → dadurch stapeln sie; hier float lösen). */ .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name dl.variation{ grid-area:var; margin:0; padding:0; font-size:12px; color:var(--steel-light); line-height:1.5;} .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dd{float:none !important; clear:none !important;} .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dd, .woocommerce-checkout-review-order-table dl.variation dd p{display:inline; margin:0; font-weight:400;} .woocommerce-checkout-review-order-table dl.variation dt{margin-right:3px;} .woocommerce-checkout-review-order-table dl.variation dd:not(:last-of-type)::after{content:" / "; color:var(--steel);} /* Menge: dezente Zeile mit kleinem Label. */ .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-quantity{ grid-area:menge; display:flex; gap:5px; justify-content:flex-start; align-items:baseline; width:auto; padding:0; border:0; text-align:left; font-size:12px; color:var(--steel-light);} .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-quantity::before{ content:attr(data-title); font-family:'Work Sans',sans-serif; font-size:12px; letter-spacing:0; text-transform:none; color:var(--steel); flex:none;} /* Summenblock in der dezenten Warenkorb-Optik: eine Zeile je Posten (Bezeichnung links / Betrag rechts), hellgraue Schrift, KEIN Rot, KEINE Box, keine Striche mit Lücke. Nur je eine dünne Trennlinie über dem Summenblock und über der Gesamtsumme. */ .woocommerce-checkout-review-order-table tfoot tr{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 14px; border:0;} .woocommerce-checkout-review-order-table tfoot tr th, .woocommerce-checkout-review-order-table tfoot tr td{display:block; width:auto; padding:0 !important; border:0 !important; text-align:right; background:none !important; font-size:13.5px; font-weight:400; color:var(--steel-light);} .woocommerce-checkout-review-order-table tfoot tr th{text-align:left;} /* Trennlinie zwischen Produkten und Summen (dünn, neutral). */ .woocommerce-checkout-review-order-table tfoot tr:first-child{border-top:1px solid var(--line) !important; margin-top:4px; padding-top:14px;} /* Gesamtsumme: abgesetzt durch dünne Linie + etwas größere, weiße Schrift (wie im Warenkorb). */ .woocommerce-checkout table.shop_table tfoot tr.order-total{background:none !important; border:0 !important; border-top:1px solid var(--line) !important; margin-top:8px; padding:14px;} .woocommerce-checkout table.shop_table tfoot tr.order-total th, .woocommerce-checkout table.shop_table tfoot tr.order-total td{border:0 !important; background:none !important; padding:0 !important; font-family:'Work Sans',sans-serif !important; text-transform:none !important; letter-spacing:0 !important; color:#fff !important;} .woocommerce-checkout table.shop_table tfoot tr.order-total th{font-size:16px !important; font-weight:600 !important;} .woocommerce-checkout table.shop_table tfoot tr.order-total td{font-size:20px !important; font-weight:700 !important;} .woocommerce-checkout #payment ul.payment_methods{padding:12px;} .woocommerce-checkout .place-order{padding:12px;} .jr-kasse-hinweis{padding:14px 12px;} } /* Modell-Landingpages (/gutachten/jr23/ …): Produktfoto als kompakte weiße Kachel statt der Startseiten-Hero-Größe (Furkan 19.08.2026: ~30 % Größe + Rahmen). */ .hero-visual.jr-modell-visual{justify-self:center;} .hero-visual.jr-modell-visual img{width:280px; max-width:100%; margin:0 auto; display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; filter:none; height:auto;} .hero-visual.jr-modell-visual .hero-visual-tag{position:static; text-align:center; margin-top:10px; padding:0;} /* Modell-Verzeichnis unter der Gutachten-Tabelle (Einstieg + interne Verlinkung). */ .jr-modell-liste-intro{color:var(--steel-light); margin:-8px 0 20px;} .jr-modell-chips{display:flex; flex-wrap:wrap; gap:10px;} .jr-modell-chip{display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,0.02); color:var(--white); font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.04em; transition:color .18s, border-color .18s, background .18s;} .jr-modell-chip:hover{border-color:var(--red-bright); background:rgba(224,27,36,0.13);} .jr-modell-chip.is-aktiv{border-color:var(--red-bright); color:var(--red-bright);} @media(max-width:768px){ .jr-modell-chips{gap:8px;} .jr-modell-chip{padding:8px 13px; font-size:13px;} }