/* ==========================================================================
   Klaus Hahn Bauunternehmen GmbH — statische Kopie
   Eine Datei: Schriften, Grundlagen, Seitengerüst, Bausteine, Umbrüche.
   Maße und Farben aus den Browser-Messwerten der Vorlage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal ausgeliefert)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/montserrat-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/montserrat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/opensans-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/opensans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/rubik-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/rubik.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Werte der Vorlage
   -------------------------------------------------------------------------- */

:root {
  /* Farben (im Browser an der Vorlage gemessen) */
  --blau: #3d79bd;
  --blau-dunkel: #0054a6;
  --akzent: #ef4023;
  --akzent-aktiv: #ef3e23;
  --text: #666666;
  --ueberschrift: #333333;
  --hell: #f7f7f7;
  --weiss: #ffffff;
  --fuss: #222222;
  --schleier: rgba(40, 40, 40, 0.67);
  --kasten: rgba(40, 40, 40, 0.79);
  --schatten-kopf: rgba(0, 0, 0, 0.1);

  /* Schriften */
  --schrift-text: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --schrift-titel: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
  --schrift-recht: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

  /* Maße */
  --inhalt: 1080px;
  --kopf-hoehe: 94px;
  --kopf-hoehe-klein: 56px;
  --kopf-hoehe-mobil: 80px;
  --abstand-seite: 80px;

  /* Pfeil im Knopf (Ersatz für das Symbol der Vorlage) */
  --pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M12.5 5.5L19 12l-6.5 6.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--kopf-hoehe);
  background-color: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

body.menue-offen {
  overflow: hidden;
}

/* Lange Zeichenketten ohne Trennstelle — die E-Mail-Adresse in den schmalen
   Kontaktkacheln, das Wort „Datenschutzerklärung" als Überschrift auf dem
   Telefon — dürfen notfalls innerhalb des Wortes umbrechen. Die Vorlage setzt
   dafür ebenfalls overflow-wrap: break-word; dort fängt zusätzlich ein
   overflow: hidden den Rest ab, wodurch die Adresse am Rand angeschnitten
   wird. Hier bricht sie stattdessen um und bleibt vollständig lesbar. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dd,
dt,
figcaption,
.kachel__titel,
.kachel__text {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0 0 10px;
  color: var(--ueberschrift);
  font-family: var(--schrift-titel);
  font-weight: 500;
  line-height: 1em;
}

h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

p {
  margin: 0;
  padding: 0 0 1em;
}

p:last-child {
  padding-bottom: 0;
}

a {
  color: var(--akzent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

ul {
  margin: 0;
  padding: 0 0 1em 1em;
}

li {
  list-style-type: disc;
}

svg {
  display: block;
}

.nur-fuer-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Seitengerüst: Abschnitt, Reihe, Raster, Spalte
   -------------------------------------------------------------------------- */

.abschnitt {
  position: relative;
  padding: 4% 0;
  background-color: var(--weiss);
  background-position: 50%;
  background-size: cover;
}

@media (min-width: 1350px) {
  .abschnitt { padding: 54px 0; }
}

.abschnitt--ohne-polster { padding: 0; }
.abschnitt--blau { background-color: var(--blau); padding: 0; }
.abschnitt--hell { background-color: var(--hell); }
.abschnitt--hell-ohne-polster { background-color: var(--hell); padding: 0; }
.abschnitt--eng { padding: 50px 0; }

/* Kachelreihe der Startseite liegt mit Schlagschatten über dem Hero */
.abschnitt--kacheln {
  z-index: 10;
  box-shadow: 0 10px 105px 0 rgba(0, 0, 0, 0.12);
}

/* Im blauen Abschnitt steht alles in Weiß — außer im weißen Textkasten */
.abschnitt--blau h2,
.abschnitt--blau h3,
.abschnitt--blau p,
.abschnitt--blau li {
  color: var(--weiss);
}

/* Hero-Abschnitte der Unterseiten: Foto mit dunklem Schleier.
   Das Foto steckt in --flaechenbild. Hier steht das JPG; der Abschnitt
   „Flaechenbilder als WebP“ am Ende ersetzt es durch die WebP-Fassung
   und waehlt je Umbruch die passende Breite. */
.abschnitt--foto {
  background-image: linear-gradient(var(--schleier), var(--schleier)), var(--flaechenbild);
  background-position: 50%;
  background-size: cover;
  color: var(--weiss);
}

