/* ============================================================
   Atelier Obskur, Gestaltungs-Token
   Alle Farben, Schriften, Abstaende und Zeiten an einer Stelle.
   Wird als erstes geladen, danach ao.css.
   ============================================================ */

:root {
  /* --- Flaechen --------------------------------------------------- */
  --ao-tinte:        #090608;   /* Grundflaeche, fast schwarz          */
  --ao-tiefer:       #050304;   /* Abgesetzte Flaeche, noch dunkler    */
  --ao-samt:         #2A0A18;   /* Warmer Tiefton unter Bildern        */
  --ao-ochsenblut:   #7A1024;   /* Vorhang, Markierungen               */

  /* --- Schrift ----------------------------------------------------- */
  --ao-pergament:    #EDE1CB;   /* Fliesstext                          */
  --ao-nebel:        rgba(237, 225, 203, .62);  /* Nebentext           */
  --ao-schleier:     rgba(237, 225, 203, .28);  /* Sehr zurueckgenommen */

  /* --- Gold, die Hausfarbe ----------------------------------------- */
  --ao-gold:         #C9A227;
  --ao-gold-hell:    #E8CC6A;
  --ao-gold-blass:   #FFF4DC;

  /* --- Pink, Reihe Naschen ----------------------------------------- */
  --ao-pink:         #D63F86;
  --ao-pink-glanz:   #FFC2DE;
  --ao-pink-tief:    #7A1742;
  --ao-pink-dunkel:  #8C1D4E;

  /* --- Eis, Floor Stellarum ---------------------------------------- */
  --ao-eis:          #9CC4FF;
  --ao-eis-hell:     #DDE9FF;

  /* --- Flamme, Partikel und Feuer ---------------------------------- */
  --ao-flamme:       #FF8A3D;
  --ao-flamme-hell:  #FFD27A;
  --ao-glut:         #FF9A4D;
  --ao-funke:        #FFC266;

  /* --- Bonbon, Reihe Naschen --------------------------------------- */
  --ao-bonbon:       #F7A8D0;
  --ao-bonbon-hell:  #FFE3F1;

  /* --- Rubin, Reihe After Eden ------------------------------------- */
  --ao-rubin:        #D3243F;
  --ao-rubin-hell:   #FF7A8C;

  /* --- Limette, Reihe Fruehsport ---------------------------------- */
  --ao-limette:      #C4E35A;
  --ao-limette-hell: #EAF7B8;

  /* --- Zeichen vor Aufzaehlungen, je Reihe getauscht --------------- */
  --ao-zeichen-bild: url("../zeichen/funke.svg");

  /* --- Akzent je Reihe ---------------------------------------------
     Standard ist Gold. Eine Eventreihe setzt ihren eigenen Akzent ueber
     eine Klasse am aeussersten Container, siehe weiter unten.          */
  --ao-akzent:       var(--ao-gold);
  --ao-akzent-hell:  var(--ao-gold-hell);
  --ao-akzent-tief:  var(--ao-ochsenblut);

  /* --- Linien ------------------------------------------------------- */
  --ao-rand:         rgba(201, 162, 39, .22);
  --ao-rand-zart:    rgba(201, 162, 39, .12);

  /* --- Schrift ------------------------------------------------------
     Deckhouse ist die Hausschrift und wird lokal eingebunden, siehe
     inc/ao-fonts.php. Spectral und Bodoni Moda kommen von Google.      */
  --ao-schrift-haus:    "Deckhouse", "Bodoni Moda", Georgia, serif;
  --ao-schrift-display: "Bodoni Moda", "Deckhouse", Georgia, serif;
  --ao-schrift-text:    "Spectral", Georgia, serif;
  --ao-schrift-daten:   "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- Masse --------------------------------------------------------- */
  --ao-gasse:        clamp(1.25rem, 1rem + 1.4vw, 2.5rem); /* Seitenrand, mobil gut 1,3rem */
  --ao-bogen:        1440px;   /* Box auf dem Desktop, Rand inklusive    */
  /* Abstand zum Fensterrand fuer Elemente ueber die volle Breite
     (Buehne, Ticketleiste, Zitat). Richtet sie an der 1440er Box aus. */
  --ao-seite:        max(var(--ao-gasse), calc((100% - var(--ao-bogen)) / 2 + var(--ao-gasse)));
  --ao-schmal:       38rem;    /* Lesebreite fuer Fliesstext             */

  /* --- Bewegung ------------------------------------------------------ */
  --ao-hart:         cubic-bezier(.7, 0, .2, 1);   /* Schnitt, Vorhang   */
  --ao-weich:        cubic-bezier(.2, .7, .2, 1);  /* Einblendungen      */
  --ao-schnell:      .3s;
  --ao-mittel:       .62s;
  --ao-lang:         1.2s;

  /* --- Ebenen -------------------------------------------------------- */
  --ao-z-korn:       58;
  --ao-z-fx:         55;
  --ao-z-warp:       54;
  --ao-z-laser:      53;
  --ao-z-leiste:     50;
  --ao-z-kopf:       70;
  --ao-z-intro:      90;
}

