/* ==========================================================================
   Dirk Thiesen Fotografie – Stylesheet der statischen Kopie (Durchgang 2)
   Reihenfolge: Schriften · Wertetafel · Grundlagen · Seitengerüst · Bausteine ·
   Umbrüche · weniger Bewegung.
   Umbrüche wie im Original: 980 / 767 px (Divi), 600 px (Kundenstimmen).
   Farben, Schriften, Bilder, Texte und Aufbau stammen unverändert aus
   Durchgang 1; verbessert sind Stufenleitern, Abstände, Kontraste, Fokus,
   Formular und Details.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1  Schriften – lokal ausgeliefert, nur latin + latin-ext
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  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;
  font-display: swap;
  src: url('../fonts/opensans-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/opensans-500.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: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/roboto-900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/roboto-900.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: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ubuntu-300-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ubuntu-300.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: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400.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: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700.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  Wertetafel – alle Werte stehen hier, danach keine harte Farbe mehr
   -------------------------------------------------------------------------- */

:root {
  /* Farben der Vorlage (unverändert) */
  --weiss: #ffffff;
  --schwarz: #000000;
  --grund-dunkel: rgba(0, 0, 0, .85);   /* auf Weiß gerendert: #262626 */
  --titel-grau: #5b5b5b;
  --text-grau: #666666;
  --einleitung-grau: #9e9e9e;
  --icon-grau: #969696;
  --feld-grund: #212121;
  --knopf-grund: #565656;
  --menue-text: rgba(0, 0, 0, .6);
  --menue-aktiv: #171717;
  --mobilmenue-text: #2b2b2b;
  --mobilmenue-hauch: rgba(0, 0, 0, .03);
  --rot: #da261d;

  /* Abgeleitete Stufen – nur aufgehellte Fassungen vorhandener Farben */
  --titel-grau-hell: #808080;   /* aus #5b5b5b, für Überschriften auf Dunkel: 3,8:1 statt 2,2:1 */
  --rot-hell: #e8453c;          /* aus #da261d, für Zustände auf Dunkel: 5,4:1 statt 4,3:1 */

  /* Abgeleitete Textfarben */
  --text: var(--text-grau);
  --text-auf-dunkel: var(--weiss);
  --text-leise-auf-dunkel: var(--einleitung-grau);   /* 7,8:1 auf Schwarz */
  --titel-auf-hell: var(--titel-grau);               /* 6,8:1 auf Weiß */
  --titel-auf-dunkel: var(--titel-grau-hell);
  --eingabe-text: var(--weiss);                      /* 16,1:1 im Feld */
  --feld-rahmen: var(--titel-grau);                  /* 3,1:1 gegen Schwarz */
  --fehler: var(--rot);
  --fehler-hell: var(--rot-hell);

  /* Fokus: weißer Ring mit dunklem Hof. Der Ring trägt den Kontrast auf
     dunklem Grund, der Hof auf Weiß und auf dem grauen Senden-Knopf. */
  --fokus: var(--weiss);
  --fokus-hof: rgba(0, 0, 0, .8);

  /* Kundenstimmen-Punkte und Leuchtkasten */
  --punkt: rgba(0, 0, 0, .5);
  --punkt-hover: rgba(0, 0, 0, .7);
  --punkt-aktiv: rgba(0, 0, 0, .9);
  --punkt-innen: rgba(0, 0, 0, .3);
  --leuchtkasten-grund: rgba(11, 11, 11, .8);
  --leuchtkasten-zaehler: #cccccc;

  /* Hover-Schleier der Galerien. Das Modul-CSS des Originals setzt
     `.dmg_masonry_gallery_0 .et_overlay { background-color: transparent }` und
     `.et_overlay:before { color: transparent !important }` – sichtbar ist nur der
     Zoom. Soll stattdessen der Divi-Grundzustand (weißer Schleier mit Lupe) gelten:
     rgba(255, 255, 255, .9) url("../img/lupe.svg") center / 32px no-repeat */
  --galerie-schleier: transparent;

  /* Schatten: weich und warm getönt statt hartem Schwarz */
  --schatten-bild: 24px 32px 24px -12px rgba(16, 12, 9, .55);
  --schatten-klappmenue: 0 2px 8px rgba(0, 0, 0, .18);
  --schatten-leuchtkasten: 0 0 8px rgba(0, 0, 0, .6);

  /* Schriftfamilien */
  --schrift-grund: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
  --schrift-titel: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
  --schrift-einleitung: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --schrift-kontakt: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  --schrift-zitat: Georgia, 'Times New Roman', serif;

  /* Schriftgrößen: eine Stufenleiter, keine Einzelwerte je Baustein */
  --fs-klein:    0.875rem;   /* 14 – Etiketten, Klappmenü, Zähler */
  --fs-text:     1rem;       /* 16 – Fließtext, Menü, Rechtstexte */
  --fs-gross:    1.125rem;   /* 18 – Adressblock, Eingaben, Name der Stimme */
  --fs-groesser: 1.25rem;    /* 20 – h3 der Rechtstexte */
  --fs-h2:       1.375rem;   /* 22 – h2 der Rechtstexte */
  --fs-einleitung:     clamp(1.0625rem, 0.88rem + 0.78vw, 1.5rem);      /* 17 → 24 */
  --fs-zitat:          clamp(1.0625rem, 0.855rem + 0.88vw, 1.5625rem);  /* 17 → 25 */
  --fs-zwischentitel:  clamp(1.375rem, 1.19rem + 0.77vw, 1.8125rem);    /* 22 → 29 */
  --fs-abschnitt:      clamp(1.375rem, 1.20rem + 1.60vw, 2.125rem);     /* 22 → 34; die Untergrenze hält die gesperrte Zeile „KUNDENSTIMMEN“ auf 320 px in der Zeile */
  --fs-seitenkopf:     clamp(2rem, 1.30rem + 2.60vw, 2.875rem);         /* 32 → 46 */
  --fs-seitenkopf-lang: clamp(1.25rem, 6vw, 2.875rem);                  /* 20 → 46, langes Einzelwort („Datenschutzerklärung“) */
  --fs-buehne:         clamp(2.5rem, 1.20rem + 4.80vw, 4.25rem);        /* 40 → 68 */

  /* Zeilenhöhen: einheitenlos */
  --zeile-titel: 1.1;
  --zeile-zwischentitel: 1.3;
  --zeile-einleitung: 1.5;
  --zeile-text: 1.7;

  /* Sperrung der Versalien-Überschriften, mitwachsend */
  --sperrung-buehne: clamp(0.2em, 1.7vw, 0.32em);
  --sperrung-abschnitt: clamp(0.15em, 1.3vw, 0.5em);
  --sperrung-menue: 0.0625em;
  --sperrung-knopf: 0.14em;

  /* Abstandsleiter (Vielfache von 8) */
  --raum-1: 0.5rem;    /*  8 */
  --raum-2: 1rem;      /* 16 */
  --raum-3: 1.5rem;    /* 24 */
  --raum-4: 2rem;      /* 32 */
  --raum-5: 3rem;      /* 48 */
  --raum-6: 4rem;      /* 64 */
  --raum-7: 6rem;      /* 96 */

  --abschnitt-luft: clamp(3rem, 1.6rem + 5.6vw, 5rem);          /* 48 → 80 */
  --abschnitt-luft-klein: clamp(1.5rem, 0.8rem + 2.8vw, 2.5rem); /* 24 → 40 */
  --seitenrand: clamp(1.5rem, 13.3vw - 1.6rem, 8rem);            /* 24 → 128 */
  --galerie-abstand: 10px;   /* Rasterfuge der Galerie, main.js rechnet damit */
  --lesebreite: 62ch;

  /* Maße des Kopfes (Geometrie der Vorlage) */
  --zeile-max: 1080px;
  --zeile-max-breit: 1430px;
  /* Menüleiste: am Original gemessen – 35 px Luft über dem Menütext, 31 px
     darunter, Logo-Abschnitt mit 25 px Polster. Die Werte stehen bewusst
     neben der 8er-Leiter, weil sie das Original pixelgenau treffen. */
  --menue-hoehe: 2.75rem;        /* 44 – Höhe der Klickfläche eines Menülinks */
  --menue-link-polster: 14px;    /* 2 × 14 + 16 px Zeile = 44 px Klickfläche */
  --menue-luft-oben: 23px;
  --menue-luft-unten: 18px;
  --logo-polster: 25px;
  --hero-abzug: 10px;        /* Hero = Fensterhöhe minus 10 px, unabhängig von der Breite (am Original gemessen) */
  --hero-versatz: 72px;      /* Hero beginnt 72 px oberhalb der Seitenkante */

  /* Ebenen */
  --z-menue: 20;
  --z-klappmenue: 60;
  --z-leuchtkasten: 70;
  --z-sprunglink: 80;

  /* Übergänge */
  --dauer-kurz: 200ms;
  --dauer: 250ms;
  --dauer-lang: 300ms;
}


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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-grund);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: var(--zeile-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ist-gesperrt {
  overflow: hidden;
}

/* Sprungziele nicht hart an der Fensterkante enden lassen */
:where([id]) {
  scroll-margin-top: var(--raum-3);
}

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

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  font-weight: 500;
  line-height: var(--zeile-titel);
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  margin: 0;
  padding: 0 0 1em;
  text-wrap: pretty;
}

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

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

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

