/* ==========================================================================
   Foto Nagel, Alzey — Stylesheet
   Umsetzung der Entwürfe in _intern/entwuerfe/. Sie sind 3840 px breit
   und entspricht einer Bezugsbreite von 1280 px; alle Maße hier sind
   daraus abgeleitet.
   ========================================================================== */

/* --------------------------------------------------------------- Schriften
   Bricolage Grotesque, selbst ausgeliefert (SIL OFL 1.1, siehe
   assets/fonts/OFL.txt). Eine variable Datei deckt alle Stärken von
   200 bis 800 ab und passt die Formen über die optische Größe (opsz)
   selbst an die Schriftgröße an. Nur der lateinische Zeichensatz —
   Umlaute, ß und deutsche Anführungszeichen sind darin enthalten.
   Selbst ausliefern statt über Google Fonts: keine Verbindung zu Dritten
   beim Seitenaufruf, damit auch keine Einwilligung nötig.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ Marken */
:root {
  /* Farben, aus dem Entwurf gemessen */
  --blau:        #0137AF;   /* Logo, Navigation, Überschriften, Knöpfe */
  --blau-dunkel: #012a86;   /* Hover */
  --navy:        #002576;   /* Leistungskarten */
  --hellblau:    #EBF1FF;   /* Band, Produktkarten */
  --dunkel:      #262626;   /* Kontaktbereich */
  --schwarz:     #000000;   /* Fußzeile */
  --weiss:       #ffffff;
  --text:        #222223;
  --text-leise:  #3f3f42;
  --gold:        #D6B960;   /* Überschrift im Leistungs-Hero */

  /* Breiten. Der untere Wert ist das Maß aus dem Entwurf (bei 1280 px
     Fensterbreite trifft jede Bahn ihn genau); darüber wachsen sie ein
     Stück mit, damit die Seite auf großen Monitoren nicht verloren wirkt. */
  --weit:   clamp(1060px, 82.8vw, 1280px);   /* Fußzeile, Kontakt, Bildband */
  --mittel: clamp( 850px, 66.4vw, 1020px);   /* Akkordeon, Rechtstexte */
  --eng:    clamp( 600px, 47.0vw,  760px);   /* Kartenraster */
  --rand: clamp(1rem, 4vw, 3.75rem);

  /* Schriftgrößen, fließend zwischen Handy und 1280 px */
  --gr-h1:      clamp(1.875rem, 1.05rem + 2.6vw, 2.625rem);   /* 30 → 42 */
  --gr-hero:    clamp(2.5rem, 1rem + 5vw, 3.5rem);            /* 40 → 56, Leistungs-Hero auf kleinen Schirmen */
  --gr-h2:      clamp(1.5rem, 1.15rem + 1.1vw, 2rem);         /* 24 → 32 */
  --gr-text:    clamp(1rem, 0.94rem + 0.2vw, 1.1875rem);      /* 16 → 19 */
  --gr-klein:   clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);      /* 15 → 16 */
  --gr-karte:   1.25rem;                                       /* 20 */
  --gr-kartext: 0.875rem;                                      /* 14 */

  --radius: 20px;
  --schatten: 0 3px 14px rgba(0, 37, 118, 0.3);
}

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

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--gr-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
  line-height: 1.16;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

/* Sichtbarer Fokus für Tastaturbedienung — nie entfernen. */
:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blau);
  color: var(--weiss);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.sprung:focus { left: 0; }

/* Nur für Screenreader */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bahn {
  width: min(100% - 2 * var(--rand), var(--weit));
  margin-inline: auto;
}
.bahn--mittel { width: min(100% - 2 * var(--rand), var(--mittel)); }
.bahn--eng    { width: min(100% - 2 * var(--kachelfuge), var(--eng)); }

/* Kachelraster: Auf dem Handy ist der Rand links und rechts genau so
   breit wie die Fuge zwischen den Kacheln. Beide lesen denselben Wert;
   ab 600 px ist er beim Entwurfsmaß angekommen, und die Bahn stößt
   an ihre Höchstbreite, der Rand wird dann von selbst größer. */
.bahn--eng      { --kachelfuge: clamp(1rem, 5vw, 30px); }
.bahn--produkte { --kachelfuge: clamp(1rem, 5.67vw, 34px); }

/* ------------------------------------------------------------------- Kopf */
.kopf {
  background: var(--weiss);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem clamp(1rem, 2vw, 1.5rem);
}

