.elementor-1221 .elementor-element.elementor-element-ccf2d71{--display:flex;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}/* Start custom CSS *//* =========================================================
   Johannes Glaser Website – Modern Professional Theme CSS
   Für Elementor / Custom CSS
   ========================================================= */

/* ---------- Globale Farbvariablen ---------- */
:root {
  --jg-bg: #f7f8fb;
  --jg-bg-soft: #ffffff;
  --jg-bg-dark: #0f172a;

  --jg-text: #111827;
  --jg-text-muted: #5b6472;
  --jg-text-light: #f8fafc;

  --jg-primary: #2563eb;
  --jg-primary-dark: #1d4ed8;
  --jg-primary-soft: #dbeafe;

  --jg-accent: #14b8a6;
  --jg-border: #e5e7eb;

  --jg-radius-sm: 12px;
  --jg-radius-md: 18px;
  --jg-radius-lg: 28px;

  --jg-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --jg-shadow-md: 0 18px 50px rgba(15, 23, 42, 0.10);

  --jg-max-width: 1180px;
}

/* ---------- Grundlayout ---------- */
body {
  background: var(--jg-bg);
  color: var(--jg-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elementor Sections etwas luftiger */
.elementor-section,
.elementor-container,
.e-con {
  box-sizing: border-box;
}

/* Hauptcontainer harmonischer */
.elementor-section .elementor-container,
.e-con {
  max-width: var(--jg-max-width);
}

/* ---------- Typografie ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
  color: var(--jg-text);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 750;
}

p,
.elementor-widget-text-editor {
  color: var(--jg-text-muted);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

/* Links */
a {
  color: var(--jg-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--jg-primary-dark);
}

/* ---------- Hero-Bereich ---------- */
/* Wirkt besonders gut, wenn die erste Section deine Hero-Section ist */
.elementor-section:first-of-type,
.e-con:first-of-type {
  position: relative;
  overflow: hidden;
}

/* Dezenter Hintergrund-Glow für moderne Optik */
.elementor-section:first-of-type::before,
.e-con:first-of-type::before {
  content: "";
  position: absolute;
  inset: -160px -120px auto auto;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.elementor-section:first-of-type > *,
.e-con:first-of-type > * {
  position: relative;
  z-index: 1;
}

/* ---------- Buttons ---------- */
.elementor-button,
button,
input[type="submit"],
.elementor-field-type-submit button {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--jg-primary), var(--jg-primary-dark)) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  padding: 15px 26px !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.25);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
.elementor-field-type-submit button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(37, 99, 235, 0.35);
}

/* Button-Text sauber */
.elementor-button-text {
  color: inherit;
}

/* Optional: sekundäre Buttons mit Outline, wenn du ihnen in Elementor die CSS-Klasse "jg-button-secondary" gibst */
.jg-button-secondary .elementor-button,
.elementor-button.jg-button-secondary {
  background: #ffffff !important;
  color: var(--jg-text) !important;
  border: 1px solid var(--jg-border) !important;
  box-shadow: var(--jg-shadow-sm);
}

.jg-button-secondary .elementor-button:hover,
.elementor-button.jg-button-secondary:hover {
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: var(--jg-primary) !important;
}

/* ---------- Karten / Leistungsboxen ---------- */
/* Greift auf häufige Elementor Cards, Icon Boxes und Container */
.elementor-widget-icon-box,
.elementor-widget-image-box,
.elementor-widget-testimonial,
.elementor-widget-call-to-action,
.jg-card {
  background: var(--jg-bg-soft);
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: var(--jg-radius-md);
  box-shadow: var(--jg-shadow-sm);
  padding: 28px;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.elementor-widget-icon-box:hover,
.elementor-widget-image-box:hover,
.elementor-widget-testimonial:hover,
.elementor-widget-call-to-action:hover,
.jg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jg-shadow-md);
  border-color: rgba(37, 99, 235, 0.25);
}

/* Icons moderner */
.elementor-icon {
  background: var(--jg-primary-soft);
  color: var(--jg-primary);
  border-radius: 16px;
  padding: 14px;
}

