/* =========================================================================
   zehnbyte — Erscheinungsbild
   =========================================================================
   Farben stammen aus dem Logo: das tiefe Tannengrün des Quadrats und das
   Minzgrün der Marke darin. Sonst nichts. Keine Verläufe, keine zweite
   Akzentfarbe.

   Der Aufbau ist bewusst asymmetrisch: links eine schmale Spalte für
   Randnotizen in Schreibmaschinenschrift, rechts der Text. Das ist die
   Anmutung eines gelenkten Dokuments — und genau das verkauft zehnbyte.
   ========================================================================= */

:root {
  --tanne:        #0E6A51;
  --tanne-tief:   #08402F;
  --tanne-hell:   #148565;
  --minze:        #C9EEDC;
  --minze-blass:  #EAF6F0;

  --papier:       #FBFCFB;
  --karte:        #FFFFFF;
  --tinte:        #0C1411;
  --tinte-leise:  #47534E;
  --tinte-still:  #6B7873;
  --linie:        #DCE3E0;
  --linie-fein:   #EBF0EE;

  --schrift-d: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --schrift-t: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --schrift-m: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --rand: 4px;
  --spalte: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-t);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--tanne); text-underline-offset: 3px; }
a:hover { color: var(--tanne-hell); }
:focus-visible {
  outline: 2px solid var(--tanne);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 {
  font-family: var(--schrift-d);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--tinte);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1.1rem; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.huelle { max-width: var(--spalte); margin: 0 auto; padding: 0 28px; }

/* --- Randnotiz-Raster: schmale Spalte links, Inhalt rechts --------------- */
.raster {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0 40px;
}
.rand {
  font-family: var(--schrift-m);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tanne);
  padding-top: 0.55em;
}
.rand span { display: block; color: var(--tinte-still); letter-spacing: 0.04em;
             text-transform: none; margin-top: 6px; }

/* ======================= Kopfzeile ====================================== */
.kopf {
  border-bottom: 1px solid var(--linie);
  background: rgba(251, 252, 251, 0.92);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.kopf .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 70px;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke svg { width: 34px; height: 34px; display: block; }
.marke b {
  font-family: var(--schrift-d); font-weight: 600; font-size: 21px;
  letter-spacing: -0.03em; color: var(--tinte);
}
.kopf nav { display: flex; align-items: center; gap: 26px; }
.kopf nav a {
  font-size: 14.5px; font-weight: 500; color: var(--tinte-leise);
  text-decoration: none;
}
.kopf nav a:hover { color: var(--tanne); }
.kopf nav a.knopf {
  background: var(--tanne); color: #fff; padding: 9px 17px;
  border-radius: var(--rand); font-weight: 600;
}
.kopf nav a.knopf:hover { background: var(--tanne-hell); color: #fff; }

/* ======================= Aufschlag ====================================== */
.aufschlag { padding: 92px 0 76px; border-bottom: 1px solid var(--linie); }
.aufschlag h1 {
  font-size: clamp(38px, 6.2vw, 66px);
  line-height: 1.04;
  margin-bottom: 26px;
  max-width: 16ch;
}
.aufschlag h1 em {
  font-style: normal;
  color: var(--tanne);
}
.aufschlag .fuehrung {
  font-size: 19.5px; color: var(--tinte-leise); max-width: 58ch;
  margin-bottom: 34px;
}
.tasten { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.taste {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--rand); font-weight: 600;
  font-size: 15.5px; text-decoration: none; border: 1px solid transparent;
}
.taste.voll { background: var(--tanne); color: #fff; }
.taste.voll:hover { background: var(--tanne-hell); color: #fff; }
.taste.leer { border-color: var(--linie); color: var(--tinte); background: var(--karte); }
.taste.leer:hover { border-color: var(--tanne); color: var(--tanne); }

/* --- Firmenblatt: harte Angaben, keine Schlagworte ---------------------- */
.blatt {
  margin-top: 58px;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  background: var(--linie); border: 1px solid var(--linie);
}
.blatt div { background: var(--papier); padding: 15px 18px; }
.blatt dt {
  font-family: var(--schrift-m); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinte-still); margin-bottom: 5px;
}
.blatt dd { margin: 0; font-size: 15.5px; font-weight: 500; }

/* ======================= Abschnitte ===================================== */
section { padding: 86px 0; border-bottom: 1px solid var(--linie); }
section h2 {
  font-size: clamp(27px, 3.4vw, 36px); line-height: 1.14; margin-bottom: 14px;
}
section .einleitung { color: var(--tinte-leise); font-size: 17.5px; margin-bottom: 44px; }

/* --- Produktregister ---------------------------------------------------- */
.register { border-top: 1px solid var(--tinte); }
.eintrag {
  border-bottom: 1px solid var(--linie);
  padding: 30px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px 48px;
  align-items: start;
}
.eintrag__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                 margin-bottom: 8px; }
.eintrag h3 {
  font-size: 25px; font-weight: 600; letter-spacing: -0.025em;
}
.eintrag p { font-size: 16.5px; color: var(--tinte-leise); max-width: 56ch; }
.eintrag__daten { font-family: var(--schrift-m); font-size: 12.5px; }
.eintrag__daten div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 0; border-bottom: 1px solid var(--linie-fein);
}
.eintrag__daten div:last-child { border-bottom: 0; }
.eintrag__daten dt { color: var(--tinte-still); }
.eintrag__daten dd { margin: 0; color: var(--tinte); text-align: right; }
.eintrag__liste { list-style: none; padding: 0; margin: 16px 0 0;
                  display: flex; flex-direction: column; gap: 7px; }
.eintrag__liste li {
  position: relative; padding-left: 24px; font-size: 15.5px;
  color: var(--tinte-leise); max-width: 56ch;
}
/* Der Ring aus dem Logo als Aufzählungszeichen — ein Detail, das nur zu
   dieser Marke gehört. */
.eintrag__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2.5px solid var(--tanne);
}
.eintrag a.mehr {
  display: inline-block; margin-top: 18px; font-weight: 600; font-size: 15.5px;
  text-decoration: none; border-bottom: 2px solid var(--minze); padding-bottom: 2px;
}
.eintrag a.mehr:hover { border-bottom-color: var(--tanne); }

