/* ============================================================================
   COFFEE FESTIVAL EUROPE — Zahlen, Diagramme, Kennzahlen
   ----------------------------------------------------------------------------
   Ein Baukasten für die Unterseiten. Alles hier ist statisches SVG und CSS —
   keine Diagrammbibliothek, kein Nachladen, kein Layoutsprung. Die Farben sind
   nicht nach Gefühl gewählt: die vier Stadtfarben sind durch den Farbvalidator
   gelaufen und bestehen auf dem dunklen Untergrund der Seite Helligkeitsband,
   Sättigungsboden, Trennung bei Farbfehlsichtigkeit und Kontrast.

   Geordnete Größen — Altersgruppen, Jahre — bekommen keine bunte Reihe, sondern
   einen einfarbigen Verlauf. Bunt ist für Dinge, die nebeneinander stehen, nicht
   für Dinge, die aufeinander folgen.
   ========================================================================= */

:root{
  /* die vier Städte, in fester Reihenfolge — nie durchgetauscht */
  --c-ist:#E4581F;   /* İstanbul  */
  --c-ank:#12A79E;   /* Ankara    */
  --c-izm:#B8861A;   /* İzmir     */
  --c-ant:#7E6CDE;   /* Antalya   */
  /* einfarbiger Verlauf für geordnete Größen, hell → dunkel */
  --s-1:#F6C89A; --s-2:#EFA269; --s-3:#E4794099; --s-4:#E4581F;
  --s-5:#B8431699; --s-6:#8A3311;
  --grid:rgba(244,238,228,.12);
  --ink-2nd:rgba(244,238,228,.62);
  /* Dritte Textstufe auf dunklem Grund. Bei .40 ergibt Elfenbein auf Ink
     einen Kontrast von 3,40 — gemessen an der Quellenzeile unter den
     Diagrammen (dortmund.html: 3,48). Ab .50 wird der Richtwert 4,5
     erreicht; .52 laesst Luft fuer die leicht aufgehellten Kartenflaechen. */
  --ink-3rd:rgba(244,238,228,.52);
}

/* ---------- Kennzahlen ---------------------------------------------------- */
.kpis{display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:clamp(20px,3vw,38px)}
.kpi{position:relative;padding:clamp(18px,2vw,26px);border-radius:14px;
  background:rgba(244,238,228,.045);border:1px solid rgba(244,238,228,.10);
  display:flex;flex-direction:column;gap:.35rem;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember)}
.kpi__n{font-family:var(--f-display);font-weight:700;font-stretch:106%;line-height:.92;
  font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.02em;color:var(--ivory);
  font-variant-numeric:tabular-nums}
.kpi__u{font-size:.5em;margin-left:.12em;color:var(--ink-2nd)}
.kpi__t{font-size:clamp(.86rem,1.1vw,1rem);color:var(--ivory);font-weight:500}
.kpi__b{font-size:.8rem;line-height:1.45;color:var(--ink-2nd)}
.section--light .kpi,.psec--light .kpi{background:rgba(11,8,6,.04);border-color:rgba(11,8,6,.12)}
.section--light .kpi__n,.psec--light .kpi__n{color:var(--ink)}
.section--light .kpi__t,.psec--light .kpi__t{color:var(--ink)}
.section--light .kpi__b,.psec--light .kpi__b{color:var(--muted-2)}

/* ---------- Abbildung ----------------------------------------------------- */
.fig{margin-top:clamp(24px,3.4vw,44px);padding:clamp(18px,2.2vw,30px);border-radius:16px;
  background:rgba(244,238,228,.045);border:1px solid rgba(244,238,228,.10)}
.fig__h{font-family:var(--f-display);font-weight:600;font-stretch:104%;
  font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--ivory);margin:0}