/* Icon Box Titel */
.elementor-icon-box-title,
.elementor-image-box-title {
  color: var(--jg-text);
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* Icon Box Text */
.elementor-icon-box-description,
.elementor-image-box-description {
  color: var(--jg-text-muted);
}

/* ---------- Dunkle Sections ---------- */
/* Gib dunklen Bereichen in Elementor die CSS-Klasse: jg-dark-section */
.jg-dark-section {
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.24), transparent 34%),
              linear-gradient(135deg, #0f172a, #111827) !important;
  color: var(--jg-text-light);
  border-radius: var(--jg-radius-lg);
  overflow: hidden;
}

.jg-dark-section h1,
.jg-dark-section h2,
.jg-dark-section h3,
.jg-dark-section h4,
.jg-dark-section .elementor-heading-title {
  color: #ffffff !important;
}

.jg-dark-section p,
.jg-dark-section .elementor-widget-text-editor {
  color: rgba(248, 250, 252, 0.74) !important;
}

/* ---------- Highlight / Badge ---------- */
/* Gib kleinen Texten oder Headline-Labels die CSS-Klasse: jg-badge */
.jg-badge,
.jg-badge .elementor-heading-title,
.jg-badge .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 8px;
  background: var(--jg-primary-soft);
  color: var(--jg-primary) !important;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem !important;
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* ---------- Testimonials ---------- */
.elementor-testimonial-content {
  color: var(--jg-text);
  font-size: 1.05rem;
  line-height: 1.7;
}

.elementor-testimonial-name {
  color: var(--jg-text);
  font-weight: 800;
}

.elementor-testimonial-job {
  color: var(--jg-text-muted);
}

/* ---------- Formulare ---------- */
input,
textarea,
select,
.elementor-field {
  background: #ffffff !important;
  border: 1px solid var(--jg-border) !important;
  border-radius: var(--jg-radius-sm) !important;
  color: var(--jg-text) !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus,
.elementor-field:focus {
  outline: none !important;
  border-color: rgba(37, 99, 235, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

label,
.elementor-field-label {
  color: var(--jg-text);
  font-weight: 700;
}

/* ---------- Bilder ---------- */
img {
  border-radius: var(--jg-radius-md);
}

/* Portraits oder größere Bilder hochwertiger */
.elementor-widget-image img {
  box-shadow: var(--jg-shadow-sm);
}

/* ---------- Navigation / Header ---------- */
.elementor-nav-menu a {
  color: var(--jg-text) !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item-active {
  color: var(--jg-primary) !important;
}

/* Header etwas cleaner, falls dein Header transparent/weiß ist */
.elementor-location-header {
  background: rgba(247, 248, 251, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}

/* ---------- Abstände ---------- */
.elementor-widget {
  margin-bottom: 0;
}

/* Mehr Luft in großen Sections */
.jg-section-padding {
  padding-top: clamp(72px, 9vw, 130px) !important;
  padding-bottom: clamp(72px, 9vw, 130px) !important;
}

/* Weniger breite Textblöcke */
.jg-narrow-text {
  max-width: 760px;
}

/* ---------- Listen ---------- */
.elementor-widget-text-editor ul {
  padding-left: 1.2em;
}

.elementor-widget-text-editor li {
  margin-bottom: 0.55em;
  color: var(--jg-text-muted);
}

.elementor-widget-text-editor li::marker {
  color: var(--jg-primary);
}

/* ---------- Mobile Optimierung ---------- */
@media (max-width: 767px) {
  body {
    line-height: 1.6;
  }

  .elementor-section,
  .e-con {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .elementor-widget-icon-box,
  .elementor-widget-image-box,
  .elementor-widget-testimonial,
  .elementor-widget-call-to-action,
  .jg-card {
    padding: 22px;
    border-radius: 18px;
  }

  .elementor-button,
  button,
  input[type="submit"],
  .elementor-field-type-submit button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  h1,
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(2.25rem, 12vw, 3.4rem);
  }

  h2,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }
}

/* ---------- Kleine Animationen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .elementor-widget-icon-box,
  .elementor-widget-image-box,
  .elementor-widget-testimonial,
  .elementor-widget-call-to-action,
  .jg-card,
  .elementor-button {
    will-change: transform;
  }
}/* End custom CSS */