/* Ein Fokusring, der auf Weiß, auf den dunklen Flächen und auf dem grauen
   Senden-Knopf sichtbar bleibt: weißer Ring, außen von einem dunklen Hof
   gefasst. Auf Weiß trägt der Hof (12,6:1), auf Dunkel der Ring (bis 21:1). */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--fokus-hof);
}

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

.sprunglink {
  position: absolute;
  top: -80px;
  left: var(--raum-1);
  z-index: var(--z-sprunglink);
  padding: var(--raum-1) var(--raum-2);
  background-color: var(--weiss);
  color: var(--menue-aktiv);
  font-weight: 600;
}

.sprunglink:focus {
  top: var(--raum-1);
}


/* --------------------------------------------------------------------------
   4  Seitengerüst
   -------------------------------------------------------------------------- */

/* Abschnitte */
.abschnitt {
  position: relative;
}

.abschnitt--dunkel {
  background-color: var(--grund-dunkel);
}

.abschnitt--hell {
  background-color: var(--weiss);
}

.abschnitt--standard,
.abschnitt--breit,
.abschnitt--stimmen {
  padding-block: var(--abschnitt-luft);
}

.abschnitt--galerie {
  padding-block: var(--abschnitt-luft-klein);
}

/* Zeilen: Breite aus Deckel und fließendem Seitenrand */
.zeile {
  --zeile-deckel: var(--zeile-max);
  width: min(var(--zeile-deckel), 100% - 2 * var(--seitenrand));
  margin-inline: auto;
  padding-block: var(--raum-3);
}

