/*
Theme Name:   Hello Elementor Child – VGN
Theme URI:    https://studiohoff.de
Description:  Child Theme für die Website der Vinzenzgemeinschaft Neuss e.V. Enthält lokal gehostete Schriften (DSGVO-konform) und die zentralen Design-Tokens der Corporate Identity.
Author:       Jacqueline Aßhoff – studiohoff Brand- & Web Design
Author URI:   https://studiohoff.de
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* =====================================================
   1) SCHRIFTEN – lokal gehostet (kein Google-Fonts-Request)
   Dateien liegen in /fonts/ innerhalb dieses Themes.
   ===================================================== */

/* Crimson Pro – Headlines (Serif) */
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/crimson-pro-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/crimson-pro-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* DM Sans – Fließtext und UI (Sans-Serif) */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Mansalva – NUR für emotionale Einzelakzente (Zitate, Leitgedanken) */
@font-face {
  font-family: 'Mansalva';
  src: url('fonts/mansalva-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================================================
   2) VGN DESIGN-TOKENS (Corporate Identity)
   In Elementor überall nutzbar als: var(--vgn-gruen) usw.
   ===================================================== */
:root {
  /* Primärfarben */
  --vgn-gruen:          #2D6A4F;  /* Lebens-Grün – Primär, Buttons, H1 */
  --vgn-gruen-dunkel:   #1F4D39;  /* Hover-Abdunklung für Buttons */
  --vgn-akzent:         #7FA82D;  /* Vinzenz-Grün – NUR dekorativ, nie als Textfarbe auf Weiß! */
  --vgn-beige:          #F5F0E8;  /* Warm-Beige – Flächen, Sektionshintergründe */
  --vgn-text:           #1C2B3A;  /* Fast-Schwarz – Fließtext */

  /* Pastellvarianten */
  --vgn-pastell-gruen:  #A8D4BB;
  --vgn-pastell-akzent: #D4E8A0;
  --vgn-pastell-blau:   #8899AA;

  /* Sekundärfarben (max. 3 Farben pro Layout – CI-Regel!) */
  --vgn-flieder:        #C4B0D4;
  --vgn-kamille:        #EDD98A;
  --vgn-cappuccino:     #C4A882;
  --vgn-hellblau:       #A8C8DC;

  /* Typografie */
  --vgn-font-serif:     'Crimson Pro', Georgia, serif;
  --vgn-font-sans:      'DM Sans', Arial, sans-serif;
  --vgn-font-hand:      'Mansalva', cursive;

  /* Gestaltung */
  --vgn-radius:         12px;
  --vgn-shadow:         0 4px 20px rgba(28, 43, 58, 0.08);
  --vgn-shadow-hover:   0 10px 32px rgba(28, 43, 58, 0.14);
}

/* =====================================================
   3) BASIS & BARRIEREFREIHEIT
   ===================================================== */

/* Sichtbarer Fokus-Ring für Tastaturnutzung (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--vgn-gruen);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sanftes Scrollen – aber abschaltbar für empfindliche Nutzer */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   4) PLATZ FÜR PROJEKT-CSS
   Komponentenspezifisches CSS besser direkt in Elementor
   (Site Settings → Custom CSS) pflegen – hier nur
   Globales, das themeweit gelten soll.
   ===================================================== */


/* === VGN-MOBILE-START (studiohoff) === */

/* Bereichsnavigation: auf Mobil horizontal scrollbar statt 4-zeiligem Umbruch */
@media (max-width: 767px) {
  .vgn-areanav > .e-con-inner,
  .vgn-areanav .elementor-icon-list-items {
    flex-wrap: nowrap !important;
  }
  .vgn-areanav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vgn-areanav::-webkit-scrollbar { display: none; }
  .vgn-areanav .elementor-icon-list-item { white-space: nowrap; }
  /* Scroll-Hinweis: rechte Kante ausblenden */
  .vgn-areanav::after {
    content: ''; position: sticky; right: 0; flex: 0 0 24px;
  }
}

/* iOS: verhindert Auto-Zoom beim Fokus auf Formularfelder */
@media (max-width: 767px) {
  .elementor-field-textual,
  select.elementor-field,
  textarea.elementor-field { font-size: 16px !important; }
}

/* Anker-Sprünge nicht unter den Sticky Header schieben */
[id]:not(body) { scroll-margin-top: 120px; }
@media (max-width: 767px) { [id]:not(body) { scroll-margin-top: 80px; } }

/* Lange Wörter (Pflegefachkraft, Verhinderungspflege) auf schmalen Screens umbrechen */
@media (max-width: 480px) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}

