/* ============================================================
   MAST – zentrales Stylesheet
   Die einzige CSS-Datei der Website. Alle Seiten laden sie.

   Gestaltungsprinzip (seit September 2026): Aufbau, Interaktion
   und Proportionen folgen eng der Website von Keiji Ashizawa
   Design. Eine Schrift, ein Gewicht, vier Größen. Große Bilder,
   viel freie Fläche, kleine zurückhaltende Navigation, ruhige
   Übergänge von 360 ms. Alles selbst umgesetzt, kein fremder Code.

   Aufbau:
   1. Variablen
   2. Schriften        – lokal geladen, nie von fremden Servern
   3. Grundeinstellungen
   4. Intro            – bildschirmfüllendes Foto mit mittigem Logo
   5. Kopfleiste, Kategorien, Seitenleiste
   6. Inhaltsspalte
   7. Werk             – Bild mit Titel (Startseite, Übersichten)
   8. Bildfolge        – waagerechte Bildreihe am Anfang einer Seite
   9. Textblock        – zwei Spalten mit viel Luft
  10. Fußzeile
  11. Formular         – Kontaktseite
  12. Hilfsklassen
   ============================================================ */


/* ============================================================
   1. VARIABLEN
   ============================================================ */

:root {
  /* Farben: fast weiß mit einem Hauch Wärme, Graphit, sonst liefern die Fotos die Farbe */
  --farbe-flaeche:      #fbfaf8;
  --farbe-text:         #1e1d1b;
  --farbe-text-schwach: #7a756e;
  --farbe-linie:        #1e1d1b;
  --farbe-linie-fein:   rgba(30, 29, 27, 0.18);
  --farbe-dunkel:       #1e1d1b;   /* Grund des Intros, Schleier */
  --farbe-marke:        #862f2d;   /* Bordeaux – nur im Logo */

  /* Schrift: eine Familie, ein leichtes Gewicht (300) */
  --schrift: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Vier Größen, wie in der Referenz gemessen (17 / 15 / 13,6 / 13 px) */
  --groesse-titel: 1.0625rem;
  --groesse-text:  0.9375rem;
  --groesse-klein: 0.85rem;
  --groesse-fuss:  0.8125rem;

  --laufweite:       0.075em;   /* Titel, Menü, Fließtext */
  --laufweite-klein: 0.05em;    /* Kleinzeilen */
  --zeilenhoehe:     2;         /* Fließtext 15 px auf 30 px */

  /* Bewegung */
  --dauer: 360ms;
  --dauer-intro: 700ms;
  --dauer-bild: 2000ms;

  /* Layout – Handy zuerst */
  --kopf-hoehe:   5.75rem;      /* 92 px */
  --seitenrand:   1.875rem;     /* 30 px */
  --leiste-hoehe: 3.75rem;      /* Kategorien-Leiste am unteren Rand */
  --abstand-werk: 3.75rem;      /* 60 px zwischen Bild und nächstem Bild */
  --abstand-text: 6.25rem;      /* 100 px nach einem Textblock */
}

/* Desktop: Spalte beginnt bei 20,5 % der Breite und ist 71 % breit,
   Kopfleiste 148 px, Kategorien links fest stehend */
@media (min-width: 64em) {
  :root {
    --kopf-hoehe:  9.25rem;
    --spalte-links: 20.5%;
    --spalte-breite: 71%;
    --abstand-werk: 3.75rem;
    --abstand-text: 6.25rem;
  }
}


/* ============================================================
   2. SCHRIFTEN
   Inter Light (300) für alles – so fein wie die Helvetica Neue
   der Referenz. Inter Regular (400) bleibt als Reserve geladen.
   Lokal aus assets/fonts/ (SIL Open Font License, Lizenz liegt
   daneben). Nie von Google Fonts oder anderen fremden Servern –
   DSGVO.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}


/* ============================================================
   3. GRUNDEINSTELLUNGEN
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-weight: 300;
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe);
  letter-spacing: var(--laufweite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Solange Intro oder Seitenleiste offen sind, scrollt die Seite nicht */
body.intro-aktiv,
body.menue-offen {
  overflow: hidden;
}

/* Links: Textfarbe, keine Unterstreichung, beim Überfahren halbe Deckkraft */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dauer) ease, border-color var(--dauer) ease;
}

a:hover {
  opacity: 0.5;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: var(--groesse-titel);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: var(--laufweite);
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:focus-visible {
  outline: 1px solid var(--farbe-text);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   4. INTRO
   Erster Bildschirm der Startseite: ein Foto über die ganze
   Fläche, darauf das Logo in Creme exakt mittig, sonst nichts.
   Zwei bis drei Fotos wechseln mit langsamer Überblendung. Ein
   Klick (oder Enter) blendet das Intro in 700 ms aus – das
   Skript setzt dafür die Klasse „intro--aus".
   Ohne JavaScript wird das Intro gar nicht erst angezeigt.
   ============================================================ */

.intro {
  display: none;
}

.js-aktiv .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--farbe-dunkel);
  cursor: pointer;
  transition: opacity var(--dauer-intro) ease;
}

.intro--aus {
  opacity: 0;
  pointer-events: none;
}

.intro__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dauer-bild) ease;
}

.intro__bild--aktiv {
  opacity: 1;
}

/* leichter Schleier, damit das helle Logo auf jedem Foto lesbar bleibt */
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 29, 27, 0.22);
}

.intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(11rem, 24vw, 22rem);
  height: auto;
  transform: translate(-50%, -50%);
}


/* ============================================================
   5. KOPFLEISTE UND KATEGORIEN

   Kopfleiste: fest am oberen Rand, in der Flächenfarbe; der
   Inhalt läuft beim Scrollen darunter hindurch. Links die
   Wortmarke „MAST" (kein Logo), rechts das Menüzeichen aus drei
   Strichen – sonst nichts, wie in der Referenz.

   Kategorien (Ankauf, Entwicklung, Vermarktung):
     Desktop – senkrechte Liste links unter dem Logo, fest stehend.
     Handy   – eine Zeile am unteren Bildschirmrand, fest stehend.

   Seitenleiste: öffnet sich vom rechten Rand (Desktop 315 px,
   Handy halbe Breite) und trägt die weiteren Seiten (Über MAST,
   Kontakt, Impressum, Datenschutz). Dahinter legt sich ein
   dunkler Schleier über den Inhalt.
   ============================================================ */

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--kopf-hoehe);
  background: var(--farbe-flaeche);
}

/* Logo in Schwarz, oben links – an der Stelle des „KAD" der Referenz */
.kopf__logo {
  position: absolute;
  top: 0.625rem;                    /* 10 px */
  left: var(--seitenrand);
}

.kopf__logo:hover {
  opacity: 0.7;
}

.kopf__logo img {
  height: 4.5rem;                    /* 72 px auf dem Handy */
  width: auto;
}

/* Menüzeichen: drei feine Striche */
.menue-zeichen {
  position: absolute;
  top: 2.3125rem;                   /* 37 px, mittig zum Logo */
  right: var(--seitenrand);
  width: 1.5rem;
  height: 1.125rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity var(--dauer) ease;
}

.menue-zeichen:hover {
  opacity: 0.5;
}

.menue-zeichen span {
  display: block;
  height: 1px;
  background: var(--farbe-linie);
}

/* --- Kategorien: Handy = Leiste am unteren Rand --------------------- */
.kategorien {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: var(--leiste-hoehe);
  background: var(--farbe-flaeche);
}

.kategorien__liste {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 100%;
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite);
}

.kategorien__liste li {
  display: flex;
  align-items: center;
}

/* Schrägstrich zwischen den Punkten */
.kategorien__liste li + li::before {
  content: "/";
  margin: 0 0.75rem;
  color: var(--farbe-text-schwach);
}