.fig__s{margin:.45rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-2nd);max-width:62ch}
.fig__c{margin-top:clamp(16px,2vw,26px);overflow-x:auto}
.fig__c svg{display:block;width:100%;height:auto;overflow:visible}
.fig__src{margin:1rem 0 0;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3rd)}
.fig details{margin-top:.8rem}
.fig summary{cursor:pointer;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2nd);padding:.3rem 0}
.fig summary:hover{color:var(--ember)}
.fig table{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.84rem}
.fig th,.fig td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--grid);
  color:var(--ink-2nd)}
.fig th{color:var(--ivory);font-weight:600}
.fig td:last-child,.fig th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Legende ------------------------------------------------------- */
.leg{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1rem}
.leg span{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--ink-2nd)}
.leg i{width:10px;height:10px;border-radius:3px;flex:none}

/* ---------- Marken im SVG ------------------------------------------------- */
.fig .bar{transition:opacity .18s ease}
.fig__c:hover .bar{opacity:.55}
.fig__c .bar:hover{opacity:1}
.fig .axis{stroke:var(--grid);stroke-width:1}
.fig .tick{fill:var(--ink-3rd);font-size:11px;font-family:var(--f-mono,monospace)}
.fig .lbl{fill:var(--ink-2nd);font-size:12px}
.fig .val{fill:var(--ivory);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.fig .val--in{fill:var(--ink)}

/* ---------- Zeitstrahl ---------------------------------------------------- */
.tl{margin-top:clamp(24px,3.4vw,44px);position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--ember),rgba(226,85,30,.15))}
.tl__i{position:relative;padding:0 0 clamp(20px,2.6vw,34px)}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{content:"";position:absolute;left:-24px;top:.45rem;width:9px;height:9px;
  border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px rgba(226,85,30,.16)}
.tl__y{font-family:var(--f-display);font-weight:700;font-stretch:106%;
  font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--ivory);line-height:1}
.tl__c{margin:.15rem 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ember)}
.tl__b{margin:.5rem 0 0;font-size:.94rem;line-height:1.6;color:var(--ink-2nd);max-width:58ch}

/* ---------- Bewegtbild in Sektionen --------------------------------------- */
.mfig{margin-top:clamp(24px,3.4vw,44px);border-radius:16px;overflow:hidden;position:relative;
  background:rgba(244,238,228,.05)}
.mfig video,.mfig img{display:block;width:100%;height:auto}
.mfig__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,2vw,22px);
  background:linear-gradient(0deg,rgba(11,8,6,.82),rgba(11,8,6,0));
  font-size:.85rem;color:var(--ivory)}
.mgrid{display:grid;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(24px,3vw,40px)}
.mgrid figure{margin:0;border-radius:14px;overflow:hidden;background:rgba(244,238,228,.05)}
.mgrid img,.mgrid video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.mgrid figcaption{padding:.7rem .9rem;font-size:.8rem;color:var(--ink-2nd)}

@media (prefers-reduced-motion:reduce){
  .mfig video,.mgrid video{display:none}
}

/* ---------------------------------------------------------------------------
   Bewegung
   ---------------------------------------------------------------------------
   Die Diagramme bauen sich auf, wenn sie ins Bild kommen — die Balken wachsen
   aus der Achse heraus, die Werte kommen hinterher. Der Sinn ist nicht Zierde:
   ein Balken, der wächst, sagt „das ist eine Größe", bevor man die Zahl liest.

   Alles hier steht in einer Abfrage nach reduzierter Bewegung. Wer sie im
   Betriebssystem abgestellt hat, bekommt das fertige Bild ohne einen Frame
   Animation — nicht eine schnellere, sondern gar keine.                     */
@media (prefers-reduced-motion: no-preference){
  .fig .bar{
    transform-box:fill-box; transform-origin:left center; transform:scaleX(.004);
    transition:transform .95s cubic-bezier(.22,.72,.2,1);
    transition-delay:calc(var(--i,0) * 70ms)}
  .fig .bar--v{transform-origin:center bottom; transform:scaleY(.004);
    transition-property:transform}
  .fig.is-in .bar{transform:scaleX(1)}
  .fig.is-in .bar--v{transform:scaleY(1)}
  .fig .val{opacity:0;transform:translateX(-8px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.72,.2,1);
    transition-delay:calc(var(--i,0) * 70ms + 420ms)}
  .fig.is-in .val{opacity:1;transform:none}
  .fig .lbl{opacity:0;transform:translateX(-6px);
    transition:opacity .5s ease,transform .5s ease;
    transition-delay:calc(var(--i,0) * 70ms + 120ms)}
  .fig.is-in .lbl{opacity:1;transform:none}

  .kpi{opacity:0;transform:translateY(14px);
    transition:opacity .6s ease,transform .7s cubic-bezier(.22,.72,.2,1);
    transition-delay:calc(var(--i,0) * 80ms)}
  .kpis.is-in .kpi{opacity:1;transform:none}
  .kpi::before{transform:scaleY(0);transform-origin:top;
    transition:transform .7s cubic-bezier(.22,.72,.2,1);
    transition-delay:calc(var(--i,0) * 80ms + 180ms)}
  .kpis.is-in .kpi::before{transform:scaleY(1)}

  .tl__i{opacity:0;transform:translateY(16px);
    transition:opacity .6s ease,transform .7s cubic-bezier(.22,.72,.2,1);
    transition-delay:calc(var(--i,0) * 110ms)}
  .tl.is-in .tl__i{opacity:1;transform:none}
  .tl::before{transform:scaleY(0);transform-origin:top;
    transition:transform 1.1s cubic-bezier(.22,.72,.2,1)}
  .tl.is-in::before{transform:scaleY(1)}

  .mgrid figure{opacity:0;transform:translateY(16px) scale(.985);
    transition:opacity .7s ease,transform .8s cubic-bezier(.22,.72,.2,1);
    transition-delay:calc(var(--i,0) * 90ms)}
  .mgrid.is-in figure{opacity:1;transform:none}
}

/* ---------- Bewegtbild, das erst läuft, wenn man es sieht ----------------- */
.mfig{position:relative}
.mfig__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:opacity .6s ease;pointer-events:none}
.mfig.is-playing .mfig__poster{opacity:0}
.mfig__ctl{position:absolute;right:clamp(12px,1.6vw,20px);top:clamp(12px,1.6vw,20px);
  z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,238,228,.34);
  background:rgba(11,8,6,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--ivory);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .2s ease,background .2s ease}
.mfig__ctl:hover{border-color:var(--ember);background:rgba(11,8,6,.75)}
.mfig__ctl svg{width:13px;height:13px;fill:currentColor}
.mfig__ctl .i-pause{display:none}
.mfig.is-playing .mfig__ctl .i-play{display:none}
.mfig.is-playing .mfig__ctl .i-pause{display:block}

/* ---------- Diagramme auf hellem Grund ------------------------------------
   Die Skalen sind auf dunklem Grund geprüft; steht eine Figur trotzdem einmal
   auf Elfenbein, muss wenigstens die Beschriftung lesbar bleiben.          */
.section--light .fig,.psec--light .fig{background:rgba(11,8,6,.03);
  border-color:rgba(11,8,6,.12)}
.section--light .fig__h,.psec--light .fig__h{color:var(--ink)}
.section--light .fig__s,.psec--light .fig__s{color:var(--muted-2)}
.section--light .fig__src,.psec--light .fig__src{color:var(--muted-2);opacity:.8}
.section--light .fig .lbl,.psec--light .fig .lbl{fill:var(--muted-2)}
.section--light .fig .val,.psec--light .fig .val{fill:var(--ink)}
.section--light .fig .tick,.psec--light .fig .tick{fill:var(--muted-2)}
.section--light .fig .axis,.psec--light .fig .axis{stroke:rgba(11,8,6,.16)}
.section--light .fig th,.psec--light .fig th{color:var(--ink)}
.section--light .fig td,.psec--light .fig td{color:var(--muted-2);
  border-bottom-color:rgba(11,8,6,.1)}
.section--light .fig summary,.psec--light .fig summary{color:var(--muted-2)}