/* Power Tree, Site-Anbindung (19.09.2026): 1) Handy-Regeln (Hans: Seitenbreite sprang beim Scrollen, Kaesten ueberlagerten sich), 2) SVG-Icons per Maske ueber den Symbolzeichen der App (⇩ ⎙ ↺ ⇧ ▲ rendern am Handy als Emoji, Hans will keine Emojis). Eigene Datei, damit Marcos App-Updates sie nicht ueberschreiben; wird in power-tree/index.php nach dem Inline-Style geladen. Ursache: die dreispaltige Kopfzeile (.dochead) und die Werkzeugleiste (header.top) haben Mindestbreiten ueber 390px, der Layout-Viewport wuchs auf 446px, die feste Kopfzeile blieb bei 390. */ @media (max-width: 1080px) { html.pt, html.pt body { overflow-x: clip; max-width: 100vw; } /* clip statt hidden: hidden macht body zum Scrollcontainer und bricht die sticky Kopfzeile */ html.pt header.top { flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; } html.pt header.top .sp { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px; } html.pt header.top button { padding: 6px 10px; } html.pt .wrap:not(.nav) { padding: 12px 12px 32px; } /* :not(.nav): die Kopfzeile hat auch .wrap, ihr Innenabstand bleibt (Signet klebte links, Hans 19.09.) */ html.pt .dochead { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 12px; } html.pt .hcol, html.pt .hcol.right { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%; } html.pt .beta { white-space: normal; width: auto; max-width: 100%; } html.pt #statusbar { width: 100%; max-width: none; } html.pt .metarow, html.pt .cfgbox { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; } html.pt .metarow { grid-template-columns: auto minmax(0, 1fr); } html.pt .cfgbtn { white-space: normal; } html.pt .bar { gap: 10px 16px; } html.pt h1 { font-size: 17px; } html.pt .stage { max-height: 70vh; } } /* ── Icons statt Symbolzeichen ────────────────────────────────────────────────────────────────── Das Zeichen im bleibt im DOM (Marcos Markup), wird aber unsichtbar; darueber liegt eine SVG-Maske in der Akzentfarbe (currentColor), damit hell und dunkel stimmen. Strichstaerke 1.6, 12x12, wie die uebrigen Icons der Site (Umschalter, Kachel-Pfeil). */ html.pt .cfgbtn .ico, html.pt .beta .bwarn { display: inline-block; width: 12px; height: 12px; flex: none; vertical-align: -1px; color: transparent !important; font-size: 0 !important; line-height: 0; overflow: hidden; background-color: var(--accent); -webkit-mask: var(--pt-ico) center / contain no-repeat; mask: var(--pt-ico) center / contain no-repeat; } html.pt .beta .bwarn { background-color: #b07d00; width: 13px; height: 13px; } html.pt[data-theme="dark"] .beta .bwarn { background-color: #F0C060; } html.pt #dlConfig .ico { --pt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v6M3.5 5 6 7.5 8.5 5M2 10.5h8'/%3E%3C/svg%3E"); } html.pt #dlPdf .ico { --pt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.5h4l2.5 2.5v6.5H3zM7 1.5V4h2.5M4.5 7h3M4.5 9h3'/%3E%3C/svg%3E"); } html.pt #resetCfg .ico { --pt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6a3.5 3.5 0 1 0 1.2-2.6M2.5 1.8v2.4h2.4'/%3E%3C/svg%3E"); } html.pt #loadCfg .ico { --pt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8V2M3.5 4.5 6 2l2.5 2.5M2 10.5h8'/%3E%3C/svg%3E"); } html.pt .beta .bwarn { --pt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.6 10.8 10H1.2zM6 4.6v2.6M6 8.8v.3'/%3E%3C/svg%3E"); } /* Abwurf-Auflage: Satz ohne das Pfeilzeichen */ html.pt body.dropping::before { content: "Drop to load this configuration"; } /* ── Platz von Anfang an, gegen den Sprung beim Start (19.09.2026) ────────────────────────────── Gemessen am iPhone 13 (4G, CPU x4): ein einziger Layout-Sprung bei 1,57 s, CLS 0,1589. Ursache ist der Aufbau der App, nicht der Schriftwechsel (mit blockierten Schriften derselbe Wert): die Kaesten der Kopfzeile stehen leer im HTML und bekommen ihren Inhalt erst per JavaScript. Die Endhoehen stehen aber fest, also werden sie hier als Mindesthoehe reserviert. Gemessene Hoehen vor und nach dem Start (Handy-Zweig, gleich von 320 bis 1080 px Breite): #statusbar 48 -> 48,4 Text kommt per JavaScript (Marcos min-height:48px reicht um 0,4 px nicht) #metarow 16 -> 116,5 Kennungsfelder, groesster Einzelbeitrag: schiebt Plan und Tabellen um 100 px .hcol.right 177 -> 277,5 Summe aus .cfgbox (steht) und #metarow .hcol.left 132,5 -> 156,3 der Beta-Hinweis (#beta) klappt auf, dafuer faellt die Ansichtsgruppe weg .bar 58,5 -> 32 SCHRUMPFT: die App blendet die Gruppe Ansicht aus (SHOW_ENABLE_AND_TIMING), die Werkzeugleiste faellt von zwei Zeilen auf eine. Eine Mindesthoehe kann das nicht auffangen, deshalb liegt die Reserve auf .hcol.left, das beides zusammen traegt. min-height:32px bleibt als Boden der Endhoehe stehen. Im Desktop-Zweig brauchen die Spalten keine Reserve: das Raster der .dochead gleicht sie an die .cfgbox an, und die steht als festes Markup von Anfang an (gemessen 149 px vor und nach dem Start, .hcol.left und .hcol.right ebenso, #metarow 14 -> 114,5 ohne Wirkung auf die Zeilenhoehe). Dort bekommen nur die beiden Kaesten selbst ihren Boden, damit sie nicht flach anfangen. Der Rest-Sprung auf dem Desktop ist waagerecht (das Raster verteilt die Spalten neu, sobald die Kennungsfelder Text haben) und mit einer Mindesthoehe nicht zu fassen, gemessen 0,011. Endstand, gemessen mit gedrosselter Leitung und vierfach gebremster CPU: Handy (iPhone 13) CLS 0,0387 statt 0,1589, Desktop (1440x900) 0,012, Tablet 0,009 bis 0,015. Am Handy bleibt ein Sprung, und zwar nur noch innerhalb der linken Spalte: H1 und Werkzeugleiste ruecken, weil der Beta-Hinweis aufklappt und die Ansichtsgruppe verschwindet. Die Spalte als Ganzes steht, darum bewegt sich nichts darunter. */ @media (max-width: 1080px) { html.pt #statusbar { min-height: 49px; } html.pt #metarow { min-height: 117px; } html.pt .hcol.right { min-height: 278px; } html.pt .hcol.left { min-height: 157px; } html.pt .bar { min-height: 32px; } } @media (min-width: 1081px) { html.pt #statusbar { min-height: 49px; } html.pt #metarow { min-height: 114px; } html.pt .bar { min-height: 32px; } } /* Die feste Anfrageleiste aus dem Fuss (.cta-leiste) klebt am unteren Rand und liegt am Handy ueber der Zeichenflaeche der App: sie verdeckt dort Karten und die Befundliste, und sie verschwindet nur, wenn ein CTA-Bereich im Bild ist, den diese Seite gar nicht hat. Der Fuss selbst (Impressum, Datenschutz, Linkzeile) bleibt, nur die Leiste nicht. */ html.pt .cta-leiste { display: none; } /* Der Fuss haelt bis 1120 px zusaetzliche 74 px Platz fuer genau diese Leiste frei. Ohne sie waere das eine leere Flaeche unter dem Impressum, also bekommt der Fuss hier seinen normalen Abstand zurueck (44 px wie am Desktop, dazu der sichere Bereich am unteren Rand des Geraets). */ html.pt .site-footer { padding-bottom: calc(44px + env(safe-area-inset-bottom)); } /* ── Druck: Ausgleich fuer das zusaetzliche
(19.09.2026) ───────────────────────────────── Marcos Druckregeln arbeiten mit einer weissen Liste ueber `body > *`: ohne Exporttor bleibt alles verborgen, mit `` bleibt allein `.wrap` sichtbar. Seit der Sprunglink der Site ein Ziel braucht, steckt die .wrap in
, ist also kein Kind des Body mehr, und der Export lieferte ein leeres Blatt. Hier wird dieselbe Liste eine Ebene tiefer fortgesetzt:
darf durch, darin nur die .wrap. Die dunkle Werkzeugleiste (header.top) bleibt damit wie vorher draussen, und jedes kuenftige Element in
ist wie vorher standardmaessig draussen. Kommt ein neuer App-Stand, diese beiden Zeilen mit dem
zusammen wieder einsetzen. */ @media print { html.pt[data-pdf] body > main#inhalt { display: block !important; } html.pt[data-pdf] main#inhalt > *:not(.wrap) { display: none !important; } } /* ── Platz fuer die Zeichenflaeche, solange sie leer ist ──────────────────────────────────────── Seit der Fuss unter der App steht, faellt auf, dass die Buehne (.stage) ihre Hoehe erst vom gezeichneten Plan bekommt: vorher ist sie ein 2 px hoher Streifen, nachher steht sie auf ihrem Deckel von 74vh. Auf einem 1440x900-Fenster stand der Fuss dadurch vor dem Rechnen bei 607 px, also im Bild, und rutschte danach heraus: gemessen 0,145 CLS (in zwei von drei Laeufen; im dritten war footer.css noch nicht geladen). Dasselbe am Tablet hochkant, 768x1024: 0,083. Die Reserve haengt am NOCH NICHT GEZEICHNETEN SVG, nicht an der Buehne: die App setzt bei jedem Zeichnen width, height und viewBox auf #svgroot, vorher hat es keines davon. `:not([height])` trifft also genau die Zeit vor dem ersten Zeichnen; danach greift die Regel nicht mehr und die Buehne misst wieder ihren Inhalt. Ein kleines Blatt steht damit weiter in einem kleinen Kasten, eine feste Mindesthoehe haette daraus einen halbleeren weissen Kasten gemacht. (`:empty` waere falsch: ein leeres Blatt hat ein leeres SVG mit height="220", stuende also dauerhaft auf 74vh. Und `height` ist klein geschrieben, anders als viewBox gibt es keine Frage nach Gross- und Kleinschreibung.) 74vh ist Marcos Deckel fuer die Buehne (im Handy-Zweig oben auf 70vh gesetzt, der Deckel begrenzt die Reserve dort selbst). */ html.pt #svgroot:not([height]) { height: 74vh; } /* ── Sprunglink (19.09.2026) ──────────────────────────────────────────────────────────────────── Jede Seite der Site beginnt mit