/* ============================================================
   Akzent je Eventreihe
   Am aeussersten Container setzen, zum Beispiel am Elementor-Container
   der Seite: Klasse "ao-reihe--naschen".
   ============================================================ */

.ao-reihe--kabinett {
  --ao-akzent:      var(--ao-gold);
  --ao-akzent-hell: var(--ao-gold-hell);
  --ao-akzent-tief: var(--ao-ochsenblut);
}

.ao-reihe--naschen {
  --ao-akzent:      var(--ao-pink);
  --ao-akzent-hell: var(--ao-pink-glanz);
  --ao-akzent-tief: var(--ao-pink-tief);
}

.ao-reihe--rummelfest {
  --ao-akzent:      var(--ao-flamme);
  --ao-akzent-hell: var(--ao-flamme-hell);
  --ao-akzent-tief: var(--ao-ochsenblut);
}

.ao-reihe--openair {
  --ao-akzent:      var(--ao-eis);
  --ao-akzent-hell: var(--ao-eis-hell);
  --ao-akzent-tief: #1C2A52;
}


/* ============================================================
   Farbe und Zeichen je Reihe
   Setzt das Plugin Atelier Obskur Veranstaltungen automatisch an
   den body, je nach Einstellung der Reihe. Von Hand nutzbar an
   jedem Container, zum Beispiel "ao-akzent--bonbon ao-zeichen--bonbon".
   Steht nach den ao-reihe-Klassen und gewinnt daher.
   ============================================================ */

.ao-akzent--gold   { --ao-akzent: var(--ao-gold);   --ao-akzent-hell: var(--ao-gold-hell);   --ao-akzent-tief: var(--ao-ochsenblut); }
.ao-akzent--bonbon { --ao-akzent: var(--ao-bonbon); --ao-akzent-hell: var(--ao-bonbon-hell); --ao-akzent-tief: var(--ao-pink-tief); }
.ao-akzent--pink   { --ao-akzent: var(--ao-pink);   --ao-akzent-hell: var(--ao-pink-glanz);  --ao-akzent-tief: var(--ao-pink-tief); }
.ao-akzent--flamme { --ao-akzent: var(--ao-flamme); --ao-akzent-hell: var(--ao-flamme-hell); --ao-akzent-tief: var(--ao-ochsenblut); }
.ao-akzent--rubin  { --ao-akzent: var(--ao-rubin);  --ao-akzent-hell: var(--ao-rubin-hell);  --ao-akzent-tief: #4A0814; }
.ao-akzent--eis    { --ao-akzent: var(--ao-eis);    --ao-akzent-hell: var(--ao-eis-hell);    --ao-akzent-tief: #1C2A52; }
.ao-akzent--limette { --ao-akzent: var(--ao-limette); --ao-akzent-hell: var(--ao-limette-hell); --ao-akzent-tief: #3A4A12; }

.ao-zeichen--funke  { --ao-zeichen-bild: url("../zeichen/funke.svg"); }
.ao-zeichen--bonbon { --ao-zeichen-bild: url("../zeichen/bonbon.svg"); }
.ao-zeichen--stern  { --ao-zeichen-bild: url("../zeichen/stern.svg"); }
.ao-zeichen--apfel  { --ao-zeichen-bild: url("../zeichen/apfel.svg"); }
.ao-zeichen--herz   { --ao-zeichen-bild: url("../zeichen/herz.svg"); }
.ao-zeichen--mond   { --ao-zeichen-bild: url("../zeichen/mond.svg"); }
.ao-zeichen--auge   { --ao-zeichen-bild: url("../zeichen/auge.svg"); }
.ao-zeichen--ball   { --ao-zeichen-bild: url("../zeichen/ball.svg"); }