/* ================================================================== Colosseum Graz – Stylesheet der Vorlage colosseumgraz, Richtung „Imperium“ Quelle: der Generator lokal/colosseum/redesign/ (assets/site.css), fast unverändert übernommen: Schriftpfade auf ../fonts/, die Regel zum Verbergen der Damen-Wand bis zum Ordnen gestrichen, ergänzt am Ende: Sprachwahl der Jobseite. Änderungen der Gestaltung zuerst im Generator. Schwarz und Gold führen; Rot und Violett kommen nur aus den Fotos. Alles steht auf der Mittelachse – auch der Auftakt: Foto randvoll, die Inschrift unten wie auf einem Kinoplakat. Gliederung: Schriften · Grundlagen · Schrift · Abschnitt · Knopf · Lampe und Status · Kopfleiste · Menü · Hoch-Knopf · Mäander · Auftakt · Seitenkopf · Tempel · Video mit Lichthof · Bildband · Karte/Diptychon · Eintritt (Karten, Uhr) · Arkade · Damen · Aktionen · Münzen · Kontakt · Galerie · Fuß · Alterssperre · Unterseiten (Köpfe, Damen, Profil, Galerie, Leuchte, Über uns, Aktionen, Services, Escort, Kontakt, Formulare, Jobs, Rechtstexte) · Licht · Bewegung reduzieren ================================================================== */ @font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap; src:url("../fonts/cinzel-wght.ttf") format("truetype")} @font-face{font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/ptserif-regular.woff2") format("woff2")} @font-face{font-family:"PT Serif";font-style:italic;font-weight:400;font-display:swap; src:url("../fonts/ptserif-italic.woff2") format("woff2")} @font-face{font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/ptserif-bold.woff2") format("woff2")} :root{ --nacht:#000000; --basalt:#0d0b08; --gold:#D09742; --hellgold:#FFD597; --marmor:#EFE6D6; --sand:#BBAC90; --linie:rgba(208,151,66,.32); --linie2:rgba(208,151,66,.62); --rand:clamp(1.25rem,5vw,5rem); --breite:1320px; --disp:"Cinzel","PT Serif",Georgia,serif; --text:"PT Serif",Georgia,"Times New Roman",serif; --weich:cubic-bezier(.2,.6,.2,1); --goldverlauf:linear-gradient(112deg,#C58D3B 0%,#FFD597 24%,#D9A353 44%,#FFE3B0 58%,#D09742 76%,#FFD597 100%); /* Pilaster (18 px breit): Kapitell, Basis, drei Kannelurlinien */ --pilaster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M.5.5h17v3H.5zM2.5 3.5h13l-2.5 5h-8zM4 11h10' fill='%23000' stroke='%23D09742'/%3E%3C/svg%3E") center top/18px 12px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M3.5.5h11v3h-11zM1.5 3.5h15v3h-15zM.5 6.5h17v3H.5z' fill='%23000' stroke='%23D09742'/%3E%3C/svg%3E") center bottom/18px 10px no-repeat, linear-gradient(90deg,transparent 4px,rgba(208,151,66,.7) 4px,rgba(208,151,66,.7) 5px,transparent 5px,transparent 8.5px,rgba(208,151,66,.4) 8.5px,rgba(208,151,66,.4) 9.5px,transparent 9.5px,transparent 13px,rgba(208,151,66,.7) 13px,rgba(208,151,66,.7) 14px,transparent 14px) center 12px/18px calc(100% - 22px) no-repeat, #000; } /* ---------- Grundlagen ---------- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--nacht);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--nacht);color:var(--marmor);font-family:var(--text); font-size:1.125rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{display:block;max-width:100%;height:auto} a{color:inherit} p{margin:0} h1,h2,h3{margin:0;font-weight:inherit} ul,dl,figure{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--hellgold);outline-offset:4px} ::selection{background:var(--gold);color:#000} .unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} html.tor-offen body{overflow:hidden} .sprung{position:absolute;left:1rem;top:-10rem;z-index:300;padding:.7rem 1rem;background:#000;color:var(--hellgold); border:1px solid var(--gold);font-family:var(--disp);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase} .sprung:focus{top:1rem} /* ---------- Schrift ---------- */ .inschrift{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.14em; padding-left:.14em;font-size:clamp(1.9rem,4.6vw,4.4rem);line-height:1.1;color:var(--hellgold);text-wrap:balance; -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} .inschrift--frage{font-weight:600;letter-spacing:.1em;padding-left:.1em;font-size:clamp(1.3rem,2.1vw,1.95rem);line-height:1.3} .vorspann{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.62;max-width:36em;margin:1.3rem auto 0;text-wrap:pretty} .zeile{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:.76rem;line-height:1.5} .verweis{color:var(--hellgold);text-decoration:underline;text-decoration-color:var(--linie2); text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color .4s} .verweis:hover{text-decoration-color:var(--hellgold)} .notiz{text-align:center;max-width:38em;margin:clamp(2rem,4vw,3rem) auto 0;color:var(--marmor);text-wrap:pretty} .notiz+.wege{margin-top:1.3rem} .hinweis{max-width:52em;margin:clamp(1.8rem,3.4vw,2.6rem) auto 0;font-size:.95rem;line-height:1.6;color:var(--sand);text-align:center} /* ---------- Abschnitt und Kopf ---------- */ .tafel{position:relative;padding:clamp(2.9rem,5.2vw,4.8rem) var(--rand)} .tafel__innen{max-width:var(--breite);margin-inline:auto} .tafel--anschluss{padding-top:0} .tafelkopf{text-align:center;margin:0 auto clamp(2rem,3.8vw,3.4rem)} .zweig{display:block;width:160px;height:24px;margin:0 auto 1.4rem;color:var(--gold)} [id]{scroll-margin-top:72px} /* ---------- Knopf: gravierte Messingplatte ---------- */ .knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px; padding:.55rem 1.9rem .55rem calc(1.9rem + .2em);overflow:hidden;cursor:pointer;border:0;text-align:center; font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.3; text-decoration:none;color:#000;background:var(--gold);transition:background .6s,color .6s} .knopf::before{content:"";position:absolute;inset:4px;border:1px solid rgba(0,0,0,.5);pointer-events:none} .knopf::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg); transition:left 1.3s var(--weich)} .knopf--linie{background:rgba(0,0,0,.55);color:var(--hellgold);box-shadow:inset 0 0 0 1px var(--gold)} .knopf--linie::before{border-color:rgba(208,151,66,.38)} .knopf--linie::after{background:linear-gradient(100deg,transparent,rgba(255,213,151,.28),transparent)} /* Hover nur mit Maus: am Telefon bliebe der Zustand nach dem Tippen stehen (z. B. "Ok" der Alterssperre über "Zu den Damen") */ @media(hover:hover){ .knopf:hover{background:var(--hellgold)} .knopf:hover::after{left:125%} .knopf--linie:hover{background:rgba(208,151,66,.16);color:#fff} } .wege{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 1.1rem;margin-top:clamp(1.8rem,3.4vw,2.8rem)} /* ---------- Lampe und Status ---------- */ .lampe{position:relative;display:inline-block;flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--hellgold); box-shadow:0 0 .5em .1em rgba(255,213,151,.85),0 0 1.5em .25em rgba(208,151,66,.45)} .lampe::after{content:"";position:absolute;inset:-.45em;border-radius:50%;border:1px solid var(--hellgold);opacity:0; animation:lampe 2.8s ease-out infinite} @keyframes lampe{0%{opacity:.75;transform:scale(.45)}100%{opacity:0;transform:scale(1.45)}} .status{display:inline-flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:.8rem;line-height:1.3;white-space:nowrap} .status i{flex:none;width:.6em;height:.6em;border-radius:50%} .status--verfuegbar{color:var(--hellgold)} .status--verfuegbar i{background:var(--hellgold);box-shadow:0 0 .45em .08em rgba(255,213,151,.8)} .status--neu{color:#000;background:var(--hellgold);padding:.28em .7em .28em .86em} .status--neu i{display:none} .status--abwesend{color:var(--sand)} .status--abwesend i{border:1px solid var(--sand)} /* ---------- Kopfleiste ---------- */ .kopf{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:clamp(1rem,2.4vw,2.4rem);border-bottom:1px solid transparent; padding:calc(1.1rem + env(safe-area-inset-top,0px)) calc(var(--rand) + env(safe-area-inset-right,0px)) 1.1rem calc(var(--rand) + env(safe-area-inset-left,0px)); background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0)) border-box no-repeat; transition:background .5s,padding .5s,border-color .5s} .kopf.dicht{background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border-bottom-color:var(--linie);padding-top:calc(.65rem + env(safe-area-inset-top,0px));padding-bottom:.65rem} .kopf__seite{display:flex;align-items:center;justify-content:space-between;gap:clamp(1.2rem,2.1vw,2.2rem)} .kopf__gruppe{display:flex;align-items:center;gap:clamp(1.2rem,2.1vw,2.2rem)} .kopf__nav a,.kopf__ruf{position:relative;font-family:var(--disp);font-weight:600;font-size:.74rem; letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--marmor); padding:.9rem 0;white-space:nowrap;transition:color .4s} .kopf__nav a::after{content:"";position:absolute;left:0;right:.22em;bottom:.55rem;height:1px; background:var(--gold);transform:scaleX(0);transition:transform .6s var(--weich)} .kopf__nav a:hover,.kopf__nav a[aria-current]{color:var(--hellgold)} .kopf__nav a:hover::after,.kopf__nav a[aria-current]::after{transform:scaleX(1)} .kopf__ruf{color:var(--sand);letter-spacing:.16em} .kopf__ruf:hover{color:var(--hellgold)} .kopf__marke{position:relative;display:grid;place-items:center;min-width:176px;height:44px;text-decoration:none} .kopf__marke .marke{font-size:1.5rem;transition:opacity .6s,transform .6s} .kopf__marke i{position:absolute;width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg); opacity:0;transition:opacity .5s} /* Startseite: oben steht die große Inschrift – die Wortmarke kommt erst beim Scrollen */ .seite--start .kopf__marke .marke{opacity:0;transform:translateY(4px)} .seite--start .kopf__marke i{opacity:1} .seite--start .kopf.dicht .kopf__marke .marke{opacity:1;transform:none} .seite--start .kopf.dicht .kopf__marke i{opacity:0} .kopf .knopf{min-height:44px;font-size:.72rem;padding-inline:calc(1.3rem + .2em) 1.3rem} .kopf__rund{display:none;width:44px;height:44px;border:1px solid var(--linie2);border-radius:50%; align-items:center;justify-content:center;background:rgba(0,0,0,.35);cursor:pointer;text-decoration:none; color:var(--hellgold);padding:0} .kopf__rund svg{width:18px;height:18px} .kopf__rund i{display:block;width:16px;height:1.5px;background:var(--hellgold);position:relative} .kopf__rund i::before,.kopf__rund i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--hellgold)} .kopf__rund i::before{top:-5px} .kopf__rund i::after{top:5px} @media(max-width:1239px){ .kopf__nav,.kopf__ruf,.kopf .knopf{display:none} .kopf__rund{display:flex} .kopf__seite--r{justify-content:flex-end} } @media(max-width:860px){ /* Am Telefon läuft die Leiste mit hinaus (Safari 26, siehe Übertragsdokument). */ .kopf{position:absolute;background:none} .kopf.dicht{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent; padding-top:calc(1.1rem + env(safe-area-inset-top,0px));padding-bottom:1.1rem} .kopf__marke{min-width:0} .kopf__marke .marke{font-size:1.25rem} .seite--start .kopf.dicht .kopf__marke .marke{opacity:0} .seite--start .kopf.dicht .kopf__marke i{opacity:1} } /* ---------- Wortmarke (Cinzel statt des weichen Video-Logos) ---------- */ .marke{display:inline-block;font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1; letter-spacing:.06em;padding-left:.06em;color:var(--hellgold);white-space:nowrap; background:var(--goldverlauf);background-size:180% 100%;background-position:30% 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ---------- Vollbildmenü ---------- */ .blatt{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;overflow-y:auto; background:rgba(0,0,0,.97);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px); padding:calc(4.6rem + env(safe-area-inset-top,0px)) var(--rand) calc(2rem + env(safe-area-inset-bottom,0px)); opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s} .blatt.offen{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s 0s} .blatt__innen{margin:auto;width:100%;max-width:30rem;text-align:center} .blatt__marke{display:inline-block;margin:0 auto 1.6rem;text-decoration:none} .blatt__marke .marke{font-size:2.3rem} .blatt__liste{border-block:1px solid var(--linie);padding:.7rem 0} .blatt__liste a{display:block;font-family:var(--disp);font-weight:500;text-transform:uppercase; letter-spacing:.16em;padding:.5em 0 .5em .16em;font-size:clamp(1.35rem,6.4vw,2.1rem);line-height:1.15; text-decoration:none;color:var(--marmor);transition:color .4s,letter-spacing .7s var(--weich)} .blatt__liste a:hover,.blatt__liste a:focus-visible,.blatt__liste a[aria-current]{color:var(--hellgold);letter-spacing:.22em} .blatt__liste li:first-child a{color:var(--hellgold)} .blatt__fuss{margin-top:1.5rem;display:flex;flex-direction:column;gap:.2rem;align-items:center} .blatt__fuss a{padding:.55rem .5rem;text-decoration:none;color:var(--sand)} .blatt__fuss a.zeile{color:var(--hellgold)} .blatt__zu{position:absolute;top:calc(1.1rem + env(safe-area-inset-top,0px));right:var(--rand);min-height:44px; padding:0 .2rem;background:none;border:0;cursor:pointer;color:var(--hellgold)} /* ---------- Hoch-Knopf mit Lesefortschritt ---------- */ .hoch{position:fixed;z-index:150;right:calc(var(--rand) + env(safe-area-inset-right,0px)); bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));width:54px;height:54px;border:0;padding:0; border-radius:50%;cursor:pointer;display:grid;place-items:center;background:rgba(0,0,0,.74); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden; transform:translateY(14px) scale(.92);transition:opacity .45s,transform .45s,visibility 0s .45s} .hoch.da{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s,visibility 0s} .hoch svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .hoch circle{fill:none;stroke-width:1.5} .hoch__bahn{stroke:var(--linie)} .hoch__fort{stroke:var(--hellgold);stroke-linecap:round} .hoch i{display:block;width:11px;height:11px;margin-top:4px;border-top:1.5px solid var(--hellgold); border-left:1.5px solid var(--hellgold);transform:rotate(45deg)} /* ---------- Mäander ---------- */ .maeander{height:33px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='33' viewBox='0 0 30 33'%3E%3Cpath d='M0 28.5H30M.5 28.5V4.5H24.5V22.5H6.5V10.5H18.5V16.5H12.5' fill='none' stroke='%23D09742' stroke-width='1'/%3E%3C/svg%3E") center top/30px 33px repeat-x; -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);opacity:.75} /* ---------- Tafel mit Griffen (ansa): Kopftafel der Unterseiten, bausteine.kopftafel ---------- */ .tabula{position:relative;width:fit-content;max-width:100%;text-align:center; padding:clamp(1.3rem,2.8vw,2.6rem) clamp(1rem,3.4vw,3.4rem) clamp(1.4rem,3vw,2.8rem); background:rgba(0,0,0,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .tabula::before{content:"";position:absolute;inset:0;border:1px solid var(--linie2);pointer-events:none} .tabula::after{content:"";position:absolute;inset:7px;border:1px solid var(--linie);pointer-events:none} .tabula__ansa{position:absolute;top:50%;height:56%;width:auto;aspect-ratio:60/200;color:var(--gold);display:none} .tabula__ansa--l{right:100%;margin-right:-1px;transform:translateY(-50%)} .tabula__ansa--r{left:100%;margin-left:-1px;transform:translateY(-50%) scaleX(-1)} /* ---------- Jetzt-Zeile „Es ist HH:MM Uhr. Wir haben geöffnet.“ (Kontakt; im Auftakt als Pille) ---------- */ .jetzt{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:clamp(1.3rem,2.4vw,2rem); font-style:italic;font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.35;color:var(--hellgold); font-variant-numeric:tabular-nums;text-wrap:balance} /* === Auftakt (2026-10-14) === */ /* Kinoauftakt, randvoll (Startseite, seiten/start.py → auftakt()). Das Foto füllt den ersten Bildschirm: warm gegradet, Vignette, langsame Drift auf das Hauptmotiv zu, feines Filmkorn. Darüber zwei langsam schwenkende Lichtkegel und aufsteigender Goldstaub. Unten die Inschrift: „Willkommen im“ zwischen Haarlinien, COLOSSEUM in Metallgold über fast die ganze Breite (Lichtschimmer beim Laden, dann alle 9 s), Leitsatz, Uhrzeile als leuchtende Pille, zwei Knöpfe; darunter Scroll-Hinweis und Laufband. Ebenen: Bild -3 · Licht -2 · Staub -1 · Inhalt. Bewegt werden transform und opacity; nur der Schimmer verschiebt kurz den Hintergrund der Wortmarke. Ohne Skript steht alles sofort da – der gestaffelte Auftritt läuft nur unter html.js.bereit (site.js setzt „bereit“, sobald die Alterssperre zu ist). Außer Sicht ruht die Bewegung (.ruht, site.js). Reduzierte Bewegung: alles steht, auch das Laufband (eine Zeile, Ränder laufen weich aus). */ .auftakt{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center; min-height:100vh;min-height:100svh;background:#000;text-align:center; padding-top:calc(5.6rem + env(safe-area-inset-top,0px));--weg:clamp(2.6rem,6svh,4rem)} /* Bild: randvoll; das Gesicht steht im oberen Drittel, die Drift zoomt langsam darauf zu */ .auftakt__bild{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#000} .auftakt__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 24%; transform-origin:45% 28%;transform:scale(1.03);filter:sepia(.14) saturate(1.2) contrast(1.08) brightness(1.05); animation:auftakt-drift 36s ease-in-out infinite alternate} /* Filmkorn: feines Rauschen, stehend (ruhiger als flimmerndes Korn) */ .auftakt__bild::before{content:"";position:absolute;inset:0;z-index:1;opacity:.12;mix-blend-mode:overlay;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='%75rl(%23k)'/%3E%3C/svg%3E") 0 0/160px 160px} /* %75rl = „url“ verschlüsselt: bau.py lässt Verweise im CSS nur auf data: und fonts/ zu */ /* Vignette (auch seitlich, damit die Enden der Wortmarke nicht auf Hellem stehen), oben Halt für die Kopfleiste, hinter der Inschrift ein dunkler Hof, unten satt ins Schwarz */ .auftakt__bild::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background: radial-gradient(ellipse 62% 34% at 50% 64%,rgba(0,0,0,.42),rgba(0,0,0,0) 72%), radial-gradient(ellipse 115% 95% at 46% 30%,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 100%), linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 17%,rgba(0,0,0,0) 80%,rgba(0,0,0,.62) 100%), linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 34%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.82) 72%,#000 100%)} /* Zwei Lichtkegel von oben, langsam schwenkend; sie hellen nur auf (screen) und laufen nach unten aus */ .auftakt__licht{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 80%)} .auftakt__licht::before,.auftakt__licht::after{content:"";position:absolute;top:-6%;left:calc(18% - 60vmax);width:120vmax;height:150%; transform-origin:50% 0;transform:rotate(-12deg); background:conic-gradient(from 166deg at 50% 0,rgba(255,190,110,0),rgba(255,190,110,.18) 14deg,rgba(255,190,110,0) 28deg); animation:auftakt-kegel 22s ease-in-out infinite alternate} .auftakt__licht::after{left:calc(82% - 60vmax);transform:rotate(12deg);animation-duration:27s;animation-direction:alternate-reverse} /* Goldstaub: zwei Schichten, die feine steigt schneller als die weiche (Tiefe) */ .auftakt__staub{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 30%,#000 55%,#000 80%,transparent 97%); mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 30%,#000 55%,#000 80%,transparent 97%)} .auftakt__staub::before,.auftakt__staub::after{content:"";position:absolute;top:0;left:0;right:0;background-repeat:repeat} .auftakt__staub::before{height:calc(100% + 700px);background-size:560px 700px;background-image: radial-gradient(circle at 7% 14%,rgba(255,212,140,.95) 0 .7px,rgba(255,213,151,0) 2px), radial-gradient(circle at 21% 66%,rgba(255,212,140,.8) 0 .6px,rgba(255,213,151,0) 1.8px), radial-gradient(circle at 34% 31%,rgba(255,212,140,.9) 0 1px,rgba(255,213,151,0) 2.4px), radial-gradient(circle at 49% 86%,rgba(255,212,140,.75) 0 .6px,rgba(255,213,151,0) 1.8px), radial-gradient(circle at 58% 8%,rgba(255,212,140,.85) 0 .8px,rgba(255,213,151,0) 2px), radial-gradient(circle at 71% 49%,rgba(255,212,140,.95) 0 .7px,rgba(255,213,151,0) 2px), radial-gradient(circle at 84% 74%,rgba(255,212,140,.8) 0 1px,rgba(255,213,151,0) 2.4px), radial-gradient(circle at 93% 24%,rgba(255,212,140,.7) 0 .6px,rgba(255,213,151,0) 1.8px), radial-gradient(circle at 42% 55%,rgba(255,212,140,.85) 0 .7px,rgba(255,213,151,0) 2px); animation:auftakt-staub 48s linear infinite} .auftakt__staub::after{height:calc(100% + 1000px);background-size:900px 1000px;background-image: radial-gradient(circle at 14% 36%,rgba(255,200,120,.32) 0,rgba(255,200,120,0) 5px), radial-gradient(circle at 47% 79%,rgba(255,200,120,.26) 0,rgba(255,200,120,0) 7px), radial-gradient(circle at 69% 18%,rgba(255,200,120,.34) 0,rgba(255,200,120,0) 4px), radial-gradient(circle at 88% 61%,rgba(255,200,120,.24) 0,rgba(255,200,120,0) 6px); animation:auftakt-staub2 80s linear infinite} /* Inschrift: unten, wie der Titel auf einem Kinoplakat */ .auftakt__inhalt{position:relative;display:flex;flex-direction:column;align-items:center;width:100%; margin-top:auto;padding:0 var(--rand)} .auftakt__titel{display:flex;flex-direction:column;align-items:center;max-width:100%; filter:drop-shadow(0 0 42px rgba(255,186,96,.16)) drop-shadow(0 6px 22px rgba(0,0,0,.62))} .auftakt__gruss{display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,1.5vw,1.5rem); font-family:var(--disp);font-weight:600;font-size:clamp(.76rem,1.08vw,1.25rem);line-height:1.2; letter-spacing:.6em;text-transform:uppercase;color:var(--hellgold);white-space:nowrap; text-shadow:0 0 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.95),0 0 32px rgba(0,0,0,.7)} .auftakt__gruss::before,.auftakt__gruss::after{content:"";flex:none;width:clamp(2rem,8vw,9rem);height:1px; background:linear-gradient(90deg,rgba(208,151,66,0),var(--gold) 65%,var(--hellgold));transform-origin:100% 50%} .auftakt__gruss::before{margin-right:.6em} /* gleicht die Sperrung nach dem letzten Buchstaben aus */ .auftakt__gruss::after{background:linear-gradient(270deg,rgba(208,151,66,0),var(--gold) 65%,var(--hellgold));transform-origin:0 50%} /* COLOSSEUM: Metallgold (Glanzkante in der Mitte), darüber ein schmaler Lichtstreif, der quer läuft */ .auftakt .wortmarke{display:block;margin-top:clamp(.3rem,.8vw,.9rem);max-width:100%; font-family:var(--disp);font-weight:700;text-transform:uppercase;white-space:nowrap; font-size:clamp(2.5rem,min(11.4vw,21svh),16rem);line-height:.84;letter-spacing:.07em;padding-left:.07em; color:var(--hellgold); background-image: linear-gradient(100deg,rgba(255,250,236,0) 42%,rgba(255,250,236,.92) 50%,rgba(255,250,236,0) 58%), linear-gradient(180deg,#FFF3D6 0%,#FFDCA3 18%,#EDB867 36%,#B47B2D 48.5%,#8C5A1E 51%,#C68E3C 60%,#F2C67E 78%,#FFE4B3 90%,#C08637 100%); background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:100% 0,0 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .auftakt .leitsatz{margin-top:clamp(.7rem,1.3vw,1.3rem);max-width:100%;font-family:var(--disp);font-weight:500; text-transform:uppercase;letter-spacing:.34em;padding-left:.34em;font-size:clamp(.8rem,1.18vw,1.4rem);line-height:1.5; color:var(--marmor);text-wrap:balance;text-shadow:0 0 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.9)} /* Uhrzeile als leuchtende Pille; der Punkt (.lampe) pulsiert */ .auftakt .jetzt{display:inline-flex;gap:.8em;margin-top:clamp(1.1rem,2.1vw,2rem);padding:.62em 1.5em .62em 1.15em; border:1px solid rgba(208,151,66,.62);border-radius:999px;font-size:clamp(.95rem,1.1vw,1.18rem);line-height:1.3; background:rgba(16,11,5,.5);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3); box-shadow:0 0 0 5px rgba(208,151,66,.08),0 0 36px rgba(208,151,66,.26),inset 0 1px 0 rgba(255,213,151,.2)} .auftakt .wege{margin-top:clamp(1.1rem,2vw,1.9rem)} .auftakt .knopf{min-height:56px} .auftakt .knopf--linie{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} /* Scroll-Hinweis: Goldlinie, an der ein Lichtpunkt hinabläuft, unten eine Raute */ .auftakt__weiter{position:relative;display:block;flex:none;width:44px;height:var(--weg); margin:clamp(.9rem,2.6svh,2rem) auto clamp(.6rem,1.6svh,1rem)} .auftakt__weiter::before{content:"";position:absolute;left:calc(50% - .5px);top:0;bottom:4px;width:1px; background:linear-gradient(180deg,rgba(208,151,66,0),var(--linie2) 30%,var(--gold))} .auftakt__weiter::after{content:"";position:absolute;left:calc(50% - 3.5px);bottom:0;width:7px;height:7px; border:1px solid var(--gold);background:#000;transform:rotate(45deg)} .auftakt__weiter i{position:absolute;left:calc(50% - 2.5px);top:0;width:5px;height:5px;border-radius:50%; background:var(--hellgold);box-shadow:0 0 6px 2px rgba(255,213,151,.75);opacity:0; animation:auftakt-weiter 2.6s cubic-bezier(.55,0,.35,1) infinite} .auftakt__weiter:hover i,.auftakt__weiter:focus-visible i{background:#fff} /* Laufband: kurze Fakten zwischen Rauten, läuft ruhig nach links und beginnt nahtlos von vorn */ .auftakt__band{position:relative;flex:none;width:100%;overflow:hidden;border-top:1px solid var(--linie); padding:clamp(.75rem,1.5svh,1rem) 0 calc(clamp(.75rem,1.5svh,1rem) + env(safe-area-inset-bottom,0px)); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .auftakt__spur{display:flex;width:max-content;animation:auftakt-band 90s linear infinite} .auftakt__spur ul{display:flex;flex:none} .auftakt__spur li{display:flex;align-items:center;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.3em;font-size:clamp(.66rem,.74vw,.8rem);line-height:1.4;color:var(--sand);white-space:nowrap} .auftakt__spur li::after{content:"";flex:none;width:6px;height:6px;margin:0 2.3em 0 2em; border:1px solid var(--gold);transform:rotate(45deg)} @media(max-width:599px){ .auftakt{padding-top:calc(5rem + env(safe-area-inset-top,0px))} .auftakt__gruss{letter-spacing:.45em;gap:.8rem} .auftakt__gruss::before{margin-right:.45em} .auftakt .leitsatz{letter-spacing:.2em;padding-left:.2em;font-size:.8rem} .auftakt .wege{width:100%;max-width:24rem;gap:.7rem} .auftakt .wege .knopf{flex:1 1 100%;min-height:52px} } /* Flache Fenster (Laptop 1366×657 oder 1536×730 bei Windows-Skalierung, Telefon quer): die Inschrift rückt zusammen und das Laufband entfällt – sonst steigt sie bis ins Gesicht */ @media(max-height:760px) and (min-aspect-ratio:3/2){ .auftakt .wortmarke{font-size:clamp(2.5rem,min(11.4vw,18svh),16rem)} .auftakt .jetzt,.auftakt .wege{margin-top:clamp(.8rem,2.2svh,1.2rem)} .auftakt__weiter{margin-bottom:clamp(.8rem,2.4svh,1.2rem)} .auftakt__band{display:none} } /* Auftritt: kleine Zeile → Wortmarke → Leitsatz → Uhrzeile → Knöpfe (nur mit Skript) */ html.js:not(.bereit) .auftakt__bild,html.js:not(.bereit) .auftakt__licht,html.js:not(.bereit) .auftakt__staub, html.js:not(.bereit) .auftakt__gruss,html.js:not(.bereit) .auftakt .wortmarke,html.js:not(.bereit) .auftakt .leitsatz, html.js:not(.bereit) .auftakt .jetzt,html.js:not(.bereit) .auftakt .wege,html.js:not(.bereit) .auftakt__weiter, html.js:not(.bereit) .auftakt__band{opacity:0} html.js.bereit .auftakt__bild{animation:auftakt-auf 1.8s ease both} html.js.bereit .auftakt__licht,html.js.bereit .auftakt__staub{animation:auftakt-auf 2.6s ease .5s both} html.js.bereit .auftakt__gruss{animation:auftakt-steig 1s var(--weich) .2s both} html.js.bereit .auftakt__gruss::before,html.js.bereit .auftakt__gruss::after{animation:auftakt-linie 1.4s var(--weich) .3s both} html.js.bereit .auftakt .wortmarke{animation:auftakt-fokus 1.5s var(--weich) .4s both,auftakt-glanz 9s ease-in-out 1.5s infinite} html:not(.js) .auftakt .wortmarke{animation:auftakt-glanz 9s ease-in-out 1s infinite} html.js.bereit .auftakt .leitsatz{animation:auftakt-steig 1s var(--weich) 1s both} html.js.bereit .auftakt .jetzt{animation:auftakt-steig 1s var(--weich) 1.3s both} html.js.bereit .auftakt .wege{animation:auftakt-steig 1s var(--weich) 1.55s both} html.js.bereit .auftakt__weiter,html.js.bereit .auftakt__band{animation:auftakt-auf 1.1s ease 1.8s both} /* außer Sicht ruht alles (site.js setzt .ruht) */ .auftakt.ruht *,.auftakt.ruht *::before,.auftakt.ruht *::after{animation-play-state:paused !important} @keyframes auftakt-drift{from{transform:scale(1.03)}to{transform:scale(1.1) translate3d(-1.2%,.8%,0)}} @keyframes auftakt-kegel{from{transform:rotate(-20deg)}to{transform:rotate(16deg)}} @keyframes auftakt-staub{to{transform:translate3d(0,-700px,0)}} @keyframes auftakt-staub2{to{transform:translate3d(0,-1000px,0)}} @keyframes auftakt-glanz{0%{background-position:100% 0,0 0}16%,100%{background-position:0 0,0 0}} @keyframes auftakt-weiter{0%{opacity:0;transform:translate3d(0,0,0)}25%,65%{opacity:1}100%{opacity:0;transform:translate3d(0,calc(var(--weg) - 12px),0)}} @keyframes auftakt-band{to{transform:translate3d(-33.3333%,0,0)}} @keyframes auftakt-auf{from{opacity:0}to{opacity:1}} @keyframes auftakt-steig{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}} @keyframes auftakt-linie{from{transform:scaleX(0)}to{transform:none}} @keyframes auftakt-fokus{from{opacity:0;filter:blur(18px);transform:scale(1.08)}to{opacity:1;filter:blur(0);transform:none}} @media(prefers-reduced-motion:reduce){ .auftakt *,.auftakt *::before,.auftakt *::after{animation:none !important} .auftakt__licht::before{transform:rotate(-6deg)} .auftakt__licht::after{transform:rotate(8deg)} .auftakt__weiter i{opacity:1;transform:translate3d(0,calc(var(--weg) / 2 - 6px),0)} /* das Laufband steht still: eine Zeile mit weich auslaufenden Rändern, wie ein Standbild */ } /* === Ende Auftakt (2026-10-14) === */ /* ---------- Seitenkopf (Unterseiten) ---------- */ .seitenkopf{text-align:center;padding:calc(7.4rem + env(safe-area-inset-top,0px)) var(--rand) clamp(2.2rem,4.6vw,3.8rem)} .seitenkopf__ueber{display:block;color:var(--gold);margin-bottom:.8rem} .seitenkopf .inschrift{font-size:clamp(2.1rem,5.4vw,5rem)} /* ---------- Das Haus (Einleitung): Tempelfront als Rahmen ---------- */ .haus{text-align:center} .tempel{position:relative;max-width:1120px;margin:0 auto} .tempel__giebel{display:block;width:100%;height:auto;color:var(--gold)} .tempel__gebaelk{height:17px;border-block:1px solid var(--linie2); background:repeating-linear-gradient(90deg,var(--linie2) 0 5px,transparent 5px 11px) left bottom 3px/100% 5px no-repeat} .tempel__cella{position:relative;padding:clamp(1.8rem,3.8vw,3.3rem) clamp(2rem,7vw,6.5rem) clamp(2rem,4vw,3.5rem); border-bottom:1px solid var(--linie2);box-shadow:0 7px 0 -1px #000,0 7px 0 0 var(--linie)} .tempel__cella::before,.tempel__cella::after{content:"";position:absolute;top:0;bottom:0;left:12px;width:27px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Cpath d='M.5.5h17v3H.5zM2.5 3.5h13l-2.5 5h-8zM4 11h10' fill='%23000' stroke='%23D09742' stroke-width='.7'/%3E%3C/svg%3E") center top/27px 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M3.5.5h11v3h-11zM1.5 3.5h15v3h-15zM.5 6.5h17v3H.5z' fill='%23000' stroke='%23D09742' stroke-width='.7'/%3E%3C/svg%3E") center bottom/27px 15px no-repeat, linear-gradient(90deg,transparent 6px,rgba(208,151,66,.6) 6px,rgba(208,151,66,.6) 7px,transparent 7px,transparent 13px,rgba(208,151,66,.34) 13px,rgba(208,151,66,.34) 14px,transparent 14px,transparent 20px,rgba(208,151,66,.6) 20px,rgba(208,151,66,.6) 21px,transparent 21px) center 18px/27px calc(100% - 33px) no-repeat} .tempel__cella::after{left:auto;right:12px} .auftritt{font-size:clamp(1.22rem,2.1vw,1.95rem);line-height:1.44;max-width:26em;margin:0 auto;text-wrap:balance} .tempel__spalten{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(1.5rem,3.2vw,3rem);max-width:940px; margin:clamp(1.6rem,3.4vw,2.8rem) auto 0;text-align:left;font-size:1.06rem} .tempel__spalten>i{background:linear-gradient(180deg,transparent,var(--linie2) 18%,var(--linie2) 82%,transparent)} .tempel__spalten--eine{grid-template-columns:1fr;max-width:36em;text-align:center} .plakette{position:relative;max-width:40rem;margin:clamp(1.8rem,3.6vw,3rem) auto 0;padding:1.2rem 1.5rem; border-block:1px solid var(--linie2);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5; color:var(--hellgold);text-wrap:balance} .plakette::before,.plakette::after{content:"";position:absolute;left:calc(50% - 4.5px);width:9px;height:9px; border:1px solid var(--gold);background:#000;transform:rotate(45deg)} .plakette::before{top:-5px} .plakette::after{bottom:-5px} /* Preis-Plakette (Startseite): dieselbe Plakette, oben die drei Eintrittspreise in einer Reihe – Ziffern und „Euro“ wie auf den Eintrittskarten, die 50 golden –, darunter der Satz des Kunden und der Verweis auf die Karten (#eintritt). */ .plakette--preise{max-width:44rem;padding:clamp(1.5rem,2.6vw,2rem) 1.5rem clamp(1.2rem,2.2vw,1.6rem); font-style:normal;font-size:1rem;color:var(--marmor)} .preistafel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .preistafel__eintrag{position:relative;padding:0 .6rem} .preistafel__eintrag+.preistafel__eintrag::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px; background:linear-gradient(180deg,transparent,var(--linie2) 22%,var(--linie2) 78%,transparent)} .preistafel__preis{display:flex;flex-direction:column;align-items:center;font-family:var(--disp);font-weight:600; text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;line-height:1.2;color:var(--gold)} .preistafel__preis b{display:block;font-weight:500;letter-spacing:0;font-size:clamp(2.5rem,4vw,3.6rem);line-height:.9; margin-bottom:.35rem;color:var(--marmor)} .preistafel__preis span{padding-left:.22em} .preistafel__eintrag--gold .preistafel__preis b{color:var(--gold)} .preistafel__zeile{margin-top:.6rem;font-size:1rem;line-height:1.4;color:var(--marmor);text-wrap:balance} .preistafel__eintrag--gold .preistafel__zeile{color:var(--hellgold)} .plakette__satz{max-width:30em;margin:clamp(1.1rem,2.2vw,1.6rem) auto 0;font-style:italic; font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;color:var(--hellgold);text-wrap:balance} .plakette__weg{margin-top:.55rem;font-size:.95rem;line-height:1.5} @media(max-width:760px){ .tempel__spalten{grid-template-columns:1fr;gap:1.1rem;text-align:center} .tempel__spalten>i{display:none} /* Die Säulen bleiben auch am Telefon stehen – schmaler, wie in der Arkade. */ .tempel__cella{padding-inline:2.1rem} .tempel__cella::before,.tempel__cella::after{left:0;width:18px;background:var(--pilaster)} .tempel__cella::after{left:auto;right:0} .plakette{padding-inline:.4rem} /* Telefon: die Reihe bleibt dreispaltig; jede Zeile bricht höchstens einmal (bis 360 px geprüft) */ .plakette--preise{padding-inline:0} .preistafel__eintrag{padding:0 .2rem} .preistafel__zeile{font-size:clamp(.875rem,3.9vw,.95rem);line-height:1.35} } /* ---------- Video mit Lichthof (Startseite, seit 15.10.2026) ---------- Das Startseiten-Video des Kunden (568 × 320) in einem eigenen Band zwischen Begrüßung und Bars: scharf in der Mitte, höchstens 736 px breit (1,3-fache); dahinter dieselbe Quelle randvoll, stark weichgezeichnet und abgedunkelt – ein canvas (64 × 36), den site.js aus dem laufenden Video malt; ohne Skript, bei reduzierter Bewegung und vor dem ersten Bild liegt dort das Standbild. Innere Goldlinie: .bild (wie Karten), hier enger. */ .lichthof{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3.2rem,6vw,5.6rem) var(--rand);text-align:center} .lichthof__grund{position:absolute;z-index:-1;inset:0;max-width:2600px;margin-inline:auto} .lichthof__grund img,.lichthof__hof{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:blur(38px) brightness(.8) saturate(1.5);transform:scale(1.3)} .lichthof__hof{opacity:0;transition:opacity 1.6s ease} .lichthof__hof.an{opacity:1} .lichthof__grund::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,#000 0,rgba(0,0,0,.18) 24%,rgba(0,0,0,.18) 76%,#000 100%), radial-gradient(ellipse 62% 70% at 50% 58%,rgba(0,0,0,0) 0,rgba(0,0,0,.32) 68%,rgba(0,0,0,.8) 100%)} .lichthof__innen{max-width:var(--breite);margin-inline:auto} .lichthof__kopf{margin-bottom:clamp(1.5rem,2.8vw,2.3rem)} .lichthof__kopf .zweig{margin-bottom:1rem} .film{position:relative;width:min(100%,736px);margin-inline:auto; box-shadow:0 0 0 1px var(--linie2),0 0 0 7px rgba(0,0,0,.82),0 0 0 8px var(--linie),0 28px 90px -10px rgba(0,0,0,.85)} .film__bild{aspect-ratio:568/320} .film .bild::after{inset:10px} .film__video{display:block;width:100%;height:100%;object-fit:cover} /* Knopf mit sichtbarem Wort („anhalten“ / „abspielen“), für Vorleser „Video anhalten“; innerhalb der Goldlinie */ .film__knopf{position:absolute;z-index:2;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:.65em; min-height:40px;padding:.35rem 1rem .35rem .85rem;border:1px solid var(--linie2);border-radius:999px;cursor:pointer; background:rgba(0,0,0,.66);color:var(--hellgold);font-family:var(--disp);font-weight:600;font-size:.66rem; letter-spacing:.18em;text-transform:uppercase;line-height:1;transition:background .4s,color .4s} .film__knopf[hidden]{display:none} .film__knopf i{flex:none;display:block;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor} .film__knopf.steht i{width:0;height:0;margin-left:2px;border-left:9px solid currentColor;border-right:0; border-top:5.5px solid transparent;border-bottom:5.5px solid transparent} @media(hover:hover){.film__knopf:hover{background:rgba(0,0,0,.88);color:#fff}} @media(max-width:560px){ .film .bild::after{inset:7px} .film__knopf{right:12px;bottom:12px;min-height:36px;padding:.3rem .8rem .3rem .7rem;font-size:.62rem} } /* ---------- Bildband ---------- */ .band{position:relative;height:clamp(220px,32vw,520px);overflow:hidden;max-width:2600px;margin-inline:auto;--lx:50%; background:var(--basalt)} .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .band__licht{position:absolute;inset:0; background:radial-gradient(ellipse 50% 100% at var(--lx) 42%,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 58%,rgba(0,0,0,.6) 100%)} .band::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#000 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 58%,rgba(0,0,0,.86) 90%,#000 100%)} /* ---------- Karte (Portal) und Diptychon ---------- */ .bild{position:relative;display:block;overflow:hidden;background:var(--basalt)} .bild img{width:100%;height:100%;object-fit:cover;transition:transform 2.8s var(--weich),filter 1.6s} .bild::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,213,151,.36);pointer-events:none} .portal{text-align:center} .portal__tor{display:block;text-decoration:none;color:inherit} .portal:hover .bild img{transform:scale(1.035)} .schild{position:relative;z-index:1;display:inline-block;margin-top:-1.75rem;padding:.85rem 2rem .85rem calc(2rem + .2em); background:#000;border:1px solid var(--linie2);font-family:var(--disp);font-weight:500;text-transform:uppercase; letter-spacing:.2em;font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.15;color:var(--hellgold)} .portal p{max-width:31em;margin:1.2rem auto 0;font-size:1.06rem} .diptychon{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(1.25rem,3vw,3rem);align-items:start} .diptychon__achse{align-self:stretch;position:relative; background:linear-gradient(180deg,transparent,var(--linie2) 10%,var(--linie2) 90%,transparent)} .diptychon__achse::after{content:"";position:absolute;left:-4.5px;top:38%;width:9px;height:9px; border:1px solid var(--gold);background:#000;transform:rotate(45deg)} @media(max-width:760px){ .diptychon{grid-template-columns:1fr;gap:2.6rem} .diptychon__achse{display:none} } /* ================================================================== Eintritt und Öffnungszeiten: Eintrittskarten links, Uhr rechts, dazwischen die goldene Achse. Am Telefon untereinander. ================================================================== */ .eintritt{isolation:isolate;overflow:hidden} .eintritt__grund{position:absolute;z-index:-1;inset:0 0 auto;height:100%;max-height:1260px;max-width:2080px;margin-inline:auto} .eintritt__grund img{width:100%;height:100%;object-fit:cover;object-position:42% 50%;opacity:.5} .eintritt__grund::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#000 0,rgba(0,0,0,.72) 22%,rgba(0,0,0,.78) 70%,#000 100%)} .eintritt__raster{display:grid;grid-template-columns:minmax(0,1.12fr) 1px minmax(0,1fr);gap:clamp(2rem,4.4vw,4.4rem);align-items:start} .eintritt__achse{align-self:stretch;position:relative; background:linear-gradient(180deg,transparent,var(--linie2) 12%,var(--linie2) 88%,transparent)} .eintritt__achse::after{content:"";position:absolute;left:-4.5px;top:44%;width:9px;height:9px; border:1px solid var(--gold);background:#000;transform:rotate(45deg)} .eintritt__spalte{text-align:center} .eintritt__spalte .tafelkopf{margin-bottom:clamp(1.6rem,3vw,2.4rem)} .eintritt__spalte>p{max-width:30em;margin-inline:auto} .eintritt__spalte .notiz{margin-top:clamp(1.8rem,3vw,2.4rem)} .eintritt__zeit>p+p{margin-top:.8rem} @media(max-width:900px){ .eintritt__raster{grid-template-columns:1fr;gap:clamp(3rem,9vw,4.4rem)} .eintritt__achse{display:none} } /* Eintrittskarte: Abriss mit Preis | Perforation | Text; Kerben oben und unten */ .tickets{display:grid;justify-items:center;padding:.6rem 0} .ticket{--abriss:clamp(6.4rem,9vw,8.4rem);--kerbe:10px;position:relative;display:grid;grid-template-columns:var(--abriss) minmax(0,1fr); width:min(100%,33rem);text-align:left;color:var(--marmor);background:rgba(8,6,4,.94); box-shadow:inset 0 0 0 1px var(--linie2); -webkit-mask-image:radial-gradient(circle var(--kerbe) at var(--abriss) 0,transparent 97%,#000),radial-gradient(circle var(--kerbe) at var(--abriss) 100%,transparent 97%,#000); -webkit-mask-composite:source-in; mask-image:radial-gradient(circle var(--kerbe) at var(--abriss) 0,transparent 97%,#000),radial-gradient(circle var(--kerbe) at var(--abriss) 100%,transparent 97%,#000); mask-composite:intersect} .ticket::after{content:"";position:absolute;inset:6px;border:1px solid var(--linie);pointer-events:none} .ticket:nth-child(1){transform:rotate(-1.6deg);margin-right:7%} .ticket:nth-child(2){transform:rotate(1.1deg);margin:-.55rem 0 0 9%} .ticket:nth-child(3){transform:rotate(-.7deg);margin:-.45rem 3% 0 0} .ticket__preis{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.15rem .5rem; font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--gold)} .ticket__preis b{display:block;font-weight:500;letter-spacing:0;font-size:clamp(2.9rem,4.6vw,4.3rem);line-height:.9;margin-bottom:.35rem; color:var(--hellgold);background:linear-gradient(180deg,#FFE3B0 0%,#FFD597 34%,#D09742 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ticket__preis span{padding-left:.22em} .ticket__text{align-self:center;margin:0;padding:1.2rem 1.5rem 1.2rem 1.35rem;border-left:1px dashed var(--linie2); font-size:1rem;line-height:1.55} .ticket--gold{background:var(--gold);color:#000;box-shadow:none} .ticket--gold::after{border-color:rgba(0,0,0,.42)} .ticket--gold .ticket__preis{color:#000} .ticket--gold .ticket__preis b{background:none;-webkit-text-fill-color:#000;color:#000} .ticket--gold .ticket__text{color:#000;border-left-color:rgba(0,0,0,.55)} @media(max-width:520px){ .ticket{--kerbe:8px;width:96%} .ticket:nth-child(1){margin-right:4%} .ticket:nth-child(2){margin-left:4%} .ticket:nth-child(3){margin-right:3%} .ticket__text{padding:1rem 1rem 1rem 1rem;font-size:.98rem} } /* Uhr: Ortszeit Graz in großen Ziffern */ .uhr{margin-top:.2rem} .uhr__zeit{display:flex;align-items:baseline;justify-content:center;gap:.25em;margin:0 auto; font-family:var(--disp);font-weight:500;line-height:.9;color:var(--hellgold)} .uhr__ziffern{font-size:clamp(4.4rem,8.6vw,8.4rem);font-variant-numeric:tabular-nums;letter-spacing:.02em; background:linear-gradient(180deg,#FFE3B0 0%,#FFD597 34%,#D09742 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; text-shadow:none;filter:drop-shadow(0 0 .35em rgba(208,151,66,.28))} .uhr__wort{font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} html:not(.uhr-laeuft) .uhr__wort{display:none} .uhr__offen{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:1.1rem auto 1.6rem; font-style:italic;font-size:1.15rem;color:var(--hellgold)} /* ================================================================== Die Zimmer: Arkade – Zahl der Bögen je Reihe kommt aus dem HTML (--sp-r Rechner, --sp-t Tablet; bausteine.arkade rechnet sie für 8 bis 12 Zimmer aus und markiert das Ende jeder Reihe mit joch--ende-r / -t). Unvollständige Reihen stehen mittig. ================================================================== */ .arkade{--pf:18px;--luft:clamp(6px,1.1vw,18px);display:flex;flex-wrap:wrap;justify-content:center; row-gap:clamp(2.2rem,4vw,3.4rem);max-width:var(--breite);margin:0 auto;padding:0 9px} .joch{position:relative;flex:0 0 calc(100% / var(--sp-t,4));min-width:0} .joch__tor{display:block;text-decoration:none;color:inherit;text-align:center} .joch__gebaelk{display:block;height:15px;border-block:1px solid var(--linie2); background:repeating-linear-gradient(90deg,var(--linie2) 0 4px,transparent 4px 9px) left bottom 3px/100% 4px no-repeat} .joch__feld{position:relative;display:block;padding:22px calc(var(--pf)/2 + var(--luft)) 0; border-bottom:1px solid var(--linie2);box-shadow:0 5px 0 -1px #000,0 5px 0 0 var(--linie)} .joch__feld::before,.joch__feld::after{content:"";position:absolute;top:0;bottom:0;width:var(--pf);left:calc(var(--pf)/-2); background:var(--pilaster)} .joch__feld::after{left:auto;right:calc(var(--pf)/-2);display:none} .joch--ende-t .joch__feld::after{display:block} .joch__archivolte{position:absolute;top:13px;bottom:0;left:calc(var(--pf)/2 + var(--luft) - 8px); right:calc(var(--pf)/2 + var(--luft) - 8px);border:1px solid var(--linie2);border-bottom:0; border-radius:999px 999px 0 0;pointer-events:none} .joch__archivolte::before{content:"";position:absolute;top:-6px;left:calc(50% - 5px);width:10px;height:10px; border:1px solid var(--gold);background:#000;transform:rotate(45deg)} .joch__bogen{position:relative;display:block;aspect-ratio:2/3;border-radius:999px 999px 0 0;overflow:hidden;background:var(--basalt)} .joch__bogen img{width:100%;height:100%;object-fit:cover;transition:filter 1.6s ease,transform 2.8s var(--weich)} @media(hover:hover){ .joch__bogen img{filter:brightness(.8) saturate(.94)} .joch__tor:hover .joch__bogen img,.joch__tor:focus-visible .joch__bogen img{filter:none;transform:scale(1.045)} } .joch__name{display:block;margin:1.05rem .3rem 0;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.1em;font-size:clamp(.94rem,1.1vw,1rem);line-height:1.35;color:var(--hellgold);text-wrap:balance} @media(min-width:1100px){ .arkade{max-width:min(1680px,calc(210px * var(--sp-r,8)));--luft:clamp(4px,.5vw,12px)} .joch{flex-basis:calc(100% / var(--sp-r,8))} .joch--ende-t .joch__feld::after{display:none} .joch--ende-r .joch__feld::after{display:block} } @media(max-width:699px){ /* Telefon: die Arkade läuft zur Seite weiter – wischen statt vier Reihen untereinander. */ .arkade{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(62vw,260px); overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none; margin-inline:calc(var(--rand) * -1);padding:0 calc(var(--rand) + 9px) .4rem;scroll-padding-inline:calc(var(--rand) + 9px);--luft:10px} .arkade::-webkit-scrollbar{display:none} .joch{scroll-snap-align:start} .joch--ende-t .joch__feld::after{display:none} .joch:last-child .joch__feld::after{display:block} .joch__name{font-size:1rem;letter-spacing:.1em} .joch__bogen img{filter:none} } .zimmer .notiz{margin-top:clamp(2rem,3.6vw,2.8rem)} /* ================================================================== Die Damen Fries (Startseite): Fotos gleich hoch, unbeschnitten; bis 1000 px paarweise. Raster (Übersicht): 3:4, zwei bis vier Spalten. Abwesend: schwarzweiß und dunkler – nur CSS, überall gleich. ================================================================== */ .damen{padding-inline:0} .damen .tafelkopf,.damen .wege,.damen .hinweis{padding-inline:var(--rand)} .fries{display:flex;gap:12px;align-items:flex-start;width:min(100% - 2 * var(--rand),1900px);margin:0 auto} .fries__paar{display:contents} .dame{display:block;min-width:0;text-decoration:none;color:inherit;text-align:center} .dame--fries{flex:calc(var(--f) * 100) 1 0} .dame__bild{position:relative;display:block;overflow:hidden;background:var(--basalt)} .dame--fries .dame__bild{aspect-ratio:var(--f)} .dame--raster .dame__bild{aspect-ratio:3/4} .dame__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:filter 1.4s ease,transform 2.8s var(--weich)} .dame__bild::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,213,151,.28);pointer-events:none} .dame__sockel{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin-top:9px;padding:.8rem .2rem 0;border-top:1px solid var(--linie2)} .dame__name{display:block;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.2em; padding-left:.2em;font-size:clamp(.92rem,1.25vw,1.12rem);line-height:1.2;color:var(--hellgold)} .dame--abwesend .dame__bild img{filter:grayscale(1) brightness(.34) contrast(1.1)} .dame--abwesend .dame__name{color:var(--sand)} .dame--abwesend .dame__bild::after{border-color:rgba(187,172,144,.3)} @media(hover:hover){ .fries:hover .dame:not(.dame--abwesend) .dame__bild img{filter:brightness(.55)} .fries .dame:not(.dame--abwesend):hover .dame__bild img{filter:none;transform:scale(1.03)} .dame--raster:hover .dame__bild img{transform:scale(1.03)} .dame--abwesend:hover .dame__bild img{transform:scale(1.02)} } @media(max-width:1000px){ .fries{display:block;max-width:36rem} .fries__paar{display:flex;gap:10px;align-items:flex-start} .fries__paar+.fries__paar{margin-top:1.6rem} } .damenraster{--sp:2;--lu:clamp(.8rem,2vw,1.6rem);display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(1.6rem,3vw,2.6rem) var(--lu);max-width:var(--breite);margin:0 auto} .damenraster>.dame{flex:0 0 calc((100% - (var(--sp) - 1) * var(--lu)) / var(--sp))} @media(min-width:700px){.damenraster{--sp:3}} @media(min-width:1100px){.damenraster{--sp:4}} /* ================================================================== Aktionen: der Aushang in einer Ädikula Ein Flyer zur Zeit, im schwarzen Passepartout zwischen zwei Pilastern, unter einem Giebel; das Namensschild darunter. Links und rechts die Namen aller Aktionen. ================================================================== */ .aktionen__tempel{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,350px) minmax(0,1fr); gap:clamp(1.6rem,3.6vw,3.6rem);align-items:center;max-width:1180px;margin:0 auto} .aktionsliste li{border-bottom:1px solid var(--linie)} .aktionsliste li:first-child{border-top:1px solid var(--linie)} .aktionsliste--l{text-align:right} .aktionsliste a{position:relative;display:block;padding:.95rem .2rem;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.13em;font-size:.92rem;line-height:1.35;color:var(--marmor);text-decoration:none;transition:color .5s} .aktionsliste a:hover,.aktionsliste a:focus-visible,.aktionsliste a.an{color:var(--hellgold)} .aktionsliste a.an::before{content:"";position:absolute;top:calc(50% - 4px);width:8px;height:8px;border:1px solid var(--gold); background:var(--gold);transform:rotate(45deg)} .aktionsliste--l a.an::before{right:-1.3rem} .aktionsliste--r a.an::before{left:-1.3rem} .aedicula{position:relative;width:100%;margin:0 auto;color:var(--gold)} .aedicula__giebel{display:block;width:calc(100% + 18px);margin:0 -9px;height:auto} .aedicula__gebaelk{display:block;height:14px;margin:0 -9px;border-block:1px solid var(--linie2); background:repeating-linear-gradient(90deg,var(--linie2) 0 4px,transparent 4px 9px) left bottom 3px/100% 4px no-repeat} .aedicula__feld{position:relative;display:block;padding:16px 25px 18px;background:#000; border-bottom:1px solid var(--linie2);box-shadow:0 5px 0 -1px #000,0 5px 0 0 var(--linie)} .aedicula__feld::before,.aedicula__feld::after{content:"";position:absolute;top:0;bottom:0;left:-9px;width:18px;background:var(--pilaster)} .aedicula__feld::after{left:auto;right:-9px} .aedicula__bild{position:relative;display:block;aspect-ratio:2/3;background:var(--basalt); box-shadow:0 0 0 1px var(--linie2),0 0 0 7px #000,0 0 0 8px var(--linie)} .aedicula__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.2s ease} .aedicula__bild img.an{opacity:1} .aedicula__schild{display:block;width:fit-content;max-width:calc(100% - 1rem);margin:-1px auto 0;padding:.7rem 1.4rem .7rem calc(1.4rem + .16em); background:#000;border:1px solid var(--linie2);font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.16em; font-size:.86rem;line-height:1.3;color:var(--hellgold);text-align:center;text-wrap:balance} @media(max-width:980px){ .aktionen__tempel{grid-template-columns:1fr;max-width:34rem;gap:2rem} .aedicula{order:-1;width:min(100% - 3rem,300px)} /* Telefon: eine Liste, mittig, mit Haarlinien; der gezeigte Flyer in Hellgold */ .aktionsliste{text-align:center} .aktionsliste--l{text-align:center} .aktionsliste--r{margin-top:-2rem} .aktionsliste--r li:first-child{border-top:0} .aktionsliste a{padding:.75rem 0;font-size:.86rem} .aktionsliste a.an::before{display:none} } /* ---------- Unsere Services: Münzen ---------- */ .muenzen{display:flex;flex-wrap:wrap;justify-content:center;row-gap:clamp(1.4rem,2.4vw,2rem)} .muenzen li{width:33.333%;text-align:center} .muenze{display:block;width:100%;padding:.2rem 0;background:none;border:0;cursor:pointer} .muenze__rund{position:relative;display:block;width:clamp(86px,8vw,112px);aspect-ratio:1;margin:0 auto} .muenze__rund img{position:absolute;inset:9%;width:82%;height:82%;border-radius:50%;object-fit:cover; filter:grayscale(1) sepia(.62) saturate(1.5) brightness(.84) contrast(1.05);transition:filter 1.3s ease} .muenze__rund svg{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);transition:transform 2.6s var(--weich)} .muenze__name{display:block;margin-top:.75rem;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.12em;padding-left:.12em;font-size:.78rem;line-height:1.4;color:var(--marmor);transition:color .5s} .muenze:hover .muenze__rund svg,.muenze[aria-pressed="true"] .muenze__rund svg{transform:rotate(42deg)} .muenze:hover .muenze__rund img,.muenze[aria-pressed="true"] .muenze__rund img{filter:none} .muenze[aria-pressed="true"] .muenze__name,.muenze:hover .muenze__name{color:var(--hellgold)} @media(min-width:700px){.muenzen li{width:20%}} @media(min-width:1100px){.muenzen li{width:11.111%}} .spruch{display:grid;place-items:center;min-height:5.4em;max-width:36em;margin:clamp(1.4rem,2.6vw,2rem) auto 0; padding-block:.4rem;font-style:italic;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--hellgold); text-align:center;text-wrap:balance;transition:opacity .35s ease} /* ---------- Kontakt ---------- */ .kontakt__raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4.6vw,4.6rem); align-items:center;max-width:1180px;margin:0 auto} .ansicht .bild img{object-position:50% 30%} .adresse{display:block;margin-top:1.3rem;text-align:center;font-family:var(--disp);font-weight:500; text-transform:uppercase;letter-spacing:.2em;padding-left:.2em;font-size:clamp(1.05rem,1.9vw,1.6rem); line-height:1.35;color:var(--hellgold)} .wegweiser{display:grid;gap:clamp(1.8rem,3vw,2.4rem);text-align:center} .wegweiser__block+.wegweiser__block{padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--linie)} .wegweiser h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.2em;padding-left:.2em; font-size:.95rem;color:var(--gold);margin-bottom:.9rem} .wegweiser dl{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:.15rem 1.1rem} .wegweiser dt{font-style:italic;color:var(--sand);font-size:.98rem;text-align:right} .wegweiser dd{margin:0;text-align:left} .nummer{display:inline-block;padding:.2rem 0;font-family:var(--disp);font-weight:500;letter-spacing:.06em; font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.35;color:var(--hellgold);text-decoration:none;transition:color .4s} .nummer:hover{color:#fff} .wegweiser p{max-width:30em;margin-inline:auto} .wegweiser p+p{margin-top:.6rem} .wegweiser p.wegweiser__karte{margin-top:1.3rem} @media(max-width:900px){ .kontakt__raster{grid-template-columns:1fr;max-width:40rem} } @media(max-width:420px){ .wegweiser dl{grid-template-columns:1fr;gap:0} .wegweiser dt,.wegweiser dd{text-align:center} .wegweiser dt{margin-top:.5rem} } /* ---------- Galerie ---------- */ .galerie{columns:2;column-gap:clamp(.7rem,1.6vw,1.2rem);max-width:var(--breite);margin:0 auto} .galerie li{break-inside:avoid;margin-bottom:clamp(.7rem,1.6vw,1.2rem)} @media(min-width:700px){.galerie{columns:3}} @media(min-width:1100px){.galerie{columns:4}} /* ---------- Fuß ---------- */ .fuss{padding:0 var(--rand) calc(2.2rem + env(safe-area-inset-bottom,0px));text-align:center} .fuss .maeander{margin-bottom:clamp(2.2rem,4.4vw,3.2rem)} .fuss__reihe{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;max-width:var(--breite);margin:0 auto} .fuss__spalte{display:flex;flex-direction:column;gap:.1rem} .fuss__spalte--l{align-items:flex-start;text-align:left} .fuss__spalte--r{align-items:flex-end;text-align:right} .fuss a{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem 0;text-decoration:none;color:var(--marmor);transition:color .4s} .fuss a:hover{color:var(--hellgold)} .fuss__zeichen{width:1.1rem;height:1.1rem;color:var(--gold)} .fuss__marke a{padding:0;margin-bottom:.9rem} .fuss__marke .marke{font-size:2.4rem} .fuss__marke p{font-size:.98rem;color:var(--sand)} .fuss__recht{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 2rem} .fuss__recht a{color:var(--hellgold)} @media(max-width:820px){ .fuss__reihe{grid-template-columns:1fr;gap:1.6rem} .fuss__marke{order:-1} .fuss__spalte--l,.fuss__spalte--r{align-items:center;text-align:center} } /* ---------- Alterssperre ---------- */ .kranzbild{position:relative;width:clamp(210px,23vw,300px);aspect-ratio:1;margin:0 auto;display:grid; place-content:center;justify-items:center;color:var(--gold)} .kranzbild svg{position:absolute;inset:0;width:100%;height:100%} .kranzbild__zahl{font-family:var(--disp);font-weight:500;font-size:clamp(4.3rem,8.2vw,6.5rem);line-height:.92;color:var(--hellgold)} .kranzbild__wort{color:var(--hellgold);margin-top:.35rem;padding-left:.24em} .tor{position:fixed;inset:0;z-index:1000;display:none;place-items:center;overflow-y:auto;background:#000; padding:calc(1.5rem + env(safe-area-inset-top,0px)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px))} html.tor-offen .tor{display:grid} .tor__tafel{position:relative;width:min(100%,34rem);padding:clamp(1.8rem,5vw,3rem) clamp(1.3rem,5vw,3rem); text-align:center;background:var(--basalt);border:1px solid var(--linie2)} .tor__tafel::after{content:"";position:absolute;inset:7px;border:1px solid var(--linie);pointer-events:none} .tor__marke{margin:0 auto 1rem} .tor__marke .marke{font-size:clamp(2rem,8vw,2.7rem)} .tor .kranzbild{width:clamp(140px,36vw,180px)} .tor .kranzbild__zahl{font-size:clamp(2.9rem,12vw,3.8rem)} .tor p{margin-top:1.1rem;font-size:1.08rem;line-height:1.62} .tor .knopf{position:relative;z-index:1;margin-top:1.6rem;min-width:9.5rem} /* ================================================================== Unterseiten Jeder Seitentyp hat seinen eigenen Kopf aus dem Vokabular der Startseite: Bildkopf mit Tafel (Aktionen), Bildkopf mit Tempel (Über uns), Gruppenwahl (Damen), Nische (Profil), Münze (Services), Siegel (Escort), Meilenstein (Kontakt), Bogen (Jobs), Gesetzestafel. ================================================================== */ .seitenkopf__unter{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.18em;padding-left:.18em; font-size:clamp(.9rem,1.35vw,1.2rem);line-height:1.45;color:var(--marmor);margin-top:1rem;text-wrap:balance} .seitenkopf__notiz{max-width:40em;margin:1.4rem auto 0;text-wrap:pretty} .seitenkopf .hinweis{margin-top:1rem;max-width:48em} /* ---------- Bildkopf: abgedunkeltes Hausfoto, oben deckend ---------- */ .seitenkopf--bild{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end; min-height:clamp(28rem,70svh,44rem);padding-bottom:clamp(2.6rem,5vw,4.2rem)} .seitenkopf__grund{position:absolute;z-index:-1;inset:0;max-width:2662px;margin-inline:auto} .seitenkopf__grund img{width:100%;height:100%;object-fit:cover;opacity:.66} .seitenkopf__grund::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#000 0,rgba(0,0,0,.62) 6.5rem,rgba(0,0,0,.16) 34%,rgba(0,0,0,.5) 64%,#000 100%)} .seitenkopf__inhalt{position:relative;width:100%;max-width:var(--breite);margin:0 auto} .seitenkopf--haus{min-height:clamp(22rem,54svh,34rem)} .seitenkopf--haus .inschrift{font-size:clamp(2.4rem,6.4vw,6rem);letter-spacing:.2em;padding-left:.2em} .tabula--kopf{margin:0 auto;padding:clamp(1.2rem,2.4vw,2rem) clamp(1.4rem,4vw,3.6rem)} .tabula--kopf .inschrift{font-size:clamp(1.9rem,4.2vw,3.8rem);line-height:1.05} .seitenkopf--aktionen .vorspann{margin-top:1.6rem} @media(min-width:760px){.tabula--kopf .tabula__ansa{display:block}} /* Über uns: Tempelfront mit Überschrift */ .haus--seite{padding-top:clamp(1rem,2.2vw,1.8rem)} .tempel__titel{font-size:clamp(1.45rem,3vw,2.6rem);margin:0 0 clamp(1.1rem,2.2vw,1.8rem)} .haus--seite .notiz a{white-space:nowrap} /* === Damen-Übersicht (2026-10-14) === Kachelwand nach dem Vorbild leuchtender Bildschirmkarten, in Gold: Hochformat 3:4, Foto randvoll mit runden Ecken, leuchtender Goldrahmen, ein feiner Lichtglanz quer über der Kante, Verlauf unten, darüber Statuswort (Cinzel, gesperrt, Gold) und Name (Cinzel, Versalien), unten links. Spalten: 2 am Telefon, 3 ab 700 px, 4 ab 1200 px, 5 ab 1800 px. Abwesend: Foto schwarzweiß und dunkler, Rahmen und Schrift in Sand, Status lesbar. Zeigen/Fokus: Foto zoomt leicht, Rahmen leuchtet stärker. Seit 15.10.2026 eine Wand mit allen Damen in der Reihenfolge der Sitzung (vorlage/damen-reihe.js, als Inline-Skript gleich nach der Wand); darüber eine Stand-Zeile (.damen-stand). Filter (.damenwahl) und Gruppen (.kachelgruppe) sind seitdem nicht mehr benutzt und bleiben für den Rückweg stehen. Bausteine: kachel, kachelwand, kachelgruppe, damenwahl (bausteine.py); Seite: seiten/damen.py. Anriss der Startseite (.dame, .fries) und Profile bleiben davon unberührt. */ .seite--damen .seitenkopf{padding-bottom:clamp(.6rem,1.6vw,1.4rem)} .seite--damen .seitenkopf .inschrift{font-size:clamp(1.9rem,4.1vw,3.7rem)} .seite--damen .seitenkopf .vorspann{margin-top:.9rem} .damen-stand{margin:.7rem auto 0;font-style:italic;font-size:.95rem;line-height:1.5;color:var(--sand)} /* Reihenfolge der Sitzung: im Produkt ordnet der Server die Damen (Cookie damen_reihe, src/lib/DamenReihe.php). Die Regel der Vorschau, die die Wand bis zum Ordnen durch ein Inline-Skript verbarg (html.js [data-damen-reihe]:not([data-geordnet]){visibility:hidden}), ist deshalb gestrichen – ohne dieses Skript bliebe die Wand sonst unsichtbar. */ /* Filter (seit 15.10.2026 nicht mehr benutzt, für den Rückweg): eine Leiste zwischen zwei Linien; am Telefon zwei mal zwei */ .damenwahl{display:flex;flex-wrap:wrap;justify-content:center;max-width:50rem;margin:clamp(1.5rem,2.8vw,2.2rem) auto 0; border-block:1px solid var(--linie)} .damenwahl__weg{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px; margin:0;padding:.5rem clamp(.9rem,2.1vw,1.8rem);border:0;border-radius:0;background:none;cursor:pointer; font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;line-height:1.25; color:var(--marmor);text-decoration:none;transition:color .4s} .damenwahl__weg+.damenwahl__weg{border-left:1px solid var(--linie)} .damenwahl__weg::after{content:"";position:absolute;left:16%;right:16%;bottom:-1px;height:2px;background:var(--hellgold); box-shadow:0 0 10px 1px rgba(255,213,151,.65);transform:scaleX(0);transition:transform .45s var(--weich)} .damenwahl__weg:hover,.damenwahl__weg:focus-visible,.damenwahl__weg[aria-pressed="true"]{color:var(--hellgold)} .damenwahl__weg[aria-pressed="true"]::after{transform:none} .damenwahl__weg:focus-visible{outline-offset:-4px} .damenwahl__zahl{font-family:var(--text);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none; font-size:1.02em;color:var(--sand)} .damenwahl__weg i{flex:none;width:.6em;height:.6em;border-radius:50%} .damenwahl__weg--neu i{width:1.05em;height:.55em;border-radius:0;background:var(--hellgold)} .damenwahl__weg--verfuegbar i{background:var(--hellgold);box-shadow:0 0 .45em .08em rgba(255,213,151,.8)} .damenwahl__weg--abwesend i{border:1px solid var(--sand)} @media(max-width:640px){ .damenwahl{display:grid;grid-template-columns:1fr 1fr;border-bottom:0} .damenwahl__weg{border-bottom:1px solid var(--linie);padding-inline:.25rem;gap:.45rem;font-size:.7rem;letter-spacing:.09em} .damenwahl__weg+.damenwahl__weg{border-left:0} .damenwahl__weg:nth-child(2n){border-left:1px solid var(--linie)} /* „Bald verfügbar“ zweizeilig und schmal, damit Zeichen und Zahl beim Wort bleiben */ .damenwahl__weg--abwesend>span:not(.damenwahl__zahl){width:min-content;text-align:center} } /* Gruppen (seit 15.10.2026 nicht mehr benutzt, für den Rückweg): Überschrift zwischen zwei Goldlinien, Stand darunter */ /* Abstand als gap: eine vom Filter verborgene Gruppe hinterlässt keine Lücke */ .damenwand{--wand:1600px;display:flex;flex-direction:column;gap:clamp(3.2rem,6vw,5.4rem); padding:clamp(2rem,3.6vw,3.2rem) var(--rand) 0} .kachelgruppe[hidden]{display:none} .kachelgruppe__titel{display:flex;align-items:center;justify-content:center;gap:clamp(.7rem,1.4vw,1.2rem); max-width:var(--wand);margin:0 auto;font-family:var(--disp);font-weight:500;text-transform:uppercase; letter-spacing:.16em;font-size:clamp(1.25rem,2.5vw,2.3rem);line-height:1.15;color:var(--hellgold);text-align:center} .kachelgruppe__titel span{padding-left:.16em;text-wrap:balance} .kachelgruppe__titel::before,.kachelgruppe__titel::after{content:"";flex:1 1 0;min-width:1.2rem;height:1px} .kachelgruppe__titel::before{background:linear-gradient(90deg,rgba(208,151,66,0),var(--linie2))} .kachelgruppe__titel::after{background:linear-gradient(270deg,rgba(208,151,66,0),var(--linie2))} .kachelgruppe__titel i{flex:none;width:.34em;height:.34em;border-radius:50%} .kachelgruppe--neu .kachelgruppe__titel i{width:.62em;height:.3em;border-radius:0;background:var(--hellgold)} .kachelgruppe--verfuegbar .kachelgruppe__titel i{background:var(--hellgold);box-shadow:0 0 .4em .08em rgba(255,213,151,.85)} .kachelgruppe--abwesend .kachelgruppe__titel i{border:1px solid var(--sand)} .kachelgruppe__stand{text-align:center;font-style:italic;font-size:.95rem;line-height:1.5;color:var(--sand); margin:.55rem auto clamp(1.4rem,2.6vw,2.2rem)} /* Telefon: zweizeilige Überschriften ohne Seitenlinien, das Zeichen steht direkt vor dem Wort */ @media(max-width:640px){ .kachelgruppe__titel{display:block;font-size:1.3rem;text-wrap:balance} .kachelgruppe__titel::before,.kachelgruppe__titel::after{content:none} .kachelgruppe__titel i{display:inline-block;vertical-align:.24em;margin-right:.6em} } /* Wand: Liste, unvollständige letzte Reihe mittig */ .kachelwand{--sp:2;--lu:clamp(10px,1.3vw,22px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lu); max-width:var(--wand);margin:0 auto} .kachelwand>li{flex:0 0 calc((100% - (var(--sp) - 1) * var(--lu)) / var(--sp));min-width:0} /* seit 15.10.2026 steht die Wand direkt in .damenwand (Flex-Spalte): mit margin:auto schrumpfte sie sonst auf ihre Inhaltsbreite */ .damenwand>.kachelwand{width:100%} @media(min-width:700px){.kachelwand{--sp:3}} @media(min-width:1200px){.kachelwand{--sp:4}} /* ab 1800 px fünf Spalten: die Gruppen mit 5 und 10 Damen füllen ganze Reihen, Kacheln bleiben über 330 px breit */ @media(min-width:1800px){.damenwand{--wand:1760px}.kachelwand{--sp:5}} /* Kachel */ .kachel{--r:clamp(12px,1.25vw,18px);position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r); container-type:inline-size;color:var(--marmor);text-decoration:none;-webkit-tap-highlight-color:transparent} .kachel__bild{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--basalt)} .kachel__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform 1.2s var(--weich)} /* Verlauf am unteren Rand: trägt Status und Name */ .kachel__bild::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(0,0,0,.92) 0,rgba(0,0,0,.7) 14%,rgba(0,0,0,.3) 32%,rgba(0,0,0,0) 50%)} /* Lichtglanz: zieht beim Zeigen einmal schräg über das Foto */ .kachel__bild::before{content:"";position:absolute;z-index:1;top:-12%;bottom:-12%;left:-80%;width:46%;pointer-events:none; background:linear-gradient(100deg,rgba(255,226,170,0),rgba(255,226,170,.13) 42%,rgba(255,240,214,.24) 50%,rgba(255,226,170,.13) 58%,rgba(255,226,170,0)); transform:skewX(-20deg);transition:left 1.5s var(--weich)} /* Rahmen: leuchtende Goldlinie, Schein nach außen und innen */ .kachel::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;pointer-events:none; border:1.5px solid rgba(255,213,151,.8); box-shadow:0 0 5px rgba(255,213,151,.45),0 0 16px 1px rgba(208,151,66,.36),0 0 38px 3px rgba(208,151,66,.14), inset 0 0 7px rgba(255,213,151,.34),inset 0 0 22px rgba(208,151,66,.16); transition:border-color .5s,box-shadow .5s} /* feiner diagonaler Lichtstreif quer über der Kante, je Kachel an anderer Stelle */ .kachel::before{content:"";position:absolute;z-index:3;top:17%;left:-9px;width:clamp(26px,17cqi,58px);height:1.5px; border-radius:1px;pointer-events:none;transform:rotate(-34deg);opacity:.9; background:linear-gradient(90deg,rgba(255,240,214,0),#FFF2DA 50%,rgba(255,240,214,0)); box-shadow:0 0 6px 1px rgba(255,213,151,.5)} .kachelwand>li:nth-child(3n+2) .kachel::before{top:auto;bottom:29%;left:auto;right:-9px} .kachelwand>li:nth-child(3n) .kachel::before{top:-1px;left:58%;transform:rotate(-22deg)} /* Status über dem Namen; im DOM steht der Name zuerst */ .kachel__text{position:absolute;z-index:3;left:clamp(.7rem,7.5cqi,1.5rem);right:clamp(.7rem,7.5cqi,1.5rem); bottom:clamp(.75rem,7cqi,1.45rem);display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.3rem;text-align:left} .kachel__name{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.09em;line-height:1.05; font-size:clamp(1.05rem,1.9vw,2rem);font-size:clamp(1.05rem,10.5cqi,2.15rem);color:var(--marmor);overflow-wrap:anywhere; text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.5)} .kachel__status{display:inline-flex;align-items:center;gap:.6em;font-family:var(--disp);font-weight:700;text-transform:uppercase; letter-spacing:.26em;line-height:1.2;font-size:clamp(.64rem,.8vw,.8rem);font-size:clamp(.64rem,4.1cqi,.82rem); color:var(--hellgold);text-shadow:0 0 10px rgba(0,0,0,.85)} .kachel__status i{flex:none;width:.66em;height:.66em;border-radius:50%} .kachel--verfuegbar .kachel__status i{background:var(--hellgold);box-shadow:0 0 .5em .1em rgba(255,213,151,.85)} .kachel--neu .kachel__status i{width:1.15em;height:.5em;border-radius:0;background:var(--hellgold)} /* Abwesend: schwarzweiß und dunkler (Wunsch des Kunden), Rahmen und Schrift in Sand */ .kachel--abwesend .kachel__bild img{filter:grayscale(1) brightness(.34) contrast(1.1)} .kachel--abwesend::after{border-color:rgba(187,172,144,.5); box-shadow:0 0 12px rgba(187,172,144,.14),inset 0 0 14px rgba(187,172,144,.1)} .kachel--abwesend::before{opacity:.35;background:linear-gradient(90deg,rgba(239,230,214,0),#EFE6D6 50%,rgba(239,230,214,0));box-shadow:none} .kachel--abwesend .kachel__status{color:var(--sand)} .kachel--abwesend .kachel__status i{border:1px solid var(--sand)} .kachel--abwesend .kachel__name{color:var(--sand)} /* Zeigen und Tastaturfokus: Rahmen leuchtet stärker, Foto zoomt leicht (Zeigen nur mit Maus, damit am Telefon nach dem Antippen nichts hängen bleibt) */ .kachel:focus-visible{outline:2px solid var(--hellgold);outline-offset:6px} .kachel:focus-visible::after{border-color:#FFE3B0; box-shadow:0 0 7px rgba(255,227,176,.75),0 0 22px 2px rgba(208,151,66,.6),0 0 60px 8px rgba(208,151,66,.26), inset 0 0 9px rgba(255,213,151,.5),inset 0 0 30px rgba(208,151,66,.26)} .kachel--abwesend:focus-visible::after{border-color:rgba(239,230,214,.75); box-shadow:0 0 18px 1px rgba(187,172,144,.32),inset 0 0 18px rgba(187,172,144,.2)} .kachel:focus-visible .kachel__bild img{transform:scale(1.05)} @media(hover:hover){ .kachel:hover::after{border-color:#FFE3B0; box-shadow:0 0 7px rgba(255,227,176,.75),0 0 22px 2px rgba(208,151,66,.6),0 0 60px 8px rgba(208,151,66,.26), inset 0 0 9px rgba(255,213,151,.5),inset 0 0 30px rgba(208,151,66,.26)} .kachel--abwesend:hover::after{border-color:rgba(239,230,214,.75); box-shadow:0 0 18px 1px rgba(187,172,144,.32),inset 0 0 18px rgba(187,172,144,.2)} .kachel:hover .kachel__bild img{transform:scale(1.05)} .kachel:hover .kachel__bild::before{left:135%} } @media(min-width:1200px){.kachel::after{border-width:2px}} @media(max-width:699px){ .kachel::before{left:-6px} .kachelwand>li:nth-child(3n+2) .kachel::before{right:-6px} } @media(prefers-reduced-motion:reduce){ .kachel .kachel__bild img{transform:none !important} .kachel__bild::before{display:none} } /* Hinweise des Kunden nach den Gruppen (wie am Ende jedes Profils) */ .damen-ende{padding-top:clamp(3rem,5.6vw,4.8rem);padding-bottom:0} .damen-ende .notiz{margin-top:0} /* === Ende Damen-Übersicht === */ /* ---------- Damen: Profil (Nische und Steckbrief) ---------- */ .profil{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"bild kopf" "bild daten"; column-gap:clamp(2.4rem,5.5vw,6rem);max-width:1180px;margin:0 auto; padding:calc(7rem + env(safe-area-inset-top,0px)) var(--rand) clamp(2rem,4vw,3.4rem)} .profil__bild{grid-area:bild;align-self:center;width:clamp(15rem,calc(60svh * var(--f) + 50px),32rem)} .profil__kopf{grid-area:kopf;align-self:end;text-align:left} .profil__kopf .zweig{width:120px;margin:0 0 1.1rem} .profil__kopf .inschrift{font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.05;margin-bottom:1rem} .profil__kopf .status{font-size:.9rem} .profil__daten{grid-area:daten;align-self:start} .profil--abwesend .profil__kopf .inschrift{color:var(--sand)} .aedicula--still .aedicula__bild img{opacity:1} .aedicula--profil{width:100%} .aedicula--profil .aedicula__bild img{object-position:50% 22%} .aedicula--abwesend .aedicula__bild img{filter:grayscale(1) brightness(.34) contrast(1.1)} .steckbrief{margin-top:clamp(1.5rem,2.8vw,2.2rem);text-align:left} .steckbrief__titel{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.84rem; line-height:1.4;color:var(--gold);margin-bottom:.7rem} .steckbrief__liste>div{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding:.58rem 0; border-bottom:1px solid var(--linie)} .steckbrief__liste>div:first-child{border-top:1px solid var(--linie)} .steckbrief dt{font-style:italic;color:var(--sand)} .steckbrief dd{margin:0;text-align:right;color:var(--marmor)} .wege--profil{justify-content:flex-start;margin-top:clamp(1.5rem,2.6vw,2rem)} @media(max-width:860px){ .profil{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "bild" "daten";row-gap:1.8rem} .profil__kopf{text-align:center} .profil__kopf .zweig{margin:0 auto 1rem} .profil__bild{width:min(100%,calc(62svh * var(--f) + 50px),26rem);margin:0 auto} .profil__daten{width:100%;max-width:32rem;margin:0 auto} .wege--profil{justify-content:center} } @media(max-width:520px){.wege--profil .knopf{flex:1 1 100%}} /* Galerie einer Dame: Reihen gleicher Höhe, jedes Bild in seinem Format, letzte Reihe mittig */ .profil-galerie{padding-top:clamp(.6rem,1.6vw,1.4rem)} .reihe{--h:clamp(140px,calc(5.5rem + 14vw),280px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1vw,14px); max-width:var(--breite);margin:0 auto} .reihe li{flex:calc(var(--f) * 100) 1 calc(var(--f) * var(--h));max-width:calc(var(--f) * var(--h) * 1.22);min-width:0} .reihe__tor{position:relative;display:block;aspect-ratio:var(--f);overflow:hidden;background:var(--basalt);cursor:zoom-in} .reihe__tor img{width:100%;height:100%;object-fit:cover;transition:transform 2.8s var(--weich),filter 1.4s ease} .reihe__tor::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,213,151,.28);pointer-events:none} .reihe--abwesend .reihe__tor img{filter:grayscale(1) brightness(.34) contrast(1.1)} .reihe--abwesend .reihe__tor::after{border-color:rgba(187,172,144,.3)} @media(hover:hover){.reihe__tor:hover img{transform:scale(1.03)}} /* Leuchte: die Galerie im Vollbild */ .leuchte{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0; background:rgba(0,0,0,.97);color:var(--marmor);overflow:hidden;overscroll-behavior:contain} .leuchte[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto} .leuchte::backdrop{background:rgba(0,0,0,.92)} .leuchte__oben{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--linie); padding:calc(.7rem + env(safe-area-inset-top,0px)) calc(var(--rand) + env(safe-area-inset-right,0px)) .7rem calc(var(--rand) + env(safe-area-inset-left,0px))} .leuchte__wer{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.1rem} .leuchte__name{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:1.05rem;color:var(--hellgold)} .leuchte__zu{min-height:44px;padding:0 .2rem;background:none;border:0;cursor:pointer;color:var(--hellgold)} .leuchte__buehne{position:relative;min-height:0;touch-action:pan-y pinch-zoom} /* nie größer als die Datei selbst (width/height auto): die Fassung bis 1600 px trägt jede Bühne */ .leuchte__bild{position:absolute;inset:clamp(.6rem,2vw,1.4rem) var(--rand);margin:auto;max-width:calc(100% - 2 * var(--rand)); max-height:calc(100% - 2 * clamp(.6rem,2vw,1.4rem));width:auto;height:auto;opacity:0; box-shadow:0 0 0 1px var(--linie2);transition:opacity .45s ease} .leuchte__bild.da{opacity:1} .leuchte__unten{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,4vw,3rem); padding:.6rem var(--rand) calc(.9rem + env(safe-area-inset-bottom,0px))} .leuchte__pfeil{width:54px;height:54px;padding:0;border-radius:50%;border:1px solid var(--linie2);background:rgba(0,0,0,.6); cursor:pointer;display:grid;place-items:center;transition:border-color .4s} .leuchte__pfeil:hover{border-color:var(--hellgold)} .leuchte__pfeil i{display:block;width:12px;height:12px;border-top:1.5px solid var(--hellgold);border-left:1.5px solid var(--hellgold)} .leuchte__pfeil--zurueck i{transform:translateX(2px) rotate(-45deg)} .leuchte__pfeil--vor i{transform:translateX(-2px) rotate(135deg)} .leuchte__zahl{min-width:8.5em;text-align:center;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:.8rem;color:var(--sand);font-variant-numeric:tabular-nums} /* Weiter zur vorigen / nächsten Dame */ .blaettern{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1.2rem 1.6rem; max-width:60rem;margin:clamp(2.4rem,4.4vw,3.4rem) auto 0;padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--linie)} .blaettern__weg{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.15rem;min-height:54px; padding-left:2.4rem;text-decoration:none} .blaettern__weg::before{content:"";position:absolute;left:.55rem;top:50%;width:11px;height:11px;border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold);transform:translateY(-50%) rotate(-45deg)} .blaettern__weg--vor{align-items:flex-end;text-align:right;padding:0 2.4rem 0 0} .blaettern__weg--vor::before{left:auto;right:.55rem;transform:translateY(-50%) rotate(135deg)} .blaettern__wort{font-style:italic;font-size:.95rem;color:var(--sand)} .blaettern__name{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:1.02rem; color:var(--hellgold);transition:color .4s} .blaettern__weg--abwesend .blaettern__name{color:var(--sand)} .blaettern__weg:hover .blaettern__name{color:#fff} .blaettern__mitte{display:flex;justify-content:center} @media(max-width:620px){ .blaettern{grid-template-columns:1fr 1fr} .blaettern__mitte{grid-column:1 / -1;grid-row:2} } /* Zwei Wege: Services und Kontakt am Ende */ .zwei-wege{padding-top:clamp(2.4rem,4.4vw,3.6rem)} .portal--weg .portal__tor{margin-bottom:0} .portal p+p{margin-top:.6rem} .portal .wege{margin-top:1.4rem} .portal--einzeln{max-width:760px;margin:0 auto} /* ---------- Über uns: Bars, Zimmer, FAQ ---------- */ .portal__text{max-width:31em;margin:0 auto;text-align:center} .mehr{margin-top:.7rem} .mehr summary{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;cursor:pointer;list-style:none; font-family:var(--disp);font-weight:700;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hellgold)} .mehr summary::-webkit-details-marker{display:none} .mehr summary::before{content:"";flex:none;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);transition:background .4s} .mehr[open] summary::before{background:var(--gold)} .mehr summary:hover{color:#fff} .mehr__zu,.mehr[open] .mehr__auf{display:none} .mehr[open] .mehr__zu{display:inline} .mehr__text p{margin-top:.8rem} .mehr__text p:first-child{margin-top:.2rem} .raeume{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.8rem,4.8vw,4.4rem) clamp(2rem,4.4vw,4.4rem); max-width:1180px;margin:0 auto;text-align:left} .raum{display:grid;grid-template-columns:clamp(9rem,15vw,13rem) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"bogen kopf" "bogen mehr"; column-gap:clamp(1.2rem,2.4vw,2rem);align-items:start;scroll-margin-top:96px} .raum__bogen{grid-area:bogen;position:relative;display:block;padding:11px 11px 0;border-bottom:1px solid var(--linie2); box-shadow:0 5px 0 -1px #000,0 5px 0 0 var(--linie)} .raum__archivolte{position:absolute;inset:0;border:1px solid var(--linie2);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none} .raum__archivolte::before{content:"";position:absolute;top:-6px;left:calc(50% - 5px);width:10px;height:10px; border:1px solid var(--gold);background:#000;transform:rotate(45deg)} .raum__bild{display:block;aspect-ratio:2/3;border-radius:999px 999px 0 0;overflow:hidden;background:var(--basalt)} .raum__bild img{width:100%;height:100%;object-fit:cover} .raum__kopf{grid-area:kopf} .raum__name{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.12em; font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.3;color:var(--hellgold);margin:.5rem 0 .8rem;text-wrap:balance} .raum__mehr{grid-area:mehr} .raum p{font-size:1.04rem} .zimmer--seite .notiz{margin-top:clamp(2.6rem,4.4vw,3.6rem)} @media(max-width:960px){.raeume{grid-template-columns:minmax(0,1fr);max-width:42rem}} @media(max-width:520px){ .raum{grid-template-columns:38% minmax(0,1fr);grid-template-areas:"bogen kopf" "mehr mehr";column-gap:1rem} .raum__name{font-size:1rem;margin-top:.2rem} .raum__kopf p{font-size:.98rem;line-height:1.6} .raum__mehr{margin-top:.4rem} } .fragen{max-width:52rem;margin:0 auto;border-top:1px solid var(--linie);text-align:left} .frage{border-bottom:1px solid var(--linie)} .frage summary{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:56px;padding:1.05rem .2rem; cursor:pointer;list-style:none} .frage summary::-webkit-details-marker{display:none} .frage__text{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em; font-size:clamp(.9rem,1.3vw,1.06rem);line-height:1.45;color:var(--marmor);transition:color .4s;text-wrap:balance} .frage[open] .frage__text,.frage summary:hover .frage__text{color:var(--hellgold)} .frage__zeichen{flex:none;width:12px;height:12px;margin-right:.3rem;border:1px solid var(--gold);transform:rotate(45deg);transition:background .4s} .frage[open] .frage__zeichen{background:var(--gold)} .frage__antwort{max-width:44em;padding:0 .2rem 1.6rem} .frage__antwort p+p,.frage__antwort .tickets+p{margin-top:.8rem} .frage__antwort .tickets{margin:1.3rem 0 1.1rem} .faq .notiz+.notiz{margin-top:.6rem} /* ---------- Aktionen: Aushänge in Nischen ---------- */ .aushaenge{--sp:3;--lu:clamp(1.6rem,3.4vw,3.4rem);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start; gap:clamp(3rem,5vw,4.6rem) var(--lu);max-width:1200px;margin:0 auto} .aushangkarte{flex:0 0 calc((100% - (var(--sp) - 1) * var(--lu)) / var(--sp));min-width:0;text-align:center;scroll-margin-top:96px} .aushangkarte .aedicula{width:calc(100% - 18px);max-width:380px} .aushangkarte .aedicula__feld{padding:14px 16px 16px} .aushangkarte .schild{margin-top:-1px;padding:.75rem 1.4rem .75rem calc(1.4rem + .2em);font-size:clamp(1rem,1.5vw,1.22rem); max-width:calc(100% - 1rem);text-wrap:balance} .aushangkarte p{max-width:28em;margin:1.1rem auto 0;font-size:1.04rem;text-wrap:pretty} .aushangkarte p+p{margin-top:.5rem} .kranztafel{position:absolute;inset:0;display:grid;place-items:center; background:radial-gradient(ellipse 60% 50% at 50% 47%,rgba(208,151,66,.13),rgba(0,0,0,0) 70%),#000} .kranztafel svg{position:absolute;left:9%;top:50%;width:82%;aspect-ratio:1;transform:translateY(-52%);color:var(--gold);opacity:.8} .kranztafel__text{position:relative;max-width:6.6em;font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.1em;font-size:clamp(.95rem,1.45vw,1.25rem);line-height:1.25;color:var(--hellgold);text-align:center; text-wrap:balance;-webkit-hyphens:auto;hyphens:auto} @media(max-width:1020px){.aushaenge{--sp:2;max-width:820px}} @media(max-width:640px){ .aushaenge{--sp:1;max-width:26rem} .aushangkarte--tafel .aedicula__bild{aspect-ratio:1 / 1 !important} .kranztafel svg{left:10%;width:80%} .kranztafel__text{font-size:1.08rem} } /* ---------- Services: die Münze; Escort: das Siegel ---------- */ .seitenkopf--muenze{position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(2.6rem,5vw,4rem)} .seitenkopf__ring{position:absolute;z-index:-1;left:50%;top:calc(50% + 3.6rem);width:min(34rem,112vw);aspect-ratio:1; transform:translate(-50%,-50%);color:var(--gold);opacity:.2} .dienste-tafel .plakette{margin-top:clamp(1.4rem,3vw,2.2rem)} .seitenkopf--muenze .vorspann{max-width:30em} .dienste-tafel .dienste__vorab{margin-top:0} .dienste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.6rem,4.6vw,4rem) clamp(1.6rem,3.6vw,3.4rem); max-width:1180px;margin:clamp(2.6rem,5vw,4rem) auto 0} .dienst{text-align:center;scroll-margin-top:96px} .dienst__bild{display:block;color:inherit;text-decoration:none} .dienst__name a{color:inherit;text-decoration:underline;text-decoration-color:var(--linie2);text-decoration-thickness:1px;text-underline-offset:.32em} .dienst__name a:hover{text-decoration-color:var(--hellgold)} .medaillon{position:relative;display:block;width:var(--m,10rem);aspect-ratio:1;margin:0 auto;flex:none} .medaillon img{position:absolute;inset:9%;width:82%;height:82%;border-radius:50%;object-fit:cover} .medaillon svg{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);transition:transform 2.6s var(--weich)} .medaillon--dienst{--m:clamp(8rem,12vw,11rem)} .medaillon--dienst img{filter:grayscale(1) sepia(.62) saturate(1.5) brightness(.84) contrast(1.05);transition:filter 1.3s ease} .dienst:hover .medaillon img,.dienst:focus-within .medaillon img{filter:none} .dienst:hover .medaillon svg{transform:rotate(42deg)} .dienst__name{margin-top:1rem;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.14em;padding-left:.14em; font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.3;color:var(--hellgold)} .dienst__text{max-width:23em;margin:.7rem auto 0;font-size:1.04rem;text-wrap:pretty} @media(max-width:1000px){.dienste{grid-template-columns:repeat(2,minmax(0,1fr));max-width:46rem}} @media(max-width:600px){ .dienste{grid-template-columns:minmax(0,1fr);gap:1.9rem} .dienst{display:grid;grid-template-columns:5.6rem minmax(0,1fr);column-gap:1.1rem;align-items:start;text-align:left} .medaillon--dienst{--m:5.6rem;margin:0} .dienst__name{margin:.5rem 0 0;padding-left:0} .dienst__text{margin:.35rem 0 0;font-size:1rem} } .siegel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);max-width:1100px; margin:0 auto;padding:calc(7.4rem + env(safe-area-inset-top,0px)) var(--rand) clamp(2.6rem,5vw,4rem)} .medaillon--siegel{--m:clamp(14rem,27vw,22rem)} .siegel__text{text-align:left} .siegel__text .zweig{width:120px;margin:0 0 1.1rem} .siegel__text .inschrift{font-size:clamp(2rem,4.4vw,4.2rem)} .siegel__text .seitenkopf__unter{padding-left:0;margin:.8rem 0 1.5rem} .siegel__auftritt{font-style:italic;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.55;color:var(--hellgold)} .siegel__text p+p{margin-top:.9rem} .siegel .wege{justify-content:flex-start} @media(max-width:820px){ .siegel{grid-template-columns:minmax(0,1fr);text-align:center} .siegel__text{text-align:center} .siegel__text .zweig{margin:0 auto 1rem} .siegel__text .seitenkopf__unter{padding-left:.18em} .siegel .wege{justify-content:center} .medaillon--siegel{--m:min(15rem,64vw);order:-1} } /* ---------- Kontakt: der Meilenstein ---------- */ .seitenkopf--stele{padding-top:calc(6.8rem + env(safe-area-inset-top,0px))} .stele{position:relative;width:min(100%,36rem);margin:0 auto 16px;padding:clamp(3rem,6vw,4.4rem) clamp(1.3rem,4vw,3rem) clamp(2rem,3.6vw,2.8rem); border:1px solid var(--linie2);border-bottom:0;border-radius:18rem 18rem 0 0 / 7rem 7rem 0 0; background:linear-gradient(180deg,rgba(208,151,66,.1),rgba(208,151,66,.02) 60%,rgba(0,0,0,0))} .stele::before{content:"";position:absolute;inset:8px 8px 0;border:1px solid var(--linie);border-bottom:0; border-radius:17.5rem 17.5rem 0 0 / 6.6rem 6.6rem 0 0;pointer-events:none} .stele__sockel{position:absolute;left:-14px;right:-14px;bottom:-16px;height:16px;border:1px solid var(--linie2);background:#000} .stele__text{max-width:24em;margin:1.1rem auto 0;text-wrap:balance} .stele .jetzt{margin-top:1.3rem} .seitenkopf--stele .vorspann{margin-top:2.6rem} .kontakt--seite .wegweiser h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.2em;padding-left:.2em; font-size:.95rem;color:var(--gold);margin-bottom:.9rem} .wegweiser__formular{margin-top:1rem} /* ---------- Formulare ---------- */ .formular-abschnitt .tafelkopf{margin-bottom:clamp(1.6rem,3vw,2.4rem)} .formulartafel{position:relative;max-width:44rem;margin:0 auto;padding:clamp(1.4rem,4vw,3rem);background:var(--basalt); border:1px solid var(--linie2)} .formulartafel::after{content:"";position:absolute;inset:7px;border:1px solid var(--linie);pointer-events:none} .formulartafel--breit{max-width:52rem} .formular{position:relative;z-index:1;display:grid;gap:clamp(1.2rem,2.4vw,1.7rem);text-align:left} .feld{min-width:0;margin:0;padding:0;border:0} .feld__name,.feld legend{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.55rem;padding:0;font-family:var(--disp); font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;line-height:1.45;color:var(--gold)} .feld--frage legend{font-size:clamp(.86rem,1.25vw,.98rem);letter-spacing:.08em;color:var(--hellgold);margin-bottom:.9rem} .feld__zahl{flex:none;min-width:2.1em;font-weight:500;letter-spacing:.06em;color:var(--gold)} .formular input:not([type=radio]):not([type=file]),.formular textarea{display:block;width:100%;min-height:52px;margin:0;padding:.75rem 1rem; font:inherit;font-size:1.06rem;line-height:1.5;color:var(--marmor);background:#000;border:1px solid var(--linie2);border-radius:0; -webkit-appearance:none;appearance:none;transition:border-color .4s,box-shadow .4s} .formular textarea{resize:vertical;min-height:8.5rem} .formular input:focus,.formular textarea:focus{outline:none;border-color:var(--hellgold);box-shadow:0 0 0 1px var(--hellgold)} .formular ::placeholder{color:var(--sand);opacity:.75} .wahl{display:flex;flex-wrap:wrap;gap:.6rem} .wahl__punkt{display:inline-flex;align-items:center;gap:.75rem;min-height:48px;padding:.5rem 1.1rem;border:1px solid var(--linie); cursor:pointer;color:var(--marmor);transition:border-color .4s,color .4s} .wahl__punkt:hover{border-color:var(--linie2)} .wahl__punkt input{flex:none;width:11px;height:11px;margin:0 .15rem;border:1px solid var(--gold);background:none; transform:rotate(45deg);-webkit-appearance:none;appearance:none;cursor:pointer} .wahl__punkt input:checked{background:var(--hellgold);border-color:var(--hellgold);box-shadow:0 0 .5em .05em rgba(255,213,151,.7)} .wahl__punkt input:focus-visible{outline:2px solid var(--hellgold);outline-offset:5px} .wahl__punkt:has(input:checked){border-color:var(--gold);color:var(--hellgold)} /* Datei wählen: eigener Knopf statt der Beschriftung des Browsers (sonst je nach Browser englisch) */ .datei{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;cursor:pointer} .datei input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0} .datei__knopf{display:inline-flex;align-items:center;min-height:46px;padding:.5rem 1.3rem .5rem calc(1.3rem + .18em);font-family:var(--disp); font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hellgold);background:#000; border:1px solid var(--gold);transition:background .4s} .datei:hover .datei__knopf{background:rgba(208,151,66,.16)} .datei input:focus-visible+.datei__knopf{outline:2px solid var(--hellgold);outline-offset:4px} .datei__stand{font-style:italic;color:var(--sand)} .formular__satz{font-style:italic;color:var(--sand);text-align:center;text-wrap:pretty} .formular__ende{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:.5rem;text-align:center} .formular__ende .knopf{min-width:12rem} .formular__stand{max-width:30em;padding:.9rem 1.2rem;border-block:1px solid var(--linie2);font-style:italic;color:var(--hellgold)} .knopf[disabled]{opacity:.5;cursor:not-allowed} /* ---------- Jobs: Video im Bogen ---------- */ .jobskopf{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(2.4rem,5.4vw,6rem);max-width:1180px; margin:0 auto;padding:calc(7rem + env(safe-area-inset-top,0px)) var(--rand) clamp(2.6rem,5vw,4rem)} .jobskopf__bogen{width:clamp(15rem,24vw,21rem)} .jobskopf__text{text-align:left} .jobskopf__text .zweig{width:120px;margin:0 0 1.1rem} .jobskopf__text .inschrift{font-size:clamp(2rem,4.4vw,4.1rem)} .jobskopf__text .seitenkopf__unter{padding-left:0;margin:.8rem 0 1.5rem} .jobskopf__auftritt{font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.58} .jobskopf__paar{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin:1.3rem 0;padding:.95rem 0;border-block:1px solid var(--linie2); font-style:italic;font-size:clamp(1.08rem,1.4vw,1.22rem);color:var(--hellgold)} .bogen{position:relative} .bogen::before{content:"";display:block;height:15px;margin:0 -9px;border-block:1px solid var(--linie2); background:repeating-linear-gradient(90deg,var(--linie2) 0 4px,transparent 4px 9px) left bottom 3px/100% 4px no-repeat} .bogen__feld{position:relative;display:block;padding:22px 22px 0;border-bottom:1px solid var(--linie2); box-shadow:0 6px 0 -1px #000,0 6px 0 0 var(--linie)} .bogen__feld::before,.bogen__feld::after{content:"";position:absolute;top:0;bottom:0;left:-9px;width:18px;background:var(--pilaster)} .bogen__feld::after{left:auto;right:-9px} .bogen__archivolte{position:absolute;top:12px;bottom:0;left:13px;right:13px;border:1px solid var(--linie2);border-bottom:0; border-radius:999px 999px 0 0;pointer-events:none} .bogen__archivolte::before{content:"";position:absolute;top:-6px;left:calc(50% - 5px);width:10px;height:10px;border:1px solid var(--gold); background:#000;transform:rotate(45deg)} .bogen__bild{position:relative;display:block;aspect-ratio:9/16;border-radius:999px 999px 0 0;overflow:hidden;background:var(--basalt)} .bogen__video{display:block;width:100%;height:100%;object-fit:cover} .bogen__knopf{position:absolute;right:30px;bottom:14px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--linie2); background:rgba(0,0,0,.62);display:grid;place-items:center;cursor:pointer} .bogen__knopf[hidden]{display:none} .bogen__knopf i{display:block;width:11px;height:13px;border-left:3px solid var(--hellgold);border-right:3px solid var(--hellgold)} .bogen__knopf.steht i{width:0;height:0;margin-left:4px;border-left:11px solid var(--hellgold);border-right:0; border-top:7px solid transparent;border-bottom:7px solid transparent} @media(max-width:820px){ .jobskopf{grid-template-columns:minmax(0,1fr);text-align:center} .jobskopf__text{order:-1;text-align:center} .jobskopf__text .zweig{margin:0 auto 1rem} .jobskopf__text .seitenkopf__unter{padding-left:.18em} .jobskopf__paar{justify-content:center} .jobskopf__bogen{width:min(16rem,66vw);margin:0 auto} } .vorteile{max-width:44rem;margin:0 auto;text-align:left} .vorteile li{position:relative;padding:.95rem 0 .95rem 1.8rem;border-bottom:1px solid var(--linie)} .vorteile li:first-child{border-top:1px solid var(--linie)} .vorteile li::before{content:"";position:absolute;left:.25rem;top:1.62rem;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)} .formular-abschnitt .notiz+.formulartafel{margin-top:clamp(1.4rem,2.6vw,2rem)} /* ---------- Formulare: Antwort und markiertes Feld (nur im Produkt, 2026-10-19) ---------- Die Meldung des Servers steht in .formular__stand (Gold bei Erfolg, Marmor auf Sand bei einem Fehler); ein Feld, das der Server beanstandet, traegt aria-invalid (common/js/colosseum.js, Teil „Formulare“). */ .formular__stand--fehler{color:var(--marmor);border-color:var(--sand)} .formular__stand .verweis{font-style:normal;white-space:nowrap} .formular input[aria-invalid=true]:not([type=radio]),.formular textarea[aria-invalid=true]{border-color:#E8A27A;box-shadow:0 0 0 1px #E8A27A} .wahl__punkt:has(input[aria-invalid=true]){border-color:#E8A27A} .datei:has(input[aria-invalid=true]) .datei__knopf{border-color:#E8A27A} /* ---------- Jobs: Sprachwahl (nur im Produkt, 2026-10-19) ---------- Die Jobseite ist mehrsprachig wie die von Chalet (page/jobs/lang.phtml): EN, DE, RO, HU, SK als echte Verweise (/jobs, /jobs?lang=de …), über dem Zweig. Kürzel in Cinzel wie die Zeilen der Kopfleiste; die gewählte Sprache in Hellgold mit Goldlinie, die übrigen in Sand. Steht wie der Text links, unter 820 px mittig. */ .sprachwahl{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 clamp(1.3rem,2.6vw,2rem)} .sprachwahl a{display:inline-block;min-width:2.9rem;padding:.6rem .5rem .55rem .74rem;border:1px solid var(--linie); font-family:var(--disp);font-weight:600;font-size:.76rem;line-height:1;letter-spacing:.24em;text-align:center; color:var(--sand);text-decoration:none;transition:color .3s,border-color .3s} .sprachwahl a:hover{color:var(--hellgold);border-color:var(--linie2)} .sprachwahl a[aria-current]{color:var(--hellgold);border-color:var(--gold)} @media(max-width:820px){.sprachwahl{justify-content:center}} /* ---------- Impressum, Datenschutz: die Gesetzestafel ---------- */ .recht .tafel__innen{max-width:54rem} .gesetz{position:relative;padding:clamp(1.6rem,5vw,3.8rem) clamp(1.15rem,5vw,3.8rem);background:var(--basalt);border:1px solid var(--linie2)} .gesetz::after{content:"";position:absolute;inset:8px;border:1px solid var(--linie);pointer-events:none} .gesetz__nieten{position:absolute;inset:15px;pointer-events:none;background: radial-gradient(circle,var(--gold) 0 2.4px,transparent 3px) left top/8px 8px no-repeat, radial-gradient(circle,var(--gold) 0 2.4px,transparent 3px) right top/8px 8px no-repeat, radial-gradient(circle,var(--gold) 0 2.4px,transparent 3px) left bottom/8px 8px no-repeat, radial-gradient(circle,var(--gold) 0 2.4px,transparent 3px) right bottom/8px 8px no-repeat} .gesetz__text{position:relative;z-index:1;max-width:40em;margin:0 auto;font-size:1.02rem;line-height:1.72;overflow-wrap:break-word} .gesetz h2{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.1rem,1.9vw,1.48rem); line-height:1.35;color:var(--hellgold);margin:2.8rem 0 1rem;text-wrap:balance} .gesetz h2:first-child{margin-top:0} .gesetz h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.86rem;line-height:1.45; color:var(--gold);margin:1.9rem 0 .5rem} .gesetz h2+h3{margin-top:1.2rem} .gesetz p+p,.gesetz ul+p,.gesetz p+ul{margin-top:.8rem} .gesetz ul li{position:relative;padding-left:1.3rem} .gesetz ul li::before{content:"";position:absolute;left:.2rem;top:.72em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)} /* ---------- Licht: Einblenden beim Scrollen ---------- */ html.js [data-licht]{opacity:0;filter:brightness(.3); transition:opacity 1.5s ease var(--v,0s),filter 2.1s ease var(--v,0s)} html.js [data-licht].an{opacity:1;filter:none} /* Eintrittskarten behalten ihre Drehung; nur die Deckkraft blendet */ html.js .ticket[data-licht]{filter:none} /* Kopftafel der Unterseiten blendet ein, sobald die Seite frei ist (der Auftakt hat seinen eigenen Block) */ html.js .tabula{opacity:0} html.js.bereit .tabula{opacity:1;transition:opacity 1.5s ease .6s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important; animation-duration:.01ms !important;animation-iteration-count:1 !important} html.js [data-licht]{opacity:1;filter:none} }