.abschnitt--foto-hoch { padding: 13vw 0; }
.abschnitt--foto-mittel { padding: 10vw 0; }

.abschnitt--ueber-uns { --flaechenbild: url('../img/hero-ueber-uns-900.jpg'); }
.abschnitt--leistungen { --flaechenbild: url('../img/hero-leistungen-900.jpg'); }
.abschnitt--referenzen { --flaechenbild: url('../img/hero-referenzen-900.jpg'); }
.abschnitt--kontakt-held { --flaechenbild: url('../img/hero-start-900.jpg'); }
.abschnitt--achtzig { --flaechenbild: url('../img/bauen-80-jahre-900.jpg'); }

.abschnitt--foto h1,
.abschnitt--foto h2,
.abschnitt--foto h3,
.abschnitt--foto h4,
.abschnitt--foto p {
  color: var(--weiss);
}

/* Kontaktbereich am Fuß jeder Seite */
.abschnitt--kontakt {
  --flaechenbild: url('../img/menue-hintergrund-900.jpg');
  padding: 55px 0 47px;
  background-image: var(--flaechenbild);
  background-position: 50%;
  background-size: cover;
}

.reihe {
  position: relative;
  width: 80%;
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 2% 0;
}

@media (min-width: 1350px) {
  .reihe { padding: 27px 0; }
}

.reihe--schmal { width: 70%; max-width: 70%; }
.reihe--breit { width: 89%; max-width: 89%; }
.reihe--galerie { width: 94%; max-width: 94%; }
.reihe--voll { width: 100%; max-width: 100%; padding: 0; }
.reihe--ohne-polster { padding: 0; }

/* Kachelreihe der Startseite: fast volle Breite, weißer Grund */
.reihe--kacheln {
  width: 100%;
  max-width: 1816px;
  padding: 0 40px;
  background-color: var(--weiss);
}

.raster {
  display: grid;
  gap: 5.5%;
  align-items: start;
}

.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--2-1 { grid-template-columns: 64.833% 29.667%; }
.raster--1-2 { grid-template-columns: 29.667% 64.833%; }
.raster--gleich { align-items: stretch; }

/* ohne Spaltenabstand (Divi-Gutter 1) */
.raster--dicht {
  gap: 0;
}

.raster--dicht.raster--1-2 { grid-template-columns: 33.333% 66.667%; }

/* Galerieabstand (Divi-Gutter 2) */
.raster--galerie {
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
}

/* Abstand gestapelter Bausteine in einer Spalte — wie in der Vorlage
   als Prozentwert der Spaltenbreite. */
.spalte--voll > * + * { margin-top: 2.75%; }
.spalte--zweidrittel > * + * { margin-top: 4.242%; }
.spalte--halb > * + * { margin-top: 5.82%; }
.spalte--drittel > * + * { margin-top: 9.27%; }
.spalte--viertel > * + * { margin-top: 13.8%; }

/* --------------------------------------------------------------------------
   5. Kopfleiste
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9000;
  height: var(--kopf-hoehe);
  background-color: var(--weiss);
  box-shadow: 0 1px 0 0 var(--schatten-kopf);
  transition: height 0.4s ease-in-out;
}

.kopf--kompakt {
  height: var(--kopf-hoehe-klein);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  max-width: var(--inhalt);
  height: 100%;
  margin: 0 auto;
}

.kopf__logo {
  display: block;
  line-height: 0;
}

.kopf__logo img {
  width: auto;
  height: 84px;
  transition: height 0.4s ease-in-out;
}

.kopf--kompakt .kopf__logo img {
  height: 30px;
}

/* Rechte Seite des Kopfes: Kontakt-Knopf und Menue-Schalter nebeneinander */
.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 28px;
}

.kopf__knopf {
  padding: 11px 24px;
  background-color: var(--blau);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1.7;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.3s ease-in-out, padding 0.4s ease-in-out;
}

.kopf__knopf:hover,
.kopf__knopf:focus-visible {
  background-color: var(--blau-dunkel);
}

/* Im geschrumpften Kopf etwas flacher, damit die Hoehe mitgeht */
.kopf--kompakt .kopf__knopf {
  padding: 7px 18px;
}

.kopf__schalter {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blau-dunkel);
  font-family: var(--schrift-text);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.8em;
  cursor: pointer;
}

