/* ============================================ MOBILE — Handy-Ebene ============================================ Wird als LETZTES Stylesheet geladen, damit die Regeln hier bei gleicher Spezifitaet gewinnen. Bewusst eine eigene Datei: die Handy-Anpassungen sollen an einer Stelle nachlesbar sein statt ueber fuenf Dateien verteilt. Louis 05.08.: "auf dem laptop sieht es schoen aus aber es gibt keine version fuer handy, dort ist nicht alles so reibungslos wie es sein sollte." Reihenfolge unten: erst globale Grundlagen (Zoom, Tippflaechen, Safe Area), dann Seite fuer Seite. ============================================ */ /* ══════════════════════════════════════════ 1. EINGABEFELDER — kein Auto-Zoom mehr ══════════════════════════════════════════ iOS Safari zoomt beim Antippen automatisch in die Seite, sobald ein Eingabefeld kleiner als 16px Schrift hat. Danach bleibt die Seite vergroessert stehen und man muss von Hand wieder rauszoomen -- genau das ruckelige Gefuehl, das Louis beschrieben hat. Die Tokens der Seite liegen darunter: --fs-sm = 13,2px (.form-input, also jedes Formular: Login, Registrierung, Einstellungen, Gewerbe), --fs-base = 15,2px (Chat-Eingabe, Suchfeld auf der Startseite, Schnell-Post). Beide loesen den Zoom aus. 16px ist die Grenze, nicht der Wunschwert -- deshalb exakt 16px und nicht mehr, damit das Schriftbild sich so wenig wie moeglich aendert. */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input:not([type]), select, textarea, .form-input, .form-select, .form-textarea, .form-input--hero, .hero-stage__input, .quick-post__input, .chat-input__field { font-size: 16px; } } /* ══════════════════════════════════════════ 2. TIPPEN STATT KLICKEN ══════════════════════════════════════════ */ /* Auf Touch-Geraeten wartet der Browser bei manchen Elementen ~300ms, ob ein Doppeltipp zum Zoomen folgt. touch-action: manipulation schaltet den Doppeltipp-Zoom fuer Bedienelemente ab -- der Tipp kommt sofort an. Zusaetzlich raus: das graue Aufblitzen unter dem Finger (Android). */ /* Bedingung bewusst zweigleisig: (pointer: coarse) trifft echte Touch-Geraete unabhaengig von der Breite, (max-width) auch schmale Fenster -- und nur letzteres laesst sich hier ueberhaupt nachmessen. */ @media (pointer: coarse), (max-width: 768px) { button, a, .pill, .toggle__label, .toggle__track, .chat-item, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Mindestens 44px hohe Tippflaeche -- darunter trifft man auf einem Handy unzuverlaessig. Gemessen vorher: Pillen 30px, Tabs 28px, Kopfzeilen-Buttons 30-34px. Die Flaeche waechst ueber das Padding, die Schriftgroesse bleibt, damit das Layout ruhig bleibt. */ .pill { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; } .btn--sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .icon-action-btn, .btn--icon, .header__action-btn, .menu-toggle { min-width: 40px; min-height: 40px; } /* Umschalter Anmelden/Registrieren (auth.html) und der gleiche Aufbau auf der Gewerbeseite -- gemessen 28px bzw. 30px. Dazu "Ich suche / Ich biete" auf der Startseite (32px): der erste Knopf, den ueberhaupt jemand antippt. */ .auth-tab, .biz-auth-tab, .hero-stage__toggle-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Fusszeilen-Links standen mit 22px Hoehe dicht untereinander */ .footer__link { display: inline-block; padding: var(--space-2) 0; } } /* ══════════════════════════════════════════ 3. ECHTE FENSTERHOEHE (dvh) + SAFE AREA ══════════════════════════════════════════ 100vh ist auf dem Handy nicht die sichtbare Hoehe: der Browser rechnet die eingeklappte Adressleiste mit. Alles, was auf 100vh ausgelegt ist, ragt dadurch unten aus dem Bild -- beim Chat faellt die Eingabezeile heraus, man muss erst scrollen, um schreiben zu koennen. 100dvh ist die tatsaechlich sichtbare Hoehe und waechst/schrumpft mit der Adressleiste. @supports, damit alte Browser bei 100vh bleiben. */ @supports (height: 100dvh) { body { min-height: 100dvh; } .main { min-height: 100dvh; } .auth-page { min-height: 100svh; } .chat-layout { height: calc(100dvh - var(--header-height)); } } /* Randlose Handys (Notch, Home-Indicator): Inhalt aus den Systembereichen heraushalten. Ohne das liegt die Chat-Eingabe unter dem Balken. */ @media (max-width: 768px) { .footer { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); } } /* ══════════════════════════════════════════ 4. CHAT ══════════════════════════════════════════ */ @media (max-width: 768px) { /* Der Chat ist auf dem Handy die ganze Seite, keine Karte darin. Vorher: 16px Aussenabstand + abgerundete Ecken + Rahmen, dazu eine Hoehe von 100vh minus Kopfzeile -- zusammen ergab das 16px mehr als der Bildschirm hoch ist, die Seite wackelte beim Scrollen. */ .chat-layout { margin: 0; border-radius: 0; border-left: none; border-right: none; border-bottom: none; height: calc(100vh - var(--header-height)); } .chat-list { background: transparent; } /* Liste und Fenster fuellen die Breite; das Umschalten zwischen beiden erledigt .chat-layout--chat-open (schon in pages.css). */ .chat-list__items { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .chat-window__messages { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--space-4); } /* Blasen duerfen auf 390px breiter werden -- bei 70% blieb rechts und links so viel Luft, dass laengere Nachrichten unnoetig oft umbrachen. */ .message { max-width: 88%; } /* Eingabezeile: enger am Rand und ueber dem Home-Indicator */ .chat-input { padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); gap: var(--space-2); } .chat-input__send { width: 44px; height: 44px; } .chat-window__header { padding: var(--space-3) var(--space-4); gap: var(--space-3); } /* Das Thema ("Gesuch: ...") darf die Kopfzeile nicht aufblaehen */ .chat-window__info { min-width: 0; overflow: hidden; } .chat-window__name, .chat-window__topic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Loeschen sass direkt neben der Uhrzeit und war 24px klein */ .chat-item { padding: var(--space-4); gap: var(--space-3); } .chat-item .delete-chat-btn { min-width: 40px; min-height: 40px; } } /* ══════════════════════════════════════════ 5. DIALOGE ALS BLATT VON UNTEN ══════════════════════════════════════════ Ein mittig schwebendes Fenster mit 90% Breite ist eine Desktop-Form. Auf dem Handy erwartet man ein Blatt, das von unten hochkommt: mit dem Daumen erreichbar, volle Breite, und beim Scrollen im Inhalt bleibt der Rest der Seite stehen. */ @media (max-width: 768px) { /* Mittig, nicht am unteren Rand. Ich hatte das als Blatt von unten gebaut -- bei kurzem Inhalt klebte der Dialog dann unten und liess oben eine grosse Luecke, was aussieht, als waere alles nach unten verrutscht (Louis 06.08.: "ist bisschen alles nach unten verschoben ... nicht zentral, wie es sein sollte"). Breit bleibt es, nur mit etwas Luft zum Rand, damit es nicht an den Bildschirmkanten klebt. */ .modal-overlay { align-items: center; padding: var(--space-4); } .modal { width: 100%; max-width: none; max-height: 86vh; border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-5); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } @supports (height: 100dvh) { @media (max-width: 768px) { .modal { max-height: 86dvh; } } } /* ══════════════════════════════════════════ 6. DASHBOARD ══════════════════════════════════════════ */ @media (max-width: 768px) { /* Schnell-Post im Dashboard: Saubere Karte mit Toggle oben, voller Eingabebreite und vollem Button unten */ .quick-post { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-sizing: border-box; width: 100%; margin-bottom: 20px; } .quick-post__header { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; } .quick-post__toggle { width: auto; height: auto; } .quick-post__toggle .toggle__track { width: auto; height: auto !important; } .quick-post__body { display: flex; flex-direction: column; gap: 10px; width: 100%; } .quick-post__input { width: 100%; min-width: 0; min-height: 54px; padding: 12px 14px; font-size: 15px; line-height: 1.45; box-sizing: border-box; border-radius: var(--radius-lg); } .quick-post .btn, .quick-post__submit { width: 100% !important; height: 44px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: var(--radius-lg) !important; } #dashboard-tabs .pill, #posts-filter .pill { min-height: 44px; padding: 12px 14px 10px !important; } .post-zeile__werkzeug { flex: 0 0 auto; } /* Filterpillen: eine seitlich scrollende Reihe statt vier Zeilen Umbruch. Gleiche Loesung wie beim Marktblick (.markt-domains). */ .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); } .pills::-webkit-scrollbar { display: none; } .pills .pill { flex-shrink: 0; } /* Kartenfuss: Knoepfe standen weit auseinander verteilt und waren flach. Gleichmaessig verteilt mit voller Trefferflaeche. */ .post-card__footer { flex-wrap: wrap; gap: var(--space-2); } .post-card__footer .btn { flex: 1 1 auto; } .match-card__kopf { flex-wrap: wrap; row-gap: var(--space-2); } .match-card__werkzeuge { flex: 1 0 100%; margin-left: 0; margin-top: 2px; gap: var(--space-2); } .match-card__werkzeug { flex: 1; justify-content: center; min-height: 40px; } .match-card__werkzeug--icon { flex: 0 0 auto; min-width: 40px; } .match-card__quelle { flex-wrap: wrap; row-gap: 2px; } .match-card__actions { flex-wrap: wrap; gap: var(--space-2); } .match-card__actions .btn { flex: 1 1 auto; } .match-card__feedback-trigger { flex: 1 0 100%; margin-left: 0; justify-content: center; min-height: 40px; } /* Die Tafel hat die Ecken-Knoepfe abgeschafft. mobile.css setzte trotzdem 88px Rand frei -- auf 390px fast ein Viertel leer. */ .match-card { padding-right: 0; } } /* ══════════════════════════════════════════ 7. STARTSEITE — beides auf einen Blick ══════════════════════════════════════════ Louis 05.08.: "ich faende es gut, wenn man beides beim Handy auf den ersten Blick sieht und nicht durchs Scrollen ... damit die Nutzer direkt sehen, wo was ist." Vorher belegte der Hero 66vh; darunter blieb nur Platz fuer die Ueberschrift des Marktes. Man musste scrollen, um ueberhaupt zu merken, dass es dort echte Gesuche gibt. Rechnung fuer ein 390x844-Handy: Kopfzeile 72 Hero ~46vh = 390 (Inhalt zusammengerueckt, s.u.) ------------------------- 462, es bleiben 382 Ueberschrift 34 Hinweis 34 Filterpillen 52 eine Karte ~130 ------------------------- 250, mit Luft nach unten Die Karten laufen seitlich statt untereinander: eine ganze Karte plus der Anschnitt der naechsten passt in eine Zeile und zeigt ohne Worte, dass da mehr ist. */ @media (max-width: 899px) { /* Das Foto liegt genau hinter dem Hero und keinen Pixel tiefer. Vorher eine feste Hoehe (72vh) neben einem Hero mit min-height -- sobald der Inhalt anders hoch war, passte beides nicht zusammen. Als Raster teilen sich Foto und Hero dieselbe Zeile und sind damit zwangslaeufig gleich hoch. */ /* minmax(0, 1fr) statt 1fr: eine 1fr-Spalte hat als automatische Untergrenze den Mindestinhalt ihrer Kinder. Seit die Kategoriezeile elf Eintraege hat, riss die die Spalte auf 1080px auf -- der Inhalt lief rechts aus dem Bild, es sah aus wie hineingezoomt. minmax(0, 1fr) deckelt die Untergrenze bei 0, dann bestimmt der Bildschirm die Breite und die Reihe scrollt in sich selbst. */ .landing-split { display: grid; grid-template-columns: minmax(0, 1fr); } #markt-domains-oben { grid-row: 1; grid-column: 1; position: sticky; top: var(--header-height); z-index: 80; background: var(--surface-1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: var(--space-2) var(--space-4); border-bottom: var(--border-subtle); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #markt-domains-oben::-webkit-scrollbar { display: none; } #markt-domains-oben .markt-domains { display: flex; flex-wrap: nowrap; gap: var(--space-2); margin-bottom: 0; } #markt-domains-oben .pill { flex-shrink: 0; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--border-medium); color: var(--text-primary); } #markt-domains-oben .pill--active { background: var(--primary) !important; border-color: var(--secondary) !important; color: #ffffff !important; box-shadow: 0 0 12px var(--secondary-glow) !important; } :root[data-theme="dark"] #markt-domains-oben .pill--active { background: #ffffff !important; border-color: var(--secondary) !important; color: #0f172a !important; } .landing-split > .hero-stage__bg { grid-row: 2; grid-column: 1; position: relative; inset: auto; height: auto; } .landing-split > .hero-stage { grid-row: 2; grid-column: 1; } .landing-split > #markt-public { grid-row: 3; grid-column: 1; } /* Der Hero behaelt seine volle Hoehe. Ich hatte ihn schrittweise auf 46 und dann 36vh gestaucht, damit Marktbereich und untere Leiste mit auf einen Bildschirm passen. Der Bildausschnitt blieb dabei gleich breit, nur flacher -- und genau so entsteht der Eindruck, jemand haette ins Bild gezoomt (Louis 06.08.: "Das Foto war vorher perfekt ... mach das wieder richtig, wie vorher"). Zurueck auf die urspruenglichen 66vh. Untertitel und Abstaende bleiben wie am Laptop. Der Marktbereich beginnt dafuer wieder unter der Bildkante -- man scrollt einmal, und die Startseite sieht wieder nach Seite aus statt nach Streifen. */ /* =================================================================== HINWEIS FÜR ENTWICKLER / MOBILE LAYOUT SPECIFICATION =================================================================== Ziel / Design-Vorgabe des Nutzers: Die mobile Startseite besteht aus 3 klar getrennten Bildschirm-Bereichen: 1. ABSCHNITT 1 (.hero-stage--photo): Hero & Suche (Aktionsfeld). Soll beim ersten Laden 100% des mobilen Viewports (unter dem Header und der fixierten Kategorieleiste) ausfüllen. Es soll KEIN Stück von Abschnitt 2 unten hervorgucken. Beachten: Auf iOS PWA Standalone Mode (Home-Bildschirm App) ist die untere Leiste (.tabbar) fest eingeblendet (~52px + safe-area). 2. ABSCHNITT 2 (#markt-public): Market Preview (Ergebnisse). Wird durch eine Champagner-Gold Trennlinie oben abgegrenzt (border-top: 2px solid hsla(42, 45%, 58%, 0.35)). WICHTIG: Wenn der Nutzer im 1. Abschnitt auf eine Kategorie (z.B. Handwerk) klickt, scrollt die Seite per Smooth Scroll zu #markt-public. Der Zielpunkt MUSS so ausgerichtet sein, dass die obere Champagner-Gold Trennlinie von Abschnitt 2 genau BÜNDIG direkt unter der fixierten Kategorieleiste (#markt-domains-oben) anhält. Aktueller Scroll-Margin: scroll-margin-top: calc(var(--header-height) + 64px); 3. ABSCHNITT 3 (#how-it-works): Plattform-Erklärung & Stats. Ebenfalls durch eine Champagner-Gold Trennlinie oben getrennt. Clean gehalten ohne verschachtelte abgerundete Karten. Falls Feinjustierungen für spezifische iPhone/Android-Displaygrößen oder Safari-Browserleisten nötig sind, bitte die folgenden Werte prüfen: - Header-Höhe: var(--header-height) = 72px - Kategorieleisten-Höhe: #markt-domains-oben = ~44px - Untere Leiste: .tabbar = ~52px + env(safe-area-inset-bottom) =================================================================== */ .landing-split { display: grid; grid-template-columns: minmax(0, 1fr); scroll-snap-type: y mandatory; } /* ABSCHNITT 1: HERO & SUCHE -- Passt exakt auf 1 Bildschirm inkl. Standalone PWA Home-Bildschirm & Tabbar */ .hero-stage--photo { /* min-height statt height. Vorher eine FESTE Hoehe zusammen mit overflow:hidden -- die Buehne konnte also nicht wachsen und hat abgeschnitten, was nicht passte. Bei vergroesserter Systemschrift gemessen: 4px bei 130%, 112px bei 160%. Der Zweck war "fuellt den Schirm"; das leistet min-height genauso, laesst aber Luft, wenn der Inhalt mehr braucht. */ min-height: max(280px, calc(100dvh - var(--header-height) - 52px - env(safe-area-inset-bottom, 0px) - 148px)); padding: 0 var(--space-4); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; overflow: hidden; } .hero-stage__title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: var(--space-2); } .hero-stage__subtitle { font-size: var(--fs-xs); margin-bottom: var(--space-3); } .hero-stage__toggle { margin-bottom: var(--space-3); } .hero-stage__meta { margin-top: var(--space-2); margin-bottom: var(--space-1); } /* ABSCHNITT 2: MARKET PREVIEW -- Punktgenau bis zur Champagner-Trennlinie unter der Kategorieleiste */ #markt-public { min-height: calc(100dvh - var(--header-height) - 48px); padding-top: var(--space-5); padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); border-top: 2px solid hsla(42, 45%, 58%, 0.35); scroll-margin-top: calc(var(--header-height) + 48px); scroll-snap-align: start; box-sizing: border-box; } :root[data-theme="dark"] #markt-public { border-top: 2px solid hsla(42, 45%, 58%, 0.35); } #markt-public .container { padding: var(--space-2) 0; } /* Der Container steht hier bewusst ohne seitlichen Abstand -- die frueheren Karten brachten ihre eigene Polsterung mit. Die dichten Zeilen tun das nicht: ohne diese Regel klebt der Text am Bildschirmrand und die Zeitangabe rechts wird abgeschnitten (Louis 13.08., Screenshot). */ /* Die zwei Spalten sind einer Liste gewichen -- der Seitenrand gehoert jetzt an Filter, Liste und Blaetterleiste. */ #markt-public .markt-filter, #markt-public .markt-liste, #markt-public .markt-blatt, #markt-public .markt-zahlen { padding-left: var(--space-4); padding-right: var(--space-4); } #markt-public .markt-schild { height: auto; transform: none; margin-bottom: var(--space-2); } #markt-public h2 { margin-bottom: var(--space-1); } #markt-public #markt-public-hint { margin-bottom: var(--space-4); } /* Marktkarten im 2. Bereich */ #markt-public .market-card { padding: var(--space-4); border: 1px solid hsla(0, 0%, 100%, 0.12); border-radius: var(--radius-xl); } :root[data-theme="dark"] #markt-public .market-card { background: hsla(0, 0%, 12%, 0.85); border: 1.5px solid hsla(42, 45%, 58%, 0.2); } #markt-public-more-wrap { margin-top: var(--space-3); } #markt-public-cta { margin-top: var(--space-3) !important; } #markt-public-list { display: flex; flex-direction: column; gap: var(--space-3); max-height: none; overflow: visible; padding-bottom: var(--space-2); } /* ── ABSCHNITT 3: SO EINFACH GEHT'S (Punktgenau bis zur Champagner-Trennlinie unter der Kategorieleiste) ── */ #how-it-works { min-height: calc(100dvh - var(--header-height) - 44px); padding-top: var(--space-6); padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px)); border-top: 2px solid hsla(42, 45%, 58%, 0.35); scroll-margin-top: calc(var(--header-height) + 64px); scroll-snap-align: start; box-sizing: border-box; } :root[data-theme="dark"] #how-it-works { border-top: 2px solid hsla(42, 45%, 58%, 0.35); } /* Keine verschachtelten abgerundeten Karten im 3. Bereich */ #how-it-works .tl-step { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: var(--space-3) 0; } #how-it-works .stats-bar { background: transparent; border: none; border-radius: 0; box-shadow: none; } #markt-public-list::-webkit-scrollbar { display: none; } #markt-public-list > .market-card { scroll-snap-align: start; /* Der Abstand gehoert an die Karte, nicht als gap an die Liste: bei overflow-y zaehlt gap sonst in die Scrollhoehe der letzten Karte hinein und erzeugt einen leeren Streifen am Ende. */ margin-bottom: var(--space-3); } #markt-public-list > .market-card:last-child { margin-bottom: 0; } /* Die Leer-Karte ist kein Eintrag zum Durchblaettern -- sie braucht kein Scrollfeld, sonst steht sie in einem halbleeren Kasten. */ #markt-public-list:has(> .market-card--leer), #markt-public-list:has(> .market-card--bereiche) { max-height: none; overflow: visible; } /* Abgegrenzter Glas-Container fuer 'So einfach geht's' auf dem Handy */ #how-it-works .container { background: var(--surface-1); border: 1px solid hsla(0, 0%, 100%, 0.12); border-radius: var(--radius-2xl); padding: var(--space-6) var(--space-4); box-shadow: 0 12px 32px hsla(0, 0%, 0%, 0.35); margin-top: var(--space-4); } :root[data-theme="dark"] #how-it-works .container { background: hsla(0, 0%, 12%, 0.85); border: 1.5px solid hsla(42, 45%, 58%, 0.22); } } /* Der frueher hier stehende Ausbruch ueber die Containerraender gehoerte zum seitlichen Scroller: er liess die Karten bis an den Bildschirmrand laufen, damit der Anschnitt rechts sichtbar war. Beim senkrechten Scrollen wuerde er die Karten nur schief aus der Spalte schieben. */ @media (max-width: 640px) { .hero-stage__title { font-size: clamp(2rem, 10vw, 2.9rem); } /* Abschnittsabstaende: --space-20 (5rem) oben und unten frisst auf einem Handy eine halbe Bildschirmhoehe pro Abschnitt. */ .section { padding: var(--space-12) 0; } } /* Kurze Bildschirme (iPhone SE und aeltere Androids, ~667px hoch). Dort ist der Hero sogar HOEHER als auf einem grossen Handy, weil der Untertitel bei 360px Breite auf drei Zeilen umbricht -- gemessen 453px gegenueber 428px bei 390px Breite. Damit blieb vom Markt nichts uebrig. Der Untertitel ist der einzige rein erklaerende Teil; was er sagt, steht ohnehin im Eingabefeld ("Beschreib was du suchst..."). Er faellt hier weg, alle Bedienelemente bleiben. Steht bewusst NACH dem 640px-Block: gleiche Spezifitaet, sonst wuerde dessen Schriftgroesse die hier gewinnen. */ @media (max-width: 899px) and (max-height: 740px) { /* Auf kurzen Bildschirmen bleibt nur die kleinere Schlagzeile: bei 360px Breite bricht sie sonst auf drei Zeilen um. Untertitel, GPS-Zeile und Hinweis waren hier ebenfalls ausgeblendet, um Platz fuer den Marktbereich zu schaffen -- mit dem vollen Hero ist das zurueckgenommen (Louis 06.08.). */ .hero-stage__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); } } /* ══════════════════════════════════════════ 8. KOPFZEILE UND MENUE ══════════════════════════════════════════ Louis 05.08.: "die 3 Striche, wenn ich die druecke und dann Start, Dashboard und Chats angezeigt bekomme -- da ist einfach hingeklatscht, sieht gar nicht gut aus, ist schwer von den anderen Sachen abzugrenzen." Vorher: ein bildschirmfuellendes Feld ab der Kopfzeile, deckend in der Grundfarbe der Seite, drei mittig gesetzte Textzeilen ohne Rahmen, ohne Trennung, ohne erkennbaren Rand. Es sah aus, als waere der Seiteninhalt verschwunden und die Woerter stuenden im Leeren. Jetzt: ein Blatt, das unter der Kopfzeile haengt, nur so hoch wie sein Inhalt, mit Kante und Schatten -- und darunter ein Schleier ueber der Seite. Damit ist sofort klar, dass es sich um eine Ebene DARUEBER handelt und die Seite darunter weiterlebt. */ /* Der Mond ist ein Zeichen, kein Knopf mit Kreis. Inline steht border-radius:50%, und .btn--ghost malt beim Scrollen (und nach einem iOS-Tap) den Rand dazu — genau der Ring um den Mond. */ .header .theme-toggle, .header .theme-toggle.btn, .header .theme-toggle.btn--ghost, .header .theme-toggle.btn--sm { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .header .theme-toggle:hover, .header .theme-toggle:focus, .header .theme-toggle:focus-visible, .header .theme-toggle:active { border: none !important; background: transparent !important; box-shadow: none !important; } @media (max-width: 768px) { .header__inner { gap: var(--space-2); } .header__actions { gap: var(--space-2); } .header__nav { /* Haengt an der Kopfzeile statt den Bildschirm zu fuellen */ bottom: auto; padding: var(--space-2) var(--space-3); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); gap: 0; background: var(--surface-0); border-bottom: 1px solid var(--glass-border); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); box-shadow: 0 24px 48px hsla(220, 30%, 4%, 0.22); } /* Schleier ueber dem Rest der Seite. Als Pseudo-Element am Menue selbst, damit kein zusaetzliches Markup in sechs Dateien noetig ist. Liegt unterhalb des Blattes, ueberlappt es also nie. */ .header__nav::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: hsla(220, 25%, 4%, 0.45); animation: nav-scrim-in var(--duration-normal) var(--ease-out); } @keyframes nav-scrim-in { from { opacity: 0; } to { opacity: 1; } } /* Zeilen statt zentrierter Woerter: links buendig, volle Breite, Trennlinien dazwischen -- man sieht, dass es eine Liste ist. */ .header__nav-link { justify-content: flex-start; width: 100%; font-size: var(--fs-base); font-weight: var(--fw-semibold); padding: var(--space-4) var(--space-4); border-radius: var(--radius-lg); color: var(--text-primary); } .header__nav-link + .header__nav-link { border-top: 1px solid var(--glass-border); } /* Die aktuelle Seite als gefuellte Zeile mit Markierung am linken Rand. Der pulsierende Unterstrich von der Desktop-Kopfzeile passt in einer Liste nicht -- er sass unter der Zeile und sah aus wie ein Fehler. */ .header__nav-link--active { background: var(--surface-2); border: none; box-shadow: none; } .header__nav-link--active::after { content: ''; position: absolute; top: 22%; bottom: 22%; left: 0; right: auto; width: 3px; height: auto; border-radius: var(--radius-full); background: var(--secondary); box-shadow: none; animation: none; } /* Die drei Striche werden zum Kreuz, solange das Menue offen ist -- sonst sieht man dem Knopf nicht an, dass er auch wieder zumacht. */ .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ══════════════════════════════════════════ 8b. UNTERE LEISTE + SEITENWECHSEL ══════════════════════════════════════════ Louis 05.08.: die drei Bereiche als Reiter unten statt im Menue oben rechts, und zwischen den Seiten wischen koennen. Die drei Bereiche bleiben eigene Seiten -- den Uebergang macht die View-Transition-API ueber Dokumentgrenzen hinweg. Der Browser fotografiert die alte Seite, laedt die neue und blendet dazwischen. js/tabs.js setzt nur data-wisch, damit die Richtung stimmt. */ .tabbar { display: none; } /* Der Seitenuebergang gilt nur auf Handybreite. Vorher stand die Regel ganz oben und damit fuer JEDE Navigation, auch am Laptop -- da gehoert sie nicht hin, dort klickt man Links und erwartet keinen Schiebe-Effekt. */ @media (max-width: 768px) { @view-transition { navigation: auto; } } @media (max-width: 768px) { .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky, 40); display: flex; background: var(--surface-0); border-top: 1px solid var(--glass-border); padding: var(--space-1) var(--space-2); padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px hsla(220, 30%, 4%, 0.10); /* Die Leiste bleibt beim Seitenwechsel stehen, statt mitzuwandern -- genau das macht den Unterschied zwischen "Reiter" und "neue Seite". */ view-transition-name: tabbar; } .tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--space-2) 0 var(--space-1); min-height: 52px; text-decoration: none; color: var(--text-tertiary); position: relative; transition: color var(--duration-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; } .tabbar__icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-normal) var(--ease-spring); } .tabbar__label { font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: 0.01em; } .tabbar__item--aktiv { color: var(--text-primary); } .tabbar__item--aktiv .tabbar__icon { transform: translateY(-1px) scale(1.08); } /* Markierung ueber dem aktiven Reiter -- kurz und ruhig, kein Leuchten */ .tabbar__item--aktiv::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 0 0 var(--radius-full) var(--radius-full); background: var(--secondary); } .tabbar__badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; background: var(--danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold); min-width: 16px; height: 16px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: none; border: none; } /* Platz fuer die Leiste, sonst liegt sie auf dem letzten Inhalt */ body.hat-tabbar .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* Der Fuss braucht denselben Platz wie .main -- er steht aber AUSSERHALB davon ( kommt vor