/* Muster Architektur GG · Musterwebsite von Guet gfunde. Apple Stil: schmale Spalte, grosse ruhige Schrift, Glasflächen (Liquid Glass).
   Szenen: Film spult mit dem Scrollen (flug.js). Hauptseite dunkel, Unterseiten hell. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schwarz: #130f0c;
  --tief: #1c1611;
  --hellgrund: #f7f2ea;
  --fein: #f4ede3;
  --text-dunkel: #2b231d;
  --grau-dunkel: #a8998a;
  --grau-hell: #7b6d60;
  --akzent: #d9bf94;
  --akzent-hell: #8c6b3f;
  --spalte: 980px;
  --schmal: 680px;
  --rand: clamp(20px, 5vw, 48px);
  --rund: 28px;
  --papier: #fffbf5;
  --text-mittel: #4d4138;
  --schatten: 64, 38, 18;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font: 400 17px/1.47 var(--schrift); letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.dunkel { background: var(--schwarz); color: var(--fein); }
body.hell { background: var(--hellgrund); color: var(--text-dunkel); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, .gross { font-weight: 600; letter-spacing: -0.028em; line-height: 1.06; text-wrap: balance; }
.klein { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: -0.005em; color: var(--akzent); margin-bottom: 0.7rem; }
.hell .klein { color: var(--akzent-hell); }
.leise { color: var(--grau-dunkel); }
.hell .leise { color: var(--grau-hell); }

/* Glas (Liquid Glass): durchscheinend, unscharfer Hintergrund, Lichtkante oben */
.glas { position: relative; isolation: isolate; border-radius: var(--rund);
  background: linear-gradient(135deg, rgba(255,244,228,0.22) 0%, rgba(255,236,214,0.08) 55%, rgba(255,240,222,0.13) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 1px rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,0,0.30); }
