/* ==========================================================================
   Frankenberg Arbeitsschutz GmbH
   Ein Stylesheet für alle drei Seiten. Keine externen Ressourcen.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------ */
/* Source Sans 3 als Variable Font, lokal. Eine Datei für alle Schnitte.
   SIL Open Font License 1.1 — Selbsthosten ausdrücklich erlaubt.           */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --- Stellschrauben ----------------------------------------------------- */

:root {
  /* Navy und Hellblau sind aus der Logodatei gemessen, nicht geschätzt. */
  --navy:        #272C61;
  --navy-tief:   #1B1F47;
  --hellblau:    #C9DFED;

  --text:        #15171E;   /* 17,9:1 auf Weiß */
  --text-leise:  #4E5461;   /*  7,6:1 auf Weiß */
  --grund:       #FFFFFF;
  --grund-sanft: #F4F6FA;
  --linie:       #DDE1E9;
  --markierung:  #FFF3CD;
  --markierung-rand: #C79100;

  /* Abstände. Die oberen Stufen wachsen mit der Fensterbreite:
     auf dem Handy enger, am Schreibtisch großzügig. Spart Media Queries. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.25rem;
  --s6: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --s7: clamp(2.75rem, 1.4rem + 5.4vw, 5rem);
  --s8: clamp(3.5rem, 1.8rem + 7vw, 7rem);

  /* Schriftgrößen */
  --klein:  0.9375rem;
  --basis:  1.125rem;
  --lead:   1.3125rem;
  --h3:     1.375rem;
  --h2:     clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --h1:     clamp(1.875rem, 1.15rem + 3.2vw, 3.125rem);

  --zeile:      1.65;
  --zeile-eng:  1.2;

  --spalte:  68rem;   /* Seitenbreite */
  --lesen:   38rem;   /* Textspalte, rund 68 Zeichen */

  /* Exakte Höhe der Kopfzeile: Inhaltshöhe + Polsterung oben und unten +
     Trennlinie. Die Inhaltshöhe ist keine Schätzung, sondern wird unten per
     min-height erzwungen; Logo und Schrift bleiben darunter. Dadurch ist die
     Kopfzeile auf jeder Breite gleich hoch und die Sprungziele sitzen überall
     exakt an ihrer Unterkante. */
  --kopfinhalt: 44px;
  --kopfhoehe: calc(var(--kopfinhalt) + 2 * var(--s4) + 1px);
}

/* --- Grundgerüst -------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

/* Sanftes Scrollen zu den Ankern. Wer im Betriebssystem "Bewegung
   reduzieren" eingestellt hat, bekommt weiterhin den harten Sprung —
   für manche Menschen löst gleitendes Scrollen Schwindel aus. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--basis);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  line-height: var(--zeile-eng);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

/* Muss stärker sein als jede display-Regel weiter unten: der Menüschalter
   trägt hidden, bis das Skript ihn einblendet. */
[hidden] { display: none !important; }
ul { margin: 0; padding: 0; }

/* Sichtbarer Fokus — wird nirgends abgeschaltet. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Der Kopf klebt und verdeckt dadurch die Oberkante einer angesprungenen
   Sektion — Sprungziele rücken um genau seine Höhe nach unten. */
[id] { scroll-margin-top: var(--kopfhoehe); }

/* --- Hilfsklassen ------------------------------------------------------- */

.spalte {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: var(--s3); top: var(--s3);
  z-index: 20;
  transform: translateY(-160%);
  background: var(--navy);
  color: #fff;
  padding: var(--s2) var(--s3);
  text-decoration: none;
}
.sprungmarke:focus { transform: none; }

/* TODO-Kennzeichnung. Vor dem Livegang müssen alle verschwunden sein. */
.todo {
  display: block;
  background: var(--markierung);
  border-left: 4px solid var(--markierung-rand);
  padding: var(--s3) var(--s4);
  margin: var(--s3) 0;
  font-size: var(--klein);
  color: #4A3800;
}
.todo::before { content: "TODO "; font-weight: 600; letter-spacing: 0.06em; }

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

.kopf {
  border-bottom: 1px solid var(--linie);
  padding-block: var(--s4);
  background: var(--grund);
}

/* Ab Tablet klebt der Kopf. Auf dem Handy nicht — dort ist die Höhe zu kostbar. */
.kopf { position: sticky; top: 0; z-index: 10; }

/* Ohne JavaScript bricht die Navigation auf schmalen Schirmen um. Der Kopf
   ist dann doppelt so hoch wie --kopfhoehe annimmt, also darf er dort weder
   kleben noch die Sprungziele verschieben, und der Aufmacher kann keine
   Bildschirmhöhe halten. Mit JavaScript ist er dank Schalter immer einzeilig. */
