@import url("landing.css?v=20261027");
/* eComStyle: Betreiber-Design, ergaenzt das unveraenderte EcsCart-Base-Theme. */
@font-face{font-family:"JetBrains Mono";src:url("/assets/ecomstyle/fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/ecomstyle/fonts/JetBrainsMono-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/ecomstyle/fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/ecomstyle/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/ecomstyle/fonts/JetBrainsMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ecom-font:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --bg:#e5e7eb;--panel:#f7f9fc;--panel2:#edf0f5;--text:#2f3b52;--muted:#59677d;
  --line:#cbd3df;--line-ctl:#8793a5;
  --acc:#2e6bcf;--acc2:#047857;--acc-h:#274f9e;--acc-text:#fff;
  --ok:#047857;--err:#b91c1c;--ecom-heading:#1f2937;--ecom-term:#047857;
  --ecom-nav:#2c3441;--ecom-nav-text:#eef1f5;--ecom-footer:#e0e5ee;
  --r:5px;--rs:3px;--grad:#2563eb;--grad-btn:#2563eb;
  --shadow:0 2px 8px rgb(15 23 42 / 5%);--shadow-lg:0 10px 26px rgb(15 23 42 / 14%);
}
html[data-theme="dark"]{
  --bg:#1a1d22;--panel:#23272e;--panel2:#20242a;--text:#d6d9df;--muted:#a8b2c0;
  --line:#353a44;--line-ctl:#626d7d;
  --acc:#60a5fa;--acc2:#34d399;--acc-h:#93c5fd;--acc-text:#111827;
  --ok:#34d399;--err:#ff9a9a;--ecom-heading:#eef1f5;--ecom-term:#34d399;
  --ecom-footer:#111827;
  --shadow:0 2px 8px rgb(0 0 0 / 10%);--shadow-lg:0 10px 28px rgb(0 0 0 / 28%);
}

body{font-family:var(--ecom-font);font-size:15px;line-height:1.65;font-variant-ligatures:none}
button,input,select,textarea,code,pre,kbd,samp{font-family:var(--ecom-font)}
h1,h2,h3,h4{color:var(--ecom-heading);font-weight:600;letter-spacing:0;overflow-wrap:anywhere}
h1{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.35}
h2{font-weight:600}

/* Gruener Terminal-Praefix nur an Seiten- und Abschnittsueberschriften. */
#main :is(h1,.rowcar-head h2,.detail-desc>h2,.detail-attrs>h2,.rev-title h2)::before{
  content:"~/" / "";color:var(--ecom-term);font-weight:600;margin-right:.5ch;
}
.page-home .rowcar-head{padding:12px 0 14px;border-bottom:1px solid var(--line);margin-top:24px}
.page-home .rowcar-head h2{font-size:clamp(1.2rem,1.8vw,1.65rem);line-height:1.4;font-weight:600}
.page-home .blog-teaser-h{color:var(--ecom-heading)}
.page-home .rowcar-head+.rowcar,.page-home .rowcar-head+.brows{margin-top:16px}
.page-detail .detail-desc>h2,.page-detail .rev-title{padding-bottom:12px;border-bottom:1px solid var(--line)}