.kategorien__link {
  display: inline-block;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) ease, opacity var(--dauer) ease;
}

/* Unterstrich beim Überfahren und für die aktive Kategorie */
.kategorien__link:hover {
  opacity: 1;
  border-bottom-color: var(--farbe-linie);
}

.kategorien__link[aria-current="page"] {
  border-bottom-color: var(--farbe-linie);
}

/* --- Seitenleiste --------------------------------------------------------- */
.schleier {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(30, 29, 27, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dauer) ease;
}

.menue-offen .schleier {
  opacity: 1;
  pointer-events: auto;
}

.seitenleiste {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: 50%;
  min-width: 12rem;
  padding: 9rem 1.875rem 2rem;
  background: var(--farbe-flaeche);
  transform: translateX(100%);
  transition: transform var(--dauer) ease;
  overflow-y: auto;
}

.seitenleiste--offen {
  transform: none;
}

/* Logo ganz oben in der Seitenleiste, über den Menüpunkten:
   auf dem Handy linksbündig wie die Einträge, auf dem Desktop mittig */
.seitenleiste__logo {
  position: absolute;
  top: 3.5rem;
  left: var(--seitenrand);
  height: 4rem;
  width: auto;
}

/* Schließen: ein feines Kreuz oben rechts */
.seitenleiste__schliessen {
  position: absolute;
  top: 1.125rem;
  right: var(--seitenrand);
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity var(--dauer) ease;
}

.seitenleiste__schliessen:hover {
  opacity: 0.5;
}

.seitenleiste__schliessen::before,
.seitenleiste__schliessen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--farbe-linie);
}

.seitenleiste__schliessen::before { transform: rotate(45deg); }
.seitenleiste__schliessen::after  { transform: rotate(-45deg); }

.seitenleiste__liste {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite);
  line-height: 2.75;
}

/* zweite Liste (Kategorien) nur auf dem Handy in der Seitenleiste */
.seitenleiste__liste + .seitenleiste__liste {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--farbe-linie-fein);
}

.seitenleiste__link {
  display: inline-block;
  line-height: 1.5;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid transparent;
}

/* Unterstrich beim Überfahren und für die aktuelle Seite */
.seitenleiste__link:hover {
  opacity: 1;
  border-bottom-color: var(--farbe-linie);
}

.seitenleiste__link[aria-current="page"] {
  border-bottom-color: var(--farbe-linie);
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 64em) {

  .kopf__logo {
    top: 3.25rem;                    /* 52 px */
    left: 3.625rem;                  /* 58 px */
  }

  .kopf__logo img {
    height: 8.5rem;                  /* 136 px */
  }

  .menue-zeichen {
    top: 3.875rem;                   /* 62 px, wie in der Referenz */
    right: 7.5rem;                   /* 120 px */
    width: 2.0625rem;                /* 33 px */
    height: 1.5rem;                  /* 24 px */
  }

  /* Kategorien: senkrechte Liste links, fest stehend */
  .kategorien {
    top: 21rem;                      /* 337 px */
    left: 3.875rem;                  /* 62 px */
    right: auto;
    bottom: auto;
    height: auto;
    background: none;
    z-index: 51;
  }

  .kategorien__liste {
    display: block;
    height: auto;
    font-size: var(--groesse-titel);
    line-height: 2.625;              /* 44,5 px */
  }

  .kategorien__liste li {
    display: block;
  }

  .kategorien__liste li + li::before {
    content: none;
  }

  .kategorien__link {
    line-height: 1.5;
  }

  .seitenleiste {
    width: 19.6875rem;               /* 315 px */
    padding: 14rem 3.125rem 2rem;    /* Einträge beginnen unter dem Logo, 50 px vom Rand */
  }

  .seitenleiste__logo {
    top: 3.875rem;                   /* 62 px, auf Höhe des Logos in der Kopfleiste */
    height: 6.75rem;                 /* 108 px */
    left: 50%;
    transform: translateX(-50%);
  }

  .seitenleiste__schliessen {
    top: 3.875rem;
    right: 3.125rem;
  }

  .seitenleiste__liste {
    font-size: var(--groesse-titel);
    line-height: 2.625;
  }

  .seitenleiste__liste + .seitenleiste__liste {
    display: none;                   /* Kategorien stehen links */
  }
}