.kopf__marke { display: block; flex: none; }
.kopf__marke img { width: 119px; height: 43px; }

.kopf__schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background: none;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  color: var(--blau);
  font: inherit;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kopf__balken {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.kopf__balken::before,
.kopf__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease;
}
.kopf__balken::before { top: -7px; }
.kopf__balken::after  { top:  7px; }

[aria-expanded="true"] .kopf__balken { background: transparent; }
[aria-expanded="true"] .kopf__balken::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .kopf__balken::after  { top: 0; transform: rotate(-45deg); }

.menue ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menue a {
  display: block;
  color: var(--blau);
  text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.menue a:hover { color: var(--blau-dunkel); text-decoration: underline; text-underline-offset: 5px; }
.menue a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

/* Handy und kleines Tablet: Menü klappt auf */
@media (max-width: 899px) {
  .menue {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--weiss);
    border-top: 1px solid var(--hellblau);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  }
  .menue[hidden] { display: none; }
  .menue li + li { border-top: 1px solid var(--hellblau); }
  .menue a { padding: 1rem clamp(1rem, 4vw, 2rem); font-size: 1rem; }
}

@media (min-width: 900px) {
  .kopf__schalter { display: none; }
  .menue[hidden] { display: block; }
  .menue ul {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4.7vw, 3.75rem);
  }
  /* Zwischen 900 und 1100 px wird es eng: Schrift dort etwas kleiner,
     damit „Kontakt & Öffnungszeiten" nicht rechts aus dem Bild läuft. */
  .menue a { font-size: clamp(0.9375rem, 0.4rem + 0.95vw, 1.125rem); white-space: nowrap; }
}

/* ------------------------------------------------------------------ Heller Hero (Startseite) */
.hero {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 1.75rem) var(--rand) clamp(2rem, 3.2vw, 2.5rem);
}
.hero h1 {
  font-size: var(--gr-h1);
  font-weight: 800;
  line-height: 1.14;
  max-width: 22ch;
  margin-inline: auto;
}
/* Die beiden Sätze stehen wie im Entwurf untereinander. */
.hero h1 > span { display: block; }

.hero__bild {
  width: 100%;
  aspect-ratio: 1280 / 585;
  max-height: 78vh;      /* sonst füllt das Bild auf breiten Monitoren den ganzen Schirm */
  object-fit: cover;
}
@media (max-width: 599px) {
  .hero__bild { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------- Dunkler Hero (Leistungen) */
.leistungshero {
  background: #2f2f30;
  color: var(--weiss);
}
.leistungshero__bild {
  width: 100%;
  aspect-ratio: 1280 / 641;
  max-height: 82vh;
  object-fit: cover;
}
.leistungshero__text h1 {
  color: var(--gold);
  font-size: var(--gr-hero);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 0.65em;
}
/* Umbruch wie im Entwurf: „Alzeyer" über „3D-Klappkarte". */
.leistungshero__text h1 > span { display: block; }
.leistungshero__text p {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);    /* 17 → 20 */
  line-height: 1.35;
  max-width: 22em;
}

/* Klein: Bild oben, Text darunter — sonst wäre der Text auf dem Bild
   unlesbar klein. Der Bildhintergrund ist dasselbe Grau, es bleibt ein Block. */
@media (max-width: 899px) {
  .leistungshero__bild { aspect-ratio: 16 / 10; }
  .leistungshero__text { padding: clamp(1.75rem, 6vw, 2.5rem) var(--rand) clamp(2.25rem, 7vw, 3rem); }
}

/* Groß: Text liegt rechts auf der freien Fläche des Bildes. Im Entwurf
   beginnt er bei 57,5 % der Bildbreite — das prozentuale padding bezieht
   sich hier absichtlich auf den ganzen Abschnitt, also auf das Bild,
   nicht auf eine Bahn. Die Überschrift misst im Entwurf bei 1280 px
   70 px; sie wächst mit der Bildbreite, damit „3D-Klappkarte" auch bei
   900 px noch in die Spalte passt. */
@media (min-width: 900px) {
  .leistungshero { position: relative; }
  .leistungshero__text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--rand) 0 57.5%;
  }
  .leistungshero__text h1 { font-size: min(5.47vw, 7rem); }   /* 70 px bei 1280, 105 bei 1920 */
  .leistungshero__text p  { font-size: clamp(1rem, 1.5625vw, 1.875rem); }   /* 20 px bei 1280, 30 bei 1920 */
}

