/* Welcome Future AG · Entwurf Neuausrichtung 2026
   Helle, typografische Grundlage. Ein Stylesheet für alle Seiten. */

/* ---------- Hausschrift ----------
   EB Garamond fuer den Fliesstext, Inter fuer Auszeichnungen. Beide liegen
   im eigenen Verzeichnis, es geht keine Anfrage an einen fremden Server.
   Der Zeichenvorrat ist auf die westeuropaeischen Sprachen zugeschnitten. */

@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('/assets/fonts/eb-garamond-400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter var';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;        /* der Grundkörper der Seite, reines Weiss */
  --paper-warm: #fbfbfb;   /* ruhige Flächen innerhalb der Seite, kaum wahrnehmbar */
  --leiste: #ffffff;       /* Kopfleiste, ohne eigene Fläche */
  --leiste-tief: #ffffff;  /* Fusszeile, ohne eigene Fläche */
  --ink: #1d1c1a;
  --ink-mid: #474542;
  --ink-soft: #6f6d69;
  --line: #e6e6e6;
  --line-soft: #f0f0f0;
  --gold: #a8873f;         /* Linien, Ränder, Zierrat */
  --gold-schrift: #8a6d2f; /* Gold als Schrift, dunkler damit es gut lesbar bleibt */
  --gold-light: #c9a55c;

  --serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: 'Inter var', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --measure: 34rem;
  --wide: 68rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.68;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.shell {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------- Kopfzeile ---------- */

.head {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  z-index: 40;
}

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem 2rem;
  max-width: var(--wide);
  margin: 0 auto;
}

.brand img { width: 208px; }

.nav {
  display: flex;
  gap: 2.1rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: var(--ink-mid);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
  white-space: nowrap;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--gold-light); }
.nav a.here { color: var(--ink); border-bottom-color: var(--gold); }

.lang {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .13em;
  color: var(--ink-soft);
  text-decoration: none;
}
.lang:hover { color: var(--gold-schrift); }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  padding: .5rem .8rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
}

/* ---------- Titelbereich ---------- */

.opener {
  padding: 7rem 0 4.5rem;
  border-bottom: 1px solid var(--line-soft);
}

/* Der Auftakt der Startseite hatte einmal mehr Luft als die übrigen. Alle
   Seiten beginnen jetzt gleich, deshalb steht hier kein eigenes Mass mehr;
   `tall` bleibt allein als Kennzeichen der Startseite. */

.kicker {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-schrift);
  margin-bottom: 1.9rem;
}

h1 {
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  max-width: 22ch;
}

.opener p {
  margin-top: 2rem;
  max-width: var(--measure);
  font-size: 1.16rem;
  line-height: 1.75;
  color: var(--ink-mid);
}

/* ---------- Abschnitte ---------- */

section { padding: 5rem 0; border-bottom: 1px solid var(--line-soft); }
section:last-of-type { border-bottom: 0; }

/* Die Bereichsmarke steht als Überschrift zweiter Ordnung im Quelltext, damit
   die Gliederung von h1 über h2 zu h3 durchgängig ist. Für das Auge bleibt
   sie die kleine gesperrte Zeile, die sie war; die eigenen Werte einer
   Überschrift werden deshalb hier zurückgesetzt. */
.section-mark {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 2.4rem;
  max-width: none;
}

/* Eine Überschrift, die allein der Gliederung dient: für Vorlesegeräte und
   Suchmaschinen vorhanden, für das Auge nicht. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Die Signaturzeile im Auftakt der Startseite. Sie tritt an die Stelle einer
   Überschrift im üblichen Sinn: kein Satz, sondern die Kennung des Hauses.
   Schrift und Schnitt wie bei allen übrigen Überschriften, nur etwas kleiner
   gesetzt, weil die Zeile länger ist als ein Titelsatz. */

h1.signatur {
  font-size: clamp(1.6rem, 3.1vw, 2.45rem);
  line-height: 1.28;
  max-width: 30ch;
}

h2 {
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  margin-bottom: 1.5rem;
  max-width: 24ch;
}

h3 {
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.4;
  margin-bottom: .7rem;
}

p { max-width: var(--measure); }
p + p { margin-top: 1.15rem; }

.lede { font-size: 1.1rem; color: var(--ink-mid); }

.split {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 3.5rem;
  align-items: start;
}

.split .aside {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: .55rem;
}

/* ---------- Tätigkeitsfelder ---------- */

.fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

/* Vier Felder statt drei. Auf mittleren Bildschirmen bricht die Reihe auf
   zwei mal zwei um, sonst werden die Spalten zu schmal für die Titel. */
.fields.vier { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .fields.vier { grid-template-columns: repeat(2, 1fr); }
  .fields.vier .field:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fields.vier .field:nth-child(2n+1) { padding-left: 0; }
  .fields.vier .field:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

.field {
  padding: 2.6rem 2.2rem 2.6rem 0;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
}
.field:last-child { border-right: 0; padding-right: 0; }
.field:not(:first-child) { padding-left: 2.2rem; }

.field .num {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--gold-schrift);
  margin-bottom: 1.1rem;
}

.field p { font-size: .98rem; color: var(--ink-mid); max-width: none; }

.field .more { margin-top: auto; align-self: flex-start; padding-top: 1.6rem; }

/* Das Zeichen einer eingetragenen Marke innerhalb eines Feldes. Es steht
   klein und am Fuss, damit es die Typografie nicht überstimmt: das Blau
   ist die einzige Farbfläche im ganzen Auftritt. */
.field .marke { width: 96px; margin-top: 1.8rem; }

.more {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--gold-light);
  padding-bottom: 2px;
  transition: border-color .25s ease, color .25s ease;
}
.more:hover { color: var(--gold-schrift); border-color: var(--gold); }

/* ---------- Leistungsliste ---------- */

.services { border-top: 1px solid var(--line); margin-top: 2.6rem; }

.service {
  border-bottom: 1px solid var(--line-soft);
}

.service > summary {
  display: grid;
  grid-template-columns: 3.5rem 1fr 1.6rem;
  gap: 1.5rem;
  padding: 1.8rem 0;
  align-items: start;
  cursor: pointer;
  list-style: none;
  transition: background .25s ease;
}
.service > summary::-webkit-details-marker { display: none; }
.service > summary:hover .s-title { color: var(--gold-schrift); }
.service > summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.service .idx {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--gold-schrift);
  padding-top: .38rem;
}

.service .s-title {
  display: block;
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: .35rem;
  transition: color .25s ease;
}

.service .s-lead {
  display: block;
  font-size: .97rem;
  color: var(--ink-mid);
  max-width: 46rem;
}

.service .s-more {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--gold-light);
  padding-bottom: 2px;
}
.service[open] .s-more { display: none; }

.service .chev {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: .3rem;
  position: relative;
}
.service .chev::before,
.service .chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1px;
  background: var(--gold);
  transition: transform .3s ease;
}
.service .chev::before { transform: translate(-50%, -50%) rotate(90deg); }
.service .chev::after  { transform: translate(-50%, -50%); }
.service[open] .chev::before { transform: translate(-50%, -50%) rotate(180deg); }

.s-body {
  padding: 0 0 2rem 5rem;
  max-width: 46rem;
}
.s-body p { font-size: .97rem; color: var(--ink-mid); max-width: none; }
.s-body p + p { margin-top: 1rem; }
.s-body .marke { width: 88px; margin-top: 1.5rem; }

/* Knappe Fassung der Liste: in der Ruhelage steht nur die Kennziffer und der
   Titel. Der Text erscheint erst auf einen Klick. So bleibt der Abschnitt
   überschaubar, ohne dass Inhalt verloren geht. */

.services.knapp { margin-top: 2.4rem; }
.services.knapp .service > summary {
  padding: 1.3rem 0;
  align-items: center;
}
.services.knapp .s-title {
  font-size: 1.06rem;
  margin-bottom: 0;
}
.services.knapp .idx { padding-top: 0; }
.services.knapp .chev { margin-top: 0; }
.services.knapp .s-body { padding-bottom: 1.9rem; }

/* ---------- Was wir nicht tun ----------
   Die Ausschlusskriterien stehen als ruhige Liste, jede Zeile durch einen
   kurzen Goldstrich eröffnet. Kein Kasten, keine Farbe: die Aussage trägt
   sich selbst und soll nicht wie ein Hinweisfeld aussehen. */

.ausschluss {
  margin-top: 2.9rem;
  border-top: 1px solid var(--line);
  padding-top: 1.7rem;
}
.ausschluss .section-mark { margin-bottom: 1.1rem; }
.ausschluss ul { list-style: none; }
.ausschluss li {
  position: relative;
  padding: .95rem 0 .95rem 2.3rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .97rem;
  line-height: 1.62;
  color: var(--ink-mid);
  max-width: 46rem;
}
.ausschluss li:last-child { border-bottom: 0; }
.ausschluss li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.72rem;
  width: 13px;
  height: 1px;
  background: var(--gold);
}

/* ---------- Wappen ---------- */

.opener.mitbild .shell {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 4.5rem;
  align-items: center;
}

.opener-bild { width: 100%; height: auto; }

/* Das Wappen steht bei der Herkunft, in der schmalen Spalte neben dem Text. */
.aside .wappen {
  width: clamp(96px, 9vw, 124px);
  margin-top: 1.6rem;
  opacity: .95;
}

/* ---------- Weg ---------- */

.path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.6rem;
}

.step { border-top: 2px solid var(--gold-light); padding-top: 1.1rem; }
.step .st-n {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.step strong { font-weight: 400; font-size: 1.06rem; display: block; margin-bottom: .4rem; }
.step p { font-size: .9rem; color: var(--ink-soft); max-width: none; }

/* ---------- Zahlen ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2.8rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}

.figure .val {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: .6rem;
}
.figure .lab {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  line-height: 1.5;
}

.source {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: 2rem;
  letter-spacing: .02em;
}

/* ---------- Beitragsliste ---------- */

.entries { border-top: 1px solid var(--line); margin-top: 2.6rem; }

.entry {
  display: block;
  text-decoration: none;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .3s ease;
}
.entry:hover { padding-left: .7rem; }
.entry h3 { margin-bottom: .5rem; }
.entry p { font-size: .97rem; color: var(--ink-mid); }

/* ---------- Hinweisfeld ---------- */

.note {
  background: var(--paper-warm);
  border-left: 2px solid var(--gold-light);
  padding: 2rem 2.2rem;
  margin-top: 2.8rem;
}
.note p { max-width: 44rem; color: var(--ink-mid); }

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

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem;
  margin-top: 2.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--line);
}

.contact-grid h3 {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.contact-grid a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-light); }
.contact-grid a:hover { color: var(--gold-schrift); border-color: var(--gold); }

/* ---------- Karte ---------- */

.mapwrap {
  margin-top: 2.8rem;
  border: 1px solid var(--line);
  background: var(--paper-warm);
}

.map-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(16rem, 34vw, 24rem);
  padding: 2.5rem 2rem;
  text-align: center;
}

.map-ph .map-adr {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: .9rem;
}

.map-ph p {
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 0 auto;
}

.map-act {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.6rem;
}

.map-act .button { margin-top: 0; background: none; cursor: pointer; font-family: var(--sans); }

