/* ================================================================ Abenteuer im Maislabyrinth – Stationsseiten Ein Stylesheet fuer alle Seiten. Die Heldenwelt steuert die Klasse am (.h-spider, .h-captain, .h-iron, .h-widow, .h-hulk, .h-panther). ================================================================ */ /* ---------- Grundlagen ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); font-family:'Nunito',system-ui,sans-serif; -webkit-text-size-adjust:100%; } a{color:var(--accent)} img{display:block} h1,h2,p{margin:0} .card{ background:var(--bg); display:flex; flex-direction:column; width:100%; min-height:100vh; min-height:100dvh; overflow:hidden; padding-bottom:env(safe-area-inset-bottom); } @media (min-width:560px){ body{display:flex;justify-content:center} .card{max-width:520px} } /* ---------- Kopfbereich ---------- */ .hero{ position:relative; padding:28px 22px 46px; background:var(--hero-bg); color:var(--hero-fg); clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%); } .hero-tex,.hero-orb,.hero-glow{position:absolute;pointer-events:none} .hero-tex{inset:0} .hero-body{position:relative;display:flex;flex-direction:column;gap:16px} .hero-name{ font-family:var(--name-font); font-weight:var(--name-weight); font-size:var(--name-size); line-height:var(--name-leading); letter-spacing:var(--name-tracking,0); text-transform:uppercase; transform:var(--name-skew,none); text-shadow:var(--name-shadow,none); } .hero-tag{ font-weight:800; font-size:14px; line-height:1.3; letter-spacing:var(--tag-tracking,.12em); color:var(--tag-color); } /* ---------- Steckbrief ---------- */ .intro{ position:relative; margin:var(--intro-margin,-26px 18px 0); padding:24px 20px; background:var(--intro-bg); border:var(--intro-border,none); border-radius:var(--intro-radius,20px); clip-path:var(--intro-clip,none); } .intro-title{font-weight:900;font-size:19px;line-height:1.3;color:var(--intro-title);margin-bottom:10px} .intro-text{font-weight:400;font-size:17px;line-height:1.62;color:var(--intro-text);text-wrap:pretty} /* ---------- Faktenkarten ---------- */ .facts{display:flex;flex-direction:column;gap:10px;margin:16px 18px 0} .fact{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:rgba(255,255,255,.06); border-left:5px solid; border-radius:0 14px 14px 0; } .fact-label{font-weight:900;font-size:12px;line-height:1.2;letter-spacing:.14em} .fact-value{font-weight:600;font-size:15px;line-height:1.45;color:var(--fact-text)} .fact-power{border-left-color:var(--power-bar)} .fact-power .fact-label{color:var(--power-label)} .fact-motto{border-left-color:var(--motto-bar)} .fact-motto .fact-label{color:var(--motto-label)} .fact-motto .fact-value{ font-weight:var(--motto-weight,800); font-size:var(--motto-size,15px); font-style:italic; color:#fff; } /* ---------- Audioplayer ---------- */ .player{ margin:18px; padding:20px 18px 18px; background:#F3EEE4; border-radius:22px; display:flex; flex-direction:column; gap:16px; } .wave{position:relative;height:62px} .wave-track,.wave-inner{ display:flex; align-items:center; justify-content:space-between; height:62px; } .wave-track{position:absolute;inset:0;width:100%} .wave-fill{position:absolute;top:0;left:0;bottom:0;width:0;overflow:hidden} .wave-inner{width:var(--wave,100%)} .wave span{width:5px;border-radius:3px;background:#D8D0C1;flex:none} .wave-inner span{background:#8C8375} .wave span:nth-child(1){height:22px} .wave span:nth-child(2){height:34px} .wave span:nth-child(3){height:46px} .wave span:nth-child(4){height:30px} .wave span:nth-child(5){height:52px} .wave span:nth-child(6){height:38px} .wave span:nth-child(7){height:60px} .wave span:nth-child(8){height:44px} .wave span:nth-child(9){height:28px} .wave span:nth-child(10){height:50px} .wave span:nth-child(11){height:36px} .wave span:nth-child(12){height:58px} .wave span:nth-child(13){height:42px} .wave span:nth-child(14){height:26px} .wave span:nth-child(15){height:48px} .wave span:nth-child(16){height:32px} .wave span:nth-child(17){height:54px} .wave span:nth-child(18){height:40px} .wave span:nth-child(19){height:62px} .wave span:nth-child(20){height:36px} .wave span:nth-child(21){height:46px} .wave span:nth-child(22){height:30px} .wave span:nth-child(23){height:56px} .wave span:nth-child(24){height:38px} .wave span:nth-child(25){height:24px} .wave span:nth-child(26){height:50px} .wave span:nth-child(27){height:34px} .wave span:nth-child(28){height:44px} .wave span:nth-child(29){height:28px} .wave span:nth-child(30){height:52px} .wave span:nth-child(31){height:40px} .wave span:nth-child(32){height:32px} .wave span:nth-child(33){height:46px} .wave span:nth-child(34){height:26px} .controls{display:flex;align-items:center;justify-content:space-between} .time{font-weight:800;font-size:15px;line-height:1;color:#6B6357;min-width:44px} .time[data-tot]{text-align:right} .play{ flex:none; width:78px; height:78px; border:none; border-radius:50%; background:#1B1A17; color:#F3EEE4; display:grid; place-items:center; cursor:pointer; box-shadow:0 0 0 5px rgba(27,26,23,.10),0 8px 18px rgba(0,0,0,.22); transition:transform .14s ease,box-shadow .14s ease; } .play svg{fill:#F3EEE4} .play:hover{box-shadow:0 0 0 9px rgba(27,26,23,.13),0 10px 22px rgba(0,0,0,.26)} .play:active{transform:scale(.94)} /* ---------- Footer ---------- */ .footer{ margin-top:auto; padding:18px 16px; background:var(--footer-bg); display:flex; flex-direction:column; align-items:center; gap:10px; } .footer-text{font-weight:800;font-size:13px;line-height:1.35;color:rgba(20,20,28,.72);text-align:center} .footer-logo{display:block;padding:4px;transition:opacity .14s ease} .footer-logo:hover{opacity:.6} .footer-logo img{height:22px} /* ================================================================ Heldenwelten ================================================================ */ /* --- Spider-Man --- */ .h-spider{ --bg:#151B2E;--accent:#C4171C; --hero-bg:#C4171C;--hero-fg:#fff;--tag-color:rgba(255,255,255,.92);--tag-tracking:.1em; --name-font:'Big Shoulders Display',sans-serif;--name-weight:900;--name-size:62px;--name-leading:.86; --name-skew:skewX(-12deg);--name-shadow:4px 4px 0 #151B2E; --intro-bg:#F2EEE6;--intro-title:#C4171C;--intro-text:#151B2E; --intro-clip:polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%); --fact-text:#EEEAF2;--power-bar:#C4171C;--power-label:#FF6B6B;--motto-bar:#F2EEE6;--motto-label:#B9C0D6; --footer-bg:#F2EEE6; } .h-spider .hero-tex{background:repeating-conic-gradient(from 0deg at 100% 0%,rgba(255,255,255,.09) 0deg 2deg,transparent 2deg 12deg)} .h-spider .hero-orb{ right:-40px;top:-40px;width:200px;height:200px;border-radius:50%; border:2px solid rgba(255,255,255,.18); box-shadow:0 0 0 26px rgba(255,255,255,.05),0 0 0 54px rgba(255,255,255,.05); } .h-spider .hero-glow{left:0;right:0;bottom:0;height:70px;background:linear-gradient(to top,rgba(21,27,46,.55),transparent)} /* --- Captain Marvel --- */ .h-captain{ --bg:#121A33;--accent:#D8A44A; --hero-bg:#B02A2A;--hero-fg:#F7E9C9;--tag-color:#F0D9A6;--tag-tracking:.1em; --name-font:'Josefin Sans',sans-serif;--name-weight:700;--name-size:40px;--name-leading:1.02;--name-tracking:.09em; --intro-bg:#FBF3E2;--intro-border:3px solid #D8A44A;--intro-title:#B02A2A;--intro-text:#121A33; --fact-text:#F3EEE2;--power-bar:#D8A44A;--power-label:#E9C67E;--motto-bar:#B02A2A;--motto-label:#EE8A8A; --footer-bg:#FBF3E2; } .h-captain .hero-tex{background:linear-gradient(150deg,rgba(0,0,0,.25) 0 34%,transparent 34% 62%,rgba(0,0,0,.2) 62%)} .h-captain .hero-orb{left:-30px;top:-20px;width:170px;height:170px;background:radial-gradient(circle,rgba(247,233,201,.35),transparent 62%)} .h-captain .hero-glow{left:0;right:0;bottom:34px;height:4px;background:#D8A44A} /* --- Iron Man --- */ .h-iron{ --bg:#1A0B0B;--accent:#E7BE72; --hero-bg:#3D0F0F;--hero-fg:#E7BE72;--tag-color:rgba(231,190,114,.8);--tag-tracking:.14em; --name-font:'Oswald',sans-serif;--name-weight:700;--name-size:48px;--name-leading:1;--name-tracking:.16em; --intro-bg:#F0EBE1;--intro-radius:6px;--intro-title:#8E1F1F;--intro-text:#1A0B0B; --intro-clip:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); --fact-text:#F3E9D8;--power-bar:#E7BE72;--power-label:#E7BE72;--motto-bar:#8E1F1F;--motto-label:#EE9A9A; --footer-bg:#F0EBE1; } .h-iron .hero-tex{background:repeating-linear-gradient(90deg,rgba(231,190,114,.10) 0 1px,transparent 1px 26px)} .h-iron .hero-orb{ right:20px;top:26px;width:96px;height:96px;border-radius:50%; border:3px solid rgba(231,190,114,.5);display:grid;place-items:center; } .h-iron .hero-orb i{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,#FFF3D0,#E7BE72 60%,transparent 72%)} /* --- Black Widow --- */ .h-widow{ --bg:#101116;--accent:#C6283C; --hero-bg:#1C1F28;--hero-fg:#F1F2F6;--tag-color:rgba(241,242,246,.65); --name-font:'Archivo Black',sans-serif;--name-weight:400;--name-size:40px;--name-leading:.88; --intro-bg:#F1F2F6;--intro-title:#C6283C;--intro-text:#101116; --fact-text:#E9EAF0;--power-bar:#C6283C;--power-label:#F0808F;--motto-bar:#6E7488;--motto-label:#A8AEC2; --footer-bg:#F1F2F6; } .h-widow .hero-tex{background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 16px)} .h-widow .hero-orb{right:-30px;bottom:20px;width:180px;height:180px;background:radial-gradient(circle,rgba(198,40,60,.35),transparent 65%)} /* --- Hulk --- */ .h-hulk{ --bg:#0F2415;--accent:#5CB947; --hero-bg:#2E7D32;--hero-fg:#F2FBF0;--tag-color:rgba(242,251,240,.85); --name-font:'Archivo Black',sans-serif;--name-weight:400;--name-size:64px;--name-leading:.84; --name-skew:skewX(-4deg);--name-shadow:5px 5px 0 rgba(0,0,0,.35); --intro-bg:#F0F3EC;--intro-radius:18px;--intro-margin:-30px 18px 0;--intro-title:#256B29;--intro-text:#0F2415; --intro-clip:polygon(0 14px,14px 0,100% 0,100% 100%,0 100%); --fact-text:#EAF5E6;--power-bar:#7BD160;--power-label:#9BE585;--motto-bar:#F2FBF0;--motto-label:#C6D9C1; --motto-weight:900;--motto-size:17px; --footer-bg:#F0F3EC; } .h-hulk .hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),72% calc(100% - 12px),38% calc(100% - 34px),0 100%)} .h-hulk .hero-tex{background:repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 3px,transparent 3px 18px)} .h-hulk .hero-orb{left:-20px;bottom:30px;width:220px;height:120px;background:radial-gradient(circle,rgba(160,255,140,.3),transparent 65%)} /* --- Black Panther --- */ .h-panther{ --bg:#0C0A12;--accent:#7B4BC4; --hero-bg:#1A1226;--hero-fg:#F0EAFA;--tag-color:rgba(217,198,255,.8); --name-font:'Archivo Black',sans-serif;--name-weight:400;--name-size:38px;--name-leading:.9;--name-tracking:.04em; --intro-bg:#F3F0F8;--intro-radius:22px;--intro-title:#6B3FB5;--intro-text:#0C0A12; --fact-text:#EDE7F7;--power-bar:#B28CFF;--power-label:#C9AEFF;--motto-bar:#E0C97A;--motto-label:#E6D49B; --footer-bg:#F3F0F8; } .h-panther .hero-tex{background:radial-gradient(circle at 78% 26%,rgba(140,90,220,.5),transparent 58%)} .h-panther .hero-orb{ right:26px;top:34px;width:110px;height:110px;border-radius:50%; border:2px solid rgba(178,140,255,.5); box-shadow:0 0 0 12px rgba(178,140,255,.08),inset 0 0 30px rgba(178,140,255,.35); } /* ================================================================ Uebersichtsseite (index.html) ================================================================ */ .overview{padding:40px 24px 60px;background:#151B2E;color:#F2EEE6;display:flex;justify-content:center} .overview main{width:100%;max-width:520px} .overview h1{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:46px;line-height:.9;text-transform:uppercase;margin-bottom:10px} .overview p{font-size:16px;line-height:1.6;color:rgba(242,238,230,.75);margin-bottom:28px} .overview ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .overview li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:rgba(255,255,255,.06);border-radius:14px;padding:14px 16px} .overview li a{font-weight:800;font-size:18px;line-height:1.2;color:#fff;text-decoration:none} .overview li a:hover{color:#FF6B6B} .overview li span{font-weight:600;font-size:12px;font-family:ui-monospace,Menlo,monospace;color:rgba(242,238,230,.45)} .overview footer{margin-top:32px;font-weight:600;font-size:13px;line-height:1.6;color:rgba(242,238,230,.5)} .overview footer a{color:#FF6B6B} /* ================================================================ Infoseiten im Stil der Aufsteller (.p-intro = Maislabyrinth-Schild, .p-rules = Strohhuepfburg-Schild) ================================================================ */ .sign-head{position:relative;padding:34px 22px 30px;background:var(--sign-head-bg);color:var(--sign-head-fg);overflow:hidden} .sign-rays,.sign-dots{position:absolute;inset:0;pointer-events:none} .sign-head-body{position:relative} .sign-title{ font-weight:900; font-size:var(--sign-title-size,32px); line-height:1.08; text-align:var(--sign-title-align,left); display:flex; flex-direction:column; gap:6px; } .sign-title-sub{font-weight:800;font-size:var(--sign-sub-size,21px);line-height:1.2;color:var(--sign-sub-color)} /* ---------- Maislabyrinth ---------- */ .p-intro{ --bg:#2B3350;--accent:#8FA6E0; --sign-head-bg:#2B3350;--sign-head-fg:#fff;--sign-sub-color:rgba(255,255,255,.86); --footer-bg:#F2EEE6; } .p-intro .sign-rays{ background: repeating-conic-gradient(from 0deg at 62% 8%,rgba(255,255,255,.07) 0deg 3deg,transparent 3deg 13deg), radial-gradient(circle at 62% 8%,rgba(255,255,255,.10),transparent 62%); } .p-intro .sign-dots,.p-intro .sign-body{ background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.5px); background-size:12px 12px; } .p-intro .sign-body{ background-color:#2B3350; padding:4px 22px 22px; display:flex; flex-direction:column; gap:16px; } .p-intro .sign-lead{font-weight:900;font-size:19px;line-height:1.3;color:#fff;margin-top:6px} .p-intro .sign-text{font-weight:500;font-size:16px;line-height:1.6;color:rgba(255,255,255,.93);text-wrap:pretty} .p-intro .sign-text strong{font-weight:900;color:#fff} .p-intro .sign-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .p-intro .sign-list li{ position:relative; padding-left:20px; font-weight:500; font-size:16px; line-height:1.5; color:rgba(255,255,255,.93); } .p-intro .sign-list li::before{content:'';position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:#8FA6E0} /* ---------- Strohhuepfburg ---------- */ .p-rules{ --bg:#EDE9E4;--accent:#8E86B8; --sign-head-bg:#EDE9E4;--sign-head-fg:#141414; --sign-title-size:34px;--sign-title-align:center; --footer-bg:#E2DDD6; } .p-rules .card{background:#EDE9E4} .p-rules .sign-dots{ background-image: radial-gradient(rgba(0,0,0,.05) 1.2px,transparent 1.3px), radial-gradient(rgba(255,255,255,.7) 1px,transparent 1.1px); background-size:9px 9px,14px 14px; background-position:0 0,4px 6px; } .rules{display:flex;flex-direction:column;gap:12px;padding:4px 18px 0} .rule{border-radius:18px;padding:18px 20px;color:#141414} .rule-title{font-weight:900;font-size:19px;line-height:1.25;margin-bottom:8px} .rule-text{font-weight:600;font-size:16px;line-height:1.5;text-wrap:pretty} .rule.r1{background:#D98B84} .rule.r2{background:#9FC9B7} .rule.r3{background:#F0B968} .rule.r4{background:#8E86B8} .rule.rule-note{background:#9BB8DC;text-align:center} .p-rules .player{background:#fff} .p-rules .footer-text{color:rgba(20,20,20,.72)}