/* styles_ES.css */

/* ----------------------------------------------------------
   1. Google Fonts – Esslingen Corporate Design
   ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&family=Source+Sans+Pro:wght@400;600;700&display=swap');

/* ----------------------------------------------------------
   2. Esslingen Corporate Design – Variablen
   ---------------------------------------------------------- */

:root {
  /* Primärfarben */
  --esslingen-blue:      #014e66;
  --esslingen-red:       #e40146;
  --esslingen-green:     #01a48b;
  --esslingen-cyan:      #80cef5;

  /* Flächenfarben */
  --bg-light-1:          #e1ebf1;
  --bg-light-2:          #f0f5f8;
  --deep-blue:           #002733;

  /* Themenfarben */
  --theme-politics:      #e95062;
  --theme-building:      #018cce;
  --theme-mobility:      #6ca348;
  --theme-life-learning: #eb7221;
  --theme-leisure:       #ffbf2e;

  /* Typografie */
  --font-headline:       'Roboto Slab', serif;
  --font-body:           'Source Sans Pro', sans-serif;
  --line-height-base:    1.5;
  --text-color:          #000000;
  --link-color:          var(--esslingen-red);

  /* Abstände */
  --space-xs:            0.25rem;
  --space-sm:            0.5rem;
  --space-md:            1rem;
  --space-lg:            2rem;
  --space-xl:            3rem;
}

/* ----------------------------------------------------------
   3. Global Reset & Grundlayout
   ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: #fff;
}

body {
  margin: 0;
  padding: var(--space-lg);
}

/* ----------------------------------------------------------
   4. Typografie
   ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  color: var(--esslingen-blue);
  margin-top: 0;
  margin-bottom: var(--space-md);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem;  }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem;  }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem;   }

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

ul, ol {
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

/* ----------------------------------------------------------
   5. Links
   ---------------------------------------------------------- */

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   6. Buttons – Standard
   ---------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--esslingen-blue);
  color: #fff;
}

.btn-secondary {
  background-color: var(--esslingen-red);
  color: #fff;
}

/* ----------------------------------------------------------
   6b. Buttons – Statistik-Kacheln (custom-button)
   ---------------------------------------------------------- */

