/* ===========================================================================
   Isenmann-Bau · Fischbachau

   Gestaltungsgedanke: Ein Baugeschäft lebt vom Bauplan. Deshalb tragen feine
   Linien, Bemaßungen und ein technisches Raster die Seite - nicht Kästchen
   und Farbflächen. Orange ist die Signalfarbe der Baustelle und bleibt der
   einzige Akzent, alles andere ist Anthrazit, Papierweiß und Betongrau.

   Aufbau:  1 Grundlagen · 2 Typografie · 3 Bemaßung (Signaturelement)
            4 Kopf · 5 Bühne · 6 Abschnitte · 7 Bausteine · 8 Fuß · 9 Schmal
   Schriften liegen lokal, es wird kein fremder Server aufgerufen.
   =========================================================================== */

/* --- 1 Grundlagen --------------------------------------------------------- */
@font-face { font-family: 'Manrope'; font-weight: 300; font-style: normal;
  font-display: swap; src: url(../schriften/manrope-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-style: normal;
  font-display: swap; src: url(../schriften/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-style: normal;
  font-display: swap; src: url(../schriften/manrope-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-style: normal;
  font-display: swap; src: url(../schriften/manrope-latin-600-normal.woff2) format('woff2'); }

:root {
  /* Farben */
  --signal: #f07d00;          /* Baustellen-Orange, einziger Akzent */
  --signal-tief: #c96700;
  --tinte: #1c2226;           /* Anthrazit, trägt Überschriften und dunkle Bänder */
  --tinte-weich: #4d565d;     /* Fließtext */
  --papier: #ffffff;
  --papier-warm: #f6f5f2;     /* Bauplanpapier */
  --beton: #dcd9d4;
  --linie: #e4e2de;

  /* Takt: alle Abstände sind Vielfache davon */
  --takt: 8px;
  /* Jeder orange Strich ist gleich stark - Maßmarke, Listenmarke, Unterstrich
     im Menü, Kante an der Kachel. Vorher standen 1, 2 und 3 px durcheinander. */
  --strich: 2px;
  --band: clamp(56px, 7vw, 104px);      /* Luft zwischen den Bändern */
  --breite: 1280px;
  --schmal: 66ch;
  --rand: clamp(20px, 4vw, 40px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(16.5px, 1.02vw, 18px);
  line-height: 1.75;
  font-weight: 400;
  color: var(--tinte-weich);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-tief); }

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

.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ueberspringen {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: #fff; padding: 12px 20px; text-decoration: none;
}
.ueberspringen:focus { left: 0; }

.mitte { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* --- 2 Typografie --------------------------------------------------------- */
h1, h2, h3, .schild {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--tinte);
  margin: 0;
  text-wrap: balance;
}
/* Grosse Grade in leichtem Schnitt und eng gesetzt - das wirkt ruhiger als
   fette Versalien und laesst den Zeilen Raum zum Atmen. */
h1 {
  font-weight: 300; font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.1; letter-spacing: -.022em;
}
h2 {
  font-weight: 300; font-size: clamp(26px, 3vw, 38px);
  line-height: 1.16; letter-spacing: -.018em;
}
h3 { font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -.006em; }

/* Abstände im Textfluss. Der Vorlauf ist grösser als der Nachlauf, damit eine
   Überschrift zu dem gehört, was unter ihr steht. */
main h1 { margin-bottom: calc(var(--takt) * 3); }
main h2 { margin: calc(var(--takt) * 7) 0 calc(var(--takt) * 2.5); }
main h3 { margin: calc(var(--takt) * 4) 0 calc(var(--takt) * 1.5); }
main > section > .mitte > *:first-child,
.seitenkopf h1 { margin-top: 0; }
.gespann .wort > h2:first-child { margin-top: 0; }

/* Kleines technisches Schild über den Überschriften - benennt den Bereich,
   so wie ein Plankopf das Blatt benennt. */
.schild {
  display: block;
  font-weight: 500; font-size: 12.5px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--signal);
  margin-bottom: calc(var(--takt) * 1.5);
}

p, ul, ol { margin: 0 0 calc(var(--takt) * 2); max-width: var(--schmal); }
ul, ol { padding-left: 20px; }
li { margin-bottom: calc(var(--takt) * .5); }
strong { font-weight: 600; color: var(--tinte); }

.vorspann { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: var(--tinte); }

/* --- 3 Bemaßung: das Signaturelement -------------------------------------- */
/* Eine Maßlinie mit Endmarken, wie sie in Bauzeichnungen Längen angibt.
   Sie gliedert Überschriften und ersetzt Rahmen und Trennstriche. */
.mass {
  position: relative;
  padding-left: calc(var(--takt) * 3.5);
}
.mass::before {
  content: ''; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: var(--strich); background: var(--signal);
}
.mass::after {
  content: ''; position: absolute; left: -3px; width: 8px; height: var(--strich);
  top: .12em; background: var(--signal);
}

/* Waagerechte Maßlinie als Abschnittstrenner */
.masslinie {
  display: flex; align-items: center; gap: calc(var(--takt) * 2);
  margin-bottom: calc(var(--takt) * 4);
}
.masslinie::after {
  content: ''; flex: 1; height: 1px; background: var(--linie);
  position: relative;
}

/* --- 4 Kopf --------------------------------------------------------------- */
.kopfhuelle {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(1.5) blur(10px);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: var(--strich) solid var(--signal);
  transition: box-shadow .3s ease;
}
.kopfhuelle.geschrumpft { box-shadow: 0 1px 20px rgba(28,34,38,.07); }

/* Eine Zeile: Logo, Navigation, Telefon - wie auf den anderen Seiten.
   Die orange Linie liegt jetzt unter der ganzen Leiste, nicht mehr nur
   unter dem Logo. */
header {
  max-width: var(--breite); margin-inline: auto;
  padding: calc(var(--takt) * 1.5) var(--rand);
  display: flex; align-items: center; gap: clamp(18px, 3vw, 46px);
  position: relative;
  transition: padding .3s ease;
}
.geschrumpft header { padding-block: calc(var(--takt) * 0.75); }
.logo { display: block; flex: none; }
.logo img { height: clamp(56px, 6vw, 82px); width: auto; transition: height .3s ease; }
.geschrumpft .logo img { height: 50px; }

.menuknopf {
  display: none; width: 46px; height: 40px; padding: 8px; flex: none;
  background: none; border: 0; cursor: pointer;
}
.menuknopf span:not(.verborgen) {
  display: block; height: 2px; background: var(--tinte); margin: 5px 0;
  transition: transform .25s ease, opacity .2s ease;
}
.menuknopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menuknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menuknopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav.haupt { margin-top: 0; }
nav.haupt ul { list-style: none; margin: 0; padding: 0; }
/* max-width: none - die globale Regel 'ul { max-width: 66ch }' schnuerte die
   Navigation ein und liess sie bei groesserer Schrift umbrechen. */
nav.haupt > ul { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 2.5vw, 38px); max-width: none; }
nav.haupt > ul > li { position: relative; }
nav.haupt > ul > li > a {
  display: block; padding: 13px 0 15px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(16.5px, 1.25vw, 19px); font-weight: 500;
  letter-spacing: .002em; white-space: nowrap;
  color: var(--tinte); text-decoration: none;
  position: relative;
}
/* Der Unterstrich wächst aus der Mitte - eine Bewegung, kein Ein/Aus */
nav.haupt > ul > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: var(--strich);
  background: var(--signal); transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
nav.haupt > ul > li > a:hover::after,
nav.haupt > ul > li.aktiv > a::after { transform: scaleX(1); }
nav.haupt > ul > li.aktiv > a { color: var(--signal); }

ul.unter {
  position: absolute; left: -18px; top: 100%; z-index: 30;
  min-width: 250px; padding: calc(var(--takt) * 1.5) 0;
  background: var(--papier); border: 1px solid var(--linie);
  box-shadow: 0 18px 44px rgba(28,34,38,.14);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
nav.haupt > ul > li:hover > ul.unter,
nav.haupt > ul > li:focus-within > ul.unter { opacity: 1; visibility: visible; transform: none; }
ul.unter a {
  display: block; padding: 9px 20px; font-size: 16.5px;
  color: var(--tinte-weich); text-decoration: none;
  border-left: var(--strich) solid transparent; transition: all .18s ease;
}
ul.unter a:hover, ul.unter li.aktiv > a {
  border-left-color: var(--signal); background: var(--papier-warm); color: var(--tinte);
}

/* --- 5 Bühne mit Ken-Burns ------------------------------------------------ */
.buehne { position: relative; width: 100%; background: var(--tinte); overflow: hidden; }
.folien { position: relative; aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .folien { aspect-ratio: 3 / 2; } }
@media (max-width: 560px) { .folien { aspect-ratio: 4 / 5; } }

.folien figure { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.folien figure.aktiv { opacity: 1; pointer-events: auto; transition: opacity .9s ease; }
.folien picture { position: absolute; inset: 0; }
.folien img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.06);
}
/* Ken Burns: das aktive Bild wandert langsam. Richtung wechselt, damit die
   Folge nicht mechanisch wirkt. */
.folien figure.aktiv img { animation: wandern 13s ease-out forwards; }
.folien figure.aktiv:nth-child(even) img { animation-name: wandern-gegen; }
@keyframes wandern {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.15) translate3d(-1.8%, -1.4%, 0); }
}
@keyframes wandern-gegen {
  from { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .folien figure.aktiv img { animation: none; transform: scale(1.02); }
}

/* dunkler Verlauf, damit die Schrift auf jedem Bild steht */
.buehne::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(102deg, rgba(18,22,25,.82) 0%, rgba(18,22,25,.46) 42%,
                                       rgba(18,22,25,.06) 72%);
}

