/* Abschnitt 06: kompakte Übersicht und sechs native aufklappbare Standards.
   Inhalte bleiben ohne Skript erreichbar; die Grafik ist ergänzend. */
.assurance { color:var(--ink); background:var(--bg-2); }
.assurance h3, .assurance p, .assurance__caption strong, .assurance__detail > span { min-width:0; overflow-wrap:break-word; }
.assurance__main {
  padding:clamp(36px,4vw,64px) 0;
  color:var(--brand-white);
  background:var(--navy);
}
.assurance__layout {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.assurance__layout > * { min-width:0; }
.assurance__chapter {
  display:flex; align-items:center; gap:12px;
  color:var(--brand-on-dark-muted); font-size:.8125rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase;
}
.assurance__chapter > span { color:var(--teal-hi); font-size:1rem; letter-spacing:.02em; }
.assurance__heading h2 {
  margin-top:14px;
  font-family:var(--ff-d); font-size:clamp(2rem,3vw,2.75rem);
  font-weight:550; line-height:1.12; letter-spacing:-.035em;
  overflow-wrap:break-word;
}
.assurance__heading h2 > span { color:var(--teal-hi); }
.assurance__intro { margin-top:16px; max-width:44ch; font-size:1rem; line-height:1.6; color:var(--brand-on-dark-muted); }
.assurance__visual {
  display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
  align-items:center; gap:20px;
  width:100%; max-width:380px; margin:24px 0 0;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.18);
}
.assurance__visual > * { min-width:0; }
.assurance__drawing { position:relative; width:100%; max-width:152px; }
.assurance__drawing::before {
  content:""; position:absolute; inset:8% 4% 8% 8%; pointer-events:none;
  background:none;display:none;}
