/*
 Theme Name: A1 Design Theme
 Theme URI: https://example.com
 Author: 1a Design
 Version: 0.1.0
 Description: Theme auf Basis deines XD-Pakets. Visual Composer kompatibel.
 Text Domain: a1design
*/
:root{
  --color-primary: #0800FF;
  --color-secondary: #FFD500;
  --color-accent: #10B981;
  --color-text: #111111;
  --color-text-light: #FFFFFF;
  --color-bg: #C2C2C2;
  --color-footer-bg: #FFD500;
  --color-error: #FF8800;
  --color-warning: #FF0000;
  --color-success: #3CB10B;
  --container: 1100px;
  --logo-max-h: 64px;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--color-text);background:var(--body-bg)}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header{background:var(--header-bg);color:var(--color-text-light);padding:14px 0;border-bottom-left-radius:var(--header-radius);border-bottom-right-radius:var(--header-radius)}
.site-footer{background:var(--footer-bg);color:#000;padding:24px 0;margin-top:48px;border-top-left-radius:var(--footer-radius);border-top-right-radius:var(--footer-radius)}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.menu li{list-style:none}
.menu a{display:block;padding:8px 10px;color:inherit}
@media (max-width:1024px){ .menu{gap:14px} }
@media (max-width:768px){ .menu{flex-direction:column; gap:0} }
.custom-logo, .custom-logo-link img{max-height:var(--logo-max-h);width:auto;height:auto;display:block}

main.container{padding:32px 0}
.entry h1{margin:0 0 12px;font-size:clamp(22px,3vw,34px)}


/* Sticky footer */
.wrapper{min-height:100vh;display:flex;flex-direction:column}
main.container{flex:1 0 auto}
.site-footer{margin-top:auto}


/* Nav: Dropdown + Hover + Burger */

@media (max-width: 768px){
  #menu-toggle{display:block}
  header .nav{position:relative}
  header .nav .menu{
    display:none;
    position:absolute; top:100%; right:0;
    background:#fff; color:#111;
    padding:10px; border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    flex-direction:column; gap:0;
    min-width:220px;
  }
  header .nav.menu-open .menu{display:flex}
  header .nav .menu a{padding:10px 14px}
  /* Touch: disable hover dropdowns */
  header .nav .menu li .sub-menu{position:static; box-shadow:none; border-radius:0}
  header .nav .menu li:hover > .sub-menu{display:none}
}


/* Header link colors and hover contrast */
.site-header .menu a{color:var(--color-text-light)}
.site-header .menu a:hover{color:#FFF8BA} /* token: Hover Nav Header */


/* Header Menü als Buttons */
.site-header .menu{gap:12px}
.site-header .menu a{
  background: var(--nav-btn-bg);
  color: #000;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: background .2s ease, filter .2s ease;
}
.site-header .menu a:hover{
  background: #FFF8BA; /* Hover Nav Header */
  color: #000;
}

/* Dropdown optisch wie normale Nav */
.menu li{position:relative}
.menu li .sub-menu{
  display:none;
  position:absolute; left:0; top:100%;
  padding:8px 0; margin:6px 0 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  list-style:none;
}
.menu > li:hover > .sub-menu{display:block}
.menu li .sub-menu a{
  background: var(--nav-btn-bg);
  color:#000;
  border-radius:8px;
  padding:6px 14px;
  display:block;
  white-space:nowrap;
}
.menu li .sub-menu a:hover{background: var(--nav-btn-hover-bg);}

/* Mobile: gleiche Buttons im Overlay-Menü */
@media (max-width: 768px){
  header .nav .menu a{
    background: var(--nav-btn-bg);
    color:#000;
    border-radius:8px;
    margin:4px 0;
  }
  header .nav .menu a:hover{background: var(--nav-btn-hover-bg);}
}


/* Dropdown Feinschliff */
.menu li .sub-menu a{
  display:inline-block;
  width:auto;
}


/* Dropdown Abstand direkt an Nav */


/* Dropdown Abstand halbiert (1px) */

/* Dropdown Abstand korrigiert */
.site-header .menu li .sub-menu {
  margin: 1px 0 0 0 !important;
}


/* Dropdown Position näher an der Nav */
.site-header .menu li .sub-menu {
  top: calc(100% - 3px) !important;
}


/* Dropdown Innenabstände wiederhergestellt */
.site-header .menu li .sub-menu a {
  padding: 6px 14px;
  margin: 4px 0;
}


/* Mobile Body Padding */
@media (max-width: 768px){ .container{padding-left:16px; padding-right:16px} }

/* Toggle Button Styling */
#menu-toggle{
  display:none;
  background: var(--nav-btn-bg);
  color:#000;
  border:0;
  border-radius:3px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:6px 10px;
}
#menu-toggle:hover{
  background: var(--nav-btn-hover-bg);;
}

/* Position Toggle nach rechts */
@media (max-width: 768px){
  .header-inner{justify-content:space-between}
  #menu-toggle{display:block; margin-left:auto}
}


/* Mobile: Header/Footer vollflächig, Inhalt ausgerichtet */
@media (max-width: 768px){
  .site-header, .site-footer{padding-left:0; padding-right:0}
  .site-header .container, .site-footer .container{padding-left:16px; padding-right:16px}
}


/* Mobile: Body-Text seitlich gepolstert */
@media (max-width: 768px){
  main.container{padding-left:16px; padding-right:16px}
  /* Safety for VC fullwidth rows inside main */
  main.container .vc_row{padding-left:16px; padding-right:16px}
}


/* =====================
   Buttons global
   ===================== */
:root{
  --btn-radius:8px;
  --btn-pad-y:10px;
  --btn-pad-x:18px;
}

.btn{
  display:inline-block;
  background:var(--nav-btn-bg);
  color:#000;
  border:0;
  border-radius:var(--btn-radius);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  text-align:center;
  transition:background .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ background:var(--nav-btn-hover-bg); color:#000; }

.btn-secondary{
  background:#fff;
  color:var(--color-primary);
  border:2px solid var(--color-primary);
}
.btn-secondary:hover{
  background:rgba(8,0,255,0.08);
}

.btn-outline{
  background:transparent;
  color:#000;
  border:2px solid #000;
}
.btn-outline:hover{ filter:brightness(0.95); }

.btn-lg{ padding:14px 22px; border-radius:12px; }
.btn-sm{ padding:6px 12px; border-radius:6px; font-weight:500; }

/* Link-Button Reset */
a.btn{ text-decoration:none; }

/* =====================
   Formulare
   ===================== */
:root{
  --input-bg:#fff;
  --input-border:#D1D5DB;
  --input-text:#111;
  --input-radius:8px;
  --input-focus: var(--color-primary);
  --input-placeholder:#9CA3AF;
  --input-invalid: var(--color-error);
}

label{display:block;font-weight:600;margin:8px 0 6px}
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], select, textarea{
  width:100%;
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--input-border);
  border-radius:var(--input-radius);
  padding:10px 12px;
  line-height:1.4;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{min-height:140px; resize:vertical}
input::placeholder, textarea::placeholder{color:var(--input-placeholder)}

input:focus, textarea:focus, select:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 3px rgba(8,0,255,.15);
}

