/* handy-test.css — TEMPORAER, nur fuer die Sichtabnahme. ========================================================================= Frage von Peter (08.09.2026): auf dem Handy statt des Signet-Fensters (Foto im offenen C des Auges) ein richtiges Bild probieren. Zwei Fassungen zum Vergleichen: 1 Fotoband randabfallend ueber die ganze Breite, Text darunter 2 das Signet-Fenster, wie heute Es gab zwischendurch eine dritte (Foto als Karte mit Rand); die ist gestrichen, die beiden verbliebenen heissen 1 und 2. NICHT gebaut: Text UEBER dem Bild. Auf 390 px muesste der Schleier fast die ganze Breite aufhellen und deckte das Foto damit zu — genau das ist beim Tablet hochkant schon durchgerechnet worden (Kommentar in stil.css, Abschnitt «Tablet hochkant»). Es waere die dritte Fassung eines bekannten Fehlschlags. DAS BILD BLEIBT GROSS. Peters Vorgabe vom 08.09.: Termin- und Telefonknopf sollen auf den ersten Bildschirm, aber nicht auf Kosten des Bildes. Der Platz kommt darum aus der Typografie, nicht aus dem Foto — die Einleitung ist enger gesetzt und die Abstaende sind gestrafft. Nur auf kurzen Handys (unter 704 px Hoehe, also iPhone SE/6/7/8) wird zusaetzlich das Bild kleiner, weil es dort sonst nicht aufgeht. Nachgemessen mit dem iframe-Rahmen — Headless-Chrome legt ohne ihn breiter aus als 390 px und misst dann Unsinn. Geladen wird die Datei nur, solange handy_wahl() etwas liefert: in Dietikon und nur bei suchmaschinen_erlaubt = 0. Mit Peters Entscheid faellt sie ersatzlos weg — samt handy_wahl(), handy_variante(), dem Schalter in kopf.php und dem data-handy-Attribut. Gewichtung: bausteine.css blendet unter 48rem das Buehnenbild aus und das Fenster ein (.hero--fenster .hero__bild = 0,2,0). Die Regeln hier tragen html[data-handy="…"] davor und liegen mit 0,3,1 klar darueber — sie haengen also nicht an der Ladereihenfolge. ========================================================================= */ /* Hoehe des Fotobands — unveraendert gegenueber der ersten Fassung. svh (kleinste Ansichtshoehe) statt vh: sonst rechnet der Browser mit der Hoehe OHNE seine Leisten und das Band waechst hinter die Adresszeile. */ :root { --band-hoehe: min(30svh, 260px); } @media (max-width: 47.999rem) { /* ---- Fassung 1: das Auge weicht dem Foto ---------------------------- */ html[data-handy="1"] .fenster { display: none; } /* Der Grund wird weiss: der zarte Verlauf war der Ersatz fuer das fehlende Foto. Steht das Foto da, braucht es ihn nicht mehr. */ html[data-handy="1"] .hero--fenster { background: var(--weiss); } /* Der Schleier gehoert zum Text UEBER dem Bild. Hier steht der Text darunter — bliebe er stehen, hellte er allein das Foto auf. */ html[data-handy="1"] .hero--fenster::after { display: none; } /* Die Buehne hat unten schon Luft; oben nimmt ihr das Band den Platz. */ html[data-handy="1"] .hero--fenster { min-height: 0; } /* Aus dem Hintergrundbild wird ein Band am oberen Rand — dieselbe Mechanik wie beim Tablet hochkant in stil.css, nur mit Handy-Massen. Das Foto laeuft in beide Seitenraender aus: auf 390 px zaehlt jeder Millimeter, und randabfallend wirkt es wie eine Titelseite, nicht wie ein Kopfbild aus einem Baukasten. */ html[data-handy="1"] .hero--fenster { padding-top: var(--band-hoehe); } html[data-handy="1"] .hero--fenster .hero__bild { display: block; position: absolute; inset: 0 0 auto 0; height: var(--band-hoehe); z-index: 0; /* Gerade Kante, oben wie unten. Die weiche Rundung war eine Idee von mir, nicht Peters Wunsch — er will das Foto voll bis zur Kante. */ overflow: hidden; } html[data-handy="1"] .hero--fenster .hero__bild img { width: 100%; height: 100%; object-fit: cover; /* Etwas unter die Mitte: oben im Buehnenbild steht leere Wand. Derselbe Wert wie beim Tablet hochkant. */ object-position: 50% 54%; } /* Der Text beginnt mit Abstand unter dem Band. */ html[data-handy="1"] .hero--fenster .hero__inhalt { padding-block: var(--s3) var(--s5); } /* ---- Fassung 2: das Signet-Fenster wie heute ------------------------ Das Auge behaelt seine 214 px aus dem Design-Kit. Es lag aber zwischen zwei Desktop-Innenabstaenden von je 48 px — allein die 72 px zuviel fehlten dem zweiten Knopf. */ html[data-handy="2"] .hero--fenster .hero__inhalt { padding-block: var(--s3) var(--s5); } /* ---- beide Fassungen: Einleitung enger, Abstaende gestrafft --------- Die Einleitung stand auf dem Handy in derselben Groesse wie auf dem Desktop und lief ueber vier Zeilen à 36 px. Enger gesetzt sind es dieselben Worte auf demselben Platz in vier Zeilen à 26 px. Es faellt kein Wort weg — das waere der falsche Weg, die Einleitung sagt, was die Praxis ist. */ html[data-handy] .hero--fenster .hero__titel { margin-bottom: var(--s3); } html[data-handy] .hero--fenster .hero__text { font-size: 1rem; line-height: 1.55; margin-bottom: var(--s4); } /* Die beiden Knoepfe ruecken zusammen. Nebeneinander gehen sie nicht: «Terminbuchung per Telefon» und die Nummer brauchen zusammen 358 px, auf dem 375er bleiben nach den Seitenraendern 327 px. */ html[data-handy] .hero--fenster .hero__ctas { gap: var(--s2); } } /* ---- Kurze Handys ------------------------------------------------------ Auf dem 375x667er iPhone (SE, 6/7/8) reicht auch die gekuerzte Fassung nicht ganz: der zweite Knopf lag noch ein paar Pixel unter der Kante. Statt alle Geraete gleich eng zu setzen, greift hier eine eigene Regel — grosse Handys behalten die grosszuegige Fassung. 44rem = 704 px Hoehe. Nachgemessen mit dem iframe-Rahmen: zweiter Knopf endet danach bei 654 statt 667/675/673, also mit Luft statt auf der Kante. */ @media (max-width: 47.999rem) and (max-height: 44rem) { :root { --band-hoehe: min(22svh, 190px); } html[data-handy="2"] .fenster { width: min(33vw, 140px); height: min(33vw, 140px); } html[data-handy] .hero--fenster .hero__text { margin-bottom: var(--s3); } } /* ---- Der Schalter ------------------------------------------------------ Drei Ziffern, klein und halb durchsichtig, damit sie das Urteil ueber die Buehne nicht stoeren. Ganz unten rechts: im Kopfbereich haette der Schalter verdeckt, worum es geht, und ueber den Knoepfen lag er auf dem Termin-Knopf. Solange die Buehne im Bild ist, blendet fuss.php die Aktionsleiste aus — die Ecke ist also frei. Sobald sie erscheint (also beim Scrollen), weicht der Schalter ihr aus, statt einen Knopf zu blockieren. Auf dem Desktop steht er ebenfalls, wirkt dort aber nichts: die Fassungen gelten nur unter 768 px. */ .handy-schalter { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 61; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .6); opacity: .62; transition: opacity .18s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .handy-schalter:hover, .handy-schalter:focus-within { opacity: 1; } /* Steht die Aktionsleiste, gehoert die Ecke ihr: der Schalter verschwindet, damit er keinen Knopf zudeckt. Er wird nur oben gebraucht, bei der Buehne — und dort ist die Leiste eingefahren (siehe fuss.php). */ body:has(.aktionsleiste:not(.aktionsleiste--verborgen)) .handy-schalter { opacity: 0; pointer-events: none; } .handy-schalter a { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1; color: #4a6070; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(20, 80, 111, .18); } .handy-schalter a:hover { color: var(--tief, #14506f); } .handy-schalter a[aria-current="true"] { background: var(--tief, #14506f); color: #fff; box-shadow: none; } .handy-schalter a:focus-visible { outline: 2px solid var(--tief, #14506f); outline-offset: 1px; } /* Beim Drucken hat der Schalter nichts verloren. */ @media print { .handy-schalter { display: none !important; } }