/* iljakagan.de — erzeugt von seite_bauen.py. Nicht von Hand ändern. */

@font-face{
  font-family:'Commissioner';
  src:url('/schriften/comm_slnt_cyr.woff2') format('woff2-variations'),
      url('/schriften/comm_slnt_cyr.woff2') format('woff2');
  font-weight:100 900; font-stretch:100%; font-display:swap;
}

:root{
  /* Dieselben Werte wie die Kundengalerie. Eine Quelle, zwei Orte. */
  --grund:#101010;
  --tiefer:#0A0A0A;
  --bett:#1A1A1A;
  --text:#E8E6E3;
  --leise:#9A9A96;
  --linie:#6E6E6E;
  --rahmen:#F1EFEA;
  --rahmenbreite:.5rem;   /* Mindestmaß — Haarlinien flimmern auf dunklem Grund */
  --akzent:#4FBFB1;

  /* Glas. Kein Verlauf als Schmuck — eine Fläche, die das Dahinterliegende
     durchlässt, mit einer Lichtkante oben. Mehr braucht es nicht. */
  --glas:linear-gradient(180deg,rgba(241,239,234,.055),rgba(241,239,234,.016));
  --glas-rand:rgba(241,239,234,.10);
  --glas-kante:inset 0 1px 0 rgba(241,239,234,.14);
  --glas-schatten:0 24px 60px -32px rgba(0,0,0,.92);

  --schrift:'Commissioner',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gr-hero:clamp(2.5rem,6.4vw,5rem);
  --gr-titel:clamp(1.9rem,4.2vw,3.25rem);
  --gr-text:1.125rem;
  --gr-klein:1rem;
  --ziel:2.75rem;
  --kurve:cubic-bezier(.22,.61,.36,1);
  --dauer:.7s;
  --breite:78rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--schrift); font-size:var(--gr-text); line-height:1.62;
  font-weight:400; font-optical-sizing:auto; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--text);text-underline-offset:.28em;text-decoration-thickness:1px}
a:hover{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}

h1,h2,h3{margin:0;font-weight:200;letter-spacing:-.028em;line-height:1.03;
  text-wrap:balance}
h2{font-size:var(--gr-titel);line-height:1.06}
h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
p{margin:0}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.sprung{position:absolute;left:-9999px}
.sprung:focus{position:static;display:inline-flex;align-items:center;
  min-height:var(--ziel);margin:1rem;padding:0 1.25rem;
  background:var(--rahmen);color:#111;border-radius:3px;text-decoration:none}

/* --- Kopfleiste: die einzige klebende Fläche der Seite ------------------- */
header{position:sticky;top:0;z-index:40;
  background:var(--glas);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--glas-rand);box-shadow:var(--glas-kante)}
header .wrap{display:flex;align-items:center;gap:1rem;
  min-height:var(--ziel);padding-top:.5rem;padding-bottom:.5rem;flex-wrap:wrap}
.marke{font-weight:600;letter-spacing:-.02em;font-size:1.0625rem;
  text-decoration:none;display:flex;align-items:center;min-height:var(--ziel)}
