/* ─────────────────────────
   Farbvorgaben (helles Grau)
   ───────────────────────── */
:root {
  --md-default-bg-color:  #F2F2F2;
  --md-surface-bg-color:  #E8E8E8;
  --md-on-surface:        #2E2E2E;
}

/* ─────────────────────────
   Toolkit-Logo in der Kopfzeile
   ───────────────────────── */
.md-header__button.md-logo img {
  height: 80px !important;      /* feste Höhe */
  width:  auto  !important;
  max-height: none !important;
  max-width:  none !important;
}

.md-header {
    z-index: 1000 !important;
}

/* ─────────────────────────
   Cover-Block auf Startseite
   ───────────────────────── */
.cover-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background-color: #2094F3;
}

.logo-image {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 0;
  border: none;
}

/* ─────────────────────────
   Cover-Beschriftung
   ───────────────────────── */
.cover-caption {
  color: #fff;
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding: 8px 0;
  box-sizing: border-box;
  margin: 0;
  line-height: 1;
  background-color: inherit;
  text-shadow: 1px 1px 1px rgba(0,0,0,.18);
}

.cover-caption .subtitle,
.cover-caption .coordination,
.cover-caption .authors {
  margin: 0;
  padding: 4px;
  font-weight: normal;
}

.cover-caption .subtitle {
  font-size: 1.25em;
  margin: 12px 0 32px;
}

.cover-caption .coordination {
  font-size: .9em;
  font-weight: bold;
  margin-bottom: 6px;
}

.cover-caption .coordination-name {
  font-size: .9em;
  margin-bottom: 24px;
}

.cover-caption .authors {
  font-size: .9em;
  font-weight: bold;
  margin-bottom: 6px;
}

.cover-caption .author-names {
  font-size: .9em;
  line-height: 1.2;
  margin-bottom: 36px;
}

.cover-caption .place {
  font-size: .7em;
  margin-bottom: 10px;
}

.cover-caption .badge {
  margin-bottom: 10px;
}

.cc-text{
  font-size:.9em;
  color:var(--md-typeset-color--muted);
  display:block;
  text-align:right;
  margin-top:.5rem;
}

/* ─────────────────────────
   Literatur-Absätze kleiner
   ───────────────────────── */
div.literatur {
  font-size: .85em;
  line-height: 1.35;
}

/* ─────────────────────────
   WeasyPrint-Work-around  +  Unicode-Ersatz-Icons
   ───────────────────────── */