.folien figcaption {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 12%;
  padding-inline: var(--rand);
  max-width: var(--breite); margin-inline: auto;
}
@media (min-width: 1181px) {
  .folien figcaption { left: 50%; transform: translateX(-50%); width: var(--breite); }
}
.folien .titel {
  display: block;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 300; font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.06; letter-spacing: -.024em;
  color: #fff; max-width: 15ch;
}
.folien .unter {
  display: block; margin-top: calc(var(--takt) * 1.5);
  padding-left: calc(var(--takt) * 2);
  border-left: var(--strich) solid var(--signal);
  font-size: clamp(16px, 1.5vw, 20px); color: rgba(255,255,255,.9); max-width: 44ch;
}
/* Beim Folienwechsel setzt die Schrift neu an */
.folien figure.aktiv .titel { animation: heben .8s .12s cubic-bezier(.22,.61,.36,1) backwards; }
.folien figure.aktiv .unter { animation: heben .8s .26s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes heben { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .folien figure.aktiv .titel, .folien figure.aktiv .unter { animation: none; }
}

.pfeil {
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 20px; cursor: pointer;
  transition: background .22s ease, border-color .22s ease;
}
.pfeil:hover { background: var(--signal); border-color: var(--signal); }
.pfeil.vor { left: calc(var(--rand) / 2); }
.pfeil.zurueck { right: calc(var(--rand) / 2); }
@media (max-width: 700px) { .pfeil { display: none; } }

/* Fortschritt als Maßband statt Punkten */
.punkte {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(var(--takt) * 3);
  display: flex; justify-content: center; gap: 6px;
  padding-inline: var(--rand);
}
.punkte button {
  width: 34px; height: var(--strich); padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.32); transition: background .25s ease;
}
.punkte button:hover { background: rgba(255,255,255,.7); }
.punkte button.aktiv { background: var(--signal); }

