/* =========================================================================
   GartenHAHN GmbH — Gestaltung der Website
   Entwurf «Plan auf Papier» (2026-09-24, nach Inhaber-Entscheid: hell und
   natürlich, frei von der alten Seite).

   Die Idee: Die Seite sieht aus wie ein Gartenplan. Heller Papiergrund, feine
   Linien statt Farbflächen, quadratische Kanten, nummerierte Abschnitte,
   Bilder randlos. Das Strichbild des Logos gibt die Sprache vor. Grün ist
   Markierung, keine Fläche; die Farbe kommt aus den Fotos.

   Ein Wertesystem an einer Stelle; darunter wird kein freier Wert gesetzt.
   ========================================================================= */

/* --- Schriften, lokal ausgeliefert (SIL OFL, siehe schriften/OFL-*.txt) --- */

@font-face {
  font-family: "Lora";
  src: url("../schriften/lora-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("../schriften/lora-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../schriften/dm-sans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../schriften/dm-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora bleibt allein für den Schriftzug «GartenHAHN» im Kopf und in der Fusszeile:
   das ist die Schrift des Logos. Nur der lateinische Grundbereich wird geladen. */
@font-face {
  font-family: "Sora";
  src: url("../schriften/sora-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Das Wertesystem --------------------------------------------------- */

:root {
  /* Papier und Linien */
  --papier: #FCFBF7;
  --papier-tief: #F4F3EC;     /* ruhige Fläche, kaum abgesetzt */
  --papier-warm: #F7F2E9;
  --linie: #DEDBCD;           /* Hauptlinie, wie ein Bleistiftstrich */
  --linie-fein: #E9E6DA;

  /* Schrift */
  --tinte: #24271F;
  --tinte-leise: #6A6F60;

  /* Markierungen, sparsam */
  --gruen: #00833F;
  --gruen-tief: #056330;
  --sand: #B08A4A;

  --schrift-titel: "Lora", Georgia, "Times New Roman", serif;
  --schrift-text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-marke: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Papier, kein Karoblatt: eine feine Körnung statt eines Rasters. Steht hier als Wert,
     weil sie an zwei Stellen gebraucht wird: auf der Seite selbst und überall dort, wo
     etwas die Planlinie verdecken soll, ohne dass die Fläche flach wirkt. */
  --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.035'/%3E%3C/svg%3E");

  --t-marke: clamp(11px, 0.63rem + 0.12vw, 0.73rem);   /* Untergrenze in px: sonst rutschen die gesperrten Beschriftungen mit der kleineren Grundschrift unter 11 px */   /* Kleinschrift, gesperrt */
  --t-s: clamp(0.9rem, 0.86rem + 0.18vw, 1rem);
  --t-text: clamp(1.02rem, 0.97rem + 0.26vw, 1.19rem);
  --t-gross: clamp(1.15rem, 1.03rem + 0.55vw, 1.45rem);
  --t-h3: clamp(1.2rem, 1.08rem + 0.6vw, 1.55rem);
  --t-h2: clamp(1.85rem, 1.35rem + 2.05vw, 3.15rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4.1vw, 5rem);

  --raum-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --raum-2: clamp(0.9rem, 0.8rem + 0.5vw, 1.4rem);
  --raum-3: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
  --raum-4: clamp(2rem, 1.5rem + 2.4vw, 4rem);
  --raum-5: clamp(3rem, 2.2rem + 3.6vw, 6rem);
  --raum-6: clamp(4rem, 2.6rem + 6vw, 9rem);

  --spalte: 78rem;
  --rand: clamp(1.15rem, 0.7rem + 2.2vw, 3.5rem);
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* ================================================================================
   DIE SEITE WÄCHST MIT DEM BILDSCHIRM (Inhaber-Entscheid 2026-10-12)
   ================================================================================
   Auf einem 1920er Bildschirm wirkte die Seite klein: Die Spalte ist auf 78 rem
   begrenzt, bei 16 px Grundschrift also 1248 px, und daneben blieben zweimal
   336 px leer. Der Inhaber hat das bisher mit 125 % Zoom ausgeglichen.

   Statt Zoom wächst jetzt die GRUNDSCHRIFT mit der Fensterbreite. Weil Schrift,
   Abstände und Spaltenbreite alle in rem gerechnet sind, wächst die Seite dadurch
   gleichmässig mit - genau wie beim Zoomen, nur automatisch und nur dort, wo Platz
   ist. Bis 1440 px bleibt alles wie bisher, bei 1920 px entspricht es 125 %.

   Nicht über 20 px: Sonst wird aus einer ruhigen Seite ein Plakat. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

/* KEIN Wachsen mit der Fensterbreite mehr (Messung 2026-10-12).
   Der Laptop des Inhabers meldet 2195 px Fensterbreite bei 100 Prozent, weil der
   Bildschirm dicht ist und Windows auf 140 Prozent skaliert. Eine Regel, die an der
   Fensterbreite hängt, landet dort am oberen Anschlag und macht alles zu gross -
   obwohl der Bildschirm physisch klein ist. Breite in Pixeln sagt also nichts darüber,
   wie gross etwas AUSSIEHT. Deshalb feste 16 px, wie die Schriftskala es annimmt. */

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  font-weight: 350;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Papier, kein Karoblatt: eine feine Körnung statt eines Rasters.
     Ein Raster liest sich als Rechenheft, sobald man es erkennt. */
  background-image: var(--koernung);
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  color: var(--tinte);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
/* Lora hat längere Unterlängen als die frühere Schrift: etwas mehr Zeilenabstand,
   dafür weniger Sperrung, sonst stossen zweizeilige Titel aneinander. */
/* Ein Satz bricht nicht in der Mitte: Die Zeile faellt zwischen die Saetze. */
.satz { display: inline-block; }
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.018em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.014em; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.008em; font-weight: 500; }

p { margin: 0 0 1.05em; max-width: 60ch; text-wrap: pretty; }

a { color: var(--gruen-tief); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--tinte); }

ul { padding-left: 1.1em; }
li { margin-bottom: 0.35em; max-width: 60ch; }

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

strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Gerüst ------------------------------------------------------------ */

.spalte {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.schmal { max-width: 46rem; }
.mittel { max-width: 58rem; }

.abschnitt { padding-block: var(--raum-6); position: relative; }
.abschnitt-eng { padding-block: var(--raum-5); }

/* Eine Seite, kein Stapel Abschnitte:
   Durch die ganze Seite läuft am linken Rand eine Planlinie. Die Abschnitte hängen daran,
   statt als eigene Blöcke nebeneinanderzustehen. Deshalb gibt es weder Trennlinien
   zwischen den Abschnitten noch ganzflächige Farbbänder. */
/* Die Planlinie haengt an .blatt, nicht an main: So reicht sie bis zur Fusszeile,
   auch wenn die Seite mit einem randlosen Bild endet. flow-root, damit der untere
   Abstand des letzten Abschnitts INNERHALB liegt und die Linie dort nicht frueher endet. */
.blatt { position: relative; display: flow-root; padding-bottom: var(--raum-6); }

@media (min-width: 64rem) {
  .blatt::before, .blatt::after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    left: max(var(--rand), calc(50% - var(--spalte) / 2 + var(--rand)));
    pointer-events: none;
  }
  .blatt::before { bottom: 0; background: var(--linie-fein); }
  /* Der grüne Faden wächst beim Scrollen mit, über die ganze Seite hinweg */
  .blatt::after {
    height: 100%;
    background: var(--gruen);
    opacity: 0.55;
    transform-origin: 50% 0;
    transform: scaleY(0);
  }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .blatt::after { animation: faden linear both; animation-timeline: scroll(root block); }
    }
  }
  @keyframes faden { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* Die Linie läuft HINTER den randlosen Bildern durch, nicht darüber (Inhaber-
     Entscheid 2026-09-28). Ein Faden, der quer über ein Foto zieht, sieht aus wie
     ein Kratzer. Beim Bild taucht er ab und kommt darunter wieder heraus.
     Seit 2026-10-11 gilt dasselbe für das Laufband mit den Gartenwünschen. Damit
     die Linie dort wirklich verschwindet, braucht das Band eine eigene Fläche:
     Papierfarbe und dieselbe Körnung wie die Seite. */
  .band-bild, .bild-text, .laufband { position: relative; z-index: 1; }
  .laufband { background-color: var(--papier); background-image: var(--koernung); }


  /* Die Abschnittsnummer hängt mit einem Strich an der Planlinie */
  .nummer { position: relative; }
  .nummer::before {
    content: "";
    position: absolute;
    left: calc(var(--rand) * -1 + 1px);
    top: 0.62em;
    width: calc(var(--rand) - 0.5rem);
    height: 1px;
    background: var(--linie);
  }
}

/* Ruhige Fläche: kein Band über die volle Breite, sondern ein eingerücktes Planfeld */
.abschnitt.ruhig { background: transparent; }
.abschnitt.ruhig > .spalte > * { position: relative; }
.abschnitt.ruhig::before {
  content: "";
  position: absolute;
  inset: calc(var(--raum-4) * -0.2) 0;
  left: max(var(--rand), calc(50% - var(--spalte) / 2 + var(--rand)));
  right: max(var(--rand), calc(50% - var(--spalte) / 2 + var(--rand)));
  background: var(--papier-tief);
  z-index: -1;
}
.warm { background: var(--papier-warm); }

.leise { color: var(--tinte-leise); }
.klein { font-size: var(--t-s); }

/* Kleinschrift gesperrt, das Etikett des Plans */
.marke-zeile {
  display: block;
  font-size: var(--t-marke);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: var(--raum-2);
}

/* Nummerierte Abschnitte wie Planpositionen */
.nummer {
  font-family: var(--schrift-text);
  font-size: var(--t-marke);
  letter-spacing: 0.18em;
  color: var(--tinte-leise);
  display: block;
  margin-bottom: 0.6rem;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(252 251 247 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem clamp(0.8rem, 0.1rem + 0.9vw, 1.5rem);
  min-height: 4.4rem;
}

.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--tinte); }
.marke img { width: 2.3rem; transition: transform 0.5s var(--kurve); }
.marke:hover img { transform: rotate(-5deg); }
.marke-name {
  font-family: var(--schrift-marke);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.marke-name span { color: var(--sand); }

/* Menü mit zwei Ebenen: Reiter, darunter die Unterseiten */
/* Abstand der Reiter: knapper, sobald der Platz eng wird. Englische Beschriftungen
   sind länger als die deutschen, und der Anfrage-Knopf soll in derselben Zeile bleiben. */
.menue { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(0.9rem, 0.1rem + 1vw, 1.6rem); }
.menue > li { list-style: none; position: relative; margin: 0; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue a {
  display: inline-block;
  color: var(--tinte);
  text-decoration: none;
  /* eigenes Mass: haengt NICHT an --t-s. Sonst wird das Menue mitbreiter, wenn der
     Lesetext waechst, und der Anfragen-Knopf rutscht in die zweite Zeile. */
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}
.menue a:hover { border-bottom-color: var(--gruen); }
.menue a[aria-current="page"] { border-bottom-color: var(--tinte); }
.menue .reiter > a { font-weight: 500; }

@media (min-width: 52rem) {
  .menue .unter {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 15rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    padding: 0.8rem 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s var(--kurve), transform 0.2s var(--kurve), visibility 0.2s;
  }
  .menue .reiter:hover .unter,
  .menue .reiter:focus-within .unter { opacity: 1; visibility: visible; transform: none; }
  .menue .unter li + li { margin-top: 0.15rem; }
}

/* Schalter fürs Menü: nur auf dem Telefon sichtbar, kommt ohne JavaScript aus */
.menue-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menue-knopf { display: none; }

@media (max-width: 51.99rem) {
  .kopf-inhalt { padding-block: 0.6rem; min-height: 0; }
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--t-marke);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem 0.2rem;
    cursor: pointer;
  }
  .menue-knopf::after {
    content: "";
    width: 1.3rem;
    height: 9px;
    border-top: 1px solid var(--tinte);
    border-bottom: 1px solid var(--tinte);
    transition: transform 0.3s var(--kurve);
  }
  .menue-schalter:focus-visible + .menue-knopf { outline: 2px solid var(--gruen); outline-offset: 3px; }
  .menue-schalter:checked + .menue-knopf::after { transform: rotate(90deg); }
  /* Nur das Hauptmenü nimmt die volle Zeile. Die Sprachwahl ist ebenfalls ein
     nav-Element und bliebe sonst über die ganze Breite stehen. */
  .hauptnav { order: 3; width: 100%; }
  .menue { display: none; }
  .menue-schalter:checked ~ .hauptnav .menue { display: flex; padding-block: 0.6rem 1rem; }
  .menue { width: 100%; gap: 0.1rem 1.1rem; font-size: 0.84rem; align-items: flex-start; }
  .menue .unter { display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
  .menue .unter a { color: var(--tinte-leise); font-size: 0.8rem; }
  .menue .reiter { width: 100%; }
  .menue .reiter > a { font-weight: 600; }
}

/* Der aktive Bereich bleibt im Menü markiert, auch auf einer Unterseite */
.menue .reiter[data-bereich="offen"] > a { border-bottom-color: var(--linie-dunkel); }

/* Knopf in der Kopfzeile: der Weg zur Anfrage ist immer sichtbar */
.kopf-knopf { padding: 0.6rem 1.1rem; font-size: var(--t-marke); letter-spacing: 0.12em; text-transform: uppercase; }
/* Auf kleinen Bildschirmen übernimmt die Leiste am unteren Rand diese Rolle.
   Die Regel steht vor .knopf, deshalb braucht sie hier mehr Gewicht. */
@media (max-width: 67.99rem) { .kopf .kopf-knopf { display: none; } }

/* Zwischen 64 und 82 rem wird es im Kopf eng, sobald die Beschriftungen länger sind
   als die deutschen: «Get in touch» und «Equipment rental» drückten den Knopf in eine
   zweite Zeile. Statt den Knopf zu verstecken, rücken Menü und Abstände zusammen. */
@media (min-width: 68rem) and (max-width: 82rem) {
  .kopf .menue { gap: 0 0.85rem; }
  .kopf .menue a { font-size: 0.84rem; }
  .kopf .kopf-knopf { padding-inline: 0.85rem; }
  .kopf .kopf-inhalt { column-gap: 0.9rem; }
}
.kopf .kopf-knopf { white-space: nowrap; }

/* Oberhalb von 82 rem wächst die Spalte nicht mehr mit (max-width 78 rem), die
   Abstände im Kopf aber schon: Sie hängen an vw. Bei 1920 waren Menü und Abstände
   zusammen breiter als die Spalte, und der Anfragen-Knopf rutschte in die zweite
   Zeile - auf Englisch zuerst, weil die Beschriftungen länger sind. Ab hier feste
   Abstände. (Gefunden 2026-10-12: bei 1440 unsichtbar, bei 1920 jedes Mal.) */
@media (min-width: 82rem) {
  .kopf .menue { gap: 0 1.15rem; }
  .kopf .kopf-inhalt { column-gap: 1rem; }
}

/* --- Sprachwahl -------------------------------------------------------- */
/* Zwei Kürzel mit einem Trennstrich dazwischen, wie eine Beschriftung im Plan.
   Die aktuelle Sprache ist kein Link, sondern steht einfach da. */

.sprachwahl {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-marke);
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
}
.sprachwahl a,
.sprachwahl span {
  padding: 0.3rem 0.1rem;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  color: var(--tinte-leise);
}
.sprachwahl a:hover { color: var(--tinte); border-bottom-color: var(--linie-dunkel); }
.sprachwahl [aria-current] { color: var(--tinte); border-bottom-color: var(--linie-dunkel); }
.sprachwahl a + a::before,
.sprachwahl span + a::before,
.sprachwahl a + span::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--linie);
  border: 0;
}
/* Auf dem Telefon steht die Sprachwahl neben dem Menüknopf, nicht in einer eigenen
   Zeile darunter. Das Menü selbst klappt darunter auf (nav hat dort Ordnung 3). */
