@font-face{font-family:"ABC Areal";src:url("Schrift/ABCAreal-Regular.woff2") format("woff2");font-weight:300 499;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Areal";src:url("Schrift/ABCAreal-RegularItalic.woff2") format("woff2");font-weight:300 499;font-style:italic;font-display:swap}
@font-face{font-family:"ABC Areal";src:url("Schrift/ABCAreal-Medium.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Areal";src:url("Schrift/ABCAreal-MediumItalic.woff2") format("woff2");font-weight:500 900;font-style:italic;font-display:swap}

:root{
  color-scheme: light;
  --bg:#ffffff;
  --ink:rgb(0,0,255);
  --ink-4:rgba(0,0,255,.65);   /* Launch 30.10.2026: .45 -> .65, Kontrast 4,9:1 */
  --veil:rgba(255,255,255,.95);
  --line:rgba(0,0,255,.3);
  --base:clamp(10px, .88vw, 22px);
  --pad:max(16px, 1rem);
  font-size:var(--base);
  /* Motion-Probe 26.10.: ein gemeinsamer Rhythmus. Dauern: fast = Hover und Zustand, mid = Umschalten und Ueberblenden,
     slow = grosse Auftritte, move = Raster und Seiten verschieben (auch in site.js, MOVE). Kurven: out = ankommen (bremst ab),
     in = gehen (beschleunigt), move = an Ort und Stelle verschieben */
  --t-fast:.2s; --t-mid:.35s; --t-slow:.6s; --t-move:.8s;
  --e-out:cubic-bezier(.2,.7,.2,1); --e-in:cubic-bezier(.5,0,.75,0); --e-move:cubic-bezier(.65,0,.35,1);
}
@media (max-width:700px){ :root{ --base:10px; font-size:15px; --pad:16px; } }
@media (min-width:701px) and (pointer:coarse){ :root{ --base:clamp(14px, 1.05vw, 22px); } }   /* Testrunde 24.10., Lewin: Tablet (Touch) mit groesserer Mindestschrift, vorher 10 px Grundgroesse bei iPad hoch */
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{
  margin:0; color:var(--ink);
  font-family:"ABC Areal","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.3rem; font-weight:550; line-height:1.22;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--ink); text-decoration:none}
a:active,.tile:active{opacity:.7}
a:focus-visible,.tile:focus-visible,button:focus-visible{outline:2px solid var(--ink); outline-offset:3px}   /* Motion-Probe: 2 px statt 1 px, damit der Fokus bei Tastaturbedienung zu sehen ist */
.caption{font-size:1.05rem; font-weight:420; line-height:1.22}
.caption .n{color:var(--ink-4)}
.cols{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:1rem}
.right{text-align:right}
.pre{white-space:pre}

/* pinned top nav — transparent, floats over grid */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:5;
  padding:calc(.9rem + env(safe-area-inset-top,0px)) var(--pad) 2rem;
  pointer-events:none;
}
.nav a{pointer-events:auto}
.nav .home{grid-column:span 5}
.nav .links{grid-column:span 7; text-align:right; white-space:pre}

/* homepage grid */
main{padding:calc(.9rem + 4.4rem) var(--pad) 0}
.grid{display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:1rem; row-gap:2rem; align-items:start}
/* Spalten nach Bildschirmbreite: 13"-Laptop 4, groesser 5, sehr gross 6 */
:root{--cols:3} /* Variante: auf dem Desktop immer 3 Spalten */
.tile{display:block; cursor:pointer}
.ph{display:block; width:100%; max-width:100%; height:auto}
.tile .caption{margin-top:.75em; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.8em; text-align:left}
@media (max-width:700px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:1rem} }

/* footers */
.footer{display:grid; grid-template-columns:1fr 1fr; padding:20rem var(--pad) 1rem}
.footer .city{padding-left:.5rem}
@media (max-width:700px){ .footer{grid-template-columns:1fr; row-gap:.4em} .footer .city{padding-left:0} }

/* overlays */
.overlay{
  position:fixed; inset:0; z-index:10; display:block;
  background:var(--veil); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transition:opacity calc(var(--d,.4s) * .65) var(--e-in), visibility 0s linear calc(var(--d,.4s) * .65);   /* Motion-Probe 26.10.: Schliessen schneller (65 %) und beschleunigend */
}
.overlay.open{opacity:1; visibility:visible; transition:opacity var(--d,.4s) var(--e-out)}
.overlay .panel{
  width:100%; min-height:100%;
  padding:calc(.9rem + env(safe-area-inset-top,0px)) var(--pad) calc(1rem + env(safe-area-inset-bottom,0px));
}
#information,#cv,#contact{--d:.8s}
#project{justify-content:flex-start}
#project .panel{width:100%; background:var(--bg)}
@media (max-width:700px){ #project .panel{width:100%} }
.overlay .head{margin-bottom:1.2em}
/* Projektseite: horizontale Galerie, Text so breit wie der Heroshot */
#project{--gh:min(66vh, 33vw); --hw:calc(var(--gh) * 1.5)}
@media (max-width:700px){ #project{--hw:calc(100vw - 2 * var(--pad)); --gh:calc(var(--hw) / 1.5)} }
.proj-gal{display:flex; gap:1rem; height:var(--gh); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  margin-right:calc(-1 * var(--pad)); padding-right:var(--pad); scrollbar-width:thin}
.proj-gal > *{flex:0 0 auto; height:100%}
.proj-gal img{display:block; height:100%; width:auto; max-width:none}
.proj-gal .first{width:var(--hw); aspect-ratio:3 / 2; object-fit:cover}
.proj-text,.proj-foot{max-width:var(--hw)}
/* Titel + Specs zwischen Galerie und Text */
.proj-intro{margin-top:2.4em; max-width:var(--hw); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; column-gap:2rem; row-gap:1.4em}
.proj-intro .proj-name{flex:0 1 auto}
.proj-name{font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:normal; margin:0; text-wrap:balance} /* gleiche Groesse wie YRD.Works */
.proj-specs{display:grid; grid-template-columns:5.5em minmax(0,1fr) minmax(0,1fr); width:60%; min-width:20em; column-gap:2rem; margin:0; line-height:1.5rem; align-items:start}
/* Jahr schmal, Ort und Projektart duerfen umbrechen */
.proj-specs dt{white-space:nowrap}
.proj-specs dd{white-space:normal; hyphens:auto; text-wrap:balance}
/* Desktop: Projektart bricht nur um, wenn es wirklich nicht passt; die Angaben stehen wie bisher ab 40 % der Textspalte und wachsen bei langen Angaben nach links, passt es neben dem Titel nicht, stehen sie darunter */
@media (min-width:1000px){ .proj-specs{grid-template-columns:5.5em minmax(max-content,1fr) minmax(max-content,1fr); width:auto; min-width:60%; flex:0 1 auto} }
@media (min-width:701px) and (pointer:coarse){ .proj-specs{grid-template-columns:5.5em minmax(max-content,1fr) minmax(max-content,1fr); width:auto; min-width:60%; flex:0 1 auto} }   /* Testrunde 24.10., Lewin: Tablet mit groesserer Schrift, Angaben nicht in Silben zerhacken */
/* Titel steht auf Hoehe der ersten Wertezeile, auch wenn Ort oder Projektart umbrechen */
.proj-intro{align-items:flex-start}
.proj-intro .proj-name{margin-top:1.5rem}
@media (max-width:700px){
  .proj-intro .proj-name{margin-top:0}
  .proj-specs{display:block; width:100%; min-width:0}
  .proj-specs div{display:grid; grid-template-columns:6.5em minmax(0,1fr); column-gap:1rem}
}
.proj-specs div{min-width:0}
.proj-specs dt{color:var(--ink-4)}
.proj-specs dd{margin:0}
/* Ruben 25.10.: Titel und Angaben sitzen auf einer Grundlinie, die drei Angaben stehen mit gleichen Abstaenden nebeneinander, buendig mit der rechten Bildkante.
   Ab 701 px ein Raster: Spalte 1 der Titel, dann Year, Location, Type je so breit wie ihr Inhalt; Zeile 1 die Bezeichnungen, Zeile 2 Titel und Werte auf derselben Grundlinie.
   Wird es eng, brechen die Werte um (statt die Abstaende zu stauchen) */
@media (min-width:701px){
  .proj-intro{display:grid; grid-template-columns:minmax(max-content,1fr) repeat(3,minmax(0,max-content)); grid-template-rows:auto auto; column-gap:2.6em; row-gap:0; align-items:baseline; justify-content:stretch}
  .proj-intro .proj-name{grid-column:1; grid-row:2; margin-top:0; align-self:baseline; max-width:16em}   /* kurze Titel brechen nicht um, lange ab 16em; vorher machen die Werte Platz */
  .proj-intro .proj-specs, .proj-intro .proj-specs div{display:contents}
  .proj-intro .proj-specs dt{grid-row:1}
  .proj-intro .proj-specs dd{grid-row:2}
  .proj-intro .proj-specs div:nth-child(1) > *{grid-column:2}
  .proj-intro .proj-specs div:nth-child(2) > *{grid-column:3}
  .proj-intro .proj-specs div:nth-child(3) > *{grid-column:4}
  .proj-intro .proj-specs dt, .proj-intro .proj-specs dd{line-height:1.5rem}
}
/* Schmales Rechnerfenster (Bildstrecke dort nur rund halb so breit wie das Fenster): Titel in eigener Zeile darueber, die drei Angaben darunter mit gleichen Abstaenden */
@media (min-width:701px) and (max-width:1130px) and (hover:hover) and (pointer:fine){
  .proj-intro{grid-template-columns:repeat(3,minmax(0,max-content)); grid-template-rows:auto auto auto; row-gap:0}
  .proj-intro .proj-name{grid-column:1 / -1; grid-row:1; max-width:none; margin-bottom:.9em}
  .proj-intro .proj-specs dt{grid-row:2}
  .proj-intro .proj-specs dd{grid-row:3}
  .proj-intro .proj-specs div:nth-child(1) > *{grid-column:1}
  .proj-intro .proj-specs div:nth-child(2) > *{grid-column:2}
  .proj-intro .proj-specs div:nth-child(3) > *{grid-column:3}
}
/* Ueberscrollen: unter der Seite liegt eine transparente Zone, der Schleier loest sich auf */
#project{--exit:0px; background:rgba(255,255,255,var(--va,.95))}
#project .panel{background:linear-gradient(var(--bg),var(--bg)) top / 100% calc(100% - var(--exit)) no-repeat}
.proj-foot{padding-bottom:6rem}
.proj-exit{height:var(--exit)}
.two{display:grid; grid-template-columns:1fr 1fr; column-gap:1rem; margin-top:1.2em}
.two a{text-decoration:underline}
.spacer{height:7.2em}
@media (max-width:700px){ .proj-details{grid-template-columns:1fr; row-gap:1.2em} }

.legal .panel{background:var(--bg)}
.legal-text{max-width:var(--hw, 40em); width:min(100%, 44em); margin-top:2.4em}
.legal-text .proj-name{margin-bottom:.6em}
.legal-text h3{font-size:inherit; font-weight:inherit; margin:1.8em 0 .2em}
.legal-text p{margin:0 0 .9em}
.legal-links a{margin-right:1em}
.proj-bi .legal-row{grid-column:1 / -1; display:flex; gap:1em; margin-top:1.2em}
.info-text{grid-column:span 3}
.info-addr{grid-column:span 3}
.info-text p{margin:0; text-indent:0}
.info-text p + p{text-indent:4em}
@media (max-width:700px){ .info-text,.info-addr{grid-column:1 / -1; margin-bottom:1.2em} }

.cv-row{margin-bottom:1.2em}
.cv-row .k{grid-column:span 3}
.cv-row .v{grid-column:span 9}
.cv-title{grid-column:4 / span 5}
.cv-close{grid-column:span 4; text-align:right}

/* contact form */
.form{max-width:32rem; display:grid; gap:.6rem; margin-top:4rem}
.form label{font-size:.8rem; font-weight:420; color:var(--ink-4)}
.form input,.form textarea{
  font:inherit; color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:10em; padding:.55em .9em; width:100%;
}
.form textarea{border-radius:1em; min-height:10em; resize:vertical}
.form button{
  justify-self:start; font:inherit; color:var(--ink); cursor:pointer;
  background:rgba(0,0,255,.12); border:0; border-radius:10em; padding:.5em 1.1em;
}
.form .note{font-size:.8rem; font-weight:420; color:var(--ink-4); min-height:1.2em}

@media (prefers-reduced-motion:reduce){ .overlay,.overlay.open{transition:none} }


/* Zoom: das gehoverte Thumb zoomt minimal ins Bild, Rahmen bleibt stehen */
.phw{overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .phw .ph{transition:transform var(--t-mid) var(--e-out)}
  .tile:hover .phw .ph{transform:scale(1.01)}
}
@media (prefers-reduced-motion:reduce){ .phw .ph{transition:none} }

/* Wackler: der Titel ruckelt beim Hovern einmal ganz leicht */
.wiggle{display:inline-block; transform-origin:0 50%}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}45%{transform:rotate(2.2deg)}70%{transform:rotate(-1deg)}}
@media (hover:hover) and (pointer:fine){ .tile:hover .wiggle{animation:wiggle .5s ease-in-out} }
/* Wackler auch in der Navigation */
.nav .links a,.nav .home,.head3 > a[data-home]{display:inline-block; transform-origin:0 50%}
@media (hover:hover) and (pointer:fine){ .nav .links a:hover,.nav .home:hover,.head3 > a[data-home]:hover{animation:wiggle .5s ease-in-out} }   /* Testrunde 29.10.: YRD.Works links wackelt wie das Menue rechts */
@media (prefers-reduced-motion:reduce){ .nav .links a:hover,.nav .home:hover,.head3 > a[data-home]:hover{animation:none} }
@media (prefers-reduced-motion:reduce){ .tile:hover .wiggle{animation:none} }

/* Projektseite: Bild links, Werktext darunter */
.proj-text{margin-top:2.4em}
/* Split: Deutsch links, Englisch rechts (kursiv), Absaetze paarweise auf einer Hoehe */
.proj-bi{display:grid; grid-template-columns:var(--hw) minmax(0,1fr); column-gap:1rem; row-gap:1.2em; margin-top:2.4em}
.proj-bi p{margin:0; text-wrap:pretty} .proj-bi p + p{margin-top:1.2em}   /* pretty: keine einzelnen Woerter in der letzten Zeile */
.proj-bi .en{font-style:italic}
/* Deutsch schwarz, Englisch blass; Hover ueber Englisch tauscht die beiden */
@media (hover:hover) and (pointer:fine){
  .proj-bi p{transition:color var(--t-fast) var(--e-out)}
  .proj-bi .en{color:rgba(0,0,255,.3)}   /* Ruben 29.10. abends: wieder heller (vorher .65), damit DE und EN klar unterscheidbar sind; beim Hovern voll blau */
  .proj-bi:has(.en:hover) .en{color:var(--ink)}
  .proj-bi:has(.en:hover) .de{color:rgba(0,0,255,.3)}
}
@media (max-width:700px){ .proj-bi{grid-template-columns:1fr; row-gap:2.4em} }
.proj-text p{margin:0}
.proj-text p + p{margin-top:1.2em}

/* Variante: blaue, groessere Typo */
::selection{background:rgb(0,0,255); color:#fff}

/* Variante Pfeile: oben zurueck zu allen Projekten, unten ins naechste Projekt, Schriftgroesse wie YRD.Works */
.proj-nx{margin-top:1.2em}
.arw{display:inline-block; transform-origin:0 50%}
@media (prefers-reduced-motion:reduce){ .arw:hover{animation:none} }
/* Kopf: YRD.Works links, All Projects mittig; unten Next Project mittig, zweizeilig */
.head3{display:grid; grid-template-columns:1fr auto 1fr; column-gap:1rem; align-items:baseline}
.head3 .arw{white-space:nowrap; transform-origin:50% 50%}
.head3 .head-links{grid-column:3; display:flex; justify-content:flex-end; gap:1em; white-space:nowrap}   /* rechts, auch ohne Eintrag in der Mitte */
.head3 .head-links a{display:inline-block; transform-origin:0 50%}
@media (hover:hover) and (pointer:fine){ .head3 .head-links a:hover{animation:wiggle .5s ease-in-out} }
@media (prefers-reduced-motion:reduce){ .head3 .head-links a:hover{animation:none} }
/* Handy: YRD.Works und Links oben wie im Grid, All Projects mittig darunter */
@media (max-width:700px){
  .head3{grid-template-columns:1fr auto; row-gap:.6em}
  .head3 .arw{grid-column:1 / -1; grid-row:2; justify-self:center}
  .head3 .head-links{grid-column:2; grid-row:1}
}
.proj-nx{max-width:none; text-align:center; margin-top:0}
.proj-nx a{display:inline-block}
.proj-nx .nx-l{display:block; color:var(--ink-4)}
.proj-nx .nx-t{display:inline-block; transform-origin:50% 50%}
/* Momentaufnahme der alten Projektseite beim Hochschieben */
.swap-old{z-index:11; overflow:hidden; background:var(--bg); pointer-events:none}
.swap-old .panel{background:var(--bg)}
/* Bildzaehler, Next-Link, Sprachumschalter */
.proj-count{margin-top:.6em; min-height:1.22em; color:var(--ink-4); font-variant-numeric:tabular-nums}
/* Ruben 25.10.: Pfeile am Bildzaehler, blau wenn es weitergeht, blass am Anfang und Ende */
.proj-count{display:flex; align-items:baseline}
.proj-count .gp{font:inherit; color:var(--ink); background:none; border:0; padding:.15em .45em; margin:-.15em 0; cursor:pointer; line-height:inherit}
.proj-count .gp:first-child{padding-left:0}
.proj-count .gp:disabled{color:var(--ink-4); opacity:.5; cursor:default}
@media (prefers-reduced-motion:reduce){ .proj-count .gp:hover{animation:none} }
.proj-intro{margin-top:1.8em}
.lang-sw{display:none}
.lang-sw button{font:inherit; color:var(--ink-4); background:none; border:0; padding:0; cursor:pointer}
.proj-bi:not(.show-en) .lang-sw [data-l=de], .proj-bi.show-en .lang-sw [data-l=en]{color:var(--ink)}
/* Erstes Bild richtet sich nach der Galeriehoehe (Desktop unveraendert) */
.proj-gal .first{width:calc(var(--gh) * 1.5)}

/* ---------- Handy ---------- */
@media (max-width:700px){
  .grid{grid-template-columns:1fr; row-gap:2.4rem}
  .nav.cols{display:flex; justify-content:space-between; align-items:baseline}
  .nav .links{display:flex; gap:1em; white-space:nowrap}
  /* mehrere Bilder: Heroshot etwas schmaler, das naechste schaut am Rand hervor */
  /* Testrunde 26.10., Ruben: mit den Pfeilen am Bildzaehler fuellen Querformate im Hochformat die ganze Breite (kein Hervorschauen mehr); Abstand = Rand, damit kein Streifen des naechsten Bilds steht */
  .proj-gal{gap:var(--pad)}
  .proj-gal{scroll-snap-type:x mandatory} .proj-gal > *{scroll-snap-align:start}
  .lang-sw{display:block; grid-column:1 / -1}
  .proj-bi{row-gap:1.2em}
  .proj-bi:has(.lang-sw) .en{display:none}
  .proj-bi.show-en .en{display:block}
  .proj-bi.show-en .de{display:none}
}
/* Testrunde 24.10., Lewin: Tablet im Hochformat wie Handy eine Sprache mit Umschalter DE / EN */
@media (min-width:701px) and (pointer:coarse) and (orientation:portrait){
  .proj-bi{grid-template-columns:1fr}
  .lang-sw{display:block; grid-column:1 / -1}
  .proj-bi:has(.lang-sw) .en{display:none}
  .proj-bi.show-en .en{display:block}
  .proj-bi.show-en .de{display:none}
  /* Testrunde 24.10., Lewin: Bildstrecke groesser, das erste Bild fuellt rund 2/3 der Breite, das naechste schaut rechts hervor */
  #project{--hw:calc((100vw - 2 * var(--pad)) * 2 / 3); --gh:calc(var(--hw) / 1.5)}
}

/* Intro: Woerter nacheinander, mittig, waehrend die Thumbs laden */
#intro{position:fixed; inset:0; z-index:50; background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:opacity var(--t-slow) var(--e-in), visibility 0s linear var(--t-slow)}
#intro.gone{opacity:0; visibility:hidden; pointer-events:none}
#intro-w{font-size:clamp(1.6rem, 3.6vw, 4.5rem); font-weight:550; line-height:1; letter-spacing:-.01em; text-align:center; white-space:nowrap}
html.intro-on, html.intro-on body{overflow:hidden}
@media (prefers-reduced-motion:reduce){ #intro{transition:none} }

/* Contact: links die Aufforderung, rechts der Kanal. Links sind unterstrichen und haben einen Pfeil:
   alle Pfeile waagerecht. Bei .part ist nur das Wort in .u unterstrichen */
.contact-list{margin:0; display:grid; grid-template-columns:minmax(9em,max-content) minmax(0,1fr); column-gap:3rem; row-gap:.5em}
.contact-list dd{margin:0}
.contact-list .or{margin:0 .35em}
.contact-list a{display:inline-block; transform-origin:0 50%; text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
.contact-list a.part{text-decoration:none}
.contact-list a.part .u{text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
.contact-list a::before{content:""; display:inline-block; background-color:currentColor; margin-right:.4em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6H24.5M19 .8L24.5 6L19 11.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6H24.5M19 .8L24.5 6L19 11.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  width:1.5em; height:.7em; vertical-align:.08em}
@media (prefers-reduced-motion:reduce){ .contact-list a:hover{animation:none} }
@media (max-width:700px){ .contact-list{grid-template-columns:1fr; row-gap:0} .contact-list dd{margin-bottom:1em} }

/* nur fuer Suchmaschinen und Screenreader sichtbar */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Navigation: oben YRD.Works links, About News Contact rechts (in Projekt und Ebenen in der Mitte ↑ All Projects);
   unten fest: links Ansicht 2D / 3D, Mitte naechstes Projekt, rechts Impressum und Datenschutz (nur About, Contact, Impressum, Datenschutz) */
.nav .home{grid-column:1 / span 6;grid-row:1}
.nav .links{grid-column:7 / span 6;grid-row:1}
.vsw{display:flex;align-items:center;gap:.5em;white-space:nowrap;pointer-events:auto}
:root{--fb-b:1rem; --fb-h:3.2rem; --fb-in:1.3rem; --fb-r:calc(var(--fb-h) / 2)}   /* schwebende Leiste: Abstand zum unteren Rand, Hoehe, Innenabstand, Eckenradius (halbe Hoehe = ganz rund wie der Schalter; z. B. 6px oder 14px fuer weichere Ecken) */
.fbar{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--fb-b) + env(safe-area-inset-bottom,0px));height:var(--fb-h);z-index:12;
  display:grid;grid-template-columns:1fr auto 1fr;column-gap:1rem;align-items:center;padding:0 var(--fb-in);pointer-events:auto;
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--ink);border-radius:var(--fb-r)}   /* schwebende weisse Leiste, blau umrandet, ueber dem unteren Rand (Platz fuer das Dock): fester Ort fuer die uebergeordneten Werkzeuge */
.fbar .fb-l{justify-self:start}.fbar .fb-c{justify-self:center}.fbar .fb-r{justify-self:end}
.fbar .fb-r{display:flex;align-items:center;gap:1.4em}
/* Download Portfolio: rechts in der Leiste, Pillenform wie der Ansichtsschalter, mit Umriss; beim Darueberfahren blau gefuellt */
.dlp{display:inline-block;line-height:1;padding:.3em .8em .26em;border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);background:var(--bg);white-space:nowrap;pointer-events:auto;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
@media (hover:hover) and (pointer:fine){ .dlp:hover{background:var(--ink);color:var(--bg)} }
@media (max-width:700px){ .dlp .lg{display:none} body[data-ov="about"] .dlp,body[data-ov="contact"] .dlp,body[data-ov="impressum"] .dlp,body[data-ov="datenschutz"] .dlp{display:none} }   /* Handy: dort stehen rechts Impressum und Datenschutz */
.fbar a{pointer-events:auto}
#fnext,#fprev,.flegal{display:none;white-space:nowrap}
.fbar .fb-c{display:flex;gap:.6em;align-items:center}
/* Mitte der Leiste: Ziele als Pillen mit Umriss (Previous / All / Next Project), was gerade gewaehlt ist blau mit weisser Schrift:
   in der Galerie ist All Projects gewaehlt, im Projekt sind alle drei Ziele */
.fbar .fb-c .arw{display:inline-block;line-height:1;padding:.3em .8em .26em;border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg);color:var(--ink);white-space:nowrap;transform-origin:50% 50%;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
#fall{display:inline-block}
body[data-ov=""] #fall,body:not([data-ov]) #fall{background:var(--ink);color:var(--bg);pointer-events:none}
@media (hover:hover) and (pointer:fine){ .fbar .fb-c .arw:hover{background:rgba(0,0,255,.08)} }
@media (max-width:700px){ .fbar{font-size:13px;column-gap:.8rem} .fbar .fb-c{gap:.4em} .fbar .lg{display:none} }   /* Handy: kuerzer (↑ All ↓), damit Impressum und Datenschutz daneben passen */
body[data-ov="project"] #fnext,body[data-ov="project"] #fprev{display:inline-block}
/* About, News, Contact, Impressum, Datenschutz (2D und 3D): in der Leiste mittig All Projects (Ziel, Umriss) und die Seite selbst (gewaehlt, blau gefuellt);
   dafuer keine Ueberschrift ueber dem Inhalt (bleibt fuer Screenreader), bei About rueckt der Text unter das Foto */
.fbar .fb-c .fst{display:none}   /* staerker als die Pillenregel .fbar .fb-c .arw */
/* Handy: Impressum und Datenschutz ohne All und ohne Status in der Mitte (YRD.Works und der Ansichtsschalter fuehren in die Uebersicht, die eigene Pille rechts ist gefuellt);
   About und Contact ohne die Rechtspillen in der Leiste, dort stehen Impressum und Datenschutz unter dem Inhalt */
.c-legal{display:none}
@media (max-width:700px){
  body[data-ov="impressum"] #fall,body[data-ov="datenschutz"] #fall,body[data-ov="impressum"] #ab-all,body[data-ov="datenschutz"] #ab-all{display:none}
  body[data-ov="contact"] .fbar .flegal{display:none}
  .c-legal{display:flex;gap:1em;margin-top:2.4em}
  body[data-ov="impressum"] .fbar .fb-c .fst,body[data-ov="datenschutz"] .fbar .fb-c .fst{display:none}
}
body[data-ov="about"] .fst[data-for="about"],body[data-ov="news"] .fst[data-for="news"],body[data-ov="contact"] .fst[data-for="contact"],body[data-ov="impressum"] .fst[data-for="impressum"],body[data-ov="datenschutz"] .fst[data-for="datenschutz"]{display:inline-block;background:var(--ink);color:var(--bg);pointer-events:none}
body[data-ov="about"] .proj-intro{display:none}
.legal-text > h2.proj-name:first-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* rechts: wo Impressum und Datenschutz stehen, kein Download Portfolio; beide als Pillen mit Umriss, die aktuelle Seite blau gefuellt */
body[data-ov="about"] .fbar .dlp,body[data-ov="contact"] .fbar .dlp,body[data-ov="impressum"] .fbar .dlp,body[data-ov="datenschutz"] .fbar .dlp{display:none}
.fbar .flegal{gap:.6em}
.fbar .flegal a,#ovlegal a{display:inline-block;line-height:1;padding:.3em .8em .26em;border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg);color:var(--ink);white-space:nowrap;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
body[data-ov="impressum"] .flegal a[data-for="impressum"],body[data-ov="datenschutz"] .flegal a[data-for="datenschutz"],body[data-ov="impressum"] #ovlegal a[data-for="impressum"],body[data-ov="datenschutz"] #ovlegal a[data-for="datenschutz"]{background:var(--ink);color:var(--bg);pointer-events:none}
@media (hover:hover) and (pointer:fine){ .fbar .flegal a:hover,#ovlegal a:hover{background:rgba(0,0,255,.08)} }
@media (max-width:700px){ .fbar .flegal,#ovlegal{gap:.4em} .fbar .flegal a,#ovlegal a{padding:.3em .6em .26em} #ovlegal{font-size:13px} }   /* Handy: Contact mit beiden Rechtspillen passt in die Leiste */
@media (max-width:700px){ body[data-ov="about"] .fbar .flegal{display:none} }   /* Handy: Impressum und Datenschutz stehen im About unter dem Text, die Leiste braucht den Platz fuer All und About */
body[data-ov="about"] .flegal,body[data-ov="contact"] .flegal,body[data-ov="impressum"] .flegal,body[data-ov="datenschutz"] .flegal{display:inline-flex}
.flegal a{display:inline-block;transform-origin:50% 50%}
main{padding-bottom:7rem}
.overlay .panel{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}
.proj-nx{display:none}
.vsw .seg{position:relative;display:inline-flex;line-height:1;background:var(--bg);border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink)}
.vsw .seg > .on,.vsw .seg > a{position:relative;z-index:1;display:block;padding:.3em .8em .26em;color:var(--ink);transition:color var(--t-fast) var(--e-out)}
/* Umrandung sitzt direkt an der aktiven Ansicht (steht sofort, ohne Skript); der Knopf erscheint nur beim Wechsel und gleitet hinueber */
/* aktive Ansicht blau mit weisser Schrift; beim Wechsel gleitet die blaue Flaeche hinueber */
.vsw .seg > .on{background:var(--ink);color:var(--bg);border-radius:10em}
/* Wechsel 3D -> 2D als Browser-Uebergang (View Transitions): das letzte 3D-Bild bleibt stehen, bis 2D gezeichnet ist, dann Ueberblenden ohne Weiss.
   Andere Seitenwechsel ueberspringen ihn (pageswap in site.js und projektraum.src.js) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-mid)}
/* 2D -> 3D (Typ zu3d, setzt der Kopf von 3d/index.html): das 2D-Bild bleibt voll stehen, 3D blendet erst nach 0,3 s darueber ein, wenn die Vorschaubilder sicher gezeichnet sind */
@keyframes vt-ein{from{opacity:0}to{opacity:1}}
html:active-view-transition-type(zu3d)::view-transition-old(root){animation:none;opacity:1}
html:active-view-transition-type(zu3d)::view-transition-new(root){animation:vt-ein .3s ease .3s both}
/* Rueckfall ohne View Transitions (aeltere Browser, Doppelklick/file://): Ankunft aus der 3D-Rueckfahrt (#r3, Klasse setzt template.html im Kopf) aus Weiss einblenden, passend zum Ausblenden in 3D */
html.r3d body{animation:r3d-in .25s ease-out .05s both}
@keyframes r3d-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ html.r3d body{animation:none} }
body[data-ov]:not([data-ov=""]):not([data-ov="project"]) .vsw .seg > .on{cursor:pointer}
.vsw .knob{position:absolute;top:0;bottom:0;left:0;background:var(--ink);border-radius:10em;pointer-events:none;opacity:0;transition:transform var(--t-mid) var(--e-out)}   /* Motion-Probe: nur verschieben (alle Felder gleich breit), Breite animiert nicht mehr */
.vsw.moving .knob{opacity:1}
.vsw.moving .seg > .on{background:none;color:var(--ink)}
.vsw.moving .seg > a{color:var(--bg)}
@media (hover:hover) and (pointer:fine){ .vsw .seg > a:hover{background:rgba(0,0,255,.08);border-radius:10em} }
@media (prefers-reduced-motion:reduce){ .vsw .knob{transition:none} }
/* Handy: oben YRD.Works links, Links rechts in einer Zeile; unten die feste Leiste wie auf dem Desktop */
@media (max-width:700px){
  .nav.cols{display:flex;justify-content:space-between;align-items:baseline}
  .vsw .vlab{display:none}
}
/* Wahl nach dem Intro */
#intro-w .ch-row{display:block}
#intro-w .ch{display:inline-block;transform-origin:50% 50%}
#intro-w .ch-sl{margin:0 .25em}
#intro-w .ch-cap{display:block;margin-top:1.4em;font-size:1.05rem;font-weight:420;letter-spacing:0;color:var(--ink-4)}
@media (prefers-reduced-motion:reduce){ #intro-w .ch:hover{animation:none} }
/* Handy (21.10. abends): Leiste reduziert, weniger und groessere Pillen. Links die Ansicht, rechts nur was die Seite braucht (Projekt: Next Project);
   kein Download Portfolio, kein Previous (bleibt per Ziehen am oberen Rand), kein All (YRD.Works oben links fuehrt zur Uebersicht), keine Status-Pille */
@media (max-width:700px){
  :root{--fb-h:3.4rem}
  .fbar{display:flex;justify-content:space-between;font-size:15px}
  .fbar .dlp,#fprev,#fall,.fbar .fb-c .fst{display:none!important}
  .fbar{column-gap:0}
  .fbar .fb-c{margin-left:auto}
  body:not([data-ov="impressum"]):not([data-ov="datenschutz"]) .fbar .fb-r{display:none}
  body[data-ov="impressum"] .fbar .fb-c,body[data-ov="datenschutz"] .fbar .fb-c{display:none}
  #fnext .lg{display:inline}
  body[data-ov="impressum"] .fbar .flegal a[data-for="impressum"],body[data-ov="datenschutz"] .fbar .flegal a[data-for="datenschutz"]{display:none}   /* nur die jeweils andere Rechtsseite als Pille */
  .fbar .fb-c .arw,.vsw .seg > .on,.vsw .seg > a,.fbar .flegal a{padding:.45em .95em .4em}
}

/* Kuratierte Auswahlen (Themen) ueber dem Raster: eine Zeile Links, die gewaehlte als blaue Pille; darunter Titel, Zahl und PDF der Auswahl */
.aw{display:flex;align-items:baseline;gap:1.4em;margin:0 0 2.2rem}
.aw-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 1.4em}
.aw-list a{display:inline-block;line-height:1;padding:.3em .8em .26em;margin:0 -.8em;border-radius:10em;color:var(--ink);white-space:nowrap;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.aw-list a[aria-current]{background:var(--ink);color:var(--bg);margin:0}
@media (hover:hover) and (pointer:fine){ .aw-list a:not([aria-current]):hover{background:rgba(0,0,255,.08)} }
.aw-head{margin:0 0 2.6rem}
.aw-head[hidden]{display:none}
.aw-head .proj-name{margin:0 0 .5em}
.aw-meta{display:flex;gap:1.4em;align-items:baseline;margin:0}
.aw-text{max-width:42em;margin:1em 0 0}
.grid .tile[hidden]{display:none}
@media (max-width:700px){
  .aw{display:block;margin:0 calc(-1 * var(--pad)) 1.6rem}
  .aw .aw-l{display:none}
  .aw-list{flex-wrap:nowrap;overflow-x:auto;padding:0 var(--pad);gap:1.2em;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .aw-list::-webkit-scrollbar{display:none}
  .aw-pdf{display:none}   /* Handy: kein Download (Ruben 21.10.) */
}
.aw-pdf{display:none!important}   /* Launch 30.10., Ruben 28.10.: PDF-Funktion vorerst aus, auch am Rechner (siehe index/index.html #pdf) */
body[data-aw]:not([data-aw=""]):not([data-ov]) #fall,body[data-aw]:not([data-aw=""])[data-ov=""] #fall{background:var(--bg);color:var(--ink);pointer-events:auto}   /* in einer Auswahl ist All Projects ein Ziel, nicht der Stand */

/* Handy: Menue oben rechts (Menu / Close) statt der Links About, Contact; klappt unter dem Knopf eine linksbuendige Liste auf: Projects, News, About, Contact, Impressum, Datenschutz */
.mm{display:none}
@media (max-width:700px){
  .nav .links,.head3 .head-links{display:none!important}
  .mm{display:block;position:fixed;top:calc(.9rem + env(safe-area-inset-top,0px));right:var(--pad);z-index:40;text-align:right}
  .mm-b{font:inherit;color:var(--ink);background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:inherit}
  .mm-l{margin-top:.6rem;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:9.5em;margin-left:auto;gap:.15em;background:var(--bg);padding:.9rem 1.1rem;margin-right:calc(-1 * min(1.1rem, var(--pad) - 6px));border-radius:18px;box-shadow:inset 0 0 0 1px var(--ink)}
  .mm-l[hidden]{display:none}
  .mm-l a{color:var(--ink);padding:.15em 0}
}
/* Handy-Menue als Ebene (22.10.): Kasten mittig mit leichtem Schatten, feste Breite, x mit Umrandung oben rechts schliesst; die Leiste unten bleibt unveraendert */
@media (max-width:700px){
  .mm-l{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;width:190px;min-width:0;padding:1.5rem 1.1rem 1.3rem;gap:.35em;z-index:1;box-shadow:inset 0 0 0 1px var(--ink),0 6px 22px rgba(0,0,40,.16)}

  .mm-x{position:absolute;top:.55rem;right:.6rem;width:1.15em;height:1.15em;display:flex;align-items:center;justify-content:center;font-size:1.6em;line-height:1;color:transparent;background:none;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);padding:0;cursor:pointer;overflow:hidden}
  .mm-x::before,.mm-x::after{content:"";position:absolute;left:50%;top:50%;width:46%;height:1.5px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}   /* duennes x aus zwei Linien statt des fetten Zeichens */
  .mm-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
}

/* Handy (22.10.): unten rechts steht, wo man ist, als blau gefuellte Pille wie Overview / Walk in 3D: Uebersicht All Projects, About, News, Contact, Impressum, Datenschutz;
   in einer Auswahl (Field, ?sel=) All Projects mit Umriss als Ziel, im Projekt weiter Next Project */
@media (max-width:700px){
  body:not([data-ov]) #fall,body[data-ov=""] #fall{display:inline-block!important}
  #fall .lg{display:inline}
  .fbar .fb-r{display:none!important}
  body[data-ov="impressum"] .fbar .fb-c,body[data-ov="datenschutz"] .fbar .fb-c{display:flex!important}
  body[data-ov="about"] .fbar .fb-c .fst[data-for="about"],body[data-ov="news"] .fbar .fb-c .fst[data-for="news"],body[data-ov="contact"] .fbar .fb-c .fst[data-for="contact"],body[data-ov="impressum"] .fbar .fb-c .fst[data-for="impressum"],body[data-ov="datenschutz"] .fbar .fb-c .fst[data-for="datenschutz"]{display:inline-block!important}
}

/* Handy (22.10.): Englisch nicht blass, dort wird mit DE / EN umgeschaltet und es steht immer nur eine Sprache da */
@media (max-width:700px){ .proj-bi .en,.proj-bi:has(.en:hover) .de{color:var(--ink)!important} }

/* Handy (22.10.): kein Index im Ansichtsschalter, am Handy nur 2D | 3D (Index wird dort selten gebraucht) */
@media (max-width:700px){ .vsw .seg > a[href$="index/index.html"]{display:none} }

/* Handy (22.10.): keine Field-Zeile ueber dem Raster (selten genutzt, braucht Platz); Field-Seiten und geteilte Auswahl bleiben erreichbar, dort steht weiter Titel und Zahl */
.aw{display:none!important}   /* (22.10.) auch am Desktop keine Field-Zeile auf der Startseite (Ruben); Fields stehen im Index */

/* Handy-Start (22.10.): hinter dem Intro steht das Raster in drei Spalten ohne Bildunterschriften (html.g3), danach gleitet es in die eine Spalte (Skript in intro.html); die Unterschriften blenden dabei ein (g3m) */
@media (max-width:700px){
  html.g3 .grid{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:calc((100vw - 2 * var(--pad)) * .28 / 9.56); row-gap:calc((100vw - 2 * var(--pad)) * .9 / 9.56)}   /* Abstaende genau wie das Raster in 3D am Handy (FX, FZ in projektraum.src.js), damit 2D und 3D deckungsgleich stehen */
  html.g3 .tile .caption{display:none}
  .tile .caption{transition:opacity var(--t-slow) var(--e-out)}
  html.g3m .tile .caption{opacity:0}
}

/* Handy (22.10.): beim Wechsel aus 2D blendet das Dreierraster in 3D schnell aus (dann beginnt die Fahrt) */
html.g3 #intro.quiet{transition:opacity .7s ease, visibility 0s linear .7s}   /* Handy: Ueberblendung vom Raster in den Walk */

/* Handy (22.10.): Schalter List | Overview rechts in der Leiste der Uebersicht (statt All Projects): eine Spalte oder drei, gewaehlt blau gefuellt wie Walk | Overview in 3D */
.lmode{display:none}
.lmode{gap:0;line-height:1;background:var(--bg);border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink)}
.lmode button{font:inherit;display:block;padding:.45em .95em .4em;border:0;border-radius:10em;background:none;color:var(--ink);line-height:1;cursor:pointer;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
html:not(.g3) .lmode [data-l="list"],html.g3 .lmode [data-l="ov"]{background:var(--ink);color:var(--bg)}
@media (max-width:700px){
  body:not([data-ov]):not([data-aw]) .lmode,body:not([data-ov])[data-aw=""] .lmode,body[data-ov=""]:not([data-aw]) .lmode,body[data-ov=""][data-aw=""] .lmode{display:inline-grid}
  body:not([data-ov]):not([data-aw]) #fall,body:not([data-ov])[data-aw=""] #fall,body[data-ov=""]:not([data-aw]) #fall,body[data-ov=""][data-aw=""] #fall{display:none!important}
}

/* Handy (22.10.): Ladeanzeige beim Wechsel zwischen 2D und 3D (in 3D im Intro, in 2D in #ld2): Wuerfel aus gleich starken blauen Linien, durchsichtig, verdeckte Kanten gestrichelt (ohne Perspektive, also isometrisch), dreht sich von der Vorderansicht (flaches Quadrat, 2D)
   in die Isometrie (3D) und weiter in die naechste Vorderansicht; erscheint sofort und bleibt mindestens 2 s, damit es nicht nach einem Fehler aussieht */
.ld3{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;opacity:0;animation:ld3in .25s ease forwards;pointer-events:none}   /* sofort da, dreht mindestens 2 s; gezeichnet als SVG von yrdCube (site.js, 3d/vorlage.html) */
.ld3 svg{display:block;overflow:visible;width:48px!important;height:48px!important;max-width:none}
@keyframes ld3in{to{opacity:1}}
/* Testrunde 24.10., Ruben: Wuerfel mit dezenter Prozentanzeige auf weisser Flaeche (auch ueber dem Platzhalter-Raster in 3D) */
.ldw{position:absolute;left:50%;top:50%;width:104px;height:116px;margin:-58px 0 0 -52px;background:var(--bg);border-radius:16px;pointer-events:none;z-index:3}
.ldw .ld3{top:44%}
.ld3p{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;line-height:1;font-weight:420;color:var(--ink-4);font-variant-numeric:tabular-nums;letter-spacing:.02em}
#ld2{position:fixed;inset:0;z-index:45;background:var(--bg);transition:opacity var(--t-mid) var(--e-in),visibility 0s linear var(--t-mid)}
#ld2.weg{opacity:0;visibility:hidden}
html.ld2pre main{visibility:hidden}   /* bis die Ladeanzeige steht (site.js) */

/* Handy (22.10.): YRD.Works steht immer an derselben Stelle: die feste Kopfzeile liegt ueber den Ebenen (Projekt, About ...), deren eigenes YRD.Works ist unsichtbar und bewegt sich nicht mehr beim Weiterziehen oder Zurueckwischen */
@media (max-width:700px){
  .nav{z-index:30}
  .overlay .head3 [data-home]{visibility:hidden}
}

/* Desktop (22.10., Probe): Schalter Project | Overview rechts in der Leiste, auf der Uebersicht und im Projekt; ersetzt dort All Projects in der Mitte */
.pmode{display:none;gap:0;line-height:1;background:var(--bg);border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink)}
.pmode button{font:inherit;display:block;padding:.3em .8em .26em;border:0;border-radius:10em;background:none;color:var(--ink);line-height:1;cursor:pointer;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
@media (hover:hover) and (pointer:fine){ .pmode button:hover{background:rgba(0,0,255,.08)} }
body[data-ov="project"] .pmode [data-p="proj"],body:not([data-ov]) .pmode [data-p="ov"],body[data-ov=""] .pmode [data-p="ov"]{background:var(--ink);color:var(--bg)}
@media (min-width:701px){
  body:not([data-ov]):not([data-aw]) .pmode,body:not([data-ov])[data-aw=""] .pmode,body[data-ov=""]:not([data-aw]) .pmode,body[data-ov=""][data-aw=""] .pmode,body[data-ov="project"]:not([data-aw]) .pmode,body[data-ov="project"][data-aw=""] .pmode{display:inline-grid}
  body:not([data-ov]):not([data-aw]) #fall,body:not([data-ov])[data-aw=""] #fall,body[data-ov=""]:not([data-aw]) #fall,body[data-ov=""][data-aw=""] #fall,body[data-ov="project"]:not([data-aw]) #fall,body[data-ov="project"][data-aw=""] #fall{display:none!important}
}

/* (22.10.) Umschalter gleich gebaut: alle Felder eines Schalters gleich breit (so breit wie das laengste Wort), Schrift mittig;
   so steht z. B. Walk genau in der Mitte zwischen Project und Overview, auch wenn eines davon blau gefuellt ist */
.vsw .seg,#navmode .seg{display:inline-grid!important;grid-auto-flow:column;grid-auto-columns:1fr}
.lmode,.pmode{grid-auto-flow:column;grid-auto-columns:1fr}
.vsw .seg > .on,.vsw .seg > a,.lmode button,.pmode button,#navmode .seg button{text-align:center}

/* Suche in der Leiste (suche.js, Ruben 22.10.): Lupe als Pille rechts neben 2D | 3D | Index, klappt zum Feld auf; nur am Desktop */
.fbar .fb-l{display:flex;align-items:center;gap:.6em}
.srch{display:flex;align-items:center;gap:.5em;pointer-events:auto;margin-left:.6em}
.fbar .srch{margin-left:0}
.srch .sb{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:.3em .8em .26em;border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg);color:var(--ink);border:0;cursor:pointer;font:inherit;transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.srch .sb svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.srch.active .sb{background:var(--ink);color:var(--bg)}
@media (hover:hover) and (pointer:fine){ .srch:not(.active) .sb:hover{background:rgba(0,0,255,.08)} }
.srch .sf{display:flex;align-items:baseline;gap:.4em}
.srch .sf[hidden]{display:none}
.srch input{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-4);border-radius:0;padding:.1em 0;width:11em;outline:none;-webkit-appearance:none;appearance:none}
.srch input::placeholder{color:var(--ink-4)}
.srch input::-webkit-search-cancel-button{display:none}
.srch .sn{color:var(--ink-4);font-variant-numeric:tabular-nums;min-width:1.2em}
.srch .qx{font:inherit;color:var(--ink);background:none;border:0;padding:0 .2em;cursor:pointer;line-height:1}
@media (max-width:700px){ .srch{display:none!important} }
/* Suche oben (POS 'oben' in suche.js): als Wort vor About, beim Suchen eine weisse Pille mit Feld, Trefferzahl und × */
.nav .srch-top{display:inline-flex;vertical-align:baseline;margin:0;gap:0;white-space:nowrap}
.srch-top .sb{all:unset;cursor:pointer;color:var(--ink);display:inline-block;transform-origin:0 50%}
.srch-top.open .sb{display:none}
.srch-top .sf{align-items:baseline;gap:.5em;background:var(--bg);border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);padding:.12em .3em .1em .75em;margin:-.12em 0}
.srch-top input{border-bottom:0;width:9em;padding:0}

/* News als Blog: Zeitachse links, eine Lesespalte rechts, Beitraege durch Haarlinien getrennt.
   Bewusst ohne die Projekt-Signaturen (horizontaler Bildstreifen, DE/EN nebeneinander). */
#news{--hw:min(calc(min(66vh, 33vw) * 1.5), 100%)}
#news .legal-text{max-width:none; width:100%}
.news-top{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1.2em; border-bottom:1px solid var(--line)}
.news-n{color:var(--ink-4)}
.news-lang{display:inline-flex; gap:.4em}
.news-lang button{font:inherit; color:var(--ink); background:var(--bg); border:0; cursor:pointer; line-height:1; padding:.3em .8em .26em; border-radius:10em; box-shadow:inset 0 0 0 1px var(--ink); transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.news-lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
@media (hover:hover) and (pointer:fine){ .news-lang button[aria-pressed="false"]:hover{background:rgba(0,0,255,.08)} }
.post{display:grid; grid-template-columns:minmax(10em,1fr) var(--hw) minmax(0,1fr); column-gap:1rem; padding:2.4em 0 4.8em; border-bottom:1px solid var(--line)}
.post-meta{display:flex; flex-direction:column; gap:.3em; align-self:start; position:sticky; top:4.5rem; padding-top:.35em}
.post-meta time{font-size:1.3rem; font-weight:550; font-variant-numeric:tabular-nums}
.post-tags{display:flex; flex-wrap:wrap; gap:.4em; margin-top:.8em}
.post-tags span{display:inline-block; line-height:1; padding:.3em .7em .26em; border-radius:10em; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-4)}
#news .post-title{font-size:2.2rem; font-weight:550; line-height:1.08; letter-spacing:-.01em; margin:0 0 .8em; text-wrap:balance}
.post-hero{margin:0}
.post-hero img{display:block; width:100%; height:auto}
.post-text{margin-top:2.4em}
.post-text p{margin:0; text-wrap:pretty} .post-text p + p{margin-top:1.2em}
.post-row{display:flex; gap:1rem; margin-top:2.4em}
.post-row + .post-row{margin-top:1rem}
/* Testrunde 23.10., Ruben: Fotocredits klein am Ende des Werktexts (2D, 3D) und unter den Bildern eines News-Beitrags */
.proj-bi p.credit{grid-column:1 / -1; text-align:center; margin:1.2em 0 0; font-size:.72em; line-height:1.3; font-style:normal; color:var(--ink-4)}
.post-body .post-credit{margin:1.6rem 0 0; text-align:center; font-size:.72em; line-height:1.3; color:var(--ink-4)}
.post-row figure{margin:0; min-width:0}
.post-row img{display:block; width:100%; height:auto}
/* Testrunde 29.10. (Ruben): Englisch unter dem Deutschen, kursiv, in derselben Lesespalte; keine Labels, kein Umschalter */
#news .post-title .en{display:none}
#news .post-text .en{font-style:italic; margin-top:1.2em}
@media (hover:hover) and (pointer:fine){ #news .post-text .de,#news .post-text .en{transition:color var(--t-fast) var(--e-out)} #news .post-text .en{color:rgba(0,0,255,.3)} #news .post-text:has(.en:hover) .en{color:var(--ink)} #news .post-text:has(.en:hover) .de{color:rgba(0,0,255,.3)} }   /* wie bei den Projekten: Englisch blass, beim Darueberfahren voll */
/* Bilder eines Beitrags: Klick zeigt sie gross */
.post-body figure img{cursor:zoom-in}
#nlb{position:fixed; inset:0; z-index:60; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; cursor:zoom-out; opacity:0; transition:opacity var(--t-fast) var(--e-out)}
#nlb.on{opacity:1}
#nlb .nlb-f{position:relative; z-index:1; cursor:default; line-height:0}
#nlb img{max-width:min(78vw,1400px); max-height:78vh; width:auto; height:auto; object-fit:contain; display:block}
#nlb .nlb-n{position:absolute; left:50%; bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); color:var(--ink-4)}
#nlb .nlb-a{all:unset; position:absolute; top:0; bottom:0; width:50%; cursor:pointer}
#nlb .nlb-a[data-d="-1"]{left:0} #nlb .nlb-a[data-d="1"]{right:0}
#nlb .nlb-x{all:unset; box-sizing:border-box; position:absolute; top:.8rem; right:.8rem; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); font-size:1.5rem; line-height:2.3rem; text-align:center; cursor:pointer}
@media (hover:hover) and (pointer:fine){ #nlb .nlb-x:hover{background:#ebebff} }
@media (max-width:700px){ #nlb img{max-width:calc(100vw - 2 * var(--pad)); max-height:80vh} #nlb .nlb-x{top:.5rem; right:.5rem} }
/* News, About, Contact (Ruben 29.10.): Leiste bleibt; links Back to Projects statt des Ansichtsschalters, in der Mitte nur die offene Seite (blau gefuellt), keine Suche */
.fbar .fback{display:none}
.fbar .fb-l{display:flex;align-items:center;gap:.6em}
:is(body[data-ov="news"],body[data-ov="about"],body[data-ov="contact"]) .fbar .fb-l,.fbar .fb-l:has(> .vsw[hidden]){margin-bottom:0}   /* Back-Pille auf derselben Hoehe wie die Pillen in der Mitte (der Schalter sitzt optisch 5 px hoeher) */
:is(body[data-ov="news"],body[data-ov="about"],body[data-ov="contact"]) .fbar .fback{display:inline-block}
:is(body[data-ov="news"],body[data-ov="about"],body[data-ov="contact"]) :is(.fbar .fb-l .vsw,#fall,#srch){display:none}
.fback{line-height:1;padding:.3em .8em .26em;border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg);color:var(--ink);white-space:nowrap;transition:background var(--t-fast) var(--e-out)}
@media (hover:hover) and (pointer:fine){ .fback:hover{background:rgba(0,0,255,.08); animation:none} }   /* wackelt nicht */
@media (max-width:700px){
  .post{grid-template-columns:1fr; padding:1.8em 0 3.6em}

  .post-meta{position:static; flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:.8em; margin-bottom:1em}
  .post-meta time{font-size:inherit}
  .post-tags{margin-top:0}
  #news .post-title{font-size:1.9rem}
  .post-row{gap:.5rem} .post-row + .post-row{margin-top:.5rem}
}

/* Menue oben rechts (Ruben 23.10.): der gewaehlte Punkt (About, News, Index, Contact) ist unterstrichen */
body[data-ov="about"] :is(.nav .links,.head-links) :is(a[href$="about/"],a[href$="#about"]),
body[data-ov="news"] :is(.nav .links,.head-links) :is(a[href$="news/"],a[href$="#news"]),
body[data-ov="contact"] :is(.nav .links,.head-links) :is(a[href$="contact/"],a[href$="#contact"]),
:is(.nav .links,.head-links) a[aria-current="page"]{text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}

/* Testrunde 23.10., Ruben: der Link YRD.Works oben links war so breit wie seine Rasterspalten (bis zur Mitte) und lag unter dem
   Projekttitel oben mittig; ein Klick auf den Titel fuehrte deshalb in die Overview. Jetzt nur so breit wie das Wort */
.nav .home,.head3 > a[data-home]{justify-self:start; width:max-content}

/* Testrunde 23.10., Ruben (iPhone, iOS 26): die Seite liegt auch unter der durchsichtigen Adressleiste; dort schaute ueber der
   Projektansicht die Uebersicht durch. Ist ein Projekt offen, blendet die Uebersicht nach dem Einblenden aus, beim Schliessen sofort ein */
main{transition:visibility 0s}
body[data-ov]:not([data-ov=""]) main{visibility:hidden; transition:visibility 0s linear .85s}   /* [nur Repo 23.10.] alle Ebenen (Projekt, About, News, Contact ...), nach dem Einblenden */
html.intro-on main{visibility:hidden}   /* [nur Repo 23.10.] Intro: unter der unteren Leiste schaute ein Foto durch; mit dem Ausblenden des Intros ist die Uebersicht sofort da */

/* [nur Repo 23.10.] Geteilte Auswahl: Einleitung und Knopf zu allen Arbeiten */
.aw-sh{margin:1.2em 0 0; max-width:42em}
.aw-sh[hidden]{display:none}
.aw-sh p{margin:0 0 .6em}
.aw-sh .aw-sh-en{font-style:italic; color:var(--ink-4)}
.aw-sh-b{display:inline-block; margin-top:.6em; padding:.45em 1em .4em; border:1px solid var(--ink); border-radius:10em; color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .aw-sh-b:hover{background:var(--ink); color:var(--bg)} }

/* ---------- Motion-Probe 26.10. (Skills ui-ux-pro-max / web-design-guidelines) ---------- */
/* Kontakt: statt Wackeln rueckt der Pfeil beim Darueberfahren ein Stueck nach rechts (zeigt, wohin es geht) */
.contact-list a::before{transition:transform var(--t-fast) var(--e-out)}
@media (hover:hover) and (pointer:fine){ .contact-list a:hover::before{transform:translateX(.25em)} }
/* Pfeile am Bildzaehler: Rueckmeldung ueber die Farbe statt Wackeln */
.proj-count .gp{transition:opacity var(--t-fast) var(--e-out)}
@media (hover:hover) and (pointer:fine){ .proj-count .gp:not(:disabled):hover{opacity:.55} }
/* Suchfeld: sichtbarer Fokus (vorher outline:none ohne Ersatz) */
.srch input:focus-visible{border-bottom-color:var(--ink); box-shadow:0 1px 0 0 var(--ink)}
/* Kachel -> Projekt: das Vorschaubild waechst zum ersten Bild der Strecke und zurueck (View Transitions, site.js).
   Waehrend des Uebergangs blendet die Ebene nicht selbst ein, das uebernimmt die Ueberblendung des Uebergangs */
html.vt-on .overlay{transition:none!important}
html.vt-on main{transition:none!important}
::view-transition-group(yrd-hero){animation-duration:var(--t-slow); animation-timing-function:var(--e-out)}
html.vt-zu::view-transition-group(yrd-hero){animation-duration:calc(var(--t-slow) * .7); animation-timing-function:var(--e-move)}
::view-transition-old(yrd-hero),::view-transition-new(yrd-hero){height:100%; width:100%; object-fit:cover; overflow:clip}
html.vt-on::view-transition-old(root),html.vt-on::view-transition-new(root){animation-duration:var(--t-mid)}
html.vt-zu::view-transition-old(root),html.vt-zu::view-transition-new(root){animation-duration:calc(var(--t-mid) * .7)}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} }

/* Testrunde 27.10., Ruben: am Handy langer Werktext erst zur Haelfte und unten ausgeblendet, "Weiterlesen" klappt auf (kurz() in site.js);
   darunter wieder der Pfeil mit dem Namen des naechsten Projekts, damit man sieht, dass es nach unten weitergeht */
@media (max-width:700px){
  .proj-bi.zu > .de,.proj-bi.zu > .en{max-height:var(--zh);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}
  .proj-bi .mehr{justify-self:start;font:inherit;font-style:normal;color:var(--ink);background:var(--bg);border:0;border-radius:10em;box-shadow:inset 0 0 0 1px var(--ink);padding:.45em .95em .4em;line-height:1;margin-top:-.4em;cursor:pointer;touch-action:manipulation}
  .proj-bi .mehr .en{font-style:normal}
  .proj-bi.zu .credit{display:none}
  #project.is-proj .proj-nx{display:block;margin-top:3.6em}
}

/* Launch 30.10.2026: groessere Tippflaechen am Handy (mind. 44 px hoch), Optik unveraendert; kein Doppeltipp-Zoom-Warten */
@media (max-width:700px){
  a,button{touch-action:manipulation}
  .mm-b,.proj-count .gp,.fbar .fb-c .arw,.vsw .seg > a,.fbar .flegal a,#ovlegal a,.lang-sw button{position:relative}
  .mm-b::after,.proj-count .gp::after,.fbar .fb-c .arw::after,.vsw .seg > a::after,.fbar .flegal a::after,#ovlegal a::after,.lang-sw button::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  .mm-b::after{left:-12px;right:-12px}
  .mm-l a{position:relative}
  .mm-l a::after{content:"";position:absolute;left:-.6em;right:-.6em;top:-.2em;bottom:-.2em}
}

/* News-Entwurf ausblenden (article.post mit hidden), 29.10.2026 */
.post[hidden]{display:none!important}

/* Flattersatz (29.10.2026): Silbentrennung in Werk-, News- und About-Texten, nur bei langen Woertern (mind. 8 Zeichen, 4 vor und 4 nach dem Trennstrich), hoechstens 2 Trennungen in Folge */
.proj-bi p,.post-text p,.legal-text p{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;-webkit-hyphenate-limit-lines:2;hyphenate-limit-lines:2;overflow-wrap:break-word}