@charset "UTF-8"; /* ========================================================= BRUNNENBAU RUNNER KOMPLETT SEITENSPEZIFISCH GEKAPSELT Voraussetzung im HTML: ========================================================= */ /* ========================================================= GRUNDLAGE NUR FÜR RUNNER-SEITE ========================================================= */ body.brunnenbau-runner-page, body.brunnenbau-runner-page * { box-sizing: border-box; } html, body.brunnenbau-runner-page { margin: 0; padding: 0; } body.brunnenbau-runner-page { background-color: #061d30; background-image: url("../img/abbrace/kb10racebackground.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; font-family: Arial, Helvetica, sans-serif; color: #ffffff; } /* ========================================================= ÜBERSCHRIFT MIT GRAFIKEN ========================================================= */ body.brunnenbau-runner-page .game-heading { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin: 0 auto 15px; } body.brunnenbau-runner-page .game-heading-text { text-align: center; } body.brunnenbau-runner-page .game-heading-icon { flex: 0 0 auto; width: 150px; height: 150px; } body.brunnenbau-runner-page .game-heading-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } /* ========================================================= FIRMENLOGO IM SPIEL ========================================================= */ body.brunnenbau-runner-page .game-brand-logo { position: absolute; top: 14px; right: 16px; z-index: 20; width: clamp(42px, 5vw, 72px); pointer-events: none; opacity: 0.92; } body.brunnenbau-runner-page .game-brand-logo img { display: block; width: 100%; height: auto; } /* ========================================================= WRAPPER ========================================================= */ body.brunnenbau-runner-page .game-wrapper { width: 100%; max-width: 1400px; margin: 0 auto; padding: 120px; } /* ========================================================= TITEL ========================================================= */ body.brunnenbau-runner-page .game-title { margin: 0 0 6px; text-align: center; font-size: clamp(25px, 3vw, 44px); font-weight: 800; letter-spacing: 0.02em; color: #ffffff; -webkit-text-stroke: 2px #000000; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } body.brunnenbau-runner-page .game-subtitle { margin-bottom: 24px; text-align: center; color: #000000; font-size: 24px; } /* ========================================================= SPIELFELD ========================================================= */ body.brunnenbau-runner-page .game-box { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 5px solid transparent; border-radius: 18px; background: linear-gradient(#000000, #000000) padding-box, linear-gradient( 135deg, #00eaff 0%, #008cff 25%, #7a2cff 50%, #008cff 75%, #00eaff 100% ) border-box; box-shadow: 0 0 8px rgba(0, 234, 255, 0.95), 0 0 22px rgba(0, 140, 255, 0.75), 0 0 45px rgba(71, 40, 255, 0.45), 0 18px 55px rgba(0, 0, 0, 0.65), inset 0 0 14px rgba(0, 234, 255, 0.55); } /* ========================================================= CANVAS ========================================================= */ body.brunnenbau-runner-page #gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; } /* ========================================================= SPIELANZEIGE ========================================================= */ body.brunnenbau-runner-page .game-ui { position: absolute; top: 15px; left: 15px; z-index: 10; display: flex; gap: 8px; } body.brunnenbau-runner-page .game-ui-box { padding: 8px 13px; background: rgba(3,25,43,.82); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; font-size: 14px; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ========================================================= OVERLAY ========================================================= */ body.brunnenbau-runner-page .game-overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(2,17,30,.76); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } body.brunnenbau-runner-page .game-overlay.hidden { display: none; } /* ========================================================= GAMECARD ========================================================= */ body.brunnenbau-runner-page .game-card { width: min(90%, 520px); padding: 32px; background: rgba(5,35,58,.97); border: 1px solid #159ee0; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.45); text-align: center; } body.brunnenbau-runner-page .game-card h2 { margin: 0 0 12px; font-size: 32px; } body.brunnenbau-runner-page .game-card p { line-height: 1.5; color: #d3eaf7; } /* Hintergrundbild nur für das Startfenster */ body.brunnenbau-runner-page #startOverlay .game-card { position: relative; width: min(92%, 620px); min-height: 390px; padding: 38px 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient( rgba(1, 12, 24, 0.32), rgba(1, 12, 24, 0.58) ), url("../img/abbrace/start-boxenstopp.png") center center / cover no-repeat; border: 3px solid #00d9ff; border-radius: 20px; box-shadow: 0 0 10px rgba(0, 217, 255, 0.95), 0 0 30px rgba(0, 132, 255, 0.75), 0 0 55px rgba(107, 44, 255, 0.45), 0 22px 65px rgba(0, 0, 0, 0.75); overflow: hidden; } body.brunnenbau-runner-page #startOverlay .game-card h2 { color: #ffffff; font-weight: 900; -webkit-text-stroke: 1px #000000; paint-order: stroke fill; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 174, 255, 0.75); } body.brunnenbau-runner-page #startOverlay .game-card p { color: #ffffff; font-weight: 700; text-shadow: 0 2px 3px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.9); } /* ========================================================= SPIELBUTTON ========================================================= */ body.brunnenbau-runner-page .game-button { margin-top: 8px; padding: 13px 26px; border: 0; border-radius: 8px; background: #0b91d2; color: #ffffff; font-size: 17px; font-weight: 700; cursor: pointer; } body.brunnenbau-runner-page .game-button:hover, body.brunnenbau-runner-page .game-button:focus { background: #10a8ee; color: #ffffff; } /* ========================================================= MOBILE STEUERUNG ========================================================= */ body.brunnenbau-runner-page .mobile-controls { display: none; justify-content: center; gap: 16px; margin-top: 14px; } body.brunnenbau-runner-page .mobile-controls button { width: 110px; height: 55px; border: 1px solid #159ee0; border-radius: 9px; background: #092f4d; color: #ffffff; font-size: 27px; cursor: pointer; touch-action: none; /* Mobile Spielsteuerung: keine Markierung / Browser-Hervorhebung */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; appearance: none; outline: none; } body.brunnenbau-runner-page .mobile-controls button:focus, body.brunnenbau-runner-page .mobile-controls button:active { outline: none; -webkit-tap-highlight-color: transparent; } body.brunnenbau-runner-page .mobile-controls button:active { transform: scale(0.92); } /* ========================================================= PERSÖNLICHES RANKING ========================================================= */ body.brunnenbau-runner-page .game-ranking { width: 100%; max-width: 520px; margin: 22px auto 15px; padding: 16px 18px; background: rgba(5,35,58,.96); border: 1px solid #159ee0; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.25); color: #ffffff; } body.brunnenbau-runner-page .game-ranking-title { margin-bottom: 12px; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: .05em; color: #8fd4ff; } body.brunnenbau-runner-page .game-ranking-list { display: flex; flex-direction: column; gap: 6px; } body.brunnenbau-runner-page .game-ranking-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: rgba(255,255,255,.06); border-radius: 7px; font-size: 14px; } body.brunnenbau-runner-page .game-ranking-row strong { font-size: 15px; color: #ffffff; } body.brunnenbau-runner-page .ranking-place { font-weight: 700; } /* ========================================================= TABLET – BIS 1024 PX ========================================================= */ @media (max-width: 1024px) { body.brunnenbau-runner-page { min-height: 100dvh; display: flex; flex-direction: column; } body.brunnenbau-runner-page .brunnenbau-runner-main { flex: 1 0 auto; display: flex; flex-direction: column; min-height: calc(100dvh - 120px); } body.brunnenbau-runner-page .game-wrapper { flex: 1 0 auto; margin-top: 120px; padding: 7px; } body.brunnenbau-runner-page .game-heading { gap: 10px; } body.brunnenbau-runner-page .game-heading-icon { width: 120px; height: 120px; } body.brunnenbau-runner-page .game-brand-logo { top: 9px; right: 10px; width: 48px; } body.brunnenbau-runner-page .game-title { font-size: clamp(20px, 4vw, 30px); margin-bottom: 4px; } body.brunnenbau-runner-page .game-subtitle { margin-bottom: 14px; font-size: 14px; } body.brunnenbau-runner-page .game-card { width: min(88%, 440px); padding: 22px 24px; border-radius: 14px; } body.brunnenbau-runner-page .game-card h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.15; } body.brunnenbau-runner-page .game-card p { margin: 8px 0; font-size: 14px; line-height: 1.35; } body.brunnenbau-runner-page .game-button { margin-top: 6px; padding: 10px 20px; font-size: 14px; } body.brunnenbau-runner-page .mobile-controls { display: flex; } body.brunnenbau-runner-page footer { margin-top: auto; } } /* ========================================================= SMARTPHONE – BIS 600 PX ========================================================= */ @media (max-width: 600px) { body.brunnenbau-runner-page { min-height: 100dvh; display: flex; flex-direction: column; } body.brunnenbau-runner-page .brunnenbau-runner-main { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100dvh; } body.brunnenbau-runner-page .game-wrapper { flex: 1 0 auto; margin-top: 120px; padding: 5px; } body.brunnenbau-runner-page .game-heading { gap: 7px; margin-bottom: 8px; } body.brunnenbau-runner-page .game-heading-icon { width: 80px; height: 80px; } body.brunnenbau-runner-page .game-brand-logo { top: 5px; right: 6px; width: 30px; opacity: 0.90; } body.brunnenbau-runner-page .game-title { font-size: 19px; line-height: 1.1; margin-bottom: 3px; } body.brunnenbau-runner-page .game-subtitle { font-size: 11px; line-height: 1.2; margin-bottom: 8px; } body.brunnenbau-runner-page .game-box { border-width: 1px; border-radius: 9px; } body.brunnenbau-runner-page .game-card { width: 88%; max-width: 330px; padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.45); } body.brunnenbau-runner-page .game-card h2 { margin: 0 0 5px; font-size: 15px; line-height: 1.1; } body.brunnenbau-runner-page .game-card p { margin: 4px 0; font-size: 10px; line-height: 1.2; } body.brunnenbau-runner-page .game-card strong { font-size: 10px; } body.brunnenbau-runner-page .game-button { margin-top: 4px; padding: 6px 12px; border-radius: 5px; font-size: 10px; line-height: 1.1; } body.brunnenbau-runner-page .game-ui { top: 5px; left: 5px; gap: 4px; } body.brunnenbau-runner-page .game-ui-box { padding: 3px 5px; border-radius: 4px; font-size: 8px; line-height: 1.1; } body.brunnenbau-runner-page .mobile-controls { gap: 10px; margin-top: 8px; } body.brunnenbau-runner-page .mobile-controls button { width: 72px; height: 38px; border-radius: 6px; font-size: 20px; } body.brunnenbau-runner-page .game-ranking { width: calc(100% - 20px); margin: 14px auto 10px; padding: 10px 12px; border-radius: 9px; } body.brunnenbau-runner-page .game-ranking-title { margin-bottom: 8px; font-size: 12px; } body.brunnenbau-runner-page .game-ranking-list { gap: 4px; } body.brunnenbau-runner-page .game-ranking-row { padding: 6px 8px; font-size: 10px; } body.brunnenbau-runner-page .game-ranking-row strong { font-size: 11px; } body.brunnenbau-runner-page footer { margin-top: auto; } } /* ========================================================= SEHR KLEINE SMARTPHONES – BIS 400 PX ========================================================= */ @media (max-width: 400px) { body.brunnenbau-runner-page .game-heading { gap: 5px; } body.brunnenbau-runner-page .game-heading-icon { width: 21px; height: 21px; } body.brunnenbau-runner-page .game-card { width: 90%; max-width: 300px; padding: 7px 9px; } body.brunnenbau-runner-page .game-card h2 { font-size: 13px; margin-bottom: 3px; } body.brunnenbau-runner-page .game-card p { margin: 3px 0; font-size: 8.5px; line-height: 1.15; } body.brunnenbau-runner-page .game-card strong { font-size: 8.5px; } body.brunnenbau-runner-page .game-button { padding: 5px 10px; font-size: 9px; } body.brunnenbau-runner-page .game-ui-box { padding: 2px 4px; font-size: 7px; } body.brunnenbau-runner-page .mobile-controls button { width: 65px; height: 35px; font-size: 18px; } }