:root {
  --bg:#f7f7f7; --surface:#ffffff; --surface-soft:#fafafa; --ink:#111111; --muted:#5f5f5f; --line:#e6e6e6;
  --title-font:"Arial Narrow","Helvetica Neue",Arial,sans-serif; --body-font:Georgia,"Times New Roman",serif;
  --radius-lg:24px; --radius-md:18px; --shadow:0 18px 36px rgba(0,0,0,.05);
}
*,
*::before,
*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:var(--body-font); background:var(--bg); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.site-header__top, .content { width:min(1180px, calc(100% - 2rem)); margin:0 auto; }
.site-header__top, .site-header__main, .meta-nav, .main-nav, .tabs-bar, .section-head--row, .product-card__bottom { display:flex; align-items:center; }
.site-header__top { justify-content:space-between; align-items:flex-end; gap:1.25rem; padding:.2rem 0 .15rem; }
.site-header__left { display:grid; align-content:end; gap:.05rem; min-width:260px; }
.site-header__right { display:flex; flex:1; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:.15rem; min-width:0; padding-top:0; padding-bottom:.2rem; }
.site-header__main { width:100%; justify-content:space-between; align-items:flex-end; gap:.8rem; padding:0; margin-top:0; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; line-height:0; }
.brand--werkstattfilm img { height:144px !important; width:auto; max-width:none; }
.brand--footer img { height:64px !important; width:auto; max-width:none; }
.meta-nav, .main-nav { margin:0; padding:0; list-style:none; }
.meta-nav li, .main-nav li { list-style:none; }
.wsf-text-logo, .page-mark, .meta-nav a, .main-nav a, .eyebrow, .panel-kicker, .tabs-bar span, .section-head p, .section-note, .product-card__label, .month-box span, .site-footer h3, .event-card__action, .booking-panel a {
  font-family:var(--title-font); text-transform:uppercase; letter-spacing:.12em;
}
.meta-nav, .main-nav { flex-wrap:wrap; gap:.55rem .7rem; }
.meta-nav { justify-content:flex-end; }
.main-nav { justify-content:flex-end; width:100%; }
.meta-nav a, .main-nav a, .page-mark { font-size:.75rem; }
.page-mark { padding-top:0; line-height:1.05; margin-top:-.15rem; }
.content { display:grid; gap:1.35rem; padding:1.5rem 0 2rem; }
.hero, .tabs-bar, .news-section, .video-section, .article-preview, .products-section, .events-section, .site-footer, .content-section, .booking-section, .overview-section, .project-section, .logic-section, .new-products-section, .categories-section, .tickets-section, .detail-section, .films-section, .collections-section, .notice-section, .member-section, .statute-section, .full-text-section {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.hero, .news-section, .video-section, .article-preview, .products-section, .events-section, .content-section, .booking-section, .overview-section, .project-section, .logic-section, .new-products-section, .categories-section, .tickets-section, .detail-section, .films-section, .collections-section, .notice-section, .member-section, .statute-section, .full-text-section { padding:1.5rem; }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:1.25rem; }
.eyebrow, .section-head p, .product-card__label, .section-note, .month-box span, .panel-kicker { margin:0; color:var(--muted); font-size:.72rem; }
h1, h2, h3 { margin:0; font-family:var(--title-font); line-height:1.05; text-transform:uppercase; }
h1 { font-size:clamp(1.5rem,2.4vw,2.2rem); }
h2 { max-width:26ch; font-size:clamp(1.05rem,1.8vw,1.45rem); line-height:1.2; }
h3 { font-size:clamp(.96rem,1.3vw,1.15rem); line-height:1.2; }
.hero h1 { max-width:13ch; font-size:clamp(1.65rem,3vw,2.6rem); }
.article-preview h1, .content-section h1 { max-width:30ch; font-size:clamp(1.3rem,2vw,1.85rem); line-height:1.08; }
p, li, .rich-copy p, .rich-copy li { color:var(--muted); line-height:1.65; }
.support-box, .info-box, .contact-card, .category-card, .logic-card, .tickets-panel, .project-tile, .project-section__facts, .member-card, .statute-card, .full-text-box, .notice-box, .collection-card, .booking-panel {
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-soft); padding:1rem;
}
.support-box, .info-box { display:grid; gap:.55rem; margin-top:1.15rem; }
.support-box__text p { margin:.2rem 0; }
.info-box ul, .notice-box ul, .rich-copy ul { margin:0; padding-left:1.1rem; }
.notice-box--video { margin-top:1rem; }
.notice-box--video h3 { margin-bottom:.45rem; font-size:1rem; }
.notice-box--video p { margin:.25rem 0; }
.notice-box--video li { line-height:1.45; }
.hero__visual { position:relative; min-height:24rem; border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.08)), linear-gradient(135deg, #d8d8d8 0%, #8d8d8d 40%, #f4f4f4 100%); }
.hero__visual:has(img) { background:#101010; }
.kinoladen-brand img { width:min(100%, 240px); border-radius:22px; }
.hero-card { position:absolute; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.45); background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)), linear-gradient(135deg, #0f0f0f 0%, #6a6a6a 52%, #ededed 100%); }
.hero-card--large { inset:10% 35% 14% 8%; }
.hero-card--small { inset:36% 10% 10% 60%; }
.tabs-bar { gap:1rem; padding:.9rem 1.5rem; }
.tabs-bar span { color:var(--muted); font-size:.78rem; }
.tabs-bar .is-active { color:var(--ink); }
.section-head { display:grid; gap:.25rem; margin-bottom:.6rem; }
.section-head--row { justify-content:space-between; gap:1rem; }
.news-grid, .products-grid, .project-grid, .logic-grid, .member-grid, .statute-list, .collection-grid, .category-grid { display:grid; gap:1rem; }
.news-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.products-grid { grid-template-columns:1.4fr 1fr 1fr; }
.news-grid { gap:.7rem; }
.news-card, .product-card, .film-card { display:grid; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-soft); }
.news-card { grid-template-columns:180px minmax(0,1fr); align-items:stretch; }
.news-card { border:0; box-shadow:none; }
.news-card__image-link { display:block; height:100%; }
.news-card__image, .article-preview__image, .product-card__image, .detail-layout__image, .film-card__image { min-height:10rem; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.2)), linear-gradient(135deg, #181818 0%, #7a7a7a 45%, #f1f1f1 100%); }
.news-card__image { height:100%; min-height:100%; }
.product-card--feature .product-card__image, .film-card--feature .film-card__image { min-height:16rem; }
.news-card__image img, .product-card__image img, .article-preview__image img, .detail-layout__image img, .hero__visual img, .film-card__image img { width:100%; height:100%; object-fit:cover; }
.news-card__content, .product-card__content, .film-card__content { display:grid; gap:.4rem; padding:.75rem .85rem; }
.news-card__content h3 { font-size:.88rem; line-height:1.18; }
.news-card__content p { margin:0; line-height:1.45; }
.news-card__content a:last-child { font-size:.82rem; }
.video-frame { position:relative; width:100%; padding-top:56.25%; border-radius:var(--radius-md); overflow:hidden; background:#000; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.article-preview__layout, .detail-layout, .project-section__layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:1rem; }
.product-card__bottom, .detail-actions { justify-content:space-between; gap:.75rem; }
.events-grid, .events-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
.foerderverein-layout { display:grid; grid-template-columns:minmax(0,1.55fr) 320px; align-items:start; gap:1.5rem; }
.foerderverein-main { max-width:none; }
.foerderverein-main h1 { margin:.2rem 0 1rem; }
.foerderverein-statute h2 { margin:.2rem 0 1rem; max-width:none; }
.foerderverein-side { display:grid; gap:.5rem; align-content:start; }
.month-box { display:grid; gap:.5rem; padding:1.1rem; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-soft); }
.site-footer { display:grid; grid-template-columns:1.25fr 1fr 1fr; align-items:end; gap:.35rem; padding:.2rem .7rem; background:#050505; border-color:#050505; box-shadow:none; }
.footer-column { display:grid; align-content:end; gap:.05rem; }
.footer-column--brand { align-self:end; }
.footer-column--nav { padding-bottom:.15rem; }
.site-footer h3, .site-footer p, .site-footer a { color:rgba(255,255,255,.78); }
.site-footer h3 { margin:0 0 .12rem; font-size:.72rem; }
.site-footer p, .site-footer a { margin:0; font-size:.8rem; line-height:1.25; }
.footer-address { display:grid; gap:.08rem; }
.news-download img { width:min(100%,540px); border-radius:10px; }
@media (max-width:980px) {
  .hero, .news-grid, .products-grid, .article-preview__layout, .project-grid, .logic-grid, .member-grid, .statute-list, .collection-grid, .category-grid, .events-grid, .events-list, .site-footer, .foerderverein-layout { grid-template-columns:1fr; }
  .news-card { grid-template-columns:140px minmax(0,1fr); }
  .footer-column--nav { padding-bottom:0; }
}
@media (max-width:720px) {
  .site-header__top, .site-header__main, .section-head--row { align-items:flex-start; flex-direction:column; }
  .site-header__top, .content { width:min(100%, calc(100% - 1rem)); }
  .site-header__left { min-width:0; }
  .site-header__right { width:100%; padding-top:0; align-items:flex-start; }
  .site-header__main { margin-top:0; }
  .brand--werkstattfilm img { height:96px !important; }
  .brand--footer img { height:84px !important; }
  .hero, .news-section, .video-section, .article-preview, .products-section, .events-section, .site-footer, .content-section, .booking-section, .overview-section, .project-section, .logic-section, .new-products-section, .categories-section, .tickets-section, .detail-section, .films-section, .collections-section, .notice-section, .member-section, .statute-section, .full-text-section { padding:1rem; }
  .news-card { grid-template-columns:1fr; }
}