.zeile--breit {
  --zeile-deckel: var(--zeile-max-breit);
}

.zeile.zeile--voll {
  width: 100%;
  padding-block: 0;
}

.zeile.zeile--titel {
  padding-block: var(--raum-3) var(--raum-6);
}

.zeile.zeile--galerietitel {
  padding-block: var(--raum-3);
}

.zeile.zeile--text {
  padding-block: var(--raum-2) var(--raum-3);
}

.zeile.zeile--ich-bilder {
  padding-block: var(--raum-7) var(--raum-3);
}

/* Kopf der Unterseiten */
.kopf {
  background-color: var(--weiss);
}

.kopf__logo-zeile {
  width: 89%;
  margin-inline: auto;
  padding-block: var(--logo-polster);
}

.kopf__logo {
  display: block;
  width: 29.6667%;
  margin-inline: auto;
}

.kopf__logo img {
  display: block;
}

/* Kopf der Startseite: Vollbild-Hero */
.hero {
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--hero-abzug) - var(--hero-versatz));
  height: calc(100svh - var(--hero-abzug) - var(--hero-versatz));
  background-color: var(--weiss);
}

.hero picture {
  display: block;
}

.hero__bild {
  position: absolute;
  top: calc(-1 * var(--hero-versatz));
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--hero-abzug));
  height: calc(100svh - var(--hero-abzug));
  object-fit: cover;
}

