@import url("https://fonts.googleapis.com/css?family=ABeeZee|Google+Sans+Flex|Permanent+Marker|Acme|Inter|Exo+2|Cinzel|Roboto|Roboto+Mono|Open+Sans|Lato|Montserrat|Raleway|Source+Sans+Pro|Ubuntu|Nunito|Poppins|Oswald|Quicksand|Playfair+Display|Merriweather|Ubuntu+Condensed|Work+Sans|Fira+Sans|Josefin+Sans|Titillium+Web|PT+Sans|Cabin|Droid+Sans|Noto+Sans|Karla|Arimo|Hind|Pacifico|Bitter|Vollkorn|Roboto+Condensed|Maven+Pro|Muli|Comfortaa|Exo|Abril+Fatface|Lobster|Yantramanav|Poppins|Rokkitt|Roboto+Slab|Overpass|Cabin+Condensed|Archivo|Nunito+Sans|Rubik|Amatic+SC|Noto+Serif|Barlow|Arvo|Delius|Fredericka the Great|Rochester|Alex+Brush|Margarine|Frijole|Flamenco|Kranky|Chelsea+Market|Rye|Itim|Cookie|Gloria+Hallelujah|Indie+Flower|Poetsen+One|Londrina+Outline|Luckiest+Guy|Rampart+One|Creepster|Bungee|Bungee+Shade|DynaPuff|Playwrite+DE+SAS|Playwrite+DE+SAS+Guides");

@font-face {
  font-family: "Grundschrift";
  src: url(../fonts/Grundschrift.otf) format("opentype");
}
@font-face {
  font-family: "Gruenewald";
  src: url(../fonts/Gruenewald_VA_normal.ttf) format("truetype");
}

@font-face {
  font-family: "text-security-disc-compat";
  src: url(../fonts/text-security-disc-compat.ttf) format("truetype");
}
@font-face {
  font-family: "Schulschrift";
  src: url(../fonts/Schulschrift.ttf) format("truetype");
}
@font-face {
  font-family: "Federleicht";
  src: url(../fonts/Federleicht.ttf) format("truetype");
}
/* Baloo 2 (SIL Open Font License) - runde, kräftige Rundschrift. Liegt als zwei
   Subsets vor; beide laufen unter derselben Familie, die unicode-range sorgt dafür,
   dass der Browser das latin-ext-Subset nur für Zeichen ausserhalb von Latin-1
   nachlädt. */
@font-face {
  font-family: "Baloo 2";
  src: url(../fonts/Baloo2-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  src: url(../fonts/Baloo2-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Andika (SIL Open Font License) - für Einsteiger/junge Leser entwickelt, u.a. mit
   nicht durchgestrichener Null zur Unterscheidung von "0"/"O". Genutzt für die
   Rechenkästchen der schriftlichen Rechenaufgaben, siehe createWrittenAddition(). */
@font-face {
  font-family: "Andika";
  src: url(../fonts/Andika-Regular.ttf) format("truetype");
}

:root {
  --menu-bg: #ffffff;
  --menu-text: #333333;
  --almost-white: #ffffff;
  --formtext: 'Arial', sans-serif;
}

* {
  margin: 0;
  padding: 0;
}
@media print {
  @page {
    margin: 0;
  }
}
@page {
  margin: 0;
}

body {
  margin: 0 !important;
  padding: 0;
  background-color: #1b1b1b;

  font-family: var(--formtext);

  overflow: hidden;
  user-select: none;
  touch-action: none;
  pointer-events: auto !important;
}

/* Hintergrund HINTER dem body - kommt nur kurz zum Vorschein, waehrend
   body.viewer-boot unsichtbar ist (s.u.). */
html {
  background-color: #fff;
}

/* Direkter Aufruf mit Freigabe-Code (index.php?c=...): bis openViewer() fertig
   aufgeraeumt hat (Login-Maske ausgeblendet, nicht benoetigte Werkzeuge
   versteckt, Seite geladen), bleibt alles unsichtbar statt kurz den vollen
   Editor/Login-Bildschirm aufblitzen zu lassen. visibility (nicht display),
   damit Layout/Groessen weiter berechnet werden - openViewer() braucht u.a.
   $('#buehne').height()/.width() waehrend des Aufbaus. */
body.viewer-boot {
  visibility: hidden;
}

h3 {
  font-size: 1.2vw;
  font-weight: 300;
  color: rgb(222, 222, 222);
}

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 1.6667vw;
  height: 1.6667vw;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

#login_layover {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #4985de;
  background: linear-gradient(
    309deg,
    rgba(73, 133, 222, 1) 5%,
    rgba(193, 223, 245, 1) 100%
  );
  z-index: 9999999;
}

.login_line {
  display: block;
  position: absolute;
  left: 12%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 1.35vw;
  padding: 0.5%;
  padding-left: 2%;
  margin: 0px;
}

.login_label {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 13.38%;
  width: 74.5%;
  z-index: 9;
  color: #f8f8f8;
  overflow: hidden;
  font-size: 1.2vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#login_field {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 35%;
  left: 35.92%;
  width: 28.52%;
  height: 32.68%;
  z-index: 9;
  overflow: hidden;
  border-radius: 12px;
  background-color: #547cc0;
  font-size: 2.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
  border: solid #303030 1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#login_name {
  top: 23.21%;
  width: 74.2%;
  height: 12%;
  border: solid rgb(0, 0, 0) 0.740741px;
}

#login_pw {
  top: 50.95%;
  /* Um dieselbe rechte Kante wie #login_name zu behalten (12% + 2% + 74.2%
     + 0.5% = 88.7%), wird width um genau das kompensiert, was padding-right
     zusaetzlich braucht: 74.21% - (8% - 0.5%) = 66.71%. */
  width: 66.71%;
  height: 12%;
  border: solid rgb(0, 0, 0) 0px;
  font-family: "text-security-disc-compat";
  padding-right: 8%; /* Platz fuer #login_pw_toggle, das rechts im Feld sitzt */
}
/* Solange das Auge gedrueckt gehalten wird (main.js: startPasswordReveal()):
   type wechselt auf "text", aber ohne dies wuerde die Passwort-Punkte-Schrift
   (s.o.) weiter Punkte statt der echten Zeichen zeichnen. */
#login_pw.login_pw_revealed {
  font-family: inherit;
}

/* Auge zum kurzzeitigen Anzeigen des Passworts (main.js: gedrueckt halten).
   Sitzt in der von #login_pw per padding-right freigehaltenen Luecke rechts
   im Feld, gleiches Prozent-Raster wie .login_line/.login_label (Bezug ist
   #login_field). */
#login_pw_toggle {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 50.95%;
  left: 81.7%;
  width: 6%;
  height: 12%;
  z-index: 10;
  font-size: 1.2vw;
  line-height: 1;
  color: #303030;
  opacity: 0.6;
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none; /* darf kein Scrollen/Zoomen ausloesen - vgl. .draghandle */
}
#login_pw_toggle:hover { opacity: 1; }
#login_pw_toggle.login_pw_visible { opacity: 1; color: #1e63c9; }

#login_l1 {
  top: 13.3%;
  height: 7.23%;
}

#login_l2 {
  top: 41.76%;
  height: 7.01%;
}

#login_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 78.66%;
  left: 36.1%;
  width: 30.54%;
  height: 10%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.1vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#login_logo_link {
  display: block;
  position: absolute;
  top: 2%;
  left: 2%;
  width: 21%;
  z-index: 9;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

#login_logo {
  display: block;
  width: 100%;
  color: rgb(0, 0, 0);
}

#login_logo_info {
  display: block;
  text-align: center;
  margin-top: 4%;
  font-size: 1.2vw;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#login_pwhint {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 70%;
  left: 39.79%;
  width: 21%;
  height: 4.58%;
  z-index: 9;
  color: rgb(255, 255, 255);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0px;
  font-size: 1.13vw;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}
#register_text {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 78%;
  left: 20%;
  width: 60%;
  height: 4.58%;
  z-index: 9;
  color: rgb(255, 255, 255);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0px;
  font-size: 1.13vw;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}
/* #register_title ist entfallen - die Registrierung traegt ihre Ueberschrift
   jetzt selbst (#reg_intro_title). */
#pwreset_title,
#pwset_title {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 24%;
  left: 15.92%;
  width: 68.52%;
  height: 9%;
  z-index: 20;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  font-weight: bold;
  font-size: 2vw;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#pwreset_layover {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 35%;
  left: 35.92%;
  width: 28.52%;
  height: 32.68%;
  z-index: 20;
  overflow: hidden;
  border-radius: 12px;
  background-color: #547cc0;
  border: solid #303030 1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  user-select: none;
}

#pwreset_step1,
#pwreset_step2 {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#pwreset_step2 {
  display: none;
}

#pwreset_l1 {
  top: 10%;
  height: 7.23%;
}

#pwreset_email {
  top: 19.5%;
  width: 74.2%;
  height: 12%;
  border: solid rgb(0, 0, 0) 0.740741px;
}

#pwreset_info {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 8%;
  top: 35%;
  width: 84%;
  height: 33%;
  z-index: 9;
  color: #f8f8f8;
  overflow: hidden;
  font-size: 0.85vw;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

#pwreset_send_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 71%;
  left: 36.1%;
  width: 30.54%;
  height: 10%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.27vw;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}

#pwreset_cancel {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 84.5%;
  left: 25%;
  width: 50%;
  height: 7%;
  z-index: 9;
  color: rgb(255, 255, 255);
  overflow: hidden;
  font-size: 0.95vw;
  text-decoration: underline;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}

#pwreset_thanks_text {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 8%;
  top: 12%;
  width: 84%;
  height: 58%;
  z-index: 9;
  color: #f8f8f8;
  overflow: hidden;
  font-size: 1vw;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

#pwreset_ok_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 78%;
  left: 36.1%;
  width: 30.54%;
  height: 10%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.27vw;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}

#pwset_layover {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 35%;
  left: 35.92%;
  width: 28.52%;
  height: 32.68%;
  z-index: 20;
  overflow: hidden;
  border-radius: 12px;
  background-color: #547cc0;
  border: solid #303030 1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  user-select: none;
}

#pwset_step1,
#pwset_step2 {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#pwset_step2 {
  display: none;
}

#pwset_l1 {
  top: 6%;
  height: 7.23%;
}

#pwset_password1 {
  top: 15%;
  width: 74.2%;
  height: 12%;
  border: solid rgb(0, 0, 0) 0.740741px;
}

#pwset_l2 {
  top: 30%;
  height: 7.23%;
}

#pwset_password2 {
  top: 39%;
  width: 74.2%;
  height: 12%;
  border: solid rgb(0, 0, 0) 0.740741px;
}

#pwset_error {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 8%;
  top: 53%;
  width: 84%;
  height: 16%;
  z-index: 9;
  color: #ffd9d9;
  overflow: hidden;
  font-size: 0.85vw;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

#pwset_send_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 78%;
  left: 36.1%;
  width: 30.54%;
  height: 10%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.27vw;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}

#pwset_result_text {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 8%;
  top: 12%;
  width: 84%;
  height: 58%;
  z-index: 9;
  color: #f8f8f8;
  overflow: hidden;
  font-size: 1vw;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

#pwset_ok_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 78%;
  left: 36.1%;
  width: 30.54%;
  height: 10%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.27vw;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
}

/* ===== Registrierung =========================================================
   Frueher lag jedes Feld per absoluter Prozentposition in einer Karte mit fest
   55% Hoehe. Das machte die Karte unnoetig hoch, die Felder klobig (hohe Box,
   kleine Schrift) und jede Textaenderung zur Rechenaufgabe. Jetzt steht alles
   im normalen Textfluss: die Karte waechst mit ihrem Inhalt, die Felder sind
   so schlank wie die Login-Felder. Zentriert per transform, weil die Hoehe
   nicht mehr vorher feststeht. */
#register_layover {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  max-width: 42.7083vw;
  z-index: 20;
  border-radius: 14px;
  background-color: #547cc0;
  border: solid #303030 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  user-select: none;
  padding: 1.9vw 2.2vw 1.5vw;
}

#reg_intro {
  margin-bottom: 1.2vw;
}
#reg_intro_title {
  color: #ffffff;
  font-size: 1.55vw;
  font-weight: 600;
  margin: 0 0 0.55vw 0;
}
#reg_intro_text {
  color: #e7eefb;
  font-size: 0.92vw;
  line-height: 1.55;
  margin: 0;
}

#reg_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55vw 1.4vw;
}
.reg_field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* .login_line/.login_label sind global absolut positioniert (fuer das
   Login-Feld) - innerhalb der Registrierungskarte muessen sie zurueck in den
   normalen Fluss, sonst stapelten sich alle Felder uebereinander. */
#register_layover .login_label {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  justify-content: flex-start;
  color: #e7eefb;
  font-size: 0.8vw;
  margin-bottom: 0.25vw;
}
#register_layover .login_line {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  font-size: 1vw;
  padding: 0.42vw 0.7vw;
  border: solid rgba(0, 0, 0, 0.25) 1px;
  border-radius: 5px;
}
#register_layover .login_line:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Rueckmeldungen zu E-Mail/Benutzername laufen ueber beide Spalten. Sie werden
   per JS ein-/ausgeblendet (.show()/.hide()), deshalb hier display:flex als
   Sichtbar-Zustand - jQuery stellt genau diesen wieder her. */
.reg_status {
  position: static;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  font-size: 0.8vw;
  text-align: center;
  min-height: 1.1vw;
}

#register_success {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  max-width: 42.7083vw;
  z-index: 20;
  border-radius: 14px;
  background-color: #547cc0;
  border: solid #303030 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  user-select: none;
  padding: 2.6vw;
}

#register_success_text {
  color: #f8f8f8;
  text-align: center;
  font-size: 1.1vw;
  margin-bottom: 6%;
}

#register_success_ok {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 10%;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.27vw;
  cursor: pointer;
  user-select: none;
}

/* Die frueheren Einzelregeln mit festen top/left/height-Prozentwerten je Feld
   sind entfallen - Anordnung und Groesse kommen jetzt aus #reg_grid und den
   .login_line/.login_label-Ueberschreibungen weiter oben. */
#reg_error {
  display: none;
  box-sizing: border-box;
  width: 100%;
  color: #ffd9d9;
  font-size: 0.82vw;
  line-height: 1.4;
  text-align: center;
  margin-top: 0.7vw;
}

#reg_submit_btn {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 42%;
  margin: 1.2vw auto 0;
  padding: 0.55vw 0;
  color: #303030;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 5px;
  font-size: 1.05vw;
  cursor: pointer;
  user-select: none;
}
#reg_submit_btn:hover {
  background-color: #ffffff;
}

/* Registrierung ueber einen externen Anbieter (Google), unterhalb des
   Formulars. Der Knopf selbst wird von Google in #reg_google_btn gezeichnet -
   dessen Innenleben ist ein iframe und laesst sich von hier aus nicht gestalten,
   deshalb hier nur Abstaende und Zentrierung. */
#reg_social {
  margin-top: 1.1vw;
}

#reg_social_divider {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  color: #cfdcf3;
  font-size: 0.78vw;
  margin-bottom: 0.9vw;
}
#reg_social_divider::before,
#reg_social_divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.28);
}

#reg_social_hint {
  color: #e7eefb;
  font-size: 0.8vw;
  line-height: 1.45;
  text-align: center;
  margin-bottom: 0.7vw;
}

#reg_google_btn {
  display: flex;
  justify-content: center;
  min-height: 2.2vw;
}

#reg_social_status {
  display: none;
  font-size: 0.8vw;
  line-height: 1.45;
  text-align: center;
  margin-top: 0.6vw;
}

#reg_social_reset {
  color: #ffffff;
  text-decoration: underline;
  cursor: pointer;
}

/* Die von Google uebernommene E-Mail-Adresse: gesperrt, aber bewusst noch gut
   lesbar - sie soll als "schon erledigt" wirken, nicht als kaputt. Vorname und
   Name bleiben aenderbar, siehe applyOAuthProfile() in main.js. */
#register_layover .login_line.reg_locked {
  background-color: #e4e9f2;
  color: #4a5568;
  cursor: default;
}

#reg_cancel {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.8vw;
  color: rgb(255, 255, 255);
  font-size: 0.85vw;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  user-select: none;
}

#s_log {
  position: absolute;
  top: 0;
  left: 0;
  width: 5%;
  height: 5%;
  z-index: 99999;
  background-color: transparent;
  color: transparent;
  border: none;
}

#s_log:focus {
  outline: none;
}

#fullscreen_reminder {
  display: none;
  position: absolute;
  right: 2%;
  top: 2%;
  z-index: 1000;
  width: 20%;
  font-family: var(--formtext);
  font-size: 1vw;
  text-align: center;
  color: #000;
  background-color: #ffff84;
  padding: 2%;
  border: 2px solid #000;
  border-radius: 10px;
}

#buehne {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0%;
  width: 100%;
  top: 0;
  height: 100%;
  background-color: #1b1b1b;
  box-sizing: border-box;
  touch-action: none; /* Verhindert Standard-Touch-Verhalten (z. B. Browser-Zoom) */
  overflow: hidden;
}

#overlay {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  border: none;
  z-index: 98;
}

/* ===== Klapptafel =========================================================
   Beide Fabric-Leinwaende liegen auf z-index 5 (main.js setzt es auf der
   unteren, Fabrics _createUpperCanvas kopiert den Stil auf die obere). Das
   Standbild muss also darunter, der Rahmen darueber liegen. Der Rahmen darf
   keine Mausereignisse abfangen, sonst waere die Tafelkante nicht bemalbar. */
#klapp_bg {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 3;
}

#klapp_frame {
  display: none;
  position: absolute;
  box-sizing: border-box;
  border: 0.9vh solid #9a9a9a;
  border-radius: 0.5vh;
  box-shadow: 0 0.6vh 1.8vh rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 6;
}

/* Griffleiste der Klapptafeln: steht IMMER in der Ruhelage am rechten
   Bildschirmrand und bleibt dort auch sichtbar, waehrend eine Tafel draussen
   ist - nur der Griff der ausgefahrenen Tafel wandert per left-Versatz mit ihr
   mit (siehe klappPositionHandle() in main.js). Damit die stehengebliebenen
   Griffe keinen Tafelinhalt verdecken, haelt die Tafel vor der Leiste an
   (klappGeom().endLeft rechnet handleW mit ein).
   Position/Breite kommen komplett aus dem Skript, deshalb hier bewusst KEIN
   left/top/width/height. Die Griffe stapeln sich als Flex-Spalte, den Abstand
   setzt ebenfalls das Skript (er skaliert mit der Rahmenbreite). */
#klapp_handles {
  display: none;
  position: absolute;
  flex-direction: column;
  z-index: 9000;
}

/* Linke Seite gerundet, weil der Griff aus der Tafel nach links herausschaut.
   position:relative, damit der aktive Griff per left-Versatz mitwandern kann,
   ohne seinen Platz in der Spalte zu verlieren (die uebrigen Griffe sollen
   nicht nachruecken). */
.klapp_handle {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #4a4a4a;
  color: #f0f0f0;
  font-size: 1.4vh;
  cursor: pointer;
  user-select: none;
  border-radius: 7px 0 0 7px;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s;
}

.klapp_handle:hover {
  filter: brightness(1.35);
}

/* Die gerade ausgefahrene Tafel: heller und mit hellem Rand abgesetzt. */
.klapp_handle.active {
  filter: brightness(1.5);
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Dezente, entsaettigte Farben zum Unterscheiden der einzelnen Tafeln - sie
   sollen sich voneinander abheben, aber nicht vom Tafelbild ablenken.
   Dieselben Farbwerte auch an der jeweiligen Kachel im Seitenueberblick
   (.klappwrap[data-kidx]), damit Griff und Kachel zusammengehoerig wirken. */
.klapp_handle[data-idx="0"] { background-color: #4a4a4a; }
.klapp_handle[data-idx="1"] { background-color: #45607a; }
.klapp_handle[data-idx="2"] { background-color: #46705a; }
.klapp_handle[data-idx="3"] { background-color: #7a6142; }
.klapp_handle[data-idx="4"] { background-color: #6a4a66; }
.klapp_handle[data-idx="5"] { background-color: #7a4a4a; }

/* Griff an der rechten Tafelkante zum Einfahren - Gegenstueck zu den linken
   Griffen, aber immer nur EINER (es ist ja klar, welche Tafel gerade draussen
   ist) und nur sichtbar, waehrend klappActive gilt. Position setzt
   main.js (klappApplyLayout/klappPositionCloseHandle), deshalb hier bewusst
   kein left/top. Rechte Seite gerundet (schaut nach rechts aus der Tafel
   heraus), Pfeil zeigt nach rechts = Richtung des Einfahrens. */
#klapp_close_handle {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  background-color: #4a4a4a;
  color: #f0f0f0;
  font-size: 1.4vh;
  cursor: pointer;
  user-select: none;
  border-radius: 0 7px 7px 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s;
  z-index: 9000;
}

#klapp_close_handle:hover {
  filter: brightness(1.35);
}

/* Gleiche Farbe wie der linke Griff der gerade ausgefahrenen Tafel - main.js
   setzt dafuer dasselbe data-idx wie beim linken Griff (klappPositionCloseHandle). */
#klapp_close_handle[data-idx="0"] { background-color: #4a4a4a; }
#klapp_close_handle[data-idx="1"] { background-color: #45607a; }
#klapp_close_handle[data-idx="2"] { background-color: #46705a; }
#klapp_close_handle[data-idx="3"] { background-color: #7a6142; }
#klapp_close_handle[data-idx="4"] { background-color: #6a4a66; }
#klapp_close_handle[data-idx="5"] { background-color: #7a4a4a; }

/* Kennzeichnung der Klapptafel-Kacheln im Seitenueberblick */
.thumbwrap.klappwrap .pagenr {
  background-color: #4a4a4a;
  color: #fff;
}

.thumbwrap.klappwrap .thumb {
  border: 3px solid #4a4a4a;
}

.thumbwrap.klappwrap[data-kidx="1"] .pagenr { background-color: #45607a; }
.thumbwrap.klappwrap[data-kidx="1"] .thumb { border-color: #45607a; }
.thumbwrap.klappwrap[data-kidx="2"] .pagenr { background-color: #46705a; }
.thumbwrap.klappwrap[data-kidx="2"] .thumb { border-color: #46705a; }
.thumbwrap.klappwrap[data-kidx="3"] .pagenr { background-color: #7a6142; }
.thumbwrap.klappwrap[data-kidx="3"] .thumb { border-color: #7a6142; }
.thumbwrap.klappwrap[data-kidx="4"] .pagenr { background-color: #6a4a66; }
.thumbwrap.klappwrap[data-kidx="4"] .thumb { border-color: #6a4a66; }
.thumbwrap.klappwrap[data-kidx="5"] .pagenr { background-color: #7a4a4a; }
.thumbwrap.klappwrap[data-kidx="5"] .thumb { border-color: #7a4a4a; }

#home-overlay {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  border: none;
  z-index: 99999;
  background: #4985de;
  background: linear-gradient(
    309deg,
    rgba(73, 133, 222, 1) 5%,
    rgba(193, 223, 245, 1) 100%
  );
}

#home_top {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  width: 100%;
  top: 0;
  height: 5%;
  border-bottom: none;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

#newsframe {
  display: block;
  position: absolute;
  top: 33%;
  left: 3%;
  width: 40%;
  height: 57%;
  border: none;
  border-radius: 10px;
  background-color: #fff;
  color: #303030;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
}

#tsrbox {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 3%;
  left: 4%;
  width: 40%;
  height: 30%;
  border: none;
  border-radius: 10px;
  background-color: #363636;
}

#tsrpic {
  display: block;
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border: none;
  background-color: #363636;
}

#tsrtext {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 2%;
  left: 48%;
  width: 48%;
  height: 30%;
  border: none;
  border-radius: 10px;
  background-color: #f0f6ff;
  color: #181818;
  padding: 2%;
  font-size: 0.8vw;
  font-weight: bold;
}

#newsbox {
  display: block;
  position: absolute;
  top: 38%;
  left: 4%;
  width: 86%;
  height: 50%;
  border: none;
  border-radius: 10px;
  background-color: #f0f6ff;
  color: #303030;
  padding: 3%;
font-family: Roboto, sans-serif;
  font-size: 1.3vh;
  overflow-y: auto;
}

#new_project_popup {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 70%;
  width: 40%;
  height: 27%;
  background-color: #fcfcfc;
  z-index: 9999;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
}

#new_project_btn {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  left: 10%;
  top: 78%;
  width: 80%;
  height: 14%;
  border: none;
  border-radius: 5px;
  color: #fff;
  background-color: #4a90d9;
  z-index: 99999;
  text-align: center;
  font-size: 1.1vw;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
#new_project_btn:hover {
  background-color: #357abd;
}

#np_ratios {
  display: flex;
  position: absolute;
  justify-content: space-between; /* Gleichmäßige Lücken */
  align-items: center; /* Vertikale Ausrichtung */
  flex-wrap: wrap; /* Bilder umbrechen, wenn Platz nicht reicht */
  left: 10%;
  width: 80%;
  top: 45%;
  gap: 0.7rem; /* Optionale Lücke zwischen Bildern */
}

.np_ratio_img {
  width: 9%;
  height: 25%;
  border: 2px solid #cdd3dd;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.np_ratio_img:hover {
  border-color: #4a90d9;
}

/* Kleiner Zeiger, der dauerhaft unter dem zur tatsaechlichen Bildschirm-
   aufloesung passenden Format steht (positioniert per JS, siehe
   positionNativeRatioMarker() in main.js - die Bilder liegen in einem
   Flexbox-Zeilenumbruch, eine reine CSS-Position waere nicht zuverlaessig).
   Bleibt stehen, egal welches Format der Nutzer stattdessen ANKLICKT (.np_select
   ist davon unabhaengig) - zeigt nur, was zum Geraet passt, nicht die Auswahl. */
#np_native_marker {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #ff8c00;
  transform: translateX(-50%);
  pointer-events: none;
  display: none;
  z-index: 10;
}

#ratio_label {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 30%;
  left: 0;
  width: 100%;
  font-size: 1vw;
  color: #303030;
}
#ratio_title {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 7%;
  left: 0;
  width: 100%;
  font-size: 1.2vw;
  font-weight: bold;
  color: #303030;
}

#np_close {
  display: block;
  position: absolute;
  top: 3%;
  right: 3%;
  width: 5%;
  height: auto;
}

/* Ein Stueck links von #np_close (siehe dort). */
#np_helpbtn {
  display: block;
  position: absolute;
  top: 3%;
  right: 10%;
  width: 5%;
  height: auto;
  cursor: pointer;
  border-radius: 9px;
  transition: background-color 0.12s;
}
#np_helpbtn:hover {
  background-color: #eef4ff;
}

#version {
  position: absolute;
  top: 98%;
  right: 5%;
  font-size: 0.7vw;
  color: rgb(193, 193, 193);
}

/* leftmenu */
/* Werkzeugleisten: weiche Kante statt harter Haarlinie. Die frueheren
   1px-Rahmen in Grau liessen die Leisten wie aufgeklebte Platten wirken -
   jetzt ein zarter Schatten, und die Innenkante der linken Leiste ist
   abgerundet (Optik nach [[mathe-dialog-design-system]]). */
#tools {
  display: block;
  position: absolute;
  /* Haengt an der Hoehe von #topmenue (6.2%) - beide zusammen aendern.
     Ebenfalls daran ausgerichtet: #ausrichtung, #optionmenu, #manage_options. */
  top: 6.2%;
  left: 0;
  width: 3.5%;
  height: 93.8%;
  border: none;
  margin: 0;
  padding: 0.3125vw 0 0;
  box-sizing: border-box;
  z-index: 999;
  background-color: var(--menu-bg);
  /* Bewusst KEINE Eckenrundung: oben stiess die gerundete rechte Ecke direkt
     an die Unterkante von #topmenue und riss dort eine sichtbare Kerbe auf.
     Die weiche Wirkung kommt allein aus dem Schatten. */
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
}

#topmenue {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: start;
  align-items: center;
  /* Etwas hoeher als frueher (5%): bei 46px stiessen Symbol und Beschriftung
     aneinander, lange Beschriftungen ueberlappten das Symbol. Wer das aendert,
     muss #tools/#ausrichtung/#optionmenu/#manage_options mitziehen. */
  height: 6.2%;
  width: 100%;
  border: none;
  margin: 0;
  user-select: none;
  overflow: hidden;
  z-index: 999;
  background-color: var(--menu-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

#ausrichtung {
  display: none;
  position: absolute;
  top: 6.25%; /* direkt unter #topmenue, s. dort */
  left: 20%;
  justify-content: start;
  align-items: center;
  /* Icon-Zeile bleibt unveraendert (height:5%, wie zuvor) - .ttool (height:85%)
     bezieht sich darauf, also darf sich das hier NICHT aendern. Der
     zusaetzliche Platz fuer die Objektanzahl-Zeile kommt stattdessen ueber
     padding-bottom (siehe unten) - dank content-box (kein box-sizing:border-box
     hier) wirkt sich das nicht auf die Content-Hoehe/Icon-Groesse aus. */
  height: 5%;
  border: none;
  margin: 0;
  padding: 0.6%;
  padding-bottom: calc(0.6% + 0.6771vw);
  user-select: none;
  overflow: hidden;
  z-index: 999;
  background-color: var(--menu-bg);
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

/* Absolut positioniert (siehe Nutzer-Feedback) - dadurch nimmt diese Zeile
   NICHT am Flex-Layout der Icon-Reihe teil und kann sie nicht verzerren
   (frueherer Versuch mit Spalten-Layout + align-items:stretch hat genau das
   verursacht: .ttool nutzt margin:auto zum Zentrieren, das griff dann auf
   einmal auch horizontal und riss die Icons auseinander). */
#ausr_count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3646vw;
  text-align: center;
  font-size: clamp(0.5729vw, 0.85vw, 0.7813vw);
  color: #666;
  line-height: 1;
}

#bottommenu {
  display: flex;
  position: absolute;
  justify-content: start;
  align-items: center;
  border: none;
  margin: 0;
  padding: 0;
  left: 60%;
  top: 94%;
  height: 5.5%;
  user-select: none;
  overflow: hidden;
  z-index: 999;
}

/* Untere Leiste. Statt eines zu 40% durchsichtigen grauen Bandes mit harter
   dunkler Oberkante jetzt eine leicht durchscheinende helle Flaeche (die
   Transparenz steckt in der Farbe, nicht mehr in opacity) und ein weicher
   Schatten nach oben. */
#bottomstrip {
  display: block;
  position: absolute;
  z-index: 1000;
  background-color: rgba(252, 252, 252, 0.82);
  left: 0;
  top: 94%;
  width: 100%;
  height: 6%;
  margin: 0;
  padding: 0;
  border-top: none;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

#indicator {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  left: 18%;
  top: 92%;
  width: 9%;
  height: 4.5%;
  z-index: 9999999;
  border: 1px solid grey;
  border-radius: 50px;
  background-color: #fff;
  user-select: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#unlocksymbol {
  display: none;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 2%;
  height: 3%;
  z-index: 9999;
  border: 1px solid #333333;
  background-color: rgb(83, 255, 118);
  border-radius: 50px;
}

#unlock_img {
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  border: none;
}

.ind_img {
  width: 25%;
  height: auto;
  border: none;
  padding: 2%;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.table-chrome-buttons {
  display: none;
  position: absolute;
  z-index: 9999999;
  gap: 0.2083vw;
}

#tableRowButtons {
  /* links unten an der Tabelle: vom links gesetzten Ankerpunkt aus nach links
     herausschieben, damit die Buttons außerhalb der Tabelle liegen */
  transform: translateX(-100%);
}

/* ---------- Zellen-Dialog der Text-Tabelle (#ttcell_dialog) ------------------
   Weisse Karte im Stil des Mathe-Dialogs. touch-action:none, damit ein
   Fingertipp nicht als Scrollgeste verzoegert/abgebrochen wird (siehe
   #showtext_bar). */
#ttcell_dialog {
  display: none;
  position: absolute;
  z-index: 9999999;
  flex-direction: column;
  gap: 0.45vw;
  padding: 0.6vw 0.8vw;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
  font-family: Arial, sans-serif;
  font-size: 0.78vw;
  color: #333333;
  user-select: none;
  touch-action: none;
}
.ttc_row {
  display: flex;
  align-items: center;
  gap: 0.4vw;
}
.ttc_label {
  min-width: 5.4vw;
  color: #6b7688;
  font-weight: 600;
}
.ttc_sep {
  height: 1px;
  background: #eceff4;
}
.ttc_dot {
  width: 1.55vw;
  height: 1.55vw;
  border-radius: 50%;
  border: 1px solid #c3c9d4;
  box-sizing: border-box;
  cursor: pointer;
}
.ttc_dot.ttc_on {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4a90d9;
}
/* "keine Farbe": weiss mit rotem Schraegstrich */
.ttc_dot.ttc_none {
  background: linear-gradient(to top right, #ffffff calc(50% - 1px), #e03030 calc(50% - 1px),
    #e03030 calc(50% + 1px), #ffffff calc(50% + 1px));
}
/* "weitere Farben" oeffnet den Farbwaehler der App */
.ttc_dot.ttc_more {
  background: conic-gradient(#ff5050, #ffd84a, #6bd66b, #4ad3ff, #5a7dff, #d25aff, #ff5050);
}
.ttc_seg {
  display: flex;
  border: 1px solid #c9d6ee;
  border-radius: 6px;
  overflow: hidden;
}
.ttc_segbtn {
  padding: 0.25vw 0.65vw;
  background: #ffffff;
  color: #2255aa;
  cursor: pointer;
}
.ttc_segbtn + .ttc_segbtn {
  border-left: 1px solid #c9d6ee;
}
.ttc_segbtn.ttc_on {
  background: #4a90d9;
  color: #ffffff;
}
.ttc_btn {
  padding: 0.32vw 0.7vw;
  border-radius: 6px;
  background: #e8f0fe;
  color: #2255aa;
  white-space: nowrap;
  cursor: pointer;
}
.ttc_btn:hover {
  background: #d6e4fc;
}
.ttc_btn.ttc_del {
  background: #fdecec;
  color: #b03030;
}
.ttc_btn.ttc_del:hover {
  background: #fad9d9;
}
/* Sichtbare Rueckmeldung am Board - dort gibt es kein :hover. */
.ttc_btn.ttc_down,
.ttc_dot.ttc_down {
  filter: brightness(0.85);
}
.ttc_btn.ttc_disabled {
  background: #f1f2f4;
  color: #b4b8c0;
  pointer-events: none;
}
/* Verschiebe-Pfeile: schmal, damit die Zeilen-/Spaltenreihe nicht ausufert. */
.ttc_btn.ttc_move {
  padding: 0.32vw 0.45vw;
  font-size: 0.7vw;
}
.ttc_dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35vw;
}
/* Umschaltknopf "verdecken": eingeschaltet wie ein gewaehltes Segment. */
.ttc_btn.ttc_toggle.ttc_on {
  background: #4a90d9;
  color: #ffffff;
}
#ttc_sel_row {
  display: none;
}
#ttc_sel_info {
  color: #2255aa;
  font-weight: 600;
}
.ttc_hint {
  max-width: 24vw;
  font-size: 0.66vw;
  color: #8a93a3;
  line-height: 1.3;
}

