/* ════════════════════════════════════════════════════════════════════════════
   BeKo Wood Solutions — Landingpage

   Zwei Materialien, konsequent durchgehalten: Graphit für die Flächen, in denen
   etwas behauptet wird, warmes Holz für die Akzente. Dazwischen Papier. Keine
   Web-Fonts: eine Schrift, die erst geladen werden muss, verschiebt beim
   Nachladen das ganze Layout — auf einer Seite, die in den ersten zwei Sekunden
   Seriosität behaupten muss, ist das der teuerste Effekt von allen.

   Aufbau: Marken → Grundlagen → Bausteine → Abschnitte → mobil.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Vom Eigentuemer beanstandet: die erste Fassung war zu dunkel. Graphit trug
     die halbe Seite. Jetzt trägt Papier, und das Dunkle ist auf Fußzeile und
     einzelne Karten beschränkt — dort, wo es Ruhe stiftet statt zu drücken.
     Dazu ein zurückhaltendes Waldgrün neben dem Holz: das ist der Farbton, der
     „natürlich" sagt, ohne in Öko-Behauptungen zu rutschen. */

  /* Flächen */
  --paper:      #fdfbf7;
  --paper-2:    #f6f2e9;   /* Creme des Logos */
  --paper-3:    #ece3d5;
  --ink:        #2a2a26;   /* warmes Dunkelbraun statt Blaugraphit */
  --ink-2:      #38382f;
  --ink-3:      #4a4a40;

  /* Messing, aus dem Ring des Logos */
  --timber:     #b38d57;
  --timber-lo:  #8d6b39;   /* 4,7:1 auf Papier — reicht für kleine Schrift */
  --timber-hi:  #d3b183;
  --sand:       #e9dcc4;

  /* Bannergrün des Logos */
  --moss:       #24402c;
  --moss-lo:    #152a1c;

  /* Text */
  --text:       #262622;
  --text-2:     #55564d;
  --text-3:     #7d7e74;
  --on-dark:    #f5f0e6;
  --on-dark-2:  #b8b4a5;

  --line:       rgb(38 38 34 / 12%);
  --line-2:     rgb(38 38 34 / 8%);
  --line-dark:  rgb(233 220 196 / 16%);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --wrap: 1180px;
  --r: 4px;
  --r-lg: 10px;

  --shadow-sm: 0 1px 2px rgb(42 42 38 / 5%), 0 2px 8px rgb(42 42 38 / 4%);
  --shadow-md: 0 2px 4px rgb(42 42 38 / 6%), 0 14px 34px rgb(42 42 38 / 9%);
  --shadow-lg: 0 26px 60px rgb(42 42 38 / 14%);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */

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

html {
  /* Kein `scroll-behavior: smooth` hier — das weiche Scrollen macht script.js,
     mit Nachprüfung, ob es angekommen ist, und als Sprung über sehr lange
     Strecken. Zwei Mechanismen für dieselbe Sache würden sich ins Gehege kommen.
     `scroll-padding-top` bleibt für Tastatur und Rücktaste. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.005em; }

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

a { color: var(--timber-lo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--timber);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--on-dark);
  padding: 10px 16px; border-radius: var(--r);
  transition: top .16s var(--ease);
}
.skip:focus { top: 16px; text-decoration: none; }

/* ── Bausteine ───────────────────────────────────────────────────────────── */

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--timber-lo);
}
.eyebrow .rule { display: block; width: 34px; height: 1px; background: var(--timber); opacity: .55; }
.eyebrow-light { color: var(--moss-lo); }
.eyebrow-light .rule { background: var(--moss); }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 54ch;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--font); font-size: .97rem; font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer; text-decoration: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .9rem; }

.btn-accent {
  background: var(--timber); color: #241704;
  box-shadow: 0 1px 0 rgb(255 255 255 / 22%) inset, var(--shadow-sm);
}
.btn-accent:hover { background: var(--timber-hi); box-shadow: 0 1px 0 rgb(255 255 255 / 22%) inset, var(--shadow-md); }