.stand {
  font-family: var(--schrift-m); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 2px;
  border: 1px solid;
}
.stand.live   { color: var(--tanne-tief); background: var(--minze); border-color: #A7DCC4; }
.stand.bau    { color: #7A5A10; background: #FBF3E2; border-color: #EADBB8; }
.stand.plan   { color: var(--tinte-still); background: var(--linie-fein); border-color: var(--linie); }

/* --- Grundsätze --------------------------------------------------------- */
.saetze { display: grid; gap: 34px 52px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.satz h3 {
  font-size: 19px; margin-bottom: 8px; padding-top: 15px;
  border-top: 2px solid var(--tanne);
}
.satz p { font-size: 16px; color: var(--tinte-leise); }

/* --- Dunkler Abschnitt: einmal, für den Kontakt ------------------------- */
.dunkel {
  background: var(--tanne-tief); color: #E8F2ED; border-bottom: 0;
}
.dunkel h2 { color: #fff; }
.dunkel p { color: #BFD6CC; }
.dunkel .rand { color: var(--minze); }
.dunkel .rand span { color: #8FB3A5; }
.dunkel a { color: var(--minze); }
.kontaktliste { list-style: none; padding: 0; margin: 30px 0 0;
                display: grid; gap: 1px; background: rgba(255,255,255,.14);
                border: 1px solid rgba(255,255,255,.14);
                grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.kontaktliste li { background: var(--tanne-tief); padding: 16px 18px; }
.kontaktliste b {
  display: block; font-family: var(--schrift-m); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8FB3A5;
  margin-bottom: 5px; font-weight: 500;
}
.kontaktliste a, .kontaktliste span { font-size: 16px; color: #fff; text-decoration: none; }
.kontaktliste a:hover { color: var(--minze); }

/* ======================= Fußzeile ======================================= */
.fuss { padding: 40px 0; font-size: 14.5px; color: var(--tinte-still); }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 14px 28px;
                justify-content: space-between; align-items: center; }
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss a { color: var(--tinte-leise); text-decoration: none; }
.fuss a:hover { color: var(--tanne); }

/* ======================= Rechtstexte ==================================== */
.rechtstext { padding: 60px 0 90px; }
.rechtstext h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 8px; }
.rechtstext h2 { font-size: 21px; margin: 40px 0 10px; }
.rechtstext h3 { font-size: 17px; margin: 26px 0 6px; }
.rechtstext .zurueck {
  font-family: var(--schrift-m); font-size: 12.5px; text-decoration: none;
  display: inline-block; margin-bottom: 26px;
}
.rechtstext address { font-style: normal; margin: 0 0 1.1rem; }
.rechtstext .stand-zeile {
  font-family: var(--schrift-m); font-size: 12px; color: var(--tinte-still);
  padding-bottom: 22px; border-bottom: 1px solid var(--linie); margin-bottom: 8px;
}
.rechtstext ul {
  margin: 0 0 1.1rem; padding-left: 0; list-style: none;
  max-width: 64ch; display: flex; flex-direction: column; gap: 6px;
}
.rechtstext ul li { position: relative; padding-left: 22px; }
.rechtstext ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--tanne);
}
.rechtstext code {
  font-family: var(--schrift-m); font-size: 0.9em;
  background: var(--linie-fein); padding: 1px 5px; border-radius: 3px;
}
.merkzettel {
  border-left: 3px solid #C8951B; background: #FBF3E2;
  padding: 14px 18px; margin: 22px 0; font-size: 15.5px; line-height: 1.55;
}
.merkzettel b { display: block; margin-bottom: 4px; }

/* ======================= Schmale Fenster ================================ */
@media (max-width: 860px) {
  .raster { grid-template-columns: 1fr; gap: 10px; }
  .rand { padding-top: 0; }
  .eintrag { grid-template-columns: 1fr; gap: 20px; }
  .eintrag__daten { border: 1px solid var(--linie); padding: 4px 14px; }
  section { padding: 62px 0; }
  .aufschlag { padding: 62px 0 54px; }
  .kopf nav { gap: 16px; }
  .kopf nav a.nurbreit { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .huelle { padding: 0 20px; }
}

/* Sehr schmale Geräte. Unterhalb von rund 430 px passen Logo, Wortmarke und
   drei Menüpunkte nicht mehr nebeneinander — die Kopfzeile schob die ganze
   Seite seitlich hinaus. Übrig bleibt der Knopf, der etwas tut. */
@media (max-width: 430px) {
  .kopf nav a:not(.knopf) { display: none; }
  .kopf .huelle { min-height: 62px; }
  .marke b { font-size: 19px; }
  .marke svg { width: 30px; height: 30px; }
  .kopf nav a.knopf { padding: 8px 14px; font-size: 14px; }
}