/* ==========================================================================
   JAM Solutions — jam-solutions.net
   Eine Datei, keine Framework-Abhängigkeit. Aufbau:

     1  Tokens          6  Sektionsgerüst
     2  Grundlagen      7  Startseite
     3  Kopf            8  Formular
     4  Schaltflächen   9  Textseiten (Impressum, Datenschutz)
     5  Marke          10  Fuß
   ========================================================================== */

/* ---------------------------------------------------------- 0 Schriften
   Zwei Ebenen, bewusst in dieser Reihenfolge:

   1. Die Systemschriften des Besuchers — auf Windows Segoe UI und Cascadia
      Mono. Das ist die Erscheinung, für die sich der Auftraggeber entschieden
      hat. Sie steht sofort, ohne einen einzigen Byte Download.

   2. Open Sans und Roboto Mono, hier auf dem eigenen Server. Sie greifen nur
      dort, wo Segoe UI beziehungsweise Cascadia Mono fehlen — also auf macOS,
      Linux, Android. Der Browser lädt eine Schriftdatei erst, wenn er sie zum
      Zeichnen wirklich braucht: auf einem Windows-Rechner passiert das nie.

   Open Sans ist der nächste frei verfügbare Verwandte von Segoe UI (gleiche
   humanistische Anlage, offene Punzen, einstöckiges g). Segoe UI und Cascadia
   Mono selbst dürfen nicht mitgeliefert werden — Segoe UI ist proprietär, und
   Cascadia gibt es nur als 143-MB-Paket.

   Es besteht keine Verbindung zu Google Fonts oder einem anderen CDN; die
   Datenschutzerklärung (Abschnitt 6) sagt genau das zu.

   Lizenz beider Familien: SIL Open Font License 1.1, Texte liegen daneben.
   ------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-mono-v31-latin-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- 1 Tokens */
:root {
  /* Farben — abgeleitet aus der paycheck2day-Palette, damit Firma und
     Produkt sichtbar zusammengehören. */
  --ink:            #1B2224;
  --ink-hoch:       #242D2F;
  --ink-linie:      #384244;

  --petrol:         #2F6E68;
  --petrol-tief:    #1E504C;
  --mint:           #8FD3C7;

  --papier:         #F1F3F2;
  --papier-tief:    #E6EAE9;
  --weiss:          #FFFFFF;
  --linie:          #D5DDDB;
  --linie-zart:     #E4EAE8;

  --text:           #3F4748;
  --text-2:         #5C6463;
  --text-3:         #666E6C;
  --auf-dunkel:     #E6EBEA;
  --auf-dunkel-2:   #A2AEAB;
  --auf-dunkel-3:   #8D9895;

  --warn:           #8A5A08;
  --warn-flaeche:   #FBEFD6;

  /* Schrift.  Systemschriften zuerst — auf Windows also Segoe UI und Cascadia
     Mono. Die selbst gehosteten Familien dahinter springen nur ein, wo die
     Systemschrift fehlt, und werden dann auch erst geladen. Siehe Abschnitt 0. */
  --schrift-anzeige: "Segoe UI", "Open Sans", -apple-system, BlinkMacSystemFont,
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-text:    "Segoe UI", "Open Sans", -apple-system, BlinkMacSystemFont,
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono:    "Cascadia Mono", ui-monospace, "SFMono-Regular", Menlo,
                     Consolas, "Roboto Mono", monospace;

  /* Maße */
  --bahn:           1160px;
  --rand:           clamp(20px, 5vw, 48px);
  --kopf-hoehe:     68px;
  --radius:         6px;
  --radius-gross:   10px;

  --luft-sektion:   clamp(64px, 9vw, 112px);

  --schatten:       0 1px 2px rgba(27, 34, 36, .04),
                    0 12px 32px -20px rgba(27, 34, 36, .45);

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-anzeige);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.1rem); line-height: 1.16; font-weight: 700; }
h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }

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

a { color: var(--petrol); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-tief); }

ul, ol { margin: 0 0 1rem; padding-left: 1.15em; }
li { margin: 0 0 .3rem; }

strong, b { font-weight: 700; color: var(--ink); }

