/* Michael Bittner — Onepager
   Farben, Masse und Proportionen aus Gestaltung.pdf übernommen. */

:root {
  /* Farben */
  --ink:          #111111;  /* Schwarz: einzige Textfarbe auf Hell, Flächen dunkel */
  --paper:        #ffffff;
  --surface:      #e8e8e8;  /* Bildfläche auf Hell */
  --surface-dark: #2a2a2a;  /* Bildfläche auf Dunkel */
  --bar-dark:     #333333;  /* Textplatzhalter auf Dunkel */
  --line-light:   #d8d8d8;  /* Rahmen Outline-Button */
  --on-dark:      #fafafa;  /* einzige Textfarbe auf Dunkel; auf Hell ist es --ink */

  /* Masse */
  --wrap:     1440px;
  --gutter:   clamp(24px, 4.3vw, 60px);
  --gap:      clamp(20px, 2.8vw, 40px);   /* Rasterabstand  (24pt) */
  --gap-lg:   clamp(32px, 4.2vw, 60px);   /* Leistungen     (36pt) */
  --pad-y:    clamp(64px, 7.8vw, 112px);  /* Sektionsabstand */
  --head-gap: clamp(40px, 6.7vw, 96px);   /* Überschrift → Inhalt (nur noch auf den Rechtsseiten) */

  /* Abstandskonzept. --abstand = R = Abstand zwischen der Unterkante der vier Navigationswörter und
     der Oberkante der Hero-Zeichnung. Gemessen: Desktop 55,0 px (Grundlinie bei 66,0, Zeichnung bei
     121; bleibt über 720 px gleich, weil der Kopf dort fest 121 px hoch ist). Handy: letztes Wort des
     geöffneten Menüs bis zur Zeichnung 66,2 px, siehe Medienabfrage unten.
     Angewandt (immer von Buchstabenkante zu Buchstabenkante): Oberkante Abschnitt → Oberkante der
     Überschrift (Person, Leistungen, Kontakt) und Unterkante der Überschrift → Oberkante des Inhalts
     (alle vier). Der Kasten einer Zeile ist höher als die Buchstaben; bei Arial und line-height 1,5
     liegt die Oberkante der Versalien 0,3805 em unter der Kastenoberkante und die Grundlinie
     0,4035 em über der Kastenunterkante. Diese Werte ziehen die folgenden Regeln ab. */
  --abstand: 55px;

  /* Kopfzeile: liegt fest über der Seite und schrumpft beim Scrollen.
     --kopf-hoehe  Platz, den der Platzhalter im Seitenfluss dauerhaft
                   reserviert. Ändert sich nie — sonst würde der Inhalt
                   darunter springen, die Scrollposition mit ihm, und der
                   Wechsel an der Schwelle liefe im Kreis.
                   Der Hero rechnet mit derselben Variable.
     --kopf-klein  Höhe des Kopfes im kleinen Zustand. Zugleich der Abstand,
                   den Sprungziele nach oben halten. */
  --kopf-hoehe: 121px;
  --kopf-klein:  75px;

  /* Typografie: zwei Grössen, eine Schriftart.
     --fs-klein  Navigation, Fliesstext, Leistungszeilen, Kontakt, Fuss, Rechtstexte, Pfeile.
                 Auf dem Handy 16 px (siehe Medienabfrage unten).
     --fs-gross  Titel: Abschnitte, Leistungen, die drei Hero-Wörter, H1 der Rechtsseiten
                 und der Name im Kopf (dessen Buchstabenhöhe, siehe .logo). */
  --fs-klein: clamp(15px, 1.11vw, 16px);
  --fs-gross: clamp(20px, 1.53vw, 22px);

  /* ---- Hero-Zeichnung: die beiden Stellschrauben ----------------------
     Eine neue Zeichnung braucht hier nichts: das Seitenverhältnis und die
     echten Bildmasse setzt der Build aus bilder.json. Diese zwei Werte sind
     reine Geschmacksfrage.

     --hero-bild-breite   Breite der Zeichnung, gemessen an der Hero-Breite.
                          100% = randlos, kleiner = mehr Luft nach links.
     --hero-bild-fokus    Welcher Punkt der Zeichnung stehen bleibt, wenn
                          oben und unten beschnitten wird. Kleiner Wert hält
                          mehr Himmel, grösserer mehr Wiese. 65% hält bei den
                          üblichen Fensterhöhen das Gebäude vollständig. */
  --hero-bild-breite: 75%;
  --hero-bild-fokus:  65%;
}

