@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,500;1,700&display=swap');

/*  ============================================================
    Florian Autoglas — SimplyBook  ·  "CSS der Buchungsseite"
    Zielseite: florianautoglas.simplybook.it  (v2, Theme "concise")

    Selektoren aus dem echten DOM der Seite. Die SimplyBook-Vorlage
    (#events / #eventForm / .timeline / .zend_form) gehoert zur alten
    Oberflaeche und existiert hier nicht — daher blieb sie wirkungslos.

    CI: primary #51a3d3 · rot #d62e2f · dunkel #0c1117 / #1a2129
        Radius 0 · keine Schatten · Roboto 700 / 500 / 300
    ============================================================ */


/* ---------- 1. Schrift ---------- */
body.--theme-concise,
body.--theme-concise input,
body.--theme-concise textarea,
body.--theme-concise select {
	font-family: Roboto, Arial, sans-serif !important;
}


/* ---------- 2. Kopfbereich: schwarz mit weisser Schrift ---------- */
header.web {
	background: #000000 !important;   /* identisch zur Website-Navbar: reines Schwarz */
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: none !important;
}

header.web .nav-item a,
header.web .menu-item a,
header.web .brand,
header.web .company-name,
header.web .company-name-only,
header.web .nav-trigger {
	color: #ffffff !important;
}

header.web .nav-item a,
header.web .menu-item a {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-decoration: none !important;
	border-radius: 0 !important;
	border-bottom: 0 !important;
	transition: text-decoration-color .2s ease !important;
}

/* aktiv + hover: weiss unterstrichen */
header.web .nav-item a:hover,
header.web .menu-item a:hover,
header.web .nav-item.active a,
header.web .menu-item.active a,
header.web .nav-item a.active,
header.web .menu-item a.active {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-decoration-color: #ffffff !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 6px !important;
}


/* ---------- 3. Ueberschriften ---------- */
.title-main,
.title-sub,
.company-name,
.company-name-only {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
	letter-spacing: 0 !important;
}

.title-small {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
	font-size: 18px !important;
	letter-spacing: 0 !important;
}


/* ---------- 4. Buttons: Grundform ---------- */
/*  WICHTIG: Die Buttons sind DIVs mit einem <a> darin.
    Ohne die Regel fuer ".btn a" behaelt der Link seine eigene
    Farbe — dann steht z. B. blaue Schrift auf blauem Grund.     */
.btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 20px !important;
	font-style: italic !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

.btn > a,
.btn > span:not(.icon) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	padding: 14px 26px !important;
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}


/* ---------- 5. Haupt-Aktionen: rot mit Streifen ---------- */
/*  „Buchen“ · „Auswaehlen“ · Weiter im Ablauf
    :not(.fb):not(.ig) schliesst die Social-Icon-Buttons aus.    */
