#mlcpt-map {
  position: relative;
  width: 100%;
  height: 100dvh !important;
}

/* Plus-Button unten links */
.mlcpt-add-btn {
  position: absolute;
  bottom: 90px;
  left: 10px;
  width: 60px;
  height: 60px;
  font-size: 1.8rem;
  line-height: 36px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10000;
}

/* Trash-Button direkt unter Plus-Button */
.mlcpt-trash-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 36px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 900 !important;
}

/* Overlay-Grundstil */
.mlcpt-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  width: 100%;
  margin: 0 auto 1rem;
  padding: 1rem;
  box-sizing: border-box;
}
/* Basis: Overlay ist immer im Layout, aber versteckt */
.mlcpt-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.95);
  display: flex !important;        /* bleibt immer flex */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;            /* keine Klicks, wenn versteckt */
  transform: translateY(20px);     /* leicht nach unten verschoben */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;     /* visibility erst nach 0.3s auf hidden */
}

/* Show-Modus: einblenden */
.mlcpt-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0s;       /* visibility sofort sichtbar */
}



/* Kachel-Auswahl im Overlay */
.mlcpt-tiles {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 20px;
  margin-top: 40vh;
}
.mlcpt-tile {
  width: 180px; height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
    background-color: #f2f2f2;                  /* etwas weißer als vorher */
  transition: background-color 0.2s ease; 
}
.mlcpt-tile:hover {
  background-color: #e0e0e0;                  /* beim Hovern etwas grau */
}
/* Formular für "Eintrag" im Overlay */
.mlcpt-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 500px;
}
.mlcpt-form input[type="text"],
.mlcpt-form textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  font-size: 1.25rem;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.mlcpt-form textarea {
  height: 150px;
  resize: vertical;
}

/* Status-Umschalter */
.mlcpt-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.mlcpt-switch input[type="radio"] { display: none; }
.mlcpt-switch label {
  padding: 0.5rem 1rem;
  border: 1px solid #888;
  cursor: pointer;
  user-select: none;
}
.mlcpt-switch label:first-of-type {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.mlcpt-switch label:last-of-type {
  border-radius: 0 6px 6px 0;
}
/* Orange für "zu erledigen", Grün für "erledigt" */
#status-zu:checked + label[for="status-zu"] {
  background: orange;
  color: #fff;
  border-color: darkorange;
}
#status-erledigt:checked + label[for="status-erledigt"] {
  background: green;
  color: #fff;
  border-color: darkgreen;
}

/* Fertig-Button im Formular */
.mlcpt-form .button-primary {
  align-self: stretch;
  padding: 0.75rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  background: #0073aa;
  color: #fff;
  cursor: pointer;
}

/* Infobox unten mittig */
.mlcpt-info-panel {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  padding: 1rem;
  display: none;
  z-index: 5;
  transition: all 0.3s ease;
  line-height: 0.5;
  font-size: 1.3em;
}
.infobox-heading {
  font-size: 2em;
  line-height: 1;
}
/* Compact-Mode: nur Titel & Buttons */
.mlcpt-info-panel.compact {
  padding: 0.5rem 1rem !important;
  overflow: hidden;
  height: 50px;
}

/* Compact-Mode: Inhalt verbergen */
.mlcpt-info-panel.compact .mlcpt-info-content {
  display: none;
}

/* Header für kompakten Titel */
.mlcpt-info-header {
  position: absolute;
  top: 10px;
  right: 50px;      /* direkt links neben dem Close-Button */
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

/* Schließen-Button */
.mlcpt-info-close {
  position: absolute;
  top: 10px; right: 10px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10001;
}



/* Responsive für Mobilgeräte */
@media (max-width: 600px) {
  .mlcpt-info-panel, .mlcpt-form {
    width: 78%;
    top: 70px;
    left: 45%;
  }
}

/* Button Fertig */
.mlcpt-entry-form .button-primary {
  align-self: stretch;
  padding: 0.75rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  background: #0073aa;
  color: #fff;
  cursor: pointer;
}

/* Form im Overlay: zentriert, große Felder */
.mlcpt-entry-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
}
.mlcpt-entry-form input[type="text"],
.mlcpt-entry-form textarea,
.mlcpt-entry-form select {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  font-size: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  font-family: inherit;
}
.mlcpt-entry-form textarea {
  height: 150px;
  resize: vertical;
}

/* Kontakt-Form: zwei Felder pro Zeile */
.mlcpt-kontakt-form .mlcpt-kontakt-row {
  display: flex;
  gap: 1rem;
}
.mlcpt-kontakt-form .mlcpt-kontakt-row input,
.mlcpt-kontakt-form .mlcpt-kontakt-row select {
  flex: 1;
  margin-bottom: 0;
}

