/* batterX rebuild: additions to the original theme CSS (style.css) for the CMS version of the markup. */

/* Switches the client sets in the editor ("Grüner Hintergrund", "Bild links"): invisible markers */
.tm-flag, .cta-flag { display: none; }

/* Text with picture(s): text column + picture column; "Bild links" puts the picture first */
.block-text-media .tm-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -1.5rem; row-gap: 1.5rem; --tm-text: 41.6667%; --tm-media: 58.3333%; }
.block-text-media .tm-row > div { padding: 0 1.5rem; width: 100%; }
.block-text-media .tm-bg-wrapper:has(> .tm-flag-left) .tm-col-media { order: -1; }
.block-text-media .tm-bg-wrapper:has(> .tm-flag-left) .tm-row { --tm-text: 58.3333%; --tm-media: 41.6667%; }
.block-text-media--67-33 .tm-bg-wrapper .tm-row, .block-text-media--67-33 .tm-bg-wrapper:has(> .tm-flag-left) .tm-row,
.block-text-media--33-67 .tm-bg-wrapper .tm-row, .block-text-media--33-67 .tm-bg-wrapper:has(> .tm-flag-left) .tm-row { --tm-text: 66.6667%; --tm-media: 33.3333%; }
.block-text-media--40-space-40 .tm-bg-wrapper .tm-row, .block-text-media--40-space-40 .tm-bg-wrapper:has(> .tm-flag-left) .tm-row { --tm-text: 41.6667%; --tm-media: 41.6667%; justify-content: space-between; }
@media (min-width: 768px) {
  .block-text-media .tm-row > .tm-col-text:only-child { width: 66.6667%; margin: 0 auto; }
}
@media (min-width: 992px) {
  .block-text-media .tm-row { row-gap: 3rem; }
  .block-text-media .tm-row > .tm-col-text { width: var(--tm-text); }
  .block-text-media .tm-row > .tm-col-media { width: var(--tm-media); }
  .block-text-media .tm-row > .tm-col-text:only-child { width: 66.6667%; }
}
@media (max-width: 991px) {
  .block-text-media .tm-col-media { margin-bottom: 1.5rem; }
}
.block-text-media .dv-splide-text-media:has(.splide__slide:only-child) { padding-bottom: 0; }
.block-text-media .dv-splide-text-media .splide__slide img { width: 100%; height: 100%; display: block; object-fit: contain; }
.block-text-media .tm-text ul ul { margin-top: .5rem; }
img[style*="aspect-ratio"] { height: auto; }
/* Sliders without JavaScript: scroll sideways instead of staying invisible */
.splide { visibility: visible; }
html:not(.js) .splide__list { display: flex; overflow-x: auto; gap: 2rem; }
html:not(.js) .splide__slide { flex: 0 0 min(80%, 360px); }

/* Header: the burger is a button */
.burger-menu { background: none; border: 0; padding: 0; }

/* Headings made of three fields: an empty part leaves no gap */
h1 > span:empty, h2 > span:empty, h3 > span:empty, h1 > strong:empty, h2 > strong:empty, h3 > strong:empty { display: none; }

/* Hero text field */
section.block-hero .hero-item .hero-content .hero-wysiwyg p:last-child { margin-bottom: 0; }

/* Teaser cards: the intro is formatted text (a <div> with paragraphs) */
.block-teasers .teaser-intro p:last-child { margin-bottom: 0; }
.block-teasers .teaser-intro { margin-bottom: 1rem; }

/* Product cards (overview, slider): the link holds the whole card */
.block-products .product-card, .block-products .product-slider-card { color: inherit; }

/* CTA with a picture (c-Serie) */
.block-cta .cta-image img { max-width: 300px; height: auto; display: inline-block; }

/* Tabs and events: without JavaScript every panel is open */
html:not(.js) .block-why-us--tabs .usp-panel { max-height: none; opacity: 1; }
html:not(.js) .block-faq .collapse { display: block; }
.block-why-us--tabs .usp-item { display: contents; }

