/* Theme Name: Theater Büenzen Description: Notizblock-Theme – Toi toi toi 2026 Version: 7.2.2 */ :root { color-scheme: light only; } html, body { color-scheme: light only; } /* Schrift-Variablen – Standardwerte. Werden vom Customizer (functions.php, tb_font_css) im überschrieben, sobald andere Schriften gewählt sind. */ :root { --tb-font-body: 'Caveat', cursive; --tb-font-h1: 'Special Elite', serif; --tb-font-h2: 'Caveat', cursive; --tb-font-h3: 'Caveat', cursive; --tb-font-menu: 'Caveat', cursive; --tb-font-postit: 'Caveat', cursive; --tb-fs-body: 17px; --tb-fs-h1: 34px; --tb-fs-h2: 28px; --tb-fs-h3: 23px; --tb-fs-menu: 23px; --tb-fs-postit: 20px; } @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Special+Elite&display=swap'); *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} body { min-height:100vh; background-color:#c8b89a; background-image:var(--tb-bg-image,none); background-repeat:repeat; font-family:'Special Elite',serif; color:#1a1208; } /* ── SEITE ───────────────────────────────────────── */ .tb-page { max-width: 2400px; margin:0 auto; padding:60px 20px 80px; position:relative; } /* ── NOTIZBLATT ──────────────────────────────────── */ .tb-notepad { max-width: 1150px; margin-left: auto; margin-right: auto; background-color:#f0e8d0; background-image: repeating-linear-gradient( 0deg, transparent 0px, transparent 31px, rgba(100,80,40,.20) 31px, rgba(100,80,40,.20) 32px ); position:relative; padding:52px 48px 64px 72px; box-shadow:3px 4px 0 rgba(0,0,0,.07),6px 8px 0 rgba(0,0,0,.04),10px 14px 30px rgba(0,0,0,.12); transform:rotate(-.4deg); } /* Roter Randstrich links */ .tb-notepad::before { content:''; position:absolute; top:0;left:54px;bottom:0; width:2px; background:rgba(170,30,30,.3); pointer-events:none; } /* Lochrand oben */ .tb-holes { position:absolute; top:0;left:0;right:0; height:38px; background:#d8c8a8; border-bottom:2px solid rgba(100,80,40,.2); display:flex; justify-content:center; align-items:center; gap:56px; z-index:2; } .tb-hole { width:20px;height:20px; background:#c8b89a; border-radius:50%; border:1px solid rgba(100,80,40,.25); box-shadow:inset 0 1px 3px rgba(0,0,0,.2); } /* ── KLEBEBAND ───────────────────────────────────── */ .tb-tape { position: absolute; width: 220px; height: 52px; background-color: transparent; z-index: 10; overflow: hidden; } /* Das Klebeband-Bild (1408x768, ratio 1.83:1) wird so positioniert dass der mittlere Klebeband-Streifen sichtbar ist. Container 220x52 = ratio 4.2:1 → Bild muss in Y gestreckt werden */ .tb-tape img { position: absolute; /* Bild breiter als Container → Seiten leicht abschneiden (ok) */ width: 100%; height: auto; /* Vertikal zentrieren: Bild ist ~120px hoch bei 220px Breite, Container 52px */ top: 50%; left: 0; transform: translateY(-50%); opacity: 1; display: block; } /* Fallback wenn kein Bild */ .tb-tape:not(:has(img)) { background-color: rgba(200,185,130,.55); } .tb-tape-tl { top:-12px;left:50px; transform:rotate(-3deg); } .tb-tape-tr { top:-12px;right:50px; transform:rotate(3deg); } /* ── POST-ITS ────────────────────────────────────── */ .tb-sticky-wrap { position:absolute; z-index:20; } .tb-sticky { padding:18px 22px 20px; font-family:var(--tb-font-postit,'Caveat',cursive); font-size:var(--tb-fs-postit,20px); font-weight:700; line-height:1.6; color:#1a1208; min-width:160px; position:relative; box-shadow:4px 6px 18px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.15); } /* Oben dunklerer Streifen (Kleberand) */ .tb-sticky::before { content:''; position:absolute; top:0;left:0;right:0; height:9px; background:linear-gradient(rgba(0,0,0,.11),transparent); } /* Umgeknicktes Eck unten rechts */ .tb-sticky::after { content:''; position:absolute; bottom:0;right:0; width:0;height:0; border-style:solid; border-width:0 0 22px 22px; border-color:transparent transparent rgba(0,0,0,.15) transparent; } .tb-sticky-yellow { background:#f5e422; } .tb-sticky-pink { background:#f0a0b8; } .tb-sticky-green { background:#a8e0a0; } .tb-sticky-blue { background:#a0c8f0; } .tb-sticky-orange { background:#f0c060; } /* Post-its: rechts vom Notizblatt, UNTER dem Logo-Bereich */ .tb-sticky-1 { top: 80px; right:-200px; left:auto !important; transform:rotate(5deg); } .tb-sticky-2 { top:260px; right:-210px; left:auto !important; transform:rotate(-5deg); } .tb-sticky-3 { top:420px; right:-200px; left:auto !important; transform:rotate(4deg); } /* ── KRITZELEIEN ─────────────────────────────────── */ .tb-doodles-container { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:visible; } .tb-doodle { position:absolute; pointer-events:none; } /* Striche nicht am viewBox-Rand abschneiden (Herz oben, Blume rundherum) */ .tb-doodle svg { overflow:visible; } /* ── INHALT ──────────────────────────────────────── */ .tb-nb-content { position:relative; z-index:5; } /* ── LOGO ────────────────────────────────────────── */ .tb-logo-wrap { float: none !important; display: block !important; width: 100% !important; margin: 0 0 6px 0 !important; position: relative; z-index: 10; text-align: center; } .tb-logo-img { max-width: 280px !important; width: auto !important; height: auto; display: inline-block !important; transform: none !important; mix-blend-mode: multiply; } .tb-logo-placeholder { width:220px; height:120px; background:#111; display:flex; align-items:center; justify-content:center; border:3px solid #fff; box-shadow:2px 3px 10px rgba(0,0,0,.3); } .tb-logo-placeholder span { color:white; font-family:'Special Elite',serif; font-size:15px; text-align:center; letter-spacing:2px; line-height:1.4; } /* ── NAVIGATION – Registerkarten-Look ────────────── */ .tb-nav-wrap { margin-bottom:26px; } .tb-nav-toggle { position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .tb-hamburger { display:none; flex-direction:column; gap:5px; border:1.5px solid rgba(100,80,40,.4); padding:8px 10px; cursor:pointer; background:none; width:fit-content; margin-bottom:10px; } .tb-hamburger span { display:block; width:22px; height:2px; background:#1a1208; transition:all .25s; } /* Tab-Leiste mit Grundlinie */ .tb-nav { list-style:none !important; display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:6px; padding:0; margin:0 0 2px; border-bottom:2px solid rgba(100,80,40,.35); } .tb-nav li { list-style:none !important; position:relative; } .tb-nav li::before { display:none !important; } /* Einzelne Reiter */ .tb-nav > li > a { font-family:var(--tb-font-menu,'Caveat',cursive); font-size:var(--tb-fs-menu,23px); font-weight:700; color:#1a1208; text-decoration:none; padding:9px 20px 7px; display:inline-block; position:relative; top:2px; background:#e7dbbc; border:1.5px solid rgba(100,80,40,.4); border-bottom:none; border-radius:9px 9px 0 0; box-shadow:1px -1px 2px rgba(0,0,0,.05); transition:all .15s; line-height:1.1; } .tb-nav > li > a:hover { background:#f4edd8; top:0; } .tb-nav > li.current-menu-item > a, .tb-nav > li.current_page_item > a, .tb-nav > li.current-menu-parent > a, .tb-nav > li.current-menu-ancestor > a { background:#f0e8d0; top:0; border-color:#8b1a1a; color:#8b1a1a; } /* Untermenü-Umschalter (Caret) – per JS eingefügt, nur mobil aktiv */ .tb-sub-toggle { display:none; background:none; border:none; cursor:pointer; color:#1a1208; padding:0 8px; line-height:1; } .tb-sub-toggle span { display:inline-block; font-size:15px; transition:transform .2s; } .tb-nav > li.tb-has-sub > a::after { content:' ▾'; font-size:12px; opacity:.55; } @media(max-width:768px){ .tb-hamburger{display:flex;} .tb-nav{ display:none !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:0 !important; border-bottom:none; background:rgba(240,232,208,.97); border:1px solid rgba(100,80,40,.3); } .tb-nav-toggle:checked ~ ul.tb-nav{display:flex !important;} .tb-nav-toggle:checked ~ label span:nth-child(1){transform:translateY(7px) rotate(45deg);} .tb-nav-toggle:checked ~ label span:nth-child(2){opacity:0;} .tb-nav-toggle:checked ~ label span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .tb-nav > li{border-bottom:1px solid rgba(100,80,40,.2) !important; display:flex; flex-wrap:wrap; align-items:center;} .tb-nav > li > a{ background:none !important; border:none !important; border-radius:0 !important; top:0 !important; box-shadow:none !important; display:block !important; padding:12px 16px !important; flex:1 1 auto; font-size:21px; } .tb-nav > li.tb-has-sub > a::after{content:'';} .tb-sub-toggle{ display:inline-flex; align-items:center; justify-content:center; width:48px; align-self:stretch; border-left:1px solid rgba(100,80,40,.2); } .tb-nav > li.tb-open > .tb-sub-toggle span{transform:rotate(180deg); color:#8b1a1a;} } /* ── TITEL: versteckt – Logo übernimmt visuell ──── */ .tb-title-block { display: none; } .tb-title { font-family:'Caveat',cursive; font-size:clamp(56px,10vw,88px); font-weight:700; color:#0d0d0d; line-height:.88; display:block; letter-spacing:-2px; } .tb-title-underline { display: block; height: 45px; background: none !important; background-image: var(--tb-brush-img, none) !important; background-size: 70% auto !important; background-repeat: no-repeat !important; background-position: center center !important; margin: 4px 0 20px 0; } .tb-subtitle { font-family:'Special Elite',serif; font-size:14px; font-style:italic; color:#3a2810; line-height:1.5; margin-bottom:20px; } /* ── INFO-CHIPS ──────────────────────────────────── */ .tb-info-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; } .tb-info-chip { background:rgba(139,26,26,.08); border:1px solid rgba(139,26,26,.22); padding:6px 14px; font-family:'Caveat',cursive; font-size:16px; color:#5a1010; display:inline-block; } .tb-info-chip:nth-child(1){transform:rotate(-.8deg);} .tb-info-chip:nth-child(2){transform:rotate(.6deg);} .tb-info-chip:nth-child(3){transform:rotate(-.4deg);} /* ── SEITENINHALT ────────────────────────────────── */ .tb-content { font-family:var(--tb-font-body,'Caveat',cursive); font-size:var(--tb-fs-body,17px); line-height:1.75; color:#1a1208; margin-bottom:24px; } .tb-content p { margin-bottom:.8em; } .tb-content p.has-text-align-center { text-align:center; } /* Inhalts-Überschriften – Schrift & Grösse je Element via Customizer (CSS-Variablen). H1 im Inhalt ist bewusst sichtbar (nur der WordPress-Seitentitel ist versteckt). */ .tb-content h1 { display:block !important; font-family:var(--tb-font-h1,'Special Elite',serif); font-size:var(--tb-fs-h1,34px); line-height:1.15; font-weight:700; color:#1a1208; margin:.15em 0 .35em; letter-spacing:-.5px; } .tb-content h2 { font-family:var(--tb-font-h2,'Caveat',cursive); font-size:var(--tb-fs-h2,28px); line-height:1.2; font-weight:700; color:#1a1208; margin:.5em 0 .25em; } .tb-content h3 { font-family:var(--tb-font-h3,'Caveat',cursive); font-size:var(--tb-fs-h3,23px); line-height:1.25; font-weight:700; color:#3a2810; margin:.5em 0 .2em; } .tb-show-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:3px; } .tb-show-item { display:grid; grid-template-columns:110px 1fr auto; gap:8px; padding:5px 0; border-bottom:1px solid rgba(100,80,40,.12); font-family:'Special Elite',serif; font-size:15px; } .tb-show-item.premiere { color:#8b1a1a; } .tb-show-day { font-family:'Caveat',cursive; font-size:16px; color:#5a3e20; font-weight:700; text-transform:uppercase; } .tb-show-note { font-family:'Caveat',cursive; font-size:13px; color:#8b1a1a; } /* ── THEATERTICKET-BUTTON ────────────────────────── */ .tb-ticket { display:inline-flex; align-items:stretch; text-decoration:none; color:#1a1208; border:2px solid #3a2010; box-shadow:3px 4px 10px rgba(0,0,0,.22); transform:rotate(-1deg); transition:all .2s; font-family:'Special Elite',serif; overflow:hidden; position:relative; background:#f5f0e8; } /* Linke rote Seite */ .tb-ticket-stub { display:flex; align-items:center; justify-content:center; background:#8b1a1a; padding:12px 16px; font-size:26px; min-width:56px; border-right:2px dashed rgba(255,255,255,.4); position:relative; } /* Runde Kerben (Ticket-Perforierung) */ .tb-ticket-stub::before, .tb-ticket-stub::after { content:''; position:absolute; right:-8px; width:14px; height:14px; background:#c8b89a; border-radius:50%; border:1px solid #3a2010; } .tb-ticket-stub::before { top:-5px; } .tb-ticket-stub::after { bottom:-5px; } /* Rechte Seite */ .tb-ticket-body { display:flex; flex-direction:column; justify-content:center; padding:10px 18px; gap:2px; } .tb-ticket-label { font-size:14px; letter-spacing:1.5px; text-transform:uppercase; } .tb-ticket-sub { font-family:'Caveat',cursive; font-size:13px; color:#5a3e20; letter-spacing:.5px; } .tb-ticket:hover { transform:rotate(0deg) scale(1.03); box-shadow:4px 6px 14px rgba(0,0,0,.3); } /* ── FOOTER ──────────────────────────────────────── */ .tb-footer { margin-top:30px; padding-top:14px; border-top:1px dashed rgba(100,80,40,.3); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; } .tb-footer-links { font-family:'Special Elite',serif; font-size:11px; color:#7a5a30; letter-spacing:.5px; line-height:1.8; } .tb-footer-links a { color:#7a5a30; text-decoration:none; } .tb-footer-links a:hover { color:#8b1a1a; } /* Zweites Menü (Fussmenü: Impressum, Datenschutz …) – aus WP-Menü */ .tb-footer-menu { list-style:none !important; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding:0; margin:0; font-family:'Special Elite',serif; font-size:12px; letter-spacing:.5px; } .tb-footer-menu li { list-style:none !important; margin:0; display:inline-flex; align-items:center; } .tb-footer-menu li::before { display:none !important; } .tb-footer-menu li:not(:last-child)::after { content:'·'; margin-left:6px; color:#7a5a30; opacity:.55; } .tb-footer-menu a { color:#7a5a30; text-decoration:none; } .tb-footer-menu a:hover { color:#8b1a1a; } .tb-copyright { display:block; font-family:'Special Elite',serif; font-size:11px; color:#7a5a30; letter-spacing:.5px; margin-top:7px; } .tb-footer-hint { font-family:'Special Elite',serif; font-size:11px; color:#8b1a1a; line-height:1.6; margin:0; } .tb-site-url { font-family:'Special Elite',serif; font-size:13px; color:#8b1a1a; letter-spacing:2px; text-transform:uppercase; margin-top:24px; display:block; } /* ── VORVERKAUF-ZETTELCHEN ───────────────────────── */ .tb-vv-note { position:absolute; bottom:-18px; right:12px; background:#e8dcc0; padding:9px 14px; font-family:'Caveat',cursive; font-size:13px; color:#3a2810; transform:rotate(3deg); box-shadow:2px 3px 6px rgba(0,0,0,.15); border:1px solid rgba(100,80,40,.2); z-index:15; line-height:1.4; } .tb-vv-note::before { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:40px; height:14px; background:rgba(210,195,140,.8); } /* ── FOTO-POST-ITS ───────────────────────────────── */ .tb-photo-sticky { position: absolute; z-index: 30; display: block; cursor: default; border: none !important; outline: none !important; box-shadow: none !important; background: none !important; } .tb-photo-sticky > img:last-of-type, .tb-photo-sticky > img:not(.tb-photo-tape) { display: block; width: 280px; height: auto; box-shadow: none; } /* Klebeband-img oben am Foto */ .tb-photo-sticky .tb-photo-tape { position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 220px; height: 52px; overflow: hidden; z-index: 5; border: none; box-shadow: none; pointer-events: none; /* JS setzt display via setProperty('display','none','important') */ } .tb-photo-sticky .tb-photo-tape img { position: absolute; width: 100%; height: auto; top: 50%; left: 0; transform: translateY(-50%); display: block; opacity: 1; } /* ::before entfernt – Klebeband wird via .tb-photo-tape img gesteuert (JS-Toggle) */ .tb-photo-sticky figcaption { font-family:'Caveat',cursive; font-size:13px; color:#3a2810; text-align:center; margin-top:5px; } .tb-photo-left-1 { left:-455px; top:80px; transform:rotate(-5deg); } .tb-photo-left-2 { left:-310px; top:500px; transform:rotate(4deg); } .tb-photo-right-1 { right:-455px; top:500px; transform:rotate(5deg); } .tb-photo-right-2 { right:-310px; top:700px; transform:rotate(-4deg); } /* ── ADMIN BAR ───────────────────────────────────── */ #wpadminbar { position:fixed !important; } .admin-bar .tb-page { padding-top:92px; } @media screen and (max-width:782px){ .admin-bar .tb-page { padding-top:106px; } } /* ══════════════════════════════════════════════════ RESPONSIVE DESIGN ══════════════════════════════════════════════════ */ /* Tablet: 1400px - Fotos kleiner, Post-its angepasst */ /* Mittlere Screens: 1600px - Fotos in den Fluss (aussen zu wenig Platz) */ @media (max-width: 1600px) { .tb-page { padding: 40px 16px 60px; } /* Fotos: innerhalb der Seite, nicht mehr aussen */ .tb-photo-sticky { position: relative !important; display: inline-block !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: rotate(-2deg) !important; margin: 0 12px 16px 0 !important; float: left !important; } .tb-photo-sticky > img:not(.tb-photo-tape) { width: 190px !important; } /* tb-photo-sticky::before entfernt */ /* Post-its: innerhalb des Notizblocks, rechts oben */ .tb-sticky-wrap { position: absolute; } .tb-sticky-1 { top: 80px; right:-200px; left:auto !important; transform:rotate(5deg); } .tb-sticky-2 { top:260px; right:-210px; left:auto !important; transform:rotate(-5deg); } .tb-sticky-3 { top:420px; right:-200px; left:auto !important; transform:rotate(4deg); } .tb-sticky { min-width: 120px; padding: 12px 14px !important; } } /* Mobile: 768px */ @media (max-width: 768px) { .tb-page { padding: 30px 10px 40px; max-width: 100%; } .tb-notepad { padding: 46px 20px 48px 48px !important; transform: none !important; } .tb-notepad::before { left: 38px; } .tb-holes { gap: 36px; } /* Fotos: über dem Notizblock als Reihe */ .tb-photo-sticky { position: relative !important; display: inline-block !important; left: auto !important; right: auto !important; top: auto !important; float: none !important; margin: 0 8px 12px !important; transform: rotate(-2deg) !important; } .tb-photo-sticky > img:not(.tb-photo-tape) { width: 130px !important; } /* Post-its: ganz weg auf Mobile */ .tb-sticky-wrap { display: none !important; } /* Logo */ .tb-logo-img { max-width: 200px !important; } /* Nav */ .tb-hamburger { display: flex !important; } /* Info-Chips */ .tb-info-row { flex-direction: column; gap: 6px; } /* Content */ .tb-content { font-size: 16px; } /* Footer */ .tb-footer { flex-direction: column; gap: 16px; } .tb-ticket { align-self: flex-start; } /* Lochrand */ .tb-holes { gap: 26px; } } /* Sehr kleines Mobile: 480px */ @media (max-width: 480px) { .tb-notepad { padding: 44px 14px 44px 42px !important; } .tb-holes { gap: 18px; } .tb-hole { width: 14px; height: 14px; } .tb-logo-img { max-width: 160px !important; } .tb-title { font-size: 52px !important; } .tb-content { font-size: 15px; } .tb-photo-sticky { display: none !important; } .tb-tape { width: 80px; height: 26px; } .tb-tape-tr { right: 20px; } .tb-tape-tl { left: 20px; } } /* Fotos als Photostreifen über Notizblock auf Mobile */ @media (max-width: 768px) { .tb-page { display: flex; flex-direction: column; align-items: center; } .tb-photos-mobile-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; } } /* ══ DARK MODE VERHINDERN ═══════════════════════════ Samsung Internet / Chrome Force Dark Mode Schutz Alle Farben explizit als !important setzen ════════ */ @media (prefers-color-scheme: dark) { html, body { background-color: #c8b89a !important; color: #1a1208 !important; color-scheme: light !important; } .tb-notepad { background-color: #f0e8d0 !important; color: #1a1208 !important; } .tb-sticky-yellow { background: #f5e422 !important; color: #1a1208 !important; } .tb-sticky-pink { background: #f0a0b8 !important; color: #1a1208 !important; } .tb-sticky-green { background: #a8e0a0 !important; color: #1a1208 !important; } .tb-sticky-blue { background: #a0c8f0 !important; color: #1a1208 !important; } .tb-nav a { color: #1a1208 !important; } .tb-title { color: #0d0d0d !important; } .tb-subtitle { color: #3a2810 !important; } .tb-content { color: #1a1208 !important; } .tb-holes { background: #d8c8a8 !important; } .tb-hole { background: #c8b89a !important; } } /* Für Chrome Force Dark (kein prefers-color-scheme) */ html { forced-color-adjust: none; } /* ══ NEUE FOTO-SLOTS ══════════════════════════════ */ .tb-photo-left-3 { left:-310px; top:700px; transform:rotate(3deg); } .tb-photo-right-3 { right:-310px; top:700px; transform:rotate(-4deg); } .tb-photo-right-4 { right:-310px; top:950px; transform:rotate(3deg); } /* ══ UNTERMENÜ (Dropdown) ═════════════════════════ */ /* Desktop: Sub-Menü standardmässig versteckt, erscheint bei Hover */ .tb-nav li ul { position: absolute; top: 100%; left: 0; margin: 0; background: rgba(245,240,232,.98); border: 1.5px solid rgba(139,26,26,.25); min-width: 190px; z-index: 100; list-style: none !important; padding: 6px 0 5px; box-shadow: 2px 5px 12px rgba(0,0,0,.16); /* geschlossen: unsichtbar & sanft ausgeblendet (kein hartes display-Umschalten) */ visibility: hidden; opacity: 0; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .18s; } /* Hover/Fokus: sanft einblenden. Die kleine Verzögerung beim visibility-Wechsel verhindert Flackern, wenn die Maus kurz den Rand streift. */ .tb-nav li:hover > ul, .tb-nav li:focus-within > ul { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .16s ease, transform .16s ease, visibility 0s; } /* Unsichtbare Brücke über den Spalt zwischen Reiter und Menü (kein Hover-Loch) */ .tb-nav > li.tb-has-sub > ul::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .tb-nav li ul li { border-bottom: 1px solid rgba(139,26,26,.1); } .tb-nav li ul li:last-child { border-bottom: none; } .tb-nav li ul a { font-family: var(--tb-font-menu,'Caveat',cursive); font-size: 18px; color: #1a1208; text-decoration: none; padding: 7px 16px; display: block !important; border: none !important; white-space: nowrap; } .tb-nav li ul a:hover { background: rgba(139,26,26,.08); color: #8b1a1a; } /* Mobile: Sub-Menü per Klick auf den Caret-Button (.tb-sub-toggle → .tb-open). Kein Hover auf Touch – daher öffnet erst der Klick das Untermenü. */ @media (max-width: 768px) { .tb-nav li ul { position: static; display: none; visibility: visible; opacity: 1; transform: none; transition: none; box-shadow: none; border: none; border-left: 3px solid rgba(139,26,26,.3); margin: 0 0 6px 14px; padding: 0; background: rgba(139,26,26,.03); flex-basis: 100%; min-width: 0; } .tb-nav li ul::before { display: none; } /* Brücke mobil nicht nötig */ .tb-nav > li.tb-open > ul { display: block !important; } .tb-nav li ul a { padding: 9px 14px; font-size: 18px; } } /* ══════════════════════════════════════════════════ INHALTS-STILE (redaktionelle Seiten – einheitliche Aufbereitung) Klassen werden im Seiteninhalt (Block-Editor) vergeben. ══════════════════════════════════════════════════ */ /* Begrüssungs-/Augenbrauen-Zeile über dem Titel */ .tb-content .tb-eyebrow { font-family:'Special Elite',serif !important; font-size:14px !important; letter-spacing:1px; text-transform:uppercase; color:#7a5a30; text-align:center; margin:0 0 4px !important; } /* Lead-/Einleitungssatz (etwas grösser, zentriert) */ .tb-content p.tb-lead { font-size:calc(var(--tb-fs-body,17px) + 6px) !important; line-height:1.5; text-align:center; color:#2a1c0a; max-width:640px; margin:2px auto 22px !important; } /* Abschluss-Zeile (Gruss am Seitenende) */ .tb-content p.tb-abschluss { text-align:center; color:#8b1a1a; font-size:calc(var(--tb-fs-body,17px) + 4px) !important; margin-top:30px !important; } /* Foto im Textbereich – Polaroid mit Klebeband (Post-it-Look) */ .tb-content figure.tb-photo { position:relative; display:table; margin:30px auto 34px !important; } .tb-content figure.tb-photo img { display:block; background:#fff; padding:10px 10px 0; max-width:100%; height:auto; border:1px solid rgba(0,0,0,.08); box-shadow:4px 6px 16px rgba(0,0,0,.22); transform:rotate(-1.4deg); } /* Klebeband-Streifen oben (nutzt die Textur aus dem Customizer, sonst Farbstreifen) */ .tb-content figure.tb-photo::before { content:''; position:absolute; z-index:3; top:-15px; left:50%; transform:translateX(-50%) rotate(-3deg); width:130px; height:34px; background-color:rgba(214,196,120,.55); background-image:var(--tb-tape-image, none); background-size:cover; background-position:center; } .tb-content figure.tb-photo figcaption, .tb-content .wp-block-image figcaption { font-family:'Caveat',cursive !important; font-size:16px !important; color:#3a2810; text-align:center; margin-top:8px; } /* Spieldaten – kompakte, zweispaltige Liste */ .tb-content ul.tb-daten { list-style:none !important; padding:0; margin:14px 0 6px !important; display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; } .tb-content ul.tb-daten li { list-style:none !important; font-family:'Special Elite',serif !important; font-size:15px !important; padding:7px 2px; margin:0 !important; border-bottom:1px solid rgba(100,80,40,.18); } .tb-content ul.tb-daten li::before { display:none !important; } @media (max-width:600px){ .tb-content ul.tb-daten { grid-template-columns:1fr; } } /* Info-Liste – „Bezeichnung: Wert" oder einfache Zeilen (Mitwirkende, Preise, Menü, Zeiten, Daten mit Zusatz). Ohne Aufzählungspunkte, dezente Trennlinien. */ .tb-content ul.tb-info { list-style:none !important; padding:0; margin:10px 0 8px !important; } .tb-content ul.tb-info li { list-style:none !important; margin:0 !important; padding:7px 2px; border-bottom:1px solid rgba(100,80,40,.14); line-height:1.5; } .tb-content ul.tb-info li::before { display:none !important; } .tb-content ul.tb-info strong { color:#5a3e20; font-weight:700; } /* Zweispaltig, wo es Sinn macht (Modifier-Klasse tb-2col) */ .tb-content ul.tb-info.tb-2col { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; } @media (max-width:600px){ .tb-content ul.tb-info.tb-2col { grid-template-columns:1fr; } }