* { box-sizing: border-box; }

/* Der Abstand der Sprungziele zum Kopf steht als scroll-margin-top an den
   Abschnitten selbst (siehe .section). Ein zusaetzliches scroll-padding-top
   hier wuerde sich dazuaddieren. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--fs-klein);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a  { color: inherit; text-decoration: none; }
/* Hover: keine Farbänderung, sondern Unterstreichung */
a:hover { text-decoration: underline; text-underline-offset: .2em; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Kopfzeile: liegt fest oben, schrumpft ab 100 px ----------
   Der Kopf ist aus dem Seitenfluss genommen, damit sein Schrumpfen echten
   Platz freigibt. Den Platz oben hält stattdessen .kopf-platz — dauerhaft
   --kopf-hoehe hoch, damit sich beim Wechsel kein Pixel darunter bewegt.
   Die Schwellen (100 px hin, 40 px zurück) stehen in main.js. */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--kopf-hoehe);
  background: var(--paper);
  transition: height .22s ease, box-shadow .2s ease;
}
.header.is-klein {
  height: var(--kopf-klein);
  box-shadow: 0 1px 0 rgba(17, 17, 17, .08);
}

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

/* Sprungziele nicht unter dem Kopf verstecken: beim Springen ist er klein */
main[id],
.section { scroll-margin-top: var(--kopf-klein); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.logo { display: block; flex: none; }
.logo:hover { text-decoration: none; }
.logo img {
  display: block;
  width: auto;
  /* Die Buchstaben (M, h, l) sind 700 von 1062 Einheiten der Grafik hoch, also 65,9 %. Die Versalhöhe
     von Arial Bold ist 0,716 em. Damit ist die Buchstabenhöhe des Namens genau die der Titelschrift:
     0,716 / 0,6591 = 1,0862. Bleibt in jedem Zustand gleich, der Name wird beim Scrollen nicht kleiner. */
  height: calc(var(--fs-gross) * 1.0862);
  /* Die Grafik hat links 175 von 1062 Einheiten Rand (0,1648 der Höhe). Der Rand wird abgezogen, damit der erste
     Buchstabe auf der Textkante steht wie "Dipl. Ing." und "Projekte"; 1 px bleibt als Vorsprung der Arial-Versalien. */
  margin-left: calc(var(--fs-gross) * 1.0862 * -.1648 + 1px);
}

.nav a { text-transform: uppercase; }      /* Inhalt bleibt normal geschrieben */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.8vw, 40px);
}

/* ---------- Bildflächen & Platzhalterbalken ---------- */

.ph {
  background: var(--surface);          /* Bilder haben scharfe Ecken */
}
.ph--wide     { aspect-ratio: 373 / 225; }
.ph--portrait { aspect-ratio: 285 / 381; }
.ph--marke    { width: 96px; height: 96px; flex: none; }

.section--dark .ph { background: var(--surface-dark); }

img.ph { display: block; width: 100%; height: auto; object-fit: cover; }
img.ph--marke { width: 96px; height: 96px; object-fit: cover; }

