/* =========================================================
   Stil — "Israel zur Zeit des Alten Testaments"
   Antik-/Pergament-Look
   ========================================================= */

:root {
  --papier:      #ede1c4;
  --papier-hell: #f4ecd8;
  --land:        #eee0bd;
  --meer:        #ccd2b8;
  --tinte:       #43351f;
  --tinte-hell:  #6b5a3e;
  --linie:       #8a7355;
  --akzent:      #8a3b2a;
  --gut:         #5f7a45;
  --teils:       #c09a3e;
  --boese:       #9e4a35;
  --israel:      #7d8c5c;
  --juda:        #c4923f;
  --serif: "EB Garamond", "Iowan Old Style", "Palatino", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
}

body {
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,250,235,.55), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(120,90,50,.14), transparent 55%);
  min-height: 100vh;
}

/* ---------- Kopf ---------- */
header.seite-kopf {
  text-align: center;
  padding: 1.6rem 1rem 0.6rem;
}
.titel-zier { letter-spacing: .35em; font-size: .8rem; color: var(--tinte-hell); text-transform: uppercase; }
h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.9rem);
  font-weight: 600;
  letter-spacing: .06em;
  font-variant: small-caps;
}
.untertitel { font-style: italic; color: var(--tinte-hell); font-size: clamp(.95rem, 2vw, 1.15rem); }
.zierlinie {
  width: min(420px, 70%);
  margin: .7rem auto;
  border: 0;
  border-top: 1px solid var(--linie);
  position: relative;
}
.zierlinie::after {
  content: "❦";
  position: absolute; left: 50%; top: -0.75em;
  transform: translateX(-50%);
  background: var(--papier);
  padding: 0 .6em;
  color: var(--linie);
}

/* ---------- Ansichten-Umschalter ---------- */
.ansichten {
  display: flex; justify-content: center; gap: .5rem;
  flex-wrap: wrap; padding: .4rem 1rem .9rem;
}
.ansichten button {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .05em;
  padding: .45rem 1.1rem;
  background: var(--papier-hell);
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s;
}
.ansichten button:hover { background: #fff8e8; }
.ansichten button.aktiv {
  background: var(--tinte);
  color: var(--papier-hell);
  border-color: var(--tinte);
}

/* ---------- Layout ---------- */
.inhalt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 0 1rem 2.5rem;
  max-width: 1500px;
  margin: 0 auto;
}
.karten-bereich { position: relative; }
.karten-rahmen {
  background: var(--land);
  border: 1.5px solid var(--tinte);
  outline: 4px double var(--linie);
  outline-offset: 4px;
  box-shadow: 0 8px 30px rgba(60,40,15,.25);
  margin: 6px;
}
svg.karte { display: block; width: 100%; height: auto; }

/* Querformat / breite Bildschirme: Karte links, Tafeln rechts */
@media (min-width: 1000px) and (orientation: landscape) {
  .inhalt {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    align-items: start;
  }
  .inhalt.welt-aktiv { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); }
  .karten-bereich { position: sticky; top: 1rem; }
}