.btn.book,
.btn.select,
.btn--action:not(.fb):not(.ig),
.book-btn-container .btn:not(.map) {
	border: 2px solid #d62e2f !important;
	background-color: #d62e2f !important;
	background-image: url(https://cdn.prod.website-files.com/66c5bbdaed651c78c05b440d/6a8c2ab6c234c49d24274678_button-stripes-rot-v2.svg) !important;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	color: #ffffff !important;
}
.btn.book:hover,
.btn.select:hover,
.btn--action:not(.fb):not(.ig):hover,
.book-btn-container .btn:not(.map):hover {
	background-image: none !important;
	background-color: transparent !important;
	border-color: #d62e2f !important;
	color: #d62e2f !important;
}


/* ---------- 6. Neben-Aktionen: blau mit Streifen ---------- */
/*  z. B. „Auf Karte zeigen“                                     */
.btn.map,
.btn-with-image:not(.book),
.btn-with-icon:not(.book) {
	border: 2px solid #51a3d3 !important;
	background-color: #51a3d3 !important;
	background-image: url(https://cdn.prod.website-files.com/66c5bbdaed651c78c05b440d/6a8c2ab7a609bba0b8f3b544_button-stripes-blau-v2.svg) !important;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	color: #ffffff !important;
}
.btn.map:hover,
.btn-with-image:not(.book):hover,
.btn-with-icon:not(.book):hover {
	background-image: none !important;
	background-color: transparent !important;
	border-color: #51a3d3 !important;
	color: #51a3d3 !important;
}


/* ---------- 7. Social-Icons (Facebook / Instagram) ---------- */
/*  Ohne Rahmen und Flaeche. Die SimplyBook-SVGs werden ausgeblendet
    und durch die Original-Icons der Website ersetzt (weiss).       */
.btn--action.fb,
.btn--action.ig,
.btn-bar__social-links .btn {
	width: 34px !important;
	min-width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 26px 26px !important;
	box-shadow: none !important;
	transition: opacity .2s ease !important;
}
.btn--action.fb {
	background-image: url(https://cdn.prod.website-files.com/66c5bbdaed651c78c05b440d/66fe68c6968256f5e43577c8_Facebook%20Icon.svg) !important;
}
.btn--action.ig {
	background-image: url(https://cdn.prod.website-files.com/66c5bbdaed651c78c05b440d/66fe68c65d78b249df1e86af_Instagram%20Icon.svg) !important;
}
/* SimplyBook-eigene Icons verstecken */
.btn--action.fb .icon,
.btn--action.ig .icon,
.btn--action.fb svg,
.btn--action.ig svg,
.btn-bar__social-links .btn svg {
	display: none !important;
}
.btn--action.fb > a,
.btn--action.ig > a,
.btn-bar__social-links .btn > a {
	padding: 0 !important;
}
.btn--action.fb:hover,
.btn--action.ig:hover,
.btn-bar__social-links .btn:hover {
	background-color: transparent !important;
	border: 0 !important;
	opacity: 0.7 !important;
}


/* ---------- 8. Schritt-Anzeige (Schaden · Termin · Kunde) ---------- */
.step_info_item {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-style: normal !important;
	letter-spacing: 1px !important;
	border-radius: 0 !important;
	transition: color .2s ease, border-color .2s ease !important;
}
.step_info_item.active,
.step_info_item.current,
.step_info_item.passed {
	color: #51a3d3 !important;
	border-bottom: 3px solid #51a3d3 !important;
}


/* ---------- 9. Leistungs-Karten ---------- */
.service-item,
.tab,
.tab-col,
.tab-with-popup {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.service-item {
	border: 1px solid rgba(81, 163, 211, 0.35) !important;
	transition: border-color .2s ease !important;
}
.service-item:hover {
	border-color: #51a3d3 !important;
}
.service-item.selected,
.service-item.active,
.tab.selected,
.tab.active {
	border: 2px solid #51a3d3 !important;
}


/* ---------- 10. Fliesstext & Mehr-Links ---------- */
.excerpt-info,
.full-info,
.bar-service {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 300 !important;
	line-height: 1.6 !important;
}
.read-more,
.close-full-info {
	color: #51a3d3 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.read-more:hover,
.close-full-info:hover {
	color: #3d8bbc !important;
	text-decoration: underline !important;
}


/* ---------- 11. Oeffnungszeiten ---------- */
.day {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 300 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.time {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums !important;
	letter-spacing: 0 !important;
}


/* ---------- 12. Telefon & Links ---------- */
.phone,
.phone-number {
	font-family: Roboto, Arial, sans-serif !important;
	font-weight: 700 !important;
}
.links a {
	color: #51a3d3 !important;
	text-decoration: none !important;
	transition: color .2s ease !important;
}
.links a:hover {
	color: #3d8bbc !important;
	text-decoration: underline !important;
}


/* ---------- 13. Formularfelder (Schritt „Kunde“) ---------- */
.sb-layout input[type="text"],
.sb-layout input[type="email"],
.sb-layout input[type="tel"],
.sb-layout input[type="number"],
.sb-layout textarea,
.sb-layout select {
	min-height: 48px !important;
	padding: 12px 14px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 300 !important;
	transition: border-color .2s ease !important;
}
.sb-layout textarea {
	min-height: 110px !important;
}
.sb-layout input:focus,
.sb-layout textarea:focus,
.sb-layout select:focus {
	border-color: #51a3d3 !important;
	outline: 2px solid rgba(81, 163, 211, 0.35) !important;
	outline-offset: 1px !important;
}


/* ---------- 14. Kalender & Zeitfenster ---------- */
.sb-layout .calendar,
.sb-layout .datepicker,
.sb-layout .timeline {
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: Roboto, Arial, sans-serif !important;
}
.sb-layout .day-item,
.sb-layout .time-item {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.sb-layout .day-item.selected,
.sb-layout .time-item.selected,
.sb-layout .is-selected,
.sb-layout .active-day {
	background-color: #51a3d3 !important;
	color: #ffffff !important;
	border-radius: 0 !important;
}


/* ---------- 15. Ladeanzeige ---------- */
.preloader {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.preloader:after,
.preloader:before {
	border-top-color: #51a3d3 !important;
}


/* ---------- 16. Datenschutz-Hinweis ("Personenbezogene Daten") ---------- */
/*  Stand vorher im dunklen Enzianblau #13447c — jetzt CI-Cyan.    */
.gdpr-popup a,
.gdpr-popup .text-center a {
	color: #51a3d3 !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	transition: color .2s ease !important;
}
.gdpr-popup a:hover,
.gdpr-popup .text-center a:hover {
	color: #3d8bbc !important;
	text-decoration: underline !important;
}


/* ---------- 17. Leeres "Ueber uns"-Feld ausblenden ---------- */
/*  Der mittlere Kasten auf der Startseite ist die Firmen-
    beschreibung. Solange in SimplyBook kein Text hinterlegt ist,
    bleibt er leer. Entweder Text pflegen (Einstellungen >
    Firmeninformationen) ODER die naechste Zeile aktivieren:      */
/* #about-us { display: none !important; } */


/* ---------- 18. Dialoge ---------- */
.modal-dialog,
.modal .modal-content {
	border-radius: 0 !important;
	box-shadow: none !important;
	border: 2px solid #51a3d3 !important;
	font-family: Roboto, Arial, sans-serif !important;
}


/* ---------- Schrittanzeige: Fortschrittsbalken ---------- */
/*  Der Balken unter dem aktiven Schritt ist ein ::before-Element
    und stand im dunklen Enzianblau #13447c — jetzt CI-Cyan.      */
.step_info_item.active::before,
.step_info_item.current::before,
.step_info_item.passed::before {
	background-color: #51a3d3 !important;
}
.step_info_item.active {
	background-color: transparent !important;
}


/* ---------- Steinschlagreparatur: blauer Auswahl-Button ---------- */
/*  Reihenfolge-basiert: Karte 1 = Frontscheibentausch (rot),
    Karte 2 = Steinschlagreparatur (blau). Werden die Leistungen
    in SimplyBook umsortiert, muss die Zahl angepasst werden.      */
.service-item:nth-child(2) .btn.select {
	border-color: #51a3d3 !important;
	background-color: #51a3d3 !important;
	background-image: url(https://cdn.prod.website-files.com/66c5bbdaed651c78c05b440d/6a8c2ab7a609bba0b8f3b544_button-stripes-blau-v2.svg) !important;
}
.service-item:nth-child(2) .btn.select:hover {
	background-image: none !important;
	background-color: transparent !important;
	border-color: #51a3d3 !important;
	color: #51a3d3 !important;
}


/* ---------- Schrittanzeige: Textfarbe der Kind-Elemente ---------- */
/*  Der sichtbare Text sitzt nicht im <li>, sondern in .title-small
    darin — und der hatte eine eigene Farbe (#13447c dunkelblau).
    Mit "inherit" uebernimmt er die Farbe des Schritts: cyan wenn
    aktiv, weiss wenn nicht.                                        */
.step_info_item a,
.step_info_item .content,
.step_info_item .title-small,
.step_info_item .title-sub {
	color: inherit !important;
}