@media (max-width: 51.99rem) {
  .kopf .marke { order: 0; }
  .kopf .sprachwahl { order: 1; gap: 0.3rem; letter-spacing: 0.06em; font-size: 0.68rem; }
  .kopf .sprachwahl a + a::before,
  .kopf .sprachwahl span + a::before,
  .kopf .sprachwahl a + span::before { margin-right: 0.3rem; }
  .kopf .menue-knopf { order: 2; }
  .kopf .kopf-inhalt { column-gap: 0.7rem; }
}

/* --- Hinweiskarte ------------------------------------------------------ */
/* Umzug, Betriebsferien, ein Angebot. Sie legt sich NICHT über den Inhalt, sondern
   sitzt in der Ecke: Google wertet Einblendungen, die den Inhalt auf dem Telefon
   verdecken, als störend. Wegklicken merkt sich der Browser des Besuchers. */

.hinweis {
  display: none;
  position: fixed;
  right: var(--raum-2);
  bottom: var(--raum-2);
  z-index: 60;
  width: min(23rem, calc(100vw - 2 * var(--raum-2)));
  background: var(--papier);
  border: 1px solid var(--linie);
  box-shadow: 0 14px 40px rgb(26 29 22 / 0.16);
  padding: var(--raum-3) var(--raum-3) calc(var(--raum-3) - 0.3rem);
}
/* Ohne JavaScript steht die Karte gleich da, dafür ohne Schliessknopf */
html:not(.js) .hinweis { display: block; }
html:not(.js) .hinweis-zu { display: none; }

