/* Werbegemeinschaft Letmathe – Frontend Farben kommen als CSS-Variablen aus der config.php (inline im ) */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-y: scroll; scrollbar-gutter: stable; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 1.05rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--primary); } h1, h2, h3 { line-height: 1.25; color: var(--text); } h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 1rem; } h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); } .wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .wrap-narrow { max-width: 46rem; } .lead { font-size: 1.15rem; color: var(--text-muted); } .skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 8px rgba(0,0,0,.04); } .header-inner { display: flex; align-items: center; gap: 1.5rem; padding-top: .6rem; padding-bottom: .6rem; transition: padding .25s ease; } .brand { display: flex; align-items: center; text-decoration: none; } /* Ruhezustand: großes Logo, das als Badge unter die Menüleiste hinausragt */ .brand img { display: block; width: auto; height: 100px; margin-bottom: -52px; position: relative; z-index: 5; border-radius: 0 0 12px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: height .25s ease, margin-bottom .25s ease, box-shadow .25s ease, border-radius .25s ease; } /* Beim Scrollen schrumpft der fixierte Header samt Logo und Menüleiste */ .site-header.scrolled .header-inner { padding-top: .3rem; padding-bottom: .3rem; } .site-header.scrolled .brand img { height: 34px; margin-bottom: 0; box-shadow: none; border-radius: 0; } .site-header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.1); } @media (max-width: 56rem) { .brand img { height: 68px; margin-bottom: -26px; } } .brand-text { font-weight: 800; font-size: 1.15rem; color: var(--text); } .main-nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; } .main-nav a { padding: .45rem .8rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; } .main-nav a:hover { background: var(--bg-soft); color: var(--primary); } .main-nav a.active { color: var(--primary); background: var(--bg-soft); } .nav-cta { margin-left: .5rem; padding: .45rem 1rem !important; border-radius: 99px; background: var(--primary); color: #fff !important; font-weight: 700; text-decoration: none; } .nav-cta:hover { background: var(--primary-dark) !important; color: #fff !important; } .nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: .5rem; } .nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; } @media (max-width: 56rem) { .nav-toggle { display: block; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); padding: .75rem 1.25rem 1rem; border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 8px 16px rgba(0,0,0,.08); } .main-nav.open { display: flex; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } } /* Hero */ .hero { position: relative; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black)); color: #fff; padding: clamp(3.5rem, 10vw, 7rem) 0; overflow: hidden; } .hero-image { background-size: cover; background-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.55) 55%, rgba(10,10,12,.25) 100%); } .hero-image .hero-overlay { background: linear-gradient(100deg, rgba(10,10,12,.85) 0%, rgba(10,10,12,.55) 50%, color-mix(in srgb, var(--primary) 25%, transparent) 100%); } .hero-content { position: relative; z-index: 1; } .hero h1 { color: #fff; margin: .25rem 0 .75rem; font-size: clamp(1.9rem, 5vw, 3rem); text-shadow: 0 2px 18px rgba(0,0,0,.35); } .hero-kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .95rem; color: var(--primary); margin: 0; background: rgba(255,255,255,.92); display: inline-block; padding: .3rem .8rem; border-radius: 99px; } .hero-sub { font-size: 1.2rem; max-width: 40rem; opacity: .96; text-shadow: 0 1px 10px rgba(0,0,0,.4); } .hero-actions { display: flex; gap: .75rem; margin-top: 1.75rem; flex-wrap: wrap; } /* Zahlen-Band: schwarz, weiße Schrift, Magenta-Kreis um die Werte */ .stats-band { background: var(--accent); color: #fff; } .stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.25rem; padding: 2rem 1.25rem; text-align: center; } .stat-number { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin: 0 auto .6rem; border: 3px solid var(--primary); border-radius: 50%; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1; color: #fff; } .stat-label { font-size: .95rem; opacity: .92; } /* CTA-Band */ .cta-band { background: linear-gradient(120deg, var(--primary), var(--primary-dark)); color: #fff; } .cta-inner { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.25rem; max-width: 46rem; } .cta-band h2 { color: #fff; margin-top: 0; font-size: clamp(1.5rem, 3.5vw, 2rem); } .cta-band p { font-size: 1.1rem; opacity: .95; } .btn-light { background: #fff; color: var(--primary); } .btn-light:hover { background: var(--bg-soft); } /* Sanfte Einblend-Animationen (nur mit JS aktiv, respektiert reduzierte Bewegung) */ body.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } body.js .reveal.delay-1 { transition-delay: .12s; } body.js .reveal.delay-2 { transition-delay: .24s; } body.js .reveal.delay-3 { transition-delay: .36s; } body.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { body.js .reveal { opacity: 1; transform: none; transition: none; } } /* Buttons */ .btn { display: inline-block; padding: .65rem 1.3rem; border-radius: 10px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1rem; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); } .btn-ghost { border-color: currentColor; color: inherit; } .hero .btn-ghost { color: #fff; } .btn-ghost:hover { background: rgba(255,255,255,.12); } .section .btn-ghost { color: var(--primary); } .section .btn-ghost:hover { background: var(--bg-soft); } /* Sections */ .section { padding: clamp(2.5rem, 6vw, 4rem) 0; } .section-soft { background: var(--bg-soft); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .section-head h2 { margin: 0; } .section-sub { margin-top: 3rem; } /* Grids & Tiles */ .grid { display: grid; gap: 1.25rem; } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .tile { display: block; background: var(--bg); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 1.25rem; text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s; } .tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .tile h2, .tile h3 { margin: .25rem 0; font-size: 1.1rem; color: var(--text); } .tile-img { width: calc(100% + 2.5rem); margin: -1.25rem -1.25rem 1rem; border-radius: 14px 14px 0 0; aspect-ratio: 16/9; object-fit: cover; } .tile-date { color: var(--primary); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; } .tile-muted { color: var(--text-muted); font-size: .95rem; margin: .25rem 0 0; } /* Mitglieder */ .filter-input { width: 100%; max-width: 24rem; padding: .65rem 1rem; margin: 0 0 1.5rem; border: 1px solid rgba(0,0,0,.15); border-radius: 10px; font: inherit; } .tile-member { text-align: center; } .member-logo { height: 4.5rem; object-fit: contain; margin-bottom: .5rem; } .member-initial { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: .5rem; border-radius: 50%; background: var(--bg-soft); color: var(--primary); font-size: 1.8rem; font-weight: 800; } .member-name { font-size: 1rem !important; } .logo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; align-items: center; } .logo-strip a { display: grid; place-items: center; background: var(--bg); border-radius: 10px; padding: 1rem; min-height: 5.5rem; text-decoration: none; color: var(--text-muted); font-size: .85rem; text-align: center; border: 1px solid rgba(0,0,0,.06); } .logo-strip img { max-height: 3.5rem; object-fit: contain; } /* Detailseiten */ .detail-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; } .detail-head h1 { margin: 0; } .detail-logo { max-height: 6rem; max-width: 12rem; object-fit: contain; } .detail-img { border-radius: 14px; margin: 1rem 0; } .event-meta { font-size: 1.1rem; color: var(--text-muted); } .contact-box { background: var(--bg-soft); border-radius: 14px; padding: 1rem 1.5rem; margin: 1.5rem 0; } .contact-box h2 { font-size: 1.05rem; margin: 0 0 .5rem; } .contact-box p { margin: .25rem 0; } /* Termine */ .event-list { display: grid; gap: 1rem; } .event-row { display: flex; gap: 1.25rem; align-items: center; text-decoration: none; color: var(--text); background: var(--bg); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 1rem 1.25rem; transition: transform .15s, box-shadow .15s; } .event-row:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .event-date { display: grid; place-items: center; min-width: 4.5rem; padding: .5rem; background: var(--primary); color: #fff; border-radius: 10px; text-align: center; } .event-day { font-size: 1.5rem; font-weight: 800; line-height: 1; } .event-month { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; } .event-info h2 { margin: 0 0 .15rem; font-size: 1.15rem; } .past-events { padding-left: 1.2rem; } .past-events li { margin: .35rem 0; } /* Galerie */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; } .gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; transition: opacity .15s; } .gallery-item:hover img { opacity: .85; } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 2rem; cursor: zoom-out; } .lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 6px; } /* Inhalte aus dem WYSIWYG-Editor */ .prose { max-width: 46rem; } .prose img { border-radius: 10px; } .prose h2, .prose h3 { margin-top: 1.75em; } .prose a { color: var(--primary); } .prose blockquote { border-left: 4px solid var(--primary); margin: 1.25rem 0; padding: .25rem 0 .25rem 1.25rem; color: var(--text-muted); } /* Pagination */ .pagination { display: flex; gap: .4rem; margin-top: 2rem; } .pagination a, .pagination .current { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 8px; text-decoration: none; border: 1px solid rgba(0,0,0,.12); } .pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; } /* Consent-Banner (nur aktiv, wenn Google Analytics konfiguriert ist) */ .consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 1rem; display: none; } .consent-banner.open { display: block; } .consent-card { max-width: 44rem; margin: 0 auto; background: var(--bg); color: var(--text); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.25); padding: 1.25rem 1.5rem; border: 1px solid rgba(0,0,0,.08); } .consent-card p { margin: 0 0 .75rem; font-size: .95rem; } .consent-title { font-weight: 800; font-size: 1.05rem; } .consent-links { font-size: .9rem; } .consent-actions { display: flex; gap: .75rem; flex-wrap: wrap; } /* Beide Buttons bewusst identisch gestaltet (keine optische Lenkung / Dark Pattern) */ .btn-consent { flex: 1 1 10rem; padding: .7rem 1rem; border-radius: 10px; cursor: pointer; background: var(--bg-soft); color: var(--text); border: 2px solid var(--text); font: inherit; font-weight: 700; font-size: 1rem; text-align: center; } .btn-consent:hover { background: var(--text); color: var(--bg); } /* Footer */ .site-footer { background: var(--accent); color: #fff; margin-top: 2rem; } .footer-inner { display: flex; gap: 2.5rem; flex-wrap: wrap; padding-top: 2.5rem; padding-bottom: 1.5rem; } .footer-brand { font-weight: 800; font-size: 1.1rem; margin: 0 0 .25rem; } .footer-claim { opacity: .8; margin: 0; } .footer-social, .footer-nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } .footer-nav { margin-left: auto; } .site-footer a { color: #fff; opacity: .9; text-decoration: none; } .site-footer a:hover { opacity: 1; text-decoration: underline; } .footer-meta { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem; padding-bottom: 1.5rem; } .footer-meta p { margin: 0; font-size: .9rem; opacity: .7; } @media (max-width: 40rem) { .footer-inner { flex-direction: column; gap: 1.25rem; } .footer-nav { margin-left: 0; } }