/* ERZEUGT AUS probe/wald.html - NICHT VON HAND AENDERN. */ body{margin:0;overflow:hidden;background:#1b2416; font:13px/1.5 "Comic Sans MS","Comic Sans",cursive;color:#e8dfc8} canvas{display:block} /* DIE BUEHNE LIEGT FEST HINTER ALLEM. Auf der Probeseite ist der Body leer, da faellt es nicht auf. Im Plugin steht WordPress-Inhalt darin - eine mitfliessende Leinwand landet dann irgendwo mittendrin. Gemessen: Sie sass 55 Bildpunkte zu tief, genau die Hoehe des Kopfbands. */ /* UEBER DIE BAEUME, NICHT DARUNTER. Die Baeume des Baum-Plugins liegen bei z-index 1 - fest am Bildschirmrand, einer links, einer rechts. Meine Buehne lag bei 0, also darunter, und weil sie ihren eigenen Wald mitbrachte, war von den Baeumen nichts mehr zu sehen: ein Vorhang aus Aesten quer ueber das Bild. Der Kraeuterwald macht es richtig herum - seine Szene liegt bei z-index 30 UEBER den Baeumen und ist durchsichtig. */ #hand-buehne{position:fixed;inset:0;z-index:2} /* ── DIE REGLERLEISTE ────────────────────────────────────── Dasselbe Verfahren wie beim Kräuterwald: Was man nur SEHEN kann, gehört an einen Regler. Gordon stellt ein, danach wandern seine Werte in den Code. */ label{display:flex;align-items:center;gap:.5rem;margin:.28rem 0} label span{flex:0 0 5.4rem;font-size:12px} output{flex:0 0 3.4rem;text-align:right;font:11px monospace; background:#2c3626;border-radius:4px;padding:1px 4px} .knopf{display:block;width:100%;margin:.5rem 0;padding:.45rem; background:#4a5b3c;color:#f6ecd8;border:0;border-radius:6px; font:inherit;cursor:pointer} .knopf:hover{background:#5b6e4a} /* ── KOPF UND FUSS ───────────────────────────────────────── Oben der Name, unten der Vermerk - beides mittig, wie beim Kraeuterwald. Die Reihe mit den Linien sitzt dazwischen und musste dafuer ein Stueck hoeher. */ /* DIE ADMINLEISTE LIEGT DARUEBER - ABER NUR FUER ANGEMELDETE. Das Band ist fest am Bildschirmrand (position:fixed), und die schwarze WordPress-Leiste ist es auch. Fuer Besucher gibt es sie gar nicht, deshalb faellt es beim Ausprobieren nie auf - Gordon hat sich dafuer extra abgemeldet und wieder angemeldet. Dieselbe Falle wie beim Schliessen-Kreuz im Kartenlegen. Unter 783 Punkten Breite ist die Leiste 46 statt 32 hoch. */ body.admin-bar #hand-kopf{top:32px} @media screen and (max-width:782px){ body.admin-bar #hand-kopf{top:46px} } /* FLACH. Gordon: "das Kopfband ist zu hoch." Vorher nahm es 55 Bildpunkte - bei einer Seite, auf der es um das Bild geht, ist das viel. Jetzt sind es 38: kleinere Schrift, weniger Luft, und die Unterzeile sitzt direkt darunter statt auf eigener Hoehe. */ #hand-kopf{position:fixed;left:0;right:0;top:0;z-index:42; text-align:center;padding:.3rem 1rem .28rem; pointer-events:none;line-height:1.15; text-shadow:0 2px 10px rgba(0,0,0,.85)} #hand-kopf b{font-size:1.15rem;letter-spacing:.02em;color:#f6ecd8; font-weight:700} #hand-kopf i{display:block;font-style:normal;font-size:.62rem; letter-spacing:.2em;text-transform:uppercase; color:#cfe0b4;margin-top:0} /* ── ALLES UNTEN IN EINER SPALTE ─────────────────────────── Vorher waren es drei einzeln gesetzte Leisten: die Linienknoepfe bei 8rem, "Die eigene Hand" bei 4.4rem, der Vermerk ganz unten. Am Schreibtisch ging das auf - auf dem Telefon brechen die acht Linienknoepfe auf drei Reihen um und werden hoeher als ihr Abstand. Gemessen bei 375 Bildpunkten Breite: Linienreihe 2068 - 2131 Die eigene Hand 2087 - 2133 ueberlappt Copyright 2094 - 2121 liegt mittendrin Eine Spalte mit Abstand kann das nicht: Was hoeher wird, schiebt das darunter nach unten, statt darauf zu liegen. */ #hand-unten{position:fixed;left:0;right:0;bottom:0;z-index:43; display:flex;flex-direction:column;align-items:center; gap:.5rem;padding:0 8px .3rem;pointer-events:none} #hand-unten > *{pointer-events:auto} /* Der Vermerk ist jetzt anklickbar - also darf er Zeiger annehmen. pointer-events:none stand hier, solange nur Text drinstand; mit einem Ausgang darin waere der Ausgang tot. */ #hand-vermerk a{color:inherit;text-decoration:none;pointer-events:auto} #hand-vermerk a:hover{text-decoration:underline} a.smhl-knopf{text-decoration:none;display:inline-flex; align-items:center} a.smhl-knopf:hover{text-decoration:none} #hand-vermerk{position:static;z-index:42; display:flex;justify-content:center;align-items:center; gap:.9rem;flex-wrap:nowrap; padding:.3rem 1rem .3rem;font-size:.72rem;color:#cfe0b4; text-shadow:0 1px 6px rgba(0,0,0,.9);pointer-events:none} /* ── DIE EIGENE HAND ─────────────────────────────────────── Ein echtes mit accept="image/*". Auf dem Handy bietet das von selbst Kamera ODER Galerie an, auf dem Rechner den Dateiwaehler. Kein capture= - das WUERDE die Galerie wegnehmen und nur noch die Kamera erlauben. */ #hand-eigene{position:static;display:flex;align-items:center; gap:.55rem;background:rgba(24,30,20,.72); padding:.4rem .8rem;border-radius:999px; backdrop-filter:blur(4px)} #hand-eigene span{font-size:.8rem;color:#e8dfc8} /* RUND, wie alle Knoepfe im Haus. Gordon: "warum sind die alle wieder eckig? Die gehoeren rund." Der eine hier hatte 7px, die Linienknoepfe weiter unten ebenfalls - alle uebrigen im Plugin haben schon 999px. Drei verschiedene Ecken auf einer Seite sieht nach Zufall aus. */ /* Der Dateiwaehler sieht aus wie jeder andere Knopf. */ #hand-eigene label{display:inline-block;margin:0;cursor:pointer; border:1px solid #b79a48;border-radius:999px; background:linear-gradient(180deg,#fdf8ec 0%,#f0e5c9 100%); color:#23361f;padding:.32rem .9rem; font:.85rem "Comic Sans MS",cursive; transition:background .2s ease,color .2s ease} #hand-eigene label:hover{background:#4f6f52;background-image:none; color:#f3efe2} #hand-eigene label:hover{background:#7d9760} #hand-eigene input{display:none} /* ── EINSCHWEBEN VON UNTEN ───────────────────────────────── Gordon: nicht viel Animation, Hauptsache die Hand kommt hoch. Die Knoepfe kommen mit, damit nicht erst alles fertig dasteht und dann die Hand nachtroedelt. prefers-reduced-motion respektiert: Wer Bewegung abgestellt hat, bekommt alles sofort. */ #hand-eigene,#hand-knopfreihe{ opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.3,1)} #hand-eigene{transform:translateY(180%)} #hand-knopfreihe{transform:translateY(220%)} #hand-eigene.da,#hand-knopfreihe.da{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ #hand-eigene,#hand-knopfreihe{transition:none;opacity:1;transform:translateY(0)} } /* ── FENSTER IM HAUSMUSTER ───────────────────────────────── Wie beim Kartenlegen: Das Fenster traegt Schleier und Unschaerfe SELBST. Ein eigenes Schleier-Element mit backdrop-filter darin verliert in Firefox alles, was darueber liegt. */ .smhl-fenster{position:fixed;inset:0;z-index:70;display:none; background:rgba(18,24,14,.62);backdrop-filter:blur(7px); overflow-y:auto;padding:0 16px} .smhl-fenster.auf{display:block} /* box-sizing: sonst kommen die 30px Innenmass links und rechts ZUSAETZLICH zur Breite dazu - der Kasten ist 60px zu breit und die ganze Seite bekommt einen Querbalken. */ .smhl-kasten{position:relative;box-sizing:border-box; width:min(760px,calc(100% - 32px)); margin:8vh auto 28px;padding:10px 30px 30px;border-radius:16px; background:#fffdf8;border:1px solid #e3d7bd;color:#2a2114; box-shadow:0 30px 70px -28px rgba(0,0,0,.75);text-align:left} .smhl-kasten h3{margin:14px 60px 12px 0;font-size:1.32rem; line-height:1.25;color:#3b2b1c} /* Laenglich, kein runder Klecks - und ohne die Sternchen, die das Theme sonst an jeden Knopf haengt. */ .smhl-zu::before,.smhl-zu::after{content:none !important;display:none !important} .smhl-zu{position:sticky;top:10px;float:right;z-index:2; display:flex;align-items:center;justify-content:center; width:54px;height:34px;padding:0;margin:0; border:1px solid #b79a48;border-radius:999px; background:linear-gradient(180deg,#fdf8ec 0%,#f0e5c9 100%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 8px -2px rgba(0,0,0,.4); color:#23361f;font:1.25rem/1 "Comic Sans MS",cursive;cursor:pointer; transition:background .2s ease,color .2s ease} .smhl-zu:hover{background:#4f6f52;background-image:none;color:#f3efe2} /* Das kleine Lade-Fenster - mittig, klein, mehr nicht. */ #hand-laden .smhl-kasten{width:min(360px,calc(100% - 40px)); margin:32vh auto;text-align:center;padding:26px 24px} #hand-laden .smhl-kasten p{margin:.5rem 0 0;font-size:.95rem;color:#6b5a42} .smhl-punkte::after{content:'';animation:smhlPunkte 1.4s steps(4,end) infinite} @keyframes smhlPunkte{0%{content:''}25%{content:'.'} 50%{content:'..'}75%{content:'...'}} /* ── DIE LUPE ────────────────────────────────────────────── Zum Einstellen der Anfasser wird das Blatt gross und FLACH gezeigt, nicht als schraege Flaeche im Raum. Auf einer gekippten Textur trifft man die Punkte nicht - das ist keine Frage des Geschmacks, sondern der Genauigkeit. */ #hand-lupe{position:fixed;inset:0;z-index:65;display:none; background:rgba(16,22,13,.88);backdrop-filter:blur(4px)} /* Angemeldet sitzt oben die WordPress-Leiste. Sie verschluckt nichts - sie liegt darueber, und die oberste Knopfreihe der Lupe lag darunter. Also faengt die Lupe darunter an. */ body.admin-bar #hand-lupe, body.admin-bar .smhl-fenster{top:32px} @media screen and (max-width:782px){ body.admin-bar #hand-lupe, body.admin-bar .smhl-fenster{top:46px} } #hand-lupe.auf{display:flex;flex-direction:column;align-items:center; overflow-y:auto} /* flex:0 0 auto - NICHT wachsen lassen. Mit flex:1 1 auto streckt die Spalte das Blatt in die Hoehe, die Breite bleibt stehen, und das Foto ist verzerrt. Auf einem verzerrten Bild sitzt jeder Anfasser falsch. */ #hand-lupeBild{flex:0 0 auto;margin:6px 0; touch-action:none;cursor:grab;border-radius:8px; box-shadow:0 18px 50px -16px rgba(0,0,0,.8)} #hand-lupeKopf,#lupeFuss{display:flex;gap:8px;flex-wrap:wrap; justify-content:center;align-items:center;padding:8px; max-width:96vw} .smhl-knopf{border:1px solid #b79a48;border-radius:999px; background:linear-gradient(180deg,#fdf8ec 0%,#f0e5c9 100%); color:#23361f;font:.85rem "Comic Sans MS",cursive; padding:.4rem 1rem;cursor:pointer} .smhl-knopf:hover{background:#4f6f52;background-image:none;color:#f3efe2} .smhl-knopf.dran{background:#4f6f52;background-image:none;color:#f3efe2} /* DIE LINIENKNOEPFE TRAGEN IHRE EIGENE FARBE. Gordon: "Kannst du nicht das Innenleben von den Buttons leicht pastellfarben in den Farben machen, was die Linien sind?" Ja - und es spart eine Erklaerung: Wer den blassroten Knopf drueckt, sieht dieselbe rote Linie auf seiner Hand. Der Ton kommt als --ton vom Skript, damit die Farben an EINER Stelle stehen (linien.json) und nicht doppelt im Stil. */ .smhl-knopf.linie{background:var(--ton,#f2e6cd);background-image:none; color:#1c1c1c;border-color:var(--rand,#b79a48)} .smhl-knopf.linie.dran{background:var(--tonSatt,#4f6f52); color:#1c1c1c;font-weight:700} /* UNKLAR UND LINIE ZUSAMMEN. Ohne diese Regel loeschten sich die beiden aus: .unklar setzt einen Verlauf als background, .linie setzt danach background-image:none - uebrig blieb die Farbe aus dem Verlaufs-Kuerzel, und die ist durchsichtig. Der Raszetten- Knopf war glasklar. Wieder die Lehre von vorhin: Zwei Klassen zusammen brauchen ihre eigene Regel, nicht die Reihenfolge. */ .smhl-knopf.linie.unklar{background:var(--ton,#f2e6cd); background-image:none;border-color:#b8642e} /* Beim Darueberfahren gruen wie jeder andere Knopf im Haus. */ .smhl-knopf.linie:hover,.smhl-knopf.linie:focus{ background:#4f6f52;background-image:none;color:#f3efe2; border-color:#2f4434} /* WAS SITZT UND WAS NICHT - direkt am Knopf. Gordon: "dann muss man doch sehen, dass die anderen schon erledigt sind. An den Button dran. Nur dass die eine noch mit einem Fragezeichen steht." Genau: Ein Haken an allem, was sitzt, ein Fragezeichen an dem, was offen ist. Dann sieht man mit einem Blick, wie weit man ist, statt es aus einem Satz herauslesen zu muessen. */ .smhl-knopf.sitzt::before{content:'✓ ';color:#4f6f52;font-weight:700} .smhl-knopf.dran.sitzt::before{color:#cfe8bd} .smhl-knopf.unklar{border-color:#b8642e; background:linear-gradient(180deg,#fdf1e4 0%,#f3dcc4 100%)} .smhl-knopf.unklar::before{content:'? ';color:#b8642e;font-weight:700} .smhl-knopf.fertig::before{content:'✓ ';color:#4f6f52;font-weight:700} .smhl-knopf.unklar.dran{background:#4f6f52;background-image:none; color:#f3efe2;border-color:#e0a06a} /* DIE GEZEICHNETE HAND NEBEN DEM FOTO. Gordon: "Der das noch nie gemacht hat, der weiss noch gar nicht, was das fuer Linien sind. Das weiss doch keiner." Stimmt. Acht Knoepfe mit Namen sind keine Anleitung. Wer seine Herzlinie suchen soll, muss sehen, wo eine Herzlinie ueberhaupt laeuft - und das zeigt man, man erklaert es nicht. */ #hand-hilfe{display:flex;gap:14px;align-items:flex-start; justify-content:center;max-width:min(96vw,700px); margin:4px auto 2px;padding:8px 12px;border-radius:14px; background:rgba(24,30,20,.55);backdrop-filter:blur(4px)} /* DIE ZEIGELUPE. Gordon: "es kommen keine Vergroesserungen, wenn man mit der Maus ueber die Hand faehrt." Stimmt - die Zeichnung steht auf einem schraegen Blatt im Raum, da hilft Zoomen des Browsers nicht. Also schwebt beim Darueberfahren eine grosse Fassung neben dem Zeiger. pointer-events bleibt aus, sonst faengt sie den Zeiger, verschwindet und kommt wieder - ein Flackern. */ #hand-zeigelupe{position:fixed;z-index:80;width:300px;display:none; pointer-events:none;background:#f4ebd6;border:3px solid #6d3a1c; border-radius:12px;padding:8px;box-shadow:0 8px 22px rgba(0,0,0,.5)} #hand-lupeMitte{display:flex;align-items:stretch;gap:6px; justify-content:center;max-width:100vw} .hand-reglerspalte{display:flex;flex-direction:column;align-items:center; gap:6px;padding:4px 0;color:#e8dfc8;font-size:15px} /* Senkrechte Regler. writing-mode ist der Weg, den heutige Browser verstehen; -webkit-appearance bleibt fuer aeltere dabei. Ohne beides liegt der Regler waagerecht und ist in einer 30 Pixel breiten Spalte unbrauchbar. */ .hand-schieber{flex:1 1 auto;width:26px;writing-mode:vertical-lr; direction:rtl;-webkit-appearance:slider-vertical; accent-color:#7b9e5b;cursor:pointer;touch-action:none} #hand-hilfeBild{flex:0 0 auto;width:96px;height:auto;cursor:zoom-in; border-radius:9px;background:#f2e6cd} #hand-hilfeText{flex:1 1 auto;min-width:0;text-align:left} #hand-hilfeName{display:block;color:#f6ecd8;font-size:.95rem; margin-bottom:.15rem} #hand-hilfeWo{margin:0 0 .3rem;font-size:.8rem;color:#dfe8cf; line-height:1.4} /* Die Anzahl der Striche - bei den Raszetten ist gerade sie die Aussage, nicht der Verlauf. */ #hand-wieviele{margin:0 0 .3rem;font-size:.8rem;color:#dfe8cf} #hand-wieviele:empty{display:none} #hand-wieviele button{margin-left:5px;min-width:2.1rem} #hand-lupeSagt{max-width:100%;margin:0; text-align:center;font-size:.82rem;color:#e8dfc8;line-height:1.45} #hand-lupeSagt b{color:#f3c79a} #hand-lupeOben{display:flex;gap:8px;flex-wrap:wrap;justify-content:center; align-items:center;padding:10px 8px 2px} .smhl-gross{font-size:1rem !important;padding:.55rem 1.5rem !important; font-weight:700} /* ── DAS ERGEBNIS ────────────────────────────────────────── Die eigene Hand oben, darunter Linie fuer Linie. Die Hand ist anklickbar: ein Klick auf eine Linie springt zu ihrem Abschnitt. */ #hand-ergebnisInhalt .smhl-handbild{position:relative;margin:0 auto 1.4rem; max-width:330px} #hand-ergebnisInhalt .smhl-handbild canvas{width:100%;height:auto; display:block;border-radius:10px;cursor:pointer; border:1px solid #e3d7bd} #hand-ergebnisInhalt .smhl-marke{font-size:.78rem;color:#7a6a4a; text-align:center;margin:.4rem 0 0} #hand-ergebnisInhalt h4{margin:1.5rem 0 .3rem;font-size:1.06rem; display:flex;align-items:center;gap:.5rem;scroll-margin-top:60px} #hand-ergebnisInhalt h4 i{width:13px;height:13px;border-radius:50%; display:inline-block;flex:0 0 auto} #hand-ergebnisInhalt .smhl-befund{margin:.2rem 0 .5rem;font-size:.82rem; color:#7a6a4a} #hand-ergebnisInhalt p{margin:.45rem 0;line-height:1.55} #hand-ergebnisInhalt .smhl-quer{background:#f6f0e2;border-radius:10px; padding:.8rem 1rem;margin:1.2rem 0} #hand-ergebnisInhalt .smhl-quer b{display:block;margin-bottom:.3rem} .smhl-drucken{margin-top:2rem;text-align:center} .smhl-wohinBild{max-width:330px;margin:0 auto 1rem} .smhl-wohinBild img{width:100%;height:auto;display:block; border-radius:10px;border:1px solid #e3d7bd;background:#fff} #hand-wohinText p{line-height:1.6;margin:.6rem 0} #hand-wohinText .smhl-verlauf{background:#f6f0e2;border-radius:10px; padding:.7rem 1rem;margin:.8rem 0} /* Der Fragezeichen-Knopf neben einer unklaren Linie. */ .smhl-frage{border:1px solid #b8642e !important; background:linear-gradient(180deg,#fdf1e4 0%,#f3dcc4 100%) !important; color:#b8642e !important;font-weight:700; padding:.4rem .7rem !important;min-width:2.2rem} .smhl-frage:hover{background:#b8642e !important;background-image:none !important; color:#fdf1e4 !important} #hand-anleitung .smhl-kasten h4{margin:1.5rem 0 .4rem;font-size:1.02rem; color:#3b2b1c} #hand-anleitung .smhl-kasten p{line-height:1.6;margin:.6rem 0} #hand-anleitung .smhl-kasten ul{margin:.5rem 0;padding-left:1.1rem} #hand-anleitung .smhl-kasten li{margin:.5rem 0;line-height:1.55} .smhl-vorlage{margin:1.3rem auto;max-width:300px} .smhl-vorlage img{width:100%;height:auto;display:block; border-radius:10px;border:1px solid #e3d7bd} .smhl-marke{font-size:.78rem;color:#7a6a4a;text-align:center; margin:.4rem 0 0} /* Beim Drucken nur das Ergebnis - nicht der Wald dahinter. */ @media print{ body>*{display:none !important} #hand-ergebnis{display:block !important;position:static !important; background:none !important;backdrop-filter:none !important; padding:0 !important} #hand-ergebnis .smhl-kasten{box-shadow:none;border:0;margin:0; width:auto;padding:0} .smhl-zu,.smhl-drucken{display:none !important} } #hand-grosser{position:fixed;right:12px;top:4.4rem;z-index:44; display:none} #hand-grosser.da{display:block} /* NICHT position:fixed. So stand der Hinweis fest am unteren Rand - und dort steht auch die Knopfreihe. Auf einem schmalen Schirm lagen beide uebereinander, und man las "Die eigene Hand" durch "Bruecke und Hand geladen" hindurch. Jetzt haengt er als erstes Kind in #hand-unten, und die Flex-Spalte stapelt ihn ueber die Knoepfe. Dasselbe Mittel wie damals bei den drei Leisten: Was untereinander stehen soll, gehoert in EINEN Behaelter, nicht dreimal an denselben Rand. */ .hinweis{align-self:center;max-width:min(94vw,420px); background:rgba(0,0,0,.55);padding:6px 12px;border-radius:8px; font-size:12px;text-align:center}