/* ---------- Tippen im Showmodus ----------------------------------------------
   Eigener Knopf, bewusst AUSSERHALB der weissen Leiste #mainmode - mit etwas
   Abstand links von Auswahl/Stift/Farbe, nicht mit ihnen in einer Reihe. Dafuer
   liegt er trotzdem als DOM-Kind von #mainmode (das position:absolute traegt
   und damit den Bezugsrahmen liefert) und wird selbst position:absolute
   herausgenommen - so bleibt "right: calc(100% + Abstand)" unabhaengig von der
   tatsaechlichen (inhaltsabhaengigen, nirgends fest verankerten) Breite von
   #mainmode gueltig, ganz ohne die Position per JS auszumessen. */
#showtext {
  display: none;
  position: absolute;
  right: calc(100% + 0.8vw);
  top: 10%;
  height: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #363636;
  background-color: #ffffff;
  color: #303030;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.3vw;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
/* Startet ausgeblendet; playMode() blendet ihn mit display:flex ein (NICHT per
   jQuery .show() - das setzte bei einem div "block" und die Zentrierung des
   "T" ginge verloren). */
/* Aktiv-Farbe ist ABSICHTLICH dieselbe wie markieren() fuer jedes andere
   Werkzeug vergibt (siehe main.js) - #baceff, nicht ein eigener Blauton. Die
   Klasse heisst bewusst NICHT "modus": .modus wird app-weit fuer sehr viele,
   fachfremde Zeichenwerkzeuge verwendet, und #showtext soll nur von seinen
   eigenen Stellen (de)markiert werden (Klick auf sich selbst, auf Stift, auf
   Auswahl, Escape) - siehe activateShowText()/deactivateShowText(). */
#showtext.marked {
  background-color: #baceff;
}

/* Mini-Leiste unter dem getippten Text. Optik bewusst wie #solid3d_overlay:
   dunkel, halbtransparent, ohne Titel - der Blick soll beim Text bleiben.
   Masse in vw, damit die Knoepfe auf einem grossen Board mitwachsen und mit
   dem Finger zu treffen sind. */
#showtext_bar {
  display: none;
  position: absolute;
  z-index: 9999999;
  align-items: center;
  gap: 0.7vw;
  padding: 0.55vw 0.8vw;
  border-radius: 0.9vw;
  background: rgba(24, 24, 28, 0.72);
  box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.35);
  user-select: none;
  /* Ohne dies wertet der Browser einen Fingertipp auf der Leiste als moegliche
     Scroll-/Zoomgeste, verzoegert ihn und bricht die Pointer-Folge notfalls mit
     pointercancel ab - der Knopfdruck ginge dann verloren. Die Schriftliste
     nimmt sich das Panning weiter unten wieder zurueck, sie muss scrollen. */
  touch-action: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}
/* Nach 3s Untaetigkeit ausgeblendet (siehe scheduleShowTextBarFade()) - bleibt
   im Layout/display:flex, damit sie ohne Sprung wieder einblendet und die
   Textbox weiter an ihr entlang positioniert werden kann. */
#showtext_bar.stb_faded {
  opacity: 0;
  pointer-events: none;
}
.stb_group {
  display: flex;
  align-items: center;
  gap: 0.45vw;
}
.stb_sep {
  width: 1px;
  height: 1.9vw;
  background: rgba(255, 255, 255, 0.25);
}
/* Die drei Groessenstufen zeigen ihre Wirkung selbst: das A waechst mit. */
.stb_size,
#stb_fontbtn,
#stb_resizebtn,
#stb_kbdbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 0.5vw;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
.stb_size[data-step="1"] { font-size: 0.85vw; }
.stb_size[data-step="2"] { font-size: 1.2vw; }
.stb_size[data-step="3"] { font-size: 1.6vw; }
#stb_fontbtn { font-size: 1.05vw; }
#stb_resizebtn { font-size: 1.3vw; }
/* Tastatursymbol: Umriss als weisse Linie, die Tasten darin gefuellt - damit
   es auch auf dem blauen Hintergrund des eingeschalteten Zustands lesbar
   bleibt. */
#stb_kbdbtn svg {
  width: 1.8vw;
  height: auto;
  display: block;
}
#stb_kbdbtn svg rect {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
}
#stb_kbdbtn svg .stb_kbd_keys rect {
  fill: #ffffff;
  stroke: none;
}
.stb_size:hover,
#stb_fontbtn:hover,
#stb_resizebtn:hover,
#stb_kbdbtn:hover {
  background: rgba(255, 255, 255, 0.22);
}
.stb_size.stb_on,
#stb_fontbtn.stb_on,
#stb_resizebtn.stb_on,
#stb_kbdbtn.stb_on {
  background: #4a90d9;
}
.stb_dot {
  width: 1.9vw;
  height: 1.9vw;
  border-radius: 50%;
  border: 0.12vw solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.stb_dot.stb_on {
  border-color: #ffffff;
  box-shadow: 0 0 0 0.16vw rgba(255, 255, 255, 0.85);
}
/* Schriftliste: klappt ueber der Leiste auf, damit sie den Text nicht
   verdeckt. Scrollt in sich - es sind viele Schriften. */
#stb_fontlist {
  display: none;
  position: absolute;
  right: 0.5vw;
  bottom: calc(100% + 0.4vw);
  width: 14vw;
  max-height: 18vw;
  overflow-y: auto;
  overflow-x: hidden;
  /* Holt sich das senkrechte Wischen zurueck, das #showtext_bar mit
     touch-action:none fuer sich abgeschaltet hat - sonst liesse sich die
     lange Schriftenliste mit dem Finger nicht scrollen. */
  touch-action: pan-y;
  padding: 0.3vw;
  border-radius: 0.7vw;
  background: rgba(24, 24, 28, 0.95);
  box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.45);
}
.stb_font_item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.35vw 0.6vw;
  border-radius: 0.4vw;
  color: #ffffff;
  font-size: 1.0vw;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.stb_font_item:hover {
  background: rgba(255, 255, 255, 0.16);
}
.stb_font_item.stb_on {
  background: #4a90d9;
}
/* Schriftname links (ellipsis, in seiner eigenen Schrift), Favoriten-Stern
   rechts - siehe renderShowTextFonts() in main.js. */
.stb_font_item .stb_fname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stb_star {
  flex: 0 0 auto;
  color: #6f6f77;
  font-size: 1.05vw;
  line-height: 1;
  padding: 0 0.15vw;
}
.stb_star:hover {
  color: #ffc233;
}
.stb_star.is-fav {
  color: #f5b301;
}
.stb_fontsep {
  padding: 0.3vw 0.6vw 0.2vw;
  font-size: 0.72vw;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9aa2;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.2vw;
}
.stb_fontsep:first-child {
  border-top: none;
  margin-top: 0;
}

/* ---------- Bildschirmtastatur im Showmodus (#showtext_kbd) -----------------
   Schwarz und deutlich groesser als die Mini-Leiste: sie wird am Board mit dem
   Finger bedient, oft aus zwei Metern Entfernung. Alle Masse in vw, damit die
   Tasten auf einem grossen Board mitwachsen; die Hoehe folgt daraus von selbst.
   Position setzt positionShowTextKeyboard() in main.js (oben oder unten, je
   nachdem, wo der getippte Text steht). */
#showtext_kbd {
  display: none;
  position: absolute;
  z-index: 9999999;
  flex-direction: column;
  gap: 0.45vw;
  padding: 0.8vw;
  border-radius: 1vw;
  background: rgba(10, 10, 12, 0.94);
  box-shadow: 0 0.3vw 1.6vw rgba(0, 0, 0, 0.55);
  user-select: none;
  /* Wie bei der Mini-Leiste: ein Fingertipp darf nicht als Scrollgeste
     ausgelegt und dadurch verschluckt werden. */
  touch-action: none;
}
.stk_row {
  display: flex;
  justify-content: center;
  gap: 0.45vw;
}
.stk_key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4vw;
  height: 3.4vw;
  padding: 0 0.5vw;
  border-radius: 0.5vw;
  background: #2e2e34;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 1.5vw;
  line-height: 1;
  cursor: pointer;
}
.stk_key:hover {
  background: #43434c;
}
/* Sichtbare Rueckmeldung beim Druecken - auf einem Board sieht man den
   Mauszeiger nicht, der Hover-Effekt allein genuegt dort nicht. */
.stk_key.stk_down {
  background: #4a90d9;
}
/* Sondertasten etwas breiter und in ruhigerem Grau, damit die Buchstaben die
   auffaelligen bleiben. */
.stk_key.stk_wide {
  min-width: 5.6vw;
  background: #3a3a42;
  font-size: 1.2vw;
}
.stk_key.stk_space {
  min-width: 22vw;
  background: #3a3a42;
}
/* Umschalttaste eingerastet (einmal tippen = naechster Buchstabe gross,
   zweimal = feststellen). */
.stk_key.stk_on {
  background: #4a90d9;
}
.stk_key.stk_lock {
  background: #1b6bb5;
}
.stk_key.stk_close {
  background: #6d2b2b;
}
.stk_key.stk_close:hover {
  background: #8a3636;
}

/* ---------- Drehregler fuer 3D-Koerper im Showmodus (#solid3d_overlay) -------
   Sitzt auf derselben Ebene wie die Tabellen-Knoepfe und wird genauso
   positioniert (Objektkoordinaten aus getBoundingRect, siehe
   positionSolid3dOverlay in main.js).

   Bewusst zurueckhaltend gestaltet: dunkel und halbtransparent, ohne Titel und
   ohne Rahmen. Der Blick soll beim Koerper bleiben, nicht bei der Bedienung.
   Die Masse stehen in vw, damit die Regler auf einem grossen Board
   entsprechend groesser werden - dort werden sie mit dem Finger bedient. */
#solid3d_overlay {
  display: none;
  position: absolute;
  z-index: 9999999;
  padding: 0.7vw 0.9vw;
  border-radius: 0.9vw;
  background: rgba(24, 24, 28, 0.72);
  box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.35);
  user-select: none;
  touch-action: none;
  opacity: 0.8;
  transition: opacity 0.6s ease;
}
/* Nach 5s Untaetigkeit ausgeblendet (siehe scheduleSolid3dOverlayFade() in
   main.js) - bleibt im Layout/display:block, damit es ohne Sprung wieder
   einblendet und weiter mit dem Koerper mitwandern kann. */
#solid3d_overlay.s3o_faded {
  opacity: 0;
  pointer-events: none;
}
.s3o_row {
  display: flex;
  align-items: center;
  gap: 0.7vw;
}
.s3o_row + .s3o_row {
  margin-top: 0.55vw;
}
.s3o_label {
  width: 1.2vw;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 1.0vw;
  font-weight: bold;
  line-height: 1;
}
/* Achsenfarben wie in Blender */
.s3o_label.s3o_x { color: #e8453c; }
.s3o_label.s3o_y { color: #8fc93a; }
.s3o_label.s3o_z { color: #3b82d6; }

.s3o_slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.8vw;
  margin: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.s3o_slider::-webkit-slider-runnable-track {
  height: 0.75vw;
  border-radius: 0.4vw;
  background: rgba(255, 255, 255, 0.22);
}
.s3o_slider::-moz-range-track {
  height: 0.75vw;
  border-radius: 0.4vw;
  background: rgba(255, 255, 255, 0.22);
}
/* Griffel bewusst gross: auf einem 1920er Board sind 2.4vw rund 46 px und
   damit sicher mit dem Finger zu treffen. */
.s3o_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 50%;
  border: 0.15vw solid rgba(255, 255, 255, 0.9);
  /* Griffel mittig auf der Spur: halbe Griffelhoehe minus halbe Spurhoehe */
  margin-top: -0.825vw;
  box-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.45);
}
.s3o_slider::-moz-range-thumb {
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 50%;
  border: 0.15vw solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.45);
}
.s3o_slider.s3o_x::-webkit-slider-thumb { background: #e8453c; }
.s3o_slider.s3o_y::-webkit-slider-thumb { background: #8fc93a; }
.s3o_slider.s3o_z::-webkit-slider-thumb { background: #3b82d6; }
.s3o_slider.s3o_x::-moz-range-thumb { background: #e8453c; }
.s3o_slider.s3o_y::-moz-range-thumb { background: #8fc93a; }
.s3o_slider.s3o_z::-moz-range-thumb { background: #3b82d6; }

/* "Zurück in den Startblick" - sitzt in der Z-Zeile rechts neben dem Regler,
   damit das Overlay nicht um eine ganze Zeile hoeher wird. Bewusst unauffaellig
   (gleiche gedaempfte Optik wie die Reglerspuren), aber mit fingertauglicher
   Groesse wie die Griffel. */
.s3o_reset,
.s3o_spacer {
  flex: 0 0 auto;
  width: 2.4vw;
  height: 2.4vw;
}
.s3o_reset {
  padding: 0;
  border: 0.15vw solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1.3vw;
  line-height: 1;
  cursor: pointer;
}
.s3o_reset:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Derselbe Knopf im Objektinspektor - dort als beschrifteter Knopf. */
#solid3d_reset {
  font-family: Arial, sans-serif;
  font-size: 0.85vw;
  padding: 0.25vw 0.6vw;
  border: 1px solid #a8b6cc;
  border-radius: 0.3vw;
  background-color: #e3e9f3;
  color: #303030;
  cursor: pointer;
}
#solid3d_reset:hover {
  background-color: #c7d3e8;
}

.table-chrome-btn {
  width: 1.1458vw;
  height: 1.1458vw;
  border: 1px solid #888888;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333333;
  font-size: 0.7292vw;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  user-select: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.table-chrome-btn:hover {
  background-color: #ffffff;
}

#extrashapes {
  display: none;
  position: absolute;
  top: 15%;
  left: 3.5%;
  width: 3%;
  border: none;
  margin: 0;
  padding: 0.5%;
  background-color: var(--menu-bg);
  z-index: 9999;
  border: 1px solid #303030;
  border-radius: 0px 5px 5px 0px;
}

#maths {
  display: none;
  position: absolute;
  top: 40%;
  left: 3.5%;
  width: 3%;
  border: 1px solid #303030;
  margin: 0;
  padding: 0.5%;
  background-color: var(--menu-bg);
  z-index: 9999;
  border-radius: 0px 5px 5px 0px;
}
#weiteres {
  display: none;
  position: absolute;
  top: 35%;
  left: 3.5%;
  width: 3%;
  border: 1px solid #303030;
  margin: 0;
  padding: 0.5%;
  background-color: var(--menu-bg);
  z-index: 9999;
  border-radius: 0px 5px 5px 0px;
}
#image_funcs {
  display: none;
  position: absolute;
  top: 30%;
  left: 3.5%;
  width: 3%;
  border: 1px solid #303030;
  margin: 0;
  padding: 0.5%;
  background-color: var(--menu-bg);
  z-index: 9999;
  border-radius: 0px 5px 5px 0px;
}

/* Gemeinsame Optik der Ausklappmenues an der linken Werkzeugleiste. Bewusst
   als Sammelregel NACH den vier Einzelregeln - so bleiben deren Positionen
   und Groessen unberuehrt und nur das Erscheinungsbild wird vereinheitlicht
   (weicher Schatten statt 1px-Rahmen, s. [[mathe-dialog-design-system]]).
   Links bleibt eckig, weil die Menues buendig an der Leiste ansetzen. */
#extrashapes,
#maths,
#weiteres,
#image_funcs {
  border: none;
  border-radius: 0 12px 12px 0;
  padding: 0.3125vw 0.2083vw;
  box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.16);
}

/* Lineatur-Auswahl des Schreiblinien-Werkzeugs. Setzt wie die vier Menues
   oben buendig an der Werkzeugleiste an, ist aber breiter: die drei Varianten
   brauchen eine Vorschau ihres Linienbilds plus Beschriftung, ein 3%-Symbol
   wuerde sie nicht unterscheidbar machen. Optik nach dem Vorbild von
   #mathe_options_dialog (weisse Karte, Arial, blaue Hervorhebung). */
#lineaturen {
  display: none;
  position: absolute;
  /* Gleiche Hoehe wie #weiteres - dort sitzt der Knopf #lines, und das Menue
     tritt beim Klick an dessen Stelle. */
  top: 35%;
  left: 3.5%;
  width: 11vw;
  z-index: 9999;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  border-radius: 0 12px 12px 0;
  margin: 0;
  padding: 0.5vw 0.55vw 0.65vw 0.55vw;
  box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.16);
}

#lineaturen .lin_head {
  font-size: 0.78vw;
  font-weight: bold;
  color: #3051a1;
  margin-bottom: 0.45vw;
}

#lineaturen .lin_opt {
  display: block;
  cursor: pointer;
  border: 1px solid #d5dced;
  border-radius: 7px;
  padding: 0.35vw 0.4vw 0.3vw 0.4vw;
  margin-bottom: 0.35vw;
  background-color: #ffffff;
}

#lineaturen .lin_opt:hover {
  background-color: #eaf1ff;
  border-color: #3051a1;
}

#lineaturen .lin_prev {
  display: block;
  width: 100%;
  height: 2.2vw;
}

/* Strichstaerken der Vorschau: dieselbe Abstufung wie in den echten
   Lineaturen (kraeftige Grund- und Mittellinie, duenne Hilfslinien).
   non-scaling-stroke ist noetig, weil die Vorschau mit
   preserveAspectRatio="none" in die Breite gezogen wird - ohne das waeren die
   senkrechten Kanten des 3.-Klasse-Bands deutlich dicker als die waagerechten
   Linien daneben. */
#lineaturen .lin_prev line,
#lineaturen .lin_prev rect {
  vector-effect: non-scaling-stroke;
}

#lineaturen .lin_prev .lin_bold {
  stroke: #6e6e6e;
  stroke-width: 2.2;
}

#lineaturen .lin_prev .lin_thin {
  stroke: #a8a8a8;
  stroke-width: 1.2;
}

#lineaturen .lin_prev .lin_band {
  fill: none;
  stroke: #6e6e6e;
  stroke-width: 1.6;
}

#lineaturen .lin_label {
  display: block;
  font-size: 0.72vw;
  color: #303030;
  text-align: center;
  margin-top: 0.15vw;
}

/* Umschalter fuer die Lineatur im Eigenschaften-Panel (#schreiblinien_props).
   Drei kleine Knoepfe statt eines Auswahlmenues, damit die aktive Lineatur
   ohne Aufklappen ablesbar ist. Die aktive Markierung setzt main.js als
   Klasse .sl_active. */
#schreiblinien_props .sl_art {
  display: inline-block;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68vw;
  color: #303030;
  background-color: #f1f4fb;
  border: 1px solid #d5dced;
  border-radius: 6px;
  padding: 0.15vw 0.35vw;
  margin-right: 0.2vw;
}

#schreiblinien_props .sl_art:hover {
  background-color: #eaf1ff;
  border-color: #3051a1;
}

/* Knopf "Spalten gleich breit verteilen" im Tabellen-Panel (#ttable_props) -
   gleiche Optik wie die Lineatur-Knoepfe daneben. */
#ttable_props .tt_btn {
  display: inline-block;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68vw;
  color: #303030;
  background-color: #f1f4fb;
  border: 1px solid #c9d3ea;
  border-radius: 4px;
  padding: 0.15vw 0.5vw;
}
#ttable_props .tt_btn:hover {
  background-color: #eaf1ff;
  border-color: #3051a1;
}

#schreiblinien_props .sl_art.sl_active {
  background-color: #3051a1;
  border-color: #3051a1;
  color: #ffffff;
}

/* Left Menu Tools */
/* Werkzeug-Symbol der linken Leiste. border-radius war 50% - weil die Bilder
   nicht quadratisch sind, wurde daraus beim Ueberfahren/Markieren eine Ellipse.
   Jetzt ein abgerundetes Quadrat mit etwas Innenabstand, also eine richtige
   Schaltflaeche. WICHTIG: markieren()/entmarkieren() in main.js setzen die
   Markierung des aktiven Werkzeugs als INLINE-Hintergrundfarbe (#baceff) -
   deshalb hier nur Form und Abstand aendern, die Farbe bleibt dem Skript
   ueberlassen. Der Ueberfahr-Zustand ist bewusst heller gewaehlt, damit sich
   das aktive Werkzeug davon abhebt (Inline-Stil schlaegt diese Regel). */
.tool {
  display: inline-block;
  width: 74%;
  height: auto;
  margin-left: 8%;
  padding: 0.2604vw;
  box-sizing: border-box;
  border: none;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
  border-radius: 11px;
  transition: background-color 0.12s;
}

.ttwrap {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  width: 4.5%;
  height: 100%;
  border: none;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
  border-radius: 50%;
}

.ttwrap_wide {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  width: 5.5%;
  height: 100%;
  border: none;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
  border-radius: 50%;
}
/* Symbole der unteren Leiste - wie .tool/.tmtool von der Ellipse (50% auf
   nicht-quadratischen Bildern) auf ein abgerundetes Quadrat umgestellt. */
.ttool {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  height: 85%;
  width: auto;
  padding: 0.1563vw;
  box-sizing: border-box;
  border: none;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  border-radius: 9px;
  text-align: center;
  transition: background-color 0.12s;
}

/* Werkzeug-Symbol der oberen Leiste - gleiche Ueberlegung wie bei .tool. */
.tmtool {
  display: block;
  position: absolute;
  left: 23%;
  top: 4%;
  width: 54%;
  height: auto;
  padding: 0.2083vw;
  box-sizing: border-box;
  border: none;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  border-radius: 9px;
  transition: background-color 0.12s;
}

.ttlabel {
  display: block;
  position: absolute;
  left: 5%;
  bottom: 6%;
  width: 90%;
  font-size: 0.62vw;
  color: #6b7688;
  font-weight: 500;
  font-family: var(--formtext);
  text-align: center;
  user-select: none;
}

/* Heller als die Markierung des aktiven Werkzeugs (#baceff, per Inline-Stil
   aus markieren()) - so bleiben "zeigt gerade drauf" und "ist gewaehlt"
   unterscheidbar. */
.tool:hover {
  background-color: #eef4ff;
}

.ttool:hover {
  background-color: #eef4ff;
}
.tmtool:hover {
  background-color: #eef4ff;
}

.ptool {
  display: inline-block;
  height: 90%;
  width: auto;
  border: none;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
  border-radius: 50%;
}

/* Groesse bewusst in vw statt in Prozent der Palettenbreite: sonst haengt der
   Durchmesser der Farbpunkte daran, wie breit #drawpalette gerade ist - und
   die Palette darf ihre Breite nicht mehr frei an den Inhalt anpassen (siehe
   #drawpalette.pal_colors). 2.2vw entspricht der frueheren Groesse. */
.cbtn {
  display: inline-block;
  width: 2.2vw;
  aspect-ratio: 1 / 1;
  border: 1px solid rgb(54, 54, 54);
  border-radius: 50%;
  user-select: none;
}

#mycolor {
  display: inline-block;
  width: 2.2vw;
  aspect-ratio: 1 / 1;
  border: 1px solid rgb(54, 54, 54);
  border-radius: 50%;
  user-select: none;
}

/* Seitenverhaeltnis-Anzeige rechts oben. Sie ist anklickbar (schaltet das
   Vollbild, siehe main.js) - deshalb Zeiger und Ueberfahr-Hinweis wie bei den
   uebrigen Schaltflaechen der Leiste.
   Frueher "top: 26%; height: 90%": das war auf die alte, flachere Leiste
   ausgelegt und ragte nach deren Erhoehung unten heraus. Jetzt senkrecht
   mittig verankert, also unabhaengig von der Leistenhoehe. Schriftgrad und
   Farbe an die uebrigen Beschriftungen angeglichen (war 1.1vw in #4d4e4e und
   damit deutlich lauter als alles daneben). */
#screensize {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  height: 62%;
  width: auto;
  padding: 0 0.4688vw;
  box-sizing: border-box;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
  font-size: 0.85vw;
  font-weight: 600;
  font-family: var(--formtext);
  color: #6b7688;
  transition: background-color 0.12s;
}

#screensize:hover {
  background-color: #eef4ff;
}


/* Zwischenspeicher-Symbol rechts aussen (einziger Traeger dieser Klasse).
   Hatte als einziges Symbol der oberen Leiste keinen Innenabstand und wirkte
   dadurch merklich groesser als alles daneben - jetzt auf dieselbe Groessen-
   ordnung wie .tmtool gebracht und senkrecht mittig verankert (vorher ohne
   top-Angabe, also von der statischen Lage abhaengig). */
.rightwing {
  display: block;
  position: absolute;
  height: 78%;
  width: auto;
  right: 1.5%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.2604vw;
  box-sizing: border-box;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
  transition: background-color 0.12s;
}

.rightsec {
  display: block;
  position: absolute;
  height: 90%;
  width: auto;
  right: 5%;
  border: none;
  margin-left: 0.15%;
  margin-right: 0.15%;
  user-select: none;
  z-index: 999;
  user-drag: none;
  -webkit-user-drag: none;
}

.rightsec:hover {
  background-color: #baceff;
}

.rightwing:hover {
  background-color: #eef4ff;
  border-radius: 9px;
}

/* Reihenfolge von rechts nach links: Hilfe (ganz aussen), Zwischenspeicher,
   Formatanzeige (#screensize, s.o.) - jeweils eigener Abstand, damit sich
   die Symbole nicht ueberlappen. */
#helpbtn {
  right: 1.5%;
}

#clipboard {
  right: 5%;
}

#rightlogo {
  display: none;
  position: absolute;
  top: 1%;
  right: 14%;
  width: 8%;
  height: auto;
  border: none;
  user-select: none;
  z-index: 999;
}

#c1 {
  background-color: black;
  border: solid grey 1px;
}

#c2 {
  background-color: rgb(57, 105, 208);
}

#c3 {
  background-color: rgb(186, 13, 13);
}

#c4 {
  background-color: rgb(18, 135, 22);
}

#c5 {
  background-color: rgb(255, 255, 35);
}

#c6 {
  background-color: rgb(255, 255, 255);
}

#c7 {
  background-color: rgb(133, 133, 133);
}

#c8 {
  background-color: rgb(71, 71, 71);
}

#c9 {
  background-color: rgb(171, 43, 137);
}

#c10 {
  background-color: rgb(240, 120, 0);
}

#c11 {
  background-color: rgb(211, 211, 211);
}

#c12 {
  background-color: rgb(114, 69, 29);
}

#nocolor {
  background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
}

/* Gruppentrenner. Waren dunkle (#5c5c5c) Linien ueber die volle Leistenhoehe -
   das war der wesentliche Grund fuer den harten, technischen Eindruck. Jetzt
   hell und deutlich kuerzer: die Gruppierung bleibt erkennbar, draengt sich
   aber nicht mehr auf. */
.trenner {
  display: inline-block;
  user-select: none;
  width: 0.0521vw;
  border: none;
  background-color: #e3e7ee;
  margin-left: 0.7%;
  margin-right: 0.7%;
  height: 52%;
  align-self: center;
}

.abstand {
  display: block;
  user-select: none;
  height: 0.0521vw;
  border: none;
  background-color: #edf0f5;
  margin: 12% 18% 12%;
  width: 64%;
}

.menulabel {
  /* Zurueckhaltender als frueher (#040404/600): das Symbol soll fuehren, die
     Beschriftung nur stuetzen. */
  color: #6b7688;
  font-size: 0.62vw;
  font-weight: 500;
  font-family: var(--formtext);
  text-align: center;
  user-select: none;
  width: 100%;
  margin-top: 0.1042vw;
  line-height: 1.2;
}

/* ===== Gruppen der unteren Leiste ==========================================
   Alle nach demselben Muster wie die uebrigen Leisten: kein harter Rahmen,
   sondern weisse Flaeche mit weichem Schatten und staerkerer Rundung.
   WICHTIG - das frueher hier ueberall gesetzte "opacity: 0.8/0.9" ist raus:
   opacity blasst den INHALT mit aus (Symbole, Seitenzahl, Uhrzeit wirkten
   dadurch stumpf). Wo Durchscheinen gewuenscht ist, steckt es jetzt in der
   Hintergrundfarbe. */
/* Untere LINKE Leiste: Seitenblaetterer, Vollbild und Zwei-Finger-Freigabe
   liegen in EINER Reihe nebeneinander, statt jede Gruppe auf einen festen
   Prozentwert zu setzen.
   WARUM: #pageturner waechst mit der Seitenzahl. Gemessen bei 1280 Breite -
   "1/1" endet bei 9,75%, "128/256" erst bei 12,64%. Die frueher fest bei 13%
   sitzende Vollbild-Gruppe wurde davon bei dreistelligen Seitenzahlen also
   fast verdeckt. In der Reihe koennen sich die Gruppen nicht mehr
   ueberlappen, egal wie breit die Seitenzahl wird - und eine ausgeblendete
   Gruppe (display:none) laesst die Reihe einfach zusammenruecken. */
#leftstuff {
  display: flex;
  position: absolute;
  left: 0.5%;
  top: 94.7%;
  height: 4.5%;
  flex-wrap: nowrap;
  align-items: stretch;
  /* ACHTUNG - hier und in den Gruppen darunter bewusst vw statt %:
     Bezugsgroesse fuer Prozente ist jetzt #leftstuff (schrumpft auf den Inhalt),
     nicht mehr das Fenster. Mit "3%" wurden die Knoepfe dadurch 0,4% statt 3%
     breit. 3vw entspricht exakt dem, was "3%" frueher bedeutete. */
  gap: 0.6vw;
  z-index: 9999;
}

#pageturner {
  display: flex;
  position: static;   /* Platzierung regelt jetzt #leftstuff */
  height: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  border: none;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  padding-right: 1vw;
}

#fullmode,
#panzoommode {
  display: flex;
  position: static;
  width: 3vw;
  height: 100%;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  flex: none;
}

#mainmode {
  display: flex;
  position: absolute;
  left: 45%;
  top: 94.7%;
  height: 4.5%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  z-index: 9999;
  padding-left: 1%;
  padding-right: 2%;
  gap: 1%;
  border: none;
}

#modeswitch {
  display: flex;
  position: absolute;
  left: 81%;
  top: 94.7%;
  width: 6%;
  height: 4.5%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  z-index: 9999;
  border: none;
  padding-left: 1%;
  padding-right: 1%;
}

#moving {
  display: flex;
  position: absolute;
  right: 1.5%;
  top: 94.7%;
  height: 4.5%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  border: none;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  z-index: 9999;
  padding-left: 0.5%;
  padding-right: 0.8%;
}

/* Flyout der Schnellstart-Widgets: exakt so breit wie #extenders (das
   Zusatzmenue, das movemode einblendet: left:95%, width:3.6%) und mit
   demselben unteren Ende (#extenders: top:63% + height:30% = 93% von oben =
   7% von unten) - aber nur so hoch wie fuer die vorhandenen Eintraege noetig
   (bottom statt top verankert, damit die Hoehe frei am Inhalt haengt). */
#quickwidgets_menu {
  display: none;
  flex-direction: column;
  position: absolute;
  left: 92%;
  bottom: 6%;
  width: 3.6%;
  gap: 0.1042vw;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  z-index: 9999;
  padding: 1% 0;
}

.qw_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0.2083vw 0.1042vw;
  border-radius: 6px;
  user-select: none;
}
.qw_item:hover {
  background-color: #baceff;
}
.qw_item img {
  width: 70%;
  height: auto;
  user-drag: none;
  -webkit-user-drag: none;
}

#minimal {
  display: flex;
  position: absolute;
  left: 1%;
  top: 94.7%;
  width: 8%;
  height: 4.5%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background-color: #ebebeb;
  opacity: 0.2;
  z-index: 9999;
}

#drawpalette {
  display: flex;
  position: absolute;
  left: 20%;
  top: 88%;
  width: 60%;
  height: 5%;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  background-color: #ffffff;
  z-index: 9999;
  padding-left: 1%;
  padding-right: 1%;
  border: none;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
}

/* Die Stift-Palette hat zwei Ausbaustufen (siehe showDrawPalette() in main.js):
   ueber den Stift kommen die Zeichenwerkzeuge SAMT Strichstaerke, ueber die
   Farbkugel nur die Farben. Frueher zeigte beides denselben, vollen Kasten.
   Die vier Zeichenwerkzeuge sind genau die .ptool.modus-Eintraege, #linewidth
   und .strokes tragen kein .modus - beide gehoeren zur Werkzeugseite. */
#drawpalette.pal_tools .cbtn,
#drawpalette.pal_tools br {
  display: none;
}

