/* Le Bureau · Carlton-Europe (16.10.2026). Aufbau, Masse und Abläufe wie Le Bureau des Grand Beau-Rivage (studio.css, hell.css, schweben.css dort,
   nur gelesen und hierher kopiert), Kleid des Carlton: Nachtblau statt Marine, Baskerville statt Cormorant/Cinzel, Gold des Hauses, Papier,
   Tapete des Carlton mit halber Deckkraft (gemeinsamer Wert der Werkzeuge). Eigenes des Carlton steht am Ende unter «KLEID DES CARLTON». */
/* Le Bureau · Grand Beau-Rivage. Kontrollpanel der Website, edle Fassung (Robert 12.10.2026: «auf Tasty-Studios-Niveau, richtig edel, luxuriös, High-End»).
   Massstab: das Drucksachen-Studio desselben Hauses. Raum: Marine mit der Tapete, Kopf als Insel mit Goldkante, Platten aus Papier mit Tiefe, Kuhlen für Felder,
   Knöpfe mit Goldknauf und Lichtstreif, 3D-Fotokacheln der Website, Auswahllisten im Hausstil (/assets/js/auswahl.js). Bewegung nur über transform und opacity.
   Vorher-Stand: _qa/bureau/studio-vor-edel.css */
@font-face{font-family:'Baskerville CE';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/libre-baskerville-700.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400 600;font-display:swap;src:url('/assets/fonts/InstrumentSans-normal-400_600.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-weight:400;font-display:swap;src:url('/assets/fonts/DMMono-normal-400.woff2') format('woff2')}
[hidden]{display:none!important}
:root{
  --navy:#0b1f40;--marine:#0b1f40;--blau:#12305e;--tinte:#0c1526;--papier:#f4ecdc;--creme:#e8dbbf;--weiss:#fbf6ea;--sand:#e2d2b5;
  --gold:#dcc68f;--goldhell:#f3e3b6;--messing:#b8975a;--taupe:#8a7545;--taupe-tief:#6f5d38;--tief:#6f5d38;--rot:#9c3b34;--gruen:#3d6b4f;--gelb:#b8892a;
  --leise:rgba(12,21,38,.6);--linie:rgba(159,137,111,.26);
  --serif:'Baskerville CE',Georgia,serif;--caps:'Baskerville CE',Georgia,serif;--sans:'Instrument Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,Menlo,monospace;
  --e1:cubic-bezier(.16,1,.3,1);--e2:cubic-bezier(.32,.72,0,1);--e3:cubic-bezier(.34,1.3,.5,1);
  --platte:linear-gradient(180deg,#fbf6ea,#f4ecdc 55%,#f0e6d2);
  --platte-s:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.18),0 1.5px 0 rgba(120,100,70,.35),0 40px 60px -34px rgba(0,0,0,.75),0 14px 26px -16px rgba(0,0,0,.45);
  --kuhle:linear-gradient(180deg,#e8ddc6,#efe6d3 40%,#f2eadb);
  --kuhle-s:inset 0 3px 6px -1px rgba(12,21,38,.16),inset 0 1px 0 rgba(12,21,38,.08),inset 0 0 0 1px rgba(159,137,111,.14),0 1px 0 #fff;
  --insel:radial-gradient(120% 160% at 50% -50%,rgba(150,166,214,.22),rgba(150,166,214,0) 60%),linear-gradient(180deg,#24488a 0%,#232a43 30%,#0b1f40 66%,#06142b 100%);
  --insel-s:inset 0 1px 0 rgba(255,255,255,.18),inset 0 10px 16px -12px rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px rgba(210,191,152,.42),0 26px 40px -20px rgba(0,0,0,.8),0 8px 14px -8px rgba(0,0,0,.5);
  --karte-s:inset 0 0 0 1px rgba(152,115,60,.35),inset 0 0 0 6px rgba(253,249,241,.9),inset 0 0 0 7px rgba(152,115,60,.18),0 40px 80px -30px rgba(0,0,0,.85);
  --kopf:72px;--rand:276px;--leiste:92px
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.bu{min-height:100vh;background:var(--navy) linear-gradient(rgba(11,31,64,.5),rgba(11,31,64,.5)),url('/assets/img/tapete-navy.webp') 50% 0/700px auto;color:var(--tinte);font:14.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.bu button,.bu input,.bu select,.bu textarea{font:inherit;color:inherit}
.bu button{cursor:pointer}
.bu svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--sand);color:var(--tinte)}
:focus-visible{outline:1.5px solid var(--messing);outline-offset:3px}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-tief)}
.leise{color:var(--leise);font-size:13.5px;line-height:1.55}

/* ---------- Auftritt ---------- */
@keyframes runter{from{transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes auf{from{transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes edel{from{transform:translate3d(46px,0,0) scale(.975)}to{opacity:1;transform:none}}   /* «Reinschweben von rechts edel» */
@keyframes bild{from{transform:scale(1.12)}to{transform:none}}
@keyframes tabAuf{from{transform:translateY(12px)}to{opacity:1;transform:none}}
.kopf{animation:none}
.rand{animation:none}
.leiste{animation:none}
/* Ansichtswechsel: kurz und ruhig, alles steht nach spätestens 0,7 s (Robert 12.10.2026: «lädt sehr hakelig nach») */
.ansicht-neu>*{animation:auf .55s var(--e1) both}
.ansicht-neu>*:nth-child(2){animation-delay:.04s}.ansicht-neu>*:nth-child(n+3){animation-delay:.08s}
/* Wo eine Seite in der Vorschau lädt, bewegt sich nichts darüber: jede Bewegung zwingt Safari, die ganze Vorschau Bild für Bild neu zu zeichnen (gemessen: 3 × 0,55 s statt 0,2 s) */
.ansicht-neu>.arbeit,.ansicht-neu>.vgl2{animation:none}
.rahmen iframe{will-change:transform}
.edel>*{animation:edel .9s var(--e1) both}
.edel>*:nth-child(2){animation-delay:.04s}.edel>*:nth-child(3){animation-delay:.08s}.edel>*:nth-child(4){animation-delay:.12s}.edel>*:nth-child(5){animation-delay:.16s}
.edel>*:nth-child(6){animation-delay:.2s}.edel>*:nth-child(7){animation-delay:.24s}.edel>*:nth-child(n+8){animation-delay:.28s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Knöpfe mit Tiefe: Pille, Lichtkante, Schattenkante, runder Knauf, Lichtstreif (Baustein des Hauses) ---------- */
.kn{--o:#fbf6ea;--m:#f1e6d1;--u:#dccaa6;--t:var(--tinte);--licht:#fff;--kante:rgba(130,108,53,.32);--tf:rgba(6,20,43,.35);
  --ko:#1e3c72;--ku:#050f22;--kt:var(--goldhell);--klicht:rgba(190,206,255,.35);
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 6px 0 20px;border:0;border-radius:999px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--t)!important;
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(150,125,64,.36),0 1px 1px rgba(6,20,43,.14),0 16px 26px -14px var(--tf);
  transition:transform .55s var(--e2),box-shadow .55s var(--e2),opacity .3s}
.kn::after{content:'';position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85) 50%,transparent);transform:translateX(-180%) skewX(-18deg)}
.kn i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--ko),var(--ku));color:var(--kt);font-style:normal;
  box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px rgba(210,191,152,.45),0 6px 12px -6px rgba(9,17,39,.55);transition:transform .6s var(--e2)}
.kn i svg{width:14px;height:14px;stroke-width:1.8}
@media (hover:hover){.kn:hover:not(:disabled){transform:translateY(-2px)}.kn:hover:not(:disabled)::after{transform:translateX(360%) skewX(-18deg);transition:transform 1.1s var(--e1)}.kn:hover:not(:disabled) i{transform:translateX(2px) scale(1.06)}}
.kn:active:not(:disabled){transform:translateY(1px) scale(.985)}
.kn:disabled{opacity:.42;cursor:default}
.kn--klein{height:38px;padding:0 5px 0 15px;gap:9px;font-size:10px}.kn--klein i{width:28px;height:28px}
.kn--ohne{padding-right:18px}
/* Marine: Hauptknopf, Knauf poliertes Gold (alle .kn ohne Zusatz) */
.kn:not(.kn--linie):not(.kn--gold):not(.sp):not(.kn--gefahr){--o:#1f3f77;--m:#0f2a55;--u:#06142b;--t:#f7efdd;--licht:rgba(190,206,255,.34);--kante:rgba(0,0,0,.5);--tf:rgba(0,0,0,.55);
  --ko:#f6e8c2;--ku:#b8975a;--kt:#0b1f40;--klicht:rgba(255,250,232,.95);text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(210,191,152,.6),0 0 0 1px rgba(0,0,0,.25),0 18px 30px -14px var(--tf)}
.kn:not(.kn--linie):not(.kn--gold):not(.sp):not(.kn--gefahr)::after{background:linear-gradient(100deg,transparent,rgba(222,232,255,.3) 50%,transparent)}
.kn--gold,.sp.gelb{--o:#f7e9c6;--m:#e3cd98;--u:#b99a5c;--t:#0b1f40;--licht:rgba(255,252,240,.95);--kante:rgba(92,66,24,.5);--ko:#1f3f77;--ku:#06142b;--kt:#f6e8c2;--klicht:rgba(190,206,255,.4);
  text-shadow:0 1px 0 rgba(255,250,235,.5);box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,240,205,.6),0 0 0 1px rgba(0,0,0,.35),0 18px 30px -14px rgba(0,0,0,.7)}
.sp.gruen{--o:#a8c9ae;--m:#6f9a79;--u:#3d6b4f;--t:#fff;--licht:rgba(255,255,255,.5);--kante:rgba(0,0,0,.25);--ko:#fbf6ea;--ku:#d9cbaa;--kt:#3d6b4f}
.kn--gefahr{--o:#c1655d;--m:#9c3b34;--u:#6d221d;--t:#fff;--licht:rgba(255,220,210,.4);--kante:rgba(0,0,0,.4);--ko:#fbf6ea;--ku:#d9cbaa;--kt:#6d221d}
/* Glanzkante: feines Licht um den wichtigsten Knopf */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
.glanz-kn::before{content:'';position:absolute;inset:0;z-index:-2;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:conic-gradient(from var(--ga),transparent 0 60%,rgba(210,191,152,.25) 70%,#fff3d2 80%,var(--gold) 86%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ga 4.2s linear infinite}
@keyframes ga{to{--ga:360deg}}
.rund{width:38px;height:38px;border-radius:50%;border:0;padding:0;display:inline-grid;place-items:center;flex:none;color:var(--goldhell);text-decoration:none;
  background:linear-gradient(180deg,#1f3f77,#0f2a55 50%,#06142b);box-shadow:inset 0 1px 0 rgba(190,206,255,.3),inset 0 -2px 0 rgba(0,0,0,.45),0 0 0 1px rgba(210,191,152,.4),0 10px 16px -10px rgba(0,0,0,.75);transition:transform .5s var(--e2),opacity .3s}
.rund svg{width:16px;height:16px;stroke-width:1.6}
.rund:hover{transform:translateY(-2px)}.rund:active{transform:translateY(1px) scale(.95)}
.fenster .rund{width:34px;height:34px}
.link{border:0;background:none;padding:0;font-size:13px;color:var(--taupe-tief);text-decoration:underline;text-decoration-color:rgba(159,137,111,.5);text-underline-offset:4px;cursor:pointer;transition:color .3s}
.link:hover{color:var(--navy)}
.link.rot{color:var(--rot);text-decoration-color:rgba(156,59,52,.4)}

/* Reiter: Kuhle mit erhabener Platte (gewählt) */
.wahl2{display:inline-flex;gap:2px;padding:4px;border-radius:16px;background:var(--kuhle);box-shadow:var(--kuhle-s)}
.wahl2 button{border:0;background:none;padding:9px 16px;border-radius:12px;font:10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--leise);transition:color .4s,background .4s,box-shadow .4s}
.wahl2 button[aria-pressed="true"]{color:var(--navy);background:linear-gradient(180deg,#fffdf8,#f4ead6);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(152,115,60,.32),0 6px 12px -6px rgba(12,21,38,.35)}
.wahl2--dunkel{background:linear-gradient(180deg,#071a38,#0a1d3c);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 0 1px rgba(210,191,152,.22),0 1px 0 rgba(255,255,255,.06)}
.wahl2--dunkel button{color:rgba(240,227,194,.68)}
.wahl2--dunkel button[aria-pressed="true"]{color:var(--navy);background:linear-gradient(180deg,#fdf6e6,#ecdcb8);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,240,205,.4),0 6px 12px -6px rgba(0,0,0,.6)}
/* Auswahllisten (auswahl.js) als Kuhle */
select.sel{width:auto;min-width:180px;height:40px;border:0;border-radius:14px;padding:0 14px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:500 16px var(--serif)}
.cw:has(select.sel){display:inline-block;width:auto;min-width:220px}
.cw:has(select.sel) .cw-knopf{height:42px;padding:0 16px!important;border-radius:14px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:500 17px var(--serif)!important;color:var(--tinte)!important;letter-spacing:0!important}
.reiter .cw:has(select.sel) .cw-knopf{background:var(--platte);box-shadow:var(--platte-s)}
.vorschau__k .cw:has(select.sel){min-width:140px}
.vorschau__k .cw:has(select.sel) .cw-knopf{height:34px;background:linear-gradient(180deg,#071a38,#0a1d3c);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 0 1px rgba(210,191,152,.25);color:var(--goldhell)!important;font-size:15px!important}
.cw-liste li[aria-selected=true]{background:linear-gradient(180deg,#163566,#0b1f40)!important}

/* ---------- Kopf: Insel mit Tapete und Goldkante ---------- */
.kopf{position:fixed;inset:0 0 auto 0;height:var(--kopf);display:flex;align-items:center;gap:20px;padding:0 18px 0 22px;z-index:40;color:var(--papier);isolation:isolate;
  background:var(--insel);box-shadow:inset 0 -1px 0 rgba(210,191,152,.45),0 18px 34px -20px rgba(0,0,0,.9)}
.kopf::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(11,31,64,.5),rgba(11,31,64,.5)),url('/assets/img/tapete-navy.webp') 50% 0/700px auto;opacity:.45;pointer-events:none}
.kopf__marke{display:flex;align-items:center;gap:13px;min-width:calc(var(--rand) - 22px);text-decoration:none;color:inherit;border:0;background:none;padding:0}
.kopf__marke img{width:42px;height:auto;display:block;filter:drop-shadow(0 1px 0 rgba(61,42,16,.9)) drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.kopf__marke b{display:block;font:400 15px/1.1 var(--caps);letter-spacing:.24em;text-transform:uppercase;text-align:left;
  background:linear-gradient(180deg,#fbf0cf 0%,#ead39c 34%,#c9a764 52%,#9c7b43 62%,#dcc189 80%,#f3e3b6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.kopf__marke small{display:block;margin-top:6px;font:9.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:rgba(240,227,194,.7);text-align:left}
.kopf__mitte{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.kopf__titel{font:500 23px/1.15 var(--serif);color:#fbf4e4;text-shadow:0 1px 1px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kopf__stand{margin-top:3px;font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.85}
.kopf__werk{display:flex;align-items:center;gap:10px}
.kopf__trenn{width:1px;height:30px;margin:0 4px;background:linear-gradient(180deg,rgba(210,191,152,0),rgba(210,191,152,.55),rgba(210,191,152,0))}
.kopf .rund{position:relative}
.kopf .rund[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);padding:6px 10px;border-radius:10px;white-space:nowrap;font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:linear-gradient(180deg,#fbf6ea,#f0e6d2);box-shadow:0 0 0 1px rgba(152,115,60,.3),0 10px 20px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .45s var(--e1)}
.kopf .rund[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}

/* ---------- Rand: Platte aus Papier mit den Bereichen ---------- */
.rand{position:fixed;top:calc(var(--kopf) + 14px);bottom:14px;left:14px;width:var(--rand);z-index:20;overflow:auto;padding:16px 12px 18px;border-radius:24px;
  background:var(--platte);box-shadow:var(--platte-s);scrollbar-width:thin;scrollbar-color:rgba(159,137,111,.4) transparent}
.rand__auf{display:none}
.nav{display:flex;flex-direction:column}
.nav p{display:flex;align-items:center;gap:10px;margin:18px 8px 8px;font:9.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-tief)}
.nav p::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(159,137,111,.4),rgba(159,137,111,0))}
.nav p:first-child{margin-top:4px}
.nw{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:13px;background:none;text-align:left;font:500 17.5px/1.2 var(--serif);color:var(--tinte);transition:background .35s,box-shadow .35s}
.nw span{flex:1;min-width:0}
.nw:hover{background:rgba(152,115,60,.08)}
.nw[aria-current="true"]{background:linear-gradient(180deg,#163566,#0b1f40);color:#fbf4e4;box-shadow:inset 0 1px 0 rgba(190,206,255,.25),inset 0 0 0 1px rgba(210,191,152,.5),0 10px 18px -10px rgba(6,20,43,.7)}
.nw i{font-style:normal;font:500 10.5px var(--mono);min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;color:#0b1f40;
  background:linear-gradient(180deg,#f6e8c2,#c9ab6c);box-shadow:inset 0 1px 0 #fffbe9,inset 0 -1px 0 rgba(92,66,24,.4)}
.nw em{font-style:normal;font:9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.nw[aria-current="true"] em{color:var(--gold)}
.wege{display:flex;flex-direction:column;margin-top:18px;padding-top:10px;border-top:1px solid var(--linie)}
.wege a{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:11px;font-size:13px;color:var(--leise);text-decoration:none;transition:background .3s,color .3s}
.wege a:hover{background:rgba(152,115,60,.08);color:var(--navy)}
.wege svg{width:12px;height:12px}

/* ---------- Raum ---------- */
.haupt{min-height:100vh;padding:calc(var(--kopf) + 34px) clamp(22px,2.6vw,46px) calc(var(--leiste) + 50px) calc(var(--rand) + 14px + clamp(26px,2.8vw,50px))}
/* Kopf einer Ansicht: das Atelier (mittig, Zierzeile mit dem Zeichen, grosser Titel) */
.titel{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto 34px;max-width:860px;color:var(--papier)}
.zier{display:flex;align-items:center;gap:12px;font:9.5px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:rgba(240,227,194,.72)}
.zier i{width:56px;height:1px;background:linear-gradient(90deg,rgba(210,191,152,0),rgba(210,191,152,.7))}
.zier i:last-child{background:linear-gradient(90deg,rgba(210,191,152,.7),rgba(210,191,152,0))}
.zier img{width:22px;height:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.titel h1{margin:14px 0 12px;font:500 clamp(40px,4vw,64px)/1.02 var(--serif);letter-spacing:-.008em;color:#fbf4e4;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.titel h1 em{font-style:normal;color:var(--gold)}
.titel p.satz{margin:0;max-width:62ch;font-size:15.5px;line-height:1.6;color:rgba(247,240,227,.78)}
.titel__kn{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.titel--knapp{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;text-align:left;margin-bottom:22px}
.titel--knapp h1{font-size:clamp(34px,3vw,48px);margin:10px 0 6px}
.titel--knapp p.satz{font-size:14.5px}
.titel--knapp .titel__kn{margin-top:0;justify-content:flex-end}
h2.zw{display:flex;align-items:center;gap:16px;max-width:1180px;margin:50px auto 20px;font:500 30px/1.1 var(--serif);color:#fbf4e4}
h2.zw em{font-style:normal;color:var(--gold)}
h2.zw::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(210,191,152,.5),rgba(210,191,152,0))}

/* Platte: helle Fläche mit Tiefe */
.platte,.karte{position:relative;border-radius:24px;background:var(--platte);box-shadow:var(--platte-s)}
.karte{margin:0 auto 18px;padding:24px 26px;max-width:1080px}
.karte h3{margin:0 0 4px;font:500 25px/1.15 var(--serif);color:var(--navy)}
.karte>p{margin:0 0 16px;font-size:13.5px;color:var(--leise)}

/* ---------- Übersicht ---------- */
.lage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;max-width:1180px;margin:0 auto}
.lg{position:relative;padding:20px 22px;border-radius:18px}
.lg+.lg::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,rgba(159,137,111,0),rgba(159,137,111,.45),rgba(159,137,111,0))}
.lg .mono{display:block}
.lg b{display:block;margin:7px 0 4px;font:500 25px/1.15 var(--serif);color:var(--navy)}
.lg span{display:block;font-size:13px;color:var(--leise)}
.lg button,.lg a{margin-top:10px;display:inline-flex;border:0;background:none;padding:0;font-size:13px;color:var(--taupe-tief);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(159,137,111,.5)}
.aufgaben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto}
.ag{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:140px;padding:20px 20px 18px;border:0;border-radius:22px;text-align:left;
  background:var(--platte);box-shadow:var(--platte-s);transition:transform .7s var(--e2)}
.ag b{font:500 22px/1.12 var(--serif);color:var(--navy);padding-right:38px}
.ag span{font-size:13px;line-height:1.5;color:var(--leise)}
.ag em{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#f6e8c2;
  background:linear-gradient(180deg,#1f3f77,#06142b);box-shadow:inset 0 1px 0 rgba(190,206,255,.3),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px rgba(210,191,152,.45),0 6px 12px -6px rgba(9,17,39,.55);transition:transform .6s var(--e2)}
.ag em svg{width:13px;height:13px;stroke-width:1.8}
@media (hover:hover){.ag:hover{transform:translateY(-4px)}.ag:hover em{transform:translateX(2px) scale(1.06)}}
/* Bereiche als 3D-Fotokacheln der Website (Platte, Foto, Name in der Kuhle, Knauf) */
.bereiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;max-width:1180px;margin:0 auto}
.bk{position:relative;display:block;padding:9px;border:0;border-radius:28px;text-align:left;background:var(--platte);box-shadow:var(--platte-s);transition:transform .8s var(--e2)}
.bk__b{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;border-radius:19px;background:var(--creme);transform:translateZ(0)}
.bk__b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--e1)}
.bk__n{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;margin:9px 1px 0;padding:12px 12px 11px 16px;border-radius:16px;background:var(--kuhle);box-shadow:var(--kuhle-s)}
.bk__n b{font:500 21px/1.15 var(--serif);color:var(--tinte)}
.bk__n small{grid-column:1;font:9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-tief)}
.bk__n i{grid-column:2;grid-row:1/3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#f6e8c2;background:linear-gradient(180deg,#1f3f77,#06142b);
  box-shadow:inset 0 1px 0 rgba(190,206,255,.3),0 0 0 1px rgba(210,191,152,.45),0 10px 14px -10px rgba(6,18,42,.8);transition:transform .5s var(--e2)}
.bk__n i svg{width:13px;height:13px;stroke-width:1.7}
.bk__o{position:absolute;z-index:2;top:20px;right:20px;padding:6px 12px;border-radius:999px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#0b1f40;
  background:linear-gradient(180deg,#f6e8c2,#c9ab6c);box-shadow:inset 0 1px 0 #fffbe9,0 6px 14px -6px rgba(0,0,0,.6)}
@media (hover:hover){.bk:hover{transform:translateY(-5px)}.bk:hover .bk__b img{transform:scale(1.04)}.bk:hover .bk__n i{transform:translateX(3px)}}

/* ---------- Bereich: Stellen auf der Platte, Seite auf der Bühne ---------- */
.reiter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:-8px 0 20px}
.reiter .leise{color:rgba(240,227,194,.65)}
.reiter .wahl2{background:linear-gradient(180deg,#071a38,#0a1d3c);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 0 1px rgba(210,191,152,.22)}
.reiter .wahl2 button{color:rgba(240,227,194,.7)}
.reiter .wahl2 button[aria-pressed="true"]{color:var(--navy);background:linear-gradient(180deg,#fdf6e6,#ecdcb8)}
.arbeit{display:grid;grid-template-columns:minmax(330px,.66fr) minmax(460px,1.34fr);gap:clamp(18px,2vw,30px);align-items:start}
.stellen{padding:14px;max-height:calc(100vh - var(--kopf) - var(--leiste) - 70px);overflow:auto;position:sticky;top:calc(var(--kopf) + 20px);scrollbar-width:thin;scrollbar-color:rgba(159,137,111,.4) transparent}
.suche{position:sticky;top:-14px;z-index:4;display:block;margin:-14px -14px 12px;padding:14px 14px 10px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#fbf6ea 75%,rgba(253,249,241,0))}
.suche input{width:100%;height:44px;padding:0 16px 0 42px;border:0;border-radius:999px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:500 16px var(--serif);color:var(--tinte);outline:0}
.suche input::placeholder{color:rgba(12,21,38,.42);font-style:italic}
.suche svg{position:absolute;left:30px;top:28px;width:15px;height:15px;color:var(--taupe-tief)}
.ausgeblendet{margin-bottom:12px;padding:14px 16px;border-radius:16px;background:rgba(156,59,52,.06);box-shadow:inset 0 0 0 1px rgba(156,59,52,.22);font-size:13.5px}
.ausgeblendet b{display:block;margin-bottom:4px;font:400 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rot)}
.ausgeblendet div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:4px 0}
.gr{margin-bottom:10px;border-radius:18px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(159,137,111,.2);overflow:hidden;transition:box-shadow .4s}
.gr[open]{background:#fffcf6;box-shadow:inset 0 0 0 1px rgba(159,137,111,.26),0 14px 24px -18px rgba(12,21,38,.35)}
.gr>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;transition:background .3s}
.gr>summary:hover{background:rgba(152,115,60,.06)}
.gr>summary::-webkit-details-marker{display:none}
.gr>summary b{flex:1;min-width:0;font:500 19px/1.2 var(--serif);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr>summary small{font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.gr>summary::after{content:'';flex:none;width:8px;height:8px;border-right:1.5px solid var(--taupe-tief);border-bottom:1.5px solid var(--taupe-tief);transform:rotate(45deg) translateY(-3px);transition:transform .45s var(--e1)}
.gr[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
.gr.ist-aus>summary b{text-decoration:line-through;text-decoration-color:rgba(156,59,52,.55);opacity:.6}
.gr--mc>summary{background:linear-gradient(180deg,#163566,#0b1f40)}
.gr--mc>summary b{color:var(--goldhell)}.gr--mc>summary small{color:var(--gold)}.gr--mc>summary::after{border-color:var(--gold)}
.st{display:block;width:100%;padding:11px 16px;border:0;border-top:1px solid rgba(159,137,111,.16);background:none;text-align:left;transition:background .3s,box-shadow .3s}
.st:hover{background:rgba(152,115,60,.06)}
.st small{display:block;margin-bottom:2px;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.st span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45;color:var(--tinte)}
.st.geaendert{background:linear-gradient(90deg,rgba(210,191,152,.32),rgba(210,191,152,.06))}
.st.geaendert small::after{content:' · geändert';color:var(--taupe-tief)}
.st.offen small::after{content:' · nicht gespeichert';color:var(--gelb)}
.st.aktiv{background:linear-gradient(90deg,rgba(210,191,152,.4),rgba(210,191,152,.1));box-shadow:inset 3px 0 0 var(--messing)}
.fotos{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid rgba(159,137,111,.16)}
.fotos button{position:relative;width:78px;height:56px;padding:3px;border:0;border-radius:12px;background:var(--platte);box-shadow:0 0 0 1px rgba(159,137,111,.3),0 8px 14px -10px rgba(12,21,38,.5);transition:transform .5s var(--e2)}
.fotos button img{width:100%;height:100%;object-fit:cover;display:block;border-radius:9px}
.fotos button:hover{transform:translateY(-2px)}
.fotos button.geaendert{box-shadow:0 0 0 2px var(--messing),0 8px 14px -10px rgba(12,21,38,.5)}
.gr__fuss{display:flex;justify-content:flex-end;padding:8px 16px 12px;border-top:1px solid rgba(159,137,111,.16)}
/* Bearbeiten einer Stelle */
.ed{padding:16px 16px 18px;border-top:1px solid rgba(159,137,111,.3);background:linear-gradient(180deg,#fbf4e6,#f7efdf);animation:tabAuf .6s var(--e1)}
.ed .mono{display:block;margin-bottom:9px}
.ed__f{min-height:56px;padding:13px 16px;border-radius:14px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:500 19px/1.4 var(--serif);color:var(--tinte);outline:0;white-space:pre-wrap;word-break:break-word;transition:box-shadow .45s var(--e1)}
.ed__f:focus{box-shadow:var(--kuhle-s),0 0 0 1.5px rgba(183,162,122,.85),0 0 0 6px rgba(210,191,152,.22)}
.ed__f em,.ed__f i{font-style:italic}
.ed__z{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:12px;font-size:13px}
/* Häkchen als Schalter (wie im Drucksachen-Studio) */
.ed__z label,.haken{position:relative;display:inline-flex;align-items:center;gap:11px;cursor:pointer;color:var(--tinte)}
.ed__z label input,.haken input{position:absolute;opacity:0;pointer-events:none}
.ed__z label::before,.haken::before{content:'';flex:none;width:40px;height:24px;border-radius:999px;background:var(--kuhle);box-shadow:var(--kuhle-s);transition:background .4s}
.ed__z label::after,.haken::after{content:'';position:absolute;left:4px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:linear-gradient(180deg,#fff,#eadfc9);box-shadow:inset 0 -1px 0 rgba(130,108,53,.3),0 2px 4px rgba(12,21,38,.3);transition:transform .5s var(--e1),background .3s}
.ed__z label:has(input:checked)::before,.haken:has(input:checked)::before{background:linear-gradient(180deg,#050f22,#1e3c72);box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 0 0 1px rgba(210,191,152,.5)}
.ed__z label:has(input:checked)::after,.haken:has(input:checked)::after{transform:translateX(16px);background:linear-gradient(180deg,#f6e8c2,#c9ab6c)}
.ed__vor{margin:12px 0 0;font-size:13px;color:var(--leise)}
.ed__vor b{font-weight:600;color:var(--taupe-tief)}
.ed__bl{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(159,137,111,.45)}
.ed__bl p{margin:0 0 6px;font-size:12.5px;color:var(--leise)}
.ed__bl button{display:block;margin:5px 0;text-align:left}

/* Bühne: die Seite schwebt auf der Tapete, Werkzeugleiste als Insel */
.vorschau{position:sticky;top:calc(var(--kopf) + 20px);display:flex;flex-direction:column;align-items:stretch}
.vorschau__k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:center;margin:0 0 16px;padding:7px 8px 7px 18px;border-radius:999px;background:var(--insel);box-shadow:var(--insel-s);color:var(--papier);max-width:100%}
.vorschau__k .mono{min-width:0;max-width:240px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vorschau__k a{color:var(--goldhell);font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:9px 12px;border-radius:999px;transition:background .3s}
.vorschau__k a:hover{background:rgba(255,255,255,.06)}
.rahmen{position:relative;flex:none;aspect-ratio:1440/900;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(210,191,152,.35),0 0 0 7px rgba(6,20,43,.55),0 0 0 8px rgba(210,191,152,.22),0 50px 80px -40px rgba(0,0,0,.95),0 18px 30px -18px rgba(0,0,0,.6)}
.rahmen iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform:scale(var(--wz,.5));transform-origin:0 0;background:#fff}
.rahmen.handy{aspect-ratio:390/844;width:min(100%,290px);margin:0 auto;border-radius:34px;box-shadow:0 0 0 9px #0c0f1a,0 0 0 10px rgba(210,191,152,.35),0 50px 80px -40px rgba(0,0,0,.95)}
.rahmen.handy iframe{width:390px;height:844px}
.lade-schleier{position:absolute;inset:0;display:grid;place-items:center;background:rgba(253,249,241,.82);font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-tief);opacity:0;pointer-events:none;transition:opacity .4s}
.rahmen.laedt .lade-schleier{opacity:1}

/* ---------- Felder und Listen ---------- */
.fz{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:14px 0;border-top:1px solid rgba(159,137,111,.18)}
.fz:first-of-type{border-top:0}
.fz>span b{display:block;font:500 18px/1.2 var(--serif);color:var(--navy)}
.fz>span small{display:block;margin-top:2px;font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.fz input,.fz textarea,.feld input,.feld textarea,.ue__sp input{width:100%;padding:12px 15px;border:0;border-radius:14px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:500 17px/1.35 var(--serif);color:var(--tinte);outline:0;transition:box-shadow .45s var(--e1)}
.fz input:focus,.fz textarea:focus,.feld input:focus,.feld textarea:focus,.ue__sp input:focus{box-shadow:var(--kuhle-s),0 0 0 1.5px rgba(183,162,122,.85),0 0 0 6px rgba(210,191,152,.22)}
.fz.offen input{box-shadow:var(--kuhle-s),0 0 0 1.5px var(--gelb),0 0 0 6px rgba(184,137,42,.14)}
.fz em{grid-column:2;font-style:normal;font-size:12px;color:var(--leise)}
.feld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.feld>span{font:9.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--taupe-tief)}
.feld small{font-size:12.5px;color:var(--leise)}
.feld textarea{min-height:92px;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder,.fz input::placeholder,.ue__sp input::placeholder{color:rgba(12,21,38,.38);font-style:italic}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.schalter{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:500 19px var(--serif);color:var(--navy)}
.schalter input{appearance:none;-webkit-appearance:none;width:46px;height:26px;margin:0;border-radius:999px;background:var(--kuhle);box-shadow:var(--kuhle-s);position:relative;cursor:pointer;transition:background .4s}
.schalter input::after{content:'';position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#fff,#eadfc9);box-shadow:inset 0 -1px 0 rgba(130,108,53,.3),0 2px 4px rgba(12,21,38,.3);transition:transform .5s var(--e1),background .3s}
.schalter input:checked{background:linear-gradient(180deg,#050f22,#1e3c72);box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 0 0 1px rgba(210,191,152,.5)}
.schalter input:checked::after{transform:translateX(20px);background:linear-gradient(180deg,#f6e8c2,#c9ab6c)}
.zl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:12px 0;border-top:1px solid rgba(159,137,111,.16)}
.zl:first-child{border-top:0}
.zl small{display:block;margin-bottom:5px;font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.zl div>span{display:block;font-size:14.5px;line-height:1.45}
.zl .ed__f{font-size:17px;min-height:0;padding:9px 13px}
.zl.geaendert .ed__f{box-shadow:var(--kuhle-s),0 0 0 1.5px rgba(183,162,122,.7)}
.filter{display:flex;justify-content:center;margin:-6px 0 22px}
.filter .wahl2{background:linear-gradient(180deg,#071a38,#0a1d3c);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 0 0 1px rgba(210,191,152,.22)}
.filter .wahl2 button{color:rgba(240,227,194,.7)}
.filter .wahl2 button[aria-pressed="true"]{color:var(--navy);background:linear-gradient(180deg,#fdf6e6,#ecdcb8)}
.google{padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(12,21,38,.08),0 14px 24px -18px rgba(12,21,38,.4);font-family:Arial,sans-serif}
.google b{display:block;color:#1a0dab;font-weight:400;font-size:18px;line-height:1.3}
.google small{display:block;margin-bottom:4px;color:#006621;font-size:12.5px}
.google span{display:block;color:#4d5156;font-size:13px;line-height:1.45}
.zaehler{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--taupe)}
.zaehler.zu{color:var(--rot)}
.ue{padding:22px 26px}
.ue__de{margin-top:4px;font:500 23px/1.3 var(--serif);color:var(--navy)}
.ue__vor{font-size:12.5px;color:var(--leise);margin:4px 0 10px}
.ue__sp{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 14px;align-items:center;margin-top:10px}
.ue__sp label{font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-tief)}
.ue__sp small{grid-column:2;font-size:12px;color:var(--leise);margin-top:-4px}
.ue__sp input[dir=rtl]{text-align:right}
/* Karten: La Carte als vier Inseln aus Marine mit Tapete */
.mc4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1180px;margin:0 auto}
.mck{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;min-height:250px;padding:22px 22px 20px;border-radius:24px;color:var(--papier);background:var(--insel);box-shadow:var(--insel-s);overflow:hidden}
.mck::after{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/img/tapete-navy.webp') 0 0/300px auto;opacity:.5}
.mck img{width:34px;height:auto;margin-bottom:6px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.mck .mono{color:rgba(240,227,194,.72)}
.mck b{font:500 25px/1.12 var(--serif);color:#fbf4e4}
.mck span{font-size:13px;color:rgba(247,240,227,.74)}
.mck .offen{color:var(--gold)}
.mck .kn{margin-top:auto;align-self:flex-start}
.band-probe{margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 20px 34px -22px rgba(0,0,0,.7)}
.schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px;text-align:left;counter-reset:s}
.schritte li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:baseline;counter-increment:s}
.schritte li::before{content:counter(s);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:11px var(--mono);color:var(--goldhell);
  background:linear-gradient(180deg,#1f3f77,#06142b);box-shadow:0 0 0 1px rgba(210,191,152,.45);transform:translateY(-2px)}
.schritte li.fertig{color:var(--gruen)}
.schritte li.fertig::before{content:'✓';color:#fff;background:linear-gradient(180deg,#6f9a79,#3d6b4f)}
.schritte li.jetzt{font-weight:600}
.schritte li.jetzt::before{background:linear-gradient(180deg,#f6e8c2,#c9ab6c);color:#0b1f40}
/* Änderungen, Vergleich, Verlauf */
.ae{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:start;max-width:1180px;margin:0 auto 10px;padding:16px 20px;border-radius:20px;background:var(--platte);box-shadow:var(--platte-s)}
.ae .mono{padding-top:3px;line-height:1.6}
.ae>div{min-width:0;font-size:14.5px;line-height:1.5;word-break:break-word}
.ae>div small{display:block;margin-bottom:3px;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.ae>div.vor{color:var(--leise)}
.ae>div.vor del{text-decoration-color:rgba(156,59,52,.6)}
.ae>div.nach mark{background:linear-gradient(180deg,rgba(240,227,194,0) 45%,rgba(210,191,152,.7) 45%);padding:0 1px}
.ae__kn{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ae img{display:block;width:130px;height:86px;object-fit:cover;border-radius:12px;margin-top:4px;box-shadow:0 10px 18px -12px rgba(0,0,0,.5)}
.vgl2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:6px}
.vgl2 .vorschau{position:relative;top:0}
.vl{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1080px;margin:0 auto 10px;padding:18px 22px;border-radius:20px;background:var(--platte);box-shadow:var(--platte-s)}
.vl b{display:block;font:500 22px/1.2 var(--serif);color:var(--navy)}
.vl span{font-size:13px;color:var(--leise)}
.vl--ursprung{background:transparent;box-shadow:inset 0 0 0 1px rgba(210,191,152,.45);margin-top:24px}
.vl--ursprung b{color:#fbf4e4}.vl--ursprung span{color:rgba(247,240,227,.7)}
.leer-hinweis{max-width:760px;margin:0 auto;padding:36px;border-radius:24px;background:var(--platte);box-shadow:var(--platte-s);text-align:center;color:var(--leise)}
.leer-hinweis b{display:block;margin-bottom:6px;font:500 28px/1.15 var(--serif);color:var(--navy)}

/* ---------- Leiste: schwebende Insel unten ---------- */
.leiste{position:fixed;z-index:30;bottom:18px;left:calc(var(--rand) + 14px + clamp(26px,2.8vw,50px));right:clamp(22px,2.6vw,46px);display:flex;align-items:center;gap:10px;
  min-height:68px;padding:10px 10px 10px 26px;border-radius:999px;color:var(--papier);background:var(--insel);box-shadow:var(--insel-s);isolation:isolate}
.leiste::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url('/assets/img/tapete-navy.webp') 0 0/300px auto;opacity:.35;pointer-events:none}
.leiste__t{flex:1;min-width:0}
.leiste__t b{display:block;font:500 20px/1.15 var(--serif);color:#fbf4e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leiste__t span{display:block;font-size:12px;color:rgba(247,240,227,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Fenster, Quittung ---------- */
.fenster{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(10,12,22,.62)}
.fenster__k{position:relative;width:min(1100px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:40px clamp(24px,3vw,46px) 30px;border-radius:28px;background:linear-gradient(180deg,#fbf6ea,#f4ecdc);box-shadow:var(--karte-s);animation:fensterAuf .55s var(--e1)}
.fenster__k.schmal{width:min(640px,100%)}
@keyframes fensterAuf{from{transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.fenster h2{margin:0 0 8px;font:500 40px/1.05 var(--serif);color:var(--navy)}
.fenster h2 em{font-style:normal;color:var(--taupe-tief)}
.fenster p.satz{margin:0 0 22px;color:var(--leise);max-width:64ch;font-size:14.5px}
.fenster__zu{position:absolute;top:18px;right:18px}
.fenster__kn{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(159,137,111,.3)}
.fenster__kn .link{margin-right:auto}
.bild-wahl{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:28px;align-items:start}
.bild-jetzt{padding:8px;border-radius:24px;background:var(--platte);box-shadow:var(--platte-s)}
.bild-jetzt img{display:block;width:100%;height:auto;border-radius:17px}
.bibl{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:50vh;overflow:auto;padding:6px}
.bibl button{position:relative;aspect-ratio:4/3;padding:3px;border:0;border-radius:14px;background:var(--platte);box-shadow:0 0 0 1px rgba(159,137,111,.28),0 8px 14px -10px rgba(12,21,38,.5);transition:transform .5s var(--e2),box-shadow .4s}
.bibl button img{width:100%;height:100%;object-fit:cover;display:block;border-radius:11px}
.bibl button:hover{transform:translateY(-2px)}
.bibl button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--messing),0 0 0 6px rgba(210,191,152,.3),0 10px 18px -10px rgba(12,21,38,.6)}
.bibl button span{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;background:#0b1f40;color:var(--gold);font:8.5px var(--mono);letter-spacing:.12em}
.fenster .suche{position:relative;top:0;margin:0 0 12px;padding:0;background:none}
.fenster .suche svg{left:16px;top:14px}
.lade{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:20px 0 6px}
.lade__r{width:58px;height:58px;border-radius:50%;border:2px solid rgba(159,137,111,.22);border-top-color:var(--messing);animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
#ansicht>.lade .leise{color:rgba(240,227,194,.7)}
.meldung{position:fixed;left:calc(var(--rand) + 14px + clamp(26px,2.8vw,50px));bottom:calc(18px + 68px + 16px);z-index:70;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.quit{pointer-events:auto;position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;max-width:640px;padding:14px 14px 14px 22px;border-radius:22px;color:var(--papier);background:var(--insel);box-shadow:var(--insel-s);animation:edel 1s var(--e1)}
.quit>div{flex:1;min-width:0}
.quit b{display:block;font:500 20px/1.2 var(--serif);color:var(--goldhell)}
.quit span{display:block;font-size:13px;color:rgba(247,240,227,.8)}
.quit button{flex:none;border:0;padding:9px 14px;border-radius:999px;font:9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#0b1f40;background:linear-gradient(180deg,#fdf6e6,#e3cd98);box-shadow:inset 0 1px 0 #fff,0 6px 12px -6px rgba(0,0,0,.6)}
.quit button:last-child{width:30px;height:30px;padding:0;display:grid;place-items:center;font:16px var(--sans);letter-spacing:0;color:var(--goldhell);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(210,191,152,.3)}
.quit.fehl{background:linear-gradient(180deg,#5a2420,#3a1512);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(210,150,130,.4),0 26px 40px -20px rgba(0,0,0,.8)}
.start-tuer{max-width:600px;margin:14vh auto;padding:44px;border-radius:28px;background:var(--platte);box-shadow:var(--karte-s);text-align:center}
.start-tuer h1{font:500 42px var(--serif);margin:0 0 10px;color:var(--navy)}

/* ---------- schmal ---------- */
@media (max-width:1280px){.aufgaben{grid-template-columns:repeat(2,minmax(0,1fr))}.mc4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.arbeit{grid-template-columns:1fr}.stellen,.vorschau{position:relative;top:0;max-height:none}.vgl2{grid-template-columns:1fr}.fz{grid-template-columns:1fr}.fz em{grid-column:1}.ae{grid-template-columns:1fr}.ae__kn{align-items:flex-start;flex-direction:row}.bild-wahl{grid-template-columns:1fr}.lage{grid-template-columns:1fr}.lg+.lg::before{left:18px;right:18px;top:0;bottom:auto;width:auto;height:1px}}
@keyframes edel-hoch{from{transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:900px){
  :root{--rand:0px;--kopf:64px}
  html{overflow-x:clip}
  .edel>*{animation-name:edel-hoch}
  .kopf{gap:10px;padding:0 12px}.kopf__marke{min-width:0}.kopf__marke span,.kopf__mitte,.kopf__trenn{display:none}.kopf__werk{margin-left:auto;gap:8px}.kopf .rund{width:34px;height:34px}
  .rand{position:relative;top:auto;bottom:auto;left:auto;width:auto;margin:calc(var(--kopf) + 12px) 12px 0;padding:10px}
  .rand__auf{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 14px;border:0;border-radius:14px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:500 18px var(--serif);color:var(--navy)}
  .rand__auf i{width:8px;height:8px;border-right:1.5px solid var(--taupe-tief);border-bottom:1.5px solid var(--taupe-tief);transform:rotate(45deg) translateY(-3px);transition:transform .4s}
  .rand.auf .rand__auf i{transform:rotate(225deg)}
  .rand:not(.auf) .nav,.rand:not(.auf) .wege{display:none}
  .haupt{padding:26px 14px 190px}
  .titel h1{font-size:38px}.titel--knapp{flex-direction:column;align-items:flex-start}
  .aufgaben,.mc4,.zwei{grid-template-columns:1fr}
  .leiste{left:10px;right:10px;bottom:10px;flex-wrap:wrap;border-radius:26px;padding:12px}.leiste__t{flex-basis:100%;padding-left:6px}.leiste__t span{display:none}
  .leiste .kn{flex:1;justify-content:space-between;height:42px;padding-left:14px;gap:8px;font-size:9.5px;letter-spacing:.1em}.leiste .kn i{width:30px;height:30px}.leiste #l-vgl{display:none}
  .meldung{left:12px;right:12px;bottom:150px}
}
@media (max-width:520px){.kopf__werk .kn--klein{height:34px;padding:0 3px;gap:0;font-size:0;letter-spacing:0}.kopf__werk .kn--klein i{width:28px;height:28px}}
/* Helle Farbwelt und Bühne für alle Werkzeuge des Grand Beau-Rivage (Robert 15.10.2026):
   «Der Banner oben bleibt dunkelblau, dann der Hintergrund weiss, die Kacheln blau, links weiss lassen.»
   «Heroes richtig schön, geil, luxuriös, edel», Vorbild Le Bureau des Carlton-Europe (Bühne mit Foto rechts).
   Gilt für Le Bureau, Le Registre, La Réception, Le Livre. Wird nach studio.css und dem Werkzeug-CSS geladen. Vorher-Stand: _sicherung/…vor-hell-2026-10-15 */

/* ---------- Raum: hell, Platten weiss mit leichtem Schatten ---------- */
body.bu{background:#f4efe5;
  --raum:#f4efe5;
  --platte:linear-gradient(180deg,#fffdf9,#fbf7ef 60%,#f7f1e5);
  --platte-s:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.22),0 1px 0 rgba(120,100,70,.14),0 28px 50px -34px rgba(11,31,64,.38),0 10px 22px -16px rgba(11,31,64,.2);
  --blau-k:radial-gradient(120% 90% at 50% 0%,rgba(150,166,214,.26),transparent 58%),linear-gradient(165deg,#24488a 0%,#12305e 46%,#06142b 100%);
  --blau-s:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(210,191,152,.42),inset 0 -3px 0 rgba(0,0,0,.35),0 2px 2px rgba(6,20,43,.12),0 28px 40px -24px rgba(6,20,43,.6)}
.rand{background:linear-gradient(180deg,#fffefb,#fbf7ef);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.24),0 24px 44px -30px rgba(11,31,64,.32)}

/* Texte, die bisher auf Marine standen */
h2.zw{color:var(--navy)}
h2.zw em{color:var(--taupe-tief)}
.reiter .leise,#ansicht>.lade .leise{color:var(--leise)}
.reiter .wahl2 button,.filter .wahl2 button{color:var(--leise)}
.wahl2--dunkel button{color:rgba(240,227,194,.72)}

/* ---------- Bühne: jeder Kopf einer Ansicht (studio/buehne.js setzt das Foto) ---------- */
.titel.buehne{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;
  max-width:none;margin:0 0 38px;padding:clamp(34px,3.8vw,58px) clamp(28px,3.6vw,58px);min-height:clamp(250px,23vw,340px);border-radius:28px;color:#fbf4e4;
  background:radial-gradient(90% 120% at 0% 0%,rgba(150,166,214,.18),transparent 55%),linear-gradient(rgba(11,31,64,.6),rgba(11,31,64,.6)),linear-gradient(rgba(11,31,64,.5),rgba(11,31,64,.5)),url('/assets/img/tapete-navy.webp') 50% 0/700px auto,#0b1f40;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(210,191,152,.45),0 36px 60px -36px rgba(11,31,64,.75),0 12px 24px -16px rgba(11,31,64,.35)}
.titel.buehne::before{content:'';position:absolute;inset:8px;border-radius:21px;border:1px solid rgba(210,191,152,.34);pointer-events:none;z-index:2}
.buehne__foto{position:absolute;top:0;right:0;bottom:0;width:min(58%,820px);z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
.buehne__foto img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s var(--e1)}
.buehne__foto.da img{opacity:1;transform:none}
.buehne__foto::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,20,43,.5),transparent 48%),linear-gradient(90deg,rgba(11,31,64,.3),transparent 60%)}
.titel.buehne>:not(.buehne__foto){position:relative;z-index:1;max-width:min(60%,720px)}
.titel.buehne .zier{justify-content:flex-start;color:var(--gold)}
.titel.buehne .zier>i:first-child{display:none}
.titel.buehne .zier>i:last-child{width:110px;background:linear-gradient(90deg,rgba(210,191,152,.65),rgba(210,191,152,0))}
.titel.buehne h1{margin:18px 0 0;text-align:left;font-size:clamp(42px,4.3vw,70px);line-height:1.02;color:#fbf4e4;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.titel.buehne h1 em{color:var(--gold)}
.titel.buehne p.satz{margin-top:18px;max-width:58ch;font-size:16px;line-height:1.6;color:rgba(251,244,228,.84);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.titel.buehne .titel__kn{justify-content:flex-start;margin-top:26px}
.titel.buehne .kn--linie{--o:#f7e9c6;--m:#e3cd98;--u:#b99a5c;--t:#0b1f40;--licht:rgba(255,252,240,.95);--kante:rgba(92,66,24,.5);--ko:#1f3f77;--ku:#06142b;--kt:#f6e8c2}
/* Bereichsköpfe (knapp): niedriger, Knöpfe unter dem Text */
.titel--knapp.buehne{min-height:clamp(210px,17vw,260px)}
.titel--knapp.buehne>div:not(.buehne__foto){display:flex;flex-direction:column;align-items:flex-start}
.titel--knapp.buehne h1{font-size:clamp(38px,3.6vw,58px);margin-top:16px}
.titel--knapp.buehne .titel__kn{margin-top:20px}
/* Auftritt: Text kommt ruhig herein, Goldrahmen zieht sich auf */
@keyframes bueAuf{from{transform:translateY(16px)}to{transform:none}}
@keyframes bueRahmen{from{transform:scale(.985)}to{transform:none}}
.titel.buehne>:not(.buehne__foto){animation:bueAuf .9s var(--e1) both}
.titel.buehne>h1,.titel.buehne>div>h1{animation-delay:.06s}
.titel.buehne::before{animation:bueRahmen 1.4s var(--e1) .25s both}
@media (max-width:860px){
  .titel.buehne{padding:0 0 26px;min-height:0;border-radius:22px}
  .titel.buehne::before{inset:6px;border-radius:17px}
  .buehne__foto{position:relative;width:100%;height:160px;z-index:0;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 55%);mask-image:linear-gradient(0deg,transparent 0,#000 55%)}
  .titel.buehne>:not(.buehne__foto){max-width:none;margin-left:22px;margin-right:22px}
  .titel.buehne h1{font-size:clamp(34px,9vw,44px)}
}

/* ---------- Kacheln: blau mit Tiefe ---------- */
.ag,.bk{color:#fbf4e4}
.ag{background:var(--blau-k)!important;box-shadow:var(--blau-s)!important}
.ag b{color:#fbf4e4!important}
.ag span{color:rgba(251,244,228,.74)!important}
.ag em{background:linear-gradient(180deg,#f6e8c2,#b8975a)!important;color:#0b1f40!important;box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4)!important}
@media (hover:hover){.ag:hover{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- Übersicht: Lage als blaue Tafel mit Symbolen, dichter gesetzt (Robert: «Schriften in den Kacheln schöner, so viel Leerraum») ---------- */
.lage{background:var(--blau-k)!important;box-shadow:var(--blau-s)!important;padding:10px;border-radius:26px;position:relative;isolation:isolate;overflow:hidden}
.lage::after{content:'';position:absolute;inset:7px;border-radius:20px;border:1px solid rgba(210,191,152,.26);pointer-events:none}
.lg{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-content:start;padding:22px 24px}
.lg>*{grid-column:2}
.lg .lg__z{grid-column:1;grid-row:1/span 4;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#0b1f40;
  background:linear-gradient(180deg,#f6e8c2,#c9ab6c);box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4),0 10px 18px -10px rgba(0,0,0,.6)}
.lg .lg__z svg{width:19px;height:19px;stroke-width:1.5}
.lg+.lg::before{background:linear-gradient(180deg,rgba(210,191,152,0),rgba(210,191,152,.4),rgba(210,191,152,0))}
.lg .mono{color:var(--gold);font-size:9.5px;letter-spacing:.24em}
.lg b{margin:6px 0 4px;font-size:27px;line-height:1.08;color:#fbf4e4}
.lg span{font-size:13.5px;line-height:1.5;color:rgba(251,244,228,.72)}
.lg button,.lg a{margin-top:12px;justify-self:start;color:var(--goldhell);text-decoration-color:rgba(240,227,194,.45);font-size:13px}
.lg button:hover,.lg a:hover{color:#fff}

/* Häufig gebraucht: Symbol im Goldkreis, kompakter */
.ag{min-height:0;gap:5px;padding:18px 18px 18px;position:relative;isolation:isolate;overflow:hidden}
.ag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s var(--e1);pointer-events:none;z-index:-1}
@media (hover:hover){.ag:hover::after{transform:translateX(120%)}}
.ag .ag__z{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;color:var(--gold);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(210,191,152,.35)}
.ag .ag__z svg{width:18px;height:18px;stroke-width:1.5}
.ag b{font-size:21px!important}

/* Bereiche: Fotokacheln mit blauem Rahmen */
.bk{background:var(--blau-k);box-shadow:var(--blau-s)}
.bk__n{background:none;box-shadow:none;padding:12px 8px 6px 10px}
.bk__n b{color:#fbf4e4}
.bk__n small{color:var(--gold)}
.bk__n i{background:linear-gradient(180deg,#f6e8c2,#b8975a)!important;color:#0b1f40!important}

/* ---------- Kopfzeile: zurück zu La Maison ---------- */
.kopf .rund[aria-label="Zurück zu La Maison"] svg{width:17px;height:17px}

/* ---------- La Carte: Speisekarten als 3D-Objekte (Robert: «als 3D-Elemente, wie im Druck-Bereich») ---------- */
.mc4{perspective:1400px}
.mck{min-height:0;padding:20px 22px 22px;gap:4px;animation:mckRein .9s var(--e1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes mckRein{from{transform:translateY(22px) rotateX(6deg)}to{transform:none}}
.mck>img{display:none}
.mbuch{height:190px;margin:4px 0 14px;display:grid;place-items:center;perspective:900px}
.mbuch__d{position:relative;width:122px;height:170px;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(6deg);transition:transform .9s var(--e2)}
.mck:hover .mbuch__d{transform:rotateY(-8deg) rotateX(2deg) translateY(-6px)}
.mbuch__d::before{content:'';position:absolute;top:2px;bottom:2px;right:-9px;width:10px;transform:rotateY(90deg);transform-origin:left;background:repeating-linear-gradient(0deg,#f4ead6 0 2px,#d9c9a6 2px 3px);border-radius:0 2px 2px 0}
.mbuch__d::after{content:'';position:absolute;left:10%;right:-14%;bottom:-18px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transform:translateZ(-30px)}
.mbuch__v{position:absolute;inset:0;border-radius:3px 7px 7px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 10px;text-align:center;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(255,255,255,.08) 5%,transparent 9%),url('/assets/img/tapete-navy.webp') 0 0/180px auto,linear-gradient(160deg,#2c3456,#0b1f40 60%,#121626);
  box-shadow:inset 0 0 0 5px #0b1f40,inset 0 0 0 6px rgba(210,191,152,.7),inset 0 0 0 9px #0b1f40,inset 0 0 0 10px rgba(210,191,152,.35),0 18px 26px -12px rgba(0,0,0,.8)}
.mbuch__v img{width:30px!important;height:auto;margin:0 0 2px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.mbuch__v em{font:normal 6.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.mbuch__v b{font:400 13px/1.15 var(--caps)!important;letter-spacing:.06em;color:transparent!important;background:linear-gradient(180deg,#fbf0cf,#d9bb7c 50%,#a8864a);-webkit-background-clip:text;background-clip:text}
.mbuch__v small{font:6px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(240,227,194,.55)}
.mck>b{font-size:23px}

/* So läuft eine Preisänderung: Zeitleiste, Goldlinie zieht sich, Schritte steigen nacheinander auf */
.ablauf{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1180px;margin:0 auto}
.ablauf::before{content:'';position:absolute;left:12%;right:12%;top:48px;height:1px;background:linear-gradient(90deg,rgba(184,151,90,0),#b8975a 12%,#b8975a 88%,rgba(184,151,90,0));transform-origin:left;animation:abLinie 1.6s var(--e1) .2s both}
@keyframes abLinie{from{transform:scaleX(0)}to{transform:none}}
.ab{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 20px 24px;border-radius:24px;color:#fbf4e4;background:var(--blau-k);box-shadow:var(--blau-s);
  animation:abAuf .8s var(--e1) both;animation-delay:calc(.25s + var(--i)*.22s)}
@keyframes abAuf{from{transform:translateY(24px)}to{transform:none}}
.ab__z{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;color:#0b1f40;background:linear-gradient(180deg,#f6e8c2,#c9ab6c);box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4),0 0 0 6px rgba(184,151,90,.16),0 12px 20px -10px rgba(0,0,0,.6);
  animation:abPuls 2.4s var(--e2) both;animation-delay:calc(.5s + var(--i)*.22s)}
@keyframes abPuls{0%{box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4),0 0 0 0 rgba(184,151,90,.5),0 12px 20px -10px rgba(0,0,0,.6)}60%,100%{box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4),0 0 0 14px rgba(184,151,90,0),0 12px 20px -10px rgba(0,0,0,.6)}}
.ab__z svg{width:21px;height:21px;stroke-width:1.5}
.ab .mono{color:var(--gold)}
.ab b{margin:6px 0 8px;font:500 25px/1.1 var(--serif);color:#fbf4e4}
.ab p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(251,244,228,.74)}
.ablauf__fuss{max-width:1180px;margin:18px auto 0;padding:16px 22px!important}
@media (max-width:1100px){.ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}.ablauf::before{display:none}}
@media (max-width:620px){.ablauf{grid-template-columns:1fr}}

/* ---------- Hinweis für Gäste: Miniatur der Website ---------- */
.mini-w>.mono{display:block;margin:0 0 12px}
.mini{border-radius:16px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(159,137,111,.25),0 30px 50px -30px rgba(11,31,64,.5),0 10px 20px -14px rgba(11,31,64,.3)}
.mini__leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:linear-gradient(180deg,#f3eee4,#e9e2d4);border-bottom:1px solid rgba(159,137,111,.25)}
.mini__leiste i{width:9px;height:9px;border-radius:50%;background:#d7cdb9}
.mini__leiste span{margin:0 auto;padding:3px 14px;border-radius:7px;background:#fff;font:9.5px var(--mono);letter-spacing:.06em;color:var(--leise)}
.mini__band{position:relative;padding:11px 18px;text-align:center;font:500 13px/1.45 var(--sans);color:#f4ecdc;background:#0b1f40;transition:opacity .4s}
.mini__band.aus{opacity:.5}
.mini__band em{display:inline-block;margin-right:10px;padding:2px 8px;border-radius:999px;font:normal 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#0b1f40;background:var(--gold);vertical-align:1px}
.mini__band u{color:#e6d2a2;text-underline-offset:3px}
.mini__seite{position:relative;height:250px;overflow:hidden}
.mini__seite>img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.mini__seite::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,43,.55),transparent 40%,rgba(6,20,43,.55))}
.mini__nav{position:absolute;z-index:1;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;background:rgba(11,31,64,.82)}
.mini__nav span{width:34px;height:3px;border-radius:2px;background:rgba(240,227,194,.6)}
.mini__nav img{width:16px;height:auto}
.mini__t{position:absolute;z-index:1;left:0;right:0;bottom:24px;text-align:center;color:#fbf4e4}
.mini__t small{display:block;font:8.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.mini__t b{display:block;margin-top:6px;font:500 28px/1 var(--serif)}
.mini-w>.leise{margin:12px 2px 0}

/* ---------- Sprachen: Beispiel ---------- */
.ue--bsp{position:relative;opacity:.92}
.ue--bsp::before{content:'Beispiel';position:absolute;right:22px;top:20px;padding:4px 10px;border-radius:999px;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#0b1f40;background:var(--gold)}
.ue--bsp input{cursor:default;color:var(--leise)!important}

/* ---------- Kopf einer Karte mit Miniatur oder Symbol; Symbole je Zeile ---------- */
.kh{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.kh>div{flex:1;min-width:0}
.kh h3{margin:0!important}
.kh p{margin:3px 0 0!important}
.kh__b{width:96px;height:64px;border-radius:12px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(159,137,111,.3),0 10px 18px -10px rgba(11,31,64,.5)}
.kh__z{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;color:#f6e8c2;background:linear-gradient(180deg,#1f3f77,#06142b);box-shadow:inset 0 1px 0 rgba(190,206,255,.3),0 0 0 1px rgba(210,191,152,.45),0 10px 16px -10px rgba(0,0,0,.6)}
.kh__z svg,.zl__z svg,.fz__z svg{width:18px;height:18px;stroke-width:1.5}
.zl{grid-template-columns:34px minmax(0,1fr) auto!important}
.zl__z,.fz__z{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--taupe-tief);background:rgba(184,151,90,.12);box-shadow:inset 0 0 0 1px rgba(184,151,90,.3)}
.zl__z svg,.fz__z svg{width:15px;height:15px}
.fz>span{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:center}
.fz>span .fz__z{grid-row:1/3}
.fz>span b,.fz>span small{grid-column:2}
.fz{grid-template-columns:260px minmax(0,1fr) auto}

/* ---------- Bureau: Reiter Texte / Fotos, Fotoraster ---------- */
.stellen__w{display:flex;margin:0 0 12px;width:100%}
.stellen__w button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.stellen__w svg{width:14px;height:14px}
.stellen__satz{margin:2px 4px 14px;font-size:12.5px}
.fotoraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fr{position:relative;display:flex;flex-direction:column;padding:6px;border:0;border-radius:16px;text-align:left;background:var(--blau-k);box-shadow:var(--blau-s);color:#fbf4e4;transition:transform .5s var(--e2)}
.fr:hover{transform:translateY(-3px)}
.fr__b{display:block;aspect-ratio:4/3;border-radius:11px;overflow:hidden;background:#06142b}
.fr__b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e1)}
.fr:hover .fr__b img{transform:scale(1.06)}
.fr__n{display:block;padding:8px 6px 4px}
.fr__n small{display:block;font:8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr__n b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font:500 14px/1.25 var(--serif);color:#fbf4e4}
.fr em{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:normal 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#0b1f40;background:linear-gradient(180deg,#f6e8c2,#c9ab6c);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s var(--e2)}
.fr em svg{width:11px;height:11px}
.fr:hover em,.fr:focus-visible em{opacity:1;transform:none}
.fr.geaendert{box-shadow:var(--blau-s),0 0 0 2px var(--gelb)}
/* Speisekarte auf Papier gestellt, wie ein Produktfoto; fünf Karten in einer Reihe */
.mc4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.mbuch{margin:-6px -8px 16px;height:210px;border-radius:16px;background:radial-gradient(70% 60% at 50% 38%,#fffdf8,#efe6d3 70%,#e2d5ba);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(210,191,152,.5),inset 0 -14px 24px -18px rgba(120,95,50,.35)}
.mbuch__d::after{background:radial-gradient(closest-side,rgba(60,45,20,.45),transparent)}
.ablauf::before{z-index:2;pointer-events:none}
.ab__z{position:relative;z-index:3}

/* ---------- Wahlschalter auf hellem Grund: Kuhle, gewählt = blaue Platte mit Goldschrift ---------- */
.filter .wahl2,.reiter .wahl2{background:var(--kuhle);box-shadow:var(--kuhle-s)}
.filter .wahl2 button,.reiter .wahl2 button{color:var(--leise)}
.filter .wahl2 button[aria-pressed="true"],.reiter .wahl2 button[aria-pressed="true"],.stellen__w button[aria-pressed="true"]{color:var(--goldhell)!important;background:linear-gradient(180deg,#1f3f77,#12305e 55%,#0a1d3c)!important;box-shadow:inset 0 1px 0 rgba(190,206,255,.3),inset 0 0 0 1px rgba(210,191,152,.5),0 8px 14px -8px rgba(6,20,43,.6)!important}

/* ---------- Le Registre ---------- */
.rg-bsp{background:var(--blau-k)!important;box-shadow:var(--blau-s)!important}
.rg-wenig,.rg-fuss{color:var(--leise)}
.rg-wenig .link,.rg-mehr .link,.rg-weitere{color:var(--taupe-tief)!important;text-decoration-color:rgba(159,137,111,.5)!important}
.rg-tag{color:var(--taupe-tief)}
.rg .kn--hellrand{color:var(--navy)}
.rg .rg-a{background:var(--blau-k);box-shadow:var(--blau-s);color:#fbf4e4}
.rg .rg-a b{color:#fbf4e4}
.rg .rg-a small{color:rgba(251,244,228,.7)}
.rg .rg-a .rg-a__l{color:var(--gold);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(210,191,152,.35)}
.rg .rg-a.aktiv{box-shadow:var(--blau-s),0 0 0 2px var(--gold)}
.rg .rg-a.gold .rg-a__l{color:#0b1f40;background:linear-gradient(180deg,#f6e8c2,#c9ab6c)}
.lg:not(:has(.lg__z)){display:block}

/* Kopf mit dem Team-Foto (Karriere): Hochformat im flachen Kopf, der Ausschnitt sitzt auf dem Gesicht, die Augen bleiben im Bild (Robert 15.10.2026) */
.buehne__foto:has(img[src*="/team-"]){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.buehne__foto img[src*="/team-"]{object-position:50% 13%}

/* ---------- Entwurf: Beispiel, solange nichts offen ist ---------- */
.ae-bsp{position:relative;max-width:1180px;margin:18px auto 0;padding:38px 0 0}
.ae-bsp::before{content:'Beispiel';position:absolute;top:0;left:0;padding:4px 10px;border-radius:999px;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#0b1f40;background:var(--gold)}
.ae-bsp .ae{opacity:.94}
.ae-bsp .ae__kn .link{cursor:default;opacity:.55}

/* ---------- Frühere Fassungen: lesbar auf hell, Beispiel als Zeitleiste ---------- */
.vl--ursprung{box-shadow:inset 0 0 0 1px rgba(159,137,111,.35)}
.vl--ursprung b{color:var(--navy)}.vl--ursprung span{color:var(--leise)}
.vl-bsp{position:relative;max-width:1080px;margin:18px auto 0;padding:38px 0 0 34px}
.vl-bsp::before{content:'Beispiel';position:absolute;top:0;left:0;padding:4px 10px;border-radius:999px;font:9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#0b1f40;background:var(--gold)}
.vl-bsp::after{content:'';position:absolute;left:12px;top:62px;bottom:70px;width:1px;background:linear-gradient(180deg,#b8975a,rgba(184,151,90,.15))}
.vl-bsp .vl{position:relative;justify-content:flex-start;background:var(--blau-k);box-shadow:var(--blau-s);color:#fbf4e4}
.vl-bsp .vl>div{flex:1;min-width:0}
.vl-bsp .vl b{color:#fbf4e4}.vl-bsp .vl span{color:rgba(251,244,228,.72)}
.vl-bsp .vl::before{content:'';position:absolute;left:-27px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:linear-gradient(180deg,#f6e8c2,#b8975a);box-shadow:0 0 0 4px rgba(184,151,90,.18)}
.vl__z{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#0b1f40;background:linear-gradient(180deg,#f6e8c2,#c9ab6c);box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4)}
.vl__z svg{width:17px;height:17px;stroke-width:1.5}
.vl__m{font:normal 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(210,191,152,.45)}
.vl-bsp .kn{cursor:default;opacity:.6}
.vl-bsp__satz{margin:14px 0 0}

/* ---------- La Carte im Bureau: die Originalkarten frei auf Papier, wie in L’Imprimerie ---------- */
.kt-flaeche{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:40px 30px;align-items:end;max-width:1180px;margin:0 auto;padding:56px 44px 44px;border-radius:28px;
  background:radial-gradient(80% 70% at 50% 30%,#fffdf8,#f6efe1 70%,#efe5d1);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.22),0 28px 50px -34px rgba(11,31,64,.35);perspective:1400px}
.kt{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--tinte);text-decoration:none;animation:ktRein 1s var(--e1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes ktRein{from{transform:translateY(28px)}to{transform:none}}
.kt__b{display:block;width:100%;max-width:200px;transform:rotate(var(--r,0deg));transition:transform .8s var(--e2)}
.kt__b img{display:block;width:100%;height:auto;aspect-ratio:1405/1988;object-fit:cover;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 3px rgba(11,31,64,.18),0 26px 34px -16px rgba(11,31,64,.55),0 50px 60px -40px rgba(11,31,64,.45)}
.kt:hover .kt__b{transform:rotate(0deg) translateY(-10px) scale(1.03)}
.kt b{margin-top:26px;font:500 23px/1.15 var(--serif);color:var(--navy)}
.kt small{margin-top:7px;font:9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-tief)}
.kt em{margin-top:8px;padding:4px 10px;border-radius:999px;font:normal 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#0b1f40;background:var(--gold)}

/* ---------- Seitenleiste: Übersicht grösser abgesetzt, Einträge reagieren beim Überfahren (Robert 15.10.2026) ---------- */
.nav>.nw:first-child{padding:13px 14px;margin-bottom:6px;font-size:20px;border-radius:15px;background:linear-gradient(180deg,#f6efe1,#ece2cd);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.28),0 8px 14px -10px rgba(11,31,64,.35)}
.nav>.nw:first-child[aria-current="true"]{background:linear-gradient(180deg,#163566,#0b1f40)}
.nw{transition:background .35s,box-shadow .35s,transform .45s var(--e2),color .3s}
@media (hover:hover){.nw:hover:not([aria-current="true"]){transform:translateX(5px);background:rgba(184,151,90,.12);color:var(--navy)}
  .wege a{transition:background .3s,color .3s,transform .45s var(--e2)}.wege a:hover{transform:translateX(4px)}}

/* ---------- Zeiten & Preise: Vorschau der Stelle beim Überfahren einer Zeile ---------- */
.zl-blick{position:fixed;z-index:60;width:440px;padding:8px 8px 10px;border-radius:20px;pointer-events:none;
  background:var(--blau-k);box-shadow:var(--blau-s),0 40px 70px -30px rgba(6,20,43,.65);
  opacity:0;transform:translateY(10px) scale(.94);transform-origin:70% 0;transition:opacity .3s ease,transform .5s var(--e1)}
.zl-blick.auf{opacity:1;transform:none}
.zl-blick__r{position:relative;width:424px;height:265px;border-radius:13px;overflow:hidden;background:#06142b}
.zl-blick__r iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform:scale(.2945);transform-origin:0 0;pointer-events:none}
.zl-blick.laedt .zl-blick__r::after{content:'Seite wird geladen …';position:absolute;inset:0;display:grid;place-items:center;font:9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);background:#06142b}
.zl-blick__t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:9px 6px 0}
.zl-blick__t b{font:500 16px var(--serif);color:#fbf4e4}
.zl-blick__t small{font:8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.zl{transition:background .3s}
@media (hover:hover){.zl:hover{background:rgba(184,151,90,.07);border-radius:12px}}
@media (hover:none){.zl-blick{display:none}}

/* ---------- Sprachen: Abstand, Weg in drei Schritten, wo der Satz auf der Website steht ---------- */
.leer-hinweis+.ue-weg,.leer-hinweis+.ae-bsp,.leer-hinweis+.vl-bsp{margin-top:26px}
.ue-weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1180px;margin:26px auto 26px}
.ue-weg__s{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:18px 20px;border-radius:20px;color:#fbf4e4;background:var(--blau-k);box-shadow:var(--blau-s);animation:abAuf .8s var(--e1) both;animation-delay:calc(.15s + var(--i)*.18s)}
.ue-weg__s i{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#0b1f40;background:linear-gradient(180deg,#f6e8c2,#c9ab6c);box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4)}
.ue-weg__s i svg{width:18px;height:18px;stroke-width:1.5}
.ue-weg__s b{font:500 21px/1.15 var(--serif);color:#fbf4e4}
.ue-weg__s span{margin-top:4px;font-size:13px;line-height:1.5;color:rgba(251,244,228,.74)}
.ue-wo{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:12px;border-radius:16px;background:var(--kuhle);box-shadow:var(--kuhle-s)}
.ue-wo img{width:120px;height:78px;object-fit:cover;border-radius:11px;flex:none;box-shadow:0 10px 18px -10px rgba(11,31,64,.5)}
.ue-wo small{display:block;font:9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-tief)}
.ue-wo b{display:block;margin:3px 0 2px;font:500 19px/1.2 var(--serif);color:var(--navy)}
.ue-wo span{font-size:13px;color:var(--leise)}
@media (max-width:900px){.ue-weg{grid-template-columns:1fr}}
.ue--bsp::before{top:-11px;right:26px;box-shadow:0 6px 12px -6px rgba(11,31,64,.4)}

/* ---------- Auftritt beim Öffnen einer Ansicht, wie Le Livre (studio/buehne.js setzt .feder und --fi) ---------- */
@keyframes feder{0%{transform:translate3d(0,46px,0) scale(.965)}100%{transform:none}}
.feder{animation:feder 1.15s cubic-bezier(.28,1.42,.42,1) both!important;animation-delay:calc(var(--fi,0) * 70ms)!important}
.ansicht-neu>*{animation:none}

/* Schliessen-Knopf der Fenster: goldenes Kreuz auf Marine, dreht sich beim Überfahren (Robert 15.10.2026: «das X oben in der Ecke») */
.fenster__zu{color:var(--goldhell)!important;transition:transform .5s var(--e2)}
.fenster__zu svg{width:15px;height:15px;stroke-width:1.7}
@media (hover:hover){.fenster__zu:hover{transform:rotate(90deg) scale(1.05)}}
/* «Übersicht» immer blau (Robert 15.10.2026), gewählt mit Goldkante */
.nav>.nw:first-child{color:#fbf4e4;background:linear-gradient(180deg,#3a4366,#12305e 55%,#0a1d3c);box-shadow:inset 0 1px 0 rgba(190,206,255,.3),inset 0 0 0 1px rgba(210,191,152,.45),0 12px 20px -12px rgba(6,20,43,.7)}
.nav>.nw:first-child[aria-current="true"]{box-shadow:inset 0 1px 0 rgba(190,206,255,.3),inset 0 0 0 1.5px var(--gold),0 12px 20px -12px rgba(6,20,43,.7)}
@media (hover:hover){.nav>.nw:first-child:hover:not([aria-current="true"]){color:#fbf4e4;background:linear-gradient(180deg,#434d74,#29304f 55%,#191d31)}}

/* ---------- Wahlschalter überall: Kuhle mit Tiefe, gewählt = blaue Platte mit Goldschrift und Lichtkante, Überfahren hebt an (Robert 15.10.2026: «richtig sexy») ---------- */
.wahl2:not(.wahl2--dunkel){padding:5px;gap:3px;border-radius:999px;background:linear-gradient(180deg,#e9dfca,#f1e9d9 45%,#f5eee2);
  box-shadow:inset 0 3px 7px -2px rgba(12,21,38,.2),inset 0 1px 0 rgba(12,21,38,.08),inset 0 0 0 1px rgba(159,137,111,.2),0 1px 0 #fff}
.wahl2:not(.wahl2--dunkel) button{position:relative;border-radius:999px;padding:10px 18px;color:rgba(12,21,38,.62);
  transition:color .35s,background .45s,box-shadow .45s,transform .45s var(--e2)}
@media (hover:hover){.wahl2:not(.wahl2--dunkel) button:not([aria-pressed="true"]):hover{color:var(--navy);transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(255,253,248,.95),rgba(246,239,225,.9));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(184,151,90,.28),0 6px 12px -8px rgba(12,21,38,.35)}}
.wahl2:not(.wahl2--dunkel) button[aria-pressed="true"]{color:var(--goldhell)!important;text-shadow:0 1px 1px rgba(0,0,0,.35);
  background:radial-gradient(120% 140% at 50% -40%,rgba(190,206,255,.35),transparent 60%),linear-gradient(180deg,#1f3f77,#12305e 55%,#151929)!important;
  box-shadow:inset 0 1px 0 rgba(190,206,255,.35),inset 0 0 0 1px rgba(210,191,152,.55),inset 0 -2px 0 rgba(0,0,0,.35),0 10px 16px -8px rgba(6,20,43,.6)!important}
.wahl2:not(.wahl2--dunkel) button:active{transform:translateY(1px) scale(.97)}
/* Goldlinie nur in den Lücken zwischen den Kacheln, nicht quer darüber (Robert 16.10.2026: «da geht so ein Strich durch die Kacheln») */
.ablauf::before{z-index:0!important}
.ab{position:relative;z-index:1}

/* ---------- Zeiten & Preise: Knopf «Zeigen» je Zeile, Mini-Film im Fenster (Robert 16.10.2026) ---------- */
.zl__kn{display:flex;align-items:center;gap:14px}
.zl__blick{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;border:0;border-radius:999px;font:9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--goldhell);
  background:linear-gradient(180deg,#1f3f77,#12305e 55%,#0a1d3c);box-shadow:inset 0 1px 0 rgba(190,206,255,.3),inset 0 0 0 1px rgba(210,191,152,.45),0 8px 14px -8px rgba(6,20,43,.6);transition:transform .4s var(--e2)}
.zl__blick svg{width:13px;height:13px}
@media (hover:hover){.zl__blick:hover{transform:translateY(-2px)}.zl:hover{background:none}}
.zl{grid-template-columns:34px minmax(0,1fr) auto!important}
.zl-blick{width:560px;pointer-events:auto}
.zl-blick__r{width:544px;height:340px}
.zl-blick__r iframe{transform:scale(.3778);transform-origin:0 0;will-change:auto}
.zl-blick__kreis{position:absolute;border-radius:50%;border:2.5px solid #e6c46f;box-shadow:0 0 0 4px rgba(230,196,111,.25),0 0 30px rgba(230,196,111,.55);
  opacity:0;transform:scale(1.5);transition:opacity .35s ease,transform .7s cubic-bezier(.34,1.3,.5,1);pointer-events:none}
.zl-blick__kreis.an{opacity:1;transform:none}
.zl-blick__t{align-items:center}
.zl-blick__t b{flex:1}
.zl-blick__t .link{color:var(--goldhell);text-decoration-color:rgba(240,227,194,.45);font-size:12px}

/* ---------- Hinweis für Gäste: grosse Vorschau mittig, Gestaltung des Banners (Robert 16.10.2026) ---------- */
.hw-vor{max-width:980px;margin:0 auto 26px;text-align:center}
.hw-vor>.mono{display:block;margin:0 0 12px}
.mini--gross{text-align:left}
.mini--gross .mini__seite{height:380px}
.mini--gross .mini__t b{font-size:40px}
.mini__band{padding:14px 22px;transition:background .4s,color .4s}
.mini__band u{color:var(--lk,#e6d2a2)}
.hw-vor>.leise{margin-top:12px}
.hw-stil{max-width:980px;margin:0 auto 22px}
.hw-stil h3{margin:0 0 12px}
.hw-z{display:flex;align-items:center;gap:18px;padding:8px 0}
.hw-z>.mono{min-width:70px}
.hw-wahl{flex-wrap:wrap}
.hw-wahl button{display:inline-flex;align-items:center;gap:8px}
.hw-wahl i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px rgba(255,255,255,.6)}
.hw-arbeit{grid-template-columns:minmax(0,980px)!important;justify-content:center}

/* ---------- Häufig gebraucht: Foto des Hauses oben in jeder Kachel, Symbol darauf (Robert 16.10.2026) ---------- */
.ag--foto{padding:6px 6px 18px!important;gap:4px}
.ag__b{display:block;width:100%;aspect-ratio:16/8.5;border-radius:16px;overflow:hidden;background:#06142b;box-shadow:inset 0 0 0 1px rgba(210,191,152,.25)}
.ag__b img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.4s var(--e1);filter:saturate(.95)}
@media (hover:hover){.ag--foto:hover .ag__b img{transform:scale(1.08)}}
.ag--foto .ag__z{margin:-24px 0 4px 14px;position:relative;z-index:1;border-radius:50%!important;width:44px!important;height:44px!important;color:#0b1f40!important;
  background:linear-gradient(180deg,#f6e8c2,#c9ab6c)!important;box-shadow:inset 0 1px 0 #fffbe9,inset 0 -2px 0 rgba(92,66,24,.4),0 8px 14px -6px rgba(0,0,0,.6)!important}
.ag--foto b,.ag--foto span:not(.ag__b){padding:0 14px}
.ag--foto em{top:16px!important;right:16px!important}

/* «Zeigen» neu (Robert 16.10.2026: «Buttons dunkel, falsch platziert, zu schnell, gelber Kreis auf gelber Fläche»):
   heller Knopf wie «Seite öffnen», Fenster gross in der Mitte über leicht abgedunkelter Seite, ruhiger Zoom, Stelle ausgeleuchtet */
.zl__blick{color:var(--tinte,#0b1f40)!important;background:linear-gradient(180deg,#fffaf0,#efe4cc)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.45),0 10px 18px -10px rgba(6,20,43,.45)!important;height:36px;padding:0 15px 0 12px}
.zl__blick svg{color:var(--messing,#8a7545)}
.zl-schleier{position:fixed;inset:0;z-index:59;background:rgba(6,20,43,.42);visibility:hidden;transition:visibility 0s .35s,background-color .35s ease}
.zl-schleier:not(.auf){background:rgba(6,20,43,0)}
.zl-schleier.auf{visibility:visible;transition:visibility 0s,background-color .35s ease}
.zl-blick{left:50%!important;top:50%!important;width:min(980px,calc(100vw - 48px))!important;padding:12px 12px 14px!important;border-radius:26px!important;
  background:linear-gradient(180deg,#fffaf0,#f3eadb)!important;box-shadow:0 0 0 1px rgba(159,137,111,.35),0 50px 90px -30px rgba(6,20,43,.6)!important;
  opacity:1!important;visibility:hidden;transform:translate(-50%,calc(-50% + 60px)) scale(.94)!important;transition:visibility 0s .5s,transform .5s var(--e1)!important}
.zl-blick.auf{visibility:visible;transform:translate(-50%,-50%)!important;transition:visibility 0s,transform .9s cubic-bezier(.28,1.3,.42,1)!important}
.zl-blick__r{width:100%!important;height:auto!important;aspect-ratio:1440/860;border-radius:16px!important;background:#f3eadb!important}
.zl-blick.laedt .zl-blick__r::after{background:#f3eadb!important;color:var(--messing,#8a7545)!important}
.zl-blick__kreis{border-radius:14px!important;border:2px solid #fff!important;
  box-shadow:0 0 0 2px #0b1f40,0 0 0 9999px rgba(6,20,43,0)!important;transform:scale(1.25)!important;visibility:hidden;opacity:1!important;
  transition:transform .8s cubic-bezier(.28,1.3,.42,1),box-shadow .6s ease,visibility 0s .6s!important}
.zl-blick__kreis.an{visibility:visible;transform:none!important;box-shadow:0 0 0 2px #0b1f40,0 0 0 9999px rgba(6,20,43,.5)!important;transition:transform .8s cubic-bezier(.28,1.3,.42,1),box-shadow .6s ease,visibility 0s!important}
.zl-blick__t{display:flex;align-items:center;gap:14px;margin:14px 8px 2px!important}
.zl-blick__t>span{flex:1;display:flex;flex-direction:column;gap:3px}
.zl-blick__t small{font:9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--messing,#8a7545)}
.zl-blick__t b{font:500 22px var(--serif)!important;color:#0b1f40!important}
.zl-blick__kn{height:40px;padding:0 20px;border:0;border-radius:999px;font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f6efe0;cursor:pointer;
  background:linear-gradient(180deg,#1f3f77,#12305e 55%,#0a1d3c);box-shadow:inset 0 1px 0 rgba(190,206,255,.3),0 8px 14px -8px rgba(6,20,43,.6);transition:transform .4s var(--e2)}
.zl-blick__zu{width:40px;height:40px;border-radius:50%;border:1px solid rgba(159,137,111,.5);background:#fffaf0;color:#8a7545;font:300 24px/1 var(--serif);cursor:pointer;transition:transform .4s var(--e2)}
@media (hover:hover){.zl-blick__kn:hover,.zl-blick__zu:hover{transform:translateY(-2px)}}
/* Hinweis-Vorschau in den echten Farben (Robert 16.10.2026: «Marine sieht aus wie grau, Rot wie rosa»): nie halb durchsichtig */
.mini__band.aus{opacity:1}
.zl-blick__kn{color:#0b1f40!important;background:linear-gradient(180deg,#fffaf0,#efe4cc)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(159,137,111,.45),0 10px 18px -10px rgba(6,20,43,.45)!important}
.zl-blick__zu{font-size:26px!important;color:#0b1f40!important}
.zl-blick:not(.auf) .zl-blick__kreis{visibility:hidden!important}
/* Schweben, Pulsieren, Zoom für die Werkzeuge (Gefühl der Carlton-Seiten, wie in Le Registre). Gehört zu schweben.js.
   Jedes Blatt trägt data-sw. Wo der Browser Scroll-Zeitachsen kann, wird es am Scrollen aus der Tiefe hochgeführt (sw-zug, gebunden an den Einzug
   entry 0% bis 100%, nichts bleibt am Seitenende hängen); im Bild (.sw-da) federt es zusätzlich nach der Uhr in seine Grösse (sw-puls).
   Viele gleiche Zeilen (data-sw="z") blenden nur sanft ein. Nur translate, scale, opacity. Muss nach studio.css geladen werden. */
:root{--sw-feder:cubic-bezier(.3,1.26,.4,1)}
@keyframes sw-zug{from{translate:0 var(--weg,100px)}}
@keyframes sw-puls{from{scale:var(--kl,.93)}}
@keyframes sw-zoom{from{scale:1.18}}
[data-sw]{--weg:clamp(60px,7vw,110px)}
h2[data-sw],[data-sw="k"]{--weg:clamp(30px,3.2vw,48px);--kl:.97}
/* Nach der Uhr, nicht am Scrollen (Robert 16.10.2026): sobald ein Blatt auftaucht, schwebt es in 1,5 s mit leichter Feder an seinen Platz, immer deckend */
/* Rezeptur der Carlton-Landingpage (Robert 16.10.2026: «hochgeschwebt mit diesem Reinzoomen, leicht federnd, das will ich haben»):
   Blatt aus clamp(80px,9vw,140px) Tiefe und 93 %, 2,7 s Feder (.28,1.42,.42,1), Staffel 100 ms; das Foto darin zoomt gleichzeitig von 108 % in Ruhe */
@keyframes sw-feder{from{translate:0 clamp(80px,9vw,140px);scale:.93}}
@keyframes sw-bild{from{scale:1.08}}
[data-sw]:not(.sw-da){translate:0 clamp(80px,9vw,140px);scale:.93}
[data-sw].sw-da{animation:sw-feder 2.7s cubic-bezier(.28,1.42,.42,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
[data-sw].sw-da img{animation:sw-bild 2.8s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
/* Zahlen zoomen aus einer Vergrösserung herein; schmale Box, damit nichts seitlich überläuft */
[data-swz]{width:fit-content;max-width:100%;transform-origin:0 70%}
[data-swz].sw-da{animation:sw-zoom 1.7s var(--sw-feder) backwards;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
/* Viele gleiche Zeilen: nur sanft einblenden, kein Weg, keine Feder */
[data-sw="z"],[data-sw="z"].sw-da{animation:none;translate:none;--weg:0px}
[data-sw="z"]{scale:.985;transition:opacity 1s var(--e1),scale 1.2s var(--e1);transition-delay:calc(var(--i,0) * 30ms)}
[data-sw="z"].sw-da{opacity:1;scale:1}
/* Später dazugekommene Teile (Eingabe, Neuzeichnen): sofort ruhig an ihrem Platz */
.sw-ruhig,.sw-ruhig.sw-da{animation:none!important;transition:none!important;translate:none!important;scale:none!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){[data-sw],[data-swz]{animation:none!important;transition:none!important;translate:none!important;scale:none!important;opacity:1!important}}

/* ================================================================ KLEID DES CARLTON (eigenes, nicht aus der Vorlage) */
/* Eingebettete Ansichten des Carlton (Listen, Karte & Wein, Menü & Seiten, Bilder, Eingang …) */
.einbett{position:relative;border-radius:24px;overflow:hidden;background:var(--platte);box-shadow:var(--platte-s)}
.einbett iframe{display:block;width:100%;height:calc(100vh - var(--kopf) - var(--leiste) - 80px);min-height:520px;border:0;background:transparent}
.einbett .lade-schleier{border-radius:inherit}
.einbett.laedt .lade-schleier{opacity:1}
.stellen__listen .einbett{border-radius:16px;box-shadow:none;background:transparent}
.stellen__listen .einbett iframe{height:calc(100vh - var(--kopf) - var(--leiste) - 190px)}
.arbeit--listen{grid-template-columns:minmax(0,1.2fr) minmax(380px,1fr)}
.st--angabe small{color:var(--taupe-tief)}
.ed--angabe .feld{display:block;margin:10px 0 0}
.ed--angabe .feld>span{display:block;margin-bottom:6px;font-size:13px}
.ed--angabe input{width:100%;height:44px;border:0;border-radius:12px;padding:0 14px;background:var(--kuhle);box-shadow:var(--kuhle-s);font:15px var(--sans)}
.ed--angabe .kn{margin-top:10px}

/* ---- Lage als Billett des Hauses (Jugendstil-Billett der Website, «Abriss» zwischen den Feldern) ---- */
.lage{--kerbe:radial-gradient(circle at 50% 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat,radial-gradient(circle at 50% 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat}
.lage::before{content:'';position:absolute;inset:14px;border-radius:16px;border:1px solid rgba(220,198,143,.18);pointer-events:none}
.lg+.lg::before{width:0;top:14px;bottom:14px;background:none;border-left:1.5px dashed rgba(220,198,143,.42)}
.lg+.lg::after{content:'';position:absolute;left:-10px;top:-12px;width:20px;height:20px;border-radius:50%;background:#f4efe5;box-shadow:inset 0 -1px 0 rgba(220,198,143,.35)}
.lg+.lg>.lg__z+span::before{content:none}
.lage .lg:not(:first-child)::after{}
.lage>.lg+.lg{position:relative}
.lage>.lg+.lg>.mono::before{content:'';position:absolute;left:-10px;bottom:-12px;top:auto;width:20px;height:20px;border-radius:50%;background:#f4efe5}
.lage .lg{overflow:visible}

/* ---- Kacheln «Häufig gebraucht»: blau, mit kleinem Foto statt breitem Bild (Robert 15.10.2026: «kleine Miniaturbilder»), Neigung zur Maus ---- */
.ag--foto{padding:20px 20px 18px!important;gap:5px;perspective:none}
.ag--foto .ag__b{width:84px;aspect-ratio:7/5;border-radius:12px;margin:0 0 10px;box-shadow:0 0 0 1px rgba(220,198,143,.6),0 12px 20px -10px rgba(0,0,0,.7)}
.ag--foto .ag__z{position:absolute!important;margin:0!important;left:84px;top:52px;width:34px!important;height:34px!important}
.ag--foto b,.ag--foto span:not(.ag__b){padding:0!important}
.ag,.bk{--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .35s var(--e2),box-shadow .5s var(--e2)}
@media (hover:hover){.ag:hover,.bk:hover{transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry))}}
.aufgaben,.bereiche{perspective:1200px}

/* ---- Bereiche: Foto im Jugendstil-Bogen, wie die Bögen der Karte auf der Website ---- */
.bk__b{border-radius:120px 120px 16px 16px/70px 70px 16px 16px}
.bk__o{top:24px}

/* ---- Rand: Goldlinie und Einrücken beim Darüberfahren (Robert 15.10.2026), der gewählte Bereich bleibt dunkel ---- */
.nw::before{content:'';position:absolute;left:4px;top:50%;width:3px;height:0;border-radius:2px;background:linear-gradient(180deg,#f7e6b2,#b3913f);transform:translateY(-50%);transition:height .45s var(--e2)}
@media (hover:hover){.nw:not([aria-current="true"]):hover{transform:translateX(4px);background:linear-gradient(90deg,rgba(220,198,143,.28),rgba(220,198,143,.04))}.nw:not([aria-current="true"]):hover::before{height:18px}}
.nw{transition:background .35s,box-shadow .35s,transform .45s var(--e2)}

/* ---- Zwischentitel mit der Raute des Hauses ---- */
h2.zw::before{content:'';flex:none;width:9px;height:9px;margin-right:4px;transform:rotate(45deg) translateY(-3px);background:linear-gradient(135deg,#f7e6b2,#b3913f);box-shadow:0 0 0 3px rgba(220,198,143,.2)}
/* Reiter und Seitenwahl: nie umbrechen; auf schmalen Bildschirmen seitlich wischen statt die Seite zu verbreitern */
.stellen__w button,.reiter .wahl2 button{white-space:nowrap}
.stellen__w{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}.stellen__w button{flex:1 1 auto;padding:9px 10px}
@media (max-width:860px){.reiter{max-width:100%;flex-wrap:wrap}.reiter .wahl2{max-width:100%;overflow-x:auto;scrollbar-width:none}.vorschau__k{flex-wrap:wrap}}
/* Zeiten & Preise am Handy: «Zeigen» und «In der Seite» unter das Feld statt daneben (lief sonst 30 px über den Rand) */
@media (max-width:560px){.zl{grid-template-columns:34px minmax(0,1fr)!important}.zl__kn{grid-column:2;justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:860px){.fz{grid-template-columns:minmax(0,1fr)!important}.fz>*{grid-column:1!important}}