/* ==========================================================================
   HIRM & JURITSCH — Gestaltung
   Sichtbeton, Glas, Understatement. Schwarz, Beton, ein Signalgruen.
   Die Site laedt ausschliesslich eigene Ressourcen (CSP + Datenschutzaussage).
   ========================================================================== */

/* --- Schriften. Selbst gehostet, kein Google-Fonts-Request. -------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: 'Garamond Kursiv';
  src: url('../fonts/ebgaramond-italic-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

/* --- Marken-Token ------------------------------------------------------- */
/* Zwei Flaechen, ein Tokensatz. Wer eine Flaeche wechselt, setzt .flaeche-hell
   oder .flaeche-dunkel -- alles darunter zieht mit, ohne dass eine einzige
   Komponente zwei Fassungen braucht. */
:root {
  /* Marke. Signalgruen aus dem Brand-Konzept gemessen: #03FF74. */
  --signal-hell:    #03ff74;   /* auf dunklem Grund */
  --signal-dunkel:  #007533;   /* auf #e7e6e1 gemessen 4,68:1 -- AA */

  --kopfhoehe:      78px;
  --rahmen:         clamp(20px, 4.2vw, 72px);
  --spalte:         1560px;
  --takt:           clamp(72px, 9vw, 148px);

  --weich:          cubic-bezier(.22,.61,.36,1);
  --schnell:        160ms var(--weich);

  /* Feines Betonkorn ohne zusaetzliche Datei (CSP erlaubt img-src data:) */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Dunkle Flaeche -- Anthrazit, nicht Schwarz. Reines Schwarz wirkt hart und
   laesst die Betonfotos flach aussehen. */
:root, .flaeche-dunkel, .dunkel {
  --grund:        #17191b;
  --grund-2:      #1e2124;
  --grund-3:      #262a2d;
  --linie:        rgba(255,255,255,.10);
  --linie-stark:  rgba(255,255,255,.20);
  --text:         #e8eae9;
  --text-2:       #a4aaa6;
  --text-3:       #7a817c;
  --marke-farbe:  #ffffff;
  --signal:       var(--signal-hell);
  --signal-flaeche: var(--signal-hell);
  --signal-schrift: #0d0f0e;
}

/* Helle Flaeche -- Sichtbeton, leicht warm. */
.flaeche-hell, .hell {
  --grund:        #e7e6e1;
  --grund-2:      #dedcd6;
  --grund-3:      #d5d3cc;
  --linie:        rgba(23,25,27,.14);
  --linie-stark:  rgba(23,25,27,.30);
  --text:         #1a1c1b;
  --text-2:       #565a55;
  --text-3:       #6b6f68;
  --marke-farbe:  #17191b;
  --signal:       var(--signal-dunkel);
  --signal-flaeche: var(--signal-hell);
  --signal-schrift: #0d0f0e;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* Sprungmarken nicht unter den Kopf schieben */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Das UA-Stylesheet setzt [hidden]{display:none} ohne Klasse -- jede eigene
   display-Regel schlaegt das. Der Projektfilter arbeitet mit dem Attribut,
   also muss es hier gewinnen. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--signal-flaeche); color: var(--signal-schrift); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--signal); color: #000; padding: 12px 20px;
  font-weight: 700; letter-spacing: .04em;
}
.skip:focus { left: 0; }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rahmen);
}
.abschnitt { padding-block: var(--takt); position: relative; }
.abschnitt--eng { padding-block: calc(var(--takt) * .6); }

/* Flaechen. .hell und .dunkel setzen nur den Tokensatz und den Grund --
   jede Komponente darunter faerbt sich von selbst richtig. */
.hell, .dunkel { position: relative; background: var(--grund); color: var(--text); }
.hell::before, .dunkel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--korn);
}
.hell::before   { opacity: .42; mix-blend-mode: multiply; }
.dunkel::before { opacity: .30; mix-blend-mode: overlay; }
.hell > *, .dunkel > * { position: relative; }

/* Zwischenton: etwas heller als der Grund, fuer Abschnitte, die sich absetzen
   sollen, ohne gleich die Flaeche zu wechseln. */
.dunkel--tief { background: var(--grund-2); }

.linie { height: 1px; background: var(--linie); border: 0; margin: 0; }

/* --- Typografie --------------------------------------------------------- */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 clamp(20px, 2.4vw, 34px);
}
.kicker::before { content: ''; width: 34px; height: 1px; background: var(--signal); flex: none; }