.bars { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); }
.bars span {
  display: block;
  width: var(--w, 100%);
  max-width: 100%;
  border-radius: 999px;
}
.bars--hero      { gap: 18px; }
.bars--hero span { height: 16px; background: var(--ink); }
.bars--body      { gap: 31px; }
.bars--tight     { gap: 21px; }
.bars--body span { height: 10px; background: var(--surface); }
.section--dark .bars--body span { background: var(--bar-dark); }

/* ---------- Hero: Bild vollflächig, Text darüber ---------- */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  /* Die Zeichnung gibt das Format vor. --hero-ar setzt der Build aus den
     echten Bildmassen. */
  aspect-ratio: var(--hero-ar, 1985 / 1439);
  /* ohne width bezieht der Browser die Breite aus dem Verhältnis, sobald
     max-height greift — der Hero wäre dann schmaler als das Fenster */
  width: 100%;
  min-height: 520px;
  /* Zweite Grenze: nie höher als die Zeichnung wirklich ist. Sonst müsste
     sie auf sehr hohen Bildschirmen hochskaliert werden, um zu füllen. */
  max-height: min(
    calc(100svh - var(--kopf-hoehe)),
    var(--hero-bild-max-h, 1439px)
  );
  padding-block: 80px;
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  /* rechts und an Ober-/Unterkante bündig, links offen: dort steht der Text */
  inset: 0 0 0 auto;
  z-index: -2;
  width: var(--hero-bild-breite, 75%);
  /* nie über die echte Bildbreite — der Build setzt sie aus bilder.json */
  max-width: var(--hero-bild-max-b, none);
  height: 100%;
  /* cover füllt die Fläche vollständig aus; weil sie schmaler ist als die
     Zeichnung breit wäre, fällt dabei oben und unten etwas weg. Welcher
     Ausschnitt bleibt, entscheidet --hero-bild-fokus. */
  object-fit: cover;
  object-position: center var(--hero-bild-fokus, 65%);
  background: var(--paper);
  /* Die linke Kante des Ausschnitts darf nicht als Schnitt zu sehen sein:
     dort läuft die Zeichnung aus, das Papier bleibt weiss. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

/* Hellstmöglicher Schleier, der den Text noch trägt: weiss von links,
   nach rechts auslaufend. Die Zeichnung bleibt rechts unangetastet. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, .92) 0%,
    rgba(255, 255, 255, .86) 32%,
    rgba(255, 255, 255, .55) 56%,
    rgba(255, 255, 255, 0) 78%
  );
}

.hero__inner { width: 100%; }
/* 46ch in der kleinen Schrift; das längste Wort (BAULEITUNG in GROSS) braucht nur etwa 8 em davon. */
.hero__text  { max-width: 46ch; }

/* Die drei Zeilen sind zusammen die H1 (Architekt, Trossingen). Die h1 selbst
   bleibt optisch neutral, jede Zeile behält ihr bisheriges Aussehen. */
.hero__kopf { font-size: inherit; font-weight: inherit; }
.hero__overline, .hero__titel, .hero__meta, .hero__wort { display: block; }

.hero__overline,
.hero__meta {
  font-size: var(--fs-klein);
  font-weight: 400;
  text-transform: uppercase;      /* der Inhalt bleibt normal geschrieben */
}