.assurance__drawing svg { display:block; position:relative; width:100%; height:auto; aspect-ratio:500 / 470; overflow:visible; }
.assurance__axis { fill:none; stroke:var(--brand-line-dark); stroke-opacity:.35; stroke-dasharray:3 7; }
.assurance__plane { fill:url(#assurance-plane); stroke:var(--brand-line-dark); stroke-width:1; }
.assurance__edge { fill:var(--brand-navy); stroke:var(--brand-line-dark); stroke-width:.8; }
.assurance__grid { fill:none; stroke:var(--brand-on-dark-subtle); stroke-opacity:.14; stroke-width:.7; }
.assurance__trace { fill:none; stroke:var(--teal-hi); stroke-width:2; opacity:0; }
.assurance__layer.is-active .assurance__plane { fill:url(#assurance-active); stroke:var(--brand-teal-light); }
.assurance__layer.is-active .assurance__edge { fill:var(--brand-raised); stroke:var(--teal-hi); }
.assurance__layer.is-active .assurance__grid { stroke:var(--brand-teal-light); stroke-opacity:.25; }
.assurance__layer.is-active .assurance__trace { opacity:1; }
/* Die Nummern stehen lesbar in der Liste statt winzig in der Miniatur. */
.assurance__markers { display:none; }
.assurance__markers text { fill:var(--brand-on-dark-subtle); font:14px var(--ff-t); }
.assurance__markers path { stroke:var(--brand-line-dark); stroke-width:1; }
.assurance__markers .is-active text { fill:var(--brand-teal-light); }
.assurance__markers .is-active path { stroke:var(--teal-hi); }
.assurance__caption {
  display:grid; align-content:center; gap:6px;
  padding-left:18px; border-left:1px solid rgba(255,255,255,.18); line-height:1.45;
}
.assurance__caption > span { color:var(--teal-hi); font-size:.875rem; letter-spacing:.05em; font-variant-numeric:tabular-nums; }
.assurance__caption strong { font-size:1rem; font-weight:500; color:var(--brand-on-dark); }
.assurance__list-title { color:var(--brand-on-dark-subtle); font-size:.875rem; font-weight:500; letter-spacing:.02em; margin-bottom:12px; }
.assurance__item { border-top:1px solid rgba(255,255,255,.18); scroll-margin-top:96px; }
.assurance__item:last-child { border-bottom:1px solid rgba(255,255,255,.18); }
.assurance__item summary {
  list-style:none; display:grid; grid-template-columns:24px minmax(0,1fr) 16px;
  align-items:center; gap:12px; min-height:56px; padding:14px 0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.assurance__item summary::-webkit-details-marker { display:none; }
.assurance__item summary::marker { content:""; }
.assurance__number { color:var(--brand-on-dark-subtle); font-size:.8125rem; font-variant-numeric:tabular-nums; }
.assurance__item h3 { color:var(--brand-on-dark); font-family:var(--ff-d); font-weight:500; font-size:1.125rem; letter-spacing:-.018em; line-height:1.4; }
.assurance__toggle { position:relative; width:16px; height:16px; color:var(--brand-on-dark-subtle); }
.assurance__toggle::before,.assurance__toggle::after {
  content:""; position:absolute; left:2px; top:7px; width:12px; height:1px; background:currentColor;
}
.assurance__toggle::after { transform:rotate(90deg); }
.assurance__item[open] .assurance__toggle::after { transform:rotate(0deg); }
.assurance__item[open] .assurance__number,.assurance__item[open] h3,.assurance__item[open] .assurance__toggle { color:var(--teal-hi); }
.assurance__detail { padding:0 28px 18px 36px; }
.assurance__detail p { color:var(--brand-on-dark-muted); font-size:1rem; line-height:1.6; }
.assurance__detail > span { display:block; margin-top:8px; color:var(--brand-on-dark); font-size:.875rem; }
.assurance__item summary:focus-visible { outline:2px solid var(--teal-hi); outline-offset:5px; box-shadow:none; }
@media (hover:hover) {
  .assurance__item summary:hover h3 { color:var(--teal-hi); }
}
.assurance__proof { padding:clamp(24px,2.5vw,36px) 0; background:var(--bg); }
.assurance .seals { margin:0; padding:0; border:0; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.85fr); gap:clamp(28px,4vw,56px); align-items:center; }
.assurance .seals__txt h3 { font-size:1.125rem; line-height:1.35; }
.assurance .seals__txt p { font-size:1rem; line-height:1.55; max-width:40ch; }
.assurance .seals__list { gap:clamp(16px,2vw,28px); }
.assurance .seals__list li { min-width:0; grid-template-rows:34px auto auto; gap:7px; }
.assurance .seals__logo { width:auto; height:auto; max-width:100%; max-height:32px; align-self:center; }
.assurance .seals__name { min-height:0; font-size:1rem; line-height:1.4; }
.assurance .seals__list li > span:last-child { font-size:.875rem; }
.assurance__more { min-height:44px; margin-top:10px; padding-block:6px; font-size:.875rem; line-height:1.45; }
.assurance__more svg { flex-shrink:0; }
@media (prefers-reduced-motion:no-preference) {
  .assurance__layer { transition:transform .6s var(--ease); }
  .assurance.is-enhanced .assurance__layer.is-active { transform:translateY(-9px); }
  .assurance.is-in-view .assurance__layer { animation:assurance-assemble 1s var(--ease) both; }
  .assurance.is-in-view .assurance__layer[data-layer="0"] { animation-delay:.25s; }
  .assurance.is-in-view .assurance__layer[data-layer="1"] { animation-delay:.20s; }
  .assurance.is-in-view .assurance__layer[data-layer="2"] { animation-delay:.15s; }
  .assurance.is-in-view .assurance__layer[data-layer="3"] { animation-delay:.10s; }
  .assurance.is-in-view .assurance__layer[data-layer="4"] { animation-delay:.05s; }
  .assurance.is-in-view .assurance__layer.is-active { animation-name:assurance-assemble-active; }
  .assurance.has-selection .assurance__layer { animation:none; }
  .assurance.has-selection .assurance__layer.is-active .assurance__trace { stroke-dasharray:100; animation:assurance-trace 1.15s var(--ease) both; }
  .assurance.is-enhanced .assurance__item[open] .assurance__detail { animation:assurance-copy .35s var(--ease) both; }
  .assurance__toggle::after { transition:transform .25s ease; }
}
@keyframes assurance-assemble { from { opacity:.6; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes assurance-assemble-active { from { opacity:.6; transform:translateY(24px); } to { opacity:1; transform:translateY(-9px); } }
@keyframes assurance-trace { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
@keyframes assurance-copy { from { opacity:.65; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (max-width:1000px) {
  .assurance__layout { gap:32px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .assurance__chapter { align-items:baseline; letter-spacing:.035em; }
  .assurance__detail { padding-right:0; }
  .assurance .seals { grid-template-columns:1fr; gap:24px; }
  .assurance .seals__txt p { max-width:65ch; }
}
@media (max-width:760px) {
  .assurance__layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .assurance__heading h2 { font-size:clamp(2rem,5vw,2.375rem); }
  .assurance__intro { max-width:52ch; margin-top:14px; }
  .assurance__visual { max-width:none; grid-template-columns:104px minmax(0,1fr); gap:18px; margin-top:18px; padding-top:14px; }
  .assurance__drawing { max-width:104px; }
  .assurance__caption { padding-left:16px; }
  .assurance__chapter { gap:12px; }
  .assurance .seals__list { grid-template-columns:1fr; gap:16px; }
  .assurance .seals__list li { grid-template-columns:104px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:20px; row-gap:4px; }
  .assurance .seals__list li + li { border-top:1px solid var(--rule); padding-top:16px; }
  .assurance .seals__logo { grid-row:1 / 3; max-width:104px; }
  .assurance .seals__name { font-size:.9375rem; }
}
@media (max-width:370px) {
  .assurance__chapter { font-size:.75rem; letter-spacing:.02em; }
  .assurance__visual { grid-template-columns:88px minmax(0,1fr); gap:14px; }
  .assurance__item h3 { font-size:1.0625rem; }
  .assurance .seals__list li { grid-template-columns:90px minmax(0,1fr); column-gap:18px; }
  .assurance .seals__logo { max-width:90px; }
  .assurance .seals__name { overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .assurance *, .assurance *::before, .assurance *::after { animation:none !important; transition:none !important; }
  .assurance .assurance__layer { transform:none !important; }
}
@media print {
  .assurance__main { color:#000; background:var(--navy); padding:32px 0; }
  .assurance__layout { display:block; }
  .assurance__standards { margin-top:24px; }
  .assurance__visual { display:none; }
  .assurance__main p,.assurance__main h2,.assurance__main h3,.assurance__main span { color:#000; }
  .assurance__item { break-inside:avoid; border-color:#ccc; }
  .assurance__item::details-content { content-visibility:visible; }
  .assurance__item > .assurance__detail { display:block !important; }
  .assurance__toggle { display:none; }
  .assurance__detail { padding-left:36px; }
}