@media (max-width: 51.9375rem) {
  html:not(.js) .kopf { position: static; }
  html:not(.js) [id] { scroll-margin-top: 0; }
  html:not(.js) .aufmacher--hoch { min-height: 0; display: block; }
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--kopfinhalt);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--navy);
}
/* Logo und Firmenname wachsen mit der Fensterbreite. So passt der Markenblock
   auch bei 320 px neben den Menüschalter, ohne dass etwas umbricht — und der
   Kopf bleibt überall einzeilig. */
.marke img {
  width: clamp(34px, 1.9rem + 1.1vw, 44px);
  height: clamp(34px, 1.9rem + 1.1vw, 44px);
  flex: none;
}
.marke__name {
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.62rem + 1.55vw, 1.1875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.marke__zusatz {
  display: block;
  font-weight: 400;
  font-size: clamp(0.75rem, 0.56rem + 0.95vw, 0.9375rem);
  color: var(--text-leise);
  letter-spacing: 0.02em;
}

/* --- Menüschalter -------------------------------------------------------
   Der Schalter trägt im HTML hidden; erst assets/js/menue.js blendet ihn ein.
   Ohne JavaScript bleibt er also unsichtbar und die Navigation dauerhaft
   ausgeklappt — die Seite ist dann vollständig bedienbar, nur ohne Einklappen.
   Deshalb hängt auch alles Einklappen an der Klasse .js am <html>-Element. */

.burger {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.5rem;
  margin-right: -0.5rem;       /* optisch bündig mit dem rechten Rand */
  font: inherit;
  color: var(--navy);
  background: none;
  border: 0;
  cursor: pointer;
}
.burger svg { width: 28px; height: 28px; display: block; }
.burger[aria-expanded="false"] .burger__zu  { display: none; }
.burger[aria-expanded="true"]  .burger__auf { display: none; }

@media (min-width: 52rem) {
  .burger { display: none; }
}

/* Vier kurze Einträge. Ohne JavaScript brechen sie bei 320 px um und bleiben
   vollständig bedienbar. Mit JavaScript klappen sie unter dem Schalter weg. */
@media (max-width: 51.9375rem) {
  .js .nav { display: none; }
  .js .nav--offen {
    display: block;
    flex-basis: 100%;
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--linie);
  }
  .js .nav--offen ul { flex-direction: column; gap: 0; }
  .js .nav--offen a {
    display: block;
    padding-block: 0.625rem;
    border-bottom: 0;
  }
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
}
.nav a {
  display: inline-block;
  padding-block: var(--s1);
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--linie); }
.nav a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
  border-bottom-color: var(--navy);
}

/* --- Aufmacher ---------------------------------------------------------- */

.aufmacher {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--s8) var(--s7);
}

/* Kopfzeile und Aufmacher füllen zusammen genau eine Bildschirmhöhe.
   Nur ab der Breite, ab der auch der Kopf klebt — darunter bricht die
   Navigation um, der Kopf ist dann doppelt so hoch und --kopfhoehe stimmt
   nicht mehr. Auf dem Handy ist der Aufmachertext ohnehin höher als der
   Bildschirm, dort bestimmt also der Inhalt die Höhe.
   svh statt vh, weil vh die ein- und ausfahrende Adressleiste mitzählt.
   min-height, nicht height: bei großer Schrift darf der Text wachsen. */
.aufmacher--hoch {
  min-height: calc(100vh - var(--kopfhoehe));
  min-height: calc(100svh - var(--kopfhoehe));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Wichtig: In einem Flex-Container schaltet margin-inline:auto das Strecken
   ab, die Spalte schrumpft dann auf Inhaltsbreite und sitzt mittig statt
   bündig unter dem Logo. width:100% stellt das Blockverhalten wieder her. */
.aufmacher--hoch > .spalte { width: 100%; }

.aufmacher__bild { position: absolute; inset: 0; z-index: -2; }
.aufmacher__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top right;
}

/* Weißschleier.
   Das Aufmacherbild hat fast schwarze Stellen (#021313 in den Fensterschlitzen);
   das alte war nirgends dunkler als #688DC5. Der Schleier muss deshalb
   kräftiger sein als zuvor.

   Bei 82 % erreicht die Überschrift selbst über der dunkelsten Bildstelle
   8,8:1 und der Fließtext 12,1:1 — beides AAA, und zwar unabhängig davon,
   wo der Text gerade steht.

   Ein waagerechter Verlauf (links dicht, rechts durchlässig) wäre reizvoller,
   wurde aber wieder verworfen: Wie weit der Text nach rechts reicht, hängt
   von der Fensterbreite ab — bei 832 px bis 78 %, bei 1920 px nur bis 56 %.
   Ein Verlauf müsste sich danach richten und wäre in der Mitte dieser Spanne
   entweder zu hell für die Schrift oder zu dicht fürs Bild. Ein gleichmäßiger
   Schleier ist hier die verlässlichere Lösung. */
