/** * Kopfzeile — Entwurf 18.09.2026. * * Eigene Tokens mit festen Werten, kein var() aus biz-tokens.css: Die * Tokendatei wird nur auf /business/ geladen, die Kopfzeile steht aber auf * jeder Seite. Genau daran ist die Bricks-Fassung gescheitert — dort war * „Business" ausserhalb von /business/ grau statt blau. */ /* JEDER Baustein der Kopfzeile muss hier stehen. Die Schublade und das Newsletter-Fenster liegen ausserhalb von .kopf — ohne Eintrag waeren ihre var()-Aufrufe leer und Flaechen blieben farblos. Genau so ist das Newsletter-Fenster beim ersten Versuch weiss statt dunkel geblieben. */ /* Die Farbtokens gelten fuer jeden Baustein der Kopfzeile — auch fuer die, die bewusst AUSSERHALB von .kopf stehen, weil deren Stapelkontext oder transform sie sonst einsperrt: Schublade, Newsletter-Fenster und der Schiebe-Warenkorb. Wer einen neuen Baustein dort hinstellt und ihn hier vergisst, bekommt keine Fehlermeldung, sondern unsichtbare Elemente: Eine undefinierte Variable in background faellt auf durchsichtig zurueck. Genau so war der Kassenknopf im Warenkorb weiss auf weiss (Befund Jakob, 21.09.2026) — derselbe Fehler wie beim Sticky-CTA im Business-Layer. */ .kopf, .kopf-sprung, .kopf-schublade, .kopf-nl, .kopf-korb, .kopf-korb-grund { --kopf-gold: #f3c74b; /* Dunkleres Gold fuer KLEINE Schrift auf heller Flaeche (Veranstaltungsort). Der im System gepruefte Ton, siehe inc/biz-leistungen/seite-partner.css --biz-accent-tief. Fuer die Bereichsnamen gilt er NICHT: Dort verwendet die Seite --gold-bright (#f3c74b), und das bleibt so. */ --kopf-gold-schrift: #7a6430; --kopf-dunkel: #191923; --kopf-blau: #0044ff; --kopf-grau: #6b6974; --kopf-linie: rgba(25, 25, 35, 0.08); --kopf-flaeche: #f5f5f7; --kopf-schrift: 'Outfit', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* Karten im Business-Bereich haben 10 px, nicht 14 oder 20 — Styleguide. */ --kopf-rund: 10px; } /* Der Baustein bringt sein eigenes box-sizing mit und verlaesst sich nicht auf den globalen Reset. Der kommt heute von Bricks — faellt Bricks weg, rechnete das Panel plotzlich Innenabstand und Rahmen zu seiner Breite dazu: 1040 px wuerden zu 1106 px, und es stuende ueber der Leiste. In der Vorschau, die ohne Bricks-CSS laeuft, war genau das zu sehen. */ .kopf, .kopf *, .kopf-sprung, .kopf-schublade, .kopf-schublade *, .kopf-nl, .kopf-nl * { box-sizing: border-box; } /* ── Sprungmarke ─────────────────────────────────────────────── */ .kopf-sprung { position: absolute; left: 12px; top: 12px; z-index: 300; transform: translateY(-160%); padding: 0.7em 1.2em; border-radius: 999px; background: var(--kopf-dunkel); color: #fff; font-family: var(--kopf-schrift); font-weight: 600; text-decoration: none; transition: transform 0.18s ease; } .kopf-sprung:focus-visible { transform: translateY(0); outline: 3px solid var(--kopf-blau); outline-offset: 3px; } /* Ohne diesen Abstand landet jedes Sprungziel unter der klebenden Leiste. Gemessen: 134 px am Rechner, 86 px ab dem Umbruch — plus 16 px Luft. Feste Werte und bewusst kein var(): Die Tokens der Kopfzeile stehen auf .kopf und den Geschwisterbausteinen, nie am -Element. calc() mit einer dort unbekannten Variablen ist ungueltig, und die ganze Zeile fiel ersatzlos aus — scroll-padding-top stand faktisch auf `auto`. */ html { scroll-padding-top: 150px; } @media (max-width: 991px) { html { scroll-padding-top: 102px; } } /* ── Grundgeruest ────────────────────────────────────────────── */ .kopf { position: sticky; top: 0; z-index: 200; background: #fff; font-family: var(--kopf-schrift); border-bottom: 1px solid transparent; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; will-change: transform; } .kopf[data-fort] { box-shadow: 0 5px 10px rgba(25, 25, 35, 0.05); border-bottom-color: var(--kopf-linie); } .kopf[data-weg] { transform: translateY(-100%); } /* Dasselbe Raster wie der Rest der Seite: 85 % Breite, hoechstens 1440 px. So steht es in den Bricks-Containern und ebenso in inc/biz-shared/biz-base.css (.myk-kar-inner) fuer die selbst gebauten Seiten. Ein eigener Wert hier laesst die Kopfzeile schmaler wirken als alles darunter — bei 1675 px Fenster waren es 52 px je Seite. Der Prozentwert gilt bewusst bis ganz nach unten, auch mobil. */ .kopf-leiste { width: 85%; max-width: 1440px; margin: 0 auto; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Groessen wie bisher: 125 px, mobil 70 px. */ .kopf-logo { display: inline-flex; align-items: center; text-decoration: none; } .kopf-logo img { display: block; width: 125px; height: auto; } /* Die Wortmarke ist 12,2:1 — sie wird ueber die Hoehe gesetzt, sonst waere sie bei 125 px Breite nur 10 px hoch und unlesbar. */ .kopf-logo--wortmarke img { width: auto; height: 21px; } .kopf-logo-text { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--kopf-dunkel); } /* Zwei Reihen: oben die Servicezeile, darunter die drei Bereiche. So steht es heute und so bleibt es. */ .kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; } /* ── Servicezeile ────────────────────────────────────────────── */ .kopf-neben { display: flex; align-items: center; gap: 1.1rem; } .kopf-neben a { color: var(--kopf-grau); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 0.35em 0.1em; transition: color 0.2s ease; } .kopf-neben a:hover, .kopf-neben a:focus-visible { color: var(--kopf-dunkel); } .kopf-neben a[aria-current] { color: var(--kopf-dunkel); font-weight: 600; } .kopf-warenkorb { position: relative; display: inline-flex; padding: 0.3em; } .kopf-warenkorb-zahl { position: absolute; top: -2px; right: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--kopf-gold); color: var(--kopf-dunkel); font-size: 0.7rem; font-weight: 700; } /* ── Bereichsleiste ──────────────────────────────────────────── */ /* Bezugsrahmen der Panels ist die ganze Bereichsleiste, NICHT der einzelne Bereich. Haengt ein 1040 px breites Panel an der rechten Kante von „myEvents", muss es links ueber die Leiste hinausstehen — um die Breite von Partner und myBusiness. Bei 1280 px lief es damit aus dem Bild, und links aus dem Bild ist nicht erscrollbar. Mit dem Anker hier beginnen alle drei Panels an derselben rechten Kante wie die Leiste selbst. */ .kopf-haupt { display: block; position: relative; } .kopf-bereiche { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; } .kopf-bereich { display: flex; align-items: center; gap: 0.15rem; } .kopf-bereich-link { display: inline-block; padding: 0.45em 0.15em; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--kopf-dunkel); border-bottom: 2px solid transparent; transition: border-color 0.2s ease; } .kopf-bereich-kuerzel { font-weight: 300; } .kopf-bereich--gold .kopf-bereich-link { color: var(--kopf-gold); } .kopf-bereich--dunkel .kopf-bereich-link { color: var(--kopf-dunkel); } .kopf-bereich--blau .kopf-bereich-link { color: var(--kopf-blau); } .kopf-bereich-link:hover, .kopf-bereich-link:focus-visible { border-bottom-color: currentColor; } .kopf-bereich-link[aria-current] { border-bottom-color: currentColor; } .kopf-bereich-knopf { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; border-radius: 50%; } .kopf-bereich-knopf:hover { background: var(--kopf-flaeche); } .kopf-bereich--gold .kopf-bereich-knopf { color: var(--kopf-gold); } .kopf-bereich--blau .kopf-bereich-knopf { color: var(--kopf-blau); } .kopf-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease; } [aria-expanded="true"] .kopf-chevron { transform: rotate(-135deg) translate(-3px, -3px); } /* ── Panel ───────────────────────────────────────────────────── */ .kopf-panel { position: absolute; top: calc(100% + 14px); right: 0; z-index: 10; /* 85vw ist die Breite der Leiste. Zusammen mit dem Anker an .kopf-haupt kann das Panel damit hoechstens so breit werden wie der Seiteninhalt und steht nie ueber dessen linke Kante hinaus. */ width: min(1040px, 85vw); background: #fff; border: 1px solid var(--kopf-linie); border-radius: 18px; box-shadow: 0 24px 60px rgba(25, 25, 35, 0.12); padding: 2rem; /* Ohne Begrenzung wird das Panel hoeher als der Bildschirm: einspaltig auf einem Tablet im Querformat (1180x820) rund 1017 px. Scrollen hilft dort nicht, weil die Leiste klebt und sich bei offenem Panel bewusst nicht wegblendet — die unteren rund 330 px waeren unerreichbar, auch fuer die Tastatur. Deshalb scrollt das Panel selbst. overscroll-behavior verhindert, dass die Seite dahinter mitscrollt, sobald das Panel am Ende ist. */ max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; } /* content-visibility zusaetzlich zu visibility: Sonst gilt das Panel als gerendert, loading="lazy" greift nicht und Eventbild samt Icon-Masken werden auf jeder Seite geladen, obwohl niemand das Menue oeffnet. */ html.kopf-js .kopf-bereich:not([data-offen]) > .kopf-panel { content-visibility: hidden; } .kopf-bereich[data-offen] > .kopf-panel { opacity: 1; visibility: visible; transform: translateY(0); content-visibility: visible; } .kopf-panel-innen { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 2.4rem; } .kopf-panel-titel { margin: 0 0 1.1rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--kopf-dunkel); } .kopf-panel-titel span { font-weight: 300; } .kopf-spalte-titel { margin: 0 0 1rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--kopf-grau); } /* ── Linkliste ───────────────────────────────────────────────── */ .kopf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .kopf-liste a { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.8rem; min-height: 44px; border-radius: var(--kopf-rund); text-decoration: none; color: var(--kopf-dunkel); transition: background-color 0.18s ease; } .kopf-liste a:hover, .kopf-liste a:focus-visible { background: var(--kopf-flaeche); } .kopf-liste-text { display: grid; gap: 1px; } .kopf-liste-titel { font-weight: 500; font-size: 1rem; line-height: 1.25; } .kopf-liste-unter { font-size: 0.85rem; color: var(--kopf-grau); line-height: 1.3; } /* Nicht nur die Farbe — sonst ist der aktuelle Eintrag fuer Farbenblinde nicht vom Rest zu unterscheiden (WCAG 1.4.1). Die Fettung traegt den Unterschied allein, die Farbe kommt dazu. Je Bereich eingefaerbt (21.09.2026): Vorher stand hier fest var(--kopf-blau). Blau ist die Farbe des Businessbereichs, nicht die allgemeine Aktiv-Auszeichnung — in myEvents und bei Partner war sie damit schlicht falsch. Dem Muster der Bereichsnamen oben folgend (Zeile 137–139) haengt sie jetzt am Bereich. Fuer Gold NICHT var(--kopf-gold) (#f3c74b): als kleine Schrift auf Weiss misst der Ton 1,61:1. Dafuer gibt es --kopf-gold-schrift (#7a6430, 6,29:1). Die Bereichsueberschrift bleibt hell, nur die Listeneintraege nehmen den dunklen Ton. */ .kopf-liste a[aria-current] .kopf-liste-titel { font-weight: 700; } .kopf-bereich--gold .kopf-liste a[aria-current] .kopf-liste-titel, .kopf-akk--gold .kopf-liste a[aria-current] .kopf-liste-titel { color: var(--kopf-gold-schrift); } .kopf-bereich--dunkel .kopf-liste a[aria-current] .kopf-liste-titel, .kopf-akk--dunkel .kopf-liste a[aria-current] .kopf-liste-titel { color: var(--kopf-dunkel); } .kopf-bereich--blau .kopf-liste a[aria-current] .kopf-liste-titel, .kopf-akk--blau .kopf-liste a[aria-current] .kopf-liste-titel { color: var(--kopf-blau); } /* In der Schublade traegt der aktuelle Eintrag zusaetzlich eine Flaeche — dort steht kein Untertitel daneben, der den Unterschied traegt. */ .kopf-liste--mobil a[aria-current] { background: var(--kopf-flaeche); } .kopf-liste-bereich { font-weight: 700; } .kopf-icon { flex: 0 0 auto; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--kopf-icon-url) center / contain no-repeat; mask: var(--kopf-icon-url) center / contain no-repeat; opacity: 0.75; } .kopf-icon--gross { width: 26px; height: 26px; opacity: 1; } /* Icon-Kachel 44x44, Radius 10, Icon darin 22x22 — Styleguide. */ .kopf-icon--kachel { width: 22px; height: 22px; opacity: 1; color: var(--kachel-farbe, var(--kopf-blau)); box-sizing: content-box; padding: 11px; border-radius: 10px; background-color: var(--kachel-farbe, var(--kopf-blau)); -webkit-mask: none; mask: none; position: relative; } /* Die Maske sitzt auf einem Innenelement, damit die Flaeche darunter ihre eigene Farbe behalten kann. */ .kopf-icon--kachel::before { content: ''; position: absolute; inset: 11px; background-color: #fff; -webkit-mask: var(--kopf-icon-url) center / contain no-repeat; mask: var(--kopf-icon-url) center / contain no-repeat; } /* ── Leistungskacheln ────────────────────────────────────────── */ /* Kacheln: Abheben ueber Flaeche und Icon, nie ueber eine Akzentlinie am Kasten — Styleguide. Tiefe kommt aus Farbwechsel und translateY, nicht aus einem Schatten. Die Leistung erkennt man am farbigen Icon in seiner 44x44-Flaeche, nicht an einem Balken. */ .kopf-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .kopf-kachel { display: grid; gap: 0.45rem; align-content: start; padding: 1rem; min-height: 104px; border-radius: var(--kopf-rund); text-decoration: none; background: var(--kopf-flaeche); transition: transform 0.18s ease, background-color 0.18s ease; } .kopf-kachel:hover, .kopf-kachel:focus-visible { background: color-mix(in srgb, var(--kachel-farbe, #0044ff) 10%, #fff); transform: translateY(-2px); } .kopf-kachel-name { font-weight: 600; font-size: 0.98rem; line-height: 1.2; color: var(--kopf-dunkel); } .kopf-kachel-zeile { font-size: 0.82rem; color: var(--kopf-grau); line-height: 1.35; } /* ── Partner-Kachel ──────────────────────────────────────────── */ .kopf-kachel-partner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* 2rem statt 1.1: Die Kachel ist ein eigener Block, kein vierter Listeneintrag. Mit 17 px Abstand klebte sie an der Liste. */ margin-top: 2rem; padding: 1.15rem 1.25rem; border-radius: var(--kopf-rund); background: #cbb069; color: #0a0a0a; text-decoration: none; transition: transform 0.18s ease, background-color 0.18s ease; } .kopf-kachel-partner:hover { transform: translateY(-2px); background: #d4bb78; } .kopf-kachel-oben { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.75; } .kopf-kachel-titel { display: block; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } .kopf-kachel-text { display: block; font-size: 0.85rem; opacity: 0.85; } .kopf-pfeil { font-size: 1.3rem; } /* ── Teaser Stelle / Event ───────────────────────────────────── */ /* Die beiden Hingucker tragen die rechte Spalte — sie duerfen Raum nehmen. Kein Rahmen, keine Linie, kein Schatten: Flaeche und Bild machen die Wirkung. */ /* .kopf-marktteaser teilt bewusst dieselbe Basis: Er tritt an die Stelle der Stellenkarte, wenn gerade keine Anzeige veroeffentlicht ist, und soll dort nicht wie ein Fremdkoerper wirken. */ .kopf-stelle, .kopf-event, .kopf-marktteaser { display: grid; gap: 0.45rem; padding: 1.4rem; border-radius: var(--kopf-rund); background: var(--kopf-flaeche); text-decoration: none; color: var(--kopf-dunkel); transition: background-color 0.18s ease, transform 0.18s ease; } .kopf-stelle:hover, .kopf-event:hover, .kopf-marktteaser:hover { transform: translateY(-2px); } .kopf-marktteaser:hover { background: color-mix(in srgb, var(--kopf-dunkel) 6%, #fff); } .kopf-marktteaser-titel { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; } .kopf-marktteaser-text { font-size: 0.9rem; line-height: 1.45; color: var(--kopf-grau); } .kopf-marktteaser-mehr { margin-top: 0.3rem; font-size: 0.94rem; font-weight: 600; color: var(--kopf-dunkel); } .kopf-stelle:hover { background: color-mix(in srgb, var(--stelle-farbe, #0044ff) 10%, #fff); } .kopf-event:hover { background: color-mix(in srgb, var(--kopf-gold) 18%, #fff); } .kopf-stelle-kopf { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.2rem; } .kopf-stelle-logo img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--kopf-rund); background: #fff; padding: 6px; } .kopf-event-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--kopf-rund); background: #fff; } .kopf-event-text { display: grid; gap: 0.35rem; min-width: 0; } .kopf-stelle-art, .kopf-event-ort { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stelle-farbe, var(--kopf-blau)); } /* Geprueftes Schriftgold aus dem System, kein neu gemischter Ton. */ .kopf-event-ort { color: var(--kopf-gold-schrift); } .kopf-stelle-titel, .kopf-event-titel { font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.015em; } .kopf-stelle-meta, .kopf-event-zeile { font-size: 0.9rem; color: var(--kopf-grau); line-height: 1.4; } .kopf-stelle-cta, .kopf-event-cta { margin-top: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--kopf-dunkel); } .kopf-stelle-cta .kopf-pfeil, .kopf-event-cta .kopf-pfeil { font-size: 1rem; } .kopf-mehr { display: inline-block; margin-top: 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--kopf-dunkel); text-decoration: underline; text-underline-offset: 3px; } /* ── Burger ──────────────────────────────────────────────────── */ .kopf-burger { display: none; width: 48px; height: 48px; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 12px; } .kopf-burger:hover { background: var(--kopf-flaeche); } .kopf-burger-balken, .kopf-burger-balken::before, .kopf-burger-balken::after { display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--kopf-dunkel); transition: transform 0.25s ease, opacity 0.2s ease; } .kopf-burger-balken { margin: 0 auto; position: relative; } .kopf-burger-balken::before, .kopf-burger-balken::after { content: ''; position: absolute; left: 0; } .kopf-burger-balken::before { top: -8px; } .kopf-burger-balken::after { top: 8px; } /* Das Menuezeichen bleibt bei offener Schublade ein Menuezeichen. Vorher wurde es zum Kreuz — und dieses Kreuz lag hinter der Abdunklung, also matt und grau, und war ausserdem nicht bedienbar: stilllegen() setzt `inert` auf alle Geschwister der Schublade, die Kopfzeile eingeschlossen. Ein totes zweites Kreuz neben dem echten Schliessknopf verwirrt nur. Geschlossen wird ueber den Knopf im Blatt, den Griff oder einen Tipp auf die Abdunklung. */ /* ── Schublade (mobil) ───────────────────────────────────────── */ .kopf-schublade { position: fixed; inset: 0; z-index: 250; } .kopf-schublade[hidden] { display: none; } .kopf-schublade-grund { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.45); opacity: 0; transition: opacity 0.25s ease; } .kopf-schublade[data-offen] .kopf-schublade-grund { opacity: 1; } /* z-index, weil der abdunkelnde Grund im Markup NACH dem Blatt steht und sonst darueber liegt: Das Menue waere grau verschleiert und nicht anklickbar. Genau das war der „Overlay“ in Jakobs Ruecckmeldung. */ /* Das Blatt haelt die Form und scrollt NICHT selbst — gescrollt wird .kopf-schublade-inhalt eine Ebene tiefer. Vorher war das Blatt der Scrollbehaelter UND der Bezugsrahmen des Schliessknopfs: Absolut positionierte Kinder scrollen in ihrem Scrollbehaelter mit, also wanderte der Knopf beim Scrollen nach oben aus dem weissen Blatt heraus und lag danach auf der Abdunklung. Dasselbe Muster wie im Newsletter-Fenster. */ .kopf-schublade-blatt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; /* 88vh rechnet gegen die grosse Ansichtsflaeche, also gegen den Zustand MIT eingefahrenen Safari-Leisten. Sind die Leisten ausgefahren — und genau dahin fuehrt das Hochscrollen zum Menuezeichen —, ist die sichtbare Hoehe kleiner als 100vh, und das Blatt fuellt praktisch alles. Von der Abdunklung blieben rund 3 px: Danebentippen zum Schliessen ging nicht mehr, und die Schublade wirkte wie eine eigene Seite. dvh folgt der wirklich sichtbaren Flaeche; die vh-Zeile davor bleibt als Rueckfall fuer aeltere Browser stehen. */ max-height: 85vh; max-height: min(85dvh, 720px); overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 22px 22px 0 0; /* Der Home-Indikator des iPhones liegt ueber den unteren rund 34 px. Ohne den Zuschlag sitzt „Mein Konto" genau darunter. */ padding: 0.6rem 1.4rem calc(2.4rem + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.3s ease; } .kopf-schublade[data-offen] .kopf-schublade-blatt { transform: translateY(0); } /* Eigene Zeile fuer Griff und Schliessknopf. Ihre Hoehe haelt den ersten Bereich auf Abstand — vorher lagen Kreis und Chevron rund 10 px auseinander, was auf dem Handy zu Fehlgriffen einlaedt. */ .kopf-schublade-kopf { position: relative; flex: 0 0 auto; min-height: 52px; display: grid; place-items: center; margin-bottom: 0.4rem; } /* touch-action: none, damit das Wischen nach unten die Geste bleibt und nicht vom Browser als Scrollen abgefangen wird. */ .kopf-schublade-kopf { touch-action: none; cursor: grab; } .kopf-schublade-kopf:active { cursor: grabbing; } /* Der Schliessknopf darin soll normal klickbar bleiben. */ .kopf-schublade-zu { touch-action: manipulation; cursor: pointer; } .kopf-schublade-griff { width: 44px; height: 4px; border-radius: 999px; background: #d8d8de; } .kopf-schublade-zu { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kopf-flaeche); cursor: pointer; color: var(--kopf-dunkel); display: grid; place-items: center; } /* min-height: 0 ist noetig, damit ein Flex-Kind ueberhaupt schrumpfen und damit scrollen darf. Ohne die Zeile waechst das Blatt einfach weiter. */ .kopf-schublade-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Das Kreuz wird gezeichnet, nicht gesetzt. Vorher stand dort das Zeichen „✕" (U+2715). iOS hat es in keiner der geladenen Schriften und greift auf eine Ersatzschrift zurueck — dort sitzt es zu hoch, ist zu duenn und unterschiedlich gross. Zwei gedrehte Balken sehen auf jedem Geraet gleich aus und folgen der Schriftfarbe. */ .kopf-kreuz { position: relative; width: 16px; height: 16px; display: block; } .kopf-kreuz::before, .kopf-kreuz::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: currentColor; margin-left: -8px; margin-top: -1px; } .kopf-kreuz::before { transform: rotate(45deg); } .kopf-kreuz::after { transform: rotate(-45deg); } .kopf-akk { border-bottom: 1px solid var(--kopf-linie); } .kopf-akk-kopf { margin: 0; } .kopf-akk-kopf button { width: 100%; min-height: 66px; padding: 0.9rem 0.2rem; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--kopf-dunkel); text-align: left; } .kopf-akk--gold button { color: var(--kopf-gold); } .kopf-akk--blau button { color: var(--kopf-blau); } .kopf-akk-inhalt { padding: 0.3rem 0 1.5rem; } .kopf-akk-inhalt[hidden] { display: none; } .kopf-liste--mobil a { padding: 0.95rem 0.7rem; min-height: 52px; gap: 1rem; } .kopf-liste--mobil { gap: 0.35rem; } /* Titel und Firma standen nebeneinander, weil der Behaelter ein normales inline-Element war. */ .kopf-stelle-text { display: grid; gap: 2px; min-width: 0; } /* In der Schublade traegt die Stellenkarte nur Text und Pfeil. Als Gitter landete der Pfeil in einer eigenen Zeile unter dem Text — er soll aber rechts danebenstehen wie bei der goldenen Kachel darueber. */ .kopf-akk-inhalt .kopf-stelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Die Karte folgte ohne jeden Abstand auf die goldene Kachel. */ .kopf-akk-inhalt .kopf-stellen, .kopf-akk-inhalt .kopf-marktteaser { margin-top: 0.7rem; } /* minmax(0, 1fr) statt 1fr: Sonst ist die Mindestbreite einer Spur der min-content der Kachel, und „Eventmanagement" (rund 136 px, keine Trennstelle) sprengte unter 386 px das Gitter. Weil .kopf-schublade-inhalt nur overflow-y setzt, wird overflow-x automatisch auto — die ganze Schublade liess sich seitwaerts schieben. */ .kopf-kacheln--mobil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; margin-top: 1.1rem; } .kopf-kachel-name { overflow-wrap: anywhere; hyphens: auto; } @media (max-width: 399px) { .kopf-kacheln--mobil { grid-template-columns: minmax(0, 1fr); } } .kopf-kacheln--mobil .kopf-kachel { min-height: 92px; padding: 1rem 0.9rem; } /* Die drei Eintraege waren nackte ohne eigene Hoehe — rund 22 px hoch, das kleinste Ziel der ganzen Schublade, obwohl der Warenkorb bewusst hierher gewandert ist. Der Innenabstand lag am