.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--paper-2); }

.btn-ghost-dark { border-color: var(--line); color: var(--text); }
.btn-ghost-dark:focus-visible { outline-color: var(--moss); }
.btn-ghost-dark:hover { border-color: var(--ink-3); background: rgb(23 28 33 / 4%); }

/* Solange die Kontaktdaten Platzhalter sind, setzt script.js hier
   `aria-disabled`. Ein Knopf, der klickbar aussieht und nichts tut, ist
   schlimmer als ein sichtbar stillgelegter — deshalb sieht man es auch. */
.btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; box-shadow: none;
}
.btn[aria-disabled="true"]:hover { transform: none; background: var(--timber); }
.btn-ghost-dark[aria-disabled="true"]:hover { background: transparent; }

/* Auftritt beim Scrollen. Wer Bewegung abbestellt hat, sieht alles sofort. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgb(253 251 247 / 88%);
  backdrop-filter: saturate(130%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
.brand:hover { text-decoration: none; }
/* Nur noch in der Fusszeile: im Kopf stand es bei 48 px unlesbar neben dem
   grossen Emblem im Hero. */
.brand-mark { width: 132px; height: auto; flex: none; display: block; }
.brand-text {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}
.brand-text em { font-style: normal; color: var(--text-3); font-weight: 400; }
.brand-foot .brand-text em { color: var(--on-dark-2); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav > a {
  font-size: .95rem; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
  transition: color .16s var(--ease);
}
.nav > a:hover { color: var(--text); text-decoration: none; }
.nav-cta { color: #241704; }

.langs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); }
.langs button {
  min-width: 38px; padding: 5px 6px;
  background: none; border: 0; border-radius: 2px;
  font-family: var(--font); font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.langs button:hover { color: var(--text); background: var(--paper-2); }
.langs button[aria-pressed="true"] { background: var(--timber); color: #241704; }

.nav-toggle { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: var(--paper);
  color: var(--text);
  padding: clamp(52px, 7vw, 92px) 0 clamp(60px, 8vw, 104px);
}
/* Feine Holzfaserung, jetzt auf hellem Grund: kaum sichtbar, aber die Fläche
   ist nicht mehr steriles Weiß. */
.hero::before {
  content: ""; position: absolute; inset: -10%;
  background-image:
    repeating-linear-gradient(91.5deg, rgb(150 101 44 / 3.2%) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(88.5deg, rgb(38 38 34 / 2.4%) 0 1px, transparent 1px 15px);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 84% 8%, rgb(184 129 61 / 12%), transparent 58%),
    radial-gradient(70% 60% at 2% 96%, rgb(92 107 74 / 8%), transparent 62%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

/* Mittig gesetzt: das Emblem oben, darunter die Ansprache. Eine zweispaltige
   Aufteilung mit dem Zeichen rechts hatte den Text nach links gedrueckt; bei
   einem Wappen ist die Mittelachse die natuerliche Ordnung. */
.hero-grid { display: block; text-align: center; }
.hero-copy { max-width: 62ch; margin-inline: auto; }
.hero-copy h1 { color: var(--text); margin-bottom: 20px; }
.hero-copy .lede { color: var(--text-2); max-width: 54ch; margin-inline: auto; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;
  justify-content: center;
}
.hero-note { margin-top: 18px; font-size: .89rem; color: var(--text-3); }

/* Die Auszeichnungszeile bekommt in der Mitte einen Strich auf beiden Seiten —
   mit nur einem links haengt sie schief. */
.hero .eyebrow { justify-content: center; }
.hero .eyebrow::after {
  content: ""; display: block; width: 34px; height: 1px;
  background: var(--timber); opacity: .55;
}

/* Das Foto sitzt in einem Rahmen statt randlos hinter dem Text: über einem
   Bild ist Schrift nur mit einer dicken Abdunklung lesbar, und dann sieht man
   das Bild nicht mehr. So bleiben beide ganz. */
.hero-art {
  width: 100%; max-width: 520px;
  margin: 0 auto clamp(26px, 4vw, 40px); position: relative;
}
.hero-art picture { display: block; }
.hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
/* Das Emblem ist freigestellt und trägt seinen eigenen Ring als Kante. Rahmen
   und Schlagschatten darüber sähen aus wie ein aufgeklebtes Bild. Statt dessen
   ein sehr weicher warmer Schein, damit es nicht im Papier schwimmt. */
.hero-art-logo img {
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 10px 26px rgb(21 42 28 / 12%));
}
.hero-art-logo { max-width: 460px; }

/* ── Vertrauensleiste ────────────────────────────────────────────────────── */

.trust {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(26px, 3.4vw, 38px);
}
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-item p { margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.45; color: var(--text-2); }
.ico {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--timber-lo); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Abschnitte ──────────────────────────────────────────────────────────── */

.section { padding-block: clamp(64px, 8.5vw, 116px); }
.section-tint { background: var(--paper-2); }
/* Früher der zweite große dunkle Block. Jetzt Sand mit einem Holzstreifen
   oben — er trennt genauso deutlich und drückt die Seite nicht runter. */
.section-dark {
  background: var(--paper-3); color: var(--text);
  border-top: 3px solid var(--timber);
}

.section-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 58px); }
.section-head h2 { margin-bottom: 16px; }
.section-lede { font-size: 1.06rem; color: var(--text-2); line-height: 1.62; max-width: 58ch; }

/* Produktkarten */
.cards {
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgb(192 138 78 / 45%);
  box-shadow: var(--shadow-md);
}
/* Festes Seitenverhältnis: sonst sind die vier Karten unterschiedlich hoch,
   sobald ein Foto anders beschnitten ist als das nächste. `width`/`height` am
   Bild verhindern zusätzlich, dass die Seite beim Laden springt. */
.card-art {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.card-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card-art img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .card-art img { transform: none; }
}
/* Fuer genagelte Deckel und Talp gibt es kein freies Foto. Eine Zeichnung ist
   hier nicht Notloesung, sondern besser: sie zeigt maßhaltig, wie die
   Fedéldeszka über den Haranttalpen liegt und der Talp auf drei Talpfa sitzt.
   Deshalb bekommt sie eine eigene Flaeche mit derselben Faserung wie die
   Bildkarten, damit die Reihe zusammenbleibt. */
.card-art-draw {
  display: grid; place-items: center;
  padding: 26px 30px;
  background: var(--paper-2);
}
.card-art-draw::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90.5deg, rgb(38 38 34 / 3%) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.card-art-draw svg { position: relative; width: 100%; max-width: 290px; height: auto; }
.draw .board { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.6; }
.draw .under { fill: none; stroke: var(--timber-lo); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .8; }
.draw .nail { fill: var(--timber-lo); }
/* Bezeichnungen wie auf einer Bauzeichnung — Kapitälchen, gesperrt, wie die
   Auszeichnungszeilen der Seite. */
.draw-label text {
  font-family: var(--font); font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; fill: var(--text-3); text-transform: uppercase;
}
.card:hover .draw .board { stroke: var(--moss); }

.card-body { padding: 24px 30px 30px; }
.card-body h3 { margin-bottom: 9px; }
.card-body p { color: var(--text-2); font-size: .96rem; margin: 0; }

/* Firma */
.about-grid {
  display: grid; gap: clamp(30px, 5vw, 64px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
}
.about-copy p { color: var(--text-2); }
.about-lead { font-size: 1.16rem; color: var(--text) !important; font-weight: 500; }
.facts {
  display: grid; gap: 14px 32px; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
}
.facts dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.facts dd { margin: 0; font-size: .96rem; font-weight: 500; }

/* Gründe */
.reasons {
  display: grid; gap: clamp(24px, 3.4vw, 40px) clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: reason;
}
.reasons li { counter-increment: reason; padding-top: 20px; border-top: 2px solid var(--paper-3); }
.reasons li::before {
  content: counter(reason, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-family: var(--display); font-size: .92rem; font-weight: 600;
  letter-spacing: .06em; color: var(--timber-lo);
}
.reasons h3 { margin-bottom: 8px; }
.reasons p { color: var(--text-2); font-size: .95rem; margin: 0; }

/* Ablauf */
.steps {
  display: grid; gap: clamp(26px, 3vw, 34px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.steps li { position: relative; padding-top: 8px; }
/* Verbindungslinie zwischen den Schritten, nicht über den letzten hinaus. */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 44px; top: 19px; right: -18px;
  height: 1px; background: rgb(150 101 44 / 28%);
}
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 16px;
  border: 1px solid var(--timber); border-radius: 50%;
  font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--timber-lo);
  background: var(--paper); position: relative; z-index: 1;
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--text-2); font-size: .94rem; margin: 0; }

/* Kontakt */
.contact-grid {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.contact-list { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.contact-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.contact-list li > span:first-child {
  min-width: 84px; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.contact-list a, .contact-list li > span:last-child { font-size: 1rem; font-weight: 500; }

.checklist {
  background: var(--paper-2); color: var(--text);
  border: 1px solid var(--line);
  border-left: 3px solid var(--moss);
  border-radius: var(--r-lg); padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-md);
}
.checklist h3 { color: var(--text); margin-bottom: 18px; }
.checklist ul { display: grid; gap: 12px; }
.checklist li {
  position: relative; padding-left: 26px;
  font-size: .95rem; line-height: 1.5; color: var(--text-2);
}
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--moss); opacity: .8;
}
.checklist-note {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--text-3);
}

/* ── Individuelle Zeichnung ──────────────────────────────────────────────── */

.drawing-grid {
  display: grid; gap: clamp(30px, 4.5vw, 56px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
}
.drawing-note {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--text-3); max-width: 46ch;
}
.drawing-art { margin: 0; }
.drawing-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* ── Pappelband und Erfahrung ────────────────────────────────────────────── */

.band { margin: 0; position: relative; }
.band picture { display: block; }
.band img {
  display: block; width: 100%; height: clamp(180px, 26vw, 330px);
  object-fit: cover;
}
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px clamp(20px, 5vw, 40px) 16px;
  background: linear-gradient(0deg, rgb(38 38 34 / 62%), transparent);
  color: #fbf8f1; font-size: .92rem; font-weight: 500;
  text-shadow: 0 1px 3px rgb(38 38 34 / 55%);
}

.record { padding-bottom: clamp(48px, 6vw, 78px); }
.record-grid {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Drei echte Zahlen sind besser als vier, von denen eine geraten ist. */
.record-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.record-grid > div {
  padding: 24px 0 0;
  border-top: 3px solid var(--paper-3);
}
.record-grid dt {
  font-family: var(--display); font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 600; line-height: 1; letter-spacing: -.02em;
  color: var(--timber-lo); margin-bottom: 10px;
}
/* Der Platzhalter sitzt in einer sehr großen Ziffer — er muss trotzdem als
   Platzhalter erkennbar bleiben, sonst geht er beim Livegang mit raus. */
.record-grid dt .ph { font-size: .46em; letter-spacing: 0; }
.record-grid dd {
  margin: 0; font-size: .96rem; line-height: 1.45; color: var(--text-2);
  max-width: 22ch;
}
.record-note {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--text-3); max-width: 62ch;
}

