/* Schwarze Rußflächen, helle Texte und der Grünton des Logos. */
:root {
  color-scheme: dark;
  --black: #030303;
  --paper: var(--black);
  --soft: var(--black);
  --ink: #f3f6ef;
  --green: #b0d957;
  --green-dark: #b0d957;
  --muted: #bbc6b2;
  --line: #3b4933;
  --surface: var(--black);
  --raised: var(--black);
  --soot-texture: linear-gradient(#00000047, #00000047), url("soot-surface.webp");
}
body, .inner-page, .check-page { background-color: var(--paper); color: var(--ink); }
::selection { background: var(--green); color: #101b08; }
:focus-visible { outline-color: #d2ec97; }
.skip-link { color: #101b08; }
.section h2 span, .inner-page h1 span, .check-intro h1 span { color: var(--green); }
.section-kicker, .overview-number, .text-link { color: var(--green); }
.hero { background: var(--black); }
.hero h1, .inner-page h1, .section h2 { text-wrap: balance; }
.hero h1 em { color: var(--green); }
.hero-copy, .eyebrow { color: var(--muted); }
.overview-card { background: var(--surface); border-color: var(--line); }
.overview-card:hover { background: var(--raised); border-color: var(--green); }
.overview-card h3, .service-card h3 { color: var(--ink); }
.overview-card:hover h3 { color: var(--green); }
.home-check { background: var(--surface); color: var(--ink); border-block: 1px solid var(--line); }
.home-check .section-kicker { color: var(--green); }
.home-check p:not(.section-kicker), .home-check-steps small { color: var(--muted); }
.home-check .button { background: var(--green); border-color: var(--green); color: #101b08; }
.home-check .button:hover { background: #c0e775; border-color: #c0e775; }
.home-check-steps, .home-check-steps li { border-color: var(--line); }
.home-check-steps li > span { color: var(--green); border-color: #7b9e4f; }
.home-contact { background: var(--surface); border-top: 1px solid var(--line); }
.instagram-section { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding-block: 42px; border-top: 1px solid var(--line); }
.instagram-section > div { flex: 1 1 260px; min-width: 0; }
.instagram-section .section-kicker { margin-bottom: 10px; }
.instagram-section h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.25; }
.instagram-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--green); font-size: .9375rem; font-weight: 650; text-decoration: none; }
.instagram-link svg { width: 22px; height: 22px; flex: 0 0 22px; }
.instagram-link:hover { color: #d2ec97; text-decoration: underline; text-underline-offset: 4px; }
.instagram-profile { max-width: 100%; padding: 12px 18px; border: 1px solid var(--line); border-radius: 5px; }
.instagram-profile span { min-width: 0; overflow-wrap: anywhere; }
.instagram-profile:hover { border-color: var(--green); }
.contact-card > a.instagram-link { display: flex; }
.footer-links { flex-wrap: wrap; align-items: center; }
.footer-links .instagram-link { font-size: .875rem; }
.service-dark, .service-light { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.service-light { background: var(--soft); }
/* Zwei dezente Anthrazittöne: diagonal gegenüberliegende Leistungen sind gleich. */
#leistungen #brandschutz, #leistungen #lueftungsreinigung { background: #1a1a1a; }
#leistungen #schornsteinfeger, #leistungen #energieberatung { background: #222222; }
.service-card .service-number, .service-light .service-number { color: var(--green); }
.service-card p, .service-light p { color: var(--muted); }
.service-card li, .service-light li { border-color: var(--line); }
.district-note, .law-update { background: var(--surface); border-color: var(--green); }
.regulations { background: var(--paper); }
.law-list summary:hover { color: var(--green); }
.law-list details[open] { background: var(--surface); }
.law-list details[open] summary { color: var(--green); }
.law-content a, .law-note a { color: var(--green); }
.law-content, .law-list summary { padding-inline: 16px; }
.about { background: var(--paper); }
.about-visual { background: var(--black); }
.career { background: var(--surface); border-top: 1px solid var(--line); }
.contact-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.contact-panel > div > p, .contact-card > span { color: var(--muted); }
.contact-card { border-color: var(--line); }
.contact-card > a:not(.button) { color: var(--green); }
.button-primary, .header-check-link { color: #101b08; }
.button-ghost { border-color: #7b8d68; }
.button-ghost:hover { background: var(--black); border-color: var(--green); }
.site-header nav a:hover:not([aria-current="page"]) { background: var(--black); color: var(--green); }
.hero-portrait::after { background: linear-gradient(transparent, #000000bb); }
.js .nav-scrim:not([hidden]) { background: #000000a6; }
dialog { background: var(--surface); border-color: #647655; }
dialog::backdrop { background: #000000df; }
dialog h2, dialog h3 { color: var(--ink); }
dialog a { color: var(--green); }
dialog .draft-note { background: var(--raised); }
/* Formular und Ergebnis bleiben im selben Farbsystem. */
.check-card { background: var(--surface); border-color: var(--line); border-top-color: var(--green); }
.check-choice { background: var(--paper); border-color: #6c7f5c; }
.check-choice:hover { background: var(--raised); }
.check-choice:has(input:checked) { background: var(--black); border-color: var(--green); }
.check-field select, .check-unit, .check-details textarea { background: var(--paper); color: var(--ink); border-color: #7b8d68; }
.check-field select option { background: var(--paper); color: var(--ink); }
.check-card input::placeholder, .check-card textarea::placeholder { color: #a0ad95; opacity: 1; }
.check-card :is(input,select,textarea) { accent-color: var(--green); }
.check-secondary { background: var(--paper); color: var(--ink); border-color: #7b8d68; }
.check-secondary:hover { background: var(--raised); }
.check-steps li > span { border-color: #7b8d68; }
.check-steps li[aria-current="step"] { color: var(--green); }
.check-steps li[aria-current="step"] > span { color: #101b08; }
.check-steps .done > span { background: var(--black); border-color: #7b9e4f; color: var(--ink); }
.check-errors { background: var(--black); color: #ffccba; border-color: #eaa58a; }
.check-result { background: var(--raised); border-color: #8d9d7d; }
.check-green { background: var(--black); border-color: var(--green); }
.check-amber { background: var(--black); border-color: #d9c371; }
.check-orange { background: var(--black); border-color: #e5ad7f; }
.report-counts > div { background: var(--paper); }
.report-counts .report-count-good { border-top-color: var(--green); }
.report-counts .report-count-partial { border-top-color: #d9c371; }
.report-counts .report-count-poor { border-top-color: #e5ad7f; }
.report-counts .report-count-unknown { border-top-color: #a0ad95; }
.report-first { background: var(--black); border-color: #617a45; }
.report-part-heading { background: var(--raised); }
.report-badge { background: var(--black); color: #e1e7db; border: 1px solid currentColor; }
.report-badge-good { background: var(--black); color: #cee9a8; }
.report-badge-partial { background: var(--black); color: #f1dd98; }
.report-badge-poor { background: var(--black); color: #f7c39d; }
.report-task, .report-preparation { background: var(--soft); }
.report-missing { background: var(--paper); border-color: #7b8d68; }
.report-zero-note { background: var(--black); border-color: #e5ad7f; }
.report-certificate .check-scale > span { background: var(--paper); color: var(--ink); }
.check-scale .current { outline-color: var(--ink); }
.report-connections article { border-color: #7b8d68; }
/* Derselbe Stil für die ausschließlich privat sichtbare Statistik. */
.metrics article, .panel { background: var(--surface); }
.login .button, .actions .button { background: var(--green); color: #101b08; }
.actions .secondary { background: var(--surface); color: var(--ink); }
.actions .secondary:hover { background: var(--raised); }
.private { color: var(--green); }
.bar-track { background: var(--raised); }
.bar { background: var(--green); }

/* Gemeinsame matte Rußtextur mit natürlicher, unregelmäßiger Körnung. */
body,
.site-header,
.hero,
.inner-page,
.check-page,
.home-check,
.home-contact,
.regulations,
.about,
.career,
footer {
  background-image: var(--soot-texture);
  background-size: auto, 960px 960px;
  background-repeat: repeat;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* Farbiger Orientierungswert auf dem schwarzen Seitenhintergrund. */
.report-score { --score-color: #bbc6b2; border: 1px solid var(--line); border-top: 5px solid var(--score-color); border-radius: 5px; padding: clamp(20px, 3vw, 30px); margin-bottom: 26px; }
.score-good { --score-color: #b0d957; }
.score-medium { --score-color: #edd16a; }
.score-poor { --score-color: #ff9292; }
.score-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.score-heading h2 { color: var(--score-color); margin: 12px 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.score-heading h2 small { font-size: 1rem; }
.score-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.score-value strong { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.2; color: var(--score-color); }
.score-value > span { color: var(--muted); font-size: .9375rem; }
.score-scale { margin: 26px 0; }
.score-track { height: 22px; position: relative; border-radius: 4px; background: linear-gradient(90deg, #c83e3e 0%, #d86b35 30%, #dfbb42 55%, #a3c94d 78%, #32964b 100%); }
.score-marker { position: absolute; top: -6px; bottom: -6px; width: 4px; transform: translateX(-50%); background: white; box-shadow: 0 0 0 2px #000; border-radius: 1px; }
.score-range { position: absolute; top: -5px; bottom: -5px; border: 2px solid white; border-radius: 4px; background: repeating-linear-gradient(135deg, #ffffff35 0 5px, transparent 5px 10px); }
.score-labels { display: grid; grid-template-columns: 45fr 30fr 26fr; margin-top: 13px; font-size: .9375rem; }
.score-labels span:nth-child(2) { text-align: center; }
.score-labels span:last-child { text-align: right; }
.score-labels small { display: block; font-size: .875rem; color: var(--muted); }
.score-note, .score-details > p { font-size: .9375rem; color: var(--muted); }
.score-conflict { padding-left: 16px; border-left: 3px solid #edd16a; }
.score-details { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.score-details summary { cursor: pointer; min-height: 44px; color: var(--green); font-weight: 650; }
.score-details dl { margin: 0; }
.score-details dl > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.score-details dt small { display: block; color: var(--muted); font-size: .875rem; margin-top: 4px; }
.score-details dd { margin: 0; flex-shrink: 0; font-size: 1.2rem; font-weight: 700; }
.score-details dd small { font-size: .875rem; color: var(--muted); font-weight: 400; }
#heating-technology-fields { margin-top: 18px; }

.check-result h3 { margin: 8px 0 0; font-size: 1.25rem; line-height: 1.35; }

.score-contribution { padding-block: 14px; border-block: 1px solid var(--line); font-weight: 650; }
.heating-points strong { font-size: 1.25rem; color: var(--ink); }

.check-part-fields { min-width: 0; width: 100%; }
.check-part-details { display: grid; gap: 16px; }
.check-part-details:empty { display: none; }
.check-part-details:not(:empty) { border-left: 2px solid var(--line); padding-left: 18px; margin-top: 18px; }

/* Ruhiger Seitenwechsel; Navigation bleibt als fester Orientierungspunkt sichtbar. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-navigation; }
::view-transition-old(root) { animation: page-leave 180ms ease-in both; }
::view-transition-new(root) { animation: page-arrive 380ms cubic-bezier(.2,.7,.2,1) both; }
::view-transition-old(site-navigation), ::view-transition-new(site-navigation) { animation: none; }
@keyframes page-leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@supports not (view-transition-name: none) {
  main { animation: page-arrive 300ms ease-out both; }
}
@media (hover: hover) and (pointer: fine) {
  body { cursor: url("cursor-schornsteinfeger.svg") 4 4, auto; }
  a, button, summary, select, label, input[type="radio"], input[type="checkbox"] { cursor: url("cursor-schornsteinfeger.svg") 4 4, pointer; }
  input:not([type="radio"]):not([type="checkbox"]), textarea { cursor: text; }
  :disabled { cursor: not-allowed; }
}
.soot-trail {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.soot-trail i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #777;
  box-shadow: 0 0 3px #000;
  will-change: transform, opacity;
}
@media (forced-colors: active) {
  body { cursor: auto; }
  a, button, summary, select, label { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  main, ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none !important; }
}