.hero__titel {
  margin-block: 28px;
  font-size: var(--fs-gross);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Einfahrt der grossen Zeile: jedes Wort ist eine eigene Zeile und fährt 60 ms nach
   dem vorigen ein, wie früher die Wörter innerhalb einer Zeile. --v setzt der Build. */
.js-anim .hero__wort .anim__wort {
  transition-delay: calc(var(--d, 0ms) + var(--v, 0) * 60ms);
}

/* ---------- Sektionen ---------- */

.section { padding-block: var(--pad-y); }
/* Jeder Abschnitt hat drei gleiche Abstände R (= --abstand, Kundenwunsch 13.10.), immer von sichtbarer Kante zu
   sichtbarer Kante:
   a) Beginn des Abschnitts (bei Projekte: Unterkante des Heros) → Oberkante der Versalien der Überschrift
   b) Grundlinie der Überschrift → Oberkante des Inhalts (siehe .section h2)
   c) Unterkante des Inhalts → Ende des Abschnitts (Beginn der nächsten Fläche)
   Der Kasten einer Zeile ist höher als die Buchstaben: 0,3805 em über den Versalien und 0,4035 em unter
   der Grundlinie (Arial, line-height 1,5); diese Werte werden unten abgezogen. */
#projekte, #person, #leistungen, #kontakt { padding-top: calc(var(--abstand) - var(--fs-gross) * .3805); }
/* c): Projekte = Unterkante der letzten Kachel (die Punkte liegen im Bild), Person = Unterkante Porträt bzw.
   Grundlinie der letzten Textzeile (siehe .person > div), Leistungen = Grundlinie der letzten Zeile bzw. Unterkante des
   letzten Bildes (siehe .service ul), Kontakt = Grundlinie der letzten Zeile. */
#projekte, #person, #leistungen { padding-bottom: var(--abstand); }
#kontakt { padding-bottom: calc(var(--abstand) - var(--fs-klein) * .4035); }

.section--dark {
  background: var(--ink);
  color: var(--on-dark);
}

.section h2 {
  font-size: var(--fs-gross);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: calc(var(--abstand) - var(--fs-gross) * .4035);   /* Grundlinie → Inhalt = R */
}

/* ---------- Projekte ---------- */

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

.projects { display: grid; gap: var(--gap); }

.kachel {
  position: relative;
  display: block;
  aspect-ratio: 373 / 225;        /* Kachel bleibt 5:3, egal welches Bild darin liegt */
  overflow: hidden;
  background: var(--surface);
}
.kachel > img,
.kachel__spur { height: 100%; }


/* Blättern direkt in der Kachel */

.kachel__spur { display: block; }
.kachel__spur img,
.kachel > img {
  display: block;
  width: 100%;
  height: 100%;
  /* Hochformate werden eingepasst statt beschnitten, dahinter die Kachelfläche */
  object-fit: contain;
  background: var(--surface);
}
.kachel__spur img[hidden] { display: none; }

.kachel__pfeil {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  font: inherit;          /* sonst greift die Standardschrift des Browsers für Schaltflächen */
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease, background-color .18s ease;
}
.kachel__pfeil--zurueck { left: 10px; }
.kachel__pfeil--vor     { right: 10px; }
.kachel__pfeil:hover    { background: #ffffff; }
.kachel:hover .kachel__pfeil,
.kachel__pfeil:focus-visible { opacity: 1; }
.kachel__pfeil:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.kachel__punkte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.kachel__punkte span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 2px rgba(17, 17, 17, .5);
  transition: background-color .18s ease;
}
.kachel__punkte span.is-aktiv { background: #ffffff; }

/* nur für Screenreader */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Zur Person ---------- */

.person {
  display: grid;
  grid-template-columns: 37% 50.6%;
  gap: 7.8%;
}

/* Absätze im Personentext: p hat sonst keinen Abstand */
.person p + p { margin-top: 1.25em; }

/* Ist der Text länger als das Porträt (schmaler als 1440 px, Handy), zählt die Grundlinie seiner letzten
   Zeile: der Überstand des Zeilenkastens darunter (0,4035 em) wird abgezogen. */
.person > div { margin-bottom: calc(var(--fs-klein) * -.4035); }

/* Blocksatz ohne grosse Wortlücken: Der Build setzt weiche Trennstellen (­) in die langen Wörter
   (siehe weicheTrennung in seite.mjs). manual = der Browser trennt nur dort, nie nach eigenem
   Wörterbuch, überall gleich. */
.person p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
  text-wrap: pretty;
}

/* ---------- Leistungen ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap-lg);
  row-gap: clamp(56px, 8vw, 96px);
  /* Die Leistungstitel haben unter 901 px noch ihren vollen Zeilenkasten: dessen Überstand über den
     Versalien wird hier abgezogen. Ab 901 px beschneidet text-box den Kasten, dort gilt 0. */
  margin-top: calc(var(--fs-klein) * -.3805);
}

