/* ========================================================================== KI-Beratung Schroell — Static site styles Design tokens from the Schroell Design System. ========================================================================== */ /* Schriften werden per preconnect + im jeder Seite geladen. @import erzwang eine serielle Ladekette: HTML -> style.css -> parsen -> erst dann der Font-Abruf. */ :root { --color-blue-900: #0F2540; --color-blue-700: #1D3C58; --color-blue-500: #3A6493; --color-blue-300: #B0C4D8; --color-blue-100: #E4ECF4; --color-orange-700: #C77600; --color-orange-500: #F39200; --color-orange-300: #FBC97A; --color-orange-100: #FDEEDB; --color-white: #FFFFFF; --color-offwhite: #FAF7F2; --color-gray-50: #F4F4F4; --color-gray-200: #E2E2E2; --color-gray-400: #A0A0A0; --color-gray-600: #6B6B6B; --color-gray-800: #333333; --color-black: #0B0B0B; --fg-1: var(--color-blue-700); --fg-2: var(--color-gray-800); --fg-3: var(--color-gray-600); --fg-muted: var(--color-gray-400); --fg-on-dark: var(--color-white); --fg-accent: var(--color-orange-500); --bg-1: var(--color-white); --bg-2: var(--color-offwhite); --bg-3: var(--color-gray-50); --bg-dark: var(--color-blue-700); --border: var(--color-gray-200); --border-strong: var(--color-blue-300); --danger: #B3261E; --success: #1E7A4B; --action: var(--color-orange-500); --action-hover: var(--color-orange-700); --link: var(--color-blue-700); --link-hover: var(--color-orange-500); --font-display: 'Montserrat', 'Open Sans', system-ui, -apple-system, sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-quote: 'Lato', 'Open Sans', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --shadow-sm: 0 1px 2px rgba(29, 60, 88, 0.06), 0 1px 1px rgba(29, 60, 88, 0.04); --shadow-md: 0 4px 12px rgba(29, 60, 88, 0.08), 0 1px 3px rgba(29, 60, 88, 0.05); --shadow-lg: 0 12px 32px rgba(29, 60, 88, 0.10), 0 2px 6px rgba(29, 60, 88, 0.06); --shadow-focus: 0 0 0 3px rgba(243, 146, 0, 0.35); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 200ms; --dur-slow: 360ms; --container: 1180px; --container-narrow: 760px; } * { box-sizing: border-box; } html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--fg-2); background: var(--bg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; margin: 0; } h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; } h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; } .lvl4 { font-size: 20px; font-weight: 600; } .lvl3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; } p { margin: 0 0 16px; text-wrap: pretty; } p:last-child { margin-bottom: 0; } strong { color: var(--fg-1); font-weight: 700; } a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease-out); } a:hover { color: var(--link-hover); } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--color-orange-300); color: var(--color-blue-900); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); } .narrow { max-width: var(--container-narrow); } .overline { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-accent); margin: 0 0 12px; display: block; } .accent-line { width: 88px; height: 6px; background: var(--color-orange-500); border-radius: 3px; margin: 0 0 28px; } .section { padding: clamp(56px, 8vw, 104px) 0; } .section-lead { font-size: 19px; color: var(--fg-2); max-width: 720px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 16px; font-weight: 600; padding: 13px 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); text-decoration: none; } .btn-primary { background: var(--action); color: #fff; } .btn-primary:hover { background: var(--action-hover); color: #fff; transform: translateY(-1px); } .btn-outline { border-color: var(--color-blue-700); color: var(--color-blue-700); background: transparent; } .btn-outline:hover { background: var(--color-blue-700); color: #fff; } .btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; background: transparent; } .btn-outline-light:hover { background: #fff; color: var(--color-blue-700); } /* ---- Header / nav ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; color: var(--fg-1); font-size: 18px; letter-spacing: -0.01em; } .brand .mark { width: 38px; height: 38px; border-radius: 9px; background: var(--color-blue-700); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; } .brand span small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--fg-accent); letter-spacing: 0.06em; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 15px; font-weight: 600; color: var(--fg-2); padding: 8px 12px; border-radius: 6px; } .nav-links a:hover { color: var(--fg-1); background: var(--bg-3); } .nav-links a.is-cta { color: var(--action); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--fg-1); margin: 5px 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); } /* ---- Hero ---- */ .hero { background: var(--bg-2); background-image: radial-gradient(circle at 1px 1px, rgba(176,196,216,0.35) 1px, transparent 0); background-size: 28px 28px; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: clamp(48px, 7vw, 92px) 0; } .hero h1 { margin-bottom: 20px; } .hero .lead { font-size: 20px; color: var(--fg-2); margin-bottom: 28px; max-width: 560px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .hero-img { border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; } .hero-img img { width: 100%; } /* ---- Trust badges ---- */ .badges { display: flex; flex-wrap: wrap; gap: 10px; } .badge { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--color-blue-100); color: var(--color-blue-700); border: 1px solid var(--border-strong); } /* ---- Cards ---- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .card.accent-top { position: relative; } .card.accent-top::before { content: ""; position: absolute; top: 0; left: 28px; width: 36px; height: 4px; background: var(--color-orange-500); border-radius: 0 0 3px 3px; } .card h3, .card h4 { margin-bottom: 12px; } .card ul { margin: 0; padding-left: 20px; } .card li { margin-bottom: 6px; } .card .kpi-num { font-family: var(--font-mono); font-size: 34px; font-weight: 700; color: var(--color-orange-500); line-height: 1; } .card-dark { background: var(--bg-dark); color: rgba(255,255,255,0.85); border-color: transparent; } .card-dark h3, .card-dark h4 { color: #fff; } /* ---- Bullet list styling ---- */ .bullets { list-style: none; margin: 0; padding: 0; } .bullets li { position: relative; padding-left: 30px; margin-bottom: 14px; } .bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--color-orange-500); transform: rotate(45deg); } /* ---- Step / maturity model ---- */ .steps { display: grid; gap: 16px; } .steps-7 { grid-template-columns: repeat(7, 1fr); } .steps-5 { grid-template-columns: repeat(5, 1fr); } .step { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 22px 18px; box-shadow: var(--shadow-sm); } .step .num { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: #fff; background: var(--color-blue-700); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 14px; } .step:nth-child(n) .num { background: linear-gradient(135deg, var(--color-blue-700), var(--color-blue-500)); } .step .lvl4 { font-size: 17px; margin-bottom: 8px; } .step p { font-size: 14px; color: var(--fg-3); } /* ---- Split feature block ---- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .on-dark { background: var(--bg-dark); color: rgba(255,255,255,0.86); } .on-dark h2, .on-dark h3 { color: #fff; } .on-dark .overline { color: var(--color-orange-300); } .on-dark .card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.86); } .on-dark .card h3, .on-dark .card h4 { color: #fff; } /* ---- KPI band ---- */ .kpi-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; } .kpi-band .big { font-family: var(--font-mono); font-size: clamp(40px, 6vw, 64px); font-weight: 700; color: var(--color-orange-500); line-height: 1; } .kpi-band .lbl { font-family: var(--font-display); font-weight: 700; color: var(--fg-1); font-size: 20px; margin: 8px 0 6px; } .kpi-band p { font-size: 15px; color: var(--fg-3); } blockquote { font-family: var(--font-quote); font-style: italic; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; color: var(--fg-1); border-left: 4px solid var(--color-orange-500); padding: 8px 28px; margin: 0; max-width: 820px; } /* ---- About ---- */ .about-grid { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; } .about-photo { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); } .linkedin-card { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-1); } .linkedin-card img { width: 44px; height: 44px; border-radius: 8px; } /* ---- FAQ ---- */ .faq-item { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-1); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-q .icon { flex: none; width: 24px; height: 24px; position: relative; transition: transform var(--dur) var(--ease-out); } .faq-q .icon::before, .faq-q .icon::after { content: ""; position: absolute; background: var(--color-orange-500); border-radius: 2px; } .faq-q .icon::before { top: 11px; left: 3px; width: 18px; height: 2px; } .faq-q .icon::after { left: 11px; top: 3px; width: 2px; height: 18px; transition: transform var(--dur) var(--ease-out); } .faq-item.open .faq-q .icon::after { transform: scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); } .faq-a-inner { padding: 0 24px 20px; color: var(--fg-2); } /* ---- CTA cards ---- */ .cta-final { background: var(--bg-2); } .cta-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; } /* ---- Contact / footer ---- */ .footer { background: var(--bg-dark); color: rgba(255,255,255,0.8); padding: 64px 0 40px; } .footer h3 { color: #fff; } .footer a { color: var(--color-orange-300); } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; } .footer .contact-line { margin-bottom: 6px; } .footer .muted { color: rgba(255,255,255,0.5); font-size: 14px; font-style: italic; } .footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; font-size: 14px; } .footer-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---- Sub-page hero (compact) ---- */ .page-hero { background: var(--bg-2); background-image: radial-gradient(circle at 1px 1px, rgba(176,196,216,0.35) 1px, transparent 0); background-size: 28px 28px; padding: clamp(48px, 7vw, 80px) 0; } .page-hero .container { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .page-hero .lead { font-size: 20px; color: var(--fg-2); max-width: 640px; margin: 18px 0 0; } .page-hero .hero-cta { margin-top: 26px; } .page-hero-mark { width: 120px; height: 120px; border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; } /* ---- Prose (legal pages) ---- */ .prose { max-width: var(--container-narrow); margin: 0 auto; } .prose .lvl3 { margin: 40px 0 10px; } .prose .lvl3:first-child { margin-top: 0; } .prose .lvl4 { margin: 24px 0 8px; } .prose p { color: var(--fg-2); } .prose ul { padding-left: 22px; margin: 0 0 16px; } .prose li { margin-bottom: 8px; } .prose blockquote { margin: 18px 0; background: var(--bg-3); border-radius: 0 8px 8px 0; } .prose .divider { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } /* ---- Highlight (==text==) ---- */ .hl { background: linear-gradient(transparent 60%, var(--color-orange-300) 60%); font-weight: 600; color: var(--fg-1); padding: 0 2px; } /* ---- Horizontal flow (attack chain) ---- */ .flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; align-items: stretch; } .flow .node { position: relative; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm); } .flow .node .n { font-family: var(--font-mono); font-weight: 700; color: var(--color-orange-500); font-size: 14px; } .flow .node .lvl4 { font-size: 17px; margin: 8px 0 6px; } .flow .node p { font-size: 14px; color: var(--fg-3); } .flow .arrow { align-self: center; color: var(--color-blue-300); font-size: 26px; padding: 0 6px; } /* ---- Compare pro/con ---- */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .compare .col { border-radius: 14px; padding: 28px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .compare .col.bad { background: #FBEEEC; border-color: #E7C6C0; } .compare .col.good { background: #EAF3EE; border-color: #C2DECF; } .compare .col h3 { margin-bottom: 14px; } .compare .col ul { list-style: none; margin: 0; padding: 0; } .compare .col li { position: relative; padding-left: 28px; margin-bottom: 10px; } .compare .col.bad li::before { content: "×"; position: absolute; left: 0; top: -1px; color: var(--danger); font-weight: 700; font-size: 18px; } .compare .col.good li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; } /* ---- Deck-style numbered slide sections ---- */ .deck-slide { padding: clamp(48px, 7vw, 88px) 0; border-bottom: 1px solid var(--border); position: relative; } .deck-slide .slide-no { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--fg-accent); } .deck-slide.dark { background: var(--bg-dark); color: rgba(255,255,255,0.86); border-bottom-color: rgba(255,255,255,0.12); } .deck-slide.dark h1, .deck-slide.dark h2, .deck-slide.dark h3, .deck-slide.dark .slide-no { color: #fff; } .deck-slide.dark .card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); } .deck-slide.dark .card h3, .deck-slide.dark .card h4 { color: #fff; } .big-stat { font-family: var(--font-mono); font-size: clamp(48px, 9vw, 96px); font-weight: 700; color: var(--color-orange-500); line-height: 1; } /* ---- Reveal on scroll ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .reveal.in { opacity: 1; transform: none; } /* ---- Responsive ---- */ @media (max-width: 1080px) { .steps-7 { grid-template-columns: repeat(4, 1fr); } .steps-5 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .nav-links { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; background: #fff; padding: 12px 24px 20px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); transform: translateY(-120%); /* visibility nimmt die Links aus der Tab-Reihenfolge, solange das Menue zu ist - translateY allein schob sie nur aus dem Bild. */ visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } .nav-links.open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out), visibility 0s; } .nav-links a { padding: 12px 8px; border-radius: 8px; } .nav-toggle { display: block; } .hero-grid, .split, .about-grid, .footer-grid { grid-template-columns: 1fr; } .page-hero .container { grid-template-columns: 1fr; } .page-hero-mark { order: -1; } .flow { grid-auto-flow: row; } .flow .arrow { transform: rotate(90deg); padding: 4px 0; justify-self: center; } .compare { grid-template-columns: 1fr; } .hero-img { order: -1; } .about-photo { max-width: 320px; } .grid-3, .grid-4, .steps-7, .steps-5, .kpi-band, .cta-cards { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } @media (min-width: 861px) and (max-width: 1080px) { .kpi-band { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Redesign 2026-08 — Bausteine der Neuausrichtung (KMU-Fokus) ========================================================================== */ /* ---- Header: echtes Logo statt CSS-Ersatzmarke ---- */ .brand img { height: 38px; width: auto; display: block; } /* ---- Hero: Netzwerk-Motiv + Kennzahlen ---- */ .hero-visual { background: var(--bg-1); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 34px 34px 28px; overflow: hidden; } .hero-visual svg { display: block; width: 100%; height: auto; } .hero-side { display: flex; flex-direction: column; gap: 20px; } .hero-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .hero-kpis .k { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px; box-shadow: var(--shadow-sm); text-align: center; } .hero-kpis .n { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--color-orange-500); line-height: 1; } .hero-kpis .l { font-size: 13px; color: var(--fg-3); margin-top: 6px; } .unit { font-family: var(--font-body); margin-left: 4px; } /* ---- Reifegrad: Marker ueber Stufe 2 und 3 ---- */ .stage-marker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; } .stage-marker span { grid-column: 2 / 4; display: flex; align-items: center; justify-content: center; height: 30px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-orange-700); background: var(--color-orange-100); border: 1px solid var(--color-orange-300); border-radius: 999px; } .stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .stages .s { display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--color-blue-300); } .stages .s .no { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--fg-3); letter-spacing: 0.06em; } .stages .s .lvl4 { font-size: 16px; font-weight: 600; margin: 8px 0 6px; } .stages .s p { font-size: 13.5px; color: var(--fg-3); line-height: 1.45; } .stages .s.is-here { border-color: var(--color-orange-300); border-top-color: var(--color-orange-500); box-shadow: var(--shadow-lg); } .stages .s.is-here .no { color: var(--color-orange-500); } .stages .s.mid { border-top-color: var(--color-blue-500); } .stages .s.top { background: var(--bg-dark); border-color: var(--bg-dark); border-top-color: var(--color-orange-500); box-shadow: var(--shadow-md); } .stages .s.top .no { color: var(--color-orange-300); } .stages .s.top .lvl4 { color: #fff; } .here-badge { display: none; } .stages .s.top p { color: rgba(255,255,255,0.72); } /* ---- Icons ---- */ .ico { flex: none; } /* ---- Anwendungsfall-Karten (2 Spalten, mit Substanz) ---- */ .uc { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 32px; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .uc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .uc::before { content: ""; position: absolute; top: 0; left: 32px; width: 36px; height: 4px; background: var(--color-orange-500); border-radius: 0 0 3px 3px; } .uc .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .uc h3 { font-size: 23px; font-weight: 600; } .uc p { font-size: 16px; color: var(--fg-2); line-height: 1.55; } .uc p.sub { font-size: 15px; color: var(--fg-3); line-height: 1.5; } .badge-warm { background: var(--color-orange-100); color: var(--color-orange-700); border-color: var(--color-orange-300); } /* ---- Karten-Listen mit Punkt ---- */ .dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .dots li { display: flex; gap: 9px; font-size: 15px; color: var(--fg-2); } .dots li::before { content: "\00b7"; color: var(--color-orange-500); font-weight: 700; } .on-dark .dots li { color: rgba(255,255,255,0.78); } .on-dark .dots li::before { color: var(--color-orange-300); } /* ---- Hinweis-/Fussnotenkasten ---- */ .note { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-1); border: 1px solid var(--border); border-left: 4px solid var(--color-orange-500); border-radius: 0 12px 12px 0; padding: 22px 26px; } .note p { font-size: 16px; color: var(--fg-2); line-height: 1.55; } .on-dark .note { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); border-left-color: var(--color-orange-500); } .on-dark .note p { color: rgba(255,255,255,0.78); } .on-dark .note strong { color: #fff; } .note.small p { font-size: 15px; } /* ---- Querverweis-Leiste ---- */ .crossref { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; box-shadow: var(--shadow-sm); } .crossref p { font-size: 16px; color: var(--fg-2); flex: 1 1 420px; } /* ---- Anwendungsfaelle-Seite: Fall-Layout ---- */ .case { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 52px; align-items: start; } .case .aside { display: flex; flex-direction: column; gap: 14px; } .case .aside .no { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--fg-accent); } .case .aside .line { width: 60px; height: 5px; background: var(--color-orange-500); border-radius: 3px; } .case .aside h2 { font-size: 30px; font-weight: 700; } .case .body { display: flex; flex-direction: column; gap: 18px; } .soft { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 26px; } .section-rule { border-bottom: 1px solid var(--border); } /* ---- Kennzeichen-Liste (Haken / Kreuz) ---- */ .marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .marks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; } .marks li.off { color: var(--fg-3); } /* ---- Impressum/Datenschutz: Sprungmarken ---- */ .legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 860px; margin: 0 auto; } .legal-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--border); padding-left: 18px; } .legal-nav .t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 8px; } .legal-nav a { font-size: 14.5px; color: var(--fg-3); padding: 5px 0; } .legal-nav a:hover { color: var(--fg-1); font-weight: 600; } .legal-body { display: flex; flex-direction: column; gap: 40px; } .legal-body h3 { font-size: 24px; font-weight: 600; } .tabs { display: flex; gap: 8px; margin-top: 12px; } .tabs a { font-size: 15px; font-weight: 600; color: var(--fg-1); background: var(--bg-1); border: 1px solid var(--border-strong); padding: 10px 20px; border-radius: 999px; } .tabs a.is-active { color: #fff; background: var(--bg-dark); border-color: var(--bg-dark); } .contact-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-tiles a { display: flex; align-items: center; gap: 14px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-sm); } .contact-tiles .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); } .contact-tiles .val { font-size: 16px; font-weight: 600; color: var(--fg-1); } /* ---- Ueber mich: Stationen ---- */ .stations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .stations .st { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); } .stations .st .k { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-orange-500); letter-spacing: 0.08em; } .stations .st .v { font-family: var(--font-display); font-weight: 700; color: var(--fg-1); font-size: 18px; margin-top: 7px; } .stations .st.now { background: var(--bg-dark); border-color: var(--bg-dark); box-shadow: var(--shadow-md); } .stations .st.now .k { color: var(--color-orange-300); } .stations .st.now .v { color: #fff; } /* ---- Vortragsseite: Kapiteluebersicht ---- */ .chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .chapters .ch { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; box-shadow: var(--shadow-sm); } .chapters .ch .r { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-orange-500); letter-spacing: 0.08em; } .chapters .ch .lvl4 { font-size: 18px; font-weight: 600; margin: 9px 0 7px; } .chapters .ch p { font-size: 14.5px; color: var(--fg-3); line-height: 1.5; } .chapters .ch.dark { background: var(--bg-dark); border-color: var(--bg-dark); box-shadow: var(--shadow-md); } .chapters .ch.dark .r { color: var(--color-orange-300); } .chapters .ch.dark .lvl4 { color: #fff; } .chapters .ch.dark p { color: rgba(255,255,255,0.72); } /* ---- Responsive fuer die neuen Bausteine ---- */ @media (max-width: 1080px) { .stages, .stage-marker { grid-template-columns: repeat(4, 1fr); } .stations, .chapters { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .hero-kpis { gap: 8px; } .hero-kpis .n { font-size: 19px; } .hero-kpis .l { font-size: 11.5px; } .stages { grid-template-columns: 1fr; } .stage-marker { display: none; } .stages .s.is-here { position: relative; padding-right: 60px; } /* Der Hinweis stand bisher als content: "..." im CSS. Von dort lesen ihn nicht alle Screenreader zuverlaessig vor - jetzt echtes Markup. */ .here-badge { display: block; position: absolute; top: 14px; right: 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-orange-700); background: var(--color-orange-100); border: 1px solid var(--color-orange-300); border-radius: 999px; padding: 2px 8px; } .case { grid-template-columns: 1fr; gap: 24px; } .legal { grid-template-columns: 1fr; gap: 28px; } .legal-nav { position: static; } .contact-tiles { grid-template-columns: 1fr; } .stations, .chapters { grid-template-columns: 1fr; } .crossref { flex-direction: column; align-items: flex-start; } .uc { padding: 26px 22px; } .uc::before { left: 22px; } } /* ---- Nachtrag: dreispaltige Schrittfolge + Worttrennung in schmalen Kacheln ---- */ .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-kpis .l { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } @media (max-width: 860px) { .steps-3 { grid-template-columns: 1fr; } } /* ---- Nachtrag: kein waagerechter Scroll bei langen deutschen Woertern ---- 1fr schrumpft nicht unter die Breite des laengsten Wortes; minmax(0,1fr) schon. Betraf den Seitenkopf von Impressum/Datenschutz bei 390 px. ---- */ .page-hero .container { grid-template-columns: minmax(0, 1fr) auto; } h1, h2, h3, h4 { overflow-wrap: break-word; } .compare .col li, .card li, .step p { overflow-wrap: break-word; } @media (max-width: 860px) { .page-hero .container { grid-template-columns: minmax(0, 1fr); } .split, .about-grid, .hero-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Bewegung reduzieren, wenn das Betriebssystem es verlangt. Betrifft Reveal-Animationen, Sanftscrollen, FAQ-Aufklappen, Hover-Versatz. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .card:hover, .uc:hover, .btn-primary:hover { transform: none; } } /* ========================================================================== Bedienung ohne Maus ========================================================================== */ /* Sprunglink - liegt ausserhalb des Bildes und kommt beim ersten Tab herein */ .skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--color-blue-700); color: #fff; padding: 11px 20px; border-radius: 0 0 10px 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; transition: top var(--dur) var(--ease-out); } .skip-link:focus { top: 0; color: #fff; } /* Sichtbarer Fokus. Das Token --shadow-focus war seit dem Redesign definiert, wurde aber nirgends verwendet. */ :focus-visible { outline: 3px solid var(--color-orange-500); outline-offset: 2px; border-radius: 4px; } /* Auf dem orangefarbenen Button waere ein oranger Ring unsichtbar */ .btn-primary:focus-visible { outline-color: var(--color-blue-900); } /* Auf dunklem Grund braucht der Ring den helleren Ton */ .on-dark :focus-visible, .footer :focus-visible, .card-dark :focus-visible, .deck-slide.dark :focus-visible { outline-color: var(--color-orange-300); } /* Kein 300-ms-Warten auf einen moeglichen Doppeltipp */ a, button, .btn, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(29, 60, 88, 0.12); } /* Zugeklapptes FAQ-Panel: inert haelt es aus Tab-Reihenfolge und Vorlese-Reihenfolge heraus, waehrend die Hoehenanimation bleibt. */ .faq-a[inert] { pointer-events: none; }