/* ==========================================================
   Portrait Yourself — Mobile-Layout-Fix für Startseite (Page 369)
   Behebt: Weißer Rand rechts + Textüberlauf auf Mobile
   Anwendung: WordPress Admin → Customize → Additional CSS
   ========================================================== */

@media (max-width: 768px) {
  /* Stoppt horizontalen Scroll, der durch zu breite Inline-Grids entsteht */
  html, body { overflow-x: hidden !important; }

  /* Section-Container — saubere Mobile-Padding */
  .elementor-369 .elementor-section .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* TOPNAV — wrap & shrink, Menülinks ausblenden auf Mobile */
  .elementor-369 div[style*="height:64px"][style*="max-width:1120px"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  .elementor-369 div[style*="height:64px"][style*="max-width:1120px"] > div[style*="gap:32px"] {
    display: none !important;
  }
  .elementor-369 div[style*="height:64px"] > a[style*="background:#C4A35A"] {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Trust-Strip (Logos) — kompakter */
  .elementor-369 div[style*="background:#f8f2e6"][style*="padding:28px 40px"] {
    padding: 20px 16px !important;
    gap: 18px !important;
  }

  /* "Das passiert..." 4-Karten-Grid → eine Spalte + kleineres Padding */
  .elementor-369 div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .elementor-369 div[style*="grid-template-columns:1fr 1fr"] > div[style*="padding:40px 36px"] {
    padding: 28px 22px !important;
  }

  /* 3-Schritt-Prozess-Grid → eine Spalte */
  .elementor-369 div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .elementor-369 div[style*="grid-template-columns:1fr 1fr 1fr"] > div[style*="padding:32px 24px"] {
    padding: 24px 20px !important;
  }

  /* Testimonial-Karten — kein Min-Width-Overflow */
  .elementor-369 div[style*="background:#fff"][style*="padding:40px 20px"] {
    padding: 28px 12px !important;
  }
  .elementor-369 div[style*="background:#f8f2e6"][style*="border-radius:12px"][style*="padding:32px"] {
    padding: 24px 20px !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  /* Footer — weniger Padding */
  .elementor-369 div[style*="max-width:1120px"][style*="padding:0 32px"] {
    padding: 0 16px !important;
  }

  /* Defensive — Bilder & iFrames nie über Viewport hinaus */
  .elementor-369 img,
  .elementor-369 iframe {
    max-width: 100% !important;
  }
}
/* ============================================
   PORTRAIT YOURSELF — MOBILE FIX V2
   Ergänzt mobile-fix.css (v1) um Kontaktseite
   In Customize → Zusätzliches CSS einfügen
   (kann an v1 unten angehängt werden)
   ============================================ */
 
/* ----------------------------------------------------------------------
   1. THEME-PAGE-TITLE auf der Kontaktseite ausblenden
   (Beseitigt das pinke "Portrait yourself" + die Doppel-H1)
   ----------------------------------------------------------------------*/
.page-id-418 .page-header,
.page-id-418 .entry-header,
.page-id-418 header.entry-header,
.page-id-418 .site-header h1,
.page-id-418 .site-title,
.page-id-418 .wp-block-post-title,
.page-id-418 .wp-block-template-part .wp-block-site-title {
  display: none !important;
}
 
/* Falls die Page-ID anders ist — Fallback: Site-Title in Pink ausblenden */
.elementor-page .site-title,
.elementor-page header > h1 {
  display: none !important;
}
 
/* ----------------------------------------------------------------------
   2. TOPNAV — Mobile (greift Startseite + Kontaktseite gleich)
   ----------------------------------------------------------------------*/
@media (max-width: 768px) {
  /* Topnav-Container kompakter, Wrap erlauben */
  div[style*="max-width:1120px"][style*="height:64px"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }
 
  /* Logo-Block links bleibt */
  div[style*="height:64px"] > a:first-of-type {
    flex: 0 0 auto !important;
    font-size: 15px !important;
  }
 
  /* Mittlere Link-Group (Für dich / Meine Arbeit / Wie es läuft) ausblenden auf Mobile */
  div[style*="height:64px"] > div[style*="display:flex"][style*="gap:32px"] {
    display: none !important;
  }
 
  /* CTA-Button rechts kleiner, aber sichtbar */
  div[style*="height:64px"] > a:last-of-type {
    padding: 8px 14px !important;
    font-size: 13px !important;
    flex: 0 0 auto !important;
  }
}
 
/* ----------------------------------------------------------------------
   3. ELEMENTOR ZWEI-SPALTEN-LAYOUTS — Mobile auf 1 Spalte
   ----------------------------------------------------------------------*/
@media (max-width: 768px) {
  .elementor-section .elementor-column,
  .elementor-container > .elementor-column {
    width: 100% !important;
  }
 
  /* Padding horizontal reduzieren, sonst kleben Texte am Rand */
  .elementor-column .elementor-widget-wrap,
  .elementor-column .elementor-element-populated {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
 
  /* Section-Padding auf Mobile reduzieren */
  .elementor-section.elementor-section-boxed > .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
 
/* ----------------------------------------------------------------------
   4. KONTAKT-FORM — Mobile-Fix
   ----------------------------------------------------------------------*/
@media (max-width: 768px) {
  /* Form-Container auf volle Breite, Box-Sizing fix */
  .page-id-418 form,
  .page-id-418 .wp-block-jetpack-contact-form,
  .page-id-418 .wp-block-jetpack-form,
  .elementor-page form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
 
  /* Alle Form-Felder volle Breite */
  .page-id-418 input[type="text"],
  .page-id-418 input[type="email"],
  .page-id-418 input[type="tel"],
  .page-id-418 textarea,
  .page-id-418 select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* iOS verhindert Zoom-on-Focus bei 16px+ */
  }
 
  /* Labels lesbar */
  .page-id-418 label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
  }
 
  /* Textarea Höhe */
  .page-id-418 textarea {
    min-height: 100px !important;
  }
 
  /* Submit-Button */
  .page-id-418 button[type="submit"],
  .page-id-418 input[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }
}
 
/* ----------------------------------------------------------------------
   5. INTL-TEL-INPUT (Telefon-Feld mit Flagge)
   Default auf DE setzen geht nur per JS — hier nur Layout-Fix
   ----------------------------------------------------------------------*/
@media (max-width: 768px) {
  .iti, .iti--allow-dropdown {
    width: 100% !important;
    max-width: 100% !important;
  }
  .iti input[type="tel"] {
    padding-left: 90px !important; /* Platz für Flagge + Prefix */
  }
}
 
/* ----------------------------------------------------------------------
   6. KONTAKT-INFO-BLOCK ("So erreichst du mich") — Mobile
   ----------------------------------------------------------------------*/
@media (max-width: 768px) {
  /* Telefon-Nummer und E-Mail nicht überspringen lassen */
  .elementor-page a[href^="tel:"],
  .elementor-page a[href^="mailto:"] {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: inline-block !important;
    max-width: 100% !important;
  }
 
  /* Falls der Block ein eigenes inline-style:width hat, Override */
  div[style*="font-family:Inter"] a[href^="tel:"],
  div[style*="font-family:Inter"] a[href^="mailto:"] {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}
 
/* ----------------------------------------------------------------------
   7. EINZUGSGEBIET-Section — Hero-Texte responsive
   ----------------------------------------------------------------------*/
@media (max-width: 768px) {
  .elementor-page h1, .elementor-page h2 {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
 
  .elementor-page h3 {
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.25 !important;
  }
 
  /* Body-Text */
  .elementor-page p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}
 
/* ----------------------------------------------------------------------
   8. SCROLL-HORIZONTAL VERHINDERN (sichert Layout overall ab)
   ----------------------------------------------------------------------*/
html, body {
  overflow-x: hidden !important;
}
 
@media (max-width: 768px) {
  body, .elementor, .elementor-section, .elementor-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
 
  /* Bilder-Schutz */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}
 
/* ============================================
   PORTRAIT YOURSELF — CONTRAST FIX V3
   Fixt WCAG-AA-Kontrastprobleme (BFSG-relevant)
   In Customize → Zusätzliches CSS einfügen,
   unten an mobile-fix-v2.css anhängen
   ============================================ */
 
/* ----------------------------------------------------------------------
   1. HELLGRAUE TEXTE AUF HELLEM HINTERGRUND
   #888 / #999 / #9a907a / #c9bfa8 sind auf weiß/creme Kontrast-Fail
   ----------------------------------------------------------------------*/
 
/* Generischer Override für inline-style Farben */
[style*="color:#888"]:not([style*="background-color:#1A1A2E"]):not([style*="background-color:#0F0F1A"]):not([style*="background-color:#111111"]),
[style*="color: #888"]:not([style*="background-color:#1A1A2E"]):not([style*="background-color:#0F0F1A"]):not([style*="background-color:#111111"]) {
  color: #5a5a5a !important;
}
 
[style*="color:#999"]:not([style*="background-color:#1A1A2E"]):not([style*="background-color:#0F0F1A"]):not([style*="background-color:#111111"]),
[style*="color: #999"]:not([style*="background-color:#1A1A2E"]):not([style*="background-color:#0F0F1A"]):not([style*="background-color:#111111"]) {
  color: #595959 !important;
}
 
/* Hellbeige #9a907a / #c9bfa8 — nur auf dunklem BG erlaubt. Auf hellem fixen */
.wp-block-group:not([style*="#1A1A2E"]):not([style*="#0F0F1A"]):not([style*="#111111"]) [style*="color:#9a907a"],
.wp-block-group:not([style*="#1A1A2E"]):not([style*="#0F0F1A"]):not([style*="#111111"]) [style*="color: #9a907a"],
.wp-block-group:not([style*="#1A1A2E"]):not([style*="#0F0F1A"]):not([style*="#111111"]) [style*="color:#c9bfa8"],
.wp-block-group:not([style*="#1A1A2E"]):not([style*="#0F0F1A"]):not([style*="#111111"]) [style*="color: #c9bfa8"] {
  color: #5a4f3a !important;
}
 
/* ----------------------------------------------------------------------
   2. CTA-BUTTONS (weißer Text auf Gold #C4A35A = 2.40:1, FAIL)
   Lösung: Dunkleres Gold + weißer Text → 4.5:1
   Alternativ: Goldener Hintergrund + sehr dunkler Text
   ----------------------------------------------------------------------*/
 
.wp-block-button__link[style*="background-color:#C4A35A"],
.wp-block-button__link[style*="background-color: #C4A35A"],
a[href][style*="background-color:#C4A35A"],
a[href][style*="background:#C4A35A"] {
  background-color: #8C6B22 !important; /* dunkleres Gold, AA-konform mit weiß */
  color: #FFFFFF !important;
}
 
/* Hover-State auf gold-dunkler */
.wp-block-button__link[style*="background-color:#C4A35A"]:hover,
a[href][style*="background-color:#C4A35A"]:hover,
a[href][style*="background:#C4A35A"]:hover {
  background-color: #6F5418 !important;
}
 
/* ----------------------------------------------------------------------
   3. PRIVACY-DISCLAIMER ("Mit dem Absenden stimmst du zu...")
   Häufiger Fall: 13px graue Text auf Weiß
   ----------------------------------------------------------------------*/
.wp-block-paragraph[style*="color:#888"],
.wp-block-paragraph[style*="color: #888"] {
  color: #595959 !important;
}
 
/* ----------------------------------------------------------------------
   4. LINK-FARBE im Body — sichtbar machen
   ----------------------------------------------------------------------*/
.entry-content a:not(.wp-block-button__link):not([style*="color:"]),
.wp-block-paragraph a:not([style*="color:"]) {
  color: #1A1A2E !important;
  text-decoration: underline !important;
}
 
/* ----------------------------------------------------------------------
   5. FOCUS-RING für Tastatur-Navigation (BFSG-Pflicht)
   ----------------------------------------------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid #FFB000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(255, 176, 0, 0.3) !important;
}
 
/* ----------------------------------------------------------------------
   6. FORM-FIELD KONTRAST: Border sichtbar machen
   ----------------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border: 1px solid #595959 !important;
  background: #FFFFFF !important;
  color: #1A1A2E !important;
}
 
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #1A1A2E !important;
  outline: 2px solid #FFB000 !important;
  outline-offset: 1px !important;
}
 
/* Required-Marker stärker hervorheben */
.grunion-label-required,
.required-mark {
  color: #C00000 !important;
  font-weight: 700 !important;
}
 
/* ----------------------------------------------------------------------
   7. SKIP-LINK für Tastatur-Nutzer (versteckt bis Tab-fokussiert)
   ----------------------------------------------------------------------*/
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  z-index: 999 !important;
  padding: 1em !important;
  background: #FFFFFF !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.skip-link:focus {
  left: 6px !important;
  top: 6px !important;
}
 
/* ----------------------------------------------------------------------
   8. REDUCED MOTION respektieren (BFSG)
   ----------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}