.service { display: flex; gap: 24px; }

/* Ohne min-width: 0 darf die Textspalte (flex-Kind) nie schmaler werden als ihr längstes Wort:
   "ARCHITEKTENLEISTUNGEN" (272 px) drückte die Seite unter 416 px Breite horizontal auseinander. */
.service > div {
  min-width: 0;
  /* letzte Sicherung für Titel und Listenzeilen (z. B. "Wirtschaftlichkeitsanalyse," mit 188 px bei
     320 px Breite): bricht mitten im Wort nur, wenn es sonst nicht in die Spalte passt. break-word
     statt anywhere, denn anywhere böte an jedem Buchstaben eine Bruchstelle an und die weichen
     Trennstellen der Titel kämen nie zum Zug. Die Spaltenbreite hält minmax(0, 1fr) (Responsiv). */
  overflow-wrap: break-word;
}

.service h3 {
  font-size: var(--fs-klein);    /* Kundenwunsch 08.10.: kleine Schrift, überall gleich */
  font-weight: 400;              /* normale Stärke (vorher 700); "LEISTUNGEN" und alle übrigen Titel bleiben fett */
  text-transform: uppercase;
  margin-bottom: 20px;
  hyphens: none;                 /* Standard: Titel brechen nur an Leerzeichen; Trennstellen nur als Sicherung (unten) */
}

/* Sehr schmale Handys: Der Build setzt weiche Trennstellen (­) in die Titel (weicheTrennung in
   seite.mjs), hier werden sie als Sicherung wirksam. Das längste Wort ("ARCHITEKTENLEISTUNGEN", in 16 px
   normale Stärke, 215,1 px) passt mit Bild (96 px), Lücke (24 px) und Rändern (2 x 24 px) bis herab zu 384 px Breite;
   darunter wäre es zu breit. Darüber bleibt es bei der Zeilenbildung ohne Trennung (sonst würde unnötig getrennt). */
@media (max-width: 383px) {
  .service h3 { hyphens: manual; }
}

/* Jede Zeile des Kunden steht für sich, ohne Aufzählungszeichen und ohne Zusatzabstand:
   alle Zeilen haben denselben Zeilenabstand (line-height des Textes). */
.service ul { list-style: none; padding-left: 0; }

/* Unter 901 px beschneidet text-box nichts (siehe unten): beim letzten Feld wird der Überstand des Zeilenkastens unter
   der Grundlinie abgezogen, damit der Abstand zur folgenden Fläche R misst (Abstandskonzept, c). */
@media (max-width: 900px) {
  .service:last-child ul { margin-bottom: calc(var(--fs-klein) * -.4035); }
}

/* Nur Desktop (zwei Spalten): grössere Zeichnungen, alle gleich gross, vollständig sichtbar
   und mit der Oberkante bündig zur Überschrift. Die Handyansicht bleibt wie sie war. */
