/* ==========================================================================
   fixpunkt gmbh, Design-System
   ========================================================================== */

/* ---------- Schriften, lokal gehostet ---------- */
@font-face {
  font-family: 'Gentium Plus';
  src: url('../fonts/gentiumplus-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Gentium Plus';
  src: url('../fonts/gentiumplus-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: 'Gentium Plus';
  src: url('../fonts/gentiumplus-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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: 'Gentium Plus';
  src: url('../fonts/gentiumplus-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------- Farben, Masse, Rhythmus ---------- */
:root {
  --ink: #191614;
  --ink-soft: #5e5750;
  --paper: #ffffff;
  /* Lehm als Erdton fuer die eingefaerbten Baender.
     Traegt dunkle Schrift mit 13.1:1, der Grautext liegt bei 5.2:1. */
  --sand: #e6dac7;
  --accent: #c63f27;
  --accent-deep: #a5321d;
  --line: rgba(25, 22, 20, 0.14);
  --line-soft: rgba(25, 22, 20, 0.08);

  --font-display: 'Gentium Plus', Georgia, 'Times New Roman', serif;
  --font-text: 'Gentium Plus', Georgia, 'Times New Roman', serif;

  --wrap: 1140px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* Hoehe des Kopfbereichs: das aufgeklappte Menue auf dem Handy haengt sich
     daran auf, deshalb als eigener Wert und nicht als feste Zahl */
  --header-h: 6.3rem;

  --radius: 3px;
  --radius-btn: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

/* Der Kopfbereich klebt oben. Ohne diesen Abstand landet das Ziel eines
   Sprunglinks dahinter und bleibt unsichtbar. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.16;
  letter-spacing: -0.008em;
  margin: 0;
  text-wrap: balance;
  /* Lange deutsche Wortzusammensetzungen sonst breiter als der Schirm */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.45rem, 1.55rem + 3.8vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(2.25rem, 1.65rem + 2.4vw, 3.4rem); font-weight: 700; }
h3 { font-size: clamp(1.28rem, 1.12rem + 0.6vw, 1.58rem); font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }

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

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { color: var(--ink-soft); margin-top: 0.9rem; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Titel links, weiterfuehrender Knopf rechts daneben auf gleicher Grundlinie */
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.section-head--split > div { max-width: 46rem; }
.section-head--split .btn { flex: none; }

/* Weiterfuehrender Knopf am Fuss eines Abschnitts */
.section-actions { margin-top: clamp(2rem, 4vw, 3rem); }

.mt-l { margin-top: 2.5rem; }

.eyebrow {
  font-size: clamp(0.86rem, 0.8rem + 0.26vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.eyebrow::after {
  content: '';
  flex: 0 0 2.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.38vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Knoepfe und Textlinks ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

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

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.3s var(--ease), color 0.25s var(--ease);
}
.link-arrow--gross { font-size: 1.25rem; gap: 0.6rem; }
.link-arrow span { transition: transform 0.3s var(--ease); display: inline-block; }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover span { transform: translateX(3px); }

.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.text-link:hover { color: var(--accent); }

/* ---------- Kopfbereich ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line-soft); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
/* Wortmarke mit dem Schriftzug darunter, deshalb hoeher als eine Zeile */
.brand img { height: 3.9rem; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2rem); }

.nav a:not(.btn) {
  font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.65rem);
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.2s var(--ease);
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:not(.btn):hover::after,
.nav a[aria-current='page']:not(.btn)::after { transform: scaleX(1); }
.nav a[aria-current='page']:not(.btn) { color: var(--accent); }

.nav .btn {
  min-height: 3.2rem;
  padding: 0.55rem 1.5rem;
  font-size: clamp(1.05rem, 0.88rem + 0.55vw, 1.4rem);
  font-weight: 400;
  color: #fff;
}
.nav .btn::after { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

/* ---------- Kopfbereich der Unterseiten ---------- */
.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 1.4rem; max-width: 46rem; }
.page-head .section-actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Haupttaetigkeiten direkt unter dem Namen. Bewusst kleiner als die uebrigen
   Zwischentitel, sonst nimmt sie dem Namen darueber das Gewicht. */
.page-head__rolle {
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.3rem);
  line-height: 1.28;
  color: var(--ink-soft);
}

/* Unter der Rollenzeile steht schon ein grosser Satz. Der Absatz darunter
   laeuft deshalb in Fliesstextgroesse mit, sonst staffeln sich drei Groessen. */
.page-head__rolle + .lead {
  font-size: 1.15rem;
  line-height: 1.7;
}

/* ---------- Startseite: Kopfbereich ---------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6.5rem); }
/* Zwei Reihen: oben Kleinueberschrift mit Titel neben dem Foto, darunter der
   Fliesstext. Beide Felder der oberen Reihe stehen auf derselben Grundlinie,
   damit der untere Bildrand genau mit dem unteren Rand des H1 abschliesst. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(0, 0.76fr);
  grid-template-areas:
    "kopf bild"
    "text .";
  column-gap: clamp(2.5rem, 5vw, 4rem);
  row-gap: 0;
  align-items: end;
}
.hero__head { grid-area: kopf; }
.hero__media { grid-area: bild; }
.hero__body { grid-area: text; align-self: start; }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-top: 1.5rem; max-width: 38rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
}
/* ---------- Leitsatz, schliesst den Kopfbereich der Startseite ab ---------- */
.hero__banner {
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  padding-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--accent);
  text-wrap: balance;
}

/* ---------- Fotos ---------- */
.foto {
  display: block;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  object-fit: cover;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.foto--portrait { --ph-ratio: 4 / 5; }
.foto--wide { --ph-ratio: 16 / 10; }

figure.bild { margin: 0; display: grid; gap: 0.7rem; }
figure.bild figcaption { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Platzhalter-Bildflaechen ---------- */
.ph {
  position: relative;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(25, 22, 20, 0.035) 0 1px,
    transparent 1px 11px
  );
}
.ph svg {
  position: relative;
  width: clamp(44px, 20%, 88px);
  height: auto;
  color: var(--accent);
  opacity: 0.5;
}
.ph--portrait { --ph-ratio: 4 / 5; }
.ph--wide { --ph-ratio: 16 / 10; }
.ph--square { --ph-ratio: 1 / 1; }

/* ---------- Karten ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }
.card p { color: var(--ink-soft); font-size: 1rem; }
.card__icon { color: var(--accent); }
/* Die Sinnbilder sind fuer 30px gezeichnet. Groesser skaliert wuerde die Linie
   klobig, deshalb hier duenner als im Original. */
.card__icon svg { width: 60px; height: 60px; stroke-width: 0.8; }
.card .link-arrow {
  margin-top: auto;
  padding-top: 0.9rem;
  align-self: flex-start;
  font-size: 1.15rem;
}

/* ---------- Nummerierte Liste ---------- */
.reasons { display: grid; gap: 0; counter-reset: reason; }
.reason {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line-soft);
  counter-increment: reason;
}
.reason:last-child { border-bottom: 1px solid var(--line-soft); }
.reason::before {
  content: '0' counter(reason);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  padding-top: 0.08em;
}
.reason p { color: var(--ink-soft); margin-top: 0.5rem; }

/* ---------- Angebot: abwechselnde Bloecke ---------- */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-soft);
}
.offer:first-of-type { border-top: 0; padding-top: 0; }
.offer:nth-of-type(even) .offer__media { order: -1; }
.offer__media { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.offer__media .btn { justify-self: center; }
.offer__num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
}
.offer h2 { font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.8rem); }
.offer__body > p { color: var(--ink-soft); margin-top: 1rem; }

/* Statt eines Fotos das Sinnbild des Bereichs, gross auf ruhigem Grund */
.offer__icon {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--accent);
}
.offer__icon svg {
  width: clamp(104px, 42%, 190px);
  height: auto;
  /* Die Sinnbilder sind fuer 30px gezeichnet. So gross skaliert wuerde die
     Linie klobig, deshalb hier duenner als auf der Startseite. */
  stroke-width: 0.55;
}

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.ticks li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: '';
  width: 1rem;
  height: 1rem;
  margin-top: 0.42rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  padding: 4px;
  background: var(--accent) content-box;
}

