/* ============================================================ 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: 1140px; /* 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 { 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; } .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 42px; } /* ---------- 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; 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%; object-fit: contain; } .hero-bleed .edge-fade-right { flex: 0 0 22%; 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; } /* 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); } /* ---------- INFO ---------- */ .info-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; } .info-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 { color: var(--mbb-text-muted); font-size: 1.1rem; margin-bottom: 20px; text-align: justify; } .info-text p strong { color: var(--mbb-text); } .info-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); } /* ---------- 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; } .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); } /* ---------- 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; } /* ---------- CONTACT ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .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; } @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; } .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: Stack — Bild oben, Menü als Band darunter */ .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 { position: relative; top: auto; right: auto; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background: var(--mbb-hero-band); padding: 15px 12px; gap: 2px 12px; } .nav-overlay a { font-size: 1.6rem; padding: 3px 6px; color: #FCF5F2; } .scroll-indicator { display: none; } .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; } .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; } }