/* Probierraum (/probieren): ruhige, helle Fassung im Beton-Rahmen der Unterseiten – die „einfache Ansicht“.
   Laptop: links Einstellungen (Spalte 380 px), rechts die Vorschau groß. Handy: Vorschau füllt den Bildschirm,
   Einstellungen als Blatt von unten (.pr-blatt-auf). Lädt nach hallen.css, unterseite.css, leiste.css. */
.probier { --pr-flaeche: #1d1b17; --pr-flaeche2: #24211c; --pr-linie: rgba(232,181,110,.26); --pr-zus-h: 0px; background: #12110e; }
.probier main { display: block; }
.pr-buehne { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; padding: 84px max(16px, var(--rand-r)) 20px max(16px, var(--rand));
  height: 100vh; height: 100dvh; min-height: 620px; }

/* ---------- Einstellungen ---------- */
.pr-einstellungen { display: flex; flex-direction: column; min-height: 0; background: var(--pr-flaeche); border: 1px solid var(--pr-linie); border-radius: 10px; }
.pr-einst-innen { flex: 1; overflow-y: auto; padding: 22px 22px 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.pr-blatt-kopf { display: none; }
.pr-h1 { margin: 6px 0 8px; font-family: var(--f-titel); font-weight: 500; font-size: 1.9rem; line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.pr-einl { margin: 0 0 14px; color: var(--leise); font-size: 1rem; line-height: 1.45; }
.pr-schritt-f, .pr-mehr fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.pr-schritt-f legend, .pr-mehr legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0;
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.pr-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--licht); color: #17120a; font-size: .8125rem; letter-spacing: 0; }
.pr-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pr-stufen { grid-template-columns: minmax(0, 1fr); }
.pr-kachel, .pr-haken { position: relative; display: block; cursor: pointer; }
.pr-kachel input, .pr-haken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pr-kachel-innen { display: grid; gap: 2px; align-content: center; min-height: 52px; padding: 10px 12px; border: 1px solid rgba(233,228,218,.18);
  border-radius: 8px; background: var(--pr-flaeche2); color: var(--text); font-size: .98rem; line-height: 1.25; transition: border-color .2s, background .2s; }
.pr-kachel:hover .pr-kachel-innen { border-color: rgba(232,181,110,.6); }
.pr-kachel input:checked + .pr-kachel-innen { border-color: var(--licht); background: rgba(232,181,110,.14); box-shadow: inset 0 0 0 1px var(--licht); }
.pr-kachel input:focus-visible + .pr-kachel-innen, .pr-haken input:focus-visible + .pr-kachel-innen { outline: 2px solid var(--licht); outline-offset: 2px; }
.pr-stufe .pr-kachel-innen { grid-template-columns: 1fr auto; column-gap: 12px; }
.pr-stufe b { font-family: var(--f-titel); font-weight: 500; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; }
.pr-stufe .pr-preis { justify-self: end; font-family: var(--f-titel); font-size: 1.35rem; color: var(--licht); }
.pr-stufe .pr-preis-zusatz, .pr-stufe .pr-klein { grid-column: 1 / -1; }
.pr-klein, .pr-preis-zusatz { display: block; font-size: .8125rem; line-height: 1.35; color: var(--leise); }
.pr-klein-k .pr-kachel-innen { min-height: 44px; }
.pr-feld { display: grid; gap: 4px; margin-bottom: 10px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.pr-feld input { min-height: 46px; padding: 8px 12px; border: 1px solid rgba(233,228,218,.22); border-radius: 8px; background: #0f0e0c; color: var(--text);
  font: 16px var(--f-text); text-transform: none; letter-spacing: 0; }
.pr-feld input:focus { outline: 2px solid var(--licht); outline-offset: 1px; border-color: transparent; }
.pr-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pr-farben .pr-kachel-innen { grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; }
.pr-punkt { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.pr-farbname { font-size: .8125rem; line-height: 1.2; }
.pr-haken-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-haken .pr-kachel-innen { min-height: 44px; padding: 8px 12px; font-size: .9rem; }
.pr-haken input:checked + .pr-kachel-innen { border-color: var(--licht); background: rgba(232,181,110,.14); }
.pr-haken input:checked + .pr-kachel-innen::before { content: "✓ "; color: var(--licht); }
.pr-mehr { margin: 4px 0 12px; border-top: 1px solid var(--kante); }
.pr-mehr summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-family: var(--f-mono); font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--licht); }
.pr-mehr[open] summary { margin-bottom: 8px; }
.pr-aktion { display: grid; gap: 8px; padding: 14px 22px 16px; border-top: 1px solid var(--pr-linie); background: var(--pr-flaeche); border-radius: 0 0 10px 10px; }
.pr-aktion .pr-bestellen { width: 100%; min-height: 52px; font-size: .875rem; }
.pr-mail { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--leise); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.pr-mail:hover { color: var(--text); }

/* ---------- Vorschau ---------- */
.pr-vorschau { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pr-vorschau-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.pr-geraet { display: inline-flex; border: 1px solid var(--pr-linie); border-radius: 999px; padding: 3px; }
.pr-geraet button { min-height: 44px; min-width: 88px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--leise); cursor: pointer;
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.pr-geraet button[aria-pressed="true"] { background: var(--licht); color: #17120a; }
.pr-neu { display: inline-flex; align-items: center; min-height: 44px; color: var(--leise); font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em; text-decoration: none; }
.pr-neu:hover { color: var(--text); }
.pr-rahmen { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--pr-linie); background: #0a0a09;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pr-rahmen iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.pr-rahmen[data-geraet="handy"] { background: radial-gradient(ellipse at 50% 30%, #23201b, #0a0a09 70%); }
.pr-rahmen[data-geraet="handy"] iframe { border-radius: 26px; box-shadow: 0 0 0 10px #050505, 0 0 0 11px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.6); }
.pr-zusammen { display: none; }

/* ---------- Abschnitte darunter ---------- */
.pr-abschnitt { padding: 72px 0 8px; scroll-margin-top: 70px; }
.pr-abschnitt .huelle { max-width: 1120px; margin: 0 auto; padding: 0 var(--rand); }
.pr-h2 { margin: 6px 0 18px; font-family: var(--f-titel); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: .95; text-transform: uppercase; }
.pr-text { max-width: 46rem; color: var(--text); font-size: 1.05rem; line-height: 1.55; }
.pr-hervor { display: inline-block; padding: 12px 16px; border: 1px solid var(--pr-linie); border-radius: 8px; background: var(--pr-flaeche); }
.pr-pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-paket { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--pr-flaeche); border: 1px solid rgba(233,228,218,.14); border-radius: 10px; }
.pr-paket.empfohlen { border-color: var(--licht); }
.pr-paket h3, .pr-karte h3, .pr-schritt h3 { margin: 0; font-family: var(--f-titel); font-weight: 500; font-size: 1.7rem; text-transform: uppercase; line-height: 1; }
.pr-zeile { margin: 0; font-style: italic; color: var(--leise); }
.pr-paket-preis { display: grid; gap: 2px; margin: 8px 0 0; }
.pr-paket-preis .pr-preis { font-family: var(--f-titel); font-size: 2.6rem; line-height: 1; color: var(--licht); }
.pr-umfang { margin: 4px 0 0; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.pr-punkte { margin: 8px 0; padding-left: 1.1em; display: grid; gap: 4px; line-height: 1.4; }
.pr-paket .knopf { margin-top: auto; }
.pr-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pr-karte { padding: 20px; background: var(--pr-flaeche); border: 1px solid rgba(233,228,218,.14); border-radius: 10px; }
.pr-karte p { line-height: 1.5; }
.pr-tabelle { overflow-x: auto; max-width: 46rem; }
.pr-tabelle table { width: 100%; border-collapse: collapse; }
.pr-tabelle th, .pr-tabelle td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--kante); vertical-align: top; }
.pr-tabelle th { font-family: var(--f-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--licht); }
.pr-tabelle td:last-child { white-space: nowrap; color: var(--licht); }
.pr-liste { max-width: 46rem; padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.45; }
.pr-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pr-schritt { padding: 20px; background: var(--pr-flaeche); border: 1px solid rgba(233,228,218,.14); border-radius: 10px; }
.pr-zeit { margin: 0 0 6px; font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--licht); }
.pr-wer { display: inline-block; min-width: 2.6em; margin-right: 6px; font-family: var(--f-mono); font-size: .8125rem; text-transform: uppercase; color: var(--leise); }
.pr-faq { max-width: 52rem; }
.pr-faq details { border-bottom: 1px solid var(--kante); }
.pr-faq summary { display: flex; align-items: center; min-height: 56px; padding: 8px 0; cursor: pointer; font-size: 1.1rem; }
.pr-faq p { margin: 0 0 16px; line-height: 1.55; color: var(--text); }
.pr-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-knoepfe .lk-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid var(--licht); border-radius: 999px;
  background: none; color: var(--text); font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.pr-knoepfe .lk-tel svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pr-knoepfe .knopf { min-height: 48px; }
.pr-erlebnis { max-width: 1120px; margin: 40px auto 0; padding: 0 var(--rand); }
.pr-erlebnis .textlink { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1100px) and (min-width: 721px) {
  .pr-buehne { grid-template-columns: 340px minmax(0, 1fr); }
  .pr-pakete, .pr-schritte { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Handy: Vorschau groß, Einstellungen als Blatt ---------- */
@media (max-width: 720px) {
  .probier { --pr-zus-h: 64px; }
  .pr-buehne { display: block; height: auto; min-height: 0; padding: 0; }
  .pr-vorschau { height: calc(100svh - 64px - var(--leiste-h) - var(--pr-zus-h)); margin-top: 64px; }
  .pr-vorschau-kopf { display: none; }
  .pr-rahmen { border-radius: 0; border: 0; border-bottom: 1px solid var(--pr-linie); }
  .pr-einstellungen { position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(var(--leiste-h) + var(--pr-zus-h)); height: 52svh;
    border-radius: 14px 14px 0 0; transform: translateY(calc(100% + var(--leiste-h) + var(--pr-zus-h) + 20px)); visibility: hidden;
    transition: transform .3s ease, visibility 0s .3s; box-shadow: 0 -20px 50px rgba(0,0,0,.6); }
  .pr-blatt-auf .pr-einstellungen { transform: none; visibility: visible; transition: transform .3s ease; }
  .pr-blatt-kopf { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 18px; border-bottom: 1px solid var(--pr-linie);
    font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
  .pr-fertig { min-height: 44px; padding: 0 16px; border: 1px solid var(--licht); border-radius: 999px; background: none; color: var(--licht);
    font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  .pr-einst-innen { padding: 14px 16px; }
  .pr-einst-innen > .kicker, .pr-h1, .pr-einst-innen > .pr-einl { display: none; }
  .pr-aktion { display: none; }
  .pr-zusammen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; position: fixed; z-index: 36; left: 0; right: 0;
    bottom: var(--leiste-h); height: var(--pr-zus-h); padding: 8px 10px; background: rgba(22,20,17,.97); border-top: 1px solid var(--pr-linie);
    transition: transform .25s ease; }
  .pr-buehne-weg:not(.pr-blatt-auf) .pr-zusammen { transform: translateY(calc(100% + var(--leiste-h))); }
  .pr-zusammen-knopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; min-width: 0; padding: 0 12px;
    border: 1px solid var(--pr-linie); border-radius: 8px; background: var(--pr-flaeche2); color: var(--text); font: .9rem/1.2 var(--f-text); text-align: left; cursor: pointer; }
  .pr-zusammen-knopf [data-zusammen] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pr-pfeil { color: var(--licht); transition: transform .25s; }
  .pr-blatt-auf .pr-pfeil { transform: rotate(180deg); }
  .pr-zusammen .pr-bestellen { min-height: 48px; padding: 0 16px; font-size: .8125rem; }
  .pr-abschnitt { padding-top: 52px; }
  .pr-pakete, .pr-karten, .pr-schritte { grid-template-columns: minmax(0, 1fr); }
  .pr-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-stufen { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pr-einstellungen, .pr-zusammen { transition: none !important; } }
.pr-gewerke .pr-kachel-innen { min-height: 46px; padding: 8px 12px; }
@media (max-width: 720px) { .probier .leiste-unten { grid-template-columns: repeat(2, 1fr); } .probier .leiste-unten .lk-demo { display: none; } }

/* ---------- Bestellblatt (P5) ---------- */
.pr-bestellblatt { width: min(520px, 100vw); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0;
  border-left: 1px solid var(--pr-linie); background: #1a1815; color: var(--text); box-shadow: -30px 0 80px rgba(0,0,0,.6); }
.pr-bestellblatt::backdrop { background: rgba(5,5,4,.6); }
.pr-bestellblatt[open] { display: flex; flex-direction: column; }
.pr-bestell-form, .pb-danke { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pr-bestell-form[hidden], .pb-danke[hidden] { display: none; }
.pb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px 12px 22px; border-bottom: 1px solid var(--pr-linie); }
.pb-kopf h2 { margin: 0; font-family: var(--f-titel); font-weight: 500; font-size: 1.8rem; line-height: 1; text-transform: uppercase; }
.pb-zu { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--text); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.pb-innen { flex: 1; overflow-y: auto; padding: 18px 22px 24px; display: grid; gap: 6px; align-content: start; overscroll-behavior: contain; }
.pb-auswahl { margin-bottom: 8px; padding: 14px 16px; border: 1px solid var(--licht); border-radius: 10px; background: rgba(232,181,110,.08); }
.pb-was { margin: 4px 0 2px; font-family: var(--f-titel); font-size: 1.4rem; text-transform: uppercase; }
.pb-aendern { min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--licht); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.pr-bestellblatt textarea { min-height: 88px; padding: 8px 12px; border: 1px solid rgba(233,228,218,.22); border-radius: 8px; background: #0f0e0c; color: var(--text); font: 16px var(--f-text); resize: vertical; }
.pr-bestellblatt [aria-invalid="true"] { border-color: #f0a37a; }
.pb-haken { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 4px; font-size: .98rem; line-height: 1.45; cursor: pointer; }
.pb-haken input { flex: none; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--licht); }
.pb-haken a { color: var(--licht); }
.pb-zahlen { margin: 6px 0; padding: 10px 12px; border-left: 3px solid var(--licht); background: rgba(255,255,255,.03); line-height: 1.45; }
.pb-meldung { margin: 0; color: #f0a37a; line-height: 1.45; }
.pb-meldung:empty { display: none; }
.pb-meldung a { color: var(--licht); }
.pb-senden { width: 100%; min-height: 54px; margin-top: 6px; font-size: .875rem; }
.pb-weiter { padding: 12px 14px; border: 1px solid rgba(233,228,218,.14); border-radius: 10px; background: var(--pr-flaeche); }
.pb-weiter p { margin: 4px 0; line-height: 1.45; }
.pb-danke a { color: var(--licht); }
@media (max-width: 720px) {
  .pr-bestellblatt { width: 100vw; height: auto; max-height: 92dvh; margin: auto 0 0; border-left: 0; border-top: 1px solid var(--pr-linie); border-radius: 14px 14px 0 0; }
  .pb-innen { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) { .pr-feld { font-size: .8125rem; } }