@media print {

  /* ➊ Flex-Fix – verhindert leere Seite 1 */
  .md-main,
  .md-content,
  .md-main__inner,
  .md-content__inner {
    display: block !important;
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  body { margin: 0 !important; }

  /* ➋ Pseudo-Icons auf echte Unicode-Zeichen umbiegen */
  /* Pfeile der <details>-Klappboxen */
  .md-typeset details summary::before            { content: "▶"; }
  .md-typeset details[open] summary::before      { content: "▼"; }

  /* Hamburger-Menü (oben links) – als ≡ */
  .md-header__button.md-icon::before,
  .md-header__button.md-icon::after              { content: "≡"; }

  /* Admonition-Symbole */
  .mdx-admonition-icon::before                   { content: "ℹ"; }
  .mdx-admonition-icon--warning::before          { content: "⚠"; }
  .mdx-admonition-icon--note::before             { content: "✎"; }
}

/* Basisfarben direkt aus dem Theme übernehmen */
:root {
  /* Hintergrund / Schrift – funktioniert in Light- und Dark-Mode,
     weil die Variablen von Material selbst umgeschaltet werden */
  --md-meta-bg-color: var(--md-code-bg-color);
  --md-meta-fg-color: var(--md-code-fg-color);
}

/* Styling für <span class="meta"> … </span> */
.md-typeset .meta {
  font: 500 0.95em var(--md-code-font-family, SFMono-Regular, Consolas, monospace);
  background-color: var(--md-meta-bg-color);
  color: var(--md-meta-fg-color);
  padding: 0 .05em;
  border-radius: .1rem;
  white-space: nowrap;           /* verhindert Umbruch in Tabellen usw. */
  vertical-align: baseline;      /* sitzt wie Inline-Code im Textfluss */
}

body[data-md-color-scheme="slate"] .md-typeset .meta {
  background-color: rgb(39, 42, 53);
  color: rgba(213, 216, 226, 0.82);
}

.md-typeset code {
  font: 500 0.95em var(--md-code-font-family, SFMono-Regular, Consolas, monospace);
  padding: 0 .05em;
}

audio::-webkit-media-controls-timeline {
  display: 1;
}

/* Beispiel-Block für Layout mit Abstand und Blockdarstellung */
.example {
  display: block;
  text-align: center;
  margin-bottom: 0.4rem;
  padding: 0.5em 0.5em;
  background: #f7f7f7;
  border-radius: 0.3em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

body[data-md-color-scheme="slate"] .example {
  background: #4a4a4a;         /* dunkler Hintergrund */
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);  /* stärkerer Kontrast im Darkmode */
}

.audio-comparison {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: .64rem;
}

.audio-block {
  flex: 1 1 10px;
  min-width: 280px;
  margin-bottom: 1.2rem;
  text-align: center;
}
.audio-block audio {
  display: inline-block;
  margin-top: 0.5em;
}

@media (max-width: 600px) {
  .audio-comparison {
    flex-direction: column;
  }
}

.md-typeset h4 {
    font-weight: 700;
    letter-spacing: -.01em;
    margin-top: 0.5em;
    margin-bottom: .5em;
}

.audio-source {
  font-size: 0.9em;
  font-weight: 400;
  text-align: right;
  color: var(--md-meta-fg-color);
  margin-top: 0.8em;
  margin-right: 0.6em;
  font-style: normal;
}

body[data-md-color-scheme="slate"] .audio-source {
  color: rgba(213, 216, 226, 0.82);
}

  /* MAP */

  /* Standardgröße: Inhalt */
  #map-container {
    width: 100%;
    height: 350px;
    margin: 0;
    position: relative;
    border: 2px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.25s;
    background: #f9f9f9;
    z-index: 1;
  }
  #mapid {
    width: 100%;
    height: 100%;
  }
  #fullscreen-btn {
    position: absolute;
    right: 12px;
    top: 24px;
    z-index: 1000;
    padding: 0px 0px;
    border-radius: 5px;
    border: 0px solid #888;
    background: 0;
    font-size: 1em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  
  /* Leaflet Capture kleiner machen */
  .leaflet-control-capture {
    transform: scale(0.7);
    transform-origin: bottom right;
  }

  /* Im Fullscreen-Modus */
  #map-container.fullscreen {
    position: fixed !important;
    top: 100px !important;          /* Headerhöhe, anpassen falls nötig */
    left: 0;
    width: 100vw !important;
    height: calc(100vh - 100px) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    background: white;
    border: none !important;
    box-shadow: none !important;
  }
@media (max-width: 600px) {
  #map-container.fullscreen {
    position: fixed !important;
    top: 48px !important;          /* Headerhöhe, anpassen falls nötig */
    left: 0;
    width: 100vw !important;
    height: calc(100vh - 48px) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    background: white;
    border: none !important;
    box-shadow: none !important;
  }
}
  /* Popup Layout */
  .popup-sprachenkarte {
    font-size: 0.85em;
    color: #222;
    background: rgba(255, 255, 255, 0.392);
    padding: 0px 0px;
    border-radius: 4px;
    line-height: 1.4;
  }

  .popup-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #222;
  }

   .popup-familie {
    font-size: 1.0em;
    color: #888;
  }

  .popup-herkunft {
    font-size: 1.0em;
    color: #444;
    margin-top: 5px;
  }


.md-typeset details.hoermal {
    border: .1rem solid #d3685f;
}

/* Variation map specific styles (moved from variation_map.md) */
#map-container[data-map="variation"] {
  position: relative;
  width: 100%;
  height: 650px;
}

#map-container[data-map="variation"] #mapid {
  width: 100%;
  height: 100%;
}

#map-container[data-map="variation"] #fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
}

#map-container[data-map="variation"].fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

#map-container[data-map="variation"].fullscreen #mapid {
  height: 100vh;
}

.popup-sprachenkarte {
  font-family: Arial, sans-serif;
}

.popup-title {
  font-weight: bold;
  font-size: 14px;
}

.popup-hauptstadt {
  font-style: italic;
  font-size: 0.9em;
  color: #666;
}

.popup-gdn {
  margin-top: 5px;
}

.popup-anteil {
  margin-top: 5px;
}