code {
  font-family: var(--schrift-mono);
  font-size: .875em;
  background: var(--papier-tief);
  border-radius: 3px;
  padding: .1em .35em;
}

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 3px;
}
.kopf :focus-visible, .fuss :focus-visible, .sektion-dunkel :focus-visible {
  outline-color: var(--mint);
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--petrol);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.skip:focus { left: 0; color: #fff; }

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

/* Offene Angaben aus inc/config.php */
mark.todo {
  background: var(--warn-flaeche);
  color: var(--warn);
  font-family: var(--schrift-mono);
  font-size: .78em;
  letter-spacing: .02em;
  padding: .12em .5em;
  border-radius: 3px;
  white-space: nowrap;
}

.entwurfsbalken {
  background: var(--warn-flaeche);
  color: var(--warn);
  border-bottom: 1px solid #EBD6A6;
  font-size: .8125rem;
  text-align: center;
  padding: .5rem var(--rand);
}
.entwurfsbalken code { background: rgba(138, 90, 8, .1); color: inherit; }

/* ------------------------------------------------------------------ 3 Kopf */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-linie);
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--kopf-hoehe);
}

.haupt {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}
.haupt a {
  color: var(--auf-dunkel-2);
  text-decoration: none;
  font-size: .9375rem;
  white-space: nowrap;
  transition: color .15s ease;
}
.haupt a:hover { color: var(--auf-dunkel); }
.haupt .knopf { color: var(--ink); }

.menue-schalter { display: none; }

/* --------------------------------------------------------- 4 Schaltflächen */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .85rem 1.5rem;
  border: 1.5px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--petrol);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.knopf:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); color: #fff; }

.knopf-rand {
  background: transparent;
  color: var(--petrol);
}
.knopf-rand:hover { background: var(--petrol); color: #fff; }

/* Auf dunklem Grund */
.knopf-hell {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--ink);
}
.knopf-hell:hover { background: #A7DED4; border-color: #A7DED4; color: var(--ink); }

.knopf-geist {
  background: transparent;
  border-color: rgba(143, 211, 199, .45);
  color: var(--auf-dunkel);
}
.knopf-geist:hover { background: rgba(143, 211, 199, .12); border-color: var(--mint); color: var(--auf-dunkel); }

.knopf-klein { padding: .5rem 1rem; font-size: .9375rem; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ----------------------------------------------------------------- 5 Marke */
.marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--auf-dunkel);
}
.marke-zeichen { width: 28px; height: 28px; color: var(--mint); flex: 0 0 auto; }
.marke-text {
  font-family: var(--schrift-anzeige);
  font-size: 1.0625rem;
  letter-spacing: .005em;
  font-weight: 400;
  color: inherit;
}
.marke-text b { font-weight: 700; letter-spacing: -.01em; color: inherit; }

/* ------------------------------------------------------ 6 Sektionsgerüst */
.sektion { padding-block: var(--luft-sektion); }
.sektion-papier { background: var(--papier); }
.sektion-weiss  { background: var(--weiss); border-block: 1px solid var(--linie-zart); }
.sektion-dunkel { background: var(--ink); color: var(--auf-dunkel-2); }
.sektion-dunkel h2, .sektion-dunkel h3 { color: var(--auf-dunkel); }
.sektion-dunkel strong, .sektion-dunkel b { color: var(--auf-dunkel); }

.kennung {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--schrift-mono);
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 .9rem;
}
.kennung::after {
  content: "";
  flex: 1 1 auto;
  max-width: 64px;
  height: 1px;
  background: var(--mint);
}
.sektion-dunkel .kennung { color: var(--mint); }
.sektion-dunkel .kennung::after { background: var(--ink-linie); }

.abschnitt-kopf { max-width: 44ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt-kopf .lede {
  font-size: 1.0625rem;
  color: var(--text-2);
  margin: .9rem 0 0;
  max-width: 58ch;
}
.sektion-dunkel .abschnitt-kopf .lede { color: var(--auf-dunkel-2); }

/* ------------------------------------------------------------ 7 Startseite */

/* --- Hero --- */
.hero {
  background: var(--ink);
  color: var(--auf-dunkel-2);
  padding-block: clamp(56px, 9vw, 104px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 211, 199, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 211, 199, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 78% 40%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 40%, #000 5%, transparent 72%);
  pointer-events: none;
}
.hero > .bahn { position: relative; }

.hero-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { color: var(--auf-dunkel); max-width: 15ch; }
.hero .hero-satz {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--auf-dunkel-2);
  max-width: 46ch;
  margin: 1.25rem 0 0;
}
.hero .knopf-reihe { margin-top: 2rem; }

.hero-marker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 2.5rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--ink-linie);
  list-style: none;
  font-family: var(--schrift-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--auf-dunkel-3);
  text-transform: uppercase;
}
.hero-marker li { margin: 0; }