/* Status-Switch-Farben unverändert */
#status-zu:checked + label[for="status-zu"] { background: orange; }
#status-erledigt:checked + label[for="status-erledigt"] { background: green; }

.entry-content {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

/* Zweispaltiges Menü */
.mlcpt-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
}
.mlcpt-menu-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mlcpt-menu-heading {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  text-align: center;
}
/* Buttons halb so hoch wie vorher */
.mlcpt-menu-grid .mlcpt-tile {
  height: 75px;
  line-height: 75px;
}
@media (max-width: 600px) {
  .mlcpt-menu-grid {
    grid-template-columns: 1fr;
  }
  .mlcpt-menu-heading {
    font-size: 1.25rem;
  }
}
/* Menü-Container nun so breit wie nötig und zentriert */
.mlcpt-overlay .mlcpt-menu-grid {
  position: absolute;
  bottom: 50px;           /* bleibt 50px über dem Bildschirmrand */
  left: 50%;              /* horizontal zentrieren */
  transform: translateX(-50%);
  padding: 0 1rem 2rem;
  margin: 0;
  width: auto;            /* nicht 100%, sondern automatisch */
  max-width: 100%;        /* falls sehr schmaler Bildschirm */
  gap: 30px;
}


/* 2. Abstand zwischen den Buttons vergrößern */
.mlcpt-menu-grid .mlcpt-tile {
  margin-bottom: 1.5rem;   /* statt default gap */
}

/* 3. Überschrift auf Desktop etwas kleiner */
@media (min-width: 601px) {
  .mlcpt-menu-heading {
    font-size: 1.25rem;    /* vorher 1.5rem */
  }
}

/* 4. Mobil: immer 2 Spalten, Buttons kleiner */
@media (max-width: 600px) {
  .mlcpt-menu-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0.5rem;   /* Abstand zwischen den Spalten */
  row-gap:    1rem;
  padding:    1rem;
  }
  .mlcpt-menu-column .mlcpt-tile {
    height: 60px;          /* kleiner */
    line-height: 60px;
    font-size: 0.9rem;     /* kleiner Text */
    margin-bottom: 1rem;   /* etwas weniger */
  }
}
/* Menü etwas weiter vom unteren Rand weg */
.mlcpt-overlay .mlcpt-menu-grid {
  bottom: 50px;      /* statt bottom:0; rückt das Menü 50px nach oben */
}

/* Spalten dichter zusammenrücken */
.mlcpt-menu-grid {
  gap: 0.5rem;       /* statt 1rem; weniger Abstand zwischen den Spalten */
}

/* Optional: Tiles-Abstand verkleinern, falls nötig */
.mlcpt-menu-grid .mlcpt-tile {
  margin-bottom: 1rem;  /* statt 1.5rem */
}

/* Mobile: auch hier den Spalten-Gap kleiner halten */
@media (max-width: 600px) {
  .mlcpt-menu-grid {
  display: grid;
  /* 1. Inhaltsspezifische Spaltenbreite (so schmal wie nötig) */
  grid-template-columns: auto auto;
  /* 2. nur noch ganz kleinen Horizontal-Gap */
  column-gap: 0.25rem;
  /* 3. vertikalen Abstand nach Belieben */
  row-gap: 1rem;

  /* 4. Menü vom Boden abstand geben */
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  padding: 0 1rem 2rem;
  }
}
/* Global/Projekt‐Switch: aktive Option farblich hervorheben */
#scope-global:checked + label[for="scope-global"] {
  background: orange;
  color: #fff;
  border-color: darkorange;
}

#scope-projekt:checked + label[for="scope-projekt"] {
  background: green;
  color: #fff;
  border-color: darkgreen;
}
/* Große Bildschirme: Menü rechtsbündig mit Abstand zum Rand */
@media (min-width: 601px) {
  .mlcpt-overlay .mlcpt-menu-grid {
    /* Entferne das zentrierende Left/Transform */
    left: auto !important;
    transform: none !important;

    /* Platziere stattdessen am rechten Rand mit etwas Abstand */
    right: 2rem;
  }
}

