/* ==========================================================================
   Henry Schöpf Elektro GmbH & Co. KG – Stylesheet
   Umsetzung von docs/design-konzept.md. Werte dort sind verbindlich.

   Aufbau
   01  Tokens
   02  Reset und Grundlagen
   03  Typografie
   04  Layout
   05  Kopfzeile und Navigation
   06  Einstieg (Hero)
   07  Bildband
   08  Leistungsliste
   09  Dunkle Bänder
   10  Zweispalter
   11  Buttons
   12  Formular
   13  Karte
   14  Fließtextseiten
   15  Fußzeile
   16  Bewegung und Sichtbarkeit
   ========================================================================== */

/* --------------------------------------------------------------- 01 Tokens */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/sourceserif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/sourceserif-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farbe – abgeleitet aus Logo (#282635) und Icon-SVGs (#f6c606) */
  --ink: #282635;
  --ink-deep: #1b1a24;
  --ink-soft: #3a3849;
  --line-ink: #423f52;
  --paper: #f5f3ef;
  --paper-pure: #ffffff;
  --line: #dcd8d0;
  --text: #22212c;
  --text-muted: #5c5a69;
  --text-on-ink: #f5f3ef;
  --text-on-ink-muted: #b7b3c4;
  --amber: #f2be1a;
  --amber-deep: #7a5c0b;
  --signal: #d62828;

  /* Schrift */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Abstände */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --sektion: clamp(1.75rem, 2.6vw, 3.25rem);
  --rand: clamp(1.25rem, 5vw, 4rem);
  --container: 1180px;
  --kopf: 72px;

  --tempo: 180ms;
  --kurve: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ------------------------------------------------- 02 Reset und Grundlagen */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  hyphens: auto;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; }

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 3px;
}

.ink :focus-visible { outline-color: var(--amber); }

.skip {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 200;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 2px;
  transition: top var(--tempo) var(--kurve);
}
.skip:focus { top: var(--s-4); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- 03 Typografie */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.display {
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.75rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.lead {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  max-width: 52ch;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--amber-deep);
  margin: 0 0 var(--s-3);
}
.ink .eyebrow { color: var(--amber); }

.meta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--text-muted);
}
.ink .meta { color: var(--text-on-ink-muted); }

strong, b { font-weight: 600; }

/* -------------------------------------------------------------- 04 Layout */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sektion { padding-block: var(--sektion); }
.sektion--schmal { padding-block: calc(var(--sektion) * 0.62); }

/* Asymmetrisches Raster: links das Label, rechts der Inhalt –
   die Anordnung einer technischen Zeichnung mit Legende. */
.raster {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 900px) {
  .raster {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
  .raster > .raster__label { position: sticky; top: calc(var(--kopf) + 2rem); }
}

.ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.ink h1, .ink h2, .ink h3 { color: var(--text-on-ink); }

.trennlinie { border-top: 1px solid var(--line); }

/* ------------------------------------------ 05 Kopfzeile und Navigation */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--text-on-ink);
}

.kopf__innen {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
  height: var(--kopf);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.kopf__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.kopf__logo img { width: 92px; height: 60px; }
.kopf__logo-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-on-ink);
}
.kopf__logo-text span {
  display: block;
  font-weight: 500;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }

.nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-on-ink);
  padding: 0.75rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.nav a:hover { color: var(--amber); }
.nav a[aria-current='page'] { border-bottom-color: var(--amber); }

