@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-400-normal.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: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-600-normal.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: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-700-normal.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: "Public Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/public-sans-latin-800-normal.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;
}

:root {
  --ink: #12211a;
  --green: #1e7a4b;
  --green-dark: #17603b;
  --lead: #4c5c53;
  --muted: #5a6b61;
  --quiet: #63746a;
  --line: #e4eae6;
  --input: #d6dfd9;
  --placeholder: #9aa8a0;
  --paper: #ffffff;
  --wash: #f4f8f5;
  --ok-bg: #f1f6f2;
  --ok-line: #c9e3d5;
  --font: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --wrap: 1100px;
  --radius: 8px;
  --radius-lg: 16px;

  /* Weiche Tiefe statt Hairline-Trennern: fuer Angebots- und
     Zertifizierungs-Karten sowie den Hover-Zustand von Buttons. */
  --shadow-sm: 0 1px 2px rgba(18, 33, 26, 0.05), 0 1px 1px rgba(18, 33, 26, 0.04);
  --shadow-md: 0 12px 28px rgba(18, 33, 26, 0.10), 0 2px 6px rgba(18, 33, 26, 0.05);

  /* Farbe des Hero-Banners (Bildecken). Auf der Startseite auch fuer die
     Navigation verwendet, damit beide nahtlos ineinander uebergehen —
     siehe .site-header-dark. Auf den Rechtsseiten ohne Banner bleibt die
     Navigation unveraendert hell (.site-header). */
  --banner-dark: #00010d;
}

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

* {
  margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

a:hover {
  color: var(--green-dark);
}

button,
input,
textarea {
  font: inherit;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

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

.wrap {
  width: min(100% - 112px, var(--wrap));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 56px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

/* Ausgleich fuer den jetzt fixierten Header: Sprungziele (Skip-Link,
   Logo-Anker, "Kontakt") sollen nicht unter der Navigation verschwinden. */
#main,
#top,
#kontakt {
  scroll-margin-top: 88px;
}

.brand {
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.brand-word {
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1;
}

.brand-i {
  position: relative;
  display: inline-block;
}

.brand-leaf {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-22deg);
  transform-origin: 50% 100%;
  fill: var(--green);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.language-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.lang-button {
  min-width: 40px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.lang-button.is-active {
  background: var(--ink);
  color: #fff;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease, border-color 0.15s ease;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: var(--green);
  color: #fff;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.button-primary:hover {
  background: var(--green-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.button-primary:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.button-dark {
  background: var(--ink);
  color: #fff;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
}

.button-dark:hover {
  background: #0e1913;
  color: #fff;
}

/* Nur auf der Startseite: Navigation geht nahtlos in den Hero-Banner
   darunter ueber (gleiche Farbe, keine Trennlinie). Die Rechtsseiten
   ohne Banner behalten die helle .site-header-Grundform unveraendert —
   ein dunkler Kopf ohne etwas Dunkles darunter waere dort unmotiviert. */
.site-header-dark {
  border-bottom: 0;
  background: var(--banner-dark);
}

.site-header-dark .brand,
.site-header-dark .brand:hover,
.site-header-dark .brand-word {
  color: #fff;
}

.site-header-dark .language-switch {
  border-color: rgba(255, 255, 255, 0.22);
}

.site-header-dark .lang-button {
  color: rgba(255, 255, 255, 0.65);
}

.site-header-dark .lang-button.is-active {
  background: #fff;
  color: var(--ink);
}

/* Gruen statt Ink als Kontakt-Button: --ink (#12211a) waere auf dem fast
   schwarzen Banner-Hintergrund (--banner-dark) kaum zu unterscheiden. */
.site-header-dark .button-dark {
  background: var(--green);
  color: #fff;
}

.site-header-dark .button-dark:hover {
  background: var(--green-dark);
  color: #fff;
}

.hero {
  padding: 96px 0 88px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.divisions .eyebrow,
.contact-copy .eyebrow {
  margin-bottom: 16px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

h1 {
  margin: 0 0 26px;
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -1.8px;
  line-height: 1.08;
  text-wrap: pretty;
}

h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  text-wrap: pretty;
}

.lead {
  max-width: 520px;
  margin: 0 0 18px;
  color: var(--lead);
  font-size: 17.5px;
  line-height: 1.7;
}

.lead + .button {
  margin-top: 18px;
}

/* Zertifizierungs-Grafik als echter Banner direkt unter der Navigation,
   randlos statt als eingerahmter Kasten mitten im hellen Content.
   Hintergrund in der Bildfarbe, damit auf breiten Bildschirmen kein
   weisser Rand neben dem Bild entsteht.
   Deckel bei --wrap (1100px) statt der vollen Bildbreite (1536px):
   das haelt die Bannerhoehe auf normalen Laptop-Breiten in Grenzen (ca.
   1100 * 2:3 = 733px statt 1024px) und richtet den Banner an der Breite
   aus, die der Rest der Seite ohnehin nutzt. Kein Zuschnitt (object-fit:
   cover waere hier falsch) — der Kauf-/Verkauf-Text im Bild reicht fast
   bis an Ober- und Unterkante, ein Crop wuerde ihn abschneiden. */
.hero-banner {
  background: var(--banner-dark);
}

.hero-banner-inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  /* Erlaubt cqw-Einheiten weiter unten: Text skaliert mit der eigenen
     Breite dieses Elements (= Bildbreite), nicht mit dem Sichtfenster.
     Dadurch bleibt der Text bei jeder Bildschirmgroesse exakt an der
     Stelle und Groesse, an der urspruenglich der eingebrannte Text sass. */
  container-type: inline-size;
}

.hero-banner-inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Kauf-/Verkauf-Aussage und die beiden "Gehandelte Standards"-Beschriftungen
   lagen urspruenglich als Pixel im Bild und wurden herausretuschiert (siehe
   AGENTS.md). Sie liegen jetzt als HTML darueber, an denselben Stellen,
   damit sie mit dem Sprachschalter in DE/EN/PT wechseln koennen. Positionen
   wurden per Pixel-Differenz zwischen Original- und retuschiertem Bild
   vermessen, nicht geschaetzt. */
.hero-caption {
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3cqw;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

.hero-caption-main {
  color: #0b1c3a;
  /* Zeilen sind jetzt kuerzer (je ein Wort/zwei Woerter statt der ganzen
     Aussage), dadurch passt trotz dreizeiligem Aufbau eine groessere
     Schrift in dieselbe Bildbreite. */
  /* Mindestgroesse (der linke clamp()-Wert) bewusst niedriger als man
     bei 3 Zeilen vermuten wuerde: bei schmalen Containern (Mobile) greift
     sonst der Mindestwert statt der cqw-Skalierung, und der jetzt
     dreizeilige Block laeuft unten ueber den Bildrand hinaus (gemessen
     bei 390px: 6.6px Overflow). Ab ~500px Containerbreite skaliert die
     Schrift ueber cqw ohnehin groesser als vorher. */
  font-size: clamp(14px, 3.1cqw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.hero-caption-sub {
  color: #0d4712;
  font-size: clamp(10px, 2.1cqw, 27px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.hero-caption-top {
  /* nur minimal tiefer als die urspruengliche Messung */
  top: 10%;
  left: 54%;
  width: 32%;
  transform: translateX(-50%);
}

.hero-caption-bottom {
  /* Tiefer als urspruenglich (75%), aber nicht so tief wie 80%: der per
     Pixel-Differenz vermessene leere/retuschierte Bereich auf der Hand
     endet bei ca. 93.8% der Bildhoehe. Bei top:80% reichte der Block
     (Hoehe ~16.6% der Bildhoehe) bis 96.6% runter - bei DE mit kurzem
     Sub-Text ("weiss nicht, an wen") kaum sichtbar, bei EN/PT mit
     laengerem Fliesstext ("doesn't know to whom" / "não sabe para
     quem") lief die Zeile sichtbar auf Handkante/Manschette. top:77%
     haelt den Block innerhalb des vermessenen leeren Bereichs. */
  top: 77%;
  left: 43%;
  width: 32%;
  transform: translateX(-50%);
}

.hero-label {
  position: absolute;
  margin: 0;
  /* Breite bewusst knapper als der verfuegbare Platz bis zum Bildrand
     (links/rechts je ca. 15-17% Bildbreite): laengere Uebersetzungen
     (z. B. "Nossas Certificações Orgânicas") brechen dann kontrolliert in
     zwei Zeilen um, statt ueber den Bildrand hinaus abgeschnitten zu
     werden — passiert bei white-space:nowrap auf schmalen Bildschirmen. */
  max-width: 26%;
  color: #fff;
  font-size: clamp(9px, 1.05cqw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.hero-label-left {
  top: 32.5%;
  left: 15.4%;
  transform: translateX(-50%);
}

.hero-label-right {
  top: 34.3%;
  left: 83.3%;
  transform: translateX(-50%);
}

.divisions {
  border-top: 1px solid var(--line);
  padding: 88px 0;
}

.divisions h2 {
  max-width: 560px;
  margin-bottom: 44px;
}

.division-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.division-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.division-grid article:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.division-grid h3 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}

.division-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

.photo-band {
  padding: 0 0 88px;
}

.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.photo-frame img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: 50% 42%;
}

.photo-frame figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(18, 33, 26, 0) 0%, rgba(18, 33, 26, 0.58) 45%, rgba(18, 33, 26, 0.9) 100%);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.photo-frame figcaption span {
  display: block;
  max-width: 520px;
}

.certs {
  background: var(--wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
}

.certs-label {
  display: block;
  margin-bottom: 22px;
  color: #5f7267;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-align: center;
  text-transform: uppercase;
}

.certs-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px 16px;
  flex-wrap: wrap;
}

.cert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.cert:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cert img {
  width: auto;
  height: 40px;
  max-width: 132px;
  object-fit: contain;
  background: #fff;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cert-brasil img {
  height: 44px;
  max-width: 148px;
}

/* Kleines Gegenstueck zu den Logos fuer die Kontrollnummer, die selbst kein
   eigenes Zeichen hat — haelt die Reihe optisch im Gleichgewicht. */
.cert-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.cert-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.cert-name {
  color: #2b3a32;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.cert-detail {
  color: var(--quiet);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.cert-number {
  color: #2b3a32;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.contact {
  padding: 88px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

.contact-copy h2 {
  margin-bottom: 18px;
}

.contact-lead {
  max-width: 400px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

address {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14.5px;
  font-style: normal;
  line-height: 1.7;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-form label {
  display: grid;
}

.contact-form .full,
.form-footer,
.sent-note {
  grid-column: 1 / -1;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  outline: none;
  padding: 14px 16px;
  font-size: 14.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  resize: vertical;
  min-height: 132px;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

input:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 122, 75, 0.14);
}

input:invalid:user-invalid,
textarea:invalid:user-invalid {
  border-color: #a24b4b;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.form-footer p {
  color: var(--quiet);
  font-size: 12.5px;
}

.form-footer .button-primary {
  padding: 15px 30px;
  font-size: 14.5px;
}

.sent-note {
  border: 1px solid var(--ok-line);
  border-radius: var(--radius);
  background: var(--ok-bg);
  color: var(--green);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--quiet);
  font-size: 12.5px;
}

.footer-row nav {
  display: flex;
  gap: 24px;
}

.footer-row a {
  color: var(--quiet);
}

.footer-row a:hover {
  color: var(--muted);
}

.legal-main {
  padding: 72px 0 96px;
}

.legal-main h1 {
  font-size: 40px;
  margin-bottom: 12px;
}

.legal-updated {
  margin-bottom: 36px;
  color: var(--quiet);
  font-size: 14px;
}

.legal-main h2 {
  margin: 32px 0 12px;
  font-size: 22px;
}

.legal-main p,
.legal-main li {
  max-width: 680px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.legal-main p + p {
  margin-top: 12px;
}

.legal-main ul {
  margin: 8px 0 0 18px;
}

.legal-main li + li {
  margin-top: 6px;
}

.page-404 {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 80px 24px;
  text-align: center;
}

.page-404 h1 {
  margin-bottom: 12px;
}

.page-404 p {
  margin-bottom: 28px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .wrap {
    width: min(100% - 48px, var(--wrap));
  }

  .site-header {
    padding: 18px 24px;
  }

  .hero,
  .divisions,
  .contact,
  .legal-main {
    padding-left: 0;
    padding-right: 0;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .contact-grid,
  .division-grid {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .photo-frame img {
    height: 260px;
  }

  .divisions,
  .contact {
    padding: 64px 0;
  }

  .contact-grid {
    gap: 40px;
  }

  .photo-band {
    padding-bottom: 64px;
  }

  .photo-frame figcaption {
    padding: 24px 20px;
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 28px, var(--wrap));
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 26px;
  }

  .contact-form,
  .form-footer {
    grid-template-columns: 1fr;
  }

  .form-footer .button {
    width: 100%;
  }

  .certs-row {
    gap: 12px;
    justify-content: flex-start;
  }
}

/* =========================================================================
   Ergaenzungen: Standards-Hinweis, sichtbare Kontaktdaten,
   mailto-Fallback und groessere Touch-Ziele.
   ========================================================================= */

.certs-note {
  margin-top: 20px;
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.address-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin-top: 12px;
}

.address-contact a {
  font-weight: 600;
}

.form-privacy {
  grid-column: 1 / -1;
  color: var(--quiet);
  font-size: 12.5px;
  line-height: 1.6;
}

.form-privacy a {
  text-decoration: underline;
}

.sent-note {
  display: grid;
  gap: 12px;
  font-weight: 400;
}

.sent-title {
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}

.sent-lead {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.sent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.sent-contact {
  font-size: 13.5px;
  font-weight: 600;
}

.sent-preview {
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--ok-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.button-ghost {
  padding: 11px 18px;
  border: 1px solid var(--ok-line);
  background: var(--paper);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}

.button-ghost:hover {
  background: var(--wash);
  color: var(--green-dark);
}

.lang-button {
  min-height: 40px;
}

/* Sprachumschalter der Rechtsseiten: reine Links, kein JS noetig. */
.legal-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.legal-lang a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 7px 12px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.legal-lang a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}

.legal-source {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Fingerbediente Geraete: Tippziele auf 44 px bringen.
   WCAG 2.5.8 (AA) verlangt 24 px, 2.5.5 (AAA) und die gaengigen
   Plattform-Richtlinien 44 px. Wir zielen auf 44. */
@media (pointer: coarse) {
  .lang-button,
  .legal-lang a,
  .button,
  .brand,
  .skip-link {
    min-height: 44px;
  }

  .lang-button,
  .legal-lang a {
    padding: 11px 14px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
  }

  .footer-row nav {
    flex-wrap: wrap;
    gap: 0 24px;
  }

  .footer-row nav a,
  .sent-contact,
  .address-contact a,
  .form-footer p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Fliesstext-Link: darf den Absatz nicht auseinanderziehen. */
  .form-privacy a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* =========================================================================
   Echtes Anfrageformular: Honeypot, Sende- und Fehlerzustand.
   ========================================================================= */

/* Muss ans Ende und braucht !important: .sent-note (grid) und .sent-actions
   (flex) setzen eine eigene display-Regel und wuerden das hidden-Attribut
   sonst aushebeln — der Kopieren-Block waere dauerhaft sichtbar. */
[hidden] {
  display: none !important;
}

/* Honeypot. Fuer Menschen unerreichbar, fuer Bots verlockend.
   Bewusst nicht display:none — das ueberspringen viele Bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sent-note.is-error {
  border-color: #e0c4c4;
  background: #fbf5f5;
}

.sent-note.is-error .sent-title {
  color: #8f3d3d;
}

.button[disabled] {
  opacity: 0.65;
  cursor: progress;
}