/*
 * Barrierepuls — Gestaltung
 *
 * Aufbau nach dem von Pierre vorgegebenen Vorbild: abwechselnd dunkle und helle
 * Baender, sehr grosse zweifarbige Ueberschriften, nummerierte Karten,
 * schwebende Kennzeichen ueber einer Produktdarstellung.
 *
 * Grundsatz bleibt: Diese Seite wird von Interessenten durch den eigenen Scanner
 * gejagt und muss ihn bestehen. Jede Farbkombination ist rechnerisch geprueft
 * (werkzeug/kontrast-pruefen.js).
 */

:root {
  /* Dunkle Baender */
  --night:        #0b1420;
  --night-card:   #111e30;
  --night-line:   #1e2d42;
  --on-night:     #ffffff;   /* 18,5:1 */
  --night-quiet:  #9fb0c4;   /*  8,4:1 */
  --blue-night:   #5b9cff;   /*  6,7:1 */
  --gold:         #e0a836;   /*  8,7:1 */
  --green:        #4ade80;   /* 10,6:1 */
  --field-night:  #63758a;   /*  3,9:1 — 1.4.11 */

  /* Helle Baender */
  --day:          #f1f5f9;
  --white:        #ffffff;
  --on-day:       #0f172a;   /* 16,3:1 */
  --day-quiet:    #566374;   /*  5,6:1 */
  --blue:         #1d4ed8;   /*  6,1:1 */
  --blue-deep:    #1e3a8a;
  --day-line:     #dbe2ea;
  --field-day:    #7c8899;   /*  3,6:1 — 1.4.11 */

  --lane: 74rem;
  --r: 0.85rem;
  --lift: 0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -16px rgb(15 23 42 / .22);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--day);
  color: var(--on-day);
  font: 400 1rem/1.65 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.4rem); letter-spacing: -0.055em; line-height: 0.95; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.045em; }
h3 { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }

p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--blue-night); outline-offset: 3px; border-radius: 4px; }

.lane { max-width: var(--lane); margin-inline: auto; padding-inline: 1.5rem; }

/* Sprunglink — sichtbar, sobald er den Fokus bekommt. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--blue); color: #fff; padding: .8rem 1.3rem;
  text-decoration: none; font-weight: 600; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* Augenbraue ueber jeder Ueberschrift */
.brow {
  display: flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.brow::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.night .brow { color: var(--gold); }
.light .brow { color: var(--blue); }

/* Zweiter Teil der Ueberschrift in Blau — das Erkennungsmerkmal des Layouts */
.hl { color: var(--blue); }
.night .hl { color: var(--blue-night); }

/* ---------- Baender ---------- */

.night { background: var(--night); color: var(--on-night); }
.light { background: var(--day); color: var(--on-day); }
.band  { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.night p { color: var(--night-quiet); }
.night h1, .night h2, .night h3 { color: var(--on-night); }

.lede { font-size: 1.12rem; max-width: 34rem; margin-top: 1.6rem; }
.band > .lane > .lede { margin-bottom: 2.5rem; }

/* ---------- Kopf ---------- */

.top {
  position: sticky; top: 0; z-index: 50;
  background: rgb(11 20 32 / .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--night-line);
}
.top .lane { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; flex-wrap: wrap; }
.logo {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.1rem; letter-spacing: -.03em;
  color: var(--on-night); text-decoration: none;
}
.logo .mark {
  width: 2rem; height: 2rem; border-radius: .55rem; background: var(--blue);
  display: grid; place-items: center; flex: 0 0 auto;
}
.logo .mark svg { width: 1.05rem; height: 1.05rem; }
.logo .tld { color: var(--blue-night); }
.top nav { margin-left: auto; }
.top nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.top nav a { color: var(--night-quiet); text-decoration: none; font-size: .95rem; font-weight: 500; }
.top nav a:hover { color: var(--on-night); }

/* ---------- Schaltflaechen ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 .98rem/1 Inter, sans-serif;
  padding: .95rem 1.5rem; border-radius: .6rem;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--ghost { background: transparent; color: var(--on-night); }
.btn--ghost:hover { color: var(--blue-night); }
.light .btn--ghost { color: var(--on-day); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* ---------- Held ---------- */

.hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6rem); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60rem 30rem at 78% 22%, rgb(37 99 235 / .17), transparent 65%),
    linear-gradient(180deg, transparent, rgb(11 20 32 / .5));
  pointer-events: none;
}
/* Eigene Klasse statt `.hero .lane` — sonst erwischt die Rasterregel auch den
   Nutzenstreifen weiter unten, der ebenfalls eine .lane ist, und presst ihn
   in die erste Spalte. */
