/* ROTHLER Heizkörper-Konfigurator v2 (10.09.2026). Baut auf den Tokens von berater.css auf (.rhk), bringt aber eigene Bausteine mit: Farbkacheln mit RAL-Fläche, Doppel-Schieberegler, Größenliste, Modellkarten mit Betriebs-Badge, Betriebsarten mit Vor- und Nachteilen, mitlaufende Zählleiste. */ .rhk2 { max-width: 1160px; margin: 0 auto; padding: 0 0 96px; } /* --- Kopf --- */ /* --- Schritt --- */ /* --- Kacheln allgemein --- */ .rhk2-grid { display: grid; gap: 10px; } .rhk2-grid--2 { grid-template-columns: 1fr; } .rhk2-tile { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px; border: 1.5px solid var(--k-line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .18s, background .18s; } .rhk2-tile:hover { border-color: #9fb6cc; } .rhk2-tile.on { border-color: var(--k-blue); background: var(--k-50); box-shadow: inset 0 0 0 1px var(--k-blue); } .rhk2-tile__n { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); } .rhk2-tile__s { display: block; font-size: 13px; color: var(--k-muted); margin-top: 2px; line-height: 1.35; } /* --- Farben und Farbmuster --------------------------------------------------------------------------- Farbmuster: lackiertes Stahlblech im echten RAL-Ton, rechteckig und groß --------------------------- Aufbau von oben nach unten: schmaler Glanzstreifen (Fensterreflexion), breite Aufhellung oben, Abdunklung zum unteren Rand (Wölbung), darunter die Grundfarbe. Bei rauer Oberfläche ersetzt eine feine Körnung die Reflexion. Die Kante bekommt eine Blechfase. */ .rhk2-col__sw { position: relative; display: block; width: 100%; aspect-ratio: 5 / 3; border-radius: 9px; overflow: hidden; background: var(--c); box-shadow: inset 0 0 0 1px rgba(10,22,40,.16), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.16); } .rhk2-col__sw::before, .rhk2-col__sw::after { content: ""; position: absolute; inset: 0; } /* glatt glänzend: harte Reflexion diagonal, dazu Wölbung */ .rhk2-col__sw--gloss::before { background: linear-gradient(112deg, transparent 27%, rgba(255,255,255,.44) 37%, rgba(255,255,255,.18) 45%, transparent 53%), linear-gradient(112deg, transparent 64%, rgba(255,255,255,.13) 71%, transparent 77%); } .rhk2-col__sw--gloss::after { background: linear-gradient(178deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.10) 74%, rgba(0,0,0,.26) 100%); } /* helle Lacke spiegeln schwächer, sonst verschwindet die Farbe im Weiß */ /* Heller Lack spiegelt den Raum dunkler, nicht heller: Reflexion als grauer Streifen statt als Lichtstreifen */ .rhk2-col__sw--gloss.is-light::before { background: linear-gradient(112deg, transparent 26%, rgba(120,132,146,.30) 36%, rgba(120,132,146,.12) 44%, transparent 52%), linear-gradient(112deg, transparent 62%, rgba(120,132,146,.16) 70%, transparent 76%); } .rhk2-col__sw--gloss.is-light::after { background: linear-gradient(178deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.05) 78%, rgba(0,0,0,.13) 100%); } /* rau oder matt: keine Spiegelung, feine Körnung und weiche Wölbung */ .rhk2-col__sw--matt::before { background-image: radial-gradient(rgba(255,255,255,.16) .5px, transparent .6px), radial-gradient(rgba(0,0,0,.14) .5px, transparent .6px); background-size: 3px 3px, 4px 4px; background-position: 0 0, 1px 2px; } .rhk2-col__sw--matt::after { background: linear-gradient(176deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.14) 100%); } .rhk2-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .rhk2-col { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 10px; border: 1.5px solid var(--k-line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; transition: border-color .18s; } .rhk2-col:hover { border-color: #9fb6cc; } .rhk2-col.on { border-color: var(--k-blue); box-shadow: inset 0 0 0 1px var(--k-blue); background: var(--k-50); } .rhk2-col__t b { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); } .rhk2-col__ral { display: block; font-size: 12px; color: var(--k-muted); margin-top: 1px; } .rhk2-col__p { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 13px; color: var(--k-blue); margin-top: 3px; } .rhk2-col__chk { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); background: rgba(10,22,40,.28); } .rhk2-col.on .rhk2-col__chk, .rhk2-size.on .rhk2-col__chk, .rhk2-ac.on .rhk2-col__chk, .rhk2-var.on .rhk2-col__chk, .rhk2-zb.on .rhk2-col__chk { background: var(--k-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: #fff; } .rhk2-note { margin: 10px 0 0; font-size: 13px !important; color: var(--k-muted); } /* --- Umschalter Maß / Leistung --- */ .rhk2-modus { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--k-bg); border: 1px solid var(--k-line); margin-bottom: 14px; } .rhk2-modus__b { border: 0; background: none; padding: 7px 15px; border-radius: 999px; font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px; color: var(--k-muted); cursor: pointer; } .rhk2-modus__b.on { background: #fff; color: var(--k-text); box-shadow: 0 1px 3px rgba(10,22,40,.14); } /* --- Schieberegler: zwei Griffe auf einer Schiene ------------------------------------------------------ Der gewählte Bereich steht als ein zusammenhängender Wert im Kopf ("28 bis 54 cm" oder "alle"), die Skalenenden klein darunter. Griffe sind 28 px groß und haben genug Luft zum Rand, damit sie auf dem Handy greifbar bleiben. */ /* --- Größenliste --- */ .rhk2-sizes__h { margin: 0 0 8px; font-size: 14px !important; color: var(--k-muted); } .rhk2-sizes__h b { color: var(--k-text); font-family: var(--font-display, inherit); font-weight: 800; } .rhk2-sizes { display: grid; gap: 6px; } .rhk2-size { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 40px 11px 13px; border: 1.5px solid var(--k-line); border-radius: 11px; background: #fff; cursor: pointer; text-align: left; transition: border-color .18s; } .rhk2-size:hover { border-color: #9fb6cc; } .rhk2-size.on { border-color: var(--k-blue); background: var(--k-50); box-shadow: inset 0 0 0 1px var(--k-blue); } .rhk2-size__m b { font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); } .rhk2-size__m small { display: block; font-size: 12px; color: var(--k-muted); } .rhk2-size__w { font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px; color: var(--k-text); text-align: right; } .rhk2-size__w small { display: block; font-family: var(--font-body, inherit); font-weight: 400; font-size: 12px; color: var(--k-muted); } .rhk2-size__p { font-family: var(--font-display, inherit); font-weight: 800; font-size: 14px; color: var(--k-blue); white-space: nowrap; } .rhk2-size .rhk2-col__chk { top: 50%; transform: translateY(-50%); right: 11px; background: #fff; border-color: var(--k-line); } .rhk2-sizes--tight { margin-bottom: 16px; } .rhk2-empty { margin: 12px 0 0; padding: 14px; border: 1px dashed var(--k-line); border-radius: 12px; background: var(--k-bg); font-size: 14px !important; color: var(--k-muted); } .rhk2-lbl { margin: 4px 0 8px; font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); } /* --- Modelle ------------------------------------------------------------------------------------- */ /* --- Betriebsart-Chips: minimal, ein Chip je Art, Erklärung beim Zeigen ------------------------------ Bewusst neutral gehalten. Farbige Badges wirkten wie Warnhinweise, obwohl sie nur eine Eigenschaft beschreiben. Der Unterschied liegt im Zeichen, nicht in der Farbe. */ .rhk2-chips { display: flex; flex-wrap: wrap; gap: 5px; } .rhk2-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px; background: var(--k-bg); border: 1px solid var(--k-line); color: #45525f; cursor: help; } .rhk2-chip svg { width: 14px; height: 14px; flex: 0 0 14px; } .rhk2-chip__k { font-family: var(--font-display, inherit); font-weight: 700; font-size: 12px; letter-spacing: -.005em; white-space: nowrap; } .rhk2-chip:hover, .rhk2-chip:focus-visible { background: var(--k-50); border-color: #bcd5ec; color: var(--k-blue); outline: none; } .rhk2-chip__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(3px); width: max-content; max-width: 240px; padding: 9px 11px; border-radius: 10px; background: var(--k-950, #04192a); color: #fff; font-family: var(--font-body, inherit); font-weight: 400; font-size: 13px; line-height: 1.4; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease; z-index: 20; pointer-events: none; box-shadow: 0 10px 26px -12px rgba(4,25,42,.6); } .rhk2-chip__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--k-950, #04192a); } .rhk2-chip:hover .rhk2-chip__tip, .rhk2-chip:focus-visible .rhk2-chip__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .rhk2-chips--gross .rhk2-chip { padding: 6px 12px 6px 9px; } .rhk2-chips--gross .rhk2-chip svg { width: 16px; height: 16px; flex-basis: 16px; } .rhk2-chips--gross .rhk2-chip__k { font-size: 13px; } /* am linken Rand nicht aus der Karte laufen */ .rhk2-chips .rhk2-chip:first-child .rhk2-chip__tip { left: 0; transform: translateX(0) translateY(3px); } .rhk2-chips .rhk2-chip:first-child:hover .rhk2-chip__tip, .rhk2-chips .rhk2-chip:first-child:focus-visible .rhk2-chip__tip { transform: translateX(0) translateY(0); } .rhk2-chips .rhk2-chip:first-child .rhk2-chip__tip::after { left: 26px; } @media (prefers-reduced-motion: reduce) { .rhk2-chip__tip { transition: none; } } /* --- Betriebsarten --- */ .rhk2-ops { display: grid; gap: 9px; margin-bottom: 18px; } .rhk2-op { border: 1.5px solid var(--k-line); border-radius: 13px; background: #fff; overflow: hidden; } .rhk2-op.on { border-color: var(--k-blue); box-shadow: inset 0 0 0 1px var(--k-blue); } .rhk2-op.off { opacity: .55; background: var(--k-bg); } .rhk2-op__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; background: none; text-align: left; cursor: pointer; } .rhk2-op__head:disabled { cursor: not-allowed; } .rhk2-op__t { flex: 1 1 auto; min-width: 0; } .rhk2-op__t b { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); } .rhk2-op__t small { display: block; font-size: 13px; color: var(--k-muted); margin-top: 1px; } .rhk2-op__mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--k-line); } .rhk2-op.on .rhk2-op__mark { border-color: var(--k-blue); background: radial-gradient(circle, var(--k-blue) 0 6px, transparent 7px); } .rhk2-op__body { padding: 0 14px 13px; display: grid; gap: 8px; } .rhk2-pro, .rhk2-con { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .rhk2-pro li, .rhk2-con li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; color: var(--k-text); } .rhk2-pro li::before { content: "+"; position: absolute; left: 4px; color: var(--k-ok); font-weight: 800; } .rhk2-con li::before { content: "−"; position: absolute; left: 4px; color: var(--k-muted); font-weight: 800; } .rhk2-con li { color: var(--k-muted); } .rhk2-op__warn { margin: 0; padding: 0 14px 12px; font-size: 13px !important; color: var(--k-err); } .rhk2-info { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--k-ok-bg); color: #14531a; font-size: 14px !important; line-height: 1.45 !important; } /* --- Zubehör --- */ .rhk2-acc { display: grid; gap: 8px; } .rhk2-ac { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 11px; align-items: center; padding: 10px 40px 10px 10px; border: 1.5px solid var(--k-line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; } .rhk2-ac.on { border-color: var(--k-blue); background: var(--k-50); box-shadow: inset 0 0 0 1px var(--k-blue); } .rhk2-ac__img { width: 56px; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: var(--k-bg); display: block; } .rhk2-ac__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .rhk2-ac__b b { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 14px; color: var(--k-text); line-height: 1.25; } .rhk2-ac__b small { display: block; font-size: 13px; color: var(--k-muted); line-height: 1.35; margin-top: 2px; } .rhk2-ac__p { font-family: var(--font-display, inherit); font-weight: 800; font-size: 14px; color: var(--k-blue); white-space: nowrap; } .rhk2-ac .rhk2-col__chk { top: 50%; transform: translateY(-50%); right: 11px; background: #fff; border-color: var(--k-line); } /* --- Leiste unten --- */ .rhk2__count, .rhk2__total { display: flex; flex-direction: column; line-height: 1.1; } .rhk2__count b, .rhk2__total b { font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px; color: var(--k-text); } .rhk2__count small, .rhk2__total small { font-size: 12px; color: var(--k-muted); } .rhk2__total { padding-left: 11px; border-left: 1px solid var(--k-line); } .rhk2__btn { margin-left: auto; padding: 11px 16px; border: 1px solid var(--k-line); border-radius: 11px; background: #fff; font-family: var(--font-display, inherit); font-weight: 700; font-size: 15px; color: var(--k-text); cursor: pointer; } .rhk2__btn + .rhk2__btn { margin-left: 0; } .rhk2__btn--p { background: var(--k-blue); border-color: var(--k-blue); color: #fff; } .rhk2__btn--p:disabled { background: #9fb6cc; border-color: #9fb6cc; } .rhk2__btn:disabled { opacity: .65; cursor: default; } /* --- Modell-Details --- */ .rhk2__modal { position: fixed; inset: 0; z-index: 60; background: rgba(4,25,42,.62); display: grid; place-items: end center; padding: 0; } .rhk2__modal-box { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); } .rhk2__modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--k-bg); font-size: 22px; line-height: 1; color: var(--k-text); cursor: pointer; } .rhk2__modal-in h3 { margin: 0 0 8px; font-size: 20px !important; font-weight: 800 !important; padding-right: 40px; } .rhk2__modal-in .rhk2-modal__img { display: block; width: 100%; max-width: 260px; margin: 0 auto 14px; border-radius: 12px; background: var(--k-bg); } .rhk2-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; } .rhk2-dl dt { color: var(--k-muted); } .rhk2-dl dd { margin: 0; font-weight: 600; color: var(--k-text); } .rhk2__modal-in .rhk2__btn { width: 100%; margin: 0; } body.rhk2-open { overflow: hidden; } /* --- Desktop --- */ @media (min-width: 768px) { .rhk2-grid--2 { grid-template-columns: 1fr 1fr; } .rhk2__modal { place-items: center; padding: 20px; } .rhk2__modal-box { border-radius: 18px; } } @media (min-width: 992px) { .rhk2-cols { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } } @media (prefers-reduced-motion: reduce) { .rhk2-tile, .rhk2-col, .rhk2-size, .rhk2-mod { transition: none; } } /* Nachtrag: RAL-Punkt auf der Farbkachel, kompakte Leiste, Kopf ohne zweite H1 */ .rhk2__count, .rhk2__total { flex: 0 0 auto; white-space: nowrap; } .rhk2__count b, .rhk2__total b { font-size: 17px; white-space: nowrap; } .rhk2__count small, .rhk2__total small { white-space: nowrap; font-size: 12px; } .rhk2__btn { padding: 10px 13px; font-size: 14px; white-space: nowrap; } @media (max-width: 400px) { .rhk2__count small { max-width: 68px; white-space: normal; line-height: 1.15; } .rhk2__total { padding-left: 8px; } .rhk2__btn { padding: 10px 11px; font-size: 14px; } } /* Wichtig: .rhk bringt auf Desktop ein zweispaltiges Grid mit (Hero links, Schritte rechts) — das ist das Layout von v1. v2 läuft einspaltig, deshalb das Grid hier gezielt aufheben. */ #rh-konfigurator-v2.rhk2 { display: block !important; grid-template-columns: none !important; gap: 0 !important; } #rh-konfigurator-v2.rhk2 > * { grid-column: auto !important; width: auto !important; } /* Das Shop-Template gibt jedem
im Inhaltsbereich 4rem Innenabstand — das bläht die Schritte auf. Und die feste Leiste erbt ihre Breite von .rhk__bar aus v1. Beides hier gezielt zurücknehmen. */ @media (min-width: 992px) { } /* --- Raumwahl: zwei große Bildkacheln ------------------------------------------------------------------ Die Fotos zeigen genau die Situation, um die es geht: Handtuchheizkörper im Bad, Paneelheizkörper im Wohnraum mit offener Küche. Erzeugt über tools/kie-raeume.mjs, liegen unter frontend/img/raeume. */ .rhk2-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .rhk2-room { position: relative; display: block; padding: 0; border: 1.5px solid var(--k-line); border-radius: 14px; background: #fff; overflow: hidden; cursor: pointer; text-align: left; transition: border-color .18s; } .rhk2-room:hover { border-color: #9fb6cc; } .rhk2-room.on { border-color: var(--k-blue); box-shadow: inset 0 0 0 1px var(--k-blue); } .rhk2-room__img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--k-bg); } .rhk2-room__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .rhk2-room__b { display: block; padding: 10px 11px 12px; } .rhk2-room__b b { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); line-height: 1.2; } .rhk2-room__b small { display: block; font-size: 12px; color: var(--k-muted); margin-top: 3px; line-height: 1.32; } .rhk2-room__b em { display: inline-block; font-style: normal; margin-top: 7px; padding: 3px 9px; border-radius: 999px; background: var(--k-50); color: var(--k-blue); font-family: var(--font-display, inherit); font-weight: 800; font-size: 12px; } .rhk2-room .rhk2-col__chk { top: 10px; right: 10px; } @media (min-width: 700px) { .rhk2-rooms { gap: 14px; } } /* --- Leiste unten: der Weiterknopf ist das Ziel, deshalb kräftig und mit Ziel im Text ----------------- */ #rh-konfigurator-v2 .rhk2__btn--p { background: var(--k-blue); border-color: var(--k-blue); color: #fff; font-weight: 800; box-shadow: 0 2px 10px -4px rgba(17,107,176,.7); } #rh-konfigurator-v2 .rhk2__btn--p:hover:not(:disabled) { background: var(--k-blue-dark, #0e548b); border-color: var(--k-blue-dark, #0e548b); } #rh-konfigurator-v2 .rhk2__btn--p:disabled { background: #e3e9f0; border-color: #d3dbe4; color: #7b8695; box-shadow: none; opacity: 1; } #rh-konfigurator-v2 .rhk2__btn:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } #rh-konfigurator-v2 .rhk2__btn { min-height: 46px; } /* offen = erreichbar, aber noch nicht beantwortet: heller als erledigt, trotzdem anklickbar */ /* --- Zubehörkarten: auf schmalen Schirmen Preis und Haken in eine eigene Zeile, damit der Text nicht auf vier Wörter je Zeile zusammenschrumpft --------------------------------------------- */ @media (max-width: 560px) { #rh-konfigurator-v2 .rhk2-ac { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "img text" "preis preis"; row-gap: 8px; padding: 10px 10px 11px; } #rh-konfigurator-v2 .rhk2-ac__img { grid-area: img; width: 52px; } #rh-konfigurator-v2 .rhk2-ac__b { grid-area: text; } #rh-konfigurator-v2 .rhk2-ac__p { grid-area: preis; display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--k-line); font-size: 15px; } #rh-konfigurator-v2 .rhk2-ac__p::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--k-line); background: #fff; } #rh-konfigurator-v2 .rhk2-ac.on .rhk2-ac__p::after { border-color: #fff; background: var(--k-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } #rh-konfigurator-v2 .rhk2-ac .rhk2-col__chk { display: none; } #rh-konfigurator-v2 .rhk2-ac__b b { font-size: 15px; } #rh-konfigurator-v2 .rhk2-ac__b small { font-size: 13px; } } /* --- Größenliste mobil: zwei Zeilen, damit Maß und Leistung nicht auf je zwei Zeilen umbrechen ------- */ @media (max-width: 620px) { #rh-konfigurator-v2 .rhk2-size { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mass chk" "werte preis"; row-gap: 7px; padding: 11px 12px 12px; align-items: center; } #rh-konfigurator-v2 .rhk2-size__m { grid-area: mass; } #rh-konfigurator-v2 .rhk2-size__m b { font-size: 17px; } #rh-konfigurator-v2 .rhk2-size__m small { display: inline; margin-left: 7px; } #rh-konfigurator-v2 .rhk2-size__w { grid-area: werte; text-align: left; font-size: 14px; } #rh-konfigurator-v2 .rhk2-size__w small { display: inline; margin-left: 6px; } #rh-konfigurator-v2 .rhk2-size__p { grid-area: preis; text-align: right; } #rh-konfigurator-v2 .rhk2-size .rhk2-col__chk { grid-area: chk; position: static; transform: none; } } .rhk2-mehr { display: block; width: 100%; margin: 10px 0 0; padding: 12px; border: 1px solid var(--k-line); border-radius: 11px; background: #fff; font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px; color: var(--k-blue); cursor: pointer; } .rhk2-mehr:hover { border-color: var(--k-blue); background: var(--k-50); } #rh-konfigurator-v2 #rh-konfigurator-v2 #rh-konfigurator-v2 #rh-konfigurator-v2 #rh-konfigurator-v2 #rh-konfigurator-v2 #rh-konfigurator-v2 @media (min-width: 700px) { #rh-konfigurator-v2 #rh-konfigurator-v2 } /* --- Modellkarten: das Produktbild führt -------------------------------------------------------------- Der Heizkörper wird nach dem Aussehen gewählt, deshalb ist das Bild die Hauptfläche der Karte und nicht mehr ein Vorschaubildchen neben dem Text. Die Betriebs-Chips sitzen darunter, der Details-Knopf als kleiner Kreis auf dem Bild, damit er den Namen nicht überlagert. Die ganze Karte wählt aus. */ .rhk2-mods { display: grid; gap: 14px; } .rhk2-mod { position: relative; border: 1.5px solid var(--k-line); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; } .rhk2-mod:hover { border-color: #9fb6cc; box-shadow: 0 10px 24px -18px rgba(4,25,42,.55); } .rhk2-mod.on { border-color: var(--k-blue); box-shadow: inset 0 0 0 1px var(--k-blue), 0 10px 26px -18px rgba(17,107,176,.6); } .rhk2-mod__pick { display: block; width: 100%; padding: 0 0 13px; border: 0; background: none; text-align: left; cursor: pointer; } .rhk2-mod__img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #f4f7fa, #e9eef4); } .rhk2-mod__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .rhk2-mod:hover .rhk2-mod__img img { transform: scale(1.025); } .rhk2-mod__mark { position: absolute; left: 12px; bottom: 12px; width: 27px; height: 27px; border-radius: 50%; border: 2px solid rgba(255,255,255,.95); background: rgba(4,25,42,.3); backdrop-filter: blur(3px); } .rhk2-mod.on .rhk2-mod__mark { background: var(--k-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: #fff; } .rhk2-mod__b { display: block; padding: 12px 14px 0; } .rhk2-mod__b .rhk2-chips { margin-bottom: 9px; } .rhk2-mod__n { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; color: var(--k-text); line-height: 1.22; letter-spacing: -.012em; margin-bottom: 4px; } .rhk2-mod__meta { display: block; font-size: 13px; color: var(--k-muted); } .rhk2-mod__p { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px; color: var(--k-blue); margin-top: 7px; } .rhk2-mod__i { position: absolute; top: 11px; right: 11px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); color: var(--k-text); font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px; font-style: italic; cursor: pointer; box-shadow: 0 2px 8px rgba(4,25,42,.24); transition: background .16s ease, transform .12s ease; } .rhk2-mod__i:hover { background: #fff; transform: scale(1.06); } .rhk2-mod__i:focus-visible, .rhk2-mod__pick:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } @media (min-width: 640px) { .rhk2-mods { grid-template-columns: 1fr 1fr; } .rhk2-mod__img { aspect-ratio: 4 / 3; } } @media (prefers-reduced-motion: reduce) { .rhk2-mod, .rhk2-mod__img img, .rhk2-mod__i { transition: none; } .rhk2-mod:hover .rhk2-mod__img img { transform: none; } } /* --- Chips: das Zeichen trägt die Farbe, der Chip bleibt ruhig --------------------------------------- */ .rhk2-chip--zentral svg { color: #1668a8; } .rhk2-chip--elektrisch svg { color: #b7791f; } .rhk2-chip--misch svg { color: #1a7f37; } .rhk2-chip:hover svg, .rhk2-chip:focus-visible svg { color: inherit; } /* --- Drehbarkeit und Heizstab-Seite erklären --------------------------------------------------------- Die häufigste Frage vor dem Kauf und der häufigste Rücksendegrund: Auf welcher Seite sitzt die offene Seite, wo kommt der Heizstab hin. Deshalb steht es hier mit Zeichnung im Ablauf statt im Datenblatt. */ .rhk2-dreh__g { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0 12px; } .rhk2-dreh__f { margin: 0; } .rhk2-dreh__f svg { display: block; width: 100%; height: auto; border-radius: 9px; } .rhk2-dreh__f figcaption { margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--k-muted); text-align: center; } .rhk2-dreh__pfeil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #c9dff2; color: var(--k-blue); font-size: 20px; line-height: 1; align-self: start; margin-top: 26px; } @media (max-width: 460px) { .rhk2-dreh__g { grid-template-columns: 1fr 1fr; gap: 8px; } .rhk2-dreh__pfeil { display: none; } } /* --- Berater-Antworten (10.09.2026) --- Quelle ist data/kundenfragen.json: nur belegte Antworten auf echte Kundenfragen, passend zur Auswahl. Frage fett, Antwort direkt darunter lesbar, ohne Klick. Nur wer mehr wissen will, klappt auf. Höchstens drei Zeilen sichtbar, der Rest hinter einem Textknopf. Kein Kasten, nur Trennlinien. */ .rhk2-faq { margin: 20px 0 0; } .rhk2-faq__h { margin: 0 0 2px; font-family: var(--font-display, inherit); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #56616d; } .rhk2-faq__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--k-line); } .rhk2-faq__i { border-bottom: 1px solid var(--k-line); } .rhk2-faq__i[hidden] { display: none !important; } /* Button-Zeilen erben sonst Schriftstärke und Zeichenabstand der Shop-Buttons */ .rhk2-faq__row { font-weight: 400 !important; letter-spacing: normal; text-transform: none; } .rhk2-faq__row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; width: 100%; padding: 11px 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; } button.rhk2-faq__row { cursor: pointer; } button.rhk2-faq__row:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; border-radius: 6px; } .rhk2-faq__ic { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--k-50); } .rhk2-faq__ic::before { content: ""; width: 12px; height: 12px; background: var(--k-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .rhk2-faq__txt { min-width: 0; } .rhk2-faq__q { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 14px; line-height: 1.3; letter-spacing: -.005em; color: var(--k-text); } .rhk2-faq__a { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; font-weight: 400; color: #3d4956; } .rhk2-faq__a a { color: var(--k-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .rhk2-faq__chev { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; transition: transform .2s ease; background: #6b7682; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .rhk2-faq__i.is-open .rhk2-faq__chev { transform: rotate(180deg); } .rhk2-faq__mehr { padding: 0 0 13px 32px; font-size: 13px; line-height: 1.5; color: #3d4956; } .rhk2-faq__mehr p { margin: 0; } .rhk2-faq__mehr .rhk2-dreh__g { max-width: 340px; margin: 10px 0 0; } .rhk2-faq__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 9px 0; border: 0; background: none; font-family: var(--font-display, inherit); font-weight: 800; font-size: 14px; color: var(--k-blue); cursor: pointer; } .rhk2-faq__more:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; border-radius: 6px; } .rhk2__modal-in .rhk2-faq { margin: 4px 0 18px; } @media (prefers-reduced-motion: reduce) { .rhk2-faq__chev { transition: none; } } /* --- Hinweis auf der Modellkarte (10.09.2026) --- Eine Zeile aus kundenfragen.json (Feld karte), z. B. "Um 180 Grad drehbar". Gleicher Haken wie bei den Kundenfragen, damit es als geklärte Antwort liest und nicht als Warnung. */ .rhk2-mod__hint { display: flex; gap: 7px; align-items: flex-start; margin: 8px 0 0; font-size: 13px !important; line-height: 1.35; font-weight: 600; color: #24303c; } .rhk2-mod__hint .rhk2-faq__ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 0; } .rhk2-mod__hint .rhk2-faq__ic::before { width: 10px; height: 10px; } /* ========================================================================================================== VOLLBILD-APP v2 (11.09.2026, Enes) Kein Shop-Header, keine Breadcrumb, kein Footer. Oben nur Logo, Schritt-Pille und X. Desktop ab 1024 px: Produkt links (Galerie + Ihre Auswahl), Schritt in der Mitte, Schrittliste rechts. Mobil: waagerechte Schrittleiste, kompakter Produktstreifen, Schrittliste als Blatt, Aktionsleiste unten. Farben: Rothler-Blau aus css/brand.css (600 #116bb0, 700 #0e548b, 900 #072a46, 50 #f2f8fd, 100 #e0effa). Kontrast: Weiß auf Blau 600 5,3:1, Blau 900 auf Blau 50 13:1, Grautexte mindestens 4,5:1 auf Weiß. ========================================================================================================== */ /* Absicherung, falls ein Shop-Template den Rahmen trotzdem ausgibt */ body:has(#rh-konfigurator-v2) #jtl-nav-wrapper, body:has(#rh-konfigurator-v2) #header-top-bar, body:has(#rh-konfigurator-v2) .breadcrumb-container, body:has(#rh-konfigurator-v2) #footer, body:has(#rh-konfigurator-v2) .index-heading-wrapper, body:has(#rh-konfigurator-v2) .rh-berater-bar, body:has(#rh-konfigurator-v2) #dh-msearch-panel, body:has(#rh-konfigurator-v2) .smoothscroll-top { display: none !important; } body:has(#rh-konfigurator-v2) { background: #f3f6fa !important; } body:has(#rh-konfigurator-v2) #main-wrapper, body:has(#rh-konfigurator-v2) #content-wrapper, body:has(#rh-konfigurator-v2) #content { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } body:has(#rh-konfigurator-v2) :is(#content-wrapper, #content) > :is(.container, .container-fluid, .container-fluid-xl) { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #rh-konfigurator-v2.rhk2-app { --a-bg: #f3f6fa; --a-line: #e2e9f0; --a-ink: #0a1a2b; --a-muted: #56626f; --a-blue: var(--blue-600, #116bb0); --a-blue-d: var(--blue-700, #0e548b); --a-blue-9: var(--blue-900, #072a46); --a-blue-5: var(--blue-50, #f2f8fd); --a-blue-1: var(--blue-100, #e0effa); --a-blue-2: var(--blue-200, #bcdcf5); --a-top: 60px; --a-disp: var(--font-display, "Manrope", system-ui, sans-serif); --a-body: var(--font-body, "IBM Plex Sans", system-ui, sans-serif); max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 100vh; background: var(--a-bg); color: var(--a-ink); font-family: var(--a-body); } #rh-konfigurator-v2 svg { flex-shrink: 0; } /* --- Obere Leiste --- */ #rh-konfigurator-v2 .rhk2-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: var(--a-top); padding: 0 12px 0 16px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-top__brand { display: inline-flex; align-items: center; color: var(--a-blue); text-decoration: none; } #rh-konfigurator-v2 .rhk2-top__brand img { display: block; height: 24px; width: auto; } #rh-konfigurator-v2 .rhk2-top__brand b { font-family: var(--a-disp); font-weight: 800; font-size: 17px; letter-spacing: .04em; } #rh-konfigurator-v2 .rhk2-top__t { display: none; padding-left: 14px; border-left: 1px solid var(--a-line); font-family: var(--a-disp); font-weight: 700; font-size: 14px; color: var(--a-muted); white-space: nowrap; } #rh-konfigurator-v2 .rhk2-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px 0 13px; border: 1px solid var(--a-blue-1); border-radius: 999px; background: var(--a-blue-5); color: var(--a-blue-9); font-family: var(--a-body); font-size: 13px; font-weight: 500; cursor: pointer; } #rh-konfigurator-v2 .rhk2-pill b { font-family: var(--a-disp); font-weight: 800; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-pill svg { width: 16px; height: 16px; } #rh-konfigurator-v2 .rhk2-top__x { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--a-line); border-radius: 50%; background: #fff; color: var(--a-blue-9); transition: background-color .15s ease, border-color .15s ease; } #rh-konfigurator-v2 .rhk2-top__x svg { width: 20px; height: 20px; } #rh-konfigurator-v2 .rhk2-top__x:hover { background: var(--a-blue-5); border-color: var(--a-blue-2); } #rh-konfigurator-v2 :is(.rhk2-pill, .rhk2-top__x, .rhk2-head__back, .rhk2-act__next, .rhk2-vs__b, .rhk2-hs__b, .rhk2-pc__stage, .rhk2-pc__th, .rhk2-mini__b, .rhk2-sum__go, .rhk2-sheet__x):focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } /* --- Raster --- */ #rh-konfigurator-v2 .rhk2-grid { display: block; } #rh-konfigurator-v2 .rhk2-prod, #rh-konfigurator-v2 .rhk2-rail { display: none; } /* --- Waagerechte Schrittleiste (mobil) --- */ #rh-konfigurator-v2 .rhk2-hs { display: flex; list-style: none; margin: 0; padding: 12px 6px 10px; background: #fff; border-bottom: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-hs__i { position: relative; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } #rh-konfigurator-v2 .rhk2-hs__i + .rhk2-hs__i::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; border-radius: 2px; background: #d5dde6; } #rh-konfigurator-v2 .rhk2-hs__i.is-done + .rhk2-hs__i::before { background: var(--a-blue); } #rh-konfigurator-v2 .rhk2-hs__b { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--a-muted); font-family: var(--a-body); font-size: 12px; font-weight: 600; line-height: 1.2; cursor: default; } #rh-konfigurator-v2 button.rhk2-hs__b { cursor: pointer; } #rh-konfigurator-v2 .rhk2-hs__ic { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid #c3ced9; border-radius: 50%; background: #fff; color: #5f6c79; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } #rh-konfigurator-v2 .rhk2-hs__ic svg { width: 18px; height: 18px; } #rh-konfigurator-v2 .rhk2-hs__t { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rh-konfigurator-v2 .rhk2-hs__i.is-done .rhk2-hs__ic { background: var(--a-blue); border-color: var(--a-blue); color: #fff; } #rh-konfigurator-v2 .rhk2-hs__i.is-done .rhk2-hs__b { color: var(--a-blue-d); } #rh-konfigurator-v2 .rhk2-hs__i.is-active .rhk2-hs__ic { border-color: var(--a-blue); color: var(--a-blue); box-shadow: 0 0 0 4px var(--a-blue-1); } #rh-konfigurator-v2 .rhk2-hs__i.is-active .rhk2-hs__b { color: var(--a-blue-9); font-weight: 800; } #rh-konfigurator-v2 .rhk2-hs__i.is-locked .rhk2-hs__ic { border-color: #dde4eb; color: #98a3ae; } /* --- Produktstreifen (mobil) --- */ #rh-konfigurator-v2 .rhk2-mini { padding: 10px 12px 2px; } #rh-konfigurator-v2 .rhk2-mini:empty { display: none; } #rh-konfigurator-v2 .rhk2-mini__b { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px 7px 7px; border: 1px solid var(--a-line); border-radius: 16px; background: #fff; text-align: left; color: inherit; font: inherit; cursor: pointer; } #rh-konfigurator-v2 .rhk2-mini__img { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 11px; overflow: hidden; background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-mini__img img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-mini__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } #rh-konfigurator-v2 .rhk2-mini__t small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-blue-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rh-konfigurator-v2 .rhk2-mini__t b { font-family: var(--a-disp); font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rh-konfigurator-v2 .rhk2-mini__t em { font-style: normal; font-family: var(--a-disp); font-weight: 800; font-size: 14px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-mini__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; background: var(--a-blue-5); color: var(--a-blue-9); font-size: 13px; font-weight: 700; } #rh-konfigurator-v2 .rhk2-mini__cta svg { width: 15px; height: 15px; } /* --- Schrittbereich --- */ #rh-konfigurator-v2 .rhk2-main { min-width: 0; padding: 0 0 104px; } #rh-konfigurator-v2 .rhk2-card { position: relative; padding: 8px 14px 0; } #rh-konfigurator-v2 .rhk2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; } #rh-konfigurator-v2 .rhk2-head__back { display: inline-flex; align-items: center; gap: 4px; height: 38px; margin-left: -8px; padding: 0 12px 0 6px; border: 0; border-radius: 10px; background: none; color: var(--a-blue-9); font-family: var(--a-body); font-size: 15px; font-weight: 600; cursor: pointer; } #rh-konfigurator-v2 .rhk2-head__back svg { width: 19px; height: 19px; } #rh-konfigurator-v2 .rhk2-head__back:hover { background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-head__back.is-hidden { visibility: hidden; } #rh-konfigurator-v2 .rhk2-head__n { display: none; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--a-blue-5); color: var(--a-blue-9); font-size: 13px; } #rh-konfigurator-v2 .rhk2-head__n b { margin-left: 5px; font-family: var(--a-disp); font-weight: 800; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-prog { display: none; position: relative; height: 4px; margin: 16px 20px 36px; border-radius: 99px; background: var(--a-line); } #rh-konfigurator-v2 .rhk2-prog__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 20%); border-radius: inherit; background: linear-gradient(90deg, var(--a-blue-d), var(--a-blue)); transition: width .45s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-prog__ic { position: absolute; top: 50%; left: var(--p, 20%); display: grid; place-items: center; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--a-blue); box-shadow: 0 0 0 4px var(--a-blue-1), 0 8px 20px -10px rgba(7,42,70,.55); transition: left .45s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-prog__ic svg { width: 20px; height: 20px; } #rh-konfigurator-v2 .rhk2-title { margin: 4px auto 6px !important; max-width: 26ch; padding: 0 !important; text-align: center; font-family: var(--a-disp) !important; font-weight: 800 !important; font-size: 22px !important; line-height: 1.15 !important; letter-spacing: -.02em !important; color: var(--a-ink) !important; text-wrap: balance; outline: none; } #rh-konfigurator-v2 .rhk2-sub { margin: 0 auto 20px !important; max-width: 52ch; text-align: center; font-size: 15px !important; line-height: 1.5 !important; color: var(--a-muted) !important; text-wrap: pretty; } #rh-konfigurator-v2 .rhk2__steps { min-height: 160px; } /* --- Aktionsleiste --- */ #rh-konfigurator-v2 .rhk2-act { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--a-line); box-shadow: 0 -12px 30px -24px rgba(7,42,70,.5); } #rh-konfigurator-v2 .rhk2-act__info { display: flex; align-items: center; gap: 12px; min-width: 0; } #rh-konfigurator-v2 .rhk2-act__next { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--a-blue); color: #fff; font-family: var(--a-disp); font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 12px 24px -14px rgba(17,107,176,.95); cursor: pointer; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; } #rh-konfigurator-v2 .rhk2-act__next::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } #rh-konfigurator-v2 .rhk2-act__next:hover:not(:disabled) { background: var(--a-blue-d); transform: translateY(-1px); } #rh-konfigurator-v2 .rhk2-act__next:disabled { background: #dfe6ee; color: #5f6b77; box-shadow: none; cursor: default; } /* --- Senkrechte Schrittliste (Desktop rechts, mobil im Blatt) --- */ #rh-konfigurator-v2 .rhk2-vs { list-style: none; margin: 0; padding: 0; } #rh-konfigurator-v2 .rhk2-vs__i { position: relative; padding-bottom: 24px; } #rh-konfigurator-v2 .rhk2-vs__i:last-child { padding-bottom: 0; } #rh-konfigurator-v2 .rhk2-vs__i:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; border-radius: 2px; background: #d3dce5; } #rh-konfigurator-v2 .rhk2-vs__i.is-done:not(:last-child)::after { background: var(--a-blue); } #rh-konfigurator-v2 .rhk2-vs__b { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; text-align: left; color: inherit; font: inherit; cursor: default; } #rh-konfigurator-v2 button.rhk2-vs__b { cursor: pointer; } #rh-konfigurator-v2 button.rhk2-vs__b:hover .rhk2-vs__t b { color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-vs__ic { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid #c3ced9; border-radius: 50%; background: #fff; color: #5f6c79; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } #rh-konfigurator-v2 .rhk2-vs__ic svg { width: 20px; height: 20px; } #rh-konfigurator-v2 .rhk2-vs__t { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; } #rh-konfigurator-v2 .rhk2-vs__t small { font-size: 13px; font-weight: 500; line-height: 1.3; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-vs__t b { font-family: var(--a-disp); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--a-ink); transition: color .15s ease; } #rh-konfigurator-v2 .rhk2-vs__t em { margin-top: 2px; font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.35; color: #5f6b77; overflow-wrap: anywhere; } #rh-konfigurator-v2 .rhk2-vs__i.is-done .rhk2-vs__ic { background: var(--a-blue); border-color: var(--a-blue); color: #fff; } #rh-konfigurator-v2 .rhk2-vs__i.is-done .rhk2-vs__t em { color: var(--a-blue-d); } #rh-konfigurator-v2 .rhk2-vs__i.is-active .rhk2-vs__ic { border-color: var(--a-blue); color: var(--a-blue); box-shadow: 0 0 0 5px var(--a-blue-1); } #rh-konfigurator-v2 .rhk2-vs__i.is-active .rhk2-vs__t em { color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-vs__i.is-locked .rhk2-vs__ic { border-color: #dde4eb; color: #98a3ae; background: transparent; } #rh-konfigurator-v2 .rhk2-vs__i.is-locked .rhk2-vs__t b { color: #5f6b77; } /* --- Blatt mit Schrittliste (mobil) --- */ #rh-konfigurator-v2 .rhk2-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(4,25,42,.46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; } #rh-konfigurator-v2 .rhk2-sheet[hidden] { display: none; } #rh-konfigurator-v2 .rhk2-sheet.is-on { opacity: 1; } #rh-konfigurator-v2 .rhk2-sheet__box { position: relative; width: 100%; max-height: 88vh; overflow: auto; padding: 28px 22px calc(26px + env(safe-area-inset-bottom)); background: #fff; border-radius: 24px 24px 0 0; transform: translateY(28px); transition: transform .3s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-sheet.is-on .rhk2-sheet__box { transform: none; } #rh-konfigurator-v2 .rhk2-sheet__box::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; border-radius: 4px; background: #d5dde6; transform: translateX(-50%); } #rh-konfigurator-v2 .rhk2-sheet__x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #eef2f6; color: var(--a-ink); cursor: pointer; } #rh-konfigurator-v2 .rhk2-sheet__x svg { width: 20px; height: 20px; } #rh-konfigurator-v2 .rhk2-sheet__h { margin: 6px 52px 6px 0 !important; font-family: var(--a-disp) !important; font-weight: 800 !important; font-size: 22px !important; line-height: 1.2 !important; color: var(--a-ink) !important; } #rh-konfigurator-v2 .rhk2-sheet__s { margin: 0 0 24px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--a-muted) !important; } /* --- Produktspalte (Desktop) --- */ #rh-konfigurator-v2 .rhk2-pc { padding: 14px; background: #fff; border: 1px solid var(--a-line); border-radius: 24px; box-shadow: 0 30px 60px -52px rgba(7,42,70,.55); } #rh-konfigurator-v2 .rhk2-pc__eyebrow { margin: 2px 4px 10px !important; font-size: 12px !important; font-weight: 700; line-height: 1.3 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--a-blue-d) !important; } #rh-konfigurator-v2 .rhk2-pc__stage { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 50% 28%, #fff 0%, var(--a-blue-5) 62%, #e6eef6 100%); cursor: zoom-in; } #rh-konfigurator-v2 .rhk2-pc__stage img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-pc__stage:hover img { transform: scale(1.03); } #rh-konfigurator-v2 .rhk2-pc__zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--a-blue-9); font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px -10px rgba(7,42,70,.6); } #rh-konfigurator-v2 .rhk2-pc__zoom svg { width: 15px; height: 15px; } #rh-konfigurator-v2 .rhk2-pc__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } #rh-konfigurator-v2 .rhk2-pc__th { position: relative; display: block; aspect-ratio: 1 / 1; padding: 0; border: 1.5px solid var(--a-line); border-radius: 11px; overflow: hidden; background: var(--a-blue-5); cursor: pointer; transition: border-color .15s ease; } #rh-konfigurator-v2 .rhk2-pc__th img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-pc__th:hover { border-color: var(--a-blue-2); } #rh-konfigurator-v2 .rhk2-pc__th.is-more::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,42,70,.64); color: #fff; font-family: var(--a-disp); font-weight: 800; font-size: 14px; } #rh-konfigurator-v2 .rhk2-pc__info { padding: 14px 4px 4px; } #rh-konfigurator-v2 .rhk2-pc__n { display: block; font-family: var(--a-disp); font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-pc__meta { display: block; margin-top: 3px; font-size: 14px; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-pc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; } #rh-konfigurator-v2 .rhk2-pc__price { font-family: var(--a-disp); font-weight: 800; font-size: 20px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; white-space: nowrap; } #rh-konfigurator-v2 .rhk2-pc__price small { margin-right: 3px; font-size: 13px; font-weight: 600; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-pc__lz { font-size: 13px; font-weight: 600; color: #136a18; text-align: right; } #rh-konfigurator-v2 .rhk2-sum { margin-top: 14px; padding: 14px 18px 16px; background: #fff; border: 1px solid var(--a-line); border-radius: 20px; } #rh-konfigurator-v2 .rhk2-sum__h { margin: 0 0 4px !important; font-family: var(--a-disp); font-weight: 800; font-size: 15px !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-sum__l { margin: 0; } #rh-konfigurator-v2 .rhk2-sum__r { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid #edf1f5; } #rh-konfigurator-v2 .rhk2-sum__r:first-child { border-top: 0; } #rh-konfigurator-v2 .rhk2-sum__r dt { font-size: 13px; font-weight: 500; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-sum__r dd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; min-width: 0; font-size: 14px; font-weight: 600; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-sum__r dd > span { min-width: 0; overflow-wrap: anywhere; } #rh-konfigurator-v2 .rhk2-sum__r.is-leer dd > span { font-weight: 500; color: #6b7684; } #rh-konfigurator-v2 .rhk2-sum__go { flex: 0 0 auto; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--a-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } #rh-konfigurator-v2 .rhk2-dot { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(10,22,40,.22); vertical-align: -1px; } #rh-konfigurator-v2 .rhk2-sum__pos { list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px dashed #d8e1e9; } #rh-konfigurator-v2 .rhk2-sum__pos li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; color: #3d4956; } #rh-konfigurator-v2 .rhk2-sum__pos b { font-weight: 700; color: var(--a-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-sum__tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-sum__tot span { font-size: 13px; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-sum__tot b { font-family: var(--a-disp); font-weight: 800; font-size: 20px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-rail__h { margin: 0 0 6px !important; font-family: var(--a-disp); font-weight: 800; font-size: 20px !important; line-height: 1.2 !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-rail__s { margin: 0 0 26px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--a-muted) !important; } #rh-konfigurator-v2 .rhk2-rail__help { margin-top: 30px; padding: 14px 16px; background: #fff; border: 1px solid var(--a-line); border-radius: 16px; font-size: 13px; line-height: 1.4; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-rail__help a { display: block; margin-top: 3px; font-family: var(--a-disp); font-weight: 800; font-size: 17px; color: var(--a-blue-9); text-decoration: none; } #rh-konfigurator-v2 .rhk2-rail__help a:hover { color: var(--a-blue); } /* --- Lightbox --- */ #rh-konfigurator-v2 .rhk2-lb { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(4,17,30,.9); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: #fff; opacity: 0; transition: opacity .22s ease; } #rh-konfigurator-v2 .rhk2-lb[hidden] { display: none; } #rh-konfigurator-v2 .rhk2-lb.is-on { opacity: 1; } #rh-konfigurator-v2 .rhk2-lb__top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } #rh-konfigurator-v2 .rhk2-lb__n { flex: 0 0 auto; min-width: 58px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-lb__t { flex: 1 1 auto; min-width: 0; text-align: center; font-family: var(--a-disp); font-weight: 700; font-size: 15px; color: rgba(255,255,255,.94); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rh-konfigurator-v2 .rhk2-lb__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background-color .15s ease, transform .15s ease, opacity .2s ease; } #rh-konfigurator-v2 .rhk2-lb__btn:hover { background: rgba(255,255,255,.22); } #rh-konfigurator-v2 .rhk2-lb__btn:focus-visible, #rh-konfigurator-v2 .rhk2-lb__th:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } #rh-konfigurator-v2 .rhk2-lb__btn svg { width: 22px; height: 22px; } #rh-konfigurator-v2 .rhk2-lb__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 84px; touch-action: pan-y; } #rh-konfigurator-v2 .rhk2-lb__fig { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; overflow: hidden; } #rh-konfigurator-v2 .rhk2-lb__img { display: block; max-width: min(100%, 1100px); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px -40px rgba(0,0,0,.75); cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: opacity .3s ease, transform .38s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-lb__img.is-enter { opacity: 0; transform: translateX(var(--dx, 0px)) scale(.985); } #rh-konfigurator-v2 .rhk2-lb.is-zoom .rhk2-lb__img { transform: scale(2.2); cursor: zoom-out; transition: transform .3s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-lb__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); } #rh-konfigurator-v2 .rhk2-lb__prev { left: 20px; } #rh-konfigurator-v2 .rhk2-lb__next { right: 20px; } #rh-konfigurator-v2 .rhk2-lb.is-zoom .rhk2-lb__nav, #rh-konfigurator-v2 .rhk2-lb.is-single .rhk2-lb__nav { opacity: 0; pointer-events: none; } #rh-konfigurator-v2 .rhk2-lb__thumbs { display: flex; gap: 8px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; } #rh-konfigurator-v2 .rhk2-lb__thumbs::-webkit-scrollbar { display: none; } #rh-konfigurator-v2 .rhk2-lb__thumbs > :first-child { margin-left: auto; } #rh-konfigurator-v2 .rhk2-lb__thumbs > :last-child { margin-right: auto; } #rh-konfigurator-v2 .rhk2-lb__thumbs:empty { display: none; } #rh-konfigurator-v2 .rhk2-lb__th { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; opacity: .5; cursor: pointer; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; } #rh-konfigurator-v2 .rhk2-lb__th img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-lb__th:hover { opacity: .8; } #rh-konfigurator-v2 .rhk2-lb__th[aria-current="true"] { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255,255,255,.22); } @media (max-width: 767px) { #rh-konfigurator-v2 .rhk2-lb__stage { padding: 0 10px; } #rh-konfigurator-v2 .rhk2-lb__nav { display: none; } #rh-konfigurator-v2 .rhk2-lb__img { border-radius: 12px; } #rh-konfigurator-v2 .rhk2-lb__th { flex-basis: 52px; width: 52px; height: 52px; border-radius: 10px; } #rh-konfigurator-v2 .rhk2-lb__btn { width: 44px; height: 44px; } } @media (min-width: 640px) { #rh-konfigurator-v2 .rhk2-top__t { display: inline; } #rh-konfigurator-v2 .rhk2-top__brand img { height: 28px; } #rh-konfigurator-v2 .rhk2-card { padding: 12px 24px 0; } #rh-konfigurator-v2 .rhk2-title { font-size: 26px !important; } } /* --- Desktop: drei Spalten --- */ @media (min-width: 1024px) { #rh-konfigurator-v2.rhk2-app { --a-top: 66px; } #rh-konfigurator-v2 .rhk2-top { padding: 0 20px 0 28px; } #rh-konfigurator-v2 .rhk2-pill, #rh-konfigurator-v2 .rhk2-hs, #rh-konfigurator-v2 .rhk2-mini { display: none; } #rh-konfigurator-v2 .rhk2-top__x { margin-left: auto; width: 44px; height: 44px; } #rh-konfigurator-v2 .rhk2-grid { display: grid; grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) 236px; align-items: start; } #rh-konfigurator-v2 .rhk2-prod, #rh-konfigurator-v2 .rhk2-rail { display: block; position: sticky; top: var(--a-top); max-height: calc(100vh - var(--a-top)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } #rh-konfigurator-v2 .rhk2-prod { padding: 20px 6px 24px 20px; } #rh-konfigurator-v2 .rhk2-rail { padding: 30px 20px 24px 10px; } #rh-konfigurator-v2 .rhk2-main { padding: 20px 16px 20px; } #rh-konfigurator-v2 .rhk2-card { display: flex; flex-direction: column; min-height: calc(100vh - var(--a-top) - 40px); padding: 22px 36px 0; background: #fff; border: 1px solid var(--a-line); border-radius: 24px; box-shadow: 0 30px 60px -52px rgba(7,42,70,.55); } #rh-konfigurator-v2 .rhk2-head__n { display: inline-flex; } #rh-konfigurator-v2 .rhk2-prog { display: block; } #rh-konfigurator-v2 .rhk2-title { font-size: clamp(26px, 2.2vw, 32px) !important; } #rh-konfigurator-v2 .rhk2-sub { margin-bottom: 26px !important; font-size: 15px !important; } #rh-konfigurator-v2 .rhk2__steps { flex: 1 1 auto; } #rh-konfigurator-v2 .rhk2-act { position: sticky; bottom: 0; left: auto; right: auto; margin: 28px -36px 0; padding: 16px 36px 20px; border-radius: 0 0 24px 24px; box-shadow: none; } #rh-konfigurator-v2 .rhk2-act__next { min-width: 230px; min-height: 52px; padding: 0 26px; } } @media (min-width: 1400px) { #rh-konfigurator-v2 .rhk2-grid { grid-template-columns: 410px minmax(0, 1fr) 276px; } #rh-konfigurator-v2 .rhk2-prod { padding: 24px 10px 28px 28px; } #rh-konfigurator-v2 .rhk2-rail { padding: 34px 30px 28px 14px; } #rh-konfigurator-v2 .rhk2-main { padding: 24px 20px; } #rh-konfigurator-v2 .rhk2-card { padding: 26px 44px 0; } #rh-konfigurator-v2 .rhk2-act { margin: 30px -44px 0; padding: 18px 44px 22px; } } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 :is(.rhk2-prog__fill, .rhk2-prog__ic, .rhk2-sheet, .rhk2-sheet__box, .rhk2-lb, .rhk2-lb__img, .rhk2-lb__th, .rhk2-pc__stage img, .rhk2-act__next, .rhk2-vs__ic, .rhk2-hs__ic) { transition: none !important; } } /* --- Nachtrag 11.09.2026: feste Schriftgrößen (Buttons erben sonst die größere Shop-Button-Schrift), Lightbox-Bild passt immer zwischen Kopf und Miniaturleiste --- */ #rh-konfigurator-v2 .rhk2-hs__b, #rh-konfigurator-v2 .rhk2-hs__t { font-family: var(--a-body) !important; font-size: 12px !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; } #rh-konfigurator-v2 .rhk2-hs__i.is-active .rhk2-hs__t { font-weight: 800 !important; } #rh-konfigurator-v2 .rhk2-hs__i:not(.is-active) .rhk2-hs__t { font-weight: 600 !important; } #rh-konfigurator-v2 .rhk2-vs__b { line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; } #rh-konfigurator-v2 .rhk2-vs__t small { font-size: 13px !important; } #rh-konfigurator-v2 .rhk2-vs__t b { font-size: 17px !important; } #rh-konfigurator-v2 .rhk2-vs__t em { font-size: 13px !important; } #rh-konfigurator-v2 .rhk2-pill, #rh-konfigurator-v2 .rhk2-pill span { font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; } #rh-konfigurator-v2 .rhk2-pill b { font-size: 14px !important; } #rh-konfigurator-v2 .rhk2-lb__img { max-height: calc(100vh - 196px); max-height: calc(100dvh - 196px); } @media (max-width: 767px) { #rh-konfigurator-v2 .rhk2-lb__img { max-height: calc(100vh - 176px); max-height: calc(100dvh - 176px); } } /* Shop setzt html und body auf overflow-x: hidden. Damit wird body zum Scrollcontainer und position: sticky (Leiste oben, Produktspalte, Schrittliste, Aktionsleiste) scrollt mit weg. clip schneidet ebenso ab, erzeugt aber keinen Scrollcontainer. Die Scrollsperre bei offener Lightbox bzw. Blatt bleibt über .rhk2-open. */ html:has(#rh-konfigurator-v2) { overflow-x: clip !important; } body:has(#rh-konfigurator-v2):not(.rhk2-open) { overflow-x: clip !important; overflow-y: visible !important; } /* ========================================================================================================== AUFGERÄUMT (11.09.2026, Enes: "zu überfüllt, ich verliere die Kontrolle") Handy: EINE Kopfzeile (Zurück bzw. Logo, Schritt-Pille, X) mit dünner Fortschrittslinie. Icon-Leiste und Zurück-Zeile entfallen, der Produktstreifen erscheint nur noch mit gewähltem Modell. Trefferzahl nur unten. Modellkarten: quadratische Bilder (Produktfotos sind 1:1), am Handy zwei Spalten, Chips nur als Icons. ========================================================================================================== */ #rh-konfigurator-v2 [hidden] { display: none !important; } #rh-konfigurator-v2 .rhk2-top__back { display: none; align-items: center; gap: 2px; height: 40px; margin-left: -8px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: none; color: var(--a-blue-9); font-family: var(--a-body); font-size: 15px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } #rh-konfigurator-v2 .rhk2-top__back svg { width: 20px; height: 20px; } #rh-konfigurator-v2 .rhk2-top__back:hover { background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-top__back:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } #rh-konfigurator-v2 .rhk2-top__prog { position: absolute; left: 0; bottom: -1px; height: 3px; width: 20%; border-radius: 0 3px 3px 0; background: var(--a-blue); transition: width .45s cubic-bezier(.2,.7,.2,1); } /* Modellkarten überall quadratisch, Bild nie beschnitten */ #rh-konfigurator-v2 .rhk2-mod__img { aspect-ratio: 1 / 1 !important; background: #f4f7fa; } #rh-konfigurator-v2 .rhk2-mod__img img { object-fit: contain; } @media (max-width: 1023.98px) { #rh-konfigurator-v2.rhk2-app { --a-top: 56px; } #rh-konfigurator-v2 .rhk2-top { gap: 8px; padding: 0 10px 0 14px; } #rh-konfigurator-v2[data-cur]:not([data-cur="0"]) .rhk2-top__back { display: inline-flex; } #rh-konfigurator-v2[data-cur]:not([data-cur="0"]) .rhk2-top__brand { display: none; } #rh-konfigurator-v2 .rhk2-top__t { display: none !important; } #rh-konfigurator-v2 .rhk2-pill { height: 34px; } #rh-konfigurator-v2 .rhk2-top__x { width: 40px; height: 40px; } #rh-konfigurator-v2 .rhk2-hs, #rh-konfigurator-v2 .rhk2-head { display: none !important; } #rh-konfigurator-v2 .rhk2-main { padding-bottom: 84px; } #rh-konfigurator-v2 .rhk2-card { padding: 2px 12px 0; } #rh-konfigurator-v2 .rhk2-title { margin: 18px auto 4px !important; font-size: 20px !important; } #rh-konfigurator-v2 .rhk2-sub { margin: 0 auto 16px !important; font-size: 14px !important; line-height: 1.45 !important; } /* Produktstreifen (nur Schritt 5): klein, ohne Überschrift */ #rh-konfigurator-v2 .rhk2-mini { padding: 10px 12px 0; } #rh-konfigurator-v2 .rhk2-mini__b { gap: 10px; padding: 5px 6px 5px 5px; border-radius: 14px; } #rh-konfigurator-v2 .rhk2-mini__img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; } #rh-konfigurator-v2 .rhk2-mini__t small { display: none; } #rh-konfigurator-v2 .rhk2-mini__t b { font-size: 14px; } #rh-konfigurator-v2 .rhk2-mini__t em { font-size: 13px; } #rh-konfigurator-v2 .rhk2-mini__cta { height: 30px; padding: 0 9px; font-size: 12px; } /* Modelle: zwei Spalten, kompakt */ #rh-konfigurator-v2 .rhk2-sizes__h:has(+ .rhk2-mods) { display: none; } #rh-konfigurator-v2 .rhk2-mods { grid-template-columns: 1fr 1fr !important; gap: 10px; } #rh-konfigurator-v2 .rhk2-mod { border-radius: 14px; } #rh-konfigurator-v2 .rhk2-mod__pick { padding-bottom: 10px; } #rh-konfigurator-v2 .rhk2-mod__b { padding: 8px 10px 0; } #rh-konfigurator-v2 .rhk2-mod__b .rhk2-chips { gap: 4px; margin-bottom: 6px; } #rh-konfigurator-v2 .rhk2-mod .rhk2-chip { padding: 4px; } #rh-konfigurator-v2 .rhk2-mod .rhk2-chip__k, #rh-konfigurator-v2 .rhk2-mod .rhk2-chip__tip { display: none; } #rh-konfigurator-v2 .rhk2-mod__n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; margin-bottom: 2px; font-size: 14px !important; line-height: 1.25 !important; } #rh-konfigurator-v2 .rhk2-mod__meta { font-size: 12px; } #rh-konfigurator-v2 .rhk2-mod__p { margin-top: 3px; font-size: 15px; } #rh-konfigurator-v2 .rhk2-mod__hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 5px; font-size: 12px !important; font-weight: 600; line-height: 1.3; color: var(--a-blue-d); } #rh-konfigurator-v2 .rhk2-mod__hint .rhk2-faq__ic { display: none; } #rh-konfigurator-v2 .rhk2-mod__i { top: 7px; right: 7px; width: 28px; height: 28px; font-size: 13px; } #rh-konfigurator-v2 .rhk2-mod__mark { left: 7px; bottom: 7px; width: 22px; height: 22px; } /* Kundenfragen etwas kleiner */ #rh-konfigurator-v2 .rhk2-faq { margin-top: 16px; } #rh-konfigurator-v2 .rhk2-faq__q { font-size: 14px; } #rh-konfigurator-v2 .rhk2-faq__a { font-size: 13px; } /* Aktionsleiste flacher, Trefferzahl einzeilig */ #rh-konfigurator-v2 .rhk2-act { gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); } #rh-konfigurator-v2 .rhk2-act__next { min-height: 46px; padding: 0 18px; font-size: 15px !important; } #rh-konfigurator-v2 .rhk2__count { flex-direction: row; align-items: baseline; gap: 5px; } #rh-konfigurator-v2 .rhk2__count b { font-size: 17px; } #rh-konfigurator-v2 .rhk2__count small { max-width: none; font-size: 13px; white-space: nowrap; line-height: 1.2; } #rh-konfigurator-v2 .rhk2__total { padding-left: 0; border-left: 0; } } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-top__back, #rh-konfigurator-v2 .rhk2-top__prog { display: none !important; } } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 .rhk2-top__prog { transition: none; } } /* ========================================================================================================== RUNDE 3 (11.09.2026, Enes): Einstieg in Schritt 1, linke Spalte nur Auswahl, 4 Farbspalten am Desktop, schlanke Regler mit Wertblase, Übersicht mit Glückwunsch, Speichern und Teilen, Kundenfotos. ========================================================================================================== */ #rh-konfigurator-v2 .rhk2-eyebrow { margin: 10px 0 8px !important; text-align: center; font-size: 12px !important; font-weight: 700; line-height: 1.3 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--a-blue) !important; } #rh-konfigurator-v2 .rhk2-eyebrow:not([hidden]) + .rhk2-title { margin-top: 0 !important; } #rh-konfigurator-v2 .rhk2-q { margin: 4px 0 10px !important; font-family: var(--a-disp); font-weight: 800; font-size: 17px !important; line-height: 1.3 !important; color: var(--a-ink); } /* Linke Spalte: Ihre Auswahl oben mit Trefferzahl, Produkt erst mit Modell */ #rh-konfigurator-v2 .rhk2-sum { margin-top: 0; } #rh-konfigurator-v2 .rhk2-pc { margin-top: 14px; } #rh-konfigurator-v2 .rhk2-sum__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } #rh-konfigurator-v2 .rhk2-sum__top .rhk2-sum__h { margin: 0 !important; } #rh-konfigurator-v2 .rhk2-sum__cnt { margin: 0 !important; font-size: 13px !important; color: var(--a-muted) !important; white-space: nowrap; } #rh-konfigurator-v2 .rhk2-sum__cnt b { margin-right: 4px; font-family: var(--a-disp); font-weight: 800; font-size: 20px; color: var(--a-blue); font-variant-numeric: tabular-nums; } /* Farben: Desktop vier nebeneinander */ @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #rh-konfigurator-v2 .rhk2-col__ral { font-size: 12px; } } /* Größe: schlanke Regler in einer Zeile, Wertblase über dem Griff */ #rh-konfigurator-v2 .rhk2-modus { margin-bottom: 2px; padding: 3px; } #rh-konfigurator-v2 .rhk2-modus__b { padding: 6px 13px; font-size: 13px !important; } #rh-konfigurator-v2 .rhk2-sls { display: grid; gap: 0 28px; margin: 0 0 6px; } #rh-konfigurator-v2 .rhk2-sl { display: grid; grid-template-columns: 56px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 30px 0 6px; } #rh-konfigurator-v2 .rhk2-sl__t { font-family: var(--a-disp); font-weight: 700; font-size: 14px; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-sl__end { font-size: 12px; color: #5f6b77; white-space: nowrap; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-sl__rail { position: relative; height: 28px; } #rh-konfigurator-v2 .rhk2-sl__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: #e1e8ef; } #rh-konfigurator-v2 .rhk2-sl__fill { position: absolute; top: 12px; height: 4px; border-radius: 4px; background: var(--a-blue); left: calc(11px + (100% - 22px) * var(--a, 0)); right: calc(11px + (100% - 22px) * (1 - var(--z, 1))); } #rh-konfigurator-v2 .rhk2-sl__bub { position: absolute; bottom: calc(100% + 3px); left: calc(11px + (100% - 22px) * var(--a, 0)); padding: 3px 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e1e8ef, 0 6px 14px -8px rgba(7,42,70,.45); font-family: var(--a-disp); font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--a-ink); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .15s ease; } #rh-konfigurator-v2 .rhk2-sl__bub--hi { left: calc(11px + (100% - 22px) * var(--z, 1)); } #rh-konfigurator-v2 .rhk2-sl.is-lo .rhk2-sl__bub--lo, #rh-konfigurator-v2 .rhk2-sl.is-hi .rhk2-sl__bub--hi, #rh-konfigurator-v2 .rhk2-sl.is-drag .rhk2-sl__bub { opacity: 1; } #rh-konfigurator-v2 .rhk2-sl.is-nah .rhk2-sl__bub--lo { transform: translateX(calc(-100% + 6px)); } #rh-konfigurator-v2 .rhk2-sl.is-nah .rhk2-sl__bub--hi { transform: translateX(-6px); } #rh-konfigurator-v2 .rhk2-sl__i { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } #rh-konfigurator-v2 .rhk2-sl__i::-webkit-slider-runnable-track { height: 28px; background: transparent; } #rh-konfigurator-v2 .rhk2-sl__i::-moz-range-track { background: transparent; } #rh-konfigurator-v2 .rhk2-sl__i::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 3px; border: 3px solid #fff; border-radius: 50%; background: var(--a-blue); box-shadow: 0 0 0 1px rgba(17,107,176,.35), 0 3px 8px rgba(7,42,70,.35); cursor: grab; } #rh-konfigurator-v2 .rhk2-sl__i::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--a-blue); box-shadow: 0 0 0 1px rgba(17,107,176,.35), 0 3px 8px rgba(7,42,70,.35); cursor: grab; } #rh-konfigurator-v2 .rhk2-sl__i:active::-webkit-slider-thumb { cursor: grabbing; } #rh-konfigurator-v2 .rhk2-sl__i:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } #rh-konfigurator-v2 .rhk2-sl__i:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } #rh-konfigurator-v2 .rhk2-sizes__h { margin: 12px 0 8px !important; font-size: 13px !important; } @media (min-width: 640px) { #rh-konfigurator-v2 .rhk2-sls { grid-template-columns: 1fr 1fr; } #rh-konfigurator-v2 .rhk2-sls--eins { grid-template-columns: minmax(0, 1fr); } } @media (pointer: coarse) { #rh-konfigurator-v2 .rhk2-sl__i::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: 1px; } #rh-konfigurator-v2 .rhk2-sl__i::-moz-range-thumb { width: 20px; height: 20px; } } /* Lightbox mit Bildunterschrift (Kundenfotos) */ #rh-konfigurator-v2 .rhk2-lb.has-caps .rhk2-lb__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; text-align: left; font-family: var(--a-body); font-weight: 500; font-size: 14px; line-height: 1.4; } /* Schritt 6: Ihre Konfiguration */ #rh-konfigurator-v2 .rhk2-done { display: grid; gap: 16px; } #rh-konfigurator-v2 .rhk2-done__hero { position: relative; display: grid; gap: 14px; padding: 14px; border: 1px solid var(--a-blue-1); border-radius: 20px; background: linear-gradient(165deg, var(--a-blue-5) 0%, #fff 72%); overflow: hidden; } #rh-konfigurator-v2 .rhk2-done__img { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 24px 40px -32px rgba(7,42,70,.65); } #rh-konfigurator-v2 .rhk2-done__img img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-done__txt { position: relative; min-width: 0; } #rh-konfigurator-v2 .rhk2-done__eyebrow { margin: 0 0 4px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a-blue-d) !important; } #rh-konfigurator-v2 .rhk2-done__n { display: block; font-family: var(--a-disp); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-done__meta { display: block; margin-top: 2px; font-size: 14px; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-done__facts { display: grid; gap: 7px; list-style: none; margin: 12px 0 0; padding: 0; } #rh-konfigurator-v2 .rhk2-done__facts li { position: relative; padding-left: 27px; font-size: 14px; line-height: 1.4; color: #24303c; } #rh-konfigurator-v2 .rhk2-done__facts li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--a-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } #rh-konfigurator-v2 .rhk2-done__h { margin: 0 0 10px !important; font-family: var(--a-disp); font-weight: 800; font-size: 17px !important; line-height: 1.3 !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-done__pos, #rh-konfigurator-v2 .rhk2-share { padding: 16px; border: 1px solid var(--a-line); border-radius: 18px; background: #fff; } #rh-konfigurator-v2 .rhk2-done__pos ul { list-style: none; margin: 0; padding: 0; } #rh-konfigurator-v2 .rhk2-done__pos li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #edf1f5; } #rh-konfigurator-v2 .rhk2-done__pos li:first-child { border-top: 0; padding-top: 0; } #rh-konfigurator-v2 .rhk2-done__pos li > img, #rh-konfigurator-v2 .rhk2-done__pos li > span:first-child { display: block; width: 44px; height: 44px; border-radius: 10px; background: var(--a-blue-5); object-fit: contain; } #rh-konfigurator-v2 .rhk2-done__pl { min-width: 0; } #rh-konfigurator-v2 .rhk2-done__pl b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-done__pl small { display: block; font-size: 13px; line-height: 1.35; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-done__pp { font-family: var(--a-disp); font-weight: 800; font-size: 15px; color: var(--a-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-done__tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-done__tot span { font-size: 14px; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-done__tot b { font-family: var(--a-disp); font-weight: 800; font-size: 22px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-done__note { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: #5f6b77 !important; } #rh-konfigurator-v2 .rhk2-share__txt { margin: 0 0 12px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--a-muted) !important; } #rh-konfigurator-v2 .rhk2-share__code { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding: 8px 14px; border-radius: 12px; background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-share__code span { font-size: 13px; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-share__code b { font-family: var(--a-disp); font-weight: 800; font-size: 20px; letter-spacing: .12em; color: var(--a-blue-9); } #rh-konfigurator-v2 .rhk2-share__acts { display: flex; flex-wrap: wrap; gap: 8px; } #rh-konfigurator-v2 .rhk2-share__url { margin: 10px 0 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: #5f6b77 !important; word-break: break-all; } #rh-konfigurator-v2 .rhk2-sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 1px solid var(--a-line); border-radius: 999px; background: #fff; color: var(--a-blue-9); font-family: var(--a-body); font-size: 14px !important; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } #rh-konfigurator-v2 .rhk2-sbtn svg { width: 17px; height: 17px; } #rh-konfigurator-v2 .rhk2-sbtn:hover { border-color: var(--a-blue-2); background: var(--a-blue-5); color: var(--a-blue-9); } #rh-konfigurator-v2 .rhk2-sbtn--p { background: var(--a-blue-9); border-color: var(--a-blue-9); color: #fff; } #rh-konfigurator-v2 .rhk2-sbtn--p:hover { background: #0a3e66; border-color: #0a3e66; color: #fff; } #rh-konfigurator-v2 .rhk2-sbtn:disabled { opacity: .7; cursor: default; } #rh-konfigurator-v2 .rhk2-sbtn:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } #rh-konfigurator-v2 .rhk2-done .rev { margin: 6px 0 0; } /* Konfetti: einmal beim Erreichen der Übersicht, bei reduzierter Bewegung gar nicht */ #rh-konfigurator-v2 .rhk2-konfetti { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } #rh-konfigurator-v2 .rhk2-konfetti i { position: absolute; top: 40%; left: 50%; width: 8px; height: 12px; border-radius: 2px; background: var(--c, #116bb0); opacity: 0; transform: translate(-50%, -50%); animation: rhk2Konfetti 1.6s cubic-bezier(.15,.7,.3,1) forwards; animation-delay: calc(var(--i, 0) * 22ms); } @keyframes rhk2Konfetti { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(.5); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--r, 180deg)) scale(1); } } @media (min-width: 640px) { #rh-konfigurator-v2 .rhk2-done__hero { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px; } } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 .rhk2-konfetti { display: none; } #rh-konfigurator-v2 .rhk2-sl__bub { transition: none; } } /* Feinschliff Runde 3: Regler immer untereinander (lange Schienen), Fokus nur am Griff, Übersicht am Handy kompakt (Bild links, Text rechts), weniger Luft über den Kundenfotos */ @media (min-width: 640px) { #rh-konfigurator-v2 .rhk2-sls { grid-template-columns: minmax(0, 1fr); } } #rh-konfigurator-v2 .rhk2-sl__i:focus { outline: none; } #rh-konfigurator-v2 .rhk2-sl { padding-top: 26px; } @media (max-width: 639.98px) { #rh-konfigurator-v2 .rhk2-done__hero { grid-template-columns: 108px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; } #rh-konfigurator-v2 .rhk2-done__img { border-radius: 12px; } #rh-konfigurator-v2 .rhk2-done__img .rhk2-pc__zoom { right: 6px; bottom: 6px; height: 26px; padding: 0 7px; gap: 0; font-size: 0 !important; } #rh-konfigurator-v2 .rhk2-done__n { font-size: 17px; } #rh-konfigurator-v2 .rhk2-done__meta { font-size: 13px; } #rh-konfigurator-v2 .rhk2-done__facts { margin-top: 8px; gap: 5px; } #rh-konfigurator-v2 .rhk2-done__facts li { padding-left: 22px; font-size: 13px; } #rh-konfigurator-v2 .rhk2-done__facts li::before { width: 16px; height: 16px; background-size: 10px; } #rh-konfigurator-v2 .rhk2-done__pos, #rh-konfigurator-v2 .rhk2-share { padding: 14px; } #rh-konfigurator-v2 .rhk2-done__tot b { font-size: 20px; } } #rh-konfigurator-v2 .rhk2-done .rev { margin-top: 4px !important; padding-top: 0 !important; } /* --- Auswahl löschen mit Nachfrage, Auswahl-Blatt am Handy (11.09.2026) --- */ #rh-konfigurator-v2 .rhk2-sum__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf1f5; } #rh-konfigurator-v2 .rhk2-sum__reset { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 1px solid var(--a-line); border-radius: 999px; background: #fff; color: #56626f; font-family: var(--a-body); font-size: 13px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } #rh-konfigurator-v2 .rhk2-sum__reset svg { width: 15px; height: 15px; } #rh-konfigurator-v2 .rhk2-sum__reset:hover { color: #b3261e; border-color: #f0c7c3; background: #fdf4f3; } #rh-konfigurator-v2 .rhk2-sum__reset:focus-visible, #rh-konfigurator-v2 .rhk2-confirm button:focus-visible, #rh-konfigurator-v2 .rhk2-act__sum:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } #rh-konfigurator-v2 .rhk2-confirm { padding: 12px 12px 12px 14px; border: 1px solid #f1d2ce; border-radius: 14px; background: #fff7f6; animation: rhk2Pop .16s ease-out; } #rh-konfigurator-v2 .rhk2-confirm__t { margin: 0 !important; font-family: var(--a-disp); font-weight: 800; font-size: 14px !important; line-height: 1.3 !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-confirm__s { margin: 2px 0 10px !important; font-size: 13px !important; line-height: 1.4 !important; color: #56626f !important; } #rh-konfigurator-v2 .rhk2-confirm__b { display: flex; justify-content: flex-end; gap: 8px; } #rh-konfigurator-v2 .rhk2-confirm button { height: 34px; padding: 0 14px; border-radius: 999px; font-family: var(--a-body); font-size: 13px !important; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } #rh-konfigurator-v2 .rhk2-confirm__no { border: 1px solid var(--a-line); background: #fff; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-confirm__no:hover { background: #f3f6fa; } #rh-konfigurator-v2 .rhk2-confirm__yes { border: 1px solid #b3261e; background: #b3261e; color: #fff; } #rh-konfigurator-v2 .rhk2-confirm__yes:hover { background: #93201a; border-color: #93201a; } @keyframes rhk2Pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } /* Auswahl-Knopf in der Leiste (nur mobil) */ #rh-konfigurator-v2 .rhk2-act__sum { display: none; } @media (max-width: 1023.98px) { #rh-konfigurator-v2 .rhk2-act__info { display: none; } #rh-konfigurator-v2 .rhk2-act__sum { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; text-align: left; color: var(--a-ink); cursor: pointer; } #rh-konfigurator-v2 .rhk2-act__sum-l { display: inline-flex; align-items: center; gap: 3px; font-family: var(--a-body); font-size: 12px !important; font-weight: 600; line-height: 1.2; letter-spacing: 0 !important; text-transform: none !important; color: #56626f; } #rh-konfigurator-v2 .rhk2-act__sum-l svg { width: 14px; height: 14px; color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-act__sum-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--a-disp); font-size: 15px !important; font-weight: 800; line-height: 1.2; color: var(--a-ink); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-act__next { flex: 0 0 auto; } } /* Auswahl im Blatt: ohne Kartenrahmen, Überschrift steht im Blatt */ #rh-konfigurator-v2 .rhk2-sheet--sum .rhk2-sum { padding: 0; border: 0; border-radius: 0; background: none; } #rh-konfigurator-v2 .rhk2-sheet--sum .rhk2-sum__h { display: none; } #rh-konfigurator-v2 .rhk2-sheet--sum .rhk2-sum__top { justify-content: flex-start; margin: -2px 0 8px; } #rh-konfigurator-v2 .rhk2-sheet--sum .rhk2-pc { margin-top: 16px; } #rh-konfigurator-v2 .rhk2-sheet--sum .rhk2-sheet__h { margin-bottom: 4px !important; } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 .rhk2-confirm { animation: none; } } /* ========================================================================================================== RUNDE 4 (11.09.2026, Enes): Knöpfe kaum gerundet, Schritt 3 nur eingrenzen (Platz oder Leistung), neuer Schritt 5 mit den Größen des Modells samt Foto, einheitliche Trefferzahl. ========================================================================================================== */ /* Knöpfe: nur leicht gerundet. Runde Icon-Knöpfe (X, Pfeile, Info) bleiben rund. */ #rh-konfigurator-v2 :is(.rhk2-act__next, .rhk2-act__sum, .rhk2-sbtn, .rhk2-confirm button, .rhk2-sum__reset, .rhk2-pill, .rhk2-mini__cta, .rhk2-pc__zoom, .rhk2-head__back, .rhk2-top__back, .rhk2-mehr, .rhk2__btn, .btn-ghost, .rhk2-tab, .rhk2-m2__b) { border-radius: 8px !important; } /* Schritt 3: Reiter */ #rh-konfigurator-v2 .rhk2-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; } #rh-konfigurator-v2 .rhk2-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--a-line); background: #fff; text-align: left; color: var(--a-ink); font: inherit; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } #rh-konfigurator-v2 .rhk2-tab svg { width: 24px; height: 24px; color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-tab span { display: flex; flex-direction: column; min-width: 0; } #rh-konfigurator-v2 .rhk2-tab b { font-family: var(--a-disp); font-weight: 800; font-size: 14px !important; line-height: 1.25; } #rh-konfigurator-v2 .rhk2-tab small { font-size: 12px !important; line-height: 1.3; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-tab:hover { border-color: #9fb6cc; } #rh-konfigurator-v2 .rhk2-tab.on { border-color: var(--a-blue); background: var(--a-blue-5); box-shadow: inset 0 0 0 1px var(--a-blue); } #rh-konfigurator-v2 .rhk2-tab:focus-visible, #rh-konfigurator-v2 .rhk2-m2__b:focus-visible, #rh-konfigurator-v2 .rhk2-var:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } /* Messhinweis */ #rh-konfigurator-v2 .rhk2-mess { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 4px; padding: 10px 12px 10px 10px; border: 1px solid var(--a-line); border-radius: 12px; background: #fff; } #rh-konfigurator-v2 .rhk2-mess__svg { display: block; width: 88px; height: auto; } #rh-konfigurator-v2 .rhk2-mess__t b { display: block; font-family: var(--a-disp); font-weight: 800; font-size: 15px; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-mess__t p { margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--a-muted) !important; } /* Regler mit Wertzeile */ #rh-konfigurator-v2 .rhk2-sl { display: block; padding: 14px 0 2px; } #rh-konfigurator-v2 .rhk2-sl__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } #rh-konfigurator-v2 .rhk2-sl__t { font-family: var(--a-disp); font-weight: 800; font-size: 15px; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-sl__v { font-family: var(--a-disp); font-weight: 800; font-size: 15px; color: var(--a-blue); white-space: nowrap; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-sl__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 24px; } #rh-konfigurator-v2 .rhk2-sl__bub { opacity: 0; } #rh-konfigurator-v2 .rhk2-sl.is-drag .rhk2-sl__bub { opacity: 1; } #rh-konfigurator-v2 .rhk2-sl.is-lo:not(.is-drag) .rhk2-sl__bub--lo, #rh-konfigurator-v2 .rhk2-sl.is-hi:not(.is-drag) .rhk2-sl__bub--hi { opacity: 0; } /* Raumgröße */ #rh-konfigurator-v2 .rhk2-lbl2 { margin: 2px 0 8px !important; font-family: var(--a-disp); font-weight: 800; font-size: 15px !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-m2 { display: flex; flex-wrap: wrap; gap: 6px; } #rh-konfigurator-v2 .rhk2-m2__b { height: 38px; padding: 0 12px; border: 1.5px solid var(--a-line); background: #fff; color: var(--a-ink); font-family: var(--a-body); font-size: 14px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } #rh-konfigurator-v2 .rhk2-m2__b:hover { border-color: #9fb6cc; } #rh-konfigurator-v2 .rhk2-m2__b.on { border-color: var(--a-blue); background: var(--a-blue-5); color: var(--a-blue-9); box-shadow: inset 0 0 0 1px var(--a-blue); } /* Treffer */ #rh-konfigurator-v2 .rhk2-treffer { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--a-blue-1); border-radius: 12px; background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-treffer__ic { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--a-blue); color: #fff; font-weight: 800; } #rh-konfigurator-v2 .rhk2-treffer__ic svg { width: 18px; height: 18px; } #rh-konfigurator-v2 .rhk2-treffer b { display: block; font-family: var(--a-disp); font-weight: 800; font-size: 15px; color: var(--a-blue-9); } #rh-konfigurator-v2 .rhk2-treffer small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-treffer.is-leer { border-color: #f1d2ce; background: #fff7f6; } #rh-konfigurator-v2 .rhk2-treffer.is-leer .rhk2-treffer__ic { background: #b3261e; } #rh-konfigurator-v2 .rhk2-treffer.is-leer b { color: #93201a; } /* Schritt 5: Größen des Modells mit Foto */ #rh-konfigurator-v2 .rhk2-vars { display: grid; gap: 10px; } #rh-konfigurator-v2 .rhk2-var { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 8px 44px 8px 8px; border: 1.5px solid var(--a-line); border-radius: 12px; background: #fff; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } #rh-konfigurator-v2 .rhk2-var:hover { border-color: #9fb6cc; } #rh-konfigurator-v2 .rhk2-var.on { border-color: var(--a-blue); background: var(--a-blue-5); box-shadow: inset 0 0 0 1px var(--a-blue); } #rh-konfigurator-v2 .rhk2-var__img { display: block; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; background: #f4f7fa; } #rh-konfigurator-v2 .rhk2-var__img img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-var__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #rh-konfigurator-v2 .rhk2-var__m { font-family: var(--a-disp); font-weight: 800; font-size: 17px; line-height: 1.2; color: var(--a-ink); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-var__c { display: inline-flex; align-items: center; font-size: 13px; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-var__w { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13px; line-height: 1.4; color: #3d4956; } #rh-konfigurator-v2 .rhk2-var__w b { font-weight: 700; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-var__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 2px; font-family: var(--a-disp); font-weight: 800; font-size: 15px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-var__p small { font-family: var(--a-body); font-weight: 600; font-size: 12px; color: #136a18; } #rh-konfigurator-v2 .rhk2-var .rhk2-col__chk { top: 50%; right: 12px; transform: translateY(-50%); } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-vars { grid-template-columns: 1fr 1fr; } #rh-konfigurator-v2 .rhk2-var { grid-template-columns: 104px minmax(0, 1fr); } #rh-konfigurator-v2 .rhk2-var__img { width: 104px; height: 104px; } } @media (max-width: 400px) { #rh-konfigurator-v2 .rhk2-tab small { display: none; } #rh-konfigurator-v2 .rhk2-mess { grid-template-columns: 72px minmax(0, 1fr); } #rh-konfigurator-v2 .rhk2-mess__svg { width: 72px; } } /* ========================================================================================================== RUNDE 5 (11.09.2026, Enes): Header mit H1 + NEU, Vertrauen und Telefon, kompakte Schrittliste und Mitte, Kundenfotos unter jedem Schritt mit Bewertungs-Lightbox, Zubehör mit Fotos und Detail-Fenster, Lieferzeit grün mit Ankunft, Sonderpreis. ========================================================================================================== */ /* Header */ #rh-konfigurator-v2 .rhk2-top__h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; } #rh-konfigurator-v2 .rhk2-top__neu { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 6px; background: var(--a-blue-9); color: #fff; font-family: var(--a-body); font-size: 12px !important; font-weight: 800; letter-spacing: .08em; line-height: 1.2; vertical-align: 3px; } #rh-konfigurator-v2 .rhk2-top .rhk2-trust, #rh-konfigurator-v2 .rhk2-top__tel { display: none; } #rh-konfigurator-v2 .rhk2-trust { list-style: none; margin: 0; padding: 0; } #rh-konfigurator-v2 .rhk2-trust li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; color: #24303c; } #rh-konfigurator-v2 .rhk2-trust svg { width: 18px; height: 18px; color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-trust__rating svg { color: #f5a623; } #rh-konfigurator-v2 .rhk2-trustbar { background: #fff; border-bottom: 1px solid var(--a-line); overflow-x: auto; scrollbar-width: none; } #rh-konfigurator-v2 .rhk2-trustbar::-webkit-scrollbar { display: none; } #rh-konfigurator-v2 .rhk2-trust--bar { display: flex; justify-content: center; gap: 16px; min-width: max-content; padding: 7px 14px; } #rh-konfigurator-v2 .rhk2-trust--bar li { font-size: 12px; } #rh-konfigurator-v2 .rhk2-trust--bar svg { width: 15px; height: 15px; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-trustbar { display: none; } #rh-konfigurator-v2 .rhk2-top__h1 { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: flex; align-items: center; padding-left: 16px; border-left: 1px solid var(--a-line); font-family: var(--a-disp) !important; font-weight: 800 !important; font-size: 20px !important; line-height: 1.2 !important; letter-spacing: -.01em; color: var(--a-ink) !important; } #rh-konfigurator-v2 .rhk2-top__tel { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 6px 12px; border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } #rh-konfigurator-v2 .rhk2-top__tel svg { width: 20px; height: 20px; color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-top__tel span { display: flex; flex-direction: column; } #rh-konfigurator-v2 .rhk2-top__tel small { font-size: 12px; line-height: 1.2; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-top__tel b { font-family: var(--a-disp); font-weight: 800; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-top__tel:hover { border-color: var(--a-blue-2); background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-top__x { margin-left: 12px !important; } } @media (min-width: 1280px) { #rh-konfigurator-v2 .rhk2-top .rhk2-trust { display: flex; gap: 18px; margin-left: auto; } #rh-konfigurator-v2 .rhk2-top__tel { margin-left: 24px; } } /* Desktop kompakter: Schrittliste rechts und Mitte */ @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-rail { padding-top: 24px !important; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__i { padding-bottom: 14px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__i:not(:last-child)::after { left: 17px; top: 42px; bottom: 4px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__b { gap: 11px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__ic { flex-basis: 36px; width: 36px; height: 36px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__ic svg { width: 17px; height: 17px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__t small { font-size: 12px !important; line-height: 1.2; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__t b { font-size: 15px !important; line-height: 1.25; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__t em { font-size: 12px !important; } #rh-konfigurator-v2 .rhk2-card { padding-top: 16px; } #rh-konfigurator-v2 .rhk2-prog { margin: 12px 20px 24px; } #rh-konfigurator-v2 .rhk2-title { font-size: clamp(24px, 2vw, 28px) !important; } #rh-konfigurator-v2 .rhk2-sub { margin-bottom: 16px !important; font-size: 15px !important; } #rh-konfigurator-v2 .rhk2-tabs { margin-bottom: 10px; } #rh-konfigurator-v2 .rhk2-tab { padding: 8px 12px; } #rh-konfigurator-v2 .rhk2-mess { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 8px 12px 8px 8px; } #rh-konfigurator-v2 .rhk2-mess__svg { width: 60px; } #rh-konfigurator-v2 .rhk2-mess__t p { font-size: 13px !important; } #rh-konfigurator-v2 .rhk2-sl { padding-top: 8px; } #rh-konfigurator-v2 .rhk2-sl__row { padding-top: 16px; } #rh-konfigurator-v2 .rhk2-treffer { margin-top: 10px; padding: 10px 12px; } #rh-konfigurator-v2 .rhk2-act { margin-top: 18px; padding-top: 12px; padding-bottom: 14px; } } /* Kundenfotos unter dem Schritt */ #rh-konfigurator-v2 .rhk2-proof { margin: 14px 0 0; padding: 16px 12px 18px; background: #fff; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-proof__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; } #rh-konfigurator-v2 .rhk2-proof__score { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-proof__score b { font-family: var(--a-disp); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--a-ink); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-proof__score span { display: flex; flex-direction: column; gap: 3px; } #rh-konfigurator-v2 .rhk2-proof__score small { font-size: 12px; color: #5f6b77; white-space: nowrap; } #rh-konfigurator-v2 .rhk2-proof__h { margin: 0 !important; font-family: var(--a-disp) !important; font-weight: 800 !important; font-size: 17px !important; line-height: 1.2 !important; color: var(--a-ink) !important; } #rh-konfigurator-v2 .rhk2-proof__t p { margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.35 !important; color: var(--a-muted) !important; } #rh-konfigurator-v2 .rhk2-proof__nav { display: none; gap: 6px; } #rh-konfigurator-v2 .rhk2-proof__arr { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--a-line); border-radius: 50%; background: #fff; color: var(--a-ink); cursor: pointer; } #rh-konfigurator-v2 .rhk2-proof__arr svg { width: 18px; height: 18px; } #rh-konfigurator-v2 .rhk2-proof__arr:hover { border-color: var(--a-blue-2); background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-proof__rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } #rh-konfigurator-v2 .rhk2-proof__rail::-webkit-scrollbar { display: none; } #rh-konfigurator-v2 .rhk2-rv { flex: 0 0 148px; display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; } #rh-konfigurator-v2 .rhk2-rv__ph { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #eef2f6; cursor: zoom-in; } #rh-konfigurator-v2 .rhk2-rv__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 .rhk2-rv__ph.is-land img { object-fit: contain; } #rh-konfigurator-v2 .rhk2-rv__ph:hover img { transform: scale(1.04); } #rh-konfigurator-v2 .rhk2-rv__zoom { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-rv__zoom svg { width: 14px; height: 14px; } #rh-konfigurator-v2 .rhk2-rv__b { display: flex; flex-direction: column; gap: 4px; padding: 8px 2px 0; } #rh-konfigurator-v2 .rhk2-rv__q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-rv__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 !important; font-size: 12px !important; line-height: 1.3 !important; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-rv__who b { font-weight: 700; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-rv__ok { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: #136a18; } #rh-konfigurator-v2 .rhk2-rv__ok svg { width: 13px; height: 13px; } #rh-konfigurator-v2 .rhk2-proof__all { flex: 0 0 148px; align-self: flex-start; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--a-blue-2); border-radius: 12px; background: var(--a-blue-5); color: var(--a-blue-9); scroll-snap-align: start; cursor: pointer; } #rh-konfigurator-v2 .rhk2-proof__all b { font-family: var(--a-disp); font-weight: 800; font-size: 15px; } #rh-konfigurator-v2 .rhk2-proof__all span { font-size: 13px; } #rh-konfigurator-v2 :is(.rhk2-rv__ph, .rhk2-proof__all, .rhk2-proof__arr, .rhk2-zb__img, .rhk2-zb__pick, .rhk2-zb__more, .rhk2-zbm__img):focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } @media (min-width: 768px) { #rh-konfigurator-v2 .rhk2-proof__head { grid-template-columns: auto minmax(0, 1fr) auto; } #rh-konfigurator-v2 .rhk2-proof__nav { display: flex; } #rh-konfigurator-v2 .rhk2-rv, #rh-konfigurator-v2 .rhk2-proof__all { flex-basis: 172px; } } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-proof { margin-top: 16px; padding: 20px 22px 22px; border: 1px solid var(--a-line); border-radius: 24px; } } /* Bewertungs-Lightbox: Foto links, Bewertung rechts (mobil darunter) */ #rh-konfigurator-v2 .rhk2-lb__body { flex: 1 1 auto; min-height: 0; display: flex; } #rh-konfigurator-v2 .rhk2-lb__body > .rhk2-lb__stage { flex: 1 1 auto; min-width: 0; } #rh-konfigurator-v2 .rhk2-lb__rev { flex: 0 0 340px; align-self: center; max-height: 100%; overflow: auto; margin: 0 24px 0 0; padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; } #rh-konfigurator-v2 .rhk2-lb__rev .stars i { width: 16px; height: 16px; } #rh-konfigurator-v2 .rhk2-lb__rt { display: block; margin-top: 10px; font-family: var(--a-disp); font-weight: 800; font-size: 17px; line-height: 1.3; } #rh-konfigurator-v2 .rhk2-lb__rx { margin: 8px 0 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: rgba(255,255,255,.9) !important; } #rh-konfigurator-v2 .rhk2-lb__rw { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 !important; font-size: 14px !important; color: rgba(255,255,255,.72) !important; } #rh-konfigurator-v2 .rhk2-lb__rw b { color: #fff; } #rh-konfigurator-v2 .rhk2-lb__ok { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0 !important; padding: 5px 10px; border-radius: 8px; background: rgba(126,226,168,.14); color: #9ff0bf !important; font-size: 13px !important; font-weight: 700; } #rh-konfigurator-v2 .rhk2-lb__ok svg { width: 16px; height: 16px; } #rh-konfigurator-v2 .rhk2-lb__rp { margin: 10px 0 0 !important; font-size: 13px !important; color: rgba(255,255,255,.72) !important; } #rh-konfigurator-v2 .rhk2-lb__hint { margin: 14px 0 0 !important; font-size: 12px !important; color: rgba(255,255,255,.5) !important; } @media (max-width: 1023.98px) { #rh-konfigurator-v2 .rhk2-lb.has-rev .rhk2-lb__body { flex-direction: column; } #rh-konfigurator-v2 .rhk2-lb__rev { flex: 0 0 auto; align-self: stretch; max-height: 34vh; margin: 8px 10px 0; padding: 12px 14px; } #rh-konfigurator-v2 .rhk2-lb.has-rev .rhk2-lb__img { max-height: calc(100vh - 176px - 34vh); max-height: calc(100dvh - 176px - 34vh); } #rh-konfigurator-v2 .rhk2-lb__hint { display: none; } } /* Zubehör-Zeilen mit großem Foto */ #rh-konfigurator-v2 .rhk2-acc { display: grid; gap: 10px; } #rh-konfigurator-v2 .rhk2-zb { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "img pick" "img more"; gap: 2px 12px; align-items: center; padding: 8px 10px 8px 8px; border: 1.5px solid var(--a-line); border-radius: 12px; background: #fff; transition: border-color .15s ease; } #rh-konfigurator-v2 .rhk2-zb:hover { border-color: #9fb6cc; } #rh-konfigurator-v2 .rhk2-zb.on { border-color: var(--a-blue); background: var(--a-blue-5); box-shadow: inset 0 0 0 1px var(--a-blue); } #rh-konfigurator-v2 .rhk2-zb__img { grid-area: img; position: relative; display: block; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #f4f7fa; cursor: zoom-in; } #rh-konfigurator-v2 .rhk2-zb__img img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-zb__zoom { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--a-ink); box-shadow: 0 2px 6px rgba(7,42,70,.2); } #rh-konfigurator-v2 .rhk2-zb__zoom svg { width: 12px; height: 12px; } #rh-konfigurator-v2 .rhk2-zb__pick { grid-area: pick; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; width: 100%; padding: 2px 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; } #rh-konfigurator-v2 .rhk2-zb__t { min-width: 0; } #rh-konfigurator-v2 .rhk2-zb__t b { display: block; font-family: var(--a-disp); font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-zb__t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-zb__p { font-family: var(--a-disp); font-weight: 800; font-size: 14px; color: var(--a-blue); white-space: nowrap; } #rh-konfigurator-v2 .rhk2-zb .rhk2-col__chk { position: static !important; transform: none !important; } #rh-konfigurator-v2 .rhk2-zb__more { grid-area: more; justify-self: start; padding: 2px 0; border: 0; background: none; font-family: var(--a-body); font-size: 13px !important; font-weight: 700; color: var(--a-blue); text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-zb { grid-template-columns: 88px minmax(0, 1fr); } #rh-konfigurator-v2 .rhk2-zb__img { width: 88px; height: 88px; } } /* Detail-Fenster Zubehör */ #rh-konfigurator-v2 .rhk2-zbm__img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; margin: 6px 0 12px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #f4f7fa; cursor: zoom-in; } #rh-konfigurator-v2 .rhk2-zbm__img img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-zbm__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; } #rh-konfigurator-v2 .rhk2-zbm__p { font-family: var(--a-disp); font-weight: 800; font-size: 20px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-zbm__kurz { font-size: 14px; line-height: 1.5; color: #3d4956; } #rh-konfigurator-v2 .rhk2-zbm__kurz :is(ul, ol) { margin: 6px 0; padding-left: 18px; } #rh-konfigurator-v2 .rhk2-zbm__kurz p { margin: 0 0 6px !important; } #rh-konfigurator-v2 .rhk2-zbm__text { margin-top: 12px; border-top: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-zbm__text summary { padding: 12px 0 4px; font-family: var(--a-disp); font-weight: 800; font-size: 14px; color: var(--a-blue-9); cursor: pointer; } #rh-konfigurator-v2 .rhk2-zbm__text div { font-size: 14px; line-height: 1.55; color: #3d4956; } #rh-konfigurator-v2 .rhk2-zbm__text div :is(ul, ol) { padding-left: 18px; } #rh-konfigurator-v2 .rhk2-zbm__text h4 { margin: 12px 0 4px !important; font-size: 14px !important; font-weight: 800 !important; color: var(--a-ink) !important; } #rh-konfigurator-v2 .rhk2-zbm__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } #rh-konfigurator-v2 .rhk2-zbm__wahl { min-width: 0 !important; min-height: 44px; margin: 0; } #rh-konfigurator-v2 .rhk2-zbm__wahl::after { display: none; } #rh-konfigurator-v2 .rhk2-zbm__ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #136a18; } #rh-konfigurator-v2 .rhk2-zbm__ok svg { width: 18px; height: 18px; } /* Lieferzeit grün mit Ankunft, Sonderpreis */ #rh-konfigurator-v2 .rhk2-lz { display: inline-flex; align-items: flex-start; gap: 7px; margin-top: 4px; color: #136a18; } #rh-konfigurator-v2 .rhk2-lz svg { width: 17px; height: 17px; margin-top: 1px; } #rh-konfigurator-v2 .rhk2-lz span { display: flex; flex-direction: column; } #rh-konfigurator-v2 .rhk2-lz b { font-family: var(--a-body); font-weight: 700; font-size: 13px; line-height: 1.3; } #rh-konfigurator-v2 .rhk2-lz small { font-size: 12px; line-height: 1.3; color: #1f6b33; } #rh-konfigurator-v2 .rhk2-alt { margin-right: 6px; font-family: var(--a-body); font-weight: 500; font-size: 13px; color: #6b7684; } #rh-konfigurator-v2 .rhk2-sale { color: #b3261e; } #rh-konfigurator-v2 .rhk2-sale__b { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #fdecea; color: #b3261e; font-family: var(--a-body); font-style: normal; font-weight: 700; font-size: 12px; vertical-align: 2px; } #rh-konfigurator-v2 .rhk2-pc__row + .rhk2-lz { margin-top: 8px; } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 .rhk2-rv__ph img { transition: none; } } /* Feinschliff Runde 5: Sterne im Bewertungskopf nebeneinander, Kopf am Handy kompakt, Vertrauensleiste passt auf 390 px, Lieferzeit in den Größenkarten ohne Umbruch */ #rh-konfigurator-v2 .rhk2-proof__score span.stars { display: inline-flex; flex-direction: row; gap: 2px; } #rh-konfigurator-v2 .rhk2-trust--bar { justify-content: flex-start; gap: 14px; margin: 0 auto; padding: 7px 12px; } #rh-konfigurator-v2 .rhk2-trust--bar li { gap: 5px; font-size: 12px; } #rh-konfigurator-v2 .rhk2-var .rhk2-lz b, #rh-konfigurator-v2 .rhk2-var .rhk2-lz small { white-space: nowrap; } #rh-konfigurator-v2 .rhk2-var .rhk2-lz small { font-size: 12px; } @media (max-width: 767.98px) { #rh-konfigurator-v2 .rhk2-proof__head { gap: 10px; } #rh-konfigurator-v2 .rhk2-proof__score { gap: 8px; padding: 6px 10px; } #rh-konfigurator-v2 .rhk2-proof__score b { font-size: 22px; } #rh-konfigurator-v2 .rhk2-proof__h { font-size: 15px !important; } #rh-konfigurator-v2 .rhk2-proof__t p { font-size: 12px !important; } } /* Ankunftsdatum darf in schmalen Karten umbrechen, sonst wird es abgeschnitten */ #rh-konfigurator-v2 .rhk2-var .rhk2-lz small { white-space: normal; } #rh-konfigurator-v2 .rhk2-var__b { overflow: hidden; } /* ========================================================================================================== RUNDE 6 (11.09.2026, Enes): gleitende Übergänge, Desktop ohne doppelten Balken und Zähler in der Mitte, Zurück in der Leiste, Schritt 1 kompakter, Handy mit festem Schrittzähler, Modell-Vorteile, Betrieb & Zubehör in nummerierten Gruppen mit Auswahlkarten, Befüllservice. ========================================================================================================== */ /* Überschrift modern und kompakt: linksbündig */ #rh-konfigurator-v2 .rhk2-title { text-align: left; max-width: none; margin-left: 0 !important; margin-right: 0 !important; } #rh-konfigurator-v2 .rhk2-sub { text-align: left; max-width: 62ch; margin-left: 0 !important; margin-right: 0 !important; } /* Grundregel VOR dem Desktop-Block, sonst schlägt sie ihn (gleiche Spezifität) */ #rh-konfigurator-v2 .rhk2-act__back { display: none; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-head, #rh-konfigurator-v2 .rhk2-prog { display: none !important; } #rh-konfigurator-v2 .rhk2-card { padding-top: 26px; } #rh-konfigurator-v2 .rhk2-title { margin-top: 0 !important; font-size: 26px !important; } #rh-konfigurator-v2 .rhk2-sub { margin-bottom: 18px !important; font-size: 15px !important; } #rh-konfigurator-v2 .rhk2-q { margin-top: 0 !important; } #rh-konfigurator-v2 .rhk2-room__b { padding: 10px 12px 12px; } #rh-konfigurator-v2 .rhk2-act__back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; margin-left: auto; padding: 0 18px; border: 1px solid var(--a-line); border-radius: 8px; background: #fff; color: var(--a-ink); font-family: var(--a-disp); font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; } #rh-konfigurator-v2 .rhk2-act__back::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; } #rh-konfigurator-v2 .rhk2-act__back:hover { border-color: var(--a-blue-2); background: var(--a-blue-5); } #rh-konfigurator-v2 .rhk2-act__back + .rhk2-act__next { margin-left: 10px; } #rh-konfigurator-v2 .rhk2-act__back[hidden] + .rhk2-act__next { margin-left: auto; } #rh-konfigurator-v2 .rhk2-rv, #rh-konfigurator-v2 .rhk2-proof__all { flex-basis: 148px; } } #rh-konfigurator-v2 .rhk2-act__back:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } @media (max-width: 1023.98px) { #rh-konfigurator-v2 .rhk2-act__back { display: none !important; } /* Handy: Kopf mit Schrittzähler immer oben sichtbar */ #rh-konfigurator-v2.rhk2-app { padding-top: var(--a-top) !important; } #rh-konfigurator-v2 .rhk2-top { position: fixed; top: 0; left: 0; right: 0; } #rh-konfigurator-v2 .rhk2-title { font-size: 20px !important; margin-top: 14px !important; } } /* Modell-Vorteile */ #rh-konfigurator-v2 .rhk2-mod__vt { display: grid; gap: 3px; list-style: none; margin: 8px 0 0; padding: 0; } #rh-konfigurator-v2 .rhk2-mod__vt li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--a-blue-9); } #rh-konfigurator-v2 .rhk2-mod__vt svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--a-blue); color: #fff; stroke-width: 3; } @media (max-width: 1023.98px) { #rh-konfigurator-v2 .rhk2-mod__vt li:nth-child(n+3) { display: none; } #rh-konfigurator-v2 .rhk2-mod__vt li { font-size: 12px; } } /* Betrieb & Zubehör: Gruppen */ #rh-konfigurator-v2 .rhk2-grp { margin: 0 0 22px; padding: 4px; border-radius: 14px; transition: background-color .6s ease; } #rh-konfigurator-v2 .rhk2-grp__h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } #rh-konfigurator-v2 .rhk2-grp__n { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a-blue-9); color: #fff; font-family: var(--a-disp); font-weight: 800; font-size: 13px; } #rh-konfigurator-v2 .rhk2-grp__tt { display: flex; flex-direction: column; min-width: 0; } #rh-konfigurator-v2 .rhk2-grp__tt b { font-family: var(--a-disp); font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-grp__tt small { font-size: 13px; line-height: 1.3; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-grp__ok { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 12px 14px; border-radius: 12px; background: var(--a-blue-5); font-size: 14px !important; font-weight: 600; color: var(--a-blue-9); } #rh-konfigurator-v2 .rhk2-grp__ok svg { width: 20px; height: 20px; color: var(--a-blue); } /* Betriebsart */ #rh-konfigurator-v2 .rhk2-bw { display: grid; gap: 8px; } #rh-konfigurator-v2 .rhk2-bw__c { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 1.5px solid var(--a-line); border-radius: 12px; background: #fff; text-align: left; color: inherit; font: inherit; cursor: pointer; } #rh-konfigurator-v2 .rhk2-bw__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f3f6fa; } #rh-konfigurator-v2 .rhk2-bw__ic svg { width: 22px; height: 22px; } #rh-konfigurator-v2 .rhk2-bw__c--zentral .rhk2-bw__ic { color: #1668a8; } #rh-konfigurator-v2 .rhk2-bw__c--elektrisch .rhk2-bw__ic { color: #b7791f; } #rh-konfigurator-v2 .rhk2-bw__c--misch .rhk2-bw__ic { color: #1a7f37; } #rh-konfigurator-v2 .rhk2-bw__t b { display: block; font-family: var(--a-disp); font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-bw__t small { display: block; font-size: 13px; line-height: 1.3; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-bw__c:hover:not(:disabled) { border-color: #9fb6cc; } #rh-konfigurator-v2 .rhk2-bw__c.on { border-color: var(--a-blue); background: var(--a-blue-5); box-shadow: inset 0 0 0 1px var(--a-blue); } #rh-konfigurator-v2 .rhk2-bw__c.off { cursor: not-allowed; opacity: .6; background: #f7f9fb; } #rh-konfigurator-v2 .rhk2-vn { margin-top: 8px; } #rh-konfigurator-v2 .rhk2-vn summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--a-blue); cursor: pointer; list-style: none; } #rh-konfigurator-v2 .rhk2-vn summary::-webkit-details-marker { display: none; } #rh-konfigurator-v2 .rhk2-vn summary::after { content: "+"; font-weight: 800; } #rh-konfigurator-v2 .rhk2-vn[open] summary::after { content: "−"; } #rh-konfigurator-v2 .rhk2-vn__in { display: grid; gap: 6px; padding: 8px 2px 2px; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-bw { grid-template-columns: repeat(3, minmax(0, 1fr)); } #rh-konfigurator-v2 .rhk2-bw__c { grid-template-columns: 1fr 22px; grid-template-areas: "ic radio" "t t"; gap: 8px; padding: 12px; align-items: start; } #rh-konfigurator-v2 .rhk2-bw__ic { grid-area: ic; } #rh-konfigurator-v2 .rhk2-bw__t { grid-area: t; } #rh-konfigurator-v2 .rhk2-bw__c .rhk2-ch__radio { grid-area: radio; } } /* Auswahlkarten (Ventil, Heizstab, Befüllung) */ #rh-konfigurator-v2 .rhk2-chs { display: grid; gap: 8px; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-chs { grid-template-columns: 1fr 1fr; } } #rh-konfigurator-v2 .rhk2-ch { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--a-line); border-radius: 12px; background: #fff; overflow: hidden; } #rh-konfigurator-v2 .rhk2-ch:hover { border-color: #9fb6cc; } #rh-konfigurator-v2 .rhk2-ch.on { border-color: var(--a-blue); background: var(--a-blue-5); box-shadow: inset 0 0 0 1px var(--a-blue); } #rh-konfigurator-v2 .rhk2-ch__pick { display: grid; grid-template-columns: 72px minmax(0, 1fr) 22px; gap: 12px; align-items: start; width: 100%; padding: 10px 12px 6px 10px; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; } #rh-konfigurator-v2 .rhk2-ch__img { display: block; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #f4f7fa; } #rh-konfigurator-v2 .rhk2-ch__img img { display: block; width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-ch__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #rh-konfigurator-v2 .rhk2-ch__t b { font-family: var(--a-disp); font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-ch__t small { font-size: 13px; line-height: 1.35; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-ch__p { margin-top: 3px; font-family: var(--a-disp); font-weight: 800; font-size: 14px; color: var(--a-blue-9); font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-ch__badge { align-self: flex-start; margin-bottom: 2px; padding: 2px 7px; border-radius: 6px; background: var(--a-blue-9); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .04em; } #rh-konfigurator-v2 .rhk2-ch__radio { display: block; width: 22px; height: 22px; border: 2px solid #c3ced9; border-radius: 50%; background: #fff; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; } #rh-konfigurator-v2 :is(.rhk2-ch.on, .rhk2-bw__c.on, .rhk2-ohne.on) .rhk2-ch__radio { border-color: var(--a-blue); background: var(--a-blue); box-shadow: inset 0 0 0 4px #fff; } #rh-konfigurator-v2 .rhk2-ch__links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 12px 9px 94px; } #rh-konfigurator-v2 .rhk2-ch__l { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; font-family: var(--a-body); font-size: 13px !important; font-weight: 700; color: var(--a-blue); letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } #rh-konfigurator-v2 .rhk2-ch__l svg { width: 14px; height: 14px; } #rh-konfigurator-v2 .rhk2-ch__l:hover { text-decoration: underline; text-underline-offset: 2px; } #rh-konfigurator-v2 .rhk2-ohne { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px 6px 6px; border: 0; border-radius: 8px; background: none; font-family: var(--a-body); font-size: 13px !important; font-weight: 600; color: #3d4956; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } #rh-konfigurator-v2 .rhk2-ohne .rhk2-ch__radio { width: 18px; height: 18px; } #rh-konfigurator-v2 .rhk2-ohne:hover { background: #f3f6fa; } #rh-konfigurator-v2 :is(.rhk2-bw__c, .rhk2-ch__pick, .rhk2-ch__l, .rhk2-ohne, .rhk2-vn summary):focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } /* Gleitende Übergänge */ #rh-konfigurator-v2 :is(.rhk2-room, .rhk2-col, .rhk2-mod, .rhk2-var, .rhk2-ch, .rhk2-bw__c, .rhk2-m2__b, .rhk2-tab, .rhk2-zb) { transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; } #rh-konfigurator-v2 :is(.rhk2-room, .rhk2-col, .rhk2-mod__pick, .rhk2-var, .rhk2-ch__pick, .rhk2-bw__c:not(:disabled), .rhk2-m2__b, .rhk2-tab):active { transform: scale(.985); } #rh-konfigurator-v2 .rhk2-col__chk { transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); } #rh-konfigurator-v2 :is(.rhk2-room, .rhk2-col, .rhk2-var).is-an .rhk2-col__chk { animation: rhk2Pop2 .45s cubic-bezier(.2,.7,.2,1); } @keyframes rhk2Pop2 { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .rhk2-var .rhk2-col__chk { animation: none; } @keyframes rhk2In { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } #rh-konfigurator-v2 .rhk2-title.is-enter { animation: rhk2In .6s cubic-bezier(.2,.7,.2,1) both; } #rh-konfigurator-v2 .rhk2-sub.is-enter { animation: rhk2In .6s cubic-bezier(.2,.7,.2,1) .06s both; } #rh-konfigurator-v2 .rhk2__steps.is-enter { animation: rhk2In .7s cubic-bezier(.2,.7,.2,1) .12s both; } @keyframes rhk2Hint { 0% { background-color: rgba(242,248,253,0); } 25% { background-color: var(--a-blue-5); } 100% { background-color: rgba(242,248,253,0); } } #rh-konfigurator-v2 .rhk2-grp.is-hint { animation: rhk2Hint 1.6s ease; } @keyframes rhk2Puls { 0%, 100% { box-shadow: 0 12px 24px -14px rgba(17,107,176,.95); transform: none; } 45% { box-shadow: 0 0 0 7px rgba(17,107,176,.22), 0 12px 24px -14px rgba(17,107,176,.95); transform: translateY(-1px) scale(1.03); } } #rh-konfigurator-v2 .rhk2-act__next.is-pulse { animation: rhk2Puls 1.1s ease 2; } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 :is(.is-enter, .is-hint, .is-pulse, .is-an, .is-aus, .rhk2-col__chk, .rhk2-ch__radio, .rhk2__modal-box) { animation: none !important; } #rh-konfigurator-v2 :is(.rhk2__modal, .rhk2-sheet, .rhk2-lb) { transition: none !important; } #rh-konfigurator-v2 :is(.rhk2-room, .rhk2-col, .rhk2-mod, .rhk2-var, .rhk2-ch, .rhk2-bw__c, .rhk2-m2__b, .rhk2-tab, .rhk2-zb, .rhk2-grp) { transition: none !important; } } /* Runde 6 Nachschliff: Karte nicht auf Fensterhöhe strecken (Leerraum in Schritt 1, Kundenfotos rutschen ins Bild), Trennstrich vor dem Preis nur, wenn links noch der Zähler steht. Gruppenkopf ist ein div (Shop stylt
). */ @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-card { min-height: 0; } } #rh-konfigurator-v2 #rhk2-count[hidden] + .rhk2__total { padding-left: 0; border-left: 0; } /* ========================================================================================================== ÜBERGÄNGE NACH MUSTER (11.09.2026): Kontext (Gerüst bleibt, Karten gleiten), Drill (seitlich in Laufrichtung), Aufklappen (Fläche wächst aus Karte oder Knopf), Vorschaubild → Lightbox, Modellbild fliegt zu „Ihr Heizkörper“. Die Bewegung steuert berater2.js (ani, mkPlay, drillSpiel, flaeche, lbFlug, flug); hier stehen nur die Zustände. ========================================================================================================== */ #rh-konfigurator-v2 .rhk2-teil { display: contents; } #rh-konfigurator-v2 .rhk2-card.is-drill { overflow: clip; } #rh-konfigurator-v2 .rhk2-geist { z-index: 1; } #rh-konfigurator-v2 .rhk2-flaeche { position: fixed; z-index: 0; margin: 0; pointer-events: none; box-shadow: 0 30px 70px -34px rgba(4,25,42,.5); } #rh-konfigurator-v2 .rhk2-sheet__box, #rh-konfigurator-v2 .rhk2__modal-box { z-index: 1; } #rh-konfigurator-v2 .rhk2-sheet.is-expand { opacity: 1; transition: background-color .45s ease; } #rh-konfigurator-v2 .rhk2-sheet.is-expand:not(.is-on) { background-color: rgba(4,25,42,0); -webkit-backdrop-filter: none; backdrop-filter: none; } #rh-konfigurator-v2 .rhk2-sheet.is-expand .rhk2-sheet__box { transform: none; transition: none; } #rh-konfigurator-v2 .rhk2__modal { transition: background-color .45s ease; } #rh-konfigurator-v2 .rhk2__modal.is-leer { background-color: rgba(4,25,42,0); } #rh-konfigurator-v2 .rhk2__modal.is-weich .rhk2__modal-box { animation: rhk2In .46s cubic-bezier(.2,.8,.2,1) both; } #rh-konfigurator-v2 .rhk2-lb.is-flip { opacity: 1; transition: background-color .45s ease; } #rh-konfigurator-v2 .rhk2-lb.is-flip:not(.is-on) { background-color: rgba(4,17,30,0); -webkit-backdrop-filter: none; backdrop-filter: none; } #rh-konfigurator-v2 .rhk2-lb.is-flip :is(.rhk2-lb__top, .rhk2-lb__thumbs, .rhk2-lb__nav, .rhk2-lb__rev) { transition: opacity .35s ease .12s; } #rh-konfigurator-v2 .rhk2-lb.is-flip:not(.is-on) :is(.rhk2-lb__top, .rhk2-lb__thumbs, .rhk2-lb__nav, .rhk2-lb__rev) { opacity: 0; transition-delay: 0s; } #rh-konfigurator-v2 .rhk2-flug { position: fixed; z-index: 95; margin: 0; pointer-events: none; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 26px 50px -26px rgba(4,25,42,.55); } @keyframes rhk2An { from { background-color: #fff; border-color: var(--a-line); box-shadow: none; } } @keyframes rhk2Aus { from { background-color: var(--a-blue-5); border-color: var(--a-blue); } } @keyframes rhk2Radio { from { box-shadow: inset 0 0 0 11px #fff; border-color: #c3ced9; background-color: #fff; } } #rh-konfigurator-v2 :is(.rhk2-ch, .rhk2-bw__c, .rhk2-tab, .rhk2-var, .rhk2-mod, .rhk2-room, .rhk2-col).is-an { animation: rhk2An .55s cubic-bezier(.2,.8,.2,1); } #rh-konfigurator-v2 :is(.rhk2-tab, .rhk2-bw__c, .rhk2-ch).is-aus { animation: rhk2Aus .45s ease; } #rh-konfigurator-v2 .is-an .rhk2-ch__radio, #rh-konfigurator-v2 .rhk2-ohne.is-an .rhk2-ch__radio { animation: rhk2Radio .45s cubic-bezier(.2,.8,.2,1); } /* ========================================================================================================== SCHRIFT-HARMONIE (11.09.2026). Gemessen vorher: Desktop 20 Größen, Handy 22; Knöpfe, „Ihre Auswahl“, Fragen-Kopf und Abzeichen in IBM Plex 800 statt Manrope (Shop-Modul 42 setzt button/small). Jetzt eine Skala mit 8 Stufen: 12 · 13 · 14 · 15 · 17 · 20 · 22 · 26 px (alle Werte oben sind darauf gerundet). Manrope: Titel, Abschnitte, Optionsnamen, Preise, Zahlen, Knöpfe, Abzeichen. IBM Plex Sans: Text, Beschreibungen, Beschriftungen, Produkttitel (600 wie in den Shop-Listen). ========================================================================================================== */ html body #rh-konfigurator-v2 :is(.rhk2-title, .rhk2-top__h1, .rhk2-sheet__h, .rhk2__modal-in h3, .rhk2-q, .rhk2-grp__tt b, .rhk2-done__h, .rhk2-proof__h, .rhk2-sum__h, .rhk2-lbl, .rhk2-lbl2, .rhk2-room__b b, .rhk2-col__t b, .rhk2-ch__t b, .rhk2-bw__t b, .rhk2-tab b, .rhk2-var__m, .rhk2-mod__p, .rhk2-col__p, .rhk2-ch__p, .rhk2-pc__price, .rhk2-zbm__p, .rhk2-sum__cnt b, .rhk2-sum__tot b, .rhk2-proof__score b, .rhk2__count b, .rhk2__total b, .rhk2-act__sum-v, .rhk2-top__telnr, .rhk2-proof__all b, .rhk2-top__neu, .rhk2-ch__badge, .rhk2-sale__b, .rhk2-room__b em, .rhk2-faq__h, .rhk2-pill, .rhk2-sizes__h b) { font-family: var(--a-disp) !important; font-weight: 800 !important; } html body #rh-konfigurator-v2 :is(.rhk2-act__next, .rhk2-act__back, .rhk2-sbtn, .rhk2__btn, .btn-ghost, .rhk2-faq__more, .rhk2-m2__b, .rhk2-vs__t b, .rhk2-faq__q, .rhk2-chip__k, .rhk2-mehr) { font-family: var(--a-disp) !important; font-weight: 700 !important; } html body #rh-konfigurator-v2 :is(.rhk2-sub, .rhk2-mod__n, .rhk2-pc__n, .rhk2-done__n, .rhk2-room__b small, .rhk2-ch__t small, .rhk2-bw__t small, .rhk2-tab small, .rhk2-grp__tt small, .rhk2-note, .rhk2-mod__meta, .rhk2-faq__a, .rhk2-sum__l dt, .rhk2-sum__l dd, .rhk2-sum__pos li, .rhk2-sum__tot span, .rhk2-sum__cnt, .rhk2-ch__l, .rhk2-sum__go, .rhk2-sum__reset, .rhk2-vs__t small, .rhk2-vs__t em, .rhk2-col__ral, .rhk2-sl__end, .rhk2-rv__q, .rhk2-lz, .rhk2-trust li, .rhk2-mod__vt li, .rhk2-pc__meta, .rhk2-act__sum-l, .rhk2__count small, .rhk2__total small, .rhk2-top__tel small, .rhk2-proof__score small, .rhk2-zbm__kurz, .rhk2-zbm__kurz b, .rhk2-zbm__kurz strong) { font-family: var(--a-body) !important; } html body #rh-konfigurator-v2 .rhk2-title { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -.015em !important; } html body #rh-konfigurator-v2 .rhk2-top__h1 { font-size: 20px !important; } html body #rh-konfigurator-v2 :is(.rhk2-sheet__h, .rhk2-sum__tot b, .rhk2-proof__score b) { font-size: 22px !important; line-height: 1.2 !important; } html body #rh-konfigurator-v2 :is(.rhk2__modal-in h3, .rhk2-pc__price, .rhk2-zbm__p, .rhk2-sum__cnt b) { font-size: 20px !important; line-height: 1.2 !important; } html body #rh-konfigurator-v2 :is(.rhk2-q, .rhk2-grp__tt b, .rhk2-done__h, .rhk2-proof__h, .rhk2-sum__h, .rhk2-var__m, .rhk2__count b, .rhk2__total b, .rhk2-done__n) { font-size: 17px !important; line-height: 1.3 !important; } html body #rh-konfigurator-v2 :is(.rhk2-lbl, .rhk2-lbl2, .rhk2-room__b b, .rhk2-col__t b, .rhk2-ch__t b, .rhk2-bw__t b, .rhk2-tab b, .rhk2-mod__n, .rhk2-pc__n, .rhk2-mod__p, .rhk2-col__p, .rhk2-ch__p, .rhk2-act__sum-v, .rhk2-top__telnr, .rhk2-proof__all b, .rhk2-act__next, .rhk2-act__back, .rhk2-sbtn, .rhk2__btn, .btn-ghost, .rhk2-faq__more, .rhk2-vs__t b, .rhk2-faq__q, .rhk2-sub) { font-size: 15px !important; } html body #rh-konfigurator-v2 :is(.rhk2-faq__a, .rhk2-sum__l dd, .rhk2-pc__meta, .rhk2-m2__b, .rhk2-pill) { font-size: 14px !important; } html body #rh-konfigurator-v2 :is(.rhk2-room__b small, .rhk2-ch__t small, .rhk2-bw__t small, .rhk2-tab small, .rhk2-grp__tt small, .rhk2-note, .rhk2-mod__meta, .rhk2-sum__l dt, .rhk2-sum__pos li, .rhk2-sum__tot span, .rhk2-sum__cnt, .rhk2-ch__l, .rhk2-sum__go, .rhk2-sum__reset, .rhk2-rv__q, .rhk2-lz b, .rhk2-trust li, .rhk2-mod__vt li) { font-size: 13px !important; } html body #rh-konfigurator-v2 :is(.rhk2-vs__t small, .rhk2-vs__t em, .rhk2-col__ral, .rhk2-sl__end, .rhk2-lz small, .rhk2-act__sum-l, .rhk2__count small, .rhk2__total small, .rhk2-top__tel small, .rhk2-proof__score small, .rhk2-top__neu, .rhk2-ch__badge, .rhk2-sale__b, .rhk2-room__b em, .rhk2-faq__h, .rhk2-chip__k, .rhk2-rv__ok) { font-size: 12px !important; } html body #rh-konfigurator-v2 :is(.rhk2-room__b b, .rhk2-col__t b, .rhk2-ch__t b, .rhk2-bw__t b, .rhk2-tab b, .rhk2-mod__n, .rhk2-pc__n, .rhk2-faq__q, .rhk2-vs__t b) { line-height: 1.25 !important; } html body #rh-konfigurator-v2 :is(.rhk2-sub, .rhk2-room__b small, .rhk2-ch__t small, .rhk2-bw__t small, .rhk2-tab small, .rhk2-grp__tt small, .rhk2-note, .rhk2-faq__a, .rhk2-rv__q, .rhk2-sum__pos li) { font-weight: 400 !important; line-height: 1.45 !important; } html body #rh-konfigurator-v2 :is(.rhk2-mod__n, .rhk2-pc__n, .rhk2-done__n, .rhk2-sum__l dd, .rhk2-mod__meta, .rhk2-mod__vt li, .rhk2-trust li, .rhk2-vs__t em, .rhk2-col__ral, .rhk2-zbm__kurz b, .rhk2-zbm__kurz strong) { font-weight: 600 !important; } html body #rh-konfigurator-v2 :is(.rhk2-ch__l, .rhk2-sum__go, .rhk2-sum__reset, .rhk2-lz b, .rhk2-rv__ok) { font-weight: 700 !important; } html body #rh-konfigurator-v2 :is(.rhk2-sum__l dt, .rhk2-vs__t small, .rhk2-sl__end, .rhk2-act__sum-l) { font-weight: 500 !important; } @media (max-width: 1023.98px) { html body #rh-konfigurator-v2 .rhk2-title { font-size: 22px !important; } html body #rh-konfigurator-v2 .rhk2-card p.rhk2-sub { font-size: 14px !important; } html body #rh-konfigurator-v2 :is(.rhk2-trust--bar li, .rhk2-mod__vt li) { font-size: 12px !important; } } /* Nachmessung 0.26.0: Bewertungsblock (Stile aus berater.css), Artikeltexte im Detailfenster, Statuszeilen */ html body #rh-konfigurator-v2 :is(.rev__score b, .rhk2-done__tot b) { font-family: var(--a-disp) !important; font-weight: 800 !important; font-size: 22px !important; line-height: 1.1 !important; } html body #rh-konfigurator-v2 :is(.rev__score small, .rev__score span:not(.stars)) { font-family: var(--a-body) !important; font-size: 12px !important; } html body #rh-konfigurator-v2 .rv__who b { font-family: var(--a-body) !important; font-size: 13px !important; font-weight: 700 !important; } html body #rh-konfigurator-v2 :is(.rhk2-zbm__text, .rhk2-zbm__text p, .rhk2-zbm__text li, .rhk2-zbm__kurz, .rhk2-zbm__kurz p, .rhk2-zbm__kurz li) { font-family: var(--a-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; } html body #rh-konfigurator-v2 :is(.rhk2-zbm__text, .rhk2-zbm__kurz) :is(b, strong) { font-family: var(--a-body) !important; font-weight: 600 !important; } html body #rh-konfigurator-v2 .rhk2-zbm__text :is(h2, h3, h4, h5) { font-family: var(--a-disp) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 14px 0 6px !important; } html body #rh-konfigurator-v2 .rhk2-zbm__text summary { font-family: var(--a-disp) !important; font-size: 14px !important; font-weight: 700 !important; } html body #rh-konfigurator-v2 :is(.rhk2-zbm__ok, .rhk2-top__back) { font-family: var(--a-disp) !important; font-size: 15px !important; font-weight: 700 !important; } /* ========================================================================================================== HANDY: SCHRITTE KOMPAKT IN DER KOPFZEILE (11.09.2026, Enes: „mobile die Schritte kompakt sehen“). Zweite feste Zeile unter Zurück/X: erledigt = blauer Haken (antippbar), aktuell = Chip mit Namen (öffnet die Schrittliste), kommend = Nummer. Ersetzt mobil die Pille und den Fortschrittsstrich. Kopf 5 + 40 + 5 + 46 + 1 = 97 px. ========================================================================================================== */ #rh-konfigurator-v2 .rhk2-ms { display: none; } @media (max-width: 1023.98px) { #rh-konfigurator-v2.rhk2-app { --a-top: 97px; } #rh-konfigurator-v2 .rhk2-top { flex-wrap: wrap; align-content: flex-start; row-gap: 0; padding-top: 5px; padding-bottom: 0; } #rh-konfigurator-v2 .rhk2-pill, #rh-konfigurator-v2 .rhk2-top__prog { display: none !important; } #rh-konfigurator-v2 .rhk2-top__x { margin-left: auto; } #rh-konfigurator-v2 .rhk2-ms { display: flex; align-items: center; flex: 0 0 auto; width: calc(100% + 24px); height: 46px; margin: 5px -10px 0 -14px; padding: 0 12px; border-top: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-ms__i { flex: 0 0 auto; display: flex; } #rh-konfigurator-v2 .rhk2-ms__l { flex: 1 1 4px; min-width: 4px; height: 2px; border-radius: 2px; background: #d5dde6; transition: background-color .4s ease; } #rh-konfigurator-v2 .rhk2-ms__l.is-done { background: var(--a-blue); } #rh-konfigurator-v2 .rhk2-ms__b { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: default; -webkit-tap-highlight-color: transparent; } #rh-konfigurator-v2 button.rhk2-ms__b { cursor: pointer; } #rh-konfigurator-v2 .rhk2-ms__ic { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1.5px solid #c3ced9; border-radius: 50%; background: #fff; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-ms__ic svg { width: 14px; height: 14px; } #rh-konfigurator-v2 .rhk2-ms__i.is-done .rhk2-ms__ic { border-color: var(--a-blue); background: var(--a-blue); color: #fff; } #rh-konfigurator-v2 .rhk2-ms__i.is-done .rhk2-ms__ic svg { stroke-width: 3; } #rh-konfigurator-v2 .rhk2-ms__i.is-open .rhk2-ms__ic { border-color: var(--a-blue); color: var(--a-blue-9); } #rh-konfigurator-v2 .rhk2-ms__i.is-locked .rhk2-ms__ic { border-color: #dde4eb; } #rh-konfigurator-v2 .rhk2-ms__b--akt { gap: 6px; height: 34px; padding: 0 8px 0 4px; background: var(--a-blue); color: #fff; box-shadow: 0 8px 16px -10px rgba(17,107,176,.95); } #rh-konfigurator-v2 .rhk2-ms__b--akt .rhk2-ms__ic { border: 0; background: #fff; color: var(--a-blue); } #rh-konfigurator-v2 .rhk2-ms__chev { flex: 0 0 14px; width: 14px; height: 14px; opacity: .9; } html body #rh-konfigurator-v2 .rhk2-ms__t { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--a-disp) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; } html body #rh-konfigurator-v2 .rhk2-ms__ic b { font-family: var(--a-disp) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; } #rh-konfigurator-v2 .rhk2-ms__b:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 1px; } } @media (max-width: 374px) { #rh-konfigurator-v2 .rhk2-ms__b { min-width: 28px; } html body #rh-konfigurator-v2 .rhk2-ms__t { max-width: 72px; font-size: 13px !important; } } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 .rhk2-ms__l { transition: none; } } /* ========================================================================================================== LETZTER SCHRITT: KASSE DIREKT UNTER „GESAMT“ (11.09.2026, Enes). Warenkorb + Direkt zur Kasse, PayPal Express (echte Buttons des PayPal-Plugins), Hinweis, Zahlungs-Icons aus NOVAchild (nur aktive Zahlungsarten), Trust-Zeile. ========================================================================================================== */ #rh-konfigurator-v2 .rhk2-kasse { display: grid; gap: 12px; margin-top: 14px; } #rh-konfigurator-v2 .rhk2-kasse__btns { display: grid; gap: 8px; } @media (min-width: 600px) { #rh-konfigurator-v2 .rhk2-kasse__btns { grid-template-columns: 1fr 1fr; } } #rh-konfigurator-v2 :is(.rhk2-kasse__korb, .rhk2-kasse__go) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 8px; color: #fff; cursor: pointer; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; } #rh-konfigurator-v2 .rhk2-kasse__korb { background: var(--a-blue); box-shadow: 0 12px 24px -14px rgba(17,107,176,.95); } #rh-konfigurator-v2 .rhk2-kasse__korb:hover:not(:disabled) { background: var(--a-blue-d); transform: translateY(-1px); } #rh-konfigurator-v2 .rhk2-kasse__go { background: var(--a-blue-9); box-shadow: 0 12px 24px -16px rgba(7,42,70,.9); } #rh-konfigurator-v2 .rhk2-kasse__go:hover:not(:disabled) { background: #04192a; transform: translateY(-1px); } #rh-konfigurator-v2 :is(.rhk2-kasse__korb, .rhk2-kasse__go) svg { flex: 0 0 20px; width: 20px; height: 20px; } #rh-konfigurator-v2 :is(.rhk2-kasse__korb, .rhk2-kasse__go).is-laden { cursor: progress; opacity: .8; } #rh-konfigurator-v2 :is(.rhk2-kasse__korb, .rhk2-kasse__go, .rhk2-pp__laden, .rhk2-kasse__trust a):focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; } html body #rh-konfigurator-v2 :is(.rhk2-kasse__korb, .rhk2-kasse__go) { font-family: var(--a-disp) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; } #rh-konfigurator-v2 .rhk2-kasse__or { display: flex; align-items: center; gap: 10px; margin: 2px 0 0 !important; color: #5f6b77; } #rh-konfigurator-v2 .rhk2-kasse__or::before, #rh-konfigurator-v2 .rhk2-kasse__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--a-line); } html body #rh-konfigurator-v2 .rhk2-kasse__or span { font-family: var(--a-body) !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap; } #rh-konfigurator-v2 .rhk2-pp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; min-height: 45px; } #rh-konfigurator-v2 .rhk2-pp__b { min-height: 45px; } #rh-konfigurator-v2 .rhk2-pp__laden { display: flex; align-items: center; justify-content: center; width: 100%; height: 45px; border: 0; border-radius: 4px; background: #ffc439; cursor: pointer; transition: filter .2s ease; } #rh-konfigurator-v2 .rhk2-pp__laden:hover { filter: brightness(.96); } #rh-konfigurator-v2 .rhk2-pp__laden img { display: block; width: auto; height: 22px; } #rh-konfigurator-v2 .rhk2-pp__laden.is-laden { cursor: progress; opacity: .7; } #rh-konfigurator-v2 .rhk2-kasse .rhk2-done__note { margin: 0 !important; text-align: center; } #rh-konfigurator-v2 .rhk2-kasse__pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; } #rh-konfigurator-v2 .rhk2-kasse__pay li { display: grid; place-items: center; width: 58px; height: 36px; padding: 5px 7px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; } #rh-konfigurator-v2 .rhk2-kasse__pay img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } #rh-konfigurator-v2 .rhk2-kasse__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #edf1f5; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-kasse__trust { grid-template-columns: repeat(4, auto); justify-content: space-between; } } #rh-konfigurator-v2 .rhk2-kasse__trust li, #rh-konfigurator-v2 .rhk2-kasse__trust a { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--a-ink); text-decoration: none; } #rh-konfigurator-v2 .rhk2-kasse__trust svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--a-blue); } html body #rh-konfigurator-v2 .rhk2-kasse__trust :is(li, a, span) { font-family: var(--a-body) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; } html body #rh-konfigurator-v2 .rhk2-kasse__trust b { display: block; font-family: var(--a-disp) !important; font-size: 13px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 :is(.rhk2-kasse__korb, .rhk2-kasse__go) { transition: none; } } /* Die Positionsregel des Set-Kastens (.rhk2-done__pos li: Raster, Linie, 44-px-Bildkachel) nicht auf Icons und Trust anwenden */ #rh-konfigurator-v2 .rhk2-done__pos .rhk2-kasse li { grid-template-columns: none; padding: 0; border-top: 0; } #rh-konfigurator-v2 .rhk2-done__pos .rhk2-kasse__trust li { display: flex; } #rh-konfigurator-v2 .rhk2-done__pos .rhk2-kasse__pay li { display: grid; place-items: center; width: 58px; height: 36px; padding: 5px 7px; border: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-done__pos .rhk2-kasse__pay li > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 0; background: none; object-fit: contain; } /* Zahlungs-Icons: feste Bildbox, damit auch SVGs ohne Seitenverhältnis (Rechnung) in der Kachel bleiben; contain = nichts beschnitten */ #rh-konfigurator-v2 .rhk2-done__pos .rhk2-kasse__pay li > img { width: 44px; height: 22px; max-width: 44px; max-height: 22px; object-fit: contain; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-kasse__trust li > span { white-space: nowrap; } } /* Letzter Schritt: feste Leiste weicht aus, solange der Kassen-Block im Bild ist (11.09.2026: sie lag über „Direkt zur Kasse“, ein Tippen dort öffnete „Ihre Auswahl“). Der Block hat eigene Knöpfe für Warenkorb und Kasse. */ #rh-konfigurator-v2 .rhk2-act { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } #rh-konfigurator-v2 .rhk2-act.is-weg { transform: translateY(115%); opacity: 0; pointer-events: none; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-act.is-weg { transform: translateY(24px); } } @media (prefers-reduced-motion: reduce) { #rh-konfigurator-v2 .rhk2-act { transition: none; } } /* Product choices: three visible facts, quiet novelty badges and recognizable connections. */ #rh-konfigurator-v2 .rhk2-bw__ic { width: 44px; height: 44px; background: #edf4fa; } #rh-konfigurator-v2 .rhk2-bw__ic svg { width: 30px; height: 30px; } #rh-konfigurator-v2 .rhk2-bw__c--elektrisch .rhk2-bw__ic { background: #fff5e8; color: #986013; } #rh-konfigurator-v2 .rhk2-chs { gap: 12px; } #rh-konfigurator-v2 .rhk2-ch__pick { padding: 14px 14px 10px; gap: 12px 10px; flex: 1; } #rh-konfigurator-v2 .rhk2-ch__t { align-self: center; gap: 6px; } #rh-konfigurator-v2 .rhk2-ch__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; } html body #rh-konfigurator-v2 .rhk2-ch__heading b { font-weight: 650 !important; line-height: 1.35 !important; } html body #rh-konfigurator-v2 .rhk2-ch__heading .rhk2-ch__badge { margin: 0; padding: 3px 6px; background: #e3f1fc; color: #075b95; font-size: 10px !important; line-height: 1.2; font-weight: 700 !important; } #rh-konfigurator-v2 .rhk2-ch__features { display: grid; grid-column: 1 / -1; align-content: start; gap: 6px; padding-top: 10px; border-top: 1px solid #e8eef4; } #rh-konfigurator-v2 .rhk2-ch__features > span { display: flex; align-items: flex-start; gap: 7px; font-family: var(--a-body); font-size: 13px; font-weight: 400; line-height: 1.45; color: #35485b; } #rh-konfigurator-v2 .rhk2-ch__features svg { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; color: #1671ae; } #rh-konfigurator-v2 .rhk2-ch__links { margin-top: auto; padding: 0 14px 8px; gap: 2px 16px; } #rh-konfigurator-v2 .rhk2-ch__l { min-height: 36px; } @media (max-width: 359px) { #rh-konfigurator-v2 .rhk2-ch__pick { grid-template-columns: 60px minmax(0,1fr) 22px; padding: 12px 10px 8px; } #rh-konfigurator-v2 .rhk2-ch__img { width: 60px; height: 72px; } #rh-konfigurator-v2 .rhk2-ch__features > span { font-size: 12px; } #rh-konfigurator-v2 .rhk2-ch__links { padding-left: 10px; padding-right: 10px; } } /* 14.09.2026: two columns, one persistent summary and an explicit PDP return. */ html body #rh-konfigurator-v2 #rhk2-next:disabled { background: #e3eaf1 !important; border-color: #e3eaf1 !important; color: #657386 !important; box-shadow: none !important; opacity: 1; cursor: not-allowed; } #rh-konfigurator-v2 .rhk2-return { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; padding: 8px 10px; min-height: 40px; color: var(--a-blue-d); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: 8px; } #rh-konfigurator-v2 .rhk2-return svg { width: 18px; height: 18px; } #rh-konfigurator-v2 .rhk2-return[hidden] { display: none !important; } #rh-konfigurator-v2 .rhk2-return:hover { background: #eef6fc; } #rh-konfigurator-v2 .rhk2-return:focus-visible { outline: 3px solid var(--a-blue); outline-offset: 2px; } #rh-konfigurator-v2.rhk2-from-pdp .rhk2-top__x, #rh-konfigurator-v2.rhk2-from-pdp .rhk2-top__back { display: none !important; } #rh-konfigurator-v2.rhk2-from-pdp .rhk2-top__brand { display: inline-flex !important; } #rh-konfigurator-v2 .rhk2-rail-title { margin: 0 0 16px !important; font-size: 16px !important; font-weight: 650 !important; color: var(--a-ink); } #rh-konfigurator-v2 .rhk2-rail-empty { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--a-muted); } #rh-konfigurator-v2 .rhk2-picked { margin-top: 18px; padding: 16px; background: #fff; border: 1px solid var(--a-line); border-radius: 14px; } #rh-konfigurator-v2 .rhk2-picked h3 { margin: 0 0 12px !important; font-size: 13px !important; font-weight: 650 !important; } #rh-konfigurator-v2 .rhk2-picked__hero { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: center; gap: 12px; } #rh-konfigurator-v2 .rhk2-picked__hero button { width: 84px; height: 112px; padding: 0; border: 0; border-radius: 8px; background: #f7f9fb; overflow: hidden; cursor: zoom-in; } #rh-konfigurator-v2 .rhk2-picked__hero img { width: 100%; height: 100%; object-fit: contain; } #rh-konfigurator-v2 .rhk2-picked__hero b { display: block; font-size: 13px; font-weight: 650; line-height: 1.4; } #rh-konfigurator-v2 .rhk2-picked__hero span { display: block; margin: 5px 0; color: var(--a-muted); font-size: 11px; line-height: 1.5; } #rh-konfigurator-v2 .rhk2-picked__hero strong { font-size: 16px; font-weight: 650; } #rh-konfigurator-v2 .rhk2-picked__mode { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--a-blue-d); } #rh-konfigurator-v2 .rhk2-picked__mode svg { width: 16px; height: 16px; } #rh-konfigurator-v2 .rhk2-picked__extras { margin: 8px 0 0; padding: 0; list-style: none; } #rh-konfigurator-v2 .rhk2-picked__extras li { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #edf1f5; } #rh-konfigurator-v2 .rhk2-picked__extras img { width: 30px; height: 38px; object-fit: contain; } #rh-konfigurator-v2 .rhk2-picked__extras b { display: block; font-size: 11px; line-height: 1.4; font-weight: 600; } #rh-konfigurator-v2 .rhk2-picked__extras small { display: block; margin-top: 2px; color: var(--a-muted); font-size: 10px; line-height: 1.4; } #rh-konfigurator-v2 .rhk2-picked__extras strong { font-size: 11px; font-weight: 600; white-space: nowrap; } #rh-konfigurator-v2 .rhk2-picked__total { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--a-line); } #rh-konfigurator-v2 .rhk2-picked__total span { font-size: 12px; } #rh-konfigurator-v2 .rhk2-picked__total small { display: block; color: var(--a-muted); font-size: 10px; } #rh-konfigurator-v2 .rhk2-picked__total b { font-size: 20px; font-weight: 700; } @media (min-width: 1024px) { #rh-konfigurator-v2 .rhk2-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 28px; max-width: 1440px; margin: 0 auto; padding: 24px 28px; } #rh-konfigurator-v2 .rhk2-main { padding: 0 !important; } #rh-konfigurator-v2 .rhk2-rail { padding: 8px 4px 20px !important; top: calc(var(--a-top) + 16px); max-height: calc(100vh - var(--a-top) - 32px); } #rh-konfigurator-v2 .rhk2-rail .rhk2-prod { display: block; position: static; padding: 0 !important; max-height: none; overflow: visible; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__i { padding-bottom: 10px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__b { gap: 10px; min-height: 42px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__ic { width: 28px; height: 28px; flex-basis: 28px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__ic svg { width: 14px; height: 14px; } #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__i:not(:last-child)::after { left: 13px; top: 34px; bottom: 4px; } html body #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__t small { display: none; } html body #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__t b { font-size: 13px !important; font-weight: 600 !important; } html body #rh-konfigurator-v2 .rhk2-rail .rhk2-vs__t em { font-size: 11px !important; font-weight: 400 !important; } #rh-konfigurator-v2 .rhk2-rail button.rhk2-vs__b .rhk2-vs__t b { text-decoration: underline; text-decoration-color: #a0bcd1; text-underline-offset: 3px; } #rh-konfigurator-v2 .rhk2-rail button.rhk2-vs__b:hover { background: #eaf3fa; } #rh-konfigurator-v2 .rhk2-rail .rhk2-sum__foot { margin-top: 12px; padding-top: 0; border: 0; } #rh-konfigurator-v2 .rhk2-rail .rhk2-sum__reset { padding: 8px 0; min-height: 36px; border: 0; background: transparent; font-size: 11px; font-weight: 500; } } @media (min-width: 1600px) { #rh-konfigurator-v2 .rhk2-grid { max-width: 1600px; grid-template-columns: minmax(0,1fr) 350px; gap: 36px; } } @media (min-width: 1024px) and (max-width: 1279px) { #rh-konfigurator-v2 .rhk2-grid { grid-template-columns: minmax(0,1fr) 280px; padding: 20px; gap: 20px; } #rh-konfigurator-v2.rhk2-from-pdp .rhk2-top__tel { display: none; } } /* Shared action role; the configurator also works outside the child template. */ #rh-konfigurator-v2 :is(#rhk2-next,#rhk2-next2,.cta) { font-family:var(--font-display,Manrope,sans-serif);font-size:16px;font-weight:700;min-height:54px;border-radius:10px; } #rh-konfigurator-v2 :is(#rhk2-next,#rhk2-next2,.cta):not(:disabled) { background:var(--blue-600,#116bb0); } #rh-konfigurator-v2 :is(#rhk2-next,#rhk2-next2,.cta):not(:disabled):hover { background:var(--blue-700,#0e548b); } #rh-konfigurator-v2 .rhk2-edit-selection { border:0;background:transparent;color:var(--blue-600,#116bb0);text-decoration:underline;text-underline-offset:3px;text-align:left;font:500 14px/1.5 var(--font-body,'IBM Plex Sans',sans-serif);padding:0 0 14px;cursor:pointer; } #rh-konfigurator-v2 .rhk2-proof__score small { font-size:13px;max-width:170px; } #rh-konfigurator-v2 .rhk2-trust__r { font-size:13px; } /* Source labels wrap inside their own grid cell; the service number stays readable. */ html body #rh-konfigurator-v2 .rhk2-proof__score small { font-size:13px !important;white-space:normal;max-width:170px;line-height:1.35; } #rh-konfigurator-v2 .rhk2-proof__score > span { min-width:0; } #rh-konfigurator-v2 .rhk2-top__tel { flex-shrink:0;white-space:nowrap; } @media(min-width:1280px) and (max-width:1439.98px) { #rh-konfigurator-v2 .rhk2-top .rhk2-trust__rating { display:none; } } @media(max-width:767.98px) { #rh-konfigurator-v2 .rhk2-proof__head { grid-template-columns:minmax(0,1fr) auto; } #rh-konfigurator-v2 .rhk2-proof__score { grid-column:1 / -1;justify-self:start; } #rh-konfigurator-v2 .rhk2-proof__t { grid-column:1; } #rh-konfigurator-v2 .rhk2-proof__nav { grid-column:2; } } /* 0.34: choose a room, not the radiator pictured in a lifestyle photograph. */ html body #rh-konfigurator-v2 .rhk2-rooms { gap:18px; } html body #rh-konfigurator-v2 .rhk2-room { border:1px solid #c9dce9; border-radius:8px; box-shadow:none; background:#fff; transition:border-color .16s, background-color .16s; } html body #rh-konfigurator-v2 .rhk2-room:hover, html body #rh-konfigurator-v2 .rhk2-room.on { border-color:#116bb0; background:#f5faff; box-shadow:none; } html body #rh-konfigurator-v2 .rhk2-room:focus-visible { outline:3px solid #116bb0; outline-offset:4px; } html body #rh-konfigurator-v2 .rhk2-room__img { aspect-ratio:auto; height:155px; padding:8px 20px 0; background:#f3f8fc; } html body #rh-konfigurator-v2 .rhk2-room__b { padding:20px 22px; } html body #rh-konfigurator-v2 .rhk2-room__b b { font-size:20px !important; line-height:1.3 !important; } html body #rh-konfigurator-v2 .rhk2-room__b small { color:#526574; margin-top:7px; font-size:14px !important; line-height:1.45 !important; } html body #rh-konfigurator-v2 .rhk2-room__b em { margin-top:12px; padding:0; border-radius:0; background:none; color:#526574; font-family:var(--a-body) !important; font-size:12px !important; font-weight:400 !important; } html body #rh-konfigurator-v2 .rhk2-room__action { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid #dce8f0; font-size:14px; font-weight:700; color:#116bb0; } html body #rh-konfigurator-v2 .rhk2-room__action svg { width:19px; height:19px; } html body #rh-konfigurator-v2 .rhk2-room-hint { display:flex; align-items:center; gap:8px; margin:18px 0 0; font-size:12px !important; line-height:1.4; color:#526574; } html body #rh-konfigurator-v2 .rhk2-room-hint svg { width:17px; height:17px; flex:0 0 17px; } html body #rh-konfigurator-v2[data-cur='0'] .rhk2-act { display:none !important; } @media (max-width:600px) { html body #rh-konfigurator-v2 .rhk2-rooms { grid-template-columns:1fr; gap:12px; } html body #rh-konfigurator-v2 .rhk2-room { display:grid; grid-template-columns:94px minmax(0,1fr); align-items:stretch; } html body #rh-konfigurator-v2 .rhk2-room__img { height:100%; padding:8px 0; display:flex; align-items:center; } html body #rh-konfigurator-v2 .rhk2-room__img img { height:86px; } html body #rh-konfigurator-v2 .rhk2-room__b { padding:15px 13px; } html body #rh-konfigurator-v2 .rhk2-room__b b { font-size:17px !important; } html body #rh-konfigurator-v2 .rhk2-room__b small { font-size:12px !important; margin-top:4px; } html body #rh-konfigurator-v2 .rhk2-room__b em { font-size:11px !important; margin-top:6px; } html body #rh-konfigurator-v2 .rhk2-room__action { font-size:12px; border-top:0; padding-top:0; margin-top:10px; } html body #rh-konfigurator-v2[data-cur='0'] .rhk2-sub { font-size:14px !important; } html body #rh-konfigurator-v2 .rhk2-room-hint { font-size:11px !important; } } html body #rh-konfigurator-v2[data-cur='0'] .rhk2-card { padding-bottom:24px; } html body #rh-konfigurator-v2 .rhk2-rating-compact { display:none; } @media (max-width:600px) { html body #rh-konfigurator-v2 .rhk2-trustbar { overflow:visible; } html body #rh-konfigurator-v2 .rhk2-trust--bar { min-width:0; justify-content:space-between; gap:8px; } html body #rh-konfigurator-v2 .rhk2-trust--bar li { font-size:11px !important; gap:4px; } html body #rh-konfigurator-v2 .rhk2-trust--bar li:nth-child(2), html body #rh-konfigurator-v2 .rhk2-trust--bar .rhk2-rating-full { display:none; } html body #rh-konfigurator-v2 .rhk2-trust--bar .rhk2-rating-compact { display:inline; } } /* 0.35 — one decision at a time, with the chosen product kept in view. */ html body #rh-konfigurator-v2 .rhk2-card { border-radius:12px; box-shadow:none; } html body #rh-konfigurator-v2 :is(button,a):focus-visible { outline:3px solid #126bae; outline-offset:3px; } html body #rh-konfigurator-v2 :is(.rhk2-grp,.rhk2-entry-confirmation,.rhk2-faq__mehr,.rhk2-proof-disclosure)[hidden] { display:none !important; } html body #rh-konfigurator-v2 .rhk2-entry-confirmation { padding:10px 13px; margin:0 0 16px; border-left:3px solid #278149; background:#f0f8f3; color:#235c3c; font-size:13px; line-height:1.5; } html body #rh-konfigurator-v2 .rhk2-rail-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; } html body #rh-konfigurator-v2 .rhk2-rail-heading h2 { margin:0; } html body #rh-konfigurator-v2 #rhk2-rail-progress { font-size:12px; font-weight:600; color:#116bb0; background:#e4f0f8; padding:5px 8px; border-radius:4px; white-space:nowrap; } html body #rh-konfigurator-v2 .rhk2-selection-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; font-size:13px; color:#526574; } html body #rh-konfigurator-v2 :is(.rhk2-selection-note button,.rhk2-text-action) { min-height:36px; border:0; padding:4px 0; background:none; color:#116bb0; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:13px; cursor:pointer; } html body #rh-konfigurator-v2 .rhk2-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } html body #rh-konfigurator-v2 .rhk2-col { position:relative; border:1px solid #c8d8e5; border-radius:8px; padding:12px; background:#fff; box-shadow:none; transition:background-color .14s,border-color .14s; } html body #rh-konfigurator-v2 .rhk2-col.on { border:2px solid #116bb0; padding:11px; background:#f1f7fc; } html body #rh-konfigurator-v2 .rhk2-surfaces { display:flex; gap:6px; padding-top:24px; } html body #rh-konfigurator-v2 .rhk2-surface { min-width:0; flex:1; text-align:center; } html body #rh-konfigurator-v2 .rhk2-surface small { display:block; font-size:10px; line-height:1.4; color:#526574; padding-top:5px; } html body #rh-konfigurator-v2 .rhk2-col__sw { aspect-ratio:auto; height:85px; border-radius:5px; } /* Crisp rectangular reflections communicate smooth enamel, rather than brushed metal. */ html body #rh-konfigurator-v2 .rhk2-col__sw--gloss::before { background:linear-gradient(112deg,transparent 0 32%,rgba(255,255,255,.78) 32.4% 34%,rgba(255,255,255,.27) 34.4% 46%,transparent 46.4%),linear-gradient(0deg,transparent 57%,rgba(255,255,255,.12) 58% 79%,transparent 80%); } html body #rh-konfigurator-v2 .rhk2-col__sw--gloss::after { background:linear-gradient(175deg,rgba(255,255,255,.05),transparent 55%,rgba(0,0,0,.16)); box-shadow:inset 0 1px 2px #ffffff8a; } html body #rh-konfigurator-v2 .rhk2-col__sw--gloss.is-light::before { background:linear-gradient(112deg,transparent 0 30%,rgba(96,110,119,.28) 30.4% 31.5%,#fff 32% 35%,rgba(255,255,255,.6) 35.4% 47%,transparent 47.4%); } html body #rh-konfigurator-v2 .rhk2-col__sw--matt::before { background:linear-gradient(155deg,#ffffff0a,#00000014); } html body #rh-konfigurator-v2 .rhk2-col__sw--matt::after { opacity:.15; } html body #rh-konfigurator-v2 .rhk2-col .rhk2-col__chk { top:11px; right:11px; bottom:auto; width:20px; height:20px; border-radius:4px; border:1.5px solid #869caa; background:#fff; } html body #rh-konfigurator-v2 .rhk2-col.on .rhk2-col__chk { background:#116bb0; border-color:#116bb0; } html body #rh-konfigurator-v2 .rhk2-col.on .rhk2-col__chk::after { content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } html body #rh-konfigurator-v2 .rhk2-col__t { padding:12px 0 0; } html body #rh-konfigurator-v2 .rhk2-col__ral { font-size:11px !important; margin-top:4px; } html body #rh-konfigurator-v2 .rhk2-selection-summary { margin:14px 0 5px; color:#12334a; font-size:13px; font-weight:600; } html body #rh-konfigurator-v2 .rhk2-surface-note { margin:0; font-size:11px; color:#61717d; } html body #rh-konfigurator-v2 .rhk2-limits { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 12px; } html body #rh-konfigurator-v2 .rhk2-limit { display:block; color:#193448; font-size:14px; font-weight:600; } html body #rh-konfigurator-v2 .rhk2-limit__input { display:flex; align-items:center; border:1px solid #b7cad8; border-radius:6px; margin-top:8px; background:#fff; } html body #rh-konfigurator-v2 .rhk2-limit__input:focus-within { outline:2px solid #116bb0; outline-offset:2px; } html body #rh-konfigurator-v2 .rhk2-limit__input input { width:100%; min-width:0; height:50px; padding:10px 12px; border:0; outline:none; background:transparent; font:inherit; font-size:18px; box-shadow:none; } html body #rh-konfigurator-v2 .rhk2-limit__input > span { padding-right:12px; color:#61717d; font-size:13px; } html body #rh-konfigurator-v2 .rhk2-disclosure { margin:12px 0; border-top:1px solid #e0e8ef; } html body #rh-konfigurator-v2 .rhk2-disclosure summary { min-height:44px; padding:12px 0; color:#285771; font-size:13px; cursor:pointer; } html body #rh-konfigurator-v2 .rhk2-tabs { gap:10px; } html body #rh-konfigurator-v2 .rhk2-tab { padding:12px; border-radius:6px; min-height:64px; } html body #rh-konfigurator-v2 .rhk2-treffer { padding:12px; margin-top:14px; border-radius:6px; } html body #rh-konfigurator-v2 .rhk2-treffer small { display:none; } html body #rh-konfigurator-v2 .rhk2-faq { margin-top:24px; padding-top:0; } html body #rh-konfigurator-v2 .rhk2-faq__h { text-transform:none; color:#526574; margin-bottom:8px; font-size:13px !important; } html body #rh-konfigurator-v2 .rhk2-faq__row { display:flex; justify-content:space-between; gap:12px; align-items:center; width:100%; min-height:46px; padding:13px 0; text-align:left; background:transparent; border:0; cursor:pointer; } html body #rh-konfigurator-v2 .rhk2-faq__q { font-size:13px !important; font-weight:600 !important; } html body #rh-konfigurator-v2 .rhk2-faq__mehr { padding:0 0 14px; margin:0; font-size:13px; line-height:1.5; color:#526574; } html body #rh-konfigurator-v2 .rhk2-faq__mehr p { margin:0 0 7px; font-size:13px !important; } html body #rh-konfigurator-v2 .rhk2-bw { display:grid; grid-template-columns:1fr; gap:10px; } html body #rh-konfigurator-v2 .rhk2-bw__c { display:flex; align-items:center; gap:14px; padding:16px 44px 16px 16px; min-height:90px; border-radius:8px; box-shadow:none; text-align:left; } html body #rh-konfigurator-v2 .rhk2-bw__ic { margin:0; flex:0 0 42px; width:42px; height:42px; } html body #rh-konfigurator-v2 .rhk2-bw__t { display:block; } html body #rh-konfigurator-v2 .rhk2-bw__t small { display:block; margin-top:5px; max-width:480px; font-size:13px !important; } html body #rh-konfigurator-v2 .rhk2-grp { margin:0; padding:0; border:0; } html body #rh-konfigurator-v2 .rhk2-grp__n { display:none; } html body #rh-konfigurator-v2 .rhk2-grp__h { margin-bottom:16px; } html body #rh-konfigurator-v2 .rhk2-access-progress { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:8px 0 18px; font-size:12px; color:#526574; } html body #rh-konfigurator-v2 .rhk2-access-progress > span { font-weight:600; color:#116bb0; } html body #rh-konfigurator-v2 .rhk2-access-progress button { display:inline-flex; gap:5px; align-items:center; background:none; border:0; padding:5px 0; color:#526574; font-size:12px; cursor:pointer; text-decoration:underline; } html body #rh-konfigurator-v2 .rhk2-access-progress svg { width:14px; height:14px; } html body #rh-konfigurator-v2 .rhk2-proof-disclosure { margin-top:16px; background:#fff; border:1px solid #dfe8ee; border-radius:8px; overflow:hidden; } html body #rh-konfigurator-v2 .rhk2-proof-disclosure > summary { padding:16px 20px; cursor:pointer; font-size:14px; font-weight:600; color:#203c50; } html body #rh-konfigurator-v2 .rhk2-proof-disclosure > summary small { font-size:12px; font-weight:400; color:#61717d; margin-left:12px; } html body #rh-konfigurator-v2 .rhk2-proof-disclosure .rhk2-proof { margin:0; border:0; border-top:1px solid #e5edf3; border-radius:0; box-shadow:none; } html body #rh-konfigurator-v2 :is(.is-pulse,.is-hint,.is-enter) { animation:none !important; } @media(min-width:1024px) { html body #rh-konfigurator-v2 .rhk2-mods { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px; } html body #rh-konfigurator-v2 .rhk2-mod { border-radius:8px; box-shadow:none; } html body #rh-konfigurator-v2 .rhk2-mod__img { aspect-ratio:1/1 !important; } html body #rh-konfigurator-v2 .rhk2-mod__b { padding:12px; } html body #rh-konfigurator-v2 .rhk2-mod__n { font-size:13px !important; line-height:1.4 !important; } html body #rh-konfigurator-v2 .rhk2-chip__k { font-size:10px !important; } html body #rh-konfigurator-v2 .rhk2-chip { padding:3px 5px; } html body #rh-konfigurator-v2 .rhk2-cols { grid-template-columns:repeat(4,minmax(0,1fr)); } html body #rh-konfigurator-v2 .rhk2-col__sw { height:95px; } } @media(max-width:600px) { html body #rh-konfigurator-v2 .rhk2-card { border-radius:0; } html body #rh-konfigurator-v2 .rhk2-selection-note { font-size:12px; gap:8px; } html body #rh-konfigurator-v2 .rhk2-selection-note button { font-size:12px; } html body #rh-konfigurator-v2 .rhk2-proof-disclosure > summary small { display:block; margin:5px 0 0; } html body #rh-konfigurator-v2 .rhk2-bw__c { padding:13px 36px 13px 12px; gap:10px; } html body #rh-konfigurator-v2 .rhk2-bw__ic { flex-basis:34px; width:34px; height:34px; } html body #rh-konfigurator-v2 .rhk2-tab small { font-size:11px !important; } html body #rh-konfigurator-v2 .rhk2-entry-confirmation { font-size:12px; margin-bottom:12px; } } @media(prefers-reduced-motion:reduce) { html body #rh-konfigurator-v2 *,html body #rh-konfigurator-v2 *::before,html body #rh-konfigurator-v2 *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* Keep the current decision above the options without duplicate headings. */ html body #rh-konfigurator-v2[data-cur='5'] .rhk2-grp__h { display:none; } html body #rh-konfigurator-v2 .rhk2-bw__c .rhk2-ch__radio { position:absolute; right:14px; top:50%; transform:translateY(-50%); flex-shrink:0; width:22px; height:22px; } html body #rh-konfigurator-v2 .rhk2-bw__t { min-width:0; } @media(max-width:600px) { html body #rh-konfigurator-v2[data-cur='5'] .rhk2-sub { margin-bottom:10px; } html body #rh-konfigurator-v2 .rhk2-access-progress { margin:4px 0 12px; } html body #rh-konfigurator-v2 .rhk2-entry-confirmation { padding:7px 10px; margin-bottom:10px; } html body #rh-konfigurator-v2 .rhk2-bw__c { padding-right:43px; } } html body #rh-konfigurator-v2 .rhk2-product-link { color:inherit; text-decoration:underline; text-decoration-color:#a6cce4; text-underline-offset:3px; } html body #rh-konfigurator-v2 .rhk2-product-link:hover { color:#116bb0; } html body #rh-konfigurator-v2 .rhk2-product-details { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:#116bb0; font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* Mobile navigation: a direct back action, stable position and named step menu. */ @media(max-width:1023.98px) { html body #rh-konfigurator-v2.rhk2-app { --a-top:107px; } html body #rh-konfigurator-v2 .rhk2-top__back { display:none !important; } html body #rh-konfigurator-v2 .rhk2-ms { display:grid; grid-template-columns:80px minmax(0,1fr) 86px; gap:8px; height:56px; } html body #rh-konfigurator-v2 :is(.rhk2-mobile-back,.rhk2-mobile-menu) { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:0 4px; border:0; border-radius:6px; background:transparent; color:#116bb0; font-family:var(--a-body); font-size:13px; font-weight:700; cursor:pointer; } html body #rh-konfigurator-v2 .rhk2-mobile-menu { background:#edf5fb; } html body #rh-konfigurator-v2 .rhk2-mobile-back:disabled { visibility:hidden; } html body #rh-konfigurator-v2 :is(.rhk2-mobile-back,.rhk2-mobile-menu) svg { width:16px; height:16px; flex-shrink:0; } html body #rh-konfigurator-v2 :is(.rhk2-mobile-back,.rhk2-mobile-menu):focus-visible { outline:3px solid #116bb0; outline-offset:1px; } html body #rh-konfigurator-v2 .rhk2-mobile-current { display:flex; flex-direction:column; gap:2px; min-width:0; text-align:center; line-height:1.3; } html body #rh-konfigurator-v2 .rhk2-mobile-current small { color:#526574; font-size:11px; } html body #rh-konfigurator-v2 .rhk2-mobile-current b { color:#132c3e; font-size:14px; } html body #rh-konfigurator-v2 #rhk2-sheet-list .rhk2-vs__b { min-height:56px; padding:8px 4px; } html body #rh-konfigurator-v2 #rhk2-sheet-list .rhk2-vs__t em { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } }