/* =========================================================
   IG DESIGN SYSTEM – QUARTO HTML (FINAL, MIT LOGO)
   ========================================================= */

/* =========================================================
   1) DESIGN TOKENS
   ========================================================= */

:root {
  --ig-primary: #005b96;
  --ig-primary-dark: #003f69;
  --ig-primary-soft: #eaf3f9;
  --ig-primary-accent: #2d7db8;

  --ig-secondary: #8f1d2c;
  --ig-secondary-dark: #6e1421;
  --ig-secondary-soft: #f6e9ec;
  --ig-secondary-accent: #b23a4b;

  --ig-bg: #f5f8fb;
  --ig-surface: #ffffff;
  --ig-border: #d7e2ea;
  --ig-divider: #e8eff4;

  --ig-text: #13202b;
  --ig-text-soft: #566573;
  --ig-heading: #0c1f30;

  --ig-shadow-sm: 0 6px 18px rgba(12, 31, 48, 0.05);
  --ig-shadow-md: 0 12px 28px rgba(12, 31, 48, 0.08);

  --ig-radius: 16px;
  --ig-radius-sm: 10px;
}

/* =========================================================
   2) GLOBAL
   ========================================================= */

body {
  font-family: "Inter", "Source Sans 3", "Segoe UI", Arial, sans-serif;
  color: var(--ig-text);
  background: linear-gradient(180deg, #fbfdff 0%, var(--ig-bg) 100%);
  line-height: 1.7;
}

/* =========================================================
   3) HERO – TITELBLOCK MIT LOGO
   ========================================================= */

#title-block-header {
  position: relative;
  margin: 2.5rem 0 3rem;
  padding: 2rem 2.2rem 1.8rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  box-shadow: var(--ig-shadow-md);
}

/* Farbband oben */
#title-block-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--ig-primary-dark),
    var(--ig-primary),
    var(--ig-secondary),
    var(--ig-secondary-accent)
  );
  border-radius: var(--ig-radius) var(--ig-radius) 0 0;
}

/* LOGO RECHTS 
  #title-block-header::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  width: 130px;
  height: 56px;
  background: url("images/stadt-logo.png") right center / contain no-repeat;
  pointer-events: none;
} */

/* Titel & Metadaten */
#title-block-header .title,
#title-block-header .subtitle,
#title-block-header .quarto-title-meta {
/*  max-width: calc(100% - 170px);Titel & Metadaten nicht unter das Logo laufen lassen */
  max-width: 100%;
}

#title-block-header .title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ig-heading);
}

/* =========================================================
   4) TYPOGRAFIE & LINKS
   ========================================================= */

h2 {
  border-bottom: 2px solid var(--ig-divider);
  padding-bottom: 0.4rem;
}

.content a {
  color: var(--ig-primary);
  text-decoration: underline;
  text-decoration-color: rgba(0, 91, 150, 0.35);
  text-underline-offset: 0.16em;

  /* Lange, ausgeschriebene Links (z. B. vollstaendige URLs als
     Linktext, siehe die callout Absaetze in den Themenuebersichten
     der einzelnen Themenbereiche) sind eine einzige, zusammenhaengende
     Zeichenkette ohne Leerzeichen. Ohne diese beiden Eigenschaften
     bricht der Browser eine solche Zeichenkette nicht um, sie laeuft
     auf schmalen Bildschirmen ueber den rechten Rand hinaus. Gilt
     fuer alle Links im Inhaltsbereich, nicht nur auf den Uebersichts
     seiten, da lange Links jederzeit an anderer Stelle neu dazu
     kommen koennen. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.content a:hover {
  color: var(--ig-primary-dark);
  text-decoration-color: rgba(0, 63, 105, 0.6);
}

/* =========================================================
   5) TRENNLINIEN
   ========================================================= */

hr {
  border: 0;
  height: 3px;
  margin: 2.5rem 0;
  background: linear-gradient(
    90deg,
    rgba(0, 91, 150, 0),
    rgba(0, 91, 150, 0.6),
    rgba(143, 29, 44, 0.6),
    rgba(143, 29, 44, 0)
  );
}

/* =========================================================
   6) KPI-CARDS – ORIGINALFARBEN
   ========================================================= */

.home-search {
  display: flex;
  gap: 0.6rem;
  max-width: 520px;
  margin: 1.2rem 0;
}

.home-search input {
  flex: 1;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.kpi-card {
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--ig-shadow-md);
}

.kpi-card--blue {
  border-top: 5px solid var(--ig-primary);
  background: linear-gradient(180deg, #ffffff 0%, var(--ig-primary-soft) 100%);
}

.kpi-card--red {
  border-top: 5px solid var(--ig-secondary);
  background: linear-gradient(180deg, #ffffff 0%, var(--ig-secondary-soft) 100%);
}

.kpi-label {
  font-size: 0.9rem;
  color: var(--ig-text-soft);
}

.kpi-value {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--ig-heading);
}

.kpi-meta {
  font-size: 0.9rem;
  color: var(--ig-text-soft);
}

/* =========================================================
   7) PLOTS – NUR EIN KASTEN
   ========================================================= */

div.cell {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

div.cell-output-display,
.figure,
.plotly,
.html-widget {
  background: var(--ig-surface);
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 1rem;
  box-shadow: var(--ig-shadow-sm);
  margin: 1.5rem 0;
}

/* Seit 18.08.2026 (mobile Ueberarbeitung, Nachtrag, siehe
   DOKU-DASHBOARDS.md Stolperfalle 37): Ein Plotly Widget aus einem R
   Chunk sitzt IMMER zusaetzlich innerhalb von "div.cell-output-display"
   (von Quarto automatisch um jede Chunk-Ausgabe gelegt). Die obige
   Regel liess dadurch trotz der Ueberschrift "NUR EIN KASTEN" in der
   Praxis ZWEI ineinander verschachtelte Kaesten entstehen (aeusserer
   Rahmen von "cell-output-display", zusaetzlicher innerer Rahmen von
   "html-widget"/"plotly" direkt daneben) - auf dem Desktop kaum
   auffaellig, auf dem Smartphone jedoch deutlich sichtbar als
   mehrfach verschachtelte Rahmen UND als spuerbarer Verlust an
   verfuegbarer Breite (zwei mal 1rem Innenabstand links/rechts statt
   einmal). Die folgende Regel entfernt den inneren, doppelten Rahmen
   wieder - sichtbar bleibt ausschliesslich der aeussere Kasten von
   "cell-output-display". */
div.cell-output-display .html-widget,
div.cell-output-display .plotly {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

/* =========================================================
   8) KONTAKTBOX
   ========================================================= */

.contact-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--ig-shadow-sm);
}

/* =========================================================
   9) TOC MIT PFEILEN
   ========================================================= */

#TOC li > a::before {
  content: "▸";
  margin-right: 0.3rem;
  font-size: 0.75rem;
  color: var(--ig-text-soft);
}

#TOC li:has(ul) > a::before {
  content: "▾";
}

#TOC a.active {
  font-weight: 700;
  color: var(--ig-primary-dark);
}

/* =========================================================
   10) NAV-FOOTER – ZENTRIERT (QUARTO-KORREKT)
   ========================================================= */

.nav-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--ig-border);
  color: var(--ig-text-soft);
  font-size: 0.9rem;
}

.nav-footer-left,
.nav-footer-right {
  display: none;
}

.nav-footer-center {
  text-align: center;
}

/* =========================================================
   11) CUSTOM FOOTER – ZENTRIERT
   ========================================================= */

.custom-footer {
  margin-top: 4rem;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--ig-border);
  text-align: center;
  color: var(--ig-text-soft);
  font-size: 0.9rem;
}

.custom-footer p {
  margin: 0;
}

.custom-footer a {
  color: var(--ig-primary);
  text-decoration: none;
}

.custom-footer a:hover {
  color: var(--ig-primary-dark);
  text-decoration: underline;
}

/* =========================================================
   12) RESPONSIVE – LOGO UNTER TITEL (nur notwendig, wenn Logo nochmal in Metadaten auftaucht)
   ========================================================= 

@media (max-width: 768px) {
  #title-block-header::after {
    position: static;
    display: block;
    width: 110px;
    height: 48px;
    margin: 1rem 0 0;
  }

  #title-block-header .title,
  #title-block-header .subtitle,
  #title-block-header .quarto-title-meta {
    max-width: 100%;
  }
} */