/* ---------- Karten-SVG ---------- */
.karte .meer { fill: var(--meer); }
.karte .land { fill: var(--land); stroke: none; }
.karte .kueste { fill: none; stroke: var(--tinte); stroke-width: 2.2; }
.karte .wasserlinie { fill: none; stroke: #5d6b52; }
.karte .see { fill: var(--meer); stroke: var(--tinte); stroke-width: 1.8; }
.karte .fluss { fill: none; stroke: #5d6b52; stroke-width: 2.4; opacity: .85; }
.karte .fluss-hand { stroke-width: 1.8; opacity: .65; }
.karte .gebiet { opacity: .42; }
.karte .gebiet-grenze { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-dasharray: 7 4; opacity: .6; }
.karte .stamm-dezent { fill: none; stroke: var(--tinte); stroke-width: .8; stroke-dasharray: 2 4; opacity: .3; }
.karte .rahmen-linie { fill: none; stroke: var(--tinte); stroke-width: 3; }
.karte .korn { }

.karte .berg-glyph { fill: none; stroke: var(--tinte-hell); stroke-width: 1.8; }
.karte .lbl-berg { font-size: 13px; fill: var(--tinte-hell); font-style: italic; }

.karte .ort-sym { fill: var(--tinte); stroke: none; }
.karte .ort-heiligtum .ort-sym { fill: var(--akzent); }
.karte .ort-sym-aussen { fill: none; stroke: var(--tinte); stroke-width: 2; }
.karte .lbl-ort {
  font-size: 16.5px;
  fill: var(--tinte);
  paint-order: stroke;
  stroke: var(--land);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.karte .lbl-hauptstadt { font-size: 19px; font-weight: 600; letter-spacing: .04em; }

.karte .lbl-region {
  fill: var(--tinte-hell);
  paint-order: stroke; stroke: var(--land); stroke-width: 3; stroke-linejoin: round;
}
.karte .lbl-volk { font-size: 24px; letter-spacing: .35em; font-weight: 500; }
.karte .lbl-land { font-size: 20px; letter-spacing: .25em; font-style: italic; }
.karte .lbl-meer { font-size: 22px; letter-spacing: .3em; font-style: italic; fill: #4e5c48; stroke: var(--meer); }
.karte .lbl-gross { font-size: 34px; letter-spacing: .5em; }
.karte .lbl-klein { font-size: 14px; letter-spacing: .12em; }

.karte .lbl-stamm {
  font-size: 23px; letter-spacing: .16em; font-weight: 600;
  fill: var(--tinte); opacity: .66;
  paint-order: stroke; stroke: rgba(238,224,189,.55); stroke-width: 3.5; stroke-linejoin: round;
}
.karte .lbl-reich {
  font-size: 42px; letter-spacing: .45em; font-weight: 600;
  fill: var(--tinte); opacity: .6;
  paint-order: stroke; stroke: rgba(238,224,189,.55); stroke-width: 5; stroke-linejoin: round;
}
.karte .lbl-reich-sub {
  font-size: 15px; letter-spacing: .12em; font-style: italic; fill: var(--tinte-hell);
  paint-order: stroke; stroke: rgba(238,224,189,.7); stroke-width: 4; stroke-linejoin: round;
}

.karte .route-linie {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: .8;
}

.karte .ort { cursor: pointer; }
.karte .ort:hover .ort-sym { fill: var(--akzent); }
.karte .ort:hover .lbl-ort { fill: var(--akzent); }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed;
  z-index: 50;
  max-width: 260px;
  background: #fff9ea;
  border: 1px solid var(--tinte);
  box-shadow: 3px 3px 0 rgba(60,40,15,.25);
  padding: .5rem .7rem;
  font-size: .9rem;
  pointer-events: none;
  display: none;
}
.tooltip b { font-variant: small-caps; letter-spacing: .04em; }

/* ---------- Tafeln ---------- */
.tafeln { display: grid; gap: 1.4rem; }
.tafel {
  background: var(--papier-hell);
  border: 1px solid var(--tinte);
  outline: 3px double var(--linie);
  outline-offset: 3px;
  margin: 4px;
  padding: 1rem 1.1rem 1.2rem;
}
.tafel h2 {
  font-variant: small-caps;
  letter-spacing: .1em;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .35rem;
  margin-bottom: .7rem;
}
.tafel h2 .sub { display: block; font-variant: normal; font-style: italic; font-size: .85rem; color: var(--tinte-hell); letter-spacing: .02em; }
.tafel svg { display: block; width: 100%; height: auto; }

/* Könige-Zeitleiste (SVG) */
.zl-achse { stroke: var(--linie); stroke-width: 1; }
.zl-jahr { font-size: 12.5px; fill: var(--tinte-hell); font-family: var(--serif); }
.zl-balken { stroke: var(--tinte); stroke-width: .6; }
.zl-name { font-size: 13.5px; fill: var(--tinte); font-family: var(--serif); }
.zl-name.kurz { font-size: 12px; }
.zl-leader { stroke: var(--tinte-hell); stroke-width: .7; fill: none; opacity: .7; }
.zl-titel { font-size: 15px; font-weight: 600; letter-spacing: .1em; fill: var(--tinte); font-family: var(--serif); }
.zl-meilenstein { font-size: 12px; font-style: italic; fill: var(--akzent); font-family: var(--serif); }
.zl-meilenstein-linie { stroke: var(--akzent); stroke-width: 1; stroke-dasharray: 3 3; }

/* Legende in Tafeln */
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; justify-content: center; font-size: .88rem; margin-top: .6rem; color: var(--tinte-hell); }
.legende .chip { display: inline-block; width: .8em; height: .8em; margin-right: .35em; border: 1px solid var(--tinte); vertical-align: baseline; }

/* Propheten */
.propheten-gruppen { display: grid; gap: .8rem; }
@media (min-width: 640px) { .propheten-gruppen { grid-template-columns: 1fr 1fr; } }
.propheten-gruppe h3 {
  font-size: 1rem; font-variant: small-caps; letter-spacing: .06em;
  border-bottom: 1px dotted var(--linie); margin-bottom: .3rem;
}
.propheten-gruppe ul { list-style: none; }
.propheten-gruppe li { padding: .12rem 0; font-size: .95rem; }
.propheten-gruppe li b { font-weight: 600; }
.propheten-gruppe li .zeit { color: var(--tinte-hell); font-size: .85rem; }
.propheten-gruppe li .anm { display: block; font-style: italic; color: var(--tinte-hell); font-size: .85rem; }

/* Epochen */
.ep-balken { stroke: var(--tinte); stroke-width: .8; }
.ep-name { font-size: 14px; fill: var(--tinte); font-family: var(--serif); font-weight: 600; }
.ep-detail { font-size: 12px; font-style: italic; fill: var(--tinte-hell); font-family: var(--serif); }
.ep-jahr { font-size: 12px; fill: var(--tinte-hell); font-family: var(--serif); }

/* Karten-Legende */
.karten-legende { margin-top: .2rem; }

/* Fußzeile */
footer {
  text-align: center;
  font-size: .85rem;
  font-style: italic;
  color: var(--tinte-hell);
  padding: 0 1rem 2rem;
}

/* ---------- Welt-Karte (größerer Maßstab → größere Schriften) ---------- */
.karte-welt .land { stroke: var(--tinte); stroke-width: 2.5; }
.karte-welt .fluss { stroke-width: 4; }
.karte-welt .see { stroke-width: 3; }
.karte-welt .rahmen-linie { stroke-width: 6; }
.karte-welt .berg-glyph { stroke-width: 3; }
.karte-welt .lbl-berg { font-size: 30px; }
.karte-welt .lbl-ort { font-size: 36px; stroke-width: 7; }
.karte-welt .lbl-hauptstadt { font-size: 44px; }
.karte-welt .lbl-volk { font-size: 56px; letter-spacing: .35em; }
.karte-welt .lbl-gross { font-size: 78px; letter-spacing: .5em; }
.karte-welt .lbl-land { font-size: 44px; }
.karte-welt .lbl-meer { font-size: 48px; }
.karte-welt .lbl-klein { font-size: 32px; letter-spacing: .18em; }
.karte-welt .lbl-winzig { font-size: 21px; letter-spacing: .1em; }
.karte-welt .ort-sym-aussen { stroke-width: 3; }
.karte-welt .route-linie {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .8;
}
.karte-welt .detail-rahmen {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 3;
  stroke-dasharray: 12 8;
  opacity: .65;
}
.karte-welt .lbl-detail {
  font-size: 28px;
  font-style: italic;
  fill: var(--tinte-hell);
  paint-order: stroke; stroke: var(--land); stroke-width: 5; stroke-linejoin: round;
}

/* Routen-Schalter */
.routen-wahl {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  justify-content: center;
  font-size: .92rem;
  margin-top: .55rem;
}
.routen-wahl label { cursor: pointer; display: inline-flex; align-items: center; gap: .35em; }
.routen-wahl input { accent-color: var(--tinte); }
.routen-wahl .linie {
  display: inline-block; width: 1.6em; height: 0;
  border-top: 3px solid currentColor;
  vertical-align: middle;
}
.routen-wahl .gestrichelt { border-top-style: dashed; }
.routen-wahl .gepunktet { border-top-style: dotted; }

/* Kompass & Maßstab (Welt-Karte) */
.kompass-kreis { fill: none; stroke: var(--tinte); stroke-width: 2.5; opacity: .7; }
.kompass-punkt { fill: var(--tinte); }
.kompass-nadel { fill: var(--tinte); }
.kompass-sued { fill: none; stroke: var(--tinte); stroke-width: 2; }
.kompass-n { font-size: 34px; font-weight: 600; fill: var(--tinte); font-family: var(--serif); }
.massstab-dunkel { fill: var(--tinte); stroke: var(--tinte); stroke-width: 1.5; }
.massstab-hell { fill: var(--papier-hell); stroke: var(--tinte); stroke-width: 1.5; }
.massstab-zahl { font-size: 22px; fill: var(--tinte); font-family: var(--serif); }
.massstab-titel { font-size: 24px; font-style: italic; fill: var(--tinte-hell); font-family: var(--serif); }

/* Ehemalige Küstenlinie (Persischer Golf) */
.karte-welt .alt-kueste {
  fill: none;
  stroke: #4e5c48;
  stroke-width: 4;
  stroke-dasharray: 16 8 3 8;
  stroke-linecap: round;
  opacity: .75;
}
.karte-welt .lbl-alt-kueste {
  font-size: 27px;
  font-style: italic;
  letter-spacing: .1em;
  fill: #4e5c48;
  paint-order: stroke; stroke: var(--land); stroke-width: 5; stroke-linejoin: round;
}
.linie-altkueste {
  display: inline-block; width: 1.6em; height: 0;
  border-top: 3px dashed #4e5c48;
  vertical-align: middle;
}

/* Kursabende-Umschalter */
.ansichten-abende { padding-top: 0; }
.ansichten-abende .abende-titel {
  align-self: center;
  font-style: italic;
  color: var(--tinte-hell);
  font-size: .9rem;
  margin-right: .2rem;
}
.ansichten-abende button { font-size: .85rem; padding: .3rem .8rem; }

/* Propheten als SVG (Folien) */
.pr-titel { font-size: 21px; font-weight: 600; letter-spacing: .06em; fill: var(--tinte); font-family: var(--serif); font-variant: small-caps; }
.pr-name { font-size: 19px; font-weight: 600; fill: var(--tinte); font-family: var(--serif); }
.pr-zeit { font-size: 15px; fill: var(--tinte-hell); font-family: var(--serif); }
.pr-anm { font-size: 15px; font-style: italic; fill: var(--tinte-hell); font-family: var(--serif); }

/* Folien-Legende (wird in die Slide gezeichnet) */
.sl-legende-box { fill: rgba(244,236,216,.94); stroke: var(--tinte); }
.sl-legende-text { fill: var(--tinte); font-family: var(--serif); }
.sl-legende-quelle { fill: var(--tinte-hell); font-family: var(--serif); font-style: italic; }
.sl-hintergrund { fill: var(--papier); }