/* =========================================================== CSC Karlsruhe — 2026/27 Modernes, seriöses, aber verspieltes Cannabis-Verein-Design =========================================================== */ :root{ --ink: #16241c; --ink-soft: #3c5245; --paper: #faf8f2; --paper-dim: #f1ece0; --green-900: #12241a; --green-700: #1f4d34; --green-600: #2f6b46; --green-400: #6fbf82; --lime-300: #b9e88b; --lime-200: #d7f3ab; --sun: #f3d16c; --line: rgba(22,36,28,0.12); --shadow: 0 20px 50px -20px rgba(18,36,26,0.35); --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --ff-display: "Fraunces", serif; --ff-body: "Inter", system-ui, sans-serif; --card: #ffffff; --nav-bg: rgba(250,248,242,0.72); --nav-hover: var(--green-700); } /* Dark mode: follows system preference by default, or manual toggle via [data-theme] on . No cookies/localStorage are used anywhere - the toggle only changes this attribute for the current page view and resets on reload. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink: #eef3ee; --ink-soft: #c3d2c8; --paper: #10201a; --paper-dim: #16281f; --card: #1b3226; --line: rgba(238,243,238,0.14); --shadow: 0 20px 50px -20px rgba(0,0,0,0.6); --nav-bg: rgba(16,32,26,0.82); --nav-hover: var(--lime-300); } } :root[data-theme="dark"]{ --ink: #eef3ee; --ink-soft: #c3d2c8; --paper: #10201a; --paper-dim: #16281f; --card: #1b3226; --line: rgba(238,243,238,0.14); --shadow: 0 20px 50px -20px rgba(0,0,0,0.6); --nav-bg: rgba(16,32,26,0.82); --nav-hover: var(--lime-300); } :root[data-theme="light"]{ --ink: #16241c; --ink-soft: #3c5245; --paper: #faf8f2; --paper-dim: #f1ece0; --card: #ffffff; --line: rgba(22,36,28,0.12); --shadow: 0 20px 50px -20px rgba(18,36,26,0.35); --nav-bg: rgba(250,248,242,0.72); --nav-hover: var(--green-700); } /* Constants: a few decorative surfaces (dark quote card, the "Mitglied werden" panel, the small dark button) are ALWAYS a deep forest green with light text on top, regardless of theme - they don't flip with light/dark mode. */ :root{ --forest: #12241a; --paper-on-forest: #faf8f2; } body{ transition:background-color .35s ease, color .35s ease; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html,body{ -webkit-tap-highlight-color:transparent; overflow-x:hidden; } a,button{ touch-action:manipulation; } body{ margin:0; font-family:var(--ff-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3{ font-family:var(--ff-display); font-weight:600; line-height:1.08; margin:0 0 0.5em; } p{ line-height:1.65; margin:0 0 1em; color:var(--ink-soft); } /* subtle film-grain overlay for texture, no external image needed */ .grain{ position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.035; mix-blend-mode:multiply; background-image:radial-gradient(rgba(0,0,0,0.9) 1px, transparent 1px); background-size:3px 3px; } /* ---------- NAV ---------- */ .nav-wrap{ position:sticky; top:0; z-index:100; padding:16px 5vw; transition:padding .3s ease; } .nav{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border:1px solid var(--line); border-radius:999px; padding:10px 12px 10px 22px; box-shadow:0 8px 30px -18px rgba(18,36,26,0.4); } .logo{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:600; font-size:1.05rem; color:var(--ink); } .logo-leaf{ width:22px; height:22px; color:var(--green-600); } .logo-img{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; flex-shrink:0; } .nav-links{ display:flex; align-items:center; gap:28px; } .nav-links a:not(.btn){ font-size:0.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0; transition:color .25s ease; } .nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--nav-hover); border-radius:2px; transition:right .28s cubic-bezier(.4,0,.2,1); } .nav-links a:not(.btn):hover{ color:var(--nav-hover); } .nav-links a:not(.btn):hover::after{ right:0; } .nav-right{ display:flex; align-items:center; gap:10px; } .theme-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--paper-dim); cursor:pointer; position:relative; flex-shrink:0; transition:background .25s ease, transform .25s ease; } .theme-toggle:hover{ transform:translateY(-1px); } .theme-icon{ position:absolute; font-size:1rem; line-height:1; transition:opacity .3s ease, transform .4s ease; } .theme-icon-sun{ opacity:1; transform:scale(1) rotate(0deg); } .theme-icon-moon{ opacity:0; transform:scale(0.5) rotate(-40deg); } :root[data-theme="dark"] .theme-icon-sun{ opacity:0; transform:scale(0.5) rotate(40deg); } :root[data-theme="dark"] .theme-icon-moon{ opacity:1; transform:scale(1) rotate(0deg); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-icon-sun{ opacity:0; transform:scale(0.5) rotate(40deg); } :root:not([data-theme="light"]) .theme-icon-moon{ opacity:1; transform:scale(1) rotate(0deg); } } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border:none; background:none; cursor:pointer; } .nav-toggle span{ width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease; } /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border-radius:999px; font-weight:600; font-size:0.95rem; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease; white-space:nowrap; } .btn-primary{ background:var(--green-700); color:var(--paper-on-forest); box-shadow:0 12px 24px -10px rgba(31,77,52,0.55); } .btn-primary:hover{ transform:translateY(-2px) scale(1.02); background:var(--green-600); } .btn:active{ transform:scale(0.96); } .btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn-ghost:hover{ background:rgba(31,77,52,0.06); transform:translateY(-2px); } .btn-ghost-light{ color:var(--paper-on-forest); opacity:.85; } .btn-ghost-light:hover{ opacity:1; } .btn-small{ padding:9px 18px; font-size:0.85rem; background:var(--forest); color:var(--paper-on-forest); } .btn-small:hover{ background:var(--green-700); } .btn-block{ width:100%; } /* ---------- HERO ---------- */ .hero{ position:relative; min-height:92vh; display:flex; align-items:center; padding:80px 5vw 60px; overflow:hidden; } .hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; } .eyebrow{ display:inline-block; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-700); font-weight:700; margin-bottom:18px; background:var(--lime-200); padding:7px 16px; border-radius:999px; } .hero h1{ font-size:clamp(2.4rem, 6vw, 4.4rem); color:var(--ink); letter-spacing:-0.01em; } .highlight{ color:var(--green-600); position:relative; white-space:nowrap; } .highlight::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:6%; height:0.32em; background:var(--lime-200); z-index:-1; border-radius:6px; } .hero-sub{ font-size:1.15rem; max-width:560px; margin:22px auto 34px; color:var(--ink-soft); } .hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .hero-blob{ position:absolute; border-radius:50%; filter:blur(2px); z-index:0; } .blob-a{ width:640px; height:640px; top:-220px; right:-200px; background:radial-gradient(circle at 30% 30%, var(--lime-200), var(--green-400) 70%); opacity:0.55; animation:drift 16s ease-in-out infinite; } .blob-b{ width:420px; height:420px; bottom:-180px; left:-140px; background:radial-gradient(circle at 60% 40%, var(--sun), transparent 70%); opacity:0.35; animation:drift 20s ease-in-out infinite reverse; } @keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-20px,26px) scale(1.06); } } .hero-leaf{ position:absolute; width:64px; height:64px; color:var(--green-600); opacity:0.35; z-index:1; } .leaf-1{ top:18%; left:8%; width:52px; } .leaf-2{ top:62%; right:10%; width:70px; transform:rotate(40deg); } .leaf-3{ bottom:10%; left:22%; width:40px; transform:rotate(-25deg); } .float-slow{ animation:float 7s ease-in-out infinite; } .float-slower{ animation:float 10s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(8deg); } } /* ---------- STRIP ---------- */ .strip{ padding:10px 5vw 90px; } .strip-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .strip-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 24px; transition:transform .3s ease, box-shadow .3s ease; } .strip-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); } .strip-icon{ font-size:1.8rem; display:block; margin-bottom:14px; } .strip-item h3{ font-size:1.05rem; margin-bottom:8px; } .strip-item p{ font-size:0.92rem; margin:0; } /* ---------- SECTIONS ---------- */ .section{ padding:110px 5vw; } .section-inner{ max-width:1200px; margin:0 auto; } .two-col{ display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; } .two-col.reverse{ grid-template-columns:1fr 1.1fr; } .two-col.reverse > *:first-child{ order:2; } .kicker{ font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-600); font-weight:700; margin-bottom:14px; display:block; } .kicker-light{ color:var(--lime-300); } .center{ text-align:center; } .section h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:640px; } .section h2.center{ margin-left:auto; margin-right:auto; } .lead{ font-size:1.1rem; color:var(--ink-soft); } .small-note{ font-size:0.88rem; padding:14px 16px; background:var(--paper-dim); border-left:3px solid var(--green-600); border-radius:8px; color:var(--ink-soft); } .link-arrow{ display:inline-block; margin-top:8px; font-weight:600; color:var(--green-700); transition:transform .25s ease; } .link-arrow:hover{ transform:translateX(4px); } .resource-list{ display:flex; flex-direction:column; gap:8px; margin:0 0 20px; } .resource-list li{ font-size:0.95rem; } .resource-list a{ font-weight:600; color:var(--green-700); border-bottom:1.5px solid var(--lime-300); transition:color .2s ease, border-color .2s ease; } .resource-list a:hover{ color:var(--ink); border-color:var(--green-600); } /* card stack (über uns) */ .card-stack{ display:flex; flex-direction:column; gap:20px; } .quote-card{ background:var(--paper-dim); color:var(--ink); border-radius:var(--radius-lg); border:1px solid var(--line); border-left:4px solid var(--green-600); padding:38px; font-family:var(--ff-display); font-size:1.3rem; line-height:1.4; position:relative; overflow:hidden; } .quote-card::before{ content:"🌿"; position:absolute; right:20px; top:16px; font-size:2.4rem; opacity:0.25; } .mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .mini-card{ background:var(--paper-dim); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:6px; } .mini-card strong{ font-size:0.95rem; } .mini-card span{ font-size:0.85rem; color:var(--ink-soft); } /* dark section (mitglied werden) */ .section-dark{ background:radial-gradient(120% 140% at 20% -10%, var(--green-700), var(--forest) 60%); color:var(--paper-on-forest); border-radius:48px; margin:0 3vw; padding:100px 6vw; } .section-dark .light{ color:var(--paper-on-forest); } .light-sub{ color:rgba(250,248,242,0.78); max-width:640px; } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:52px 0 40px; } .step{ background:rgba(250,248,242,0.06); border:1px solid rgba(250,248,242,0.14); border-radius:var(--radius-md); padding:28px; transition:transform .3s ease, background .3s ease; } .step:hover{ transform:translateY(-6px); background:rgba(250,248,242,0.1); } .step-num{ font-family:var(--ff-display); font-size:1.6rem; color:var(--lime-300); } .step h3{ color:var(--paper-on-forest); margin:10px 0 8px; font-size:1.1rem; } .step p{ color:rgba(250,248,242,0.72); font-size:0.92rem; margin:0 0 6px; } .step p:last-child{ margin-bottom:0; } .step p a{ color:var(--lime-300); font-weight:600; text-decoration:underline; } /* PDF-Chip (z.B. Satzung-Download in "Mitglied werden") */ .pdf-chip{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; background:rgba(250,248,242,0.08); border:1px solid rgba(250,248,242,0.2); border-radius:var(--radius-sm); padding:14px 16px; margin-top:14px; position:relative; } .pdf-chip-icon{ font-size:1.5rem; width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(250,248,242,0.1); border-radius:10px; } .pdf-chip-info{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px; position:relative; } .pdf-chip-name{ font-weight:600; font-size:0.92rem; color:var(--paper-on-forest); } .pdf-chip-badge{ display:inline-flex; align-items:center; gap:4px; width:fit-content; background:none; border:none; padding:0; cursor:pointer; font-family:var(--ff-body); font-size:0.76rem; font-weight:600; color:var(--lime-300); opacity:0.9; text-decoration:underline dotted; text-underline-offset:3px; } .pdf-chip-badge:hover, .pdf-chip-badge:focus-visible{ opacity:1; } .pdf-chip-badge-icon{ font-size:0.85rem; } .pdf-chip-actions{ display:flex; gap:8px; flex-shrink:0; margin-left:auto; } .pdf-chip-btn{ display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:999px; font-size:0.82rem; font-weight:700; background:var(--green-600); color:var(--paper-on-forest); transition:transform .2s ease, background .2s ease; white-space:nowrap; } .pdf-chip-btn:hover{ background:var(--lime-300); color:var(--forest); transform:translateY(-1px); } .pdf-chip-btn:active{ transform:scale(0.94); } .pdf-chip-btn-ghost{ background:transparent; border:1px solid rgba(250,248,242,0.35); color:var(--paper-on-forest); padding:9px 12px; } .pdf-chip-btn-ghost:hover{ background:rgba(250,248,242,0.12); color:var(--paper-on-forest); } .pdf-popover{ position:absolute; left:0; top:calc(100% + 8px); z-index:5; width:min(280px, 80vw); background:var(--forest); color:rgba(250,248,242,0.92); border:1px solid rgba(250,248,242,0.2); border-radius:var(--radius-sm); padding:12px 14px; font-size:0.8rem; line-height:1.5; box-shadow:var(--shadow); opacity:0; transform:translateY(-6px) scale(0.97); pointer-events:none; transition:opacity .22s ease, transform .22s ease; } .pdf-chip-badge[aria-expanded="true"] + .pdf-popover{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } @media (max-width: 700px){ .pdf-chip-actions{ margin-left:0; width:100%; } .pdf-chip-btn{ flex:1; } } .info-box{ background:rgba(250,248,242,0.08); border:1px dashed rgba(250,248,242,0.3); border-radius:var(--radius-sm); padding:16px 20px; margin-bottom:36px; } .info-box p{ color:rgba(250,248,242,0.9); margin:0; font-size:0.92rem; } .discord-callout{ background:rgba(190,242,100,0.1); border:1px solid rgba(190,242,100,0.4); border-radius:var(--radius-sm); padding:16px 20px; margin-bottom:28px; } .discord-callout p{ color:rgba(250,248,242,0.95); margin:0; font-size:0.92rem; } .discord-callout a{ color:var(--lime-300); font-weight:700; text-decoration:underline; } /* bildung media card */ .media-card{ position:relative; } .media-blob{ position:absolute; inset:-30px; border-radius:40% 60% 55% 45% / 45% 40% 60% 55%; background:linear-gradient(135deg, var(--lime-200), var(--green-400)); opacity:0.5; z-index:-1; animation:morph 12s ease-in-out infinite; } @keyframes morph{ 0%,100%{ border-radius:40% 60% 55% 45% / 45% 40% 60% 55%; } 50%{ border-radius:60% 40% 45% 55% / 55% 60% 40% 45%; } } .topic-list{ display:flex; flex-direction:column; gap:16px; } .topic-list li{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; font-weight:600; font-size:0.98rem; transition:transform .25s ease, box-shadow .25s ease; } .topic-list li:hover{ transform:translateX(6px); box-shadow:var(--shadow); } .topic-list li span{ font-size:1.3rem; } /* ---------- FAQ ---------- */ .accordion{ max-width:760px; margin:50px auto 0; display:flex; flex-direction:column; gap:14px; } .accordion-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; } .accordion-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 24px; background:none; border:none; cursor:pointer; font-family:var(--ff-body); font-size:1rem; font-weight:600; color:var(--ink); text-align:left; transition:background .2s ease; } .accordion-trigger:active{ background:var(--paper-dim); } .accordion-icon{ font-size:1.3rem; color:var(--green-600); transition:transform .3s ease; flex-shrink:0; margin-left:16px; } .accordion-item.open .accordion-icon{ transform:rotate(45deg); } .accordion-panel{ max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.4,0,.2,1), padding .38s ease; padding:0 24px; } .accordion-item.open .accordion-panel{ padding:0 24px 22px; } .accordion-panel p{ margin:0; font-size:0.95rem; } /* ---------- KONTAKT ---------- */ .contact-list{ display:flex; flex-direction:column; gap:10px; margin:24px 0; font-size:1.02rem; } .contact-list a:hover{ color:var(--green-700); } .discord-cta{ display:inline-flex; margin-bottom:8px; max-width:100%; white-space:normal; text-align:center; line-height:1.3; } .discord-note{ margin-bottom:24px; } .social-row{ display:flex; gap:18px; flex-wrap:wrap; } .social-row a{ font-size:0.88rem; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid var(--line); transition:background .25s ease, transform .25s ease; } .social-row a:hover{ background:var(--lime-200); transform:translateY(-2px); } .social-row a:active{ transform:scale(0.94); } .cta-card{ background:var(--paper-dim); border-radius:var(--radius-lg); padding:40px; border:1px solid var(--line); } .cta-card h3{ font-size:1.4rem; margin-bottom:12px; } .cta-card p a{ color:var(--green-700); font-weight:600; text-decoration:underline; } /* ---------- FOOTER ---------- */ .footer{ padding:50px 5vw 40px; border-top:1px solid var(--line); } .footer-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:600; color:var(--ink); } .footer-links{ display:flex; gap:22px; flex-wrap:wrap; font-size:0.9rem; color:var(--ink-soft); } .footer-links a:hover{ color:var(--green-700); } .footer-copy{ width:100%; font-size:0.8rem; color:var(--ink-soft); margin:0; opacity:.7; } /* ---------- SCROLL REVEAL ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .reveal.in-view{ opacity:1; transform:translateY(0); } .strip-item.reveal, .step.reveal, .accordion-item.reveal{ transition-delay:calc(var(--i,0) * 70ms); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 900px){ .two-col, .two-col.reverse{ grid-template-columns:1fr; gap:44px; } .two-col.reverse > *:first-child{ order:0; } .strip-inner{ grid-template-columns:1fr 1fr; } .steps{ grid-template-columns:1fr; } .section-dark{ border-radius:32px; padding:70px 6vw; } } @media (max-width: 700px){ .nav-toggle{ display:flex; width:44px; height:44px; } .theme-toggle{ width:44px; height:44px; } /* PDF-Popover auf dem Handy: statt schwebendem Overlay (kollidiert leicht mit dem Rand) einfacher, eingebetteter Ausklapp-Bereich, der den Inhalt darunter sanft wegschiebt. */ .pdf-popover{ position:static; width:100%; left:auto; top:auto; overflow:hidden; max-height:0; opacity:0; transform:none; margin-top:0; padding:0 14px; transition:max-height .3s ease, opacity .25s ease, padding .3s ease, margin-top .3s ease; } .pdf-chip-badge[aria-expanded="true"] + .pdf-popover{ max-height:320px; opacity:1; margin-top:10px; padding:12px 14px; } .nav-links{ position:fixed; inset:78px 16px auto 16px; background:var(--paper); border:1px solid var(--line); border-radius:20px; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; box-shadow:var(--shadow); transform:translateY(-12px) scale(0.98); opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.2,.8,.2,1); } .nav-links.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; } .nav-links li{ width:100%; } .nav-links a:not(.btn){ display:block; padding:10px 6px; } .nav-links .btn-small{ margin-top:6px; width:100%; text-align:center; } .strip-inner{ grid-template-columns:1fr; } .hero{ min-height:auto; padding:120px 6vw 60px; } .section{ padding:70px 6vw; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } }