/* arbeitssicherheits-gesetz.de */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-var.woff2') format('woff2');
}

:root {
  /* Blau */
  --bg:        #004994;
  --bg-dark:   #003368;
  --navy:      #002449;
  --navy-dk:   #001933;
  --bg-light:  #0095db;
  --tint-mid:  #a1daf8;
  --tint:      #d4edfc;

  /* Grau */
  --ink:       #3c3c3c;
  --grey-700:  #706f6f;
  --grey-500:  #9c9c9c;
  --grey-300:  #dadada;
  --grey-100:  #ededed;
  --white:     #ffffff;

  --warn:      #b71918;
  --ok:        #00812c;

  /* Groessenskala */
  --fs-0: .875rem;  --fs-1: 1rem;      --fs-2: 1.125rem;  --fs-3: 1.25rem;
  --fs-8: 1.6875rem; --fs-9: 1.875rem; --fs-11: 2.125rem; --fs-12: 2.375rem;
  --fs-14: 2.75rem;  --fs-15: 3rem;

  --lh-tight: 1.2;   /* lineHeights-1 */
  --lh-text:  1.5;   /* lineHeights-3 */

  --inset: 24px;     /* 4px Balken + 20px Innenabstand */
  --radius: 10px;    
  --radius-sm: 4px;  /* .25rem */

  --wrap: 1180px;
  /* Alle Bloecke laufen auf voller Spaltenbreite. */
  --measure: 100%;
  --fs: 1rem;
}


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

html { font-size: var(--fs); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
  font-size: var(--fs-1);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- Sprungmarke ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Seitenkopf ---------- */
.mast-top { display: flex; align-items: center; gap: 18px; padding: 14px 0 0; }
.sigil {
  font-size: 1.75rem; font-weight: 700; color: var(--bg); line-height: 1;
  margin-right: 4px;
}

/* Absenderzeile: bewusst leise. Die Seite handelt vom Gesetz, nicht von der
   Marke. Die Zuordnung traegt der Anbieterhinweis am Textende. */
.by {
  margin: 0 auto 0 0; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-0); color: var(--grey-500); line-height: 1;
}
.by img { display: block; width: 68px; height: auto; }

.a11y { display: flex; gap: 5px; align-items: center; }
.a11y button {
  font: inherit; font-weight: 600; font-size: var(--fs-0); cursor: pointer;
  border-radius: var(--radius-sm);
  background: transparent; color: var(--grey-700);
  border: 1px solid var(--grey-300); padding: 2px 9px; line-height: 1.5;
}
.a11y button:hover { border-color: var(--bg); color: var(--bg); }
.a11y button[aria-pressed="true"] { background: var(--bg); border-color: var(--bg); color: #fff; }

/* ---------- Titelkopf ---------- */
.masthead { background: var(--white); }
.masthead .wrap { padding-bottom: 30px; }
.masthead .eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bg); margin: 0 0 6px;
}
.masthead h1, .masthead .sitetitle {
  margin: 26px 0 0; font-weight: 700; color: var(--bg); letter-spacing: -.005em;
  font-size: var(--fs-12); line-height: var(--lh-tight);
}
@media (min-width: 780px)  { .masthead h1, .masthead .sitetitle { font-size: var(--fs-14); } }
@media (min-width: 1024px) { .masthead h1, .masthead .sitetitle { font-size: var(--fs-15); } }
.masthead .sitetitle a { color: inherit; text-decoration: none; }
.masthead .sitetitle a:hover { color: var(--bg); }
/* Lange Komposita (Arbeitsschutzausschuss, Gefährdungsbeurteilung) passen auf dem Handy
   nicht in eine Zeile. Nur dort trennen, auf breiten Schirmen bleibt jedes Wort ganz. */