@media (min-width: 901px) {
  /* 116 px ab 1440 px Fensterbreite (20 % kleiner als zuvor mit 144 px), mindestens 96 px wie auf dem
     Handy: so bleiben die Zeichnungen erkennbar. Auf schmaleren Fenstern schrumpft die Grösse mit,
     damit der Text nicht zu schmal wird. Der Build erzeugt 400 px, das sind mindestens 3,4 x die Anzeige. */
  :root { --marke: clamp(96px, 8.06vw, 116px); }

  /* contain: die Zeichnung wird nie zugeschnitten; background none, damit ein anderes
     Seitenverhältnis keinen grauen Rand bekommt */
  img.ph--marke {
    width: var(--marke);
    height: var(--marke);
    object-fit: contain;
    background: none;
  }
  /* Bilder schwimmen nicht: Bild links, Text rechts. Die Zeilenhöhe des Feldes bestimmt allein der
     Text, darum stehen die Überschriften einer Reihe auf einer Linie. Das Bild trägt nichts zur
     Höhe bei (Oberrand = -Bildhöhe) und sitzt mit seiner Unterkante auf der Grundlinie der letzten
     Textzeile; ist es höher als der Text, ragt es oben über die Überschrift hinaus (dort ist es weiss). */
  .services { align-items: start; margin-top: 0; }
  .service {
    display: grid;
    grid-template-columns: var(--marke) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  .service img.ph--marke {
    align-self: end;
    margin-top: calc(var(--marke) * -1);
    /* der weisse Rand unten im Bild wird ausgeglichen: sichtbar endet die Zeichnung auf der Grundlinie.
       --versatz-unten misst der Build (siehe raender in bilder.mjs) als Anteil der Feldseite. */
    margin-bottom: calc(var(--marke) * var(--versatz-unten, 0) * -1);
  }
  @supports (text-box: trim-both cap alphabetic) {
    /* beschneidet den Kasten der letzten Zeile auf die Grundlinie (Gegenstück zur Überschrift) */
    .service ul { text-box: trim-end text alphabetic; }
  }

  /* Der Kasten der Überschrift reicht sonst über die Schrift hinaus (Zeilenhöhe): die Bildkante
     läge dann einige Pixel über der sichtbaren Oberkante. text-box beschneidet ihn auf die
     Oberkante der Grossbuchstaben und die Grundlinie. Browser ohne text-box (Firefox) zeigen
     die Zeichnung einige Pixel höher als die Schrift. */
  @supports (text-box: trim-both cap alphabetic) {
    .service h3 { text-box: trim-both cap alphabetic; margin-bottom: 28px; }
  }
}

/* ---------- Kontakt ---------- */

.contact {
  display: grid; gap: 22px; justify-items: start;
  margin-top: calc(var(--fs-klein) * -.3805);   /* Oberkante der ersten Zeile = Oberkante der Buchstaben */
}

.contact a {
  display: inline-block;
  transform-origin: left center;
  transition: transform .18s ease;
}
.contact a:hover { transform: scale(1.03); }

/* Bezeichnung in fester Breite: beide Rufnummern stehen exakt linksbündig übereinander */
.contact__bez { display: inline-block; width: 4.1em; }

/* ---------- Footer ---------- */

.footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line-light);   /* feine Trennlinie zum Abschnitt darüber */
  /* Unterkante der dunklen Fläche (Kontakt) → Oberkante der Versalien von "Impressum" = R. Davon gehen die
     Trennlinie (1 px) und der Überstand des Zeilenkastens über den Versalien (0,3805 em) ab. */
  padding-top: calc(var(--abstand) - 1px - var(--fs-klein) * .3805);
  padding-bottom: clamp(56px, 7vw, 90px);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.footer__cols ul { display: grid; gap: 16px; }

/* Das Logo ist die weisse Wortmarke; brightness(0) färbt sie schwarz, die Datei bleibt dieselbe */
.footer__mark {
  display: block;
  width: auto;
  /* wie das Logo im Kopf (.logo img): Buchstabenhöhe = Versalhöhe der Titelschrift, 0,716 / 0,6591 = 1,0862 */
  height: calc(var(--fs-gross) * 1.0862);
  margin-left: calc(var(--fs-gross) * 1.0862 * -.1648 + 1px);   /* Rand der Grafik abziehen, siehe .logo img */
  filter: brightness(0);
}

/* Unten im Fuss steht das Logo. Der Herstellervermerk mit Link steht seit 14.10. nicht mehr hier, sondern als letzte
   Zeile der dritten Spalte unter der Adresse (Kundenwunsch). */
.footer__unten { margin-top: clamp(48px, 5vw, 69px); display: none; }