.nav__tel {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--amber);
  padding: 0.6rem 1.1rem;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tempo) var(--kurve);
}
.nav__tel:hover { background: #ffd23f; }

.nav__schalter {
  display: none;
  background: none;
  border: 1px solid var(--line-ink);
  border-radius: 2px;
  color: var(--text-on-ink);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__schalter svg { width: 22px; height: 22px; }
.nav__schalter .kreuz { display: none; }
.nav__schalter[aria-expanded='true'] .balken { display: none; }
.nav__schalter[aria-expanded='true'] .kreuz { display: block; }

@media (max-width: 860px) {
  .nav__schalter { display: flex; }
  .nav {
    position: fixed;
    inset: var(--kopf) 0 auto 0;
    background: var(--ink);
    border-top: 1px solid var(--line-ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) var(--rand) var(--s-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--kurve), transform 240ms var(--kurve), visibility 240ms;
  }
  .nav[data-offen='true'] {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav a {
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line-ink);
    font-size: 0.95rem;
  }
  .nav a[aria-current='page'] { color: var(--amber); }
  .nav__tel {
    margin-top: var(--s-4);
    text-align: center;
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
  }
}

/* ------------------------------------------------------- 06 Einstieg */

/* Die Kopfzeile ist dunkel und wirkt dadurch optisch schwerer, als sie hoch
   ist. Der Abstand darunter darf deshalb knapper ausfallen als der zwischen
   zwei hellen Abschnitten – sonst reißt die Seite oben auseinander. */
.hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.hero .eyebrow { margin-bottom: var(--s-2); }
.hero .display { margin: 0 0 var(--s-4); max-width: 16ch; }
.hero h1 { margin-bottom: var(--s-4); }
.hero .lead { margin-bottom: var(--s-6); }

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.hero__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-8);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.hero__fakten li { list-style: none; }
.hero__fakten { padding-left: 0; margin-bottom: 0; }

/* --------------------------------------------------------- 07 Bildband */

.band { margin: 0; }
.band img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.band figcaption {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-3) var(--rand) 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* --------------------------------------------------- 08 Leistungsliste */

.leistungen { list-style: none; margin: 0; padding: 0; }

.leistung {
  border-top: 1px solid var(--line);
  transition: background var(--tempo) var(--kurve);
}
.leistung:last-child { border-bottom: 1px solid var(--line); }
.leistung:hover { background: var(--paper-pure); }

.leistung__innen {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-6) var(--s-4) var(--s-6) 0;
}
@media (min-width: 700px) {
  .leistung__innen {
    grid-template-columns: 3.4rem 3.45rem 1fr;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-6) var(--s-6) var(--s-4);
  }
}

.leistung__nr {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--amber-deep);
  transition: color var(--tempo) var(--kurve);
}
.leistung:hover .leistung__nr { color: var(--ink); }

/* Die sechs Original-Icons aus media/SVG icons. Bernstein-Scheibe mit
   dunklem Piktogramm – dieselben Zeichen wie auf der Visitenkarte.
   Sie bringen ihre Farben mit und erben deshalb kein currentColor. */
.leistung__icon {
  width: 3.45rem;
  height: 3.45rem;
  flex-shrink: 0;
  border-radius: 0;
}
@media (max-width: 699px) {
  .leistung__icon { width: 2.8rem; height: 2.8rem; }
}

.leistung__text { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .leistung__text { grid-column: 3; }
}
.leistung__text h3 { margin-bottom: var(--s-2); }
.leistung__text p { margin-bottom: var(--s-3); }

.leistung__stichworte {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.leistung__stichworte li { position: relative; }
.leistung__stichworte li + li::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.55em;
  width: 3px;
  height: 3px;
  background: var(--line);
}

/* ------------------------------------------------------ 09 Dunkle Bänder */

.saeulen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8);
}
@media (min-width: 760px) {
  .saeulen { grid-template-columns: repeat(3, 1fr); gap: var(--s-8) var(--s-12); }
}
.saeulen h3 { margin-bottom: var(--s-3); font-size: 1.15rem; }
.saeulen p { color: var(--text-on-ink-muted); font-size: 1rem; margin: 0; }
.saeulen__nr {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-ink);
}

.anriss__tel {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  letter-spacing: -0.02em;
  color: var(--amber);
  text-decoration: none;
  margin: var(--s-2) 0 var(--s-6);
  border-bottom: 2px solid transparent;
  transition: border-color var(--tempo) var(--kurve);
}
.anriss__tel:hover { border-bottom-color: var(--amber); }

/* --------------------------------------------------------- 10 Zweispalter */

.split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); }
  .split--bild-rechts > :first-child { order: 1; }
}
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.werte { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.werte li {
  border-top: 1px solid var(--line);
  padding: var(--s-4) 0;
  display: grid;
  gap: var(--s-1);
}
.werte li:last-child { border-bottom: 1px solid var(--line); }
.werte dt,
.werte b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
}
.werte span {
  font-size: 1rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- 11 Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve),
    border-color var(--tempo) var(--kurve);
}

