/* ═════════════════════════════════════════════════════════
   MAIN-LAYOUT.CSS – CSS Variables, Page Layout, Utilities
   ═════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* *** CSS Variables für Light Mode (Default) *** */
:root {
  --font-family: 'Roboto', sans-serif;

  --title-background: rgba(111, 233, 166, 1);
  --nearby-title: rgba(111, 233, 166, 0.66);
  --bg-color: white;
  --text-color: black;
  --border-color: #ccc;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --dropdown-bg: white;
  --dropdown-alt-bg: #f6f6f6;
  --dropdown-border: #bbb;
  --dropdown-alt-border: #ccc;
  --search-bg: white;
  --search-opacity: 0.5;
  --search-focus-opacity: 0.9;
  --hover-text-color: #666;
  --hover-text-color-active: #ccc;


  --microtip-transition-duration: 0.1s;
  --microtip-transition-delay: 0.15s;
  --microtip-transition-easing: ease-out;
  --microtip-font-size: 12px;
  --microtip-font-weight: 600;
  --microtip-background-color: rgba(255,255,32,.92);
  --microtip-color: black;
  --microtip-border-color: black;
  --micotip-shadow-color: rgba(0, 0, 0, 0.5);

  /* Space-Status-Farben werden von config.js gesetzt */
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
}

#map {
  position: absolute;
  inset: 0;
}

@media (max-width: 1024px), (min-width: 768px) and (pointer: coarse) {
  #map {
    bottom: var(--mobile-ui-height, 0px);
  }
}

.title-bar {
  position: absolute;
  z-index: 401;
  left: 1em;
  top: 1em;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}

.title {
  font-family: var(--font-family);
  color: blue;
  background-color: var(--title-background);
  padding: .25em .75em .25em .50em;
  border-radius: .6em;
  border: .30em dashed rgba(256, 256, 256, .77);
  box-shadow: .2em -.1em .6em .35em var(--shadow-color);
  font-weight: bold;
  font-size: 1.7em;
  transition: box-shadow 0.75s ease-out;
}

.title:hover {
  box-shadow: .2em -.1em .6em .35em transparent;
  outline: 1px solid #666666;
}

.spac {
  padding-left: 1.5em;
  margin: 0 .1em 0 .1em;
  border-radius: .25em;
  background-color: blue;
  color: white;
  border: .1em solid transparent;
}

.spac:hover {
  background-color: white;
  color: blue;
  border: .1em solid blue;
}

.title-bar a {
text-decoration: none;
}

.title-tools {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 404;
}

.title-tools a {
  border-radius: 0.3em;
  align-items: center;
  flex: 1;
  display: flex;
  justify-content: center;
  vertical-align: auto;
  color: rgba(0, 0, 255, .3);
  background-color: var(--title-background);
  font-size: 1.7em;
  text-decoration: none;
  opacity: 0.6;
  transition: color, box-shadow, 0.15s ease-in;
  padding: 0.1em 0em;
}

.title-tools a:hover {
  color: rgba(0, 0, 255, .8);
  box-shadow: 2px 1px 14px rgba(0, 0, 0, 0.9);
  opacity: 1;
}


.title.popup-active {
  opacity: 0.12;
  transition: opacity 0.25s ease-in-out;
}


/* Utility-Klasse zum Ausblenden */
.is-hidden {
  display: none !important;
}