/* ============================================================
   Bauschutt-Analyse.de — Design "Industrial Clear"
   Betongrau-Flächen · Stahlblau · Warngelb (sparsam)
   Nüchtern, normlastig, Mono-Akzente für Normbezeichnungen
   ============================================================ */

:root{
  --concrete:      #e9eaec;
  --concrete-deep: #dcdee2;
  --paper:         #ffffff;
  --paper-soft:    #f6f7f8;
  --ink:           #3a3f45;
  --ink-strong:    #24282d;
  --ink-soft:      #667077;
  --steel:         #33586e;
  --steel-deep:    #26445a;
  --steel-tint:    #e2e9ee;
  --yellow:        #f0b429;
  --yellow-soft:   #fbf3da;
  --line:          #c9ccd1;
  --line-soft:     #d9dbdf;
  --foot:          #2e3338;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--concrete);
  -webkit-text-size-adjust:100%;
}

img,svg{ max-width:100%; height:auto; }

a{ color:var(--steel); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--steel-deep); }

h1,h2,h3,h4{ color:var(--ink-strong); line-height:1.25; margin:0 0 .6em; }
h1{ font-size:clamp(1.75rem, 4.2vw, 2.5rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.3rem, 2.8vw, 1.65rem); margin-top:0; }
h3{ font-size:1.12rem; }
p, ul, ol{ margin:0 0 1em; }
ul, ol{ padding-left:1.35em; }
li{ margin-bottom:.35em; }

.wrap{ max-width:1080px; margin-inline:auto; padding-inline:20px; }

/* ---------- Skip-Link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--yellow); color:var(--ink-strong);
  padding:.6rem 1rem; font-weight:600;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- Header ---------- */
.site-head{
  background:var(--paper);
  border-top:4px solid var(--yellow);
  border-bottom:3px solid var(--steel);
}
.head-in{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem 1.25rem;
  padding-block:.7rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--ink-strong);
}
.brand-mark{ width:36px; height:36px; flex:none; }
.brand-name{
  font-family:var(--mono);
  font-size:.98rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.brand-name .tld{ color:var(--steel); }

.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.nav-btn{
  display:none; flex-direction:column; gap:5px;
  padding:.55rem .5rem; cursor:pointer;
  border:1px solid var(--line); background:var(--paper-soft);
}
.nav-btn span{ display:block; width:22px; height:2px; background:var(--steel); }

.site-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.15rem;
}
.site-nav a{
  display:block; padding:.45rem .7rem;
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:2px solid transparent;
}
.site-nav a:hover{ color:var(--steel-deep); border-bottom-color:var(--line); }
.site-nav a[aria-current="page"]{
  color:var(--steel-deep);
  border-bottom-color:var(--yellow);
}

@media (max-width: 760px){
  .nav-btn{ display:flex; }
  .site-nav{ display:none; width:100%; }
  .nav-toggle:checked ~ .site-nav{ display:block; }
  .site-nav ul{ flex-direction:column; gap:0; padding-block:.4rem; border-top:1px solid var(--line-soft); }
  .site-nav a{ padding:.6rem .2rem; border-bottom:none; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs{
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  padding-block:.8rem 0;
}
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.crumbs li{ margin:0; }
.crumbs li+li::before{ content:"›"; margin-right:.35rem; color:var(--line); }
.crumbs a{ color:var(--ink-soft); }

/* ---------- Hero / Seitenkopf ---------- */
.hero{
  padding-block:2.2rem 2.4rem;
  background-image:
    linear-gradient(to right, rgba(51,88,110,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(51,88,110,.055) 1px, transparent 1px);
  background-size:32px 32px;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:2rem; align-items:center;
}
.hero-art{ padding:0 .5rem; }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ max-width:420px; margin-inline:auto; }
}

.kicker{
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.9rem;
}
.kicker::before{
  content:""; width:.65rem; height:.65rem; flex:none;
  background:var(--yellow);
}
.lead{ font-size:1.08rem; max-width:62ch; }

.meta-line{
  font-family:var(--mono); font-size:.75rem;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.45rem 0;
  margin:1.1rem 0 .9rem;
  letter-spacing:.03em;
}

.note-slim{
  font-size:.82rem; color:var(--ink-soft);
  border-left:3px solid var(--concrete-deep);
  padding-left:.75rem;
  max-width:70ch;
}

/* ---------- Inhalt / Sektionen ---------- */
.content{ padding-block:2.2rem 1rem; }
.content section{ margin-bottom:2.6rem; }

.sec-no{
  font-family:var(--mono); font-size:.72em; font-weight:600;
  color:var(--paper);
  background:var(--steel);
  padding:.15em .5em;
  margin-right:.6rem;
  vertical-align:.12em;
  letter-spacing:.05em;
}

.quick{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--steel);
  padding:.8rem 1rem;
  max-width:75ch;
}
.quick strong{ color:var(--steel-deep); }

.prose{ max-width:75ch; }

/* Norm-/Klassen-Akzente in Monospace */
.norm{
  font-family:var(--mono); font-size:.86em;
  background:var(--steel-tint);
  border:1px solid #cdd8df;
  padding:.05em .35em;
  white-space:nowrap;
  color:var(--steel-deep);
}
.tag-hot{
  font-family:var(--mono); font-size:.86em;
  background:var(--yellow-soft);
  border:1px solid #e8d49a;
  padding:.05em .35em;
  white-space:nowrap;
  color:#7a5a10;
}

