/* =============================================================================
   Verein für anerkannte Normung – Berlin · bso2011.de
   Gestaltungsgrundlage — nüchtern, amtlich, in der Anmutung eines Normblattes

   Grundsatz: Das Papier ist weiß, die Schrift ist Graphit, das Grün ist Zeichen.
     · Normgrün #007F47 stammt aus dem Prüfzeichen BSO 2011 (Original 2014 gemessen)
       — es dient als Linie, Marke und Auszeichnung, NIE als große Fläche
     · Fließtext in einer Antiqua — die Seite soll sich wie ein Regelwerk lesen
     · Überschriften und Tabellen in einer Grotesk — die normative Stimme
     · Keine Verläufe, keine Schatten, keine runden Ecken über 2px
   ========================================================================== */

:root{
  /* Marke */
  --gruen:#007F47;            /* Normgrün — aus dem Prüfzeichen */
  --gruen-tief:#01632F;       /* für Text auf Weiß und Hover */
  --gruen-blass:#EDF4F0;      /* Abschnittsband, sehr leise */
  --gruen-linie:#B7D4C5;

  /* Grundton */
  --papier:#FFFFFF;
  --papier-grau:#F5F6F7;      /* neutrales Band */
  --graphit:#16191C;          /* Überschriften, Fußbereich */
  --tinte:#22272B;            /* Fließtext */
  --tinte-leise:#5A6268;      /* Beiwerk, Marginalien */
  --linie:#D6DADD;
  --linie-fein:#E9ECEE;

  --serif:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --mass:min(1120px,100% - 2.5rem);
  --eng:min(720px,100% - 2.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--serif);
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.bahn{width:var(--mass);margin-inline:auto}
.bahn-eng{width:var(--eng);margin-inline:auto}

/* --- Überschriften ------------------------------------------------------ */

h1,h2,h3,h4{font-family:var(--sans);font-weight:600;color:var(--graphit);margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,4.4vw,2.95rem);line-height:1.14;letter-spacing:-.018em}
h2{font-size:clamp(1.45rem,2.9vw,1.95rem);line-height:1.22;letter-spacing:-.012em;margin-bottom:.55rem}
h3{font-size:1.14rem;line-height:1.35;letter-spacing:-.005em}
h4{font-size:1rem;line-height:1.4}
p{margin:0}
p + p{margin-top:.95rem}

a{color:var(--gruen-tief);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--graphit)}

/* Kennzeichnung — kleine Versalien über einer Überschrift */
.kennung{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gruen-tief);
  margin:0 0 .7rem;
}
.kennung--leise{color:var(--tinte-leise)}

.vorspann{font-size:1.19rem;line-height:1.62;color:var(--tinte)}
.leise{color:var(--tinte-leise)}
.klein{font-size:.93rem;line-height:1.6}

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