.btn--primaer { background: var(--ink); color: var(--paper); }
.btn--primaer:hover { background: #16151d; }

.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: #ffd23f; }

.btn--rand {
  background: transparent;
  color: var(--text);
  border-color: currentColor;
}
.btn--rand:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ink .btn--rand { color: var(--text-on-ink); }
.ink .btn--rand:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn svg { width: 1.05em; height: 1.05em; }

/* ------------------------------------------------------------ 12 Formular */

.form { display: grid; gap: var(--s-6); max-width: 40rem; }

.feld { display: grid; gap: var(--s-2); }

.feld label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.feld label .pflicht { color: var(--signal); }

.feld input,
.feld textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.8rem 1rem;
  transition: border-color var(--tempo) var(--kurve);
}
.feld input:hover,
.feld textarea:hover { border-color: #c2bdb2; }
.feld input:focus,
.feld textarea:focus { border-color: var(--ink); }
.feld textarea { min-height: 9rem; resize: vertical; }

.feld__hinweis {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.feld--fehler input,
.feld--fehler textarea { border-color: var(--signal); }

.fehler {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--signal);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Honigtopf – für Menschen unsichtbar, für einfache Bots verlockend.
   Kein display:none, weil manche Bots das erkennen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hinweis {
  border-left: 3px solid var(--line);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
}
.hinweis--erfolg { border-left-color: #2f7d4f; color: var(--text); }
.hinweis--fehler { border-left-color: var(--signal); color: var(--text); }

/* ---------------------------------------------------------------- 13 Karte */

.karte {
  border: 1px solid var(--line);
  background: var(--paper-pure);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-6);
  gap: var(--s-4);
}
.karte iframe { width: 100%; height: 100%; border: 0; }
.karte p { margin: 0; font-size: 0.95rem; color: var(--text-muted); max-width: 34ch; }
@media (min-width: 700px) { .karte { aspect-ratio: 16 / 10; } }

/* ------------------------------------------------- 14 Fließtextseiten */

.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: var(--s-4); }
.prose h3 { font-size: 1.1rem; margin: var(--s-6) 0 var(--s-3); }
.prose ul { padding-left: 1.2rem; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose a { color: var(--amber-deep); text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose address {
  font-style: normal;
  margin: 0 0 var(--s-4);
}
.prose dl { margin: 0 0 var(--s-4); }
.prose dt {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: var(--s-3);
}
.prose dd { margin: 0; }

.inhaltsverzeichnis {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
}
.inhaltsverzeichnis li { margin-bottom: var(--s-2); }
.inhaltsverzeichnis a { color: var(--text-muted); text-decoration: none; }
.inhaltsverzeichnis a:hover { color: var(--ink); text-decoration: underline; }

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

.fuss {
  background: var(--ink-deep);
  color: var(--text-on-ink);
  padding-block: var(--s-8) var(--s-4);
  font-size: 1rem;
}

.fuss__raster {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-ink);
}
@media (min-width: 760px) {
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); }
}

.fuss h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 var(--s-4);
}

.fuss__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
}

.fuss address { font-style: normal; color: var(--text-on-ink-muted); }
.fuss a { color: var(--text-on-ink); text-underline-offset: 3px; }
.fuss a:hover { color: var(--amber); }

.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: var(--s-2); }
.fuss ul a { text-decoration: none; }
.fuss ul a:hover { text-decoration: underline; }

.fuss__unten {
  padding-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-on-ink-muted);
}
.fuss__unten a { color: var(--text-on-ink-muted); text-decoration: none; }
.fuss__unten a:hover { color: var(--amber); }

/* ------------------------------------------ 16 Bewegung und Sichtbarkeit */

.auftritt {
  opacity: 0;
  transform: translateY(12px);
}
.auftritt.sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* Ohne JavaScript bleibt nichts unsichtbar liegen. */
.kein-js .auftritt { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .auftritt { opacity: 1; transform: none; }
}

@media print {
  .nav, .nav__schalter, .band, .karte, .btn, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* Im Druck wird die dunkle Kopfzeile zu einem Briefkopf. Dafür gibt es die
     freigestellte helle Logofassung – die dunkle hätte eine schwarze Fläche
     aufs Papier gebracht. */
  .kopf { position: static; background: none; padding: 0 0 8mm; }
  .kopf__innen { height: auto; padding: 0; display: block; }
  .kopf__logo-text { display: none; }
  .kopf__logo img { content: url('../img/hse-logo-hell.webp'); width: 46mm; height: auto; }
  .ink { background: #fff !important; color: #000 !important; }
  .ink h1, .ink h2, .ink h3 { color: #000 !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}