:root { /* Dark theme (default) — espresso */ --bg: #1a1410; --bg-elev: #201a16; --surface: #241b14; --text: #efe9df; --muted: #cfc7bb; --brand: #d4a373; --brand-contrast: #1a1410; --border: rgba(255,255,255,.08); --shadow: 0 10px 30px rgba(0,0,0,.35); --maxw: 1100px; --radius: 16px; /* New per-theme helpers */ --header-bg: rgba(26,20,16,.7); --hero-top: #1a1410; --hero-bottom: #201a16; /* Headline panel gradient (dark) */ --panel-top: rgba(0,0,0,.30); --panel-mid: rgba(0,0,0,.18); --panel-bottom: rgba(255,255,255,.06); /* Hover overlay on panel */ --panel-hoverTop: rgba(255,255,255,.06); /* Panel outlines/shadows that should theme-flip */ --panel-inset: rgba(255,255,255,.04); --panel-hairline: rgba(255,255,255,.06); /* Optional: sheen opacity */ --panel-sheen-opacity: .75; /* Hero background image (url in a var is fine) */ --hero-image: url("/images/TopSection_02.png"); /* Overlay that sits on top of the image (dark theme) */ --hero-overlay-top: rgba(26,20,16,.55); --hero-overlay-bottom: rgba(26,20,16,.82); /* Optional image tuning */ --hero-img-brightness: 0.9; /* 1.0 = neutral */ --hero-img-contrast: 1.0; --hero-img-saturate: 0.95; /* Viewer background image (can reuse hero for now) */ --viewer-image: url("/images/ViewerSection_01_Fallback.png"); --viewer-overlay-top: rgba(26,20,16,.45); --viewer-overlay-bottom: rgba(26,20,16,.78); --viewer-img-brightness: 0.92; --viewer-img-contrast: 1.0; --viewer-img-saturate: 0.95; /* Optional: a base gradient under the image while it loads */ --viewer-top: var(--hero-top); --viewer-bottom: var(--hero-bottom); --btn-soft-bg: rgba(212,163,115,.18); /* brand w/ alpha */ --btn-soft-bg-hover: rgba(212,163,115,.24); --btn-soft-fg: var(--brand); /* readable on dark bg */ --btn-soft-border: rgba(212,163,115,.45); } html[data-theme="light"] { /* re-use same vars as html.theme-light without duplicating code */ } /* Light theme overrides (apply on element) */ html.theme-light { --bg: #faf7f3; --bg-elev: #f1ece6; --surface: #ffffff; --text: #1a1410; --muted: #5b5148; --brand: #d4a373; --brand-contrast: #1a1410; --border: rgba(0,0,0,.10); --shadow: 0 12px 28px rgba(0,0,0,.10); --header-bg: rgba(255,255,255,.7); --hero-top: #faf7f3; --hero-bottom: #f1ece6; /* Headline panel gradient (light) */ --panel-top: rgba(0,0,0,.06); --panel-mid: rgba(0,0,0,.03); --panel-bottom: rgba(255,255,255,.80); --panel-hoverTop: rgba(0,0,0,.04); --panel-inset: rgba(0,0,0,.06); --panel-hairline: rgba(0,0,0,.08); --panel-sheen-opacity: .55; /* a bit softer on light */ --hero-overlay-top: rgba(250,247,243,.30); --hero-overlay-bottom: rgba(241,236,230,.65); --hero-img-brightness: 1.0; --hero-img-contrast: 1.0; --hero-img-saturate: 1.0; --viewer-overlay-top: rgba(250,247,243,.20); --viewer-overlay-bottom: rgba(241,236,230,.55); --viewer-img-brightness: 1.0; --viewer-img-contrast: 1.0; --viewer-img-saturate: 1.0; /* You can override these if you want a different base feel than the hero */ --viewer-top: var(--hero-top); --viewer-bottom: var(--hero-bottom); --btn-soft-bg: rgba(212,163,115,.22); --btn-soft-bg-hover: rgba(212,163,115,.30); --btn-soft-fg: var(--brand-contrast); /* dark text on light bg */ --btn-soft-border: rgba(212,163,115,.55); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { color: var(--text); background: var(--bg); } /* Disable selection globally… */ html, body { -webkit-user-select: none; user-select: none; } html, body, .section, .site-header, .hero, .card, .feature, .site-footer, .headline-panel { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; } img { transition: filter .2s ease; } html.theme-light img { filter: none; } :root img { filter: none; } /* keep neutral; add effects here only if desired */ /* …but allow it where needed: */ a, input, textarea, select, .selectable { -webkit-user-select: text; user-select: text; } /* If we need for specific not selectables */ .not-selectable, .not-selectable * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } /* Header / Nav */ .site-header { position: sticky; position: -webkit-sticky; /* Safari */ top: 0; z-index: 50; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: var(--header-bg); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav .brand { font-weight: 700; text-decoration: none; color: var(--text); letter-spacing: .2px; } .nav .links a { margin-left: 1rem; text-decoration: none; color: var(--muted); font-weight: 500; } .nav .links a:hover { color: var(--text); } /* Brand with logo + name */ .nav .brand { display: inline-flex; align-items: center; gap: .6rem; } .nav .brand .name { font-weight: 700; letter-spacing: .2px; color: var(--text); text-decoration: none; line-height: 1; } .nav .brand img { display: block; height: 38px; /* tweak to 24–32px if needed */ width: auto; border-radius: 4px; /* soften hard edges if PNG is rectangular */ -webkit-user-select: none; user-select: none; pointer-events: none; /* logo itself is not a separate link */ } /* Slightly dim on hover so both move together */ .nav .brand:hover .name { color: var(--text); opacity: .9; } .theme-toggle { margin-left: 1rem; height: 36px; min-width: 36px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; font-size: 16px; line-height: 1; } .theme-toggle:hover { filter: brightness(1.02); } .theme-toggle:focus { outline: none; } .theme-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(212,163,115,.35), var(--shadow); } /* Sections */ .section { padding: 96px 0; background: var(--bg); } .section.alt { background: var(--bg-elev); } .center { text-align: center; } /* Typography */ h1, h2, h3 { color: var(--text); margin-top: 0; } p { color: var(--text); opacity: .96; } a { color: var(--brand); } a:hover { opacity: .9; } /* Hero */ .hero { min-height: 70svh; /*max-height: 1500px;*/ /*height: clamp(420px, 70vh, 900px);*/ /*height: clamp(60vh, 56.25vw, 120vh);*/ display: flex; align-items: center; background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%); } @supports (height: 100dvh) { .hero { min-height: 70dvh; } } /* Make hero a stacking context so layers stay inside */ .hero { position: relative; overflow: hidden; } /* Background image layer */ .hero::before { content: ""; position: absolute; inset: 0; background-image: var(--hero-image), url("/images/TopSection_02.png"); background-size: cover; /* fill nicely */ background-position: center; /* center composition */ background-repeat: no-repeat; filter: brightness(var(--hero-img-brightness)) contrast(var(--hero-img-contrast)) saturate(var(--hero-img-saturate)); z-index: 0; pointer-events: none; } /* Theme-aware overlay to keep text readable */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--hero-overlay-top) 0%, var(--hero-overlay-bottom) 100%); /* background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%); */ z-index: 0; pointer-events: none; } /* Ensure the content sits above both layers */ .hero .hero-content { position: relative; z-index: 1; } /* Reduce the extra section padding si it doesn't influate height unpredicted */ .hero.section { padding-block: clamp(24px, 4vh, 64px); } /* Desktop+: width-driven height */ @media (min-width: 900px) { .hero { height: clamp(60vh, 56.25vw, 120vh); /* 56.25vw = 16:9 */ } .hero.section { padding-block: clamp(24px, 4vh, 64px); } } .hero-content h1 { font-size: clamp(2rem, 3.5vw, 3.25rem); margin: 0 0 .5rem; letter-spacing: .3px; } .hero-content p { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .9; max-width: 52ch; } /* About section rotator (in-card cross-fade) */ .about-visual { position: relative; overflow: hidden; /* Fallback image if JS doesn't run */ background: url("images/AboutSection_00_Fallback.png") center / cover no-repeat; /* Keep a pleasant size; adjust as you like */ aspect-ratio: 16 / 9; min-height: 200px; padding: 0; } /* Layers we fade between */ .about-visual .rotor-layer { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1200ms ease; /* match JS fadeMs */ will-change: opacity; } .about-visual .rotor-layer.is-visible { opacity: 1; } /* Viewer section background (same pattern as .hero) */ #viewer.section { position: relative; /* base gradient while image loads */ background: linear-gradient(180deg, var(--viewer-top) 0%, var(--viewer-bottom) 100%); } /* Image layer */ #viewer.section::before { content: ""; position: absolute; inset: 0; background-image: var(--viewer-image), url("/images/ViewerSection_01_Fallback.png"); /* fallback */ background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(var(--viewer-img-brightness)) contrast(var(--viewer-img-contrast)) saturate(var(--viewer-img-saturate)); z-index: 0; pointer-events: none; } /* Overlay for readability */ #viewer.section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--viewer-overlay-top) 0%, var(--viewer-overlay-bottom) 100%); z-index: 2; pointer-events: none; } /* Ensure content is above layers */ #viewer.section > .container { position: relative; z-index: 3; } /* Rotating image layers */ #viewer.section .viewer-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(var(--viewer-img-brightness)) contrast(var(--viewer-img-contrast)) saturate(var(--viewer-img-saturate)); opacity: 0; /* hidden by default */ transition: opacity 1200ms ease; z-index: 1; /* between fallback (0) and overlay (2) */ pointer-events: none; will-change: opacity; } #viewer.section .viewer-bg.is-visible { opacity: 1; } /* ===== Headline Gradient Panel (no border, rounded, animated depth) ===== */ :root { --halo-x: 50%; --halo-y: 50%; } /* The panel itself */ .headline-panel { position: relative; display: inline-block; padding: .9em 1.25em; border-radius: 18px; color: var(--text); -webkit-user-select: none; user-select: none; cursor: default; /* Use theme variables for the gradient */ background: linear-gradient( 180deg, var(--panel-top) 0%, var(--panel-mid) 40%, var(--panel-bottom) 100% ); /* Use themed hairline + inset */ box-shadow: 0 1px 0 var(--panel-inset) inset, 0 0 0 1px var(--panel-hairline), 0 22px 48px rgba(0,0,0,.35); backdrop-filter: blur(2px); /* ensure sheen stays inside rounded corners on mobile */ /*overflow: hidden; Use this for mobile when the animation is disturbing*/ } .headline-panel { max-width: 100%; /* allow insanely long German words to wrap instead of forcing the page wider */ overflow-wrap: break-word; /* modern name for word-wrap */ word-break: break-word; /* WebKit/iOS friendliness */ hyphens: auto; /* adds proper German hyphenation if */ } /* Hover overlay now uses a var too */ .headline-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: linear-gradient(180deg, var(--panel-hoverTop), transparent 60%); mix-blend-mode: overlay; } .headline-panel:hover::before { opacity: .9; } /* Animated sheen keeps working; opacity themed */ .headline-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,.10)); mix-blend-mode: overlay; animation: panel-sheen 14s linear infinite; opacity: var(--panel-sheen-opacity); } /* Optional: slight hover lift */ .headline-panel:hover { transform: translateY(-1px); } /* Remove the default focus outline on the headline panel */ .headline-panel:focus { outline: none; } /* Provide a subtle custom focus style for keyboard users only */ .headline-panel:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(212,163,115,.35), 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(255,255,255,.06), 0 22px 48px rgba(0,0,0,.35); } /* Viewer headline-panels: stronger gradient (≈30/70), deeper shadow, clickable */ #viewer .headline-panel { background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-mid) 30%, var(--panel-bottom) 100%); box-shadow: 0 1px 0 var(--panel-inset) inset, 0 0 0 1px var(--panel-hairline), 0 28px 60px rgba(0,0,0,.45); cursor: pointer; } /* Make the hover overlay a touch stronger on viewer panels */ #viewer .headline-panel::before { opacity: .95; } /* On touch devices / small screens, keep the sheen static & subtle */ /*@media (pointer: coarse), (max-width: 700px) { .headline-panel::after { animation: none; opacity: .25; } }*/ /* If Blazor adds tabindex="-1" to make the H1 focusable, suppress default outline */ h1[tabindex="-1"]:focus { outline: none; } /* Spin the sheen */ @keyframes panel-sheen { to { transform: rotate(360deg); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .headline-panel::after { animation: none; } } /* Buttons */ .btn { display: inline-block; margin-top: 1rem; padding: .85rem 1.25rem; border-radius: 999px; background: var(--brand); color: var(--brand-contrast); text-decoration: none; box-shadow: var(--shadow); } .btn:hover { filter: brightness(.97); } .btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); } .btn.ghost:hover { background: rgba(212,163,115,.12); } /* Soft-solid variant for ghost buttons */ .btn.ghost.solid { background: var(--btn-soft-bg); color: var(--btn-soft-fg); border: 1px solid var(--btn-soft-border); } .btn.ghost.solid:hover { background: var(--btn-soft-bg-hover); filter: none; /* keep hover crisp */ } .btn.ghost.solid:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(212,163,115,.35), var(--shadow); } /* Grids */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: center; } /* Equal-height variant (opt-in with .stretch) */ .grid-2.stretch { align-items: stretch !important; /* override the base center rule */ } .grid-2.stretch > * { height: 100%; } .grid-2.stretch > .feature { align-self: stretch; /* Safari-safe */ display: flex; /* keep content vertical */ flex-direction: column; } /* Tidy spacing */ .grid-2.stretch > .feature .bullets { margin-bottom: 0; } .grid-2.stretch > .feature h3 { margin-top: .25rem; /* remove inline style in markup */ } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } /* Cards & Features */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); } .card img { width: 100%; height: 240px; object-fit: cover; } /* Projects: force square thumbs (1:1) */ #projects .card img { aspect-ratio: 1 / 1; /* perfect square */ height: auto; /* override the old fixed height */ object-fit: cover; display: block; } /* Make the image link fill the image area */ #projects .card .thumb-link { display: block; } /* Title links: look like headings, not default links */ #projects .card h3 a { color: var(--text); text-decoration: none; } #projects .card h3 a:hover { text-decoration: underline; } .card-body { padding: 1rem 1rem 1.25rem; } .card h3 { margin: .25rem 0 .5rem; color: var(--text); } .feature { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); border: 1px solid var(--border); } .bullets { padding-left: 1.25rem; color: var(--text); } /* Small helper */ .hint { font-size: .95rem; color: var(--muted); } /* Footer */ .site-footer { padding: 40px 0; background: var(--bg-elev); color: var(--muted); border-top: 1px solid var(--border); } /* Default (no JS / before JS boots): content is visible */ .fade-in { opacity: 1; transform: none; } /* When JS enables enhancements, apply the animation */ html.fx .fade-in { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; } html.fx .fade-in.visible { opacity: 1; transform: none; } /* Footer tiny separator spacing */ .site-footer .sep { opacity: .6; } /* ===== Modal (Impressum) ===== */ /* Modal stacking + visibility */ .modal { position: fixed; inset: 0; display: none; z-index: 99999; /* ensure above header and any other layers */ } /* Show modal when opened OR when aria-hidden says false (either works) */ .modal.open, .modal[aria-hidden="false"] { display: block; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); } .modal-dialog { position: relative; max-width: 760px; margin: 8vh auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; z-index: 1; /* entry animation */ opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .2s ease, transform .2s ease; } /* Keep the heading visible while scrolling the body - KEEP maybe we need later */ /*.modal-dialog > h2 { position: sticky; top: 0; background: var(--surface); padding-top: .25rem; z-index: 2; }*/ .modal.open .modal-dialog { opacity: 1; transform: none; } .modal-close { position: absolute; top: .4rem; right: .5rem; height: 34px; width: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; font-size: 20px; line-height: 1; } .modal-close:hover { filter: brightness(1.03); } .modal-body p { margin: .5rem 0 1rem; } .modal-body h3 { margin: 1.25rem 0 .5rem; } /* Make the dialog a flex column and cap its height */ .modal-dialog { display: flex; flex-direction: column; max-height: calc(100vh - 16vh); /* 100vh minus 8vh top/bottom margins */ overscroll-behavior: contain; /* prevent scroll chaining to page */ scrollbar-gutter: stable; /* avoid layout shift when scrollbar appears */ } /* Only the content area scrolls */ .modal-body { overflow: auto; -webkit-overflow-scrolling: touch; /* smooth on iOS */ } /* mobile fit */ /* Mobile: slightly smaller margins → larger usable height */ @media (max-width: 600px) { .modal-dialog { margin: 6vh 1rem; max-height: calc(100vh - 12vh); } } /* Portfolio grid in modal */ .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: .5rem; } .portfolio-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } /* Portfolio grid in modal — exact banner aspect */ .portfolio-card .thumb { display: block; width: 100%; aspect-ratio: 1024 / 327; /* exact ratio */ object-fit: cover; /* no stretching; crops only if needed */ object-position: center; } .portfolio-card .caption { padding: .5rem .75rem; font-weight: 600; } /* Disabled/placeholder states */ .portfolio-card a[aria-disabled="true"] { pointer-events: none; cursor: not-allowed; opacity: .65; } /* Placeholder tile should match the same footprint */ .portfolio-card.placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 1024 / 327; /* exact ratio */ border: 1px dashed var(--border); background: transparent; color: var(--muted); font-weight: 600; } /* Smaller, centered explanatory note under the grid */ .portfolio-note { margin: .75rem 0 0; text-align: center; opacity: .85; font-size: .8rem; /* more smaller than body text */ /* was .9rem */ line-height: 1.5; } /* Make the portfolio note non-selectable even inside .selectable containers */ .selectable .portfolio-note { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none; /* iOS long-press menu */ } @media (max-width: 380px) { .portfolio-note { font-size: .75rem; } } /* Responsive columns */ @media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .portfolio-grid { grid-template-columns: 1fr; } } /* Responsive */ @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .grid-3, .cards { grid-template-columns: 1fr; } .nav .links { display: none; } } /* Header actions container (right side) */ .nav .actions { display: flex; align-items: center; gap: .5rem; } /* Small icon button (Patreon) */ .icon-btn { height: 36px; min-width: 36px; padding: 0 .5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { filter: brightness(1.03); } .icon-btn:focus { outline: none; } .icon-btn:focus-visible { box-shadow: 0 0 0 2px rgba(212,163,115,.35), var(--shadow); } /* Icon image inside the button, 1:1 */ .icon-btn img { display: block; width: 20px; height: 20px; object-fit: contain; } /* Patreon modal: single card centered; use same card style, different aspect */ .patreon-grid { display: grid; grid-template-columns: 1fr; justify-items: center; } .patreon-card { width: 100%; max-width: 380px; /* keeps it visually consistent with other tiles */ } /* Exact aspect for the Patreon card image: 1890:3360 (portrait) */ .patreon-card .thumb { display: block; width: 100%; aspect-ratio: 1890 / 3360; object-fit: cover; object-position: center; } /* TEMP: show content even if JS didn't run */ /*.fade-in { opacity: 1 !important; transform: none !important; }*/ /* === Ultra-small screen support & overflow safety === */ /* Avoid accidental horizontal scroll from any tiny overflow */ /*html, body { overflow-x: hidden; }*/ #viewer.section { overflow-x: hidden; overflow-y: visible; /* let page scroll pass through */ } /* Safer than touching html/body */ .hero, #viewer.section, .about-visual, .section, .container { /*overflow-x: hidden;*/ overflow-y: visible; /* let page scroll pass through */ } /* Ensure media never exceeds container width */ img, video, canvas, svg { max-width: 100%; height: auto; } /* Long URLs (e.g., in Impressum) should wrap on narrow screens */ .modal-body a, .site-footer a, .selectable a { overflow-wrap: anywhere; word-break: break-word; } /* Slight reductions for compact phones */ @media (max-width: 380px) { .container { padding: 0 .75rem; } /* was 1.25rem */ .nav { height: 56px; } .nav .brand { gap: .4rem; min-width: 0; } .nav .brand .name { white-space: nowrap; } /* prevent jitter */ .nav .brand img { height: 30px; } /* was 38px */ .theme-toggle, .icon-btn { min-width: 32px; /* was 36px */ height: 32px; padding: 0 .5rem; } .headline-panel { padding: .7em 1em; border-radius: 14px; } .btn { padding: .7rem 1rem; } } /* If the device is extremely narrow, hide the brand text to keep layout tidy */ @media (max-width: 340px) { .nav .brand .name { display: none; } } /* === Modal scrollbar tuning (thinner + right-side breathing room) === */ /* The modal body is the scroll container */ .modal-body { /* Keep layout stable when scrollbar appears, and give text breathing room on the right */ scrollbar-gutter: stable both-edges; padding-inline-end: .4rem; } /* Firefox (Gecko) scrollbar size & colors */ .modal-body { scrollbar-width: thin; /* thin | auto */ scrollbar-color: rgba(255,255,255,.35) transparent; /* thumb | track */ } html.theme-light .modal-body { scrollbar-color: rgba(0,0,0,.3) transparent; } /* WebKit/Blink (Chrome/Edge/Safari) */ .modal-body::-webkit-scrollbar { width: 6px; /* make 6px if you want it even slimmer */ } .modal-body::-webkit-scrollbar-track { background: transparent; } .modal-body::-webkit-scrollbar-thumb { border-radius: 6px; background-clip: padding-box; border: 2px solid transparent; /* inner gap for a lighter look */ background-color: rgba(255,255,255,.35); } html.theme-light .modal-body::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.3); } /* --- Pricing page helpers --- */ .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; } .btn-row .btn + .btn { margin-left: 0; } /* gap handles it */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; } @media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } } .form-field { display: block; } .form-field label, .form-field legend { font-weight: 600; display: block; margin: 0 0 .35rem; } .form-field input[type="number"], .form-field select { width: 100%; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .radio-row, .check-row { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; } .check-row input, .radio-row input { transform: translateY(1px); } .price-breakdown { display: grid; gap: .35rem; } .price-breakdown .break-row { display: flex; align-items: baseline; justify-content: space-between; padding: .35rem 0; } .price-breakdown .break-row.total { font-size: 1.15rem; border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .25rem; } .price-breakdown .sep { border: none; border-top: 1px solid var(--border); margin: .5rem 0; } /* Avoid cutting off last glyphs at the right edge inside modals */ .modal .modal-body { box-sizing: border-box; padding-inline-end: 0.5ch; /* ~halbe Zeichenbreite */ } /* Fallback for older browsers without logical props */ @supports not (padding-inline-end: 1px) { .modal .modal-body { padding-right: 0.5ch; } } /* Reserve space for vertical scrollbar so it doesn't overlay text */ .modal .modal-body { overflow: auto; /* ensures it's the scroll container */ scrollbar-gutter: stable; /* or: stable both-edges if you want symmetry */ } @supports not (scrollbar-gutter: stable) { .modal .modal-body { padding-inline-end: var(--sbw, 0px); } }