.glas::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%); }
.hell .glas { background: linear-gradient(135deg, rgba(255,251,245,0.80), rgba(255,246,235,0.55));
  border-color: rgba(255,255,255,0.85); box-shadow: inset 0 1px 0 #fff, 0 18px 50px rgba(var(--schatten),0.12), 0 0 0 0.5px rgba(var(--schatten),0.08); }

/* Kopf: schwebende Menüleiste aus Glas */
.kopf { position: fixed; z-index: 40; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 14px); display: flex; justify-content: center; padding: 0 var(--rand); pointer-events: none; }
.leiste { pointer-events: auto; display: flex; align-items: center; gap: clamp(6px, 2vw, 22px); padding: 7px 8px 7px 20px; border-radius: 999px; max-width: 100%; }
.marke { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; margin-right: clamp(4px, 2vw, 18px); }
.leiste a:not(.marke) { text-decoration: none; font-size: 0.82rem; padding: 7px 12px; border-radius: 999px; white-space: nowrap; color: rgba(245,245,247,0.86); transition: background 0.25s, color 0.25s; }
.hell .leiste a:not(.marke) { color: rgba(29,29,31,0.8); }
.leiste a:not(.marke):hover, .leiste a[aria-current="page"] { background: rgba(255,255,255,0.16); color: #fff; }
.hell .leiste a:not(.marke):hover, .hell .leiste a[aria-current="page"] { background: rgba(var(--schatten),0.08); color: var(--text-dunkel); }
@media (max-width: 420px) { .leiste { padding-left: 14px; gap: 2px; } .marke { font-size: 0.9rem; } .leiste a:not(.marke) { padding: 7px 9px; font-size: 0.78rem; } }

/* Szenen mit Film */
.szene { position: relative; height: var(--hoehe, 300vh); }
.szene__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.szene__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--schwarz); }
.szene__schleier { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(19,15,12,0.5) 0%, rgba(19,15,12,0) 38%); }
.szene__text { position: absolute; left: 50%; bottom: clamp(56px, 11vh, 120px); width: min(var(--schmal), calc(100vw - 2 * var(--rand)));
  transform: translate(-50%, 24px); opacity: 0; filter: blur(8px); pointer-events: none;
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(.16,.8,.2,1), filter 0.9s ease; }
.szene__text.an { opacity: 1; transform: translate(-50%, 0); filter: none; pointer-events: auto; }
.szene__text.glas { padding: clamp(22px, 3.4vw, 34px) clamp(24px, 4vw, 40px); }
.szene__text--mitte { bottom: 50%; transform: translate(-50%, calc(50% + 24px)); text-align: center; }
.szene__text--mitte.an { transform: translate(-50%, 50%); }
.szene .gross { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.szene__text p:not(.klein):not(.gross):not(.claim) { margin-top: 0.8rem; font-size: 1.06rem; color: rgba(245,245,247,0.86); }
.marke-gross { font-size: clamp(3rem, 9vw, 6.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.claim { margin-top: 0.9rem; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; color: rgba(245,245,247,0.9); }
.szene__text .knopf { margin-top: 1.6rem; }
.weiter { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px;
  font-size: 0.78rem; color: rgba(245,245,247,0.8); transition: opacity 0.5s; }
.weiter::after { content: ""; width: 1px; height: 30px; background: currentColor; animation: tropfen 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* Plan Szene: helle Skizze, dunkle Schrift auf hellem Glas */
.szene--plan .szene__schleier { background: none; }
.szene--plan .weiter { color: rgba(29,29,31,0.6); }
.szene--plan .glas { background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.32)); border-color: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(var(--schatten),0.16); color: var(--text-dunkel); }
.szene--plan .glas .klein { color: var(--akzent-hell); }
.claim.claim--oben { margin: 0 0 0.7rem; }
.szene--plan .claim { color: var(--text-mittel); }
/* Menü auf der dunklen Hauptseite: Glas leicht abgedunkelt, damit es auch über dem hellen Plan lesbar bleibt */
.dunkel .leiste.glas { background: linear-gradient(135deg, rgba(28,22,17,0.46), rgba(28,22,17,0.30)); }
.szene--plan .knopf { background: var(--text-dunkel); color: #fff; }

/* Planfilm Ende: Karte «Architektur GG» und Leitsatz untereinander, nie überlappend (auch auf niedrigen Laptop Bildschirmen) */
.szene__stapel { position: absolute; inset: calc(env(safe-area-inset-top, 0px) + 84px) var(--rand) clamp(16px, 4vh, 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 3vh, 32px); pointer-events: none; }
.szene__stapel .szene__text, .szene__stapel .szene__text--mitte { position: relative; left: auto; bottom: auto; flex: none; transform: translateY(24px); }
.szene__stapel .szene__text.an, .szene__stapel .szene__text--mitte.an { transform: none; }
.szene__stapel .marke-gross { font-size: clamp(2.6rem, min(9vw, 10.5vh), 6.6rem); }
.szene__stapel .szene__text--mitte.glas { padding-block: clamp(16px, 3.2vh, 34px); }
.szene__stapel .szene__text .knopf { margin-top: clamp(0.8rem, 2.2vh, 1.6rem); }
.szene__text.leitsatz { text-align: center; width: min(820px, calc(100vw - 2 * var(--rand))); padding: clamp(14px, 2.4vh, 26px) clamp(20px, 3vw, 34px); }
.leitsatz h2 { font-size: clamp(1.15rem, min(2.4vw, 3.4vh), 1.75rem); line-height: 1.18; color: var(--text-dunkel); text-shadow: 0 0 22px rgba(255,255,255,0.45); }
.szene__text.leitsatz p:not(.klein):not(.gross) { margin: 0.6rem auto 0; max-width: 40em; font-size: clamp(0.86rem, min(1.2vw, 2vh), 1rem); line-height: 1.5; color: var(--text-mittel); text-shadow: 0 0 18px rgba(255,255,255,0.4); }
/* Einleitung: Glaskarte über dem ersten Bild des Glasfilms, in der Glas Szene. Der Film steht still, bis die Karte weg ist (data-halt) */
.einleitung__karte.glas { width: min(var(--schmal), calc(100vw - 2 * var(--rand))); padding: clamp(30px, 5vw, 54px); text-align: center; }
.einleitung__karte h2 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
.szene__text.einleitung__karte p:not(.klein):not(.gross) { margin: 1.1rem auto 0; max-width: 34em; font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: rgba(245,245,247,0.9); }
.pillen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2rem; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 0.35em; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 500 0.98rem/1.1 var(--schrift); letter-spacing: -0.01em; background: var(--fein); color: var(--text-dunkel); transition: transform 0.25s, background 0.25s; }
.knopf:hover { transform: scale(1.03); }
.knopf--glas { color: #fff; background: rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
.knopf--glas:hover { background: rgba(255,255,255,0.22); }
.hell .knopf { background: var(--text-dunkel); color: #fff; }
.pfeil { text-decoration: none; font-weight: 500; color: var(--akzent); }
.hell .pfeil { color: var(--akzent-hell); }
.pfeil::after { content: " ›"; }
.pfeil:hover { text-decoration: underline; }

/* Abschnitte */
.abschnitt { padding: clamp(90px, 14vh, 150px) var(--rand); }
.inhalt { max-width: var(--spalte); margin: 0 auto; }
.inhalt--schmal { max-width: var(--schmal); }
.kopfzeile { text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
.kopfzeile h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.kopfzeile h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.kopfzeile p { margin: 1rem auto 0; max-width: 34em; font-size: 1.14rem; }

/* Projekt Teaser und Projektkarten */
.karte { display: block; text-decoration: none; border-radius: var(--rund); overflow: hidden; position: relative; background: var(--tief); }
.karte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,.8,.2,1); }
.karte:hover img { transform: scale(1.04); }
.karte__text { position: absolute; left: 16px; right: 16px; top: 16px; padding: 18px 22px; border-radius: 20px; display: flex; justify-content: space-between; align-items: end; gap: 16px; color: #fff; }
.karte__text h2, .karte__text h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.karte__text p { font-size: 0.9rem; color: rgba(255,255,255,0.82); }
.karte__text span { white-space: nowrap; font-weight: 500; font-size: 0.95rem; }
.hell .karte__text { color: var(--text-dunkel); }
.hell .karte__text p { color: var(--grau-hell); }

/* Projektseite */
.titelbild { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
/* Direkt unter dem Titelbild keine leere Fläche: Text schliesst eng an */
.titelbild + .abschnitt { padding-block: clamp(44px, 6vh, 64px) clamp(56px, 8vh, 88px); }
.titelbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.titelbild__karte { position: absolute; left: 50%; top: clamp(92px, 13vh, 132px); transform: translateX(-50%); width: min(var(--schmal), calc(100vw - 2 * var(--rand))); padding: clamp(24px, 4vw, 40px); text-align: center; color: #fff; }
.titelbild__karte h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
.titelbild__karte p { margin-top: 0.6rem; color: rgba(255,255,255,0.88); font-size: 1.08rem; }
.titelbild__karte .klein { margin: 0 0 0.4rem; color: #f0dcb8; }
/* Über hellem Himmel: Glas leicht abgedunkelt, damit weisse Schrift lesbar bleibt */
.titelbild__karte.glas, .dunkel .karte__text.glas { background: linear-gradient(135deg, rgba(28,26,24,0.34), rgba(28,26,24,0.16)); }
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(30px, 5vh, 48px); border-radius: 22px; overflow: hidden; background: rgba(0,0,0,0.08); }
.fakten div { background: var(--papier); padding: 20px 22px; }
.fakten dt { font-size: 0.8rem; color: var(--grau-hell); }
.fakten dd { margin-top: 4px; font-weight: 600; letter-spacing: -0.02em; }
.raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.raster figure { min-width: 0; }
.raster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; cursor: zoom-in; }
.raster .breit { grid-column: 1 / -1; }
.raster .breit img { aspect-ratio: 16 / 8; }
.raster figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--grau-hell); }
.dunkel .raster figcaption { color: var(--grau-dunkel); }
.zurueck { text-align: center; padding-bottom: clamp(70px, 10vh, 110px); }

/* Grossansicht eines Bildes */
.gross-ansicht { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(19,15,12,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: zoom-out; }
.gross-ansicht img { max-width: 100%; max-height: 92vh; border-radius: 16px; }
.gross-ansicht[hidden] { display: none; }

/* Büro und Leistungen */
.text { font-size: 1.14rem; color: var(--text-mittel); }
.text p + p { margin-top: 1em; }
.kacheln { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kacheln li { background: var(--papier); border-radius: 22px; padding: 26px 24px 28px; box-shadow: 0 0 0 0.5px rgba(var(--schatten),0.08), 0 14px 34px rgba(var(--schatten),0.07); }
.kacheln span { font-size: 0.82rem; font-weight: 600; color: var(--akzent-hell); }
.kacheln h3 { font-size: 1.24rem; margin-top: 8px; }
.kacheln p { margin-top: 8px; color: var(--grau-hell); font-size: 0.98rem; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.kontakt > * { min-width: 0; }
.adresse { font-style: normal; font-size: 1.14rem; line-height: 1.6; }
.formular { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); }
.formular label { display: grid; gap: 6px; font-size: 0.86rem; color: var(--grau-hell); }
.formular input, .formular textarea { font: 400 1.02rem/1.4 var(--schrift); color: var(--text-dunkel); background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 12px 14px; }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--akzent-hell); box-shadow: 0 0 0 4px rgba(140,107,63,0.16); }
.formular .knopf { justify-self: start; margin-top: 6px; }
.formular__hinweis { font-size: 0.94rem; color: var(--akzent-hell); }

/* Fuss */
.fuss { padding: 28px var(--rand) calc(env(safe-area-inset-bottom, 0px) + 30px); font-size: 0.78rem; }
.dunkel .fuss { color: var(--grau-dunkel); border-top: 1px solid rgba(255,255,255,0.1); background: var(--schwarz); }
.hell .fuss { color: var(--grau-hell); border-top: 1px solid rgba(var(--schatten),0.10); background: var(--fein); }
.fuss__zeile { max-width: var(--spalte); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.fuss nav { display: flex; gap: 20px; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__muster { max-width: var(--spalte); margin: 10px auto 0; opacity: 0.75; }

/* Rechtliche Seiten */
.recht { max-width: var(--schmal); margin: 0 auto; padding: clamp(120px, 18vh, 170px) var(--rand) 90px; }
.recht h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 1.8rem; }
.recht h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; }
.recht p, .recht address { font-style: normal; color: var(--text-mittel); margin-bottom: 0.9rem; }

/* Auftauchen */
.sicht { opacity: 0; transform: translateY(36px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,.8,.2,1); }
.sicht.da { opacity: 1; transform: none; }
.no-js .sicht, .no-js .szene__text { opacity: 1; transform: translate(-50%, 0); filter: none; }
.no-js .sicht { transform: none; }

@media (max-width: 760px) {
  .kacheln, .kontakt { grid-template-columns: 1fr; }
  .fakten { grid-template-columns: 1fr 1fr; }
  .raster { grid-template-columns: 1fr; }
  .raster .breit img { aspect-ratio: 4 / 3; }
  .karte img { aspect-ratio: 4 / 5; }
  .karte__text { flex-direction: column; align-items: start; gap: 6px; }
}

/* Handy hochkant: Film im Hochformat (ganzes Bild in der Mitte, unscharfer Hintergrund), füllt den Bildschirm */
@media (orientation: portrait) and (max-width: 900px) {
  .szene__text { bottom: calc(env(safe-area-inset-bottom, 0px) + 8svh); }
  .szene__text--mitte { bottom: 50%; }
  .szene .gross { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .szene__stapel { justify-content: space-between; bottom: calc(env(safe-area-inset-bottom, 0px) + 3svh); }
  .szene__text.leitsatz { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 4px; }
  .szene__text.leitsatz::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sicht, .szene__text { transition-duration: 0.2s; } .weiter::after { animation: none; } .karte img { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: rgba(28,28,30,0.82); }
  .hell .glas, .szene--plan .glas { background: rgba(255,255,255,0.92); }
}

/* Team (Über uns): erfundene Figuren als Illustration, bis die Bilder da sind ein warmes Monogramm */
.team { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(70px, 10vh, 110px); }
.person { background: var(--papier); border-radius: 24px; overflow: hidden; min-width: 0; box-shadow: 0 0 0 0.5px rgba(var(--schatten),0.08), 0 14px 34px rgba(var(--schatten),0.07); }
.person__bild { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #f6dfc2 0%, #e2b88d 52%, #c08a60 100%); }
.person__bild::before { content: attr(data-initial); font-size: clamp(3.4rem, 7vw, 5rem); font-weight: 600; letter-spacing: -0.04em; color: rgba(255,251,245,0.9); }
.person__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person__text { padding: 18px 20px 24px; }
.person h3 { font-size: 1.24rem; }
.person__rolle { margin-top: 4px; font-size: 0.86rem; font-weight: 600; color: var(--akzent-hell); }
.person__bio { margin-top: 10px; color: var(--grau-hell); font-size: 0.98rem; }
.person__quelle { display: block; margin-top: 12px; font-size: 0.72rem; color: var(--grau-dunkel); }
.person__bild { overflow: hidden; }
@media (max-width: 860px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .team { grid-template-columns: 1fr; } .person { display: grid; grid-template-columns: 38% 1fr; } .person__bild { aspect-ratio: auto; min-height: 100%; } .person__bild::before { font-size: 2.6rem; } .person__text { padding: 16px 16px 18px; } }

/* Projekte: Platzhalter «Hier könnten all Ihre Projekte stehen» */
.kopfzeile--weiter { margin-top: clamp(80px, 12vh, 130px); }
.projekte-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.projekt-kachel { position: relative; display: block; min-width: 0; border-radius: 22px; overflow: hidden; text-decoration: none; background: var(--tief); }
.projekt-kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,.8,.2,1); }
.projekt-kachel:hover img { transform: scale(1.04); }
.projekt-kachel__text { position: absolute; left: 14px; top: 14px; padding: 8px 16px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--text-dunkel); }
.projekt-kachel__quelle { position: absolute; right: 14px; bottom: 10px; font-size: 0.7rem; color: rgba(255,251,245,0.88); text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.mitte { text-align: center; margin-top: clamp(36px, 6vh, 56px); }
@media (max-width: 760px) { .projekte-raster { grid-template-columns: 1fr; } }

/* Hauptseite ohne Film (seit 15.10.2026, Kategorie Website CHF 799): Titelbild mit Glaskarte, Haltung mit Bild, Projekte, Leistungen, Schlussbild */
.titelbild__karte--unten { top: auto; bottom: clamp(28px, 9vh, 96px); left: auto; right: var(--rand); transform: none; width: min(620px, calc(100vw - 2 * var(--rand))); text-align: left; }
.titelbild__karte--unten .claim { margin-top: 0.5rem; color: rgba(255,255,255,0.9); }
.titelbild__karte .pillen { justify-content: flex-start; margin-top: 1.4rem; }
.titelbild--mitte { height: 86vh; height: 86svh; }
.titelbild--mitte .titelbild__karte { top: 50%; transform: translate(-50%, -50%); }
.titelbild--mitte .titelbild__karte .pillen { justify-content: center; }
.foto-quelle { position: absolute; left: var(--rand); bottom: 12px; font-size: 0.7rem; color: rgba(255,251,245,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.titelbild--mitte .foto-quelle { left: auto; right: var(--rand); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.zwei > * { min-width: 0; }
.zwei h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.zwei .text { margin-top: 1.2rem; }
.bild-rund { position: relative; border-radius: var(--rund); overflow: hidden; }
.bild-rund img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bild-rund .foto-quelle { left: auto; right: 14px; }
.projekt-kachel__text small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--grau-hell); }
.projekt-kachel__text { border-radius: 16px; line-height: 1.25; }
.kacheln a { color: var(--akzent-hell); }
@media (max-width: 760px) {
  .zwei { grid-template-columns: 1fr; }
  .bild-rund img { aspect-ratio: 4 / 3; }
  .titelbild__karte--unten { left: var(--rand); right: var(--rand); width: auto; }
  .titelbild__karte--unten h1 { font-size: min(2.6rem, 10vw); }
}

/* Seite Projekte: grosse Karten mit Kurzbeschrieb */
.projekt-liste { display: grid; gap: clamp(56px, 9vh, 96px); }
.projekt { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; scroll-margin-top: 110px; }
.projekt > * { min-width: 0; }
.projekt:nth-child(even) .bild-rund { order: 2; }
.projekt .bild-rund img { aspect-ratio: 4 / 3; }
.projekt h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.projekt p:not(.klein) { margin-top: 0.9rem; color: var(--text-mittel); }
.projekt .fakten { grid-template-columns: 1fr 1fr; margin-top: 1.4rem; }
@media (max-width: 760px) { .projekt { grid-template-columns: 1fr; } .projekt:nth-child(even) .bild-rund { order: 0; } }
.hell .titelbild__karte .knopf:not(.knopf--glas) { background: var(--fein); color: var(--text-dunkel); }
.titelbild--mitte .titelbild__karte { width: min(860px, calc(100vw - 2 * var(--rand))); }
.titelbild--mitte .titelbild__karte.glas { background: linear-gradient(135deg, rgba(28,22,17,0.52), rgba(28,22,17,0.34)); }
.projekt:nth-child(even) { grid-template-columns: 1fr 1.4fr; }
@media (max-width: 760px) { .projekt:nth-child(even) { grid-template-columns: 1fr; } }

/* Planblatt (Über uns, Kontakt, seit 15.10.2026, Geschäftsführer: «sollen kreativ architektonisch wirken»):
   Rasterpapier, Masslinien mit Schrägstrichen, Planköpfe, Zeichnungen, die sich beim Scrollen selbst zeichnen */
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --linie: rgba(140,107,63,0.5); --linie-stark: #8c6b3f;
  --raster: rgba(140,107,63,0.06); --raster-stark: rgba(140,107,63,0.12); --tinte: #2b231d; }
.planpapier { background-color: var(--hellgrund);
  background-image: linear-gradient(var(--raster-stark) 1px, transparent 1px), linear-gradient(90deg, var(--raster-stark) 1px, transparent 1px),
                    linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center -1px; }
.plan-start { padding-top: clamp(130px, 20vh, 190px); }
.notiz { display: block; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-hell); }
.notiz + h1, .notiz + h2 { margin-top: 0.9rem; }
.plan-titel { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.035em; }
.plan-titel em { font-style: normal; color: var(--akzent-hell); }

/* Masslinie: Linie mit Hilfslinien und Schrägstrichen an den Enden, Mass in der Mitte */
.masslinie { position: relative; display: flex; align-items: center; justify-content: center; min-height: 22px; border-inline: 1px solid var(--linie); }
.masslinie::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--linie); }
.masslinie::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 12px; transform: translateY(-50%);
  background: linear-gradient(135deg, transparent 44%, var(--linie-stark) 44%, var(--linie-stark) 56%, transparent 56%) left center / 12px 12px no-repeat,
              linear-gradient(135deg, transparent 44%, var(--linie-stark) 44%, var(--linie-stark) 56%, transparent 56%) right center / 12px 12px no-repeat; }