/* #linewidth ("Randbreite auswaehlen") gehoert seit 2026-08-18 auf die
   FARBSEITE, ganz rechts - nicht mehr zu den Zeichenwerkzeugen. Die Position
   ergibt sich bereits aus der DOM-Reihenfolge (direkt hinter #mycolor, dem
   letzten Farbpunkt); hier entscheidet sich nur noch, welche Seite ihn
   ausblendet.

   Das !important ist hier ausnahmsweise noetig und kein Versehen: play/edit
   schalten denselben Knopf zusaetzlich per jQuery (.show()/.hide() in
   playMode()/editMode(), er ist ein reines Edit-Werkzeug). jQuery schreibt
   dabei einen INLINE-Stil, und der schlaegt jeden Selektor. Ohne !important
   waere #linewidth nach einer Rueckkehr aus dem Showmodus auch auf der
   Werkzeugseite wieder sichtbar. Die beiden Zustaende sind voneinander
   unabhaengig - "welche Palettenhaelfte" (Klasse) und "Edit oder Show"
   (Inline-Stil) -, und die Palettenhaelfte muss gewinnen. */
#drawpalette.pal_tools #linewidth {
  display: none !important;
}

#drawpalette.pal_colors .ptool.modus,
#drawpalette.pal_colors .strokes {
  display: none;
}

/* Werkzeuge + Strichstaerke: schmalerer Kasten, mittig ueber der
   Stift-Schaltflaeche. */
#drawpalette.pal_tools {
  left: 36%;
  width: 28%;
  justify-content: space-around;
}

/* Farben: Breite richtet sich nach dem Inhalt, damit die Punkte dicht
   beieinander liegen. Mit der frueheren festen Breite (60%) und
   space-between zogen sich die 14 Punkte ueber die ganze Palette auseinander -
   besonders auffaellig, seit die vier Strichstaerken-Symbole auf die
   Werkzeugseite gewandert sind. Moeglich wird das nur, weil .cbtn nicht mehr
   in Prozent der Palettenbreite bemasst ist (s. dort). */
#drawpalette.pal_colors {
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  justify-content: center;
  gap: 0.45vw;
}

#colorball {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 1px solid black;
  background-color: white;
  aspect-ratio: 1 / 1;
  margin-left: 10%;
  margin-right: 10%;
}

#pagenr {
  display: block;
  width: 50%;
  background-color: transparent;
  font-size: 1.3vw;
  color: #303030;
  text-align: center;
  user-select: none;
}

#properties {
  display: none;
  position: absolute;
  right: 0px;
  top: 4.3%;
  width: 16%;
  background-color: #ffffff;
  border: 1px solid #b0b0b0;
  padding-left: 0.5%;
  border-radius: 2%;
  opacity: 1;
  z-index: 9999999;
    box-shadow: 0 4px 4px rgba(0,0,0,0.18);
}

.extraprop {
  font-style: italic;
  color: rgb(64, 107, 225);
}

#action_props {
  display: none;
  position: absolute;
  left: 20%;
  top: 20%;
  width: 20%;
  background-color: #fcfcfc;
  padding: 0;
  padding-bottom: 1.0417vw;
  border: 1px solid #303030;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: 2%;
  opacity: 1;
  z-index: 999999999;
}

#action_title {
  font-size: 0.8vw;
  position: absolute;
  color: white;
  top: 0.0521vw;
  left: 5%;
}

#action_name {
  font-size: 1vw;
  margin-top: 1.0417vw;
  color: #3051a1;
}

#ap_frame {
  display: block;
  position: relative;
  left: 5%;
  top: 1%;
  width: 90%;
}

#action_description {
  padding: 3%;
  border: 1px solid #303030;
  box-shadow: 0 4px 4px rgba(178, 178, 178, 0.2);
  border-radius: 2%;
  opacity: 1;
  z-index: 999999;
  font-size: 0.8vw;
  margin-bottom: 1.0417vw;
}

#apos_label {
  margin-top: 0.5208vw;
  margin-right: 0.3646vw;
  margin-bottom: 0.5208vw;
  display: inline-block;
  float: left;
  font-size: 0.8vw;
}

#apos {
  margin-top: 0.5208vw;
  display: inline-block;
  margin-bottom: 0.5208vw;
  font-size: 0.8vw;
}

.ac_title {
  font-size: 0.8vw;
  margin-top: 0.0521vw;
}
#ac_info {
  display: block;
  font-size: 0.7vw;
  margin-top: 0.625vw;
  margin-bottom: 0.625vw;
}

/* Fernsteuerung: Label + scrollbare Checkbox-Liste der Zielobjekte. Die Liste
   ist als abgegrenzte Box in der Höhe begrenzt; bei vielen Namen wird intern
   gescrollt, statt den ganzen Dialog aufzublähen. */
#rc_text {
  display: none;
  font-size: 0.8vw;
  margin-top: 0.5208vw;
  margin-bottom: 0.3125vw;
  font-weight: bold;
}
#rc_list {
  display: none;
  max-height: 28vh;
  overflow-y: auto;
  margin-bottom: 0.5208vw;
  border: 1px solid #b0b0b0;
  border-radius: 3px;
  background-color: #ffffff;
  padding: 0.2083vw 0.4167vw;
  scrollbar-width: thin;
}
.rc_item {
  display: block;
  font-size: 0.8vw;
  padding: 0.2083vw 0;
  cursor: pointer;
}
.rc_item:not(:last-child) {
  border-bottom: 1px solid #ececec;
}
/* Etwas größere Kästchen - besser mit Finger/Stift auf dem Whiteboard treffbar. */
.rc_item input {
  width: 0.8333vw;
  height: 0.8333vw;
  margin-right: 0.4167vw;
  vertical-align: middle;
}

.speed-slider {
  display: inline-block;
  width: 74%;
  margin-right: 5%;
  vertical-align: middle;
}
.speed-value {
  width: 16%;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8vw;
}

#image_filters {
  display: none;
  position: absolute;
  right: 20%;
  top: 4.3%;
  width: 16%;
  background-color: #fcfcfc;
  padding-left: 0.5%;
  border: 1px solid #303030;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: 2%;
  opacity: 1;
  z-index: 99999999;
}

#apply_filters {
  text-align: center;
  margin: 5%;
  width: 90%;
  border: 1px solid #303030;
  border-radius: 3px;
  font-size: 1vw;
}

.draghandle {
  width: 99%;
  height: 1.0417vw;
  background-color: #eaf1ff;
  cursor: grabbing;
  margin-bottom: 0.2604vw;
  border-radius: 3px;
  /* Zwingend fuer die Touch-Bedienung am Smartboard/Tablet: ohne dies deutet
     der Browser das Wischen auf der Leiste als Scrollen/Zoomen, uebernimmt die
     Geste selbst und bricht die Pointer-Sequenz mit pointercancel ab - das
     Verschieben ging dann per Touch gar nicht (siehe .draggable-Drag in main.js). */
  touch-action: none;

}
.slider {
  -webkit-appearance: none;
  width: 55%;
  height: 0.1563vw;
  margin-top: 3%;
  margin-right: 5%;
  border-radius: 3px;
  background: #323232;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  user-select: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.7813vw;
  height: 0.7813vw;
  border-radius: 50%;
  background: #3e82da;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 0.6771vw;
  height: 0.6771vw;
  border-radius: 50%;
  background: #3e82da;
  cursor: pointer;
}

.ptitle {
  color: #303030;

  font-weight: semibold;
  font-size: 1vw;
  padding: 1%;
}

.plinks {
  display: inline-block;
  color: #303030;

  font-size: 0.6vw;
  width: 30%;
  height: 4%;
  padding-left: 3%;
  user-select: none;
}

/* Zahnrad-Symbol hinter "Schatten" (#schattentitel oeffnet #shadow_frame,
   siehe main.js) - eigenstaendig statt in den .plinks-Fliesstext eingebettet,
   damit es deutlich groesser als der Labeltext sein und wie ein kleiner
   Button aussehen kann. War vorher Teil des Textes bei .plinks-Groesse
   (0.6vw) und damit leicht zu uebersehen. */
#schatten_gear,
#extrude_gear,
#plastic_gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3125vw;
  width: 1.6vw;
  height: 1.6vw;
  min-width: 0.8333vw;
  min-height: 0.8333vw;
  border-radius: 50%;
  background-color: #e8ecf3;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

#schatten_gear img,
#extrude_gear img,
#plastic_gear img {
  width: 1.1vw;
  height: 1.1vw;
  display: block;
}

#schatten_gear:hover {
  background-color: #c7d3e8;
}

.prechts {
  display: inline-block;
  color: #303030;

  font-size: 1vw;
  width: 60%;
  height: 4%;
  user-select: none;
}

.rechtsklein {
  font-size: 0.6vw;
}
.doppel {
  display: inline-block;
  color: rgb(244, 244, 244);

  width: 48%;
  user-select: none;
}

.formtext {
  display: inline-block;
  color: #303030;

  font-size: 0.8vw;
  font-family: Roboto;
  user-select: none;
}

.sliderfield {
  display: inline-block;

  font-size: 0.8vw;
  width: 25%;
  padding-left: 5%;
  height: 5%;
  color: #303030;
  background-color: #ebebeb;
  border: none;
}

.pinput {
  display: block;
  width: 85%;
  height: 5%;
  font-size: 0.8vw;
  color: #303030;
  background-color: #ebebeb;
  margin-top: 5%;
  padding-left: 5%;
  border: none;
}

/* Kleine Ueberschrift "Bereich bis" ueber den X-/Y-Feldern des Koordinatensystems. */
.coords_range_head {
  display: block;
  font-size: 0.62vw;
  margin: 0.1563vw 0 0.1042vw 0.1042vw;
}

/* Checkbox-Zeile des Zahlenstrahl-/Koordinaten-Panels: alle Punkte kompakt in
   EINE Zeile (Checkbox direkt neben dem Text, kleinere Schrift, kein Umbruch). */
#nl_checks_row label {
  display: inline-block;
  font-size: 0.62vw;
  margin-right: 0.2604vw;
  white-space: nowrap;
}
#nl_checks_row .pinput {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 0 0 0.1042vw;
  padding: 0;
  vertical-align: middle;
}

.cinput {
  width: 90%;
  height: 1vw;
  font-size: 1vw;
  background-color: gray;
  border: 1px solid #303030;
  border-radius: 10px;
  color: white;
  margin-top: 5%;
}

/* Zeile "Zeilennummern" im Text-Dialog: Beschriftung, Haken, Farbquadrat und
   Abstandsregler stehen direkt hintereinander in EINER Zeile. Die Beschriftung
   nimmt hier nur ihre eigene Breite ein - nicht die 30-%-Spalte der uebrigen
   Zeilen -, damit die drei Bedienelemente unmittelbar auf den Text folgen. */
#zlinenumbers {
  display: flex;
  align-items: center;
}

#zlinenumbers .plinks {
  width: auto;
  height: auto;
  white-space: nowrap;
  padding-right: 0.4vw;
}

#zlinenumbers .prechts {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  gap: 0.4vw;
}

/* Kleines quadratisches Farbfeld (statt der breiten, runden .cinput-Leiste). */
.cinput_mini {
  width: 1vw;
  height: 1vw;
  flex: 0 0 auto;
  border-radius: 3px;
  margin-top: 0;
  cursor: pointer;
}

/* Kurzer Regler ohne die Aussenabstaende von .slider (die sind auf eine eigene
   Zeile mit Zahlenfeld daneben ausgelegt). */
.slider_mini {
  width: 40%;
  flex: 0 1 auto;
  margin: 0;
}

.trans_btn {
  display: inline-block;
  width: 20%;
  height: 0.7813vw;
  background-color: gray;
  color: black;
  font-size: 1em;
  text-align: center;
  user-select: none;
}

.zeile {
  width: 99%;
  padding-top: 1%;
  padding-bottom: 1%;
  border-bottom: 1px solid rgb(167, 167, 167);
  user-select: none;
}

#qr_props {
  display: block;
  color: rgb(244, 244, 244);

  font-size: 0.6vw;
  height: 4%;
  padding-left: 3%;
  margin-top: 1%;
  user-select: none;
}

#qrtext {
  width: 70%;

  font-size: 0.6vw;
}

.luecke {
  display: block;
  width: 99%;
  height: 0.5208vw;
  user-select: none;
}

#fontmenue {
  display: inline-block;
  height: 10%;
  width: 60%;
  position: relative;
}

#fontselect {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
  background-color: #fcfcfc;
  /* War "small" - manche der zur Auswahl stehenden Google Fonts (dekorative
     Displayschriften mit ueberdurchschnittlich hohen Glyphen/Zeilenhoehe)
     wurden dabei im Auswahlfeld oben/unten abgeschnitten (#text_detail hat
     overflow:hidden). Eine Stufe kleiner schafft genug Luft. */
  font-size: x-small;
}

#logo {
  position: absolute;
  right: 4%;
  bottom: 2%;
  height: 2%;
  user-select: none;
}

#gridsize {
  display: none;
  position: absolute;
  top: 2.8646vw;
  left: 5.2083vw;
  width: 10.4167vw !important;
  height: 6.25vw;
  z-index: 100;
  background-color: #494949;
  text-align: center;
  padding-top: 0.5208vw;
  border-radius: 10px;
  color: rgb(219, 219, 219);

  font-size: 0.625vw;
}

#gridcolor {
  width: 80%;
  height: 20%;
  margin: 10%;
  background-color: gray;
  border: 1px white solid;
}
#lgridcolor {
  width: 80%;
  height: 20%;
  margin: 10%;
  background-color: gray;
  border: 1px white solid;
}

#lgridsize {
  display: none;
  position: absolute;
  top: 2.8646vw;
  left: 5.2083vw;
  width: 10.4167vw !important;
  height: 6.25vw;
  z-index: 100;
  background-color: #494949;
  text-align: center;
  padding-top: 0.5208vw;
  border-radius: 10px;
  color: rgb(219, 219, 219);

  font-size: 0.625vw;
}

#cpick {
  display: none;
  position: absolute;
  left: 44.2708vw;
  top: 2.6042vw;
  z-index: 9999;
}

#dpick {
  display: none;
  position: absolute;
  left: 3.125vw;
  top: 2.6042vw;
  z-index: 9999;
}

.blackbg {
  background-color: #292929;
}

#overview {
  position: absolute;
  display: none;
  width: 12%;
  height: 94%;
  top: 0;
  left: 0;
  background-color: #a3a3a3;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
}

.thumbwrap {
  position: relative;
  width: 100%;
  margin-bottom: 0.5208vw;
  user-select: none;
}

.thumb {
  width: 80%;
  margin-left: 7%;
  height: auto;
  margin-bottom: 0.5%;
  background-color: #f8f8f8;
  border-radius: 8px;
  user-select: none;
  cursor: grab;
  -webkit-user-drag: none;
}

.thumb-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Einfüge-Markierung beim Verschieben eines Thumbnails per Drag & Drop */
.thumbwrap.drop-before::before,
.thumbwrap.drop-after::after {
  content: "";
  position: absolute;
  left: 7%;
  width: 80%;
  height: 0.1563vw;
  background-color: #f8b000;
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
}
.thumbwrap.drop-before::before {
  top: -0.3125vw;
}
.thumbwrap.drop-after::after {
  bottom: -0.3125vw;
}

.pagenr {
  width: 99%;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
  text-align: center;
  font-size: 0.8vw;
}

#hidden {
  display: none;
}

#savefile {
  position: absolute;
  display: none;
  background-color: #fcfcfc;
  left: 5%;
  top: 6%;
  border: 1px solid #303030;
  border-radius: 4px;
  z-index: 99999;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  padding: 1%;
  user-select: none;
}

#savemeta {
  position: absolute;
  display: none;
  background-color: #fcfcfc;
  left: 33%;
  top: 10%;
  border-radius: 4px;
  z-index: 999999;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  padding: 1%;
  user-select: none;
  border-radius: 5px;
  border: 1px solid #303030;
}

#msavebtn {
  padding-top: 0.2604vw;
  padding-bottom: 0.2604vw;
  background-color: #c6c6c6;
  color: #303030;
  outline: none;
  text-align: center;
  font-size: 1.2vw;
  border-radius: 5px;
}

#savesinglepage {
  position: absolute;
  display: none;
  background-color: #fcfcfc;
  left: 3.3%;
  top: 4.9%;
  border-radius: 0.1563vw;
  z-index: 99999;
  box-shadow: 1.4583vw 1.0938vw 0.5208vw -0.2604vw rgba(0, 0, 0, 0.3);
  padding: 1%;
}

#stitle {
  display: block;
  margin-left: 15%;
  margin-top: 0;
  color: #303030;

  font-size: 1.2vw;
}

#sform {
  left: 10%;
  top: 3%;
}

#metaform {
  left: 10%;
  top: 3%;
}

label {
  display: block;
  color: #303030;
  font-size: 0.7vw;
}

#savebtn {
  margin-left: 10%;
  width: 80%;
  padding: 0.2604vw;
  border-radius: 5px;
  font-size: 0.8vw;
  margin-top: 0.5208vw;
  background-color: rgb(224, 224, 224);
  border: 1px solid #303030;
  border-radius: 4px;
}

/* Gleiche Optik wie #save_object_btn (Objekt-Sammlung-Dialog) - siehe dort.
   #spsavebtn ist (anders als das div-basierte #save_object_btn) ein echtes
   <button> - -webkit-appearance/appearance noetig, um dessen Browser-eigene
   Standardoptik zu unterdruecken. */
#spsavebtn {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 0.2vw auto 0;
  font-size: 0.9vw;
  padding: 0.45vw 1.4vw;
  border: 1px solid #3051a1;
  border-radius: 0.2083vw;
  cursor: pointer;
  background: #3051a1;
  color: #fff;
  font-weight: bold;
  user-select: none;
  font-family: inherit;
}
#spsavebtn:hover { background: #26407f; }

#sptitle {
  font-size: 0.9vw;
  color: #303030;
}

#spname {
  width: 90%;
  font-size: 0.8vw;
  padding: 0.1563vw;
}

#spdescription {
  width: 90%;
  font-family: inherit;
  font-size: 0.8vw;
  padding: 0.1563vw;
  resize: vertical;
}

#localsave {
  margin-left: 10%;
  width: 80%;
  padding: 0.2604vw;
  border-radius: 5px;
  font-size: 0.625vw;
}

.styled-table {
  border-collapse: collapse;
  margin: 0 0;
  font-size: 0.7em;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: #009879;
  color: #fff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 0.625vw 0.7813vw;
}

.styled-table tbody tr {
  color: white;
  background-color: #111;
  border-bottom: 1px solid #ddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #444;
  color: white;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

#svglist {
  display: none;
  position: absolute;
  top: 5.8%;
  left: 4.5%;
  width: 32%;
  height: 67%;
  background-color: var(--menu-bg);
  border: 1px solid #303030;
  border-radius: 10px;
  padding: 1.2%;
  z-index: 99999;
  overflow-y: auto;
  box-shadow: #494949;
}
#svgicons {
  display: block;
  position: absolute;
  top: 7%;
  left: 0;
  width: 97%;
  height: 91%;
  padding: 1%;
  overflow-y: auto;
  scrollbar-color: rgb(149, 149, 149) transparent;
  overflow-x: hidden;
}

.svgthumb {
  width: 8.5%;
  height: 4%;
  padding: 1%;
  border: 1px solid #494949;
  background-color: var(--menu-bg);
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#vorschau {
  display: none;
  position: absolute;
  top: 10%;
  right: 10%;
  width: 10%;
  height: 20%;
  background-color: rgb(226, 226, 226);
  z-index: 9999999 !important;
  border: 1px black solid;
}

.radios {
  color: white;
  font-size: 0.7vw;
}

/*** Color Picker  ***/

#cp_frame {
  display: none;
  position: absolute;
  z-index: 9999999;
  overflow: hidden;
  background-color: #fff;
  border: solid #c0c0c0 1px;
  border-radius: 12px;
  left: 3%;
  top: 5%;
  width: 15%;
  height: calc(32% + 1.3021vw);
  z-index: 9999999;
  background-color: #fcfcfc;
  font-size: 2.83vw;
  padding: 0;
  margin: 0;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

/* Der Farbteil bleibt exakt so groß wie bisher (32vh = alte 32%-Höhe),
   unabhängig davon, ob der Dialog für den Verlauf höher wird.
   Er wird lediglich um die Höhe des draghandle (20px + 5px margin) nach unten verschoben. */
#cp_solid {
  position: absolute;
  left: 0;
  top: 1.3021vw;
  width: 100%;
  height: 32vh;
}

/* Dialog wird höher, sobald ein Verlauf möglich (has-gradient) bzw. aktiv (gradient-on) ist. */
#cp_frame.has-gradient {
  height: calc(38% + 1.3021vw);
}
#cp_frame.gradient-on {
  height: calc(50% + 1.3021vw);
}

/* Verlaufs-Sektion unten im Colorpicker */
#cp_gradient {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(32vh + 1.3021vw);
  bottom: 0;
  box-sizing: border-box;
  padding: 1.2% 8% 1.5% 11%;
  border-top: 1px solid #ddd;
  font-family: var(--formtext);
  font-size: 0.7vw;
  color: #303030;
  overflow: hidden;
}
#cp_frame.has-gradient #cp_gradient {
  display: block;
}

#grad_toggle_row {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.6vh;
}
#grad_toggle_row input {
  width: 0.9vw;
  height: 0.9vw;
}

#grad_controls {
  display: none;
  flex-direction: column;
  gap: 0.7vh;
}
#cp_frame.gradient-on #grad_controls {
  display: flex;
}

#grad_preview {
  position: relative;
  width: 100%;
  height: 1.9vh;
  min-height: 0.625vw;
  border: 1px solid #8b8b8b;
  border-radius: 3px;
  /* Schachbrett als Basis; der aktuelle Verlauf wird per JS darübergelegt */
  background: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
  /* Touch-Bedienung der Verlaufs-Griffe, siehe .draghandle */
  touch-action: none;
}
#grad_stops {
  position: absolute;
  inset: 0;
}
.grad_handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1vw;
  height: 1vw;
  min-width: 0.5729vw;
  min-height: 0.5729vw;
  border: 1px solid #303030;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff;
  cursor: pointer;
}
.grad_handle_active {
  border: 2px solid #f8b000;
}

#grad_stopbtns {
  display: flex;
  align-items: center;
  gap: 0.4vw;
}
#grad_stopbtns button,
.grad_typebtn {
  font-size: 0.7vw;
  line-height: 1;
  padding: 0.25vh 0.5vw;
  border: 1px solid #8b8b8b;
  border-radius: 3px;
  background: #ececec;
  color: #303030;
  cursor: pointer;
}
#grad_stopbtns .grad_lbl {
  margin-left: 0.6vw;
}
#grad_opacity {
  flex: 1;
  min-width: 0;
}

#grad_type_row {
  display: flex;
  align-items: center;
  gap: 0.4vw;
}
.grad_typebtn.grad_sel {
  background: #f8b000;
  border-color: #c98f00;
  color: #000;
}
#grad_angle_row {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  width: 100%;
}
#cp_frame.grad-radial #grad_angle_row {
  display: none;
}
#grad_angle {
  flex: 1;
  min-width: 0;
}
#grad_angle_val {
  width: 2.6vw;
  font-size: 0.7vw;
  box-sizing: border-box;
}
.grad_lbl {
  color: #303030;
  font-size: 0.7vw;
  white-space: nowrap;
}

.value {
  display: block;
  position: absolute;
  left: 69.72%;
  width: 18.38%;
  height: 4%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: #ebebeb;
  border: solid rgb(139, 139, 139) 0.5px;

  font-size: 0.7vw;
  padding: 0.5%;
  padding-left: 1%;
  margin: 0;
  border-radius: 3px;
}

.cp_cfield {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 8.07%;
  aspect-ratio: 1 / 1;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  border: 1px solid rgb(78, 78, 78);
  border-radius: 77px;
  font-size: 2vw;
  padding: 0;
  margin: 0;
  user-select: none;
}

#cp_title {
  display: block;
  position: absolute;
  left: 11%;
  width: 90%;
  top: 2%;
  font-family: var(--formtext);
  font-size: 0.7vw;
  color: #303030;
}

#cp_save_title {
  display: block;
  position: absolute;
  left: 11%;
  width: 90%;
  top: 82%;
  font-family: var(--formtext);
  font-size: 0.7vw;
  color: #303030;
}

.cp_label {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 59.49%;
  width: 8.07%;
  height: 5%;
  z-index: 9;
  color: rgb(77, 77, 77);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0;

  font-size: 0.9vw;
  padding: 0;
  margin: 0;
  user-select: none;
}

#cp_selcol {
  display: block;
  position: absolute;
  top: 8.96%;
  left: 11.24%;
  width: 42.13%;
  height: 26.62%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: transparent;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  user-select: none;
}

#cp_r {
  top: 8.59%;
}

#cp_g {
  top: 15.64%;
}

#cp_b {
  top: 22.71%;
}

#cp_hex {
  top: 29.77%;
}

#cp_c0 {
  position: absolute;
  top: 39%;
  left: 13.19%;
  width: 10%;
  height: 5%;
  border-radius: 50%;
  background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
  background-color: transparent;
  border: solid #303030 1px;
  z-index: 999;
}

#cp_c1 {
  top: 49.23%;
  left: 13.19%;
  background-color: rgb(178, 5, 0);
}

#cp_c2 {
  top: 49.23%;
  left: 26.37%;
  background-color: rgb(67, 106, 211);
}

#cp_c3 {
  top: 49.23%;
  left: 39.99%;
  background-color: rgb(254, 254, 0);
}

#cp_c4 {
  top: 49.23%;
  left: 53.61%;
  background-color: rgb(45, 135, 3);
}

#cp_c5 {
  top: 49.23%;
  left: 67.23%;
  background-color: rgb(232, 119, 0);
}

#cp_c6 {
  top: 49.23%;
  left: 80.85%;
  background-color: rgb(164, 42, 138);
}

#cp_c7 {
  top: 60%;
  left: 13.19%;
  background-color: rgb(113, 4, 4);
}

#cp_c8 {
  top: 60%;
  left: 26.37%;
  background-color: rgb(108, 146, 212);
}

#cp_c9 {
  top: 60%;
  left: 39.99%;
  background-color: rgb(87, 87, 6);
}

#cp_c10 {
  top: 60%;
  left: 53.61%;
  background-color: rgb(28, 246, 111);
}

#cp_c11 {
  top: 60%;
  left: 67.23%;
  background-color: rgb(112, 75, 12);
}

#cp_c12 {
  top: 60%;
  left: 80.85%;
  background-color: rgb(228, 139, 255);
}

#cp_c13 {
  top: 71%;
  left: 13.19%;
  background-color: rgb(0, 0, 0);
}

#cp_c14 {
  top: 71%;
  left: 26.37%;
  background-color: rgb(77, 77, 77);
}

#cp_c15 {
  top: 71%;
  left: 39.89%;
  background-color: rgb(114, 114, 114);
}

#cp_c16 {
  top: 71%;
  left: 53.61%;
  background-color: rgb(162, 162, 162);
}

#cp_c17 {
  top: 71%;
  left: 67.23%;
  background-color: rgb(206, 206, 206);
}

#cp_c18 {
  top: 71%;
  left: 80.85%;
  background-color: rgb(255, 255, 255);
}

#cp_save1 {
  top: 89%;
  left: 13.19%;
  background-color: rgb(255, 255, 255);
}

#cp_save2 {
  top: 89%;
  left: 26.37%;
  background-color: rgb(255, 255, 255);
}

#cp_save3 {
  top: 89%;
  left: 39.99%;
  background-color: rgb(255, 255, 255);
}

#cp_save4 {
  top: 89%;
  left: 53.61%;
  background-color: rgb(255, 255, 255);
}

#cp_save5 {
  top: 89%;
  left: 67.23%;
  background-color: rgb(255, 255, 255);
}

#cp_save6 {
  top: 89%;
  left: 80.85%;
  background-color: rgb(255, 255, 255);
}

#cp_l1 {
  top: 7.85%;
}

#div27 {
  top: 14.87%;
}

#div28 {
  top: 21.89%;
}

#div29 {
  top: 28.54%;
}

.palette_btn {
  position: absolute;
  font-size: 0.5208vw;
  background-color: rgb(52, 52, 52);
  color: white;
  border: none;
  border-radius: 3px;
  width: 2%;
  height: 2%;
}

#palette_btn_right {
  left: 92%;
  top: 61.5%;
}

/* Shadow Menu */

#shadow_frame {
  display: none;
  position: absolute;
  top: 25%;
  left: 67%;
  width: 15%;
  z-index: 99999999;
  color: var(--menu-text);
  overflow: hidden;
  background-color: var(--almost-white);
  border: 1px solid var(--menu-text);
  border-radius: 5px;

  font-size: 1.2vw;
  padding: 0.2604vw;
  margin: 0;
  user-select: none;
}

/* Extrude Menu (3D-Tiefe) - Aufbau bewusst identisch zu #shadow_frame, damit
   beide Zusatzfenster am Eigenschaften-Panel gleich aussehen. */

#extrude_frame,
#plastic_frame {
  display: none;
  position: absolute;
  top: 25%;
  left: 67%;
  width: 15%;
  z-index: 99999999;
  color: var(--menu-text);
  overflow: hidden;
  background-color: var(--almost-white);
  border: 1px solid var(--menu-text);
  border-radius: 5px;

  font-size: 1.2vw;
  padding: 0.2604vw;
  margin: 0;
  user-select: none;
}

#ex_reset,
#pl_reset {
  display: block;
  width: 90%;
  padding: 3%;
  border: 1px solid #303030;
  border-radius: 5px;
  color: #303030;
  background-color: #fcfcfc;
  text-align: center;
  font-size: 0.7vw;
  cursor: pointer;
}

#text_detail {
  display: none;
  position: absolute;
  width: 18%;
  /* etwas hoeher als zuvor (28%), damit die Infozeile #text_stats am unteren
     Rand Platz hat, ohne die Schriftfarben-Zeile zu ueberlagern. */
  height: 31%;
  bottom: 0.2%;
  right: 0.2%;
  z-index: 99999;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 3px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);

  font-size: 1.2vw;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
  padding-top: 0;
  margin: 0;
  user-select: none;
}

.ztool {
  width: 9%;
  height: auto;
  margin-bottom: 0.1563vw;
  border: none;
  user-select: none;
}

/* Infozeile am unteren Rand von #text_detail (Wort-/Zeilenzahl der markierten
   Textbox). Absolut positioniert, weil #text_detail eine feste Hoehe hat und
   overflow:hidden - eine zusaetzliche Flusszeile wuerde sonst abgeschnitten. */
#text_stats {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 0.4%;
  font-size: 0.85vw;
  color: #606060;
  text-align: center;
  white-space: pre;
  overflow: hidden;
  border-top: 1px solid #d8d8d8;
  padding-top: 0.3%;
  background-color: #fcfcfc;
}

#audioplayer {
  display: none;
  position: absolute;
  box-sizing: border-box;
  bottom: 6.5%;
  /* 50% breiter als bisher (15%). left musste mitwandern, sonst würde der
     Player rechts aus dem Fenster ragen (76 + 22.5 = 98.5%). */
  left: 76%;
  width: 22.5%;
  height: 8%;
  z-index: 99999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #828282 1px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  font-size: 0.75vw;
  padding: 0;
  margin: 0;
  user-select: none;
}

/* Inhaltszeile unterhalb des Ziehstreifens: Tasten links, Fortschritt rechts.
   Das Flexbox-Layout sitzt bewusst auf diesem Wrapper und nicht auf
   #audioplayer selbst - dort würde es von jQuerys .show() (setzt
   display:block) wieder überschrieben. */
#pl_body {
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 0 4%;
  /* 20px Ziehstreifen + 5px dessen margin-bottom */
  height: calc(100% - 1.3021vw);
  box-sizing: border-box;
}

#pl_bar {
  flex: 1;
  min-width: 0;
}

/* Tasten sollen 50% größer sein als früher (dort 10.36% der Player-Breite).
   Prozentbreiten beziehen sich hier aber auf die INNENbreite von #pl_body
   (Player minus dessen 2x4% Padding), daher der etwas höhere Wert - er ergibt
   wieder exakt das 1,5-fache der alten Tastengröße. */
.pbtn {
  display: block;
  width: 11.3%;
  height: auto;
  max-height: 100%;
  flex: none;
  color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  border: solid rgb(0, 0, 0) 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

/* Positionsstreifen: Drücken springt sofort, Ziehen verschiebt die Position. */
#pl_titel {
  display: block;
  position: relative;
  width: 100%;
  height: 1.1vh;
  min-height: 0.4688vw;
  overflow: hidden;
  background-color: #ebebeb;
  border: 1px solid #b4b4b4;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
  /* Ohne dies würde der Browser ein Ziehen mit dem Finger als Scroll-/Pan-Geste
     werten, den Zeiger abbrechen (pointercancel) und das Scrubben beenden. */
  touch-action: none;
}

#duration {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  background-color: rgb(81, 123, 187);
  border: none;
  padding: 0;
  margin: 0;
  user-select: none;
  /* Klicks sollen immer #pl_titel treffen, auch auf dem gefüllten Teil */
  pointer-events: none;
}

/* Abspielposition in Sekunden, unter dem Streifen */
#pl_time {
  text-align: center;
  font-size: 0.7vw;
  color: #303030;
  margin-top: 0.1042vw;
  white-space: nowrap;
  user-select: none;
}

/* Sitzt im blauen Ziehstreifen oben rechts. Trägt bewusst nicht die Klasse
   draghandle, startet also kein Ziehen. */
#closeaudio {
  display: block;
  position: absolute;
  top: 0.1563vw;
  right: 0.2604vw;
  width: auto;
  height: 0.7292vw;
  z-index: 10;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* URL-Eingabe der Aktion "Webseite öffnen" (im Action-Props-Panel). */
#weburl {
  display: none;
  box-sizing: border-box;
  width: 100%;
  font-size: 0.8vw;
  padding: 0.1563vw 0.2604vw;
  margin-bottom: 0.5208vw;
}
#weburl_text {
  display: none;
  font-size: 0.8vw;
  font-weight: bold;
  margin-top: 0.5208vw;
  margin-bottom: 0.3125vw;
}