.kopf__schalter svg {
  width: 32px;
  height: 32px;
}

.kopf__schalter-text {
  font-family: var(--schrift-titel);
  padding-left: 15px;
}

/* --------------------------------------------------------------------------
   6. Vollbild-Menü
   -------------------------------------------------------------------------- */

.menue {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  visibility: hidden;
  opacity: 0;
  --flaechenbild: url('../img/menue-hintergrund-900.jpg');
  background-image: var(--flaechenbild);
  background-position: center center;
  background-size: cover;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.menue.ist-offen {
  visibility: visible;
  opacity: 1;
}

.menue__schliessen {
  position: absolute;
  top: 34px;
  right: 30px;
  z-index: 10;
  padding: 0;
  border: 0;
  background: none;
  color: var(--weiss);
  cursor: pointer;
}

.menue__schliessen svg {
  width: 96px;
  height: 96px;
}

.menue__nav {
  flex: 0 0 40%;
  padding-bottom: 80px;
}

.menue__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.menue__liste li {
  list-style: none;
}

.menue__liste a {
  display: block;
  padding: 23px 0;
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 46px;
  font-weight: 700;
  line-height: 27.2px;
  text-decoration: none;
}

.menue__liste a[aria-current='page'],
.menue__liste a:hover {
  color: var(--akzent-aktiv);
}

.menue__info {
  flex: 0 0 50%;
  padding: 0 10%;
  color: var(--weiss);
  font-size: 24px;
  font-weight: 700;
}

.menue__info a {
  color: var(--weiss);
  text-decoration: none;
}

.menue__zeile {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.menue__zeile svg {
  flex: none;
  width: 1em;
  height: 1em;
  margin-right: 8px;
}

.menue__logo {
  margin-top: 45px;
}

.menue__logo img {
  width: 300px;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   7. Hero der Startseite
   -------------------------------------------------------------------------- */

.held {
  position: relative;
  overflow: hidden;
}

.held__bild {
  --flaechenbild: url('../img/hero-start-900.jpg');
  position: absolute;
  inset: 0;
  background-image: var(--flaechenbild);
  background-attachment: fixed;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.held__innen {
  position: relative;
  z-index: 3;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 80%;
  min-height: calc(100vh - 81px);
  margin: 0 auto;
  padding-bottom: 500px;
}

.held__inhalt {
  width: 80%;
  max-width: 800px;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
}

.held__logo {
  display: block;
  width: 100%;
  height: auto;
  padding: 25px 50px 0;
  background-color: var(--kasten);
}

.held__titel {
  margin-top: -6px;
  padding: 15px 0 25px;
  background-color: var(--kasten);
  color: var(--weiss);
  font-size: 37px;
  font-weight: 700;
  line-height: 37px;
  text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
}

.held__pfeil {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  padding: 10px 0 20px;
  text-align: center;
}

.held__pfeil a {
  display: inline-block;
  color: var(--weiss);
}

.held__pfeil svg {
  width: 75px;
  height: 75px;
}

/* --------------------------------------------------------------------------
   8. Bausteine
   -------------------------------------------------------------------------- */

/* Titelblock mit blauer Linie links */
.titelblock {
  max-width: 800px;
  margin-bottom: 0;
  padding-left: 16px;
  border-left: 10px solid var(--blau);
}

.titelblock__titel {
  color: var(--weiss);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1em;
}

.vorspann {
  max-width: 800px;
  padding: 20px 0;
  color: var(--weiss);
  font-size: 22px;
  line-height: 1.6em;
}

.vorspann--weit { padding: 35px 0; }

/* Trennlinie */
.trenner {
  max-width: 50px;
  height: 5px;
  margin: 0 0 30px;
  background-color: var(--blau);
}

.trenner--weiss { background-color: var(--weiss); }
.trenner--mittig { margin-left: auto; margin-right: auto; }
.trenner--eng { margin-bottom: 27px; }

/* Knopf */
.knopf {
  display: inline-block;
  padding: 0.3em 1em;
  border: 12px solid var(--blau);
  border-radius: 0;
  background-color: var(--blau);
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1.7em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 300ms ease 0ms;
}

.knopf:hover,
.knopf:focus-visible {
  padding: 0.3em 2em 0.3em 0.7em;
  text-decoration: none;
}

.knopf::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: -1em;
  vertical-align: -0.15em;
  background: var(--pfeil-rechts) no-repeat center / contain;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.knopf:hover::after,
.knopf:focus-visible::after {
  margin-left: 0.3em;
  opacity: 1;
}

/* Knopf im Kontaktformular: durchsichtig mit weißem Rahmen */
.knopf--rahmen {
  border: 4px solid var(--weiss);
  background-color: transparent;
}

.knopf--rahmen:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.knopf-mitte {
  text-align: center;
}

/* Kachel (Symbol links, Text rechts) */
.kachel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  font-size: 15px;
  line-height: 1.8em;
}

.kachel__symbol {
  line-height: 0;
}

.kachel__symbol svg {
  width: 32px;
  height: 32px;
}

.kachel__symbol img {
  display: block;
  width: 64px;
  height: auto;
}

.kachel__inhalt {
  /* laesst die Spalte schrumpfen; lange Wörter ragen wie in der Vorlage
     in die Polsterung, statt die Spalte aufzuweiten */
  min-width: 0;
  padding-left: 15px;
}

.kachel__titel {
  font-family: var(--schrift-titel);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4em;
}

.kachel__titel a {
  color: inherit;
  text-decoration: none;
}

.kachel__text p {
  line-height: 1.8em;
}

/* Kachel mit großem Symbol (blauer Abschnitt, Kontaktseite) */
.kachel--gross .kachel__symbol svg {
  width: 56px;
  height: 56px;
}

/* Kachel im Kontaktbereich am Seitenende */
.kachel--klein .kachel__symbol svg {
  width: 30px;
  height: 30px;
}

.kachel--weiss,
.kachel--weiss .kachel__titel,
.kachel--weiss .kachel__symbol {
  color: var(--weiss);
}

.kachel--blau .kachel__symbol {
  color: var(--blau);
}

/* anklickbare Kachel der Startseite */
.kachel--klickbar {
  cursor: pointer;
}

/* Einblenden beim Scrollen */
.animiert {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animiert.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* weißer Textkasten im blauen Abschnitt der Startseite */
.textkasten {
  padding: 100px 70px;
  background-color: var(--weiss);
}

.abschnitt--blau .textkasten h2,
.abschnitt--blau .textkasten h3 {
  color: var(--ueberschrift);
}

.abschnitt--blau .textkasten p {
  color: var(--text);
}

.textkasten h2 {
  padding-bottom: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2em;
}

.textkasten h3 {
  margin-top: 4px;
  padding-bottom: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1em;
}

.textkasten .trenner {
  margin: 31px auto;
}

/* Kachelspalte im blauen Abschnitt */
.kacheln-blau {
  margin: 50px 20px;
}

/* mittig gesetzte Textblöcke mit 800 px Höchstbreite */
.block-800 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Über uns: Textspalte im blauen Abschnitt */
.teamtext {
  padding: 130px 130px 0;
}

/* Über uns: Spalte „Das zeichnet uns aus“ */
.auszeichnung {
  padding: 80px 0 80px 60px;
}

.auszeichnung__knopf {
  margin-top: 100px;
}

/* Kontaktseite: Hero mit blauem Datenblock */
.kontakt-text {
  padding: 10vw 6vw;
}

.kontakt-daten {
  padding: 155px 90px;
  background-color: var(--blau);
}

/* Kontaktbereich am Seitenende */
.abschnitt--kontakt h2 {
  color: var(--weiss);
}

.kontakt__logo {
  margin-top: 75px;
  padding-bottom: 0;
}

.kontakt__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.kleintext {
  font-size: 15px;
  line-height: 1.8em;
}

/* Abschnittsüberschrift */
.titel-gross {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2em;
}

.titel-mittel {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2em;
}

.titel-riesig {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1em;
}

.mitte { text-align: center; }

.gerahmtes-bild img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 30px 65px -30px rgba(0, 0, 0, 0.35);
}

.vollbild img {
  display: block;
  width: 100%;
  height: auto;
}

.liste-leistungen {
  margin-top: 80px;
  color: var(--weiss);
  font-size: 15px;
}

.liste-leistungen li {
  line-height: 2em;
}

/* --------------------------------------------------------------------------
   9. Galerie und Leuchtkasten
   -------------------------------------------------------------------------- */

.galerie__feld {
  position: relative;
  display: block;
  line-height: 0;
}

.galerie__feld img {
  display: block;
  width: 100%;
  height: auto;
}

.galerie__lupe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.32);
  color: var(--weiss);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.galerie__feld:hover .galerie__lupe,
.galerie__feld:focus-visible .galerie__lupe {
  opacity: 1;
}

.galerie__lupe svg {
  width: 32px;
  height: 32px;
}

.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.9);
}

