/* Zimmerei Dörr – statische Kopie (Durchgang 1: originalgetreu)
   Ordnung: Schriften → :root → Grundlagen → Seitengerüst → Bausteine → Umbrüche → reduzierte Bewegung */

/* ── Schriften (lokal, latin + latin-ext) ─────────────────────────────── */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  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: 400 800;
  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: 'Raleway';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/raleway.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;
}

/* ── Gemessene Werte ───────────────────────────────────────────────────── */
:root {
  --farbe-text: #666;
  --farbe-titel: #404042;
  --farbe-menue: #221f1f;
  --farbe-akzent: #d10019;
  --farbe-link: #6e0000;
  --farbe-apricot: #f5b98f;
  --farbe-grau: #f4f4f4;
  --farbe-kasten: #efefef;
  --farbe-hinweis: #fef9f5;
  --farbe-weiss: #fff;
  --farbe-mobilmenue: #b99764;
  --farbe-video-link: #28a745;
  --farbe-video-link-hover: #30c553;
  --farbe-video-knopf: #f00;
  --farbe-video-knopf-hover: #d10019;
  --verlauf-kopf: linear-gradient(1deg, rgba(64, 64, 66, .84) 3%, rgba(33, 25, 21, 0) 100%);
  --verlauf-kopf-dunkel: linear-gradient(1deg, #404042 3%, rgba(33, 25, 21, 0) 100%);
  --schrift: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
  --schrift-zweit: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --kopf-hoehe: 150px;
  --kopf-versatz: 144px;
  --kopf-hoehe-fixiert: 114px;
  --kopf-hoehe-mobil: 80px;
  --kopf-versatz-mobil: 78px;
  --inhalt-breite: 1080px;
  --spaltenabstand: 5.5%;
}

/* ── Grundlagen ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--kopf-versatz);
  font-family: var(--schrift);
  font-size: 18px;
  font-weight: 400;
  line-height: 2em;
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding-bottom: 10px;
  font-family: var(--schrift);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: 1px;
  color: var(--farbe-titel);
}
h1 { font-size: 34px; }
h2 { font-size: 29px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }
p { margin: 0; padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }
ul, ol { margin: 0; }
a { color: var(--farbe-link); text-decoration: none; transition: color .3s ease; }
strong, b { font-weight: 700; }
img { max-width: 100%; height: auto; vertical-align: middle; }
figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }

.sichtbar-nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  padding: .5rem 1rem; background: var(--farbe-weiss); color: var(--farbe-menue);
  font-weight: 600;
}
.sprunglink:focus { top: 1rem; }

/* ── Seitengerüst: Kopfleiste ──────────────────────────────────────────── */
.kopfleiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--kopf-hoehe);
  background: var(--farbe-weiss);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  transition: height .4s ease-in-out, box-shadow .4s ease-in-out;
}
.kopfleiste__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: 80%;
  max-width: var(--inhalt-breite);
  height: 100%;
  margin: 0 auto;
}
.kopfleiste__logo { display: block; line-height: 0; }
.kopfleiste__logobild { width: auto; height: 113px; transition: height .4s ease-in-out; }
.menueknopf { display: none; }

