/* Language toggle: show exactly one language based on */ .midnyght-legal [data-lang] { display: none !important; } html:lang(en) .midnyght-legal [data-lang="EN"] { display: block !important; } html:lang(de) .midnyght-legal [data-lang="DE"] { display: block !important; } /* Fallback: if no lang attribute present on , default to EN */ :root:not([lang]) .midnyght-legal [data-lang="EN"] { display: block !important; } /* Base page */ html, body { margin: 0; /* ensure no default body margins */ padding: 0; width: 100%; height: auto; /* avoid forcing 100% height which can create extra scroll with outer layouts */ min-height: 100dvh; /* stretch at least to the viewport */ overflow-y: auto; /* normal vertical scrolling */ overflow-x: hidden; /* prevent accidental horizontal scroll */ overscroll-behavior-y: contain; /* no rubber-banding past the end */ scrollbar-width: none; -ms-overflow-style: none; /* Do not override the site's global background here, so pages end normally */ /* background: #0c0607; <-- removed to avoid reddish area below cards */ color: #d6d9df; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; width: 0; background: #00000000; } /* Screen-reader-only helper */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Skip link */ .skip-link { position: absolute; top: 0; left: 0; transform: translateY(-120%); background: #ff4d5e; color: #0c0607; padding: 10px 14px; border-radius: 10px; z-index: 1000; text-decoration: none; font-weight: 700; box-shadow: 0 2px 8px #00000080; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(8px); outline: 3px solid #ffffff; outline-offset: 2px; } /* ============================= Outer "back" window (desktop default) ============================= */ .midnyght-legal:not(.contact-form-section), .midnyght-legal-surface, [data-midnyght-legal-surface="true"] { grid-column: 1 / -1 !important; width: 100%; max-width: none; margin: 4vh 0; /* vertical rhythm around the card */ display: block; box-sizing: border-box; float: none; justify-self: center; align-self: start; padding: 44px 40px; background: #0a0a0a; color: #d6d9df; min-height: 40vh; box-shadow: 0 2px 18px #00000073; border-radius: 18px; border: 1.5px solid #1a1a1a; transition: none; overflow: visible; scrollbar-width: none; } /* Hide scrollbar inside the container (safety) */ .midnyght-legal::-webkit-scrollbar { display: none; width: 0; background: #00000000; } /* =================================================== Inner "front" window (optional card, full-width inside) =================================================== */ .midnyght-legal:not(.contact-form-section) > :where( article, section, .midnyght-legal-front, .laws-panel, .laws-inner, .legal-card, .front-window, [data-front-window] ), .midnyght-legal-front, [data-midnyght-legal-front="true"] { width: 100%; max-width: 100%; margin: 18px auto; padding: 26px 24px; background: #111111; border: 1px solid #1d1d1d; border-radius: 14px; box-shadow: 0 8px 22px #00000059; transition: none; } /* ====================================== Headings and text ====================================== */ .midnyght-legal h1, .midnyght-legal h2, .midnyght-legal h3, .midnyght-legal-front h1, .midnyght-legal-front h2, .midnyght-legal-front h3 { color: #e8ecf2; margin-top: 0; margin-bottom: .6em; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: 0.01em; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; text-shadow: 0 1px 0 #00000059; hyphens: auto; overflow-wrap: anywhere; word-break: break-word; } /* Desktop / Default explicit sizing (clamp für moderate Skalierung) */ .midnyght-legal h1, .midnyght-legal-front h1 { font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.15; } .midnyght-legal h2, .midnyght-legal-front h2 { font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.9rem); line-height: 1.25; } .midnyght-legal h3, .midnyght-legal-front h3 { font-size: clamp(1.12rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.3; } /* Body copy */ .midnyght-legal p, .midnyght-legal li, .midnyght-legal-front p, .midnyght-legal-front li { line-height: 1.75; font-size: 1.09em; color: #c8ccd3; letter-spacing: 0.01em; overflow-wrap: anywhere; word-break: break-word; word-wrap: break-word; } /* Lists */ .midnyght-legal ul, .midnyght-legal ol, .midnyght-legal-front ul, .midnyght-legal-front ol { margin-left: 2em; padding-left: 0.2em; } .midnyght-legal ul, .midnyght-legal-front ul { list-style: disc inside; } .midnyght-legal ol, .midnyght-legal-front ol { list-style: decimal inside; } /* Emphasis */ .midnyght-legal strong, .midnyght-legal b, .midnyght-legal-front strong, .midnyght-legal-front b { color: #ffffff; font-weight: 700; } .midnyght-legal em, .midnyght-legal i, .midnyght-legal-front em, .midnyght-legal-front i { color: #bdbdc2; } /* =========================== Links =========================== */ .midnyght-legal a, .midnyght-legal-front a { color: #e8ecf2; text-decoration: underline; text-underline-offset: 2px; transition: none; overflow-wrap: anywhere; word-break: break-word; word-wrap: break-word; white-space: normal; display: inline-block; max-width: 100%; } .midnyght-legal a:hover, .midnyght-legal a:active, .midnyght-legal-front a:hover, .midnyght-legal-front a:active { color: #e8ecf2; text-shadow: none; } /* Accessible focus styles */ .midnyght-legal a:focus-visible, .midnyght-legal-front a:focus-visible { outline: 3px solid #ff4d5e; outline-offset: 2px; text-decoration-thickness: 3px; border-radius: 6px; } /* Also show focus for other interactive elements that might appear */ .midnyght-legal :where(button, input, textarea, select):focus-visible, .midnyght-legal-front :where(button, input, textarea, select):focus-visible { outline: 3px solid #ff4d5e; outline-offset: 2px; border-radius: 6px; } /* ========== Tables ========== */ .midnyght-legal table, .midnyght-legal-front table { width: 100%; border-collapse: collapse; margin: 24px 0; background: #240f14; border-radius: 12px; box-shadow: 0 2px 14px #00000040; overflow: hidden; } .midnyght-legal th, .midnyght-legal td, .midnyght-legal-front th, .midnyght-legal-front td { border: none; padding: 12px 14px; color: #d6d9df; background: #252525; font-size: 1em; text-align: left; } .midnyght-legal th, .midnyght-legal-front th { background: #2c141a; font-weight: 700; color: #e8ecf2; } .midnyght-legal tr:hover td, .midnyght-legal-front tr:hover td { background: #2b1318; } /* ====================== Blockquotes / Notes ====================== */ .midnyght-legal blockquote, .midnyght-legal-front blockquote { border-left: 4px solid #ff4d5e; background: #1b0d10; color: #bdbdc2; margin: 1.4em 0; padding: 1em 1.5em; border-radius: 10px; font-style: italic; font-size: 1em; box-shadow: 0 0 10px #ff4d5e21; } /* ========= Code ========= */ .midnyght-legal code, .midnyght-legal pre, .midnyght-legal-front code, .midnyght-legal-front pre { background: #333333; color: #ffffff; border-radius: 8px; padding: 2px 8px; font-family: "Fira Mono", Consolas, Monaco, Menlo, monospace; font-size: 0.97em; } .midnyght-legal pre, .midnyght-legal-front pre { padding: 12px; margin: 16px 0; overflow-x: auto; } /* ========================== Contact form exception ========================== */ .midnyght-legal.contact-form-section { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; max-width: none !important; min-height: auto !important; color: inherit; border: 0 !important; overflow: visible !important; } /* ========================== Prevent extra scroll after last legal block ========================== */ .legal-no-extra-scroll, .midnyght-legal:last-child, .midnyght-legal-surface:last-child, [data-midnyght-legal-surface="true"]:last-child { margin-bottom: 0 !important; /* no extra bottom margin on the outer card */ } .midnyght-legal > :last-child, .midnyght-legal-front > :last-child { margin-bottom: 0 !important; /* no inner trailing margins */ padding-bottom: 0 !important; } /* As an additional safeguard, ensure the page doesn't get taller than content + minimal framing */ body:has(.midnyght-legal) { padding-bottom: 0 !important; } /* ========================== Responsive widths + mobile heading sizes ========================== */ @media (max-width: 900px) { .midnyght-legal:not(.contact-form-section), .midnyght-legal-surface, [data-midnyght-legal-surface="true"] { grid-column: 1 / -1 !important; width: 100%; max-width: none; padding: 24px 5vw; border-radius: 18px; margin: 4vh 0; } /* Kleinere Überschriften mobil */ .midnyght-legal h1, .midnyght-legal-front h1 { font-size: 1.45rem; line-height: 1.18; } .midnyght-legal h2, .midnyght-legal-front h2 { font-size: 1.18rem; line-height: 1.25; } .midnyght-legal h3, .midnyght-legal-front h3 { font-size: 1.03rem; line-height: 1.28; } .midnyght-legal h1, .midnyght-legal h2, .midnyght-legal h3, .midnyght-legal-front h1, .midnyght-legal-front h2, .midnyght-legal-front h3 { letter-spacing: .01em; } .midnyght-legal:not(.contact-form-section) > :where( article, section, .midnyght-legal-front, .laws-panel, .laws-inner, .legal-card, .front-window, [data-front-window] ), .midnyght-legal-front, [data-midnyght-legal-front="true"] { width: 100%; max-width: 100%; margin: 16px auto; padding: 18px 16px; border-radius: 12px; background: #141414; border: 1px solid #121213; } } /* ========================== Touch-Devices (mobile/tablet) auch >900px Breite — Always stretch to full width on coarse pointer devices too ========================== */ @media (min-width: 901px) and (hover: none) and (pointer: coarse) { .midnyght-legal:not(.contact-form-section), .midnyght-legal-surface, [data-midnyght-legal-surface="true"] { margin-left: 0; margin-right: 0; width: 100%; max-width: none; } } /* ========================== Legal binding note ========================== */ .legal-binding-note { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid #ddd; font-weight: 600; color: #e8ecf2; }