/* ========================================================================== OfficeShare24 — Design System Hell und rund wie Airbnb, dazu die überlebensgroße Schrift und die schwarzen Kontrastbänder aus der Officex-Referenz. Farben stammen aus dem Logo, mit der Pipette gemessen: Blau #4599F9 (Bildmarke) Blau #68B1FD (Wortmarke, heller) Schwarz #000000 Die eine Zahl, die das ganze System bestimmt: **Weiß auf #4599F9 hat 2,93:1.** Ein blauer Knopf mit weißer Schrift fiele also durch jede Prüfung. Schwarz auf demselben Blau hat 6,5:1. Daraus folgt: * Primäre Handlung = schwarze Pille mit weißer Schrift (18,5:1). Das ist zugleich die Sprache der Officex-Referenz. * Blau ist Akzent: Marke, aktiver Zustand, Fokusring, Preisnadel, ausgewählter Filter. Als Fläche immer mit dunkler Schrift. * Blau als Textfarbe nur abgedunkelt: #3677C2 hat 4,59:1 auf Weiß. ========================================================================== */ /* -------------------------------------------------------------------------- 0. SCHRIFT Eine Familie für alles: Plus Jakarta Sans. Sie kann, was hier gebraucht wird — 200–800 als Variable Font, eine echte Kursive für die zweite Zeile der Heldenüberschrift, tabellarische Ziffern für die Preisspalten. Beide Tokens zeigen deshalb auf dieselbe Familie; `--font-display` bleibt als eigener Name stehen, damit sich Überschriften später wieder trennen lassen, ohne jede Regel anzufassen. Selbst gehostet, kein Aufruf an fonts.googleapis.com und keiner an fonts.gstatic.com. Zwei Gründe: Jede fremde Anfrage ist eine Anfrage mehr, die vor dem ersten Buchstaben beantwortet sein will, und eine Adresse mehr, die einem Besucher in der EU zugeordnet werden kann. Vier Dateien in assets/fonts/, zusammen 100 KB: aufrecht und kursiv, jeweils latin und latin-ext. `unicode-range` trennt die Zeichensätze — wer nur Deutsch liest, lädt die 21 KB für latin-ext gar nicht erst, und die Kursive kommt nur auf der Startseite an. Japanisch und Chinesisch stehen nicht darin und standen es nie — dort greift wie bisher die Systemschrift. Ein CJK-Schnitt wiegt Megabyte; ihn mitzuliefern hieße, allen anderen die Ladezeit dafür aufzuhalsen. Aktualisieren: siehe README, Abschnitt „Die Schrift". -------------------------------------------------------------------------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Marke — gemessen aus Logo1.JPG und Logo2.JPG */ --brand: #4599F9; /* Bildmarke. Fläche und Akzent, nie Text auf Weiß */ --brand-soft: #68B1FD; /* Wortmarke */ --brand-text: #3677C2; /* dieselbe Farbe abgedunkelt — 4,59:1 auf Weiß */ --brand-deep: #1E4E86; /* gedrückter Zustand */ --brand-100: #E4F0FE; /* Fläche für ausgewählte Zustände */ --brand-50: #F3F8FF; /* Rückwärtskompatible Namen, damit bestehende Regeln weiterlaufen */ --blue: var(--brand-text); --blue-700: var(--brand-deep); --blue-600: var(--brand); --blue-100: var(--brand-100); --blue-50: var(--brand-50); /* Kontrastband. Schwarz wie im Logo, nicht blau. */ --brand-surface: #0B0D10; /* Flächen — reinweiß, nicht cremefarben. Airbnb lebt vom weißen Grund, auf dem die Fotos die einzige Farbe sind. */ --surface: #FFFFFF; --card: #FFFFFF; --card-sunk: #F5F6F8; /* Text */ --ink: #111418; /* 18,5:1 */ --ink-2: #454C56; /* 9,2:1 — Fließtext sekundär */ --ink-3: #5B6472; /* 5,98:1 — Hilfstext */ /* Linien — Haarlinien, keine grauen Kästen */ --line: #EBEDF0; --line-2: #DDE0E5; --line-3: #98A0AC; /* Zustände */ --ok: #1F7A4D; --ok-bg: #E6F4EC; --warn: #8A5A10; --warn-bg: #FBF0DE; --danger: #C0261C; --danger-bg: #FCEAE8; /* Schrift — eine Familie, zwei Namen. `--font-display` gehört h1 und h2, `--font-sans` allem Übrigen; dass beide auf dasselbe zeigen, ändert nichts an der Trennung. Sie steht im Bauplan, damit sich Überschriften später wieder anders setzen lassen, ohne jede Regel im Haus anzufassen. */ --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --font-display: var(--font-sans); /* Typskala — die Überschriften sind bewusst größer als vorher. Officex setzt die Wortmarke über die ganze Breite; das ist der Zug, der eine Vermietungsseite von einem Formular unterscheidet. */ --t--1: clamp(0.8rem, 0.785rem + 0.07vw, 0.86rem); --t-0: clamp(0.95rem, 0.93rem + 0.1vw, 1rem); --t-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem); --t-2: clamp(1.45rem, 1.25rem + 0.9vw, 2.1rem); --t-3: clamp(1.95rem, 1.5rem + 2.1vw, 3.4rem); --t-4: clamp(2.6rem, 1.6rem + 4.6vw, 5.75rem); /* Raum — großzügiger als vorher. Abschnitte atmen. */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3.25rem; --s-6: 5rem; --s-7: 7.5rem; /* Maß & Form Airbnb rundet Bilder mit 12 px und Karten mit 16 px; Knöpfe und Eingaben sind Pillen. Die Radien sind konzentrisch gerechnet: Ein Innenkörper in einer Schale bekommt Außenradius minus Polsterung, sonst laufen die Kurven nicht parallel. */ --maxw: 1400px; --gutter: 1.25rem; --r-sm: 10px; --r: 14px; --r-card: 18px; --r-shell: 26px; /* Schale um Suchleiste, Filter, Buchungstafel */ --r-pill: 999px; /* Bewegung — eine Kurve mit Masse, keine gleichförmige Blende */ --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --dur-hover: 200ms; --dur-reveal: 700ms; --dur-panel: 380ms; /* Schatten — breit und sehr weich gestreut. Kein dunkler Rand unter der Karte, sondern der Eindruck, dass sie ein Stück über dem Blatt liegt. */ --sh-1: 0 1px 2px rgba(17, 20, 24, 0.04), 0 4px 12px -4px rgba(17, 20, 24, 0.06); --sh-2: 0 2px 6px rgba(17, 20, 24, 0.04), 0 12px 28px -10px rgba(17, 20, 24, 0.10); --sh-3: 0 4px 12px rgba(17, 20, 24, 0.05), 0 24px 60px -20px rgba(17, 20, 24, 0.16); --sh-nav: 0 1px 0 rgba(17, 20, 24, 0.07); color-scheme: light; } @media (min-width: 720px) { :root { --gutter: 2.25rem; } } /* Dunkelmodus ist eine bewusste Wahl, keine Folge der Systemeinstellung. Der Auftrag lautet „hell wie Airbnb" — wer den Rechner dunkel gestellt hat, bekäme sonst nie zu sehen, was hier entworfen wurde. Der Schalter im Kopf setzt data-theme und merkt sich die Wahl. */ :root[data-theme="dark"] { color-scheme: dark; /* Auf dunklem Grund trägt das Markenblau direkt: #4599F9 auf #0E1116 hat 6,46:1. Abdunkeln wäre hier falsch. */ --brand: #4599F9; --brand-soft: #68B1FD; --brand-text: #7CBBFF; --brand-deep: #2A6FC4; --brand-100: #12243A; --brand-50: #0F1C2C; --brand-surface: #06070A; --surface: #0E1116; --card: #171B21; --card-sunk: #12161B; --ink: #EDEFF2; --ink-2: #B5BCC6; --ink-3: #8C95A1; --line: #242A31; --line-2: #333A43; --line-3: #79828E; --ok: #5FCB92; --ok-bg: #10261B; --warn: #E0A968; --warn-bg: #2A1F10; --danger: #F0837A; --danger-bg: #2B1513; --sh-1: 0 1px 2px rgba(0,0,0,0.5); --sh-2: 0 2px 6px rgba(0,0,0,0.5), 0 12px 28px -10px rgba(0,0,0,0.6); --sh-3: 0 4px 12px rgba(0,0,0,0.5), 0 24px 60px -20px rgba(0,0,0,0.7); --sh-nav: 0 1px 0 rgba(255,255,255,0.07); } /* -------------------------------------------------------------------------- 2. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* Die Familie steht schon auf dem Wurzelelement und nicht erst auf `body`. Sonst bliebe genau ein Element im Dokument auf der Vorgabe des Browsers stehen — sichtbar wird das nie, aber eine Prüfung „läuft jede Schrift über die Tokens?" hätte immer einen Treffer. */ font-family: var(--font-sans); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-0); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } /* Mit einer Familie muss das Gewicht die Rangfolge tragen, für die sonst zwei Schriften nebeneinander stünden: h1 und h2 in 700, h3 und alles darunter in 600. Die enge Laufweite gilt für beide Ebenen — sie ist der Grund, warum große Zeilen nicht auseinanderfallen. Die Trennung der Tokens bleibt trotzdem an der Ordnungsebene und nicht an der Größe: `--font-display` steht an h1 und h2, `--font-sans` an allem Übrigen. Solange beide dasselbe bedeuten, sieht man davon nichts — beim nächsten Wechsel schon. */ h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h3, h4 { font-family: var(--font-sans); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--blue); color: #fff; } /* Zahlen laufen tabellarisch, wo sie in Spalten oder Listen stehen. Voreingestellt sind proportionale Ziffern: Die 1 ist schmaler als die 8, und untereinander gesetzte Beträge zappeln dann um ein paar Pixel. In Fließtext ist das richtig, in einer Preisspalte nicht. Betroffen sind Preise, Zählwerte (Städte, Länder, Treffer), Kennzahlen, Teamgrößen, Seitenzahlen und die Tage im Kalender — dort ist es am deutlichsten, weil dreißig Zellen ein Raster bilden. */ .num, .price, .price-unit, .spec-val, .card-meta, .anbieter-zahl-wert, .photo-tag, .hero-ort-zahl, .auswahl-eintrag-note, .auswahl-text, .nav-suche-teil, .result-count strong, .kalender-tag, .pager button, .summary-total, .map-pin { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. LAYOUT -------------------------------------------------------------------------- */ .wrap { width: min(100% - (2 * var(--gutter)), var(--maxw)); margin-inline: auto; } .wrap--narrow { width: min(100% - (2 * var(--gutter)), 860px); } .section { padding-block: var(--s-6); } .section--sunk { background: var(--card-sunk); } .section--blue { background: var(--brand-surface); color: #E7EDF6; } .section--blue h2, .section--blue h3 { color: #fff; } @media (min-width: 900px) { .section { padding-block: var(--s-7); } } /* Knapper als die übrigen Abschnitte: Das Logoband trägt eine Zeile und eine Reihe Zeichen, keine Überschrift und keine Karten. Mit den 120 px der Regel oben stand es in einem Feld, das dreimal so hoch war wie sein Inhalt. 64 px sind hier genug, unter 900 px 48. */ .section--band { padding-block: 48px; } @media (min-width: 900px) { .section--band { padding-block: 64px; } } .section-head { margin-bottom: var(--s-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } /* Mittige Fassung. Ein zugehöriger Verweis rückt darin unter die Überschrift statt an den rechten Rand — nebeneinander wäre die Überschrift nicht mehr mittig, sondern nur noch ungefähr. */ .section-head--mitte { flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); } /* Hero: Text und Bildcollage nebeneinander, sobald Platz da ist. Bewusst hier und nicht als Inline-Style — inline schlägt jede Media Query und die Spalten blieben gestapelt. */ #hero-grid { gap: var(--s-5); align-items: center; } @media (min-width: 1000px) { #hero-grid { grid-template-columns: 1.05fr 0.95fr; } } /* Auf schmalen Geräten würde die Collage die Seite füllen */ #hero-grid .photo { max-height: 46vh; } .grid { display: grid; gap: var(--s-3); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 680px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { gap: var(--s-4); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- 4. TYPOGRAFIE -------------------------------------------------------------------------- */ /* Die Überschrift ist das Bauteil, das den Ton setzt. Sehr eng gesetzt, sehr fett, sehr groß — der Zug aus der Officex-Referenz. Bei dieser Größe ist der Standardabstand zwischen den Zeilen zu luftig und die Standardlaufweite zu weit; beides wird zurückgenommen. */ .display { font-family: var(--font-display); font-size: var(--t-4); font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; text-wrap: balance; } .headline { font-family: var(--font-display); font-size: var(--t-3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; } .subhead { font-family: var(--font-sans); font-size: var(--t-2); font-weight: 600; letter-spacing: -0.02em; } .title { font-family: var(--font-display); font-size: var(--t-1); font-weight: 600; letter-spacing: -0.018em; } .lede { font-size: var(--t-1); line-height: 1.6; color: var(--ink-2); max-width: 48ch; } .body { color: var(--ink-2); max-width: 65ch; } .muted { color: var(--ink-2); } .help { font-size: var(--t--1); color: var(--ink-3); } /* Kleines Schildchen über der Überschrift. Es trägt eine Angabe, keine Verzierung — hier die Größe des Bestands. */ .eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); background: var(--card-sunk); border-radius: var(--r-pill); padding: 0.42rem 0.85rem; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } /* -------------------------------------------------------------------------- 5. NAVIGATION -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; /* Hellgrau statt weiß — die kleine Suchleiste, die beim Scrollen hier erscheint, ist weiß und hebt sich dadurch ab. Die Durchsicht bleibt: Was darunter durchläuft, soll weiter zu ahnen sein. */ background: color-mix(in srgb, var(--card-sunk) 92%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--sh-nav); } /* Die Kopfzeile steht selbst auf --card-sunk. Genau diese Fläche benutzen Verweise, Knöpfe und Schalter sonst beim Überfahren — auf ihr wäre also nichts zu sehen. Hier tönt deshalb die Tinte statt der Kartenfarbe: zehn Prozent auf grauem Grund sind ein sichtbarer, aber ruhiger Schimmer, und im Dunkelmodus dreht sich das von allein um, weil die Tinte dort hell ist. */ .nav .nav-link:hover, .nav .btn--quiet:hover, .nav .theme-toggle:hover, .nav .auswahl-knopf:hover, .nav .nav-toggle:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); } /* Wortmarke links, Werkzeuge rechts — und dazwischen, ab 1000 px, die Mitte der Seite. Ein Raster aus 1fr auto 1fr hätte nicht gereicht: `1fr` unterschreitet die Breite seines Inhalts nicht, und die Werkzeuge rechts sind breiter als die Wortmarke links. Die mittlere Spalte säße dadurch um die Differenz verschoben — gemessen 12 px. Herausgenommen aus dem Fluss und auf 50 % gesetzt, steht sie exakt. */ .nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 4.75rem; } .nav-links, .nav-suche { margin-left: 0; } @media (min-width: 1000px) { .nav-links, .nav-suche { position: absolute; left: 50%; transform: translateX(-50%); } } /* Wortmarke Die gelieferten Dateien sind JPG und haben einen weißen Grund, also keine Transparenz. Auf dem weißen Kopf fällt das nicht auf; im Dunkelmodus säße das Logo sonst in einem weißen Kasten. Deshalb steht es dort auf einer eigenen hellen Pille — die übliche Behandlung für Logos, die einen hellen Untergrund brauchen. Mit einer SVG- oder PNG-Fassung mit Transparenz fiele die Pille weg; siehe README. */ .brand { display: flex; align-items: center; flex-shrink: 0; } /* Wortmarke als SVG im Markup statt als Bilddatei. Der schwarze Teil steht auf `currentColor`, deshalb dreht die Marke im Dunkelmodus von selbst auf Hell — die weiße Pille, die eine JPG dort gebraucht hätte, ist überflüssig geworden. */ .brand-name { height: 30px; width: auto; color: var(--ink); flex-shrink: 0; overflow: visible; } /* Die Wortmarke holt ihre Schrift aus dem Token und nicht aus einem `font-family`-Attribut am , sonst stünde im Projekt eine Angabe, die an keinem der beiden Tokens hängt. Jeder Wechsel der Familie ändert die Breite des Schriftzugs, und die Bildmarke „24" steht auf einer festen Koordinate. `x` und `viewBox` sind deshalb nachgemessen; siehe README, Abschnitt „Die Schrift". */ .brand-name text { font-family: var(--font-sans); } @media (max-width: 559px) { .brand-name { height: 25px; } } /* -------------------------------------------------------------------------- Kalender -------------------------------------------------------------------------- */ .kalender { position: relative; } /* Der Knopf sieht aus wie ein Eingabefeld — dieselben Maße, derselbe Rahmen, derselbe Fokusring wie .input. Vorher war er nackter Text: kein Rahmen, kein Grund, keine Polsterung. In der Suchleiste ist das richtig, in der Verfügbarkeitskarte stand er damit zwischen zwei gerahmten Feldern und las sich wie eine Angabe, die dort einfach steht. Wer einen Zeitraum wählen wollte, sah kein Feld, in das er hätte klicken können. Umgekehrt herum wäre es falsch gewesen: Die Suchleiste nimmt den Feldlook unten wieder zurück (.hero-feld .kalender-knopf), und das ist eine Stelle gegen sonst jede. */ .kalender-knopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 48px; padding: 0.7rem 0.9rem; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); text-align: left; width: 100%; cursor: pointer; transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); } .kalender-knopf:hover { border-color: var(--line-3); } .kalender-knopf:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); } .kalender.is-offen .kalender-knopf { border-color: var(--blue); } .kalender-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kalender-symbol { flex-shrink: 0; color: var(--ink-3); } .kalender-knopf.is-leer { color: var(--ink-3); } /* In der Suchleiste zurück auf nackten Text: Dort öffnet der ganze Abschnitt, ein Rahmen um einen von dreien wäre ein Feld im Feld. */ .hero-feld .kalender-knopf { display: block; min-height: 1.5rem; padding: 0; gap: 0; border: 0; background: transparent; border-radius: 0; font-size: 0.88rem; } .hero-feld .kalender-knopf:hover { border-color: transparent; } .hero-feld .kalender-knopf:focus-visible { box-shadow: none; } /* Aufklappende Felder bringen ihre Schriftfarbe selbst mit. Sie erben sonst die des Ortes, an dem sie hängen — und das ist hier die Suchleiste auf der dunklen Bühne, deren Farbe Weiß ist. Weiße Schrift auf der weißen Kartenfläche des Feldes: unsichtbar. Wer einen eigenen Grund setzt, muss auch die Schrift dazu setzen. */ .kalender-panel { position: absolute; z-index: 220; top: calc(100% + 10px); left: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-3); padding: var(--s-2); width: 292px; } .kalender.is-oben .kalender-panel { top: auto; bottom: calc(100% + 10px); } /* Am Fenster statt am Feld. Gebraucht im Anfrage-Feld auf der Objektseite: Der rollt seinen Inhalt, und ein Bildlaufbehälter schneidet absolut gesetzte Nachkommen an seinem Rand ab. Die Stelle rechnet kalender.js (Option `festStehend`) und schreibt sie als Inline-Stil — deshalb steht hier nur die Art der Positionierung. */ .kalender-panel--fest { position: fixed; } /* Zwei Monate sind breit; am rechten Bildrand klappt das Feld nach innen */ .kalender.is-rechts .kalender-panel { left: auto; right: 0; } /* In der Suchleiste hängt das Feld an der Leiste statt am Abschnitt „Ab wann" (siehe `zentrierenAn` in assets/js/kalender.js) und steht deshalb mittig darunter — mit zehn Pixeln Abstand. */ .kalender-panel--zentriert { top: calc(100% + 10px); left: 50%; right: auto; transform: translateX(-50%); } .kalender-panel--zentriert.is-oben { top: auto; bottom: calc(100% + 10px); } /* --- Zwei Monate nebeneinander ------------------------------------------ Wie bei Airbnb: der laufende und der nächste Monat, die Pfeile bewegen beide zusammen. Unter 760 px bleibt einer übrig — zwei Gitter nebeneinander bräuchten dort mehr Platz, als der Bildschirm hat. */ .kalender-monate { display: flex; gap: var(--s-3); } .kalender-monat-block { flex: 1 1 auto; min-width: 0; } .kalender-panel--doppelt { width: auto; } .kalender-panel--doppelt .kalender-monat-block { flex: 0 0 268px; } .kalender-pfeil-platz { width: 32px; height: 32px; } /* Doppelt geschrieben, damit die Regel die allgemeine für .kalender-pfeil sticht — sonst stünde ein dritter Pfeil zwischen den beiden Monaten. */ .kalender-pfeil.kalender-pfeil--schmal { display: none; } @media (max-width: 759px) { .kalender-monat-block + .kalender-monat-block { display: none; } .kalender-pfeil.kalender-pfeil--schmal { display: grid; } } /* Drei feste Spalten statt space-between: Der Monatsname steht damit über der Mitte seines Gitters, auch wenn auf einer Seite kein Pfeil sitzt. Bei space-between hing er an der Seite, auf der der Pfeil fehlte. */ .kalender-kopf { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 0.4rem; } .kalender-monat { text-align: center; } .kalender-monat { font-weight: 600; font-size: 0.92rem; } .kalender-pfeil { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; border: 0; color: var(--ink-2); } .kalender-pfeil:hover:not(:disabled) { background: var(--card-sunk); color: var(--ink); } /* Gesperrt heißt hier: Weiter zurück gibt es nichts zu buchen. Sichtbar bleibt der Pfeil, damit die Kopfzeile ihre Form behält. */ .kalender-pfeil:disabled { opacity: 0.3; cursor: default; } .kalender-wochentage, .kalender-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .kalender-wochentage span { text-align: center; font-size: 0.68rem; color: var(--ink-3); padding-block: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; } .kalender-gitter:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); } .kalender-tag { aspect-ratio: 1; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-sm); font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; transition: background var(--dur-hover) var(--ease-out); } .kalender-tag:hover:not(:disabled) { background: var(--card-sunk); } .kalender-tag.is-heute { font-weight: 700; } .kalender-tag.is-heute::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); margin: 1px auto 0; } .kalender-tag.is-bereich { background: var(--brand-100); border-radius: 0; } .kalender-tag.is-gewaehlt { background: var(--ink); color: var(--surface); font-weight: 600; } /* Der Tastatur-Cursor braucht eine eigene Marke — sonst weiß man beim Wandern mit den Pfeiltasten nicht, wo man steht. */ .kalender-tag.is-aktiv { box-shadow: inset 0 0 0 2px var(--brand); } .kalender-tag:disabled { color: var(--line-3); cursor: default; } .kalender-leer { aspect-ratio: 1; } .kalender-fuss { margin-top: 0.4rem; display: flex; justify-content: flex-end; } /* -------------------------------------------------------------------------- Ortsvorschläge in der Suchleiste -------------------------------------------------------------------------- */ /* Eigene Schriftfarbe, siehe .kalender-panel — dieselbe Falle. */ .hero-orte { position: absolute; z-index: 210; top: calc(100% + 10px); left: 0; min-width: 220px; max-height: 260px; overflow-y: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-3); padding: 0.3rem; } .hero-ort { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.9rem; } .hero-ort.is-aktiv { background: var(--card-sunk); } .hero-ort-land { color: var(--ink-3); font-size: 0.8rem; margin-left: 0.4rem; } .hero-ort-zahl { color: var(--ink-3); font-size: 0.8rem; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Anbieter Mittig gesetzt, viel Weißraum, keine Schatten, keine Rahmen um die Logos. Die Trennlinien der Kennzahlen sind Haarlinien. -------------------------------------------------------------------------- */ /* Flacher Abschnitt: eine Zeile, darunter das Band. Deshalb 64 px statt der 96 px, die der Abschnitt mit Überschrift und Kennzahlen brauchte. */ .anbieter { text-align: center; padding-block: 64px; } /* 15 px. Der Abstand zum Band steht unten an .anbieter-band. */ .anbieter-hinweis { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); } /* --- Logos --------------------------------------------------------------- Einheitliche Höhe, Breite läuft mit. Grau und zurückgenommen, beim Überfahren in Farbe — die Leiste soll belegen, nicht werben. */ .anbieter-zelle { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; border-radius: var(--r-sm); } .anbieter-zelle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Zwei Stellschrauben je Logo, gesetzt in assets/js/index.js: --logo-h die Grundhöhe. Sie ist gemessen und stellt alle Schriftzüge auf dieselbe Versalhöhe. --logo-scale die Feinkorrektur des optischen Gewichts. Sie läuft über transform und nicht über die Höhe, damit sich beim Nachjustieren nur das Bild ändert und nicht das Raster des Bandes. 300 px Höchstbreite, weil „The Office Operators" bei 11,5:1 ein ungewöhnlich langer Schriftzug ist; bei 230 px wäre er der einzige, der an der Deckelung hängt und dadurch kleiner steht als alle anderen. */ .anbieter-logo { height: var(--logo-h, 38px); width: auto; max-width: 300px; object-fit: contain; transform: scale(var(--logo-scale, 1)); filter: grayscale(1); opacity: 0.6; transition: filter var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out); } .anbieter-zelle:hover .anbieter-logo, .anbieter-zelle:focus-visible .anbieter-logo { filter: grayscale(0); opacity: 1; } /* Im Dunkelmodus werden die Logos zu weißen Silhouetten. invert() wäre falsch: Es dreht jede Farbe auf ihre Gegenfarbe — aus dem Rot von „too" würde Türkis, aus dem Grün von Basepoint Magenta. Auf schwarzen Logos fällt das nicht auf, auf farbigen sofort. brightness(0) nimmt die Farbe ganz heraus und lässt nur die Form stehen, invert(1) macht Weiß daraus. Die Transparenz bleibt dabei erhalten, die Kanten also weich. Deshalb gibt es hier auch beim Überfahren keine Farbe zurück — sie wäre entweder falsch oder, bei den schwarzen Logos, unsichtbar. Es wird nur heller. */ :root[data-theme="dark"] .anbieter-logo { filter: brightness(0) invert(1); opacity: 0.58; } :root[data-theme="dark"] .anbieter-zelle:hover .anbieter-logo, :root[data-theme="dark"] .anbieter-zelle:focus-visible .anbieter-logo { filter: brightness(0) invert(1); opacity: 1; } /* --- Laufband ------------------------------------------------------------ Die Spur enthält den Inhalt zweimal und wandert um genau die halbe Breite. An dem Punkt steht die Kopie dort, wo das Original begann — die Schleife springt deshalb nicht. Gelaufen wird nach rechts: Die Spur startet bei -50 % und endet bei 0. Die weichen Kanten kommen über mask-image und nicht über aufgesetzte farbige Kästen: Ein Kasten müsste die Hintergrundfarbe kennen und wäre im Dunkelmodus falsch. */ .anbieter-band { margin-top: var(--s-4); /* 32 px unter der Hinweiszeile */ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .anbieter-spur { display: flex; width: max-content; animation: anbieter-lauf var(--anbieter-dauer, 42s) linear infinite; will-change: transform; } .anbieter-band:hover .anbieter-spur, .anbieter-band:focus-within .anbieter-spur { animation-play-state: paused; } /* Weiter Abstand mit Absicht: Bei wenigen Logos wiederholt sich das Band sichtbar; je mehr Luft zwischen den Zellen steht, desto weniger Wiederholungen liegen gleichzeitig im Bild. */ .anbieter-gruppe { display: flex; align-items: center; gap: var(--s-6); padding-left: var(--s-6); } @keyframes anbieter-lauf { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* --- Kennzahlen ---------------------------------------------------------- Auf der Startseite stehen keine mehr; sie ziehen in die Anbieter-Section weiter unten. `anbieter.js` gibt sie weiterhin aus, wenn sie übergeben werden — deshalb bleibt die Gestaltung hier stehen. */ .anbieter-zahlen { display: flex; justify-content: center; align-items: stretch; margin-top: var(--s-5); gap: 0; } .anbieter-zahl { display: flex; flex-direction: column; gap: 0.2rem; padding-inline: var(--s-4); min-width: 0; } .anbieter-zahl + .anbieter-zahl { border-left: 0.5px solid var(--line-2); } .anbieter-zahl-wert { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-2); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .anbieter-zahl-label { font-size: 0.82rem; color: var(--ink-3); } @media (max-width: 620px) { .anbieter-zahlen { flex-direction: column; align-items: center; gap: var(--s-3); } .anbieter-zahl + .anbieter-zahl { border-left: 0; border-top: 0.5px solid var(--line-2); padding-top: var(--s-3); } .anbieter-gruppe { gap: var(--s-3); padding-left: var(--s-3); } /* Auf kleinen Geräten etwas langsamer, sonst huscht es vorbei */ .anbieter-spur { animation-duration: calc(var(--anbieter-dauer, 42s) * 1.35); } } /* Ohne Bewegungswunsch steht das Band still und wird zum Raster. Von den Wiederholungen bleibt genau eine übrig — die mit den Alternativtexten. */ @media (prefers-reduced-motion: reduce) { .anbieter-band { -webkit-mask-image: none; mask-image: none; overflow: visible; } .anbieter-spur { animation: none; width: auto; justify-content: center; } .anbieter-gruppe { flex-wrap: wrap; justify-content: center; padding-left: 0; } .anbieter-gruppe + .anbieter-gruppe { display: none; } } /* -------------------------------------------------------------------------- So funktioniert es Drei Spalten Text: Titel und zwei Zeilen. Keine Karten, keine Rahmen, keine Ziffern, keine Zeichen — die Gliederung trägt allein der Abstand. -------------------------------------------------------------------------- */ .so-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-3); } .so-schritt { min-width: 0; } .so-titel { margin: 0; font-size: 1.125rem; } .so-text { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); max-width: 34ch; } .so-mehr { margin: var(--s-4) 0 0; text-align: center; } /* Die Staffelung ist hier bewusst langsamer als die 30 ms, die sonst gelten: Bei drei großen Spalten liest man sie sonst nicht als Folge. */ .so-schritte .reveal { transition-delay: calc(var(--i, 0) * 80ms); } @media (max-width: 899px) { .so-schritte { grid-template-columns: 1fr; gap: var(--s-4); } .so-text { max-width: none; } } /* -------------------------------------------------------------------------- Warum officeshare24 Dunkles Band über die volle Breite. Es trennt den Teil für Suchende von dem für Anbieter — und weil es dieselbe Fläche trägt wie die Heldenbühne, klammert es die Seite zugleich zusammen. Keine Karten, keine Zeichen. Zwischen den Spalten steht eine Haarlinie, und die sitzt in der Lücke statt an der Spalte: Als Rahmen am Element verschöbe sie den Text der zweiten und dritten Spalte gegenüber der ersten. -------------------------------------------------------------------------- */ .warum { background: var(--hero-deep); color: var(--hero-ink); } .warum-titel { color: var(--hero-ink); max-width: 24ch; margin: 0 auto; text-align: center; } .warum-punkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-4); } .warum-punkt { position: relative; min-width: 0; } .warum-punkt + .warum-punkt::before { content: ''; position: absolute; left: calc(var(--s-5) / -2); top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.12); } .warum-punkt-titel { margin: 0; font-size: 1.125rem; color: var(--hero-ink); } .warum-punkt-text { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } @media (max-width: 899px) { .warum-punkte { grid-template-columns: 1fr; gap: var(--s-4); } /* Gestapelt liegt die Linie oben statt links */ .warum-punkt + .warum-punkt::before { left: 0; right: 0; top: calc(var(--s-4) / -2); bottom: auto; width: auto; height: 1px; } } /* -------------------------------------------------------------------------- Flächen anbieten Letzter Abschnitt vor der Fußzeile: Überschrift, ein Satz, ein Knopf. Ohne Bewegung — direkt darüber läuft bereits das Logoband. -------------------------------------------------------------------------- */ /* Der ganze Block steht mittig — bei drei Zeilen untereinander wirkte eine mittige Überschrift über linksbündigem Satz wie ein Fehler. */ .fa { text-align: center; } .fa-titel { max-width: 18ch; margin: 0 auto; } .fa-lede { margin: var(--s-2) auto 0; max-width: 46ch; color: var(--ink-2); } .fa-btn { margin-top: var(--s-4); } @media (max-width: 899px) { .fa-titel { max-width: none; } } /* -------------------------------------------------------------------------- Kopfbereich (Hero) -------------------------------------------------------------------------- */ :root { --hero-deep: #14233A; --hero-mid: #1E3555; --hero-edge: #33587F; --hero-ink: #FFFFFF; --hero-muted: rgba(255, 255, 255, 0.62); --hero-suche-h: 92px; /* Höhe der Suchleiste; die halbe steht über */ /* Überstand des Turms. Gemessen an der Spitze, nicht an der Bilddatei: Die Spitze liegt bei 7,8 % der Bildhöhe, der sichtbare Überstand ist also kleiner als dieser Wert. Er muss unter der Kopfleiste bleiben, sonst verschwindet die Spitze hinter ihr. */ --turm-ueber: 68px; } /* Unten so viel Polsterung, dass die überstehende Suchleiste Platz hat — sonst schöbe sich der nächste Abschnitt darunter. */ .hero-aussen { padding-block: var(--s-5) calc(var(--hero-suche-h) / 2 + var(--s-5)); } .hero-buehne { position: relative; overflow: visible; /* der Turm ragt oben heraus */ border-radius: 16px; /* Zwei Lagen: der Grundverlauf und ein dunkler Kern hinter dem Turm. Der Turm ist Glas und trägt in der Tiefe Blautöne, die dem hellen Rand des Verlaufs zu nahe kämen — der Kern hält ihn frei. */ background: radial-gradient(58% 78% at 84% 46%, rgba(8, 16, 30, 0.55), transparent 72%), linear-gradient(105deg, var(--hero-deep), var(--hero-mid) 52%, var(--hero-edge)); color: var(--hero-ink); padding: 64px var(--s-4) 88px; min-height: 420px; display: flex; align-items: center; } .hero-text { max-width: 52%; } .hero-eyebrow { font-size: 0.81rem; letter-spacing: 0.06em; color: var(--hero-muted); margin-bottom: var(--s-2); } /* Die Heldenzeile ist eine h1 und wird gesetzt wie jede h1 und h2: 700 und -0,02 em. Der kursive Akzent in der zweiten Zeile kommt aus einem echten Schnitt und nicht aus einer geneigten Aufrechten — die Kursive liegt als eigene Datei bei. Das ist die einzige kursive Stelle im Projekt und deshalb auch die einzige, die diese Datei überhaupt anfordert. */ .hero-titel { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.5rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0; } .hero-titel span { display: block; } .hero-titel em { display: block; font-style: italic; } /* --- Der Turm ------------------------------------------------------------ Vom Foto bleibt nur der vordere Turm stehen: kein Himmel, kein Nachbarhaus, keine Kartenkante. Der Zuschnitt liegt als clip-path hier und nicht als zweite Bilddatei — es kommt also kein Byte dazu, und die Kante bleibt bei jeder Auflösung scharf. Die Punkte sind gemessen, nicht geschätzt: tools/turm-silhouette.ps1 liest die Silhouette aus dem Foto und gibt genau diese Zeile aus. Rechts folgt sie dem Dachgrat, links der Gebäudekante; die Befahrschienen im Himmel fallen weg. Voraussetzung ist, dass der Kasten das Seitenverhältnis des Fotos hält — sonst verrutschen die Prozentwerte gegenüber dem Bildinhalt. Deshalb aspect-ratio statt fester Höhe. pointer-events aus: Der Kasten liegt über der Bühne und soll keine Klicks abfangen. */ .hero-foto { position: absolute; right: 0; top: calc(-1 * var(--turm-ueber)); height: calc(100% + var(--turm-ueber)); width: auto; aspect-ratio: 3 / 4; object-fit: cover; pointer-events: none; clip-path: polygon( 47.34% 7.81%, 52.61% 9.26%, 53.7% 10.59%, 58.17% 13.26%, 63.96% 15.26%, 77.61% 23.27%, 78.38% 23.94%, 78.89% 25.27%, 79.5% 25.94%, 89.27% 31.94%, 91.6% 34.61%, 98.38% 40.62%, 99.2% 41.95%, 100% 41.95%, 100% 100%, 25.32% 100%, 34.31% 42.62%, 37.1% 26.61%, 37.01% 23.27%, 37.3% 22.6%, 46.33% 9.92% ); /* Unten löst sich der Turm im Verlauf auf. Ohne das säße eine gerade Schnittkante auf der Unterkante der Bühne, und an der abgerundeten Ecke stünde er über. */ -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 95%); mask-image: linear-gradient(180deg, #000 66%, transparent 95%); /* Das Glas liegt bei rund 204°, der Verlauf der Bühne bei 210–217°. Acht Grad Drehung schieben das Foto in dieselbe Blaufamilie; Sättigung und Kontrast gleichen aus, was die Drehung an Tiefe nimmt. Kein Duoton — die Spiegelungen im Glas sollen Zeichnung behalten. */ filter: hue-rotate(8deg) saturate(1.12) contrast(1.04); } /* --- Suchleiste ---------------------------------------------------------- Sitzt mittig auf der Unterkante, zur Hälfte darüber hinaus. */ .hero-suche { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 3; /* über dem Turm */ width: min(780px, calc(100% - var(--s-4) * 2)); min-height: var(--hero-suche-h); background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-pill); /* Zwei Lagen statt einer: ein enger, fast schwarzer Saum direkt unter der Kante und darunter ein weit gestreuter, sehr blasser Schein. Ein einzelner Schatten wirkt entweder hart oder schmutzig; erst die Kombination hebt die Leiste, ohne dass man den Schatten sieht. */ box-shadow: 0 2px 5px rgba(17, 20, 24, 0.055), 0 14px 34px rgba(17, 20, 24, 0.09); display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; /* stretch statt center: Die Abschnitte füllen die Leiste in voller Höhe. Mittig gesetzt wären sie nur so hoch wie ihr Text, und die getönte Fläche beim Überfahren träfe nur diesen Streifen — oben und unten blieben 15 px kalt, obwohl der Zeiger über der Leiste steht. */ align-items: stretch; padding: 0.5rem 0.5rem 0.5rem 0.35rem; } .hero-feld { position: relative; /* Der Inhalt bleibt mittig, obwohl der Abschnitt die volle Höhe hat */ display: flex; flex-direction: column; justify-content: center; padding: 0.55rem 0.9rem; border-radius: var(--r-pill); min-width: 0; transition: background var(--dur-hover) var(--ease-out); } /* --- Zustände der Leiste -------------------------------------------------- Im Ruhezustand ist die Leiste weiß und der Abschnitt unter dem Zeiger tönt sich. Sobald ein Feld offen ist, dreht sich das um: Die Leiste selbst tönt sich, und der offene Abschnitt bleibt als einziger weiß und hebt sich mit einem Schatten heraus. Das lenkt den Blick auf das Feld, in dem man gerade steht, ohne eine einzige Linie mehr zu zeichnen. */ .hero-feld:hover { background: var(--card-sunk); } .hero-suche:focus-within { background: var(--card-sunk); } .hero-suche:focus-within .hero-feld { background: transparent; } .hero-suche:focus-within .hero-feld:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .hero-suche:focus-within .hero-feld:focus-within { background: var(--card); box-shadow: var(--sh-2); } .hero-feld + .hero-feld::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 44%; background: var(--line); transition: opacity var(--dur-hover) var(--ease-out); } .hero-feld:hover + .hero-feld::before, .hero-feld:focus-within + .hero-feld::before, .hero-feld:hover::before, .hero-feld:focus-within::before { opacity: 0; } .hero-feld .label { display: block; font-size: 0.7rem; margin-bottom: 0.1rem; color: var(--ink-3); } .hero-feld .input, .hero-feld .auswahl-knopf { border: 0; background: transparent; padding: 0; font-size: 0.88rem; color: var(--ink); width: 100%; min-height: 1.5rem; } /* Ohne Wahl grau, wie „Flexibel" im Feld daneben (.kalender-knopf.is-leer). Beide Abschnitte öffnen auf denselben Klick und sollen deshalb auch gleich aussehen — schwarze Schrift läse sich als bereits getroffene Wahl. */ .hero-feld .auswahl-knopf.is-leer { color: var(--ink-3); } /* Zwei Pixel Luft links, um dieselben zwei wieder nach links versetzt: Der Text steht damit exakt wie vorher unter seiner Beschriftung, aber der Schreibstrich hat Platz. Ohne diese Luft steht er bei leerem Feld genau auf der Kante des Inhaltsbereichs, und da Eingabefelder ihren Inhalt beschneiden, war die linke Hälfte des Strichs abgeschnitten. */ .hero-feld .input { padding-left: 2px; margin-left: -2px; } /* Kein blauer Ring im aktiven Feld. Die getönte Fläche zeigt, wo man ist — das ist ruhiger und trägt in beiden Modi. Für die Tastatur bleibt ein Ring, aber in Tinte statt in Markenblau und als Innenschatten statt als outline: So folgt er der Pillenform des Abschnitts, statt ein Rechteck darum zu ziehen. 50 % Tinte ergeben gegen die Leiste 3,1:1 — sichtbar genug, um als Fokus zu gelten, und leise genug, um nicht zu schreien. */ .hero-feld .input:focus { outline: none; box-shadow: none; } .hero-feld:has(:focus-visible) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 50%, transparent); } /* --- Zurücknehmen (assets/js/hero.js) ------------------------------------- Ein Kreuz am rechten Rand des Abschnitts, nur solange dort etwas steht. Es sitzt absolut und nicht im Fluss: So steht es in allen drei Abschnitten auf derselben Höhe und an derselben Kante, gleich wie lang der Wert darunter ist. 26 px, damit es die Mindestgröße für Ziele erreicht (WCAG 2.2, 24 px), ohne im 92 px hohen Streifen zu dominieren. Der Kreis ist getönte Tinte statt einer festen Farbe — damit trägt er auf der weißen Leiste wie auf der dunklen. */ .hero-loeschen { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); cursor: pointer; transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); } .hero-loeschen[hidden] { display: none; } .hero-loeschen:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); } .hero-loeschen:active { transform: translateY(-50%) scale(0.92); } /* Platz für das Kreuz, aber nur wenn es da ist: Sonst stünde der Wert in jedem Abschnitt dauerhaft 2 rem vor der Kante und die Leiste wirkte überall zu eng. */ .hero-feld:has(.hero-loeschen:not([hidden])) .input, .hero-feld:has(.hero-loeschen:not([hidden])) .auswahl-knopf, .hero-feld:has(.hero-loeschen:not([hidden])) .kalender-knopf { padding-right: 1.9rem; } .hero-go { width: 52px; height: 52px; border-radius: 50%; /* Spaltenfluss auch im Ruhezustand: Sonst stünde die (leere) Beschriftung als zweite Zeile unter der Lupe und schöbe sie nach oben. justify-content: center ist der zweite Teil davon — ohne das verteilen zwei Spalten den freien Platz unter sich auf, die leere Beschriftung bekäme die Hälfte und schöbe die Lupe um 5 px aus der Mitte. padding: 0 setzt die Vorgabe des Browsers für Schaltflächen zurück. */ display: grid; grid-auto-flow: column; justify-content: center; align-items: center; padding: 0; overflow: hidden; flex-shrink: 0; background: var(--hero-deep); color: #fff; border: 0; cursor: pointer; /* Die Abschnitte strecken sich über die volle Höhe, der Knopf nicht — er behält seinen Kreis und sitzt mittig. */ justify-self: end; align-self: center; transition: transform var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out); } .hero-go:hover { background: var(--hero-mid); transform: scale(1.06); } .hero-go:active { transform: scale(0.97); } /* Der Knopf ist ein Kreis mit Lupe, solange niemand in der Leiste steht. Sobald ein Feld offen ist, wächst die Beschriftung heraus. Animiert wird max-width und nicht width: `width: auto` lässt sich nicht überblenden, ein Deckel schon. */ /* Aufziehen mit Überblendung, Zuklappen ohne: Der Knopf springt beim Verlassen sofort auf seine 52 px zurück, die Beschriftung bräuchte aber noch ihre Zehntelsekunde — für diese Zeitspanne stand die Schrift dann in einem Kreis, der zu klein für sie ist, und schob die Lupe aus der Mitte. Deshalb steht die Überblendung nur im aufgezogenen Zustand. */ .hero-go span { display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: 0.95rem; } .hero-suche:focus-within .hero-go { width: auto; border-radius: var(--r-pill); padding-inline: 1.15rem; } .hero-suche:focus-within .hero-go span { max-width: 12rem; opacity: 1; margin-left: 0.5rem; transition: max-width var(--dur-panel) var(--ease-out), opacity var(--dur-hover) var(--ease-out), margin var(--dur-panel) var(--ease-out); } /* --- Unter 900 px --------------------------------------------------------- Die Überlappung funktioniert hier nicht: Das Foto nähme dem Text die Breite und die aufsitzende Leiste hätte keinen Platz. Also einspaltig, Foto oben, Leiste als eigene Karte darunter. */ @media (max-width: 899px) { .hero-aussen { padding-bottom: var(--s-4); } .hero-buehne { flex-direction: column; align-items: stretch; padding: var(--s-3); min-height: 0; /* Der Turm steht oben über, bleibt aber rechtsbündig — quer läuft nichts hinaus. */ overflow: visible; } /* Nebeneinander geht hier nicht auf: Neben dem Turm blieben für die Überschrift keine 150 px, und eine Serifenzeile in 2 rem bricht dann nach jedem Wort um. Der Turm steht deshalb über dem Text, rechts angeschlagen und mit der Kartenkante bündig — den Überstand nach oben behält er. */ .hero-foto { position: static; order: -1; height: 240px; width: auto; margin: -60px calc(-1 * var(--s-3)) var(--s-2) auto; } .hero-text { max-width: 100%; } .hero-suche { position: static; transform: none; width: 100%; border-radius: var(--r-shell); grid-template-columns: 1fr; margin-top: var(--s-3); padding: 0.35rem; } .hero-feld + .hero-feld::before { left: 0.9rem; right: 0.9rem; top: 0; transform: none; width: auto; height: 1px; } .hero-feld { padding: 0.75rem 0.9rem; min-height: 44px; } .hero-go { width: 100%; border-radius: var(--r-pill); height: 48px; margin-top: 0.35rem; gap: 0.5rem; grid-auto-flow: column; } /* Auf schmalen Geräten steht die Beschriftung immer, der Knopf ist hier ohnehin eine Zeile breit */ .hero-go span { max-width: none; opacity: 1; margin-left: 0.5rem; } } /* Im Dunkelmodus braucht die weiße Leiste eine dunkle Fassung; die Bühne selbst bleibt in beiden Modi dunkel. */ :root[data-theme="dark"] .hero-suche { background: var(--card); border-color: color-mix(in srgb, #fff 12%, transparent); } :root[data-theme="dark"] .hero-go { background: var(--brand); color: #0A1220; } :root[data-theme="dark"] .hero-go:hover { background: var(--brand-soft); } /* Bildcollage im Kopfbereich. Ein hohes Bild links, zwei gestapelte rechts — als 2×2-Raster mit übergreifender linker Spalte, damit beide Seiten unten auf derselben Linie enden. Vorher war die rechte Spalte ein eigener Stapel und hing über. Das Raster steht hier und nicht als Inline-Stil im Markup: Inline-Werte schlagen jede Medienabfrage, und genau daran ist der Kopfbereich in diesem Projekt schon einmal auf schmalen Geräten hängen geblieben. */ .hero-collage { display: grid; grid-template-columns: 1.04fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; /* Seit Titel und Untertitel kürzer sind, trägt die Textspalte weniger Höhe. Eine quadratische Collage zöge den ganzen Kopfbereich auf über 600 px und schöbe die Suchleiste unter die Falz. */ aspect-ratio: 4 / 3; max-height: 430px; margin-inline-start: auto; } .hero-collage .photo { border-radius: var(--r-card); aspect-ratio: auto; height: 100%; } .hero-collage #hero-a { grid-row: 1 / span 2; } /* Umschalter hell/dunkel. Zeigt immer das Symbol dessen, was der Klick bewirken würde — sonst rätselt man, ob es den Zustand oder die Handlung meint. */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; flex-shrink: 0; transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); } .theme-toggle:hover { background: var(--card-sunk); color: var(--ink); } .theme-toggle .theme-sun { display: none; } .theme-toggle .theme-moon { display: block; } :root[data-theme="dark"] .theme-toggle .theme-sun { display: block; } :root[data-theme="dark"] .theme-toggle .theme-moon { display: none; } /* Kein margin-left: Die Verweise stehen mittig, ein Randabstand schöbe sie genau um seinen Betrag aus der Mitte. */ .nav-links { display: none; gap: 0.25rem; align-items: center; } .nav-link { font-size: 0.94rem; font-weight: 500; color: var(--ink-2); padding: 0.5rem 0.7rem; border-radius: var(--r-sm); transition: color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out); } .nav-link:hover { color: var(--ink); background: var(--card-sunk); } /* Die aktuelle Seite wird markiert, damit man sieht, wo man ist — in Tinte mit einem Strich darunter, nicht in Blau. Blau ist der Markenakzent und soll nicht zweite Bedeutung tragen. Der Strich ist die zweite, farbunabhängige Auszeichnung: Wer Farben schlecht unterscheidet, erkennt ihn trotzdem. */ .nav-link[aria-current] { color: var(--ink); font-weight: 600; background: transparent; position: relative; } .nav-link[aria-current]::after { content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--ink); } /* Beim Antippen färbt Android Verweise standardmäßig ein — hier unerwünscht, die Fläche zeigt die Berührung bereits an. */ .nav-link, .btn, .auswahl-knopf, .theme-toggle, .kalender-knopf { -webkit-tap-highlight-color: transparent; } .nav-tools { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; } /* Sprachauswahl — bei neun Sprachen ein Auswahlfeld statt Knöpfen */ /* -------------------------------------------------------------------------- Auswahlfeld mit Suche (assets/js/auswahl.js) Ersetzt das native