.leuchtkasten.ist-offen {
  display: flex;
}

/* Das <picture> um das Bild erzeugt keinen eigenen Kasten, damit das
   img wie zuvor unmittelbar im Flex-Behaelter des Leuchtkastens sitzt. */
.leuchtkasten picture {
  display: contents;
}

.leuchtkasten img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
}

.leuchtkasten__knopf {
  position: absolute;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--weiss);
  cursor: pointer;
}

.leuchtkasten__knopf svg {
  width: 40px;
  height: 40px;
}

.leuchtkasten__knopf--zu { top: 20px; right: 20px; }
.leuchtkasten__knopf--zurueck { top: 50%; left: 20px; transform: translateY(-50%); }
.leuchtkasten__knopf--vor { top: 50%; right: 20px; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   10. Kontaktformular
   -------------------------------------------------------------------------- */

.formular {
  margin: 30px 0;
}

.formular__zeile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3%;
}

.feld {
  margin: 0 0 3%;
  padding: 0;
}

.feld label {
  display: block;
  padding-bottom: 6px;
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6em;
}

.feld input,
.feld textarea {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background-color: var(--weiss);
  color: var(--blau);
  font-family: var(--schrift-text);
  font-size: 14px;
  line-height: 1.8em;
  -webkit-appearance: none;
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--blau);
  opacity: 1;
}