/* Systemskizze im Hero — zeigt, was hier gebaut wird, statt eines Stockfotos */
.hero-skizze { width: 100%; max-width: 460px; margin-inline: auto; }
.hero-skizze .kasten { fill: var(--ink-hoch); stroke: var(--ink-linie); stroke-width: 1; }
.hero-skizze .kasten-kern { fill: rgba(47, 110, 104, .22); stroke: var(--petrol); stroke-width: 1.4; }
.hero-skizze .beschriftung {
  font-family: var(--schrift-mono);
  font-size: 9.5px;
  fill: var(--auf-dunkel-2);
  letter-spacing: .04em;
}
.hero-skizze .beschriftung-kern { fill: var(--mint); font-weight: 700; }
.hero-skizze .draht { stroke: var(--ink-linie); stroke-width: 1; fill: none; }
.hero-skizze .puls {
  stroke: var(--mint);
  stroke-width: 1.4;
  fill: none;
  stroke-dasharray: 5 105;
  animation: fliessen 4.5s linear infinite;
}
.hero-skizze .puls-2 { animation-delay: 1.1s; }
.hero-skizze .puls-3 { animation-delay: 2.2s; }
.hero-skizze .puls-4 { animation-delay: .55s; }
.hero-skizze .puls-5 { animation-delay: 1.65s; }
.hero-skizze .puls-6 { animation-delay: 2.75s; }
@keyframes fliessen { to { stroke-dashoffset: -110; } }

/* --- Leistungen --- */
.karten {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.karte:hover {
  border-color: var(--mint);
  box-shadow: var(--schatten);
  transform: translateY(-2px);
}
.karte-nr {
  font-family: var(--schrift-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--text-3);
  display: block;
  margin-bottom: .7rem;
}
.karte h3 { margin-bottom: .8rem; }
.karte ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .9375rem;
  color: var(--text-2);
}
.karte li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .45rem;
}
.karte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--mint);
}

/* --- Produkt --- */
.produkt { background: var(--ink); color: var(--auf-dunkel-2); }
.produkt-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.produkt-marke {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.produkt-marke .name {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--auf-dunkel);
}
.plakette {
  font-family: var(--schrift-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 3px;
  background: rgba(143, 211, 199, .14);
  color: var(--mint);
  border: 1px solid rgba(143, 211, 199, .3);
  white-space: nowrap;
}

.merkmale { list-style: none; padding: 0; margin: 2rem 0 0; }
.merkmale li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem .5rem;
  padding: .8rem 0;
  border-top: 1px solid var(--ink-linie);
  margin: 0;
}
.merkmale li:last-child { border-bottom: 1px solid var(--ink-linie); }
.merkmale dt, .merkmale .titel {
  font-weight: 700;
  color: var(--auf-dunkel);
  font-size: .9375rem;
}
.merkmale .werte { font-size: .9375rem; color: var(--auf-dunkel-3); }

.schaufenster {
  border: 1px solid var(--ink-linie);
  border-radius: var(--radius-gross);
  background: var(--ink-hoch);
  overflow: hidden;
}
.schaufenster-leiste {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--ink-linie);
  background: rgba(0, 0, 0, .18);
}
.schaufenster-leiste i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-linie); display: block;
}
.schaufenster-leiste span {
  margin-left: .5rem;
  font-family: var(--schrift-mono);
  font-size: .6875rem;
  color: var(--auf-dunkel-3);
}
.schaufenster img { display: block; width: 100%; }
.schaufenster-platzhalter {
  aspect-ratio: 16 / 10;
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  padding: 1.5rem;
  background-image:
    linear-gradient(rgba(143, 211, 199, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 211, 199, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.schaufenster-platzhalter b { color: var(--auf-dunkel-2); font-size: .9375rem; }
.schaufenster-platzhalter small {
  color: var(--auf-dunkel-3);
  font-family: var(--schrift-mono);
  font-size: .6875rem;
}

.kleingedruckt {
  font-size: .8125rem;
  color: var(--auf-dunkel-3);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-linie);
  max-width: 60ch;
}

/* --- Arbeitsweise --- */
.schritte {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.schritte li {
  background: var(--weiss);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0;
  display: grid;
  gap: .55rem;
  align-content: start;
}
.schritt-nr {
  font-family: var(--schrift-mono);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--petrol);
  letter-spacing: -.02em;
}
.schritte h3 { font-size: 1.0625rem; }
.schritte p { font-size: .9375rem; color: var(--text-2); margin: 0; }

/* --- Betrieb --- */
.betrieb-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
}
.betrieb-punkt {
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-linie);
}
.betrieb-punkt h3 {
  font-size: .9375rem;
  margin-bottom: .35rem;
  color: var(--auf-dunkel);
}
.betrieb-punkt p { font-size: .9375rem; color: var(--auf-dunkel-3); margin: 0; }