.kopfleiste{
  background:var(--graphit);color:#C9CDD1;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.03em;
}
.kopfleiste .bahn{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  align-items:center;justify-content:space-between;
  padding:.5rem 0;
}
.kopfleiste a{color:#fff;text-decoration:none}
.kopfleiste a:hover{text-decoration:underline}

.kopf{border-bottom:1px solid var(--linie);background:var(--papier)}
.kopf .bahn{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
  padding:1.15rem 0;
}
.marke{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.marke img{width:44px;height:auto;display:block;flex:none}
.marke-text{font-family:var(--sans);line-height:1.25}
.marke-text b{display:block;font-size:1.02rem;font-weight:600;color:var(--graphit);letter-spacing:-.01em}
.marke-text span{display:block;font-size:.78rem;color:var(--tinte-leise);letter-spacing:.02em}

nav.haupt{display:flex;flex-wrap:wrap;gap:.15rem 1.4rem;font-family:var(--sans);font-size:.94rem}
nav.haupt a{
  color:var(--tinte);text-decoration:none;padding:.3rem 0;
  border-bottom:2px solid transparent;
}
nav.haupt a:hover{color:var(--graphit);border-bottom-color:var(--linie)}
nav.haupt a[aria-current="page"]{color:var(--graphit);font-weight:600;border-bottom-color:var(--gruen)}

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

section{padding:3.4rem 0}
section.eng{padding:3rem 0}
.band-grau{background:var(--papier-grau);border-block:1px solid var(--linie-fein)}
.band-gruen{background:var(--gruen-blass);border-block:1px solid var(--gruen-linie)}

.titelzone{padding:3.2rem 0 2.6rem;border-bottom:1px solid var(--linie)}
.titelzone h1{margin-bottom:1rem}
.titelzone .vorspann{max-width:56ch}

.abschnittskopf{margin-bottom:1.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.abschnittskopf p{margin-top:.5rem;max-width:62ch}

/* --- Raster ------------------------------------------------------------- */

.raster{display:grid;gap:1.6rem}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.raster-breit{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.6rem;align-items:start}
@media (max-width:820px){.raster-breit{grid-template-columns:1fr}}

.karte{border:1px solid var(--linie);padding:1.5rem 1.4rem;background:var(--papier)}
.karte h3{margin-bottom:.5rem}
.karte .kennung{margin-bottom:.45rem}

/* Merksatz — abgesetzter Kernsatz mit grünem Steg */
.merksatz{
  border-left:3px solid var(--gruen);
  padding:.15rem 0 .15rem 1.25rem;
  font-size:1.1rem;line-height:1.6;
}

/* --- Verzeichnis (Inhaltsverzeichnis der Norm) -------------------------- */

.verzeichnis{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.98rem}
.verzeichnis > li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem 1rem;
  padding:.72rem 0;border-bottom:1px solid var(--linie-fein);
}
.verzeichnis > li > b{font-weight:600;color:var(--gruen-tief);font-variant-numeric:tabular-nums}
.verzeichnis > li > div > b{display:block;font-weight:600;color:var(--graphit)}
.verzeichnis > li > div > span{
  display:block;color:var(--tinte-leise);font-size:.88rem;line-height:1.55;margin-top:.15rem;
}

/* --- Tabellen ----------------------------------------------------------- */

.tabellenrahmen{overflow-x:auto;border:1px solid var(--linie)}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.94rem;background:var(--papier)}
caption{
  caption-side:top;text-align:left;font-family:var(--sans);font-size:.82rem;
  color:var(--tinte-leise);padding:0 0 .6rem;
}
th,td{padding:.72rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie-fein)}
thead th{
  background:var(--papier-grau);color:var(--graphit);font-weight:600;
  font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid var(--linie);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td.kennzeichen{font-weight:600;color:var(--gruen-tief);white-space:nowrap;font-variant-numeric:tabular-nums}

.status{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.04em;
  padding:.12rem .5rem;border:1px solid var(--gruen-linie);
  background:var(--gruen-blass);color:var(--gruen-tief);white-space:nowrap;
}
.status--reserviert{border-color:var(--linie);background:var(--papier-grau);color:var(--tinte-leise)}

/* --- Zeitleiste --------------------------------------------------------- */

.zeitleiste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.zeitleiste li{
  display:grid;grid-template-columns:7.5rem 1fr;gap:.25rem 1.4rem;
  padding:.85rem 0;border-bottom:1px solid var(--linie-fein);
}
.zeitleiste b{
  font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--gruen-tief);font-variant-numeric:tabular-nums;padding-top:.2rem;
}
.zeitleiste span{display:block}
.zeitleiste em{display:block;font-style:normal;color:var(--tinte-leise);font-size:.93rem}
@media (max-width:560px){
  .zeitleiste li{grid-template-columns:1fr}
  .verzeichnis > li{grid-template-columns:1fr}
}

/* --- Listen ------------------------------------------------------------- */

ul.punkte{margin:.9rem 0 0;padding-left:1.15rem}
ul.punkte li{margin-bottom:.45rem}
ul.punkte li::marker{color:var(--gruen)}