/* =========================================================
   13) BUTTONS
   ========================================================= */

/* Basis */
.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.45rem 1.15rem;
  background-color: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* PRIMARY – Blau */
.btn-primary {
  color: var(--ig-primary);
  border: 2px solid var(--ig-primary);
  background-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff;
  background-color: var(--ig-primary-soft);
  box-shadow: 0 4px 12px rgba(0, 91, 150, 0.25);
}

/* SECONDARY – Rot/Bordeaux */
.btn-secondary {
  color: var(--ig-secondary);
  border: 2px solid var(--ig-secondary);
  background-color: transparent;
}

.btn-secondary:hover,
.btn-secondary:focus {
  color: #ffffff;
  background-color: var(--ig-primary-soft);
  box-shadow: 0 4px 12px rgba(0, 91, 150, 0.25);
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* =========================================================
   14) BERICHTSKACHELN
   ========================================================= */

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.report-card {
  display: flex;
  flex-direction: column;

  min-height: 180px;

  background: var(--ig-surface);

  /* optionales Hintergrundbild */
  background-image: var(--report-card-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 1.75rem;
  box-shadow: var(--ig-shadow-sm);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.report-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ig-shadow-md);
}

/* Karten mit Hintergrundbild */

.report-card--image {
  position: relative;
  overflow: hidden;
}

/* Überschriften */

.report-card :is(h2, h3) {
  margin: 0 0 1.5rem;
  padding: 0;
  border: none;

  color: var(--ig-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;

  text-align: center;

  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;

  min-height: 3.2em;
}

/* Button-Absatz aus Quarto */

.report-card p {
  margin-top: auto;
  margin-bottom: 0;
  text-align: center;
}

.report-card .btn {
  display: inline-block;
}

/* Themenkarten ohne vorhandene Berichte */

.report-card--empty {
  opacity: 0.7;
}

.report-card-count {
  font-size: 0.9rem;
  color: var(--ig-text-muted, #6c757d);
}

/* Hinweistext auf Themenseiten ohne Berichte */

.topic-empty {
  padding: 2rem 0;
  color: var(--ig-text-muted, #6c757d);
  font-style: italic;
}

/* Jahres-Inhaltsverzeichnis auf Themenseiten */

.topic-year-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 2rem;
}

.topic-year-toc a {
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--ig-border, #ced4da);
  text-decoration: none;
  font-size: 0.9rem;
  color: inherit;
}

.topic-year-toc a:hover {
  background: var(--ig-border, #ced4da);
}

/* Hintergrundbilder der Berichtskacheln */

.bg-bevoelkerung {
  --report-card-bg:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("images/report-images/bevoelkerung.jpg");
}

.bg-wohnen {
  --report-card-bg:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("images/report-images/wohnen.jpg");
}

.bg-bildung {
  --report-card-bg:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("images/report-images/bildung.jpg");
}

.bg-arbeitsmarkt {
  --report-card-bg:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("images/report-images/arbeitsmarkt.jpg");
}

.bg-wirtschaft {
  --report-card-bg:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("images/report-images/wirtschaft.jpg");
}

.bg-umwelt {
  --report-card-bg:
    linear-gradient(
      rgba(255,255,255,.88),
      rgba(255,255,255,.88)
    ),
    url("images/report-images/umwelt.jpg");
}

.bg-zensus {
  --report-card-bg:
    linear-gradient(
    rgba(255,255,255,.88),
    rgba(255,255,255,.88)),
    url("images/report-images/zensus.jpg");
}

.bg-monitorings {
  --report-card-bg:
    linear-gradient(
    rgba(255,255,255,.88), 
    rgba(255,255,255,.88)),
    url("images/report-images/monitorings.jpg");
}

.bg-kleinraeumige-statistik {
  --report-card-bg:
    linear-gradient(
    rgba(255,255,255,.88), 
    rgba(255,255,255,.88)),
    url("images/report-images/kleinraeumige-statistik.jpg");
}


/* =========================================================
   15) NAVBAR – STADTLOGO + ZWEIZEILIGER TITEL
   ========================================================= */

/* Logo */
.navbar-brand img {
  max-height: 52px;
  width: auto;
  margin-right: 1rem;
  flex-shrink: 0;
}

/* Logo + Titel */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 1rem;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  max-width: none;
}

/* Titel */
.navbar-title,
.navbar-brand span:last-child {
  display: block;
  line-height: 1.2;
  font-weight: 700;
  font-size: 1.15rem;

  white-space: normal !important;
  overflow: visible !important;
}

/* Desktop */
@media (min-width: 992px) {

  .navbar-title,
  .navbar-brand span:last-child {
    max-width: 420px;
  }
}

/* Tablet */
@media (max-width: 991px) {

  .navbar-title,
  .navbar-brand span:last-child {
    max-width: 300px;
    font-size: 1.05rem;
  }
}

/* =========================================================
   16) BACK TO TOP BUTTON
   ========================================================= */

#back-to-top {
  position: fixed;

  right: 1.5rem;
  bottom: 1.5rem;

  width: 46px;
  height: 46px;

  border-radius: 50%;
  border: 1px solid var(--ig-border);

  background: var(--ig-primary);
  color: #ffffff;

  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  box-shadow: var(--ig-shadow-md);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease,
    background-color .2s ease;

  z-index: 1000;
}

#back-to-top:hover {
  background: var(--ig-primary-dark);
  transform: translateY(-3px);
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   17) KACHEL AKTUELLSTE BERICHTE
   ========================================================= */

.latest-reports {
  background: var(--ig-surface);
  border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: var(--ig-shadow-sm);
}

.latest-reports h3 {
  margin-top: 0;
  color: var(--ig-heading);
}

.latest-reports ul {
  margin-bottom: 0;
}

.latest-reports li {
  margin-bottom: .6rem;
}

.latest-reports small {
  color: var(--ig-text-soft);
}

/* =========================================================
   SUCHFUNKTION
   ========================================================= */

.search-box {
  margin-bottom: 2rem;
}


#report-search {

  width: 100%;
  max-width: 700px;

  padding: 0.8rem 1rem;

  border-radius: var(--ig-radius-sm);

  border: 1px solid var(--ig-border);

  font-size: 1rem;

}


.search-result {

  background: var(--ig-surface);

  border: 1px solid var(--ig-border);

  border-radius: var(--ig-radius);

  padding: 1.2rem;

  margin-bottom: 1rem;

  box-shadow: var(--ig-shadow-sm);

}


.search-result h3 {

  margin-top: 0;

}


.search-result small {

  color: var(--ig-text-soft);

}


.search-result-tags {

  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;

}


.tag-chip {

  border: 1px solid var(--ig-border);
  background: var(--ig-surface-alt, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: inherit;

}


.tag-chip:hover {

  background: var(--ig-border);

}

/* =========================================================
   SUCHFILTER
   ========================================================= */


.search-panel {

  background: var(--ig-surface);

  border: 1px solid var(--ig-border);

  border-radius: var(--ig-radius);

  padding: 1.5rem;

  margin-bottom: 2rem;

  box-shadow: var(--ig-shadow-sm);

}


.search-row {

  margin-bottom: 1.5rem;

}


.filter-row {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));

  gap: 1rem;

}


.filter-row label {

  display:block;

  margin-bottom:.3rem;

  font-weight:600;

}


.filter-row select {

  width:100%;

  padding:.6rem;

  border-radius:var(--ig-radius-sm);

  border:1px solid var(--ig-border);

}

/* =========================================================
   17) RESPONSIVE - ECHTE SMARTPHONE BREITEN (18.08.2026)
   =========================================================
   Ergaenzt die bestehenden Breakpoints bei 991px/992px (Tablet/
   Desktop, Abschnitt 15) um einen eigenen Bereich fuer echte
   Smartphone Breiten. Grund: Auf dem Smartphone wurden nach Angabe
   des Nutzers teils die Ueberschrift rechts, teils die Autorenzeile
   und teils Dropdown Elemente abgeschnitten. Die Regeln unten zwingen
   Titel, Untertitel und Metadaten (Autor, Datum) dazu, in einer
   Spalte umzubrechen statt ueber den sichtbaren Bereich hinauszulaufen.
   */

