/* PRUEFMARKE: site.css Stand 2026-10-13-BQ (artiv.ch, Dentalbox: alle Bilder im Wechsel verteilt) */
/* Schrift: LL Akkurat (Lineto), Lizenznehmer Artiv Innenarchitektur AG. Dateien liegen auf dem Server
   unter public/fonts/akkurat/ (nie im Repository, Deploy laesst den Ordner stehen). Drei Schnitte:
   Light 300 (Grundschrift), Regular 400 (Betonung, Links), Bold 700 (strong). Kein Kursiv. */
@font-face{font-family:"Akkurat";src:url("/fonts/akkurat/AkkuratLLWeb-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Akkurat";src:url("/fonts/akkurat/AkkuratLLWeb-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Akkurat";src:url("/fonts/akkurat/AkkuratLLWeb-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Marke: Beige (--petrol) als Band in Kopf und Fuss, Blau (--coral) fuer Links und aktive Punkte,
   Text #323232 (--ink). Schrift LL Akkurat (Lineto, seit BI), Rueckfall Systemgrotesk. Keine Haarlinien:
   Trennung ueber Flaechen und Abstand. Keine runden Ecken ausser Chips und Buttons (2px). */
:root{
  --petrol:#AFA591; --petrol-deep:#8F8571; --petrol-tint:#E6DFCC; --coral:#0000AA; --coral-soft:#E6E1DE;
  --paper:#fff; --weiss:#fff; --beige:#F0F0F0;   /* beige verabschiedet (05.09.): --beige ist jetzt das Tafel-Grau */ --ink:#323232; --muted:#323232;
  --ecke:clamp(28px,5vw,96px);
  --kopf:#F0F0F0;   /* Tafel-Grau (seit AG) */
  --anthrazit:#2B2B2B;   /* Nach-oben-Button */

  --font-body:"Akkurat","Helvetica Neue",Helvetica,Arial,sans-serif; --font-display:var(--font-body);
  --wrap:1180px; --gutter:clamp(1.1rem,3.5vw,3.5rem); --hh:64px; --tafel:25vw; --tafel-min:280px;
  --tr:.25s cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none!important; animation:none!important; } }
body{ margin:0; font-family:var(--font-body); font-weight:300; font-size:1.0625rem; line-height:1.55; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:var(--coral); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:.15em; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }
.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--coral); color:#fff; padding:.5rem 1rem; z-index:999; }
.skip-link:focus{ left:1rem; top:1rem; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:300; line-height:1.15; margin:0 0 .6em; color:var(--ink); letter-spacing:-.01em; }
h1{ font-size:clamp(1.9rem,4.2vw,3rem); }
h2{ font-size:clamp(1.35rem,2.4vw,1.85rem); }
h3{ font-size:1.15rem; font-weight:400; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; }   /* Akkurat hat kein Medium, Bold ist der dritte Schnitt */


/* ---------- Tafel: linkes Viertel, fest ---------- */
/* Desktop: ein Viertel der Breite, hellgrau, scrollt nicht. Logo und Menue vertikal mittig,
   die Angaben des Fusses ganz unten. Der Inhalt laeuft rechts in den restlichen drei Vierteln. */
.tafel{ position:fixed; left:0; top:0; bottom:0; width:max(var(--tafel), var(--tafel-min)); background:var(--kopf); color:var(--ink); z-index:50; display:flex; flex-direction:column; padding:clamp(1.5rem,3vw,3rem); }
/* AK (Tafel anthrazit auf Projektseiten) in AL zurueckgebaut: die Tafel bleibt immer hellgrau. */
.tafel-mitte{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.hdr-logo{ display:inline-flex; align-items:center; gap:clamp(.5rem,.9vw,.9rem); color:var(--ink); width:100%; max-width:260px; }
.hdr-logo[data-intro-replay]{ cursor:pointer; }
/* Logo fluid: Signet und Wortmarke wachsen mit der Tafel (25vw), Grenzen 30 bis 48px Hoehe. */
.hdr-signet{ width:clamp(30px,2.8vw,48px); height:clamp(30px,2.8vw,48px); flex:none; }
.hdr-wortmarke{ width:auto; height:clamp(30px,2.8vw,48px); max-width:calc(100% - clamp(30px,2.8vw,48px) - 1rem); object-fit:contain; object-position:left center; }
.tafel-nav{ margin-top:clamp(1.6rem,3vw,2.6rem); }
.tafel-nav-list{ list-style:none; margin:0; padding:0; }
.tafel-nav-link{ display:inline-block; color:var(--ink); font-weight:300; font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.25; padding:.28em 0; position:relative; }
/* Navigation (BP): kein Blau. Jeder Eintrag hat Platz fuer den Punkt links; beim Hover waechst er in der Textfarbe heran,
   beim aktiven Eintrag steht er. */
.tafel-nav-link{ padding-left:1.1em; }
.tafel-nav-link::before{ content:""; position:absolute; left:0; top:.78em; width:.42em; height:.42em; border-radius:50%; background:var(--ink); opacity:0; transform:scale(.3); transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.tafel-nav-link:hover{ text-decoration:none; color:var(--ink); }
.tafel-nav-link:hover::before, .tafel-nav-link:focus-visible::before, .tafel-nav-link[aria-current="page"]::before{ opacity:1; transform:scale(1); }
.tafel-nav-link[aria-current="page"]{ color:var(--ink); }
.tafel-fuss{ font-size:.86rem; line-height:1.45; }
.tafel-fuss p{ margin:0 0 .7em; }
.tafel-fuss a{ color:var(--ink); }
.tafel-fuss a:hover{ color:var(--coral); }
.tafel-legal, .tafel-agentur{ font-size:.8rem; }
.tafel-agentur{ margin:0; }
main#inhalt{ margin-left:max(var(--tafel), var(--tafel-min)); min-height:100vh; }
.site-footer{ display:none; }
.burger{ display:none; width:44px; height:44px; padding:10px; border:0; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.burger span{ display:block; height:2px; background:var(--ink); transition:transform var(--tr), opacity var(--tr); }
.mm{ display:none; }
/* Mobil und schmale Fenster: Tafel wird zur Kopfleiste, Fuss erscheint unten. */
@media (max-width:1100px){
  .tafel{ position:sticky; inset:auto; top:0; width:100%; height:var(--hh); flex-direction:row; align-items:center; justify-content:space-between; padding:0 var(--gutter); }
  .tafel-mitte{ flex:none; }
  .tafel-nav, .tafel-fuss{ display:none; }
  .hdr-logo{ width:auto; } .hdr-signet{ width:34px; height:34px; } .hdr-wortmarke{ height:34px; max-width:none; }
  main#inhalt{ margin-left:0; min-height:0; }
  .burger{ display:inline-flex; }
  /* Das Menue oeffnet sich als Kreisbogen aus der Ecke des Burgers, wie der Bogen des Signets.
     Farbe: das Blau des Signets, Schrift weiss, das Signet selbst gross als Wasserzeichen unten links. */
  .mm{ display:block; position:fixed; inset:0; background:var(--coral); color:#fff; z-index:49; overflow:auto;
       clip-path:circle(0px at var(--cx,calc(100% - 2rem)) var(--cy,2rem)); visibility:hidden;
       transition:clip-path .7s cubic-bezier(.6,0,.2,1), visibility 0s .7s; }
  body.menu-open .mm{ clip-path:circle(var(--r,150vmax) at var(--cx,calc(100% - 2rem)) var(--cy,2rem)); visibility:visible; transition:clip-path .7s cubic-bezier(.6,0,.2,1); }
  .mm::after{ content:""; position:absolute; left:-18vw; bottom:-6vh; width:60vw; height:60vw; background:url(/assets/img/signet.svg) no-repeat center / contain; opacity:.16; filter:brightness(0) invert(1); pointer-events:none; }
  body.menu-open .tafel{ background:transparent; }
  body.menu-open .tafel .hdr-signet, body.menu-open .tafel .hdr-wortmarke{ filter:brightness(0) invert(1); }
  body.menu-open .burger{ z-index:60; }
  body.menu-open .tafel-mitte{ position:relative; z-index:60; }
  body.menu-open .burger span{ background:#fff; }
  body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2){ opacity:0; }
  body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mm-inner{ min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--hh) + 1.5rem) var(--gutter) 2rem; position:relative; z-index:1; }
  .mm-nav{ list-style:none; margin:0; padding:0; }
  .mm-item{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay:calc(.25s + var(--i,0) * 70ms); }
  body.menu-open .mm-item{ opacity:1; transform:none; }
  .mm-main{ display:block; padding:.55rem 0; font-size:clamp(2rem,9vw,2.8rem); font-weight:300; line-height:1.1; color:#fff; letter-spacing:-.01em; }
  .mm-main[aria-current="page"]{ padding-left:1.2em; position:relative; }
  .mm-main[aria-current="page"]::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:.4em; height:.4em; border-radius:50%; background:#fff; }   /* BB: vertikal mittig zum Text (Padding ist symmetrisch) */
  .mm-fuss{ margin-top:auto; padding-top:2rem; font-size:.9rem; line-height:1.45; opacity:0; transition:opacity .5s ease .6s; }
  body.menu-open .mm-fuss{ opacity:1; }
  .mm-fuss p{ margin:0 0 .6em; }
  .mm-fuss a{ color:#fff; }
  .site-footer{ display:block; background:var(--kopf); padding:2.2rem 0 1.6rem; font-size:.9rem; }
  .site-footer p{ margin:0 0 .8em; }
  .site-footer a{ color:var(--ink); }
  .ft-legal, .footer-agentur{ font-size:.82rem; }
}

/* ---------- Seitenkopf und Baender ---------- */
.pg-kopf{ padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(1.4rem,3vw,2.2rem); }
.pg-titel{ max-width:22ch; margin-bottom:.35em; }
.pg-lead{ font-size:clamp(1.1rem,1.6vw,1.3rem); max-width:60ch; margin:0; }
.pg-band{ padding:clamp(1.5rem,4vw,3.5rem) 0 clamp(3rem,7vw,5.5rem); }
.pg-band-beige{ background:var(--petrol-tint); padding-top:clamp(3rem,6vw,5rem); margin-top:clamp(2rem,5vw,4rem); }
.pg-band-weiss{ background:var(--beige); padding-top:clamp(3rem,6vw,5rem); margin-top:clamp(2rem,5vw,4rem); }
.pg-band-legal .prose{ max-width:72ch; }
.pg-spalten{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.pg-spalten.ist-einspaltig{ grid-template-columns:minmax(0,72ch); }
.pg-spalten.ist-kontakt{ grid-template-columns:minmax(0,26rem) minmax(0,1fr); }
@media (max-width:820px){ .pg-spalten, .pg-spalten.ist-kontakt{ grid-template-columns:1fr; } }

/* ---------- Fliesstext und Elemente ---------- */
.prose > *:first-child{ margin-top:0; }
.prose h2{ margin-top:1.8em; }
.prose h2:first-child{ margin-top:0; }
.prose ul,.prose ol{ padding-left:1.2em; margin:0 0 1em; }
.prose li{ margin:.25em 0; }
.prose figure.md-bild{ margin:0 0 1.6rem; }
.prose figure.md-bild img{ border-top-right-radius:var(--ecke); }
.prose figure.md-bild img{ width:100%; }
.prose figure.md-bild figcaption{ font-size:.9rem; margin-top:.5rem; }
.prose figure.md-bild.ist-klein{ max-width:60%; }
.gd-button-zeile{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; }
.gd-btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.15rem; background:var(--coral); color:#fff; border:0; border-radius:2px; font:inherit; font-weight:400; line-height:1.2; cursor:pointer; transition:background var(--tr), color var(--tr); text-decoration:none; }
.gd-btn:hover{ background:var(--ink); color:#fff; text-decoration:none; }
/* Pfeil-Link (ab BC, Wunsch Gabriel): kein Knopf, sondern Text mit langem, schlankem Pfeil, der beim Hover laenger wird.
   Ersetzt die blauen Knoepfe auf Startseite, in den Elementen (config elemente.button_class) und auf der 404. */
/* Seit BO (13.10.2026) ist der Pfeil-Link ueberall ein Umrandungsknopf wie der Factsheet-Knopf: 1px Rahmen in der
   Textfarbe, kein Blau mehr, beim Hover nur die Bewegung des Pfeils und der volle Rahmen. */
.gd-pfeil{ position:relative; display:inline-flex; align-items:center; gap:.85rem; padding:.7rem 1.15rem; border:1px solid currentColor; border-radius:2px; color:var(--ink); font-weight:400; line-height:1.2; text-decoration:none; transition:border-color var(--tr); }
.gd-pfeil::after{ content:""; display:block; width:2.6rem; height:1px; background:currentColor; position:relative; flex:none; transition:width .45s cubic-bezier(.2,.7,.2,1); }

.gd-pfeil .gd-pfeil-ico{ display:none; }
.gd-pfeil::before{ content:""; position:absolute; right:1.1rem; top:50%; width:.5rem; height:.5rem; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:translateY(-50%) rotate(45deg); }
.gd-pfeil:hover{ color:var(--ink); text-decoration:none; }
.gd-pfeil:hover::after{ width:4rem; }
.gd-pfeil:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.rg.hat-farbe .gd-pfeil{ color:#fff; border-color:rgba(255,255,255,.7); }
.rg.hat-farbe .gd-pfeil:hover{ color:#fff; border-color:#fff; }
.gd-button-zeile{ margin:1.2em 0; }
.pj-mehr{ margin:2.2rem 0 0; }
.gd-ico{ width:1.15em; height:1.15em; flex:none; }
.gd-akk{ margin:0 0 .6rem; background:var(--petrol-tint); }
.gd-akk summary{ padding:.9rem 1.1rem; cursor:pointer; font-weight:400; list-style:none; position:relative; }
.gd-akk summary::after{ content:"+"; position:absolute; right:1.1rem; top:.8rem; font-size:1.3rem; }
.gd-akk[open] summary::after{ content:"\2212"; }
.gd-akk-inhalt{ padding:0 1.1rem 1rem; }

/* Lightbox (site.js: data-lightbox) */
.gd-lightbox{ position:fixed; inset:0; z-index:200; background:rgba(20,20,20,.96); display:flex; align-items:center; justify-content:center; }
.gd-lightbox[hidden]{ display:none; }
.gd-lb-stage{ margin:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.gd-lb-img{ max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; }
.gd-lb-close{ position:fixed; top:1rem; right:1rem; width:46px; height:46px; border-radius:50%; background:#fff; color:#000; border:0; font-size:1.7rem; line-height:1; cursor:pointer; z-index:202; }
.gd-lb-nav{ position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#000; cursor:pointer; z-index:202; display:inline-flex; align-items:center; justify-content:center; padding:12px; }
.gd-lb-nav svg{ width:100%; height:100%; }
.gd-lb-prev{ left:1rem; } .gd-lb-next{ right:1rem; }
@media (max-width:640px){ .gd-lb-nav{ width:42px; height:42px; top:auto; bottom:1rem; transform:none; } }

/* ---------- Kontaktformular (Engine: Kontakt::render, 2 Schritte) ---------- */
.gd-form{ background:var(--kopf); padding:clamp(1.2rem,3vw,2rem); }
.gd-form-dank{ font-weight:400; }
.gd-form label{ display:block; margin:0 0 .9rem; font-size:.95rem; }
.gd-form input:not([type=checkbox]),.gd-form select,.gd-form textarea{ display:block; width:100%; margin-top:.3rem; padding:.7rem .8rem; border:0; border-radius:2px; background:#fff; color:var(--ink); font:inherit; font-size:1rem; }
.gd-form textarea{ resize:vertical; min-height:8rem; }
.gd-form input:focus,.gd-form select:focus,.gd-form textarea:focus{ outline:2px solid var(--coral); outline-offset:0; }
.gd-hp{ position:absolute; left:-9999px; }
.gd-pflicht{ color:var(--coral); }
.gd-freiwillig{ font-size:.8rem; opacity:.75; margin-left:.3rem; }
.gd-hinweis{ font-size:.88rem; }
.gd-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:560px){ .gd-zwei{ grid-template-columns:1fr; } }
.gd-haken{ display:flex; gap:.6rem; align-items:flex-start; }
.gd-haken input{ margin-top:.3rem; }
.gd-schritt{ border:0; padding:0; margin:0; }
.gd-schritt[hidden]{ display:none; }
.gd-schritt-knoepfe{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem; }
.gd-fortschritt{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; font-size:.9rem; }
.gd-fortschritt-bahn{ flex:1; height:6px; background:#fff; border-radius:3px; overflow:hidden; }
.gd-fortschritt-fuellung{ display:block; height:100%; width:50%; background:var(--coral); transition:width var(--tr); }
.gd-fortschritt-fuellung span{ position:absolute; left:-9999px; }
.gd-form-fehler{ background:#fff; border-left:4px solid #B3261E; padding:.6rem .9rem; }
.gd-feld-gross{ font-weight:400; }

/* ---------- Nach oben ---------- */
.gd-to-top{ position:fixed; right:1.1rem; bottom:1.1rem; width:46px; height:46px; border-radius:50%; border:0; background:var(--anthrazit); color:#fff; cursor:pointer; z-index:40; display:inline-flex; align-items:center; justify-content:center; padding:12px; opacity:.9; }
.gd-to-top[hidden]{ display:none; }
.gd-to-top svg{ width:100%; height:100%; transform:rotate(-90deg); }

/* ---------- Intro (Startseite, config intro_animation) ---------- */
/* Solange das Intro laeuft, ist die Seite da, aber unsichtbar; das Signet im Kopf bleibt frei,
   weil das Intro-Signet dorthin fliegt. Ohne JS wird intro-laeuft nie gesetzt: alles sichtbar. */
html.intro-laeuft .tafel, html.intro-laeuft main#inhalt, html.intro-laeuft .site-footer, html.intro-laeuft .gd-to-top{ opacity:0; }
html.intro-fertig .tafel, html.intro-fertig main#inhalt, html.intro-fertig .site-footer{ opacity:1; transition:opacity .6s ease .1s; }
html.intro-laeuft .hdr-signet, html.intro-fertig .hdr-signet{ visibility:hidden; }
html.intro-fertig.intro-signet-da .hdr-signet{ visibility:visible; }
html.intro-laeuft{ overflow:hidden; }
.intro{ position:fixed; inset:0; z-index:900; background:#fff; display:flex; align-items:center; justify-content:center; }
.intro[hidden]{ display:none; }
.intro-buehne{ --s:min(62vmin,560px); width:var(--s); height:var(--s); opacity:0; will-change:transform,opacity; }
.intro-form{ position:relative; width:100%; height:100%; clip-path:url(#intro-signet); -webkit-clip-path:url(#intro-signet); background:var(--coral); }
.intro-bild{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.intro-bild.ist-aktiv{ opacity:1; }
.intro-bild img{ width:100%; height:100%; object-fit:cover; }
.intro-skip{ position:fixed; right:1.2rem; bottom:1.2rem; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.9rem; cursor:pointer; padding:.5rem .8rem; opacity:.7; }
.intro-skip:hover{ opacity:1; text-decoration:underline; }
/* Bewegung: site.js setzt die Transforms je Frame (Drehung der Schablone, Gegen-Drehung der Bilder). */
.intro-buehne{ transition:opacity .7s ease; }
.intro.ist-auf .intro-buehne{ opacity:1; }
.intro-ebene{ position:absolute; inset:-30%; will-change:transform; }   /* gross genug, damit die Bilder unter jeder Drehung die Form fuellen */
.intro.ist-flug{ transition:background .5s ease .35s; background:rgba(255,255,255,0); }
.intro.ist-flug .intro-bild{ opacity:0; transition:opacity .35s ease; }   /* im Flug wird die Form blau, wie das Signet im Kopf */

/* ---------- System: die Ecke und der Punkt ---------- */
/* Jedes Bild traegt genau eine gerundete Ecke, oben rechts, wie der Bogen des Signets. */
/* isolation und translateZ: ohne sie zeichnet Chrome/Safari beim Skalieren des Bilds die gerundete Ecke kurz
   doppelt (Ghosting), weil der Beschnitt und die Transform-Ebene nicht zusammenfallen. */
.ecke{ display:block; overflow:hidden; border-top-right-radius:var(--ecke); background:var(--beige); isolation:isolate; transform:translateZ(0); -webkit-mask-image:-webkit-radial-gradient(#fff,#000); }
.ecke img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Der Punkt: das Loch im Signet als Marke vor Titeln und Kapiteln. */
.punkt{ position:relative; padding-left:1.15em; }
.punkt::before{ content:""; position:absolute; left:0; top:.52em; width:.5em; height:.5em; border-radius:50%; background:var(--coral); }

/* ---------- Startseite: der Satz und die zwei ---------- */
.satz{ padding:clamp(3rem,9vw,7.5rem) 0 clamp(2rem,5vw,4rem); }
.satz-titel{ font-size:clamp(2rem,4.4vw,3.9rem); font-weight:300; line-height:1.06; letter-spacing:-.02em; max-width:15ch; margin:0 0 .5em; }
.satz-claim{ font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:44ch; margin:0 0 2.4rem; }
.wir{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2.6rem; }
.wir-person{ display:flex; align-items:center; gap:.9rem; }
.wir-bild{ width:64px; height:64px; flex:none; border-top-right-radius:26px; }
.wir-text{ display:flex; flex-direction:column; line-height:1.3; }
.wir-text b{ font-weight:400; }
.wir-text span{ font-size:.9rem; }
.wir-mehr a{ font-weight:400; }

/* ---------- Projektstrom ---------- */
.pj-band{ padding:clamp(1rem,2.5vw,2rem) 0 clamp(3rem,6vw,5rem); }
.pj-band-titel{ margin-bottom:1.4rem; }
.pj-mehr{ margin:2.6rem 0 0; }
.strom{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(1.2rem,2.6vw,2.4rem) clamp(1rem,2vw,1.8rem); }
.strom-item.ist-gross{ grid-column:span 4; }
.strom-item.ist-hoch{ grid-column:span 2; }
.strom-item.ist-mittel{ grid-column:span 3; }
.strom-item.ist-versteckt{ display:none; }
.strom-item.strom-wartet{ opacity:0; transform:translateY(28px); }
.strom-item.ist-da{ opacity:1; transform:none; transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.strom-link{ display:block; position:relative; color:var(--ink); }
.strom-link:hover{ text-decoration:none; }
.strom-bild{ aspect-ratio:3/2; }
.ist-hoch .strom-bild{ aspect-ratio:3/4; }
.ist-gross .strom-bild{ aspect-ratio:2/1.1; }
.strom-bild img{ will-change:transform; backface-visibility:hidden; }
.hat-plx img{ will-change:transform; }
.ecke.hat-plx{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.strom-link:hover .strom-bild.hat-plx{ transform:scale(1.02); }
.strom-text{ display:flex; flex-direction:column; padding:.8rem 0 0; padding-right:5.5rem; }
.strom-titel{ margin:0; font-size:1.12rem; font-weight:400; line-height:1.3; }
.strom-ort{ display:block; font-weight:300; }
.strom-art{ font-size:.9rem; margin-top:.1rem; }
/* Hover (BO): kein blauer Titel mehr; stattdessen erscheint im Bild, in der gerundeten Ecke, der weisse Punkt des Signets. */
.strom-bild{ position:relative; }
/* Masse aus dem Signet (signet.svg, Radius R): das Loch liegt auf der Diagonalen 0.53 R vom Bogenmittelpunkt, also je
   0.625 R von oberer und rechter Kante, Durchmesser 0.19 R. Hier R = --ecke. */
.strom-bild::after{ content:""; position:absolute; z-index:2; top:calc(var(--ecke) * .625); right:calc(var(--ecke) * .625); width:max(8px, calc(var(--ecke) * .19)); height:max(8px, calc(var(--ecke) * .19)); border-radius:50%; background:#fff; opacity:0; transform:translate(50%,-50%) scale(.5); transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.strom-link:hover .strom-bild::after, .strom-link:focus-visible .strom-bild::after{ opacity:1; transform:translate(50%,-50%) scale(1); }
.strom-jahr{ position:absolute; right:0; bottom:-.12em; font-size:clamp(2.2rem,4.6vw,4rem); font-weight:200; line-height:1; letter-spacing:-.04em; color:var(--ink); pointer-events:none; font-variant-numeric:tabular-nums; min-width:2.6em; text-align:right; }
/* BG: eine Groesse fuer alle Jahreszahlen, unabhaengig vom Kachelformat (Wunsch Saemu) */
@media (max-width:1000px){ .strom-item.ist-gross{ grid-column:span 6; } .strom-item.ist-hoch{ grid-column:span 6; } .ist-hoch .strom-bild{ aspect-ratio:3/2; } .strom-item.ist-mittel{ grid-column:span 3; } }
@media (max-width:640px){ .strom-item.ist-mittel{ grid-column:span 6; } .strom-jahr{ font-size:2rem; } }
.pj-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.pj-chip{ font:inherit; font-size:.95rem; font-weight:400; padding:.45rem .9rem; border:1px solid rgba(50,50,50,.45); border-radius:2px 14px 2px 2px; background:transparent; color:var(--ink); cursor:pointer; transition:background var(--tr), color var(--tr), border-color var(--tr); }   /* BP: Umrandung statt Grauflaeche */
.pj-chip:hover{ border-color:var(--ink); }
.pj-chip.is-aktiv{ background:var(--anthrazit); border-color:var(--anthrazit); color:#fff; }

/* ---------- Rundgang (Projektseite) ---------- */
.rg-kopf{ padding:clamp(2rem,5vw,4rem) 0 0; }
.rg-zurueck{ font-size:.95rem; margin:0 0 1.2rem; }
.rg-zurueck a::before{ content:"\2190\00a0"; }
.rg-titel{ font-size:clamp(2rem,5vw,4rem); font-weight:300; letter-spacing:-.02em; line-height:1.05; margin:0 0 clamp(1.2rem,3vw,2.2rem); }
.rg-ort{ display:block; font-size:.5em; font-weight:300; margin-top:.35em; letter-spacing:0; }
.rg-auftakt{ margin:0; aspect-ratio:2/1; }
@media (max-width:640px){ .rg-auftakt{ aspect-ratio:3/2; } }
.rg-story{ padding-top:clamp(1.8rem,4vw,3rem); }
/* Zweispaltig ab 900px, Spalten je rund 45 Zeichen, drei Zeichen Abstand, ohne Linie (die waere das
   einzige lineare Element der Seite; column-rule:1px solid rgba(255,255,255,.35) ist der Schalter). */
.rg-story-text{ font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.62; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:8 4 4; }   /* volle Wrap-Breite, rechte Spalte buendig mit dem Bild (BM) */
/* Zwei Spalten aus ganzen Absaetzen (BN): die Seite verteilt die Absaetze in zwei .rg-spalte, kein Absatz wird getrennt,
   beide Spalten beginnen oben. Unter 900px laufen die Spalten untereinander. */
@media (min-width:900px){ .rg-story-text{ display:grid; grid-template-columns:1fr 1fr; column-gap:3.2ch; align-items:start; } }
.rg-story-text p{ margin:0; }
.rg-story-text p + p{ margin-top:1em; }
@media (max-width:899.98px){ .rg-spalte + .rg-spalte{ margin-top:1em; } }
.rg.hat-farbe .rg-story-text{ font-weight:400; }   /* helle Schrift auf Farbe braucht Regular statt Light (BL) */
/* Factsheet-Link (ab BD): Pfeil-Link wie gd-pfeil, aber weiss auf der Projektfarbe und beim Hover weiss bleibend */
/* Factsheet-Knopf (BL): nach dem Text; Gestalt seit BO die allgemeine des gd-pfeil. */
.rg-factsheet{ margin:clamp(1.6rem,3vw,2.4rem) 0 0; }
.rg.hat-farbe .rg-factsheet-btn:focus-visible{ outline-color:#fff; }
/* Unterer Teil (ab BA): Eckdaten als kompakte Zeile, darunter der Rundgang ueber die volle Breite. Keine Kapitelnavigation. */
.rg-unten{ padding-top:clamp(2.2rem,4.5vw,3.6rem); }
/* Eckdaten (BP): drei Zeilen untereinander in der feinsten Schrift, ohne Beschriftung und ohne Linie. */
.rg-meta{ margin:0 0 clamp(2.2rem,5vw,4rem); }
.rg-meta div{ display:block; }
.rg-meta dt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rg-meta dd{ margin:0; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:300; line-height:1.25; letter-spacing:-.01em; }
.rg-lauf{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,2.6vw,2.4rem) clamp(1rem,2vw,1.8rem); }
@media (min-width:1500px){ .rg-lauf{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.rg-kapitel{ grid-column:1 / -1; font-size:1.05rem; font-weight:400; margin:1.4rem 0 0; scroll-margin-top:1rem; }
.rg-kapitel:first-child{ margin-top:0; }
/* Kapitel Entstehung (ab BE): Skizzen, Begehung und Baustelle als kleine Kacheln, 3 bis 4 pro Zeile. Handyfotos in
   geringer Aufloesung wirken so sauber; die Bildunterschrift traegt die Erklaerung. */
.rg-kapitel-entstehung{ margin-top:clamp(2.4rem,5vw,4rem); padding-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid rgba(50,50,50,.14); }
.rg-kapitel-hinweis{ display:block; font-size:.9rem; font-weight:300; color:var(--muted); opacity:.75; margin-top:.15rem; }
.rg-entstehung{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.9rem,1.8vw,1.4rem) clamp(.8rem,1.4vw,1.1rem); }
@media (min-width:1500px){ .rg-entstehung{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:640px){ .rg-entstehung{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.rg-entstehung .rg-fig .rg-bild{ aspect-ratio:4/3; }
.rg-entstehung .rg-fig.ist-hoch .rg-bild{ aspect-ratio:3/4; }
.rg-entstehung .rg-cap{ font-size:.82rem; margin-top:.4rem; }
.rg-entstehung .rg-nr{ width:1.3rem; height:1.3rem; font-size:.66rem; }
.rg-fig{ margin:0; }
.rg-bild{ aspect-ratio:3/2; cursor:zoom-in; }
.rg-fig.ist-hoch .rg-bild{ aspect-ratio:3/4; }
.rg-fig.ist-hoch{ grid-row:span 1; }
.rg-bild img{ will-change:transform; backface-visibility:hidden; }
.rg-bild.hat-plx:hover{ transform:scale(1.015); }
.rg-cap{ display:flex; gap:.6rem; font-size:.9rem; margin-top:.5rem; }
.rg-nr{ flex:none; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--kopf); display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:400; }
@media (max-width:640px){ .rg-lauf{ grid-template-columns:1fr; } .rg-fig.ist-hoch .rg-bild{ aspect-ratio:3/2; } }
/* Pfeile zum vorherigen und naechsten Projekt: fest, vertikal mittig, am linken und rechten Rand des
   Inhalts. Weisser Kreis, Pfeil in Anthrazit. Kein Text, der Projektname liegt im title und aria-label. */
.rg-pfeile{ pointer-events:none; }
/* Auf Projektseiten laesst der Inhalt am Rand Platz fuer die Pfeile. */
@media (min-width:1101px){ .rg .wrap{ width:min(100% - 2 * 6.2rem, var(--wrap)); } }
.rg-pfeil{ pointer-events:auto; position:fixed; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; background:#fff; color:var(--anthrazit); display:inline-flex; align-items:center; justify-content:center; padding:15px; z-index:40; box-shadow:0 8px 24px -10px rgba(0,0,0,.35); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.rg-pfeil svg{ width:100%; height:100%; }
.rg-pfeil-prev{ left:calc(max(var(--tafel), var(--tafel-min)) + 1.25rem); }
.rg-pfeil-next{ right:1.25rem; }
.rg-pfeil:hover{ transform:translateY(-50%) scale(1.08); box-shadow:0 12px 28px -10px rgba(0,0,0,.45); text-decoration:none; }
.rg-pfeil:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.rg.hat-farbe .rg-pfeil{ color:var(--anthrazit); }
.rg-kopf{ padding-bottom:0; }
.rg-lauf{ padding-bottom:clamp(3rem,7vw,5.5rem); }
@media (max-width:1100px){
  .rg-pfeil{ top:auto; bottom:1.1rem; transform:none; width:48px; height:48px; padding:13px; }
  .rg-pfeil:hover{ transform:scale(1.08); }
  .rg-pfeil-prev{ left:1rem; }
  .rg-pfeil-next{ right:auto; left:calc(1rem + 48px + .6rem); }
  .gd-to-top{ right:1rem; bottom:1.1rem; }
}

/* ---------- Projektfarbe (ab AZ): Kopf, Auftaktbild und Fliesstext in der Projektfarbe mit weisser Schrift,
   darunter Eckdaten und Rundgang als eigene Sektion auf Weiss mit dunkler Schrift (Entscheid Gabriel 22.09.2026,
   zur Ansicht; vorher stand die ganze Seite im Projektton). ---------- */
.rg.hat-farbe{ background:#fff; color:var(--ink); }
.rg.hat-farbe .rg-farbteil{ background:var(--projekt); color:#fff; padding-bottom:clamp(2.6rem,5vw,4.2rem); }
.rg.hat-farbe .rg-kopf a, .rg.hat-farbe .rg-titel{ color:#fff; }
.rg.hat-farbe .rg-zurueck a{ opacity:.8; }
.rg.hat-farbe .rg-zurueck a:hover{ opacity:1; }
.rg.hat-farbe .rg-kopf .ecke{ background:rgba(255,255,255,.08); }


/* ---------- Ueber uns: Team in wechselnden Reihen (BO, 13.10.2026) ---------- */
.team{ padding:clamp(1rem,3vw,2.5rem) 0 clamp(2rem,5vw,4rem); }
.team-reihe{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(1.4rem,4vw,4rem); align-items:center; margin:0 0 clamp(2.4rem,6vw,5rem); }
.team-reihe.ist-rechts .team-bild{ order:2; }
.team-reihe.ist-rechts .team-text{ order:1; }
.team-bild{ aspect-ratio:4/5; }
.team-platzhalter{ position:relative; background:var(--petrol-tint); }
.team-platzhalter::after{ content:""; position:absolute; top:calc(var(--ecke) * .625); right:calc(var(--ecke) * .625); width:max(8px, calc(var(--ecke) * .19)); height:max(8px, calc(var(--ecke) * .19)); border-radius:50%; background:#fff; transform:translate(50%,-50%); }
.team-text h2{ font-size:clamp(1.5rem,2.6vw,2.3rem); margin:0 0 .15em; }
.team-rolle{ display:block; font-size:1.05rem; margin:0 0 1.2em; }
.team-mail{ display:inline-block; margin:-.8em 0 1.2em; }
.team .pg-spalten{ margin-top:clamp(1rem,3vw,2rem); }
.team-text p{ max-width:52ch; }
.pg-band .prose, .team-text{ font-weight:400; }   /* BP: Fliesstext der Inhaltsseiten in Regular */
.team-reihe.gd-liste{ opacity:0; transform:translateY(28px); }
.team-reihe.ist-sichtbar{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width:760px){ .team-reihe{ grid-template-columns:1fr; } .team-reihe.ist-rechts .team-bild{ order:0; } .team-bild{ aspect-ratio:4/3; max-width:28rem; } }

/* ---------- Kontakt: Karte als Kachel mit der Ecke (BO) ---------- */
.karte{ margin:clamp(2.4rem,5vw,4rem) 0 0; }
.karte-kachel{ aspect-ratio:21/9; background:var(--kopf); position:relative; }
.karte-kachel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:saturate(.75); }
@media (max-width:640px){ .karte-kachel{ aspect-ratio:4/3; } }
.karte-hinweis{ font-size:.9rem; margin:.7rem 0 0; }

/* ---------- Inhaltsseite im Wechsel (BP, Dentalbox): Absatz und Bild abwechselnd ---------- */
.wechsel{ display:grid; gap:clamp(2rem,5vw,4.5rem); }
.pg-spalten.ist-nach-wechsel{ margin-top:clamp(2.4rem,6vw,5rem); }
.wechsel-reihe{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(1.4rem,4vw,4rem); align-items:center; }
.wechsel-reihe.ist-links .wechsel-bild{ order:-1; }
.wechsel-bild{ aspect-ratio:4/3; }
.wechsel-reihe.gd-liste{ opacity:0; transform:translateY(28px); }
.wechsel-reihe.ist-sichtbar{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width:760px){ .wechsel-reihe{ grid-template-columns:1fr; } .wechsel-reihe.ist-links .wechsel-bild{ order:0; } }
.wechsel-rest{ display:grid; gap:clamp(1rem,2vw,1.8rem); }
.wechsel-rest.ist-2{ grid-template-columns:1fr 1fr; }
.wechsel-rest.ist-3{ grid-template-columns:1fr 1fr 1fr; }
.wechsel-kachel{ aspect-ratio:3/2; }
.wechsel-rest.ist-1 .wechsel-kachel{ aspect-ratio:21/9; }
.wechsel-rest.gd-liste{ opacity:0; transform:translateY(28px); }
.wechsel-rest.ist-sichtbar{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width:640px){ .wechsel-rest.ist-2, .wechsel-rest.ist-3{ grid-template-columns:1fr; } }