/* ── Fußzeile ────────────────────────────────────────────────────────────── */

.foot {
  /* Gedecktes Dunkelgrün statt Nachtschwarz: die Seite endet ruhig, ohne
     dass unten ein schwarzer Balken klebt. */
  background: var(--moss-lo); color: var(--on-dark-2);
  padding-top: clamp(44px, 5.5vw, 68px);
}
.foot-grid {
  display: grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1fr);
  padding-bottom: clamp(34px, 4vw, 48px);
}
.brand-foot { margin-right: 0; }
.foot-tag { margin: 16px 0 0; font-size: .93rem; max-width: 34ch; }
.foot-nav { display: grid; gap: 10px; align-content: start; }
.foot-nav a { color: var(--on-dark-2); font-size: .93rem; }
.foot-nav a:hover { color: var(--on-dark); text-decoration: none; }

.imprint h2 {
  font-family: var(--font); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark);
  margin-bottom: 12px;
}
.imprint p { font-size: .9rem; line-height: 1.75; margin: 0; }
/* Platzhalter sichtbar markieren: was hier steht, muss vor dem Livegang weg. */
.ph {
  display: inline-block;
  padding: 0 5px;
  border-bottom: 1px dashed rgb(184 129 61 / 70%);
  color: var(--timber-lo);
}
.foot .ph { color: var(--timber-hi); border-bottom-color: rgb(213 164 104 / 60%); }