.hauptmenue { justify-self: end; align-self: start; padding-top: 68px; transition: padding .4s ease-in-out; }
.hauptmenue__liste { display: flex; margin: 0; padding: 0; list-style: none; line-height: 1em; }
.hauptmenue__punkt { position: relative; }
.hauptmenue__liste > .hauptmenue__punkt { padding-right: 26px; font-size: 18px; font-weight: 600; }
.hauptmenue__liste > .hauptmenue__punkt:last-child { padding-right: 0; }
.hauptmenue__link {
  position: relative;
  display: block;
  color: var(--farbe-menue);
  letter-spacing: 1px;
  transition: opacity .4s ease-in-out, background-color .4s ease-in-out, padding .4s ease-in-out, font-size .4s ease-in-out;
}
.hauptmenue__link:hover { opacity: .7; }
.hauptmenue__liste > .hauptmenue__punkt > .hauptmenue__link { padding-bottom: 68px; line-height: 14px; }
.hauptmenue__liste > .hauptmenue__punkt--mit-unter > .hauptmenue__link { padding-right: 20px; }
.hauptmenue__punkt--mit-unter > .hauptmenue__link::after {
  content: "";
  position: absolute;
  right: 2px; top: .2em;
  width: .32em; height: .32em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.hauptmenue__liste > .hauptmenue__punkt--aktiv > .hauptmenue__link,
.hauptmenue__liste > .hauptmenue__punkt--vorfahr > .hauptmenue__link,
.hauptmenue__unter .hauptmenue__punkt--aktiv > .hauptmenue__link,
.hauptmenue__unter .hauptmenue__punkt--vorfahr > .hauptmenue__link { color: var(--farbe-akzent); }

.hauptmenue__unter {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 480px;
  margin: 0;
  padding: 20px 0;
  list-style: none;
  text-align: left;
  background: var(--farbe-weiss);
  border-top: 3px solid var(--farbe-akzent);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}
.hauptmenue__unter .hauptmenue__punkt { padding: 0 20px; font-size: 14px; line-height: 2em; }
.hauptmenue__unter .hauptmenue__link { width: 440px; padding: 6px 20px; font-size: 18px; }
.hauptmenue__unter .hauptmenue__link:hover { background-color: rgba(0, 0, 0, .03); }
.hauptmenue__unter .hauptmenue__punkt--mit-unter > .hauptmenue__link::after {
  right: 22px; top: 50%;
  margin-top: -.3em;
}
.hauptmenue__unter--ebene-2 { top: -23px; left: 480px; }
.hauptmenue__punkt:hover > .hauptmenue__unter,
.hauptmenue__punkt:focus-within > .hauptmenue__unter { visibility: visible; opacity: 1; }

/* beim Scrollen verkleinerte Kopfleiste */
.kopfleiste--fixiert { height: var(--kopf-hoehe-fixiert); box-shadow: 0 0 7px rgba(0, 0, 0, .1); }
.kopfleiste--fixiert .kopfleiste__logobild { height: 85px; }
.kopfleiste--fixiert .hauptmenue { padding-top: 50px; }
.kopfleiste--fixiert .hauptmenue__liste > .hauptmenue__punkt > .hauptmenue__link { padding-bottom: 50px; font-size: 17px; }
.kopfleiste--fixiert .hauptmenue__liste > .hauptmenue__punkt--aktiv > .hauptmenue__link,
.kopfleiste--fixiert .hauptmenue__liste > .hauptmenue__punkt--vorfahr > .hauptmenue__link { color: var(--farbe-titel); }

/* ── Seitengerüst: Abschnitte, Zeilen, Spalten ─────────────────────────── */
.abschnitt { position: relative; padding: 4% 0; background-color: var(--farbe-weiss); }
.zeile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--spaltenabstand);
  width: 80%;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 2% 0;
}
.zeile--halb { grid-template-columns: 1fr 1fr; }
.zeile--drittel { grid-template-columns: 1fr 1fr 1fr; }
.zeile--halb-viertel { grid-template-columns: 47.25fr 20.875fr 20.875fr; }
.zeile--zweidrittel { grid-template-columns: 64.833fr 29.667fr; }
.spalte { position: relative; min-width: 0; }
.spalte--voll > :not(:last-child) { margin-bottom: 2.75%; }
.spalte--halb > :not(:last-child) { margin-bottom: 5.82%; }
.spalte--drittel > :not(:last-child) { margin-bottom: 9.27%; }
.spalte--viertel > :not(:last-child) { margin-bottom: 13.174%; }
.spalte--zweidrittel > :not(:last-child) { margin-bottom: 4.242%; }

/* Abschnittsarten */
.abschnitt.abschnitt--einleitung { padding: 47px 0 54px; }
.abschnitt.abschnitt--anschluss { padding: 0 0 54px; }
.abschnitt.abschnitt--schmal { padding: 18px 0; }
.abschnitt.abschnitt--band { padding: 17px 0; }
.abschnitt.abschnitt--normal { padding: 54px 0; }
.abschnitt.abschnitt--abstand-55 { padding-bottom: 55px; }
.abschnitt.abschnitt--bildleiste { padding: 0; }
.abschnitt.abschnitt--stimmen { padding: 54px 0 80px; }
.abschnitt.abschnitt--nachtrag { padding-top: 25px; }
.abschnitt.abschnitt--pv-einleitung { padding: 47px 0 9px; }
.abschnitt.abschnitt--pv-liste { padding: 15px 0 54px; }
.abschnitt.abschnitt--projekt { padding: 54px 0 27px; }
.abschnitt.abschnitt--galerie { padding: 42px 0; }
.abschnitt.abschnitt--recht { padding: 28px 0; }
.abschnitt--grau { background-color: var(--farbe-grau); }
.abschnitt.abschnitt--bildband {
  padding: 150px 0;
  background: url('../img/kopf-zimmerei.jpg') center / cover no-repeat;
}
.abschnitt--beratung {
  background-image: url('../img/qualitaet-beratung.webp');
  background-size: contain;
  background-position: right 0 center;
  background-repeat: no-repeat;
}

