/*
Theme Name:   Agentur Mansour
Description:  Child-Theme von Hello Elementor für agentur-mansour.de
Author:       Tobias Mansour
Template:     hello-elementor
Version:      1.0.0
Text Domain:  agentur-mansour
*/

/* ==========================================================================
   Agentur Mansour: eigene Klassen (Präfix am-)
   Inhalt: 1 Schrift · 2 Flächen · 3 Karten · 4 Buttons · 5 Links · 6 Formular
           7 Animation · 8 Fokus · 9 Reduzierte Bewegung
   Farben, Schriften und Abstände stehen in den globalen Elementor-Stilen.
   ========================================================================== */


/* 1 Schrift
   Variable Font mit Gewichtsbereich (Elementor deklariert nur 400) */
@font-face {
  font-family: "Plus_Jakarta_Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/wp-content/uploads/2026/11/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
}


/* 2 Flächen */

/* Dunkle Sektion mit Punktraster und Schimmer (Hero) */
.am-dunkel {
  background-color: #050505;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(77, 240, 200, .16), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(91, 140, 255, .20), transparent 40%),
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
}

/* Dunkles Band mit Mint-Verlauf von oben (Vorlagen, CTA) */
.am-dunkel-cta {
  background-color: #050505;
  background-image: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(77, 240, 200, .14), rgba(77, 240, 200, 0) 70%);
  border-top: 1px solid #2A2E36;
}


/* 3 Karten */

.e-con.am-karte,
.e-con.am-karte-dunkel,
.e-con.am-karte-schlicht {
  box-sizing: border-box;
  border-radius: 20px;
  transition: border-color .25s ease, transform .25s ease;
}

/* Standard: weiß, grüner Oberrand, Mint-Schimmer */
.e-con.am-karte {
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;
  background-image: radial-gradient(circle at 100% 0%, rgba(77, 240, 200, .10), transparent 55%);
  border: 1px solid #D5DAE1;
  border-top: 2px solid #067A61;
  box-shadow: 0 12px 32px rgba(11, 13, 16, .08);
}
.e-con.am-karte:hover {
  border-color: #067A61;
  transform: translateY(-4px);
}

/* Dunkel */
.e-con.am-karte-dunkel {
  background-color: #14171B;
  border: 1px solid #2A2E36;
}
.e-con.am-karte-dunkel:hover {
  border-color: #4DF0C8;
  transform: translateY(-4px);
}

/* Schlicht: weiß mit Rahmen, ohne grünen Rand */
.e-con.am-karte-schlicht {
  background-color: #FFFFFF;
  border: 1px solid #D5DAE1;
  box-shadow: 0 12px 32px rgba(11, 13, 16, .06);
}

/* Icon-Kachel */
.e-con.am-icon {
  width: 56px;
  height: 56px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #E3FAF3;
  border: 1px solid rgba(77, 240, 200, .3);
  color: #067A61;
}


/* 4 Buttons */

/* Elementor nutzt bei Buttons den Eyebrow-Stil als Standard: zurücksetzen */
.elementor .elementor-widget-button .elementor-button {
  text-transform: none;
  letter-spacing: 0;
}


/* 5 Links */

/* Textlink auf hellem Grund, auf dunklem Grund Mint */
.am-link a {
  color: #067A61;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}
.am-link a:hover {
  color: #045A47;
}
.am-dunkel .am-link a,
.am-dunkel-cta .am-link a {
  color: #4DF0C8;
}
.am-dunkel .am-link a:hover,
.am-dunkel-cta .am-link a:hover {
  color: #A8F8E4;
}

/* Breadcrumb (Eyebrow) auf dunklem Grund */
.am-breadcrumb a {
  color: #BCC3CE;
  transition: color .2s ease;
}
.am-breadcrumb a:hover {
  color: #A8F8E4;
  text-decoration: underline;
}
.am-breadcrumb .am-sep {
  color: #4DF0C8;
  opacity: .5;
  margin: 0 .25em;
}
.am-breadcrumb .am-aktuell {
  color: #4DF0C8;
}


/* 6 Formularfeld */

.am-feld input,
.am-feld textarea,
.am-feld select,
.elementor-field-group.am-feld .elementor-field {
  background: #FFFFFF;
  border: 1px solid #D5DAE1;
  border-radius: 12px;
  padding: 14px 16px;
}
.am-feld input:focus,
.am-feld textarea:focus,
.am-feld select:focus,
.elementor-field-group.am-feld .elementor-field:focus {
  border-color: #067A61;
  outline: none;
}


/* 7 Animation: Einblenden beim Laden (gestaffelt) */

@keyframes am-einblenden {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.am-einblenden   { animation: am-einblenden .7s ease both; }
.am-einblenden-2 { animation: am-einblenden .7s ease .15s both; }
.am-einblenden-3 { animation: am-einblenden .7s ease .3s both; }


/* 8 Fokus-Ring (Tastaturbedienung) */

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid #4DF0C8;
  outline-offset: 3px;
}


/* 9 Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
  .am-einblenden,
  .am-einblenden-2,
  .am-einblenden-3 {
    animation: none;
  }
  .e-con.am-karte,
  .e-con.am-karte-dunkel {
    transition: none;
  }
  .e-con.am-karte:hover,
  .e-con.am-karte-dunkel:hover {
    transform: none;
  }
}