/* ---------- Referenzen: Projektbeschrieb ----------
   Die Zitatkaesten sind zentriert und kurz. Ein Projekt braucht Fliesstext,
   deshalb ein eigener Block in derselben Kastenform, aber linksbuendig. */
.projekt {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
}
.projekt h3 { margin-top: 0.3rem; }
.projekt__kunde {
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--accent);
}
.projekt p + p,
.projekt .ticks + p { margin-top: 1.1rem; color: var(--ink-soft); }
.projekt h3 + p { margin-top: 1.4rem; color: var(--ink-soft); }
.projekt .projekt__kunde { color: var(--accent); }

/* Offenlegung am Fuss eines Projekts, bewusst leiser als der Beschrieb */
.projekt .projekt__hinweis {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- Werdegang ---------- */
.track { list-style: none; margin: 0; padding: 0; }
.track li {
  position: relative;
  padding: 0 0 2rem 2.25rem;
  border-left: 1px solid var(--line);
}
.track li:last-child { padding-bottom: 0; border-left-color: transparent; }
.track li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent);
}
/* Gefuellter Punkt heisst: laeuft noch. Gilt fuer die aktuelle Taetigkeit
   zuoberst und fuer jede weitere Station, die noch nicht abgeschlossen ist. */
.track li:first-child::before,
.track li.laufend::before { background: var(--accent); }
.track h3 { font-size: 1.15rem; }
.track p { color: var(--ink-soft); margin-top: 0.35rem; font-size: 1rem; }

/* ---------- Kundenstimme ---------- */
.quote {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
}
.quote figcaption { margin-top: 1.5rem; font-size: 0.92rem; color: var(--ink-soft); }
.tag {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* ---------- Dunkles Handlungsband ---------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-band h2 { max-width: 18ch; color: var(--paper); }
.cta-band p { margin-top: 0.9rem; max-width: 34rem; color: rgba(255, 255, 255, 0.72); }

/* ---------- FAQ ---------- */
/* Die Antworten stehen offen da, es gibt nichts aufzuklappen */
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faq-group > h2 { margin-bottom: 1.5rem; }

.faq-item {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-item h3 {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr);
  gap: 0.9rem;
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  line-height: 1.35;
}
.faq-item h3::before {
  content: '';
  width: 0.8rem;
  height: 1px;
  margin-top: 0.72em;
  background: var(--accent);
}
.faq-item p {
  margin: 0.7rem 0 0;
  padding-left: 1.7rem;
  max-width: 52rem;
  color: var(--ink-soft);
}

/* ---------- Formular ---------- */
.form-grid { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.92rem; font-weight: 600; }
.field .hint { font-weight: 400; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  min-height: 3rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198, 63, 39, 0.14);
}

/* Honigtopf: unsichtbare Falle fuer automatisierte Spam-Eintraege */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: 0.88rem; color: var(--ink-soft); }

.form-status {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 0.97rem;
  margin-bottom: 1.75rem;
}
.form-status--ok { border-color: var(--accent); background: rgba(198, 63, 39, 0.07); }
.form-status--error { border-color: var(--line); background: var(--sand); }

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-details { display: grid; gap: 1.5rem; }
.contact-details h2 { font-size: 1.15rem; }
.contact-details dl { margin: 0; display: grid; gap: 1.15rem; }
.contact-details dt {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.contact-details dd { margin: 0; color: var(--ink-soft); }
.contact-details dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-details dd a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------- Rechtstexte ---------- */
.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul, .legal ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.legal address { font-style: normal; color: var(--ink-soft); line-height: 1.8; }

.notice {
  padding: 1.15rem 1.35rem;
  background: var(--sand);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
}
.notice p { color: var(--ink); }

/* ---------- Fussbereich ---------- */
.site-footer {
  background: var(--sand);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.site-footer__brand img { width: 9.5rem; height: auto; }
.site-footer__brand p {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 26rem;
}
.site-footer h2 {
  font-family: var(--font-text);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--accent); }
.site-footer address { font-style: normal; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.75; }

.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }

/* ---------- Sanftes Einblenden beim Scrollen ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Mobile, eigener Gestaltungsdurchgang
   ========================================================================== */
@media (max-width: 960px) {
  /* Einspaltig in der Lesereihenfolge. Der Abstand zwischen Titel und
     Fliesstext kommt weiterhin vom Absatz selbst, deshalb hier keine
     Reihenluecke, sondern nur ein Abstand ueber dem Foto. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "text" "bild";
    row-gap: 0;
  }
  .hero__media { margin-top: 2.5rem; }
  .hero .ph { --ph-ratio: 16 / 10; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .offer:nth-of-type(even) .offer__media { order: 0; }
  .contact-split { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --header-h: 5.4rem; }

  .brand img { height: 3.2rem; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.75rem;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a {
    padding-block: 1rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a:not(.btn) { font-size: 1.45rem; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn {
    margin-top: 1.25rem;
    min-height: 3.2rem;
    font-size: 1.25rem;
    border-bottom: 0;
    justify-content: center;
  }

  .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }

  .reason { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .reason::before { padding-top: 0; margin-bottom: 0.15rem; }

  .cta-band__inner { display: block; }
  .cta-band .btn { margin-top: 2rem; width: 100%; }

  .quote { text-align: left; }

  /* Grössere Tippfläche für Textlinks, ohne die Unterlinie zu verschieben */
  .link-arrow { position: relative; }
  .link-arrow::before { content: ''; position: absolute; inset: -9px -4px; }
  .contact-details dd a { display: inline-block; padding-block: 0.3rem; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .site-footer__bottom { display: grid; gap: 1rem; }

  .track li { padding-left: 1.75rem; }
}

@media (max-width: 560px) {
  /* Die feine Linie neben der Kleinüberschrift bricht auf schmalen Schirmen
     unschön um, deshalb fällt sie hier weg */
  .eyebrow::after { display: none; }

  /* Silbentrennung statt harter Umbruch mitten im Wort */
  h1, h2 { -webkit-hyphens: auto; hyphens: auto; }
}

@media (max-width: 420px) {
  .hero__actions { display: grid; gap: 1.25rem; justify-items: start; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav-toggle, .cta-band, .site-footer__bottom { display: none; }
  body { background: #fff; }
}