.masslinie span { position: relative; z-index: 1; padding: 0 10px; background: var(--hellgrund); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--akzent-hell); white-space: nowrap; }
.masslinie--hoch { position: absolute; top: 0; bottom: 0; right: -34px; width: 22px; min-height: 0; border-inline: 0; border-block: 1px solid var(--linie); flex-direction: column; }
.masslinie--hoch::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--linie); }
.masslinie--hoch::after { left: 50%; right: auto; top: -6px; bottom: -6px; width: 12px; height: auto; transform: translateX(-50%);
  background: linear-gradient(135deg, transparent 44%, var(--linie-stark) 44%, var(--linie-stark) 56%, transparent 56%) center top / 12px 12px no-repeat,
              linear-gradient(135deg, transparent 44%, var(--linie-stark) 44%, var(--linie-stark) 56%, transparent 56%) center bottom / 12px 12px no-repeat; }
.masslinie--hoch span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 0; }

/* Bild mit Bemassung */
.bemasst { position: relative; margin-right: 34px; }
.bemasst img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.bemasst .masslinie { margin-top: 14px; }
.bemasst .foto-quelle { right: 12px; left: auto; bottom: 48px; }
.plan-zwei { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.plan-zwei > * { min-width: 0; }
.plan-zwei .text { margin-top: 1.4rem; }

/* Zeichnungen (Schnitt, Situation): Linien zeichnen sich, sobald sie sichtbar werden */
.zeichnung { display: block; width: 100%; height: auto; overflow: visible; }
.zeichnung .z { fill: none; stroke: var(--tinte); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(.45,.05,.25,1) var(--d, 0s); }
.zeichnung .z--fein { stroke-width: 0.8; stroke: var(--linie-stark); }
.zeichnung .z--hilfe { stroke-width: 0.8; stroke: var(--linie); }
.zeichnung .f { opacity: 0; transition: opacity 1.2s ease var(--d, 1.6s); }
.zeichnung .t { opacity: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--akzent-hell); transition: opacity 1s ease var(--d, 2s); }
.zeichnung .t--gross { font-size: 14px; fill: var(--tinte); }
.da .zeichnung .z, .no-js .zeichnung .z { stroke-dashoffset: 0; }
.da .zeichnung .f, .da .zeichnung .t, .no-js .zeichnung .f, .no-js .zeichnung .t { opacity: 1; }
.blatt { position: relative; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--linie); background: rgba(255,251,245,0.55); }
.blatt::before, .blatt::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--linie-stark); }
.blatt::before { top: -7px; left: -7px; border-top-width: 1px; border-left-width: 1px; }
.blatt::after { bottom: -7px; right: -7px; border-bottom-width: 1px; border-right-width: 1px; }

