/* =========================================================
   Bilder Manufaktur Hamburg – Design (an bestehende Seite angelehnt)
   Schriften: Raleway (Text) · Bebas Neue (Headlines) – wie The7/Elementor
   Farben: Grau #575756 · Orange #f27322
   ========================================================= */
@font-face{font-family:"Raleway";src:url("../assets/fonts/raleway-normal-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Raleway";src:url("../assets/fonts/raleway-italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:"Bebas Neue";src:url("../assets/fonts/bebas-neue-normal-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Ephesis";src:url("../assets/fonts/ephesis-normal-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root{
  --orange:#ef7d00; --orange-dark:#d56e00; --grey:#575756; --grey-light:#8a8a89;
  --ink:#3a3a3a; --line:#e3e3e1; --bg:#ffffff; --bg-soft:#f5f4f2; --bg-warm:#faf7f3;
  --catbar:#eceae6; --ok:#2f855a; --radius:10px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-lg:0 18px 50px rgba(0,0,0,.14); --maxw:1100px;
  --font:"Raleway","Helvetica Neue",Arial,sans-serif;
  --display:"Bebas Neue","Raleway",sans-serif;
  --script:"Ephesis",cursive;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--grey);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--orange);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2{font-family:var(--font);font-weight:500;letter-spacing:.9px;line-height:1.2;color:var(--ink);margin:0 0 .45em;}
h1{font-size:34px;text-transform:uppercase;}
h2{font-size:34px;}
h3,h4{font-family:var(--font);font-weight:600;color:var(--grey);line-height:1.3;margin:0 0 .5em;}
h3{font-size:18px;} h4{font-size:18px;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.muted{color:var(--grey-light);}
.center{text-align:center;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:4px;font-family:var(--font);font-weight:700;
  font-size:15px;letter-spacing:.3px;text-transform:uppercase;padding:14px 28px;cursor:pointer;transition:.15s;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-dark);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--grey);border:1.5px solid #cfcfcd;}
.btn-ghost:hover{border-color:var(--grey);text-decoration:none;}
.btn-green{background:#4a9d2f;color:#fff;}
.btn-green:hover{background:#3c8526;color:#fff;text-decoration:none;}
.btn-lg{font-size:16px;padding:16px 34px;}

/* =================== HEADER (zentriertes Logo) =================== */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);}
.topbar{background:#faf9f7;border-bottom:1px solid #ececec;font-size:13.5px;color:var(--grey);}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:7px 24px;}
.topbar a{color:var(--grey);}
.topbar a:hover{color:var(--orange);text-decoration:none;}
.topbar .tb-sep{color:#c9c8c4;}
.topbar .tb-right{color:var(--grey-light);}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:30px 24px;transition:padding .25s ease;}
.hdr-left{justify-self:start;color:var(--grey);font-weight:600;font-size:14px;}
.hdr-left a{color:var(--grey);}
.logo{justify-self:center;}
.logo img{height:132px;width:auto;transition:height .25s ease;}
/* Logo + Header schrumpfen beim Scrollen (Klasse .scrolled per JS) */
.site-header.scrolled .header-inner{padding:10px 24px;}
.site-header.scrolled .logo img{height:70px;}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:16px;}
.hdr-cart{display:inline-flex;align-items:center;gap:8px;color:var(--grey);font-weight:600;font-size:14px;}
.burger{display:none;border:none;background:none;font-size:26px;cursor:pointer;color:var(--grey);}

/* graue Material-Menüleiste – einzeilig */
.catbar{background:var(--catbar);border-top:1px solid #e0ded9;overflow:visible;}
.catbar-inner{display:flex;align-items:center;gap:12px;min-height:46px;flex-wrap:nowrap;justify-content:center;max-width:1100px;}
.catbar .home{display:flex;align-items:center;color:#141414;padding:0 2px;text-decoration:none;flex:none;}
.catbar .home svg{width:22px;height:22px;display:block;}
.catbar .home:hover{color:var(--orange);}
/* Menü über die volle Breite (= Headerfoto 1100px) verteilen, Schriftgröße bleibt */
.catmenu{display:flex;flex:1;flex-wrap:nowrap;justify-content:space-between;list-style:none;margin:0;padding:0;}
.catmenu > li{position:relative;white-space:nowrap;}
.catmenu > li > a{display:block;padding:12px 8px;color:var(--grey);font-weight:600;font-size:14px;}
.catmenu > li > a:hover{color:var(--orange);text-decoration:none;}
.catmenu li ul{position:absolute;left:0;top:100%;min-width:240px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);list-style:none;margin:0;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.16s;z-index:70;}
.catmenu li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);}
.catmenu li ul a{display:block;padding:9px 18px;color:var(--grey);font-size:14px;font-weight:500;}
.catmenu li ul a:hover{background:var(--bg-soft);color:var(--orange);text-decoration:none;}

/* =================== HERO =================== */
.hero{position:relative;min-height:560px;display:flex;align-items:flex-end;justify-content:center;text-align:center;
  background-size:cover;background-position:center;color:#fff;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16));}
.hero .hero-inner{position:relative;z-index:2;padding:0 24px 72px;max-width:1000px;}
.hero .hero-title{font-family:var(--display);font-weight:500;letter-spacing:0.9px;text-transform:uppercase;color:#fff;font-size:clamp(56px,12vw,153px);line-height:0.8;text-shadow:0 3px 18px rgba(0,0,0,.45);margin:0;}
.hero .sub{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,39px);letter-spacing:0.2px;word-spacing:0;line-height:1.5;color:#fff;margin:6px 0 22px;text-shadow:0 2px 12px rgba(0,0,0,.5);}
@media(max-width:700px){ .hero{min-height:400px;} .hero .hero-inner{padding:0 20px 48px;} }

/* Fließtext sitewide einheitlich 16px (Startseiten-Werte global gezogen) */
li{font-size:16px;}

/* trust strip */
.trust-strip{background:#fff;border-bottom:1px solid var(--line);}
.trust-strip .container{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;padding:16px 24px;}
.trust-strip div{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--grey);}
.trust-strip .c{color:var(--orange);font-size:17px;}

/* sections */
section{padding:62px 0;}
section.pt-sm{padding-top:26px;}   /* Sektion mit kleinerem oberen Abstand */
.section-head{max-width:1100px;margin:0 auto 36px;text-align:left;}
/* Startseite: Überschrift (und Intro) mittig unter dem zentrierten Divider-Icon */
.section-head:has(.icon-divider){text-align:center;}
/* Überschrift über zentrierten Videos ebenfalls mittig (Video ist 920px, zentriert) */
.section-head:has(+ .material-view){text-align:center;}
/* Beschreibungs-Überschrift über einem Foto-Text-Block (Split) mittig */
.section-head:has(+ .split){text-align:center;}
.section-head.sh-left{text-align:left;}
.cat-link{color:var(--ink);} .cat-link:hover{color:var(--orange);text-decoration:none;}
/* Shop-Übersicht: Kategorien enger gesetzt + Trennstrich */
.shop-cat{padding:30px 0;}
.shop-cat .section-head{margin:0 auto 22px;padding-top:30px;border-top:1px solid var(--line);}
.shop-cat:first-of-type .section-head{padding-top:0;border-top:none;}
/* Shop-Übersicht: kompakte, fixe Kacheln – linksbündig, ca. 4–5 pro Reihe */
.shop-grid{display:flex;flex-wrap:wrap;gap:18px;max-width:1100px;margin:0 auto;justify-content:flex-start;}
.shop-grid .variant-card{width:176px;}
.shop-grid .variant-card .vc-body{padding:13px 15px 15px;}
.shop-grid .variant-card h3{font-size:15px;margin:0 0 8px;}
.shop-grid .variant-card li{font-size:13px;margin:4px 0;}
@media(max-width:520px){ .shop-grid{justify-content:center;} .shop-grid .variant-card{width:100%;max-width:320px;} }
.section-head p{font-size:16px;}
.bg-soft{background:var(--bg-soft);}

/* materials grid */
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;}
.mat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.15s;display:block;color:inherit;}
.mat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none;border-color:#dcdcd9;}
.mat-card .swatch{height:130px;}
.mat-card .mat-body{padding:16px 18px;}
.mat-card h3{margin:0 0 4px;}
.mat-card p{margin:0;font-size:14px;color:var(--grey-light);}
.mat-card .from{display:inline-block;margin-top:10px;color:var(--orange);font-weight:700;font-size:14.5px;}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center;}
.step .num{width:54px;height:54px;border-radius:999px;background:var(--orange);color:#fff;font-family:var(--display);font-size:26px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin:0 auto;}
.feature h3{display:flex;align-items:center;gap:10px;}
.feature .ic{color:var(--orange);font-size:20px;}

/* green band */
.band{background:linear-gradient(120deg,#eef3ea,#e7efe0);border-radius:16px;padding:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;}
.band h2{margin-top:0;}

/* faq */
.faq{max-width:1100px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;padding:4px 20px;}
.faq summary{cursor:pointer;font-weight:700;color:var(--grey);padding:16px 0;list-style:none;font-size:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--orange);font-size:22px;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{padding-bottom:16px;margin:0;}

/* CTA band */
.cta-band{background:var(--grey);color:#fff;border-radius:16px;padding:48px;text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:#e6e6e4;max-width:620px;margin:0 auto 24px;}

/* =================== FOOTER =================== */
.site-footer{background:#dcdbd7;color:#575756;padding:54px 0 26px;font-size:16px;}
.site-footer a{color:#575756;}
.site-footer a:hover{color:var(--orange);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
.site-footer h4{color:#3a3a3a;letter-spacing:.5px;margin-bottom:14px;text-transform:none;font-size:16px;font-weight:700;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin:8px 0;}
.foot-logo{height:104px;width:auto;margin-bottom:16px;}
.foot-sub{font-weight:700;color:#3a3a3a;margin:16px 0 8px;}
.site-footer .f-accent{color:#b5552f;}
.site-footer .f-accent:hover{color:var(--orange);}
.foot-social{display:flex;gap:12px;margin-top:14px;}
.foot-social a{width:40px;height:40px;border-radius:999px;background:#9a9a97;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .15s;}
.foot-social a svg{width:20px;height:20px;display:block;}
.foot-social a:hover{background:var(--orange);color:#fff;}
.foot-bottom{border-top:1px solid #c4c3bf;margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:#6b6b69;}
.foot-bottom a{color:#575756;}

/* =================== INHALTSSEITEN =================== */
.crumbs{font-size:13.5px;color:var(--grey-light);margin-bottom:14px;}
.crumbs a{color:var(--grey-light);}
.page-hero{padding:42px 0 38px;}
.page-hero .container{max-width:1100px;}
.page-hero h1{margin:0 0 12px;}
.page-hero .lead{font-size:18px;max-width:760px;margin:0;}
.prose{max-width:1100px;}
.prose h2{margin:34px 0 12px;}
.prose p{font-size:16px;}
.prose ul{padding-left:22px;} .prose li{margin:6px 0;}
/* Rechtsseiten (Impressum, AGB, Datenschutz, Widerruf): kompakte Zwischen-Überschriften */
.legal-doc{padding:14px 0 44px;}
/* Häkchen-Liste (z. B. Zahlungsseite) */
.portrait-soft{width:100%;height:auto;border-radius:8px;display:block;}
/* Über-uns: gesamte Seite einheitlich auf 1100px (wie alle anderen Seiten) */
.about-page .container{max-width:1100px;}
/* Über-uns: kleines, rundes Team-Foto (maskiert weiße Ecken der Bilddatei) */
.about-team{display:flex;gap:32px;align-items:flex-start;max-width:1100px;margin:0 auto;}
.about-team img{width:230px;height:230px;border-radius:50%;object-fit:cover;flex:none;}
.about-team > div{font-size:15px;line-height:1.6;}
@media(max-width:760px){ .about-team{flex-direction:column;align-items:center;text-align:center;} }
.check-list{list-style:none;padding-left:0;}
.check-list li{position:relative;padding-left:28px;margin:8px 0;}
.check-list li::before{content:"✔";position:absolute;left:0;color:var(--orange,#ef7d00);font-weight:700;}
.legal-doc .prose h2{font-size:17px;font-weight:600;letter-spacing:.5px;margin:28px 0 12px;padding-top:26px;border-top:1px solid #ddd;}
.legal-doc .prose h2:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px auto 8px;max-width:1100px;}
@media(max-width:760px){ .cards-3{grid-template-columns:1fr;} }
.info-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;}
.info-card h3{font-size:16px;margin:0 0 6px;}
.info-card p{font-size:14.5px;margin:0;}
.info-card ul{padding-left:20px;margin:8px 0 0;}
.info-card li{font-size:14.5px;margin:5px 0;color:var(--grey);}
.info-card .tip{margin-top:10px;font-size:14px;color:var(--orange-dark,#c25e00);font-weight:600;}
.claim-box{text-align:center;font-size:16px;line-height:1.5;}
.claim-box strong{color:var(--grey);}
.cta-inline{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 6px;}
.data-table{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:15px;}
.data-table th,.data-table td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
.data-table th{background:var(--bg-soft);color:var(--grey);font-weight:700;}
.note-box{background:var(--bg-soft);border:1px solid var(--line);color:var(--grey);border-radius:10px;padding:16px 18px;font-size:15px;margin:6px 0 18px;}

/* =================== PRODUKTSEITE =================== */
.prod-title{text-align:center;margin:0 0 28px;font-size:clamp(26px,3.4vw,34px);}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.pc-gallery{position:sticky;top:120px;}
.pc-main{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);object-fit:cover;}
.pc-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
.pc-thumb{width:74px;height:74px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;}
.pc-thumb:hover{border-color:var(--orange);}
.pc-panel{border:1px solid var(--line);border-radius:12px;padding:22px 24px;}
.pc-h{font-size:17px;margin:0 0 4px;text-transform:none;letter-spacing:0;}
.pc-hint{color:var(--grey-light);font-size:14px;margin:0 0 14px;}
.pc-ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.pc-ratio{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 6px;cursor:pointer;font:inherit;}
.pc-ratio:hover{border-color:#cfcfcd;}
.pc-ratio.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);}
.pc-r-box{background:var(--orange);color:#fff;font-size:12px;font-weight:700;border-radius:4px;padding:3px 8px;}
.pc-r-label{font-size:12.5px;color:var(--grey);}
.pc-field{margin-bottom:18px;}
.pc-field label{display:block;font-weight:600;color:var(--grey);margin-bottom:8px;font-size:15px;}
.pc-field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--grey);}
.pc-orient{display:flex;gap:10px;}
.pc-or{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;font:inherit;color:var(--grey);}
.pc-or:hover{border-color:#cfcfcd;}
.pc-or.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);font-weight:600;}
.pc-sum{margin:6px 0 14px;}
.pc-sum-label{margin:0;color:var(--grey);}
.pc-price{margin:2px 0 0;font-size:30px;font-weight:700;color:var(--ink);}
.pc-sum-note{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--grey);line-height:1.45;}
.pc-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px;}
.pc-qty button{width:42px;height:42px;border:0;background:#fff;font-size:20px;color:var(--grey);cursor:pointer;}
.pc-qty button:hover{background:var(--bg-soft);}
.pc-qty input{width:48px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);height:42px;font:inherit;}
.pc-cta{display:block;text-align:center;width:100%;}
.prod-guide{display:block;background:var(--orange);color:#fff;border-radius:12px;padding:22px 26px;}
.prod-guide:hover{background:var(--orange-dark);text-decoration:none;}
.prod-guide strong{display:block;font-size:18px;margin-bottom:4px;}
.prod-guide span{color:#fff;opacity:.95;}
.prod-tables{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;align-items:start;}
.prod-tables.cols-4{grid-template-columns:repeat(4,1fr);}
.prod-tables .data-table th{background:#eaf2fb;color:var(--ink);text-align:left;}
.wunsch{align-self:start;}
.wunsch img{width:100%;border-radius:10px;margin-bottom:12px;}
.wunsch h3{margin:0 0 6px;}
@media(max-width:860px){ .pc-grid{grid-template-columns:1fr;} .pc-gallery{position:static;} .prod-tables{grid-template-columns:1fr;} }

/* =================== STARTSEITE-BLÖCKE (wie Original) =================== */
.icon-divider{width:108px;height:auto;margin:0 auto 16px;opacity:.95;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1100px;margin:0 auto;}
/* Fotos neben Texten: einheitlich quadratisch (1:1), mittiger Zuschnitt */
.split img{border-radius:12px;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;}
.split img.portrait{width:100%;aspect-ratio:1/1;object-fit:cover;}
/* Textspalte: kompakte Typografie (15px / 1.6), vertikal zentriert */
.split > div{align-self:center;font-size:16px;line-height:1.6;}
.split > div h2{margin-top:0;}
/* Magie-Split: Überschrift 50% größer (18→27px) + oben bündig zur Fotokante */
body.home .split h3{font-size:27px;}
body.home .split:has(h3){align-items:flex-start;}
.icon-list{padding-left:1.3em;margin:1em 0;font-size:16px;line-height:1.6;}
.icon-list li{margin:.45em 0;}
/* Alle Produktseiten einheitlich auf 1000px begrenzen (auch FAQ & Kontakt-Strip) */
.prod-page .container{max-width:1100px;}
/* Produktseiten: kompaktere Abstände zwischen den Abschnitten */
.prod-page section{padding:60px 0;}
.prod-page .section-head{margin:0 auto 20px;}
.checklist{list-style:none;padding:0;margin:16px 0;}
.checklist li{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-weight:600;color:var(--grey);}
.checklist li::before{content:"✓";color:var(--orange);font-weight:800;}
/* Öko-Block: grüne Blatt-Icons statt oranger Haken */
.bg-green .checklist li{align-items:center;}
.bg-green .checklist li::before{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a9d2f' stroke='%234a9d2f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath fill='none' d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E") no-repeat center/contain;}
.bg-green{background:linear-gradient(120deg,#eef3ea,#e6efde);}
.bg-peach{background:#faf2e9;}
.feat-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:center;margin:10px auto 0;max-width:1100px;}
.feat-icons .ic{font-size:30px;color:var(--orange);margin-bottom:6px;}
.feat-icons .ic svg{width:42px;height:42px;display:inline-block;}
.axel{display:grid;grid-template-columns:1.5fr .7fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto;}
.axel img{border-radius:999px;width:100%;max-width:300px;justify-self:center;aspect-ratio:1;object-fit:cover;}
.axel .name{font-family:var(--script);font-weight:400;font-size:50px;line-height:1;color:var(--grey);text-transform:none;letter-spacing:.5px;margin:0 0 6px;}
.axel .role{font-family:var(--font);font-weight:500;font-size:24px;color:var(--orange);text-transform:none;letter-spacing:.5px;margin:0 0 18px;}
.axel blockquote{position:relative;margin:0 0 14px;padding-left:36px;}
.axel blockquote::before{content:"\201C";position:absolute;left:-4px;top:6px;font-family:Georgia,serif;font-size:68px;color:#d3d3d1;line-height:0;}
.axel blockquote p{margin:0 0 12px;}
@media(max-width:900px){ .split,.axel{grid-template-columns:1fr;} .feat-icons{grid-template-columns:1fr;}
  /* gestapelt: Foto bleibt quadratisch, aber nicht zu groß */
  .split img,.split img.portrait{aspect-ratio:1/1;object-fit:cover;max-width:520px;margin:0 auto;} }

/* =================== RESPONSIVE =================== */
@media(max-width:900px){
  .mat-grid,.steps,.features{grid-template-columns:1fr;}
  .band{grid-template-columns:1fr;padding:30px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .burger{display:block;}
  .catbar{display:none;}
  .catbar.open{display:block;}
  .catbar-inner{flex-direction:column;align-items:stretch;gap:0;}
  .catmenu{flex-direction:column;flex:none;justify-content:flex-start;}
  .catmenu li ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 6px 16px;}
  .header-inner{grid-template-columns:auto 1fr auto;}
  .logo img{height:94px;}
}
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr;} }

/* =========================================================
   KATEGORIESEITEN – wiederverwendbares Schema
   (Banner → Intro → Anwendungen → Laminat-Varianten →
    Eigenschaften → DIBOND-Original → Montage →
    Materialansicht-Video → Farbvarianten → FAQ → Kontakt → Axel)
   ========================================================= */

/* Banner – neutral (wie zuvor: auf Inhaltsbreite, Theme-/Seiten-Hintergrund) */
.cat-banner-fw{max-width:var(--maxw);margin:28px auto 0;padding:0 24px;box-sizing:border-box;}
.cat-banner{width:100%;height:clamp(240px,33vw,450px);object-fit:cover;display:block;}
.cat-banner.no-frame{object-position:50% 100%;}
/* Graues Band – nur auf neutralen (nicht thematisierten) Kategorieseiten */
.cat-banner-fw.band{--band:var(--bg-soft);max-width:none;margin:0;width:100%;
  background:var(--band);display:flex;align-items:center;justify-content:center;
  padding:34px 24px;overflow:hidden;}
.cat-banner-fw.band .cat-banner{max-width:var(--maxw);height:clamp(220px,30vw,420px);
  border-radius:4px;box-shadow:0 6px 22px rgba(0,0,0,.12);}

/* Intro-Block unter dem Banner */
.cat-intro{max-width:1100px;text-align:left;}
.cat-intro p{font-size:16px;}

/* Laminat-/Material-Varianten mit Video */
.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:1100px;margin:0;}
.variant-grid.two{grid-template-columns:repeat(2,1fr);max-width:1100px;margin:0 auto;}
.variant-grid.five{grid-template-columns:repeat(5,1fr);gap:20px;max-width:1100px;}
.variant-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.15s;}
.variant-card:hover{box-shadow:var(--shadow);border-color:#dcdcd9;transform:translateY(-3px);}
.variant-card video,.variant-card img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bg-soft);}
.variant-grid.tall .variant-card video,.variant-grid.tall .variant-card img{aspect-ratio:1/1;}
.variant-card .vc-body{padding:18px 20px 22px;}
.variant-card h3{margin:0 0 10px;color:var(--ink);}
.variant-card ul{list-style:none;margin:0;padding:0;}
.variant-card li{display:flex;gap:9px;align-items:flex-start;margin:7px 0;font-size:14.5px;font-weight:600;color:var(--grey);}
.variant-card li::before{content:"•";color:var(--ink);font-weight:800;flex:none;font-size:1.5em;line-height:1;}

/* Produkte als horizontale Karten, 2 nebeneinander (Modifikator .list – z. B. Holzdruck) */
.variant-grid.list{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:0 auto;}
.variant-grid.list .variant-card{flex-direction:row;width:auto;align-items:stretch;}
.variant-grid.list .variant-card img,.variant-grid.list .variant-card video{width:210px;height:210px;flex:none;aspect-ratio:1/1;object-fit:cover;align-self:center;}
.variant-grid.list .vc-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:18px 22px;}
.variant-grid.list .vc-body h3{font-size:19px;margin:0 0 10px;}
.variant-grid.list .vc-body ul{display:block;}
.variant-grid.list .vc-body li{width:100%;margin:6px 0;}
@media(max-width:820px){ .variant-grid.list{grid-template-columns:1fr;} }
@media(max-width:640px){
  .variant-grid.list .variant-card{flex-direction:column;}
  .variant-grid.list .variant-card img,.variant-grid.list .variant-card video{width:100%;height:auto;aspect-ratio:1/1;}
}

/* DIBOND-Original-Block: Logo + Text */
.dibond-block{display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto;
  background:transparent;border:none;border-radius:0;padding:6px 0;}
.dibond-block .dibond-photo img{width:100%;border-radius:0;}
/* Variante: Foto füllt die volle Spaltenhöhe (Höhe = Text + Überschrift) */
.dibond-block.stretch{align-items:stretch;}
.dibond-block.stretch .dibond-photo{height:100%;}
.dibond-block.stretch .dibond-photo img{height:100%;object-fit:cover;border-radius:10px;}
.dibond-block.reverse{grid-template-columns:1.35fr 1fr;}
.dibond-block.reverse .dibond-photo{order:2;}
.dibond-block ul{list-style:none;margin:14px 0 0;padding:0;}
.dibond-block li{margin:10px 0;padding-left:24px;position:relative;font-size:15.5px;}
.dibond-block li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--orange);}
.dibond-block li strong{color:var(--ink);}

/* Materialansicht – großes Video */
.material-view{max-width:920px;margin:0 auto;}
.material-view video{width:100%;border-radius:14px;box-shadow:var(--shadow);background:#000;display:block;}

/* Farbvarianten – Farbe / Sepia / Schwarz-weiss */
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin:0 auto;}
.color-card{text-align:center;}
.color-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);margin-bottom:16px;}
.color-card h3{font-size:22px;color:var(--ink);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;}
.color-card p{font-size:14.5px;color:var(--grey);margin:0;}

/* Kontakt-Strip (Beratung Telefon · Mail · Besuch) – kompakt & klar lesbar */
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;align-items:center;
  background:var(--bg-soft);border-radius:14px;padding:22px 24px;max-width:1100px;margin:0 auto;}
.contact-strip > div{display:flex;flex-direction:column;align-items:center;gap:4px;}
.contact-strip a{color:var(--grey);}
.contact-strip a:hover{color:var(--orange);}
.contact-strip .cs-ic{width:38px;height:38px;color:var(--orange);margin-bottom:8px;}
.contact-strip h4{font-size:17px;color:var(--ink);margin:0;}
.contact-strip p{margin:0;font-size:16px;font-weight:600;}

@media(max-width:1100px){ .variant-grid.five{grid-template-columns:repeat(3,1fr);max-width:720px;} }
@media(max-width:900px){
  .variant-grid,.color-grid,.contact-strip,.variant-grid.five{grid-template-columns:1fr;}
  .dibond-block{grid-template-columns:1fr;gap:20px;padding:26px;text-align:center;}
  .dibond-block ul{text-align:left;}
  .dibond-block.stretch .dibond-photo img{height:auto;aspect-ratio:3/2;}
}

/* =========================================================
   DARK THEME – z. B. Black Magic (schwarzer Hintergrund)
   Wird über <main class="theme-dark"> bzw. <div class="theme-dark"> aktiviert.
   ========================================================= */
.theme-dark{background:#0d0d0d;color:#d4d4d4;padding-top:28px;}
.theme-dark .cat-banner{margin-top:0;}
.theme-dark h1,.theme-dark h2{color:#f5f5f5;}
.theme-dark h3,.theme-dark h4{color:#efefef;}
.theme-dark p{color:#cfcfcf;}
.theme-dark .bg-soft{background:#0d0d0d;}
.theme-dark .crumbs,.theme-dark .crumbs a,.theme-dark .crumbs span{color:#9a9a9a;}
.theme-dark a{color:var(--orange);}
.theme-dark .btn-primary{color:#fff;}
/* Produkt-/Materialkarten */
.theme-dark .variant-card{background:#1b1b1b;border-color:#333;}
.theme-dark .variant-card:hover{border-color:#4a4a4a;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.theme-dark .variant-card img,.theme-dark .variant-card video{background:#222;}
.theme-dark .variant-card h3{color:#f3f3f3;}
.theme-dark .variant-card li{color:#c8c8c8;}
.theme-dark .variant-card li::before{color:#c8c8c8;}
/* Prosa, Hinweis, FAQ */
.theme-dark .prose p,.theme-dark .prose li{color:#cfcfcf;}
.theme-dark .dibond-block li{color:#cfcfcf;}
.theme-dark .dibond-block li strong{color:#f0f0f0;}
.theme-dark .dibond-photo img{border-radius:10px;}
.theme-dark .note-box{background:#2a2a2a;border-color:#4a4a4a;color:#dcdcdc;}
/* Leinwand: engere vertikale Abstände zwischen den Sektionen */
.page-dein-leinwandbild-keilrahmenbild-kunstdruck-fotoleinwand section{padding-top:38px;padding-bottom:38px;}
/* Leinwand: Fotos in den Foto-Text-Blöcken mit runden Ecken (wie die übrigen Fotos) */
.page-dein-leinwandbild-keilrahmenbild-kunstdruck-fotoleinwand .dibond-photo img{border-radius:var(--radius);}
/* Foto-Text-Block umgekehrt: Text links (breiter), Foto rechts */
.dibond-block.photo-right{grid-template-columns:1.35fr 1fr;}
@media(max-width:760px){ .dibond-block.photo-right{grid-template-columns:1fr;} }
/* Black Magic: engere vertikale Abstände zwischen den Sektionen */
.page-bilderdruck-black-magic-wandbild-fotodruck section{padding-top:32px;padding-bottom:32px;}
.page-bilderdruck-black-magic-wandbild-fotodruck section.pt-sm{padding-top:18px;}
/* Black Magic: Ratgeber-Block schwarz mit weiß/orangenen Texten */
.page-bilderdruck-black-magic-wandbild-fotodruck .ratgeber-cta{background:#0d0d0d;}
.page-bilderdruck-black-magic-wandbild-fotodruck .ratgeber-cta h2,
.page-bilderdruck-black-magic-wandbild-fotodruck .ratgeber-cta .section-head p{color:#f5f5f5;}
.page-bilderdruck-black-magic-wandbild-fotodruck .ratgeber-cta .btn-ghost{color:#fff;border-color:#666;}
.page-bilderdruck-black-magic-wandbild-fotodruck .ratgeber-cta .btn-ghost:hover{border-color:#fff;}
.theme-dark .faq details{background:#1b1b1b;border-color:#333;}
.theme-dark .faq summary{color:#eee;}
.theme-dark .faq details p{color:#c4c4c4;}
.theme-dark .faq details[open]{border-color:#4a4a4a;}
/* Kontakt-Strip */
.theme-dark .contact-strip{background:#e6e6e6;}
.theme-dark .contact-strip h4{color:#1a1a1a;}
.theme-dark .contact-strip a,.theme-dark .contact-strip p{color:#1a1a1a;}
.theme-dark .contact-strip a:hover{color:var(--orange);}
/* Axel-Block */
.theme-dark .axel .name{color:#f3f3f3;}
.theme-dark .axel blockquote p{color:#cfcfcf;}
.theme-dark .axel blockquote::before{color:#444;}

/* =========================================================
   MAGENTA THEME – Magic Plexiglas (leuchtender Hintergrund)
   Aktiviert über <div class="theme-magenta">.
   ========================================================= */
.theme-magenta{background:linear-gradient(165deg,#e61735 0%,#c11329 45%,#8f0e20 100%);color:#fff;padding-top:28px;}
.theme-magenta .cat-banner{margin-top:0;}
.theme-magenta h1,.theme-magenta h2,.theme-magenta h3,.theme-magenta h4{color:#fff;}
.theme-magenta p,.theme-magenta .section-head p{color:#fff;}
.theme-magenta .crumbs,.theme-magenta .crumbs a,.theme-magenta .crumbs span{color:rgba(255,255,255,.82);}
.theme-magenta a{color:#fff;}
.theme-magenta .btn-primary{background:var(--orange);color:#fff;}
.theme-magenta .btn-primary:hover{background:#fff;color:#c11329;}
/* Karten */
.theme-magenta .variant-card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);}
.theme-magenta .variant-card:hover{border-color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.32);}
.theme-magenta .variant-card img,.theme-magenta .variant-card video{background:rgba(255,255,255,.18);}
.theme-magenta .variant-card h3{color:#fff;}
.theme-magenta .variant-card li{color:#fff;}
.theme-magenta .variant-card li::before{color:#ffd23f;}
/* Oberflächen-Blöcke (dibond-block) */
.theme-magenta .dibond-block li{color:#fff;}
.theme-magenta .dibond-block li strong{color:#fff;}
.theme-magenta .dibond-block li::before{background:#ffd23f;}
.theme-magenta .dibond-photo img{border-radius:10px;}
/* Hinweis-Box */
.theme-magenta .note-box{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.38);color:#fff;}
.theme-magenta .note-box a{color:#fff;text-decoration:underline;}
/* FAQ */
.theme-magenta .faq details{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.30);}
.theme-magenta .faq summary{color:#fff;}
.theme-magenta .faq details p{color:#fff;}
/* Kontakt-Strip: helle Fläche, schwarze Texte */
.theme-magenta .contact-strip{background:#e6e6e6;}
.theme-magenta .contact-strip h4{color:#1a1a1a;}
.theme-magenta .contact-strip a,.theme-magenta .contact-strip p{color:#1a1a1a;}
.theme-magenta .contact-strip a:hover{color:var(--orange);}
/* Axel */
.theme-magenta .axel .name{color:#fff;}
.theme-magenta .axel .role{color:#ffe08a;}
.theme-magenta .axel blockquote p{color:#fff;}
.theme-magenta .axel blockquote::before{color:rgba(255,255,255,.45);}

/* === Rote Überschriften – NUR Magic Plexiglas === */
.heads-magenta h1,.heads-magenta h2,.heads-magenta h3,
.heads-magenta .variant-card h3{color:#ac0c45;}

/* === Bildformat-Seite: Tabellen-Raster + Hilfe === */
.format-tables{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 28px;max-width:1100px;margin:0 auto;align-items:start;}
.fmt-table h3{margin:0 0 10px;}
.fmt-table .data-table{margin:0;}
.fmt-help .help-img{width:100%;height:auto;border-radius:10px;margin-bottom:14px;display:block;}
.fmt-help h3{margin:0 0 8px;}
.help-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto;align-items:start;}
.help-img{width:100%;height:auto;border-radius:10px;margin-bottom:14px;display:block;}
@media(max-width:1000px){ .format-tables{grid-template-columns:1fr 1fr;} }
@media(max-width:760px){ .format-tables,.help-cols{grid-template-columns:1fr;} }

/* === Kontaktseite === */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;max-width:1100px;margin:0 auto;}
.contact-cols .info-card{display:flex;flex-direction:column;justify-content:center;}
.contact-cols .info-card h3{margin-top:0;}
.map-embed{min-height:360px;}
.map-embed iframe{width:100%;height:100%;min-height:360px;border:0;border-radius:12px;display:block;}
@media(max-width:760px){ .contact-cols{grid-template-columns:1fr;} }

/* === Magic Plexiglas: gesamte Akzentfarbe Orange → Magenta (#ac0c45), NUR diese Seite ===
   Überschreibt die Variablen → Buttons, Link „Konfigurator", Icons, Axel-Rolle,
   Ratgeber-Links, Footer-Akzente/Hovers werden automatisch magenta. */
body.page-fotodruck-magic-plexiglas-wandbild-2d-effekt{--orange:#ac0c45; --orange-dark:#8a0937;}
body.page-fotodruck-magic-plexiglas-wandbild-2d-effekt .site-footer .f-accent{color:#ac0c45;}
/* Hervorgehobene USP-Unterzeile (z. B. „exklusiv nur bei uns") */
.section-head p.usp-line{font-size:20px;font-weight:600;color:var(--orange);letter-spacing:.3px;margin-top:8px;}
.section-head p.usp-line strong{font-weight:800;}

/* === Grüner Hintergrund – NUR Green Products === */
.theme-green{background:#d7fc79;padding-top:28px;}
.theme-green .cat-banner{margin-top:0;margin-bottom:28px;border:12px solid #fff;box-sizing:border-box;box-shadow:0 4px 18px rgba(0,0,0,.12);}
.theme-green .bg-soft{background:#e6ffa2;}
/* === Green Products: gesamte Akzentfarbe Orange → Dunkelgrün (#2b6a20), NUR diese Seite ===
   Überschreibt die Variablen → Buttons, Link „Konfigurator", Icons, Aufzählungs-Quadrate,
   FAQ-„+/–", Ratgeber-Links, Axel-Rolle, Footer-Akzente/Hovers werden automatisch grün. */
body.page-wandbilder-green-products-oekologischer-fotodruck{--orange:#2b6a20; --orange-dark:#21531a;}
body.page-wandbilder-green-products-oekologischer-fotodruck .site-footer .f-accent{color:#2b6a20;}
/* Hinweis-Box-Rahmen grün (Rahmen nutzt sonst das neutrale --line); FAQ-Rahmen bleibt dezent */
.theme-green .note-box{border-color:#2b6a20;}

/* === Warmer (beiger) Hintergrund – NUR Holzdruck === */
.theme-warm{background:#fbf5f0;padding-top:28px;}
.theme-warm .cat-banner{margin-top:0;margin-bottom:28px;}
.theme-warm .bg-soft{background:#efdbc8;}
.theme-warm .contact-strip{background:#efdbc8;}
/* Produktkarten im hellen Cremeton statt Weiß (Sektion bleibt beige) */
.theme-warm .variant-card{background:#fbf5f0;}

/* =================== RATGEBER / MAGAZIN =================== */
.rat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1100px;margin:8px auto 0;}
.rat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s;}
.rat-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px);}
.rat-card img{width:100%;height:200px;object-fit:cover;display:block;}
.rat-card-body{padding:18px 20px 20px;}
.rat-card-body h3{font-size:18px;margin:0 0 8px;color:#3a3a3a;}
.rat-card-body p{font-size:15px;margin:0 0 12px;color:var(--grey);line-height:1.55;}
.rat-more{font-size:14px;font-weight:700;color:var(--orange-dark,#c25e00);}
.rat-links{list-style:none;padding:0;margin:0 auto;max-width:1100px;display:flex;flex-wrap:wrap;gap:10px 26px;}
.rat-links li{font-size:15.5px;}
.rat-links a{color:var(--orange-dark,#c25e00);font-weight:600;}
.faq-block{margin-top:8px;}
.faq-item{border:1px solid var(--line);border-radius:10px;padding:0;margin:10px 0;background:#fff;}
.faq-item summary{cursor:pointer;font-weight:700;font-size:16px;padding:14px 18px;list-style:none;color:#3a3a3a;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";float:right;color:var(--orange-dark,#c25e00);font-weight:700;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:0;padding:0 18px 16px;font-size:15.5px;color:var(--grey);line-height:1.6;}
/* Ratgeber-Artikel: kompaktere Abstände (statt Standard-62px-Sections) */
.ratgeber-article .page-hero{padding:42px 0 14px;}
.ratgeber-article section{padding:30px 0;}
.ratgeber-article .prose h2{margin:20px 0 10px;}
.ratgeber-article section:first-of-type .prose > h2:first-child,
.ratgeber-article section:first-of-type .prose > *:first-child{margin-top:0;}
.howto-steps{max-width:1100px;margin:14px auto;padding-left:22px;}
.howto-steps li{font-size:16.5px;margin:10px 0;line-height:1.6;}
@media(max-width:760px){.rat-grid{grid-template-columns:1fr;}}

/* ── Warenkorb (Redesign) ────────────────────────────────── */
/* Schritt-Leiste Warenkorb → Kasse → Bestellung */
.checkout-steps{display:flex;align-items:center;justify-content:center;gap:0;
  list-style:none;margin:0 0 38px;padding:0;max-width:720px;margin-left:auto;margin-right:auto;}
.checkout-steps .step{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;flex:0 0 auto;}
.checkout-steps .step-no{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;background:#eceae7;color:var(--grey-light);border:2px solid #eceae7;transition:.2s;}
.checkout-steps .step-label{font-size:14px;color:var(--grey-light);font-weight:600;white-space:nowrap;letter-spacing:.3px;}
.checkout-steps .step.active .step-no{background:var(--orange);color:#fff;border-color:var(--orange);}
.checkout-steps .step.active .step-label{color:var(--ink);}
.checkout-steps .step.done .step-no{background:#fff;color:var(--orange);border-color:var(--orange);}
.checkout-steps .step-bar{flex:1 1 auto;height:2px;background:#e3e3e1;margin:0 10px;position:relative;top:-11px;min-width:40px;}
.checkout-steps .step.active + .step-bar,.checkout-steps .step-bar.filled{background:var(--orange);}

.cart-layout{display:grid;grid-template-columns:1fr 350px;gap:30px;align-items:start;}
.cart-items{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 24px;
  box-shadow:0 1px 3px rgba(60,58,56,.04);}
.cart-row{display:grid;grid-template-columns:104px 1fr auto;gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);}
.cart-row:last-of-type{border-bottom:none;}
.cart-thumb{width:104px;height:104px;border-radius:10px;background:#f2f1ef;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cart-thumb img{width:100%;height:100%;object-fit:cover;}
.cart-thumb span{font-size:11px;color:#9a9a98;text-align:center;line-height:1.25;font-weight:600;}
.cart-info h3{margin:0 0 8px;font-size:17px;color:var(--ink);}
.cart-specs{list-style:none;margin:0 0 10px;padding:0;font-size:13.5px;color:var(--grey);line-height:1.55;}
.cart-specs li{margin:0;}
.cart-specs .spec-label{color:var(--grey-light);}
.cart-file{color:var(--grey-light);font-size:12.5px;margin-top:2px;word-break:break-all;}
.cart-remove-link{background:none;border:none;color:var(--grey-light);cursor:pointer;font-size:13px;
  padding:0;display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
.cart-remove-link:hover{color:#b23;text-decoration:none;}
.cart-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;min-width:120px;}
.cart-line{font-weight:700;font-size:18px;white-space:nowrap;color:var(--ink);}
.cart-unit-note{font-size:12.5px;color:var(--grey-light);margin-top:-10px;}
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;}
.qty-stepper button{width:32px;height:34px;border:none;background:#faf9f7;color:var(--grey);font-size:18px;line-height:1;cursor:pointer;}
.qty-stepper button:hover{background:#f0eeeb;color:var(--orange);}
.qty-stepper input{width:40px;height:34px;border:none;text-align:center;font-size:15px;color:var(--ink);font-weight:600;background:#fff;
  border-left:1px solid var(--line);border-right:1px solid var(--line);-moz-appearance:textfield;}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-continue{padding:20px 0 8px;}
.cart-continue a{display:inline-flex;align-items:center;gap:7px;color:var(--grey);font-weight:600;font-size:14px;}
.cart-continue a:hover{color:var(--orange);}

/* Summen-Box (Sidebar) */
.cart-aside{background:#faf9f7;border:1px solid var(--line);border-radius:14px;padding:24px;position:sticky;top:96px;}
.cart-aside h2{font-size:19px;margin:0 0 16px;}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:15px;color:var(--grey);}
.sum-row .free{color:#3a8a3a;font-weight:600;font-size:14px;}
.sum-div{border:none;border-top:1px solid var(--line);margin:12px 0;}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0 2px;font-size:16px;color:var(--ink);}
.sum-total strong{font-size:24px;}
.sum-tax{font-size:12.5px;color:var(--grey-light);margin:0 0 18px;}
.sum-cta{width:100%;text-align:center;}
.sum-pay{margin-top:16px;text-align:center;}
.sum-pay .sum-pay-label{font-size:12.5px;color:var(--grey-light);display:block;margin-bottom:8px;}
.pay-badges{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
.pay-badges span{font-size:12px;font-weight:600;color:var(--grey);background:#fff;border:1px solid var(--line);
  border-radius:7px;padding:5px 10px;}
.sum-trust{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;font-size:12px;color:var(--grey-light);}
.sum-trust svg{width:15px;height:15px;color:#3a8a3a;}
.cart-empty{text-align:center;padding:40px 0;}
.cart-thumb-photo{position:relative;}
.thumb-badge{position:absolute;left:6px;bottom:6px;background:rgba(58,58,58,.82);color:#fff;font-size:10.5px;
  font-weight:600;letter-spacing:.3px;padding:2px 7px;border-radius:6px;line-height:1.3;}
.ship-field{margin:14px 0 4px;}
.ship-field label{display:block;font-size:13px;font-weight:600;color:var(--grey);margin-bottom:6px;}
.ship-field select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;
  font-size:14px;color:var(--ink);font-family:inherit;cursor:pointer;}
.ship-field select:focus{outline:none;border-color:var(--orange);}
.ship-hint{font-size:11.5px;color:var(--grey-light);margin:6px 0 0;font-style:italic;}

@media(max-width:860px){
  .cart-layout{grid-template-columns:1fr;}
  .cart-aside{position:static;}
}
@media(max-width:560px){
  /* Schritt-Leiste: umbrechbar + schrumpfbar, damit sie aufs Handy passt */
  .checkout-steps{align-items:flex-start;max-width:100%;}
  .checkout-steps .step{flex:1 1 0;min-width:0;}
  .checkout-steps .step-no{width:32px;height:32px;font-size:14px;}
  .checkout-steps .step-label{font-size:11px;white-space:normal;text-align:center;line-height:1.25;letter-spacing:0;}
  .checkout-steps .step-bar{min-width:0;margin:0 5px;top:0;align-self:flex-start;margin-top:16px;}
  .cart-items{padding:4px 16px;}
  .cart-row{grid-template-columns:76px 1fr;grid-template-areas:"thumb info" "right right";row-gap:14px;}
  .cart-thumb{grid-area:thumb;width:76px;height:76px;}
  .cart-info{grid-area:info;}
  .cart-right{grid-area:right;flex-direction:row;align-items:center;justify-content:space-between;width:100%;}
}

/* ── Kasse / Danke (Meilenstein 4) ───────────────────────── */
.form-errors{background:#fbecea;border:1px solid #f3c9c2;color:#a23;border-radius:10px;padding:12px 16px;margin:0 0 20px;}
.form-errors ul{margin:6px 0 0;padding-left:20px;}
.checkout-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;}
.checkout-main h2{font-size:18px;margin:24px 0 12px;}
.checkout-main h2:first-child{margin-top:0;}
.field{margin:0 0 12px;}
.field label{display:block;font-size:13.5px;color:#555;font-weight:600;}
.field input,.field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line,#d9d7d3);border-radius:8px;font-size:15px;margin-top:4px;font-family:inherit;box-sizing:border-box;}
.field-row{display:flex;gap:14px;}.field-row .field{flex:1;}.field-plz{max-width:130px;}
.pay-opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line,#e6e4e0);border-radius:10px;padding:12px 14px;margin:0 0 10px;cursor:pointer;}
.pay-opt small{color:#6a6a68;}
.pay-disabled{opacity:.55;cursor:not-allowed;}
.pay-opt em{color:#b06a00;font-style:normal;font-size:13px;}
.agb-check{display:block;font-size:13.5px;color:#444;margin:18px 0;line-height:1.5;}
.agb-check input{margin-right:8px;}
.checkout-submit{width:100%;margin-top:6px;}
.checkout-summary{background:#f7f6f4;border:1px solid var(--line,#e6e4e0);border-radius:12px;padding:18px;}
.checkout-summary h2{font-size:17px;margin:0 0 14px;}
.co-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #e9e7e3;}
.co-thumb{width:46px;height:46px;border-radius:7px;background:#eceae7;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;}
.co-thumb img{width:100%;height:100%;object-fit:cover;}.co-thumb span{font-size:10px;color:#9a9a98;}
.co-text{flex:1;font-size:13px;line-height:1.35;}.co-price{font-weight:700;font-size:14px;white-space:nowrap;}
.co-sub{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--grey);padding:5px 0;}
.co-sub:first-of-type{padding-top:12px;border-top:1px solid #e9e7e3;margin-top:6px;}
.co-sub .free{color:#3a8a3a;font-weight:600;}
.co-total{display:flex;justify-content:space-between;font-size:18px;padding:12px 0 4px;border-top:1px solid #e9e7e3;margin-top:6px;}
.co-note{font-size:12px;color:#7a7a78;margin:2px 0 0;}
.danke-box{background:#f7f6f4;border:1px solid var(--line,#e6e4e0);border-radius:12px;padding:18px 20px;margin:18px 0;max-width:620px;}
.danke-box h2{font-size:18px;margin:0 0 12px;}
.bank-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.bank-table th{text-align:left;color:#6a6a68;font-weight:600;padding:6px 12px 6px 0;white-space:nowrap;vertical-align:top;}
.bank-table td{padding:6px 0;}
.danke-success{display:flex;align-items:center;gap:16px;background:#f1f9f1;border:1px solid #cfe8cf;border-radius:12px;padding:18px 22px;margin:0 0 24px;}
.danke-check{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#3a8a3a;color:#fff;display:flex;align-items:center;justify-content:center;}
.danke-check svg{width:26px;height:26px;}
.danke-success .lead{margin:0;font-size:16px;}
.cart-layout .danke-box{max-width:none;margin:0;}
.danke-side{display:flex;flex-direction:column;gap:16px;}
.danke-side .btn{align-self:flex-start;}
@media(max-width:780px){.checkout-grid{grid-template-columns:1fr;}.checkout-summary{order:-1;}}