/* Zeilenarten */
.zeile.zeile--text { margin: 25px auto; padding-top: 20px; }
.zeile.zeile--eng { margin: 16px auto; padding-top: 20px; }
.zeile.zeile--kacheln { margin: 16px auto; }
.zeile.zeile--projekt { margin: 16px auto; padding: 20px 0 13px; }
.zeile.zeile--video { margin: 19px auto; padding: 20px 0 11px; }
.zeile.zeile--buendig { padding: 0; }
.zeile.zeile--oben-14 { padding-top: 14px; }
.zeile.zeile--leitbild { padding-top: 30px; }
.zeile--leitbild .spalte > :not(:last-child) { margin-bottom: 1.5%; }
.zeile.zeile--voll { width: 100%; max-width: none; }
.zeile.zeile--weit { width: 100%; max-width: 1400px; }
.zeile.zeile--mosaik { width: 100%; max-width: none; padding: 0; border: 10px solid var(--farbe-weiss); grid-template-columns: 2fr 1fr 1fr; column-gap: 0; }
.zeile--mosaik .spalte > :not(:last-child) { margin-bottom: 0; }

/* ── Seitenkopf mit Bild ──────────────────────────────────────────────── */
.abschnitt.abschnitt--kopf {
  min-height: 80vh;
  padding: 398px 0 11px;
  background-color: transparent;
  background-image: var(--verlauf-kopf), var(--kopf-bild);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.abschnitt.abschnitt--kopf-start { padding: 34px 0; }
.abschnitt.abschnitt--kopf-team { padding: 40px 0 41px; }
.abschnitt.abschnitt--kopf-qualitaet { padding: 412px 0 41px; }
.abschnitt.abschnitt--kopf-mittel { min-height: 0; padding: 432px 0 31px; }
.abschnitt.abschnitt--kopf-recht { min-height: 50vh; padding: 276px 0 26px; }
.abschnitt.abschnitt--kopf-projekt { min-height: 0; padding: 666px 0 31px; }
.abschnitt--kopf .text { font-family: var(--schrift-zweit); font-size: 20px; }
.abschnitt--kopf .spalte > .text:first-child { margin-bottom: -14px; }
.abschnitt--kopf .spalte > .text + .text { margin-bottom: 28px; }
.abschnitt--kopf-team .spalte > .text + .text,
.abschnitt--kopf-qualitaet .spalte > .text + .text,
.abschnitt--kopf-mittel .spalte > .text + .text { margin-bottom: 2px; }
.abschnitt--kopf .spalte > .text.text--unterzeile-start { margin-bottom: 224px; }
.abschnitt--kopf h1 {
  font-family: var(--schrift);
  font-size: 5vw;
  font-weight: 800;
  line-height: 1.4em;
  text-align: center;
  text-transform: uppercase;
}
.abschnitt--kopf-lang h1 { font-size: 4vw; }
.abschnitt--kopf-projekt h1 { font-size: 3vw; }
.abschnitt--kopf h3 {
  font-size: 2vw;
  font-weight: 800;
  line-height: 1.8em;
  text-align: center;
  text-transform: uppercase;
}
.kopf--start { --kopf-bild: url('../img/kopf-start.jpg'); }
.kopf--leistungen { --kopf-bild: url('../img/kopf-leistungen.jpg'); }
.kopf--zimmerei { --kopf-bild: url('../img/kopf-zimmerei.jpg'); }
.kopf--dachgauben { --kopf-bild: url('../img/galerie/mannheim-06.webp'); }
.kopf--carport { --kopf-bild: url('../img/kopf-carport.jpg'); }
.kopf--vordaecher { --kopf-bild: url('../img/kopf-vordaecher.jpg'); }
.kopf--hallenbau { --kopf-bild: url('../img/kopf-hallenbau.jpg'); }
.kopf--holzstaenderbau { --kopf-bild: url('../img/kopf-holzstaenderbau.jpg'); }
.kopf--dachdeckerei { --kopf-bild: url('../img/kopf-dachdeckerei.jpg'); }
.kopf--spenglerarbeiten { --kopf-bild: url('../img/kopf-spenglerarbeiten.jpg'); }
.kopf--kranarbeiten { --kopf-bild: url('../img/kopf-kranarbeiten.jpg'); }
.kopf--photovoltaik { --kopf-bild: url('../img/kopf-photovoltaik.jpg'); }
.kopf--referenzprojekte { --kopf-bild: url('../img/kopf-referenzprojekte.jpg'); }
.kopf--karriere { --kopf-bild: url('../img/kopf-karriere.jpg'); }
.kopf--qualitaet { --kopf-bild: url('../img/kopf-qualitaet.jpg'); }
.kopf--recht { --kopf-bild: url('../img/kopf-recht.jpg'); }
.kopf--projekt-bauernhaus { --kopf-bild: url('../img/kopf-projekt-bauernhaus.webp'); }
.kopf--projekt-mannheim { --kopf-bild: url('../img/galerie/mannheim-07.webp'); }
/* Seiten, deren Kopfverlauf unten deckend ausläuft */
.seite--ueber-uns .abschnitt--kopf,
.seite--referenzprojekte .abschnitt--kopf,
.seite--karriere .abschnitt--kopf,
.seite--qualitaet .abschnitt--kopf,
.seite--impressum .abschnitt--kopf,
.seite--datenschutz .abschnitt--kopf,
.abschnitt--kopf-projekt { background-image: var(--verlauf-kopf-dunkel), var(--kopf-bild); }

/* ── Bausteine: Text ──────────────────────────────────────────────────── */
.text { overflow-wrap: break-word; }
.text h3 { font-size: 2vw; line-height: 1.8em; }
.text ul { padding: 0 0 1em 1em; line-height: 26px; list-style-type: disc; }
.text--hell, .text--hell h1, .text--hell h2, .text--hell h3, .text--hell h4 { color: var(--farbe-weiss); }
.text--mittig { text-align: center; }
.text--rechts { text-align: right; }

.text--leistungstitel { padding: 37px 50px 22px; background-color: var(--farbe-kasten); }
.text--leistungstitel h4 {
  font-size: .9vw;
  font-weight: 800;
  line-height: .9em;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.text--leistungstitel h2 { font-size: 2vw; font-weight: 800; line-height: 1.3em; }

.text.text--stimmen-titel h3 { font-weight: 700; }
.text--stimme {
  position: relative;
  margin-top: -125px;
  font-family: var(--schrift-zweit);
  font-size: 16px;
  line-height: 1.8em;
}
.text--hinweis {
  padding: 20px 30px;
  background-color: var(--farbe-hinweis);
  box-shadow: 10px 10px 0 0 var(--farbe-grau);
}
.text--innen { padding: 22px 15px; }
.spalte > .text--beratung-titel { padding: 10px 15px; margin-bottom: -4px; }
.text--beratung-titel h3 { font-weight: 800; }
.text--beratung-text { padding: 13px 2px; }
.spalte > .text--abstand-15 { margin-bottom: 15px; }
.spalte > .text--video-text { padding-bottom: 18px; margin-bottom: 2px; }
.text--impressum { line-height: 1.8em; }
.text--impressum h2 { font-size: 21px; }
.text--datenschutz h2 { font-size: 22px; line-height: 1.4em; }
.text.text--datenschutz h3 { font-size: 20px; line-height: 1.8em; }

/* ── Bausteine: Symbole ───────────────────────────────────────────────── */
.symbol { padding: 0; text-align: center; line-height: 0; }
.symbol svg { display: inline-block; }
.symbol--pfeil svg { width: 96px; height: 96px; color: var(--farbe-weiss); }
.symbol__link { display: inline-block; color: var(--farbe-weiss); }
.symbol--zitat svg { width: 200px; height: 200px; color: var(--farbe-grau); }

/* ── Bausteine: Leistungskachel ───────────────────────────────────────── */
.kachel {
  padding: 24px 0 0 24px;
  background: url('../img/kachel-ecke.png') left top no-repeat;
}
.kachel__titel {
  font-family: var(--schrift-zweit);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.7em;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: color .3s ease;
}
.kachel__titel:hover { color: var(--farbe-akzent); }
.kachel__text { position: relative; padding-bottom: 20px; font-family: var(--schrift-zweit); line-height: 1.6em; }
.kachel__aktion { padding: 0; text-align: right; }
.kachel__knopf {
  position: relative;
  display: inline-block;
  padding: .3em 2em .3em .7em;
  font-family: var(--schrift);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--farbe-titel);
  transition: color .3s ease;
}
.kachel__knopf:hover { color: var(--farbe-akzent); }
.kachel__pfeil { position: absolute; right: .5em; top: 50%; width: 1.1em; height: 1.1em; margin-top: -.55em; line-height: 0; }
.kachel__pfeil { opacity: 0; transition: opacity .3s ease; }
.kachel__knopf:hover .kachel__pfeil, .kachel__knopf:focus-visible .kachel__pfeil { opacity: 1; }
.kachel__pfeil svg { width: 100%; height: 100%; }

/* ── Bausteine: Bilder ────────────────────────────────────────────────── */
.bild { position: relative; line-height: 0; text-align: left; }
.bild__link { position: relative; display: inline-block; max-width: 100%; }
.bild--zoom { transition: transform .3s ease; }
.bild--zoom:hover { transform: scale(1.04); }
.bild--fuellend { padding: 10px; transition: transform .3s ease; }
.bild--fuellend:hover { transform: scale(1.02); }
.bild--fuellend .bild__datei { width: 100%; }
.bild__datei { transition: all .4s ease-in-out; }
/* ── Bausteine: Mauerwerk-Galerie ─────────────────────────────────────── */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galerie--mauerwerk { grid-auto-rows: 5px; row-gap: 0; align-items: start; }
.galerie__eintrag { display: block; overflow: hidden; line-height: 0; cursor: zoom-in; }
.galerie__bild { width: 100%; transition: transform .4s ease-in-out; }
.galerie__eintrag:hover .galerie__bild, .galerie__eintrag:focus-visible .galerie__bild { transform: scale(1.1); }

/* ── Bausteine: Leuchtkasten ──────────────────────────────────────────── */
.leuchtkasten {
  position: fixed; inset: 0; z-index: 500;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(11, 11, 11, .8);
}
.leuchtkasten--offen { display: flex; }
.leuchtkasten__bild { max-width: 90vw; max-height: 86vh; width: auto; height: auto; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.leuchtkasten__knopf {
  position: absolute;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--farbe-weiss);
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}
.leuchtkasten__knopf:hover, .leuchtkasten__knopf:focus-visible { opacity: 1; }
.leuchtkasten__knopf--zu { top: 10px; right: 10px; font-size: 36px; }
.leuchtkasten__knopf--zurueck { left: 10px; top: 50%; margin-top: -30px; }
.leuchtkasten__knopf--weiter { right: 10px; top: 50%; margin-top: -30px; }
.leuchtkasten__zaehler { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #f3f3f3; font-size: 12px; }

/* ── Bausteine: Merkmal mit Symbol ────────────────────────────────────── */
.merkmal { display: grid; grid-template-columns: auto 1fr; column-gap: 15px; align-items: start; }
.merkmal__symbol { display: block; line-height: 0; color: var(--farbe-apricot); }
.merkmal__symbol svg { width: 65px; height: 65px; }
.merkmal__titel { font-size: 20px; padding-bottom: 10px; line-height: 1em; }
.merkmal--abstand-23 .merkmal__titel { padding-top: 23px; }
.merkmal--abstand-15 .merkmal__titel { padding-top: 15px; }
.merkmal--abstand-5 .merkmal__titel { padding-top: 5px; }
.merkmal--fuss { font-family: var(--schrift-zweit); color: var(--farbe-weiss); }
.merkmal--fuss .merkmal__symbol { color: var(--farbe-weiss); }
.merkmal--fuss .merkmal__symbol svg { width: 32px; height: 32px; }
.merkmal--fuss .merkmal__titel {
  font-family: var(--schrift-zweit);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.7em;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--farbe-weiss);
}

/* ── Bausteine: Referenz-Raster mit Filter ────────────────────────────── */
.portfolio__filterliste { display: flex; flex-wrap: wrap; margin: 0 0 40px; padding: 0; list-style: none; }
.portfolio__filter {
  display: block;
  margin: -1px -1px 0 0;
  padding: 10px 20px;
  border: 1px solid #e2e2e2;
  background-color: var(--farbe-weiss);
  color: var(--farbe-titel);
  font-size: 14px;
  line-height: 1em;
  cursor: pointer;
}
.portfolio__filterliste li:first-child .portfolio__filter { border-radius: 3px 0 0 3px; }
.portfolio__filterliste li:last-child .portfolio__filter { border-radius: 0 3px 3px 0; }
.portfolio__filter:hover { color: var(--farbe-text); background-color: var(--farbe-grau); }
.portfolio__filter--aktiv, .portfolio__filter--aktiv:hover { background-color: #f9f9f9; }
.portfolio::after { content: ""; display: block; height: 37px; border-top: 1px solid #e2e2e2; }
.portfolio__raster { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--spaltenabstand); row-gap: 0; }
.portfolio__eintrag { margin-bottom: 26.3%; }
.portfolio__eintrag[hidden] { display: none; }
.portfolio__bildlink { position: relative; display: block; line-height: 0; }
.portfolio__bild { width: 100%; }
.portfolio__ueberlagerung {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: hsla(0, 0%, 100%, .9);
  border: 1px solid #e5e5e5;
  color: var(--farbe-akzent);
  opacity: 0;
  transition: opacity .3s;
}
.portfolio__ueberlagerung svg { width: 32px; height: 32px; }
.portfolio__bildlink:hover .portfolio__ueberlagerung { opacity: 1; }
.portfolio__titel { margin: 10px 0 0; padding-bottom: 0; font-size: 16px; line-height: 1.6em; }
.portfolio__titel a { color: var(--farbe-titel); }
.portfolio__meta { margin: .4em 0 0; padding: 0; font-size: 14px; line-height: 36px; }
.portfolio__meta a { color: var(--farbe-text); }

/* ── Bausteine: Video mit Zwei-Klick-Lösung ───────────────────────────── */
.spalte > .video--abstand-56 { margin-bottom: 56px; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.video__vorschau { position: absolute; inset: 0; }
.video__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__hinweis {
  position: absolute;
  inset: min(96px, 9.4%);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 16px;
  padding: 16px;
  overflow: auto;
  border-radius: 4px;
  background: rgba(0, 0, 0, .8);
  color: var(--farbe-weiss);
  font-size: 14px;
  line-height: 1.25em;
  text-align: center;
}
.video__abspielen {
  position: absolute; top: -17px; left: 50%;
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-left: -17px;
  border-radius: 50%;
  background: var(--farbe-weiss);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  color: #000;
}
.video__hinweis { overflow: visible; }
.video__abspielen svg { width: 14px; height: 14px; margin-left: 2px; }
.video__text { padding: 0 0 16px; border-bottom: 1px solid var(--farbe-video-link); }
.video__links, .video__aktion { padding: 0; }
.video__info { color: var(--farbe-video-link); }
.video__info:hover { color: var(--farbe-video-link-hover); }
.video__knopf {
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 20px;
  background-color: var(--farbe-video-knopf);
  color: var(--farbe-weiss);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5em;
  cursor: pointer;
  transition: background-color .4s;
}
.video__knopf:hover { background-color: var(--farbe-video-knopf-hover); }
.video__rahmen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Bausteine: Kategorie-Archiv ──────────────────────────────────────── */
.abschnitt.abschnitt--archiv { padding: 58px 0 0; }
.archiv { display: grid; grid-template-columns: 79.125% 20.875%; width: 80%; max-width: var(--inhalt-breite); margin: 0 auto; }
.archiv__liste { padding: 0 5.5% 23px 0; }
.archiv__liste > .archiv__eintrag { padding-right: 0; }
.archiv__eintrag { margin-bottom: 60px; }
.archiv__bildlink { display: block; margin-bottom: 26px; line-height: 0; }
.archiv__bild { width: 100%; }
.archiv__titel { font-size: 29px; line-height: 1em; }
.archiv__titel a { color: var(--farbe-titel); }
.archiv__meta { margin-bottom: 6px; padding-bottom: 15px; font-size: 14px; line-height: 36px; }
.archiv__auszug { padding: 0; }
.archiv__seitenleiste { padding-left: 30px; border-left: 1px solid #e2e2e2; }
.archiv__widget { margin-bottom: 30px; }
.archiv__widgettitel { padding-bottom: 10px; font-size: 20px; line-height: 1em; }
.archiv__widget ul { padding: 0; list-style: none; }
.archiv__widget li { margin-bottom: 9px; }
.archiv__widget a { color: var(--farbe-text); }

/* ── Seitengerüst: Fußbereich ─────────────────────────────────────────── */
.fragen { padding: 20px 0; background-color: var(--farbe-apricot); }
.fragen__titel { font-size: 24px; font-weight: 800; line-height: 1.8em; }
.fragen__telefon { padding-top: 32px; font-family: var(--schrift); font-size: 30px; font-weight: 800; }

.kontakt {
  padding: 48px 0 0;
  background-color: var(--farbe-titel);
  background-image: radial-gradient(circle at top right, #210b00 10%, rgba(33, 25, 21, .36) 100%), url('../img/fuss-hintergrund.jpg');
  background-size: cover;
  background-position: center;
}
.zeile.kontakt__zeile { padding-bottom: 47px; }

.formular { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3%; row-gap: 0; }
.formular__feld { grid-column: 1 / -1; margin-bottom: 20px; padding: 0; }
.formular__feld--halb { grid-column: auto; }
.formular__label { display: block; padding-bottom: 4px; font-family: var(--schrift-zweit); font-size: 14px; line-height: 1.6em; color: var(--farbe-weiss); }
.formular__pflicht { color: var(--farbe-apricot); }
.formular__eingabe {
  display: block;
  width: 100%;
  padding: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 0;
  background-color: transparent;
  color: var(--farbe-weiss);
  font-family: var(--schrift-zweit);
  font-size: 16px;
  line-height: 2em;
  -webkit-appearance: none;
  appearance: none;
}
.formular__eingabe::placeholder { color: var(--farbe-weiss); opacity: 1; }
.formular__eingabe:focus { border-color: var(--farbe-weiss); outline: none; }
.formular__eingabe--text { min-height: 150px; resize: vertical; }
.formular__feld--auswahl { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; color: var(--farbe-weiss); }
.formular__feld--auswahl .formular__label { grid-column: 1 / -1; }
.formular__haken {
  width: 20px; height: 20px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.formular__haken:checked::before {
  content: "";
  width: 10px; height: 6px;
  margin-top: -3px;
  border-left: 2px solid var(--farbe-weiss);
  border-bottom: 2px solid var(--farbe-weiss);
  transform: rotate(-45deg);
}
.formular__hakentext { font-family: var(--schrift-zweit); font-size: 16px; line-height: 1.6em; color: var(--farbe-weiss); cursor: pointer; }
.formular__hakentext a { color: var(--farbe-weiss); text-decoration: underline; }
.formular__honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: -1.5%; }
.formular__meldung { flex: 1; padding: 0; font-family: var(--schrift-zweit); font-size: 16px; line-height: 1.6em; color: var(--farbe-weiss); }
.formular__meldung:empty { display: none; }
.formular__meldung--fehler { color: var(--farbe-apricot); }
.formular__senden {
  position: relative;
  padding: .3em 1em;
  border: 2px solid var(--farbe-weiss);
  border-radius: 0;
  background: transparent;
  color: var(--farbe-weiss);
  font-family: var(--schrift);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7em;
  cursor: pointer;
  transition: all .3s;
}
.formular__senden::after {
  content: "";
  position: absolute;
  right: .8em; top: 50%;
  width: .4em; height: .4em;
  margin-top: -.2em;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .3s;
}
.formular__senden:hover, .formular__senden:focus-visible { padding: .3em 2em .3em .7em; background-color: rgba(0, 0, 0, .05); }
.formular__senden:hover::after, .formular__senden:focus-visible::after { opacity: 1; }
.formular__senden[disabled] { opacity: .6; cursor: progress; }

.fussleiste {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--spaltenabstand);
  padding: 18px 0;
  background-color: rgba(64, 64, 66, .45);
}
.fussleiste p { padding: 0; }
.fussleiste__copyright { margin-left: 80px; color: var(--farbe-weiss); font-weight: 500; }
.fussleiste__recht { text-align: center; }
.fussleiste__webdesign { margin-right: 80px; text-align: right; }
.fussleiste a { color: var(--farbe-weiss); transition: color .3s ease; }
.fussleiste a:hover { color: var(--farbe-titel); }

/* ── Nach-oben-Knopf ──────────────────────────────────────────────────── */
.nach-oben {
  position: fixed;
  right: 0; bottom: 125px;
  z-index: 90;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 5px;
  border: 0;
  border-radius: 5px 0 0 5px;
  background: rgba(0, 0, 0, .4);
  color: var(--farbe-weiss);
  cursor: pointer;
}
.nach-oben[hidden] { display: none; }
.nach-oben svg { width: 30px; height: 30px; }

/* ── Einblenden beim Scrollen ─────────────────────────────────────────── */
/* Werte aus Divi: zoom 50 % = scale(.5), slideTop 20 %, slideBottom 50 %, fade, Blurb-Symbole fadeTop (−10 %) */
[data-einblenden] { transition: opacity 1s ease-in-out, transform 1s ease-in-out; }
[data-einblenden].ist-versteckt { opacity: 0; }
[data-einblenden="zoom"].ist-versteckt { transform: scale(.5); }
[data-einblenden="von-oben"].ist-versteckt { transform: translateY(-20%); }
[data-einblenden="von-unten"].ist-versteckt { transform: translateY(50%); }
[data-einblenden="einfliegen"] { transition: opacity 1s cubic-bezier(.77, 0, .175, 1), transform 1s cubic-bezier(.77, 0, .175, 1); }
[data-einblenden="einfliegen"].ist-versteckt { transform: translateY(-10%); }

/* ── Umbrüche ─────────────────────────────────────────────────────────── */
@media (min-width: 1350px) {
  .abschnitt { padding: 54px 0; }
  .zeile { padding: 27px 0; }
}

@media (max-width: 980px) {
  body { padding-top: var(--kopf-versatz-mobil); font-size: 16px; }
  .abschnitt { padding: 50px 0; }
  .zeile { padding: 30px 0; row-gap: 30px; }
  .zeile--halb, .zeile--drittel, .zeile--zweidrittel { grid-template-columns: 1fr; }
  .zeile--halb-viertel { grid-template-columns: 1fr 1fr; }
  .zeile--halb-viertel > .spalte--halb { grid-column: 1 / -1; }
  .spalte > :not(:last-child),
  .spalte--voll > :not(:last-child),
  .spalte--halb > :not(:last-child),
  .spalte--drittel > :not(:last-child),
  .spalte--viertel > :not(:last-child),
  .spalte--zweidrittel > :not(:last-child) { margin-bottom: 30px; }
  .zeile.zeile--text { padding-top: 20px; }
  .zeile.zeile--eng { padding-top: 20px; }
  .zeile.zeile--projekt { padding: 20px 0 13px; }
  .zeile.zeile--video { padding: 20px 0 11px; }
  .zeile.zeile--buendig, .zeile.zeile--mosaik { padding: 0; }
  .zeile.zeile--oben-14 { padding-top: 14px; }
  .zeile.zeile--mosaik { row-gap: 0; grid-template-columns: 1fr 1fr; }

  /* Kopfleiste mobil */
  .kopfleiste, .kopfleiste--fixiert { position: absolute; height: var(--kopf-hoehe-mobil); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
  .kopfleiste__logobild, .kopfleiste--fixiert .kopfleiste__logobild { height: 43px; }
  .menueknopf {
    display: block;
    justify-self: end;
    width: 40px; height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menueknopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menueknopf__balken, .menueknopf__balken::before, .menueknopf__balken::after {
    display: block;
    width: 22px; height: 2px;
    margin: 0 auto;
    background: var(--farbe-mobilmenue);
    transition: transform .3s, background-color .3s;
  }
  .menueknopf__balken { position: relative; }
  .menueknopf__balken::before, .menueknopf__balken::after { content: ""; position: absolute; left: 0; }
  .menueknopf__balken::before { top: -7px; }
  .menueknopf__balken::after { top: 7px; }
  .hauptmenue {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    padding: 5%;
    background: var(--farbe-weiss);
    border-top: 3px solid var(--farbe-akzent);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  }
  .kopfleiste--fixiert .hauptmenue { padding-top: 5%; }
  .kopfleiste--offen .hauptmenue { display: block; }
  .hauptmenue__liste { display: block; line-height: 2em; }
  .hauptmenue__liste { line-height: 1.7em; }
  .hauptmenue__liste > .hauptmenue__punkt { padding-right: 0; font-size: 14px; font-weight: 400; }
  .hauptmenue__liste > .hauptmenue__punkt > .hauptmenue__link,
  .kopfleiste--fixiert .hauptmenue__liste > .hauptmenue__punkt > .hauptmenue__link,
  .hauptmenue__liste > .hauptmenue__punkt--mit-unter > .hauptmenue__link,
  .hauptmenue__unter .hauptmenue__link {
    width: auto;
    padding: 10px 5%;
    font-size: 14px;
    line-height: 1.7em;
    letter-spacing: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .03);
  }
  .hauptmenue__punkt--mit-unter > .hauptmenue__link { font-weight: 600; background-color: rgba(0, 0, 0, .03); }
  .hauptmenue__punkt--mit-unter > .hauptmenue__link::after { display: none; }
  .hauptmenue__unter, .hauptmenue__unter--ebene-2 {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
  }
  .hauptmenue__unter .hauptmenue__punkt { padding: 0 0 0 5%; font-size: 14px; line-height: 1.7em; }
  .hauptmenue__liste .hauptmenue__punkt--aktiv > .hauptmenue__link,
  .hauptmenue__liste .hauptmenue__punkt--vorfahr > .hauptmenue__link,
  .kopfleiste--fixiert .hauptmenue__liste > .hauptmenue__punkt--aktiv > .hauptmenue__link,
  .kopfleiste--fixiert .hauptmenue__liste > .hauptmenue__punkt--vorfahr > .hauptmenue__link { color: var(--farbe-menue); }

  .abschnitt.abschnitt--kopf { min-height: 73vh; }
  .abschnitt.abschnitt--kopf-mittel, .abschnitt.abschnitt--kopf-projekt { min-height: 0; }
  .abschnitt.abschnitt--kopf-recht { min-height: 50vh; }
  .abschnitt--kopf h1, .abschnitt--kopf-lang h1, .abschnitt--kopf-projekt h1 { font-size: 44px; }
  .abschnitt--kopf h3, .text h3, .text.text--datenschutz h3 { font-size: 4vw; }

  .portfolio__raster { grid-template-columns: repeat(3, 1fr); }
  .kachel__pfeil { opacity: 1; }
  .archiv { grid-template-columns: 1fr; }
  .archiv__liste { padding-right: 0; }
  .archiv__seitenleiste { padding: 0 0 40px; border: 0; }

  .fussleiste { grid-template-columns: 1fr; row-gap: 0; padding: 18px 10%; }
  .fussleiste__copyright, .fussleiste__recht, .fussleiste__webdesign { margin: 0; text-align: center; }
}

@media (max-width: 767px) {
  .abschnitt.abschnitt--kopf { min-height: 72vh; }
  .abschnitt--kopf .text { font-size: 16px; }
  .abschnitt--kopf h1, .abschnitt--kopf-lang h1, .abschnitt--kopf-projekt h1 { font-size: 24px; }
  .abschnitt--kopf h3, .text h3, .text.text--datenschutz h3 { font-size: 6vw; }
  .text--leistungstitel { padding: 20px 10%; }
  .text--leistungstitel h2, .text--stimmen-titel h2, .fragen__titel { font-size: 18px; }
  .portfolio__raster { grid-template-columns: repeat(2, 1fr); }
  .formular { grid-template-columns: 1fr; }
  .formular__feld--halb { grid-column: 1 / -1; }
  .video { aspect-ratio: auto; }
  .video__vorschau { position: relative; padding: 30px 16px 16px; }
  .video__hinweis { position: relative; inset: auto; }
}

@media (max-width: 479px) {
  .zeile--halb-viertel, .zeile.zeile--mosaik { grid-template-columns: 1fr; }
  .portfolio__raster { grid-template-columns: 1fr; }
}