@media (max-width: 779px) {
  h1, h2, h3, .masthead .sitetitle { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}

.masthead p.claim { margin: 14px 0 0; color: var(--grey-700); max-width: var(--measure); }

/* ---------- Hauptnavigation: Textlinks, aktiver Punkt blau unterstrichen ---------- */
.mainnav { background: var(--white); border-bottom: 1px solid var(--grey-300); }
/* Negativer Rand in Hoehe des Link-Innenabstands, damit der erste Text mit
   Logo, Titel und Brotkrume fluchtet. */
.mainnav ul { list-style: none; margin: 0 0 0 -14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mainnav a {
  display: block; color: var(--ink); text-decoration: none; font-weight: 600;
  padding: 13px 14px; font-size: .9375rem; border-bottom: 3px solid transparent;
}
.mainnav a:hover, .mainnav a:focus { color: var(--bg); border-bottom-color: var(--tint-mid); }
.mainnav a[aria-current="page"] { color: var(--bg); border-bottom-color: var(--bg); }

/* ---------- Brotkrume ---------- */
.crumbs { background: var(--white); font-size: .875rem; }
.crumbs .wrap { padding-top: 14px; padding-bottom: 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--grey-700); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--grey-500); }

/* ---------- Grundraster ---------- */
/* Nur oben und unten setzen: die Kurzschreibweise padding: 40px 0 86px hat den
   seitlichen Abstand von .wrap geloescht, der Inhalt stand 20px links vom Kopf. */
.layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 40px; padding-bottom: 86px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 0; padding-top: 22px; } }

/* ---------- Inhaltsverzeichnis ---------- */
.toc { position: sticky; top: 16px; font-size: .9375rem; }
@media (min-width: 901px) { .toc > summary { display: none; } }
@media (max-width: 900px) {
  .toc { position: static; margin-bottom: 30px; }
  .toc > summary {
    padding: 11px 0; cursor: pointer; font-weight: 700;
    border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300);
    margin-bottom: 14px;
  }
  .toc .tocbody { padding: 0; }
}
.toc h2 {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grey-700); margin: 0 0 10px; font-weight: 700;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: flex; gap: 7px; padding: 5px 10px; color: var(--ink); text-decoration: none;
  border-left: 2px solid var(--grey-300); line-height: 1.45;
}
.toc a:hover { color: var(--bg); border-left-color: var(--tint-mid); }
.toc a.is-active { border-left-color: var(--bg); font-weight: 600; color: var(--bg); }
.toc .num { font-weight: 700; color: var(--bg); flex: none; min-width: 2.7em; }

/* ---------- Fliesstext ---------- */
main { min-width: 0; }
main h1 {
  font-size: var(--fs-9); line-height: var(--lh-tight); color: var(--bg);
  font-weight: 700; letter-spacing: -.005em; margin: 0 0 16px; max-width: var(--measure);
}
@media (min-width: 1024px) { main h1 { font-size: var(--fs-11); } }
main h2 {
  font-size: var(--fs-8); line-height: var(--lh-tight); color: var(--bg);
  font-weight: 700; margin: 52px 0 16px; max-width: var(--measure);
}
main h2:first-child { margin-top: 0; }
main h3 { font-size: var(--fs-3); line-height: var(--lh-tight); color: var(--bg); font-weight: 700; margin: 30px 0 10px; max-width: var(--measure); }
main p, main ul, main ol { max-width: var(--measure); }
main p { margin: 0 0 15px; }
main ul, main ol { margin: 0 0 15px; padding-left: 22px; }
main li { margin-bottom: 6px; }
a { color: var(--bg); }
a:hover { color: var(--bg-dark); }
main p a, main li a { text-underline-offset: 2px; }

.lead { font-size: var(--fs-2); line-height: var(--lh-text); color: var(--ink); }

/* ---------- Standzeile ---------- */
.standline {
  font-size: .75rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grey-700); font-weight: 600;
  border-top: 1px solid var(--grey-300);
  padding: 9px 0 0; margin: 0 0 28px; max-width: var(--measure);
}

/* ---------- Gesetzeswortlaut ---------- */
.norm {
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #f2f9fe;
  border-left: 4px solid var(--bg);
  padding: 20px 20px 8px 20px; margin: 0 0 28px;
  max-width: var(--measure);
}
.norm .normhead {
  font-size: .75rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--bg-dark); margin: 0 0 10px;
}
.norm p { max-width: none; margin: 0 0 12px; }
.norm .abs { font-weight: 700; color: var(--navy); }

/* Nummerierte Aufzaehlungen im Gesetzestext: Nummer links neben dem Text,
   wie in der amtlichen Fassung. Verschachtelung (1. -> a)) bleibt erhalten. */