ol.schritte{margin:1rem 0 0;padding-left:1.3rem}
ol.schritte li{margin-bottom:.7rem}
ol.schritte li::marker{font-family:var(--sans);font-weight:600;color:var(--gruen-tief)}

dl.begriffe{margin:0}
dl.begriffe dt{
  font-family:var(--sans);font-weight:600;color:var(--graphit);
  padding-top:.85rem;border-top:1px solid var(--linie-fein);
}
dl.begriffe dd{margin:.25rem 0 .85rem;color:var(--tinte)}

/* --- Knöpfe ------------------------------------------------------------- */

.knopfzeile{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.knopf{
  display:inline-block;font-family:var(--sans);font-size:.93rem;font-weight:600;
  padding:.62rem 1.25rem;text-decoration:none;border:1px solid var(--gruen);
  background:var(--gruen);color:#fff;
}
.knopf:hover{background:var(--gruen-tief);border-color:var(--gruen-tief);color:#fff}
.knopf--leise{background:transparent;color:var(--gruen-tief);border-color:var(--linie)}
.knopf--leise:hover{background:var(--papier-grau);color:var(--graphit);border-color:var(--tinte-leise)}

/* --- Hinweis / Amtlicher Kasten ----------------------------------------- */

.hinweis{
  border:1px solid var(--linie);border-left:3px solid var(--gruen);
  background:var(--papier-grau);padding:1.15rem 1.3rem;font-size:.98rem;line-height:1.62;
}
.hinweis b{font-family:var(--sans)}

/* Offener Punkt — MUSS vor dem Aufschalten der Domain gefüllt und entfernt werden.
   Bewusst auffällig: ein unvollständiges Impressum darf nicht unbemerkt live gehen. */
.offen{
  display:inline-block;font-family:var(--sans);font-size:.85rem;font-weight:600;
  padding:.05rem .45rem;background:#FFF3F3;color:#A11A1A;
  border:1px dashed #C24A4A;
}
.offen-kasten{
  border:1px dashed #C24A4A;background:#FFF7F7;color:#7E1F1F;
  padding:1.05rem 1.2rem;font-family:var(--sans);font-size:.93rem;line-height:1.6;
  margin-bottom:2rem;
}

/* --- Zeichen ------------------------------------------------------------ */

.zeichenfeld{display:flex;flex-wrap:wrap;gap:2rem;align-items:center}
.zeichenfeld img{width:min(230px,60%);height:auto;display:block}

/* --- Fußbereich --------------------------------------------------------- */

footer.fuss{background:var(--graphit);color:#B9BEC3;font-family:var(--sans);font-size:.9rem;margin-top:0}
footer.fuss .bahn{padding:3rem 0 1.6rem}
.fuss-raster{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.fuss-raster h4{color:#fff;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.85rem}
.fuss-raster ul{list-style:none;margin:0;padding:0}
.fuss-raster li{margin-bottom:.42rem}
.fuss-raster a{color:#DDE1E4;text-decoration:none}
.fuss-raster a:hover{color:#fff;text-decoration:underline}
.fuss-schluss{
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid #2E3438;
  font-size:.82rem;line-height:1.65;color:#8E959B;
}
.fuss-schluss a{color:#B9BEC3}

/* --- Sprungmarke für die Tastatur --------------------------------------- */

.sprung{
  position:absolute;left:-9999px;top:0;background:var(--gruen);color:#fff;
  padding:.6rem 1rem;font-family:var(--sans);z-index:10;
}
.sprung:focus{left:.5rem;top:.5rem}

/* --- Druck -------------------------------------------------------------- */

@media print{
  .kopfleiste,nav.haupt,.knopfzeile,footer.fuss{display:none}
  body{font-size:11pt;color:#000}
  .band-grau,.band-gruen{background:none;border:0}
  a{color:#000;text-decoration:none}
}