/* Layout: Entwurfs-Umschalter fuer drei Hero-Varianten oben, darunter die ganze Startseite mit den bisherigen Inhalten
   in verfeinertem Design. Bewusst heller Website-Look wie wasserbelebungen.de, daher ohne Dark-Mode-Variante. */
:root {
	--ink: #141d2a;
	--ink-muted: #4a5970;
	--navy: #0e3358;
	--logo: #213668;
	--blue: #1d5a7a;
	--teal: #1b7c84;
	--mist: #eaeff2;
	--mist-2: #dfe7ec;
	--white: #ffffff;
	--night: #0b1626;
	--night-2: #10233e;
	--glow: #8fd6d2;
	--line: rgba(20, 29, 42, 0.1);
	--serif: "Lora", Georgia, "Times New Roman", serif;
	--sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gutter: clamp(16px, 4vw, 40px);
	--max: 1200px;
	color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--mist); color: var(--ink); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Entwurfs-Umschalter (gehoert nicht zur Website) */
.switch-old { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px var(--gutter); background: #20262e; color: #e9edf1; font: 500 13px/1.2 var(--sans); }
.switch-old__label { margin-right: 8px; opacity: 0.7; }
.switch-old button { font: inherit; color: inherit; background: transparent; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.switch-old button[aria-pressed="true"] { background: #fff; color: #20262e; border-color: #fff; }
.switch-old__note { margin-left: auto; opacity: 0.65; font-size: 12px; }

.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 14.5px/1 var(--sans); text-decoration: none; cursor: pointer; border: 0; transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--blue); }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: var(--glow); }
.btn--line { border: 1px solid rgba(20,29,42,0.25); color: var(--ink); background: transparent; }
.btn svg { width: 16px; height: 16px; }

.btn--ghost-light { border: 1px solid rgba(255,255,255,0.5); color: #fff; background: rgba(255,255,255,0.06); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.16); }

/* Abschnitte allgemein */
.sec { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); }
.sec h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.01em; }
.lead { margin-top: 14px; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-muted); max-width: 40em; }
.band { background: linear-gradient(180deg, var(--night-2), var(--night)); color: #e7eef4; }
.band h2, .band h3 { color: #fff; }
.band .lead, .band p { color: rgba(231,238,244,0.84); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--blue); }
.band .more { color: var(--glow); }
.more::after { content: "↓"; transition: transform 0.3s var(--ease); }
.more:hover::after { transform: translateY(3px); }

/* Produkte (Inhalt wie bisher) */
.products { padding-top: clamp(48px, 6vw, 80px); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 22px 44px -28px rgba(20,29,42,0.35); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 30px 54px -26px rgba(20,29,42,0.45); }
.card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #fafbf5; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s var(--ease), transform 1.2s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: #c9506a; color: #fff; font: 600 12px/1.2 var(--sans); }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.card h3 { font-size: 21px; line-height: 1.2; }
.card h3 a { text-decoration: none; }
.card p { font-size: 14.5px; color: var(--ink-muted); }
.card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }
.card__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.card__link { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.card__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.swatches button:hover { transform: scale(1.15); }
.swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2), 0 0 0 2px #fff, 0 0 0 3.5px var(--navy); }
.swatch-name { font-size: 12.5px !important; min-height: 1.3em; }

/* Grosse Unterschiede */
.diff { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.diff__text .note { margin-top: 18px; font-size: 14.5px; }
.diff__media { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.diff__media figure { margin: 0; }
.diff__media figcaption, .cmp figcaption { margin-top: 10px; font-size: 13px; font-style: italic; color: rgba(231,238,244,0.72); }
.diff__media img { border-radius: 14px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.cmp__frame { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08); touch-action: pan-y; --pos: 50%; }
.cmp__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 16px rgba(143,214,210,0.8); pointer-events: none; }
.cmp__handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--navy); font: 600 17px/44px var(--sans); text-align: center; letter-spacing: 2px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cmp__tag { position: absolute; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(8,20,36,0.7); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; }
.cmp__tag--l { left: 12px; }
.cmp__tag--r { right: 12px; }

/* Worte sagen viel */
.quote { font-size: clamp(32px, 4vw, 56px) !important; color: var(--teal); }
.facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin-top: clamp(36px, 5vw, 56px); }
.facts3 > div { padding-top: 18px; border-top: 1px solid rgba(20,29,42,0.16); }
.facts3 h3 { font-size: 21px; line-height: 1.25; }
.facts3 p { margin-top: 10px; color: var(--ink-muted); font-size: 15.5px; }
.rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 48px); list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; }
.rounds li { display: grid; gap: 14px; justify-items: center; text-align: center; font-size: 14px; color: var(--ink-muted); }
.rounds img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 60px -30px rgba(20,29,42,0.6); transition: transform 0.9s var(--ease); }
.rounds li:hover img { transform: rotate(-8deg) scale(1.04); }

