/* 2Minds - Gestaltungsgrundlage * ============================================================================ * * Das Konzept gibt den Ton vor, nicht die Mode: "Keine Social-Media-App, * sondern ein ruhiger Begleiter mit klarer Struktur." Und unter Safety by * Design: "Grosse Schaltflaechen, wenige Ebenen, kein hektisches Design." * * DREI ENTSCHEIDUNGEN, die daraus folgen und die man kennen muss, bevor man * hier etwas aendert: * * 1. KEIN KLINIKBLAU. Das naheliegende Kaltblau fuer psychische Gesundheit * sieht aus wie ein Spital - und genau das ist die Assoziation, die dieses * Produkt NICHT will. Es ergaenzt eine Behandlung, es ist keine. Der Akzent * ist darum ein gedaempftes Petrol: ruhig, aber nicht steril. * * 2. WENIG SAETTIGUNG, VIEL ABSTAND. Wer die App in einer angespannten Lage * oeffnet, soll nicht angeschrien werden. Farbe traegt hier nie allein eine * Aussage - daneben steht immer ein Wort. * * 3. GROSSE ZIELE, IMMER. 48 Pixel statt der ueblichen 44. Konzentrations- und * Aufmerksamkeitsstoerungen gehoeren zum Krankheitsbild; ein Knopf, den man * dreimal treffen muss, ist hier kein Schoenheitsfehler. * * ============================================================================ * ZWEI FALLEN, DIE IM SCHWESTERPROJEKT 2Rap ZUGESCHLAGEN HABEN * und die hier von Anfang an vermieden sind: * * A) `html, body { height: 100% }` zusammen mit `overflow-x: hidden` macht * beide zu Rollbereichen von exakt Fensterhoehe. Der Inhalt rollt dann im * body, waehrend leer bleibt - und weil ein Wisch den * Ansichtsbereich bewegt, laesst sich die Seite auf dem Handy MIT EINEM * FINGER NICHT MEHR ROLLEN. Am Rechner faellt es nie auf. Darum steht hier * von Anfang an min-height. * * B) Eine Abstandsskala, die bei 8px anfaengt, deckt die Haelfte der * tatsaechlichen Abstaende nicht ab. In 2Rap lagen 554 Werte unterhalb der * kleinsten Stufe, 236 davon genau auf 4px. Darum gibt es hier --luft-haar. * ========================================================================== */ :root { color-scheme: light; /* ---- Flaechen ---------------------------------------------------------- */ --grund: #f7f6f3; /* Seitengrund, warm statt weiss */ --flaeche: #ffffff; /* Karten */ --flaeche-tief: #efeeea; /* Eingesenktes, Balken */ --rand: #ddd9d2; --rand-stark: #b9b3a9; /* ---- Schrift ----------------------------------------------------------- */ --text: #1c1a17; --text-zweit: #4a463f; --text-still: #6e685f; /* ---- Akzent: gedaempftes Petrol ---------------------------------------- */ --akzent: #1d6b6b; --akzent-tinte: #ffffff; --akzent-sanft: #e4efee; /* ---- Zustaende --------------------------------------------------------- */ /* Alle Tinten sind ABGEDUNKELT, nicht die reine Farbe. Die reine Farbe auf hellem Grund faellt sonst unter 4,5:1 - in 2Rap ist genau das einmal passiert, ausgerechnet bei der Farbe, in der "Kritisch" stand. */ --gut: #2e7d32; --gut-tinte: #1b5e20; --hinweis: #b26a00; --hinweis-tinte: #7a4800; --ernst: #b3261e; --ernst-tinte: #7f1d18; /* ---- Schriftskala ------------------------------------------------------ */ /* Sechs Stufen. Wer eine waehlt, waehlt damit auch den Abstand zur naechsten - das ist der ganze Sinn einer Skala. */ --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; /* Grundgroesse. Bewusst nicht kleiner: siehe unten. */ --fs-lg: 1.25rem; --fs-xl: 1.6rem; --fs-2xl: 2.1rem; --fs-titel: clamp(2rem, 5vw, 3.2rem); /* ---- Abstaende --------------------------------------------------------- */ --luft-haar: 4px; /* Symbol zu Wort, Zeile zu Zeile in einer Kachel */ --luft-eng: 8px; --luft-liste: 12px; --luft-block: 20px; --luft-abschnitt: 32px; --luft-kapitel: 56px; /* ---- Formen ------------------------------------------------------------ */ --radius-klein: 8px; --radius: 14px; --radius-gross: 22px; --schatten: 0 1px 2px rgba(28,26,23,.05), 0 4px 16px rgba(28,26,23,.05); /* ---- Bewegung ---------------------------------------------------------- */ --dauer: 180ms; --kurve: cubic-bezier(.2, 0, 0, 1); /* ---- Bedienung --------------------------------------------------------- */ --ziel-min: 48px; --spalte: 720px; /* Lesebreite. Laenger wird kein Satz gut gelesen. */ } :root[data-farbe="dunkel"] { color-scheme: dark; --grund: #14140f; --flaeche: #1e1e19; --flaeche-tief: #14140f; --rand: #35342c; --rand-stark: #4c4a40; --text: #f0eee8; --text-zweit: #c8c4ba; --text-still: #9b968a; --akzent: #64b5b0; --akzent-tinte: #10201f; --akzent-sanft: #1a2c2b; /* Im Dunkelmodus ist der Text hell und die Flaeche dunkel. Jede reine Farbe ist heller als die Flaeche - abdunkeln waere hier aufhellen. Darum die Tinten aufhellen statt abdunkeln. */ --gut-tinte: #7cc47f; --hinweis-tinte: #e0a34a; --ernst-tinte: #e88b84; --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); } @media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) { color-scheme: dark; --grund: #14140f; --flaeche: #1e1e19; --flaeche-tief: #14140f; --rand: #35342c; --rand-stark: #4c4a40; --text: #f0eee8; --text-zweit: #c8c4ba; --text-still: #9b968a; --akzent: #64b5b0; --akzent-tinte: #10201f; --akzent-sanft: #1a2c2b; --gut-tinte: #7cc47f; --hinweis-tinte: #e0a34a; --ernst-tinte: #e88b84; --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); } } /* ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* SIEHE FALLE A OBEN: min-height, niemals height. Zusammen mit overflow-x: hidden macht height:100% den zum Rollbereich und zu einem leeren daneben - und dann rollt auf dem Handy mit einem Finger gar nichts mehr. */ html, body { min-height: 100%; margin: 0; overflow-x: hidden; max-width: 100%; } html { -webkit-text-size-adjust: 100%; } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* 16px als Grundgroesse, nicht 15. Zwei Gruende: Unter 16px zoomt Safari auf dem iPhone bei jeder Eingabe automatisch hinein, und die Zielgruppe liest nicht bei besten Bedingungen. */ font-size: var(--fs-md); line-height: 1.6; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; } img, video, svg { max-width: 100%; height: auto; } h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0; } a { color: var(--akzent); text-underline-offset: 3px; } /* Sichtbarer Fokus, immer. Wer die App mit der Tastatur oder einer Hilfstechnik bedient, muss sehen, wo er steht - das ist keine Option. */ :focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: var(--radius-klein); } /* Bewegung ist hier Beiwerk. Wer sie abgestellt hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- Bausteine */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--luft-eng); min-height: var(--ziel-min); padding: 0 var(--luft-block); border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve); } .knopf:hover { background: var(--flaeche-tief); } .knopf.wichtig { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); } .knopf.wichtig:hover { filter: brightness(1.08); } .karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross); padding: var(--luft-block); box-shadow: var(--schatten); } .still { color: var(--text-still); } .zweit { color: var(--text-zweit); } .klein { font-size: var(--fs-sm); } /* Nur fuer Hilfstechnik sichtbar. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }