/* Schriften: Manrope (Überschriften) und DM Sans (Text), variabel und selbst
   gehostet. Direkt hier statt per @import, damit der Browser sie nicht erst
   über eine zweite Datei findet; die beiden latin-Dateien lädt jede Seite
   zusätzlich per <link rel="preload"> vor. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.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: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.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: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin-ext.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: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.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;
}

/* ------------------------------------------------------------------ *
 * IT-Architekturbüro ZT JWR
 *
 * Heller, sachlicher Auftritt nach dem Vorbild eines Gutachterbüros:
 * gebrochenes Weiss als Grund, Manrope halbfett und eng gesetzt für
 * Überschriften, DM Sans für den Text, flache Kacheln ohne Rundung,
 * dünne Linien, ein dunkler Fuss.
 *
 * Farben aus dem Logo: Limette #a4c528 und das dunkle Schiefergrau
 * des Kopfs sind die zwei Hauptfarben. Limette trägt Knöpfe, Linien und
 * Zeichen, das Schiefergrau Schrift, dunkle Flächen und den Fuss.
 * Grüne Schrift auf hellem Grund nur im vertieften Ton --limette-tief.
 * ------------------------------------------------------------------ */

:root {
  --grund: #f6f7f5;
  --weiss: #ffffff;
  --kachel: #ebeee7;          /* getönte Kachel */
  --kachel-hover: #e2e7da;
  --band: #eef2e0;            /* Kontaktband, ein Hauch Limette */
  --text: #243038;            /* vertieftes Schiefergrau von jwr.at */
  --text-leise: #52606a;
  --linie: #cfd6d8;
  --linie-leise: #dde2e3;
  --limette: #a4c528;         /* der Bogen im Logo, gemessen */
  --limette-tief: #56690f;    /* grüne Schrift auf Hell, 5,71:1 */
  --text-auf-dunkel: #c9d0d3; /* 8,65:1 auf --text */
  --fuss: #243038;

  --breite: 1320px;
  --rand: clamp(18px, 4.3vw, 62px);
  --luft: clamp(72px, 8vw, 112px);
  --luft-klein: clamp(48px, 5.5vw, 72px);

  --schrift-titel: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;      /* 17 px */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* das Titelbild rechnet mit 100vw */
}

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

a {
  color: var(--text);
  text-decoration-color: var(--limette);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover { color: var(--limette-tief); }

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.5rem, 4.8vw, 4.3rem);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.045em;
}
h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
}
h4 { font-size: 1.1rem; letter-spacing: -0.01em; }

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

.inhalt {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.inhalt--schmal { max-width: calc(820px + 2 * var(--rand)); }

.abschnitt { padding-block: var(--luft); }
.abschnitt--eng { padding-block: var(--luft-klein); }
.abschnitt--warm { background: var(--weiss); }
.abschnitt--linie { border-top: 1px solid var(--linie-leise); }

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--weiss);
  padding: 12px 20px;
  z-index: 100;
}
.sprung:focus { left: 8px; top: 8px; }

/* Kleine Zeilen: Dachzeile, Textverweis ---------------------------------- */

.dachzeile {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-leise);
  margin: 0 0 1.4em;
}
.dachzeile::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--limette);
}
/* In der Startseiten-h1 steht die Dachzeile mit drin (Suchbegriff), soll aber
   aussehen wie überall sonst. */
h1 .dachzeile {
  font-family: var(--schrift-text);
  font-weight: 400;
  line-height: 1.62;
}

.textverweis {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--limette);
  white-space: nowrap;
}
.textverweis::after {
  content: "→";
  font-size: 1.05em;
  transition: transform 0.2s ease;
}
.textverweis:hover { color: var(--limette-tief); border-bottom-color: var(--text); }
.textverweis:hover::after { transform: translateX(4px); }

/* Kopf -------------------------------------------------------------------- */

.kopf {
  background: var(--grund);
  color: var(--text);
  position: relative;
  z-index: 30;
}

.kopf__zeile {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding: 18px var(--rand);
  min-height: 96px;
}

.kopf__marke {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  flex-shrink: 0;
}
.kopf__logo { width: 132px; height: auto; }

.menue {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.menue a {
  color: var(--text);
  text-decoration: none;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.menue a:hover,
.menue a[aria-current="page"] { border-bottom-color: var(--limette); }

/* Kontakt als kleiner Knopf in Limette; das Telefon folgt nach einem Strich */
.menue a.knopf-kontakt {
  background: var(--limette);
  color: var(--text);
  padding: 9px 18px;
  border-bottom: 0;
  font-weight: 500;
}
.menue a.knopf-kontakt:hover,
.menue a.knopf-kontakt[aria-current="page"] { background: var(--text); color: var(--weiss); }

.menue__telefon {
  padding-left: 30px;
  border-left: 1px solid var(--linie);
}
.menue__telefon a { font-variant-numeric: tabular-nums; }

.menue-knopf {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  padding: 9px 18px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  min-height: 44px;
}

/* Erster Bildschirm: Text links, Bild rechts ------------------------------ */

.aufmacher {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: stretch;
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: var(--luft);
}

.aufmacher__text {
  display: flex;
  flex-direction: column;
  padding-top: clamp(8px, 1.5vw, 28px);
}

.aufmacher h1 { margin-bottom: 0.55em; max-width: 13ch; }

.aufmacher__satz {
  font-size: clamp(1.06rem, 1.3vw, 1.2rem);
  max-width: 40ch;
  margin-bottom: 0;
}

.aufmacher__person {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--linie);
  max-width: 420px;
  font-size: 0.95rem;
}
.aufmacher__person strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.aufmacher__person p { margin: 0; }
.aufmacher__person small {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.aufmacher .knopf-reihe { margin-top: 36px; align-items: center; gap: 28px; }

.telefonverweis {
  color: var(--text);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.telefonverweis:hover { color: var(--text); border-bottom-color: var(--limette); }

.aufmacher__schluss {
  margin-top: auto;
  padding-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.runter {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--text-leise);
  text-decoration: none;
  font-size: 1.1rem;
}
.runter:hover { border-color: var(--text); color: var(--text); }

/* Das Bild läuft bis an den rechten Rand des Fensters und füllt die ganze
   Höhe des Aufmachers; unten links ein dunkler Kasten mit dem Satz von jwr.at. */
.aufmacher__bild {
  margin: 0 calc(-1 * (var(--rand) + max(0px, (100vw - var(--breite) - 2 * var(--rand)) / 2))) 0 0;
  position: relative;
  min-height: 640px;
  background: var(--text);
}
.aufmacher__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 50%;
}
.aufmacher__bild figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 360px;
  padding: 26px 30px 28px;
  background: var(--text);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  box-shadow: inset 0 4px 0 var(--limette);
}
.aufmacher__bild figcaption span { display: block; color: var(--limette); }

/* Knöpfe ---------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: 52px;
  padding: 14px 22px;
  background: var(--limette);
  color: var(--text);
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--limette);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.knopf::after { content: "↗"; font-size: 1.05em; }
.knopf:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--weiss);
}

.knopf--klar {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.knopf--klar:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--weiss);
}

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Text -------------------------------------------------------------------- */

.fliess { max-width: 62ch; }
.fliess--gross { font-size: 1.15rem; }

.vorsatz {
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
  color: var(--text-leise);
  max-width: 56ch;
}

/* Kopfzeile eines Abschnitts: Titel links, Verweis rechts ------------------ */

.abschnitt__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.abschnitt__kopf h2 { margin: 0; }

/* Leistungen als Kacheln --------------------------------------------------- */

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

.leistung {
  display: flex;
  flex-direction: column;
  background: var(--kachel);
  padding: 30px 28px 26px;
  min-height: 300px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
a.leistung:hover { background: var(--kachel-hover); color: var(--text); }
.leistung h3 { margin-bottom: 0.6em; }
.leistung p { color: var(--text-leise); }
.leistung__mehr {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.leistung__mehr::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  background: var(--limette);
  color: var(--text);
  transition: transform 0.2s ease;
}
a.leistung:hover .leistung__mehr::after { transform: translateX(4px); }

/* Die Begutachtung: die Leistung, die es nur mit Befugnis gibt */
.leistung--hervor { background: var(--text); color: var(--weiss); box-shadow: inset 0 4px 0 var(--limette); }
a.leistung--hervor:hover { background: #1b252c; color: var(--weiss); }
.leistung--hervor h3 { color: var(--weiss); }
.leistung--hervor p { color: var(--text-auf-dunkel); }
.leistung--hervor .leistung__mehr { color: var(--limette); }

/* Band: Titel links, Inhalt rechts ------------------------------------------ */

/* Das dunkle Band in der Mitte: Schiefergrau des Kopfs, Limette als Zeichen */
.band {
  background: var(--text);
  color: var(--weiss);
  padding-block: var(--luft-klein);
}

.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
.zweispaltig > :first-child h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.zweispaltig > :first-child .vorsatz { font-size: 1rem; }
.band h2,
.band h3 { color: var(--weiss); }
.band .vorsatz { color: var(--text-auf-dunkel); }

/* Die drei Säulen — die Idee aus dem Betrieb -------------------------------- */

.saeulen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.saeule {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 22px;
}
.saeule--tragend { border-top: 4px solid var(--limette); padding-top: 19px; }
.saeule h3 { margin-bottom: 0.45em; font-size: 1.3rem; }
.saeule p { color: var(--text-auf-dunkel); margin: 0; }

.saeule__marke {
  display: block;
  font-size: 0.8125rem;
  color: var(--limette);
  margin-bottom: 0.9em;
}

/* Person --------------------------------------------------------------------- */

.wechsel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.wechsel--schmal { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }

.portrait { width: 100%; height: auto; }

.person__titel {
  font-size: 0.875rem;
  color: var(--text-leise);
  margin-bottom: 1.6em;
}
.person__text { max-width: 52ch; }
.person__ort {
  margin-top: 28px;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

/* Referenzen ------------------------------------------------------------------ */

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

.referenz { margin: 0; }
.referenz__logo {
  display: grid;
  place-items: center;
  background: var(--weiss);
  aspect-ratio: 2 / 1;
  padding: 16% 18%;
}
.referenz__logo img { max-height: 64px; width: auto; }
.referenz h3,
.referenz__name { margin: 20px 0 6px; font-size: 1.3rem; letter-spacing: -0.025em; }
.referenz p { margin: 0; font-size: 0.95rem; color: var(--limette-tief); }

/* Kontaktband: auf allen Seiten der Schluss ------------------------------------ */

.abschnitt--kontakt { background: var(--band); }

.kontakt__nummer {
  display: inline-block;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  margin: 28px 0 8px;
  font-variant-numeric: tabular-nums;
}
.kontakt__nummer:hover { color: var(--limette-tief); }

.kontakt__angaben {
  font-size: 0.95rem;
  color: var(--text-leise);
}
.kontakt__angaben a { color: var(--text); }

/* Lageplan: aus OpenStreetMap gezeichnet (assets/images/lageplan.svg),
   Beschriftung als HTML darüber, damit sie in der Schrift der Seite steht.
   --x/--y sind die Stellen im Bild in Prozent. */

.lageplan {
  position: relative;
  margin: 0;
  container-type: inline-size;
  box-shadow: inset 0 4px 0 var(--limette);
}
.lageplan img { width: 100%; height: auto; }

.lageplan__ort,
.lageplan__strasse,
.lageplan__pin,
.lageplan__schild {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

.lageplan__ort {
  transform: translate(-50%, -50%);
  font-size: clamp(0.6875rem, 1.6cqi, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a868c;
  text-shadow: 0 0 3px #eef1ec, 0 0 3px #eef1ec;
  white-space: nowrap;
}

.lageplan__strasse {
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  background: var(--text);
  color: var(--weiss);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lageplan__pin {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--limette);
  border: 5px solid var(--text);
  box-shadow: 0 0 0 8px rgba(164, 197, 40, 0.3);
}

.lageplan__schild {
  transform: translate(22px, -50%);
  padding: 12px 16px 13px;
  background: var(--text);
  color: var(--text-auf-dunkel);
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: inset 4px 0 0 var(--limette);
}
.lageplan__schild strong {
  display: block;
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.lageplan__quelle {
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px 8px;
  background: rgba(246, 247, 245, 0.85);
  font-size: 0.6875rem;
  color: var(--text-leise);
}
.lageplan__quelle a { color: var(--text-leise); }

/* Die ganze Karte öffnet Google Maps (nur ein Link, nichts wird von Google
   geladen, solange niemand klickt); darunter derselbe Link sichtbar. */
.lageplan__link { position: absolute; inset: 0; z-index: 1; }
.lageplan__link:focus-visible { outline-offset: -3px; }
.lageplan__quelle { z-index: 2; }
.lageplan__maps { position: relative; z-index: 2; margin-top: 18px; }
.lageplan__maps::after { content: "↗"; }

.adresslink { color: inherit; }
.adresslink:hover { color: var(--limette-tief); }

/* Schmal: das Schild rückt unter die Karte, die kleinen Orte fallen weg */
@container (max-width: 520px) {
  .lageplan__ort { display: none; }
  .lageplan__schild {
    position: static;
    display: block;
    transform: none;
    white-space: normal;
  }
}

/* Unterseiten: Auftakt und Abschnitte mit Titel links --------------------------- */

.abschnitt--auftakt {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(48px, 5.5vw, 80px);
}
.abschnitt--auftakt .inhalt--schmal { max-width: calc(var(--breite) + 2 * var(--rand)); }
.abschnitt--auftakt h1 { max-width: 18ch; }

.abschnitt--eng > .inhalt--schmal {
  max-width: calc(var(--breite) + 2 * var(--rand));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.abschnitt--eng > .inhalt--schmal > h2 {
  grid-column: 1;
  grid-row: 1 / span 12;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
}
.abschnitt--eng > .inhalt--schmal > :not(h2) { grid-column: 2; max-width: 64ch; }

/* Listen -------------------------------------------------------------------------- */

.liste-schlicht { list-style: none; margin: 0; padding: 0; }
.liste-schlicht li {
  padding: 20px 0;
  border-bottom: 1px solid var(--linie);
}
.liste-schlicht li:first-child { border-top: 1px solid var(--linie); }

.merkliste { list-style: none; margin: 0; padding: 0; }
.merkliste li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--linie-leise);
}
.merkliste li:first-child { border-top: 1px solid var(--linie-leise); }
.merkliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(12px + 0.8em);
  width: 14px;
  height: 2px;
  background: var(--limette);
}

/* Kontaktangaben -------------------------------------------------------------------- */

.angaben {
  margin: 0;
  display: grid;
  gap: 4px 24px;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  overflow-wrap: anywhere;
}
.angaben dt { font-size: 0.875rem; color: var(--text-leise); padding-top: 2px; }
.angaben dd { margin: 0 0 10px; }

/* Formular ---------------------------------------------------------------------------- */

.formular { display: grid; gap: 20px; max-width: 640px; }

.feldgruppe { display: grid; gap: 6px; }
.feldgruppe label { font-size: 0.875rem; }

.feldgruppe input,
.feldgruppe select,
.feldgruppe textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--band);
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: 12px 14px;
  min-height: 50px;
  width: 100%;
}
.feldgruppe textarea { min-height: 160px; resize: vertical; }
.feldgruppe input:focus,
.feldgruppe select:focus,
.feldgruppe textarea:focus {
  border-color: var(--text);
  background: var(--weiss);
  outline: none;
}

.pflicht { color: var(--limette-tief); }

/* Meldungen und Feldfehler des Token-Formulars (assets/js/kontaktformular.js).
   Das Skript setzt Rahmen und Rundung inline; hier eckig wie die Seite. */
.feldgruppe [aria-invalid="true"] { border-color: #b3261e; }
.form-status {
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.95rem;
}
.form-status.success {
  background: var(--band);
  color: var(--text);
  box-shadow: inset 4px 0 0 var(--limette);
}
.form-status.error {
  background: #fbeceb;
  color: #8c1d18;              /* 7,9:1 auf dem Grund */
  box-shadow: inset 4px 0 0 #b3261e;
}

.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; }
.zustimmung input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--limette-tief);
}

.formular .knopf { width: 100%; }

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

/* Fuss -------------------------------------------------------------------------------- */

.fuss {
  background: var(--fuss);
  color: #c9d0d3;
  padding-block: 56px 0;
  font-size: 0.9rem;
}
.fuss h2 {
  font-family: var(--schrift-text);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--limette);
  font-size: 0.8125rem;
  margin-bottom: 1em;
}
.fuss a { color: #edf0ef; text-decoration: none; }
.fuss a:hover { color: var(--limette); }

.fuss__raster {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.fuss__logo { width: 124px; height: auto; margin-bottom: 22px; }

.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: 0.45em; }

.fuss__schluss {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #9aa6ac;
}
.fuss__schluss a { color: #c9d0d3; text-decoration: underline; text-underline-offset: 3px; }

/* Rechtstexte --------------------------------------------------------------------------- */

.rechtstext { max-width: 68ch; overflow-wrap: anywhere; }
.rechtstext h2 { font-size: 1.5rem; margin-top: 1.8em; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.4em; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext__quelle {
  margin-top: 2.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--linie-leise);
  font-size: 0.875rem;
  color: var(--text-leise);
}

/* Ränder ----------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung { min-height: 240px; }
}

@media (max-width: 900px) {
  .aufmacher,
  .zweispaltig,
  .saeulen,
  .wechsel,
  .wechsel--schmal,
  .fuss__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .aufmacher { gap: 40px; }
  /* Breite ausdrücklich: Safari leitete sie sonst aus dem Seitenverhältnis
     ab und liess das Bild auf null Breite zusammenfallen (iPhone, 25.09.2026). */
  .aufmacher__bild {
    min-height: 0;
    aspect-ratio: 4 / 3;
    justify-self: start;
    width: calc(100% + 2 * var(--rand));
    margin-inline: calc(-1 * var(--rand));
  }
  .aufmacher__bild figcaption { max-width: 78%; padding: 18px 20px 20px; font-size: 1rem; }
  .aufmacher__schluss { padding-top: 40px; }
  .saeulen { gap: 28px; }
  .wechsel--schmal .portrait { max-width: 380px; }

  .abschnitt--eng > .inhalt--schmal { grid-template-columns: minmax(0, 1fr); }
  .abschnitt--eng > .inhalt--schmal > h2,
  .abschnitt--eng > .inhalt--schmal > :not(h2) { grid-column: 1; grid-row: auto; }

  .menue-knopf { display: inline-block; }
  .kopf__zeile { position: relative; min-height: 80px; }

  .menue {
    display: none;
    position: absolute;
    inset: 80px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grund);
    padding: 0 var(--rand) 20px;
    border-bottom: 1px solid var(--linie);
    font-size: 1.0625rem;
  }
  .menue--offen { display: flex; }
  .menue a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--linie-leise);
    min-height: 44px;
  }
  .menue a:hover,
  .menue a[aria-current="page"] { border-bottom-color: var(--linie-leise); color: var(--limette-tief); }
  .menue a.knopf-kontakt { margin-top: 12px; text-align: center; padding: 14px 18px; }
  .menue__telefon { padding-left: 0; border-left: 0; }
  .menue__telefon a { border-bottom: 0; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .kopf__logo { width: 112px; }
  .leistungen { grid-template-columns: minmax(0, 1fr); }
  .leistung { min-height: 0; }
  .aufmacher .knopf-reihe { flex-direction: column; align-items: stretch; gap: 16px; }
  .aufmacher .telefonverweis { align-self: flex-start; }
  .knopf, .knopf-reihe > .knopf { width: 100%; }
  .angaben { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .angaben dd { margin-bottom: 14px; }
  .fuss__schluss { flex-direction: column; }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .fuss__raster > :first-child { grid-column: 1 / -1; }
  .abschnitt__kopf { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }

  /* Aufmacher: der Pfeil nach unten und die Stichwortzeile helfen am
     Telefon nicht, sie schieben nur das Bild aus dem ersten Schirm. */
  .aufmacher { gap: 32px; padding-bottom: var(--luft-klein); }
  .aufmacher__schluss { display: none; }
  .aufmacher__satz { font-size: 1.0625rem; }
  .aufmacher__person { margin-top: 28px; padding-top: 20px; }
  .aufmacher .knopf-reihe { margin-top: 28px; }
  .aufmacher__bild { aspect-ratio: 3 / 2; }
  .aufmacher__bild figcaption { max-width: 88%; padding: 14px 18px 16px; }

  /* Kacheln ohne Leerlauf */
  .leistungen { gap: 12px; }
  .leistung { padding: 22px 20px 18px; }
  .leistung__mehr { padding-top: 18px; }

  /* Porträt quadratisch statt bildschirmhoch, Gesicht im Ausschnitt */
  .wechsel--schmal .portrait {
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 18%;
  }

  /* Zwei kleine Logos nebeneinander statt zwei riesiger Kacheln */
  .referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .referenz__logo { aspect-ratio: auto; height: 96px; padding: 0 12%; }
  .referenz__logo img { max-height: 34px; max-width: 100%; }
  .referenz h3,
  .referenz__name { margin-top: 12px; font-size: 1.1rem; }
  .referenz p { font-size: 0.875rem; }
}

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