/* ============================================================ HANDY-FASSUNG · 17.08.2026 Maßstab: eine ältere Person soll ohne Nachdenken und ohne Zoomen spenden können. Gemessene Ausgangslage vor diesem Umbau: 76 von 97 Textstellen unter 16 px 10 Tippziele kleiner als 44 px (u. a. „Jetzt spenden" nur 37 px hoch, der Transparenz-Regler 6 px) 5,5 Bildschirme Scrollen bis zum ersten wählbaren Betrag Diese Datei kommt als LETZTE im Kopf, damit sie überschreiben darf. ============================================================ */ @media (max-width: 760px) { /* ---- 1. Schrift: nichts unter 16 px ---- Unter 16 px zoomen Browser beim Antippen von Feldern automatisch hinein, und für ältere Augen ist es schlicht zu klein. WICHTIG: Die Wurzelgröße anheben, nicht die von body. Fast alle Schriftgrößen der Seite stehen in `rem`, und `rem` rechnet gegen , nicht gegen . Ein größerer body-Wert ließ deshalb 52 Textstellen unverändert klein. Über die Wurzel wächst alles proportional mit — Verhältnisse und Rhythmus bleiben erhalten. */ html { font-size: 18px; } body { line-height: 1.65; } p, li, dd, dt, label, figcaption, small, td, th, input, select, textarea, .lead, .kurz, .zweck-satz, .pk-fuss, .rechner-satz, .rechner-fuss, .feed-note, .videoblock-hinweis, .hero2-bu, .zweck-stand, .hp, .zweck-fakten li, .zweck-fakten span, .vo-titel, .film-text, .dn-note { font-size: 1rem; } /* Beschreibende Zeilen unter einer Überschrift sind KEIN Kleingedrucktes — sie erklären, was der Knopf tut, und wurden bei 0,74 rem zu klein. */ .hero2-weg span, .trustbar span, .zweck-fakten span, .dn-amt span, .zweck-schnell small, .proof .hp, .ch-kicker, .film-note, .note, .privacy-note, .src, .zweck-natur, .rechner-label { font-size: .95rem; } /* Nur echte Nebensachen dürfen kleiner sein — und auch die nicht winzig. Gemessen: bei 0,82 rem lagen zwölf Stellen bei 14,8 px, also spürbar unter der Lesegrenze. Mit 0,9 rem sind es 16,2 px. */ .eyebrow, .zweck-marke, .pk-kicker, .sp-zaehler, .rechner-marken, .vo-dauer, .demo-band { font-size: .9rem; letter-spacing: .1em; } /* Alles, was mit 0,88 rem knapp unter 16 px landete (15,84), auf 0,92 rem: die 0,16 px machen keinen optischen Unterschied, aber sie entscheiden, ob der Browser beim Antippen eines Feldes hineinzoomt. */ .kg-text, .zweck-fakten li, .feed p, .faq p, .path span, .seg .info { font-size: .92rem; } h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.12; } h2 { font-size: clamp(1.6rem, 6.8vw, 2.1rem); line-height: 1.18; } h3 { font-size: 1.3rem; } .lead { font-size: 1.06rem; line-height: 1.6; } /* ---- 2. Tippflächen: mindestens 48 px hoch, klar getrennt ---- */ .btn, .btn-sm, .btn-line, .dn-go, .zweck-los, .rechner-los, .leiste2 a, .zweckwahl button, .dn-amt, .zweck-schnell button, .dn-toggle button, .sp-toggle button, .vo-start, .hero2-start, .hero2-weg, .dn-copy { min-height: 52px; padding-top: 14px; padding-bottom: 14px; } .dn-other input, .rechner-steuer input[type="number"], select { min-height: 52px; font-size: 1.05rem; } /* Abstand zwischen Tippzielen, damit man nicht danebengreift */ .dn-grid, .zweck-schnell { gap: 12px; } /* Gemessen 17.08.: Das Spendenkästchen war 439 px breit bei 375 px Fenster. Ursache ist die Voreinstellung `min-width: auto` bei Grid- und Flex-Kindern — sie schrumpfen nicht unter die Breite ihres Textes. „1 m² Gebetsfläche" und „ein ganzer Bauabschnitt" haben die Spalten damit aufgeblasen. `min-width: 0` erlaubt das Schrumpfen, der Umbruch fängt die längsten Wörter ab. */ .donate, .entscheidung, .dn-grid { min-width: 0; max-width: 100%; } .dn-amt { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .dn-amt span { display: block; line-height: 1.3; } .hero2-wege { gap: 12px; } .zweckwahl { gap: 12px; } /* Die Kopfzeile: Logo und Spendenknopf großzügiger */ .topbar .logo { min-height: 48px; display: flex; align-items: center; } .topbar .btn-sm { min-height: 48px; padding: 0 20px; display: flex; align-items: center; } /* Der Demo-Hinweis saß in der rechten oberen Ecke und lag damit GENAU über dem Spendenknopf — der wichtigste Knopf der Seite war halb verdeckt. Auf dem Handy läuft er jetzt als eigener Streifen über die volle Breite, die Kopfzeile rückt darunter. */ .demo-band { position: fixed; top: 0; left: 0; right: 0; width: 100%; text-align: center; padding: 5px 10px; border-radius: 0; z-index: 90; } .topnav { top: 30px; } body { padding-top: 30px; } /* Rechtslinks im Fuß sind Pflichtangaben — sie müssen treffbar sein */ .foot a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; } /* Textlinks, die wie Knöpfe benutzt werden, brauchen eine Tippfläche */ .zweck-mehr, .rechner-los, .feed-note a { display: block; min-height: 48px; line-height: 48px; } /* Ankreuzfelder waren 13 px breit — mit dem Finger nicht zu treffen. `appearance: none` ist nötig, weil das Betriebssystem-Kästchen sonst seine eigene feste Größe behält und die Angabe ignoriert. */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; flex: none; border: 2px solid var(--line); border-radius: 6px; background: #fff; display: inline-grid; place-content: center; cursor: pointer; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]::before, input[type="radio"]::before { content: ""; width: 14px; height: 14px; transform: scale(0); transition: transform .15s ease; background: var(--palm); border-radius: 3px; } input[type="radio"]::before { border-radius: 50%; } input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--palm); } input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); } /* ---- 3. Der Regler war 6 px hoch — mit dem Daumen nicht zu fassen ---- Die Schiene selbst darf schmal bleiben, aber sie braucht eine hohe Trefferzone drumherum; sonst rutscht man beim Ziehen heraus. */ .rechner-regler { height: 14px; border-radius: 7px; padding: 18px 0; background-clip: content-box; box-sizing: content-box; } .rechner-regler::-webkit-slider-thumb { width: 40px; height: 40px; border-width: 4px; } .rechner-regler::-moz-range-thumb { width: 40px; height: 40px; border-width: 4px; } .rechner-marken { margin-top: .8rem; } /* ---- 3b. DER HERO WIRD AM HANDY GETEILT ---- Zweimal habe ich versucht, Schrift und Wendel übereinanderzulegen und über Schleier und Helligkeit auszugleichen — beide Male blieb die Spirale zu dunkel. Der Grund ist grundsätzlich: Auf 375 px Breite belegt der Text die ganze Fläche, es gibt kein „daneben". Solange beides übereinanderliegt, muss immer eines leiden. Deshalb hier getrennt: oben die Botschaft auf ruhigem Grund, darunter die Wendel als eigener Streifen OHNE Schleier — in voller Farbe und Helligkeit, so wie sie gedacht ist. */ .hero2 { display: block; min-height: 0; padding: 1.2rem 0 0; } /* Der Inhalt wird zum Flex-Stapel, damit sich die Bühne per `order` ZWISCHEN Überschrift und Erklärtext schieben kann. */ .hero2-inhalt { display: flex; flex-direction: column; position: relative; z-index: 3; padding-bottom: 1.2rem; } .hero2-kopf { order: 1; } .hero2-rest { order: 3; padding-top: 1.2rem; } /* Die Bühne verlässt den Hintergrund und wird zum eigenen Streifen — bündig über die volle Breite, ohne Schleier. */ .hero2 .sp-stage { order: 2; position: relative; inset: auto; width: 100vw; margin-left: calc(50% - 50vw); height: 34vh; min-height: 230px; max-height: 300px; } /* Die Überschrift etwas kompakter, damit Kopf UND Streifen zusammen in den ersten Bildschirm passen. */ .hero2-kopf h1 { font-size: clamp(1.85rem, 7.6vw, 2.3rem); margin-bottom: 0; } .hero2-kopf .bism { margin-bottom: .3rem; } /* Kein Schleier mehr über den Bildern — er hat dort nichts mehr zu verdecken, weil kein Text darüberliegt. */ .hero2-schleier { display: none; } .hero2-text h1, .hero2-text .usp, .hero2-text .bism, .hero2-text .eyebrow, .hero2-frage { text-shadow: none; } .hero2-weiter { display: none; } /* Ein schmaler Hinweis am Fuß des Streifens */ .hero2 .sp-stage::after { content: "Antippen färbt ein Bild · Wischen dreht"; position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 500 .72rem var(--mono); letter-spacing: .1em; color: rgba(250, 247, 240, .55); pointer-events: none; } /* ---- 4. Kürzerer Weg bis zum Betrag ---- Der gepinnte Hero fraß allein 1,6 Bildschirme. Auf dem Handy bleibt der Effekt, aber deutlich kürzer — der Wert wird in spirale.js gesetzt; hier wird nur der Rest gestrafft. */ .section { padding-top: 2.4rem; padding-bottom: 2.4rem; } .videoblock { padding: 2.4rem 0; } .weiche-kopf { margin-bottom: 1.6rem; } /* ---- 5. Weniger gleichzeitig, klarere Reihenfolge ---- */ .trustbar { grid-template-columns: 1fr 1fr; gap: 14px; } .rechner { padding: 1.2rem; gap: 1.4rem; } .rechner-zahl { font-size: 2.6rem; } .rechner-teile li { padding: .7rem 0; } /* Die Aufschlüsselung ist auf dem Handy zu viel auf einmal: erst die drei größten Posten, der Rest auf Wunsch. */ .rechner-teile li:nth-child(n+4) { display: none; } .rechner-teile.alle li { display: grid; } .rechner-mehr { display: block; width: 100%; min-height: 48px; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; font: 500 .95rem var(--sans); color: var(--deep); cursor: pointer; } /* ---- 6. Vor-Ort-Videos: eines pro Zeile, groß genug zum Tippen ---- */ .vorort { grid-template-columns: 1fr; gap: 14px; } .vo { max-width: 320px; margin: 0 auto; } .vo-start i { width: 68px; height: 68px; } .vo-titel { font-size: .92rem; } /* ---- 7. Archiv-Raster: größere Kacheln statt vieler kleiner ---- */ .archiv { grid-template-columns: 1fr 1fr; gap: 10px; } .archiv figcaption { opacity: 1; font-size: .8rem; } /* ---- 8. Die untere Leiste ist der wichtigste Knopf der Seite ---- */ .leiste2 { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); gap: 10px; } .leiste2 a { font-size: 1rem; border-radius: 12px; } body { padding-bottom: 5.4rem; } /* ---- 9. Fußzeile und Formulare ---- */ .dn-row { grid-template-columns: 1fr; gap: 12px; } .dn-note { font-size: .95rem; line-height: 1.5; } /* Diese Zeile setzte 24 px und überschrieb die 28er-Regel weiter oben —`n spezifischer gewinnt. Die Größe steht jetzt nur noch an EINER Stelle. */ } /* Sehr schmale Geräte */ @media (max-width: 380px) { .dn-grid { grid-template-columns: 1fr 1fr; } .zweck-schnell { grid-template-columns: 1fr; } .trustbar { grid-template-columns: 1fr; } }