/* ============================================================ Digitale Stationsbeschreibung – ASZ Region Ried Gemeinsames Stylesheet. Die Stationsfarbe (--st*) wird pro Seite im injiziert (siehe generate.ps1). ============================================================ */ :root { --bg: #EFF1ED; --bg-wash: #E5E9E1; --shell: #E8ECE4; --card: #FFFFFF; --ink: #171A14; --muted: #5C6157; --line: #DDE1D6; --hair: rgba(24,30,18,0.07); /* Logo-Marke */ --brand: #03822D; --brand-ink: #036B25; --gold: #FCC001; --good: #03822D; --good-wash: #E2F0E5; --bad: #CE3B2C; --bad-wash: #FBE7E4; /* Stationsfarbe – Fallback (wird pro Seite überschrieben) */ --st: #C4362A; --st-h1: #9C231A; --st-h2: #C13328; --st-h3: #E4594A; --on-hero: #FFF6F4; --on-hero-soft: rgba(255,246,244,0.80); --hero-pill: rgba(255,255,255,0.16); --hero-line: rgba(255,255,255,0.22); --shadow: 0 26px 55px -30px rgba(30,20,18,0.42), 0 3px 8px -4px rgba(30,20,18,0.14); --shadow-sm: 0 14px 32px -24px rgba(30,20,18,0.34); --shadow-hover: 0 30px 60px -28px rgba(30,20,18,0.42), 0 6px 14px -6px rgba(30,20,18,0.20); --badge-shadow: 0 10px 26px -12px rgba(40,30,10,0.45); --r-shell: 28px; --r-card: 18px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 680px; --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #0E100C; --bg-wash: #131611; --shell: #171B14; --card: #1A1F17; --ink: #EBF0E6; --muted: #969C8E; --line: #262B20; --hair: rgba(255,255,255,0.06); --brand: #4FBE7E; --brand-ink: #6FD097; --gold: #FFD24A; --good: #4FBE7E; --good-wash: #12261A; --bad: #E9705F; --bad-wash: #2A1613; --on-hero: #FFF6F4; --on-hero-soft: rgba(255,246,244,0.80); --hero-pill: rgba(255,255,255,0.13); --hero-line: rgba(255,255,255,0.18); --shadow: 0 30px 64px -34px rgba(0,0,0,0.8), 0 3px 10px -5px rgba(0,0,0,0.55); --shadow-sm: 0 16px 36px -26px rgba(0,0,0,0.72); --shadow-hover: 0 34px 68px -30px rgba(0,0,0,0.82), 0 8px 18px -8px rgba(0,0,0,0.6); --badge-shadow: 0 12px 30px -12px rgba(0,0,0,0.7); } } :root[data-theme="light"] { --bg: #EFF1ED; --bg-wash: #E5E9E1; --shell: #E8ECE4; --card: #FFFFFF; --ink: #171A14; --muted: #5C6157; --line: #DDE1D6; --hair: rgba(24,30,18,0.07); --brand: #03822D; --brand-ink: #036B25; --gold: #FCC001; --good: #03822D; --good-wash: #E2F0E5; --bad: #CE3B2C; --bad-wash: #FBE7E4; } :root[data-theme="dark"] { --bg: #0E100C; --bg-wash: #131611; --shell: #171B14; --card: #1A1F17; --ink: #EBF0E6; --muted: #969C8E; --line: #262B20; --hair: rgba(255,255,255,0.06); --brand: #4FBE7E; --brand-ink: #6FD097; --gold: #FFD24A; --good: #4FBE7E; --good-wash: #12261A; --bad: #E9705F; --bad-wash: #2A1613; } * { box-sizing: border-box; } body { margin: 0; } .wrap { font-family: var(--sans); color: var(--ink); background: radial-gradient(130% 55% at 50% -8%, var(--bg-wash), transparent 62%), var(--bg); min-height: 100vh; padding: 0 22px 72px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } .page { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; } .rise { opacity: 0; transform: translateY(16px); animation: rise 0.75s var(--ease) forwards; } .d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}.d5{animation-delay:.38s} @keyframes rise { to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%,100%{transform:translateY(0) rotate(8deg)} 50%{transform:translateY(-10px) rotate(8deg)} } @media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } .motif { animation: none !important; } } /* ---------- Kopfzeile ---------- */ .topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 4px 20px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.02em; } .topline b { color: var(--ink); font-weight: 650; } .topline a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .topline a:hover { color: var(--ink); } .topline a svg { width: 15px; height: 15px; } /* ---------- Station-Hero ---------- */ .shell { background: var(--shell); border: 1px solid var(--hair); border-radius: var(--r-shell); padding: 7px; box-shadow: var(--shadow); } .hero { position: relative; overflow: hidden; border-radius: calc(var(--r-shell) - 7px); padding: 30px 32px 34px; background: radial-gradient(120% 120% at 88% -20%, var(--st-h3), transparent 55%), linear-gradient(150deg, var(--st-h2), var(--st-h1)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); color: var(--on-hero); isolation: isolate; } .hero .motif { position: absolute; right: -6px; top: 10px; width: 178px; height: 178px; color: #fff; opacity: 0.13; z-index: -1; animation: float 7s ease-in-out infinite; } .logo-badge { display: inline-flex; background: #fff; border-radius: 18px; padding: 12px 18px; margin-bottom: 22px; box-shadow: var(--badge-shadow); } .logo-badge img { height: 58px; width: auto; display: block; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--hero-pill); color: var(--on-hero); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin: 0 0 16px; border: 1px solid var(--hero-line); backdrop-filter: blur(4px); } .hero .eyebrow .sw { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .hero h1 { font-size: clamp(2.6rem, 10vw, 3.7rem); line-height: 0.95; margin: 0 0 14px; letter-spacing: -0.04em; font-weight: 750; text-wrap: balance; } .hero .sub { margin: 0; color: var(--on-hero-soft); font-size: 1.07rem; line-height: 1.5; max-width: 44ch; } /* ---------- Inhaltskarten ---------- */ .stack { display: grid; gap: 16px; margin-top: 16px; } .grid2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 540px) { .grid2 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); } .tile svg { width: 21px; height: 21px; } .tile.good { background: var(--good-wash); color: var(--good); } .tile.bad { background: var(--bad-wash); color: var(--bad); } .card h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 15px; color: var(--muted); font-weight: 700; } ul.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } ul.checklist li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.97rem; line-height: 1.4; } ul.checklist li .m { flex: none; margin-top: 2px; width: 16px; height: 16px; } .m.good { color: var(--good); } .m.bad { color: var(--bad); } .notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .notes li { display: flex; align-items: center; gap: 13px; font-size: 0.97rem; line-height: 1.4; } .notes .n { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--st); color: #fff; display: grid; place-items: center; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } /* ---------- Entwurf-Hinweis ---------- */ .draft-note { background: var(--good-wash); border: 1px dashed var(--brand); border-radius: var(--r-card); padding: 20px 22px; color: var(--brand-ink); font-size: 0.95rem; line-height: 1.5; } .draft-note b { color: var(--brand-ink); } footer { margin-top: 34px; padding: 20px 6px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } footer b { color: var(--ink); font-weight: 650; } footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--ink); } /* ============================================================ Übersichtsseite (Index) ============================================================ */ .index-hero { border-radius: var(--r-shell); padding: 36px 34px; background: radial-gradient(120% 130% at 85% -20%, #34A06B, transparent 55%), linear-gradient(150deg, #1E7E52, #0C5334); color: #EDF5EF; box-shadow: var(--shadow); position: relative; overflow: hidden; } .index-hero .logo-badge { margin-bottom: 20px; } .index-hero h1 { font-size: clamp(2.1rem, 7vw, 3rem); line-height: 1.0; margin: 0 0 12px; letter-spacing: -0.03em; font-weight: 750; text-wrap: balance; } .index-hero p { margin: 0; color: rgba(237,245,239,0.82); font-size: 1.05rem; max-width: 52ch; } .cat { margin-top: 36px; } .cat h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 700; margin: 0 0 14px; padding-left: 2px; display: flex; align-items: center; gap: 10px; } .cat h2::after { content: ""; flex: 1; height: 1px; background: var(--line); } .st-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .st-card { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .st-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .st-dot { flex: none; width: 14px; height: 14px; border-radius: 5px; } .st-card .nm { font-weight: 600; font-size: 0.98rem; line-height: 1.2; } .st-card .badge-draft { margin-left: auto; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink); background: var(--good-wash); border-radius: 999px; padding: 3px 8px; font-weight: 700; }