/* --- --------------------------------------- --- */
/* --- Gute CSS-Generatoren finden sich unter: --- */
/* --- ------ https://www.cssportal.com/ ----- --- */
/* --- --------------------------------------- --- */
body {
  background-image: url("/sites/default/files/inline-images/cw-shine_logo_bg_sw.png");	/* Neudefinition des Hintergrunds aus dem Mahi-Theme. */
}

:root {
  /* ----------------------------------------------------------- */
  /* --- Zur Verwendung kommende Farbtabelle in Hex-Werten   --- */
  /* --- --color-1-hex = Farbe in Volldarstellung            --- */
  /* --- --color-1t = Farbe in halbtransparenter Darstellung --- */
  /* ----------------------------------------------------------- */
  --color-primary: #D3434A;		/* Das ist eine der beiden Hauptfarben aus dem Mahi-Theme. Um nicht die Style-Sheet-Datei von mahi zu ändern, hier neu definiert.  */
  --color-secondary: #F5AF19;	/* Das ist eine der beiden Hauptfarben aus dem Mahi-Theme. Um nicht die Style-Sheet-Datei von mahi zu ändern, hier neu definiert.  */ 
  --color-1-hex: #1F2433;
  --color-1t: rgba(0, 0, 0, 0.5);
  --color-2-hex: #F0F0F0;
  --color-2t: rgba(240, 240, 240, 0.5);
  --color-3-hex: #FFFFFF;
  --color-3t: rgba(255, 255, 255, 0.5);
  --color-4-hex: #424242;
  --color-4t: rgba(66, 66, 66, 0.5);
  --color-5-hex: #C4D4E8;
  --color-5t: rgba(196, 212, 232, 0.5);
  --color-6-hex: #DDE7F3;
  --color-6t: rgba(221, 231, 243, 0.5);
  --color-7-hex: #BF6062;
  --color-7t: rgba(191, 96, 98, 0.5);
  --color-8-hex: #6A6487; /* Blau: #3198DD - rgba(49, 152, 221, 0.5) - Lila: #2D2456 RGB 106, 100, 135 */
  --color-8t: rgba(106, 100, 135, 0.5);
  --color-9-hex: #F12711; /* Alte Farbe: #FF7F7F */
  --color-9t: rgba(255, 127, 127, 0.5);
  --color-10-hex: #F5AF19; /* Alte Farbe: #FCBFA9 */
  --color-10t: rgba(252, 191, 169, 0.5);
  --color-11-hex: #B0ECB9;
  --color-11t: rgba(176, 236, 185, 0.5);
  --color-12-hex: #D0B0D2;
  --color-12t: rgba(208, 176, 210, 0.5);
}


/* ---------------------------------------------------------------------------- */
/* Style-Sheet-Angaben für die schwarze Box mit umlaufenden Regenbogenfarben.   */
/* Quelle: https://www.html-seminar.de/css-tricks-animierter-farbverlauf.htm    */
/* ---------------------------------------------------------------------------- */
.schattenmitfarbverlauf {
    /* width: 40%; */
	width: min(400px, 50%);
    margin: 50px auto;
    background: linear-gradient(0deg, var(--color-1-hex), var(--color-3-hex));
    position: relative;
}

.schattenmitfarbverlauf h1 {
	align-content:center;
	color:var(--color-4-hex);
	font-weight:700;
	font-size: 1.0rem;
	padding-top:10px;
	padding-bottom: 10px;
	text-align:center;
}
.schattenmitfarbverlauf hr {
	background-image:linear-gradient(to left, var(--color-9-hex) 0%, var(--color-10-hex) 100%);
	height:2px;
	margin-left:15px;
	margin-top:-15px;
	width:96%;
}

.schattenmitfarbverlauf p {
	align-content:center;
	color:var(--color-3-hex);
	font-weight:300;
	font-size: 0.7rem;
	padding-bottom: 5px;
	text-align:center;
}

.schattenmitfarbverlauf:before,.schattenmitfarbverlauf:after {
    content: "";
    position: absolute;
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
    top: -2px;
    left: -2px;
    background-size: 500%;
    animation: wandernderFarbverlauf 30s linear infinite;
}

.schattenmitfarbverlauf:after {
    filter: blur(25px);
}

@keyframes wandernderFarbverlauf {
    0%   { background-position: 0 0 }
    50%  { background-position: 500% 0 }
    100% { background-position: 0 0 }
}

/* --------------------------------------------------------------------- */
/* Angaben für sonstige Website-Elemente wie Überschrift, Infoboxen u.a. */
/* --------------------------------------------------------------------- */

.box_schatten {
	border-radius:10px;
	border:2px solid var(--color-8t);
	box-shadow:10px 20px 15px silver;
	margin-bottom:25px;
	padding:25px;
}