.hero__grid { position: relative; display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero-cta { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }
.trustline {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 2rem; font-size: .92rem; color: var(--night-quiet); max-width: 30rem;
}
.trustline .tick {
  width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: 0 0 auto;
  background: rgb(74 222 128 / .16); color: var(--green);
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; margin-top: .12rem;
}

/* ---------- Produktdarstellung im Held ---------- */

.shot { position: relative; }
.window {
  background: var(--night-card); border: 1px solid var(--night-line);
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8);
}
.window__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--night-line);
}
.dots { display: flex; gap: .35rem; }
.dots i { width: .6rem; height: .6rem; border-radius: 50%; background: #33445c; }
.dots i:first-child { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.window__url {
  flex: 1; text-align: center; font-size: .78rem; color: var(--night-quiet);
  background: rgb(255 255 255 / .05); border-radius: .4rem; padding: .28rem .7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.window__body { padding: 1.5rem; }

.shot-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.4rem; }
.shot-head .eyebrow { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--night-quiet); }
.shot-head strong { font-size: 1.05rem; letter-spacing: -.02em; }

.gauge { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.5rem; }
.gauge__ring {
  width: 5.2rem; height: 5.2rem; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--gold) 0 62%, #23344a 62% 100%);
  display: grid; place-items: center; position: relative;
}
.gauge__ring::after {
  content: ""; position: absolute; inset: .55rem; border-radius: 50%; background: var(--night-card);
}
/* z-index nötig: Der Ring stanzt sein Loch per ::after und läge sonst über der Zahl. */
.gauge__num { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
.gauge__num b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.gauge__num span { font-size: .68rem; color: var(--night-quiet); }
.gauge__txt strong { display: block; font-size: 1.02rem; letter-spacing: -.02em; margin-bottom: .2rem; }
.gauge__txt span { font-size: .87rem; color: var(--night-quiet); }

.rows { display: grid; gap: .55rem; }
.row {
  display: flex; align-items: center; gap: .75rem;
  background: rgb(255 255 255 / .04); border: 1px solid var(--night-line);
  border-radius: .55rem; padding: .8rem .95rem; font-size: .9rem;
}
.row .ico { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; flex: 0 0 auto; }
.row .ico--warn { background: rgb(224 168 54 / .16); color: var(--gold); }
.row .ico--crit { background: rgb(248 113 113 / .16); color: #f87171; }
.row .ico--ok   { background: rgb(74 222 128 / .16); color: var(--green); }
.row .label { flex: 1; font-weight: 500; }
.row .tag { font-size: .8rem; color: var(--gold); font-weight: 600; }
.row .tag--crit { color: #f87171; }
.row .tag--ok { color: var(--green); }

.pill {
  position: absolute; display: flex; gap: .6rem; align-items: center;
  background: var(--night-card); border: 1px solid var(--night-line);
  border-radius: .7rem; padding: .7rem .9rem; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9);
  max-width: 15rem;
}
.pill b { display: block; font-size: .82rem; letter-spacing: -.01em; }
.pill span { font-size: .74rem; color: var(--night-quiet); }
.pill--tr { top: 4%; right: -1.5rem; }
.pill--bl { bottom: -1.75rem; left: -2rem; }
/* Unter 78rem wird es zu eng — dann lieber weglassen als über den Befund legen. */
@media (max-width: 78rem) { .pill { display: none; } }

/* ---------- Streifen mit drei Nutzen ---------- */

.strip { border-top: 1px solid var(--night-line); padding: 2.75rem 0; }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.strip li { display: flex; gap: .8rem; align-items: flex-start; }
.strip .n { color: var(--blue-night); font-weight: 800; font-size: .82rem; letter-spacing: .08em; padding-top: .18rem; }
.strip b { display: block; font-size: 1rem; letter-spacing: -.02em; margin-bottom: .2rem; }
.strip .txt { display: block; font-size: .9rem; color: var(--night-quiet); }

/* ---------- Prueffeld ---------- */

.check-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 58rem) { .check-grid { grid-template-columns: 1fr 1fr; } }

.formcard {
  background: var(--white); border: 1px solid var(--day-line);
  border-radius: 1rem; padding: 1.75rem; box-shadow: var(--lift);
}
.formcard .cap { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.4rem; }
.formcard .cap .n { color: var(--blue); font-weight: 800; font-size: .82rem; letter-spacing: .08em; }
.formcard .cap strong { font-size: 1.1rem; letter-spacing: -.02em; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.field input {
  width: 100%; font: inherit; padding: .85rem 1rem;
  border: 2px solid var(--field-day); border-radius: .6rem;
  background: var(--white); color: var(--on-day);
}
.field input::placeholder { color: #6b7684; }
.field input[aria-invalid="true"] { border-color: #b91c1c; }
.formcard .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.formnote { font-size: .82rem; color: var(--day-quiet); margin-top: .9rem; }
.status { margin-top: 1rem; font-size: .93rem; color: var(--day-quiet); min-height: 1.4rem; }
.status--err { color: #b91c1c; font-weight: 600; }

.sample { border: 1px solid var(--day-line); border-radius: 1rem; background: var(--white);
  padding: 1.5rem; box-shadow: var(--lift); }
.sample h3 { margin-bottom: 1rem; font-size: 1rem; }
.sample .srow { display: flex; align-items: center; gap: .7rem; padding: .7rem 0;
  border-top: 1px solid var(--day-line); font-size: .92rem; }
.sample .srow:first-of-type { border-top: 0; }
.sample .srow .label { flex: 1; }
.sample .srow .st { font-weight: 600; font-size: .85rem; }
.sample .srow .st--open { color: #a16207; }
.sample .srow .st--ok { color: #15803d; }

/* ---------- Ergebnis ---------- */

.result[hidden] { display: none; }
.verdict { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.2rem;
  border: 2px solid; border-radius: .7rem; font-weight: 600; margin-bottom: 1rem; }
.verdict--rot { border-color: #b91c1c; color: #b91c1c; }
.verdict--gelb { border-color: #a16207; color: #a16207; }
.verdict--gruen { border-color: #15803d; color: #15803d; }
.tally { color: var(--day-quiet); font-size: .93rem; margin-bottom: 1.25rem; }
.tally b { color: var(--on-day); font-variant-numeric: tabular-nums; }
.flaw { border-top: 1px solid var(--day-line); padding: 1.2rem 0; }
.flaw-head { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .5rem; }
.chip { font-size: .76rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip--critical, .chip--serious { color: #b91c1c; }
.chip--moderate { color: #a16207; }
.chip--minor { color: var(--day-quiet); }
.flaw p + p { margin-top: .45rem; }
.flaw .fix, .flaw .src { color: var(--day-quiet); font-size: .92rem; }
.flaw .src code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--day); padding: .1rem .35rem; border-radius: 3px; overflow-wrap: anywhere; }
.caveat { margin-top: 1.5rem; padding: 1rem 1.15rem; border-left: 3px solid var(--day-line);
  color: var(--day-quiet); font-size: .88rem; }

/* ---------- Zweispalter Text plus Karte ---------- */

.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 58rem) { .split { grid-template-columns: 1fr 1fr; } }

.costcard {
  background: var(--night-card); border: 1px solid var(--night-line);
  border-radius: 1rem; padding: 1.75rem; box-shadow: 0 30px 70px -34px rgb(0 0 0 / .9);
}
.costcard > b { display: block; font-size: 1rem; letter-spacing: -.02em; margin-bottom: 1.4rem; }
.costrow { margin-bottom: 1.3rem; }
.costrow .cl { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.costrow .cl span { font-size: .88rem; color: var(--night-quiet); }
.costrow .cl strong { font-size: 1.15rem; letter-spacing: -.02em; }
/* display:block nötig — als inline-Element bekäme das span keine Höhe. */
.bar { display: block; height: .42rem; border-radius: 999px;
  background: rgb(255 255 255 / .07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; }
.bar--small i { width: 8%; background: var(--blue-night); }
.bar--big i { width: 100%; background: linear-gradient(90deg, var(--gold), #f87171); }
.costcard .fine { font-size: .82rem; color: var(--night-quiet); padding-top: 1.1rem;
  border-top: 1px solid var(--night-line); }

.disclaim { display: flex; gap: .7rem; align-items: flex-start; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--night-line); font-size: .85rem; max-width: 34rem; }
.disclaim .lock { color: var(--gold); flex: 0 0 auto; }

/* ---------- Nummerierte Karten ---------- */

.steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); margin-top: 3rem; }
.step { background: var(--white); border: 1px solid var(--day-line); border-radius: 1rem;
  padding: 1.6rem; box-shadow: var(--lift); }
.step .n { color: var(--blue); font-weight: 800; font-size: .85rem; letter-spacing: .08em; }
.step hr { border: 0; border-top: 1px solid var(--day-line); margin: 1rem 0 1.1rem; }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--day-quiet); font-size: .94rem; }

.headrow { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 58rem) { .headrow { grid-template-columns: 1.35fr 1fr; } }
.headrow p { color: var(--day-quiet); }
.night .headrow p { color: var(--night-quiet); }

/* ---------- Preise ---------- */

.plans { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 3rem; }
.plan { background: var(--white); border: 2px solid var(--day-line); border-radius: 1rem;
  padding: 1.75rem; box-shadow: var(--lift); display: flex; flex-direction: column; }
.plan--pick { border-color: var(--blue); }
.plan .tier { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .9rem; }
.plan .amount { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .3rem; }
.plan .amount b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.plan .amount span { color: var(--day-quiet); font-size: .95rem; }
.plan .claim { color: var(--day-quiet); font-size: .93rem; margin-bottom: 1.3rem; }
.plan ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; flex: 1; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; }
.plan li::before { content: "✓"; color: var(--blue); font-weight: 700; flex: 0 0 auto; }
.plan .btn { justify-content: center; }
.plan--pick .btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.plan:not(.plan--pick) .btn { background: var(--white); color: var(--on-day); border-color: var(--day-line); }
.plan:not(.plan--pick) .btn:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Vertrauen ---------- */

.trust { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 3rem; }
.trust article { border-top: 2px solid var(--night-line); padding-top: 1.2rem; }
.trust h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.trust p { font-size: .94rem; }

/* ---------- Wer dahintersteht ---------- */

.person { display: grid; gap: 2rem; align-items: start; margin-top: 2.5rem; }
@media (min-width: 46rem) { .person { grid-template-columns: 14rem 1fr; } }

.person__bild {
  aspect-ratio: 1; border-radius: 1rem; overflow: hidden;
  background: var(--day); border: 2px dashed var(--field-day);
  display: grid; place-items: center;
}
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.platzhalter { color: var(--day-quiet); font-size: .9rem; font-weight: 600; }

.person__text h3 { font-size: 1.4rem; margin-bottom: .2rem; }
.person__rolle { color: var(--blue); font-weight: 600; font-size: .95rem; margin-bottom: 1.1rem; }
.person__text p + p { margin-top: 1rem; }
.person__text a { color: var(--blue); }

/* Sichtbare Markierung für noch zu ersetzenden Text — fällt absichtlich auf. */
.platzhalter-text {
  background: #fdf3d4; color: var(--on-day); padding: .15rem .3rem; border-radius: 3px;
}

/* ---------- Fragen ---------- */

.faq { margin-top: 2.5rem; display: grid; gap: .75rem; }
.faq details { background: var(--white); border: 1px solid var(--day-line); border-radius: .8rem; }
.faq summary {
  cursor: pointer; padding: 1.15rem 1.4rem; font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 1.4rem 1.3rem; color: var(--day-quiet); font-size: .95rem; }
.faq .answer + .answer { padding-top: 0; }
.faq .answer a { color: var(--blue); }

/* ---------- Abschluss und Fuss ---------- */

.finale { text-align: center; }
.finale .brow { justify-content: center; }
.finale .lede { margin-inline: auto; }
.finale .hero-cta { justify-content: center; }

.foot { background: var(--night); color: var(--night-quiet); border-top: 1px solid var(--night-line);
  padding: 3rem 0; font-size: .9rem; }
.foot .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.foot p { max-width: 34rem; }
.foot ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot a { color: var(--night-quiet); }
.foot a:hover { color: var(--on-night); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Ergebnisdarstellung — derselbe Fensterrahmen wie die Produktdarstellung
   im Held. Bewusst dunkel, obwohl der Abschnitt hell ist: Der Befund ist
   das Produkt, und er soll aussehen wie das, was auf der Startseite gezeigt
   wurde. Wiedererkennung zwischen Versprechen und Ergebnis.
   ========================================================================== */

.window--befund {
  margin-bottom: 2.5rem;
  color: var(--on-night);
}
.window--befund p { color: var(--night-quiet); }
.window--befund .gauge { margin-bottom: 0; }
.window--befund .gauge__ring::after { background: var(--night-card); }
.window--befund .gauge__txt strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; }
.window--befund .rows { margin-top: 1.4rem; }

/* ---------- Einzelheiten ---------- */

.flaws__titel {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.flaw h5 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }

.pdf-zeile {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--day-line);
}
.pdf-hinweis { font-size: .9rem; color: var(--day-quiet); max-width: 28rem; }

/* ---------- Anschlussangebot ----------
   Grosser Abstand nach oben ist Absicht: Erst das Ergebnis, dann die Frage.
   Ein Verkaufsknopf direkt neben einem roten Befund sieht nach Angstverkauf
   aus und zerstoert genau das Vertrauen, auf dem das Angebot beruht. */

.anschluss {
  margin-top: 4.5rem; padding-top: 3rem;
  border-top: 2px solid var(--day-line);
}
.anschluss__titel {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800;
  letter-spacing: -.03em; margin-bottom: 2rem; text-wrap: balance;
}
.anschluss__karten {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.anschluss__karte {
  background: var(--white); border: 1px solid var(--day-line);
  border-radius: .8rem; padding: 1.4rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.anschluss__karte h5 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.anschluss__karte p { color: var(--day-quiet); font-size: .93rem; flex: 1; }
.anschluss__link { color: var(--blue); font-weight: 600; font-size: .93rem; align-self: flex-start; }

.anschluss__abo {
  margin-top: 1.75rem; padding: 1.75rem;
  background: var(--night); color: var(--on-night);
  border-radius: .8rem;
}
.anschluss__abo h5 {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .6rem; color: var(--on-night);
}
.anschluss__abo p { color: var(--night-quiet); max-width: 42rem; margin-bottom: 1.4rem; }

/* ==========================================================================
   Druckausgabe — daraus entsteht das PDF fuer den Webdesigner.
   Es ist gleichzeitig der erste Schritt zum Nachweisdossier, das spaeter
   das Abo traegt: datiert, vollstaendig, weitergabefertig.
   ========================================================================== */

@media print {
  .top, .hero, .band:not(#pruefung), .foot,
  .formcard, .sample, .anschluss, .pdf-zeile, .skip { display: none !important; }

  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .band { padding: 0 !important; background: #fff !important; }
  .lane { max-width: none; padding: 0; }

  #pruefung .brow, #pruefung > .lane > h2, #pruefung > .lane > .lede { display: none; }

  /* Das Fenster wird im Druck hell — dunkle Flaechen fressen Toner. */
  .window--befund {
    background: #fff !important; border: 1.5pt solid #000 !important;
    box-shadow: none !important; color: #000 !important;
    break-inside: avoid;
  }
  .window--befund p, .window--befund .gauge__txt span { color: #333 !important; }
  .window__bar { border-bottom: 1pt solid #999 !important; }
  .window__url { background: none !important; color: #000 !important; font-weight: 600; }
  .dots { display: none !important; }
  .gauge__ring { border: 2.5pt solid #000 !important; background: #fff !important; }
  .gauge__ring::after { display: none !important; }
  .gauge__num b, .gauge__num span { color: #000 !important; }
  .row {
    background: none !important; border: none !important;
    border-bottom: .5pt solid #ccc !important; border-radius: 0 !important;
  }
  .row .label { color: #000 !important; }

  .flaw { break-inside: avoid; border-top: .5pt solid #ccc; }
  .flaw h5 { font-size: 12pt; }
  .flaw .src code { background: #f0f0f0 !important; }

  .caveat {
    border-left: 2pt solid #000 !important; color: #000 !important;
    break-inside: avoid; margin-top: 1.5rem;
  }

  /* Fusszeile auf jeder Seite — macht das Blatt als Nachweis brauchbar. */
  @page { margin: 18mm 15mm; }
  .result::after {
    content: "Barrierepuls · barrierepuls.de · Technische Momentaufnahme, keine Konformitätsbestätigung";
    display: block; margin-top: 1.5rem; padding-top: .5rem;
    border-top: .5pt solid #999; font-size: 8pt; color: #555;
  }
}

/* Feste Kopfzeile beim Sprung zum Befund beruecksichtigen — sonst liegt die
   Ueberschrift darunter und der Nutzer sieht nicht, wo er gelandet ist. */
#ergebnis-titel, .anschluss { scroll-margin-top: 6rem; }

/* ---------- Dialog fuer den Berichtsversand ----------
   Natives <dialog>: Fokusfalle, Escape-Taste und Hintergrund-Inertheit
   kommen vom Browser. Selbstgebaute Dialoge scheitern genau daran. */

.maildlg {
  border: none; border-radius: 1rem; padding: 0;
  max-width: 32rem; width: calc(100% - 2rem);
  background: var(--white); color: var(--on-day);
  box-shadow: 0 24px 60px -20px rgb(15 23 42 / .4);
}
.maildlg::backdrop { background: rgb(11 20 32 / .6); backdrop-filter: blur(3px); }
.maildlg form { padding: 1.85rem; }
.maildlg h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6rem; }
.maildlg__lede { color: var(--day-quiet); font-size: .95rem; margin-bottom: 1.4rem; }

.maildlg__check {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .9rem; color: var(--day-quiet); margin-top: .9rem; cursor: pointer;
}
.maildlg__check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--blue); }
.maildlg__check[hidden] { display: none; }

.maildlg__recht {
  font-size: .82rem; color: var(--day-quiet); line-height: 1.5;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--day-line);
}
.maildlg__recht a { color: var(--blue); }

.maildlg__aktionen {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem;
}
.maildlg__nur, .maildlg__abbruch {
  background: none; border: none; font: inherit; font-size: .93rem;
  cursor: pointer; padding: .4rem 0;
}
.maildlg__nur { color: var(--blue); font-weight: 600; text-decoration: underline; }
.maildlg__abbruch { color: var(--day-quiet); margin-left: auto; }
.maildlg .status { margin-top: 1rem; }

@media print { .maildlg { display: none !important; } }