.hero__titel {
  position: absolute;
  top: calc((100vh - var(--hero-abzug)) / 2 - var(--hero-versatz));
  top: calc((100svh - var(--hero-abzug)) / 2 - var(--hero-versatz));
  left: 50%;
  width: min(825px, 100% - 2 * var(--raum-1));
  margin: 0;
  padding: 0;
  line-height: 0;
  transform: translate(-50%, -50%);
}

.hero__logo {
  display: block;
  width: 100%;
  animation: logo-scharf 1.3s ease-out 1s both;
}

@keyframes logo-scharf {
  from {
    opacity: .5;
    filter: blur(71px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Menüleiste */
.menue {
  position: relative;
  z-index: var(--z-menue);
  padding-top: var(--menue-luft-oben);
  padding-bottom: var(--menue-luft-unten);
  background-color: var(--weiss);
}

.menue__innen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--menue-hoehe);
  padding-inline: var(--raum-3);
}

.menue__schalter {
  display: none;
}

.menue__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menue__liste a {
  display: block;
  padding: var(--menue-link-polster) var(--raum-2);
  color: var(--menue-text);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--sperrung-menue);
  text-transform: uppercase;
  transition: color var(--dauer) ease-in-out;
}

.menue__liste a:hover,
.menue__liste a:focus-visible {
  color: var(--menue-aktiv);
}

.menue__liste a[aria-current="page"] {
  color: var(--menue-aktiv);
  font-weight: 700;
}

/* Fuß: Kontaktbereich */
.kontakt {
  background-color: var(--schwarz);
}

.zeile.zeile--kontakttitel {
  padding-block: var(--raum-3);
}

.zeile.zeile--kontakteinleitung {
  padding-block: 0 var(--raum-3);
}

.kontakt__einleitung {
  max-width: var(--lesebreite);
  margin-inline: auto;
  padding: 0;
  color: var(--text-leise-auf-dunkel);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-einleitung);
  font-weight: 300;
  line-height: var(--zeile-einleitung);
  text-align: center;
}

.zeile.kontakt__raster {
  display: grid;
  grid-template-columns: 28% 64%;
  column-gap: 8%;
  align-items: start;
  padding-block: var(--raum-5);
}

.kontakt__adresse {
  color: var(--text-auf-dunkel);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-gross);
  font-weight: 300;
  line-height: var(--zeile-einleitung);
}

.kontakt__adresse strong {
  font-weight: 700;
}

/* Fuß: Copyright-Leiste */
.fussleiste {
  padding-top: 1px;
  background-color: var(--schwarz);
}

.fussleiste__innen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 5.5%;
  width: min(2560px, 100% - 2 * var(--seitenrand));
  margin-inline: auto;
  padding-block: var(--raum-3);
}

.fussleiste__innen p {
  padding: 0;
}

.fussleiste__copy {
  color: var(--text-auf-dunkel);
  text-align: left;
}

.fussleiste__recht {
  color: var(--text-leise-auf-dunkel);
  text-align: center;
}

.fussleiste__credit {
  text-align: right;
}

.fussleiste a {
  color: var(--text-auf-dunkel);
  transition: color var(--dauer) ease;
}

.fussleiste a:hover,
.fussleiste a:focus-visible {
  color: var(--fehler-hell);
}


/* --------------------------------------------------------------------------
   5  Bausteine
   -------------------------------------------------------------------------- */

/* Große Überschriften */
.titel {
  margin: 0 auto;
  color: var(--titel-auf-hell);
  font-family: var(--schrift-titel);
  font-weight: 900;
  line-height: var(--zeile-titel);
  text-align: center;
  text-transform: uppercase;
}

.abschnitt--dunkel .titel,
.kontakt .titel {
  color: var(--titel-auf-dunkel);
}

.titel--zitat {
  font-size: var(--fs-seitenkopf);
}

.titel--gesperrt {
  font-size: var(--fs-abschnitt);
  letter-spacing: var(--sperrung-abschnitt);
  text-indent: var(--sperrung-abschnitt);   /* gleicht die Sperrung hinter dem letzten Buchstaben aus */
}

.titel--kontakt {
  font-size: var(--fs-buehne);
  letter-spacing: var(--sperrung-buehne);
  text-indent: var(--sperrung-buehne);
}

.titel--datenschutz {
  font-size: var(--fs-seitenkopf-lang);
}

.titel--impressum,
.titel--fehlerseite {
  font-size: var(--fs-seitenkopf);
}

/* Titel über den Galerien */
.galerietitel {
  margin: 0;
  padding: 0;
  color: var(--titel-auf-dunkel);
  font-family: var(--schrift-titel);
  font-size: var(--fs-zwischentitel);
  font-weight: 900;
  line-height: var(--zeile-zwischentitel);
  text-align: center;
}

/* Einleitungstexte auf dunklem Grund */
/* Volle Inhaltsbreite wie im Original (1012 px bei 1280 px Fenster) –
   die Lesebreite gilt nur für die langen Rechtstexte. */
.einleitung {
  color: var(--text-auf-dunkel);
  font-family: var(--schrift-einleitung);
  font-size: var(--fs-einleitung);
  font-weight: 500;
  line-height: var(--zeile-einleitung);
}

.einleitung p {
  padding-bottom: var(--raum-3);
}

/* Startseite: Bildraster */
.raster {
  background-color: var(--grund-dunkel);
}

.raster__zeile {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  background-color: var(--schwarz);
}

.raster__zeile--gespiegelt {
  grid-template-columns: 2fr 1fr;
}

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

.raster__feld img {
  display: block;
  width: 100%;
}

/* Galerien: Mauerwerk in drei Spalten. Ohne Skript ein Dreierraster. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--galerie-abstand);
  align-items: start;
}

.galerie--mauerwerk {
  row-gap: 0;
}

.galerie__spalte {
  display: grid;
  row-gap: var(--galerie-abstand);
  align-content: start;
  min-width: 0;
}

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

/* Die Bilder stecken in <picture>; das Element selbst darf keine Zeile bilden. */
.galerie__feld picture,
.raster__feld picture,
.ich-bild picture,
.leuchtkasten__figur picture {
  display: block;
}

.galerie__feld img {
  display: block;
  width: 100%;
  transition: transform var(--dauer-lang) ease-in-out;
}

.galerie__feld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--galerie-schleier);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dauer-lang) ease;
}

.galerie__feld:hover img,
.galerie__feld:focus-visible img {
  transform: scale(1.1);
}

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

/* Businessfotografie: Referenzen */
.referenzen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 5.5%;
  row-gap: var(--raum-5);
  align-items: start;
}

.referenzen__logo {
  display: grid;
  justify-self: start;
}

.referenzen__logo--mitte {
  grid-column: 2;
}

.referenzen__logo picture {
  display: block;
  grid-area: 1 / 1;
}

.referenzen__logo img {
  display: block;
}

.referenzen__logo picture + picture {
  opacity: 0;
  transition: opacity var(--dauer) ease;
}

.referenzen__logo:hover picture + picture {
  opacity: 1;
}

/* Kundenstimmen */
.stimmen {
  text-align: center;
}

.stimmen__folien {
  display: grid;
}

.stimme {
  grid-area: 1 / 1;
  margin: 0;
  padding-inline: var(--raum-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dauer-lang) ease, visibility var(--dauer-lang) ease;
}

.stimme.ist-aktiv {
  opacity: 1;
  visibility: visible;
}

.stimme__zitat {
  margin: 0;
}

.stimme__zitat p {
  max-width: var(--lesebreite);
  margin-inline: auto;
  padding: 0;
  color: var(--titel-auf-hell);
  font-family: var(--schrift-zitat);
  font-size: var(--fs-zitat);
  font-style: italic;
  font-weight: 400;
  line-height: var(--zeile-text);
}

.stimme__name {
  margin-top: var(--raum-3);
  color: var(--titel-auf-hell);
  font-family: var(--schrift-zitat);
  font-size: var(--fs-gross);
  font-style: italic;
  font-weight: 700;
  line-height: var(--zeile-einleitung);
  text-transform: uppercase;
}

.stimmen__punkte {
  display: flex;
  justify-content: center;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
}

.stimmen__punkt {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-color: var(--punkt);
  box-shadow: inset 0 0 3px var(--punkt-innen);
  cursor: pointer;
  transition: background-color var(--dauer) ease;
}

.stimmen__punkt:hover {
  background-color: var(--punkt-hover);
}

.stimmen__punkt[aria-current="true"] {
  background-color: var(--punkt-aktiv);
  cursor: default;
}

/* Ich: zwei versetzte Bildspalten */
.ich-bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 5.5%;
  align-items: start;
}

.ich-bilder__spalte {
  min-width: 0;
}

.ich-bild {
  display: block;
  margin: 0 0 var(--raum-4);
  line-height: 0;
}

.ich-bild:last-child {
  margin-bottom: 0;
}

.ich-bild img {
  display: block;
  width: 100%;
}

.ich-bild--schatten {
  box-shadow: var(--schatten-bild);
}

.ich-bild--tief {
  margin-top: var(--raum-7);
}

.ich-bild--hoch {
  margin-top: calc(-1 * var(--raum-7));
}

.ich-bild--grau {
  margin-top: var(--raum-6);
  filter: saturate(0%) contrast(102%);
}

/* Rechtstexte */
.rechtstext {
  max-width: var(--lesebreite);
  margin-inline: auto;
  color: var(--text-auf-dunkel);
  font-family: var(--schrift-grund);
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: var(--zeile-text);
}

.rechtstext h2 {
  margin-top: var(--raum-4);
  padding-bottom: var(--raum-1);
  color: var(--text-auf-dunkel);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--zeile-zwischentitel);
}

.rechtstext h3 {
  margin-top: var(--raum-3);
  padding-bottom: var(--raum-1);
  color: var(--text-auf-dunkel);
  font-size: var(--fs-groesser);
  font-weight: 300;
  line-height: var(--zeile-zwischentitel);
}

.rechtstext > :first-child {
  margin-top: 0;
}

.rechtstext p {
  padding-bottom: var(--raum-2);
}

.rechtstext strong {
  font-weight: 700;
}

.rechtstext a,
.verweis {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rechtstext ul {
  margin: 0;
  padding: 0 0 var(--raum-2) var(--raum-2);
  list-style: disc;
}

.rechtstext dl,
.rechtstext dd {
  margin: 0;
  padding: 0;
}

.rechtstext dt {
  padding-bottom: var(--raum-2);
}

.rechtstext dd {
  padding-bottom: var(--raum-2);
}

.rechtstext dd > :last-child {
  padding-bottom: 0;
}

/* Ersatz für die leeren Absätze (&nbsp;) des Originals */
.rechtstext__abstand {
  height: var(--raum-2);
}

/* Kontaktformular */
.formular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-3);
}

.formular__meldung {
  display: none;
  grid-column: 1 / -1;
  padding: var(--raum-2);
  border-left: 3px solid var(--text-leise-auf-dunkel);
  background-color: var(--feld-grund);
  color: var(--text-auf-dunkel);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: var(--zeile-einleitung);
}

.formular__meldung.ist-sichtbar {
  display: block;
}

.formular__meldung--ok {
  border-left-color: var(--text-leise-auf-dunkel);
}

.formular__meldung--fehler {
  border-left-color: var(--fehler);
}

.formular__feld {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.formular__feld--voll {
  grid-column: 1 / -1;
}

.formular__beschriftung {
  display: block;
  margin-bottom: var(--raum-1);
  color: var(--text-leise-auf-dunkel);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-klein);
  font-weight: 400;
  line-height: var(--zeile-einleitung);
}

.formular__eingabe {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--raum-2);
  border: 1px solid var(--feld-rahmen);
  border-radius: 0;
  background-color: var(--feld-grund);
  color: var(--eingabe-text);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-gross);
  font-weight: 400;
  transition: border-color var(--dauer) ease;
  -webkit-appearance: none;
  appearance: none;
}

input.formular__eingabe {
  height: 3.75rem;   /* 60 */
}

select.formular__eingabe {
  padding-right: var(--raum-4);   /* Platz für den Auswahlpfeil */
  line-height: normal;
  cursor: pointer;
}