/* ============================================================
   Einheitlicher Feinschliff der Felder im Action-Props-Dialog.
   Betrifft die Zuordnungs-Felder (Ziel-Name, Ziel-Auswahl, Toene)
   sowie die bestehenden Felder (Webadresse, Seiten-, Sprach- und
   Richtungsauswahl) und deren Beschriftungen. Steht bewusst nach den
   Ursprungsregeln, damit der neue Look greift. Die per JS gesteuerte
   Sichtbarkeit (.show()/.hide()) bleibt unberuehrt.
   ============================================================ */

/* Beschriftungen ueber den Feldern - dezent, halbfett, im Akzentblau. */
#zziel_text,
#zel_text,
#zsnd_ok_text,
#zsnd_no_text,
#ps_text,
#rc_text,
#weburl_text {
  font-size: 0.78vw;
  font-weight: 600;
  color: #3051a1;
  letter-spacing: 0.0104vw;
  margin-top: 0.625vw;
  margin-bottom: 0.2604vw;
}

/* Gemeinsamer Look fuer Text-Eingaben UND Auswahlfelder. */
#weburl,
#zziel_name,
#zsnd_ok,
#zsnd_no,
#zel_target,
#ps_select,
#lng,
#apos {
  box-sizing: border-box;
  font-size: 0.8vw;
  font-family: inherit;
  color: #222;
  padding: 0.3125vw 0.4688vw;
  border: 1px solid #c4ccda;
  border-radius: 6px;
  background-color: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#weburl:focus,
#zziel_name:focus,
#zsnd_ok:focus,
#zsnd_no:focus,
#zel_target:focus,
#ps_select:focus,
#lng:focus,
#apos:focus {
  border-color: #3051a1;
  box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15);
}

/* Volle Breite fuer die block-artigen Felder. */
#weburl,
#zziel_name,
#zsnd_ok,
#zsnd_no,
#zel_target,
#ps_select,
#lng {
  width: 100%;
  margin-bottom: 0.5208vw;
}

/* Auswahlfelder: nativen Pfeil aus, eigener Chevron - passt zu den Eingaben. */
#zel_target,
#ps_select,
#lng,
#apos {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%233051a1' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5208vw center;
  padding-right: 1.3542vw;
}

/* Die beiden Ton-Felder oeffnen die Mediathek -> klar als klickbar zeigen. */
#zsnd_ok,
#zsnd_no {
  cursor: pointer;
  background-color: #f6f8fc;
  text-overflow: ellipsis;
}
#zsnd_ok:hover,
#zsnd_no:hover {
  background-color: #eef2fb;
  border-color: #3051a1;
}

/* Slider-Beschriftungen an den Label-Look angleichen. */
.ac_title {
  color: #3051a1;
  font-weight: 600;
  margin-top: 0.625vw;
  margin-bottom: 0.2083vw;
}

/* "Seite zuruecksetzen": Knopf zum Aufnehmen des Reset-Zustands + Zeitstempel.
   Der Zustand haengt am Objekt (obj.data.resetstate), siehe captureResetState(). */
#rp_row {
  display: none;
}
#rp_text {
  font-size: 0.78vw;
  font-weight: 600;
  color: #3051a1;
  letter-spacing: 0.0104vw;
  margin-top: 0.625vw;
  margin-bottom: 0.2604vw;
}
#rp_save {
  box-sizing: border-box;
  width: 100%;
  font-size: 0.78vw;
  font-family: inherit;
  color: #fff;
  padding: 0.3646vw 0.4688vw;
  border: none;
  border-radius: 6px;
  background-color: #3051a1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#rp_save:hover {
  background-color: #24407f;
}
#rp_state {
  font-size: 0.72vw;
  color: #6b7688;
  margin-top: 0.2604vw;
  margin-bottom: 0.5208vw;
}

/* Numerische Wertfelder neben den Slidern dezent einfassen. */
.speed-value {
  box-sizing: border-box;
  border: 1px solid #c4ccda;
  border-radius: 5px;
  padding: 0.1563vw 0.2083vw;
  text-align: center;
  color: #222;
}
.speed-value:focus {
  outline: none;
  border-color: #3051a1;
  box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15);
}

/* Medien-Felder im Property-Editor (Play / Countdown-Alarm / Videoplayer):
   readonly, oeffnen den Reiter-Dialog. Dezenter Rahmen statt des kantigen
   Browser-Defaults; das Loeschkreuz bleibt in derselben Zeile (siehe .sndrow). */
.sndrow { white-space: nowrap; }

#playfile,
#countcustomsound,
#vp_video_field,
#cdw-sound-field,
#tlw-sound-field {
  box-sizing: border-box;
  height: auto;
  font-size: 0.7vw;
  line-height: 1.35;
  color: #303030;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #c4ccda;
  border-radius: 5px;
  padding: 0.1042vw 0.3646vw;
  vertical-align: middle;
}
#playfile:hover,
#countcustomsound:hover,
#vp_video_field:hover,
#cdw-sound-field:hover,
#tlw-sound-field:hover {
  border-color: #3051a1;
  background-color: #f6f8fc;
}
#playfile_clear,
#countcustomsound_clear,
#vp_video_field_clear {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 0.3125vw;
  color: #b00000;
  font-weight: bold;
}
#playfile { width: 52%; }

/* Eigener Alarmklang des Countdown-Timers: Feld öffnet die Mediathek. */
#countcustomsound { width: 62%; }

/* Videodatei des Videoplayers: gleiche Zeilenstruktur wie der Alarmklang oben
   (.plinks-Beschriftung + .prechts-Feld), daher auch dieselbe Breite - ohne
   Angabe nutzt das Feld die Browser-Standardbreite und ragt aus dem Panel. */
#vp_video_field { width: 62%; }

/* Widget-Einstellungspopups (Countdown/Ampel): Feld soll die restliche
   Zeilenbreite fuellen statt einer festen Prozentbreite (siehe .cdw-settings-row). */
#cdw-sound-field, #tlw-sound-field { flex: 1 1 auto; min-width: 0; }

label {
  display: inline-block;
}
/* ============================================================
   Mediathek / Klang-Auswahl - Flex-Layout mit zwei Reitern
   (Eigene Medien | Allgemeine Klaenge). Der aeussere Container wird
   per JS ein-/ausgeblendet (display block/none); das Flex-Layout
   uebernimmt #mediathek_inner, damit .show()/.fadeIn() nicht stoeren.
   ============================================================ */
#mediathek {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 7%;
  left: 5%;
  /* Breit genug, dass Laufzeit und Groesse (.mediadur/.mediasize) auch im
     laengsten Fall - "1:02:34" und "(100.05 MB)" - vollstaendig in ihre Spalte
     passen. Bei den frueheren 32% war die Groessenspalte rund 3,9vw breit, der
     laengste Wert braucht aber knapp 4vw: die Angabe wurde dann per
     text-overflow abgeschnitten und war ausgerechnet bei den grossen Dateien
     nicht mehr lesbar. */
  width: 38%;
  height: 85%;
  z-index: 99999999;
  overflow: hidden;
  background-color: var(--menu-bg);
  border-radius: 8px;
  border: 1px solid #303030;
  box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.32);
  padding: 0;
  margin: 0;
  user-select: none;
}
#mediathek_inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Kopf: Reiter links, Schliessen rechts. */
#mediathek_head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4167vw;
  padding: 0.5208vw 0.625vw 0;
  border-bottom: 1px solid #cdd3dd;
  flex: 0 0 auto;
}
.mediatabs { display: flex; gap: 4px; }
.mediatab {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #cdd3dd;
  border-bottom: none;
  background: #e9edf4;
  color: #3a4658;
  font: inherit;
  font-size: 0.95vw;
  padding: 0.3646vw 0.7292vw;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.mediatab:hover { background: #dde3ee; }
.mediatab.active {
  background: var(--menu-bg);
  color: #3051a1;
  font-weight: 600;
  margin-bottom: -0.0521vw; /* deckt die Kopf-Trennlinie ab */
  padding-bottom: 0.4167vw;
}
/* Haelt Hilfe-Icon und Schliessen-Kreuz als Gruppe zusammen - #mediathek_head
   selbst verteilt seine direkten Kinder per justify-content:space-between,
   ohne diesen Wrapper waeren beide auseinandergezogen worden statt gemeinsam
   rechts zu stehen. */
#mediathek_head_right {
  display: flex;
  align-items: flex-start;
  gap: 0.2083vw;
}

#mediathek_helpbtn {
  cursor: pointer;
  width: 1.25vw;
  height: 1.25vw;
  padding: 0.2083vw;
  border-radius: 6px;
  align-self: flex-start;
  transition: background-color 0.12s;
}
#mediathek_helpbtn:hover { background-color: #f0f2f6; }

#closemediathek {
  cursor: pointer;
  font-size: 1.1vw;
  line-height: 1;
  color: #6a7688;
  padding: 0.2083vw 0.3125vw;
  align-self: flex-start;
  border-radius: 6px;
}
#closemediathek:hover { color: #b00000; background: #f0f2f6; }

/* Panes fuellen den Rest; jede Pane ist selbst eine Flex-Spalte. */
.mediapane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5208vw 0.625vw 0.625vw;
  box-sizing: border-box;
}

/* Sortierleiste ueber der Liste. flex:0 0 auto, damit sie beim Scrollen der
   Liste stehen bleibt (Geschwister in derselben Flex-Spalte wie #medienliste). */
#media_sortbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.2083vw;
  margin-bottom: 0.3125vw;
}

#media_sortlabel {
  font-size: 0.8vw;
  color: #5a6472;
  margin-right: 0.2083vw;
}

.media_sortbtn {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #cdd3dd;
  background: #f2f5fa;
  color: #3a4658;
  font: inherit;
  font-size: 0.8vw;
  padding: 0.1563vw 0.5208vw;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

.media_sortbtn:hover { background: #e2e8f2; }

.media_sortbtn.active {
  background: #3f7fb3;
  border-color: #3f7fb3;
  color: #fff;
}

/* Richtungspfeil steht nur am aktiven Knopf; der Inhalt kommt aus
   mlUpdateSortButtons() in main.js. */
.media_sortarrow {
  margin-left: 0.2083vw;
  font-size: 0.7vw;
}

/* Eigene Medien: scrollbare Liste + fixierte Button-Leiste unten. */
#medienliste {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  color: #303030;
  overflow-y: auto;
  scrollbar-color: #8e8e8e #cfcfcf;
  scrollbar-width: thin;
  background-color: #fff;
  border: 1px solid #d3d9e3;
  border-radius: 6px;
  font-size: 0.9vw;
  padding: 0.2083vw 0.4167vw;
}
#dateiinfo { flex: 0 0 auto; font-size: 0.8vw; color: #444; }
.media_footer {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4167vw;
  margin-top: 0.5208vw;
}
#uploadbtn, #recordbtn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #1c2430;
  background-color: #e9edf4;
  border: 1px solid #c4ccda;
  border-radius: 6px;
  font-size: 0.9vw;
  padding: 0.4688vw 0.3125vw;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s, border-color .15s;
}
#uploadbtn:hover, #recordbtn:hover { background-color: #dde3ee; border-color: #3051a1; }
.mfbtn_icon { width: 1vw; height: 1vw; margin-right: 5px; }

/* Allgemeine Klaenge: gruppierte, aufklappbare Liste. */
#generalsounds {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-color: #8e8e8e #cfcfcf;
  scrollbar-width: thin;
  background-color: #fff;
  border: 1px solid #d3d9e3;
  border-radius: 6px;
  padding: 0.2083vw;
  color: #303030;
}
.snd_group { border-bottom: 1px solid #eceff4; }
.snd_group:last-child { border-bottom: none; }
.snd_group_head {
  display: flex;
  align-items: center;
  gap: 0.4167vw;
  cursor: pointer;
  font-size: 0.9vw;
  font-weight: 600;
  color: #3051a1;
  padding: 0.4167vw;
  user-select: none;
}
.snd_group_head .caret { transition: transform .15s; font-size: 0.75vw; color: #6a7688; }
.snd_group.collapsed .caret { transform: rotate(-90deg); }
.snd_group.collapsed .snd_items { display: none; }
.snd_group_head .count { margin-left: auto; font-weight: 400; color: #8a94a4; font-size: 0.8vw; }
.snd_items { display: flex; flex-direction: column; padding-bottom: 4px; }
.snd_row {
  display: flex;
  align-items: center;
  gap: 0.4167vw;
  padding: 0.2604vw 0.4167vw 0.2604vw 1.1458vw;
  cursor: pointer;
  border-radius: 5px;
  font-size: 0.85vw;
}
.snd_row:hover { background: #eef2fb; }
/* Angeklickte (selektierte) Zeile bleibt hervorgehoben, solange der Dialog offen ist. */
.snd_row.selected { background: #d7e2fb; }
.snd_row .snd_name { flex: 1 1 auto; word-break: break-word; }
/* Runder Vorschau-Button - gemeinsam fuer "Allgemeine Klaenge" und "Eigene
   Medien". touch-action:none, damit ein Halten in der scrollbaren Liste nicht
   als Scrollgeste gewertet und das Vorhoeren sofort abgebrochen wird. */
.snd_preview_btn,
.media_play_btn {
  flex: 0 0 auto;
  width: 1.1458vw;
  height: 1.1458vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c4ccda;
  border-radius: 50%;
  background: #f6f8fc;
  color: #3051a1;
  font-size: 0.72vw;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.snd_preview_btn:hover,
.media_play_btn:hover { background: #e3ebfb; border-color: #3051a1; }
/* Leuchtet gefuellt, solange vorgehoert wird (gedrueckt gehalten). */
.snd_preview_btn.playing,
.media_play_btn.media_play_active { background: #3051a1; color: #fff; border-color: #3051a1; }

/* Kleine Sprechblase, die erklaert, dass der Vorhoer-Knopf gedrueckt gehalten
   werden muss (siehe showHoldHint() in main.js). Liegt per position:fixed
   direkt am body, damit sie nicht am Rand der scrollbaren Medienliste
   abgeschnitten wird; der z-index liegt bewusst ueber allen Dialogen.
   pointer-events:none, damit der naechste Klick durch sie hindurch geht.
   Die Startposition ausserhalb des Sichtfelds verhindert, dass die Blase vor
   dem ersten Positionieren kurz irgendwo aufblitzt. */
.hold_hint {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 1000000000;
  max-width: 20vw;
  padding: 0.35vw 0.65vw;
  box-sizing: border-box;
  border-radius: 0.3vw;
  background: #3051a1;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75vw;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 0.1vw 0.4vw rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hold_hint.hold_hint_show { opacity: 1; }

/* Medienliste als echte Tabelle. table-layout:fixed haelt die Spaltenbreiten
   in allen Zeilen deckungsgleich; die Zeilenhoehe richtet sich nach der
   hoechsten Zelle, sodass ein zweizeiliger Dateiname die ganze Zeile gleich
   mitwachsen laesst, ohne die uebrigen Spalten zu verschieben. */
.media_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.media_row {
  cursor: pointer;
  background-color: transparent;
}

/* Mehrfachauswahl (Strg/Umschalt-Klick) fuer Massen-Loeschen/-Herunterladen
   ueber das Rechtsklick-Kontextmenue bzw. Entf/Backspace - eigene, kraeftigere
   Farbe als die schlichte Play-/Zuordnungs-Hervorhebung (#EBEBEB per Inline-
   Style, siehe mlHighlightRow() in main.js), damit sich beide nicht verwechseln
   lassen. !important gegen genau dieses Inline-Style, falls beides zufaellig
   dieselbe Zeile trifft. */
.media_row.mlsel {
  background-color: #cfe0ff !important;
}
.media_video_icon {
  width: 0.8333vw;
  height: 0.8333vw;
  opacity: 0.6;
}

/* Video-Vorschau-Knopf: gleiche runde Optik/gleiches touch-action wie
   .media_play_btn, nur mit dem Kamera-/Video-Icon statt eines Play-Dreiecks. */
.media_video_preview_btn {
  width: 1.1458vw;
  height: 1.1458vw;
  padding: 0.2vw;
  box-sizing: border-box;
  border: 1px solid #c4ccda;
  border-radius: 50%;
  background: #f6f8fc;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.media_video_preview_btn:hover { background: #e3ebfb; border-color: #3051a1; }
.media_video_preview_btn.media_play_active { background: #3051a1; border-color: #3051a1; }

/* Schwebendes Thumbnail-Fenster der Video-Vorschau - Optik wie die uebrigen
   kleinen Popups (#removecolor, #cdw-settings-popup): weisse Karte, Schatten.
   Position/Groesse werden beim Oeffnen per JS gesetzt (startVideoPreview()). */
#video_preview_popup {
  display: none;
  position: fixed;
  z-index: 999999999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  padding: 4px;
}
#video_preview_popup video {
  display: block;
  width: 16vw;
  max-width: 70vw;
  max-height: 60vh;
  border-radius: 4px;
}

.media_table td {
  border-bottom: 1px solid grey;
  padding: 0.1563vw 0.1042vw;
  font-size: 0.8vw;
  color: #303030;
  vertical-align: middle;
  background-color: transparent;
}

/* Dateiname: darf zweizeilig umbrechen - auch lange, ungetrennte Namen.
   touch-action:none wie bei .os_thumb/.bs_thumb: ein Griff auf den Namen soll
   immer das Ziehen auf die Leinwand starten statt die Liste zu scrollen (siehe
   installThumbDrag() in main.js). */
/* Die sieben Spaltenbreiten ergeben zusammen 100%. Laufzeit und Groesse haben
   Vorrang: sie duerfen nicht abgeschnitten werden (white-space:nowrap), waehrend
   der Dateiname notfalls umbricht und die Symbolspalten ohnehin nur ein Bildchen
   von 40% Zellbreite tragen. Die beiden Zahlenspalten sind deshalb bewusst
   grosszuegiger bemessen, als der laengste Wert braucht. */
.mediaitem {
  width: 39%;
  word-break: break-word;
  overflow-wrap: anywhere;
  touch-action: none;
}

/* Laufzeit ("m:ss", bei langen Dateien "h:mm:ss") - kommt aus
   media_duration.php, leer wenn nicht ermittelbar. Steht auch fuer die
   Sortierung "Dauer" (siehe mlSort). */
.mediadur {
  width: 11%;
  white-space: nowrap;
  text-align: right;
  color: #5a5a5a;
}

/* Groesse ("(12.34 MB)"). Der laengste moegliche Wert ist "(100.05 MB)" - die
   Obergrenze fuer ein Video liegt bei 100 MB, siehe MEDIA_UPLOAD_MAX_MB_VIDEO.
   Das Abschneiden per Ellipse bleibt nur als Notnagel stehen; treffen darf es
   bei dieser Breite keinen echten Wert mehr. */
.mediasize {
  width: 15%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media_play_div { width: 8%; text-align: center; }
.media_edit_div { width: 9%; text-align: center; }
.media_del_div  { width: 9%; text-align: center; }
.media_dl_div   { width: 9%; text-align: center; }

.media_edit_btn {
  width: 40%;
  height: auto;
  cursor: pointer;
}

.media_del_btn {
  width: 40%;
  height: auto;
  cursor: pointer;
}

#name {
  width: 90% !important;
  font-size: 1.0vw !important;
  padding: 0.1563vw;
}
#kat1 {
  width: 90% !important;
  font-size: 1.0vw !important;
  padding: 0.1563vw;
}
#kat2 {
  width: 90% !important;
  font-size: 1.0vw !important;
  padding: 0.1563vw;
}

.dvalue {
  width: 10%;
  color: rgb(36, 36, 36);

  font-size: 0.7vw;
}

.se_labels {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  height: 7.21%;
  z-index: 9;
  color: #292929;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0px;

  font-weight: normal;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

.gridicon {
  display: block;
  position: absolute;
  width: 15%;
  height: 15%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  border: solid rgb(0, 0, 0) 0px;
  margin: 0px;
}

.se_sublabeld {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  height: 6.32%;
  z-index: 9;
  color: rgb(40, 40, 40);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0px;

  font-size: 1.2vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

.se_slider {
  position: absolute;
  left: 10%;
  -webkit-appearance: none;
  width: 80%;
  height: 0.1563vw;
  margin-top: 3%;
  margin-right: 5%;
  border-radius: 3px;
  background: #343435;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  user-select: none;
}

.se_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.0417vw;
  height: 1.0417vw;
  border-radius: 50%;
  background: #3e82da;
  cursor: pointer;
}

.se_slider::-moz-range-thumb {
  width: 0.7813vw;
  height: 0.7813vw;
  border-radius: 50%;
  background: #3e82da;
  cursor: pointer;
}

#se_slider1 {
  top: 50%;
}

#se_slider1_label {
  top: 65%;
  left: 10%;
  width: 80%;
}

#page_settings {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 7%;
  left: 5%;
  width: 18%;
  /* 40% -> 45%: Platz fuer die zusaetzliche Zeile "Umgebungsfarbe". Alle
     Kinder sind in Prozent der DIALOGHOEHE positioniert - ihre Werte sind
     deshalb unten mit 40/45 umgerechnet, damit sie ihre bisherige absolute
     Groesse und Position behalten. */
  height: 45%;
  z-index: 9999;
  overflow: hidden;
  color: #303030;
  background-color: var(--menu-bg);
  border-radius: 8px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  padding: 1.1458vw 1.3542vw 0.9375vw 1.3542vw;

  font-size: 0.9vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#se_title {
  top: 2.50%;
  left: 3.29%;
  width: 91.25%;
  font-size: 1.1vw;
}

#se_bg_color {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 11.38%;
  left: 58%;
  width: 21.26%;
  height: 6.41%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: solid rgb(52, 52, 52) 1px;
  border-radius: 63px;

  font-weight: normal;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

/* Farbe der Flaeche AUSSERHALB der Seite. Gleiche Optik/Groesse wie
   #se_bg_color, eine Zeile tiefer - siehe canvasBgColor in main.js. */
#se_canvas_color {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 33.60%;
  left: 58%;
  width: 21.26%;
  height: 6.41%;
  z-index: 9;
  overflow: hidden;
  background-color: gray;
  border: solid rgb(52, 52, 52) 1px;
  border-radius: 63px;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#se_bg_img {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 22.22%;
  left: 58%;
  width: 21.26%;
  height: 6.41%;
  z-index: 9;
  overflow: hidden;
  background-color: transparent;
  border: solid rgb(52, 52, 52) 1px;
  border-radius: 63px;
  padding: 0px;
  margin: 0px;
  user-select: none;
}
#se_frame {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* Eine Zeile tiefer als frueher (die neue Umgebungsfarbe steht darueber);
     die Hoehe entspricht umgerechnet weiterhin genau der bisherigen. */
  top: 46.67%;
  left: 7.56%;
  width: 84.93%;
  height: 48.89%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(59, 59, 59) 0.727273px;
  border-radius: 10px;

  padding: 0px;
  margin: 0px;
  user-select: none;
}

.se_sublabeld {
  font-size: 0.7vw;
}

#img_blank {
  top: 13.1%;
  left: 8.09%;
}

#img_lines {
  top: 13.47%;
  left: 30.69%;
}

#img_karos {
  top: 13.6%;
  left: 53.17%;
}

#img_dots {
  top: 13.58%;
  left: 75.84%;
}

#se_label2 {
  top: 11.11%;
  left: 16%;
  width: 35%;
  font-size: 0.8vw;
}

#se_label3 {
  top: 22.22%;
  left: 16%;
  width: 35%;
  font-size: 0.8vw;
}

/* Beschriftung der Umgebungsfarbe - etwas breiter als die beiden darueber,
   damit das laengere Wort auf eine Zeile passt. */
#se_label4 {
  top: 33.33%;
  left: 16%;
  width: 40%;
  font-size: 0.8vw;
}

#div11 {
  top: 37.72%;
  left: 6.33%;
  width: 16.93%;
}

#div12 {
  top: 37.59%;
  left: 28.98%;
  width: 16.93%;
}

#div13 {
  top: 37.72%;
  left: 51.87%;
  width: 16.92%;
}

#div14 {
  top: 37.46%;
  left: 75.73%;
  width: 15.38%;
}

#se_grid_color {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 12%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(52, 52, 52);
  border: solid rgb(217, 217, 217) 1px;
  border-radius: 18px;

  font-size: 2.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#se_grid_color_label {
  top: 89%;
  left: 10%;
  width: 80%;
}

#optionmenu {
  display: none;
  position: absolute;
  left: 3.2%;
  top: 6.2%; /* direkt unter #topmenue, s. dort */
  width: 16%;
  background-color: #ffffff;
  color: #222;
  padding: 0.5%;
  user-select: none;
  z-index: 9999999;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  border-radius: 12px;

  font-weight: normal;
  font-size: 0.8vw;
}

#manage_options {
  display: none;
  position: absolute;
  left: 3.2%;
  top: 6.2%; /* direkt unter #topmenue, s. dort */
  width: 12%;
  background-color: #ffffff;
  color: #222;
  padding: 0.5%;
  user-select: none;
  z-index: 99999999;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  border-radius: 12px;

  font-weight: normal;
  font-size: 0.8vw;
}

#ov_menu {
  display: none;
  position: absolute;
  left: 3.2%;
  top: 18%;
  width: 17%;

  font-weight: normal;
  font-size: 0.8vw;
  background-color: #ffffff;
  color: #222;
  padding: 0.5%;
  padding-left: 1%;
  user-select: none;
  z-index: 99999;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
}

#grfilterstart {
  display: block;
  width: 90%;
  padding: 3%;
  border: 1px solid #303030;
  border-radius: 5px;
  color: #303030;
  background-color: #fcfcfc;
  text-align: center;
  font-size: 0.7vw;
}

.option_item {
  padding-top: 1%;
  padding-bottom: 1%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.img_option {
  background-color: #cacaca;
  color: rgb(0, 0, 0);
}
.ov_option {
  padding-top: 1%;
  padding-bottom: 1%;
  display: flex;
  justify-content: start;
  align-items: center;
}

/* Heller Zeilen-Hinweis statt des kraeftigen #baceff (das ist die Markierung
   des AKTIVEN Werkzeugs, siehe markieren() - beides gleich einzufaerben war
   verwirrend). Leicht gerundet, damit die Hervorhebung nicht als harter
   Balken ueber die ganze Menuebreite laeuft. */
.option_item:hover {
  background-color: #eef4ff;
  border-radius: 6px;
}
/* Schuelermodus: Menuepunkt sichtbar, aber erkennbar nicht fuer diese Rolle
   gedacht (siehe den .dokbox-Rechtsklick in main.js). Bewusst NICHT
   pointer-events:none - der Klick soll weiterhin die Erklaerung ausloesen,
   statt ins Leere zu gehen. */
.option_item.locked_item {
  opacity: 0.45;
}
.ov_option:hover {
  background-color: #eef4ff;
  border-radius: 6px;
}

#contextmenu {
  display: none;
  position: absolute;
  width: 17%;

  font-weight: normal;
  font-size: 0.8vw;
  background-color: #ffffff;
  color: #222;
  padding: 0.5%;
  user-select: none;
  z-index: 99999;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
}

#page-context {
  display: none;
  position: absolute;
  width: 16%;

  font-weight: normal;
  font-size: 0.8vw;
  background-color: #ffffff;
  color: #222;
  padding: 0.5%;
  user-select: none;
  z-index: 99999;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
}

/* Minimenue "Umbenennen"/"Loeschen" fuer Meine-Objekte-Thumbnails
   (Rechtsklick/langes Druecken) - bewusst eigenstaendig statt #contextmenu
   mitzubenutzen, das fuer Canvas-Objekte gedacht ist und hier voellig falsche
   Optionen mitbraeuchte. Schriftgroesse (0.8vw) bewusst wie bei #contextmenu/
   #page-context uebernommen, statt einer eigenen kleineren Groesse - width:
   max-content statt fester min-width, damit sich der Kasten an den (kurzen,
   festen) Text anpasst statt unnoetig breit zu sein. */
/* #media_context (Medienliste: Loeschen/Herunterladen der Auswahl) teilt sich
   dieselbe Optik - gleiches Prinzip, eigenstaendiges Menue statt #contextmenu. */
#os_thumb_context, #media_context {
  display: none;
  position: fixed;
  width: max-content;
  font-weight: normal;
  font-size: 0.8vw;
  background-color: #fcfcfc;
  color: #292929;
  padding: 0.4vw 0.6vw;
  user-select: none;
  z-index: 99999;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
#os_thumb_context .option_item, #media_context .option_item {
  white-space: nowrap;
}
/* .menuimg ist normalerweise 11% der (viel breiteren) #contextmenu-Box -
   bei width:max-content waere dieselbe Prozentangabe nicht verlaesslich
   (zirkulaerer Bezug: die Breite haengt ja gerade vom Icon mit ab). Fester
   vw-Wert, der dasselbe Icon-zu-Schrift-Verhaeltnis wie in #contextmenu
   ergibt (dort: 11% von 17vw ≈ 1.87vw bei 0.8vw Schrift). */
#os_thumb_context .menuimg, #media_context .menuimg {
  width: 1.875vw;
}

.line {
  display: block;
  width: 99%;
  margin-top: 3%;
  margin-bottom: 3%;
  height: 7%;
  background-color: white;
}

/* #ftitle/#filter_frame im Stil von #mathe_options_dialog (siehe
   [[mathe-dialog-design-system]]) - weiche Schatten statt harter Rahmen,
   helle statt dunkler Eingabeelemente, blauer Fokus-/Akzentton #4a90d9.
   Positionierung (absolute left/top/width in %) bewusst unveraendert - reiner
   Optik-Umbau, kein Layout-Umbau. */
#ftitle {
  position: absolute;
  left: 4%;
  top: 2%;
  font-size: 1.2vw;
  font-weight: bold;
  color: #222;
  user-select: none;
}

/* Hilfe-Knopf im Dashboard (#filelist = das eigentliche Projektfenster) -
   ganz oben rechts, analog zu #helpbtn im Editor (siehe openHelpModal() in
   main.js, das beide Knoepfe bedient). */
#dashhelpbtn {
  position: absolute;
  right: 3%;
  top: 2%;
  width: 4%;
  padding: 0.2604vw;
  box-sizing: border-box;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
  transition: background-color 0.12s;
}
#dashhelpbtn:hover {
  background-color: #eef4ff;
}

#fachliste {
  position: absolute;
  left: 10%;
  top: 50%;
  user-select: none;
  z-index: 9999;
}

#fachliste_label {
  position: absolute;
  left: 8%;
  top: 15%;
  width: 17%;
  font-size: 0.8vw;
  color: #444;
  font-weight: bold;

  text-align: center;
}

#klassenliste_label {
  position: absolute;
  left: 30%;
  top: 15%;
  width: 17%;
  font-size: 0.8vw;
  color: #444;
  font-weight: bold;

  text-align: center;
}

#klassenliste {
  position: absolute;
  left: 30%;
  top: 50%;
  user-select: none;
  z-index: 9999;
}

.filter_select {
  font-size: 0.8vw;
  border: none;
  border-radius: 4px;
  width: 17%;
}

.filter_line {
  background-color: #ffffff;
  color: #222;
  font-size: 0.8vw;

  border: 1px solid #bcbcbc;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.filter_line:hover,
.filter_line:focus {
  border-color: #4a90d9;
  outline: none;
}

.kfsel {
  background-color: #ffffff;
  color: #222;
  font-size: 0.8vw;

  border: none;
}

#lupe {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 3%;
  cursor: pointer;
}

#reload {
  position: absolute;
  left: 1%;
  top: 20%;
  width: 6%;
  cursor: pointer;
  transition: transform 0.2s;
}
#reload:hover {
  transform: rotate(45deg);
}

#archivauswahl {
  position: absolute;
  left: 85%;
  top: 16%;
  width: 12%;
  font-size: 0.8vw;
  color: #444;
}
#archivauswahl input[type="checkbox"] {
  accent-color: #4a90d9;
  cursor: pointer;
}
#archivauswahl label {
  cursor: pointer;
}

#search_project {
  position: absolute;
  left: 54%;
  width: 23%;
  top: 40%;
  height: 30%;
  background-color: #ffffff;
  color: #222;
  border: 1px solid #bcbcbc;
  padding-left: 2%;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
}
#search_project:focus {
  border-color: #4a90d9;
}

#settable td {
  user-select: none;
}

#settable th {
  user-select: none;
  text-align: left;
}

#loadlocal {
  position: absolute;
  left: 4%;
  bottom: 4.4%;
  width: 86%;
  padding: 0.3646vw;
  border: none;
  border-radius: 5px;
  color: #2255aa;
  background-color: #e8f0fe;
  text-align: center;
  font-size: 1.1vw;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: none;
}
#loadlocal:hover {
  background-color: #c5d8f8;
}

#erasehelp {
  display: none;
  position: absolute;
  left: 20%;
  top: 94.7%;
  width: 10%;
  height: 4.5%;
  border-radius: 8px;
  background-color: rgb(65, 77, 99);
  z-index: 9999;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  opacity: 0.8;
  text-align: center;
}

#bigrubber,
#bigundo,
#bigredo {
  display: inline-block;
  width: 16%;
  padding: 5%;
  height: auto;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

/* ===== "Farbe transparent machen" - Dialog (erweitertes removeBg) ===== */
#removecolor {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 26vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#rc_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#rc_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.rc_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.rc_label {
  flex: 0 0 4.5vw;
  font-size: 0.9vw;
}

#rc_color {
  width: 2.4vw;
  height: 1.7vw;
  padding: 0;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

#rc_pick {
  font-size: 0.85vw;
  padding: 0.25vw 0.7vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  background: #f2f5fb;
  cursor: pointer;
}

#rc_pick:hover { background: #e3ebfb; border-color: #3051a1; }
/* Leuchtet, solange die Pipette aktiv auf einen Bild-Klick wartet. */
#rc_pick.active { background: #3051a1; color: #fff; border-color: #3051a1; }

/* Der Toleranz-Slider nutzt die vorhandene .slider-Optik, soll hier aber die
   Zeile füllen (die globale .slider-Breite von 55% ist zu schmal). */
#rc_tolerance { flex: 1 1 auto; width: auto; margin: 0; }

#rc_tolerance_val {
  flex: 0 0 2.6vw;
  text-align: center;
  font-size: 0.85vw;
}

.rc_check {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  font-size: 0.9vw;
  cursor: pointer;
}

#rc_hint {
  min-height: 1vw;
  font-size: 0.8vw;
  color: #3051a1;
}

.rc_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.2vw;
}

.rc_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#rc_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#rc_apply:hover { background: #26407f; }
#rc_cancel { background: #f2f5fb; }
#rc_cancel:hover { background: #e6ebf5; }

/* ===== "Als Skizze zeichnen" - Verformungs-Dialog (rough.js, Live-Vorschau) ===== */
#roughdialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#ro_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#ro_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.ro_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.ro_label {
  flex: 0 0 5.5vw;
  font-size: 0.9vw;
}

/* Slider soll die Zeile füllen (globale .slider-Breite 55% ist zu schmal). */
#ro_roughness { flex: 1 1 auto; width: auto; margin: 0; }

#ro_roughness_val {
  flex: 0 0 2.6vw;
  text-align: center;
  font-size: 0.85vw;
}

.ro_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.2vw;
}

.ro_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#ro_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#ro_apply:hover { background: #26407f; }
#ro_cancel { background: #f2f5fb; }
#ro_cancel:hover { background: #e6ebf5; }

/* ===== "Im Kreis anordnen" - Mehrfachauswahl auf einem Kreis verteilen =====
   Aufbau bewusst identisch zum Skizzen-Dialog darueber; die Regeln sind mit
   dessen Selektoren kombiniert, wo sie sich nicht unterscheiden. */
#circledialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#ca_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#ca_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

/* Umschalter rund/eckig - zwei Reiter direkt unter dem Titel. Optik an den
   Knoepfen der Fussleiste orientiert (aktiv = blau wie #ca_apply). */
.ca_tabs {
  display: flex;
  gap: 0.3vw;
}

.ca_tab {
  flex: 1 1 0;
  font-size: 0.9vw;
  padding: 0.35vw 0.6vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  background: #f2f5fb;
  color: #202020;
  cursor: pointer;
}

.ca_tab:hover {
  background: #e6ebf5;
}

.ca_tab.is-active {
  background: #3051a1;
  border-color: #3051a1;
  color: #fff;
}

.ca_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.ca_label {
  flex: 0 0 5.5vw;
  font-size: 0.9vw;
}

/* Slider soll die Zeile fuellen (globale .slider-Breite 55% ist zu schmal).
   Gilt fuer alle drei Regler (Anzahl sowie Radius X/Y, gekoppelt = Kreis). */
#ca_count,
#ca_radius,
#ca_radius_y { flex: 1 1 auto; width: auto; margin: 0; }

#ca_count_val,
#ca_radius_val,
#ca_radius_y_val {
  flex: 0 0 2.6vw;
  text-align: center;
  font-size: 0.85vw;
}

.ca_check {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  font-size: 0.9vw;
  cursor: pointer;
}

.ca_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.2vw;
}

.ca_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#ca_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#ca_apply:hover { background: #26407f; }
#ca_cancel { background: #f2f5fb; }
#ca_cancel:hover { background: #e6ebf5; }

/* ===== "Wellen / Zacken" - Linien-Verformung mit Live-Vorschau ===== */
#wavedialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#wv_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#wv_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.wv_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.wv_label {
  flex: 0 0 5.5vw;
  font-size: 0.9vw;
}

.wv_radio {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  font-size: 0.9vw;
  cursor: pointer;
}

/* Slider soll die Zeile füllen (globale .slider-Breite 55% ist zu schmal). */
#wv_count,
#wv_amp { flex: 1 1 auto; width: auto; margin: 0; }

#wv_count_val,
#wv_amp_val {
  flex: 0 0 2.6vw;
  text-align: center;
  font-size: 0.85vw;
}

.wv_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.2vw;
}

.wv_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#wv_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#wv_apply:hover { background: #26407f; }
#wv_cancel { background: #f2f5fb; }
#wv_cancel:hover { background: #e6ebf5; }

/* ===== "Text an Pfad ausrichten" - Versatz-Dialog mit Live-Vorschau ===== */
#pathtextdialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#pt_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#pt_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.pt_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.pt_label {
  flex: 0 0 5.5vw;
  font-size: 0.9vw;
}

/* Slider soll die Zeile füllen (globale .slider-Breite 55% ist zu schmal). */
#pt_offset { flex: 1 1 auto; width: auto; margin: 0; }

#pt_offset_val {
  flex: 0 0 2.6vw;
  text-align: center;
  font-size: 0.85vw;
}

.pt_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.2vw;
}

.pt_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#pt_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#pt_apply:hover { background: #26407f; }
#pt_cancel { background: #f2f5fb; }

/* ===== "Text kruemmen" - Dialog mit senkrechtem Regler =====
   Aufbau und Farben wie #pathtextdialog (dieselben .pt_buttons werden
   mitbenutzt), nur schmaler und hoeher - der Regler steht senkrecht. */
#curvetextdialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 20%;
  left: 43vw;
  width: 13vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

/* Eine einzige Spalte, durchgehend mittig - Titel, Regler, Anzeige und
   Knoepfe stehen dadurch alle auf derselben Achse. */
#ct_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vw;
  padding: 0.8vw 1vw 1vw;
}

#ct_title {
  font-size: 1.05vw;
  font-weight: bold;
  text-align: center;
}

/* Der Regler ist ein gewoehnlicher WAAGERECHTER range-Eingang, der um 90 Grad
   gedreht wird - das sieht in jedem Browser gleich aus, anders als die
   uneinheitlich unterstuetzten "slider-vertical"-Eigenschaften. Weil eine
   Drehung den Platzbedarf im Layout NICHT veraendert, gibt dieser Rahmen die
   Masse vor: seine Hoehe entspricht der Laenge des gedrehten Reglers, und er
   zentriert das (ungedreht viel breitere) Eingabefeld auf der Mittelachse. */
#ct_slider_wrap {
  width: 100%;
  height: 13vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ct_angle {
  width: 13vw;
  /* Spur etwas kraeftiger als die Vorgabe der .slider-Klasse (0.1563vw): der
     Regler ist hier das einzige Bedienelement und wird am Board mit dem Finger
     bewegt. */
  height: 0.3vw;
  margin: 0;
  opacity: 1;
  transform: rotate(-90deg);
}
/* Griffel deutlich groesser als bei den uebrigen Reglern (dort 0.78vw): auf
   einem 1920er Board sind 2.2vw rund 42 px und damit sicher zu treffen.
   Bewusst NUR fuer diesen Regler - .slider gilt app-weit. */
#ct_angle::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.2vw;
  height: 2.2vw;
  border-radius: 50%;
  background: #3e82da;
  border: 0.14vw solid #ffffff;
  box-shadow: 0 0.1vw 0.35vw rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
#ct_angle::-moz-range-thumb {
  width: 2.2vw;
  height: 2.2vw;
  border-radius: 50%;
  background: #3e82da;
  border: 0.14vw solid #ffffff;
  box-shadow: 0 0.1vw 0.35vw rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* "nach oben"/"nach unten" stehen an den Enden des Reglers und sagen, wohin
   er wirkt - eine Beschriftung, die man nicht lesen muss, um sie zu
   verstehen. */
.ct_hint {
  font-size: 0.8vw;
  color: #5a6172;
  white-space: nowrap;
}

#ct_valuerow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3vw;
}
/* Masse ausdruecklich setzen: die geerbte .sliderfield-Klasse rechnet in
   Prozent (width 25 %, height 5 %) und haengt damit an der Groesse ihres
   Elternteils - in dieser schmalen Spalte kaeme sonst ein kaum sichtbarer
   Streifen heraus. */
#ct_angle_val {
  width: 2.8vw;
  height: auto;
  padding: 0.2vw 0.3vw;
  border-radius: 3px;
  text-align: center;
  font-size: 0.85vw;
  margin: 0;
}
.ct_unit {
  font-size: 0.85vw;
  color: #5a6172;
}
#ct_reset {
  font-size: 0.75vw;
  padding: 0.2vw 0.55vw;
  margin-left: 0.3vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  background: #f2f5fb;
  cursor: pointer;
}
#ct_reset:hover { background: #e4ebf7; }

/* Knopfzeile: mittig statt rechtsbuendig (die geerbte .pt_buttons-Regel
   richtet rechts aus) und kleiner, damit beide Knoepfe nebeneinander in den
   schmalen Dialog passen. */
.ct_buttons {
  justify-content: center;
  width: 100%;
  gap: 0.4vw;
}
.ct_buttons button {
  font-size: 0.8vw;
  padding: 0.3vw 0.6vw;
}

#ct_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#ct_apply:hover { background: #26407f; }
#ct_cancel { background: #f2f5fb; }

/* ===== "Text zusammenfuegen" - Dialog mit Trennzeichen-Optionen ===== */
#combinedialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#cb_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#cb_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.cb_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  flex-wrap: wrap;
}

.cb_radio {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  font-size: 0.9vw;
  cursor: pointer;
  flex: 0 0 auto;
}

#cb_separator_input {
  flex: 0 0 6vw;
  font-size: 0.85vw;
  padding: 0.3vw 0.5vw;
  border: 1px solid #bbb;
  border-radius: 3px;
}

.cb_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.2vw;
}

.cb_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#cb_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#cb_apply:hover { background: #26407f; }
#cb_cancel { background: #f2f5fb; }
#cb_cancel:hover { background: #e6ebf5; }
#pt_cancel:hover { background: #e6ebf5; }

/* ===== Suchen und Ersetzen Dialog */
#findreplacedialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#fr_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#fr_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.fr_row {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}

.fr_label {
  font-size: 0.9vw;
  font-weight: 500;
}

#fr_find, #fr_replace {
  font-size: 0.9vw;
  padding: 0.4vw 0.6vw;
  border: 1px solid #bbb;
  border-radius: 3px;
  box-sizing: border-box;
}

.fr_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.3vw;
}

.fr_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#fr_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#fr_apply:hover { background: #26407f; }
#fr_cancel { background: #f2f5fb; }
#fr_cancel:hover { background: #e6ebf5; }

/* ===== Rechteck unterlegen Dialog */
#bgrectdialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#br_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1vw 1.2vw 1.1vw;
}

#br_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

.br_row {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
}

.br_label {
  font-size: 0.9vw;
  font-weight: 500;
}

.br_row .slider-line {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.br_row .slider-line .slider { flex: 1 1 auto; width: auto; margin: 0; }

.br_row .slider-line .sliderfield {
  flex: 0 0 2.4vw;
  width: 2.4vw;
  text-align: center;
  font-size: 0.8vw;
  padding: 0.15vw 0;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 3px;
  color: #202020;
}

.br_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.3vw;
}

.br_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#br_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#br_apply:hover { background: #26407f; }
#br_cancel { background: #f2f5fb; }
#br_cancel:hover { background: #e6ebf5; }

/* ===== Ebenenliste (Klick auf #screensize im Edit-Modus) =====
   Sitzt unter dem rechten Rand der oberen Werkzeugleiste. Die Liste selbst
   scrollt, der Titel bleibt stehen.

   box-sizing gilt hier ausdruecklich auch fuer alle Kinder: das Projekt hat
   keine globale border-box-Regel, und ohne diese Zeile schlaegt das Innen-
   abstand der Titelzeile auf deren Breite auf - der Schliessen-Knopf rutschte
   dadurch aus dem Fenster heraus. */
#layerlist, #layerlist * { box-sizing: border-box; }

#layerlist {
  display: none;
  position: absolute;
  top: 5.5%;
  right: 5.5%;
  width: 17vw;
  max-height: 60vh;
  z-index: 999999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 7px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  color: #303030;
  user-select: none;
  overflow: hidden;
  flex-direction: column;
}

/* Der Titel ist zugleich die Ziehleiste. Die Beschriftung bleibt bewusst ein
   nackter Textknoten (ohne <span>): der Drag-Handler verlangt, dass das
   Klickziel selbst die Klasse draghandle traegt - ein Wrapper-Element waere
   das Ziel und wuerde das Ziehen an der Beschriftung verhindern. */
#ll_title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4vw;
  font-size: 0.9vw;
  font-weight: bold;
  padding: 0.4vw 0.7vw;
  border-bottom: 1px solid #d5d5d5;
  background-color: #ebebeb;
  cursor: move;
}

#ll_close {
  flex: 0 0 auto;
  font-size: 1.2vw;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

#ll_close:hover { color: #000; }

#ll_body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

#ll_empty {
  display: none;
  padding: 0.7vw;
  font-size: 0.8vw;
  font-style: italic;
  color: #777;
}

.ll_row {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  padding: 0.35vw 0.7vw;
  font-size: 0.8vw;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.ll_row:hover { background-color: #eef2fb; }

.ll_row.ll_selected {
  background-color: #427bbf;
  color: #fff;
}

/* Beschriftung einzeilig halten - lange Textinhalte werden abgeschnitten,
   der volle Text steht im title-Attribut. */
.ll_label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Umsortieren per Ziehen: die gezogene Zeile wird blass, die Einfuegestelle
   durch eine kraeftige Linie ober-/unterhalb der Zielzeile angezeigt. */
.ll_row.ll_dragging {
  opacity: 0.4;
  background-color: #dde5f5;
}

.ll_row.ll_drop_above { box-shadow: inset 0 2px 0 0 #3051a1; }
.ll_row.ll_drop_below { box-shadow: inset 0 -2px 0 0 #3051a1; }

/* Waehrend des Ziehens darf die Liste nicht mitscrollen/selektieren. */
#ll_body.ll_reordering { cursor: grabbing; }

/* Blitz vor dem Namen: Objekt loest im Showmodus eine Aktion aus. */
.ll_action {
  flex: 0 0 auto;
  font-size: 0.75vw;
  line-height: 1;
  color: #d08a00;
}

.ll_row.ll_selected .ll_action { color: #ffd45e; }

/* Schloss steht vor dem Auge (siehe buildLayerList()) - dasselbe Verhalten
   wie .ll_eye: immer sichtbar, das Symbol selbst (zu/offen) zeigt den Zustand. */
.ll_lock {
  flex: 0 0 auto;
  font-size: 0.85vw;
  line-height: 1;
  padding: 0.1vw 0.15vw;
  opacity: 0.75;
}

.ll_lock:hover { opacity: 1; }

.ll_eye {
  flex: 0 0 auto;
  position: relative;
  font-size: 0.85vw;
  line-height: 1;
  padding: 0.1vw 0.15vw;
  opacity: 0.75;
}

.ll_eye:hover { opacity: 1; }

/* Gesperrtes Objekt: ganze Zeile abgeschwaecht, damit gesperrte Objekte auf
   einen Blick auffallen - anders als bei .ll_invisible (dort nur Label/Auge),
   weil hier explizit "die ganze Zeile" gewuenscht war. Eigene Regel statt
   einfach .ll_row.ll_locked{opacity:...}, damit .ll_selected (Blau + Weiss)
   bei einem markierten UND gesperrten Objekt nicht mitverblasst - die
   Markierung soll immer voll sichtbar bleiben. */
.ll_row.ll_locked:not(.ll_selected) { opacity: 0.55; }

/* Unsichtbares Objekt: Auge blass + durchgestrichen (es gibt kein brauchbares
   "geschlossenes Auge" als Zeichen, deshalb der Strich per ::after). */
.ll_row.ll_invisible .ll_label { opacity: 0.45; font-style: italic; }
.ll_row.ll_invisible .ll_eye { opacity: 0.4; }

.ll_row.ll_invisible .ll_eye::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.0521vw;
  background: currentColor;
  transform: rotate(-45deg);
}

/* ===== Lautstaerke-Ampel: eigenstaendiges Overlay, unabhaengig von der
   Leinwand/Fabric.js (siehe main.js). transform:scale() statt Breiten-/
   Hoehenaenderung fuer den Resize-Griff, damit Lichter/Schalter/Regler
   gemeinsam gleichmaessig mitskalieren. */
#trafficlight-widget {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 15%;
  left: 44%;
  width: 3.6458vw;
  /* Etwas zusaetzliche Hoehe (~8%) unten, damit das Zahnrad links unten mehr
     Platz hat und nicht so dicht an Schalter/Slider klebt. */
  padding-bottom: 0.7292vw;
  z-index: 999998;
  background-color: #1f1f1f;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  color: #fff;
  user-select: none;
  transform-origin: top left;
}

#trafficlight-widget .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0.625vw;
  width: 100%;
  margin-bottom: 0;
  padding: 0 0.1563vw;
  background-color: #3a3a3a;
  border-radius: 3px 3px 0 0;
  box-sizing: border-box;
}

#tlw-close {
  font-size: 0.5729vw;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
#tlw-close:hover { color: #ffe0e0; }

#tlw-lights {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.3125vw;
  padding: 0.3646vw 0 0.3125vw;
  position: relative;
}

/* Erscheint zentriert ueber der Ampel, wenn getUserMedia kein Mikrofon
   findet (siehe startTrafficLightMic() in main.js). */
#tlw-nomic {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.4583vw;
  height: 1.4583vw;
  object-fit: contain;
  pointer-events: none;
}

#tlw-lights-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2604vw;
}

.tlw-light {
  width: 1.875vw;
  height: 1.875vw;
  border-radius: 50%;
  background-color: #3a1414;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
#tlw-red.active { background-color: #ff2020; box-shadow: 0 0 14px 5px rgba(255, 32, 32, 0.75); }
#tlw-yellow.active { background-color: #ffd400; box-shadow: 0 0 14px 5px rgba(255, 212, 0, 0.75); }
#tlw-green.active { background-color: #2ecc40; box-shadow: 0 0 14px 5px rgba(46, 204, 64, 0.75); }

/* Analoger Pegel-Streifen rechts neben den Lichtern (wie bei Audiogeraeten) -
   bewusst grau (nicht farbig): die Lichter zeigen die Zone an, der Streifen
   nur den kontinuierlichen Pegel. Waechst von unten nach oben. */
#tlw-meter {
  align-self: stretch;
  width: 0.3646vw;
  background-color: #111;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
}
#tlw-meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background-color: #999;
  transition: height 0.05s linear;
}

#tlw-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.3125vw;
  padding: 0.3125vw 0.3125vw 0.4167vw;
  border-top: 1px solid #3a3a3a;
}

/* Schalter: nur ein kleiner grauer Punkt, der schwach blaeulich leuchtet,
   wenn an (bewusst gedaempft, damit er nicht mit den Ampelfarben konkurriert). */
#tlw-power-label {
  position: relative;
  display: inline-flex;
  width: 0.4167vw;
  height: 0.4167vw;
  cursor: pointer;
  flex: 0 0 auto;
}
#tlw-power-label input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
#tlw-power-icon {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  transition: opacity 0.2s ease, filter 0.2s ease;
  user-drag: none;
  -webkit-user-drag: none;
}
#tlw-power-label input:checked + #tlw-power-icon {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(74, 109, 140, 0.9));
}

/* Regler: grau statt blau (wie der Rest der Bedienelemente), noch etwas
   kleiner als zuvor - Breite bleibt gleich. */
#tlw-sensitivity {
  width: 1.7708vw;
  height: 0.0781vw;
  margin: 0;
  background: #666;
}
#tlw-sensitivity::-webkit-slider-thumb {
  width: 0.3125vw;
  height: 0.3125vw;
  background: #999;
}
#tlw-sensitivity::-moz-range-thumb {
  width: 0.2604vw;
  height: 0.2604vw;
  background: #999;
}

#tlw-resize-handle {
  position: absolute;
  right: 0.1042vw;
  bottom: 0.1042vw;
  width: 0.4688vw;
  height: 0.4688vw;
  cursor: nwse-resize;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  opacity: 0.7;
  /* Touch-Bedienung: Geste nicht an den Browser abgeben, siehe .draghandle */
  touch-action: none;
}

/* ===== Countdown-Timer als eigenstaendiges HTML-Overlay =====
   (ergaenzt den vorhandenen Fabric-Timer, ersetzt ihn nicht - gleiche
   Bauweise wie das Ampel-Widget oben: draggable + transform:scale()) */
#countdown-widget {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 15%;
  left: 55%;
  width: 6.25vw;
  z-index: 999998;
  background-color: #1f1f1f;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  color: #fff;
  user-select: none;
  transform-origin: top left;
}

#countdown-widget .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0.625vw;
  width: 100%;
  margin-bottom: 0;
  padding: 0 0.1563vw;
  background-color: #3a3a3a;
  border-radius: 3px 3px 0 0;
  box-sizing: border-box;
}

#cdw-close {
  font-size: 0.5729vw;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
#cdw-close:hover { color: #ffe0e0; }

#cdw-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4167vw;
  padding: 0.5208vw 0.4167vw;
}

#cdw-display {
  font-family: 'Courier New', monospace;
  font-size: 0.9375vw;
  font-weight: bold;
  letter-spacing: 0.026vw;
  min-width: 2.7083vw;
  text-align: center;
}

.cdw-arrows {
  display: flex;
  flex-direction: column;
  gap: 0.1042vw;
}
/* Pfeile/Bedienelemente immer in der Textfarbe (weiss) bei 30% Opacity -
   dadurch bleiben sie unabhaengig von der (frei waehlbaren) Hintergrundfarbe
   des Widgets erkennbar, solange diese nicht zu hell ist. Bewusst OHNE
   Hover-/Running-Sondertfarbe, damit die Optik konsistent bleibt. */
.cdw-arrow {
  font-size: 0.4167vw;
  line-height: 1;
  color: #fff;
  opacity: 0.3;
  cursor: pointer;
}

#cdw-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7292vw;
  padding: 0.2083vw 0.4167vw 0.5208vw;
  border-top: 1px solid #3a3a3a;
}
#cdw-reset, #cdw-playpause {
  font-size: 0.7292vw;
  color: #fff;
  opacity: 0.3;
  cursor: pointer;
}

/* Feste Box, damit der Wechsel Play-Dreieck (Unicode-Zeichen) <-> Pause
   (siehe unten) die Widget-Groesse nicht durch abweichende Font-Metriken
   verschiebt. */
#cdw-playpause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.7292vw;
  height: 0.7292vw;
  position: relative;
}
/* Pause-Symbol bewusst als zwei CSS-Balken statt Unicode-Zeichen (U+23F8
   wird von vielen Systemschriften farbig als Emoji dargestellt). */
#cdw-playpause.cdw-running::before,
#cdw-playpause.cdw-running::after {
  content: '';
  position: absolute;
  top: 0.0781vw;
  bottom: 0.0781vw;
  width: 0.1563vw;
  background-color: currentColor;
}
#cdw-playpause.cdw-running::before { left: 3px; }
#cdw-playpause.cdw-running::after { left: 8px; }

#cdw-resize-handle {
  position: absolute;
  right: 0.1042vw;
  bottom: 0.1042vw;
  width: 0.4688vw;
  height: 0.4688vw;
  cursor: nwse-resize;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  opacity: 0.7;
  /* Touch-Bedienung: Geste nicht an den Browser abgeben, siehe .draghandle */
  touch-action: none;
}

#cdw-gear, #tlw-gear {
  position: absolute;
  left: 0.2083vw;
  bottom: 0.1563vw;
  font-size: 0.5729vw;
  line-height: 1;
  color: #fff;
  opacity: 0.3;
  cursor: pointer;
  user-select: none;
}
/* Beim Uhr-Widget sitzt das Zahnrad in der (erst auf Klick sichtbaren)
   Verschiebe-Leiste, nicht unten links im Gehaeuse - siehe #clw-bar. */
#clw-gear {
  font-size: 0.5729vw;
  line-height: 1;
  color: #fff;
  opacity: 0.45;
  cursor: pointer;
  user-select: none;
}
#clw-gear:hover { opacity: 0.8; }

/* Position (left/top) wird beim Oeffnen per JS gesetzt (openCdwSettings()/
   openTlwSettings()) und mit clampElementToViewport() im sichtbaren Bereich
   gehalten - deshalb hier bewusst kein festes left/bottom. Breite ist immer
   15% der Bildschirmbreite, unabhaengig vom transform:scale() des jeweiligen
   Widgets (die Popups liegen dafuer bewusst AUSSERHALB von #countdown-widget
   bzw. #trafficlight-widget im DOM). */
#cdw-settings-popup, #tlw-settings-popup, #clw-settings-popup {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 15vw;
  box-sizing: border-box;
  gap: 0.4167vw;
  background-color: #fcfcfc;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 0.5208vw;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  color: #202020;
  z-index: 99999;
}

.cdw-settings-row {
  display: flex;
  align-items: center;
  gap: 0.4167vw;
}

.cdw-settings-label {
  font-size: 0.75vw;
  color: #202020;
  min-width: 3.5vw;
}

#cdw-bgcolor, #tlw-bgcolor, #clw-bgcolor {
  width: 1.875vw;
  height: 1.4583vw;
  padding: 0;
  border: 1px solid #c4ccda;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

#cdw-sound-clear, #tlw-sound-clear {
  font-size: 0.75vw;
  color: #808080;
  cursor: pointer;
}
#cdw-sound-clear:hover, #tlw-sound-clear:hover { color: #303030; }

/* Ankreuzbare Zeilen im Uhr-Einstellungspopup (Analog/Digital/Sekundenzeiger) */
.clw-check-row {
  cursor: pointer;
  font-size: 0.75vw;
  color: #202020;
}
.clw-check-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* ===== Analoge Uhr als eigenstaendiges HTML-Overlay =====
   (ergaenzt die Fabric-Analoguhr, ersetzt sie nicht - gleiche Bauweise wie
   Ampel/Countdown-Widget: draggable + transform:scale()) */
#clock-widget {
  display: none;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 15%;
  left: 62%;
  width: 5.2083vw;
  padding: 0.2604vw 0.2604vw 0.2083vw;
  box-sizing: border-box;
  z-index: 999998;
  background-color: #1f1f1f;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  color: #fff;
  user-select: none;
  transform-origin: top left;
}

/* Verschiebe-Leiste: standardmaessig unsichtbar, erscheint erst beim Klick auf
   die Uhr (showClwBar()). Sitzt absolut DIREKT UEBER dem Gehaeuse, damit ihr
   Ein-/Ausblenden das Layout (und damit die Position der Uhr) nicht verschiebt. */
#clock-widget .draghandle {
  display: none;
  position: absolute;
  left: -0.0521vw;
  right: -0.0521vw;
  bottom: 100%;
  align-items: center;
  justify-content: space-between;
  /* width:auto + margin-bottom:0 heben die generische .draghandle-Regel
     (width:99%, margin-bottom:5px) auf - sonst waere die Leiste zu schmal und
     saesse mit 5px Abstand ueber dem Gehaeuse statt direkt daran. */
  width: auto;
  height: 0.6771vw;
  margin-bottom: 0;
  padding: 0 0.2083vw;
  box-sizing: border-box;
  background-color: #3a3a3a;
  border: 1px solid #000;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
#clock-widget.clw-bar-visible .draghandle { display: flex; }

#clw-close {
  font-size: 0.5729vw;
  line-height: 1;
  color: #fff;
  opacity: 0.6;
  cursor: pointer;
}
#clw-close:hover { opacity: 1; color: #ffe0e0; }

#clw-analog {
  width: 100%;
  line-height: 0;
}
#clw-analog svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Zifferblatt-Optik bewusst identisch zur Fabric-Analoguhr: weisses Blatt mit
   dunklem Rand, schwarze Zeiger, roter Mittelpunkt. */
#clw-face {
  fill: #ffffff;
  stroke: #333333;
  stroke-width: 2;
}
.clw-num {
  fill: #333333;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9583vw;
  text-anchor: middle;
  dominant-baseline: central;
}
#clw-hour {
  stroke: #000000;
  stroke-width: 6.1;
  stroke-linecap: round;
}
#clw-minute {
  stroke: #000000;
  stroke-width: 3.7;
  stroke-linecap: round;
}
#clw-second {
  stroke: #ff0000;
  stroke-width: 1.6;
  stroke-linecap: round;
  display: none;
}
#clock-widget.clw-seconds-on #clw-second { display: inline; }
#clw-center { fill: #ff0000; }

/* Digitalstreifen unter der runden Uhr (ohne Sekunden) */
#clw-digital {
  width: 100%;
  margin-top: 0.1563vw;
  padding-top: 0.1563vw;
  border-top: 1px solid #3a3a3a;
  font-family: 'Courier New', monospace;
  font-size: 0.7813vw;
  font-weight: bold;
  letter-spacing: 0.026vw;
  text-align: center;
  color: #fff;
  opacity: 0.85;
}
/* Nur die Digitaluhr sichtbar: kein Trennstrich/Abstand noetig */
#clock-widget.clw-analog-off #clw-analog { display: none; }
#clock-widget.clw-analog-off #clw-digital {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
#clock-widget.clw-digital-off #clw-digital { display: none; }

#clw-resize-handle {
  position: absolute;
  right: 0.1042vw;
  bottom: 0.1042vw;
  width: 0.4688vw;
  height: 0.4688vw;
  cursor: nwse-resize;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  opacity: 0.7;
  /* Touch-Bedienung: Geste nicht an den Browser abgeben, siehe .draghandle */
  touch-action: none;
}

/* ===== Taschenrechner-Widget ==============================================
   Gleiches Overlay-Muster wie Ampel/Countdown/Uhr (position:absolute,
   transform-origin:top left fuer den Skalier-Griff), aber bewusst helle Optik
   statt des dunklen Gehaeuses der anderen drei - Vorlage ist die vom Nutzer
   gelieferte Rechner-Grafik: hellgraues Gehaeuse, graues Display, blaue
   Zifferntasten, rotes C, dunkelblaues Gleichheitszeichen. */
#calc-widget {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 15%;
  left: 45%;
  /* Alle Innenmasse bewusst in GANZEN PIXELN statt in vw wie bei den anderen
     drei Widgets. Grund: 8.5vw ergibt je nach Fensterbreite krumme Werte, die
     Spaltengrenzen des Tastenrasters landen dann zwischen zwei Pixeln und
     werden beim Zeichnen unterschiedlich gerundet. Das transform:scale() des
     Widgets vergroessert diese Rundungsfehler mit - bei vierfacher Groesse
     wurden aus einem halben Pixel gut zwei, und der mittlere Spalt sah
     sichtbar breiter aus als die aeusseren. Mit ganzen Pixeln geht die
     Rechnung exakt auf: 4 x 36 + 3 x 3 = 153 = Innenbreite.
     Die Startgroesse haengt trotzdem an der Fensterbreite - sie steckt jetzt
     im Anfangswert von calcScale, siehe openCalcWidget() in main.js. */
  width: 169px;
  padding: 0 7px 7px;
  box-sizing: border-box;
  z-index: 999998;
  background-color: #eceff1;
  border: 1px solid #b7bfc4;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  user-select: none;
  transform-origin: top left;
}

/* Helle Variante der generischen Leiste: width/margin heben die globale
   .draghandle-Regel (width:99%, margin-bottom:5px) auf, sonst sitzt sie
   schmaler als das Gehaeuse und mit Abstand darunter. */
#calc-widget .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  height: 12px;
  margin: 0 -7px 5px;
  padding: 0 4px;
  background-color: #dfe4e7;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}

#calcw-close {
  font-size: 11px;
  line-height: 1;
  color: #5a6367;
  cursor: pointer;
}
#calcw-close:hover { color: #c0392b; }

#calcw-display {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3px 5px;
  background-color: #c9ced1;
  border: 1px solid #b0b8bc;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* Beide Zeilen einzeilig und rechtsbuendig. Laeuft die Aufgabe ueber die
   Breite hinaus, schiebt text-align:right den Anfang nach links aus dem
   sichtbaren Bereich - man sieht also immer das zuletzt Getippte. */
#calcw-expr,
#calcw-result {
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
  font-family: 'Courier New', monospace;
}

#calcw-expr {
  font-size: 10px;
  line-height: 13px;
  min-height: 13px;
  color: #5a6367;
}

#calcw-result {
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #1c2528;
}
/* Division durch Null o.ae. - siehe calcEvaluate() in main.js */
#calcw-result.calcw-error {
  color: #c0392b;
  font-size: 13px;
}

/* Feste Spaltenbreiten statt 1fr: nur so sind alle drei Spalten zwischen den
   Tasten garantiert gleich breit (siehe Kommentar bei #calc-widget). 1fr haette
   hier zusaetzlich das Problem, dass es minmax(AUTO, 1fr) bedeutet - die vierte
   Spalte waere durch das breitere Ruecktaste-Zeichen von sich aus groesser
   geworden. 4 x 36 + 3 x 3 = 153px = Innenbreite des Widgets. */
#calcw-keys {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 3px;
}

.calcw-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  /* Touch: verhindert den 300ms-Klickverzug und das Doppeltipp-Zoomen, ohne
     (anders als touch-action:none) das Verschieben des Widgets zu stoeren. */
  touch-action: manipulation;
  transition: filter 0.08s linear, transform 0.08s linear;
}

/* Optische Rueckmeldung beim Druecken. Die Klasse wird per pointerdown/-up
   gesetzt statt nur :active zu benutzen - auf Touch-Geraeten greift :active
   je nach Browser gar nicht oder erst verzoegert (siehe die Pointer-Hinweise
   bei .draghandle). */
.calcw-key.calcw-down {
  transform: translateY(1px);
  filter: brightness(0.86);
  box-shadow: none;
}

.calcw-num { background-color: #4aa3e8; }
.calcw-op { background-color: #2f88d4; }
.calcw-clear { background-color: #e8503a; }
.calcw-eq { background-color: #2c3e50; }

.calcw-key-zero { grid-column: span 2; }
.calcw-key-eq { grid-column: span 4; }

#calcw-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  cursor: nwse-resize;
  border-right: 2px solid #8a9296;
  border-bottom: 2px solid #8a9296;
  opacity: 0.7;
  /* Touch-Bedienung: Geste nicht an den Browser abgeben, siehe .draghandle */
  touch-action: none;
}

/* ===== Einmaleins-Widget =================================================
   Fuenftes Overlay-Widget nach demselben Muster wie Ampel/Countdown/Uhr/
   Rechner (position:absolute, transform-origin:top left fuer den
   Skalier-Griff). Optik und Pixel-Logik sind bewusst vom Rechner
   uebernommen: helles Gehaeuse, blaue Felder - und ALLE Innenmasse in
   ganzen Pixeln, damit die 11 Spalten des Rasters exakt aufgehen und das
   transform:scale() keine Rundungsfehler vergroessert.
   11 x 38 + 10 x 2 = 438 = Innenbreite (= 454 - 2 x 7 Padding - 2 Rahmen).
   Bei Aenderungen an diesen Zahlen muss die Rechnung weiter aufgehen und
   EEW_BASE_WIDTH in main.js mitgezogen werden. */
#einmaleins-widget {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 10%;
  left: 20%;
  width: 454px;
  /* Unten mehr Luft als an den Seiten: dort sitzt der Skalier-Griff, der sonst
     ueber der letzten Feldreihe laege und Klicks auf "10·10" abfinge. */
  padding: 0 7px 13px;
  box-sizing: border-box;
  z-index: 999998;
  background-color: #eceff1;
  border: 1px solid #b7bfc4;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  user-select: none;
  transform-origin: top left;
}

/* Helle Leiste wie beim Rechner; width/margin heben die globale
   .draghandle-Regel (width:99%, margin-bottom:5px) auf. */
#einmaleins-widget .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  height: 12px;
  margin: 0 -7px 5px;
  padding: 0 4px;
  background-color: #dfe4e7;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}

#eew-close {
  font-size: 11px;
  line-height: 1;
  color: #5a6367;
  cursor: pointer;
}
#eew-close:hover { color: #c0392b; }

/* Feste Spaltenbreiten statt 1fr - gleiche Begruendung wie bei #calcw-keys:
   nur so sind alle Spalten garantiert gleich breit, und die 10 ist nicht
   breiter als die 1. */
#eew-grid {
  display: grid;
  grid-template-columns: repeat(11, 38px);
  grid-auto-rows: 28px;
  gap: 2px;
}

/* Kopfzeile, Kopfspalte und Eckfeld */
.eew-head {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  /* Deutlich dunkler als die Aufgabenfelder (#4aa3e8), damit sich der Rand des
     Rasters klar von den aufgedeckten Ergebnissen abhebt. */
  background-color: #1a6199;
  cursor: pointer;
  /* Touch: kein 300ms-Klickverzug, kein Doppeltipp-Zoom - aber (anders als
     touch-action:none) das Verschieben des Widgets bleibt moeglich. */
  touch-action: manipulation;
}
.eew-head.eew-down { filter: brightness(0.86); }

.eew-corner { background-color: #2c3e50; font-size: 18px; }

/* Eine Karte mit zwei Seiten. Die Perspektive sitzt am Feld, gedreht wird
   der innere Behaelter - so bleibt das Raster beim Drehen ruhig. */
.eew-cell {
  perspective: 300px;
  touch-action: manipulation;
  cursor: pointer;
}

.eew-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s;
}
.eew-cell.eew-open .eew-inner { transform: rotateY(180deg); }

.eew-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  /* Ohne das schiene die Rueckseite durch die Vorderseite hindurch. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Abgedeckt: die Aufgabe, in Blau wie die Zifferntasten des Rechners. */
.eew-front {
  background-color: #4aa3e8;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* Aufgedeckt: das Ergebnis auf hellem Grund. */
.eew-back {
  background-color: #ffffff;
  border: 1px solid #b0b8bc;
  box-sizing: border-box;
  color: #1c2528;
  font-size: 15px;
  transform: rotateY(180deg);
}

/* Doppelklick auf eine Kopfzahl (bzw. den Malpunkt fuer die Quadratzahlen)
   hebt die Ergebnisse gelb hervor - bewusst nur die Rueckseite, die
   Aufgabenseite bleibt blau wie alle anderen. */
.eew-cell.eew-mark .eew-back {
  background-color: #ffe680;
  border-color: #d8ae21;
}

#eew-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  cursor: nwse-resize;
  border-right: 2px solid #8a9296;
  border-bottom: 2px solid #8a9296;
  opacity: 0.7;
  /* Touch-Bedienung: Geste nicht an den Browser abgeben, siehe .draghandle */
  touch-action: none;
}

/* ===== "Silbentrennung" - Trennzeichen / Silbenfarben / entfernen ===== */
#syldialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 26%;
  left: 37vw;
  width: 24vw;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#sy_body {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  padding: 1vw 1.2vw 1.1vw;
}

#sy_title {
  font-size: 1.05vw;
  font-weight: bold;
  margin-bottom: 0.2vw;
}

/* Die drei Wahlmoeglichkeiten */
.sy_choice {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.9vw;
  cursor: pointer;
}

.sy_row {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

/* Einstellungen, die zur darueberstehenden Wahl gehoeren */
.sy_sub {
  margin-left: 1.5vw;
  margin-bottom: 0.35vw;
}

.sy_label {
  flex: 0 0 6vw;
  font-size: 0.85vw;
}

#sy_char {
  width: 2.6vw;
  text-align: center;
  font-size: 0.9vw;
  padding: 0.2vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
}

#sy_char:focus { border-color: #3051a1; outline: none; }

#sy_col1,
#sy_col2 {
  width: 2.4vw;
  height: 1.7vw;
  padding: 0;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

/* Wird ausgegraut, solange es nichts zurueckzunehmen gibt. */
#sy_row_off input:disabled { cursor: default; }

.sy_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6vw;
  margin-top: 0.4vw;
}

.sy_buttons button {
  font-size: 0.9vw;
  padding: 0.35vw 1vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  cursor: pointer;
}

#sy_apply { background: #3051a1; color: #fff; border-color: #3051a1; }
#sy_apply:hover { background: #26407f; }
#sy_cancel { background: #f2f5fb; }
#sy_cancel:hover { background: #e6ebf5; }

#strokechanger {
  display: none;
  position: absolute;
  left: 63%;
  top: 79%;
  width: 15%;
  height: 8%;
  border-radius: 8px;
  background-color: var(--almost-white);
  z-index: 9999;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

#strokeslider {
  position: absolute;
  left: 5%;
  top: 60%;
  width: 50%;
}

#stroke_text {
  position: absolute;
  left: 17%;
  top: 20%;
  width: 20%;
  height: 25%;
  text-align: center;
}

#circlewrap {
  display: flex;
  position: absolute;
  left: 62%;
  top: 1%;
  width: 36%;
  height: 98%;
  justify-content: center;
  align-items: center;
}

.circle {
  background: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  text-align: center;
}

#stroke_preview {
  width: 0.0521vw;
  height: 0.0521vw;
}

#saveimage {
  display: none;
  position: absolute;
  left: 5%;
  top: 6.5%;
  width: 25%;
  height: 50%;
  background-color: #fcfcfc;
  padding-bottom: 3%;
  z-index: 99999;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* #saveimage nutzt (anders als #removecolor/#roughdialog) fuer seinen Inhalt
   durchgehend position:absolute mit Prozent-Koordinaten statt Flex-Fluss -
   die .draghandle bleibt deshalb bewusst ein normaler (nicht absolut
   positionierter) erster Kindknoten, der oben Platz beansprucht; alle
   anderen Elemente sind unten entsprechend nach unten versetzt. */
#saveimage .draghandle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8vw;
  font-weight: bold;
  user-select: none;
}

#img_bg {
  display: block;
  position: absolute;
  left: 5%;
  top: 7%;
  width: 90%;
  height: 53%;
  background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
}

#preview_img {
  display: block;
  position: absolute;
  left: 5%;
  top: 7%;
  width: 90%;
  height: 53%;
  object-fit: contain;
  z-index: 999999;
}

#img_filesize {
  position: absolute;
  top: 61%;
  left: 5%;
  color: #303030;
  font-size: 0.7vw;
}

#img_format_label,
#img_quality_label {
  position: absolute;
  left: 5%;
  color: #303030;
  font-size: 0.8vw;
  font-weight: bold;
}
#img_format_label { top: 66%; }
#img_quality_label { top: 84%; }

#img_type {
  position: absolute;
  left: 5%;
  top: 72%;
  width: 23%;
  font-size: 0.75vw;
}

#widthpx {
  position: absolute;
  box-sizing: border-box;
  left: 29%;
  top: 72%;
  width: 14%;
  font-size: 0.8vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  padding: 0.1563vw 0.2604vw;
}

#heightpx {
  position: absolute;
  box-sizing: border-box;
  left: 45%;
  top: 72%;
  width: 14%;
  font-size: 0.8vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  padding: 0.1563vw 0.2604vw;
}

#widthpx:hover,
#heightpx:hover,
#img_quality_val:hover { border-color: #3051a1; }
#widthpx:focus,
#heightpx:focus,
#img_quality_val:focus {
  outline: none;
  border-color: #3051a1;
  box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15);
}

#vtrenner {
  position: absolute;
  left: 64%;
  top: 66%;
  width: 0.0521vw;
  height: 28%;
  background-color: #ddd;
}

#img_clipboard_btn {
  position: absolute;
  box-sizing: border-box;
  left: 68%;
  top: 66%;
  width: 27%;
  padding: 1.2% 1%;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  background: #f2f5fb;
  color: #202020;
  font-size: 0.85vw;
  cursor: pointer;
}
#img_clipboard_btn:hover { background: #e6ebf5; border-color: #3051a1; }

#img_save_btn {
  position: absolute;
  box-sizing: border-box;
  left: 68%;
  top: 80%;
  width: 27%;
  padding: 1.2% 1%;
  border: 1px solid #3051a1;
  border-radius: 4px;
  background: #3051a1;
  color: #fff;
  font-size: 0.85vw;
  cursor: pointer;
}
#img_save_btn:hover { background: #26407f; }

#img_quality {
  position: absolute;
  left: 5%;
  top: 90%;
  width: 30%;
}

#img_quality_val {
  position: absolute;
  box-sizing: border-box;
  left: 37%;
  top: 90%;
  width: 13%;
  font-size: 0.8vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  padding: 0.1042vw 0.2604vw;
  text-align: center;
}

#img_name {
  position: absolute;
  top: 85%;
  left: 55%;
  width: 39%;
}

#img_cloud_save_btn {
  position: absolute;
  top: 92%;
  left: 55%;
  width: 39%;
}

/* ===== "Objekt in meiner Sammlung speichern" - vom Export getrennter
   Mini-Dialog (#saveobjectdialog), gleiche Optik wie #removecolor/#roughdialog ===== */
#saveobjectdialog {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 35%;
  left: 37%;
  width: 24%;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  user-select: none;
  overflow: hidden;
}

#sod_body {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  padding: 1.2vw 1.3vw 1.3vw;
}

#sod_title {
  font-size: 1.05vw;
  font-weight: bold;
}

.sod_row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4vw;
}

.sod_label {
  flex: 0 0 auto;
  font-size: 0.9vw;
  white-space: nowrap;
  text-align: left;
}

#objekt_name {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35vw 0.6vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  font-size: 0.9vw;
}
#objekt_name:hover { border-color: #3051a1; }
#objekt_name:focus {
  outline: none;
  border-color: #3051a1;
  box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15);
}

#objekt_description {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35vw 0.6vw;
  border: 1px solid #9aa3b2;
  border-radius: 4px;
  font-size: 0.9vw;
  font-family: inherit;
  resize: vertical;
}
#objekt_description:hover { border-color: #3051a1; }
#objekt_description:focus {
  outline: none;
  border-color: #3051a1;
  box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15);
}

.sod_buttons {
  display: flex;
  justify-content: center;
  margin-top: 0.2vw;
}

#save_object_btn {
  font-size: 0.9vw;
  padding: 0.45vw 1.4vw;
  border: 1px solid #3051a1;
  border-radius: 4px;
  cursor: pointer;
  background: #3051a1;
  color: #fff;
  font-weight: bold;
  user-select: none;
}
#save_object_btn:hover { background: #26407f; }

/* Uhrzeit/Stundenplan-Anzeige - bewusst zurueckhaltend: sie soll ablesbar
   sein, aber nicht mit den Bedienelementen daneben konkurrieren.
   (opacity: 0.5 war frueher der Weg dorthin, blasste aber den Text selbst
   aus - die Zurueckhaltung steckt jetzt in Schriftgrad, -staerke und Farbe.) */
#uhrzeit {
  display: block;
  position: absolute;
  left: 57%;
  top: 94.8%;
  color: #7b8698;
  background-color: rgba(255, 255, 255, 0.72);
  font-size: 1.15vw;
  font-weight: 500;
  letter-spacing: 0.02em;
  user-select: none;
  z-index: 9999;
  border-radius: 12px;
  padding: 0.5% 1%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}

/* main.js setzt den Inhalt als "<b>12:34 (1. Stunde)</b>" - ohne dies kaeme
   die Fettschrift doppelt (einmal aus <b>, einmal aus font-weight oben). */
#uhrzeit b {
  font-weight: inherit;
}

.grau {
  color: white;
  font-size: 1.4vw;
}

#teilen {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 30.47%;
  left: 20.32%;
  width: 12%;
  height: 7%;
  z-index: 99999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: var(--menu-bg);
  border: solid rgb(0, 0, 0) 1px;
  border-radius: 7px;

  font-size: 2.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#teilen_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 63.51%;
  left: 33.33%;
  width: 37.71%;
  height: 24%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: var(--almost-white);
  border: solid rgb(0, 0, 0) 1px;
  border-radius: 4px;

  font-size: 0.9vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#divide_anz {
  display: block;
  position: absolute;
  top: 20.81%;
  left: 39.39%;
  width: 23.71%;
  height: 25.17%;
  text-align: center;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: solid rgb(0, 0, 0) 0.888889px;

  font-size: 1vw;
  padding: 0.5%;
  padding-left: 1%;
  margin: 0px;
}

/* #puzzlecut/#puzzle_btn/#puzzle_grid_label: siehe die neuen, modernen Regeln
   im <style>-Block in index.php (gleiches Kartendesign wie #bl_settings_dialog),
   die alten vw/%-basierten Regeln hier sind damit ueberholt. */

/* Aktions-Dropdown: passt zu den uebrigen Feldern (dezenter Rahmen, eigener
   Chevron im Akzentblau). Der Radio-Button davor entfaellt. */
#actionsel {
  box-sizing: border-box;
  max-width: 76%;
  font-size: 0.72vw;
  font-family: inherit;
  color: #303030;
  background-color: #fff;
  border: 1px solid #c4ccda;
  border-radius: 5px;
  padding: 0.1563vw 1.25vw 0.1563vw 0.4167vw;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%233051a1' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4688vw center;
}
#actionsel:hover { border-color: #3051a1; }
#actionsel:focus { outline: none; border-color: #3051a1; box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15); }

/* Zahnrad zum Oeffnen der Action-Properties - als kleiner klickbarer Button. */
#action_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 0.3125vw;
  line-height: 1;
  cursor: pointer;
  border: 1px solid #c4ccda;
  border-radius: 5px;
  padding: 0.1042vw 0.3125vw;
  background-color: #fff;
}
#action_btn img { width: 0.9vw; height: 0.9vw; display: block; }
#action_btn:hover { border-color: #3051a1; background-color: #f6f8fc; }

#svgset {
  background-color: #fcfcfc;
  color: #303030;
  font-size: 0.8vw;
  z-index: 9999;
}

#extenders {
  display: none;
  position: absolute;
  background-color: #ffffff;
  left: 90%;
  top: 64%;
  width: 3.6%;
  /* 6 Icons (Auto-Form + Seiteneinstellungen + 4x Erweitern) je 5% - unteres
     Ende bleibt bei 94%. */
  height: 30%;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
  z-index: 9999;
}

#filelist {
  position: absolute;
  display: block;
  background-color: #ffffff;
  color: #303030;
  left: 46%;
  top: 8%;
  width: 52%;
  height: 94%;
  z-index: 99999;
  overflow-x: hidden;
  border: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
#filearea {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
}

#showfox-logo {
  position: absolute;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  user-select: none;
}

#home_logo_box {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 8%;
  left: 3%;
  width: 35%;
  padding-right: 3%;
  padding-left: 2%;
  height: 23%;
  border: none;
  border-radius: 10px;
  background-color: #fcfcfc;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#close-home {
  display: none;
  position: absolute;
  left: 95%;
  top: 10%;
  width: 3%;
  z-index: 9;
}

#backtoproject {
  display: none;
  position: absolute;
  right: 5%;
  top: 22%;
  z-index: 9;
  font-size: 1vw;
}

#endwithf11 {
  display: none;
  position: absolute;
  left: 35%;
  top: 30%;
  z-index: 9;
  font-size: 1vw;
  border: 1px solid #303030;
  padding-left: 0.5%;
  padding-right: 0.5%;
  border-radius: 10px;
}

#mobile-warning {
  display: none;
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: #ffd600;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  padding: 6%;
  z-index: 2147483647;
}

#mobile-warning-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5625vw;
  text-align: center;
}

#mobile-warning-box p {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2b2200;
  line-height: 1.5;
}

#mobile-warning-ok {
  background-color: #2b2200;
  color: #ffd600;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.7292vw 2.6042vw;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}

#mobile-warning-ok:hover {
  opacity: 0.85;
}

/* Gemeinsamer Stil fuer kurzlebige Bedienhinweis-Schilder ueber der Leinwand
   (Zuschneiden, Freie-Form-Zeichnen usw.) - dunkles Schild, weisser Text,
   folgt per JS einem Canvas-Objekt/Punkt in Bildschirm-Pixeln. */
.tool-hint {
  display: none;
  position: fixed;
  transform: translate(-50%, -100%);
  margin-top: -0.5208vw;
  background-color: #2b2200;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4167vw 0.8333vw;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  z-index: 999999;
  pointer-events: none;
  user-select: none;
}

/* Feedback-Schild "Seite erweitert" - wird von showExtendFlash() mittig auf
   einen Punkt nahe dem jeweiligen Bildschirmrand der sichtbaren Leinwand
   positioniert (siehe main.js), deshalb hier auf den Punkt zentrieren statt
   der .tool-hint-Grundausrichtung (die per se UEBER dem Zielpunkt sitzt). */
.extend-hint {
  transform: translate(-50%, -50%);
  margin-top: 0;
}

.extend-hint-arrow {
  display: inline-block;
  margin-right: 0.2083vw;
  font-weight: 700;
}

#person-info {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: left;
  left: 0.4%;
  top: 10%;
  width: 20%;
  height: 80%;

  z-index: 9;
  user-select: none;
}

#person-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 5%;
  padding-top: 3%;
  user-select: none;
  height: 50%;
}

#person-name {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1vw;
  color: #303030;
  user-select: none;
  margin: 0;
  height: 100%;
  padding-top: 1%;
}

#person-badge {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 0.4vw;
  margin-left: 0.5vw;
  padding: 0.15vw 0.6vw;
  border-radius: 999px;
  font-size: 0.75vw;
  font-weight: bold;
  color: #ffffff;
  user-select: none;
  white-space: nowrap;
}

#person-badge.badge-pro {
  background-color: #2e9e4f;
}

#person-badge.badge-vip {
  background-color: #e0821a;
}

#person-badge.badge-admin {
  background-color: #2f6fd1;
}

#person-badge.badge-demo {
  background-color: #8a8a8a;
}

/* Schuelermodus (Konto-Status 's'): Auf dem Konto arbeitet eine ganze Klasse.
   Das Badge sagt, in welcher Rolle man gerade unterwegs ist - "Klasse" solange
   nur ein Projektcode gilt, "Lehrkraft" nach Eingabe der Lehrer-PIN. Die
   Lehrer-Farbe ist absichtlich kraeftig: sie soll auffallen, damit niemand
   versehentlich mit freigeschaltetem Verwalten weiterarbeitet. */
#person-badge.badge-student {
  background-color: #6b4fbb;
}

#person-badge.badge-teacher {
  background-color: #c0392b;
  /* Anders als die anderen Badges klickbar: fuehrt sofort zurueck ins eigene
     Lehrer-Konto (switchBackToTeacher() in main.js) - der schnellste Weg
     zurueck, ohne erst "Mein Profil" oeffnen zu muessen. */
  cursor: pointer;
}

#person_menu {
  display: none;
  position: absolute;
  flex-direction: column;
  box-sizing: border-box;
  left: 0.4%;
  top: 6%;
  background-color: #fcfcfc;
  z-index: 9;
  user-select: none;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#profil_menu_item,
#usermgmt_menu_item,
#abmelden {
  display: block;
  padding: 0.4167vw 0.7813vw;
  color: #303030;
  font-size: 1vw;
  white-space: nowrap;
  cursor: pointer;
}

#profil_menu_item:hover,
#usermgmt_menu_item:hover,
#abmelden:hover {
  background-color: #ededed;
}

/* Nur fuer Administratoren - Standardzustand ist ausgeblendet, bis
   syncAdminOnlyUi() (js/main.js) anhand der admin-Variable entscheidet. */
#usermgmt_menu_item {
  display: none;
}

#profile-box {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 15%;
  left: 3%;
  width: 35%;
  z-index: 99999;
  background-color: #fcfcfc;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
  color: #202020;
  padding: 2vw;
}

#profile-box h2 {
  margin: 0 0 1vw 0;
  font-size: 1.4vw;
}

#profile-close {
  position: absolute;
  top: 1vw;
  right: 1vw;
  width: 2.6vw;
  cursor: pointer;
  user-select: none;
}

.profile-row {
  font-size: 1vw;
  margin-bottom: 0.6vw;
}

.profile-label {
  font-weight: bold;
  margin-right: 0.3vw;
}

#profile-renewal-row,
#profile-price-row {
  display: none;
}

#profile-cancel-link {
  display: none;
  margin-top: 1.2vw;
  font-size: 0.9vw;
  color: #7a1f1f;
  text-decoration: underline;
  cursor: pointer;
  user-select: none;
}

#profile-upgrade-btn {
  display: none;
  margin: 2.2vw 0;
  padding: 0.5vw 1.1vw;
  background-color: #ffcc00;
  color: #202020;
  font-weight: bold;
  font-size: 0.85vw;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

#profile-upgrade-btn:hover {
  background-color: #e6b800;
}

/* Schueler-Konto-Selbstbedienung in den Kontoeinstellungen, siehe
   renderStudentAccountSection() in main.js und [[student-account-mode]]. */
#profile-student-section {
  margin-top: 1.4vw;
  padding-top: 1.2vw;
  border-top: 1px solid #e0e0e0;
}
#profile-student-section h3 {
  margin: 0 0 0.6vw 0;
  font-size: 1.05vw;
  color: #202020;
}
#profile-student-section p {
  margin: 0 0 0.8vw 0;
  font-size: 0.85vw;
  color: #555;
}
#profile-student-section input[type="text"],
#profile-student-section input[type="password"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.6vw;
  padding: 0.4vw 0.6vw;
  font-size: 0.9vw;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#profile-student-section .ps-btn {
  padding: 0.5vw 1.1vw;
  margin-right: 0.6vw;
  font-weight: bold;
  font-size: 0.85vw;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background-color: #4a90d9;
}
#profile-student-section .ps-btn:hover {
  background-color: #357abd;
}
#profile-student-section .ps-btn-danger {
  background-color: #c0392b;
}
#profile-student-section .ps-btn-danger:hover {
  background-color: #962d21;
}
#profile-student-section .ps-msg {
  display: block;
  margin-top: 0.6vw;
  font-size: 0.85vw;
}
#profile-student-section .ps-msg.err { color: #c0392b; }
#profile-student-section .ps-msg.ok { color: #2a8f3f; }

#setlist {
  position: absolute;
  left: 3%;
  top: 15%;
  width: 93%;
  height: 73%;
  background-color: transparent;
  font-size: 1em;
  overflow-y: auto;
  /* Der Schieber war heller als seine Bahn (fast weiss auf grau) und damit
     kaum zu sehen - jetzt umgekehrt: dezenter Schieber, unsichtbare Bahn. */
  scrollbar-color: #c2ccdb transparent;
  scrollbar-width: thin;
  overflow-x: none;
  /* Damit der Aufklapp-Schatten der Karten am Rand nicht abgeschnitten wirkt. */
  padding: 0.2083vw;
  box-sizing: border-box;
}

/* Lade-/Fehlerhinweis, der #setlist voruebergehend ersetzt, waehrend
   load_filtered_projects() auf die Serverantwort wartet (siehe main.js) -
   dieselbe id/Position, damit beim Einsetzen der echten Liste nichts springt. */
#setlist.filetable_status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4167vw;
  color: #888;
  font-size: 0.9em;
}
/* img/loading.gif ist als Datei 630x637px gross - ohne explizite Groesse
   wirkte der Ladehinweis riesig statt wie ein kleiner Spinner. */
#setlist.filetable_status img {
  width: 1.7708vw;
  height: 1.7708vw;
}
#setlist.filetable_status a {
  color: #4a90d9;
}

#collection_box {
  display: none;
  position: absolute;
  left: 50%;
  top: 24%;

  width: max-content; 
  
  max-width: 43%;
  max-height: 70%;

  padding: 1.0417vw;
  box-sizing: border-box;
  background-color: #4586d0;

  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;

  gap: 0.5208vw;

  /* Verhindert horizontales Scrollen, falls es eng wird */
  overflow-x: hidden; 
  overflow-y: auto;
  border-radius: 12px;
  z-index: 9999999;
}

.coll_dokbox {
  /* ÄNDERUNG: Flexbox übernimmt das Layout, float/inline-block entfernen */
  display: block; 
  
  position: relative;
  padding: 0.5208vw;

  background-color: #ffffff;
  color: #000000;
  border-radius: 5px;
  font-size: 0.65vw;
  text-align: center;
  
  /* ÄNDERUNG: Margin entfernen, da wir im Container 'gap' nutzen */
  margin: 0; 
  
  border: 2px solid #303030;
  box-sizing: border-box; /* Wichtig, damit Padding die 100px nicht vergrößert */
}


#filter_frame {
  position: absolute;
  left: 3.6%;
  top: 6%;
  width: 80%;
  height: 7.5%;
  background-color: #ffffff;
  color: #222;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
}

#manage_frame {
  display: none;
  position: absolute;
  left: 86%;
  top: 1%;
  width: 6%;
  height: 12.5%;
  background-color: #ffffff;
  color: #303030;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
}

#mass_delete {
  cursor: pointer;
  position: absolute;
  left: 26%;
  top: 5%;
  height: 20%;
}

#mass_download {
  cursor: pointer;
  position: absolute;
  left: 22%;
  top: 38%;

  height: 20%;
}

#mass_archive {
  cursor: pointer;
  position: absolute;
  left: 26%;
  top: 69%;

  height: 20%;
}

.archiviert {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 14%;
  opacity: 0.55;
  z-index: 99999999;
}

#pagelist {
  position: absolute;
  left: 5%;
  top: 10%;
  width: 90%;
  height: 87%;
  background-color: var(--menu-bg);
  font-size: 1em;

  overflow-y: auto;
  overflow-x: none;
  scrollbar-color: rgb(185, 185, 185) #b5b5b5;
}

#pagebox {
  display: none;
  position: absolute;
  left: 5%;
  top: 7%;
  width: 40%;
  height: 80%;
  background-color: var(--menu-bg);
  font-size: 1em;

  overflow-y: auto;
  overflow-x: none;
  border: 1px solid #303030;
  border-radius: 6px;
  z-index: 99999;
  user-select: none;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

#obj_edit_btn {
  position: absolute;
  right: 5%;
  width: 5%;
  top: 2%;
  padding: 0.2604vw;
  background-color: transparent;
  color: white;
  border-radius: 3px;
  font-size: 0.7vw;
  text-align: center;
  user-select: none;
}

#obj_lupe {
  position: absolute;
  left: 59%;
  width: 4%;
  top: 2.6%;

  user-select: none;
}

#obj_suchfeld {
  position: absolute;
  top: 3%;
  left: 65%;
  width: 20%;
  background-color: #fcfcfc;
  color: rgb(0, 0, 0);
  font-size: 0.9vw;
  padding-left: 1%;
  border: 1px solid #303030;
  border-radius: 2px;
}

#page_edit_btn {
  position: absolute;
  right: 8%;
  width: 5%;
  top: 3.7%;
  background-color: transparent;
  user-select: none;
}

#page_lupe {
  position: absolute;
  left: 57%;
  width: 4%;
  top: 4.7%;

  user-select: none;
}

#page_suchfeld {
  position: absolute;
  left: 62%;
  width: 20%;
  top: 5%;
  background-color: white;
  color: rgb(0, 0, 0);
  font-size: 0.9vw;
  padding-left: 1%;
  border: 1px solid #939393;
  border-radius: 4px;
}

#set_edit_btn {
  position: absolute;
  left: 90%;
  height: 60%;
  top: 20%;
  user-select: none;
}

#pftitle {
  position: absolute;
  left: 5%;
  top: 5%;
  color: #303030;
  font-size: 1.1vw;
}

/* ============================================================
   Einheitlicher Dropdown-Look fuer die uebrigen Auswahlfelder
   (Schriftart, Objekt-/Seitenfilter, Export-Format): dezenter Rahmen +
   eigener Chevron im Akzentblau - wie #actionsel und die Felder im
   Aktions-Dialog. Position/Groesse bleiben aus den ID-Regeln erhalten;
   diese Regel steht bewusst danach, damit der Look greift. */
#fontselect,
#svgset,
#pftitle,
#img_type {
  box-sizing: border-box;
  color: #303030;
  background-color: #fff;
  border: 1px solid #c4ccda;
  border-radius: 5px;
  padding: 0.1563vw 1.25vw 0.1563vw 0.4167vw;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%233051a1' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4688vw center;
}
#fontselect:hover,
#svgset:hover,
#pftitle:hover,
#img_type:hover { border-color: #3051a1; }
#fontselect:focus,
#svgset:focus,
#pftitle:focus,
#img_type:focus {
  outline: none;
  border-color: #3051a1;
  box-shadow: 0 0 0 3px rgba(48, 81, 161, 0.15);
}

/* ---------- Schrift-Auswahl mit Favoriten ---------------------------------
   Die nativen <select> #fontselect (Text-Optionen) und #bl_font (Blitzlesen)
   sind versteckt und dienen nur noch als Datenspeicher/Namensquelle. Bedient
   wird ueber einen Ausloese-Knopf (.fontpick_trigger) und die gemeinsame
   Liste #fontpick_panel mit Stern-Favoriten. Aufbau: openFontPanel() /
   renderFontPanelList() in js/main.js. */
#fontselect { display: none !important; }
#bl_settings_dialog #bl_font { display: none; }

.fontpick_trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: left;
  color: #303030;
  background-color: #fff;
  border: 1px solid #c4ccda;
  border-radius: 5px;
  padding: 0.1563vw 1.25vw 0.1563vw 0.4167vw;
  cursor: pointer;
  font-family: Arial, sans-serif;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%233051a1' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4688vw center;
}
.fontpick_trigger:hover { border-color: #3051a1; }
.fontpick_trigger .fpk_trigger_label {
  pointer-events: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text-Optionen-Dialog: exakt dieselbe Box wie das frühere #fontselect. */
#fontpick_btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
  font-size: x-small;
}
/* Blitzlesen-Dialog: volle Spaltenbreite wie das dortige <select>. */
#blfont_pick_btn {
  width: 100%;
  margin-top: 0.15vw;
  font-size: 0.9376vw;
}
/* Eigenschaften-Leiste, Zeile "Schrift der Zahlen" (Uhren/Timer): gleiche
   Breite und Schriftgroesse wie das Alarmklang-Feld #countcustomsound eine
   Zeile darunter. Das zugehoerige <select> ist wie #fontselect nur
   Datenspeicher und bleibt unsichtbar. */
#clockfont {
  display: none !important;
}

#clockfont_pick_btn {
  width: 62%;
  font-size: 0.7vw;
}

#fontpick_panel {
  display: none;
  position: fixed;
  /* Muss ueber ALLEN Stellen liegen, von denen aus die Liste geoeffnet wird:
     Text-Optionen-/Blitzlesen-Dialog (99999), die Eigenschaften-Leiste
     #properties (9999999, Zeile "Schrift der Zahlen" bei Uhren/Timer) und die
     Zusatzfenster daneben (#shadow_frame & Co., 99999999). Darum 1e8 - und
     bewusst unter den Vollbild-Overlays bei 999999999. */
  z-index: 100000000;
  width: 22vw;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #c4ccda;
  border-radius: 0.6vw;
  box-shadow: 0 0.4vw 1.6vw rgba(0, 0, 0, 0.28);
  padding: 0.35vw;
  font-family: Arial, sans-serif;
}
.fpk_row {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.4vw 0.5vw;
  border-radius: 0.4vw;
  cursor: pointer;
}
.fpk_row:hover { background: #eef2fb; }
.fpk_row.is-current { background: #3051a1; }
.fpk_row.is-current .fpk_name { color: #fff; }
.fpk_name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.15vw;
  color: #303030;
}
.fpk_star {
  flex: 0 0 auto;
  font-size: 1.2vw;
  line-height: 1;
  color: #cdd3dd;
  padding: 0 0.2vw;
  user-select: none;
}
.fpk_star:hover { color: #f0a500; }
.fpk_star.is-fav { color: #f5b301; }
.fpk_sep {
  padding: 0.4vw 0.5vw 0.25vw;
  font-size: 0.8vw;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a93a3;
  border-top: 1px solid #e6e9f0;
  margin-top: 0.3vw;
}
.fpk_sep:first-child { border-top: none; margin-top: 0; }

/* Projektkarte im Dashboard. Optik nach [[mathe-dialog-design-system]]: weiche
   Schatten statt harter Rahmen. Die Sonderzustaende (haskids/dragover) setzen
   ihre Umrandung bewusst als inset-Schatten bzw. outline und NICHT als border -
   beides beansprucht keinen Platz, die Karten behalten dadurch in jedem Zustand
   exakt dieselbe Groesse und die Zeilenumbrueche des Float-Rasters springen
   nicht. */
.dokbox {
  display: inline-block;
  position: relative;
  width: 15.5%;
  padding: 1%;
  height: 19%;
  background-color: #ffffff;
  color: #222;
  border-radius: 8px;
  font-size: 0.65vw;
  text-align: center;
  float: left;
  margin: 0.7%;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.15s, transform 0.15s;
}

/* Dashboard-Projektkarten (#setlist, siehe projectlist.php): etwas hoeher als
   die uebrigen .dokbox-Listen (Seiten-/Objekt-Sammlung), damit ueber dem
   Thumbnail Platz fuer die neue Kopfzeile mit Seitenzahl (pagenum) links und
   Seitenformat (format) rechts entsteht - beide DB-Felder, siehe
   migrate_pagenum_format.php. Nur hier ueberschrieben, damit die anderen
   .dokbox-Listen (ohne dokinfo-Markup) unveraendert bleiben. Die
   Archiviert-/Geteilt-Badges wandern mit dem Thumbnail nach unten, damit sie
   weiterhin dessen Ecke ueberlagern statt in der neuen Kopfzeile zu schweben. */
#setlist .dokbox {
  height: 22%;
}
#setlist .img-container {
  top: 13%;
  height: 42%;
}
#setlist .archiviert,
#setlist .shared {
  top: 13%;
}

/* Aufgeklappte Mappe (#collection_box, siehe collection_list.php): dieselbe
   dokinfo-Kopfzeile wie im Dashboard, hier aber ohne Hoehenaenderung an
   .coll_dokbox selbst - dessen Groesse wird dynamisch per JS gesetzt
   (load_child_projects() in main.js), also nur die Position innerhalb der
   vorhandenen Hoehe verschoben statt die Box zu vergroessern. */
#collection_box .img-container {
  top: 13%;
  height: 42%;
}
#collection_box .shared {
  top: 13%;
}