.aufmacher::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.82);
}

.aufmacher h1 {
  font-size: var(--h1);
  max-width: 24ch;
  letter-spacing: -0.02em;
}

.aufmacher__strich {
  width: 4.5rem; height: 4px;
  background: var(--navy);
  margin-block: var(--s4);
}

.aufmacher__lead {
  font-size: var(--lead);
  color: var(--text);       /* auf dem Bild bewusst kräftiger als sonst */
  max-width: var(--lesen);
}

/* --- Schaltflächen ------------------------------------------------------ */

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.knopf {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--navy);
}
.knopf--voll { background: var(--navy); color: #fff; }
.knopf--voll:hover { background: var(--navy-tief); border-color: var(--navy-tief); }
.knopf--leer { background: rgba(255,255,255,0.75); color: var(--navy); }
.knopf--leer:hover { background: #fff; }

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

.block { padding-block: var(--s7); }
.block--sanft { background: var(--grund-sanft); }

.block h2 { font-size: var(--h2); max-width: 24ch; letter-spacing: -0.015em; }

.block__vorspann {
  margin-top: var(--s3);
  max-width: var(--lesen);
  color: var(--text-leise);
}

.block__unter {
  margin-top: var(--s7);
  font-size: var(--h3);
  color: var(--navy);
}

/* --- Leistungen --------------------------------------------------------- */

/* Das Raster ist bewusst mit festen Spaltenzahlen gebaut und nicht mit
   auto-fit: Nur so ist bekannt, wie viele Spalten es gibt, und nur dann darf
   eine Karte sich über zwei erstrecken. Mit auto-fit würde ein span 2 bei
   einspaltiger Anzeige eine zweite Spalte erzwingen, die gar nicht ins
   Fenster passt. */
.raster {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s6);
  list-style: none;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .raster { grid-template-columns: repeat(2, 1fr); }
  /* Fünf Karten in zwei Spalten lassen die letzte allein stehen — die breite
     Karte füllt die Reihe. */
  .karte--breit { grid-column: span 2; }
}

@media (min-width: 62rem) {
  .raster { grid-template-columns: repeat(3, 1fr); }
  /* Drei Spalten, fünf Karten: Reihe eins voll, Reihe zwei aus einer
     schmalen und einer breiten Karte — keine leere Fläche mehr. */
  .karte--breit .karte__liste {
    columns: 2;
    column-gap: var(--s5);
  }
  .karte--breit .karte__liste li { break-inside: avoid; }
}

.karte { border-top: 3px solid var(--navy); padding-top: var(--s4); }
.karte__icon {
  display: block;
  width: 34px; height: 34px;
  color: var(--navy);
  margin-bottom: var(--s3);
}
.karte h3 { font-size: var(--h3); }
.karte p {
  margin-top: var(--s2);
  color: var(--text-leise);
  font-size: var(--klein);
  line-height: 1.6;
}
/* Aufzählung innerhalb einer Leistungskarte. */
.karte__liste {
  margin-top: var(--s3);
  padding-left: 1.1em;
  list-style: disc;
  font-size: var(--klein);
  line-height: 1.6;
  color: var(--text-leise);
}
.karte__liste li { margin-bottom: 0.4em; }

.karte a { text-decoration: none; }
.karte a:hover { text-decoration: underline; }

/* --- SCC-Abschnitt ------------------------------------------------------ */

/* Vorteile: leicht gehalten, bewusst ohne Kasten — der Abschnitt hat schon
   genug Tafeln. Vier Spalten am Schreibtisch, eine auf dem Handy. */
.vorteile {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.vorteile li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s2);
  align-items: start;
  font-size: var(--klein);
  line-height: 1.5;
}
.vorteile svg { width: 1.375rem; height: 1.375rem; color: var(--navy); margin-top: 0.1em; }

/* Tafel: weißer Kasten auf sanftem Grund. Trägt die beiden Wege und die
   beiden Prüfungen. */