/* Popup value styling for variation map: labels smaller, values bold */
#map-container[data-map="variation"] .popup-sprachenkarte .popup-line {
  margin-top: 4px;
  line-height: 1.2;
}

#map-container[data-map="variation"] .popup-sprachenkarte .popup-label {
  font-size: 0.80em;
  color: #333;
}

#map-container[data-map="variation"] .popup-sprachenkarte .popup-value {
  font-weight: 700;
  font-size: 0.80em;
  margin-left: 4px;
}

/* Make the country name prominent like a heading inside the popup */
#map-container[data-map="variation"] .popup-sprachenkarte .popup-title {
  font-size: 0.90em; /* larger than other popup text */
  font-weight: 700;
  line-height: 0.9;
  display: block;
  margin-bottom: 4px;
}

.hoermal .admonition-title, .hoermal summary {
    background-color: #f1ded3;
}

body[data-md-color-scheme="slate"] .md-typeset details.hoermal {
  border-color: #c7837b;
}
body[data-md-color-scheme="slate"] .hoermal .admonition-title,
body[data-md-color-scheme="slate"] .hoermal summary {
  background-color: #6f4f45;
}

/* Small, reusable button style for internal links to maps/pages */
.md-typeset a.map-button, .md-content a.map-button {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  background: #1976d2; /* blue primary */
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.md-typeset a.map-button:hover, .md-content a.map-button:hover {
  background: #145ea6;
  color: #fff;
}
.md-typeset a.map-button:active, .md-content a.map-button:active {
  transform: translateY(1px);
}
.md-typeset a.map-button .material-icons, .md-content a.map-button .material-icons {
  vertical-align: middle;
  margin-right: 0.35rem;
}

/* Respect dark mode: slightly lighter button when in slate/dark scheme */
body[data-md-color-scheme="slate"] .md-typeset a.map-button,
body[data-md-color-scheme="slate"] .md-content a.map-button {
  background: #1e88e5;
}

/* Position map-button bottom-right only inside the map admonition wrapper
   (avoid changing spacing for all tip admonitions). The markup in the
   content adds a <div class="map-admonition"> wrapper inside the tip. */
.md-typeset .admonition.tip .map-admonition, .md-content .admonition.tip .map-admonition {
  position: relative; /* establish stacking context for the absolute child */
  padding-bottom: 2.2rem; /* make space for the positioned button */
}

.md-typeset .admonition.tip .map-admonition a.map-button, .md-content .admonition.tip .map-admonition a.map-button {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  z-index: 10;
}

/* Left-aligned map image inside tip admonition */
.md-typeset .admonition.tip .admonition-map-image,
.md-content .admonition.tip .admonition-map-image {
  float: left;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 1rem; /* 1rem spacing on all sides */
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* right-side variant */
.md-typeset .admonition.tip .admonition-map-image--right,
.md-content .admonition.tip .admonition-map-image--right {
  float: right;
  margin: 1rem; /* 1rem spacing on all sides */
}
/* Row layout for the two preview images (desktop / default) */
.map-image-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap; /* allow wrapping on narrower viewports */
}

.map-image-item {
  flex: 0 0 300px; /* fixed item width */
  box-sizing: border-box;
}

.map-image-item .admonition-map-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0; /* spacing comes from the row gap */
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* On small screens place image above text and full width */
@media (max-width: 640px) {
  .md-typeset .admonition.tip .admonition-map-image,
  .md-content .admonition.tip .admonition-map-image,
  .md-typeset .admonition.tip .admonition-map-image--right,
  .md-content .admonition.tip .admonition-map-image--right {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 0.8rem 0;
  }

  /* stack the preview row and make items full width */
  .map-image-row {
    display: block; /* stack images */
  }
  .map-image-item {
    width: 100%;
    flex: 0 0 auto;
    margin-bottom: 0.8rem;
  }
  .map-image-item .admonition-map-image {
    width: 100%;
  }

  /* Reduce reserved space inside the map-admonition on small screens */
  .md-typeset .admonition.tip .map-admonition, .md-content .admonition.tip .map-admonition {
    padding-bottom: 1rem; /* less reserved space for mobile */
  }

  /* Keep the button positioned bottom-right on mobile as well;
     increase the admonition bottom padding so it doesn't overlap content. */
  .md-typeset .admonition.tip .map-admonition, .md-content .admonition.tip .map-admonition {
    padding-bottom: 3.4rem; /* enough space for the absolutely-positioned button */
  }
}