textarea.formular__eingabe {
  height: 9.375rem;   /* 150 */
  min-height: 9.375rem;
  resize: vertical;
}

.formular__eingabe::placeholder {
  color: var(--text-leise-auf-dunkel);
  opacity: 1;
}

.formular__eingabe:user-invalid {
  border-color: var(--fehler);
}

.formular__auswahl {
  position: relative;
  display: block;
}

.formular__auswahl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--raum-2);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--text-leise-auf-dunkel);
  pointer-events: none;
  transform: translateY(-25%);
}

.formular__zustimmung {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.formular__zustimmung legend {
  margin-bottom: var(--raum-1);
  padding: 0;
  color: var(--text-leise-auf-dunkel);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: var(--zeile-einleitung);
}

.formular__kaestchen {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
}

.formular__kaestchen + label {
  position: relative;
  display: inline-block;
  min-height: 1.7em;
  color: var(--text-leise-auf-dunkel);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-gross);
  font-weight: 400;
  line-height: var(--zeile-text);
  cursor: pointer;
}

.formular__haken {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: var(--raum-1);
  border: 1px solid var(--feld-rahmen);
  border-radius: 3px;
  background-color: var(--feld-grund);
  vertical-align: middle;
}

.formular__kaestchen:checked + label .formular__haken::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--text-auf-dunkel);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.formular__kaestchen:focus-visible + label .formular__haken {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--fokus-hof);
}

.formular__kaestchen:user-invalid + label .formular__haken {
  border-color: var(--fehler);
}

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

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

.formular__fuss {
  display: grid;
  grid-column: 1 / -1;
  justify-items: end;
}

.knopf {
  height: 3.75rem;   /* 60 */
  padding: var(--raum-1) var(--raum-3);
  border: 0;
  border-radius: 3px;
  background-color: var(--knopf-grund);
  color: var(--text-auf-dunkel);
  font-family: var(--schrift-kontakt);
  font-size: var(--fs-klein);
  font-weight: 700;
  line-height: var(--zeile-text);
  letter-spacing: var(--sperrung-knopf);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-radius var(--dauer) ease;
}

.knopf:hover {
  border-radius: 0;
}

.knopf:disabled {
  opacity: .7;
  cursor: progress;
}

/* Leuchtkasten der Galerien */
.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: var(--z-leuchtkasten);
  display: grid;
  place-items: center;
  padding: var(--raum-4) var(--raum-5);
  background-color: var(--leuchtkasten-grund);
}

.leuchtkasten[hidden] {
  display: none;
}

.leuchtkasten__figur {
  position: relative;
  max-width: 100%;
  margin: 0;
  line-height: 0;
}

.leuchtkasten__bild {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 6rem);
  box-shadow: var(--schatten-leuchtkasten);
  cursor: pointer;
}

.leuchtkasten__zaehler {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: var(--raum-1);
  color: var(--leuchtkasten-zaehler);
  font-size: var(--fs-klein);
  line-height: 1.4;
  white-space: nowrap;
}

.leuchtkasten__knopf {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-auf-dunkel);
  opacity: .65;
  cursor: pointer;
  transition: opacity var(--dauer-kurz) ease;
}

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

.leuchtkasten__schliessen {
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  font-family: Arial, Baskerville, monospace;
  font-size: 28px;
  line-height: 44px;
}

.leuchtkasten__zurueck,
.leuchtkasten__vor {
  top: 50%;
  display: grid;
  place-items: center;
  width: 90px;
  height: 110px;
  transform: translateY(-50%);
}

.leuchtkasten__zurueck {
  left: 0;
}

.leuchtkasten__vor {
  right: 0;
}

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


/* --------------------------------------------------------------------------
   6  Umbrüche
   -------------------------------------------------------------------------- */