.feld textarea {
  min-height: 150px;
  display: block;
}

.feld--zustimmung {
  margin-bottom: 3%;
  color: var(--weiss);
  font-size: 14px;
  line-height: 1.8em;
}

.feld--zustimmung > span {
  display: block;
  margin-bottom: 0.5em;
  font-family: var(--schrift-titel);
  font-size: 14px;
  font-weight: 700;
}

.feld--zustimmung input[type='checkbox'] {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
}

.feld--zustimmung label {
  position: relative;
  display: inline-block;
  min-height: 1.7em;
  padding-bottom: 0;
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7em;
  cursor: pointer;
}

.feld--zustimmung label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  background-color: var(--weiss);
}

.feld--zustimmung input[type='checkbox']:checked + label::after {
  content: '';
  position: absolute;
  top: 0.35em;
  left: 3px;
  width: 12px;
  height: 7px;
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
  transform: rotate(-45deg);
}

.feld--zustimmung input[type='checkbox']:focus-visible + label::before {
  outline: 2px solid var(--weiss);
  outline-offset: 2px;
}

.feld--zustimmung a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

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

.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.formular__hinweis {
  margin: 0;
  color: var(--weiss);
  font-size: 14px;
  opacity: 0.85;
}

.formular-meldung {
  display: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  color: var(--weiss);
  font-size: 15px;
  line-height: 1.6em;
}

.formular-meldung.ist-sichtbar {
  display: block;
}

.formular-meldung--ok {
  background-color: rgba(61, 121, 189, 0.85);
  border-left: 4px solid var(--weiss);
}

.formular-meldung--fehler {
  background-color: rgba(239, 64, 35, 0.85);
  border-left: 4px solid var(--weiss);
}

/* --------------------------------------------------------------------------
   11. Rechtstexte
   -------------------------------------------------------------------------- */

.rechtstext h1 {
  color: var(--blau);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4em;
  text-transform: uppercase;
}

.rechtstext h2 {
  padding-top: 0.6em;
  font-family: var(--schrift-recht);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4em;
}

.rechtstext h3 {
  padding-top: 0.4em;
  font-family: var(--schrift-recht);
  font-size: 20px;
  font-weight: 300;
  line-height: 1em;
}

.rechtstext--datenschutz h2 {
  font-size: 22px;
}

.rechtstext ul {
  padding-bottom: 1em;
}

/* --------------------------------------------------------------------------
   12. Fußbereich
   -------------------------------------------------------------------------- */

.fuss {
  background-color: var(--fuss);
  color: var(--text);
}

.fuss__innen {
  padding: 28px 0;
  background-color: rgba(0, 0, 0, 0.32);
  text-align: center;
}