.hinweis.ist-da {
  display: block;
  animation: hinweis-auf 0.5s var(--kurve) both;
}
@keyframes hinweis-auf {
  from { opacity: 0; transform: translateY(0.9rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hinweis.ist-da { animation: none; }
}

.hinweis p { margin: 0 0 0.6rem; font-size: var(--t-s); }
.hinweis .hinweis-titel {
  font-family: var(--schrift-titel);
  font-size: var(--t-h3);
  line-height: 1.25;
  margin: 0 0 0.5rem;
  padding-right: 1.6rem;   /* Platz für den Schliessknopf */
}
.hinweis .hinweis-knopf { margin: 0.9rem 0 0.3rem; }
.hinweis .knopf { font-size: var(--t-marke); padding: 0.5rem 0.9rem; }

.hinweis-zu {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--tinte-leise);
}
.hinweis-zu:hover { color: var(--tinte); }
.hinweis-zu:focus-visible { outline: 2px solid var(--gruen); outline-offset: -2px; }

/* Auf dem Telefon sitzt unten schon die Leiste mit WhatsApp und Anruf */
@media (max-width: 51.99rem) {
  .hinweis { bottom: calc(3.6rem + var(--raum-2)); }
}

/* Hinweis auf einer Seite, die in dieser Sprache noch nicht vorliegt.
   Sie wird zusätzlich auf noindex gesetzt (siehe bau.cjs). */
.sprachhinweis {
  background: var(--papier-warm);
  border-bottom: 1px solid var(--linie);
  padding: 0.85rem var(--raum-2);
  text-align: center;
  font-size: var(--t-s);
  color: var(--tinte-leise);
}

/* --- Brotkrumen: wo bin ich ------------------------------------------- */

.brotkrumen {
  border-bottom: 1px solid var(--linie-fein);
  padding-block: 0.7rem;
  font-size: var(--t-marke);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.brotkrumen .spalte { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.brotkrumen a { color: var(--tinte-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--gruen-tief); }
.brotkrumen [aria-current="page"] { color: var(--tinte); font-weight: 600; }

/* --- Weiterführung am Seitenende --------------------------------------- */

.weiterfuehrung { border-top: 1px solid var(--linie); padding-block: var(--raum-4); }
.weiterfuehrung .spalte { display: grid; gap: 1px; background: var(--linie-fein); grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .weiterfuehrung .spalte { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.weiter-karte {
  background: var(--papier);
  padding: var(--raum-3) var(--raum-2);
  text-decoration: none;
  color: var(--tinte);
  display: grid;
  gap: 0.4rem;
  transition: background-color 0.3s var(--kurve);
}
.weiter-karte:hover { background: var(--papier-tief); }
.weiter-karte .richtung { font-size: var(--t-marke); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise); }
.weiter-karte .ziel { font-family: var(--schrift-titel); font-size: var(--t-h3); }
.weiter-karte .pfeil { color: var(--sand); }

/* --- Leiste am unteren Rand, nur auf dem Telefon ----------------------- */

.handy-leiste { display: none; }
@media (max-width: 52rem) {
  .handy-leiste {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--papier);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 20px -14px rgb(36 39 31 / 0.4);
  }
  .handy-leiste a {
    padding: 0.85rem 0.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--tinte);
    font-size: var(--t-marke);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .handy-leiste a + a { border-left: 1px solid var(--linie-fein); }
  .handy-leiste a:last-child { background: var(--gruen); color: #fff; }
  body { padding-bottom: 3.2rem; }
}

/* --- Knöpfe: quadratisch, Linie statt Fläche --------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--gruen);
  background: var(--gruen);
  color: #fff;
  font: inherit;
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--kurve), color 0.25s var(--kurve), border-color 0.25s var(--kurve);
}
.knopf:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff; }
.knopf .pfeil { transition: transform 0.3s var(--kurve); }
.knopf:hover .pfeil { transform: translateX(4px); }

.knopf-leise { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf-leise:hover { background: transparent; border-color: var(--tinte); color: var(--tinte); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--raum-3); }

/* --- Aufmacher: Text auf Papier, Bild darunter randlos ----------------- */

.held { padding-block: var(--raum-5) 0; }
.held h1 { max-width: 15ch; margin-bottom: var(--raum-3); }
.held .vorspann { font-size: var(--t-gross); max-width: 44ch; color: var(--tinte); line-height: 1.45; }
.held-klein h1 { max-width: 20ch; }

/* Randloses Bildband */
.band-bild {
  margin-top: var(--raum-4);
  width: 100%;
}
.band-bild .figur > * { width: 100%; }
/* Bänder tragen seit 2026-10-27 keine Bildunterschrift mehr (Inhaber: «das das eigene Arbeit
   ist, ist ja klar und der Titel dort stört nur den Gesamteindruck»). Kommt doch eine zurück:
   ausserhalb von .figur setzen. Darin schneidet overflow:clip das Parallax-Bild ab, das um
   12 % vergrössert läuft, und am PC lag das Bild über der Zeile. */

/* Kennzahlen als Planlegende */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--linie);
  margin-top: var(--raum-4);
}
.kennzahl { padding: var(--raum-2) 0; }
.kennzahl + .kennzahl { border-left: 1px solid var(--linie-fein); padding-left: var(--raum-2); }
.kennzahl .wert { font-family: var(--schrift-titel); font-size: clamp(1.45rem, 1rem + 1.6vw, 2.2rem); line-height: 1.05; }
.kennzahl .was { font-size: var(--t-marke); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise); margin-top: 0.45rem; }
@media (max-width: 48rem) {
  /* Untereinander trennt eine Linie oben, nicht links */
  .kennzahl + .kennzahl { border-left: 0; border-top: 1px solid var(--linie-fein); padding-left: 0; }
}

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

.figur { margin: 0; position: relative; }
.figur img, .figur video { object-fit: cover; filter: saturate(0.94) contrast(1.04); }
.figur[class*="v-"] { display: grid; }
.figur[class*="v-"] > img,
.figur[class*="v-"] > video,
.figur[class*="v-"] > .platzhalter { height: 100%; min-height: 0; width: 100%; }
.figur figcaption {
  font-size: var(--t-marke);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-top: 0.7rem;
}

.v-4-3 { aspect-ratio: 4 / 3; }
.v-3-4 { aspect-ratio: 3 / 4; }
.v-16-9 { aspect-ratio: 16 / 9; }
.v-21-9 { aspect-ratio: 21 / 9; }
/* Das flache Band über die volle Breite (Inhaber-Entscheid 2026-10-11). Auf dem Telefon
   wäre 32:9 ein Schlitz, dort bleibt es bei 21:9 - die Bilddatei ist 32:9 geschnitten,
   seitlich fällt also etwas weg, nicht das Motiv in der Mitte. */
.v-32-9 { aspect-ratio: 32 / 9; }
@media (max-width: 51.99rem) { .v-32-9 { aspect-ratio: 21 / 9; } }
.v-1-1 { aspect-ratio: 1 / 1; }

/* Platzhalter: sieht aus wie eine unbeschriftete Planfläche */
.platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: var(--raum-3);
  background-color: var(--papier-tief);
  background-image:
    repeating-linear-gradient(45deg, rgb(176 138 74 / 0.07) 0 12px, transparent 12px 24px);
  border: 1px solid var(--linie);
  color: #8A6B3D;
}
.platzhalter .art {
  font-size: var(--t-marke);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.platzhalter .motiv { font-size: var(--t-s); max-width: 34ch; line-height: 1.5; color: var(--tinte-leise); }

/* Bild mit Text darüber: nur hier ist es dunkel, und nur wegen der Lesbarkeit */
.bild-text {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 26rem;
  padding: var(--raum-4) var(--rand);
  overflow: clip;
  color: #fff;
}
.bild-text > .hintergrund { position: absolute; inset: 0; z-index: -2; }
.bild-text > .hintergrund img, .bild-text > .hintergrund .platzhalter { width: 100%; height: 100%; object-fit: cover; }
.bild-text > .hintergrund .platzhalter { justify-content: flex-start; align-items: flex-end; text-align: right; border: 0; }
.bild-text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgb(26 29 22 / 0.82) 0%, rgb(26 29 22 / 0.74) 14%, rgb(26 29 22 / 0.6) 30%,
    rgb(26 29 22 / 0.42) 48%, rgb(26 29 22 / 0.24) 66%, rgb(26 29 22 / 0.1) 84%,
    rgb(26 29 22 / 0) 100%);
}
.bild-text h2, .bild-text h3 { color: #fff; }
.bild-text p { color: #F2F0E8; }
.bild-text .marke-zeile { color: #E3C99A; }
.bild-text .knopf-leise { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.bild-text .knopf-leise:hover { border-color: #fff; color: #fff; }
@media (max-width: 52rem) {
  .bild-text > .hintergrund .platzhalter .motiv { display: none; }
}

/* --- Raster ------------------------------------------------------------ */

.raster { display: grid; gap: var(--raum-3); }
.raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; }
.versetzt { align-items: start; gap: var(--raum-4); }

@media (min-width: 48rem) {
  .raster-2 { grid-template-columns: repeat(2, 1fr); }
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
  /* Fusszeile: Marke breiter, daneben drei gleich breite Listenspalten */
  .raster-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .raster-gross-klein { grid-template-columns: 1.3fr 1fr; }
  .raster-klein-gross { grid-template-columns: 1fr 1.3fr; }
}

/* Zweispalter mit stehender Beschriftung links, wie ein Planschriftfeld */
.plan-spalten { display: grid; gap: var(--raum-3); }
@media (min-width: 52rem) {
  /* Beschriftungsspalte schmal, Lesebreite begrenzt: der Inhalt sitzt in der Mitte und
     hat links wie rechts gleich viel Luft. Rund 25:50:25 (Inhaber-Entscheid 2026-10-12).
     Lesebreite in em, NICHT in ch: die Ziffer 0 der DM Sans ist 0.68em breit, 68ch
     wären 830 px statt der erwarteten 640. */
  .plan-spalten { grid-template-columns: 10.5rem 1fr; gap: var(--raum-4); }
  .plan-spalten > div:last-child p,
  .plan-spalten > div:last-child li { max-width: 40em; }
  .plan-spalten .raster-3 { grid-template-columns: repeat(2, 1fr); }
  .plan-spalten > .beschriftung { position: sticky; top: 7rem; align-self: start; }
}
.beschriftung h2 { font-size: var(--t-h3); }

/* --- Karten: Linie statt Schatten -------------------------------------- */

.karte {
  position: relative;
  background: transparent;
  border: 1px solid var(--linie);
  padding: var(--raum-3);
  transition: border-color 0.3s var(--kurve), background-color 0.3s var(--kurve);
}
.karte:hover { border-color: var(--tinte); }
.karte h3 { margin-bottom: 0.4rem; }
.karte p { margin-bottom: 0.7rem; font-size: var(--t-s); }
.karte .weiter { font-size: var(--t-marke); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: center; }
.karte .weiter .pfeil { transition: transform 0.3s var(--kurve); }
.karte:hover .weiter .pfeil { transform: translateX(5px); }
a.karte { display: block; color: inherit; text-decoration: none; }
.karte-bild { padding: 0; display: grid; }
.karte-bild .inhalt { padding: var(--raum-3); }
.karte-bild .figur > * { border: 0; }

/* Leistung als Zeile mit Nummer, die sich beim Darüberfahren öffnet */
.liste-leistungen { border-top: 1px solid var(--linie); }
.liste-leistungen a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
  transition: padding-left 0.35s var(--kurve), color 0.35s var(--kurve);
}
.liste-leistungen a:hover { padding-left: 0.8rem; color: var(--gruen-tief); }
.liste-leistungen .nr { font-size: var(--t-marke); letter-spacing: 0.16em; color: var(--tinte-leise); }
.liste-leistungen .titel { font-family: var(--schrift-titel); font-size: var(--t-h3); }
.liste-leistungen .was { font-size: var(--t-s); color: var(--tinte-leise); display: block; margin-top: 0.3rem; max-width: 52ch; }
.liste-leistungen .pfeil { transition: transform 0.35s var(--kurve); }
.liste-leistungen a:hover .pfeil { transform: translateX(6px); }

/* Bildvorschau, die am Zeiger mitläuft (nur Maus, nur grosse Bildschirme).
   Ohne JavaScript und auf dem Telefon passiert nichts, die Liste bleibt bedienbar. */
.vorschau {
  position: fixed;
  top: 0; left: 0;
  width: 22rem;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  transition: opacity 0.35s var(--kurve), transform 0.5s var(--kurve);
  border: 1px solid var(--linie);
  background: var(--papier-tief);
  overflow: clip;
}
.vorschau.sichtbar { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.vorschau > * { width: 100%; height: 100%; }
@media (max-width: 60rem), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .vorschau { display: none; }
}

/* Randloses Bildband mit sanftem Parallax.
   Läuft nur, wo scroll-getriebene Animationen unterstützt sind; sonst steht das Bild still. */
.band-bild .figur { overflow: clip; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band-bild .figur > img {
      animation: schieben linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      scale: 1.12;
    }
  }
}
@keyframes schieben {
  from { translate: 0 -3.5%; }
  to { translate: 0 3.5%; }
}

/* Laufband mit den Orten */
.laufband {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
  padding-block: var(--raum-2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.laufband-spur { display: flex; width: max-content; gap: 0; }
@media (prefers-reduced-motion: no-preference) {
  .laufband-spur { animation: laufen 42s linear infinite; }
  .laufband:hover .laufband-spur { animation-play-state: paused; }
}
@keyframes laufen { to { transform: translateX(-50%); } }
.laufband-spur span {
  font-family: var(--schrift-titel);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  color: var(--tinte-leise);
  padding-inline: 1.2rem;
  white-space: nowrap;
}
.laufband-spur span::after { content: "·"; margin-left: 2.4rem; color: var(--sand); }

/* --- Team -------------------------------------------------------------- */

.personen { display: grid; gap: var(--raum-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .personen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .personen { grid-template-columns: repeat(3, 1fr); } }
.person { margin: 0; }
.person .figur { overflow: clip; }
.person img, .person .platzhalter { width: 100%; height: 100%; object-fit: cover; }
.person figcaption { padding-top: var(--raum-2); }
.person h3 { margin-bottom: 0.1rem; }
.person .funktion {
  font-size: var(--t-marke);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.person .klein { color: var(--tinte-leise); }

/* --- Mietgeräte -------------------------------------------------------- */

.geraete-liste { display: grid; gap: var(--raum-4); }
.geraet {
  display: grid;
  gap: var(--raum-3);
  padding-bottom: var(--raum-4);
  border-bottom: 1px solid var(--linie);
}
.geraete-liste .geraet:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 60rem) {
  .geraet { grid-template-columns: 1.1fr 1.2fr 0.9fr; align-items: start; gap: var(--raum-3); }
}
.geraet h3 { margin-bottom: 0.5rem; }
.geraet p { font-size: var(--t-s); }
.geraet .liste-haken li { font-size: var(--t-s); }
.geraet-preis table { font-size: var(--t-s); }
.geraet-preis th { text-align: left; font-weight: 400; color: var(--tinte-leise); text-transform: none; letter-spacing: 0; font-size: var(--t-s); }
.geraet-preis td { text-align: right; color: var(--tinte); }
.geraet-preis .knopf { margin-top: var(--raum-2); width: 100%; justify-content: center; }

/* --- Jahresband: das eigene Zeichen der Seite -------------------------- */

.jahresband { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.jahr-zeile {
  display: grid;
  /* Zehn Monate in EINER Reihe waeren je 100 px breit, da zerfaellt der Text in
     Stueckchen. Zwei Reihen zu fuenf (Februar bis Juni, Juli bis November). */
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--linie-fein);
}
.jahr-monat { background: var(--papier); padding: var(--raum-2) 0.7rem var(--raum-3); }
.jahr-monat .m { font-size: var(--t-marke); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); font-weight: 600; }
.jahr-monat .was { font-size: var(--t-s); margin-top: 0.5rem; color: var(--tinte); line-height: 1.45; }
.jahr-monat.ruhephase .was { color: var(--tinte-leise); }
@media (max-width: 60rem) {
  .jahr-zeile { grid-template-columns: repeat(2, 1fr); }
}

/* Der Balken über dem Jahresband wächst beim Scrollen mit. */
.jahr-fortschritt { height: 2px; background: var(--linie-fein); position: relative; overflow: hidden; }
.jahr-fortschritt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gruen);
  transform-origin: 0 50%;
  transform: scaleX(0.08);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jahr-fortschritt::after {
      animation: wachsen linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 70%;
    }
  }
}
@keyframes wachsen { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }

/* Die Monate steigen nacheinander auf. */
.js .jahr-monat { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: no-preference) {
  .js .jahr-monat { transition: opacity 0.6s var(--kurve), transform 0.6s var(--kurve); }
}
.js .jahr-zeile.ist-da .jahr-monat { opacity: 1; transform: none; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(1) { transition-delay: 0.02s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(2) { transition-delay: 0.08s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(3) { transition-delay: 0.14s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(4) { transition-delay: 0.2s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(5) { transition-delay: 0.26s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(6) { transition-delay: 0.32s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(7) { transition-delay: 0.38s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(8) { transition-delay: 0.44s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(9) { transition-delay: 0.5s; }
.js .jahr-zeile.ist-da .jahr-monat:nth-child(10) { transition-delay: 0.56s; }

/* --- Listen mit Häkchen ------------------------------------------------ */

.liste-haken { list-style: none; padding: 0; }
.liste-haken li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; }
.liste-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 1px;
  background: var(--gruen);
}

/* --- Ablauf in Schritten ----------------------------------------------- */

.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; }
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 3.2rem;
  padding-bottom: var(--raum-3);
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: var(--t-marke);
  letter-spacing: 0.16em;
  color: var(--sand);
  font-weight: 600;
}
.schritte li::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.9em;
  bottom: 0.4rem;
  width: 1px;
  background: var(--linie);
}
.schritte li:last-child { padding-bottom: 0; }
.schritte li:last-child::after { display: none; }

/* --- Stimmen ----------------------------------------------------------- */

.stimme { margin: 0; padding: var(--raum-3) 0 0; border-top: 1px solid var(--linie); }
.stimme blockquote { margin: 0 0 0.9rem; font-family: var(--schrift-titel); font-size: var(--t-gross); line-height: 1.35; }
.stimme figcaption { font-size: var(--t-marke); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); }
.sterne { color: var(--sand); letter-spacing: 0.2em; font-size: 0.8rem; }

/* --- Vorher und nachher ------------------------------------------------ */

.vergleich { position: relative; overflow: clip; border: 1px solid var(--linie); }
.vergleich > img, .vergleich > .platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vergleich .vorher { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 2; }
.vergleich { cursor: ew-resize; }
.vergleich .kante { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: #fff; z-index: 3; pointer-events: none; box-shadow: 0 0 10px rgb(26 29 22 / 0.35); }

/* Der Griff sitzt AUF dem Trennstrich, nicht unten am Rand. Vorher lag der Regler als
   schmale Leiste am unteren Bildrand, während die Trennlinie in der Mitte stand: Man sah
   nicht, dass man ziehen kann (Inhaber 2026-10-12). */
.vergleich .kante::after {
  content: "◀ ▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  color: var(--tinte);
  font-size: var(--t-marke);
  letter-spacing: 0.1em;
  box-shadow: 0 2px 14px rgb(26 29 22 / 0.3);
}

/* Der Regler liegt unsichtbar über der ganzen Fläche: Ziehen und Klicken geht überall,
   nicht nur auf einer Leiste. Die Tastatur bedient ihn weiterhin. */
.vergleich .schieber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 4;
  opacity: 0;
  cursor: ew-resize;
}
/* Nur bei Bedienung über die Tastatur ein Rahmen. Beim Klicken mit der Maus stört er,
   und gesehen hat man ohnehin, wohin man geklickt hat (Inhaber 2026-10-13). */
.vergleich .schieber:focus { outline: none; }
.vergleich .schieber:focus-visible { outline: 2px solid var(--gruen); outline-offset: -4px; }
.vergleich .fahne { position: absolute; top: 1rem; z-index: 3; font-size: var(--t-marke); letter-spacing: 0.16em; text-transform: uppercase; background: var(--papier); color: var(--tinte); padding: 0.3rem 0.7rem; border: 1px solid var(--linie); }
.vergleich .fahne-links { left: 1rem; }
.vergleich .fahne-rechts { right: 1rem; }

/* --- Auftauchen beim Scrollen ------------------------------------------ */

[data-auftauchen] { opacity: 1; }
.js [data-auftauchen] { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-auftauchen] { transition: opacity 0.7s var(--kurve), transform 0.7s var(--kurve); }
}
.js [data-auftauchen].ist-da { opacity: 1; transform: none; }
.js [data-auftauchen][data-verzug="1"] { transition-delay: 0.08s; }
.js [data-auftauchen][data-verzug="2"] { transition-delay: 0.16s; }
.js [data-auftauchen][data-verzug="3"] { transition-delay: 0.24s; }

/* --- Kontaktwege ------------------------------------------------------- */

.wege { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.wege a { display: block; text-decoration: none; color: inherit; border-bottom: 1px solid var(--linie); }
.wege .weg {
  padding: var(--raum-2) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  transition: padding-left 0.3s var(--kurve);
}
.wege a:hover .weg { padding-left: 0.7rem; }
.wege .art { font-size: var(--t-marke); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise); }
.wege .wert { font-size: var(--t-gross); font-family: var(--schrift-titel); }

/* --- Formular ---------------------------------------------------------- */

.formular { display: grid; gap: var(--raum-2); }
.feld { display: grid; gap: 0.35rem; }
.feld label { font-size: var(--t-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); font-weight: 600; }
.feld input, .feld textarea {
  font: inherit;
  font-size: var(--t-s);
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte);
  transition: border-color 0.25s var(--kurve);
}
.feld input:focus, .feld textarea:focus { border-bottom-color: var(--gruen); outline: none; }
.feld textarea { min-height: 7rem; resize: vertical; }
.fangfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-left: 2px solid var(--gruen); padding: var(--raum-2) var(--raum-3); background: var(--papier-tief); }
.meldung.fehler { border-left-color: #A23B2D; }

/* --- Tabelle ----------------------------------------------------------- */

.tabelle-rahmen { overflow-x: auto; border-top: 1px solid var(--linie); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
th, td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--linie-fein); }
th { font-weight: 600; font-size: var(--t-marke); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); white-space: nowrap; }
td:first-child { color: var(--sand); white-space: nowrap; font-weight: 500; }