.norm-dl { margin: 0 0 12px; padding: 0; }
.norm-dl > dt {
  float: left; clear: left; width: 2.6em; margin: 0; padding: 0;
  font-weight: 600; color: var(--navy);
}
.norm-dl > dd { margin: 0 0 8px 2.6em; padding: 0; }
.norm-dl > dd > p { margin: 0 0 6px; }
.norm-dl > dd:last-child { margin-bottom: 0; }
.norm-dl .norm-dl { margin-top: 6px; }
.norm-dl .norm-dl > dt { width: 2.2em; font-weight: 400; }
.norm-dl .norm-dl > dd { margin-left: 2.2em; }
.norm-dl::after { content: ""; display: block; clear: both; }
.norm .quelle { font-size: .8125rem; color: var(--grey-700); border-top: 1px solid var(--grey-300); padding-top: 8px; margin-top: 4px; }

/* ---------- Kaesten ---------- */
.box { border-left: 4px solid var(--grey-300); padding: 4px 0 4px 20px; margin: 28px 0; max-width: var(--measure); }
.box > :last-child { margin-bottom: 0; }
.box h3 { margin-top: 0; font-size: 1rem; }
.box p, .box ul { max-width: none; }

.box--info { border-left-color: var(--bg); }
.box--warn { border-left-color: var(--warn); }
.box--warn h3 { color: var(--warn); }
.box--buero { border-left-color: var(--bg-light); }

/* Herausgeber: Absender klar benennen */

/* ---------- Tabellen ---------- */
.tablewrap { overflow-x: auto; margin: 0 0 24px; max-width: var(--measure); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: 9px 12px; border: 1px solid var(--grey-300); vertical-align: top; }
thead th { background: var(--tint); color: var(--bg); font-weight: 700; border-color: var(--tint-mid); }
tbody tr:nth-child(even) { background: #fafbfd; }

/* ---------- Paragrafenuebersicht ---------- */
.plist { list-style: none; margin: 0 0 24px; padding: 0; max-width: var(--measure); border-top: 1px solid var(--grey-300); }
.plist li { margin: 0; border-bottom: 1px solid var(--grey-300); }
.plist a { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 14px; padding: 13px 8px; text-decoration: none; color: var(--ink); }
.plist a:hover { background: #fafbfd; }
.plist .p { font-weight: 700; color: var(--bg); }
.plist .t { font-weight: 600; color: var(--navy); display: block; }
.plist .k { color: var(--grey-700); font-size: .9375rem; display: block; }

/* ---------- Bloetterung ---------- */
.pager { display: flex; justify-content: space-between; gap: 14px; margin: 44px 0 0; border-top: 1px solid var(--grey-300); padding-top: 16px; font-size: var(--fs-0); max-width: var(--measure); }
.pager a { text-decoration: none; font-weight: 600; }
.pager span { color: var(--grey-500); }

/* ---------- Formulare und Buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--bg); color: #fff; border: 1px solid var(--bg);
  padding: 11px 24px; text-decoration: none; text-align: center;
  border-radius: var(--radius);
}
.btn:hover { background: var(--bg-dark); border-color: var(--bg-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--bg); }
.btn--ghost:hover { background: var(--tint); color: var(--bg-dark); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

label { display: block; font-weight: 600; margin: 0 0 4px; font-size: .9375rem; }
label .req { color: var(--warn); }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=file], select, textarea {
  font: inherit; width: 100%; padding: 10px 12px;
  border: 1px solid var(--grey-300); background: var(--white); color: var(--ink);
  border-radius: var(--radius-sm);
}
textarea { min-height: 116px; resize: vertical; }
.field { margin: 0 0 15px; }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 620px) { .fieldrow { grid-template-columns: 1fr; gap: 0; } }
.hint { font-size: .8125rem; color: var(--grey-700); margin: 4px 0 0; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .875rem; font-weight: 400; }
.check input { margin-top: 4px; }

.formstate { margin: 12px 0 0; font-weight: 600; }
.formstate[data-ok="1"] { color: var(--ok); }
.formstate[data-ok="0"] { color: var(--warn); }

/* ---------- Angebotsbloecke ---------- */
.leads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0 0 24px; max-width: var(--measure); }
@media (max-width: 860px) { .leads { grid-template-columns: 1fr; } }
.leads > a { padding: 2px 0 2px 18px; border-left: 4px solid var(--tint-mid); text-decoration: none; color: var(--ink); display: block; }
.leads > a:hover { border-left-color: var(--bg); }
.leads .n { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--bg); text-transform: uppercase; }
.leads .h { display: block; font-weight: 700; color: var(--navy); margin: 5px 0 4px; font-size: 1.0625rem; }
.leads .d { display: block; color: var(--grey-700); font-size: .9375rem; line-height: 1.5; }

