/* ============================================================= NEWOLUTION – Designsystem Mobile First. Breakpoints: 480 / 768 / 1024 / 1280 px 1280 px ist der Umbruchpunkt der waagerechten Kopfnavigation. Keine externen Fonts, keine externen Requests. ============================================================= */ /* ------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------- */ :root { /* Marke */ --brand: #009fe3; --brand-rgb: 0, 159, 227; --brand-light: #56c7f2; --brand-deep: #0077ae; /* Flächen */ --bg: #07131d; --bg-2: #0b1b27; --surface: #0e2230; --surface-2: #12293a; /* Text */ --ink: #ffffff; --muted: #b8c7d1; --muted-2: #7f95a4; /* Linien */ --line: rgba(184, 199, 209, 0.16); --line-strong: rgba(var(--brand-rgb), 0.42); /* Signal – ausschliesslich für Roadmap-/Hinweismarkierungen */ --warning: #e0a94f; /* Geometrie */ --radius: 20px; --radius-sm: 12px; --radius-pill: 999px; --container: 1220px; --pad-x: 20px; /* Schatten */ --shadow: 0 24px 60px rgba(0, 0, 0, 0.42); --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.28); /* Typografie */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Bewegung */ --ease: cubic-bezier(0.22, 0.68, 0.32, 1); --dur: 0.45s; } /* ------------------------------------------------------------- 1b. HELLES THEME Aktiv über . Standard ist dunkel. Nur Farb-Tokens werden überschrieben, keine Komponentenregeln. ------------------------------------------------------------- */ [data-theme="light"] { /* Marke – dunkleres Blau für Text auf hellem Grund (Kontrast). #007BB0 reichte nur auf reinem Weiß (4,71:1); auf der getönten Fläche --bg-2 (#F2F6F9) fiel Kleintext auf 4,33:1. #00719F liegt bei 5,44:1 auf Weiß und 5,00:1 auf #F2F6F9. */ --brand: #00719f; --brand-rgb: 0, 113, 159; --brand-light: #0092d1; --brand-deep: #005b83; /* Flächen */ --bg: #ffffff; --bg-2: #f2f6f9; --surface: #ffffff; --surface-2: #eaf1f6; /* Text */ --ink: #07131d; --muted: #3d5261; --muted-2: #4f6373; /* Linien */ --line: rgba(7, 19, 29, 0.14); --line-strong: rgba(var(--brand-rgb), 0.5); /* Signal */ --warning: #7d5008; --shadow: 0 20px 48px rgba(7, 19, 29, 0.1); --shadow-sm: 0 8px 22px rgba(7, 19, 29, 0.07); color-scheme: light; } [data-theme="light"] body { background-image: radial-gradient(circle at 78% 4%, rgba(var(--brand-rgb), 0.08), transparent 34%), radial-gradient(circle at 4% 42%, rgba(var(--brand-rgb), 0.05), transparent 26%); } [data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.88); } /* Inhaltslinks brauchen auf hellem Grund den dunkleren Blauton. Bewusst eng gefasst, damit Wortmarke, Navigation und Buttons ihre eigenen Farben behalten. */ [data-theme="light"] .prose a, [data-theme="light"] p a, [data-theme="light"] .card a, [data-theme="light"] address a, [data-theme="light"] .acc-panel a, [data-theme="light"] .source-note a, [data-theme="light"] .checkbox-row a, [data-theme="light"] .link-arrow { color: var(--brand); } /* Fußzeilenlinks bleiben zurückhaltend */ [data-theme="light"] .footer-col a, [data-theme="light"] .footer-col address a, [data-theme="light"] .footer-bottom a { color: var(--muted); } [data-theme="light"] .footer-col a:hover, [data-theme="light"] .footer-bottom a:hover { color: var(--brand); } /* Das Badge liegt auf einer blau getönten Fläche und braucht den dunkelsten Blauton */ [data-theme="light"] .badge--proven { color: var(--brand-deep); } [data-theme="light"] .prose a:hover, [data-theme="light"] p a:hover, [data-theme="light"] .link-arrow:hover { color: var(--brand-deep); } [data-theme="light"] .roadmap__head .badge--roadmap, [data-theme="light"] .badge--roadmap { color: var(--warning); } /* Auf Markenflächen bleibt die Schrift hell */ [data-theme="light"] .btn-primary, [data-theme="light"] .header-cta { color: #ffffff; } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .header-cta:hover { color: #ffffff; } [data-theme="light"] .skip-link { color: #ffffff; } [data-theme="light"] .skip-link:focus { color: #ffffff; } /* Karten brauchen auf weißem Grund eine sichtbare Kante */ [data-theme="light"] .card, [data-theme="light"] .layer, [data-theme="light"] .accordion, [data-theme="light"] .mockup, [data-theme="light"] .energy-visual, [data-theme="light"] .kpi-grid, [data-theme="light"] .step { box-shadow: var(--shadow-sm); } [data-theme="light"] .roadmap { background: rgba(154, 100, 16, 0.05); border-color: rgba(154, 100, 16, 0.34); } [data-theme="light"] .badge--roadmap { border-color: rgba(154, 100, 16, 0.45); } [data-theme="light"] .form-notice { background: rgba(154, 100, 16, 0.06); border-color: rgba(154, 100, 16, 0.4); } [data-theme="light"] .demo-panel__label, [data-theme="light"] .demo-panel__label::before { color: var(--warning); } [data-theme="light"] .demo-panel__label::before { background: var(--warning); } /* SVG-Knotenflächen */ [data-theme="light"] .efx-node rect { fill: var(--surface-2); } [data-theme="light"] .efx-line { stroke: rgba(var(--brand-rgb), 0.34); } [data-theme="light"] .mockup__dot { background: rgba(7, 19, 29, 0.18); } /* ------------------------------------------------------------- 2. RESET / BASIS ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); background-image: radial-gradient(circle at 78% 4%, rgba(var(--brand-rgb), 0.11), transparent 34%), radial-gradient(circle at 4% 42%, rgba(var(--brand-rgb), 0.06), transparent 26%); background-attachment: fixed; color: var(--muted); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Lange deutsche Komposita dürfen umbrechen, statt das Layout zu sprengen */ overflow-wrap: break-word; } h1, h2, h3, p, li, address, .statement, .kpi span { overflow-wrap: break-word; } /* Silbentrennung nur auf schmalen Viewports, wo der Platz es erzwingt */ @media (max-width: 767px) { h1, h2, h3, p, li, address, .statement, .kpi span { hyphens: auto; } } img, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { color: var(--ink); font-weight: 640; line-height: 1.14; letter-spacing: -0.018em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem); } h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem); } h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); } h4 { font-size: 1.0625rem; letter-spacing: -0.01em; } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--brand-light); text-decoration: none; } a:hover { color: var(--brand); } ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; } li { margin-bottom: 0.4em; } strong { color: var(--ink); font-weight: 620; } small { font-size: 0.8125rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } ::selection { background: rgba(var(--brand-rgb), 0.32); color: #fff; } :focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------- 3. LAYOUT ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); } .section--tight { padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); } .section--alt { background: var(--bg-2); border-block: 1px solid var(--line); } .section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); } .section-head p { color: var(--muted); font-size: 1.0625rem; } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 1rem; } .lead { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); color: var(--muted); max-width: 60ch; } .accent { color: var(--brand); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--brand); color: #032230; font-weight: 640; padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); transition: top 0.2s var(--ease); } .skip-link:focus { top: 12px; color: #032230; } /* Grid-Helfer */ .grid { display: grid; gap: 1.25rem; } /* Rasterzellen duerfen unter ihre Mindestbreite schrumpfen, sonst erzeugen lange Wörter oder nowrap-Elemente horizontalen Überlauf */ .grid > *, .split > * { min-width: 0; } @media (min-width: 480px) { .grid--2sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid { gap: 1.5rem; } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ------------------------------------------------------------- 4. HEADER / NAVIGATION ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(7, 19, 29, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; } .brand { display: flex; flex-direction: column; gap: 2px; color: var(--ink); margin-right: auto; } .brand:hover { color: var(--ink); } .brand-word { font-size: 1.18rem; font-weight: 720; letter-spacing: 0.02em; line-height: 1; } .brand-word .brand-accent { color: var(--brand); } .brand-tagline { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; } .nav-toggle { --bar: 2px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; padding: 0; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 19px; height: var(--bar); background: var(--ink); border-radius: 2px; transition: transform 0.28s var(--ease), opacity 0.2s linear; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; } .nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(6px); } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); } .main-nav { position: fixed; inset: 68px 0 auto 0; background: var(--bg-2); border-bottom: 1px solid var(--line); display: grid; gap: 2px; padding: 1rem var(--pad-x) 1.5rem; transform: translateY(-8px); opacity: 0; /* visibility statt nur opacity: nimmt das geschlossene Menü aus Tab-Reihenfolge und Accessibility-Tree heraus */ visibility: hidden; pointer-events: none; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s; max-height: calc(100dvh - 68px); overflow-y: auto; } .main-nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; } .nav-link { color: var(--muted); font-weight: 560; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--line); } .nav-link:last-of-type { border-bottom: 0; } .nav-link[aria-current="page"] { color: var(--brand); } .header-cta { display: none; } /* ------------------------------------------------------------- 4b. UMSCHALTER: DESIGN UND SPRACHE Beide sind bewusst kompakt und stehen auf jeder Breite im Header, damit sie nicht hinter der mobilen Navigation liegen. ------------------------------------------------------------- */ .header-tools { display: flex; align-items: center; gap: 0.4rem; flex: none; } /* --- Design-Umschalter (Schieberegler) --- */ .theme-switch { position: relative; width: 52px; height: 28px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); } .theme-switch:hover { border-color: var(--line-strong); } /* Der Knopf, der von links nach rechts gleitet */ .theme-switch__knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #ffffff; transition: transform 0.26s var(--ease), background 0.2s var(--ease); } .theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(24px); } .theme-switch__knob svg { width: 13px; height: 13px; } /* Mond bei Dunkel, Sonne bei Hell */ .theme-switch .icon-sun { display: none; } .theme-switch[aria-checked="true"] .icon-sun { display: block; } .theme-switch[aria-checked="true"] .icon-moon { display: none; } /* --- Sprach-Umschalter --- */ /* Bewusst als zwei echte Links umgesetzt: funktioniert ohne JavaScript, ist teilbar und für Suchmaschinen auswertbar. */ .lang-switch { position: relative; display: flex; align-items: center; height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); } /* Die Breite steht als Variable, weil Knopf und Links exakt gleich breit sein müssen. Wird nur einer der beiden Werte geändert, schiebt sich der Knopf aus dem Umschalter heraus und erzeugt waagerechten Bildlauf. */ .lang-switch { --lang-breite: 32px; } .lang-switch__knob { position: absolute; top: 2px; left: 2px; width: var(--lang-breite); height: 22px; border-radius: var(--radius-pill); background: var(--brand); transition: transform 0.26s var(--ease); pointer-events: none; } .lang-switch[data-active="en"] .lang-switch__knob { transform: translateX(var(--lang-breite)); } .lang-switch a { position: relative; z-index: 1; width: var(--lang-breite); height: 22px; display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted-2); border-radius: var(--radius-pill); transition: color 0.2s var(--ease); } .lang-switch a:hover { color: var(--ink); } .lang-switch a[aria-current="true"] { color: #04202e; } [data-theme="light"] .lang-switch a[aria-current="true"] { color: #ffffff; } /* Auf sehr schmalen Viewports Platz für die Umschalter schaffen */ @media (max-width: 479px) { .brand-tagline { display: none; } .header-inner { gap: 0.5rem; } } /* 320 px (kleinste noch verbreitete Geraetebreite): Kopfzeile weiter verdichten */ @media (max-width: 359px) { .header-inner { gap: 0.3rem; } .brand-word { font-size: 1.02rem; } .lang-switch { --lang-breite: 27px; } } /* Ab hier steht die waagerechte Navigation. Der Claim tritt dann zurueck: Wortmarke, Navigation, Umschalter und CTA benoetigen zusammen rund 1150 px, der Inhaltsbereich ist 1180 px breit. Mit Claim passt die Zeile nicht. */ @media (min-width: 1280px) { .brand-tagline { display: none; } } @media (min-width: 1280px) { .nav-toggle { display: none; } .main-nav { position: static; display: flex; align-items: center; gap: 0.15rem; padding: 0; background: none; border: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; max-height: none; overflow: visible; margin-right: 0.35rem; } .nav-link { border: 0; padding: 0.5rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.88rem; white-space: nowrap; } .nav-link:hover { background: rgba(var(--brand-rgb), 0.1); color: var(--ink); } .header-tools { gap: 0.4rem; margin-right: 0.4rem; } .header-inner { gap: 0.6rem; } .header-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand); color: #04202e; font-weight: 640; font-size: 0.88rem; padding: 0.6rem 0.95rem; border-radius: var(--radius-pill); white-space: nowrap; } .header-cta:hover { background: var(--brand-light); color: #04202e; } .header-cta svg { width: 16px; } } /* ------------------------------------------------------------- 5. BUTTONS ------------------------------------------------------------- */ .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: inherit; font-size: 0.98rem; font-weight: 640; padding: 0.85rem 1.5rem; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn svg { width: 17px; flex: none; } .btn-primary { background: var(--brand); color: #04202e; } .btn-primary:hover { background: var(--brand-light); color: #04202e; transform: translateY(-1px); } .btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn-secondary:hover { background: rgba(var(--brand-rgb), 0.1); color: var(--ink); border-color: var(--brand); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; } .link-arrow svg { width: 15px; transition: transform 0.2s var(--ease); } .link-arrow:hover svg { transform: translateX(3px); } /* ------------------------------------------------------------- 6. KARTEN / BADGES ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .card--hover:hover { border-color: var(--line-strong); transform: translateY(-3px); } .card h3, .card h4 { margin-bottom: 0.5rem; } .card p { font-size: 0.98rem; color: var(--muted); } /* Karte über die volle Rasterbreite – für einen hervorgehobenen Punkt */ .card--wide { grid-column: 1 / -1; background: linear-gradient(150deg, rgba(var(--brand-rgb), 0.12), var(--surface) 62%); border-color: rgba(var(--brand-rgb), 0.32); } /* Kompakte Karten im Vierer-Raster */ .grid--4 .card h3 { font-size: 1.0625rem; } .card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), 0.12); border: 1px solid rgba(var(--brand-rgb), 0.24); color: var(--brand); margin-bottom: 1.1rem; } .card-icon svg { width: 22px; } .card-num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--brand); letter-spacing: 0.08em; } .badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 720; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); border: 1px solid; white-space: nowrap; } .badge--proven { background: rgba(var(--brand-rgb), 0.14); border-color: rgba(var(--brand-rgb), 0.4); color: var(--brand-light); } .badge--roadmap { background: transparent; border-color: rgba(224, 169, 79, 0.5); color: var(--warning); } .badge--optional { background: transparent; border-color: var(--line); color: var(--muted-2); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; /* Umbruch erlauben: lange Badge-Texte sprengen sonst auf 360 px die Rasterspalte */ flex-wrap: wrap; } /* Merkmalliste mit Häkchen */ .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .check-list li { position: relative; padding-left: 1.75rem; margin: 0; font-size: 0.98rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 2px; border: 2px solid var(--brand); transform: rotate(45deg); } /* ------------------------------------------------------------- 7. HERO ------------------------------------------------------------- */ .hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6rem); position: relative; overflow: hidden; } .hero-grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } } .hero h1 { margin-bottom: 1.1rem; } .hero-note { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted-2); max-width: 52ch; } .hero-note::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--brand); } .hero--sub { padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) clamp(2rem, 1.4rem + 3vw, 3.5rem); border-bottom: 1px solid var(--line); } /* ------------------------------------------------------------- 8. ENERGIEFLUSS-GRAFIK (SVG) ------------------------------------------------------------- */ .energy-visual { background: linear-gradient(160deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(0.75rem, 0.4rem + 1.5vw, 1.25rem); box-shadow: var(--shadow); } .energy-svg { width: 100%; height: auto; display: block; } .efx-line { fill: none; stroke: rgba(var(--brand-rgb), 0.26); stroke-width: 1.6; } .efx-pulse { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 26 340; animation: efx-move 4.6s linear infinite; } .efx-pulse--2 { animation-delay: -0.6s; } .efx-pulse--3 { animation-delay: -1.2s; } .efx-pulse--4 { animation-delay: -1.8s; } .efx-pulse--5 { animation-delay: -2.4s; } .efx-pulse--6 { animation-delay: -3s; } .efx-pulse--7 { animation-delay: -3.6s; } @keyframes efx-move { from { stroke-dashoffset: 366; } to { stroke-dashoffset: 0; } } .efx-node rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; } .efx-node text { fill: var(--ink); font-family: var(--font); font-size: 12px; font-weight: 620; } .efx-node .efx-sub { fill: var(--muted-2); font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em; } .efx-node .efx-ico { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .efx-core rect { fill: rgba(var(--brand-rgb), 0.13); stroke: var(--brand); stroke-width: 1.5; } .efx-core text { fill: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 720; letter-spacing: 0.04em; } .efx-core .efx-sub { fill: var(--brand-light); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; } /* Demo-Panel unterhalb der Grafik */ .demo-panel { margin-top: 0.75rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; } .demo-panel__label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.66rem; font-weight: 720; letter-spacing: 0.13em; text-transform: uppercase; color: var(--warning); margin-bottom: 0.75rem; } .demo-panel__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); flex: none; } .demo-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 480px) { .demo-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .demo-value small { display: block; color: var(--muted-2); font-size: 0.72rem; letter-spacing: 0.03em; } .demo-value strong { display: block; font-size: 1.05rem; font-weight: 680; color: var(--ink); } .demo-panel__note { margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--muted-2); } /* ------------------------------------------------------------- 9. SPLIT-HEADING (Systembotschaft) ------------------------------------------------------------- */ .split { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); } @media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .split--sticky > :first-child { position: sticky; top: 100px; } } .statement { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem); font-weight: 640; line-height: 1.18; letter-spacing: -0.018em; color: var(--ink); margin: 0; } .statement span { color: var(--muted-2); display: block; } /* ------------------------------------------------------------- 10. PROZESS-SCHRITTE ------------------------------------------------------------- */ .steps { display: grid; gap: 1rem; counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } } .step { position: relative; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } @media (min-width: 1024px) { .step { border-radius: 0; border-right-width: 0; background: transparent; } .step:first-child { border-radius: var(--radius) 0 0 var(--radius); } .step:last-child { border-right-width: 1px; border-radius: 0 var(--radius) var(--radius) 0; } } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--brand); letter-spacing: 0.1em; display: block; margin-bottom: 0.9rem; } .step h3 { font-size: 1.15rem; margin-bottom: 0.45rem; } .step p { font-size: 0.94rem; margin: 0; } /* ------------------------------------------------------------- 11. SÄULEN-KARTEN ------------------------------------------------------------- */ .pillar { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); position: relative; overflow: hidden; } .pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), transparent); } .pillar--primary { background: linear-gradient(165deg, rgba(var(--brand-rgb), 0.1), var(--surface) 55%); border-color: rgba(var(--brand-rgb), 0.3); } .pillar .eyebrow { margin-bottom: 0.75rem; } .pillar h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); } .pillar .check-list { margin: 1.4rem 0 1.75rem; } .pillar .btn-row { margin-top: auto; padding-top: 0.5rem; } /* ------------------------------------------------------------- 12. KPI-BEREICH ------------------------------------------------------------- */ .kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kpi { background: var(--surface); padding: clamp(1.1rem, 0.8rem + 1vw, 1.8rem); } .kpi strong { display: block; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--brand); margin-bottom: 0.35rem; } .kpi span { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.35; } .source-note { display: flex; gap: 0.65rem; margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: rgba(var(--brand-rgb), 0.06); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--muted); } .source-note strong { color: var(--ink); } /* ------------------------------------------------------------- 13. EBENEN-STACK (Connect / Optimize / Control) ------------------------------------------------------------- */ .layer { display: grid; gap: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); margin-bottom: 1.25rem; } @media (min-width: 768px) { .layer { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem; } } .layer__label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.85rem; } .layer__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.4), transparent); } .layer h3 { margin-bottom: 0.6rem; } .tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .tag-list li { margin: 0; font-size: 0.86rem; color: var(--muted); padding: 0.42rem 0.85rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-pill); } /* ------------------------------------------------------------- 14. ROADMAP-BLOCK ------------------------------------------------------------- */ .roadmap { border: 1px dashed rgba(224, 169, 79, 0.4); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: rgba(224, 169, 79, 0.04); } .roadmap__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .roadmap__head h2, .roadmap__head h3 { margin: 0; } .roadmap .card { background: var(--bg-2); border-color: rgba(224, 169, 79, 0.22); } /* ------------------------------------------------------------- 15. AKKORDEON ------------------------------------------------------------- */ .accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .acc-item + .acc-item { border-top: 1px solid var(--line); } .acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: 0; color: var(--ink); font-family: inherit; font-size: 1.02rem; font-weight: 600; text-align: left; padding: 1.15rem clamp(1rem, 0.8rem + 0.8vw, 1.6rem); cursor: pointer; } .acc-trigger:hover { color: var(--brand-light); } .acc-icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brand); position: relative; transition: transform 0.25s var(--ease); } .acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; } .acc-icon::before { width: 10px; height: 1.5px; } .acc-icon::after { width: 1.5px; height: 10px; transition: opacity 0.2s linear; } .acc-trigger[aria-expanded="true"] .acc-icon::after { opacity: 0; } .acc-panel { padding: 0 clamp(1rem, 0.8rem + 0.8vw, 1.6rem) 1.35rem; color: var(--muted); font-size: 0.98rem; } .acc-panel[hidden] { display: none; } /* ------------------------------------------------------------- 16. UI-MOCKUP (PV-Software) ------------------------------------------------------------- */ .mockup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .mockup__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; background: var(--bg-2); border-bottom: 1px solid var(--line); } .mockup__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; } .mockup__title { margin-left: 0.5rem; font-size: 0.76rem; color: var(--muted-2); letter-spacing: 0.05em; } .mockup__body { padding: 1.1rem; display: grid; gap: 0.85rem; } .mockup__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } .mockup__tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem; } .mockup__tile small { display: block; color: var(--muted-2); font-size: 0.68rem; margin-bottom: 0.2rem; } .mockup__tile b { color: var(--ink); font-size: 1rem; font-weight: 660; } .mockup__caption { padding: 0.75rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--muted-2); background: var(--bg-2); } /* ------------------------------------------------------------- 17. PARTNERPROZESS ------------------------------------------------------------- */ .process-rail { display: grid; gap: 0; counter-reset: prc; } .process-rail__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; position: relative; } .process-rail__item:last-child { padding-bottom: 0; } .process-rail__item::before { counter-increment: prc; content: counter(prc); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--brand-rgb), 0.12); border: 1px solid rgba(var(--brand-rgb), 0.34); color: var(--brand); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; } .process-rail__item:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 8px; width: 1px; background: var(--line); } .process-rail__item h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; } .process-rail__item p { font-size: 0.94rem; margin: 0; } /* ------------------------------------------------------------- 18. VERTRAUENSBEREICH ------------------------------------------------------------- */ .trust { border-block: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); } .trust__label { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.25rem; text-align: center; } .trust__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .trust__mark { font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); } /* ------------------------------------------------------------- 18b. FAKTEN-BAND Kompakte, belegbare Eckdaten – kleiner als das KPI-Raster. ------------------------------------------------------------- */ .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fact { background: var(--surface); padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); } .fact strong { display: block; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--brand); margin-bottom: 0.25rem; } .fact span { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.4; } /* ------------------------------------------------------------- 18c. TEAMPORTRÄTS ------------------------------------------------------------- */ .team { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .member { display: grid; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); } @media (min-width: 520px) { .member { grid-template-columns: 132px minmax(0, 1fr); align-items: start; } } /* Fehlt die Bilddatei noch, bleibt eine neutrale Fläche statt eines kaputten Symbols stehen. Der Alternativtext bleibt lesbar. */ .member__photo { width: 100%; max-width: 180px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.78rem; color: var(--muted-2); } .member__name { margin-bottom: 0.15rem; } .member__role { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.7rem; } .member p { font-size: 0.94rem; margin-bottom: 0.7rem; } .team-photo { width: 100%; max-width: 420px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 1 / 1; object-fit: cover; font-size: 0.85rem; color: var(--muted-2); } /* ------------------------------------------------------------- 18d. KUNDENWAND Die Logodateien sind uneinheitlich: teils transparent, teils mit weißem Hintergrund, teils dunkle Schrift. Eine weiße Kachel je Logo macht alle gleich behandelbar und funktioniert in beiden Themes – dunkle Logos bleiben lesbar, weiße JPG-Ränder fallen nicht als Kasten auf. ------------------------------------------------------------- */ .client-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 0; } @media (min-width: 520px) { .client-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .client-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .client-wall li { margin: 0; display: grid; place-items: center; min-height: 72px; padding: 0.9rem 1rem; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-sm); } .client-wall img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; } /* Kachel ohne Logodatei: Name als Wortmarke, gleiche Anmutung wie die übrigen Kacheln. Wird ersetzt, sobald die Logodatei vorliegt. */ .client-wall li.is-text { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: #2b3f4d; text-align: center; } /* Schmalere Variante für die Referenzenseite */ .client-wall--compact li { min-height: 62px; padding: 0.7rem 0.9rem; } .client-wall--compact img { max-height: 36px; } /* ------------------------------------------------------------- 19. FORMULAR ------------------------------------------------------------- */ .form-grid { display: grid; gap: 1.1rem; } @media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .field label, .fieldset-legend { display: block; font-size: 0.85rem; font-weight: 620; color: var(--ink); margin-bottom: 0.4rem; } .field .hint { display: block; font-size: 0.78rem; color: var(--muted-2); margin-top: 0.3rem; } .field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 0.98rem; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; transition: border-color 0.2s var(--ease); } .field textarea { min-height: 140px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline-offset: 1px; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem; margin: 0; } legend { padding-inline: 0.5rem; font-size: 0.85rem; font-weight: 620; color: var(--ink); } .radio-grid { display: grid; gap: 0.55rem; } @media (min-width: 640px) { .radio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .radio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .radio-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.92rem; cursor: pointer; transition: border-color 0.2s var(--ease); } .radio-option:hover, .radio-option:focus-within { border-color: var(--line-strong); } .radio-option input { accent-color: var(--brand); width: 17px; height: 17px; flex: none; } .checkbox-row { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; } .checkbox-row input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; margin-top: 0.15em; } /* Honeypot: für Menschen unsichtbar, für Skripte ein Köder. Bewusst nicht display:none – manche Bots ignorieren solche Felder. */ .honeypot { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-notice { display: flex; gap: 0.75rem; padding: 1rem 1.15rem; border: 1px dashed rgba(224, 169, 79, 0.45); background: rgba(224, 169, 79, 0.05); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--muted); } .form-notice strong { color: var(--warning); } /* ------------------------------------------------------------- 20. RECHTSTEXTE ------------------------------------------------------------- */ .prose { max-width: 74ch; } .prose h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); margin-top: 2.5rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.05rem; margin-top: 1.75rem; } .prose address { font-style: normal; color: var(--muted); } .notice { padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.9rem; margin-bottom: 2rem; } /* ------------------------------------------------------------- 21. CTA-BAND ------------------------------------------------------------- */ .cta-band { background: linear-gradient(150deg, rgba(var(--brand-rgb), 0.14), var(--surface) 60%); border: 1px solid rgba(var(--brand-rgb), 0.28); border-radius: var(--radius); padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); text-align: center; } .cta-band h2 { margin-bottom: 0.75rem; } .cta-band p { max-width: 54ch; margin-inline: auto; } .cta-band .btn-row { justify-content: center; } /* ------------------------------------------------------------- 22. FOOTER ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 4rem) 1.5rem; margin-top: clamp(3rem, 2rem + 4vw, 5rem); } .footer-grid { display: grid; gap: 2rem; } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; } } .footer-brand p { font-size: 0.92rem; max-width: 38ch; margin-top: 1rem; } .footer-col h2 { font-size: 0.76rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.9rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .footer-col li { margin: 0; } .footer-col a, .footer-col address { color: var(--muted); font-size: 0.92rem; font-style: normal; } .footer-col a:hover { color: var(--brand); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted-2); } .footer-bottom nav { display: flex; gap: 1.25rem; } .footer-bottom a { color: var(--muted-2); } /* ------------------------------------------------------------- 23. REVEAL-ANIMATION ------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Ohne JavaScript bleibt alles sichtbar */ .no-js .reveal { opacity: 1; transform: none; } /* ------------------------------------------------------------- 24. REDUZIERTE BEWEGUNG ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .efx-pulse { display: none; } .efx-line { stroke: rgba(var(--brand-rgb), 0.5); } .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------- 25. HILFSKLASSEN ------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .text-muted { color: var(--muted-2); } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } /* ------------------------------------------------------------- 26. DRUCK ------------------------------------------------------------- */ @media print { .site-header, .site-footer, .nav-toggle, .btn-row { display: none; } body { background: #fff; color: #000; } } /* ------------------------------------------------------------- 26b. Touch-Ziele ------------------------------------------------------------- Auf Geräten mit Fingerbedienung sollen anklickbare Elemente mindestens 44 x 44 px groß sein (WCAG 2.5.5 / 2.5.8). Wo eine echte Vergrößerung das Layout verändern würde – bei den beiden Umschaltern in der Kopfzeile und bei der Wortmarke – wird nur die *Trefferfläche* über ein Pseudoelement erweitert. Das sichtbare Element bleibt unverändert. Fließtextlinks innerhalb von Absätzen sind bewusst ausgenommen. WCAG 2.5.8 nimmt sie ausdrücklich aus; Innenabstände würden dort den Zeilenfall zerstören. ------------------------------------------------------------- */ @media (max-width: 1279px) { /* Fußzeilenlisten: echter Innenabstand, der Abstand der Liste wird entsprechend kleiner, damit die Fußzeile nicht auseinanderläuft. */ .footer-col ul { gap: 0; } .footer-col ul a { display: block; padding-block: 0.85rem; } /* Telefon- und E-Mail-Links in der Anschrift sind auf dem Handy die am häufigsten angetippten Elemente der Seite. */ /* Bewusst kein inline-block: Die E-Mail-Adresse ist länger als die Fußzeilenspalte und könnte dann nicht mehr umbrechen. Als inline wirkt der Innenabstand trotzdem auf die Trefferfläche, ohne den Zeilenfall zu verändern. */ .footer-col address a { padding-block: 0.85rem; } .footer-bottom nav { gap: 0.5rem; flex-wrap: wrap; } .footer-bottom nav a { display: inline-block; padding: 0.75rem; } /* Der Umschalter behält seine Größe, die Trefferfläche wächst. */ .theme-switch { position: relative; } .theme-switch::after { content: ""; position: absolute; inset: -8px; } /* Nur nach oben und unten aufziehen. Seitlich würde die Fläche des rechten Links bei 320 px über den Inhaltsbereich hinausragen und einen waagerechten Bildlauf erzeugen. */ .lang-switch a::after { content: ""; position: absolute; inset: -11px 0; } /* Ab 400 px reicht der Platz, um die Sprachlinks auch in der Breite auf 44 px zu bringen. Darunter bleiben sie schmaler – die Kopfzeile fasst dort Wortmarke, Schaltfläche und beide Umschalter sonst nicht. */ @media (min-width: 400px) { .lang-switch { --lang-breite: 44px; } } /* Wortmarke: Höhe der Trefferfläche im Kopf auf 44 px bringen. */ .brand { justify-content: center; min-height: 44px; } /* Die Schaltfläche darf im Flexkopf nicht zusammengedrückt werden. */ .nav-toggle { flex: none; } }