/* seite.css — vertraute Bildsprache, eigener Absender. * * Grundlage ist eine VERMESSENE Vorlage (scratchpad/optik_vorlage.md, 17.08.2026): ein * ueblicher Videokonferenz-Webclient, live mit getComputedStyle/getBoundingClientRect am * Rechner und in schmaler Ansicht ausgelesen. Uebernommen sind Anordnung, Maße, Abstaende, * Rundungen, Bewegungen und Verhalten — also die Bildsprache, die in allen solchen * Programmen gleich ist. NICHT uebernommen und nicht verhandelbar: fremder Name, fremdes * Logo, fremder Schriftzug, fremde Markenfarbe, fremde Bilddateien. Alle Symbole sind im * HTML selbst als Vektor gezeichnet. Die Marke ist Global Advance. * * Die Zahlen, die aus der Messung stammen, stehen als Kommentar an ihrer Regel. Wer sie * "aufhuebscht", nimmt genau die Vertrautheit weg, um die es geht. * * 🔴 Was hier NICHT angefasst werden darf, weil seite.js daran haengt: * · die Sichtbarkeitsregel `body[data-zustand=…] .pantalla[data-para=…]` * · `body[data-camara="off"] #video-propio { display:none }` * · `.dialogo[hidden] { display:none }` (sonst liegt die Rueckfrage dauerhaft oben) * · `.pasos li[data-paso]` samt `.listo` * · saemtliche `id`s */ :root { /* Flaechen — neutral schwarzgrau wie bei jedem Videogespraech (gemessen). */ --escenario: #0D0D0D; /* Buehne rund um die Kachel */ --fondo: #101317; /* Grundflaeche der Anwendung */ /* Gemessene Kachelfarbe des Vorbilds. Sie steht hier als Beleg, wird aber NICHT mehr * gesetzt — siehe die Begruendung bei `.mosaico` (sichtbare Naht am Handy). */ --mosaico: #1A1A1A; --panel: #191D22; /* Karten, Rueckfrage */ --panel-2: #2A2E35; /* Vorschaukachel im Warteraum */ --linea: #2B3138; /* Schrift */ --texto: #FFFFFF; --texto-2: rgba(255,255,255,.80); --tenue: #94A3B8; /* Marke Global Advance — sie bleibt, das ist der Absender. * 🔴 Das Blau war erfunden. Die echte Firmenmarke (salesmind_marketing/assets/ * ga-logo-real.png) ist VIOLETT — Globus mit G, gemessene Kernfarben #575483 bis #9E96CF. * Ein blaues abgerundetes Quadrat oben links im Kopf eines Videogespraechs ist genau das * Zeichen, das dort sonst von einem fremden Programm steht: das schiebt die Seite Richtung * VERWECHSELBAR statt vertraut. Gewaehlt ist der Ton aus der Marke, der auf dunklem Grund * mit weisser Schrift noch 4,98:1 traegt (gemessen). */ --acento: #6C63C4; --acento-2: #837CD1; /* Gemessene Sonderfarben der Bildsprache */ --peligro: #FF0055; /* Verlassen, Stumm-Schraegstrich */ --hablando: #48DD5D; /* spricht gerade (2 px innen) */ --velo: rgba(0,0,0,.70); /* Kopf- und Fussleiste */ --cartel: rgba(0,0,0,.56); /* Namensschild im Bild */ --tocado: rgba(255,255,255,.09); /* Knopf angefasst */ --alerta: #F59E0B; --r-tecla: 8px; --r-campo: 10px; --r-tarjeta:14px; --alto-cabecera: 56px; /* Handy */ --alto-barra: 60px; /* Maße des eigenen Bildes — als Variable, weil zwei andere Regeln daran rechnen * (das Hinweisband darf es nicht zudecken). */ --propio-w: min(27vw, 8.5rem); --propio-h: calc(min(27vw, 8.5rem) * 4 / 3); /* 🔴🔴 WIEVIEL DER FUSSLEISTE UEBER DER KACHEL LIEGT — die Rechnung, die das Namensschild * rettet. Vorher stand dort schlicht `bottom:16px` gegen eine 52 px hohe Leiste: gemessen * 36 px Ueberdeckung bei 22 px Schildhoehe, also VOLLSTAENDIG verdeckt, bei 1366x768, * 1920x1080, 1024x560 und in jedem Handy-Querformat. Gruen war es nur bei 1280x800 — genau * der Groesse, in der die Abnahme-Bildschirmfotos entstanden. Auf einem 1366x768-Notebook * (die verbreitetste billige Groesse in Kolumbien und Argentinien) lag «Sebastián García · * Global Advance» quer ueber «Micrófono» und «Cámara»: sie wusste nicht, mit wem sie * spricht, und las «kaputt». * * Die Kachel haelt 16:9 und sitzt mittig, also ist ihre Hoehe min(100dvh, 100vw*9/16); was * darunter frei bleibt (`--sobra`) nimmt der Leiste einen Teil der Ueberdeckung ab. Was * uebrig bleibt, hebt das Schild an — exakt so weit, dass 4 px Luft bleiben und keinen * Millimeter weiter. Nachgerechnet: 1366x768 -> 52 px Hub (Luft 4), 1280x800 -> 12 px Hub * (Luft 4), 375x812 -> 0 px Hub (die Leiste liegt dort gar nicht auf der Kachel). */ --sobra: calc((100dvh - min(100dvh, 100vw * 9 / 16)) / 2); --tapado: max(0px, var(--alto-barra) + env(safe-area-inset-bottom) - var(--sobra)); } @media (min-width: 640px) { :root { --alto-cabecera: 48px; --alto-barra: 52px; /* gemessen: 48 / 52 */ --propio-w: 240px; --propio-h: 135px; /* gemessen: 240x135 */ } } /* 🔴 HANDY QUER. Der Umschaltpunkt kennt nur die BREITE — ein liegendes Handy (812x375, * 844x390, 740x360, 667x375) fiel deshalb komplett in die Rechner-Regeln: das eigene Bild * bekam 240x135 und belegte 34–38 % der Bildschirmhoehe genau dort, wo das Gesicht des * Gegenuebers sitzt, und aus den Knoepfen wurden beschriftete Rechtecke. Eine nervoese * Kandidatin dreht das Handy quer, weil das Gesicht hochkant nur ein schmales Band ist — * und dreht wieder zurueck, weil es verrutscht aussieht. Keine der acht Messungen kannte * diesen Fall. * Entschieden wird hier nach der HOEHE, denn das ist, was fehlt. */ @media (max-height: 480px) { :root { --alto-cabecera: 44px; --alto-barra: 48px; --propio-w: 132px; --propio-h: 74px; } } * { box-sizing: border-box; } [hidden] { display: none !important; } /* 🔴 Die Grundgroesse steht am , NICHT am . Wer sie ans haengt, macht * aus jedem `rem` in dieser Datei 14/16 seiner Groesse — die Vorschaukachel wird dann 604 * statt 700 px breit, und alle gemessenen Maße stimmen still nicht mehr. */ html, body { margin: 0; padding: 0; height: 100%; background: var(--fondo); color: var(--texto); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } body { font-size: 14px; line-height: 1.5; } .marco { min-height: 100%; min-height: 100dvh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* Im Gespraech geht die Buehne bis an die Kante; die beiden Leisten tragen den * Sicherheitsabstand selbst. */ body[data-zustand="llamada"] .marco { padding: 0; } /* --- Kopf / Marke -------------------------------------------------------------------- */ /* 🔴 Die Marke ist ein BILD (marca.png), weil sie die echte ist: Globus mit G plus * Schriftzug, aus der Firmendatei verkleinert. Vorher stand hier ein neu erfundenes blaues * Quadrat mit weissem Haken und ein gesperrter Grossbuchstaben-Schriftzug — beides kannte * die Kandidatin nicht, und die Form war die eines fremden Videoprogramms. * Hoehe fest, Breite aus dem Seitenverhaeltnis: so kann das Bild die Zeile nicht sprengen. */ .cabecera { padding: 20px 20px 0; } .marca { display: inline-flex; align-items: center; } .marca-logo { display: block; height: 30px; width: auto; max-width: 60vw; /* Faellt das Bild aus, zeigt der Browser den alt-Text. Damit der dann lesbar ist und nicht * als winziges kaputtes Symbol erscheint: */ font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--texto-2); } /* Im Gespraech wird derselbe Kopf zur Leiste — 48 px, rgba(0,0,0,.70), absolut ueber dem * Bild, darin die Titel-Pille (gemessen 24 px hoch, radius 20 px, 12 px/700). Dort sitzt * bei den ueblichen Programmen das Herstellerzeichen; hier steht Global Advance. */ body[data-zustand="llamada"] .cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: calc(var(--alto-cabecera) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 12px; background: var(--velo); display: flex; align-items: center; } /* Gemessen ist die Pille des Vorbilds 24 px hoch. Sie ist hier 32 — eine BEWUSSTE Abweichung: * das Vorbild traegt dort einen einzeiligen Schriftzug, unsere echte Marke ist zweizeilig, und * bei 16 px Bildhoehe waeren das zwei Zeilen zu 6 px. Der Absender ist im Gespraech der * einzige Ort, an dem noch «Global Advance» steht, sobald die Kopfleiste nach 3 s weggeht — * ein unleserlicher Absender ist teurer als 8 px Unterschied zur Vorlage. */ body[data-zustand="llamada"] .marca { background: rgba(0,0,0,.60); border-radius: 20px; height: 32px; padding: 0 12px; } body[data-zustand="llamada"] .marca-logo { height: 22px; } /* --- Bildschirme: genau einer ist sichtbar ------------------------------------------ */ /* 🔴🔴 DIESE LISTE IST DIE DRITTE STELLE — UND SIE WURDE VERGESSEN (18.08.2026). * Ein Bildschirm braucht drei Eintraege: einen Abschnitt in index.html, einen Zweig in * seite.js und EINE Zeile hier. Gekoppelt waren nur die ersten beiden. Gemessen war der * Stand: HTML 15 Abschnitte, seite.js 15 Zweige, diese Liste 14 — es fehlte genau * `sin_anfitrion`. Weil `.pantalla` grundsaetzlich auf display:none steht, sah die * Kandidatin in dieser Lage GAR KEINEN Bildschirm: schwarze Flaeche, nur das Logo, kein * Wort, kein Knopf, kein WhatsApp-Hinweis. Und jede Messung meldete gruen, weil sie das * body-Attribut las statt das Bild. * Seit dem 18.08. prueft `pantalla()` in seite.js nach jedem Wechsel NACH, ob wirklich * etwas zu sehen ist, macht den Abschnitt notfalls von Hand sichtbar und meldet es dem * Dienst. Diese Liste bleibt trotzdem die Wahrheit — der Rettungsanker ist der * Rettungsanker, nicht der Bauplan. * Fuenfzehn Werte, fuenfzehn Bildschirme. * Fuenf davon (pronto · reconectando · ocupado · reemplazado · sin_anfitrion) sind * Rettungsbildschirme, einer (codigo) ist RIEGEL 7 — ohne ihn haette der Passcode kein * Feld. */ .pantalla { display: none; } body[data-zustand="cargando"] .pantalla[data-para="cargando"], body[data-zustand="codigo"] .pantalla[data-para="codigo"], body[data-zustand="espera"] .pantalla[data-para="espera"], body[data-zustand="pronto"] .pantalla[data-para="pronto"], body[data-zustand="permiso"] .pantalla[data-para="permiso"], body[data-zustand="denegado"] .pantalla[data-para="denegado"], body[data-zustand="sala"] .pantalla[data-para="sala"], body[data-zustand="llamada"] .pantalla[data-para="llamada"], body[data-zustand="reconectando"] .pantalla[data-para="reconectando"], body[data-zustand="ocupado"] .pantalla[data-para="ocupado"], body[data-zustand="reemplazado"] .pantalla[data-para="reemplazado"], body[data-zustand="sin_anfitrion"] .pantalla[data-para="sin_anfitrion"], body[data-zustand="fin"] .pantalla[data-para="fin"], body[data-zustand="invalido"] .pantalla[data-para="invalido"], body[data-zustand="problema"] .pantalla[data-para="problema"] { display: flex; } .pantalla { flex: 1 1 auto; flex-direction: column; justify-content: center; align-items: flex-start; padding: 24px 20px 32px; max-width: 34rem; width: 100%; margin: 0 auto; } .pantalla.centrada { align-items: center; justify-content: center; } /* 46rem minus 2x20 px Rand ergibt ~696 px — die gemessene Vorschaukachel ist 700x394. */ .pantalla.ancha { max-width: 46rem; } .pantalla.llena { max-width: none; padding: 0; justify-content: stretch; margin: 0; } /* --- Schrift (nur die Groessen, die im Vorbild wirklich vorkommen: 12 13 14 15 16 24) -- */ h1 { font-size: 24px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; } .anfitrion { margin: 2px 0; font-size: 14px; color: var(--texto); } .hora { margin: 0 0 24px; color: var(--tenue); font-size: 14px; } .parrafo { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--texto-2); max-width: 30rem; } .parrafo strong { color: var(--texto); } .tenue { color: var(--tenue); } .nota { margin: 16px 0 0; color: var(--tenue); font-size: 13px; } /* --- Knoepfe der ruhigen Bildschirme -------------------------------------------------- */ /* Gemessen: 400 px breit, radius 10 px, 16 px/700. Die Hoehe steht bei 40 px — am Handy * waere das zu klein zum Treffen, deshalb 48 px unter 640 px und 44 px darueber. */ .acciones { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 25rem; } .boton { appearance: none; border: 0; border-radius: var(--r-campo); cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; min-height: 48px; padding: 12px 16px; width: 100%; transition: background .2s ease-in, border-color .2s ease-in, color .2s ease-in; } @media (min-width: 640px) { .boton { min-height: 44px; } } .boton.principal { background: var(--acento); color: #fff; } /* gemessen am gesperrten Hauptknopf des Vorbilds */ .boton.principal:disabled { background: rgba(255,255,255,.06); color: #ADB1B8; cursor: default; } .boton.discreto { background: transparent; color: var(--texto); border: 1px solid rgba(255,255,255,.22); } /* 🔴 HOVER NUR MIT ZEIGEGERAET. Ohne diese Klammer bleibt der «angefasst»-Ton am Handy nach * dem Tippen KLEBEN — gemessen. Was hell ist, liest sie als «eingeschaltet». */ @media (hover: hover) { .boton.principal:hover:not(:disabled) { background: var(--acento-2); } .boton.discreto:hover { background: var(--tocado); border-color: rgba(255,255,255,.34); } } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* --- Eingabefeld fuer den Code (RIEGEL 7) --------------------------------------------- */ /* 🔴 font-size MUSS >= 16px bleiben. Darunter vergroessert iOS-Safari beim Antippen die * ganze Seite, und sie sitzt danach in einer verschobenen Ansicht, in der der Knopf halb * draussen ist. Das ist kein Geschmack, das ist eine Regel des Geraets. * Die weiten Buchstabenabstaende sind Absicht: sechs Ziffern werden so beim Tippen * mitgelesen und nicht als Zahl gelesen. */ .campo { appearance: none; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-campo); background: rgba(255,255,255,.04); color: var(--texto); font: inherit; font-size: 20px; font-weight: 700; letter-spacing: .34em; text-indent: .34em; text-align: center; transition: border-color .2s ease-in, background .2s ease-in; } .campo::placeholder { color: rgba(255,255,255,.24); font-weight: 400; letter-spacing: .34em; } .campo:focus { border-color: var(--acento); background: rgba(255,255,255,.06); outline: none; } .campo:disabled { color: var(--tenue); background: rgba(255,255,255,.02); } /* Der Fehlerfall ist NUR am Rand markiert, nicht als rote Flaeche: die Kandidatin hat sich * vertippt, sie hat nichts falsch gemacht. */ body[data-zustand="codigo"].mal .campo { border-color: #7C2D12; } .aviso-campo { color: #FDBA74; } .aviso-campo.tranquilo { color: var(--tenue); } .prueba { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-campo); font-size: 13px; line-height: 1.5; color: var(--tenue); width: 100%; max-width: 25rem; } .prueba.bien { border-color: #1F5132; color: #86EFAC; } .prueba.mal { border-color: #7C2D12; color: #FDBA74; } /* --- Der Satz, der die Leere des Code-Bildschirms erklaert (MANGEL 6, 18.08.2026) ------ */ /* 🔴 ER MUSS ANDERS AUSSEHEN ALS EINE FUSSNOTE. Vor dem Code steht auf dem Bildschirm * absichtlich nichts Persoenliches mehr — kein Name, keine Uhrzeit. Genau das laesst eine * Seite wie Betrug wirken, und dann tippt sie den Code nicht ein. Der Satz, der die Leere * erklaert und zugleich warnt («den Code fragen wir nie am Telefon»), traegt damit die * ganze Glaubwuerdigkeit dieses Bildschirms. Als graue 13-px-Zeile ganz unten wird er * ueberlesen; als abgesetzter Kasten wird er gelesen. Ruhig, nicht alarmierend: eine Warnung * in Rot wuerde ihr genau in dem Moment Angst machen, in dem sie Vertrauen braucht. */ .resguardo { margin-top: 20px; padding: 12px 14px; width: 100%; max-width: 25rem; border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: var(--r-campo); background: rgba(255,255,255,.03); color: var(--texto-2); font-size: 13px; line-height: 1.55; } .resguardo strong { color: var(--texto); } /* --- Warteschlag --------------------------------------------------------------------- */ .latido { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); border-top-color: var(--acento); animation: girar 1s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .pantalla.centrada .latido { margin: 0 auto 16px; } body[data-zustand="reconectando"] .latido { margin: 0 0 20px; } /* --- Warteraum ------------------------------------------------------------------------ */ /* Vorschaukachel: 16:9 ab 640 px (gemessen 700x394, radius 14 px), am Handy 3:4 und * randlos — die Frontkamera liefert hochkant, ein 16:9-Raehmchen zeigt einen Streifen * Stirn. Das ist eine bewusste Abweichung vom Vorbild und steht so in der Vorlage. */ .previo { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-tarjeta); background: var(--panel-2); aspect-ratio: 3 / 4; max-height: 62vh; } @media (max-width: 639.98px) { .pantalla[data-para="sala"] { padding-left: 0; padding-right: 0; } .pantalla[data-para="sala"] > :not(.previo) { padding-left: 20px; padding-right: 20px; } } @media (min-width: 640px) { .previo { aspect-ratio: 16 / 9; } } #video-previo { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } /* Die Knopfpille des Vorbilds liegt unten MITTIG auf der Kachel auf: gemessen 176x52, * #050709, radius 10 px. Bei uns traegt sie den Fortschritt statt der Knoepfe, ist also * etwas breiter — aber sie ist jetzt eine mittige Pille und kein Vollbreiten-Balken mehr * (gemessen war sie 676x72,5 am Rechner und 355x72,5 am Handy: die Stelle, an der die Seite * beim Nebeneinanderhalten am ehesten als «nicht ganz das Gewohnte» auffiel). */ .tarjeta-espera { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; width: auto; max-width: calc(100% - 20px); background: #05070A; border-radius: var(--r-campo); padding: 10px 16px; text-align: center; } .conectando { margin: 0 0 6px; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .pasos li { color: var(--tenue); font-size: 13px; position: relative; padding-left: 18px; } .pasos li::before { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #3A424C; } .pasos li.listo { color: var(--texto); } .pasos li.listo::before { border-color: var(--acento); background: var(--acento); } #acciones-sala { margin-top: 16px; } /* --- Gespraech ------------------------------------------------------------------------ */ /* Buehne dunkel, Kachel 16:9 mittig eingepasst. Sie schneidet NIE ab — das Vorbild tut es * auch nicht, und der Beschnitt links/rechts war der auffaelligste Unterschied zum * Gewohnten. */ .escena { position: relative; width: 100%; height: 100dvh; min-height: 100%; background: var(--escenario); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* 🔴 Die Kachel traegt DIESELBE Farbe wie die Buehne. Sie war 7 Stufen heller (--mosaico * #1A1A1A gegen --escenario #0D0D0D) — auf dem Rechner faellt das nicht auf, weil die Kachel * dort die ganze Hoehe fuellt. Am Handy hochkant ist die Kachel aber nur 26 % der Flaeche, und * quer bleiben links und rechts Streifen: dort entstand eine sichtbare Naht quer durchs Bild, * also genau der Eindruck «selbstgebaut», gegen den die ganze Ueberarbeitung gebaut ist. * Die Geometrie bleibt unangetastet (16:9, mittig, kein Beschnitt) — nur die Naht ist weg. */ .mosaico { position: relative; width: 100%; max-width: calc(100dvh * 16 / 9); aspect-ratio: 16 / 9; background: var(--escenario); overflow: hidden; } /* Der gruene Rahmen fuer "spricht gerade" ist gemessen (2 px, innen, springt nicht). * Er ist hier vorbereitet, aber NICHT verdrahtet: das Umschalten braeuchte eine Aenderung * in seite.js, und die faellt nicht in eine Optik-Ueberarbeitung. */ .mosaico.hablando { box-shadow: var(--hablando) 0 0 0 2px inset; } /* 🔴 KEIN BILD -> DER NAME, nicht eine anonyme Umrissfigur. * Gemessen war hier eine graue Silhouette (160x160, rgba(255,255,255,.13)); die Vorlage misst * an derselben Stelle den NAMEN: mittig, fett (700), weiss, 11,85 % der Kachelhoehe. Die * Kachel ist min(100dvh, 100vw*9/16) hoch — daraus die zwei Werte unten, mit einer Untergrenze * fuer sehr kleine Fenster. */ .telon { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6%; } .telon-nombre { font-weight: 700; color: #fff; text-align: center; line-height: 1.15; font-size: max(18px, min(11.85dvh, 6.67vw)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #video-remoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; } /* --- Die zweite Kachel: der begleitende Mensch (18.08.2026) ---------------------------- */ /* Solange er da ist, teilen sich zwei gleich grosse Kacheln die Buehne — die uebliche * Bildsprache bei zwei Gegenuebern. Geht er, ist das `hidden`-Merkmal wieder gesetzt und die * Kachel des Avatars fuellt die Buehne wie zuvor. Es gibt KEINEN Uebergangseffekt und keinen * Hinweistext: sie soll dasselbe sehen wie in jedem Videogespraech, in dem jemand auflegt. * Am Handy hochkant stehen sie uebereinander — nebeneinander waeren zwei 16:9-Kacheln in * 375 px Breite je 105 px hoch, also kleiner als das eigene Vorschaubild. */ .mosaico-acompanante[hidden] { display: none; } body[data-acompanante="si"] .escena { gap: 8px; } body[data-acompanante="si"] .mosaico { max-width: min(calc(100dvh * 16 / 9), 50%); } /* 🔴 GEMESSEN, nicht geschaetzt: die Schriftgroesse des Namens ist an die BILDSCHIRM-Breite * gebunden (6,67vw). Mit zwei Kacheln ist jede nur noch halb so breit — «Global Advance» * stand danach als «Global Adva…» da, in beiden Kacheln. Der Name ist genau das, was in der * Kachel steht, solange kein Bild da ist; abgeschnitten ist er schlimmer als klein. * Nur am Rechner: am Handy stehen die Kacheln uebereinander und bleiben voll breit. */ @media (min-width: 640px) { body[data-acompanante="si"] .telon-nombre { font-size: max(16px, min(5.9dvh, 3.33vw)); } } @media (max-width: 639.98px) { body[data-acompanante="si"] .escena { flex-direction: column; } body[data-acompanante="si"] .mosaico { max-width: calc(100dvh * 16 / 9); width: 100%; } } #video-acompanante { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; } /* Namensschild unten links: rgba(0,0,0,.56), radius 4 px, 12 px, 4 px zu beiden Kanten. * Es faehrt mit der Leiste (bottom .2s ease-out) — gemessenes Verhalten. * 🔴 `--tapado` ist die Rettung: siehe die lange Begruendung oben bei :root. Die erste * `bottom`-Zeile ist der Rueckfall fuer Browser ohne dvh/max() — sie stimmt am Handy und ist * am Rechner nicht schlechter als der alte Stand. */ .cartel { position: absolute; left: 4px; z-index: 3; bottom: 4px; bottom: calc(4px + var(--tapado)); background: var(--cartel); border-radius: 4px; padding: 3px 6px; font-size: 13px; line-height: 1.35; color: #fff; max-width: calc(100% - 8px); display: flex; align-items: baseline; overflow: hidden; white-space: nowrap; transition: bottom .2s ease-out; } /* Der NAME darf gekuerzt werden, der ABSENDER nicht — deshalb zwei Elemente statt eines * Textknotens mit Ellipse. Gemessen bei 375 px und «Maria Fernanda de los Angeles Restrepo * Villalobos»: scrollWidth 423 gegen clientWidth 367, abgeschnitten wurde das Ende. */ .cartel-nombre { min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cartel-marca { flex: 0 0 auto; white-space: nowrap; color: rgba(255,255,255,.80); } .cartel-marca::before { content: " · "; white-space: pre; } @media (min-width: 640px) { .cartel { font-size: 12px; } } /* Eigenes Bild oben rechts — im Vorbild sitzt es dort, nicht unten rechts. * Am Handy bleibt es 3:4 (bewusste Abweichung, Begruendung wie bei der Vorschaukachel). */ #video-propio { position: absolute; z-index: 4; top: calc(var(--alto-cabecera) + env(safe-area-inset-top) + 12px); right: 12px; width: var(--propio-w); height: var(--propio-h); object-fit: cover; border-radius: var(--r-tecla); background: #000; box-shadow: 0 0 0 2px rgba(0,0,0,.80); transform: scaleX(-1); } body[data-camara="off"] #video-propio { display: none; } /* Hinweisband: mittig oben, 10 px unter der Kopfleiste, max 750 px, radius 14 px, * 14 px Text auf rgba(0,0,0,.93) — alles gemessen. */ .aviso { position: absolute; z-index: 150; top: calc(var(--alto-cabecera) + env(safe-area-inset-top) + 10px); left: 50%; transform: translateX(-50%); width: min(90%, 750px); background: rgba(0,0,0,.93); border-radius: var(--r-tarjeta); border-left: 3px solid var(--alerta); padding: 12px 16px; font-size: 14px; line-height: 1.45; color: var(--texto-2); } .aviso strong { color: #fff; } .aviso.suave { border-left-color: rgba(255,255,255,.22); } .aviso .boton { margin: 8px 0 2px; display: inline-block; } /* 🔴 DAS BAND DARF IHR EIGENES BILD NICHT ZUDECKEN. Gemessen tat es das hochkant * (Band 18,8–356,3 gegen Bild 261,8–363) UND quer (40,6–771,4 gegen 560–800): das Band liegt * auf z-index 150, das Bild auf 4 — es verschwand also darunter, und zwar genau in dem * Moment, in dem etwas schiefgeht. * Breite Fenster: das Band bleibt mittig und hoert vor dem Bild auf (am Rechner aendert das * nichts, 1280 px -> weiterhin die gemessenen 750 px). * Schmale Fenster: dort bliebe zu wenig uebrig, also rutscht das Band unter das Bild. */ @media (min-width: 640px) { .aviso { max-width: calc(100% - 2 * (var(--propio-w) + 24px)); } } @media (max-width: 639.98px) { .aviso { top: calc(var(--alto-cabecera) + env(safe-area-inset-top) + var(--propio-h) + 22px); } } /* Ist ihre Kamera aus, gibt es kein eigenes Bild — dann steht das Band wieder genau dort, * wo die Vorlage es misst. */ body[data-camara="off"] .aviso { max-width: none; top: calc(var(--alto-cabecera) + env(safe-area-inset-top) + 10px); } /* 🔴 NUR-TON-BETRIEB (18.08.2026). Stirbt der Avatar, wird das