/* Die Angaben stehen in einer Zeile, solange sie nebeneinander passen;
   sonst bricht die Zeile mittig um. Der Trenner gehört jeweils zum
   folgenden Teil und bringt den Abstand gleich mit. */
.fuss__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  width: 92%;
  max-width: var(--inhalt);
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}

.fuss__text > span + span::before {
  content: "·";
  padding: 0 12px;
  color: var(--text);
  font-weight: 400;
}

.fuss__text a {
  color: var(--text);
  font-weight: 700;
}

/* Die Trennpunkte lohnen nur, solange die Zeile am Stück steht. Sobald sie
   umbricht, stünde der Punkt am Anfang der zweiten Zeile — dann trennen
   stattdessen die Abstände. */
@media (max-width: 1279px) {
  .fuss__text {
    column-gap: 28px;
    row-gap: 2px;
  }

  .fuss__text > span + span::before {
    content: none;
  }
}

.fuss__text p {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   13. Umbrüche
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  body {
    padding-top: var(--kopf-hoehe-mobil);
  }

  .kopf {
    position: absolute;
    height: var(--kopf-hoehe-mobil);
  }

  .kopf--kompakt {
    height: var(--kopf-hoehe-mobil);
  }

  .kopf__logo img,
  .kopf--kompakt .kopf__logo img {
    height: 34px;
  }

  .kopf__schalter-text {
    display: none;
  }

  .kopf__rechts {
    gap: 16px;
  }

  .kopf__knopf,
  .kopf--kompakt .kopf__knopf {
    padding: 9px 16px;
    font-size: 13px;
    letter-spacing: 2px;
  }

  .abschnitt {
    padding: 50px 0;
  }

  .abschnitt--ohne-polster,
  .abschnitt--blau,
  .abschnitt--hell-ohne-polster {
    padding: 0;
  }

  .abschnitt--kontakt {
    padding: 55px 0 47px;
  }

  .reihe,
  .reihe--breit,
  .reihe--galerie,
  .reihe--schmal {
    width: 80%;
    max-width: 80%;
  }

  .reihe--voll {
    width: 100%;
    max-width: 100%;
  }

  .reihe--kacheln {
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
  }

  /* Alle Spaltenraster stehen einspaltig */
  .raster,
  .raster--4,
  .raster--3,
  .raster--2,
  .raster--2-1,
  .raster--1-2,
  .raster--dicht.raster--1-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .raster > * + * {
    margin-top: 30px;
  }

  .raster--galerie {
    grid-template-columns: repeat(2, 1fr);
    gap: 3%;
  }

  .raster--galerie > * + * {
    margin-top: 0;
  }

  .menue {
    display: block;
    overflow-y: auto;
    padding: 90px 10% 60px;
  }

  .menue.ist-offen {
    opacity: 0.95;
  }

  .menue__nav {
    padding-bottom: 40px;
  }

  .menue__liste {
    text-align: left;
  }

  .menue__liste a {
    padding: 14px 0;
    font-size: 30px;
    line-height: 1.2em;
  }

  .menue__info {
    padding: 0;
    font-size: 18px;
  }

  .menue__schliessen {
    top: 20px;
    right: 20px;
  }

  .menue__schliessen svg {
    width: 48px;
    height: 48px;
  }

  .held__bild {
    background-attachment: scroll;
  }

  .held__innen {
    min-height: calc(100vh - var(--kopf-hoehe-mobil));
    padding-bottom: 300px;
  }

  /* Auf schmalen Geräten zeigt die Vorlage den Hero ohne dunklen Kasten
     und mit kleinerer Überschrift. */
  .held__inhalt {
    width: 100%;
  }

  .held__logo {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
  }

  .held__titel {
    margin-top: 0;
    padding: 10px 0 0;
    background: none;
    font-size: 30px;
    line-height: 1.1em;
  }

  .textkasten {
    padding: 50px 40px;
  }

  .kacheln-blau {
    margin: 40px 20px;
  }

  .teamtext {
    padding: 50px 40px;
  }

  .auszeichnung {
    padding: 50px 10%;
  }

  .auszeichnung__knopf {
    margin-top: 40px;
  }

  .kontakt-text {
    padding: 10vw 10%;
  }

  .kontakt-daten {
    padding: 50px 10%;
  }

  .titelblock__titel,
  .titel-riesig {
    font-size: 44px;
  }

  .vorspann,
  .vorspann--weit {
    font-size: 18px;
  }

  .liste-leistungen {
    margin-top: 30px;
  }

  .formular__zeile {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .spalte--voll > * + *,
  .spalte--zweidrittel > * + *,
  .spalte--halb > * + *,
  .spalte--drittel > * + *,
  .spalte--viertel > * + * {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  /* Auf dem Telefon passt nichts mehr nebeneinander: wieder Zeile für Zeile,
     dann stünden die Trennpunkte sonst am Zeilenanfang. */
  .fuss__text {
    display: block;
  }

  .fuss__text > span {
    display: block;
  }

  .fuss__text > span + span::before {
    content: none;
  }

  .titelblock__titel,
  .titel-riesig {
    font-size: 32px;
  }

  .titel-gross,
  .textkasten h2 {
    font-size: 36px;
  }

  .raster--galerie {
    grid-template-columns: 1fr;
  }

  .raster--galerie > * + * {
    margin-top: 3%;
  }

  .leuchtkasten {
    padding: 20px;
  }

  .leuchtkasten__knopf--zurueck { left: 4px; }
  .leuchtkasten__knopf--vor { right: 4px; }
}

@media (max-width: 479px) {
  /* Auf dem Telefon teilen sich Logo, Knopf und Schalter rund 300 px —
     der Knopf wird dafuer so schmal wie moeglich. */
  .kopf__rechts {
    gap: 12px;
  }

  .kopf__knopf,
  .kopf--kompakt .kopf__knopf {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .reihe,
  .reihe--breit,
  .reihe--galerie,
  .reihe--schmal {
    width: 86%;
    max-width: 86%;
  }

  .reihe--kacheln {
    padding: 0 20px;
  }

  .textkasten {
    padding: 40px 24px;
  }
}

/* --------------------------------------------------------------------------
   14. Flächenbilder als WebP

   Die Fotos der Hintergrundflächen liegen zusätzlich als WebP vor.
   Browser ohne image-set() mit type() bleiben beim JPG, das oben an
   --flaechenbild steht. Deshalb steht hier nur das Foto, nicht die
   ganze Regel — Schleier, Ausschnitt und Lage gelten unverändert.

   Je Fläche genau eine Fassung, in Originalgröße. Eine Staffelung
   nach Fensterbreite wäre hier falsch: alle sechs Vorlagen sind
   1080 px hoch, die Flächen stehen mit background-size: cover, und
   auf dem Telefon werden sie nicht schmaler, sondern HÖHER — der
   Kontaktbereich misst bei 375 px Fensterbreite 1359 px Höhe. Bei
   einem querformatigen Foto in einer hochkanten Fläche rechnet cover
   über die Höhe, eine halb so breite Fassung ist auch halb so hoch
   und wird doppelt so stark vergrößert. Gemessen bei 375 px: die
   früher hier ausgelieferten schmalen Fassungen wurden schon bei
   einfacher Pixeldichte um den Faktor 1,3 bis 3,8 hochgerechnet, auf
   einem Telefon mit Pixelverhältnis 3 um 3,8 bis 11,5. Mit der
   Originalgröße sind es 0,35 bis 1,26 bzw. 1,06 bis 3,8 — und damit
   genau so scharf wie vor der Umrechnung.
   -------------------------------------------------------------------------- */

@supports (background-image: image-set(url('../img/ref/ref-01-324.webp') type('image/webp'))) {
  .abschnitt--ueber-uns { --flaechenbild: image-set(url('../img/hero-ueber-uns-1440.webp') type('image/webp')); }
  .abschnitt--leistungen { --flaechenbild: image-set(url('../img/hero-leistungen-1440.webp') type('image/webp')); }
  .abschnitt--referenzen { --flaechenbild: image-set(url('../img/hero-referenzen-1440.webp') type('image/webp')); }
  .abschnitt--achtzig { --flaechenbild: image-set(url('../img/bauen-80-jahre-1440.webp') type('image/webp')); }
  .abschnitt--kontakt-held,
  .held__bild { --flaechenbild: image-set(url('../img/hero-start-1897.webp') type('image/webp')); }
  .abschnitt--kontakt,
  .menue { --flaechenbild: image-set(url('../img/menue-hintergrund-1920.webp') type('image/webp')); }
}

/* --------------------------------------------------------------------------
   15. Weniger Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .animiert {
    opacity: 1;
    transform: none;
  }

  .held__bild {
    background-attachment: scroll;
  }
}