h1, h2, h3, h4 {
  font-weight: 800;
  font-stretch: 112%;
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Rasterkinder duerfen schrumpfen. Ohne das ist ihre Mindestbreite die
   min-content-Breite -- ein Wort wie "Wirtschaftsingenieurwesen" schiebt dann
   die Spur auf, obwohl sie minmax(0,1fr) heisst. Genau daran hing ein
   45-px-Ueberlauf, der NUR in WebKit auftrat: Chromium trennte das Wort und
   kam damit knapp unter die Schirmbreite, Safari trennt es nicht. */
.kopfzeile > *, .leistung > *, .stelle > *, .hero__zeile > *,
.fuss__oben > *, .bildzeile > *, .raster > *, .paare > * { min-width: 0; }

/* Deutsche Komposita trennen -- aber nur dort, wo sie sonst ueber den Rand
   laufen. Auf dem Desktop sieht ein "Drei Diszipli-nen" schlecht aus.
   lang="de-AT" steht im <html>, damit die Trennstellen stimmen.
   Safari bringt fuer Deutsch nicht zuverlaessig ein Trennwoerterbuch mit --
   `overflow-wrap: anywhere` ist deshalb der Auffang, nicht die Kuer. */
@media (max-width: 980px) {
  h1, h2, h3, h4 {
    -webkit-hyphens: auto;
            hyphens: auto;
    overflow-wrap: anywhere;
  }
}

.titel-xl { font-size: clamp(34px, 5.6vw, 82px); }
/* 2026-10-29: Ueberschrift mit einem sehr langen Wort ("Verantwortungsbereich").
   In voller Groesse passt nicht einmal "Verantwortungs-" in die Spalte, und alle
   drei Engines brechen dann irgendwo im Wort. Etwas kleiner, und getrennt wird
   nur am weichen Trennzeichen, das im Text steht (data/leistungen.json). */
.titel-xl--lang { -webkit-hyphens: manual; hyphens: manual; }
/* Die Kopfzeile dazu laeuft ueber die volle Breite (.kopfzeile--breit), damit
   die Ueberschrift ihre normale Groesse behaelt; nur am Handy muss sie etwas
   kleiner werden, sonst passt das Wort nicht in 390 px. */
@media (max-width: 680px) { .titel-xl--lang { font-size: clamp(22px, 6.8vw, 34px); } }
.kopfzeile--breit > div:first-child { grid-column: 1 / -1; }
.kopfzeile--breit > .lauf { grid-column: 2; }
@media (max-width: 980px) { .kopfzeile--breit > .lauf { grid-column: auto; } }
.nobr { white-space: nowrap; }
/* Stellentitel: nur an der Wortfuge trennen (weiches Trennzeichen im Titel,
   data/jobs.json), nie "Bauprojektmanage-ment". */
.stelle h2 { -webkit-hyphens: manual; hyphens: manual; }
.titel-l  { font-size: clamp(27px, 3.4vw, 46px); }
.titel-m  { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.14; }

.lauf {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.lauf--gross { font-size: clamp(19px, 1.75vw, 27px); line-height: 1.48; color: var(--text); }
.lauf + .lauf { margin-top: 1em; }

.serif {
  font-family: 'Garamond Kursiv', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.signal { color: var(--signal); }

.nr {
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  color: var(--signal); font-variant-numeric: tabular-nums;
}

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background var(--schnell), border-color var(--schnell);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: var(--kopfhoehe);
}
/* Glas erst beim Scrollen — davor soll der Hero ungestoert stehen. */
.kopf.ist-gescrollt { background: rgba(23,25,27,.90); border-bottom-color: var(--linie); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf.ist-gescrollt {
    background: rgba(23,25,27,.62);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.marke { display: flex; align-items: center; gap: 14px; flex: none; }
.marke__wort { width: clamp(146px, 15vw, 210px); color: var(--marke-farbe); }
.marke__wort svg { width: 100%; height: auto; }
/* 2026-10-29: "Architekten · Baumeister · Zivilingenieure" ist laenger als die
   alte Zeile; zwischen 981 und 1279 px schob sie zusammen mit dem Menue den
   Kopf ueber den Rand. Erst ab 1366 px zeigen (in Firefox laeuft die Schrift etwas breiter). */
@media (max-width: 1365px) { .marke__zusatz { display: none; } }
.marke__zusatz {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); border-left: 1px solid var(--linie);
  padding-left: 12px; line-height: 1.35; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 34px); }
.nav a {
  font-size: 13px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
  padding: 6px 0; position: relative;
  transition: color var(--schnell);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--weich);
}
.nav a:hover, .nav a:focus-visible { color: var(--text); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--linie-stark); }

.kopf__rechts { display: flex; align-items: center; gap: 18px; }

