/* Preflite | Öffentliche Seiten: Startseite, Impressum, Datenschutz. Mobile-First. */

.is-home { background: var(--paper); color: var(--ink); line-height: 1.6; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .7rem 1rem; background: var(--panel-2); color: var(--engrave); }
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding-inline: var(--pad); }
.h2 { font: 600 clamp(1.6rem, 5vw, 2.1rem)/1.15 var(--cond); letter-spacing: .01em; }
.lead { margin-top: var(--s2); max-width: 42rem; color: var(--ink-2); font-size: 1.02rem; }
.link { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--rule); }
.link:hover { text-decoration-color: currentColor; }
.link--quiet { font-size: .9rem; color: var(--ink-2); }
.brandname strong { font-weight: 700; }

/* ---------- Kopfzeile ---------- */

.hd { background: var(--panel-2); color: var(--engrave); }
.hd__inner { min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.hd__brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--engrave); font: 600 1.05rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.hd__mark { width: 1.4rem; height: 1.4rem; }
.hd__nav { display: flex; align-items: center; gap: var(--s2); }
.hd__nav a { color: var(--engrave-2); text-decoration: none; font-size: .9rem; }
.hd__nav a:hover { color: var(--engrave); }
.hd__nav a:not(.hd__login) { display: none; }
.hd__login { padding: .4rem .9rem; border: 1px solid #4A575C; border-radius: 5px; background: transparent; color: var(--engrave) !important; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; }
.hd__login:hover { border-color: var(--engrave-2); }

/* ---------- Auftakt: Instrumentenbrett ---------- */

.hero {
  position: relative; color: var(--engrave);
  background: radial-gradient(90% 70% at 15% 0%, #46545A 0%, transparent 60%), var(--panel);
  padding: var(--s4) 0 0;
}
.hero__inner { display: grid; gap: var(--s3); align-items: center; padding-bottom: var(--s4); }
.hero::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--lamp-amber) 0 18%, rgba(242, 169, 59, .12) 18%); }
.hero__title { font: 600 clamp(2.1rem, 8vw, 3.4rem)/1.06 var(--cond); letter-spacing: .005em; color: #fff; }
.hero__lead { margin-top: var(--s2); color: var(--engrave-2); font-size: 1.04rem; max-width: 34rem; }
.hero__links { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.link--bright { color: var(--engrave); text-decoration-color: var(--engrave-3); }
.link--bright:hover { color: #fff; }

/* Instrumentenblock wie im Werkzeug */
.deck {
  padding: var(--s2); background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px rgba(10, 14, 16, .3);
}
.deck__label { font: 600 .66rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--engrave-3); }
.deck__label--sub { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid rgba(0, 0, 0, .3); }
.deck__row { margin-top: var(--s1); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: center; }
.gaugebig { width: 7.5rem; height: 7.5rem; }
.gaugebig__num { font: 600 11px/1 var(--cond); fill: var(--engrave-2); }
.gaugebig__value { font: 400 30px/1 var(--mono); fill: #F4F2EA; }
.gaugebig__unit { font: 600 9px/1 var(--cond); letter-spacing: .14em; fill: var(--engrave-3); }
.gaugebig__needle { transform-origin: 100px 100px; transform: rotate(-135deg); }
.gaugebig__needle.is-set { transform: rotate(113.4deg); transition: transform 1.5s cubic-bezier(.3, .9, .3, 1.05); }
.deck__verdict {
  padding: .8rem 1rem; border-radius: 8px; background: #141A1C; border: 1px solid #0B0F11;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .7);
}
/* Die Anzeige bekommt ihre eigene Mindestbreite, damit das Wort nicht bricht */
.deck__verdict { display: grid; place-items: center; min-height: 4.6rem; }
.deck__word {
  display: block; text-align: center; white-space: nowrap; font: 600 clamp(1.15rem, 4.2vw, 1.55rem)/1.05 var(--cond); letter-spacing: .04em;
  text-transform: uppercase; overflow-wrap: anywhere;
  color: #323B3E; transition: color .4s, text-shadow .5s;
}
.deck.is-lit .deck__word { color: var(--lamp-green); text-shadow: 0 0 16px rgba(95, 191, 107, .5); }
.deck__lamps { margin-top: var(--s1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; background: #161C1E; border-radius: 9px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.dlamp {
  display: grid; place-items: center; min-height: 2.3rem; padding: .3rem .2rem; border-radius: 5px; text-align: center;
  font: 600 .6rem/1.15 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, #2E373A, #283034); color: #5F6B6F;
  transition: background .25s, color .25s, box-shadow .3s;
}
.deck.is-lit .dlamp--ok { background: radial-gradient(90% 80% at 50% 35%, #8BDB95, #4FA85B 75%); color: #0E2A13; box-shadow: 0 0 12px rgba(95, 191, 107, .45); }
.deck.is-lit .dlamp--warn { background: radial-gradient(90% 80% at 50% 35%, #FFD48A, #E09A2A 75%); color: #3A2600; box-shadow: 0 0 12px rgba(242, 169, 59, .5); }

/* ---------- Abschnitte ---------- */

.section { padding: var(--s4) 0; }
.section--sheet { background: var(--sheet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.eyebrow { font: 600 .7rem/1.3 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--ok); margin-bottom: .5rem; }
.hero__claim {
  margin-top: var(--s2); padding: .7rem .9rem; border-left: 3px solid var(--lamp-amber);
  font: 600 1.05rem/1.4 var(--cond); letter-spacing: .01em; color: #fff; background: rgba(0, 0, 0, .18); border-radius: 0 6px 6px 0;
}

/* Beispielbericht mit Anmerkungen */
.explain { margin-top: var(--s3); display: grid; gap: var(--s3); align-items: start; }
.sample { position: relative; padding: var(--s2); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 14px 34px rgba(28, 34, 39, .12); }
.sample__top { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: center; }
.sample__verdict { position: relative; }
.sample .gaugebig { width: 6.5rem; height: 6.5rem; }
.gaugebig__value { font: 400 30px/1 var(--mono); fill: #F4F2EA; }
.gaugebig__unit { font: 600 9px/1 var(--cond); letter-spacing: .14em; fill: var(--engrave-3); }
.gaugebig__needle { transform-origin: 100px 100px; transform: rotate(-135deg); }
.gaugebig__needle.is-set { transform: rotate(113.4deg); transition: transform 1.5s cubic-bezier(.3, .9, .3, 1.05); }
.sample__label { font: 600 .68rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sample__title { margin-top: .2rem; font: 600 1.2rem/1.2 var(--cond); }
.sample__text { margin-top: .35rem; font-size: .92rem; color: var(--ink-2); }
.sample__areas { list-style: none; margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--rule); display: grid; gap: .5rem; font-size: .93rem; }
.sample__areas li { position: relative; display: flex; align-items: center; gap: .6rem; }
.sample__urgent, .sample__contact { position: relative; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule); }
.sample__item { margin-top: .35rem; display: flex; align-items: center; gap: .6rem; font-size: .93rem; color: var(--ink-2); }
.dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lamp-green); }
.dot--warn { background: var(--lamp-amber); }
.dot--err { background: var(--lamp-red); }

/* Nummernmarken auf dem Beispiel */
.mark {
  position: absolute; z-index: 2; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--panel-2); color: var(--lamp-amber); font: 600 .78rem/1 var(--cond);
  box-shadow: 0 0 0 3px var(--paper), 0 4px 10px rgba(28, 34, 39, .3);
  opacity: 0; transform: scale(.6); transition: opacity .35s ease-out, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.sample.is-in .mark { opacity: 1; transform: none; }
.sample.is-in .mark--2 { transition-delay: .15s; }
.sample.is-in .mark--3 { transition-delay: .3s; }
.sample.is-in .mark--4 { transition-delay: .45s; }
.sample.is-in .mark--5 { transition-delay: .6s; }
.mark--1 { left: -.6rem; top: -.6rem; }
.mark--2 { right: -.6rem; top: -.8rem; }
.mark--3 { left: -1.85rem; top: -.15rem; }
.mark--4 { left: -1.85rem; top: calc(var(--s2) - .1rem); }
.mark--5 { left: -1.85rem; top: calc(var(--s2) - .1rem); }
.sample--annot { margin-left: 1.2rem; }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: none; }
.note { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.note__num {
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; flex: none;
  background: var(--panel-2); color: var(--lamp-amber); font: 600 .8rem/1 var(--cond);
}
.note div { font-size: .96rem; color: var(--ink-2); }
.note strong { color: var(--ink); }

/* Punktzahl: Gewichtung als Balken */
.score2 { display: grid; gap: var(--s3); align-items: center; }
.ticks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--ink-2); }
.ticks li::before { content: ""; width: .85rem; height: .5rem; margin-top: .4rem; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.weights { margin: 0; padding: var(--s3) var(--s2) var(--s2); background: var(--panel-2); border-radius: 12px; color: var(--engrave); }
/* Balken und Beschriftung getrennt, damit alle Balken auf derselben Linie stehen */
.weights__bars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); align-items: end; justify-items: center;
  height: 11rem; border-bottom: 2px solid rgba(230, 228, 218, .3);
}
.weights__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: .7rem; }
.wlabel { display: grid; justify-items: center; align-content: start; text-align: center; gap: .2rem; }
.wbar__col { width: 100%; max-width: 5rem; height: 0; border-radius: 6px 6px 0 0; transition: height 1.1s cubic-bezier(.3, .9, .3, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.weights.is-in .wbar__col { height: var(--h); }
.wbar__col--3 { background: linear-gradient(180deg, #F0625A, #C7392E); }
.wbar__col--2 { background: linear-gradient(180deg, #F7B85B, #D98E21); }
.wbar__col--1 { background: linear-gradient(180deg, #7FCF89, #4C9E58); }
.wbar__x { font: 400 1.3rem/1 var(--mono); color: #fff; }
.wbar__l { font: 600 .72rem/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--engrave-2); }
.wbar__e { font-size: .72rem; color: var(--engrave-3); line-height: 1.3; }
.weights__cap { margin-top: var(--s2); text-align: center; font-size: .82rem; color: var(--engrave-3); }

/* Prüfbereiche mit Quelle */
.areas { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.areas li { padding-top: var(--s2); border-top: 1px solid var(--rule); display: grid; gap: .25rem; }
.areas strong { font-weight: 600; }
.areas span { font-size: .93rem; color: var(--ink-2); }
.areas em { font: 600 .66rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); opacity: .75; }

/* Grenzen */
.nope { display: grid; gap: var(--s3); align-items: start; }
.nope__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.nope__list li { position: relative; padding-left: 2.1rem; color: var(--ink-2); font-size: .96rem; }
.nope__list li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 2px solid var(--ink-2); background:
    linear-gradient(45deg, transparent 44%, var(--ink-2) 44%, var(--ink-2) 56%, transparent 56%);
}
.nope__list strong { color: var(--ink); }

/* Fragen */
.faq__list { margin-top: var(--s3); display: grid; gap: .5rem; }
.faq__item { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.faq__item summary { cursor: pointer; padding: .9rem var(--s2); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font: 400 1.3rem/1 var(--mono); color: var(--ink-2); transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 var(--s2) var(--s2); color: var(--ink-2); }

/* Anmeldung im Overlay */
.sheet--login {
  position: relative; width: min(24rem, 100%); padding: var(--s3) var(--s3) var(--s3);
  background: linear-gradient(180deg, #343E42, var(--panel-2)); border: 1px solid #1B2225;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(8, 11, 13, .6);
}
.login__close {
  position: absolute; right: .8rem; top: .8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 6px; color: var(--engrave-3); cursor: pointer; font-size: .95rem;
}
.login__close:hover { color: var(--engrave); background: rgba(255, 255, 255, .06); }
.login__brand { display: flex; align-items: center; gap: .55rem; color: var(--engrave); }
.login__mark { width: 1.5rem; height: 1.5rem; }
.login__brand .brand__logo, .hd__brand .brand__logo { width: auto; max-width: 11rem; object-fit: contain; }
.login__wordmark { font: 600 .95rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.login__title { margin-top: var(--s3); font: 600 1.7rem/1.1 var(--cond); color: #fff; }
.login__sub { margin-top: .4rem; font-size: .9rem; color: var(--engrave-3); }
.login__form { margin-top: var(--s3); display: grid; gap: var(--s2); }
.lfield { display: grid; gap: .35rem; }
.lfield span { font: 600 .66rem/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--engrave-3); }
.lfield input {
  min-height: 2.9rem; padding: .55rem .8rem; border: 1px solid var(--well-edge); border-radius: 7px;
  background: var(--well); color: #F4F2EA; font-size: 1rem; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.lfield input:focus { outline: none; border-color: var(--lamp-amber); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(242, 169, 59, .22); }
.lfield input:-webkit-autofill, .lfield input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F4F2EA; -webkit-box-shadow: 0 0 0 1000px var(--well) inset; caret-color: #F4F2EA;
}
.login__note { font-size: .88rem; color: var(--engrave-2); }
.login__error { padding: .55rem .8rem; border-left: 3px solid var(--lamp-red); background: rgba(229, 72, 59, .12); font-size: .9rem; color: #FFC9C3; border-radius: 0 6px 6px 0; }
.login__btn {
  margin-top: .3rem; min-height: 3rem; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #2B3437, #1C2326); border: 1px solid #0F1416; color: var(--lamp-amber);
  font: 600 .88rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .35);
}
.login__btn:hover { text-shadow: 0 0 10px rgba(242, 169, 59, .7); }
.login__forgot {
  justify-self: center; font-size: .85rem; color: var(--engrave-3); cursor: pointer;
  background: none; border: 0; padding: .2rem; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(230, 228, 218, .3);
}
.login__forgot:hover { color: var(--engrave); }

/* Passwort vergessen: dieselbe Karte wie die Anmeldung, als eigene Seite */
.is-resetpage { min-height: 100vh; background: radial-gradient(90% 70% at 20% 0%, #46545A 0%, transparent 60%), var(--panel); }
.resetwrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s3) var(--pad); }
.login__btn--link { display: grid; place-items: center; text-decoration: none; }

/* ---------- Fußzeile ---------- */

.ft { padding: var(--s3) 0; background: var(--panel-2); color: var(--engrave-2); font-size: .85rem; }
.ft__inner { display: grid; gap: var(--s2); }
.ft__line .brandname { color: var(--engrave); }
.ft__version { display: block; margin-top: .2rem; color: var(--engrave-3); }
.ft__links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ft__links a { color: var(--engrave-2); }
.ft__links a:hover { color: var(--engrave); }

/* ---------- Rechtstexte ---------- */

.legal { padding: var(--s4) 0; }
.legal__inner { max-width: 44rem; }
.legal h1 { font: 600 clamp(1.8rem, 6vw, 2.6rem)/1.1 var(--cond); }
.legal h2 { margin-top: var(--s4); font: 600 1.15rem/1.3 var(--cond); letter-spacing: .03em; }
.legal p, .legal li { margin-top: var(--s2); color: var(--ink-2); }
.legal ul { margin: 0; padding-left: 1.2rem; }
.legal a { color: var(--ink); }
.legal .lead-l { margin-top: var(--s2); font-size: 1.02rem; color: var(--ink); }
.legal address { margin-top: var(--s2); font-style: normal; font: 400 .95rem/1.8 var(--mono); color: var(--ink); }

/* ---------- Aufbau ab Tablet ---------- */

@media (min-width: 720px) {
  .hd__nav a:not(.hd__login) { display: inline; }
  .hero { padding-top: calc(var(--s4) + .5rem); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: var(--s4); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .faq__list { max-width: 46rem; }
  .ft__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ft__version { display: inline; margin-top: 0; }
}

@media (min-width: 1000px) {
  .explain { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--s4); }
  .sample--annot { margin-left: 1.5rem; }
  .score2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 24rem); gap: var(--s4); }
  .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nope { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .gaugebig__needle.is-set, .deck__word, .dlamp { transition: none; }
}