/* Plankopf: Schriftfeld unten rechts auf jedem Plan */
.plankopf { display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); border: 1px solid var(--linie); background: var(--papier); }
.plankopf > div { padding: 10px 14px 12px; border-right: 1px solid var(--linie); border-top: 1px solid var(--linie); margin: -1px 0 0; }
.plankopf > div:last-child { border-right: 0; }
.plankopf .breit { grid-column: span 2; }
.plankopf dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-hell); }
.plankopf dd { margin-top: 3px; font-weight: 600; letter-spacing: -0.015em; color: var(--tinte); }
.blatt + .plankopf { margin-top: -1px; }

/* Team als Planblätter */
.team--plan .person { border-radius: 4px; box-shadow: none; border: 1px solid var(--linie); background: var(--papier); position: relative; }
.team--plan .person__bild { border-bottom: 1px solid var(--linie); }
.team--plan .person__bild img { filter: sepia(0.18) saturate(0.9); transition: filter 0.6s; }
.team--plan .person:hover .person__bild img { filter: none; }
.team--plan .person__text { padding: 0; }
.team--plan .person__text > * { padding-inline: 18px; }
.team--plan .person h3 { padding-top: 16px; }
.team--plan .person__bio { padding-bottom: 14px; }
.team--plan .person__fuss { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie); padding: 0; }
.team--plan .person__fuss span { padding: 8px 18px 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau-hell); }
.team--plan .person__fuss span + span { border-left: 1px solid var(--linie); }
.team--plan .person__fuss b { display: block; font-family: var(--schrift); font-size: 0.86rem; letter-spacing: -0.01em; text-transform: none; color: var(--tinte); }
.team--plan .person__quelle { padding-bottom: 12px; margin-top: 0; }