/* --- Knoepfe ------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--linie-stark); background: transparent; color: inherit;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--schnell), border-color var(--schnell);
}
.knopf::before {
  content: ''; position: absolute; inset: 0; background: var(--signal-flaeche);
  transform: translateY(101%); transition: transform 320ms var(--weich); z-index: -1;
}
.knopf:hover, .knopf:focus-visible { color: var(--signal-schrift); border-color: var(--signal-flaeche); }
.knopf:hover::before, .knopf:focus-visible::before { transform: translateY(0); }
.knopf__pfeil { transition: transform 320ms var(--weich); }
.knopf:hover .knopf__pfeil { transform: translateX(4px); }

.knopf--voll { background: var(--signal-flaeche); color: var(--signal-schrift); border-color: var(--signal-flaeche); }
.knopf--voll::before { background: var(--text); }
.knopf--voll:hover, .knopf--voll:focus-visible { color: var(--grund); border-color: var(--text); }

.knopf--klein { padding: 10px 18px; font-size: 11.5px; }

.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); padding-bottom: 6px;
  border-bottom: 1px solid var(--linie-stark);
  transition: color var(--schnell), border-color var(--schnell), gap var(--schnell);
}
.link:hover, .link:focus-visible { color: var(--signal); border-color: var(--signal); gap: 16px; }

/* --- Menue fuer kleine Schirme ------------------------------------------ */
.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
  position: relative; z-index: 95;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--text); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1.5px;
  background: var(--text); transition: transform 280ms var(--weich);
}
.burger span::before { top: -7px; }
.burger span::after  { top:  7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

.mobilnav {
  position: fixed; inset: 0; z-index: 80;
  background: #17191b;
  padding: 100px var(--rahmen) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 460ms var(--weich), visibility 460ms;
  overflow-y: auto;
  visibility: hidden;
}
.mobilnav.ist-offen { transform: translateY(0); visibility: visible; }
.mobilnav__liste { display: flex; flex-direction: column; }
.mobilnav__liste a {
  font-size: clamp(28px, 8vw, 44px); font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.16;
  padding: 10px 0; border-bottom: 1px solid var(--linie);
  display: flex; align-items: baseline; gap: 16px; color: #e8eae9;
}
.mobilnav__liste a .nr { font-size: 11px; }
.mobilnav__fuss { padding-top: 32px; color: var(--text-2); font-size: 14px; }
.mobilnav__fuss a { display: block; padding: 5px 0; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* Der Kopf steht sticky IM Fluss und schoebe den Hero sonst um seine Hoehe
     nach unten -- 100svh plus Kopf ergibt dann mehr als einen Schirm, und die
     letzte Zeile des Claims faellt unter die Kante. Deshalb wird der Hero um
     die Kopfhoehe hochgezogen und bekommt sie als Innenabstand zurueck. */
  margin-top: calc(var(--kopfhoehe) * -1);
  /* 2026-10-29: obere Zeile (Gattung, Standorte, Subline) entfernt -- der
     Inhalt sitzt seither allein am unteren Rand. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--kopfhoehe) + clamp(24px, 3vw, 48px)) clamp(36px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }

.hero__unten { padding-top: 40px; }

.hero__bild { position: absolute; inset: 0; z-index: -3; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Schleier ueber dem Foto: der Beton soll durchkommen, aber die Wortmarke
   muss auf jedem Ausschnitt tragen. Werte gemessen, nicht geschaetzt --
   unter der Marke bleiben rund 12 % Helligkeit. */
.hero__schleier {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23,25,27,.62) 0%, rgba(23,25,27,.80) 46%,
                            rgba(23,25,27,.93) 78%, rgba(23,25,27,.985) 100%),
    radial-gradient(120% 90% at 22% 78%, rgba(23,25,27,.55) 0%, transparent 62%);
}
.hero__korn {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--korn); opacity: .22; mix-blend-mode: overlay;
}
.hero__signet {
  position: absolute; z-index: -1; pointer-events: none;
  right: -6vw; top: 50%; transform: translateY(-52%);
  /* 2026-10-29: um rund 30 % vergroessert (vorher 340px / 46vw / 780px). */
  width: clamp(440px, 60vw, 1020px);
  color: var(--text); opacity: .055;
}
.hero__signet svg { width: 100%; height: auto; }

.hero__wort { width: min(100%, 1240px); color: var(--marke-farbe); margin-bottom: clamp(26px, 3.4vw, 46px); }
.hero__wort svg { width: 100%; height: auto; }

