/* Montaro - Custom / Overrides
 *
 * Last in the chain: page-specific fixes and Solvent parent overrides.
 * Anything reusable belongs in components.css instead.
 *
 * @package Solvent_Child_Montaro
 */

/* Social-Icons im Footer vergroessern
 *
 * Solvent setzt beide Werte fest in solvent-core.min.css:
 *   .qodef-social-share.qodef-layout--list li a     { width:27px; height:27px }
 *   .qodef-social-share.qodef-layout--list li a svg { width:12px; height:12px }
 *
 * Das sind 0-2-3 bzw. 0-2-4. Eine Regel auf '.some ... svg' verliert dagegen,
 * egal wie spaet sie laedt. Deshalb wird der Theme-Selektor nachgebaut und um
 * .some erweitert - direkt am selben Element, ohne Leerzeichen.
 *
 * Verhaeltnis: Knopf 64, Icon 28. Ein 12px-Icon in einer 64px-Flaeche wirkt
 * verloren; 28 traegt die Flaeche, ohne sie zu fuellen.
 */

.some.qodef-social-share.qodef-layout--list li a {
    width: 64px;
    height: 64px;
}

.some.qodef-social-share.qodef-layout--list li a svg {
    width: 28px;
    height: 28px;
}

/* Formidable-Formular an das Theme angleichen
 *
 * WICHTIGSTE ERKENNTNIS: Formidable steuert seine Farben ueber EIGENE
 * CSS-Variablen auf .with_frm_style, nicht ueber normale Regeln. Ein
 * background-color oder border-color von aussen prallt ab, selbst mit
 * !important und hoeherer Spezifitaet - gemessen mehrfach. Der vorgesehene
 * Weg ist, die Variablen zu ueberschreiben.
 *
 * Formidables Standardwerte, gemessen auf /kontakt/:
 *   --border-color          #D0D5DD
 *   --border-color-active   #4199FD
 *   --submit-bg-color       #4199FD
 *   --text-color            #1D2939
 *   --label-color           #344054
 *
 * Was NICHT ueber Variablen geht und deshalb als Regel bleibt: Maße,
 * Polster, Schrift, Radius, Grossschreibung.
 *
 * NICHT LOESBAR von aussen (mehrfach geprueft, auch mit !important und
 * Inline-Styles): der Rahmen der Checkbox bleibt grau. Zu setzen in
 * Formidables eigener Stilverwaltung - Formidable -> Stile.
 */

