/* BillPlace – Ergänzungen zum Nanosoft-Theme */

/* Unternavigation der Funktionsseiten (Widget-Bereich „Services“): als Leiste statt Liste */
.wpb_widgetised_column .widget_nav_menu ul.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 0; padding: 22px 0; list-style: none; }
.wpb_widgetised_column .widget_nav_menu ul.menu li { margin: 0; padding: 0; border: 0; }
.wpb_widgetised_column .widget_nav_menu ul.menu li a { font-weight: 600; font-size: 14px; }
.wpb_widgetised_column .widget_nav_menu ul.menu li.current-menu-item a { color: #1B8FD2; box-shadow: inset 0 -2px 0 #8DC63F; }

/* Footer-Menü zweispaltig */
.site-footer .widget_nav_menu ul.menu { columns: 2; column-gap: 30px; }
.site-footer .widget_nav_menu ul.menu li { break-inside: avoid; }

/* Branchen-Boxen auf der Startseite */
.iconbox .iconbox-icon i[class^="ion-"] { font-size: 52px; color: #1B8FD2; }

/* Kontaktformular */
.bp-form label { display: block; margin-bottom: 18px; font-weight: 600; font-size: 14px; }
.bp-form label .wpcf7-form-control-wrap { display: block; margin-top: 6px; font-weight: 400; }
.bp-form input:not([type=checkbox]):not([type=submit]), .bp-form select, .bp-form textarea { width: 100%; }
.bp-form textarea { height: 160px; }
.bp-form .bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.bp-form .bp-accept { font-weight: 400; }
.bp-form .bp-accept .wpcf7-form-control-wrap { display: inline; margin: 0; }
.bp-form .bp-accept .wpcf7-list-item { margin: 0 6px 0 0; }
@media (max-width: 640px) { .bp-form .bp-row { grid-template-columns: 1fr; } }

/* Startseite: Hero-Überschrift am Handy kleiner (WPBakery setzt die Größe inline) */
@media (max-width: 767px) { h1.vc_custom_heading { font-size: 2.6rem !important; } }

/* Klassischer Header: schmale Topbar (navy) mit Hinweis links, Telefon/E-Mail rechts */
.site-topbar, .site-topbar a { color: rgba(255, 255, 255, 0.8); }
.site-topbar a:hover { color: #8DC63F; }
.site-topbar .site-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; font-size: 13px; }
.site-topbar .topbar-text a.dot { color: #8DC63F; }
.site-topbar .menu-top { display: flex; gap: 24px; margin: 0; }
.site-topbar .menu-top > li { margin: 0; padding: 0; }
.site-topbar .menu-top > li > a { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; line-height: 40px !important; height: 40px; }
.site-topbar .menu-top > li > a i { display: inline-block !important; margin: 0 !important; font-size: 13px !important; }
.site-topbar .menu-top > li > a::before, .site-topbar .menu-top > li > a::after { display: none; }

/* Hauptnavigation */
#site-header .menu-primary > li > a { font-weight: 600; letter-spacing: .04em; line-height: 90px; }
#site-header .menu-primary > li > .sub-menu { top: 100% !important; margin-top: 0 !important; }
.site-header-sticky .menu-primary > li > .sub-menu { top: 100% !important; }
#site-header .header-info-text .button, .site-header-sticky .header-info-text .button { margin: 0; }
@media (max-width: 1100px) { .site-topbar .topbar-text { display: none; } .site-topbar .site-topbar-inner { justify-content: flex-end; } }
@media (max-width: 767px) { .site-topbar { display: none; } }

/* Fixierter Header beim Scrollen: 72px hoch, Logo und Menü mittig, kleineres Logo */
.site-header-sticky .header-content { height: 72px; align-items: center; }
.site-header-sticky .header-brand { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 0; }
.site-header-sticky .header-brand img.logo { width: 160px !important; height: auto; }
.site-header-sticky .navigator { align-self: stretch; display: flex; align-items: center; }
.site-header-sticky .menu-primary > li > a { font-weight: 600; letter-spacing: .04em; line-height: 72px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.site-header-sticky .menu-primary > li > .sub-menu { top: 100% !important; margin-top: 0 !important; }
.site-header-sticky .extras { display: flex !important; align-items: center; height: 72px; }

/* Footer: 4 Spalten */
.site-footer .widget_nav_menu ul.menu { columns: 1; }
.site-footer .widget_nav_menu ul.menu li { padding: 3px 0; }
.site-footer .bp-trust { list-style: none; margin: 14px 0 0; padding: 0; }
.site-footer .bp-trust li { padding: 2px 0; }
.site-footer .bp-trust i { color: #8DC63F; margin-right: 6px; }
.site-footer .bp-contact i { width: 18px; color: #1B8FD2; text-align: center; margin-right: 4px; }
.site-footer .widget .button { margin-top: 6px; }
.site-footer .widget a.button, .site-footer .widget a.button:visited { color: #fff !important; }
.site-footer .widget a.button:hover { color: #fff !important; background-color: #1B8FD2; }
/* Copyright-Leiste: Text links, Rechtliches rechts */
.site-footer .footer-copyright .copyright-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 30px; width: 100%; }
.site-footer .footer-copyright-inner { display: block; }
@media (max-width: 767px) { .site-footer .footer-copyright .copyright-content { justify-content: center; text-align: center; } }

/* „Sehen Sie BillPlace in Aktion“: Dashboard-Bildschirm rechts, ragt leicht über den Rand */
.content-bottom-widgets .bp-cta-screen, .bp-cta-screen { display: block; width: 115%; max-width: none; height: auto; margin: -40px 0 -60px -5%; filter: drop-shadow(0 30px 40px rgba(5, 10, 30, .35)); }
@media (max-width: 991px) { .bp-cta-screen { width: 100%; margin: 30px 0 0; } }

/* FAQ-Hero */
.bp-faq-hero { overflow: hidden; }
.bp-faq-hero .bp-faq-lead { color: rgba(255, 255, 255, .8); font-size: 18px; line-height: 1.6; max-width: 560px; }
.bp-faq-hero .bp-faq-chips-label { color: rgba(255, 255, 255, .6); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 28px 0 10px; }
.bp-faq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.bp-faq-chips a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff !important; font-size: 14px; line-height: 1.3; transition: background .2s, border-color .2s; }
.bp-faq-chips a:hover { background: #8DC63F; border-color: #8DC63F; }
.bp-faq-hero .bp-faq-art img { width: 100%; max-width: 620px; height: auto; animation: bp-float 6s ease-in-out infinite; }
@keyframes bp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .bp-faq-hero .bp-faq-art img { animation: none; } }
@media (max-width: 767px) { .bp-faq-hero h1.vc_custom_heading { font-size: 2.4rem !important; } .bp-faq-hero .bp-faq-art { margin-top: 20px; } }

/* Fixierter Header am Handy: Logo + Menü-Button, ohne „Vorführung vereinbaren“ (zu breit) */
.site-header-sticky .header-brand { flex: 0 0 auto; }
@media (max-width: 767px) {
	.site-header-sticky .extras { display: none !important; }
	.site-header-sticky .header-brand img.logo { width: 140px !important; }
}

/* Startseite „Für wen ist BillPlace?“: vier gleich hohe Karten */
.bp-branchen .bp-branchen-lead { color: rgba(255, 255, 255, .8); font-size: 17px; }
.bp-branchen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.bp-branche { position: relative; display: flex; flex-direction: column; height: 100%; padding: 34px 28px 30px; background: #fff; border-radius: 14px; border-top: 5px solid var(--bp-accent); box-shadow: 0 20px 40px rgba(5, 10, 30, .25); transition: transform .25s, box-shadow .25s; }
.bp-branche:hover { transform: translateY(-6px); box-shadow: 0 28px 50px rgba(5, 10, 30, .35); }
.bp-branche-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; margin-bottom: 20px; background: color-mix(in srgb, var(--bp-accent) 14%, #fff); color: var(--bp-accent); font-size: 30px; }
.bp-branche h4 { margin: 0 0 10px; }
.bp-branche p { color: #5d6884; margin: 0 0 18px; }
.bp-branche ul { list-style: none; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid #e8ecf3; }
.bp-branche li { position: relative; padding: 4px 0 4px 24px; font-size: 14px; color: #1D2347; }
.bp-branche li i { position: absolute; left: 0; top: 8px; font-size: 12px; color: var(--bp-accent); }
@media (max-width: 1100px) { .bp-branchen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bp-branchen-grid { grid-template-columns: 1fr; } }
.bp-branche-icon i { font-size: 30px !important; line-height: 1 !important; color: var(--bp-accent) !important; }
.bp-branche-icon i::before { font-size: 30px !important; }

/* Funktionsseiten: höherer Seitenkopf, Titel links, Motiv rechts im Hintergrundbild */
.bp-has-hero .content-header { min-height: 460px; display: flex; align-items: center; padding-top: 70px !important; padding-bottom: 110px !important; background-size: cover !important; background-position: center right !important; }
.bp-has-hero .content-header canvas { display: none; }
.bp-has-hero .content-header .content-header-inner { width: 100%; }
.bp-has-hero .content-header .page-title { max-width: 620px; text-align: left; }
.bp-has-hero .content-header .page-title-inner { font-size: 3.2rem !important; line-height: 1.1; text-transform: none !important; }
.bp-has-hero .content-header .subtitle { color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.6; margin-top: 18px; }
.bp-has-hero .content-header .page-title::before { content: "Funktionen"; display: block; margin-bottom: 12px; color: #8DC63F; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.page-id-707.bp-has-hero .content-header .page-title::before { content: "BillPlace"; }
@media (max-width: 991px) { .bp-has-hero .content-header { min-height: 380px; background-position: 70% center !important; } .bp-has-hero .content-header .page-title { max-width: 100%; } }
@media (max-width: 767px) { .bp-has-hero .content-header { min-height: 0; padding-top: 50px !important; padding-bottom: 90px !important; } .bp-has-hero .content-header .page-title-inner { font-size: 2.3rem !important; } .bp-has-hero .content-header .subtitle { font-size: 16px; } }
@media (max-width: 767px) {
	.bp-has-hero .content-header { background-position: 12% center !important; }
	.bp-has-hero .content-header .page-title-wrap, .bp-has-hero .content-header .page-title { width: 100% !important; max-width: 100% !important; float: none !important; }
}