/* ========================================================================== Studio BUBORI – bubori.com Gestaltungssystem „Zwei Leser". Jede Seite hat zwei Leser: den Menschen und die Maschine. Der Umschalter im Kopf kippt die gesamte materielle Welt der Seite: Menschenansicht (Standard) = Papier, Ruhe, große Typografie, Bild in Farbe Agentenansicht = Terminal, Monospace, sichtbare Struktur Umgesetzt über CSS-Variablen auf . Kein Framework, keine externen Anfragen. Schriften selbst gehostet. ========================================================================== */ /* --- Schriften ----------------------------------------------------------- */ @font-face { font-family: 'JT Leonor'; src: url('../fonts/jtleonor-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'JT Leonor'; src: url('../fonts/jtleonor-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JT Leonor'; src: url('../fonts/jtleonor-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JT Leonor'; src: url('../fonts/jtleonor-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'JT Leonor'; src: url('../fonts/jtleonor-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --- Menschenansicht: Papier --------------------------------------------- */ :root { --bg: #EDE9E1; --bg-teile: 237, 233, 225; --bg-2: #F5F2EC; --panel: #E6E1D8; --ink: #131210; --ink-soft: #2C2925; /* Vorspann – näher am Fließtext, weniger Absturz */ --muted: #45413A; /* Sekundärtext */ --dim: #6B665E; /* nur für wirklich Nachrangiges */ --label: #423E38; /* Mono-Kleinschrift braucht mehr Gewicht */ --rule: #D4CEC3; --rule-lit: #B9B2A5; --accent: #0A4B46; /* tiefes Teal – der Markenton, aufs Helle übersetzt */ --signal: #C93C15; --on-accent: #EDE9E1; --display: 'JT Leonor', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --font: var(--display); --track: -.032em; --step--1: clamp(.875rem, .84rem + .16vw, .95rem); --step-0: clamp(1rem, .96rem + .2vw, 1.1rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.1rem); --step-3: clamp(1.9rem, 1.1rem + 3.4vw, 4rem); --step-4: clamp(2.4rem, 1rem + 5.4vw, 5.6rem); --gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); --section-y: clamp(5rem, 3.5rem + 8vw, 12rem); --maxw: 1560px; --gut: clamp(1.25rem, 4vw, 3.5rem); --radius: 0px; --ease: cubic-bezier(.16, 1, .3, 1); --skin: .5s var(--ease); } /* --- Agentenansicht: Terminal -------------------------------------------- */ :root[data-view="agent"] { --bg: #07080A; --bg-teile: 7, 8, 10; --bg-2: #0C0F11; --panel: #0B0E10; --ink: #E6F5F2; --ink-soft: #C6D4D1; --muted: #97A5A2; --dim: #6E7B79; --label: #A7B5B2; --rule: #1A2225; --rule-lit: #2C393C; --accent: #64FFF7; --signal: #FF4D1C; --on-accent: #07080A; --font: var(--mono); --track: 0; } /* --- Grundlagen ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); /* Grundgewicht Regular. Light (300) trägt erst ab etwa 24 px und wird deshalb nur noch dort gesetzt, wo die Schrift groß genug dafür ist. */ font-family: var(--font); font-weight: 400; font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background var(--skin), color var(--skin); } :root[data-view="agent"] body { font-size: clamp(.86rem, .82rem + .2vw, .95rem); line-height: 1.75; } img, svg, video { display: block; max-width: 100%; height: auto; } /* --- Materialität: Papierkorn / Terminal-Abtastung ------------------------ */ body::after { content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); } :root[data-view="agent"] body::after { mix-blend-mode: screen; opacity: .35; background-image: repeating-linear-gradient( to bottom, rgba(230,245,242,.022) 0 1px, transparent 1px 3px); } /* Punktraster: eine Ebene unter dem Inhalt. Zur Mitte hin ausgeblendet, damit der Lesefluss ruhig bleibt und die Raender Tiefe bekommen. */ body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(10, 75, 70, .16) 1px, transparent 1.5px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, transparent 32%, #000 92%); mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, transparent 32%, #000 92%); } :root[data-view="agent"] body::before { background-image: radial-gradient(rgba(100, 255, 247, .13) 1px, transparent 1.5px); background-size: 22px 22px; } main, header, footer { position: relative; z-index: 3; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--accent); color: var(--on-accent); } /* --- Typografie ---------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 500; line-height: 1.02; letter-spacing: var(--track); text-wrap: balance; transition: letter-spacing var(--skin); } :root[data-view="agent"] h1, :root[data-view="agent"] h2, :root[data-view="agent"] h3, :root[data-view="agent"] h4 { font-weight: 400; line-height: 1.18; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); line-height: 1.15; } h4 { font-size: var(--step-0); font-weight: 500; } :root[data-view="agent"] h1 { font-size: clamp(1.7rem, 1rem + 2.8vw, 3.1rem); } :root[data-view="agent"] h2 { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); } p { text-wrap: pretty; } /* Light ausschließlich in großen Graden */ .lead, .quote blockquote, .hero__meta dd { font-weight: 300; } strong, b { font-weight: 600; } :root[data-view="agent"] strong, :root[data-view="agent"] b { font-weight: 500; color: var(--accent); } .lead { font-size: clamp(1.1rem, 1rem + .7vw, 1.55rem); font-weight: 300; line-height: 1.52; color: var(--ink-soft); max-width: 46ch; } :root[data-view="agent"] .lead { font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); line-height: 1.7; } .muted { color: var(--muted); } .small { font-size: var(--step--1); } .eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.7rem; } /* Fließtext in Rechtstexten und Ratgeber-Artikeln */ .prose { max-width: 72ch; color: var(--ink-soft); } .prose h2 { font-size: var(--step-2); margin: 3rem 0 1rem; color: var(--ink); } .prose h3 { font-size: var(--step-1); margin: 2.25rem 0 .75rem; color: var(--ink); } .prose p, .prose li { margin-bottom: 1rem; } .prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.5rem; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose strong { color: var(--ink); } /* --- Layout -------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .section--line { border-top: 1px solid var(--rule); transition: border-color var(--skin); } .section--panel { background: var(--panel); transition: background var(--skin); } .stack > * + * { margin-top: 1.25rem; } .section-head { max-width: 46rem; margin-bottom: clamp(2.75rem, 2rem + 3vw, 5rem); } .section-head p { margin-top: 1.4rem; } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .split { display: grid; gap: var(--gap); grid-template-columns: 1fr; } @media (min-width: 960px) { .split { grid-template-columns: 1.55fr 1fr; align-items: start; } .split--40-60 { grid-template-columns: 2fr 3fr; } } /* --- Aktionen ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .95rem 1.5rem; line-height: 1.25; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .15s var(--ease); } .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn:active { transform: translateY(1px); } .btn > span:first-child { text-wrap: balance; } .btn__arrow { flex-shrink: 0; transition: transform .2s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-lit); } .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 3.2vw, 3rem); } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); transition: gap .18s var(--ease); } .link-arrow:hover { gap: .8rem; } /* ========================================================================== DER UMSCHALTER – Mensch / Agent ========================================================================== */ .switch { display: inline-flex; align-items: stretch; position: relative; overflow: hidden; border: 1px solid var(--rule-lit); transition: border-color var(--skin); } .switch button { position: relative; z-index: 1; padding: .72rem 1.05rem; white-space: nowrap; line-height: 1.25; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease); } .switch button[aria-pressed="true"] { color: var(--bg); } /* Freistehend unten rechts: entlastet die Kopfleiste und ist auf jedem Bildschirm gleich erreichbar, auch auf dem Telefon. */ .switch--fest { position: fixed; z-index: 90; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); background: var(--bg); box-shadow: 0 6px 28px rgba(0, 0, 0, .13); transition: border-color var(--skin), background var(--skin), opacity .35s var(--ease), transform .35s var(--ease), bottom .4s var(--ease); } :root[data-view="agent"] .switch--fest { box-shadow: 0 6px 28px rgba(0, 0, 0, .55); } @media (max-width: 560px) { .switch--fest button { padding: .62rem .8rem; letter-spacing: .12em; } } /* Am Fuss der Seite tritt er zurueck, damit er die Kontaktangaben und das Impressum nicht verdeckt. */ .switch--fest[data-versteckt="true"] { opacity: 0; transform: translateY(.6rem); pointer-events: none; } @media print { .switch--fest { display: none; } } /* Sprachhinweis – ein schmaler Streifen ueber der Kopfzeile, wie der Hinweis auf die Auslandsausgabe im Impressum einer Zeitschrift. Er erscheint nur, wenn die Browsersprache nicht zur Seitensprache passt, und nur mit JavaScript. Er steht im Fluss und liegt ueber nichts: Kein Knopf, kein Satz wird verdeckt. Umgeleitet wird niemand. */ .sprachhinweis { display: none; } :root[data-sprachhinweis="true"] .sprachhinweis { display: block; } .sprachhinweis { background: var(--bg-2); border-bottom: 1px solid var(--rule); transition: background var(--skin), border-color var(--skin); } .sprachhinweis__in { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.4rem; padding-block: .7rem; } .sprachhinweis__text { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); } .sprachhinweis__marke { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-right: 1rem; } .sprachhinweis__link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: .15rem; transition: border-color .22s var(--ease), color .22s var(--ease); } .sprachhinweis__link:hover { border-bottom-color: var(--accent); color: var(--accent); } .sprachhinweis__link .btn__arrow { transition: transform .25s var(--ease); } .sprachhinweis__link:hover .btn__arrow { transform: translateX(.25rem); } /* Der Schliesser steht am rechten Rand, weit weg vom Verweis daneben. */ .sprachhinweis__zu { margin-left: auto; margin-right: -10px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; color: var(--muted); transition: color .22s var(--ease); } .sprachhinweis__zu:hover { color: var(--ink); } @media (max-width: 559px) { .sprachhinweis__in { gap: .3rem 1rem; padding-block: .6rem; } .sprachhinweis__text { font-size: .86rem; } } @media print { .sprachhinweis { display: none; } } .switch__knob { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--ink); transition: transform .45s cubic-bezier(.22, 1, .36, 1), background var(--skin); } /* Der Wechselmoment: eine Leselinie tastet die Seite ab. Sie ist das Ereignis, das die These sichtbar macht – die Maschine liest die Seite. */ .view-sweep { position: fixed; top: 0; bottom: 0; left: 0; width: 2px; z-index: 999; pointer-events: none; opacity: 0; background: var(--accent); box-shadow: 0 0 24px 4px color-mix(in srgb, var(--accent) 55%, transparent); } .view-sweep.is-running { animation: sweep .62s cubic-bezier(.7, 0, .3, 1) forwards; } @keyframes sweep { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(100vw); } } @media (prefers-reduced-motion: reduce) { .view-sweep { display: none; } } :root[data-view="agent"] .switch__knob { transform: translateX(100%); background: var(--accent); } /* Terminalzeile – nur in der Agentenansicht */ .term { display: none; background: var(--bg-2); border-bottom: 1px solid var(--rule); } :root[data-view="agent"] .term { display: block; } .term__in { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; padding-block: .55rem; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); } .term__in b { color: var(--accent); font-weight: 400; } /* Maschinenschicht – Blöcke, die nur der Agentenansicht gehören */ .mr { display: none; } :root[data-view="agent"] .mr { display: block; margin-bottom: 2.25rem; } :root[data-view="agent"] .hu { display: none; } .mr__box { border: 1px solid var(--rule); background: var(--bg-2); padding: 1rem 1.1rem; margin-top: 1.25rem; overflow-x: auto; font-family: var(--mono); font-size: 11px; line-height: 1.85; color: var(--muted); } .mr__box b { color: var(--accent); font-weight: 400; } .mr__box i { color: var(--signal); font-style: normal; } .mr__k { color: var(--ink-soft); } /* Der Seitenblock: erscheint am Fuss jeder Seite, nur in der Agentenansicht. Er zeigt, was eine Maschine aus der Seite zieht, und ist damit zugleich die Demonstration der Leistung »Agentensichtbarkeit«. */ /* Autor und Prüfdatum: Vertrauenssignal für Leser und Aktualitätssignal für KI-Systeme, die kürzlich geprüfte Seiten häufiger zitieren. */ .artikel__zeile { margin-top: -1.5rem; margin-bottom: 3rem; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--label); } .artikel__autor { color: var(--ink-soft); } .mr--seite { display: none; } :root[data-view="agent"] .mr--seite { display: block; } .mr__titel { font-size: var(--step-1); margin-bottom: 2rem; } :root .mr__h, :root[data-view="agent"] .mr__h { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin: 2rem 0 .5rem; font-weight: 400; line-height: 1.6; } .mr__h:first-of-type { margin-top: 0; } .mr__antwort { font-family: var(--mono); font-size: 12px; line-height: 1.85; color: var(--ink-soft); margin: 0; } .mr__qa { margin: 0; } .mr__qa dt { color: var(--ink-soft); } .mr__qa dd { margin: 0 0 .9rem; color: var(--muted); } .mr__qa dd:last-child { margin-bottom: 0; } /* --- Kopf ---------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--rule); transition: background var(--skin), border-color var(--skin); } /* Dynamik im Hintergrund: Am Seitenanfang steht der Kopf randlos im Hero. Sobald gescrollt wird, legt sich eine durchscheinende Scheibe darueber, hinter der Inhalt und Punktraster sichtbar durchwandern. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .header { background: rgba(var(--bg-teile), 0); border-bottom-color: transparent; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease), -webkit-backdrop-filter .45s var(--ease); } html[data-gescrollt="true"] .header { background: rgba(var(--bg-teile), .82); border-bottom-color: var(--rule); -webkit-backdrop-filter: saturate(1.35) blur(14px); backdrop-filter: saturate(1.35) blur(14px); } } /* Die Leselinie an der Unterkante: sie zeigt, wie weit die Seite gelesen ist. Kein Zierrat, sondern dieselbe Idee wie der Ansichtswechsel. */ .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--gelesen, 0)); transition: transform .12s linear, background var(--skin); pointer-events: none; } .header__inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; } /* Logo und Navigation auf eine gemeinsame Schriftlinie bringen. Beide Kaesten sind mittig, aber die Wortmarke ist 18,7 px hoch und sitzt mit der Unterkante auf ihrer Grundlinie, waehrend die 11-px-Versalien der Navigation nur 8,3 px hoch in einem hohen Zeilenkasten schweben. Das Auge liest die Grundlinie, nicht den Kasten. Der Ausgleich ist die halbe Differenz der beiden Schrifthoehen. */ @media (min-width: 1060px) { .header__inner > .nav { transform: translateY(calc((18.7px - 8.3px) / 2)); } } .header__logo { display: flex; align-items: center; flex-shrink: 0; } .header__logo img { height: 18.7px; width: auto; /* 10 % groesser als die urspruenglichen 17px */ filter: invert(1); /* Logo ist weiß – auf Papier invertieren */ transition: filter var(--skin); } :root[data-view="agent"] .header__logo img { filter: none; } .nav { display: none; } @media (min-width: 1060px) { .nav { display: flex; align-items: center; gap: clamp(.9rem, 1.2vw, 1.4rem); margin-left: 1.1rem; } } .nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--label); padding-block: .4rem; position: relative; transition: color .2s var(--ease); } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: none; } .nav a[aria-current="page"] { color: var(--ink); } .header__right { margin-left: auto; display: flex; align-items: center; gap: .55rem; } /* Im Kopf gelten Kontrollmaße: Marken-Check exakt so hoch wie der Umschalter */ .header__cta.btn { padding: .72rem 1.1rem; } .lang-switch { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: .72rem .55rem; transition: color .22s var(--ease); } .lang-switch:hover { color: var(--ink); } /* Unter 720px tragen Umschalter und Knopf nicht in die Kopfzeile: sie wuerden das Menue aus dem Sichtfeld druecken. Beide leben dort im Menue. */ .header__cta { display: none; } .header__right .switch { display: none; } @media (min-width: 720px) { .header__cta { display: inline-flex; } .header__right .switch { display: inline-flex; } } /* Kein Ueberlauf, egal wie lang eine Beschriftung wird */ .header__inner { flex-wrap: wrap; } .header__right { min-width: 0; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; } @media (min-width: 1060px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .mobile-nav { display: none; border-top: 1px solid var(--rule); background: var(--bg); padding: .5rem 0 2rem; } .mobile-nav[data-open="true"] { display: block; } @media (min-width: 1060px) { .mobile-nav { display: none !important; } } .mobile-nav nav a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-size: 1.1rem; font-weight: 400; letter-spacing: var(--track); border-bottom: 1px solid var(--rule); } .mobile-nav nav a:last-of-type { border-bottom: 0; } .mobile-nav .btn { margin-top: 1.5rem; width: 100%; padding-block: 1.05rem; } .mobile-nav__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .9rem; margin-top: 1.1rem; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); } .mobile-nav__meta a { color: inherit; } .mobile-nav__meta a:hover { color: var(--accent); } .form__status { margin-top: 1.25rem; font-size: var(--step--1); line-height: 1.6; } .form__status:empty { margin: 0; } .form__status[data-art="gut"] { color: var(--accent); font-weight: 500; } .form__status[data-art="fehler"] { color: var(--ink); } .form__status[data-art="laeuft"] { color: var(--muted); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--on-accent); padding: .75rem 1.25rem; font-weight: 500; } .skip-link:focus { left: 0; } /* --- Hero ---------------------------------------------------------------- */ .hero { padding-block: clamp(3.5rem, 1.5rem + 4vw + 3vh, 8.5rem) clamp(3rem, 2rem + 2vw + 2vh, 6rem); } .hero__inner { max-width: 64rem; } /* Asymmetrie: Vorspann und Aktionen rücken gegen den Anspruch ein – die Leerzone links ist Absicht, nicht Rest. */ @media (min-width: 1100px) { .hero .lead, .hero .btn-row { margin-left: clamp(0px, 7vw, 8.5rem); } } .hero h1 { margin-bottom: clamp(1.5rem, 1.2rem + .8vw, 2rem); } /* Kennwerte als technische Datenleiste: die Zahl traegt, die Einheit begleitet, senkrechte Haarlinien trennen die Felder wie in einem Datenblatt. Jedes Feld bekommt oben einen kurzen Akzentstrich. */ .hero__meta { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin-top: clamp(2rem, 1.5rem + 1.6vw, 3.25rem); border-top: 1px solid var(--rule); } .kennwert { position: relative; padding: 1.6rem clamp(1.25rem, 2.5vw, 2.25rem) .35rem 0; } @media (min-width: 640px) { .kennwert + .kennwert { padding-left: clamp(1.25rem, 2.5vw, 2.25rem); } .kennwert + .kennwert::after { content: ''; position: absolute; left: 0; top: 1.5rem; bottom: .5rem; width: 1px; background: var(--rule); } } /* Der Akzentstrich zieht sich beim Ankommen auf */ .kennwert::before { content: ''; position: absolute; top: -1px; left: 0; width: 1.75rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .hero__meta.is-visible .kennwert::before, html:not(.js) .kennwert::before { transform: scaleX(1); } .kennwert:nth-child(2)::before { transition-delay: .09s; } .kennwert:nth-child(3)::before { transition-delay: .18s; } .kennwert:nth-child(4)::before { transition-delay: .27s; } .hero__meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-bottom: .7rem; } .hero__meta dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; letter-spacing: var(--track); } .kennwert__zahl { font-size: clamp(2rem, 1.4rem + 1.9vw, 3.1rem); font-weight: 500; letter-spacing: -.035em; line-height: .95; font-variant-numeric: tabular-nums; } .kennwert__zeichen { font-size: clamp(1.3rem, .95rem + 1.1vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; color: var(--muted); margin-left: -.28rem; } .kennwert__zusatz { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .kennwert__wort { font-size: var(--step-1); font-weight: 500; line-height: 1.2; } :root[data-view="agent"] .kennwert__zahl { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: 0; } /* --- Karten -------------------------------------------------------------- */ .card { display: flex; flex-direction: column; position: relative; padding: clamp(1.4rem, 1.15rem + .8vw, 2rem) 0 0; background: none; border: 0; border-top: 1px solid var(--rule); transition: border-color .25s var(--ease); } /* Signatur: Beim Überfahren zeichnet sich die Akzentlinie über die Kante */ .card::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } a.card:hover::before, .card--hover:hover::before { transform: scaleX(1); } a.card:hover h3, .card--hover:hover h3 { color: var(--accent); } .card h3 { transition: color .25s var(--ease); } .card h3 { margin-bottom: .85rem; } .card p { color: var(--muted); font-size: var(--step--1); line-height: 1.7; } .card__num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 1rem; } .card__foot { margin-top: auto; padding-top: 1.5rem; } .card ul { margin-top: 1.25rem; } .card ul li { position: relative; padding-left: 1.15rem; font-size: var(--step--1); color: var(--muted); margin-bottom: .55rem; } .card ul li::before { content: ''; position: absolute; left: 0; top: .68em; width: 6px; height: 1px; background: var(--accent); } /* Betrag oben, Bedingung darunter: haelt alle Karten auf gleicher Hoehe, auch wenn die englischen Zeichenketten laenger sind als die deutschen. */ .price { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; justify-content: flex-end; min-height: 4.9rem; margin: 1.1rem 0 .25rem; } /* Betrag und Zusatz brechen nie mitten im Wert um; im Englischen sind die Zeichenketten laenger als im Deutschen. */ .price__value { font-size: var(--step-2); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; } .price__value--frage { font-size: var(--step-1); color: var(--muted); } .price__note { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--label); white-space: nowrap; } .card--featured::before { transform: scaleX(1); } /* --- Kennzahlen ---------------------------------------------------------- */ .stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); } .stat { display: block; position: relative; border-top: 1px solid var(--rule); padding-top: 1.3rem; } .stat::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } a.stat:hover::before { transform: scaleX(1); } .stat__quelle { margin-top: .85rem; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); transition: color .25s var(--ease); } a.stat:hover .stat__quelle { color: var(--accent); } /* Der Rhythmus dieses Blocks: Zahlen, dann die Einordnung, dann die Stimme des Kunden. Jeder Wechsel bekommt mehr Luft als der vorige, weil die Stimme eine andere Ebene ist als der erklaerende Satz davor. */ .stats__hinweis { margin-top: clamp(2.6rem, 2rem + 1.6vw, 3.75rem); max-width: 52ch; color: var(--muted); font-size: var(--step--1); line-height: 1.7; } .stats__hinweis + .quote { margin-top: clamp(3.25rem, 2.4rem + 2.6vw, 5.25rem); } .stat__value { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; } :root[data-view="agent"] .stat__value { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: 0; } .stat__label { font-size: var(--step--1); color: var(--muted); margin-top: .65rem; line-height: 1.5; } /* --- Zitate -------------------------------------------------------------- */ .quote { border-left: 2px solid var(--accent); padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); position: relative; } /* Der Auszug: das Zitat als eigenes Satzbild, wie im Magazin ueber die Spalte gesetzt. Kein Rahmen, nur Groesse und Luft. */ .quote.quote--auszug { border-left: 0; padding-left: 0; margin-block: clamp(2.5rem, 1.8rem + 3vw, 5rem); } /* Das Satzmass gehoert an die Zeile selbst: an em gemessen, nicht am Rahmen, sonst faellt der Auszug auf Grundschriftbreite zusammen. */ .quote.quote--auszug blockquote { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 300; line-height: 1.22; letter-spacing: -.02em; max-width: 17em; } .quote.quote--auszug::before { font-size: clamp(3rem, 2rem + 3vw, 5rem); opacity: .18; } .quote.quote--auszug figcaption { margin-top: 1.4rem; } .quote::before { content: '\201E'; position: absolute; left: clamp(.9rem, .7rem + .8vw, 1.6rem); top: -.72em; font-size: 5.5rem; font-weight: 500; line-height: 1; color: var(--accent); opacity: .18; pointer-events: none; } /* Ein Zitat ist eine Stimme, kein Fliesstext. Es bekommt ein eigenes Satzmass, damit es nicht als eine ueberlange Zeile durchlaeuft. */ .quote blockquote { font-size: var(--step-1); font-weight: 300; line-height: 1.45; letter-spacing: var(--track); max-width: 34em; } .quote figcaption { margin-top: 1.15rem; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); } .quote cite { font-style: normal; color: var(--ink); } /* --- Projekte ------------------------------------------------------------ */ .project { display: block; } .project__media { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--rule); aspect-ratio: 4 / 3; } .project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .5s var(--ease); } .project:hover .project__media img { transform: scale(1.04); } :root[data-view="agent"] .project__media img { filter: grayscale(1) brightness(.5) contrast(1.1); } .project__body { padding-top: 1.1rem; } .project__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .project h3 { font-size: var(--step-1); margin: .45rem 0 .4rem; } .project p { font-size: var(--step--1); color: var(--muted); line-height: 1.6; } .project p.project__wert { margin-top: .7rem; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } /* ========================================================================== BILDSTRECKE – der Magazinteil Bilder duerfen den Satzspiegel verlassen. Der Wechsel aus randloser Platte, Doppelseite und Detail gibt der Seite den Takt eines Fotobuchs. ========================================================================== */ .platte { margin-block: clamp(1.25rem, .8rem + 1.6vw, 2.5rem); } .platte--voll { margin-block: 0 clamp(2rem, 1.4rem + 2vw, 3.5rem); } .platte--paar { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 2rem); } @media (min-width: 820px) { .platte--paar { grid-template-columns: 1fr 1fr; } } .tafel { margin: 0; } /* Die Oeffnungsplatte laeuft bis an die Fensterkante und ist bewusst flach, damit sie wie ein aufgeschlagenes Bild wirkt und nicht wie ein Banner. */ .tafel--voll .figure-frame { border-inline: 0; aspect-ratio: 21 / 9; } @media (max-width: 700px) { .tafel--voll .figure-frame { aspect-ratio: 4 / 3; } } .tafel--voll .figure-frame img { width: 100%; height: 100%; object-fit: cover; } .tafel--voll .tafel__unterschrift { padding-inline: var(--gut); max-width: var(--maxw); margin-inline: auto; } /* Die Bildunterschrift: Tafelnummer und knappe Angabe, wie im Bildband */ .tafel__unterschrift { display: flex; align-items: baseline; gap: .9rem; margin-top: .8rem; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); } .tafel__nr { color: var(--accent); font-variant-numeric: tabular-nums; } .tafel__text { color: var(--muted); text-transform: none; letter-spacing: .08em; } .figure-frame { border: 1px solid var(--rule); overflow: hidden; background: var(--bg-2); position: relative; } .figure-frame img { width: 100%; object-fit: cover; transition: filter .6s var(--ease); } :root[data-view="agent"] .figure-frame img { filter: grayscale(1) brightness(.5); } /* --- Prozess-Schritte ---------------------------------------------------- */ .steps { border-top: 1px solid var(--rule); } .step { display: grid; gap: .6rem 2.5rem; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); } @media (min-width: 880px) { .step { grid-template-columns: 4.5rem 1fr 9rem; align-items: start; } } .step__num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--signal); padding-top: .35rem; } .step h3 { margin-bottom: .5rem; } .step p { color: var(--muted); max-width: 54ch; line-height: 1.7; } .step__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--label); } @media (min-width: 880px) { .step__meta { text-align: right; } } /* --- Auftragsverarbeiter-Liste ------------------------------------------- */ .av { border-top: 1px solid var(--rule); } .av__zeile { display: grid; gap: .5rem 2.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); } @media (min-width: 880px) { .av__zeile { grid-template-columns: 1.25fr 1fr .85fr; } } .av__kopf { display: none; } @media (min-width: 880px) { .av__kopf { display: grid; padding: .9rem 0; } .av__kopf span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); } } .av__name { font-weight: 500; } .av__adresse, .av__text { color: var(--muted); font-size: var(--step--1); line-height: 1.6; } .av__adresse { margin-top: .35rem; } .av__fussnote { margin-top: 2rem; color: var(--label); font-size: var(--step--1); } /* --- Häkchenliste -------------------------------------------------------- */ .checklist li { position: relative; padding-left: 1.7rem; margin-bottom: .85rem; color: var(--ink-soft); } .checklist li::before { content: ''; position: absolute; left: 0; top: .48em; width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); } /* --- FAQ ----------------------------------------------------------------- */ .faq { border-top: 1px solid var(--rule); } .faq__item { border-bottom: 1px solid var(--rule); } .faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.55rem 0; text-align: left; font-size: var(--step-1); font-weight: 400; line-height: 1.3; letter-spacing: var(--track); transition: color .18s var(--ease); } .faq__q:hover { color: var(--accent); } .faq__icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: .35em; position: relative; } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); } .faq__icon::after { transform: rotate(90deg); } .faq__q[aria-expanded="true"] .faq__icon::after { transform: none; } .faq__a { display: none; padding-bottom: 1.6rem; } .faq__a[data-open="true"] { display: block; } .faq__a p { color: var(--muted); max-width: 68ch; line-height: 1.7; } .faq__a p + p { margin-top: .85rem; } /* --- Logo-/Namensleiste -------------------------------------------------- */ .logos { display: flex; flex-wrap: wrap; gap: .9rem 2.25rem; align-items: center; } .logos span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); } :root[data-view="agent"] .logos span { color: var(--muted); } /* Als Laufband, wenn der Generator die Spur doppelt ausgibt */ .logos--track { flex-wrap: nowrap; overflow: hidden; padding-block: .5rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logos__lauf { display: flex; gap: 2.25rem; flex-shrink: 0; padding-right: 2.25rem; animation: lauf 36s linear infinite; } .logos--track:hover .logos__lauf { animation-play-state: paused; } .logos__lauf span { white-space: nowrap; } @keyframes lauf { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .logos__lauf { animation: none; } .logos--track { mask-image: none; -webkit-mask-image: none; flex-wrap: wrap; } } /* --- Brotkrumen ---------------------------------------------------------- */ .breadcrumb { padding-top: 1.75rem; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; } .breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--rule-lit); } .breadcrumb a:hover { color: var(--accent); } /* --- Abschlussband ------------------------------------------------------- */ .cta-band { border-top: 1px solid var(--rule); background: var(--panel); transition: background var(--skin), border-color var(--skin); } .cta-band__inner { padding-block: clamp(3.5rem, 3rem + 4vw, 6.5rem); display: grid; gap: 2rem; } @media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.5fr 1fr; align-items: center; } } .cta-band h2 { font-size: clamp(1.8rem, 1.1rem + 3vw, 3.6rem); } .cta-band p { color: var(--muted); margin-top: 1rem; max-width: 48ch; } /* --- Kontaktdaten -------------------------------------------------------- */ .contact-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .contact-grid dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-bottom: .5rem; } .contact-grid dd { margin: 0; font-size: var(--step-0); line-height: 1.7; } .contact-grid a:hover { color: var(--accent); } /* --- Formular ------------------------------------------------------------ */ .form { display: grid; gap: 1.25rem; max-width: 38rem; } .field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-bottom: .5rem; } .field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; font: inherit; font-size: var(--step-0); color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule); transition: border-color .18s var(--ease), background var(--skin), color var(--skin); } .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; } /* Fehlerzustand erst nach Interaktion (:user-invalid), nie beim ersten Aufruf */ .field input:user-invalid, .field textarea:user-invalid { border-color: var(--signal); } .field__err { display: none; margin-top: .45rem; font-size: var(--step--1); color: var(--signal); } .field:has(:user-invalid) .field__err { display: block; } .field textarea { min-height: 9rem; resize: vertical; } .field--check { display: flex; align-items: flex-start; gap: .75rem; } .field--check input { width: auto; flex-shrink: 0; margin-top: .3rem; accent-color: var(--accent); } .field--check label { text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: var(--step--1); margin: 0; } .field--check label a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .form__note { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); } .honeypot { position: absolute; left: -9999px; } /* --- Fuß ----------------------------------------------------------------- */ .footer { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem) 2rem; background: var(--panel); transition: background var(--skin); } .footer__top { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .footer h2, .footer h3 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.15rem; } .footer li { margin-bottom: .6rem; } .footer a { font-size: var(--step--1); color: var(--ink-soft); transition: color .18s var(--ease); } .footer a:hover { color: var(--accent); } .footer address { font-style: normal; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.85; } .footer__social { display: flex; gap: .75rem; margin-top: 1.15rem; } .footer__social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--rule); transition: border-color .18s var(--ease); } .footer__social a:hover { border-color: var(--accent); } .footer__social img { width: 14px; height: 14px; opacity: .75; filter: invert(1); transition: filter var(--skin); } :root[data-view="agent"] .footer__social img { filter: none; } .footer__bottom { display: flex; flex-wrap: wrap; gap: .8rem 1.75rem; justify-content: space-between; margin-top: clamp(2.25rem, 2rem + 2vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); } .footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer__bottom a { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; } /* ========================================================================== STARTSEITE – Anspruch und Variantenmaschine ========================================================================== */ /* Die Auflösungszeile im Anspruch */ h1 .answer { color: var(--accent); font-weight: 300; } :root[data-view="agent"] h1 .answer { font-weight: 400; } /* Anzeigenraster: eine Idee, viele Formate */ .ads { display: grid; gap: clamp(.6rem, 1.1vw, 1rem); grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .ads { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .ads { grid-template-columns: repeat(6, 1fr); } } .ad { position: relative; overflow: hidden; display: block; background: var(--bg-2); border: 1px solid var(--rule); transition: border-color .3s var(--ease), transform .35s var(--ease); } .ad:hover { border-color: var(--rule-lit); transform: translateY(-3px); } .ad--story { grid-row: span 2; aspect-ratio: 9 / 16; } .ad--feed { aspect-ratio: 1; } .ad--port { aspect-ratio: 4 / 5; } .ad--wide { grid-column: span 2; aspect-ratio: 16 / 9; } .ad img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s var(--ease); } .ad:hover img { transform: scale(1.05); } :root[data-view="agent"] .ad img { filter: grayscale(1) brightness(.45) contrast(1.1); } .ad__ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(.55rem, .9vw, .95rem); /* Kräftig genug auch über nahezu weißen Motiven – case-weiss liegt bei einer mittleren Helligkeit von 241 von 255. */ background: linear-gradient(175deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 44%, rgba(0,0,0,.82)); } .ad__ov > *, .ad__ov span { text-shadow: 0 1px 3px rgba(0,0,0,.55); } .ad__brand { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); } .ad__claim { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(.8rem, .6rem + .55vw, 1.05rem); line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; } .ad__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; } .ad__cta { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: #131210; background: #F5F2EC; padding: .28rem .5rem; } .ad__fmt { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; color: rgba(255,255,255,.72); } .fmts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.75rem; } .fmts span { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; padding: .42rem .65rem; border: 1px solid var(--rule); color: var(--muted); } /* ========================================================================== LINKSEITE – der eine kurze Verweis fuer Biografie, Signatur und QR-Code Fuer das Telefon gebaut: grosse Flaechen, wenig Text, eine Hauptaktion. ========================================================================== */ .linkkopf { max-width: 34rem; } .linkkopf h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); margin: .9rem 0 1.1rem; } .linkkopf .lead { font-size: var(--step-0); } .linkgruppe + .linkgruppe { margin-top: clamp(2.25rem, 1.7rem + 1.8vw, 3.5rem); } .linkgruppe .eyebrow { margin-bottom: .9rem; } .linkliste { border-top: 1px solid var(--rule); } .linkreihe { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); position: relative; transition: padding-left .3s var(--ease); } .linkreihe:hover, .linkreihe:focus-visible { padding-left: .7rem; } .linkreihe::before { content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--accent); transform: translateY(-50%); transition: height .3s var(--ease); } .linkreihe:hover::before, .linkreihe:focus-visible::before { height: 62%; } .linkreihe__text { display: block; min-width: 0; } .linkreihe__titel { display: block; font-size: var(--step-0); font-weight: 500; letter-spacing: var(--track); } .linkreihe__unter { display: block; margin-top: .2rem; color: var(--muted); font-size: var(--step--1); line-height: 1.5; } .linkreihe__pfeil { color: var(--label); flex-shrink: 0; transition: color .25s var(--ease); } .linkreihe:hover .linkreihe__pfeil { color: var(--accent); } /* Die Hauptaktion traegt Flaeche statt nur einer Linie */ .linkreihe--haupt { background: var(--ink); color: var(--bg); border-bottom: 0; padding: 1.4rem clamp(1.1rem, .8rem + 1vw, 1.6rem); transition: background .25s var(--ease); } .linkreihe--haupt:hover, .linkreihe--haupt:focus-visible { padding-left: clamp(1.1rem, .8rem + 1vw, 1.6rem); background: var(--accent); color: var(--on-accent); } .linkreihe--haupt::before { display: none; } .linkreihe--haupt .linkreihe__unter, .linkreihe--haupt .linkreihe__pfeil { color: inherit; opacity: .78; } .linkreihe--haupt .linkreihe__titel { font-size: var(--step-1); } .linkgruppe:has(.linkreihe--haupt) .linkliste { border-top: 0; } .linkfuss { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); } .linkfuss a { color: inherit; } .linkfuss a:hover { color: var(--accent); } /* --- Hilfsklassen -------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .center { text-align: center; } /* --- Einblenden beim Scrollen -------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Nur verstecken, wenn JavaScript laeuft und es auch wieder zeigen kann. Die Klasse js setzt ein Inline-Skript im Kopf. Faellt das Skript aus, bleibt der Inhalt schlicht sichtbar. */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.js .reveal.is-visible { opacity: 1; transform: none; } /* GSAP-Uebergabe: Uebergaenge und Ankunfts-Animationen ruhen, GSAP fuehrt */ html.gsap-on .reveal { transition: none; } /* SplitText-Masken: Fenster um Ober- und Unterlaengen erweitern, sonst werden g, p und Umlaute bei Zeilenhoehe 1.02 beschnitten */ html.gsap-on .szeile-mask, html.gsap-on h1 > div[style*="clip"], html.gsap-on h2 > div[style*="clip"] { padding: .14em 0 .2em; margin: -.14em 0 -.2em; } html.gsap-on .hero .eyebrow, html.gsap-on .hero h1, html.gsap-on .hero .lead, html.gsap-on .hero .btn-row, html.gsap-on .hero .hero__meta { animation: none; } /* Ankunft: Der erste Bildschirm baut sich auf, statt zu erscheinen. Reihenfolge: Rubrik, Anspruch, Vorspann, Aktionen, Kennwerte. */ html.js .hero .eyebrow, html.js .hero h1, html.js .hero .lead, html.js .hero .btn-row, html.js .hero .hero__meta { opacity: 0; transform: translateY(18px); animation: ankunft .85s var(--ease) forwards; } .hero .eyebrow { animation-delay: .05s; } .hero h1 { animation-delay: .16s; } .hero .lead { animation-delay: .32s; } .hero .btn-row { animation-delay: .46s; } .hero .hero__meta { animation-delay: .58s; } @keyframes ankunft { to { opacity: 1; transform: none; } } /* Die Trennlinie der Kennwerte zieht sich von links auf */ .hero .hero__meta { position: relative; border-top-color: transparent; } .hero .hero__meta::before { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: var(--rule); transform: scaleX(0); transform-origin: left; animation: linie 1s var(--ease) .7s forwards; } @keyframes linie { to { transform: scaleX(1) } } } /* --- Druck --------------------------------------------------------------- */ @media print { :root { --bg: #fff; --ink: #000; --muted: #444; --rule: #ccc; } .header, .footer, .cta-band, .nav-toggle, .mobile-nav, .switch, .term { display: none !important; } a { color: #000; } }