/* ==========================================================================
   Placonsept AG, Stylesheet
   Werte gemaess Design-Guide. Reihenfolge: Tokens, Grundlagen, Layout,
   Typografie, Komponenten, Seiten, Breakpoints.
   ========================================================================== */

@import url('fonts.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --terra: #C0764A;
  --terra-hover: #A9643C;
  --terra-light: #E0A87F;
  --paper: #FAF7F3;
  --sand: #F2ECE5;
  --ink: #241F1B;

  /* Textabstufungen als Deckkraft auf Tinte */
  --ink-72: rgba(36, 31, 27, .72);
  --ink-70: rgba(36, 31, 27, .70);
  --ink-65: rgba(36, 31, 27, .65);
  --ink-60: rgba(36, 31, 27, .60);
  --ink-55: rgba(36, 31, 27, .55);
  --ink-50: rgba(36, 31, 27, .50);
  --ink-45: rgba(36, 31, 27, .45);

  /* Linien */
  --line-fine: rgba(36, 31, 27, .12);
  --line: rgba(36, 31, 27, .14);
  --line-strong: rgba(36, 31, 27, .15);
  --line-chip: rgba(36, 31, 27, .22);
  --line-field: rgba(36, 31, 27, .30);
  --line-link: rgba(36, 31, 27, .35);
  --line-dark: rgba(250, 247, 243, .15);

  /* Text auf dunklem Grund */
  --paper-70: rgba(250, 247, 243, .70);
  --paper-60: rgba(250, 247, 243, .60);
  --paper-40: rgba(250, 247, 243, .40);
  --paper-35: rgba(250, 247, 243, .35);

  /* Schrift */
  --font-display: Jost, sans-serif;
  --font-sans: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Raster */
  --container: 1280px;
  --gutter: 56px;

  /* Abstand, den sticky Banner und Header oben belegen */
  --header-offset: 130px;

  --ease: .16s ease;
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 16px/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

/* picture ist von Haus aus inline und erbt dann Zeilenabstand unter dem Bild */
picture { display: block; }

a { color: var(--terra); text-decoration: none; }
a:hover { color: #9c5c36; }

::selection { background: var(--terra); color: #fff; }

input, textarea, button, select { font-family: inherit; }

/* Sichtbarer Tastaturfokus. Die Maus loest ihn nicht aus, das Design bleibt ruhig. */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

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

/* Sprung zum Inhalt, erscheint nur bei Tastaturbedienung */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: top var(--ease);
}
.skip-link:focus { top: 16px; color: var(--paper); }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Raster-Kinder duerfen unter ihre Mindestbreite schrumpfen. Ohne das
   sprengt ein langes Wort oder eine nicht umbrechende Liste die Seite auf
   schmalen Displays nach rechts auf. */
.hero > *, .phases > *, .job-hero > *, .cta > *, .job-band > *,
.about-split > *, .contact-split > *, .detail-body > *,
.strengths > *, .job-columns > *, .site-footer__cols > * { min-width: 0; }

/* Container mit dem Sektionsabstand einer abgesetzten Flaeche */
.container--section { padding-top: 88px; padding-bottom: 88px; }
.container--section-sm { padding-top: 72px; padding-bottom: 72px; }
.container--tail { padding-bottom: 96px; }

.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: var(--paper); }

.band-line-top { border-top: 1px solid var(--line-fine); }
.band-line-bottom { border-bottom: 1px solid var(--line-fine); }

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */

.eyebrow {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 26px;
}
.eyebrow--tight { letter-spacing: .2em; margin-bottom: 14px; }
.eyebrow--card {
  font-weight: 400;
  letter-spacing: .14em;
  margin: 18px 0 8px;
}
.eyebrow--light { color: var(--terra-light); }

.label {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 12px;
}
.label--sm { font-size: 10px; }

/* Lange Komposita wie "landwirtschaftliches" sprengen sonst schmale Displays.
   Die Silbentrennung greift ueber lang="de-CH" am html-Element. */
.h1, .h2, .h3, .h4 { hyphens: auto; }

.h1 {
  font: 200 64px/1.06 var(--font-display);
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.h1--sub { font-size: 56px; line-height: 1.1; letter-spacing: 0; }
.h1--legal { font-size: 52px; line-height: 1.1; letter-spacing: 0; }
.h1--detail { font-size: 50px; line-height: 1.12; letter-spacing: 0; max-width: 820px; }

.h2 {
  font: 200 44px/1.1 var(--font-display);
  margin: 0;
  text-wrap: balance;
}
.h2--md { font-size: 42px; line-height: 1.15; }
.h2--sm { font-size: 40px; line-height: 1.15; }
.h2--cta { font-size: 36px; line-height: 1.3; }
.h2--rail { font-size: 38px; line-height: 1.12; }
.h2--closing { font-size: 34px; line-height: 1.25; }

.h3 {
  font: 300 32px/1.25 var(--font-display);
  margin: 0 0 18px;
}
.h3--block { font-size: 26px; line-height: 1.3; margin-bottom: 22px; }
.h3--legal { font-size: 24px; line-height: 1.3; margin-bottom: 12px; }

.h4 { font: 400 21px/1.3 var(--font-display); margin: 0 0 12px; }
.h4--lg { font-size: 24px; line-height: 1.25; }
.h4--card { font-size: 20px; line-height: 1.3; margin-bottom: 8px; }

/* Akzentwort in den Ueberschriften */
.accent { font-weight: 500; }

.lead {
  font: 300 18px/1.75 var(--font-sans);
  color: var(--ink-70);
  margin: 0;
  max-width: 600px;
}
.lead--narrow { max-width: 440px; line-height: 1.7; }
.lead--sm { font-size: 17px; max-width: 560px; }

.body { font: 300 16px/1.8 var(--font-sans); color: var(--ink-72); margin: 0; }
.body--sm { font-size: 15px; line-height: 1.7; color: var(--ink-65); }
.body--xs { font-size: 14px; line-height: 1.65; color: var(--ink-60); }
.body--measure { max-width: 560px; line-height: 1.75; }

.mono {
  font: 400 13px/1.5 var(--font-mono);
  color: var(--ink-60);
}

/* Zeilenumbruch, der auf schmalen Displays entfaellt */
@media (max-width: 767px) {
  .u-br { display: none; }
}

/* --------------------------------------------------------------------------
   5. Kopfbereich: Stellen-Banner, Header, Navigation
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 243, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(36, 31, 27, .1);
}

.job-banner {
  display: block;
  background: var(--terra);
  color: #fff;
  transition: background var(--ease);
}
.job-banner:hover { background: var(--terra-hover); color: #fff; }

.job-banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 11px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.job-banner__text {
  font: 500 13px/1.4 var(--font-sans);
  margin: 0;
}
.job-banner__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  margin-right: 14px;
}
.job-banner__cta {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  padding-bottom: 3px;
  white-space: nowrap;
}
/* Kurzfassung fuer schmale Displays */
.job-banner__long { display: inline; }
.job-banner__short { display: none; }

.site-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo { display: block; line-height: 0; }
.site-logo img {
  height: 42px;
  width: auto;
  display: block;
  /* Das Logo liegt als Rastergrafik mit weissem Grund vor. Mit einem SVG entfaellt das. */
  mix-blend-mode: multiply;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
  font: 400 14px/1 var(--font-sans);
}
.nav__link {
  color: var(--ink-72);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--ease);
}
.nav__link:hover { color: var(--terra); }
.nav__link.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.nav__link.is-active:hover { color: var(--ink); }

.nav__cta {
  border: 1px solid var(--terra);
  color: var(--terra);
  padding: 11px 22px;
  border-radius: 2px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font: 500 12px/1 var(--font-sans);
  transition: background var(--ease), color var(--ease);
}
.nav__cta:hover { background: var(--terra); color: #fff; }

/* Burger, erscheint erst unter 900 px */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  padding: 24px;
  overflow-y: auto;
}
.nav-overlay.is-open { display: flex; flex-direction: column; }
body.has-overlay { overflow: hidden; }

.nav-overlay__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}
.nav-overlay__close {
  width: 44px; height: 44px;
  margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  font: 300 28px/1 var(--font-display);
  color: var(--ink);
}
.nav-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 32px;
}
.nav-overlay__list a {
  font: 300 28px/1.2 var(--font-display);
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-fine);
}
.nav-overlay__list a.is-active { color: var(--terra); }
.nav-overlay__foot {
  margin-top: auto;
  padding-top: 32px;
  font: 300 15px/1.9 var(--font-sans);
  color: var(--ink-65);
}