/* ---------- Tabellen ---------- */
.table-wrap{
  overflow-x:auto;
  background:var(--paper);
  border:1px solid var(--line);
  margin:1.2rem 0 1.5rem;
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:660px;
  font-size:.93rem;
}
caption{
  caption-side:top;
  text-align:left;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:.7rem .9rem .35rem;
}
th{
  background:var(--steel); color:#fff;
  text-align:left;
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.6rem .9rem;
  vertical-align:bottom;
}
td{
  padding:.65rem .9rem;
  border-top:1px solid var(--line-soft);
  vertical-align:top;
}
tbody tr:nth-child(even){ background:var(--paper-soft); }
.table-note{ font-size:.82rem; color:var(--ink-soft); margin-top:-.9rem; margin-bottom:1.5rem; max-width:75ch; }

/* ---------- Nummerierte Schritte ---------- */
.steps{ list-style:none; padding:0; counter-reset:step; max-width:75ch; }
.steps > li{
  counter-increment:step;
  position:relative;
  padding:0 0 1.1rem 3.1rem;
  margin:0;
}
.steps > li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:.1rem;
  font-family:var(--mono); font-size:.8rem; font-weight:700;
  color:var(--steel-deep);
  background:var(--paper);
  border:1px solid var(--steel);
  padding:.2rem .4rem;
}
.steps > li:not(:last-child)::after{
  content:""; position:absolute; left:1.05rem; top:2.15rem; bottom:.15rem;
  width:1px; background:var(--line);
}
.steps h3{ margin-bottom:.25rem; font-size:1.02rem; }
.steps p{ margin-bottom:.4rem; }

/* ---------- Hinweis- / Warnboxen ---------- */
.warn{
  background:var(--yellow-soft);
  border:1px solid #ecd9a4;
  border-left:5px solid var(--yellow);
  padding:.85rem 1rem .35rem;
  margin:1.2rem 0 1.5rem;
  max-width:75ch;
}
.warn-tag{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:#7a5a10;
  margin-bottom:.35rem;
}

.info{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:5px solid var(--steel);
  padding:.85rem 1rem .35rem;
  margin:1.2rem 0 1.5rem;
  max-width:75ch;
}
.info .warn-tag{ color:var(--steel-deep); }

/* ---------- CTA ---------- */
.cta{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:6px solid var(--yellow);
  padding:1.1rem 1.25rem .9rem;
  margin:1.6rem 0 2rem;
  max-width:75ch;
}
.cta-tag{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-deep);
  margin-bottom:.4rem;
}
.btn{
  display:inline-block;
  background:var(--steel); color:#fff;
  font-weight:600; font-size:.95rem;
  padding:.6rem 1.15rem;
  text-decoration:none;
  border:1px solid var(--steel-deep);
}
.btn:hover{ background:var(--steel-deep); color:#fff; }
.cta-fine{ font-size:.8rem; color:var(--ink-soft); margin:.75rem 0 0; }

/* ---------- Karten / Kacheln ---------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem;
  margin:1.2rem 0 1.5rem;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--steel);
  padding:1rem 1.1rem;
  text-decoration:none;
  color:var(--ink);
  display:block;
}
a.card:hover{ border-top-color:var(--yellow); }
.card h3{ margin:.5rem 0 .35rem; font-size:1.02rem; color:var(--steel-deep); }
.card p{ font-size:.9rem; margin:0; color:var(--ink); }
.card .card-icon{ width:34px; height:34px; }
.card-kicker{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* Szenario-Karten */
.scenario{ border-top-color:var(--concrete-deep); }
.scenario h3{ color:var(--ink-strong); }
.scenario .who{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel);
}

/* ---------- FAQ ---------- */
.faq{ max-width:78ch; }
.faq-item{
  background:var(--paper);
  border:1px solid var(--line);
  padding:.9rem 1.1rem .4rem;
  margin-bottom:.7rem;
}
.faq-item h3{ font-size:1rem; margin-bottom:.4rem; color:var(--steel-deep); }
.faq-item p{ font-size:.94rem; }

/* ---------- Abschluss / Transparenz ---------- */
.closing{
  background:var(--paper-soft);
  border:1px solid var(--line-soft);
  padding:1rem 1.2rem .4rem;
  max-width:78ch;
  font-size:.88rem;
  color:var(--ink-soft);
}
.closing h2{ font-size:1rem; color:var(--ink); }

/* ---------- Footer ---------- */
.site-foot{
  background:var(--foot);
  color:#c8ccd1;
  margin-top:3rem;
  border-top:4px solid var(--steel);
  font-size:.9rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.5rem;
  padding-block:2rem 1rem;
}
.foot-title{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff;
  margin-bottom:.6rem;
}
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:.35rem; }
.site-foot a{ color:#dfe3e7; }
.site-foot a:hover{ color:#fff; }
.foot-byline{ font-size:.82rem; color:#9aa1a8; }
.foot-legal{
  border-top:1px solid #454b51;
  padding-block:.9rem 1.4rem;
  font-size:.78rem;
  color:#9aa1a8;
  font-family:var(--mono);
  letter-spacing:.02em;
}

/* ---------- Rechtsseiten / 404 ---------- */
.page-plain{ padding-block:2.2rem 1rem; }
.page-plain article{ max-width:75ch; }
.draft-banner{
  background:var(--yellow);
  color:var(--ink-strong);
  font-family:var(--mono); font-weight:700;
  font-size:.85rem; letter-spacing:.04em;
  padding:.7rem 1rem;
  margin-bottom:1.5rem;
  border:1px solid #d09b13;
}
.err-code{
  font-family:var(--mono);
  font-size:clamp(3.5rem, 12vw, 6rem);
  font-weight:700;
  color:var(--steel);
  line-height:1;
  margin-bottom:.5rem;
}

/* ---------- Kleinkram ---------- */
.backtop{ font-family:var(--mono); font-size:.78rem; }
hr{ border:none; border-top:1px solid var(--line); margin:2rem 0; }

@media (max-width: 480px){
  .wrap{ padding-inline:14px; }
  table{ min-width:560px; }
}