/* * body.css – Neues Body-Design für zauberer-andre.com (Stil wie Mockup v4) * Gilt für alle Seiten mit . Überschreibt die alten * Bootstrap-/styles.css-Regeln im Inhaltsbereich, ohne das Markup zu zerlegen. * Produktfarbe kommt aus --pc (theme-violett / -orange / -rot), sonst Orange. * * 1. Grundlagen (Schrift, Abstände, Überschriften) * 2. Abschnitte & Hintergründe * 3. Zitate, Bilder, Buttons * 4. Info-Box „Auf einen Blick“ (ersetzt Icons + Stichpunktliste) * 5. 11 Gründe, Tabs, Kundenstimmen, Zähler * 6. Kontaktband * 7. Startseiten-Hero (größer als alle anderen) * 8. Auszeichnungs-Streifen, Feature-Bild * 9. Footer * 10. Responsive */ /* ── 1. Grundlagen ───────────────────────────────────────── */ body.zb { font-family: 'Montserrat', sans-serif; color: #1A1A1A; background: #fff; } body.zb { --accent: var(--pc, #FB7E26); --accent-dark: var(--pc-dark, #C9651E); --grau: #F0EEEB; } body.zb main p, body.zb section p { font-size: 16px; line-height: 1.75; color: #444; } body.zb section:not(.zs):not(.zr-section) h1, body.zb section:not(.zs):not(.zr-section) h2, body.zb section:not(.zs):not(.zr-section) h3 { font-family: 'Montserrat', sans-serif; color: #1A1A1A; letter-spacing: -.02em; } body.zb section:not(.zs):not(.zr-section) h1 { font-size: clamp(32px, 4vw, 50px); font-weight: 900; line-height: 1.05; margin: 0 0 18px; } body.zb section:not(.zs):not(.zr-section) h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1.1; margin: 0 0 18px; } body.zb section:not(.zs):not(.zr-section) h3 { font-size: 20px; font-weight: 800; line-height: 1.3; margin: 34px 0 10px; letter-spacing: -.01em; } /* farbiger Akzentstrich über den Hauptüberschriften (statt farbiger Überschrift) */ body.zb section:not(.zs):not(.zr-section) h1::before, body.zb section:not(.zs):not(.zr-section) .text-left > h2:first-child::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 18px; } body.zb section:not(.zs):not(.zr-section) h2 img { max-width: 100%; height: auto; } body.zb p.intro-text { font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--accent); margin: 0 0 18px; } body.zb section:not(.zs):not(.zr-section) a:not(.button):not(.btn):not(.fancybox) { color: var(--accent); } body.zb section:not(.zs):not(.zr-section) a:not(.button):not(.btn):not(.fancybox):hover { color: var(--accent-dark); } body.zb hr { border: 0; border-top: 1px solid rgba(0,0,0,.08); margin: 28px 0; } /* ── 2. Abschnitte & Hintergründe ────────────────────────── */ body.zb section#intro, body.zb section#quote, body.zb section#zitat_frist, body.zb section#zitat_two, body.zb section#warum, body.zb section#customers, body.zb section#ratings, body.zb section#videos, body.zb section#haftung, body.zb section.content-section, body.zb section.za-anchor, body.zb section[id$="-details"], body.zb section[id$="-stimmen"] { padding: 80px 0; } body.zb section#intro { padding-top: 72px; } /* graue Abschnitte mit Akzentlinie – wie Mockup */ body.zb section#quote, body.zb section#warum, body.zb section#ratings, body.zb section[id$="-details"], body.zb section#closertomagic-teaser, body.zb section#tour { background: var(--grau); border-top: 3px solid var(--accent); } body.zb section#quote .zitat, body.zb section#warum .zitat, body.zb section[id$="-details"] .zitat { background: #fff; } /* Parallax-Bildbänder etwas flacher */ body.zb section#image, body.zb section#image-x, body.zb section#image-y, body.zb section#image2, body.zb section#image3, body.zb section#image4 { min-height: 480px; } /* ── 3. Zitate, Bilder, Buttons ──────────────────────────── */ body.zb .zitat, body.zb p.zitat { position: relative; background: var(--grau); border-radius: 12px; border-left: 4px solid var(--accent); padding: 26px 30px 24px; margin: 28px 0; font-size: 17px; line-height: 1.7; font-style: italic; color: #1A1A1A; } body.zb .zitat_urheber { display: block; float: none; margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--accent); } body.zb img.pic { border: 0; border-radius: 10px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: transform .35s, box-shadow .35s; width: 100%; height: auto; } body.zb a.fancybox:hover img.pic { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.14); } body.zb .col-md-4 > a > img.pic, body.zb .col-lg-4 > a > img.pic { aspect-ratio: 3 / 2; object-fit: cover; } body.zb .video-item img.pic { aspect-ratio: auto; } body.zb a.button, body.zb a.button:hover, body.zb a.button:focus, body.zb .btn-primary, body.zb .btn-primary:hover, body.zb .btn-primary:focus { display: inline-block; width: auto; height: auto; background: var(--accent); background-image: none; color: #fff; font: 700 14px/1.2 'Montserrat', sans-serif; letter-spacing: .04em; text-transform: none; text-decoration: none; padding: 14px 26px; border: 0; border-radius: 4px; transition: opacity .2s, transform .2s; box-shadow: none; } body.zb a.button:hover, body.zb .btn-primary:hover { opacity: .88; transform: translateY(-1px); } /* ── 4. Info-Box „Auf einen Blick“ ───────────────────────── */ body.zb .zb-aside { padding: 0 15px !important; text-align: left; } body.zb .zb-facts { border-top: 4px solid var(--accent); margin: 8px 0 20px; } body.zb .zb-facts__title { font-size: 11px !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 6px !important; line-height: 1.4 !important; margin-top: 0 !important; } body.zb ul.keyfacts { list-style: none; margin: 0; padding: 0; } body.zb .zb-facts ul.keyfacts li { position: relative; background: none; line-height: 1.45; } body.zb .zb-facts ul.keyfacts li:last-child { border-bottom: 0; } body.zb .zb-facts ul.keyfacts li::before { position: absolute; color: var(--accent); font-size: 14px; } body.zb .zb-aside a.button { display: block; text-align: center; } /* ── 5. 11 Gründe, Tabs, Kundenstimmen, Zähler ───────────── */ body.zb section#warum .container { counter-reset: grund; } body.zb section#warum ul.keyfacts li { counter-increment: grund; position: relative; background: none; padding: 16px 0 16px 44px; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 15px; font-weight: 500; line-height: 1.5; color: #1A1A1A; } body.zb section#warum ul.keyfacts li::before { content: counter(grund, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-size: 13px; font-weight: 900; color: var(--accent); } body.zb section#warum .col-lg-6 { padding: 0 30px !important; } body.zb .nav-tabs { border: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } body.zb .nav-tabs > li { float: none; margin: 0; } body.zb .nav-tabs > li > a, body.zb .nav-tabs > li > a:hover, body.zb .nav-tabs > li > a:focus { border: 1.5px solid var(--accent) !important; border-radius: 100px; color: var(--accent); background: transparent; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 10px 18px; margin: 0; } body.zb .nav-tabs > li.active > a, body.zb .nav-tabs > li.active > a:hover, body.zb .nav-tabs > li.active > a:focus { background: var(--accent); color: #fff !important; } body.zb section#ratings .col-lg-12.text-center { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; } body.zb section#ratings .col-lg-12.text-center > h2 { grid-column: 1 / -1; text-align: left; } body.zb section#ratings .rating { margin: 0 !important; background: #fff; border-radius: 12px; padding: 26px 26px 22px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.05); } body.zb section#ratings .rating ul.stars { display: none; } body.zb section#ratings .rating::before { content: "\2605\2605\2605\2605\2605"; color: var(--accent); letter-spacing: 2px; font-size: 15px; margin-bottom: 12px; } body.zb .rating .description { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.7; color: #444; flex: 1; } body.zb .rating .details { color: #777; font-size: 12px; margin-top: 12px; } body.zb .rating .details .name { display: block; font-weight: 700; color: #1A1A1A; font-size: 13px; } body.zb a.zb-r5, body.zb a.zb-r5:hover { display: flex; flex-direction: column; gap: 4px; background: #1A1A1A; color: #fff !important; border-radius: 12px; padding: 22px; text-decoration: none; text-align: left; } body.zb .zb-r5__stars { color: var(--accent); letter-spacing: 2px; } body.zb .zb-r5__score { font-size: 32px; font-weight: 900; line-height: 1; } body.zb .zb-r5__label { font-size: 12px; opacity: .75; } /* Zähler-Band (6.500 Bühnenstunden …) */ body.zb section.divider:not(.zb-contact) { background: #1A1A1A !important; color: #fff; padding: 56px 0; font-family: 'Montserrat', sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } body.zb section.divider:not(.zb-contact) .counter { color: var(--accent); font-size: 48px; font-weight: 900; letter-spacing: -.02em; text-transform: none; } /* Unter-Navigation (Zauberer engagieren) */ body.zb nav.wf-navbar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); font-family: 'Montserrat', sans-serif; text-transform: none; margin: 0; } body.zb nav.wf-navbar .navbar-nav > li > a { color: #1A1A1A !important; font-size: 13px; font-weight: 600; background: none !important; } body.zb nav.wf-navbar .navbar-nav > li > a:hover { color: var(--accent) !important; } body.zb nav.wf-navbar.affix { position: fixed; top: var(--navh); left: 0; right: 0; z-index: 1020; } /* ── 6. Kontaktband ──────────────────────────────────────── */ body.zb section.zb-contact { background: var(--pc-bg, #1A1A1A) !important; color: #fff; padding: 44px 0; font-family: 'Montserrat', sans-serif; } .zb-wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; } .zb-contact__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; align-items: center; } body.zb .zb-contact__lead { margin: 0; color: rgba(255,255,255,.85) !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 600; } body.zb a.zb-contact__item, body.zb a.zb-contact__item:hover { display: flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none; font-size: 15px; font-weight: 700; } .zb-contact__item i { flex: 0 0 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .2s; } body:not([class*="theme-"]) .zb-contact__item i { color: #FB7E26; } .zb-contact__item:hover i { background: rgba(255,255,255,.22); } /* ── 7. Startseiten-Hero (größer als alle anderen) ────────── */ body.zb header.zh { position: relative; padding: var(--navh) 0 0; background: #111; text-align: left; color: #fff; } .zh .carousel { position: relative; } .zh .carousel-inner > .item img { display: block; width: 100%; height: clamp(520px, 86vh, 920px); object-fit: cover; object-position: 55% 35%; } .zh .carousel-indicators { z-index: 30; bottom: 22px; } .zh-overlay { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 max(32px, calc((100vw - 1140px) / 2 + 32px)) clamp(60px, 9vh, 110px); background: linear-gradient(90deg, rgba(10,8,6,.78) 0%, rgba(10,8,6,.55) 32%, rgba(10,8,6,.12) 58%, rgba(10,8,6,0) 72%); pointer-events: none; } .zh-overlay a { pointer-events: auto; } .zh-label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FB7E26; margin-bottom: 20px; } .zh-h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(34px, 5vw, 72px); font-weight: 900; line-height: 1; letter-spacing: -.02em; margin: 0 0 22px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); } .zh-h1 em { font-style: normal; color: #FB7E26; } .zh-sub { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; color: rgba(255,255,255,.85); margin: 0 0 22px; max-width: 520px; } .zh-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 28px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); } .zh-trust i { color: #FB7E26; font-style: normal; font-size: 9px; } .zh-ctas { display: flex; flex-wrap: wrap; gap: 14px; } body.zb .zh-btn, body.zb .zh-btn:hover, body.zb .zh-btn:focus { display: inline-block; font: 700 13px/1 'Montserrat', sans-serif; letter-spacing: .04em; padding: 15px 26px; border-radius: 4px; text-decoration: none; transition: opacity .2s, transform .2s, background .2s; } body.zb .zh-btn--primary, body.zb .zh-btn--primary:hover { background: #FB7E26; color: #fff; } body.zb .zh-btn--ghost, body.zb .zh-btn--ghost:hover { border: 1.5px solid rgba(255,255,255,.45); color: #fff; } body.zb .zh-btn:hover { transform: translateY(-1px); opacity: .9; } .zh-badges { position: absolute; right: 32px; bottom: clamp(60px, 9vh, 110px); z-index: 25; display: flex; gap: 14px; } .zh-badges img { width: 120px; height: auto; border-radius: 18px; background: rgba(0,0,0,.45); padding: 6px; } /* ── 8. Auszeichnungs-Streifen, Feature-Bild ─────────────── */ .zb-awardstrip { padding: 80px 0; background: #fff; font-family: 'Montserrat', sans-serif; } .zb-awardstrip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .zb-awardstrip__grid a { display: block; border-radius: 12px; overflow: hidden; } .zb-awardstrip__grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; transition: transform .5s; } .zb-awardstrip__grid a:hover img { transform: scale(1.04); } .zb-awardstrip__note { margin-top: 20px; font-size: 14px; color: #777; } body.zb img.zb-feature { width: 100%; height: auto; border-radius: 14px; margin: 10px 0 26px; box-shadow: 0 14px 34px rgba(0,0,0,.12); } /* ── 9. Footer ───────────────────────────────────────────── */ footer.zf { background: #1A1A1A; color: rgba(255,255,255,.6); padding: 72px 0 36px; font-family: 'Montserrat', sans-serif; text-align: left; } .zf-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 44px; } .zf-logo { width: 190px; height: auto; filter: invert(1); margin-bottom: 16px; } .zf-tagline { font-size: 13px; line-height: 1.7; margin: 0 0 20px; color: rgba(255,255,255,.6); } .zf-heading { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 16px; } .zf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } footer.zf a, footer.zf a:visited { color: rgba(255,255,255,.6); text-decoration: none; font-size: 13px; transition: color .15s; } footer.zf a:hover { color: #fff; } .zf-contact li { font-size: 13px; } .zf-contact i { width: 18px; color: #FB7E26; } footer.zf a.zf-badge, footer.zf a.zf-badge:hover { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 14px; } .zf-badge__stars { color: #FB7E26; letter-spacing: 2px; font-size: 13px; } .zf-badge__score { color: #fff; font-weight: 800; font-size: 15px; } .zf-badge__label { font-size: 11px; color: rgba(255,255,255,.6); } .zf-seo { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; } .zf-seo a { font-size: 12px !important; } .zf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12px; } .zf-bottom__links { display: flex; gap: 22px; } /* ── 10. Responsive ──────────────────────────────────────── */ @media (max-width: 991px) { .zb-contact__grid { grid-template-columns: 1fr 1fr; } .zb-contact__lead { grid-column: 1 / -1; } body.zb section#ratings .col-lg-12.text-center { grid-template-columns: 1fr 1fr; } .zb-awardstrip__grid { grid-template-columns: repeat(2, 1fr); } .zf-grid { grid-template-columns: 1fr 1fr; } .zh-badges { display: none; } body.zb .zb-aside { margin-top: 30px; } } @media (max-width: 767px) { body.zb section#intro, body.zb section#quote, body.zb section#zitat_frist, body.zb section#warum, body.zb section#customers, body.zb section#ratings, body.zb section.za-anchor, body.zb section.content-section, body.zb section[id$="-details"], body.zb section[id$="-stimmen"] { padding: 52px 0; } body.zb .text-left[style*="padding: 0 60px"], body.zb .text-left[style*="padding:0 60px"], body.zb .text-left[style*="padding: 0 30px"], body.zb .text-left[style*="padding: 0 50px"] { padding: 0 15px !important; } body.zb section#ratings .col-lg-12.text-center { grid-template-columns: 1fr; } .zb-contact__grid { grid-template-columns: 1fr; gap: 16px; } .zb-wrap { padding: 0 18px; } .zh .carousel-inner > .item img { height: 78vh; min-height: 480px; object-position: 58% 30%; } .zh-overlay { padding: 0 20px 64px; background: linear-gradient(0deg, rgba(10,8,6,.85) 0%, rgba(10,8,6,.55) 45%, rgba(10,8,6,0) 75%); } .zh-trust { display: none; } .zf-grid { grid-template-columns: 1fr; gap: 32px; } .zb-awardstrip { padding: 52px 0; } } /* ── 11. Nachträge (Trennlinien, Formate-Rahmen, Intro-Bewertung, Vita) ── */ /* Trennlinien zwischen Abschnitten in der Seitenfarbe statt grau */ body.zb section { border-bottom: 0; } body.zb section:not(.zb-contact):not(.divider):not([id^="image"]):not(.zr-section) { border-top: 3px solid var(--accent); } body.zb header + section, body.zb nav.wf-navbar + section, body.zb .zb-contact + section, body.zb section.divider + section, body.zb section[id^="image"] + section { border-top: 0 !important; } body.zb section.zs { border-top: 3px solid var(--accent); } /* Formate-Karten mit 1-px-Rahmen in Produktfarbe */ section.zs a.zs-card, section.zs a.zs-card:hover, section.zs a.zs-card:focus { border: 1px solid var(--zc); } /* Bewertungskarte neben dem ersten Zitat (ersetzt rate5-Grafik) */ .zb-quote-r5 { display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: center; margin-top: 40px; } .zb-quote-r5 .zitat { margin: 0 !important; } body.zb a.zb-r5--intro { order: 2; } /* Vita: kleine Award-Karten */ .zv-awards--small { grid-template-columns: repeat(3, 1fr); margin-top: 20px; } .zv-awards--small .zv-award { padding: 18px 20px; border-width: 1px; } .zv-awards--small .zv-award__title { font-size: 15px; } @media (max-width: 767px) { .zb-quote-r5 { grid-template-columns: 1fr; } .zv-awards--small { grid-template-columns: 1fr; } } body.zb .zv-award p.zv-award__title { color: var(--accent); font-weight: 800; line-height: 1.3; margin: 0 0 6px; } body.zb .zv-award p.zv-award__sub { font-size: 13px; line-height: 1.5; color: #777; margin: 0; } body.zb .zv-award--top p.zv-award__sub { color: rgba(255,255,255,.7); } /* Startseite: farbiger Balken über dem Hero wie auf den Produktseiten */ body.zb header.zh { padding-top: calc(var(--navh) + 12px); } body.zb header.zh::before { content: ""; position: absolute; left: 0; right: 0; top: var(--navh); height: 12px; background: #FB7E26; z-index: 5; } /* Logo-Wand auf Startseite & SEO-Seiten (wie Referenzen) */ .zb-logowall { margin-top: 20px; } body.zb p.zb-logowall__label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FB7E26; margin: 0 0 16px; } .zb-logowall__grid { grid-template-columns: repeat(9, 1fr); gap: 10px; } .zb-logowall__grid .zr-logo { padding: 10px; } .zb-logowall__grid .zr-logo img { max-height: 40px; } body.zb p.zb-logowall__more { margin: 16px 0 0; font-size: 14px; font-weight: 700; } @media (max-width: 991px) { .zb-logowall__grid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 600px) { .zb-logowall__grid { grid-template-columns: repeat(3, 1fr); } } body.zb img.pic.zb-philo { aspect-ratio: 3 / 4; object-fit: cover; object-position: 61% 30%; } /* ── 12. Startseite neu (Zähler, Videos, Übergang, Gründe, Stimmen, Theater) ── */ body.zb section.zb-counters { background: #1A1A1A; color: #fff; padding: 44px 0 40px; font-family: 'Montserrat', sans-serif; } .zb-counters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .zb-counters__grid > div { display: flex; flex-direction: column; align-items: center; gap: 4px; } .zb-counters__pre, .zb-counters__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); } body.zb .zb-counters .counter { color: #FB7E26; font-size: clamp(36px, 4vw, 52px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; margin: 0; } .zb-counters__unit { color: #FB7E26; font-size: 22px; font-weight: 800; margin-left: 2px; } .zb-videos { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; } body.zb a.zb-video, body.zb a.zb-video:hover { display: block; text-decoration: none; color: #1A1A1A; } .zb-video__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; box-shadow: 0 10px 26px rgba(0,0,0,.14); } .zb-video__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.18); transform-origin: 50% 35%; transition: transform .5s; } .zb-video:hover .zb-video__thumb img { transform: scale(1.24); } .zb-video__play { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: #FB7E26; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .2s; } .zb-video__play::after { content: ""; position: absolute; border-style: solid; border-color: transparent transparent transparent #fff; } .zb-video:hover .zb-video__play { transform: scale(1.1); } .zb-video__title { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; } .zb-video__title small { color: #777; font-weight: 600; margin-left: 4px; } body.zb section.zb-bridge, body.zb section.zb-reasons, body.zb section.zb-voices, body.zb section.zb-theater { padding: 80px 0; font-family: 'Montserrat', sans-serif; } .zb-bridge__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; } .zb-bridge__img { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.12); } .zb-bridge__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } body.zb section.zb-reasons { background: #1A1A1A; } .zb-reasons__grid { background: #242424; border-radius: 12px; padding: 4px 0; } .zb-reason { display: flex; align-items: flex-start; gap: 0; padding: 20px 32px; border-bottom: 1px solid #333; } .zb-reason:last-child { border-bottom: none; } .zb-reason__check { font-size: 15px; font-weight: 900; color: #FB7E26; min-width: 36px; flex-shrink: 0; padding-top: 2px; } .zb-reason__body { flex: 1; } body.zb p.zb-reason__title { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 4px; line-height: 1.3; } body.zb p.zb-reason__text { font-size: 16px; line-height: 1.6; color: #999; margin: 0; } .zb-voices__grid { display: grid; grid-template-columns: .8fr 1fr 1fr 1fr; gap: 20px; align-items: stretch; } body.zb .zb-voices__r5 { justify-content: center; } .zb-voice { margin: 0; background: #fff; border: 1px solid var(--pc, #FB7E26); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; } .zb-voice__stars { color: #FB7E26; letter-spacing: 2px; font-size: 13px; margin-bottom: 12px; } .zb-voice blockquote { margin: 0 0 16px; padding: 0; border: 0; font-size: 14px; line-height: 1.65; font-style: italic; color: #333; flex: 1; } .zb-voice figcaption b { display: block; font-size: 13px; } .zb-voice figcaption span { font-size: 12px; color: #777; } body.zb section.zb-theater { padding: 44px 0; background: #fff; } .zb-theater__grid { display: grid; grid-template-columns: 110px 1fr auto; gap: 28px; align-items: center; } .zb-theater__grid img { width: 110px; height: auto; } body.zb p.zb-theater__title { font-size: 22px; font-weight: 900; color: #1A1A1A; margin: 0 0 4px; } body.zb p.zb-theater__text { font-size: 15px; margin: 0; color: #555; } @media (max-width: 991px) { .zb-voices__grid { grid-template-columns: 1fr 1fr; } .zb-bridge__grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 600px) { .zb-counters__grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; } .zb-reasons__grid, .zb-voices__grid { grid-template-columns: 1fr; } .zb-theater__grid { grid-template-columns: 70px 1fr; } .zb-theater__grid img { width: 70px; } .zb-theater__grid .zh-btn { grid-column: 1 / -1; justify-self: start; } body.zb section.zb-bridge, body.zb section.zb-reasons, body.zb section.zb-voices { padding: 52px 0; } } body.zb section.zb-theater a.zh-btn--primary, body.zb section.zb-theater a.zh-btn--primary:hover { color: #fff !important; background: #FB7E26; } body.zb section.zb-counters { border-top: 1px solid rgba(255,255,255,.85) !important; } /* ── 13. Videos-Seite ─────────────────────────────────── */ .zb-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } .zb-vgroup .zb-video__title { font-size: 15px; } .zb-video--request .zb-video__thumb { display: flex; align-items: center; justify-content: center; background: #1A1A1A; } .zb-video__req { color: #fff; font-weight: 800; font-size: 20px; text-align: center; line-height: 1.3; } .zb-video--request:hover .zb-video__req { color: #FB7E26; } @media (max-width: 991px) { .zb-vgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .zb-vgrid { grid-template-columns: 1fr; } } /* Video-Vorschauen: kein YouTube-Rot mehr – Bild in S/W, Play-Button immer orange und größer */ .zb-video__thumb img { filter: grayscale(1) brightness(.85) !important; } .zb-vgroup--violett .zb-video__play { background: #FB7E26; } .zb-vgroup--violett .zr-label { color: #FB7E26; } .zb-video__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } .zb-video__play::after { left: 27px; top: 22px; border-width: 12px 0 12px 19px; } /* ── 14. FAQ (alle Seiten) ──────────────────────────────── */ body.zb section.zb-faq { padding: 80px 0; background: #F0EEEB; font-family: 'Montserrat', sans-serif; } .zb-faq__grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: start; } body.zb p.zb-faq__lead { font-size: 15px; color: #555; margin: 0; } .zb-faq__list { background: #fff; border-radius: 12px; padding: 6px 26px; border-top: 3px solid var(--accent); } .zb-faq__item { border-bottom: 1px solid rgba(0,0,0,.08); } .zb-faq__item:last-child { border-bottom: 0; } .zb-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 15px; font-weight: 700; color: #1A1A1A; } .zb-faq__item summary::-webkit-details-marker { display: none; } .zb-faq__item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--accent); flex: 0 0 auto; transition: transform .2s; } .zb-faq__item[open] summary::after { content: '\2212'; } body.zb .zb-faq__item p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: #555; } @media (max-width: 991px) { .zb-faq__grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 600px) { body.zb section.zb-faq { padding: 52px 0; } .zb-faq__list { padding: 4px 18px; } } /* ── 14b. FAQ offen (Option A: keine Box, Gruppen mit Label) ── */ .zb-faq__list--open { background: none; border-radius: 0; padding: 0; border-top: none; } .zb-faq__group { margin-top: 40px; } .zb-faq__group:first-child { margin-top: 0; } .zb-faq__group-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #FB7E26); padding-bottom: 12px; border-bottom: 2px solid var(--accent, #FB7E26); margin-bottom: 0; } .zb-faq__list--open .zb-faq__item:last-child { border-bottom: 1px solid rgba(0,0,0,.08); } body.zb .zb-faq .zr-label { color: var(--accent); } body.zb section.zb-vintro { padding-bottom: 8px; } body.zb section.zb-vintro + section.zb-vgroup { padding-top: 40px; border-top: 0 !important; } /* ── 15. „Auf einen Blick“ neu (dunkle Karte, eigenständig statt CK-Box) ── */ body.zb .zb-facts { background: #1A1A1A; border: 0; border-radius: 14px; padding: 26px 26px 18px; box-shadow: 0 16px 36px rgba(0,0,0,.18); position: relative; overflow: hidden; } body.zb .zb-facts::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); } body.zb .zb-facts__title { color: var(--accent) !important; margin-bottom: 12px !important; } body.zb .zb-facts ul.keyfacts li { padding: 12px 0 12px 22px; border-bottom: 1px solid rgba(255,255,255,.10); color: #fff; font-size: 15px; font-weight: 600; } body.zb .zb-facts ul.keyfacts li::before { content: ""; font-family: inherit; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); top: 19px; left: 2px; } body.zb .zb-aside a.button { margin-top: 18px !important; } body.zb a.zb-aside__video { margin-top: 26px; } body.zb .zb-aside__video .zb-video__thumb { aspect-ratio: 16 / 9; } body.zb .zb-aside__video .zb-video__thumb img { transform: scale(1.32); transform-origin: 50% 12%; } .zb-ctm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } .zb-ctm-gallery a { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.08); } .zb-ctm-gallery img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s; } .zb-ctm-gallery a:hover img { transform: scale(1.04); } @media (max-width: 600px) { .zb-ctm-gallery { grid-template-columns: 1fr; } } .zb-ctm-slider { border-radius: 14px; overflow: hidden; margin: 10px 0 26px; box-shadow: 0 14px 34px rgba(0,0,0,.12); } .zb-ctm-slider .carousel-inner > .item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .zb-ctm-slider .carousel-indicators { bottom: 12px; } /* ── 16. Sub-Navi (Magic Bus: Outdoor | Indoor | FAQ) ───────── */ .zb-subnav-wrap { min-height: 64px; background: #fff; } nav.zb-subnav { background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); font-family: 'Montserrat', sans-serif; z-index: 1020; } nav.zb-subnav.affix { position: fixed; top: var(--navh); left: 0; right: 0; box-shadow: 0 6px 18px rgba(0,0,0,.08); } nav.zb-subnav ul { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0 auto; } nav.zb-subnav li { margin: 0; padding: 0; } body.zb nav.zb-subnav a { display: block; text-align: center; padding: 12px 8px 11px; color: #1A1A1A !important; font-size: 15px; font-weight: 800; text-decoration: none; border-bottom: 3px solid transparent; line-height: 1.2; transition: border-color .2s, color .2s; } nav.zb-subnav a small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pc, #FB7E26); margin-bottom: 3px; } body.zb nav.zb-subnav a:hover, body.zb nav.zb-subnav a.is-active { border-bottom-color: var(--pc, #FB7E26); color: var(--pc, #FB7E26) !important; } .zb-subnav-wrap + section { border-top: 0 !important; } @media (max-width: 600px) { body.zb nav.zb-subnav a { font-size: 13px; padding: 10px 4px 9px; } nav.zb-subnav a small { font-size: 9px; letter-spacing: .12em; } .zb-subnav-wrap { min-height: 56px; } } /* Text-Überschrift statt Logo (Magic Bus), wie h2 closertomagic */ body.zb section#intro h1.zb-h1-text { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 38px; line-height: 1.1; letter-spacing: -.02em; color: #1A1A1A; text-transform: none; margin: 0 0 10px; } /* ── 17. Seitenkopf ohne Slider (Messe · Konzept · Workshop) ── */ body.zb header.zb-pagehead { text-align: left; color: #fff; } body[class*="theme-"] header.zb-pagehead { padding-top: 0; } header.zb-pagehead .zb-wrap { padding-top: calc(var(--navh) + var(--barh, 0px) + 24px); padding-bottom: 60px; } .zb-pagehead__label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 16px; } body.zb h1.zb-pagehead__h1, body.zb p.zb-pagehead__h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(30px, 4.4vw, 52px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; color: #fff !important; text-transform: none; margin: 0 0 26px; } body.zb header.zb-pagehead a.zb-pagehead__btn { display: inline-block; background: #fff; color: var(--pc-bg, #1A1A1A) !important; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; padding: 13px 26px; border-radius: 4px; text-decoration: none; transition: opacity .2s, transform .2s; } body.zb header.zb-pagehead a.zb-pagehead__btn:hover { opacity: .9; transform: translateY(-1px); } @media (max-width: 600px) { header.zb-pagehead .zb-wrap { padding-top: calc(var(--navh) + var(--barh, 0px) + 12px); padding-bottom: 40px; } } /* ── 18. Seiten ohne Hero (Impressum): Abstand unter fixer Navi + Farbbalken ── */ .zb-navspacer { position: relative; height: calc(var(--navh) + 12px); background: #fff; } .zb-navspacer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #FB7E26; } /* ── 19. Startseite Intro: Einleitung hervorgehoben, Absätze mit Luft ── */ body.zb p.zb-lead { font-size: 18px !important; line-height: 1.65 !important; color: #1A1A1A !important; font-weight: 500; } body.zb p.zb-lead + p { margin-top: 18px; } body.zb p.zb-lead + p strong { color: #1A1A1A; font-weight: 700; } /* ── 20. Referenzen: Weltkarte „Auftritte weltweit" ── */ .zr-section.zr-world { background: #1A1A1A; color: #fff; text-align: center; padding-bottom: 72px; } .zr-world .zr-h2 { color: #fff; margin-bottom: 36px; } .zr-world__map { display: block; width: 100%; max-width: 920px; height: auto; margin: 0 auto; } .zr-world__legend { margin: 26px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); } .zr-world__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #FB7E26; margin-right: 10px; vertical-align: 1px; } /* Startseite: Bewertungskarte in der linken Spalte unter dem Trailer */ .zb-videos a.zb-r5--intro { order: 0; } /* Aside-Zitat Sprechblase */ .zb-aside__zitat { position:relative; margin-top:30px; padding:22px 22px 18px 22px; background:var(--grau,#F0EEEB); border-radius:12px; font-size:.88em; line-height:1.6; } .zb-aside__zitat::before { content:'\201E'; font-size:52px; line-height:1; color:rgba(0,0,0,.18); display:block; margin-bottom:4px; font-style:normal; } .zb-aside__zitat .zitat { background:transparent !important; border:none !important; border-left:none !important; border-radius:0; padding:0; margin:0; font-size:1em; line-height:1.6; } .zb-faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; } @media (max-width: 991px) { .zb-faq__cols { grid-template-columns: 1fr; } } body.zb section.zb-reasons h2 { color: #fff; } body.zb section.zb-reasons .zr-label { color: #FB7E26; } /* ── 18b. SEO-Seiten Intro-Grid (Text+Video | Bild) ── */ .zb-intro-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; margin-bottom: 40px; } .zb-intro-grid__img { width: 100%; border-radius: 10px; object-fit: cover; margin-top: 20px; } .zb-intro-grid__video { display: flex; flex-direction: column; justify-content: flex-start; } @media (max-width: 768px) { .zb-intro-grid { grid-template-columns: 1fr; } .zb-intro-grid__img { order: -1; max-height: 280px; } } /* Zitat als Bewertung: 1px Rahmen in Seitenfarbe, weißer Hintergrund, orange Sterne */ body.zb .zitat.zitat--r, body.zb p.zitat.zitat--r { background: #fff; border: 1px solid var(--pc, #FB7E26); border-left: 1px solid var(--pc, #FB7E26); } body.zb .zitat.zitat--r::before { content: '\2605\2605\2605\2605\2605'; display: block; color: #FB7E26; font-style: normal; font-size: 20px; letter-spacing: .1em; margin-bottom: 10px; } /* Kundenstimmen: grauer Hintergrund, damit weiße Karten mit Rahmen wirken */ body.zb section.zb-voices { background: var(--grau, #F0EEEB); } /* Startseite: Kaninchenfrei grau */ body.zb section.zb-bridge { background: var(--grau, #F0EEEB); } /* Startseite: 5 Gründe weiß (überschreibt #warum grau + dunkles Layout) */ body.zb section.zb-reasons#warum { background: #1A1A1A; } body.zb section.zb-reasons#warum h2 { color: #fff; } body.zb section.zb-reasons#warum .zb-reasons__grid { background: #fff; border: 3px solid #FB7E26; } body.zb section.zb-reasons#warum .zb-reason { border-bottom-color: rgba(0,0,0,.08); } body.zb section.zb-reasons#warum p.zb-reason__title { color: #1A1A1A; } body.zb section.zb-reasons#warum p.zb-reason__text { color: #555; } /* zs-Cards außerhalb section.zs (z. B. Termine & Tickets) */ body.zb a.zs-card, body.zb a.zs-card:hover, body.zb a.zs-card:focus { display: flex; flex-direction: column; color: #1A1A1A; text-decoration: none; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s; } body.zb a.zs-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.10); } /* Subnav mit 2 Punkten: je halbe Breite */ nav.zb-subnav ul.zb-subnav--2 { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 8px; padding-bottom: 8px; } body.zb nav.zb-subnav ul.zb-subnav--2 a { background: #fff; border-radius: 0; border-bottom: 3px solid transparent; } body.zb nav.zb-subnav ul.zb-subnav--2 a:hover, body.zb nav.zb-subnav ul.zb-subnav--2 a.is-active { background: #fff; } nav.zb-subnav ul.zb-subnav--2 li:first-child { position: relative; } nav.zb-subnav ul.zb-subnav--2 li:first-child::after { content: ""; position: absolute; right: -7px; top: 15%; bottom: 15%; width: 2px; background: #FB7E26; } /* Kontaktseite: Kacheln */ .zk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 34px 0 28px; } .zk-tile { background: #F0EEEB; border: 0; border-radius: 12px; padding: 30px 24px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .2s, box-shadow .2s; } .zk-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.10); } .zk-tile__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent, #FB7E26); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; } .zk-tile__label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #FB7E26); margin-bottom: 8px; } body.zb p.zk-tile__value { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 800; color: #1A1A1A; margin: 0 0 8px; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; justify-content: center; } body.zb p.zk-tile__note { font-size: 13px; color: #555; margin: 0 0 20px; line-height: 1.5; min-height: 3em; } body.zb a.zk-tile__btn { margin-top: auto !important; display: inline-block; } .zk-check { background: #1A1A1A; border: 0; border-radius: 12px; padding: 20px 24px; margin-bottom: 10px; } .zk-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; } .zk-check li { position: relative; padding-left: 18px; font-weight: 600; color: #fff; } .zk-check li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #FB7E26); } @media (max-width: 991px) { .zk-tiles { grid-template-columns: 1fr; } } /* Vita: Lorbeer-Badges volle Textbreite, bündig mit Portrait unten */ .zv .zr-intro .zr-two { align-items: stretch; } .zv .zr-intro .zr-two > div:first-child { display: flex; flex-direction: column; } .zv .zr-intro .zv-badges { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 560px; } .zv .zr-intro .zv-badges img { width: 100%; max-width: 116px; height: auto; justify-self: center; } .zv .zr-intro .zv-portrait { align-self: end; } /* Icons als Inline-SVG (ersetzt Font Awesome 4.2) */ .fa { display: inline-block; font-style: normal; font-size: inherit; line-height: 1; } .fa-svg { display: inline-block; height: 1em; vertical-align: -.143em; fill: currentColor; overflow: visible; } /* Eigenes Cookie-/Einwilligungs-Banner */ #za-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10000; display: none; font-family: 'Montserrat', sans-serif; } #za-consent.is-open { display: block; } .za-consent__inner { max-width: 980px; margin: 0 auto; background: #1A1A1A; color: #fff; border-radius: 12px; border-top: 4px solid #FB7E26; box-shadow: 0 18px 40px rgba(0,0,0,.35); padding: 20px 24px; display: flex; gap: 24px; align-items: center; } body.zb p.za-consent__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); flex: 1; } .za-consent__text strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; } body.zb .za-consent__text a { color: #FB7E26 !important; text-decoration: underline; } .za-consent__btns { display: flex; gap: 10px; flex-shrink: 0; } .za-consent__btn { font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 8px; padding: 12px 18px; cursor: pointer; border: 2px solid #FB7E26; background: #FB7E26; color: #fff; } .za-consent__btn:hover { background: #C9651E; border-color: #C9651E; } .za-consent__btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .za-consent__btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } @media (max-width: 767px) { .za-consent__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; } .za-consent__btns { flex-direction: column-reverse; } } /* Logo in der Navigation als SVG (ohne Slogan) */ nav.navbar-fixed-top .navbar-brand > img.logo-svg { height: 38px; width: auto; max-width: none; } @media (max-width: 767px) { nav.navbar-fixed-top .navbar-brand > img.logo-svg { height: 30px; } }