.dokinfo {
  position: absolute;
  left: 4%;
  top: 2%;
  width: 92%;
  height: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65vw;
  font-weight: 600;
  color: #6b7688;
  user-select: none;
}

.dokbox:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* Ziel eines laufenden Ziehvorgangs - outline statt border, s.o. */
.dragover {
  background-color: #e8f0fe !important;
  outline: 2px dashed #4a90d9 !important;
  outline-offset: -2px;
}

/* Projekt mit Unterprojekten: dezenter blauer Ring + leicht getoenter Grund
   statt des frueheren kraeftigen Leuchtens. */
.haskids {
  background-color: #eaf1ff;
  box-shadow: 0 2px 10px rgba(74, 144, 217, 0.3), inset 0 0 0 2px #4a90d9;
}

.haskids:hover {
  box-shadow: 0 6px 20px rgba(74, 144, 217, 0.4), inset 0 0 0 2px #4a90d9;
}



/* Die Box selbst muss Events empfangen */
.dokbox {
    pointer-events: auto !important;
    -webkit-user-drag: element; /* Erzwingt Drag-Fähigkeit in Webkit */
}

/* Während die Box gezogen wird, markieren wir sie */
.dokbox.is-dragging * {
    pointer-events: none !important;
}


.pagelabel {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 60%;
  user-select: none;
}

/* Projektname. Die beiden frueheren Trennlinien (border-top/-bottom) sind
   bewusst weg - sie zerschnitten die Karte quer; der Name hebt sich jetzt
   ueber die Schriftstaerke ab.
   Lange Namen werden nach zwei Zeilen mit Auslassungspunkten abgeschnitten,
   statt in die Kategoriezeile darunter zu laufen. Die Begrenzung sitzt
   bewusst direkt hier und nicht an einem inneren Element: saveMeta() ersetzt
   den Inhalt per .html(), und an anderer Stelle wird er per .html() gelesen -
   ein zusaetzlicher <span> wuerde beides brechen. */
.setlabel {
  position: absolute;
  /* Hoehe auf GENAU zwei Zeilen (2 x line-height 1.25) statt auf einen
     Prozentwert der Karte: bei 28% blieb von einer dritten Zeile ein
     angeschnittener Rest stehen, der in die Kategoriezeile lief.
     -webkit-line-clamp (Auslassungspunkte nach Zeile 2) waere schoener,
     funktioniert hier aber nicht: das noetige display:-webkit-box ueberlebt an
     einem absolut positionierten Element nicht (der Browser rechnet es zu
     flow-root um), und die Begrenzung an einem inneren Element scheidet aus,
     weil saveMeta() den Inhalt per .html() ersetzt. */
  box-sizing: border-box;
  width: 90%;
  left: 0;
  padding: 0 5%;
  top: 60%;
  height: 2.5em;
  background-color: transparent;
  user-select: none;
  border: none;
  font-weight: 600;
  color: #222;
  line-height: 1.25;
  overflow: hidden;
}

/* Fach/Klassenstufe - bewusst zurueckhaltender als der Projektname. */
.set_cat {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 89%;
  height: 9%;
  overflow: hidden;
  user-select: none;
  color: #6b7688;
  font-weight: 600; /* war "semibold" - kein gueltiger CSS-Wert, wirkte also gar nicht */
}

.boximg {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  user-select: none;
  border-radius: 4px;
  /* Statt des frueheren harten dunklen Rahmens (#303030) nur eine feine helle
     Kante - das Vorschaubild soll sich abgrenzen, ohne die Karte zu zerteilen. */
  border: 1px solid #e3e7ee;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  -webkit-user-drag: none;
}

.objbox {
  display: inline-block;
  position: relative;
  width: 13%;
  padding: 1%;
  height: 12%;
  background-color: #ffffff;
  color: black;
  font-size: 0.5vw;
  text-align: center;
  user-select: none;
  margin: 0.1042vw;
  float: left;
  border: 1px solid #8f8f8f;
  border-radius: 3px;
}

.img-container {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  left: 3%;
  top: 5%;
  width: 90%;
  height: 50%;
  cursor: pointer;
  background-color: transparent;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.obj-container {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  left: 3%;
  top: 5%;
  width: 90%;
  height: 50%;
  cursor: pointer;
  background-color: #ffffff;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.objimg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.objlabel {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 70%;
  user-select: none;
}

.delobj {
  display: none;
  position: absolute;
  top: 5%;
  left: 60%;
  width: 35%;
  height: auto;
  z-index: 9999999;
}

.delpage {
  display: none;
  position: absolute;
  top: 3%;
  left: 70%;
  width: 25%;
  height: auto;
  z-index: 9999999;
}

.delfile {
  display: none;
  position: absolute;
  top: 3%;
  left: 75%;
  width: 16%;
  height: auto;
  z-index: 99999;
}
/* Freigabe-Symbol - etwas weiter nach innen gerueckt als frueher, sonst ragt
   es ueber die jetzt staerker gerundete Kartenecke hinaus. */
.shared {
  display: block;
  position: absolute;
  top: 5%;
  left: 5%;
  width: 14%;
  height: auto;
  z-index: 99999;
}
/* Schuelermodus: Projekt ist mit einem vierstelligen Code geschuetzt (siehe
   php/projectlist.php). Bewusst unten links statt oben - oben links sitzt schon
   das Freigabe-Symbol (.shared), oben rechts das Archiv-Symbol. */
.projlock {
  display: block;
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 10%;
  height: auto;
  opacity: 0.75;
  z-index: 99999;
}
/* Auswahlhaken der Projektkarte (fuer Sammel-Loeschen/-Herunterladen/
   -Archivieren). Sass frueher auf bottom:-2px, hing also unten aus der Karte
   heraus - jetzt vollstaendig innerhalb, und etwas groesser fuer die
   Touch-Bedienung am Smartboard. */
.round {
  display: block;
  position: absolute;
  bottom: 0.2604vw;
  left: 4%;
  width: 16%;
  height: auto;
  z-index: 99999;
}
.round label {
  background-color: #fff;
  border: 1px solid #bcbcbc;
  border-radius: 50%;
  cursor: pointer;
  height: 0.6771vw;
  left: 0;
  position: absolute;
  top: 0;
  width: 0.6771vw;
  transition: background-color 0.15s, border-color 0.15s;
}

.round label:hover {
  border-color: #4a90d9;
}

.round label:after {
  border: 1.5px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 0.1563vw;
  left: 0.2083vw;
  opacity: 0;
  position: absolute;
  top: 0.2083vw;
  transform: rotate(-45deg);
  width: 0.2604vw;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
  background-color: #4a90d9;
  border-color: #4a90d9;
}

.round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.edit_file {
  display: none;
  position: absolute;
  top: 30%;
  left: 75%;
  width: 16%;
  height: auto;
  z-index: 99999;
}

.np_format {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: none;

  font-size: 1.5vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

.np_framed {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 17%;
  height: 21.85%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);

  font-size: 2.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
  border-radius: 5px;
  border: solid rgb(234, 234, 234) 1.5px;
}

.np_select {
  border: solid #f79b00 3px !important;
}

#new_project {
  display: block;
  position: absolute;
  top: 87%;
  left: 3%;
  width: 40%;
  height: 10%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: transparent;
  border: solid #d6d6d6 1px;
  border-radius: 10px;

  font-size: 1.56vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#np_start_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 93%;
  left: 3%;
  width: 40%;
  height: 5%;
  z-index: 9;
  color: #fff;
  background-color: #4a90d9;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;

  font-size: 1.3vw;
  font-weight: 600;
  padding: 0px;
  margin: 0px;
  user-select: none;
}
#np_start_btn:hover {
  background-color: #357abd;
}

.menuimg {
  display: inline-block;
  padding-right: 0.2604vw;
  width: 11%;
}

.insert_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  left: 17.12%;
  width: 67.23%;
  height: 6.83%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(239, 239, 239);
  border: solid #303030 1px;
  border-radius: 4px;
  font-size: 0.9vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#insert_popup {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 26.08%;
  left: 32.05%;
  width: 15%;
  height: 34%;
  z-index: 999999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid rgb(0, 0, 0) 0px;
  border-radius: 10px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.3);
  font-size: 0.8vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#insert_title {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 5.58%;
  left: 8.22%;
  width: 82.92%;
  height: 9.83%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  font-size: 1.5vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#insert1 {
  top: 57.6%;
}

#insert2 {
  top: 69.09%;
}

#insert3 {
  top: 80.58%;
}

/* Vorschau der einzufuegenden Seite. Frueher stand hier eine feste Breite bei
   height:auto - das passte nur im Querformat. Eine Seite im Hochformat (A4P)
   wuchs dadurch nach unten ueber die drei Knoepfe hinaus und verdeckte sie.
   Jetzt begrenzen max-width UND max-height das Bild, die Seitenverhaeltnisse
   bleiben durch width/height:auto erhalten - es passt sich also in beiden
   Ausrichtungen ein. max-height bezieht sich auf die Hoehe von #insert_popup
   (dort ausdruecklich gesetzt) und deckt das Band zwischen Titel und dem
   ersten Knopf (#insert1, top 57.6%) ab. Zentriert wird per transform, weil
   die Breite jetzt vom Bild abhaengt und kein fester left-Wert mehr passt. */
#insert_img {
  display: block;
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 34%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  border: solid rgb(84, 84, 84) 1px;
  margin: 0px;
}

#save-indicator {
  display: none;
  position: absolute;
  top: 40%;
  left: 40%;
  width: 20%;
  height: 16%;
  color: #303030;
  background-color: #fcfcfc;
  border-radius: 10px;
  border: 1px solid rgb(20, 20, 20);
  box-shadow: 28px 21px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

#savelabel {
  position: absolute;
  left: 0px;
  width: 100%;
  top: 15%;
  text-align: center;
  font-size: 1.4vw;
  color: #303030;
}

#loading {
  position: absolute;
  left: 40%;
  top: 50%;
  width: 20%;
  height: auto;
}



/* Optik uebernommen von #mathe_options_dialog: weisse Karte, dezenter
   Schatten, kompakte Arial-Schrift, zweistufige Buttons (primaer = kraeftiges
   Blau wie #mathe_generate_btn, sekundaer = helles Blau wie
   #mathe_add_canvas_btn). Kein Drag-Handle - anders als der Mathe-Dialog sind
   #custom-confirm/#custom-alert modal (siehe #custom-overlay), nicht ziehbar. */
#custom-confirm,
#custom-alert,
#custom-prompt,
#ytdrop {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 13.5417vw;
  max-width: 18.75vw;
  background: #ffffff;
  color: #222;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.18);
  z-index: 999999999;
  padding: 1.0417vw 1.1458vw 0.8333vw;
  border-radius: 8px;
  text-align: center;
  font-family: Arial, sans-serif;
}
#confirm-message,
#alert-message,
#prompt-message,
#ytdrop-message {
  font-size: 0.7292vw;
  color: #222;
  margin: 0 0 0.8333vw;
  line-height: 1.4;
}
/* Eingabefeld im Umbenennen-Dialog - gleiche helle Optik wie die uebrigen
   Eingabeelemente im Mathe-Dialog-Designsystem (siehe [[mathe-dialog-design-system]]). */
#prompt-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.8333vw;
  padding: 0.3646vw 0.5208vw;
  font-size: 0.7292vw;
  font-family: Arial, sans-serif;
  color: #222;
  background: #f4f7fc;
  border: 1px solid #cdd8e8;
  border-radius: 5px;
}
#prompt-input:focus {
  outline: none;
  border-color: #4a90d9;
}
.confirm-answer,
#alert_btn {
  border: none;
  border-radius: 5px;
  padding: 0.4167vw 1.0417vw;
  font-size: 0.625vw;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0 0.2083vw;
}
#confirm-yes,
#alert_btn,
#prompt-ok,
#ytdrop-video {
  background: #4a90d9;
  color: #fff;
}
#confirm-yes:hover,
#alert_btn:hover,
#prompt-ok:hover,
#ytdrop-video:hover {
  background: #357abd;
}
#confirm-no,
#prompt-cancel,
#ytdrop-image {
  background: #e8f0fe;
  color: #2255aa;
}
#confirm-no:hover,
#prompt-cancel:hover,
#ytdrop-image:hover {
  background: #c5d8f8;
}

/* Aufforderung zum Abo im Hinweisfenster - erscheint NUR bei Meldungen ueber
   eine fehlende Berechtigung (customAlert(msg, true), siehe rightsDeny() in
   main.js), sonst display:none. Gelb wie #profile-upgrade-btn im Profilfenster,
   damit beide Wege zum Abo gleich aussehen. Eigene Zeile unter dem OK-Knopf. */
#alert_upgrade_btn {
  display: none;
  margin: 0.7292vw auto 0;
  padding: 0.4167vw 0.9375vw;
  width: fit-content;
  background-color: #ffcc00;
  color: #202020;
  font-weight: bold;
  font-size: 0.625vw;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
#alert_upgrade_btn:hover {
  background-color: #e6b800;
}

/* Ablauf-Hinweis und "Anmeldung abgelaufen" - gleiche Optik wie #custom-alert
   oben, aber eigene Dialoge: der eine zeigt einen mitlaufenden Countdown, der
   andere einen Link zurueck zur Anmeldung (customAlert() setzt seinen Text per
   .text() und koennte beides nicht). Liegen ueber allem anderen, damit sie auch
   ueber geoeffneten Dialogen sichtbar sind. */
#session_warn,
#session_gone {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 15.625vw;
  max-width: 20.8333vw;
  background: #ffffff;
  color: #222;
  box-shadow: 0 3px 22px rgba(0, 0, 0, 0.25);
  z-index: 1000000001;
  padding: 1.0417vw 1.1458vw 0.8333vw;
  border-radius: 8px;
  text-align: center;
  font-family: Arial, sans-serif;
}
#session_warn_text,
#session_gone_text {
  font-size: 0.7292vw;
  color: #222;
  margin: 0 0 0.5208vw;
  line-height: 1.4;
}
/* Verbleibende Zeit - gross und ruhig, nicht alarmierend rot: der Hinweis
   erscheint waehrend des Unterrichts womoeglich vor der ganzen Klasse. */
#session_warn_count {
  font-size: 1.1458vw;
  font-weight: bold;
  color: #3051a1;
  margin: 0 0 0.8333vw;
}
#session_warn button,
#session_gone button {
  border: none;
  border-radius: 5px;
  padding: 0.4167vw 1.0417vw;
  font-size: 0.625vw;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0 0.2083vw;
}
#session_warn_stay,
#session_gone_login {
  background: #4a90d9;
  color: #fff;
}
#session_warn_stay:hover,
#session_gone_login:hover {
  background: #357abd;
}
#session_warn_logout {
  background: #e8f0fe;
  color: #2255aa;
}
#session_warn_logout:hover {
  background: #c5d8f8;
}

#custom-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999999;
}

/* Hilfeseite als frei schwebendes iFrame-Fenster (siehe #helpbtn-Klick +
   Drag/Resize-Logik in main.js) - ausdruecklich KEIN modaler Dialog: die
   Leinwand dahinter bleibt bedienbar, damit man waehrend einer Anleitung
   parallel in Showfox weiterarbeiten kann. Deshalb pointer-events:none auf
   dem vollflaechigen Wrapper (faengt selbst nichts ab) und wieder auto auf
   der Box - schliessen geht nur ueber #help-modal-close, nicht per Klick
   daneben. display:flex/none wird per JS umgeschaltet, deshalb kein
   "display:none" in derselben Deklaration wie bei den anderen Popups (die per
   .show()/.hide() gesteuert werden). */
#help-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Muss ueber JEDEM anderen normalen Dialog/Popup liegen (#indicator/
     #properties: 9999999, #mediathek: 99999999, hoechster sonstiger Wert im
     Projekt: 100000000) - sonst blieb das Hilfe-Fenster dahinter verdeckt,
     wenn beim Aufruf noch ein Panel offen war. Bleibt aber bewusst UNTER den
     wenigen echten Systemebenen, die immer sichtbar bleiben muessen, auch
     waehrend Hilfe offen ist: #custom-confirm/#custom-alert (999999999),
     #session_warn/#session_gone (1000000001), #mobile-warning-box
     (2147483647, absolutes Maximum). */
  z-index: 900000000;
  pointer-events: none;
}

/* Standardgroesse/-position (bevor main.js beim ersten Oeffnen zentriert) -
   width/height/left/top werden danach als Pixelwerte per JS ueberschrieben
   und bleiben bis zum Neuladen der Seite erhalten (Fenster "merkt" sich
   Groesse/Position ueber mehrere Oeffnungen hinweg). pointer-events:auto holt
   sich die Klickbarkeit zurueck, die #help-modal (s.o.) bewusst abgeschaltet
   hat. */
#help-modal-box {
  pointer-events: auto;
  position: absolute;
  left: 25%;
  top: 15%;
  width: 65%;
  height: 70%;
  /* Mindestens etwas breiter als der Breakpoint in help/styles.css
     (#help-layout klappt das linke Inhaltsverzeichnis dort unter 860px
     Breite hinter einen Hamburger-Button weg) - so bleibt der Index beim
     ersten Oeffnen ueber #helpbtn immer sichtbar, auch auf kleineren
     Bildschirmen/Fenstern. */
  min-width: 46.875vw;
  min-height: 16.6667vw;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#help-modal-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  height: 1.7708vw;
  padding: 0 0.4167vw 0 0.7292vw;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e7ee;
  cursor: move;
  user-select: none;
}

#help-modal-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2b2f36;
}

#help-modal-close {
  font-size: 1.4rem;
  line-height: 1;
  color: #6b7688;
  cursor: pointer;
  padding: 0.1042vw 0.2083vw;
}

#help-modal-close:hover {
  color: #2b2f36;
}

#help-modal-body {
  position: relative;
  flex: 1;
  min-height: 0;
}

#help-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Unsichtbar, faengt waehrend Ziehen/Skalieren die Mausereignisse ab, die
   sonst im iFrame-Dokument verschwinden wuerden (siehe main.js). */
#help-modal-shield {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Deckend (kein transparent) - liegt genau auf der Ecke des iFrames, dessen
   eigene Scrollbar sonst durch die diagonalen Linien hindurch sichtbar waere
   und sich optisch mit dem Marker ueberlagert. */
#help-modal-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.9375vw;
  height: 0.9375vw;
  cursor: nwse-resize;
  background-color: #f7f9fc;
  border-top: 1px solid #e3e7ee;
  border-left: 1px solid #e3e7ee;
  border-bottom-right-radius: 10px;
  background-image:
    linear-gradient(135deg, transparent 0 45%, #9aa5b5 45% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 70%, #9aa5b5 70% 80%, transparent 80% 100%);
}

/* Ehemals das eigenstaendige Popup #img_load_dialog (Titel/Text/Upload) -
   Inhalt lebt jetzt im Reiter "Externe Bilder" von #bildersuche_dialog, siehe
   #bs_panel_extern weiter unten. #img_uploader (das Datei-Feld selbst) bleibt
   per style="display:none" versteckt und wird ueber #bs_extern_upload_btn
   ausgeloest - dieselbe Technik wie bei #audio_uploader. */

#video1 {
  color: white;
  position: absolute;
  top: 44%;
  left: 3%;
  text-decoration: none;
  font-size: 1vw;
}

a {
  text-decoration: none;
  color: white;
  font-size: 1vw;
}

#demo-version {
  position: absolute;
  left: 50%;
  top: 87%;
  transform: translateX(-50%);
  font-size: 1vw;
  color: #303030;
  background: linear-gradient(135deg, #ffffff 0%, #afd5ff 100%);
  user-select: none;
  padding: 1%;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

#codeeingabe {
  position: absolute;
  right: 4%;
  top: 87%;
  font-size: 1vw;
  color: #303030;
  background-color: #5b7dc2;

  user-select: none;
  padding: 0.5%;
  border: 1px solid #303030;
  border-radius: 5px;
  text-align: center;
}

#codeinput {
  display: inline-block;
  width: 80%;
  z-index: 99999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: 1px solid #303030;
  font-size: 1vw;
  padding: 2%;
  margin-top: 3%;
  text-align: center;
}

#code_btn {
  margin-top: 4%;

  display: inline-block;

  height: 100%;
  z-index: 99999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: #aad5ff;
  border: solid #303030 1px;
  border-radius: 5px;

  font-size: 1vw;
  padding: 3%;
  text-align: center;
}

#codewindow {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 9%;
  left: 24.54%;
  width: 50.59%;
  height: 85%;
  z-index: 99999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(58, 125, 207);
  border: solid rgb(0, 0, 0) 0px;
  border-radius: 23px;
  box-shadow: 16px 16px 16px rgba(0, 0, 0, 0.3);

  font-size: 2.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#codeimg {
  display: block;
  position: absolute;
  top: 10%;
  left: 19%;
  z-index: 9;
  color: rgb(0, 0, 0);

  margin: 0px;
}

#sharebtn {
  display: block;
  position: absolute;
  bottom: 3%;
  right: 3%;
  width: 6%;
  height: auto;
  z-index: 99999;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#codetext {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 81%;
  left: 18.97%;
  width: 63.61%;
  height: 17.84%;
  z-index: 9;
  color: rgb(255, 255, 255);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0px;
  font-size: 5.5vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#closecode {
  display: block;
  position: absolute;
  top: 3%;
  right: 3%;
  width: 4%;
  height: auto;
  z-index: 99999;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  user-select: none;
  user-drag: none;
}

#publish_dialog {
  display: none;
  position: absolute;
  top: 5%;
  left: 86%;
  width: 14%;
  height: 30%;
  z-index: 99999;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 4px;

  font-size: 2.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#publish_title {
  display: block;
  position: absolute;
  top: 2.6%;
  left: 9.7%;
  width: 80.57%;
  height: 15.15%;
  z-index: 9;
  text-align: center;
  color: #303030;
  overflow: hidden;
  font-size: 1.1vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#publish_btn {
  display: block;
  position: absolute;
  top: 82%;
  left: 10.26%;
  width: 75.43%;
  height: 8%;
  z-index: 9;
  text-align: center;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;
  border-radius: 4px;

  font-size: 1.1vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#publish_type {
  display: block;
  position: absolute;
  top: 35%;
  left: 12%;
  width: 75%;
  height: 8.19%;
  z-index: 9;
  color: rgb(214, 214, 214);
  overflow: hidden;

  font-size: 0.8vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#publish_writing {
  display: block;
  position: absolute;
  top: 46%;
  left: 12%;
  width: 75%;
  height: 8.19%;
  z-index: 9;
  color: rgb(237, 237, 237);
  overflow: hidden;

  font-size: 0.83vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#publish_expiration {
  display: block;
  position: absolute;
  top: 57.82%;
  left: 12.04%;
  width: 75.86%;
  height: 10%;
  z-index: 9;
  color: rgb(219, 219, 219);
  overflow: hidden;
  font-size: 0.8vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}
#expiration {
  font-size: 1vw;
}

#publish_name {
  display: block;
  position: absolute;
  top: 22%;
  left: 12.04%;
  width: 75.86%;
  height: 5%;
  z-index: 9;
  color: rgb(39, 39, 39);
  overflow: hidden;

  font-size: 1vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#tempclips {
  display: none;
  flex-direction: row;
  position: absolute;
  left: 3.6%;
  top: 5.2%;
  height: 8%;
  width: 95.5%;
  background-color: #ededed;
  padding: 0.5%;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 999999;
}

.tempthumbframe {
  width: 5%;
  height: 90%;
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  overflow: hidden;
  background-color: #f0f0f0;
  border: 1px solid #000;
}

.tempthumb {
  max-width: 100%; /* Bild darf nicht breiter als der Container sein */
  max-height: 100%; /* Bild darf nicht höher als der Container sein */
  object-fit: contain;
  cursor: pointer;
}

#bg_image_window {
  display: none;
  position: absolute;
  left: 25%;
  top: 10%;
  width: 42%;
  height: 50%;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 7px;
  z-index: 99999;
  padding: 2%;
}

#bg_image_inner_window {
  display: block;
  position: absolute;
  left: 2%;
  top: 2%;
  width: 95%;
  height: 85%;
  background-color: #e2e2e2;
  overflow-y: scroll;
}

.bg_img_frame {
  display: inline-block;
  width: 17%;
  height: 12%;
  background-color: #000000;
  border: 2px solid #000;
  margin: 0.1563vw;
}

.bg_thumb {
  width: 100%; /* Bild darf nicht breiter als der Container sein */
  height: 100%; /* Bild darf nicht höher als der Container sein */
  object-fit: cover;
  cursor: pointer;
  background-color: white;
}

/* ===== Bildersuche (lokale Bilddatenbank pics/bilder.json) ===== */
#bildersuche_dialog {
  display: none;
  position: fixed;
  /* Sitzt in der Ecke der Edit-Modus-Leisten: direkt rechts neben der
     Werkzeugleiste (#tools, 3.5% breit) und direkt ueber der unteren Leiste
     (#bottomstrip, Oberkante bei 94%). Dadurch bleibt die rechte
     Bildschirmhaelfte frei - genau dorthin fliegt ein angetipptes Bild,
     siehe thumbTapTarget()/thumbFlyInsert() in main.js. */
  top: auto;
  bottom: 6%;
  left: 3.5%;
  width: 46vw;
  height: 68vh;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  box-sizing: border-box;
  padding-bottom: 0.5208vw;
}
#bildersuche_dialog .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* kein Titel mehr - der Schliessen-Knopf bleibt rechts */
  padding: 0 0.5208vw;
  /* Gleiches Blau wie die aktiven Reiter (.bs_tab.active) - .draghandle hat
     einen sehr hellen Hintergrund (#eaf1ff), auf dem Weiss kaum lesbar war. */
  color: #3051a1;
  font-size: 0.95vw;
  font-weight: bold;
  box-sizing: border-box;
}
#bs_close {
  cursor: pointer;
  font-size: 0.9vw;
  padding: 0.1042vw 0.2083vw;
}
/* #bs_body traegt das Flex-Layout (Reiter + aktives Panel fuellt den Rest) -
   bewusst NICHT direkt auf #bildersuche_dialog selbst, das per jQuery
   fadeIn()/hide() ein-/ausgeblendet wird (gleiches Muster wie bei
   #pt_body/#ro_body/#wv_body: der aeussere, getoggelte Container bleibt
   simples display:none/block, sonst muesste sich jQuery beim Wiedereinblenden
   auf "display:flex" statt auf seinen Standard "block" verlassen). */
#bs_body {
  height: calc(100% - 1.3021vw); /* 25px = Hoehe+Abstand der .draghandle-Basisklasse */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Gleicher "Pillen"-Reiter-Stil wie bei der Mediathek (.mediatabs/.mediatab,
   siehe #mediathek_head) - aktiver Reiter "verschmilzt" per margin-bottom:-1px
   mit der Trennlinie und bekommt die Hintergrundfarbe DIESES Dialogs (#fcfcfc,
   nicht var(--menu-bg) wie bei der Mediathek - andere Dialog-Hintergrundfarbe). */
#bs_tabs {
  display: flex;
  gap: 0.2083vw;
  flex-shrink: 0;
  padding: 0.5208vw 0.625vw 0;
  border-bottom: 1px solid #cdd3dd;
}
.bs_tab {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #cdd3dd;
  border-bottom: none;
  background: #e9edf4;
  color: #3a4658;
  font: inherit;
  font-size: 0.85vw;
  padding: 0.3646vw 0.7292vw;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s, color .15s;
}
.bs_tab:hover {
  background: #dde3ee;
}
.bs_tab.active {
  background: #fcfcfc;
  color: #3051a1;
  font-weight: 600;
  margin-bottom: -0.0521vw; /* deckt die Kopf-Trennlinie ab */
  padding-bottom: 0.4167vw;
}
/* Panel-Wechsel setzt display explizit per .css('display', 'flex'/'none') in
   main.js statt .show()/.hide() - aus demselben Grund wie oben bei #bs_body:
   jQuerys automatische Standard-Anzeige waere hier "block", nicht "flex". */
.bs_panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* erst dadurch darf ein Flex-Kind mit overflow:auto ueberhaupt schrumpfen */
  overflow: hidden;
}
#bs_search_row, #bs_fa_search_row {
  padding: 0.2083vw 0.625vw 0.4167vw;
  box-sizing: border-box;
  flex-shrink: 0;
}
#bs_search, #bs_fa_search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3646vw 0.5208vw;
  font-size: 0.7292vw;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
#bs_search:focus, #bs_fa_search:focus {
  border-color: #4a90d9;
}
#bs_status, #bs_pixabay_status, #bs_fa_status {
  padding: 0 0.625vw 0.3125vw;
  font-size: 0.6771vw;
  color: #888;
  flex-shrink: 0;
}
#bs_pixabay_search_row {
  display: flex;
  gap: 0.4167vw;
  padding: 0.4167vw 0.625vw;
  box-sizing: border-box;
  flex-shrink: 0;
}
#bs_pixabay_search {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.3646vw 0.5208vw;
  font-size: 0.7292vw;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
#bs_pixabay_search:focus {
  border-color: #4a90d9;
}
#bs_pixabay_search_btn {
  flex-shrink: 0;
  padding: 0.3646vw 0.8333vw;
  background: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.7292vw;
}
/* Ergebnis-Grid, gemeinsam fuer Showfox- und Pixabay-Reiter. Fest 6 Spalten
   (statt auto-fill mit Mindestbreite) - Wunsch war ausdruecklich "6 Bilder
   pro Reihe", nicht "so viele wie reinpassen". */
.bs_results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.625vw 0.4167vw;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4167vw;
  align-content: start;
}
.bs_empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  font-size: 0.7292vw;
  padding: 1.0417vw 0;
}
.bs_loadmore {
  grid-column: 1 / -1;
  padding: 0.4167vw;
  margin-top: 0.2083vw;
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.6771vw;
}
.bs_thumb {
  cursor: grab;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid transparent;
  height: 5.2083vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  /* Touch: der Griff auf ein Thumbnail startet IMMER unser eigenes Ziehen
     (installThumbDrag() in main.js), nie das Scrollen der Ergebnisliste -
     dafuer muss der Browser die Geste komplett uns ueberlassen. Zwischen den
     Thumbnails (Gap/Rand) bleibt normales Scrollen per Touch weiter moeglich. */
  touch-action: none;
  user-select: none;
}
.bs_thumb:hover {
  border-color: #4a90d9;
}
.bs_thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none; /* eigenes Pointer-Dragging soll nicht am <img> selbst haengen bleiben */
}
.bs_drag_ghost {
  position: fixed;
  width: 3.75vw;
  height: 3.75vw;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.85;
  z-index: 999999;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Textzeilen (Mediathek) haben kein Bild zum Abbilden - stattdessen der
   Dateiname als kleine Karte, gleiche Grundoptik (Position/Transform/Schatten)
   wie .bs_drag_ghost, nur ohne dessen feste Bildmasse. */
.bs_drag_ghost_text {
  width: auto;
  height: auto;
  max-width: 12vw;
  padding: 0.3vw 0.6vw;
  background: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 6px;
  font-size: 0.8vw;
  color: #303030;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flug-Animation beim ANTIPPEN eines Treffers (nicht beim Ziehen - dort hat
   der Nutzer das Bild ja selbst an seinen Platz gebracht): eine Kopie des
   Vorschaubildes fliegt aus dem Dialogfenster an die Stelle auf der Leinwand,
   an der das echte Objekt gleich erscheint (thumbFlyInsert() in main.js).
   Anders als .bs_drag_ghost OHNE feste Groesse und ohne translate(-50%,-50%):
   Start-Rechteck und Ziel-transform setzt main.js in Pixeln. */
.thumb_fly_ghost {
  position: fixed;
  object-fit: contain;
  pointer-events: none;
  z-index: 999999;
  transform-origin: center center;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

/* Reiter "Externe Bilder" - kein Suchformular, nur zentrierter Hinweistext +
   Upload-Knopf (frueher Inhalt von #img_load_dialog, siehe styles.css weiter
   oben). .bs_panel ist bereits display:flex/flex-direction:column, wenn
   aktiv - hier zusaetzlich mittig statt am oberen Rand ausgerichtet. */
#bs_panel_extern {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.0417vw 1.7708vw;
  box-sizing: border-box;
}
#bs_extern_text {
  color: #303030;
  font-size: 0.6771vw;
  line-height: 1.6;
  max-width: 25vw;
  margin-bottom: 0.8333vw;
}
#bs_extern_upload_btn {
  padding: 0.4688vw 1.1458vw;
  background: #3051a1;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.6771vw;
}
#bs_extern_upload_btn:hover {
  background: #26407f;
}