.mapwrap iframe {
  display: block;
  width: 100%;
  height: clamp(16rem, 34vw, 24rem);
  border: 0;
}

/* Der Hinweis unter der Karte. Er sagt, woher sie kommt, und steht deshalb
   sichtbar da, nicht im Kleingedruckten. Die Karte laedt seit dem
   2. September ohne Klick, siehe die Bemerkung auf der Kontaktseite. */
.map-note {
  font-family: var(--sans);
  font-size: .74rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: .9rem;
  max-width: 46rem;
}

.map-note a {
  color: var(--gold-schrift);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  white-space: nowrap;
}

.map-note a:hover { border-bottom-color: var(--gold); }

/* ---------- Aufruf ---------- */

.call { background: var(--paper-warm); border-bottom: 0; }
.call h2 { margin-bottom: 1.2rem; }

.button {
  display: inline-block;
  margin-top: 1.8rem;
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--gold);
  padding: .95rem 2.1rem;
  transition: background .25s ease, color .25s ease;
}
.button:hover { background: var(--gold); color: #fff; }

/* ---------- Bilder ---------- */

.band {
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.band img {
  width: 100%;
  height: clamp(18rem, 42vw, 30rem);
  object-fit: cover;
  will-change: transform;
}

/* Die Reihe der Handelsplätze: sechs Bilder im Querformat nebeneinander,
   jedes vollständig. Sie bewegt sich beim Scrollen nicht und ist so hoch,
   wie die Bilder es verlangen. Auf dem Telefon zwei Reihen zu dritt. */
.band.reihe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  background: var(--paper);
}
.band.reihe img {
  height: auto;
  aspect-ratio: 4 / 3;
  will-change: auto;
  transform: none !important;
}
@media (max-width: 700px) {
  .band.reihe { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Bewegung beim Scrollen ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 60;
  pointer-events: none;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }

.opener .kicker,
.opener h1,
.opener > .shell > div > p,
.opener > .shell > p {
  animation: opener-in 1s ease both;
}
.opener .kicker { animation-delay: .05s; }
.opener h1 { animation-delay: .18s; }
.opener p { animation-delay: .32s; }

@keyframes opener-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

figure { margin: 0; }

figcaption {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: .8rem;
  line-height: 1.6;
}

.fig-wide { margin-top: 2.8rem; }
.fig-wide img { width: 100%; }

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.8rem;
}
.trio.quad { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.trio img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.trio figcaption { margin-top: .7rem; }

.step img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1rem;
}
.step { border-top: 0; padding-top: 0; }
.step .st-n { border-top: 2px solid var(--gold-light); padding-top: .9rem; }

/* Ohne die Marke «Erste Stufe» trägt die Stufe den Strich selbst. */
.path.schlicht .step { border-top: 2px solid var(--gold-light); padding-top: 1.3rem; }

.portrait {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--line);
}
.portrait img { width: 100%; }
.portrait p { max-width: 40rem; }

.entry-img {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 2rem;
  align-items: start;
}
.entry-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.chart {
  margin-top: 2.8rem;
  border: 1px solid var(--line-soft);
}
.chart svg, .chart img { width: 100%; height: auto; }

/* ---------- Fusszeile ---------- */

.foot {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 4rem;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink-soft);
}

/* Alle drei Spalten beginnen mit derselben Überschrift auf derselben Höhe.
   Das Wappen sass früher über dem Namen und machte die erste Spalte höher
   als die beiden anderen; es steht jetzt unten neben dem rechtlichen
   Vermerk und gibt der Schlusszeile ihren Anker. */

.foot-in {
  display: grid;
  /* Gleich breite Spalten. Bei ungleichen Breiten laegen die drei Mittelachsen
     in ungleichen Abstaenden zueinander, und genau das faellt bei zentriertem
     Satz sofort auf. */
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

/* Die Fusszeile ist durchgehend zentriert: Ueberschriften, Angaben, Listen,
   das Wappen, die Handelsplaetze und der rechtliche Vermerk. Eine einzige
   Regel fuer alles, damit keine zweite Achse entsteht. */
.foot-in > div,
.foot .uhrzeile,
.foot .legal {
  text-align: center;
}

/* Die Huelle um Kontakt und Wappen zieht sich auf die Breite der laengsten
   Zeile zusammen; damit sie in der zentrierten Spalte mittig steht, bekommt
   sie beidseitig automatischen Aussenabstand. */

.foot a { color: var(--ink-mid); text-decoration: none; }
.foot a:hover { color: var(--gold-schrift); }
.foot ul { list-style: none; line-height: 2; }
.foot .fh {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .9rem;
}
.foot .legal {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .74rem;
  line-height: 2.2;
}

/* ---------- Handelsplätze in der Fusszeile ----------
   Eine ruhige Zeile über dem rechtlichen Vermerk: Datum in Schweizer
   Schreibweise, darunter die Ortszeiten der Plätze, an denen das Haus
   tätig ist. Als Liste im Fluss gesetzt, nicht als Raster; so bricht sie
   auf jeder Breite von selbst sauber um, ohne dass Lücken entstehen.
   Gerechnet wird im Browser über die Zeitzonen nach IANA, damit die
   Sommerzeit von allein stimmt und kein Server nötig ist. */

.uhrzeile {
  margin-top: 2.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  /* Im Fuss steht die Zeile ohnehin in der schmalen Schrift. Im Auftakt erbte
     sie bisher die Hausschrift, deren Ziffern als Mediävalziffern gesetzt
     sind: sie sitzen unterschiedlich hoch und wirken kleiner. Beide Orte
     bekommen deshalb dieselbe Schrift, damit die Uhrzeiten überall gleich
     klar und gleich gross erscheinen. */
  font-family: var(--sans);
}

.uhrzeile .tag {
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1.05rem;
}

.uhrzeile ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.4rem;
  line-height: 1.6;
}

