.selection-guide h2 { max-width: 45rem; hyphens: none; margin-bottom: 1rem; }
.selection-guide .guide-choice { display: flex; flex-direction: column; gap: .7rem; border-top: 3px solid #0074b8; }
.selection-guide .guide-choice h3 { margin: 0; }
.selection-guide .guide-choice p { line-height: 1.65; flex: 1; }
.selection-guide .guide-choice__tag { display: inline-flex; align-self: flex-start; padding: .3rem .6rem; border-radius: 5px; color: #07517d; background: #e7f3fa; font-size: .8rem; font-weight: 700; letter-spacing: .01em; }
.selection-guide .guide-notice { margin-top: 2rem; border-left: 4px solid #0074b8; }
.selection-guide .guide-table { min-width: 790px; }
.selection-guide .guide-caption { margin-top: .9rem; color: #526270; font-size: .875rem; line-height: 1.6; }
.selection-guide .guide-principles > .card-plain { border-top: 3px solid #0074b8; }
.selection-guide .guide-principles h3 { min-height: 3em; }
.selection-guide .guide-principles p { line-height: 1.7; }
.selection-guide .guide-flow { background: #f1f7fa; border-radius: 8px; padding: .9rem .8rem; margin: 1rem 0 1.6rem; font-weight: 700; color: #0c4c71; display:flex; flex-wrap: wrap; align-items:center; justify-content:center; gap:.4rem; text-align:center; font-size: .9rem; }
.selection-guide .guide-flow > span { color: #0074b8; }
.selection-guide .guide-formula { display: block; text-align: center; margin: 1.5rem 0 1.75rem; border: 1px solid #a9cadc; background: #fff; border-radius: 12px; padding: 1.1rem; font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 700; font-variant-numeric: tabular-nums; color: #003c61; }
.selection-guide .guide-formula sub { font-size:.55em; font-weight:600; }
.selection-guide .guide-fact-grid { margin-top: 1.8rem; }
.selection-guide .guide-fact-grid h3 { margin-bottom: .7rem; }
.selection-guide .guide-scenarios .card-plain { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.selection-guide .guide-scenarios .card-plain h3 { margin:0; }
.selection-guide .guide-scenarios .card-plain .link-arrow { margin-top:auto; }
.selection-guide .guide-scenarios p { line-height:1.68; }
.selection-guide .guide-checklist { counter-reset:guide-step; list-style:none; margin: 1.75rem 0 2rem; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.selection-guide .guide-checklist li { counter-increment:guide-step; position:relative; border:1px solid #d4e1ea; border-radius:9px; background:white; padding:1.3rem 1.25rem 1.3rem 3.5rem; line-height:1.7; }
.selection-guide .guide-checklist li::before { content: counter(guide-step, decimal-leading-zero); position:absolute; left:.9rem; top:1.25rem; font-weight:750; color:#0074b8; }
.selection-guide .guide-faq .card-plain h3 { margin-bottom:.7rem; }
.selection-guide .guide-faq .card-plain p { line-height:1.7; }
.selection-guide .guide-contact { margin-top:2.5rem; border-top:4px solid #0074b8; padding:clamp(1.5rem,3vw,2.5rem); background:#f4f9fc; }
.selection-guide .guide-contact h2 { margin-bottom:.7rem; }
.selection-guide .guide-contact p { max-width:65rem; line-height:1.75; }
.selection-guide .guide-contact .btn-row { margin-top:1.2rem; }
.selection-guide a:not(.btn):hover { text-decoration: underline; }
@media (max-width: 800px) {
  .selection-guide .guide-checklist { grid-template-columns:1fr; }
  .selection-guide .guide-principles h3 { min-height:0; }
}

.selection-guide .guide-tech-figure { margin: 1rem 0 1.45rem; min-width: 0; }
.selection-guide .guide-tech-figure img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--surface); }
.selection-guide .guide-tech-figure figcaption { margin-top: .65rem; color: var(--muted); font-size: .825rem; line-height: 1.55; }
.selection-guide .guide-pressure-figure { max-width: 1040px; margin: 1.6rem auto 2.1rem; }
.selection-guide .guide-pressure-figure img { width: 100%; height: auto; border-radius: 10px; display: block; background: var(--surface); }
.selection-guide .guide-pressure-figure figcaption { font-size: .875rem; color: var(--muted); margin-top: .6rem; line-height: 1.5; }
.selection-guide .guide-metric-figure { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: clamp(1rem,2.7vw,2rem); margin: 1.6rem 0 2rem; }
.selection-guide .guide-metric-figure > figcaption { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.6rem; color: var(--blue-900); font-size: 1.12rem; }
.selection-guide .guide-metric-figure > figcaption span { color: var(--muted); font-size: .9rem; font-weight: 400; }
.selection-guide .guide-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,2vw,2rem); }
.selection-guide .guide-metric-panel { min-width:0; background: #fff; padding: clamp(1rem,1.8vw,1.6rem); border:1px solid var(--line-soft); border-radius: 9px; }
.selection-guide .guide-metric-panel h3 { margin: 0; font-size:1.03rem; color:var(--blue-900); }
.selection-guide .guide-metric-panel h3 em { font-style: normal; }
.selection-guide .guide-metric-unit { margin: .25rem 0 1.3rem; color: var(--muted); font-size: .8rem; }
.selection-guide .guide-bar-row { display:grid; grid-template-columns: 60px minmax(0,1fr) 56px; align-items:center; gap: .75rem; margin:.85rem 0; font-size: .84rem; color: var(--blue-900); font-variant-numeric:tabular-nums; }
.selection-guide .guide-bar-row strong { font-size: .83rem; text-align:right; white-space:nowrap; }
.selection-guide .guide-bar-track { height: 24px; border-radius: 4px; overflow:hidden; background:var(--blue-50); display:block; }
.selection-guide .guide-bar-track > span { display:block; background:var(--blue); height:100%; border-radius: 4px; }
@media (max-width: 760px) {
  .selection-guide .guide-metric-grid { grid-template-columns: 1fr; }
  .selection-guide .guide-tech-figure { overflow-x: auto; }
  .selection-guide .guide-tech-figure img { min-width: 320px; }
  .selection-guide .guide-pressure-figure { overflow-x: auto; }
  .selection-guide .guide-pressure-figure img { min-width: 650px; }
}


/* Ratgeber 2026-10-31: large diagrams and accessible image enlargement.
 * Only --blue, --blue-900 and the existing neutral site tokens are used. */
.selection-guide .guide-principles {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem,3vw,2.1rem);
}
.selection-guide .guide-principles > .card-plain {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr);
  column-gap: clamp(1.3rem,3vw,2.6rem);
  row-gap: .7rem;
  align-items: start;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: 11px;
  padding: clamp(1.15rem,2.3vw,2.2rem);
  box-shadow: var(--shadow-sm);
}
.selection-guide .guide-principles > .card-plain > .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}
.selection-guide .guide-principles > .card-plain > h3 {
  grid-column: 1 / -1;
  font-size: clamp(1.35rem,1.1rem + .65vw,1.7rem);
  min-height: 0;
  max-width: unset;
  margin: 0 0 .55rem;
}
.selection-guide .guide-principles > .card-plain > .guide-tech-figure {
  grid-column: 1;
  grid-row: 3 / span 3;
  align-self: start;
  margin: .15rem 0 0;
}
.selection-guide .guide-principles > .card-plain > p:not(.eyebrow) {
  grid-column: 2;
  margin: 0;
  line-height: 1.8;
}
.selection-guide .guide-principles > .card-plain > p:not(.eyebrow) + p {
  margin-top: .35rem;
}
.selection-guide .guide-tech-figure { min-width: 0; }
.selection-guide .guide-figure__zoom {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  cursor: zoom-in;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.selection-guide .guide-figure__zoom img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  border-radius: 9px;
  background: #fff;
}
.selection-guide .guide-figure__zoom:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-100);
}
.selection-guide .guide-figure__zoom:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.selection-guide .guide-figure__zoom-hint {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  padding: .55rem .85rem;
  background: var(--blue-900);
  color: #fff;
  border-radius: 7px;
  font-weight: 650;
  font-size: .85rem;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11,42,64,.13);
}
.selection-guide .guide-tech-figure figcaption {
  line-height: 1.65;
  font-size: .88rem;
  color: var(--ink-2);
  margin-top: .85rem;
}
.selection-guide .guide-tech-figure figcaption span { color: var(--muted); }
.guide-zoom-dialog {
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: clamp(.9rem,1.5vw,1.3rem);
  border-radius: 13px;
  width: min(96vw, 1530px);
  max-width: none;
  max-height: min(94vh, 1150px);
  box-shadow: 0 30px 100px rgba(11,42,64,.22);
  overflow: hidden;
}
.guide-zoom-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.guide-zoom-dialog::backdrop {
  background: rgba(11,42,64,.82);
}
.guide-zoom__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.guide-zoom__header .eyebrow { margin: 0 0 .35rem; }
.guide-zoom__header h2 {
  font-size: clamp(1.15rem,2vw,1.55rem);
  margin: 0;
  color: var(--blue-900);
}
.guide-zoom__close {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: .6rem .85rem;
  font: inherit;
  cursor: pointer;
}
.guide-zoom__close:hover { background: var(--blue-50); color: var(--blue-900); }
.guide-zoom__close span { font-size: 1.35rem; line-height: 1; }
.guide-zoom__close:focus-visible,
.guide-zoom__footer a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.guide-zoom__scroll {
  display: block;
  overflow: auto;
  min-height: 0;
  max-height: calc(94vh - 185px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  overscroll-behavior: contain;
}
.guide-zoom__scroll img {
  display: block;
  width: 100%;
  min-width: 1000px;
  height: auto;
  margin: 0 auto;
}
.guide-zoom__footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .875rem;
  line-height: 1.55;
}
.guide-zoom__footer p { color: var(--muted); margin: 0; }
.guide-zoom__footer a { font-weight: 650; color: var(--blue-700); }
@media (max-width: 1100px) {
  .selection-guide .guide-principles > .card-plain {
    grid-template-columns: minmax(0,1fr);
  }
  .selection-guide .guide-principles > .card-plain > .guide-tech-figure {
    grid-column: 1;
    grid-row: auto;
  }
  .selection-guide .guide-principles > .card-plain > p:not(.eyebrow) {
    grid-column: 1;
  }
}
@media (max-width: 600px) {
  .guide-zoom-dialog { width: 98vw; max-height: 96vh; padding: .7rem; }
  .guide-zoom__scroll { max-height: calc(96vh - 202px); }
  .guide-zoom__scroll img { min-width: 1100px; }
  .guide-zoom__footer { gap: .4rem; }
  .selection-guide .guide-figure__zoom-hint {
    right: .35rem;
    bottom: .35rem;
    font-size: .77rem;
    padding: .44rem .6rem;
  }
  .guide-zoom__header .eyebrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .selection-guide .guide-figure__zoom { transition: none; }
}


/* 2026-10-31 design correction: restore compact three-column comparison.
   Technical preview: one NC-open state per card.
   Detail click: two states in a large accessible modal.
   This section does NOT alter the other parts of the guide. */
@media (min-width: 1100px) {
  .selection-guide .guide-principles.grid.grid--3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, 1.5vw, 1.5rem);
    align-items: stretch;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: clamp(1rem, 1.45vw, 1.4rem);
    min-width: 0;
    grid-template-columns: none;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .eyebrow,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > h3,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .guide-tech-figure,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > p:not(.eyebrow) {
    display: block;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > h3 {
    font-size: clamp(1.13rem,1.05rem + .3vw,1.45rem);
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .guide-tech-figure {
    margin: .2rem 0 .35rem;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .guide-tech-figure img {
    width: 100%;
    min-width: 0;
    height: auto;
  }
}
@media (min-width: 750px) and (max-width: 1099px) {
  .selection-guide .guide-principles.grid.grid--3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: stretch;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.25rem;
    min-width: 0;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .eyebrow,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > h3,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .guide-tech-figure,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > p:not(.eyebrow) {
    display: block;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }
}
@media (max-width: 749px) {
  .selection-guide .guide-principles.grid.grid--3 {
    display: grid;
    grid-template-columns: minmax(0,1fr);
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    min-width: 0;
  }
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .eyebrow,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > h3,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > .guide-tech-figure,
  .selection-guide .guide-principles.grid.grid--3 > .card-plain > p:not(.eyebrow) {
    display: block;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }
}