/* Theme Name: OwnServer Theme URI: https://ownserver.eu/ Author: Own Server Author URI: https://ownserver.eu/ Description: Eigenständiges, performantes Theme für Own Server – deutsche KI-Souveränität für den Mittelstand. Dunkles, technisches Design, keine externen Requests, DSGVO-freundlich: keine Google Fonts, keine CDNs, kein Tracking. Läuft ohne Page-Builder. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ownserver Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, translation-ready, block-styles, wide-blocks */ /* ========================================================================= 1. Design tokens ========================================================================= */ :root { /* Brand */ --os-blue: #1562fd; --os-blue-bright: #4f8bff; --os-blue-deep: #0b3fb0; --os-ink: #16181d; --os-paper: #fbfbfb; /* Dark surface scale */ --os-bg: #0a0c10; --os-bg-alt: #0d1016; --os-surface: #12151d; --os-surface-2: #171b25; --os-surface-3: #1d222e; /* Lines */ --os-line: rgba(255, 255, 255, .08); --os-line-strong: rgba(255, 255, 255, .16); --os-line-blue: rgba(21, 98, 253, .38); /* Text */ --os-text: #eef2f8; --os-text-soft: #b8c2d4; --os-text-mute: #8b96ab; --os-text-dim: #8993a8; /* Effects */ --os-glow: 0 0 0 1px rgba(21, 98, 253, .35), 0 18px 60px -18px rgba(21, 98, 253, .55); --os-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .7); --os-shadow-lg:0 2px 4px rgba(0, 0, 0, .4), 0 32px 64px -24px rgba(0, 0, 0, .85); /* Type */ --os-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --os-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fluid type scale */ --os-fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem); --os-fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); --os-fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); --os-fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); --os-fs-lead: clamp(1.06rem, 1rem + .45vw, 1.3rem); --os-fs-body: 1.0625rem; --os-fs-sm: .9375rem; --os-fs-xs: .8125rem; /* Space */ --os-gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); --os-section: clamp(4.5rem, 2.5rem + 7vw, 9rem); --os-container: 1200px; --os-container-narrow: 780px; /* Radius */ --os-r-sm: 6px; --os-r: 12px; --os-r-lg: 18px; --os-r-xl: 26px; /* Semantic tokens — every one of these is re-declared for the light theme. */ --os-text-strong: #ffffff; --os-on-brand: #ffffff; --os-overlay-soft: rgba(255, 255, 255, .03); --os-overlay: rgba(255, 255, 255, .06); --os-overlay-strong: rgba(255, 255, 255, .07); --os-overlay-hover: rgba(255, 255, 255, .30); --os-overlay-input: rgba(255, 255, 255, .04); --os-header-bg: rgba(10, 12, 16, .72); --os-header-bg-stuck:rgba(10, 12, 16, .92); --os-blue-tint-soft: rgba(21, 98, 253, .07); --os-blue-tint: rgba(21, 98, 253, .10); --os-blue-tint-mid: rgba(21, 98, 253, .12); --os-blue-ring: rgba(21, 98, 253, .22); --os-code-text: #cfe0ff; --os-link-hover: #7ea9ff; --os-blue-hover: #0d55e8; --os-tile-bg: rgba(18, 21, 29, .72); color-scheme: dark; --os-header-h: 74px; --os-ease: cubic-bezier(.22, .68, .36, 1); } /* ------------------------------------------------------------------------- 1b. Light theme The dark palette above is the default. Everything below re-declares the SAME token names, so no component rule needs to know which theme is active. Applied when is set by the header toggle (assets/js/theme.js), which also persists the choice in localStorage. ---------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; /* Surfaces */ --os-bg: #ffffff; --os-bg-alt: #f4f6fa; --os-surface: #ffffff; --os-surface-2: #f4f6fa; --os-surface-3: #e9edf3; /* Lines */ --os-line: rgba(16, 24, 40, .11); --os-line-strong: rgba(16, 24, 40, .20); --os-line-blue: rgba(21, 98, 253, .35); /* Text — all values checked against #ffffff for WCAG AA (>= 4.5:1). */ --os-text: #16181d; --os-text-soft: #3d4653; --os-text-mute: #59616f; --os-text-dim: #667083; --os-text-strong: #0b0d12; /* A brighter blue reads fine on black but fails on white, so it darkens. */ --os-blue-bright: #0b4fd1; --os-link-hover: #1562fd; --os-code-text: #0b3fb0; --os-blue-hover: #0b47c4; --os-tile-bg: rgba(255, 255, 255, .85); /* Overlays flip from white-on-dark to black-on-light. */ --os-overlay-soft: rgba(16, 24, 40, .030); --os-overlay: rgba(16, 24, 40, .055); --os-overlay-strong: rgba(16, 24, 40, .070); --os-overlay-hover: rgba(16, 24, 40, .280); --os-overlay-input: rgba(16, 24, 40, .035); --os-header-bg: rgba(255, 255, 255, .78); --os-header-bg-stuck: rgba(255, 255, 255, .94); /* Shadows must be far softer on white or they read as dirt. */ --os-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -12px rgba(16, 24, 40, .14); --os-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 32px 64px -24px rgba(16, 24, 40, .18); } /* * Same palette, applied when the visitor's OPERATING SYSTEM asks for light and * they have not explicitly chosen dark. This is a media query, so it lands * before the first paint — a JS check after load would flash the dark palette. * The two blocks are identical by construction; edit them together. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; /* Surfaces */ --os-bg: #ffffff; --os-bg-alt: #f4f6fa; --os-surface: #ffffff; --os-surface-2: #f4f6fa; --os-surface-3: #e9edf3; /* Lines */ --os-line: rgba(16, 24, 40, .11); --os-line-strong: rgba(16, 24, 40, .20); --os-line-blue: rgba(21, 98, 253, .35); /* Text — all values checked against #ffffff for WCAG AA (>= 4.5:1). */ --os-text: #16181d; --os-text-soft: #3d4653; --os-text-mute: #59616f; --os-text-dim: #667083; --os-text-strong: #0b0d12; /* A brighter blue reads fine on black but fails on white, so it darkens. */ --os-blue-bright: #0b4fd1; --os-link-hover: #1562fd; --os-code-text: #0b3fb0; --os-blue-hover: #0b47c4; --os-tile-bg: rgba(255, 255, 255, .85); /* Overlays flip from white-on-dark to black-on-light. */ --os-overlay-soft: rgba(16, 24, 40, .030); --os-overlay: rgba(16, 24, 40, .055); --os-overlay-strong: rgba(16, 24, 40, .070); --os-overlay-hover: rgba(16, 24, 40, .280); --os-overlay-input: rgba(16, 24, 40, .035); --os-header-bg: rgba(255, 255, 255, .78); --os-header-bg-stuck: rgba(255, 255, 255, .94); /* Shadows must be far softer on white or they read as dirt. */ --os-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -12px rgba(16, 24, 40, .14); --os-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 32px 64px -24px rgba(16, 24, 40, .18); } } /* The toggle sets data-theme explicitly; this only styles the button itself. */ .os-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .9rem; font: inherit; font-size: var(--os-fs-xs); font-weight: 560; flex: none; background: var(--os-overlay-input); border: 1px solid var(--os-line-strong); border-radius: var(--os-r-sm); color: var(--os-text-soft); cursor: pointer; transition: color .2s var(--os-ease), border-color .2s var(--os-ease), background .2s var(--os-ease); } .os-theme-toggle:hover { color: var(--os-text-strong); border-color: var(--os-overlay-hover); } .os-theme-toggle svg { width: 15px; height: 15px; flex: none; } .os-theme-toggle > span { display: inline-flex; align-items: center; gap: .5rem; } /* The button states what clicking it DOES, so dark shows "Helles Design". */ .os-theme-toggle__to-dark { display: none !important; } .os-theme-toggle__to-light { display: inline-flex; } /* Logo swap: the wordmark ships in a light and a dark cut. */ .os-brand__logo { display: block; } .os-brand__logo--dark { display: none; } /* Light — chosen explicitly. */ :root[data-theme="light"] .os-theme-toggle__to-dark { display: inline-flex !important; } :root[data-theme="light"] .os-theme-toggle__to-light { display: none; } :root[data-theme="light"] .os-brand__logo--light { display: none; } :root[data-theme="light"] .os-brand__logo--dark { display: block; } /* Light — inherited from the operating system. Must mirror the block above, otherwise a system-light visitor gets the light palette with the dark logo. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .os-theme-toggle__to-dark { display: inline-flex !important; } :root:not([data-theme="dark"]) .os-theme-toggle__to-light { display: none; } :root:not([data-theme="dark"]) .os-brand__logo--light { display: none; } :root:not([data-theme="dark"]) .os-brand__logo--dark { display: block; } } /* ========================================================================= 2. Reset & base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--os-header-h) + 20px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--os-bg); color: var(--os-text); font-family: var(--os-font); font-size: var(--os-fs-body); line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.os-nav-open { overflow: hidden; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.022em; font-weight: 640; text-wrap: balance; } h1 { font-size: var(--os-fs-h1); } h2 { font-size: var(--os-fs-h2); } h3 { font-size: var(--os-fs-h3); letter-spacing: -.014em; } p { margin: 0 0 1.15em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--os-blue-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--os-link-hover); } ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; } li { margin-bottom: .4em; } strong, b { font-weight: 660; color: var(--os-text-strong); } hr { border: 0; border-top: 1px solid var(--os-line); margin: 2.5rem 0; } ::selection { background: var(--os-blue); color: var(--os-on-brand); } :focus-visible { outline: 2px solid var(--os-blue-bright); outline-offset: 3px; border-radius: 3px; } /* ========================================================================= 3. Layout primitives ========================================================================= */ .os-container { width: 100%; max-width: var(--os-container); margin-inline: auto; padding-inline: clamp(1.15rem, .6rem + 2vw, 2.5rem); } .os-container--narrow { max-width: var(--os-container-narrow); } .os-main { display: block; } .os-section { padding-block: var(--os-section); position: relative; } .os-section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } .os-section--alt { background: var(--os-bg-alt); } .os-section--line { border-top: 1px solid var(--os-line); } .os-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: .75rem 1.25rem; background: var(--os-blue); color: var(--os-on-brand); font-weight: 600; border-radius: 0 0 var(--os-r-sm) 0; } .os-skip-link:focus { left: 0; color: var(--os-on-brand); } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .screen-reader-text:focus { clip-path: none; height: auto; width: auto; padding: .75rem 1.25rem; background: var(--os-blue); color: var(--os-on-brand); z-index: 100000; } /* Section heading cluster */ .os-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--os-fs-sm); font-weight: 600; letter-spacing: 0; color: var(--os-blue-bright); margin-bottom: .85rem; } .os-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); } .os-head--center { margin-inline: auto; text-align: center; } .os-lead { font-size: var(--os-fs-lead); line-height: 1.6; color: var(--os-text-soft); max-width: 66ch; } /* Grids */ .os-grid { display: grid; gap: var(--os-gap); } .os-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .os-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } /* ========================================================================= 4. Buttons ========================================================================= */ .os-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.6rem; border: 1px solid transparent; border-radius: var(--os-r-sm); font-size: var(--os-fs-sm); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .22s var(--os-ease), border-color .22s var(--os-ease), transform .22s var(--os-ease), box-shadow .22s var(--os-ease), color .22s var(--os-ease); } .os-btn svg { width: 16px; height: 16px; flex: none; transition: transform .22s var(--os-ease); } .os-btn:hover svg { transform: translateX(3px); } .os-btn--primary { background: var(--os-blue); color: var(--os-on-brand); } .os-btn--primary:hover { background: var(--os-blue-hover); color: var(--os-on-brand); } .os-btn--ghost { background: var(--os-overlay-soft); border-color: var(--os-line-strong); color: var(--os-text); } .os-btn--ghost:hover { background: var(--os-overlay-strong); border-color: var(--os-overlay-hover); color: var(--os-text-strong); } .os-btn--lg { padding: 1.05rem 2rem; font-size: 1rem; } .os-btn--block { width: 100%; } .os-btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; } /* Text link with arrow */ .os-link { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--os-fs-sm); font-weight: 590; color: var(--os-blue-bright); text-decoration: none; } .os-link::after { content: "→"; transition: transform .22s var(--os-ease); } .os-link:hover::after { transform: translateX(4px); } /* ========================================================================= 5. Site header ========================================================================= */ .os-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .3s var(--os-ease); } /* The blur lives on a pseudo-element: backdrop-filter on .os-header itself would make it the containing block for the fixed-position mobile drawer (.os-nav), collapsing the drawer to the 74px header height. */ .os-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--os-header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: background .3s var(--os-ease); } .os-header.is-stuck { border-bottom-color: var(--os-line); } .os-header.is-stuck::before { background: var(--os-header-bg-stuck); } .os-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--os-header-h); } .os-brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; } .os-brand img, .os-brand svg { width: clamp(150px, 42vw, 186px); height: auto; max-width: 100%; } .os-brand__text { font-weight: 680; font-size: 1.15rem; letter-spacing: -.02em; color: var(--os-text); } .os-nav { display: flex; align-items: center; gap: 1.75rem; } /* Footer bottom bar: theme toggle beside the social link. */ .os-footer__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .os-nav__menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .os-nav__menu li { margin: 0; position: relative; } .os-nav__menu a { display: block; padding: .5rem .8rem; border-radius: var(--os-r-sm); font-size: var(--os-fs-sm); font-weight: 540; color: var(--os-text-soft); text-decoration: none; transition: color .2s var(--os-ease), background .2s var(--os-ease); } .os-nav__menu a:hover { color: var(--os-text-strong); background: var(--os-overlay); } .os-nav__menu .current-menu-item > a, .os-nav__menu .current_page_item > a, .os-nav__menu .current-menu-ancestor > a, .os-nav__menu .is-current > a { color: var(--os-text-strong); } .os-nav__menu .current-menu-item > a::after, .os-nav__menu .current_page_item > a::after, .os-nav__menu .is-current > a::after { content: ""; display: block; height: 2px; margin: .35rem .35rem -.4rem; border-radius: 2px; background: var(--os-blue); } /* Sub menus */ .os-nav__menu .sub-menu { position: absolute; top: calc(100% + .5rem); left: 0; min-width: 210px; padding: .4rem; margin: 0; list-style: none; background: var(--os-surface-2); border: 1px solid var(--os-line); border-radius: var(--os-r); box-shadow: var(--os-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--os-ease), transform .2s var(--os-ease), visibility .2s; } .os-nav__menu li:hover > .sub-menu, .os-nav__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .os-nav__menu .sub-menu a { padding: .55rem .75rem; } .os-nav__toggle { display: none; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; background: var(--os-overlay-input); border: 1px solid var(--os-line-strong); border-radius: var(--os-r-sm); color: var(--os-text); cursor: pointer; } .os-nav__toggle span { position: relative; display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px; transition: background .2s var(--os-ease); } .os-nav__toggle span::before, .os-nav__toggle span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s var(--os-ease); } .os-nav__toggle span::before { top: -5.5px; } .os-nav__toggle span::after { top: 5.5px; } .os-nav__toggle[aria-expanded="true"] span { background: transparent; } .os-nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); } .os-nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); } @media (max-width: 900px) { .os-nav__toggle { display: inline-flex; } .os-nav { position: fixed; inset: var(--os-header-h) 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.25rem; padding: 1.75rem clamp(1.15rem, .6rem + 2vw, 2.5rem) 2.5rem; background: var(--os-bg); border-top: 1px solid var(--os-line); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--os-ease), transform .25s var(--os-ease), visibility .25s; } .os-nav.is-open { opacity: 1; visibility: visible; transform: none; } .admin-bar .os-nav { top: calc(var(--os-header-h) + 32px); } .os-nav__menu { flex-direction: column; align-items: stretch; gap: 0; } .os-nav__menu a { padding: .9rem .25rem; font-size: 1.15rem; font-weight: 580; border-bottom: 1px solid var(--os-line); border-radius: 0; } .os-nav__menu a:hover { background: none; } .os-nav__menu .current-menu-item > a::after, .os-nav__menu .current_page_item > a::after, .os-nav__menu .is-current > a::after { display: none; } .os-nav__menu .current-menu-item > a, .os-nav__menu .current_page_item > a, .os-nav__menu .is-current > a { color: var(--os-blue-bright); } .os-nav__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 1rem; } .os-header__cta { width: 100%; } .os-header__cta .os-btn { width: 100%; } } /* ========================================================================= 6. Hero ========================================================================= */ .os-hero { position: relative; padding-block: clamp(4.5rem, 2rem + 9vw, 9.5rem) clamp(4rem, 2rem + 6vw, 7rem); overflow: hidden; isolation: isolate; } /* A single quiet tonal shift. No grid, no glow, no gradients. */ .os-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, var(--os-bg-alt), var(--os-bg)); border-bottom: 1px solid var(--os-line); } .os-hero__inner { max-width: 900px; } .os-hero__title { font-size: var(--os-fs-display); font-weight: 680; letter-spacing: -.035em; line-height: .98; margin: 0 0 1.5rem; } .os-hero__title span { display: block; } .os-hero__title span:nth-child(3) { color: var(--os-blue-bright); } .os-hero__lead { margin-bottom: 2.25rem; } .os-hero .os-btn-row { margin-bottom: 2.5rem; } /* Hero highlight list */ .os-hero__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; list-style: none; margin: 0; padding: 0; background: var(--os-line); border: 1px solid var(--os-line); border-radius: var(--os-r); overflow: hidden; } .os-hero__points li { margin: 0; padding: 1rem 1.1rem; background: var(--os-tile-bg); } .os-hero__points b { display: flex; align-items: center; gap: .5rem; font-size: var(--os-fs-sm); font-weight: 620; color: var(--os-text-strong); margin-bottom: .2rem; } .os-hero__points b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--os-blue); box-shadow: 0 0 0 3px var(--os-blue-ring); flex: none; } .os-hero__points span { font-size: var(--os-fs-xs); color: var(--os-text-mute); } /* ========================================================================= 7. Cards & content blocks ========================================================================= */ .os-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1.1rem + 1vw, 2rem); background: var(--os-surface); border: 1px solid var(--os-line); border-radius: var(--os-r-lg); transition: border-color .28s var(--os-ease), transform .28s var(--os-ease), background .28s var(--os-ease); } .os-card:hover { border-color: var(--os-line-strong); } .os-card h3 { margin-bottom: .6rem; } .os-card p { color: var(--os-text-soft); font-size: var(--os-fs-sm); } .os-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 1.15rem; border: 1px solid var(--os-line-blue); border-radius: var(--os-r-sm); background: var(--os-blue-tint); color: var(--os-blue-bright); flex: none; } .os-card__icon svg { width: 21px; height: 21px; } .os-card__num { font-family: var(--os-mono); font-size: var(--os-fs-xs); letter-spacing: .14em; color: var(--os-blue-bright); margin-bottom: .9rem; display: block; } /* Numbered problem list */ .os-points { display: grid; gap: 1px; background: var(--os-line); border: 1px solid var(--os-line); border-radius: var(--os-r-lg); overflow: hidden; } .os-points__item { padding: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); background: var(--os-surface); } .os-points__item h3 { font-size: 1.1rem; margin-bottom: .4rem; display: flex; gap: .7rem; align-items: baseline; } .os-points__item h3 em { font-family: var(--os-mono); font-style: normal; font-size: var(--os-fs-xs); color: var(--os-blue-bright); flex: none; } .os-points__item p { color: var(--os-text-mute); font-size: var(--os-fs-sm); margin: 0; padding-left: 1.9rem; } @media (min-width: 760px) { .os-points { grid-template-columns: 1fr 1fr; } } /* Split section (text + panel) */ .os-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; } @media (max-width: 900px) { .os-split { grid-template-columns: 1fr; } } /* Spec panel (services) */ .os-spec { display: flex; flex-direction: column; padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem); background: var(--os-surface); border: 1px solid var(--os-line); border-radius: var(--os-r-lg); height: 100%; } .os-spec__list { list-style: none; margin: 0 0 1.25rem; padding: 0; } .os-spec__list:last-child { margin-bottom: 0; } .os-spec__list li { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: .35rem 1rem; padding: .85rem 0; border-bottom: 1px dashed var(--os-line); margin: 0; font-size: var(--os-fs-sm); } .os-spec__list li:last-child { border-bottom: 0; } .os-spec__list b { font-size: var(--os-fs-sm); color: var(--os-text-mute); font-weight: 500; } .os-spec__list span { color: var(--os-text); } @media (max-width: 520px) { .os-spec__list li { grid-template-columns: 1fr; } } .os-spec__note { margin-top: auto; padding: 1rem 1.15rem; border-left: 2px solid var(--os-blue); background: var(--os-blue-tint-soft); border-radius: 0 var(--os-r-sm) var(--os-r-sm) 0; font-size: var(--os-fs-sm); color: var(--os-text-soft); } /* Tag chips */ .os-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .35rem 0 1.25rem; padding: 0; } .os-tags li { margin: 0; padding: .4rem .85rem; border: 1px solid var(--os-line-strong); border-radius: 100px; background: var(--os-overlay-soft); font-size: var(--os-fs-xs); color: var(--os-text-soft); } /* ========================================================================= 8. Pricing ========================================================================= */ .os-price { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); border: 1px solid var(--os-line-blue); border-radius: var(--os-r-xl); background: var(--os-surface); overflow: hidden; } @media (max-width: 900px) { .os-price { grid-template-columns: 1fr; } } .os-price__amount { display: flex; align-items: baseline; gap: .6rem; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); font-weight: 690; letter-spacing: -.035em; line-height: 1; color: var(--os-text-strong); margin: .35rem 0 .35rem; } .os-price__amount small { font-size: var(--os-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--os-text-mute); } .os-price__list { list-style: none; margin: 1.5rem 0 0; padding: 0; } .os-price__list li { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: .3rem 1rem; align-items: baseline; padding: .7rem 0; margin: 0; border-top: 1px solid var(--os-line); font-size: var(--os-fs-sm); } .os-price__list b { font-size: var(--os-fs-sm); color: var(--os-blue-bright); font-weight: 600; } .os-price__list span { color: var(--os-text-soft); } @media (max-width: 520px) { .os-price__list li { grid-template-columns: 1fr; } } .os-price__action { text-align: center; } .os-price__action .os-btn { width: 100%; } .os-price__hint { margin-top: .9rem; font-size: var(--os-fs-xs); color: var(--os-text-mute); } /* ========================================================================= 9. CTA band ========================================================================= */ .os-cta { position: relative; text-align: center; padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); border-top: 1px solid var(--os-line); overflow: hidden; isolation: isolate; } .os-cta { background: var(--os-bg-alt); } .os-cta h2 { font-size: var(--os-fs-h1); letter-spacing: -.03em; max-width: 20ch; margin-inline: auto; } .os-cta .os-lead { margin: 0 auto 2.25rem; } .os-cta .os-btn-row { justify-content: center; } /* Contact detail cards */ .os-contact { display: grid; gap: var(--os-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .os-contact__item { display: flex; flex-direction: column; gap: .3rem; padding: 1.4rem 1.5rem; background: var(--os-surface); border: 1px solid var(--os-line); border-radius: var(--os-r); text-decoration: none; color: var(--os-text); transition: border-color .25s var(--os-ease), background .25s var(--os-ease), transform .25s var(--os-ease); } a.os-contact__item:hover { border-color: var(--os-line-blue); background: var(--os-surface-2); transform: translateY(-2px); color: var(--os-text); } .os-contact__label { font-size: var(--os-fs-sm); color: var(--os-text-mute); } .os-contact__value { font-weight: 590; font-size: 1.02rem; color: var(--os-text-strong); overflow-wrap: anywhere; } /* ========================================================================= 10. Prose (legal pages, posts, editor output) ========================================================================= */ .os-prose { max-width: 74ch; } .os-prose > *:first-child { margin-top: 0; } .os-prose h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--os-line); } .os-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .os-prose h3 { font-size: 1.15rem; margin-top: 2rem; color: var(--os-text-strong); } .os-prose h4 { font-size: 1.02rem; margin-top: 1.5rem; } .os-prose p, .os-prose li { color: var(--os-text-soft); font-size: var(--os-fs-sm); line-height: 1.75; } .os-prose a { overflow-wrap: anywhere; } .os-prose ul, .os-prose ol { padding-left: 1.3em; } .os-prose blockquote { margin: 1.75rem 0; padding: .3rem 0 .3rem 1.35rem; border-left: 2px solid var(--os-blue); color: var(--os-text); font-size: var(--os-fs-lead); } .os-prose code { font-family: var(--os-mono); font-size: .88em; padding: .16em .42em; border-radius: 4px; background: var(--os-overlay-strong); color: var(--os-code-text); } .os-prose pre { padding: 1.15rem 1.25rem; border: 1px solid var(--os-line); border-radius: var(--os-r); background: var(--os-surface); overflow-x: auto; } .os-prose pre code { background: none; padding: 0; } .os-prose table { width: 100%; border-collapse: collapse; font-size: var(--os-fs-sm); display: block; overflow-x: auto; } .os-prose th, .os-prose td { padding: .7rem .9rem; border: 1px solid var(--os-line); text-align: left; } .os-prose th { background: var(--os-surface-2); color: var(--os-text-strong); font-weight: 600; } .os-prose img { border-radius: var(--os-r); margin: 1.75rem 0; } .os-prose figure { margin: 1.75rem 0; } .os-prose figcaption { font-size: var(--os-fs-xs); color: var(--os-text-mute); margin-top: .6rem; } /* Page hero for interior pages */ .os-page-hero { position: relative; padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); border-bottom: 1px solid var(--os-line); overflow: hidden; isolation: isolate; } .os-page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--os-bg-alt); } .os-page-hero h1 { margin-bottom: .75rem; } .os-page-hero .os-lead { margin-bottom: 0; } /* Breadcrumb */ .os-crumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; font-size: var(--os-fs-xs); color: var(--os-text-dim); } .os-crumbs a { color: var(--os-text-mute); text-decoration: none; } .os-crumbs a:hover { color: var(--os-blue-bright); } .os-crumbs span[aria-hidden] { opacity: .5; } /* ========================================================================= 11. Posts & archives ========================================================================= */ .os-posts { display: grid; gap: var(--os-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .os-post-card { overflow: hidden; padding: 0; } .os-post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--os-surface-2); } .os-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--os-ease); } .os-post-card:hover .os-post-card__media img { transform: scale(1.04); } .os-post-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .os-post-card__meta { font-size: var(--os-fs-xs); color: var(--os-text-mute); } .os-post-card h2, .os-post-card h3 { font-size: 1.2rem; margin: 0; } .os-post-card a { text-decoration: none; color: inherit; } .os-post-card a:hover { color: var(--os-blue-bright); } .os-pagination { margin-top: 3rem; display: flex; justify-content: center; } .os-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; } .os-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .7rem; border: 1px solid var(--os-line); border-radius: var(--os-r-sm); background: var(--os-surface); color: var(--os-text-soft); text-decoration: none; font-size: var(--os-fs-sm); } .os-pagination .page-numbers:hover { border-color: var(--os-line-blue); color: var(--os-text-strong); } .os-pagination .page-numbers.current { background: var(--os-blue); border-color: var(--os-blue); color: var(--os-on-brand); } /* Comments (minimal, styled if enabled) */ .os-comments { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--os-line); } .os-comments ol { list-style: none; padding: 0; } .os-comments .comment-body { padding: 1.25rem; border: 1px solid var(--os-line); border-radius: var(--os-r); background: var(--os-surface); margin-bottom: 1rem; } .os-comments input[type="text"], .os-comments input[type="email"], .os-comments input[type="url"], .os-comments textarea, .os-search input[type="search"] { width: 100%; padding: .8rem 1rem; border: 1px solid var(--os-line-strong); border-radius: var(--os-r-sm); background: var(--os-surface); color: var(--os-text); font: inherit; font-size: var(--os-fs-sm); } .os-comments input:focus, .os-comments textarea:focus, .os-search input:focus { border-color: var(--os-blue); outline: none; } .os-comments .submit { all: unset; } .os-comments .form-submit input, .os-search button { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.6rem; border: 0; border-radius: var(--os-r-sm); background: var(--os-blue); color: var(--os-on-brand); font: inherit; font-weight: 600; font-size: var(--os-fs-sm); cursor: pointer; } .os-search { display: flex; gap: .6rem; max-width: 480px; } /* ========================================================================= 12. Footer ========================================================================= */ .os-footer { border-top: 1px solid var(--os-line); background: var(--os-bg-alt); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; } .os-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-bottom: 2.75rem; border-bottom: 1px solid var(--os-line); } @media (max-width: 720px) { .os-footer__top { grid-template-columns: 1fr; } } .os-footer__brand img, .os-footer__brand svg { width: 186px; height: auto; max-width: 100%; margin-bottom: 1.15rem; } .os-footer__claim { font-size: var(--os-fs-sm); color: var(--os-text-mute); max-width: 34ch; } .os-footer__col h2 { font-size: var(--os-fs-sm); font-weight: 620; color: var(--os-text); margin-bottom: 1rem; } .os-footer__col ul { list-style: none; margin: 0; padding: 0; } .os-footer__col li { margin-bottom: .55rem; } .os-footer__col a { font-size: var(--os-fs-sm); color: var(--os-text-soft); text-decoration: none; overflow-wrap: anywhere; } .os-footer__col a:hover { color: var(--os-blue-bright); } .os-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; font-size: var(--os-fs-xs); color: var(--os-text-dim); } .os-footer__note { margin: 0; color: var(--os-text-mute); } .os-footer__social { display: flex; gap: .5rem; } .os-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--os-line); border-radius: var(--os-r-sm); color: var(--os-text-soft); transition: border-color .22s var(--os-ease), color .22s var(--os-ease), background .22s var(--os-ease); } .os-footer__social a:hover { border-color: var(--os-line-blue); color: var(--os-text-strong); background: var(--os-blue-tint-mid); } .os-footer__social svg { width: 17px; height: 17px; } /* ========================================================================= 13. Reveal-on-scroll (progressive enhancement) ========================================================================= */ .os-reveal { opacity: 0; transform: translateY(16px); } .js .os-reveal { transition: opacity .6s var(--os-ease), transform .6s var(--os-ease); } .os-reveal.is-visible, .no-js .os-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .os-reveal { opacity: 1; transform: none; } } /* ========================================================================= 14. WordPress core / block compatibility ========================================================================= */ .alignleft { float: left; margin: .4rem 1.6rem 1.2rem 0; } .alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: min(1200px, 92vw); margin-inline: auto; } .alignfull { max-width: none; width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-size: var(--os-fs-xs); color: var(--os-text-mute); } .sticky, .bypostauthor { display: block; } .wp-block-image img { border-radius: var(--os-r); } .admin-bar .os-header { top: 32px; } @media (max-width: 782px) { .admin-bar .os-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .os-header { position: static; } } /* ========================================================================= 15. Print ========================================================================= */ @media print { .os-header, .os-footer, .os-cta, .os-nav__toggle, .os-hero__bg, .os-skip-link { display: none !important; } body { background: #fff; color: #000; } .os-prose p, .os-prose li, .os-lead { color: #000; } a { color: #000; text-decoration: underline; } .os-section { padding-block: 1.5rem; } } /* ========================================================================= 16. Portrait (Über uns) ========================================================================= */ .os-portrait { margin: 0 auto; max-width: 420px; padding: clamp(1rem, .6rem + 1.4vw, 1.75rem); background: var(--os-surface); border: 1px solid var(--os-line); border-radius: var(--os-r-lg); } .os-portrait img { display: block; width: 100%; max-width: 100%; height: auto; margin-inline: auto; }