/* ===== Objekt-/Seitensuche (#objektsuche_dialog) =====
   Gleicher Aufbau wie #bildersuche_dialog (Pillen-Reiter, Ergebnis-Grid),
   nur mit einer zusaetzlichen Reiter-Ebene: Haupt-Reiter (Objekt/Seiten) UND
   im Objekt-Reiter darunter Unter-Reiter (Showfox/Meine Objekte), mit EINER
   gemeinsamen Suchzeile fuer beide Unter-Reiter (anders als bei der
   Bildersuche, wo jeder Reiter sein eigenes Suchfeld hat). */
#objektsuche_dialog {
  display: none;
  position: fixed;
  /* Gleiche Ecke wie #bildersuche_dialog (siehe dort) - beide Fenster gehen
     unten links auf, damit rechts daneben Platz fuer das eingefuegte Objekt
     bleibt. */
  top: auto;
  bottom: 6%;
  left: 3.5%;
  width: 46vw;
  height: 68vh;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  box-sizing: border-box;
  padding-bottom: 0.5208vw;
}
#objektsuche_dialog .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* kein Titel mehr - der Schliessen-Knopf bleibt rechts */
  padding: 0 0.5208vw;
  /* Gleiches Blau wie die aktiven Reiter (.os_maintab.active) statt des
     schwer lesbaren Grautons. */
  color: #3051a1;
  font-size: 0.95vw;
  font-weight: bold;
  box-sizing: border-box;
}
#os_close {
  cursor: pointer;
  font-size: 0.9vw;
  padding: 0.1042vw 0.2083vw;
}
#os_body {
  height: calc(100% - 1.3021vw); /* 25px = Hoehe+Abstand der .draghandle-Basisklasse */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#os_maintabs {
  display: flex;
  gap: 0.2083vw;
  flex-shrink: 0;
  padding: 0.5208vw 0.625vw 0;
  border-bottom: 1px solid #cdd3dd;
}
.os_maintab {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #cdd3dd;
  border-bottom: none;
  background: #e9edf4;
  color: #3a4658;
  font: inherit;
  font-size: 0.9vw;
  font-weight: 600;
  padding: 0.4167vw 0.9375vw;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s, color .15s;
}
.os_maintab:hover {
  background: #dde3ee;
}
.os_maintab.active {
  background: #fcfcfc;
  color: #3051a1;
  margin-bottom: -0.0521vw; /* deckt die Kopf-Trennlinie ab */
  padding-bottom: 0.4688vw;
}
/* Panel-Wechsel setzt display explizit per .css() statt .show()/.hide() -
   jQuerys automatische Standard-Anzeige waere hier "flex", nicht "block". */
.os_mainpanel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.os_search_row {
  padding: 0.4167vw 0.625vw 0.2083vw;
  box-sizing: border-box;
  flex-shrink: 0;
}
.os_search_row input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3646vw 0.5208vw;
  font-size: 0.7292vw;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}
.os_search_row input:focus {
  border-color: #4a90d9;
}
/* Zweite, kleinere Reiter-Ebene - schmaler/dezenter als die Haupt-Reiter
   darueber, damit die Hierarchie (Haupt- vs. Unter-Reiter) erkennbar bleibt. */
.os_subtabs {
  display: flex;
  gap: 0.2083vw;
  flex-shrink: 0;
  padding: 0 0.625vw;
  border-bottom: 1px solid #e3e7ee;
}
.os_subtab {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: #6b7688;
  font: inherit;
  font-size: 0.8vw;
  padding: 0.3125vw 0.5208vw;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.os_subtab:hover {
  color: #3a4658;
}
.os_subtab.active {
  color: #3051a1;
  font-weight: 600;
  border-bottom-color: #3051a1;
}
.os_subpanel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.os_status {
  padding: 0.3125vw 0.625vw 0.3125vw;
  font-size: 0.6771vw;
  color: #888;
  flex-shrink: 0;
}
/* Ergebnis-Grid - gleiches "6 pro Reihe"-Raster wie .bs_results. */
.os_results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.625vw 0.4167vw;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4167vw;
  align-content: start;
}
.os_empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  font-size: 0.7292vw;
  padding: 1.0417vw 0;
}
.os_thumb {
  cursor: grab;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid transparent;
  height: 5.2083vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  touch-action: none; /* s. .bs_thumb - eigenes Pointer-Dragging statt Listen-Scroll */
  user-select: none;
}
.os_thumb:hover {
  border-color: #4a90d9;
}
.os_thumb img {
  max-width: 100%;
  max-height: 3.9583vw;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.os_thumb_label {
  width: 100%;
  font-size: 0.625vw;
  color: #666;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.1563vw;
  box-sizing: border-box;
  pointer-events: none;
}

/* "für ID 0 speichern" in den drei Speichern-Dialogen (Projekt/Seite/Objekt).
   Standardmaessig AUSGEBLENDET - syncShowfoxSaveOption() in main.js blendet sie
   nur fuer Admins ein. Bewusst schlicht gehalten: normale Nutzer bekommen sie
   nie zu Gesicht. Die Sperre selbst sitzt im Server (php/showfox_target.php),
   nicht hier. */
.showfox_save_option {
  display: none;
}

/* Seitenformat oben mittig auf der Seitenvorschau (nur im Seiten-Reiter, siehe
   osRenderPageResults()). Schwebt ueber dem Vorschaubild, damit die Kachelhoehe
   gleich bleibt - deshalb position:relative an der Kachel. */
.os_thumb_page {
  position: relative;
}
.os_thumb_format {
  position: absolute;
  top: 0.1042vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5729vw;
  font-weight: 600;
  line-height: 1;
  color: #4a5568;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  padding: 0.0521vw 0.2083vw;
  pointer-events: none;
  white-space: nowrap;
}
/* ===== Seitenauswahl beim SMART-Notebook-Import, beim PDF-Import
   (js/import_pdf.js) UND beim Import eines anderen Showfox-Projekts
   (js/import_project.js) =====================================================
   Uebernimmt bewusst die Klassen des Objektsuche-Dialogs (os_status,
   os_results, os_thumb) - hier stehen nur die Abweichungen. Selektoren fuer
   Aussehen, das die drei Import-Dialoge (nbi-, pdi- und sfi-Praefix) und der
   Projekt-Waehler (sfsel-Praefix) identisch brauchen, sind bewusst KOMBINIERT
   statt dupliziert - gleiches Prinzip wie bei den Widget-Popups (cdw/tlw).

   ACHTUNG: In diesem Kommentar NIE die Zeichenfolge Stern-Schraegstrich
   schreiben (z.B. als Praefix-Abkuerzung "nbi_" mit Stern gefolgt von einem
   Schraegstrich) - sie beendet den Kommentar vorzeitig, der Rest wird als CSS
   gelesen und die Regel darunter faellt komplett aus. Genau das ist hier
   passiert: beide Import-Dialoge blieben unsichtbar, weil sie dadurch ohne
   position/Groesse/Hintergrund dastanden.
   Die vier Dialoge bleiben trotzdem in main.js/import_notebook.js/
   import_pdf.js/import_project.js vollstaendig unabhaengige
   Zustandsverwaltungen. */
#nbimport_dialog, #pdimport_dialog, #ppimport_dialog, #sfsel_dialog, #sfimport_dialog {
  display: none;
  position: fixed;
  top: 10%;
  left: 22%;
  width: 42vw;
  height: 62vh;
  z-index: 99999;
  background-color: #fcfcfc;
  border: 1px solid #303030;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #202020;
  box-sizing: border-box;
  padding-bottom: 0.5208vw;
}
#nbimport_dialog .draghandle, #pdimport_dialog .draghandle, #ppimport_dialog .draghandle, #sfsel_dialog .draghandle, #sfimport_dialog .draghandle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.5208vw;
  color: #3051a1;
  font-size: 0.95vw;
  font-weight: bold;
  box-sizing: border-box;
}
#nbi_close, #pdi_close, #ppi_close, #sfsel_close, #sfi_close {
  cursor: pointer;
  font-size: 0.9vw;
  padding: 0.1042vw 0.2083vw;
}
#nbi_body, #pdi_body, #ppi_body, #sfsel_body, #sfi_body {
  height: calc(100% - 1.3021vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#nbi_title, #pdi_title, #ppi_title, #sfsel_title, #sfi_title {
  flex-shrink: 0;
  padding: 0.3125vw 0.625vw 0;
  font-size: 0.9vw;
  font-weight: 600;
  color: #3a4658;
}
/* Seitenvorschauen sind breiter als Objektbilder - vier statt sechs je Reihe,
   und die Kachel darf hoeher werden. */
#nbi_results, #pdi_results, #ppi_results, #sfsel_results, #sfi_results {
  grid-template-columns: repeat(4, 1fr);
}
/* Feste Kachelhoehe: alle Seiten/Projekte sollen gleich gross erscheinen,
   unabhaengig vom Seitenverhaeltnis der jeweiligen Vorschau (z.B. ein nach
   unten verlaengertes Notebook-Blatt). Das Bild wird darin eingepasst, nicht
   beschnitten. */
#nbi_results .os_thumb, #pdi_results .os_thumb, #ppi_results .os_thumb, #sfsel_results .os_thumb, #sfi_results .os_thumb {
  position: relative;   /* Bezug fuer den Haken .nbi_check/.sfi_check */
  cursor: pointer;
  height: 8.3333vw;
  padding: 0.2083vw;
  background: #eef1f6;
  justify-content: flex-start;
  touch-action: auto;   /* hier wird nicht gezogen, nur ausgewaehlt/angeklickt */
}
#nbi_results .os_thumb img, #pdi_results .os_thumb img, #ppi_results .os_thumb img, #sfsel_results .os_thumb img, #sfi_results .os_thumb img {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  width: auto;
  object-fit: contain;
  border: 1px solid #cdd3dd;
  box-sizing: border-box;
  background: #fff;
}
/* Ausgewaehlte Seite: kraeftiger Rahmen plus Haken - die Farbe allein waere
   auf einem Smartboard aus der Entfernung schwer zu erkennen. #sfsel_results
   nimmt bewusst NICHT teil: dort waehlt ein Klick sofort das Projekt aus
   (kein Mehrfach-Ankreuzen, kein Haken noetig). */
#nbi_results .os_thumb.nbi_selected, #pdi_results .os_thumb.pdi_selected, #ppi_results .os_thumb.ppi_selected, #sfi_results .os_thumb.sfi_selected {
  border-color: #3051a1;
  background: #d8e2f5;
}
#nbi_results .os_thumb .nbi_check, #pdi_results .os_thumb .pdi_check, #ppi_results .os_thumb .ppi_check, #sfi_results .os_thumb .sfi_check {
  position: absolute;
  top: 0.3125vw;
  right: 0.3125vw;
  width: 1.0417vw;
  height: 1.0417vw;
  border-radius: 50%;
  background: #3051a1;
  color: #fff;
  font-size: 0.6771vw;
  line-height: 1.0417vw;
  text-align: center;
  display: none;
  pointer-events: none;
}
#nbi_results .os_thumb.nbi_selected .nbi_check, #pdi_results .os_thumb.pdi_selected .pdi_check, #ppi_results .os_thumb.ppi_selected .ppi_check, #sfi_results .os_thumb.sfi_selected .sfi_check {
  display: block;
}
/* Klapptafel-Herkunft einer Seite im Projekt-Import (js/import_project.js) -
   rein informativ, siehe sfCollectImportableSourcePages(). */
.sfi_klapp_badge {
  position: absolute;
  top: 0.3125vw;
  left: 0.3125vw;
  padding: 0.0521vw 0.3125vw;
  border-radius: 3px;
  background: rgba(48, 81, 161, 0.85);
  color: #fff;
  font-size: 0.5729vw;
  font-weight: 600;
  pointer-events: none;
}

#nbi_footer, #pdi_footer, #ppi_footer, #sfsel_footer, #sfi_footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625vw;
  padding: 0.4167vw 0.625vw 0;
  border-top: 1px solid #cdd3dd;
}
#nbi_all_label, #pdi_all_label, #ppi_all_label, #sfi_all_label, #sfsel_arch_label {
  display: flex;
  align-items: center;
  gap: 0.2083vw;
  font-size: 0.7292vw;
  color: #3a4658;
  cursor: pointer;
  user-select: none;
  margin-right: auto;
}
/* #sfsel_footer hat statt der "Alle auswaehlen"-Checkbox den Haken
   "Archivierte Projekte einbeziehen" (#sfsel_arch_label, links dank
   margin-right:auto oben) - der Datei-Knopf sitzt weiterhin rechtsbuendig wie
   #nbi_ok/#sfi_ok es waeren. Gibt es (noch) keine Cloud-Projekte, bleibt
   #sfsel_results einfach leer - der Hinweis dazu steht nur im Statustext
   (#sfsel_status), kein eigenes .os_empty-Raster noetig wie in
   #objektsuche_dialog. */
#sfsel_footer { justify-content: flex-end; }
/* Archiviertes Projekt in der Quellwahl - gleiche Optik wie das
   Klapptafel-Abzeichen, nur in gedecktem Grau statt Blau: es ist eine
   Herkunftsangabe, keine Auszeichnung. */
.sfsel_arch_badge {
  position: absolute;
  top: 0.3125vw;
  left: 0.3125vw;
  padding: 0.0521vw 0.3125vw;
  border-radius: 3px;
  background: rgba(90, 98, 112, 0.85);
  color: #fff;
  font-size: 0.5729vw;
  font-weight: 600;
  pointer-events: none;
}
.nbi_btn {
  padding: 0.2604vw 0.7292vw;
  border: 1px solid #cdd3dd;
  border-radius: 5px;
  background: #e9edf4;
  color: #3a4658;
  font-size: 0.7813vw;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.nbi_btn:hover { background: #dde3ee; }
.nbi_btn_primary {
  background: #3051a1;
  border-color: #3051a1;
  color: #fff;
}
.nbi_btn_primary:hover { background: #26417f; }
/* Waehrend die Vorschauen noch entstehen, darf noch nicht importiert werden. */
.nbi_btn.nbi_disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Warte-Anzeige des Showfox-Seiten-Imports (js/import_project.js) -------
   Zwischen "Projekt angeklickt" und "Seiten auswaehlbar" liegt das
   Herunterladen, Auspacken und Auswerten der .sfp-Datei. Ohne sichtbaren
   Hinweis schloss sich dabei nur der Quell-Dialog und es passierte scheinbar
   nichts. z-index bewusst zwischen den Import-Dialogen (99999) und
   #custom-overlay (999999): eine Fehlermeldung muss auch darueber lesbar
   bleiben. Kein Zeichen-Abbruch noetig - der Kasten sperrt die Bedienung
   ohnehin nur, solange geladen wird. */
#sfbusy {
  display: none;   /* per JS auf flex */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 999998;
}
#sfbusy_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625vw;
  padding: 1.0417vw 1.5625vw;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
#sfbusy_text {
  font-size: 0.8333vw;
  color: #3a4658;
  text-align: center;
}
.sf_spinner {
  width: 1.8229vw;
  height: 1.8229vw;
  border: 0.2083vw solid #d5dceb;
  border-top-color: #3051a1;
  border-radius: 50%;
  animation: sfSpin 0.9s linear infinite;
}
@keyframes sfSpin {
  to { transform: rotate(360deg); }
}
/* Kleiner mitlaufender Kringel im Statustext des Seiten-Dialogs, waehrend die
   Vorschaubilder eins nach dem anderen entstehen (Klasse wird in
   sfShowPageChooser() gesetzt/entfernt). */
#sfi_status.sfi_busy::before {
  content: '';
  display: inline-block;
  vertical-align: -0.1vw;
  margin-right: 0.3125vw;
  width: 0.6771vw;
  height: 0.6771vw;
  border: 0.1042vw solid #d5dceb;
  border-top-color: #3051a1;
  border-radius: 50%;
  animation: sfSpin 0.9s linear infinite;
}

/* Platzhalter fuer die noch nicht umgesetzten Reiter (Seiten, Meine Objekte). */
.os_placeholder {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 0.6771vw;
  text-align: center;
  padding: 1.0417vw 1.7708vw;
}

#bgopslider {
  display: block;
  position: absolute;
  left: 2%;
  bottom: 2%;
  width: 92%;
  height: 4%;
  background-color: #ededed;
}

#bg_slider_label {
  display: block;
  position: absolute;
  left: 2%;
  bottom: 6%;
  width: 92%;
  height: 4%;
  font-size: 0.8vw;
  color: #303030;
  text-align: center;
}

.pdf_choice {
  display: block;
  position: absolute;
  left: 30.77%;
  width: 61.02%;
  height: 6.24%;
  z-index: 9;
  color: rgb(255, 255, 255);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  border: solid rgb(0, 0, 0) 0px;

  font-size: 0.8vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

.pdf_input {
  display: block;
  position: absolute;
  width: 9%;
  height: 3%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: 1px solid #303030;
  font-size: 0.9vw;
  padding: 0.5%;
  padding-left: 2%;
  margin: 0px;
}

#pdf_box {
  display: none;
  position: absolute;
  top: 7%;
  left: 5%;
  width: 16%;
  height: 35%;
  z-index: 9999;
  color: #303030;
  background-color: #fcfcfc;
  border-radius: 6px;
  border: 1px solid #6a6a6a;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);

  overflow: hidden;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#pdftitle {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 5.31%;
  left: 8.1%;
  width: 85.33%;
  height: 9.59%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  border: solid rgb(0, 0, 0) 0px;

  font-size: 1.1vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#pdf_aktuell_frame {
  top: 30%;
}

#pdf_alle_frame {
  top: 20%;
}

#pdf_vonbis_frame {
  top: 40%;
}

#pdf_erstellen_btn {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 83.21%;
  left: 27.85%;
  width: 50.38%;
  height: 8.24%;
  z-index: 9;
  color: #303030;
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid #303030 1px;

  border-radius: 5px;

  font-size: 1vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#pdf_erstellen_btn:hover {
  background-color: #baceff;
  border-color: #3051a1;
}

#pdf_erstellen_btn:active {
  background-color: #3051a1;
  border-color: #3051a1;
  color: #fff;
}

#pdf_von {
  top: 50%;
  left: 35%;
  padding: 1%;
}

#pdf_bis {
  top: 50%;
  left: 50%;
  padding: 1%;
}

#pdf_name {
  display: block;
  position: absolute;
  top: 70%;
  left: 10%;
  width: 80%;
  padding: 1%;
}

#pdf_name_frame {
  display: block;
  position: absolute;
  top: 64%;
  left: 10%;
  width: 80%;
  border: solid rgb(0, 0, 0) 0px;

  font-size: 0.7vw;
  color: #303030;
  text-align: center;
}

#helper {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3%;
  height: 20%;
  z-index: 99999;
  color: #303030;
  background-color: white;
  border-radius: 10px;
  border: 2px solid rgb(20, 20, 20);
  box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.rb_img {
  display: block;
  position: absolute;
  left: 5.53%;
  width: 88%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  border: solid rgb(0, 0, 0) 0px;
  margin: 0px;
}

#randbreite_box {
  display: none;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 57%;
  left: 65%;
  width: 10%;
  height: 30%;
  z-index: 9999;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: #fcfcfc;
  border: solid rgb(0, 0, 0) 0.740741px;
  border-radius: 6px;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#rb_title {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 2.03%;
  left: 7.12%;
  width: 83.95%;
  height: 9.73%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: solid rgb(0, 0, 0) 0px;
  font-family: var(--formtext);
  font-size: 0.8vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#rb1 {
  top: 13.09%;
}

#rb2 {
  top: 21.8%;
}

#rb3 {
  top: 30.5%;
}

#rb4 {
  top: 39.23%;
}

#rb5 {
  top: 47.93%;
}

#rb6 {
  top: 56.63%;
}

#rb_val {
  display: block;
  position: absolute;
  top: 68%;
  left: 36.16%;
  width: 31.63%;
  height: 4.94%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: solid #303030 1px;
  font-family: var(--formtext);
  font-size: 0.7vw;
  padding: 0.5%;
  margin: 0px;
  text-align: center;
  border-radius: 3px;
  user-select: none;
}

#rb_slider {
  display: block;
  position: absolute;
  top: 76.48%;
  left: 6.56%;
  width: 88.54%;
  height: 4.93%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: solid rgb(0, 0, 0) 0.740741px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.83vw;
  padding: 0.5%;
  padding-left: 1%;
  margin: 0px;
}

#rb_farbe_label {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 83.65%;
  left: 6.93%;
  width: 43.47%;
  height: 9.73%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border: solid rgb(0, 0, 0) 0px;
  font-family: var(--formtext);
  font-size: 0.7vw;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#rb_farbe {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 85.39%;
  left: 54.39%;
  width: 32.63%;
  height: 5.46%;
  z-index: 9;
  color: rgb(0, 0, 0);
  overflow: hidden;
  background-color: rgb(140, 140, 140);
  border: solid rgb(0, 0, 0) 1px;
  border-radius: 3px;
  padding: 0px;
  margin: 0px;
  user-select: none;
}

#addpage_menu {
  display: none;
  position: absolute;
  bottom: 6%;
  left: 4%;
  width: 11%;
  height: auto;
  padding: 0.6%;
  z-index: 99999;
  font-size: 0.7em;
  color: #222;
  overflow: hidden;
  background-color: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
}

/* Rechtsklick-/Langdruck-Menue auf #bottomstrip - gleiche minimale Optik wie
   #os_thumb_context (einzelner Eintrag, per main.js an die Klick-/Druckstelle
   positioniert). */
#bottomstrip_context {
  display: none;
  position: fixed;
  min-width: 10.4167vw;
  font-weight: normal;
  font-size: 0.6771vw;
  background-color: #fcfcfc;
  color: #292929;
  padding: 0.2083vw;
  user-select: none;
  z-index: 99999;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

#schedule-container {
  display: none;
  position: absolute;
  top: 5%;
  right: 1%;
  height: 88%;
  overflow-y: auto;
  font-family: var(--formtext) ;
  width: 30%;
  max-width: 100%;
  background: #f4f4f9;
  padding: 2%;
  border-radius: 0.8%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 9999;
  box-sizing: border-box;
}

#schedule-table {
    width: 95%;
    border-collapse: collapse;
    padding: 5%;
    background: white;
}

#schedule-table th, 
#schedule-table td {
    padding: 2%;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 1vw;
}

#schedule-table th {
    background-color: #eaeaea;
}



/* Eingabefelder nahtlos integrieren */
.time-input, 
.label-input {
    padding: 1.5%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius:5px;
    font-size: 0.8vw;
}

.delete-btn {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 1.5% 2%;
    border-radius: 0.2em;
    padding: 0.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.7vw;
}

.delete-btn:hover {
    background-color: #cc0000;
}

.sch_btn {
    margin-top: 5%;
    padding: 1.5% 2%;
    border: none;
    border-radius: 0.4em;
    cursor: pointer;
    color: white;
    font-size: 0.8vw;
}
.controls button {
    padding: 1.5% 2%;
    margin-right: 1.5%;
    border: none;
    border-radius: 0.4em;
    cursor: pointer;
    background-color: #248000;
    color: white;
}

.controls button:hover {
    background-color: #154d00;
}

/* Standardmaessig ausgeblendet - completeLogin() (main.js) zeigt diese Zeile
   nur fuer eingeloggte Pro-Nutzer (siehe canUseCloud()). */
#schedule-share-controls {
    display: none;
}

#schedule-options {
    margin-top: 4%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.sch_check {
    font-size: 0.85vw;
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

/* ===== Sound-Editor (Waveform + Start/End-Marker + Scrubber) ===== */
/* Zentriert ueber left/top statt transform: Die Drag-Logik (.draggable)
   setzt beim Ziehen position:absolute + top/left; ein zusaetzliches transform
   wuerde das Fenster beim ersten Anfassen um seine halbe Groesse springen
   lassen. calc(50% - halbe Breite) hinterlaesst keinen solchen Versatz. */
#soundeditor {
  display: none;
  position: fixed;
  top: 14%;
  left: calc(50% - 16vw);
  width: 32vw;
  max-width: 92vw;
  box-sizing: border-box;
  z-index: 100000000; /* ueber der Mediathek (#mediathek: 99999999) */
  background-color: #3b3b3b;
  border-radius: 12px;
  padding: 0.5208vw 0.9375vw 0.9375vw 0.9375vw;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  user-select: none;
}

/* Obere Kante = Ziehgriff. Bewusst transparent (nicht blau wie die Standard-
   .draghandle), muss nur als Griff funktionieren. */
#soundeditor .draghandle {
  position: relative;
  width: 100%;
  height: 1.0417vw;
  margin-bottom: 0.2083vw;
  background: transparent;
  border-radius: 12px 12px 0 0;
  cursor: move;
}

#se_close {
  position: absolute;
  top: 0.5208vw;
  right: 0.5208vw;
  width: 1.1458vw;
  height: 1.1458vw;
  cursor: pointer;
}

#se_filename {
  color: #cfcfcf;
  font-size: 0.6771vw;
  margin: 0 1.7708vw 0.4167vw 0.7813vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Name, Stift und (im Bearbeiten-Zustand) Eingabefeld stehen nebeneinander.
     min-width:0 am Textteil, damit die Ellipse bei langen Namen greift. */
  display: flex;
  align-items: center;
  gap: 0.3125vw;
}

#se_fname_text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

#se_fname_edit {
  width: 0.7292vw;
  height: 0.7292vw;
  flex: 0 0 auto;
  cursor: pointer;
  opacity: 0.55;
}

#se_fname_edit:hover {
  opacity: 1;
}

/* Eingabefeld und Endungs-Anhaengsel sind nur waehrend des Umbenennens da -
   seBeginRename()/seEndRename() in soundeditor.js schalten sie um. */
#se_fname_input {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.1563vw 0.3125vw;
  font-size: 0.6771vw;
  font-family: inherit;
  border: 1px solid #777;
  border-radius: 4px;
  background-color: #f4f4f4;
  color: #222;
  outline: none;
}

#se_fname_ext {
  display: none;
  flex: 0 0 auto;
  color: #9a9a9a;
}

/* Waffelbereich: dunkles, gerundetes Rechteck. overflow sichtbar, damit die
   Marker-Fahnen und der Playhead-Knopf oben herausragen duerfen - horizontal
   ragt nichts heraus, weil die Marker in JS auf [0..Breite] begrenzt sind. */
#se_wave_wrap {
  position: relative;
  width: 100%;
  height: 6.25vw;
  margin-top: 0.9375vw;
  box-sizing: border-box;
  background-color: #262626;
  border: 1px solid #555;
  border-radius: 8px;
  cursor: pointer;
  touch-action: none;
}

#se_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Start-/End-Marker: senkrechte orange Linie mit Dreieck-Fahne oben. */
.se_marker {
  position: absolute;
  top: -0.3646vw;
  left: 0;
  width: 0.1042vw;
  height: calc(100% + 0.3646vw);
  margin-left: -0.0521vw;
  background-color: #ef8b1f;
  cursor: ew-resize;
  touch-action: none;
  z-index: 5;
}

.se_flag {
  position: absolute;
  top: 0;
  left: -0.3125vw;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #ef8b1f;
}

/* Playhead/Scrubber: senkrechte gelbe Linie mit Kreis-Knopf oben. Klicks
   sollen den Wave-Bereich treffen (Scrubben), daher pointer-events: none. */
#se_playhead {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1042vw;
  height: 100%;
  margin-left: -0.0521vw;
  background-color: #f2d21e;
  /* Die Linie selbst durchklickbar lassen, damit ein Klick daneben den
     Wave-Bereich zum Scrubben trifft. Nur der Knopf faengt Ereignisse. */
  pointer-events: none;
  z-index: 6;
}

/* Anfasser des Playheads: Kreis UNTEN (unter der Wellenflaeche), damit er
   sich nicht mit den orangen Dreiecken oben ueberlagert und beide Linien
   getrennt gegriffen werden koennen. */
.se_knob {
  position: absolute;
  bottom: -0.3646vw;
  left: -0.3125vw;
  width: 0.7292vw;
  height: 0.7292vw;
  border-radius: 50%;
  background-color: #f2d21e;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: ew-resize;
}

#se_controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5208vw;
  margin-top: 1.25vw;
}

.se_btn {
  width: 1.5625vw;
  height: 1.5625vw;
  cursor: pointer;
}

/* Textbuttons in der Steuerleiste (Normalisieren / Zuruecksetzen). */
.se_textbtn {
  display: none;
  padding: 0.3125vw 0.5208vw;
  border-radius: 6px;
  background-color: #555;
  color: #eee;
  font-size: 0.625vw;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.se_textbtn:hover {
  background-color: #666;
}

/* Speichern-Button: wie die uebrigen Textbuttons, aber mit Diskettensymbol vor
   der Beschriftung - reines Icon war kaum zu erkennen (siehe Icon-Reihe ohne
   Beschriftung daneben). display:none ist hier nur der Ausgangszustand vor
   dem ersten seApplyMode()-Aufruf; sichtbar/versteckt schaltet soundeditor.js
   danach per direktem .css('display', ...) auf 'inline-flex'/'none' um (KEIN
   .toggle() - das wuerde beim Einblenden 'block' setzen, weil jQuery dafuer
   nur den nativen UA-Default des <div>-Tags kennt, nicht diese Regel hier -
   Icon und Beschriftung rutschten dadurch untereinander). */
.se_savebtn {
  display: none;
  align-items: center;
  gap: 0.3125vw;
}

.se_savebtn_icon {
  width: 0.9375vw;
  height: 0.9375vw;
}

#se_time {
  position: absolute;
  right: 0.2083vw;
  bottom: 0.2083vw;
  color: #f2d21e;
  font-size: 0.7813vw;
  font-weight: bold;
  white-space: nowrap;
}

/* Hinweistext im leeren Aufnahme-Startzustand (mittig im Wave-Bereich). */
#se_hint {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
  color: #9a9a9a;
  font-size: 0.7292vw;
  pointer-events: none;
}

/* Roter Rahmen als Signal, dass gerade aufgenommen wird. */
#se_wave_wrap.se_recording {
  border-color: #e0322f;
  box-shadow: inset 0 0 0 1px #e0322f;
}

/* Pulsierendes "REC"-Signal oben links im Wave-Bereich. */
#se_reclabel {
  display: none;
  position: absolute;
  top: 0.4167vw;
  left: 0.625vw;
  color: #ff3b30;
  font-size: 0.6771vw;
  font-weight: bold;
  letter-spacing: 0.0521vw;
  pointer-events: none;
  animation: sePulse 1s ease-in-out infinite;
}

@keyframes sePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Pegelanzeige: gruen->gelb->rot-Verlauf, der von rechts vom Cover verdeckt
   wird; die Cover-Breite (JS) verringert sich mit steigendem Eingangspegel. */
#se_level {
  display: none;
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  height: 0.8333vw;
  border: 1px solid #555;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(to right, #2ecc40 0%, #7fdd1e 45%, #ffdc00 72%, #ff4136 100%);
  pointer-events: none;
}

#se_level_cover {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: #1c1c1c;
  transition: width 0.05s linear;
}

/* Kleiner Speichern-Dialog (Dateiname abfragen), zentriert im Editor-Fenster. */
#se_savedialog {
  display: none;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40; /* ueber Playhead (6) und Markern (5) */
  min-width: 13.5417vw;
  background-color: #2c2c2c;
  border: 1px solid #666;
  border-radius: 10px;
  padding: 0.9375vw 1.0417vw;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  text-align: center;
}

#se_savedialog_label {
  color: #d8d8d8;
  font-size: 0.7292vw;
  margin-bottom: 0.5208vw;
}

#se_savename {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3646vw 0.4688vw;
  font-size: 0.7292vw;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: #f4f4f4;
  color: #222;
  outline: none;
}

#se_savedialog_btns {
  display: flex;
  gap: 0.5208vw;
  margin-top: 0.7292vw;
}

.se_dlg_btn {
  flex: 1;
  padding: 0.4167vw 0.5208vw;
  border-radius: 5px;
  font-size: 0.7292vw;
  cursor: pointer;
  user-select: none;
  text-align: center;
}

#se_save_ok {
  background-color: #3f7fb3;
  color: #fff;
}

#se_save_ok:hover {
  background-color: #356c98;
}

#se_save_cancel {
  background-color: #555;
  color: #eee;
}

#se_save_cancel:hover {
  background-color: #444;
}



/* ===== Scrollbalken einer erweiterten Seite ==============================
   Zwei Overlays ueber der Leinwand (rechts senkrecht, unten waagerecht), die
   nur bei erweiterten Seiten und nur bei eingeschaltetem Menuepunkt
   "Scrollbar anzeigen" erscheinen. Ruhezustand: duenn und dezent. Antippen
   macht sie fingerbreit (Klasse .sb_active), ein Tipp irgendwo sonst auf der
   Leinwand nimmt sie wieder zurueck - siehe updateScrollbars() in main.js.
   Lage, Laenge und Dicke setzt main.js in Pixeln; hier steht nur die Optik.
   z-index 900: ueber der Leinwand (5), aber unter den Werkzeugleisten
   (#topmenue 999, #bottomstrip 1000) - main.js haelt sie ohnehin von deren
   Flaeche fern. */
.pagescrollbar {
  display: none;
  position: absolute;
  z-index: 900;
  margin: 0;
  padding: 0;
  background-color: rgba(125, 125, 125, 0.16);
  border-radius: 999px;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  cursor: pointer;
  transition: background-color 140ms ease, width 140ms ease, height 140ms ease,
    left 140ms ease, top 140ms ease;
}

.pagescrollbar .sb_thumb {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(70, 70, 70, 0.42);
  border-radius: 999px;
  box-sizing: border-box;
  pointer-events: none;
  transition: background-color 140ms ease;
}

.pagescrollbar.sb_active {
  background-color: rgba(125, 125, 125, 0.28);
}

.pagescrollbar.sb_active .sb_thumb {
  background-color: rgba(40, 40, 40, 0.72);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Waehrend gezogen wird, sollen Lage und Dicke dem Finger sofort folgen -
   die weichen Uebergaenge wuerden sonst hinterherhinken. */
.pagescrollbar.sb_dragging,
.pagescrollbar.sb_dragging .sb_thumb {
  transition: none;
}