/* --------------------------------------------------------------------------
   6. Buttons, Links, Chips
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--terra);
  color: #fff;
  padding: 16px 30px;
  border: 0;
  border-radius: 2px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--ease);
}
.btn:hover { background: var(--terra-hover); color: #fff; }
.btn--nowrap { white-space: nowrap; }

.link-underline {
  display: inline-block;
  padding: 16px 22px;
  font: 400 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-link);
  transition: color var(--ease), border-color var(--ease);
}
.link-underline:hover { color: var(--terra); border-color: var(--terra); }

.link-terra {
  display: inline-block;
  font: 400 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--terra);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 4px;
  transition: opacity var(--ease);
}
.link-terra:hover { opacity: .75; color: var(--terra); }

.link-phone {
  font: 400 15px/1 var(--font-mono);
  color: var(--ink-70);
  transition: color var(--ease);
}
.link-phone:hover { color: var(--terra); }

.chip {
  border: 1px solid var(--line-chip);
  color: var(--ink-72);
  background: none;
  padding: 11px 20px;
  font: 400 13px/1 var(--font-sans);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active,
.chip[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.tag {
  border: 1px solid rgba(36, 31, 27, .2);
  padding: 10px 16px;
  font: 400 13px/1 var(--font-mono);
  color: var(--ink-65);
}

/* --------------------------------------------------------------------------
   7. Bilder und Platzhalter
   -------------------------------------------------------------------------- */

