/* Brandenburgtag 2027 — Prototyp-Stile Aufbau: 1 Basis · 2 Layout/Sektionen · 3 Kopf (Ticker, Header, Navigation) · 4 Bausteine · 5 Seitenmodule · 6 Footer · 7 Prototyp-Werkzeuge Klassen mit Präfix bbt- entsprechen den Komponenten im Designsystem (Button, SectionIntro, DateBadge, TopicCard, HotelCard, ContactCard, Countdown, Ticker). */ /* ---------- 1 Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 80px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--White); color: var(--Anthrazit); font-family: var(--font-sans); font-size: 16px; line-height: 24px; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--White), 0 0 0 6px var(--Anthrazit); } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 20px; background: var(--Anthrazit); color: var(--White); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 16px; } /* Typo-Helfer (aus tokens.json) */ .display { font-family: var(--font-display); font-weight: 400; font-size: 90px; line-height: 1; color: var(--Rot); } .headline-hero { font-size: 90px; line-height: 1; font-weight: 700; text-transform: uppercase; } .headline-section { font-size: 50px; line-height: 55px; font-weight: 700; text-transform: uppercase; } .headline-sub { font-size: 40px; line-height: 44px; font-weight: 700; text-transform: uppercase; } .subhead { font-size: 20px; line-height: 24px; font-weight: 600; } .lead { font-size: 19px; line-height: 29px; color: var(--Grau); } .body-l { font-size: 18px; line-height: 27px; } .body-s { font-size: 14px; line-height: 21px; } .caption { font-size: 13px; line-height: 16px; } .bbt-eyebrow { margin: 0 0 12px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } @media (max-width: 900px) { .display { font-size: 48px; line-height: 48px; } .headline-hero { font-size: 44px; line-height: 46px; } .headline-section { font-size: 28px; line-height: 32px; } .headline-sub { font-size: 24px; line-height: 28px; } .lead { font-size: 15px; line-height: 23px; } .body-l { font-size: 16px; line-height: 24px; } } /* ---------- 2 Layout und Sektionen ---------- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .container--narrow { max-width: calc(820px + 2 * var(--gutter)); } .section { position: relative; padding: var(--section-y) 0; overflow: hidden; } .section--sand { background: #f6f5f1; } .section--green { background: var(--Darkgreen); color: var(--White); } /* A11y: Weiß auf Green nur 3,2:1 → Fläche Darkgreen (5,4:1) */ .section--red { background: var(--Rot); color: var(--White); } .section--red-pattern { background: var(--Rot) url("../form/muster-rot.svg") center / 900px auto repeat; color: var(--White); } .section--curve-bottom { border-radius: 0 0 50% 50% / 0 0 90px 90px; } @media (max-width: 900px) { .section--curve-bottom { border-radius: 0 0 50% 50% / 0 0 40px 40px; } } .section__leaves { position: absolute; inset: 0; pointer-events: none; } .section__leaves span { position: absolute; background: rgba(0,0,0,.14); border-radius: 100% 0; } /* dunkler als Darkgreen, damit Weiß überall ≥ 4,5:1 bleibt */ .section__leaves span:nth-child(1) { width: 900px; height: 900px; left: -380px; top: -200px; transform: rotate(18deg); } .section__leaves span:nth-child(2) { width: 700px; height: 700px; right: -260px; bottom: -340px; transform: rotate(-12deg); } .grid { display: grid; gap: var(--space-grid); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 60px; align-items: center; } @media (max-width: 1000px) { .split { grid-template-columns: 1fr; gap: 32px; } } .stack-xl > * + * { margin-top: 64px; } .center { text-align: center; } .mt-l { margin-top: 48px; } .mt-m { margin-top: 24px; } /* ---------- 3 Kopf: Ticker, Header, Navigation ---------- */ .bbt-ticker { position: relative; overflow: hidden; height: var(--height-ticker); display: flex; align-items: center; background: var(--Darkgreen); color: var(--White); font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .bbt-ticker--live { background: var(--Rot); } .bbt-ticker__label { position: relative; z-index: 2; display: none; align-items: center; gap: 8px; height: 100%; padding: 0 20px; background: var(--Rot-pressed); font-weight: 700; } .bbt-ticker--live .bbt-ticker__label { display: flex; } .bbt-ticker__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--White); animation: bbt-pulse 1.4s ease-in-out infinite; } .bbt-ticker__track { display: flex; animation: bbt-ticker 45s linear infinite; } .bbt-ticker:hover .bbt-ticker__track { animation-play-state: paused; } .bbt-ticker__run { display: flex; gap: 14px; padding-right: 14px; } @keyframes bbt-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bbt-pulse { 50% { opacity: .3; } } .bbt-ticker__toggle { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 100%; margin-left: auto; border: 0; background: rgba(0,0,0,.25); color: var(--White); cursor: pointer; } .bbt-ticker__toggle svg { width: 16px; height: 16px; } .bbt-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; } .bbt-ticker.is-paused .bbt-ticker__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .bbt-ticker__track, .bbt-ticker__dot, .tag--live::before { animation: none; } } @media (max-width: 900px) { .bbt-ticker { height: 40px; font-size: 13px; } } .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--White); border-bottom: 1px solid transparent; transition: border-color .2s; } .site-header.is-scrolled { border-bottom-color: #e6e6e3; } .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: var(--header-h); } .site-header__inner > .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; } .site-header__logo { grid-column: 2; grid-row: 1; } .site-header__end { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; min-width: 0; } .bbt-btn.bbt-btn--compact { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 12px; font-size: 12px; line-height: 12px; letter-spacing: .03em; } .site-header__logo { flex: none; display: block; } .site-header__logo img { width: 230px; height: auto; } @media (max-width: 900px) { .site-header__logo img { width: 160px; } } .main-nav__list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .main-nav__link { position: relative; display: block; padding: 10px 14px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--Anthrazit); white-space: nowrap; } .main-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--Rot); transform: scaleX(0); transform-origin: left; transition: transform .2s; } .main-nav__link:hover { color: var(--Rot); } .main-nav__link:hover::after, .main-nav__link[aria-current="page"]::after { transform: scaleX(1); } .main-nav__link[aria-current="page"] { color: var(--Rot); } .main-nav__link--live { display: none; } .is-live .main-nav__link--live { display: flex; align-items: center; gap: 6px; color: var(--Rot); } .main-nav__link--live .bbt-ticker__dot { background: var(--Rot); } .nav-toggle { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 8px 12px 8px 0; border: 0; background: none; font: 600 14px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--Anthrazit); cursor: pointer; } .nav-toggle__bars { position: relative; width: 26px; height: 18px; } .nav-toggle__bars span { position: absolute; left: 0; right: 0; height: 3px; background: currentColor; transition: transform .2s, opacity .2s; } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 7.5px; } .nav-toggle__bars span:nth-child(3) { bottom: 0; } .nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Hauptnavigation: auf allen Bildschirmgrößen als Burger-Menü (Overlay) */ .main-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; display: none; overflow-y: auto; background: var(--Rot); padding: 48px var(--gutter) 64px; } .nav-open .main-nav { display: block; } .nav-open { overflow: hidden; } .main-nav__list, .main-nav__extra { max-width: var(--container, 1240px); margin-left: auto; margin-right: auto; } .main-nav__list { flex-direction: column; gap: 0; } .main-nav__link { padding: 18px 0; font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: .04em; color: var(--White); white-space: normal; } .main-nav__link::after { display: none; } .main-nav__link:hover, .main-nav__link[aria-current="page"] { color: var(--White); } .main-nav__link:hover, .main-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; } .main-nav__link:focus-visible { outline: 3px solid var(--White); outline-offset: 4px; box-shadow: none; } .is-live .main-nav__link--live { color: var(--White); } .main-nav__link--live .bbt-ticker__dot { background: var(--White); } .main-nav__extra { display: block; margin-top: 40px; } @media (max-width: 900px) { .main-nav { padding: 32px var(--gutter) 48px; } .main-nav__link { padding: 16px 0; font-size: 26px; line-height: 30px; } .main-nav__link:hover, .main-nav__link[aria-current="page"] { text-underline-offset: 6px; } .main-nav__extra { margin-top: 32px; } } @media (max-width: 640px) { .site-header__end { display: none; } .site-header__logo img { width: 140px; } } @media (max-width: 379px) { .site-header__inner { grid-template-columns: auto minmax(0, 1fr); } .site-header__logo { justify-self: end; } .site-header__logo img { width: 130px; } } /* ---------- 4 Bausteine ---------- */ /* Button (Designsystem: Button) */ .bbt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; } .bbt-btn--l { min-height: 67px; padding: 0 40px; font-size: 16px; line-height: 20px; } .bbt-btn--m { min-height: 44px; padding: var(--space-button-y) var(--space-button-x); font-size: 14px; line-height: 14px; } .bbt-btn--s { min-height: 32px; padding: 0 18px; font-size: 12px; line-height: 12px; } .bbt-btn--primary { background: var(--Rot); color: var(--White); } .bbt-btn--primary:hover { background: var(--Rot-hover); } .bbt-btn--primary:active { background: var(--Rot-pressed); } .bbt-btn--inverse { background: var(--White); color: var(--Rot); } .bbt-btn--inverse:hover { color: var(--Rot-hover); } .bbt-btn--ghost { background: transparent; color: var(--Anthrazit); box-shadow: inset 0 0 0 2px var(--Anthrazit); } .bbt-btn--ghost:hover { background: var(--Anthrazit); color: var(--White); } .bbt-btn:focus-visible { box-shadow: 0 0 0 3px var(--White), 0 0 0 6px var(--Anthrazit); } .btn-row { display: flex; flex-wrap: wrap; gap: 16px; } .center .btn-row, .btn-row--center { justify-content: center; } @media (max-width: 640px) { .bbt-btn--l { min-height: 56px; padding: 0 28px; font-size: 14px; } .btn-row .bbt-btn { white-space: normal; text-align: center; } } /* SectionIntro */ .bbt-intro { max-width: 820px; margin: 0 auto; text-align: center; } .bbt-intro--left { margin: 0; text-align: left; } .bbt-intro .bbt-eyebrow { color: var(--Rot); } .section--green .bbt-intro .bbt-eyebrow, .section--red .bbt-intro .bbt-eyebrow, .section--red-pattern .bbt-intro .bbt-eyebrow { color: var(--White); } .bbt-intro__text { margin-top: 24px; } .section--green .lead, .section--red .lead, .section--red-pattern .lead { color: var(--White); } .display-block { text-align: center; } .display-block .display { display: block; } /* DateBadge */ .bbt-date { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 200px; aspect-ratio: 317 / 333; color: var(--White); text-align: center; } /* Kundenentscheid: Weiß auf Farbe (bewusste Kontrast-Abweichung) */ .bbt-date--rot { color: var(--White); } .bbt-date svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bbt-date svg path { fill: var(--Orange-artwork); } .bbt-date--rot svg path { fill: var(--Rot); } .bbt-date--gruen svg path { fill: var(--Green); } .bbt-date--turkis svg path { fill: var(--Turkis); } .bbt-date__text { position: relative; display: flex; flex-direction: column; font-size: 40px; line-height: .95; font-weight: 700; } @media (max-width: 900px) { .bbt-date { width: 110px; } .bbt-date__text { font-size: 22px; } } /* Tag / Kategorie-Label */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--Anthrazit); color: var(--White); } .tag--musik { background: var(--Turkis); color: var(--Black); } .tag--familie { background: var(--Orange); color: var(--Black); } .tag--kulinarik { background: var(--Green); color: var(--Black); } .tag--land { background: var(--Magenta); color: var(--White); } .tag--show { background: var(--Rot); color: var(--White); } .tag--live { background: var(--Rot); color: var(--White); } .tag--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: bbt-pulse 1.4s ease-in-out infinite; } .tag--outline { background: transparent; color: var(--Anthrazit); box-shadow: inset 0 0 0 1.5px currentColor; } /* TopicCard */ .bbt-topic { position: relative; overflow: hidden; display: block; min-height: 560px; color: var(--White); text-decoration: none; background: var(--Turkis); } /* Weißer Text auf Originalfarben (Entscheidung Kunde 13.10.2026). Achtung: Weiß auf Turkis 2,8 · Orange 2,3 · Green 3,2 unterschreitet WCAG AA 4,5:1 */ .bbt-topic--turkis { background: var(--Turkis); } .bbt-topic--orange { background: var(--Orange); } .bbt-topic--gruen { background: var(--Green); } .bbt-topic--magenta { background: var(--Magenta); } .bbt-topic--rot { background: var(--Rot); } .bbt-topic__body { position: relative; z-index: 1; padding: var(--space-card); } .bbt-topic__title { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.12; font-weight: 700; text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; } .bbt-topic__text { margin-top: 12px; font-size: 17px; line-height: 25px; } .bbt-topic__media { position: absolute; inset: 0; } .bbt-topic__media img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%; object-fit: cover; transition: transform .4s; } a.bbt-topic:hover .bbt-topic__media img { transform: scale(1.04); } .shape-1 { clip-path: ellipse(90% 44% at 98% 92%); } .shape-2 { clip-path: ellipse(90% 44% at 99% 94%); } .shape-3 { clip-path: ellipse(108% 92% at 92% 138%); } .shape-4 { clip-path: ellipse(194% 417% at 89.5% 463%); } @media (max-width: 640px) { .bbt-topic { min-height: 480px; } .bbt-topic__title { font-size: 28px; line-height: 32px; } } /* Infokarte (Broschüren-Stil: eine stark gerundete Ecke = Blattform) */ .card { position: relative; display: flex; flex-direction: column; padding: var(--space-card); background: var(--White); color: var(--Anthrazit); } .card--leaf { border-radius: 0 120px 0 0; } /* Weißer Text auf allen farbigen Karten (Entscheidung Kunde 13.10.2026, unterschreitet AA auf Turkis/Orange/Green) */ .card--turkis { background: var(--Turkis); color: var(--White); } .card--orange { background: var(--Orange); color: var(--White); } .card--gruen { background: var(--Green); color: var(--White); } .card--magenta { background: var(--Magenta); color: var(--White); } .card--rot { background: var(--Rot); color: var(--White); } .card--darkgreen { background: var(--Darkgreen); color: var(--White); } .card--line { box-shadow: inset 0 0 0 2px var(--Anthrazit); } /* Farbige Infokarten (Anreise, Gut zu wissen, Service): obere rechte Ecke gerundet wie die Sponsoring-Pakete */ .card:is(.card--turkis, .card--orange, .card--gruen, .card--magenta, .card--rot, .card--darkgreen):not(.card--with-media) { border-radius: 0 90px 0 0; } .card__title { font-size: 26px; line-height: 30px; font-weight: 700; text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; } .card__text { margin-top: 12px; font-size: 16px; line-height: 24px; } .card__foot { margin-top: auto; padding-top: 24px; } .card__icon { width: 64px; height: 64px; margin-bottom: 20px; } /* HotelCard */ .bbt-hotel { display: flex; flex-direction: column; min-height: 470px; background: var(--White); color: var(--Anthrazit); } .bbt-hotel__img { width: 100%; height: 240px; object-fit: cover; clip-path: ellipse(95% 98% at 50% 0); } .bbt-hotel__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-card-s); } .bbt-hotel__title { font-size: 18px; line-height: 23px; font-weight: 700; } .bbt-hotel__text { margin-top: 12px; font-size: 14px; line-height: 21px; } .bbt-hotel__cta { margin-top: auto; padding-top: 20px; } /* Countdown */ .bbt-countdown { text-align: center; } .bbt-countdown__title { margin: 0 0 12px; font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--Rot); } .bbt-countdown__units { display: inline-flex; gap: 40px; } .bbt-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 1.6em; } .bbt-countdown__num { font-size: 104px; line-height: 1; font-weight: 700; color: var(--Black); font-variant-numeric: tabular-nums; } .bbt-countdown__label { margin-top: 8px; font-size: 11px; line-height: 14px; letter-spacing: .18em; text-transform: uppercase; } @media (max-width: 640px) { .bbt-countdown__units { gap: 16px; } .bbt-countdown__num { font-size: 44px; } .bbt-countdown__title { font-size: 36px; } } /* ContactCard */ .bbt-contact { text-align: center; font-size: 17px; line-height: 23px; } .bbt-contact__photo { position: relative; display: flex; align-items: center; justify-content: center; width: 186px; height: 160px; margin: 0 auto 16px; background: rgba(255,255,255,.18); color: var(--White); font-size: 40px; font-weight: 700; clip-path: url(#blob-round); } .bbt-contact__name { font-weight: 700; } .bbt-contact__reach { margin-top: 20px; } .bbt-contact a { display: inline-block; min-height: 26px; padding: 2px 0; text-decoration: none; } .bbt-contact a:hover { text-decoration: underline; } /* Galerie (Slider) */ .gallery { position: relative; } .gallery__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter) 0 max(var(--gutter), calc((100% - var(--container)) / 2)); scroll-padding-left: max(var(--gutter), calc((100% - var(--container)) / 2)); } /* startet bündig am Raster, rechts angeschnitten */ .gallery__track::-webkit-scrollbar { display: none; } .gallery__item { flex: none; width: min(560px, 80vw); margin: 0; scroll-snap-align: start; } .gallery__item img { width: 100%; aspect-ratio: 560 / 470; object-fit: cover; } .gallery__item figcaption { margin-top: 8px; font-size: 13px; line-height: 16px; } .gallery__nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; } .round-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--Rot); color: var(--White); cursor: pointer; } .round-btn:hover { background: var(--Rot-hover); } .round-btn svg { width: 22px; height: 22px; } /* Fakten-Balken (aus Banner/Großfläche) */ .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .fact { display: flex; align-items: baseline; gap: 10px; padding: 14px 26px; color: var(--White); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .fact strong { font-size: 40px; line-height: 1; } .fact span { font-size: 16px; } .fact--magenta { background: var(--Magenta); } .fact--gruen { background: var(--Darkgreen); } .fact--turkis { background: var(--Turkis); color: var(--Black); } .fact--rot { background: var(--Rot); } .fact--orange { background: var(--Orange-artwork); color: var(--Black); } @media (max-width: 640px) { .fact { padding: 10px 18px; } .fact strong { font-size: 28px; } .fact span { font-size: 13px; } } /* Hero Startseite */ .hero { position: relative; min-height: 760px; display: flex; align-items: center; justify-content: center; color: var(--White); text-align: center; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 110px 110px; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45); } /* A11y: Abdunklung für Textkontrast auf Foto */ .hero__claim { text-shadow: 0 1px 8px rgba(0,0,0,.6); } .hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 80px var(--gutter) 120px; } .hero__logo { width: min(620px, 80vw); } /* Hero: Claim in Schreibschrift statt Logo */ .hero__slogan { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 11vw, 96px); line-height: .95; color: var(--White); text-shadow: 0 2px 24px rgba(0,0,0,.35); } @media (min-width: 641px) and (max-width: 1279px) { .hero__slogan { font-size: 6.6vw; } } /* Platz für das Datums-Badge */ .hero__claim { margin-top: 20px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .hero__cta { margin-top: 48px; } .hero__date { position: absolute; z-index: 3; right: max(40px, calc((100vw - var(--container)) / 2)); top: 48px; } .hero__live { display: none; margin-top: 40px; } .is-live .hero__live { display: flex; } .is-live .hero__cta--before { display: none; } @media (max-width: 900px) { .hero { min-height: 560px; border-radius: 0 0 50% 50% / 0 0 40px 40px; } .hero__date { right: 16px; top: 16px; } .hero__inner { padding: 120px var(--gutter) 80px; } .hero__claim { font-size: 15px; line-height: 20px; } } /* Hero Unterseiten */ .page-hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; color: var(--White); overflow: hidden; border-radius: 0 0 50% 50% / 0 0 80px 80px; } .page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 70%); } .page-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 100px; } .page-hero__display { display: block; font-family: var(--font-display); font-size: 64px; line-height: 1; } .page-hero__title { margin-top: 8px; } .page-hero__date { position: absolute; z-index: 3; right: max(40px, calc((100vw - var(--container)) / 2)); top: 40px; } @media (max-width: 900px) { .page-hero { min-height: 340px; border-radius: 0 0 50% 50% / 0 0 36px 36px; } .page-hero__display { font-size: 38px; } .page-hero__inner { padding-bottom: 56px; } .page-hero__date { display: none; } } /* Unternavigation einer Seite (Sprungmarken) */ .subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--White); } .subnav__list { display: flex; gap: 8px; margin: 0; padding: 14px 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .subnav__list::-webkit-scrollbar { display: none; } .subnav a { display: block; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--Anthrazit); } .subnav a:hover { background: var(--Anthrazit); color: var(--White); } /* Schritte 1-2-3 */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid); margin: 0; padding: 0; list-style: none; } .steps li { counter-increment: step; position: relative; padding-top: 88px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 68px; height: 72px; background: url("../form/badge-magenta.svg") center / contain no-repeat; color: var(--White); font-size: 32px; font-weight: 700; } .steps li:nth-child(2)::before { background-image: url("../form/badge-gruen.svg"); } .steps li:nth-child(3)::before { background-image: url("../form/tropfen-tuerkis.svg"); } .steps h3 { font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 40px; } } /* Tabellen */ .table-wrap { overflow-x: auto; } .table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 21px; } .table th, .table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #d9d9d6; vertical-align: top; } .table thead th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 3px solid var(--Anthrazit); } .table td.num, .table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .table td.mid, .table th.mid { text-align: center; } .check { display: inline-block; width: 22px; height: 22px; border-radius: 50%; color: var(--White); font-size: 13px; line-height: 22px; text-align: center; font-weight: 700; } .dash { color: #6b6b67; } /* Pakete (Partner) */ .packages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .package { display: flex; flex-direction: column; min-height: 380px; padding: 28px 24px; color: var(--White); border-radius: 0 90px 0 0; } .package__name { font-size: 24px; line-height: 26px; font-weight: 700; text-transform: uppercase; } .package__text { margin-top: 14px; font-size: 15px; line-height: 21px; } .package__price { margin-top: auto; padding-top: 24px; font-size: 34px; line-height: 1; font-weight: 700; } .package__price small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; } .package--1 { background: var(--Orange); color: var(--Black); } .package--2 { background: var(--Magenta); } .package--3 { background: var(--Darkgreen); } .package--4 { background: var(--Turkis); color: var(--Black); } .package--5 { background: var(--Rot); } @media (max-width: 1100px) { .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .packages { grid-template-columns: 1fr; } .package { min-height: 0; } } /* Logo-Wand */ .logo-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .logo-slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 20px; background: #f4f4f2; color: #6b6b67; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; } .logo-slot img { max-height: 70%; width: auto; } .logo-wall--big { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-wall--big { grid-template-columns: 1fr; } } /* Formulare */ .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .form__full { grid-column: 1 / -1; } .field label, .field legend { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid var(--Anthrazit); border-radius: 0; background: var(--White); font: 16px/24px var(--font-sans); color: var(--Anthrazit); } .field textarea { min-height: 140px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #6b6b67; opacity: 1; } .field__req { color: var(--Rot); } .field__error { display: none; margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--Rot); } .field.has-error .field__error { display: block; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--Rot); border-width: 3px; } .error-summary { display: none; padding: 20px 24px; border: 3px solid var(--Rot); background: var(--White); } .error-summary.is-visible { display: block; } .error-summary h2 { font-size: 19px; line-height: 25px; margin-bottom: 8px; } .error-summary a { color: var(--Rot); font-weight: 600; } .field fieldset { margin: 0; padding: 0; border: 0; } .choice { display: flex; flex-wrap: wrap; gap: 10px; } .choice label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 2px solid var(--Anthrazit); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; } .choice input { width: auto; min-height: 0; accent-color: var(--Rot); } .check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; } .check-line input { width: 20px; height: 20px; min-height: 0; margin-top: 0; accent-color: var(--Rot); } .form__note { font-size: 13px; line-height: 18px; color: var(--Grau); } .form-success { display: none; padding: 24px; background: var(--Darkgreen); color: var(--White); font-weight: 600; } .form.is-sent { display: none; } .form.is-sent + .form-success { display: block; } @media (max-width: 640px) { .form { grid-template-columns: 1fr; } } /* FAQ */ .faq { border-top: 3px solid var(--Anthrazit); } .faq details { border-bottom: 1px solid #d9d9d6; } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; line-height: 25px; font-weight: 700; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--Rot); color: var(--White); font-size: 24px; font-weight: 400; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details > div { padding: 0 0 24px; max-width: 760px; } /* Downloads / Listen */ .list-links { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--Anthrazit); } .list-links li { border-bottom: 1px solid #d9d9d6; } .list-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; text-decoration: none; } .list-links a:hover .list-links__title { color: var(--Rot); } .list-links__meta { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--Grau); } .list-links__title { font-size: 19px; line-height: 25px; font-weight: 700; } .list-links__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--Rot); color: var(--White); } .list-links__icon svg { width: 20px; height: 20px; } /* Bildkachel mit Download */ .media-tile { margin: 0; } .media-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .media-tile figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; font-size: 14px; line-height: 19px; } .media-tile a { flex: none; font-weight: 700; color: var(--Rot); text-decoration: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } /* Organische Fotoausschnitte */ .photo-blob { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; clip-path: url(#blob-round); } .photo-leaf { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 50% 0 50%; } .photo-arc { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: ellipse(100% 100% at 0 0); } /* Deko-Formen */ .deco { position: absolute; pointer-events: none; z-index: 0; } .deco--tl { left: -60px; top: -40px; width: 220px; } .deco--br { right: -50px; bottom: -60px; width: 240px; } .deco--tr { right: -40px; top: 40px; width: 160px; } .section > .container { position: relative; z-index: 1; } @media (max-width: 900px) { .deco { width: 110px !important; } } /* Text-Bild-Block */ .media-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .media-text--reverse .media-text__media { order: 2; } @media (max-width: 900px) { .media-text { grid-template-columns: 1fr; gap: 28px; } .media-text--reverse .media-text__media { order: 0; } } /* Prose */ .prose h2 { margin: 40px 0 12px; font-size: 26px; line-height: 30px; text-transform: uppercase; } .prose h3 { margin: 28px 0 8px; font-size: 19px; line-height: 25px; } .prose ul { padding-left: 20px; } .prose li { margin-bottom: 6px; } .prose a { color: var(--Rot); font-weight: 600; } /* Hinweis-Box (Prototyp) */ .note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; background: #fff4e0; color: var(--Anthrazit); font-size: 14px; line-height: 20px; border-left: 0; } .note strong { white-space: nowrap; } /* ---------- 5 Seitenmodule ---------- */ /* Live: Gerade auf den Bühnen */ .live-panel { display: none; } .is-live .live-panel { display: block; } .is-live .before-only { display: none !important; } .live-only { display: none !important; } .is-live .live-only { display: revert !important; } .is-live .live-only.grid { display: grid !important; } .is-after .before-only { display: none !important; } .after-only { display: none !important; } .is-after .after-only { display: block !important; } .live-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; } .live-head__time { font-size: 15px; font-weight: 600; } .live-head__time strong { font-size: 28px; font-variant-numeric: tabular-nums; } .stage-now { display: flex; flex-direction: column; min-height: 260px; padding: 26px; background: var(--White); color: var(--Anthrazit); } .stage-now__stage { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .stage-now__area { font-weight: 600; color: var(--Grau); letter-spacing: .06em; } .stage-now__title { font-size: 24px; line-height: 28px; font-weight: 700; } .stage-now__time { margin-top: 6px; font-size: 15px; color: var(--Grau); font-variant-numeric: tabular-nums; } .progress { height: 6px; margin-top: 16px; background: #ececea; } .progress span { display: block; height: 100%; background: var(--Rot); } .stage-now__next { margin-top: auto; padding-top: 18px; font-size: 14px; line-height: 20px; border-top: 1px solid #e3e3e0; } .stage-now__next b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--Grau); } .stage-now--idle .stage-now__title { color: var(--Grau); font-weight: 600; font-size: 19px; } /* Programm */ .prog-tools { display: flex; flex-direction: column; gap: 20px; } .day-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .day-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 20px; border: 0; background: #f1f1ef; color: var(--Anthrazit); font: inherit; text-align: left; cursor: pointer; } .day-tab b { font-size: 22px; line-height: 26px; text-transform: uppercase; } .day-tab span { font-size: 14px; } .day-tab[aria-pressed="true"] { background: var(--Rot); color: var(--White); } .day-tab .tag { margin-top: 8px; display: none; background: var(--White); color: var(--Rot); } .day-tab.is-today .tag { display: inline-flex; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips__label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .chip { padding: 8px 16px; border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 1.5px var(--Anthrazit); font: 600 14px/18px var(--font-sans); color: var(--Anthrazit); cursor: pointer; } .chip[aria-pressed="true"] { background: var(--Anthrazit); color: var(--White); } .view-switch { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: #f1f1ef; } .view-switch button { padding: 10px 20px; border: 0; border-radius: var(--radius-pill); background: transparent; font: 600 14px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--Anthrazit); } .view-switch button[aria-pressed="true"] { background: var(--Rot); color: var(--White); } .prog-list { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--Anthrazit); } .prog-item { display: grid; grid-template-columns: 130px minmax(0, 1fr) 240px; gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid #d9d9d6; } .prog-item__time { font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .prog-item__time small { display: block; font-size: 13px; font-weight: 600; color: var(--Grau); } .prog-item__title { font-size: 21px; line-height: 26px; font-weight: 700; } .prog-item__text { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--Grau); } .prog-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .prog-item__stage { font-size: 15px; line-height: 21px; font-weight: 600; } .prog-item__stage a { text-decoration: none; } .prog-item__stage a:hover { color: var(--Rot); } .prog-item__stage small { display: block; font-weight: 400; color: var(--Grau); } .prog-item.is-now { position: relative; background: #fff1f0; box-shadow: -16px 0 0 #fff1f0, 16px 0 0 #fff1f0; } .prog-item.is-now::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 5px; background: var(--Rot); } .prog-item.is-past .prog-item__time, .prog-item.is-past .prog-item__title { text-decoration: line-through; text-decoration-thickness: 2px; } /* keine Transparenz: Kontrast bleibt erhalten */ .prog-empty { padding: 40px 0; font-size: 18px; text-align: center; color: var(--Grau); } @media (max-width: 900px) { .prog-item { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; } .prog-item__stage { grid-column: 2; } .prog-item__time { font-size: 18px; } .prog-item__title { font-size: 18px; line-height: 23px; } .day-tab { padding: 12px; } .day-tab b { font-size: 16px; line-height: 20px; } .day-tab span { font-size: 12px; } } /* Bühnen-Karten */ .stage-card { display: flex; flex-direction: column; background: var(--White); color: var(--Anthrazit); } .stage-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; clip-path: ellipse(95% 98% at 50% 0); } .stage-card__body { padding: 20px 22px 24px; } .stage-card__no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--Rot); color: var(--White); font-weight: 700; } .stage-card__title { font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; } .stage-card__text { margin-top: 8px; font-size: 14px; line-height: 21px; } /* Lageplan */ .map { position: relative; background: #f3f1e8; } .map svg { display: block; width: 100%; height: auto; } .map-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 21px; } .map-legend li { display: flex; gap: 10px; align-items: flex-start; } .map-legend .pin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--Rot); color: var(--White); font-size: 13px; font-weight: 700; } .map-legend .pin--service { background: var(--Turkis); color: var(--Black); } .map-legend .pin--wc { background: var(--Anthrazit); } @media (max-width: 640px) { .map-legend { grid-template-columns: 1fr; } } /* Anreise-Kacheln */ .travel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-grid); } .travel .card { min-height: 280px; } .travel svg { width: 48px; height: 48px; margin-bottom: 18px; } @media (max-width: 1100px) { .travel { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .travel { grid-template-columns: 1fr; } } /* ---------- 6 Footer ---------- */ .site-footer { padding: 100px 0 40px; background: var(--White); } .site-footer__logo { display: block; width: min(460px, 80vw); margin: 0 auto 80px; } .site-footer__grid { display: grid; grid-template-columns: 200px repeat(4, minmax(0, 1fr)) 120px; gap: 32px; align-items: start; font-size: 14px; line-height: 22px; } .site-footer__grid h2 { margin-bottom: 12px; font-size: 11px; line-height: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--Rot); } .site-footer__grid ul { margin: 0; padding: 0; list-style: none; } .site-footer__grid li + li { margin-top: 6px; } .site-footer__grid a { text-decoration: none; } .site-footer__grid a:hover { color: var(--Rot); text-decoration: underline; } .site-footer__partner img { width: 200px; } .site-footer__land img { width: 110px; margin-left: auto; } /* Desktop: Beelitz- und Brandenburg-Logo unten bündig mit den Spalten */ @media (min-width: 1201px) { .site-footer__grid { align-self: stretch; } .site-footer__partner, .site-footer__land { align-self: end; } .site-footer__partner img, .site-footer__land img { display: block; } } .site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 60px; padding-top: 24px; border-top: 1px solid #e3e3e0; font-size: 12px; line-height: 15px; color: var(--Grau); } .social { display: flex; gap: 10px; } .social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--Anthrazit); color: var(--White); } .social a:hover { background: var(--Rot); } .social svg { width: 18px; height: 18px; } @media (max-width: 1200px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1000px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__land img { margin-left: 0; } } /* ---------- 7 Prototyp-Werkzeuge (nicht in WordPress übernehmen) ---------- */ .proto-bar { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--radius-pill); background: var(--Anthrazit); color: var(--White); font-size: 13px; line-height: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.25); } .proto-bar label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; } .proto-bar select { max-width: 52vw; padding: 8px 12px; border: 0; border-radius: var(--radius-pill); font: 600 13px/16px var(--font-sans); color: var(--Anthrazit); background: var(--White); } @media print { .proto-bar { display: none; } } /* Meta-Navigation: Leichte Sprache, Gebärdensprache, Barrierefreiheit (BITV 2.0 §4) */ .meta-nav { background: var(--White); border-bottom: 1px solid #e6e6e3; font-size: 14px; line-height: 20px; } .meta-nav ul { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 8px 0; list-style: none; } .meta-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; text-decoration: none; font-weight: 600; } .meta-nav a:hover { color: var(--Rot); text-decoration: underline; } .meta-nav svg { width: 22px; height: 22px; flex: none; } @media (max-width: 640px) { .meta-nav ul { justify-content: flex-start; } .meta-nav { font-size: 13px; } } /* Leichte Sprache: größere Schrift, kurze Zeilen */ .easy { font-size: 20px; line-height: 32px; max-width: 760px; } .easy h2 { margin: 48px 0 12px; font-size: 28px; line-height: 34px; } .easy p { margin-bottom: 18px; } .easy ul { padding-left: 24px; } .easy li { margin-bottom: 10px; } .video-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 16 / 9; background: var(--Anthrazit); color: var(--White); text-align: center; padding: 24px; } .video-ph svg { width: 64px; height: 64px; } /* ---------- Grußwort (Startseite) ---------- */ .greeting__inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; } .greeting__photo { position: relative; margin: 0 0 28px; width: 250px; } .greeting__photo img { position: relative; z-index: 1; width: 230px; height: 230px; width: 250px; border-radius: 68% 32% 58% 42% / 38% 52% 48% 62%; object-fit: cover; object-position: 50% 20%; } /* organische Form statt Kreis */ .greeting__credit { position: absolute; right: -40px; bottom: 4px; font-size: 11px; line-height: 14px; color: var(--Grau); writing-mode: vertical-rl; transform: rotate(180deg); } .greeting__name { margin: 0 0 28px; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--Anthrazit); } .greeting__name span { display: block; color: var(--Rot); } .greeting__quote { margin: 0 0 36px; } .greeting__quote p { margin: 0; font-size: 28px; line-height: 40px; color: var(--Anthrazit); } .greeting__more { display: flex; flex-direction: column; align-items: center; } .greeting__more > summary { list-style: none; } .greeting__more > summary::-webkit-details-marker { display: none; } .greeting__more[open] > summary { background: var(--Anthrazit); } .greeting__text { max-width: 760px; margin-top: 32px; font-size: 18px; line-height: 28px; text-align: left; } @media (max-width: 640px) { .greeting__photo, .greeting__photo img { width: 180px; height: 180px; } .greeting__credit { right: -30px; } .greeting__quote p { font-size: 21px; line-height: 30px; } } /* ---------- Farbige Kacheln (Bühnen, Orte im Festgebiet): Markenfarben, weißer Text (Entscheidung Kunde 13.10.2026) ---------- */ .tile--rot { background: var(--Rot) !important; color: var(--White) !important; } .tile--turkis { background: var(--Turkis) !important; color: var(--White) !important; } .tile--magenta { background: var(--Magenta) !important; color: var(--White) !important; } .tile--gruen { background: var(--Green) !important; color: var(--White) !important; } .tile--orange { background: var(--Orange) !important; color: var(--White) !important; } .tile--darkgreen { background: var(--Darkgreen) !important; color: var(--White) !important; } [class*="tile--"] .stage-card__no { background: var(--White); color: var(--Anthrazit); } [class*="tile--"] .stage-card__area { color: inherit; opacity: 1; } /* Höhepunkte mit Bild: Foto unten, oben geschwungen angeschnitten */ .card--with-media { overflow: hidden; } .card__media-bottom { display: block; width: calc(100% + 2 * var(--space-card)); max-width: none; margin: 28px calc(-1 * var(--space-card)) calc(-1 * var(--space-card)); margin-top: auto; padding-top: 28px; aspect-ratio: 16 / 10; object-fit: cover; clip-path: ellipse(85% 100% at 50% 100%); } /* ===== Ergänzungen: Mein Programm, Warnhinweis, Lageplan, Service, Rückblick, Sponsoren ===== */ .mt-s { margin-top: 8px; } .link-arrow { font-weight: 700; color: var(--Rot); text-decoration: underline; text-underline-offset: 3px; } .link-arrow::after { content: " →"; } /* Phase nach dem Fest im Hero */ .hero__after { display: none !important; } .is-after .hero__after { display: flex !important; } .is-after .hero__cta--before { display: none !important; } .is-after .after-only.btn-row { display: flex !important; } /* Mitmachen: PDF-Teaser */ .download-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; background: #f6f5f1; border-left: 6px solid var(--Rot); } .download-teaser > div:first-child { flex: 1 1 320px; } /* Mein Programm */ .my-prog { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 28px; padding: 18px 22px; background: #f6f5f1; border-radius: 4px; } .my-prog__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 17px; } .my-prog__title svg { width: 26px; height: 26px; color: var(--Rot); flex: none; } .my-prog__title [data-fav-count] { display: block; font-size: 14px; color: var(--Anthrazit); } .my-prog__actions { display: flex; flex-wrap: wrap; gap: 10px; } .my-prog__actions svg { width: 16px; height: 16px; margin-right: 6px; } .my-prog__actions [aria-pressed="true"] { background: var(--Anthrazit); color: var(--White); } .my-prog__actions button:disabled { opacity: .45; cursor: not-allowed; } .my-prog__hint { width: 100%; margin: 0; font-size: 14px; } .fav-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill, 999px); box-shadow: inset 0 0 0 1.5px var(--Anthrazit); background: transparent; color: var(--Anthrazit); font: 600 13px/1 var(--font-sans); cursor: pointer; } .fav-btn svg { width: 16px; height: 16px; } .fav-btn[aria-pressed="true"] { background: var(--Rot); box-shadow: none; color: var(--White); } .fav-btn[aria-pressed="true"] svg { fill: currentColor; } .prog-item.is-fav { box-shadow: inset 4px 0 0 var(--Rot); } .prog-item__stage { display: flex; flex-direction: column; align-items: flex-start; } /* Warnhinweis */ .alert-banner { background: #ffd400; color: var(--Black); border-bottom: 3px solid var(--Black); } .alert-banner__inner { display: flex; align-items: flex-start; gap: 16px; padding-top: 16px; padding-bottom: 16px; } .alert-banner__icon { width: 32px; height: 32px; flex: none; } .alert-banner p { margin: 0; font-size: 15px; line-height: 22px; } .alert-banner__title { font-weight: 700; font-size: 17px !important; } .alert-banner a { color: inherit; font-weight: 700; text-decoration: underline; } .alert-banner__inner > div { flex: 1; min-width: 0; } .alert-banner__close { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--Black); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .alert-banner__close svg { width: 20px; height: 20px; } .proto-bar__check { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; text-transform: none; letter-spacing: 0; } /* Lageplan interaktiv */ .map-ui__filter { margin-bottom: 16px; } .map-ui__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .map-ui__zoom { display: flex; align-items: center; gap: 8px; } .map-ui__zoom .round-btn { width: 44px; height: 44px; font-size: 24px; line-height: 1; } .map-ui__bar svg { width: 18px; height: 18px; margin-right: 6px; } .map__viewport { overflow: auto; max-height: 75vh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .map__viewport:focus-visible { outline: 3px solid var(--Rot); outline-offset: 3px; } .map__canvas { width: 100%; transition: width .2s; } .map__viewport.is-zoomed { cursor: grab; } .map-ui__status { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; } @media (prefers-reduced-motion: reduce) { .map__canvas { transition: none; } } .map-legend .pin--essen { background: var(--Orange); } .map-legend .route { flex: none; width: 26px; height: 0; margin-top: 12px; border-top: 4px dashed #2a7a22; } /* Service */ .service-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 8px; margin-bottom: 16px; border: 2.5px solid currentColor; border-radius: 50%; font-size: 20px; font-weight: 700; } .emergency { display: flex; align-items: center; gap: 24px; padding: 24px 28px; background: var(--Rot); color: var(--White); } .emergency p { margin: 0; } .emergency__num { font-size: clamp(48px, 8vw, 80px); line-height: 1; font-weight: 800; flex: none; } .emergency strong { display: block; font-size: 20px; } .checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .checklist li { position: relative; padding-left: 36px; } .checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--Green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; } .rules__col { padding: 28px; background: #f6f5f1; border-top: 6px solid var(--Green); } .rules__col--no { border-top-color: var(--Rot); } .rules__col h3 { margin: 0 0 12px; font-size: 22px; } .rules__col ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .en-facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; } .en-facts dl > div { padding: 24px; background: #f6f5f1; border-top: 6px solid var(--Rot); } .en-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .en-facts dd { margin: 8px 0 0; font-size: 17px; line-height: 25px; } @media (max-width: 900px) { .en-facts dl { grid-template-columns: 1fr; } } @media (max-width: 480px) { .emergency { flex-direction: column; align-items: flex-start; gap: 8px; } .download-teaser { padding: 24px 20px; } .rules__col { padding: 22px 20px; } } /* Rückblick nach dem Fest */ .recap { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } .recap__video { margin: 0; } .recap__poster { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--Anthrazit); } .recap__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .8; } .recap__play { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--Rot); color: var(--White); } .recap__play svg { width: 32px; height: 32px; margin-left: 4px; } .recap__video figcaption { margin-top: 10px; font-size: 14px; } .recap__video figcaption strong { display: block; font-size: 16px; } .recap__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; align-content: start; } .recap__facts li { padding: 18px 20px; background: var(--Rot); color: var(--White); font-size: 15px; } .recap__facts strong { display: block; font-size: 40px; line-height: 1; } .recap__photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; } .recap__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } @media (max-width: 900px) { .recap { grid-template-columns: 1fr; } .recap__facts { grid-template-columns: repeat(3, 1fr); } .recap__facts strong { font-size: 30px; } } @media (max-width: 520px) { .recap__facts { grid-template-columns: 1fr; } .recap__photos { grid-template-columns: 1fr 1fr; } } /* Sponsorenleiste */ .sponsor-strip { border-top: 0; } .sponsor-strip__title { margin: 0 0 24px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .sponsor-strip__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; margin: 0; padding: 0; list-style: none; } .sponsor-strip__list img { display: block; height: 56px; width: auto; max-width: 180px; } .sponsor-strip__slot { display: flex; align-items: center; justify-content: center; width: 160px; height: 64px; border: 2px dashed #b9b7ae; font-size: 13px; color: var(--Anthrazit); text-align: center; } @media (max-width: 520px) { .sponsor-strip__list { gap: 12px; } .sponsor-strip__slot { width: calc(50% - 6px); } } .recap__photos figure { margin: 0; } .recap__photos figcaption { margin-top: 8px; font-size: 14px; } /* Responsive-Feinschliff (320–640 px) */ @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .card__title, .headline-section, .display { overflow-wrap: break-word; hyphens: auto; } .bbt-btn { white-space: normal; text-align: center; max-width: 100%; } .bbt-btn.bbt-btn--compact { white-space: nowrap; } } @media (max-width: 380px) { .bbt-countdown__units { gap: 10px; } .bbt-countdown__num { font-size: 36px; } .bbt-countdown__label { font-size: 11px; } .card { padding-left: 24px; padding-right: 24px; } } a[href^="mailto:"] { overflow-wrap: anywhere; } @media (max-width: 640px) { .proto-bar { right: 16px; flex-wrap: wrap; border-radius: 16px; padding: 8px 12px; } .proto-bar select { max-width: 100%; flex: 1 1 160px; } .proto-bar__check { margin-left: 0; } } .note > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 380px) { .note { flex-direction: column; gap: 4px; } } .service-icon { align-self: flex-start; } @media (max-width: 640px) { .proto-bar > label[for="proto-time"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .proto-bar { padding: 6px 10px; gap: 6px 10px; } .proto-bar select { padding: 6px 10px; } } /* Themenkarten: Bildfläche im Fluss unter dem Text, Formen aus dem Designsystem (TopicCard) auf die Bildfläche umgerechnet. So bleibt die Rundung bei jeder Kartenhöhe vollständig und der Text liegt nie auf dem Foto. */ .bbt-topic { display: flex; flex-direction: column; min-height: 0; } .bbt-topic__media { position: relative; inset: auto; order: 2; margin-top: auto; aspect-ratio: 366 / 356; overflow: hidden; } .bbt-topic__media img { top: 0; height: 100%; } .bbt-topic__media.shape-1 { clip-path: ellipse(90.05% 80.5% at 98.56% 86.56%); } .bbt-topic__media.shape-2 { clip-path: ellipse(89.9% 80.67% at 98.8% 89.53%); } .bbt-topic__media.shape-3 { clip-path: ellipse(108.12% 167.3% at 92.3% 169.44%); } .bbt-topic__media.shape-4 { clip-path: ellipse(194.3% 757.85% at 89.5% 759.93%); } .bbt-topic__body { order: 1; padding-bottom: 8px; } .bbt-topic__media { max-height: 380px; } .bbt-topic__media.shape-2, .bbt-topic__media.shape-3, .bbt-topic__media.shape-4 { clip-path: ellipse(90.05% 80.5% at 98.56% 86.56%); } /* Footer: Links über die volle Breite, Logos darunter */ .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site-footer__logos { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 64px; } .site-footer__logos img { display: block; } .site-footer__logos .site-footer__land img { margin-left: 0; } @media (max-width: 1000px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } .site-footer__logos { margin-top: 48px; } .site-footer__partner img { width: 170px; } .site-footer__land img { width: 90px; } } .site-footer__social { margin: 0; } @media (max-width: 520px) { .site-footer__logos { flex-wrap: wrap; } .site-footer__social { order: 3; width: 100%; } } .site-footer__logos { margin-top: 40px; } .site-footer__logos .site-footer__land img { width: 90px; } @media (max-width: 520px) { .site-footer__logos { margin-top: 32px; } .site-footer__logos .site-footer__land img { width: 76px; } } /* Logozeile: Social-Icons exakt mittig, Logos außen */ .site-footer__logos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; } .site-footer__logos .site-footer__partner { justify-self: start; } .site-footer__logos .site-footer__social { justify-self: center; justify-content: center; } .site-footer__logos .site-footer__land { justify-self: end; } .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; } .site-footer__social a svg { display: block; margin: 0; } @media (max-width: 520px) { .site-footer__logos { grid-template-columns: 1fr 1fr; row-gap: 24px; } .site-footer__social { grid-column: 1 / -1; grid-row: 2; } } .site-footer { padding-bottom: 56px; } .container .subnav .container { padding-left: 0; padding-right: 0; max-width: none; } .logo-slot img { max-width: 80%; height: auto; } .logo-wall--big .logo-slot img[src*="land-brandenburg"] { width: 120px; max-height: none; } /* Hero-Unterkante als Ausschnitt eines großen Kreises (gleichmäßiger Bogen, Stich = 7 % der Breite). Kreisradius R = Breite × (0,25 + 0,07²) / (2 × 0,07) ≈ 1,82 × Breite. */ .hero, .page-hero { border-radius: 0; clip-path: circle(182vw at 50% calc(100% - 182vw)); } @media (max-width: 900px) { .hero, .page-hero { border-radius: 0; } } .page-hero__inner { padding-bottom: calc(7vw + 40px); } @media (max-width: 900px) { .page-hero__inner { padding-bottom: calc(7vw + 40px); } } /* Sprungmarken mittig (scrollt auf dem Handy trotzdem von links), mehr Abstand zum Hero */ .subnav__list > li:first-child { margin-left: auto; } .subnav__list > li:last-child { margin-right: auto; } .page-hero + .subnav { margin-top: 28px; } @media (max-width: 900px) { .page-hero + .subnav { margin-top: 16px; } } .media-tile .logo-slot img { width: 78%; height: 72%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; } /* Highlight-Karten (Startseite): eckige Fläche, Bild mit Bogen von unten wie bei den Themenkarten */ .card--leaf.card--with-media { border-radius: 0; } .card--with-media .card__media-bottom { padding-top: 0; aspect-ratio: 366 / 300; clip-path: ellipse(90.05% 80.5% at 98.56% 86.56%); } /* Programm: Kategorie und Bühne als Dropdown */ .filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 16px 24px; margin: 24px 0; } .filter-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .filter-select__label { font: 700 13px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; } .filter-select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 48px; padding: 12px 48px 12px 20px; border: 2px solid var(--Black, #1d1d1b); border-radius: var(--radius-pill); background: var(--White) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231d1d1b' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 20px center; font: 600 17px/22px var(--font-sans); color: var(--Black, #1d1d1b); cursor: pointer; } .filter-select:focus-visible { outline: 3px solid var(--Rot); outline-offset: 2px; } @media (max-width: 640px) { .filter-row { grid-template-columns: minmax(0, 1fr); } } .filter-row[hidden] { display: none; } /* Footer: Cookie-Einstellungen als Button, der wie ein Link aussieht */ .link-button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: inherit; cursor: pointer; text-align: left; } .site-footer .link-button:hover, .site-footer .link-button:focus-visible { text-decoration: underline; } .prose .link-button { color: var(--Rot); text-decoration: underline; } .site-footer__land { display: block; justify-self: end; } /* Cookie-Dialog */ .cookie-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: var(--White); color: var(--Black, #1d1d1b); } .cookie-dialog::backdrop { background: rgba(0, 0, 0, .55); } .cookie-dialog__inner { padding: 32px; } .cookie-dialog .headline-section { font-size: 28px; line-height: 32px; margin-bottom: 12px; } .cookie-list { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid #d9d9d6; } .cookie-list li { border-bottom: 1px solid #d9d9d6; } .cookie-list label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; cursor: pointer; } .cookie-list input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--Rot); } .cookie-list strong { display: block; } @media (max-width: 640px) { .cookie-dialog__inner { padding: 24px 20px; } } /* Rechtliche Seiten */ .legal__note { font-size: 15px; line-height: 22px; color: var(--Anthrazit); border-left: 4px solid var(--Rot); padding-left: 12px; } .legal__toc { background: #f6f5f1; padding: 24px 28px; } .legal__toc h2 { margin-top: 0; } .legal__toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; } .legal__toc li { break-inside: avoid; padding: 4px 0; } .legal section { scroll-margin-top: 100px; } @media (max-width: 640px) { .legal__toc ol { columns: 1; } } /* Standbetreiber-Verzeichnis */ .stand-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; } .filter-input { background-image: none; padding-right: 20px; } .stand-count { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .stand-count p { margin: 0; font-size: 19px; } .stand-list { list-style: none; padding: 0; margin-left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .stand { display: flex; flex-direction: column; padding: 24px; background: #f6f5f1; border-top: 4px solid var(--Rot); } .stand[hidden] { display: none; } .stand__nr { margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--Anthrazit); } .stand__name { margin: 0 0 8px; font-size: 21px; line-height: 26px; } .stand__text { margin: 0 0 16px; } .stand__meta { margin: auto 0 0; } .tag--stand-essen, .tag--stand-suesses { background: var(--Orange); color: var(--Black); } .tag--stand-getraenke { background: var(--Turkis); color: var(--Black); } .tag--stand-regional { background: var(--Green); color: var(--Black); } .tag--stand-handwerk, .tag--stand-markt { background: var(--Magenta); color: var(--White); } .tag--stand-mode { background: var(--Rot); color: var(--White); } .tag--stand-spiel { background: var(--Anthrazit); color: var(--White); } .stand-empty { font-weight: 700; } @media (max-width: 1000px) { .stand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stand-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .stand-list, .stand-filter { grid-template-columns: minmax(0, 1fr); } } /* Kontaktkarten mit Foto: Foto bringt die Blob-Form schon mit (transparenter Rand) */ .bbt-contact__photo--img { background: none; clip-path: none; } .bbt-contact__photo--img img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Logo-Wände: organische Flächen (gleiche Blob-Form wie die Kontaktfotos). Die Form liegt als ::before hinter dem Logo, jede zweite und dritte Fläche gespiegelt bzw. gedreht, damit die Wand lebendig wirkt. */ .logo-wall .logo-slot { position: relative; isolation: isolate; background: none; aspect-ratio: 4 / 3; padding: 12% 14%; } .logo-wall .logo-slot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f4f4f2; clip-path: url(#blob-round); } .logo-wall .logo-slot:nth-child(3n+2)::before { transform: scaleX(-1); } .logo-wall .logo-slot:nth-child(3n)::before { transform: scaleY(-1); } .logo-wall .logo-slot img { max-width: 100%; max-height: 100%; } .logo-wall--big .logo-slot { padding: 16% 22%; } /* Mitmachen: drei Teaser (Themenkarten mit Handlungsaufforderung) */ .bbt-topic__cta { display: inline-flex; gap: 8px; margin-top: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; } .bbt-topic--teaser:hover .bbt-topic__cta, .bbt-topic--teaser:focus-visible .bbt-topic__cta { text-decoration: underline; } /* Schritte: Nummer 2 als organische Form wie 1 und 3 */ .steps li:nth-child(2)::before { background-image: url("../form/blob-gruen.svg"); } /* Textlink am Kartenende (z. B. Mitmachen › Festgebiet) */ .card__link { display: inline-flex; gap: 8px; margin-top: 16px; color: inherit; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } .card__link:hover { text-decoration-thickness: 2px; } /* Unterseiten-Header: Headline etwas kleiner und zentriert */ .page-hero__inner { text-align: center; } .page-hero__display { font-size: 52px; } .page-hero__title.headline-hero { font-size: 68px; line-height: 1; } @media (max-width: 900px) { .page-hero__display { font-size: 32px; } .page-hero__title.headline-hero { font-size: 36px; line-height: 38px; } } @media (max-width: 380px) { .page-hero__title.headline-hero { font-size: 30px; line-height: 32px; } } /* Unterseiten-Header: Headlines höher, Bild stärker abgedunkelt */ .page-hero::before { background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.35) 75%), rgba(0,0,0,.12); } .page-hero__inner { padding-bottom: calc(7vw + 110px); } @media (max-width: 900px) { .page-hero__inner { padding-bottom: calc(7vw + 64px); } } /* Download-Teaser (Mitmachen): Fläche in Orange, ohne Linie; schwarze Schrift für Kontrast */ .download-teaser { background: var(--Orange); border-left: 0; color: var(--Black, #1d1d1b); } /* Menü: Bildvorschau rechts im Bogen (von rechts unten nach links oben). Beim Hover/Fokus auf einen Menüpunkt erscheint das Header-Bild der Zielseite. Nur auf breiten Bildschirmen. */ .main-nav__visual { position: absolute; top: 0; right: 0; bottom: 0; width: 44vw; max-width: 760px; clip-path: ellipse(100% 100% at 100% 0); pointer-events: none; } .main-nav__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; } .main-nav__visual img.is-active { opacity: 1; } .main-nav__list, .main-nav__extra { position: relative; z-index: 1; } @media (max-width: 1100px) { .main-nav__visual { display: none; } } @media (prefers-reduced-motion: reduce) { .main-nav__visual img { transition: none; } } /* Themenkarten/Teaser: Bildfläche 2px über den rechten Rand ziehen, damit (v. a. in Safari) kein Farbstreifen rechts neben dem Foto bleibt; die Karte schneidet den Überstand ab */ .bbt-topic__media { width: calc(100% + 2px); margin-right: -2px; margin-bottom: -1px; } .bbt-topic__title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; } /* Download-Teaser: Text weiß (bewusste Ausnahme Weiß auf Orange, siehe Übergabe), zweiter Button als weiße Kontur */ .download-teaser { color: var(--White); } .download-teaser .subhead { color: var(--White); } .download-teaser .bbt-btn--ghost { color: var(--White); border-color: var(--White); box-shadow: inset 0 0 0 2px var(--White); background: transparent; } .download-teaser .bbt-btn--ghost:hover { background: var(--White); color: var(--Orange); } /* Lange Buttons in schmalen Spalten dürfen umbrechen statt überzustehen */ .media-text .bbt-btn { max-width: 100%; white-space: normal; text-align: center; } /* Rote Abschnitte mit Bogen unten: gleiche Kreisform wie die Hero-Header (großgezogener Kreis) */ .section--curve-bottom { border-radius: 0; clip-path: circle(182vw at 50% calc(100% - 182vw)); padding-bottom: calc(var(--section-y, 96px) + 7vw); } @media (max-width: 900px) { .section--curve-bottom { border-radius: 0; } } /* Hohe Abschnitte (z. B. Kontakte mobil): Kreis nur für den unteren Rand, darüber volle Fläche – per Maske statt clip-path */ .section--curve-bottom { clip-path: none; -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 7vw) no-repeat, radial-gradient(circle 182vw at 50% calc(100% - 182vw), #000 calc(100% - 1px), transparent 100%); mask: linear-gradient(#000, #000) top / 100% calc(100% - 7vw) no-repeat, radial-gradient(circle 182vw at 50% calc(100% - 182vw), #000 calc(100% - 1px), transparent 100%); } /* ===================== Animationen ===================== Barrierefreiheit: Alles läuft nur bei prefers-reduced-motion: no-preference. Wer in den Systemeinstellungen „Bewegung reduzieren“ gewählt hat, sieht alle Inhalte sofort und ohne Bewegung (WCAG 2.3.3, BITV). Ohne JavaScript bleibt ebenfalls alles sichtbar: Die Einblend-Klassen setzt erst site.js (html.anim). Keine Animation blinkt, läuft endlos oder länger als 1 s; das Laufband hat einen Pause-Knopf (WCAG 2.2.2). */ @media (prefers-reduced-motion: no-preference) { /* Einblenden beim Scrollen */ html.anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.anim [data-reveal].is-in { opacity: 1; transform: none; } html.anim .photo-blob[data-reveal] { transform: scale(.94); } html.anim .photo-blob[data-reveal].is-in { transform: none; } /* Header-Bereich beim Laden */ @keyframes bbt-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes bbt-pop { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } } @keyframes bbt-zoom { from { transform: scale(1.08); } to { transform: none; } } .hero__slogan, .page-hero__display { animation: bbt-rise .8s cubic-bezier(.2,.7,.2,1) both; } .page-hero__title { animation: bbt-rise .8s .12s cubic-bezier(.2,.7,.2,1) both; } .hero__date, .page-hero__date { animation: bbt-pop .7s .35s cubic-bezier(.3,1.4,.5,1) both; } .hero__img, .page-hero__img { animation: bbt-zoom 1.6s cubic-bezier(.2,.7,.2,1) both; } /* Hover: Karten und Kacheln heben sich leicht an */ .card, .bbt-topic, .bbt-hotel, .stand, .media-tile { transition: transform .3s cubic-bezier(.2,.7,.2,1); } .card:hover, a.bbt-topic:hover, .bbt-hotel:hover, .stand:hover, .media-tile:hover { transform: translateY(-4px); } .bbt-btn { transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; } .bbt-btn:hover { transform: translateY(-2px); } .bbt-btn:active { transform: translateY(0); } .bbt-topic__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); } /* Menü: Fläche blendet ein, Menüpunkte folgen nacheinander */ @keyframes bbt-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes bbt-slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } .nav-open .main-nav { animation: bbt-fade .25s ease both; } .nav-open .main-nav__list > li { animation: bbt-slide .45s cubic-bezier(.2,.7,.2,1) both; } .nav-open .main-nav__list > li:nth-child(2) { animation-delay: .04s; } .nav-open .main-nav__list > li:nth-child(3) { animation-delay: .08s; } .nav-open .main-nav__list > li:nth-child(4) { animation-delay: .12s; } .nav-open .main-nav__list > li:nth-child(5) { animation-delay: .16s; } .nav-open .main-nav__list > li:nth-child(6) { animation-delay: .2s; } .nav-open .main-nav__list > li:nth-child(7) { animation-delay: .24s; } .nav-open .main-nav__list > li:nth-child(8) { animation-delay: .28s; } .nav-open .main-nav__visual { animation: bbt-fade .5s .1s ease both; } /* FAQ: Antwort gleitet sanft auf */ .faq details[open] > div { animation: bbt-rise .35s cubic-bezier(.2,.7,.2,1) both; } .faq summary::after { transition: transform .25s cubic-bezier(.2,.7,.2,1); } /* Cookie-Dialog */ .cookie-dialog[open] { animation: bbt-rise .3s cubic-bezier(.2,.7,.2,1) both; } .cookie-dialog[open]::backdrop { animation: bbt-fade .3s ease both; } } /* Lageplan: echte Karte (KarteBrandenburgtag_V.svg), zoombar */ .map { background: #f7f5f1; } .map__viewport { touch-action: pan-x pan-y; } .map__viewport.is-zoomed { cursor: grab; } .map__viewport.is-dragging { cursor: grabbing; user-select: none; } .map__canvas svg { display: block; width: 100%; height: auto; } .map-ui__hint { margin: 8px 0 0; font-size: 14px; color: var(--Grau); } .map-legend2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .map-legend__title { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0 0 12px; } .map-legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 21px; } .map-legend__list li { display: flex; gap: 10px; align-items: flex-start; } .map-legend2 .pin { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; background: var(--Rot); color: var(--White); font-size: 13px; font-weight: 700; } .map-legend2 .pin--buehne { background: var(--Orange-artwork); color: var(--Black); } .map-legend2 .pin--gastro { background: var(--Turkis); color: var(--Black); } .map-legend2 .pin--sq { border-radius: 0; } .map-legend2 .pin--wc { border-radius: 0; background: var(--Black); } .map-legend2 .pin--park { border-radius: 0; background: #0045ce; } .map-legend__umzug { flex: none; width: 28px; height: 0; margin-top: 10px; border-top: 5px dotted var(--Rot); } @media (max-width: 1100px) { .map-legend2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .map-legend2 { grid-template-columns: 1fr; gap: 24px; } } .map__canvas { transition: none; } /* Lageplan randlos in voller Breite, Vollbild-Modus */ .map-ui .map__viewport { width: 100vw; margin-left: calc(50% - 50vw); max-height: none; background: #f7f5f1; } .map-ui:fullscreen { display: flex; flex-direction: column; padding: 16px; background: var(--White); overflow: hidden; } .map-ui:fullscreen .map__viewport { width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; max-height: none; } .map-ui:fullscreen .map-ui__hint { display: none; } #lageplan { overflow-x: clip; } /* Programm-Highlights als Bento-Grid mit Stars */ .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 16px; grid-template-areas: "er er sa sa" "er er sb fw" "um um sc fw"; } .bento--eroeffnung { grid-area: er; } .bento--star-a { grid-area: sa; } .bento--star-b { grid-area: sb; } .bento--feuerwerk { grid-area: fw; } .bento--umzug { grid-area: um; } .bento--star-c { grid-area: sc; } .bento--star-d { grid-area: sd; } .bento--more { grid-area: mo; } .bento > * { min-width: 0; margin: 0; } .bento__ev { display: flex; flex-direction: column; } .bento__ev .card__media-bottom { flex: 1 1 auto; min-height: 140px; aspect-ratio: auto; height: 100%; } .bento--umzug { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; } .bento--umzug > :not(img) { grid-column: 1; } .bento--umzug .card__media-bottom { grid-column: 2; grid-row: 1 / span 4; width: calc(100% + var(--space-card)); height: calc(100% + 2 * var(--space-card)); margin: calc(-1 * var(--space-card)) calc(-1 * var(--space-card)) calc(-1 * var(--space-card)) 0; clip-path: ellipse(100% 95% at 100% 100%); } .bento__star { position: relative; overflow: hidden; display: flex; align-items: flex-end; background: var(--Black); color: var(--White); } .bento__star img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .bento__star::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 80%); } .bento__star-body { position: relative; z-index: 1; padding: 24px; } .bento__star .bbt-eyebrow { color: var(--White); margin: 0 0 8px; } .bento__star-name { margin: 0; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; font-weight: 800; text-transform: uppercase; } .bento__star-text { margin: 8px 0 0; font-size: 16px; line-height: 24px; max-width: 34ch; } .bento__more { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--space-card); background: #f6f5f1; color: var(--Anthrazit); text-decoration: none; border-radius: 0 120px 0 0; } .bento__more-title { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; font-weight: 800; text-transform: uppercase; color: var(--Rot); } .bento__more-arrow { font-size: 32px; color: var(--Rot); } .bento__more:hover .bento__more-title, .bento__more:focus-visible .bento__more-title { text-decoration: underline; } .bento__more:focus-visible { outline: 3px solid var(--Rot); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .bento__star:hover img { transform: scale(1.05); } .bento__more:hover .bento__more-arrow { transform: translateX(6px); } .bento__more-arrow { transition: transform .3s; } } @media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "er er" "sa sa" "sb fw" "sc fw" "um um"; } } @media (max-width: 640px) { .bento { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: "er" "sa" "fw" "sb" "um" "sc"; } .bento__star { min-height: 300px; } .bento--umzug { display: flex; flex-direction: column; } .bento--umzug .card__media-bottom { width: calc(100% + 2 * var(--space-card)); height: auto; aspect-ratio: 366 / 300; margin: 28px calc(-1 * var(--space-card)) calc(-1 * var(--space-card)); clip-path: ellipse(90.05% 80.5% at 98.56% 86.56%); } } .bento--feuerwerk .card__title { font-size: clamp(20px, 1.6vw, 28px); overflow-wrap: normal; hyphens: manual; } @media (max-width: 1100px) { .bento--feuerwerk .card__title { font-size: clamp(22px, 3vw, 32px); } } /* Partner: „Ihr Stand auf dem Landesfest“ auf Türkis (Hellblau aus dem Styleguide) mit Shapes; Weiß auf Türkis = bewusste Ausnahme wie bei den Farbkarten */ .section--blue { position: relative; overflow: hidden; background: var(--Turkis); color: var(--White); } .section--blue > .container { position: relative; } .section--blue .bbt-eyebrow, .section--blue .headline-section, .section--blue .lead, .section--blue a:not(.bbt-btn) { color: var(--White); } .section--blue .bbt-btn--ghost { color: var(--White); border-color: var(--White); background: transparent; box-shadow: inset 0 0 0 2px var(--White); } .section--blue .bbt-btn--ghost:hover { background: var(--White); color: var(--Anthrazit); } .section--blue .bbt-btn:focus-visible, .section--blue a:focus-visible { outline-color: var(--White); } .section--blue .section__leaves span { background: rgba(0,0,0,.08); } .map-ui__bar { justify-content: flex-end; } /* Mitmachen: Poster-Mockup im Schaufenster */ .poster-mockup { display: block; object-position: 50% 50%; } /* ===== Einheitlicher Sektionsrhythmus ===== Jede Sektion hat oben und unten var(--section-y). Folgen zwei Sektionen mit gleichem Hintergrund (weiß auf weiß, sand auf sand) aufeinander, entfällt der obere Abstand der zweiten. So ist der Weißraum zwischen Inhalten immer genau eine Einheit, und farbige Flächen haben innen dieselbe Einheit. */ .section:not(.section--sand, .section--green, .section--red, .section--red-pattern, .section--blue) + .section:not(.section--sand, .section--green, .section--red, .section--red-pattern, .section--blue), .section--sand + .section--sand { padding-top: 0; } .before-only + .after-only { padding-top: var(--section-y); } /* „So einfach sind Sie dabei“: drei Schritte zentriert unter den Teasern */ .steps--center li { text-align: center; padding-top: 96px; } .steps--center li::before { left: 50%; transform: translateX(-50%); } .steps--center p { max-width: 34ch; margin-inline: auto; } .steps--center { margin-top: 64px; } @media (max-width: 900px) { .steps--center { margin-top: 40px; } } #wie .display { max-width: none; } .bbt-topic--darkgreen { background: var(--Darkgreen); } .checklist.mt-l { margin-top: 48px; } .checklist.mt-m { margin-top: 24px; } /* 8. Kachel im Bühnenraster: Verweis aufs Programm */ .stage-card--more { background: var(--Anthrazit); color: var(--White); text-decoration: none; justify-content: center; } .stage-card--more .stage-card__no { background: var(--Rot); color: var(--White); } .stage-card--more:hover .card__link { text-decoration-thickness: 2px; } /* Presse: Fakten auf einen Blick */ .press-facts { margin: 0; border-top: 3px solid var(--Anthrazit); } .press-facts > div { display: grid; grid-template-columns: 220px 1fr; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid #d9d9d6; } .press-facts dt { font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--Rot); } .press-facts dd { margin: 0; font-size: 18px; line-height: 27px; } @media (max-width: 640px) { .press-facts > div { grid-template-columns: 1fr; } } /* ===== Einheitliche Buttons (Barrierefreiheit) ===== Eine Standardgröße für alle Inhalts-Buttons (--l und --m sind gleich groß), eine kleine Größe für Werkzeugleisten und Karten (--s) und den Kopfzeilen-Button. Alle Zielflächen mindestens 44 px hoch (WCAG 2.5.8 verlangt 24 px, 44 px ist der Komfortwert). Fokus als Outline, damit Rahmen von Ghost-Buttons sichtbar bleiben. */ .bbt-btn--l, .bbt-btn--m { min-height: 56px; padding: 0 32px; font-size: 15px; line-height: 18px; } .bbt-btn--s { min-height: 44px; padding: 0 20px; font-size: 13px; line-height: 16px; } .bbt-btn.bbt-btn--compact { min-height: 44px; padding: 0 18px; font-size: 13px; line-height: 16px; } @media (max-width: 640px) { .bbt-btn--l, .bbt-btn--m { min-height: 52px; padding: 8px 24px; font-size: 14px; } } .bbt-btn:focus-visible { outline: 3px solid var(--Anthrazit); outline-offset: 3px; box-shadow: none; } .bbt-btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px currentColor; } .section--red .bbt-btn:focus-visible, .section--red-pattern .bbt-btn:focus-visible, .section--green .bbt-btn:focus-visible, .section--blue .bbt-btn:focus-visible, .download-teaser .bbt-btn:focus-visible, .main-nav .bbt-btn:focus-visible { outline-color: var(--White); } .link-button { min-height: 24px; } /* Barrierefreiheit: Sprungziel ohne Rahmen, Mindest-Zielgröße kleiner Links, keine horizontale Seitenleiste */ main:focus { outline: none; } .prog-item__stage a, .media-tile figcaption a { display: inline-block; min-height: 24px; padding-block: 2px; } body { overflow-x: clip; } /* Zweizeilige Headline im Seiten-Hero: eine Zeile tiefer, damit der Block vertikal mittig sitzt */ .page-hero--2l .page-hero__inner { padding-bottom: calc(7vw + 42px); } @media (max-width: 900px) { .page-hero--2l .page-hero__inner { padding-bottom: calc(7vw + 36px); } } /* Header, Metanavigation, Menü und Footer: breiter als das Inhaltsraster */ :root { --container-wide: 1680px; --gutter-wide: clamp(20px, 4vw, 64px); } .meta-nav > .container, .site-header > .container, .site-footer > .container { max-width: calc(var(--container-wide) + 2 * var(--gutter-wide)); padding-left: var(--gutter-wide); padding-right: var(--gutter-wide); } .main-nav { padding-left: var(--gutter-wide); padding-right: var(--gutter-wide); } .main-nav__list, .main-nav__extra { max-width: var(--container-wide); } /* Presse: Fakten als große Zahlen */ .fact-tiles { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .fact-tile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 28px 28px 32px; color: var(--White); border-radius: 0 0 90px 0; } .fact-tile--wide { grid-column: span 2; } .fact-tile--rot { background: var(--Rot); } .fact-tile--turkis { background: var(--Turkis); } .fact-tile--orange { background: var(--Orange); } .fact-tile--gruen { background: var(--Green); } .fact-tile--magenta { background: var(--Magenta); } .fact-tile__num { font-weight: 800; font-size: 104px; line-height: .95; letter-spacing: -.02em; } .fact-tile--wide .fact-tile__num { font-size: 152px; } .fact-tile__label { margin-top: 12px; font-family: var(--font-display); font-size: 36px; line-height: 1.05; } .fact-tile__note { margin-top: 14px; padding-top: 12px; border-top: 2px solid rgba(255,255,255,.6); font-size: 16px; line-height: 22px; font-weight: 500; } #fakten .press-facts { max-width: 960px; margin-top: 64px; } @media (max-width: 1200px) { .fact-tile__num { font-size: 80px; } .fact-tile--wide .fact-tile__num { font-size: 112px; } } @media (max-width: 900px) { .fact-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; } .fact-tile { min-height: 190px; padding: 20px; border-radius: 0 0 56px 0; } .fact-tile__num { font-size: 52px; } .fact-tile--wide .fact-tile__num { font-size: 68px; } .fact-tile__label { font-size: 22px; overflow-wrap: anywhere; } .fact-tile__note { font-size: 14px; line-height: 20px; } #fakten .press-facts { margin-top: 40px; } } @media (max-width: 380px) { .fact-tile__num { font-size: 42px; } .fact-tile--wide .fact-tile__num { font-size: 56px; } } /* Presse: Faktenliste unter den Kacheln als Spalten */ #fakten .press-facts { max-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 32px; border-top: 0; } #fakten .press-facts > div { display: block; padding: 20px 0 0; border-top: 3px solid var(--Anthrazit); border-bottom: 0; } #fakten .press-facts dt { margin-bottom: 10px; } #fakten .press-facts dd { font-size: 17px; line-height: 26px; } @media (max-width: 1200px) { #fakten .press-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 900px) { #fakten .press-facts { grid-template-columns: 1fr; gap: 24px; } #fakten .press-facts > div { padding-top: 14px; } } /* Presse: Poster-Download hervorgehoben */ .poster-feature { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: center; padding: 24px; background: #f6f5f1; } .poster-feature img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } @media (max-width: 700px) { .poster-feature { grid-template-columns: 1fr; gap: 20px; padding: 16px; } .poster-feature img { aspect-ratio: 4 / 3; } } .poster-feature img { aspect-ratio: 1 / 1; } @media (max-width: 700px) { .poster-feature img { aspect-ratio: 1 / 1; } } .poster-feature + .list-links { margin-top: 40px; } #fakten .press-facts > div { border-top: 0; padding-top: 0; } /* ===== Konsistenz-Check 14.10.: eine Typo-Skala für alle Seiten ===== */ /* H1: Textseiten ohne Bild-Hero bekommen dieselbe Größe wie die Hero-H1 */ main h1.headline-section { font-size: 68px; line-height: 1; } @media (max-width: 900px) { main h1.headline-section { font-size: 36px; line-height: 38px; } } @media (max-width: 380px) { main h1.headline-section { font-size: 30px; line-height: 32px; } } /* Einleitungstext: mobil nie kleiner als der Fließtext */ @media (max-width: 900px) { .lead { font-size: 17px; line-height: 26px; } } /* Kachel-Titel: Themen- und Info-Kacheln gleich groß */ .bbt-topic__title, .card__title { font-size: 26px; line-height: 30px; } @media (max-width: 640px) { .bbt-topic__title { font-size: 26px; line-height: 30px; } } /* Zwischenüberschriften H3 im Text einheitlich */ .subhead, main h3:not([class]), .bbt-hotel__title { font-size: 20px; line-height: 26px; font-weight: 700; } /* Fließtext in Kontaktkarten wie überall 16/24 */ .bbt-contact { font-size: 16px; line-height: 24px; } /* Kleintext (Hinweise, Formularhinweise) einheitlich 14/21 */ .note, .form__note, .legal__note, .map-ui__hint, .body-s { font-size: 14px; line-height: 21px; } .stage-card__title { line-height: 26px; } .prog-item__title, .stand__name { font-size: 20px; line-height: 26px; } @media (max-width: 900px) { .prog-item__title, .stand__name { font-size: 18px; line-height: 24px; } } .stand { border-top: 0; } /* Programm: Tages-Buttons abgerundet wie alle Buttons (Pill) */ .day-tab { border-radius: 999px; padding: 16px 36px; } .day-tab:focus-visible { outline-offset: 3px; } @media (max-width: 900px) { .day-tab { padding: 12px 20px; } } @media (max-width: 900px) { .day-tab { border-radius: 24px; padding: 14px 16px; } .day-tab span { line-height: 19px; } } /* ===== Responsive-Sicherheitsnetz 15.10.: kein Text darf abgeschnitten werden ===== */ h1, h2, h3, .card__title, .bbt-topic__title, .card__link, .headline-hero, .headline-section { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* Höhenfeuerwerk-Kachel: Titel skaliert mit der Kachelbreite, bricht nie aus */ .bento--feuerwerk { container-type: inline-size; } .bento--feuerwerk .card__title { font-size: clamp(16px, calc((100cqi - 56px) / 10.5), 28px); line-height: 1.1; overflow-wrap: break-word; } /* Countdown: zwischen 640 und 1100 px kleiner, damit alle vier Einheiten passen */ @media (max-width: 1100px) and (min-width: 641px) { .bbt-countdown__units { gap: 24px; } .bbt-countdown__num { font-size: clamp(56px, 9vw, 96px); } } /* Seiten-Hero-H1 auf sehr schmalen Geräten */ @media (max-width: 420px) { .page-hero__title.headline-hero { font-size: 32px; line-height: 34px; } } @media (max-width: 340px) { .page-hero__title.headline-hero { font-size: 28px; line-height: 30px; } } .bento--feuerwerk .card__title { font-size: 26px; line-height: 30px; } /* Lageplan-Legende: Orte über zwei Spalten, Weitere Zeichen unter den Bühnen */ .map-legend__col--orte { grid-column: span 2; } .map-legend__col--orte .map-legend__list { display: block; columns: 2; column-gap: 32px; } .map-legend__col--orte .map-legend__list li { break-inside: avoid; margin-bottom: 8px; } .map-legend__col .map-legend__title.mt-l { margin-top: 40px; } @media (max-width: 1100px) { .map-legend2 { grid-auto-flow: row dense; } .map-legend__col--orte { grid-column: 1 / -1; } } @media (max-width: 640px) { .map-legend__col--orte { grid-column: auto; order: 0; } .map-legend__col--orte .map-legend__list { columns: 1; } } /* Lageplan: Filter-Chips und Zoom-Buttons in einer Zeile, gleiche Höhe */ .map-ui:not(:fullscreen) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; } .map-ui:not(:fullscreen) > *:not(.map-ui__filter):not(.map-ui__bar) { grid-column: 1 / -1; } .map-ui__filter, .map-ui__bar { margin-bottom: 16px; } .map-ui__filter .chip { min-height: 44px; } @media (max-width: 900px) { .map-ui:not(:fullscreen) { grid-template-columns: 1fr; } .map-ui__bar { justify-content: flex-start; } } .map-ui__zoom .bbt-btn { white-space: nowrap; } @media (max-width: 900px) { .map-ui__zoom .bbt-btn { padding-left: 16px; padding-right: 16px; } } .map-ui__zoom { flex-wrap: wrap; } /* Kachel-Links immer unten bündig */ .travel .card__text { margin-bottom: 24px; } .travel .card__link { margin-top: auto; align-self: flex-start; } /* ===== 15.10.: keine automatische Silbentrennung in Überschriften ===== */ h1, h2, h3, h4, .headline-hero, .headline-section, .display, .card__title, .bbt-topic__title, .stage-card__title, .fact-tile__label, .subhead, .card__link, .bbt-eyebrow { hyphens: manual; -webkit-hyphens: manual; } /* ===== 15.10.: alle Icons mit einheitlicher Strichstärke (2,5 px auf dem Bildschirm, unabhängig von Größe und viewBox) ===== */ svg[stroke="currentColor"] :is(path, rect, circle, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; stroke-width: 2.5px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; } /* Kontakte: drei nebeneinander bis 700 px, darunter kompakte Zeilen mit Bild links */ .contacts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .contacts-grid .bbt-contact__photo { width: min(186px, 100%); height: auto; aspect-ratio: 186 / 160; } .contacts-grid .bbt-contact a { overflow-wrap: anywhere; } @media (max-width: 1100px) { .contacts-grid { gap: 20px; } .contacts-grid .bbt-contact { font-size: 15px; line-height: 22px; } } @media (max-width: 699px) { .contacts-grid { grid-template-columns: 1fr; gap: 24px; max-width: 420px; margin-left: auto; margin-right: auto; } .contacts-grid .bbt-contact { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; text-align: left; align-items: center; } .contacts-grid .bbt-contact__photo { grid-row: 1 / span 3; width: 112px; margin: 0; } .contacts-grid .bbt-contact__reach { margin-top: 6px; } } /* Ken-Burns-Bildwechsel im Startseiten-Hero */ .hero__kb { position: absolute; inset: 0; overflow: hidden; } .hero__kb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; transform-origin: 50% 50%; } .hero__kb-img.is-active { opacity: 1; animation: kb-in 9s linear both; } .hero__kb-img.is-active.kb-alt { animation-name: kb-out; } .hero__kb.is-paused .hero__kb-img { animation-play-state: paused; } @keyframes kb-in { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } } @keyframes kb-out { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1) translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .hero__kb-img { transition: none; } .hero__kb-img.is-active { animation: none; } } .hero__kb-toggle { position: absolute; z-index: 3; left: max(40px, calc((100vw - var(--container)) / 2)); top: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 18px 10px 14px; border: 2px solid var(--White); border-radius: 999px; background: rgba(0,0,0,.35); color: var(--White); font: 600 14px/20px var(--font-sans); cursor: pointer; } .hero__kb-toggle:hover { background: rgba(0,0,0,.6); } .hero__kb-toggle:focus-visible { outline: 3px solid var(--White); outline-offset: 3px; } .hero__kb-toggle .kb-play, .hero__kb-toggle.is-paused .kb-pause { display: none; } .hero__kb-toggle.is-paused .kb-play { display: inline; } @media (max-width: 900px) { .hero__kb-toggle { left: 16px; top: 16px; padding: 10px; } .hero__kb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* Themenkacheln Startseite: sichtbarer Link (v115) */ a.bbt-topic:hover .bbt-topic__cta, a.bbt-topic:focus-visible .bbt-topic__cta { text-decoration: underline; text-underline-offset: 4px; } .bbt-topic__cta { display: inline-block; } .bbt-topic__cta > span[aria-hidden] { margin-left: 6px; white-space: nowrap; } /* Pause-Schaltfläche Hero: dezent, nur Symbol (v115) */ .hero__kb-toggle { left: 20px; top: 20px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; gap: 0; border: 1.5px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25); opacity: .8; transition: opacity .2s, background-color .2s; } .hero__kb-toggle:hover, .hero__kb-toggle:focus-visible { opacity: 1; background: rgba(0,0,0,.55); } .hero__kb-toggle svg { width: 16px; height: 16px; } .hero__kb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 900px) { .hero__kb-toggle { left: 12px; top: 12px; padding: 0; } } /* Datums-Badge im Hero: größer, außerhalb des Rasters an der Kante wie Navigation (v116) */ .hero__date, .page-hero__date { right: max(var(--gutter-wide), calc((100vw - var(--container-wide)) / 2 + var(--gutter-wide))); } .hero__date.bbt-date { width: 260px; } .hero__date .bbt-date__text { font-size: 52px; } .page-hero__date.bbt-date { width: 230px; } .page-hero__date .bbt-date__text { font-size: 46px; } @media (max-width: 1279px) { .hero__date.bbt-date, .page-hero__date.bbt-date { width: 210px; } .hero__date .bbt-date__text, .page-hero__date .bbt-date__text { font-size: 42px; } } @media (max-width: 900px) { .hero__date.bbt-date { width: 124px; right: 12px; top: 12px; } .hero__date .bbt-date__text { font-size: 25px; } } @media (min-width: 901px) and (max-width: 1279px) { .page-hero__date { top: 24px; } .page-hero__date.bbt-date { width: 150px; } .page-hero__date .bbt-date__text { font-size: 30px; } } /* Textlinks einheitlich ohne Pfeil, unterstrichen wie .card__link (v116) */ .link-arrow::after { content: none; } .bbt-topic__cta { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } a.bbt-topic:hover .bbt-topic__cta, a.bbt-topic:focus-visible .bbt-topic__cta, .bbt-topic--teaser:hover .bbt-topic__cta { text-decoration: underline; text-decoration-thickness: 2px; } /* Startseite: Sponsorenleiste auf organischen Formen wie die Partnerseite (v116) */ .logo-wall--strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1100px) { .logo-wall--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .logo-wall--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .logo-wall .logo-slot img[src*="logo/sponsor-"] { height: 46px; width: auto; max-width: 100%; max-height: none; } @media (max-width: 1100px) { .logo-wall .logo-slot img[src*="logo/sponsor-"] { height: 36px; } } .fact-tile__note { border-top: 0; padding-top: 0; margin-top: 10px; } /* v116: keine Trennlinie */ /* Platzhalter-Links im Prototyp */ a[href="#"] { position: relative; } .link-pending { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--Anthrazit); color: var(--White); font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: none; white-space: nowrap; pointer-events: none; z-index: 5; } /* Partner: Veranstalter-Reihe mit zwei Logos, mittig (v120) */ .logo-wall--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .logo-wall--two { grid-template-columns: 1fr; max-width: 420px; } } /* Breiteres Inhaltsraster auf großen Bildschirmen (v121) */ @media (min-width: 1500px) { :root { --container: 1360px; } } @media (min-width: 1800px) { :root { --container: 1440px; } } /* Navigation, Meta-Leiste und Footer nutzen die volle Fensterbreite, nur mit Randabstand (v121) */ :root { --container-wide: 100000px; } .meta-nav > .container, .site-header > .container, .site-footer > .container { max-width: none; } /* v123: zwei Grußworte nebeneinander */ .greeting__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 96px); align-items: stretch; } .greeting__grid .greeting__inner { max-width: none; margin: 0; padding: 0; } .greeting__grid .greeting__quote { flex: 1 0 auto; } .greeting__grid .greeting__quote p { font-size: 24px; line-height: 34px; } .greeting__grid .greeting__text { max-width: 100%; } @media (max-width: 900px) { .greeting__grid { grid-template-columns: 1fr; gap: 64px; } } @media (max-width: 640px) { .greeting__grid .greeting__quote p { font-size: 21px; line-height: 30px; } } /* v124: Startseite, drei Sponsoren und Medienpartner */ .logo-wall--strip.logo-wall--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; } @media (max-width: 560px) { .logo-wall--strip.logo-wall--three { grid-template-columns: 1fr; max-width: 260px; } } /* v125: Grußwort-Overlay („Leseansicht“): natives , Desktop zentriert, mobil als Vollbild-Sheet */ .reader { width: min(820px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 0 48px 0 0; background: var(--White); color: var(--Anthrazit); overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 80px rgba(0,0,0,.35); } .reader::backdrop { background: rgba(29, 29, 27, .72); backdrop-filter: blur(4px); } .reader__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 16px 16px 0; pointer-events: none; } .reader__close { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--Anthrazit); color: var(--White); cursor: pointer; } .reader__close:hover { background: var(--Rot); } .reader__close:focus-visible { outline: 3px solid var(--Rot); outline-offset: 3px; } .reader__body { padding: 0 clamp(24px, 6vw, 72px); } .reader__head { display: flex; align-items: center; gap: 24px; margin: -24px 0 32px; padding-bottom: 28px; border-bottom: 2px solid var(--Rot); } .reader__photo { flex: 0 0 auto; width: 112px; height: 112px; object-fit: cover; object-position: 50% 20%; border-radius: 68% 32% 58% 42% / 38% 52% 48% 62%; } .reader__eyebrow { margin: 0 0 6px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--Rot); } .reader__title { margin: 0; font-size: 34px; line-height: 40px; font-weight: 700; hyphens: manual; } .reader__role { margin: 6px 0 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .reader__text { max-width: 64ch; font-size: 19px; line-height: 31px; } .reader__text p { margin: 0 0 20px; } .reader__lead { font-size: 23px; line-height: 34px; } .reader__sign { margin-top: 32px !important; font-weight: 700; } .reader__sign span { display: block; font-weight: 400; font-size: 16px; line-height: 24px; } .reader__foot { display: flex; justify-content: flex-start; padding: 8px clamp(24px, 6vw, 72px) 40px; } html.has-dialog { overflow: hidden; } @media (max-width: 640px) { .reader { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } .reader__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: -40px; } .reader__photo { width: 88px; height: 88px; } .reader__title { font-size: 28px; line-height: 34px; } .reader__text { font-size: 18px; line-height: 29px; } .reader__lead { font-size: 20px; line-height: 30px; } } @media (prefers-reduced-motion: no-preference) { .reader[open] { animation: bbt-rise .35s cubic-bezier(.2,.7,.2,1) both; } .reader[open]::backdrop { animation: bbt-fade .3s ease both; } } @media print { .reader { display: none; } } /* v126: Originallogos der Partner; Headline unter der Dachzeile; Veranstalter und Hauptsponsoren in einer Reihe */ .sponsor-strip__title { margin-bottom: 8px; } .sponsor-strip__headline { margin: 0 auto 32px; max-width: 22ch; text-align: center; text-wrap: balance; } .logo-wall .logo-slot--wide img { width: 82%; height: auto; max-height: none; } .logo-wall .logo-slot--compact img { width: 50%; height: auto; max-height: none; } .logo-wall--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .logo-wall--four { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-inline: auto; } } @media (max-width: 560px) { .logo-wall--four { grid-template-columns: 1fr; max-width: 320px; } } .logo-wall .logo-slot.logo-slot--wide, .logo-wall--big .logo-slot.logo-slot--wide { padding: 10% 7%; } .logo-wall .logo-slot--wide img { width: 100%; } .logo-wall .logo-slot--wide img[src*="partner-mbs"] { width: 86%; } .logo-wall .logo-slot--compact img { width: 46%; } /* v130: Lageplan im Vollbild – Filter-Chips und Zoom-Buttons ebenfalls in einer Zeile */ .map-ui:fullscreen { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 24px; align-items: end; } .map-ui:fullscreen > *:not(.map-ui__filter):not(.map-ui__bar) { grid-column: 1 / -1; } .map-ui:fullscreen .map__viewport { height: 100%; align-self: stretch; } @media (max-width: 900px) { .map-ui:fullscreen { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; } } /* v132: Mobil – nur Burger-Symbol (Wort „Menü“ nur für Screenreader), Logo größer */ @media (max-width: 640px) { .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-toggle { min-width: 44px; padding-right: 8px; } .site-header__logo img { width: 190px; } } @media (max-width: 379px) { .site-header__logo img { width: 168px; } } /* v132: Mobil – Headlines im Seiten-Hero vertikal zentriert (unten Ausgleich für die Rundung) */ @media (max-width: 900px) { .page-hero { align-items: center; } .page-hero__inner, .page-hero--2l .page-hero__inner { padding-top: 24px; padding-bottom: calc(7vw + 8px); } } /* v132: Footer – Spalten als Akkordeon (mobil), Desktop immer offen */ .footer-acc > summary { list-style: none; cursor: default; } .footer-acc > summary::-webkit-details-marker { display: none; } .footer-acc > summary h2 { display: inline; } .footer-acc .mt-s { margin-top: 12px; } @media (min-width: 521px) { .footer-acc > summary { pointer-events: none; } .footer-acc > summary h2 { display: block; } } @media (max-width: 520px) { .site-footer__grid { gap: 0; } .footer-acc { border-top: 1px solid rgba(0,0,0,.15); } .footer-acc:last-child { border-bottom: 1px solid rgba(0,0,0,.15); } .footer-acc > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; } .footer-acc > summary h2 { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: .12em; } .footer-acc > summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2.5px solid var(--Anthrazit); border-bottom: 2.5px solid var(--Anthrazit); transform: translateY(-3px) rotate(45deg); transition: transform .2s; } .footer-acc[open] > summary::after { transform: translateY(3px) rotate(-135deg); } .footer-acc > summary:focus-visible { outline: 3px solid var(--Rot); outline-offset: 2px; } .footer-acc > :not(summary) { padding-bottom: 20px; font-size: 16px; line-height: 24px; } .footer-acc li + li { margin-top: 10px; } } @media (max-width: 520px) and (prefers-reduced-motion: reduce) { .footer-acc > summary::after { transition: none; } } /* v133: Standkacheln – Kategorie, Festareal und Standnummer als Pillen */ .stand__meta { display: flex; flex-wrap: wrap; gap: 8px; } .stand__meta .tag--outline { box-shadow: inset 0 0 0 1.5px var(--Anthrazit); color: var(--Anthrazit); } /* v133: Mobil – Burger-Striche 2 px (Icon-Strichstärke siehe v136) */ @media (max-width: 640px) { .nav-toggle__bars { height: 16px; } .nav-toggle__bars span { height: 2px; } .nav-toggle__bars span:nth-child(2) { top: 7px; } .nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .footer-acc > summary::after { border-width: 0 1.75px 1.75px 0; } } /* v135 – Anker-Navigation (Subnav) mobil ausgeblendet */ @media (max-width: 640px) { .subnav { display: none; } html { scroll-padding-top: calc(var(--header-h) + 16px); } } /* v136 – alle Strich-Icons dünner: 1,5 px auf allen Bildschirmbreiten (vorher 2,5 px Desktop / 1,75 px mobil) */ svg[stroke="currentColor"] :is(path, rect, circle, line, polyline, polygon, ellipse) { stroke-width: 1.5px; } /* ---------- Aktuelles: News-Slider (Startseite, aufgebaut wie die Impressionen-Galerie, rechts angeschnitten) ---------- */ .news__track { display: flex; gap: 12px; margin: 0; padding: 8px var(--gutter) 8px max(var(--gutter), calc((100% - var(--container)) / 2)); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100% - var(--container)) / 2)); scrollbar-width: none; } .news__track::-webkit-scrollbar { display: none; } .news__item { flex: none; width: min(440px, 80vw); scroll-snap-align: start; display: flex; } .news-card { position: relative; display: flex; flex-direction: column; width: 100%; background: #f4f4f2; color: var(--Anthrazit); border-radius: 0 0 90px 0; } .news-card__media { overflow: hidden; } .news-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .news-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 28px; } .news-card__date { margin: 0 0 10px; color: var(--Darkgreen); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .news-card__title { font-size: 22px; line-height: 27px; font-weight: 700; text-transform: uppercase; overflow-wrap: break-word; } .news-card__title a { color: inherit; text-decoration: none; } .news-card__title a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */ .news-card__title a:focus-visible { box-shadow: none; text-decoration: underline; } .news-card:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--White), 0 0 0 6px var(--Anthrazit); } .news-card__text { margin-top: 10px; font-size: 16px; line-height: 24px; } .news-card__more { margin-top: auto; padding-top: 18px; color: var(--Rot); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } .news-card:hover .news-card__more { color: var(--Rot-hover); } .news__nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; } .news__nav .round-btn[aria-disabled="true"] { background: var(--Rot-disabled); color: var(--White); cursor: default; } @media (max-width: 640px) { .news-card__body { padding: 18px 20px 22px; } .news-card__title { font-size: 20px; line-height: 25px; } } /* Aktuelles: Übersicht und Meldungsseiten */ .news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid); margin-bottom: 0; padding: 0; list-style: none; } .news-list .news__item { width: auto; } @media (max-width: 1100px) { .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .news-list { grid-template-columns: 1fr; } } .news-article__back { margin: 0 0 28px; } .news-article__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--Anthrazit); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } .news-article__date { color: var(--Darkgreen); } .news-article__media { margin-left: 0; margin-right: 0; overflow: hidden; border-radius: 0 0 120px 0; } .news-article__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .news-article .prose p { font-size: 17px; line-height: 27px; } .news-more { padding-top: 0; } @media (max-width: 640px) { .news-article__media { border-radius: 0 0 70px 0; } } /* ===== WhatsApp-Kanal der Stadt Beelitz (Footer) ===== Desktop ≥1201 px: kleine Karte als 5. Spalte; bei Hover oder Tastaturfokus wird sie nach links breit (Text links, QR-Code rechts). Esc klappt sie wieder ein (WCAG 1.4.13, site.js). Darunter immer breit, mobil ohne QR-Code. */ .wa-teaser { position: relative; z-index: 2; } .wa-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker code" "title code" "lead code" "link code"; align-content: center; column-gap: 40px; padding: 36px 40px; background: var(--Darkgreen); color: var(--White); border-radius: 0 90px 0 0; } .wa-card__kicker { grid-area: kicker; margin: 0 0 8px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .site-footer__grid .wa-card__title { grid-area: title; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--White); } .wa-card__lead { grid-area: lead; max-width: 34em; margin: 14px 0 0; font-size: 16px; line-height: 24px; } .wa-card__code { grid-area: code; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .wa-card__code svg { display: block; width: 168px; height: 168px; } .wa-card__hint { font-family: var(--font-display); font-size: 24px; line-height: 1; } .site-footer__grid .wa-card__link { grid-area: link; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--White); color: var(--Darkgreen); font-size: 14px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .site-footer__grid .wa-card__link:hover { color: var(--Anthrazit); text-decoration: underline; } .wa-card__link:focus-visible { box-shadow: 0 0 0 3px var(--Darkgreen), 0 0 0 6px var(--White); } @media (max-width: 1200px) { .wa-teaser { grid-column: 1 / -1; margin-top: 16px; } } @media (max-width: 640px) { .wa-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "lead" "link"; padding: 28px 24px 32px; border-radius: 0 60px 0 0; } .wa-card__code { display: none; } /* auf dem Handy führt der Link direkt in WhatsApp, Scannen geht nicht */ .site-footer__grid .wa-card__title { font-size: 40px; } } @media (max-width: 520px) { .wa-teaser { margin-top: 32px; } .wa-card__lead { font-size: 16px; line-height: 24px; } } @media (min-width: 1201px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) 232px; } .wa-card { position: absolute; top: 0; right: 0; width: 232px; padding: 28px 24px; column-gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "code" "link"; justify-items: center; text-align: center; transition: width .25s ease, column-gap .25s ease; } .site-footer__grid .wa-card__title { font-size: 34px; } .wa-card__code { margin-top: 16px; } .wa-card__code svg { width: 150px; height: 150px; } .wa-card__hint { display: none; } .site-footer__grid .wa-card__link { justify-self: center; margin-top: 18px; padding: 0 18px; } .wa-card__kicker, .wa-card__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* eingeklappt nur für Screenreader */ /* Breite Fassung */ .wa-teaser:focus-within:not(.is-dismissed) .wa-card { width: min(720px, calc(100vw - 2 * var(--gutter-wide, 40px))); column-gap: 48px; padding: 40px 44px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker code" "title code" "lead code" "link code"; justify-items: start; text-align: left; box-shadow: 0 18px 48px rgba(0,0,0,.18); } .wa-teaser:focus-within:not(.is-dismissed) .wa-card__title { font-size: 52px; } .wa-teaser:focus-within:not(.is-dismissed) :is(.wa-card__kicker, .wa-card__lead) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .wa-teaser:focus-within:not(.is-dismissed) .wa-card__code { margin-top: 0; } .wa-teaser:focus-within:not(.is-dismissed) .wa-card__code svg { width: 176px; height: 176px; } .wa-teaser:focus-within:not(.is-dismissed) .wa-card__hint { display: block; } .wa-teaser:focus-within:not(.is-dismissed) .wa-card__link { justify-self: start; } } @media (min-width: 1201px) and (hover: hover) { .wa-teaser:hover:not(.is-dismissed) .wa-card { width: min(720px, calc(100vw - 2 * var(--gutter-wide, 40px))); column-gap: 48px; padding: 40px 44px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker code" "title code" "lead code" "link code"; justify-items: start; text-align: left; box-shadow: 0 18px 48px rgba(0,0,0,.18); } .wa-teaser:hover:not(.is-dismissed) .wa-card__title { font-size: 52px; } .wa-teaser:hover:not(.is-dismissed) :is(.wa-card__kicker, .wa-card__lead) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .wa-teaser:hover:not(.is-dismissed) .wa-card__code { margin-top: 0; } .wa-teaser:hover:not(.is-dismissed) .wa-card__code svg { width: 176px; height: 176px; } .wa-teaser:hover:not(.is-dismissed) .wa-card__hint { display: block; } .wa-teaser:hover:not(.is-dismissed) .wa-card__link { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .wa-card { transition: none; } } @media (max-width: 520px) { .footer-acc:has(+ .wa-teaser) { border-bottom: 1px solid rgba(0,0,0,.15); } } /* BBT: Sichtbarkeit aller Inhalte sicherstellen */ html.anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }