/* Kassenbond · kassenbond.de =========================================================================== Gestaltung nach dem Cosmos-Entwurf, auf den Gegenstand übertragen. Der Gedanke dort: Die Leinwand ist warmes Leinen, die Oberfläche hält sich vollständig zurück, und Farbe kommt ausschließlich aus dem Inhalt. Cosmos streut Polaroids um die Überschrift, weil Bilder sein Produkt sind. Hier sind es **Belege** – dieselbe Geste, anderer Gegenstand. Dass der Grund nach Papier aussieht, ist bei einer Belegapp kein Zufall, sondern das Material selbst. Übernommen: Leinen #F7F5F3 als Grund, nie reines Weiß an der Wurzel · Tinte #0D0D0D statt Schwarz · ein einziger Radius von 16 px, 12 px nur für Belegkacheln · keine Schatten, keine Verläufe · eine einzige Schriftfamilie · negative Laufweite, die mit der Größe wächst. Zwei begründete Abweichungen: **Die Schrift.** Bis zum 1. September 2026 stand hier eine Serife (`ui-serif`/New York, Anzeigengewicht 350) – Giuseppes Rückmeldung: zu altmodisch. Jetzt trägt die Seite die Grotesk der Marke: **Outfit**, selbst gehostet (die CSP lässt keine Fremdquellen zu), fette Display-Überschriften statt leichtem Strichkontrast. Die Begründung steht am @font-face-Block unten. **Die Farbe.** Kassenbond hat Markenfarben. Nach der Regel „Farbe gehört dem Inhalt" erscheint das Türkis deshalb an genau einer Stelle: dem Haken auf dem Bon. Die Oberfläche bleibt Tinte, Leinen, Stein. =========================================================================== */ :root { color-scheme: light dark; /* Farben */ --leinen: #F7F5F3; /* Grund – die Galeriewand */ --papier: #FFFFFF; /* die einzige gehobene Fläche */ --tinte: #0D0D0D; /* nie #000 – wärmt gegen das Leinen */ --stein: #6E6A69; /* Fließtext, Nebensachen */ --kiesel: #9A9796; /* Hilfstext, Abgeschaltetes */ --kante: rgba(13, 13, 13, .12); --kante-zart: rgba(13, 13, 13, .07); /* Der einzige Farbton, und er gehört dem Inhalt. */ --tuerkis: #0A6B64; /* Der Bon – wärmer als das Leinen, damit er als Ding darauf liegt */ --bon: #FFFDF8; --bon-feld: #F0EBE1; /* das breite Feld - tieferes Papier */ --bon-druck: #23201C; --bon-blass: #5F6B76; /* Maße */ --mass: 1280px; --lesemass: 640px; --radius: 16px; --radius-kachel: 12px; --abstand: 80px; --kurve: cubic-bezier(.32, .72, 0, 1); } @media (prefers-color-scheme: dark) { :root { --leinen: #121110; /* warmes Dunkel, kein kaltes Grau */ --papier: #1C1B1A; --tinte: #F2F0ED; --stein: #A5A2A0; --kiesel: #77736F; --kante: rgba(242, 240, 237, .14); --kante-zart: rgba(242, 240, 237, .08); --tuerkis: #4FC0B4; --bon: #201E1B; --bon-feld: #191715; --bon-druck: #EDE7DC; --bon-blass: #948D83; } } /* =========================================================================== Die Schrift: Outfit, selbst gehostet =========================================================================== Giuseppes Befund vom 1. September 2026: Die Serifen-Überschriften wirkten altmodisch. Die neue Richtung ist die der Marke selbst - Marke.swift nennt für die Wortmarke ausdrücklich „eine moderne, geometrische Richtung ähnlich Outfit". Also genau die: Outfit (SIL Open Font License), als variable Schrift mit allen Gewichten in zwei kleinen Dateien (~47 KB), vom eigenen Webspace - die CSP lässt keine Fremdquellen zu, und das soll so bleiben. Rückfall ist Avenir Next, die Schrift der Wortmarke in der App. */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/schrift/outfit-latin.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: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/schrift/outfit-latin-ext.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; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* Eine Familie für alles bleibt die Signatur des Entwurfs - nur ist sie seit dem 1. September 2026 die Grotesk der Marke statt einer Serife. */ font-family: "Outfit", "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: -.1px; background: var(--leinen); color: var(--tinte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .mitte { max-width: var(--mass); margin: 0 auto; padding: 0 24px; } .schmal { max-width: var(--lesemass); margin: 0 auto; padding: 0 24px; } /* =========================================================================== Die schwebende Pille =========================================================================== Eine einzige Leiste, ganz rund, ohne Schatten. Sie schwebt unter der Oberkante statt daran zu kleben. */ .insel { position: sticky; top: 16px; z-index: 100; width: max-content; margin: 16px auto 0; display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-radius: 9999px; background: var(--papier); border: 1px solid var(--kante-zart); } .insel img { width: 22px; height: 22px; border-radius: 6px; display: block; } /* --------------------------------------------------------------------------- Die Wortmarke --------------------------------------------------------------------------- **Die einzige Stelle, an der die Seite von der einen Schriftfamilie abweicht - und sie muss es.** Die Wortmarke ist in der App festgelegt (Marke.swift, `struct Wortmarke`): „Kassen" in Avenir Next Medium, „bond" in Avenir Next Heavy (seit 2. September 2026 liegt die Betonung auf dem Bond), Laufweite -2 % der Größe. Dieselbe Regel gilt für die große Wortmarke im Markenblock des Kopfbereichs. Die Teilung ist kein Schmuck, sie trägt die Pointe des Namens - aus dem Kassenbon wird der **Bond**. Als gleichmäßiger Fließtext gesetzt, verliert der Name genau das. Ein Logo folgt ohnehin nicht der Textschrift; auch Cosmos setzt sein Zeichen eigenständig. Avenir Next gehört zu iOS und macOS und braucht keine Schriftdatei; für andere Systeme steht eine geometrische Grotesk daneben. Farbe wie in der App: hell das Nachtblau der Marke, dunkel Weiß. */ .insel .wort { font-family: "Outfit", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; font-size: 17px; font-weight: 500; /* „Kassen" - Medium */ letter-spacing: -.02em; color: #0A2540; text-decoration: none; white-space: nowrap; font-synthesis-weight: none; } .insel .wort b { font-weight: 800; } /* „bond" - Heavy: die Betonung liegt auf dem Bond (seit 2.9.2026) */ @media (prefers-color-scheme: dark) { .insel .wort { color: #FFFFFF; } } .insel .pille { font-size: 14px; color: var(--stein); font-weight: 400; } /* =========================================================================== Typografie =========================================================================== Große, fette Grotesk-Überschriften mit enger Laufweite - die Autorität kommt jetzt aus Gewicht und Dichte, nicht mehr aus dem Strichkontrast einer Serife. Die Zeilenhöhe steigt gegenüber der Serifen-Fassung leicht (fette Grotesken brauchen Luft, sonst kleben die Zeilen). */ .anzeige { font-weight: 700; margin: 0; text-wrap: balance; } h1.anzeige { font-size: clamp(2.9rem, 7.6vw, 4.625rem); /* bis 74 px */ line-height: .98; letter-spacing: -.035em; } h2.anzeige { font-size: clamp(2.06rem, 4.4vw, 2.375rem); /* bis 38 px */ line-height: 1.06; letter-spacing: -.025em; } h3 { font-size: 18px; font-weight: 600; line-height: 1.29; letter-spacing: -.2px; margin: 0 0 8px; } p { margin: 0 0 16px; } .leise { color: var(--stein); } .vorspann { font-size: 18px; line-height: 1.5; letter-spacing: -.2px; color: var(--stein); max-width: 38ch; margin-inline: auto; } /* Das Etikett: klein, gesperrt, versal – eher Stempel als Beschriftung. */ .etikett { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); margin: 0 0 20px; } a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--stein); } a:focus-visible, .rollbar:focus-visible, summary:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; } /* =========================================================================== Der Kopfbereich – Belege um die Überschrift gestreut =========================================================================== Was bei Cosmos Polaroids sind, sind hier Belege: kleine Papierstücke, die um den Text herum auf der Wand liegen. Flach, ohne Schatten, leicht gedreht. Auf schmalen Geräten verschwinden sie – ein gedrehtes Papierstück neben dem Daumen ist keine Gestaltung, sondern ein Hindernis. */ .kopfbereich { position: relative; padding: clamp(64px, 12vh, 128px) 0 var(--abstand); text-align: center; } .kopfbereich .vorspann { margin-top: 24px; } /* Der Kernsatz unter der Überschrift: für wen Kassenbond gemacht ist (Giuseppe, 30. September 2026 - „das muss als USP stehen"). Kräftiger als der Vorspann und in der Markenfarbe des Etiketts, damit Etikett, Überschrift und Kernsatz als eine Gruppe lesen; der Vorspann erklärt danach. Das Türkis hält in beiden Schemata AA (hell 5,9:1, dunkel 8,6:1). */ .zielgruppe { margin: 22px auto 0; max-width: 30em; font-size: clamp(1.1875rem, 2.2vw, 1.375rem); /* 19 bis 22 px */ font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--tuerkis); text-wrap: balance; } .kopfbereich .zielgruppe + .vorspann { margin-top: 16px; } /* --------------------------------------------------------------------------- Der Markenblock – Symbol und Wortmarke groß über dem Slogan --------------------------------------------------------------------------- Giuseppe am 30. September 2026: „Müsste der Titel und Icon nicht über den Slogan ganz groß stehen? Nur in der Navbar ist zu wenig." Die Seite heißt Kassenbond, also steht das zuerst da und größer als alles andere: das App-Symbol und die Wortmarke als ein Zeichen, darunter die offizielle Produktzeile „Dein Auslagenagent" (Kassenbond – Dein Auslagenagent.). Der Slogan bleibt die Überschrift (h1) und rückt dafür eine Stufe kleiner, damit „Wie es läuft" auf einem Laptop (1280 × 800) im ersten Bild bleibt. Nachgeschärft am 1. Oktober 2026, Giuseppe: „Ich finde das doch ein Ticken zu groß, den Titel … Und das Logo sollte auf keinen Fall … höher sein als der Titel Kassenbond." Die Unterzeile soll „einfach und drunter zentriert" stehen. Deshalb: · Die Wortmarke ist rund 18 % kleiner: 40 bis 72 px statt bis 88 px, und bleibt so mindestens so groß wie der Slogan (40 bis 68 px). · Das Symbol ist genau so hoch wie die Schrift – von der Oberkante von „b" und „d" bis zur Grundlinie. Im Browser an der geladenen Outfit gemessen: b und d in Heavy 729, das K in Medium 700 Einheiten von 1000. Also 0,729 der Wortmarkengröße, und es steht auf der Grundlinie statt geschätzt mittig (siehe .markenblock picture). · Symbol und Wortmarke stehen auf jeder Breite in einer Reihe; die gestapelte Telefonfassung mit dem großen Symbol ist entfallen. Auf Arabisch gespiegelt, dann steht das Symbol rechts. · Die Unterzeile steht mittig unter Symbol und Wortmarke, in allen Sprachen. Die Ausrichtung an der Kante des „K" ist entfallen. Zwei begründete Ausnahmen vom Entwurf: Das Symbol wirft als einziges Ding der Seite einen Schatten – es ist das Produkt selbst und liegt wie auf dem Homebildschirm auf dem Leinen; im Dunkeln wird daraus ein leiser türkiser Schein, weil ein Schatten auf Schwarz nichts trennt. Die Form (iOS-Ecke) steckt im Alphakanal der Datei (werkzeuge/web-symbol.swift), drop-shadow folgt ihr. Und die Wortmarke folgt der App, nicht der Textschrift (siehe .insel .wort). Umgestellt am 5. Oktober 2026, Giuseppe: „Platziere das App-Icon oben zentral. Ordne ‚Kassenbond‘ mittig darunter an, darunter ebenfalls zentriert ‚DEIN AUSLAGENAGENT‘ – wie in der App. Entferne den Button ‚Wie es läuft‘ vollständig“, danach „Icon kann etwas größer sein“. Damals direkt auf dem Server geändert und nie hier eingetragen – der nächste Upload aus dem Repository hat es überschrieben (9. Oktober 2026 nachgetragen). Seither: · Symbol, Wortmarke und Unterzeile stehen untereinander, jedes mittig. Die Reihe auf der Grundlinie und die Regel „Symbol so hoch wie die Schrift“ vom 1. Oktober sind damit überholt. · Das Symbol ist 80 bis 112 px breit (clamp(80px, 9vw, 112px)). · Kein Knopf unter dem Vorspann; der App-Store-Hinweis rückt näher heran. web-bond-pruefung.mjs hält alle drei Punkte fest. */ .kopfbereich.kopfbereich-marke { padding-top: clamp(32px, 6vh, 64px); } .markenblock { /* Die Größe der Wortmarke an einer Stelle – Symbol, Abstand und Schatten rechnen sich daraus. Wächst zwischen 320 und 1280 px gleichmäßig mit dem Slogan und bleibt dabei knapp darüber: 40 → 72 px gegen 40 → 68 px. */ --wortgroesse: clamp(2.5rem, 3.3vw + 29.8px, 4.5rem); /* 40 bis 72 px */ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; margin: 0 auto clamp(28px, 5vh, 44px); } /* Das Symbol steht oben mittig über der Wortmarke; die Schriftgröße 0 lässt unter dem Bild keine Unterlänge stehen. */ .markenblock picture { display: block; flex: none; font-size: 0; line-height: 0; margin-bottom: 18px; } .markenblock-symbol { display: block; width: clamp(80px, 9vw, 112px); height: auto; filter: drop-shadow(0 calc(var(--wortgroesse) * .075) calc(var(--wortgroesse) * .14) rgb(10 37 64 / .2)) drop-shadow(0 calc(var(--wortgroesse) * .014) calc(var(--wortgroesse) * .035) rgb(10 37 64 / .14)); } /* Die Wortmarke steht mittig unter dem Symbol (bis zum 5. Oktober 2026 nahmen negative Ränder den Leerraum neben „K“ und „d“ aus dem Kasten – das galt der Reihe neben dem Symbol). Sie läuft auch auf Arabisch von links nach rechts (dir="ltr" im HTML). */ .markenblock-wort { margin: 0; font-family: "Outfit", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; font-size: var(--wortgroesse); font-weight: 500; /* „Kassen" - Medium */ line-height: .95; letter-spacing: -.03em; color: #0A2540; white-space: nowrap; font-synthesis-weight: none; } .markenblock-wort b { font-weight: 800; } /* „bond" - Heavy, wie in der App */ /* Die Unterzeile steht mittig unter der Wortmarke – dieselbe Mitte wie Symbol und Wortmarke darüber. Der Innenabstand am Anfang gleicht die Sperrung nach dem letzten Buchstaben aus; sonst stünde sie um eine halbe Sperrung zu weit vorn. Arabisch wird nicht gesperrt: Die Buchstaben hängen zusammen, Chrome sperrt dort nur die Wortzwischenräume, andere Browser womöglich anders – ohne Sperrung steht die Zeile in jedem Browser gleich und genau mittig. */ .markenblock .etikett { margin: 12px 0 0; padding-inline-start: .16em; font-size: clamp(12.5px, 1.15vw, 15px); letter-spacing: .16em; text-align: center; } .markenblock .etikett:lang(ar) { padding-inline-start: 0; letter-spacing: 0; } .markenblock + h1.anzeige { font-size: clamp(2.5rem, 2.94vw + 30.4px, 4.25rem); } /* 40 bis 68 px */ /* Ohne Knopf „Wie es läuft“ rückt der App-Store-Hinweis näher an den Vorspann. */ .kopfbereich-marke .laeden { margin-top: 24px; } @media (prefers-color-scheme: dark) { .markenblock-wort { color: #FFFFFF; } .markenblock-symbol { filter: drop-shadow(0 0 1px rgb(242 240 237 / .22)) drop-shadow(0 calc(var(--wortgroesse) * .065) calc(var(--wortgroesse) * .2) rgb(79 192 180 / .24)); } } @media (max-width: 560px) { /* Auf dem Telefon oben und unten etwas knapper. */ .kopfbereich.kopfbereich-marke { padding-top: 36px; } .markenblock { margin-bottom: 30px; } .markenblock picture { margin-bottom: 14px; } .markenblock .etikett { margin-top: 8px; } } /* Die Marke wandert in die Pille. Solange der Markenblock im Bild ist, tritt die kleine Marke dort zurück – dasselbe Zeichen zweimal übereinander wäre ein Echo, kein Auftritt. Verschwindet der Block unter der Pille, gleitet sie herein. Nur mit JavaScript: Die Klassen setzt bewegung.js; ohne Skript, auf allen anderen Seiten und überall dort, wo die Pille mit Marke umbräche (unter 375 px, siehe Kopf von bewegung.js), steht die Marke wie bisher in der Pille. visibility nimmt sie aus der Tab-Reihenfolge, solange sie weg ist; der negative Rand schluckt die Lücke, damit die Pille mittig schrumpft. */ .marke-bereit .insel > img, .marke-bereit .insel > .wort { overflow: hidden; transition: max-width .5s var(--kurve), margin .5s var(--kurve), opacity .35s ease; } .marke-bereit .insel > img { max-width: 22px; } .marke-bereit .insel > .wort { max-width: 8em; } .marke-oben .insel > img, .marke-oben .insel > .wort { max-width: 0; opacity: 0; visibility: hidden; overflow: hidden; margin-inline-end: -16px; } .marke-bereit.marke-oben .insel > img, .marke-bereit.marke-oben .insel > .wort { transition: max-width .5s var(--kurve), margin .5s var(--kurve), opacity .25s ease, visibility 0s linear .5s; } @media (max-width: 420px) { .marke-oben .insel > img, .marke-oben .insel > .wort { margin-inline-end: -10px; } } .streu { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .kopfbereich > .mitte { position: relative; z-index: 1; } .zettel { position: absolute; width: 118px; padding: 10px 11px 14px; background: var(--bon); color: var(--bon-druck); border: 1px solid var(--kante-zart); border-radius: var(--radius-kachel); font: 400 10.5px/1.7 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; letter-spacing: 0; text-align: left; } .zettel .z-kopf { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bon-blass); margin-bottom: 5px; } .zettel .z-zeile { display: flex; justify-content: space-between; gap: 8px; } .zettel .z-zeile span:last-child { font-variant-numeric: tabular-nums; } .zettel:nth-child(1) { top: 6%; left: 4%; transform: rotate(-4deg); } .zettel:nth-child(2) { top: 30%; left: 10%; transform: rotate(3deg); width: 104px; } .zettel:nth-child(3) { top: 62%; left: 3%; transform: rotate(-2deg); width: 128px; } .zettel:nth-child(4) { top: 10%; right: 5%; transform: rotate(3.5deg); width: 126px; } .zettel:nth-child(5) { top: 38%; right: 11%; transform: rotate(-3deg); } .zettel:nth-child(6) { top: 66%; right: 4%; transform: rotate(2deg); width: 110px; } @media (max-width: 1080px) { .streu { display: none; } } /* =========================================================================== Der Bon – der große, in der Mitte =========================================================================== */ .bonhuelle { width: min(392px, 100%); margin: 56px auto 0; filter: drop-shadow(0 1px 0 var(--kante-zart)); } .bon { --zacke: 14px; background: var(--bon); color: var(--bon-druck); padding: 24px 22px 34px; border-radius: var(--radius) var(--radius) 0 0; font: 400 13.5px/1.95 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; letter-spacing: 0; text-align: left; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zacke) 100% repeat-x; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zacke) 100% repeat-x; } .bon-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bon-druck); } .bon-kopf span:last-child { color: var(--bon-blass); letter-spacing: .06em; } .bon-anlass { color: var(--bon-blass); font-size: 12px; margin: 4px 0 0; } .bon-riss { border: 0; border-top: 1px dashed var(--bon-blass); margin: 14px 0; opacity: .5; } .posten { display: flex; align-items: baseline; } .posten .was { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .posten .punkte { flex: 1 1 auto; min-width: 12px; margin: 0 7px; border-bottom: 1px dotted var(--bon-blass); transform: translateY(-4px); opacity: .65; } .posten .betrag { font-variant-numeric: tabular-nums; white-space: nowrap; } .bon-summe { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; letter-spacing: .03em; margin-top: 6px; } .bon-summe .betrag { font-variant-numeric: tabular-nums; } /* Die einzige Farbe der ganzen Seite. */ .bon-stempel { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tuerkis); padding: 5px 12px 5px 9px; border: 1px solid var(--tuerkis); border-radius: 9999px; } .bon-stempel svg { width: 13px; height: 13px; flex: none; } /* =========================================================================== Abschnitte =========================================================================== Flach. Erhebung entsteht aus dem Flächenkontrast Leinen zu Papier, nie aus einem Schatten - und Kästen um Fließtext gibt es nicht. Was kein Bild ist, steht auf dem Leinen. */ section { padding: var(--abstand) 0; } .kopfzeile { text-align: center; margin-bottom: 48px; } .kopfzeile .vorspann { margin-top: 20px; } /* --------------------------------------------------------------------------- Knöpfe – immer als Paar --------------------------------------------------------------------------- Gefüllt und umrissen, gleiche Maße, gleicher Radius. Sie lesen sich als Satz, nicht als zwei einzelne Knöpfe. */ .knopfreihe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .knopf { display: inline-block; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -.011em; padding: 16px 24px; border-radius: var(--radius); text-decoration: none; transition: background .35s var(--kurve), color .35s var(--kurve), border-color .35s var(--kurve); } .knopf-voll { background: var(--tinte); color: var(--leinen); border: 1px solid var(--tinte); } .knopf-voll:hover { background: var(--stein); border-color: var(--stein); color: var(--leinen); } .knopf-rand { background: var(--papier); color: var(--tinte); border: 1px solid var(--kante); } .knopf-rand:hover { border-color: var(--tinte); color: var(--tinte); } /* Die Laden-Gruppe unter den Knöpfen: das offizielle App-Store-Badge, selbst gehostet, auf Giuseppes ausdrücklichen Wunsch schon vor dem Store-Start (bewusst getragenes Restrisiko - eigentlich erst mit Link auf die Store-Seite vorgesehen; beim Start verlinken). Komposition: Die zwei Knöpfe sind die Handlung, das Badge ist eine Ankündigung - deshalb steht es mit deutlichem Abstand darunter als eigene, zentrierte Gruppe, einen Hauch kleiner als die Knopfhöhe, mit einer leisen Zeile darunter statt eines zweiten Badges. */ .laeden { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; } .laden-badge { display: block; width: auto; height: 48px; } .laden-notiz { margin: 0; font-size: 14px; color: var(--stein); letter-spacing: .01em; text-wrap: balance; } /* --------------------------------------------------------------------------- Das breite Feld --------------------------------------------------------------------------- Bei Cosmos hält es den Film, hier den Belegstapel. Geteilte Überschrift links und rechts, das Ding in der Mitte, eine kleine Bildunterschrift. */ .feld { position: relative; border-radius: var(--radius); background: var(--bon-feld); padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px) clamp(32px, 4vw, 56px); overflow: hidden; } .feld-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: clamp(1.8rem, 4vw, 2.375rem); font-weight: 650; line-height: 1.06; letter-spacing: -.025em; color: var(--tinte); } .feld-zeile .mark { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tuerkis); align-self: center; } .feld .bonhuelle { margin: clamp(32px, 5vw, 56px) auto clamp(20px, 3vw, 32px); } .feld-unter { text-align: center; font-size: 14px; color: var(--stein); margin: 0; } /* --------------------------------------------------------------------------- Die Dreierreihe – der Beleg ist die Karte --------------------------------------------------------------------------- Kein Rahmen, kein Schatten, keine Hintergrundfläche. Der Zettel füllt die Kachel, darunter steht eine kurze Beschriftung. */ .reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stueck { display: flex; flex-direction: column; } .stueck .bild { border-radius: var(--radius); background: var(--bon); color: var(--bon-druck); aspect-ratio: 4 / 3; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; font: 400 12.5px/1.85 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; letter-spacing: 0; overflow: hidden; } .stueck .bild .oben { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bon-blass); margin-bottom: auto; } .stueck .bild .gross { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stueck .beschriftung { font-size: 18px; letter-spacing: -.2px; margin: 16px 0 0; } .stueck .beschriftung span { display: block; color: var(--stein); font-size: 16px; margin-top: 2px; } /* --------------------------------------------------------------------------- Listen und Fragen – Linien statt Kästen --------------------------------------------------------------------------- */ .liste { list-style: none; margin: 0; padding: 0; } .liste li { padding: 24px 0; border-top: 1px solid var(--kante-zart); } .liste li:last-child { border-bottom: 1px solid var(--kante-zart); } .liste b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -.2px; margin-bottom: 4px; } .liste span { color: var(--stein); } .gewerke { text-align: center; color: var(--stein); font-size: 18px; line-height: 1.6; letter-spacing: -.2px; max-width: 34ch; margin: 0 auto; } .fragen details { border-top: 1px solid var(--kante-zart); } .fragen details:last-child { border-bottom: 1px solid var(--kante-zart); } .fragen summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; font-size: 18px; font-weight: 400; letter-spacing: -.2px; } .fragen summary::-webkit-details-marker { display: none; } .fragen summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat, linear-gradient(currentColor, currentColor) center/1px 100% no-repeat; color: var(--kiesel); transition: transform .45s var(--kurve); } .fragen details[open] summary::after { transform: rotate(45deg); } .fragen details p { margin: 0; padding: 0 2px 24px; color: var(--stein); max-width: 58ch; } /* =========================================================================== Fuß =========================================================================== */ .fuss { padding: 40px 0 72px; margin-top: var(--abstand); border-top: 1px solid var(--kante-zart); font-size: 14px; color: var(--stein); } .fuss .zeilen { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; } .fuss .abstand { flex: 1 1 auto; } .fuss a { color: var(--stein); text-decoration: none; } .fuss a:hover { color: var(--tinte); text-decoration: underline; } /* Das Kleingedruckte steht im Fuss, nicht im Fliesstext: der Serverort und der Verweis auf die Erklaerung. Eine Lesebreite, damit es nicht ueber die ganze Seite laeuft. */ .fuss .fussnote { max-width: var(--lesemass); margin: 0 0 28px; font-size: 14px; line-height: 1.65; color: var(--stein); } .fuss .fussnote a { text-decoration: underline; text-underline-offset: 2px; } /* Bewegung: gemeinsame Umsetzung für Safari, Firefox und Chromium. Inhalt bleibt ohne JS, beim Drucken und mit reduzierter Bewegung sichtbar. */ @media (prefers-reduced-motion: no-preference) { .scroll-bewegt .steigt, .scroll-bewegt .liste li, .scroll-bewegt .fragen details { opacity: .18; transform: translate3d(0, 30px, 0); transition: opacity .75s var(--kurve), transform .75s var(--kurve); } .scroll-bewegt .steigt.sichtbar, .scroll-bewegt .liste li.sichtbar, .scroll-bewegt .fragen details.sichtbar, .scroll-bewegt .steigt:focus-within, .scroll-bewegt .fragen details:focus-within { opacity: 1; transform: none; } .scroll-bewegt .reihe .stueck:nth-child(2) { transition-delay: .12s; } .scroll-bewegt .reihe .stueck:nth-child(3) { transition-delay: .24s; } .scroll-bewegt .bonhuelle { transform: translate3d(0, var(--bon-hub, 0px), 0) rotate(var(--bon-drehung, 0deg)); } .scroll-bewegt .bon-stempel { opacity: 0; transform: scale(1.35) rotate(-9deg); transition: opacity .35s ease .4s, transform .55s var(--kurve) .4s; } .scroll-bewegt .sichtbar .bon-stempel { opacity: 1; transform: scale(1); } .zettel { animation: legen .8s var(--kurve) both; } .zettel:nth-child(2n) { animation-delay: .2s; } .zettel:nth-child(3n) { animation-delay: .4s; } @keyframes legen { from { opacity: 0 } to { opacity: 1 } } .kopfbereich .etikett { animation: heben .8s var(--kurve) both; } /* Der Markenblock hebt sich als ein Zeichen – seine Unterzeile nicht extra. */ .kopfbereich .markenblock { animation: heben .8s var(--kurve) both; } .kopfbereich .markenblock .etikett { animation: none; } .kopfbereich h1 { animation: heben .8s var(--kurve) .08s both; } .kopfbereich .zielgruppe { animation: heben .8s var(--kurve) .12s both; } .kopfbereich .vorspann { animation: heben .8s var(--kurve) .16s both; } @keyframes heben { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } } @media print { .scroll-bewegt .steigt, .scroll-bewegt .liste li, .scroll-bewegt .fragen details, .scroll-bewegt .bon-stempel { opacity: 1 !important; transform: none !important; } } /* =========================================================================== Alle Bildschirmgrößen =========================================================================== */ @media (max-width: 900px) { :root { --abstand: 64px; } .reihe { grid-template-columns: repeat(2, 1fr); gap: 20px; } .reihe > *:last-child:nth-child(odd) { grid-column: 1 / -1; } .stueck .bild { aspect-ratio: 3 / 2; } } @media (max-width: 640px) { :root { --abstand: 56px; } .reihe { grid-template-columns: 1fr; gap: 20px; } .reihe > *:last-child:nth-child(odd) { grid-column: auto; } .stueck .bild { aspect-ratio: 16 / 9; } .feld-zeile { flex-direction: column; align-items: center; text-align: center; gap: 6px; } .feld-zeile .mark { display: none; } .kopfzeile { margin-bottom: 36px; } .fragen summary { padding: 20px 2px; font-size: 17px; } } @media (max-width: 400px) { .mitte, .schmal { padding: 0 18px; } .insel { gap: 12px; padding: 9px 16px; top: 12px; margin-top: 12px; } .insel .pille { display: none; } .bon { font-size: 12.4px; padding: 20px 16px 30px; } .bon .posten .was { white-space: normal; overflow: visible; text-overflow: clip; } .stueck .bild { padding: 20px; } .gewerke { font-size: 17px; } } @media (max-height: 520px) and (orientation: landscape) { .kopfbereich { padding: 44px 0 40px; } section { padding: 48px 0; } } @media (prefers-contrast: more) { :root { --kante-zart: rgba(13,13,13,.30); --stein: #4A4746; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root { --kante-zart: rgba(242,240,237,.40); --stein: #D4D0CC; } } /* Bestehende Papierwelt, mit den Handlungsfarben aus der App. */ .sprunglink { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 12px 18px; background: var(--papier); transform: translateY(-160%); } .sprunglink:focus { transform: none; } .nav-link { font-size: 14px; text-decoration: none; padding: 6px 0; color: var(--stein); } section[id], main[id] { scroll-margin-top: 100px; } .kopfbereich { padding-top: clamp(48px, 9vh, 88px); } .kopfbereich .etikett { color: var(--tuerkis); } .knopf-voll { background: #126B91; border-color: #126B91; color: #fff; } .knopf-voll:hover { background: #0A566F; border-color: #0A566F; color: #fff; } .knopf { min-height: 48px; transition: background .2s var(--kurve), color .2s var(--kurve), border-color .2s var(--kurve), transform .2s var(--kurve); } .knopf:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 4px; } .knopf:active { transform: translateY(1px); } .feld-zeile { margin: 0; } .stueck .bild { border: 1px solid var(--kante); } .stueck .bild-app { padding: 12px; align-items: center; justify-content: center; } .bild-app img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 6px; } .fragen summary { transition: color .2s ease; } .fragen summary:hover, .fragen details[open] summary { color: var(--tuerkis); } .fragen summary::after { color: var(--stein); transition-duration: .2s; } .fuss .zeilen a { padding-block: 10px; } @media (hover: hover) and (pointer: fine) { .knopf:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .knopf:hover, .knopf:active { transform: none; } } /* =========================================================================== Rechtstexte =========================================================================== */ .rechtstext { padding-bottom: 16px; } .rechtstext h1 { margin-bottom: 8px; } .rechtstext h2 { font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -.4px; margin: 48px 0 12px; } .rechtstext h3 { font-size: 18px; margin: 28px 0 6px; } .rechtstext .vorspann { max-width: none; margin: 20px 0 8px; text-align: left; } .rechtstext ul { padding-left: 20px; margin: 0 0 16px; } .rechtstext li { margin-bottom: 8px; } .rechtstext code { font: 400 .92em ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; background: var(--papier); border: 1px solid var(--kante-zart); padding: 1px 6px; border-radius: 6px; } .rechtstext table { width: 100%; min-width: 30rem; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; } .rechtstext caption { text-align: left; color: var(--stein); font-size: 14px; padding-bottom: 10px; } .rechtstext th, .rechtstext td { text-align: left; vertical-align: top; font-weight: 400; padding: 12px 16px 12px 0; border-top: 1px solid var(--kante-zart); } .rechtstext tbody th { color: var(--tinte); } .rechtstext td { color: var(--stein); } .rechtstext thead th { border-top: 0; border-bottom: 1px solid var(--kante); font-size: 14px; font-weight: 500; color: var(--stein); padding-bottom: 10px; } .rechtstext td:last-child, .rechtstext th:last-child { padding-right: 0; } /* Wörter in Tabellen nie zerlegen (16. Oktober 2026, Giuseppes Foto: „K/a/m/er/a“). `.rechtstext` trägt weiter unten `overflow-wrap: anywhere` für lange Adressen im Fließtext. In einer Tabelle zählt das in die Mindestbreite: Jede Spalte darf dann auf einen Buchstaben schrumpfen, und die Spalte mit dem langen Text nimmt sich den Rest. Deshalb in den Zellen normal umbrechen und der ersten Spalte eine feste Breite geben; reicht der Platz nicht, rollt `.rollbar` seitlich. */ .rechtstext th, .rechtstext td { overflow-wrap: normal; word-break: normal; hyphens: manual; text-align: start; } .rechtstext tbody th, .rechtstext thead th:first-child { width: 11rem; min-width: 8rem; } /* Zwei Spalten passen auch aufs Telefon – dort nicht seitlich rollen lassen. */ @media (max-width: 560px) { .rechtstext table:not(:has(tr > :nth-child(3))) { min-width: 0; } .rechtstext table:not(:has(tr > :nth-child(3))) :is(tbody th, thead th:first-child) { width: 8rem; } } .rollbar { overflow-x: auto; } .merke { border-left: 1px solid var(--kante); padding: 4px 0 4px 20px; margin: 24px 0; color: var(--stein); } .merke strong { color: var(--tinte); font-weight: 500; } .zurueck { display: inline-block; margin-top: 40px; font-size: 16px; font-weight: 500; text-decoration: none; padding: 14px 24px; border-radius: var(--radius); background: var(--papier); border: 1px solid var(--kante); color: var(--tinte); transition: background .4s var(--kurve), color .4s var(--kurve); } .zurueck:hover { background: var(--tinte); color: var(--leinen); } /* =========================================================================== Formular – nur die Passwortseite =========================================================================== Die Seite hat als einzige der Website Eingabefelder. Sie bleiben bewusst schlicht: dieselbe Fläche wie eine Belegkachel, ein Strich als Kante, kein eigener Farbton. Ein Eingabefeld, das nach Formular aussieht, würde auf dieser Leinwand wie ein Fremdkörper wirken. Die Knöpfe erben `.knopf` von oben; hier steht nur, was ein