:root { /* Abstaende in der Leiste: zwischen den Gruppen der groessere, innerhalb der kleinere - gleich gross zerfallen die Gruppen. */ --luecke: 10px; --luecke-innen: 5px; /* Eine Breite fuer Standort, Reiseziel und Suche, gerade so breit, dass "Erdoberflaeche" passt. Laengere Eintraege ("Benutzerdefiniert") kuerzt der Knopf, voll stehen sie im title. */ --feld-b: 9.4em; --ui-bg: rgba(12, 16, 28, 0.72); --ui-border: rgba(120, 160, 255, 0.18); --ui-fg: #dbe4ff; /* Ein Akzent und je Zustand eine Stufe: wer hier dreht, dreht ueberall - eigene Werte daneben liessen die Bedienteile wieder auseinanderlaufen. */ --akzent: 140 170 255; --hover-bg: rgb(var(--akzent) / 0.12); --wahl-bg: rgb(var(--akzent) / 0.22); --wahl-rand: rgb(var(--akzent) / 0.6); --feld-bg: rgba(0, 0, 0, 0.35); /* Gestrichelt = freier Platz, etwas hinzufuegen. */ --strich: rgb(var(--akzent) / 0.35); --strich-hover: rgb(var(--akzent) / 0.7); /* Deckend fuer Pop-ups mit Eingaben ueber dem Bild, sonst --ui-bg. */ --fach-deckend: #0c101c; --schatten: 0 6px 22px rgba(0, 0, 0, 0.6); /* Ecken: Felder und kleine Werkzeuge, Knoepfe und Zeilen, Faecher, Leisten. */ --r-klein: 6px; --r-knopf: 8px; --r-fach: 10px; --r-leiste: 14px; /* Bediengroesse aus dem Zahnrad (s. setzeUiZoom). zoom vergroessert auch vw/vh im Element - wer an der Bedienung Fensteranteile braucht, nimmt diese beiden, sonst ragt sie bei 130 % ueber den Rand. */ --ui-zoom: 1; --vw: calc(1vw / var(--ui-zoom)); --vh: calc(1vh / var(--ui-zoom)); /* Der eine Klapppfeil der Seite, zeigt nach unten (s. .chev). */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Alle Klapppfeile gleich: Maske statt Zeichen (Glyphen wie ▾ und › sind je Schrift verschieden gross), Farbe aus der Schrift, Richtung per rotate. */ .chev { display: inline-block; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform 0.15s; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; } body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } /* Ladeschirm, bis das erste Bild steht. Derselbe Farbverlauf wie der Nachthimmel im Zenit, damit das Wegblenden nicht auffaellt. */ #ladeschirm { /* Ueber aller Bedienung (hoechstes dort: 30), aber unter der Tafel des Selbsttests (99). */ position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 42%, #101a30 0%, #070a14 70%, #05070e 100%); color: var(--ui-fg); font-size: 13px; letter-spacing: 0.04em; transition: opacity 0.5s ease; } #ladeschirm p { opacity: 0.65; } #ladeschirm.weg { opacity: 0; pointer-events: none; } /* box-shadow statt eines Bildes: der Schirm muss ohne daten.js auskommen, die laedt gerade noch. */ .ladeStern { width: 6px; height: 6px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 9px 2px rgba(255,243,214,0.28), 0 0 22px 6px rgba(126,160,255,0.12); animation: ladePuls 1.8s ease-in-out infinite; } @keyframes ladePuls { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .ladeStern { animation: none; opacity: 0.8; } } /* Alles ausser den Zeichenflaechen und dem Ladeschirm: die Flaechen rechnen in Fensterpixeln (Zeiger, Aufloesung). */ body > :not(canvas):not(#ladeschirm) { zoom: var(--ui-zoom); } #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } #labelOverlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; } /* Nicht im Dome-Master-Modus: dort sieht die Kuppel nur den Kreis, die Bedienung daneben darf stehen bleiben. */ body.idle:not(.domeOut) #hint, body.idle:not(.domeOut) #modeSwitch, body.idle:not(.domeOut) #werk, body.idle:not(.domeOut) #thumbs, body.idle:not(.domeOut) #showTools, body.idle:not(.domeOut) #btnPanelToggle, body.idle:not(.domeOut) #blattLeiste { opacity: 0; pointer-events: none; } /* Die Leiste bleibt stehen, solange der Zeiger auf ihr steht oder etwas darin den Fokus hat - sonst verschwaende sie beim Tippen. */ body.idle:not(.domeOut) .panel:not(:hover):not(:focus-within) { opacity: 0; pointer-events: none; } /* Aufnahmemodus (?capture=1). Bewusst Negativliste statt Aufzaehlung wie bei .idle: ein neues Bedienelement soll nicht still im Video landen. */ body.capture > *:not(#gl):not(#labelOverlay) { display: none !important; } body.capture { cursor: none; } body.idle { cursor: none; } /* Zahnrad oben rechts, rahmenlos wie der Betriebsartenschalter (s. #modeSwitch). Feste Hoehe 20 px = Hoehe der Knoepfe dort (12 px Schrift plus 2 x 3 px), damit beide auf einer Linie stehen; der Knopf darf darueber hinausragen. */ #werk { position: absolute; top: 14px; right: 16px; height: 20px; display: flex; align-items: center; gap: 2px; z-index: 12; transition: opacity 0.4s ease, right 0.2s ease; } /* Neben dem offenen Folien-Panel (s. #editorPanel), sonst laege es darueber. */ body:has(#editorPanel:not(.hidden):not(.slid)) #werk { right: calc(var(--editor-w) + 16px); } #btnWerk, #btnVollbild, #btnLage { background: transparent; border: none; color: rgba(219,228,255,0.55); padding: 2px 6px; border-radius: var(--r-klein); line-height: 0; transition: color 0.15s ease, background 0.15s ease; } #btnWerk:hover, #btnVollbild:hover, #btnLage:hover { color: rgba(219,228,255,0.75); background: var(--hover-bg); } #btnWerk.active, #btnLage.active { color: rgba(219,228,255,0.9); background: var(--wahl-bg); } #btnWerk .ico, #btnVollbild .ico, #btnLage .ico { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.95)) drop-shadow(0 0 4px rgba(0,0,0,0.8)); } #werkFach { position: absolute; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 8px; backdrop-filter: blur(10px); color: var(--ui-fg); font-size: 13px; z-index: 13; } #werkFach .fachKopf:first-child { padding-top: 1px; } /* Gleich breite Haelften, sonst fransen die Reihen nach Textbreite aus. */ #werkFach .schalterPaar button { flex: 1 1 0; padding: 5px 12px; text-align: center; } #werkFach .fachKipp { display: flex; align-items: center; gap: 8px; padding: 6px 2px 1px; cursor: pointer; white-space: nowrap; } #thumbs { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-leiste); backdrop-filter: blur(10px); /* Mittig, also je Seite so viel frei wie die breitere Nachbarschaft braucht: links die Show-Knoepfe, rechts das Folien-Panel samt Griffen. */ max-width: max(160px, calc(100 * var(--vw) - 2 * 370px)); overflow-x: auto; /* Schiebebalken nur unter der Maus - unsichtbar statt weg, sonst springt die Leiste beim Hineinfahren um seine Hoehe. */ scrollbar-width: thin; scrollbar-color: transparent transparent; transition: opacity 0.4s ease; z-index: 10; } #thumbs:hover { scrollbar-color: rgb(var(--akzent) / 0.45) transparent; } body:has(#editorPanel:not(.hidden):not(.slid)) #thumbs { max-width: max(160px, calc(100 * var(--vw) - 2 * max(370px, var(--editor-w) + 60px))); } #thumbs:empty { display: none; } /* overflow bleibt sichtbar: Werkzeuge und Nummer sitzen in den freien Ecken neben dem Kreis und wuerden sonst abgeschnitten. */ #thumbs .thumb { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: visible; border: 2px solid transparent; padding: 0; flex: 0 0 auto; background: transparent; cursor: pointer; } #thumbs .thumb.current { border-color: rgb(var(--akzent) / 1); box-shadow: 0 0 9px rgb(var(--akzent) / 0.65); } #thumbs .thumb canvas { width: 100%; height: 100%; display: block; border-radius: 50%; background: #000; } /* Schwacher Ring unter der Maus; in der Vorfuehrung auf der Folie, die ein Klick startet (Anfang der Kette, s. kachelHover). */ #thumbs .thumb.hover:not(.current) { border-color: rgb(var(--akzent) / 0.38); } #thumbs .thumb.dragging { opacity: 0.35; } /* Vorfuehrung: der Blick gehoert dem Bild - statt Kacheln nur Punkte ohne Grund, die aktive Folie hell. Trefferflaeche groesser als der Punkt. */ body.vorfuehrung #thumbs { background: none; border-color: transparent; backdrop-filter: none; gap: 7px; } /* Rahmen nur um echte Ketten - um jeden einzelnen Punkt waere er Laerm. */ body.vorfuehrung #thumbs .thumbKette { padding: 3px 0; gap: 5px; border-color: transparent; } body.vorfuehrung #thumbs .thumbKette:has(.thumb + .thumb) { padding: 3px 5px; border-color: rgb(var(--akzent) / 0.18); } /* Dome-Master: Knoepfe oben links uebereinander, die Punkte als Spalte mittig darunter (s. thumbsImFreien). */ body.domeOut.vorfuehrung #thumbs .thumbKette { padding: 0 3px; } body.domeOut.vorfuehrung #thumbs .thumbKette:has(.thumb + .thumb) { padding: 5px 3px; } body.vorfuehrung #thumbs .thumb { width: 7px; height: 7px; border: none; background: rgba(219,228,255,0.22); box-shadow: none; } body.vorfuehrung #thumbs .thumb > * { display: none; } body.vorfuehrung #thumbs .thumb::after { content: ''; position: absolute; inset: -7px -4px; } body.vorfuehrung #thumbs .thumb.hover:not(.current) { background: rgba(219,228,255,0.5); } body.vorfuehrung #thumbs .thumb.current { background: rgb(var(--akzent) / 0.9); box-shadow: 0 0 5px rgb(var(--akzent) / 0.6); } /* Nummer der Folie in der freien Ecke des Kachelquadrats; der dunkle Saum haelt sie lesbar, wo sie den Kreisrand streift. */ #thumbs .thumbNr { position: absolute; right: 0; bottom: -1px; z-index: 1; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(219,228,255,0.85); pointer-events: none; text-shadow: 0 0 3px #000, 0 0 2px #000; } /* Loeschen und Duplizieren erscheinen nur bei Hover/Fokus der Kachel. */ #thumbs .thumbTool { position: absolute; top: 2px; z-index: 1; font-size: 11px; line-height: 1; padding: 2px 4px; border: none; border-radius: var(--r-klein); background: rgba(0,0,0,0.55); color: rgba(219,228,255,0.9); opacity: 0; transition: opacity 0.15s ease; } #thumbs .thumbDel { right: 2px; color: rgba(255,220,220,0.9); } #thumbs .thumbDup { right: 20px; } #thumbs .thumbTool .ico { width: 12px; height: 12px; display: block; } #thumbs .thumb:hover:not(:has(.fuge:hover)) .thumbTool, #thumbs .thumb:focus-within .thumbTool { opacity: 1; } #thumbs .thumbDel:hover { background: rgba(200,70,70,0.8); color: #fff; } #thumbs .thumbDup:hover { background: rgb(var(--akzent) / 0.45); color: #fff; } #thumbs .thumb-add { display: flex; align-items: center; justify-content: center; color: rgba(219,228,255,0.6); font-size: 28px; line-height: 1; border: 1px dashed var(--strich); background: transparent; /* So gross wie eine Folie samt Ring (s. .thumbKette). */ width: 76px; height: 76px; } #thumbs .thumb-add:hover { color: #fff; border-color: var(--strich-hover); background: var(--hover-bg); } /* Rahmen um jede Folie, um eine Auto-Weiter-Kette ein gemeinsamer (Oval statt Kreis); innen wie aussen derselbe Grund. Ring zu Kreis 5 px wie Ring zum Leistenrand (padding von #thumbs). */ #thumbs .thumbKette { display: flex; gap: 6px; flex: 0 0 auto; padding: 5px; border: 1px solid rgb(var(--akzent) / 0.4); border-radius: 999px; } #thumbs .dropIndicator { width: 3px; align-self: stretch; flex: 0 0 auto; border-radius: 2px; background: rgb(var(--akzent) / 0.9); } /* Fuge vor einer Folie (s. fugeKnopf): Trefferflaeche 16 x 40 px mittig auf der Fuge, die Mitte gemessen: in einer Kette 5 px vor der Kachel, zwischen zwei Rahmen 12 px. Darin ein feiner Strich, immer da und unter der Maus hell; bei einer Weichblende laeuft er oben und unten kurz weich aus, dafuer etwas laenger - sonst wirkte er kuerzer als der harte. */ #thumbs .fuge { position: absolute; top: 50%; left: -13px; z-index: 2; width: 16px; height: 40px; margin-top: -20px; padding: 0; border: none; background: none; cursor: pointer; opacity: 0.6; transition: opacity 0.15s ease; } #thumbs .fuge.rahmen { left: -20px; } #thumbs .fuge::before { content: ''; position: absolute; left: 7px; top: 6px; width: 2px; height: 28px; border-radius: 1px; background: rgb(var(--akzent) / 0.45); } /* 34 px mit 20 % Auslauf je Ende wirken so lang wie die harten 28 px. */ #thumbs .fuge.an::before { top: 3px; height: 34px; background: linear-gradient(transparent, rgb(var(--akzent) / 0.45) 20%, rgb(var(--akzent) / 0.45) 80%, transparent); } #thumbs .fuge:hover::before, #thumbs .fuge.offen::before { background: rgba(185,201,255,0.9); } #thumbs .fuge.an:hover::before, #thumbs .fuge.an.offen::before { background: linear-gradient(transparent, rgba(185,201,255,0.9) 20%, rgba(185,201,255,0.9) 80%, transparent); } #thumbs .fuge:hover, #thumbs .fuge:focus-visible, #thumbs .fuge.offen { opacity: 1; } body.domeOut #thumbs .fuge { top: -13px; left: 50%; width: 40px; height: 16px; margin: 0 0 0 -20px; } body.domeOut #thumbs .fuge.rahmen { top: -20px; } body.domeOut #thumbs .fuge::before { left: 6px; top: 7px; width: 28px; height: 2px; } body.domeOut #thumbs .fuge.an::before { left: 3px; width: 34px; background-image: linear-gradient(90deg, transparent, rgb(var(--akzent) / 0.45) 20%, rgb(var(--akzent) / 0.45) 80%, transparent); } body.domeOut #thumbs .fuge.an:hover::before, body.domeOut #thumbs .fuge.an.offen::before { background-image: linear-gradient(90deg, transparent, rgba(185,201,255,0.9) 20%, rgba(185,201,255,0.9) 80%, transparent); } /* Deckend wie das Einfuegen-Fach. */ #fugePop { position: fixed; z-index: 30; padding: 6px 10px 8px; color: var(--ui-fg); font-size: 13px; background: var(--fach-deckend); border: 1px solid var(--ui-border); border-radius: var(--r-fach); box-shadow: var(--schatten); } #fugePop.hidden { display: none; } #fugePop .detKopf { padding-top: 0; margin-bottom: 4px; } /* Speichern ueber Laden in einer Tafel wie Folien- und Himmelsleiste, so breit wie der breitere Knopf, Piktogramme in einer Flucht. Schrift und Polster der Knoepfe wie in der Himmelsleiste; zwei Knoepfe plus Fuge, Polster und Rand ergeben die 88 px der Folienleiste daneben. */ #showTools { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; z-index: 10; padding: 10px; border-radius: var(--r-leiste); background: var(--ui-bg); border: 1px solid var(--ui-border); backdrop-filter: blur(10px); transition: opacity 0.4s ease; } #showTools button { justify-content: flex-start; padding: 6px 10px; } /* Ohne sichtbaren Knopf (Vorfuehrung) keine leere Tafel. */ #showTools:not(:has(> button[data-weich="true"])) { display: none; } /* Knoepfe und Felder nehmen sonst die Schrift des Browsers (Arial), die Beschriftungen daneben die von body - zwei Schriften in einer Zeile. */ button, input, select, textarea { font-family: inherit; } button { background: rgba(255,255,255,0.06); color: var(--ui-fg); border: 1px solid var(--ui-border); border-radius: var(--r-knopf); padding: 7px 12px; font-size: 13px; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; } button:hover { background: var(--hover-bg); } button.active { background: var(--wahl-bg); border-color: var(--wahl-rand); } .sep { width: 2px; height: 24px; background: rgb(var(--akzent) / 0.45); border-radius: 1px; } /* Piktogramme (Sprite: in #icons). stroke/fill per CSS statt am : so erben die Formen currentColor und faerben bei .active mit. Einzelne Teilformen setzen fill/stroke selbst (Attribut schlaegt Erbe). */ .ico { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; } button.active .ico { opacity: 1; } button.tgl { display: inline-flex; align-items: center; gap: 6px; } .hidden { display: none !important; } /* Weich erscheinen und verschwinden, s. zeigeWeich(). Die Klasse setzt das Skript, nicht das Markup. Die Dauer kommt als --blende-dauer aus BLENDE_MS im Skript; der Rueckfallwert gilt nur, bevor es gelaufen ist. */ .weichBlende { transition: opacity var(--blende-dauer, 0.3s) ease, width var(--blende-dauer, 0.3s) ease, margin-right var(--blende-dauer, 0.3s) ease, padding-left var(--blende-dauer, 0.3s) ease, padding-right var(--blende-dauer, 0.3s) ease, border-left-width var(--blende-dauer, 0.3s) ease, border-right-width var(--blende-dauer, 0.3s) ease; } /* Nur WAEHREND der Blende kappen (data-blendet setzt und loescht zeigeWeich()): die schrumpfende Breite braucht es, aber dauerhaft gekappt schnitte der Kasten auch die Liste ab, die aus ihm herausklappt. */ .weichBlende[data-blendet] { overflow: hidden; } /* Dabei MITTIG kappen: der Inhalt waechst aus seiner Mitte, statt dass eine Schnittkante ueber ein stehendes Bedienteil wandert. Bei voller Breite faellt mittig mit linksbuendig zusammen, es springt nichts; nur die schmalere Aufschrift haelt sich per align-self links (s. .grpTitel). */ .grp.weichBlende[data-blendet] { align-items: center; } button.weichBlende[data-blendet], .schalterPaar.weichBlende[data-blendet] { justify-content: center; } .weichBlende.verblasst { opacity: 0; pointer-events: none; } /* Den Wechsel der Aufschrift fuehrt wechsleAufschrift() inline: eine Klasse hier verloere gegen die Uebergangslisten der Knoepfe. */ /* Eigene Reihe statt display:contents: ohne eigenen Kasten gaebe es keine Breite, die zeigeWeich() fahren koennte. */ #customLoc { display: flex; align-items: center; gap: var(--luecke-innen); } /* "Breite"/"Laenge" gesetzt wie die Aufschriften ueber den Gruppen. */ #customLoc .koordName { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.58; } /* Das Gradzeichen sitzt dicht an der Zahl (Klasse .dtsep wie der Punkt im Datum), steht aber ausserhalb der Spalte: nur die ZAHL zaehlt fuer die Mitte unter den Pfeilen. */ #customLoc label { gap: 2px; } #customLoc .dtsep { opacity: 0.6; } /* Die Feldbreite setzt koordBreite() in ch nach dem Inhalt - eine feste liesse Luft vor dem Grad oder schoebe die Zahl aus der Mitte. */ #customLoc input[type=number] { text-align: center; padding: 0; } #modeSwitch { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 5px; z-index: 10; transition: opacity 0.4s ease; } /* Steht ohne eigenen Grund auf dem Bild: dunkler Saum statt eines Kastens, der in der Projektion mehr stoerte. Knoepfe erben text-shadow nicht (der Browser setzt none) - ohne das inherit trug nur das Label "Dome Master" den Saum und wirkte ueber hellem Himmel dicker. */ #modeSwitch { text-shadow: 0 1px 2px rgba(0,0,0,0.45); } #modeSwitch button { text-shadow: inherit; } #modeSwitch button { background: transparent; border: none; color: rgba(219,228,255,0.55); padding: 3px 5px; font-size: 12px; border-radius: var(--r-klein); transition: color 0.15s ease, background 0.15s ease; } #modeSwitch .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.95)) drop-shadow(0 0 4px rgba(0,0,0,0.8)); } #modeSwitch button:hover { color: rgba(219,228,255,0.75); background: var(--hover-bg); } #modeSwitch button.active { color: rgba(219,228,255,0.9); font-weight: 600; } #modeSwitch .dot { color: rgba(219,228,255,0.25); font-size: 12px; } /* Die Ausgabeform schaltet quer zu den drei Modi, ist also keine vierte Betriebsart: deshalb Trenner und Kippschalter (an/aus) statt Knopf. */ #modeSwitch .trenn { width: 1px; height: 15px; margin: 0 6px; background: rgba(219,228,255,0.22); } /* color ausdruecklich: geerbt waere es die des Grundtexts, schwarz auf dem Bild. */ #ausgabeWahl { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; color: rgba(219,228,255,0.55); transition: color 0.15s ease; } #ausgabeWahl:hover { color: rgba(219,228,255,0.75); } #ausgabeWahl.an { color: rgba(219,228,255,0.9); font-weight: 600; } #ausgabeWahl .lbl { white-space: nowrap; } /* Kippschalter: im Folien-Panel ueber dessen IDs, sonst ueber .kipp. */ input.kipp, :is(#editorDetails, .detKasten) input[type=checkbox], #fugePop input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 30px; height: 17px; margin: 0; border: 1px solid var(--ui-border); border-radius: 9px; background: var(--feld-bg); position: relative; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } input.kipp::after, :is(#editorDetails, .detKasten) input[type=checkbox]::after, #fugePop input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ui-fg); opacity: 0.5; transition: transform 0.15s ease, opacity 0.15s ease; } input.kipp:checked, :is(#editorDetails, .detKasten) input[type=checkbox]:checked, #fugePop input[type=checkbox]:checked { background: rgb(var(--akzent) / 0.5); border-color: rgb(var(--akzent) / 0.75); } input.kipp:checked::after, :is(#editorDetails, .detKasten) input[type=checkbox]:checked::after, #fugePop input[type=checkbox]:checked::after { transform: translateX(13px); opacity: 1; } /* Dome-Master-Modus: die Ausgabe ist der Projektionskreis selbst. Die Folienleiste laege unten im Kreis und steht deshalb senkrecht im freien Streifen links daneben. */ body.domeOut #thumbs { left: 16px; top: 48px; bottom: auto; transform: none; box-sizing: border-box; flex-direction: column; max-width: none; max-height: calc(100 * var(--vh) - 48px - 110px); overflow-x: hidden; overflow-y: auto; } body.domeOut:has(#editorPanel:not(.hidden):not(.slid)) #thumbs { max-width: none; } body.domeOut #thumbs .thumbKette { flex-direction: column; } body.domeOut #thumbs .dropIndicator { width: auto; height: 3px; align-self: stretch; } /* Ausrichtung des Gesamtbilds, nur im Dome-Master-Modus. */ #domeYaw { display: none; } /* Unter der Himmelsleiste (.panel, z-index 11), wo beide sich treffen. Tafel wie Speichern/Laden: gleicher Grund, Radius und Breite, die Ueberschrift wie die Gruppentitel der Himmelsleiste (.grpTitel). */ body.domeOut #domeYaw { display: flex; flex-direction: column; gap: 4px; position: fixed; left: 16px; bottom: 16px; z-index: 10; /* So breit wie Speichern/Laden darunter - die Breite misst leiste.js. */ width: var(--tafel-links-w, auto); box-sizing: border-box; padding: 7px 10px 10px; border-radius: var(--r-leiste); background: var(--ui-bg); color: var(--ui-fg); border: 1px solid var(--ui-border); backdrop-filter: blur(10px); font-size: 13px; } /* Steht dort die Tafel Speichern/Laden (#showTools, 88 px): darueber. In der Vorfuehrung ist sie weg, die Ausrichtung rueckt nach unten. */ body.domeOut:has(#showTools:not(.hidden) > button[data-weich="true"]) #domeYaw { bottom: 114px; } #domeYaw .titel { font-size: 11px; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.58; padding-left: 3px; } #domeYaw .reihe { display: flex; align-items: center; gap: 5px; } #domeYaw button { padding: 4px 9px; font-size: 15px; line-height: 1.2; } #domeYaw .lbl { opacity: 0.6; margin-left: -2px; } #domeYawVal { /* Ohne die eigenen Pfeile des Zahlenfelds: gedreht wird mit ‹ › daneben. */ appearance: textfield; -moz-appearance: textfield; flex: 1 1 0; min-width: 0; text-align: center; font: inherit; font-variant-numeric: tabular-nums; color: var(--ui-fg); background: var(--feld-bg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); padding: 5px 4px; color-scheme: dark; } #domeYawVal::-webkit-inner-spin-button, #domeYawVal::-webkit-outer-spin-button { appearance: none; margin: 0; } /* Bewusst nicht in der body.idle-Regel: der Vorfuehrende braucht sie immer. */ /* Fenster: mittig zwischen linkem Rand und Folienleiste, ohne eigene Tafel, auf ihrer Mittellinie (left und height setzt thumbsInLuecke). Dome-Master: senkrecht rechts neben der Folienleiste, ihre Breite setzt thumbsImFreien() als left. */ #weiterAnzeige { position: fixed; left: 16px; bottom: 16px; z-index: 12; display: flex; align-items: center; gap: 6px; } body.domeOut #weiterAnzeige { top: 48px; bottom: auto; flex-direction: column; } #weiterAnzeige.hidden { display: none; } #weiterAnzeige button { width: 46px; height: 46px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--ui-bg); border: 1px solid var(--ui-border); cursor: pointer; } #weiterAnzeige svg { width: 24px; height: 24px; } /* Darunter die Folienleiste; beide bleiben im freien Streifen links vom Kreis (Radius min(B, H)/2) - was hineinragt, saehe man in der Kuppel. */ /* Die Hoehe der Folienleiste begrenzt thumbsImFreien() am Kreisrand. */ #btnShowPause svg { fill: rgba(219,228,255,0.7); } #weiterAnzeige.pause #btnShowPause svg { fill: #f0c94a; } #btnShowZurueck svg { fill: rgba(219,228,255,0.7); } /* Vor der ersten Folie geht es nicht weiter zurueck (s. prevImage). */ #weiterAnzeige.amAnfang #btnShowZurueck svg { fill: rgba(219,228,255,0.25); } #weiterAnzeige.amAnfang #btnShowZurueck { cursor: default; } #btnShowPlay svg { fill: rgba(219,228,255,0.25); } #btnShowPlay { cursor: default; } #weiterAnzeige.bereit #btnShowPlay svg, #weiterAnzeige.pause #btnShowPlay svg { fill: #3ddc6a; } #weiterAnzeige.bereit #btnShowPlay, #weiterAnzeige.pause #btnShowPlay { cursor: pointer; } /* Erzaehltext einer Show-Szene. Bewusst NICHT in der body.idle-Regel oben: er ist Showinhalt, kein Bedienelement. */ #sceneText { /* left/right 0 + margin auto wie .panel: left 50% kappte die Breite auf die halbe Fensterbreite, am Handy hochkant eine schmale Saeule. */ position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 138px; max-width: min(760px, calc(82 * var(--vw))); box-sizing: border-box; background: rgba(8,12,22,0.62); border: 1px solid rgb(var(--akzent) / 0.16); border-radius: var(--r-leiste); padding: 14px 20px; color: rgba(226,234,255,0.94); font-size: 16px; line-height: 1.6; text-align: center; text-wrap: balance; backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.7s ease; /* Knapp ueber dem Bild (labelOverlay: 1), aber unter aller Bedienung (ab 10): Leisten und Kaesten duerfen den Text verdecken, nie umgekehrt. */ pointer-events: none; z-index: 2; } #sceneText.visible { opacity: 1; } /* Im Dome-Master-Modus geht das Bild in die Kuppel - eine Textbox haette dort keinen Platz und laege verzerrt auf der Projektion. */ body.domeOut #sceneText { display: none; } /* Flex statt vertical-align: Text und Schloss mittig auf einer Linie, in jedem Browser gleich (die Grundlinie liegt je Schrift anders). */ #hint { position: absolute; right: 16px; bottom: 12px; display: flex; align-items: center; gap: 3px; font-size: 11px; color: rgba(219,228,255,0.35); /* ueber dem Folien-Panel: die Fusszeile steht immer an derselben Stelle, das Panel laesst unten dafuer Luft (s. #editorScroll padding-bottom) */ z-index: 16; transition: opacity 0.4s ease; } /* Eine offene Klappliste (Ort, Ziel, Suche) liegt oft ueber der Fusszeile: dann gehoert ihr der Klick, nicht dem Schloss darunter. */ body:has(.klappListe:not(.hidden)) #hint { z-index: 1; pointer-events: none; } #hint #btnUnicorn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } #hint #btnUnicorn:hover { color: rgba(219,228,255,0.75); } #hint #btnGeheim { background: none; border: none; padding: 1px 2px; color: inherit; cursor: pointer; border-radius: var(--r-klein); } #hint #btnGeheim:hover { color: rgba(219,228,255,0.75); background: var(--hover-bg); } #hint #btnGeheim .ico { width: 11px; height: 11px; display: block; } .panel { /* left/right 0 + margin auto statt translateX: sonst begrenzt der 50%-Offset die Shrink-to-fit-Breite auf die halbe Fensterbreite */ position: absolute; left: 0; right: 0; bottom: var(--panel-unten); margin: 0 auto; width: fit-content; display: none; align-items: center; gap: var(--luecke); flex-wrap: wrap; justify-content: center; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-leiste); padding: 8px 14px; backdrop-filter: blur(10px); color: var(--ui-fg); font-size: 13px; z-index: 11; max-width: calc(94 * var(--vw)); /* z-index erst nach dem Hochfahren zurueck, s. .panel.collapsed */ transition: transform 0.35s ease, opacity 0.3s ease, z-index 0s 0.35s; } .panel.visible { display: flex; } /* s. ohneUebergang (leiste.js): beim Moduswechsel springen, nicht rutschen. */ body.ohneUebergang .panel, body.ohneUebergang #werk, body.ohneUebergang #editorPanel, body.ohneUebergang #btnPanelToggle, body.ohneUebergang #thumbs, body.ohneUebergang #weiterAnzeige, body.ohneUebergang #domeYaw, body.ohneUebergang .weichBlende { transition: none !important; } /* Im Showmodus liegt unten die Folienleiste (#thumbs, 16 px vom Rand, rund 90 px hoch): Leiste und Griff (#btnPanelToggle) ruecken ueber dieselbe Variable darueber. */ body { --panel-unten: 16px; } body.mitThumbs { --panel-unten: 120px; } /* Im Showmodus gehoeren Ort und Zeit der Folie: einzustellen nur in den Details des Nachthimmels (s. detErdOrt). */ body.mitThumbs .panel #grpOrt, body.mitThumbs .panel #grpZeit { display: none; } /* Im Dome-Master-Modus ist die Folienleiste weg (s. body.domeOut). */ body.domeOut { --panel-unten: 16px; } /* Der Griff (#btnPanelToggle) liegt bewusst AUSSERHALB von .panel, damit er beim Wegschieben sichtbar und klickbar bleibt. */ /* Weggeschoben faehrt sie HINTER Folienleiste und Speichern/Laden (beide z-index 10) hinab, nicht darueber - sofort beim Wegschieben, und beim Hervorholen erst, wenn sie oben angekommen ist (Verzug oben). */ .panel.collapsed { transform: translateY(160%); opacity: 0; pointer-events: none; z-index: 9; transition: transform 0.35s ease, opacity 0.3s ease, z-index 0s; } /* Bei offenem Folien-Panel (s. #editorPanel) mittig im Fenster wie die Folienleiste, aber nur so weit, wie rechts Platz ist: translate in Prozent misst die eigene Breite, der min() schiebt also genau um den Ueberstand nach links - sonst laegen die letzten Knoepfe darunter. */ /* ✕ oben rechts, nur im Bearbeiten (s. himmelAbwaehlen). Klein in der Zeile der Gruppentitel: dort ist rechts frei, die Leiste wird nicht breiter. */ #btnPanelZu { display: none; } /* Wie das ✕ der Objektzeilen (.rowIcon): randlos, Grund erst beim Zeigen. */ .panel.editorOpen #btnPanelZu { display: flex; align-items: center; justify-content: center; position: absolute; top: 4px; right: 5px; width: 18px; height: 18px; padding: 0; background: transparent; border: none; border-radius: var(--r-klein); color: var(--ui-fg); font-size: 11px; line-height: 1; opacity: 0.85; cursor: pointer; } .panel.editorOpen #btnPanelZu:hover { opacity: 1; background: var(--hover-bg); } .panel.editorOpen { translate: min(0px, calc(50 * var(--vw) - var(--editor-w) - 16px - 50%)) 0; /* Auf ganze Pixel, und eingeschoben unten translate 0 statt none: sonst rastert der Text auf halben Pixeln je Zustand anders und springt. */ translate: round(min(0px, calc(50 * var(--vw) - var(--editor-w) - 16px - 50%)), 1px) 0; max-width: calc(100 * var(--vw) - var(--editor-w) - 32px); transition: transform 0.35s ease, opacity 0.3s ease, translate 0.2s ease, z-index 0s 0.35s; } .panel.editorOpen.collapsed { transition: transform 0.35s ease, opacity 0.3s ease, translate 0.2s ease, z-index 0s; } body:has(#editorPanel.slid) .panel.editorOpen { translate: 0 0; max-width: calc(94 * var(--vw)); } /* Dome-Master und Bearbeiten: links unten stehen Ausrichtung und Speichern/ Laden auf derselben Hoehe - die Leiste mittelt in der Luecke rechts davon. Die Mitte rueckt dabei um L/2, das zieht die Verschiebung oben ab. */ body.domeOut:has(#showTools:not(.hidden) > button[data-weich="true"]) .panel { --links: calc(16px + var(--tafel-links-w, 150px) + 16px); left: var(--links); max-width: calc(100 * var(--vw) - var(--links) - 16px); } body.domeOut:has(#showTools:not(.hidden) > button[data-weich="true"]):not(:has(#editorPanel.slid)) .panel.editorOpen { translate: round(min(0px, calc(50 * var(--vw) - var(--links) / 2 - var(--editor-w) - 16px - 50%)), 1px) 0; max-width: calc(100 * var(--vw) - var(--links) - var(--editor-w) - 40px); } /* Wird der Platz knapp, tragen die Toggles nur ihr Piktogramm (Aufschrift bleibt als title), die Leiste bleibt einzeilig. Der Ebenen-Knopf behaelt seine Aufschrift, weil er ein Fach oeffnet statt zu schalten - als eigene Regel und nicht als :not(#btnEbenen) oben: ein :not() mit ID zaehlt wie eine ID und schluege die Fach-Regel (#ebenenFach ... .lbl). */ @media (max-width: 860px) { .panel button.tgl .lbl { display: none; } .panel button.tgl { padding: 5px 9px; } } @media (max-width: 1240px) { .panel.editorOpen button.tgl .lbl { display: none; } .panel.editorOpen button.tgl { padding: 5px 9px; } } #btnEbenen .lbl { display: inline; } #panelContent { display: contents; } /* Liegt ganz auf dem Kuppelbild: deshalb der deckende Grund der Leiste statt der 6 % Weiss der anderen Knoepfe. */ #btnPanelToggle { position: absolute; left: 50%; bottom: calc(var(--panel-unten) - 12px); transform: translateX(-50%); width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 12; background: var(--ui-bg); backdrop-filter: blur(10px); } #btnPanelToggle .chev { width: 12px; height: 12px; } #btnPanelToggle.zu .chev { transform: rotate(180deg); } .panel label { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .panel input, .panel select, .detAuswahl { background: var(--feld-bg); color: var(--ui-fg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); padding: 5px 8px; font-size: 13px; font-family: inherit; color-scheme: dark; } /* Firefox zeichnet die aufgeklappte Liste nicht nach color-scheme, sondern nach den Farben von laesst sich nicht gestalten, Firefox zeichnet dort das helle Popup des Systems. */ .klappListe { position: absolute; bottom: calc(100% + 9px); left: 0; /* max-content: sonst nimmt der senkrechte Rollbalken der Liste Breite weg und es erscheint ein waagrechter. */ width: max-content; min-width: 100%; max-width: calc(80 * var(--vw)); max-height: calc(46 * var(--vh)); overflow-y: auto; overflow-x: hidden; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 4px; backdrop-filter: blur(10px); z-index: 13; /* Sonst zeichnet der Browser einen hellen Rollbalken in die dunkle Liste. */ color-scheme: dark; scrollbar-width: thin; scrollbar-color: rgb(var(--akzent) / 0.45) transparent; } #sucheListe { min-width: 16em; } .klappListe button { display: flex; width: 100%; gap: 10px; align-items: baseline; justify-content: space-between; text-align: left; white-space: nowrap; background: none; border: none; border-radius: var(--r-klein); padding: 5px 8px; font: inherit; color: var(--ui-fg); } .klappListe button:hover { background: var(--hover-bg); } /* Rahmen als Schatten: ein echter machte die Zeilen 2 px hoeher. */ .klappListe button.aktiv { background: var(--wahl-bg); box-shadow: inset 0 0 0 1px var(--wahl-rand); } /* Zwischenueberschrift der Zielauswahl ("Sonnensystem", "Sterne"). */ .klappListe .abschnitt { padding: 7px 8px 3px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; pointer-events: none; } .klappListe .abschnitt:first-child { padding-top: 3px; } /* Die Zielauswahl: je Abschnitt eine Spalte (s. Auswahl.abschnitt), damit alle Ziele ohne Rollen dastehen. Monde eingerueckt unter ihrem Planeten. */ /* Hoeher als die anderen Listen (46vh): sonst rollte sie auf einem Laptop-Schirm schon wieder. */ .klappListe.spalten { display: flex; gap: 6px; max-height: calc(70 * var(--vh)); } .klappListe .spalte + .spalte { border-left: 1px solid var(--ui-border); padding-left: 6px; } /* Schmal: untereinander, sonst schnitte overflow-x die zweite Spalte ab. */ @media (max-width: 700px) { .klappListe.spalten { display: block; } .klappListe .spalte + .spalte { border-left: none; padding-left: 0; } } .klappListe button.unter { padding: 3px 8px 3px 22px; font-size: 0.92em; opacity: 0.85; } /* Der zuletzt angeflogene Stern ausserhalb der festen Ziele (s. zielEintragen). */ .klappListe button.zuletzt { position: relative; margin-top: 7px; } .klappListe button.zuletzt::before { content: ''; position: absolute; left: 8px; right: 8px; top: -4px; border-top: 1px solid var(--ui-border); } .klappListe .art { opacity: 0.55; font-size: 11px; white-space: nowrap; } .klappListe .leer { padding: 6px 8px; opacity: 0.55; } .auswahl { position: relative; display: flex; } /* FESTE Breite (s. --feld-b), nicht hoechstens: sonst schoebe jeder neue Eintrag die halbe Leiste hin und her. */ .auswahlKnopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; font-size: 13px; border-radius: var(--r-knopf); width: var(--feld-b); } /* min-width: 0, sonst schrumpft flex den Text nicht unter seine Breite und ein langer Name schoebe den Pfeil aus dem Knopf. Gekuerztes steht voll im title des Knopfs. */ .auswahlKnopf .wert { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .auswahlKnopf .pfeil { width: 10px; height: 10px; opacity: 0.6; } /* Jede Gruppe traegt ihre Aufschrift ueber sich. align-self: stretch zieht alle auf die Hoehe der hoechsten (Datums-Stepper) - nur so stehen die Aufschriften auf EINER Linie. Die Bedienteile bleiben in ihrer Zeile mittig (grpReihe: flex 1 + align-items center). */ .panel .grp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; align-self: stretch; } .panel .grpTitel { font-size: 11px; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.58; padding-left: 3px; pointer-events: none; /* Haelt sich links, auch wenn die Gruppe waehrend einer Blende mittig kappt (s. .grp.weichBlende) - sonst spraenge sie am Ende nach links. */ align-self: flex-start; } /* --reihe-h haelt die Hoehe der Leiste fest (in JS einmal an #dt gemessen, folgt so Schriftgroesse und Zoom): sonst ruckt die Leiste, wenn bei einer Sternenreise der Datums-Stepper als hoechste Gruppe wegfaellt. */ .panel .grpReihe { display: flex; align-items: center; gap: var(--luecke-innen); flex: 1 0 auto; min-height: var(--reihe-h, 0px); } /* Eine Hoehe fuer die ganze Leiste: Auswahlknoepfe und Suche geben sie vor (13 px Schrift, 5 px Luft). */ .panel .grpReihe > button, .schalterPaar button, #btnEbenen { padding: 5px 10px; font-size: 13px; } /* Zwei Stellungen, ein Entweder-oder: die Haelften teilen sich ihre Kante (margin-left: -1px, sonst zwei Linien); die aktive liegt per z-index oben, damit ihr hellerer Rahmen die Kante zeichnet. */ .schalterPaar { display: flex; } .schalterPaar button { padding: 5px 10px; border-radius: 0; margin-left: -1px; position: relative; } .schalterPaar button:first-child { border-radius: var(--r-knopf) 0 0 var(--r-knopf); margin-left: 0; } .schalterPaar button:last-child { border-radius: 0 var(--r-knopf) var(--r-knopf) 0; } .schalterPaar button.active { z-index: 1; } /* Die Stellung gilt nur halb: eines ihrer Felder wurde im Ebenen-Fach einzeln umgelegt ("Weltall" ohne unteren Himmel). */ .schalterPaar button.active.teilweise { background: rgb(var(--akzent) / 0.12); border-color: rgb(var(--akzent) / 0.28); color: rgba(219,228,255,0.5); font-weight: 400; } /* Sonst frisst die Regel darueber die Rueckmeldung beim Ueberfahren. */ .schalterPaar button.active.teilweise:hover { background: var(--wahl-bg); } #ebenen { position: relative; display: flex; } /* Rechts buendig: der Knopf sitzt am rechten Ende der Leiste, links buendig ragte das Fach aus dem Bild. */ #ebenenFach { position: absolute; bottom: calc(100% + 9px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 15em; max-height: calc(70 * var(--vh)); overflow-y: auto; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 8px; backdrop-filter: blur(10px); z-index: 13; } /* Im Fach steht immer die Beschriftung: die Media-Queries der Leiste duerfen hier nicht durchschlagen (gewinnt ueber die ID). */ #ebenenFach button.tgl { justify-content: flex-start; padding: 6px 9px; } #ebenenFach button.tgl .lbl { display: inline; } /* Knopfhoehe: der Regler allein ist 28 px, mit Polster stand die Zeile hoeher und liess unter der Schrift mehr Luft als die Knoepfe. */ #ebenenFach label { padding: 0 9px; min-height: 30px; gap: 8px; } #ebenenFach input[type=range] { width: 7em; flex: 0 0 auto; } /* Feste Breite: sonst wandern Regler und Fachbreite bei jedem Schritt. */ #magLimitLabel { flex: 0 0 4.6em; text-align: right; font-variant-numeric: tabular-nums; } .fachKopf { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.5; padding: 9px 2px 1px; } .fachKopf:first-child { padding-top: 1px; } /* Doppeltipp auf einen Stern: wie #tip, aber mit Knopf - deshalb fest positioniert und mit Zeigerereignissen. */ #sternPopup { position: fixed; z-index: 14; display: flex; flex-direction: column; gap: 6px; align-items: stretch; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 9px 11px; color: var(--ui-fg); font-size: 13px; white-space: nowrap; backdrop-filter: blur(10px); } #sternPopup .kopf { font-weight: 600; } #sternPopup .unter { opacity: 0.6; font-size: 12px; } #sternPopup button { width: 100%; padding: 6px 10px; } /* Wie das Uebergangs-Pop-up (#fugePop): deckend dunkel, Felder wie in den Leisten. */ #geheimDialog { position: fixed; z-index: 30; left: 50%; top: 38%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px; width: 250px; background: var(--fach-deckend); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 8px 10px 10px; box-shadow: var(--schatten); color: var(--ui-fg); font-size: 13px; } #geheimDialog .kopf { display: flex; align-items: center; justify-content: space-between; } #geheimDialog .kopf button { border: none; background: none; color: var(--ui-fg); opacity: 0.6; font-size: 12px; padding: 2px 4px; cursor: pointer; border-radius: var(--r-klein); } #geheimDialog .kopf button:hover { opacity: 1; background: var(--hover-bg); } #geheimDialog input { width: 100%; box-sizing: border-box; color-scheme: dark; background: var(--feld-bg); color: var(--ui-fg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); padding: 5px 8px; font-size: 13px; } #geheimDialog input:focus { outline: none; border-color: var(--wahl-rand); } #geheimDialog input::placeholder { color: var(--ui-fg); opacity: 0.45; } #geheimDialog .unter { opacity: 0.7; font-size: 12px; } #geheimDialog .unter:empty { display: none; } /* "Laedt ..." - die Punkte gehen nacheinander an, solange PBKDF2 und Download laufen (s. geheimDialog submit). */ #geheimDialog .punkte i { font-style: normal; opacity: 0.15; animation: geheimPunkt 1.2s infinite; } #geheimDialog .punkte i:nth-child(2) { animation-delay: 0.2s; } #geheimDialog .punkte i:nth-child(3) { animation-delay: 0.4s; } @keyframes geheimPunkt { 0%, 60%, 100% { opacity: 0.15; } 20%, 40% { opacity: 1; } } #tip { position: absolute; display: none; z-index: 12; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 5px 10px; color: var(--ui-fg); font-size: 13px; white-space: nowrap; pointer-events: none; backdrop-filter: blur(10px); } #drop { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(20, 30, 60, 0.55); border: 3px dashed rgb(var(--akzent) / 0.6); border-radius: 20px; color: #dbe4ff; font-size: 26px; font-weight: 600; z-index: 20; pointer-events: none; text-shadow: 0 2px 8px #000; } #drop.visible { display: flex; } input[type=file] { display: none; } /* Folien-Panel, rechts angedockt. Breite als Variable: Himmelsleiste und Werkzeugecke weichen ihr aus (s. .editorOpen oben). */ :root { --editor-w: 320px; } #editorPanel { position: absolute; right: 0; top: 0; bottom: 0; width: var(--editor-w); display: flex; background: var(--ui-bg); border-left: 1px solid var(--ui-border); backdrop-filter: blur(10px); color: var(--ui-fg); font-size: 13px; z-index: 15; /* overflow bleibt sichtbar, sonst wuerden die links ueberstehenden Griffe abgeschnitten - gescrollt wird in #editorScroll. */ transition: transform 0.2s ease; } /* Weggeschoben, nicht geschlossen: der Griff bleibt am Rand stehen. */ #editorPanel.slid { transform: translateX(100%); } #editorPanel.hidden { display: none; } #editorScroll { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--akzent) / 0.35) transparent; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 30px; } /* Name der Folie ueber dem Kreis: steht wie eine Ueberschrift, der Rahmen erscheint erst bei Hover/Fokus. */ /* Nummer (wie in der Folienleiste) und Name als eine Zeile, zusammen zentriert: das Feld ist so breit wie sein Text (s. titelBreite). */ #editorTitel { display: flex; justify-content: center; align-items: baseline; margin-bottom: -4px; color: rgba(219,228,255,0.92); } /* Nummer und Feld mit derselben Schrift - das Kuerzel "font: ... inherit" ist ungueltig und fiel still weg, die Nummer stand kleiner da. */ #editorSlideNr, #editorSlideName { font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; } #editorSlideNr { cursor: text; font-variant-numeric: tabular-nums; } #editorSlideName { min-width: 0; max-width: 100%; box-sizing: border-box; background: transparent; border: 1px solid transparent; border-radius: var(--r-klein); padding: 3px 6px; color: rgba(219,228,255,0.92); text-align: left; } #editorSlideName.zu { padding-left: 0; padding-right: 0; border-width: 0; } #editorSlideName::placeholder { color: rgba(219,228,255,0.3); font-weight: 400; } /* Ohne Namen steht nur die Nummer; der Hinweis erst beim Hinzeigen. */ #editorTitel:not(:hover) #editorSlideName:not(:focus)::placeholder { color: transparent; } #editorSlideName:hover { border-color: rgb(var(--akzent) / 0.25); } #editorSlideName:focus { outline: none; border-color: var(--wahl-rand); background: var(--feld-bg); } /* Klapppfeil am linken Panelrand. */ #btnEditorSlide { /* -21 statt -20: left rechnet ab der Innenkante, der 1-px-Panelrand liegt weiter links. Sonst ragt der halbdurchsichtige Griff 1 px unter den Rand und zeigt dort eine dunkle Linie. */ position: absolute; left: -21px; width: 20px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--ui-bg); color: var(--ui-fg); border: 1px solid var(--ui-border); border-right: none; border-radius: var(--r-knopf) 0 0 var(--r-knopf); backdrop-filter: blur(10px); cursor: pointer; } #btnEditorSlide .chev { width: 12px; height: 12px; transform: rotate(-90deg); } #editorPanel.slid #btnEditorSlide .chev { transform: rotate(90deg); } /* top ist nur Ausgangswert: den Platz setzt platziereSlideGriff() und rechnet dabei mit translateY(-50%), top ist also die Griffmitte. */ #btnEditorSlide { top: 25%; transform: translateY(-50%); } /* Hover UEBER den Grund gelegt: allein waere er durchsichtiger als der Griff. */ #btnEditorSlide:hover, #btnPanelToggle:hover, #weiterAnzeige button:hover { background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--ui-bg); } #editorPanel button:disabled { opacity: 0.4; cursor: default; } /* Ohne eigenen Rand: die Luft kommt aus dem gap von #editorScroll. */ .editorSep { border-top: 1px solid var(--ui-border); margin: 0; } /* Kein schwarzer Grund: den zeichnet redrawEditorCanvas als Kreisflaeche, ausserhalb davon bleibt das Feld durchsichtig (s. dort). */ #editorCanvas { width: 100%; aspect-ratio: 1; touch-action: none; cursor: crosshair; } #editorObjekte { display: flex; flex-direction: column; gap: 5px; } /* Play und Vergroessern sitzen in den Ecken des Kreisquadrats, ausserhalb des Kreises. */ #editorKreis { position: relative; } #btnFolieProbe, #btnKreisGross { position: absolute; bottom: 0; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; } #btnFolieProbe { left: 0; } #btnKreisGross { right: 0; } #btnFolieProbe svg { width: 14px; height: 14px; fill: currentColor; } #btnKreisGross svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } #btnKreisGross.offen { background: var(--wahl-bg); border-color: var(--wahl-rand); } /* Grosser Kreis ueber allem; der Grund daneben schliesst (s. kreisPopupZu). */ #kreisPopup { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(4,6,14,0.72); backdrop-filter: blur(4px); } #kreisPopup.hidden { display: none; } #kreisPopup #editorKreis { width: min(calc(90 * var(--vh)), calc(90 * var(--vw))); } #btnFolieProbe.laeuft { background: var(--wahl-bg); border-color: var(--wahl-rand); } #einfuegen { position: relative; } /* Gestrichelt wie ein freier Platz: eine Zeile, die noch kein Objekt ist. Masse und Grund wie bei den Objektzeilen (.editorInsetRow): 38 px = Vorschaubild 28 + Polster 2 x 4 + Rahmen 2 x 1. */ #btnEinfuegen { width: 100%; min-height: 38px; box-sizing: border-box; padding: 4px 6px; border: 1px dashed var(--strich); border-radius: var(--r-knopf); background: rgba(255,255,255,0.05); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; } #btnEinfuegen .plus { font-size: 15px; line-height: 1; } #btnEinfuegen:hover { border-color: var(--strich-hover); } #btnEinfuegen[aria-expanded="true"] { background: var(--wahl-bg); border-color: var(--wahl-rand); } /* Klappfach unter dem Knopf, ueber der Liste. Feste Haelften statt einer Flexzeile, damit "Dome Master" die Zeile nicht sprengt. */ #editorObjBtns { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px; /* Deckend: halbdurchsichtig lasen sich die Zeilen darunter mit. */ background: var(--fach-deckend); border: 1px solid var(--ui-border); border-radius: var(--r-fach); box-shadow: var(--schatten); } #editorObjBtns button { min-width: 0; padding: 4px 4px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* Die Beschriftung darf schrumpfen, das Piktogramm nicht (.ico ist flex: 0 0 auto). */ #editorObjBtns button .lbl { overflow: hidden; text-overflow: ellipsis; } #editorInsetList { display: flex; flex-direction: column; gap: 5px; } .editorInsetRow { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.05); border: 1px solid var(--ui-border); border-radius: var(--r-knopf); padding: 4px 6px; cursor: pointer; } .editorInsetRow.selected { border-color: var(--wahl-rand); background: var(--wahl-bg); } .editorInsetRow canvas { width: 28px; height: 28px; border-radius: 5px; flex: 0 0 auto; } /* Vorschaubild mit Typzeichen (Kuppelbild, Bild-in-Bild, Text, Ton, Video) rechts oben. */ .rowThumbBox { position: relative; flex: 0 0 auto; line-height: 0; } /* Ohne Kaestchen: ueber hellem Motiv haelt der dunkle Saum (drop-shadow) das Zeichen lesbar. */ .rowThumbBox .rowTyp { position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 2px rgba(0,0,0,0.95)) drop-shadow(0 0 1px rgba(0,0,0,0.9)); } .rowThumbBox .rowTyp svg { width: 14px; height: 14px; opacity: 0.95; } /* Nachthimmel und Kuppelrand sind die einzigen nicht selbst eingefuegten Eintraege. */ .rowThumbBox .rowTyp.typSky { color: #ffe08a; } /* Der Kuppelrand steht immer oben: sein Zeichen darf kleiner sein. */ .rowThumbBox .rowTyp.typRand { right: -3px; top: -3px; width: 12px; height: 12px; } .rowThumbBox .rowTyp.typRand svg { width: 12px; height: 12px; opacity: 1; } .editorInsetRow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Umsortieren per Drag&Drop, gleiches Muster wie in der Folienleiste (s. .dropIndicator). */ .editorInsetRow.dragging { opacity: 0.4; } .objDropIndicator { height: 2px; border-radius: 1px; background: rgb(var(--akzent) / 0.9); margin: -3px 0; pointer-events: none; } .editorInsetRow button { padding: 2px 7px; flex: 0 0 auto; } .editorInsetRow .rowIcon, .detSpielzeile .rowIcon { padding: 2px 4px; background: transparent; border: none; font-size: 13px; line-height: 1; opacity: 0.85; color: var(--ui-fg); cursor: pointer; flex: 0 0 auto; } .editorInsetRow .rowIcon:hover, .detSpielzeile .rowIcon:hover { opacity: 1; background: var(--hover-bg); } .editorInsetRow .rowIcon .ico { width: 18px; height: 18px; opacity: 1; display: block; } /* Ausgeblendetes Objekt: Zeile zurueckgenommen, das durchgestrichene Auge bleibt kraeftiger - es traegt die Aussage. */ .editorInsetRow .rowIcon.off { opacity: 0.6; } .editorInsetRow.hiddenObj canvas, .editorInsetRow.hiddenObj span { opacity: 0.4; } /* Blindknopf an der Stelle des fehlenden ✕ (Nachthimmel): haelt die Augen aller Zeilen in einer Flucht. */ .editorInsetRow .rowDelPlatz { visibility: hidden; pointer-events: none; } /* Vorgaenge haengen klein und eingerueckt am Nachthimmel. */ .editorInsetRow.unter { margin-left: 18px; padding: 2px 6px; font-size: 12px; } .editorInsetRow.unter canvas { width: 20px; height: 20px; border-radius: 4px; } /* Details des ausgewaehlten Objekts */ /* Schrift im ganzen Panel: 13 px wie die Himmelsleiste, Kopfzeilen 11 px. Voll in --ui-fg steht alles, was man liest oder einstellt - auch neben einem Schalter, der aus ist (den Zustand traegt der Schalter). Zurueckgenommen (0,55) nur Nebensachen: Einheiten, Dateigroesse, Abspielzeit, Hinweise. Mehr Stufen lasen sich als "gesperrt". */ /* Klappt unter der ausgewaehlten Zeile auf und setzt deren Rahmen fort; die -5 px schlucken das gap der Liste. */ :is(#editorDetails, .detKasten) { display: flex; flex-direction: column; gap: 5px; margin-top: -5px; padding: 8px 7px 9px; border: 1px solid var(--wahl-rand); border-top: none; border-radius: 0 0 var(--r-knopf) var(--r-knopf); background: rgb(var(--akzent) / 0.05); } /* Ort und Zeit (s. detOrt, detZeit): Bauart der Himmelsleiste. Die Liste klappt hier nach unten - oben schnitte sie der Rollbereich ab. */ :is(#editorDetails, .detKasten) .auswahl { flex: 1 1 auto; min-width: 0; } :is(#editorDetails, .detKasten) .auswahlKnopf { width: 100%; } :is(#editorDetails, .detKasten) .auswahl .klappListe { top: calc(100% + 4px); bottom: auto; right: 0; left: auto; } .detDt, .detKoord { display: flex; align-items: center; gap: 2px; margin-left: auto; } .detKoord { gap: var(--luecke-innen); } .detKoord label { display: flex; align-items: center; gap: 2px; white-space: nowrap; } .detDt .dtsep, .detKoord .dtsep { opacity: 0.6; } .detKoord .koordName { font-size: 11px; letter-spacing: 0.04em; opacity: 0.58; } /* Rahmenlos unter den Pfeilen wie in der Leiste - die Feldregel der Details (Rahmen, Polster) gilt hier nicht. */ :is(#editorDetails, .detKasten) .detKoord input[type=number] { flex: none; padding: 0; border: none; border-radius: 0; background: none; text-align: center; } :is(#editorDetails, .detKasten) .detKoord input[type=number]:focus { outline: none; background: var(--hover-bg); border-radius: 4px; } .editorInsetRow.selected:has(+ :is(#editorDetails, .detKasten)) { border-radius: var(--r-knopf) var(--r-knopf) 0 0; } .editorInsetRow.unter + :is(#editorDetails, .detKasten) { margin-left: 18px; } /* Vorgang einfuegen: gestrichelt wie "+ Einfuegen", ein freier Platz. */ #vorgangKnoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #vorgangKnoepfe button { min-width: 0; padding: 4px; white-space: nowrap; border: 1px dashed var(--strich); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } #vorgangKnoepfe button:hover { border-color: var(--strich-hover); background: var(--hover-bg); } #vorgangKnoepfe .lbl { overflow: hidden; text-overflow: ellipsis; } .detRow { display: flex; align-items: center; gap: 6px; min-height: 22px; } /* So breit wie "Himmelskoerper": sonst schob die Aufschrift ihr Feld nach rechts, und es begann nicht buendig mit dem Ort darunter. */ .detRow .detLabel { flex: 0 0 100px; } .detRow .detVal { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detRow .detGroesse { flex: none; margin-left: 8px; opacity: 0.55; font-variant-numeric: tabular-nums; } .detRow .detUnit { opacity: 0.55; } /* Unter dem Strich steht gesammelt, was man hier nicht aendern kann. */ .detTrenn, .detAbschnitt { border-top: 1px solid var(--ui-border); margin: 7px 0 1px; } .detGruppe { display: flex; flex-direction: column; gap: 5px; } /* Klappgriff "Mehr" (s. detMehr). */ .detMehr { align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 2px 6px; margin-left: -6px; background: none; border: none; color: var(--ui-fg); font: inherit; opacity: 0.72; cursor: pointer; border-radius: var(--r-klein); } .detMehr:hover { opacity: 0.95; background: var(--hover-bg); } .detMehr::before { content: ''; width: 10px; height: 10px; opacity: 0.7; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform 0.12s; } .detMehr.zu::before { transform: rotate(-90deg); } /* Zwei zusammengehoerige Zeilen nebeneinander (Breite/Hoehe, Azimut/ Hoehenwinkel); die Beschriftung schrumpft dafuer auf ihre Textbreite. */ .detPaar { display: flex; gap: 9px; } .detPaar .detRow { flex: 1 1 0; min-width: 0; } .detPaar .detRow .detLabel { flex: 0 1 auto; } /* Reise aus: stillgelegt statt versteckt, sonst spraenge das Panel. */ .detGruppe.aus { opacity: 0.38; pointer-events: none; } /* Unter einem Schalter (Reise): eingerueckt mit Linie, damit klar ist, was er an- und abschaltet. Nicht tiefer: die Zahlenpaare (Breite/Laenge Ziel) werden sonst im schmalen Panel unlesbar eng. */ .detGruppe.eingerueckt { margin-left: 6px; padding-left: 9px; border-left: 1px solid var(--ui-border); } /* Eingerueckt reicht die Zeile Ort/Zeit/Datum sonst knapp nicht (im schmalen Panel fehlten 15 px): enger gestellt. */ .detGruppe.eingerueckt .detRow.reihe { gap: 4px; } .detGruppe.eingerueckt .detReihe { gap: 4px; flex: 0 1 auto; } .detGruppe.eingerueckt .detReihe label { gap: 3px; } /* Unveraenderliches unter dem Strich (Datei, Groesse, Aufloesung) tritt zurueck: Auskunft, keine Einstellung. Die Groesse ist sonst schon blass. */ .detTrenn ~ .detRow { opacity: 0.55; } .detTrenn ~ .detRow .detGroesse { opacity: 1; } /* Abspielzeile: ▶/⏸, Balken, Zeit. Feste Spalten statt Flexzeile: ▶ und ⏸ sind verschieden breit, und 10:00 ist laenger als 9:59 - sonst springt der Balken beim Abspielen in der Breite. */ .detSpielzeile { display: grid; grid-template-columns: 24px 1fr 74px; align-items: center; gap: 8px; margin: 1px 0 5px; } /* Ohne Knopf (blosser Balken) faellt die erste Spalte weg. */ .detSpielzeile.ohneKnopf { grid-template-columns: 1fr 74px; } .detSpielzeile .rowIcon { width: 24px; text-align: center; padding: 2px 0; } .detSpielzeile .detZeit { opacity: 0.55; font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; text-align: right; } .detBalken { position: relative; flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); cursor: pointer; } .detBalken i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: rgb(var(--akzent) / 0.85); } /* Knopf an der Abspielstelle: zeigt, dass der Balken anfassbar ist. */ .detBalken b { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: rgba(219,228,255,0.95); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); pointer-events: none; } /* Zahlenfeld als Kasten aus Wert, Einheit, Pfeilen. Der Rahmen sitzt am Kasten, nicht am - nur so steht die Einheit IM Feld, links der Pfeile. Eigene Pfeilknoepfe: die eingebauten zeichnet jeder Browser woanders hin (Firefox links neben die Einheit), und ihr Schritt haengt an min/step (min:1, step:5 springt erst um 1, dann um 5). */ /* Eine Breite fuer alle Zahlen (Platz fuer "3600 s" oder "-180 °"), rechtsbuendig in einer Spalte; breit laufen nur Text und Auswahl. width zusaetzlich zu flex-basis: Firefox rechnet die Breite der Zeile sonst aus dem Eingabefeld darin, und die Zeile wuerde breiter. */ .detFeld { flex: 0 0 64px; width: 64px; margin-left: auto; display: flex; align-items: stretch; background: var(--feld-bg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); overflow: hidden; } /* !important, weil die Grundregel weiter unten ueber die ID :is(#editorDetails, .detKasten) greift und damit staerker waere. */ .detFeld input[type=number] { flex: 1 1 0; width: 100% !important; min-width: 0; text-align: right; background: none !important; border: none !important; border-radius: 0 !important; padding: 2px 0 2px 4px !important; appearance: textfield; -moz-appearance: textfield; } .detFeld input[type=number]::-webkit-outer-spin-button, .detFeld input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0; } .detFeld .detUnit { align-self: center; padding: 0 4px 0 2px; opacity: 0.55; font-size: 11px; white-space: nowrap; pointer-events: none; } .detPfeile { display: flex; flex-direction: column; flex: 0 0 auto; width: 15px; } .detPfeile button { flex: 1 1 0; padding: 0; border: none; border-left: 1px solid var(--ui-border); background: rgba(255,255,255,0.06); color: var(--ui-fg); font-size: 7px; line-height: 1; cursor: pointer; } .detPfeile button:first-child { border-bottom: 1px solid var(--ui-border); } .detPfeile button:hover { background: var(--hover-bg); } /* Beide Bloecke: die det*-Helfer bauen fuer Details und Uebergang dieselben Zeilen. Ohne den zweiten Selektor steht die Zahl im Uebergangsblock schwarz auf dunkel. */ :is(#editorDetails, .detKasten) input[type=number], #fugePop input[type=number] { width: 5em; font: inherit; color: var(--ui-fg); background: var(--feld-bg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); padding: 2px 4px; color-scheme: dark; } /* Checkboxen der beiden Bloecke sind Kippschalter, s. input.kipp oben. */ :is(#editorDetails, .detKasten) textarea { width: 100%; min-height: 62px; resize: vertical; font: inherit; color: var(--ui-fg); background: var(--feld-bg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); padding: 5px 6px; } :is(#editorDetails, .detKasten) input[type=time] { font: inherit; color: var(--ui-fg); background: var(--feld-bg); border: 1px solid var(--ui-border); border-radius: var(--r-klein); padding: 2px 4px; color-scheme: dark; } .detDup { display: flex; gap: 5px; flex: 1; } .detDup button { flex: 1; padding: 2px 0; } /* Schalter zu einem ganzen Satz: die Beschriftung nimmt die Zeile. In der 92px-Spalte von .detRow braeche der Satz sonst mehrfach um. */ .detRow.weit .detLabel { flex: 1 1 auto; white-space: nowrap; } /* Stillgelegt wie .detGruppe.aus. */ /* Position: zwei Felder, vor jedem sein Kuerzel (s. detRow 'Position'). */ .detRow.zweiFelder .detLabel { flex: 1 1 auto; } .detRow.zweiFelder .detKurz { opacity: 0.55; font-size: 11px; margin-left: 4px; } .detRow.zweiFelder .detFeld { margin-left: 0; } .detFeld.aus { opacity: 0.38; pointer-events: none; } /* Automatik (s. detAutoZahl): nur die Zahl blass, das Feld bleibt bedienbar. */ .detFeld.auto input[type=number] { opacity: 0.45; } .detFrei + .detFeld { margin-left: 0; } .detFrei { flex: none; margin-left: auto; padding: 0 5px; border: none; background: none; cursor: pointer; color: var(--ui-fg); opacity: 0.6; font-size: 13px; line-height: 1; } .detFrei:hover { opacity: 1; } .detFrei.hidden { visibility: hidden; } /* Mehrere Schalter nebeneinander (Ort/Zeit/Datum). */ .detReihe { display: flex; flex: 0 1 auto; gap: 8px; margin-left: auto; } .detReihe label { display: flex; align-items: center; gap: 4px; white-space: nowrap; } /* Neben drei Schaltern nimmt die Beschriftung nur ihre Textbreite. */ .detRow.reihe .detLabel { flex: 0 1 auto; } /* Passen die drei nicht neben die Beschriftung, rutschen sie darunter. */ .detRow.reihe { flex-wrap: wrap; row-gap: 4px; } /* Schalter und Uhrzeit rechts in der Spalte der Werte (s. detCheckWeit). */ .detRow > input[type=checkbox], .detRow > input[type=time] { margin-left: auto; } .detHint { opacity: 0.55; line-height: 1.45; } /* Wie .fachKopf im Zahnrad. */ .detKopf { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; padding: 8px 0 0; } /* Kurzer Hinweis (s. kurzMeldung), bewusst nicht in der body.idle-Regel: er kommt gerade dann, wenn die Bedienung weggeraeumt wird. */ #kurzMeldung { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); max-width: min(480px, calc(100 * var(--vw) - 32px)); z-index: 30; background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: var(--r-fach); padding: 10px 14px; backdrop-filter: blur(10px); color: var(--ui-fg); font-size: 13px; line-height: 1.45; text-align: center; opacity: 0; transition: opacity 0.4s ease; } #kurzMeldung.an { opacity: 1; } /* Mitten im Bild wie #ladeText: eine Rueckmeldung auf eine Handlung, kein Hinweis zur Bedienung (s. showGeladenMelden). */ #kurzMeldung.mitte { top: 50%; bottom: auto; transform: translate(-50%, -50%); border: none; padding: 8px 16px; } /* Ladetext beim Nachladen einer Welt (s. ladeAnzeige, LADE_TEXT_VERZUG_MS). */ #ladeText { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; pointer-events: none; background: var(--ui-bg); border-radius: var(--r-fach); padding: 4px 10px; color: var(--ui-fg); font-size: 12px; opacity: 0; transition: opacity 0.3s; } #ladeText.an { opacity: 0.8; } /* Nur im Handy-Layout (s. unten). */ #inpZeit, #blattLeiste, #btnLage { display: none; } /* ============================================================ Handy (body.mobil, s. js/mobil.js) ------------------------------------------------------------ Dieselben Elemente, anders gestellt: eine Reiterleiste am unteren Rand, darueber als Blatt genau EINE Gruppe der Himmelsleiste. Tippziele mindestens 44 px; Eingabefelder 16 px, sonst zoomt iOS beim Antippen. ============================================================ */ body.mobil { --sicher-o: env(safe-area-inset-top, 0px); --sicher-u: env(safe-area-inset-bottom, 0px); --sicher-l: env(safe-area-inset-left, 0px); --sicher-r: env(safe-area-inset-right, 0px); /* Hoehe der Reiterleiste ohne den unteren Sicherheitsrand. */ --reiter-h: 58px; } /* Werkstatt bleibt am Rechner: Show bearbeiten und Dome-Master-Ausgabe. */ body.mobil #btnModeShow, body.mobil #btnModeShow + .dot, body.mobil #modeSwitch .trenn, body.mobil #ausgabeWahl, body.mobil #btnPanelToggle, body.mobil #btnEbenen { display: none !important; } body.mobil #modeSwitch { top: calc(var(--sicher-o) + 6px); left: calc(var(--sicher-l) + 6px); gap: 0; } body.mobil #modeSwitch button { font-size: 14px; padding: 12px 6px; } /* Ohne "Show bearbeiten" reicht "Show"; voll stiess es an die Knoepfe rechts. */ body.mobil #btnModePlay .lbl { display: none; } body.mobil #werk { top: calc(var(--sicher-o) + 6px); right: calc(var(--sicher-r) + 6px); height: 44px; gap: 0; } body.mobil #btnLage { display: block; } /* Laden wandert am Handy hierher (s. mobilAnwenden), nur im Showmodus. */ body.mobil #werk #btnLoadShow { background: transparent; border: none; color: rgba(219,228,255,0.55); padding: 11px; border-radius: var(--r-klein); line-height: 0; } body.mobil #werk #btnLoadShow .lbl { display: none; } body.mobil #werk #btnLoadShow .ico { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.95)) drop-shadow(0 0 4px rgba(0,0,0,0.8)); } body.mobil:not(.mitThumbs) #werk #btnLoadShow { display: none; } body.mobil #btnWerk, body.mobil #btnVollbild, body.mobil #btnLage { padding: 11px; } body.mobil #btnWerk .ico, body.mobil #btnVollbild .ico, body.mobil #btnLage .ico { width: 22px; height: 22px; } body.mobil #werkFach { font-size: 15px; } /* Die Reihen im Himmel-Blatt wachsen mit flex: 1 1 14em in die Breite; hier ist die Achse senkrecht, das wuerden 14em Hoehe pro Reihe. */ body.mobil #werkFach .schalterPaar { flex: none; } body.mobil #werkFach .schalterPaar button { padding: 11px 12px; font-size: 15px; } body.mobil #werkFach .fachKipp { padding: 10px 2px 4px; } /* Ohne Zeiger gibt es kein Hovern. */ body.mobil #werkFach .fachKipp:has(#chkNamenTip) { display: none; } /* Fusszeile rechts unten ueber der Reiterleiste, in der Vorfuehrung ueber der Knopfreihe (s. unten). */ body.mobil #hint { bottom: calc(var(--sicher-u) + var(--reiter-h) + 10px); right: calc(var(--sicher-r) + 12px); } body.mobil.mitThumbs #hint { bottom: calc(var(--sicher-u) + 136px); } /* Sie laege sonst auf dem unteren Rand des offenen Blatts. */ body.mobil.blattOffen:not(.mitThumbs) #hint { display: none; } /* Tippflaeche groesser als die 11-px-Zeichen, ohne die Zeile zu verschieben. */ body.mobil #hint #btnUnicorn { padding: 10px 6px; margin: -10px -6px; } body.mobil #hint #btnGeheim { padding: 10px 10px; margin: -10px -10px -10px -6px; } /* Reiterleiste. Nur im Nachthimmel: in der Vorfuehrung liegt unten die Folienleiste (body.mitThumbs). */ body.mobil #blattLeiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 4px calc(var(--sicher-r) + 6px) calc(var(--sicher-u) + 4px) calc(var(--sicher-l) + 6px); background: var(--ui-bg); border-top: 1px solid var(--ui-border); backdrop-filter: blur(10px); transition: opacity 0.4s ease; } body.mobil.mitThumbs #blattLeiste { display: none; } #blattLeiste button { flex: 1 1 0; min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; background: none; border: none; border-radius: var(--r-knopf); font-size: 11px; color: rgba(219,228,255,0.6); } #blattLeiste button .ico { width: 22px; height: 22px; } /* Kein Nachleuchten nach dem Tipp: :hover bleibt am Finger haengen. */ #blattLeiste button:not(.active):hover { background: none; } #blattLeiste button.active { color: #fff; background: var(--wahl-bg); box-shadow: inset 0 0 0 1px var(--wahl-rand); } /* Das Blatt: #panel ueber der Reiterleiste, volle Breite. Die Id schlaegt .panel.visible, deshalb ist es ohne offenes Blatt weg. */ body.mobil #panel { display: none; } body.mobil.blattOffen:not(.mitThumbs) #panel.visible { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; left: calc(var(--sicher-l) + 8px); right: calc(var(--sicher-r) + 8px); width: auto; max-width: none; margin: 0; bottom: calc(var(--sicher-u) + var(--reiter-h) + 10px); padding: 12px 14px 14px; font-size: 15px; transform: none; opacity: 1; pointer-events: auto; } body.mobil .panel .grp { display: none; } body.mobil .panel .grp.blattAktiv { display: flex; align-items: stretch; gap: 8px; } body.mobil .panel .grpTitel { font-size: 11px; } body.mobil .panel .grpReihe { flex-wrap: wrap; gap: 8px; min-height: 0; } body.mobil .panel button, body.mobil .panel input:not([type=range]) { min-height: 44px; font-size: 16px; } body.mobil .panel .grpReihe > button, body.mobil .schalterPaar button { padding: 8px 14px; } body.mobil #dt { display: none; } body.mobil #inpZeit { display: block; flex: 1 1 100%; width: 100%; padding: 8px 12px; } body.mobil .auswahl, body.mobil #suche { flex: 1 1 100%; } body.mobil .auswahlKnopf { width: 100%; padding: 8px 12px; } body.mobil #suche input[type=search] { width: 100%; padding: 8px 12px; } /* Quer bleibt ueber dem Blatt wenig Hoehe: die Liste soll die Kopfzeile frei lassen (220 px = Blatt, Reiterleiste und Kopfzeile). */ body.mobil .klappListe, body.mobil .klappListe.spalten { max-width: calc(100 * var(--vw) - 16px); max-height: min(calc(55 * var(--vh)), calc(100 * var(--vh) - 220px)); } /* Eigene Koordinaten: groessere Pfeile, das Feld selbst oeffnet die Zifferntastatur. */ body.mobil #customLoc { flex-wrap: wrap; gap: 14px; } body.mobil .dtcol button { min-height: 0; font-size: 12px; padding: 6px 18px; } body.mobil .dtcol button .chev { width: 12px; height: 12px; } body.mobil .dtcol input[type=number] { min-height: 36px; width: 3.4em; } /* Himmel: die beiden Schalterpaare und darunter das Ebenen-Fach offen ausgebreitet statt als Klappfach (der Knopf ist oben verborgen). Die Ids schlagen .hidden, das der Klick daneben setzt. */ body.mobil .schalterPaar { flex: 1 1 14em; } body.mobil .schalterPaar button { flex: 1 1 0; } body.mobil #ebenen { flex: 1 1 100%; } body.mobil #ebenenFach, body.mobil #ebenenFach.hidden { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; position: static; min-width: 0; width: 100%; max-height: calc(38 * var(--vh)); overflow-y: auto; background: none; border: none; padding: 0; backdrop-filter: none; } body.mobil #ebenenFach .fachKopf, body.mobil #magZeile { grid-column: 1 / -1; } /* min-width 0: sonst draengt ein langer Name die rechte Spalte aus dem Blatt. */ body.mobil #ebenenFach button.tgl { font-size: 14px; white-space: normal; text-align: left; padding: 6px 9px; min-width: 0; } body.mobil #ebenenFach input[type=range] { flex: 1 1 auto; width: auto; } /* Vorfuehrung wie am Rechner: Zurueck/Play/Pause unten links, die Punkte daneben (s. thumbsInLuecke), Werkzeug und Erzaehltext darueber. */ body.mobil #thumbs { bottom: calc(var(--sicher-u) + 8px); max-width: calc(100 * var(--vw) - 16px); } body.mobil:not(.vorfuehrung) #thumbs .thumb { width: 52px; height: 52px; } /* Ein Punkt ist fuer den Finger zu klein: weiter auseinander, Tippflaeche hoeher. */ body.mobil.vorfuehrung #thumbs { gap: 12px; } body.mobil.vorfuehrung #thumbs .thumb::after { inset: -16px -6px; } body.mobil #weiterAnzeige { left: calc(var(--sicher-l) + 8px); bottom: calc(var(--sicher-u) + 8px); } body.mobil #showTools { left: calc(var(--sicher-l) + 8px); bottom: calc(var(--sicher-u) + 62px); } body.mobil #showTools button { min-height: 44px; } body.mobil #sceneText { bottom: calc(var(--sicher-u) + 134px); max-width: calc(100 * var(--vw) - 24px); font-size: 15px; padding: 10px 14px; } body.mobil #sternPopup { font-size: 15px; white-space: normal; max-width: calc(100 * var(--vw) - 16px); min-width: 14em; } body.mobil #sternPopup button { min-height: 44px; font-size: 15px; }