/* ============================================================ MOJO BLUES BAND – BOXED THEME (WordPress) Adaptiert vom statischen Entwurf: /entwurf/website-boxed/css/style.css Farben + Fonts laufen über CSS-Custom-Properties, damit der Design-Switcher (siehe inc/class-design-switcher.php) sie live während des Abnahmetermins durchschalten kann. ============================================================ */ /* ---------- DESIGN TOKENS (Default „Whisky Gold") ---------- */ :root { /* Hintergründe */ --mbb-bg-deep: #040302; --mbb-bg-edge: #0c0a05; --mbb-bg-content: rgba(12, 10, 5, .92); --mbb-bg-card-1: rgba(30, 25, 10, .70); --mbb-bg-card-2: rgba(16, 13, 6, .80); --mbb-bg-soft: rgba(50, 42, 15, .10); --mbb-bg-input: rgba(12, 10, 5, .50); /* Schimmer / Glow */ --mbb-glow-shadow: rgba(70, 45, 18, .22); --mbb-glow-shadow-2: rgba(55, 32, 12, .12); /* Akzente */ --mbb-accent: #A86500; --mbb-accent-light: #E9D8A7; --mbb-accent-bright: #F9E8B7; /* Text */ --mbb-text: #ede3d0; --mbb-text-muted: #ddd3b8; --mbb-text-soft: #d4c59d; --mbb-text-dim: #8a7d60; --mbb-text-faint: #5a5030; --mbb-text-placehold: #6a6040; --mbb-text-cancelled: #c0392b; --mbb-soldout: #d6453d; --mbb-soldout-bright: #ff6b62; /* Fonts */ --mbb-font-display: 'ChillerLET', 'Brush Script MT', cursive; --mbb-font-body: Georgia, 'Times New Roman', serif; /* Hero */ --mbb-hero-img: url('../img/hero.jpg'); --mbb-hero-bg: url('../img/hero-bg.jpg'); --mbb-hero-band: #613D39; --mbb-hero-band-rgb: 97, 61, 57; /* Layout */ --mbb-page-max: 100%; /* RGB-Triple für rgba()-Mischungen (vom Switcher synchron mitgesetzt) */ --mbb-accent-rgb: 168, 101, 0; --mbb-accent-light-rgb: 233, 216, 167; --mbb-bg-deep-rgb: 4, 3, 2; --mbb-bg-edge-rgb: 12, 10, 5; } /* ============================================================ LIGHT MODE Wird über das Attribut data-theme="light" am aktiviert. Tausch der Hintergrund-/Textfarben; Akzent-Amber bleibt Marke, wird nur leicht dunkler für ausreichend Kontrast auf hell. Hero-Bild & Braunbänder funktionieren unverändert in beiden Modi. ============================================================ */ :root[data-theme="light"] { --mbb-bg-deep: #f6f0e3; --mbb-bg-edge: #ece4cf; --mbb-bg-content: rgba(250, 246, 236, .97); --mbb-bg-card-1: rgba(255, 252, 244, .92); --mbb-bg-card-2: rgba(246, 240, 224, .96); --mbb-bg-soft: rgba(168, 101, 0, .08); --mbb-bg-input: #ffffff; --mbb-glow-shadow: rgba(120, 80, 30, .12); --mbb-glow-shadow-2: rgba(90, 60, 20, .06); --mbb-accent: #8a4a00; --mbb-accent-light: #6b4317; /* dunklere Variante für Headlines auf hell */ --mbb-accent-bright: #4a2e08; /* maximaler Kontrast (Hover) */ --mbb-text: #2a1f10; --mbb-text-muted: #3d2f1c; --mbb-text-soft: #58432a; --mbb-text-dim: #7a6a48; --mbb-text-faint: #a89a76; --mbb-text-placehold: #9a8a66; --mbb-text-cancelled: #b91c1c; --mbb-accent-rgb: 138, 74, 0; --mbb-accent-light-rgb: 107, 67, 23; --mbb-bg-deep-rgb: 246, 240, 227; --mbb-bg-edge-rgb: 236, 228, 207; /* Ambient-Background im Light-Mode entfernen (das dunkle Hero-Bild würde unter dem hellen Layout sonst wie eine Schmutzschicht wirken) */ --mbb-hero-bg: none; color-scheme: light; } /* Übergänge nur für die Farbschicht – nicht für Layout-Eigenschaften. */ :root body, :root .content-wrapper, :root .site-header, :root .site-footer, :root .news-item, :root .album-card, :root .contact-card, :root .album-detail, :root .musiker-contact-item, :root .newsletter-section { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* Light-Mode spezifische Korrekturen, die nicht über Tokens lösbar sind */ :root[data-theme="light"] .bg-atmosphere { background: var(--mbb-bg-deep); } :root[data-theme="light"] .hero-bleed { background: var(--mbb-bg-deep); } :root[data-theme="light"] .section-header h2 { text-shadow: none; } /* Auf hellem Hintergrund sind harte schwarze Schlagschatten zu hart. */ :root[data-theme="light"] .news-item:hover, :root[data-theme="light"] .album-card:hover, :root[data-theme="light"] .album-detail:hover { box-shadow: 0 12px 30px rgba(90, 60, 20, .18); } :root[data-theme="light"] .info-images img, :root[data-theme="light"] .info-about-pic img, :root[data-theme="light"] .info-cruise-media img { box-shadow: 0 10px 30px rgba(90, 60, 20, .15); } :root[data-theme="light"] .musiker-full-header img, :root[data-theme="light"] .musiker-duo-card img { box-shadow: 0 12px 28px rgba(90, 60, 20, .18); } /* Sticky-Header bekommt eine sichtbare aber dezente Trennlinie */ :root[data-theme="light"] .site-header { border-bottom-color: rgba(107, 67, 23, .14); box-shadow: 0 2px 12px rgba(90, 60, 20, .04); } /* Form-Felder Light: heller Rahmen wirkt verloren -> dezenter dunkler Rand */ :root[data-theme="light"] .newsletter-form input[type="email"], :root[data-theme="light"] .footer-newsletter input[type="email"], :root[data-theme="light"] .mbb-ct-form input, :root[data-theme="light"] .mbb-ct-form select, :root[data-theme="light"] .mbb-ct-form textarea { border-color: rgba(107, 67, 23, .25); background: #ffffff; color: var(--mbb-text); } :root[data-theme="light"] .newsletter-form input[type="email"]::placeholder, :root[data-theme="light"] .mbb-ct-form input::placeholder, :root[data-theme="light"] .mbb-ct-form textarea::placeholder { color: var(--mbb-text-placehold); } /* ---------- FONT-FACES ---------- */ @font-face { font-family: 'ChillerLET'; src: url('../font/ChillerLET.woff2') format('woff2'), url('../font/ChillerLET.woff') format('woff'), url('../font/ChillerLET.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ---------- RESET & BASE ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--mbb-font-body); background: var(--mbb-bg-deep); color: var(--mbb-text); font-size: 18px; line-height: 1.85; overflow-x: hidden; min-height: 100vh; } a { color: var(--mbb-accent-light); text-decoration: none; transition: color .3s; } a:hover { color: var(--mbb-accent-bright); } img { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font-family: inherit; } body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* ---------- AMBIENT BACKGROUND ---------- */ /* Verwendet eine 120 px breite, vor-geblurrte Variante als Hintergrund anstatt einem Live-blur(90px) auf dem 1.5 MP Hero – spart auf Mobile und schwächeren Geräten massiv Compositing-Kosten und ist ~880 Byte. */ .bg-atmosphere { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--mbb-hero-bg) center 20% / cover no-repeat var(--mbb-bg-deep); z-index: 0; pointer-events: none; } /* ---------- PAGE BOX ---------- */ .page-box { position: relative; z-index: 1; max-width: var(--mbb-page-max); margin: 0 auto; } .page-box::before, .page-box::after { content: ''; position: fixed; top: 0; width: clamp(30px, 8vw, 120px); height: 100vh; z-index: 100; pointer-events: none; display: none; /* Site-Wide-Layout: keine Box-Randschatten */ } .page-box::before { left: calc((100vw - var(--mbb-page-max)) / 2 - clamp(30px, 8vw, 120px)); background: linear-gradient(to left, rgba(var(--mbb-bg-edge-rgb), .95) 0%, rgba(var(--mbb-bg-edge-rgb), .5) 40%, transparent 100%); } .page-box::after { right: calc((100vw - var(--mbb-page-max)) / 2 - clamp(30px, 8vw, 120px)); background: linear-gradient(to right, rgba(var(--mbb-bg-edge-rgb), .95) 0%, rgba(var(--mbb-bg-edge-rgb), .5) 40%, transparent 100%); } .container { max-width: 100%; padding: 0 clamp(28px, 4vw, 80px); } /* ---------- SECTION HEADERS ---------- */ .section-header { margin-bottom: 50px; position: relative; } .section-header h2 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: clamp(2.8rem, 5vw, 4.2rem); text-shadow: 2px 2px 6px rgba(0,0,0,.7), 0 0 20px rgba(var(--mbb-accent-light-rgb), .08); display: inline-block; position: relative; font-weight: normal; } .section-header h2::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 55%; height: 2px; background: linear-gradient(90deg, var(--mbb-accent), var(--mbb-accent-light), transparent); } .section-header.center h2::after { left: 50%; transform: translateX(-50%); } /* ---------- HERO (volle Breite, aus der Box raus) ---------- */ .hero-bleed { position: relative; overflow: hidden; display: flex; align-items: stretch; background: var(--mbb-bg-deep); width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 2vw; } /* SYMMETRIE: linker und rechter Braunstreifen identisch breit (22 %), Bild 56 % zentriert. Gradient-Stops gespiegelt, damit beide Ränder visuell die gleiche Tiefe haben. */ .hero-bleed .edge-fade-left { flex: 0 0 22%; order: -1; position: relative; background: linear-gradient(to left, var(--mbb-hero-band) 0%, var(--mbb-hero-band) 18%, rgba(var(--mbb-hero-band-rgb), .92) 32%, rgba(var(--mbb-hero-band-rgb), .78) 45%, rgba(var(--mbb-hero-band-rgb), .60) 57%, rgba(var(--mbb-hero-band-rgb), .40) 68%, rgba(var(--mbb-hero-band-rgb), .22) 78%, rgba(var(--mbb-hero-band-rgb), .08) 87%, rgba(var(--mbb-bg-deep-rgb), .12) 94%, rgba(var(--mbb-bg-deep-rgb), .25) 100% ); z-index: 5; } .hero-bleed .hero-image { display: block; width: 56%; flex: 0 0 56%; height: auto; align-self: center; object-fit: contain; } .hero-bleed .edge-fade-right { flex: 0 0 22%; position: relative; background: linear-gradient(to right, var(--mbb-hero-band) 0%, var(--mbb-hero-band) 18%, rgba(var(--mbb-hero-band-rgb), .92) 32%, rgba(var(--mbb-hero-band-rgb), .78) 45%, rgba(var(--mbb-hero-band-rgb), .60) 57%, rgba(var(--mbb-hero-band-rgb), .40) 68%, rgba(var(--mbb-hero-band-rgb), .22) 78%, rgba(var(--mbb-hero-band-rgb), .08) 87%, rgba(var(--mbb-bg-deep-rgb), .12) 94%, rgba(var(--mbb-bg-deep-rgb), .25) 100% ); z-index: 5; } /* Feather: überblendet die dunkle Bildkante weich ins Braunband. Liegt über dem Bildrand, damit der Übergang bei JEDER Breite/Zoomstufe weich bleibt (kein hartes Schwarz-trifft-Braun mehr). */ .hero-bleed .edge-fade-left::after, .hero-bleed .edge-fade-right::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(70px, 9vw, 170px); z-index: 5; pointer-events: none; } .hero-bleed .edge-fade-left::after { left: 100%; /* Auf Kundenwunsch: links schmaler & weicher überblenden, damit mehr vom Bildmotiv sichtbar bleibt. Die rechte Seite bleibt unverändert. */ width: clamp(34px, 4vw, 82px); background: linear-gradient(to right, rgba(var(--mbb-hero-band-rgb), .82) 0%, rgba(var(--mbb-hero-band-rgb), .42) 48%, rgba(var(--mbb-hero-band-rgb), 0) 100% ); } .hero-bleed .edge-fade-right::after { right: 100%; background: linear-gradient(to left, var(--mbb-hero-band) 0%, rgba(var(--mbb-hero-band-rgb), .88) 24%, rgba(var(--mbb-hero-band-rgb), .55) 50%, rgba(var(--mbb-hero-band-rgb), .22) 76%, rgba(var(--mbb-hero-band-rgb), 0) 100% ); } /* sanfter Übergang ins Content-Wrapper-Schwarz unten */ .hero-bleed::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 22%; background: linear-gradient(transparent, rgba(var(--mbb-bg-edge-rgb), .85)); z-index: 6; pointer-events: none; } /* ---------- HERO NAV OVERLAY ---------- */ /* Menu liegt deckungsgleich im rechten Braunstreifen (22 % Breite). Größere, lesbarere Schrift mit etwas mehr Luft pro Zeile. */ .nav-overlay { position: absolute; top: 0; right: 2vw; width: 22%; height: 100%; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 24px 28px 24px 22px; pointer-events: none; } .nav-overlay a { pointer-events: all; font-family: var(--mbb-font-display); color: #FCF5F2; text-decoration: none; text-shadow: 1px 1px 3px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.35); transition: all .3s; white-space: nowrap; font-size: clamp(1.95rem, 2.8vw, 3.2rem); padding: 4px 0; line-height: 1.35; letter-spacing: .5px; } .nav-overlay a:hover { color: #ffffff; text-shadow: 1px 1px 3px rgba(0,0,0,.55), 0 0 18px rgba(252,245,242,.45); transform: translateX(3px); } .scroll-indicator { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); z-index: 10; animation: mbb-bounce 2s infinite; } .scroll-indicator a { color: rgba(var(--mbb-accent-light-rgb), .45); font-size: 1.5rem; text-decoration: none; transition: color .3s; pointer-events: all; } .scroll-indicator a:hover { color: rgba(var(--mbb-accent-light-rgb), 1); } /* ---------- HERO TAGLINE „Got my MOJO working" ---------- */ .hero-tagline { position: absolute; right: clamp(140px, 30%, 480px); bottom: clamp(80px, 17.5%, 210px); z-index: 10; pointer-events: none; display: flex; align-items: baseline; gap: .25em; font-family: 'Papyrus', 'Copperplate', 'Trattatello', fantasy; font-style: italic; color: #EBE4D0; text-shadow: 2px 2px 8px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .7); line-height: 1; user-select: none; } .hero-tagline__word { font-size: clamp(1.7rem, 2.9vw, 2.9rem); } .hero-tagline__big { font-size: clamp(2rem, 3.4vw, 3.4rem); letter-spacing: .02em; } @keyframes mbb-bounce { 0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-8px); } 60% { transform: translateX(-50%) translateY(-4px); } } /* ---------- CONTENT WRAPPER ---------- */ .content-wrapper { position: relative; background: var(--mbb-bg-content); box-shadow: 80px 0 100px -20px var(--mbb-glow-shadow), -80px 0 100px -20px var(--mbb-glow-shadow), 160px 0 200px -50px var(--mbb-glow-shadow-2), -160px 0 200px -50px var(--mbb-glow-shadow-2); } /* ---------- SITE HEADER ---------- */ .site-header { background: rgba(var(--mbb-bg-edge-rgb), .97); border-bottom: 1px solid rgba(var(--mbb-accent-light-rgb), .1); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .site-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } .site-logo__img { display: block; height: 42px; width: auto; transition: opacity .25s ease, transform .25s ease; } .site-logo:hover .site-logo__img { opacity: .85; } .site-logo__img--brand { display: none; } :root[data-theme="light"] .site-logo__img--white { display: none; } :root[data-theme="light"] .site-logo__img--brand { display: block; } @media (max-width: 768px) { .site-logo__img { height: 36px; } } .main-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .main-nav a { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.35rem; padding: 7px 14px; border-radius: 3px; transition: all .3s; text-decoration: none; white-space: nowrap; } .main-nav a:hover, .main-nav a.active { color: var(--mbb-accent-bright); background: rgba(var(--mbb-accent-light-rgb), .07); } .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; } .hamburger span { display: block; width: 28px; height: 2px; background: var(--mbb-accent-light); transition: all .3s; } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } .mobile-nav { display: none; background: rgba(var(--mbb-bg-edge-rgb), .98); border-bottom: 1px solid rgba(var(--mbb-accent-light-rgb), .08); padding: 15px 42px 25px; } .mobile-nav.open { display: flex; flex-direction: column; gap: 6px; } .mobile-nav a { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.5rem; padding: 9px 0; text-decoration: none; transition: color .3s; border-bottom: 1px solid rgba(var(--mbb-accent-light-rgb), .04); } .mobile-nav a:hover { color: var(--mbb-accent-bright); } .site-header[hidden] { display: none; } /* ---------- CONTENT SECTIONS ---------- */ .content-section { padding: 90px 0; } .content-section.alt-bg { background: linear-gradient(180deg, var(--mbb-bg-soft) 0%, transparent 100%); } .content-section.alt-bg-center { background: linear-gradient(180deg, transparent 0%, var(--mbb-bg-soft) 50%, transparent 100%); } /* ---------- NEWS ---------- */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .news-item { background: linear-gradient(145deg, var(--mbb-bg-card-1), var(--mbb-bg-card-2)); border-radius: 5px; padding: 28px; border-left: 3px solid var(--mbb-accent); transition: all .3s; position: relative; overflow: hidden; } .news-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(var(--mbb-accent-light-rgb), .02) 0%, transparent 50%); opacity: 0; transition: opacity .3s; } .news-item:hover { transform: translateY(-3px); border-left-color: var(--mbb-accent-light); box-shadow: 0 15px 40px rgba(0,0,0,.35); } .news-item:hover::before { opacity: 1; } .news-item h4 { color: var(--mbb-accent); font-size: 1.05rem; font-weight: normal; margin-bottom: 10px; } .news-item p { font-size: 1rem; color: var(--mbb-text-soft); line-height: 1.75; } .news-item .mehr { display: inline-block; margin-top: 15px; color: var(--mbb-accent-light); font-size: .95rem; transition: color .3s; } .news-item .mehr:hover { color: var(--mbb-accent-bright); } /* Ganze News-Kachel klickbar: der „mehr »"-Link wird über die komplette Kachel gespannt (stretched link), bleibt aber der einzige echte Link. Wichtig: .mehr selbst NICHT positionieren, sonst bezieht sich ::after auf den Link statt auf die Kachel (.news-item ist position: relative). */ .news-item { cursor: pointer; } .news-item .mehr::after { content: ""; position: absolute; inset: 0; z-index: 2; } .news-item h4, .news-item p { pointer-events: none; } /* Reine Info-Kacheln ohne Link (Startseite, alle außer Fankreuzfahrt): nicht klickbar, normaler Cursor, Text wieder markierbar. */ .news-item--static { cursor: default; } .news-item--static h4, .news-item--static p { pointer-events: auto; } /* ---------- INFO ---------- */ .info-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; } .info-text h3, .info-about-text h3 { font-family: var(--mbb-font-body); color: var(--mbb-accent); font-size: 1.7rem; font-weight: normal; font-style: italic; margin-bottom: 25px; } .info-text p, .info-about-text p { color: var(--mbb-text-muted); font-size: 1.1rem; margin-bottom: 20px; text-align: justify; } .info-text p strong, .info-about-text p strong { color: var(--mbb-text); } .info-text .author, .info-about-text .author { color: var(--mbb-text-dim); font-style: italic; margin-top: 30px; } .info-link { display: inline-block; margin-top: 25px; font-family: var(--mbb-font-display); color: var(--mbb-accent); font-size: 1.7rem; transition: all .3s; } .info-link:hover { color: var(--mbb-accent-light); transform: translateX(5px); } .info-images { display: flex; flex-direction: column; gap: 20px; } .info-images img { border-radius: 5px; box-shadow: 0 10px 40px rgba(0,0,0,.5); transition: transform .3s; } .info-images img:hover { transform: scale(1.02); } /* --- Über uns: langer Fließtext mit zwei eingebetteten Fotos ------------- */ .info-about-article { max-width: 940px; margin: 0 auto; } .info-about-article::after { content: ''; display: block; clear: both; } .info-about-article h3 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 2.1rem; font-weight: normal; font-style: normal; line-height: 1.15; margin: 42px 0 18px; clear: none; } .info-about-article p { color: var(--mbb-text-muted); font-size: 1.08rem; line-height: 1.85; margin-bottom: 18px; text-align: justify; } .info-about-article p strong { color: var(--mbb-text); } .about-quote { font-family: var(--mbb-font-body); font-style: italic; font-size: 1.35rem !important; line-height: 1.5 !important; color: var(--mbb-text-soft) !important; text-align: center !important; max-width: 760px; margin: 0 auto 34px !important; /* +1 Leerzeile Abstand zur folgenden Überschrift */ } .about-quote .about-cite { /* Auf Kundenwunsch: gleicher Font wie das Zitat, inline in Klammern direkt hinter dem Zitat (statt als separater Block darunter). */ font-style: inherit; font-size: inherit; color: inherit; } .info-about-article .about-tagline { text-align: center; color: var(--mbb-accent); font-size: 2.4rem; margin: 6px 0 34px; } .about-sign { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.9rem !important; text-align: right !important; margin-top: 8px !important; } .about-figure { margin: 0; } .about-figure img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 14px 38px rgba(0,0,0,.5); } .about-figure--right { float: right; width: 360px; margin: 10px 0 24px 40px; } .about-figure--left { float: left; width: 360px; margin: 10px 40px 24px 0; } /* --- Fankreuzfahrt: optisch abgetrennter Block mit Bild daneben --------- */ .info-cruise { clear: both; display: grid; grid-template-columns: 1.05fr 1fr; gap: 45px; align-items: center; margin: 70px auto 0; max-width: 1000px; padding: 38px 42px; background: linear-gradient(135deg, rgba(var(--mbb-accent-rgb), .08), rgba(var(--mbb-accent-light-rgb), .03)); border: 1px solid rgba(var(--mbb-accent-rgb), .22); border-left: 4px solid var(--mbb-accent); border-radius: 8px; } .info-cruise-media img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); } .info-cruise-text h3 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 2rem; font-weight: normal; margin-bottom: 18px; line-height: 1.1; } .info-cruise-text p { color: var(--mbb-text-muted); font-size: 1.08rem; line-height: 1.7; margin-bottom: 16px; } .info-cruise-text p strong { color: var(--mbb-text); } .info-cruise-text a { color: var(--mbb-accent-light); font-style: italic; } .info-cruise-text a:hover { color: var(--mbb-accent-bright); } .info-cruise-cta { margin-top: 6px; } .info-cruise-cta .btn { font-style: normal; font-size: 1.4rem; padding: 8px 26px; } /* ==================================================================== FANKREUZFAHRT – UNTERSEITE (/fankreuzfahrt/) ==================================================================== */ .cruise-hero { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); min-height: clamp(320px, 52vw, 580px); display: flex; align-items: flex-end; overflow: hidden; } .cruise-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: 0; } .cruise-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--mbb-bg-deep-rgb), .95) 0%, rgba(var(--mbb-bg-deep-rgb), .55) 38%, rgba(var(--mbb-bg-deep-rgb), .15) 70%, rgba(var(--mbb-bg-deep-rgb), .35) 100%); z-index: 1; } .cruise-hero__overlay { position: relative; z-index: 2; width: 100%; padding: 0 0 clamp(26px, 4vw, 54px); } .cruise-hero__overlay h1 { font-family: var(--mbb-font-display); color: var(--mbb-accent-bright); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: normal; line-height: 1.05; margin: 0 0 10px; text-shadow: 2px 2px 10px rgba(0,0,0,.8); } .cruise-hero__sub { color: var(--mbb-text); font-size: clamp(1.05rem, 2vw, 1.4rem); margin: 0 0 22px; text-shadow: 1px 1px 6px rgba(0,0,0,.75); } .cruise-hero__btn { font-style: normal; } /* Inhalt */ .cruise-content { max-width: 880px; margin: 0 auto; } .cruise-content .cruise-lead { font-size: 1.25rem; line-height: 1.75; color: var(--mbb-text); margin-bottom: 34px; } .cruise-content h2 { border-bottom: 1px solid rgba(var(--mbb-accent-rgb), .25); padding-bottom: 8px; } .cruise-content ul { list-style: none; padding: 0; margin: 0 0 26px; } .cruise-content ul li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid rgba(var(--mbb-accent-light-rgb), .08); color: var(--mbb-text-muted); font-size: 1.08rem; line-height: 1.6; } .cruise-content ul li::before { content: "♪"; position: absolute; left: 0; top: 8px; color: var(--mbb-accent); } .cruise-content ul.cruise-route li::before { content: "⚓"; } .cruise-content ul.cruise-incl li::before { content: "✓"; color: var(--mbb-accent-light); } .cruise-content .cruise-note, .cruise-content .cruise-disclaimer { font-size: .95rem; color: var(--mbb-text-dim); line-height: 1.6; } .cruise-content .cruise-disclaimer { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(var(--mbb-accent-light-rgb), .1); } /* Video */ .cruise-video { margin: 0 0 34px; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55); background: #000; } .cruise-video video { display: block; width: 100%; height: auto; } /* Abschluss-CTA mit Flyer */ .cruise-cta { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; max-width: 880px; margin: 50px auto 0; padding: 32px 36px; background: linear-gradient(135deg, rgba(var(--mbb-accent-rgb), .1), rgba(var(--mbb-accent-light-rgb), .03)); border: 1px solid rgba(var(--mbb-accent-rgb), .22); border-left: 4px solid var(--mbb-accent); border-radius: 8px; } .cruise-cta__flyer img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.5); transition: transform .25s ease; } .cruise-cta__flyer a:hover img { transform: scale(1.03); } .cruise-cta__text h3 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 2rem; font-weight: normal; margin: 0 0 12px; } .cruise-cta__text p { color: var(--mbb-text-muted); margin: 0 0 18px; } .cruise-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; } .cruise-cta__buttons .btn { font-style: normal; font-size: 1.4rem; padding: 10px 28px; } .btn--ghost { opacity: .92; } @media (max-width: 720px) { .cruise-cta { grid-template-columns: 1fr; text-align: center; } .cruise-cta__flyer { max-width: 200px; margin: 0 auto; } .cruise-cta__buttons { justify-content: center; } } /* ---------- EVENTS TABLE ---------- */ .events-table { width: 100%; border-collapse: collapse; margin-top: 30px; } .events-table th { text-align: left; padding: 16px 20px; color: var(--mbb-accent); font-weight: normal; font-size: .95rem; text-transform: uppercase; letter-spacing: 1.2px; border-bottom: 1px solid rgba(var(--mbb-accent-rgb), .25); } .events-table td { padding: 20px; border-bottom: 1px solid rgba(var(--mbb-accent-light-rgb), .06); color: var(--mbb-text-muted); font-size: 1.05rem; vertical-align: top; } .events-table tr:hover td { background: rgba(var(--mbb-accent-light-rgb), .025); color: var(--mbb-text); } .events-table .date { color: var(--mbb-accent-light); font-weight: bold; white-space: nowrap; } .events-table .location a { color: var(--mbb-accent); } .events-table .location a:hover { color: var(--mbb-accent-light); } .events-table tr.mbb-cancelled td { opacity: .55; text-decoration: line-through; } .events-table tr.mbb-cancelled .act em { color: var(--mbb-text-cancelled); font-style: normal; text-decoration: none; opacity: 1; } /* Gruppierte Monats-Tabellen: gleiche Spaltenbreiten über alle Monate */ .events-table--fixed { table-layout: fixed; } .events-table--fixed th, .events-table--fixed td { overflow-wrap: anywhere; word-break: break-word; } .events-table--fixed th:nth-child(1), .events-table--fixed td:nth-child(1) { width: 11%; } /* Datum */ .events-table--fixed th:nth-child(2), .events-table--fixed td:nth-child(2) { width: 19%; } /* Ort */ .events-table--fixed th:nth-child(3), .events-table--fixed td:nth-child(3) { width: 30%; } /* Location */ .events-table--fixed th:nth-child(4), .events-table--fixed td:nth-child(4) { width: 28%; } /* Act */ .events-table--fixed th:nth-child(5), .events-table--fixed td:nth-child(5) { width: 12%; } /* Uhrzeit */ /* Mit Flyer-Spalte (nach Location): Datum, Ort, Location, Flyer, Act, Uhrzeit */ .events-table--with-flyer th:nth-child(1), .events-table--with-flyer td:nth-child(1) { width: 10%; } /* Datum */ .events-table--with-flyer th:nth-child(2), .events-table--with-flyer td:nth-child(2) { width: 18%; } /* Ort */ .events-table--with-flyer th:nth-child(3), .events-table--with-flyer td:nth-child(3) { width: 28%; } /* Location */ .events-table--with-flyer th:nth-child(4), .events-table--with-flyer td:nth-child(4) { width: 8%; } /* Flyer */ .events-table--with-flyer th:nth-child(5), .events-table--with-flyer td:nth-child(5) { width: 24%; } /* Act */ .events-table--with-flyer th:nth-child(6), .events-table--with-flyer td:nth-child(6) { width: 12%; } /* Uhrzeit */ /* ---------- EVENT-FLYER (Vorschau in der Übersicht + Lightbox) ---------- */ /* In der flachen Tabelle bleibt die Flyer-Spalte schmal. */ .events-table .event-flyer-col, .events-table .event-flyer-cell { width: 1%; white-space: nowrap; vertical-align: middle; } .event-flyer { display: inline-block; width: 46px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(var(--mbb-accent-rgb), .35); background: rgba(0, 0, 0, .25); cursor: zoom-in; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; line-height: 0; } .event-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; } .event-flyer:hover { transform: scale(1.06); border-color: var(--mbb-accent-light); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); } .event-flyer:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lightbox-Overlay */ .mbb-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .mbb-lightbox.is-open { opacity: 1; visibility: visible; } .mbb-lightbox img { max-width: min(92vw, 860px); max-height: 90vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } .mbb-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background-color .2s ease; } .mbb-lightbox__close:hover { background: rgba(255, 255, 255, .25); } .events-more { margin-top: 40px; text-align: center; } .month-header { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.9rem; margin-top: 55px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--mbb-accent-light-rgb), .1); font-weight: normal; } .mbb-empty { color: var(--mbb-text-dim); font-style: italic; padding: 40px 0; text-align: center; } /* ---------- BUTTONS ---------- */ .btn { display: inline-block; font-family: var(--mbb-font-display); font-size: 1.9rem; color: var(--mbb-accent-light); padding: 14px 42px; border: 1px solid rgba(var(--mbb-accent-light-rgb), .3); border-radius: 4px; text-decoration: none; transition: all .3s; background: transparent; cursor: pointer; } .btn:hover { background: rgba(var(--mbb-accent-light-rgb), .07); border-color: var(--mbb-accent-light); color: var(--mbb-accent-bright); } .btn--small { font-size: 1.3rem; padding: 8px 24px; } /* Ausverkauft-Badge — nicht klickbar, in Rot mit rotem Rahmen */ .btn--soldout { color: var(--mbb-soldout); border-color: var(--mbb-soldout); background: rgba(214, 69, 61, .08); cursor: not-allowed; letter-spacing: .02em; } .btn--soldout:hover { color: var(--mbb-soldout-bright); border-color: var(--mbb-soldout-bright); background: rgba(214, 69, 61, .14); } /* ---------- KONTAKT ---------- */ .kontakt-section { text-align: center; } .kontakt-section p { color: var(--mbb-text-soft); font-size: 1.15rem; max-width: 620px; margin: 0 auto 15px; } .kontakt-section a { color: var(--mbb-accent-light); } .kontakt-section a:hover { color: var(--mbb-accent-bright); } .social-links { display: flex; justify-content: center; gap: 25px; margin-top: 40px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid rgba(var(--mbb-accent-light-rgb), .2); border-radius: 50%; color: var(--mbb-accent-light); transition: all .3s; } .social-links a:hover { border-color: var(--mbb-accent); color: var(--mbb-accent); transform: translateY(-3px); } .social-links svg { width: 24px; height: 24px; } /* ---------- NEWSLETTER ---------- */ .newsletter-section { background: linear-gradient(135deg, var(--mbb-bg-card-1), var(--mbb-bg-card-2)); border: 1px solid rgba(var(--mbb-accent-light-rgb), .08); border-radius: 6px; padding: 55px 45px; text-align: center; max-width: 720px; margin: 0 auto; } .newsletter-section h3 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 2.4rem; margin-bottom: 12px; font-weight: normal; } .newsletter-section p { color: var(--mbb-text-soft); margin-bottom: 28px; font-size: 1.05rem; } .newsletter-form { display: flex; gap: 12px; max-width: 460px; margin: 0 auto; } .newsletter-form input[type="email"] { flex: 1; padding: 14px 20px; background: var(--mbb-bg-input); border: 1px solid rgba(var(--mbb-accent-light-rgb), .15); border-radius: 4px; color: var(--mbb-text); font-family: var(--mbb-font-body); font-size: 1rem; outline: none; transition: border-color .3s; } .newsletter-form input[type="email"]::placeholder { color: var(--mbb-text-placehold); } .newsletter-form input[type="email"]:focus { border-color: var(--mbb-accent-light); } .newsletter-form button { font-family: var(--mbb-font-display); font-size: 1.5rem; color: var(--mbb-accent-light); background: transparent; padding: 14px 30px; border: 1px solid rgba(var(--mbb-accent-light-rgb), .3); border-radius: 4px; cursor: pointer; transition: all .3s; white-space: nowrap; } .newsletter-form button:hover { background: rgba(var(--mbb-accent-light-rgb), .08); color: var(--mbb-accent-bright); } .newsletter-consent { margin: 16px auto 0; max-width: 460px; font-size: .8rem; line-height: 1.5; color: var(--mbb-text-soft); } .newsletter-consent a { color: var(--mbb-accent-light); text-decoration: underline; } .newsletter-consent a:hover { color: var(--mbb-accent-bright); } .footer-newsletter-consent { margin-top: 8px; font-size: .72rem; color: var(--mbb-text-faint); } /* ---------- ALBUM GRID ---------- */ .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px; } .album-card { background: linear-gradient(145deg, var(--mbb-bg-card-1), var(--mbb-bg-card-2)); border-radius: 5px; overflow: hidden; transition: all .3s; border: 1px solid rgba(var(--mbb-accent-light-rgb), .04); } .album-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,.45); border-color: rgba(var(--mbb-accent-rgb), .25); } .album-card img { width: 100%; aspect-ratio: 1; object-fit: cover; } .album-card-info { padding: 16px; } .album-card-info h4 { color: var(--mbb-text); font-size: 1rem; font-weight: normal; margin-bottom: 4px; } .album-card-info .year { color: var(--mbb-text-dim); font-size: .85rem; } .album-card-info .btn--small { margin-top: 10px; font-size: 1.15rem; padding: 5px 16px; display: inline-block; } /* ---------- MUSIKER ---------- */ .musiker-full { margin-bottom: 80px; } .musiker-full-header { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; margin-bottom: 30px; } .musiker-full-header img { width: 280px; height: 350px; object-fit: cover; border-radius: 5px; box-shadow: 0 15px 40px rgba(0,0,0,.5); } .musiker-full-header h3 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 2.8rem; margin-bottom: 5px; font-weight: normal; } .musiker-full-header .role { color: var(--mbb-accent); font-style: italic; font-size: 1.15rem; margin-bottom: 20px; display: block; } .musiker-full p { color: var(--mbb-text-muted); font-size: 1.1rem; line-height: 1.85; margin-bottom: 16px; text-align: justify; } .musiker-bio p { color: var(--mbb-text-muted); font-size: 1.1rem; line-height: 1.85; margin-bottom: 16px; text-align: justify; } .musiker-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--mbb-accent-light-rgb), .12), transparent); margin: 60px 0; } .musiker-photos { display: flex; flex-direction: column; gap: 16px; align-items: center; flex-wrap: wrap; } .musiker-full--compact { margin-bottom: 50px; } .musiker-full--compact .musiker-full-header { margin-bottom: 0; align-items: center; } /* Special Guest / Mehrfach-Fotos (z. B. Ludwig Seuss: Piano + Akkordeon) */ .musiker-full-header.has-multi { grid-template-columns: 400px 1fr; } .musiker-full-header.has-multi .musiker-photos { flex-direction: row; justify-content: flex-start; } .musiker-full-header.has-multi .musiker-photos img { width: 190px; height: 250px; } /* ---------- BRAND ---------- */ .mbb-brand-red { color: #9F1D2C; font-weight: bold; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.55); } /* ---------- CONTACT ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .contact-single { max-width: 540px; margin: 0 auto; } /* Kontakt-Unterseite: Infos links, Buchungsformular rechts */ .kontakt-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 55px; align-items: start; } .kontakt-layout--single { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; } .kontakt-info .contact-card { margin-bottom: 0; } .kontakt-social { justify-content: flex-start; margin-top: 26px; gap: 18px; } .kontakt-form { min-width: 0; } .kontakt-form .section-header { margin-bottom: 4px; } .kontakt-form .mbb-ct-form { margin-top: 18px; max-width: none; } @media (max-width: 880px) { .kontakt-layout { grid-template-columns: 1fr; gap: 38px; } .kontakt-social { justify-content: center; } } .contact-card { background: linear-gradient(145deg, var(--mbb-bg-card-1), var(--mbb-bg-card-2)); padding: 38px; border-radius: 5px; border-left: 3px solid var(--mbb-accent); } .contact-card h3 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.9rem; margin-bottom: 20px; font-weight: normal; } .contact-card p { color: var(--mbb-text-muted); margin-bottom: 12px; line-height: 1.9; font-size: 1.05rem; } .contact-card a { color: var(--mbb-accent-light); } .contact-card a:hover { color: var(--mbb-accent-bright); } .musiker-contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; } .musiker-contact-item { background: rgba(var(--mbb-bg-edge-rgb), .35); padding: 22px; border-radius: 5px; border-bottom: 2px solid rgba(var(--mbb-accent-rgb), .18); } .musiker-contact-item h4 { color: var(--mbb-text); margin-bottom: 8px; font-weight: normal; font-size: 1.05rem; } .musiker-contact-item a { color: var(--mbb-accent-light); font-size: .95rem; } /* ---------- PAGE HERO (Subpages) ---------- */ .page-hero { padding: 110px 0 65px; background: linear-gradient(180deg, var(--mbb-bg-soft) 0%, transparent 100%); text-align: center; } .page-hero h1 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: clamp(3.2rem, 6vw, 5.2rem); text-shadow: 2px 2px 6px rgba(0,0,0,.6); margin-bottom: 15px; font-weight: normal; } .page-hero p { color: var(--mbb-text-dim); font-size: 1.2rem; max-width: 620px; margin: 0 auto; } /* ---------- ALBUM DETAIL ---------- */ .album-detail { display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: start; background: linear-gradient(145deg, var(--mbb-bg-card-1), var(--mbb-bg-card-2)); border-radius: 5px; padding: 30px; margin-bottom: 30px; border-left: 3px solid var(--mbb-accent); transition: all .3s; } .album-detail:hover { border-left-color: var(--mbb-accent-light); box-shadow: 0 10px 30px rgba(0,0,0,.3); } .album-detail img { width: 250px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; } .album-detail h4 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.8rem; margin-bottom: 5px; font-weight: normal; } .album-detail .year { color: var(--mbb-accent); font-size: .9rem; display: block; margin-bottom: 12px; } .album-detail p { color: var(--mbb-text-soft); font-size: .95rem; margin-bottom: 15px; } .album-detail .btn { font-size: 1.4rem; padding: 8px 25px; } /* ---------- ENTRY (Single Post / News) ---------- */ .entry { padding: 60px 0; } .entry-meta { color: var(--mbb-text-dim); font-size: .95rem; margin-bottom: 18px; } .entry-content p, .entry-content li { color: var(--mbb-text-muted); font-size: 1.05rem; } .entry-content h2, .entry-content h3 { color: var(--mbb-accent-light); font-family: var(--mbb-font-display); margin: 32px 0 16px; font-weight: normal; } .entry-content h2 { font-size: 2.4rem; } .entry-content h3 { font-size: 1.9rem; } .entry-content a { color: var(--mbb-accent-light); } .entry-content a:hover { color: var(--mbb-accent-bright); } .entry-content blockquote { border-left: 3px solid var(--mbb-accent); padding: 8px 22px; margin: 22px 0; color: var(--mbb-text-soft); font-style: italic; background: rgba(var(--mbb-bg-edge-rgb), .3); } .entry-thumbnail { margin-bottom: 30px; border-radius: 5px; overflow: hidden; } /* ---------- FOOTER ---------- */ .site-footer { background: linear-gradient(180deg, rgba(var(--mbb-bg-edge-rgb), .95), rgba(var(--mbb-bg-deep-rgb), .98)); border-top: 1px solid rgba(var(--mbb-accent-light-rgb), .05); padding: 65px 0 35px; } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-col h4 { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.5rem; margin-bottom: 15px; font-weight: normal; } .footer-col p { color: var(--mbb-text-faint); font-size: .9rem; line-height: 1.8; } .footer-col a { color: var(--mbb-text-dim); font-size: .9rem; display: block; margin-bottom: 7px; transition: color .3s; } .footer-col a:hover { color: var(--mbb-accent-light); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 28px; border-top: 1px solid rgba(var(--mbb-accent-light-rgb), .04); } .footer-bottom p { margin: 0; color: var(--mbb-text-faint); font-size: .85rem; } .footer-bottom a { color: var(--mbb-text-dim); } .footer-bottom a:hover { color: var(--mbb-accent-light); } /* Theme-Toggle (Dark/Light) */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 1px solid rgba(var(--mbb-accent-light-rgb), .18); border-radius: 999px; color: var(--mbb-text-dim); font-family: var(--mbb-font-body); font-size: .78rem; letter-spacing: .04em; cursor: pointer; transition: color .25s ease, border-color .25s ease, background-color .25s ease; } .theme-toggle:hover { color: var(--mbb-accent-light); border-color: rgba(var(--mbb-accent-light-rgb), .35); background: rgba(var(--mbb-accent-light-rgb), .05); } .theme-toggle:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; } .theme-toggle__icon { display: inline-flex; width: 16px; height: 16px; color: var(--mbb-accent-light); } .theme-toggle__icon svg { width: 100%; height: 100%; display: block; } .theme-toggle__icon--moon { display: none; } .theme-toggle__label--alt { display: none; } :root[data-theme="light"] .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--moon { display: inline-flex; } :root[data-theme="light"] .theme-toggle__label { display: none; } :root[data-theme="light"] .theme-toggle__label--alt { display: inline; } /* Floating-Bedienfeld unten rechts: Sprache (Flagge) + Hell/Dunkel */ .mbb-floating-controls { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .mbb-fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(var(--mbb-bg-edge-rgb), .92); border: 1px solid rgba(var(--mbb-accent-light-rgb), .22); color: var(--mbb-accent-light); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .2s ease, border-color .25s ease, background-color .25s ease; text-decoration: none; overflow: hidden; } .mbb-fc-btn:hover { transform: translateY(-2px); border-color: rgba(var(--mbb-accent-light-rgb), .5); } .mbb-fc-btn:focus-visible { outline: 2px solid var(--mbb-accent); outline-offset: 2px; } .mbb-fc-icon { display: inline-flex; width: 20px; height: 20px; } .mbb-fc-icon svg { width: 100%; height: 100%; display: block; } .mbb-fc-icon--moon { display: none; } :root[data-theme="light"] .mbb-fc-icon--sun { display: none; } :root[data-theme="light"] .mbb-fc-icon--moon { display: inline-flex; } .mbb-fc-lang .mbb-flag { display: inline-flex; width: 26px; height: 26px; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.25); } .mbb-fc-lang .mbb-flag svg { width: 100%; height: 100%; display: block; } /* Beschriftungen (Desktop) */ .mbb-fc-label { font-weight: 600; font-size: .92rem; line-height: 1; white-space: nowrap; } .mbb-fc-label--alt { display: none; } :root[data-theme="light"] .mbb-fc-theme .mbb-fc-label { display: none; } :root[data-theme="light"] .mbb-fc-theme .mbb-fc-label--alt { display: inline; } /* Am Handy: nur Icon/Flagge, keine Beschriftung -> runde Buttons */ @media (max-width: 600px) { .mbb-fc-btn { width: 42px; height: 42px; padding: 0; gap: 0; } .mbb-floating-controls .mbb-fc-label { display: none !important; } } @media (max-width: 600px) { .footer-bottom { justify-content: center; text-align: center; } } .footer-newsletter { margin-top: 12px; } .footer-newsletter form { display: flex; gap: 8px; } .footer-newsletter input[type="email"] { flex: 1; padding: 10px 14px; background: var(--mbb-bg-input); border: 1px solid rgba(var(--mbb-accent-light-rgb), .1); border-radius: 4px; color: var(--mbb-text); font-size: .85rem; outline: none; } .footer-newsletter input[type="email"]::placeholder { color: var(--mbb-text-faint); } .footer-newsletter input[type="email"]:focus { border-color: rgba(var(--mbb-accent-light-rgb), .25); } .footer-newsletter button { padding: 10px 18px; background: transparent; border: 1px solid rgba(var(--mbb-accent-light-rgb), .15); border-radius: 4px; color: var(--mbb-accent-light); font-family: var(--mbb-font-display); font-size: 1.15rem; cursor: pointer; transition: all .3s; } .footer-newsletter button:hover { background: rgba(var(--mbb-accent-light-rgb), .05); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1200px) { .page-box::before, .page-box::after { display: none; } } @media (max-width: 992px) { /* Etwas breitere Braunstreifen, damit das Menü weiterhin lesbar bleibt */ .hero-bleed .hero-image { flex: 0 0 52%; width: 52%; } .hero-bleed .edge-fade-left { flex: 0 0 24%; } .hero-bleed .edge-fade-right { flex: 0 0 24%; } .nav-overlay { width: 24%; right: 2vw; padding: 20px 20px 20px 16px; } .nav-overlay a { font-size: clamp(1.6rem, 3.2vw, 2.4rem); } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .musiker-full-header { grid-template-columns: 220px 1fr; } .album-detail { grid-template-columns: 200px 1fr; } } @media (max-width: 768px) { .main-nav { display: none; } .hamburger { display: flex; } .container { padding: 0 22px; } .content-section { padding: 55px 0; } .news-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .info-content { grid-template-columns: 1fr; gap: 30px; } .about-figure--right, .about-figure--left { float: none; width: 100%; max-width: 480px; margin: 0 auto 26px; } .info-about-article p { text-align: left; } .info-about-article .about-tagline { font-size: 1.9rem; } .info-cruise { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; margin-top: 50px; } .info-cruise-media { order: -1; } .album-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .events-table th, .events-table td { padding: 14px 10px; font-size: .95rem; } /* Hero: nur Bild – Navigation läuft mobil ausschließlich über den Hamburger-Header oben. Das Hero-Menüband entfällt. */ .hero-bleed { flex-direction: column; padding: 0; } .hero-bleed .hero-image { flex: 0 0 auto; width: 100%; } .hero-bleed .edge-fade-left, .hero-bleed .edge-fade-right { display: none; } .nav-overlay { display: none; } .scroll-indicator { display: none; } /* Hamburger-Header mobil IMMER sichtbar (auch auf der Startseite ganz oben). Überschreibt das per JS gesetzte [hidden] → kein Ein-/Ausblenden beim Scrollen mehr und damit kein „Zittern" beim Öffnen des Menüs. */ #mbb-sticky-nav[hidden] { display: block; } /* Tagline am Bild-Unterrand verankern (Bild = 100vw breit, Verhältnis 1500:1626). Etwas höher und leicht nach rechts versetzt. */ .hero-tagline { left: 0; right: auto; width: 100%; top: calc(100vw * 1626 / 1500 - 4.4rem); bottom: auto; justify-content: center; transform: translateX(26px); padding: 0 16px; gap: .22em; } .hero-tagline__word { font-size: 1.4rem; } .hero-tagline__big { font-size: 1.6rem; } .newsletter-section { padding: 35px 22px; } .newsletter-form { flex-direction: column; } .musiker-full-header { grid-template-columns: 1fr; text-align: center; } .musiker-full-header img { width: 220px; height: 280px; margin: 0 auto; } .musiker-full-header.has-multi { grid-template-columns: 1fr; } .musiker-full-header.has-multi .musiker-photos { justify-content: center; } .musiker-full-header.has-multi .musiker-photos img { width: 190px; height: 250px; } .page-hero { padding: 75px 0 45px; } .album-detail { grid-template-columns: 1fr; } .album-detail img { width: 100%; max-width: 250px; margin: 0 auto; } } @media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } .events-table .act { display: none; } .album-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .musiker-contact-list { grid-template-columns: 1fr; } /* Events-Tabelle: auf schmalen Screens Spalten nach Inhalt statt fester Prozentbreiten – sonst brechen Header wie „DATUM"/„UHRZEIT" zeichenweise um. */ .events-table--fixed { table-layout: auto; } .events-table--fixed th, .events-table--fixed td { width: auto; overflow-wrap: normal; word-break: normal; } .events-table--fixed th { white-space: nowrap; } .events-table th, .events-table td { padding: 12px 7px; font-size: .85rem; } .events-table .date { white-space: nowrap; } /* Flyer mobil etwas kleiner, aber weiterhin einheitliche Größe */ .event-flyer { width: 38px; height: 54px; } .events-table .event-flyer-cell { padding-right: 4px; padding-left: 4px; } } /* ---------- SPECIAL GUEST ---------- */ .musiker-guest-heading { font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 2.4rem; font-weight: normal; text-align: center; margin: 20px 0 50px; padding-top: 40px; border-top: 1px solid rgba(var(--mbb-accent-light-rgb), .12); } .musiker-full.is-guest .musiker-full-header img { border: 1px solid rgba(var(--mbb-accent-rgb), .35); } /* --- Musiker-Übersicht (Collage oben) ----------------------------------- */ .musiker-overview { max-width: 900px; margin: 0 auto; } /* Obere Reihe: Daniel/Didi je 1/2 hoch (links), Herfried + Erik 1/1 hoch */ .musiker-ov-top { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "daniel herfried erik" "didi herfried erik"; gap: 26px 30px; align-items: start; margin-bottom: 36px; } .ov-daniel { grid-area: daniel; } .ov-didi { grid-area: didi; } .ov-herfried { grid-area: herfried; } .ov-erik { grid-area: erik; } .ov-daniel .musiker-ov-photo img, .ov-didi .musiker-ov-photo img { aspect-ratio: 3 / 2; } /* halbhoch, Querformat */ .ov-herfried .musiker-ov-photo img, .ov-erik .musiker-ov-photo img { aspect-ratio: 3 / 4; } /* vollhoch, Hochformat */ /* Untere Reihe: Siggi | Ludwig (zwei Fotos, ein gemeinsamer Name) */ .musiker-ov-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; align-items: start; } .ov-siggi .musiker-ov-photo img { aspect-ratio: 3 / 4; } .ov-ludwig-duo { grid-column: 2 / 4; } .ov-ludwig-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .ov-ludwig-photos .musiker-ov-photo img { aspect-ratio: 3 / 4; } .ov-ludwig-name { display: block; text-align: center; margin-top: 14px; font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.85rem; line-height: 1.05; } .musiker-ov-item { display: block; text-decoration: none; color: inherit; } .musiker-ov-photo { display: block; overflow: hidden; border-radius: 5px; box-shadow: 0 14px 36px rgba(0,0,0,.5); } .musiker-ov-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s ease; } .musiker-ov-item:hover .musiker-ov-photo img { transform: scale(1.04); } .musiker-ov-caption { display: block; text-align: center; margin-top: 12px; } .musiker-ov-caption .name { display: block; font-family: var(--mbb-font-display); color: var(--mbb-accent-light); font-size: 1.85rem; line-height: 1.05; transition: color .3s; } .musiker-ov-item:hover .musiker-ov-caption .name { color: var(--mbb-accent-bright); } .musiker-ov-caption .inst { display: block; color: var(--mbb-accent); font-style: italic; font-size: .95rem; margin-top: 3px; } .musiker-overview-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--mbb-accent-light-rgb), .18), transparent); margin: 70px 0 60px; } @media (max-width: 760px) { .musiker-ov-top { grid-template-columns: repeat(2, 1fr); grid-template-areas: none; gap: 22px; } .musiker-ov-top .musiker-ov-item { grid-area: auto; } .ov-daniel .musiker-ov-photo img, .ov-didi .musiker-ov-photo img { aspect-ratio: 3 / 4; } .musiker-ov-bottom { grid-template-columns: 1fr; justify-items: center; gap: 30px; } .ov-siggi { width: 100%; max-width: 260px; } .ov-ludwig-duo { grid-column: auto; width: 100%; } } @media (max-width: 440px) { .musiker-ov-top { grid-template-columns: 1fr; } .ov-daniel .musiker-ov-photo img, .ov-didi .musiker-ov-photo img { aspect-ratio: 3 / 2; } .ov-ludwig-photos { grid-template-columns: 1fr; } } /* ---------- PRESSE DOWNLOADS (Artikel als PDF) ---------- */ .presse-downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } /* 3 nebeneinander ab Tablet/Desktop, 2 auf kleinen, 1 auf Mini-Screens */ @media (max-width: 600px) { .presse-downloads { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 380px) { .presse-downloads { grid-template-columns: 1fr; } } .presse-download { display: flex; flex-direction: column; text-decoration: none; background: linear-gradient(145deg, var(--mbb-bg-card-1), var(--mbb-bg-card-2)); border: 1px solid rgba(var(--mbb-accent-light-rgb), .06); border-radius: 5px; overflow: hidden; transition: all .3s; } .presse-download:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,.45); border-color: rgba(var(--mbb-accent-rgb), .3); } .presse-download__thumb { position: relative; display: block; background: #0c0a05; } .presse-download__thumb img { width: 100%; height: 230px; object-fit: cover; object-position: top center; display: block; } .presse-download__badge { position: absolute; top: 10px; right: 10px; background: var(--mbb-accent); color: #0c0a05; font-family: var(--mbb-font-body); font-size: .7rem; font-weight: bold; letter-spacing: .08em; padding: 3px 9px; border-radius: 3px; } .presse-download__meta { padding: 16px 18px 20px; } .presse-download__title { display: block; color: var(--mbb-text); font-size: 1rem; line-height: 1.4; } .presse-download__source { display: block; color: var(--mbb-text-dim); font-size: .85rem; font-style: italic; margin-top: 6px; }