/*
Theme Name:   SWICYBA Divi Child
Theme URI:    https://dhdesign.ch
Description:  Divi 5 Child Theme für die SWICYBA-Website (Swiss Industry Cybersecurity Association). Institutionelles, zurückhaltendes Design in den offiziellen Logofarben mit Roboto als Hausschrift.
Author:       Dina Hüsler / dhdesign.ch
Author URI:   https://dhdesign.ch
Template:     Divi
Version:      1.0.0
Text Domain:  swicyba-child
*/

/* ==========================================================================
   1. Marken-Farben (aus dem Logo gesampelt)
   Diese Variablen kannst du zusätzlich 1:1 unter
   Divi > Theme Builder > Design Variables anlegen, damit sie auch
   im Visual Builder als globale Farb-Presets erscheinen.
   ========================================================================== */
:root {
  --swicyba-red:   #ED1C24;
  --swicyba-black: #000000;
  --swicyba-white: #FFFFFF;

  /* Abgeleitete Zwischentöne für Hover-/Flächenzustände,
     nicht Teil der Kernpalette, rein funktional */
  --swicyba-red-hover: #c8141b;
  --swicyba-grey-100:  #f7f7f7;
  --swicyba-grey-600:  #4b4b4b;
}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype-variations');
}



/* ==========================================================================
   3. Basis-Typografie
   ========================================================================== */
body,
.et_pb_section,
h1, h2, h3, h4, h5, h6,
p, a, span, div {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}



/* ==========================================================================
   4. Wiederkehrende Marken-Elemente
   ========================================================================== */
a {
  color: var(--swicyba-red);
}

a:hover {
  color: var(--swicyba-red-hover);
}

.swicyba-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--swicyba-white);
  background: var(--swicyba-red);
  padding: 12px 24px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s;
}

.swicyba-btn-primary:hover {
  background: var(--swicyba-red-hover);
  color: var(--swicyba-white);
}

.swicyba-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--swicyba-red);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.swicyba-dark-section {
  background: var(--swicyba-black);
  color: var(--swicyba-white);
}

.swicyba-dark-section .swicyba-eyebrow {
  color: var(--swicyba-red);
}

/* Hover Boxshadow*/
.boxshadowhover:hover {
	box-shadow: rgba(15, 42, 92, 0.1) 0px 12px 28px;
}

/* Blurb Text Abstand */
.et_pb_blurb_container {
	padding: 0 26px 30px 32px;
}

/* Strich vor und nach dem Text */
.text-divider .et_pb_text_inner p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;

}

.text-divider .et_pb_text_inner p::before,
.text-divider .et_pb_text_inner p::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #cccccc;
  max-width: 100px; /* Linienlänge begrenzen, sonst ziehen sie über die ganze Breite */
}


.et_pb_testimonial_0.et_pb_testimonial:before {
	transform: rotate(180deg);
	margin-top: -20px;
}

/* Bilder hover Effekt */
/* Bilder hover Effekt */
.imagepersonal .et_pb_team_member_image {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.imagepersonal:hover .et_pb_team_member_image {
    box-shadow: 0 16px 38px rgba(15,42,92,.24);
    transform: translateY(-4px);
}
.imagepersonal .et_pb_team_member_image img {
    filter: grayscale(100%);
    transition: filter 0.45s ease, transform 0.45s ease;
}
.imagepersonal:hover .et_pb_team_member_image img {
    filter: grayscale(0%);
    transform: scale(1.08);
}

/* Testimonial Plugin */

.el-testimonial-rating {
	display: none;
}

.el_md_testimonial_extended_0 .el-testimonial-desc p {
	padding-top: 30px;
}
.el-testimonial-meta {
	margin-top: -25px;
}
 

/* Testimonial Divi */

@media (max-width: 768px) {
.et_pb_testimonial_position{
	padding-top: 5px;
}
.et_pb_testimonial_author{
	padding-top: 30px
}
}