/* Mach aus deinem Leitungswasser etwas Besonderes */
.special { background: linear-gradient(120deg, #0f3a5c 0%, #136b74 100%); color: #fff; }
.special .sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.special h2 { color: #fff; }
.special p { margin-top: 14px; color: rgba(255,255,255,0.88); font-size: clamp(17px, 1.4vw, 20px); }
.special .btn { margin-top: 28px; }
.special__img { justify-self: center; width: min(100%, 440px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px rgba(255,255,255,0.08), 0 40px 80px -30px rgba(0,0,0,0.6); }
.special__img img { width: 100%; height: 100%; object-fit: cover; }

/* Wasser ist nicht gleich Wasser */
.notequal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.notequal h3 { margin-top: 18px; font-size: clamp(22px, 2vw, 28px); color: var(--blue); }
.notequal p { margin-top: 12px; color: var(--ink-muted); max-width: 36em; }
.notequal .btn { margin-top: 28px; }
.notequal__img { justify-self: center; width: min(100%, 460px); animation: float 7s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(20,29,42,0.25)); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }

/* Verschiedenes Wasser im Vergleich */
.compare-groups { display: grid; gap: clamp(40px, 6vw, 72px); margin-top: clamp(36px, 5vw, 56px); }
.group { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.group h3 { font-size: clamp(22px, 2vw, 28px); }
.group p { margin-top: 10px; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.thumbs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thumbs button { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #000; aspect-ratio: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), opacity 0.4s var(--ease); }
.thumbs button:hover img { transform: scale(1.06); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); }
.lightbox::backdrop { background: rgba(5,12,22,0.86); }
.lightbox img { border-radius: 12px; max-height: 86vh; width: auto; margin: 0 auto; }
.lightbox button { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); font: 600 20px/40px var(--sans); cursor: pointer; }

/* Zeitraffer */
.timelapse { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.video { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.5s var(--ease), transform 1.2s var(--ease); }
.video:hover img { opacity: 1; transform: scale(1.03); }
.video__play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,0.94); animation: pulse 2.6s var(--ease) infinite; }
.video__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--navy); }
.video-cap { margin-top: 10px; font-size: 13px; color: rgba(231,238,244,0.7); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); } 70%, 100% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(20,29,42,0.05); transition: box-shadow 0.4s var(--ease); }
.faq details[open] { box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 20px 40px -26px rgba(20,29,42,0.35); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 18px 22px; font-weight: 600; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg) translateY(-3px); transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq__body { padding: 0 22px 22px; display: grid; gap: 12px; color: var(--ink-muted); max-width: 70ch; }
.faq__body h4 { margin: 6px 0 0; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.faq__body a { color: var(--blue); font-weight: 600; }


/* Footer */
.site-footer { background: linear-gradient(120deg, #0b1d3a, #136b74); color: rgba(255,255,255,0.86); margin-top: 0; }
.foot { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 72px) var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
.foot__brand img { width: 150px; }
.foot__brand p { margin-top: 14px; font-size: 14.5px; max-width: 26em; }
.foot__col { display: grid; align-content: start; gap: 8px; font-size: 14.5px; }
.foot__col h2 { font: 600 12.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.foot a { color: #fff; text-decoration: none; white-space: nowrap; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pay img { height: 26px; width: auto; background: #fff; border-radius: 5px; padding: 3px 6px; }
.legal-note { background: var(--night); color: rgba(231,238,244,0.62); text-align: center; font-size: 12px; padding: 9px var(--gutter); }
.legal-note a { text-decoration: underline; text-underline-offset: 0.2em; }
.paylist { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.paylist li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--mist); max-width: none !important; }
.paylist img { height: 24px; width: auto; background: #fff; border-radius: 4px; padding: 2px 5px; }
.paylist strong { display: block; color: var(--ink); }
.h__center { text-align: center; }
@media (max-width: 980px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot { grid-template-columns: 1fr; } }
/* ---------- Entwurfs-Navigation (gehoert nicht zur Website) ---------- */
.draftbar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px var(--gutter); background: #20262e; color: #e9edf1; font: 500 12.5px/1.3 var(--sans); }
.draftbar strong { opacity: 0.7; font-weight: 500; }
.draftbar a { color: #e9edf1; text-decoration: none; opacity: 0.8; white-space: nowrap; }
.draftbar a:hover, .draftbar a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 0.2em; }
.draftbar button { font: inherit; color: inherit; background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.draftbar button[aria-pressed="true"] { background: #fff; color: #20262e; }

/* ---------- Hero 8 und 10 ---------- */
.h__in { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(28px, 4vw, 48px); }
.h__center { padding: 0 var(--gutter); }
.hx { text-align: center; }
.hx .h__in { padding-bottom: clamp(24px, 3vw, 36px); }
.hx h1 { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.015em; }
.hx .sub { margin: 14px auto 0; font-size: clamp(17px, 1.5vw, 21px); color: #3a475b; max-width: none; }
.hx .btn { margin-top: 26px; }
.h8x { background: var(--mist); }
.h10x { background: #fff; }
.shelf { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shelf a { display: block; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(20,29,42,0.05); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.shelf a:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(20,29,42,0.45); }
.shelf img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.shelf a { display: flex; flex-direction: column; }
.shelf__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px 6px; font-weight: 600; font-size: 17px; white-space: nowrap; }
.shelf__name::after { content: "→"; color: var(--teal); transition: transform 0.3s var(--ease); }
.shelf a:hover .shelf__name::after { transform: translateX(4px); }
.shelf__text { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); text-align: left; }
.circles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 4vw, 56px); margin-top: clamp(28px, 4vw, 44px); }
.circles { align-items: flex-start; }
.circles a { display: grid; justify-items: center; align-content: start; gap: 10px; width: clamp(200px, 21vw, 260px); text-decoration: none; color: var(--ink); }
.circles a > img { width: clamp(150px, 15vw, 190px); }
.circ__name { font-weight: 600; font-size: 17px; white-space: nowrap; }
.circ__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }
.circles img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.circles a:hover img { transform: translateY(-4px); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--teal); }
.badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: #c9506a; color: #fff; font: 600 12px/1.2 var(--sans); }
.shelf a, .circles a { position: relative; }
.circles .badge { top: 4px; right: 0; }
.german { display: inline-flex; align-items: center; gap: 14px; margin: clamp(32px, 4vw, 48px) auto clamp(48px, 6vw, 72px); text-align: left; text-decoration: none; color: var(--ink); }
.german img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.german strong { display: block; font: 500 20px/1.2 var(--serif); white-space: nowrap; }
.german small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-muted); white-space: nowrap; }
.german:hover img { transform: scale(1.05); box-shadow: 0 0 0 3px var(--teal); }
.german:hover strong { color: var(--blue); }

/* ---------- Grosse Unterschiede, aufgeteilt mit grossem Vergleich ---------- */
.diff2__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.diff2__top figure { margin: 0; justify-self: end; width: min(100%, 320px); }
.diff2__top figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.diff2__top figcaption, .cmp-big figcaption { margin-top: 10px; font-size: 13.5px; font-style: italic; color: rgba(231,238,244,0.75); }
.cmp-big { margin: clamp(36px, 5vw, 56px) 0 0; }
.cmp-big .cmp__frame { aspect-ratio: 16 / 9; border-radius: 20px; }
.cmp__tag { transition: opacity 0.25s var(--ease); font-size: 14px; padding: 7px 14px; bottom: 16px; }
.cmp__tag--l { left: 16px; }
.cmp__tag--r { right: 16px; }

/* ---------- Unterseiten: Kopf ---------- */
.crumbs { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 0; font-size: 13.5px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs span::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.pagehead { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(20px, 3vw, 32px); }
.pagehead h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.01em; }
.pagehead p { margin-top: 12px; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-muted); }

/* ---------- Shop ---------- */
.shopgrid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 104px); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pcard { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 22px 44px -30px rgba(20,29,42,0.35); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 30px 54px -26px rgba(20,29,42,0.45); }
.pcard__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.pcard h2 { font-size: 21px; line-height: 1.25; }
.pcard p { font-size: 14.5px; color: var(--ink-muted); }
.pcard__foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.pcard__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard__cta { font-weight: 600; font-size: 14px; color: var(--blue); }
.pcard__note { font-size: 12px; color: var(--ink-muted); }