.foot-base {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between;
  padding-block: 20px;
  border-top: 1px solid var(--line-dark);
  font-size: .86rem;
}
.foot-base p { margin: 0; }
.foot-langs { display: flex; gap: 18px; }
.foot-langs button {
  background: none; border: 0; padding: 0;
  font-family: var(--font); font-size: .86rem; color: var(--on-dark-2);
  cursor: pointer; transition: color .16s var(--ease);
}
.foot-langs button:hover { color: var(--timber-hi); }
.foot-langs button[aria-pressed="true"] { color: var(--on-dark); font-weight: 600; }

/* ── Schmalere Fenster ───────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:not(:last-child)::after { display: none; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  html { scroll-padding-top: 76px; }
  .drawing-grid { grid-template-columns: 1fr; }

  /* Navigation klappt aus, der Sprachumschalter bleibt immer sichtbar —
     wer die Seite nicht lesen kann, soll nicht erst ein Menü suchen müssen. */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; width: 42px; height: 42px;
    background: none; border: 1px solid var(--line); border-radius: var(--r);
    cursor: pointer;
  }
  .nav-toggle-bars { display: grid; gap: 4px; }
  .nav-toggle-bars i { display: block; width: 18px; height: 1.6px; background: var(--text); transition: transform .2s var(--ease), opacity .2s var(--ease); }
  .nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

  .masthead-inner { flex-wrap: wrap; gap: 12px; }
  .brand { order: 1; }
  .langs { order: 2; margin-left: auto; }

  .nav {
    order: 4; width: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line);
    padding-block: 6px 14px;
  }
  .nav.open { display: flex; }
  .nav > a { padding: 12px 2px; font-size: 1rem; white-space: normal; }
  .nav-cta { margin-top: 10px; align-self: flex-start; }

  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 660px) {
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .trust-grid, .reasons, .steps, .foot-grid { grid-template-columns: 1fr; }
  .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: 1fr; gap: 12px; }
  .btn { width: 100%; }
  .nav-cta { width: 100%; }
  .hero-actions, .contact-actions { flex-direction: column; align-items: stretch; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

/* ── Druck ───────────────────────────────────────────────────────────────── */

@media print {
  .masthead, .nav-toggle, .langs, .hero-art, .foot-langs { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero, .section-dark, .checklist, .foot { background: #fff !important; color: #000 !important; }
  .hero::before, .hero::after { display: none; }
  .hero-copy h1, .section-dark h2, .section-dark h3, .checklist h3 { color: #000 !important; }
  .hero-copy .lede, .steps p, .checklist li, .foot { color: #333 !important; }
  .card, .checklist { box-shadow: none; border: 1px solid #ccc; }
}