/* 4clone Software Trading KG · www.4clone.org · Graustufen, Akzent Messing #9A6A12, Arial */
:root {
  --dunkel: #2b2b2b;
  --dunkel-tief: #1f1f1f;
  --grau-logo: #c1c5cd;
  --text: #1f1f1f;
  --text-leise: #555555;
  --linie: #d9d9d6;
  --flaeche: #f4f4f2;
  --weiss: #ffffff;
  --messing: #9a6a12;
  --breite: 42rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--weiss);
  color: var(--text);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--messing); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--messing); outline-offset: 3px; }

.springen {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--weiss); color: var(--text); padding: 0.5rem 0.875rem;
  border: 2px solid var(--messing); text-decoration: none;
}
.springen:focus { top: 1rem; }

.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }

/* Kopf */
.kopf { background: var(--dunkel); color: var(--weiss); border-bottom: 3px solid var(--messing); }
.kopf .rahmen { display: flex; align-items: center; gap: 0.875rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.kopf .marke { display: inline-flex; align-items: center; gap: 0.875rem; color: var(--weiss); text-decoration: none; }
.kopf .marke:focus-visible { outline-color: var(--grau-logo); }
.kopf .firmenname { font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--grau-logo); }

/* Bühne der Startseite */
.buehne { background: var(--dunkel); color: var(--weiss); }
.buehne .rahmen { padding-top: 2.5rem; padding-bottom: 3.5rem; }
.buehne h1 {
  margin: 0 0 1.25rem; font-size: clamp(1.875rem, 6.5vw, 2.875rem); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.01em;
}
.buehne .profil { margin: 0; max-width: 34rem; font-size: clamp(1.125rem, 3.6vw, 1.3125rem); line-height: 1.55; color: var(--grau-logo); }
.startseite .kopf { border-bottom: 0; }
.startseite .buehne .rahmen { padding-top: 0.75rem; }
.startseite .buehne { border-bottom: 3px solid var(--messing); }

/* Inhalt */
main { display: block; flex: 1 0 auto; }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.inhalt .rahmen { padding-top: 2.5rem; padding-bottom: 3rem; }
.abschnitt { padding: 2.25rem 0; border-bottom: 1px solid var(--linie); }
.abschnitt:last-child { border-bottom: 0; }
.abschnitt h2 {
  margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-leise);
}
.abschnitt p { margin: 0; max-width: 36rem; }
.kontakt-mail { font-size: 1.25rem; }

/* Rechtstexte */
.rechtstext h1 { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 5.5vw, 2.25rem); line-height: 1.2; }
.rechtstext h2 { margin: 2rem 0 0.5rem; font-size: 1.1875rem; line-height: 1.35; }
.rechtstext p, .rechtstext address { margin: 0 0 1rem; font-style: normal; }
.rechtstext .einleitung { color: var(--text-leise); }
.rechtstext dl { margin: 0 0 1rem; display: grid; grid-template-columns: 1fr; gap: 0.125rem 1.5rem; }
.rechtstext dt { font-weight: 700; margin-top: 0.75rem; }
.rechtstext dd { margin: 0; }
.rechtstext .stand { margin-top: 2.5rem; color: var(--text-leise); font-size: 0.9375rem; }

/* Fuß */
.fuss { background: var(--flaeche); border-top: 1px solid var(--linie); color: var(--text-leise); font-size: 0.9375rem; }
.fuss .rahmen { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.75rem; padding-bottom: 2rem; }
.fuss p { margin: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.fuss a { color: var(--text); }
.fuss a[aria-current="page"] { font-weight: 700; text-decoration: none; }

@media (min-width: 40rem) {
  body { font-size: 1.125rem; }
  .kopf .rahmen { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .buehne .rahmen { padding-top: 3.5rem; padding-bottom: 4.5rem; }
  .startseite .buehne .rahmen { padding-top: 1.5rem; }
  .rechtstext dl { grid-template-columns: max-content 1fr; }
  .rechtstext dt { margin-top: 0; }
  .fuss .rahmen { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media print {
  .kopf, .buehne { background: none; color: var(--text); border: 0; }
  .buehne .profil, .kopf .firmenname { color: var(--text); }
  .springen, .fuss ul { display: none; }
  a { color: var(--text); }
}