/* ==========================================================
NÄHCENTER — Modern WooCommerce Theme
========================================================== */
@font-face {
font-family: 'InterVariable'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('fonts/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: 'InterVariable'; font-style: italic; font-weight: 100 900; font-display: swap;
src: url('fonts/InterVariable-Italic.woff2') format('woff2');
}
/* === Design Tokens ===================================== */
:root {
--brand: #CA0000;
--brand-700: #9D0000;
--brand-50: #FCE8E8;
--white: #ffffff;
--ink: #0F1115;
--ink-soft: #4B4F58;
--ink-subtle: #7A808A;
--bg: #ffffff;
--bg-soft: #FAFAFB;
--bg-muted: #F4F4F6;
--border: #E5E6EA;
--border-strong:#D2D4DA;
--success: #0BB46A;
--warning: #F4B400;
--r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
--sh-1: 0 1px 2px rgba(15,17,21,.04);
--sh-2: 0 2px 10px rgba(15,17,21,.06);
--sh-3: 0 8px 28px rgba(15,17,21,.08);
--sh-4: 0 24px 56px rgba(15,17,21,.14);
--sh-brand: 0 8px 24px rgba(202,0,0,.22);
--t-f: 150ms cubic-bezier(.4,0,.2,1);
--t-m: 250ms cubic-bezier(.4,0,.2,1);
--t-s: 400ms cubic-bezier(.4,0,.2,1);
/* Inhalt und Rahmenelemente (Header, Promo, USP, Prefooter, Footer) laufen
auf derselben Breite — sonst wirken die Leisten breiter als der Inhalt. */
--container: 1440px;
--container-w: 1440px;
--topbar-h: 36px;
--header-h: 76px;
--nav-h: 50px;
}
/* === Reset / Base ===================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-feature-settings: 'cv11','ss01','ss03';
font-size: 17px; line-height: 1.6;
color: var(--ink); background: var(--bg);
margin: 0; padding: 0;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--t-f); }
a:hover { color: var(--brand-700); }
h1,h2,h3,h4,h5,h6 { letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; font-weight: 700; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
main { min-height: 60vh; margin: 0 !important; padding: 0 !important; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks main > :first-child { margin-top: 0 !important; }
.nhc-slider { margin: 0 !important; }
/* === Utility containers =============================== */
.nhc-container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.nhc-container-wide { max-width: var(--container-w); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
main > .wp-block-group:not(.alignfull) { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem,4vw,2rem); }
/* ============================================
HEADER (Promo + Main + Mega-Nav + Drawer)
============================================ */
/* Promo strip (Brand red, full width) */
.nhc-promo {
background: var(--brand);
color: #fff;
font-size: .88rem;
font-weight: 500;
padding: 5px clamp(1rem,4vw,2rem);
line-height: 1.35;
letter-spacing: .01em;
}
.nhc-promo-inner {
max-width: var(--container-w); margin: 0 auto;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.nhc-promo a { color: #fff !important; text-decoration: none; transition: opacity var(--t-f); }
.nhc-promo a:hover { opacity: .85; }
.nhc-promo-contact { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: .82rem; }
.nhc-promo-contact a { font-weight: 600; }
.nhc-promo-cta-link { font-weight: 700; }
/* Die Leiste soll so flach wie möglich bleiben */
.nhc-promo-inner > * { margin: 0; }
.nhc-promo-cta { display: flex; align-items: center; }
.nhc-promo-cta-arrow { text-decoration: underline; text-underline-offset: 3px; }
.nhc-promo a:hover .nhc-promo-cta-arrow { text-decoration: none; }
/* B2B-Modus: mittiger Hinweis, damit immer klar ist, in welchem Shop man ist */
.nhc-promo-mode {
font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
font-size: .82rem; white-space: nowrap;
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
padding: .25rem .85rem; border-radius: var(--r-pill);
}
.nhc-promo-mode-sub { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .9; }
.nhc-promo-mode-exit { margin-left: .6rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nhc-promo-mode-exit:hover { text-decoration: none; }
/* Der Hinweis sitzt mittig, Kontakt links und Aktion rechts behalten ihre Plätze */
.nhc-promo--b2b .nhc-promo-inner > .nhc-promo-contact,
.nhc-promo--b2b .nhc-promo-inner > .nhc-promo-cta { flex: 1 1 0; }
.nhc-promo--b2b .nhc-promo-inner > .nhc-promo-cta { justify-content: flex-end; }
@media (max-width: 700px) {
.nhc-promo-inner { flex-direction: column; gap: .35rem; text-align: center; }
.nhc-promo-contact { gap: .85rem; font-size: .8rem; }
.nhc-promo--b2b .nhc-promo-inner > .nhc-promo-cta { justify-content: center; }
.nhc-promo-mode { order: -1; }
}
/* Sticky main header */
.nhc-mainheader {
position: sticky; top: 0; z-index: 100;
background: #fff;
border-bottom: 1px solid var(--border);
transition: box-shadow var(--t-m);
}
.nhc-mainheader.is-scrolled { box-shadow: var(--sh-2); }
.nhc-mainheader-inner {
max-width: var(--container-w); margin: 0 auto;
padding: 1.1rem clamp(1rem,4vw,2rem);
display: grid;
grid-template-areas: "burger logo search actions";
grid-template-columns: auto auto 1fr auto;
align-items: center; gap: 1.5rem;
}
.nhc-burger {
grid-area: burger;
display: none;
background: transparent; border: 0; padding: 8px;
color: var(--ink); cursor: pointer;
border-radius: var(--r-md);
transition: background var(--t-f);
}
.nhc-burger:hover { background: var(--bg-muted); }
.nhc-logo {
grid-area: logo;
display: inline-flex; align-items: center;
text-decoration: none;
color: var(--ink);
flex-shrink: 0;
}
.nhc-logo:hover { color: var(--brand); }
.nhc-logo img,
.nhc-logo svg {
height: 78px; width: auto; max-width: 280px;
display: block;
transition: color var(--t-f);
}
.nhc-logo-fallback { font-weight: 800; font-size: 1.5rem; color: var(--brand); letter-spacing: -.025em; }
@media (max-width: 900px) { .nhc-logo img, .nhc-logo svg { height: 52px; } }
.nhc-search-wrap {
grid-area: search;
position: relative;
max-width: 640px; width: 100%; margin: 0 auto;
}
/* Search — pill, prominent */
.nhc-search {
display: flex; align-items: center;
background: var(--bg-muted);
border: 1.5px solid transparent;
border-radius: var(--r-pill);
padding: 5px 5px 5px 20px;
transition: all var(--t-f);
width: 100%;
}
.nhc-search:focus-within {
background: #fff; border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-50);
}
.nhc-search svg { color: var(--ink-subtle); flex-shrink: 0; }
.nhc-search input {
flex: 1; border: 0; background: transparent;
font: inherit; font-size: 1rem; padding: 10px 14px;
color: var(--ink); min-width: 0;
}
.nhc-search input:focus { outline: 0; }
.nhc-search input::placeholder { color: var(--ink-subtle); }
.nhc-search button {
background: var(--brand); color: #fff; border: 0;
border-radius: var(--r-pill); padding: 10px 22px;
font-size: .95rem; font-weight: 600; cursor: pointer;
transition: background var(--t-f);
white-space: nowrap;
}
.nhc-search button:hover { background: var(--brand-700); }
/* Live-Search-Dropdown */
.nhc-search-results {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--sh-4);
z-index: 200;
overflow: hidden;
max-height: 70vh; overflow-y: auto;
}
.nhc-search-results[hidden] { display: none; }
.nhc-search-list { padding: .5rem; }
.nhc-search-item {
display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center;
padding: .65rem .75rem;
border-radius: var(--r-md);
text-decoration: none; color: var(--ink);
transition: background var(--t-f);
}
.nhc-search-item:hover, .nhc-search-item.is-focused { background: var(--bg-muted); text-decoration: none; }
.nhc-search-item img {
width: 56px; height: 56px; object-fit: contain;
background: var(--bg-muted); border-radius: var(--r-sm); padding: 4px;
}
.nhc-search-item-meta { min-width: 0; }
.nhc-search-item-name { font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nhc-search-item-brand { font-size: .72rem; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.nhc-search-item-price { color: var(--brand); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.nhc-search-footer {
padding: .75rem 1rem; background: var(--bg-soft);
border-top: 1px solid var(--border);
font-size: .85rem; color: var(--ink-soft);
text-align: center;
}
.nhc-search-footer a { color: var(--brand); font-weight: 600; }
.nhc-search-empty { padding: 1.5rem; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.nhc-search-loading { padding: 1.5rem; text-align: center; color: var(--ink-subtle); font-size: .9rem; }
.nhc-search-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: nhc-spin .7s linear infinite; vertical-align: -2px; margin-right: .5rem; }
@keyframes nhc-spin { to { transform: rotate(360deg); } }
/* Action links — Icon stacked over label (Nähpark-style) */
.nhc-actions {
grid-area: actions;
display: flex; align-items: center; gap: .35rem;
}
.nhc-action-link {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
padding: 6px 10px; min-width: 56px;
color: var(--ink); text-decoration: none;
font-size: .72rem; font-weight: 500; letter-spacing: .02em;
border-radius: var(--r-md);
transition: all var(--t-f); position: relative;
line-height: 1.2;
}
.nhc-action-link:hover { background: var(--bg-muted); color: var(--brand); text-decoration: none; }
.nhc-action-link svg { display: block; }
.nhc-action-link span { white-space: nowrap; }
.nhc-action-link em { font-style: normal; color: var(--brand); font-weight: 700; }
.nhc-action-cart { color: var(--brand); }
.nhc-action-cart:hover { color: var(--brand-700); }
/* === RESPONSIVE Header =================================== */
/* Tablet */
@media (max-width: 1100px) {
.nhc-action-link.nhc-hide-mobile { display: none; }
.nhc-search { max-width: 100%; }
}
/* Mobile */
@media (max-width: 900px) {
.nhc-mainheader-inner {
grid-template-areas:
"burger logo actions"
"search search search";
grid-template-columns: auto 1fr auto;
gap: 1rem .75rem;
padding: .75rem clamp(.75rem,4vw,1rem);
}
.nhc-burger { display: inline-flex; }
.nhc-logo { justify-self: center; }
.nhc-search { padding-left: 14px; }
.nhc-search input { font-size: .9rem; padding: 8px 10px; }
.nhc-search button { padding: 8px 14px; font-size: .85rem; }
.nhc-actions { gap: 0; }
.nhc-action-link span { display: none; }
.nhc-action-link { padding: 8px; min-width: 0; }
}
/* Floating Cart FAB */
.nhc-fab-cart {
position: fixed; bottom: 24px; right: 24px; z-index: 90;
width: 60px; height: 60px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff !important;
border-radius: var(--r-pill);
box-shadow: var(--sh-3), 0 0 0 6px rgba(202,0,0,.08);
text-decoration: none;
transition: transform var(--t-f), box-shadow var(--t-f);
animation: nhc-fab-in .35s cubic-bezier(.4,1.4,.6,1);
}
@keyframes nhc-fab-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nhc-fab-cart:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--sh-4); color: #fff !important; }
.nhc-fab-cart[hidden] { display: none; }
.nhc-fab-cart-count {
position: absolute; top: -6px; right: -6px;
min-width: 24px; height: 24px; padding: 0 7px;
background: var(--ink); color: #fff;
border-radius: var(--r-pill);
font-size: .8rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
border: 2px solid #fff;
}
@media (max-width: 600px) { .nhc-fab-cart { bottom: 16px; right: 16px; width: 54px; height: 54px; } }
/* === Drawer (Mobile Menu) =============================== */
.nhc-drawer {
position: fixed; inset: 0;
z-index: 9500;
visibility: hidden;
transition: visibility 0ms 300ms;
}
.nhc-drawer.is-open { visibility: visible; transition: visibility 0ms; }
.nhc-drawer-backdrop {
position: absolute; inset: 0;
background: rgba(15,17,21,.5);
opacity: 0;
transition: opacity var(--t-m);
}
.nhc-drawer.is-open .nhc-drawer-backdrop { opacity: 1; }
.nhc-drawer-panel {
position: absolute; top: 0; left: 0; bottom: 0;
width: min(320px, 85vw);
background: #fff;
box-shadow: var(--sh-4);
transform: translateX(-100%);
transition: transform var(--t-s);
display: flex; flex-direction: column;
}
.nhc-drawer.is-open .nhc-drawer-panel { transform: translateX(0); }
.nhc-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
font-weight: 700; color: var(--ink);
}
.nhc-drawer-close {
background: transparent; border: 0;
width: 36px; height: 36px;
font-size: 1.75rem; line-height: 1;
cursor: pointer; color: var(--ink);
border-radius: var(--r-pill);
transition: background var(--t-f);
}
.nhc-drawer-close:hover { background: var(--bg-muted); }
.nhc-drawer-nav {
flex: 1; overflow-y: auto;
padding: .75rem 0;
display: flex; flex-direction: column;
}
.nhc-drawer-nav a {
padding: .9rem 1.5rem;
color: var(--ink); font-weight: 600; font-size: 1rem;
text-decoration: none;
border-left: 3px solid transparent;
transition: all var(--t-f);
}
.nhc-drawer-nav a:hover {
background: var(--brand-50); color: var(--brand);
border-left-color: var(--brand);
}
.nhc-drawer-divider { height: 1px; background: var(--border); margin: .5rem 1.5rem; }
.nhc-drawer-phone {
color: var(--brand) !important;
font-weight: 700 !important;
}
/* === Mega-Nav ========================================= */
/* Die Navileiste hebt sich dezent vom weißen Header darüber ab, damit die
beiden Ebenen optisch nicht ineinanderlaufen. */
.nhc-meganav-wrap {
background: var(--bg-soft);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
position: sticky; top: 76px; z-index: 99;
}
/* Aktiver/gehoverter Eintrag bekommt eine weiße Fläche — wirkt wie ein Reiter */
.nhc-meganav-item > a:hover,
.nhc-meganav-item.is-open > a {
background: #fff;
}
.nhc-meganav-inner { max-width: var(--container-w); margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem); }
.nhc-meganav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: stretch; justify-content: center; }
.nhc-meganav-item { position: relative; }
.nhc-meganav-item > a {
display: inline-flex; align-items: center; gap: 4px;
padding: 14px 16px; color: var(--ink);
font-size: .9rem; font-weight: 600; letter-spacing: .01em;
border-radius: var(--r-md);
transition: all var(--t-f); text-decoration: none;
}
.nhc-meganav-item > a:hover,
.nhc-meganav-item.is-open > a {
background: var(--brand-50); color: var(--brand);
}
.nhc-caret { font-size: .7rem; opacity: .6; transition: transform var(--t-f); }
.nhc-meganav-item.is-open .nhc-caret { transform: rotate(180deg); }
.nhc-meganav-item.is-highlight > a { color: var(--brand) !important; }
/* Mobile-only: nur auf <=900px sichtbar (Desktop versteckt) */
.nhc-meganav-item.is-mobile-only { display: none; }
@media (max-width: 900px) { .nhc-meganav-item.is-mobile-only { display: block; } }
/* mittlere Breiten: Menü kompakter, damit alle Punkte in eine Zeile passen */
@media (min-width: 901px) and (max-width: 1279px) { .nhc-meganav-list { gap: 0; } .nhc-meganav-item > a { padding: 14px 9px; font-size: .84rem; white-space: nowrap; } }
@media (min-width: 901px) and (max-width: 1099px) { .nhc-meganav-item > a { padding: 12px 6px; font-size: .8rem; } .nhc-caret { display: none; } }
.nhc-meganav-item.is-highlight > a:hover { background: var(--brand); color: #fff !important; }
.nhc-meganav-panel {
position: absolute; left: 0; top: 100%;
width: min(900px, 90vw);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-4);
padding: 1.75rem;
opacity: 0; visibility: hidden;
transform: translateY(8px);
transition: opacity var(--t-f), transform var(--t-f), visibility var(--t-f);
z-index: 100;
}
.nhc-meganav-item.is-open .nhc-meganav-panel,
.nhc-meganav-item:hover .nhc-meganav-panel {
opacity: 1; visibility: visible; transform: translateY(0);
}
.nhc-meganav-panel-inner {
display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 2rem;
}
.nhc-mp-h {
font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--ink-subtle); margin: 0 0 .9rem; font-weight: 700;
}
.nhc-mp-col ul { list-style: none; margin: 0; padding: 0; }
.nhc-mp-col li { margin-bottom: .55rem; }
.nhc-mp-col a {
color: var(--ink); font-size: .92rem; font-weight: 500;
display: inline-block; padding: 2px 0; transition: color var(--t-f);
}
.nhc-mp-col a:hover { color: var(--brand); }
.nhc-mp-feature {
display: flex; flex-direction: column;
background: var(--bg-soft);
border: 1px solid var(--border); border-radius: var(--r-md);
text-decoration: none; color: var(--ink);
transition: all var(--t-f);
height: 100%; overflow: hidden;
}
.nhc-mp-feature:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-3); text-decoration: none; }
.nhc-mp-feature-img {
background: #fff;
display: flex; align-items: center; justify-content: center;
padding: .75rem;
border-bottom: 1px solid var(--border);
}
.nhc-mp-feature-img img { max-height: 120px; width: auto; max-width: 100%; object-fit: contain; }
.nhc-mp-feature-icon { font-size: 2.5rem; line-height: 1; }
.nhc-mp-feature-meta { padding: 1rem 1.25rem; }
.nhc-mp-feature-eyebrow {
font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--brand); font-weight: 700; margin-bottom: .35rem;
}
.nhc-mp-feature-title { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; color: var(--ink); line-height: 1.25; }
.nhc-mp-feature-price { color: var(--brand); font-weight: 800; font-size: 1.05rem; margin: .35rem 0 .65rem; }
.nhc-mp-feature-cta { color: var(--brand); font-weight: 600; font-size: .82rem; }
.nhc-mp-feature:hover .nhc-mp-feature-cta { text-decoration: underline; }
/* ============================================
BUTTONS
============================================ */
.nhc-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: 12px 24px; border-radius: var(--r-pill);
font: 600 .95rem/1 'InterVariable', sans-serif; letter-spacing: -.005em;
border: 1.5px solid transparent; cursor: pointer;
transition: all var(--t-f); text-decoration: none;
}
.nhc-btn--sm { padding: 9px 16px; font-size: .85rem; }
.nhc-btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.nhc-btn--block { display: flex; width: 100%; }
.nhc-btn--primary {
background: var(--brand); color: #fff; box-shadow: var(--sh-brand);
}
.nhc-btn--primary:hover {
background: var(--brand-700); color: #fff; text-decoration: none;
transform: translateY(-1px); box-shadow: 0 12px 28px rgba(202,0,0,.3);
}
.nhc-btn--secondary {
background: var(--ink); color: #fff;
}
.nhc-btn--secondary:hover { background: #000; color: #fff; text-decoration: none; }
.nhc-btn--ghost {
background: transparent; color: var(--ink); border-color: var(--border-strong);
}
.nhc-btn--ghost:hover { background: var(--bg-muted); color: var(--brand); border-color: var(--brand); text-decoration: none; }
.nhc-btn--white {
background: #fff; color: var(--brand);
}
.nhc-btn--white:hover { background: #fff; color: var(--brand-700); }
.nhc-btn--outline-white {
background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(10px);
}
.nhc-btn--outline-white:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
/* ============================================
BREADCRUMB
============================================ */
.nhc-breadcrumb {
font-size: .85rem; color: var(--ink-subtle);
padding: 1.5rem clamp(1rem,4vw,2rem) .5rem !important;
max-width: var(--container, 1280px) !important;
margin: 0 auto !important;
box-sizing: border-box;
}
.nhc-breadcrumb ol {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nhc-breadcrumb ol::-webkit-scrollbar { display: none; }
/* Einheitliche Position: Steckt der Breadcrumb in einem .nhc-container (Shop, Kategorie, Marke, Produkt),
übernimmt der Container den seitlichen Abstand — sonst säße er dort weiter eingerückt als auf normalen Seiten. */
.nhc-container > .nhc-breadcrumb,
.has-global-padding > .nhc-breadcrumb { padding-inline: 0 !important; max-width: none !important; margin-bottom: 2rem !important; }
.nhc-breadcrumb li { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 0; white-space: nowrap; }
.nhc-breadcrumb li:last-child { flex-shrink: 1; }
.nhc-breadcrumb a,
.nhc-breadcrumb [aria-current=page] {
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .5rem; border-radius: 6px; line-height: 1.3;
}
.nhc-breadcrumb a { color: var(--ink-subtle); text-decoration: none; transition: color .15s, background-color .15s; }
.nhc-breadcrumb a:hover { color: var(--brand); background: var(--brand-50); }
.nhc-breadcrumb a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nhc-breadcrumb .nhc-bc-home { flex-shrink: 0; margin-top: -1px; }
/* Startseite bündig mit dem Seiteninhalt (H1) — dafür ohne Hover-Fläche, nur Farbwechsel */
.nhc-breadcrumb li:first-child a { padding-left: 0; }
.nhc-breadcrumb li:first-child a:hover { background: none; }
.nhc-breadcrumb .sep { display: inline-flex; color: #B6BAC2; margin: 0 .05rem; }
.nhc-breadcrumb [aria-current=page] {
display: block; color: var(--ink); font-weight: 600;
max-width: 42ch; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
.nhc-breadcrumb { font-size: .8rem; }
.nhc-breadcrumb ol.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem); mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem); }
.nhc-breadcrumb .nhc-bc-home-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nhc-breadcrumb li:last-child { flex-shrink: 0; }
.nhc-breadcrumb [aria-current=page] { max-width: 60vw; }
}
/* ============================================
HERO SLIDER
============================================ */
.nhc-slider { position: relative; width: 100%; overflow: hidden; isolation: isolate; background: #1D1D1F; }
.nhc-slider-track { display: flex; transition: transform 600ms cubic-bezier(.65,.05,.36,1); will-change: transform; }
.nhc-slide {
flex: 0 0 100%; min-width: 100%;
min-height: clamp(560px, 72vh, 760px);
display: flex; align-items: center; justify-content: center;
padding: clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem);
position: relative; color: #fff;
}
.nhc-slide-inner { max-width: var(--container); width: 100%; margin: 0 auto; position: relative; z-index: 1; }
.nhc-slide--promo {
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,.25), transparent 50%),
linear-gradient(135deg, #CA0000 0%, #8a0000 100%);
}
.nhc-slide--promo .nhc-slide-inner { text-align: center; max-width: 880px; }
.nhc-slide--product {
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,.25), transparent 50%),
linear-gradient(135deg, #CA0000 0%, #8a0000 100%);
}
.nhc-slide-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
.nhc-slide-text-col { padding-right: 1rem; }
.nhc-slide-img-col {
display: flex; align-items: center; justify-content: center;
position: relative;
}
.nhc-slide-img-col::before { content: ''; position: absolute; inset: -10%; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%); z-index: -1; }
.nhc-slide-img-col img { max-height: 420px; width: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); border-radius: var(--r-md); }
@media (max-width: 820px) {
.nhc-slide-split { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
.nhc-slide-text-col { padding: 0; text-align: center; }
.nhc-slide-img-col img { max-height: 240px; }
/* CTA-Buttons mittig + gleiche Breite (justify-content:inherit greift hier nicht) */
.nhc-slide-cta { justify-content: center; align-items: center; }
.nhc-slide-cta .nhc-btn { min-width: 240px; justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
.nhc-slide-cta { flex-direction: column; gap: .6rem; width: 100%; }
.nhc-slide-cta .nhc-btn { width: 100%; max-width: 320px; min-width: 0; }
}
.nhc-slide-eyebrow {
display: inline-block; background: rgba(255,255,255,.15); backdrop-filter: blur(10px);
color: #fff; padding: .5rem 1rem; border-radius: var(--r-pill);
font-size: .82rem; font-weight: 600; letter-spacing: .04em;
border: 1px solid rgba(255,255,255,.2); margin-bottom: 1.25rem;
}
.nhc-slide-title {
color: #fff !important;
font-size: clamp(2rem, 5.5vw, 4rem) !important;
font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
margin: 0 0 1.25rem;
}
.nhc-slide-text { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; margin: 0 0 2rem; }
.nhc-slide-price { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; color: #fff; margin: 0 0 1.75rem; letter-spacing: -.02em; }
.nhc-slide-price del { color: rgba(255,255,255,.5); font-size: .7em; margin-right: .5rem; font-weight: 500; }
.nhc-slide-price ins { text-decoration: none; }
.nhc-slide-cta { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: inherit; }
.nhc-slide--promo .nhc-slide-cta { justify-content: center; }
.nhc-slide-trust {
margin-top: 2.25rem; display: flex; justify-content: center; flex-wrap: wrap;
gap: 1.25rem; color: rgba(255,255,255,.8); font-size: .88rem;
}
.nhc-slider-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px;
background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-pill);
color: #fff; font-size: 1.75rem; cursor: pointer;
transition: all var(--t-f); z-index: 5;
display: flex; align-items: center; justify-content: center; padding: 0 0 4px 0;
}
.nhc-slider-arrow:hover { background: rgba(255,255,255,.25); }
.nhc-slider-prev { left: 1.5rem; } .nhc-slider-next { right: 1.5rem; }
@media (max-width: 600px) {
.nhc-slider-prev { left: .5rem; } .nhc-slider-next { right: .5rem; }
.nhc-slider-arrow { width: 40px; height: 40px; font-size: 1.5rem; }
}
.nhc-slider-dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 5; }
.nhc-slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; cursor: pointer; transition: all var(--t-f); }
.nhc-slider-dot:hover { background: rgba(255,255,255,.7); }
.nhc-slider-dot.is-active { background: #fff; width: 28px; border-radius: var(--r-pill); }
/* ============================================
SECTIONS
============================================ */
.nhc-section { padding: clamp(3.5rem,7vw,5rem) clamp(1rem,4vw,2rem); }
.nhc-section--muted { background: var(--bg-soft); }
.nhc-section-head { text-align: center; max-width: 700px; margin: 0 auto 2.5rem; }
.nhc-section-eyebrow {
display: inline-block; font-size: .8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .12em;
color: var(--brand); margin-bottom: .85rem;
}
.nhc-section-title { font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important; font-weight: 800; letter-spacing: -.025em; margin: 0 0 .75rem; }
.nhc-section-text { font-size: 1.05rem; color: var(--ink-soft); margin: 0; }
/* Categories grid */
.nhc-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: var(--container); margin: 0 auto; }
@media (max-width: 900px) { .nhc-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .nhc-cat-grid { grid-template-columns: 1fr; } }
.nhc-cat-tile {
display: flex; flex-direction: column;
background: var(--surface, #fff);
border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 2rem 1.75rem; text-decoration: none; color: var(--ink);
transition: all var(--t-m); position: relative; overflow: hidden;
}
.nhc-cat-tile::after {
content: '→'; position: absolute; bottom: 1.25rem; right: 1.5rem;
font-size: 1.5rem; color: var(--ink-subtle);
transition: transform var(--t-f), color var(--t-f);
}
.nhc-cat-tile:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--sh-3); text-decoration: none; }
.nhc-cat-tile:hover::after { transform: translateX(4px); color: var(--brand); }
/* Einfarbige Strich-Icons in Markenrot — gleiche Sprache wie die USP-Leiste.
color wird von den SVGs über stroke="currentColor" übernommen. */
.nhc-cat-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
background: var(--brand-50); color: var(--brand);
border-radius: var(--r-md); margin-bottom: 1.25rem;
transition: background var(--t-f), color var(--t-f);
}
.nhc-cat-icon svg { display: block; }
.nhc-cat-tile:hover .nhc-cat-icon { background: var(--brand); color: #fff; }
.nhc-cat-name { font-size: 1.2rem; font-weight: 700; margin: 0 0 .35rem; letter-spacing: -.015em; }
.nhc-cat-desc { font-size: .92rem; color: var(--ink-soft); margin: 0; }
/* USP strip — Style wie Pre-Footer-Trust-Strip */
.nhc-usp {
background: var(--bg-soft);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 2.5rem clamp(1rem,4vw,2rem);
}
.nhc-usp-grid { max-width: var(--container-w); margin: 0 auto;
display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem;
}
@media (max-width: 900px) { .nhc-usp-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .nhc-usp-grid { grid-template-columns: 1fr; } }
.nhc-usp-item { display: flex; align-items: center; gap: 1rem; }
.nhc-usp-icon {
flex-shrink: 0; width: 48px; height: 48px;
background: var(--brand-50); color: var(--brand);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
}
.nhc-usp-icon svg { display: block; }
.nhc-usp-item h3 { font-size: 1rem !important; margin: 0 0 .15rem; color: var(--ink); font-weight: 700; }
.nhc-usp-item p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
/* Brand grid */
.nhc-brand-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; max-width: var(--container); margin: 0 auto; }
@media (max-width: 900px) { .nhc-brand-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 540px) { .nhc-brand-grid { grid-template-columns: repeat(2,1fr); } }
.nhc-brand-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1.25rem;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
padding: 2rem 1.25rem; text-align: center; text-decoration: none;
color: var(--ink-soft); font-weight: 700;
min-height: 190px;
transition: all var(--t-f);
}
/* Die Logodateien sind auf ihren Inhalt beschnitten (Originale liegen in
assets/img/brands/_original). Vorher lag das Logo als ~350x80-Motiv auf
einer 1800x600-Fläche — object-fit:contain hat den Leerraum mitskaliert
und das Logo dadurch winzig gerendert. */
.nhc-brand-tile img {
width: 100%;
max-width: 230px;
height: 96px;
object-fit: contain;
filter: grayscale(.15);
transition: filter var(--t-f);
}
@media (max-width: 900px) {
.nhc-brand-tile img { height: 72px; max-width: 170px; }
}
.nhc-brand-tile:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); text-decoration: none; }
.nhc-brand-tile:hover img { filter: grayscale(0); }
.nhc-brand-name { font-size: 1rem; font-weight: 700; }
.nhc-brand-count { font-size: .75rem; color: var(--ink-subtle); font-weight: 500; }
/* Service tiles */
.nhc-service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; max-width: var(--container); margin: 0 auto; }
@media (max-width: 900px) { .nhc-service-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .nhc-service-grid { grid-template-columns: 1fr; } }
.nhc-service-tile {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 1.75rem 1.25rem; text-align: center; text-decoration: none; color: var(--ink);
transition: all var(--t-m);
}
.nhc-service-tile:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-2); }
.nhc-service-icon {
width: 56px; height: 56px; margin: 0 auto 1rem;
background: var(--brand-50); color: var(--brand);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.nhc-service-title { font-size: 1rem; font-weight: 700; margin: 0 0 .35rem; }
.nhc-service-desc { font-size: .88rem; color: var(--ink-soft); margin: 0; }
/* Beratungs-Box (Brauchen Sie Hilfe?) */
.nhc-help {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
color: #fff;
padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem);
}
.nhc-help-inner {
max-width: var(--container); margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center;
}
@media (max-width: 900px) { .nhc-help-inner { grid-template-columns: 1fr; gap: 2rem; } }
.nhc-help-text .nhc-section-eyebrow { color: rgba(255,255,255,.85) !important; }
.nhc-help-text h2,
.nhc-help-text h2 a,
.nhc-help h2 { color: #fff !important; font-size: clamp(1.6rem,2.8vw,2.2rem) !important; margin: .5rem 0 1rem !important; }
.nhc-help-text p,
.nhc-help p { color: rgba(255,255,255,.95) !important; font-size: 1.05rem !important; margin: 0 !important; }
.nhc-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 540px) { .nhc-help-actions { grid-template-columns: 1fr; } }
.nhc-help-card {
display: flex; align-items: center; gap: .85rem;
padding: 1rem 1.15rem;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--r-md);
color: #fff !important; text-decoration: none;
transition: all var(--t-f);
}
.nhc-help-card:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); text-decoration: none; }
.nhc-help-icon {
width: 48px; height: 48px; flex-shrink: 0;
background: rgba(255,255,255,.15); border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
}
.nhc-help-card strong { display: block; font-size: .95rem; font-weight: 700; }
.nhc-help-card span { font-size: .82rem; opacity: .85; }
/* FAQ */
.nhc-faq { max-width: 880px; margin: 0 auto; }
.nhc-faq-item {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
margin-bottom: .75rem; overflow: hidden;
transition: border-color var(--t-f);
}
.nhc-faq-item[open] { border-color: var(--brand); box-shadow: var(--sh-2); }
.nhc-faq-item summary {
cursor: pointer; list-style: none;
padding: 1.1rem 1.5rem;
font-weight: 700; font-size: 1.05rem; color: var(--ink);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
transition: background var(--t-f);
}
.nhc-faq-item summary::-webkit-details-marker { display: none; }
.nhc-faq-item summary:hover { background: var(--bg-soft); }
.nhc-faq-chev {
flex-shrink: 0; width: 28px; height: 28px;
background: var(--bg-muted); border-radius: var(--r-pill);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.25rem; line-height: 1; color: var(--ink-soft);
transition: all var(--t-f);
}
.nhc-faq-item[open] .nhc-faq-chev { transform: rotate(45deg); background: var(--brand); color: #fff; }
.nhc-faq-answer { padding: 0 1.5rem 1.25rem; color: var(--ink-soft); line-height: 1.65; }
.nhc-faq-answer p:first-child { margin-top: 0; }
.nhc-faq-answer a { color: var(--brand); text-decoration: underline; }
/* Video-Embed */
.nhc-video { max-width: 960px; margin: 0 auto; }
.nhc-video-frame {
position: relative; aspect-ratio: 16/9;
background: var(--ink);
border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--sh-3);
}
.nhc-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Newsletter dark */
.nhc-newsletter { background: linear-gradient(135deg, var(--ink) 0%, #2D2D2F 100%); color: #fff; padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem); }
.nhc-newsletter-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.nhc-newsletter h2 { color: #fff; margin-bottom: .5rem; }
.nhc-newsletter p { color: rgba(255,255,255,.75); margin-bottom: 1.75rem; }
.nhc-newsletter-form-row {
display: flex; gap: .5rem; padding: 5px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r-pill);
}
.nhc-newsletter-form-row input { flex: 1; background: transparent; border: 0; padding: .85rem 1.25rem; color: #fff; font-size: 1rem; }
.nhc-newsletter-form-row input:focus { outline: 0; }
.nhc-newsletter-form-row input::placeholder { color: rgba(255,255,255,.55); }
.nhc-newsletter-form-row button {
background: var(--brand); color: #fff; border: 0; border-radius: var(--r-pill);
padding: .85rem 1.75rem; font-weight: 700; cursor: pointer; transition: background var(--t-f);
}
.nhc-newsletter-form-row button:hover { background: var(--brand-700); }
.nhc-newsletter-consent { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: .85rem; display: flex; gap: .5rem; align-items: center; justify-content: center; }
.nhc-newsletter-consent a { color: rgba(255,255,255,.9); text-decoration: underline; }
.nhc-newsletter-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nhc-newsletter-msg { margin: 1rem auto 0; max-width: 520px; padding: .75rem 1rem; border-radius: 12px; background: rgba(22,163,74,.18); color: #fff; font-size: .9rem; line-height: 1.45; }
.nhc-newsletter-msg.is-error { background: rgba(202,0,0,.28); }
.nhc-newsletter-form.is-done .nhc-newsletter-form-row,
.nhc-newsletter-form.is-done .nhc-newsletter-consent { display: none; }
/* Rückmeldung nach Klick auf Bestätigungs-/Abmeldelink */
.nhc-nl-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: .75rem; max-width: calc(100vw - 2rem); padding: .85rem 1rem .85rem 1.1rem; background: #fff; color: var(--ink); border: 1px solid var(--border); border-left: 4px solid #16a34a; border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.25); font-size: .92rem; }
.nhc-nl-toast.is-error { border-left-color: var(--brand); }
.nhc-nl-toast-icon { font-weight: 700; color: #16a34a; }
.nhc-nl-toast.is-error .nhc-nl-toast-icon { color: var(--brand); }
.nhc-nl-toast button { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--ink-subtle); cursor: pointer; padding: 0 .25rem; }
/* SEO content (legacy single column) */
.nhc-content-block { max-width: 880px; margin: 0 auto; }
.nhc-content-block h2 { margin-bottom: 1rem; }
.nhc-content-block h3 { margin-top: 2rem; }
.nhc-content-block ul { padding-left: 1.5rem; }
.nhc-content-block ul li { margin-bottom: .35rem; }
/* About-Section (Über uns mit Highlights) */
.nhc-about-inner { max-width: var(--container); margin: 0 auto; }
.nhc-about-head { max-width: 880px; margin: 0 auto 2.5rem; text-align: center; }
.nhc-about-video { max-width: 960px; margin: 0 auto 3rem; }
.nhc-about-video .nhc-video-frame { background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); aspect-ratio: 16/9; position: relative; }
.nhc-about-video .nhc-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nhc-about-video-caption { text-align: center; color: var(--ink-soft); font-size: .92rem; margin: .85rem 0 0; }
.nhc-about-lead { font-size: 1.1rem; color: var(--ink-soft); line-height: 1.65; margin: 1rem 0 0; }
.nhc-about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .nhc-about-grid { grid-template-columns: 1fr; gap: 2rem; } }
.nhc-about-content { display: flex; flex-direction: column; gap: 2.5rem; }
.nhc-about-block h3 {
font-size: 1.35rem !important;
margin: 0 0 1rem;
display: flex; align-items: center; gap: .65rem;
}
.nhc-about-block h3::before {
content: ''; display: inline-block;
width: 4px; height: 1.25em; background: var(--brand); border-radius: 2px;
}
.nhc-about-block p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1rem; }
.nhc-about-quote {
margin: 0; padding: 1.25rem 1.5rem;
background: #fff; border-left: 4px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0;
font-style: italic; color: var(--ink); font-size: 1.05rem; line-height: 1.55;
box-shadow: var(--sh-1);
}
.nhc-about-quote p { color: var(--ink); margin: 0; }
.nhc-about-paths { display: flex; flex-direction: column; gap: 1rem; }
.nhc-about-path {
display: flex; gap: 1rem; align-items: flex-start;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
padding: 1rem 1.25rem;
transition: all var(--t-f);
}
.nhc-about-path:hover { border-color: var(--brand); box-shadow: var(--sh-2); }
.nhc-about-path-num {
flex-shrink: 0;
width: 36px; height: 36px;
background: var(--brand); color: #fff;
border-radius: var(--r-pill);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1rem;
}
.nhc-about-path strong { display: block; color: var(--ink); margin-bottom: .15rem; font-size: 1rem; }
.nhc-about-path p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.nhc-about-side { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 160px; }
@media (max-width: 900px) { .nhc-about-side { position: static; } }
.nhc-about-card {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 1.5rem;
}
.nhc-about-card--features h3 { font-size: 1rem !important; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.nhc-about-card--features ul { list-style: none; padding: 0; margin: 0; }
.nhc-about-card--features li {
display: flex; gap: .6rem; align-items: flex-start;
padding: .55rem 0;
border-bottom: 1px solid var(--border);
font-size: .92rem; color: var(--ink);
}
.nhc-about-card--features li:last-child { border-bottom: 0; }
.nhc-tick {
flex-shrink: 0;
width: 20px; height: 20px;
background: var(--brand-50); color: var(--brand);
border-radius: var(--r-pill);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .72rem;
margin-top: 2px;
}
.nhc-about-card--address { font-style: normal; }
.nhc-about-card-head { display: flex; align-items: center; gap: .5rem; color: var(--brand); margin-bottom: .85rem; }
.nhc-about-card-head strong { font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.nhc-about-card--address hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.nhc-about-meta { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; font-size: .9rem; }
.nhc-about-meta dt { color: var(--ink-subtle); }
.nhc-about-meta dd { margin: 0; color: var(--ink); }
.nhc-about-meta a { color: var(--brand); font-weight: 600; }
/* ============================================
WC LOOP CARDS
============================================ */
.woocommerce ul.products,
ul.products { list-style: none; padding: 0 !important; margin: 0; display: grid !important; grid-template-columns: repeat(4,1fr); gap: 1.5rem; float: none !important; }
/* WooCommerce Clearfix-Pseudo-Elemente neutralisieren — sie würden im Grid die erste Zelle belegen */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
@media (max-width: 1100px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 800px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .woocommerce ul.products, ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product {
list-style: none; width: 100% !important; margin: 0 !important; float: none !important;
background: #fff;
border: 1.5px solid rgba(202,0,0,.18);
border-radius: var(--r-lg);
padding: 1rem 1rem 1.25rem !important; position: relative; overflow: hidden;
transition: all var(--t-m); text-align: left;
}
.woocommerce ul.products li.product:hover {
border-color: var(--brand);
box-shadow: 0 12px 28px rgba(202,0,0,.16);
transform: translateY(-3px);
}
.woocommerce ul.products li.product a img {
border-radius: var(--r-md); margin: 0 auto .85rem;
aspect-ratio: 1; object-fit: contain;
background: var(--bg-muted); padding: .5rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: .95rem !important; font-weight: 600 !important; color: var(--ink) !important;
min-height: 2.6em; letter-spacing: -.01em; padding: 0 .25rem !important; margin: .5rem 0 .25rem !important;
}
.woocommerce ul.products li.product .price {
color: var(--brand) !important; font-weight: 700 !important; font-size: 1.2rem !important;
letter-spacing: -.015em; display: block; padding: 0 .25rem; margin: .25rem 0 .85rem !important;
}
.woocommerce ul.products li.product .price del { color: var(--ink-subtle); font-weight: 500; font-size: .8em; margin-right: .35rem; }
.woocommerce ul.products li.product .price ins { background: transparent; text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
background: var(--bg-muted) !important; color: var(--ink) !important;
border-radius: var(--r-pill) !important; font-weight: 600 !important;
padding: .55rem 1.1rem !important; font-size: .85rem !important;
border: 0 !important; box-shadow: none !important; text-decoration: none;
display: inline-block; margin-top: 0 !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--brand) !important; color: #fff !important; }
.woocommerce span.onsale, .nhc-badge {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important; padding: .25rem .7rem !important;
font-weight: 700 !important; min-height: 0 !important; line-height: 1.2 !important;
font-size: .72rem !important; letter-spacing: .02em;
top: 14px !important; left: 14px !important; right: auto !important; position: absolute;
}
.nhc-cmp-add {
margin-top: .35rem;
background: transparent; color: var(--ink-soft);
border: 1px solid var(--border); border-radius: var(--r-pill);
padding: .35rem .85rem; font-size: .78rem; font-weight: 500;
cursor: pointer; transition: all var(--t-f);
display: inline-block;
}
.nhc-cmp-add:hover, .nhc-cmp-add.is-active {
border-color: var(--brand); color: var(--brand); background: var(--brand-50);
}
/* Heart-Button (Merkzettel) auf Produkt-Loop */
.nhc-wish-add {
position: absolute; top: 14px; right: 14px; z-index: 4;
width: 38px; height: 38px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--ink-subtle); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--t-f);
padding: 0;
}
.nhc-wish-add:hover { color: var(--brand); border-color: var(--brand); }
.nhc-wish-add.is-active {
background: var(--brand); color: #fff; border-color: var(--brand);
animation: nhc-wish-bump .35s ease;
}
.nhc-wish-add.is-active svg { fill: currentColor; }
@keyframes nhc-wish-bump { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* Merkzettel-Seite: Toggle via root-class */
.nhc-wish-root.is-empty .nhc-wish-when-filled { display: none !important; }
.nhc-wish-root.is-filled .nhc-wish-when-empty { display: none !important; }
.nhc-empty-card { text-align:center; padding: 4rem 1rem; background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); max-width: 600px; margin: 2rem auto 4rem; }
/* Aus-Merkliste-entfernen Button auf Wishlist-Karten */
.nhc-wish-remove-card {
display: inline-flex !important;
align-items: center; justify-content: center; gap: .35rem;
width: calc(100% - 1rem);
margin: 1.25rem .5rem .25rem !important;
background: #fff !important;
color: var(--ink-soft) !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--r-pill) !important;
padding: .55rem 1rem !important;
font-size: .82rem !important; font-weight: 600 !important;
letter-spacing: .01em;
cursor: pointer;
transition: all var(--t-f);
box-shadow: none !important;
text-decoration: none;
}
.nhc-wish-remove-card:hover {
border-color: var(--brand) !important;
color: var(--brand) !important;
background: var(--brand-50) !important;
transform: translateY(-1px);
}
.nhc-wish-remove-card:active { transform: translateY(0); }
/* Vergleichen-Button auf Wishlist-Karten — mehr Abstand zum Entfernen-Button */
li.product .nhc-cmp-add {
margin-bottom: 0 !important;
}
.nhc-wishlist { padding: 2rem 0 4rem; max-width: var(--container); margin: 0 auto; }
.nhc-wishlist-empty {
text-align: center; padding: 4rem 1rem;
background: var(--bg-soft);
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
}
.nhc-wishlist-empty svg { color: var(--brand); margin: 0 auto 1rem; }
.nhc-wishlist-empty h2 { margin: 0 0 .5rem; }
.nhc-wishlist-empty p { color: var(--ink-soft); margin: 0 0 1.5rem; }
.nhc-wishlist-head {
display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap;
margin-bottom: 2rem;
}
.nhc-wishlist-head h1 { margin: 0; font-size: clamp(1.5rem,3vw,2rem) !important; }
.nhc-wishlist-count { color: var(--ink-subtle); margin: .35rem 0 0; font-size: .9rem; }
.nhc-wishlist-content ul.products li.product { position: relative; }
.nhc-wish-remove {
position: absolute; top: 10px; right: 10px; z-index: 5;
width: 32px; height: 32px;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill);
color: var(--ink-subtle); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--t-f);
}
.nhc-wish-remove:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* ============================================
ARCHIVE / SHOP LAYOUT
============================================ */
.nhc-shop-layout {
display: grid !important;
grid-template-columns: 280px minmax(0, 1fr);
gap: 2rem; align-items: start;
max-width: var(--container); margin: 0 auto;
padding: 1rem clamp(1rem,4vw,2rem) 3rem;
}
.nhc-shop-layout > .nhc-shop-results,
.nhc-shop-layout > .nhc-filter { min-width: 0; }
@media (max-width: 900px) { .nhc-shop-layout { grid-template-columns: 1fr; } }
/* Shop-Kopfzeile: Breadcrumb links · Titel + Anzahl mittig · Sortierung rechts — alles gleiche Schriftgröße */
.nhc-shop-bar {
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem;
padding-top: 1.5rem; margin-bottom: 2rem; font-size: .85rem;
}
.nhc-container > .nhc-shop-bar > .nhc-breadcrumb { padding: 0 !important; margin: 0 !important; max-width: none !important; font-size: inherit; min-width: 0; }
.nhc-shop-bar-center { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; justify-self: center; }
.nhc-shop-bar-center h1 { margin: 0; font-size: inherit !important; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.nhc-shop-bar-center .nhc-shop-result-count { font-size: inherit; color: var(--ink-subtle); }
.nhc-shop-bar-center .nhc-shop-result-count::before { content: "·"; margin-right: .45rem; }
.nhc-shop-bar .nhc-shop-orderby { justify-self: end; }
.nhc-shop-bar .nhc-shop-orderby select { font-size: inherit; padding: .45rem 2.2rem .45rem .9rem; }
.nhc-shop-desc { color: var(--ink-soft); margin: -1rem 0 1.5rem; max-width: 680px; }
@media (max-width: 760px) {
.nhc-shop-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bc bc" "title sort"; row-gap: .75rem; padding-top: 1rem; }
.nhc-shop-bar > .nhc-breadcrumb { grid-area: bc; }
.nhc-shop-bar-center { grid-area: title; justify-self: start; min-width: 0; }
/* Titel steht mobil schon als letzter Breadcrumb-Eintrag → nur für Suchmaschinen/Screenreader */
.nhc-shop-bar-center h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nhc-shop-bar-center .nhc-shop-result-count::before { content: none; }
.nhc-shop-bar .nhc-shop-orderby { grid-area: sort; }
.nhc-shop-bar .nhc-shop-orderby select { max-width: 52vw; }
}
.nhc-shop-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.nhc-shop-head h1 { margin: 0; font-size: clamp(1.5rem,3vw,2rem) !important; }
.nhc-shop-result-count { color: var(--ink-subtle); font-size: .9rem; margin: 0; }
.nhc-shop-orderby select {
border: 1px solid var(--border); border-radius: var(--r-pill);
padding: .55rem 1rem; background: #fff; font: inherit; font-size: .9rem;
color: var(--ink); cursor: pointer;
}
.woocommerce-ordering { margin-bottom: 0 !important; }
/* === Filter Sidebar === */
.nhc-filter { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; position: sticky; top: 140px; }
.nhc-filter-block + .nhc-filter-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.nhc-filter h3 {
font-size: .75rem !important; text-transform: uppercase;
letter-spacing: .1em; color: var(--ink-subtle); margin: 0 0 .85rem !important; font-weight: 700;
}
.nhc-filter-search {
width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-md);
padding: .55rem .85rem; font: inherit; font-size: .9rem; color: var(--ink);
}
.nhc-filter-search:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.nhc-filter-list { list-style: none; margin: 0; padding: 0; }
.nhc-filter-list--scroll { max-height: 200px; overflow-y: auto; padding-right: .25rem; }
.nhc-filter-list li a {
display: flex; justify-content: space-between; align-items: center;
padding: .4rem .5rem; margin: 0 -.5rem;
border-radius: var(--r-sm); color: var(--ink); font-size: .92rem; text-decoration: none;
transition: all var(--t-f);
}
.nhc-filter-list li a:hover { background: var(--bg-muted); }
.nhc-filter-list li a.is-active { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.nhc-filter-list li a span { font-size: .78rem; color: var(--ink-subtle); }
.nhc-filter-list li a.is-active span { color: var(--brand); }
.nhc-filter-price { display: flex; gap: .5rem; align-items: center; }
.nhc-filter-price input {
flex: 1; border: 1.5px solid var(--border); border-radius: var(--r-md);
padding: .5rem .65rem; font: inherit; font-size: .88rem; min-width: 0;
}
.nhc-filter-price input:focus { outline: 0; border-color: var(--brand); }
.nhc-filter-price span { color: var(--ink-subtle); }
.nhc-filter-check { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.nhc-filter-check input { accent-color: var(--brand); }
.nhc-filter-reset { display: block; text-align: center; margin-top: .75rem; font-size: .85rem; color: var(--ink-subtle); }
/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 3rem; }
.woocommerce nav.woocommerce-pagination ul { border: 0 !important; display: flex; gap: .35rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background: #fff !important; color: var(--ink) !important;
border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
padding: .55rem .95rem !important; font-weight: 600 !important;
transition: all var(--t-f);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--brand-50) !important; color: var(--brand) !important; border-color: var(--brand) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
/* ============================================
PRODUCT SINGLE (Modern)
============================================ */
.nhc-product-hero {
display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem;
max-width: var(--container); margin: 0 auto;
padding: 1.5rem clamp(1rem,4vw,2rem) 3rem;
align-items: start;
}
@media (max-width: 900px) { .nhc-product-hero { grid-template-columns: 1fr; gap: 2rem; } }
.nhc-product-gallery {
position: sticky; top: 140px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1rem;
align-self: start;
}
@media (max-width: 900px) { .nhc-product-gallery { position: static; } }
.nhc-gallery-main {
background: #fff; border-radius: var(--r-md); overflow: hidden;
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.nhc-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.nhc-gallery-main-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.nhc-gallery-thumbs {
display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: .5rem; margin-top: .85rem;
}
.nhc-gallery-thumb {
background: #fff; border: 2px solid var(--border); border-radius: var(--r-sm);
padding: 4px; cursor: pointer; aspect-ratio: 1;
transition: all var(--t-f);
}
.nhc-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; opacity: .65; transition: opacity var(--t-f); }
.nhc-gallery-thumb:hover { border-color: var(--brand-soft); }
.nhc-gallery-thumb:hover img { opacity: .9; }
.nhc-gallery-thumb.is-active { border-color: var(--brand); background: var(--brand-50); }
.nhc-gallery-thumb.is-active img { opacity: 1; }
.nhc-product-gallery .onsale, .nhc-product-gallery span.onsale {
z-index: 5;
top: 20px !important; left: 20px !important;
}
.nhc-product-info { display: flex; flex-direction: column; gap: 1.25rem; }
.nhc-product-meta-top { display: flex; flex-wrap: wrap; gap: .5rem; }
.nhc-pill {
display: inline-flex; align-items: center;
padding: .35rem .85rem;
background: var(--bg-muted); color: var(--ink);
border-radius: var(--r-pill);
font-size: .78rem; font-weight: 600;
letter-spacing: .01em;
}
.nhc-pill--brand { background: var(--brand); color: #fff; }
.nhc-pill--ghost { background: transparent; border: 1px solid var(--border); color: var(--ink-subtle); }
.nhc-product-title {
font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
font-weight: 800; letter-spacing: -.02em;
margin: 0; line-height: 1.15;
}
.nhc-product-rating {
display: flex; align-items: center; gap: .65rem;
font-size: .9rem; color: var(--ink-soft);
}
.nhc-stars { color: var(--warning); letter-spacing: 1px; font-size: 1rem; }
.nhc-product-excerpt {
color: var(--ink-soft); line-height: 1.65;
background: var(--bg-soft);
border-left: 3px solid var(--brand);
padding: 1rem 1.25rem;
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.nhc-product-excerpt p:last-child { margin-bottom: 0; }
.nhc-product-buybox {
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.5rem;
box-shadow: var(--sh-1);
}
.nhc-product-price {
display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
margin-bottom: .85rem;
}
.nhc-product-price .price,
.nhc-product-price .amount {
color: var(--brand) !important;
font-size: 2rem !important; font-weight: 800 !important;
letter-spacing: -.02em;
}
.nhc-product-price del { color: var(--ink-subtle); font-size: 1.2rem !important; font-weight: 500; text-decoration: line-through; }
.nhc-product-price ins { text-decoration: none; background: transparent; }
.nhc-product-price small { color: var(--ink-subtle); font-size: .82rem; font-weight: 500; flex-basis: 100%; }
.nhc-product-price small a { color: var(--brand); }
.nhc-stock {
display: inline-flex; align-items: center; gap: .4rem;
padding: .45rem .85rem; border-radius: var(--r-pill);
font-size: .85rem; font-weight: 600;
margin-bottom: 1.25rem;
}
.nhc-stock.is-in { background: rgba(11,180,106,.1); color: var(--success); }
.nhc-stock.is-out { background: var(--brand-50); color: var(--brand); }
.nhc-product-info form.cart { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin: 0 !important; }
.nhc-product-info .quantity .qty {
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
padding: .85rem !important; width: 90px; text-align: center;
font: inherit; font-weight: 700;
}
.nhc-product-info .single_add_to_cart_button {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
padding: 14px 32px !important;
font-weight: 700 !important; font-size: 1rem !important;
box-shadow: var(--sh-brand);
flex: 1; min-width: 200px;
border: 0;
transition: all var(--t-f);
}
.nhc-product-info .single_add_to_cart_button:hover { background: var(--brand-700) !important; transform: translateY(-1px); }
/* Buybox actions (Vergleichen + Merken nebeneinander) */
.nhc-buybox-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.nhc-wish-add-text.is-active { background: var(--brand-50); color: var(--brand); border-color: var(--brand); }
/* WhatsApp Tiefpreis-Anfrage */
.nhc-whatsapp {
display: flex; align-items: center; gap: .85rem;
margin-top: 1rem; padding: .85rem 1.1rem;
background: #25D366; color: #fff !important;
border-radius: var(--r-md);
text-decoration: none;
font-size: .9rem; line-height: 1.35;
transition: all var(--t-f);
}
.nhc-whatsapp:hover { background: #1FB855; color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,211,102,.35); text-decoration: none; }
.nhc-whatsapp svg { flex-shrink: 0; }
.nhc-whatsapp strong { display: block; font-weight: 700; }
/* Preisverlauf */
.nhc-pricehistory { margin-top: 3rem; }
.nhc-pricehist-card {
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 1.75rem;
}
.nhc-pricehist-summary {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
}
@media (max-width: 700px) { .nhc-pricehist-summary { grid-template-columns: repeat(2, 1fr); } }
.nhc-pricehist-summary > div { display: flex; flex-direction: column; gap: .25rem; }
.nhc-pricehist-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); font-weight: 600; }
.nhc-pricehist-summary strong { font-size: 1.15rem; color: var(--ink); font-weight: 700; }
.nhc-pricehist-summary .nhc-trend-down { color: var(--success); }
.nhc-pricehist-summary .nhc-trend-up { color: var(--brand); }
.nhc-pricehist-summary .nhc-trend-flat { color: var(--ink-subtle); }
.nhc-pricehist-chart { width: 100%; height: auto; max-height: 200px; }
.nhc-pricehist-axis {
display: flex; justify-content: space-between;
font-size: .72rem; color: var(--ink-subtle);
padding: 0 18px; margin-top: .35rem;
}
.nhc-pricehist-note { margin: 1rem 0 0; font-size: .78rem; color: var(--ink-subtle); }
.nhc-product-trust {
display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
@media (max-width: 540px) { .nhc-product-trust { grid-template-columns: 1fr; } }
.nhc-trust-item {
display: flex; gap: .65rem; align-items: flex-start;
padding: .75rem; background: var(--bg-soft);
border: 1px solid var(--border); border-radius: var(--r-md);
}
.nhc-trust-item svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.nhc-trust-item strong { display: block; font-size: .88rem; color: var(--ink); }
.nhc-trust-item span { font-size: .78rem; color: var(--ink-soft); display: block; line-height: 1.4; }
.nhc-trust-item a { color: var(--brand); font-weight: 600; }
.nhc-product-tabs-wrap { padding-bottom: 4rem; }
/* Lager + Lieferhinweis */
.nhc-stock-wrap { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.25rem; }
.nhc-stock { margin-bottom: 0 !important; }
.nhc-stock-note { font-size: .78rem; color: var(--ink-subtle); }
.nhc-stock-note a { color: var(--brand); }
/* Empty state */
.nhc-empty-state { padding: 2rem 1rem; text-align: center; background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--ink-soft); }
/* Tabs */
.nhc-tabs { margin-top: 2.5rem; }
.nhc-tabs-nav {
display: flex; flex-wrap: wrap; gap: 4px;
border-bottom: 2px solid var(--border);
margin-bottom: 1.75rem;
}
.nhc-tab {
background: transparent; border: 0; padding: .85rem 1.25rem;
font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink-soft);
cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
border-radius: var(--r-sm) var(--r-sm) 0 0;
transition: all var(--t-f);
}
.nhc-tab:hover { color: var(--ink); background: var(--bg-soft); }
.nhc-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.nhc-tab-panel[hidden] { display: none; }
/* Lightbox */
.nhc-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(15,17,21,.92);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .22s ease;
}
.nhc-lightbox.is-open { opacity: 1; }
.nhc-lb-stage { width: 90vw; height: 85vh; display: flex; align-items: center; justify-content: center; }
.nhc-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.nhc-lb-close, .nhc-lb-prev, .nhc-lb-next {
position: absolute; background: rgba(255,255,255,.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
color: #fff; cursor: pointer;
width: 48px; height: 48px; border-radius: 50%;
font-size: 1.75rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: all .15s ease;
}
.nhc-lb-close { top: 1.5rem; right: 1.5rem; }
.nhc-lb-prev { top: 50%; left: 1.5rem; transform: translateY(-50%); }
.nhc-lb-next { top: 50%; right: 1.5rem; transform: translateY(-50%); padding-bottom: 4px; }
.nhc-lb-close:hover, .nhc-lb-prev:hover, .nhc-lb-next:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.nhc-lb-counter {
position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
color: #fff; font-size: .9rem; font-weight: 500;
background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
padding: .35rem .85rem; border-radius: 999px;
}
@media (max-width: 600px) {
.nhc-lb-close, .nhc-lb-prev, .nhc-lb-next { width: 40px; height: 40px; font-size: 1.5rem; }
.nhc-lb-prev { left: .5rem; } .nhc-lb-next { right: .5rem; } .nhc-lb-close { top: .75rem; right: .75rem; }
}
/* === Bewertungs-Tab: Modern Sterne-Rating === */
.woocommerce #reviews { padding: 0; }
.woocommerce #reviews h2,
.woocommerce #reviews h3 { font-size: 1.25rem !important; padding-left: 1rem; position: relative; margin: 0 0 1.5rem; }
.woocommerce #reviews h2::before,
.woocommerce #reviews h3::before {
content:''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 1.25em; background: var(--brand); border-radius: 2px;
}
.woocommerce #reviews #comments ol.commentlist { list-style: none; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.woocommerce #reviews #comments .meta { display: flex; gap: .85rem; align-items: center; margin-bottom: .5rem; }
.woocommerce #reviews #comments .meta strong { font-size: .95rem; color: var(--ink); }
.woocommerce #reviews #comments time, .woocommerce #reviews .verified { font-size: .82rem; color: var(--ink-subtle); }
.woocommerce #reviews .star-rating { font-size: 1.1rem; }
/* Reply form */
.woocommerce #review_form .comment-form { display: grid; gap: 1rem; max-width: 640px; }
.woocommerce #review_form .comment-form input[type=text],
.woocommerce #review_form .comment-form input[type=email],
.woocommerce #review_form .comment-form textarea {
border: 1.5px solid var(--border); border-radius: var(--r-md);
padding: .75rem 1rem; font: inherit; font-size: .95rem;
}
.woocommerce #review_form .comment-form input:focus,
.woocommerce #review_form .comment-form textarea:focus {
outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50);
}
.woocommerce #review_form #submit {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
padding: .85rem 2rem !important; border: 0 !important;
font-weight: 700 !important; cursor: pointer;
box-shadow: var(--sh-brand);
align-self: flex-start;
}
.woocommerce #review_form #submit:hover { background: var(--brand-700) !important; }
/* Star-Rating Input statt Select */
.woocommerce p.stars {
display: inline-flex; gap: 4px; align-items: center;
background: var(--bg-soft); border: 1px solid var(--border);
padding: .55rem .85rem; border-radius: var(--r-pill);
}
.woocommerce p.stars a {
width: 22px; height: 22px;
position: relative; text-indent: -9999px;
color: var(--border-strong) !important;
background: none !important;
display: inline-block;
}
.woocommerce p.stars a::before {
content: '★'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
text-indent: 0; font-size: 22px; line-height: 1;
color: var(--border-strong);
transition: color .12s ease;
}
.woocommerce p.stars:hover a::before,
.woocommerce p.stars.selected a:not(.active) ~ a::before { color: var(--border-strong) !important; }
.woocommerce p.stars a:hover::before,
.woocommerce p.stars a:hover ~ a::before { color: var(--warning) !important; }
.woocommerce p.stars.selected a.active::before,
.woocommerce p.stars.selected a.active ~ a::before { color: var(--warning) !important; }
.woocommerce p.stars.selected a:not(.active) ~ a::before { color: var(--border-strong) !important; }
.woocommerce p.stars a.active ~ a::before { color: var(--warning) !important; }
/* Ersten gefüllten + alle davor: */
.woocommerce p.stars a.active::before { color: var(--warning) !important; }
.woocommerce label[for=rating] { display: block; font-weight: 600; margin-bottom: .35rem; }
/* "Sei der Erste, der diesen Artikel bewertet"-Block schöner */
.woocommerce-noreviews {
background: var(--bg-soft); border: 1px dashed var(--border-strong);
border-radius: var(--r-md); padding: 1.5rem; text-align: center;
color: var(--ink-soft); margin: 0 0 1.5rem !important;
}
/* Eigene Bewertungs-Liste (nur Anzeige) */
.nhc-reviews { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.nhc-review {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.nhc-review header { display: flex; gap: .85rem; align-items: center; flex-wrap: wrap; margin-bottom: .65rem; }
.nhc-review strong { color: var(--ink); }
.nhc-review time { color: var(--ink-subtle); font-size: .82rem; }
.nhc-review-stars { display: inline-flex; gap: 1px; font-size: 1rem; }
.nhc-review-stars span { color: var(--border-strong); }
.nhc-review-stars span.on { color: var(--warning); }
.nhc-review-body { color: var(--ink-soft); line-height: 1.6; }
.nhc-review-body p { margin: 0 0 .5rem; }
.nhc-review-body p:last-child { margin: 0; }
.nhc-review-cta {
background: var(--brand-50);
border: 1px solid rgba(202,0,0,.18);
border-radius: var(--r-md);
padding: 1.5rem;
text-align: center;
}
.nhc-review-cta p { margin: 0 0 1rem; color: var(--ink); }
/* Product Video (im Beschreibungs-Tab) */
.nhc-product-video { margin-bottom: 1.75rem; }
.nhc-product-video .nhc-video-frame { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); background: var(--ink); position: relative; }
.nhc-product-video .nhc-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Product-Description (inside tab) */
.nhc-product-description {
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 1.75rem;
line-height: 1.7; color: var(--ink-soft); font-size: .97rem;
}
.nhc-product-description p { margin: 0 0 1rem; }
.nhc-product-description p:last-child { margin: 0; }
.nhc-product-description strong { color: var(--ink); }
.nhc-product-description h2,
.nhc-product-description h3 { color: var(--ink); margin-top: 1.5rem; }
.nhc-product-description h2:first-child,
.nhc-product-description h3:first-child { margin-top: 0; }
/* === Legacy: keine doppelten Description-Sections === */
.nhc-product-section { margin-top: 3rem; }
.nhc-product-section > h2 {
font-size: 1.5rem !important;
position: relative; padding-left: 1rem;
margin-bottom: 1.25rem !important;
}
.nhc-product-section > h2::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 1.25em; background: var(--brand); border-radius: 2px;
}
.nhc-product-section { margin-top: 3rem; }
.nhc-product-section > h2 {
font-size: 1.5rem !important;
position: relative; padding-left: 1rem;
margin-bottom: 1.25rem !important;
}
.nhc-product-section > h2::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 1.25em; background: var(--brand); border-radius: 2px;
}
.nhc-product-description {
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem; line-height: 1.7;
color: var(--ink-soft); font-size: .97rem;
}
.nhc-product-description p { margin: 0 0 1rem; }
.nhc-product-description p:last-child { margin: 0; }
.nhc-product-description strong { color: var(--ink); }
.nhc-specs { margin-top: 3rem; }
.nhc-specs h2 { margin-bottom: 1.5rem; }
.nhc-specs-group + .nhc-specs-group { margin-top: 1.5rem; }
.nhc-specs-group h3 {
font-size: .8rem !important; text-transform: uppercase; letter-spacing: .1em;
color: var(--brand); font-weight: 700; margin: 0 0 .75rem;
}
.nhc-specs dl {
display: grid; grid-template-columns: 240px 1fr;
background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md);
margin: 0; overflow: hidden;
}
.nhc-specs dt, .nhc-specs dd { padding: .75rem 1rem; margin: 0; border-bottom: 1px solid var(--border); }
.nhc-specs dt { background: #fff; font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.nhc-specs dd { font-size: .95rem; }
.nhc-specs dl > dt:nth-last-of-type(1), .nhc-specs dl > dd:nth-last-of-type(1) { border-bottom: 0; }
.nhc-yes { color: var(--success); font-weight: 600; }
.nhc-no, .nhc-dim { color: var(--ink-subtle); }
/* ============================================
COMPARE PAGE
============================================ */
.nhc-compare { padding: 2rem 0; max-width: var(--container-w); margin: 0 auto; }
/* === Apple-Style Picker === */
.nhc-picker { padding: 2rem 0 4rem; }
.nhc-picker-intro { text-align: center; max-width: 700px; margin: 0 auto 3rem; }
.nhc-picker-intro h1 { font-size: clamp(2rem,4vw,3rem) !important; margin: 0 0 1rem; letter-spacing: -.03em; }
.nhc-picker-intro p { font-size: 1.1rem; color: var(--ink-soft); margin: 0; }
.nhc-picker-slots {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
max-width: 980px; margin: 0 auto 2.5rem;
}
@media (max-width: 800px) { .nhc-picker-slots { grid-template-columns: 1fr; } }
.nhc-picker-slot {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 280px; padding: 2rem;
background: var(--bg-soft);
border: 2px dashed var(--border-strong);
border-radius: var(--r-lg);
cursor: pointer; color: var(--ink-subtle);
transition: all var(--t-m);
font: inherit;
text-align: center;
}
.nhc-picker-slot:hover {
border-color: var(--brand); color: var(--brand);
background: var(--brand-50);
transform: translateY(-3px);
}
.nhc-picker-slot.is-filled {
background: #fff; border-style: solid; border-color: var(--border);
color: var(--ink); cursor: default;
}
.nhc-picker-slot.is-filled:hover { transform: none; }
.nhc-picker-plus {
font-size: 3rem; font-weight: 300; line-height: 1;
width: 64px; height: 64px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-pill);
margin-bottom: 1rem;
transition: all var(--t-f);
}
.nhc-picker-slot:hover .nhc-picker-plus { background: var(--brand); color: #fff; border-color: var(--brand); }
.nhc-picker-label { font-size: .95rem; font-weight: 600; }
.nhc-picker-slot.is-filled .nhc-picker-plus { display: none; }
.nhc-picker-slot.is-filled img { max-height: 140px; margin-bottom: .85rem; border-radius: var(--r-md); }
.nhc-picker-slot .nhc-picker-filled-name { font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: .25rem; }
.nhc-picker-slot .nhc-picker-filled-price { color: var(--brand); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.nhc-picker-slot .nhc-picker-actions-inline { display: flex; gap: .5rem; }
.nhc-picker-slot .nhc-picker-change,
.nhc-picker-slot .nhc-picker-remove {
background: transparent; border: 1px solid var(--border);
color: var(--ink-soft);
padding: .4rem .85rem; border-radius: var(--r-pill);
font-size: .82rem; cursor: pointer; font-weight: 500;
transition: all var(--t-f);
}
.nhc-picker-slot .nhc-picker-change:hover { border-color: var(--brand); color: var(--brand); }
.nhc-picker-slot .nhc-picker-remove:hover { border-color: var(--brand); color: var(--brand); }
.nhc-picker-actions {
display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem;
}
.nhc-picker-actions .nhc-btn[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }
.nhc-picker-suggested { max-width: 900px; margin: 0 auto; text-align: center; padding-top: 2rem; border-top: 1px solid var(--border); }
.nhc-picker-suggested h2 { font-size: 1.25rem !important; color: var(--ink-soft); margin-bottom: 1.25rem; font-weight: 600; }
.nhc-picker-quick { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.nhc-picker-quick-btn {
display: inline-flex; align-items: center; gap: .35rem;
padding: .65rem 1.25rem;
background: var(--bg-muted); border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--ink); font-weight: 500; font-size: .9rem;
text-decoration: none;
transition: all var(--t-f);
}
.nhc-picker-quick-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); text-decoration: none; }
/* === Picker Modal === */
.nhc-picker-modal {
position: fixed; inset: 0; z-index: 300;
display: none;
}
.nhc-picker-modal.is-open { display: block; }
.nhc-picker-modal-backdrop {
position: absolute; inset: 0;
background: rgba(15,17,21,.5);
backdrop-filter: blur(4px);
animation: nhc-fade .2s ease;
}
@keyframes nhc-fade { from { opacity: 0; } to { opacity: 1; } }
.nhc-picker-modal-panel {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: min(960px, 95vw);
max-height: 85vh;
background: #fff; border-radius: var(--r-lg);
box-shadow: var(--sh-4);
display: flex; flex-direction: column;
overflow: hidden;
animation: nhc-pop .25s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes nhc-pop {
from { transform: translate(-50%, -50%) scale(.92); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.nhc-picker-modal-head {
display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.nhc-picker-modal-head h2 { font-size: 1.25rem !important; margin: 0; }
.nhc-picker-search {
background: var(--bg-muted); border: 1.5px solid transparent;
border-radius: var(--r-pill);
padding: .55rem 1.1rem;
font: inherit; font-size: .92rem;
width: 320px; max-width: 50vw;
}
.nhc-picker-search:focus { outline: 0; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.nhc-picker-modal-close {
background: transparent; border: 0;
width: 36px; height: 36px;
font-size: 1.75rem; line-height: 1; cursor: pointer;
color: var(--ink); border-radius: var(--r-pill);
transition: background var(--t-f);
}
.nhc-picker-modal-close:hover { background: var(--bg-muted); }
.nhc-picker-modal-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: .5rem !important;
padding: 1rem 1.5rem !important;
background: var(--bg-soft) !important;
border-bottom: 1px solid var(--border) !important;
align-items: center;
}
.nhc-picker-modal-tabs button {
display: inline-flex !important;
align-items: center; justify-content: center;
min-height: 36px;
background: #fff !important;
border: 1.5px solid var(--border) !important;
padding: .5rem 1rem !important;
border-radius: 999px !important;
font-family: inherit !important;
font-size: .85rem !important;
font-weight: 600 !important;
color: var(--ink) !important;
cursor: pointer !important;
white-space: nowrap;
line-height: 1.2 !important;
text-decoration: none !important;
outline: 0;
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.nhc-picker-modal-tabs button:hover {
background: var(--brand-50) !important;
border-color: var(--brand) !important;
color: var(--brand) !important;
}
.nhc-picker-modal-tabs button.is-active,
.nhc-picker-modal-tabs button[class*="is-active"] {
background: var(--brand) !important;
border-color: var(--brand) !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(202,0,0,.25);
}
.nhc-picker-modal-body {
flex: 1; overflow-y: auto;
padding: 1.5rem;
}
.nhc-picker-modal-body section { margin-bottom: 2rem; }
.nhc-picker-modal-body section h3 {
font-size: .8rem !important; text-transform: uppercase; letter-spacing: .1em;
color: var(--ink-subtle); margin: 0 0 1rem; font-weight: 700;
}
.nhc-picker-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem;
}
.nhc-picker-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 1rem; cursor: pointer; text-align: left;
font: inherit;
transition: all var(--t-f);
}
.nhc-picker-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.nhc-picker-card img {
width: 100%; aspect-ratio: 1; object-fit: contain;
background: var(--bg-muted); border-radius: var(--r-sm);
padding: .35rem; margin-bottom: .65rem;
}
.nhc-picker-card-name { font-weight: 600; font-size: .88rem; color: var(--ink); margin-bottom: .35rem; flex: 1; }
.nhc-picker-card-price { color: var(--brand); font-weight: 700; font-size: .92rem; }
.nhc-picker-card.is-hidden { display: none; }
/* overflow:hidden würde position:sticky der Kopfzeile ausschalten → clip.
clip beschneidet genauso auf den Border-Radius, blockiert aber kein Sticky. */
/* Trennlinien über Zell-Rahmen statt über gap + grauen Container-Hintergrund.
Beim gap-Trick scheint überall dort Grau durch, wo eine Zelle ihren Platz
verlässt — z.B. sobald die Kopfzeile beim Scrollen mitwandert. */
.nhc-compare-grid { display: grid; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: clip; }
/* Produktkarten bleiben beim Scrollen unter dem Header stehen */
.nhc-c-head {
background: #fff; padding: .9rem 1rem;
position: sticky; top: var(--nhc-header-h, 76px); z-index: 20;
box-shadow: 0 1px 0 var(--border);
}
/* Leere Ecke oben links: gleiche Farbe wie Label-Spalte, volle Zeilenhöhe.
KEIN min-height:100% — Prozentwerte rechnen hier gegen eine unbestimmte
Zeilenhöhe, fallen auf auto zurück und die Zelle kollabiert. Dann scrollen
Gruppen- und Label-Zellen sichtbar durch die Kopfzeile. align-self:stretch
allein füllt die Grid-Zeile zuverlässig. */
.nhc-c-head.nhc-c-label {
background: var(--bg-soft) !important;
padding: 0 !important;
align-self: stretch !important;
min-height: 0 !important;
}
/* WICHTIG: .nhc-c-product setzt weiter unten position:relative (für den
×-Button) und hat dieselbe Spezifität wie .nhc-c-head — ohne diese Regel
verlieren ausgerechnet die Produktzellen ihr sticky und scrollen weg,
während die leere Ecke kleben bleibt. Zwei Klassen = höhere Spezifität. */
.nhc-c-head.nhc-c-product {
position: sticky;
top: var(--nhc-header-h, 76px);
z-index: 20;
}
/* Alles unterhalb der Kopfzeile muss garantiert darunter durchlaufen.
:not(.nhc-c-head) ist zwingend — die Eckzelle trägt .nhc-c-label mit,
ein position:relative würde ihr das sticky wieder nehmen. */
.nhc-c-group,
.nhc-c-label:not(.nhc-c-head),
.nhc-c-cell:not(.nhc-c-head) { position: relative; z-index: 1; }
/* Trennlinien */
.nhc-c-label,
.nhc-c-cell,
.nhc-c-group { border-top: 1px solid var(--border); }
.nhc-c-cell,
.nhc-c-head.nhc-c-product { border-left: 1px solid var(--border); }
.nhc-c-head { border-top: 0; }
/* Zellen füllen die Zeile immer komplett aus — sonst scheint zwischen den
Zeilen die graue Grid-Hintergrundfarbe durch, sobald eine Nachbarzelle
umbricht. Inhalt wird per Flexbox vertikal zentriert statt per align-self. */
.nhc-c-label,
.nhc-c-cell {
align-self: stretch;
display: flex; align-items: center;
min-height: var(--nhc-c-row-h, 58px);
padding: .7rem 1rem;
}
.nhc-c-label { background: var(--bg-soft); font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.nhc-c-cell { background: #fff; font-size: .95rem; }
/* Lange Werte/Labels dürfen die Zeilenhöhe nicht sprengen */
.nhc-c-label > *,
.nhc-c-cell > * { margin: 0; }
.nhc-c-label,
.nhc-c-cell { line-height: 1.35; }
.nhc-c-group { background: var(--brand); color: #fff; padding: .65rem 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
/* Kompakt gehalten: die Kopfzeile bleibt beim Scrollen stehen und darf
deshalb nicht zu viel Fensterhöhe belegen. */
.nhc-c-product { text-align: center; position: relative; }
.nhc-c-product img { max-width: 104px; margin: 0 auto .5rem; border-radius: var(--r-md); background: var(--bg-muted); padding: .35rem; }
.nhc-c-product h3 { font-size: .92rem; line-height: 1.3; margin: 0 0 .35rem; }
.nhc-c-price { color: var(--brand); font-weight: 700; font-size: 1.05rem; margin: .2rem 0 .6rem; }
.nhc-c-remove { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.5rem; color: var(--ink-subtle); cursor: pointer; line-height: 1; }
.nhc-c-remove:hover { color: var(--brand); }
/* ============================================
FOOTER
============================================ */
.nhc-prefooter { background: #2A2A2C; color: rgba(255,255,255,.85); padding: 2.5rem clamp(1rem,4vw,2rem); }
.nhc-prefooter-grid {
max-width: var(--container-w); margin: 0 auto;
display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem;
}
.nhc-prefooter-grid--single { grid-template-columns: 1fr; justify-items: center; }
.nhc-prefooter-grid--single .nhc-prefooter-item { justify-content: center; }
@media (max-width: 900px) { .nhc-prefooter-grid:not(.nhc-prefooter-grid--single) { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .nhc-prefooter-grid:not(.nhc-prefooter-grid--single) { grid-template-columns: 1fr; } }
.nhc-prefooter-icon svg { display: block; }
.nhc-prefooter-item { display: flex; align-items: center; gap: 1rem; }
.nhc-prefooter-icon {
width: 48px; height: 48px; flex-shrink: 0;
background: rgba(255,255,255,.08); border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.nhc-prefooter-item h3 { font-size: 1rem !important; margin: 0 0 .15rem; color: #fff !important; }
.nhc-prefooter-item p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.65); }
/* Footer in tiefem Markenrot statt Schwarz.
Die drei Variablen steuern das komplette Farbbild — wer es heller oder
dunkler will, ändert nur hier. */
.nhc-footer {
--footer-bg-1: #CA0000; /* wie der Aktions-Slide auf der Startseite */
--footer-bg-2: #8A0000;
--footer-accent: #FFD6D6;
/* Identischer Aufbau wie .nhc-slide--promo: zwei Radialverläufe für Tiefe
über einem diagonalen Linearverlauf. */
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,.25), transparent 50%),
linear-gradient(135deg, var(--footer-bg-1) 0%, var(--footer-bg-2) 100%);
/* Auf dem helleren Rot braucht der Fließtext mehr Deckkraft:
72 % ergäben nur 3,49:1 und wären damit zu kontrastarm. */
color: rgba(255,255,255,.9);
padding: clamp(3rem,7vw,5rem) clamp(1rem,4vw,2rem) 0;
font-size: .92rem;
position: relative;
}
/* Schmale Markenkante als Übergang von der hellen USP-Leiste */
.nhc-footer::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--brand);
}
.nhc-footer-grid { max-width: var(--container-w); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 1100px) { .nhc-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 540px) { .nhc-footer-grid { grid-template-columns: 1fr; } }
.nhc-footer h3 { color: #fff !important; font-size: 1.2rem; font-weight: 800; margin: 0 0 .5rem; line-height: 1.25; }
.nhc-footer-tag { color: rgba(255,255,255,.8) !important; font-size: .82rem !important; margin: 0 0 1.25rem !important; }
.nhc-footer address { font-style: normal; color: rgba(255,255,255,.95) !important; margin-bottom: 1.25rem; line-height: 1.55; }
.nhc-footer address strong { color: #fff; font-weight: 700; }
.nhc-footer-phones { display: grid; grid-template-columns: 1fr; gap: .25rem; margin: 0 0 1.25rem; }
.nhc-footer-phones dt { color: rgba(255,255,255,.8); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .35rem; }
.nhc-footer-phones dd { margin: 0; font-size: .9rem; }
.nhc-footer-phones dd a { color: #fff !important; font-weight: 500; }
.nhc-footer-phones dd a:hover { color: var(--footer-accent); }
.nhc-footer-map { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); margin-bottom: .75rem; }
.nhc-footer-map iframe { display: block; }
.nhc-footer-mapbtn {
display: inline-flex; align-items: center; gap: .35rem;
padding: .55rem 1rem; background: rgba(255,255,255,.08);
color: #fff !important; border-radius: var(--r-pill);
font-size: .85rem; font-weight: 600; text-decoration: none;
border: 1px solid rgba(255,255,255,.12);
transition: all var(--t-f);
}
.nhc-footer-mapbtn:hover { background: #fff; border-color: #fff; color: var(--footer-bg-2) !important; }
.nhc-footer-hours { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.nhc-footer-hours li {
display: flex; justify-content: space-between;
padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.nhc-footer-hours li:last-child { border-bottom: 0; }
.nhc-footer-hours li span { color: rgba(255,255,255,.88); }
.nhc-footer-hours li strong { color: #fff; font-weight: 600; }
.nhc-footer-hours li em { color: rgba(255,255,255,.75); font-style: normal; font-size: .85rem; }
/* Steuernummer zentriert unter dem Raster (vormals Inline-Styles im Template) */
.nhc-footer-vat {
max-width: var(--container-w); margin: 2rem auto 0 !important;
text-align: center; font-size: .82rem;
color: rgba(255,255,255,.85) !important; line-height: 1.55;
}
.nhc-footer-vat strong { color: rgba(255,255,255,.85); }
.nhc-footer sup { font-size: .55em; vertical-align: super; }
.nhc-footer .nhc-social { margin-top: 1rem; }
.nhc-footer h4 { color: #fff !important; font-size: .78rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1rem; }
.nhc-footer ul { list-style: none; padding: 0; margin: 0; }
.nhc-footer li { margin-bottom: .65rem; }
.nhc-footer a { color: rgba(255,255,255,.92) !important; text-decoration: none; transition: color var(--t-f); }
.nhc-footer a:hover { color: var(--footer-accent) !important; }
.nhc-footer p { color: rgba(255,255,255,.9); margin: 0 0 1rem; line-height: 1.6; }
.nhc-social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.nhc-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; background: rgba(255,255,255,.12);
border-radius: var(--r-pill); color: #fff !important;
font-size: 1.1rem; transition: all var(--t-f);
}
.nhc-social a:hover { background: #fff; transform: translateY(-2px); color: var(--brand) !important; }
.nhc-footer-divider { max-width: var(--container-w); margin: 2.5rem auto !important; height: 1px; background: rgba(255,255,255,.24); border: 0; }
.nhc-payment {
max-width: var(--container-w); margin: 0 auto;
display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center;
}
.nhc-payment span {
background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
padding: .4rem .75rem; border-radius: var(--r-sm);
font-size: .75rem; font-weight: 600;
border: 1px solid rgba(255,255,255,.18);
}
.nhc-pay {
display: inline-flex; align-items: center; gap: .5rem !important;
padding: .4rem .65rem !important;
}
.nhc-pay svg { display: block; flex-shrink: 0; }
/* Abgesetztes Band ganz unten — gibt dem Footer einen sauberen Abschluss */
.nhc-footer-bottom {
max-width: var(--container-w); margin: 2.5rem auto 0;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem; font-size: .82rem;
color: rgba(255,255,255,.85);
border-top: 1px solid rgba(255,255,255,.22);
padding: 1.25rem clamp(1rem,4vw,2rem) 1.75rem;
}
.nhc-footer-bottom a { color: rgba(255,255,255,.92); }
/* ============================================
STATIC CONTENT PAGES (Über uns, AGB, etc.)
============================================ */
.wp-singular:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.home) .entry-content,
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.home) .entry-content {
max-width: var(--container);
margin: 1.5rem auto 4rem;
padding: 0 clamp(1rem,4vw,2rem);
line-height: 1.7;
color: var(--ink-soft);
}
body.page .entry-content h1, body.page .entry-content h2, body.page .entry-content h3 { color: var(--ink); margin-top: 1.5em; margin-bottom: .5em; }
body.page .entry-content h2 { font-size: 1.5rem; }
body.page .entry-content h3 { font-size: 1.2rem; }
body.page .entry-content p { margin: 0 0 1em; }
body.page .entry-content ul, body.page .entry-content ol { margin: 0 0 1em 1.5rem; }
body.page .entry-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
body.page .entry-content table th, body.page .entry-content table td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
/* === Anfahrt + Kontakt + Sitemap === */
.nhc-anfahrt { padding: 0 clamp(1rem,4vw,2rem) 4rem; }
.nhc-anfahrt-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .nhc-anfahrt-grid { grid-template-columns: 1fr; } }
.nhc-anfahrt-info h2 { margin: 0 0 1rem; font-size: 1.5rem; position: relative; padding-left: 1rem; }
.nhc-anfahrt-info h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1.25em; background: var(--brand); border-radius: 2px; }
.nhc-anfahrt-info h3 { font-size: 1.1rem; color: var(--ink); margin: 0 0 .75rem; }
.nhc-anfahrt-lead { color: var(--ink-soft); margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.6; }
.nhc-anfahrt-card { display: flex; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); font-style: normal; margin-bottom: 1.25rem; }
.nhc-anfahrt-icon { color: var(--brand); flex-shrink: 0; }
.nhc-anfahrt-card strong { color: var(--ink); }
.nhc-anfahrt-card sup { font-size: .55em; vertical-align: super; }
.nhc-anfahrt-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.nhc-anfahrt-hours { list-style: none; padding: 0; margin: 0; }
.nhc-anfahrt-hours li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.nhc-anfahrt-hours li:last-child { border-bottom: 0; }
.nhc-anfahrt-hours li span { color: var(--ink-soft); }
.nhc-anfahrt-hours li strong { color: var(--ink); }
.nhc-anfahrt-hours li em { color: var(--ink-subtle); font-style: normal; font-size: .9rem; }
.nhc-anfahrt-contact dt { font-weight: 700; color: var(--ink); margin-top: 1rem; }
.nhc-anfahrt-contact dd { margin: .35rem 0 0; color: var(--ink-soft); line-height: 1.6; }
.nhc-anfahrt-contact dd strong { color: var(--ink); }
.nhc-anfahrt-map { position: sticky; top: 140px; height: 100%; min-height: 500px; }
@media (max-width: 900px) { .nhc-anfahrt-map { position: static; min-height: 300px; } }
.nhc-kontakt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1rem; }
@media (max-width: 900px) { .nhc-kontakt-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .nhc-kontakt-grid { grid-template-columns: 1fr; } }
.nhc-kontakt-card { display: block; padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: all var(--t-m); text-align: center; }
.nhc-kontakt-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-2); text-decoration: none; }
.nhc-kontakt-icon { font-size: 2.5rem; line-height: 1; margin-bottom: .75rem; }
.nhc-kontakt-card h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); font-weight: 700; margin: 0 0 .35rem; }
.nhc-kontakt-big { font-size: 1.15rem; font-weight: 700; color: var(--brand); margin: 0 0 .35rem; }
.nhc-kontakt-card p:not(.nhc-kontakt-big) { font-size: .85rem; color: var(--ink-soft); margin: 0; }
/* === Über-uns-Page (Custom Shortcode) === */
.nhc-about-page { margin-bottom: 4rem; }
.nhc-about-hero {
background: linear-gradient(135deg, var(--brand, #ca0000) 0%, #7a0000 100%);
padding: 5rem clamp(1rem,4vw,2rem) 4rem;
text-align: center;
margin-bottom: 3rem;
color: #fff;
position: relative;
overflow: hidden;
}
.nhc-about-hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,.06) 0%, transparent 50%);
pointer-events: none;
}
.nhc-about-hero-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.nhc-about-hero-logo {
width: 240px; height: auto;
margin: 0 auto 2rem;
display: block;
color: #fff;
filter: brightness(0) invert(1);
}
.nhc-about-hero .nhc-section-eyebrow { color: rgba(255,255,255,.85) !important; }
.nhc-about-hero h1 {
font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
margin: .5rem 0 1rem !important;
letter-spacing: -.03em;
font-weight: 800;
color: #fff !important;
}
.nhc-about-hero h1 sup { font-size: .45em; vertical-align: super; color: rgba(255,255,255,.85); }
.nhc-about-hero-lead { font-size: 1.18rem; color: rgba(255,255,255,.9); line-height: 1.6; margin: 0 auto 2rem; max-width: 680px; }
.nhc-about-hero-lead strong { color: #fff; font-weight: 700; }
.nhc-about-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 700px) { .nhc-about-hero-stats { grid-template-columns: repeat(2, 1fr); } }
.nhc-about-hero-stats > div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 1.25rem .75rem; backdrop-filter: blur(8px); }
.nhc-about-hero-stats strong { display: block; font-size: 1.75rem; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.nhc-about-hero-stats span { font-size: .78rem; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .06em; }
.nhc-about-section { padding: 3rem 0; }
.nhc-about-section--brand {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
color: #fff;
padding: 4rem clamp(1rem,4vw,2rem);
}
.nhc-about-section--brand h2 { color: #fff !important; font-size: clamp(1.5rem,2.8vw,2.25rem) !important; margin: .5rem 0 2rem; }
.nhc-about-section--brand .nhc-section-eyebrow { color: rgba(255,255,255,.85); }
.nhc-about-section--cta {
background: var(--ink); color: #fff;
padding: 4rem clamp(1rem,4vw,2rem);
margin-top: 3rem;
}
.nhc-about-section--cta h2 { color: #fff !important; }
.nhc-about-section--cta p { color: rgba(255,255,255,.85); }
.nhc-about-section--cta .nhc-btn--primary { background: #fff !important; color: var(--brand) !important; }
.nhc-about-section--cta .nhc-btn--primary:hover { background: var(--brand-50) !important; color: var(--brand-700) !important; }
.nhc-about-section--cta .nhc-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.nhc-about-section--cta .nhc-btn--ghost:hover { background: rgba(255,255,255,.1) !important; border-color: #fff !important; }
.nhc-about-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .nhc-about-2col { grid-template-columns: 1fr; gap: 2rem; } }
.nhc-about-2col h2 { font-size: 1.5rem; margin: .5rem 0 1rem; }
.nhc-about-2col p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 1em; }
.nhc-about-quote-card {
background: var(--bg-soft);
border-left: 4px solid var(--brand);
border-radius: 0 var(--r-md) var(--r-md) 0;
padding: 2rem;
position: sticky; top: 140px;
}
.nhc-about-quote-card blockquote {
margin: 1rem 0; padding: 0;
font-size: 1.15rem; font-style: italic;
color: var(--ink); line-height: 1.5;
}
.nhc-about-quote-card cite { display: block; font-style: normal; color: var(--ink-subtle); font-size: .9rem; font-weight: 600; }
@media (max-width: 900px) { .nhc-about-quote-card { position: static; } }
.nhc-about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .nhc-about-values { grid-template-columns: 1fr; } }
.nhc-about-values > div { background: rgba(255,255,255,.1); padding: 1.5rem; border-radius: var(--r-lg); backdrop-filter: blur(4px); }
.nhc-about-value-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.nhc-about-values h3 { color: #fff !important; font-size: 1.15rem; margin: 0 0 .5rem; }
.nhc-about-values p { color: rgba(255,255,255,.9); margin: 0; line-height: 1.55; }
.nhc-about-checklist { list-style: none; padding: 0; margin: 0; }
.nhc-about-checklist li {
padding: .5rem 0 .5rem 1.75rem; position: relative;
border-bottom: 1px solid var(--border); color: var(--ink-soft);
}
.nhc-about-checklist li:last-child { border-bottom: 0; }
.nhc-about-checklist li::before {
content: '✓'; position: absolute; left: 0; top: .5rem;
width: 20px; height: 20px; border-radius: 50%;
background: var(--brand-50); color: var(--brand); font-weight: 700;
display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.nhc-about-map-section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .nhc-about-map-section { grid-template-columns: 1fr; } }
.nhc-about-map-image img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
/* === Unsere Partner === */
.nhc-partner-page { padding: 1rem 0 5rem; }
.nhc-partner-hero { text-align: center; max-width: 800px; margin: 0 auto 3rem; }
.nhc-partner-hero h2 { font-size: clamp(1.75rem,3vw,2.5rem) !important; letter-spacing: -.025em; }
.nhc-partner-lead { font-size: 1.1rem; color: var(--ink-soft); margin: 1rem 0; }
.nhc-partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.5rem; }
@media (max-width: 600px) { .nhc-partner-grid { grid-template-columns: 1fr; } }
.nhc-partner-card {
display: grid; grid-template-columns: 140px 1fr; gap: 1.25rem;
padding: 1.5rem;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
text-decoration: none; color: var(--ink);
transition: all var(--t-m);
}
.nhc-partner-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-3); text-decoration: none; }
.nhc-partner-logo-wrap {
background: var(--bg-soft); border-radius: var(--r-md);
padding: 1.5rem 1.25rem; display: flex; align-items: center; justify-content: center;
min-height: 160px;
}
.nhc-partner-logo-wrap img { max-width: 100%; max-height: 140px; width: auto; height: auto; object-fit: contain; }
.nhc-partner-logo-text { font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-align: center; }
.nhc-partner-group { font-size: 1.25rem; margin: 2.5rem 0 1rem; color: var(--ink); }
.nhc-partner-hero + .nhc-partner-group { margin-top: 0; }
.nhc-partner-meta { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.nhc-partner-name { display: flex; align-items: center; gap: .5rem; }
.nhc-partner-name strong { font-size: 1.1rem; color: var(--ink); }
.nhc-partner-flag { font-size: .7rem; background: var(--bg-muted); color: var(--ink-subtle); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.nhc-partner-meta p { font-size: .88rem; color: var(--ink-soft); margin: 0; line-height: 1.45; }
.nhc-partner-cta { color: var(--brand); font-weight: 600; font-size: .85rem; margin-top: auto; }
.nhc-partner-cta-box {
background: var(--brand-50); border: 1px solid rgba(202,0,0,.2);
border-radius: var(--r-lg); padding: 2rem;
text-align: center; margin-top: 3rem;
}
.nhc-partner-cta-box h3 { margin: 0 0 .5rem; }
.nhc-partner-cta-box p { color: var(--ink-soft); margin: 0 0 1.25rem; }
/* === Jobs === */
.nhc-jobs { padding: 1rem 0 4rem; }
.nhc-jobs-header { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.nhc-jobs-header h2 { font-size: clamp(1.75rem,3vw,2.5rem) !important; letter-spacing: -.025em; }
.nhc-jobs-header p { color: var(--ink-soft); margin-top: 1rem; font-size: 1.05rem; }
.nhc-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.nhc-job-card {
display: flex; flex-direction: column; gap: .75rem;
padding: 1.75rem;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
text-decoration: none; color: var(--ink);
transition: all var(--t-m);
}
.nhc-job-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-3); text-decoration: none; }
.nhc-job-meta { display: flex; gap: .35rem; flex-wrap: wrap; }
.nhc-job-card h3 { font-size: 1.15rem; margin: 0; color: var(--ink); }
.nhc-job-card p { color: var(--ink-soft); margin: 0; font-size: .92rem; line-height: 1.5; }
.nhc-job-cta { color: var(--brand); font-weight: 600; font-size: .9rem; margin-top: auto; }
/* === News-Archive === */
.nhc-news-archive { padding: 1rem 0 4rem; }
.nhc-news-header { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.nhc-news-header h2 { font-size: clamp(1.75rem,3vw,2.5rem) !important; letter-spacing: -.025em; }
.nhc-news-cats { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; }
.nhc-news-cat {
padding: .5rem 1rem; border: 1.5px solid var(--border); border-radius: var(--r-pill);
font-size: .88rem; font-weight: 600;
color: var(--ink); background: #fff;
text-decoration: none;
transition: all var(--t-f);
}
.nhc-news-cat:hover { border-color: var(--brand); color: var(--brand); }
.nhc-news-cat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.nhc-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; }
.nhc-news-card {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
overflow: hidden;
transition: all var(--t-m);
}
.nhc-news-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-3); }
.nhc-news-card-link { display: block; text-decoration: none; color: var(--ink); }
.nhc-news-image { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--bg-muted); }
.nhc-news-image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--ink-subtle); }
.nhc-news-body { padding: 1.25rem 1.5rem 1.5rem; }
.nhc-news-meta { display: flex; gap: .5rem; align-items: center; margin-bottom: .65rem; flex-wrap: wrap; }
.nhc-news-meta time { color: var(--ink-subtle); font-size: .8rem; }
.nhc-news-body h3 { font-size: 1.2rem; margin: .25rem 0 .65rem; color: var(--ink); letter-spacing: -.015em; }
.nhc-news-body p { color: var(--ink-soft); margin: 0 0 .85rem; font-size: .92rem; line-height: 1.55; }
.nhc-news-cta { color: var(--brand); font-weight: 600; font-size: .9rem; }
/* News Single-Page */
.nhc-news-single { max-width: 800px; margin: 2rem auto 4rem; padding: 0 clamp(1rem,4vw,2rem); }
.nhc-news-single h1 { font-size: clamp(1.75rem,3vw,2.5rem); letter-spacing: -.025em; margin: 1rem 0 .5rem; }
.nhc-news-single img.wp-post-image { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: 1.5rem; }
/* === 404-Seite: roter Hero wie der Aktions-Slide, darunter Kategorien + Beratung === */
.nhc-nf-hero {
position: relative; overflow: hidden; color: #fff; text-align: center;
padding: clamp(4rem,9vw,7rem) clamp(1rem,4vw,2rem);
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,.25), transparent 50%),
linear-gradient(135deg, #CA0000 0%, #8a0000 100%);
}
.nhc-nf-bg {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-size: clamp(14rem, 34vw, 30rem); font-weight: 900; line-height: 1; letter-spacing: -.06em;
color: rgba(255,255,255,.07); pointer-events: none; user-select: none; white-space: nowrap;
}
.nhc-nf-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.nhc-nf-title { color: #fff !important; font-size: clamp(2.1rem,5vw,3.6rem) !important; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 1rem; }
.nhc-nf-lead { color: rgba(255,255,255,.88); font-size: clamp(1rem,1.6vw,1.15rem); line-height: 1.6; max-width: 600px; margin: 0 auto 2rem; }
.nhc-nf-search {
display: flex; align-items: center; gap: .6rem; max-width: 560px; margin: 0 auto;
background: #fff; border-radius: var(--r-pill); padding: .4rem .4rem .4rem 1.25rem;
box-shadow: 0 18px 40px -16px rgba(0,0,0,.45);
}
.nhc-nf-search svg { color: var(--ink-subtle); flex-shrink: 0; }
.nhc-nf-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .75rem 0; font-size: 1rem; color: var(--ink); }
.nhc-nf-search input:focus { outline: 0; }
.nhc-nf-search button { background: var(--brand); color: #fff; border: 0; border-radius: var(--r-pill); padding: .8rem 1.5rem; font-weight: 700; cursor: pointer; transition: background var(--t-f); }
.nhc-nf-search button:hover { background: var(--brand-700); }
.nhc-nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 540px) {
.nhc-nf-actions .nhc-btn { flex: 1 1 100%; justify-content: center; }
.nhc-nf-search { border-radius: 14px; }
.nhc-nf-search button { border-radius: 10px; padding: .75rem 1rem; }
}
.nhc-sitemap { padding: 0 clamp(1rem,4vw,2rem) 4rem; }
.nhc-sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.nhc-sitemap-grid h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin: 0 0 .85rem; }
.nhc-sitemap-grid ul { list-style: none; padding: 0; margin: 0; }
.nhc-sitemap-grid li { padding: .35rem 0; }
.nhc-sitemap-grid a { color: var(--ink); text-decoration: none; font-weight: 500; }
.nhc-sitemap-grid a:hover { color: var(--brand); text-decoration: underline; }
.nhc-sitemap-grid small { color: var(--ink-subtle); font-weight: 400; }
/* ============================================
MY ACCOUNT (Konto)
============================================ */
.woocommerce-account .page-title { display: none; }
.woocommerce-account .woocommerce {
max-width: var(--container); margin: 2rem auto 4rem;
padding: 0 clamp(1rem,4vw,2rem);
}
/* Login + Register Forms (logged out) */
.woocommerce-account:not(.logged-in) .woocommerce {
max-width: 900px;
}
.u-columns.col2-set, .woocommerce-account .col2-set {
display: grid !important; grid-template-columns: 1fr 1fr; gap: 2rem;
width: 100% !important;
}
@media (max-width: 768px) { .u-columns.col2-set, .woocommerce-account .col2-set { grid-template-columns: 1fr; } }
.u-column1, .u-column2,
.woocommerce-account .col-1, .woocommerce-account .col-2 {
width: 100% !important; max-width: 100% !important;
background: #fff;
border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 2rem !important;
box-shadow: var(--sh-1);
}
/* Section-Headings nur in Account/Checkout (NICHT auf Loop-Card-Titles) */
.woocommerce-account .woocommerce h2,
.woocommerce-checkout .woocommerce h2,
.woocommerce-cart .woocommerce h2 {
font-size: 1.4rem !important;
margin: 0 0 1.5rem !important;
letter-spacing: -.02em;
position: relative; padding-left: 1rem;
}
.woocommerce-account .woocommerce h2::before,
.woocommerce-checkout .woocommerce h2::before,
.woocommerce-cart .woocommerce h2::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 1.5em; background: var(--brand); border-radius: 2px;
}
.woocommerce form .form-row {
display: flex; flex-direction: column; gap: .35rem;
margin: 0 0 1rem;
}
.woocommerce form .form-row label {
font-weight: 600; font-size: .85rem; color: var(--ink); margin: 0;
}
.woocommerce form .form-row .required { color: var(--brand); }
.woocommerce form .form-row input[type=text],
.woocommerce form .form-row input[type=email],
.woocommerce form .form-row input[type=password],
.woocommerce form .form-row input[type=tel],
.woocommerce form .form-row input[type=number],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
width: 100% !important;
padding: .75rem 1rem !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
font: inherit; font-size: .95rem;
background: #fff !important;
color: var(--ink);
transition: all var(--t-f);
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
outline: 0; border-color: var(--brand) !important;
box-shadow: 0 0 0 3px var(--brand-50);
}
.woocommerce form .button,
.woocommerce-button,
.woocommerce button[type=submit] {
background: var(--brand) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--r-pill) !important;
padding: .85rem 2rem !important;
font-weight: 700 !important;
font-size: .95rem !important;
cursor: pointer;
transition: all var(--t-f);
box-shadow: var(--sh-brand);
display: inline-block; text-decoration: none;
}
.woocommerce form .button:hover,
.woocommerce-button:hover,
.woocommerce button[type=submit]:hover {
background: var(--brand-700) !important; color: #fff !important;
transform: translateY(-1px);
}
.woocommerce form .lost_password { margin-top: 1rem; font-size: .85rem; }
.woocommerce form .lost_password a { color: var(--brand); }
.woocommerce-form__label-for-checkbox {
display: flex !important; gap: .5rem; align-items: center; font-size: .9rem;
}
.woocommerce-form__input-checkbox { accent-color: var(--brand); }
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
background: var(--bg-soft) !important;
border: 1px solid var(--border) !important;
border-left: 4px solid var(--brand) !important;
border-radius: var(--r-md);
padding: 1rem 1.25rem !important;
margin: 0 0 1.5rem !important;
list-style: none;
font-size: .92rem;
}
.woocommerce .woocommerce-error { border-left-color: var(--brand) !important; background: var(--brand-50) !important; }
.woocommerce .woocommerce-message { border-left-color: var(--success) !important; background: rgba(11,180,106,.08) !important; }
.woocommerce-notices-wrapper .button,
.woocommerce-message .button { float: right; padding: .35rem 1rem !important; font-size: .82rem !important; }
/* Logged-in dashboard */
.woocommerce-account.logged-in .woocommerce {
display: grid !important;
grid-template-columns: 260px 1fr;
gap: 2rem;
}
@media (max-width: 800px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-navigation {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.25rem;
height: fit-content;
position: sticky; top: 160px;
box-shadow: var(--sh-1);
}
@media (max-width: 800px) { .woocommerce-MyAccount-navigation { position: static; } }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
display: flex; align-items: center; gap: .65rem;
padding: .65rem .85rem;
margin: 2px 0;
border-radius: var(--r-md);
color: var(--ink); text-decoration: none;
font-size: .92rem; font-weight: 500;
transition: all var(--t-f);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--bg-muted); color: var(--brand); }
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--brand-50); color: var(--brand);
}
/* Icons via ::before for menu items */
.woocommerce-MyAccount-navigation li a::before {
content: ''; display: inline-block;
width: 18px; height: 18px;
background-size: contain; background-repeat: no-repeat;
flex-shrink: 0;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before { background-image: url("data:image/svg+xml;utf8,"); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--brand); }
.woocommerce-MyAccount-content {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 2rem;
box-shadow: var(--sh-1);
}
.woocommerce-MyAccount-content h2 { margin-top: 0 !important; }
.woocommerce-MyAccount-content p { color: var(--ink-soft); line-height: 1.65; }
.woocommerce-MyAccount-content a { color: var(--brand); font-weight: 500; }
/* Dashboard intro */
.woocommerce-MyAccount-content .woocommerce-MyAccount-content-wrapper > p:first-child {
background: var(--brand-50); border: 1px solid var(--brand);
border-radius: var(--r-md); padding: 1rem 1.25rem;
color: var(--ink);
}
/* Orders / Downloads table */
.woocommerce-orders-table, .woocommerce-MyAccount-downloads,
.shop_table {
width: 100%; border-collapse: separate; border-spacing: 0;
border: 1px solid var(--border) !important;
border-radius: var(--r-md) !important;
overflow: hidden;
margin-top: 1rem;
}
.shop_table thead { background: var(--bg-soft); }
.shop_table thead th {
padding: .85rem 1rem !important;
font-size: .82rem !important; text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-subtle) !important; font-weight: 700 !important;
text-align: left !important;
border-bottom: 1px solid var(--border);
}
.shop_table tbody td {
padding: .85rem 1rem !important;
border-bottom: 1px solid var(--border);
font-size: .92rem;
}
.shop_table tbody tr:last-child td { border-bottom: 0; }
.shop_table .button {
padding: .45rem 1rem !important;
font-size: .82rem !important;
margin-right: .35rem;
}
/* Address blocks */
.woocommerce-Address {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 1.25rem 1.5rem;
margin: 0;
}
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 { margin: 0 !important; padding: 0 !important; font-size: 1.1rem !important; }
.woocommerce-Address-title h2::before,
.woocommerce-Address-title h3::before { display: none; }
.woocommerce-Address-title .edit {
font-size: .85rem; color: var(--brand); padding: .35rem .85rem;
border: 1px solid var(--brand); border-radius: var(--r-pill);
text-decoration: none;
}
.woocommerce-Address address { font-style: normal; line-height: 1.55; color: var(--ink-soft); }
/* Page-Title — generell auf allen Pages konsistent positionieren */
body.page .wp-block-post-title,
body.page h1.wp-block-post-title {
max-width: var(--container) !important;
margin: 2rem auto 1.5rem !important;
padding: 0 clamp(1rem,4vw,2rem) !important;
font-size: clamp(1.75rem,3vw,2.5rem) !important;
font-weight: 800 !important;
letter-spacing: -.025em;
color: var(--ink);
}
/* Auf bestimmten Pages zusätzlich zentriert */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title,
body.page-template-page-fullwidth .wp-block-post-title,
body.page-template-page-compare .wp-block-post-title,
body.page-merkzettel .wp-block-post-title,
body.page-angebote .wp-block-post-title {
text-align: center !important;
}
/* Kasse-Block + Cart-Block in Container halten */
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart > main > .wp-block-post-content,
.woocommerce-checkout > main > .wp-block-post-content {
max-width: var(--container) !important;
margin-left: auto !important; margin-right: auto !important;
padding-left: clamp(1rem,4vw,2rem) !important;
padding-right: clamp(1rem,4vw,2rem) !important;
}
/* ============================================
CART (Modern, WC Cart-Block) — sanftes Styling
============================================ */
.woocommerce-cart .wp-block-woocommerce-cart {
max-width: var(--container);
margin: 2rem auto 4rem !important;
padding: 0 clamp(1rem,4vw,2rem);
}
/* Title - Cart Buttons */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-proceed-to-checkout .checkout-button,
.wc-block-cart-update-button,
button.wc-block-cart-update-button {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
padding: 14px 28px !important;
font-weight: 700 !important; font-size: 1rem !important;
border: 0 !important;
box-shadow: var(--sh-brand);
cursor: pointer;
transition: all var(--t-f);
text-decoration: none;
}
.wc-block-cart__submit-button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover {
background: var(--brand-700) !important; transform: translateY(-1px);
}
/* Product images in cart */
.wc-block-cart-items img,
.wc-block-components-product-image img {
border-radius: var(--r-md); background: var(--bg-muted); padding: 4px;
}
/* Product names */
.wc-block-components-product-name,
.wc-block-cart-item__product-name {
font-weight: 600 !important; color: var(--ink) !important;
}
.wc-block-components-product-name:hover { color: var(--brand) !important; }
/* Prices */
.wc-block-cart-item__total,
.wc-block-components-product-price {
font-weight: 700 !important; color: var(--brand) !important;
}
.wc-block-components-product-price__regular {
color: var(--ink-subtle) !important; text-decoration: line-through;
font-weight: 500 !important; margin-right: .35rem;
}
/* Quantity Selector */
.wc-block-components-quantity-selector {
border: 1.5px solid var(--border) !important;
border-radius: var(--r-pill) !important;
overflow: hidden;
}
.wc-block-components-quantity-selector button {
background: transparent !important; border: 0 !important;
color: var(--ink) !important; cursor: pointer;
}
.wc-block-components-quantity-selector button:hover { background: var(--bg-muted) !important; }
.wc-block-components-quantity-selector input {
border: 0 !important; background: transparent !important; font-weight: 700;
}
/* Remove link */
.wc-block-cart-item__remove-link {
color: var(--ink-subtle) !important; font-size: .82rem;
text-decoration: underline; text-underline-offset: 2px;
}
.wc-block-cart-item__remove-link:hover { color: var(--brand) !important; }
/* Totals Sidebar */
.wp-block-woocommerce-cart-order-summary-block {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.25rem !important;
}
.wc-block-components-totals-item {
padding: .55rem 0 !important;
font-size: .95rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
color: var(--brand) !important; font-weight: 800 !important; font-size: 1.2rem !important;
}
/* Empty Cart */
.wc-block-cart__empty-cart__title,
.cart-empty {
text-align: center;
background: var(--bg-soft);
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
padding: 3rem 2rem !important;
color: var(--ink) !important;
}
.return-to-shop .button,
.wc-block-cart__empty-cart__shop-button {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
padding: 12px 24px !important; font-weight: 700 !important;
text-decoration: none;
display: inline-block; margin-top: 1rem;
}
/* Add-to-cart Success Banner */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
background: rgba(11,180,106,.1) !important;
border-left: 4px solid var(--success) !important;
border-radius: var(--r-md) !important;
padding: 1rem 1.25rem !important;
color: var(--ink) !important;
display: flex; align-items: center; gap: .85rem;
}
.wc-block-components-notice-banner .button,
.woocommerce-message .button {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
padding: .5rem 1.25rem !important;
text-decoration: none; font-weight: 600;
}
/* Coupon-Input */
.wc-block-components-totals-coupon__form input {
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
padding: .65rem .85rem !important;
}
.wc-block-components-totals-coupon__button {
background: var(--bg-muted) !important;
color: var(--ink) !important;
border-radius: var(--r-md) !important;
padding: .65rem 1rem !important;
font-weight: 600 !important;
border: 0 !important;
}
/* ============================================
CHECKOUT — Modern Block-Checkout
============================================ */
.woocommerce-checkout .wp-block-woocommerce-checkout {
max-width: var(--container-w);
margin: 1.5rem auto 4rem !important;
padding: 0 clamp(1rem,4vw,2rem);
}
/* WC Checkout: erzwingen Flex-Layout mit klaren Spaltenbreiten
(WC selbst setzt nur order/align-self → braucht Flex-Container) */
.woocommerce-checkout .wp-block-woocommerce-checkout { display: block !important; }
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 2rem !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
}
.woocommerce-checkout .wc-block-checkout > .wc-block-checkout__main {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
order: 0 !important;
}
.woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar {
flex: 0 0 360px !important;
min-width: 0 !important;
max-width: 360px !important;
width: 360px !important;
order: 1 !important;
}
@media (max-width: 900px) {
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout {
flex-direction: column !important; gap: 1.5rem !important;
}
.woocommerce-checkout .wc-block-checkout > .wc-block-checkout__main,
.woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar {
flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important;
}
}
.wp-block-woocommerce-checkout > * { min-width: 0; }
/* Die alten Layout-Card-Regeln auf Step-Blocks dürfen Spalten nicht in Boxen verwandeln */
.wc-block-checkout__main > .wc-block-components-form,
.wc-block-checkout__form { width: 100% !important; max-width: none !important; }
/* WC-Loading-State opacity override — Block muss sichtbar sein */
.woocommerce-checkout .wp-block-woocommerce-checkout.is-loading,
.woocommerce-cart .wp-block-woocommerce-cart.is-loading { opacity: 1 !important; }
/* Inputs/Selects/Textareas konsistent */
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-textarea textarea,
.wc-block-components-form select,
.wc-block-components-checkout-step input[type=text],
.wc-block-components-checkout-step input[type=email],
.wc-block-components-checkout-step input[type=tel],
.wc-block-components-checkout-step textarea,
.wc-block-components-checkout-step select {
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
font: inherit !important; font-size: .95rem !important;
background: #fff !important;
color: var(--ink) !important;
width: 100% !important;
transition: all var(--t-f);
}
.wc-block-components-form input:focus,
.wc-block-components-form select:focus,
.wc-block-components-form textarea:focus,
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
border-color: var(--brand) !important;
box-shadow: 0 0 0 3px var(--brand-50) !important;
outline: 0 !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step label {
color: var(--ink-soft) !important;
font-weight: 500 !important;
font-size: .92rem !important;
}
/* Checkout-Step Cards */
.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-order-note-block,
.wp-block-woocommerce-checkout-fields-block > .wp-block-woocommerce-checkout-express-payment-block {
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
padding: 1.75rem !important;
margin: 0 0 1.25rem !important;
box-shadow: var(--sh-1);
}
/* Step headings */
.wc-block-components-checkout-step__heading,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout-fields-block h2,
.wc-block-components-title {
font-size: 1.2rem !important;
font-weight: 700 !important;
letter-spacing: -.015em !important;
margin: 0 0 1.25rem !important;
color: var(--ink) !important;
display: flex; align-items: center; gap: .65rem;
}
.wc-block-components-checkout-step__heading-content {
font-size: .88rem !important;
font-weight: 500 !important;
color: var(--ink-subtle) !important;
}
.wc-block-components-checkout-step-number {
background: var(--brand) !important;
color: #fff !important;
border-radius: var(--r-pill) !important;
width: 28px !important; height: 28px !important;
display: inline-flex !important; align-items: center; justify-content: center;
font-size: .9rem !important; font-weight: 800 !important;
}
/* Sidebar / Totals */
.wp-block-woocommerce-checkout-totals-block {
position: sticky; top: 140px;
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
padding: 1.5rem !important;
box-shadow: var(--sh-2);
}
@media (max-width: 900px) { .wp-block-woocommerce-checkout-totals-block { position: static; } }
.wc-block-components-order-summary {
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.wc-block-components-order-summary-item {
display: grid !important;
grid-template-columns: 60px 1fr auto;
gap: .85rem; align-items: center;
padding: .75rem 0 !important;
border-bottom: 1px solid var(--border);
}
.wc-block-components-order-summary-item:last-child { border-bottom: 0; }
.wc-block-components-order-summary-item__image img {
width: 60px; height: 60px; object-fit: contain;
background: var(--bg-muted); border-radius: var(--r-md); padding: 4px;
}
.wc-block-components-order-summary-item__quantity {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 800;
}
.wc-block-components-order-summary-item__title,
.wc-block-components-order-summary-item .wc-block-components-product-name {
font-weight: 600 !important;
font-size: .9rem !important;
color: var(--ink) !important;
}
.wc-block-components-order-summary-item__price { font-weight: 700 !important; color: var(--brand) !important; }
/* Payment methods */
.wc-block-components-payment-method-label {
font-weight: 600 !important;
color: var(--ink) !important;
}
.wc-block-components-radio-control__option,
.wc-block-components-payment-methods__title {
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
padding: .85rem 1rem !important;
margin-bottom: .5rem !important;
transition: all var(--t-f);
cursor: pointer;
}
.wc-block-components-radio-control__option:hover { border-color: var(--brand-soft) !important; }
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option.is-active {
border-color: var(--brand) !important;
background: var(--brand-50) !important;
}
/* Terms / Notice */
.wc-block-checkout__terms label,
.wc-block-checkout__terms,
.wc-block-components-checkout-step__description {
font-size: .88rem !important;
color: var(--ink-soft) !important;
line-height: 1.6;
}
.wc-block-components-checkbox__mark {
border: 1.5px solid var(--border) !important;
border-radius: 4px !important;
}
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
background: var(--brand) !important;
border-color: var(--brand) !important;
}
/* "Bestellung absenden" Button — riesig, brand */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
background: var(--brand) !important; color: #fff !important;
border-radius: var(--r-pill) !important;
padding: 1rem 2rem !important;
font-weight: 800 !important; font-size: 1.05rem !important;
width: 100% !important;
box-shadow: var(--sh-brand) !important;
border: 0 !important;
margin-top: 1rem !important;
}
.wc-block-components-checkout-place-order-button:hover {
background: var(--brand-700) !important;
transform: translateY(-1px);
}
/* Express Payment Block */
.wp-block-woocommerce-checkout-express-payment-block .wc-block-components-title,
.wc-block-components-express-payment .wc-block-components-title {
text-align: center;
position: relative;
margin: 1.5rem 0 1rem !important;
}
.wc-block-components-express-payment .wc-block-components-title::before,
.wc-block-components-express-payment .wc-block-components-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* Coupon Section */
.wc-block-components-totals-coupon {
margin: 1rem 0 !important;
background: var(--bg-soft);
border-radius: var(--r-md);
padding: 1rem !important;
}
.wc-block-components-totals-coupon__form {
display: flex; gap: .5rem;
}
.wc-block-components-totals-coupon__content { flex: 1; }
/* Final Totals (Sum) */
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-weight: 800 !important;
font-size: 1.25rem !important;
letter-spacing: -.015em;
color: var(--ink) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--brand) !important; }
.wc-block-components-totals-footer-item {
padding: 1rem 0 0 !important;
margin-top: .5rem !important;
border-top: 2px solid var(--border) !important;
}
/* Loading state — Cart/Checkout Block beim Initial-Render */
.wc-block-components-loading-mask,
.wp-block-woocommerce-cart.is-loading,
.wp-block-woocommerce-checkout.is-loading {
opacity: 1 !important;
}
/* ============================================
FORMS / CART / CHECKOUT
============================================ */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.25rem !important; }
.woocommerce table.shop_table {
border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
overflow: hidden; border-collapse: separate !important; border-spacing: 0 !important;
}
/* Responsive: hide mega-nav on mobile, show stacked toggle later */
@media (max-width: 900px) {
.nhc-meganav-wrap { position: static; }
.nhc-meganav-list { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.nhc-meganav-item > a { white-space: nowrap; }
.nhc-meganav-panel { display: none !important; }
}
@media (max-width: 700px) {
.nhc-mainheader-inner { grid-template-columns: auto auto; }
.nhc-search { grid-column: 1 / -1; order: 3; max-width: 100%; }
}
/* ===== News Single (Detail-Seite) ===== */
.nhc-news-single { padding: 0 0 5rem; }
.nhc-news-single .nhc-breadcrumb { /* nutzt globale Breadcrumb-Position */ }
.nhc-news-single-header { max-width: 820px; margin: 0 auto 2rem; text-align: center; }
.nhc-news-single-meta {
display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; justify-content: center;
align-items: center; margin-bottom: 1.5rem; font-size: .9rem; color: var(--text-muted);
}
.nhc-news-single-meta time, .nhc-news-single-author { display: inline-flex; align-items: center; gap: .35rem; }
.nhc-news-single-meta .nhc-pill { text-decoration: none; }
.nhc-news-single-header h1 {
font-size: clamp(1.85rem, 3.5vw, 2.85rem);
line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1.25rem;
color: var(--text);
}
.nhc-news-single-lead {
font-size: 1.18rem; line-height: 1.55; color: var(--text-muted);
max-width: 680px; margin: 0 auto; font-weight: 400;
}
.nhc-news-single-hero {
max-width: 1100px; margin: 0 auto 3rem; padding: 0 1.25rem;
}
.nhc-news-single-hero img {
width: 100%; height: auto; max-height: 520px; object-fit: cover;
border-radius: 18px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.25);
}
.nhc-news-single-content {
display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 3rem;
max-width: 1100px; margin: 0 auto; padding: 0 1.25rem;
}
.nhc-news-single-body {
font-size: 1.05rem; line-height: 1.75; color: var(--text);
}
.nhc-news-single-body h2 {
font-size: 1.65rem; margin: 2.5rem 0 1rem; letter-spacing: -.01em;
}
.nhc-news-single-body h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.nhc-news-single-body p { margin: 0 0 1.15rem; }
.nhc-news-single-body ul, .nhc-news-single-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.nhc-news-single-body li { margin-bottom: .5rem; }
.nhc-news-single-body img {
max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0;
}
.nhc-news-single-body blockquote {
border-left: 4px solid var(--brand);
background: var(--bg-soft);
padding: 1.25rem 1.5rem;
margin: 1.75rem 0;
font-style: italic; color: var(--text);
border-radius: 0 12px 12px 0;
}
.nhc-news-single-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.nhc-news-single-body a:hover { color: var(--brand-dark, #a00000); }
.nhc-news-single-share {
display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
margin: 3rem 0 0; padding: 1.25rem 0; border-top: 1px solid var(--border);
}
.nhc-news-single-share-label { font-weight: 600; margin-right: .5rem; }
.nhc-news-single-share a {
display: inline-flex; align-items: center; gap: .35rem;
padding: .45rem .9rem; border-radius: 99px; background: var(--bg-soft);
color: var(--text); font-size: .85rem; font-weight: 500;
text-decoration: none; transition: all .15s ease;
}
.nhc-news-single-share a:hover { background: var(--brand); color: #fff; }
.nhc-news-single-aside { display: flex; flex-direction: column; gap: 1rem; }
.nhc-news-aside-card {
background: var(--bg-soft); border-radius: 14px; padding: 1.5rem;
border: 1px solid var(--border);
}
.nhc-news-aside-card h4 {
margin: 0 0 .65rem; font-size: 1.05rem; letter-spacing: -.01em;
}
.nhc-news-aside-card p { font-size: .9rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 1rem; }
.nhc-news-aside-card--cta {
background: linear-gradient(135deg, var(--brand) 0%, #a00000 100%);
border-color: transparent; color: #fff;
}
.nhc-news-aside-card--cta h4, .nhc-news-aside-card--cta p { color: #fff; }
.nhc-news-aside-card--cta p { opacity: .9; }
.nhc-news-aside-card--cta .nhc-btn--primary { background: #fff; color: var(--brand); }
.nhc-news-aside-card--cta .nhc-btn--primary:hover { background: rgba(255,255,255,.9); }
.nhc-news-related {
margin: 5rem auto 3rem; max-width: 1280px; padding: 0 1.25rem;
}
.nhc-news-related-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.nhc-news-related-head h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
.nhc-news-related-all { color: var(--brand); font-weight: 600; text-decoration: none; }
.nhc-news-related-all:hover { text-decoration: underline; }
.nhc-news-back { margin: 3rem auto 0; max-width: 1100px; padding: 0 1.25rem; text-align: center; }
@media (max-width: 900px) {
.nhc-news-single-content { grid-template-columns: 1fr; gap: 2rem; }
.nhc-news-single-aside { order: 2; flex-direction: row; }
.nhc-news-aside-card { flex: 1; }
}
@media (max-width: 600px) {
.nhc-news-single-aside { flex-direction: column; }
.nhc-news-single-hero img { max-height: 320px; border-radius: 12px; }
.nhc-news-single-header h1 { font-size: 1.65rem; }
}
/* ===== News Empty-State ===== */
.nhc-news-empty {
text-align: center; padding: 4rem 1.5rem; max-width: 600px; margin: 0 auto;
background: var(--bg-soft); border-radius: 18px; border: 1px dashed var(--border);
}
.nhc-news-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: .6; }
.nhc-news-empty h3 { margin: 0 0 .75rem; font-size: 1.4rem; }
.nhc-news-empty p { color: var(--text-muted); margin: 0 auto 1.75rem; max-width: 480px; line-height: 1.6; }
.nhc-news-empty-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
/* ============================================
CHECKOUT — Layout-Hardening
============================================ */
/* WC Block-Checkout nutzt teils wc-block-checkout__main + __sidebar wrappers */
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__main { min-width: 0; }
.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout__sidebar { min-width: 0; }
/* Sicherheits-Reset: wenn der WC-Block wrapt, packen wir die direkten Kinder */
.woocommerce-checkout .wp-block-woocommerce-checkout > .wp-block-woocommerce-checkout-fields-block { min-width: 0; }
.woocommerce-checkout .wp-block-woocommerce-checkout > .wp-block-woocommerce-checkout-totals-block { min-width: 0; }
/* Falls WC ein wrapper-div um beide setzt: dann lösen wir das auf */
.woocommerce-checkout .wp-block-woocommerce-checkout > .wc-block-components-main { display: contents; }
/* Page-Title zentriert & nicht klebrig */
.woocommerce-checkout .wp-block-post-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-order-received .wp-block-post-title {
text-align: center;
max-width: var(--container-w, 1280px);
margin: 2rem auto 1.5rem !important;
padding: 0 1.25rem;
font-size: clamp(1.6rem, 3vw, 2.2rem);
letter-spacing: -.02em;
}
/* Form-Row Layout (klassisches WC) */
.woocommerce-checkout form .form-row,
.woocommerce-page form .form-row { margin-bottom: 1rem; }
.woocommerce-checkout form .form-row input,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md, 10px) !important;
padding: .85rem 1rem !important;
width: 100%;
font: inherit !important;
background: #fff !important;
}
/* ============================================
ORDER-RECEIVED (Success / Danke-Seite)
============================================ */
.woocommerce-order-received main { background: var(--bg-soft, #f7f7f8); }
.woocommerce-order-received .entry-content {
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 1.25rem 5rem !important;
}
/* Success-Banner */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: #fff !important;
padding: 2.5rem 2rem !important;
border-radius: 18px;
text-align: center;
font-size: 1.25rem !important;
font-weight: 600;
margin: 0 0 2rem !important;
box-shadow: 0 20px 40px -20px rgba(22, 163, 74, .4);
position: relative;
overflow: hidden;
}
.woocommerce-order-received .woocommerce-notice--success::before {
content: "✓";
display: block;
font-size: 3.5rem;
line-height: 1;
margin-bottom: 1rem;
width: 80px; height: 80px;
background: rgba(255,255,255,.2);
border-radius: 50%;
margin: 0 auto 1.25rem;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
font-size: 1.35rem !important;
letter-spacing: -.01em;
}
/* Verify-Email-Form */
.woocommerce-order-received .woocommerce-verify-email {
background: #fff;
padding: 2rem;
border-radius: 14px;
border: 1px solid var(--border);
max-width: 520px;
margin: 0 auto;
box-shadow: var(--sh-1, 0 2px 8px rgba(0,0,0,.04));
}
.woocommerce-order-received .woocommerce-verify-email p { margin: 0 0 1.25rem; color: var(--ink-soft, #555); }
.woocommerce-order-received .woocommerce-verify-email label {
display: block; margin-bottom: .5rem; font-weight: 600;
}
.woocommerce-order-received .woocommerce-verify-email .button {
background: var(--brand, #ca0000) !important;
color: #fff !important;
padding: .9rem 1.5rem !important;
border-radius: 10px !important;
font-weight: 700 !important;
border: 0 !important;
font-size: 1rem !important;
cursor: pointer;
transition: all .15s;
}
.woocommerce-order-received .woocommerce-verify-email .button:hover {
background: var(--brand-dark, #a00000) !important;
transform: translateY(-1px);
}
/* Order-Overview Liste */
.woocommerce-order-received .woocommerce-order-overview {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.5rem 2rem;
margin: 0 0 2rem;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
box-shadow: var(--sh-1, 0 2px 8px rgba(0,0,0,.04));
}
.woocommerce-order-received .woocommerce-order-overview li {
display: flex; flex-direction: column;
font-size: .85rem; color: var(--ink-subtle, #888);
text-transform: uppercase; letter-spacing: .03em;
border-bottom: none !important;
padding: 0 !important;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
display: block; margin-top: .35rem;
font-size: 1.05rem; color: var(--ink, #111);
text-transform: none; letter-spacing: 0;
font-weight: 700;
}
/* Order-Details Tabelle */
.woocommerce-order-received .woocommerce-order-details {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 2rem;
margin: 0 0 2rem;
box-shadow: var(--sh-1, 0 2px 8px rgba(0,0,0,.04));
}
.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
font-size: 1.2rem !important;
font-weight: 700;
margin: 0 0 1.25rem;
letter-spacing: -.01em;
padding-bottom: .75rem;
border-bottom: 1px solid var(--border);
}
.woocommerce-order-received .woocommerce-order-details table,
.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-order-received .shop_table {
width: 100%;
border-collapse: collapse;
}
.woocommerce-order-received .shop_table th,
.woocommerce-order-received .shop_table td {
padding: .9rem .5rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
font-size: .95rem;
}
.woocommerce-order-received .shop_table th {
text-align: left;
font-weight: 600;
color: var(--ink-soft, #555);
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .03em;
}
.woocommerce-order-received .shop_table .product-name a {
color: var(--ink, #111);
text-decoration: none;
font-weight: 600;
}
.woocommerce-order-received .shop_table .product-name a:hover { color: var(--brand, #ca0000); }
.woocommerce-order-received .shop_table tfoot td,
.woocommerce-order-received .shop_table tfoot th {
font-size: .95rem;
border-bottom: none;
padding: .5rem;
}
.woocommerce-order-received .shop_table tfoot tr:last-child td,
.woocommerce-order-received .shop_table tfoot tr:last-child th {
font-size: 1.15rem;
font-weight: 800;
color: var(--brand, #ca0000);
padding-top: 1rem;
border-top: 2px solid var(--ink, #111);
}
/* Customer-Details (Rechnungs- & Lieferadresse) */
/* Customer-Details: gleiche Karten-Formatierung wie Bestelldetails */
.woocommerce-order-received .woocommerce-customer-details {
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
padding: 2rem !important;
margin: 0 0 2rem !important;
display: block !important;
box-shadow: var(--sh-1, 0 2px 8px rgba(0,0,0,.04)) !important;
list-style: none;
}
.woocommerce-order-received .woocommerce-customer-details > h2,
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
font-size: 1.2rem !important;
font-weight: 700 !important;
margin: 0 0 1.25rem !important;
letter-spacing: -.01em !important;
padding-bottom: .75rem !important;
border-bottom: 1px solid var(--border) !important;
text-transform: none !important;
color: var(--ink, #111) !important;
}
/* Wenn beide Adressen (Rechnung+Lieferung) — 2-Spalten nebeneinander innerhalb der Karte */
.woocommerce-order-received .woocommerce-customer-details:has(.woocommerce-column):not(:has(> address)) {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem !important;
}
/* Titel "Rechnungsadresse" wie bei Bestelldetails — mit klarer Trennlinie
und großzügigem Abstand zum Adress-Text darunter */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title,
.woocommerce-order-received .woocommerce-customer-details > h2 {
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--ink, #111) !important;
text-transform: none !important;
letter-spacing: -.01em !important;
margin: 0 0 1.75rem !important;
padding: 0 0 .85rem !important;
border-bottom: 1px solid var(--border) !important;
grid-column: auto;
}
.woocommerce-order-received .woocommerce-customer-details > h2 + address,
.woocommerce-order-received .woocommerce-customer-details > .woocommerce-column__title + address {
margin-top: 0 !important;
padding-top: .25rem !important;
}
.woocommerce-order-received .woocommerce-customer-details address,
.woocommerce-order-received .woocommerce-column {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
font-style: normal !important;
line-height: 1.6 !important;
box-shadow: none !important;
color: var(--ink, #111);
font-size: .98rem;
}
/* "Zurück zum Shop" CTA */
.woocommerce-order-received .entry-content::after {
content: "";
display: block;
margin-top: 2rem;
text-align: center;
}
@media (max-width: 600px) {
.woocommerce-order-received .woocommerce-notice--success { padding: 2rem 1.25rem !important; font-size: 1.1rem !important; }
.woocommerce-order-received .woocommerce-order-details { padding: 1.25rem; }
.woocommerce-order-received .shop_table { font-size: .85rem; }
}
/* ============================================
CHECKOUT — Internals (Fields, Radios, Spacing)
============================================ */
/* Step-Block Innenabstand */
.woocommerce-checkout .wc-block-components-checkout-step,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-method-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-pickup-options-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block {
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
padding: 1.75rem !important;
margin: 0 0 1rem !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* Step-Heading */
.woocommerce-checkout .wc-block-components-checkout-step__heading {
margin: 0 0 1rem !important;
padding: 0 !important;
border: 0 !important;
}
.woocommerce-checkout .wc-block-components-checkout-step__title {
font-size: 1.15rem !important;
font-weight: 700 !important;
letter-spacing: -.01em;
margin: 0 !important;
color: var(--ink, #111) !important;
}
.woocommerce-checkout .wc-block-components-checkout-step__description {
margin: .25rem 0 0 !important;
font-size: .9rem !important;
color: var(--ink-soft, #555) !important;
}
/* Step-Content */
.woocommerce-checkout .wc-block-components-checkout-step__container,
.woocommerce-checkout .wc-block-components-checkout-step__content {
margin: 1rem 0 0 !important;
padding: 0 !important;
}
/* Input-Felder vereinheitlichen */
.woocommerce-checkout .wc-block-components-text-input,
.woocommerce-checkout .wc-block-components-textarea,
.woocommerce-checkout .wc-block-components-combobox {
margin: 0 0 .85rem !important;
}
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-textarea textarea,
.woocommerce-checkout .wc-block-components-combobox input,
.woocommerce-checkout select.wc-block-components-sort-select__select,
.woocommerce-checkout .wc-blocks-components-select__select {
border: 1.5px solid var(--border) !important;
border-radius: 10px !important;
font: inherit !important;
font-size: .95rem !important;
background: #fff !important;
width: 100% !important;
height: auto !important;
min-height: 52px !important;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s;
}
/* Floating-Label: KEIN eigenes Positionieren mehr.
Die frühere Lösung nutzte `input:not(:placeholder-shown) + label` — die
Block-Checkout-Felder von WooCommerce haben aber gar kein placeholder-
Attribut, wodurch die Bedingung dauerhaft zutraf und jedes Label über dem
Feldinhalt klebte. WooCommerce bringt eine funktionierende Umsetzung mit
(Klasse `is-active`); wir färben sie nur noch ein. */
.woocommerce-checkout .wc-block-components-text-input label {
color: var(--ink-soft) !important;
font-weight: 400 !important;
}
.woocommerce-checkout .wc-block-components-text-input.is-active label {
color: var(--brand) !important;
font-weight: 500 !important;
}
/* Focus-State */
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-textarea textarea:focus,
.woocommerce-checkout select:focus {
border-color: var(--brand, #ca0000) !important;
box-shadow: 0 0 0 3px rgba(202, 0, 0, .12) !important;
outline: 0 !important;
}
/* === Radio-Optionen (Versand + Zahlung) === */
.woocommerce-checkout .wc-block-components-radio-control {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: .5rem !important;
}
.woocommerce-checkout .wc-block-components-radio-control__option {
position: relative !important;
display: block !important;
padding: 1rem 1.25rem 1rem 3rem !important;
border: 1.5px solid var(--border) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: all .15s ease !important;
margin: 0 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__option:hover {
border-color: var(--brand, #ca0000) !important;
background: #fff8f8 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked) {
border-color: var(--brand, #ca0000) !important;
background: #fff5f5 !important;
box-shadow: 0 0 0 1px var(--brand, #ca0000) inset !important;
}
.woocommerce-checkout .wc-block-components-radio-control__input {
position: absolute !important;
left: 1rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
appearance: none !important;
border: 1.5px solid var(--border-strong, #bbb) !important;
border-radius: 50% !important;
background: #fff !important;
cursor: pointer !important;
}
.woocommerce-checkout .wc-block-components-radio-control__input:checked {
border-color: var(--brand, #ca0000) !important;
}
.woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
content: "" !important;
position: absolute !important;
top: 50% !important; left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 10px !important; height: 10px !important;
background: var(--brand, #ca0000) !important;
border-radius: 50% !important;
}
/* Radio-Label/Description Layout */
.woocommerce-checkout .wc-block-components-radio-control__option-layout {
width: 100% !important;
padding: 0 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__label-group {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 1rem !important;
}
.woocommerce-checkout .wc-block-components-radio-control__label {
font-weight: 600 !important;
color: var(--ink, #111) !important;
font-size: .95rem !important;
flex: 1 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
font-weight: 700 !important;
color: var(--brand, #ca0000) !important;
flex: 0 0 auto !important;
text-align: right !important;
}
.woocommerce-checkout .wc-block-components-radio-control__description-group {
margin-top: .25rem !important;
}
.woocommerce-checkout .wc-block-components-radio-control__description,
.woocommerce-checkout .wc-block-components-radio-control__secondary-description {
font-size: .85rem !important;
color: var(--ink-soft, #6b7280) !important;
line-height: 1.4 !important;
}
/* Checkbox-Labels */
.woocommerce-checkout .wc-block-components-checkbox {
display: flex !important;
align-items: flex-start !important;
gap: .65rem !important;
margin: .85rem 0 !important;
cursor: pointer !important;
}
.woocommerce-checkout .wc-block-components-checkbox__input {
appearance: none !important;
width: 20px !important;
height: 20px !important;
border: 1.5px solid var(--border-strong, #bbb) !important;
border-radius: 5px !important;
background: #fff !important;
position: relative !important;
flex-shrink: 0 !important;
margin: 0 !important;
cursor: pointer !important;
}
.woocommerce-checkout .wc-block-components-checkbox__input:checked {
background: var(--brand, #ca0000) !important;
border-color: var(--brand, #ca0000) !important;
}
.woocommerce-checkout .wc-block-components-checkbox__input:checked::after {
content: "\2713" !important;
position: absolute !important;
top: 50% !important; left: 50% !important;
transform: translate(-50%, -52%) !important;
color: #fff !important;
font-size: .85rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.woocommerce-checkout .wc-block-components-checkbox__label {
font-size: .95rem !important;
color: var(--ink, #111) !important;
line-height: 1.4 !important;
}
.woocommerce-checkout .wc-block-components-checkbox__mark { display: none !important; }
/* Address-Card */
.woocommerce-checkout .wc-block-components-address-card {
background: var(--bg-soft, #f7f7f8) !important;
border: 1px solid var(--border) !important;
border-radius: 10px !important;
padding: 1rem 1.25rem !important;
margin: 0 0 .85rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 1rem !important;
}
.woocommerce-checkout .wc-block-components-address-card__address {
font-size: .92rem !important;
line-height: 1.5 !important;
color: var(--ink, #111) !important;
}
.woocommerce-checkout .wc-block-components-address-card__edit {
background: transparent !important;
border: 0 !important;
color: var(--brand, #ca0000) !important;
font-weight: 600 !important;
font-size: .9rem !important;
cursor: pointer !important;
text-decoration: underline !important;
padding: 0 !important;
}
/* Sidebar Bestellübersicht Text-Wrap */
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-product-name,
.woocommerce-checkout .wc-block-checkout__sidebar h2,
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-title {
word-break: normal !important;
overflow-wrap: anywhere !important;
hyphens: auto !important;
}
.woocommerce-checkout .wc-block-checkout__sidebar { font-size: .9rem !important; }
/* Order-Summary-Item Layout */
.woocommerce-checkout .wc-block-components-order-summary-item {
display: grid !important;
grid-template-columns: 60px 1fr auto !important;
gap: .75rem !important;
padding: .85rem 0 !important;
border-bottom: 1px solid var(--border) !important;
align-items: start !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image {
width: 60px !important;
height: 60px !important;
position: relative !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
width: 100% !important; height: 100% !important;
object-fit: cover !important;
border-radius: 8px !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
position: absolute !important;
top: -6px !important; right: -6px !important;
background: var(--brand, #ca0000) !important;
color: #fff !important;
width: 22px !important; height: 22px !important;
border-radius: 50% !important;
display: flex !important; align-items: center; justify-content: center;
font-size: .75rem !important;
font-weight: 700 !important;
border: 2px solid #fff !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__description { min-width: 0 !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
font-size: .9rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
display: block !important;
max-width: 100% !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
font-size: .9rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
color: var(--ink, #111) !important;
}
/* Pickup-Options Description */
.woocommerce-checkout .wp-block-woocommerce-checkout-pickup-options-block .wc-block-components-radio-control__description {
text-align: left !important;
margin-top: .35rem !important;
}
/* ============================================
CHECKOUT SIDEBAR — Spacing
============================================ */
/* Sidebar Container als Karte mit Innenabstand */
.woocommerce-checkout .wc-block-checkout__sidebar {
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
padding: 1.75rem !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* Titel "Bestellübersicht" mit Preis */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 0 1rem !important;
margin: 0 0 1.25rem !important;
border-bottom: 1px solid var(--border) !important;
gap: .75rem !important;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
font-size: 1.15rem !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
margin: 0 !important;
color: var(--ink, #111) !important;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--brand, #ca0000) !important;
white-space: nowrap !important;
}
/* Block-Abstände zwischen den Sektionen */
.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block {
margin: 0 0 1.25rem !important;
padding: 0 !important;
border: 0 !important;
}
/* Order-Summary-Item: deutlich mehr Luft */
.woocommerce-checkout .wc-block-components-order-summary-item {
padding: 1.1rem 0 !important;
border-bottom: 1px solid var(--border) !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item:first-child {
padding-top: 0 !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
margin-top: .35rem !important;
font-size: .85rem !important;
color: var(--ink-soft, #6b7280) !important;
}
.woocommerce-checkout .wc-block-components-product-metadata {
margin-top: .5rem !important;
}
.woocommerce-checkout .wc-block-components-product-metadata__description p {
font-size: .82rem !important;
line-height: 1.5 !important;
color: var(--ink-soft, #6b7280) !important;
margin: 0 !important;
}
/* Gutschein-Toggle "Gutscheine hinzufügen" */
.woocommerce-checkout .wc-block-components-totals-coupon {
margin: 1rem 0 !important;
padding: .85rem 0 !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
}
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
font-size: .9rem !important;
font-weight: 500 !important;
color: var(--ink-soft, #555) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: .35rem !important;
}
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
color: var(--brand, #ca0000) !important;
}
/* Totals-Items (Zwischensumme, Versand, etc.) — viel Luft pro Zeile */
.woocommerce-checkout .wc-block-components-totals-wrapper {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.woocommerce-checkout .wc-block-components-totals-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: .75rem 0 !important;
margin: 0 !important;
font-size: .95rem !important;
gap: 1rem !important;
}
.woocommerce-checkout .wc-block-components-totals-item__label {
color: var(--ink-soft, #555) !important;
font-weight: 500 !important;
}
.woocommerce-checkout .wc-block-components-totals-item__value {
color: var(--ink, #111) !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.woocommerce-checkout .wc-block-components-totals-item__description {
flex: 1 1 100% !important;
font-size: .8rem !important;
color: var(--ink-subtle, #888) !important;
margin-top: .25rem !important;
}
.woocommerce-checkout .wc-block-components-totals-item__description:empty {
display: none !important;
}
/* Gesamtsumme (Footer-Item) deutlich hervorheben */
.woocommerce-checkout .wc-block-components-totals-footer-item {
flex-wrap: wrap !important;
padding: 1.25rem 0 .25rem !important;
margin-top: .5rem !important;
border-top: 2px solid var(--ink, #111) !important;
font-size: 1.1rem !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--ink, #111) !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: var(--brand, #ca0000) !important;
letter-spacing: -.02em !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item-tax {
font-size: .78rem !important;
color: var(--ink-subtle, #888) !important;
font-weight: 400 !important;
margin: .4rem 0 0 !important;
flex: 1 1 100% !important;
}
/* Action-Buttons (Zurück zum Warenkorb / Zahlungspflichtig bestellen) */
.woocommerce-checkout .wc-block-checkout__actions {
margin-top: 1.5rem !important;
padding: 0 !important;
}
.woocommerce-checkout .wc-block-checkout__actions_row {
display: flex !important;
flex-direction: column !important;
gap: .85rem !important;
align-items: stretch !important;
justify-content: flex-end !important;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
background: var(--brand, #ca0000) !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
padding: 1.1rem 1.5rem !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
cursor: pointer !important;
width: 100% !important;
transition: all .15s ease !important;
box-shadow: 0 4px 12px -2px rgba(202, 0, 0, .35) !important;
order: 1 !important;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
background: #a00000 !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px -2px rgba(202, 0, 0, .5) !important;
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .35rem !important;
background: transparent !important;
color: var(--ink-soft, #555) !important;
text-decoration: none !important;
font-size: .9rem !important;
font-weight: 500 !important;
padding: .5rem !important;
order: 2 !important;
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
color: var(--brand, #ca0000) !important;
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button svg {
width: 18px !important;
height: 18px !important;
}
/* ============================================
ORDER-SUMMARY-ITEM — Polish
============================================ */
/* Item-Layout: Bild | Titel (Zeile 1)
Preis (Zeile 2, unter Titel) */
.woocommerce-checkout .wc-block-components-order-summary-item {
display: grid !important;
grid-template-columns: 72px 1fr !important;
grid-template-areas:
"image desc"
"image price" !important;
column-gap: 1rem !important;
row-gap: .35rem !important;
padding: 1.1rem 0 !important;
border-bottom: 1px solid var(--border) !important;
align-items: start !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image { grid-area: image !important; align-self: start !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__description { grid-area: desc !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__total-price { grid-area: price !important; text-align: left !important; }
/* Bild-Spalte */
.woocommerce-checkout .wc-block-components-order-summary-item__image {
position: relative !important;
width: 72px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 !important;
background: var(--bg-soft, #f7f7f8) !important;
border-radius: 10px !important;
overflow: visible !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
border-radius: 10px !important;
padding: 4px !important;
box-sizing: border-box !important;
}
/* Menge-Badge */
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
position: absolute !important;
top: -8px !important;
right: -8px !important;
min-width: 24px !important;
height: 24px !important;
padding: 0 6px !important;
background: var(--brand, #ca0000) !important;
color: #fff !important;
border: 2px solid #fff !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: .75rem !important;
font-weight: 700 !important;
line-height: 1 !important;
z-index: 1 !important;
box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}
/* Beschreibungs-Spalte */
.woocommerce-checkout .wc-block-components-order-summary-item__description {
min-width: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: .25rem !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
font-size: .92rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: var(--ink, #111) !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
max-width: 100% !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
hyphens: auto !important;
white-space: normal !important;
overflow: visible !important;
}
/* Doppelten Preis bei Menge 1 unterdrücken — Einzelpreis links ausblenden,
rechts bleibt der Total-Preis stehen */
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices {
display: none !important;
}
/* Leere Step-Blocks (kein Versand/Pickup verfügbar) komplett ausblenden */
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-method-block:empty,
.woocommerce-checkout .wp-block-woocommerce-checkout-pickup-options-block:empty,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-methods-block:empty,
.woocommerce-checkout .wc-block-components-checkout-step:empty,
.woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block:empty {
display: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-method-block:not(:has(*:not(:empty))),
.woocommerce-checkout .wp-block-woocommerce-checkout-pickup-options-block:not(:has(*:not(:empty))) {
display: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* Stückpreis (nur sichtbar wenn Menge > 1) — bei Menge 1 ausblenden, da Total schon rechts steht */
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
font-size: .8rem !important;
color: var(--ink-subtle, #888) !important;
margin: 0 !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices::before {
content: "Einzelpreis: " !important;
color: var(--ink-subtle, #888) !important;
font-weight: 400 !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices .wc-block-formatted-money-amount {
font-weight: 600 !important;
color: var(--ink-soft, #555) !important;
}
/* Produkt-Metadata/Description — komplett ausblenden (zu lang in Sidebar) */
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata {
display: none !important;
}
/* Total-Preis rechte Spalte */
.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--ink, #111) !important;
white-space: nowrap !important;
text-align: right !important;
align-self: center !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--ink, #111) !important;
}
/* Wenn Stückpreis = Gesamtpreis (Menge 1), den individuellen Preis verstecken
damit wir keine doppelte Preisanzeige haben */
.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-order-summary-item__quantity span[aria-hidden="true"]:not(:empty)) .wc-block-cart-item__prices:has(.wc-block-components-order-summary-item__individual-price:only-child) {
/* Default zeigen — Stückpreis erscheint nur visuell sinnvoll wenn Menge > 1.
Wir lassen es als kleinen Hint stehen, aber sehr dezent. */
}
/* ============================================
NEWS SINGLE — Full-Width Override
============================================ */
.nhc-news-single { padding: 0 0 5rem; max-width: 100%; }
.nhc-news-single .nhc-breadcrumb {
max-width: 1280px; margin: 1.5rem auto 1.5rem; padding: 0 1.25rem;
}
/* Header & Hero spannen volle Breite */
.nhc-news-single-header {
max-width: 1280px !important;
margin: 0 auto 2rem !important;
padding: 0 1.25rem !important;
text-align: center;
}
.nhc-news-single-hero {
max-width: 1280px !important;
margin: 0 auto 3rem !important;
padding: 0 1.25rem;
}
.nhc-news-single-hero img {
width: 100%; height: auto; max-height: 540px;
object-fit: cover; border-radius: 18px;
box-shadow: 0 20px 50px -20px rgba(0,0,0,.25);
}
/* Content nutzt volle Breite mit Sidebar */
.nhc-news-single-content {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 1.25rem !important;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 3rem;
}
.nhc-news-single-body { font-size: 1.05rem; line-height: 1.75; min-width: 0; }
.nhc-news-single-body img,
.nhc-news-single-body iframe,
.nhc-news-single-body video {
max-width: 100% !important;
height: auto !important;
border-radius: 12px;
margin: 1.5rem 0;
display: block;
}
.nhc-news-single-body a img { display: inline-block; margin: 0; }
.nhc-news-single-body figure { margin: 1.5rem 0; max-width: 100%; }
.nhc-news-single-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.nhc-news-single-body td, .nhc-news-single-body th { padding: .65rem .85rem; border-bottom: 1px solid var(--border); }
/* Related-Section: 3-Spalten-Grid full width */
.nhc-news-related { max-width: 1280px !important; padding: 0 1.25rem !important; }
.nhc-news-related .nhc-news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.75rem;
}
.nhc-news-back { max-width: 1280px !important; padding: 0 1.25rem !important; }
@media (max-width: 1000px) {
.nhc-news-single-content { grid-template-columns: 1fr; gap: 2rem; }
.nhc-news-related .nhc-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.nhc-news-related .nhc-news-grid { grid-template-columns: 1fr; }
.nhc-news-single-hero img { max-height: 320px; border-radius: 12px; }
}
/* Card-Bilder in Übersicht/Related: width fix */
.nhc-news-card .nhc-news-image {
width: 100%; aspect-ratio: 16/10;
background-size: cover; background-position: center;
border-radius: 12px 12px 0 0;
}
.nhc-news-card .nhc-news-image--placeholder {
display: flex; align-items: center; justify-content: center;
font-size: 3rem; background: var(--bg-soft); color: var(--ink-subtle);
}
/* ============================================
BEWERTUNGEN PAGE
============================================ */
.nhc-reviews-page { margin-bottom: 4rem; }
.nhc-reviews-hero {
background: linear-gradient(135deg, #fff8e6 0%, #fff 100%);
padding: 4rem clamp(1rem,4vw,2rem) 3rem;
text-align: center;
margin-bottom: 3rem;
border-bottom: 1px solid var(--border);
}
.nhc-reviews-hero-inner { max-width: 820px; margin: 0 auto; }
.nhc-reviews-stars {
font-size: 2.5rem;
color: #f5a623;
letter-spacing: .15em;
margin-bottom: 1rem;
filter: drop-shadow(0 2px 6px rgba(245, 166, 35, .3));
}
.nhc-reviews-hero h1 {
font-size: clamp(2rem, 4vw, 3rem) !important;
margin: .5rem 0 1rem !important;
letter-spacing: -.03em;
font-weight: 800;
color: var(--ink);
}
.nhc-reviews-hero-lead {
font-size: 1.15rem;
color: var(--ink-soft);
line-height: 1.6;
margin: 0 auto 2rem;
max-width: 640px;
}
.nhc-reviews-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
max-width: 540px;
margin: 2.5rem auto 0;
}
@media (max-width: 540px) { .nhc-reviews-hero-stats { grid-template-columns: 1fr; } }
.nhc-reviews-hero-stats > div {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 1rem .75rem;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.nhc-reviews-hero-stats strong {
display: block;
font-size: 1.75rem;
color: var(--brand);
font-weight: 800;
letter-spacing: -.02em;
}
.nhc-reviews-hero-stats span {
font-size: .78rem;
color: var(--ink-soft);
text-transform: uppercase;
letter-spacing: .06em;
}
.nhc-reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
margin: 0 auto 4rem;
max-width: 1280px;
padding: 0 1.25rem;
}
.nhc-review-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
transition: all .15s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.nhc-review-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(0,0,0,.12);
border-color: var(--brand-100, #ffd6d6);
}
.nhc-review-card::before {
content: "\201C";
position: absolute;
top: -.5rem; right: 1.25rem;
font-size: 4rem;
color: var(--brand, #ca0000);
opacity: .15;
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.nhc-review-stars {
color: #f5a623;
font-size: 1.1rem;
letter-spacing: .1em;
}
.nhc-review-text {
margin: 0;
font-size: .95rem;
line-height: 1.65;
color: var(--ink);
flex: 1;
}
.nhc-review-footer {
display: flex;
align-items: center;
gap: .75rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.nhc-review-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand, #ca0000) 0%, #8a0000 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.05rem;
flex-shrink: 0;
}
.nhc-review-name {
font-weight: 600;
color: var(--ink);
font-size: .95rem;
}
/* ============================================
CART — Duplikat-Preis + Description ausblenden
============================================ */
.woocommerce-cart .wc-block-cart-item__wrap .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-cart-item__prices {
display: none !important;
}
.woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata {
display: none !important;
}
/* ============================================
ORDER-RECEIVED — Overview-Card matcht Success-Card oben
============================================ */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order-received .woocommerce-order-overview {
display: block;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 1.5rem !important;
border-radius: 18px !important;
padding: 1.75rem 2rem !important;
}
.woocommerce-order-received .woocommerce-order-overview {
background: #fff !important;
border: 1px solid var(--border) !important;
box-shadow: 0 4px 16px -8px rgba(0,0,0,.08) !important;
list-style: none !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 1.5rem !important;
align-items: stretch !important;
}
.woocommerce-order-received .woocommerce-order-overview > li {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0 !important;
min-width: 0 !important;
gap: .35rem !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
font-size: .78rem !important;
font-weight: 600 !important;
color: var(--ink-subtle, #888) !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
display: block !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
color: var(--ink, #111) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-top: .15rem !important;
}
.woocommerce-order-received .woocommerce-order-overview__total strong,
.woocommerce-order-received .woocommerce-order-overview__total .woocommerce-Price-amount {
color: var(--brand, #ca0000) !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
letter-spacing: -.01em !important;
white-space: nowrap !important;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
@media (max-width: 600px) {
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-order-overview {
padding: 1.5rem 1.25rem !important;
border-radius: 14px !important;
}
.woocommerce-order-received .woocommerce-order-overview { flex-wrap: wrap !important; }
.woocommerce-order-received .woocommerce-order-overview > li { flex: 1 1 calc(50% - .75rem) !important; }
}
/* Cart-Row: alle Zellen gleich hoch, Total vertikal mittig */
.wp-block-woocommerce-cart .wc-block-cart-items__row,
.woocommerce-cart .wc-block-cart-items__row {
vertical-align: middle !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items__row > td,
.woocommerce-cart .wc-block-cart-items__row > td {
vertical-align: middle !important;
padding: 1.25rem 1rem !important;
border-bottom: 1px solid var(--border) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-item__image {
width: 100px !important;
vertical-align: middle !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img,
.woocommerce-cart .wc-block-cart-item__image img {
width: 80px !important; height: 80px !important;
object-fit: contain !important;
border-radius: 10px !important;
background: var(--bg-soft, #f7f7f8) !important;
padding: 4px !important;
box-sizing: border-box !important;
display: block !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__product,
.woocommerce-cart .wc-block-cart-item__product {
vertical-align: middle !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total,
.woocommerce-cart .wc-block-cart-item__total {
vertical-align: middle !important;
text-align: right !important;
white-space: nowrap !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
color: var(--brand, #ca0000) !important;
min-width: 160px !important;
width: auto !important;
padding: 1.25rem 1.5rem 1.25rem 1rem !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items th:last-child,
.woocommerce-cart .wc-block-cart-items th:last-child {
min-width: 160px !important;
text-align: right !important;
padding-right: 1.5rem !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
font-size: 1.1rem !important;
font-weight: 800 !important;
color: var(--brand, #ca0000) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
min-height: 110px !important;
height: 100% !important;
}
/* Wrap-Container links: zentriert vertikal */
.wp-block-woocommerce-cart .wc-block-cart-item__wrap,
.woocommerce-cart .wc-block-cart-item__wrap {
display: flex !important;
flex-direction: column !important;
gap: .75rem !important;
justify-content: center !important;
}
/* News-Single: f�hrender
aus dem Shortcode-Wrapping unsichtbar */
main > br:first-child,
main > br:first-child + br { display: none !important; }
.single-nhc_news main br:first-of-type { display: none !important; }
/* ============================================
MEGA-MENÜ — Modernisierung
============================================ */
.nhc-meganav-item > a {
position: relative;
font-weight: 600 !important;
letter-spacing: -.005em;
transition: color .15s ease;
}
.nhc-meganav-item > a::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
width: 0;
height: 2px;
background: var(--brand, #ca0000);
border-radius: 2px;
transition: width .2s ease, left .2s ease;
}
.nhc-meganav-item:hover > a::after,
.nhc-meganav-item.is-open > a::after {
width: calc(100% - 2rem);
left: 1rem;
}
.nhc-meganav-item:hover > a,
.nhc-meganav-item.is-open > a {
color: var(--brand, #ca0000) !important;
}
/* Panel: breiter, weichere Schatten, sanftere Animation */
.nhc-meganav-panel {
width: min(1080px, 92vw) !important;
border: 1px solid rgba(0,0,0,.06) !important;
border-radius: 16px !important;
padding: 2rem !important;
box-shadow:
0 24px 48px -16px rgba(0,0,0,.18),
0 4px 12px -4px rgba(0,0,0,.08) !important;
background: #fff !important;
margin-top: 8px;
transform: translateY(12px) !important;
transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility .22s !important;
}
.nhc-meganav-item.is-open .nhc-meganav-panel,
.nhc-meganav-item:hover .nhc-meganav-panel {
transform: translateY(0) !important;
}
/* Pfeil-Connector zum Menü-Item */
.nhc-meganav-panel::before {
content: "";
position: absolute;
top: -6px;
left: 2rem;
width: 12px; height: 12px;
background: #fff;
border-left: 1px solid rgba(0,0,0,.06);
border-top: 1px solid rgba(0,0,0,.06);
transform: rotate(45deg);
}
/* Panel-Inner Grid: 3 Spalten, modernere Proportionen */
.nhc-meganav-panel-inner {
grid-template-columns: 1fr 1fr 1.3fr !important;
gap: 2.5rem !important;
}
/* Heading-Eyebrow je Spalte */
.nhc-mp-h {
font-size: .7rem !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
color: var(--brand, #ca0000) !important;
margin: 0 0 1rem !important;
font-weight: 700 !important;
padding-bottom: .65rem;
border-bottom: 1px solid var(--border);
}
/* Link-Liste: modernerer Hover */
.nhc-mp-col li { margin-bottom: 0 !important; }
.nhc-mp-col a {
display: block !important;
font-size: .92rem !important;
font-weight: 500 !important;
color: var(--ink, #111) !important;
padding: .5rem .65rem !important;
margin: 0 -.65rem !important;
border-radius: 8px;
transition: all .12s ease;
position: relative;
}
.nhc-mp-col a:hover {
background: var(--bg-soft, #f7f7f8) !important;
color: var(--brand, #ca0000) !important;
text-decoration: none !important;
transform: translateX(2px);
}
.nhc-mp-col a:hover::before {
content: "→";
position: absolute;
right: .65rem;
top: 50%;
transform: translateY(-50%);
color: var(--brand);
font-size: .85rem;
opacity: .7;
}
/* Feature-Karte rechts: größer, mit Image-Zoom */
.nhc-mp-feature {
border-radius: 14px !important;
overflow: hidden !important;
transition: all .2s cubic-bezier(.4,0,.2,1) !important;
background: linear-gradient(180deg, #fff 0%, var(--bg-soft, #f7f7f8) 100%) !important;
border: 1px solid var(--border) !important;
}
.nhc-mp-feature:hover {
border-color: var(--brand, #ca0000) !important;
transform: translateY(-4px) !important;
box-shadow: 0 18px 36px -12px rgba(202,0,0,.2) !important;
}
.nhc-mp-feature-img {
background: #fff !important;
padding: 1.5rem !important;
border-bottom: 1px solid var(--border) !important;
overflow: hidden;
position: relative;
}
.nhc-mp-feature-img img {
max-height: 160px !important;
transition: transform .35s ease;
}
.nhc-mp-feature:hover .nhc-mp-feature-img img { transform: scale(1.06); }
.nhc-mp-feature-meta { padding: 1.15rem 1.35rem !important; }
.nhc-mp-feature-eyebrow {
font-size: .68rem !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
color: var(--brand, #ca0000) !important;
font-weight: 700 !important;
margin-bottom: .4rem !important;
display: inline-block;
padding: .25rem .55rem;
background: rgba(202,0,0,.08);
border-radius: 99px;
}
.nhc-mp-feature-title { font-size: 1.05rem !important; line-height: 1.3 !important; margin-top: .35rem; }
.nhc-mp-feature-price { font-size: 1.15rem !important; letter-spacing: -.01em; }
.nhc-mp-feature-cta {
display: inline-flex; align-items: center; gap: .35rem;
font-weight: 700 !important;
}
.nhc-mp-feature:hover .nhc-mp-feature-cta { gap: .65rem; }
@media (max-width: 1100px) {
.nhc-meganav-panel-inner { grid-template-columns: 1fr 1fr !important; }
.nhc-mp-col--feature { grid-column: 1 / -1; }
}
/* === KONTAKT-Card: Fax als Card-Style === */
.nhc-kontakt-card--info {
cursor: default;
background: var(--bg-soft, #f7f7f8) !important;
}
.nhc-kontakt-card--info:hover {
transform: none !important;
border-color: var(--border) !important;
box-shadow: none !important;
}
/* === Mega-Panel: IMMER ZENTRAL zur Nav-Leiste === */
.nhc-meganav,
.nhc-meganav-list { position: relative !important; }
.nhc-meganav-item { position: static !important; }
.nhc-meganav-panel {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) translateY(12px) !important;
}
.nhc-meganav-item.is-open .nhc-meganav-panel,
.nhc-meganav-item:hover .nhc-meganav-panel,
.nhc-meganav-item:has(.nhc-meganav-panel:hover) .nhc-meganav-panel {
transform: translateX(-50%) translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Pfeil-Connector entfernen (Panel ist nicht mehr unter dem Item) */
.nhc-meganav-panel::before { display: none !important; }
/* Hover-Bridge: unsichtbare Brücke schließt die Lücke
zwischen Nav-Item und Panel — Maus verliert Hover nicht */
.nhc-meganav-panel::after {
content: "";
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 20px;
background: transparent;
pointer-events: auto;
}
/* Sicherstellen, dass das Panel nie aus dem Viewport ragt */
.nhc-meganav-panel {
max-width: calc(100vw - 2rem) !important;
}
/* ============================================
MOBILE HEADER + DRAWER (Modernisierung)
============================================ */
@media (max-width: 900px) {
/* Promo-Bar ausblenden */
.nhc-promo { display: none !important; }
/* Mega-Nav unter dem Header ausblenden */
.nhc-meganav-wrap { display: none !important; }
/* Header-Layout: Burger | Logo | Suche | Konto rechts außen */
.nhc-mainheader-inner {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
grid-template-areas:
"burger logo actions"
"search search search" !important;
align-items: center !important;
gap: .65rem !important;
padding: .65rem .85rem !important;
}
.nhc-burger { grid-area: burger !important; }
.nhc-logo { grid-area: logo !important; justify-self: start !important; }
.nhc-actions { grid-area: actions !important; justify-self: end !important; }
.nhc-search-wrap { grid-area: search !important; }
/* Konto-Link bleibt sichtbar — andere Aktionen sind via nhc-hide-mobile schon weg */
.nhc-actions { gap: .25rem !important; }
.nhc-actions .nhc-action-link { padding: .5rem !important; min-width: 44px; justify-content: center; }
.nhc-actions .nhc-action-link span { display: none !important; }
.nhc-actions .nhc-action-link svg { width: 26px !important; height: 26px !important; }
/* Suchleiste kompakt */
.nhc-search input { font-size: .9rem !important; padding: .65rem 2.5rem !important; }
.nhc-search button { font-size: .85rem !important; padding: 0 .85rem !important; }
/* ===== FULLSCREEN DRAWER ===== */
.nhc-drawer-panel {
width: 100vw !important;
max-width: 100vw !important;
background: #fff !important;
box-shadow: none !important;
}
.nhc-drawer-backdrop { display: none !important; }
/* Header im Drawer: Brand-roter Hintergrund, modernes Logo */
.nhc-drawer-head {
background: linear-gradient(135deg, var(--brand, #ca0000) 0%, #8a0000 100%) !important;
color: #fff !important;
padding: 1.5rem 1.25rem !important;
border-bottom: 0 !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
letter-spacing: -.01em;
position: relative;
}
.nhc-drawer-close {
color: #fff !important;
background: rgba(255,255,255,.15) !important;
width: 40px !important; height: 40px !important;
border-radius: 50% !important;
font-size: 1.5rem !important;
transition: all .15s ease !important;
}
.nhc-drawer-close:hover { background: rgba(255,255,255,.25) !important; }
/* Nav-Liste: großzügige Tap-Targets */
.nhc-drawer-nav { padding: 1rem 0 !important; gap: 0; background: #fff; }
.nhc-drawer-nav a {
padding: 1.1rem 1.5rem !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
border-left: 0 !important;
border-bottom: 1px solid var(--border, #ececec) !important;
color: var(--ink, #111) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
transition: all .12s ease !important;
}
.nhc-drawer-nav a::after {
content: "›";
color: var(--ink-subtle, #aaa);
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
transition: transform .15s ease, color .15s ease;
}
.nhc-drawer-nav a:hover,
.nhc-drawer-nav a:active {
background: var(--bg-soft, #f7f7f8) !important;
color: var(--brand, #ca0000) !important;
padding-left: 1.85rem !important;
}
.nhc-drawer-nav a:hover::after,
.nhc-drawer-nav a:active::after {
color: var(--brand, #ca0000);
transform: translateX(4px);
}
.nhc-drawer-divider {
height: 8px !important;
background: var(--bg-soft, #f7f7f8) !important;
margin: 0 !important;
border: 0;
}
.nhc-drawer-phone {
background: linear-gradient(135deg, var(--brand, #ca0000) 0%, #8a0000 100%) !important;
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 1.35rem 1.5rem !important;
border-bottom: 0 !important;
}
.nhc-drawer-phone::after { color: #fff !important; }
.nhc-drawer-phone:hover {
background: #8a0000 !important;
color: #fff !important;
}
/* Drawer-Slide-Animation weicher */
.nhc-drawer-panel {
transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}
}
/* Sehr kleine Phones: Header-Padding noch enger */
@media (max-width: 480px) {
.nhc-mainheader-inner { padding: .5rem .65rem !important; gap: .5rem !important; }
.nhc-logo img, .nhc-logo svg { height: 44px !important; max-width: 160px !important; }
}
@media (max-width: 900px) {
/* Mobile: keine Live-Suchvorschau � nur direkte Suche nach Klick auf Suchen-Button */
.nhc-search-results { display: none !important; visibility: hidden !important; }
}
/* ============================================
MOBILE FIXES 2 (Logo zentriert, USP, Footer, etc.)
============================================ */
@media (max-width: 900px) {
/* Logo MITTIG im Header */
.nhc-mainheader-inner {
grid-template-columns: 1fr auto 1fr !important;
grid-template-areas:
"burger logo actions"
"search search search" !important;
}
.nhc-logo { grid-area: logo !important; justify-self: center !important; }
.nhc-burger { grid-area: burger !important; justify-self: start !important; }
.nhc-actions { grid-area: actions !important; justify-self: end !important; }
/* Suchbutton: gleiche Höhe wie Input */
.nhc-search { position: relative; }
.nhc-search input {
height: 46px !important;
line-height: 46px !important;
box-sizing: border-box !important;
}
.nhc-search button {
height: 46px !important;
line-height: 46px !important;
padding: 0 1rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* USP-Grid: Items mittig zentriert */
.nhc-usp-grid {
grid-template-columns: 1fr 1fr !important;
gap: .75rem !important;
}
.nhc-usp-item {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: .5rem !important;
padding: 1rem .75rem !important;
}
.nhc-usp-item > div:last-child { text-align: center !important; }
.nhc-usp-item h3 { font-size: .85rem !important; line-height: 1.2 !important; }
.nhc-usp-item p { font-size: .75rem !important; }
/* Produkt-Slider: Buttons unter Produkt-Card mittig, einheitlich
(wie der erste Slider auf der Startseite) */
.nhc-product-card,
.nhc-bestseller-card,
.nhc-bestseller-item,
.swiper-slide .nhc-product-card,
.nhc-slider .nhc-product-card {
display: flex !important;
flex-direction: column !important;
}
.nhc-product-card-body,
.nhc-product-card .nhc-card-meta {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
.nhc-product-card .nhc-btn,
.nhc-product-card .nhc-card-cta,
.nhc-product-card button[type="submit"],
.nhc-product-card .add_to_cart_button,
.nhc-product-card .ajax_add_to_cart {
margin-top: auto !important;
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
/* Slider-Navigation: Pfeile sichtbar und groß genug */
.swiper-button-prev,
.swiper-button-next,
.nhc-slider-prev,
.nhc-slider-next {
width: 40px !important;
height: 40px !important;
}
/* === FOOTER: alle Elemente zentriert === */
.nhc-footer-grid {
grid-template-columns: 1fr !important;
text-align: center !important;
gap: 2rem !important;
}
.nhc-footer-grid > * {
text-align: center !important;
align-items: center !important;
display: flex !important;
flex-direction: column !important;
}
.nhc-footer-col h3,
.nhc-footer-col h4,
.nhc-footer-col strong { text-align: center !important; width: 100%; }
.nhc-footer-col ul,
.nhc-footer-col ol {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
width: 100%;
}
.nhc-footer-col li { text-align: center !important; }
.nhc-footer-col a { display: inline-block; }
.nhc-footer-phones,
.nhc-footer-hours,
.nhc-footer-map,
.nhc-footer-mapbtn,
.nhc-footer-tag,
.nhc-footer-vat {
text-align: center !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.nhc-footer-bottom {
flex-direction: column !important;
text-align: center !important;
gap: .75rem !important;
}
.nhc-footer-divider { margin: 1.5rem auto !important; }
}
/* === TOAST-Notices (Desktop + Mobile) ====================== */
.woocommerce-notices-wrapper:has(.wc-block-components-notice-banner.is-success),
body > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-notices-wrapper {
position: fixed !important;
top: 1rem !important;
right: 1rem !important;
z-index: 9999 !important;
max-width: 420px !important;
width: calc(100% - 2rem) !important;
pointer-events: none;
background: transparent !important;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner {
background: #fff !important;
border: 1px solid var(--border, #ececec) !important;
border-left: 4px solid #16a34a !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px -8px rgba(0,0,0,.18) !important;
padding: 1rem 1.25rem !important;
margin: 0 0 .65rem !important;
pointer-events: auto;
animation: nhcToastIn .25s cubic-bezier(.4,0,.2,1), nhcToastOut .4s ease 4.5s forwards;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success {
border-left-color: #16a34a !important;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error {
border-left-color: var(--brand, #ca0000) !important;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner svg {
fill: #16a34a !important;
width: 22px !important; height: 22px !important;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner__content {
font-size: .9rem !important;
line-height: 1.45 !important;
color: var(--ink, #111) !important;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner__content a.button {
display: inline-block !important;
background: var(--brand, #ca0000) !important;
color: #fff !important;
font-size: .8rem !important;
font-weight: 600 !important;
padding: .35rem .75rem !important;
border-radius: 8px !important;
margin-right: .5rem !important;
text-decoration: none !important;
}
@keyframes nhcToastIn {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes nhcToastOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(120%); opacity: 0; visibility: hidden; }
}
@media (max-width: 600px) {
.woocommerce-notices-wrapper:has(.wc-block-components-notice-banner.is-success),
body > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-notices-wrapper {
top: auto !important;
bottom: 1rem !important;
left: 1rem !important;
right: 1rem !important;
max-width: none !important;
width: auto !important;
}
@keyframes nhcToastIn {
from { transform: translateY(120%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes nhcToastOut {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(120%); opacity: 0; visibility: hidden; }
}
}
@media (max-width: 900px) {
/* Prefooter-Items zentriert */
.nhc-prefooter-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
.nhc-prefooter-item { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: .5rem !important; padding: 1rem .75rem !important; }
.nhc-prefooter-item > div:last-child { text-align: center !important; }
.nhc-prefooter-item h3 { font-size: .85rem !important; line-height: 1.2 !important; }
.nhc-prefooter-item p { font-size: .75rem !important; }
}
/* ============================================
MOBILE FILTER-FAB + DRAWER
============================================ */
.nhc-filter-fab { display: none; }
@media (max-width: 900px) {
.nhc-filter-fab {
position: fixed !important;
bottom: 18px !important;
left: 18px !important;
z-index: 1000;
display: inline-flex !important;
align-items: center;
gap: .5rem;
padding: .85rem 1.25rem;
background: var(--brand, #ca0000);
color: #fff;
border: 0;
border-radius: 999px;
font-weight: 700;
font-size: .95rem;
box-shadow: 0 12px 28px -6px rgba(202,0,0,.45), 0 4px 10px rgba(0,0,0,.12);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.nhc-filter-fab:hover,
.nhc-filter-fab:focus-visible {
transform: translateY(-2px);
box-shadow: 0 16px 36px -6px rgba(202,0,0,.55);
}
.nhc-filter-fab svg { width: 20px; height: 20px; }
/* Filter als Drawer von links */
.nhc-filter.nhc-filter--drawer {
position: fixed !important;
inset: 0;
z-index: 1100;
background: rgba(0,0,0,.45);
display: block !important;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
}
.nhc-filter.nhc-filter--drawer.is-open {
opacity: 1;
visibility: visible;
}
.nhc-filter.nhc-filter--drawer > form,
.nhc-filter.nhc-filter--drawer > .nhc-filter-form {
background: #fff;
position: absolute;
top: 0; bottom: 0; left: 0;
width: min(360px, 88vw);
overflow-y: auto;
padding: 4rem 1.25rem 5rem !important;
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
box-shadow: 0 10px 30px rgba(0,0,0,.2);
box-sizing: border-box;
}
.nhc-filter.nhc-filter--drawer.is-open > form,
.nhc-filter.nhc-filter--drawer.is-open > .nhc-filter-form { transform: translateX(0); }
.nhc-filter.nhc-filter--drawer .nhc-filter-form {
width: 100%;
max-width: 100%;
box-shadow: none !important;
border: 0 !important;
}
/* Schließen-Button im Filter-Drawer */
.nhc-filter-close {
position: absolute;
top: 12px; right: 12px;
width: 40px; height: 40px;
background: var(--bg-soft, #f7f7f8);
color: var(--ink, #111);
border: 0;
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
z-index: 2;
transition: background .15s;
}
.nhc-filter-close:hover { background: var(--brand, #ca0000); color: #fff; }
/* Body-Scroll sperren, wenn Drawer offen */
html.nhc-no-scroll, html.nhc-no-scroll body { overflow: hidden !important; }
}
@media (max-width: 900px) {
.nhc-drawer-socials {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 1.25rem !important;
padding: 1.5rem 1.5rem 2rem !important;
background: linear-gradient(135deg, var(--brand, #ca0000) 0%, #8a0000 100%) !important;
}
.nhc-drawer-socials a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important; height: 48px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.18) !important;
color: #fff !important;
transition: all .15s ease !important;
border: 0 !important;
padding: 0 !important;
}
.nhc-drawer-socials a::after { display: none !important; }
.nhc-drawer-socials a:hover {
background: #fff !important;
color: var(--brand, #ca0000) !important;
transform: translateY(-2px) !important;
}
}
/* Mobile: Filter/�bersicht-Sidebar nicht sticky (w�rde sich �ber Produkte schieben) */
@media (max-width: 900px) {
/* nur ohne Drawer (JS setzt .nhc-filter--drawer) — der Drawer braucht position: fixed + inset: 0 */
.nhc-shop-layout > .nhc-filter:not(.nhc-filter--drawer),
.nhc-wish-when-filled .nhc-filter:not(.nhc-filter--drawer),
aside.nhc-filter:not(.nhc-filter--drawer) { position: static !important; top: auto !important; }
.nhc-product-gallery { position: static !important; top: auto !important; }
.nhc-about-side { position: static !important; top: auto !important; }
}
/* ============================================
WARENKORB — Mobile Optimierung
============================================ */
@media (max-width: 760px) {
/* Page-Wrapper kompakter */
.woocommerce-cart .wp-block-post-title,
.wp-block-woocommerce-cart .wp-block-post-title { font-size: 1.5rem !important; margin: 1rem auto !important; }
/* Cart-Block Layout: aus 2-Spalten (Items + Totals) → gestapelt */
.wp-block-woocommerce-cart .wc-block-cart,
.woocommerce-cart .wc-block-cart {
display: block !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
padding: 0 .85rem !important;
}
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 0 1.25rem !important;
}
/* Cart-Items als Karten statt Tabelle */
.wp-block-woocommerce-cart .wc-block-cart-items {
display: block !important;
border: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items thead { display: none !important; }
.wp-block-woocommerce-cart .wc-block-cart-items tbody { display: block !important; }
.wp-block-woocommerce-cart .wc-block-cart-items__row {
display: grid !important;
grid-template-columns: 80px 1fr !important;
grid-template-areas:
"image product"
"total total" !important;
column-gap: .85rem !important;
row-gap: .65rem !important;
background: #fff !important;
border: 1px solid var(--border, #ececec) !important;
border-radius: 14px !important;
padding: 1rem !important;
margin: 0 0 .85rem !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.wp-block-woocommerce-cart .wc-block-cart-items__row > td {
padding: 0 !important;
border: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image {
grid-area: image !important;
width: 80px !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
width: 80px !important; height: 80px !important;
object-fit: contain !important;
border-radius: 10px !important;
background: var(--bg-soft, #f7f7f8) !important;
padding: 4px !important;
box-sizing: border-box !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__product { grid-area: product !important; }
.wp-block-woocommerce-cart .wc-block-cart-item__total {
grid-area: total !important;
text-align: right !important;
padding-top: .75rem !important;
border-top: 1px solid var(--border) !important;
min-width: 0 !important;
width: auto !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
min-height: 0 !important;
height: auto !important;
justify-content: space-between !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total::before {
content: "Zwischensumme";
float: left;
color: var(--ink-soft, #555);
font-size: .85rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
font-size: 1.05rem !important;
color: var(--brand, #ca0000) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__wrap {
flex-direction: column !important;
gap: .75rem !important;
}
.wp-block-woocommerce-cart .wc-block-components-product-name {
font-size: .92rem !important;
line-height: 1.3 !important;
font-weight: 600 !important;
color: var(--ink) !important;
text-decoration: none !important;
margin: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: .5rem !important;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
flex-shrink: 0 !important;
width: auto !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
width: 36px; height: 36px;
background: var(--bg-soft) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center; justify-content: center;
transition: all .15s ease;
}
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
background: var(--brand) !important;
border-color: var(--brand) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover svg { fill: #fff !important; }
/* Cart-Totals-Sidebar als sticky Bottom-Bar Style */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
padding: 1.5rem 1.25rem !important;
margin: 1rem 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 0 0 .75rem !important;
margin: 0 0 1rem !important;
border-bottom: 1px solid var(--border) !important;
}
.wp-block-woocommerce-cart .wc-block-components-totals-item {
padding: .65rem 0 !important;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 1.35rem !important;
}
/* Proceed-to-Checkout Button: groß und sticky-feel */
.wp-block-woocommerce-cart .wc-block-cart__submit-container,
.wp-block-woocommerce-cart .wc-block-cart__submit {
width: 100% !important;
margin: 1rem 0 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
width: 100% !important;
padding: 1.1rem 1.5rem !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
border-radius: 12px !important;
background: var(--brand, #ca0000) !important;
color: #fff !important;
box-shadow: 0 4px 12px -2px rgba(202,0,0,.35) !important;
}
/* Empty-Cart-Block kompakt */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block,
.wp-block-woocommerce-cart .wc-block-cart-empty {
padding: 2rem 1rem !important;
text-align: center !important;
}
}
/* ============================================
KASSE � Mobile inkl. Bestell�bersicht
============================================ */
@media (max-width: 760px) {
.woocommerce-checkout .wp-block-post-title { font-size: 1.5rem !important; margin: 1rem auto !important; }
.woocommerce-checkout .wp-block-woocommerce-checkout { padding: 0 .85rem !important; }
/* Step-Cards kompakter */
.woocommerce-checkout .wc-block-components-checkout-step,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-method-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
.woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block {
padding: 1.1rem !important;
border-radius: 12px !important;
margin: 0 0 .85rem !important;
}
.woocommerce-checkout .wc-block-components-checkout-step__title { font-size: 1rem !important; }
.woocommerce-checkout .wc-block-components-address-form { grid-template-columns: 1fr !important; }
.woocommerce-checkout .wc-block-components-address-form > #shipping-first_name,
.woocommerce-checkout .wc-block-components-address-form > #shipping-last_name,
.woocommerce-checkout .wc-block-components-address-form > #billing-first_name,
.woocommerce-checkout .wc-block-components-address-form > #billing-last_name,
.woocommerce-checkout .wc-block-components-address-form > #shipping-postcode,
.woocommerce-checkout .wc-block-components-address-form > #shipping-city,
.woocommerce-checkout .wc-block-components-address-form > #billing-postcode,
.woocommerce-checkout .wc-block-components-address-form > #billing-city { grid-column: 1 / -1 !important; }
/* Input-H�he etwas kompakter */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-textarea textarea,
.woocommerce-checkout select { min-height: 48px !important; font-size: 1rem !important; }
/* Bestell�bersicht (Sidebar) */
.woocommerce-checkout .wc-block-checkout__sidebar,
.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
padding: 1.25rem !important;
border-radius: 14px !important;
margin: 1.25rem 0 0 !important;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title { padding-bottom: .75rem !important; margin-bottom: 1rem !important; }
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text { font-size: 1.05rem !important; }
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price { font-size: 1rem !important; }
/* Order-Summary-Item kompakter � bleibt: Bild | Titel oben, Preis unten */
.woocommerce-checkout .wc-block-components-order-summary-item {
grid-template-columns: 56px 1fr !important;
column-gap: .75rem !important;
padding: .85rem 0 !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image { width: 56px !important; height: 56px !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__quantity { width: 20px !important; height: 20px !important; font-size: .7rem !important; top: -6px !important; right: -6px !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: .88rem !important; }
.woocommerce-checkout .wc-block-components-order-summary-item__total-price { font-size: .95rem !important; }
/* Totals: kompaktere Zeilen */
.woocommerce-checkout .wc-block-components-totals-item { padding: .6rem 0 !important; font-size: .92rem !important; }
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.25rem !important; }
/* Radio-Optionen Versand/Zahlung kompakter */
.woocommerce-checkout .wc-block-components-radio-control__option { padding: .85rem 1rem .85rem 2.75rem !important; }
.woocommerce-checkout .wc-block-components-radio-control__input { left: .85rem !important; width: 18px !important; height: 18px !important; }
.woocommerce-checkout .wc-block-components-radio-control__label { font-size: .9rem !important; }
.woocommerce-checkout .wc-block-components-radio-control__secondary-label { font-size: .9rem !important; }
/* Zahlungspflichtig bestellen Button volle Breite */
.woocommerce-checkout .wc-block-components-checkout-place-order-button { padding: 1.05rem 1rem !important; font-size: 1rem !important; }
}
/* ============================================
CHECKOUT-SIDEBAR � Mobile-Feinheiten
============================================ */
@media (max-width: 760px) {
/* Duplikat im Actions-Block ausblenden (WC rendert es 2x) */
.woocommerce-checkout .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
display: none !important;
}
/* Sticky-State entfernen � sidebar flie�t normal */
.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky,
.woocommerce-checkout .wc-block-checkout__sidebar {
position: static !important;
top: auto !important;
}
/* Sidebar-Karte als Block �ber dem Formular */
.woocommerce-checkout .wc-block-checkout__sidebar {
margin: 0 0 1rem !important;
padding: 1rem 1.15rem !important;
border-radius: 14px !important;
order: -1;
}
/* Bestell�bersicht-Titel: als Toggle erkennbar � Chevron deutlicher */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
cursor: pointer !important;
padding: .25rem 0 .9rem !important;
margin: 0 0 .85rem !important;
user-select: none;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
width: 28px !important; height: 28px !important;
background: var(--bg-soft, #f7f7f8);
border-radius: 50%;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: transform .2s ease, background .15s ease;
margin-left: .65rem;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] .wc-block-components-checkout-order-summary__title-icon {
transform: rotate(180deg);
background: var(--brand, #ca0000);
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] .wc-block-components-checkout-order-summary__title-icon svg path { fill: #fff; }
/* Eingeklappter Inhalt */
.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
max-height: 0 !important;
overflow: hidden !important;
transition: max-height .3s ease, padding .2s ease;
padding: 0 !important;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] + .wc-block-components-checkout-order-summary__content,
.woocommerce-checkout .wc-block-components-checkout-order-summary__content.is-open {
max-height: 2000px !important;
padding: .5rem 0 0 !important;
}
/* Gutschein-Bereich kompakter */
.woocommerce-checkout .wc-block-components-totals-coupon { padding: .65rem 0 !important; }
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button { font-size: .85rem !important; }
/* Totals-Tax-Hinweis (Einschlie�lich MwSt.) � flexbasiert auf neuer Zeile */
.woocommerce-checkout .wc-block-components-totals-footer-item { flex-wrap: wrap !important; }
.woocommerce-checkout .wc-block-components-totals-footer-item-tax { flex-basis: 100% !important; margin-top: .25rem !important; }
/* Actions-Row mobil: Bestellbutton gro�, "Zur�ck"-Link darunter */
.woocommerce-checkout .wc-block-checkout__actions_row {
flex-direction: column !important;
gap: .85rem !important;
align-items: stretch !important;
padding-top: 1.25rem !important;
margin-top: 1rem !important;
border-top: 1px solid var(--border) !important;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
order: 1 !important;
width: 100% !important;
padding: 1.05rem 1rem !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
border-radius: 12px !important;
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
order: 2 !important;
text-align: center;
justify-content: center !important;
font-size: .9rem !important;
color: var(--ink-soft) !important;
padding: .5rem !important;
}
}
/* ============================================
MERKZETTEL � Mobile Produkt-Padding
============================================ */
@media (max-width: 760px) {
/* WC products list-Wrapper darf nicht mehr eigene padding-left haben */
.nhc-wish-when-filled .nhc-shop-results,
.nhc-wish-when-filled ul.products,
.nhc-wish-when-filled .nhc-shop-results > * {
padding: 0 !important;
margin: 0 !important;
}
.nhc-wish-when-filled ul.products {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .65rem !important;
list-style: none !important;
}
.nhc-wish-when-filled ul.products > li {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
list-style: none !important;
}
/* Shop-Layout (Wishlist) container kein extra Padding */
.nhc-shop-layout.nhc-wish-when-filled {
grid-template-columns: 1fr !important;
padding: 0 .85rem !important;
gap: 1rem !important;
}
}
/* ============================================
COMPARE PICKER MODAL � Mobile
============================================ */
@media (max-width: 760px) {
.nhc-picker-modal-panel {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
transform: none !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
border-radius: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Header sticky oben */
.nhc-picker-modal-head {
position: sticky;
top: 0;
z-index: 5;
background: #fff;
padding: 1rem 1rem .65rem !important;
border-bottom: 1px solid var(--border) !important;
flex-shrink: 0;
}
.nhc-picker-modal-head h2 {
font-size: 1.1rem !important;
margin: 0 0 .65rem !important;
padding-right: 2.5rem !important;
}
.nhc-picker-modal-head p {
margin: 0 !important;
position: relative;
}
.nhc-picker-search {
flex: 1 !important;
min-width: 0 !important;
width: auto !important;
padding: .75rem .9rem !important;
border: 1.5px solid var(--border) !important;
border-radius: 10px !important;
font-size: 1rem !important;
box-sizing: border-box !important;
}
/* Header-Row: Suche + ×-Button NEBENEINANDER */
.nhc-picker-modal-head { padding-right: 1rem !important; position: relative !important; }
.nhc-picker-modal-head h2 { padding-right: 0 !important; }
.nhc-picker-modal-head > p {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: .65rem !important;
}
.nhc-picker-modal-close {
position: static !important;
top: auto !important;
right: auto !important;
flex-shrink: 0 !important;
}
.nhc-picker-modal-close {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
width: 36px !important;
height: 36px !important;
background: var(--bg-soft) !important;
border: 0 !important;
border-radius: 50% !important;
font-size: 1.5rem !important;
line-height: 1 !important;
cursor: pointer !important;
z-index: 6;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.nhc-picker-modal-close:hover { background: var(--brand) !important; color: #fff !important; }
/* Tabs: horizontal scrollbar mit weichem Scroll */
.nhc-picker-modal-tabs {
position: sticky;
top: 110px;
z-index: 4;
background: #fff;
display: flex !important;
overflow-x: auto !important;
overflow-y: hidden !important;
flex-wrap: nowrap !important;
gap: .35rem !important;
padding: .65rem 1rem !important;
border-bottom: 1px solid var(--border) !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nhc-picker-modal-tabs::-webkit-scrollbar { display: none; }
.nhc-picker-modal-tabs button {
flex-shrink: 0 !important;
padding: .45rem .9rem !important;
font-size: .82rem !important;
border-radius: 99px !important;
background: var(--bg-soft) !important;
border: 0 !important;
color: var(--ink) !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: all .12s ease;
}
.nhc-picker-modal-tabs button.is-active {
background: var(--brand) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(202,0,0,.3);
}
/* Body scrollbar */
.nhc-picker-modal-body {
flex: 1 !important;
overflow-y: auto !important;
padding: 1rem !important;
-webkit-overflow-scrolling: touch;
}
.nhc-picker-modal-body section { margin: 0 0 1.5rem !important; }
.nhc-picker-modal-body section h3 {
font-size: .8rem !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
color: var(--ink-subtle) !important;
margin: 0 0 .65rem !important;
padding: 0 !important;
border: 0 !important;
font-weight: 700;
}
/* Grid: 2 Spalten Karten */
.nhc-picker-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .65rem !important;
}
.nhc-picker-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: .75rem .5rem !important;
background: #fff !important;
border: 1.5px solid var(--border) !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all .12s ease;
min-height: 0;
}
.nhc-picker-card:hover,
.nhc-picker-card:focus {
border-color: var(--brand) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px -2px rgba(0,0,0,.08);
}
.nhc-picker-card img {
width: 100% !important;
max-width: 100px !important;
height: 80px !important;
object-fit: contain !important;
margin: 0 auto .5rem !important;
background: var(--bg-soft);
border-radius: 8px;
padding: 4px;
box-sizing: border-box;
}
/* Cards ohne Bild: Platzhalter-H�he */
.nhc-picker-card:not(:has(img))::before {
content: "";
display: block;
width: 100px;
height: 80px;
margin: 0 auto .5rem;
background: var(--bg-soft);
border-radius: 8px;
background-image: linear-gradient(135deg, transparent 25%, rgba(0,0,0,.04) 25%, rgba(0,0,0,.04) 50%, transparent 50%);
}
.nhc-picker-card-name {
font-size: .78rem !important;
line-height: 1.25 !important;
font-weight: 600 !important;
color: var(--ink) !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin-bottom: .35rem !important;
}
.nhc-picker-card-price {
font-size: .82rem !important;
font-weight: 700 !important;
color: var(--brand) !important;
margin-top: auto !important;
}
}
/* Mobile: mehr Abstand zwischen Produktbild und Vergleichen/Merken-Buttons */
@media (max-width: 900px) {
.nhc-product-hero { gap: 3rem !important; }
.nhc-product-gallery { margin-bottom: 1.5rem; }
.nhc-product-actions,
.nhc-product-side-actions,
.nhc-compare-toggle,
.nhc-wish-toggle,
.nhc-product-tools { margin-top: 1.5rem !important; }
}
/* Picker-Modal Mobile: gr��ere Karten (1 Spalte, gro�e Bilder + Text) */
@media (max-width: 760px) {
.nhc-picker-grid {
grid-template-columns: 1fr !important;
gap: .85rem !important;
}
.nhc-picker-card {
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
padding: 1rem !important;
gap: 1rem !important;
}
.nhc-picker-card img {
width: 90px !important;
max-width: 90px !important;
height: 90px !important;
margin: 0 !important;
flex-shrink: 0;
}
.nhc-picker-card:not(:has(img))::before {
width: 90px !important;
height: 90px !important;
margin: 0 !important;
flex-shrink: 0;
}
.nhc-picker-card-name {
font-size: .95rem !important;
line-height: 1.35 !important;
-webkit-line-clamp: 3 !important;
margin-bottom: .5rem !important;
flex: 1;
text-align: left !important;
}
.nhc-picker-card-price {
font-size: 1rem !important;
text-align: left !important;
margin-top: 0 !important;
}
.nhc-picker-card > :not(img):not(::before) {
flex: 1;
min-width: 0;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* ============================================
PRODUKTVERGLEICH � Mobile Optimierung
============================================ */
@media (max-width: 760px) {
/* Der Wrapper begrenzt die Breite, damit das min-width:max-content des
Grids nicht die ganze Seite horizontal aufzieht. Scrollen soll nur die
Tabelle, nie der Body. */
.nhc-compare {
padding: 1rem .85rem 3rem !important;
max-width: 100%;
overflow-x: hidden;
}
/* Frozen Panes: das Grid scrollt auf Mobil in BEIDEN Achsen selbst.
Das ist hier zwingend — solange der Container nur horizontal scrollt,
bezieht sich sticky auf ihn statt aufs Fenster, und die Kopfzeile bleibt
beim Seitenscrollen einfach stehen ohne mitzuwandern. Mit eigener
Maximalhöhe wird der Container zum Scrollport, an dem sticky greift. */
.nhc-compare-grid {
overflow: auto !important;
max-height: 76vh;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
display: grid !important;
border-radius: 12px !important;
}
/* Spaltenbreiten: erste Spalte (Labels) schmal, Produkte je 240px */
.nhc-compare-grid {
grid-template-columns: 130px repeat(auto-fill, minmax(220px, 1fr)) !important;
}
/* Feste Spaltenbreiten, aber KEIN min-width:max-content — das hätte den
Container auf Inhaltsbreite aufgeblasen, sodass er nie überläuft und
damit auch nie seitlich scrollt. Der Wrapper hätte ihn nur abgeschnitten.
So bleibt der Container fensterbreit und die Spalten laufen über. */
.nhc-compare-grid[style*="grid-template-columns"] {
grid-template-columns: 130px repeat(var(--cmp-count, 3), 220px) !important;
min-width: 0;
max-width: 100%;
}
/* Kopfzeile bleibt oben im Container stehen (Offset 0, nicht --nhc-header-h:
wir sticken jetzt am Container, nicht am Fenster). */
.nhc-c-head,
.nhc-c-head.nhc-c-product {
padding: .85rem .5rem !important;
position: sticky !important;
top: 0 !important;
z-index: 20 !important;
box-shadow: 0 1px 0 var(--border);
}
/* Die Ecke ist in beiden Achsen fixiert und muss über allem liegen */
.nhc-c-head.nhc-c-label {
position: sticky !important;
top: 0 !important;
left: 0 !important;
z-index: 30 !important;
}
/* Zeilenhöhe auf Mobil etwas kompakter */
.nhc-c-label, .nhc-c-cell { --nhc-c-row-h: 48px; }
/* Der Kopf bleibt stehen und darf deshalb nur wenig Höhe belegen —
auf 780px Fensterhöhe sonst schnell die halbe Ansicht. */
.nhc-c-product img {
max-width: 62px !important;
width: 100% !important;
margin: 0 auto .35rem !important;
padding: .25rem !important;
}
.nhc-c-product h3 {
font-size: .76rem !important; line-height: 1.2 !important; margin: 0 0 .25rem !important;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.nhc-c-price { font-size: .82rem !important; margin: .15rem 0 .35rem !important; }
.nhc-c-remove { top: 4px !important; right: 6px !important; font-size: 1.25rem !important; }
/* Label-Zellen kleiner + sticky am linken Rand.
!important nötig: die Basisregel .nhc-c-label:not(.nhc-c-head) hat durch
das :not() eine höhere Spezifität und würde hier relative erzwingen. */
.nhc-c-label {
position: sticky !important;
left: 0;
/* !important zwingend: die Basisregel .nhc-c-label:not(.nhc-c-head) setzt
z-index:1 mit höherer Spezifität. Ohne das malen die Wertzellen (gleiche
Ebene, später im DOM) über die fixierte Label-Spalte — sie wirkt dann
beim Seitwärtsscrollen schlicht leer. */
z-index: 5 !important;
padding: .65rem .65rem !important;
font-size: .78rem !important;
line-height: 1.25 !important;
background: var(--bg-soft) !important;
box-shadow: 1px 0 0 var(--border);
word-break: normal;
hyphens: auto;
}
.nhc-c-head.nhc-c-label { z-index: 3; }
/* Wert-Zellen */
.nhc-c-cell {
padding: .65rem .65rem !important;
font-size: .85rem !important;
line-height: 1.35 !important;
word-break: break-word;
}
/* Gruppen-Überschriften (rot) über volle Breite.
Der Balken selbst kann nicht sticky sein — er ist genauso breit wie das
Grid und hat keinen Spielraum. Sticky ist deshalb der Text darin. */
.nhc-c-group {
grid-column: 1 / -1 !important;
padding: .55rem .85rem !important;
font-size: .72rem !important;
letter-spacing: .08em;
position: relative;
}
.nhc-c-group > span {
position: sticky;
left: .85rem;
display: inline-block;
}
/* "Add to compare"-Buttons in K�pfen falls vorhanden */
.nhc-c-product .nhc-btn,
.nhc-c-product button {
width: 100% !important;
padding: .55rem .65rem !important;
font-size: .8rem !important;
}
/* Hint zur horizontalen Scroll-Geste */
.nhc-compare-grid::after { content: ""; display: block; }
.nhc-compare-hint {
display: block;
font-size: .8rem;
color: var(--ink-subtle);
text-align: center;
margin: .65rem 0 1rem;
padding: .35rem .65rem;
background: var(--bg-soft);
border-radius: 8px;
}
.nhc-compare-hint::before { content: "? "; font-weight: 700; color: var(--brand); }
}
/* ============================================
PICKER MODAL � Tabs vs. Select-Dropdown
============================================ */
.nhc-picker-modal-select-wrap { display: none; }
@media (max-width: 760px) {
.nhc-picker-modal-tabs { display: none !important; }
.nhc-picker-modal-select-wrap {
display: block !important;
position: sticky;
top: 110px;
z-index: 4;
background: #fff;
padding: .65rem 1rem !important;
border-bottom: 1px solid var(--border) !important;
margin: 0 !important;
}
.nhc-picker-modal-select {
width: 100% !important;
padding: .75rem 2.25rem .75rem 1rem !important;
font-size: 1rem !important;
font-weight: 600 !important;
border: 1.5px solid var(--border) !important;
border-radius: 10px !important;
background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ca0000'%3E%3Cpath d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'/%3E%3C/svg%3E") no-repeat right .65rem center !important;
background-size: 22px 22px !important;
appearance: none !important;
-webkit-appearance: none !important;
color: var(--ink) !important;
cursor: pointer !important;
}
.nhc-picker-modal-select:focus {
outline: 0 !important;
border-color: var(--brand, #ca0000) !important;
box-shadow: 0 0 0 3px rgba(202,0,0,.12) !important;
}
}
/* Filter-Schlie�en-� nur im Mobile-Drawer sichtbar */
.nhc-filter-close { display: none !important; }
@media (max-width: 900px) {
.nhc-filter--drawer .nhc-filter-close { display: inline-flex !important; }
}
/* Produkt-Preis: 'inkl. MwSt.' auf neuer Zeile unter dem Preis */
.woocommerce ul.products li.product .price .woocommerce-price-suffix,
ul.products .price .woocommerce-price-suffix,
.nhc-product-card .price .woocommerce-price-suffix,
.products .price .woocommerce-price-suffix {
display: block !important;
font-size: .75rem !important;
font-weight: 400 !important;
color: var(--ink-subtle, #888) !important;
margin-top: .15rem !important;
line-height: 1.2 !important;
}
/* ============================================
AUTH-LANDING (Privat / Gewerbe Switch + 2 Cards)
============================================ */
.nhc-auth-wrap {
max-width: 1080px;
margin: 2rem auto 3rem;
padding: 0 1.25rem;
}
.nhc-auth-tabs {
display: inline-flex;
gap: .35rem;
padding: .35rem;
background: var(--bg-soft, #f7f7f8);
border-radius: 99px;
margin: 0 auto 1rem;
display: flex;
width: max-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.nhc-auth-tab {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .65rem 1.35rem;
background: transparent;
border: 0;
border-radius: 99px;
font-size: .95rem;
font-weight: 600;
color: var(--ink-soft, #555);
cursor: pointer;
transition: all .15s ease;
}
.nhc-auth-tab svg { width: 18px; height: 18px; }
.nhc-auth-tab.is-active {
background: var(--brand, #ca0000);
color: #fff;
box-shadow: 0 4px 12px -2px rgba(202,0,0,.3);
}
.nhc-auth-tab:not(.is-active):hover { color: var(--brand); }
.nhc-auth-hint {
text-align: center;
font-size: .92rem;
color: var(--ink-soft, #555);
margin: 0 auto 2rem;
max-width: 540px;
}
.nhc-auth-hint strong { color: var(--ink, #111); }
.nhc-auth-hint--b2b strong { color: var(--brand, #ca0000); }
.nhc-auth-hint[hidden] { display: none !important; }
.nhc-auth-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 760px) {
.nhc-auth-cards { grid-template-columns: 1fr; }
}
.nhc-auth-card {
background: #fff;
border: 1px solid var(--border, #ececec);
border-radius: 18px;
padding: 2rem 1.75rem;
box-shadow: 0 4px 16px -8px rgba(0,0,0,.08);
display: flex;
flex-direction: column;
transition: border-color .15s, box-shadow .15s;
}
.nhc-auth-card:hover { border-color: var(--brand-100, #ffd6d6); }
.nhc-auth-card--register {
background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
}
.nhc-auth-card-head { margin-bottom: 1.5rem; }
.nhc-auth-card-icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand, #ca0000);
color: #fff;
border-radius: 14px;
margin-bottom: 1rem;
box-shadow: 0 6px 16px -4px rgba(202,0,0,.35);
}
.nhc-auth-card-head h2 {
font-size: 1.4rem !important;
font-weight: 800;
margin: 0 0 .5rem !important;
letter-spacing: -.01em;
}
.nhc-auth-card-head p {
font-size: .92rem;
color: var(--ink-soft, #555);
margin: 0;
line-height: 1.5;
}
.nhc-auth-card-body { flex: 1; }
/* WC-Formulare innerhalb der Card */
.nhc-auth-card .woocommerce-form-login,
.nhc-auth-card .woocommerce-form-register {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.nhc-auth-card .woocommerce-form-row,
.nhc-auth-card .form-row {
margin: 0 0 .85rem !important;
padding: 0 !important;
}
.nhc-auth-card label { font-weight: 600; font-size: .88rem; color: var(--ink-soft); margin-bottom: .35rem; display: block; }
.nhc-auth-card input[type=text],
.nhc-auth-card input[type=email],
.nhc-auth-card input[type=password],
.nhc-auth-card input[type=tel] {
width: 100%;
padding: .85rem 1rem;
border: 1.5px solid var(--border);
border-radius: 10px;
font: inherit;
font-size: .95rem;
background: #fff;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.nhc-auth-card input:focus {
outline: 0;
border-color: var(--brand, #ca0000);
box-shadow: 0 0 0 3px rgba(202,0,0,.12);
}
.nhc-auth-card .button,
.nhc-auth-card button[name="login"],
.nhc-auth-card button[name="register"] {
width: 100% !important;
padding: .95rem 1rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
background: var(--brand, #ca0000) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
cursor: pointer;
margin-top: .5rem !important;
transition: all .15s;
}
.nhc-auth-card .button:hover,
.nhc-auth-card button[name="login"]:hover,
.nhc-auth-card button[name="register"]:hover {
background: #a00000 !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px -4px rgba(202,0,0,.4);
}
.nhc-auth-card .lost_password a,
.nhc-auth-card .woocommerce-LostPassword a {
color: var(--brand) !important;
font-size: .85rem;
text-decoration: none;
}
.nhc-auth-card .lost_password a:hover { text-decoration: underline; }
.nhc-auth-card .woocommerce-form-login__rememberme,
.nhc-auth-card .woocommerce-form__label-for-checkbox {
font-size: .85rem !important;
color: var(--ink-soft) !important;
}
/* B2B-Felder (Firma + USt-IdNr.) � nur sichtbar bei Gewerbekunde-Modus */
.nhc-b2b-fields { display: none; }
.nhc-auth-wrap[data-mode="b2b"] .nhc-b2b-fields { display: block; }
/* Hilfe-Texte */
.woocommerce-privacy-policy-text { font-size: .75rem !important; color: var(--ink-subtle) !important; margin-top: .85rem !important; }
/* Auswahl-View (Cards) vs. Form-View togglen */
.nhc-auth-wrap[data-view="choose"] [data-auth-step="form"] { display: none !important; }
.nhc-auth-wrap[data-view="login"] [data-auth-step="choose"] { display: none !important; }
.nhc-auth-wrap[data-view="register"] [data-auth-step="choose"] { display: none !important; }
/* Cards als komplette Click-Links */
.nhc-auth-card {
display: flex !important;
flex-direction: column;
text-align: center;
align-items: center;
text-decoration: none !important;
color: var(--ink, #111) !important;
cursor: pointer;
position: relative;
overflow: hidden;
}
.nhc-auth-card .nhc-auth-card-icon {
margin: 0 auto 1.25rem;
}
.nhc-auth-card h2 {
font-size: 1.5rem !important;
font-weight: 800;
margin: 0 0 .65rem !important;
letter-spacing: -.01em;
color: var(--ink) !important;
}
.nhc-auth-card p {
font-size: .95rem;
color: var(--ink-soft, #555);
margin: 0 0 1.5rem;
line-height: 1.5;
max-width: 320px;
}
.nhc-auth-card-cta {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: auto;
padding: .85rem 1.5rem;
background: var(--brand, #ca0000);
color: #fff !important;
border-radius: 99px;
font-weight: 700;
font-size: .95rem;
box-shadow: 0 4px 12px -2px rgba(202,0,0,.3);
transition: all .15s ease;
}
.nhc-auth-card:hover {
border-color: var(--brand, #ca0000) !important;
transform: translateY(-3px);
box-shadow: 0 14px 28px -10px rgba(0,0,0,.12) !important;
}
.nhc-auth-card:hover .nhc-auth-card-cta {
background: #a00000;
box-shadow: 0 6px 16px -2px rgba(202,0,0,.45);
}
.nhc-auth-card:hover .nhc-auth-card-cta span { transform: translateX(3px); }
.nhc-auth-card-cta span { transition: transform .15s ease; }
/* Form-View: zentrierte Single-Card */
.nhc-auth-form-wrap { max-width: 540px; margin: 0 auto; }
.nhc-auth-back {
display: inline-flex;
align-items: center;
gap: .35rem;
color: var(--ink-soft, #555) !important;
font-size: .9rem;
font-weight: 500;
text-decoration: none !important;
margin-bottom: 1rem;
padding: .5rem .85rem;
border-radius: 8px;
transition: all .12s;
}
.nhc-auth-back:hover { background: var(--bg-soft, #f7f7f8); color: var(--brand) !important; }
.nhc-auth-back span { font-size: 1.1rem; line-height: 1; }
.nhc-auth-form-card {
background: #fff;
border: 1px solid var(--border, #ececec);
border-radius: 18px;
padding: 2.5rem 2rem;
box-shadow: 0 4px 16px -8px rgba(0,0,0,.08);
}
.nhc-auth-form-head h2 {
font-size: 1.5rem !important;
font-weight: 800;
margin: 0 0 1.5rem !important;
letter-spacing: -.01em;
text-align: center;
}
.nhc-auth-form-body { width: 100%; }
/* Footer-Legal-Zeile (Impressum, Datenschutz, AGB ... alles in einer Linie) */
.nhc-footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .5rem 1.25rem;
padding: 1rem 1.25rem;
margin: 0 auto .5rem;
max-width: var(--container-w, 1280px);
}
.nhc-footer-legal a {
color: rgba(255,255,255,.8);
text-decoration: none;
font-size: .85rem;
font-weight: 500;
position: relative;
padding: .15rem .35rem;
transition: color .15s ease;
}
.nhc-footer-legal a:hover { color: #fff; }
.nhc-footer-legal a + a::before {
content: "\00B7";
position: absolute;
left: -.85rem;
color: rgba(255,255,255,.35);
}
@media (max-width: 600px) {
.nhc-footer-legal { gap: .5rem .9rem; padding: .85rem 1rem; }
.nhc-footer-legal a { font-size: .8rem; }
}
/* Auf der Auswahl-Seite (/konto/ ohne action) WC-Formulare hart ausblenden */
body.nhc-auth-view-choose .u-columns,
body.nhc-auth-view-choose .col2-set,
body.nhc-auth-view-choose #customer_login,
body.nhc-auth-view-choose .woocommerce-form-login,
body.nhc-auth-view-choose .woocommerce-form-register,
body.nhc-auth-view-choose .woocommerce-account > h2,
body.nhc-auth-view-choose .woocommerce > h2 {
display: none !important;
}
body.nhc-auth-view-choose .nhc-auth-wrap,
body.nhc-auth-view-choose .nhc-auth-cards,
body.nhc-auth-view-choose .nhc-auth-tabs,
body.nhc-auth-view-choose .nhc-auth-hint:not([hidden]) { display: revert !important; }
body.nhc-auth-view-choose .nhc-auth-wrap { display: block !important; }
body.nhc-auth-view-choose .nhc-auth-cards { display: grid !important; }
body.nhc-auth-view-choose .nhc-auth-tabs { display: flex !important; }
/* Wenn Login-View aktiv: nur Login-Form sichtbar (Register raus) */
body.nhc-auth-view-login .woocommerce-form-register,
body.nhc-auth-view-login .u-column2 { display: none !important; }
body.nhc-auth-view-register .woocommerce-form-login,
body.nhc-auth-view-register .u-column1 { display: none !important; }
/* Login-Form: Enter-Submit sicherstellen (keine externe JS-Hijacks) */
.nhc-auth-card form button[name='login'],
.nhc-auth-card form .button-primary { -webkit-appearance: button; }
/* ============================================
MOBIL: Header in Markenrot mit weißen Symbolen
Breakpoint 900px = derselbe, ab dem die rote Promo-Leiste ausgeblendet
wird. Der Header übernimmt damit deren Rolle als Markenfläche.
============================================ */
@media (max-width: 900px) {
.nhc-mainheader {
background: var(--brand);
border-bottom-color: rgba(255, 255, 255, .18);
}
.nhc-mainheader.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .22); }
/* Logo ist Inline-SVG auf currentColor umgestellt → färbt sich mit */
.nhc-mainheader .nhc-logo,
.nhc-mainheader .nhc-logo:hover,
.nhc-mainheader .nhc-burger,
.nhc-mainheader .nhc-action-link {
color: #fff;
}
.nhc-mainheader .nhc-logo-fallback { color: #fff; }
.nhc-mainheader .nhc-burger:hover,
.nhc-mainheader .nhc-action-link:hover {
background: rgba(255, 255, 255, .16);
color: #fff;
}
/* Zähler (Merkzettel/Warenkorb) war markenrot — auf Rot unsichtbar */
.nhc-mainheader .nhc-action-link em {
color: var(--brand);
background: #fff;
border-radius: var(--r-pill);
padding: 0 .4em;
font-size: .75em;
line-height: 1.5;
}
/* Suchfeld: weiße Pille für Kontrast, Button invertiert */
.nhc-mainheader .nhc-search {
background: #fff;
border-color: rgba(255, 255, 255, .5);
}
.nhc-mainheader .nhc-search:focus-within {
border-color: #fff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
}
.nhc-mainheader .nhc-search button {
background: var(--ink);
color: #fff;
}
.nhc-mainheader .nhc-search button:hover { background: #000; }
}
/* ============================================
B2B-SHOP (/b2b-shop/)
============================================ */
.nhc-b2b { max-width: var(--container-w); margin: 0 auto; padding: 2rem clamp(1rem,4vw,2rem) 4rem; }
.nhc-b2b-hero {
background: linear-gradient(135deg, #CA0000 0%, #8A0000 100%);
color: #fff; border-radius: var(--r-lg);
padding: clamp(2rem,5vw,3.5rem); margin-bottom: 2rem;
}
.nhc-b2b-eyebrow {
display: inline-block; background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill);
padding: .3rem .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
margin-bottom: 1rem;
}
.nhc-b2b-hero h1 { color: #fff !important; font-size: clamp(2rem,4vw,3rem); margin: 0 0 .75rem; letter-spacing: -.03em; }
.nhc-b2b-hero p { color: rgba(255,255,255,.92); margin: 0; max-width: 60ch; line-height: 1.6; }
.nhc-b2b-hero strong { color: #fff; }
.nhc-b2b-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.nhc-b2b-badges span {
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
border-radius: var(--r-pill); padding: .35rem .85rem; font-size: .82rem; font-weight: 600;
}
/* Zugangshinweis für Nicht-Freigeschaltete */
.nhc-b2b-gate {
background: var(--bg-soft); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: clamp(1.5rem,4vw,2.5rem); text-align: center;
}
.nhc-b2b-gate h2 { margin: 0 0 .75rem; font-size: 1.4rem; }
.nhc-b2b-gate p { color: var(--ink-soft); max-width: 58ch; margin: 0 auto 1.5rem; line-height: 1.6; }
.nhc-b2b-gate-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
/* Kategorie-Einstiege */
.nhc-b2b-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.nhc-b2b-cats a {
display: inline-flex; align-items: center; gap: .5rem;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill);
padding: .5rem 1rem; font-size: .88rem; font-weight: 600; color: var(--ink);
transition: all var(--t-f);
}
.nhc-b2b-cats a:hover { border-color: var(--brand); color: var(--brand); }
.nhc-b2b-cats em { font-style: normal; color: var(--ink-subtle); font-size: .78rem; font-weight: 500; }
@media (max-width: 600px) {
.nhc-b2b-gate-actions { flex-direction: column; }
.nhc-b2b-gate-actions .nhc-btn { width: 100%; }
}
/* B2B-Seite: Template-Überschrift ausblenden, der Hero bringt die H1 mit */
body.nhc-page-b2b .wp-block-post-title { display: none; }
/* Rabatthinweis am Preis für Gewerbekunden */
.nhc-b2b-discount-note {
display: block; margin-top: .2rem;
font-size: .72rem; font-weight: 600; letter-spacing: .02em;
color: var(--brand);
}
/* ============================================
MODAL (Lightbox) — z. B. Hinweis "B2B-Shop folgt"
============================================ */
.nhc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.nhc-modal[hidden] { display: none; }
.nhc-modal-backdrop { position: absolute; inset: 0; background: rgba(15,17,21,.55); backdrop-filter: blur(4px); }
.nhc-modal-panel {
position: relative; z-index: 1;
background: #fff; border-radius: var(--r-lg);
box-shadow: 0 24px 60px rgba(15,17,21,.28);
max-width: 460px; width: 100%;
padding: 2.25rem 2rem 2rem; text-align: center;
animation: nhcModalIn .18s ease-out;
}
@keyframes nhcModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nhc-modal-panel { animation: none; } }
.nhc-modal-close {
position: absolute; top: .65rem; right: .85rem;
background: none; border: 0; font-size: 1.6rem; line-height: 1;
color: var(--ink-subtle); cursor: pointer; padding: .25rem .4rem; border-radius: var(--r-sm);
}
.nhc-modal-close:hover { color: var(--brand); background: var(--bg-soft); }
.nhc-modal-icon {
width: 56px; height: 56px; margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center;
background: var(--brand-50); border-radius: var(--r-pill); font-size: 1.6rem;
}
.nhc-modal-panel h2 { font-size: 1.35rem; margin: 0 0 .75rem; letter-spacing: -.02em; }
.nhc-modal-panel p { color: var(--ink-soft); margin: 0 0 .85rem; line-height: 1.6; font-size: .95rem; }
.nhc-modal-hint { font-size: .88rem !important; }
.nhc-modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem; }
@media (max-width: 480px) {
.nhc-modal-actions { flex-direction: column; }
.nhc-modal-actions .nhc-btn { width: 100%; }
}
/* UVP-Hinweis unter dem Preis (nur B2C, inc/product-prices.php) */
.nhc-uvp {
margin-top: .25rem;
font-size: .8rem; line-height: 1.35;
color: var(--ink-subtle);
}
.nhc-uvp abbr { text-decoration: none; cursor: help; font-weight: 600; }
.nhc-uvp-amount { margin-left: .3rem; text-decoration: line-through; }
.nhc-uvp-tax { margin-left: .3rem; font-size: .85em; }
.nhc-product-buybox .nhc-uvp { margin-top: -.25rem; margin-bottom: .75rem; font-size: .9rem; }
/* ============================================
MINI-WARENKORB (Panel von rechts, inc/mini-cart.php)
============================================ */
html.nhc-mc-lock { overflow: hidden; }
.nhc-mc { position: fixed; inset: 0; z-index: 1300; }
.nhc-mc[hidden] { display: none; }
.nhc-mc-backdrop { position: absolute; inset: 0; background: rgba(15,17,21,.45); opacity: 0; transition: opacity .25s ease; }
.nhc-mc-panel {
position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
background: #fff; box-shadow: var(--sh-4); display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nhc-mc.is-open .nhc-mc-backdrop { opacity: 1; }
.nhc-mc.is-open .nhc-mc-panel { transform: none; }
.nhc-mc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; transition: opacity .15s; }
.nhc-mc.is-busy .nhc-mc-body { opacity: .55; pointer-events: none; }
.nhc-mc-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
.nhc-mc-head h2 { margin: 0; font-size: 1.15rem !important; }
.nhc-mc-count { color: var(--ink-subtle); font-weight: 500; }
.nhc-mc-close { width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nhc-mc-close:hover { background: var(--bg-soft); }
.nhc-mc-items { list-style: none; margin: 0; padding: .5rem 1.25rem; flex: 1; min-height: 0; overflow-y: auto; }
.nhc-mc-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); transition: opacity .2s; }
.nhc-mc-item:last-child { border-bottom: 0; }
.nhc-mc-item.is-removing { opacity: .35; }
.nhc-mc-img { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; padding: 6px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.nhc-mc-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 0; }
.nhc-mc-info { min-width: 0; display: flex; flex-direction: column; }
.nhc-mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.nhc-mc-name { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nhc-mc-name:hover { color: var(--brand); }
.nhc-mc-remove { flex-shrink: 0; width: 30px; height: 30px; margin: -4px -6px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-subtle); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.nhc-mc-remove:hover { background: var(--brand-50); color: var(--brand); }
.nhc-mc-unit { margin-top: .2rem; font-size: .8rem; color: var(--ink-subtle); }
.nhc-mc-unit .woocommerce-price-suffix { display: none; }
.nhc-mc-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .7rem; }
.nhc-mc-qty { display: inline-flex; align-items: center; height: 36px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
.nhc-mc-qty button { width: 34px; height: 100%; border: 0; background: var(--bg-soft); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.nhc-mc-qty button:hover:not(:disabled) { background: var(--brand-50); color: var(--brand); }
.nhc-mc-qty button:disabled { color: #C3C6CC; cursor: default; }
.nhc-mc-qty input { width: 40px; height: 100%; margin: 0; padding: 0; border: 0; border-inline: 1.5px solid var(--border); border-radius: 0; box-shadow: none; text-align: center; font: inherit; font-size: .95rem; font-weight: 700; color: var(--ink); background: #fff; -moz-appearance: textfield; }
.nhc-mc-qty input:focus { outline: 0; background: var(--brand-50); }
.nhc-mc-qty input::-webkit-outer-spin-button, .nhc-mc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nhc-mc-line { font-weight: 700; font-size: 1rem; color: var(--ink); white-space: nowrap; text-align: right; }
.nhc-mc-line .woocommerce-price-suffix { display: none; }
.nhc-mc-foot { border-top: 1px solid var(--border); padding: 1rem 1.25rem 1.25rem; background: #fff; }
.nhc-mc-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; }
.nhc-mc-sum strong { font-size: 1.2rem; }
.nhc-mc-sum .woocommerce-price-suffix { display: none; }
.nhc-mc-note { margin: .3rem 0 1rem; font-size: .78rem; color: var(--ink-subtle); }
.nhc-mc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nhc-mc-actions .nhc-btn { justify-content: center; text-align: center; width: 100%; }
.nhc-mc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; color: var(--ink-subtle); text-align: center; }
.nhc-mc-empty p { margin: 0; font-size: 1rem; color: var(--ink); }
.nhc-mc-notice { margin: 0 1.25rem 1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--brand-50); color: var(--brand-700); font-size: .85rem; }
.single_add_to_cart_button.is-loading { opacity: .7; cursor: progress; }
@media (max-width: 480px) { .nhc-mc-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nhc-mc-panel, .nhc-mc-backdrop { transition: none; } }
/* === Stellen-Einzelansicht === */
.nhc-job-single { padding-bottom: 4rem; }
.nhc-job-single-head { max-width: 820px; margin-bottom: 2rem; }
.nhc-job-single-head .nhc-job-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.nhc-job-single-head h1 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important; }
.nhc-job-single-lead { font-size: 1.1rem; color: var(--ink-soft); margin: 0; }
.nhc-job-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; }
.nhc-job-single-content { max-width: 760px; font-size: 1.02rem; line-height: 1.7; }
.nhc-job-single-content h2, .nhc-job-single-content h3 { margin: 2rem 0 .75rem; }
.nhc-job-single-content ul { padding-left: 1.2rem; }
.nhc-job-single-content li { margin: .3rem 0; }
.nhc-job-single-img { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: 1.5rem; }
.nhc-job-apply { position: sticky; top: 120px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; }
.nhc-job-apply h2 { margin: 0 0 .5rem; font-size: 1.25rem !important; }
.nhc-job-apply p { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .95rem; }
.nhc-job-apply .nhc-btn { width: 100%; justify-content: center; }
.nhc-job-apply-contact { margin: 1rem 0 .75rem !important; font-size: .88rem !important; }
.nhc-job-apply-back { font-size: .88rem; color: var(--ink-subtle); }
.nhc-job-apply-back:hover { color: var(--brand); }
@media (max-width: 900px) { .nhc-job-single-grid { grid-template-columns: 1fr; gap: 2rem; } .nhc-job-apply { position: static; } }
/* === Eyebrow-Labels: ruhig statt Pill (v1.0.117) ============
Normale Schreibweise, kein Glas-Hintergrund, kurze Akzentlinie davor. */
.nhc-section-eyebrow,
.nhc-slide-eyebrow,
.nhc-b2b-eyebrow {
display: inline-flex; align-items: center; gap: .6rem;
background: none; backdrop-filter: none; border: 0; border-radius: 0; padding: 0;
text-transform: none; letter-spacing: 0;
font-size: .95rem; font-weight: 600; line-height: 1.3;
}
.nhc-section-eyebrow::before,
.nhc-slide-eyebrow::before,
.nhc-b2b-eyebrow::before {
content: ""; flex: 0 0 auto; width: 1.5rem; height: 2px; background: currentColor; opacity: .55;
}
.nhc-section-eyebrow { color: var(--brand); }
.nhc-slide-eyebrow { color: rgba(255,255,255,.9); margin-bottom: 1rem; }
.nhc-slide-eyebrow::before,
.nhc-b2b-eyebrow::before { background: #fff; opacity: .7; }
.nhc-b2b-eyebrow { color: rgba(255,255,255,.9); margin-bottom: .6rem; }
.nhc-mp-feature-eyebrow {
display: block; padding: 0 !important; background: none !important; border-radius: 0 !important;
text-transform: none !important; letter-spacing: 0 !important;
font-size: .78rem !important; font-weight: 600 !important; color: var(--brand, #ca0000) !important;
}
.nhc-pricehist-eyebrow { text-transform: none; letter-spacing: 0; font-size: .78rem; }
/* Newsletter mobil: Eingabe + Button untereinander, Einwilligung linksbündig */
.nhc-newsletter-form-row input { min-width: 0; }
.nhc-newsletter-consent { text-align: left; align-items: flex-start; }
.nhc-newsletter-consent input { flex: 0 0 auto; margin-top: .2rem; }
@media (max-width: 560px) {
.nhc-newsletter-form-row { flex-direction: column; gap: .5rem; padding: 0; background: none; border: 0; border-radius: 0; }
.nhc-newsletter-form-row input { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); text-align: center; }
.nhc-newsletter-form-row button { width: 100%; }
/* Einwilligung zentriert wie Überschrift/Text — Checkbox im Textfluss, kein einseitiger Rand */
.nhc-newsletter-consent { display: block; text-align: center; text-wrap: balance; }
.nhc-newsletter-consent input { display: inline-block; vertical-align: -2px; margin: 0 .4rem 0 0; }
}
/* === Startseite: Icons dauerhaft rot/weiß, neuer Hover (v1.0.121) ===
Ohne Anheben: rote Leiste wächst am unteren Rand, Titel wird rot,
Icon-Box dunkelt ab und kippt leicht. */
.nhc-cat-icon,
.nhc-usp-icon,
.nhc-service-icon { background: var(--brand); color: #fff; transition: background var(--t-f), transform var(--t-m); }
.nhc-cat-tile,
.nhc-service-tile { position: relative; overflow: hidden; }
.nhc-cat-tile::before,
.nhc-service-tile::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: var(--brand); transform: scaleX(0); transform-origin: left center;
transition: transform var(--t-m);
}
.nhc-cat-tile:hover,
.nhc-service-tile:hover { transform: none; box-shadow: var(--sh-2); border-color: var(--border); }
.nhc-cat-tile:hover::before,
.nhc-service-tile:hover::before { transform: scaleX(1); }
.nhc-cat-tile:hover .nhc-cat-icon,
.nhc-service-tile:hover .nhc-service-icon { background: var(--brand-700); color: #fff; transform: rotate(-6deg) scale(1.06); }
.nhc-cat-tile:hover .nhc-cat-name,
.nhc-service-tile:hover .nhc-service-title { color: var(--brand); }
.nhc-cat-name, .nhc-service-title { transition: color var(--t-f); }
.nhc-cat-tile:focus-visible::before,
.nhc-service-tile:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.nhc-cat-tile::before, .nhc-service-tile::before, .nhc-cat-icon, .nhc-service-icon { transition: none; }
.nhc-cat-tile:hover .nhc-cat-icon, .nhc-service-tile:hover .nhc-service-icon { transform: none; }
}
/* Beschreibung nicht unter den Pfeil unten rechts laufen lassen */
.nhc-cat-desc { padding-right: 2rem; }
/* Aktions-Slide mit eigenem Hintergrundbild (Manager → Aktionen) */
.nhc-slide--promo.nhc-slide--has-img {
background:
linear-gradient(135deg, rgba(120,0,0,.82) 0%, rgba(20,20,22,.72) 100%),
var(--nhc-slide-img) center / cover no-repeat;
}
/* Merkzettel-Icon (Notizzettel): aktiv = Blatt gefüllt, Zeilen weiß */
.nhc-wish-add.is-active svg { fill: none; }
.nhc-wish-add.is-active svg path:first-child { fill: currentColor; }
.nhc-wish-add.is-active svg path:last-child { stroke: #fff; }
/* Footer: Öffnungszeiten + „Route planen" */
.nhc-footer-hours { width: 100%; max-width: 280px; }
.nhc-footer-hours li { display: flex !important; justify-content: space-between !important; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom-color: rgba(255,255,255,.12); }
.nhc-footer-hours li span { color: rgba(255,255,255,.8); }
.nhc-footer-hours li strong,
.nhc-footer-hours li em { color: #fff; font-weight: 600; font-size: .9rem; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nhc-footer-hours li em { color: rgba(255,255,255,.65); font-weight: 500; }
.nhc-footer-mapbtn {
margin-top: 1.25rem; padding: .7rem 1.4rem; gap: 0;
background: #fff; color: var(--brand) !important; border: 0; border-radius: 10px;
font-size: .9rem; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35);
}
.nhc-footer-mapbtn:hover { background: var(--ink); color: #fff !important; }
@media (max-width: 900px) {
.nhc-footer-hours { max-width: 260px; margin: 0 auto !important; }
.nhc-footer-hours li { text-align: left !important; }
}
.nhc-footer a.nhc-footer-mapbtn, .nhc-site-footer a.nhc-footer-mapbtn, footer a.nhc-footer-mapbtn { color: var(--brand) !important; }
.nhc-footer a.nhc-footer-mapbtn:hover, .nhc-site-footer a.nhc-footer-mapbtn:hover, footer a.nhc-footer-mapbtn:hover { color: #fff !important; }
/* Mein Konto (angemeldet): Raster reparieren.
WooCommerce setzt Clearfix-::before/::after (werden im Grid zu eigenen Zellen)
und float + 30 %/68 % Breite auf Navigation/Inhalt → Spalten verrutschten. */
.woocommerce-account.logged-in .woocommerce {
display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important;
gap: 1.75rem; align-items: start; max-width: var(--container) !important;
}
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after { content: none !important; display: none !important; }
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; padding: .75rem; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: .7rem .85rem !important; margin: 0 !important; }
@media (max-width: 800px) {
.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr !important; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; }
}
/* globale Fließtext-Listenabstände (ul-Einzug, li-Abstand) gelten hier nicht */
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; }
/* 404: Abschnitte und Footer bündig, ohne den Standard-Blockabstand (24px) dazwischen */
body.error404 main.wp-block-group > *,
body.error404 footer.wp-block-template-part,
body.error404 .wp-site-blocks > footer { margin-block-start: 0 !important; }
body.error404 main.wp-block-group > br { display: none; }
/* === Kontakt-Seite: Kacheln wie die Kategorien auf der Startseite === */
.nhc-kontakt { max-width: var(--container); margin: 0 auto; padding: 0 0 clamp(3rem,6vw,4.5rem); }
.nhc-kontakt-lead { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.6; max-width: 46rem; margin: 0 0 2rem !important; }
/* Fließtext-Abstände der Inhaltsseite (h3 margin-top) gelten in den Kacheln nicht */
.nhc-kontakt-tile .nhc-cat-name { margin: 0 0 .35rem !important; }
.nhc-kontakt-tile p { margin-top: 0 !important; }
.nhc-kontakt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1100px) { .nhc-kontakt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nhc-kontakt-tiles { grid-template-columns: 1fr; } }
.nhc-kontakt-tile { padding: 1.6rem 1.5rem 1.75rem; }
.nhc-kontakt-tile .nhc-cat-icon { margin-bottom: 1.1rem; }
.nhc-kontakt-tile .nhc-cat-name { font-size: 1.05rem; }
.nhc-kontakt-value { font-size: 1.12rem; font-weight: 700; color: var(--brand); margin: 0 0 .3rem; font-variant-numeric: tabular-nums; }
.nhc-kontakt-tile .nhc-cat-desc { padding-right: 1.75rem; }
/* Reine Info-Kacheln (ohne Link): kein Pfeil, kein Hover */
.nhc-kontakt-tile--static::after,
.nhc-kontakt-tile--static::before { display: none; }
.nhc-kontakt-tile--static:hover { box-shadow: none; border-color: var(--border); }
.nhc-kontakt-tile--static:hover .nhc-cat-icon { transform: none; background: var(--brand); }
.nhc-kontakt-tile--static:hover .nhc-cat-name { color: var(--ink); }
.nhc-kontakt-tile--static .nhc-kontakt-value { color: var(--ink); }
/* Mein Konto (/konto/): Seitentitel nur für Screenreader — die Anmelde-Karten sprechen für sich */
body.woocommerce-account h1.wp-block-post-title {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* B2B-Modus: Promo-Leiste anthrazit wie der Geschäftskunden-Bereich (/kundenbereich/) */
.nhc-promo.nhc-promo--b2b { background: linear-gradient(90deg, #1f2125 0%, #111316 100%); }
.nhc-promo--b2b .nhc-promo-mode { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
/* ==========================================================
WARENKORB v2 (Okt. 2026) — überschreibt die älteren Regeln oben.
Artikel als ruhige Liste in einer Karte, Zusammenfassung als
Karte rechts (sticky), Kassen-Button immer sichtbar.
========================================================== */
body.woocommerce-cart .wp-block-post-title { text-align: left !important; max-width: var(--container); margin: .5rem auto 1.75rem !important; padding: 0 clamp(1rem,4vw,2rem); font-size: clamp(1.75rem,3vw,2.4rem) !important; box-sizing: border-box; }
body.woocommerce-cart .nhc-fab-cart { display: none !important; } /* schwebender Warenkorb-Button ist hier überflüssig */
@media (min-width: 761px) {
body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
display: grid !important; grid-template-columns: minmax(0, 1fr) 380px !important; gap: 2rem !important;
align-items: start; max-width: var(--container); margin: 0 auto 4rem !important; padding: 0 clamp(1rem,4vw,2rem) !important; box-sizing: border-box;
}
body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart__sidebar { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
/* Artikelliste */
body.woocommerce-cart table.wc-block-cart-items {
display: table !important; width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
background: #fff; border: 1px solid var(--border) !important; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
}
body.woocommerce-cart .wc-block-cart-items__header th {
background: var(--bg-soft) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: .85rem 1.25rem !important;
font-size: .75rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-subtle) !important;
}
body.woocommerce-cart .wc-block-cart-items__header-total { text-align: right !important; }
body.woocommerce-cart .wc-block-cart-items__row > td {
border: 0 !important; border-top: 1px solid var(--border) !important; padding: 1.25rem !important; vertical-align: middle !important; background: #fff !important;
}
body.woocommerce-cart .wc-block-cart-items__header + .wc-block-cart-items__row > td { border-top: 0 !important; }
body.woocommerce-cart .wc-block-cart-item__image { width: 112px !important; padding-right: 0 !important; }
body.woocommerce-cart .wc-block-cart-item__image img {
width: 88px !important; height: 88px !important; object-fit: contain !important; padding: 6px !important; box-sizing: border-box !important;
background: var(--bg-soft) !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
}
body.woocommerce-cart .wc-block-cart-item__wrap { display: flex !important; flex-direction: column; gap: .7rem; max-width: none !important; }
body.woocommerce-cart .wc-block-cart-item__total { width: 150px !important; text-align: right !important; vertical-align: middle !important; }
body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { min-height: 0 !important; height: auto !important; align-items: flex-end !important; justify-content: center !important; }
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--ink) !important; }
}
/* Produktname, Menge, Entfernen (alle Breiten) */
body.woocommerce-cart .wc-block-components-product-name { font-size: 1rem !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.35 !important; text-decoration: none !important; }
body.woocommerce-cart .wc-block-components-product-name:hover { color: var(--brand) !important; }
body.woocommerce-cart .wc-block-cart-item__quantity { display: flex !important; align-items: center; gap: .75rem; }
body.woocommerce-cart .wc-block-components-quantity-selector {
width: auto !important; height: 38px; border: 1px solid var(--border) !important; border-radius: 10px !important; background: #fff !important; overflow: hidden;
}
body.woocommerce-cart .wc-block-components-quantity-selector::after { display: none !important; }
body.woocommerce-cart .wc-block-components-quantity-selector__button { width: 36px !important; min-width: 36px !important; height: 100% !important; font-size: 1.05rem !important; color: var(--ink-soft) !important; background: transparent !important; border: 0 !important; }
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover { background: var(--bg-soft) !important; color: var(--brand) !important; }
body.woocommerce-cart .wc-block-components-quantity-selector__input { width: 44px !important; height: 100% !important; border: 0 !important; font-weight: 700 !important; font-size: .95rem !important; background: transparent !important; box-shadow: none !important; }
body.woocommerce-cart .wc-block-cart-item__remove-link {
width: 38px !important; height: 38px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; justify-content: center;
color: var(--ink-subtle) !important; border: 1px solid transparent !important; transition: background var(--t-f), color var(--t-f), border-color var(--t-f);
}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover { background: #fee2e2 !important; color: var(--brand) !important; border-color: #fecaca !important; }
/* Zusammenfassung */
body.woocommerce-cart .wc-block-cart__sidebar { position: sticky; top: 130px; }
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-1) !important;
padding: 1.5rem 1.5rem .5rem !important; margin: 0 !important;
}
body.woocommerce-cart .wc-block-cart__totals-title {
font-size: 1.15rem !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.01em !important;
color: var(--ink) !important; margin: 0 0 .75rem !important; padding: 0 !important; border: 0 !important; text-align: left !important;
}
body.woocommerce-cart .wc-block-components-totals-wrapper { border-top: 1px solid var(--border) !important; padding: .75rem 0 !important; }
body.woocommerce-cart .wc-block-components-totals-wrapper:empty { display: none !important; }
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
background: var(--bg-soft) !important; border: 1px dashed var(--border) !important; border-radius: 10px !important; padding: .7rem .9rem !important;
font-size: .9rem !important; font-weight: 600 !important; color: var(--ink-soft) !important; margin: 0 !important;
}
body.woocommerce-cart .wc-block-components-totals-item { padding: .35rem 0 !important; font-size: .92rem !important; }
body.woocommerce-cart .wc-block-components-totals-item__label { color: var(--ink-soft) !important; font-weight: 500 !important; }
body.woocommerce-cart .wc-block-components-totals-item__value { color: var(--ink) !important; font-weight: 700 !important; }
body.woocommerce-cart .wc-block-components-totals-item__description,
body.woocommerce-cart .wc-block-components-totals-shipping__via { font-size: .78rem !important; color: var(--ink-subtle) !important; }
body.woocommerce-cart .wc-block-components-totals-footer-item { padding: .25rem 0 0 !important; border: 0 !important; margin: 0 !important; }
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1rem !important; font-weight: 800 !important; color: var(--ink) !important; }
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.6rem !important; font-weight: 800 !important; color: var(--ink) !important; letter-spacing: -.02em; }
/* Kassen-Button: auf großen Bildschirmen normal unter der Summe (war versteckt) */
body.woocommerce-cart .wc-block-cart__submit { margin: 1rem 0 0 !important; }
@media (min-width: 761px) {
body.woocommerce-cart .wc-block-cart__submit-container,
body.woocommerce-cart .wc-block-cart__submit-container--sticky {
display: block !important; position: static !important; padding: 0 !important; background: none !important; box-shadow: none !important; width: auto !important;
}
body.woocommerce-cart .wc-block-cart__submit-container--sticky::before { display: none !important; }
}
body.woocommerce-cart .wc-block-cart__submit-button {
display: flex !important; width: 100% !important; justify-content: center; align-items: center; gap: .5rem;
min-height: 56px; padding: 1rem 1.5rem !important; border-radius: 12px !important; border: 0 !important;
background: var(--brand) !important; color: #fff !important; font-size: 1.05rem !important; font-weight: 800 !important;
box-shadow: 0 10px 24px -10px rgba(202,0,0,.55) !important; transition: background var(--t-f), transform var(--t-f);
}
body.woocommerce-cart .wc-block-cart__submit-button:hover { background: var(--brand-700) !important; transform: translateY(-1px); }
body.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text::after { content: " \2192"; }
body.woocommerce-cart .wc-block-cart__payment-options:empty { display: none; }
/* Mobil: Artikel-Karten + feste Kassen-Leiste unten */
@media (max-width: 760px) {
body.woocommerce-cart .wc-block-cart { padding: 0 1rem !important; }
body.woocommerce-cart .wc-block-cart__sidebar { position: static; }
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--ink) !important; font-weight: 800 !important; }
body.woocommerce-cart .wc-block-cart__submit-container--sticky {
position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 60; display: block !important; margin: 0 !important; width: auto !important;
padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)) !important; background: #fff !important;
border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.18) !important;
}
body.woocommerce-cart .wc-block-cart__submit-container--sticky::before { display: none !important; }
body.woocommerce-cart .wc-block-cart__submit-container--sticky .wc-block-cart__submit-button { min-height: 52px; box-shadow: none !important; }
body.woocommerce-cart .wp-block-woocommerce-cart { padding-bottom: 90px; }
}
/* Warenkorb v2 – Feinschliff */
body.woocommerce-cart .wc-block-cart__sidebar { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.woocommerce-cart .wc-block-cart__totals-title { display: block !important; }
body.woocommerce-cart .wc-block-components-totals-coupon { padding: 0 !important; background: none !important; border: 0 !important; }
body.woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper { min-height: 0 !important; height: auto !important; margin: 0 !important; justify-content: center !important; }
@media (min-width: 761px) {
body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout { padding: 0 !important; }
}
@media (max-width: 760px) {
body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout { padding: 0 !important; }
body.woocommerce-cart .wc-block-cart-items__row > td.wc-block-cart-item__total { display: flex !important; justify-content: space-between !important; align-items: baseline; gap: 1rem; }
body.woocommerce-cart .wc-block-cart-items__row > td.wc-block-cart-item__total::before { float: none !important; }
}
/* === Technische Daten in der Produktbeschreibung (table.nhc-desc-specs aus dem Import) === */
.nhc-product-description table.nhc-desc-specs,
.nhc-product-description table {
width: 100%; max-width: 820px; margin: .5rem 0 2rem; border-collapse: separate; border-spacing: 0;
border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: .95rem; background: #fff;
}
.nhc-product-description table th,
.nhc-product-description table td {
padding: .7rem 1.1rem; border: 0; border-top: 1px solid var(--border); vertical-align: top; line-height: 1.45;
}
.nhc-product-description table tr:first-child th,
.nhc-product-description table tr:first-child td { border-top: 0; }
.nhc-product-description table tr:nth-child(even) th,
.nhc-product-description table tr:nth-child(even) td { background: var(--bg-soft); }
.nhc-product-description table th {
width: 42%; text-align: left !important; font-weight: 500; color: var(--ink-soft);
border-right: 1px solid var(--border);
}
.nhc-product-description table td { font-weight: 600; color: var(--ink); }
@media (max-width: 540px) {
.nhc-product-description table { font-size: .88rem; }
.nhc-product-description table th,
.nhc-product-description table td { padding: .6rem .8rem; }
.nhc-product-description table th { width: 46%; }
}
/* Warenkorb: Titel in der Breadcrumb-Zeile, großer Seitentitel ausgeblendet */
body.woocommerce-cart main > .wp-block-post-title,
body.woocommerce-cart h1.wp-block-post-title { display: none !important; }
body.woocommerce-cart .nhc-cart-bar-wrap .nhc-shop-bar { margin-bottom: 1.5rem; }
body.woocommerce-cart .nhc-cart-bar-wrap .nhc-shop-bar-center h1 { font-size: 1.05rem !important; }
@media (max-width: 760px) {
body.woocommerce-cart .nhc-cart-bar-wrap .nhc-shop-bar { grid-template-columns: 1fr; grid-template-areas: "bc" "title"; }
body.woocommerce-cart .nhc-cart-bar-wrap .nhc-shop-bar-center { justify-self: start; }
body.woocommerce-cart .nhc-cart-bar-wrap .nhc-shop-bar-center h1 { position: static; width: auto; height: auto; clip: auto; font-size: 1.3rem !important; }
}
/* Zusammenfassung: Kopf rot mit weißer Schrift */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block { overflow: hidden; }
body.woocommerce-cart .wc-block-cart__totals-title {
margin: -1.5rem -1.5rem 1rem !important; padding: .95rem 1.5rem !important;
background: var(--brand) !important; color: #fff !important; font-size: 1.05rem !important;
}
/* Gutscheinfeld: Platz für das hochgeschobene Label, Text darunter */
body.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input,
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
height: 52px !important; padding: 1.35rem .85rem .35rem !important; line-height: 1.2 !important; box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input label {
left: .85rem !important; top: 50% !important; transform: translateY(-50%) !important; transform-origin: left top; transition: all .15s ease;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input.is-active label {
top: .45rem !important; transform: scale(.78) !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button { height: 52px !important; }
/* Warenkorb: Abstände unter der Titelzeile straffen, Liste + Zusammenfassung oben bündig */
body.woocommerce-cart main > .wp-block-post-content { margin-top: 0 !important; }
body.woocommerce-cart .wp-block-woocommerce-cart { margin-top: 0 !important; }
body.woocommerce-cart table.wc-block-cart-items { margin-top: 0 !important; }
body.woocommerce-cart .wc-block-cart__totals-title + .wc-block-components-totals-wrapper { border-top: 0 !important; padding-top: 0 !important; }
/* === Leerer Warenkorb === */
.nhc-empty-cart {
text-align: center; max-width: 640px; margin: 0 auto 3rem; padding: 2.75rem 2rem 2.5rem;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.nhc-empty-cart-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--brand); color: #fff; margin-bottom: 1.1rem; }
.nhc-empty-cart-title { font-size: 1.5rem !important; margin: 0 0 .5rem !important; letter-spacing: -.02em; }
.nhc-empty-cart-text { color: var(--ink-soft); margin: 0 auto 1.5rem !important; max-width: 30rem; line-height: 1.6; }
.nhc-empty-cart-text a { color: var(--brand); font-weight: 600; white-space: nowrap; }
.nhc-empty-cart-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 540px) { .nhc-empty-cart { padding: 2rem 1.25rem; } .nhc-empty-cart-actions .nhc-btn { flex: 1 1 100%; justify-content: center; } }
/* „Neu im Shop“ darunter: Karten wie im Shop */
.wp-block-woocommerce-empty-cart-block > h2.wp-block-heading { font-size: 1.35rem !important; margin: 0 0 1.25rem !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products { gap: 1.25rem; margin: 0 0 3rem !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1rem 1.25rem !important;
display: flex; flex-direction: column; transition: border-color var(--t-f), box-shadow var(--t-f); margin: 0 !important; box-sizing: border-box;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover { border-color: var(--brand); box-shadow: var(--sh-2); }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { aspect-ratio: 1; object-fit: contain; background: var(--bg-soft); border-radius: 10px; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { color: var(--ink) !important; font-weight: 700 !important; font-size: .95rem !important; line-height: 1.35; margin: .85rem 0 .35rem !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { font-weight: 800; color: var(--brand); margin-bottom: .85rem !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price small { display: block; font-weight: 400; color: var(--ink-subtle); font-size: .75rem; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { margin-top: auto !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a { width: 100%; justify-content: center; border-radius: 10px !important; }
@media (max-width: 760px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { display: grid !important; grid-template-columns: 1fr 1fr; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { width: auto !important; max-width: none !important; } }
/* Leerer Warenkorb: Produktraster fest 4/2 Spalten */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding: 0 !important; list-style: none; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product { width: auto !important; max-width: none !important; flex: none !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a { white-space: nowrap; font-size: .85rem !important; padding: .6rem .75rem !important; }
@media (max-width: 900px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 540px) {
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product { padding: .75rem .75rem 1rem !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { font-size: .85rem !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a { font-size: .78rem !important; padding: .55rem .5rem !important; }
}
/* ==========================================================
KASSE v2 (Okt. 2026)
========================================================== */
/* Titel in der Breadcrumb-Zeile (Shortcode), großer Seitentitel weg, schwebender Warenkorb weg */
main:has(.nhc-cart-bar-wrap) > .wp-block-post-title,
body.woocommerce-checkout h1.wp-block-post-title { display: none !important; }
body.woocommerce-checkout .nhc-cart-bar-wrap .nhc-shop-bar { margin-bottom: 1.5rem; }
body.woocommerce-checkout .nhc-cart-bar-wrap .nhc-shop-bar-center h1 { font-size: 1.05rem !important; }
body.woocommerce-checkout main > .wp-block-post-content,
body.woocommerce-checkout .wp-block-woocommerce-checkout { margin-top: 0 !important; }
body.woocommerce-checkout .nhc-fab-cart { display: none !important; }
@media (max-width: 760px) {
body.woocommerce-checkout .nhc-cart-bar-wrap .nhc-shop-bar { grid-template-columns: 1fr; grid-template-areas: "bc" "title"; }
body.woocommerce-checkout .nhc-cart-bar-wrap .nhc-shop-bar-center { justify-self: start; }
body.woocommerce-checkout .nhc-cart-bar-wrap .nhc-shop-bar-center h1 { position: static; width: auto; height: auto; clip: auto; font-size: 1.3rem !important; }
}
/* Bestellübersicht: Kopf rot, Text weiß */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { overflow: hidden; }
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
background: var(--brand) !important; color: #fff !important; margin: -1.5rem -1.5rem 1rem !important; padding: .95rem 1.5rem !important;
border: 0 !important; border-radius: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text { color: #fff !important; font-size: 1.05rem !important; font-weight: 800 !important; margin: 0 !important; }
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title .wc-block-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon { color: #fff !important; fill: #fff !important; }
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon svg { fill: #fff !important; }
/* Versand- und Zahlungsoptionen: einheitliche Karten, Beschreibung in derselben Karte */
body.woocommerce-checkout .wc-block-components-radio-control { display: grid; gap: .6rem; }
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
margin: 0 !important; border: 1.5px solid var(--border) !important; border-radius: 12px !important; background: #fff !important;
box-shadow: none !important; transition: border-color var(--t-f), background var(--t-f);
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option > .wc-block-components-radio-control__option { border: 0 !important; border-radius: 12px !important; background: transparent !important; }
body.woocommerce-checkout .wc-block-components-radio-control__option { padding: .95rem 1rem .95rem 3rem !important; min-height: 0 !important; }
body.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
border-color: var(--brand) !important; background: #fff8f8 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked { border: 0 !important; background: transparent !important; }
body.woocommerce-checkout .wc-block-components-radio-control__option::after,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option::after { display: none !important; }
body.woocommerce-checkout .wc-block-components-radio-control__input { left: 1rem !important; accent-color: var(--brand); }
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-payment-method-label { font-weight: 700 !important; color: var(--ink) !important; font-size: .95rem !important; }
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label { font-weight: 700 !important; color: var(--ink) !important; }
body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-description { color: var(--ink-subtle) !important; font-size: .82rem !important; }
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
border: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 1rem 1rem 3rem !important;
color: var(--ink-soft) !important; font-size: .88rem !important; line-height: 1.5; box-shadow: none !important;
}
/* AGB-Pflichtfeld */
body.woocommerce-checkout .wc-block-checkout__terms {
margin: 1rem 0 0 !important; padding: .9rem 1rem !important; border: 1.5px solid var(--border) !important; border-radius: 12px; background: var(--bg-soft);
}
body.woocommerce-checkout .wc-block-checkout__terms::before { display: none !important; }
body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox { margin: 0 !important; }
body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__label { font-size: .85rem !important; line-height: 1.5 !important; color: var(--ink-soft) !important; }
body.woocommerce-checkout .wc-block-checkout__terms a { color: var(--brand) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__input { accent-color: var(--brand); }
body.woocommerce-checkout .wc-block-checkout__terms:has(.has-error) { border-color: #dc2626 !important; background: #fff5f5; }
/* Desktop: per Skript direkt über dem Bestell-Button in der rechten Spalte platziert */
body.woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout { position: relative; }
body.woocommerce-checkout .wc-block-checkout__terms.nhc-terms-docked { position: absolute !important; z-index: 2; margin: 0 !important; background: #fff; box-sizing: border-box; }
/* Kasse v2 – Feinschliff: Kopf der Bestellübersicht bündig mit der Karte, kein innerer Rahmen bei Zahlungsarten */
body.woocommerce-checkout .wc-block-checkout__sidebar { padding: 1.5rem !important; overflow: hidden; }
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title { margin: -1.5rem -1.5rem 1rem !important; }
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked { box-shadow: none !important; outline: 0 !important; }
body.woocommerce-checkout .wc-block-components-radio-control > .wc-block-components-radio-control__option-checked { box-shadow: none !important; }
/* Kasse: der rote Kopf ragt per negativem Rand aus der Übersicht heraus – nicht abschneiden */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { overflow: visible !important; }
/* Kasse mobil: Aufklapp-Symbol im roten Kopf sichtbar (weißer Pfeil, kein weißer Kreis) */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon svg,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon svg path { fill: #fff !important; color: #fff !important; }
/* Kasse: Rahmenlinie um die ganze Versand-/Zahlungsauswahl entfernen (WooCommerce zeichnet sie per ::before/::after) */
body.woocommerce-checkout .wc-block-components-radio-control::before,
body.woocommerce-checkout .wc-block-components-radio-control::after { content: none !important; display: none !important; border: 0 !important; }
body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-components-shipping-rates-control__package { border: 0 !important; box-shadow: none !important; }
/* === Über uns + Service & Reparatur: volle Breite, kein doppelter Titel ===
Die Seiten bestehen aus eigenen Bausteinen (Shortcodes). Der WordPress-Seiteninhalt
begrenzt sonst auf 1240 px und rückt die roten Bänder ein. */
main:has(.nhc-about-page) > .wp-block-post-title { display: none !important; }
main:has(.nhc-about-page) > .wp-block-post-content { margin-top: 0 !important; }
.wp-block-post-content > .nhc-about-page,
.wp-block-post-content > .wp-block-shortcode > .nhc-about-page,
main:has(.nhc-about-page) .wp-block-post-content > .nhc-section,
main:has(.nhc-about-page) .wp-block-post-content > .nhc-help {
max-width: none !important; box-sizing: border-box;
margin-left: calc(var(--wp--style--root--padding-left, 2rem) * -1) !important;
margin-right: calc(var(--wp--style--root--padding-right, 2rem) * -1) !important;
}
.nhc-about-page .nhc-about-hero { margin-top: 1rem; }
.nhc-about-page > .nhc-about-section.nhc-container { padding-left: clamp(1rem,4vw,2rem); padding-right: clamp(1rem,4vw,2rem); }
.wp-block-post-content > .nhc-about-page + * { margin-top: 0 !important; }
/* Werte-Icons (statt Emojis) */
.nhc-about-value-icon svg { display: block; }
.nhc-about-values .nhc-about-value-icon {
display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 0;
}
/* Service: Hero-Buttons und Merkmale */
.nhc-service-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0 0 1.75rem; }
.nhc-service-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.nhc-service-chips span {
display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: .85rem; font-weight: 600;
}
.nhc-service-page .nhc-about-quote-card > svg { color: var(--brand); margin-bottom: .5rem; }
/* Service: Prüfpunkte als Kacheln im roten Band */
.nhc-service-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.nhc-service-check { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 1.25rem 1.2rem 1.35rem; }
.nhc-service-check-icon {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
background: #fff; color: var(--brand); margin-bottom: .85rem;
}
.nhc-service-check h3 { color: #fff !important; font-size: 1rem !important; margin: 0 0 .35rem !important; }
.nhc-service-check p { color: rgba(255,255,255,.85); font-size: .88rem; line-height: 1.5; margin: 0; }
@media (max-width: 1000px) { .nhc-service-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .nhc-service-checks { grid-template-columns: 1fr; } }
/* Service: Inzahlungnahme */
.nhc-service-trade {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center;
background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem 2.25rem;
}
.nhc-service-trade h2 { font-size: 1.5rem !important; margin: .5rem 0 .75rem !important; }
.nhc-service-trade p { color: var(--ink-soft); line-height: 1.7; margin: 0; }
.nhc-service-trade-actions { display: flex; flex-direction: column; gap: .75rem; }
.nhc-service-trade-actions .nhc-btn { justify-content: center; }
@media (max-width: 800px) { .nhc-service-trade { grid-template-columns: 1fr; padding: 1.5rem; } }
@media (max-width: 540px) { .nhc-service-hero-actions .nhc-btn { flex: 1 1 100%; justify-content: center; } }
/* === Titel mittig in der Breadcrumb-Zeile – alle Seiten (nhc_title_bar) === */
.nhc-title-bar .nhc-shop-bar { margin-bottom: 1.5rem; }
.nhc-shop-bar-center .nhc-bar-title { margin: 0; font-size: 1.05rem !important; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.nhc-shop-bar-end { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.nhc-title-bar + * { margin-top: 0 !important; }
main:has(.nhc-title-bar) > .wp-block-post-content { margin-top: 0 !important; }
@media (max-width: 760px) {
.nhc-title-bar .nhc-shop-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bc bc" "title end"; }
.nhc-title-bar .nhc-shop-bar > .nhc-breadcrumb { grid-area: bc; }
.nhc-title-bar .nhc-shop-bar-center { grid-area: title; justify-self: start; }
.nhc-title-bar .nhc-shop-bar-end { grid-area: end; }
.nhc-title-bar .nhc-shop-bar-center .nhc-bar-title { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; font-size: 1.3rem !important; }
}
/* === Über uns + Service: farbige Bänder über die volle Bildschirmbreite (wie auf der Startseite) === */
main:has(.nhc-about-page) { overflow-x: clip; }
.nhc-about-page .nhc-about-hero,
.nhc-about-page .nhc-about-section--brand,
main:has(.nhc-about-page) .nhc-help {
margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
width: auto !important; max-width: none !important; border-radius: 0 !important;
}
.nhc-about-page .nhc-about-hero { margin-top: 0 !important; }
main:has(.nhc-about-page) .nhc-help { margin-bottom: 0 !important; }
/* Mein Konto (abgemeldet): Titel nur für Screenreader, wie gewünscht */
body.woocommerce-account .nhc-title-bar .nhc-bar-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Beratungsbox im Seiteninhalt (Service): gleiche Spezifität wie die ältere Regel, damit volle Breite greift */
main:has(.nhc-about-page) .wp-block-post-content > .nhc-help { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: auto !important; max-width: none !important; }
/* ==========================================================
Kopfbereiche der Unterseiten (Über uns, Service, Bewertungen, B2B-Shop, 404)
einheitlich: rot, volle Bildschirmbreite, gleiche Höhe auf dem Desktop
========================================================== */
main:has(.nhc-reviews-hero, .nhc-b2b-hero) { overflow-x: clip; }
.nhc-about-hero,
.nhc-reviews-hero,
.nhc-b2b-hero,
.nhc-nf-hero {
box-sizing: border-box !important; min-height: 460px;
display: flex !important; flex-direction: column; justify-content: center; align-items: center;
padding: 3.5rem clamp(1rem,4vw,2rem) !important; margin-top: 0 !important;
text-align: center; color: #fff;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0,0,0,.22), transparent 50%),
linear-gradient(135deg, #CA0000 0%, #8a0000 100%) !important;
border: 0 !important; border-radius: 0 !important;
}
.nhc-reviews-hero, .nhc-b2b-hero {
margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
width: auto !important; max-width: none !important;
}
.nhc-about-hero > *, .nhc-reviews-hero > *, .nhc-b2b-hero > * { width: 100%; }
.nhc-about-hero-logo { display: none !important; } /* Logo steht bereits im Header – gleiche Höhe wie die anderen Kopfbereiche */
/* gemeinsame Typografie */
.nhc-about-hero h1, .nhc-reviews-hero h1, .nhc-b2b-hero h1, .nhc-nf-hero .nhc-nf-title {
color: #fff !important; font-size: clamp(2rem,4.2vw,3rem) !important; line-height: 1.08 !important;
letter-spacing: -.03em; margin: .5rem 0 1rem !important;
}
.nhc-reviews-hero .nhc-section-eyebrow, .nhc-reviews-hero .nhc-section-eyebrow::before { color: rgba(255,255,255,.9) !important; }
.nhc-reviews-hero .nhc-section-eyebrow::before { background: #fff !important; opacity: .7; }
.nhc-reviews-hero-lead, .nhc-b2b-hero p { color: rgba(255,255,255,.88) !important; max-width: 660px; margin-left: auto !important; margin-right: auto !important; }
.nhc-b2b-hero p strong, .nhc-reviews-hero-lead strong { color: #fff; }
.nhc-reviews-stars { color: #ffd166 !important; font-size: 1.6rem !important; margin-bottom: .5rem !important; }
.nhc-reviews-hero-stats > div { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: none !important; }
.nhc-reviews-hero-stats strong { color: #fff !important; }
.nhc-reviews-hero-stats span { color: rgba(255,255,255,.8) !important; }
/* B2B-Shop: Box-Layout aufgelöst, Kopf oben bündig an der Titelzeile */
.nhc-b2b { padding-top: 0 !important; }
.nhc-b2b-hero { margin-bottom: 2.5rem !important; }
.nhc-b2b-hero .nhc-b2b-eyebrow { margin-bottom: .25rem; }
@media (max-width: 900px) {
.nhc-about-hero, .nhc-reviews-hero, .nhc-b2b-hero, .nhc-nf-hero { min-height: 0; padding: 2.75rem 1rem !important; }
}
/* ==========================================================
Kein weißer Streifen mehr zwischen Seitenende und Footer
========================================================== */
.wp-site-blocks > footer,
footer.wp-block-template-part { margin-block-start: 0 !important; }
main > .wp-block-post-content { margin-bottom: 0 !important; }
/* Reine Textseiten behalten etwas Luft im Inhalt, damit der Text nicht am Footer klebt */
main > .wp-block-post-content { padding-bottom: 3.5rem; }
/* Endet der Inhalt mit einem vollflächigen Bereich, schließt der Footer direkt an */
main > .wp-block-post-content:has(> :is(.nhc-about-page, .nhc-help, .nhc-section, .nhc-kontakt, .nhc-reviews-page, .nhc-b2b, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout):last-child),
main > .wp-block-post-content:has(> .wp-block-shortcode:last-child > :is(.nhc-about-page, .nhc-help, .nhc-section)) { padding-bottom: 0; }
.nhc-about-page, .nhc-reviews-page { margin-bottom: 0 !important; }
.nhc-about-page > :last-child { margin-bottom: 0 !important; }
.nhc-nf-hero > .nhc-nf-hero-inner { width: 100%; }
/* Kopfbereiche: gemeinsame Höhe = höchster Inhalt (Bewertungen / 404) */
@media (min-width: 901px) { .nhc-about-hero, .nhc-reviews-hero, .nhc-b2b-hero, .nhc-nf-hero { min-height: 540px; } }
/* Kopfbereiche: Feinschliff */
.nhc-b2b-hero > .nhc-b2b-eyebrow { width: auto !important; align-self: center; }
@media (max-width: 540px) {
.nhc-reviews-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem !important; }
.nhc-reviews-hero-stats > div { padding: .75rem .4rem !important; }
.nhc-reviews-hero-stats strong { font-size: 1.25rem !important; }
.nhc-reviews-hero-stats span { font-size: .62rem !important; letter-spacing: .02em !important; }
}
/* Über uns: „Unsere Werte“ auf weißem Hintergrund statt rotem Band */
.nhc-about-section--brand:has(.nhc-about-values) { background: #fff !important; color: var(--ink); }
.nhc-about-section--brand:has(.nhc-about-values) h2 { color: var(--ink) !important; }
.nhc-about-section--brand:has(.nhc-about-values) .nhc-section-eyebrow { color: var(--brand) !important; }
.nhc-about-values > div { background: #fff !important; border: 1px solid #ececf0; box-shadow: 0 6px 20px rgba(15,17,21,.06); backdrop-filter: none; }
.nhc-about-values h3 { color: var(--ink) !important; }
.nhc-about-values p { color: #555b66 !important; }
.nhc-about-values .nhc-about-value-icon { background: var(--brand-50) !important; border-color: transparent !important; color: var(--brand) !important; }
/* Passendes Zubehör: weitere Teile aufklappen */
.nhc-more-products { margin-top: 1.5rem; }
.nhc-more-products > summary { list-style: none; cursor: pointer; display: inline-flex; margin-bottom: 1.5rem; }
.nhc-more-products > summary::-webkit-details-marker { display: none; }
.nhc-more-products[open] > summary { display: none; }
/* ==========================================================
Garnfarben: Farbmuster unter der Farbnummer-Auswahl
========================================================== */
.nhc-garn { margin: .85rem 0 .25rem; max-width: 520px; }
.nhc-garn-current { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.nhc-garn-preview { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 1px solid rgba(15,17,21,.15); box-shadow: inset 0 0 0 3px #fff; background: #f3f4f6; }
.nhc-garn-preview.is-empty { background: repeating-linear-gradient(45deg, #f3f4f6 0 5px, #e5e7eb 5px 10px); }
.nhc-garn-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px;
max-height: 232px; overflow-y: auto; padding: 8px; border: 1px solid #ececf0; border-radius: 12px; background: #fff;
}
.nhc-garn-sw {
aspect-ratio: 1; width: 100%; padding: 0; border-radius: 50%; cursor: pointer;
background: var(--c, #fff); border: 1px solid rgba(15,17,21,.14); transition: transform .12s ease, box-shadow .12s ease;
}
.nhc-garn-sw:hover { transform: scale(1.12); }
.nhc-garn-sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nhc-garn-sw.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); transform: scale(1.06); }
.nhc-garn-sw.is-nocolor { border-radius: 8px; border-style: dashed; display: flex; align-items: center; justify-content: center; }
.nhc-garn-sw.is-nocolor span { font-size: .58rem; font-weight: 700; color: #555b66; line-height: 1; }
.nhc-garn-note { margin: .5rem 0 0; font-size: .75rem; line-height: 1.4; color: #6b7280; }
/* Garnfarben: Beschriftung über der Auswahl, Auswahl volle Breite */
table.variations tr:has(.nhc-garn), table.variations tr:has(.nhc-garn) > th, table.variations tr:has(.nhc-garn) > td { display: block; width: 100%; text-align: left; }
table.variations tr:has(.nhc-garn) > th { padding: 0 0 .45rem !important; }
table.variations tr:has(.nhc-garn) > td { padding: 0 !important; }
table.variations tr:has(.nhc-garn) select { width: 100%; max-width: 520px; }
/* Warenkorb + Kasse: gewählte Variante (z. B. Farbnummer) sichtbar, lange Kurzbeschreibung bleibt ausgeblendet */
.woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata:has(.wc-block-components-product-details),
.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata:has(.wc-block-components-product-details),
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata:has(.wc-block-components-product-details) { display: block !important; margin-top: .3rem !important; }
.wc-block-components-product-metadata:has(.wc-block-components-product-details) .wc-block-components-product-metadata__description { display: none !important; }
.wc-block-components-product-details { margin: 0 !important; padding: 0 !important; list-style: none !important; font-size: .82rem; color: #555b66; }
.wc-block-components-product-details li { margin: 0 !important; }
.wc-block-components-product-details__name { font-weight: 600; }
/* Garnfarben: nur Farbfelder – Auswahlliste bleibt für WooCommerce im Formular, aber unsichtbar */
table.variations tr:has(.nhc-garn) select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; padding: 0 !important; border: 0 !important; }
.nhc-garn { margin-top: .25rem; }
/* Service: „Wartung & Inspektion“ auf weißem Hintergrund statt rotem Band (wie „Unsere Werte“) */
.nhc-about-section--brand:has(.nhc-service-checks) { background: #fff !important; color: var(--ink); }
.nhc-about-section--brand:has(.nhc-service-checks) h2 { color: var(--ink) !important; }
.nhc-about-section--brand:has(.nhc-service-checks) .nhc-section-eyebrow { color: var(--brand) !important; }
.nhc-service-check { background: #fff !important; border: 1px solid #ececf0 !important; box-shadow: 0 6px 20px rgba(15,17,21,.06); }
.nhc-service-check h3 { color: var(--ink) !important; }
.nhc-service-check p { color: #555b66 !important; }
.nhc-service-check-icon { background: var(--brand-50) !important; border-color: transparent !important; color: var(--brand) !important; }
/* ==========================================================
Für Gewerbekunden: Ablauf in Schritten
========================================================== */
.nhc-gewerbe-hint { margin: 1.5rem 0 0; font-size: .85rem; color: #6b7280; }
.nhc-gewerbe-flow { background: var(--bg-soft, #f7f7f9); margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 4rem clamp(1rem,4vw,2rem); }
.nhc-gewerbe-flow h2 { margin: .5rem 0 2rem; }
.nhc-gewerbe-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.nhc-gewerbe-steps li { position: relative; background: #fff; border: 1px solid #ececf0; border-radius: 14px; padding: 1.4rem 1.25rem 1.5rem; box-shadow: 0 6px 20px rgba(15,17,21,.05); }
.nhc-gewerbe-steps li:not(:last-child)::after { content: ""; position: absolute; top: 2.45rem; right: -1rem; width: 1rem; height: 2px; background: var(--brand); opacity: .35; }
.nhc-gewerbe-step-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: .9rem; }
.nhc-gewerbe-steps h3 { font-size: 1.05rem !important; margin: 0 0 .4rem !important; color: var(--ink) !important; }
.nhc-gewerbe-steps p { margin: 0; font-size: .9rem; line-height: 1.55; color: #555b66; }
@media (max-width: 1000px) { .nhc-gewerbe-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nhc-gewerbe-steps li::after { display: none; } }
@media (max-width: 560px) { .nhc-gewerbe-steps { grid-template-columns: 1fr; } }
.nhc-gewerbe-page .nhc-about-quote-card > svg { color: var(--brand); margin-bottom: .5rem; }
.nhc-gewerbe-cta { margin: 1.25rem 0 0; }
/* Farbauswahl: Metall, transparent, Rauch, mehrfarbig, Nummern-Felder */
.nhc-garn-sw.is-light { border-color: rgba(15,17,21,.22); }
.nhc-garn-sw.is-metal { background: linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.28) 100%), var(--c); }
.nhc-garn-sw.is-clear { background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 10px 10px; }
.nhc-garn-sw.is-smoke { background: linear-gradient(rgba(70,66,62,.6), rgba(70,66,62,.6)), repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 10px 10px; }
.nhc-garn-sw.is-multi { background: conic-gradient(#e53935, #fbc02d, #43a047, #1e88e5, #8e24aa, #e53935); }
.nhc-garn-grid:has(.is-nocolor) { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.nhc-garn-sw.is-nocolor { aspect-ratio: auto; min-height: 34px; padding: 0 4px; }
.nhc-garn-sw.is-nocolor span { font-size: .72rem; }
.nhc-garn-sw.is-nocolor.is-active { background: var(--brand-50); }
/* Promo-Leiste: eigene Icons für Telefon und E-Mail (statt Emojis) */
.nhc-promo-contact a { display: inline-flex; align-items: center; gap: .4rem; }
.nhc-promo-ico { flex: none; display: block; opacity: .9; }
/* ==========================================================
Eigene Linien-Icons (inc/icons.php) statt Emojis
========================================================== */
.nhc-ico { display: inline-block; flex: none; vertical-align: -.18em; }
.nhc-btn .nhc-ico, .nhc-wish-add-text .nhc-ico { vertical-align: -.2em; margin-right: .1rem; }
dt .nhc-ico { color: var(--brand); margin-right: .25rem; }
.nhc-pill .nhc-ico { vertical-align: -.15em; }
.nhc-news-image--placeholder .nhc-ico, .nhc-news-empty-icon .nhc-ico { color: var(--ink-subtle); opacity: .7; }
.nhc-mp-feature-icon { display: flex; align-items: center; justify-content: center; color: var(--brand); }
.nhc-service-icon .nhc-ico { display: block; }
.nhc-drawer a .nhc-ico { margin-right: .35rem; vertical-align: -.2em; }
.nhc-about-video-caption .nhc-ico { color: var(--brand); }
/* Mobiles Menü: Einträge mit Icon linksbündig, Pfeil bleibt rechts */
.nhc-drawer-nav a:has(> .nhc-ico) { justify-content: flex-start !important; gap: .55rem; }
.nhc-drawer-nav a:has(> .nhc-ico)::after { margin-left: auto; }
.nhc-drawer-nav a > .nhc-ico { margin: 0; color: var(--brand); }
/* Mega-Menü: Markenlogo-Vorschau rechts (ersetzt beim Überfahren der Marken die Produktkarte) */
.nhc-meganav .nhc-mp-col-feature.is-brand > .nhc-mp-feature { display: none !important; }
.nhc-mp-brandcard { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); text-decoration: none; animation: nhcBrandIn .18s ease; }
.nhc-mp-brandcard[hidden] { display: none; }
.nhc-mp-brandcard:hover { border-color: var(--brand); text-decoration: none; }
.nhc-mp-brandcard-logo { flex: 1; min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.5rem; background: #fff; border-bottom: 1px solid var(--border); }
.nhc-mp-brandcard-logo img { max-width: 100%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.nhc-mp-brandcard-logo img[hidden], .nhc-mp-brandcard-name[hidden] { display: none; }
.nhc-mp-brandcard-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
@keyframes nhcBrandIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nhc-mp-brandcard { animation: none; } }
/* Varianten als Karten (Stickmodul ja/nein, Größen, Nähfüße …) – Auswahlliste bleibt unsichtbar im Formular */
table.variations tr:has(.nhc-optcards), table.variations tr:has(.nhc-optcards) > th, table.variations tr:has(.nhc-optcards) > td { display: block; width: 100%; text-align: left; }
table.variations tr:has(.nhc-optcards) > th { padding: 0 0 .45rem !important; }
table.variations tr:has(.nhc-optcards) > td { padding: 0 0 .75rem !important; }
table.variations tr:has(.nhc-optcards) select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; padding: 0 !important; border: 0 !important; }
.nhc-optcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; max-width: 560px; }
.nhc-optcard {
display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; cursor: pointer;
padding: .8rem 1rem; border: 1.5px solid #e3e4e8; border-radius: 12px; background: #fff; color: var(--ink);
font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.3; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.nhc-optcard:hover { border-color: var(--brand); }
.nhc-optcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nhc-optcard.is-active { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand) inset; }
.nhc-optcard:disabled { opacity: .4; cursor: not-allowed; }
.nhc-optcard-price { font-size: .85rem; font-weight: 700; color: var(--brand); }
.nhc-price-from { font-weight: 500; font-size: .85em; margin-right: .1em; }
.nhc-mp-brandcard-logo { border-bottom: 0; }
/* Mega-Menü: Marken-Karte nur beim Überfahren einer Marke (allgemeine Link-Regel überschrieb [hidden]) */
.nhc-meganav .nhc-mp-col-feature .nhc-mp-brandcard[hidden] { display: none !important; }
.nhc-meganav .nhc-mp-col-feature .nhc-mp-brandcard:not([hidden]) { display: flex !important; }
/* Produktseite: Preis/Menge/Warenkorb bündig mit den Varianten; Vergleichen + Merken gleich groß */
.nhc-product-buybox form.variations_form { display: block !important; }
.nhc-product-buybox .single_variation_wrap { margin-left: 0 !important; padding-left: 0 !important; }
.nhc-buybox-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nhc-buybox-actions > .nhc-btn { width: 100%; height: 44px; min-height: 44px; padding: 0 1rem !important; display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem;
font-size: .95rem !important; font-weight: 600 !important; line-height: 1 !important; border-radius: 999px; margin: 0 !important; }
/* Mega-Menü: Angebotspreis wie im Shop (alter Preis klein durchgestrichen) */
.nhc-mp-feature-price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nhc-mp-feature-price del { color: var(--ink-subtle); font-weight: 500; font-size: .85em; margin-right: .35em; }
.nhc-mp-feature-price ins { text-decoration: none; }
.nhc-mp-feature-price small { color: var(--ink-subtle); font-weight: 500; font-size: .7em; }
/* Anmeldeseite: Formular direkt unter der Titelzeile (kein doppelter Abstand) */
body.woocommerce-account:not(.logged-in) .woocommerce,
body.woocommerce-account:not(.logged-in) .nhc-auth-wrap { margin-top: 0 !important; }
/* Produktkacheln: „Zum Produkt“ und „Vergleichen“ gleich groß nebeneinander (schmale Kacheln: untereinander) */
.woocommerce ul.products li.product .button.nhc-loop-link,
.woocommerce ul.products li.product .nhc-cmp-add {
display: inline-flex !important; align-items: center; justify-content: center;
width: calc(50% - .4rem); height: 40px; box-sizing: border-box;
padding: 0 .6rem !important; margin: 0 !important; vertical-align: middle;
font-size: .85rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap;
border-radius: var(--r-pill) !important;
}
.woocommerce ul.products li.product .button.nhc-loop-link { margin-right: .3rem !important; }
.woocommerce ul.products li.product .nhc-cmp-add { border: 1px solid var(--border); }
@media (max-width: 600px) {
.woocommerce ul.products li.product .button.nhc-loop-link,
.woocommerce ul.products li.product .nhc-cmp-add { width: 100%; margin: 0 0 .4rem !important; }
}
/* Schmale Kacheln (z. B. Shop mit Filterleiste): Buttons untereinander statt Text über den Rand */
.woocommerce ul.products li.product { container-type: inline-size; }
@container (max-width: 230px) {
.woocommerce ul.products li.product .button.nhc-loop-link,
.woocommerce ul.products li.product .nhc-cmp-add { width: 100%; margin: 0 0 .4rem !important; }
}
/* ============================================
GERMANIZED – an das Shop-Design angepasst
============================================ */
/* Kasse: Theme hatte den Bestellbutton in die Seitenleiste gelegt; Germanized bringt dort einen eigenen mit → nur den behalten */
.wc-gzd-checkout-has-custom-submit .wc-block-checkout__sidebar > .wc-block-checkout__actions { display: none !important; }
.wc-gzd-checkout .is-large .wc-gzd-checkout-submit { margin-top: 0 !important; }
.wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-checkout__actions { padding: 0 !important; margin-top: 1rem !important; }
/* AGB-/Widerrufs-Checkbox als Karte wie die übrigen Schritte */
.woocommerce-checkout .wc-gzd-checkboxes {
background: #fff; border: 1px solid var(--border, #e5e6ea); border-radius: 14px; padding: 1.25rem 1.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,.04); margin-top: 1.25rem;
}
.woocommerce-checkout .wc-gzd-checkboxes > div + div { margin-top: .75rem; }
.woocommerce-checkout .wc-gzd-checkbox label { display: flex !important; align-items: flex-start; gap: .65rem; font-size: .9rem; line-height: 1.5; color: var(--ink, #111); }
.woocommerce-checkout .wc-gzd-checkbox .wc-block-components-checkbox__input { flex-shrink: 0; margin-top: .15rem; }
.woocommerce-checkout .wc-gzd-checkbox a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
/* Gesetzliche Gewährleistung (EU-Hinweis): kompakt, Klick öffnet das große Label */
.wc-gzd-legal-guarantee-checkout { display: flex; align-items: center; }
.wc-gzd-legal-guarantee-label-preview .wc-gzd-popover-trigger { display: inline-block; line-height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.12); transition: transform .15s ease; }
.wc-gzd-legal-guarantee-label-preview .wc-gzd-popover-trigger:hover { transform: translateY(-1px); }
img.wc-gzd-legal-guarantee-image-preview { width: 150px !important; max-width: 150px !important; height: auto !important; display: block; }
.wc-gzd-popover { border: 0; border-radius: 14px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-width: min(560px, 92vw); }
.wc-gzd-popover::backdrop { background: rgba(15,17,21,.55); }
.wc-gzd-popover-inner { padding: 1rem 1.25rem 1.25rem; }
.wc-gzd-popover-image { width: 100% !important; height: auto !important; }
/* Footer: Label als schmale Leiste unter dem roten Footer */
.wc-gzd-legal-guarantee-footer { background: #8A0000; padding: 1rem 16px 1.5rem; display: flex; justify-content: center; }
.wc-gzd-legal-guarantee-footer img.wc-gzd-legal-guarantee-image-preview { width: 120px !important; max-width: 120px !important; }
/* Produktseite: Pflichtangaben unter dem Preis */
.nhc-product-buybox .legal-price-info { margin: .15rem 0 .5rem; }
.nhc-product-buybox .legal-price-info p { margin: 0; font-size: .82rem; color: var(--ink-subtle, #777); }
.nhc-product-buybox .legal-price-info .wc-gzd-additional-info + .wc-gzd-additional-info::before { content: " · "; }
.nhc-product-buybox .legal-price-info a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.nhc-product-buybox .legal-price-info a:hover { color: var(--brand); }
/* Grundpreis in Kacheln/Warenkorb dezent */
.wc-gzd-unit-price, .price-unit { font-size: .78rem; color: var(--ink-subtle, #777); font-weight: 500; }
img.wc-gzd-legal-guarantee-image-preview { min-width: 0 !important; }
/* Widerrufsbutton (Germanized, global nach dem Footer) + Gewaehrleistungs-Label: eine dunkle Leiste */
body > p.eu-owb-order-withdraw-from-contract-button { margin: 0 !important; padding: 1.25rem 16px .75rem; background: #8A0000; text-align: center; }
body > p.eu-owb-order-withdraw-from-contract-button .button {
display: inline-flex !important; align-items: center; height: 40px; padding: 0 1.25rem !important; border-radius: 999px !important;
background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.7) !important;
font-size: .88rem !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important;
}
body > p.eu-owb-order-withdraw-from-contract-button .button:hover { background: #fff !important; color: #8A0000 !important; border-color: #fff !important; }
body > p.eu-owb-order-withdraw-from-contract-button + .wc-gzd-legal-guarantee-footer { padding-top: .5rem; }
.wc-gzd-legal-guarantee-footer { margin: 0 !important; border: 0 !important; }
body > p.eu-owb-order-withdraw-from-contract-button + * { margin-top: 0 !important; }
/* Footer-Link „Gesetzliche Gewährleistung“ + Popup mit dem EU-Label (ersetzt das Germanized-Label in der Leiste unten) */
.nhc-footer-legal .nhc-footer-legal-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.nhc-footer-legal .nhc-footer-legal-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.nhc-lg-pop { border: 0; border-radius: 14px; padding: 2.75rem 1.25rem 1.25rem; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); width: min(560px, 92vw); max-height: 92vh; overflow: auto; }
.nhc-lg-pop::backdrop { background: rgba(15,17,21,.6); }
.nhc-lg-pop img { display: block; width: 100%; height: auto; }
.nhc-lg-close { position: absolute; top: .6rem; right: .6rem; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border, #e5e6ea); background: #fff; color: var(--ink, #111); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nhc-lg-close:hover { color: var(--brand); border-color: var(--brand); }
.nhc-footer-legal .nhc-footer-legal-btn { color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 500; position: relative; padding: .15rem .35rem; transition: color .15s ease; text-decoration: none; }
.nhc-footer-legal .nhc-footer-legal-btn:hover { color: #fff; text-decoration: none; }
.nhc-footer-legal a + .nhc-footer-legal-btn::before, .nhc-footer-legal .nhc-footer-legal-btn + a::before { content: "\00B7"; position: absolute; left: -.85rem; color: rgba(255,255,255,.35); }
@media (max-width: 600px) { .nhc-footer-legal .nhc-footer-legal-btn { font-size: .8rem; } }
.nhc-footer-legal .nhc-footer-legal-btn { color: rgba(255,255,255,.92); }
/* Kasse: AGB-Checkbox + Gewaehrleistungs-Hinweis jetzt in der Bestelluebersicht (rechts bzw. mobil unten) */
.wc-block-checkout__sidebar .wc-gzd-legal-guarantee-checkout {
border: 0 !important; border-top: 1px solid var(--border, #e5e6ea) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
padding: .9rem 0 !important; margin: .5rem 0 0 !important; min-height: 0 !important;
}
.wc-block-checkout__sidebar .wc-gzd-legal-guarantee-checkout > div { width: 100%; }
.wc-block-checkout__sidebar .wc-gzd-legal-guarantee-label-preview { display: flex !important; align-items: center; gap: .85rem; height: auto !important; }
.wc-block-checkout__sidebar .wc-gzd-legal-guarantee-label-preview .wc-gzd-popover-trigger { flex: 0 0 auto; }
.wc-block-checkout__sidebar img.wc-gzd-legal-guarantee-image-preview { width: 56px !important; max-width: 56px !important; }
.wc-block-checkout__sidebar .wc-gzd-legal-guarantee-label-preview::after {
content: "Ihre gesetzlichen Gewährleistungsrechte – mindestens zwei Jahre für Waren aus der EU. Zum Vergrößern auf das Label klicken.";
font-size: .8rem; line-height: 1.45; color: var(--ink-subtle, #6b6f76);
}
.wc-block-checkout__sidebar .wc-gzd-checkboxes {
border: 0 !important; border-top: 1px solid var(--border, #e5e6ea) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
padding: .9rem 0 0 !important; margin: 0 !important;
}
.wc-block-checkout__sidebar .wc-gzd-checkbox label { font-size: .85rem !important; line-height: 1.5 !important; }
.wc-block-checkout__sidebar .wc-gzd-checkout-submit .wc-block-checkout__actions { margin-top: .9rem !important; }
.wc-block-checkout__sidebar .wc-gzd-checkout-submit .wc-block-components-totals-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
/* mobil: Seitenleiste steht unter dem Formular – Innenabstand wie die Karten */
@media (max-width: 760px) {
.wc-block-checkout__sidebar .wc-gzd-legal-guarantee-checkout,
.wc-block-checkout__sidebar .wc-gzd-checkboxes { padding-left: 0 !important; padding-right: 0 !important; }
.wc-block-checkout__sidebar .wc-gzd-checkout-submit { padding: .5rem 0 0 !important; }
}
.wc-block-checkout__sidebar .wc-gzd-checkout-submit .wc-block-checkout__actions,
.wc-block-checkout__sidebar .wc-gzd-checkout-submit .wc-block-components-totals-wrapper:empty { border-top: 0 !important; }
@media (max-width: 760px) { .wc-block-checkout__sidebar .wc-gzd-legal-guarantee-checkout { border-top: 0 !important; margin-top: 0 !important; } }
/* Produktbewertung: Formular nur für Käufer */
.nhc-review-verified { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; font-size: .78rem; color: #1a7f37; font-weight: 600; }
.nhc-review-verified a { color: var(--ink-subtle); font-weight: 500; }
.nhc-review-notice { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: #e9f7ee; color: #1a7f37; font-weight: 600; }
.nhc-review-form-title { margin: 0 0 1rem; font-size: 1.1rem; }
.nhc-review-form { display: flex; flex-direction: column; gap: .6rem; text-align: left; }
.nhc-rate { border: 0; padding: 0; margin: 0 0 .5rem; }
.nhc-rate legend { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; padding: 0; }
.nhc-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.nhc-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nhc-rate-stars label { font-size: 2rem; line-height: 1; color: var(--border-strong, #cfd2d8); cursor: pointer; transition: color .1s ease, transform .1s ease; }
.nhc-rate-stars label:hover, .nhc-rate-stars label:hover ~ label, .nhc-rate-stars input:checked ~ label { color: var(--warning, #f5a623); }
.nhc-rate-stars label:hover { transform: scale(1.12); }
.nhc-rate-stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.nhc-review-label { font-weight: 600; font-size: .92rem; }
.nhc-review-form textarea { width: 100%; box-sizing: border-box; padding: .85rem 1rem; border: 1px solid var(--border, #e5e6ea); border-radius: 12px; font: inherit; resize: vertical; }
.nhc-review-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(202,0,0,.12); }
.nhc-review-error { margin: 0; padding: .6rem .85rem; border-radius: 10px; background: #fdecec; color: #a00000; font-size: .85rem; font-weight: 600; }
.nhc-review-hint { margin: 0; font-size: .8rem; color: var(--ink-subtle); }
.nhc-review-form .nhc-btn { align-self: flex-start; }
.nhc-review-cta p.nhc-review-error { color: #a00000; }
/* ============================================
FILTER-PANEL v2 (Shop, Kategorien, Angebote)
============================================ */
.nhc-filter--v2 { padding: 0; overflow: hidden; }
.nhc-filter--v2 .nhc-filter-form { padding: 0 1.25rem; }
.nhc-filter--v2 .nhc-filter-head { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 0 .9rem; border-bottom: 1px solid var(--border); }
.nhc-filter--v2 .nhc-filter-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; }
.nhc-filter--v2 .nhc-filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; }
.nhc-filter--v2 .nhc-filter-clear { font-size: .82rem; color: var(--brand); text-decoration: none; font-weight: 600; white-space: nowrap; }
.nhc-filter--v2 .nhc-filter-clear:hover { text-decoration: underline; }
/* Aktive Filter */
.nhc-filter--v2 .nhc-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem 0 0; }
.nhc-filter--v2 .nhc-filter-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .32rem .45rem .32rem .7rem; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: .8rem; font-weight: 600; text-decoration: none; transition: background var(--t-f); }
.nhc-filter--v2 .nhc-filter-chip span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(202,0,0,.14); font-size: .85rem; line-height: 1; }
.nhc-filter--v2 .nhc-filter-chip:hover { background: var(--brand); color: #fff; }
.nhc-filter--v2 .nhc-filter-chip:hover span { background: rgba(255,255,255,.25); }
/* Abschnitte */
.nhc-filter--v2 .nhc-filter-block { margin: 0 !important; padding: 1rem 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--border); }
.nhc-filter--v2 .nhc-filter-block--search { padding-top: 1rem !important; }
.nhc-filter--v2 details.nhc-filter-block > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; margin: -.25rem 0; padding: .25rem 0; }
.nhc-filter--v2 details.nhc-filter-block > summary::-webkit-details-marker { display: none; }
.nhc-filter--v2 details.nhc-filter-block[open] > summary { margin-bottom: .6rem; }
.nhc-filter--v2 .nhc-filter-block h3 { margin: 0 !important; font-size: .75rem !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--ink-subtle) !important; font-weight: 700 !important; }
.nhc-filter--v2 summary:hover h3 { color: var(--ink) !important; }
.nhc-filter--v2 .nhc-filter-chev { color: var(--ink-subtle); transition: transform .2s ease; flex-shrink: 0; }
.nhc-filter--v2 details:not([open]) .nhc-filter-chev { transform: rotate(-90deg); }
/* Suche */
.nhc-filter--v2 .nhc-filter-searchwrap { position: relative; display: block; }
.nhc-filter--v2 .nhc-filter-searchwrap svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-subtle); pointer-events: none; }
.nhc-filter--v2 .nhc-filter-search { padding-left: 2.3rem; height: 42px; }
/* Listen */
.nhc-filter--v2 ul.nhc-filter-opts { list-style: none !important; margin: 0 !important; padding: 0 !important; max-height: none; }
.nhc-filter--v2 .nhc-filter-opts li { margin: 0 !important; padding: 0 !important; }
.nhc-filter--v2 .nhc-filter-opts li::before, .nhc-filter--v2 .nhc-filter-opts li::marker { content: none; }
.nhc-filter--v2 .nhc-filter-opts li.is-more { display: none; }
.nhc-filter--v2 .is-expanded .nhc-filter-opts li.is-more,
.nhc-filter--v2 .is-searching .nhc-filter-opts li.is-more { display: block; }
.nhc-filter--v2 .nhc-filter-opts li[hidden] { display: none !important; }
.nhc-filter--v2 .nhc-filter-opts a { display: flex; align-items: center; gap: .6rem; padding: .42rem .5rem; margin: 0 -.5rem; border-radius: var(--r-sm); color: var(--ink); font-size: .9rem; line-height: 1.35; text-decoration: none; transition: background var(--t-f), color var(--t-f); }
.nhc-filter--v2 .nhc-filter-opts a:hover { background: var(--bg-muted); }
.nhc-filter--v2 .nhc-filter-opt-name { flex: 1; min-width: 0; }
.nhc-filter--v2 .nhc-filter-opt-count { flex-shrink: 0; min-width: 2rem; padding: .05rem .45rem; border-radius: 999px; background: var(--bg-muted); color: var(--ink-subtle); font-size: .72rem; font-weight: 600; text-align: center; }
.nhc-filter--v2 .nhc-filter-box { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--border-strong, #c9cbd1); border-radius: 5px; background: #fff; transition: all var(--t-f); }
.nhc-filter--v2 .nhc-filter-opts a:hover .nhc-filter-box { border-color: var(--brand); }
.nhc-filter--v2 .nhc-filter-opts li.is-active a { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.nhc-filter--v2 .nhc-filter-opts li.is-active .nhc-filter-opt-count { background: #fff; color: var(--brand); }
.nhc-filter--v2 .nhc-filter-opts li.is-active .nhc-filter-box { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--brand); }
.nhc-filter--v2 .nhc-filter-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; padding: .25rem 0; background: none; border: 0; color: var(--brand); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.nhc-filter--v2 .nhc-filter-more:hover { text-decoration: underline; }
.nhc-filter--v2 .nhc-filter-more[hidden] { display: none; }
.nhc-filter--v2 .nhc-filter-find { width: 100%; height: 36px; margin-bottom: .5rem; padding: 0 .75rem; border: 1.5px solid var(--border); border-radius: var(--r-md); font: inherit; font-size: .85rem; color: var(--ink); }
.nhc-filter--v2 .nhc-filter-find:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.nhc-filter--v2 .nhc-filter-none { margin: .25rem 0 0; font-size: .84rem; color: var(--ink-subtle); }
/* Preis */
.nhc-filter--v2 .nhc-filter-price { display: flex; align-items: center; gap: .5rem; }
.nhc-filter--v2 .nhc-filter-price-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3rem; height: 42px; padding: 0 .7rem; border: 1.5px solid var(--border); border-radius: var(--r-md); background: #fff; cursor: text; transition: border-color var(--t-f), box-shadow var(--t-f); }
.nhc-filter--v2 .nhc-filter-price-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.nhc-filter--v2 .nhc-filter-price-field span { font-size: .75rem; color: var(--ink-subtle); }
.nhc-filter--v2 .nhc-filter-price-field em { font-style: normal; font-size: .85rem; color: var(--ink-subtle); }
.nhc-filter--v2 .nhc-filter-price-field input { flex: 1; min-width: 0; width: 100%; border: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent; font: inherit; font-size: .9rem; color: var(--ink); -moz-appearance: textfield; }
.nhc-filter--v2 .nhc-filter-price-field input:focus { outline: 0; }
.nhc-filter--v2 .nhc-filter-price-field input::-webkit-outer-spin-button,
.nhc-filter--v2 .nhc-filter-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nhc-filter--v2 .nhc-filter-price-sep { color: var(--ink-subtle); }
/* Schalter „Nur reduzierte Artikel“ */
.nhc-filter--v2 .nhc-filter-switch { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-size: .9rem; color: var(--ink); }
.nhc-filter--v2 .nhc-filter-switch input { position: absolute; opacity: 0; pointer-events: none; }
.nhc-filter--v2 .nhc-filter-switch-ui { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong, #c9cbd1); transition: background .2s ease; }
.nhc-filter--v2 .nhc-filter-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.nhc-filter--v2 .nhc-filter-switch input:checked + .nhc-filter-switch-ui { background: var(--brand); }
.nhc-filter--v2 .nhc-filter-switch input:checked + .nhc-filter-switch-ui::after { transform: translateX(16px); }
.nhc-filter--v2 .nhc-filter-switch input:focus-visible + .nhc-filter-switch-ui { box-shadow: 0 0 0 3px var(--brand-50); }
/* Aktionsleiste unten, bleibt beim Scrollen im Panel sichtbar */
.nhc-filter--v2 .nhc-filter-block:last-of-type { border-bottom: 0; }
.nhc-filter--v2 .nhc-filter-foot { position: sticky; bottom: 0; z-index: 2; margin: 0 -1.25rem; padding: .9rem 1.25rem 1.1rem; background: #fff; border-top: 1px solid var(--border); }
.nhc-filter--v2 .nhc-filter-foot .nhc-btn { margin: 0; }
.nhc-filter--v2 .nhc-filter-close { display: none !important; }
/* Desktop: Panel klebt und scrollt in sich, statt über den Bildschirm hinauszuragen */
@media (min-width: 901px) {
.nhc-filter.nhc-filter--v2 { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* Mobil: Drawer mit fixem Kopf (Titel + Schließen) und fixer Aktionsleiste */
@media (max-width: 900px) {
.nhc-filter.nhc-filter--v2.nhc-filter--drawer { border: 0; border-radius: 0; overflow: visible; }
.nhc-filter.nhc-filter--v2.nhc-filter--drawer > .nhc-filter-form { padding: 0 1.25rem !important; display: flex; flex-direction: column; }
.nhc-filter--v2.nhc-filter--drawer .nhc-filter-head { position: sticky; top: 0; z-index: 3; margin: 0 -1.25rem; padding: .85rem 1.25rem; background: #fff; }
.nhc-filter--v2.nhc-filter--drawer .nhc-filter-close { display: inline-grid !important; place-items: center; position: static; width: 38px; height: 38px; flex-shrink: 0; }
.nhc-filter--v2.nhc-filter--drawer .nhc-filter-foot { margin-top: auto; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(0,0,0,.06); }
.nhc-filter--v2 .nhc-filter-opts a { padding-top: .6rem; padding-bottom: .6rem; }
.nhc-filter-fab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--brand); font-size: .72rem; font-weight: 800; }
}
/* Shop-Seite läuft durch wpautop: eingefügte im Filter-Panel neutralisieren */
.nhc-filter--v2 p:not(.nhc-filter-none) { display: contents; }
.nhc-filter--v2 p:empty { display: none; }
.nhc-filter--v2 .nhc-filter-opts a { font-weight: 500; }
.nhc-filter--v2 .nhc-filter-block:has(+ .nhc-filter-foot) { border-bottom: 0; }
/* Hauptnavigation: „Alle Produkte“ als Button am Anfang */
.nhc-meganav-item.is-all { display: flex; align-items: center; margin-right: 6px; }
.nhc-meganav-item.is-all > a { gap: 7px; padding: 8px 15px; margin: 6px 0; background: var(--brand); color: #fff !important; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(202,0,0,.45); }
.nhc-meganav-item.is-all > a:hover, .nhc-meganav-item.is-all > a[aria-current] { background: #a80000; color: #fff !important; }
.nhc-meganav-all-ico { flex-shrink: 0; }
@media (min-width: 901px) and (max-width: 1279px) { .nhc-meganav-item.is-all > a { padding: 7px 11px; } }
@media (min-width: 901px) and (max-width: 1099px) { .nhc-meganav-item.is-all { margin-right: 2px; } .nhc-meganav-item.is-all > a { padding: 6px 9px; } .nhc-meganav-all-ico { display: none; } }
@media (max-width: 900px) { .nhc-meganav-item.is-all { display: block; margin: 0 0 .5rem; } .nhc-meganav-item.is-all > a { justify-content: center; margin: 0; padding: 12px 16px; } }
/* Mit „Alle Produkte“ ist die Leiste länger: Kompakt-Stufen früher greifen lassen */
@media (min-width: 901px) and (max-width: 1399px) { .nhc-meganav-list { gap: 0; } .nhc-meganav-item > a { padding: 14px 9px; font-size: .84rem; white-space: nowrap; } }
@media (min-width: 901px) and (max-width: 1219px) { .nhc-meganav-item > a { padding: 12px 6px; font-size: .8rem; } .nhc-caret { display: none; } .nhc-meganav-item.is-all > a { padding: 6px 10px; } }
@media (min-width: 901px) and (max-width: 1060px) { .nhc-meganav-item > a { padding: 12px 4px; font-size: .76rem; } .nhc-meganav-all-ico { display: none; } }
/* SEO-Texte unter Kategorie-/Markenseiten, Landingpages */
.nhc-term-seo { padding-top: 2.5rem; padding-bottom: 1rem; }
.nhc-term-seo-text { max-width: 820px; margin-bottom: 2rem; }
.nhc-term-seo-text h2 { font-size: 1.35rem; margin: 0 0 .75rem; }
.nhc-term-seo-text p { color: var(--ink-soft); line-height: 1.65; }
.nhc-shop-desc p { margin: 0; }
.nhc-landing .nhc-about-section p { max-width: 820px; line-height: 1.65; }
.nhc-landing-links { display: flex; flex-wrap: wrap; gap: .5rem; }
/* ============================================
MASCHINEN-FINDER (Startseite) – Suche als Satz
============================================ */
.nhc-finder-section { padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 0; }
.nhc-finder {
position: relative; max-width: var(--container); margin: 0 auto; overflow: hidden;
display: grid; grid-template-columns: minmax(240px, .8fr) 2fr;
background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 50px -24px rgba(15,17,21,.25);
}
.nhc-finder-intro {
position: relative; padding: 2rem 2rem 2.1rem; color: #fff;
background: radial-gradient(120% 140% at 0% 0%, #e01a1a 0%, var(--brand, #ca0000) 45%, #7d0000 100%);
}
/* gestrichelte Linie wie eine Steppnaht */
.nhc-finder-intro::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(255,255,255,.28); border-radius: 14px; pointer-events: none; }
.nhc-finder-eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nhc-finder-intro h2 { margin: .9rem 0 .55rem !important; color: #fff !important; font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important; line-height: 1.2 !important; letter-spacing: -.01em; }
.nhc-finder-intro p { margin: 0; color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.55; }
.nhc-finder-form { padding: 2rem clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; min-width: 0; }
.nhc-finder-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .5rem; margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.nhc-finder-sentence > span { color: var(--ink-soft); font-weight: 500; }
.nhc-finder-sentence > .nhc-finder-comma { margin-left: -.45rem; color: var(--ink); }
.nhc-finder-pick { position: relative; display: inline-flex; max-width: 100%; }
.nhc-finder-pick::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; color: var(--ink-subtle); transition: color .15s; }
.nhc-finder-pick select {
-webkit-appearance: none; appearance: none; max-width: 100%; min-width: 4.5rem;
padding: .3em 34px .3em .65em; border: 0; border-radius: 12px; cursor: pointer;
font: inherit; color: var(--ink-subtle); background: var(--bg-muted, #f2f3f5);
box-shadow: inset 0 -2px 0 var(--border-strong, #c9cbd1); transition: background .15s, color .15s, box-shadow .15s;
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.nhc-finder-pick select:hover { background: #eceef1; }
.nhc-finder-pick select:focus-visible { outline: 0; box-shadow: inset 0 -2px 0 var(--brand), 0 0 0 3px var(--brand-50); }
.nhc-finder-pick.is-set select { color: var(--brand); background: var(--brand-50); box-shadow: inset 0 -2px 0 var(--brand); }
.nhc-finder-pick.is-set::after { color: var(--brand); }
.nhc-finder-pick select option { color: var(--ink); font-size: 1rem; font-weight: 500; }
.nhc-finder-measure { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -.01em; padding: 0 .65em; pointer-events: none; }
.nhc-finder-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-top: 1.2rem; border-top: 1px dashed var(--border); }
.nhc-finder-cta { display: inline-flex; align-items: center; gap: .6rem; }
.nhc-finder-cta svg { transition: transform .2s ease; }
.nhc-finder-cta:hover svg { transform: translateX(3px); }
.nhc-finder-cta.is-empty { background: var(--bg-muted) !important; color: var(--ink-subtle) !important; box-shadow: none !important; cursor: not-allowed; }
.nhc-finder-reset { background: none; border: 0; padding: .25rem 0; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nhc-finder-reset:hover { color: var(--brand); }
.nhc-finder-reset[hidden] { display: none; }
.nhc-finder-help { margin: 0 0 0 auto; font-size: .85rem; color: var(--ink-subtle); }
.nhc-finder-help a { color: var(--ink); font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) {
.nhc-finder { grid-template-columns: 1fr; }
.nhc-finder-intro { padding: 1.5rem 1.5rem 1.6rem; }
.nhc-finder-help { margin-left: 0; }
}
@media (max-width: 560px) {
.nhc-finder-sentence, .nhc-finder-measure { font-size: 1.05rem; }
.nhc-finder-cta { width: 100%; justify-content: center; }
}
/* ============================================
STARTSEITE „Über uns“ v2 – kompakt
============================================ */
.nhc-about--v2 .nhc-about-top { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.nhc-about--v2 .nhc-about-text .nhc-section-title { text-align: left; margin: .6rem 0 0 !important; font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important; line-height: 1.15 !important; }
.nhc-about--v2 .nhc-about-text .nhc-section-eyebrow { justify-content: flex-start; }
.nhc-about--v2 .nhc-about-lead { font-size: 1rem; text-align: left; margin: 1rem 0 0; }
.nhc-about--v2 .nhc-about-quote { margin: 1.25rem 0 0; padding: .85rem 1.1rem; border-left: 3px solid var(--brand); background: #fff; border-radius: 0 12px 12px 0; font-style: italic; }
.nhc-about--v2 .nhc-about-quote p { margin: 0; color: var(--ink); }
.nhc-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.5rem 0 0; }
.nhc-about-stats > div { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: .85rem .75rem; }
.nhc-about-stats dt { font-size: 1.5rem; font-weight: 800; color: var(--brand); letter-spacing: -.02em; line-height: 1.1; }
.nhc-about-stats dd { margin: .2rem 0 0; font-size: .76rem; line-height: 1.3; color: var(--ink-soft); }
/* Video erst nach Klick laden (Datenschutz + Ladezeit) */
.nhc-about--v2 .nhc-about-video { margin: 0; max-width: none; }
.nhc-video-facade { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); cursor: pointer; box-shadow: 0 20px 50px -24px rgba(15,17,21,.45); }
.nhc-video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, filter .3s ease; }
.nhc-video-facade:hover img { transform: scale(1.03); filter: brightness(.9); }
.nhc-video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 10px rgba(202,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; }
.nhc-video-play svg { margin-left: 4px; }
.nhc-video-facade:hover .nhc-video-play, .nhc-video-facade:focus-visible .nhc-video-play { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(202,0,0,.22); }
.nhc-video-facade:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.nhc-video-note { position: absolute; left: 12px; bottom: 12px; padding: .3rem .6rem; border-radius: 999px; background: rgba(15,17,21,.65); color: #fff; font-size: .72rem; }
.nhc-video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nhc-about--v2 .nhc-about-video figcaption { margin: .75rem 0 0; font-size: .86rem; color: var(--ink-soft); text-align: center; }
/* Wegweiser: vier klickbare Karten */
.nhc-about-guide { margin-bottom: clamp(2rem, 4vw, 3rem); }
.nhc-about-guide-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1rem; }
.nhc-about-guide-head h3 { margin: 0 !important; font-size: 1.3rem !important; }
.nhc-about-guide-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.nhc-about-guide-link:hover { text-decoration: underline; }
.nhc-about--v2 .nhc-about-paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.nhc-about--v2 .nhc-about-paths li { margin: 0; }
.nhc-about--v2 .nhc-about-path { height: 100%; display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.15rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .2s, transform .2s; }
.nhc-about--v2 .nhc-about-path:hover { border-color: var(--brand); box-shadow: 0 14px 30px -18px rgba(202,0,0,.45); transform: translateY(-2px); }
.nhc-about--v2 .nhc-about-path-num { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: .2rem; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-weight: 800; font-size: .85rem; }
.nhc-about--v2 .nhc-about-path strong { font-size: 1rem; margin: 0; }
.nhc-about-path-text { flex: 1; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.nhc-about-path-cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .84rem; font-weight: 700; color: var(--brand); }
.nhc-about-path-cta svg { transition: transform .2s; }
.nhc-about--v2 .nhc-about-path:hover .nhc-about-path-cta svg { transform: translateX(3px); }
/* Leistungen + Kontakt nebeneinander */
.nhc-about-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nhc-about--v2 .nhc-about-card { border-radius: 16px; padding: 1.4rem 1.5rem; }
.nhc-about--v2 .nhc-about-card h3 { margin: 0 0 .9rem !important; font-size: 1.05rem !important; text-transform: none; letter-spacing: 0; color: var(--ink); }
.nhc-about--v2 .nhc-about-card--features ul { display: grid; gap: .55rem; }
.nhc-about--v2 .nhc-about-card--features li { display: flex; align-items: center; gap: .6rem; padding: 0; border: 0; font-size: .92rem; color: var(--ink); }
.nhc-about--v2 .nhc-about-card--features li svg { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand-50); color: var(--brand); }
.nhc-about--v2 .nhc-about-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .9rem; }
.nhc-about--v2 .nhc-about-card-head h3 { margin: 0 !important; }
.nhc-open-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; background: #fdecec; color: #a00000; }
.nhc-open-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nhc-open-badge.is-open { background: #e7f6ec; color: #17803d; }
.nhc-about-contact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.25rem; font-size: .92rem; font-style: normal; }
.nhc-about-contact li { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; color: var(--ink); line-height: 1.45; }
.nhc-about-contact svg { flex-shrink: 0; margin-top: 1px; color: var(--brand); }
.nhc-about-contact a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.nhc-about-contact a:hover { color: var(--brand); }
.nhc-about-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.nhc-about-actions .nhc-btn { flex: 1; justify-content: center; margin: 0; }
@media (max-width: 1100px) { .nhc-about--v2 .nhc-about-paths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
.nhc-about--v2 .nhc-about-top, .nhc-about-info { grid-template-columns: 1fr; }
.nhc-about--v2 .nhc-about-video { order: -1; }
}
@media (max-width: 560px) {
.nhc-about-stats { grid-template-columns: repeat(2, 1fr); }
.nhc-about--v2 .nhc-about-paths { grid-template-columns: 1fr; gap: .6rem; }
.nhc-about--v2 .nhc-about-path { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; row-gap: .15rem; padding: .9rem 1rem; }
.nhc-about--v2 .nhc-about-path-num { grid-row: span 3; margin: 0; }
.nhc-about-contact { grid-template-columns: 1fr; }
}
/* Startseite: feste H1 oben im Slider (bleibt beim Slide-Wechsel stehen) */
.nhc-slider .nhc-hero-h1 {
position: absolute; z-index: 5; top: 18px; left: 50%; transform: translateX(-50%);
width: max-content; max-width: calc(100% - 2rem); margin: 0 !important; padding: .4rem 1rem;
border-radius: 999px; background: rgba(0,0,0,.22); backdrop-filter: blur(6px);
color: #fff !important; font-size: .85rem !important; font-weight: 600 !important; line-height: 1.35 !important;
letter-spacing: .01em !important; text-align: center; pointer-events: none;
}
@media (max-width: 600px) { .nhc-slider .nhc-hero-h1 { top: 10px; font-size: .72rem !important; padding: .35rem .8rem; border-radius: 12px; } }
.nhc-promo-tel-label { opacity: .85; font-weight: 500; margin-right: .2rem; }
@media (max-width: 760px) { .nhc-promo-tel-label { display: none; } }
/* „Nach oben“-Button (rechts unten; mobil auf Höhe des Filter-Buttons links) */
.nhc-totop {
--p: 0;
position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 999;
display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
color: var(--brand, #ca0000);
/* Fortschrittsring: roter Anteil = gescrollter Teil der Seite */
background:
radial-gradient(closest-side, #fff calc(100% - 3px), transparent calc(100% - 2px)),
conic-gradient(var(--brand, #ca0000) calc(var(--p) * 360deg), #e6e7ea 0);
box-shadow: 0 8px 22px -6px rgba(15,17,21,.3), 0 2px 6px rgba(15,17,21,.08);
opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s;
-webkit-tap-highlight-color: transparent;
}
.nhc-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.nhc-totop.is-visible:hover { transform: translateY(-2px); }
.nhc-totop:active { transform: scale(.94); }
.nhc-totop:focus-visible { outline: 3px solid var(--brand-50, #fde8e8); outline-offset: 2px; }
/* Warenkorb-Button sitzt ebenfalls rechts unten → darüber stapeln */
body:has(.nhc-fab-cart:not([hidden])) .nhc-totop { bottom: calc(100px + env(safe-area-inset-bottom)); }
/* bei offenem Menü/Filter-Drawer ausblenden */
html.nhc-no-scroll .nhc-totop { opacity: 0; visibility: hidden; }
@media (max-width: 900px) { .nhc-totop { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .nhc-totop { transition: none; } }
/* ============================================
MOBILES MENÜ v2 – Logo im Kopf, Kacheln, Gruppen
============================================ */
@media (max-width: 900px) {
.nhc-drawer .nhc-drawer-head {
position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
padding: .9rem 1rem .9rem 1.25rem !important; min-height: 68px;
}
.nhc-drawer-logo { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.nhc-drawer-logo svg { height: 44px; width: auto; display: block; }
.nhc-drawer-logo .nhc-logo-fallback { color: #fff; font-weight: 800; }
.nhc-drawer-nav.nhc-drawer-nav--v2 { padding: .5rem 1rem 0 !important; background: #f6f6f7 !important; gap: 0; }
.nhc-drawer-nav--v2 .nhc-drawer-label {
display: block; margin: 1.25rem .25rem .55rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle, #8a8f98);
}
.nhc-drawer-nav--v2 .nhc-drawer-label:first-child { margin-top: .75rem; }
/* Grundform aller Einträge: Reset der alten Listen-Optik */
.nhc-drawer-nav.nhc-drawer-nav--v2 a {
border: 0 !important; padding: 0 !important; font-size: 1rem !important; color: var(--ink, #111) !important; text-decoration: none;
}
.nhc-drawer-nav.nhc-drawer-nav--v2 a:hover, .nhc-drawer-nav.nhc-drawer-nav--v2 a:active { padding-left: 0 !important; }
/* „Alle Produkte“ */
.nhc-drawer-nav.nhc-drawer-nav--v2 a.nhc-drawer-all {
padding: .95rem 1.1rem !important; margin-bottom: .5rem; border-radius: 14px; background: var(--ink, #111) !important; color: #fff !important; font-weight: 700 !important;
}
.nhc-drawer-nav.nhc-drawer-nav--v2 a.nhc-drawer-all::after { color: rgba(255,255,255,.7) !important; }
.nhc-drawer-nav.nhc-drawer-nav--v2 a.nhc-drawer-all:active { background: #000 !important; color: #fff !important; }
/* Kategorien als Kacheln */
.nhc-drawer-cats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-cats a {
min-height: 58px; padding: .7rem .8rem !important; border-radius: 14px; background: #fff !important;
box-shadow: 0 1px 2px rgba(15,17,21,.06), inset 0 0 0 1px #ececef; font-size: .92rem !important; font-weight: 650 !important; line-height: 1.25;
align-items: center !important;
}
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-cats a:active { background: var(--brand-50, #fdeaea) !important; color: var(--brand) !important; box-shadow: inset 0 0 0 1.5px var(--brand); }
.nhc-drawer-nav--v2 .nhc-drawer-cats a::after { font-size: 1.15rem !important; }
/* Angebote: Banner ohne Icon */
.nhc-drawer-nav.nhc-drawer-nav--v2 a.nhc-drawer-deal {
position: relative; overflow: hidden; margin-top: .75rem; padding: 1rem 1.1rem !important; border-radius: 16px; gap: .75rem;
background: linear-gradient(120deg, #e3120b 0%, var(--brand, #ca0000) 45%, #8a0000 100%) !important; color: #fff !important;
box-shadow: 0 10px 24px -12px rgba(202,0,0,.7);
}
.nhc-drawer-nav--v2 a.nhc-drawer-deal::after { content: none !important; }
.nhc-drawer-nav--v2 a.nhc-drawer-deal::before { content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(255,255,255,.3); border-radius: 12px; pointer-events: none; }
.nhc-drawer-deal-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.nhc-drawer-deal-text strong { font-size: 1.08rem; font-weight: 800; }
.nhc-drawer-deal-text small { font-size: .78rem; opacity: .88; font-weight: 500; }
.nhc-drawer-deal-badge { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--brand); font-size: 1.2rem; font-weight: 900; transform: rotate(-12deg); }
/* Merkzettel · Vergleich · B2B-Shop als Leiste */
.nhc-drawer-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15,17,21,.06), inset 0 0 0 1px #ececef; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-tools a { justify-content: center !important; min-height: 52px; padding: .5rem !important; font-size: .88rem !important; font-weight: 650 !important; text-align: center; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-tools a + a { box-shadow: inset 1px 0 0 #ececef; }
.nhc-drawer-nav--v2 .nhc-drawer-tools a::after { content: none !important; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-tools a:active { background: var(--brand-50, #fdeaea) !important; color: var(--brand) !important; }
/* Unternehmensseiten: normale Liste in einer Karte */
.nhc-drawer-list { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15,17,21,.06), inset 0 0 0 1px #ececef; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-list a { padding: .85rem 1.1rem !important; font-weight: 600 !important; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-list a + a { box-shadow: inset 0 1px 0 #f0f0f2; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-list a:active { background: #f6f6f7 !important; color: var(--brand) !important; }
/* Kontakt unten */
.nhc-drawer-contact { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #ececef; text-align: center; }
.nhc-drawer-nav.nhc-drawer-nav--v2 a.nhc-drawer-call { flex-direction: column; justify-content: center !important; gap: .1rem; padding: .7rem 1rem !important; border-radius: 12px; background: var(--brand-50, #fdeaea) !important; color: var(--brand) !important; }
.nhc-drawer-call span { font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.nhc-drawer-call strong { font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; }
.nhc-drawer-nav--v2 a.nhc-drawer-call::after { content: none !important; }
.nhc-drawer-contact p { margin: .7rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.nhc-drawer-nav--v2 .nhc-drawer-socials { margin: 1rem -1rem 0 !important; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-socials a { color: #fff !important; width: 48px !important; height: 48px !important; }
.nhc-drawer-nav.nhc-drawer-nav--v2 .nhc-drawer-socials a:hover { color: var(--brand, #ca0000) !important; }
}
/* Tablet hochkant: Panel statt Vollbild, dahinter abgedunkelt */
@media (min-width: 600px) and (max-width: 900px) {
.nhc-drawer .nhc-drawer-panel { width: 420px !important; max-width: 420px !important; box-shadow: 0 0 60px rgba(0,0,0,.25) !important; }
.nhc-drawer .nhc-drawer-backdrop { display: block !important; }
}
/* Slider: Inhalt bleibt immer zwischen den Pfeilen (Pfeil-Abstand + Breite + Luft) */
.nhc-slide { padding-left: max(clamp(1.5rem, 5vw, 4rem), 88px); padding-right: max(clamp(1.5rem, 5vw, 4rem), 88px); }
.nhc-slide-inner { min-width: 0; }
.nhc-slide-title { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 900px) { .nhc-slide { padding-left: 80px; padding-right: 80px; } }
/* Handy: Pfeile unten neben die Punkte, Inhalt bekommt die volle Breite */
@media (max-width: 600px) {
.nhc-slide { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 4.75rem; }
.nhc-slider .nhc-slider-arrow { top: auto !important; bottom: .7rem; transform: none !important; width: 38px !important; height: 38px !important; font-size: 1.35rem; }
.nhc-slider .nhc-slider-prev { left: 1rem !important; }
.nhc-slider .nhc-slider-next { right: 1rem !important; }
.nhc-slider .nhc-slider-dots { bottom: 1.45rem; }
}
@media (max-width: 900px) {
/* Gruppen nicht zusammenstauchen – die Liste scrollt stattdessen */
.nhc-drawer-nav.nhc-drawer-nav--v2 > * { flex-shrink: 0; }
.nhc-drawer-nav.nhc-drawer-nav--v2 { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.nhc-drawer-logo svg { height: 54px; }
}
/* Konto (/konto/) auf dem Handy: Umschalter in voller Breite, kompakte Karten, Formular ohne Doppelrahmen */
@media (max-width: 600px) {
.nhc-auth-wrap { margin: 1rem auto 2rem !important; padding: 0 1rem !important; }
.nhc-auth-tabs { display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; margin: 0 0 1rem !important; }
.nhc-auth-tab { justify-content: center; padding: .65rem .4rem !important; font-size: .9rem !important; }
.nhc-auth-hint { margin-bottom: 1rem !important; font-size: .85rem !important; }
.nhc-auth-cards { gap: .75rem !important; }
.nhc-auth-card {
display: grid !important; grid-template-columns: 46px 1fr; grid-template-areas: "icon title" "icon text" "cta cta";
column-gap: .9rem; row-gap: .2rem; align-items: center; padding: 1.1rem 1.1rem 1rem !important; text-align: left !important;
}
.nhc-auth-card .nhc-auth-card-icon { grid-area: icon; align-self: start; width: 46px !important; height: 46px !important; margin: 0 !important; border-radius: 12px; }
.nhc-auth-card .nhc-auth-card-icon svg { width: 22px; height: 22px; }
.nhc-auth-card h2 { grid-area: title; margin: 0 !important; font-size: 1.15rem !important; text-align: left !important; justify-content: flex-start !important; }
.nhc-auth-card h2::before, .nhc-auth-form-head h2::before { display: none !important; }
.nhc-auth-card p { grid-area: text; margin: 0 !important; font-size: .86rem !important; line-height: 1.45 !important; text-align: left !important; }
.nhc-auth-card .nhc-auth-card-cta { grid-area: cta; justify-self: stretch; justify-content: center; margin-top: .85rem !important; width: 100%; }
.nhc-auth-form-card { padding: 1.25rem 1rem !important; border-radius: 16px !important; }
.nhc-auth-form-head { margin-bottom: .75rem !important; text-align: left !important; }
.nhc-auth-form-head h2 { font-size: 1.25rem !important; text-align: left !important; }
.nhc-auth-form-body .woocommerce-form-login,
.nhc-auth-form-body .woocommerce-form-register { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: none !important; }
.nhc-auth-form-body .form-row { margin: 0 0 .9rem !important; padding: 0 !important; }
.nhc-auth-form-body label { font-size: .88rem !important; line-height: 1.35 !important; margin-bottom: .35rem !important; display: block; }
.nhc-auth-form-body input.input-text { width: 100% !important; min-height: 48px; font-size: 16px !important; }
.nhc-auth-form-body button[type=submit], .nhc-auth-form-body .woocommerce-button { width: 100% !important; justify-content: center; margin-top: .25rem !important; }
.nhc-auth-form-body .woocommerce-form-login__rememberme { display: flex !important; align-items: center; gap: .5rem; margin: 0 0 .9rem !important; }
.nhc-auth-form-body .lost_password { text-align: center; margin: .9rem 0 0 !important; }
}
/* „Über uns“ v3: ruhiger, redaktionell – ohne Kennzahl-Kacheln und Nummern */
.nhc-about--v2 .nhc-about-more { margin: 1rem 0 0; color: var(--ink-soft); line-height: 1.7; font-size: 1rem; }
.nhc-about--v2 .nhc-about-quote { margin: 1.5rem 0 0; padding: 0 0 0 1.1rem; background: none; border-left: 2px solid var(--brand); border-radius: 0; font-style: normal; }
.nhc-about--v2 .nhc-about-quote p { font-size: 1.12rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.nhc-about--v2 .nhc-about-quote cite { display: block; margin-top: .45rem; font-style: normal; font-size: .85rem; color: var(--ink-subtle); }
.nhc-about--v2 .nhc-about-quote cite::before { content: "– "; }
.nhc-about--v2 .nhc-about-guide { padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--border); }
.nhc-about--v2 .nhc-about-guide h3 { margin: 0 !important; font-size: 1.35rem !important; }
.nhc-about-guide-intro { margin: .4rem 0 1.5rem; color: var(--ink-soft); font-size: .95rem; }
.nhc-about-guide-intro a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
.nhc-about-routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2rem; }
.nhc-about-routes li { margin: 0; }
.nhc-about-routes a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 0 .25rem; border-top: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.nhc-about-routes strong { font-size: 1.02rem; }
.nhc-about-routes span { flex: 1; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.nhc-about-routes em { font-style: normal; font-size: .86rem; font-weight: 600; color: var(--brand); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.nhc-about-routes a:hover { border-top-color: var(--brand); }
.nhc-about-routes a:hover em { text-decoration-color: currentColor; }
.nhc-about-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); background: #fff; border: 1px solid var(--border); border-radius: 16px; }
.nhc-about-visit-col { padding: 1.5rem 1.75rem; font-style: normal; }
.nhc-about-visit-col + .nhc-about-visit-col { border-left: 1px solid var(--border); }
.nhc-about-visit h3 { margin: 0 0 .8rem !important; font-size: 1.05rem !important; }
.nhc-about-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.nhc-about-perks li { position: relative; padding-left: 1.1rem; font-size: .93rem; color: var(--ink); }
.nhc-about-perks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 1px; background: var(--brand); }
.nhc-about-visit-col--addr p { margin: 0 0 .5rem; font-size: .93rem; line-height: 1.55; color: var(--ink); }
.nhc-about-visit-col--addr a { color: var(--ink); font-weight: 600; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 3px; }
.nhc-about-visit-col--addr a:hover { color: var(--brand); }
.nhc-about-visit .nhc-open-badge { margin-left: .4rem; padding: .1rem .5rem; font-size: .72rem; vertical-align: 1px; }
.nhc-about-visit-links { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem !important; }
.nhc-about-visit-links .nhc-btn { margin: 0; }
.nhc-about-visit-links .nhc-btn--primary { color: #fff !important; text-decoration: none; }
@media (max-width: 1000px) { .nhc-about-routes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; } }
@media (max-width: 760px) {
.nhc-about-visit { grid-template-columns: 1fr; }
.nhc-about-visit-col + .nhc-about-visit-col { border-left: 0; border-top: 1px solid var(--border); }
.nhc-about-visit-col { padding: 1.25rem; }
}
@media (max-width: 560px) { .nhc-about-routes { grid-template-columns: 1fr; gap: .25rem; } .nhc-about-routes a { padding: .9rem 0 .6rem; border-top-width: 1px; border-top-color: var(--border); } }
/* Mobiles Menü: Login-Punkt (Gast ↔ angemeldet über die WP-Body-Klasse) */
.nhc-drawer-login--user, body.logged-in .nhc-drawer-login--guest { display: none !important; }
body.logged-in .nhc-drawer-login--user { display: flex !important; }
@media (max-width: 900px) {
.nhc-drawer-nav.nhc-drawer-nav--v2 a.nhc-drawer-login {
justify-content: flex-start !important; gap: .8rem; margin-top: .75rem; padding: .8rem 1rem !important; border-radius: 14px;
background: #fff !important; box-shadow: 0 1px 2px rgba(15,17,21,.06), inset 0 0 0 1px #ececef;
}
.nhc-drawer-nav--v2 a.nhc-drawer-login::after { margin-left: auto; }
.nhc-drawer-login-ico { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-50, #fdeaea); color: var(--brand); }
.nhc-drawer-login-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nhc-drawer-login-text strong { font-size: 1rem; font-weight: 700; }
.nhc-drawer-login-text small { font-size: .78rem; font-weight: 500; color: var(--ink-subtle); }
}
/* Handy-Slider (Produkt-Slides): Titel → Preis → Bild → Buttons */
@media (max-width: 820px) {
.nhc-slide--product .nhc-slide-split { gap: 0; }
.nhc-slide--product .nhc-slide-text-col { display: contents; }
.nhc-slide--product .nhc-slide-eyebrow { order: 1; justify-self: center; }
.nhc-slide--product .nhc-slide-title { order: 2; }
.nhc-slide--product .nhc-slide-price { order: 3; margin-bottom: 1.25rem; }
.nhc-slide--product .nhc-slide-img-col { order: 4; margin-bottom: 1.5rem; }
.nhc-slide--product .nhc-slide-cta { order: 5; }
}
/* „Über uns“: Zitat ohne Kartenrest */
.nhc-about--v2 .nhc-about-quote { box-shadow: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
.nhc-drawer-nav a.nhc-drawer-login--user, body.logged-in .nhc-drawer-nav a.nhc-drawer-login--guest { display: none !important; }
body.logged-in .nhc-drawer-nav a.nhc-drawer-login--user { display: flex !important; }
/* Footer: „Vertrag widerrufen“ im Service-Block statt als eigene Leiste unter dem Footer */
.nhc-footer-withdraw {
display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; padding: .55rem 1.2rem;
border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff !important; font-weight: 700; font-size: .88rem; text-decoration: none;
transition: background .15s, color .15s;
}
.nhc-footer-withdraw:hover { background: #fff; color: var(--brand) !important; }
p.eu-owb-order-withdraw-from-contract-button { display: none !important; }
/* Produktseite: Hinweis „Geprüft vom Werkstatt-Team“ (nur Maschinen) */
.nhc-werkstatt-check { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border-left: 3px solid var(--brand); background: var(--bg-soft, #f7f7f8); border-radius: 0 12px 12px 0; }
.nhc-werkstatt-check strong { display: block; margin-bottom: .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.nhc-werkstatt-check p { margin: 0; color: var(--ink); line-height: 1.6; }
/* === Mobil-Feinschliff (Prüfung aller Seiten auf 390 px) === */
/* Kasse: Länder-/Bundesland-Auswahl – Text war auf iOS unsichtbar (line-height 0), Schrift < 16 px löste Zoom aus */
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-blocks-components-select select,
.wc-blocks-components-select__select {
line-height: 1.35 !important; height: auto !important; min-height: 54px;
padding: 1.45rem 2.6rem .45rem .9rem !important; font-size: 16px !important; color: var(--ink) !important;
-webkit-text-fill-color: var(--ink); text-overflow: ellipsis;
}
.wc-blocks-components-select__label { top: .45rem !important; font-size: .78rem !important; line-height: 1.2 !important; }
/* Produktseite: Hauptbild bleibt in der Spalte (Bildmaße dürfen das Raster nicht aufdrücken) */
.nhc-product-hero > *, .nhc-product-gallery, .nhc-gallery, .nhc-gallery-main, .nhc-gallery-thumbs { min-width: 0; max-width: 100%; }
.nhc-gallery-main img, .nhc-gallery-thumbs img { max-width: 100%; }
.nhc-gallery-thumbs img { height: auto; }
/* Lange Zeichenketten (URLs, Trennlinien in Rechtstexten) umbrechen statt seitlich zu scrollen */
.wp-block-post-content, .nhc-product-description, .nhc-news-single, .nhc-term-seo, .nhc-landing { overflow-wrap: anywhere; }
.wp-block-post-content table { display: block; max-width: 100%; overflow-x: auto; }
/* Breadcrumb mobil: umbrechen statt seitlich scrollen – nichts klebt mehr am Rand */
@media (max-width: 600px) {
.nhc-breadcrumb ol { flex-wrap: wrap; overflow: visible !important; row-gap: .15rem; -webkit-mask-image: none !important; mask-image: none !important; }
.nhc-breadcrumb li, .nhc-breadcrumb li:last-child { white-space: normal; flex-shrink: 1; }
.nhc-breadcrumb [aria-current=page] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}
/* Variantenauswahl: Tabelle darf die Spalte nicht verbreitern, lange Optionsnamen umbrechen */
table.variations:has(.nhc-optcards, .nhc-garn), table.variations:has(.nhc-optcards, .nhc-garn) > tbody { display: block; width: 100%; max-width: 100%; }
.nhc-optcards { min-width: 0; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.nhc-optcard { min-width: 0; overflow-wrap: anywhere; }
.wc-block-components-address-form__country, .wc-block-components-address-form__state { margin-bottom: 16px !important; }
.wc-block-components-country-input select, .wc-block-components-state-input select, .wc-blocks-components-select select { padding-left: .65rem !important; }