/* --- Rechtstexte ------------------------------------------------------- */
/* Impressum und Datenschutz, je Sprache: viele kurze Abschnitte. Mit den Titeln der übrigen
   Seiten stand über jedem Zweizeiler ein Titel in voller Abschnittsgrösse. Inhaber am
   2026-10-27: «die Paragraphen selber sind einfach zu klein um eine solch grosser Überschrift
   zu vertragen». Darum hier eine Stufe kleiner, und der Abstand trennt die Abschnitte. */
.rechtstext h1 { font-size: var(--t-h2); }
.rechtstext h2 {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
  font-weight: 500;
  margin: var(--raum-3) 0 0.4em;
}
/* Unterpunkte a) und b) in den AGB: Textschrift, halbfett, keine eigene Titelgrösse. */
.rechtstext h3 {
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.4;
  margin: 1.4em 0 0.3em;
}
/* Aufzählung mit Strich wie im Original der AGB: Der Strich steht im Text, damit der Wortlaut
   der PDF Zeichen für Zeichen auf der Seite steht (werkzeuge/agb-pruefen.cjs vergleicht ihn). */
.rechtstext .strichliste { list-style: none; padding-left: 1.2em; }
.rechtstext .strichliste li { padding-left: 1em; text-indent: -1em; }   /* Umbruch hängt unter dem Text, nicht unter dem Strich */

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

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: var(--raum-5) var(--raum-3);
  background: var(--papier-tief);
}
.fuss h3 { font-family: var(--schrift-text); font-size: var(--t-marke); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinte-leise); font-weight: 600; margin-bottom: var(--raum-2); }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 0.45rem; font-size: var(--t-s); }
.fuss a { color: var(--tinte); text-decoration: none; }
.fuss a:hover { color: var(--gruen-tief); }
.fuss-marke img { width: 2.8rem; margin-bottom: var(--raum-2); }
.fuss-unten {
  border-top: 1px solid var(--linie);
  margin-top: var(--raum-4);
  padding-top: var(--raum-2);
  font-size: var(--t-marke);
  letter-spacing: 0.08em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  color: var(--tinte-leise);
}

