/* Ipsom GmbH — ipsom.io
   Statische Seite, keine fremden Ressourcen, keine Schriftarten von außen. */

:root {
  --grund: #ffffff;
  --flaeche: #f6f7f9;
  --text: #16181d;
  --gedaempft: #5b6270;
  --linie: #e2e5ea;
  --akzent: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12141a;
    --flaeche: #191c24;
    --text: #e9ebf0;
    --gedaempft: #9aa2b1;
    --linie: #272b35;
    --akzent: #7ba2ff;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

a { color: var(--akzent); }
a:hover { text-decoration: none; }

.kopf,
main,
.fuss {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.kopf { padding-top: 3rem; padding-bottom: .5rem; }

.marke {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.marke span {
  color: var(--gedaempft);
  font-weight: 400;
  margin-left: .35em;
  font-size: .8em;
}

.block { padding: 2rem 0; }
.block + .block { border-top: 1px solid var(--linie); }

h1 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: .5rem 0 1rem;
}

h2 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1rem;
  margin: 1.75rem 0 .4rem;
}

p { margin: 0 0 1rem; }

.fuehrung {
  font-size: 1.1rem;
  color: var(--text);
}

.kontakt {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: .5rem 1rem;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .6rem;
}
.kontakt dt { color: var(--gedaempft); }
.kontakt dd { margin: 0; }

@media (max-width: 30rem) {
  .kontakt { grid-template-columns: 1fr; gap: .15rem; }
  .kontakt dd { margin-bottom: .75rem; }
  .kontakt dd:last-child { margin-bottom: 0; }
}

.angaben {
  margin: 0;
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: .45rem 1rem;
}
.angaben dt { color: var(--gedaempft); }
.angaben dd { margin: 0; }

@media (max-width: 34rem) {
  .angaben { grid-template-columns: 1fr; gap: .1rem; }
  .angaben dd { margin-bottom: .7rem; }
}

.fuss {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: .92rem;
}
.fuss p { margin: 0 0 .4rem; }
.klein { font-size: .86rem; }

.zurueck {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .92rem;
}