/*
Theme Name: Bridge Child
Version: 1.0.0
Template: bridge
*/

/* ====== Global / Layout ====== */
@media (max-width: 960px){
  .header_top .left,
  .header_top .right { display: none; }
}
@media (max-width: 1000px){
  .header_bottom { background:#fff !important; height:170px; }
}

/* Navi Abstand */

@media (max-width: 1520px){
 nav.main_menu > ul > li > a {
    font-size: 22px!important;
}	
}

nav.main_menu > ul > li > a {
    color: #000000;
    font-family: 'd7 - PatrickHand-Regular', sans-serif;
    font-size: 26px;
    font-weight: 400;
    text-transform
}

ul {list-style-position: outside;}
li {margin-left: 20px;}

/* zentrale Breite */
.qode_elementor_container_inner,
.full_width .parallax_content,
.steps_holder_inner,
div.grid_section .section_inner,
nav.content_menu ul { width:80% !important; }

.space-1 { margin-top:5%; }
.space-kontakt-img  { padding-top:3%; }
.neg-1 { margin-top:-90px; }
@media (max-width:1200px){ .dis-neg-1 { display:none; } }

.bg { background: linear-gradient(to bottom,#fff 0%,#e1e5e8 50%,#fff 100%); }

/* ====== Boxes ====== */
.box{
  background:#fff; border-radius:20px; box-shadow:0 0 30px rgba(0,0,0,.09);
  text-align:center; padding:55px;
}

@media (max-width:850px){ 
.box{
  background:#fff; border-radius:20px; box-shadow:0 0 30px rgba(0,0,0,.09);
  text-align:center; padding:15px;
}
	
.box img{
padding-bottom:20px;
}
}

.box-us{
  background:#fff; border-radius:20px; box-shadow:0 0 11px rgba(0,0,0,0.07);
  text-align:left; padding:10px 20px 30px 20px; margin:30px 0;
}

.box-us h3 { font-family:'d7 - PatrickHand-Regular',sans-serif; font-size:1.7rem; line-height:1.2; padding-top:20px; padding-bottom:10px;}


.box-us ul{
  margin-top:15px;
}

.box-us-sa{
  background:#fff; border-radius:20px; box-shadow:0 0 11px rgba(0,0,0,0.07);
  text-align:left; padding:10px 20px 30px 20px; margin:30px 0;
}

.box-us-sa h3 { font-family:'d7 - PatrickHand-Regular',sans-serif; font-size:1.7rem; line-height:1.2; padding-top:20px; padding-bottom:10px;
}

.box-us-sa ul{
  margin-top:0px;
}

.box-us-sa li{
  line-height: 36px;
}


/* ====== Skip-Links ====== */
.skip-link{
  position:absolute; top:-40px; left:0; background:#000; color:#fff;
  padding:8px 16px; z-index:1000; text-decoration:none;
}
.skip-link:focus-visible{ top:0; }
.skip-link-top{
  position:absolute; left:-9999px; top:auto; background:#000; color:#fff;
  padding:8px 12px; z-index:1000; text-decoration:none;
}
.skip-link-top:focus-visible{ left:10px; top:10px; }

/* Ziel-Abstand unter Sticky-Header */
#main-content,
input, textarea, select { scroll-margin-top:100px; }

/* ====== CF7 ====== */
.cf7-checkbox-label{
  display:flex; align-items:flex-start; gap:.5em; cursor:pointer;
  font-size:1rem; line-height:1.4;
}
.cf7-checkbox-label input[type="checkbox"]{ margin-top:.2em; flex-shrink:0; }
.error-message{ color:#b00020; font-size:.9em; margin-top:.25em; }
#privacy-hint p{ display:block; margin-bottom:1em; line-height:1.5; }
#privacy-hint a{ text-decoration:underline !important; }
.wpcf7-acceptance input[type="checkbox"]{ display:inline !important; opacity:1 !important; position:relative !important; }

.wpcf7 form.invalid .wpcf7-response-output{
  color:#000 !important; font-size:1rem !important; font-weight:bold !important;
  background:#ffeaea !important; border:2px solid #f00 !important;
  margin-top:1em !important; border-radius:4px !important; line-height:1.4 !important;
}
.wpcf7-not-valid-tip{ color:#000; font-weight:bold; font-size:1rem; }

.q_logo a:focus-visible {
    outline: 0.125rem solid #db1212;
    outline-offset: 0.15rem;
    -moz-outline-radius: 2px;
}

.q_logo a:focus-visible img {
    outline: 0.125rem solid #db1212;
    outline-offset: 0.15rem;
}

/* Basis: Link sauber darstellen */
.logo_wrapper .q_logo a {
  display: inline-block;
  line-height: 0;
}

/* Bilder als Block, damit keine Zeilenkästchen entstehen */
.logo_wrapper .q_logo a img { display: block; }

/* Standard-Outline AUS – wir zeichnen selbst */
.logo_wrapper .q_logo a:focus,
.logo_wrapper .q_logo a:focus-visible { outline: none; }

/* >>> Fokusring gezielt um das sichtbare Logo zeichnen <<< */
/* Wenn dein sichtbares Logo die Klasse .normal hat: */
.logo_wrapper .q_logo a:focus-visible img.normal {
  position: relative;                 /* für das ::after */
}
.logo_wrapper .q_logo a:focus-visible img.normal::after {
  content: "";
  position: absolute;
  inset: 0;                           /* exakt um das Bild */
  border: 2px solid #db1212;
  border-radius: 2px;                 /* optional */
  pointer-events: none;
}


/* ====== Generisches Tastatur-Fokus-Styling ====== */
a:focus{ outline:none; }
button:focus{ outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid #db1212; outline-offset:.15rem;
}

/* Slider/Carousels: Fokus nur via Tastatur */
.flexslider a:focus{ outline:none; }
.portfolio_slider a:focus{ outline:none; }
.qode_carousels a:focus{ outline:none; }
.flexslider a:focus-visible,
.portfolio_slider a:focus-visible,
.qode_carousels a:focus-visible{ outline:2px solid #db1212; outline-offset:.15rem; }

/* ====== Accordion (Bridge) ====== */
/* Headline-Grundstil */
.qode-accordion-holder h3.qode-title-holder{ font-size:1rem; padding-right:20px; }

/* Tastatur-Fokus nur bei :focus-visible */
.qode-accordion-holder .qode-title-holder[role="button"]:focus{ outline:none; }
.qode-accordion-holder .qode-title-holder[role="button"]:focus-visible{
  outline:2px solid #db1212; outline-offset:3px;
}
/* keine Doppel-Outlines auf inneren Spans */
.qode-accordion-holder .qode-title-holder *:focus,
.qode-accordion-holder .qode-title-holder *:focus-visible{ outline:none !important; }

/* Panels aus dem Fluss, wenn versteckt (JS setzt [hidden]) */
.qode-accordion-content[hidden]{ display:none !important; }

/* Hover/Farbe (Button-Variante) */
.qode-accordion-holder .qode-title-holder[role="button"]{ color:inherit; }
.qode-accordion-holder .qode-title-holder:hover,
.qode-accordion-holder .qode-title-holder[aria-expanded="true"]{ color:#fff; }

/* ====== Hero ====== */
.hero{
  position:relative; width:100%; height:67vh;
  background:url("/wp-content/uploads/2025/08/bg-index.webp") center/cover no-repeat;
  display:flex; align-items:center; justify-content:flex-start;
}
@media (max-width:960px){
.hero{
  position:relative; width:100%; height:45vh;
  background:url("/wp-content/uploads/2025/08/bg-index.webp") center/cover no-repeat;
  display:flex; align-items:center; justify-content:flex-start;
}
}

/* nur auf Unterseiten (alles außer Startseite) */
body:not(.home) .hero {
  height: 50vh;     /* kompakter Hero */
  min-height: 280px;
}

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(18,40,97,.5) 40%, rgba(70,80,95,0) 70%);
  display:flex; align-items:center; padding-inline-start:12%;
}
@media (max-width:960px){
  .hero-overlay{
    background:linear-gradient(to right, rgba(18,40,97,.5) 70%, rgba(70,80,95,0) 90%);
  }
}
@media (max-width:768px){ .hero-overlay{ padding-inline-start:4%; } }
@media (min-width:1200px){ .hero-overlay{ padding-inline-start:8%; } }

.hero-content{ color:#fff; width:50%; max-width:1200px; min-width:280px; z-index:2; }
@media (max-width:1654px){ .hero-content{ width:90% } }
@media (max-width:950){ .hero-content{ width:95%; } }


.hero-heading{ font-weight:700; font-size:3.75rem; line-height:1.05; margin:0 0 1.5rem; }
@media (max-width:1200px){ .hero-heading{ font-size:3rem; line-height:1.1; } }
@media (max-width:960px){  .hero-heading{ font-size:2.6rem; line-height:1.1; } }
@media (max-width:800px){  .hero-heading{ font-size:2.4rem; line-height:1.1; } }

.hero-heading .subtitle{
  display:block; font-weight:400; margin:0 0 2px;
  font-family:'d7 - PatrickHand-Regular',sans-serif; font-size:2.2rem; line-height:1;
}
@media (max-width:960px){  .hero-heading .subtitle{ font-size:1.8rem; line-height:1;
} }

.hero-heading .main-title{ display:block; line-height:1.2; margin-top:10px; }

.page-title .eyebrow{
  display:block;
  font-family:'d7 - PatrickHand-Regular', sans-serif;
  font-size:1.6rem;
  font-weight:400;
  margin:0 0 4px;
  color:#000;
}
.page-title{ margin:0 0 16px; line-height:1.2; }

.eyebrow {
  display: block;
  font-family: 'd7 - PatrickHand-Regular', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 4px;
  color: #000;
}

.box h3 {padding-bottom:15px;}



.hero-buttons{ display:flex; gap:1rem; }
.btn{ background:#fff; color:#000; padding:.8rem 1.2rem; border-radius:30px; text-decoration:none; font-weight:500; transition:all .3s ease; }
.btn:hover{ background:#f1f1f1; }
.btn-outline{ background:transparent; border:2px solid #fff; color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.2); }

/* ====== Carousels ====== */
.qode_carousels .slides>li{ margin:4px 17px 0 0; }

/* ====== Utilities ====== */
.space-left{ margin-left:20px; }

/* === Monats-Termine: Icon + Heading + Karten === */
.d7-month-events{ position:relative; }

/* Icon größer, aber sauber aus dem Textfluss */
.d7-month-events .d7-me__icon{
  position:absolute; left:0;     top: -0.85rem;    /* leicht nach unten, kollidiert nicht mit H2 */
  width:64px; height:70px;                   /* GRÖßER: ggf. auf 80px erhöhen */
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* Heading rückt rechts neben das Icon */
.d7-month-events .d7-me__heading{
  margin:0 0 18px 96px;                      /* Iconbreite + Abstand */
  line-height:1.2;
}

/* Liste ohne Bullets, mit Abstand rechts vom Icon */
.d7-month-events .d7-me__list{
  list-style:none !important;                /* Bullets sicher entfernen */
  padding:0 !important;
  margin:0 0 0 96px !important;              /* zum Icon ausrichten */
  display:grid; gap:14px;
}

/* Karte: Schatten + Radius + Innenabstand zurückholen */
.d7-month-events .d7-me__card{
  background:#fff !important;
  border-radius:18px !important;
  padding:16px 20px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
}

/* Typo in der Karte */
.d7-month-events .d7-me__date{ font-weight:800; font-size:1.15rem; margin:0 0 4px; }
.d7-month-events .d7-me__title{ font-weight:500; font-size:1rem; margin:0; }
.d7-month-events .d7-me__subtitle{ font-size:.98rem; color:#333; margin-top:2px; }

/* === Responsive === */
@media (max-width:768px){
  .d7-month-events .d7-me__icon{ width:64px; height:70px; top:.2rem; }
  .d7-month-events .d7-me__heading{ margin-left:80px; font-size:1.6rem; }
  .d7-month-events .d7-me__list{ margin-left:80px !important; }
}

@media (max-width:480px){
  /* sehr kleine Screens: Icon über dem Text, nichts überlappt */
  .d7-month-events .d7-me__icon{
    position:relative; left:auto; top:auto;
   width:64px; height:70px; margin:0 0 8px 0;
  }
  .d7-month-events .d7-me__heading,
  .d7-month-events .d7-me__list{ margin-left:0 !important; }
}


/* ====== Header Höhe für Skip Main ====== */
.header_top {
       height: 1px!important; }

/* ====== Reverse mobile ====== */

@media (max-width: 768px) {
  .reverse-mobile > .section_inner > .section_inner_margin {
    display: flex;
    flex-direction: column-reverse;
  }

  .reverse-mobile .wpb_column {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  .reverse-mobile .wpb_column:first-child {
    margin-top: 20px;
  }
}

/* Formular */

/* Maxbreite optional */
.d7-cf7--absence{
  max-width: 880px;
}

/* Fieldsets/Legenden rein strukturell */
.d7-fieldset{
  border: 0;
  padding: 0;
  margin: 1.25rem 0 1rem;
}
.d7-fieldset > legend{
  display: block;
  margin: 0 0 .6rem;
  font-weight: 700;          /* statt <strong> um <legend> */
}

/* Zweispaltige Gruppen */
.d7-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.d7-two > div{ min-width: 0; }  /* verhindert Überlauf bei langen Inhalten */

@media (max-width: 720px){
  .d7-two{ grid-template-columns: 1fr; }  /* mobil einspaltig */
}

/* Labels + Inputs neutral */
.d7-cf7--absence label{
  display: block;
  margin: .6rem 0 .35rem;
  font-weight: 600;
}
.d7-cf7--absence input[type="text"],
.d7-cf7--absence input[type="email"],
.d7-cf7--absence input[type="tel"],
.d7-cf7--absence input[type="date"],
.d7-cf7--absence select,
.d7-cf7--absence textarea{
  width: 100%;
  box-sizing: border-box;
  padding: .75rem .875rem;
  line-height: 1.4;
  font: inherit;
}
.d7-cf7--absence textarea{
  min-height: 7.5rem;
  resize: vertical;
}

/* Utility: Element über beide Spalten ziehen */
.span-2{ grid-column: 1 / -1; }

/* Screenreader-Only bleibt unverändert */
.screenreader-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Untermenüs standardmäßig verstecken */

/* Zeige Untermenü bei Tastatur-Fokus (focus-within) */
.menu-item-has-children:focus-within > .second {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Zeige Untermenü, wenn per JS aria-expanded="true" gesetzt wurde */
.menu-item-has-children[aria-expanded="true"] > .second {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Wenn aria-expanded aktiv ist: Untermenü zeigen */
.menu-item-has-children[aria-expanded="true"] > .second {
  height: auto !important;
  overflow: visible !important;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
}



/* ====== Footer ====== */
footer{ margin-top:70px; }