/* --- Über --- */
.ueber-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.portraet {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  overflow: hidden;
}
.portraet img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portraet-platzhalter {
  aspect-ratio: 4 / 5;
  display: grid;
  place-content: center;
  gap: .4rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--papier-tief);
  color: var(--text-2);
}
.portraet-platzhalter b { color: var(--text-2); font-size: .9375rem; }
.portraet-platzhalter small { font-family: var(--schrift-mono); font-size: .6875rem; }
.portraet-bildunterschrift {
  padding: .75rem 1rem;
  border-top: 1px solid var(--linie);
  font-size: .875rem;
  color: var(--text-2);
}
.portraet-bildunterschrift b { display: block; color: var(--ink); }

.fakten { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.fakten li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linie);
  margin: 0;
}
.fakten li:last-child { border-bottom: 1px solid var(--linie); }
.fakten .schluessel {
  font-family: var(--schrift-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fakten .wert { color: var(--text); }

/* --------------------------------------------------------------- 8 Formular */
.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.formular { display: grid; gap: 1rem; }
.feld { display: grid; gap: .35rem; }
.feld label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.feld label .optional { font-weight: 400; color: var(--text-3); }

.feld input,
.feld textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input:hover, .feld textarea:hover { border-color: #BFCAC7; }
.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px rgba(47, 110, 104, .14);
}
.feld textarea { resize: vertical; min-height: 8.5rem; }

.feld-paar { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.55;
}
.einwilligung input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .22rem;
  accent-color: var(--petrol);
}

.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.meldung {
  border-radius: var(--radius);
  padding: .95rem 1.15rem;
  font-size: .9375rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.meldung-gut  { background: #DEEEE6; border-color: #A9D2BF; color: #1F5B41; }
.meldung-fehler { background: #F5E1E1; border-color: #DDACAC; color: #7A2A2A; }
.meldung b { color: inherit; }

.kontakt-direkt {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}
.kontakt-direkt h3 { margin-bottom: 1rem; }
.kontakt-liste { list-style: none; padding: 0; margin: 0; }
.kontakt-liste li {
  padding: .8rem 0;
  border-top: 1px solid var(--linie-zart);
  margin: 0;
  display: grid;
  gap: .15rem;
}
.kontakt-liste li:first-child { border-top: 0; padding-top: 0; }
.kontakt-liste .schluessel {
  font-family: var(--schrift-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kontakt-liste .wert { color: var(--ink); }
.kontakt-liste a { text-decoration: none; }
.kontakt-liste a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ 9 Textseiten */
.seiten-kopf {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.seiten-kopf .lede {
  color: var(--text-2);
  font-size: 1.0625rem;
  margin: 1rem 0 0;
  max-width: 60ch;
}

.text-seite { padding-block: clamp(2.5rem, 6vw, 4rem); }
.text-seite .inhalt { max-width: 68ch; }
.text-seite h2 {
  font-size: 1.3rem;
  margin: 2.75rem 0 .85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.text-seite h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.text-seite h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.text-seite ul { padding-left: 1.15em; }
.text-seite li { margin-bottom: .4rem; }
.text-seite dl { margin: 0 0 1rem; }
.text-seite dt {
  font-family: var(--schrift-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 1rem;
}
.text-seite dd { margin: .15rem 0 0; color: var(--ink); }

.hinweis {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--mint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.35rem;
  margin: 1.75rem 0;
  font-size: .9375rem;
  color: var(--text-2);
}

.inhaltsverzeichnis {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.inhaltsverzeichnis h2 {
  font-family: var(--schrift-mono);
  font-size: .6875rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 .75rem !important;
  padding: 0 !important;
  border: 0 !important;
  font-weight: 400;
}
.inhaltsverzeichnis ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: .9375rem;
  columns: 2;
  column-gap: 2rem;
}
.inhaltsverzeichnis li { margin-bottom: .3rem; break-inside: avoid; }
.inhaltsverzeichnis a { text-decoration: none; }
.inhaltsverzeichnis a:hover { text-decoration: underline; }

/* Fehlerseite */
.fehler { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.fehler .code {
  font-family: var(--schrift-mono);
  font-size: clamp(3rem, 12vw, 5.5rem);
  line-height: 1;
  color: var(--petrol);
  letter-spacing: -.03em;
}
.fehler h1 { margin: 1.25rem 0 0; }
.fehler p { color: var(--text-2); margin: 1rem auto 2rem; max-width: 42ch; }
.fehler .knopf-reihe { justify-content: center; }

/* ------------------------------------------------------------------ 10 Fuß */
.fuss {
  background: var(--ink);
  color: var(--auf-dunkel-3);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  font-size: .9375rem;
}
.fuss-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.fuss-marke { max-width: 34ch; }
.fuss-marke .marke-text { color: var(--auf-dunkel); display: block; margin-bottom: .7rem; }
.fuss-marke p { font-size: .875rem; color: var(--auf-dunkel-3); }

.fuss-spalte h2 {
  font-family: var(--schrift-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auf-dunkel-3);
  margin-bottom: .85rem;
}
.fuss-spalte ul { list-style: none; padding: 0; margin: 0; }
.fuss-spalte li { margin-bottom: .45rem; }
.fuss a { color: var(--auf-dunkel-2); text-decoration: none; }
.fuss a:hover { color: var(--mint); text-decoration: underline; }
.fuss-kontakt li { line-height: 1.5; }

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-linie);
  font-size: .8125rem;
  color: var(--auf-dunkel-3);
}
.fuss-kennung { font-family: var(--schrift-mono); letter-spacing: .04em; }

/* ================================================================ Breakpoints
   Mobil zuerst — hier kommen nur Erweiterungen für größere Flächen dazu. */

@media (max-width: 799px) {
  .menue-schalter {
    display: grid;
    place-content: center;
    margin-left: auto;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ink-linie);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .menue-balken,
  .menue-balken::before,
  .menue-balken::after {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--auf-dunkel);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menue-balken { position: relative; }
  .menue-balken::before,
  .menue-balken::after { content: ""; position: absolute; left: 0; }
  .menue-balken::before { top: -6px; }
  .menue-balken::after  { top:  6px; }

  .menue-schalter[aria-expanded="true"] .menue-balken { background: transparent; }
  .menue-schalter[aria-expanded="true"] .menue-balken::before { transform: translateY(6px) rotate(45deg); }
  .menue-schalter[aria-expanded="true"] .menue-balken::after  { transform: translateY(-6px) rotate(-45deg); }

  .haupt {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-linie);
    padding: .5rem var(--rand) 1.25rem;
    display: none;
  }
  .haupt.offen { display: flex; }
  .haupt a {
    padding: .8rem 0;
    border-bottom: 1px solid var(--ink-linie);
    font-size: 1rem;
  }
  .haupt .knopf {
    margin-top: 1rem;
    border-bottom: 0;
    justify-content: center;
    padding: .8rem 1rem;
  }
  .kopf-innen { position: relative; }
}

@media (min-width: 600px) {
  .karten     { grid-template-columns: repeat(2, 1fr); }
  .schritte   { grid-template-columns: repeat(2, 1fr); }
  .feld-paar  { grid-template-columns: 1fr 1fr; }
  .betrieb-raster { grid-template-columns: repeat(2, 1fr); }
  .fuss-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 800px) {
  .menue-schalter { display: none; }
  .hero-raster    { grid-template-columns: 1.15fr .85fr; }
  .produkt-raster { grid-template-columns: 1fr 1fr; }
  .ueber-raster   { grid-template-columns: .8fr 1.2fr; }
  .kontakt-raster { grid-template-columns: 1.25fr .75fr; }
  .betrieb-raster { grid-template-columns: repeat(3, 1fr); }
  .fuss-raster    { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; }
}

@media (min-width: 1000px) {
  .karten   { grid-template-columns: repeat(4, 1fr); }
  .schritte { grid-template-columns: repeat(4, 1fr); }
}


/* Beschreibungslisten werden zweispaltig, sobald ihre eigene Spalte breit
   genug ist — nicht schon, wenn das Fenster breit ist. Im halbbreiten
   Produktblock bleiben sie deshalb gestapelt statt zu zerfransen. */
.spalte { container-type: inline-size; }

@container (min-width: 40rem) {
  .merkmale li,
  .fakten li { grid-template-columns: 13rem 1fr; align-items: baseline; }
}

/* ------------------------------------------------------------ Hilfsklassen
   Bewusst wenige. Sie ersetzen Inline-Styles, damit die Content-Security-
   Policy ohne 'unsafe-inline' auskommt. */
figure { margin: 0; }
.einleitung      { margin-top: 1rem; max-width: 48ch; }
.abstand-oben    { margin-top: 2rem; }
.abstand-oben-s  { margin-top: .5rem; }
.abstand-oben-m  { margin-top: 1.75rem; }
.titel-produkt   { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top: .5rem; }

/* ------------------------------------------------------------------ Extras */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .kopf, .fuss, .skip, .entwurfsbalken, .knopf-reihe, .hero-skizze { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sektion, .hero, .produkt { background: #fff !important; color: #000 !important; padding-block: 1.5rem; }
  .sektion-dunkel h2, .sektion-dunkel h3, .hero h1 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}