/* Touch-Ziele: Mindestgröße 44px für Buttons und Navigationslinks */
@media (max-width: 767px) {
  .elementor-button { min-height: 44px; display: inline-flex; align-items: center; }
  .vgn-areanav .elementor-icon-list-item a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* === VGN-MOBILE-END === */


/* === VGN-FOOTER-START === */
@media (max-width: 767px) {
  /* Priorität auf Mobil: Kontakt zuerst, dann Service, dann Seiten */
  .vgn-footer-cols { display: flex; flex-direction: column; }
  .vgn-footer-cols > .e-con:nth-child(1) { order: 1; }
  .vgn-footer-cols > .e-con:nth-child(2) { order: 2; }
  .vgn-footer-cols > .e-con:nth-child(4) { order: 3; }
  .vgn-footer-cols > .e-con:nth-child(3) { order: 4; }
  /* Trennlinien zwischen den Blöcken statt großer Abstände */
  .vgn-footer-cols > .e-con + .e-con { border-top: 1px solid rgba(45,106,79,.18); padding-top: 20px; }
  /* Kontaktblöcke: Telefonnummer als deutliches Touch-Ziel */
  .vgn-f-kontakt .elementor-icon-list-item a { min-height: 44px; }
}
/* Downloadlinks erkennbar machen */
.elementor-icon-list-item .fa-file-pdf { opacity: .9; }
/* === VGN-FOOTER-END === */


/* === VGN-TEAM-START === */

/* 5er-Raster, wächst automatisch mit weiteren Personen mit */
.vgn-team-grid,
.vgn-team-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 36px;
  row-gap: 44px;
  align-items: start;
}
@media (max-width: 1134px) {
  .vgn-team-grid,
  .vgn-team-grid > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 36px; }
}
@media (max-width: 767px) {
  .vgn-team-grid,
  .vgn-team-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
}
@media (max-width: 420px) {
  .vgn-team-grid,
  .vgn-team-grid > .e-con-inner { grid-template-columns: 1fr; row-gap: 28px; }
}

/* Karte: bewusst rahmenlos, die Fotos tragen die Seite */
.vgn-team-card { width: auto !important; padding: 0; }
.vgn-team-card .vgn-team-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  display: block;
}
.vgn-team-card h4 { margin-bottom: 0; }
.vgn-team-card .vgn-team-rolle p { margin: 0; opacity: .82; }
.vgn-team-card .elementor-icon-list-item { font-size: 14px; line-height: 1.45; align-items: flex-start; }
.vgn-team-card .elementor-icon-list-item a { word-break: break-word; }
.vgn-team-card .elementor-icon-list-icon { padding-top: 3px; }

/* Kontaktzeilen auf Touch groß genug */
@media (max-width: 767px) {
  .vgn-team-card .elementor-icon-list-item a { min-height: 40px; display: flex; align-items: center; }
}

/* Bereichsnavigation der Teamseite: heller als die Bereichsleiste, ruhiger Rahmen */
.vgn-team-jump { border-top: 1px solid rgba(45,106,79,.12); border-bottom: 1px solid rgba(45,106,79,.12); }

/* === VGN-TEAM-END === */


/* === VGN-RESPONSIVE-SYSTEM-START (studiohoff, 2026-08-21) === */

/* Formulare: touch-taugliche Feld- und Buttonhoehen (Elementor md ~40px) */
@media (max-width: 767px) {
  .elementor-field-group .elementor-field-textual,
  .elementor-field-group select.elementor-field { min-height: 48px; }
  .elementor-field-group textarea.elementor-field { min-height: 120px; }
  .elementor-form .elementor-button { min-height: 48px; width: 100%; justify-content: center; }
  .elementor-field-subgroup .elementor-field-option label { min-height: 32px; display: inline-flex; align-items: center; }
  .elementor-field-subgroup input[type=checkbox],
  .elementor-field-subgroup input[type=radio] { width: 20px; height: 20px; }
}

/* Hamburger: sicheres 44x44-Touchziel unabhaengig von der Icon-Groesse */
.elementor-menu-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Mobiles Dropdown-Menue: grosszuegige Zeilenhoehe */
@media (max-width: 1133px) {
  .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-nav-menu--dropdown a.elementor-sub-item { min-height: 48px; display: flex; align-items: center; }
}

/* Lange Adressen/Mails nicht ueberlaufen lassen */
.elementor-icon-list-text,
.elementor-icon-list-item a { overflow-wrap: anywhere; }

/* Tabellen scrollen im eigenen Container, nicht die ganze Seite */
@media (max-width: 767px) {
  .elementor-widget-text-editor table,
  .elementor-widget-theme-post-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Medien bleiben immer im Container */
img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; }

/* === VGN-RESPONSIVE-SYSTEM-END === */


/* === A11y-Fokus studiohoff 2026-08-25 === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #2D6A4F;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}