/* Was App, Landingpage und Unterseiten gemeinsam haben. =========================================================================== Bis zum 10.09.2026 stand all das inline im von `landing.html`. Das ging, solange es genau eine Marketingseite gab. Mit der zweiten waere es eine Kopie geworden, mit der vierten vier - und Kopien laufen auseinander, ohne dass irgendetwas fehlschlaegt. Die Grenze zwischen dieser Datei und dem, was in `landing.html` geblieben ist: Hier steht, was mehr als eine Seite braucht. Dort steht, was es nur einmal gibt - der Hero, die beiden gezeichneten Telefone samt ihrer Choreografie, die Szenarienkarten. Farben und Schrift stehen nicht hier, sondern in `marke.css`. Die teilt sich diese Datei mit der App, und das soll so bleiben: eine Farbaenderung darf nicht an zwei Stellen noetig sein. Reihenfolge der Einbindung: `marke.css` zuerst, dann diese Datei. Die Tokens unten greifen auf nichts aus `marke.css` zu, aber alles darunter auf `--c-*`. */ /* Schrift und die neun Farbtokens stehen in `/marke.css` – dieselbe Datei nutzen die App und die Rechtsseiten. Hier stehen nur noch die Maße, die allein diese Seite braucht. */ :root { --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --fs-hero: clamp(2rem, 7.5vw, 3.25rem); --fs-h2: clamp(1.5rem, 5vw, 2.15rem); --fs-h3: 1.1875rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem; /* Unterste Stufe der Hafer-Skala (13/15/17/20/26/32). Nur im Fussbereich. */ --fs-tiny: 0.8125rem; --measure: 66ch; --container: 1120px; /* Kurven. Drei Werte fuer die ganze Seite - vorher gab es genau einen Uebergang und der stand auf `ease`. Ein eigener Wert je Stelle waere der Anfang von zehn leicht verschiedenen Kurven, die niemand auseinanderhaelt. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* ═══════════════════════════════════════════════════════════════ BASIS ═══════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--c-bg); -webkit-text-size-adjust: 100%; } body { margin: 0; /* Damit der Fuss bei kurzen Seiten unten klebt statt mitten im Bild zu haengen. Auf der Landingpage aendert das nichts, sie ist laenger als jeder Bildschirm; auf `nicht-gefunden.html` und kurzen Unterseiten ist es der Unterschied zwischen fertig und unfertig aussehen. Spalte und nicht Zeile: die drei Kinder von - Kopf, Inhalt, Fuss - stehen untereinander, `stretch` gibt ihnen weiterhin die volle Breite. */ display: flex; flex-direction: column; min-height: 100dvh; font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif; /* 17 px Basis wie in der App – Lesbarkeit im Laden, aus dem Board. */ font-size: var(--fs-body); line-height: 1.6; background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p { margin: 0; } img { max-width: 100%; display: block; } /* Derselbe Ring wie in der App: 2 px Akzent plus 3 px Halo. Kein `outline: none` ohne sichtbaren Ersatz. */ :where(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); } .container { max-width: var(--container); margin: 0 auto; padding-inline: 20px; } /* Für Screenreader da, sichtbar nicht. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════ KOPF ═══════════════════════════════════════════════════════════════ */ .kopf { border-bottom: 1px solid var(--c-line); background: var(--c-bg); } .kopf__innen { max-width: var(--container); margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .marke { display: inline-flex; align-items: center; text-decoration: none; } .knopf { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-small); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; font-family: inherit; } .knopf--ruhig { color: var(--c-accent); border-color: var(--c-accent); background: transparent; } .knopf--ruhig:hover { background: color-mix(in srgb, var(--c-accent) 8%, var(--c-bg)); } .knopf--laut { min-height: 52px; padding: 0 24px; font-size: var(--fs-body); font-weight: 700; background: var(--c-accent); color: var(--c-accent-fg); } .knopf--laut:hover { background: color-mix(in srgb, var(--c-accent) 88%, #000); } /* Rueckmeldung beim Druecken. `:active` feuert beim Aufsetzen des Fingers, nicht beim Loslassen - das ist der ganze Punkt. Ein Knopf, der erst auf den Klick reagiert, fuehlt sich tot an, und zwar messbar frueher als jede andere Verzoegerung auffaellt. 0.97 und 100ms: gerade so viel, dass der Finger es merkt, und so kurz, dass es nie im Weg steht. Beide Knopfarten, damit sich nicht einer lebendig anfuehlt und der andere nicht. */ .knopf:active { transform: scale(0.97); } .knopf { transition: transform 100ms var(--ease-out); } /* ═══════════════════════════════════════════════════════════════ INHALT - das Grundgeruest jeder Unterseite Bewusst kein Hero. Die H1 einer Unterseite bekommt `--fs-h2`, also die Groesse einer *Abschnitts*-Ueberschrift der Startseite, nie deren `--fs-hero`. Das ist die ganze Antwort auf "erkennbar dieselbe Seite, aber keine zweite Landingpage": gleiche Schrift, gleiche Farben, gleiche Rundungen - nur ist die groesste Ueberschrift hier so gross wie dort die zweitgroesste. 760px Rahmen, 66ch Fliesstext: breiter als das Rechtstext-Blatt (720px), weil hier mehr als Paragraphen stehen, und klar schmaler als die 1120px breiten Sektionen der Startseite. ═══════════════════════════════════════════════════════════════ */ .inhalt { /* `width: 100%` ist nicht doppelt gemoppelt. `main` ist ein Kind des Flex-Koerpers (Fuss am Boden), und `margin: 0 auto` schaltet dort das Strecken ab - die Breite richtet sich dann nach dem breitesten Inhalt. Bis zum 15.09.2026 wurden /installieren (Hinweiskasten) und /daten-und-server (Tabelle) bei 320px so 26 bis 30px breiter als der Bildschirm, und die ganze Seite scrollte seitlich. */ width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vw, 72px) 20px clamp(56px, 10vw, 96px); } .inhalt h1 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; max-width: 20ch; margin-bottom: 14px; } .inhalt h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin: 40px 0 10px; } /* Seit dem 14.09.2026 gebraucht: Die Wochentage auf /wg-einkaufsliste stehen eine Ebene unter "Eine Woche mit derselben Liste". Grösse des Fliesstexts, aber fett und mit eigenem Abstand - die Hierarchie zur h2 darüber trägt der Abstand mit, nicht nur die zwei Pixel Unterschied in der Schrift. */ .inhalt h3 { font-size: var(--fs-body); font-weight: 600; margin: 26px 0 6px; } .inhalt__vorspann { color: var(--c-muted); max-width: 60ch; text-wrap: pretty; } .inhalt p { max-width: var(--measure); text-wrap: pretty; } .inhalt p + p { margin-top: 14px; } .inhalt__aktion { margin-top: 32px; } /* Nur Links im Fliesstext. `:not(.knopf)` ist kein Schoenheitsfehler, sondern noetig: `.inhalt a` ist spezifischer als `.knopf--laut`, faerbte also den Text eines lauten Knopfes gruen - gruen auf gruen, Beschriftung unsichtbar. `.weiter` bringt seine Farbe ebenfalls selbst mit. */ .inhalt a:not(.knopf):not(.weiter) { color: var(--c-accent); text-underline-offset: 3px; } /* Nummerierte Schritte. `ol` und nicht `ul`, weil die Reihenfolge hier wirklich zaehlt - Schritt 2 im falschen Browser fuehrt zu nichts. */ .schritte { max-width: var(--measure); /* Unten ebenfalls 16px. Bis zum 14.09.2026 nur oben - auf /installieren folgt jeder Liste eine Ueberschrift mit eigenem Abstand, deshalb fiel es dort nie auf. Auf /einladen folgt ein Absatz, und der klebte direkt an der Liste. Vor einer h2 faellt der Rand mit deren 40px zusammen, aendert dort also nichts. */ margin: 16px 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 12px; } .schritte li { padding-left: 4px; text-wrap: pretty; } .schritte li::marker { color: var(--c-muted); font-weight: 600; } /* Der Kasten fuer den einen Satz, der auf einer Seite wichtiger ist als der Rest. Sparsam einsetzen: Zwei Hinweiskaesten auf einer Seite heben sich gegenseitig auf. */ .hinweis { margin: 28px 0; padding: 18px 20px; max-width: var(--measure); border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent); border-radius: var(--r-md); background: var(--c-surface); } .hinweis .inhalt__aktion { margin-top: 16px; margin-bottom: 0; } /* Ein Zeichen mitten im Satz, etwa das Teilen-Symbol von Apple in „auf Teilen tippen". Gezeichnet und nicht getippt, genau wie in der App: als Schriftzeichen haenge die Groesse an der Schrift des Geraets. */ /* Tabellen. Breite Inhalte scrollen in ihrem eigenen Kasten - der Koerper der Seite darf nie waagerecht scrollen. */ .tabelle-huelle { margin: 20px 0; max-width: var(--measure); overflow-x: auto; } .tabelle { border-collapse: collapse; width: 100%; font-size: var(--fs-small); } .tabelle th, .tabelle td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; } .tabelle th { font-weight: 600; white-space: nowrap; } .tabelle tbody tr:last-child td { border-bottom: 0; } .zeichen-inline { display: inline-block; width: 1em; height: 1em; vertical-align: text-bottom; } /* ═══════════════════════════════════════════════════════════════ DREI PUNKTE ═══════════════════════════════════════════════════════════════ */ .punkte { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 9vw, 88px) 20px; } /* Diese Sektion hatte keine Überschrift. Ihre drei h3 hingen dadurch unter der h2 der Szenarien – für eine Suchmaschine drei Merkmale, die zu den Anwendungsfällen zu gehören schienen. Die h2 schließt die Lücke. Sie fasst zusammen statt zu wiederholen: die drei h3 darunter nennen dieselben Punkte ausführlich, hier stehen sie als eine Aussage. */ .punkte__kopf { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; max-width: 20ch; margin-bottom: clamp(30px, 5vw, 52px); } .punkte__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; } .punkt__strich { display: block; width: 32px; height: 2px; background: var(--c-accent); margin-bottom: 18px; } .punkt h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; } .punkt p { color: var(--c-muted); max-width: var(--measure); text-wrap: pretty; } /* ═══════════════════════════════════════════════════════════════ VERTRAUEN ═══════════════════════════════════════════════════════════════ */ .vertrauen { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 9vw, 88px) 20px; } .vertrauen h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; max-width: 20ch; text-wrap: balance; margin-bottom: 24px; } .vertrauen__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; max-width: 640px; } .vertrauen__punkt { display: flex; gap: 16px; align-items: flex-start; } .vertrauen__punkt .zeichen { flex: 0 0 auto; color: var(--c-text); } .vertrauen__punkt strong { display: block; font-weight: 600; margin-bottom: 4px; } .vertrauen__punkt p { color: var(--c-muted); max-width: var(--measure); text-wrap: pretty; } /* ═══════════════════════════════════════════════════════════════ FAQ —
, kein JavaScript ═══════════════════════════════════════════════════════════════ */ .faq { background: color-mix(in srgb, var(--c-text) 4%, var(--c-bg)); border-block: 1px solid var(--c-line); } .faq__innen { max-width: 760px; margin: 0 auto; padding: clamp(48px, 9vw, 88px) 20px; } .faq h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; } .faq__liste { border-top: 1px solid var(--c-line); margin-top: 24px; } .faq details { border-bottom: 1px solid var(--c-line); } .faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; font-weight: 600; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .pfeil { flex: 0 0 auto; color: var(--c-muted); transition: transform 160ms ease; } .faq details[open] summary .pfeil { transform: rotate(180deg); } /* Auf der Startseite ist die FAQ eine eigene Bahn quer ueber die Seite, mit Tonung und Linie oben und unten. Auf `/fragen` ist sie der Inhalt selbst und steht schon in der Textspalte - eine getonte Kiste darin waere ein Kasten im Kasten. */ .faq--seite { background: none; border-block: 0; } .faq--seite .faq__liste { margin-top: 0; } .faq__antwort { padding: 0 2px 20px; max-width: 60ch; color: var(--c-muted); text-wrap: pretty; } .faq__antwort a { color: var(--c-accent); text-underline-offset: 3px; } /* ═══════════════════════════════════════════════════════════════ FUSS ═══════════════════════════════════════════════════════════════ */ .fuss { margin-top: auto; background: var(--c-bg); border-top: 1px solid var(--c-line); } .fuss__innen { max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* Vorbild ist der Fussbereich von apple.com: klein gesetzt, mehrspaltig, gruppiert, und trotz vieler Links die ruhigste Stelle der Seite. Er ersetzt die Kopfnavigation, die es hier bewusst nicht gibt - eine Reiterleiste mit vier Reitern waere lauter als alles andere im Bild. Ruhe entsteht durch Beschraenkung, nicht durch Weglassen: zwei Textfarben, eine Schriftgroesse, keine Rahmen um die Spalten, keine Zeichen vor den Links, keine Akzentfarbe. */ .fuss__raster { display: grid; grid-template-columns: 1fr; gap: 28px; padding: clamp(36px, 6vw, 56px) 0 32px; } /* Drei Gruppen seit dem 14.09.2026 (vorher zwei). Nebeneinander mit der Wortmarke brauchen sie rund 680px Inhaltsbreite; darunter stehen die Gruppen in einer Reihe und die Wortmarke darueber, ganz schmal alles untereinander. Ohne die Zwischenstufe liefe der Fuss zwischen 640 und 760px ueber den Rand. */ /* Oben buendig mit den Spaltentiteln. Ohne das streckt das Raster den Link auf Zeilenhoehe, und `.marke` zentriert die Wortmarke darin - sie schwebte bis zum 14.09.2026 auf halber Hoehe neben den Titeln, die oben beginnen. */ .fuss__marke { align-self: start; } @media (min-width: 560px) { .fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; } .fuss__marke { grid-column: 1 / -1; } } @media (min-width: 760px) { .fuss__raster { grid-template-columns: minmax(160px, 240px) repeat(3, minmax(140px, 1fr)); gap: 36px 32px; } .fuss__marke { grid-column: auto; } } /* Kein

. Vier generische Ueberschriften im Fuss wuerden sonst in der Gliederung jeder Seite stehen, zwischen den Ueberschriften, um die es wirklich geht. Ein

mit `aria-labelledby` am