@import url("fonts.css");

/*** variables ***/
:root {
    --border: 0.375rem solid rgb(var(--bs-primary-rgb));
}
/*** general ***/
* { transition: 0.2s ease; }
html, body { width: 100%; margin: 0; padding: 0; scroll-behavior: smooth; overscroll-behavior-y: none; }
html { height: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); scroll-padding-top: 5rem; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex-grow: 1; }
::placeholder { color: rgba(0, 0, 0, 0.2) !important; opacity: 1; }
svg.icon { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; vertical-align: -0.125em; }

.btn-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 3rem; }
.icon-circle { align-items: center; background: rgb(var(--bs-primary-rgb)); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 3.5rem; font-size: 1.7rem; height: 3.5rem; justify-content: center; width: 3.5rem; }
.icon-circle svg.icon { fill: rgb(255, 255, 255); }

.border-left { border-left: var(--border); border-radius: 0.375rem; }
.border-right { border-right: var(--border); border-radius: 0.375rem; }

/* topbar + header */
#topbar { line-height: 18px; height: 35px; }
#topbar a { color: rgb(255, 255, 255); text-decoration: none; }
.navbar .dropdown-toggle::after { border: solid currentColor; border-width: 0 0.1em 0.1em 0; color: rgb(var(--bs-primary-rgb)); content: ""; display: inline-block; height: 0.45em; margin-left: 0.6rem; transform: rotate(45deg) translateY(-0.15em); vertical-align: 0.15em; width: 0.45em; }
@media(min-width: 576px){ 
    .navbar .navbar-brand.logo img { width: 300px; height: 38px; }
}

/*** section spacing ***/
section { position: relative; --section-pt: 5rem; --section-pb: 5rem; --section-mt: 0rem; --section-mb: 0; padding-top: var(--section-pt); padding-bottom: var(--section-pb); margin-top: var(--section-mt); margin-bottom: var(--section-mb); }
[class*="pt-"] { padding-top: var(--section-pt); }
[class*="pb-"] { padding-bottom: var(--section-pb); }
[class*="mt-"] { margin-top: var(--section-mt); }
[class*="mb-"] { margin-bottom: var(--section-mb); }
.pt-z { --section-pt: 0rem; }
.pt-xs { --section-pt: 1.5rem; }
.pt-sm { --section-pt: 3rem; }
.pt-md { --section-pt: 5rem; }
.pt-lg { --section-pt: 7rem; }
.pt-xl { --section-pt: 9rem; }
.pt-xxl { --section-pt: 12rem; }
.pb-z { --section-pb: 0rem; }
.pb-xs { --section-pb: 1.5rem; }
.pb-sm { --section-pb: 3rem; }
.pb-md { --section-pb: 5rem; }
.pb-lg { --section-pb: 7rem; }
.pb-xl { --section-pb: 9rem; }
.pb-xxl { --section-pb: 12rem; }
.mt-z { --section-mt: 0rem; }
.mt-xs { --section-mt: 1.5rem; }
.mt-sm { --section-mt: 3rem; }
.mt-md { --section-mt: 5rem; }
.mt-lg { --section-mt: 7rem; }
.mt-xl { --section-mt: 9rem; }
.mt-xxl { --section-mt: 12rem; }
.mb-z { --section-mb: 0rem; }
.mb-xs { --section-mb: 1.5rem; }
.mb-sm { --section-mb: 3rem; }
.mb-md { --section-mb: 5rem; }
.mb-lg { --section-mb: 7rem; }
.mb-xl { --section-mb: 9rem; }
.mb-xxl { --section-mb: 12rem; }

/*** headline ***/
.section-heading { max-width: 52rem; }
.section-heading-kicker { display: block; margin-bottom: 0.75rem; text-transform: uppercase; font-weight: 600; color: rgb(var(--bs-primary-rgb)); }
.section-heading-separator { content: ""; display: block; width: 100%; height: 1rem; background: url("/theme/public/assets/images/separator.svg") no-repeat; background-position: center; }
.section-heading.text-start .section-heading-separator { background-position: left; }