/* Bestehende Header- und Navigationsfunktionen bleiben erhalten. */
.hd{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.hd-in{padding-block:20px;gap:24px}
.hd .brand-logo{width:248px}
.ft-brand .brand-logo{width:min(230px,100%)}
.hd .hd-search input{border-radius:3px;background:var(--panel2);font-family:var(--ecom-font);font-size:.9rem}
.hd .icobtn{font-family:var(--ecom-font);border-radius:3px}
.cat-nav{width:calc(100% - 40px);padding:0 8px;gap:2px;margin-bottom:14px;background:var(--ecom-nav);border-block:1px solid #475162}
.cat-item>a,.cat-morebtn{border-radius:0;border-color:transparent;background:transparent;color:var(--ecom-nav-text);font-weight:500;font-size:.9rem;padding:10px 14px}
.cat-item:hover>a,.cat-item:focus-within>a,.cat-more:hover>.cat-morebtn{background:#3d4c61;color:#fff;border-color:transparent}
.cat-more-drop .cat-item>a{color:var(--text);border-radius:3px}
.hd.hd-compact{border-radius:0 0 4px 4px;background:var(--panel)}

/* Kleine Radien statt Pillen, flache Flaechen statt Farbverlaeufen. */
.panel,section.card,.page-detail .buybox,.page-account .acct-side{border-radius:var(--r);box-shadow:var(--shadow)}
.btn,input,select,textarea,.btag,.cat-more-drop .cat-item>a{border-radius:var(--rs)}
.btn.primary{background:var(--grad-btn);border:1px solid #3b82f6;box-shadow:none;font-weight:500}
.btn.primary:hover{background:#1d4ed8;box-shadow:none}
.cat-drop,.suggest,.langsw-dd,.page-account .acct-nav a,.page-checkout .cmodal-box,.shipping-matrix-box{border-radius:var(--r)}
.cat-drop{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-lg)}
.page-detail :is(.var-opt,.product-image-open,.product-image-open img,.thumb-choice,.thumbs img,.thumbs-nav){border-radius:var(--rs)}
.card-title{font-weight:600}
.card-body>.muted{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.card .price-row{flex-wrap:wrap}
.card .price{white-space:nowrap;font-variant-numeric:tabular-nums}
.card .price{background:none;color:var(--acc)}
.card .price,.page-detail .price-lg{font-weight:500}
.bcard-img{background:var(--panel2)}
.bcard-new{border-radius:3px;background:var(--ecom-term);color:var(--bg);box-shadow:none}
.btag{border-radius:3px}

.ft{background:var(--ecom-footer);border-top:1px solid var(--line)}
.ft-col h4{font-size:.8rem;letter-spacing:.04em;font-weight:600;color:var(--text)}
.ft-col a{color:var(--acc)}
.ft-col a:hover{color:var(--acc-h)}
.ft-standard,.ft-base{border-color:var(--line)}
.ft-note{opacity:1}

@media(max-width:900px){
  .hd-in{padding-block:14px;gap:10px}
  .hd .logo{min-width:0;max-width:100%}
  .hd .brand-logo{width:180px;max-width:100%}
  .hd-compact .hd-in{padding:4px;gap:4px}
  .hd-compact .hd-search input{font-size:16px}
}
@media(min-width:901px){.hd-compact .brand-logo{width:120px}}
@media(max-width:640px){
  .page-home .rowcar-head{align-items:flex-start;padding-bottom:12px;margin-top:20px}
  .page-home .blog-teaser .rowcar-head{align-items:flex-start}
  .hd .hd-search input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){body{transition:none}}

/* Neuigkeiten als Zeitleiste – individuelles eComStyle-Child-Theme. */
.brows{background:transparent;border:0;border-radius:0;overflow:visible}
.brow{position:relative;--news-axis:120px;--news-dot-y:33px}
.brow-link{grid-template-columns:100px minmax(0,1fr);gap:40px;padding:22px 0;align-items:start}
.brow.has-image .brow-link{grid-template-columns:100px minmax(0,1fr) 170px}
.brow::before{content:"";position:absolute;left:var(--news-axis);top:0;bottom:0;width:1px;background:var(--line);pointer-events:none}
.brow:first-child::before{top:var(--news-dot-y)}
.brow:last-child::before{bottom:calc(100% - var(--news-dot-y))}
.brow:only-child::before{display:none}
.brow.is-latest .brow-link::before{display:none}
.brow-copy::before{content:"";position:absolute;left:calc(var(--news-axis) - 4px);top:calc(var(--news-dot-y) - 4px);width:9px;height:9px;box-sizing:border-box;border:2px solid var(--line);border-radius:50%;background:var(--bg);pointer-events:none}
.brow.is-latest .brow-copy::before{background:var(--ecom-term);border-color:var(--ecom-term);box-shadow:0 0 0 4px color-mix(in srgb,var(--ecom-term) 18%,transparent)}
.brow-copy{display:flex;flex-direction:column}
.brow-title{order:0;color:var(--ecom-heading);font-size:1.03rem}
.brow-meta{order:1;margin:6px 0 0}
.brow-category{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);padding:1px 5px;border-radius:var(--rs);letter-spacing:.02em;text-transform:none}
.brow-excerpt{order:2;margin-top:8px;-webkit-line-clamp:2;line-clamp:2}
.blog-wrap .brow-excerpt{-webkit-line-clamp:3;line-clamp:3}
.brow-new{color:var(--ecom-term);background:transparent;border:1px solid color-mix(in srgb,var(--ecom-term) 40%,transparent);border-radius:var(--rs);padding:0 6px;font-size:.64rem;letter-spacing:.02em}
.brow-image{width:170px;border:1px solid var(--line);border-radius:var(--rs);margin-top:2px}
@media(max-width:1000px) and (min-width:641px){
  .brow{--news-axis:100px}
  .brow-link{grid-template-columns:88px minmax(0,1fr);gap:24px}
  .brow.has-image .brow-link{grid-template-columns:88px minmax(0,1fr) 100px}
  .brow-image{width:100px}
}
@media(max-width:640px){
  .brow-link{grid-template-columns:minmax(0,1fr);gap:10px 12px;padding:16px 0}
  .brow.has-image .brow-link{grid-template-columns:minmax(0,1fr) 80px}
  .brow::before,.brow-copy::before{display:none}
  .brow-image{width:80px}
  .brow-title{font-size:.96rem}
}