:root {
    --gold-1: #a8895f;
    --gold-2: #d3b07a;
    --panel:  rgba(10,14,23,.74);
    --line:   rgba(255,255,255,.1);
    --shadow: 0 18px 44px rgba(0,0,0,.28);
  }

  /* ── Page ── */
  .reinigung-page { padding-bottom: 100px; }

  /* ── Hero ── */
  .rein-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    padding: 52px 48px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .rein-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(ellipse at 80% 50%, rgba(211,176,122,.07), transparent 65%);
    pointer-events:none;
  }
  .rein-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gold-2);
    font-weight: 800;
    margin-bottom: 16px;
  }
  .rein-eyebrow::before {
    content:'';
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-1), transparent);
  }
  .rein-hero h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(2rem, 3.8vw, 3.4rem);
    line-height: 1.12;
    /* Kursive Schrift ragt über die Box hinaus; ohne Innenabstand schneidet
       background-clip:text die Ränder ab (z. B. das D und das g). */
    padding: .06em .18em .14em;
    margin: 0 -.18em 16px;
    background: linear-gradient(135deg,#a8895f,#d3b07a,#e8c98a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .rein-hero p {
    color: rgba(243,246,251,.7);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 50ch;
    margin: 0 0 28px;
  }
  .rein-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(211,176,122,.15), rgba(168,137,95,.08));
    border: 1px solid rgba(211,176,122,.3);
    font-weight: 800;
    font-size: 1.5rem;
    color: #d3b07a;
  }
  /* Der Preis im Badge bleibt groß – nur der Zusatztext daneben ist klein. */
  .rein-hero-badge #heroPreis {
    font-size: 1.5rem;
    font-weight: 800;
    color: #d3b07a;
    line-height: 1.1;
    white-space: nowrap;
  }
  .rein-hero-badge span {
    font-size: .78rem;
    font-weight: 600;
    color: rgba(243,246,251,.8);
    display: block;
    line-height: 1.3;
  }
  .rein-hero-img {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rein-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .vorher-nachher-label {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }
  .vn-pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }
  .vn-pill.vor  { background: rgba(11,13,18,.78); color: rgba(243,246,251,.85); border: 1px solid rgba(255,255,255,.22); }
  .vn-pill.nach { background: linear-gradient(135deg,#d9b884,#c08a57); color: #14100a; border: 1px solid rgba(211,176,122,.6); }
  .rein-ba { position: relative; width: 100%; height: 100%; }
  .rein-ba-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .rein-ba .rein-after { z-index: 1; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
  .rein-ba .rein-before { z-index: 0; }
  .rein-ba-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos, 50%);
    width: 28px;
    transform: translateX(-50%);
    z-index: 2;
    cursor: ew-resize;
    touch-action: none;
  }
  .rein-ba-handle::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  }

  /* ── Hero: Infokarten (vorübergehend statt Vorher/Nachher-Foto) ──
     Umschalten über data-hero-ansicht am .rein-hero (siehe HTML-Kommentar). */
  .rein-hero[data-hero-ansicht="karten"] .rein-hero-img { display: none; }
  .rein-hero[data-hero-ansicht="fotos"] .rein-hero-karten { display: none; }
  .rein-hero-karten {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rein-hero-karte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    padding: 22px 26px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border: 1px solid rgba(211,176,122,.18);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    transition: border-color .25s ease;
  }
  .rein-hero-karte:hover { border-color: rgba(211,176,122,.45); }
  .rein-hero-karte-nr {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--gold-2);
    padding-top: 2px;
    min-width: 2.2ch;
  }
  .rein-hero-karte h2 {
    margin: 0 0 6px;
    font: 800 .82rem/1.3 'Manrope', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f3f6fb;
  }
  .rein-hero .rein-hero-karte p {
    margin: 0;
    max-width: none;
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(243,246,251,.72);
  }

  /* ── Steps ── */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
  }
  .step-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px 20px;
    position: relative;
    text-align: center;
    backdrop-filter: blur(8px);
  }
  .step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(211,176,122,.2), rgba(168,137,95,.1));
    border: 1.5px solid rgba(211,176,122,.4);
    color: var(--gold-2);
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
  }
  .step-card h3 {
    font-size: .9rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: #f3f6fb;
  }
  .step-card p {
    font-size: .78rem;
    color: rgba(243,246,251,.8);
    margin: 0;
    line-height: 1.6;
  }
  .step-icon {
    font-size: 1.6rem;
    margin-bottom: 10px;
    display: block;
  }
  .step-arrow {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(211,176,122,.4);
    font-size: 1.2rem;
    z-index: 2;
  }

  /* ── Main Layout ── */
  .rein-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
  }
  .rein-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    padding: 32px;
    margin-bottom: 20px;
  }
  .rein-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin: 0 0 20px;
  }
  .rein-card h3 {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gold-2);
    margin: 0 0 12px;
  }

  /* Leistungen */
  .leistung-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 8px;
  }
  .leistung-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(211,176,122,.06);
    border: 1px solid rgba(211,176,122,.12);
    font-size: .88rem;
    color: rgba(243,246,251,.85);
  }
  .leistung-list li::before {
    content: '✓';
    color: var(--gold-2);
    font-weight: 900;
    font-size: .8rem;
    flex-shrink: 0;
  }

  /* Extras */
  .extras-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
  }
  .extra-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
  }
  .extra-toggle:hover {
    border-color: rgba(211,176,122,.3);
    background: rgba(211,176,122,.05);
  }
  .extra-toggle.selected {
    border-color: rgba(211,176,122,.6);
    background: rgba(211,176,122,.1);
  }
  .extra-toggle input { display: none; }
  .extra-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    transition: all .15s;
  }
  .extra-toggle.selected .extra-check {
    background: var(--gold-2);
    border-color: var(--gold-2);
    color: #0a0e17;
  }
  .extra-toggle .extra-name {
    flex: 1;
    font-weight: 700;
    font-size: .88rem;
    color: rgba(243,246,251,.8);
  }
  .extra-toggle .extra-price {
    font-size: .8rem;
    font-weight: 700;
    color: var(--gold-2);
  }

  /* Pflicht-Checkbox */
  .pflicht-box {
    padding: 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,100,80,.25);
    background: rgba(255,100,80,.05);
    margin-bottom: 20px;
  }
  .pflicht-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
  }
  .pflicht-label input { display: none; }
  .pflicht-custom-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(255,100,80,.5);
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    transition: all .15s;
  }
  .pflicht-label.checked .pflicht-custom-check {
    background: rgba(255,100,80,.8);
    border-color: rgba(255,100,80,.8);
    color: #fff;
  }
  .pflicht-label span {
    font-size: .85rem;
    font-weight: 700;
    color: rgba(243,246,251,.85);
    line-height: 1.5;
  }
  .pflicht-hinweis {
    font-size: .75rem;
    color: rgba(255,160,140,.75);
    line-height: 1.6;
    padding-left: 32px;
  }

  /* ── Zustand der Schuhe / mögliche Zusatzreinigung ──────────
     Pflicht-Kenntnisnahme und freiwillige Kostenfreigabe sind
     bewusst zwei getrennte Kästen mit unterschiedlicher Farbe:
     die freiwillige darf nicht wie eine Pflichtangabe aussehen
     und wird auch nicht hervorgehoben, damit sie niemanden
     in eine Richtung drängt. */
  .zr-text { font-size:.86rem; line-height:1.65; color:rgba(243,246,251,.72); margin:0 0 16px; }
  .zr-box { padding:15px 16px; border-radius:14px; margin-bottom:12px; }
  .zr-box--pflicht  { border:1.5px solid rgba(211,176,122,.35); background:rgba(211,176,122,.07); }
  .zr-box--freiwillig { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
  .zr-box--fehler { border-color:rgba(255,120,100,.75); }
  .zr-label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
  .zr-label input[type=checkbox] {
    appearance:none; -webkit-appearance:none; margin:1px 0 0;
    width:22px; height:22px; flex-shrink:0; cursor:pointer;
    border:1.5px solid rgba(243,246,251,.35); border-radius:6px; background:transparent;
    display:grid; place-content:center; transition:background .15s, border-color .15s;
  }
  .zr-label input[type=checkbox]:hover { border-color:#d3b07a; }
  .zr-label input[type=checkbox]:checked { background:#d3b07a; border-color:#d3b07a; }
  .zr-label input[type=checkbox]:checked::after {
    content:''; width:11px; height:6px; margin-top:-3px;
    border-left:2.5px solid #12151c; border-bottom:2.5px solid #12151c; transform:rotate(-45deg);
  }
  .zr-label input[type=checkbox]:focus-visible { outline:3px solid #d3b07a; outline-offset:3px; }
  .zr-label span { font-size:.85rem; line-height:1.55; color:rgba(243,246,251,.88); }
  .zr-box--pflicht .zr-label span { font-weight:700; }
  .zr-folge { margin:11px 0 0 34px; font-size:.79rem; line-height:1.6; color:rgba(243,246,251,.82); }
  .zr-fehler { margin:10px 0 0 34px; font-size:.8rem; font-weight:700; color:#ff9a8c; }
  .zr-mehr { margin-top:4px; }
  .zr-mehr summary {
    cursor:pointer; list-style:none; padding:11px 14px; border-radius:12px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
    font-size:.83rem; font-weight:700; color:#d3b07a;
  }
  .zr-mehr summary::-webkit-details-marker { display:none; }
  .zr-mehr summary::after { content:' \25BE'; }
  .zr-mehr[open] summary::after { content:' \25B4'; }
  .zr-mehr summary:focus-visible { outline:3px solid #d3b07a; outline-offset:2px; }
  .zr-mehr .zr-mehr-inhalt { padding:13px 15px 2px; }
  .zr-mehr p { margin:0 0 11px; font-size:.83rem; line-height:1.65; color:rgba(243,246,251,.87); }
  .zr-mehr p:last-child { margin-bottom:0; }
  @media (max-width:520px){ .zr-folge, .zr-fehler { margin-left:0; } }

  /* Upload */
  .upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 8px;
  }
  .upload-slot {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px dashed rgba(211,176,122,.3);
    background: rgba(255,255,255,.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
    overflow: hidden;
    gap: 6px;
  }
  .upload-slot:hover { border-color: rgba(211,176,122,.7); background: rgba(211,176,122,.06); }
  .upload-slot input { position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0; }
  .upload-slot .slot-icon { font-size: 1.4rem; }
  .upload-slot .slot-label { font-size: .7rem; font-weight: 700; color: rgba(243,246,251,.8); text-align: center; }
  .upload-slot img.preview { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
  .upload-slot .slot-remove { position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:.7rem;display:none;align-items:center;justify-content:center; }
  .upload-slot.has-preview .slot-remove { display:flex; }
  .upload-slot.laedt { opacity:.55; pointer-events:none; }
  .upload-slot.laedt::after { content:"überträgt …"; position:absolute; inset:auto 0 6px 0; text-align:center; font-size:.62rem; color:#d3b07a; }
  .foto-box { margin-top:10px; padding:14px 16px; border-radius:14px; background:rgba(211,176,122,.06); border:1px solid rgba(211,176,122,.2); }
  .foto-box p { margin:0; font-size:.82rem; line-height:1.5; color:rgba(243,246,251,.8); }
  .foto-box strong { color:#d3b07a; }
  .dsgvo-hint { font-size:.72rem;color:rgba(243,246,251,.72);line-height:1.6;margin:8px 0 0; }

  /* Kontaktfelder der Anfrage */
  .rein-feld { margin-bottom:12px; }
  .rein-feld label { display:block; margin-bottom:6px; font-size:.8rem; font-weight:700; color:rgba(243,246,251,.8); }
  .rein-feld input[type=text], .rein-feld input[type=email] {
    width:100%; padding:12px 14px; border-radius:12px; box-sizing:border-box;
    border:1.5px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
    color:#f3f6fb; font:inherit; font-size:.9rem; outline:none;
  }
  .rein-feld input:focus-visible { border-color:#d3b07a; outline:2px solid rgba(211,176,122,.5); outline-offset:1px; }
  .rein-feld input.fehlt { border-color:rgba(255,120,100,.75); }
  .anfrage-ok {
    margin-top:14px; padding:16px 18px; border-radius:14px;
    border:1.5px solid rgba(126,224,129,.4); background:rgba(126,224,129,.07);
    font-size:.86rem; line-height:1.65; color:rgba(243,246,251,.9);
  }
  .anfrage-ok strong { color:#9ee3a0; }

  /* Sticky summary */
  .summary-sticky { position: sticky; top: 116px; }
  .summary-price-big {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900;
    color: #f3f6fb;
    line-height: 1;
    margin-bottom: 4px;
  }
  .summary-sub { font-size: .75rem; color: rgba(243,246,251,.76); margin-bottom: 20px; }
  .summary-lines { display: grid; gap: 8px; margin-bottom: 20px; }
  .summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    font-size: .83rem;
  }
  .summary-line .s-label { color: rgba(243,246,251,.82); }
  .summary-line .s-val  { font-weight: 700; color: #f3f6fb; }
  .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(211,176,122,.1);
    border: 1px solid rgba(211,176,122,.25);
    margin-bottom: 16px;
  }
  .summary-total .s-label { font-weight: 700; color: rgba(243,246,251,.7); }
  .summary-total .s-val  { font-size: 1.3rem; font-weight: 900; color: var(--gold-2); }
  .cart-btn { width: 100%; }
  .cart-msg { font-size: .82rem; color: #9ee3a0; text-align: center; min-height: 1.4em; margin-top: 8px; }

  .rein-mehr { margin: 28px 0 0; text-align: center; font-size: .95rem; line-height: 1.6; color: rgba(243,246,251,.72); }
  .rein-mehr a { color: var(--gold-2); text-decoration: underline; }
  /* FAQ */
  .faq-list { display: grid; gap: 10px; }
  .faq-item {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    overflow: hidden;
    background: var(--panel);
  }
  .faq-q {
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    text-align: left;
    color: #f3f6fb;
    font: 700 .9rem 'Manrope',sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .faq-q:hover { color: var(--gold-2); }
  .faq-arrow { color: var(--gold-2); font-size: .8rem; transition: transform .2s; flex-shrink:0; }
  .faq-item.open .faq-arrow { transform: rotate(180deg); }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0 20px;
    font-size: .85rem;
    color: rgba(243,246,251,.84);
    line-height: 1.7;
  }
  .faq-item.open .faq-a { max-height: 400px; padding: 0 20px 16px; }

  /* Section header */
  .section-hd {
    margin-bottom: 24px;
  }
  .section-hd .eyebrow {
    display:inline-flex;align-items:center;gap:10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-2);font-weight:800;margin-bottom:8px;
  }
  .section-hd .eyebrow::before {
    content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--gold-1),transparent);
  }
  .section-hd h2 {
    font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1.6rem,2.5vw,2rem);margin:0 0 6px;
  }
  .section-hd p { color:rgba(243,246,251,.82);font-size:.9rem;margin:0; }

  /* ── Reinigungsklassen ──────────────────────────────────────────
     Drei Stufen, die optisch aufeinander aufbauen: Refresh ruhig,
     Care hervorgehoben, Restore als Premiumkarte. Die Ticket-Idee
     steckt nur in Details: eine Perforationslinie, die Klassennummer
     und gesperrte Versalien im Kopf der Karte. Alle Farben kommen
     aus den bestehenden Variablen, damit die Karten zum Rest der
     Seite gehören und nicht wie ein Fremdkörper wirken. */
  .kl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
  .kl-karte {
    position:relative; display:flex; flex-direction:column;
    border-radius:24px; background:var(--panel);
    border:1px solid var(--line); box-shadow:var(--shadow);
    backdrop-filter:blur(10px); overflow:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s;
  }
  .kl-karte:hover { transform:translateY(-5px); border-color:rgba(211,176,122,.42); box-shadow:0 26px 60px rgba(0,0,0,.44); }
  .kl-karte.aktiv { border-color:rgba(211,176,122,.75); }

  /* Kopfleiste im Anklang an einen Ticketabschnitt */
  .kl-stub {
    position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:15px 26px 16px;
    font:800 .64rem/1 'Manrope',sans-serif; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(243,246,251,.75); background:rgba(255,255,255,.022);
  }
  .kl-stub::after {
    content:''; position:absolute; left:20px; right:20px; bottom:0; height:1px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 5px, transparent 5px 11px);
  }
  .kl-marke {
    padding:4px 10px; border-radius:999px;
    background:rgba(211,176,122,.14); border:1px solid rgba(211,176,122,.34);
    color:var(--gold-2); letter-spacing:.14em; font-size:.6rem;
  }

  .kl-koerper { padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
  .kl-karte h3 { font-family:'Playfair Display',serif; font-size:1.6rem; margin:0; letter-spacing:.01em; }
  .kl-unter { margin:4px 0 0; font-size:.86rem; font-style:italic; color:rgba(243,246,251,.81); }

  .kl-preis-zeile { margin:18px 0 20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.07); }
  .kl-preis { display:block; font:900 1.8rem/1 'Manrope',sans-serif; color:#f3f6fb; }
  .kl-preis-zusatz { display:block; margin-top:6px; font-size:.72rem; line-height:1.5; color:rgba(243,246,251,.77); }

  .kl-liste { list-style:none; margin:0; padding:0; display:grid; gap:8px; flex:1; align-content:start; }
  .kl-liste li { display:flex; gap:9px; font-size:.85rem; line-height:1.5; color:rgba(243,246,251,.78); }
  .kl-liste li::before { content:'✓'; color:var(--gold-2); font-weight:900; font-size:.76rem; flex-shrink:0; margin-top:.2em; }

  .kl-cta { margin-top:22px; width:100%; }
  .kl-cta .pfeil { transition:transform .28s cubic-bezier(.4,0,.2,1); }
  .kl-karte:hover .kl-cta .pfeil { transform:translateX(4px); }

  /* Stufe 2: etwas stärker hervorgehoben – der Farbton liegt bewusst
     zwischen der ruhigen ersten und der vollen dritten Karte. */
  .kl-care {
    border-color:rgba(211,176,122,.34);
    background:linear-gradient(180deg, rgba(211,176,122,.045) 0%, rgba(10,14,23,.8) 40%);
    box-shadow:0 20px 50px rgba(0,0,0,.36);
  }
  .kl-care .kl-stub { color:rgba(243,246,251,.8); }

  /* Stufe 3: die hochwertigste Karte */
  .kl-restore {
    border-color:rgba(211,176,122,.5);
    background:linear-gradient(180deg, rgba(211,176,122,.09) 0%, rgba(10,14,23,.86) 38%);
    box-shadow:0 24px 58px rgba(0,0,0,.46);
  }
  .kl-restore .kl-stub { color:rgba(211,176,122,.85); background:rgba(211,176,122,.06); }
  .kl-restore .kl-preis { color:var(--gold-2); }
  .kl-restore h3 { color:#f7efe2; }

  .kl-hinweis {
    margin-top:18px; padding:16px 20px; border-radius:18px;
    background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
    font-size:.78rem; line-height:1.75; color:rgba(243,246,251,.82);
  }

  /* Klassenauswahl im Buchungsblock */
  .kl-pick { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
  .kl-pick-btn {
    display:grid; gap:3px; padding:13px 12px; border-radius:14px;
    border:1.5px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
    color:rgba(243,246,251,.8); font:inherit; text-align:center; cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .kl-pick-btn:hover { border-color:rgba(211,176,122,.35); background:rgba(211,176,122,.05); }
  .kl-pick-btn.aktiv { border-color:rgba(211,176,122,.7); background:rgba(211,176,122,.12); }
  .kl-pick-name { font-weight:800; font-size:.92rem; }
  .kl-pick-preis { font-size:.78rem; font-weight:700; color:var(--gold-2); }
  .kl-pick-unter { font-size:.7rem; color:rgba(243,246,251,.78); }
  .kl-basis { margin:0; font-size:.76rem; line-height:1.6; color:rgba(243,246,251,.78); }

  /* Extra, das in der gewählten Klasse schon enthalten ist */
  .extra-toggle.gesperrt { opacity:.45; cursor:default; border-style:dashed; }
  .extra-toggle.gesperrt:hover { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03); }

  @media(max-width:980px){
    .kl-grid { grid-template-columns:1fr; }
  }
  @media(max-width:580px){
    .kl-pick { grid-template-columns:1fr; }
    .kl-koerper { padding:20px; }
    .kl-stub { padding:14px 20px 15px; }
  }
  @media (prefers-reduced-motion: reduce){
    .kl-karte, .kl-cta .pfeil { transition:none; }
    .kl-karte:hover { transform:none; }
    .kl-karte:hover .kl-cta .pfeil { transform:none; }
  }

  /* Responsive */
  @media(max-width:1100px) and (min-width:961px){
    .rein-hero { padding:44px 32px; gap:28px; }
    .rein-hero-karte { padding:18px 20px; column-gap:16px; }
  }
  @media(max-width:960px){
    .rein-hero { grid-template-columns:minmax(0,1fr); }
    .rein-hero > * { min-width:0; }
    .steps-grid { grid-template-columns:1fr 1fr; }
    .step-arrow { display:none; }
    .rein-layout { grid-template-columns:1fr; }
    .summary-sticky { position:static; }
  }
  @media(max-width:580px){
    .steps-grid { grid-template-columns:1fr; }
    .rein-hero { padding:28px 20px; }
    .rein-hero-karte { padding:16px 16px; column-gap:14px; }
    .rein-hero-karte-nr { font-size:1.8rem; }
    .rein-hero-badge { flex-wrap:wrap; max-width:100%; box-sizing:border-box; padding:12px 16px; gap:4px 10px; }
    .rein-hero-badge span:not(#heroPreis) { flex:1 1 110px; min-width:0; }
    .rein-card { padding:20px; }
    .upload-grid { grid-template-columns:1fr 1fr; }
  }

  /* Sticky header fix */
  .site-sticky{position:sticky;top:0;z-index:3000;background:rgba(11,13,18,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);}
  .site-header{position:relative!important;top:auto!important;z-index:auto!important;background:transparent!important;backdrop-filter:none!important;border-bottom:none!important;}
  .catalog-wrap{overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);filter:blur(2px);transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .25s ease,transform .28s cubic-bezier(.4,0,.2,1),filter .25s ease;background:rgba(18,23,34,.98);border-bottom:1px solid transparent;}
  .catalog-wrap.open{max-height:600px;opacity:1;transform:translateY(0);filter:blur(0);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.35);}
  .catalog-close{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);background:rgba(18,23,34,.95);border:1px solid rgba(255,255,255,.14);border-top:none;border-radius:0 0 14px 14px;color:rgba(211,176,122,.8);width:64px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3500;transition:background .18s,color .18s,border-color .18s;box-shadow:0 6px 16px rgba(0,0,0,.35);pointer-events:auto;opacity:1;}
  .catalog-close::before{content:'';display:block;width:8px;height:8px;border-right:2px solid rgba(211,176,122,.7);border-bottom:2px solid rgba(211,176,122,.7);transform:rotate(45deg);margin-top:-4px;transition:transform .25s ease;}
  .catalog-wrap.open .catalog-close::before{transform:rotate(-135deg);margin-top:4px;}
  @media(max-width:768px){.catalog-inner{grid-template-columns:1fr 1fr!important;gap:16px!important;}.catalog-wrap.open{max-height:900px;}}
  @media(max-width:480px){.catalog-inner{grid-template-columns:1fr!important;}}
  /* Secondary price, upload and checkout text must meet normal-text contrast. */
  .kl-preis-zusatz,.kl-pick-unter,.kl-basis,.dsgvo-hint,.summary-sub{
    color:rgba(243,246,251,.76);
  }
  .rein-card p[style*="color:rgba(243,246,251,.76)"],
  .rein-card p[style*="color:rgba(243,246,251,.78)"],
  p[style*="color:rgba(243,246,251,.76)"],p[style*="color:rgba(243,246,251,.78)"]{
    color:rgba(243,246,251,.76) !important;
  }
    .preis-hinweis {
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(10,14,23,.6);
      padding: 18px 0;
    }
    .preis-hinweis p {
      margin: 0;
      font-size: .82rem;
      line-height: 1.7;
      color: rgba(243,246,251,.85);
    }
    .preis-hinweis strong { color: rgba(243,246,251,.85); }
    .preis-hinweis a { color: #d3b07a; text-decoration: underline; }