.button { 
	border-radius:10px;
	margin-bottom:10px; padding:8px;
	/* background-image: linear-gradient(var(--color-8-hex), var(--color-9-hex)); */
	background: var(--color-9-hex);
	display:inline-block;
	box-shadow:5px 5px 5px silver;
	text-shadow:none;
}
.eu-cookie-compliance-more-button {
    background: var(--color-9-hex);
	padding:5px;
}



/* --------------------------------------------- */
/* Angaben zu den Infoboxen mit dem Poligon oben */
/* --------------------------------------------- */
.cont_polygonbox {
	display: grid;
	grid:
		"polykopf" 19px		/* Definiert den Bereich für die Überschrift. Höhe wird fest vorgegeben (40px). */
		"titel" 45px		/* Definiert den Bereich für das Bild. Höhe wird fest vorgegeben (190px). ACHTUNG: Bild muss entsprechend dimensioniert werden. */
		"inhalt" auto		/* Definiert den Bereich für den beschreibenden Text. Höhe wird nicht vorgegeben (auto) und ändert sich mit dem Textinhalt. */
		/ 1fr;
	margin:5px 15px 15px 0;
	box-shadow: 0 5px 10px var(--color-2-hex);
	padding:5px;
}

/* ------- Klassendefinitionen der 3 Bereiche innerhalb des Containers für die Infoboxen mit dem Polygon. ------- */
.polygonbox_polykopf { grid-area: polykopf; background-color: var(--color-5t); clip-path: polygon(50% 85%, 100% 67%, 100% 100%, 0 100%, 0 67%); margin:-60px 0 0 0; }
.polygonbox_titel { grid-area: titel; background-color: var(--color-5-hex); color: var(--color-7-hex); border-bottom:2px solid var(--color-8-hex); font-size:0.9rem; font-size:clamp(0.8em, calc(1em + 1vw), 1.2em); padding:5px 15px 5px 15px; text-align:left; font-size: 120%; font-weight: bold;  }
.polygonbox_inhalt { grid-area: inhalt; background-color:var(--color-5t); color: var(--color-1-hex); border-radius:0 0 15px 15px; padding: 15px; hyphens: auto; }
.polygonbox_inhalt img { float:right; margin:0px 10px; }


/* ---------------------------------------------------------------------- */
/* Angaben für die Infobox mit dem überlappenden Titel.                   */
/* Quelle: https://css3.wikidot.com/demos:infobox-with-pure-css-3d-ribbon */
/* ---------------------------------------------------------------------- */

.box_versatz_container {
    position: relative;
    display: inline-block;
	margin:0 auto;
	margin-bottom:25px;
    padding: 0;
    width: auto;
}
.box_versatz_titel {
    background: var(--color-1-hex);
	box-shadow:10px 10px 25px silver;
    width: 270px;
    color: var(--color-secondary);
    padding: 10px 5px 10px 5px;
    margin: 0px;
    font-size: 120%;
    text-align: l;
    font-weight: bold;
}
.box_versatz_titel_aussen {
    margin: -63px 0 0 -10px;
} 				
.box_versatz {
    background: var(--color-1t);	/* --- Hintergrund wird leicht transparent angzeigt --- */
	box-shadow:10px 20px 15px silver;
	border-radius: 0px 86px 15px 15px; /* --- unten abgerundet, oben links gerade, oben rechts große Abrundung --- */
    /* border-radius: 0 0 18px 18px; --- unten abgerundet, oben gerade --- */	width: 250px;
    width: 250px;
	color: var(--color-2-hex);
    padding: 10px 5px 5px 10px;
    margin:10px 0 0 0;
    font-size: 90%;
}


/* ------------------------------------------------------------------------- */
/*  --------- Style-Sheet-Angaben für die Boxen der Seite "Pakete" --------- */
/* ------------------------------------------------------------------------- */
/* ------- Container für die Darstellung der Service-Pakete. ------- */
.cont_pakete {
	display: grid;
	grid:
		"kopf" 40px			/* Definiert den Bereich für die Überschrift. Höhe wird fest vorgegeben (40px). */
		"bild" 190px		/* Definiert den Bereich für das Bild. Höhe wird fest vorgegeben (190px). ACHTUNG: Bild muss entsprechend dimensioniert werden. */
		"inhalt" auto		/* Definiert den Bereich für den beschreibenden Text. Höhe wird nicht vorgegeben (auto) und ändert sich mit dem Textinhalt. */
		"fusszeile" 80px	/* Definiert den Bereich für die Preisdarstellung. Höhe wird fest vorgegeben (80px). */
		/ 1fr;
	gap: 8px;
	border: 2px solid  var(--color-1-hex);
	border-radius: 10px;
	box-shadow: 0 5px 10px var(--color-2-hex);
	background-image: url(/sites/default/files/inline-images/boxhintergrund.png);
	background-size: 100% 100%;
}