/* Leistungen als Masskette entlang der SIA Phasen */
.masskette { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.masskette li { position: relative; padding: 34px 14px 0 0; }
.masskette li::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; border-top: 1px solid var(--linie); }
.masskette li::after { content: ""; position: absolute; left: -6px; top: 6px; width: 12px; height: 12px; border-left: 1px solid var(--linie); 
  background: linear-gradient(135deg, transparent 44%, var(--linie-stark) 44%, var(--linie-stark) 56%, transparent 56%); }
.masskette li:last-child { border-right: 0; }
.masskette .ende { position: absolute; right: -6px; top: 6px; width: 12px; height: 12px; background: linear-gradient(135deg, transparent 44%, var(--linie-stark) 44%, var(--linie-stark) 56%, transparent 56%); }
.masskette h3 { font-size: 1.12rem; margin-top: 8px; }
.masskette p { margin-top: 6px; font-size: 0.92rem; color: var(--grau-hell); }

/* Kontakt: Situationsplan und Anfrage auf Transparentpapier */
.kontakt--plan { grid-template-columns: 1.1fr 1fr; align-items: start; }
.anfrage { position: relative; background: rgba(255,255,255,0.72); border: 1px solid var(--linie); padding: clamp(22px, 3vw, 34px); display: grid; gap: 18px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(var(--schatten),0.10); }
.anfrage::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(140,107,63,0.18); pointer-events: none; }
.anfrage label { display: grid; gap: 4px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-hell); }
.anfrage input, .anfrage textarea { font: 400 1.06rem/1.4 var(--schrift); color: var(--tinte); background: transparent; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; padding: 8px 0; text-transform: none; letter-spacing: -0.01em; }
.anfrage textarea { resize: vertical; }
.anfrage input:focus, .anfrage textarea:focus { outline: none; border-bottom-color: var(--tinte); box-shadow: 0 1px 0 var(--tinte); }
.anfrage fieldset { border: 0; display: grid; gap: 8px; }
.anfrage legend { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-hell); margin-bottom: 8px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { display: block; position: relative; text-transform: none; letter-spacing: 0; font-family: var(--schrift); font-size: 0.92rem; color: var(--tinte); cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wahl span { display: block; padding: 8px 14px; border: 1px solid var(--linie); background: var(--papier); transition: background 0.2s, color 0.2s; }
.wahl input:checked + span { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.wahl input:focus-visible + span { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.anfrage .knopf { justify-self: start; border-radius: 0; }
.anfrage .plankopf { --spalten: 3; margin: 4px calc(-1 * clamp(22px, 3vw, 34px)) calc(-1 * clamp(22px, 3vw, 34px)); border-inline: 0; border-bottom: 0; background: rgba(255,251,245,0.8); }
.titelbild--band { height: 70vh; height: 70svh; min-height: 420px; }

@media (max-width: 860px) {
  .plan-zwei, .kontakt--plan { grid-template-columns: 1fr; }
  .masskette { grid-template-columns: 1fr; }
  .masskette li { padding: 0 0 26px 28px; }
  .masskette li::before { left: 8px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--linie); }
  .masskette li::after { left: 2px; top: -6px; border-left: 0; border-top: 1px solid var(--linie); }
  .masskette .ende { display: none; }
  .masskette h3 { margin-top: 2px; }
  .bemasst img { aspect-ratio: 4 / 3; }
  .plankopf { --spalten: 2; }
  .plankopf > div:nth-child(2n) { border-right: 0; }
  .plankopf .breit { grid-column: span 2; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .zeichnung .z, .zeichnung .f, .zeichnung .t { transition: none; } }
@media (max-width: 640px) {
  .blatt--breit { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px; }
  .blatt--breit .zeichnung { min-width: 620px; }
}

/* ===================================================================================================================
   Goldener Schnitt (Geschäftsführer 16.10.2026: «wende den goldenen Schnitt auf das Design an, mit philosophischer
   Raffinesse»). Ein einziges Mass für alles: φ = 1,618. Schriftgrössen, Abstände, Spalten und Bildformate sind
   Potenzen von φ, ausgehend von der Grundschrift 17 px. Wie bei Le Corbusiers Modulor: der Mensch (die lesbare Schrift)
   ist der Anfang, alles andere wächst daraus im selben Verhältnis.
   =================================================================================================================== */
/* Nur am PC und Tablet (ab 761 px). Auf dem Handy bleibt alles wie vorher (Geschäftsführer 16.10.2026: «die PC Version
   so lassen, die Handy Version so wie vorher»): dort weder Abschnitt «Das Mass» noch Hinweis im Fuss. */
@media (max-width: 760px) { [aria-label="Das Mass"], .fuss__mass { display: none; } }
@media (min-width: 761px) {

:root {
  --phi: 1.618;
  /* Schrift: 17 px mal φ hoch n */
  --t-1: 0.656rem;  /* 10,5 px */
  --t0: 1.0625rem;  /* 17 px */
  --t1: 1.719rem;   /* 27,5 px */
  --t2: 2.781rem;   /* 44,5 px */
  --t3: 4.5rem;     /* 72 px */
  /* Abstände: 10 px mal φ hoch n */
  --s1: 10px; --s2: 16.2px; --s3: 26.2px; --s4: 42.4px; --s5: 68.5px; --s6: 110.9px; --s7: 179.4px;
  /* Spalten: die schmale ist die breite geteilt durch φ */
  --spalte: 1000px;
  --schmal: 618px;
  --zeile: 1.618;
}
body { line-height: 1.5; }
.text, .kopfzeile p, .projekt p:not(.klein), .kacheln p, .person__bio { line-height: var(--zeile); }
.klein { font-size: calc(var(--t0) / 1.272); letter-spacing: 0.01em; margin-bottom: var(--s2); }

/* Überschriften auf der φ Treppe */
.kopfzeile h1, .titelbild__karte h1 { font-size: clamp(var(--t2), 6vw, var(--t3)); }
.kopfzeile h2, .zwei h2, .projekt h2 { font-size: clamp(var(--t1), 3.8vw, var(--t2)); }
.kacheln h3, .person h3, .karte__text h2, .karte__text h3 { font-size: clamp(var(--t0), 1.6vw, var(--t1)); }
.marke-gross { font-size: clamp(var(--t2), 8vw, calc(var(--t3) * 1.272)); }
.claim { font-size: clamp(var(--t0), 2.2vw, var(--t1)); }
.kopfzeile { margin-bottom: clamp(var(--s4), 6vh, var(--s5)); }
.kopfzeile p { max-width: 38.2em; }

/* Abschnitte atmen im selben Mass */
.abschnitt { padding-block: clamp(var(--s5), 13vh, var(--s6) * 1.272); }

/* Zwei Spalten im Verhältnis 1,618 zu 1: der Text erhält den grösseren Teil, das Bild den kleineren */
.zwei { grid-template-columns: 1.618fr 1fr; gap: clamp(var(--s3), 5vw, var(--s5)); }
.bild-rund img { aspect-ratio: 1 / 1.618; }
.kontakt { grid-template-columns: 1fr 1.618fr; gap: clamp(var(--s3), 5vw, var(--s5)); }
.projekt { grid-template-columns: 1.618fr 1fr; gap: clamp(var(--s3), 4vw, var(--s5)); }
.projekt:nth-child(even) { grid-template-columns: 1fr 1.618fr; }
.projekt .bild-rund img { aspect-ratio: 1.618 / 1; }
.karte img, .raster .breit img { aspect-ratio: 1.618 / 1; }
.raster img { aspect-ratio: 1.618 / 1; }

/* Projekte auf der Startseite: das goldene Rechteck selbst. Breite Kachel (1,618 : 1) plus Quadrat ergibt wieder ein
   goldenes Rechteck. Zweite Reihe gespiegelt, wie die Spirale, die sich dreht. */
@media (min-width: 761px) {
  .projekte-raster { grid-template-columns: 1fr 0.618fr 1fr; }
  .projekte-raster > :nth-child(4n+1) { grid-column: 1 / 3; }
  .projekte-raster > :nth-child(4n+2) { grid-column: 3 / 4; }
  .projekte-raster > :nth-child(4n+3) { grid-column: 1 / 2; }
  .projekte-raster > :nth-child(4n+4) { grid-column: 2 / 4; }
  .projekte-raster > :nth-child(4n+1) img, .projekte-raster > :nth-child(4n+4) img { aspect-ratio: 1.618 / 1; }
  .projekte-raster > :nth-child(4n+2), .projekte-raster > :nth-child(4n+3) { height: 100%; }
  .projekte-raster > :nth-child(4n+2) img, .projekte-raster > :nth-child(4n+3) img { aspect-ratio: auto; height: 100%; }
  /* Titelkarte auf den goldenen Linien: linke Kante bei 38,2 %, Mitte auf der Höhe 61,8 % */
  .titelbild__karte--unten { right: auto; bottom: auto; left: 38.2%; top: 61.8%; transform: translateY(-50%); width: min(var(--schmal), 61.8vw - var(--rand)); }
}
@media (max-width: 760px) { .projekte-raster img, .projekt-kachel img { aspect-ratio: 1.618 / 1; } }

/* Goldene Spirale über dem Titelbild: läuft auf das Glashaus zu und zeichnet sich beim Laden einmal selbst */
.spirale { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.spirale path { fill: none; stroke: rgba(255,251,245,0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.spirale .spirale__teilung { stroke: rgba(255,251,245,0.28); }
.spirale path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 4.2s cubic-bezier(.45,.05,.2,1) 0.6s forwards; }
.spirale .spirale__teilung { animation-delay: 1.8s; animation-duration: 3s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.titelbild__karte { z-index: 2; }
@media (max-width: 900px), (orientation: portrait) { .spirale { display: none; } }

/* Abschnitt «Das Mass»: goldenes Rechteck als Planzeichnung, zeichnet sich beim Hinscrollen */
.mass { display: grid; grid-template-columns: 1.618fr 1fr; gap: clamp(var(--s4), 6vw, var(--s6)); align-items: center; }
.mass > * { min-width: 0; }
.mass__zeichnung { margin: 0; }
.mass__zeichnung svg { display: block; width: 100%; height: auto; overflow: visible; }
.mass__zeichnung path, .mass__zeichnung rect { fill: none; stroke: var(--akzent-hell); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mass__zeichnung .mass__teilung { stroke: rgba(140,107,63,0.45); }
.mass__zeichnung .mass__spirale { stroke-width: 2; }
.mass__zeichnung path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s cubic-bezier(.45,.05,.2,1); }
.mass__zeichnung .mass__teilung { transition-duration: 2.2s; transition-delay: 0.4s; }
.mass__zeichnung .mass__spirale { transition-delay: 1.2s; }
.mass__zeichnung.da path, .no-js .mass__zeichnung path { stroke-dashoffset: 0; }
.mass__zeichnung text { font: 400 30px var(--mono); fill: var(--akzent-hell); letter-spacing: 0.04em; }
.mass__zeichnung figcaption { margin-top: var(--s2); font: 400 0.78rem var(--mono); color: var(--grau-hell); letter-spacing: 0.04em; }
.mass h2 { font-size: clamp(var(--t1), 3.8vw, var(--t2)); }
.mass .text { margin-top: var(--s3); }
.trias { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: var(--s5); background: rgba(140,107,63,0.25); border-block: 1px solid rgba(140,107,63,0.25); }
.trias li { background: var(--hellgrund); padding: var(--s3) var(--s3) var(--s3) 0; }
.trias li + li { padding-left: var(--s3); }
.trias b { display: block; font: 400 0.78rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent-hell); }
.trias span { display: block; margin-top: var(--s1); font-size: var(--t1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.trias small { display: block; margin-top: var(--s1); color: var(--grau-hell); font-size: 0.92rem; line-height: 1.5; }
.inhalt > .trias:first-child { margin-top: 0; }
.trias__quelle { margin-top: var(--s2); font: 400 0.74rem var(--mono); color: var(--grau-hell); letter-spacing: 0.03em; }

/* Fuss: das Mass der Seite */
.fuss__mass { font-family: var(--mono); letter-spacing: 0.04em; }
}