/* ---------- Fusszeile ---------- */
footer.site { background: var(--navy); color: #c6d4e4; margin-top: 0; font-size: .9375rem; }
footer.site .wrap { padding-top: 34px; padding-bottom: 30px; }
footer.site h2 { color: #fff; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 10px; border: 0; padding: 0; }
footer.site a { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 800px) { footer.site .cols { grid-template-columns: 1fr; gap: 24px; } }
footer.site .footlogo { margin: 0 0 12px; line-height: 0; }
footer.site .footlogo img { display: block; width: 112px; height: auto; opacity: .8; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 5px; }
footer.site .legal { border-top: 1px solid #143255; margin-top: 26px; padding-top: 16px; font-size: .8125rem; color: #9db2c9; }

/* ---------- Fokus ---------- */
:focus-visible { outline: 3px solid var(--bg-light); outline-offset: 2px; }
.topbar :focus-visible, .mainnav :focus-visible, footer.site :focus-visible { outline-color: #ffd23f; }

/* ---------- Grossschrift ---------- */
html[data-fs="l"]  { --fs: 1.125rem; }
html[data-fs="xl"] { --fs: 1.25rem; }

/* ---------- Bestellurkunde: Druckfassung ---------- */
.urkunde { border: 1px solid var(--grey-500); padding: 30px 32px; background: #fff; margin: 0 0 20px; }
.urkunde h3 { margin-top: 0; font-size: 1.25rem; }
.urkunde .zeile { border-bottom: 1px solid var(--ink); display: inline-block; min-width: 190px; }
.urkunde .sig { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 42px; }
.urkunde .sig div { border-top: 1px solid var(--ink); padding-top: 5px; font-size: .8125rem; color: var(--grey-700); }

@media print {
  .topbar, .mainnav, .crumbs, .toc, footer.site, .noprint, .pager { display: none !important; }
  .layout { grid-template-columns: 1fr; padding: 0; }
  body { font-size: 11pt; }
  .urkunde { border: 0; padding: 0; }
  a[href]::after { content: ""; }
}

/* ---------- Bündigkeit ----------
   Regel: Jede sichtbare Kante beginnt an derselben Linie. Kästen und Karten
   mit Akzentbalken setzen den Balken auf diese Linie, ihr Text steht innen
   eingerückt. Nichts ragt nach links heraus, alles endet rechts an der Kante
   der Knöpfe im Kopf. */

/* Formulare: klarer Abstand zum Einleitungstext davor */
main > form { margin-top: 32px; }

/* ---------- Download einer Vorlage ---------- */
.download {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #f2f9fe; border-left: 4px solid var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 24px 22px 20px; margin: 0 0 28px; max-width: var(--measure);
}
.download .dl-name { font-weight: 700; color: var(--bg); font-size: var(--fs-3); line-height: var(--lh-tight); margin: 0 0 6px; }
.download .dl-meta { font-size: var(--fs-0); color: var(--grey-700); margin: 0 0 10px; }
.download p { max-width: none; }
.download p:last-child { margin-bottom: 0; }
.download .btn { flex: none; }
@media (max-width: 700px) { .download { flex-direction: column; align-items: flex-start; } }

/* ---------- Häufige Fragen ---------- */
.faq h3 { margin-top: 26px; }
.faq h3:first-child { margin-top: 0; }

/* Vorlage gegen E-Mail: Kopf oben, Formular darunter */
.download--form { display: block; }
.download--form .dl-kopf { margin: 0 0 20px; }
.download--form form { margin: 0; }
.download--form .btn { margin-top: 4px; }
/* Honeypot gegen Bots, fuer Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Vorschau der Bestellurkunde: sichtbar, aber nicht druckbar */
.urkunde--vorschau { position: relative; }
.urkunde--vorschau::after {
  content: "Vorschau"; position: absolute; top: 14px; right: 16px;
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grey-700); border: 1px solid var(--grey-300); border-radius: 4px; padding: 2px 8px;
}
@media print { .urkunde--vorschau { display: none !important; } }