/* ----------------------------------------
   Basis‐Style für Header‐Buttons
   (ersetzt den „button-3“ Style)
---------------------------------------- */
.mlcpt-form-header button {
  appearance: none;
  background-color: #2ea44f;                  /* Default „Speichern“-Grün */
  border: 1px solid rgba(27, 31, 35, .15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,
               "Apple Color Emoji","Segoe UI Emoji";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 6px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color .1s ease, box-shadow .1s ease;
}

/* Fokus‐Ring wie button-3 */
.mlcpt-form-header button:focus {
  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
  outline: none;
}
.mlcpt-form-header button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

/* Hover/Active/Sperren */
.mlcpt-form-header button:hover {
  background-color: #2c974b;
}
.mlcpt-form-header button:active {
  background-color: #298e46;
  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
.mlcpt-form-header button:disabled {
  background-color: #94d3a2;
  border-color: rgba(27, 31, 35, .1);
  color: rgba(255, 255, 255, .8);
  cursor: default;
}

/* ----------------------------------------
   Speziell: Schließen‐Button in Rot
---------------------------------------- */
.mlcpt-form-header .mlcpt-overlay-close {
  background-color: #d73a49;                  /* roter Hintergrund */
  border-color: rgba(27, 31, 35, .15);
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
}
.mlcpt-form-header .mlcpt-overlay-close:hover {
  background-color: #cb2431;
}
.mlcpt-form-header .mlcpt-overlay-close:active {
  background-color: #b31d28;
  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
/* Infobox-Switch Grundaufbau */
.infobox-switch {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Der eigentliche Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color .2s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform .2s;
}
.switch input:checked + .slider {
  background-color: #2ea44f;  /* grüner Hintergrund */
}
.switch input:checked + .slider:before {
  transform: translateX(22px);
}

/* Label rechts vom Switch */
.switch-label {
  font-size: 1.2rem;
  font-weight: 400;
}
/* Header mit drei Spalten: links, mitte, rechts */
.mlcpt-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  width: 100%;
  margin: 0 auto 1rem;
  padding: 1rem;
  box-sizing: border-box;
}
/* Der mittlere Bereich dehnt sich und zentriert seinen Inhalt */
.entryform-switch-header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
/* Label links vom Switch */
.entryform-switch-header .switch-label {
  font-size: 1rem;
  font-weight: 600;
}

/* Den Switch-Button wie zuvor */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0; width: 0; height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color .2s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform .2s;
}
.switch input:checked + .slider {
  background-color: #2ea44f;
}
.switch input:checked + .slider:before {
  transform: translateX(22px);
}
/* ----------------------------------------
   Infobox: Anmerkung-Button
---------------------------------------- */
.infobox-note-button {
  appearance: none;
  background-color: #fbca04;                /* passender Orangeton */
  border: 1px solid rgba(27, 31, 35, .15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 6px 16px;
  text-align: center;
  user-select: none;
  margin-bottom: 1rem;
}

/* Hover/Active */
.infobox-note-button:hover {
  background-color: #f2b01e;
}
.infobox-note-button:active {
  background-color: #d79400;
}


/* Infobox‐Switch links in der Zeile */
.infobox-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Remove extra bottom-margin, ist nun im Container */
.infobox-note-button {
  margin-bottom: 0;
}
/* Feinjustierung: Switch + Button vertikal genau mittig ausrichten */
.infobox-actions {
  display: flex;
  align-items: center;    /* vertikal zentrieren */
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 10px;
  width: 100%;
}

/* Entferne alle Extra-Margins, die stören könnten */
.infobox-switch,
.infobox-switch .switch,
.infobox-note-button {
  margin: 0;
}

/* Button ebenfalls mittig in der Zeile */
.infobox-note-button {
  align-self: center;
  vertical-align: middle;
}

/* Slider-Knopf perfekt in der Mitte */
.infobox-switch .switch {
  display: inline-flex;
  align-items: center;
}

/* Optional: gleiche Höhe von Button und Switch */
.infobox-note-button {
  height: 28px;
  padding: 0 16px;
  line-height: 28px;
}
.mlcpt-overlay-close {
  display: none;
}
/* Stift‐Icon in der Infobox */
.mlcpt-info-edit {
  position: absolute;
  top: 10px;
  right: 35px;           /* knapp links neben dem Close-Button */
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10002;
}

/* Optional: Hover-Effekt */
.mlcpt-info-edit:hover {
  color: #2ea44f;
}
/* --- Projekt‐Auswahl Overlay --- */
.mlcpt-project-select {
  text-align: center;
}
.mlcpt-project-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
/* reuse existing tile styles for .mlcpt-tile */
.mlcpt-project-tiles .mlcpt-tile {
  background-color: #fafafa;
  transition: background-color 0.2s ease;
}
.mlcpt-project-tiles .mlcpt-tile:hover {
  background-color: #e0e0e0;
}