/* --------------------------------------------------------------- Abschnitte */
.abschnitt { padding-block: clamp(3rem, 6vw, 3.5rem); }
.abschnitt--luft { padding-bottom: clamp(4rem, 10vw, 8rem); }
/* Startseite, „beliebteste Leistungen": mehr Luft unter dem Hero-Bild
   und zwischen dem Knopf und dem Band „mit Tradition". Unten zählt der
   Überstand des Teamfotos (--ueberstand, bis 48 px) mit ab. */
.abschnitt--start {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(5rem, 14vw, 11.5rem);
}

.abschnitt__titel {
  color: var(--blau);
  font-size: var(--gr-h2);
  text-align: center;
  margin-bottom: clamp(2.25rem, 5vw, 5rem);
}

/* ------------------------------------------------------- Leistungskarten */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--kachelfuge);
}

.karte {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 242px;
  padding: 35px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--weiss);
  box-shadow: var(--schatten);
}
.karte h3 {
  font-size: var(--gr-karte);
  line-height: 1.15;
  margin-bottom: 0.9rem;
}
.karte p {
  font-size: var(--gr-kartext);
  line-height: 1.45;
}

/* Auf dem Handy stehen die Karten untereinander; die Entwurfshöhe von
   242 px ließe sie dort halb leer aussehen. */
@media (max-width: 599px) {
  .karte   { min-height: 180px; padding: 26px; }
  .produkt { min-height: 150px; padding: 24px; }
}

.knopfreihe { text-align: center; margin-top: 29px; }

.knopf {
  display: inline-block;
  min-width: 168px;
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--blau);
  color: var(--weiss);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--gr-text);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.knopf:hover { background: var(--blau-dunkel); }

.knopf--hell {
  background: var(--weiss);
  color: var(--text);
  min-width: 0;
  padding: 0.6rem 1.6rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.knopf--hell:hover { background: var(--hellblau); }

/* ------------------------------------------------------ Band „mit Tradition" */
/* Das Foto ragt nur ein kleines, festes Stück (--ueberstand) oben aus dem
   hellen Band heraus, egal wie breit der Bildschirm ist. Das Band beginnt
   an der Oberkante des Abschnitts, das Bild wird um den Überstand nach
   oben gezogen. Die Bildgröße ist nach oben begrenzt, damit es auf großen
   Monitoren nicht über die halbe Seite wächst. */
.tradition {
  --ueberstand: clamp(28px, 3.5vw, 48px);
  position: relative;
  background: var(--hellblau);
  padding-block: 0 clamp(3rem, 7vw, 6rem);
}
.tradition__innen {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.tradition__bild {
  width: 100%;
  aspect-ratio: 9 / 8;
  object-fit: cover;
  object-position: 62% 40%;
}
.tradition h2 {
  color: var(--blau);
  font-size: var(--gr-h2);
  margin-bottom: 1.1rem;
}
.tradition p {
  color: var(--text-leise);
  line-height: 1.42;
  margin-bottom: 1.4em;
}
.tradition p:last-child { margin-bottom: 0; }

@media (max-width: 799px) {
  /* Klein: Bild über dem Text, kein Überstand. */
  .tradition { padding-top: clamp(2.5rem, 8vw, 4rem); }
  .tradition__bild { aspect-ratio: 4 / 3; }
}
@media (min-width: 800px) {
  .tradition__innen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .tradition__bild {
    justify-self: end;
    align-self: start;
    max-width: 540px;
    margin-top: calc(-1 * var(--ueberstand));
  }
  /* Der Text steht immer ganz im Band: Abstand nach oben, auch wenn er
     höher ist als das Bild. */
  .tradition__text { padding-block: clamp(2rem, 4vw, 3rem) 0; }
}

/* ------------------------------------------------------------ Kontaktbereich */
.kontakt {
  background: var(--dunkel);
  color: var(--weiss);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 8vw, 5.5rem);
}
.kontakt h2 {
  font-size: var(--gr-h2);
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.kontakt__innen {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 800px) {
  .kontakt__innen { grid-template-columns: 1fr 1fr; }
}

.zeiten {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem 0.5rem;
  margin: 0 0 2.5rem;
}
.zeiten dt { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; }
.zeiten dd { margin: 0; }

.draht { list-style: none; margin: 0; padding: 0; line-height: 1.6; }
.draht a { color: var(--weiss); text-decoration: none; }
.draht a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ Formular */
.formular { display: grid; gap: 1.1rem; max-width: 462px; }
.feld { display: grid; gap: 0.5rem; }
.feld > span {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--gr-text);
}
.feld input,
.feld textarea {
  width: 100%;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--weiss);
  font: inherit;
  font-size: var(--gr-klein);
}
.feld textarea {
  border-radius: 22px;
  min-height: 118px;
  resize: vertical;
}
.feld input:hover,
.feld textarea:hover { border-color: rgba(255, 255, 255, 0.75); }