.is-error input, .is-error textarea, .is-error select,
input.error, textarea.error, select.error{
  border-color:var(--input-invalid);
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

.form-help{font-size:0.875rem;color:#555;margin-top:6px}
.form-error{font-size:0.875rem;color:var(--input-invalid);margin-top:6px}

/* Abstand zwischen Formularfeldern */
.form-row{margin-bottom:16px}
@media (min-width:769px){
  .form-row.inline{display:flex; gap:16px}
  .form-row.inline > *{flex:1 1 0}
}


/* Dropdown Panel Hintergrund + Layout */
.menu li{position:relative}
.menu li .sub-menu{
  display:none;
  position:absolute; left:0; top:100%;
  margin:1px 0 0 0;
  padding:6px 8px;
  background: var(--dropdown-bg);
  border-radius:12px;
  list-style:none;
  z-index: 1000;
}
.menu > li:hover > .sub-menu{display:block}

/* Submenu items bleiben Buttons wie Hauptnav */
.menu li .sub-menu a{
  display:inline-block;
  width:auto;
  background: var(--nav-btn-bg);
  color:#000;
  border-radius:8px;
  padding:6px 14px;
  margin:4px 0;
  white-space:nowrap;
}
.menu li .sub-menu a:hover{background: var(--nav-btn-hover-bg)}

/* Mobile: Submenu klappt per JS auf, wird statisch gerendert */
@media (max-width:768px){
  header .nav .menu{position:relative}
  header .nav .menu li .sub-menu{
    position:static;
    display:none; /* per JS toggeln */
    padding:6px 0;
    background: transparent; /* Panel-Hintergrund optional aus */
  }
}


/* Mobile Nav: Menü unter dem Header, volle Breite */
@media (max-width:768px){
  .header-inner{justify-content:space-between}
  #menu-toggle{margin-left:auto; display:block}

  header .nav{position:static}
  header .nav .menu{
    position:static;
    right:auto; left:auto;
    top:auto;
    width:100%;
    background:#fff;
    color:#111;
    padding:10px 12px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    display:none;            /* hidden by default */
    flex-direction:column; gap:6px;
  }
  header .nav.menu-open .menu{display:flex}

  /* Submenus: collapsed by default, expand under parent */
  header .nav .menu li .sub-menu{display:none; position:static; padding:6px 0; background:transparent}
  header .nav .menu li.sub-open > .sub-menu{display:block}
}


/* Mobile: Toggle fix hart rechts via Flex-Order */
@media (max-width:768px){
  .header-inner{display:flex;align-items:center;justify-content:space-between}
  .brand{order:1}
  header .nav{order:2; margin-left:12px}
  #menu-toggle{order:3; margin-left:auto; display:block}
}


/* Mobile: Menü unter dem Toggle darstellen */
@media (max-width:768px){
  .header-inner{flex-wrap:wrap}
  header .nav{order:4; flex-basis:100%}
  header .nav .menu{width:100%; margin-top:12px}
}

/* Nav-Buttons optional deaktivieren (nur Textlinks) */
body.nav-text .site-header .menu a{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  color:var(--color-text-light) !important;
}
body.nav-text .site-header .menu a:hover{
  background:none !important;
  color:#FFF8BA !important;
}
body.nav-text .menu li .sub-menu a{
  background:none !important;
  color:#000 !important;
  padding:6px 0 !important;
  border-radius:0 !important;
}


/* Mobile Menü: Hintergrund & Textfarbe steuerbar */
@media (max-width:768px){
  header .nav .menu{
    background: var(--mobile-nav-bg);
    color: var(--mobile-nav-text);
  }
  body.nav-text header .nav .menu a{
    color: var(--mobile-nav-text) !important;
  }
}


/* Footer 3-Spalten-Layout */
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:24px;
  padding:12px 0;
}
.footer-title{font-size:1rem;font-weight:700;margin:0 0 8px}
.footer-text{font-size:.95rem;line-height:1.5}
.footer-social{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.footer-social a{color: var(--footer-icon);text-decoration:none}
.footer-social a:hover{text-decoration:underline}

.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:8px}

@media (max-width:1024px){
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width:768px){
  .footer-grid{grid-template-columns: 1fr; gap:16px}
  .footer-bottom{flex-direction:column; gap:8px}
}


/* Footer Social Icons (color via currentColor) */
.footer-social{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.footer-social a{color: var(--footer-icon);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background: var(--footer-icon-bg);margin:0;padding:0}
.footer-col-menu .menu li{margin:4px 0}
.footer-col-menu .menu a{display:inline-block;padding:0;margin:0;color:#000;text-decoration:none}
.footer-col-menu .menu a:hover{text-decoration:underline}

.footer-social a:hover{ color: var(--footer-icon-hover); }


/* Footer text color variable */
.site-footer{ color: var(--footer-text); }
.site-footer a{ color: var(--footer-text); }
.site-footer a:hover{ opacity:.85; }


.footer-col-menu .menu > li{margin:4px 0}
.footer-col-menu .menu > li:first-child{margin-top:0}


/* Footer: Menü-Linkfarbe = Footer-Textfarbe */
.site-footer .menu a{ color: var(--footer-text) !important; }
.site-footer .menu a:hover{ color: var(--footer-text) !important; opacity:.85; }

/* Footer: Gleiches vertikales Alignment und Abstände in Spalte 1 */
.footer-col-menu .menu{ list-style:none; margin:0 !important; padding:0 !important; }
.footer-col-menu .menu li{ margin:4px 0; line-height:1.4; }
.footer-col-menu .menu li a{ display:inline-block; vertical-align:middle; padding:0; margin:0; text-decoration:none; }

/* Footer: Seitenrand-Padding für kleinere Desktops */
@media (max-width: 1200px){
  .site-footer .container{ padding-left:16px; padding-right:16px; }
}


/* Footer: Einheitlicher Abstand unter Titel */
.footer-title{ margin-bottom:12px !important; }






.footer-col-menu .menu > li{ line-height:1.5; margin:4px 0; }
.footer-col-menu .menu > li:first-child{ padding-top:6px; } /* feine Absenkung nur des ersten Eintrags */
.footer-col-menu .menu a{ display:inline-block; padding:0; margin:0; }

/* Footer Spalte 1: nur ersten Menüpunkt nach unten rücken und Line-Height angleichen */
.footer-col-menu .menu{ margin-top:0 !important; padding:0 !important; list-style:none; }
.footer-col-menu .menu > li{ line-height:0.5; margin:6px 0; }
.footer-col-menu .menu > li:first-child{ padding-top:6px; } /* feine Absenkung nur des ersten Eintrags */
.footer-col-menu .menu a{ display:inline-block; padding:0; margin:0; }


/* Logo sizing via variable */
.brand img, .brand svg, .brand .brand-logo-html{ 
    max-width: var(--logo-max-width); 
    height: auto; 
    display:block; 
}
.brand .brand-logo-html {
    /* Wichtig: Erlaubt dem Container, sich an den SVG-Inhalt anzupassen */
    display: inline-block; 
}
.brand .brand-logo-html svg{ 
    width:100%; 
    height:auto; 
    display:block; 
}


/* Layout: Einheitliche Container-Breite für Header/Body/Footer */
.container{max-width:var(--container-max,1200px);margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.header-inner, .footer-grid, .footer-bottom{padding-left:0;padding-right:0}
/* Footer-Icons: keine zusätzlichen Innenabstände rechts/links */
.site-footer .footer-col-social{padding-left:0;padding-right:0}
.footer-social{margin-left:0;margin-right:0}


/* Footer: Social-Spalte bündig rechts */
.footer-col-social{display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-right:0!important;margin-right:0!important}
.footer-col-social .footer-title{align-self:flex-end;text-align:right}
.footer-social{display:flex;gap:12px;margin:0;padding:0;list-style:none;justify-content:flex-end}
.footer-social li{margin:0;padding:0}
.footer-social a{display:inline-flex}


/* Menü Hover-Farbe (erzwingt Farbe für Header-Nav, Dropdowns, Mobile) */
.site-header .nav .menu a:hover,
.site-header .nav .menu li:hover > a,
.site-header .nav .menu a:focus,
.site-header .nav .menu .sub-menu a:hover,
.site-header .nav .menu .sub-menu li:hover > a,
.mobile-menu .menu a:hover,
.mobile-menu .menu a:focus,
.mobile-menu .menu .current-menu-item > a{
  color: var(--menu-hover) !important;
}


/* Menü Hover-Farbe auch im Footer-Menü */
.site-footer .footer-col-menu .menu a:hover,
.site-footer .footer-col-menu .menu li:hover > a,
.site-footer .footer-col-menu .menu a:focus{
  color: var(--menu-hover) !important;
}


/* Logo sizing via variable (applies to WP custom logo too) */
.brand img,
.brand svg,
.brand .brand-logo-html,
.custom-logo,
.custom-logo-link img{
    max-width: var(--logo-max-width, 160px);
    height: auto;
    display: block;
}


/* Logo sizing fix for Website-Information logo as well */
.site-header img.custom-logo,
.site-header .custom-logo-link img,
.site-header .site-branding img,
.brand img {
    max-width: var(--logo-max-width,160px) !important;
    height:auto;
}


/* Header-Höhe und Logo-Skalierung */
.site-header{ min-height: var(--header-height,80px); position:relative; }
.header-inner{ min-height: var(--header-height,80px); display:flex; align-items:center; }
.brand{ display:flex; align-items:center; } 

/* Erzwinge skalierung für alle möglichen Logo-Quellen (FIX FÜR ABSCHNEIDEN: max-height entfernt!) */
.site-header img.custom-logo,
.site-header .custom-logo-link img,
.site-header .site-branding img,
.brand img,
.brand svg,
.brand .brand-logo-html svg {
    max-width: var(--logo-max-width,160px) !important;
    /* max-height wurde entfernt, damit das hohe SVG nicht abgeschnitten wird. */
    height: auto !important; 
    width: 100% !important; 
}


/* Falls WP Breiten/Höhen-Attribute setzt */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .site-branding img{
    height: auto !important;
    width: auto !important; 
}


/* Accessibility: scoped focus styles only on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* Prevent admin bar focus outlines appearing as a line at top */
#wpadminbar a:focus,
#wpadminbar a:focus-visible { outline: none !important; }

/* Hard reset to avoid stray 1px gaps around header/footer */
html, body { margin:0; }
.site-header, .site-footer { margin:0; border:0; box-shadow:none; }
.wrapper::before { top:0; bottom:0; }

/* ** FIX: Hartnäckiger VC Overflow, nur für die Startseite ** */

/* Dies verhindert, dass ein Element außerhalb der Hauptseite den Viewport überläuft */
.wrapper {
    overflow-x: hidden !important; 
    max-width: 100vw !important;
}

/* Diese Regel ist sehr spezifisch und sollte alle VC-Breiten (die das Zoomen auslösen) 
   auf maximal die Breite des Containers reduzieren.
*/
.container .vc_row, 
.container .vc_row-fluid, 
.container .vc_column {
    box-sizing: border-box !important;
    max-width: 100% !important; /* Wichtig: Hier 100%, nicht 100vw, da es im .container ist */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Stellt sicher, dass das Main-Tag (der Content-Bereich) nicht überläuft */
main.container {
    overflow-x: hidden !important;
    max-width: 100% !important;
}