.uhrzeile li { white-space: nowrap; font-size: .85rem; }

.uhrzeile .ort {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.uhrzeile .zeit {
  margin-left: .55rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .uhrzeile ul { gap: .55rem 1.5rem; }
  .uhrzeile li { font-size: .8rem; }
}

@media (max-width: 560px) {
  .uhrzeile { margin-top: 2.4rem; }
  .uhrzeile .tag { font-size: .72rem; }
  .uhrzeile ul { gap: .5rem 1.2rem; }
  .uhrzeile li { font-size: .78rem; }
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
  .fields { grid-template-columns: 1fr; }
  .field { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 2.2rem 0; }
  .field:not(:first-child) { padding-left: 0; }
  .field:last-child { border-bottom: 0; }
  .path { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
  .figures { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .split { grid-template-columns: 1fr; gap: 1.4rem; }
  .split .aside { padding-top: 0; }
  .foot-in { grid-template-columns: 1fr; gap: 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .trio { grid-template-columns: 1fr; gap: 2rem; }
  .trio.quad { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .portrait { grid-template-columns: 1fr; gap: 1.6rem; }
  .portrait img { max-width: 16rem; }
  .entry-img { grid-template-columns: 1fr; gap: 1rem; }
  .entry-img img { max-width: 100%; aspect-ratio: 16 / 9; }
  .opener.mitbild .shell { grid-template-columns: 1fr; gap: 2.4rem; }
  .opener.mitbild .opener-bild { max-width: 20rem; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  .shell, .head-in { padding-left: 1.4rem; padding-right: 1.4rem; }
  .brand img { width: 168px; }
  .burger { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: .5rem 1.4rem 1.4rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav a:last-child { border-bottom: 0; }
  .opener { padding: 4rem 0 3rem; }
  section { padding: 3.5rem 0; }
  .service > summary { grid-template-columns: 2.4rem 1fr 1.4rem; gap: .9rem; }
  .s-body { padding-left: 3.3rem; }
  .lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .band img { transform: none !important; }
  .progress { display: none; }
}

/* ---------- Schaltflächen im Auftakt, etwa auf der 404 Seite ---------- */

.opener-act { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }
.opener-act .more { padding-top: 0; }

/* ---------- Zustimmungsabfrage in der Farbgebung des Hauses ----------
   Die Abfrage bringt ihre eigene Gestaltung mit, in den Farben der
   bisherigen Website. Diese Regeln setzen sie auf Papier und Gold um.
   Sie stehen bewusst mit body davor, weil die mitgebrachte Gestaltung
   erst zur Laufzeit in den Kopfbereich eingesetzt wird. */

body .wf-cookie.wf-cookie--blocking { background: rgba(30, 27, 22, .74) !important; }

body .wf-cookie.wf-cookie--blocking .wf-cookie__panel {
  background: var(--paper) !important;
  border-radius: 2px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 30px 70px rgba(30, 27, 22, .22) !important;
  font-family: var(--serif);
  color: var(--ink);
}

body .wf-cookie.wf-cookie--blocking h2 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: .01em !important;
  color: var(--ink) !important;
}

body .wf-cookie.wf-cookie--blocking .wf-cookie__eyebrow {
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

body .wf-cookie.wf-cookie--blocking .wf-cookie__body { color: var(--ink-mid) !important; }

body .wf-cookie.wf-cookie--blocking .wf-cookie__btn {
  font-family: var(--sans) !important;
  font-size: .74rem !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="reject"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}

/* Ablehnen und Annehmen sind gleichwertig gesetzt: gleiche Groesse, gleiche
   Flaeche, gleiche Kontur, gleiche Schrift. Ein hervorgehobenes Annehmen
   waere ein Schubs in eine Richtung, und eine Zustimmung, die auf einem
   Schubs beruht, ist keine. Erst beim Zeigen unterscheiden sich die Felder,
   und dann beide gleich. */
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="accept"],
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="save"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}

body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="reject"]:hover,
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="accept"]:hover,
body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="save"]:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

body .wf-cookie.wf-cookie--blocking .wf-cookie__btn[data-cookie-action="settings"] {
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}

body .wf-cookie.wf-cookie--blocking .wf-cookie__btn:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
}

.wf-cookie__options label { display: block; font-family: var(--sans); font-size: .84rem; color: var(--ink-mid); }
.wf-cookie__options label + label { margin-top: .6rem; }
.wf-cookie__panel a { color: var(--gold-schrift); }

/* Die Schaltfläche für die spätere Änderung der Wahl sitzt in der Fusszeile. */
.legal button {
  border: 0; background: transparent; padding: 0; margin-left: 1rem;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.legal button:hover { color: var(--gold-schrift); }

/* ---------- Der Weg baut sich Stufe für Stufe auf ---------- */

.path.reveal { opacity: 1; transform: none; transition: none; }

.path .step {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

.path.in .step { opacity: 1; transform: none; }
.path.in .step:nth-child(1) { transition-delay: 0s; }
.path.in .step:nth-child(2) { transition-delay: .16s; }
.path.in .step:nth-child(3) { transition-delay: .32s; }
.path.in .step:nth-child(4) { transition-delay: .48s; }

/* ---------- Dunkle Fusszeile ---------- */

.foot {
  background: var(--paper);
  border-top: 1px solid var(--gold);
  color: #67655f;
  padding: 5.5rem 0 4rem;
}

.foot .fh { color: var(--ink); }
.foot a { color: var(--ink-mid); }
.foot a:hover { color: var(--gold-schrift); }
.foot .legal { border-top: 1px solid var(--line); color: #67655f; }
.foot .legal a { color: var(--ink-mid); }
.foot .legal a:hover { color: var(--gold-schrift); }
.legal button { color: inherit; }
.legal button:hover { color: var(--gold-schrift); }

/* Das Wappen steht mittig unter den Angaben zum Kontakt.
   Mittig heisst hier: über der Breite der Angaben, nicht über der Breite der
   Spalte. Die Spalte ist erheblich breiter als Telefonnummer und Adresse;
   ein in ihr zentriertes Wappen stünde deutlich zu weit rechts und liefe auf
   schmalen Bildschirmen ganz von den Angaben weg. Die Hülle zieht sich
   deshalb auf die Breite der längsten Zeile zusammen, und erst darin
   zentriert sich das Wappen. */


/* Die letzte Sektion vor der dunklen Fusszeile braucht keine Trennlinie. */
main > section:last-of-type { border-bottom: 0; }

/* ---------- Ruhige Fassung ----------
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, sieht alles
   sofort und an seinem Platz. Diese Regeln stehen am Ende, damit sie die
   neu hinzugekommenen Abschnitte mit erfassen. */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .path .step { opacity: 1; transform: none; }
  .band img { transform: none !important; }
  .progress { display: none; }
}

/* Feinheiten nach der ersten Durchsicht */



/* ---------- Balken in den Diagrammen wachsen beim Erscheinen ---------- */

.chart svg .wachsen {
  transform-box: fill-box;
  transition: transform 1.25s cubic-bezier(.2, .7, .2, 1);
}
.chart svg .wachsen.h { transform-origin: left center; transform: scaleX(0); }
.chart svg .wachsen.v { transform-origin: center bottom; transform: scaleY(0); }
.chart.in svg .wachsen { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .chart svg .wachsen { transform: none !important; }
}

/* ---------- Anfrageformular ---------- */

.anfrage { margin-top: 2.6rem; max-width: 38rem; }

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

.feld { max-width: none; margin-bottom: 1.5rem; }
.feld + .feld { margin-top: 0; }

.feld label {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}

.feld .opt { text-transform: none; letter-spacing: .04em; color: var(--ink-soft); opacity: .65; font-style: italic; }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.feld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 1.1rem center, right .85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.feld textarea { resize: vertical; line-height: 1.6; }

.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.feld input:user-invalid, .feld select:user-invalid, .feld textarea:user-invalid { border-color: #a4553f; }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; align-items: end; }

.feld-haken label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.6;
}

.feld-haken input { margin-top: .35rem; accent-color: var(--gold); width: 1rem; height: 1rem; }
.feld-haken a { color: var(--gold-schrift); }

.feld-act {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
  max-width: none;
  margin-top: 2.2rem;
}

.hinweis { font-size: .88rem; color: var(--ink-soft); }
.hinweis a { color: var(--gold-schrift); text-decoration: none; }
.hinweis a:hover { text-decoration: underline; }

.s-act { margin-top: 1.6rem; }
.note-act { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.8rem; max-width: none; }

/* Rückmeldung, wenn der Versand nicht geklappt hat */
.formfehler {
  border-left: 2px solid #a4553f;
  padding: .9rem 1.2rem;
  margin-bottom: 2rem;
  background: var(--paper-warm);
  font-size: .95rem;
  color: var(--ink-mid);
  max-width: 38rem;
}

@media (max-width: 640px) {
  .feld-paar { grid-template-columns: 1fr; }
}

/* ---------- Zeichnung im Auftakt der Startseite ----------
   Der Seeumriss zeichnet sich beim Laden selbst, danach kommt das Relief
   dahinter und zuletzt der Punkt für den Sitz des Hauses. */

.opener.mitzeichnung .shell {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: 5rem;
  align-items: center;
}

.zeichnung svg { width: 100%; height: auto; display: block; }

.zeichnung .ufer {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ufer 2.8s cubic-bezier(.45, 0, .2, 1) .35s forwards;
}

@keyframes ufer { to { stroke-dashoffset: 0; } }

.zeichnung .relief     { opacity: 0; animation: auftauchen 2.2s ease 1.3s forwards; }
.zeichnung .hilfslinie { opacity: 0; animation: auftauchen 1.8s ease 1.5s forwards; }
.zeichnung .beiwerk    { opacity: 0; animation: auftauchen 1.6s ease 2.2s forwards; }
.zeichnung .sitz       { opacity: 0; animation: auftauchen 1.1s ease 2.9s forwards; }

@keyframes auftauchen { to { opacity: 1; } }

/* Unter 1000 Pixeln bricht der Auftakt auf eine Spalte um. Die Zeichnung
   steht dann unter dem Text, in der Höhe begrenzt und mittig, damit sie den
   Auftakt nicht auseinanderzieht. Die Linien werden kräftiger gesetzt: auf
   ein Bild von 900 Einheiten bemessen bliebe von der Goldlinie sonst weniger
   als ein Pixel und von den Echolinien gar nichts. */
@media (max-width: 1000px) {
  .opener.mitzeichnung .shell { grid-template-columns: 1fr; gap: 2.2rem; }

  /* Sobald der Auftakt auf eine Spalte umbricht, steht die Zeichnung vor der
     Überschrift. Auf dem Telefon ist das Menü auf kleine Zeichen verkürzt;
     die grosse Zeichnung über der Überschrift sagt dem Besucher deshalb
     zuerst, wo er ist. Im Quelltext bleibt die Reihenfolge unverändert, die
     Überschrift steht dort weiterhin vor der Zeichnung. */
  .opener.mitzeichnung .shell > .zeichnung { order: -1; }

  .zeichnung {
    max-width: 22rem;
    margin: 0 auto;
    width: 100%;
  }

  .zeichnung .ufer { stroke-width: 3.4; }
  .zeichnung .beiwerk { stroke-width: 2.2; }
  .zeichnung .hilfslinie { stroke-width: 1.7; }
  .zeichnung .relief path { stroke-width: 2; }
}

@media (max-width: 560px) {
  .zeichnung { max-width: 17rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zeichnung .ufer { stroke-dashoffset: 0; }
  .zeichnung .relief, .zeichnung .sitz,
  .zeichnung .hilfslinie, .zeichnung .beiwerk { opacity: 1; }
}

/* ---------- Direkte Wege ----------
   Zwei zurückhaltende Schaltflächen unter dem Weg einer Zusammenarbeit:
   Telefonhörer und Briefumschlag, in derselben feinen Goldlinie wie die
   Zeichnungen. Die Nummer und die Adresse stehen daneben, damit man sie
   auch am Bildschirm lesen und notieren kann. */

.wege-direkt {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.8rem;
}

.direkt {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--ink-mid);
  border: 1px solid var(--line);
  padding: .8rem 1.4rem;
  transition: border-color .25s ease, color .25s ease;
}

.direkt svg { width: 17px; height: 17px; flex: none; }
.direkt svg * { stroke: var(--gold); }

.direkt:hover { border-color: var(--gold); color: var(--ink); }
.direkt:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ---------- Die Zeichnungen als Navigation ----------
   Jede Seite hat ihr Zeichen. Im Auftakt stehen alle sechs mit ihrer
   Bezeichnung darunter; innerhalb des Auftritts sind dieselben Zeichen das
   Menü, dort ohne Wort. Das Wort bleibt im Quelltext und erscheint beim
   Darüberfahren, damit niemand raten muss und Google weiss, wohin ein
   Zeichen führt. */

.marken-vorrat {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Das Zeichen im Menü ist dieselbe Zeichnung wie im Auftakt, nur ohne die
   grauen Echolinien, die bei dieser Grösse nicht zu sehen wären. Die
   Strichstärken stehen in Punkten des Bildschirms, nicht in Einheiten der
   Zeichnung: damit ist die Linie im Kopf so fein wie im Fuss und so fein wie
   im Auftakt, gleich wie gross das Zeichen steht. */
.marke {
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  color: var(--gold);
  opacity: .62;
  transition: opacity .25s ease;
}

.marke .ufer       { stroke-width: .8px; }
.marke .beiwerk    { stroke-width: .5px; }
.marke .hilfslinie { stroke-width: .45px; }

/* Das Wort erscheint unter dem Zeichen, ohne die Zeile zu verschieben. */
.nav a, .fuss-zeichen a { position: relative; }

.nav a .wort, .fuss-zeichen a .wort {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--ink-soft);
  background: var(--paper);
  padding: .2rem .4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.nav a .wort { top: calc(100% + .35rem); }
.fuss-zeichen a .wort { bottom: calc(100% + .35rem); }

.nav a:hover .wort, .nav a:focus-visible .wort,
.fuss-zeichen a:hover .wort, .fuss-zeichen a:focus-visible .wort { opacity: 1; }

.nav { gap: 2.2rem; align-items: center; }
.nav a { border-bottom: 0; padding-bottom: 0; }
.nav a:hover .marke, .nav a:focus-visible .marke { opacity: 1; }
.nav a.here { border-bottom: 0; }
.nav a.here .marke { opacity: 1; }

/* Die Reihe im Fuss zeigt alle sechs Bereiche des Hauses, die Startseite
   eingeschlossen. */
.fuss-zeichen {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}

.fuss-zeichen .marke { width: 3.6rem; height: 3.6rem; }
.fuss-zeichen a:hover .marke, .fuss-zeichen a:focus-visible .marke { opacity: 1; }

@media (max-width: 780px) {
  /* Im aufgeklappten Menü stehen die Zeichen nebeneinander, nicht
     untereinander: eine Liste aus sechs Zeichen ohne Wort läse sich schlecht,
     eine Reihe dagegen wie im Auftakt. */
  /* Sechs Zeichen nebeneinander müssen in die Breite eines Telefons passen. */
  .nav { flex-direction: row; justify-content: center; gap: .55rem; padding: 1.1rem .7rem; }
  .nav .marke { width: 2.4rem; height: 2.4rem; }

  /* Auf dem Telefon gibt es kein Darüberfahren, also erscheint das Wort dort
     ohnehin nie. Es bleibt im Quelltext und für Vorlesegeräte, nimmt aber
     keinen Platz mehr ein: sonst ragte die Beschriftung des äussersten
     Zeichens über den rechten Rand hinaus und die Seite liesse sich seitlich
     schieben. */
  .nav a .wort, .fuss-zeichen a .wort {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav a { padding: 0; border-bottom: 0; }
  .nav a:last-child { border-bottom: 0; }
  .fuss-zeichen { gap: 1.1rem; }
  .fuss-zeichen .marke { width: 3rem; height: 3rem; }
}

/* ---------- Der Auftakt ----------
   Er liegt über der Startseite, im selben Dokument. Eingeschaltet wird er
   vom Skript; ohne JavaScript bleibt er aus und die Startseite steht sofort
   da. Die Zeichnungen zeichnen sich nacheinander selbst und sind erst
   anklickbar, wenn sie stehen. Ein Klick vorher bricht die Bewegung ab. */

.auftakt {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Auf sehr niedrigen Fenstern ist der Auftakt höher als der Bildschirm.
     Mittig gesetzt ragte er dann oben hinaus, und der Schriftzug wäre auch
     durch Rollen nicht mehr erreichbar. Mit "safe" rückt er in diesem Fall
     an den oberen Rand. */
  justify-content: safe center;
  overflow-y: auto;
}

/* Der Auftakt steht oberhalb der Mitte. Das Auge sucht den Schriftzug im
   oberen Drittel der Fläche, nicht genau in ihrer Mitte. Erreicht wird das
   mit zwei nachgiebigen Feldern, die den freien Platz im Verhältnis eins zu
   drei unter sich aufteilen: ein Viertel darüber, drei Viertel darunter. Das
   gilt auf jedem Bildschirm gleichermassen, und wo kein Platz übrig ist,
   fallen beide von selbst auf null zusammen, ohne dass oben etwas
   abgeschnitten wird. */
.auftakt::before { content: ""; flex: 1 1 0; }
.auftakt::after  { content: ""; flex: 3 1 0; }

.auftakt[hidden] { display: none; }

.auftakt-in {
  width: 100%;
  max-width: 74rem;
  padding: 3rem 1.6rem;
  text-align: center;
  flex: none;
}

/* Ohne max-width bliebe der Absatz auf Lesebreite und der Schriftzug
   stünde links davon statt in der Mitte. */
.auftakt-marke { margin: 0; max-width: none; text-align: center; }
.auftakt-marke img { width: 15rem; height: auto; margin: 0 auto; }

/* Ein Raster, kein umbrechender Fluss: sonst stünden bei 1000 Punkten fünf
   Zeichen in der ersten Reihe und eines allein in der zweiten. Sechs
   nebeneinander auf dem Schreibtisch, sonst zwei Reihen zu dritt. */
.auftakt-zeichen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 10.5rem);
  justify-content: center;
  align-items: start;
  gap: 1.4rem 2rem;
  margin: 2.6rem 0 0;
  padding: 0;
}

/* Der Schriftzug braucht Luft unter sich, sonst sitzen die Zeichnungen ihm
   im Nacken und der Auftakt wirkt oben gedrängt. Wo der Bildschirm die Höhe
   dafür hergibt, rückt deshalb alles unterhalb des Schriftzugs weiter nach
   unten. Auf Fenstern, die breit, aber niedrig sind, bleibt der Abstand wie
   er ist, damit der Auftakt weiterhin auf einen Blick steht. */
@media (min-width: 1101px) {
  .auftakt-zeichen { margin-top: 5.2rem; }
}

@media (max-width: 780px) {
  .auftakt-zeichen { margin-top: 3.6rem; }
}

.auftakt-zeichen a {
  display: block;
  width: 10.5rem;
  text-decoration: none;
  color: inherit;
  pointer-events: none;
}

.auftakt .auftakt-zeichen a { pointer-events: auto; }

.auftakt-zeichen .zeichnung svg { width: 100%; height: auto; display: block; }

/* Die Angaben unter den Zeichnungen stehen von Anfang an da: die
   Bezeichnungen, das Datum, die Uhrzeiten und der Weg zur Startseite. Nur
   die Zeichnungen selbst entstehen vor den Augen des Besuchers. So weiss er
   im ersten Augenblick, wo er ist und was ihn erwartet, und schaut dem
   Entstehen zu, statt darauf zu warten. */
.auftakt-zeichen .wort {
  display: block;
  margin-top: .2rem;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .25s ease;
}

.auftakt-zeichen a:hover .wort { color: var(--gold-schrift); }
.auftakt-zeichen a:hover .ufer { stroke-width: 3; }

.auftakt .uhrzeile { margin-top: 2.2rem; }
.auftakt .uhrzeile ul { justify-content: center; }

/* Auf einem Fenster, das breit, aber nicht hoch ist, brechen die Zeichen auf
   zwei Reihen um und der Auftakt wird höher als der Bildschirm. Die Abstände
   unterhalb der Zeichen rücken dort etwas zusammen, damit alles auf einen
   Blick steht und niemand rollen muss. */
@media (max-width: 1100px) {
  .auftakt .uhrzeile { margin-top: 1.5rem; padding-top: 1.2rem; }
  .auftakt .auftakt-wege { margin-top: 1.3rem; }
}

.auftakt-weiter {
  margin-top: 2.4rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 3px;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

.auftakt-weiter:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* Die sechs Zeichnungen entstehen nacheinander, versetzt um zwei
   Zehntelsekunden. Nach rund vier Sekunden stehen alle. */
/* Die Strichstärken stehen in Punkten des Bildschirms, nicht in Einheiten
   der Zeichnung. Sonst rechnet der Browser sie mit dem Bild klein: aus zwei
   Einheiten auf einem Bild von neunhundert werden bei hundertsechzig Punkten
   Breite ein Drittel Punkt, und davon bleibt am Ende ein blasser Schatten.
   So ist die Linie im Auftakt so kräftig wie im Menü. */
.auftakt .ufer, .auftakt .beiwerk,
.auftakt .hilfslinie, .auftakt .relief path { vector-effect: non-scaling-stroke; }

.auftakt .ufer { stroke-width: 1.2px; stroke-opacity: 1; }
.auftakt .beiwerk { stroke-width: .75px; stroke-opacity: .92; }
.auftakt .hilfslinie { stroke-width: .6px; stroke-opacity: .6; }
.auftakt .relief path { stroke-width: .6px; }

/* Im Auftakt stehen die Zeichnungen sofort. Er ist die Übersicht über das
   Haus, kein Vorspann: wer ihn öffnet, will die sechs Zeichen sehen und
   eines davon anklicken, nicht warten. Das Zeichnen selbst bleibt den
   einzelnen Seiten vorbehalten, wo es zur Ruhe des Auftakts der Seite
   gehört und niemanden aufhält. */
.auftakt .ufer { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.auftakt .relief, .auftakt .beiwerk,
.auftakt .hilfslinie, .auftakt .sitz { opacity: 1; animation: none; }
.auftakt .wort { animation: none; opacity: 1; }

@media (max-width: 1100px) {
  /* Zwei Reihen zu dritt brauchen mehr Höhe als eine Reihe zu sechst. Etwas
     kleiner gesetzt, damit der Auftakt auch auf einem Bildschirm von 800
     Punkten Höhe ohne Rollen dasteht. */
  .auftakt-zeichen { grid-template-columns: repeat(3, 9.4rem); }
  .auftakt-zeichen a { width: 9.4rem; }
}

@media (max-width: 900px) {
  .auftakt-zeichen { grid-template-columns: repeat(3, 8rem); }
  .auftakt-zeichen a { width: 8rem; }
  .auftakt-marke img { width: 12rem; }
}

@media (max-width: 560px) {
  /* Auf schmalen Telefonen rücken die sechs Zeichen im Fuss enger zusammen,
     sonst schöbe sich die Seite seitlich. Gemessen bei 360 Punkten. */
  .fuss-zeichen { gap: .7rem; }
  .fuss-zeichen .marke { width: 2.6rem; height: 2.6rem; }
  .nav { gap: .4rem; }
  .nav .marke { width: 2.2rem; height: 2.2rem; }

  /* Drei Zeichen nebeneinander, zwei Reihen. Das längste Wort,
     Partnerschaften, gibt die Breite vor: es steht in einer Zeile, ohne
     über sein Feld hinauszulaufen. */
  .auftakt-zeichen { grid-template-columns: repeat(3, 6.9rem); gap: .9rem .8rem; }
  .auftakt-zeichen a { width: 6.9rem; }
  .auftakt .ufer { stroke-width: 1.05px; }
  .auftakt-zeichen .wort { font-size: .52rem; letter-spacing: .06em; }
  .auftakt-in { padding: 2rem .8rem; }
  .auftakt-marke img { width: 10.5rem; }
}


/* Solange der Auftakt steht, soll die Startseite darunter nicht mitrollen. */
html.auftakt-offen, html.auftakt-offen body { overflow: hidden; }


/* LinkedIn in der Spalte Kontakt: das Zeichen des Dienstes vor dem Wort, in
   der Farbe der Schrift daneben, damit es die ruhige Fusszeile nicht bricht. */
.foot a.in {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.in-marke {
  width: .95em;
  height: .95em;
  flex: none;
  opacity: .85;
}

/* ---------- Direkte Wege im Auftakt ----------
   Telefon, WhatsApp und E Mail, in derselben feinen Goldlinie wie die
   Zeichnungen darüber. Wer den Auftakt sieht, kann von dort aus anrufen,
   schreiben oder eine Nachricht senden, ohne erst eine Seite zu öffnen. */

.auftakt-wege {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem 2.4rem;
  margin-top: 1.8rem;
}

.auftakt-wege a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .09em;
  transition: color .25s ease;
}

.auftakt-wege svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  opacity: .85;
  transition: opacity .25s ease;
}

.auftakt-wege a:hover, .auftakt-wege a:focus-visible { color: var(--ink); }
.auftakt-wege a:hover svg, .auftakt-wege a:focus-visible svg { opacity: 1; }

@media (max-width: 560px) {
  .auftakt-wege { gap: .7rem 1.2rem; font-size: .7rem; }
  .auftakt-wege a { font-size: .68rem; letter-spacing: .05em; }
  .auftakt-wege svg { width: 1.2rem; height: 1.2rem; }
}

/* ---------- Häufige Fragen ----------
   Gebaut aus `details` und `summary`. Das Auf und Zu macht der Browser
   selbst; ohne JavaScript funktioniert es unverändert, und die Antwort steht
   auch im geschlossenen Zustand im Quelltext. Die Zeile antwortet auf den
   Zeiger: die Linie färbt sich golden, das Zeichen dreht sich. */

.fragen-liste { border-top: 1px solid var(--line); }

.frage {
  border-bottom: 1px solid var(--line);
  transition: border-color .25s ease;
}

.frage summary {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  transition: color .2s ease;
}

.frage summary::-webkit-details-marker { display: none; }

/* Das Zeichen: ein Kreuz aus zwei Linien, das sich beim Öffnen zum
   Minus dreht. Kein Bild, kein Zeichensatz, nur zwei Ränder. */
.frage summary::before {
  content: "";
  flex: none;
  position: relative;
  top: .35rem;
  width: .62rem;
  height: .62rem;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1px 100% no-repeat;
  transition: transform .3s ease, background-size .3s ease;
}

.frage[open] summary::before {
  transform: rotate(180deg);
  background-size: 100% 1px, 1px 0;
}

.frage:hover { border-bottom-color: var(--gold-light); }
.frage summary:hover { color: var(--gold-schrift); }
.frage summary:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: .35rem;
}

.antwort {
  padding: 0 0 1.35rem 1.72rem;
  max-width: 46rem;
}

.antwort p {
  margin: 0;
  color: var(--ink-mid);
}

/* Die Antwort fährt auf, statt zu springen. Wo der Browser das noch nicht
   kann, erscheint sie wie bisher unmittelbar; nichts geht verloren. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .frage::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .32s ease, opacity .28s ease, content-visibility .32s allow-discrete;
  }
  .frage[open]::details-content { block-size: auto; opacity: 1; }
}

.fragen-mehr {
  margin: 1.9rem 0 0;
  font-family: var(--sans);
  font-size: .82rem;
}

.fragen .split + .split { margin-top: 3.2rem; }

@media (max-width: 760px) {
  .frage summary { font-size: .9rem; gap: .85rem; }
  .antwort { padding-left: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .frage summary::before,
  .frage::details-content { transition: none; }
}