/* --- 6 Abschnitte --------------------------------------------------------- */
main { padding: 0; }
.band { padding-block: var(--band); }
.band + .band { padding-top: 0; }
.band.getoent { background: var(--papier-warm); border-block: 1px solid var(--linie); }
.band.getoent + .band { padding-top: var(--band); }
.band.dunkel { background: var(--tinte); color: rgba(255,255,255,.76); }
.band.dunkel h2, .band.dunkel h3 { color: #fff; }
.band.dunkel .schild { color: var(--signal); }

.seitenkopf {
  padding-block: clamp(38px, 5vw, 68px) clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--linie);
  background:
    linear-gradient(var(--papier-warm), var(--papier-warm)) padding-box,
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(28,34,38,.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(28,34,38,.05) 23px 24px);
}
.seitenkopf h1 { max-width: 18ch; }
.seitenkopf .schild { margin-bottom: calc(var(--takt) * 1.25); }

/* --- 7 Bausteine ---------------------------------------------------------- */
/* Text und Bild nebeneinander */
.gespann {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
}
.gespann .bildseite figure { margin: 0; }
.gespann .bildseite figcaption {
  margin-top: calc(var(--takt) * 1.5);
  font-size: 15px; line-height: 1.5; color: #8a8f94;
}
.gespann .wort > *:first-child { margin-top: 0; }
/* Bei langen Texten (Bauleitung, Infos) endete das Bild nach einem Viertel der
   Seite, darunter blieb die halbe Spalte leer. Jetzt begleitet es den Text. */
@media (min-width: 901px) {
  .gespann .bildseite { position: sticky; top: calc(var(--takt) * 14); }
}

/* Partnerlogos auf '/links/': eine Reihe, ohne Foto-Schatten. */
.partner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--takt) * 3) calc(var(--takt) * 6);
}
.partner figure { margin: 0; }
.partner img { box-shadow: none; width: auto; max-height: 150px; }

figure { margin: calc(var(--takt) * 4) 0; }
figure img {
  max-width: min(100%, var(--eigenbreite, 100%));
  box-shadow: 0 1px 2px rgba(28,34,38,.07), 0 18px 40px rgba(28,34,38,.10);
}