@media (max-width: 576px) {

  /* Titelkasten: weniger Innenabstand, Text bricht garantiert um
     statt ueber den Rand hinauszulaufen. */
  #title-block-header {
    padding: 1.4rem 1.1rem 1.3rem;
  }

  #title-block-header .title {
    font-size: 1.65rem;
    overflow-wrap: anywhere;
  }

  #title-block-header .subtitle {
    overflow-wrap: anywhere;
  }

  /* Die Metadatenzeile (u. a. Autor/-in) stammt aus Quartos eigenem,
     mehrspaltigen Raster. Auf sehr schmalen Bildschirmen wird sie
     hier hart auf eine einzige Spalte gezwungen, damit lange
     Autorennamen umbrechen statt seitlich abgeschnitten zu werden.
     "!important" ist hier bewusst noetig, da die Regel eine von
     Quarto selbst vergebene, spezifischere Grid-Definition
     ueberschreiben muss. */
  #title-block-header .quarto-title-meta {
    grid-template-columns: 1fr !important;
    row-gap: 0.35rem;
  }

  #title-block-header .quarto-title-meta * {
    overflow-wrap: anywhere;
  }

  /* Navigationsleiste: verhindert, dass der Seitentitel neben dem
     Logo/Hamburger-Menue die verfuegbare Breite sprengt, statt
     innerhalb seines Platzes umzubrechen. */
  .navbar-brand {
    flex-wrap: wrap;
    min-width: 0;
  }

  .navbar-title,
  .navbar-brand span:last-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Auf sehr schmalen Bildschirmen wird stattdessen der Seitentitel
     ausgeblendet und nur das Stadtlogo gezeigt (Nutzerwunsch, Stand
     19.08.2026). Vorher war es umgekehrt: das Logo wurde ausgeblendet,
     da der Titel "Berichtsportal..." das Logo sonst ueberlagert hatte
     (das Logo hatte "flex-shrink: 0" und behaelt dadurch immer seine
     volle Pixelbreite, unabhaengig vom verfuegbaren Platz, siehe die
     Logo Regel oben in Abschnitt 15). Bewusst nur der Titel wird
     ausgeblendet, alle uebrigen Regeln dieses Bereichs (flex-wrap,
     min-width auf .navbar-brand) bleiben unveraendert bestehen, damit
     sich am Zusammenspiel mit dem Hamburger Menue nichts aendert. */
  .navbar-title,
  .navbar-brand span:last-child {
    display: none;
  }

}

/* =========================================================
   18) DASHBOARD AUSWAHLFELDER (HTML SELECT STATT PLOTLY DROPDOWN)
   =========================================================
   Wird von scripts/dashboard-karten-dropdown-sync.js (und ab der
   naechsten Ausbaustufe auch von den anderen Dashboard-Sync-Skripten)
   erzeugt. Ersetzt die fruehere Darstellung als native Plotly
   Dropdown-Buttons, siehe ausfuehrliche Begruendung im Kopfkommentar
   der jeweiligen .js Datei: native Plotly Dropdown Listen haben
   keinen eigenen Scrollbalken und liessen sich bei vielen Eintraegen
   auf dem Smartphone nicht mehr vollstaendig bedienen.
   */

.ig-dashboard-dropdown-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.ig-dashboard-dropdown-feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 180px;
  flex: 1 1 220px;
}

.ig-dashboard-dropdown-feld label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ig-text-soft);
}

.ig-dashboard-dropdown-feld select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--ig-radius-sm);
  border: 1px solid var(--ig-border);
  background: #ffffff;
  color: var(--ig-text);
  font-family: inherit;
  font-size: 0.95rem;
}

.ig-dashboard-dropdown-feld select:focus {
  outline: 2px solid var(--ig-primary-accent);
  outline-offset: 1px;
}

/* Auf sehr schmalen Bildschirmen sollen beide Auswahlfelder die
   volle Breite einnehmen (untereinander statt nebeneinander), damit
   ausreichend Platz zum Antippen bleibt. */
@media (max-width: 576px) {
  .ig-dashboard-dropdown-feld {
    flex: 1 1 100%;
  }
}