/* ypi-welten – Startseite „Welten“: Jede Welt zeigt ihr Bild in voller Breite und voller Höhe (2:3, unbeschnitten, scharf), darauf frei
   platziert – ohne Kachel – der Welten-Satz (Kennzeichnung „NN / Weltname“ und der Satz der Welt, Welt 01 mit Unterzeile) und sieben
   einzelne Dienste-Zeilen „Satz – Bereich“ (je Welt eigene Sätze, jede Zeile ein Link auf /leistungen#…), über die ganze Bildhöhe verteilt.
   Position, Textfarbe und Buchstaben-Folie je Welt, Block und Zeile sind gemessen (Pillow, BERICHT-UMBAU.md) und stehen in reise.js; das
   Skript setzt sie als Variablen (--x, --y, --b) und Klassen (ist-hell, ist-dunkel, ist-folie, rechts-buendig). Unten rechts auf dem Bild die
   Rechtslinks, fest unten rechts die Welten-Leiste. Desktop: Seitenhöhe = Bildhöhe, Scroll-Zoom; mobil (bis 768 px): Bild in voller Breite
   ohne Bänder, darunter Rechtslinks und Welten-Leiste. Schutzregel (reise.js, kollisionenLoesen): nach dem Laden, nach jedem Weltwechsel und
   bei jeder Größenänderung werden Kopfzeile, Welten-Satz, Zeilen, Rechtslinks und Leiste gegeneinander geprüft; was sich überschneidet oder
   näher als 24 px liegt, wird nach unten (bzw. am Bildende nach oben) verschoben – bei jeder Fensterbreite. */
/* Schriften, selbst gehostet (schriften/, SIL OFL, Latin-Dateien von fonts.google.com unverändert, weil kein Subsetting-Werkzeug vorhanden):
   Fraunces (Variable Font, 400–600) für Überschriften und die Sätze, Inter (Variable Font, 400–600) für alles andere; font-display: swap.
   Ersatzschriften Georgia/Arial mit size-adjust (mittlere Zeichenbreite gleich) und denselben Vertikalmetriken wie die Webschrift
   (ascent/descent/line-gap-override auf beiden), damit beim Nachladen nichts springt. Werte per Canvas gemessen (BERICHT-UMBAU.md). */