/* Arbeitsbereiche */
.raster {
  display: grid; gap: calc(var(--takt) * 2.5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.kachel {
  position: relative; display: block; overflow: hidden;
  background: var(--tinte); color: #fff; text-decoration: none;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.kachel:hover, .kachel:focus-visible {
  transform: translateY(-4px); box-shadow: 0 18px 44px rgba(28,34,38,.22);
}
.kachel .foto { display: block; aspect-ratio: 5 / 4; }
.kachel .foto picture { width: 100%; height: 100%; }
.kachel img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: grayscale(.32) contrast(1.04);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.kachel:hover img, .kachel:focus-visible img { transform: scale(1.07); filter: grayscale(0); }
.kachel .beschriftung {
  position: absolute; inset: auto 0 0 0; padding: 56px 22px 20px;
  background: linear-gradient(to top, rgba(18,22,25,.92) 22%, rgba(18,22,25,0));
}
.kachel .name {
  display: block; font-family: 'Manrope', system-ui, sans-serif; font-weight: 600;
  font-size: 22px; letter-spacing: -.012em;
}
.kachel .satz { display: block; margin-top: 2px; font-size: 16px; color: rgba(255,255,255,.82); }
.kachel::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: var(--strich); width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.kachel:hover::after, .kachel:focus-visible::after { transform: scaleX(1); }

/* Aufruf zur Kontaktaufnahme */
.aufruf .innen {
  display: flex; flex-wrap: wrap; gap: calc(var(--takt) * 3) calc(var(--takt) * 6);
  align-items: center; justify-content: space-between;
}
.aufruf .gross { margin: 0; font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 300; font-size: clamp(25px, 2.9vw, 36px);
  color: #fff; line-height: 1.14; letter-spacing: -.018em; }
.aufruf .klein { margin: 8px 0 0; max-width: 46ch; }
.wege { display: flex; flex-wrap: wrap; gap: calc(var(--takt) * 1.5); }

.knopf {
  display: inline-block; padding: 14px 30px;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: .01em;
  background: var(--signal); color: #fff; text-decoration: none;
  transition: background .22s ease, transform .12s ease;
}
.knopf:hover { background: var(--signal-tief); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf.hohl { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.knopf.hohl:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px #fff; }

/* Referenzen zum Ausklappen */
.ausklapp { border-top: 1px solid var(--linie); max-width: 100%; }
.punkt { border-bottom: 1px solid var(--linie); }
.punkt > button {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 20px 4px; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--tinte);
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -.008em;
  transition: color .2s ease, padding-left .25s ease;
}
.punkt > button:hover { color: var(--signal); padding-left: 10px; }
.punkt > button[aria-expanded="true"] { color: var(--signal); }
.zeichen { position: relative; width: 15px; height: 15px; flex: none; }
.zeichen::before, .zeichen::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.zeichen::before { left: 0; top: 6.5px; width: 15px; height: 2px; }
.zeichen::after { left: 6.5px; top: 0; width: 2px; height: 15px; }
.punkt > button[aria-expanded="true"] .zeichen::after { transform: scaleY(0); }
.punkt .inhalt { padding: 0 4px 26px; }

.galerie {
  display: grid; gap: calc(var(--takt) * 1.5); margin-top: calc(var(--takt) * 2);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.galerie .bild { display: block; overflow: hidden; position: relative; }
.galerie picture { width: 100%; height: 100%; }
.galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; max-width: none;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.galerie .bild:hover img { transform: scale(1.06); }
.galerie .bild::after {
  content: ''; position: absolute; inset: 0; background: rgba(240,125,0,0);
  transition: background .3s ease;
}
.galerie .bild:hover::after { background: rgba(240,125,0,.14); }

/* Dokument */
.dokument {
  display: inline-flex; align-items: center; gap: 24px;
  padding: 20px 30px 20px 20px; background: var(--papier);
  border: 1px solid var(--linie); text-decoration: none; color: var(--tinte-weich);
  max-width: 560px;
  transition: border-color .25s ease, box-shadow .3s ease, transform .25s ease;
}
.dokument:hover {
  border-color: var(--signal); transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(28,34,38,.12); color: var(--tinte-weich);
}
.dokument .blatt { flex: none; width: 92px; }
.dokument img { border: 1px solid var(--linie); }
.dokument .name {
  display: block; font-family: 'Manrope', system-ui, sans-serif; font-weight: 600;
  font-size: 20px; color: var(--tinte);
}
.dokument:hover .name { color: var(--signal); }
.dokument .klein { display: block; font-size: 15px; margin-top: 3px; }

/* Formular */
form { max-width: 720px; }
form label { display: block; margin-bottom: calc(var(--takt) * 2.5); font-size: 16px; }
.reihe { display: flex; gap: calc(var(--takt) * 2.5); flex-wrap: wrap; }
.reihe label { flex: 1 1 220px; }
form input, form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 13px 14px;
  border: 0; border-bottom: 2px solid var(--linie); background: var(--papier-warm);
  font: inherit; font-size: 17px; color: var(--tinte);
  transition: border-color .22s ease, background .22s ease;
}
form input:focus, form textarea:focus {
  outline: none; border-bottom-color: var(--signal); background: #fff;
}
form textarea { resize: vertical; min-height: 160px; }
.pflicht { color: var(--signal); }
.falle { position: absolute !important; left: -9999px !important; }
form button {
  border: 0; background: var(--signal); color: #fff; cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: .01em; padding: 15px 38px;
  transition: background .22s ease, transform .12s ease;
}
form button:hover { background: var(--signal-tief); }
form button[disabled] { background: var(--beton); cursor: default; }
.hinweis { font-size: 14.5px; line-height: 1.6; color: #8a8f94; margin-bottom: calc(var(--takt) * 3); }
.meldung { margin-top: calc(var(--takt) * 2); min-height: 1.4em; }
.meldung.gut { color: #2c7a3f; } .meldung.schlecht { color: #b3372c; }

/* Bild groß anzeigen */
.leuchtkasten {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(16,19,22,.95); animation: auftauchen .25s ease;
}
.leuchtkasten[hidden] { display: none; }
@keyframes auftauchen { from { opacity: 0 } to { opacity: 1 } }
.leuchtkasten figure { margin: 0; }
.leuchtkasten img { max-width: 100%; max-height: 82vh; width: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.leuchtkasten figcaption {
  color: #dfe2e4; text-align: center; margin-top: 16px; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
}
.leuchtkasten .zu, .leuchtkasten .blaettern {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer; transition: background .22s ease;
}
.leuchtkasten .zu { top: 16px; right: 18px; width: 46px; height: 46px; font-size: 28px; }
.leuchtkasten .blaettern { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 20px; }
.leuchtkasten .zu:hover, .leuchtkasten .blaettern:hover { background: var(--signal); border-color: var(--signal); }
.leuchtkasten .vor { left: 14px; } .leuchtkasten .zurueck { right: 14px; }

/* Einblenden beim Scrollen (Klasse setzt erst das Skript) */
.blende { opacity: 0; transform: translateY(22px); }
.blende.da { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .blende, .blende.da { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 8 Fuß ---------------------------------------------------------------- */
footer { background: var(--tinte); color: rgba(255,255,255,.66); }
footer .innen {
  display: flex; flex-wrap: wrap; gap: calc(var(--takt) * 4) calc(var(--takt) * 8);
  justify-content: space-between; padding-block: calc(var(--takt) * 6) calc(var(--takt) * 4);
}
footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
footer nav a {
  color: rgba(255,255,255,.8); text-decoration: none;
  font-family: 'Manrope', system-ui, sans-serif; font-size: 16px;
  letter-spacing: .002em;
}
footer nav a:hover { color: var(--signal); }
footer .kontakt p { margin: 0 0 4px; max-width: none; }
footer .kontakt .ueberschrift {
  font-family: 'Manrope', system-ui, sans-serif; color: #fff;
  text-transform: uppercase; letter-spacing: .16em; font-size: 14px; margin-bottom: 8px;
}
footer .kontakt a { color: rgba(255,255,255,.86); text-decoration: none; }
footer .kontakt a:hover { color: var(--signal); }
/* Die Schlusszeile stand vorher randlos über die ganze Breite, während alles
   darüber im 1280er Satzspiegel liegt - Anschrift und Impressum-Link begannen
   dadurch nicht an derselben Kante. Jetzt steht sie im selben Spiegel, die
   Trennlinie darüber führt nur so weit wie der Inhalt. */
footer .zeile {
  position: relative;
  max-width: var(--breite); margin-inline: auto; padding: 16px var(--rand) 24px;
  font-size: 14px; color: rgba(255,255,255,.45);
}
/* Die Linie liegt auf den Textkanten, nicht auf den Kanten des Kastens. */
footer .zeile::before {
  content: ''; position: absolute; top: 0; left: var(--rand); right: var(--rand);
  height: 1px; background: rgba(255,255,255,.12);
}
footer .zeile a { color: rgba(255,255,255,.6); }

/* --- 9 Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 900px) {
  .gespann { grid-template-columns: 1fr; }
  .gespann .bildseite { order: -1; }
  .menuknopf { display: block; }
  #hauptmenue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
  #hauptmenue.offen { grid-template-rows: 1fr; }
  #hauptmenue > nav { overflow: hidden; }
  nav.haupt > ul { display: block; border-top: 1px solid var(--linie); margin-top: 10px; }
  nav.haupt > ul > li { border-bottom: 1px solid var(--linie); }
  nav.haupt > ul > li > a { padding: 14px 0; }
  nav.haupt > ul > li > a::after { display: none; }
  ul.unter {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; min-width: 0; padding: 0 0 10px 14px;
  }
  .aufruf .innen { gap: calc(var(--takt) * 3); }
}

/* ===========================================================================
   Feinschliff: ruhigere Inhalte, gezielte Bewegung
   =========================================================================== */

/* --- Aufzählungen ---------------------------------------------------------- */
/* Vorher lag über und unter jedem Punkt eine waagerechte Linie. Auf Seiten mit
   mehreren Aufzählungen (Tennis- und Sportstättenbau, Bauleitung) ergab das ein
   Gitter aus Strichen, das wie eine Tabelle aussah - und zwischen zwei Listen
   standen zwei Linien direkt übereinander. Jetzt trägt nur die orange Maßmarke
   den Punkt, ganz ohne Linien. */
main .mitte ul:not(.blank) {
  list-style: none; padding: 0;
  /* gleiche Breite wie die Absaetze daneben - sonst laufen die rechten
     Kanten im selben Textblock sichtbar auseinander */
  max-width: 64ch;
}
.gespann .wort ul:not(.blank) { max-width: 56ch; }
main .mitte ul:not(.blank) li {
  position: relative;
  margin: 0 0 calc(var(--takt) * .75); padding-left: 30px;
}
main .mitte ul:not(.blank) li:last-child { margin-bottom: 0; }
main .mitte ul:not(.blank) li::before {
  content: ''; position: absolute; left: 0; top: .82em;
  width: 15px; height: var(--strich); background: var(--signal);
}

/* --- Rechtstexte: Impressum und Datenschutz ------------------------------- */
/* Zwei Spalten wie ein Aktenblatt: links der Text in Lesebreite, rechts das
   Verzeichnis, das beim Scrollen stehen bleibt. */
.rechtstext {
  display: grid; align-items: start;
  gap: clamp(32px, 4vw, 76px);
  /* Der Text steht in Lesebreite, das Verzeichnis an der rechten Kante - der
     Rest ist Luft dazwischen, nicht toter Raum am Ende des Absatzes. */
  grid-template-columns: minmax(0, 68ch) minmax(190px, 250px);
  justify-content: space-between;
}
.rechtstext article > *:first-child { margin-top: 0; }
/* Der klebende Kopf darf das angesprungene Ziel nicht verdecken. */
.rechtstext [id] { scroll-margin-top: 110px; }
/* Die Hauptabschnitte bekommen mehr Luft als die Unterpunkte - so sieht man
   auf einen Blick, wo ein neuer Abschnitt anfaengt. */
.rechtstext article h2 { margin-top: calc(var(--takt) * 10); }
.rechtstext article h2 + h3 { margin-top: calc(var(--takt) * 3); }

.verzeichnis { position: sticky; top: calc(var(--takt) * 14); }
.verzeichnis .schild { margin-bottom: calc(var(--takt) * 1.25); }
.verzeichnis ul { margin: 0; padding: 0; max-width: none; list-style: none; }
.verzeichnis li { margin: 0; }
.verzeichnis a {
  display: block; padding: 7px 0 7px 18px; position: relative;
  font-size: 15.5px; line-height: 1.35; color: var(--tinte-weich);
  text-decoration: none;
  transition: color .2s ease, padding-left .25s cubic-bezier(.22,.61,.36,1);
}
.verzeichnis a::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 9px; height: var(--strich); background: var(--beton);
  transition: background .2s ease, width .25s cubic-bezier(.22,.61,.36,1);
}
.verzeichnis a:hover { color: var(--signal); padding-left: 24px; }
.verzeichnis a:hover::before { background: var(--signal); width: 15px; }

/* Anschrift und Angaben in den Rechtstexten: ein Block mit Zeilenumbruechen,
   enger gesetzt als Fliesstext, darueber ein kleines Schild als Plankopf. */
.angaben-titel {
  margin-bottom: calc(var(--takt) * .75);
  font-weight: 500; font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--signal);
}
.angaben-titel + .angaben { color: var(--tinte); }
.angaben {
  line-height: 1.55;
  margin-bottom: calc(var(--takt) * 4);
}

@media (max-width: 900px) {
  .rechtstext { grid-template-columns: 1fr; gap: calc(var(--takt) * 5); }
  /* Ein Verzeichnis hinter dem Text nuetzt nichts - am Handy steht es davor. */
  .verzeichnis { position: static; order: -1; }
  .rechtstext article h2 { margin-top: calc(var(--takt) * 7); }
}

/* --- Seitenkopf: mehr Ruhe ------------------------------------------------ */
.seitenkopf { padding-block: clamp(46px, 6vw, 84px) clamp(30px, 3.4vw, 46px); }
.seitenkopf h1 { max-width: 20ch; }

/* --- Text: angenehmere Zeilenführung -------------------------------------- */
main p { max-width: 64ch; }
.gespann .wort p { max-width: 56ch; }
main p + h2 { margin-top: calc(var(--takt) * 8); }

/* --- Bild wird aufgedeckt statt eingeblendet ------------------------------ */
/* Eine Blende fährt nach oben weg und gibt das Foto frei - ruhiger als ein
   Hereinschieben und passt zum Aufziehen eines Plans. */
.aufdecken { position: relative; overflow: hidden; }
.aufdecken::after {
  content: ''; position: absolute; inset: 0; background: var(--papier-warm);
  transform-origin: top;
  transition: transform .95s cubic-bezier(.76,0,.24,1);
}
.aufdecken.frei::after { transform: scaleY(0); }
.aufdecken img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.aufdecken.frei img { transform: none; }

/* --- Gestaffelter Auftritt beim Seitenaufruf ------------------------------ */
.folge > * { opacity: 0; transform: translateY(14px); }
.folge.laeuft > * {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.folge.laeuft > *:nth-child(1) { transition-delay: .05s; }
.folge.laeuft > *:nth-child(2) { transition-delay: .13s; }
.folge.laeuft > *:nth-child(3) { transition-delay: .21s; }
.folge.laeuft > *:nth-child(4) { transition-delay: .29s; }
.folge.laeuft > *:nth-child(n+5) { transition-delay: .36s; }

/* --- Listeneinträge laufen nach ------------------------------------------- */
.mitlauf li { opacity: 0; transform: translateX(-10px); }
.mitlauf.laeuft li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.mitlauf.laeuft li:nth-child(1) { transition-delay: .04s; }
.mitlauf.laeuft li:nth-child(2) { transition-delay: .12s; }
.mitlauf.laeuft li:nth-child(3) { transition-delay: .20s; }
.mitlauf.laeuft li:nth-child(4) { transition-delay: .28s; }
.mitlauf.laeuft li:nth-child(n+5) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .aufdecken::after { display: none; }
  .aufdecken img { transform: none; }
  .folge > *, .mitlauf li { opacity: 1 !important; transform: none !important; }
}

/* --- Wegweiser: verwandte Seiten am Seitenende ---------------------------- */
.weiter .schild { margin-bottom: 0; }
ul.wegweiser {
  list-style: none; padding: 0; margin: 0;
  max-width: none;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--linie);
}
ul.wegweiser li { margin: 0; border-bottom: 1px solid var(--linie); }
ul.wegweiser a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 20px 4px; text-decoration: none; color: var(--tinte);
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 400; letter-spacing: -.008em;
  transition: color .2s ease, padding-left .28s cubic-bezier(.22,.61,.36,1);
}
ul.wegweiser a::before {
  content: ''; width: 16px; height: var(--strich); background: var(--signal); flex: none;
  transform: translateY(-.4em);
  transition: width .28s cubic-bezier(.22,.61,.36,1);
}
ul.wegweiser a:hover { color: var(--signal); padding-left: 10px; }
ul.wegweiser a:hover::before { width: 26px; }

/* --- Fußzeile: Stand und Umsetzungsnachweis ------------------------------- */
/* Drei Teile: Anschrift, sichtbarer Stand (Version + Build-Stempel) und das
   Destec-Logo, hinter dem eine kleine Fahne aufgeht.

   Vorher wurde das Logo mit 'margin-left: auto' an den rechten Rand geschoben -
   die Zeile spannte über die ganzen 1280 px und riss mitten hinein ein Loch von
   vierhundert Pixeln. Jetzt stehen die drei Teile als eine ruhige Gruppe
   beieinander, links an derselben Kante wie alles darüber, mit einem feinen
   Trennpunkt dazwischen. */
footer .zeile {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px clamp(12px, 1.4vw, 20px);
}
/* Trennpunkte nur, wo die drei Teile wirklich in einer Zeile stehen. Am Handy
   bricht die Zeile um und die Destec-Fahne steht als Block - ein Punkt am
   Zeilenanfang saehe dort nach einem Fehler aus. */
@media (min-width: 901px) and (hover: hover) {
  footer .zeile > * + *::before {
    content: '·'; margin-right: clamp(12px, 1.4vw, 20px);
    color: rgba(255,255,255,.28);
  }
}
footer .zeile .stand {
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: rgba(255,255,255,.34);
}
footer .zeile .werbung { position: relative; }

.zeile .umsetzung {
  display: inline-flex; align-items: center; gap: 9px;
  vertical-align: middle; text-decoration: none;
}
.zeile .umsetzung img {
  display: block; width: auto; height: 30px; box-shadow: none;
  opacity: .62;
  transition: opacity .25s ease, transform .25s ease;
}
.zeile .werbung:hover .umsetzung img,
.zeile .umsetzung:focus-visible img { opacity: 1; transform: translateY(-2px); }

/* Die Fahne steht über dem Logo und fährt beim Zeigen auf. Kantig wie der
   Rest der Seite - kein rundes Sprechblasen-Kissen. */
.destec-fahne {
  position: absolute; bottom: 100%; right: 0; padding-bottom: 14px;
  width: 290px; max-width: min(290px, 84vw); z-index: 50;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1),
              visibility .28s;
}
.zeile .werbung:hover .destec-fahne,
.zeile .werbung:focus-within .destec-fahne {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.destec-fahne .innen {
  display: block; position: relative; text-align: left;
  background: #10161a; border: 1px solid rgba(255,255,255,.16);
  border-left: var(--strich) solid var(--signal);
  padding: 16px 18px 18px;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.destec-fahne .innen::after {
  content: ''; position: absolute; bottom: -7px; right: 26px;
  width: 12px; height: 12px; background: #10161a;
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  transform: rotate(45deg);
}
.destec-fahne .oben {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 7px;
}
.destec-fahne .titel {
  display: block; font-weight: 300; font-size: 19px; line-height: 1.2;
  color: #fff; margin-bottom: 7px; letter-spacing: -.01em;
}
.destec-fahne .text {
  display: block; font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,.66); margin-bottom: 14px;
}
.destec-fahne .knopf {
  display: inline-block; padding: 9px 16px;
  background: var(--signal); color: #fff !important;
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.destec-fahne .knopf:hover { background: var(--signal-tief); transform: translateY(-1px); }

/* Am Handy gibt es kein Zeigen: ein Tipp auf das Logo fuehrt weg, die Fahne
   ginge nie auf. Dort steht sie deshalb fest in der Zeile statt als Popup. */
@media (hover: none), (max-width: 640px) {
  footer .zeile .werbung {
    margin-left: 0; display: flex; flex-direction: column;
    align-items: flex-start; gap: 14px; width: 100%;
  }
  .destec-fahne {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; padding-bottom: 0; width: 100%; max-width: 340px;
  }
  .destec-fahne .innen::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zeile .umsetzung img, .destec-fahne { transition: opacity .25s ease, visibility .25s; }
  .zeile .werbung:hover .umsetzung img,
  .zeile .umsetzung:focus-visible img { transform: none; }
  .destec-fahne { transform: none; }
}

/* --- Unterseiten: der erste Absatz führt ein ------------------------------ */
/* Vorher standen alle Absätze gleich gewichtet untereinander, der Text begann
   ohne Anlauf. Der Vorspann nimmt das leichte Gewicht der Überschriften auf
   und bindet Seitenkopf und Fließtext zusammen. */
.gespann .wort > p.vorspann {
  font-weight: 300;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.55;
  letter-spacing: -.008em;
  color: var(--tinte);
  max-width: 46ch;
}


/* Rechts bleibt Platz fuer die Telefonnummer, damit die Navigation nicht
   darunter laeuft. */
@media (min-width: 901px) { #hauptmenue { flex: 1 1 auto; min-width: 0; } }

/* --- Telefon im Kopf ------------------------------------------------------ */
/* Ein Baugeschäft wird angerufen. Rechts außen, dezent in Textfarbe, nur der
   Hörer in Signal-Orange. Am Handy bleibt das Symbol, die Nummer weicht dem
   Menüknopf. */
.ruf {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  text-decoration: none;
  font-weight: 500; font-size: clamp(16px, 1.15vw, 18px);
  color: var(--tinte); white-space: nowrap; letter-spacing: -.005em;
  transition: color .25s ease;
}
.ruf svg { width: 1.15em; height: 1.15em; color: var(--signal); flex: none; }
.ruf:hover, .ruf:focus-visible { color: var(--signal); }

@media (max-width: 900px) {
  header { flex-wrap: wrap; }
  /* Im Markup steht der Menuknopf vor dem Menue. Damit rechts erst der
     Hoerer und dann der Knopf steht, wird die Reihenfolge hier gesetzt. */
  .ruf { order: 1; margin-left: auto; }
  .menuknopf { order: 2; margin-left: 14px; }
  #hauptmenue { flex: 0 0 100%; order: 3; }
  .ruf span { display: none; }
  .ruf svg { width: 26px; height: 26px; }
}