/* ------- Klassendefinitionen der 4 Bereiche innerhalb des Containers für die Service-Pakete. ------- */
.pakete_kopf { grid-area: kopf; width:auto; vertical-align:center; padding:5px; font-size: 0.9rem; font-weight: bold; border-radius: 8px 8px 0px 0px; background-color: var(--color-1-hex); color: var(--color-secondary); }
.pakete_servicebild { grid-area: bild; position: relative; overflow: hidden; text-align:center; margin-top:-8px; padding:0; }
.pakete_inhalt { grid-area: inhalt; margin: 0 15px 0px 15px; hyphens: auto; }
.pakete_preiszeile { grid-area: fusszeile; margin:0 15px 0 15px; }

/* ------- Klassendefinitionen zur Anzeige des Banners "Sehr beliebt" über dem Bild zu einem Service-Paket. ------- */
.pakete_bild_banner {
	position: absolute;
	top: 25px;
	right: -35px;
	width:150px;
	text-align: center;
	transform: rotate(45deg);
	/* background: linear-gradient(45deg, var(--color-9-hex) 0%, var(--color-10-hex) 100%); */
	background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	color: var(--color-3-hex);
	line-height: 33px;
	font-family: 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

/* ------- Klassendefinitionen zur Anzeige der horizontalen Linie vor der Preisangabe. ------- */
hr.hr-farbe {
  margin:0 0 10px 0;
  border: 0;
  height: 0.5px;
  background-image: linear-gradient(to right, var(--color-10t), var(--color-9-hex), var(--color-10t));
}
/* ----- Ende der Style-Sheet-Angaben für die Boxen der Seite "Pakete" ----- */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------ */
/*  --------- Style-Sheet-Angaben zur FAQ-Seite --------- */
/* ------------------------------------------------------ */

.fragenblock { background-color:var(--color-10t); width:75%; padding-bottom:0px; border-radius: 8px; }
.frage { line-height:107%; font-family: Calibri, sans-serif; font-size: 12px; font-weight: bold; background-color: var(--color-3-hex);margin: -18px -18px 0 -18px; border-radius: 8px; }
.fbantwort { margin: 10px 5px 10px 0px; font-size: 12px; }
.img_masked { float:right; margin-left:10px; margin-right:10px; }



/* ------------------------------------------- */
/*  --------- Preisschild-Gestaltung --------- */
/* ------------------------------------------- */
.preis_box {
  width: 100px; height: 65px;
  position: relative;
  border: 1px solid #BBB;
  border-radius: 5px;
  background: var(--color-3t);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-8-hex);
  margin:5px;
  padding-left:5px;
  float:right;
}
.preis_ribbon {
  position: absolute;
  top: 20px;
  right: -8px;
  padding: 6.5px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(to right, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-3-hex);
  box-shadow: 0 5px 10px var(--color-2-hex); /* rgba(0,0,0,0.15); */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.preis_ribbon::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  border-top: 8px solid var(--color-10-hex);
  filter: brightness(70%);
  border-right: 8px solid transparent;
}
/* ------------------------------------------------------------------------- */
.preis_button {
  width: auto;
  height: 34px;
  background: linear-gradient(45deg, var(--color-9-hex) 0%, var(--color-10-hex) 100%);
  color: var(--color-3-hex);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--color-9-hex);
  border-style: solid;
  padding: 0px 10px;
  box-shadow: 7px 7px 16px 0px rgba(0,0,0,0.2);
  transition: all 0.25s ease-out;
  display: inline-flex;
  user-select: none;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  line-height: 1;
  float:right;
}
/* ------------------------------------------------------------------------- */
/* Die nachfolgende Klasse definiert die Darstellung der Zahl vor dem Komma. */
.price {
    display: inline-block;
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600; /* Dicke der Zahl */
	text-align:right;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-3-hex);
    transform: scaleY(0.9) skewX(-8deg);
    border: 1px solid var(--color-9-hex);
    margin:5px; /* Abstand der Zahl vom Rest der Seite */
    padding:5px 5px 5px 5px;
	background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	float:right;
}
/* Die nachfolgende Klasse definiert die Darstellung der Nachkommastellen. */
.price::after {
    content: attr(data-cents);
    top: 0.17px;
    right: 0.35em; /* Abstand der Nachkommastellen von den Zahlen vor dem Komma. */
    font-size: 0.5em;
    letter-spacing: 0px;
    transform: scaleY(0.9);
}

.price::after, .price::before {
    position: absolute;
}

*, ::after, ::before {
    box-sizing: inherit;
    padding: 0px;
    margin: 0px;
    outline: 0px;
}