@font-face{font-family:"Fraunces";src:url(schriften/fraunces-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Fraunces Ersatz";src:local("Georgia");size-adjust:104.86%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Inter";src:url(schriften/inter-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;ascent-override:97%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Inter Ersatz";src:local("Arial");size-adjust:105.94%;ascent-override:97%;descent-override:24%;line-gap-override:0%}
*{box-sizing:border-box}html{scroll-behavior:auto}
body{margin:0;background:var(--grundfarbe,#6e5f53);color:#172c30;font-family:"Inter","Inter Ersatz",Arial,Helvetica,sans-serif}
[hidden]{display:none!important}
button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit;cursor:pointer}button:disabled{cursor:wait}
:is(a,button,input,textarea,select):focus-visible{outline:2px solid currentColor;outline-offset:2px}
header a:focus-visible{outline-color:#172c30;outline-width:3px}
section:focus,footer:focus{outline:none}

/* Welt-Kasten: genau so groß wie das Bild (Seitenverhältnis 2:3, volle Breite), alle Texte liegen darin in % des Bildes.
   Desktop: die Szene ist so hoch wie das Bild (Seitenhöhe = Bildhöhe; reise.js setzt die gemessene Höhe als --bildhoehe für den Zoom-Bereich). */
.scene{position:relative;isolation:isolate;padding:0}
.welt{position:relative;width:100%;aspect-ratio:1024/1536;isolation:isolate}
/* Bildrahmen: overflow hidden; darin das Bild, das beim Scrollen langsam einzoomt: transform: scale() von 1,00 am Seitenanfang bis 1,08 am
   Bildende (transform-origin 50 % 30 %). Bevorzugt per CSS-Scroll-Timeline (animation-timeline: scroll(root), animation-range bis zu dem
   Scrollstand, an dem das Bildende den unteren Fensterrand erreicht); ohne Unterstützung setzt reise.js die Skalierung per requestAnimationFrame.
   Kein Zoom bei prefers-reduced-motion. Texte und Rechtslinks liegen außerhalb des Rahmens und skalieren nicht mit. */
.bildrahmen{position:absolute;inset:0;overflow:hidden;z-index:-1}
.artwork{display:block;width:100%;height:100%;transform-origin:50% 30%;will-change:transform}
@keyframes hineinzoomen{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes hineinzoomen-mobil{from{transform:scale(1)}to{transform:scale(1.04)}}
@supports (animation-timeline:scroll()){
.artwork{animation:hineinzoomen linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--bildhoehe,150vw) - 100vh)}
}
@media(prefers-reduced-motion:reduce){.artwork{animation:none!important;transform:none!important}}
header{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 48px;font-size:11px;letter-spacing:.16em}
header a{font-size:14px;font-weight:700;text-decoration:none;color:#172c30;background:rgba(244,241,234,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:999px}
/* Marke in der Kopfzeile: Ypsilon-Pi-Zeichen als Inline-SVG (22 px hoch) in der Textfarbe der Wortmarke (currentColor), 10 px Abstand, mittig zur Schrift. */
.marke{display:inline-flex;align-items:center;gap:10px}.zeichen{height:22px;width:auto;flex:0 0 auto}

/* Welten-Satz: frei auf dem Bild (Desktop im gemessenen Feld des Rasters 2 × 4, Breite 46 %; mobil an --x/--y mit Breite --b).
   Farbklassen: ist-hell (Text #f6f3ec, Schatten 0 2px 12px schwarz 45 %) oder ist-dunkel (Text #161b20, Schatten weiß 50 %) und ist-folie
   (Buchstaben-Folie nur am Text: Folienfarbe der Welt mit Alpha 0,45, box-decoration-break clone, 0.1em 0.3em, Radius 8 px, blur 6 px). */
.block{position:absolute;left:var(--x,3.333%);top:var(--y,4.444%);width:var(--b,46%);margin:0;z-index:1;transition:opacity .5s ease-out}
.scene.wechsel .block,.scene.wechsel .dienste{opacity:0;transition:none} /* während des Weltwechsels: Texte der neuen Welt erst, wenn die alte fast verschwunden ist */
.dienste{transition:opacity .5s ease-out}
@media(min-width:769px) and (max-width:1100px){.block{width:max(var(--b,46%),52%)}}
.block.rechts-buendig{left:auto;right:calc(100% - var(--x,94%));text-align:right}
.ist-hell{color:#f6f3ec;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.ist-dunkel{color:#161b20;text-shadow:0 2px 12px rgba(255,255,255,.5)}
.ist-folie .wort{background:rgba(var(--kachel-rgb,40,40,40),.45);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;border-radius:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-left:-.3em}
.rechts-buendig.ist-folie .wort{margin-left:0;margin-right:-.3em} /* die Folie beginnt an der Textkante, die Buchstaben bleiben an der Zeilenkante */
.kennung{font-size:12px;line-height:1.5;letter-spacing:.12em;margin:0 0 16px}
h1{font-family:"Fraunces","Fraunces Ersatz",Georgia,serif;font-weight:400;font-size:clamp(30px,3.9vw,56px);line-height:1.05;letter-spacing:-.03em;max-width:11em;margin:0}
.unterzeile{font-size:clamp(15px,1.3vw,18px);line-height:1.5;max-width:34em;margin:20px 0 0}
.unterzeile .wort{padding-top:.15em;padding-bottom:.15em}

/* Sieben Dienste-Zeilen „Satz – Bereich“: jede Zeile einzeln an --x/--y (x: linke Kante; rechts-buendig: x ist die rechte Kante), höchstens
   --b breit (Standard 46 %); der Bereich samt Halbgeviertstrich bricht als Ganzes auf eine zweite Zeile um, wenn die Breite nicht reicht.
   Satz in Fraunces 24 px, Strich und Bereich in Inter 20 px mit Laufweite 0.04em in derselben Farbe. Die ganze Zeile ist der Link;
   Hover/Fokus: Unterstrich 2 px. Erscheinen beim Scrollen (reise.js, IntersectionObserver): Zeile ohne Klasse da ist unsichtbar und 12 px
   tiefer, mit da blendet sie in 500 ms ein (kleiner Versatz je Zeile); ohne Skript oder bei reduced motion sind alle Zeilen sofort sichtbar. */
.dienste{position:absolute;inset:0;z-index:1;pointer-events:none}
.zeilen{list-style:none;margin:0;padding:0}
.zeile{position:absolute;left:var(--x,6%);top:var(--y,50%);max-width:max(var(--b,46%),min(320px,88%));margin:0;pointer-events:auto;line-height:1.3}
.zeile.rechts-buendig{left:auto;right:calc(100% - var(--x,94%));text-align:right}
.zeile a{text-decoration:none}
.zsatz{font-family:"Fraunces","Fraunces Ersatz",Georgia,serif;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.02em}
.bereich{font-size:clamp(16px,1.4vw,20px);letter-spacing:.04em;white-space:nowrap}
.zeile a:hover .wort,.zeile a:focus-visible .wort{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.zeile a:focus-visible{outline:none}
html.js .zeile{opacity:0;transform:translateY(12px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i,0)*60ms)}
html.js .zeile.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .zeile{opacity:1;transform:none;transition:none}}

/* Folie der Welt (reise.js setzt --kachel-rgb, --kachel-alpha, --grundfarbe und die Klasse welt--hell am body): für die Welten-Leiste und
   die Buchstaben-Folie; Textfarbe der Welt für Leiste und Rechtslinks. */
body{--text-welt:#f6f3ec;--text-welt-rgb:246,243,236;--schatten-welt:0 1px 2px rgba(0,0,0,.45)}
body.welt--hell{--text-welt:#161b20;--text-welt-rgb:22,27,32;--schatten-welt:0 1px 2px rgba(255,255,255,.5)}
.kachel{background:rgba(var(--kachel-rgb,40,40,40),var(--kachel-alpha,.3));-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border:1px solid rgba(255,255,255,.14);color:var(--text-welt);text-shadow:var(--schatten-welt);line-height:1.6}

/* Rechtslinks und Angebotszeile auf jeder Welt: ohne Kachel, unten rechts auf dem Bild, 24 px vom rechten Bildrand, Unterkante 104 px
   über dem unteren Bildrand (die feste Weltwechsel-Leiste belegt am Seitenende die unteren 24 + 58 px; darüber 22 px Luft), Textfarbe und
   Textschatten der Welt (gemessene Ausnahme unten). */
.rechts{position:absolute;right:24px;bottom:104px;margin:0;text-align:right;font-size:13px;line-height:1.5;color:var(--text-welt);text-shadow:var(--schatten-welt);z-index:1}
/* Gemessene Ausnahme (reise.js, rechtsInvers): liegt die Textfarbe der Welt an der Linkposition unter 4,5:1 (Welt 07 Riff 2,75:1, Welt 08 Fels 1,22:1),
   bekommen die Rechtslinks die andere Textfarbe mit ihrem Schatten. */
body.welt--hell .rechts--invers{color:#f6f3ec;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.rechts nav{display:block}.rechts a{text-underline-offset:3px}.rechts a:not(:first-child)::before{content:"·";display:inline-block;margin:0 8px}
.rechts p{font-size:13px;line-height:1.5;margin:0}

/* Weltwechsel-Leiste: unten rechts, schmale Folie (Folienregel der Welt über .kachel), Weltname in Serifenschrift,
   Pfeile ← → zur vorherigen/nächsten Welt, dazwischen zehn Punkte (aktiver gefüllt); Pfeiltasten wechseln die Welt. */
.welt-leiste{position:fixed;right:24px;bottom:24px;z-index:5;width:auto;max-width:calc(100% - 48px);display:flex;align-items:center;gap:16px;padding:8px 8px 8px 24px;border-radius:999px}
.welt-name{font-family:"Fraunces","Fraunces Ersatz",Georgia,serif;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.welt-punkte{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.welt-punkte button{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center}
.welt-punkte button::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor;transition:background .2s}
.welt-punkte button[aria-current="true"]::before{background:currentColor}
.welt-pfeil{width:40px;height:40px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:18px;line-height:1}
.welt-leiste button:disabled{opacity:.6}
.welt-leiste button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.outgoing{position:fixed;inset:0;z-index:4;overflow:hidden;pointer-events:none;background:var(--grundfarbe,#6e5f53);will-change:transform,opacity}
.outgoing main{position:absolute;left:0;width:100%}.outgoing .scene{position:relative}
.status{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Mobil (bis 768 px): das ganze Bild in voller Breite, ohne Bänder und ohne Rahmen. Hinter der Seite liegt fest das Bild der Welt selbst,
   weichgezeichnet und abgedunkelt (#hintergrund, reise.js setzt es), damit die Fläche unter dem Bild auf Handys nicht leer ist. Auf dem Bild
   liegen der Welten-Satz (Welt 01 ohne den Unterzeilen-Absatz) und alle sieben Dienste-Zeilen: je Welt verteilt wie am Desktop (dieselben
   Prozentpositionen) oder, wo lage.mobil.spalte gesetzt ist (Welt 07), als eine Spalte an lage.mobil.zeile; Schutzregel und Lesbarkeitsmessung
   wie am Desktop. Rechtslinks unter dem Bild, die Welten-Leiste fest am unteren Fensterrand.
   Statt des Scroll-Zooms zoomt das Bild nach dem Öffnen einer Welt in 6 s von 1,00 auf 1,04 (artwork--zoom), kein Zoom bei reduced motion. */
.hintergrund{display:none}
@media(max-width:768px){
.hintergrund{display:block;position:fixed;inset:-40px;z-index:-2;background:var(--grundfarbe,#6e5f53) center/cover no-repeat;filter:blur(22px) brightness(.72);transform:scale(1.08)}
body{background:transparent}
.welt{width:100%;aspect-ratio:1024/1536}
.artwork{animation:none;transform:none}
.artwork--zoom{animation:hineinzoomen-mobil 6s ease-out both}
header{padding:16px}
header a{font-size:13px;padding:7px 13px}
.block{width:var(--b,88%)}
.kennung{font-size:11px;margin-bottom:8px}
h1{font-size:clamp(26px,7vw,44px);max-width:none}
.unterzeile{display:none}
.dienste.spalte{inset:auto;left:var(--x,6%);top:var(--y,40%);width:var(--b,88%)}
.dienste.spalte.rechts-buendig{left:auto;right:calc(100% - var(--x,94%));text-align:right}
.dienste.spalte .zeile{position:static;max-width:none;margin:0 0 10px}
.dienste.spalte .zeile:last-child{margin-bottom:0}
.zeile{line-height:1.25}
.zsatz{font-size:clamp(14px,3.9vw,22px)}
.bereich{font-size:clamp(12px,3.3vw,18px)}
.ist-hell{text-shadow:0 1px 8px rgba(0,0,0,.45)}.ist-dunkel{text-shadow:0 1px 8px rgba(255,255,255,.5)}
.rechts{position:static;margin:0 16px;padding:16px 0 132px;text-align:center;font-size:12px;line-height:1.5;color:#f6f3ec;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.rechts p{font-size:12px;line-height:1.5}
body.welt--hell .rechts--invers{color:#f6f3ec;text-shadow:0 1px 2px rgba(0,0,0,.45)} /* unter dem Bild liegt der abgedunkelte Hintergrund, Text immer hell */
.welt-leiste{left:16px;right:16px;bottom:12px;max-width:none;flex-wrap:wrap;justify-content:space-between;gap:4px;padding:6px;border-radius:24px}
.welt-name{font-size:16px;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}
.welt-pfeil{width:36px;height:36px}
.welt-punkte{flex-basis:100%;justify-content:center;order:3}
.welt-punkte button{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}html.js .zeile{transition:none}}