.hero__zeile {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(28px, 4vw, 72px);
  align-items: end;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--linie);
}
.hero__claim {
  font-size: clamp(23px, 3.4vw, 50px);
  font-weight: 700; font-stretch: 108%; line-height: 1.06;
  letter-spacing: -.024em; margin: 0;
  max-width: 20ch;
}
.hero__claim em { font-style: normal; color: var(--signal); }
.hero__meta {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); text-align: right; white-space: nowrap;
}
.hero__meta strong { color: var(--text-2); font-weight: 500; }

/* Laufband der vier Saeulen */
/* 2026-08-19: um 20 % verkleinert. Alle Masse sind der frueheren Fassung
   mal 0,8 -- Schriftgrad, Innenabstaende und der Signalpunkt, sonst waechst
   der Balken optisch wieder. */
.saeulen { border-block: 1px solid var(--linie); overflow: hidden; padding-block: 16px; }
/* Steht er direkt unter einem Bildband, klebt er daran: die obere Linie
   waere dort eine zweite Kante auf der Bildunterkante. */
.band + .saeulen { border-top: 0; }
.saeulen__spur { display: flex; width: max-content; animation: laufband 46s linear infinite; }
.saeulen__spur span {
  font-size: clamp(17.6px, 2.56vw, 32px); font-weight: 800; font-stretch: 116%;
  text-transform: uppercase; letter-spacing: -.02em;
  padding-inline: clamp(16px, 2.08vw, 32px);
  display: flex; align-items: center; gap: clamp(16px, 2.08vw, 32px);
  color: var(--text); white-space: nowrap;
}
/* 2026-10-29: Die Satzpunkte hinter den Woertern sind weg (data/site.json),
   der gruene Trennpunkt bleibt -- laut Korrektur-PDF nur eine Sorte Punkte. */
.saeulen__spur span::after { content: ''; width: 6px; height: 6px; background: var(--signal); flex: none; }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .saeulen__spur { animation: none; } }

/* --- Bildband ----------------------------------------------------------- */
/* Ein Foto ueber die volle Breite, das den Rhythmus der Textabschnitte bricht.
   Kein Text darauf ausser dem optionalen kleinen Kennzeichner unten links. */
.band { position: relative; overflow: hidden; background: var(--grund-2); }
.band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band--breit { aspect-ratio: 21 / 9; }
.band--mittel { aspect-ratio: 16 / 9; }
.band--hoch  { aspect-ratio: 4 / 3; }
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,25,27,.30) 0%, transparent 26%,
                                      transparent 62%, rgba(23,25,27,.55) 100%);
}
.band__marke {
  position: absolute; left: var(--rahmen); bottom: clamp(18px, 2.4vw, 34px); z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.band__marke::before { content: ''; width: 26px; height: 1px; background: var(--signal-hell); }
@media (max-width: 680px) { .band--breit { aspect-ratio: 3 / 2; } }

/* Bild neben Text */
.bildzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.bildzeile__bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--grund-2); }
.bildzeile__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .bildzeile { grid-template-columns: minmax(0, 1fr); } }

/* --- Abschnittskopf ----------------------------------------------------- */
.kopfzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
  margin-bottom: clamp(44px, 5.5vw, 84px);
}

/* --- Leistungen --------------------------------------------------------- */
.leistungen { border-top: 1px solid var(--linie); }
.leistung {
  display: grid;
  grid-template-columns: 92px minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(36px, 4.4vw, 64px);
  border-bottom: 1px solid var(--linie);
  position: relative;
}
.leistung::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--weich);
}
.leistung:hover::before { transform: scaleX(1); }
.leistung__nr { padding-top: 8px; }
.leistung__titel { margin-bottom: 14px; }
.leistung__kurz { color: var(--text-2); font-size: 15.5px; line-height: 1.55; max-width: 34ch; }
.leistung__text { color: var(--text-2); margin: 0 0 24px; }
.leistung__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.leistung__punkte li {
  display: flex; gap: 14px; font-size: 14.5px; color: var(--text);
  padding-bottom: 9px; border-bottom: 1px solid var(--linie);
}
.leistung__punkte li::before {
  content: ''; width: 5px; height: 5px; background: var(--signal); flex: none; margin-top: 9px;
}