/* --- Galerie: ausgeführte Projekte -------------------------------------
   Ein Projekt ist ein Block: oben der Vergleich oder das Bild, darunter
   links was gemacht wurde, rechts die Eckdaten. Dieselbe Spaltenaufteilung
   wie im übrigen Satzspiegel, damit die Seite eine Flucht behält.
   scroll-margin-top, weil die Karten der Startseite auf diese Anker zeigen
   und der Kopf sonst die Überschrift verdeckt. */
.projekt { margin-top: var(--raum-5); scroll-margin-top: 6rem; }
.projekt:first-of-type { margin-top: 0; }

.projekt-daten { display: grid; gap: var(--raum-3); margin-top: var(--raum-3); }
.projekt-daten h2 { margin: 0 0 var(--raum-2); font-size: var(--t-gross); }
.projekt-daten p { max-width: 40em; margin: 0 0 var(--raum-2); }
.projekt-daten p:last-child { margin-bottom: 0; }

.daten { display: grid; gap: var(--raum-2); margin: 0; }
.daten > div { display: grid; gap: 0.2rem; border-top: 1px solid var(--linie-fein); padding-top: var(--raum-1); }
.daten dt {
  font-size: var(--t-marke);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 600;
}
.daten dd { margin: 0; font-size: var(--t-s); }

