/* Guided experience, 27 September 2026. Existing color roles stay intact. */
html.zr-experience-ready [data-experience-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--zr2-duration-reveal) var(--zr2-ease-standard), transform var(--zr2-duration-reveal) var(--zr2-ease-standard); }
html.zr-experience-ready [data-experience-reveal].is-revealed { opacity: 1; transform: none; }
main.zr-ratgeber { max-width: 860px; }
main.wrap > .zr-guide-group { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.zr-result-options { margin-block: var(--zr2-space-4); border-top: 1px solid var(--zr2-line); }
.zr-result-options > summary { cursor: pointer; color: var(--zr2-body); font-size: var(--zr2-type-body); padding-block: var(--zr2-space-4); min-height: 44px; }
#top.zr-hero {
  grid-template-areas: "kopf scene" "copy scene" "topics topics";
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  min-height: 800px;
  gap: var(--zr2-space-4) var(--zr2-space-8);
  padding-top: var(--zr2-space-10);
  padding-bottom: var(--zr2-space-8);
}
#top h1 { font-size: var(--zr2-type-display-zahl); line-height: 1.04; max-width: 11ch; }
#top .zr-hero-lead { font-size: var(--zr2-type-title); max-width: 40ch; }
#top .zr-hero-zusagen { font-size: var(--zr2-type-small); }
.zr-doc-figure { grid-area: scene; align-self: start; position: sticky; top: var(--zr2-space-10); margin: 0; min-width: 0; }
.zr-doc-figure figcaption { font-size: var(--zr2-type-small); color: var(--zr2-muted); text-align: center; margin: var(--zr2-space-4) 0; }
.zr-doc-scene { --sort: 1; position: relative; height: 450px; perspective: 1000px; overflow: hidden; border-radius: var(--zr2-radius-card); background: var(--zr2-surface-sunken); border: 1px solid var(--zr2-line); }
.zr-doc { position: absolute; left: 50%; top: 50%; width: 205px; height: 265px; padding: var(--zr2-space-5); box-sizing: border-box; background: var(--zr2-surface-raised); border: 1px solid var(--zr2-control-border); border-radius: var(--zr2-radius-control); color: var(--zr2-ink); transform-style: preserve-3d; backface-visibility: hidden; }
.zr-doc small { display: block; color: var(--zr2-body); font-size: var(--zr2-type-small); }
.zr-doc strong { display: block; margin: var(--zr2-space-4) 0 var(--zr2-space-6); font-size: var(--zr2-type-lead); line-height: 1.2; font-weight: 600; }
.zr-doc-line { height: 1px; background: var(--zr2-line-strong); margin-block: var(--zr2-space-4); }
.zr-doc-line:nth-last-child(2) { width: 70%; }
.zr-doc-strom { z-index: 3; transform: translate(calc(-50% - 70px + var(--sort) * 55px),calc(-50% - 35px + var(--sort) * 10px)) rotateX(calc(12deg - var(--sort) * 12deg)) rotateY(calc(-18deg + var(--sort) * 18deg)) rotateZ(calc(-18deg + var(--sort) * 18deg)); }
.zr-doc-handy { z-index: 2; transform: translate(calc(-50% + 65px - var(--sort) * 50px),calc(-50% - 30px + var(--sort) * 20px)) rotateX(calc(8deg - var(--sort) * 8deg)) rotateY(calc(22deg - var(--sort) * 22deg)) rotateZ(calc(17deg - var(--sort) * 17deg)); }
.zr-doc-abos { z-index: 1; transform: translate(calc(-50% + 20px + var(--sort) * 25px),calc(-50% + 60px - var(--sort) * 55px)) rotateX(calc(-12deg + var(--sort) * 12deg)) rotateZ(calc(9deg - var(--sort) * 9deg)); }
.zr-doc-result { position: absolute; z-index: 4; bottom: var(--zr2-space-6); left: var(--zr2-space-6); right: var(--zr2-space-6); padding: var(--zr2-space-4); border: 1px solid var(--zr2-line-strong); background: var(--zr2-canvas); border-radius: var(--zr2-radius-control); transform: translateY(calc(20px - var(--sort) * 20px)); opacity: calc(.18 + var(--sort) * .82); }
.zr-doc-result span { display: block; color: var(--zr2-body); font-size: var(--zr2-type-small); margin-bottom: var(--zr2-space-2); }
.zr-doc-result strong { font-size: var(--zr2-type-body); }
.zr-motion-toggle { display: block; margin: 0 auto; background: transparent; color: var(--zr2-body); border: 0; font: inherit; font-size: var(--zr2-type-small); min-height: 44px; text-decoration: underline; cursor: pointer; }
.zr-motion-toggle[hidden] { display: none; }
.zr-topic-details { grid-area: topics; border-top: 1px solid var(--zr2-line); margin-top: var(--zr2-space-5); padding-top: var(--zr2-space-4); }
.zr-topic-details > summary { cursor: pointer; min-height: 44px; color: var(--zr2-body); font-size: var(--zr2-type-body); }
.zr-topic-details .zr-haus-panel { margin-top: var(--zr2-space-4); max-width: 800px; margin-inline: auto; }
.zr-situations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--zr2-space-5); margin: var(--zr2-space-8) 0; }
.zr-situation { min-width: 0; }
.zr-situation img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; border-radius: var(--zr2-radius-control); }
.zr-situation h3 { font-family: var(--zr2-font-body); font-size: var(--zr2-type-title); line-height: 1.3; margin: var(--zr2-space-4) 0 var(--zr2-space-2); }
.zr-situation p { font-size: var(--zr2-type-body); color: var(--zr2-body); line-height: 1.6; margin: 0 0 var(--zr2-space-3); }
.zr-situation a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--zr2-type-body); font-weight: 600; color: var(--zr2-trust); }
.zr-guide-jump { display: flex; gap: var(--zr2-space-3); flex-wrap: wrap; margin: var(--zr2-space-5) 0 var(--zr2-space-8); }
.zr-guide-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--zr2-space-2) var(--zr2-space-4); color: var(--zr2-ink); border: 1px solid var(--zr2-control-border); border-radius: var(--zr2-radius-control); text-decoration: none; }
.zr-guide-group { margin: var(--zr2-space-10) 0; scroll-margin-top: 110px; }
.zr-guide-heading { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: var(--zr2-space-6); margin-bottom: var(--zr2-space-5); }
.zr-guide-heading img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--zr2-radius-control); }
.zr-guide-heading h2 { margin: 0 0 var(--zr2-space-2); }
.zr-guide-heading p { margin: 0; color: var(--zr2-body); }
.zr-reading-nav { margin: var(--zr2-space-6) 0; padding: var(--zr2-space-4) 0; border-block: 1px solid var(--zr2-line); }
.zr-reading-nav summary { font-size: var(--zr2-type-body); cursor: pointer; min-height: 44px; display: list-item; }
.zr-reading-nav ul { margin: 0; padding-left: var(--zr2-space-5); }
.zr-reading-nav a { display: inline-block; padding-block: var(--zr2-space-2); font-size: var(--zr2-type-body); color: var(--zr2-trust); }
.zr-editorial-image { margin: var(--zr2-space-6) 0; }
.zr-editorial-image img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--zr2-radius-control); }
.zr-editorial-image figcaption { color: var(--zr2-muted); font-size: var(--zr2-type-small); margin-top: var(--zr2-space-2); }
.zr-next-note { border-left: 2px solid var(--zr2-line-strong); padding-left: var(--zr2-space-4); margin: var(--zr2-space-4) 0; color: var(--zr2-body); font-size: var(--zr2-type-body); line-height: 1.6; }
[id^="lesen-"] { scroll-margin-top: 110px; }
@media (max-width: 900px) {
  #top.zr-hero { grid-template-columns: minmax(0,1fr); grid-template-areas: "kopf" "copy" "scene" "topics"; min-height: 0; }
  #top h1 { max-width: 15ch; }
  .zr-doc-figure { position: relative; top: auto; width: 100%; max-width: 540px; margin: var(--zr2-space-4) auto 0; }
  .zr-situations { gap: var(--zr2-space-4); }
}
@media (max-width: 640px) {
  #top.zr-hero { padding: var(--zr2-space-7) var(--zr2-space-4); }
  .zr-doc-scene { height: 370px; }
  .zr-doc { width: 175px; height: 225px; }
  .zr-doc-result { left: var(--zr2-space-3); right: var(--zr2-space-3); bottom: var(--zr2-space-4); }
  .zr-situations { grid-template-columns: minmax(0,1fr); gap: var(--zr2-space-7); }
  .zr-situation img { max-height: 240px; }
  .zr-guide-heading { grid-template-columns: 1fr; gap: var(--zr2-space-4); }
  .zr-guide-heading img { max-height: 210px; }
  .zr-guide-jump { display: grid; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.zr-experience-ready [data-experience-reveal] { opacity: 1; transform: none; transition: none; }
  .zr-doc-scene { --sort: 1 !important; }
  .zr-doc, .zr-doc-result { transition: none !important; animation: none !important; }
  .zr-motion-toggle { display: none; }
}
@media print {
  .zr-doc-figure, .zr-motion-toggle, .zr-editorial-image { display: none; }
}

/* Mobile reading and touch targets; no hidden horizontal overflow. */
.zr-fuss-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: var(--zr2-space-7); margin-top: var(--zr2-space-5); }
.zr-footer-group { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.zr-footer-group h2 { font-family: var(--zr2-font-body); font-size: var(--zr2-type-small); font-weight: 650; color: var(--zr2-panel-gruen-ink); margin: 0 0 var(--zr2-space-3); }
.zr-footer-group a { max-width: 100%; }
@media (max-width: 720px) {
  main :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size: max(16px,1rem); }
  .zr-reading-nav a { min-height: 44px; }
  .zr-editorial-image img { height: auto; max-height: 240px; }
  .zr-guide-group { scroll-margin-top: 90px; }
  [id^="lesen-"] { scroll-margin-top: 90px; }
}
@media (max-width: 640px) {
  #top h1 { font-size: clamp(2.6rem,11vw,3.8rem); max-width: none; }
  #top .zr-hero-lead { font-size: var(--zr2-type-body); line-height: 1.6; }
  #top .zr-hero-copy { min-width: 0; }
  #top .zr-hero-zusagen { font-size: var(--zr2-type-caption); }
  .zr-doc-scene { height: 320px; }
  .zr-doc { width: 150px; height: 200px; padding: var(--zr2-space-4); }
  .zr-doc strong { font-size: var(--zr2-type-body); margin-block: var(--zr2-space-3); }
  .zr-doc-result { padding: var(--zr2-space-3); }
  .zr-doc-result span { display: none; }
  .zr-doc-figure figcaption { font-size: var(--zr2-type-caption); }
  .zr-situations { gap: var(--zr2-space-6); }
  .zr-situation { padding-bottom: var(--zr2-space-5); border-bottom: 1px solid var(--zr2-line); }
  .zr-situation h3 { margin-top: var(--zr2-space-3); }
  .zr-situation img { max-height: 200px; }
  .zr-fuss-nav { grid-template-columns: minmax(0,1fr); gap: var(--zr2-space-5); }
  .zr-footer-group { border-top: 1px solid var(--zr2-panel-gruen-rand); padding-top: var(--zr2-space-4); }
  .zr-footer-group a { width: 100%; }
}
@media (max-width: 360px) {
  .zr-header-top { column-gap: var(--zr2-space-1); padding-inline: var(--zr2-space-3); }
  .zr-header-nav { gap: var(--zr2-space-1); }
  .zr-kopf .zr-brand-lockup { gap: var(--zr2-space-1); }
  .zr-kopf .zr-brand-word { font-size: var(--zr2-type-body); }
  .zr-kopf .zr-brand-lockup svg { width: 28px; height: 28px; flex-basis: 28px; }
}