/* =============================================================================
kaufen-heizoel.com — „Grüne Wärme" Design-System
-----------------------------------------------------------------------------
Ein kohärentes, premium Design-System für alle Seiten.
Leitfarbe: tiefes Wald-/Pinien-Grün. Akzent: warmes Bernstein/Gold
(Öl, Wärme, Flamme, Ersparnis). Typo: Arial (Display + Body).
CTA-Buttons: Blau. Mobile-first, barrierearm, performant.
Ladereihenfolge: Bootstrap 5 → bootstrap-icons → heizoel.css
INHALT
01 Design-Tokens (:root)
02 Bootstrap-Overrides (Primary → Grün)
03 Basis & Typografie
04 Utilities (Eyebrow, Lead, Zahlen, Skip-Link)
05 Buttons
06 Karten (.card-heiz + Produkt/USP/Step/Review/Blog)
07 Sections & Wellen-Divider
08 Chips & Trust-Badges
09 Formulare
10 Hero & Glassmorphism
11 Live-Preis-Widget
12 Breadcrumbs
13 Top-Bar & Haupt-Header / Navigation
14 Footer
15 Cookie-Consent
16 Scroll-to-top
17 Bestell-Assistent-Basics (Produkt-/Zahlung-/Versand-Karten)
18 Motion: Reveals, Float, Reduced-Motion-Safety-Net
19 Responsive Feinschliff
============================================================================= */
/* ============================================================
01 DESIGN-TOKENS
============================================================ */
:root{
/* Grün (Marke) */
--green-950:#08160d; --green-900:#0d2818; --green-800:#124a29;
--green-700:#166534; --green-600:#15803d; --green-500:#1a9c46;
--green-400:#34c759; --green-300:#7be3a0; --green-100:#d7f4df; --green-50:#eefbf1;
--brand:#166534; /* Primär */
--brand-deep:#0d2818; /* Hero/Footer-Basis */
/* Bernstein/Gold-Akzent (Öl/Wärme/CTA-Pop) */
--amber-600:#15803d; --amber-500:#1a9c46; --amber-400:#34c759; --amber-300:#7be3a0;
--amber-glow:rgba(26,156,70,.3);
/* Blau (CTA: Bestellen / Berechnen) */
--blue-700:#1D4ED8; --blue-600:#2563EB; --blue-500:#3B82F6;
--blue-glow:rgba(37,99,235,.35);
/* Neutral / Papier */
--paper:#faf9f4; --paper-2:#f3f4ee; --card:#ffffff;
--ink-900:#0b1a10; --ink-700:#31413a; --ink-500:#4f5d54; --muted:#6b7a70;
--line:#e6e9e2;
/* Effekte */
--radius:18px; --radius-sm:12px; --radius-lg:28px; --radius-pill:999px;
--shadow-sm:0 1px 3px rgba(13,40,24,.06),0 1px 2px rgba(13,40,24,.04);
--shadow-md:0 8px 30px rgba(13,40,24,.08),0 2px 8px rgba(13,40,24,.05);
--shadow-lg:0 24px 60px rgba(13,40,24,.14),0 8px 20px rgba(13,40,24,.08);
--shadow-amber:0 12px 34px rgba(22,101,52,.28);
--shadow-blue:0 12px 34px rgba(37,99,235,.30);
--ring:0 0 0 4px rgba(26,156,70,.18);
--grad-hero:radial-gradient(120% 120% at 15% 10%,#155e31 0%,#0d2818 55%,#08160d 100%);
--grad-brand:linear-gradient(135deg,#166534 0%,#1a9c46 100%);
--grad-amber:linear-gradient(135deg,#1a9c46 0%,#15803d 100%);
--grad-blue:linear-gradient(135deg,#3B82F6 0%,#1D4ED8 100%);
--grad-paper:linear-gradient(180deg,#ffffff 0%,#faf9f4 100%);
--maxw:1200px; --ease:cubic-bezier(.22,1,.36,1);
/* Typografie */
--font-display:Arial, Helvetica, sans-serif;
--font-body:Arial, Helvetica, sans-serif;
/* Rausch-Textur (SVG, sehr dezent) */
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* ============================================================
02 BOOTSTRAP-OVERRIDES — Primary wird Grün
============================================================ */
:root{
--bs-primary:#166534;
--bs-primary-rgb:22,101,52;
--bs-link-color:#166534;
--bs-link-color-rgb:22,101,52;
--bs-link-hover-color:#15803d;
--bs-link-hover-color-rgb:21,128,61;
--bs-body-font-family:var(--font-body);
--bs-body-color:#31413a;
--bs-body-bg:#faf9f4;
--bs-border-radius:12px;
}
.btn-primary{
--bs-btn-bg:var(--brand);
--bs-btn-border-color:var(--brand);
--bs-btn-hover-bg:var(--green-600);
--bs-btn-hover-border-color:var(--green-600);
--bs-btn-active-bg:var(--green-800);
--bs-btn-active-border-color:var(--green-800);
--bs-btn-disabled-bg:var(--green-700);
--bs-btn-disabled-border-color:var(--green-700);
--bs-btn-focus-shadow-rgb:26,156,70;
}
.btn-outline-primary{
--bs-btn-color:var(--brand);
--bs-btn-border-color:var(--brand);
--bs-btn-hover-bg:var(--brand);
--bs-btn-hover-border-color:var(--brand);
--bs-btn-active-bg:var(--green-800);
--bs-btn-active-border-color:var(--green-800);
--bs-btn-focus-shadow-rgb:26,156,70;
}
.text-primary{color:var(--brand)!important;}
.bg-primary{background-color:var(--brand)!important;}
.badge.bg-primary{background-color:var(--brand)!important;}
.progress-bar{background-color:var(--brand);background-image:var(--grad-brand);}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand);}
.form-check-input:focus{border-color:var(--green-500);box-shadow:var(--ring);}
.accordion{
--bs-accordion-btn-focus-box-shadow:var(--ring);
--bs-accordion-active-bg:var(--green-50);
--bs-accordion-active-color:var(--green-800);
--bs-accordion-border-color:var(--line);
}
.accordion-button{font-weight:700;color:var(--ink-900);}
.accordion-button:not(.collapsed){box-shadow:inset 0 -1px 0 var(--line);}
.pagination{
--bs-pagination-color:var(--brand);
--bs-pagination-active-bg:var(--brand);
--bs-pagination-active-border-color:var(--brand);
--bs-pagination-focus-box-shadow:var(--ring);
--bs-pagination-hover-color:var(--green-800);
}
@media (min-width:1400px){
.container,.container-lg,.container-xl,.container-xxl{max-width:var(--maxw);}
}
/* ============================================================
03 BASIS & TYPOGRAFIE
============================================================ */
html{scroll-behavior:auto;scroll-padding-top:96px;}
body{
font-family:var(--font-body);
font-size:1.0625rem; /* 17px */
line-height:1.65;
color:var(--ink-700);
background-color:var(--paper);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
font-family:var(--font-display);
font-weight:700;
letter-spacing:-.02em;
line-height:1.15;
color:var(--ink-900);
}
h1,.h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;}
h2,.h2{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;}
h3,.h3{font-size:clamp(1.3rem,2.5vw,1.7rem);}
h4,.h4{font-size:1.2rem;}
p{margin-bottom:1rem;}
a{color:var(--brand);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--green-600);}
img,svg,video{max-width:100%;height:auto;}
::selection{background:var(--green-100);color:var(--green-900);}
:focus-visible{outline:3px solid var(--green-500);outline-offset:2px;border-radius:4px;}
strong,b{font-weight:700;}
hr{border-color:var(--line);opacity:1;}
/* ============================================================
04 UTILITIES
============================================================ */
/* Eyebrow-Label über Section-Titeln */
.eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--green-600);margin-bottom:.9rem;
}
.eyebrow::before{
content:"";width:26px;height:2px;border-radius:2px;
background:var(--grad-amber);flex-shrink:0;
}
.section--dark .eyebrow,.hero-heiz .eyebrow{color:var(--green-300);}
/* Section-Kopf (Eyebrow + Titel + Lead), wiederverwendbar */
.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}
.section-head h2{margin-bottom:.75rem;}
.lead-heiz{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.7;color:var(--ink-500);font-weight:500;}
.section--dark .lead-heiz,.hero-heiz .lead-heiz{color:rgba(255,255,255,.86);}
/* Zahlen/Preise immer tabellarisch */
.tabular,[data-countup],.price-widget__num{font-variant-numeric:tabular-nums;}
/* Grüner Marker im Fließtext */
.mark-heiz{background:linear-gradient(180deg,transparent 55%,var(--green-100) 55%);padding:0 .15em;border-radius:2px;}
.section--dark .mark-heiz,.hero-heiz .mark-heiz{background:none;padding:0;}
/* Skip-Link (A11y) */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:2000;
background:var(--green-900);color:#fff;padding:.75rem 1.25rem;
border-radius:0 0 var(--radius-sm) 0;font-weight:700;
}
.skip-link:focus{left:0;color:#fff;}
/* Icon-Kreis/Blob (für USP/Kontakt-Listen) */
.icon-blob{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:var(--green-50);color:var(--green-700);font-size:1.5rem;flex-shrink:0;
}
.icon-blob--amber{background:#e9f5ee;color:var(--amber-600);}
.icon-blob--dark{background:rgba(255,255,255,.08);color:var(--green-300);}
/* ============================================================
05 BUTTONS
============================================================ */
.btn-heiz,.btn-heiz-amber,.btn-ghost,.btn-heiz-light{
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
padding:.9rem 1.9rem;border-radius:12px;
font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.25;
border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),filter .25s var(--ease);
}
/* Primär: grüner Verlauf */
.btn-heiz{
background-image:var(--grad-brand);color:#fff;
box-shadow:0 10px 26px rgba(22,101,52,.28);
}
.btn-heiz:hover,.btn-heiz:focus{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(22,101,52,.36);filter:brightness(1.06);}
.btn-heiz:active{transform:translateY(0);filter:brightness(.97);}
/* CTA-Pop: Blau, weißer Text (Bestellen / Berechnen) */
.btn-heiz-amber{
background-image:none;background-color:#1D4ED8;color:#fff;
box-shadow:0 8px 22px rgba(29,78,216,.25);
}
.btn-heiz-amber:hover,.btn-heiz-amber:focus{color:#fff;background-color:#1E40AF;transform:translateY(-2px);box-shadow:0 12px 30px rgba(29,78,216,.32);}
.btn-heiz-amber:active{transform:translateY(0);filter:brightness(.97);}
/* Ghost / Outline grün */
.btn-ghost{
background:transparent;color:var(--brand);
box-shadow:inset 0 0 0 2px var(--green-600);
}
.btn-ghost:hover,.btn-ghost:focus{color:var(--green-800);background:var(--green-50);transform:translateY(-2px);}
.section--dark .btn-ghost,.hero-heiz .btn-ghost,.btn-ghost--light{
color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
}
.section--dark .btn-ghost:hover,.hero-heiz .btn-ghost:hover,.btn-ghost--light:hover{
color:#fff;background:rgba(255,255,255,.08);
}
/* Hell (auf dunklen Flächen) */
.btn-heiz-light{background:#fff;color:var(--green-800);box-shadow:var(--shadow-md);}
.btn-heiz-light:hover,.btn-heiz-light:focus{color:var(--green-900);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
/* Größen & Breite */
.btn-heiz--sm{padding:.55rem 1.2rem;font-size:.92rem;}
.btn-heiz--lg{padding:1.05rem 2.4rem;font-size:1.1rem;}
.btn-heiz--block{display:flex;width:100%;}
/* Disabled */
.btn-heiz:disabled,.btn-heiz-amber:disabled,.btn-ghost:disabled,.btn-heiz-light:disabled,
.btn-heiz.disabled,.btn-heiz-amber.disabled{
opacity:.55;pointer-events:none;transform:none;box-shadow:none;
}
/* Pfeil-Micro-Interaction */
.btn-heiz .bi-arrow-right,.btn-heiz-amber .bi-arrow-right{transition:transform .25s var(--ease);}
.btn-heiz:hover .bi-arrow-right,.btn-heiz-amber:hover .bi-arrow-right{transform:translateX(4px);}
/* ============================================================
06 KARTEN
============================================================ */
.card-heiz{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card-heiz:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card-heiz--static:hover{transform:none;box-shadow:var(--shadow-md);}
.card-heiz .card-body,.card-heiz__body{padding:clamp(1.4rem,2.5vw,2rem);}
/* — USP-Karte — */
.usp-card{height:100%;padding:clamp(1.4rem,2.5vw,2rem);}
.usp-card .icon-blob{margin-bottom:1.1rem;}
.usp-card h3{font-size:1.15rem;margin-bottom:.5rem;}
.usp-card p{color:var(--ink-500);font-size:.97rem;margin-bottom:0;}
/* — Step-Karte (Ablauf in 4 Schritten) — */
.step-card{position:relative;height:100%;padding:clamp(1.4rem,2.5vw,2rem);overflow:hidden;}
.step-card__num{
font-family:var(--font-display);font-weight:800;font-size:3.2rem;line-height:1;
color:var(--green-100);display:block;margin-bottom:.6rem;
font-variant-numeric:tabular-nums;
}
.step-card h3{font-size:1.12rem;margin-bottom:.45rem;}
.step-card p{color:var(--ink-500);font-size:.95rem;margin-bottom:0;}
.step-card::after{
content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;
border-radius:50%;background:radial-gradient(circle,var(--green-50) 0%,transparent 70%);
pointer-events:none;
}
/* — Review-/Kundenstimmen-Karte — */
.review-card{height:100%;padding:clamp(1.4rem,2.5vw,1.9rem);display:flex;flex-direction:column;}
.review-card__stars{color:var(--green-600);font-size:1.05rem;letter-spacing:2px;margin-bottom:.8rem;}
.review-card__text{font-size:.98rem;color:var(--ink-700);flex-grow:1;}
.review-card__text::before{
content:"„";display:block;font-family:var(--font-display);font-size:2.6rem;line-height:.6;
color:var(--green-300);margin-bottom:.35rem;
}
.review-card__author{
margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
display:flex;align-items:center;gap:.7rem;font-size:.92rem;
}
.review-card__avatar{
width:40px;height:40px;border-radius:50%;flex-shrink:0;
background:var(--grad-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;
font-weight:800;font-family:var(--font-display);
}
.review-card__author strong{display:block;color:var(--ink-900);}
.review-card__author span{color:var(--muted);font-size:.85rem;}
/* — Blog-/Ratgeber-Karte — */
.blog-card{height:100%;overflow:hidden;display:flex;flex-direction:column;}
.blog-card__media{
position:relative;aspect-ratio:16/9;overflow:hidden;
background:var(--grad-hero);display:flex;align-items:center;justify-content:center;
border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.blog-card:hover .blog-card__media img{transform:scale(1.05);}
.blog-card__media .bi{font-size:3rem;color:rgba(255,255,255,.35);}
.blog-card__body{padding:1.4rem;display:flex;flex-direction:column;flex-grow:1;}
.blog-card__tag{align-self:flex-start;margin-bottom:.75rem;}
.blog-card h3{font-size:1.15rem;margin-bottom:.5rem;}
.blog-card h3 a{color:var(--ink-900);}
.blog-card h3 a:hover{color:var(--brand);}
.blog-card p{color:var(--ink-500);font-size:.95rem;flex-grow:1;}
.blog-card__more{font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:.35rem;}
.blog-card__more .bi{transition:transform .25s var(--ease);}
.blog-card:hover .blog-card__more .bi{transform:translateX(4px);}
/* ============================================================
07 SECTIONS & WELLEN-DIVIDER
============================================================ */
.section{padding:clamp(3.5rem,7vw,6rem) 0;position:relative;}
.section--paper{background:var(--paper);}
.section--paper-2{background:var(--paper-2);}
.section--white{background:#fff;}
.section--tint{background:var(--green-50);}
.section--dark{
background:var(--grad-hero);color:rgba(255,255,255,.8);
position:relative;isolation:isolate;overflow:hidden;
}
.section--dark::before{
content:"";position:absolute;inset:0;background-image:var(--noise);
pointer-events:none;z-index:-1;
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark a:not([class*="btn-"]){color:var(--green-300);}
.section--dark a:not([class*="btn-"]):hover{color:#fff;}
/* Organische SVG-Wellen zwischen Sektionen.
Nutzung:
direkt VOR einer Sektion platzieren — Wellenfarbe = Farbe der FOLGENDEN Sektion.
--flip spiegelt horizontal für Abwechslung. */
.wave-div{
display:block;width:100%;height:clamp(42px,6vw,90px);
background-repeat:no-repeat;background-size:100% 100%;
margin-bottom:-1px;pointer-events:none;
}
.wave-div--paper{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23faf9f4' d='M0,52 C220,86 440,10 720,30 C1000,50 1220,84 1440,42 L1440,90 L0,90 Z'/%3E%3C/svg%3E");}
.wave-div--white{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,52 C220,86 440,10 720,30 C1000,50 1220,84 1440,42 L1440,90 L0,90 Z'/%3E%3C/svg%3E");}
.wave-div--tint{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23eefbf1' d='M0,52 C220,86 440,10 720,30 C1000,50 1220,84 1440,42 L1440,90 L0,90 Z'/%3E%3C/svg%3E");}
.wave-div--dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%230d2818' d='M0,52 C220,86 440,10 720,30 C1000,50 1220,84 1440,42 L1440,90 L0,90 Z'/%3E%3C/svg%3E");}
.wave-div--flip{transform:scaleX(-1);}
/* ============================================================
08 CHIPS & TRUST-BADGES
============================================================ */
.chip{
display:inline-flex;align-items:center;gap:.45rem;
padding:.45rem .95rem;border-radius:var(--radius-pill);
background:var(--green-50);color:var(--green-700);
border:1px solid var(--green-100);
font-weight:600;font-size:.88rem;line-height:1.3;
}
.chip .bi{font-size:1rem;color:var(--green-600);}
.chip--amber{background:#e9f5ee;color:#166534;border-color:#cdeeda;}
.chip--amber .bi{color:var(--amber-600);}
.chip--dark{background:rgba(255,255,255,.08);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.16);}
.chip--dark .bi{color:var(--green-300);}
.chip--neutral{background:var(--paper-2);color:var(--ink-500);border-color:var(--line);}
/* Trust-Strip: Reihe aus Badges (Partial includes/trust-badges.php) */
.trust-strip{display:flex;flex-wrap:wrap;gap:.6rem .7rem;align-items:center;}
.trust-strip--center{justify-content:center;}
.trust-strip .chip{white-space:nowrap;}
/* ============================================================
09 FORMULARE — grüne Fokus-Ringe, großzügig
============================================================ */
.form-label{font-weight:700;color:var(--ink-700);font-size:.95rem;margin-bottom:.45rem;}
.form-control,.form-select{
border:1.5px solid var(--line);
border-radius:var(--radius-sm);
padding:.8rem 1.05rem;
font-size:1rem;color:var(--ink-900);
background-color:#fff;
transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.form-control::placeholder{color:var(--muted);opacity:.8;}
.form-control:focus,.form-select:focus{
border-color:var(--green-500);
box-shadow:var(--ring);
background-color:#fff;
}
.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--green-500);}
.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:var(--green-500);box-shadow:var(--ring);}
.form-control.is-invalid:focus{box-shadow:0 0 0 4px rgba(220,53,69,.15);}
.form-text{color:var(--muted);font-size:.85rem;}
.input-group-text{
background:var(--green-50);border:1.5px solid var(--line);
color:var(--green-700);border-radius:var(--radius-sm);font-weight:600;
}
/* Feld mit Icon links */
.field-icon{position:relative;}
.field-icon>.bi{
position:absolute;left:1rem;top:50%;transform:translateY(-50%);
color:var(--green-600);font-size:1.05rem;pointer-events:none;
}
.field-icon>.form-control,.field-icon>.form-select{padding-left:2.6rem;}
/* ============================================================
10 HERO & GLASSMORPHISM
============================================================ */
.hero-heiz{
position:relative;background:var(--grad-hero);color:#fff;
overflow:hidden;isolation:isolate;
}
.hero-heiz::before{ /* Rausch-Textur */
content:"";position:absolute;inset:0;background-image:var(--noise);
pointer-events:none;z-index:-1;
}
.hero-heiz::after{ /* weiche Lichtflecken: grün + bernstein */
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(640px 420px at 82% 8%,rgba(26,156,70,.13),transparent 62%),
radial-gradient(560px 460px at 8% 92%,rgba(52,199,89,.12),transparent 60%),
radial-gradient(320px 320px at 60% 55%,rgba(123,227,160,.07),transparent 70%);
}
.hero-heiz h1{color:#fff;}
.hero-heiz__pad{padding:clamp(3.5rem,8vw,7rem) 0 clamp(4.5rem,9vw,7.5rem);}
/* Glaskarte (Rechner über dem Hero) */
.glass-card{
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:blur(18px) saturate(150%);
backdrop-filter:blur(18px) saturate(150%);
border:1px solid rgba(255,255,255,.65);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
padding:clamp(1.6rem,3vw,2.4rem);
color:var(--ink-700);
}
.glass-card h1,.glass-card h2,.glass-card h3{color:var(--ink-900);}
.glass-card--dark{
background:rgba(13,40,24,.55);
border-color:rgba(255,255,255,.14);
color:rgba(255,255,255,.85);
}
.glass-card--dark h2,.glass-card--dark h3,.glass-card--dark .form-label{color:#fff;}
/* Öl-Tropfen (SVG-Container mit sanftem Float) */
.oil-drop{display:inline-block;filter:drop-shadow(0 18px 30px rgba(8,22,13,.35));}
/* ============================================================
11 LIVE-PREIS-WIDGET (includes/price-widget.php)
============================================================ */
.price-widget{
position:relative;overflow:hidden;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
padding:clamp(1.6rem,3vw,2.3rem);
}
.price-widget::before{ /* warmer Glanz oben rechts */
content:"";position:absolute;top:-70px;right:-70px;width:230px;height:230px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(26,156,70,.16) 0%,transparent 68%);
}
.price-widget--glass{
background:rgba(255,255,255,.93);
-webkit-backdrop-filter:blur(18px) saturate(150%);
backdrop-filter:blur(18px) saturate(150%);
border-color:rgba(255,255,255,.65);
}
.price-widget__head{
display:flex;align-items:center;justify-content:space-between;
gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;
}
.price-widget__label{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.8rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-700);
}
.price-widget__value{
display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
margin-bottom:.35rem;
}
.price-widget__num{
font-family:var(--font-display);font-weight:800;
font-size:clamp(2.7rem,6vw,3.9rem);line-height:1;
color:var(--green-800);letter-spacing:-.02em;
}
.price-widget__unit{font-size:1.05rem;font-weight:700;color:var(--ink-500);}
.price-widget__per100{font-size:1rem;color:var(--ink-500);margin-bottom:1rem;}
.price-widget__per100 strong{color:var(--ink-900);font-weight:800;font-variant-numeric:tabular-nums;}
.price-widget__meta{
font-size:.85rem;color:var(--muted);
padding-top:.9rem;border-top:1px dashed var(--line);margin-bottom:1.2rem;
}
.price-widget__note{font-size:.8rem;color:var(--muted);margin:1rem 0 0;line-height:1.5;}
.price-widget__cta{width:100%;}
@media (min-width:576px){.price-widget__cta{width:auto;}}
/* Live-Punkt (pulsierend, opacity/transform-only) */
.live-dot{
display:inline-block;width:9px;height:9px;border-radius:50%;
background:var(--green-500);position:relative;flex-shrink:0;
}
.live-dot::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
background:var(--green-400);opacity:.4;
animation:heizPulse 2.2s var(--ease) infinite;
}
@keyframes heizPulse{
0%{transform:scale(.6);opacity:.5;}
70%{transform:scale(1.4);opacity:0;}
100%{transform:scale(.6);opacity:0;}
}
/* Neutraler Trend-Chip (keine erfundenen Marktdaten) */
.trend-chip{
display:inline-flex;align-items:center;gap:.4rem;
padding:.35rem .8rem;border-radius:var(--radius-pill);
background:var(--paper-2);border:1px solid var(--line);
color:var(--ink-500);font-size:.82rem;font-weight:700;
}
.trend-chip .bi{color:var(--amber-500);}
/* ============================================================
12 BREADCRUMBS (includes/breadcrumbs.php)
============================================================ */
.breadcrumbs{padding:1rem 0 0;font-size:.9rem;}
.breadcrumbs ol{
display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;
list-style:none;margin:0;padding:0;
}
.breadcrumbs li{display:inline-flex;align-items:center;color:var(--muted);}
.breadcrumbs li+li::before{
content:"›";margin:0 .55rem;color:var(--green-300);font-weight:700;
}
.breadcrumbs a{color:var(--ink-500);font-weight:600;}
.breadcrumbs a:hover{color:var(--brand);}
.breadcrumbs [aria-current="page"]{color:var(--green-700);font-weight:700;}
.section--dark .breadcrumbs a,.hero-heiz .breadcrumbs a{color:rgba(255,255,255,.7);}
.section--dark .breadcrumbs [aria-current="page"],.hero-heiz .breadcrumbs [aria-current="page"]{color:#fff;}
/* ============================================================
13 TOP-BAR & HAUPT-HEADER / NAVIGATION
============================================================ */
/* — schlanke Top-Bar — */
.top-bar{
background:var(--green-950);color:rgba(255,255,255,.78);
font-size:.9rem;padding:.55rem 0;position:relative;z-index:1031;
}
.top-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;}
.top-bar__group{display:flex;align-items:center;gap:.5rem 1.1rem;flex-wrap:wrap;}
.top-bar__item{display:inline-flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.78);font-weight:500;}
.top-bar__item .bi{color:var(--green-300);font-size:.9rem;}
a.top-bar__item:hover{color:#fff;}
/* — Sticky Haupt-Header — */
.main-header{
position:sticky;top:0;z-index:1030;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(14px) saturate(150%);
backdrop-filter:blur(14px) saturate(150%);
border-bottom:1px solid var(--line);
transition:box-shadow .3s var(--ease);
}
.main-header.scrolled{box-shadow:var(--shadow-md);}
.main-header .navbar{padding:.85rem 0;}
#headerLogo{height:50px;width:auto;display:block;}
/* Nav-Links */
.main-header .navbar-nav{gap:.15rem;}
.main-header .nav-link{
font-weight:700;font-size:.97rem;color:var(--ink-700);
padding:.55rem 1rem!important;border-radius:var(--radius-pill);
transition:color .2s var(--ease),background-color .2s var(--ease);
position:relative;
}
.main-header .nav-link:hover{color:var(--brand);background:var(--green-50);}
.main-header .nav-link.active{color:var(--green-800);background:transparent;font-weight:800;}
.main-header .nav-link.active::after{
content:"";position:absolute;left:50%;bottom:.18rem;transform:translateX(-50%);
width:18px;height:3px;border-radius:3px;background:var(--grad-amber);
}
.header-cta{display:flex;align-items:center;gap:.75rem;}
/* Burger-Toggler */
.main-header .navbar-toggler{
border:0;padding:.5rem .4rem;display:inline-flex;flex-direction:column;gap:5px;
box-shadow:none!important;
}
.main-header .toggler-line{
display:block;width:26px;height:2.5px;border-radius:2px;
background:var(--green-800);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.main-header .navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.main-header .navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(2){opacity:0;}
.main-header .navbar-toggler[aria-expanded="true"] .toggler-line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
/* Mobiles Menü (Collapse-Panel) */
@media (max-width:991.98px){
#headerLogo{height:40px;}
.main-header .navbar-collapse{
margin-top:.75rem;padding:1rem .25rem 1.15rem;
border-top:1px solid var(--line);
}
.main-header .navbar-nav{gap:.3rem;margin-bottom:1rem;}
.main-header .nav-link{padding:.7rem 1rem!important;border-radius:var(--radius-sm);}
.main-header .nav-link.active{padding-left:1.4rem!important;}
.main-header .nav-link.active::after{
left:.55rem;bottom:auto;top:50%;transform:translateY(-50%);
width:4px;height:18px;
}
.header-cta{flex-direction:column;align-items:stretch;}
.header-cta .btn-heiz-amber,.header-cta .btn-heiz{width:100%;}
}
/* ============================================================
14 FOOTER
============================================================ */
.main-footer{
position:relative;background:var(--grad-hero);
color:rgba(255,255,255,.84);isolation:isolate;overflow:hidden;
margin-top:auto;
}
.main-footer::before{
content:"";position:absolute;inset:0;background-image:var(--noise);
pointer-events:none;z-index:-1;
}
.main-footer::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(560px 380px at 85% 0%,rgba(26,156,70,.08),transparent 60%);
}
.main-footer__top{padding:clamp(3rem,6vw,4.5rem) 0 2.25rem;}
.main-footer a{color:rgba(255,255,255,.86);}
.main-footer a:hover{color:#fff;}
.footer-brand img{width:210px;height:auto;margin-bottom:1.1rem;}
.footer-brand p{font-size:.95rem;max-width:36ch;}
.footer-title{
font-family:var(--font-display);font-weight:700;font-size:1.02rem;
color:#fff;margin-bottom:1.05rem;letter-spacing:-.01em;
}
.footer-links{list-style:none;margin:0;padding:0;}
.footer-links li{margin-bottom:.55rem;}
.footer-links a{
font-size:.95rem;display:inline-flex;align-items:center;gap:.4rem;
transition:color .2s var(--ease),transform .2s var(--ease);
}
.footer-links a:hover{transform:translateX(3px);}
.footer-contact{list-style:none;margin:0;padding:0;font-size:.95rem;}
.footer-contact li{display:flex;gap:.7rem;margin-bottom:.7rem;align-items:flex-start;}
.footer-contact .bi{color:var(--green-300);margin-top:.15rem;flex-shrink:0;}
.footer-badges{
display:flex;flex-wrap:wrap;gap:.6rem;
padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.12);
}
.footer-badge{
display:inline-flex;align-items:center;gap:.5rem;
padding:.5rem .95rem;border-radius:var(--radius-pill);
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
color:rgba(255,255,255,.85);font-size:.85rem;font-weight:600;white-space:nowrap;
}
.footer-badge .bi{color:var(--green-300);font-size:1rem;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
padding:1.3rem 0;font-size:.85rem;
display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;
}
.footer-bottom p{margin:0;}
.main-footer .btn-link-plain{
background:none;border:0;padding:0;color:rgba(255,255,255,.86);
font-size:.95rem;cursor:pointer;font-family:inherit;
}
.main-footer .btn-link-plain:hover{color:#fff;text-decoration:underline;}
/* ============================================================
15 COOKIE-CONSENT
============================================================ */
.cookie-consent{
position:fixed;left:1.25rem;right:auto;bottom:1.25rem;z-index:1080;
width:auto;max-width:420px;
background:#fff;border:1px solid var(--line);
border-radius:16px;box-shadow:0 12px 40px rgba(13,40,24,.22);
padding:1rem 1.15rem calc(1rem + env(safe-area-inset-bottom));
animation:cookieIn .45s var(--ease);
}
.cookie-consent__inner{display:flex;flex-direction:column;align-items:stretch;gap:.85rem;max-width:none;margin:0;}
.cookie-consent__actions{margin-top:.15rem;}
.cookie-consent p{margin:0;flex:0 0 auto;font-size:.92rem;line-height:1.5;}
.cookie-consent h5{margin:0 0 .15rem;font-size:.95rem;}
.cookie-consent .cookie-consent__icon{display:none;}
.cookie-consent__actions{display:flex;gap:.5rem;flex-wrap:wrap;}
@keyframes cookieIn{
from{opacity:0;transform:translateY(18px);}
to{opacity:1;transform:none;}
}
.cookie-consent__icon{
width:46px;height:46px;border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:var(--green-50);color:var(--green-700);
display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;
flex-shrink:0;
}
.cookie-consent h5{font-size:1.05rem;margin-bottom:.4rem;}
.cookie-consent p{font-size:.88rem;color:var(--ink-500);margin-bottom:1rem;}
.cookie-consent__link{font-size:.85rem;font-weight:600;align-self:center;}
@media (max-width:575.98px){
.cookie-consent{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;padding:.85rem .95rem calc(.85rem + env(safe-area-inset-bottom));}
.cookie-consent p{font-size:.8rem;}
}
/* ============================================================
16 SCROLL-TO-TOP
============================================================ */
.scroll-top-btn{
position:fixed;bottom:1.6rem;right:1.6rem;z-index:1040;
width:48px;height:48px;border-radius:50%;border:0;
background-image:var(--grad-brand);color:#fff;font-size:1.15rem;
display:none;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(22,101,52,.35);cursor:pointer;
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
padding:0;
}
.scroll-top-btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(22,101,52,.42);}
@media (max-width:767.98px){
.scroll-top-btn{display:none!important;}
}
/* ============================================================
17 BESTELL-ASSISTENT — Basiskomponenten
(IDs/Datenattribute laut Vertrag; Optik hier zentral)
============================================================ */
.product-selection-card{
position:relative;cursor:pointer;height:100%;
background:#fff;border:2px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-sm);
padding:1.6rem;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.product-selection-card:hover{border-color:var(--green-300);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.product-selection-card.selected{
border-color:var(--green-600);box-shadow:var(--ring),var(--shadow-md);
}
.product-selection-card.selected::after{
content:"\F633";font-family:"bootstrap-icons";
position:absolute;top:-12px;right:14px;
width:30px;height:30px;border-radius:50%;
background-image:var(--grad-brand);color:#fff;font-size:.95rem;
display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-md);
}
.payment-method-option,.delivery-method-option{
display:block;cursor:pointer;
background:#fff;border:2px solid var(--line);
border-radius:var(--radius-sm);padding:1.1rem 1.25rem;
transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.payment-method-option:hover,.delivery-method-option:hover{border-color:var(--green-300);}
.payment-method-option.selected,.delivery-method-option.selected,
.payment-method-option:has(input:checked),.delivery-method-option:has(input:checked){
border-color:var(--green-600);background:var(--green-50);
}
/* ============================================================
18 MOTION — Reveals, Float, Reduced-Motion-Safety-Net
============================================================ */
/* Reveals sind nur aktiv, wenn JS läuft (html.js) —
ohne JS bleibt ALLES sichtbar. Endzustand = sichtbar. */
html.js .reveal{opacity:1;}
/* Sanftes Schweben für dekorative SVGs (Öl-Tropfen etc.) — transform-only */
.float-slow{animation:heizFloat 7s ease-in-out infinite alternate;}
.float-slower{animation:heizFloat 10s ease-in-out infinite alternate;}
@keyframes heizFloat{
from{transform:translateY(0);}
to{transform:translateY(-14px);}
}
/* Globales Safety-Net: bei reduzierter Bewegung ist alles sofort da */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
html{scroll-behavior:auto;}
html.js .reveal,html.js .reveal--left,html.js .reveal--right, .float-slow,.float-slower{animation:none!important;}
.live-dot::after{animation:none!important;opacity:0;}
}
/* ============================================================
19 RESPONSIVE FEINSCHLIFF
============================================================ */
@media (max-width:767.98px){
body{font-size:1rem;}
.btn-heiz,.btn-heiz-amber,.btn-ghost,.btn-heiz-light{padding:.85rem 1.5rem;}
.glass-card{padding:1.4rem;}
.trust-strip{gap:.45rem .5rem;}
.chip{font-size:.8rem;padding:.4rem .75rem;}
.footer-bottom{justify-content:center;text-align:center;}
}
@media (max-width:575.98px){
.price-widget__head{flex-direction:column;align-items:flex-start;}
.step-card__num{font-size:2.6rem;}
}
/* Druck: Navigation/Deko ausblenden */
@media print{
.top-bar,.main-header,.main-footer,.cookie-consent,.scroll-top-btn,.wave-div{display:none!important;}
}
/* ============================================================
20 ALIAS-/KOMPATIBILITÄTS-KLASSEN
(alternative Klassennamen, die in Partials/Seiten vorkommen
können — gleiche Optik wie die Hauptklassen)
============================================================ */
/* Trust-Badge als Chip */
.trust-badge-heiz{
display:inline-flex;align-items:center;gap:.45rem;
padding:.45rem .95rem;border-radius:var(--radius-pill);
background:var(--green-50);color:var(--green-700);
border:1px solid var(--green-100);
font-weight:600;font-size:.88rem;line-height:1.3;white-space:nowrap;
}
.trust-badge-heiz .bi{font-size:1rem;color:var(--green-600);}
.trust-strip--dark .trust-badge-heiz,.section--dark .trust-badge-heiz,.hero-heiz .trust-badge-heiz{
background:rgba(255,255,255,.08);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.16);
}
.trust-strip--dark .trust-badge-heiz .bi,.section--dark .trust-badge-heiz .bi,.hero-heiz .trust-badge-heiz .bi{color:var(--green-300);}
.chip--soft{background:var(--paper-2);color:var(--ink-500);border-color:var(--line);}
/* Inline-SVG-Wellen-Divider */
.wave-divider{display:block;width:100%;line-height:0;margin-bottom:-1px;pointer-events:none;}
.wave-divider svg{display:block;width:100%;height:clamp(42px,6vw,90px);}
/* Cookie-Icon (Alias) */
.cookie-icon{
width:46px;height:46px;border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:var(--green-50);color:var(--green-700);
display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;
}
/* Preis-Widget-Aliasse */
.price-widget__number{
font-family:var(--font-display);font-weight:800;
font-size:clamp(2.7rem,6vw,3.9rem);line-height:1;
color:var(--green-800);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.price-widget__sub{font-size:1rem;color:var(--ink-500);margin-bottom:1rem;}
.price-widget__sub strong{color:var(--ink-900);font-weight:800;}
.price-widget__premium{font-size:.95rem;color:var(--ink-500);margin-bottom:1rem;}
.price-widget__stand{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;color:var(--muted);
}
.text-amber{color:var(--amber-500)!important;}
/* ============================================================
20 DANKE-SEITE (Bestellbestätigung) — additive Detail-Styles
============================================================ */
/* — Erfolgs-Hero — */
.dk-hero__pad{padding:clamp(3rem,6.5vw,5rem) 0 clamp(2.6rem,5vw,4rem);text-align:center;}
/* Animierter grüner Haken (SVG: Disc-Pop → Ring-Draw → Tick-Draw → Puls) */
.dk-check{position:relative;width:clamp(96px,14vw,124px);height:clamp(96px,14vw,124px);margin:0 auto 1.5rem;}
.dk-check svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 20px 44px rgba(26,156,70,.45));}
.dk-check__disc{transform-origin:50% 50%;animation:dkPop .65s cubic-bezier(.34,1.56,.64,1) .1s both;}
.dk-check__ring{
fill:none;stroke:var(--amber-400);stroke-width:2.5;stroke-linecap:round;
stroke-dasharray:100;stroke-dashoffset:100;opacity:.9;
transform:rotate(-90deg);transform-origin:50% 50%;
animation:dkDraw .9s var(--ease) .45s forwards;
}
.dk-check__tick{
fill:none;stroke:#fff;stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:100;stroke-dashoffset:100;
animation:dkDraw .55s var(--ease) .7s forwards;
}
.dk-check::after{ /* weicher Puls-Ring */
content:"";position:absolute;inset:4px;border-radius:50%;
border:2px solid rgba(52,199,89,.55);opacity:0;pointer-events:none;
animation:dkPulse 2.6s var(--ease) 1.4s infinite;
}
@keyframes dkPop{
0%{transform:scale(.25);opacity:0;}
65%{transform:scale(1.08);opacity:1;}
100%{transform:scale(1);opacity:1;}
}
@keyframes dkDraw{to{stroke-dashoffset:0;}}
@keyframes dkPulse{
0%{transform:scale(.92);opacity:.55;}
70%{transform:scale(1.32);opacity:0;}
100%{transform:scale(1.32);opacity:0;}
}
/* Gestaffelter Hero-Einstieg (CSS-only, kein JS nötig) */
.dk-in{animation:dkRise .7s var(--ease) both;}
.dk-in--1{animation-delay:.05s;}
.dk-in--2{animation-delay:.18s;}
.dk-in--3{animation-delay:.32s;}
.dk-in--4{animation-delay:.46s;}
.dk-in--5{animation-delay:.6s;}
@keyframes dkRise{
from{opacity:0;transform:translateY(18px);}
to{opacity:1;transform:none;}
}
/* Bestellnummer-Pill (Bernstein auf Dunkel) */
.dk-ordernum{
display:inline-flex;align-items:center;gap:.6rem;
padding:.6rem 1.35rem;border-radius:var(--radius-pill);
background:rgba(26,156,70,.14);border:1px solid rgba(26,156,70,.35);
color:var(--amber-300);font-weight:800;font-size:1.05rem;
font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;
}
.dk-ordernum .bi{color:var(--amber-400);font-size:1.1rem;}
/* E-Mail-Hinweis (Glas-Strip im Hero) */
.dk-mailhint{
display:inline-flex;align-items:flex-start;gap:.85rem;text-align:left;
margin-top:1.5rem;padding:1rem 1.3rem;max-width:600px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
border-radius:var(--radius);color:rgba(255,255,255,.82);
font-size:.93rem;line-height:1.55;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.dk-mailhint .bi{color:var(--amber-400);font-size:1.35rem;flex-shrink:0;margin-top:.05rem;}
.dk-mailhint strong{color:#fff;}
/* — „Was passiert jetzt?"-Timeline — */
.dk-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.dk-step{position:relative;display:flex;gap:1.15rem;padding-bottom:1.7rem;}
.dk-step:last-child{padding-bottom:0;}
.dk-step__marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.dk-step__num{
width:46px;height:46px;border-radius:50%;position:relative;
background-image:var(--grad-brand);color:#fff;
font-family:var(--font-display);font-weight:800;font-size:1.1rem;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 22px rgba(22,101,52,.3);
}
.dk-step--now .dk-step__num{
background-image:var(--grad-amber);color:#fff;
box-shadow:var(--shadow-amber);
}
.dk-step--now .dk-step__num::after{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:2px solid rgba(26,156,70,.5);pointer-events:none;
animation:dkPulse 2.4s var(--ease) infinite;
}
.dk-step__line{
width:2px;flex:1;margin-top:.5rem;border-radius:2px;min-height:22px;
background:repeating-linear-gradient(180deg,var(--green-300) 0 6px,transparent 6px 12px);
opacity:.55;
}
.dk-step:last-child .dk-step__line{display:none;}
.dk-step__body{padding-top:.35rem;min-width:0;}
.dk-step__eta{
display:inline-block;font-size:.75rem;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;
color:var(--amber-600);margin-bottom:.3rem;
}
.dk-step__body h3{font-size:1.08rem;margin-bottom:.35rem;}
.dk-step__body p{font-size:.95rem;color:var(--ink-500);margin-bottom:0;}
.dk-step__body .chip{margin-top:.65rem;max-width:100%;}
.dk-step__body .chip span{white-space:normal;}
/* — Bestellübersicht — */
.dk-summary__list{margin:0;}
.dk-summary__row{
display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
padding:.6rem 0;border-bottom:1px dashed var(--line);font-size:.95rem;
}
.dk-summary__row dt{color:var(--muted);font-weight:600;flex-shrink:0;}
.dk-summary__row dd{margin:0;font-weight:700;color:var(--ink-900);text-align:right;}
.dk-summary__total{
display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
margin-top:1.1rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);
background:linear-gradient(135deg,var(--green-50) 0%,#e9f5ee 100%);
border:1px solid var(--green-100);
}
.dk-summary__total-label{font-weight:800;color:var(--ink-900);}
.dk-summary__total-label small{display:block;font-size:.78rem;font-weight:600;color:var(--muted);}
.dk-summary__total-value{
font-family:var(--font-display);font-weight:800;font-size:1.7rem;
color:var(--green-800);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.dk-kicker{
font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-700);margin:1.35rem 0 .5rem;
}
.dk-pre,.dk-addr{
white-space:pre-line;font-size:.92rem;line-height:1.6;color:var(--ink-700);
background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin:0;
font-style:normal;
}
/* — „Gut zu wissen"-Box — */
.dk-note{
display:flex;gap:1rem;align-items:flex-start;
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius);padding:1.15rem 1.3rem;
}
.dk-note .icon-blob{width:46px;height:46px;font-size:1.25rem;background:#fff;}
.dk-note h3{font-size:1rem;margin-bottom:.3rem;color:var(--green-800);}
.dk-note p{font-size:.9rem;color:var(--ink-700);margin:0;line-height:1.6;}
/* — Kontakt-Karte — */
.dk-contact{display:flex;flex-direction:column;gap:.65rem;}
.dk-contact a{
display:flex;align-items:center;gap:.8rem;
padding:.8rem 1.05rem;border-radius:var(--radius-sm);
background:var(--paper-2);border:1px solid var(--line);
color:var(--ink-900);font-weight:700;font-size:.97rem;
transition:border-color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease);
}
.dk-contact a:hover{border-color:var(--green-300);background:var(--green-50);color:var(--green-800);transform:translateY(-1px);}
.dk-contact a .bi{color:var(--green-600);font-size:1.15rem;flex-shrink:0;}
.dk-contact a small{display:block;font-size:.78rem;font-weight:600;color:var(--muted);}
/* — Trusted-Shops-Karte (Garantie-Sektion) — */
.dk-trusted{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;gap:.85rem;height:100%;
padding:clamp(1.4rem,2.5vw,2rem);text-decoration:none;
}
.dk-trusted img{height:88px;width:auto;transition:transform .35s var(--ease),filter .35s var(--ease);}
.dk-trusted:hover img{transform:scale(1.06);filter:drop-shadow(0 12px 26px rgba(26,156,70,.35));}
.dk-trusted strong{color:var(--ink-900);font-family:var(--font-display);font-size:1.08rem;}
.dk-trusted p{color:var(--ink-500);font-size:.9rem;margin:0;}
.dk-trusted__more{font-weight:700;font-size:.9rem;color:var(--brand);display:inline-flex;align-items:center;gap:.35rem;}
.dk-trusted:hover .dk-trusted__more{color:var(--green-800);}
/* — Fallback „Bestellung nicht gefunden" — */
.dk-lost-icon{
width:104px;height:104px;margin:0 auto 1.5rem;border-radius:50%;
background:rgba(26,156,70,.14);border:1px solid rgba(26,156,70,.35);
display:flex;align-items:center;justify-content:center;
color:var(--amber-400);font-size:2.6rem;
box-shadow:0 18px 44px rgba(26,156,70,.22);
}
/* — Reduced Motion: Endzustände sofort sichtbar — */
@media (prefers-reduced-motion:reduce){
.dk-in,.dk-check__disc{animation:none!important;opacity:1!important;transform:none!important;}
.dk-check__ring{animation:none!important;stroke-dashoffset:0!important;transform:rotate(-90deg)!important;}
.dk-check__tick{animation:none!important;stroke-dashoffset:0!important;}
.dk-check::after,.dk-step--now .dk-step__num::after{animation:none!important;opacity:0!important;}
}
/* — Responsive Feinschliff Danke-Seite — */
@media (max-width:575.98px){
.dk-mailhint{margin-top:1.25rem;padding:.9rem 1rem;}
.dk-ordernum{font-size:.95rem;padding:.55rem 1.1rem;}
.dk-summary__row{flex-direction:column;gap:.1rem;}
.dk-summary__row dd{text-align:left;}
.dk-summary__total-value{font-size:1.5rem;}
.dk-step{gap:.9rem;}
.dk-step__num{width:40px;height:40px;font-size:1rem;}
}
/* ============================================================
21 PREISRECHNER-SEITE (/preisrechner) — additive Detail-Styles
============================================================ */
/* Preis-Widget-Kopf: Punkt + Label linksbündig (statt space-between) */
.price-widget__head{justify-content:flex-start;}
/* — Rechner-Hero — */
.calc-hero__pad{position:relative;z-index:1;padding-bottom:clamp(3rem,6vw,5rem);}
.calc-hero__drop{position:absolute;z-index:0;pointer-events:none;}
.calc-hero__drop--a{top:7%;right:4.5%;opacity:.85;}
.calc-hero__drop--b{bottom:15%;left:3.5%;width:54px;height:auto;opacity:.5;}
/* Checkliste (Hero & Content) */
.check-list{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.7rem;}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600;color:var(--ink-700);}
.check-list li .bi{color:var(--green-600);margin-top:.12rem;flex-shrink:0;}
.check-list li strong{font-variant-numeric:tabular-nums;}
.hero-heiz .check-list li,.section--dark .check-list li{color:rgba(255,255,255,.88);}
.hero-heiz .check-list li .bi,.section--dark .check-list li .bi{color:var(--amber-400);}
.hero-heiz .check-list li strong,.section--dark .check-list li strong{color:#fff;}
/* Rechner-Karte (Glass-Card im Hero) */
.calc-card{position:relative;}
.calc-card__head{margin-bottom:1.3rem;}
.calc-card__head h2{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:.25rem;}
.calc-card__head p{font-size:.92rem;color:var(--ink-500);margin:0;}
/* Liter-Schnellwahl-Chips */
.liter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.65rem;}
.liter-chips__label{
font-size:.75rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);margin-right:.15rem;
}
.liter-chip{
appearance:none;-webkit-appearance:none;
border:1.5px solid var(--line);background:#fff;color:var(--ink-700);
font-family:var(--font-body);font-weight:700;font-size:.9rem;line-height:1.2;
padding:.5rem 1.05rem;border-radius:var(--radius-pill);cursor:pointer;
font-variant-numeric:tabular-nums;
transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.liter-chip:hover{border-color:var(--green-500);color:var(--green-700);transform:translateY(-1px);}
.liter-chip:focus-visible{outline:3px solid var(--green-500);outline-offset:2px;}
.liter-chip.is-active{
background-image:var(--grad-brand);border-color:transparent;color:#fff;
box-shadow:0 6px 16px rgba(22,101,52,.28);
}
/* Live-Schätzung (#calcEstimate) */
.calc-estimate-wrap{
display:flex;gap:.7rem;align-items:flex-start;
margin-top:1.15rem;padding:.95rem 1.1rem;
border-radius:var(--radius-sm);
background:var(--green-50);border:1px dashed var(--green-300);
}
.calc-estimate-wrap>.bi{color:var(--amber-500);font-size:1.2rem;flex-shrink:0;margin-top:.05rem;}
.calc-estimate__label{
display:block;font-size:.75rem;font-weight:800;letter-spacing:.11em;
text-transform:uppercase;color:var(--green-700);margin-bottom:.15rem;
}
#calcEstimate{display:block;font-weight:800;color:var(--green-800);font-variant-numeric:tabular-nums;}
.calc-estimate__note{display:block;font-size:.8rem;color:var(--ink-500);margin-top:.2rem;line-height:1.45;}
/* Reassurance + Zahlarten + Trusted Shops am CTA */
.calc-secure{
display:flex;align-items:flex-start;justify-content:center;gap:.45rem;
margin:.95rem 0 0;font-size:.84rem;color:var(--ink-500);text-align:center;
}
.calc-secure .bi{color:var(--green-600);flex-shrink:0;margin-top:.1rem;}
.pay-icons{display:flex;flex-wrap:wrap;gap:.45rem;}
.pay-chip{
display:inline-flex;align-items:center;gap:.4rem;
padding:.38rem .75rem;border-radius:var(--radius-pill);
background:var(--paper-2);border:1px solid var(--line);
font-size:.8rem;font-weight:700;color:var(--ink-500);white-space:nowrap;
}
.pay-chip .bi{color:var(--green-700);font-size:.95rem;}
.calc-trust-row{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:.9rem 1.25rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
}
.ts-badge{display:inline-flex;align-items:center;gap:.75rem;}
.ts-badge img{
width:52px;height:auto;flex-shrink:0;
filter:drop-shadow(0 6px 14px rgba(13,40,24,.18));
transition:transform .3s var(--ease),filter .3s var(--ease);
}
.ts-badge:hover img{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 10px 22px rgba(26,156,70,.4));}
.ts-badge__text{line-height:1.3;}
.ts-badge__text strong{display:block;font-size:.88rem;color:var(--ink-900);}
.ts-badge__text span{display:block;font-size:.78rem;color:var(--muted);}
.ts-badge:hover .ts-badge__text strong{color:var(--brand);}
/* — Preis-Formel („So entsteht Ihr Preis") — */
.price-formula{
display:grid;gap:.6rem;align-items:stretch;
grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1.15fr;
}
.price-formula__item{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.5rem 1.15rem;text-align:center;
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.price-formula__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.price-formula__item .icon-blob{width:50px;height:50px;font-size:1.3rem;margin:0 auto .85rem;}
.price-formula__item h3{font-size:1.02rem;margin-bottom:.4rem;}
.price-formula__item p{font-size:.88rem;color:var(--ink-500);margin:0;line-height:1.55;}
.price-formula__item strong{color:var(--ink-900);font-variant-numeric:tabular-nums;}
.price-formula__op{
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:800;font-size:1.8rem;
color:var(--green-600);
}
.price-formula__item--total{
background:var(--grad-hero);border:0;box-shadow:var(--shadow-md);
color:rgba(255,255,255,.8);position:relative;overflow:hidden;isolation:isolate;
}
.price-formula__item--total::after{
content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;
border-radius:50%;z-index:-1;
background:radial-gradient(circle,rgba(26,156,70,.28) 0%,transparent 70%);
}
.price-formula__item--total h3{color:#fff;}
.price-formula__item--total p{color:rgba(255,255,255,.78);}
.price-formula__item--total strong{color:var(--amber-300);}
.price-formula__item--total .icon-blob{background:rgba(255,255,255,.1);color:var(--amber-400);}
@media (max-width:991.98px){
.price-formula{grid-template-columns:1fr;}
.price-formula__op{padding:.05rem 0;font-size:1.5rem;}
}
/* Rechenbeispiel-Aufschlüsselung */
.breakdown{margin:0;}
.breakdown__row{
display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
padding:.7rem 0;border-bottom:1px dashed var(--line);
font-variant-numeric:tabular-nums;font-size:.98rem;
}
.breakdown__row span:last-child{font-weight:700;color:var(--ink-900);white-space:nowrap;}
.breakdown__row--muted{border-bottom:0;padding:.3rem 0;font-size:.86rem;color:var(--muted);}
.breakdown__row--muted span:last-child{font-weight:600;color:var(--muted);}
.breakdown__row--total{
border-bottom:0;border-top:2px solid var(--green-800);
margin-top:.4rem;padding-top:.95rem;
font-size:1.15rem;font-weight:800;color:var(--ink-900);
}
.breakdown__row--total span:last-child{color:var(--green-800);font-size:1.25em;}
/* „Gut zu wissen"-Infobox */
.info-note{
display:flex;gap:.85rem;align-items:flex-start;
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius-sm);padding:1.05rem 1.2rem;
font-size:.95rem;color:var(--ink-700);
}
.info-note>.bi{color:var(--green-600);font-size:1.25rem;flex-shrink:0;margin-top:.05rem;}
.info-note strong{color:var(--ink-900);}
.info-note--amber{background:#e9f5ee;border-color:#cdeeda;}
.info-note--amber>.bi{color:var(--amber-600);}
/* — Abschluss-CTA-Panel — */
.cta-panel{
position:relative;overflow:hidden;isolation:isolate;
background:var(--grad-hero);border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
padding:clamp(2.2rem,5vw,3.8rem);
color:rgba(255,255,255,.82);
}
.cta-panel::before{
content:"";position:absolute;inset:0;background-image:var(--noise);
pointer-events:none;z-index:-1;
}
.cta-panel::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(520px 340px at 88% 0%,rgba(26,156,70,.16),transparent 62%),
radial-gradient(420px 320px at 4% 100%,rgba(52,199,89,.12),transparent 60%);
}
.cta-panel h2{color:#fff;}
.cta-panel .lead-heiz{color:rgba(255,255,255,.78);}
.cta-panel__actions{display:flex;flex-direction:column;gap:.8rem;align-items:stretch;}
@media (min-width:992px){.cta-panel__actions{align-items:flex-end;}}
/* Responsive Feinschliff Preisrechner */
@media (max-width:575.98px){
.calc-trust-row{flex-direction:column;align-items:flex-start;}
.liter-chip{padding:.45rem .85rem;font-size:.84rem;}
}
/* ============================================================
21 STARTSEITE — Hero-Stage/3D, Rechner-Glaskarte, Produkte,
Garantien, Liefer-Explainer, Info & CTA (additiv)
============================================================ */
/* — Preis-Widget: Feinschliff (Partial-Markup) — */
.price-widget .price-widget__head{
justify-content:flex-start;gap:.55rem;
font-size:.8rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-700);
}
.price-widget .price-widget__meta{
display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;justify-content:space-between;
}
.price-widget>.btn-heiz-amber{width:100%;}
/* — Trusted-Shops-Siegel (echtes Asset, Hover-Glow) — */
.ts-seal{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;}
.ts-seal img{
width:56px;height:auto;border-radius:10px;
filter:drop-shadow(0 6px 16px rgba(8,22,13,.25));
transition:transform .3s var(--ease),filter .3s var(--ease);
}
.ts-seal:hover img{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 10px 24px rgba(26,156,70,.4));}
.ts-seal__text{font-size:.82rem;line-height:1.35;font-weight:600;color:var(--ink-500);}
.ts-seal__text strong{display:block;font-size:.9rem;color:var(--ink-900);}
/* — HERO (Startseite): Tankwagen-Vollbild + Copy links + Rechner rechts + USP-Balken — */
.hero-home__pad{position:relative;z-index:1;padding:clamp(1.6rem,2.6vw,2.4rem) 0 clamp(1.7rem,2.8vw,2.6rem);}
/* Hero-Hintergrund: Tankwagen-Foto (WebP, responsive) */
.hero-home .hero-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;}
.hero-home .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
/* Overlay: links dunkel (Text-Lesbarkeit), rechts weitgehend frei — Truck bleibt sichtbar */
.hero-home .hero-bg::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(90deg,rgba(6,18,11,.86) 0%,rgba(7,22,13,.64) 28%,rgba(9,26,16,.2) 50%,rgba(9,26,16,.06) 72%,rgba(9,26,16,.16) 100%),
linear-gradient(180deg,rgba(6,18,11,.3) 0%,rgba(6,18,11,0) 40%,rgba(6,18,11,.18) 100%);
}
.hero-home h1{margin-bottom:1rem;text-shadow:0 2px 18px rgba(0,0,0,.45);}
.hero-home .hero-copy .eyebrow,.hero-home .lead-heiz{text-shadow:0 1px 10px rgba(0,0,0,.5);}
.hero-home .lead-heiz{max-width:34rem;color:rgba(255,255,255,.9);}
/* — Grüner USP-Balken unter dem Hero — */
.hero-usp-bar{position:relative;z-index:2;background:#166534;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 30px rgba(0,0,0,.25);}
.hero-usp-bar__list{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.55rem 1.9rem;margin:0;padding:.8rem 0;list-style:none;
color:#fff;font-size:.92rem;font-weight:700;
}
.hero-usp-bar__list li{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;}
.hero-usp-bar__list .bi{color:var(--green-300,#86efac);font-size:1.05rem;}
.hero-usp-bar__list a{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;}
.hero-usp-bar__list a:hover{color:var(--amber-300,#7be3a0);}
.hero-usp-bar__ts img{width:26px;height:26px;border-radius:50%;}
.hero-usp-bar__price{font-variant-numeric:tabular-nums;}
.hero-usp-bar__price .live-dot{flex-shrink:0;}
.hero-trustline{
display:flex;flex-wrap:wrap;align-items:center;
gap:.65rem .95rem;margin:1.5rem 0 1.2rem;
}
.hero-trustline .ts-seal__text{color:rgba(255,255,255,.82);}
.hero-trustline .ts-seal__text strong{color:#fff;}
.hero-stars{
display:inline-flex;align-items:center;gap:.5rem;
color:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;
}
.hero-stars .stars{color:var(--amber-400);letter-spacing:2px;font-size:.95rem;}
.hero-price-pill{
display:inline-flex;align-items:center;gap:.55rem;
padding:.55rem 1.1rem;border-radius:var(--radius-pill);
background:rgba(26,156,70,.14);border:1px solid rgba(26,156,70,.3);
color:var(--amber-300);font-weight:700;font-variant-numeric:tabular-nums;
transition:border-color .25s var(--ease),transform .25s var(--ease);
}
a.hero-price-pill:hover{color:#fff;border-color:rgba(26,156,70,.6);transform:translateY(-2px);}
.hero-phone-line{margin-top:1.35rem;font-size:.92rem;color:rgba(255,255,255,.7);}
.hero-phone-line a{color:#fff;font-weight:700;}
.hero-phone-line a:hover{color:var(--amber-300);}
/* Hero-Visual: Poster (immer im DOM) + 3D-Canvas darüber */
.hero-visual{position:relative;min-height:560px;}
.hero-stage{position:absolute;inset:-9% -22% -14% -34%;z-index:0;pointer-events:none;}
.hero-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--ease);}
.hero-poster svg{width:100%;height:100%;}
.hero-stage.is-3d .hero-poster{opacity:0;}
#hero3d{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);pointer-events:none;}
#hero3d.is-live{opacity:1;}
#hero3d canvas{display:block;width:100%!important;height:100%!important;}
/* Rechner-Glaskarte: sofort bedienbar, über der Stage */
.calc-card{position:relative;z-index:2;max-width:440px;margin-left:auto;}
/* Auf der Startseite: prominenter und klarer über dem Foto */
.hero-home .calc-card{
background:rgba(255,255,255,.97);
border:1px solid rgba(255,255,255,.85);
box-shadow:0 24px 70px rgba(0,0,0,.45),0 4px 18px rgba(0,0,0,.25);
padding:1.4rem 1.6rem 1.25rem;
}
@media (min-width:992px){
.hero-home h1{font-size:clamp(2rem,3.4vw,2.75rem);}
.hero-home .hero-visual{min-height:0;}
.hero-home .calc-card .mb-3{margin-bottom:.8rem!important;}
.hero-home .calc-card__sub{margin-bottom:.85rem;}
.hero-home .calc-estimate-wrap{margin-top:.75rem;padding:.55rem .9rem;}
.hero-home .calc-secure{margin-top:.7rem;}
}
.hero-home .calc-card .btn-heiz-amber{font-size:1.08rem;padding:1rem 1.9rem;}
.calc-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.35rem;}
.calc-card__head h2{font-size:1.35rem;margin:0;}
.calc-card__sub{font-size:.9rem;color:var(--ink-500);margin-bottom:1.15rem;}
.calc-card .form-control{font-size:1.05rem;}
.calc-estimate-wrap{
margin-top:1rem;padding:.7rem .95rem;text-align:center;
background:var(--green-50);border:1px dashed var(--green-300);
border-radius:var(--radius-sm);color:var(--green-800);
font-weight:700;font-size:.93rem;font-variant-numeric:tabular-nums;
}
.calc-secure{
display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .95rem;
margin:.95rem 0 0;padding:0;list-style:none;
font-size:.78rem;color:var(--ink-500);
}
.calc-secure li{display:inline-flex;align-items:center;gap:.35rem;}
.calc-secure .bi{color:var(--green-600);}
@media (max-width:991.98px){
.hero-visual{min-height:0;}
.hero-stage{position:relative;inset:auto;height:250px;max-width:460px;margin:.25rem auto 1.4rem;}
.calc-card{margin:0 auto;max-width:520px;}
/* Startseite mobil: Bild oben (kürzer) mit Text darüber, Rechner darunter, USP-Balken darunter */
.hero-home__pad{padding-top:1.8rem;padding-bottom:2.2rem;padding-left:20px;padding-right:20px;}
.hero-home .hero-bg::after{
background:linear-gradient(180deg,rgba(6,18,11,.78) 0%,rgba(7,22,13,.5) 42%,rgba(9,26,16,.22) 62%,rgba(13,40,24,.8) 86%,#0d2818 100%);
}
.hero-home h1{font-size:clamp(1.7rem,7.2vw,2.3rem);}
.hero-home .lead-heiz{font-size:.98rem;}
.hero-home .hero-phone-line{margin-top:.9rem;font-size:.88rem;}
.hero-home .calc-card{max-width:none;width:100%;}
.hero-usp-bar__list{gap:.5rem 1.15rem;font-size:.84rem;padding:.7rem 0;}
}
/* — Trust-Strip-Sektion unter dem Hero — */
.trust-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.75rem;}
.trust-band .trust-strip{justify-content:center;}
/* — Preisbildung: Faktor-Liste — */
.factor-list{list-style:none;margin:0;padding:0;}
.factor-list li{display:flex;gap:.85rem;padding:.7rem 0;border-bottom:1px dashed var(--line);align-items:flex-start;}
.factor-list li:last-child{border-bottom:0;}
.factor-list .bi{color:var(--amber-500);font-size:1.15rem;flex-shrink:0;margin-top:.1rem;}
.factor-list strong{color:var(--ink-900);}
.factor-list p{margin:0;font-size:.93rem;color:var(--ink-500);}
/* — Schritte: verbindende Linie + Icon — */
.steps-grid{position:relative;}
.steps-grid::before{display:none!important;content:none!important;}
@media (min-width:992px){
.steps-grid::before{
content:"";position:absolute;top:70px;left:8%;right:8%;height:2px;z-index:0;
background:repeating-linear-gradient(90deg,var(--green-300) 0 10px,transparent 10px 22px);
}
}
.steps-grid .step-card{position:relative;z-index:1;}
.step-card__icon{font-size:1.7rem;color:var(--green-600);position:absolute;top:1.4rem;right:1.4rem;}
/* — Produktvergleich Standard vs. Premium — */
.product-card{position:relative;display:flex;flex-direction:column;height:100%;padding:clamp(1.6rem,3vw,2.2rem);}
.product-card--premium{border:1px solid var(--green-600);box-shadow:var(--shadow-md);}
.product-card__flag{
position:absolute;top:-15px;left:50%;transform:translateX(-50%);
padding:.3rem 1rem;border-radius:var(--radius-pill);white-space:nowrap;
background-image:var(--grad-amber);color:#fff;
font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
box-shadow:var(--shadow-amber);
}
.product-card__kind{font-size:.8rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green-600);margin-bottom:.35rem;}
.product-card h3{font-size:1.45rem;margin-bottom:1rem;}
.product-card__price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.product-card__price strong{
font-family:var(--font-display);font-weight:800;font-size:2.5rem;line-height:1;
color:var(--green-800);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.product-card__price span{color:var(--ink-500);font-weight:600;font-size:.95rem;}
.product-features{list-style:none;margin:1.25rem 0 1.6rem;padding:0;}
.product-features li{display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.96rem;align-items:flex-start;}
.product-features li:last-child{border-bottom:0;}
.product-features .bi{color:var(--green-600);flex-shrink:0;margin-top:.12rem;}
.product-features .bi-plus-circle-fill{color:var(--amber-500);}
.product-card>[class*="btn-"]{margin-top:auto;}
/* — Garantie-Karten (dunkle Sektion) — */
.guarantee-card{
height:100%;padding:1.8rem 1.6rem;border-radius:var(--radius);
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transition:transform .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.guarantee-card:hover{transform:translateY(-5px);border-color:rgba(26,156,70,.5);background:rgba(255,255,255,.09);}
.guarantee-card .icon-blob{background:rgba(26,156,70,.15);color:var(--amber-400);margin-bottom:1.05rem;}
.guarantee-card h3{color:#fff;font-size:1.12rem;margin-bottom:.5rem;}
.guarantee-card p{color:rgba(255,255,255,.87);font-size:.93rem;margin:0;}
.stat-row{display:flex;flex-wrap:wrap;gap:1.25rem 3rem;justify-content:center;text-align:center;}
.stat-row__num{
font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4vw,2.7rem);
color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;
}
.stat-row__num .stat-suffix{color:var(--amber-400);}
.stat-row__label{font-size:.88rem;color:rgba(255,255,255,.65);}
/* — Liefer-Explainer (animierte SVG-Szene) — */
.delivery-scene{
background:var(--grad-hero);border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);overflow:hidden;position:relative;isolation:isolate;
padding:clamp(1.2rem,2.5vw,2rem);
}
.delivery-scene::before{content:"";position:absolute;inset:0;background-image:var(--noise);pointer-events:none;z-index:-1;}
.delivery-scene svg{display:block;width:100%;height:auto;}
.ds-flow{stroke-dasharray:9 13;animation:dsFlow 1.5s linear infinite;}
@keyframes dsFlow{to{stroke-dashoffset:-44;}}
.ds-glow{animation:dsGlow 3.6s ease-in-out infinite alternate;}
@keyframes dsGlow{from{opacity:.35;}to{opacity:.85;}}
.ds-drop{animation:heizFloat 5.5s ease-in-out infinite alternate;}
.ds-drop--late{animation-delay:1.6s;}
@media (prefers-reduced-motion:reduce){
.ds-flow,.ds-glow,.ds-drop{animation:none!important;}
}
.delivery-points{list-style:none;margin:0;padding:0;}
.delivery-points li{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px dashed var(--line);align-items:flex-start;}
.delivery-points li:last-child{border-bottom:0;}
.delivery-points .icon-blob{width:46px;height:46px;font-size:1.2rem;}
.delivery-points strong{display:block;color:var(--ink-900);}
.delivery-points p{margin:0;font-size:.93rem;color:var(--ink-500);}
/* — Kundenstimmen: Verifiziert-Chip — */
.verified-chip{
display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;
font-size:.75rem;font-weight:700;color:var(--green-600);
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius-pill);padding:.2rem .6rem;white-space:nowrap;
}
/* — „Gut zu wissen"-Kacheln — */
.know-card{height:100%;padding:clamp(1.4rem,2.5vw,1.9rem);}
.know-card .icon-blob{margin-bottom:1rem;}
.know-card h3{font-size:1.12rem;margin-bottom:.5rem;}
.know-card p{color:var(--ink-500);font-size:.94rem;}
.know-card ul{margin:0;padding-left:1.15rem;color:var(--ink-500);font-size:.94rem;}
.know-card ul li{margin-bottom:.35rem;}
.know-card ul li:last-child{margin-bottom:0;}
/* — Abschluss-CTA — */
.cta-final{text-align:center;max-width:760px;margin:0 auto;}
.cta-final .btn-heiz-amber{margin-top:.5rem;}
.cta-final__phone{
display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:#fff;
}
.cta-final__phone:hover{color:var(--amber-300);}
.cta-final__meta{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:1rem 2.2rem;margin-top:2rem;
}
/* ============================================================
22 BESTELL-ASSISTENT — bestellen.php
(additiv: Order-Hero, Stepper, Panels, Zahlungs-/Versand-
Karten, Zusammenfassung, Warenkorb sticky + Mobile-Sheet)
============================================================ */
/* — Kompakter Bestell-Hero (dunkelgrün, Trust im Blick) — */
.order-hero{
position:relative;background:var(--grad-hero);color:#fff;
overflow:hidden;isolation:isolate;
}
.order-hero::before{
content:"";position:absolute;inset:0;background-image:var(--noise);
pointer-events:none;z-index:-1;
}
.order-hero::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(560px 380px at 85% 12%,rgba(26,156,70,.14),transparent 62%),
radial-gradient(480px 400px at 6% 88%,rgba(52,199,89,.12),transparent 60%);
}
.order-hero h1{color:#fff;margin-bottom:.9rem;}
.order-hero .mark-heiz{background:linear-gradient(180deg,transparent 55%,rgba(26,156,70,.35) 55%);}
.order-hero .lead-heiz{color:rgba(255,255,255,.78);max-width:38rem;}
.order-hero__inner{
display:flex;align-items:center;justify-content:space-between;gap:2.5rem;
padding:clamp(1.6rem,4vw,2.8rem) 0 clamp(2.4rem,5.5vw,3.8rem);
}
.order-hero__copy{max-width:680px;}
.order-hero__chips{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.35rem;}
.order-hero__badge{flex-shrink:0;display:block;}
.order-hero__badge img{
display:block;height:auto;
filter:drop-shadow(0 18px 38px rgba(8,22,13,.5));
transition:transform .35s var(--ease),filter .35s var(--ease);
}
.order-hero__badge:hover img{
transform:scale(1.05);
filter:drop-shadow(0 18px 38px rgba(26,156,70,.4));
}
.order-hero .breadcrumbs li{color:rgba(255,255,255,.55);}
.order-hero .breadcrumbs li+li::before{color:rgba(255,255,255,.35);}
.order-hero .breadcrumbs a{color:rgba(255,255,255,.72);}
.order-hero .breadcrumbs a:hover{color:#fff;}
.order-hero .breadcrumbs [aria-current="page"]{color:#fff;}
a.chip--link{text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
a.chip--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
@media (max-width:767.98px){
.order-hero__badge{display:none;}
}
/* — Schritt-Anzeige (Stepper) — */
.wz-steps{
display:flex;list-style:none;margin:0 0 clamp(1.8rem,4vw,2.7rem);padding:0;
}
.wz-step{flex:1;text-align:center;position:relative;}
.wz-step:not(:first-child)::before{
content:"";position:absolute;top:21px;left:-50%;width:100%;height:3px;
border-radius:3px;background:var(--line);z-index:0;
transition:background-color .35s var(--ease);
}
.wz-step.is-done::before,.wz-step.is-active::before{background:var(--green-500);}
.wz-step__btn{
position:relative;z-index:1;background:none;border:0;padding:0;
display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;
color:var(--muted);cursor:default;
}
.wz-step.is-done .wz-step__btn{cursor:pointer;}
.wz-step__dot{
position:relative;width:44px;height:44px;border-radius:50%;
background:#fff;border:2px solid var(--line);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:800;font-size:1.05rem;
color:var(--muted);
transition:background-color .3s var(--ease),border-color .3s var(--ease),
color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.wz-step__check{display:none;font-size:1.15rem;}
.wz-step.is-done .wz-step__dot{
background-image:var(--grad-brand);border-color:transparent;color:#fff;
}
.wz-step.is-done .wz-step__num{display:none;}
.wz-step.is-done .wz-step__check{display:block;}
.wz-step.is-done .wz-step__btn:hover .wz-step__dot{transform:scale(1.08);box-shadow:var(--shadow-md);}
.wz-step.is-active .wz-step__dot{
background:var(--green-50);border-color:var(--green-600);color:var(--green-800);
box-shadow:var(--ring);transform:scale(1.06);
}
.wz-step.is-active .wz-step__dot::after{
content:"";position:absolute;inset:-7px;border-radius:50%;
border:2px solid rgba(26,156,70,.3);
animation:wzPulse 2.2s ease-out infinite;
}
@keyframes wzPulse{
0%{transform:scale(.85);opacity:1;}
70%,100%{transform:scale(1.18);opacity:0;}
}
.wz-step__label{font-size:.86rem;font-weight:700;line-height:1.25;}
.wz-step.is-active .wz-step__label{color:var(--green-800);}
.wz-step.is-done .wz-step__label{color:var(--ink-700);}
@media (max-width:575.98px){
.wz-step__dot{width:38px;height:38px;font-size:.95rem;}
.wz-step:not(:first-child)::before{top:18px;}
.wz-step__label{display:none;}
.wz-step.is-active .wz-step__label{display:block;}
}
/* — Schritt-Panels — */
.wz-panel{
background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
padding:clamp(1.5rem,3.5vw,2.5rem);
}
html.js .wz-panel{display:none;}
html.js .wz-panel.is-active{display:block;animation:wzPanelIn .5s var(--ease);}
@keyframes wzPanelIn{
from{opacity:0;transform:translateY(16px);}
to{opacity:1;transform:none;}
}
.wz-panel__head{margin-bottom:clamp(1.4rem,3vw,2rem);}
.wz-panel__head h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:.35rem 0 .5rem;outline:none;}
.wz-panel__lead{color:var(--ink-500);font-size:.98rem;margin:0;max-width:44rem;}
.wz-subhead{
font-size:1.05rem;font-weight:800;color:var(--ink-900);
display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;
}
.wz-subhead .bi{color:var(--green-600);}
.wz-toggle-box{
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius-sm);padding:1rem 1.2rem;
}
.wz-toggle-box .form-check{margin:0;}
.wz-toggle-box .form-check-input{cursor:pointer;}
.wz-toggle-box .form-check-label{cursor:pointer;}
.wz-toggle-sub{font-size:.85rem;color:var(--ink-500);font-weight:500;}
.wz-subform{
margin-top:1rem;background:var(--paper);
border:1.5px dashed var(--green-300);border-radius:var(--radius-sm);
padding:1.2rem 1.2rem 1.35rem;
}
.wz-subform .wz-subhead{margin-bottom:.85rem;font-size:1rem;}
.wz-secure-line{
display:flex;align-items:flex-start;gap:.5rem;
font-size:.86rem;color:var(--ink-500);margin:.85rem 0 0;
}
.wz-secure-line .bi{color:var(--green-600);flex-shrink:0;margin-top:.1rem;}
/* — Produktkarten (Schritt 1) — */
.product-selection-card{display:flex;flex-direction:column;padding-top:2rem;}
.product-selection-card:focus-visible{outline:3px solid var(--green-500);outline-offset:3px;}
.product-selection-card--premium{border-color:#f3d9a8;}
.product-selection-card--premium:hover{border-color:var(--amber-400);box-shadow:var(--shadow-amber);}
.product-badge{
position:absolute;top:-13px;left:1.25rem;
display:inline-flex;align-items:center;gap:.35rem;
padding:.3rem .85rem;border-radius:var(--radius-pill);
font-size:.75rem;font-weight:800;letter-spacing:.03em;
box-shadow:var(--shadow-sm);white-space:nowrap;
}
.product-badge--green{background-image:var(--grad-brand);color:#fff;}
.product-badge--amber{background-image:var(--grad-amber);color:var(--green-950);}
.product-icon{margin:.4rem 0 1rem;}
.product-title{font-size:1.35rem;margin-bottom:.35rem;}
.product-sub{font-size:.93rem;color:var(--ink-500);margin-bottom:.75rem;}
.product-price{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;}
.product-price__num{
font-family:var(--font-display);font-weight:800;font-size:2.05rem;
line-height:1;color:var(--green-800);letter-spacing:-.02em;
}
.product-selection-card--premium .product-price__num{color:var(--amber-600);}
.product-price__unit{font-size:.85rem;font-weight:700;color:var(--ink-500);line-height:1.25;}
.product-price__unit small{display:block;font-weight:500;color:var(--muted);}
.product-selection-card .product-features{margin:1.1rem 0 1.35rem;}
.product-selection-card .select-product-btn{margin-top:auto;}
.product-selection-card.selected .select-product-btn{
background-image:none;background:var(--green-800);
}
/* — Zahlungs-/Versand-Optionen (Schritt 2) — */
.wz-options{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;}
.payment-method-option,.delivery-method-option{position:relative;padding:0;}
.pm-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.pm-input:focus-visible+.pm-label{outline:3px solid var(--green-500);outline-offset:3px;border-radius:var(--radius-sm);}
.pm-label{
display:flex;align-items:center;gap:1.05rem;
margin:0;padding:1.1rem 1.25rem;cursor:pointer;width:100%;
}
.pm-icon{width:50px;height:50px;font-size:1.3rem;flex-shrink:0;}
.pm-body{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.pm-name{font-size:1.02rem;color:var(--ink-900);}
.pm-desc{font-size:.88rem;color:var(--ink-500);line-height:1.5;}
.pm-hint{
display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
margin-top:.35rem;font-size:.78rem;font-weight:700;color:var(--green-700);
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius-pill);padding:.2rem .65rem;
}
.pm-hint .bi{font-size:.85rem;}
.pm-price{font-weight:800;color:var(--ink-900);white-space:nowrap;font-size:1rem;}
.pm-price--free{color:var(--green-600);}
.pm-tick{
width:28px;height:28px;border-radius:50%;flex-shrink:0;
border:2px solid var(--line);background:#fff;color:transparent;
display:flex;align-items:center;justify-content:center;font-size:.9rem;
transition:background-color .25s var(--ease),border-color .25s var(--ease),
color .25s var(--ease),transform .25s var(--ease);
}
.payment-method-option.selected .pm-tick,.delivery-method-option.selected .pm-tick,
.payment-method-option:has(input:checked) .pm-tick,.delivery-method-option:has(input:checked) .pm-tick{
background-image:var(--grad-brand);border-color:transparent;color:#fff;transform:scale(1.08);
}
@media (max-width:575.98px){
.pm-label{gap:.8rem;padding:1rem;align-items:flex-start;}
.pm-icon{width:42px;height:42px;font-size:1.1rem;}
.pm-tick{margin-top:.15rem;}
.pm-hint{line-height:1.3;}
}
/* — Mini-Ablauf (Schritt 3) — */
.mini-steps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;
}
.mini-step{
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:1.05rem 1.1rem;display:flex;flex-direction:column;gap:.15rem;
font-size:.86rem;color:var(--ink-500);
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.mini-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.mini-step strong{color:var(--ink-900);font-size:.95rem;}
.mini-step__icon{
width:38px;height:38px;border-radius:12px;margin-bottom:.55rem;
background:var(--green-50);color:var(--green-700);
display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
@media (max-width:575.98px){
.mini-steps{grid-template-columns:1fr;}
}
/* — Zusammenfassung (Schritt 4) — */
.summary-block{
background:var(--paper);border:1px solid var(--line);
border-radius:var(--radius-sm);padding:1.15rem 1.3rem;margin-bottom:1rem;
}
.summary-block__head{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
margin-bottom:.55rem;
}
.summary-block__head h3{
font-size:1.02rem;margin:0;display:flex;align-items:center;gap:.5rem;
}
.summary-block__head h3 .bi{color:var(--green-600);}
.wz-edit-btn{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
padding:.28rem .8rem;font-size:.8rem;font-weight:700;color:var(--brand);
display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.wz-edit-btn:hover{background:var(--green-50);border-color:var(--green-300);transform:translateY(-1px);}
.sum-row{
display:flex;justify-content:space-between;gap:1.25rem;
padding:.5rem 0;border-bottom:1px dashed var(--line);
font-size:.93rem;
}
.sum-row:last-child{border-bottom:0;padding-bottom:0;}
.sum-row>span{color:var(--muted);font-weight:600;flex-shrink:0;}
.sum-row>strong{color:var(--ink-900);font-weight:700;text-align:right;overflow-wrap:anywhere;}
.sum-total{color:var(--green-800);font-size:1.15em;}
.terms-box{
margin-top:1.5rem;background:var(--green-50);
border:1px solid var(--green-100);border-radius:var(--radius-sm);
padding:1.05rem 1.25rem;
}
.terms-box .form-check-label{font-size:.95rem;}
.terms-box a{font-weight:700;text-decoration:underline;}
.secure-note{
display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;
margin-top:1.15rem;font-size:.83rem;font-weight:600;color:var(--ink-500);
}
.secure-note span{display:inline-flex;align-items:center;gap:.35rem;}
.secure-note .bi{color:var(--green-600);}
.submit-trust{display:block;text-align:center;margin-top:1.6rem;}
.submit-trust img{
max-width:min(300px,100%);height:auto;
transition:transform .3s var(--ease),filter .3s var(--ease);
}
.submit-trust:hover img{transform:translateY(-2px);filter:drop-shadow(0 10px 24px rgba(26,156,70,.35));}
/* — Navigation unter den Panels — */
.wz-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.35rem;}
.wz-nav #nextBtn{margin-left:auto;}
/* — Warenkorb (Desktop, sticky) — */
.order-cart{position:sticky;top:92px;}
.order-cart__card{
position:relative;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-md);padding:1.5rem;
}
.order-cart__card::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background-image:var(--grad-brand);
}
.order-cart__head{
display:flex;align-items:center;justify-content:space-between;gap:.75rem;
margin-bottom:1rem;
}
.order-cart__title{
font-size:1.15rem;margin:0;display:flex;align-items:center;gap:.5rem;
}
.order-cart__title .bi{color:var(--green-600);}
.cart-context{
display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
background:var(--paper-2);border-radius:var(--radius-pill);
padding:.5rem 1rem;font-size:.85rem;color:var(--ink-500);margin-bottom:1.1rem;
}
.cart-context .bi{color:var(--green-600);}
.cart-context strong{color:var(--ink-900);font-variant-numeric:tabular-nums;}
.cart-context__edit{margin-left:auto;font-weight:700;font-size:.8rem;}
.cart-empty{
text-align:center;padding:1.6rem 1rem;
border:1.5px dashed var(--line);border-radius:var(--radius-sm);
color:var(--muted);
}
.cart-empty .bi{font-size:1.9rem;color:var(--green-300);display:block;margin-bottom:.5rem;}
.cart-empty p{font-size:.9rem;margin:0;}
.cart-line{
display:flex;align-items:center;gap:.9rem;
padding:.85rem 0;border-bottom:1px solid var(--line);
}
.cart-line__icon{
width:44px;height:44px;border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:var(--green-50);color:var(--green-700);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:1.15rem;
}
.cart-line__icon--amber{background:#e9f5ee;color:var(--amber-600);}
.cart-line__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.cart-line__body strong{color:var(--ink-900);font-size:.98rem;}
.cart-line__body span{font-size:.84rem;color:var(--ink-500);font-variant-numeric:tabular-nums;}
.cart-line__price{font-weight:800;color:var(--ink-900);white-space:nowrap;}
#cart-totals{margin-top:.35rem;}
#cart-totals .breakdown__row--total span:last-child{font-size:1.35em;}
.ggvs-details{
margin-top:1.1rem;border:1px solid var(--line);border-radius:var(--radius-sm);
background:var(--paper);padding:.7rem .95rem;font-size:.86rem;
}
.ggvs-details summary{
cursor:pointer;font-weight:700;color:var(--ink-700);
display:flex;align-items:center;gap:.45rem;list-style:none;
}
.ggvs-details summary::-webkit-details-marker{display:none;}
.ggvs-details summary::after{
content:"\F282";font-family:"bootstrap-icons";margin-left:auto;
color:var(--muted);transition:transform .25s var(--ease);
}
.ggvs-details[open] summary::after{transform:rotate(180deg);}
.ggvs-details summary .bi{color:var(--green-600);}
.ggvs-details p{margin:.65rem 0 0;color:var(--ink-500);line-height:1.55;}
.cart-secure{
list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;
border-top:1px dashed var(--line);
display:grid;gap:.45rem;font-size:.84rem;color:var(--ink-500);
}
.cart-secure li{display:flex;align-items:center;gap:.5rem;}
.cart-secure .bi{color:var(--green-600);flex-shrink:0;}
.cart-trust-badge{display:block;text-align:center;margin-top:1.15rem;}
.cart-trust-badge img{
max-width:min(280px,100%);height:auto;
transition:transform .3s var(--ease),filter .3s var(--ease);
}
.cart-trust-badge:hover img{transform:translateY(-2px);filter:drop-shadow(0 10px 24px rgba(26,156,70,.35));}
.cart-guarantees{
margin-top:1.15rem;background:var(--green-50);
border:1px solid var(--green-100);border-radius:var(--radius);
padding:1.2rem 1.3rem;
}
.cart-guarantees__title{
font-size:.98rem;margin-bottom:.75rem;
display:flex;align-items:center;gap:.5rem;color:var(--green-800);
}
.cart-guarantees__title .bi{color:var(--amber-500);}
.cart-guarantees ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.cart-guarantees li{
display:flex;gap:.5rem;align-items:flex-start;
font-size:.86rem;color:var(--ink-700);line-height:1.5;
}
.cart-guarantees li .bi{color:var(--green-600);flex-shrink:0;margin-top:.12rem;}
.cart-guarantees li strong{color:var(--ink-900);}
.cart-help{
margin:1.15rem 0 0;text-align:center;font-size:.88rem;color:var(--ink-500);
}
.cart-help a{font-weight:800;color:var(--green-800);display:inline-flex;align-items:center;gap:.4rem;}
.cart-help a:hover{color:var(--brand);}
.cart-help span{font-size:.8rem;color:var(--muted);margin-top:.15rem;}
/* — Mobile-Warenkorb: Leiste + Bottom-Sheet — */
.mobile-cart-toggle{
position:fixed;left:.9rem;right:.9rem;
bottom:calc(.9rem + env(safe-area-inset-bottom,0px));
z-index:1075;border:0;cursor:pointer;
display:none;align-items:center;gap:.9rem;
background:linear-gradient(135deg,#124a29 0%,#0d2818 100%);
color:#fff;border-radius:16px;padding:.8rem 1.1rem;
box-shadow:0 14px 40px rgba(8,22,13,.45);
text-align:left;
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.mobile-cart-toggle:active{transform:scale(.985);}
.mobile-cart-toggle__icon{
width:42px;height:42px;border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:rgba(26,156,70,.18);color:var(--amber-400);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:1.15rem;
}
.mobile-cart-summary{flex:1;display:flex;flex-direction:column;min-width:0;}
.mobile-cart-items-count{
font-size:.78rem;color:rgba(255,255,255,.72);font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mobile-cart-total{
font-family:var(--font-display);font-weight:800;font-size:1.15rem;
color:#fff;letter-spacing:-.01em;
}
.mobile-cart-arrow{color:var(--amber-400);font-size:1rem;flex-shrink:0;}
.mobile-cart-backdrop{
position:fixed;inset:0;z-index:1086;
background:rgba(8,22,13,.55);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
opacity:0;visibility:hidden;
transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.mobile-cart-backdrop.is-open{opacity:1;visibility:visible;}
.mobile-cart-sheet{
position:fixed;left:0;right:0;bottom:0;z-index:1090;
background:#fff;border-radius:22px 22px 0 0;
box-shadow:0 -20px 60px rgba(8,22,13,.35);
max-height:84vh;display:flex;
transform:translateY(105%);visibility:hidden;
transition:transform .42s var(--ease),visibility .42s var(--ease);
}
.mobile-cart-sheet.is-open{transform:none;visibility:visible;}
.mobile-cart-content{
width:100%;overflow-y:auto;
padding:1.35rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom,0px));
}
.mobile-cart-content::before{
content:"";display:block;width:44px;height:4px;border-radius:4px;
background:var(--line);margin:0 auto .95rem;
}
.mobile-cart-header{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
margin-bottom:.85rem;
}
.mobile-cart-title{
font-family:var(--font-display);font-weight:800;font-size:1.15rem;
color:var(--ink-900);display:flex;align-items:center;gap:.5rem;
}
.mobile-cart-title .bi{color:var(--green-600);}
.mobile-cart-close{
width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
background:var(--paper-2);color:var(--ink-700);
display:flex;align-items:center;justify-content:center;font-size:1rem;
transition:background-color .2s var(--ease);
}
.mobile-cart-close:hover{background:var(--green-50);color:var(--green-800);}
.mobile-cart-trust{
display:flex;flex-wrap:wrap;gap:.4rem 1rem;
margin-top:1.05rem;padding-top:.95rem;border-top:1px dashed var(--line);
font-size:.78rem;font-weight:600;color:var(--ink-500);
}
.mobile-cart-trust span{display:inline-flex;align-items:center;gap:.35rem;}
.mobile-cart-trust .bi{color:var(--green-600);}
body.cart-open{overflow:hidden;}
/* — Responsive-Verhalten des Bestell-Layouts — */
@media (max-width:991.98px){
.order-cart{display:none;}
.mobile-cart-toggle{display:flex;}
.order-wizard-section{padding-bottom:7.5rem;}
}
@media (min-width:992px){
.mobile-cart-toggle,.mobile-cart-sheet,.mobile-cart-backdrop{display:none;}
}
@media print{
.mobile-cart-toggle,.mobile-cart-sheet,.mobile-cart-backdrop{display:none!important;}
}
/* ============================================================
22 STARTSEITE — kleine additive Ergänzungen (index.php)
============================================================ */
/* Leere Live-Vorschau der Rechner-Karte ausblenden
(calculator.js leert [data-calc-estimate] bei ungültiger Eingabe) */
.calc-estimate-wrap:has(> [data-calc-estimate]:empty){display:none;}
/* Trusted-Shops-Siegel auf dunklen Flächen lesbar */
.section--dark .ts-seal__text{color:rgba(255,255,255,.75);}
.section--dark .ts-seal__text strong{color:#fff;}
/* Trust-Band unter dem Hero: schlanke, ruhige Leiste */
.trust-band-section{padding:clamp(1.4rem,3vw,2.1rem) 0;border-bottom:1px solid var(--line);}
/* Statistik-Reihe: etwas Luft über den Garantie-Karten */
.stat-row{margin-bottom:clamp(2rem,4vw,3rem);}
/* Abschnitts-CTA-Zeile (zentriert unter Grids) */
.section-cta{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.9rem 1.5rem;margin-top:clamp(2rem,4vw,2.75rem);text-align:center;
}
.section-cta__hint{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.88rem;color:var(--muted);
}
.section-cta__hint .bi{color:var(--green-600);}
/* ============================================================
23 PREISRECHNER (/preisrechner) — additiver Feinschliff (rechner.php)
============================================================ */
/* Breitere Rechner-Karte im Preisrechner-Hero (Startseiten-Basis: 470px) */
.calc-card--rechner{max-width:600px;}
/* Detail-Variante der Live-Schätzung: Label + Wert + Erklärung, linksbündig */
.calc-estimate-wrap--detail{
text-align:left;padding:.95rem 1.1rem;margin-top:1.1rem;
font-size:.95rem;font-weight:500;color:var(--ink-700);
}
.calc-estimate-wrap--detail #calcEstimate{font-size:1.08rem;}
#calcEstimate:empty::before{
content:attr(data-placeholder);
color:var(--ink-500);font-weight:600;font-size:.92rem;
}
/* Schwebende Öltropfen nur auf großen Screens (nie über der Rechner-Karte) */
@media (max-width:991.98px){
.calc-hero__drop{display:none;}
}
/* Fußnote unter dem Rechenbeispiel */
.breakdown-note{
margin:1rem 0 0;font-size:.83rem;color:var(--muted);line-height:1.55;
}
/* Trusted-Shops-Siegel im dunklen CTA-Panel lesbar */
.cta-panel .ts-seal__text{color:rgba(255,255,255,.75);}
.cta-panel .ts-seal__text strong{color:#fff;}
/* ============================================================
24 AGB (/agb) — additive Styles für die Rechtsseite (agb.php)
============================================================ */
/* Kompakterer Hero für Rechtsseiten */
.agb-hero__pad{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(3.4rem,7vw,5.6rem);}
/* Hero-Glaskarte „Das Wichtigste in Kürze" */
.agb-hero-card{
max-width:470px;margin-left:auto;
background:rgba(10,34,20,.9) !important;
border:1px solid rgba(255,255,255,.16);
border-radius:var(--radius);padding:1.4rem 1.5rem;
box-shadow:var(--shadow-md);
}
.agb-hero-card .check-list li,.agb-hero-card .check-list li span{color:#fff;}
.agb-hero-card h2{
font-size:1.12rem;color:#fff;margin-bottom:1rem;
display:flex;align-items:center;gap:.55rem;letter-spacing:-.01em;
}
.agb-hero-card h2 .bi{color:var(--amber-400);font-size:1.2rem;}
.agb-hero-card .check-list{margin-bottom:.9rem;gap:.6rem;}
.agb-hero-card .check-list li{font-size:.93rem;font-weight:500;}
.agb-hero-card__note{
font-size:.79rem;color:rgba(255,255,255,.6);margin:0;line-height:1.55;
padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);
}
@media (max-width:991.98px){.agb-hero-card{margin-left:0;max-width:100%;}}
/* Sticky-Sidebar (Inhaltsverzeichnis + Hilfe) */
.agb-sidebar{position:sticky;top:96px;display:grid;gap:1.25rem;}
@media (max-width:991.98px){.agb-sidebar{position:static;}}
/* Inhaltsverzeichnis */
.agb-toc{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.35rem 1.4rem;
}
.agb-toc__title{
font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
color:var(--green-700);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem;
}
.agb-toc ol{list-style:none;margin:0;padding:0;counter-reset:agbtoc;display:grid;gap:.1rem;}
.agb-toc li{counter-increment:agbtoc;}
.agb-toc a{
display:flex;align-items:baseline;gap:.6rem;padding:.34rem .55rem;border-radius:9px;
font-size:.89rem;font-weight:600;color:var(--ink-500);text-decoration:none;
transition:background .18s var(--ease),color .18s var(--ease);
}
.agb-toc a::before{
content:counter(agbtoc,decimal-leading-zero);
font-size:.72rem;font-weight:800;color:var(--green-500);
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.agb-toc a:hover{background:var(--green-50);color:var(--green-700);}
.agb-toc a.is-active{background:var(--green-50);color:var(--green-800);}
.agb-toc a.is-active::before{color:var(--green-700);}
/* Hilfe-/Kontakt-Karte in der Sidebar */
.agb-side-card{
border-radius:var(--radius);padding:1.4rem 1.5rem;color:#fff;
background:linear-gradient(150deg,var(--green-900) 0%,var(--green-800) 100%);
box-shadow:var(--shadow-md);
}
.agb-side-card h3{font-size:1.02rem;color:#fff;margin-bottom:.4rem;}
.agb-side-card p{font-size:.87rem;color:rgba(255,255,255,.72);line-height:1.6;margin-bottom:.9rem;}
.agb-side-card__line{
display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700;
text-decoration:none;padding:.3rem 0;font-variant-numeric:tabular-nums;
}
.agb-side-card__line .bi{color:var(--amber-400);}
.agb-side-card__line:hover{color:var(--amber-300);}
.agb-side-card__hours{
display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:.55rem;
}
/* Weiterführende Seiten (Sidebar) */
.agb-links{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.35rem 1.4rem;
}
.agb-links ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;}
.agb-links a{
display:flex;align-items:center;gap:.55rem;padding:.32rem .55rem;border-radius:9px;
font-size:.89rem;font-weight:600;color:var(--ink-700);text-decoration:none;
transition:background .18s var(--ease),color .18s var(--ease);
}
.agb-links a .bi{color:var(--green-600);font-size:.95rem;flex-shrink:0;}
.agb-links a:hover{background:var(--green-50);color:var(--green-800);}
/* Klausel-Karten */
.agb-clause{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:clamp(1.4rem,3vw,2.1rem);
scroll-margin-top:110px;
}
.agb-clause+.agb-clause{margin-top:1.25rem;}
.agb-clause__head{display:flex;align-items:center;gap:.95rem;margin-bottom:1.05rem;}
.agb-clause__num{
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
width:46px;height:46px;border-radius:13px;
background:var(--green-50);color:var(--green-700);
font-family:var(--font-display);font-weight:800;font-size:1.02rem;
font-variant-numeric:tabular-nums;
}
.agb-clause h2{font-size:clamp(1.18rem,2vw,1.38rem);margin:0;letter-spacing:-.01em;}
.agb-clause p{color:var(--ink-700);line-height:1.75;margin-bottom:1rem;}
.agb-clause>*:last-child,.agb-clause p:last-child{margin-bottom:0;}
.agb-clause ul,.agb-clause ol{
color:var(--ink-700);line-height:1.7;padding-left:1.25rem;
margin:0 0 1rem;display:grid;gap:.4rem;
}
.agb-clause ul li::marker{color:var(--green-600);}
.agb-clause ol li::marker{color:var(--green-700);font-weight:700;}
.agb-clause a{color:var(--green-700);font-weight:600;text-decoration-color:var(--green-300);}
.agb-clause a:hover{color:var(--green-800);}
/* Adress-/Vertragspartner-Block innerhalb einer Klausel */
.agb-address{
background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--green-600);
border-radius:var(--radius-sm);padding:1rem 1.25rem;line-height:1.75;
color:var(--ink-700);margin-bottom:1rem;
}
.agb-address strong{color:var(--ink-900);}
/* Kachel-Liste (Preisbestandteile, Zahlungsarten) */
.agb-tile-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.65rem;}
.agb-tile-list li{
display:flex;gap:.8rem;align-items:flex-start;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:.85rem 1.05rem;line-height:1.6;color:var(--ink-700);
}
.agb-tile-list li>.bi{color:var(--green-600);font-size:1.15rem;flex-shrink:0;margin-top:.1rem;}
.agb-tile-list li strong{color:var(--ink-900);}
/* Amber-Callout (Widerrufsbelehrung) */
.agb-callout{
background:#e9f5ee;border:1px solid #cdeeda;border-radius:var(--radius-sm);
padding:1.35rem 1.5rem;margin:0 0 1rem;
}
.agb-callout__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;}
.agb-callout__head .bi{color:var(--amber-600);font-size:1.25rem;flex-shrink:0;}
.agb-callout h3{font-size:1.05rem;margin:0;letter-spacing:-.01em;}
.agb-callout p{margin-bottom:.85rem;}
.agb-callout p:last-child{margin-bottom:0;}
.agb-callout .agb-address{background:#fff;border-left-color:var(--amber-500);}
/* Stand-/Hinweiszeilen */
.agb-stand{
display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
padding:.5rem 1rem;border-radius:var(--radius-pill);
background:var(--green-50);color:var(--green-800);
font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.agb-stand .bi{color:var(--green-600);}
.agb-disclaimer{font-size:.85rem;color:var(--muted);line-height:1.6;}
/* ============================================================
24 RATGEBER-ÜBERSICHT (/ratgeber) — additive Ergänzungen
============================================================ */
/* Hero: kompakter, zentrierter redaktioneller Auftakt */
.ratgeber-hero__pad{padding:clamp(2.75rem,6vw,4.25rem) 0 clamp(3.75rem,7vw,5.25rem);}
.ratgeber-hero__inner{max-width:840px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.ratgeber-hero__inner .eyebrow{justify-content:center;}
.ratgeber-hero .hero-trustline{justify-content:center;}
/* Themen-Chips im Hero (verlinken direkt auf die Artikel) */
.topic-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.5rem 0 1.9rem;}
.topic-chips a.chip{
text-decoration:none;
transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.topic-chips a.chip--dark:hover{
background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);
color:#fff;transform:translateY(-2px);
}
/* Schwebende Öltropfen — nur auf großen Screens, nie über dem Inhalt */
.ratgeber-hero__drop{position:absolute;z-index:0;pointer-events:none;}
.ratgeber-hero__drop--a{top:14%;right:6%;opacity:.85;}
.ratgeber-hero__drop--b{bottom:18%;left:5.5%;opacity:.7;}
@media (max-width:991.98px){.ratgeber-hero__drop{display:none;}}
/* SVG-Thumbnails füllen die Media-Fläche der Artikel-Karten */
.blog-card__media svg{width:100%;height:100%;display:block;}
/* Karten-Kopfzeile: Themen-Chip + Lesezeit nebeneinander */
.blog-card__topline{
display:flex;align-items:center;justify-content:space-between;
gap:.75rem;margin-bottom:.8rem;
}
.blog-card__topline .blog-card__tag{margin-bottom:0;}
.blog-card__read{
display:inline-flex;align-items:center;gap:.35rem;
font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap;
}
.blog-card__read .bi{font-size:.9rem;color:var(--green-600);}
/* ============================================================
25 IMPRESSUM & RECHTSSEITEN-BASIS (/impressum) — additiv
(legal-* Klassen sind bewusst generisch: wiederverwendbar
für Datenschutz & Widerruf)
============================================================ */
/* — Kompakter dunkler Hero für Rechtstexte — */
.legal-hero__pad{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.2rem,6vw,5rem);}
.legal-hero .lead-heiz{max-width:680px;}
.legal-hero__chips{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.5rem;}
/* — Anbieter-Panel: Pflichtangaben als übersichtliches Fakten-Grid — */
.provider-card{padding:clamp(1.6rem,3.5vw,2.6rem);}
.provider-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
gap:clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.4rem);
}
.provider-item{display:flex;gap:1rem;align-items:flex-start;}
.provider-item .icon-blob{width:48px;height:48px;font-size:1.3rem;}
.provider-item h3{
font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--green-700);margin-bottom:.35rem;
}
.provider-item p,.provider-item address{
margin:0;font-size:.98rem;line-height:1.7;color:var(--ink-700);font-style:normal;
}
.provider-item strong{color:var(--ink-900);}
.provider-item a{font-weight:600;word-break:break-word;}
.provider-actions{
display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
margin-top:clamp(1.7rem,3vw,2.3rem);padding-top:clamp(1.4rem,2.5vw,1.9rem);
border-top:1px dashed var(--line);
}
/* — Sticky-Seitenleiste mit Inhaltsverzeichnis — */
.legal-aside{
display:grid;gap:1.25rem;align-content:start;
position:sticky;top:96px;
}
@media (max-width:991.98px){.legal-aside{position:static;}}
.legal-toc{padding:1.35rem 1.4rem;}
.legal-toc__title{
font-family:var(--font-display);font-weight:800;font-size:1.02rem;
color:var(--ink-900);margin-bottom:.75rem;
display:flex;align-items:center;gap:.5rem;
}
.legal-toc__title .bi{color:var(--green-600);}
.legal-toc ol,.legal-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;}
.legal-toc ol{counter-reset:legaltoc;}
.legal-toc ol li{counter-increment:legaltoc;}
.legal-toc a{
display:flex;align-items:baseline;gap:.6rem;
padding:.45rem .6rem;border-radius:10px;
font-size:.93rem;font-weight:600;color:var(--ink-700);text-decoration:none;
transition:background-color .2s var(--ease),color .2s var(--ease);
}
.legal-toc ol a::before{
content:counter(legaltoc,decimal-leading-zero);
font-size:.72rem;font-weight:800;color:var(--green-600);
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.legal-toc ul a .bi{font-size:.95rem;color:var(--green-600);align-self:center;flex-shrink:0;}
.legal-toc a:hover{background:var(--green-50);color:var(--green-800);}
/* — Rechtstext-Artikel: ruhige, gut lesbare Typografie — */
.legal-article>section{scroll-margin-top:110px;}
.legal-article>section+section{
margin-top:clamp(2.1rem,4vw,2.9rem);
padding-top:clamp(2.1rem,4vw,2.9rem);
border-top:1px solid var(--line);
}
.legal-article h2{font-size:clamp(1.28rem,2vw,1.5rem);margin-bottom:.9rem;}
.legal-article p{line-height:1.85;color:var(--ink-700);margin-bottom:1rem;}
.legal-article p:last-child{margin-bottom:0;}
.legal-article a{font-weight:600;word-break:break-word;}
.legal-meta{
margin-top:clamp(2.1rem,4vw,2.9rem);padding-top:1.3rem;
border-top:1px dashed var(--line);
font-size:.85rem;color:var(--muted);
}
.legal-meta strong{color:var(--ink-700);}
/* — Quick-Links am Seitenende (interne Verlinkung) — */
.legal-quicklinks{
display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
gap:1rem;
}
.legal-quicklink{
display:flex;align-items:center;gap:.95rem;
padding:1.1rem 1.2rem;
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);text-decoration:none;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.legal-quicklink:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-100);}
.legal-quicklink .icon-blob{width:44px;height:44px;font-size:1.2rem;}
.legal-quicklink__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.legal-quicklink__text strong{color:var(--ink-900);font-size:.98rem;}
.legal-quicklink__text small{color:var(--ink-500);font-size:.82rem;}
.legal-quicklink>.bi{margin-left:auto;color:var(--green-600);transition:transform .25s var(--ease);}
.legal-quicklink:hover>.bi{transform:translateX(4px);}
/* ============================================================
25 LIEFERUNG (/heizoel-lieferung) — additive Detail-Styles
============================================================ */
/* — Hero: Tankwagen-Routen-Szene (leichtgewichtiges SVG, dezenter 3D-Tilt) — */
.lief-hero__pad{position:relative;z-index:1;padding:clamp(2.8rem,6vw,5rem) 0 clamp(3.4rem,7vw,5.5rem);}
.lief-hero .lead-heiz{max-width:36rem;}
.lief-scene{position:relative;max-width:640px;margin:0 auto;}
.lief-scene svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(4,12,7,.4));}
@media (min-width:992px){
.lief-scene{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);}
}
@media (max-width:991.98px){
.lief-scene{max-width:440px;margin-top:.5rem;}
}
/* animierte Lieferroute (gestrichelte Linie Richtung Ziel-Pin) */
.lief-route{stroke-dasharray:5 15;animation:liefRoute 2.8s linear infinite;}
@keyframes liefRoute{to{stroke-dashoffset:-80;}}
@media (prefers-reduced-motion:reduce){
.lief-route{animation:none!important;}
}
/* — Liefertag: vertikale Timeline — */
.day-line{list-style:none;margin:0;padding:0;position:relative;}
.day-line::before{
content:"";position:absolute;left:24px;top:14px;bottom:14px;width:2px;
background:repeating-linear-gradient(180deg,var(--green-300) 0 8px,transparent 8px 18px);
}
.day-line li{position:relative;display:flex;gap:1.1rem;padding:0 0 1.7rem;align-items:flex-start;}
.day-line li:last-child{padding-bottom:0;}
.day-line__dot{
position:relative;z-index:1;flex-shrink:0;
width:50px;height:50px;border-radius:50%;
background:#fff;border:2px solid var(--green-100);color:var(--green-700);
display:inline-flex;align-items:center;justify-content:center;
font-size:1.25rem;box-shadow:var(--shadow-sm);
}
.day-line__num{
display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:var(--green-600);margin-bottom:.15rem;
}
.day-line strong{display:block;color:var(--ink-900);font-size:1.05rem;margin-bottom:.2rem;}
.day-line p{margin:0;font-size:.95rem;color:var(--ink-500);}
/* — Zählwerk-Panel (dunkle Karte mit Count-up-Anzeige) — */
.meter-panel{
position:relative;overflow:hidden;isolation:isolate;
background:var(--grad-hero);border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);color:rgba(255,255,255,.78);
padding:clamp(1.8rem,3.5vw,2.6rem);
}
.meter-panel::before{content:"";position:absolute;inset:0;background-image:var(--noise);pointer-events:none;z-index:-1;}
.meter-panel::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(420px 300px at 86% 0%,rgba(26,156,70,.18),transparent 62%),
radial-gradient(360px 280px at 6% 100%,rgba(52,199,89,.12),transparent 60%);
}
.meter-panel__eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-300);margin-bottom:1.1rem;
}
.meter-panel h3{color:#fff;font-size:1.3rem;margin-bottom:.9rem;}
.meter-panel__text{font-size:.95rem;color:rgba(255,255,255,.75);margin:1.1rem 0 0;}
.meter-display{
background:rgba(8,22,13,.72);border:1px solid rgba(123,227,160,.28);
border-radius:var(--radius);padding:1.3rem 1.5rem;text-align:center;
}
.meter-display__num{
display:block;font-family:var(--font-display);font-weight:800;
font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;letter-spacing:.04em;
color:var(--green-300);font-variant-numeric:tabular-nums;
text-shadow:0 0 24px rgba(123,227,160,.45);
}
.meter-display__num .meter-unit{font-size:.45em;color:rgba(123,227,160,.75);margin-left:.2em;}
.meter-display__label{display:block;margin-top:.5rem;font-size:.78rem;color:rgba(255,255,255,.55);}
.meter-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;}
/* — Liefergebiete: PLZ-Leitzonen-Raster — */
.plz-intro-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .7rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem);}
.plz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;}
.plz-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.15rem 1rem;text-align:center;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.plz-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-300);}
.plz-card__zone{
display:inline-flex;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:50%;margin-bottom:.65rem;
background-image:var(--grad-brand);color:#fff;
font-family:var(--font-display);font-weight:800;font-size:1.2rem;
box-shadow:0 6px 16px rgba(22,101,52,.28);
}
.plz-card strong{display:block;font-size:.92rem;color:var(--ink-900);margin-bottom:.15rem;}
.plz-card span{display:block;font-size:.8rem;color:var(--muted);line-height:1.45;}
/* — Versandarten: Zusatznote unter dem Preis — */
.ship-price-note{font-size:.85rem;color:var(--muted);margin:.4rem 0 0;}
/* — Responsive Feinschliff Lieferungs-Seite — */
@media (max-width:575.98px){
.day-line::before{left:21px;}
.day-line__dot{width:44px;height:44px;font-size:1.1rem;}
.plz-grid{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================
24 KONTAKT (/kontakt) — additive Detail-Styles (kontakt.php)
============================================================ */
/* — Hero: Kontaktkanal-Glaskarte — */
.kontakt-hero__pad{padding-bottom:clamp(5rem,10vw,8rem);}
.kontakt-card{
padding:clamp(1.5rem,3vw,2.1rem);
max-width:560px;margin-left:auto;
}
.kontakt-card__head{
display:flex;align-items:center;justify-content:space-between;
gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
.kontakt-card__head h2{
font-size:1.35rem;margin:0;color:var(--ink-900);
}
.kt-status{
display:inline-flex;align-items:center;gap:.45rem;
padding:.32rem .8rem;border-radius:var(--radius-pill);
background:var(--paper-2);border:1px solid var(--line);
font-size:.8rem;font-weight:700;color:var(--ink-500);white-space:nowrap;
}
.kt-status .bi{font-size:.85rem;}
.kt-status--open{
background:var(--green-50);border-color:var(--green-100);color:var(--green-700);
}
.kt-channels{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.75rem;}
.kt-channel{
display:flex;align-items:center;gap:1rem;
padding:.9rem 1rem;border-radius:var(--radius-sm);
background:#fff;border:1px solid var(--line);
text-decoration:none;color:var(--ink-900);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.kt-channel:hover{
transform:translateY(-2px);box-shadow:var(--shadow-md);
border-color:var(--green-300);color:var(--ink-900);
}
.kt-channel .icon-blob{flex-shrink:0;}
.kt-channel__body{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.kt-channel__label{
font-size:.72rem;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;color:var(--green-700);
}
.kt-channel__value{
font-size:1.02rem;font-weight:800;color:var(--ink-900);
overflow-wrap:anywhere;
}
.kt-channel__hint{font-size:.82rem;color:var(--muted);}
.kt-channel__arrow{
margin-left:auto;flex-shrink:0;color:var(--green-600);
transition:transform .25s var(--ease);
}
.kt-channel:hover .kt-channel__arrow{transform:translateX(4px);}
/* — Formular-Karte — */
.kt-form-card{padding:clamp(1.6rem,3.5vw,2.5rem);}
.kt-form-card .section-head{margin-bottom:1.5rem;}
.kt-form-card .section-head h2{font-size:clamp(1.4rem,2.6vw,1.75rem);}
.kt-form-card .lead-heiz{font-size:1rem;}
.contact-form textarea{resize:vertical;min-height:150px;}
.kt-optional{font-weight:500;color:var(--muted);font-size:.85em;}
.kt-privacy{
display:flex;gap:.6rem;align-items:flex-start;margin:0;
font-size:.85rem;color:var(--ink-500);line-height:1.55;
}
.kt-privacy .bi{color:var(--green-600);flex-shrink:0;margin-top:.15rem;}
.kt-privacy a{color:var(--green-700);font-weight:600;}
.kt-form-secure{margin-top:1.4rem;justify-content:center;}
/* — Erfolg/Fehler-Meldungen — */
.kt-alert{
display:flex;gap:.85rem;align-items:flex-start;
border-radius:var(--radius-sm);padding:1.05rem 1.2rem;margin-bottom:1.4rem;
font-size:.95rem;line-height:1.55;
}
.kt-alert>.bi{font-size:1.3rem;flex-shrink:0;margin-top:.05rem;}
.kt-alert a{font-weight:700;}
.kt-alert--success{
background:var(--green-50);border:1px solid var(--green-300);color:var(--ink-700);
}
.kt-alert--success>.bi{color:var(--green-600);}
.kt-alert--success a{color:var(--green-700);}
.kt-alert--error{
background:#fdf1ef;border:1px solid #eebbb2;color:#7a2e22;
}
.kt-alert--error>.bi{color:#c0392b;}
.kt-alert--error a{color:#a03526;}
/* — Kontaktdaten-/Ablauf-Karten (Sidebar) — */
.kt-info-card{padding:clamp(1.4rem,2.5vw,1.9rem);}
.kt-info-card+.kt-info-card,
.kt-info-card+.card-heiz{margin-top:1.5rem;}
.kt-info-card .eyebrow{margin-bottom:.35rem;}
.kt-info-card__title{font-size:1.2rem;margin-bottom:1.1rem;}
.kt-facts{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem;}
.kt-facts li{display:flex;gap:.95rem;align-items:flex-start;}
.kt-facts .icon-blob{flex-shrink:0;}
.kt-facts strong{display:block;color:var(--ink-900);font-size:.98rem;margin-bottom:.15rem;}
.kt-facts address{margin:0;font-style:normal;color:var(--ink-500);font-size:.95rem;line-height:1.55;}
.kt-facts a{color:var(--green-700);font-weight:700;text-decoration:none;}
.kt-facts a:hover{text-decoration:underline;}
.kt-hours{width:100%;border-collapse:collapse;font-size:.93rem;}
.kt-hours th{
font-weight:600;color:var(--ink-500);text-align:left;
padding:.3rem 1rem .3rem 0;white-space:nowrap;
}
.kt-hours td{color:var(--ink-900);font-weight:700;padding:.3rem 0;white-space:nowrap;}
.kt-hours tr+tr th,.kt-hours tr+tr td{border-top:1px dashed var(--line);}
.kt-after-steps{grid-template-columns:1fr;}
/* — Karten-Platzhalter (Standort, ohne externes Embed) — */
.kt-map{
position:relative;border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow-lg);border:1px solid var(--line);
background:var(--green-50);
}
.kt-map svg{display:block;width:100%;height:auto;}
.kt-map__pin{
transform-origin:358px 150px;
animation:ktPinFloat 3.2s var(--ease) infinite alternate;
}
@keyframes ktPinFloat{
from{transform:translateY(0);}
to{transform:translateY(-8px);}
}
.kt-map__badge{
position:absolute;left:1rem;bottom:1rem;right:1rem;
display:flex;align-items:center;gap:.7rem;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid var(--line);border-radius:var(--radius-sm);
padding:.7rem .95rem;box-shadow:var(--shadow-md);
font-size:.88rem;color:var(--ink-500);line-height:1.4;
}
.kt-map__badge .bi{color:var(--amber-600);font-size:1.25rem;flex-shrink:0;}
.kt-map__badge strong{display:block;color:var(--ink-900);font-size:.95rem;}
@media (prefers-reduced-motion: reduce){
.kt-map__pin{animation:none;}
}
/* — Schnellhilfe-Karten (verlinkte Karten) — */
.kt-help-card{
display:block;height:100%;padding:clamp(1.4rem,2.5vw,1.8rem);
text-decoration:none;color:inherit;
}
.kt-help-card .icon-blob{margin-bottom:1rem;}
.kt-help-card h3{font-size:1.08rem;color:var(--ink-900);margin-bottom:.45rem;}
.kt-help-card p{color:var(--ink-500);font-size:.92rem;margin-bottom:.9rem;}
.kt-help-card__more{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.9rem;font-weight:700;color:var(--green-700);
transition:gap .25s var(--ease);
}
.kt-help-card:hover .kt-help-card__more{gap:.65rem;}
.kt-help-card:hover h3{color:var(--green-700);}
/* ============================================================
25 RATGEBER-ARTIKEL (ratgeber-*.php) — additive Styles (.rga-)
============================================================ */
/* — Artikel-Hero (dunkelgrün, editorial) — */
.rga-hero__pad{padding:clamp(2.4rem,5.5vw,4.2rem) 0 clamp(3.2rem,7vw,5.2rem);}
.rga-hero h1{max-width:22ch;}
.rga-hero .lead-heiz{max-width:38rem;}
.rga-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:1.7rem;}
.rga-meta__author{display:inline-flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.88);font-weight:700;font-size:.95rem;line-height:1.3;}
.rga-meta__author small{display:block;font-weight:500;font-size:.78rem;color:rgba(255,255,255,.6);}
.rga-meta__avatar{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
background:var(--grad-amber);color:var(--green-950);
display:inline-flex;align-items:center;justify-content:center;
font-size:1.2rem;box-shadow:0 8px 20px rgba(26,156,70,.3);
}
.rga-meta__item{display:inline-flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.72);font-size:.9rem;font-weight:600;}
.rga-meta__item .bi{color:var(--amber-400);}
.rga-figure{position:relative;max-width:520px;margin:0 auto;}
.rga-figure svg{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 52px rgba(8,22,13,.4));}
@media (max-width:991.98px){
.rga-figure{max-width:420px;margin-top:.5rem;}
}
/* — Artikel-Körper: Lese-Typografie — */
.rga-body{font-size:1.04rem;line-height:1.78;color:var(--ink-700);}
.rga-body p{margin-bottom:1.15rem;}
.rga-body a:not([class*="btn-"]){font-weight:700;text-decoration:underline;text-decoration-color:var(--green-300);text-underline-offset:3px;}
.rga-body a:not([class*="btn-"]):hover{text-decoration-color:var(--green-600);}
.rga-section{padding-top:clamp(2.4rem,4.5vw,3.4rem);scroll-margin-top:110px;}
.rga-section h2{font-size:clamp(1.45rem,2.4vw,1.85rem);margin-bottom:1rem;letter-spacing:-.01em;}
.rga-section h3{font-size:1.15rem;margin:1.4rem 0 .6rem;}
.rga-kicker{
display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.5rem;
font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-600);
}
.rga-kicker .bi{font-size:.95rem;}
.rga-list{list-style:none;margin:0 0 1.15rem;padding:0;display:grid;gap:.55rem;}
.rga-list li{display:flex;gap:.65rem;align-items:flex-start;}
.rga-list li>.bi{color:var(--green-600);flex-shrink:0;margin-top:.22rem;font-size:1rem;}
.rga-list--amber li>.bi{color:var(--amber-500);}
/* — „Das Wichtigste in Kürze" — */
.rga-keyfacts{
background:linear-gradient(135deg,var(--green-50) 0%,#ffffff 78%);
border:1px solid var(--green-100);border-left:5px solid var(--green-600);
border-radius:var(--radius);box-shadow:var(--shadow-sm);
padding:clamp(1.35rem,2.6vw,1.9rem);
}
.rga-keyfacts h2{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;margin-bottom:.9rem;}
.rga-keyfacts h2 .bi{color:var(--amber-500);font-size:1.25rem;}
.rga-keyfacts ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.rga-keyfacts li{display:flex;gap:.65rem;align-items:flex-start;font-size:.99rem;color:var(--ink-700);}
.rga-keyfacts li>.bi{color:var(--green-600);flex-shrink:0;margin-top:.2rem;}
.rga-keyfacts li strong{color:var(--ink-900);}
/* — Inhaltsverzeichnis (Sprungmarken) — */
.rga-toc{
margin-top:1.5rem;padding:1.25rem 1.4rem;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
}
.rga-toc__title{
display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem;
font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);
}
.rga-toc__title .bi{color:var(--green-600);font-size:1rem;}
.rga-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;}
.rga-toc a{
display:flex;gap:.6rem;align-items:baseline;padding:.4rem .55rem;border-radius:10px;
font-weight:600;font-size:.96rem;color:var(--ink-700);
transition:background .2s var(--ease),color .2s var(--ease);
}
.rga-toc a:hover{background:var(--green-50);color:var(--green-800);}
.rga-toc__num{color:var(--green-600);font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0;}
@media (max-width:575.98px){
.rga-toc ol{grid-template-columns:1fr;}
}
/* — Fakten-Chips im Fließtext — */
.rga-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.2rem;}
/* — Bedingungs-Karten (z. B. Temperatur/Licht/Sauerstoff) — */
.rga-cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0;}
.rga-cond-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:1.25rem 1.2rem;box-shadow:var(--shadow-sm);text-align:center;
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.rga-cond-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.rga-cond-card .icon-blob{width:52px;height:52px;font-size:1.35rem;margin:0 auto .8rem;}
.rga-cond-card h3{font-size:1.02rem;margin:0 0 .35rem;}
.rga-cond-card p{font-size:.9rem;color:var(--ink-500);margin:0;line-height:1.55;}
.rga-cond-card strong{color:var(--ink-900);font-variant-numeric:tabular-nums;}
@media (max-width:767.98px){
.rga-cond-grid{grid-template-columns:1fr;}
}
/* — Artikel-Tabelle (scrollt mobil im eigenen Container) — */
.rga-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin:1.4rem 0;background:#fff;}
.rga-table{width:100%;min-width:660px;margin:0;border-collapse:collapse;font-size:.95rem;}
.rga-table caption{
caption-side:top;text-align:left;padding:.9rem 1.1rem .35rem;
font-weight:800;color:var(--ink-900);font-size:1rem;
}
.rga-table thead th{
background:var(--green-800);color:#fff;font-weight:700;font-size:.88rem;
padding:.8rem 1.1rem;text-align:left;white-space:nowrap;
}
.rga-table tbody th{font-weight:700;color:var(--ink-900);}
.rga-table tbody th,.rga-table tbody td{padding:.85rem 1.1rem;border-top:1px solid var(--line);vertical-align:top;text-align:left;}
.rga-table tbody tr:nth-child(even){background:var(--paper);}
.rga-table tbody td{color:var(--ink-700);}
/* — Checkliste — */
.rga-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.4rem 0;}
.rga-check-item{
display:flex;gap:.8rem;align-items:flex-start;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:1rem 1.15rem;
}
.rga-check-item>.bi{color:var(--green-600);font-size:1.15rem;flex-shrink:0;margin-top:.05rem;}
.rga-check-item strong{display:block;color:var(--ink-900);font-size:.98rem;margin-bottom:.15rem;}
.rga-check-item p{margin:0;font-size:.9rem;color:var(--ink-500);line-height:1.55;}
@media (max-width:767.98px){
.rga-check-grid{grid-template-columns:1fr;}
}
/* — Autor-/Datum-Box am Artikelende — */
.rga-author{
display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(1.2rem,2.4vw,1.6rem);margin-top:clamp(2.4rem,4.5vw,3.4rem);
}
.rga-author .rga-meta__avatar{width:52px;height:52px;font-size:1.35rem;box-shadow:var(--shadow-sm);}
.rga-author__body{flex:1;min-width:240px;}
.rga-author__body strong{display:block;color:var(--ink-900);font-size:1.02rem;}
.rga-author__body p{margin:.35rem 0 0;font-size:.92rem;color:var(--ink-500);line-height:1.6;}
.rga-author__dates{
display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted);
font-weight:600;white-space:nowrap;
}
.rga-author__dates .bi{color:var(--green-600);margin-right:.35rem;}
/* — Sticky-Sidebar des Artikels — */
.rga-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:1.3rem;}
@media (max-width:991.98px){
.rga-aside{position:static;margin-top:2.5rem;}
}
.rga-aside-card{padding:clamp(1.25rem,2.4vw,1.6rem);}
.rga-aside-card__title{
display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;
font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);
}
.rga-aside-card__title .bi{color:var(--amber-500);font-size:1rem;}
.rga-aside-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem;}
.rga-aside-price strong{
font-size:2rem;font-weight:800;color:var(--ink-900);
font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.rga-aside-price span{font-size:.92rem;font-weight:600;color:var(--ink-500);}
.rga-aside-card .btn-heiz-amber{width:100%;margin-top:.9rem;}
.rga-aside-card .calc-secure{margin-top:1rem;}
.rga-aside-links{list-style:none;margin:0;padding:0;}
.rga-aside-links li+li{border-top:1px dashed var(--line);}
.rga-aside-links a{
display:flex;gap:.65rem;align-items:flex-start;padding:.7rem .2rem;
font-weight:600;font-size:.94rem;color:var(--ink-700);
}
.rga-aside-links a:hover{color:var(--green-800);}
.rga-aside-links a .bi{color:var(--green-600);flex-shrink:0;margin-top:.2rem;}
.rga-aside-card .ts-seal{margin-top:1.1rem;}
/* ============================================================
25 RATGEBER-ARTIKEL — additive Detail-Styles (ratgeber-*.php)
(Artikel-Hero + Meta-Zeile, Inhaltsverzeichnis, Artikel-Typo,
„Wichtigste in Kürze"-Box, Info-/„Gut zu wissen"-Boxen,
Vergleichstabelle, Entscheidungs-Karten, Autor-Box, Sidebar)
============================================================ */
/* — Artikel-Hero — */
.art-hero__pad{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2.8rem,6vw,4.4rem);}
.art-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);}
.art-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.5rem;
margin-top:1.35rem;font-size:.92rem;color:rgba(255,255,255,.75);
}
.art-meta>span{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;}
.art-meta .bi{color:var(--green-300);font-size:1rem;}
.art-hero-visual{display:flex;align-items:center;justify-content:center;}
.art-hero-visual svg{
width:min(300px,72%);height:auto;
filter:drop-shadow(0 24px 48px rgba(8,22,13,.45));
}
@media (max-width:991.98px){
.art-hero-visual{margin-top:1.5rem;}
.art-hero-visual svg{width:min(220px,60%);}
}
/* — Artikel-Typografie — */
.art-body{font-size:1.05rem;}
.art-body h2{
font-size:clamp(1.45rem,2.6vw,1.9rem);
margin:clamp(2.4rem,4vw,3.2rem) 0 1rem;
scroll-margin-top:120px;
}
.art-body h2::after{
content:"";display:block;width:52px;height:3px;border-radius:3px;
background:var(--grad-amber);margin-top:.55rem;
}
.art-body h3{font-size:1.18rem;margin:1.8rem 0 .6rem;}
.art-body p{margin-bottom:1.05rem;}
.art-body ul,.art-body ol{padding-left:1.25rem;margin-bottom:1.25rem;}
.art-body li{margin-bottom:.45rem;}
.art-body li::marker{color:var(--green-600);font-weight:700;}
.art-body .art-lead{font-size:1.12rem;color:var(--ink-700);}
/* — „Das Wichtigste in Kürze" — */
.art-keyfacts{
background:linear-gradient(135deg,var(--green-50) 0%,#ffffff 78%);
border:1px solid var(--green-100);border-radius:var(--radius);
box-shadow:var(--shadow-sm);
padding:clamp(1.4rem,2.5vw,1.9rem);
margin:0 0 clamp(1.8rem,3vw,2.4rem);
}
.art-keyfacts__title{
display:flex;align-items:center;gap:.6rem;
font-family:var(--font-display);font-weight:800;font-size:.95rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--green-800);
margin-bottom:1rem;
}
.art-keyfacts__title .bi{color:var(--amber-500);font-size:1.15rem;}
.art-keyfacts ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;}
.art-keyfacts li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem;margin:0;}
.art-keyfacts li .bi{color:var(--green-600);flex-shrink:0;margin-top:.16rem;}
.art-keyfacts li strong{color:var(--ink-900);}
/* — Info-/„Gut zu wissen"-Box — */
.art-infobox{
display:flex;gap:1rem;align-items:flex-start;
background:var(--green-50);border:1px solid var(--green-100);
border-left:4px solid var(--green-600);
border-radius:var(--radius-sm);
padding:1.15rem 1.3rem;margin:1.6rem 0;font-size:.97rem;
}
.art-infobox>.bi{font-size:1.35rem;color:var(--green-700);flex-shrink:0;margin-top:.05rem;}
.art-infobox__title{display:block;font-weight:800;color:var(--ink-900);margin-bottom:.3rem;}
.art-infobox p{margin-bottom:.6rem;}
.art-infobox p:last-child,.art-infobox ul:last-child{margin-bottom:0;}
.art-infobox--amber{background:#e9f5ee;border-color:#cdeeda;border-left-color:var(--amber-500);}
.art-infobox--amber>.bi{color:var(--amber-600);}
/* — Inhaltsverzeichnis (Sidebar + mobile ) — */
.art-toc{padding:1.3rem 1.4rem;}
.art-toc__title{
display:flex;align-items:center;gap:.55rem;
font-family:var(--font-display);font-weight:800;font-size:1rem;
color:var(--ink-900);margin-bottom:.8rem;
}
.art-toc__title .bi{color:var(--green-600);}
.art-toc ol{list-style:none;margin:0;padding:0;counter-reset:artToc;}
.art-toc ol li{counter-increment:artToc;margin:0;}
.art-toc ol a{
display:flex;gap:.7rem;align-items:baseline;
padding:.48rem .6rem;border-radius:10px;
font-size:.93rem;font-weight:600;color:var(--ink-500);
transition:background-color .2s var(--ease),color .2s var(--ease);
}
.art-toc ol a::before{
content:counter(artToc,decimal-leading-zero);
font-family:var(--font-display);font-weight:800;font-size:.78rem;
color:var(--green-300);flex-shrink:0;font-variant-numeric:tabular-nums;
}
.art-toc ol a:hover,.art-toc ol a.is-active{background:var(--green-50);color:var(--green-800);}
.art-toc ol a.is-active::before{color:var(--amber-500);}
.art-toc-mobile{margin-bottom:1.75rem;border-radius:var(--radius);overflow:hidden;}
.art-toc-mobile summary{
display:flex;align-items:center;gap:.6rem;cursor:pointer;
padding:1.05rem 1.3rem;list-style:none;
font-family:var(--font-display);font-weight:800;color:var(--ink-900);
}
.art-toc-mobile summary::-webkit-details-marker{display:none;}
.art-toc-mobile summary .bi-list-ul{color:var(--green-600);}
.art-toc-mobile summary .art-toc-mobile__chev{margin-left:auto;color:var(--muted);transition:transform .25s var(--ease);}
.art-toc-mobile[open] summary .art-toc-mobile__chev{transform:rotate(180deg);}
.art-toc-mobile .art-toc{padding-top:.25rem;}
/* — Sticky Sidebar — */
@media (min-width:992px){.art-aside{position:sticky;top:118px;}}
.art-aside>*+*{margin-top:1.25rem;}
.art-pricebox{padding:1.3rem 1.4rem;}
.art-pricebox__label{
display:flex;align-items:center;gap:.5rem;
font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-700);margin-bottom:.85rem;
}
.art-pricebox__rows{display:grid;gap:.5rem;margin-bottom:1.05rem;}
.art-pricebox__row{
display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;
padding-bottom:.5rem;border-bottom:1px dashed var(--line);
}
.art-pricebox__row:last-child{border-bottom:0;padding-bottom:0;}
.art-pricebox__row strong{color:var(--ink-900);font-variant-numeric:tabular-nums;white-space:nowrap;}
.art-pricebox__note{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;line-height:1.5;}
.art-trustbox{padding:1.2rem 1.4rem;display:grid;gap:.85rem;}
/* — Vergleichstabelle — */
.table-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;
margin:1.6rem 0;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);background:#fff;
}
.art-table{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:.94rem;margin:0;}
.art-table th,.art-table td{padding:.85rem 1.05rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;}
.art-table thead th{
background:var(--green-900);color:#fff;
font-family:var(--font-display);font-weight:700;font-size:.88rem;
white-space:nowrap;border-bottom:0;
}
.art-table thead th small{display:block;font-family:var(--font-body);font-weight:500;color:rgba(255,255,255,.65);font-size:.76rem;white-space:normal;}
.art-table tbody th{font-weight:700;color:var(--ink-900);background:var(--paper);white-space:nowrap;font-size:.9rem;}
.art-table tbody tr:last-child th,.art-table tbody tr:last-child td{border-bottom:0;}
.art-table td .bi-check-circle-fill{color:var(--green-600);margin-right:.3rem;}
.art-table td .bi-plus-circle-fill{color:var(--amber-500);margin-right:.3rem;}
.art-table td .bi-dash-circle{color:var(--muted);margin-right:.3rem;}
.art-table .art-table__hl{background:var(--green-50);}
.art-table thead th.art-table__hl{background:var(--green-800);}
.table-wrap__hint{
display:none;font-size:.8rem;color:var(--muted);margin:-1rem 0 1.5rem;
}
@media (max-width:767.98px){.table-wrap__hint{display:flex;align-items:center;gap:.4rem;}}
/* — Entscheidungshilfe-Karten — */
.art-decision{display:grid;gap:1rem;margin:1.6rem 0;}
@media (min-width:768px){.art-decision{grid-template-columns:1fr 1fr;}}
.art-decision__card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.25rem 1.35rem;
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.art-decision__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.art-decision__num{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;flex-shrink:0;
background:var(--green-50);color:var(--green-700);
font-family:var(--font-display);font-weight:800;font-size:.88rem;
}
.art-decision__q{display:flex;gap:.7rem;align-items:flex-start;font-weight:800;color:var(--ink-900);margin-bottom:.55rem;line-height:1.35;}
.art-decision__a{font-size:.94rem;color:var(--ink-500);margin:0;padding-left:calc(30px + .7rem);}
.art-decision__a strong{color:var(--green-700);}
/* — Autor-/Datum-Box — */
.art-author{
display:flex;gap:1rem;align-items:flex-start;
background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--radius);padding:1.25rem 1.4rem;
margin:clamp(2.2rem,4vw,3rem) 0 0;
}
.art-author__avatar{
width:52px;height:52px;border-radius:50%;flex-shrink:0;
background:var(--grad-brand);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.art-author strong{display:block;color:var(--ink-900);}
.art-author p{margin:.15rem 0 0;font-size:.9rem;color:var(--ink-500);}
/* ============================================================
ÜBER UNS — ueber-uns.php (additiv)
============================================================ */
/* — Hero — */
.about-hero__pad{position:relative;z-index:1;padding-bottom:clamp(3rem,6vw,5rem);}
.about-hero__drop{position:absolute;z-index:0;pointer-events:none;}
.about-hero__drop--a{top:8%;right:5%;opacity:.85;}
.about-hero__drop--b{bottom:16%;left:3.5%;width:54px;height:auto;opacity:.5;}
@media (max-width:991.98px){
.about-hero__drop{display:none;}
}
/* — Versprechen-Glaskarte im Hero — */
.about-promise .check-list{margin-bottom:0;}
.about-promise .check-list li{font-weight:500;}
.about-promise .check-list li strong{color:var(--ink-900);}
.about-promise__divider{border-top:1px solid var(--line);margin:1.25rem 0;}
.about-promise .calc-secure{margin-top:1rem;}
/* — Zertifikats-/Trust-Karten — */
.cert-card{padding:clamp(1.6rem,3vw,2.2rem);text-align:center;height:100%;}
.cert-card .icon-blob{margin:0 auto 1.1rem;}
.cert-card__badge{
display:block;width:72px;height:72px;margin:0 auto 1.1rem;
filter:drop-shadow(0 12px 24px rgba(13,40,24,.18));
transition:transform .3s var(--ease);
}
.cert-card:hover .cert-card__badge{transform:scale(1.06);}
.cert-card h3{font-size:1.15rem;margin-bottom:.6rem;}
.cert-card p{color:var(--ink-500);font-size:.95rem;margin-bottom:1rem;}
.cert-card__link{
display:inline-flex;align-items:center;gap:.4rem;
font-weight:700;font-size:.94rem;color:var(--green-700);text-decoration:none;
}
.cert-card__link:hover{color:var(--green-500);}
.cert-card__link .bi{transition:transform .25s var(--ease);}
.cert-card__link:hover .bi{transform:translateX(3px);}
/* ============================================================
25 WIDERRUF (/widerruf) — additive Styles (widerruf.php)
Nutzt die Rechtsseiten-Basis .agb-* (Abschnitt 24) —
hier nur widerrufsspezifische Ergänzungen.
============================================================ */
/* — Frist-Karte in der Sidebar: 14-Tage-Ring — */
.deadline-card{text-align:center;}
.deadline-ring{
width:118px;height:118px;border-radius:50%;margin:0 auto .95rem;
background:
radial-gradient(closest-side,#fff 77%,transparent 78% 100%),
conic-gradient(var(--green-500) 0 272deg,var(--green-100) 272deg 360deg);
display:grid;place-items:center;
}
.deadline-ring__inner{display:grid;justify-items:center;line-height:1;}
.deadline-ring__num{
font-family:var(--font-display);font-weight:800;font-size:2.35rem;
color:var(--green-800);font-variant-numeric:tabular-nums;
}
.deadline-ring__label{
font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--green-600);margin-top:.3rem;
}
.deadline-card p{font-size:.87rem;color:var(--ink-500);margin:0;line-height:1.6;}
.deadline-card p strong{color:var(--ink-900);}
/* — Muster-Widerrufsformular als „Dokument" — */
.widerruf-doc{
position:relative;background:#fff;
border:2px dashed var(--green-300);border-radius:var(--radius-sm);
padding:clamp(1.6rem,3vw,2.1rem) clamp(1.2rem,2.6vw,1.8rem) clamp(1.3rem,2.6vw,1.7rem);
margin-top:1.45rem;
}
.widerruf-doc__badge{
position:absolute;top:-.85rem;left:1.15rem;
display:inline-flex;align-items:center;gap:.4rem;
background:var(--grad-brand);color:#fff;
font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
padding:.32rem .85rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
}
.widerruf-doc__intro{font-size:.9rem;color:var(--muted);font-style:italic;margin:0 0 1.15rem;}
.widerruf-doc__list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;}
.widerruf-doc__list li{
position:relative;padding-left:1.35rem;color:var(--ink-700);line-height:1.65;
}
.widerruf-doc__list li::before{
content:"—";position:absolute;left:0;top:0;color:var(--green-600);font-weight:700;
}
.widerruf-doc__list .agb-address{margin:.55rem 0 0;}
.fill-line{
display:inline-block;min-width:min(240px,58vw);height:1em;vertical-align:baseline;
border-bottom:2px dotted var(--green-300);
}
.widerruf-doc__footnote{font-size:.83rem;color:var(--muted);margin:1.15rem 0 0;}
.widerruf-doc__actions{
display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid var(--line);
}
.widerruf-doc__hint{
display:inline-flex;align-items:center;gap:.45rem;
font-size:.84rem;color:var(--muted);
}
.widerruf-doc__hint .bi{color:var(--green-600);}
/* ============================================================
LEGAL-SEITEN (Datenschutz · Impressum · AGB · Widerruf)
— additive Styles, genutzt von datenschutz.php u. a.
============================================================ */
/* — kompakter Legal-Hero — */
.legal-hero__pad{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(3.6rem,7vw,5.4rem);}
.legal-hero .lead-heiz{max-width:660px;}
.legal-meta{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.4rem;}
/* — Kurzüberblick-Karten direkt unter dem Hero — */
.legal-quick-section{padding:clamp(.75rem,1.8vw,1.4rem) 0 clamp(1.2rem,3vw,2rem);}
.legal-quick-card{height:100%;padding:clamp(1.3rem,2.4vw,1.8rem);}
.legal-quick-card .icon-blob{margin-bottom:.9rem;}
.legal-quick-card h2{font-size:1.08rem;margin-bottom:.45rem;}
.legal-quick-card p{margin:0;font-size:.93rem;color:var(--ink-500);}
.legal-quick-card a{font-weight:700;color:var(--green-700);}
.legal-quick-card a:hover{color:var(--green-800);text-decoration:underline;}
/* — Layout: klebendes Inhaltsverzeichnis — */
.legal-main{padding-top:clamp(1.5rem,3vw,2.5rem);}
.legal-toc{
position:sticky;top:104px;
background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-sm);
padding:1.25rem 1.1rem 1.1rem;
}
.legal-toc__title{
display:flex;align-items:center;gap:.5rem;
font-size:.8rem;font-weight:800;text-transform:uppercase;
letter-spacing:.08em;color:var(--green-700);margin:0 0 .7rem .55rem;
}
.legal-toc__title .bi{color:var(--green-500);}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:legaltoc;}
.legal-toc li{counter-increment:legaltoc;}
.legal-toc a{
display:flex;align-items:baseline;gap:.6rem;
padding:.42rem .55rem;border-radius:10px;border-left:3px solid transparent;
color:var(--ink-500);font-size:.9rem;font-weight:600;line-height:1.35;
transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.legal-toc a::before{
content:counter(legaltoc,decimal-leading-zero);
font-size:.72rem;font-weight:800;color:var(--green-400);
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.legal-toc a:hover{background:var(--green-50);color:var(--green-800);}
.legal-toc a.is-active{
background:var(--green-50);color:var(--green-800);
border-left-color:var(--green-500);
}
@media (max-width:991.98px){
.legal-toc{position:static;margin-bottom:.5rem;}
}
/* — Inhaltsblöcke — */
.legal-block{
background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-sm);
padding:clamp(1.5rem,3vw,2.3rem);
scroll-margin-top:120px;
}
.legal-block+.legal-block{margin-top:1.4rem;}
.legal-block h2{
display:flex;align-items:baseline;gap:.8rem;
font-size:clamp(1.25rem,2.2vw,1.5rem);margin-bottom:1.1rem;
padding-bottom:.85rem;border-bottom:1px solid var(--line);
}
.legal-num{
font-size:.8rem;font-weight:800;color:var(--green-500);
font-variant-numeric:tabular-nums;letter-spacing:.04em;flex-shrink:0;
}
.legal-block h3{font-size:1.02rem;margin:1.5rem 0 .5rem;color:var(--ink-900);}
.legal-block p{color:var(--ink-700);font-size:.97rem;line-height:1.75;}
.legal-block a{color:var(--green-700);font-weight:600;}
.legal-block a:hover{color:var(--green-800);text-decoration:underline;}
/* — Häkchen-/Icon-Listen im Rechtstext — */
.legal-check{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.55rem;}
.legal-check li{
display:flex;align-items:flex-start;gap:.6rem;
color:var(--ink-700);font-size:.95rem;line-height:1.65;
}
.legal-check li>.bi{color:var(--green-600);flex-shrink:0;margin-top:.2rem;font-size:.95rem;}
/* — Adress-/Kontakt-Karte im Rechtstext — */
.legal-contact-card{
display:flex;gap:1rem;align-items:flex-start;
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius-sm);padding:1.15rem 1.25rem;
}
.legal-contact-card address{margin:0;font-style:normal;line-height:1.7;color:var(--ink-700);}
.legal-contact-card strong{color:var(--ink-900);}
.legal-contact-card .icon-blob{flex-shrink:0;}
/* — Betroffenenrechte-Grid — */
.rights-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:.9rem;margin:1rem 0 1.4rem;
}
.rights-grid__item{
background:var(--paper);border:1px solid var(--line);
border-radius:var(--radius-sm);padding:.95rem 1.05rem;
}
.rights-grid__item .bi{color:var(--green-600);font-size:1.15rem;display:block;margin-bottom:.35rem;}
.rights-grid__item strong{display:block;color:var(--ink-900);font-size:.93rem;margin-bottom:.2rem;}
.rights-grid__item span{font-size:.85rem;color:var(--ink-500);line-height:1.5;display:block;}
@media (max-width:575.98px){
.rights-grid{grid-template-columns:1fr;}
}
/* — hervorgehobener Widerspruchs-Hinweis (Art. 21 DSGVO) — */
.objection-box{
background:#e9f5ee;border:1px solid #cdeeda;border-left:4px solid var(--amber-500);
border-radius:var(--radius-sm);padding:1.15rem 1.3rem;margin:0 0 1.4rem;
}
.objection-box__title{
display:flex;align-items:center;gap:.5rem;
font-weight:800;color:var(--ink-900);font-size:.95rem;margin:0 0 .5rem;
text-transform:uppercase;letter-spacing:.04em;
}
.objection-box__title .bi{color:var(--amber-600);}
.objection-box p{font-size:.92rem;line-height:1.7;}
/* — Inline-Button (Cookie-Einstellungen) & Stand-Zeile — */
.legal-inline-btn{font-size:inherit;font-weight:700;}
.legal-stand{
display:flex;align-items:baseline;gap:.55rem;
font-size:.88rem;color:var(--muted);
}
.legal-stand .bi{color:var(--green-500);}
.legal-stand strong{color:var(--ink-700);}
/* — weiterführende Links unter dem Rechtstext — */
.legal-next{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;}
/* ============================================================
24 ZAHLUNGSARTEN (/zahlungsarten) — additive Styles (zahlungsarten.php)
============================================================ */
/* — Hero: Dekor-Tropfen nur auf großen Screens, nie über Inhalten — */
.pm-hero__pad{position:relative;z-index:1;}
.pm-hero__drop{position:absolute;z-index:0;pointer-events:none;}
.pm-hero__drop--a{top:8%;right:5%;opacity:.8;}
.pm-hero__drop--b{bottom:16%;left:3.5%;opacity:.5;}
@media (max-width:991.98px){
.pm-hero__drop{display:none;}
}
/* — Schnell-Übersicht der Zahlarten (Glaskarte im Hero) — */
.pm-overview{position:relative;z-index:2;max-width:520px;margin-left:auto;}
@media (max-width:991.98px){
.pm-overview{margin:0 auto;}
}
.pm-overview__list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;}
a.pm-quick{
display:flex;align-items:center;gap:.9rem;
padding:.9rem 1rem;border-radius:var(--radius);
background:#fff;border:1px solid var(--line);
text-decoration:none;color:var(--ink-700);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
a.pm-quick:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--green-300);}
a.pm-quick:focus-visible{outline:3px solid var(--green-500);outline-offset:2px;}
.pm-quick__icon{
width:46px;height:46px;flex-shrink:0;
border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:var(--green-50);color:var(--green-700);
display:flex;align-items:center;justify-content:center;font-size:1.25rem;
transition:transform .25s var(--ease);
}
.pm-quick__icon--amber{background:#e9f5ee;color:var(--amber-600);}
a.pm-quick:hover .pm-quick__icon{transform:scale(1.07) rotate(-4deg);}
.pm-quick__body{flex:1;min-width:0;}
.pm-quick__body strong{display:block;color:var(--ink-900);font-size:.98rem;}
.pm-quick__body span{display:block;font-size:.82rem;color:var(--ink-500);line-height:1.4;}
.pm-quick__arrow{color:var(--green-600);flex-shrink:0;transition:transform .25s var(--ease);}
a.pm-quick:hover .pm-quick__arrow{transform:translateY(3px);}
/* — Detail-Karten der drei Zahlarten — */
.pm-card{padding:0;overflow:hidden;scroll-margin-top:120px;}
.pm-card+.pm-card{margin-top:clamp(1.6rem,3vw,2.4rem);}
.pm-card__head{
display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
padding:clamp(1.4rem,2.5vw,1.9rem) clamp(1.4rem,3vw,2.2rem);
border-bottom:1px solid var(--line);
background:linear-gradient(135deg,var(--green-50) 0%,#ffffff 70%);
}
.pm-card__head .icon-blob{width:58px;height:58px;font-size:1.5rem;flex-shrink:0;}
.pm-card__title{flex:1;min-width:230px;}
.pm-card__title h3{margin:0 0 .2rem;font-size:clamp(1.25rem,2vw,1.5rem);}
.pm-card__title p{margin:0;font-size:.92rem;color:var(--ink-500);}
.pm-card__grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(1.4rem,2.5vw,2rem);
padding:clamp(1.4rem,2.5vw,1.9rem) clamp(1.4rem,3vw,2.2rem);
}
@media (max-width:991.98px){
.pm-card__grid{grid-template-columns:1fr;}
}
.pm-col__title{
display:flex;align-items:center;gap:.5rem;
font-family:var(--font-body);
font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--green-700);margin-bottom:.85rem;
}
.pm-col__title .bi{color:var(--amber-500);font-size:1rem;}
.pm-steps{list-style:none;counter-reset:pmstep;margin:0;padding:0;display:grid;gap:.75rem;}
.pm-steps li{
position:relative;padding-left:2.4rem;counter-increment:pmstep;
font-size:.93rem;color:var(--ink-700);line-height:1.55;
}
.pm-steps li::before{
content:counter(pmstep);
position:absolute;left:0;top:.05rem;width:1.7rem;height:1.7rem;
border-radius:50%;background-image:var(--grad-brand);color:#fff;
font-family:var(--font-display);font-weight:700;font-size:.85rem;
display:flex;align-items:center;justify-content:center;
}
.pm-steps li strong{color:var(--ink-900);}
.pm-points{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.pm-points li{
display:flex;gap:.55rem;align-items:flex-start;
font-size:.93rem;color:var(--ink-700);line-height:1.55;
}
.pm-points li .bi{color:var(--green-600);flex-shrink:0;margin-top:.14rem;}
.pm-points li strong{color:var(--ink-900);}
.pm-col--for{
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--radius);padding:1.2rem 1.3rem;
}
.pm-col--for .pm-points li .bi{color:var(--amber-500);}
.pm-card__foot{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:.8rem 1.25rem;
padding:1rem clamp(1.4rem,3vw,2.2rem);
border-top:1px dashed var(--line);background:var(--paper);
font-size:.86rem;color:var(--ink-500);
}
.pm-card__foot-note{display:flex;gap:.5rem;align-items:flex-start;flex:1;min-width:260px;line-height:1.5;}
.pm-card__foot-note>.bi{color:var(--amber-500);font-size:1.05rem;flex-shrink:0;margin-top:.05rem;}
.pm-card__foot-note strong{color:var(--ink-900);}
/* — Vergleichstabelle (scrollt mobil innerhalb des Wrappers) — */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pm-compare{
width:100%;min-width:760px;border-collapse:separate;border-spacing:0;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow-md);
}
.pm-compare th,.pm-compare td{
padding:.95rem 1.15rem;text-align:left;vertical-align:top;
font-size:.92rem;line-height:1.5;border-bottom:1px solid var(--line);
}
.pm-compare thead th{
background:var(--brand-deep);color:#fff;
font-family:var(--font-display);font-weight:700;font-size:.95rem;
white-space:nowrap;border-bottom:0;
}
.pm-compare thead th .bi{color:var(--amber-400);margin-right:.45rem;}
.pm-compare tbody th{
width:200px;background:var(--paper);color:var(--ink-900);
font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.pm-compare tbody td{color:var(--ink-700);}
.pm-compare tbody td .bi{color:var(--green-600);margin-right:.35rem;}
.pm-compare tbody tr:nth-child(even) td{background:#fcfcf9;}
.pm-compare tbody tr:last-child th,.pm-compare tbody tr:last-child td{border-bottom:0;}
/* ============================================================
25 HEIZÖLPREIS (/heizoelpreis) — additive Styles (heizoelpreis.php)
============================================================ */
/* — Hero: Padding + Widget-Platzierung — */
.hp-hero__pad{position:relative;z-index:1;padding:clamp(2.8rem,6vw,4.6rem) 0 clamp(3.4rem,7vw,5.4rem);}
.hp-hero h1{margin-bottom:1rem;}
.hp-hero .lead-heiz{max-width:36rem;margin-bottom:1.5rem;}
.hp-hero .lead-heiz a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.hp-hero .lead-heiz a:hover{color:var(--amber-300);}
.hp-hero .price-widget{position:relative;z-index:2;max-width:520px;margin-left:auto;}
@media (max-width:991.98px){
.hp-hero .price-widget{margin:0 auto;}
}
/* — Dekorativer Öltropfen (nur Desktop, nie über Inhalten) — */
.hp-hero__drop{position:absolute;top:9%;right:4%;z-index:0;pointer-events:none;opacity:.75;}
@media (max-width:991.98px){
.hp-hero__drop{display:none;}
}
/* — Preistabellen (Sortenpreise + Mengen-Staffel): eigener Scroll-Container,
Seite scrollt nie horizontal — */
.hp-table-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;
background:#fff;border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-md);
}
.hp-table{width:100%;min-width:640px;margin:0;border-collapse:separate;border-spacing:0;font-size:.97rem;}
.hp-table thead th{
background:var(--green-50);color:var(--green-800);
font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
padding:.9rem 1.15rem;border-bottom:1px solid var(--line);
text-align:left;white-space:nowrap;
}
.hp-table tbody th,.hp-table tbody td{
padding:1.05rem 1.15rem;border-bottom:1px solid var(--line);
vertical-align:middle;text-align:left;color:var(--ink-700);
}
.hp-table tbody tr:last-child th,.hp-table tbody tr:last-child td{border-bottom:0;}
.hp-table tbody tr:hover{background:var(--paper);}
.hp-rowhead{font-weight:800;color:var(--ink-900);}
.hp-table .hp-num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-900);white-space:nowrap;}
.hp-table .hp-strong{
font-family:var(--font-display);font-weight:800;font-size:1.12em;
color:var(--green-800);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hp-sub{display:block;font-size:.8rem;font-weight:600;color:var(--muted);white-space:normal;margin-top:.15rem;}
/* — Fußnoten unter den Tabellen — */
.hp-note{margin:1rem 0 0;font-size:.83rem;color:var(--muted);line-height:1.6;}
/* — Weiterlese-Links in den Tipp-Karten — */
.hp-tiplink{
display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;
font-weight:700;font-size:.93rem;color:var(--brand);
}
.hp-tiplink .bi{transition:transform .25s var(--ease);}
.hp-tiplink:hover{color:var(--green-800);}
.hp-tiplink:hover .bi{transform:translateX(4px);}
/* ============================================================
26 RATGEBER-ARTIKEL „Wann Heizöl kaufen?" — additive Styles
(ratgeber-bester-zeitpunkt-heizoel-kaufen.php)
Wiederverwendbare Klassen: .ztp-hero, .ztp-meta,
.ztp-body, .ztp-toc, .ztp-cta, .ztp-facts,
.ztp-table, .ztp-table-note, .ztp-author
============================================================ */
/* — Artikel-Hero (dunkler hero-heiz-Verlauf, kompakter als Home) — */
.ztp-hero .breadcrumbs{position:relative;z-index:1;padding:1.1rem 0 0;}
.ztp-hero__pad{position:relative;z-index:1;padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(4rem,8vw,6rem);}
.ztp-hero h1{max-width:22ch;}
.ztp-hero__fig{display:flex;justify-content:center;}
.ztp-hero__fig svg{width:min(100%,430px);height:auto;filter:drop-shadow(0 26px 50px rgba(8,22,13,.45));}
@media (max-width:991.98px){
.ztp-hero__fig{display:none;} /* rein dekorativ — mobil zugunsten des Inhalts ausgeblendet */
}
/* — Meta-Zeile (Autor · Datum · Lesezeit) im Hero — */
.ztp-meta{
display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
margin-top:1.4rem;font-size:.92rem;color:rgba(255,255,255,.72);
}
.ztp-meta__item{display:inline-flex;align-items:center;gap:.45rem;}
.ztp-meta__item .bi{color:var(--amber-400);}
.ztp-meta__item strong{color:#fff;font-weight:700;}
/* — Artikel-Sektion: etwas kompakterer Einstieg nach dem Hero — */
.ztp-article-section{padding-top:clamp(2.2rem,5vw,3.5rem);}
/* — Sticky-Aside (Inhaltsverzeichnis + Preis-CTA) — */
.ztp-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:1.4rem;}
@media (max-width:991.98px){
.ztp-aside{position:static;}
}
/* — Inhaltsverzeichnis-Karte — */
.ztp-toc{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-md);padding:1.35rem 1.5rem;
}
.ztp-toc__title{
display:flex;align-items:center;gap:.55rem;margin:0 0 .35rem;
font-weight:800;font-size:1.02rem;color:var(--ink-900);
}
.ztp-toc__title .bi{color:var(--green-600);}
.ztp-toc ol{list-style:none;margin:0;padding:0;counter-reset:tocNum;}
.ztp-toc li{counter-increment:tocNum;border-bottom:1px dashed var(--line);}
.ztp-toc li:last-child{border-bottom:0;}
.ztp-toc a{
display:flex;gap:.7rem;align-items:baseline;padding:.6rem .15rem;
color:var(--ink-700);font-weight:600;font-size:.94rem;line-height:1.4;
transition:color .2s var(--ease),transform .2s var(--ease);
}
.ztp-toc a::before{
content:counter(tocNum,decimal-leading-zero);
font-size:.78rem;font-weight:800;color:var(--green-600);
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.ztp-toc a:hover{color:var(--brand);transform:translateX(3px);}
/* — Sidebar-CTA: aktueller Preis + Rechner-Button — */
.ztp-cta{
position:relative;overflow:hidden;background:var(--grad-hero);
border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow-lg);
}
.ztp-cta::after{
content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;
border-radius:50%;background:radial-gradient(circle,var(--amber-glow) 0%,transparent 70%);
pointer-events:none;
}
.ztp-cta__label{
display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .35rem;
font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--green-300);
}
.ztp-cta__price{
margin:0 0 .35rem;font-family:var(--font-display);
font-size:2.05rem;font-weight:800;letter-spacing:-.02em;color:#fff;
font-variant-numeric:tabular-nums;
}
.ztp-cta__price small{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:0;}
.ztp-cta .btn-heiz-amber{margin-top:.6rem;}
.ztp-cta__hint{
display:flex;align-items:flex-start;gap:.45rem;margin:.85rem 0 0;
font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.65);
}
.ztp-cta__hint .bi{color:var(--green-300);margin-top:.1rem;}
.ztp-cta__seal{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);width:100%;}
.ztp-cta .ts-seal__text{color:rgba(255,255,255,.72);}
.ztp-cta .ts-seal__text strong{color:#fff;}
/* — Artikel-Typografie — */
.ztp-body{font-size:1.04rem;line-height:1.78;color:var(--ink-700);}
.ztp-body>p{margin-bottom:1.15rem;}
.ztp-body h2{
font-size:clamp(1.45rem,2.6vw,1.9rem);margin:2.7rem 0 1rem;
scroll-margin-top:112px;
}
.ztp-body h2::after{
content:"";display:block;width:52px;height:4px;border-radius:2px;
background:var(--grad-amber);margin-top:.55rem;
}
.ztp-body h3{font-size:1.18rem;margin:1.8rem 0 .7rem;}
.ztp-body ul:not([class]),.ztp-body ol:not([class]){margin:0 0 1.15rem;padding-left:1.35rem;}
.ztp-body ul:not([class]) li,.ztp-body ol:not([class]) li{margin-bottom:.55rem;}
.ztp-body a:not([class]){
color:var(--green-700);font-weight:700;text-decoration:underline;
text-decoration-color:var(--green-300);text-decoration-thickness:2px;text-underline-offset:3px;
transition:color .2s var(--ease),text-decoration-color .2s var(--ease);
}
.ztp-body a:not([class]):hover{color:var(--green-900);text-decoration-color:var(--green-600);}
.ztp-body .info-note{margin:1.6rem 0;}
.ztp-body .factor-list{margin-bottom:1.3rem;}
.ztp-body .accordion{margin-bottom:.5rem;}
/* — „Das Wichtigste in Kürze"-Box — */
.ztp-facts{
background:linear-gradient(140deg,var(--green-50) 0%,#fff 75%);
border:1px solid var(--green-100);border-left:5px solid var(--green-600);
border-radius:var(--radius);box-shadow:var(--shadow-sm);
padding:clamp(1.3rem,2.5vw,1.8rem);margin-bottom:2.2rem;
}
.ztp-facts__title{
display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;
font-weight:800;font-size:1.05rem;color:var(--green-800);
}
.ztp-facts__title .bi{color:var(--amber-500);font-size:1.2rem;}
.ztp-facts ul{list-style:none;margin:0;padding:0;}
.ztp-facts li{display:flex;gap:.7rem;align-items:flex-start;padding:.38rem 0;font-size:.99rem;line-height:1.6;}
.ztp-facts li .bi{color:var(--green-600);flex-shrink:0;margin-top:.22rem;}
/* — Artikel-Tabellen (scrollen mobil in der eigenen Box) — */
.ztp-table-wrap{
overflow-x:auto;margin:1.5rem 0 .6rem;background:#fff;
border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
}
.ztp-table{width:100%;min-width:560px;border-collapse:collapse;margin:0;font-size:.95rem;}
.ztp-table th{
background:var(--green-800);color:#fff;text-align:left;
padding:.85rem 1rem;font-weight:700;white-space:nowrap;
}
.ztp-table td{padding:.8rem 1rem;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-700);line-height:1.55;}
.ztp-table tbody tr:nth-child(even){background:var(--paper);}
.ztp-table td:first-child{font-weight:700;color:var(--ink-900);white-space:nowrap;}
.ztp-table-note{font-size:.83rem;color:var(--muted);line-height:1.55;margin:0 0 1.5rem;}
/* — Autor-/Redaktions-Zeile — */
.ztp-author{
display:flex;gap:1rem;align-items:flex-start;margin-top:2.6rem;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
padding:1.3rem 1.5rem;
}
.ztp-author__avatar{
width:52px;height:52px;border-radius:50%;flex-shrink:0;
background:var(--grad-brand);color:#fff;font-size:1.35rem;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-sm);
}
.ztp-author strong{display:block;color:var(--ink-900);margin-bottom:.15rem;}
.ztp-author p{margin:0;font-size:.9rem;color:var(--ink-500);line-height:1.6;}
/* ============================================================
24 RATGEBER-ARTIKEL — additive Artikel-Styles (ratgeber-*.php)
============================================================ */
/* — Artikel-Hero (kompakter als Home-Hero) — */
.article-hero__pad{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(3.4rem,7vw,5.2rem);}
.article-hero .lead-heiz{max-width:680px;}
.article-hero__drop{position:absolute;pointer-events:none;}
.article-hero__drop--a{top:18%;right:8%;}
.article-hero__drop--b{bottom:24%;right:22%;}
@media (max-width:991.98px){.article-hero__drop{display:none;}}
/* Meta-Zeile (Autor · Datum · Lesezeit) */
.article-meta{display:flex;flex-wrap:wrap;gap:.55rem .7rem;margin-top:1.5rem;}
.article-meta .chip--dark .bi{color:var(--amber-400);}
/* — Artikel-Layout & Fließtext-Typografie — */
.article-section{padding-top:clamp(2.4rem,5vw,3.4rem);}
.article-body{max-width:760px;font-size:1.05rem;}
.article-body>p{margin-bottom:1.2rem;}
.article-body h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:.25rem 0 1rem;scroll-margin-top:110px;}
.article-body h3{font-size:1.2rem;margin:1.9rem 0 .65rem;}
.article-body p a,.article-body li a{
font-weight:700;text-decoration:underline;
text-decoration-color:var(--green-300);text-decoration-thickness:2px;
text-underline-offset:3px;
}
.article-body p a:hover,.article-body li a:hover{text-decoration-color:var(--green-600);}
/* Kicker-Label über Artikel-H2 (Mini-Eyebrow) */
.article-kicker{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--green-600);margin:clamp(2.6rem,5vw,3.4rem) 0 .35rem;
}
.article-kicker::before{
content:"";width:20px;height:2px;border-radius:2px;
background:var(--grad-amber);flex-shrink:0;
}
/* — „Das Wichtigste in Kürze" — */
.article-summary{
background:linear-gradient(180deg,var(--green-50) 0%,#ffffff 100%);
border:1px solid var(--green-100);border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
padding:clamp(1.4rem,3vw,1.9rem);
margin-bottom:clamp(1.8rem,4vw,2.4rem);
}
.article-summary h2{
display:flex;align-items:center;gap:.6rem;
font-size:1.25rem;margin:0 0 1rem;
}
.article-summary h2 .bi{color:var(--amber-500);font-size:1.3rem;}
.article-summary ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.article-summary li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem;color:var(--ink-700);}
.article-summary li .bi{color:var(--green-600);flex-shrink:0;margin-top:.16rem;}
.article-summary li strong{color:var(--ink-900);}
/* — Inhaltsverzeichnis (Sprungmarken) — */
.article-toc{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.25rem 1.35rem;
}
.article-toc__title{
display:flex;align-items:center;gap:.5rem;
font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--green-700);margin-bottom:.7rem;
}
.article-toc__title .bi{color:var(--amber-500);}
.article-toc ol{list-style:none;margin:0;padding:0;counter-reset:heizToc;}
.article-toc li{counter-increment:heizToc;}
.article-toc a{
display:flex;gap:.7rem;align-items:baseline;
padding:.5rem .45rem;border-radius:8px;
color:var(--ink-700);font-weight:600;font-size:.94rem;line-height:1.4;
transition:background-color .2s var(--ease),color .2s var(--ease);
}
.article-toc a::before{
content:counter(heizToc,decimal-leading-zero);
font-family:var(--font-display);font-weight:800;font-size:.78rem;
color:var(--green-300);flex-shrink:0;
}
.article-toc a:hover{background:var(--green-50);color:var(--green-800);}
.article-toc--inline{margin-bottom:2rem;}
/* — Info-/„Gut zu wissen"-/Tipp-Boxen — */
.info-box{
display:flex;gap:1rem;align-items:flex-start;
padding:1.25rem 1.4rem;border-radius:var(--radius);
border:1px solid;margin:1.7rem 0;
}
.info-box__icon{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;flex-shrink:0;font-size:1.25rem;
border-radius:38% 62% 55% 45%/55% 45% 55% 45%;
background:#fff;box-shadow:var(--shadow-sm);
}
.info-box__title{
display:block;font-family:var(--font-display);font-weight:700;
font-size:1.02rem;color:var(--ink-900);margin-bottom:.3rem;
}
.info-box p{margin:0;font-size:.97rem;color:var(--ink-700);}
.info-box p+p{margin-top:.6rem;}
.info-box--know{background:var(--green-50);border-color:var(--green-100);}
.info-box--know .info-box__icon{color:var(--green-700);}
.info-box--tip{background:#e9f5ee;border-color:#cdeeda;}
.info-box--tip .info-box__icon{color:var(--amber-600);}
/* — Formel-Box (dunkelgrün, zentriert) — */
.formula-box{
position:relative;overflow:hidden;text-align:center;
background:var(--grad-hero);color:#fff;
border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
padding:clamp(1.5rem,3vw,2rem);margin:1.8rem 0;
}
.formula-box::after{
content:"";position:absolute;top:-60px;right:-60px;width:190px;height:190px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(26,156,70,.25) 0%,transparent 70%);
}
.formula-box__label{
font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--green-300);margin-bottom:.7rem;
}
.formula-box__formula{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.02rem,2.2vw,1.32rem);line-height:1.55;
color:#fff;margin:0;
}
.formula-box__formula .op{color:var(--amber-400);font-weight:800;padding:0 .25rem;}
.formula-box__hint{margin:.8rem 0 0;font-size:.85rem;color:rgba(255,255,255,.65);}
/* — Tabelle (scrollt mobil innerhalb des Wrappers) — */
.table-scroll{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);background:#fff;margin:1.6rem 0 .6rem;
}
.table-heiz{width:100%;min-width:560px;border-collapse:collapse;font-size:.97rem;margin:0;}
.table-heiz th{
background:var(--green-800);color:#fff;text-align:left;
padding:.8rem 1.1rem;font-weight:700;font-size:.83rem;
letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.table-heiz td{padding:.85rem 1.1rem;border-top:1px solid var(--line);color:var(--ink-700);vertical-align:top;}
.table-heiz tbody tr:first-child td{border-top:0;}
.table-heiz tbody tr:nth-child(even){background:var(--paper);}
.table-heiz td:first-child{font-weight:700;color:var(--ink-900);}
.table-heiz .tabular{white-space:nowrap;}
.table-heiz__hl td{background:var(--green-50)!important;}
/* Quellen-/Fußnoten-Zeile unter Tabellen */
.article-source{font-size:.83rem;color:var(--muted);margin:0 0 1.6rem;line-height:1.55;}
/* — Maßnahmen-Liste (Icon + Titel + Text als Karten) — */
.article-list{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:1rem;}
.article-list li{
display:flex;gap:1rem;align-items:flex-start;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:1.1rem 1.25rem;
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.article-list li:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.article-list .icon-blob{width:46px;height:46px;font-size:1.2rem;}
.article-list strong{display:block;color:var(--ink-900);font-size:1.02rem;margin-bottom:.2rem;}
.article-list p{margin:0;font-size:.95rem;color:var(--ink-500);}
/* — Verbrauchs-Schnellrechner — */
.mini-calc{
background:#fff;border:1px solid var(--green-100);border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);overflow:hidden;margin:1.8rem 0;
}
.mini-calc__head{
display:flex;align-items:center;gap:.7rem;
background:var(--grad-brand);color:#fff;padding:1rem 1.4rem;
}
.mini-calc__head .bi{font-size:1.3rem;color:var(--amber-300);}
.mini-calc__head h3{color:#fff;font-size:1.08rem;margin:0;}
.mini-calc__body{padding:1.4rem;}
.mini-calc__result{
display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
background:var(--green-50);border:1px dashed var(--green-300);
border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin-top:1.15rem;
}
.mini-calc__result-label{
font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--green-700);
}
.mini-calc__result-value{
font-family:var(--font-display);font-weight:800;font-size:1.5rem;
color:var(--green-800);font-variant-numeric:tabular-nums;
}
.mini-calc__hint{font-size:.83rem;color:var(--muted);margin:.6rem 0 0;}
.mini-calc__note{font-size:.86rem;color:var(--ink-500);margin:1rem 0 0;line-height:1.55;}
/* — Inline-CTA im Artikel — */
.article-cta-inline{
display:flex;flex-wrap:wrap;align-items:center;
gap:.9rem 1.4rem;margin:2.2rem 0;
}
/* — Autor-/Aktualitäts-Box — */
.article-author{
display:flex;gap:1.1rem;align-items:flex-start;
padding:clamp(1.3rem,2.5vw,1.7rem);
margin-top:clamp(2.4rem,5vw,3.2rem);
}
.article-author__avatar{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:50%;flex-shrink:0;
background:var(--grad-brand);color:#fff;font-size:1.3rem;
}
.article-author strong{
display:block;font-family:var(--font-display);font-size:1.05rem;
color:var(--ink-900);margin-bottom:.3rem;
}
.article-author p{margin:0 0 .5rem;font-size:.93rem;color:var(--ink-500);}
.article-author__date{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;color:var(--muted);
}
.article-author__date .bi{color:var(--green-600);}
/* — Sidebar (sticky ab lg) — */
.article-aside__sticky{display:grid;gap:1.4rem;}
@media (min-width:992px){.article-aside__sticky{position:sticky;top:104px;}}
/* Preis-CTA-Karte (dunkel) */
.article-cta-card{
position:relative;overflow:hidden;border:0;
background:var(--grad-hero);color:rgba(255,255,255,.8);
padding:clamp(1.4rem,2.5vw,1.7rem);
}
.article-cta-card::after{
content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(26,156,70,.28) 0%,transparent 70%);
}
.article-cta-card__label{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--green-300);margin-bottom:.7rem;
}
.article-cta-card__price{
font-family:var(--font-display);font-weight:800;font-size:2.3rem;line-height:1;
color:#fff;margin-bottom:.35rem;font-variant-numeric:tabular-nums;
}
.article-cta-card__price span{font-size:1rem;font-weight:700;color:rgba(255,255,255,.7);}
.article-cta-card__meta{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:1.1rem;}
.article-cta-card .btn-heiz-amber{width:100%;}
.article-cta-card__secure{
list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem;
margin:1rem 0 0;padding:0;font-size:.8rem;color:rgba(255,255,255,.75);
}
.article-cta-card__secure li{display:inline-flex;align-items:center;gap:.35rem;}
.article-cta-card__secure .bi{color:var(--green-300);}
/* Trust-/Kontakt-Karte in der Sidebar */
.article-trust-card{padding:clamp(1.3rem,2.5vw,1.6rem);}
.article-trust-card__text{
margin:1rem 0 0;padding-top:1rem;border-top:1px dashed var(--line);
font-size:.9rem;color:var(--ink-500);line-height:1.6;
}
.article-trust-card__text a{font-weight:700;white-space:nowrap;}
/* — Ergänzungen Ratgeber-Artikel: Intro-Abstand + Sidebar-Notiz — */
.rga-section--first{padding-top:clamp(1.8rem,3.5vw,2.4rem);}
.rga-aside-note{font-size:.88rem;color:var(--muted);margin:.35rem 0 0;line-height:1.55;}
.rga-aside-note .bi{color:var(--green-600);margin-right:.25rem;}
/* ============================================================
26 QUALITÄTS-SEITE (/heizoel-qualitaet) — additive Styles (.qual-)
============================================================ */
/* — Hero: Padding, Aktions-Reihe, Siegel-Artwork — */
.qual-hero__pad{padding:clamp(2.8rem,6vw,5.2rem) 0 clamp(3.2rem,7vw,5.6rem);}
.qual-hero .lead-heiz{max-width:36rem;}
.qual-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1.6rem;}
.qual-art{position:relative;max-width:430px;margin:0 auto;}
.qual-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 52px rgba(8,22,13,.4));}
.qual-ring{
animation:qualSpin 46s linear infinite;
transform-origin:center;transform-box:fill-box;
}
@keyframes qualSpin{to{transform:rotate(360deg);}}
@media (max-width:991.98px){
.qual-art{max-width:320px;margin-top:.25rem;}
}
/* — Norm-Steckbrief (Datenblatt-Optik) — */
.spec-sheet{position:relative;overflow:hidden;padding:clamp(1.5rem,2.8vw,2.1rem);}
.spec-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-brand);}
.spec-sheet__head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.05rem;}
.spec-sheet__head h3{font-size:1.15rem;margin:0 0 .15rem;}
.spec-sheet__head span{display:block;font-size:.83rem;color:var(--muted);font-weight:600;}
.spec-sheet__head em{font-style:normal;color:var(--green-700);}
.spec-sheet dl{margin:0;}
.spec-sheet__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.66rem 0;border-bottom:1px dashed var(--line);}
.spec-sheet__row:last-of-type{border-bottom:0;}
.spec-sheet__row dt{font-size:.9rem;font-weight:600;color:var(--ink-500);margin:0;flex-shrink:0;}
.spec-sheet__row dd{font-size:.93rem;font-weight:800;color:var(--ink-900);margin:0;text-align:right;font-variant-numeric:tabular-nums;}
.spec-sheet__row dd .bi{color:var(--green-600);margin-right:.2rem;}
.spec-sheet__foot{
display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap;
margin-top:1.1rem;padding-top:1.05rem;border-top:1px solid var(--line);
}
.spec-sheet__stamp{
display:inline-flex;align-items:center;gap:.45rem;
padding:.45rem .95rem;border-radius:var(--radius-pill);
border:2px solid var(--green-500);background:var(--green-50);color:var(--green-700);
font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
transform:rotate(-2deg);
}
.spec-sheet__stamp .bi{font-size:.95rem;}
/* — Schwefel-Vergleich (animierte Balken) — */
.sulfur-panel{padding:clamp(1.5rem,2.8vw,2.2rem);}
.sulfur-panel__title{font-size:1.15rem;margin-bottom:1.35rem;}
.sulfur-bar{margin-bottom:1.35rem;}
.sulfur-bar:last-of-type{margin-bottom:0;}
.sulfur-bar__label{
display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
font-size:.9rem;font-weight:600;color:var(--ink-500);margin-bottom:.45rem;
}
.sulfur-bar__label strong{color:var(--ink-900);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sulfur-bar__track{height:16px;border-radius:var(--radius-pill);background:var(--paper-2);border:1px solid var(--line);overflow:hidden;}
.sulfur-bar__fill{display:block;height:100%;border-radius:var(--radius-pill);width:var(--w,100%);transition:width 1.2s var(--ease) .25s;}
.sulfur-bar--old .sulfur-bar__fill{background:linear-gradient(90deg,#b9c2b5,#8a978c);}
.sulfur-bar--new .sulfur-bar__fill{background:var(--grad-brand);min-width:34px;}
/* Balken wachsen erst beim Reveal (mit JS); ohne JS sofort voll da */
.sulfur-note{
display:flex;gap:.5rem;align-items:flex-start;
font-size:.84rem;color:var(--muted);margin:1.1rem 0 0;line-height:1.55;
}
.sulfur-note .bi{color:var(--green-600);flex-shrink:0;margin-top:.1rem;}
/* — Vergleichstabelle Standard vs. Premium — */
.compare-wrap{
overflow-x:auto;background:#fff;
border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
-webkit-overflow-scrolling:touch;
}
.compare-wrap:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow-md);}
.compare-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;margin:0;font-size:.95rem;}
.compare-table th,.compare-table td{padding:.95rem 1.2rem;vertical-align:top;border-bottom:1px dashed var(--line);}
.compare-table thead th{
border-bottom:1px solid var(--line);background:var(--paper);
font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-900);
white-space:nowrap;
}
.compare-table .compare-table__feature{width:24%;}
.compare-table tbody th[scope="row"]{
font-size:.88rem;font-weight:700;color:var(--ink-700);background:var(--paper);
}
.compare-table tbody th[scope="row"] small{display:block;font-size:.76rem;font-weight:500;color:var(--muted);margin-top:.2rem;line-height:1.4;}
.compare-table td{color:var(--ink-500);line-height:1.55;}
.compare-table td strong{color:var(--ink-900);}
/* Premium-Spalte dezent hervorheben */
.compare-table th:last-child,.compare-table td:last-child{background:#fdf8ec;}
.compare-table thead th:last-child{box-shadow:inset 0 3px 0 var(--amber-400);}
.compare-table__flag{
display:inline-block;margin-left:.45rem;padding:.22rem .65rem;vertical-align:middle;
border-radius:var(--radius-pill);background-image:var(--grad-amber);color:var(--green-950);
font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.compare-table tfoot td{border-bottom:0;background:var(--paper);padding:1.1rem 1.2rem;}
.compare-table tfoot td:last-child{background:#fdf8ec;}
.ct-yes{display:inline-flex;align-items:flex-start;gap:.45rem;font-weight:700;color:var(--green-700);}
.ct-yes .bi{color:var(--green-600);flex-shrink:0;margin-top:.12rem;}
.ct-yes .bi-plus-circle-fill{color:var(--amber-500);}
.ct-no{display:inline-flex;align-items:flex-start;gap:.45rem;font-weight:600;color:var(--muted);}
.ct-no .bi{flex-shrink:0;margin-top:.12rem;}
.ct-price strong{
display:block;font-family:var(--font-display);font-weight:800;font-size:1.45rem;line-height:1.15;
color:var(--green-800);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.ct-price span{font-size:.82rem;color:var(--muted);font-weight:600;}
/* — Eignungs-Panels („Premium sinnvoll wenn …") — */
.fit-card{display:flex;flex-direction:column;height:100%;padding:clamp(1.5rem,2.8vw,2rem);}
.fit-card--premium{border:2px solid var(--amber-400);box-shadow:var(--shadow-amber);}
.fit-card__head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;}
.fit-card__head h3{font-size:1.18rem;margin:0;}
.fit-card .check-list{margin-bottom:0;}
.fit-card .check-list .bi-plus-circle-fill{color:var(--amber-500);}
.fit-card>[class*="btn-"]{margin-top:auto;}
/* Reduced Motion: Ring steht, Balken sofort voll */
@media (prefers-reduced-motion:reduce){
.qual-ring{animation:none!important;}
.sulfur-bar--new .sulfur-bar__fill{min-width:34px;}
}
/* ============================================================
FAQ-SEITE (/faq) — additive Detail-Styles (faq.php)
============================================================ */
/* — Hero: zentrierte Komposition mit Suche + Sprungmarken — */
.faq-hero__pad{padding:clamp(2.8rem,6vw,4.8rem) 0 clamp(3.4rem,7vw,5.6rem);text-align:center;}
.faq-hero__inner{max-width:820px;margin:0 auto;}
.faq-hero .lead-heiz{max-width:44rem;margin-left:auto;margin-right:auto;}
.faq-hero .hero-trustline{justify-content:center;margin-top:1.7rem;}
/* Live-Suche (Pill-Feld auf dunklem Hero) */
.faq-search{max-width:640px;margin:1.9rem auto 0;}
.faq-search__field{position:relative;}
.faq-search__field>.bi{
position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);
color:var(--green-600);font-size:1.15rem;pointer-events:none;z-index:1;
}
.faq-search .form-control{
padding:.95rem 1.3rem .95rem 3rem;border-radius:var(--radius-pill);
border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-lg);
font-size:1.02rem;
}
.faq-search__count{
margin:.6rem 0 0;font-size:.86rem;font-weight:600;
color:rgba(255,255,255,.75);min-height:1.3em;
}
/* Kategorie-Sprungmarken (Pills im Hero) */
.faq-jumps{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .6rem;margin-top:1.4rem;}
a.faq-jump{
display:inline-flex;align-items:center;gap:.5rem;
padding:.5rem 1.05rem;border-radius:var(--radius-pill);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
color:rgba(255,255,255,.88);font-weight:600;font-size:.9rem;
transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
a.faq-jump .bi{color:var(--green-300);font-size:1rem;}
a.faq-jump:hover{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(26,156,70,.55);transform:translateY(-2px);}
.faq-jump__count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 .4rem;border-radius:var(--radius-pill);
background:rgba(26,156,70,.18);color:var(--amber-300);
font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;
}
/* — Sidebar: Kategorie-Navigation + Hilfe-Karte (sticky auf Desktop) — */
.faq-sidebar{position:sticky;top:104px;display:flex;flex-direction:column;gap:1.25rem;}
@media (max-width:991.98px){.faq-sidebar{position:static;}}
.faq-nav{padding:1.2rem 1.05rem;}
.faq-nav__title{
font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--green-700);margin:0 0 .65rem .55rem;
}
.faq-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;}
.faq-nav a{
display:flex;align-items:center;gap:.65rem;
padding:.6rem .8rem;border-radius:var(--radius-sm);
color:var(--ink-700);font-weight:700;font-size:.95rem;
transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.faq-nav a .bi{color:var(--green-600);font-size:1.05rem;flex-shrink:0;}
.faq-nav a:hover{background:var(--green-50);color:var(--green-800);}
.faq-nav a.is-active{background:var(--green-50);color:var(--green-800);box-shadow:inset 3px 0 0 var(--green-600);}
.faq-nav__count{
margin-left:auto;min-width:24px;height:24px;padding:0 .45rem;
display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--radius-pill);background:var(--paper-2);border:1px solid var(--line);
color:var(--ink-500);font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums;
}
/* Hilfe-Karte („Ihre Frage ist nicht dabei?") */
.faq-help{padding:clamp(1.4rem,2.5vw,1.8rem);}
.faq-help .icon-blob{margin-bottom:1rem;}
.faq-help h2{font-size:1.15rem;margin-bottom:.45rem;}
.faq-help p{font-size:.93rem;color:var(--ink-500);}
.faq-help .btn-heiz,.faq-help .btn-ghost{width:100%;margin-top:.6rem;}
.faq-help__link{
display:inline-flex;align-items:center;gap:.35rem;
margin-top:.85rem;font-weight:700;font-size:.9rem;
}
.faq-help__hours{
display:flex;align-items:center;justify-content:center;gap:.5rem;
margin:1rem 0 0;font-size:.84rem;color:var(--muted);
}
.faq-help__hours .bi{color:var(--green-600);}
.faq-sidebar__seal{justify-content:center;}
/* — Kategorien-Gruppen & Premium-Akkordeon — */
.faq-group{margin-bottom:clamp(2.4rem,4.5vw,3.4rem);scroll-margin-top:110px;}
.faq-group:last-of-type{margin-bottom:0;}
.faq-group__head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.15rem;}
.faq-group__head .icon-blob{width:48px;height:48px;font-size:1.25rem;}
.faq-group__head h2{font-size:clamp(1.3rem,2.3vw,1.6rem);margin:0;}
.faq-group__count{margin-left:auto;white-space:nowrap;}
.faq-accordion{--bs-accordion-bg:transparent;}
.faq-accordion .accordion-item{
background:#fff;border:1px solid var(--line);
border-radius:var(--radius-sm)!important;overflow:hidden;
box-shadow:var(--shadow-sm);margin-bottom:.8rem;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq-accordion .accordion-item:last-child{margin-bottom:0;}
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
border-color:var(--green-300);box-shadow:var(--shadow-md);
}
.faq-accordion .accordion-button{
padding:1.02rem 1.25rem;font-size:1.02rem;line-height:1.4;
background:transparent;gap:.75rem;
}
.faq-accordion .accordion-button:not(.collapsed){background:var(--green-50);box-shadow:none;}
.faq-accordion .accordion-body{
padding:1.05rem 1.3rem 1.25rem;font-size:.97rem;line-height:1.7;color:var(--ink-700);
}
.faq-accordion .accordion-body ul,.faq-accordion .accordion-body ol{padding-left:1.25rem;margin-bottom:.75rem;}
.faq-accordion .accordion-body li{margin-bottom:.35rem;}
.faq-accordion .accordion-body li:last-child{margin-bottom:0;}
.faq-accordion .accordion-body>:last-child{margin-bottom:0;}
/* — „Keine Treffer"-Hinweis der Live-Suche — */
.faq-noresults{
text-align:center;padding:clamp(2rem,4vw,3rem) 1.5rem;
background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--radius);
}
.faq-noresults .bi{font-size:2.2rem;color:var(--green-600);display:block;margin-bottom:.8rem;}
.faq-noresults__title{
font-family:var(--font-display);font-weight:700;font-size:1.15rem;
color:var(--ink-900);margin-bottom:.4rem;
}
.faq-noresults p{font-size:.95rem;color:var(--ink-500);margin-bottom:0;}
/* ============================================================
25 RATGEBER-ARTIKEL — gemeinsame Artikel-Komponenten
(ratgeber-*.php — rein additiv)
============================================================ */
/* — kompakter Artikel-Hero — */
.art-hero__pad{padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(3.6rem,7vw,5.6rem);}
/* Autor-/Datum-/Lesezeit-Zeile */
.art-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .65rem;
margin-top:1.35rem;
}
.art-meta__item{
display:inline-flex;align-items:center;gap:.45rem;
padding:.4rem .85rem;border-radius:var(--radius-pill);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
color:rgba(255,255,255,.85);font-size:.84rem;font-weight:600;
}
.art-meta__item .bi{color:var(--green-300);font-size:.95rem;}
/* dekoratives Hero-Visual (Inline-SVG) */
.art-hero-visual{max-width:520px;margin:0 auto;}
.art-hero-visual svg{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 48px rgba(8,22,13,.35));}
@media (max-width:991.98px){.art-hero-visual{max-width:420px;}}
/* — „Das Wichtigste in Kürze" — */
.art-summary{
background:var(--card);border:1px solid var(--green-100);
border-left:5px solid var(--green-600);
border-radius:var(--radius);box-shadow:var(--shadow-md);
padding:clamp(1.4rem,3vw,2rem);
}
.art-summary__title{
display:flex;align-items:center;gap:.6rem;
font-size:1.08rem;margin-bottom:1rem;color:var(--ink-900);
}
.art-summary__title .bi{color:var(--amber-500);font-size:1.25rem;}
.art-summary .check-list{margin-bottom:0;}
.art-summary .check-list li{font-weight:500;font-size:.97rem;line-height:1.6;}
/* — Sidebar (Sticky: Inhaltsverzeichnis + CTA-Karte) — */
.art-sidebar{position:sticky;top:96px;display:grid;gap:1.25rem;}
@media (max-width:991.98px){.art-sidebar{position:static;}}
/* — Artikel-Fließtext — */
.art-body{max-width:760px;}
.art-section{scroll-margin-top:110px;}
.art-section+.art-section{margin-top:clamp(2.4rem,5vw,3.4rem);}
.art-section h2{
font-size:clamp(1.45rem,2.6vw,1.85rem);
margin-bottom:1rem;letter-spacing:-.01em;
}
.art-section h3{font-size:1.12rem;margin:1.6rem 0 .6rem;color:var(--ink-900);}
.art-body p{color:var(--ink-700);font-size:1.02rem;line-height:1.8;}
.art-body ul:not(.check-list){color:var(--ink-700);font-size:1rem;line-height:1.75;padding-left:1.25rem;}
.art-body ul:not(.check-list) li{margin-bottom:.5rem;}
.art-body a:not([class]){color:var(--green-700);font-weight:700;}
.art-body a:not([class]):hover{color:var(--green-800);text-decoration:underline;}
.art-body .info-note{margin:1.4rem 0;}
.art-body .info-note p{font-size:.95rem;margin:0;}
/* — Tabelle im Artikel (mit Scroll-Schutz auf Mobile) — */
.art-table-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:var(--radius-sm);
box-shadow:var(--shadow-sm);margin:1.4rem 0;
}
.art-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px;background:#fff;}
.art-table th{
background:var(--green-800);color:#fff;text-align:left;
font-weight:700;padding:.85rem 1.05rem;white-space:nowrap;
}
.art-table td{
padding:.85rem 1.05rem;border-top:1px solid var(--line);
color:var(--ink-700);vertical-align:top;line-height:1.6;
}
.art-table tbody tr:nth-child(even){background:var(--paper);}
.art-table td strong{color:var(--ink-900);}
.art-table__hint{font-size:.83rem;color:var(--muted);margin:.6rem 0 0;line-height:1.55;}
/* — nummerierte Ablauf-Schritte — */
.art-steps{list-style:none;margin:1.4rem 0;padding:0;counter-reset:artstep;display:grid;gap:.9rem;}
.art-steps li{
counter-increment:artstep;position:relative;
background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
box-shadow:var(--shadow-sm);padding:1.05rem 1.2rem 1.05rem 4rem;
}
.art-steps li::before{
content:counter(artstep,decimal-leading-zero);
position:absolute;left:1.1rem;top:1.05rem;
width:2rem;height:2rem;border-radius:50%;
background:var(--green-50);color:var(--green-700);
border:1px solid var(--green-100);
display:flex;align-items:center;justify-content:center;
font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.art-steps li strong{display:block;color:var(--ink-900);margin-bottom:.15rem;}
.art-steps li p{font-size:.93rem;margin:0;line-height:1.65;}
/* — Inline-CTA-Zeile im Artikel — */
.art-inline-cta{
display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
margin:1.6rem 0 0;
}
/* === QA-FIX 2026-07-07: horizontalen Phantom-Overflow (reveal translateX + Bootstrap-Gutter) auf Mobile kappen. overflow:clip erhaelt position:sticky (kein Scroll-Container). === */
html{overflow-x:clip;}
/* 20260827 Redesign: gerade Sektionskanten statt Wellen */
.wave-div{display:none!important;}
@media (min-width:992px){.main-header .navbar-toggler{display:none!important;}}
/* 20260827 Redesign: echtes Lieferfoto statt SVG-Illustration */
.delivery-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.delivery-photo img{display:block;width:100%;height:auto;}
/* Hero-Bild: Truck sitzt unten mittig — mobil tiefer ausrichten */
@media (max-width:991.98px){
.hero-home .hero-bg img{object-position:center 78%;}
}
/* 20260827 Sol-Audit: Abschluss-Hinweis + mobile Checkout-Kompaktheit */
.wz-contract-note{margin:1rem 0 0;font-size:.85rem;color:var(--ink-500);display:flex;gap:.5rem;align-items:flex-start;line-height:1.5;}
.wz-contract-note .bi{color:var(--green-600);margin-top:.1rem;}
.sum-row--muted{font-size:.82rem;color:var(--ink-500);}
/* Preisrechner mobil: Rechner vor die lange Copy */
@media (max-width:991.98px){
.calc-hero .row{display:flex;flex-direction:column;}
.calc-hero .row > .col-lg-6:last-child{order:-1;}
.calc-hero h1{font-size:clamp(1.55rem,6.6vw,2rem);}
}
/* 20260827 Sol-Audit: Wizard-Navigation mobil — kein Overflow, volle Breite */
@media (max-width:991.98px){
.wz-nav{flex-direction:column-reverse;align-items:stretch;gap:.6rem;}
.wz-nav #nextBtn{margin-left:0;width:100%;white-space:normal;}
.wz-nav #prevBtn{width:100%;}
.wz-nav ~ * {min-width:0;}
}
/* Ralph R1: Hero-USP-Liste */
.hero-usps{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.hero-usps li{display:flex;align-items:flex-start;gap:.6rem;color:rgba(255,255,255,.93);font-size:1.04rem;line-height:1.45;text-shadow:0 1px 8px rgba(0,0,0,.45);}
.hero-usps .bi{color:var(--green-300);font-size:1.05rem;margin-top:.12rem;flex-shrink:0;}
.hero-usps strong{color:#fff;}
@media (max-width:991.98px){.hero-usps li{font-size:.96rem;}}
/* Ralph R1: ruhiger Hero + Tankwagen-Bildband */
.hero-home{background:var(--grad-hero);}
.truck-band img{width:100%;height:auto;display:block;}
@media (min-width:992px){.truck-band img{max-height:62vh;object-fit:cover;object-position:center 65%;}}
/* Ralph R1: Team-Karten */
.team-card{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-md);}
.team-card img{width:100%;height:auto;display:block;background:#e9f1ec;}
.team-card figcaption{padding:1rem 1.25rem;font-size:.95rem;color:var(--ink-500);line-height:1.5;}
.team-card figcaption strong{color:var(--ink-900);}
/* Ralph R1b: Audit-Fixes */
.hero-usps li{display:flex;gap:.6rem;}
.hero-usps li span{display:inline;min-width:0;}
/* 4-Schritte: fragmentierte Strich-Verbinder aus */
.step-card::before,.step-card::after,.steps-grid .step-card__num::after{display:none!important;}
.steps-grid{--steps-connector:none;}
/* FAQ-Chevron nicht ueber Text */
.accordion-button{padding-right:2.6rem;}
.accordion-button::after{flex-shrink:0;margin-left:auto;}
/* Mobile: kompaktere Karten + Sticky-CTA */
@media (max-width:991.98px){
.section{padding-top:2.6rem;padding-bottom:2.6rem;}
.card-heiz,.usp-card,.step-card,.know-card,.review-card,.guarantee-card{padding:1.15rem 1.15rem;}
.icon-blob{width:44px;height:44px;font-size:1.15rem;}
.section-head{margin-bottom:1.4rem;}
.mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:1050;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(13,40,24,.12);
transform:translateY(110%);transition:transform .3s var(--ease);}
.mobile-cta-bar.is-visible{transform:none;}
.mobile-cta-bar .btn-heiz-amber{width:100%;}
}
@media (min-width:992px){.mobile-cta-bar{display:none;}}
/* Ralph R1c: Sol-Fixes — Mobile-Fold + Lesbarkeit 45+ */
@media (max-width:991.98px){
.hero-home h1{font-size:clamp(1.45rem,6vw,1.9rem);margin-bottom:.7rem;}
.hero-home .eyebrow{font-size:.7rem;margin-bottom:.5rem;}
.hero-usps{gap:.4rem;margin-bottom:.75rem;}
.hero-usps li{font-size:.9rem;line-height:1.35;}
.hero-home__pad{padding-top:1.1rem;padding-bottom:1.4rem;}
}
.usp-card p,.guarantee-card p,.know-card p{font-size:.97rem;color:var(--ink-700);}
.guarantee-card p{color:rgba(255,255,255,.9);}
.blog-card__media--photo{padding:0;overflow:hidden;}
.blog-card__media--photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* Ralph R2: Sol-Fixes */
.btn-ghost--blue{color:#1D4ED8;box-shadow:inset 0 0 0 2px #1D4ED8;}
.btn-ghost--blue:hover,.btn-ghost--blue:focus{color:#fff;background:#1D4ED8;box-shadow:inset 0 0 0 2px #1D4ED8;}
.section--dark .section-cta__hint{color:rgba(255,255,255,.8);font-size:.92rem;}
.section--dark .section-cta__hint a{color:#fff;}
@media (max-width:991.98px){
.hero-home .eyebrow{display:none;}
}
/* Ralph R3: Schnellwahl-Chips in einer Reihe (390px) */
@media (max-width:991.98px){
.liter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;}
.liter-chips__label{flex-basis:100%;}
.liter-chip{padding:.35rem .7rem;font-size:.86rem;}
}
/* Ralph Hero-R1: Grid-Layout, Scrim, Typo 45+ */
.hero-grid{display:grid;grid-template-columns:1fr;gap:1rem;position:relative;z-index:1;}
@media (min-width:992px){
.hero-grid{grid-template-columns:minmax(0,1fr) 440px;column-gap:3.5rem;align-items:start;}
.hero-grid__head{grid-column:1;grid-row:1;}
.hero-grid__usps{grid-column:1;grid-row:2;}
.hero-grid__card{grid-column:2;grid-row:1 / span 2;}
.hero-home h1{font-size:clamp(2.3rem,3.6vw,2.9rem);line-height:1.12;}
.hero-usps li{font-size:1.1rem;}
}
/* Neutraler, kraeftiger Text-Scrim links (entgruent) */
.hero-home .hero-bg::after{
background:
linear-gradient(90deg,rgba(10,12,10,.9) 0%,rgba(10,14,11,.78) 30%,rgba(10,14,11,.45) 52%,rgba(10,14,11,.08) 74%,rgba(10,14,11,.15) 100%),
linear-gradient(180deg,rgba(10,12,10,.35) 0%,rgba(10,12,10,0) 45%,rgba(10,12,10,.15) 100%)!important;
}
.hero-usps li{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);}
.hero-home h1{text-shadow:0 1px 4px rgba(0,0,0,.6);}
.hero-home .eyebrow{color:#a7f0c4;font-size:.84rem;font-weight:800;}
/* Karte: kompakter, Secure-Liste linksbuendig 14px */
.calc-secure--list{flex-direction:column;align-items:flex-start;gap:.45rem;font-size:.88rem;color:var(--ink-700);}
.calc-secure--list li{gap:.5rem;}
.calc-card .form-control::placeholder{color:#6f7d74;}
.calc-card .form-control{border-color:#cfd6d0;}
/* Trust-Balken einheitlich */
.hero-usp-bar__list{font-size:.9rem;font-weight:600;}
.hero-usp-bar__list li,.hero-usp-bar__list a{color:#fff;}
.hero-usp-bar__ts .bi{font-size:1.05rem;color:var(--green-300,#86efac);}
/* Mobile: H1 -> Karte -> USPs; LKW-Streifen unten */
@media (max-width:991.98px){
.hero-home .hero-bg img{object-position:center 72%;}
.hero-home .eyebrow{display:none;}
.hero-home h1{font-size:clamp(1.7rem,7.6vw,2.05rem);margin-bottom:.9rem;}
.hero-usps li{font-size:1rem;}
.hero-grid{gap:.9rem;}
.hero-phone-line{margin-top:.5rem;}
}
/* Ralph Hero-R2: Mobile-Streifen heller (Desktop-Scrim nicht anwenden) */
@media (max-width:991.98px){
.hero-home .hero-bg::after{
background:linear-gradient(180deg,rgba(10,14,11,.5) 0%,rgba(10,14,11,.08) 30%,rgba(10,14,11,0) 60%,rgba(10,14,11,.12) 100%)!important;
}
}
/* Ralph Hero-R3: Feinschliff nach Re-Audit */
.hero-grid{grid-template-rows:auto 1fr;}
.hero-grid__usps{align-self:start;}
.calc-secure--list{text-align:left;justify-content:flex-start;}
.calc-secure--list li{align-items:flex-start;text-align:left;}
.calc-secure--list li .bi{margin-top:.15rem;}
.calc-card .form-control::placeholder{color:#5b6b62;opacity:1;}
@media (max-width:991.98px){
.hero-usp-bar__list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;justify-items:start;font-size:.84rem;padding:.75rem 0;}
.hero-usp-bar__list li{white-space:normal;text-align:left;}
}
/* Ralph Hero-R4: breite Screens — LKW bleibt im Ausschnitt (Barry-Befund: nur Häuser sichtbar) */
/* Ralph Hero-R5: Foto als festes Band im Hero (27-Zoll-Fix) — kein Crop-Roulette mehr */
.hero-home .hero-truckband{line-height:0;margin-top:.5rem;}
.hero-home .hero-truckband img{width:100%;height:clamp(280px,24vw,430px);object-fit:cover;object-position:left 68%;display:block;}
@media (min-width:1600px){
.hero-home{min-height:0;display:block;}
}
@media (max-width:991.98px){
.hero-home{padding-bottom:0;}
.hero-home .hero-truckband img{height:240px;object-position:left 66%;}
}
/* Ralph Hero-R6: Fold-Garantie auf Laptop-Hoehen (Sonnet-Befund 1366x768 etc.) */
.hero-home .hero-truckband img{height:clamp(190px,calc(100svh - 590px),430px);}
@media (min-width:992px) and (max-height:900px){
.hero-home__pad{padding-top:1rem;padding-bottom:.9rem;}
.hero-home h1{font-size:clamp(1.9rem,2.9vw,2.3rem);margin-bottom:.5rem;}
.hero-home .eyebrow{margin-bottom:.4rem;}
.hero-usps{gap:.35rem;}
.hero-usps li{font-size:.98rem;}
.hero-home .calc-card{padding:1rem 1.25rem .9rem;}
.hero-home .calc-card .form-control{padding-top:.5rem;padding-bottom:.5rem;font-size:.98rem;}
.hero-home .calc-card .mb-3{margin-bottom:.55rem!important;}
.calc-card__sub{margin-bottom:.6rem;font-size:.85rem;}
.calc-secure--list{gap:.3rem;font-size:.82rem;margin-top:.6rem;}
.liter-chips{margin-top:.4rem!important;}
.hero-home .calc-card .btn-heiz-amber{padding:.7rem 1.5rem;font-size:1rem;}
}
@media (max-width:991.98px){
.hero-home .hero-truckband img{height:240px;}
}
/* Ralph Hero-R7: Opus-Finalpunkte */
.hero-home h1{text-wrap:balance;}
.header-cta .btn-heiz-amber{box-shadow:0 3px 10px rgba(29,78,216,.22);}
.header-cta .btn-heiz-amber:hover,.header-cta .btn-heiz-amber:focus{box-shadow:0 5px 14px rgba(29,78,216,.3);}
/* Ralph Hero-R8: LKW IM Hero (linke Spalte, alpha-eingeblendet, nie gecroppt) */
.hero-grid__truck{line-height:0;}
.hero-grid__truck img{display:block;width:100%;height:auto;}
@media (min-width:992px){
.hero-grid{grid-template-rows:auto auto 1fr;}
.hero-grid__head{grid-column:1;grid-row:1;}
.hero-grid__usps{grid-column:1;grid-row:2;}
.hero-grid__card{grid-column:2;grid-row:1 / span 3;}
.hero-grid__truck{grid-column:1;grid-row:3;align-self:end;
margin:-14px 0 -6px -28px;width:min(100%, 680px);}
.hero-home__pad{padding-bottom:0;}
}
@media (max-width:991.98px){
.hero-grid__truck{margin:0 -20px -1px;}
.hero-grid__truck img{width:100%;}
}
/* Band-Regeln obsolet */
.hero-home .hero-truckband{display:none;}
/* Ralph Hero-R9: Team+LKW als Full-Width-Hero-Band (Barry) */
.hero-grid__truck{display:none;}
.hero-teamband{line-height:0;margin-top:.75rem;}
.hero-teamband img{width:100%;height:clamp(220px,calc(100svh - 580px),470px);object-fit:cover;object-position:left 58%;display:block;}
@media (max-width:991.98px){
.hero-teamband img{height:auto;object-fit:fill;object-position:center;}
}
/* Ralph Hero-R10: Titelbild-Hero + Rechner-Leiste darunter (Barry-Layout) */
.hero-home{position:relative;overflow:hidden;min-height:clamp(520px,calc(100svh - 320px),680px);display:flex;flex-direction:column;}
.hero-home .hero-usp-bar{margin-top:auto;}
.hero-titelbild{position:absolute;inset:0;pointer-events:none;}
.hero-titelbild img{position:absolute;left:0;bottom:44px;height:calc(100% - 44px);width:auto;display:block;}
.hero-home::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,14,10,.78) 0%,rgba(8,14,10,.45) 30%,rgba(8,14,10,.05) 55%);}
.hero-home .container{position:relative;z-index:2;}
.hero-title-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem 3rem;align-items:start;padding-top:.5rem;}
.hero-title-usps{padding-top:.4rem;}
.hero-title-usps .hero-usps{background:rgba(8,18,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:.9rem 1.1rem;}
.hero-teamband{display:none;}
@media (min-width:992px){
.hero-home h1{font-size:clamp(2.1rem,3.2vw,2.7rem);}
}
@media (max-width:991.98px){
.hero-home{min-height:0;display:block;}
.hero-titelbild{position:relative;inset:auto;margin-top:.75rem;}
.hero-titelbild img{position:relative;height:auto;width:100%;}
.hero-home::after{display:none;}
.hero-title-grid{display:block;}
.hero-title-usps{padding-top:.4rem;}
}
/* Rechner-Leiste */
.calc-strip-section{padding:0;}
.calc-strip{max-width:none;margin:-46px 0 0;position:relative;z-index:3;padding:1.3rem 1.6rem 1.1rem;
background:rgba(255,255,255,.98);border:1px solid rgba(13,40,24,.08);box-shadow:0 18px 50px rgba(13,40,24,.16);}
.calc-strip__head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;}
.calc-strip__head h2{font-size:1.25rem;margin:0;}
.calc-strip__head p{margin:0;color:var(--ink-500);font-size:.92rem;}
.calc-strip__form{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end;}
.calc-strip__submit .btn-heiz-amber{white-space:nowrap;padding-left:2.2rem;padding-right:2.2rem;}
.calc-strip__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;margin-top:.8rem;}
.calc-strip .calc-secure{margin:0;font-size:.84rem;}
.calc-strip .liter-chips{margin:0;}
@media (max-width:991.98px){
.calc-strip{margin-top:0;border-radius:0 0 var(--radius) var(--radius);padding:1.1rem 1.15rem 1rem;}
.calc-strip__form{grid-template-columns:1fr;gap:.7rem;}
.calc-strip__meta{flex-direction:column;align-items:flex-start;}
}
/* Ralph Hero-R11: H1 ueber Tankkante, Balken raus (redundant, wurde verdeckt) */
.hero-home .hero-usp-bar{display:none;}
@media (min-width:992px){
.hero-home h1{font-size:clamp(1.85rem,2.5vw,2.25rem);line-height:1.15;max-width:34rem;}
.hero-home .eyebrow{margin-bottom:.45rem;}
.hero-title-grid{padding-top:0;}
}
/* Ralph Hero-R12: Barrys finales Layout — Full-Bleed-Bild, Text rechts mittig,
Rechner als Vollbreiten-Sektion ohne Box, Balken darunter */
.hero-titelbild img{position:absolute;inset:0;left:auto;bottom:auto;width:100%;height:100%;object-fit:cover;object-position:left 62%;}
.hero-home{min-height:clamp(540px,calc(100svh - 300px),700px);}
.hero-home::after{background:linear-gradient(270deg,rgba(8,14,10,.88) 0%,rgba(8,14,10,.72) 30%,rgba(8,14,10,.4) 52%,rgba(8,14,10,.08) 68%,rgba(8,14,10,0) 78%)!important;}
.hero-home .hero-home__pad{display:flex;align-items:center;flex:1;width:100%;}
.hero-title-right{margin-left:auto;max-width:37rem;padding:1rem 0;}
.hero-title-right .hero-usps{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;margin-top:1.1rem;}
.hero-title-right h1{max-width:none;}
/* Rechner: keine Box, volle Breite */
.calc-strip-section{padding:2.2rem 0 1.6rem;background:#fff;border-bottom:1px solid var(--line);}
.calc-strip{margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;}
/* Balken-Standalone */
.hero-usp-standalone .hero-usp-bar{box-shadow:none;border-top:0;}
@media (max-width:991.98px){
.hero-home{min-height:0;}
.hero-home .hero-home__pad{display:block;}
.hero-title-right{margin:0;max-width:none;padding:.5rem 0 1rem;}
.hero-usp-standalone .hero-usp-bar__list{padding:.75rem 0;}
}
.hero-title-right .eyebrow{color:#bff5d4;text-shadow:0 1px 4px rgba(0,0,0,.7);}
.hero-title-right .hero-usps li{text-shadow:0 1px 4px rgba(0,0,0,.75);}
.hero-title-right h1{text-shadow:0 2px 8px rgba(0,0,0,.7);}
/* Hero-CTA-Button (R14: 4-Auditoren-Konsens Opus/Fable/Sonnet/Sol — direkte Kauf-Aktion im Hero) */
.hero-actions{margin-top:1.4rem;}
.hero-cta-btn{display:inline-flex;align-items:center;gap:.55rem;}
@media (max-width:991.98px){
.hero-actions{margin-top:1.05rem;margin-bottom:.2rem;}
.hero-cta-btn{display:flex;width:100%;justify-content:center;}
}
/* Ralph Hero-R13: Team-Verify-Fixes */
/* Mobil: Bild wieder sichtbar (relative) + Eyebrow zurueck */
@media (max-width:991.98px){
.hero-home .eyebrow{display:inline-flex;}
.hero-titelbild{position:relative;inset:auto;height:auto;}
.hero-titelbild img{position:relative;inset:auto;width:100%;height:auto;object-fit:fill;object-position:center;}
}
/* Desktop: Textblock mit dezentem Backpanel — Kontrast deterministisch auf allen Breiten */
@media (min-width:992px){
.hero-title-right{background:rgba(7,14,10,.52);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);padding:1.5rem 1.75rem;max-width:40rem;}
.hero-home::after{background:linear-gradient(270deg,rgba(8,14,10,.82) 0%,rgba(8,14,10,.6) 36%,rgba(8,14,10,.28) 58%,rgba(8,14,10,0) 80%)!important;}
}
/* 2560: Schriftzug am Tank nicht oben abschneiden */
.hero-titelbild img{object-position:left 45%;}
/* Rechner-Zeile breiter ziehen */
.calc-strip-section .container{max-width:1400px;}
/* Ralph Hero-R14: schmale Desktops — Panel tiefer, Tank-Schriftzug frei */
@media (min-width:992px) and (max-width:1500px){
.hero-home .hero-home__pad{align-items:flex-end;}
.hero-title-right{margin-bottom:1.25rem;}
}
/* Ralph Hero-R15: Verify-Kosmetik */
.hero-title-right{margin-right:.5rem;}
/* Ralph Hero-R16: Barry — Text links oben auf Kabinenhoehe, Motiv nach rechts
(rechts im Bild war leere Wand); links Fill aus gespiegelt-geblurrter Wand.
Mobil: Overlay-Hero — Bild vollbreit mit ganzem LKW, Text oben drueber. */
@media (min-width:992px){
.hero-bild-fill{position:absolute;inset:0;pointer-events:none;
background-image:url('/assets/images/team-full-1920.webp');
background-size:cover;background-position:left 45%;
transform:scaleX(-1);filter:blur(24px) brightness(.92);}
.hero-titelbild img.hero-bild-haupt{left:27%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%);
mask-image:linear-gradient(90deg,transparent 0,#000 6%);}
.hero-home .hero-home__pad{align-items:flex-start;}
.hero-title-right{margin:1rem auto 1.25rem 0;max-width:36rem;}
.hero-home::after{background:linear-gradient(90deg,rgba(8,14,10,.84) 0%,rgba(8,14,10,.6) 30%,rgba(8,14,10,.28) 52%,rgba(8,14,10,.05) 70%,rgba(8,14,10,0) 82%)!important;}
}
@media (min-width:1500px){
.hero-titelbild img.hero-bild-haupt{left:29%;}
}
@media (min-width:2100px){
.hero-titelbild img.hero-bild-haupt{left:30%;}
}
@media (max-width:991.98px){
.hero-bild-fill{display:none;}
.hero-home{position:relative;}
.hero-titelbild{position:relative;inset:auto;margin-top:0;}
.hero-titelbild img{position:relative;inset:auto;width:100%;height:auto;object-fit:fill;object-position:center;display:block;}
.hero-titelbild::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,14,10,.8) 0%,rgba(8,14,10,.64) 30%,rgba(8,14,10,.24) 48%,rgba(8,14,10,0) 62%);}
.hero-home .hero-home__pad{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:1.15rem;padding-bottom:0;}
.hero-title-right{margin:0;max-width:none;padding:0;}
}
@media (max-width:374.98px){
.hero-home .hero-usps{font-size:.85rem;}
.hero-home h1{font-size:1.45rem;}
}
/* Ralph Hero-R17: Barry — Desktop ohne Glas-Block: nur Text links oben,
Bild wieder full-bleed (kein Blur-Streifen); Lesbarkeit ueber Scrim + Schatten */
@media (min-width:992px){
.hero-bild-fill{display:none;}
.hero-titelbild img.hero-bild-haupt{left:0;-webkit-mask-image:none;mask-image:none;}
.hero-title-right{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;
padding:0;margin:1.4rem auto 1.25rem 0;max-width:38rem;}
.hero-home::after{z-index:1;background:
linear-gradient(180deg,rgba(8,14,10,.5) 0%,rgba(8,14,10,.16) 42%,rgba(8,14,10,0) 62%),
linear-gradient(100deg,rgba(8,14,10,.8) 0%,rgba(8,14,10,.52) 30%,rgba(8,14,10,.24) 52%,rgba(8,14,10,.05) 70%,rgba(8,14,10,0) 80%)!important;}
.hero-title-right .hero-usps li{text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.7);}
.hero-title-right h1{text-shadow:0 2px 10px rgba(0,0,0,.85);}
.hero-title-right .eyebrow{text-shadow:0 1px 5px rgba(0,0,0,.85);}
/* Barry: Text beginnt auf Logo-Flucht (Container-Kante) */
}
/* Verify-Fix (Sonnet): 4. USP-Zeile mobil lag auf hellem Tank — Scrim minimal
tiefer + staerkere Schatten; Layout unveraendert (Barry-Abnahme) */
@media (max-width:991.98px){
.hero-titelbild::after{background:linear-gradient(180deg,rgba(8,14,10,.8) 0%,rgba(8,14,10,.66) 32%,rgba(8,14,10,.34) 52%,rgba(8,14,10,0) 70%);}
.hero-home .hero-usps li{text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.6);}
}
/* Ralph PR-R2: Preisrechner-Seite — Titelbild-Hero (kompakt) + boxlose Rechner-Sektion */
@media (min-width:992px){
.hero-sub.hero-home{min-height:clamp(400px,calc(72svh - 240px),540px);}
}
.hero-sub .hero-breadcrumbs, .hero-home .hero-breadcrumbs{position:relative;z-index:2;}
.hero-heiz .breadcrumbs, .hero-heiz .breadcrumbs a{color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.7);}
.hero-heiz .breadcrumbs a:hover{color:#fff;}
.calc-strip .calc-trust-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
gap:.6rem 1.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);}
.calc-strip .calc-trust-row .pay-icons{display:flex;flex-wrap:wrap;gap:.5rem;}
.liter-chips__label{color:#5d6b62;}
.accordion-button{padding-right:1.1rem;}
.accordion-button::after{flex-shrink:0;margin-left:.85rem;}
.cta-panel .eyebrow{color:#bff5d4;}
/* Ralph Hero-R18 (revidiert): Bild V1c hat das Motiv selbst rechts — Text liegt
auf freier Wand. Vertikal moderat abgesenkt: mehr Wand oben, Fuesse sichtbar. */
@media (min-width:992px){
.hero-titelbild img.hero-bild-haupt{object-position:left 20%;}
}
@media (min-width:2100px){
.hero-titelbild img.hero-bild-haupt{object-position:left 42%;}
}
/* Fill-Layer nutzt dasselbe neue Bild */
@media (min-width:992px){
.hero-bild-fill{background-image:url('/assets/images/team-full-v2c-1920.webp');}
}
/* Barry: Hero-Text fluchtet mit "Heizoelpreis berechnen" darunter (1400er Container) */
@media (min-width:992px){
.hero-home .hero-home__pad{max-width:1400px;}
}
/* Unterseiten-Hero mobil kompakter — mehr Text (Breadcrumb+Eyebrow+H1) muss
ueber dem Motiv enden, nicht auf Schriftzug/Koepfen */
@media (max-width:991.98px){
.hero-sub .breadcrumbs{font-size:.8rem;margin-bottom:.2rem;}
.hero-sub .hero-copy .eyebrow{font-size:.72rem;letter-spacing:.14em;}
.hero-sub h1{font-size:1.5rem;}
.hero-sub .hero-usps{font-size:.88rem;}
.hero-sub .hero-usps li{margin-bottom:.3rem;}
}
/* Ralph PR-R3: R2-Konsens-Fixes (Opus48/Fable/Sonnet/Sol) */
/* Unterseiten-Hero mobil: Scrim tiefer (Bullet 3 lag auf hellem Tank) */
@media (max-width:991.98px){
.hero-sub .hero-titelbild::after{background:linear-gradient(180deg,rgba(8,14,10,.82) 0%,rgba(8,14,10,.7) 34%,rgba(8,14,10,.42) 58%,rgba(8,14,10,0) 78%);}
}
/* Formel mobil kompakt: Listen-Layout statt 3,5 Screens Karten */
@media (max-width:991.98px){
.price-formula__item{display:grid;grid-template-columns:44px 1fr;column-gap:.85rem;align-items:start;text-align:left;padding:.9rem 1rem;}
.price-formula__item .icon-blob{grid-row:1 / span 2;width:44px;height:44px;min-width:44px;font-size:1.05rem;margin:0;}
.price-formula__item h3{grid-column:2;font-size:1rem;margin:.05rem 0 .2rem;}
.price-formula__item p{grid-column:2;font-size:.88rem;margin:0;}
.price-formula__item p br{display:none;}
.price-formula__op{margin:.15rem auto;font-size:1.25rem;line-height:1;}
}
/* Gesamtpreis-Karte: Icon auf Dunkelgruen sichtbar */
.price-formula__item--total .icon-blob{background:rgba(255,255,255,.3);color:#fff;}
/* Platzhalter-Kontrast 45+ */
.form-control::placeholder{color:#68746b;opacity:1;}
/* Chips im Liter-Feld: kompakter Abstand */
.calc-strip__field .liter-chips{margin-top:.55rem;}
/* hero-sub (flacher): Ausschnitt tiefer, damit Team samt Fuessen im Band bleibt */
@media (min-width:992px){
.hero-sub .hero-titelbild img.hero-bild-haupt{object-position:left 40%;}
}
@media (min-width:2100px){
.hero-sub .hero-titelbild img.hero-bild-haupt{object-position:left 44%;}
}
/* btn-ghost mobil: lange Labels duerfen umbrechen statt den Container zu sprengen */
@media (max-width:575.98px){
.btn-ghost{white-space:normal;max-width:100%;text-align:center;}
}
/* PLZ-Leitzonen-Ziffer: weiss, zentriert (war grau/versetzt, kaum lesbar) */
.plz-card__zone{display:flex;align-items:center;justify-content:center;line-height:1;color:#fff;}
/* Vergleichstabelle mobil: beide Sorten ohne horizontales Scrollen sichtbar */
@media (max-width:575.98px){
.compare-table{font-size:.78rem;}
.compare-table th,.compare-table td{padding:.5rem .4rem;min-width:0;}
.compare-table__feature{width:104px;min-width:104px;font-size:.74rem;}
.compare-table__flag{display:block;margin:.15rem 0 0;font-size:.6rem;}
}
/* Icon-Kreise: Inhalt immer zentriert */
.icon-blob{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
/* Vergleichstabelle <=640px: 3 Spalten OHNE horizontales Scrollen (fixe 720px aufgehoben) */
@media (max-width:640px){
.compare-wrap{overflow-x:visible;}
.compare-table{min-width:0 !important;width:100%;table-layout:fixed;font-size:.72rem;}
.compare-table th,.compare-table td{padding:.45rem .3rem;white-space:normal;word-break:normal;hyphens:auto;}
.compare-table__feature{width:31%;}
}
/* Hint-Zeilen: normaler Textfluss statt Flex-Fragmente */
@media (max-width:575.98px){
.section-cta__hint{display:inline-block;}
}
/* Ratgeber-Artikel: Intro-Zeile unter dem Titelbild-Hero */
.rga-intro-strip{padding:1.6rem 0 .4rem;background:#fff;}
.rga-intro-strip .lead-heiz{max-width:56rem;}
/* Artikel-Meta auf dem Titelbild lesbar */
.hero-sub .rga-meta,.hero-sub .art-meta,.hero-sub [class*="-meta"]{color:#e7f5ec;text-shadow:0 1px 4px rgba(0,0,0,.7);}
.hero-sub .rga-meta a,.hero-sub .art-meta a{color:#fff;}
/* Footer: regionale Linklisten (kompakt, mehrspaltig) */
.footer-regionen{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;padding:1.6rem 0 .4rem;border-top:1px solid rgba(255,255,255,.08);}
.footer-regionen__list{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem;}
.footer-regionen__list li{margin-bottom:.35rem;break-inside:avoid;}
.footer-regionen__list a{color:rgba(255,255,255,.72);font-size:.82rem;text-decoration:none;}
.footer-regionen__list a:hover{color:#7be3a0;}
@media (max-width:767.98px){
.footer-regionen{grid-template-columns:1fr;gap:1.2rem;}
.footer-regionen__list{columns:2;}
}
/* Artikel-/FAQ-Sidebars laufen beim Scrollen mit */
@media (min-width:992px){
.rga-sidebar,.art-sidebar,.faq-sidebar,[class*="sidebar"] > .card-heiz:first-child{position:sticky;top:96px;}
}
/* Scrollbare Tabellen mobil: Fade-Kante als Wisch-Hinweis */
@media (max-width:767.98px){
.rga-table-wrap,.compare-wrap{position:relative;}
.rga-table-wrap::after,.compare-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
background:linear-gradient(270deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none;}
}
/* Subscript (CO2) sauber */
sub{line-height:0;font-size:.7em;}
/* Rechner-Leiste: Felder oben ausrichten (Chips im Mengenfeld verschoben sonst die PLZ-Spalte) */
@media (min-width:992px){
.calc-strip__form{align-items:start;}
.calc-strip__submit{padding-top:1.95rem;}
}
/* Preissuch-Overlay (fastenergy-Muster) */
.price-search-overlay{position:fixed;inset:0;z-index:4000;background:#fff;
display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.price-search-box{text-align:center;max-width:26rem;}
.price-search-spinner{width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%;
border:5px solid #e4efe8;border-top-color:#1D4ED8;animation:psSpin .9s linear infinite;}
@keyframes psSpin{to{transform:rotate(360deg);}}
.price-search-title{font-size:1.35rem;font-weight:700;color:#0d2818;margin:0 0 .25rem;}
.price-search-sub{color:#5d6b62;margin:0 0 1.1rem;}
.price-search-checks{list-style:none;margin:0;padding:0;text-align:left;display:inline-block;}
.price-search-checks li{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;
color:#8b978f;opacity:.45;transition:opacity .4s,color .4s;}
.price-search-checks li i{color:#c8d6cd;transition:color .4s;}
.price-search-checks li.is-done{opacity:1;color:#0d2818;}
.price-search-checks li.is-done i{color:#1a9c46;}
/* Bewertungen im Bestellassistenten */
.wz-reviews{margin:1.4rem 0;padding:1rem 1.15rem;background:#f4faf6;border:1px solid #dcebe1;border-radius:12px;}
.wz-reviews__head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;}
.wz-reviews__stars{color:#f5a623;letter-spacing:.1em;}
.wz-review{margin:0 0 .7rem;}
.wz-review:last-child{margin-bottom:0;}
.wz-review blockquote{margin:0 0 .15rem;font-size:.92rem;color:#243b2e;}
.wz-review figcaption{font-size:.8rem;color:#5d6b62;}
.wz-review figcaption span{color:#f5a623;margin-right:.3rem;}
.price-search-hint{font-size:.82rem;color:#8b978f;margin:-.6rem 0 1rem;}
/* Schritt-4-Zusammenfassung mobil: Label/Wert untereinander, keine Wort-Trennung */
@media (max-width:599.98px){
.sum-row{display:block;}
.sum-row span{display:block;font-size:.78rem;color:#6b7a70;margin-bottom:.1rem;}
.sum-row strong{display:block;font-size:1rem;line-height:1.4;word-break:normal;overflow-wrap:anywhere;}
.sum-row{padding:.45rem 0;}
}
/* Regionen: Statistik-Karten + PLZ-Liste */
.region-stat__big{font-size:1.25rem;font-weight:700;color:#0d2818;margin:.2rem 0 .3rem;}
.region-stat__source{max-width:52rem;margin:1.4rem auto 0;text-align:center;font-size:.82rem;color:#6b7a70;}
.region-plz-section{padding:2rem 0 2.4rem;border-top:1px solid var(--line);}
.region-plz__title{font-size:1.15rem;margin-bottom:.3rem;}
.region-plz__sub{color:#5d6b62;font-size:.92rem;margin-bottom:.8rem;}
.region-plz__list{font-size:.82rem;line-height:1.9;color:#6b7a70;letter-spacing:.02em;margin:0;}
/* Kontakt: schlichter oldschool-Kopf statt Hero */
.kontakt-kopf{padding:2.2rem 0 2rem;border-bottom:1px solid var(--line);}
.kontakt-kopf h1{font-size:2rem;margin:.4rem 0 .5rem;}
.kontakt-kopf__lead{max-width:44rem;margin-bottom:1.4rem;}
.kontakt-kopf .glass-card{background:#fff;border:1px solid var(--line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.kt-map-embed iframe{display:block;width:100%;}
/* — R19: Sticky-Submit-Leiste im letzten Wizard-Schritt (mobil) — */
.wz-sticky-submit{
position:fixed;left:0;right:0;
bottom:0;z-index:1076;display:none;
align-items:center;justify-content:space-between;gap:.8rem;
background:#fff;border-top:1px solid var(--line);
box-shadow:0 -8px 30px rgba(13,40,24,.18);
padding:.65rem .95rem calc(.65rem + env(safe-area-inset-bottom,0px));
}
.wz-sticky-submit__total{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.wz-sticky-submit__label{font-size:.78rem;color:var(--ink-600,#556);font-weight:600;}
.wz-sticky-submit__total strong{font-size:1.15rem;color:var(--green-800);}
.wz-sticky-submit .btn-heiz-amber{white-space:nowrap;padding:.7rem 1rem;font-size:.95rem;flex-shrink:0;}
@media (max-width:991.98px){
body.wz-final-step:not(.wz-submit-visible) .wz-sticky-submit{display:flex;}
body.wz-final-step .mobile-cart-toggle{display:none !important;}
body.wz-final-step main{padding-bottom:96px;}
}
.dk-step--done .dk-step__num{background:var(--green-600);color:#fff;border-color:var(--green-600);}
.dk-step--done .dk-step__eta{color:var(--green-700);}
/* — R20: Bestellflow-Feinschliff (Audit R3) — */
.terms-box .form-check-input{width:1.35rem;height:1.35rem;margin-top:.1rem;flex-shrink:0;}
.terms-box .form-check{display:flex;gap:.6rem;align-items:flex-start;}
.terms-box .form-check-label{cursor:pointer;}
@media (max-width:575.98px){
.pm-desc,.wz-review blockquote{font-size:.95rem;}
.wz-review figcaption,.cookie-consent p{font-size:.9rem;}
.sum-row--muted span{font-size:.9rem;}
}
/* Kompakter Kopf ab Schritt 2 (mobil): Intro-Absatz + Pills ausblenden */
@media (max-width:991.98px){
body[data-wzstep="2"] .order-hero .lead-heiz,
body[data-wzstep="3"] .order-hero .lead-heiz,
body[data-wzstep="4"] .order-hero .lead-heiz,
body[data-wzstep="2"] .order-hero__chips,
body[data-wzstep="3"] .order-hero__chips,
body[data-wzstep="4"] .order-hero__chips,
body[data-wzstep="2"] .order-hero__badge,
body[data-wzstep="3"] .order-hero__badge,
body[data-wzstep="4"] .order-hero__badge{display:none;}
body[data-wzstep="2"] .order-hero,
body[data-wzstep="3"] .order-hero,
body[data-wzstep="4"] .order-hero{padding-bottom:1rem;}
}
/* — R22: Sticky-CTA wartet auf AGB-Haken + kompakter Cookie-Banner klein — */
#wzStickySubmitBtn.is-waiting{opacity:.62;}
@media (max-width:400px){
.cookie-consent{padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom,0px));}
.cookie-consent p{font-size:.88rem;line-height:1.4;}
.cookie-consent__actions .btn-heiz--sm{padding:.45rem .7rem;font-size:.85rem;}
}
/* — R23: Terminwahl — */
.wz-options--dates{gap:1rem;}
.delivery-date-day{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:1rem 1.1rem;
}
.delivery-date-day__head{
display:flex;align-items:baseline;gap:.5rem;margin-bottom:.8rem;
}
.delivery-date-day__weekday{font-weight:800;color:var(--ink-900);font-size:1.02rem;}
.delivery-date-day__date{color:var(--ink-500);font-size:.95rem;}
.delivery-date-day__slots{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.delivery-slot-option{position:relative;scroll-margin:120px;}
.ds-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ds-input:focus-visible+.ds-label{outline:3px solid var(--green-500);outline-offset:3px;}
.ds-label{
display:flex;align-items:center;justify-content:space-between;gap:.6rem;
border:2px solid var(--line);border-radius:var(--radius-sm);
padding:.9rem 1rem;cursor:pointer;background:#fff;min-height:64px;
transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.delivery-slot-option:not(.delivery-slot-option--booked):hover .ds-label{border-color:var(--green-300);}
.delivery-slot-option.selected .ds-label,
.delivery-slot-option:has(.ds-input:checked) .ds-label{
border-color:var(--green-600);background:var(--green-50);
}
.ds-body{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.ds-name{font-size:1rem;color:var(--ink-900);font-weight:600;}
.ds-time{font-size:.95rem;color:#4a5a50;}
.ds-tick{
width:26px;height:26px;border-radius:50%;flex-shrink:0;
border:2px solid var(--line);background:#fff;color:transparent;
display:flex;align-items:center;justify-content:center;
transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.ds-tick svg{display:block;}
.delivery-slot-option.selected .ds-tick,
.delivery-slot-option:has(.ds-input:checked) .ds-tick{
background-image:var(--grad-brand);border-color:transparent;color:#fff;
}
.delivery-slot-option--booked .ds-label{cursor:not-allowed;background:#faf7f6;opacity:.85;}
.delivery-slot-option--booked .ds-name,
.delivery-slot-option--booked .ds-time{text-decoration:line-through;color:#6b6b6b;}
.ds-badge{
flex-shrink:0;font-size:.84rem;font-weight:700;color:#fff;
background:#b02a1c;border-radius:var(--radius-pill);padding:.32rem .7rem;
white-space:nowrap;
}
#deliveryDateOptions.is-invalid{
border:2px solid #c0392b;border-radius:var(--radius-sm);padding:.7rem;
}
@media (max-width:575.98px){
.delivery-date-day__slots{grid-template-columns:1fr;}
.ds-label{padding:1rem 1.05rem;}
}
/* R23b: Eyebrow-Kontrast im Bestell-Hero */
.order-hero .eyebrow{color:#8fe0ae;}
/* R24: Legal-Feinschliff */
.legal-contact-card a{overflow-wrap:anywhere;word-break:break-word;}
@media (max-width:480px){
.legal-stand{display:block;}
.legal-stand strong{display:block;margin-bottom:.2rem;}
}
.cookie-consent__actions .btn-ghost{border:2px solid var(--green-600);color:var(--green-700);font-weight:700;}
/* R25: Abnahme-Welle 1 */
.plz-card__zone{display:flex;align-items:center;justify-content:center;color:#fff;}
@media (max-width:991.98px){
.hero-home .hero-titelbild::after{background:linear-gradient(180deg,rgba(8,14,10,.82) 0%,rgba(8,14,10,.7) 34%,rgba(8,14,10,.5) 54%,rgba(8,14,10,.34) 72%,rgba(8,14,10,.12) 90%,rgba(8,14,10,0) 100%);}
}
/* R26: Terminkacheln + Flow-Kopf */
.order-kopf{border-bottom:1px solid var(--line);}
.delivery-date-day__slots{grid-template-columns:repeat(3,1fr);}
.ds-label{min-height:48px;padding:.85rem .6rem;text-align:center;flex-direction:column;justify-content:center;gap:.4rem;}
.ds-body{align-items:center;text-align:center;}
.ds-tick{margin:0 auto;}
.ds-badge{white-space:normal;line-height:1.15;}
@media (max-width:575.98px){
.delivery-date-day__slots{grid-template-columns:repeat(3,1fr);gap:.4rem;}
.ds-label{padding:.6rem .35rem;min-height:48px;}
.ds-name{font-size:.88rem;}
.ds-time{font-size:.78rem;}
.ds-badge{font-size:.7rem;padding:.22rem .4rem;}
}
/* R27: Schlussaudit-Fixes */
#submitOrderBtn{white-space:normal !important;line-height:1.3;max-width:100%;box-sizing:border-box;}
.wz-sticky-submit{display:none;grid-template-columns:minmax(0,auto) minmax(0,1fr);}
@media (max-width:991.98px){
body.wz-final-step:not(.wz-submit-visible) .wz-sticky-submit{display:grid;}
}
.wz-sticky-submit .btn-heiz-amber{max-width:100%;overflow:hidden;}
@media (max-width:430.98px){
.pm-hint{white-space:normal;}
.pm-price{white-space:normal;}
}
@media (max-width:360.98px){
#submitOrderBtn{font-size:.92rem;padding:.75rem .6rem;}
}
/* R28: Weiter-CTA wartet auf Sortenwahl */
#nextBtn.is-waiting{opacity:.6;}
/* R29: Sticky-Submit-Button vollstaendig lesbar */
.wz-sticky-submit{grid-template-columns:auto 1fr;gap:.6rem;}
.wz-sticky-submit__total{min-width:0;}
#wzStickySubmitBtn{white-space:normal;line-height:1.2;min-width:0;max-width:100%;padding:.6rem .8rem;font-size:.9rem;}
@media (max-width:360.98px){
#wzStickySubmitBtn{font-size:.82rem;padding:.55rem .6rem;}
#wzStickySubmitBtn .bi{display:none;}
}
/* R30: Termin-Blaetterbuttons */
.dd-nav{
display:flex;align-items:center;justify-content:center;gap:.5rem;
width:100%;margin:.4rem 0;padding:.7rem 1rem;
background:#fff;border:2px solid var(--green-200,#bfe6cd);border-radius:var(--radius-sm);
color:var(--green-700);font-weight:700;font-size:.95rem;cursor:pointer;
transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.dd-nav:hover{background:var(--green-50,#eefbf1);border-color:var(--green-400,#63c186);}
.dd-nav--earlier{margin-bottom:.8rem;}
.dd-nav--later{margin-top:.8rem;}
/* R31: Bestelluebersicht Netto/MwSt lesbarer + 100L-Label */
.breakdown__row--muted,.sum-row--muted{color:#4a5a50 !important;font-size:.9rem;}
.breakdown__row--muted span,.sum-row--muted span{color:#4a5a50 !important;}
/* ============================================================
Schritt 1 – Sortenauswahl im Angebots-Layout (15.09.2026)
============================================================ */
.ps-summary{
display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:.85rem 1.1rem;margin-bottom:1rem;font-size:1.02rem;color:var(--ink-700);box-shadow:var(--shadow-sm);
}
.ps-summary__item strong{color:var(--ink-900);font-weight:800;}
.ps-summary__dot{color:var(--muted);}
.ps-summary__edit{margin-left:auto;font-weight:700;color:var(--blue-600);text-decoration:none;}
.ps-summary__edit:hover{text-decoration:underline;}
.ps-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.ps-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border-bottom:1px solid var(--line);}
.ps-tab{
appearance:none;border:0;background:transparent;padding:.95rem .75rem;
font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--muted);
border-bottom:3px solid transparent;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.ps-tab small{font-weight:500;font-size:.85rem;color:var(--muted);}
.ps-tab .bi{color:var(--green-500);margin-right:.2rem;}
.ps-tab:hover{color:var(--ink-900);}
.ps-tab.is-active{color:var(--ink-900);background:#fff;border-bottom-color:var(--green-500);}
.ps-card.product-selection-card{
border:0;border-radius:0;box-shadow:none;transform:none;padding:0;margin:0;height:auto;cursor:default;
}
.ps-card.product-selection-card:hover{border:0;box-shadow:none;transform:none;}
.ps-card.product-selection-card.selected{box-shadow:none;border:0;}
.ps-card.product-selection-card.selected::after{display:none;}
.ps-card__desc{padding:.85rem 1.25rem;margin:0;font-size:.95rem;color:var(--ink-700);border-bottom:1px solid var(--line);}
.ps-card__prices{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--paper);border-bottom:1px solid var(--line);}
.ps-card__price{display:flex;flex-direction:column;gap:.3rem;}
.ps-card__price--total{text-align:right;align-items:flex-end;}
.ps-label{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.ps-price{font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1.1;color:var(--ink-900);letter-spacing:-.01em;}
.ps-card__price--total .ps-price{font-size:1.75rem;color:var(--green-800);}
.ps-mwst{font-size:.8rem;color:var(--muted);}
.ps-card__direct{margin:0;padding:.85rem 1.25rem 0;font-weight:700;color:var(--green-700);font-size:.95rem;}
.ps-card__direct .bi,.ps-line .bi{color:var(--green-500);}
.ps-card__cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:.9rem 1.25rem 1.1rem;}
.ps-card__cols>div{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.ps-line{font-weight:700;color:var(--ink-900);}
.ps-line__note{font-weight:500;font-size:.8rem;color:var(--muted);}
.ps-sub{font-size:.82rem;color:var(--muted);}
.ps-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.ps-chip{
display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:6px;
background:var(--paper-2);border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--ink-700);white-space:nowrap;
}
.ps-chip .bi{color:var(--green-600);}
.ps-card__cta{margin:0 1.25rem;width:calc(100% - 2.5rem);font-size:1.15rem;}
.ps-card__ssl{margin:.7rem 0 0;text-align:center;font-size:.85rem;color:var(--ink-500);}
.ps-card__compare{display:block;text-align:center;margin:.35rem 0 0;font-size:.92rem;color:var(--ink-500);text-decoration:underline;}
.ps-card__compare:hover{color:var(--green-700);}
.ps-card__foot{margin:0;padding:.75rem 1.25rem;border-top:1px solid var(--line);text-align:center;font-size:.8rem;color:var(--muted);}
.ps-bind{
margin-top:1rem;padding:1rem 1.25rem;text-align:center;background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--radius-sm);font-size:1.02rem;color:var(--ink-900);
}
@media (max-width:575px){
.ps-summary{font-size:.95rem;padding:.75rem .9rem;}
.ps-tab{font-size:.95rem;padding:.8rem .5rem;}
.ps-tab small{display:none;}
.ps-price{font-size:1.35rem;}
.ps-card__price--total .ps-price{font-size:1.5rem;}
.ps-card__cols{grid-template-columns:1fr;gap:.9rem;}
.ps-card__cta{margin:0 1rem;width:calc(100% - 2rem);}
}
/* Schritt 1: Siegel-Slot + Vorteile (15.09.2026) */
.ps-seal{
display:flex;align-items:center;gap:.9rem;margin-top:1rem;padding:.9rem 1.1rem;text-decoration:none;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-700);box-shadow:var(--shadow-sm);
}
.ps-seal img{width:56px;height:56px;flex-shrink:0;}
.ps-seal strong{color:var(--ink-900);}
.ps-seal:hover{border-color:var(--green-300);color:var(--green-700);}
.ps-benefits{margin-top:1rem;padding:1.1rem 1.25rem 1.2rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);}
.ps-benefits__title{font-size:1.05rem;margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem;color:var(--ink-900);}
.ps-benefits__title .bi{color:var(--green-600);}
.ps-benefits__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.ps-benefits__list li{display:flex;gap:.7rem;align-items:flex-start;}
.ps-benefits__list li>.bi{color:var(--green-600);font-size:1.05rem;margin-top:.1rem;flex-shrink:0;}
.ps-benefits__list strong{display:block;color:var(--ink-900);font-size:.98rem;}
.ps-benefits__list span{display:block;color:var(--ink-500);font-size:.88rem;line-height:1.45;}
/* Vorteile/Siegel unter dem Weiter-Button, nur in Schritt 1 */
.ps-after-nav{margin-top:1.25rem;}
/* Box auf allen Schritten sichtbar (Barry 15.09.) */
/* Flow-Test 15.09.: Korrekturen */
.pm-name{hyphens:auto;overflow-wrap:break-word;}
@media (max-width:575px){
.pm-icon{width:40px;height:40px;font-size:1.05rem;}
.pm-label{gap:.75rem;padding:.95rem 1rem;}
.delivery-method-option .pm-price{font-size:.9rem;white-space:nowrap;}
.ps-label{font-size:.66rem;letter-spacing:.04em;}
}
/* Scroll-Top-Button im Checkout nur auf grossen Screens (kollidiert sonst mit den fixen Leisten) */
@media (max-width:1199px){ body.is-checkout #scrollTopBtn{display:none !important;} }
.ps-card__trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:.7rem;padding:0 1.25rem;}
.ps-card__trust .ps-card__ssl{margin:0;}
.ps-card__seal{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:700;color:var(--ink-700);text-decoration:none;}
.ps-card__seal:hover{color:var(--green-700);}
.ps-card__seal img{width:34px;height:34px;}
/* 6-Schritte-Wizard (15.09.2026) */
.wz-trust-note{
display:flex;gap:.75rem;align-items:flex-start;margin:0 0 1.25rem;padding:.9rem 1.1rem;
background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-sm);font-size:.92rem;color:var(--ink-700);
}
.wz-trust-note .bi{color:var(--green-600);font-size:1.1rem;margin-top:.1rem;flex-shrink:0;}
.wz-trust-note strong{color:var(--ink-900);}
@media (max-width:767px){
.wz-step__label{font-size:.72rem;}
}
@media (max-width:575px){
.wz-step__label{font-size:.62rem;}
.wz-step__dot{width:34px;height:34px;}
.wz-step:not(:first-child)::before{top:16px;}
}
/* ===== Verify-Loop 1 (15.09.2026): Leisten-Freiraum, Touch-Ziele, Schrift, Kopf ===== */
html{scroll-padding-bottom:96px;scroll-padding-top:90px;}
@media (max-width:991px){
body.is-checkout main,body.is-checkout .order-wizard-section{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));}
.mobile-cart-toggle{padding:.55rem .9rem;gap:.7rem;border-radius:14px;}
.mobile-cart-toggle__icon{width:34px;height:34px;font-size:1rem;}
.mobile-cart-total{font-size:1.05rem;}
.mobile-cart-items-count{font-size:.74rem;}
}
body.is-checkout .order-kopf{display:none;} /* H1 „Heizöl bestellen" im Checkout weg (Fold) */
body.is-checkout .breadcrumb-wrap,body.is-checkout nav[aria-label="Breadcrumb"]{display:none;}
.wz-steps{margin-bottom:clamp(1rem,2.5vw,1.6rem);}
.wz-step__label{font-size:.86rem;}
@media (max-width:767px){ .wz-step__label{font-size:12px;} }
@media (max-width:575px){
.wz-step__dot{width:40px;height:40px;}
.wz-step:not(:first-child)::before{top:19px;}
.wz-step__label{font-size:12px;}
.ps-label{font-size:12px;letter-spacing:.03em;}
.ps-summary__edit{padding:.45rem .6rem;margin:-.45rem -.6rem -.45rem auto;}
.ds-badge{font-size:12px;}
.pm-name{hyphens:manual;word-break:normal;}
}
@media (max-width:360px){
.pm-name{font-size:.95rem;}
}
body.is-checkout .topbar-heiz{display:none;}
@media (max-width:575px){ body.is-checkout .site-topbar,body.is-checkout .top-bar{display:none;} }
.wz-edit-btn{white-space:nowrap;min-height:40px;padding:.4rem .9rem;}
.summary-block__head{flex-wrap:wrap;gap:.4rem .75rem;}
.wz-facts{list-style:none;margin:0 0 1rem;padding:.9rem 1rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;color:var(--ink-700);}
.wz-facts .bi{color:var(--green-600);margin-right:.4rem;}
.terms-box .form-check{padding:.85rem 1rem .85rem 2.6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;}
.terms-box .form-check-input{width:1.35rem;height:1.35rem;margin-left:-1.9rem;margin-top:.15rem;}
/* Schritt 1: nur der Karten-CTA (kein zweiter Weiter-Button) */
body[data-wzstep="1"] .wz-nav{display:none;}
body.is-checkout .breadcrumbs{display:none;}
@media (max-width:360px){ .delivery-date-day__slots{grid-template-columns:1fr 1fr;} }
.ps-benefits__list--grid{display:grid;grid-template-columns:1fr;gap:.85rem 1.5rem;}
@media (min-width:768px){ .ps-benefits__list--grid{grid-template-columns:1fr 1fr;} }
.ps-benefits{background:#fff;}
.ps-benefits__title{font-size:1.1rem;}
/* Fortschrittsanzeige ausgeblendet (Barry 15.09.: wirkt lang) – bleibt im DOM fuer Wizard/Tracking */
#wizardSteps.wz-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;}
/* ===== Verify-Loop 2 (15.09.2026) ===== */
@media (max-width:575px){
.delivery-method-option .pm-label,.payment-method-option .pm-label{flex-wrap:wrap;}
.delivery-method-option .pm-body,.payment-method-option .pm-body{flex:1 1 calc(100% - 40px - .75rem - 34px);min-width:60%;}
.delivery-method-option .pm-price{flex:0 0 100%;text-align:left;padding-left:calc(40px + .75rem);margin:0;}
.pm-name{hyphens:manual;}
.wz-panel__head h2{font-size:1.45rem;}
.wz-panel__note{font-size:.82rem !important;}
}
body.is-checkout .top-bar{display:none;}
.ps-label{font-size:12px;}
#wzStickySubmitBtn{min-height:44px;}
.ps-summary__edit{min-height:44px;display:inline-flex;align-items:center;}
#mobileCartCount,.mobile-cart-items-count{font-size:12px;}
.order-wizard-section{padding-top:clamp(1rem,2vw,1.5rem);}
.ps-summary__note{font-size:.78rem;color:var(--muted);font-weight:500;}
.wz-data-note{margin:.6rem 0 0;font-size:12px;color:var(--muted);}
/* Verify-Loop 3 (15.09.2026) */
.was-validated #additionalAddressFields .form-control:valid:not(.is-invalid){border-color:var(--line);background-image:none;}
#additionalAddressFields .form-control.is-invalid{border-color:#dc3545;}
.plz-hint{color:#b02a37;font-size:.85rem;}
@media (max-width:575px){
#step1 .wz-panel__note{display:none;}
#step1 .wz-panel__head{margin-bottom:.75rem;}
#step1 .wz-panel__head h2{font-size:1.3rem;margin-bottom:.2rem;}
.ps-summary{padding:.6rem .8rem;font-size:.92rem;margin-bottom:.75rem;}
}
/* Verify-Loop 4 (15.09.2026): Sticky-CTA Schritt 1 mobil, Mehr-Orte-Hinweis */
.plz-hint--info{color:var(--muted);font-size:.85rem;}
.ps-sticky-cta{display:none;}
@media (max-width:991px){
body.is-checkout[data-wzstep="1"]:not(.ps-cta-visible) .ps-sticky-cta{display:block;position:fixed;left:.9rem;right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));z-index:1077;}
body.is-checkout[data-wzstep="1"]:not(.ps-cta-visible) .mobile-cart-toggle{display:none !important;}
.ps-sticky-cta__inner{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.55rem .6rem .55rem .9rem;box-shadow:0 14px 40px rgba(8,22,13,.25);}
.ps-sticky-cta__total{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.ps-sticky-cta__total small{font-size:.68rem;color:var(--muted);white-space:nowrap;}
.ps-sticky-cta__total strong{font-size:1.05rem;color:var(--green-800);white-space:nowrap;}
.ps-sticky-cta__btn{margin-left:auto;padding:.7rem 1rem;font-size:.95rem;white-space:nowrap;}
}
/* Verify-Loop 5 (15.09.2026) */
.ps-summary__item + .ps-summary__item::before{content:"\00b7";color:var(--muted);margin:0 .45rem 0 0;}
.ps-summary__item{white-space:nowrap;}
.ps-summary__item--std{white-space:normal;}
.pm-skonto{font-weight:700;color:#166534;}
.wz-edit-btn{min-height:44px;}
.ps-sticky-cta__total small{font-size:12px;}
.ps-sticky-cta__btn{min-height:44px;}
@media (max-width:374px){
.ps-sticky-cta__total small{white-space:normal;line-height:1.1;}
.ps-sticky-cta__inner{padding-left:.7rem;gap:.5rem;}
.ps-sticky-cta__btn{padding:.6rem .8rem;font-size:.9rem;}
}
/* Verify-Loop 6 (15.09.2026) */
.pm-hint__txt{display:inline;}
.pm-hint .pm-skonto{display:inline;}
#submitOrderBtn{min-height:44px;}
.nowrap{white-space:nowrap;}
@media (max-width:767.98px),(min-width:992px) and (max-width:1199.98px){
.ps-summary{position:relative;padding-right:4.2rem;}
.ps-summary__item:nth-child(n+3){flex-basis:100%;}
.ps-summary__item:nth-child(n+3)::before{content:none;margin:0;}
.ps-summary__edit{position:absolute;right:.5rem;top:.35rem;margin:0;}
}
@keyframes hzPulse{0%{box-shadow:0 0 0 0 rgba(220,53,69,.55);}70%{box-shadow:0 0 0 12px rgba(220,53,69,0);}100%{box-shadow:0 0 0 0 rgba(220,53,69,0);}}
#step4 .form-check.is-pulse{animation:hzPulse 1s ease-out 2;border-radius:10px;}
/* Verify-Loop 7 (15.09.2026) */
.terms-box .form-check{flex-wrap:wrap;}
.terms-box .form-check .invalid-feedback{flex-basis:100%;margin-left:0;}
@media (max-width:360.98px){
.pm-hint{margin-left:calc(-40px - .75rem);max-width:none;align-self:stretch;}
}
/* Verify-Loop 8 (15.09.2026): AGB-Label neben der Checkbox halten, Feedback darunter */
.terms-box .form-check .form-check-label{flex:1 1 0;min-width:0;}
.terms-box .form-check .invalid-feedback{width:100%;}
/* Verify-Loop 9 (16.09.2026): Erklärtext-Zeilen in der Übersicht als Notiz */
.sum-row--text{display:block;}
.sum-row--text span{display:block;font-size:.78rem;color:#6b7a70;margin-bottom:.1rem;}
.sum-row--text strong{display:block;text-align:left;font-weight:500;font-size:.92rem;line-height:1.45;color:var(--ink-700);}
/* Abschluss-Check (16.09.2026): kleine Handys */
.delivery-date-day__slots{grid-template-columns:repeat(3,minmax(0,1fr));}
.delivery-slot-option{min-width:0;}
.ds-badge{white-space:normal;line-height:1.15;max-width:100%;}
@media (max-width:360px){ .delivery-date-day__slots{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:430.98px){
.wz-sticky-submit__jetzt{display:none;}
#wzStickySubmitBtn{font-size:.8rem;padding:.5rem .55rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;}
.ds-badge{font-size:.68rem;padding:.2rem .4rem;}
}
.terms-box .form-check-label{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;}
/* 4-Schritte-Flow (17.09.2026) */
.wz-subhead--gap{margin-top:1.6rem;}
.wz-subhead-lead{color:var(--muted);font-size:.92rem;margin:-.2rem 0 .9rem;}
/* Fable-Test 4 Schritte (17.09.2026) */
@media (max-width:991.98px){
body.is-checkout .main-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));}
}
.ds-badge{font-size:12px !important;}
.ps-card__compare{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem;}
#mobileCartClose{min-width:44px;min-height:44px;}
#wzStickySubmitBtn.is-waiting{opacity:.82;}
/* Sidebar-Sticky wirksam machen: Spalte so hoch wie die Zeile (Fable 17.09.) */
@media (min-width:992px){
.order-cart-col{align-self:stretch;}
.order-cart{position:sticky;top:92px;}
}
/* 992-1199px: schmale Sidebar, kompaktere Texte */
@media (min-width:992px) and (max-width:1199.98px){
.order-cart__title{font-size:1.05rem;}
.order-cart .order-cart__head .btn, .order-cart .ssl-badge{padding:.25rem .5rem;font-size:.72rem;}
.order-cart__card{padding:1rem;}
.order-cart .sum-row span, .order-cart .breakdown__row span{font-size:.82rem;}
.order-cart .cart-plz, .order-cart .order-cart__plz{font-size:.8rem;}
}
/* body overflow-x:hidden macht body zum Sticky-Container -> Sidebar klebt nicht. clip erzeugt keinen Scroll-Container. (17.09.) */
body.is-checkout{overflow-x:clip;overflow-y:visible;}
/* Volle Termine: nicht klickbar, klar als belegt (17.09.2026) */
.delivery-slot-option--booked{pointer-events:none;}
.delivery-slot-option--booked .ds-label{opacity:.6;}
.dd-loading{display:flex;align-items:center;gap:.5rem;padding:1rem;color:var(--muted);font-size:.92rem;}