/* Events: the trigger is a link to the event's own page (JavaScript opens the panel instead) */
.block-events .event-trigger { text-decoration: none; }
.block-events .event-end:not(:empty)::before { content: " - "; }
.block-events .title small { display: inline-block; align-self: center; }
.block-events .events-empty { margin: 0; }
html:not(.js) .block-events .event-item .event-panel { display: none; }
.block-event-single .event-single { display: grid; gap: 0; }
.block-event-single .event-single-image img { width: 100%; height: auto; display: block; max-height: 420px; object-fit: cover; }
.block-event-single .event-panel.is-open { max-width: 100%; max-height: none; opacity: 1; width: 100%; padding: 0; }
.block-event-single .event-single-dates { color: #9cc417; font-weight: 600; font-size: 1.25rem; margin: 0; }
.block-event-single .event-single-location { color: #fff; margin: 0; }
.block-event-single .event-panel-body .btn { align-self: flex-start; }
.block-event-single .event-back { margin-top: 2rem; }
.block-event-single .event-back a { color: #1b1c18; font-weight: 600; }
@media (min-width: 1025px) {
  .block-event-single .event-single { grid-template-columns: 2fr 3fr; }
  .block-event-single .event-single-image img { height: 100%; max-height: none; }
}

/* Downloads: the file link is the name; the pill is clickable as a whole */
.block-downloads .download-pill { position: relative; }
.block-downloads .download-link { color: inherit; text-decoration: none; }
.block-downloads .download-link::after { content: ""; position: absolute; inset: 0; }
.block-downloads .download-meta { display: block; }
.block-downloads .download-meta span:empty { display: none; }
.block-downloads .download-meta span:not(:empty) ~ span:not(:empty)::before { content: " — "; }
.block-downloads .download-name { display: block; }
/* a download without an uploaded file is left out until the client uploads one */
.block-downloads .download-item:not(:has(.download-link)) { display: none; }

/* Partners: an empty phone / email / website shows no icon */
.partners__list .links a[href=""], .partners__list .links a:not([href]) { display: none; }

/* Footer credit line (hidden at first) */
.footer-credit br { display: block; }

/* Contact form (CMS module) in the look of the original form */
.contact-form .cms-contact-form { max-width: none; column-gap: 1.5rem; row-gap: 28px; }
.contact-form .cms-contact-field { margin: 0; }
.contact-form .cms-contact-field > label, .contact-form .cms-contact-field > legend { display: block; font-size: 1rem; font-weight: 400; margin: 0 0 .5rem 1rem; padding: 0; }
.contact-form .cms-contact-field input:not([type=checkbox]):not([type=radio]), .contact-form .cms-contact-field textarea, .contact-form .cms-contact-field select {
  background: #fff; border: 1px solid transparent; border-radius: 99vmax; color: #363636; font-family: Poppins, Arial, sans-serif; font-size: 1em;
  outline: none; padding: 1rem 2rem; transition: border-color .2s ease, box-shadow .2s ease; width: 100%;
}
.contact-form .cms-contact-field textarea { border-radius: 2rem; height: 82px; min-height: 82px; }
.contact-form .cms-contact-field--name, .contact-form .cms-contact-field--email { grid-column: 1 / -1; }
.contact-form .cms-contact-field input:hover, .contact-form .cms-contact-field textarea:hover, .contact-form .cms-contact-field select:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.contact-form .cms-contact-field input:focus, .contact-form .cms-contact-field textarea:focus, .contact-form .cms-contact-field select:focus { border-color: #9cc417; box-shadow: 0 0 0 3px rgba(156, 196, 23, .18); }
.contact-form .cms-contact-heading { font-size: 1rem; font-weight: 600; margin: 0 0 -1rem 1rem; }
.contact-form .cms-contact-choice input, .contact-form .cms-contact-consent input { accent-color: #9cc417; }
.contact-form .cms-contact-consent { margin: 0 0 0 1rem; font-size: .9rem; }
.contact-form .cms-contact-consent a { color: #1b1c18; }
.contact-form .cms-contact-submit { background: #9cc417; border: 1px solid transparent; border-radius: 99vmax; color: #1b1c18; font-family: Poppins, Arial, sans-serif; font-size: 19px; font-weight: 600; padding: 13px 30px; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.contact-form .cms-contact-submit:hover { background: transparent; border-color: #9cc417; color: #9cc417; }
.contact-form .cms-contact-submit:disabled { opacity: .6; }
.contact-form .cms-contact-ok { background: #fff; border-left: 4px solid #9cc417; padding: 1rem 1.5rem; border-radius: 1rem; }
.contact-form .cms-contact-required { margin-left: .25rem; }
.block-event-single .event-panel-body { padding: 40px 24px; }
@media (min-width: 768px) { .block-event-single .event-panel-body { padding: 48px 48px 48px 40px; } }
.block-event-single .event-single-image { background: #1b1c18; }
.block-event-single .event-single-image img { object-fit: contain; }
/* Über batterX: the italic note (an <i> in the original) is not green there */
.block-text-media--60-40 .tm-text em { color: inherit; }