/* ============================================================
   6. INHALTSSPALTE
   Handy: 30 px Rand. Desktop: beginnt bei 20,5 %, 71 % breit,
   Oberkante direkt unter der Kopfleiste.
   ============================================================ */

.inhalt {
  padding-top: var(--kopf-hoehe);
  padding-bottom: var(--leiste-hoehe);       /* Platz für die Leiste am unteren Rand */
  margin-inline: var(--seitenrand);
}

@media (min-width: 64em) {
  .inhalt {
    margin-left: var(--spalte-links);
    margin-right: 0;
    width: var(--spalte-breite);
    max-width: 86rem;
    padding-bottom: 0;
  }
}


/* ============================================================
   7. WERKE
   Kacheln wie in den Übersichten der Referenz: zwei nebeneinander
   (Handy: untereinander), je ein Bild im Verhältnis 3:2, darunter
   der Titel (17 px) und eine kleine Zeile (13,6 px). Beim Über-
   fahren wird das Bild etwas heller und ein kurzer Satz erscheint
   mittig auf dem Bild („Sell better").
   ============================================================ */

.werke {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-werk) 0;
  margin-bottom: var(--abstand-text);
}

.werk__link {
  display: block;
}

.werk__link:hover {
  opacity: 1;
}

.werk__rahmen {
  display: block;                    /* span als Block, sonst setzt Safari den Satz neben das Bild */
  position: relative;
  overflow: hidden;
}

.werk__bild {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: opacity var(--dauer) ease;
}

/* Satz, der beim Überfahren auf dem Bild erscheint */
.werk__statement {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  font-size: var(--groesse-titel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dauer) ease;
}

.werk__titel {
  margin-top: 0.875rem;              /* 14 px */
  font-size: var(--groesse-titel);
  line-height: 1.25;
  letter-spacing: var(--laufweite);
  transition: opacity var(--dauer) ease;
}

/* Überfahren nur auf Geräten mit Mauszeiger. Auf dem Handy bliebe der
   Zustand sonst nach dem Antippen hängen (grauer Titel, schwebender Satz). */
@media (hover: hover) {
  .werk__link:hover .werk__bild      { opacity: 0.72; }
  .werk__link:hover .werk__statement { opacity: 1; }
  .werk__link:hover .werk__titel     { opacity: 0.5; }
}

.werk__zeile {
  margin-top: 0.375rem;
  font-size: var(--groesse-klein);
  line-height: 1.4;
  letter-spacing: var(--laufweite-klein);
  color: var(--farbe-text);
}

/* Ausschnitt: Motiv sitzt ganz unten im Foto (z. B. der Stuhl) */
.werk__bild--unten {
  object-position: 50% 100%;
}

@media (min-width: 48em) {
  .werke {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 5%;                  /* 51 px bei 1025 px Spalte */
    row-gap: 5rem;                   /* 80 px */
  }
}

/* Einzelnes Bild zwischen zwei Textblöcken */
.bild {
  margin-bottom: var(--abstand-werk);
}

.bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}


/* ============================================================
   8. BILDFOLGE
   Am Anfang einer Unterseite: eine waagerechte Reihe aus Quer-
   und Hochformaten, alle gleich hoch, mit 70 px Abstand. Man
   scrollt seitlich oder klickt die feinen Pfeile am Rand.
   Handy: dieselbe Reihe, kleiner und mit 20 px Abstand. Man
   wischt seitlich, die Bilder rasten dabei ein; Pfeile gibt
   es dort nicht.
   ============================================================ */