.media { display: block; width: 100%; object-fit: cover; }
.media--framed { border: 1px solid var(--line-fine); }

/* Fehlende Bilder werden beschriftet gezeigt, nicht kaschiert. */
.placeholder {
  background: repeating-linear-gradient(45deg, rgba(36, 31, 27, .06) 0 8px, transparent 8px 16px);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 11px/1.5 var(--font-mono);
  color: var(--ink-45);
  padding: 12px;
}

/* --------------------------------------------------------------------------
   8. Startseite
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 64px;
  padding: 92px 0;
}
.hero__lead { margin: 28px 0 38px; }
.hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero__figure { position: relative; margin: 0; }
.hero__figure img { height: 460px; }
.hero__caption {
  position: absolute;
  left: -32px;
  bottom: 28px;
  background: var(--paper);
  padding: 16px 22px;
  border-left: 2px solid var(--terra);
  font: 400 12px/1.6 var(--font-mono);
  color: rgba(36, 31, 27, .75);
}

.strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.strengths__item { padding: 48px 44px; border-right: 1px solid var(--line-fine); }
.strengths__item:first-child { padding-left: 0; }
.strengths__item:last-child { padding-right: 0; border-right: 0; }

.glyph {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--terra);
  margin-bottom: 26px;
}
.glyph--diamond { transform: rotate(45deg); }
.glyph--circle { border-radius: 50%; }

/* Phasen */
.phases {
  display: grid;
  grid-template-columns: .8fr 1.55fr;
  gap: 72px;
  padding: 88px 0;
  align-items: start;
}
.phases__rail { position: sticky; top: var(--header-offset); min-width: 0; }
.phases__rail .h2 { margin-bottom: 20px; }
.phases__rail .body--sm { margin-bottom: 26px; }
.phases__index { display: grid; min-width: 0; }
.phases__link {
  padding: 16px 0 16px 16px;
  font: 300 18px/1 var(--font-display);
  color: var(--ink-55);
  border-left: 2px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.phases__link:hover { color: var(--ink); border-left-color: var(--terra); }
.phases__link.is-active { color: var(--ink); border-left-color: var(--terra); }
.phases__link span { margin-left: 10px; }

.phase { scroll-margin-top: var(--header-offset); padding: 0 0 56px; }
.phase + .phase { padding-top: 56px; border-top: 1px solid var(--line); }
.phase .body { margin-bottom: 26px; }
.phase__img { height: 300px; margin-bottom: 24px; }
.phase__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.phase__specs div {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 400 13px/1.5 var(--font-mono);
  color: var(--ink-60);
}

/* Projektvorschau auf der Startseite */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.card { display: block; color: inherit; transition: opacity .18s ease; }
.card:hover { opacity: .82; color: inherit; }
.card__img, .card .placeholder { height: 220px; }
.card__title { font: 400 20px/1.3 var(--font-display); margin: 0 0 8px; }

/* CTA-Band */
.cta {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 80px 0;
}
.cta__actions {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

/* Stellen-Band in Tinte */
.job-band {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}
.job-band .h2 { margin-bottom: 18px; }
.job-band__lead {
  font: 300 17px/1.75 var(--font-sans);
  color: var(--paper-70);
  margin: 0;
  max-width: 560px;
}
.job-band__actions {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.job-band__mail { font: 400 14px/1 var(--font-mono); color: var(--terra-light); }
.job-band__mail:hover { color: #fff; }

/* --------------------------------------------------------------------------
   9. Projekte
   -------------------------------------------------------------------------- */

.page-head { padding: 72px 0 40px; border-bottom: 1px solid var(--line-fine); }
/* Abstand zwischen Titel und Lead. Steht der Titel allein, entfaellt er. */
.page-head .h1 { margin-bottom: 22px; }
.page-head .h1:last-child { margin-bottom: 0; }
.page-head--plain { border-bottom: 0; padding-bottom: 64px; max-width: 720px; }
.page-head--narrow { max-width: 620px; padding-bottom: 56px; }
.page-head--legal { max-width: 640px; padding-bottom: 44px; }
.page-head--legal .body { margin-top: 18px; }

.filters {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding: 48px 0 88px;
}
.project-card__img, .project-grid .placeholder { height: 300px; }
.project-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 20px 0 10px;
}
.project-card__meta .eyebrow,
.project-card__meta .status { margin: 0; }
.status {
  font: 400 11px/1 var(--font-mono);
  color: var(--ink-45);
}

.filter-empty {
  padding: 8px 0 88px;
  font: 300 16px/1.7 var(--font-sans);
  color: var(--ink-65);
}

/* Projektdetail */
.back-link {
  display: inline-block;
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-50);
  margin: 36px 0 0;
  transition: color var(--ease);
}
.back-link:hover { color: var(--terra); }

.detail-head { padding: 36px 0 44px; }

.detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
.detail-gallery > * { height: 420px; }
.detail-gallery img { height: 100%; }

.detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 72px 0 88px;
}
.detail-body h2 { font: 300 26px/1.3 var(--font-display); margin: 0 0 16px; }
.detail-body .body { margin-bottom: 36px; }
.detail-body .body:last-child { margin-bottom: 0; }

.services { margin: 0; padding: 0; list-style: none; }
.services__item { padding: 16px 0; border-top: 1px solid var(--line); }
.services__item:last-child { border-bottom: 1px solid var(--line); }
.services__title { font: 500 15px/1.4 var(--font-sans); margin: 0 0 5px; }
.services__desc { font: 300 14px/1.6 var(--font-sans); color: var(--ink-60); margin: 0; }

.next-project {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.next-project__title {
  font: 300 30px/1.2 var(--font-display);
  margin: 0;
}
.next-project__title a { color: var(--ink); transition: color var(--ease); }
.next-project__title a:hover { color: var(--terra); }

/* --------------------------------------------------------------------------
   10. Ueber uns
   -------------------------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 88px;
}
.about-split img { height: 400px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* Die beiden Porträtspalten sind deutlich schmaler als die Partnerkarte. Die
   Köpfe bleiben dadurch ruhig, die Bilder werden in ihrer echten Auflösung von
   256 px gezeigt statt hochgerechnet, und die Partnerkarte bekommt den Platz,
   den ihr Text braucht. */
.team-grid { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 32px; }
.team-grid .placeholder { height: 260px; }

/* Quadratisch angeschnitten, wie im Design-Guide vorgesehen. Der Anschnitt
   sitzt etwas höher, damit der Kopf nicht am oberen Rand klebt. */
.team-card__img {
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 270px;
  object-position: center 20%;
}
.team-card__name { font: 400 21px/1.3 var(--font-display); margin: 20px 0 6px; }
.team-card__role {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 12px;
}
.team-card__contact { font: 300 14px/1.8 var(--font-sans); color: var(--ink-65); margin: 0; }
.team-card__contact a { color: inherit; }
.team-card__contact a:hover { color: var(--terra); }

.partner-card {
  border: 1px solid var(--line-strong);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.partner-card h3 { font: 400 21px/1.35 var(--font-display); margin: 0 0 12px; }
.partner-card p { font: 300 14px/1.75 var(--font-sans); color: var(--ink-65); margin: 0 0 20px; }
.partner-card a {
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--terra);
  padding-bottom: 5px;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   11. Offene Stelle
   -------------------------------------------------------------------------- */

.job-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0 64px;
}
.job-hero .h1 { margin-bottom: 24px; }
.job-hero__lead { max-width: 520px; margin: 0 0 30px; }
.job-hero img { height: 420px; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  margin-bottom: 34px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.facts__item { padding: 16px 28px; border-right: 1px solid var(--line-fine); }
.facts__item:first-child { padding-left: 0; }
.facts__item:last-child { padding-right: 0; border-right: 0; }
.facts__label {
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 8px;
}
.facts__value { font: 400 15px/1 var(--font-sans); margin: 0; }

.job-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.job-actions .link-underline { padding: 16px 0; }

.job-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.marker-list { display: grid; gap: 14px; }
.marker-list li {
  display: flex;
  gap: 14px;
  font: 300 15px/1.6 var(--font-sans);
  color: rgba(36, 31, 27, .75);
}
.marker-list { list-style: none; padding: 0; margin: 0; }
.marker-list li::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--terra);
  flex: none;
  margin-top: 8px;
}
/* Offener Marker steht fuer "von Vorteil" */
.marker-list--optional li::before { background: none; border: 1px solid var(--terra); }

.job-columns .label--sm { margin-bottom: 14px; }
.marker-list--spaced { margin-bottom: 26px; }

.job-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 72px 0;
}

