/* Seitenlokale Styles */


/* Kopfflaeche ohne Foto.
   Die Flaeche selbst muss bleiben: .main-header .header-upper ist absolut positioniert
   (top: 60px) und hat keinen eigenen Platz - erst das Padding des Banners reserviert ihn.
   Ohne Banner legt sich die Navigation ueber den Inhalt, und weil Navi und h1 hart auf
   #ffffff stehen, waeren beide auf hellem Grund unsichtbar.
   Deshalb entfaellt nur die Bildebene: Anthrazit statt Foto. */
.inner-banner.flat{background:#101010;padding:230px 0 90px}

/* Das Theme hat nur btn-style-one (weiss auf Orange) und btn-style-two (Orange auf transparent) - auf orangem Grund ist beides unsichtbar. Daher hier die Umkehrung. */
.subscribe-section .link-box{padding-top:6px; text-align:right;}
.subscribe-section .link-box .btn-on-orange{display:inline-block;padding:16px 40px;border:1px solid #ffffff;border-radius:5px;background:#ffffff;color:#FF8F1F;font-family:'Roboto',sans-serif;font-size:20px;font-weight:600;line-height:30px;text-align:center;text-transform:uppercase;transition:all .3s ease}
.subscribe-section .link-box .btn-on-orange:hover{background:none;color:#ffffff;border-color:#ffffff}
.subscribe-section .link-box .btn-on-orange span{position:relative;display:block;z-index:1}


/* Hellvariante der Sektion "Zeiten auf einen Blick".
   Das Theme kennt fuer .start-class nur die dunkle Fassung: eine .image-layer mit
   70 % Schwarz-Overlay und .title-box h2 fest auf #ffffff. Diese Klasse dreht das um,
   ohne css/style.css anzufassen. In TYPO3 spaeter als zweiter Layout-Wert von
   mask_start_class abbildbar. */
.start-class.light{background:#ffffff;padding-bottom:40px}
.start-class.light .title-box{margin-bottom:5rem}
.start-class.light .title-box h2{color:#101010}
.start-class.light .title-col p{color:#777777}
.start-class.light .form-box{background:#F5F8FF}

.info-section .title-box .intro{margin-top:14px;color:#777;font-size:17px;line-height:1.7em}
/* Das blaue Band des Themes beginnt bei 230px und passt nur, wenn die Karte direkt oben steht.
   Hier steht ein Titel darüber und es folgen keine Info-Blöcke - deshalb abgeschaltet. */
.info-section:before{content:none}
.start-class .title-col p{font-size:17px;line-height:1.8em;margin-bottom:28px;max-width:520px}
.faqs-section .title-box.centered{margin-bottom:60px}
.map-consent{display:flex;align-items:center;justify-content:center;background:#f5f8ff;border:1px dashed #c9ced8;text-align:center}
.map-consent-inner{max-width:560px;padding:40px 30px}
.map-consent-inner .icon{display:block;margin-bottom:18px;font-size:44px;color:#ff8f1f}
.map-consent-inner h4{margin-bottom:12px;font-size:22px;font-weight:700}
.map-consent-inner p{margin-bottom:24px;color:#777;font-size:15px;line-height:1.75em}
.map-consent-inner p.alt{margin:18px 0 0;font-size:14px}
.map-consent-inner p.alt a{color:#777;text-decoration:underline}
.map-consent-inner p.alt a:hover{color:#ff8f1f}

/* Service-Kacheln: sanfter Zoom statt Rotation beim Hover.
   Überschreibt .service-block:hover .image-box .image aus style.css (Zeile 3131),
   das dort transform: rotate(25deg) setzt. style.css bleibt unangetastet;
   additional.css wird danach geladen und gewinnt bei gleicher Spezifität.
   Die Transition steht bereits auf der Basisregel, der Zoom animiert also
   auch beim Verlassen zurück. border-color aus style.css bleibt erhalten. */
.service-block:hover .image-box .image{
  -ms-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

.klassen-liste li {
  float: left;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

/* Blog-Detailseite: Kategorie/Datum und Buttons unter dem Beitrag.
   Das Theme sieht in .blog-details weder eine Info-Zeile noch Buttons vor;
   die Werte orientieren sich an .news-block .info aus style.css. */
.blog-details .lower .info{
  margin-bottom: 10px;
  color: #808080;
  font-size: 16px;
  line-height: 1.5em;
}

.blog-details .text-content .link-box{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}

/* Rechtstexte (Impressum, Datenschutz): lesbare Zeilenlänge, ruhigere
   Abstände als die Theme-Sektion .course-details, lange Wörter umbrechen. */
.legal-text{
  padding: 80px 0 70px;
}

.legal-text .content-box{
  max-width: 860px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal-text h2{
  margin: 40px 0 15px;
  font-size: 26px;
  line-height: 1.3em;
}

.legal-text h2:first-of-type{
  margin-top: 0;
}

.legal-text h3{
  margin: 25px 0 10px;
  font-size: 19px;
  line-height: 1.4em;
}

.legal-text ul{
  margin: 0 0 20px;
}

/* FAQ-Seite: Fragen in Themengruppen mit eigener Zwischenüberschrift */
.faqs-gruppiert .faq-gruppe + .faq-gruppe{
  margin-top: 50px;
}

.faqs-gruppiert .faq-gruppe-titel{
  padding-bottom: 12px;
  font-weight: 700;
  line-height: 1.30em;
  font-family: 'Roboto', sans-serif;
  padding-top: 10px;
  margin-bottom: 25px;
}

/* Navigation: Dropdowns der 1. Ebene auch per Klick (Klasse .open aus
   js/navigation.js) und per Tastatur öffnen – gleiche Werte wie
   .main-menu .navigation > li.dropdown:hover > ul.
   Bewusst :has(:focus-visible) statt :focus-within: Nach einem Mausklick
   behält der Link den Fokus, das Dropdown bliebe sonst offen stehen und
   würde von den anderen per Hover geöffneten überlagert. */
@media only screen and (min-width: 768px){
  .main-menu .navigation > li.dropdown.open > ul,
  .main-menu .navigation > li.dropdown:has(:focus-visible) > ul{
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(0px);
    -ms-transform: translate(0px);
    transform: translate(0px);
  }
}