/*** (sub)hero ***/
.hero { background-color: rgb(var(--bs-secondary-rgb)); isolation: isolate; overflow: hidden; position: relative; }
.hero::before { background: linear-gradient(90deg, rgba(192, 0, 31, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.hero-image { height: 100%; inset: 0; object-fit: cover; object-position: center 25%; position: absolute; width: 100%; z-index: 0; }
.hero .container { z-index: 2; }
.hero .min-vh-hero { min-height: 70vh; padding-block: 3rem; }
.hero h1 { font-size: clamp(2.1rem, 4vw, 3.75rem); max-width: 760px; text-transform: uppercase; text-shadow: 0 2px 4px rgb(0 0 0 / 35%), 0 3px 9px rgb(0 0 0 / 35%); }
.sub-hero { padding-block: 0; }
.sub-hero .breakout, .sub-hero img.breakout-right { min-height: calc(75vh - 121px); }
.sub-hero .row.align-items-center { --bs-gutter-x: 5rem; }

/*** quicklinks ***/
section.hero + section.quick-links { padding-top: 0; margin-top: -4rem; z-index: 2; }
.quick-card { border-bottom: 0.3rem solid var(--bs-primary); box-shadow: 0 0.25rem 1.35rem rgba(0, 0, 0, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.quick-card:hover { box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.18); transform: translateY(-0.35rem); }
.quick-card::after { background: linear-gradient(180deg, #fff 20%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.25) 100%); content: ""; inset: 0; position: absolute; }
.quick-card > div { z-index: 1; }

/*** media icon cards ***/
.reason { min-height: 180px; }
.reason > .icon { color: rgb(var(--bs-primary-rgb)); font-size: 4rem; margin-bottom: 1rem; }
.reason p { font-size: 0.88rem; margin-inline: auto; max-width: 210px; }

.breakout-left { position: absolute; top: 0; right: 0; width: 50vw; height: 100%; max-width: none; object-fit: cover; }
.breakout-right { position: absolute; top: 0; left: 0; width: 50vw; height: 100%; max-width: none; object-fit: cover; }

/*** media editor ***/
section.media-editor-fullsize { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
section.media-editor-fullsize .row.align-items-stretched { --bs-gutter-x: 5rem; }
section.media-editor .media-editor-icons .icon { font-size: 3rem; }

/*** image timeline ***/
section.image-timeline-fullsize { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
section.image-timeline-fullsize .row.align-items-stretched { --bs-gutter-x: 5rem; }
.image-timeline-list { --timeline-gap: 3rem; --timeline-line-width: 0.125rem; --timeline-marker-size: 3.5rem; display: grid; gap: var(--timeline-gap); }
.image-timeline-item { display: grid; grid-template-columns: var(--timeline-marker-size) minmax(0, 1fr); column-gap: 1rem; min-height: var(--timeline-marker-size); position: relative; }
.image-timeline-item:not(:last-child)::after { background: rgb(var(--bs-primary-rgb)); content: ""; left: calc((var(--timeline-marker-size) - var(--timeline-line-width)) / 2); position: absolute; top: var(--timeline-marker-size); bottom: calc(-1 * var(--timeline-gap)); width: var(--timeline-line-width); }
.image-timeline-marker { position: relative; z-index: 1; }
.image-timeline-marker:empty::after { background: currentColor; border-radius: 50%; content: ""; height: 0.5rem; width: 0.5rem; }
.image-timeline-marker svg.icon { fill: rgb(255, 255, 255); }
.image-timeline-item-content { align-self: center; min-width: 0; }
.image-timeline-image { display: block; }
section.image-timeline:not(.image-timeline-fullsize) .image-timeline-image { height: auto; width: 100%; }
.image-timeline-action { margin-top: 3rem; }
@media (max-width: 991.98px) {
    section.image-timeline-fullsize .image-timeline-row > .breakout { min-height: clamp(18rem, 60vw, 30rem); }
    section.image-timeline-fullsize .image-timeline-image.breakout-left,
    section.image-timeline-fullsize .image-timeline-image.breakout-right { left: 50%; right: auto; transform: translateX(-50%); width: 100vw; }
}
@media (max-width: 575.98px) {
    .image-timeline-list { --timeline-gap: 1.25rem; --timeline-marker-size: 3rem; }
    .image-timeline-marker { flex-basis: var(--timeline-marker-size); font-size: 1.4rem; height: var(--timeline-marker-size); width: var(--timeline-marker-size); }
}

/*** OpenStreetMap ***/
.map-contact-row,
.map-contact-map-column,
#osm_map { min-height: 400px; }
section.map-contact .row.align-items-stretched { --bs-gutter-x: 5rem; }
.map-contact-details { font-style: normal; font-weight: 600; }
.map-contact-details a { color: inherit; text-decoration: none; }
.map-contact-details a:hover { color: rgb(var(--bs-primary-rgb)); }
.map-contact-opening-hours { column-gap: 1.5rem; display: grid; grid-template-columns: auto auto; row-gap: 0.25rem; }

/*** Google reviews ***/
.google-review-google-mark { align-items: center; background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 42%, #fbbc05 0 70%, #ea4335 0); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 5rem; font-size: 2rem; font-weight: 700; height: 5rem; justify-content: center; width: 5rem; }
.google-review-rating { font-size: 1.8rem; }
.google-review-stars { color: #fbbc04; font-size: 1.25rem; letter-spacing: 0.05rem; white-space: nowrap; }
.google-review-quote { padding-left: 2rem; }
.google-review-quote::before { color: rgb(var(--bs-primary-rgb)); content: "“"; font-family: Georgia, serif; font-size: 3.5rem; font-weight: 700; left: 0; line-height: 1; position: absolute; top: -0.35rem; }
.google-reviews-control { align-items: center; background: rgb(var(--bs-primary-rgb)); border: 0; border-radius: 50%; color: #fff; display: inline-flex; height: 2.5rem; justify-content: center; width: 2.5rem; }
.google-reviews-control:hover { background: rgb(var(--bs-primary-rgb)); filter: brightness(0.9); }

/*** icon box cards ***/
.icons-box .service-card { box-shadow: 0 0.15rem 0.7rem rgb(0 0 0 / 8%); min-height: 175px; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; }
.icons-box .service-card:hover { color: rgb(var(--bs-primary-rgb)) !important; transform: translateY(-0.25rem); }
.icons-box .service-card .icon { font-size: 7rem; margin-bottom: 1rem; }

/*** faq +**/
.faq .accordion-button::after { order: -1; margin-left: 0; margin-right: 0.75rem; }
.faq .accordion-button.text-bg-primary::after,
.faq .accordion-button.text-bg-secondary::after,
.faq .accordion-button.text-bg-black::after,
.faq .accordion-button.text-bg-dark::after { background-image: none !important; background-color: currentColor; -webkit-mask-image: var(--bs-accordion-btn-icon); mask-image: var(--bs-accordion-btn-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/*** CTA banner ***/
.cta-banner-card { flex: 0 1 auto; width: auto; margin: 0; background: rgba(var(--bs-primary-rgb), 0.035); border: 1px solid rgba(var(--bs-primary-rgb), 0.22); border-left: 0.55rem solid rgb(var(--bs-primary-rgb)); border-radius: 0.375rem; box-shadow: inset 0.2rem 0 rgba(255, 255, 255, 0.6), 0 0.25rem 1.25rem rgba(0, 0, 0, 0.07); color: var(--bs-body-color); padding: clamp(1.5rem, 3vw, 3rem); }
.cta-banner-main-icon { color: rgb(var(--bs-primary-rgb)); display: inline-flex; flex: 0 0 auto; font-size: clamp(3rem, 5vw, 6rem); }
.cta-banner-heading { min-width: 0; }
.cta-banner-headline { margin-bottom: 0; min-width: 0; }
.cta-banner-editor > :last-child,
.cta-banner-editor > :last-child > :last-child { margin-bottom: 0; }
.cta-banner-list { display: grid; gap: 0.65rem; }
.cta-banner-list-item { align-items: flex-start; display: flex; font-weight: 500; gap: 0.75rem; line-height: 1.35; }
.cta-banner-list-icon { color: rgb(var(--bs-primary-rgb)); flex: 0 0 1.25rem; font-size: 1.2rem; line-height: 1.2; margin-top: 0.05rem; text-align: center; }
.cta-banner-action .btn { max-width: 100%; white-space: nowrap; }

@media (min-width: 992px) {
    .cta-banner-card > .col-lg-4 { flex: 0 1 auto; width: max-content; max-width: 25rem; }
}

/*** forms ***/
.yform label { background-color: rgb(var(--bs-dark-rgb)); color: rgb(255, 255, 255); padding-inline: 0.5rem; font-size: 0.75rem; border-radius: 4px; }
.yform .form-group { margin-bottom: 1rem; }


section.map-contact { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

@media (max-width: 575.98px) {
    .icons-box .service-card { min-height: 150px; }
    .icons-box .service-card .icon { font-size: 4rem; }
}

footer { padding-block: 3rem; }
footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }


.flatpickr + p.help-block.small { display: none; }





/* Gesamte Gruppe */
#yform-form_citko_werkstatt-contact_type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

/* Überschrift in einer eigenen Zeile, aber nur so breit wie ihr Inhalt */
#yform-form_citko_werkstatt-contact_type > .control-label {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 5px 0 2px;
}

/* Beide Auswahlfelder */
#yform-form_citko_werkstatt-contact_type > .radio {
    min-width: 0;
    margin: 0;
}

/* Klickbare Schaltflächen */
#yform-form_citko_werkstatt-contact_type > .radio > label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    margin: 0;
    padding: 0.25rem 0.75rem;
    border: 1px solid #ced4da;
    background: #fff;
    color: #212529;
    font-weight: 400;
    cursor: pointer;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    -webkit-box-shadow: var(--bs-box-shadow-inset);
    box-shadow: var(--bs-box-shadow-inset);
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

/* Äußere Rundungen */
#yform-form_citko_werkstatt-contact_type > .radio:first-of-type > label {
    border-radius: .5rem 0 0 .5rem;
}

#yform-form_citko_werkstatt-contact_type > .radio:last-of-type > label {
    margin-left: -1px;
    border-radius: 0 .5rem .5rem 0;
}

/* Original-Radio visuell verstecken, aber bedienbar lassen */
#yform-form_citko_werkstatt-contact_type input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Vorhandenes Hilfselement ausblenden */
#yform-form_citko_werkstatt-contact_type .form-helper {
    display: none;
}

/* Hover */
#yform-form_citko_werkstatt-contact_type > .radio > label:hover {
    background: #f3f4f5;
}

/* Aktive Auswahl */
#yform-form_citko_werkstatt-contact_type > .radio > label:has(input:checked) {
    z-index: 1;
    border-color: #c0001f;
    background: #c0001f;
    color: #fff;
}

/* Tastaturfokus */
#yform-form_citko_werkstatt-contact_type > .radio > label:has(input:focus-visible) {
    z-index: 2;
    box-shadow: 0 0 0 .25rem rgb(192 0 31 / 20%);
}