/* Kundenwunsch 16.10.: In der vierten Zeile stehen auf einer Höhe "Kontakt" (Mitte), das Logo (links) und der
   Herstellervermerk (rechts). Die dritte Zeile bleibt in Spalte 1 und 3 leer, als Leerzeile in derselben
   Zeilenhöhe wie der Text, deshalb ein Platzhalter und kein fester Abstand. */
.footer__leer { visibility: hidden; }
.footer__logo-zeile { display: flex; align-items: flex-start; height: 1lh; }
/* Die Unterkante der Buchstaben (874,65 von 1062 Einheiten der Grafik = 0,8236 der Höhe) steht auf der Grundlinie von
   "Kontakt". Grundlinie einer Arial-Zeile mit line-height 1,5: 1,0965 em von der Oberkante der Zeile. */
.footer__logo-zeile .footer__mark {
  margin-top: calc(var(--fs-klein) * 1.0965 - var(--fs-gross) * 1.0862 * .8236);
}

/* Auf dem Handy stehen die Spalten untereinander: dort bleibt das Logo wie bisher unten. */
@media (max-width: 720px) {
  .footer__unten { display: block; }
  .footer__logo-zeile, .footer__leer--logo { display: none; }   /* die Leerzeile über dem Vermerk bleibt */
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.zurueck {
  display: inline-block;
  margin-bottom: 28px;
}

.seite { padding-block: var(--pad-y); }
.seite h1 {
  font-size: var(--fs-gross);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: var(--head-gap);
}
.seite h2 { font-size: var(--fs-klein); font-weight: 700; margin: 40px 0 12px; }
.seite p  { max-width: 62ch; margin-bottom: 12px; }

/* Datenschutzerklärung im Blocksatz wie der Personentext (Kundenwunsch 08.10.): der Build setzt weiche
   Trennstellen in die Absätze (seite.mjs). Überschriften und das Impressum bleiben linksbündig. */
.seite--blocksatz p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
  text-wrap: pretty;
}

/* ---------- Burger (nur mobil) ---------- */

.burger {
  display: none;
  width: 40px; height: 40px;
  padding: 0; border: 0;
  background: none; cursor: pointer;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform .2s ease;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Einfahrt der Textzeilen ---------- */
/* Startzustand setzt JS über .js-anim — ohne JS bleibt alles sichtbar. */

.js-anim .anim__wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(.7em);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.js-anim .is-sichtbar .anim__wort { opacity: 1; transform: none; }

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .person { grid-template-columns: 1fr; }
  .services { grid-template-columns: minmax(0, 1fr); }   /* 0 statt auto: ein langes Wort weitet die Spalte nicht */
  .person  { gap: 40px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}

@media (max-width: 720px) {
  /* 76 px tragen den Menüknopf (40 px) mit Luft darum, klein bleiben 64 px */
  :root { --kopf-hoehe: 76px; --kopf-klein: 64px; --fs-klein: 16px; --abstand: 66px; }
  .burger { display: block; }

  .nav {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    justify-items: start;
    gap: 4px;
    padding: 8px var(--gutter) 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-light);
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s ease, visibility .18s ease;
  }
  .nav.is-open { visibility: visible; opacity: 1; }
  .nav a { padding: 12px 0; }

  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }

  /* Touchgeräte kennen kein Hover — Pfeile dauerhaft zeigen */
  .kachel__pfeil { opacity: 1; }

  /* Kein Platz fuer Text auf der Zeichnung: sie rutscht darunter */
  .hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    padding-block: 56px;
  }
  .hero::before { display: none; }
  .hero__media {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    order: 2;
    /* unter dem Text ist Platz: ganze Zeichnung, kein Ausschnitt, kein Verlauf */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__inner { order: 1; }
  .hero__text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .contact a:hover { transform: none; }
  .js-anim .anim__wort { opacity: 1; transform: none; }
}