.formular__fuss {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 0.4rem;
}
.hinweis {
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0;
}
/* Honigtopf gegen Formularroboter — für Menschen unsichtbar. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ Fußzeile */
.fuss {
  background: var(--schwarz);
  color: var(--weiss);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: var(--gr-text);
}
.fuss__innen {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 700px) {
  .fuss__innen { grid-template-columns: 1fr auto; }
  .fuss__rechts { text-align: right; }
}
.fuss__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.fuss address {
  font-style: normal;
  line-height: 1.45;
  margin-bottom: 1.5rem;
}
.fuss__rechts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.4rem;
}
.fuss__rechts a {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  text-decoration: none;
}
.fuss__rechts a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ------------------------------------------------------------------ Akkordeon */
.akkordeon { margin: 0; }

.posten + .posten { margin-top: 2.6rem; }

/* Der Strich sitzt unter der Überschrift, nicht unter dem Text —
   so steht er im Entwurf, und so trennt er auch im zugeklappten
   Zustand sauber. */
.posten__kopf {
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.25;
}
.posten__kopf::-webkit-details-marker { display: none; }
.posten__kopf::marker { content: ""; }

.posten__zeichen {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  color: var(--blau);
}
.posten__zeichen::before,
.posten__zeichen::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.posten__zeichen::after { transform: translateY(-50%) rotate(90deg); }
.posten[open] .posten__zeichen::before { transform: translateY(-50%) rotate(45deg); }
.posten[open] .posten__zeichen::after  { transform: translateY(-50%) rotate(-45deg); }

.posten__text {
  padding-top: 1.35rem;
  font-size: var(--gr-klein);
  line-height: 1.42;
  max-width: 72ch;
}

/* ----------------------------------------------------------- Produktkarten */
.produkte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--kachelfuge);
}
.produkt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--hellblau);
  color: var(--blau);
  box-shadow: var(--schatten);
}
.produkt h3 {
  font-size: var(--gr-karte);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.produkt p {
  font-size: var(--gr-kartext);
  line-height: 1.5;
}

/* ------------------------------------------------------------- Rechtstexte */
.rechtstext { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
/* Lange Wörter wie „Datenschutzerklärung" passen auf schmalen Handys
   (320 px) nicht in eine Zeile – dort wird getrennt statt überzulaufen. */
.rechtstext h1,
.rechtstext h2 { hyphens: auto; overflow-wrap: break-word; }
.rechtstext h1 {
  color: var(--blau);
  font-size: var(--gr-h1);
  margin-bottom: 2rem;
}
.rechtstext h2 {
  color: var(--blau);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  margin: 2.6rem 0 0.8rem;
}
.rechtstext p,
.rechtstext li { line-height: 1.55; color: var(--text-leise); }
.rechtstext address { font-style: normal; line-height: 1.55; color: var(--text-leise); }
.rechtstext ul { padding-left: 1.2em; margin: 0 0 1em; }
.rechtstext li { margin-bottom: 0.4em; }
.rechtstext a { color: var(--blau); }

.stand {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1.5px solid var(--hellblau);
  font-size: var(--gr-klein);
  color: var(--text-leise);
}
.gemacht {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.gemacht a { color: inherit; }

/* Noch fehlende Angaben. Sie sollen auffallen, damit sie vor dem
   Livegang niemand übersieht. */
.luecke {
  background: #fff3cd;
  border-bottom: 2px solid #c8a200;
  padding: 0 0.25em;
  font-weight: 700;
  color: #6b5200;
}

/* -------------------------------------------------------------- Bewegung aus */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ Drucken */
@media print {
  .kopf, .formular, .knopfreihe { display: none; }
  body { color: #000; font-size: 11pt; }
  .kontakt, .fuss { background: none; color: #000; }
}