.custom-button {
  display: inline-block;
  width: 220px;
  font-size: 18px;
  font-family: 'Source Sans Pro', sans-serif;
  color: #014e66;
  padding: 12px 20px;
  margin: 12px 12px 24px 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

/* Farbvarianten für alle Themen-Buttons */

/* Bereits vorhandene */
.btn-einwohnende { background-color: #e1ebf1; }
.btn-haushalte  { background-color: rgba(228, 1, 70, 0.5); }
.btn-migration  { background-color: rgba(143, 195, 109, 0.5); }
.btn-soziales   { background-color: rgba(243, 148, 84, 0.5); }

/* Ergänzte Buttons */
.btn-baut {
  background-color: var(--theme-building); /* Blau */
  color: #ffffff;
}

.btn-unternehmen {
  background-color: var(--esslingen-cyan); /* Cyan */
  color: #000000;
}

.btn-tourismus {
  background-color: var(--theme-leisure); /* Gelb */
  color: #000000;
}

.btn-kfz {
  background-color: var(--esslingen-green); /* Grün */
  color: #ffffff;
}

.btn-unfaelle {
  background-color: var(--esslingen-red); /* Rot */
  color: #ffffff;
}


.custom-button:hover {
  background-color: #d0dce4;
}

/* ----------------------------------------------------------
   7. Tabellen
   ---------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}

th, td {
  padding: var(--space-sm);
  border: 1px solid #ccc;
}

.table-striped tr:nth-child(even) {
  background-color: var(--bg-light-1);
}

/* ----------------------------------------------------------
   8. Layout Utilities
   ---------------------------------------------------------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-sm) * -1);
  margin-right: calc(var(--space-sm) * -1);
}

.col {
  flex: 1 1 0;
  padding: var(--space-sm);
}

/* ----------------------------------------------------------
   9. Themen-Sektionen
   ---------------------------------------------------------- */

.section-politics      { background-color: var(--theme-politics);      color: #fff; }
.section-building      { background-color: var(--theme-building);      color: #fff; }
.section-mobility      { background-color: var(--theme-mobility);      color: #fff; }
.section-life-learning { background-color: var(--theme-life-learning); color: #fff; }
.section-leisure       { background-color: var(--theme-leisure);       color: #000; }

/* ----------------------------------------------------------
   10. Logo-Container
   ---------------------------------------------------------- */

.logo {
  display: inline-block;
  background-color: #fff;
  padding: var(--space-md);
}

.logo img {
  max-height: 4rem;
  width: auto;
  display: block;
}

/* ----------------------------------------------------------
   11. Utility-Klassen
   ---------------------------------------------------------- */

.text-center { text-align: center; }
.mt-0        { margin-top: 0; }
.mb-0        { margin-bottom: 0; }
.p-0         { padding: 0; }
.hidden      { display: none !important; }

/* ----------------------------------------------------------
   12. Statistikmonitor – Header
   ---------------------------------------------------------- */

.header-bar {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 2px solid var(--esslingen-blue);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-family: var(--font-headline);
  font-size: 1.8rem;
  color: var(--esslingen-blue);
}

.header-link a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--esslingen-red);
}

.header-link a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   12b. Intro-Box
   ---------------------------------------------------------- */

.intro-box {
  background-color: #ffffff;
  padding: 2rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.intro-text h2 {
  margin-top: 0;
  font-size: 2rem;
  color: var(--esslingen-blue);
}

.intro-logo img {
  width: 200px;
  height: auto;
}

/* ----------------------------------------------------------
   12c. Plot-Bereich
   ---------------------------------------------------------- */

.plot-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.plot-col {
  flex: 1;
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

@media (max-width: 900px) {
  .plot-row {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------
   12d. Button-Grid
   ---------------------------------------------------------- */

.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.button-grid .custom-button {
  flex: 1 1 calc(33% - 1rem);
  min-width: 200px;
}

@media (max-width: 700px) {
  .button-grid .custom-button {
    flex: 1 1 100%;
  }
}

/* ----------------------------------------------------------
   12e. Tabset-Design
   ---------------------------------------------------------- */

.nav-tabs {
  border-bottom: 2px solid var(--esslingen-blue);
  margin-bottom: 1rem;
}

.nav-tabs > li > a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--esslingen-blue);
  padding: 0.6rem 1rem;
}

.nav-tabs > li.active > a {
  background-color: var(--bg-light-2);
  border: 1px solid var(--esslingen-blue);
  border-bottom-color: transparent;
  font-weight: bold;
}

/* ----------------------------------------------------------
   12f. Footer
   ---------------------------------------------------------- */

.footer-buttons {
  margin-top: 3rem;
  display: flex;
  gap: 1rem;
}

.footer-btn {
  padding: 0.8rem 1.4rem;
  background-color: var(--esslingen-blue);
  color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-body);
}

.footer-btn:hover {
  background-color: var(--deep-blue);
}


/* ----------------------------------------------------------
   Esslingen Valueboxes 
   ---------------------------------------------------------- */

/* Bootstrap-Hintergrund neutralisieren */
.card.valuebox {
  background-color: transparent !important;
}

/* Blau */
.card.valuebox.blue-box {
  background-color: var(--esslingen-blue) !important;
}
.card.valuebox.blue-box * {
  color: #ffffff !important;
}

/* Rot */
.card.valuebox.red-box {
  background-color: var(--esslingen-red) !important;
}
.card.valuebox.red-box * {
  color: #ffffff !important;
}

/* Grün */
.card.valuebox.green-box {
  background-color: var(--esslingen-green) !important;
}
.card.valuebox.green-box * {
  color: #ffffff !important;
}

/* Cyan */
.card.valuebox.cyan-box {
  background-color: var(--esslingen-cyan) !important;
}
.card.valuebox.cyan-box * {
  color: #002733 !important;
}

/* ----------------------------------------------------------
   Downloadlink
   ---------------------------------------------------------- */


.download-link {
  display: inline-block;
  padding: 12px 18px;
  background-color: #014e66;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
}

.download-link:hover {
  background-color: #e1ebf1;
}


/* ----------------------------------------------------------
   Glossar – Layout, Cards, Tabs, Sticky Navigation
   ---------------------------------------------------------- */

/* --- Navigation (Tabs) --- */
.category-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;

  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cat-btn {
  border: none;
  background: #e9ecef;
  padding: 0.5rem 1rem;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: #014e66;
  transition: background 0.2s ease;
}

.cat-btn:hover {
  background: #d8dee2;
}

.cat-btn.active {
  background: #005a9c;
  color: #ffffff;
}

/* --- Glossar-Wrapper --- */
#Glossar .glossar-wrapper {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

/* --- Glossar-Cards --- */
.glossar-card {
  width: 100%;
  margin-bottom: 1.2rem;
  padding: 1rem 1.2rem;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-left: 4px solid #005a9c10; /* dezenter Farbakzent */
}

.glossar-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: #014e66;
}

.glossar-definition {
  margin-bottom: 0.8rem;
  line-height: 1.45;
}

/* --- Meta-Box --- */
.glossar-meta-box {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #444;
}

.glossar-meta {
  margin-bottom: 0.2rem;
}