@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Manrope:wght@500;700;800&display=swap');
:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; background: #111110; color: #f7f2e8; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at 80% 15%, #302519 0, #111110 30rem); } h1, h2, h3 { font-family: 'Manrope', sans-serif; }
h1[tabindex="-1"]:focus { outline: none; }
.hero { align-items: center; display: grid; gap: 6rem; grid-template-columns: 1.35fr .65fr; margin: 4rem auto 8rem; max-width: 1280px; min-height: 62vh; padding: 0 2rem; }
.eyebrow { color: #f0a24a; font-size: .75rem; font-weight: 700; letter-spacing: .22em; }
.hero h1 { font-size: clamp(3.7rem, 8vw, 7.4rem); letter-spacing: -.065em; line-height: .92; margin: 1.5rem 0; } .hero h1 span { color: #f0a24a; }
.hero-copy { color: #aaa59c; font-size: 1.2rem; line-height: 1.7; max-width: 37rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .button { border-radius: 999px; font-weight: 700; padding: .9rem 1.4rem; text-decoration: none; } .button-primary { background: #f0a24a; color: #171716; } .button-ghost { border: 1px solid #55514b; color: #f7f2e8; }
.hero-card { aspect-ratio: .72; background: linear-gradient(180deg, rgba(0,0,0,.05), #18130f), radial-gradient(circle at 60% 30%, #c87a39, #3a2419 42%, #151413 72%); border: 1px solid #4b3828; display: flex; flex-direction: column; padding: 1.6rem; transform: rotate(2deg); }
.hero-card .card-label { align-self: flex-start; background: #f0a24a; color: #171716; font-size: .65rem; font-weight: 700; letter-spacing: .12em; padding: .45rem .65rem; text-transform: uppercase; } .card-spacer { flex: 1; } .hero-card p, .hero-card span { color: #c6b8a9; margin: 0; } .hero-card h2 { font-size: 2.6rem; margin: .25rem 0 .5rem; }
.program { align-items: end; border-bottom: 1px solid #3a3834; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1280px; padding: 0 2rem 2rem; } .program h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: .8rem 0 0; } .section-copy { color: #96918a; line-height: 1.6; max-width: 30rem; }
.feature-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1280px; padding: 3rem 2rem; } .feature-grid article { border-left: 1px solid #34322f; padding: 1rem 2rem 2rem; } .feature-grid article:first-child { border-left: 0; } .feature-grid span { color: #f0a24a; font-size: .75rem; } .feature-grid h3 { font-size: 1.5rem; margin: 2.5rem 0 .8rem; } .feature-grid p { color: #96918a; line-height: 1.6; }
@media (max-width: 800px) { .hero { gap: 3rem; grid-template-columns: 1fr; margin: 2rem auto 5rem; } .hero-card { aspect-ratio: 1.2; } .program { align-items: flex-start; flex-direction: column; } .feature-grid { grid-template-columns: 1fr; } .feature-grid article, .feature-grid article:first-child { border-left: 0; border-top: 1px solid #34322f; padding-left: 0; } }

.page-content, .account-panel { margin: 4rem auto; max-width: 1280px; padding: 0 2rem; }
.page-content > h1, .account-panel h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -.05em; margin: .75rem 0 2rem; }
.account-panel { background: #191918; border: 1px solid #34322f; border-radius: 1.25rem; max-width: 720px; padding: clamp(1.5rem, 5vw, 3.5rem); }
.account-panel form, .panel form { display: grid; gap: 1rem; margin: 2rem 0; }
.account-panel label, .panel label { color: #ded9e0; display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }.form-grid .full { grid-column: 1/-1; }
.form-control, .search-box input { background: #111110; border: 1px solid #46433e; border-radius: .65rem; color: #f7f2e8; padding: .8rem 1rem; width: 100%; }.form-control:focus, .search-box input:focus { border-color: #f0a24a; box-shadow: 0 0 0 .2rem rgba(240,162,74,.15); outline: 0; }
.check { align-items: center; display: flex !important; gap: .5rem; }.muted { color: #c8c2cb; }.notice { background: #2b241b; border-left: 3px solid #f0a24a; padding: 1rem; }
.admin-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }.panel { background: #191918; border: 1px solid #34322f; border-radius: 1rem; margin-bottom: 1.5rem; padding: 1.5rem; }.panel h2 { margin-top: 0; }.admin-row { align-items: center; border-top: 1px solid #34322f; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 0; }.admin-row small { color: #96918a; display: block; margin-top: .35rem; }
.movie-select { max-width: 320px; }
.search-box { display: flex; gap: .75rem; margin-bottom: 2rem; max-width: 700px; }.movie-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); margin: 2rem 0 4rem; }.movie-card { background: #191918; border: 1px solid #34322f; border-radius: .8rem; overflow: hidden; }.movie-card img { aspect-ratio: 2/3; object-fit: cover; width: 100%; }.movie-card div { padding: 1rem; }.movie-card h3 { margin-top: 0; }
.section-heading { align-items: end; border-bottom: 1px solid #34322f; display: flex; justify-content: space-between; margin-top: 3rem; }.suggestion-list, .event-list { display: grid; gap: 1.25rem; margin-top: 2rem; }.suggestion-card { background: #191918; border: 1px solid #34322f; border-radius: 1rem; display: grid; grid-template-columns: 160px 1fr; overflow: hidden; }.suggestion-card > img { height: 100%; object-fit: cover; width: 100%; }.suggestion-info { padding: 1.5rem; }.suggestion-info h2 { margin-top: 0; }.vote-row { align-items: center; display: flex; gap: .5rem; margin-top: 1.5rem; }.vote { background: #272522; border: 1px solid #4b4842; border-radius: 50%; color: #ddd7cd; cursor: pointer; height: 2.4rem; width: 2.4rem; }.vote.selected { background: #f0a24a; color: #171716; }
.vote-details { border-top: 1px solid #34322f; margin-top: 1rem; padding-top: .8rem; }.vote-details summary { color: #f3a952; cursor: pointer; font-weight: 700; width: fit-content; }.vote-details summary:hover { color: #ffc477; }.vote-details ul { list-style: none; margin: .8rem 0 0; max-width: 28rem; padding: 0; }.vote-details li { align-items: center; border-bottom: 1px solid #2d2b29; display: flex; justify-content: space-between; padding: .45rem 0; }.vote-details li:last-child { border-bottom: 0; }.vote-details li strong { color: #f2eee8; }
.vote-editor { margin-top: 1.5rem; max-width: 42rem; }.vote-editor label { display: block; font-weight: 700; margin-bottom: .45rem; }.vote-editor textarea { min-height: 4.5rem; resize: vertical; }.vote-editor .vote-row { margin-top: .75rem; }.comment-save { background: none; border: 0; color: #f3a952; cursor: pointer; margin-top: .7rem; padding: 0; text-decoration: underline; }.comment-save:hover { color: #ffc477; }.vote-details li > div { min-width: 0; padding-right: 1rem; }.vote-details li p { color: #cfc9c1; margin: .2rem 0 0; overflow-wrap: anywhere; }.vote-details li > strong { flex: 0 0 auto; }
.event-card { background: #191918; border: 1px solid #34322f; border-radius: 1rem; display: grid; grid-template-columns: 95px 180px 1fr; overflow: hidden; }.event-date { align-items: center; border-right: 1px solid #34322f; display: flex; flex-direction: column; padding: 1.5rem .5rem; }.event-date strong { color: #f0a24a; font-size: 2.5rem; }.event-date span { font-weight: 700; }.event-date small { color: #96918a; margin-top: .5rem; }.event-poster { height: 100%; object-fit: cover; width: 100%; }.event-info { padding: 1.75rem; }.event-info h2 { font-size: 2rem; margin: .4rem 0; }.event-info h3 { color: #f0a24a; }.people { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }.people span, .status { background: #272522; border-radius: 999px; color: #c9c3ba; font-size: .8rem; padding: .4rem .7rem; }.status { margin-left: .75rem; }.rating { align-items: center; display: flex; gap: .15rem; margin-top: 1.5rem; }.star { background: none; border: 0; color: #55514b; cursor: pointer; font-size: 1.6rem; padding: .1rem; }.star.selected { color: #f0a24a; }
@media (max-width: 800px) { .admin-grid, .form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.event-card { grid-template-columns: 75px 1fr; }.event-poster { display: none; }.suggestion-card { grid-template-columns: 100px 1fr; }.section-heading { align-items: flex-start; flex-direction: column; }.search-box { flex-direction: column; } }

/* Cinewilke – persönliches Heimkino */
body { background: #09090b; color: #f8f5f8; }
p { color: #e0dbe2; }
.panel p, .account-panel p, .event-info p, .suggestion-info p { color: #d8d3da; }
.event-admin-row { align-items: flex-start; }.event-admin-fields { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }.event-admin-fields input { width: auto; }.event-admin-fields .button, .event-admin-fields .button-danger { white-space: nowrap; }
.archive-list { display: grid; gap: 1.25rem; margin-top: 2rem; }.archive-card { background: #191918; border: 1px solid #34322f; border-radius: 1rem; display: grid; grid-template-columns: 180px 1fr; overflow: hidden; }.archive-card > img { height: 100%; max-height: 420px; object-fit: cover; width: 100%; }.archive-info { padding: 1.75rem; }.archive-info h2 { font-size: 2rem; margin: .35rem 0 .6rem; }
@media (max-width: 800px) { .archive-card { grid-template-columns: 100px 1fr; }.archive-info { padding: 1.2rem; }.archive-info h2 { font-size: 1.5rem; } }
.panel small, .admin-row small, .event-date small { color: #c8c2cb; font-weight: 500; }
.form-control, .search-box input { color: #fff; }
.form-control::placeholder, .search-box input::placeholder { color: #aaa4ae; opacity: 1; }
.eyebrow { color: #ff4f64; }
.button-primary { background: #ff4f64; color: #fff; transition: transform .2s ease, background .2s ease; }
.button-primary:hover { background: #ff6678; color: #fff; transform: translateY(-2px); }
.button-glass { backdrop-filter: blur(12px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); color: #fff; }
.button-glass:hover { background: rgba(255,255,255,.14); color: #fff; }
.home-hero { background-image: linear-gradient(90deg, rgba(5,5,8,.94) 0%, rgba(5,5,8,.72) 39%, rgba(5,5,8,.12) 72%), linear-gradient(0deg, #09090b 0%, transparent 28%), url('/images/cinewilke-hero.webp'); background-position: center; background-size: cover; display: flex; min-height: min(820px, calc(100vh - 76px)); position: relative; }
.home-hero-content { align-self: center; margin-left: max(2rem, calc((100vw - 1280px)/2 + 2rem)); max-width: 700px; padding: 5rem 0 8rem; position: relative; z-index: 1; }
.home-hero h1 { font-size: clamp(4.2rem, 9vw, 8.6rem); letter-spacing: -.075em; line-height: .85; margin: 1.5rem 0 2rem; text-wrap: balance; }
.home-hero h1 span { background: linear-gradient(100deg, #ff4f64, #7988ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero-content > p:not(.eyebrow) { color: #d1ccd0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.7; max-width: 36rem; }
.hero-caption { align-items: center; bottom: 3rem; display: flex; gap: 1rem; position: absolute; right: max(2rem, calc((100vw - 1280px)/2 + 2rem)); }
.hero-caption span { color: #ff4f64; font-size: .72rem; }.hero-caption p { border-left: 1px solid rgba(255,255,255,.35); color: #e5dfe3; font-size: .82rem; letter-spacing: .08em; margin: 0; padding-left: 1rem; text-transform: uppercase; }
.next-night { margin: 0 auto; max-width: 1280px; padding: 7rem 2rem 2rem; }
.next-night-image { align-items: center; background-position: center; background-size: cover; border: 1px solid #35323a; border-radius: 1.4rem; display: flex; min-height: 570px; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); position: relative; }
.next-night-content { max-width: 620px; position: relative; z-index: 2; }.next-date { color: #e7dfe4; font-weight: 700; margin: 1.25rem 0; text-transform: capitalize; }.next-night h2 { font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.06em; line-height: .95; margin: 0 0 1.25rem; }.next-night .button { display: inline-block; margin-top: 1rem; }
.next-poster { border: 1px solid rgba(255,255,255,.25); border-radius: .5rem; box-shadow: 0 24px 80px rgba(0,0,0,.55); max-height: 430px; position: absolute; right: 7%; transform: rotate(3deg); }
.home-intro { display: grid; gap: 5rem; grid-template-columns: .85fr 1.15fr; margin: 0 auto; max-width: 1280px; padding: 9rem 2rem 5rem; }.home-intro h2 { font-size: clamp(2.7rem, 5vw, 4.8rem); letter-spacing: -.055em; line-height: 1.02; margin-top: 1rem; }.home-steps { display: grid; gap: 0; }.home-steps article { border-top: 1px solid #4a464e; display: grid; gap: 1rem; grid-template-columns: 45px 1fr 1.3fr; padding: 1.7rem 0; }.home-steps span { color: #ff4f64; font-size: .75rem; }.home-steps h3, .home-steps p { margin: 0; }.home-steps p { color: #d0cad2; font-size: 1.02rem; line-height: 1.65; }
.vote.selected { background: #ff4f64; }.event-date strong, .event-info h3, .star.selected { color: #ff4f64; }.form-control:focus, .search-box input:focus { border-color: #ff4f64; box-shadow: 0 0 0 .2rem rgba(255,79,100,.14); }.notice { background: #281a20; border-left-color: #ff4f64; }
.suggestion-title-row { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }.suggestion-title-row h2 { margin-bottom: .5rem; }.button-danger { background: transparent; border: 1px solid #ff6678; border-radius: 999px; color: #ff9eaa; cursor: pointer; font-size: .78rem; font-weight: 700; padding: .45rem .75rem; }.button-danger:hover { background: #ff4f64; color: #fff; }
.movie-meta, .movie-year { color: #ff9eaa !important; font-weight: 700; }.movie-overview { line-height: 1.65; max-width: 72ch; }.movie-search-overview { color: #c8c2cb !important; display: -webkit-box; font-size: .88rem; line-height: 1.5; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }.movie-card .button { display: inline-block; margin-top: .5rem; }
.movie-search-credit { color: #d7d1d9 !important; font-size: .82rem; line-height: 1.45; margin: .35rem 0; }.event-poster-mobile, .suggestion-poster-mobile { display: none; }
.watch-providers { background: #222024; border-left: 3px solid #7988ff; border-radius: .5rem; margin: 1.25rem 0; padding: .9rem 1rem; }.watch-providers > strong { color: #fff; }.watch-providers p { font-size: .9rem; margin: .45rem 0; }.watch-providers p span { color: #b9b0bd; font-weight: 700; }.watch-providers a { color: #aeb7ff; display: inline-block; font-size: .78rem; margin-top: .35rem; }
@media (max-width: 900px) { .home-hero { background-image: linear-gradient(90deg, rgba(5,5,8,.88), rgba(5,5,8,.25)), linear-gradient(0deg, #09090b 0%, transparent 40%), url('/images/cinewilke-hero.webp'); background-position: 58% center; }.home-hero-content { margin: auto 1.5rem; padding-bottom: 8rem; }.hero-caption { display: none; }.next-night { padding: 4rem 1rem 1rem; }.next-night-image { min-height: 620px; padding: 2rem; }.next-night-content { align-self: flex-end; }.next-poster { max-height: 290px; right: 8%; top: 7%; }.home-intro { gap: 2rem; grid-template-columns: 1fr; padding-top: 6rem; }.home-steps article { grid-template-columns: 36px 1fr; }.home-steps article p { grid-column: 2; } }
@media (max-width: 560px) { .home-hero h1 { font-size: 4rem; }.next-poster { max-height: 220px; }.next-night-image { min-height: 570px; }.home-steps article { grid-template-columns: 30px 1fr; } }
@media (max-width: 800px) { .page-content { margin-top: 2.5rem; padding: 0 1rem; }.event-card { grid-template-columns: 68px minmax(0,1fr); }.event-info { padding: 1.2rem; }.event-poster-mobile, .suggestion-poster-mobile { border-radius: .6rem; display: block; height: auto; margin: 1rem 0 1.25rem; max-height: 420px; object-fit: cover; width: min(100%,280px); }.suggestion-card { grid-template-columns: 1fr; }.suggestion-card > img { display: none; }.suggestion-info { padding: 1.2rem; }.suggestion-title-row { align-items: center; }.vote-row { flex-wrap: wrap; } }