.bildfolge {
  position: relative;
  margin-bottom: 0.875rem;
}

.bildfolge__spur {
  display: flex;
  gap: 1.25rem;                                          /* 20 px */
  height: calc((100vw - 2 * var(--seitenrand)) * 0.8);   /* 264 px bei 390 px Breite */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;                         /* Handy: Bilder rasten ein */
  scrollbar-width: none;
}

.bildfolge__spur::-webkit-scrollbar {
  display: none;
}

.bildfolge__bild {
  flex: none;
  width: auto;
  max-width: none;               /* darf breiter sein als die Spalte, die Reihe scrollt; sonst wird das Foto gestaucht */
  height: 100%;
  scroll-snap-align: start;
}

.bildfolge__pfeil {
  display: none;
}

@media (min-width: 64em) {

  .bildfolge__spur {
    gap: 4.375rem;                             /* 70 px */
    height: clamp(24rem, 47.5vw, 44rem);       /* 684 px bei 1440 */
    scroll-snap-type: none;                    /* Desktop: frei scrollen, Pfeile springen bildweise */
  }

  /* Pfeile: feine Winkel am rechten und linken Rand, mittig */
  .bildfolge__pfeil {
    display: block;
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    opacity: 0.7;
    transition: opacity var(--dauer) ease;
  }

  .bildfolge__pfeil:hover {
    opacity: 1;
  }

  .bildfolge__pfeil::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 0.875rem;
    border-top: 1px solid var(--farbe-flaeche);
    border-right: 1px solid var(--farbe-flaeche);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
  }

  .bildfolge__pfeil--weiter {
    right: 0.5rem;
  }

  .bildfolge__pfeil--weiter::before {
    transform: translate(-70%, -50%) rotate(45deg);
  }

  .bildfolge__pfeil--zurueck {
    left: 0.5rem;
  }

  .bildfolge__pfeil--zurueck::before {
    transform: translate(-30%, -50%) rotate(-135deg);
  }
}

/* Titel unter der Bildfolge, dann 63 px Luft bis zum Text */
.werkkopf {
  margin-bottom: 3.9375rem;
}

.werkkopf h1 {
  line-height: 1.25;
}


/* ============================================================
   9. TEXTBLOCK
   Zwei Spalten mit je 47 % Breite und 6 % Abstand (Desktop),
   auf dem Handy untereinander. Fließtext 15 px auf 30 px,
   Absätze durch eine Leerzeile getrennt. Überschriften sind
   17 px in normalem Gewicht – keine großen Titel.
   ============================================================ */

.text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.75rem;
  margin-bottom: var(--abstand-text);
}

.text__spalte > * + * {
  margin-top: 1.875rem;              /* eine Leerzeile (30 px) */
}

.text h1,
.text h2,
.text h3 {
  line-height: 1.5;
}

/* Überschrift direkt über ihrem Absatz: keine ganze Leerzeile */
.text h2 + p,
.text h3 + p,
.text h1 + p {
  margin-top: 0.75rem;
}

/* Kleinzeile über einer Überschrift („MAST / Real Estate") */
.text__klein {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-klein);
  color: var(--farbe-text-schwach);
}

.text__klein + * {
  margin-top: 0.25rem;
}

/* Aufzählung als schlichte Zeilen */
.text__liste li {
  line-height: var(--zeilenhoehe);
}

/* Nummerierte Punkte: „01  Senden" und der Satz dazu */
.text__punkte li + li {
  margin-top: 0.75rem;
}

.text__punkte-titel {
  display: flex;
  gap: 1.25rem;
}

.text__punkte-titel span:first-child {
  color: var(--farbe-text-schwach);
  font-size: var(--groesse-klein);
}

/* Textlink mit feiner Linie darunter: „Immobilie anbieten →" */
.textlink {
  display: inline-block;
  line-height: 1.5;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--farbe-linie);
}

/* mehrere Links nebeneinander */
.text__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

/* engerer Abstand zwischen Textblöcken (Impressum, Datenschutz) */
.text--eng {
  margin-bottom: 3.75rem;
}

/* Begriff und Angabe untereinander: „Telefon" klein, darunter die Nummer */
.angaben dt {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-klein);
  color: var(--farbe-text-schwach);
}

.angaben dd + dt {
  margin-top: 0.75rem;
}

.angaben dd {
  line-height: 1.7;
}

@media (min-width: 64em) {
  .text {
    grid-template-columns: 47% 47%;
    column-gap: 6%;
  }
}


/* ============================================================
   10. FUSSZEILE
   Eine Zeile in 13 px: Copyright und Anschrift links, Impressum
   und Datenschutz rechts.
   ============================================================ */

.fuss {
  margin-inline: var(--seitenrand);
  padding: 2.5rem 0 calc(var(--leiste-hoehe) + 2.5rem);
  border-top: 1px solid var(--farbe-linie-fein);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: var(--groesse-fuss);
  letter-spacing: var(--laufweite);
  line-height: 1.8;
}

.fuss__links {
  display: flex;
  gap: 1.5rem;
}

@media (min-width: 64em) {
  .fuss {
    margin-left: var(--spalte-links);
    margin-right: 0;
    width: var(--spalte-breite);
    max-width: 86rem;
    padding-bottom: 3.75rem;
  }
}


/* ============================================================
   11. FORMULAR (Kontaktseite)
   Felder als Zeilen mit einer feinen Linie darunter, sonst nichts.
   ============================================================ */

.formular {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.formular__feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formular__feld label {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-klein);
  color: var(--farbe-text-schwach);
}

.formular__eingabe {
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--farbe-linie-fein);
  border-radius: 0;
  background: transparent;
  line-height: 1.6;
  transition: border-color var(--dauer) ease;
}

.formular__eingabe:focus {
  outline: none;
  border-bottom-color: var(--farbe-linie);
}

textarea.formular__eingabe {
  resize: vertical;
  min-height: 7rem;
}

select.formular__eingabe {
  cursor: pointer;
}

select.formular__eingabe option {
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
}

/* Dateiauswahl: kein Rahmen, kleine Schrift */
.formular__eingabe[type="file"] {
  border-bottom: 0;
  padding: 0.5rem 0;
  font-size: var(--groesse-klein);
  cursor: pointer;
}

/* Feld mit Fehler: die Linie darunter wird dunkel */
.formular__eingabe--fehler {
  border-bottom-color: var(--farbe-linie);
}

.formular__hinweis {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-klein);
  color: var(--farbe-text-schwach);
}

.formular__zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: start;
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-klein);
  line-height: 1.7;
}

.formular__zustimmung input {
  width: 1rem;
  height: 1rem;
  margin: 0.3rem 0 0;
  accent-color: var(--farbe-text);
}

.formular__zustimmung a {
  border-bottom: 1px solid var(--farbe-linie);
}

.formular__falle {
  position: absolute;
  left: -624.9375rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__meldung,
.formular__fehler {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-klein);
  line-height: 1.7;
}

.formular__meldung {
  padding-left: 1rem;
  border-left: 1px solid var(--farbe-linie);
}

.formular__meldung-liste {
  padding-left: 1rem;
  list-style: disc;
}

.formular__knopf {
  align-self: flex-start;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--farbe-linie);
  line-height: 1.5;
  transition: opacity var(--dauer) ease;
}

.formular__knopf:hover {
  opacity: 0.6;
}


/* ============================================================
   12. HILFSKLASSEN
   ============================================================ */

/* „Zum Inhalt springen": unsichtbar, bis man mit Tab darauf kommt */
.sprunglink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 110;
  padding: 0.75rem 1rem;
  background: var(--farbe-text);
  color: var(--farbe-flaeche);
  font-size: var(--groesse-klein);
  transform: translateY(-100%);
}

.sprunglink:focus {
  transform: none;
}