/* DIE DETAILSEITEN der CRM-Seite (15.10.2026, Wirt: „zu viel Ästhetik, zu wenig Information" — an jedem Punkt ein
   Pfeil; ein Klick wischt die Sektion nach rechts weg, links steht die genaue Beschreibung, rechts ein ECHTES
   Bildschirmfoto aus dem Produkt). Im Bild steht zunächst nichts; tippt man einen Punkt links an, wird er markiert und
   seine Stelle im Bild violett umrahmt, der Rest tritt hell zurück — Wirt, 15.10.2026: „die Nummerierung nicht sofort".
   Bilder: bilder/produkt/*.jpg (Demobestand, 1600 × 1000 bei doppelter Dichte). Ablauf detail.js. Präfix dt-. */

/* der Pfeil am Punkt — kein Systempfeil: eine feine Linie mit offener Spitze, sie wird beim Drüberfahren länger */
.dt-pfeil{margin-top:28px;padding:6px 0;text-align:left;border:0;background:none;display:inline-flex;align-items:center;gap:16px;cursor:pointer;
  font:500 17px/1 'DM Sans',system-ui,sans-serif;color:#101013}
.dt-pfeil svg{width:64px;height:14px;overflow:visible;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.dt-pfeil line,.dt-pfeil path{stroke:#101013;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dt-pfeil:hover svg,.dt-pfeil:focus-visible svg{width:96px}
.dt-pfeil:focus-visible{outline:2px solid #B356FF;outline-offset:6px;border-radius:4px}
.dt-pfeile{display:flex;flex-wrap:wrap;gap:6px 40px;margin-top:28px}
.dt-pfeile .dt-pfeil{margin-top:0}
.pk-schritt:not(.an){pointer-events:none}

/* während die Detailseite offen ist: die Sektion fährt nach rechts weg */
.dt-weg{transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .5s;transform:translateX(18vw);opacity:0}
.dt-zurueck-an{transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .6s .15s}
html.dt-offen{overflow:hidden}


/* die Detailseite: weiß, wischt von links herein */
.dt{position:fixed;inset:0;z-index:40;background:#FFFFFF;color:#101013;overflow:hidden;visibility:hidden;
  clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1),visibility 0s .7s}
.dt.auf{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1),visibility 0s}
/* Text 420 · Abstand 120 · Bild der Rest (bei 1920: 1220 breit) — das Bild steht deutlich rechts, mit Luft zur Erklärung */
.dt-innen{position:relative;width:min(100% - 96px,1760px);height:100%;margin:0 auto;display:grid;
  grid-template-columns:420px minmax(0,1fr);grid-template-rows:96px minmax(0,1fr);column-gap:120px}
.dt-kopf{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between}
.dt-zu{padding:8px 0;border:0;background:none;display:inline-flex;align-items:center;gap:14px;cursor:pointer;font:500 17px/1 'DM Sans',system-ui,sans-serif;color:#101013}
.dt-zu svg{width:40px;height:14px;overflow:visible}
.dt-zu line,.dt-zu path{stroke:#101013;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dt-zu:focus-visible{outline:2px solid #B356FF;outline-offset:6px;border-radius:4px}
.dt-esc{font-size:14px;color:#6A6A70}
.dt-esc kbd{display:inline-block;margin-right:6px;padding:3px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px #C9C9CE;font:500 12px/1 'DM Sans',system-ui,sans-serif;color:#4A4A50}

/* links: was die Seite kann */
.dt-text{min-height:0;overflow-y:auto;padding:28px 6px 56px 0;scrollbar-width:thin}
.dt-text > *{opacity:0;transform:translateX(-24px)}
.dt.auf .dt-text > *{opacity:1;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.dt.auf .dt-text > :nth-child(2){transition-delay:.05s} .dt.auf .dt-text > :nth-child(3){transition-delay:.1s}
.dt.auf .dt-text > :nth-child(4){transition-delay:.15s} .dt.auf .dt-text > :nth-child(5){transition-delay:.2s}
.dt-marke{margin:0 0 22px;font-weight:500;font-size:14px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#6A6A70}
.dt-titel{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:46px;line-height:52px;letter-spacing:-.01em}
.dt-intro{margin:22px 0 0;font-size:17px;line-height:27px;color:#4A4A50}
.dt-hinweis{margin:40px 0 14px;font-size:14px;line-height:20px;color:#6A6A70}

/* die Punkte: jeder ein Container. Antippen markiert ihn (violett = Auswahl) und zeigt die Stelle im Bild */
.dt-punkte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dt-punkt{position:relative;padding:17px 52px 18px 20px;border-radius:12px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #E2E2E6;cursor:pointer;
  transition:box-shadow .2s,background .2s}
.dt-punkt:hover{box-shadow:inset 0 0 0 1px #9A9AA2}
.dt-punkt:focus-visible{outline:2px solid #B356FF;outline-offset:3px}
.dt-punkt.an{background:#FAF6FF;box-shadow:inset 0 0 0 2px #B356FF}
.dt-punkt h3{margin:0;font-weight:600;font-size:17px;line-height:22px}
.dt-punkt p{margin:7px 0 0;font-size:15px;line-height:23px;color:#4A4A50}
/* rechts im Container: ein leerer Kringel — markiert wird er zum Punkt, der auch im Bild steht */
.dt-punkt::after{content:"";position:absolute;right:20px;top:19px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B9B9C0;transition:box-shadow .2s,background .2s}
.dt-punkt:hover::after{box-shadow:inset 0 0 0 1.5px #101013}
.dt-punkt.an::after{background:#B356FF;box-shadow:inset 0 0 0 1.5px #B356FF}

/* rechts: das echte Bildschirmfoto — die Stelle erst, wenn ein Punkt gewählt ist */
.dt-bild{min-height:0;display:flex;align-items:flex-start;padding:28px 0 56px}
.dt-fig{margin:0;width:100%;max-width:calc((100vh - 96px - 120px) * var(--dt-v,1.6))}
.dt-rahmen{position:relative;width:100%;aspect-ratio:var(--dt-v,1.6);border-radius:14px;box-shadow:0 0 0 1px #E2E2E6;
  background:#F5F4F8;opacity:0;transform:translateX(40px);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.dt.auf .dt-rahmen{opacity:1;transform:none;transition-delay:.25s}
.dt-rahmen{overflow:hidden}
.dt-rahmen img{display:block;width:100%;height:100%;border-radius:14px;object-fit:cover}
/* die markierte Fläche: violetter Rahmen um die Stelle, der Rest des Bildes tritt hell zurück. Kein Name im Bild — er
   stünde über dem Inhalt; der markierte Container links sagt, was es ist. */
.dt-ort{position:absolute;border-radius:10px;pointer-events:none;box-shadow:0 0 0 2px #B356FF,0 0 0 9999px rgba(255,255,255,.55);
  opacity:0;transition:opacity .3s}
.dt-ort.an{opacity:1}
.dt-quelle{margin-top:14px;font-size:14px;line-height:20px;color:#6A6A70;opacity:0;transition:opacity .5s}
.dt.auf .dt-quelle{opacity:1;transition-delay:.45s}

@media (max-width:1599px){
  .dt-innen{width:min(100% - 64px,1760px);grid-template-columns:360px minmax(0,1fr);grid-template-rows:84px minmax(0,1fr);column-gap:72px}
  .dt-titel{font-size:38px;line-height:44px}
  .dt-intro{font-size:16px;line-height:25px}
  .dt-hinweis{margin-top:32px}
  .dt-punkte{gap:8px}
  .dt-punkt{padding:14px 46px 15px 18px} .dt-punkt::after{right:18px;top:16px}
  .dt-punkt h3{font-size:16px;line-height:21px}
  .dt-punkt p{font-size:14px;line-height:21px;margin-top:5px}
  .dt-fig{max-width:calc((100vh - 84px - 110px) * var(--dt-v,1.6))}
}
/* schmal: eine Spalte — Titel, dann das Bild (klebt oben, damit die gewählte Stelle sichtbar bleibt), dann die Punkte */
@media (max-width:999px){
  .dt{overflow-y:auto}
  .dt-innen{width:min(100% - 32px,720px);display:flex;flex-direction:column;height:auto;padding-bottom:48px}
  .dt-kopf{height:72px;flex:0 0 auto} .dt-esc{display:none}
  .dt-text{display:contents}
  .dt-marke{order:1;margin:8px 0 16px} .dt-titel{order:2;font-size:32px;line-height:38px} .dt-intro{order:3;margin-top:16px}
  .dt-bild{order:4;position:sticky;top:0;z-index:2;background:#FFFFFF;padding:20px 0 14px}
  .dt-hinweis{order:5;margin:6px 0 12px} .dt-punkte{order:6}
  .dt-fig{max-width:none}
  .dt-quelle{display:none}
  .dt-ort{border-radius:6px}
  .dt-pfeil{font-size:16px} .dt-pfeil svg{width:48px}
}
@media (prefers-reduced-motion:reduce){
  .dt,.dt.auf,.dt-weg,.dt-rahmen,.dt-text > *,.dt-ort{transition:none !important}
}