.tafel {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--navy);
  padding: var(--s4) var(--s5) var(--s5);
}
.tafel__marke {
  margin-bottom: var(--s2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.tafel h4 {
  margin: 0 0 var(--s3);
  font-size: var(--h3);
  font-weight: 600;
  line-height: var(--zeile-eng);
  color: var(--navy);
  hyphens: auto;
}
.tafel p {
  font-size: var(--klein);
  line-height: 1.6;
  color: var(--text-leise);
}

.wege, .pruefungen {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

/* Prüfungsdaten: die Zahl steht groß links, die Benennung klein rechts.
   Im Quelltext kommt die Benennung (dt) zuerst, weil eine Definitionsliste
   so aufgebaut ist; das Raster dreht die beiden für die Anzeige um. */
.pruefung__werte { margin: var(--s4) 0 0; }
.pruefung__werte > div {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s2);
  border-top: 1px solid var(--linie);
}
.pruefung__werte > div:first-child { border-top: 0; }
.pruefung__werte dt {
  grid-column: 2; grid-row: 1;
  font-size: var(--klein);
  color: var(--text-leise);
  line-height: 1.35;
}
.pruefung__werte dd {
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fussnote {
  margin-top: var(--s4);
  max-width: 44rem;
  font-size: var(--klein);
  line-height: 1.6;
  color: var(--text-leise);
}

/* --- Qualifikationen ---------------------------------------------------- */

.siegel {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s6);
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Die drei Marken haben sehr verschiedene Seitenverhältnisse — 2,3:1, 4,5:1
   und 6,8:1. Ein gemeinsamer Kasten mit contain bringt sie auf vergleichbare
   optische Größe. Voraussetzung dafür ist, dass die durchsichtigen Ränder aus
   den Dateien geschnitten sind: im DGUV-Logo waren zwei Drittel der Datei
   leerer Rand, dadurch wurde die Marke nur halb so groß dargestellt wie die
   anderen. Siehe werkzeug/png.py, Funktion beschneiden(). */
.siegel__marke {
  display: flex;
  align-items: center;
  height: 70px;
  margin-bottom: var(--s4);
}
.siegel__marke img {
  max-width: 210px; max-height: 70px;
  width: auto; height: auto;
  object-fit: contain;
}
.siegel__marke svg { width: 210px; max-width: 100%; height: auto; fill: var(--text); }

.siegel h3 { font-size: 1.0625rem; }
.siegel p {
  margin-top: var(--s2);
  font-size: var(--klein);
  color: var(--text-leise);
  line-height: 1.6;
}

/* --- Referenzen --------------------------------------------------------- */

.referenzen {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

.referenz a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  height: 100%;
  padding: var(--s3);
  text-decoration: none;
  color: var(--text-leise);
  background: #fff;
  border: 1px solid var(--linie);
}
.referenz a:hover { border-color: var(--navy); color: var(--navy); }

/* Die Logos sind Fremddateien mit eigenen Hintergründen und Proportionen.
   Ein quadratischer Rahmen mit contain bringt sie auf ein gemeinsames Maß. */
.referenz img {
  width: 100%;
  max-width: 108px;
  aspect-ratio: 1;
  object-fit: contain;
}
.referenz__name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--navy);
}
/* margin-top:auto schiebt die Leistungszeile an den unteren Rand der Kachel.
   Sonst haengt sie je nach Laenge des Firmennamens auf anderer Hoehe und das
   Raster wirkt unruhig. */
.referenz__leistung {
  margin-top: auto;
  padding-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--text-leise);
}
.referenz a:hover .referenz__leistung { color: var(--navy); }

/* --- Kontakt ------------------------------------------------------------ */

.kontakt__raster {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kontakt dt {
  font-size: var(--klein);
  color: var(--text-leise);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kontakt dd { margin: var(--s2) 0 0; font-size: var(--lead); }
.kontakt dd a { text-decoration: none; font-weight: 600; }
.kontakt dd a:hover { text-decoration: underline; }
.kontakt address { font-style: normal; font-size: var(--lead); line-height: 1.45; }

/* --- Fließtext auf den Rechtsseiten ------------------------------------- */

.recht { padding-block: var(--s7); }
.recht h1 { font-size: var(--h2); margin-bottom: var(--s5); }
.recht h2 { font-size: var(--h3); margin-top: var(--s6); margin-bottom: var(--s3); }
.recht h3 { font-size: 1.125rem; margin-top: var(--s5); margin-bottom: var(--s2); }
.recht p, .recht ul, .recht dl { max-width: var(--lesen); }
.recht ul { list-style: disc; padding-left: 1.25em; margin-bottom: var(--s3); }
.recht li { margin-bottom: var(--s2); }
.recht dl { margin: 0 0 var(--s4); }
.recht dt { font-weight: 600; margin-top: var(--s3); }
.recht dd { margin: 0; }
.recht__zurueck { margin-top: var(--s5); }

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

.fuss {
  background: var(--navy);
  color: #fff;
  padding-block: var(--s6);
}
.fuss h2 { color: #fff; font-size: var(--h3); }
.fuss a { color: #fff; }
.fuss__raster {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.fuss address { font-style: normal; line-height: 1.7; }
.fuss ul { list-style: none; line-height: 2; }
.fuss__recht {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--klein);
}
.fuss :focus-visible { outline-color: #fff; }

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

@media print {
  .nav, .sprungmarke, .aktionen, .aufmacher__bild { display: none; }
  .aufmacher::after { display: none; }
  .kopf { position: static; }
  body { font-size: 11pt; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .fuss { background: none; color: #000; }
  .fuss a, .fuss h2 { color: #000; }
  .referenz a { border-color: #999; }
}