/* Zwei Bilder desselben Gegenstands nebeneinander, etwa Vorder- und Rückseite.
   Hochformat, weil ein liegendes Format einen stehenden Gegenstand köpft. */
.projekt-bildpaar { display: grid; gap: var(--raum-3); }
.projekt-bildpaar figure { margin: 0; }
.projekt-bildpaar figcaption {
  margin-top: var(--raum-1);
  font-size: var(--t-s);
  color: var(--tinte-leise);
}
@media (min-width: 52rem) {
  .projekt-bildpaar { grid-template-columns: repeat(2, 1fr); }
}

/* Zweitbild eines Projekts: steht unter dem Vergleich, mit eigener Bildunterschrift. */
.projekt-zweitbild { margin: var(--raum-3) 0 0; }
.projekt-zweitbild figcaption {
  margin-top: var(--raum-1);
  font-size: var(--t-s);
  color: var(--tinte-leise);
}

@media (min-width: 52rem) {
  .projekt-daten { grid-template-columns: 1fr 15rem; gap: var(--raum-4); }
  .daten { align-content: start; }
}

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

/* Aufrufe stehen links wie alles andere. Zentrierte Blöcke zerschneiden den Lesefluss. */
.aufruf .knopfreihe { justify-content: flex-start; }

@media print {
  .kopf { position: static; }
  body { background-image: none; }
}