/* app.css — Gerüst der VST20-App. * ========================================================================== * Grundgedanke: Die Bühne füllt den Schirm, alles andere schwebt darüber. * Vollbild ist hier der Normalzustand, nicht ein Sonderfall — deshalb nimmt * keine Leiste Platz weg. * ========================================================================== */ :root { --wasser: #0e3a52; --platte: rgba(10, 22, 32, .82); --linie: rgba(255, 255, 255, .16); --schrift: #eaf2f8; --akzent: #2e9bd6; --gefahr: #c0392b; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* die Bühne scrollt nicht */ background: var(--wasser); color: var(--schrift); font-family: "Segoe UI", system-ui, sans-serif; -webkit-text-size-adjust: 100%; } /* Das Bühnenfeld: Bezugsrahmen für alles, was über dem Wasser schwebt. ⚠ Es MUSS positioniert sein — das Cockpit liegt absolut darin, so wie in HM30. Ohne diesen Kasten hinge es am Fenster und wüsste nichts von der Bühne; auf dem Telefon quer säße es dann unter der Adresszeile. 100dvh statt 100vh: Auf dem Telefon zählt vh die ausgefahrene Adresszeile mit, die Bühne wäre dann unten abgeschnitten. */ /* ⚠ DIE BUEHNE FAENGT UNTER DER KOPFZEILE AN. Vorher stand sie auf inset:0 und fuellte den ganzen Schirm; mit der Leiste darueber lag ihr oberer Rand unter der Leiste, und die obersten 44 px der Marina waren verdeckt - samt Start- und Reset-Knopf. Die Hoehe steht als Variable, weil drei Stellen sie brauchen (Leiste, Buehne, Sperrfenster) und drei getippte 44 irgendwann zwei bleiben. */ :root { --kopf-h: 44px; } /* ======================================================= BEDIENGROESSE ===== --ui ist der Faktor, mit dem ALLE Bedienelemente ueber dem Wasser kleiner werden: Startknopf, Werkzeugleiste, Cockpit, Anzeige-Pult, untere Leiste und die Kopfzeile. Am Schreibtisch ist er 1 und aendert nichts. ⚠ EIN FAKTOR, NICHT ZEHN GETIPPTE GROESSEN. Jede Leiste einzeln zu verkleinern hiesse, beim naechsten Umbau eine zu vergessen - und dann steht ein Knopf in Originalgroesse neben lauter kleinen. ⚠ AN pointer:coarse GEBUNDEN, nicht nur an die Breite. Ein schmal gezogenes Fenster am Schreibtisch soll gross bleiben: Dort ist die Maus genau, und der Platz ist eine Entscheidung des Nutzers. Auf einem Finger-Geraet ist der Platz gegeben und die Genauigkeit die des Daumens. ⚠ NICHT KLEINER ALS 0,66. Darunter faellt die Trefferflaeche unter die Grenze, ab der man daneben tippt - dann gewinnt man Bild und verliert Bedienbarkeit. ========================================================================= */ :root { --ui: 1; /* Höhe der Rüstleiste. ⚠ EINE ZAHL FÜR VIER ELEMENTE: die Leiste selbst und die drei, die darunter anfangen. Während der Fahrt 0 - dann rückt alles nach oben nach. */ --leiste-h: 40px; --leiste-grund: #1B2A3D; } body.faehrt { --leiste-h: 0px; } /* ⚠ DIE STUFEN STEHEN IN app-cfg.php (Bediengroesse), NICHT MEHR HIER. Frueher waren es vier Media-Queries mit acht getippten Zahlen - wer eine aendern wollte, musste die Datei kennen und das Verhaeltnis zwischen --ui und --kopf-h von Hand nachziehen. Jetzt setzt core/app.js beide, sobald die Serverantwort da ist (bediengroesseAnwenden); die 1 oben bleibt der Notwert, wenn kein PHP antwortet. ⚠ EIN MEDIA-QUERY HAETTE ES NICHT GEKONNT: Welche Stufe gilt, haengt auch am Zeigergeraet UND an der Hoehe UND an der Breite zugleich - als Kaskade ausgedrueckt wird daraus eine Reihenfolge, die man nicht mehr liest. Als vier benannte Faelle im Skript steht sie da. */ /* ===================================== HOCHKANT-KARTE (Telefon) ========== Machart aus HM30 (Simulations/core/sim.css). Der Kasten liegt UEBER allem, die Buehne wird dahinter ausgeblendet. ⚠ display in einer ID-Regel gewinnt gegen das hidden-Attribut - deshalb die zweite Zeile. Ohne sie stuende die Karte auf jedem Schirm. */ #drehHinweis { position: fixed; inset: var(--kopf-h) 0 0 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--wasser); } #drehHinweis[hidden] { display: none; } body.hochkant .buehne-feld { display: none; } .dreh-karte { max-width: 340px; text-align: center; background: var(--platte); border: 1px solid var(--linie); border-radius: 12px; padding: 26px 22px 20px; } .dreh-karte h2 { margin: 4px 0 8px; font-size: 1.15rem; } .dreh-karte p { margin: 0 0 18px; font-size: .92rem; opacity: .85; line-height: 1.5; } .dreh-karte .taste { width: 100%; margin-bottom: 8px; height: 38px; } .dreh-karte .taste.leise { background: transparent; opacity: .75; font-weight: 500; } .dreh-bild { width: 108px; height: 72px; margin-bottom: 6px; } .dreh-geraet { fill: rgba(255,255,255,.10); stroke: var(--linie); stroke-width: 2; } .dreh-schirm { fill: var(--akzent); opacity: .28; } .dreh-pfeil { fill: none; stroke: var(--akzent); stroke-width: 3; stroke-linecap: round; } .dreh-spitze { fill: var(--akzent); } @media (prefers-reduced-motion: no-preference) { .dreh-geraet, .dreh-schirm { transform-origin: 60px 30px; animation: dreh-kippen 2.6s ease-in-out infinite; } } @keyframes dreh-kippen { 0%, 45% { transform: rotate(0deg); } 70%, 90% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } .buehne-feld { position: fixed; inset: var(--kopf-h) 0 0 0; height: calc(100dvh - var(--kopf-h)); overflow: hidden; } #buehne { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; /* Ziehen gehört uns, nicht dem Browser */ } /* ------------------------------------------------------------- Kopfzeile -- */ /* Die Meldezeile ueber dem Wasser - was der letzte Handgriff bewirkt hat. ⚠ RECHTS NEBEN DER KNOPFSPALTE, nicht darueber. Sie sass einmal links oben in der Ecke; seit der Startknopf dorthin gerueckt ist, lief der Text hinter dem runden Knopf durch und war halb verdeckt. Der Abstand rechnet sich aus der Knopfgroesse (--spiel-gross), damit er beim naechsten Vergroessern nicht wieder von Hand nachgezogen werden muss. ⚠ Und begrenzt: Eine lange Meldung lief sonst bis unter das Anzeige-Pult. */ .kopf { position: absolute; top: max(12px, env(safe-area-inset-top)); left: calc(max(12px, env(safe-area-inset-left)) + var(--spiel-gross) + 12px); max-width: min(52vw, 640px); display: flex; align-items: baseline; gap: 10px; pointer-events: none; /* die Zeile fängt keine Klicks ab */ text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } /* ⚠ Die Regeln fuer .marke und .szene sind WEG - beide Elemente stehen nicht mehr in der Buehne. Eine tote Regel stehenzulassen hiesse, beim naechsten Lesen nach einem Element zu suchen, das es nicht gibt. Der Szenenname sitzt jetzt in der Kopfzeile (.kopf-szene). */ .hinweis { font-size: .8rem; opacity: .8; } .hinweis.warnung { color: #ffd166; } /* ------------------------------------------------------------ Werkzeuge -- */ /* ======================================= DIE RÜSTLEISTE (Bearbeiten, Boot, Laden, Speichern) ========================================================== Sie steht OBEN, direkt unter der Kopfzeile, über die ganze Breite - und nur, solange die Simulation STEHT. Beim Start fährt sie nach oben weg. ⚠ SIE GEHÖRT NICHT ZUM FAHREN. Boot wählen, laden, speichern, bauen: alles Dinge, die man VOR dem Ablegen tut. Während des Manövers ist sie nur eine Reihe Knöpfe, die man nicht braucht und die Wasser verdeckt. Vorher lag sie unten rechts und war dauernd im Bild. ⚠ OBEN UND NICHT UNTEN: Unten links steht das Cockpit, unten rechts hätte sie über der Marina gelegen. Oben schließt sie an die Kopfzeile an und liest sich als deren zweite Zeile - genau das ist sie auch. ⚠ DIE HÖHE STEHT ALS VARIABLE (--leiste-h), weil drei andere Dinge darunter anfangen müssen: Startknopf, Werkzeugleiste und Anzeige-Pult. Fährt die Leiste weg, wird die Variable 0 und die drei rücken nach oben. Zwei getippte Zahlen liefen hier sofort auseinander. ========================================================================= */ .leiste { /* ⚠ zoom, NICHT transform: Der Kasten soll wirklich kleiner WERDEN. Die Bediengrösse --ui gilt hier wie überall (siehe app.css oben). */ zoom: var(--ui); position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; /* ⚠ EINZEILIG, UND ZWAR ZWINGEND. Die Leiste ist genau --leiste-h hoch, und um diese Zahl ruecken Startknopf, Werkzeugleiste und Pult nach. Brach sie um (Galaxy Fold quer: "Laden/Speichern" rutschten in eine zweite Zeile), ragte sie ueber ihre eigene Hoehe hinaus und legte sich ueber die Marina. Passt es nicht, wird geschoben - das sieht man, und nichts verschwindet. */ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 7px max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left)); border: 0; border-radius: 0; /* Dunkles Türkis - dieselbe Familie wie der Akzent im Cockpit, nur so tief, dass weisse Schrift darauf ruhig steht. */ background: var(--leiste-grund); backdrop-filter: blur(6px); /* ⚠ DIE TRENNLINIE ALS INNERER SCHATTEN, nicht als border-bottom. Ein Rand macht den Kasten 1 px hoeher als --leiste-h - und um genau diese Zahl ruecken Startknopf, Werkzeugleiste und Pult nach. Ein Pixel Unterschied hiesse: darunter bleibt eine Fuge oder es ueberlappt. Gemessen: mit Rand 41 px, ohne 40. */ box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14), 0 4px 14px rgba(0, 0, 0, .35); z-index: 5; /* Fährt beim Start nach oben unter die Kopfzeile. */ transition: transform .22s ease, opacity .18s ease; } /* ⚠ WÄHREND DER FAHRT WEG - aber nicht display:none. Verschwände sie hart, spränge alles darunter im selben Augenblick nach oben; so gleitet beides zusammen. pointer-events aus, damit man nicht auf etwas Unsichtbares trifft. */ body.faehrt .leiste { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* ⚠ IN DER LEISTE NIEDRIGER ALS SONST. 30 statt 34 px, damit die Leiste mit ihrem Polster genau --leiste-h hoch wird - und das ist die Zahl, um die Startknopf, Werkzeugleiste und Pult nachruecken. Rechnet man die beiden auseinander, sitzt darunter eine Luecke oder es ueberlappt. 5 + 30 + 5 = 40 = --leiste-h. */ /* ⚠ 26 px HOCH, und das Polster der Leiste traegt den Rest: 7 + 26 + 7 = 40, und 40 ist --leiste-h - die Zahl, um die Startknopf, Werkzeugleiste und Pult nachruecken. Wer die Knopfhoehe aendert, muss das Polster gegenrechnen, sonst sitzt darunter eine Fuge oder es ueberlappt. */ /* ⚠ NICHTS QUETSCHEN. In einer nowrap-Reihe schrumpfen sonst zuerst das Bootspulldown und die breiten Knoepfe ("Speichern unter …") - der Text wird abgeschnitten, statt dass die Reihe schiebt. */ .leiste > *, .leiste .gruppe > * { flex: 0 0 auto; } .leiste .taste, .leiste .feld { height: 26px; } /* ---- Die Knöpfe der Rüstleiste: grau mit schwarzer Schrift ---------- Auf dem dunklen Blau der Leiste standen sie vorher als heller Text auf einem kaum helleren Grund - lesbar, aber ohne Kante. Grau mit schwarzer Schrift hebt sie klar heraus und sagt zugleich: Das hier ist die Werkstatt, nicht das Wasser. ⚠ AUCH DAS PULLDOWN (.feld). Ein grauer Knopf neben einem dunklen Auswahlfeld sähe aus, als gehörten sie nicht zusammen. ⚠ DIE OPTIONEN IM PULLDOWN MÜSSEN MIT. Die Liste, die der Browser aufklappt, erbt die Farben nicht von selbst; ohne die Zeile stünde dort schwarze Schrift auf dunklem Grund (aus der Regel für .feld option). */ .leiste .taste, .leiste .feld { background: #3c424b; border-color: #565d68; color: #ffffff; font-weight: 600; } .leiste .feld option { background: #2a2f37; color: #ffffff; } .leiste .taste:hover { background: #4c535e; border-color: #6d7681; } .leiste .taste:disabled { opacity: .45; } /* Der aktive Bearbeiten-Knopf behält den Akzent - er zeigt einen Zustand, nicht nur eine Möglichkeit. */ .leiste .taste.haupt.an { background: var(--akzent); border-color: var(--akzent); color: #fff; } .gruppe { display: flex; align-items: center; gap: 6px; } .gruppe[hidden] { display: none; } /* ⚠ display: flex schlägt sonst hidden */ .gruppe.rechts { margin-left: auto; } .trenner { width: 1px; height: 22px; background: var(--linie); margin: 0 2px; } .taste { min-width: 38px; height: 34px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--schrift); font-size: .86rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s; } .taste:hover { background: rgba(255, 255, 255, .16); } .taste:active { transform: translateY(1px); } .taste:disabled { opacity: .38; cursor: default; } .taste.haupt.an { background: var(--akzent); border-color: var(--akzent); } .taste.gefahr:hover { background: var(--gefahr); border-color: var(--gefahr); } .feld { height: 34px; padding: 0 8px; border: 1px solid var(--linie); border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--schrift); font-size: .86rem; } .feld option { background: #16232d; } .etikett { font-size: .78rem; font-weight: 600; opacity: .75; letter-spacing: .02em; } .taste.klein { height: 28px; min-width: 0; padding: 0 9px; font-size: .78rem; } .taste.klein.an { background: var(--akzent); border-color: var(--akzent); } /* ---------------------------------------------------------- Instrumente -- */ /* Rechts oben, ueber allem, ohne Kasten: Beim Anlegen sieht man aufs Wasser. Die Zahl soll da sein, wenn man hinsieht, und sonst nicht auffallen. */ .instrumente { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 14px; pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } .anz { display: flex; align-items: baseline; gap: 4px; } .anz b { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .anz span { font-size: .7rem; opacity: .65; letter-spacing: .04em; } /* Telefon quer: Die Leiste ist sonst höher als das halbe Bild. */ @media (max-height: 460px) { .leiste { padding: 5px; gap: 5px; } .taste, .feld { height: 28px; font-size: .78rem; padding: 0 8px; } } /* ======================================================== KOPFZEILE ======== Name der App, Fassung, Profil. Aufbau wie im Logbuch, Farben wie in VST20: ⚠ Das Logbuch ist eine helle Seite mit dunkler Leiste. VST20 ist dunkel und bildschirmfuellend - eine Leiste in Logbuch-Marineblau saesse hier wie ein Fremdkoerper ueber dem Wasser. Uebernommen ist der AUFBAU, nicht die Farbe: Titel links, Fassung daneben, Profil rechts. ========================================================================= */ .kopfleiste { position: fixed; top: 0; left: 0; right: 0; height: var(--kopf-h); z-index: 40; /* ueber der Buehne, unter den Fenstern */ display: flex; align-items: center; gap: 12px; padding: 0 14px; box-sizing: border-box; background: #0e1a24; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #e8f0f6; font: 13px "Segoe UI", system-ui, sans-serif; } .konto-titel { margin: 0; font-size: .92rem; font-weight: 700; white-space: nowrap; } /* Die Fassung nimmt den freien Platz - so wandert das Profil an den rechten Rand, ohne dass ein leerer Fueller dazwischenstehen muss. */ .konto-version { flex: 1; font-size: .68rem; opacity: .55; font-weight: 600; white-space: nowrap; } .konto-version[hidden] { display: none; } /* ⚠ AUFFAELLIG, mit Absicht. Der lokale Zugang ist keine Anmeldung; wer das uebersieht, prueft eines Tages die Lizenzlogik gegen einen Nutzer, den es gar nicht gibt. */ .konto-dev { flex: 0 0 auto; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: #b8860b; color: #1a1400; } .konto-dev[hidden] { display: none; } .konto-wrap { position: relative; flex: 0 0 auto; } .konto-knopf { font-size: .76rem; font-weight: 700; color: #e8f0f6; border: 0; cursor: pointer; white-space: nowrap; background: rgba(255, 255, 255, .13); padding: 5px 11px; border-radius: 8px; } .konto-knopf:hover { background: rgba(255, 255, 255, .26); } .konto-knopf[hidden] { display: none; } .konto-menue { position: absolute; right: 0; top: calc(100% + 7px); min-width: 260px; max-width: min(86vw, 340px); padding: 6px; background: #16232d; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); z-index: 41; } .konto-menue[hidden] { display: none; } .konto-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .konto-name { font-size: .86rem; font-weight: 700; } /* ⚠ E-Mail-Adressen bieten keine Trennstellen an - ohne break-all sprengt eine lange Adresse das Pulldown nach rechts aus dem Bild. */ .konto-mail { font-size: .72rem; opacity: .6; word-break: break-all; } .konto-name[hidden], .konto-mail[hidden] { display: none; } .stufe-pille { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; background: #6b7683; color: #fff; white-space: nowrap; } .stufe-pille[hidden] { display: none; } .stufe-free { background: #6b7683; } .stufe-standard { background: #2176c1; } .stufe-pro { background: #b8860b; } .konto-abschnitt { padding: 8px 10px 4px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .5; } .konto-liste { padding: 0 10px 8px; } .konto-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: .78rem; } .konto-was { opacity: .8; } .konto-wert { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .konto-wert.ja { color: #5ecdd3; } .konto-wert.nein { color: #8a939c; } .konto-notiz { margin: 0; padding: 2px 0 6px; font-size: .76rem; opacity: .6; } /* ⚠ GILT FÜR UND