/* --------------------------------------------------------------------------
   12. Kontakt
   -------------------------------------------------------------------------- */

.contact-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  padding-bottom: 96px;
}

.topic-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; }

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { display: block; }
.field__label {
  display: block;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 9px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line-field);
  background: transparent;
  font: 300 16px/1 var(--font-sans);
  color: var(--ink);
  outline: none;
  transition: border-color var(--ease);
  border-radius: 0;
}
.field textarea { line-height: 1.6; resize: vertical; }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--terra); outline: none; }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

/* Hinweis, wenn JavaScript fehlt und das Formular deshalb nicht absenden kann */
.form-hinweis {
  border-left: 2px solid var(--terra);
  background: var(--sand);
  padding: 16px 20px;
  margin: 0 0 28px;
  font: 300 15px/1.7 var(--font-sans);
  color: var(--ink-72);
}
.form-hinweis a { color: var(--terra); }

/* Honigtopf gegen Spam, fuer Menschen unsichtbar */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__submit {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.form__note {
  font: 400 12px/1.5 var(--font-mono);
  color: var(--ink-45);
  margin: 0;
}
.form__note.is-success { color: var(--terra); }
.form__note.is-error { color: #a8342a; }

.info-block {
  border-top: 1px solid var(--line-strong);
  padding: 24px 0;
}
.info-block--last { border-bottom: 1px solid var(--line-strong); margin-bottom: 28px; }
.info-block p { font: 300 16px/1.75 var(--font-sans); margin: 0; }
.info-block a { color: var(--terra); }

/* Standortkarte als eigenes Bild aus der Landeskarte von swisstopo.
   Nichts wird von Dritten nachgeladen, der Klick oeffnet die Route. */
.map {
  display: block;
  position: relative;
  width: 100%;
  height: 240px;
  border: 1px solid var(--line-strong);
  background: var(--sand);
  overflow: hidden;
  transition: opacity var(--ease);
}
.map:hover { opacity: .88; }
.map picture, .map__bild { display: block; width: 100%; height: 100%; }
.map__bild { object-fit: cover; }
.map__hint {
  position: absolute;
  left: 14px; bottom: 12px;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: .06em;
  color: var(--ink-60);
  background: var(--paper);
  padding: 7px 11px;
}
/* Quellenangabe, von swisstopo fuer die Nutzung der Landeskarte verlangt */
.map__quelle {
  position: absolute;
  right: 0; bottom: 0;
  font: 400 10px/1 var(--font-mono);
  color: var(--ink-60);
  background: rgba(250, 247, 243, .85);
  padding: 4px 7px;
}

/* --------------------------------------------------------------------------
   12b. Seite nicht gefunden
   -------------------------------------------------------------------------- */

.notfound-links {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.notfound-note {
  margin: 40px 0 0;
  padding-bottom: 96px;
  max-width: 560px;
}
.notfound-note a { color: var(--terra); }

/* --------------------------------------------------------------------------
   13. Rechtliches
   -------------------------------------------------------------------------- */

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  gap: 56px 72px;
}
.legal-block { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.legal-block p { font: 300 16px/1.8 var(--font-sans); margin: 0; }
.legal-block p a { color: var(--terra); }
.legal-block--muted p { color: var(--ink-55); }

.legal-sections { display: grid; gap: 34px; max-width: 760px; }
.legal-note { font: 400 12px/1.7 var(--font-mono); color: var(--terra); margin: 0; }

/* --------------------------------------------------------------------------
   14. Design-Guide (intern)
   -------------------------------------------------------------------------- */

.guide-section {
  margin: 56px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
  font: 300 26px/1.3 var(--font-display);
}
.swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.swatch__chip { height: 96px; }
.swatch__chip--outline { border: 1px solid var(--line-strong); }
.swatch__chip--terra { background: var(--terra); }
.swatch__chip--terra-light { background: var(--terra-light); }
.swatch__chip--paper { background: var(--paper); }
.swatch__chip--sand { background: var(--sand); }
.swatch__chip--ink { background: var(--ink); }
.swatch__hex { font: 500 13px/1.5 var(--font-mono); margin: 10px 0 2px; }
.swatch__use { font: 300 13px/1.5 var(--font-sans); color: var(--ink-60); margin: 0; }
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.guide-cols--text {
  font: 300 15px/1.9 var(--font-sans);
  color: var(--ink-70);
}
.guide-samples { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 24px; }
.guide-caption { font: 400 12px/1 var(--font-mono); color: var(--ink-50); margin: 0 0 26px; }

/* Schriftmuster im Guide stehen dicht ueber ihrer Beschriftung */
.guide-specimen { margin-bottom: 6px; }
.guide-note { margin-top: 18px; margin-bottom: 24px; }
.guide-warn { color: var(--terra); }

/* Technische Begriffe im Fliesstext */
.mono-inline { font-family: var(--font-mono); font-size: .92em; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--paper); }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter) 36px;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.site-footer__mark {
  width: 28px; height: 28px;
  border: 1.5px solid var(--terra);
  transform: rotate(45deg);
  flex: none;
}
.site-footer__word {
  font: 300 18px/1 var(--font-display);
  letter-spacing: .28em;
  color: var(--terra);
}
.site-footer__claim {
  font: 300 14px/1.8 var(--font-sans);
  color: var(--paper-60);
  margin: 0;
  max-width: 300px;
}
.site-footer__nav {
  font: 300 14px/2.1 var(--font-sans);
  display: flex;
  flex-direction: column;
}
.site-footer__nav a { color: var(--paper-60); transition: color var(--ease); }
.site-footer__nav a:hover { color: var(--terra-light); }
.site-footer__nav a.is-highlight { color: var(--terra-light); }
.site-footer__text {
  font: 300 14px/1.9 var(--font-sans);
  color: var(--paper-60);
}
.site-footer__text a { color: var(--paper-60); }
.site-footer__text a:hover { color: var(--terra-light); }
.site-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.site-footer__copy {
  font: 300 12px/1.6 var(--font-sans);
  color: var(--paper-40);
  margin: 0;
}
.site-footer__copy a { color: var(--paper-40); transition: color var(--ease); }
.site-footer__copy a:hover { color: var(--terra-light); }
.site-footer__guide {
  font: 400 11px/1 var(--font-mono);
  color: var(--paper-35);
}
.site-footer__guide:hover { color: var(--terra-light); }

/* --------------------------------------------------------------------------
   16. Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet: dreispaltige Raster werden zweispaltig, Seitenrand 40 px */
@media (max-width: 1180px) {
  :root { --gutter: 40px; }

  .h1 { font-size: 54px; }
  .h1--sub { font-size: 48px; }
  .h1--legal, .h1--detail { font-size: 44px; }
  .h2 { font-size: 38px; }
  .h2--md, .h2--sm { font-size: 34px; }
  .h2--cta, .h2--rail { font-size: 32px; }

  .hero { gap: 48px; }
  .hero__caption { left: -20px; }
  .phases { gap: 48px; }
}

@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 0;
  }
  .hero__figure img { height: 380px; }
  .hero__caption { left: auto; right: 20px; bottom: 20px; }

  .strengths { grid-template-columns: repeat(2, 1fr); }
  .strengths__item { padding: 40px 32px; border-bottom: 1px solid var(--line-fine); }
  .strengths__item:nth-child(odd) { padding-left: 0; }
  .strengths__item:nth-child(even) { padding-right: 0; border-right: 0; }
  .strengths__item:last-child { border-bottom: 0; grid-column: 1 / -1; padding-right: 0; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card-grid > :last-child:nth-child(odd) .card__img,
  .card-grid > :last-child:nth-child(odd) .placeholder { height: 280px; }

  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-card { grid-column: 1 / -1; }
  .team-card__img { max-width: 260px; }

  .job-columns { grid-template-columns: 1fr 1fr; gap: 40px; }
  .job-columns > :last-child { grid-column: 1 / -1; }

  .about-split { grid-template-columns: 1fr; gap: 40px; }
  .about-split img { height: 320px; }

  .job-hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
  .job-hero img { height: 320px; }

  .contact-split { grid-template-columns: 1fr; gap: 48px; }

  .detail-body { grid-template-columns: 1fr; gap: 48px; padding: 56px 0 72px; }
  .detail-gallery { grid-template-columns: 1fr 1fr; }
  .detail-gallery > :first-child { grid-column: 1 / -1; }
  .detail-gallery > * { height: 300px; }

  .cta, .job-band { grid-template-columns: 1fr; gap: 32px; }
  .cta__actions, .job-band__actions { justify-content: flex-start; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}

/* Navigation als Burger-Menue.
   Nur wenn JavaScript laeuft, sonst bliebe die Seite ohne bedienbare Navigation. */
@media (max-width: 899px) {
  .js .nav { display: none; }
  .js .burger { display: block; }

  .nav { gap: 16px 20px; justify-content: flex-end; }
  .nav__cta { padding: 9px 16px; }

  .job-banner__long { display: none; }
  .job-banner__short { display: inline; }
  .job-banner__inner { padding-top: 10px; padding-bottom: 10px; }
  .job-banner__cta { font-size: 11px; }
}

/* Mobile: alles einspaltig */
@media (max-width: 767px) {
  :root { --gutter: 24px; --header-offset: 110px; }

  .h1, .h1--sub, .h1--legal, .h1--detail { font-size: 38px; line-height: 1.12; }
  .h2, .h2--md, .h2--sm, .h2--cta, .h2--rail, .h2--closing { font-size: 30px; line-height: 1.2; }
  .h3 { font-size: 26px; }
  .h3--block, .h3--legal { font-size: 22px; }
  .lead, .lead--sm { font-size: 16px; line-height: 1.7; }

  .hero { padding: 48px 0; gap: 36px; }
  .hero__figure img { height: 260px; }
  .hero__caption {
    position: static;
    margin-top: -1px;
    border-left: 2px solid var(--terra);
  }
  .hero__actions .btn,
  .hero__actions .link-underline { width: 100%; }

  .strengths { grid-template-columns: 1fr; }
  .strengths__item {
    padding: 36px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-fine);
  }
  .strengths__item:last-child { border-bottom: 0; }

  /* Phasen-Index wandert als waagrechte Liste ueber die Bloecke, ohne sticky */
  .phases { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .phases__rail { position: static; }
  .phases__index {
    display: flex;
    gap: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    overflow-x: auto;
  }
  .phases__link {
    border-left: 0;
    border-top: 2px solid transparent;
    padding: 14px 18px 14px 0;
    font-size: 16px;
    white-space: nowrap;
    margin-top: -1px;
  }
  .phases__link.is-active,
  .phases__link:hover { border-left: 0; border-top-color: var(--terra); }
  .phases__link span { margin-left: 6px; }
  .phase__img { height: 220px; }
  .phase__specs { grid-template-columns: 1fr; gap: 14px; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .card-grid, .project-grid, .team-grid, .job-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .card-grid > :last-child:nth-child(odd) .card__img,
  .card-grid > :last-child:nth-child(odd) .placeholder { height: 220px; }
  .project-card__img, .project-grid .placeholder { height: 240px; }
  .project-grid { padding: 40px 0 64px; }
  .job-columns > :last-child { grid-column: auto; }

  .detail-gallery { grid-template-columns: 1fr; }
  .detail-gallery > :first-child { grid-column: auto; }
  .detail-gallery > * { height: 240px; }
  .detail-head { padding: 24px 0 32px; }

  .next-project { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px var(--gutter); }
  .next-project__title { font-size: 24px; }

  /* Die Faktenzeile stapelt in zwei Spalten, sonst wird sie unlesbar */
  .facts { grid-template-columns: 1fr 1fr; }
  .facts__item { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line-fine); }
  .facts__item:nth-child(even) { padding-right: 0; border-right: 0; }
  .facts__item:nth-child(odd) { padding-left: 0; }
  .facts__item:nth-last-child(-n+2) { border-bottom: 0; }

  .job-actions .btn { width: 100%; }
  .job-closing { flex-direction: column; align-items: flex-start; gap: 24px; padding: 56px 0; }
  .job-closing .btn { width: 100%; }
  .job-band { padding: 56px var(--gutter); }

  .form__row { grid-template-columns: 1fr; }
  .form__submit .btn { width: 100%; }

  .about-split img { height: 240px; }
  .job-hero img { height: 240px; }
  .team-grid .placeholder { height: 260px; }
  .team-card__img { max-width: 240px; }

  .page-head { padding: 48px 0 32px; }
  .page-head--plain { padding-bottom: 40px; }

  .legal-grid { grid-template-columns: 1fr; gap: 36px; }
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-cols { grid-template-columns: 1fr; gap: 32px; }

  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__inner { padding: 48px var(--gutter) 32px; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; gap: 12px; }

  .cta { padding: 56px 0; }
}

/* Sehr schmale Geraete. Das Design endet bei 768 px, hier geht es weiter
   herunter, damit auch ein iPhone SE sauber bleibt. */
@media (max-width: 400px) {
  .h1, .h1--sub, .h1--legal, .h1--detail { font-size: 32px; }
  .h2, .h2--md, .h2--sm, .h2--cta, .h2--rail, .h2--closing { font-size: 27px; }

  /* Vier Eckdaten nebeneinander werden zu eng, sie stapeln */
  .facts { grid-template-columns: 1fr; }
  .facts__item {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-fine);
  }
  .facts__item:last-child { border-bottom: 0; }

  .job-banner__inner { gap: 14px; }
  .job-banner__eyebrow { display: block; margin: 0 0 6px; }
}

/* Druck: Navigation, Banner und Flaechen weglassen */
@media print {
  .site-head, .site-footer, .nav-overlay, .btn, .link-terra { display: none !important; }
  body { background: #fff; color: #000; }
  .section--sand, .section--ink { background: none !important; color: #000 !important; }
}