.marke span{color:var(--leise);font-weight:300;margin-left:.6rem}
header nav{margin-left:auto;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
header nav a{display:inline-flex;align-items:center;min-height:var(--ziel);
  padding:0 .95rem;border-radius:99px;font-size:var(--gr-klein);
  text-decoration:none;color:var(--leise);border:1px solid transparent}
header nav a:hover{color:var(--text);border-color:var(--glas-rand)}
header nav a.tat{color:#0B1F12;background:#25D366;border-color:#25D366;
  font-weight:600;box-shadow:none}
header nav a.tat:hover{color:#0B1F12;background:#2FE874;border-color:#2FE874}

@media (max-width:37.5rem){
  header nav a:not(.tat){display:none}
  header .wrap{flex-wrap:nowrap}
}

/* --- Titelbild ---------------------------------------------------------- */
/* Der Titelbereich trägt jetzt auch die Übersicht — deshalb weniger Luft
   oben und unten: alle zehn Leistungen sollen ohne Scrollen dastehen. */
.hero{position:relative;min-height:min(88svh,50rem);display:flex;align-items:center;
  padding:3rem 0 2.5rem;overflow:hidden}
.hero-schein{position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:radial-gradient(58% 46% at 28% 34%,rgba(241,239,234,.14),transparent 70%);
  pointer-events:none}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{font-size:var(--gr-hero);max-width:19ch}
.hero p{margin-top:1.5rem;max-width:46ch;color:var(--leise);font-size:1.25rem}
.hero-tat{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}

/* --- Übersicht: die Ausstellungsliste ----------------------------------- */
.uebersicht{width:100%;margin-top:2rem;padding-top:1.1rem;
  border-top:1px solid rgba(241,239,234,.12)}
.uebersicht ul{list-style:none;margin:0;padding:0;display:grid;gap:0 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.uebersicht li{border-bottom:1px solid rgba(241,239,234,.07)}
.uebersicht a{display:flex;align-items:center;min-height:2.5rem;
  font-size:var(--gr-klein);color:var(--leise);text-decoration:none;
  transition:color .2s var(--kurve)}
.uebersicht a:hover{color:var(--text)}
/* Der Punkt wandert beim Zeigen nach rechts — die einzige Bewegung hier. */
.uebersicht a::after{content:"";width:.3rem;height:.3rem;border-radius:50%;
  background:var(--akzent);margin-left:auto;opacity:0;transform:translateX(-.4rem);
  transition:opacity .2s var(--kurve),transform .2s var(--kurve)}
.uebersicht a:hover::after{opacity:1;transform:none}
/* Ein Eintrag fuehrt auf eine eigene Seite statt an eine Stelle dieser Seite.
   Der Punkt steht dort dauerhaft — das ist der ganze Unterschied. */
.uebersicht .fuehrt a{color:var(--text)}
.uebersicht .fuehrt a::after{opacity:1;transform:none}
/* Auf dem Handy zwei Spalten statt zehn Zeilen — sonst steht die Übersicht
   nicht mehr im ersten Bild. Diese Regel MUSS hinter der Grundregel stehen:
   bei gleicher Spezifität gewinnt die spätere. */
@media (max-width:37.5rem){
  .uebersicht ul{grid-template-columns:1fr 1fr;column-gap:1.25rem}
  .uebersicht a{min-height:2.25rem;font-size:.9375rem}
  .uebersicht{margin-top:1.5rem}
}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--ziel);padding:0 1.5rem;border-radius:99px;
  font-size:var(--gr-klein);font-weight:500;text-decoration:none;border:1px solid var(--glas-rand);
  background:var(--glas);box-shadow:var(--glas-kante);color:var(--text);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .25s var(--kurve),color .25s var(--kurve),
             transform .25s var(--kurve)}
.knopf:hover{border-color:rgba(79,191,177,.55);color:var(--akzent);transform:translateY(-1px)}
/* WhatsApp trägt seine eigene Farbe — daran wird es erkannt, bevor der
   Text gelesen ist. #25D366 auf #0B1F12 misst 10,9:1. */
.knopf.wa{background:#25D366;color:#0B1F12;border-color:#25D366;font-weight:600;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.knopf.wa:hover{background:#2FE874;border-color:#2FE874;color:#0B1F12}
.knopf svg{width:1.15em;height:1.15em;flex:none}

/* --- Leistungen --------------------------------------------------------- */
.leistungen{padding:2rem 0 1rem}
.band{display:flex;align-items:baseline;gap:1.25rem;
  padding:5rem 0 2.5rem;flex-wrap:wrap}
.band h2{flex:none}
.band p{color:var(--leise);max-width:44ch}

.leistung{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:1fr;padding:clamp(3rem,7vw,6rem) 0;
  border-top:1px solid rgba(241,239,234,.07)}
.leistung:first-of-type{border-top:0}
.leistung h3{font-size:clamp(1.6rem,3vw,2.25rem);font-weight:200;letter-spacing:-.024em}
.leistung .zeile{margin-top:.85rem;color:var(--rahmen);font-size:1.1875rem;max-width:32ch}
.leistung .text{margin-top:1.15rem;color:var(--leise);max-width:52ch}
.leistung ul{margin:1.75rem 0 0;padding:0;list-style:none;display:flex;
  flex-wrap:wrap;gap:.5rem}
.leistung li{font-size:var(--gr-klein);color:var(--leise);
  padding:.45rem .9rem;border-radius:99px;border:1px solid var(--glas-rand);
  background:var(--glas)}

/* --- Das Bild: drei Lagen, die sich verschieden weit mitbewegen ---------- */
.bildfeld{width:min(100%,34rem)}
.bild{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;
  background:var(--tiefer);
  border:.5rem solid var(--rahmen);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.bild .lage{position:absolute;inset:-6%;width:112%;height:112%;
  object-fit:cover;will-change:transform;
  transition:transform .55s var(--kurve)}
.bild .fern {transform:translate3d(calc(var(--mx,0) * 6px), calc(var(--my,0) * 6px),0)}
.bild .mitte{transform:translate3d(calc(var(--mx,0) * 17px),calc(var(--my,0) * 17px),0)}
/* Die freigestellte Lage wandert am weitesten — das ergibt die Tiefe. */
.bild .nah  {transform:translate3d(calc(var(--mx,0) * 26px),calc(var(--my,0) * 26px),0)}
/* Leicht schief — redaktionell, nie im Arbeitsraster.
   nth-of-type, nicht nth-child: die Ueberschrift .band ist auch ein Kind und
   wuerde die Zaehlung verschieben. */
.leistung:nth-of-type(odd) .bild{transform:rotate(-1.1deg)}
.leistung:nth-of-type(even) .bild{transform:rotate(.9deg)}

@media (min-width:60rem){
  .leistung{grid-template-columns:1fr 1fr}
  .leistung:nth-of-type(even) .wort{order:2}
  .leistung:nth-of-type(even) .bildfeld{margin-left:auto}
}

/* --- Erscheinen beim Scrollen ------------------------------------------- */
/* Sichtbar ist der Grundzustand. Verborgen wird nur, wenn das Skript die
   Klasse `bewegung` gesetzt hat — also nachweislich läuft und einblenden wird.
   Ohne JavaScript, mit abgeschaltetem JavaScript oder wenn der Beobachter im
   Browser des Besuchers nicht anspringt, steht die Seite trotzdem da.
   Das ist keine Feinheit: der umgekehrte Weg liefert im Fehlerfall eine
   vollständig leere Seite aus. */
.auf{transition:opacity var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.bewegung .auf{opacity:0;transform:translateY(1.5rem)}
.bewegung .auf.da{opacity:1;transform:none}
.auf.v2{transition-delay:.09s}
.auf.v3{transition-delay:.18s}

/* --- Handlungsaufruf ---------------------------------------------------- */
.cta{position:relative;padding:clamp(4.5rem,10vw,9rem) 0;overflow:hidden;
  border-top:1px solid rgba(241,239,234,.07)}
.cta-schein{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(54% 64% at 40% 44%,rgba(79,191,177,.10),transparent 70%)}
.cta .wrap{position:relative;z-index:1}
/* Zwei Spalten: der Satz links, das Gesicht rechts. Erst ab 60rem —
   darunter steht das Porträt über dem Text, kleiner. */
.cta-satz{display:grid;gap:2.5rem;align-items:center}
@media (min-width:60rem){
  .cta-satz{grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:3.5rem}
  .cta-wort{order:1}
  .ich{order:2}
}

/* Das Porträt trägt denselben weißen Rahmen wie die Leistungsbilder —
   kein Auslaufen, keine Transparenz. Ein Bild an der Wand, keine Erscheinung.
   Der Unterschied zu den Leistungsbildern bleibt trotzdem lesbar: es steht
   gerade, während jene leicht geneigt sind. */
.ich{margin:0;position:relative}
.ich img{width:100%;height:auto;display:block;
  border:var(--rahmenbreite) solid var(--rahmen);border-radius:2px;
  outline:4px solid var(--bett);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.95)}
.ich figcaption{margin-top:.4rem;font-size:.9375rem;color:var(--leise);
  letter-spacing:.04em;text-transform:uppercase}
/* Auf dem Handy kleiner — bescheiden bleibt es über die Größe, nicht mehr
   über die weiche Kante. Diese Regel MUSS hinter der Grundregel stehen:
   bei gleicher Spezifität gewinnt die spätere. */
@media (max-width:37.5rem){
  .ich{max-width:13rem}
  .ich img{border-width:.375rem;outline-width:3px}
  .ich figcaption{font-size:.875rem}
}

.cta h2{max-width:20ch}
.cta p{margin-top:1.5rem;color:var(--leise);max-width:52ch}
.cta-tat{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.5rem}
.cta .hinweis{margin-top:1.75rem;font-size:var(--gr-klein);color:var(--leise);max-width:52ch}

/* --- Fuss --------------------------------------------------------------- */
footer{border-top:1px solid rgba(241,239,234,.07);
  padding:3rem 0 4rem;color:var(--leise);font-size:var(--gr-klein)}
footer .zeilen{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
footer nav{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:var(--ziel)}
footer a{color:var(--leise)}

/* --- Rechtstexte -------------------------------------------------------- */
.recht{padding:4rem 0 6rem;max-width:44rem}
.recht h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:2.5rem}
.recht h2{font-size:1.3rem;font-weight:600;letter-spacing:-.005em;margin:2.75rem 0 .85rem}
.recht p,.recht li{color:var(--leise);max-width:62ch}
.recht p+p{margin-top:.85rem}
.recht dl{margin:0}
.recht dt{color:var(--text);font-weight:500;margin-top:1rem}
.recht dd{margin:.2rem 0 0;color:var(--leise)}
.recht .luecke{color:var(--warn,#E3A867);border:1px dashed rgba(227,168,103,.5);
  padding:.75rem 1rem;border-radius:3px;display:block;margin-top:.35rem}
.recht ul{padding-left:1.15rem}
.recht .knopf{margin:.35rem .5rem .35rem 0}
.recht li+li{margin-top:.4rem}

/* --- Immobilien 360° ----------------------------------------------------
   Eine eigene Seite mit eigener, sehr schmaler Bedienleiste. Die Tour soll den
   Bildschirm haben; von der Hauptnavigation bleibt nur, was gebraucht wird —
   der Weg zurueck zur Startseite und der Weg zu mir.

   Die Platten in den Ecken der Buehne sind KEIN Schmuck: sie sind die
   Bedienung dieser Seite und liegen zugleich genau dort, wo der fremde
   Betrachter seine eigenen Zeichen setzt. Eine Flaeche, zwei Aufgaben. */
.leiste360{position:sticky;top:0;z-index:60;
  background:var(--glas);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--glas-rand);box-shadow:var(--glas-kante)}
.leiste360 .wrap{display:flex;align-items:center;gap:.75rem;
  min-height:var(--ziel);padding-top:.45rem;padding-bottom:.45rem}
.leiste360 .marke{font-size:1rem}
.leiste360 .wa-klein{margin-left:auto;display:inline-flex;align-items:center;
  gap:.5rem;min-height:2.35rem;padding:0 1rem;border-radius:99px;
  background:#25D366;color:#0B1F12;border:1px solid #25D366;
  font-size:.9375rem;font-weight:600;text-decoration:none}
.leiste360 .wa-klein:hover{background:#2FE874;border-color:#2FE874;color:#0B1F12}
.leiste360 .wa-klein svg{width:1.15em;height:1.15em;flex:none}

/* Nur oben und unten setzen — die Kurzform wuerde den seitlichen Rand von
   .wrap ueberschreiben und die Ueberschrift an den Bildschirmrand kleben. */
.kopf360{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(1.25rem,3vw,2rem)}
.kopf360 h1{font-size:clamp(2rem,4.6vw,3.5rem);max-width:16ch}
.kopf360 h1 em{font-style:normal;color:var(--akzent)}
.kopf360 .von{margin-top:1rem;font-size:.9375rem;color:var(--leise);
  letter-spacing:.14em;text-transform:uppercase}

/* --- Die Buehne --------------------------------------------------------- */
.buehne{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#000;border-radius:5px;
  border:1px solid rgba(241,239,234,.12);
  box-shadow:0 44px 100px -56px rgba(0,0,0,.95)}
/* Im Hochformat ist 16:9 ein Briefschlitz. Dort zaehlt die Hoehe des Geraets,
   nicht das Seitenverhaeltnis. */
@media (max-width:60rem){
  .buehne{aspect-ratio:auto;height:min(72svh,40rem)}
}
.buehne iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.buehne:fullscreen{border-radius:0;border:0;width:100vw;height:100vh;aspect-ratio:auto}
.buehne:-webkit-full-screen{border-radius:0;border:0;width:100vw;height:100vh}

/* Vorschaubild statt Rundgang: nichts Fremdes wird geladen, bevor jemand es
   will. Das spart den ersten Ladevorgang und haelt die Seite frei von einem
   Abruf, dem der Besucher nicht zugestimmt hat. */
.fassade{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;
  border:0;background:none;cursor:pointer;display:block;color:var(--text);
  font-family:inherit;opacity:1;transition:opacity .6s var(--kurve)}
.fassade.weg{opacity:0;pointer-events:none}
.fassade img{width:100%;height:100%;object-fit:cover;
  transition:filter .9s var(--kurve),transform 1.4s var(--kurve)}
/* Der Schleier ist kein Schmuck: unter dem Knopf steht ein Fenster mit
   Tageslicht, und heller Text auf hellem Glas ist nicht lesbar. */
.fassade .schleier{position:absolute;inset:0;
  background:radial-gradient(68% 58% at 50% 50%,rgba(8,8,8,.52),rgba(8,8,8,.88))}
.fassade .tat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  min-height:3.25rem;padding:0 1.7rem;border-radius:99px;
  background:var(--glas);border:1px solid rgba(241,239,234,.30);
  box-shadow:var(--glas-kante),0 24px 60px -28px rgba(0,0,0,.95);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  font-size:var(--gr-klein);font-weight:500;
  transition:border-color .25s var(--kurve),transform .25s var(--kurve)}
.fassade .tat svg{width:1.4em;height:1.4em;flex:none}
.fassade:hover .tat{border-color:rgba(79,191,177,.6);
  transform:translate(-50%,-50%) scale(1.035)}

/* --- Der Vorhang -------------------------------------------------------- */
/* Nach dem Antippen spielt der fremde Betrachter fuenf bis sieben Sekunden
   seine eigene Anfangsanimation. Statt sie zu zeigen, BLEIBT die Fassade
   stehen: das Vorschaubild wird weichgezeichnet, der Name blendet ein.
   Kein zusaetzliches Element, kein zweites Bild — dieselbe Flaeche, ein
   anderer Zustand. Sie bleibt bedienbar-sperrend, damit kein Fingertipp
   in den noch unsichtbaren Rundgang faellt. */
.buehne.laedt .fassade{cursor:default}
.buehne.laedt .fassade img{filter:blur(18px) saturate(.8);transform:scale(1.09)}
.buehne.laedt .fassade .schleier{background:rgba(8,8,8,.88)}
.buehne.laedt .fassade .tat{opacity:0;transform:translate(-50%,-50%) scale(.96)}
.fassade .schleier{transition:background .9s var(--kurve)}
.fassade .tat{opacity:1}

.vorhang{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  width:max-content;max-width:86%;opacity:0;pointer-events:none;
  transition:opacity .7s var(--kurve) .2s}
.buehne.laedt .vorhang{opacity:1}
.vorhang .name{font-size:clamp(.8125rem,2.4vw,1.0625rem);letter-spacing:.2em;
  text-transform:uppercase;color:var(--rahmen);line-height:1.5}
.vorhang .strich{position:relative;width:min(52vw,12rem);height:1px;
  background:rgba(241,239,234,.16);overflow:hidden}
.vorhang .strich::after{content:"";position:absolute;top:0;left:0;bottom:0;width:36%;
  background:linear-gradient(90deg,transparent,var(--akzent),transparent);
  animation:wandern 1.6s var(--kurve) infinite}
@keyframes wandern{from{transform:translateX(-110%)}to{transform:translateX(390%)}}

/* --- Die eigene Bedienung ueber der Tour -------------------------------- */
.rahmen360{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .7s var(--kurve)}
.buehne.laeuft .rahmen360{opacity:1}
/* Zwei weiche Baender oben und unten. Ohne sie saessen die Platten als
   Flicken auf dem Bild; mit ihnen sind sie der Rand eines Bildfensters. */
.saum{position:absolute;left:0;right:0;height:6rem}
.saum-oben{top:0;background:linear-gradient(180deg,rgba(8,8,8,.70),transparent)}
/* Schwaecher als oben: unten links liegt die Bedienung des Rundgangs, die
   soll lesbar bleiben. Das Band setzt nur die eigene Ecke ab. */
.saum-unten{bottom:0;background:linear-gradient(0deg,rgba(8,8,8,.50),transparent)}
/* GEMESSEN am 27.08. an der laufenden Tour, nicht geschaetzt:
     · oben links steht das fremde Wortzeichen, buendig in der Ecke;
     · unten links liegt die Bedienung des Rundgangs (Gehen, Puppenhaus,
       Grundriss, Messen) — die bleibt frei, sie wird gebraucht;
     · unten rechts sitzt ein Menue, das zu Hilfe und Bedingungen fuehrt.
   Deshalb kleben die eigenen Platten an den Ecken, statt frei zu schweben:
   eine Pille mit rundem Ende laesst genau die Ecke frei, in der das fremde
   Zeichen seinen rechten Winkel hat. Nur die INNERE Ecke ist rund. */
.platte{position:absolute;pointer-events:auto;display:inline-flex;
  align-items:center;gap:.55rem;min-height:3.25rem;padding:0 1.4rem;
  font-size:.9375rem;line-height:1;text-decoration:none;
  color:var(--text);background:rgba(13,13,13,.96);
  border:1px solid rgba(241,239,234,.14);box-shadow:var(--glas-kante);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
a.platte:hover,button.platte:hover{color:var(--akzent);
  border-color:rgba(79,191,177,.5)}
/* Oben links: die eigene Zeile steht dort, wo vorher das fremde Zeichen stand.
   min-width, damit sie es auch dann deckt, wenn es breiter faellt als hier. */
.p-ol{top:0;left:0;border-width:0 1px 1px 0;border-radius:0 0 1.15rem 0;
  min-width:min(62%,16rem);color:var(--leise)}
.p-ol b{color:var(--text);font-weight:600}
/* Unten rechts: dieselbe Ecklogik, gespiegelt. Deckt das fremde Menue und
   traegt WhatsApp. KEIN eigener Vollbildknopf mehr — Begruendung im Skript.
   min-width/min-height halten die Deckung, auch wenn der Inhalt schrumpft:
   das fremde Menue mass 531,580 -> 563,610 bei einer Buehne von 575 x 640. */
.p-ur{position:absolute;bottom:0;right:0;pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:flex-end;
  min-width:11rem;min-height:4.2rem;
  padding:.8rem .9rem;border-radius:1.15rem 0 0 0;
  background:rgba(13,13,13,.96);
  border:1px solid rgba(241,239,234,.14);border-width:1px 0 0 1px;
  box-shadow:var(--glas-kante);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
.wa-tour{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:2.6rem;padding:0 1.1rem;border-radius:99px;
  background:#25D366;color:#0B1F12;border:1px solid #25D366;
  font-size:.9375rem;font-weight:600;line-height:1;text-decoration:none}
.wa-tour:hover{background:#2FE874;border-color:#2FE874;color:#0B1F12}
.wa-tour svg{width:1.15em;height:1.15em;flex:none}

@media (max-width:37.5rem){
  .platte{min-height:2.8rem;padding:0 1rem;font-size:.8125rem;gap:.45rem}
  .p-ol{min-width:min(74%,12rem)}
  .p-ur{padding:.65rem .7rem;min-width:9rem;min-height:3.7rem}
  .wa-tour{min-height:2.4rem;padding:0 .9rem;font-size:.8125rem}
  .nur-gross{display:none}
  .saum{height:4.5rem}
}

.fuss360{padding:2rem 0 3rem;color:var(--leise);font-size:var(--gr-klein)}
.fuss360 .zeilen{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
.fuss360 nav{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:wrap}
.fuss360 a{color:var(--leise);display:inline-flex;align-items:center;min-height:var(--ziel)}

/* --- Wer keine Bewegung will, bekommt eine fertige Seite ----------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf{opacity:1;transform:none;transition:none}
  .bild .lage{transition:none;transform:none}
  .leistung:nth-child(odd) .bild,.leistung:nth-child(even) .bild{transform:none}
  .knopf{transition:none}
  .fassade,.rahmen360,.fassade .tat,.platte{transition:none}
  .fassade img{transition:none}
  .vorhang{transition:none}
  .vorhang .strich::after{animation:none;width:100%;opacity:.5}
}
/* Ohne Maus bleibt --mx auf 0, die Lagen stehen still. Es braucht dafür keine
   Sperre über eine Medienabfrage — die hätte ein Gerät mit Maus UND Berührung
   fälschlich mit stillgelegt. */