/* Theme Name: Theater Büenzen Description: Eigenständiges Theme für Theater Büenzen. Notizheft auf Regietisch. Author: Theater Büenzen Version: 1.0.5 License: GNU General Public License v2 or later Text Domain: theater-buenzen */ /* Kein Template: – dieses Theme ist eigenständig */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Special+Elite&display=swap'); :root { --tb-paper: #e8dcc0; --tb-paper-lt: #f4eeda; --tb-paper-line: rgba(100,75,40,.20); --tb-ink: #0a0703; --tb-ink-mid: #3a2810; --tb-ink-lt: #5a3e20; --tb-red: #8b1a1a; --tb-red-dk: #6a1010; --tb-gold: #c0a870; --tb-spine: #1a1008; --tb-ring: #5a4030; --tb-dark: #0d0a06; --tb-stage: #180e05; --tb-desk: #221608; --tb-sticky: #f5e870; --fh: 'Caveat', cursive; --ft: 'Special Elite', serif; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html, body { background: var(--tb-dark); font-family: var(--ft); color: var(--tb-ink-mid); min-height: 100vh; } /* ── LAYOUT-WRAPPER ──────────────────────────────── */ .tb-world { display: flex; flex-direction: column; align-items: center; background: var(--tb-dark); min-height: 100vh; } /* ── BÜHNE ───────────────────────────────────────── */ .tb-stage-wrap { width: 100%; max-width: 960px; background: var(--tb-stage); border-left: 8px solid #2e1608; border-right: 8px solid #2e1608; position: relative; overflow: hidden; height: 200px; flex-shrink: 0; } .tb-curtain-l { position:absolute; top:0; left:0; width:120px; height:100%; background: repeating-linear-gradient(90deg,#5a0808 0,#8b1a1a 7px,#6a0e0e 14px,#7a1212 22px); clip-path: polygon(0 0,82% 0,100% 12%,88% 55%,94% 100%,0 100%); } .tb-curtain-r { position:absolute; top:0; right:0; width:120px; height:100%; background: repeating-linear-gradient(90deg,#7a1212 0,#6a0e0e 7px,#8b1a1a 14px,#5a0808 22px); clip-path: polygon(18% 0,100% 0,100% 100%,6% 100%,12% 55%,0 12%); } .tb-lamps { position:absolute; top:0; left:88px; right:88px; height:20px; background:#111008; border-bottom:2px solid #3a2a10; display:flex; justify-content:space-around; align-items:flex-end; padding-bottom:2px; } .tb-lu { display:flex; flex-direction:column; align-items:center; } .tb-lu-pipe { width:2px; height:10px; background:#3a2a10; } .tb-lu-head { width:12px; height:7px; background:#2a1e0e; border:1.5px solid #4a3a1e; border-radius:1px; } .tb-lu-glow { width:3px; height:3px; background:#ffd870; border-radius:50%; box-shadow:0 0 5px 3px rgba(255,210,80,.35); margin-top:1px; } .tb-sp { position:absolute; top:18px; border-left:35px solid transparent; border-right:35px solid transparent; } .tb-sp-l { left:100px; border-top:165px solid rgba(255,245,200,.10); } .tb-sp-c { left:50%; transform:translateX(-50%); border-left-width:25px; border-right-width:25px; border-top:155px solid rgba(255,245,200,.07); } .tb-sp-r { right:100px; border-top:165px solid rgba(255,245,200,.10); } .tb-stage-floor { position:absolute; bottom:0; left:80px; right:80px; height:28px; background:#2a1a0a; border-top:3px solid #4a2a10; } .tb-arch { position:absolute; top:0; left:70px; right:70px; bottom:0; border:3px solid #3a2010; border-bottom:none; border-radius:52px 52px 0 0; pointer-events:none; z-index:3; } .tb-stage-title { position:absolute; bottom:34px; left:0; right:0; text-align:center; z-index:2; font-family:var(--fh); font-size:26px; font-weight:700; color:rgba(245,230,160,.4); letter-spacing:6px; text-transform:uppercase; } /* ── PROSZENIUM ──────────────────────────────────── */ .tb-proscenium { width:100%; max-width:960px; height:12px; background:#3a2010; border-left:8px solid #2e1608; border-right:8px solid #2e1608; } /* ── SITZE ───────────────────────────────────────── */ .tb-aud { width:100%; max-width:960px; height:90px; overflow:hidden; background:#0f0b07; border-left:8px solid #2e1608; border-right:8px solid #2e1608; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 0; } .tb-seat-row { display:flex; justify-content:center; gap:3px; } .tb-seat { width:14px; height:12px; background:#1a1208; border:1px solid #2a1c10; border-radius:2px 2px 0 0; } .tb-seat.occ { background:#251a0e; border-color:#382510; } .tb-aisle-gap { width:20px; } .tb-aisle-strip { width:100%; max-width:960px; height:16px; background:#0a0805; border-left:8px solid #2e1608; border-right:8px solid #2e1608; } /* ── SITZE: Foto-Streifen ────────────────────────── */ .tb-aud-photo { width:100%; max-width:960px; height:110px; overflow:hidden; border-left:8px solid #2e1608; border-right:8px solid #2e1608; background:#0e0b07; position:relative; } .tb-aud-photo img { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; display:block; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 78%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 78%,transparent 100%); } /* ── REGIETISCH ──────────────────────────────────── */ .tb-desk { width:100%; max-width:960px; background: var(--tb-desk); background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 80px); border-left:8px solid #2e1608; border-right:8px solid #2e1608; border-top:4px solid #4a3020; padding:24px 24px 50px; position:relative; overflow:visible; box-shadow:0 -6px 30px rgba(0,0,0,.6); flex:1; } /* SCHWANENHALS-LAMPE – klein, steht auf dem Tisch */ .tb-goose-wrap { position:absolute; right:48px; bottom:36px; /* Fuss sitzt auf der Tischfläche */ width:28px; /* schmal wie eine echte Tischlampe */ height:55px; /* kompakt */ } .tb-goose-svg { width:28px; height:55px; display:block; } /* Lichtfleck auf Tischfläche direkt unter der Lampe */ .tb-lamp-spot { position:absolute; bottom:0px; left:50%; transform:translateX(-50%); width:60px; height:10px; background:radial-gradient(ellipse, rgba(255,224,80,0.28) 0%, rgba(255,224,80,0) 70%); border-radius:50%; } .tb-props { display:flex; align-items:flex-end; justify-content:flex-end; gap:14px; margin-bottom:14px; } .tb-pages { display:flex; flex-direction:column; } .tb-pg { width:100px; height:7px; background:#d8cca8; border:1px solid #b8a880; margin-bottom:-3px; } .tb-pg:first-child { background:#e8dcc0; } .tb-pen { width:7px; height:52px; background:linear-gradient(to bottom,#111 0%,#111 78%,#c8a050 78%,#c8a050 90%,#888 90%); border-radius:2px 2px 0 0; transform:rotate(-18deg); margin-bottom:2px; } .tb-cup { width:26px; height:30px; background:#160e06; border:2px solid #3a2510; border-radius:0 0 5px 5px; position:relative; } .tb-cup::after { content:''; position:absolute; right:-7px; top:6px; width:7px; height:12px; border:2px solid #3a2510; border-left:none; border-radius:0 4px 4px 0; } .tb-cup-top { position:absolute; top:3px; left:3px; right:3px; height:6px; background:#281606; border-radius:2px; } /* ── NOTIZBUCH ───────────────────────────────────── */ .tb-nb-wrap { position:relative; } .tb-nb-shadow { position:absolute; inset:8px -8px -14px 8px; background:rgba(0,0,0,.55); border-radius:4px; filter:blur(10px); } .tb-nb { position:relative; display:flex; background: var(--tb-paper); background-image: repeating-linear-gradient(0deg,transparent,transparent 31px,var(--tb-paper-line) 31px,var(--tb-paper-line) 32px); border-radius:3px 5px 5px 3px; transform:rotate(.5deg); } .tb-spine { width:26px; background:var(--tb-spine); border-radius:3px 0 0 3px; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:2px; flex-shrink:0; } .tb-ring { width:18px; height:16px; border:2.5px solid var(--tb-ring); border-radius:50%; flex-shrink:0; } .tb-nb-body { flex:1; padding:28px 32px 40px 22px; min-width:0; } /* Navigation + Hamburger: vollständig via inline