/* --- Raster ------------------------------------------------------------- */
.raster { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster__feld { background: var(--grund-2); padding: clamp(24px, 2.8vw, 44px); }
.raster__feld h3 { margin-bottom: 12px; }
.raster__feld p { color: var(--text-2); font-size: 15px; line-height: 1.58; margin: 0; }
/* Gefiltertes Raster (Projekte): bleiben Zellen leer, zeigt der Trick
   "Hintergrund = Linienfarbe" dort eine graue Flaeche. Deshalb hier die
   Linien an den Karten selbst, nicht am Raster. (Korrektur-PDF 2026-10-29) */
.raster--filter { background: transparent; border: 0; gap: 1px; }
.raster--filter > * { box-shadow: 0 0 0 1px var(--linie); }

/* Startseite: "Wir suchen laufend ..." anstelle der Stellenkarten. */
/* Die Kachel ist bewusst dunkel, auch auf heller Flaeche: der Schlusssatz
   soll im Signalgruen der Marke stehen (Wunsch 2026-10-29), und das ist nur
   auf Anthrazit lesbar -- auf Sichtbeton hat es 2,9:1 (docs/DESIGN.md). */
.laufend {
  background: #17191b; color: #e8eae9; border: 1px solid rgba(255,255,255,.12);
  padding: clamp(24px, 3vw, 44px);
  font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; line-height: 1.4;
  letter-spacing: -.01em; max-width: 62ch;
}
.laufend p { margin: 0; }
.laufend__schluss { margin-top: 18px !important; color: var(--signal-hell); }

/* Fliesstext-Link auf die Leistungen (Referenzen-Satz). */
.textlink { color: inherit; border-bottom: 1px solid var(--signal); transition: color var(--schnell); }
.textlink:hover { color: var(--signal); }

/* Projektkarte */
.projekt { background: var(--grund-2); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.projekt__bild {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(140deg, #1b1e1b 0%, #131513 55%, #0e100e 100%);
  display: grid; place-items: center;
}
.projekt__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--weich), filter 620ms var(--weich);
  filter: grayscale(1) contrast(1.06);
}
.projekt:hover .projekt__bild img { transform: scale(1.045); filter: grayscale(0) contrast(1); }
.projekt__leer {
  color: var(--text-3); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 20px;
}
.projekt__leer svg { width: 74px; opacity: .22; color: var(--text); }
.projekt__inhalt { padding: clamp(20px, 2.2vw, 30px); flex: 1; display: flex; flex-direction: column; }
.projekt__kat { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
.projekt__titel { margin-bottom: 12px; }
.projekt__kurz { font-size: 14.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 20px; flex: 1; }
.projekt__fuss {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}

/* Fahne oben rechts an der Projektkarte, z. B. "Neu | 2026" */
.projekt-fahne {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--signal-flaeche); color: var(--signal-schrift);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px;
}
.hinweisband {
  background: var(--signal-flaeche); color: var(--signal-schrift);
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  padding: 13px var(--rahmen); text-align: center;
}
.hinweisband strong { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* --- Anfrageformular ----------------------------------------------------- */
/* Nutzt dieselben Tokens wie der Rest -- das Formular soll nicht wie ein
   fremdes Plugin aussehen. Alle Klassen tragen das Praefix `af-`, damit sie
   sich nicht mit .kopf, .raster oder .kontakt-feld beissen. */
.af { max-width: 760px; margin-top: clamp(32px, 3.6vw, 56px); }
.af-felder {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-bottom: 20px;   /* sonst klebt das naechste Feld am Raster */
}
.af-feld { display: block; margin-bottom: 20px; }
.af-felder .af-feld { margin-bottom: 0; }
.af-feld > span {
  display: block; margin-bottom: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
}
.af-optional { font-style: normal; text-transform: none; letter-spacing: .02em; opacity: .7; }
.af-feld input, .af-feld textarea {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--grund-2); border: 1px solid var(--linie); border-radius: 0;
  transition: border-color var(--schnell), background var(--schnell);
}
.af-feld textarea { resize: vertical; min-height: 132px; line-height: 1.55; }
.af-feld input:focus-visible, .af-feld textarea:focus-visible {
  outline: none; border-color: var(--signal); background: var(--grund);
}

/* Honeypot: unsichtbar, aber bewusst NICHT display:none -- manche Bots
   pruefen genau das und lassen das Feld dann aus. */
.af-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.af-zustimmung {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 8px 0 26px; font-size: 14px; line-height: 1.55; color: var(--text-2);
}
.af-zustimmung input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--signal); }
.af-zustimmung a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.af-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
/* min-height haelt die Zeile frei, sonst springt das Layout, sobald die
   erste Meldung erscheint. */