.frm_forms.with_frm_style {
    --border-color: color-mix(in srgb, var(--mtr-ink, #08132E) 40%, transparent);
    --border-color-active: var(--mtr-accent, #D17147);
    --text-color: var(--mtr-ink, #08132E);
    --label-color: var(--mtr-ink, #08132E);
    --submit-bg-color: var(--mtr-accent, #D17147);
    --submit-border-color: var(--mtr-accent, #D17147);
    --submit-hover-bg-color: var(--mtr-ink, #08132E);
    --submit-text-color: #fff;
    --check-background-color: var(--mtr-accent, #D17147);
    --check-border-color: var(--mtr-accent, #D17147);
}

/* Beschriftungen */

.frm_forms.with_frm_style .frm_form_field > label {
    margin-bottom: 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--mtr-ink, #08132E);
}

.frm_forms.with_frm_style .frm_required {
    color: var(--mtr-accent, #D17147);
}

/* Eingabefelder: hoeher und ruhiger als der Formidable-Standard.
 * 16px Schriftgroesse ist kein Zufall - darunter zoomt iOS beim Antippen
 * automatisch in das Feld hinein. */

.frm_forms.with_frm_style input[type="text"],
.frm_forms.with_frm_style input[type="email"],
.frm_forms.with_frm_style input[type="tel"],
.frm_forms.with_frm_style input[type="number"],
.frm_forms.with_frm_style select,
.frm_forms.with_frm_style textarea {
    padding: 13px 16px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--mtr-ink, #08132E);
    background-color: #fff;

    /* Rahmenfarbe: Tint allein liegt bei 1.14:1 gegen Weiss und ist damit
     * praktisch unsichtbar - Formidables eigener Standard #d0d5dd ist mit
     * 1.6:1 kaum besser. Ink zu 40 Prozent ergibt rund 2.4:1, deutlich
     * sichtbar, laesst dem Fokuszustand aber Luft nach oben. Ueber die
     * Variable geht die Farbe beim Palettenwechsel mit. */
    border: 1px solid color-mix(in srgb, var(--mtr-ink, #08132E) 40%, transparent);

    border-radius: 10px;
    box-shadow: none;

    /* Das Theme setzt seine Formularfelder in Versalien mit 1.6px
     * Laufweite. In einem Eingabefeld ist das unbrauchbar: Was der
     * Besucher tippt, sieht anders aus als das, was er abschickt.
     * Beides braucht !important, weil die Theme-Regel spezifischer ist. */
    text-transform: none !important;
    letter-spacing: normal !important;

    transition: border-color 0.2s ease;
}

.frm_forms.with_frm_style textarea {
    min-height: 160px;
}

/* Hover und Fokus: Der Rahmen reagiert, sonst nichts. Beide brauchen
 * !important - die Theme-Regeln fuer Formularfelder sind spezifischer. */

.frm_forms.with_frm_style input[type="text"]:hover,
.frm_forms.with_frm_style input[type="email"]:hover,
.frm_forms.with_frm_style input[type="tel"]:hover,
.frm_forms.with_frm_style input[type="number"]:hover,
.frm_forms.with_frm_style select:hover,
.frm_forms.with_frm_style textarea:hover {
    border-color: var(--mtr-ink, #08132E) !important;
}

.frm_forms.frm_style_formidable-style.with_frm_style input[type="text"]:focus,
.frm_forms.frm_style_formidable-style.with_frm_style input[type="email"]:focus,
.frm_forms.frm_style_formidable-style.with_frm_style input[type="tel"]:focus,
.frm_forms.frm_style_formidable-style.with_frm_style input[type="number"]:focus,
.frm_forms.frm_style_formidable-style.with_frm_style select:focus,
.frm_forms.frm_style_formidable-style.with_frm_style textarea:focus {
    border-color: var(--mtr-accent, #D17147) !important;

    /* Der Schein im Fokus.
     *
     * Formidable schreibt sein Blau hier FEST ins Stylesheet, nicht in eine
     * Variable - gemessen:
     *   .frm_style_formidable-style.with_frm_style .form-field input:focus
     *   { box-shadow: rgba(65,153,253,.6) 0 0 5px 0 }
     *
     * Deshalb hilft an dieser Stelle keine Variable, und der Selektor hier
     * muss .frm_style_formidable-style mitfuehren, um gleichzuziehen.
     * ACHTUNG: Die Klasse haengt am gewaehlten Formidable-Stil. Wird im
     * Plugin ein anderer Stil gewaehlt, heisst sie anders und die Regel
     * greift nicht mehr. */
    box-shadow: 0 0 5px 0 color-mix(in srgb, var(--mtr-accent, #D17147) 60%, transparent) !important;
}

/* Der Fokusring des Browsers bleibt bewusst stehen. Er ist die einzige
 * Rueckmeldung fuer alle, die per Tastatur navigieren, und ohne ihn ist
 * bei einem Formular nicht mehr erkennbar, in welchem Feld man steht. */

.frm_forms.with_frm_style ::placeholder {
    color: var(--mtr-ink, #08132E);
    opacity: 0.45;
}

/* Absendeknopf in der Optik der Theme-Buttons.
 *
 * Der Verlauf braucht !important - ohne ihn setzt sich Formidable durch.
 * Die Farben stammen aus den Palettenvariablen, der Knopf geht also beim
 * Palettenwechsel mit. Die Variablen oben (--submit-bg-color) decken
 * zusaetzlich alles ab, was der Verlauf nicht erreicht, etwa den
 * Deaktiviert-Zustand.
 */

.frm_forms.with_frm_style .frm_button_submit,
.frm_forms.with_frm_style button[type="submit"],
.frm_forms.with_frm_style input[type="submit"] {
    padding: 13px 34px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    border: 0;
    border-radius: 10px;
    background-color: transparent;
    background-image: linear-gradient(135deg,
        var(--mtr-highlight) 0,
        var(--mtr-accent) 50%,
        var(--mtr-ink-2) 100%) !important;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.frm_forms.with_frm_style .frm_button_submit:hover,
.frm_forms.with_frm_style button[type="submit"]:hover,
.frm_forms.with_frm_style input[type="submit"]:hover {
    filter: brightness(1.12);
}

/* Datenschutz-Checkbox
 *
 * Formidable legt das Pflichtfeld-Sternchen in ein eigenes .frm_primary_label
 * UEBER die Checkbox, weil das Feld keine sichtbare Beschriftung hat. Dort
 * steht es allein und wirkt wie ein Fehler. Deshalb: oben ausblenden, per
 * ::after hinter den Text haengen.
 *
 * Die Groessenangabe braucht !important - das Theme setzt Checkboxen auf
 * 16px mit hoeherer Spezifitaet. */

.frm_forms.with_frm_style .frm_form_field:has(.frm_checkbox) > .frm_primary_label {
    display: none;
}

.frm_forms.with_frm_style .frm_checkbox label {
    /* KEIN Flexbox hier.
     *
     * Mit display:flex werden Textknoten und der Link zu eigenen Flex-
     * Elementen, und zwischen ihnen steht die gap - der Datenschutz-Link
     * bekommt dadurch Luecken zum Wort davor und zum Punkt danach.
     * Stattdessen fliesst der Text normal, und die Checkbox wird absolut
     * links daneben gesetzt. */
    display: block;
    position: relative;
    padding-left: 28px;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--mtr-ink, #08132E);
    cursor: pointer;
}

.frm_forms.with_frm_style .frm_checkbox label a {
    color: var(--mtr-accent, #D17147);
    text-decoration: underline;
}

.frm_forms.with_frm_style .frm_checkbox label a:hover {
    color: var(--mtr-ink, #08132E);
}

.frm_forms.with_frm_style .frm_checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Fokus und Rahmen der Checkbox
 *
 * Formidable schreibt auch hier sein Blau fest ins Stylesheet statt in eine
 * Variable, genauso wie bei den Eingabefeldern. Deshalb dieselbe Behandlung:
 * Selektor mit .frm_style_formidable-style, damit die Spezifitaet reicht,
 * und die Farbe aus der Palette.
 */

.frm_forms.frm_style_formidable-style.with_frm_style .frm_checkbox input[type="checkbox"] {
    border-color: color-mix(in srgb, var(--mtr-ink, #08132E) 40%, transparent) !important;
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_checkbox input[type="checkbox"]:hover {
    border-color: var(--mtr-ink, #08132E) !important;
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_checkbox input[type="checkbox"]:checked {
    border-color: var(--mtr-accent, #D17147) !important;
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_checkbox input[type="checkbox"]:focus {
    box-shadow: 0 0 5px 0 color-mix(in srgb, var(--mtr-accent, #D17147) 60%, transparent) !important;
    border-color: var(--mtr-accent, #D17147) !important;
}

/* Das Haekchen selbst
 *
 * Formidable legt es als weisses SVG in das ::before der Checkbox, laesst es
 * aber auf display:none stehen - gemessen im angehakten Zustand. Ohne diese
 * Regel bleibt die Box gefuellt, aber leer. Es liegt NICHT an einer
 * Icon-Schrift, das SVG steckt als Data-URI im Hintergrundbild.
 */

.frm_forms.frm_style_formidable-style.with_frm_style .frm_checkbox input[type="checkbox"]:checked::before {
    display: block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.frm_forms.with_frm_style .frm_form_field.frm_required_field:has(.frm_checkbox) .frm_checkbox label::after {
    content: " *";
    color: var(--mtr-accent, #D17147);
}

/* Fehlermeldungen
 *
 * Eigene Signalfarbe statt Akzent: Bei der Apfel-Palette ist der Akzent
 * gruen, und eine gruene Fehlermeldung liest sich wie eine Bestaetigung.
 * #B42318 liegt bei 6.5:1 gegen Weiss und ist damit auch fuer
 * Sehschwache klar lesbar.
 *
 * Die Rahmenfarbe im Fehlerzustand kommt aus Formidables Variable
 * --border-color-error (Standard #F04438, heller und schwaecher) - eine
 * direkte border-color-Regel prallt daran ab, gemessen.
 *
 * Der Fehler der Checkbox lag rechts neben dem Text: Der Container ist ein
 * Grid, und die Meldung wurde zur dritten Spalte. Auf block umgestellt,
 * dazu 28px Einzug, damit die Meldung unter dem Text beginnt und nicht
 * unter der Box.
 */

.frm_forms.with_frm_style {
    --mtr-error: #B42318;
    --mtr-error-bg: #FEF3F2;
    --border-color-error: #B42318;
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="text"],
.frm_forms.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="email"],
.frm_forms.frm_style_formidable-style.with_frm_style .frm_blank_field input[type="tel"],
.frm_forms.frm_style_formidable-style.with_frm_style .frm_blank_field textarea,
.frm_forms.frm_style_formidable-style.with_frm_style .frm_blank_field .frm_checkbox input[type="checkbox"] {
    border: 2px solid var(--mtr-error) !important;
    background-color: var(--mtr-error-bg) !important;
}

.frm_forms.with_frm_style .frm_error {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    color: var(--mtr-error) !important;
}

/* Ausrufezeichen im Kreis vor jeder Meldung - macht den Fehler auch dann
 * erkennbar, wenn man die Farbe nicht unterscheiden kann. */
.frm_forms.with_frm_style .frm_error::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mtr-error);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.frm_forms.with_frm_style .frm_form_field:has(.frm_checkbox) {
    display: block !important;
    grid-template-columns: 1fr !important;
}

.frm_forms.with_frm_style .frm_form_field:has(.frm_checkbox) .frm_error {
    margin-left: 28px;
}

/* Erfolgsmeldung nach dem Absenden
 *
 * Mit AJAX-Versand ersetzt Formidable das Formular durch diese Meldung.
 * Tint auf Tint mit 14px war zu leise - man uebersah, dass die Nachricht
 * angekommen ist. Hier darf die Akzentfarbe ran, anders als bei Fehlern:
 * Eine Bestaetigung in der Markenfarbe ist genau richtig.
 *
 * Das Haekchen im Kreis wirkt auch ohne Farbwahrnehmung.
 */

.frm_forms.with_frm_style .frm_message,
.frm_message.frm_success_style {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 24px 28px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.5;
    color: var(--mtr-ink, #08132E) !important;
    background-color: color-mix(in srgb, var(--mtr-accent, #D17147) 8%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--mtr-accent, #D17147) 35%, transparent) !important;
    border-left: 4px solid var(--mtr-accent, #D17147) !important;
    border-radius: 10px !important;
}

.frm_forms.with_frm_style .frm_message::before,
.frm_message.frm_success_style::before {
    content: "\2713";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mtr-accent, #D17147);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

/* Slider Revolution: Widget aufspannen
 *
 * Sobald das Modul auf "Gesamtbreite" steht, setzt der Slider seinem
 * Wrapper per Inline-Style width:100% !important. Das Elementor-Widget
 * darum ist ein Blockelement in einem Flex-Zeilen-Container und schrumpft
 * ohne eigene Breite auf seinen Inhalt - also auf die Breite des Wrappers,
 * der wiederum 100% davon nimmt. Beide warten aufeinander, Ergebnis 0.
 *
 * Gemessen: Sektion 1116px, Widget 0px, Wrapper 0px, alle Slides hidden.
 * Mit dieser Regel: Widget 1416px, Modul 1416x780.
 *
 * WICHTIG: Die Regel muss beim Seitenaufbau vorhanden sein. Der Slider
 * rechnet seine Slide-Groessen einmal beim Initialisieren und danach nicht
 * mehr - wer sie nachtraeglich injiziert, sieht zwar das Modul, aber
 * weiterhin leere Slides.
 */

.elementor-widget-slider_revolution {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.elementor-widget-slider_revolution > .elementor-widget-container {
    width: 100% !important;
}

/* Process-Modul: Zahlenkacheln in der Akzentfarbe
 *
 * Das Modul bietet kein Feld fuer die Kachelfarbe - im Editor kommt man nur
 * an den Container. Die eigentliche Kachel ist .qodef-e-icon (98x98, Radius
 * 27), die Zahl darin ein eigenes <span>, das die Farbe nicht erbt.
 *
 * ZWEI FALLEN, beide gemessen:
 *
 * 1. Hier stehen die Palettenvariablen DIREKT, nicht #d17147. Der Generator
 *    des Palette-Switchers liest nur Theme-, Plugin- und Elementor-CSS -
 *    diese Datei ist keine seiner Quellen. Ein Literal wuerde hier also nie
 *    ersetzt und der Switch ginge ins Leere.
 *
 * 2. Das generierte montaro-palettes.css laedt NACH dieser Datei (Enqueue
 *    auf Prioritaet 98) und setzt .qodef-process .qodef-e-item-icon-text auf
 *    var(--mtr-ink). Bei gleicher Spezifitaet gewinnt das spaetere Sheet,
 *    deshalb braucht die Schriftfarbe hier !important.
 *
 * Klasse am Process-Widget setzen: some-process
 */

.some-process .qodef-e-icon {
    background-color: var(--mtr-accent);
}

.some-process .qodef-e-item-icon-text {
    color: var(--mtr-on-dark, #fff) !important;
}

/* Footer-Fusszeile: Copyright und Rechtslinks zentriert in einer Zeile
 *
 * Klasse an der Gutenberg-Gruppe setzen, die beide Widgets enthaelt:
 * some-bottom
 *
 * Gutenberg legt innerhalb der Gruppe einen .wp-block-group__inner-container
 * an - die Widgets sind also Enkel, nicht Kinder. Deshalb wird die
 * Flex-Ausrichtung auf beiden Ebenen gesetzt.
 */

.some-bottom,
.some-bottom .wp-block-group__inner-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 28px;
    text-align: center;
}

/* Die Gruppe selbst steht sonst linksbuendig und nur so breit wie ihr Inhalt.
 *
 * Der umgebende .qodef-grid-item ist ein Flex-Container, deshalb wird sein
 * Kind - das Widget mit der Gruppe darin - nur inhaltsbreit. Ein width:100%
 * an der Gruppe allein nuetzt daher nichts: Sie fuellt dann brav die vollen
 * 692px ihres zu schmalen Elternteils. Erst flex-basis am Widget gibt der
 * Fusszeile die ganze Breite.
 *
 * An Widgets laesst sich keine CSS-Klasse vergeben, deshalb greift die Regel
 * ueber die von WordPress vergebene ID. ACHTUNG: Die Nummer aendert sich,
 * wenn das Widget geloescht und neu angelegt wird - dann hier nachziehen.
 *
 * Die zweite Regel faengt das ab: Sie trifft jedes Block-Widget, das eine
 * .some-bottom-Gruppe enthaelt. Bewusst als EIGENE Regel, nicht als
 * Kommaliste - ein Browser ohne :has() verwirft sonst beide Selektoren
 * mitsamt der ID-Regel.
 */

#block-29 {
    width: 100%;
    flex: 1 1 100%;
}

.widget_block:has(> .some-bottom) {
    width: 100%;
    flex: 1 1 100%;
}

.some-bottom {
    width: 100%;
}

/* Das Copyright-Widget traegt vom Theme margin-bottom: 25px. Flexbox
 * zentriert die Aussenmasse inklusive Margin - der sichtbare Text rutscht
 * dadurch um die Haelfte nach oben. Das !important ist noetig, weil die
 * Theme-Regel spezifischer ist als eine Klassenregel hier. */

.some-bottom .widget {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.some-bottom .widget_nav_menu ul {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.some-bottom .widget_nav_menu li {
    margin: 0;
}

.some-bottom p {
    margin: 0;
}

/* Solvent-Icon-Widget in der Optik der Share-Icons
 *
 * Andere Struktur, gleiches Ziel. Das Share-Widget baut seinen Knopf aus:
 *   a           64x64, Radius 7px, transparent
 *   a::before   Rahmen 1px in --mtr-tint, immer sichtbar
 *   a::after    Palettenverlauf 135°, opacity 0 -> 1 beim Hover, 0.6s
 *
 * Das Solvent-Icon-Widget bringt davon nichts mit - kein <li>, keine
 * Layout-Klassen, Icon-Schrift statt SVG. Deshalb wird die Optik hier
 * nachgebaut statt geerbt. Klasse im Widget unter "Custom Class": some-icon
 *
 * Jedes Icon sitzt in einem eigenen Widget-Container, es gibt also keinen
 * gemeinsamen Flex-Eltern fuer ein gap - der Abstand kommt per margin.
 */

.some-icon {
    margin-right: 24px;
}

.some-icon a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 7px;
    overflow: hidden;   /* schneidet den Hover-Verlauf an der Rundung ab */
}

.some-icon a::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--mtr-tint, #fff);
    border-radius: 7px;
    z-index: 1;
}

.some-icon a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7px;
    opacity: 0;
    transition: opacity 0.6s ease;
    background-image: linear-gradient(135deg,
        var(--mtr-highlight) 0,
        var(--mtr-accent) 55%,
        var(--mtr-ink-2) 100%);
}

.some-icon a:hover::after {
    opacity: 1;
}

/* z-index, damit Rahmen und Symbol ueber dem einblendenden Verlauf liegen */

.some-icon .qodef-icon {
    position: relative;
    z-index: 2;
    font-size: 28px;
    color: var(--mtr-on-dark, #fff);
}

/* Abstand mitwachsen lassen, sonst kleben die groesseren Icons aneinander */

.some .qodef-shortcode-list {
    gap: 24px;
}