/* ---------- Produktseite ---------- */
.product { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gallery { position: sticky; top: 92px; display: grid; gap: 12px; }
.gallery__main { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #fafbf6; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s var(--ease); }
.gallery__main img.is-studio { object-fit: contain; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.gallery__thumbs button { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #fafbf6; box-shadow: inset 0 0 0 1px var(--line); }
.gallery__thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--navy); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.01em; }
.buy__intro { margin-top: 14px; color: var(--ink-muted); font-size: 16.5px; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; }
.ticks li::before { content: "✓"; color: var(--teal); font-weight: 700; }
.promo { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: #fbe9ed; color: #8a2e44; font-weight: 600; font-size: 15px; }
.opt { margin-top: 24px; border: 0; padding: 0; }
.opt legend { padding: 0; margin-bottom: 10px; font-size: 14.5px; font-weight: 600; }
.opt legend span { font-weight: 400; color: var(--ink-muted); }
.opt__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.opt__pills button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(20,29,42,0.2); background: #fff; color: var(--ink); font: 500 14.5px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); }
.opt__pills button:hover { border-color: var(--navy); }
.opt__pills button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.opt__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.opt__swatches button { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2); transition: transform 0.25s var(--ease); }
.opt__swatches button:hover { transform: scale(1.1); }
.opt__swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2), 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.priceblock { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.priceblock__price { font: 500 clamp(30px, 3vw, 38px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.priceblock__legal { margin-top: 10px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }
.priceblock__legal a { color: var(--blue); }
.addrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.qty { display: inline-flex; align-items: center; border: 1px solid rgba(20,29,42,0.2); border-radius: 999px; background: #fff; }
.qty button { width: 44px; height: 46px; border: 0; background: transparent; font: 600 18px/1 var(--sans); color: var(--ink); cursor: pointer; }
.qty input { width: 40px; border: 0; text-align: center; font: 600 16px/1 var(--sans); background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.addrow .btn { flex: 1 1 220px; justify-content: center; min-height: 48px; }
.related { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter); }
.related h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 24px; }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related__grid a { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; background: #fff; text-decoration: none; color: var(--ink); font-weight: 600; white-space: nowrap; transition: transform 0.35s var(--ease); }
.related__grid a:hover { transform: translateY(-3px); }
.related__grid img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }

/* ---------- Warenkorb und Kasse ---------- */
.cartwrap, .checkout { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.panel { background: #fff; border-radius: 18px; padding: clamp(18px, 2.5vw, 28px); box-shadow: 0 1px 2px rgba(20,29,42,0.05); }
.panel h2 { font-size: 22px; margin-bottom: 14px; }
.panel + .panel { margin-top: 16px; }
.line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: 0; }
.line img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: #fafbf6; }
.line strong { display: block; font-size: 16px; }
.line small { color: var(--ink-muted); font-size: 13.5px; }
.line__end { display: grid; justify-items: end; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line .qty button { width: 36px; height: 36px; font-size: 16px; }
.line .qty input { width: 30px; font-size: 14px; }
.remove { border: 0; background: none; color: var(--ink-muted); font: 500 13px/1 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.sum { position: sticky; top: 92px; }
.sum dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-variant-numeric: tabular-nums; }
.sum dt { color: var(--ink-muted); }
.sum dd { margin: 0; text-align: right; font-weight: 500; white-space: nowrap; }
.sum .discount { color: #8a2e44; }
.sum .total { padding-top: 14px; border-top: 1px solid var(--line); font-size: 19px; font-weight: 600; color: var(--ink); }
.sum__note { margin-top: 12px; font-size: 12.5px; color: var(--ink-muted); }
.sum .btn { width: 100%; justify-content: center; margin-top: 18px; min-height: 50px; }
.sum__back { display: block; margin-top: 12px; text-align: center; font-size: 14px; color: var(--blue); }
.freebar { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: #e3f2f1; color: #11545a; font-size: 14.5px; font-weight: 500; }
.example { display: inline-block; margin-bottom: 14px; font-size: 12px; color: #6b4a00; background: #fff4dc; border-radius: 6px; padding: 3px 8px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field select, .field textarea { min-height: 48px; padding: 0 14px; border: 1px solid rgba(20,29,42,0.22); border-radius: 10px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.field textarea { padding: 12px 14px; min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .wide { grid-column: 1 / -1; }
.pay-opts { display: grid; gap: 8px; }
.pay-opts label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid rgba(20,29,42,0.18); border-radius: 12px; cursor: pointer; font-weight: 500; }
.pay-opts label:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.pay-opts input { accent-color: var(--navy); width: 18px; height: 18px; }
.pay-opts img { height: 22px; width: auto; margin-left: auto; }
.pay-opts small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 12.5px; }
.legalcheck { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-muted); }
.legalcheck input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--navy); flex: none; }
.legalcheck a { color: var(--blue); }

/* ---------- Danke, Kontakt, Konto, 404 ---------- */
.center { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 8vw, 112px); text-align: center; }
.center h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.1; }
.center p { margin-top: 14px; color: var(--ink-muted); font-size: 17px; }
.center .btn { margin-top: 26px; }
.okmark { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: #e3f2f1; color: var(--teal); font-size: 34px; }
.contact { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact__card { background: var(--navy); color: #fff; border-radius: 20px; padding: clamp(24px, 3.5vw, 40px); }
.contact__card h2 { font-size: clamp(24px, 2.4vw, 32px); color: #fff; }
.contact__card p { margin-top: 12px; color: rgba(255,255,255,0.86); }
.contact__card .btn { margin-top: 22px; }
.contact__lines { margin-top: 24px; display: grid; gap: 10px; font-size: 15px; }
.contact__lines a { color: #fff; }
.contact__lines span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.65); }
.formnote { font-size: 13px; color: var(--ink-muted); }

/* ---------- Rechtstexte ---------- */
.legal { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 104px); display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.legal nav { position: sticky; top: 92px; display: grid; gap: 2px; }
.legal nav a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-muted); font-size: 14.5px; white-space: nowrap; }
.legal nav a:hover { background: #fff; color: var(--ink); }
.legal nav a[aria-current] { background: #fff; color: var(--navy); font-weight: 600; }
.prose { overflow-wrap: anywhere; background: #fff; border-radius: 20px; padding: clamp(22px, 4vw, 52px); max-width: 860px; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font-size: clamp(22px, 2vw, 28px); margin-top: 36px; }
.prose h3 { font-size: 20px; margin-top: 30px; }
.prose h4 { font: 600 16px/1.35 var(--sans); margin-top: 22px; }
.prose p, .prose li { color: #33404f; font-size: 16px; line-height: 1.7; max-width: 72ch; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--blue); }
.prose .meta { color: var(--ink-muted); font-size: 14px; }
.prose .addr { padding: 16px 18px; border-radius: 12px; background: var(--mist); }

@media (max-width: 980px) {
	.product, .cartwrap, .checkout, .contact, .legal { grid-template-columns: minmax(0, 1fr); }
	.gallery, .sum, .legal nav { position: static; }
	.legal nav { display: flex; flex-wrap: wrap; gap: 4px; }
	.related__grid { grid-template-columns: 1fr; }
	.shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.diff2__top { grid-template-columns: 1fr; }
	.diff2__top figure { justify-self: start; width: 220px; }
}
@media (max-width: 600px) {
	.circles { gap: 14px 10px; }
	.circles a { width: 100%; max-width: 340px; }
	.shelf__name { font-size: 15px; padding: 12px 12px 4px; }
	.shelf__text { padding: 0 12px 12px; font-size: 13.5px; }
	.cmp-big .cmp__frame { aspect-ratio: 4 / 3; }
	.cmp__tag { font-size: 12px; line-height: 1.3; padding: 5px 10px; bottom: 10px; max-width: calc(50% - 34px); border-radius: 12px; }
	.cmp__tag--l { top: 10px; bottom: auto; }
	.legal nav a { padding: 7px 10px; font-size: 14px; }
	.fields { grid-template-columns: 1fr; }
	.line { grid-template-columns: 60px minmax(0, 1fr); }
	.line img { width: 60px; height: 60px; }
	.line__end { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; }
	.pcard h2 { font-size: 20px; }
}

/* Hero 10: vier Spalten, Hero 8 auf dem Handy als Querkarten */
.circles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); max-width: var(--max); margin-left: auto; margin-right: auto; }
.circles a { width: auto; }
.circles .badge { right: auto; left: calc(50% + 44px); top: 2px; }
@media (max-width: 980px) {
	.circles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.circles { grid-template-columns: minmax(0, 1fr); }
	.shelf { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.shelf a { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.shelf a > img { grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; min-height: 140px; }
	.shelf .badge { left: 8px; right: auto; top: 8px; }
}

/* Hero mit Berg-Silhouette (stehendes Bild, Inhalt scrollt darueber) und German oben */
.hx { position: relative; isolation: isolate; overflow: clip; background: #e9eef1; }
.h10x { background: #eef2f4; }
.hx__bg { position: absolute; inset: 0; z-index: -1; background: url("img/berge-sw.jpg") center 30% / cover no-repeat fixed; }
.hx__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(240,244,246,0.92) 0%, rgba(240,244,246,0.72) 38%, rgba(240,244,246,0.35) 70%, rgba(234,239,242,0.85) 100%); }
.hx .h__in { padding-top: clamp(40px, 5vw, 72px); }
.hx__end { height: clamp(48px, 6vw, 80px); }
.hx .german { margin: 0 auto clamp(22px, 3vw, 32px); padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(255,255,255,0.85); box-shadow: 0 1px 2px rgba(20,29,42,0.06), 0 12px 30px -18px rgba(20,29,42,0.35); }
.hx .german img { width: 52px; height: 52px; }
.hx .german strong { font-size: 18px; }
.hx .german small { font-size: 13.5px; }
.hx h1 { color: var(--navy); }
.hx .sub { color: #2f3d50; }
.shelf a { background: rgba(255,255,255,0.94); box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 24px 44px -30px rgba(20,29,42,0.45); }
.circles img { box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 18px 36px -20px rgba(20,29,42,0.5); }
.circ__text { color: #3a475b; }
@media (max-width: 900px), (hover: none) {
	.hx__bg { background-attachment: scroll; }
}
/* Hero 10: Text der Produkte auf heller Flaeche, damit er auf den Bergen lesbar bleibt */
.h10x .circles a { padding: 18px 16px 20px; border-radius: 22px; background: rgba(255,255,255,0.88); box-shadow: 0 1px 2px rgba(20,29,42,0.05), 0 24px 44px -30px rgba(20,29,42,0.45); transition: transform 0.4s var(--ease); }
.h10x .circles a:hover { transform: translateY(-4px); }
.h10x .circles a:hover img { transform: none; }
.h10x .circ__text { color: #3a475b; }
.h10x .circles .badge { left: calc(50% + 50px); top: 12px; }
.h10x .circles { align-items: stretch; }
/* German-Pille: links oben, groesseres Foto, kleinere Ortszeile */
.hx .german { display: flex; width: fit-content; margin: 0 0 clamp(28px, 4vw, 44px); padding: 6px 22px 6px 6px; gap: 14px; }
.hx .german img { width: 68px; height: 68px; }
.hx .german strong { font-size: 19px; }
.hx .german small { font-size: 12.5px; letter-spacing: 0.01em; margin-top: 1px; }
@media (max-width: 600px) {
	.hx .german { margin-left: auto; margin-right: auto; }
	.hx .german img { width: 60px; height: 60px; }
}

/* Kopfzeile: schmale Vorteilsleiste, darunter ruhige Glasleiste mit Segment-Navigation */
.topbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px clamp(18px, 5vw, 72px); height: 34px; overflow: hidden; padding: 7px var(--gutter); background: #0c2442; color: rgba(255,255,255,0.88); font: 500 12.5px/1.4 var(--sans); letter-spacing: 0.01em; }
.topbar span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar svg { width: 14px; height: 14px; color: var(--glow); flex: none; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.84); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(20,29,42,0.06); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.site-header.is-scrolled { background: rgba(255,255,255,0.93); border-color: rgba(20,29,42,0.09); box-shadow: 0 12px 32px -22px rgba(14,51,88,0.45); }
.site-header__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.site-header__logo { justify-self: start; display: block; border-radius: 6px; }
.site-header__logo img { width: 196px; height: auto; }
.site-nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(14,51,88,0.055); }
.site-nav a { padding: 10px 20px; border-radius: 999px; font: 500 14.5px/1 var(--sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.site-nav a:hover { color: var(--navy); background: rgba(255,255,255,0.75); }
.site-nav a[aria-current] { color: var(--navy); background: #fff; box-shadow: 0 1px 2px rgba(14,51,88,0.1), 0 6px 14px -8px rgba(14,51,88,0.35); }
.site-header__end { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.site-header__shop { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 20px; margin-right: 8px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color 0.3s var(--ease); }
.site-header__shop svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.site-header__shop:hover { background: var(--blue); }
.site-header__shop:hover svg { transform: translateX(3px); }
.icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--logo); cursor: pointer; transition: background-color 0.3s var(--ease); }
@media (hover: hover) { .icon-btn:hover { background: rgba(14,51,88,0.07); } }
.cart b { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--teal); color: #fff; font: 600 10.5px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px #fff; }
.menu-btn { display: none; }
.menu-btn span { position: absolute; left: 13px; right: 13px; top: 50%; height: 1.7px; margin-top: -0.85px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease); }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
/* Handy-/Tablet-Menue: Schublade von rechts wie auf jonathanbesler.de, Produkte als runde Bilder vorne */
.drawer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.drawer::backdrop { background: rgba(8,20,36,0.48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.4s var(--ease); }
.drawer.is-open::backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 420px); overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 76px 18px calc(28px + env(safe-area-inset-bottom)); box-shadow: -24px 0 60px -30px rgba(8,20,36,0.5); transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.drawer__close svg { width: 24px; height: 24px; }
.drawer__logo { position: absolute; top: 22px; left: 18px; }
.drawer__logo img { width: 150px; height: auto; }
.drawer__prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drawer__prod { display: grid; justify-items: center; gap: 10px; padding: 16px 8px 14px; border-radius: 18px; background: var(--mist); text-decoration: none; color: var(--ink); transition: background-color 0.3s var(--ease); }
.drawer__prod:active { background: var(--mist-2); }
.drawer__img { position: relative; display: block; width: 76px; height: 76px; }
.drawer__img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 12px 22px -14px rgba(14,51,88,0.55); }
.drawer__img em { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: #c2415b; color: #fff; font: 600 10.5px/1.2 var(--sans); font-style: normal; white-space: nowrap; box-shadow: 0 0 0 2px #fff; }
.drawer__name { font: 600 13.5px/1.2 var(--sans); white-space: nowrap; }
.drawer__nav { margin-top: 18px; border-top: 1px solid var(--line); }
.drawer__nav a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.drawer__nav strong { font: 600 17px/1.2 var(--sans); white-space: nowrap; }
.drawer__nav small { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer__nav a[aria-current] strong { color: var(--teal); }
.drawer__chev { width: 18px; height: 18px; align-self: center; color: #8a96a8; }
.drawer__card { display: grid; gap: 4px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--mist); }
.drawer__german { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.drawer__german img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.drawer__german strong { display: block; font: 500 17px/1.2 var(--serif); }
.drawer__german small { display: block; font-size: 12.5px; color: var(--ink-muted); }
.drawer__contact { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 14.5px; color: var(--navy); text-decoration: none; }
.drawer__contact svg { width: 18px; height: 18px; flex: none; color: var(--teal); }
/* Menue liegt nur obendrauf: Bildlaufleisten-Platz bleibt reserviert, damit sich die Seite beim Sperren nicht verschiebt */
html { scrollbar-gutter: stable; }
html.has-drawer { overflow: hidden; }
@media (max-width: 360px) { .drawer__panel { width: 92vw; padding-left: 14px; padding-right: 14px; } .drawer__name { font-size: 12px; } }
@media (max-width: 1060px) { .site-header__shop { display: none; } }
@media (max-width: 900px) {
	.site-nav { display: none; }
	.menu-btn { display: grid; }
	.site-header__inner { grid-template-columns: 1fr auto; height: 66px; }
}
@media (max-width: 600px) {
	.site-header__inner { height: 60px; gap: 8px; }
	.site-header__logo img { width: 166px; }
	.site-header__end { gap: 0; margin-right: -8px; }
	.draftbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

@media (min-width: 601px) and (max-width: 980px) { .shelf img { aspect-ratio: 3 / 2; } }

/* Weiches Einblenden beim Scrollen: nur was beim Laden unterhalb des sichtbaren Bereichs liegt */
.wb-reveal-wartet { opacity: 0; filter: blur(10px); transform: translateY(20px); }
.wb-reveal-sichtbar { opacity: 1; filter: blur(0); transform: none; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .wb-reveal-wartet { opacity: 1; filter: none; transform: none; } }

/* Ueberschriften immer dunkelblau (auf hellem Grund); auf dunklen Flaechen bleiben sie weiss */
h1, h2, h3, h4, .quote, .notequal h3, .faq__body h4, .pcard h2, .shelf__name, .circ__name, .german strong, .drawer__german strong, .drawer__name { color: var(--navy); }
.band h1, .band h2, .band h3, .special h2, .contact__card h2, .site-footer h2 { color: #fff; }

/* Fusszeile: Nachtblau mit Bergsilhouette wie im Hero, German-Pille, Produkte mit Bild */
.site-footer { position: relative; isolation: isolate; overflow: clip; background: #0c2442; color: rgba(255,255,255,0.8); }
.sf__berge { position: absolute; inset: 0 0 auto; height: 380px; z-index: -1; background: url("img/berge-sw.jpg") center 30% / cover no-repeat; opacity: 0.14; mix-blend-mode: luminosity; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 100%); mask-image: linear-gradient(180deg, #000 10%, transparent 100%); }
.sf { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--gutter) 0; }
.sf a { color: #fff; text-decoration: none; }
.sf__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-bottom: clamp(32px, 4vw, 44px); border-bottom: 1px solid rgba(255,255,255,0.12); }
.sf__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.sf__logo { display: block; }
.sf__logo img { width: 156px; height: auto; }
.sf__claim { font: 400 italic clamp(18px, 1.6vw, 21px)/1.3 var(--serif); color: rgba(255,255,255,0.92); white-space: nowrap; }
.site-footer .sf__german { margin: 0; display: inline-flex; align-items: center; gap: 12px; padding: 5px 20px 5px 5px; border-radius: 999px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); transition: background-color 0.3s var(--ease); }
.site-footer .sf__german:hover { background: rgba(255,255,255,0.14); }
.site-footer .sf__german img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.site-footer .sf__german strong { display: block; font: 500 17px/1.2 var(--serif); color: #fff; }
.site-footer .sf__german small { display: block; font-size: 12.5px; color: rgba(255,255,255,0.68); white-space: nowrap; }
.sf__cols { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 40px; padding: clamp(36px, 4.5vw, 52px) 0; }
.sf__col h2 { font: 500 19px/1.2 var(--serif); margin-bottom: 18px; }
.sf__prods > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; }
.sf__prods a { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background-color 0.3s var(--ease); }
.sf__prods a:hover { background: rgba(255,255,255,0.08); }
.sf__prods img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,0.22); }
.sf__legal > div { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; font-size: 14.5px; }
.sf__legal a, .sf__contact > a:not(.btn) { color: rgba(255,255,255,0.86); transition: color 0.25s var(--ease); }
.sf__legal a:hover, .sf__contact > a:not(.btn):hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.sf__contact { display: grid; align-content: start; gap: 12px; font-size: 14.5px; }
.sf__contact > a:not(.btn) { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.sf__contact svg { width: 18px; height: 18px; flex: none; color: var(--glow); }
.sf__contact .sf__shop { justify-self: start; margin-top: 8px; color: var(--navy); }
.sf__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.6); }
.site-footer .pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; max-width: none; justify-content: flex-start; }
.site-footer .pay img { height: 26px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.site-footer .legal-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 0 var(--gutter) 26px; background: none; font-size: 12.5px; color: rgba(255,255,255,0.7); }
.site-footer .legal-note a { color: rgba(255,255,255,0.75); }
.site-footer .legal-note__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; color: #fff !important; font-weight: 600; text-decoration: none; }
@media (max-width: 980px) {
	.sf__cols { grid-template-columns: 1fr 1fr; }
	.sf__prods { grid-column: 1 / -1; }
	.sf__prods > div { grid-template-columns: repeat(2, max-content); column-gap: 24px; }
}
@media (max-width: 600px) {
	.sf__top { flex-direction: column; align-items: flex-start; }
	.sf__claim { white-space: normal; }
	.sf__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sf__prods > div { grid-template-columns: minmax(0, 1fr); }
	.sf__bottom { flex-direction: column; align-items: flex-start; }
}

/* Produktseite: ruhiger, gestaffelter Auftritt beim Laden statt hartem Aufpoppen */
@keyframes wb-auf { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.product .gallery, .product .buy > * { animation: wb-auf 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.product .buy > :nth-child(1) { animation-delay: 0.08s; }
.product .buy > :nth-child(2) { animation-delay: 0.14s; }
.product .buy > :nth-child(3) { animation-delay: 0.2s; }
.product .buy > :nth-child(4) { animation-delay: 0.26s; }
.product .buy > :nth-child(n+5) { animation-delay: 0.32s; }
.gallery__main img { transition: opacity 0.35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .product .gallery, .product .buy > * { animation: none; } }

@media (max-width: 980px) {
	.diff, .special .sec, .notequal, .group, .timelapse, .faq { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.facts3 { grid-template-columns: 1fr; }
	.rounds { gap: 12px; }
	.rounds li { font-size: 12px; }
	.thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.thumbs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= Live auf wasserbelebungen.de (WordPress) ================= */

/* Schriften lokal (keine Google-Server) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/lora-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/lora-latin-wght-italic.woff2") format("woff2"); }

body.wb { margin: 0; }
.wb .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wb .skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 10px; background: #fff; color: var(--navy); box-shadow: 0 8px 24px rgba(8,20,36,0.25); }
.wb button { font-family: inherit; }
.wb a:hover { color: inherit; }

/* Warenkorb-Symbol (oeffnet den FunnelKit Side-Cart) */
.site-header .cart { font: inherit; }
.site-header .cart b[data-item-count="0"] { display: none; }

/* Produktseite: echtes WooCommerce-Formular im Entwurfs-Look */
.wb .priceblock { display: flex; flex-direction: column; margin-top: 4px; padding-top: 0; border-top: 0; }
.wb .priceblock form.cart, .wb .priceblock form.cart > div:not([class]) { display: contents; }
.wb .priceblock table.variations { order: 1; }
.wb .priceblock__price { order: 2; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.wb .priceblock__price del { font-size: 0.6em; color: var(--ink-muted); }
.wb .priceblock__price ins { text-decoration: none; }
.wb .priceblock__legal { order: 3; }
.wb .priceblock .single_variation_wrap, .wb .priceblock form.cart > .quantity, .wb .priceblock form.cart > button { order: 4; }
.wb table.variations, .wb table.variations tbody, .wb table.variations tr, .wb table.variations th, .wb table.variations td { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
.wb table.variations { margin: 0; border-collapse: separate; }
.wb table.variations tr { margin-top: 24px; }
.wb table.variations th.label { margin-bottom: 10px; }
.wb table.variations th.label label { font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.wb table.variations th.label .wb-wahl { font-weight: 400; color: var(--ink-muted); }
.wb table.variations td.value select { display: none !important; }
.wb .reset_variations { display: none !important; }
.wb .woo-variation-swatches .variable-items-wrapper, .wb .variable-items-wrapper { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none; }
.wb .variable-items-wrapper .variable-item { margin: 0 !important; list-style: none; }
.wb .variable-items-wrapper .variable-item:not(.color-variable-item) { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 44px; padding: 0 18px !important; border-radius: 999px !important; border: 0 !important; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2) !important; color: var(--ink) !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease); }
.wb .variable-items-wrapper .variable-item:not(.color-variable-item):hover { box-shadow: inset 0 0 0 1px var(--navy) !important; }
.wb .variable-items-wrapper .variable-item:not(.color-variable-item).selected { background: var(--navy) !important; box-shadow: none !important; color: #fff !important; }
.wb .variable-items-wrapper .variable-item:not(.color-variable-item) .variable-item-contents { display: inline-flex; align-items: center; }
.wb .variable-items-wrapper .variable-item-span-button { padding: 0 !important; font: 500 14.5px/1 var(--sans) !important; white-space: nowrap; color: inherit !important; }
.wb .variable-items-wrapper .image-variable-item .variable-item-contents { display: none !important; }
.wb [data-wvstooltip]:not(.image-variable-item)::before, .wb [data-wvstooltip]:not(.image-variable-item)::after { display: none !important; }
.wb .custom-qty-label { display: none !important; }
.wb .woo-selected-variation-item-name { font-weight: 400; color: var(--ink-muted); }
.wb .variable-items-wrapper .color-variable-item { width: 36px !important; height: 36px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important; box-shadow: none !important; background: none !important; cursor: pointer; transition: transform 0.25s var(--ease); }
.wb .variable-items-wrapper .color-variable-item .variable-item-contents { width: 100%; height: 100%; padding: 0; }
.wb .variable-items-wrapper .color-variable-item .variable-item-span-color { display: block; width: 100%; height: 100%; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2) !important; }
.wb .variable-items-wrapper .color-variable-item:hover { transform: scale(1.1); }
.wb .variable-items-wrapper .color-variable-item.selected .variable-item-span-color { box-shadow: inset 0 0 0 1px rgba(20,29,42,0.2), 0 0 0 3px #fff, 0 0 0 5px var(--navy) !important; }
.wb .variable-items-wrapper .variable-item::before { display: none !important; }
.wb .variable-items-wrapper .variable-item.disabled, .wb .variable-items-wrapper .variable-item.out-of-stock { opacity: 0.4; }
.wb .woocommerce-variation-price { display: none !important; }
.wb .woocommerce-variation-description { display: none; }
.wb .woocommerce-variation-availability p { margin: 12px 0 0; font-size: 14px; color: var(--teal); }
.wb .woocommerce-variation-availability p.out-of-stock { color: #a2283f; }
.wb .variations_button, .wb form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.wb .priceblock .quantity { display: inline-flex; align-items: center; border: 1px solid rgba(20,29,42,0.2); border-radius: 999px; background: #fff; }
.wb .quantity input.qty { width: 40px; height: 46px; border: 0; padding: 0; text-align: center; font: 600 16px/1 var(--sans); background: transparent; color: var(--ink); -moz-appearance: textfield; }
.wb .quantity input.qty::-webkit-outer-spin-button, .wb .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wb .priceblock .quantity button { width: 44px; height: 46px; border: 0; background: transparent; font: 600 18px/1 var(--sans); color: var(--ink); cursor: pointer; }
.wb .single_add_to_cart_button { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--navy) !important; color: #fff !important; font: 600 15px/1 var(--sans) !important; cursor: pointer; transition: background-color 0.35s var(--ease), transform 0.35s var(--ease); }
.wb .single_add_to_cart_button:hover { background: var(--blue) !important; transform: translateY(-2px); }
.wb .single_add_to_cart_button.disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.wb .single_add_to_cart_button.loading { opacity: 0.7; }
.wb .wc-gzd-additional-info, .wb .wc-gzd-additional-wrapper { display: none; }
.wb .gallery__main img { height: 100%; }

/* WooCommerce-Hinweise */
.wb .woocommerce-notices-wrapper:empty { display: none; }
.wb .woocommerce-message, .wb .woocommerce-info, .wb .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; border: 0; border-radius: 14px; background: #e6f2f1; color: var(--ink); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.wb .woocommerce-error { background: #fbe9ed; color: #7a2236; }
.wb .woocommerce-message::before, .wb .woocommerce-info::before, .wb .woocommerce-error::before { display: none; }
.wb .woocommerce-message .button, .wb .woocommerce-info .button { order: 2; }
.wb .wb-notices { max-width: var(--max); margin: 16px auto 0; padding: 0 var(--gutter); }

/* Seiten mit WooCommerce-Inhalt (Warenkorb) */
.wb-woo { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 104px); }
.wb-woo .woocommerce { font-size: 15.5px; }
.wb-woo h2, .wb-woo h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 14px; }
.wb-woo .u-columns, .wb-woo .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.wb-woo .u-columns > div, .wb-woo .col2-set > div { width: auto !important; float: none !important; }
.wb-woo .u-columns::before, .wb-woo .u-columns::after, .wb-woo .col2-set::before, .wb-woo .col2-set::after { display: none; }
.wb-woo label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.wb-woo .form-row { margin: 0 0 14px; padding: 0; }
.wb-woo input.input-text, .wb-woo input[type="text"], .wb-woo input[type="email"], .wb-woo input[type="password"], .wb-woo input[type="tel"], .wb-woo select, .wb-woo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(20,29,42,0.2); border-radius: 12px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.wb-woo input:focus, .wb-woo select:focus, .wb-woo textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.wb-woo .button, .wb-woo button[type="submit"], .wb .woocommerce-message .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--navy); color: #fff !important; font: 600 14.5px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color 0.3s var(--ease); }
.wb-woo .button:hover, .wb-woo button[type="submit"]:hover { background: var(--blue); }
.wb-woo a { color: var(--blue); }
.wb-woo table.shop_table { width: 100%; border-collapse: collapse; border: 0; font-size: 15px; }
.wb-woo table.shop_table th, .wb-woo table.shop_table td { padding: 12px 8px; border: 0; border-bottom: 1px solid var(--line); text-align: left; }

/* Rechtstexte aus WordPress (the_content) */
.wb .prose > :first-child { margin-top: 0; }
.wb .prose h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 34px 0 10px; }
.wb .prose h3 { font-size: 19px; margin: 26px 0 8px; }
.wb .prose h4 { font: 600 16px/1.4 var(--sans); margin: 22px 0 6px; }
.wb .prose p, .wb .prose ul, .wb .prose ol { margin: 0 0 12px; }
.wb .prose ul, .wb .prose ol { padding-left: 1.3em; }
.wb .prose a { color: var(--blue); }
.wb .prose form { margin-top: 20px; }

/* Widerrufs-Schaltflaeche (Pflicht) und Gewaehrleistungshinweis: dunkle Leiste direkt unter der Fusszeile */
.wb .eu-owb-order-withdraw-from-contract-button { margin: 0; padding: 0 var(--gutter) 2px; background: #0c2442; text-align: center; }
.wb .eu-owb-order-withdraw-from-contract-button a.button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; background: transparent; color: #fff; font: 600 13px/1 var(--sans); text-decoration: none; transition: background-color 0.3s var(--ease); }
.wb .eu-owb-order-withdraw-from-contract-button a.button:hover { background: rgba(255,255,255,0.1); }
.wb .wc-gzd-legal-guarantee-footer { margin: 0; padding-bottom: 26px; background: #0c2442; }
.wb .wc-gzd-legal-guarantee-footer a { color: rgba(255,255,255,0.75); }

.wb .buy h1 { font-size: clamp(30px, 3.1vw, 42px); }

/* Warenkorb-Seite (falls jemand /warenkorb/ direkt aufruft; normal laeuft der Side-Cart) */
.wb-woo .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: var(--navy) !important; color: #fff !important; font: 600 16px/1 var(--sans) !important; text-decoration: none; }
.wb-woo .wc-proceed-to-checkout a.checkout-button:hover { background: var(--blue) !important; }
.wb-woo .actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wb-woo .actions .coupon .input-text { width: 200px !important; min-height: 46px; }
.wb-woo .actions .button[disabled] { opacity: 0.45; }
.wb-woo .product-remove a.remove { color: #a2283f !important; text-decoration: none; font-size: 22px; }
.wb-woo .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.wb-woo .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 520px; margin-left: auto !important; }
.wb-woo .cart-empty.woocommerce-info { margin-bottom: 16px; }
.wb-woo .return-to-shop .button { margin-top: 4px; }
.wb .wb-notices:has(.woocommerce-notices-wrapper:empty) { display: none; }

/* Produktseite ohne Nachladen-Spruenge: alles, was sonst erst per JavaScript kommt, steht schon im HTML/CSS */
html body.wb .variable-items-wrapper .image-variable-item::after { content: attr(data-title) !important; display: inline !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: none !important; box-shadow: none !important; border: 0 !important; color: inherit !important; font: 500 14.5px/1 var(--sans) !important; white-space: nowrap; pointer-events: none; }
html body.wb .variable-items-wrapper .image-variable-item::before { display: none !important; }
html body.wb .woo-selected-variation-item-name { display: none !important; }
html body.wb .variable-items-wrapper .color-variable-item, html body.wb .variable-items-wrapper .color-variable-item .variable-item-contents, html body.wb .variable-items-wrapper .color-variable-item .variable-item-span-color { border-radius: 50% !important; }