.af-status { min-height: 1.4em; margin: 0; font-size: 14px; line-height: 1.4; }
.af-status.ist-ok { color: var(--signal); }
.af-status.ist-fehler { color: #ff6b6b; }
.flaeche-hell .af-status.ist-fehler, .hell .af-status.ist-fehler { color: #b4232a; }

/* Nach dem Senden bleibt nur die Dankesmeldung stehen. */
.af.ist-gesendet .af-felder,
.af.ist-gesendet .af-feld,
.af.ist-gesendet .af-zustimmung,
.af.ist-gesendet button[type="submit"] { display: none; }

@media (max-width: 680px) {
  .af-felder { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .af-feld { margin-bottom: 18px; }
}

/* Portraets im Team-Raster.
   ACHTUNG: nicht .kopf nennen -- so heisst bereits der Seitenkopf.
   Die Vorlagen sind nur 390 px breit, deshalb ist das Bild bei 190 px
   gedeckelt; groesser wird es unscharf. Graustufe wie bei den Projektkarten,
   Farbe erst beim Zeigen. */
.portraets {
  display: grid; gap: clamp(20px, 2.4vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  margin-top: clamp(32px, 3.6vw, 56px);
}
.portraet { margin: 0; }
.portraet__bild {
  aspect-ratio: 1; overflow: hidden; background: var(--grund-2);
  border: 1px solid var(--linie);
}
.portraet__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04);
  transition: transform 900ms var(--weich), filter 620ms var(--weich);
}
.portraet:hover .portraet__bild img { transform: scale(1.04); filter: grayscale(0) contrast(1); }
/* Noch ohne Foto: Kachel bleibt stehen, Kuerzel steht darunter. */
.portraet__leer {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3);
}
.portraet figcaption { padding-top: 14px; }
/* 2026-10-30: nicht fett, Groesse wie die Kartentexte (15 px). */
.portraet__name { font-size: 15px; font-weight: 400; margin: 0; }
/* Solange kein Name freigegeben ist -- bewusst zurueckhaltend, nicht als
   Fehler lesbar. */
.portraet__name--offen {
  color: var(--text-3); font-weight: 500;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.portraet__funktion { font-size: 13px; color: var(--text-2); margin: 4px 0 0; }

@media (max-width: 680px) {
  .portraets { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3.2vw, 44px); }
.filter button {
  padding: 9px 18px; font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--linie); color: var(--text-2);
  cursor: pointer; transition: background var(--schnell), border-color var(--schnell), color var(--schnell);
}
.filter button:hover { border-color: var(--linie-stark); color: var(--text); }
.filter button[aria-pressed="true"] { background: var(--signal-flaeche); border-color: var(--signal-flaeche); color: var(--signal-schrift); }

/* --- Wertepaare --------------------------------------------------------- */
.paare { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.paar { background: var(--grund-2); padding: clamp(24px, 2.6vw, 40px) clamp(18px, 2vw, 30px); text-align: center; }
.paar__a, .paar__b {
  font-size: clamp(15px, 1.7vw, 22px); font-weight: 800; font-stretch: 114%;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1;
}
/* 2026-10-29: das & fett und groesser, angelehnt an das & der Wortmarke. */
.paar__amp { color: var(--signal); font-weight: 800; font-size: clamp(17px, 1.9vw, 26px); padding-block: 4px; }

/* &-Zeichen im Fliesstext und in der Subline -- siehe amp() in build.py. */
/* Die &-Glyphe der Wortmarke im Fliesstext (siehe amp() in build.py): das
   SVG traegt die Form, der unsichtbare Text das Zeichen fuer Vorleser. */
/* 2026-10-30: Die Glyphe erbt die Textfarbe. Gruen (.amp--signal) nur dort,
   wo das & schon gruen war -- und dann immer das Signalgruen der Marke, auch
   auf heller Flaeche (Wunsch des Auftraggebers; die Kontrastregel aus
   DESIGN.md gilt hier nicht). In normalem Fliesstext steht sie etwas kleiner,
   damit die fette Logoform nicht heraussticht. */
/* 2026-10-30, zweite Runde: Die Logo-Glyphe ist von Natur aus fett und steht
   deshalb nur noch in den Wertepaaren (.paar__amp). Ueberall sonst traegt das &
   die Klasse .et: das aufrechte & der Archivo in Gewicht und Farbe des Textes
   -- auch in den Serifen-Zeilen, wo sonst das geschwungene Garamond-& stuende. */
.amp { position: relative; display: inline-block; color: inherit; font-style: normal; line-height: 0; }
.amp svg { height: .9em; width: auto; display: inline-block; vertical-align: -.02em; fill: currentColor; }
.amp--signal { color: var(--signal-hell); }
.amp__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* .et: dieselbe Logoform in duenner Fassung (tools/amp-light.py) fuer den
   Fliesstext -- Farbe wie der Text, gruen nur mit .et--signal. */
.et { position: relative; display: inline-block; color: inherit; font-style: normal; line-height: 0; }
.et svg { height: .68em; width: auto; display: inline-block; vertical-align: -.03em; fill: currentColor; }
.et--signal { color: var(--signal-hell); }

/* --- Akkordeon ---------------------------------------------------------- */
.faq-gruppe + .faq-gruppe { margin-top: clamp(44px, 5vw, 76px); }
.faq-gruppe__titel {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--signal); padding-bottom: 16px;
  border-bottom: 1px solid var(--linie);
}
.faq { border-bottom: 1px solid var(--linie); }
.faq__knopf {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: clamp(20px, 2.2vw, 28px) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(16px, 1.5vw, 21px); font-weight: 600; font-stretch: 106%;
  line-height: 1.32; letter-spacing: -.012em;
  transition: color var(--schnell);
}
.faq__knopf:hover { color: var(--signal); }
.faq__zeichen { flex: none; width: 18px; height: 18px; margin-top: 5px; position: relative; }
.faq__zeichen::before, .faq__zeichen::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform 320ms var(--weich), opacity 320ms var(--weich);
}
.faq__zeichen::before { left: 0; top: 8px; width: 18px; height: 1.5px; }
.faq__zeichen::after  { left: 8px; top: 0; width: 1.5px; height: 18px; }
.faq__knopf[aria-expanded="true"] { color: var(--signal); }
.faq__knopf[aria-expanded="true"] .faq__zeichen::after { transform: scaleY(0); opacity: 0; }
.faq__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--weich); }
.faq__inhalt > div { overflow: hidden; }
.faq[data-offen="ja"] .faq__inhalt { grid-template-rows: 1fr; }
.faq__text {
  color: var(--text-2); max-width: 74ch; font-size: 16px; line-height: 1.62;
  padding-bottom: clamp(22px, 2.4vw, 30px); margin: 0;
}

