/* =========================================================
   ANNO 1701 – INDIVIDUELLER STIL
   Ergänzt das globale style.css mit Gold-Blau-Thema
   ========================================================= */

:root {
  /* etwas kräftigeres, warmes Gold */
  --color-accent: #e4c06a;
  --color-panel: rgba(255, 250, 232, 0.42);
  --color-panel-hover: rgba(255, 250, 232, 0.96);
  --color-border: rgba(232, 196, 122, 0.8);
  --color-line: rgba(232, 196, 122, 0.45);
  --color-text: #15100b;
}

/* Hintergrundbild */
.background {
  background-image: url("../Bilder/Hintergrund/Anno 1701.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Farbtonüberlagerung für Stimmung – oben kühler Fels/Sky, unten warmes Gold */
.background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(26, 58, 110, 0.30),
    rgba(238, 200, 120, 0.18)
  );
  backdrop-filter: brightness(0.98) saturate(1.05);
  z-index: 0;
}

/* Scrollbereich – leichtes Blau wie Wasser/Schatten */
.scroll-content {
  background: rgba(6, 24, 54, 0.35);
  box-shadow: inset 0 0 30px rgba(8, 18, 40, 0.55);
}

/* Header + Back-Button */
.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  margin: 12px auto;
  background: rgba(255, 250, 232, 0.45);
  border-radius: 12px;
  backdrop-filter: blur(3px);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 0 8px rgba(232, 196, 122, 0.7);
}

/* Buttons – Zurück & Zurücksetzen sehen gleich aus */
.btn,
.app-header .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: bold;
  color: #3b2a08;
  text-decoration: none;
  border: 1px solid rgba(120, 90, 26, 0.9);
  background: linear-gradient(180deg, #fff5d8, #e9c572);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Hover-Effekt für beide Buttons */
.btn:hover,
.app-header .back-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 12px rgba(255, 240, 180, 0.95);
  transform: translateY(-1px);
}

/* Nur Positionierung für den Back-Button */
.app-header .back-btn {
  position: absolute;
  left: 12px;
}

/* Panels mit leichtem Goldschimmer */
.panel {
  background: rgba(255, 250, 232, 0.45);
  border: 1px solid rgba(232, 196, 122, 0.65);
  box-shadow: 0 0 10px rgba(232, 196, 122, 0.45);
}

.panel:hover {
  box-shadow: 0 0 14px rgba(255, 240, 200, 0.85);
}

/* === Produktionsketten modernisiert === */
#annoproduktionsketten {
  text-align: center;
  margin: 0 auto;
  max-width: 1800px;
  background: rgba(255, 250, 232, 0.38);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0 8px rgba(232, 196, 122, 0.5);
}

#annoproduktionsketten img {
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(232, 196, 122, 0.55);
}

.section-title {
  margin-top: 40px;
  text-align: center;
}

#annoproduktionsketten table.panel {
  background: rgba(255, 250, 232, 0.42);
  border: 1px solid rgba(232, 196, 122, 0.65);
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px;
  box-shadow: 0 0 10px rgba(232, 196, 122, 0.5);
  backdrop-filter: blur(2px);
}

#annoproduktionsketten table.panel:hover {
  transform: scale(1.01);
  transition: 0.2s ease;
  box-shadow: 0 0 15px rgba(255, 240, 180, 0.8);
}

.icon70 {
  width: 70px;
  height: 70px;
}

.imgB {
  width: 130px;
  height: auto;
}