/* Tablet und Telefon (Divi: bis 980 px) */
@media (max-width: 980px) {
  :root {
    --hero-versatz: 70px;
  }

  /* Kopf */
  .kopf__logo-zeile {
    width: min(var(--zeile-max), 100% - 2 * var(--seitenrand));
    padding-block: var(--raum-3);
  }

  .kopf__logo {
    width: fit-content;
    max-width: 100%;
    margin-bottom: var(--raum-4);
  }

  /* Klappmenü: Luft wie bisher, die gemessenen Werte gelten nur am Schreibtisch */
  .menue {
    padding-top: 0;
    padding-bottom: var(--raum-3);
  }

  .menue__innen {
    width: min(var(--zeile-max), 100% - 2 * var(--seitenrand));
    min-height: 5rem;   /* 80 */
    margin-inline: auto;
    padding-inline: 0;
  }

  .menue__schalter {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--icon-grau);
    cursor: pointer;
  }

  .menue__schalter svg {
    display: block;
    width: 32px;
    height: 32px;
  }

  .menue__liste {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-klappmenue);
    display: none;
    width: 100%;
    margin: 0;
    padding: var(--raum-2);
    border-top: 2px solid var(--icon-grau);
    background-color: var(--weiss);
    box-shadow: var(--schatten-klappmenue);
    text-align: left;
  }

  .menue.ist-offen .menue__liste {
    display: block;
  }

  .menue__liste a {
    padding: var(--raum-2);
    border-bottom: 1px solid var(--mobilmenue-hauch);
    color: var(--mobilmenue-text);
    font-size: var(--fs-klein);
    line-height: var(--zeile-einleitung);
    transition: background-color var(--dauer-kurz) ease-in-out, color var(--dauer-kurz) ease-in-out;
  }

  .menue__liste a:hover,
  .menue__liste a:focus-visible {
    background-color: var(--mobilmenue-hauch);
    color: var(--menue-aktiv);
  }

  /* Startseite: Spalten untereinander */
  .raster__zeile,
  .raster__zeile--gespiegelt {
    grid-template-columns: 1fr;
  }

  .raster__feld {
    justify-self: center;
  }

  .raster__feld img {
    width: auto;
  }

  /* Referenzen untereinander */
  .referenzen {
    grid-template-columns: 1fr;
    row-gap: var(--raum-4);
  }

  .referenzen__logo {
    justify-self: center;
  }

  .referenzen__logo--mitte {
    grid-column: auto;
  }

  /* Ich: Spalten untereinander, ohne Versatz und ohne Überlappung */
  .ich-bilder {
    display: block;
  }

  .zeile.zeile--ich-bilder {
    padding-block: var(--raum-4) var(--raum-3);
  }

  .ich-bild,
  .ich-bild--tief,
  .ich-bild--hoch,
  .ich-bild--grau {
    margin-top: 0;
  }

  .ich-bilder__spalte .ich-bild,
  .ich-bilder__spalte .ich-bild:last-child {
    margin-bottom: var(--raum-4);
  }

  .ich-bilder__spalte:last-child .ich-bild:last-child {
    margin-bottom: 0;
  }

  /* Fuß */
  .zeile.kontakt__raster {
    grid-template-columns: 1fr;
    row-gap: var(--raum-4);
  }

  .fussleiste__innen {
    grid-template-columns: 1fr;
    row-gap: var(--raum-3);
  }

  .fussleiste__copy,
  .fussleiste__credit {
    text-align: center;
  }
}

/* Telefon (Divi: bis 767 px) */
@media (max-width: 767px) {
  /* Das Bildraster der Startseite ist im Original auf dem Telefon ausgeblendet */
  .raster {
    padding-top: var(--raum-3);
  }

  .raster__zeile {
    display: none;
  }

  .zeile.kontakt__raster {
    padding-block: var(--raum-1) var(--raum-3);
  }

  .formular {
    grid-template-columns: 1fr;
  }

  .leuchtkasten {
    padding-inline: var(--raum-1);
  }

  .leuchtkasten__zurueck,
  .leuchtkasten__vor {
    width: 44px;
  }
}

/* Kundenstimmen (Umbruch des Slider-Plugins) */
@media (max-width: 600px) {
  .stimme {
    padding-inline: 0;
  }
}


/* --------------------------------------------------------------------------
   7  Weniger Bewegung
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }

  .hero__logo {
    animation: none;
  }

  .galerie__feld:hover img,
  .galerie__feld:focus-visible img {
    transform: none;
  }
}