/* --- Stellen ------------------------------------------------------------ */
.stelle {
  border: 1px solid var(--linie); padding: clamp(26px, 3vw, 46px);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px, 3vw, 48px);
  transition: border-color var(--schnell);
}
.stelle + .stelle { margin-top: 20px; }
.stelle:hover { border-color: var(--linie-stark); }
.stelle__kopf {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px;
  align-items: start; padding-bottom: clamp(22px, 2.4vw, 32px); border-bottom: 1px solid var(--linie);
}
.stelle__marken { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.marke-chip {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--linie); padding: 5px 11px; color: var(--text-2);
}
.marke-chip--signal { border-color: var(--signal); color: var(--signal); }
.stelle__einleitung { color: var(--text-2); margin: 14px 0 0; max-width: 58ch; }
.stelle__spalte h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 16px;
}
.stelle__spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stelle__spalte li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.stelle__spalte li::before { content: ''; width: 4px; height: 4px; background: var(--signal); flex: none; margin-top: 9px; }
.stelle__gehalt {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
  padding-top: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--linie);
}
.stelle__gehalt-wert { font-size: clamp(18px, 2vw, 26px); font-weight: 800; font-stretch: 108%; }
.stelle__gehalt-zusatz { font-size: 13px; color: var(--text-3); max-width: 46ch; margin-top: 6px; }

/* --- Portal ------------------------------------------------------------- */
.portal-karte { background: var(--grund-2); padding: clamp(28px, 3.2vw, 52px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.portal-karte::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--weich);
}
.portal-karte:hover::after { transform: scaleX(1); }
.portal-karte__punkte { list-style: none; margin: 24px 0 32px; padding: 0; display: grid; gap: 11px; flex: 1; }
.portal-karte__punkte li {
  display: flex; gap: 13px; font-size: 14.5px; color: var(--text-2);
  padding-bottom: 11px; border-bottom: 1px solid var(--linie);
}
.portal-karte__punkte li::before { content: ''; width: 4px; height: 4px; background: var(--signal); flex: none; margin-top: 9px; }
.portal-karte__zugang { font-size: 12.5px; color: var(--text-3); margin: 0 0 24px; }

.anmeldung {
  max-width: 460px; margin-inline: auto;
  border: 1px solid var(--linie); padding: clamp(28px, 3.4vw, 48px);
  background: var(--grund-2);
}
.feld { margin-bottom: 20px; }
.feld label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 9px;
}
.feld input {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 15px;
  background: var(--grund-3); border: 1px solid var(--linie); color: var(--text);
  transition: border-color var(--schnell);
}
.feld input:focus { border-color: var(--signal); outline: none; }
.feld input::placeholder { color: var(--text-3); }
/* Solange das Portal nicht steht, muessen Feld und Schalter auch AUSSEHEN wie
   gesperrt -- ein leuchtend gruener Knopf, der nichts tut, ist eine Falle. */
