/*
Theatergruppe Dellmensingen
creation Date: 2026-09-22
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ===========================================================================
   FARBEN
   Fuenf Markenfarben plus drei neutrale Grautoene fuer Linien, Formularfelder
   und abgesetzte Flaechen.

   Je Farbe gibt es dasselbe Muster:
     .x_bg         Hintergrund
     .x            Textfarbe
     .x_highlight  faerbt Headlines und Hervorhebungen im Abschnitt
     .x_links      faerbt die Links im Abschnitt
     .x_hover      faerbt Text und Rahmen beim Ueberfahren
     .x_border     Rahmenfarbe
     .x_important  ueberschreibt alles darunter (Notnagel, sparsam einsetzen)

   Die Werte stehen zusaetzlich als Variablen bereit, damit Module und
   Abschnitte sie nutzen koennen, ohne den Hexwert zu wiederholen.
   =========================================================================== */
:root{
	--color-yel: #ffb609;
	--color-pink: #ff2a70;
	--color-cyan: #1ad5dc;
	--color-black: #000000;
	--color-white: #ffffff;

	--color-g: #c3c2c2;
	--color-lg: #f4f4f4;
	--color-dg: #363636;
}


/* ===== WEISS ===== */
.white_bg,
.white_bg_onHover:hover,
body, html{
	background-color: var(--color-white);
}
.white,
.white_highlight b,
.white_highlight strong,
.white_highlight h1,
.white_highlight h2,
.white_highlight h3,
.white_highlight h4,
.white_highlight h5,
.white_highlight h6,
.white_links a,
.white_hover:hover{
	color: var(--color-white);
}
.white_important *{
	color: var(--color-white) !important;
}
.white_border,
.white_hover:hover{
	border-color: var(--color-white);
}
.white_trans{
	background: rgba(255, 255, 255, 0.9);
}
.white_trans:hover{
	background: rgba(255, 255, 255, 0.97);
}


/* ===== TRANSPARENT ===== */
.transparent{
	background-color: transparent;
}


/* ===== GELB #ffb609 ===== */
.yel_bg,
.yel_bg_onHover:hover{
	background-color: var(--color-yel);
}
.yel,
.yel_highlight b,
.yel_highlight strong,
.yel_highlight h1,
.yel_highlight h2,
.yel_highlight h3,
.yel_highlight h4,
.yel_highlight h5,
.yel_highlight h6,
.yel_links a,
.yel_hover:hover{
	color: var(--color-yel);
}
.yel_important *{
	color: var(--color-yel) !important;
}
.yel_border,
.yel_hover:hover,
.contentbutton.bordered.yel_border{
	border-color: var(--color-yel);
}
.yel_trans{
	background: rgba(255, 182, 9, 0.9);
}


/* ===== PINK #ff2a70 ===== */
.pink_bg,
.pink_bg_onHover:hover{
	background-color: var(--color-pink);
}
.pink,
.pink_highlight b,
.pink_highlight strong,
.pink_highlight h1,
.pink_highlight h2,
.pink_highlight h3,
.pink_highlight h4,
.pink_highlight h5,
.pink_highlight h6,
.pink_links a,
.pink_hover:hover{
	color: var(--color-pink);
}
.pink_important *{
	color: var(--color-pink) !important;
}
.pink_border,
.pink_hover:hover,
.contentbutton.bordered.pink_border{
	border-color: var(--color-pink);
}
.pink_trans{
	background: rgba(255, 42, 112, 0.9);
}


/* ===== TUERKIS #1ad5dc ===== */
.cyan_bg,
.cyan_bg_onHover:hover{
	background-color: var(--color-cyan);
}
.cyan,
.cyan_highlight b,
.cyan_highlight strong,
.cyan_highlight h1,
.cyan_highlight h2,
.cyan_highlight h3,
.cyan_highlight h4,
.cyan_highlight h5,
.cyan_highlight h6,
.cyan_links a,
.cyan_hover:hover{
	color: var(--color-cyan);
}
.cyan_important *{
	color: var(--color-cyan) !important;
}
.cyan_border,
.cyan_hover:hover,
.contentbutton.bordered.cyan_border{
	border-color: var(--color-cyan);
}
.cyan_trans{
	background: rgba(26, 213, 220, 0.9);
}


/* ===== SCHWARZ #000000 =====
   Auch die Grundfarbe des Fliesstextes. */
.black_bg,
.black_bg_onHover:hover{
	background-color: var(--color-black);
}
.black,
.black_highlight b,
.black_highlight strong,
.black_highlight h1,
.black_highlight h2,
.black_highlight h3,
.black_highlight h4,
.black_highlight h5,
.black_highlight h6,
.black_links a,
.black_hover:hover,
body, html{
	color: var(--color-black);
}
.black_important *{
	color: var(--color-black) !important;
}
.black_border,
.black_hover:hover,
.contentbutton.bordered.black_border{
	border-color: var(--color-black);
}
.black_trans{
	background-color: rgba(0, 0, 0, 0.5);
}


/* ===== NEUTRALE GRAUTOENE =====
   Keine Markenfarben - fuer Trennlinien, Formularfelder und abgesetzte
   Flaechen, wo Schwarz zu hart und Weiss zu wenig waere. */

/* mittelgrau */
.g_bg{
	background-color: var(--color-g);
}
.g,
.g_links a{
	color: var(--color-g);
}
.g_border{
	border-color: var(--color-g);
}

/* hellgrau */
.lg_bg{
	background-color: var(--color-lg);
}
.lg,
.lg_links a{
	color: var(--color-lg);
}
.lg_border{
	border-color: var(--color-lg);
}

/* dunkelgrau */
.dg_bg{
	background-color: var(--color-dg);
}
.dg,
.dg_links a,
.dg_hover:hover{
	color: var(--color-dg);
}
.dg_border{
	border-color: var(--color-dg);
}


/* ===== ABDUNKLUNG ueber Bildern =====
   Liegt als eigene Ebene ueber einem Motiv, damit Text darauf lesbar bleibt. */
.overlay_mask.light{
	background-color: rgba(0, 0, 0, 0.2);
}
.overlay_mask{
	background-color: rgba(0, 0, 0, 0.4);
}
.overlay_mask.middark{
	background-color: rgba(0, 0, 0, 0.6);
}
.overlay_mask.dark{
	background-color: rgba(0, 0, 0, 0.8);
}
.overlay_mask.light.darkenOnHover{
	background-color: rgba(0, 0, 0, 0.4);
}