.anmeldung input[disabled] { opacity: .5; cursor: not-allowed; }
.anmeldung .knopf[disabled] {
  background: transparent; color: var(--text-3);
  border-color: var(--linie); cursor: not-allowed;
}
.anmeldung .knopf[disabled]::before { display: none; }

.anmeldung__hinweis {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linie);
  font-size: 13px; color: var(--text-3); line-height: 1.55;
}
.gesperrt-band {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--signal); color: var(--signal);
  padding: 13px 18px; margin-bottom: 26px;
  font-size: 12.5px; letter-spacing: .05em; line-height: 1.4;
}
.gesperrt-band::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none;
  animation: pulsen 2.4s ease-out infinite;
}
@keyframes pulsen {
  0%   { box-shadow: 0 0 0 0 rgba(3,255,116,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(3,255,116,0); }
  100% { box-shadow: 0 0 0 0 rgba(3,255,116,0); }
}
@media (prefers-reduced-motion: reduce) { .gesperrt-band::before { animation: none; } }

/* --- Kontakt ------------------------------------------------------------ */
.kontakt-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
}
.kontakt-feld { background: var(--grund-2); padding: clamp(24px, 2.6vw, 38px); }
.kontakt-feld__label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 14px;
}
.kontakt-feld__wert { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; }
.kontakt-feld__wert a { border-bottom: 1px solid var(--linie-stark); transition: color var(--schnell), border-color var(--schnell); }
.kontakt-feld__wert a:hover { color: var(--signal); border-color: var(--signal); }

/* --- Aufruf ------------------------------------------------------------- */
.aufruf { text-align: center; }
.aufruf .lauf { margin-inline: auto; }
.aufruf__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(28px, 3.2vw, 44px); }

/* --- Fuss --------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--linie); background: var(--grund-2); color: var(--text); }
.fuss__oben {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  padding-block: clamp(48px, 5.5vw, 84px);
}
.fuss__wort { width: clamp(180px, 20vw, 260px); color: var(--marke-farbe); margin-bottom: 20px; }
.fuss h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 18px;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss a { font-size: 14.5px; color: var(--text-2); transition: color var(--schnell); }
.fuss a:hover { color: var(--signal); }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between;
  padding-block: 24px; border-top: 1px solid var(--linie);
  font-size: 12px; color: var(--text-3); letter-spacing: .05em;
}
.fuss__unten nav { display: flex; gap: 24px; flex-wrap: wrap; }
.fuss__gross {
  padding-block: clamp(20px, 3vw, 40px) clamp(28px, 3.6vw, 52px);
  border-top: 1px solid var(--linie);
  color: var(--marke-farbe); opacity: .10;
}
.fuss__gross svg { width: 100%; height: auto; }

/* --- Einblenden beim Scrollen ------------------------------------------- */
.auf { opacity: 0; transform: translateY(22px); }
.auf.ist-da { opacity: 1; transform: none; transition: opacity 760ms var(--weich), transform 760ms var(--weich); }
@media (prefers-reduced-motion: reduce) {
  .auf { opacity: 1; transform: none; }
  .auf.ist-da { transition: none; }
}

/* --- Fliesstext-Seiten -------------------------------------------------- */
.text-seite { max-width: 78ch; }
.text-seite h2 { font-size: clamp(20px, 2vw, 27px); margin: clamp(38px, 4vw, 56px) 0 16px; }
.text-seite h3 { font-size: 17px; margin: 28px 0 10px; }
.text-seite p, .text-seite li { color: var(--text-2); font-size: 16px; line-height: 1.66; }
.text-seite ul { padding-left: 20px; }
.text-seite a { color: var(--signal); border-bottom: 1px solid currentColor; }

/* --- Bruchstellen ------------------------------------------------------- */
@media (max-width: 1180px) {
  .fuss__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav, .kopf__rechts .knopf { display: none; }
  .burger { display: flex; }
  .kopfzeile { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .leistung { grid-template-columns: 60px minmax(0, 1fr); }
  .leistung__rechts { grid-column: 2; }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__zeile { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__meta { text-align: left; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .raster--2, .raster--3 { grid-template-columns: minmax(0, 1fr); }
  .stelle, .stelle__kopf { grid-template-columns: minmax(0, 1fr); }
  .leistung { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .leistung__nr { padding-top: 0; }
  .fuss__oben { grid-template-columns: minmax(0, 1fr); }
  .marke__zusatz { display: none; }
  .hero__signet { right: -22vw; opacity: .04; }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .kopf, .mobilnav, .burger, .hero__signet, .fuss__gross, .saeulen { display: none !important; }
  body { background: #fff; color: #000; }
}